@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ============ Tokens (mirrors globals.css) ============ */
:root{
  --background:#f7f9fd;
  --foreground:#243447;

  --brand:#1E40AF;
  --brand-dark:#142B7A;
  --brand-soft:#E6EBFA;
  --brand-rgb:30,64,175;
  --muted:#5C6B84;
  --line:#E1E7F0;
  --shadow-card: 0 12px 32px -16px rgba(36,52,71,0.16);

  --success:#1E9E6B;
  --success-soft:#E4F6EE;
  --warning:#C68A1E;
  --warning-soft:#FBF1DE;
  --alert:#D1573A;
  --alert-soft:#FBEAE4;

  --radius-lg:1.5rem;
  --radius-md:1rem;
  --radius-full:9999px;

  /* ── New brand direction (header/footer only, for now) ──────────────────
     Inter is now the site-wide typeface (see body/h1-h4 below) — this blue
     family is the remaining piece, still scoped to header/footer only until
     the rest of the site's colour palette gets the same rebrand pass. Named
     gm- to stay clearly distinct from --brand while both exist side by side. */
  --gm-blue:#2F4EA2;
  --gm-blue-dark:#1a2e6e;
  --gm-blue-mid:#4966c4;
  --gm-blue-light:#eef3ff;
  --gm-blue-line:#c7d4f9;
  --gm-slate-900:#0f172a;
  --gm-slate-700:#334155;
  --gm-slate-500:#64748b;
  --gm-slate-400:#94a3b8;
  --gm-slate-200:#e2e8f0;
  --gm-slate-100:#f1f5f9;
  --gm-slate-50:#f8fafc;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--background);
  color:var(--foreground);
  font-family:'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{margin:0;font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;}
p{margin:0;}
button{font-family:inherit;cursor:pointer;background:none;border:none;}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}

/* ============ Reimplemented component classes (match globals.css exactly) ============ */
.container-page{margin-left:auto;margin-right:auto;width:100%;max-width:80rem;padding-left:1rem;padding-right:1rem;}
@media (min-width:768px){.container-page{padding-left:1.5rem;padding-right:1.5rem;}}

.surface{border-radius:var(--radius-lg);border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-card);}

.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--radius-full);background:var(--brand);
  padding:0.75rem 1.25rem;font-size:0.875rem;font-weight:800;color:#fff;
  transition:background .18s ease, transform .18s ease; border:1px solid transparent;
}
.btn-primary:hover{background:var(--brand-dark); transform:translateY(-1px);}

.btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--radius-full);border:1px solid rgba(var(--brand-rgb),0.25); background:#fff;
  padding:0.75rem 1.25rem;font-size:0.875rem;font-weight:800;color:var(--brand-dark);
  transition:border-color .18s ease, background .18s ease;
}
.btn-secondary:hover{border-color:rgba(var(--brand-rgb),0.45); background:var(--brand-soft);}

