/* ═══════════════════════════════════════════════════════════════════
   pages-a.css — design-A treatment for the INNER pages (everything
   except the homepage and the blog). Loaded only by inner pages,
   alongside style.css + home-a.css, under body.lp-a.

   - Reuses the homepage's .unified-hero / .hero-grid system (home-a.css)
     but adapts it to a shorter page hero (.page-hero).
   - Restyles the inner-page section components (.block, .feature-item,
     cards, tables, steps, .cta-band) into the design-A card aesthetic.

   Safe for the homepage: the homepage does NOT load this file, so these
   overrides only ever apply to inner pages.
   ═══════════════════════════════════════════════════════════════════ */

/* ---- Inner-page hero: fills the first viewport so the network-web background
   covers the whole first glance, matching the homepage hero. ---- */
body.lp-a .unified-hero.page-hero{
  min-height:calc(100vh - var(--header-height));
  min-height:calc(100svh - var(--header-height));
  padding:56px 0;
  border-bottom:1px solid var(--line);
}
/* Limit the network-web mesh to the content frame (container width) instead of
   bleeding edge-to-edge across the viewport. */
body.lp-a .unified-hero.page-hero .hero-bg-web{
  left:50%; right:auto; transform:translateX(-50%);
  width:min(100%, 1208px);
}
body.lp-a .unified-hero.page-hero .hero-grid{ align-items:center; gap:56px; }
body.lp-a .unified-hero.page-hero .eyebrow{
  color:var(--coral); font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  font-size:12.5px; margin:0 0 16px; display:inline-block;
}
body.lp-a .unified-hero.page-hero h1{
  font-size:clamp(33px,4.1vw,50px); line-height:1.05; letter-spacing:-0.03em;
  text-wrap:balance; margin-bottom:20px;
}
body.lp-a .unified-hero.page-hero .lede{ font-size:18px; color:var(--ink-2); max-width:560px; margin:0; }

/* Single-column hero (pages with no right-side visual): center it */
body.lp-a .unified-hero.page-hero.solo .hero-grid{ grid-template-columns:1fr; max-width:820px; margin:0 auto; text-align:center; }
body.lp-a .unified-hero.page-hero.solo .hero-copy{ text-align:center; }
body.lp-a .unified-hero.page-hero.solo .lede{ margin-left:auto; margin-right:auto; }
body.lp-a .unified-hero.page-hero.solo .hero-ctas{ justify-content:center; }

/* ---- Section rhythm + heads ---- */
body.lp-a .block .section-head{ max-width:760px; margin:0 auto 42px; text-align:center; }
body.lp-a .block .section-head .eyebrow{
  color:var(--coral); font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  font-size:12px; display:block; margin-bottom:12px;
}
body.lp-a .block .section-head h2{ font-size:clamp(27px,3.1vw,37px); letter-spacing:-0.025em; line-height:1.12; }
body.lp-a .block .section-head .lede{ margin-top:16px; color:var(--ink-2); font-size:17px; }

/* ---- Design-A card aesthetic (feature / pod-problem / step / verdict / definition) ---- */
body.lp-a .feature-item,
body.lp-a .pod-problem-card,
body.lp-a .step-card,
body.lp-a .verdict-card,
body.lp-a .definition-card{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:26px 24px; box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body.lp-a .feature-item:hover,
body.lp-a .pod-problem-card:hover,
body.lp-a .step-card:hover,
body.lp-a .verdict-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:#E6DFD3; }
body.lp-a .feature-item h4,
body.lp-a .pod-problem-card h3,
body.lp-a .step-card h3,
body.lp-a .verdict-card h3{ color:var(--ink); letter-spacing:-0.01em; }
body.lp-a .pod-problem-card .pod-problem-tag,
body.lp-a .verdict-card .verdict-tag,
body.lp-a .step-card .step-num{
  color:var(--coral); font-weight:600; font-size:11.5px; letter-spacing:.07em; text-transform:uppercase;
  display:block; margin-bottom:10px;
}
body.lp-a .verdict-card.win{ border-color:#F2D2C5; box-shadow:var(--shadow-md); }
body.lp-a .pod-problem-line.answer{ color:var(--ink); }

/* ---- Callout / definition ---- */
body.lp-a .callout,
body.lp-a .definition-card{ background:var(--paper-soft); border-radius:16px; }
body.lp-a .callout{ border:1px solid var(--line); border-left:3px solid var(--coral); padding:22px 26px; box-shadow:none; }
body.lp-a .callout-tag,
body.lp-a .definition-tag{
  color:var(--coral); font-weight:600; font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; margin-bottom:8px;
}

/* ---- Comparison table ---- */
body.lp-a .compare-table{ border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm); }
body.lp-a .compare-table th{ background:var(--paper-soft); }
body.lp-a .compare-table th.you,
body.lp-a .compare-table td.you{ background:var(--coral-wash); }
body.lp-a .compare-table .win-mark{ color:var(--coral-deep); font-weight:600; }

/* ---- Steps row ---- */
body.lp-a .step-card .step-num{ margin-bottom:14px; }

/* ---- Closing CTA band (design-A dark) ---- */
body.lp-a .cta-band{ background:var(--ink); color:#fff; padding:72px 0; text-align:center; }
body.lp-a .cta-band h2{ color:#fff; font-size:clamp(26px,3vw,36px); letter-spacing:-0.02em; }
body.lp-a .cta-band p{ color:#B7B2AB; max-width:660px; margin:14px auto 0; }
body.lp-a .cta-band-actions{ margin-top:26px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
body.lp-a .cta-band .btn-ghost{ border-color:rgba(255,255,255,.28); color:#fff; background:transparent; }
body.lp-a .cta-band .btn-ghost:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.45); }

/* ---- Responsive ---- */
@media (max-width:900px){
  body.lp-a .unified-hero.page-hero .hero-grid{ grid-template-columns:1fr; gap:44px; text-align:center; }
  body.lp-a .unified-hero.page-hero .hero-copy{ text-align:center; }
  body.lp-a .unified-hero.page-hero .lede{ margin-left:auto; margin-right:auto; }
  body.lp-a .unified-hero.page-hero .hero-ctas{ justify-content:center; }
  body.lp-a .unified-hero.page-hero .hero-visual{ max-width:520px; margin:0 auto; }
}