/* =====================================================================
   main-page rules shared by the sub pages (loaded after site.css):
   container, glass header, sky-blue page head, pill buttons, FAQ blocks,
   closing call-to-action, footer, entrance motion.
   Remove the <link> to this file to go back to the previous sub-page look.
   ===================================================================== */
:root{ --maxw:1480px; --gutter:clamp(20px, 3vw, 40px); --hdr:88px; --hero-bg:#EFF6FF; --ease-out:cubic-bezier(.2,.7,.2,1); --sec-gap:clamp(72px, 8vw, 120px); --fs-h3x:clamp(19px, 1.6vw, 22px); --fs-lead:clamp(17px, 1.3vw, 19px); }
@media (max-width:860px){ :root{ --hdr:68px; } }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --hero-bg:var(--surface-alt); } }
:root[data-theme="dark"]{ --hero-bg:var(--surface-alt); }
.wrap{ max-width:var(--maxw); padding-left:var(--gutter); padding-right:var(--gutter); }
body{ font-size:16px; line-height:1.6; }

/* header: fixed clear-glass bar with a soft bottom edge */
header.site-header{ position:fixed; top:0; left:0; right:0; background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:0; }
header.site-header::before{
  content:""; position:absolute; left:0; right:0; top:0; bottom:-30px; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, color-mix(in srgb, var(--bg) 58%, transparent) 0%, color-mix(in srgb, var(--bg) 46%, transparent) 70%, transparent 100%);
  -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3);
  -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 calc(100% - 30px), transparent 100%);
  mask-image:linear-gradient(to bottom, #000 0, #000 calc(100% - 30px), transparent 100%);
}
header.site-header:has(.navrow.mobile-open)::before{ bottom:0; background:var(--bg); -webkit-mask-image:none; mask-image:none; }

/* buttons: flat pill */
.cta{ box-shadow:none; height:52px; padding:0 26px; border-radius:999px; font-size:16px; transition:transform .18s var(--ease-out), background-color .18s ease; }
.cta:hover{ transform:translateY(-2px); }
.cta:active{ transform:translateY(0) scale(.98); }
.cta.ghost{ background:#fff; color:var(--brand-strong); border:1.5px solid color-mix(in srgb, var(--brand) 28%, white); }
.cta.ghost:hover{ background:var(--brand-light); }
.cta.md{ height:44px; padding:0 20px; font-size:14px; }
.cta.sm{ height:38px; padding:0 16px; font-size:13.5px; }

/* page head: the sky-blue hero tone runs under the glass header, semibold title */
.page-header{
  position:relative; border-bottom:0; background:var(--hero-bg);
  padding-top:calc(var(--hdr) + clamp(36px, 4.5vw, 64px)); padding-bottom:clamp(40px, 5vw, 68px);
  box-shadow:0 0 0 100vmax var(--hero-bg); clip-path:inset(0 -100vmax);
}
.page-header .eyebrow{ display:none; }
.page-header .crumb{ font-size:14px; color:var(--muted); margin-bottom:18px; }
.page-header h1{ font-size:clamp(28px, 3.5vw, 50px); line-height:1.2; font-weight:600; letter-spacing:-.035em; margin-top:0; }
.page-header p{ font-size:var(--fs-lead); line-height:1.7; color:var(--ink); max-width:62ch; margin:20px 0 0; }
.article-header{ position:relative; border-bottom:0; background:var(--hero-bg); padding-top:calc(var(--hdr) + clamp(36px, 4.5vw, 64px)); padding-bottom:clamp(36px, 4vw, 56px); box-shadow:0 0 0 100vmax var(--hero-bg); clip-path:inset(0 -100vmax); }
.article-header h1{ font-weight:600; letter-spacing:-.035em; }

/* FAQ: rounded blocks */
.faq{ border-top:0; display:flex; flex-direction:column; gap:10px; }
.faq details{ border:0; background:var(--surface-alt); border-radius:18px; padding:0; transition:background-color .2s ease; }
.faq details:hover{ background:color-mix(in srgb, var(--surface-alt) 88%, var(--brand)); }
.faq summary{ font-size:var(--fs-h3x); font-weight:700; padding:22px 24px; }
.faq summary::after{ font-size:26px; font-weight:400; }
.faq details p{ color:var(--ink); padding:0 24px 24px; margin:0; max-width:62ch; font-size:16px; line-height:1.75; }

/* closing call-to-action, same as the home page */
.final{ text-align:center; background:var(--hero-bg); padding:var(--sec-gap) 0; }
.final .billy{ width:200px; height:auto; display:block; margin:0 auto 32px; animation:float-bob 3.2s ease-in-out infinite; }
.final h2{ font-size:clamp(21px, 3.2vw, 44px); max-width:none; font-weight:800; letter-spacing:-.025em; line-height:1.22; }
.final p{ max-width:46ch; margin:24px auto 0; font-size:var(--fs-lead); line-height:1.65; }
.hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-top:40px; }
.final .hero-ctas{ justify-content:center; }
@keyframes float-bob{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }

/* footer */
footer.site-footer{ border-top:0; padding:40px 0; }
footer.site-footer .footrow{ max-width:var(--maxw); padding:0 var(--gutter); font-size:14px; }

/* entrance motion: text drops in from above, replays every time it scrolls into view */
.js [data-rise]{ opacity:0; transform:translateY(-28px); transition:opacity .6s ease, transform .9s cubic-bezier(.2, 1.15, .4, 1); }
.js [data-rise].in{ opacity:1; transform:none; }
.js [data-split] .ln{ display:block; overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em; }
.js [data-split] .lt{ display:block; opacity:0; transform:translateY(-110%); transition:opacity .5s ease, transform .95s cubic-bezier(.2, .8, .2, 1); }
.js [data-split].in .lt{ opacity:1; transform:none; transition-delay:calc(var(--base, 0ms) + var(--i, 0) * 110ms); }
@media (prefers-reduced-motion: reduce){
  .js [data-rise], .js [data-split] .lt{ opacity:1; transform:none; transition:none; }
  .final .billy{ animation:none; }
}

/* rounded blocks, same radius family as the home page cards */
.pkg-card, .promo-hero, .spec-wrap, .report-card, .side-card-box{ border-radius:24px; }