.btn-dark{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--radius-full);background:var(--foreground);
  padding:0.75rem 1.25rem;font-size:0.875rem;font-weight:800;color:#fff;
  transition:background .18s ease, transform .18s ease;
}
.btn-dark:hover{background:#1b2635; transform:translateY(-1px);}

.section-pad{padding:1.5rem;}
@media (min-width:768px){.section-pad{padding:2rem;}}

.eyebrow{font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.2em;color:var(--brand);}

.title-lg{font-size:2.25rem;font-weight:900;letter-spacing:-0.015em;color:var(--brand);line-height:1.15;}
@media (min-width:768px){.title-lg{font-size:3rem;}}

.title-md{font-size:1.5rem;font-weight:900;letter-spacing:-0.01em;color:var(--brand);line-height:1.22;}
@media (min-width:768px){.title-md{font-size:1.875rem;}}

.copy-muted{font-size:1rem;line-height:1.8;color:var(--muted);}

.card-grid-3{display:grid;gap:1.25rem;grid-template-columns:1fr;}
@media (min-width:768px){.card-grid-3{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1280px){.card-grid-3{grid-template-columns:repeat(3,1fr);}}

.chip{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-full);border:1px solid rgba(var(--brand-rgb),0.18);background:var(--brand-soft);padding:0.5rem 1rem;font-size:0.875rem;font-weight:700;color:var(--brand-dark);}

.field-input{width:100%;border-radius:var(--radius-md);border:1px solid var(--line);background:#fff;padding:0.75rem 1rem;font-size:0.9375rem;font-family:inherit;color:var(--foreground);}
.field-input:focus{outline:2px solid var(--brand);outline-offset:1px;}
.field-label{display:block;font-size:0.8125rem;font-weight:700;color:var(--foreground);margin-bottom:6px;}

/* ============ Header / Nav ============
   First piece of the new brand direction (see --gm-* tokens above): the new
   blue, sticky translucent bar with a plain two-tone wordmark — no icon
   mark, per the design reference this was built from. Colour palette is
   scoped to header.site-header only, so the rest of the site keeps its
   current colours until the wider rebrand happens; typeface is Inter
   site-wide now (see body/h1-h4 above), so no separate font-family here. */
header.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.95);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--gm-slate-200);
}
.utility-bar{background:var(--gm-blue-light);border-bottom:1px solid var(--gm-blue-line);}
.utility-bar-inner{display:flex;align-items:center;justify-content:center;gap:5px;height:30px;font-size:12.5px;color:var(--gm-slate-700);}
.utility-bar-inner a{font-weight:700;color:var(--gm-blue);}
.utility-bar-inner a:hover{text-decoration:underline;}
@media (max-width:560px){.utility-bar-inner{font-size:11.5px;padding:0 8px;text-align:center;}}
.nav-row{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px;}
.logo{display:flex;align-items:baseline;gap:0;font-weight:900;font-size:20px;letter-spacing:-.01em;flex-shrink:0;}
.logo-mark{color:var(--gm-blue);}
.logo-word{color:var(--gm-slate-900);}
nav.primary-nav{display:flex;align-items:center;gap:2px;}
nav.primary-nav a{font-size:14px;font-weight:600;color:var(--gm-slate-700);padding:8px 14px;border-radius:.5rem;transition:background .15s ease,color .15s ease;}
nav.primary-nav a:hover{background:var(--gm-slate-50);color:var(--gm-slate-900);}
nav.primary-nav a.active{background:var(--gm-blue-light);color:var(--gm-blue);}
.nav-actions{display:flex;align-items:center;gap:10px;}
.nav-login{font-size:14px;font-weight:600;color:var(--gm-slate-700);white-space:nowrap;padding:.5rem .9rem;border-radius:.65rem;border:1px solid var(--gm-slate-200);transition:border-color .15s ease,color .15s ease;}
.nav-login:hover{border-color:var(--gm-blue);color:var(--gm-blue);}
/* header.site-header (not just .nav-actions >) so the same new-brand
   treatment applies to the CTA duplicated inside .mobile-nav-actions for
   the collapsed-menu state below — otherwise it'd silently fall back to
   the old site-wide .btn-primary colour there. */
header.site-header .btn-primary{
  background:var(--gm-blue);color:#fff;border-radius:.65rem;
  padding:.5rem 1rem;font-size:14px;font-weight:800;
  transition:background .15s ease,transform .15s ease;
}
header.site-header .btn-primary:hover{background:var(--gm-blue-dark);transform:translateY(-1px);}
.nav-toggle{display:none;padding:12px;margin:-12px;flex-shrink:0;}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--gm-slate-900);margin:4px 0;border-radius:2px;}
.mobile-nav-actions{display:none;}

/* Below 960px, the full text nav collapses into the hamburger menu, so the
   visible header row only has to fit the logo and the toggle button — Log
   In / Start Practice move into that same dropdown instead of squeezing
   into the collapsed row alongside the toggle, which is what made the bar
   feel cramped on phones (three tap targets fighting the logo for a 78px
   row). */
@media (max-width:960px){
  .nav-row{height:64px;}
  nav.primary-nav{display:none;}
  .nav-toggle{display:block;}
  .nav-actions{gap:8px;}
  .nav-actions .nav-login, .nav-actions > .btn-primary{display:none;}
  nav.primary-nav.open-mobile{
    display:flex;flex-direction:column;align-items:stretch;gap:4px;
    position:absolute;top:64px;left:0;right:0;background:#fff;
    padding:18px 20px 22px;border-bottom:1px solid var(--gm-slate-200);
    box-shadow:0 1px 3px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.04);
    max-height:calc(100vh - 64px);overflow-y:auto;
  }
  nav.primary-nav.open-mobile > a{padding:12px 4px;border-radius:0;border-bottom:1px solid var(--gm-slate-100);font-size:15.5px;}
  nav.primary-nav.open-mobile > a:hover{background:transparent;}
  nav.primary-nav.open-mobile > a:last-of-type{border-bottom:none;}
  nav.primary-nav.open-mobile .mobile-nav-actions{
    display:flex;flex-direction:column;gap:10px;margin-top:12px;padding-top:4px;
  }
  nav.primary-nav.open-mobile .mobile-nav-actions .btn-primary{width:100%;text-align:center;}
  nav.primary-nav.open-mobile .mobile-nav-actions .nav-login{text-align:center;padding:.65rem 0;}
}


/* ============ Signature: the marking tick ============
   The same tick used throughout the site to mark a correct answer, scaled up
   as a quiet watermark. It is the product's own promise (instant marking)
   rather than an abstract texture, so it only appears on section openers.
   Kept behind content and hidden from assistive tech via the ::before. */
.tick-mark{position:relative;overflow:hidden;isolation:isolate;}
.tick-mark::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:50%;right:-90px;width:460px;height:460px;transform:translateY(-50%) rotate(-8deg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E40AF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:contain;
  opacity:0.05;
}
.cta-band.tick-mark::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  opacity:0.06;
}
@media (max-width:960px){
  .tick-mark::before{width:300px;height:300px;right:-110px;opacity:0.04;}
}

/* ============ Hero ============ */
.hero{padding:72px 0 56px;}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.hero h1{font-size:clamp(32px,4vw,48px);font-weight:900;letter-spacing:-0.02em;line-height:1.15;color:var(--foreground);margin:16px 0 18px;}
.hero h1 .accent{color:var(--brand);}
.hero .lede{font-size:17px;line-height:1.7;color:var(--muted);max-width:460px;margin-bottom:28px;}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px;}
.trust-row{display:flex;gap:22px;flex-wrap:wrap;}
.trust-item{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);font-weight:600;}
.trust-item svg{width:15px;height:15px;color:var(--success);flex-shrink:0;}

/* ============ Ledger / dashboard card (soft, rounded, brand-blue) ============ */
.ledger-card{padding:26px;}
.ledger-card .head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line);}
.ledger-card .head .who{font-weight:800;font-size:16px;}
.ledger-card .head .when{font-size:12px;color:var(--muted);}
.stat-row{display:flex;gap:22px;margin-bottom:20px;}
.stat-row .stat .num{font-size:26px;font-weight:800;line-height:1;color:var(--foreground);}
.stat-row .stat.up .num{color:var(--success);}
.stat-row .stat .label{font-size:11.5px;color:var(--muted);margin-top:6px;font-weight:600;}
.skill-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid #F0F3F8;font-size:14px;}
.skill-row:last-child{border-bottom:none;}
.skill-row .who{display:flex;align-items:center;gap:10px;font-weight:600;}
.skill-row .pct{font-weight:800;font-size:14px;}
.dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.dot.strong{background:var(--success);}
.dot.dev{background:var(--warning);}
.dot.needs{background:var(--alert);}
.skill-row.needs .pct{color:var(--alert);}
.next-box{margin-top:18px;padding:14px 16px;background:var(--brand-soft);border-radius:var(--radius-md);}
.next-box .t{font-size:12.5px;font-weight:800;color:var(--brand-dark);}
.next-box .s{font-size:12px;color:var(--muted);margin-top:3px;}

/* ============ Feature strip ============ */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;}
.strip-row{display:grid;grid-template-columns:repeat(4,1fr);}
.strip-item{padding:20px 24px;border-left:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:9px;}
.strip-item:first-child{border-left:none;}
.strip-item svg{width:15px;height:15px;color:var(--success);flex-shrink:0;}
@media (max-width:900px){.strip-row{grid-template-columns:repeat(2,1fr);}.strip-item:nth-child(odd){border-left:none;}}
@media (max-width:560px){.strip-row{grid-template-columns:1fr;}.strip-item{border-left:none!important;border-top:1px solid var(--line);}.strip-item:first-child{border-top:none;}}

/* ============ Sections ============ */
section{padding:88px 0;}
.section-head{max-width:640px;margin-bottom:48px;}
.section-head p.copy-muted{margin-top:14px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}

/* ============ Steps ============ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.step{padding:24px;}
.step .n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:var(--brand-soft);color:var(--brand-dark);font-weight:800;font-size:14px;margin-bottom:16px;}
.step h3{font-size:17px;font-weight:800;margin-bottom:8px;color:var(--foreground);}
.step p{font-size:14px;color:var(--muted);}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.steps{grid-template-columns:1fr;}}

/* ============ Practice-type / option cards ============ */
.ptype{padding:26px;display:flex;flex-direction:column;gap:14px;transition:transform .18s ease, box-shadow .18s ease;}
.ptype:hover{transform:translateY(-3px);box-shadow:0 18px 36px -16px rgba(36,52,71,0.22);}
.ptype h3{font-size:19px;font-weight:800;}
.ptype p.desc{font-size:14px;color:var(--muted);}
.ptype ul{display:flex;flex-direction:column;gap:8px;}
.ptype ul li{font-size:13.5px;display:flex;gap:8px;color:var(--foreground);}
.ptype ul li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);flex-shrink:0;margin-top:6px;}
.ptype .foot{margin-top:auto;font-size:13.5px;font-weight:700;color:var(--brand);}

/* ============ Feature row (3-up, icon top) ============ */
.feature-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.feature-row .f{padding:22px;}
.feature-row .f .ic{width:38px;height:38px;border-radius:10px;background:var(--brand-soft);color:var(--brand-dark);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.feature-row .f .ic svg{width:18px;height:18px;}
.feature-row .f strong{display:block;font-size:15.5px;margin-bottom:6px;}
.feature-row .f span{font-size:14px;color:var(--muted);}
@media (max-width:900px){.feature-row{grid-template-columns:1fr;}}

/* ============ Pricing ============ */
.pricing-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.pcard{padding:30px;display:flex;flex-direction:column;gap:16px;position:relative;}
.pcard.featured{border:2px solid var(--brand);}
.pcard .badge{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--brand-dark);}
.pcard h3{font-size:20px;font-weight:800;}
.pcard .price{font-size:30px;font-weight:900;color:var(--foreground);}
.pcard .price small{font-size:13px;font-weight:600;color:var(--muted);}
.pcard ul{display:flex;flex-direction:column;gap:10px;font-size:13.5px;}
.pcard ul li{display:flex;gap:9px;align-items:flex-start;}
.pcard ul li.off{color:#A8B2C2;}
.pcard ul li svg{width:15px;height:15px;color:var(--success);flex-shrink:0;margin-top:2px;}
.pcard ul li.off svg{color:#C6CCD8;}
@media (max-width:900px){.pricing-wrap{grid-template-columns:1fr;}}

/* ============ Two-column sections (mobile-safe; several pages previously set grid-template-columns inline, which a media query can never override) ============ */
.ledger-wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
@media (max-width:900px){.ledger-wrap{grid-template-columns:1fr;gap:40px;}}

.split-uneven{display:grid;grid-template-columns:1fr 1.3fr;}
@media (max-width:900px){.split-uneven{grid-template-columns:1fr;}}

.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
@media (max-width:560px){.form-row-2{grid-template-columns:1fr;}}

.pricing-wrap.cols-2{grid-template-columns:1fr 1fr;}
@media (max-width:640px){.pricing-wrap.cols-2{grid-template-columns:1fr;}}

.card-grid-3.cols-2{grid-template-columns:1fr 1fr;}
@media (max-width:768px){.card-grid-3.cols-2{grid-template-columns:1fr;}}

.steps.cols-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:900px){.steps.cols-3{grid-template-columns:1fr;}}

.compare-table{width:100%;border-collapse:collapse;font-size:14px;}
.compare-table th,.compare-table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);}
.compare-table th{font-weight:800;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em;}
.compare-table td.center, .compare-table th.center{text-align:center;}

/* ============ FAQ ============ */
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;padding:22px 4px;font-size:16px;font-weight:700;color:var(--foreground);}
.faq-q .plus{color:var(--brand);font-size:20px;font-weight:400;transition:transform .2s ease;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.faq-a p{padding:0 4px 22px;font-size:14.5px;line-height:1.7;color:var(--muted);max-width:640px;}

/* ============ Roadmap ============ */
.roadmap-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.roadmap-card{padding:26px;display:flex;flex-direction:column;gap:12px;background:var(--foreground);color:#fff;border:none;}
.roadmap-card .stage{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#9FB6F0;}
.roadmap-card h3{font-size:17px;font-weight:800;}
.roadmap-card p{font-size:13.5px;color:#B9C4D6;}
@media (max-width:900px){.roadmap-wrap{grid-template-columns:1fr;}}

/* ============ CTA band ============ */
.cta-band{background:var(--foreground);color:#fff;text-align:center;}
.cta-band .eyebrow{color:#9FB6F0;}
.cta-band h2{color:#fff;font-size:clamp(26px,3.2vw,36px);font-weight:900;letter-spacing:-0.015em;line-height:1.2;}
.cta-band p{color:#B9C4D6;margin:16px auto 28px;max-width:480px;font-size:16px;line-height:1.7;}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.cta-actions .btn-secondary{background:transparent;border-color:#3E4C63;color:#fff;}
.cta-actions .btn-secondary:hover{background:#1E2A3D;}

/* ============ Footer ============
   Same new-brand pass as the header (see comment there) — white ground
   instead of the old dark-navy footer, plus the CTA-strip pattern from the
   design reference. footer-brand no longer needs a colour override: the
   base .logo styling (blue mark + slate-900 word) already reads correctly
   on white without one. */
footer.site-footer{
  background:#fff;color:var(--gm-slate-700);padding:56px 0 32px;font-size:14px;
  border-top:1px solid var(--gm-slate-200);
}
.footer-top{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px;padding-bottom:32px;}
.footer-brand p{margin-top:14px;max-width:260px;color:var(--gm-slate-500);font-size:13.5px;line-height:1.6;}
.footer-col h4{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;color:var(--gm-slate-400);margin-bottom:14px;font-weight:800;}
.footer-col ul{display:flex;flex-direction:column;gap:11px;}
.footer-col a{color:var(--gm-slate-700);}
.footer-col a:hover{color:var(--gm-blue);}

.footer-cta-strip{
  margin-top:32px;background:var(--gm-blue-light);border:1px solid rgba(47,78,162,.15);
  border-radius:1rem;padding:1rem 1.25rem;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
}
.footer-cta-strip p{font-size:.8125rem;color:var(--gm-slate-900);font-weight:800;margin:0;}
.footer-cta-strip small{display:block;color:var(--gm-slate-500);font-weight:400;font-size:.75rem;margin-top:2px;}
.footer-cta-strip a{
  flex-shrink:0;background:var(--gm-blue);color:#fff;border-radius:.65rem;
  padding:.55rem 1rem;font-size:.8125rem;font-weight:800;transition:background .15s ease;
}
.footer-cta-strip a:hover{background:var(--gm-blue-dark);}

.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:24px;margin-top:24px;border-top:1px solid var(--gm-slate-100);
  flex-wrap:wrap;gap:12px;font-size:13px;color:var(--gm-slate-500);
}
.footer-badges{display:flex;gap:18px;flex-wrap:wrap;}
.footer-badges span{display:flex;align-items:center;gap:6px;}
.footer-badges svg{width:13px;height:13px;color:var(--success);}
@media (max-width:900px){.footer-top{grid-template-columns:1fr 1fr;row-gap:30px;}}
@media (max-width:560px){.footer-top{grid-template-columns:1fr;}}

/* ============ Generic page-header band (interior pages) ============ */
.page-hero{padding:64px 0 52px;}
.page-hero .lede{font-size:17px;line-height:1.7;color:var(--muted);max-width:600px;margin-top:16px;}
.page-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;}

/* ============ Reveal on scroll ============ */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease;}
  .reveal.is-visible{opacity:1;transform:translateY(0);}
}

/* ============ Focus visibility ============
   Buttons/links are custom-styled, so the UA default outline is easy to lose
   against the brand fills. One consistent ring everywhere instead. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible,
input:focus-visible{
  outline:3px solid var(--brand);
  outline-offset:2px;
  border-radius:var(--radius-md);
}
.cta-band a:focus-visible,
footer.site-footer a:focus-visible,
.roadmap-card a:focus-visible{outline-color:#fff;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}

/* ============ Responsive base ============ */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:40px;}
}
@media (max-width:600px){
  .container-page{padding-left:20px;padding-right:20px;}
  section{padding:60px 0;}
  .hero{padding:36px 0 40px;}
  .hero-ctas .btn-primary, .hero-ctas .btn-secondary{width:100%;}
}

/* ============ Legal page long-form content ============ */
.legal-updated{font-size:0.8125rem;color:var(--muted);margin-top:10px;}
.legal-content{max-width:52rem;margin:0 auto;}
.legal-content h2{font-size:1.375rem;font-weight:800;color:var(--foreground);margin-top:2.5rem;}
.legal-content h2:first-child{margin-top:0;}
.legal-content h3{font-size:1.0625rem;font-weight:700;color:var(--foreground);margin-top:1.75rem;}
.legal-content p{font-size:0.9375rem;line-height:1.8;color:var(--muted);margin-top:0.9rem;}
.legal-content ul{margin-top:0.9rem;display:flex;flex-direction:column;gap:0.6rem;}
.legal-content ul li{font-size:0.9375rem;line-height:1.7;color:var(--muted);padding-left:1.4rem;position:relative;}
.legal-content ul li::before{content:"";position:absolute;left:0;top:0.6em;width:6px;height:6px;border-radius:50%;background:var(--brand);opacity:0.55;}
.legal-content a{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.legal-content strong{color:var(--foreground);}
.legal-note{border-radius:var(--radius-md);border:1px solid rgba(198,138,30,.25);background:var(--warning-soft);padding:1rem 1.25rem;margin-top:1.5rem;}
.legal-note p{color:#8A611A;margin-top:0;font-size:0.875rem;line-height:1.7;}