/* Grinkif website — one stylesheet, no framework. Brand tokens match the app (public/index.html). */
:root{
  --paper:#FBF6E3;
  --paper-2:#FFF9EC;
  --card:#FFFFFF;
  --ink:#1E2B1C;
  --ink-soft:#4E5E4A;
  --line:#E6E0CB;
  --brand:#17784D;
  --brand-deep:#0F5A3A;
  --brand-ink:#10683F;
  --chikiti:#199862;
  --leaf:#4DCC7D;
  --mint:#E6F4EA;
  --mint-2:#D3EEDC;
  --marigold:#F2A73B;
  --marigold-soft:#FDEFD3;
  --gold-ink:#8A5A08;
  --coral:#E2654F;
  --coral-soft:#FBE6E1;
  --sky:#E3F1FA;
  --sky-ink:#1D5E86;
  --plum-soft:#EFE8FA;
  --plum-ink:#5A3E96;
  --shadow-sm:0 1px 2px rgba(30,43,28,.06), 0 2px 8px rgba(30,43,28,.06);
  --shadow:0 2px 4px rgba(30,43,28,.05), 0 12px 32px rgba(30,43,28,.10);
  --radius:22px;
  --radius-sm:14px;
  --font-display:"Baloo 2","Segoe UI Rounded",system-ui,sans-serif;
  --font-body:"Nunito","Segoe UI",system-ui,-apple-system,sans-serif;
  --wrap:1180px;
  color-scheme:light;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px; }
body{
  margin:0; background:#FFFFFF; color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ max-width:100%; height:auto; display:block; }
a{ color:var(--brand); text-underline-offset:3px; text-decoration-thickness:2px; }
a:hover{ color:var(--brand-deep); }
h1,h2,h3,h4{ font-family:var(--font-display); line-height:1.12; margin:0 0 .5em; color:var(--ink); letter-spacing:-.01em; }
h1{ font-size:clamp(2.3rem, 1.4rem + 3.6vw, 4.1rem); font-weight:800; }
h2{ font-size:clamp(1.8rem, 1.25rem + 2vw, 2.9rem); font-weight:800; }
h3{ font-size:1.32rem; font-weight:700; }
h4{ font-size:1.1rem; font-weight:700; }
p{ margin:0 0 1em; }
ul,ol{ padding-left:1.25em; }
strong{ font-weight:800; }

:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; border-radius:8px; }
.skip-link{ position:absolute; left:12px; top:-60px; z-index:100; background:var(--ink); color:#fff; padding:10px 16px; border-radius:10px; font-weight:800; }
.skip-link:focus{ top:12px; color:#fff; }
.visually-hidden{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 20px; }
.wrap-narrow{ max-width:820px; }
.section{ padding:clamp(56px, 7vw, 104px) 0; position:relative; }
.section-tight{ padding:clamp(40px, 5vw, 64px) 0; }
.bg-paper{ background:var(--paper-2); }
.bg-mint{ background:var(--mint); }
.bg-brand{ background:var(--brand-deep); color:#fff; }
.bg-brand h2,.bg-brand h3,.bg-brand p{ color:#fff; }
.center{ text-align:center; }
.section-head{ max-width:760px; margin:0 auto clamp(32px,4vw,56px); text-align:center; }
.section-head p{ font-size:1.12rem; color:var(--ink-soft); }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 14px;
  font-family:var(--font-display); font-weight:700; font-size:.95rem; letter-spacing:.02em;
  color:var(--brand-deep); background:var(--mint); border-radius:999px; padding:5px 14px;
}
.eyebrow.on-dark{ background:rgba(255,255,255,.14); color:#fff; }
.lead{ font-size:clamp(1.08rem, 1rem + .4vw, 1.3rem); color:var(--ink-soft); }
.muted{ color:var(--ink-soft); }
.small{ font-size:.9rem; }

/* ---------- buttons ---------- */
.btn{
  --b:var(--brand); --bd:var(--brand-deep); --t:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:12px 26px; border-radius:16px; border:0;
  background:var(--b); color:var(--t); text-decoration:none; cursor:pointer;
  font-family:var(--font-display); font-weight:700; font-size:1.12rem; line-height:1.1; letter-spacing:.01em;
  box-shadow:0 4px 0 var(--bd); transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
  -webkit-tap-highlight-color:transparent; text-align:center;
}
.btn:hover{ color:var(--t); filter:brightness(1.06); transform:translateY(-1px); box-shadow:0 5px 0 var(--bd); }
.btn:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--bd); }
.btn-secondary{ --b:#fff; --bd:#D5CFBA; --t:var(--brand-deep); border:2px solid #D5CFBA; }
.btn-secondary:hover{ --t:var(--brand-deep); }
.btn-gold{ --b:var(--marigold); --bd:#C6810E; --t:#2A1C02; }
.btn-light{ --b:#fff; --bd:rgba(0,0,0,.25); --t:var(--brand-deep); }
.btn-sm{ min-height:42px; padding:8px 18px; font-size:1rem; border-radius:13px; box-shadow:0 3px 0 var(--bd); }
.btn-block{ width:100%; }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.link-arrow{ font-family:var(--font-display); font-weight:700; text-decoration:none; }
.link-arrow::after{ content:" →"; transition:margin .15s; }
.link-arrow:hover::after{ margin-left:4px; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid transparent; transition:border-color .2s, box-shadow .2s;
}
.site-header.is-scrolled{ border-color:var(--line); box-shadow:0 4px 20px rgba(30,43,28,.06); }
.header-inner{ display:flex; align-items:center; gap:20px; min-height:72px; }
.logo{ display:flex; align-items:center; gap:8px; text-decoration:none; flex-shrink:0; }
.logo img.logo-face{ width:52px; height:auto; margin:-6px -2px -4px -6px; }
.logo img.logo-word{ height:34px; width:auto; }
.site-nav{ margin-left:auto; display:flex; align-items:center; gap:4px; }
.site-nav a{
  font-family:var(--font-display); font-weight:600; font-size:1.05rem; color:var(--ink);
  text-decoration:none; padding:8px 12px; border-radius:12px;
}
.site-nav a:hover{ background:var(--mint); color:var(--brand-deep); }
.site-nav a[aria-current="page"]{ color:var(--brand-deep); background:var(--mint); }
.header-actions{ display:flex; align-items:center; gap:10px; margin-left:12px; }
.header-actions .signin{ font-family:var(--font-display); font-weight:700; text-decoration:none; padding:8px 12px; border-radius:12px; color:var(--brand-deep); }
.header-actions .signin:hover{ background:var(--mint); }
.nav-toggle{
  display:none; margin-left:auto; width:48px; height:48px; border-radius:14px; border:2px solid var(--line);
  background:#fff; cursor:pointer; align-items:center; justify-content:center;
}
.nav-toggle span{ display:block; width:22px; height:2.5px; background:var(--ink); border-radius:2px; position:relative; transition:background .2s; }
.nav-toggle span::before,.nav-toggle span::after{ content:""; position:absolute; left:0; width:22px; height:2.5px; background:var(--ink); border-radius:2px; transition:transform .2s; }
.nav-toggle span::before{ top:-7px; } .nav-toggle span::after{ top:7px; }
.nav-open .nav-toggle span{ background:transparent; }
.nav-open .nav-toggle span::before{ transform:translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span::after{ transform:translateY(-7px) rotate(-45deg); }
.mobile-only{ display:none; }

@media (max-width:1080px){
  .site-nav a{ padding:8px 9px; font-size:1rem; }
}
@media (max-width:960px){
  .nav-toggle{ display:inline-flex; }
  .header-actions .signin{ display:none; }
  .header-actions{ margin-left:0; }
  .site-nav{
    position:fixed; left:0; right:0; top:72px; bottom:0; margin:0; padding:16px 20px 32px;
    background:#fff; flex-direction:column; align-items:stretch; gap:4px; overflow-y:auto;
    transform:translateY(-8px); opacity:0; visibility:hidden; transition:opacity .18s, transform .18s, visibility .18s;
  }
  .nav-open .site-nav{ transform:none; opacity:1; visibility:visible; }
  .site-nav a{ font-size:1.25rem; padding:14px 14px; border-bottom:1px solid var(--line); border-radius:0; }
  .site-nav .mobile-only{ display:flex; margin-top:18px; border:0; }
  .site-nav a.btn{ border-radius:16px; justify-content:center; color:#fff; }
  .site-nav a.btn-secondary{ color:var(--brand-deep); }
  .nav-open{ overflow:hidden; }
}
@media (max-width:480px){
  .header-actions .btn{ padding:8px 14px; font-size:.95rem; }
  .logo img.logo-word{ height:28px; }
  .logo img.logo-face{ width:44px; }
}
@media (max-width:370px){ .header-actions{ display:none; } }

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 520px at 8% 0%, rgba(77,204,125,.20), transparent 60%),
    radial-gradient(700px 480px at 100% 30%, rgba(242,167,59,.20), transparent 60%),
    linear-gradient(180deg, var(--paper) 0%, #FFFDF6 100%);
  padding:clamp(40px, 6vw, 84px) 0 clamp(56px, 7vw, 96px);
}
.hero-grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(24px,4vw,56px); align-items:center; }
.hero h1 .hl{ color:var(--brand); position:relative; white-space:nowrap; }
.hero h1 .hl::after{
  content:""; position:absolute; left:-2%; right:-2%; bottom:.04em; height:.28em; z-index:-1;
  background:var(--marigold); opacity:.45; border-radius:8px; transform:rotate(-1deg);
}
.hero .lead{ max-width:34em; margin-bottom:28px; }
.hero-note{ margin-top:18px; display:flex; flex-wrap:wrap; gap:8px 18px; font-size:.95rem; color:var(--ink-soft); }
.hero-note span{ display:inline-flex; align-items:center; gap:6px; }
.tick{ width:20px; height:20px; flex:0 0 20px; border-radius:50%; background:var(--mint-2); display:inline-grid; place-items:center; }
.tick::before{ content:""; width:9px; height:5px; border-left:2.5px solid var(--brand); border-bottom:2.5px solid var(--brand); transform:rotate(-45deg) translate(1px,-1px); }
.hero-art{ position:relative; min-height:500px; }
.hero-art .chik{ position:absolute; width:min(228px, 40%); left:0; bottom:0; z-index:2; filter:drop-shadow(0 18px 18px rgba(16,104,63,.18)); }
.hero-art .q-card{ position:absolute; right:0; top:0; width:min(336px, 59%); z-index:1; }
.hero-art .friend{ position:absolute; width:86px; z-index:3; }
.hero-art .f1{ right:4%; bottom:-6px; }
.hero-art .f2{ right:26%; bottom:-10px; width:70px; }
.blob{ position:absolute; border-radius:50%; filter:blur(0); z-index:0; }

/* ---------- mock UI cards (illustrations built in HTML) ---------- */
.mock{
  background:#fff; border-radius:24px; box-shadow:var(--shadow); padding:20px; border:1px solid #EFE9D6;
  font-family:var(--font-display); color:var(--ink);
}
.mock .pill{ display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:700; padding:3px 10px; border-radius:999px; background:var(--mint); color:var(--brand-deep); }
.mock .pill.gold{ background:var(--marigold-soft); color:var(--gold-ink); }
.mock .pill.sky{ background:var(--sky); color:var(--sky-ink); }
.mock .pill.plum{ background:var(--plum-soft); color:var(--plum-ink); }
.mock .q-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.mock .progress{ height:10px; border-radius:6px; background:#EEEADB; overflow:hidden; margin-bottom:14px; }
.mock .progress i{ display:block; height:100%; width:60%; background:linear-gradient(90deg, var(--leaf), var(--chikiti)); border-radius:6px; }
.mock .q-text{ font-size:1.18rem; font-weight:700; line-height:1.3; margin:0 0 14px; color:var(--ink); }
.mock .opts{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.mock .opt{ border:2px solid #E2DCC6; border-bottom-width:4px; border-radius:14px; padding:10px 6px; text-align:center; font-weight:800; font-size:1.2rem; color:var(--ink); background:#fff; }
.mock .opt.right{ border-color:#2E9B5E; background:#E8F7EE; color:#136B3E; }
.mock .hint{ display:flex; gap:10px; align-items:flex-start; margin-top:14px; background:var(--marigold-soft); border-radius:16px; padding:10px 12px; font-size:.95rem; font-weight:600; color:#4A3304; line-height:1.35; font-family:var(--font-body); }
.mock .hint img{ width:34px; flex:0 0 34px; }
.mock .chips{ display:flex; justify-content:space-between; align-items:center; margin-top:12px; font-size:.9rem; color:var(--ink-soft); font-weight:700; }
.mock .coin{ display:inline-flex; align-items:center; gap:6px; color:var(--gold-ink); }
.mock .coin::before{ content:""; width:16px; height:16px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #FFE08A, #F2A73B 60%, #C6810E); box-shadow:inset 0 0 0 1.5px #B8770C; }

.report .r-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.report .r-head img{ width:44px; }
.report .r-head b{ display:block; font-size:1.1rem; line-height:1.15; }
.report .r-head small{ color:var(--ink-soft); font-family:var(--font-body); font-weight:600; }
.report .bars{ display:grid; gap:10px; margin:6px 0 14px; }
.report .bar{ display:grid; grid-template-columns:78px 1fr 44px; align-items:center; gap:10px; font-size:.92rem; font-weight:700; }
.report .bar .track{ height:12px; background:#EEEADB; border-radius:8px; overflow:hidden; }
.report .bar .track i{ display:block; height:100%; border-radius:8px; background:var(--chikiti); }
.report .bar .track i.m{ background:var(--marigold); }
.report .bar .track i.s{ background:#3C8DC0; }
.report .bar em{ font-style:normal; color:var(--ink-soft); text-align:right; }
.report .notes{ display:grid; gap:8px; font-family:var(--font-body); font-size:.93rem; }
.report .note{ border-radius:12px; padding:8px 12px; line-height:1.35; }
.report .note.good{ background:#E8F7EE; color:#14532F; }
.report .note.work{ background:var(--marigold-soft); color:#4A3304; }
.report .checkin{ margin-top:14px; border-top:1px dashed #E2DCC6; padding-top:12px; }
.report .checkin p{ font-weight:700; margin:0 0 8px; font-size:.98rem; }
.report .checkin .row{ display:flex; gap:8px; flex-wrap:wrap; }
.report .checkin .row span{ border:2px solid #E2DCC6; border-radius:12px; padding:4px 12px; font-size:.9rem; font-weight:700; background:#fff; }
.report .checkin .row span.on{ border-color:var(--brand); background:var(--mint); color:var(--brand-deep); }
.illus-label{ display:block; text-align:center; margin-top:10px; font-size:.82rem; color:var(--ink-soft); font-style:italic; }

/* ---------- subject chips strip ---------- */
.strip{ background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.strip-inner{ display:flex; align-items:center; gap:16px 28px; justify-content:center; flex-wrap:wrap; padding:22px 0; }
.strip-label{ font-family:var(--font-display); font-weight:700; color:var(--ink-soft); }
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.chip{ display:inline-flex; align-items:center; gap:7px; padding:6px 14px; border-radius:999px; background:var(--paper-2); border:1.5px solid var(--line); font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--ink); }
.chip .dot{ width:10px; height:10px; border-radius:50%; background:var(--chikiti); }

/* ---------- cards & grids ---------- */
.grid{ display:grid; gap:clamp(16px,2vw,24px); }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
.card{
  background:#fff; border-radius:var(--radius); padding:clamp(22px,2.4vw,30px); box-shadow:var(--shadow-sm);
  border:1px solid #EEE8D5; position:relative;
}
.card h3{ margin-bottom:.35em; }
.card p:last-child{ margin-bottom:0; }
.card.tint-mint{ background:var(--mint); border-color:transparent; }
.card.tint-gold{ background:var(--marigold-soft); border-color:transparent; }
.card.tint-sky{ background:var(--sky); border-color:transparent; }
.card.tint-coral{ background:var(--coral-soft); border-color:transparent; }
.card.tint-plum{ background:var(--plum-soft); border-color:transparent; }
.icon{ width:56px; height:56px; border-radius:18px; display:grid; place-items:center; margin-bottom:16px; background:var(--mint); color:var(--brand); }
.icon svg{ width:30px; height:30px; }
.icon.gold{ background:var(--marigold-soft); color:var(--gold-ink); } .icon.sky{ background:var(--sky); color:var(--sky-ink); } .icon.coral{ background:var(--coral-soft); color:#B84331; } .icon.plum{ background:var(--plum-soft); color:var(--plum-ink); }
.card.tint-mint .icon,.card.tint-gold .icon,.card.tint-sky .icon,.card.tint-coral .icon,.card.tint-plum .icon{ background:#fff; }

/* steps */
.steps{ counter-reset:step; }
.step{ padding-top:clamp(26px,3vw,34px); }
.step::before{
  counter-increment:step; content:counter(step);
  position:absolute; top:-22px; left:clamp(22px,2.4vw,30px); width:46px; height:46px; border-radius:15px;
  display:grid; place-items:center; background:var(--brand); color:#fff; box-shadow:0 4px 0 var(--brand-deep);
  font-family:var(--font-display); font-weight:800; font-size:1.35rem;
}
.step .art{ height:150px; display:flex; align-items:flex-end; justify-content:center; margin:-4px 0 14px; }
.step .art img{ height:150px; width:auto; }

/* split feature rows */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center; }
.split.rev .split-art{ order:-1; }
.split-art{ position:relative; }
.checklist{ list-style:none; padding:0; margin:0 0 24px; display:grid; gap:12px; }
.checklist li{ display:flex; gap:12px; align-items:flex-start; }
.checklist li .tick{ margin-top:4px; }
.checklist li b{ font-family:var(--font-display); font-size:1.08rem; }

/* level ladder */
.ladder{ display:flex; gap:10px; align-items:flex-end; justify-content:center; }
.ladder .rung{ flex:1; max-width:150px; border-radius:18px 18px 10px 10px; padding:14px 10px; text-align:center; color:#fff; font-family:var(--font-display); font-weight:800; font-size:1.02rem; line-height:1.15; }
.ladder .rung small{ display:block; font-weight:600; font-size:.8rem; opacity:.92; margin-top:4px; }
.ladder .r1{ background:#3FA868; height:110px; }
.ladder .r2{ background:var(--brand); height:150px; }
.ladder .r3{ background:var(--brand-deep); height:190px; }

/* olympiad badges */
.olys{ display:flex; flex-wrap:wrap; gap:12px; }
.oly{ flex:1 1 150px; background:#fff; border-radius:18px; padding:16px; border:1px solid #EEE8D5; box-shadow:var(--shadow-sm); }
.oly b{ display:block; font-family:var(--font-display); font-size:1.5rem; color:var(--brand-deep); line-height:1; margin-bottom:4px; }
.oly span{ font-size:.92rem; color:var(--ink-soft); }
.bg-brand .oly{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); box-shadow:none; }
.bg-brand .oly b{ color:#FFD98A; }
.bg-brand .oly span{ color:#E4F2E9; }

/* friends */
.friends{ display:grid; grid-template-columns:repeat(8,1fr); gap:10px; align-items:end; }
.friends figure{ margin:0; text-align:center; }
.friends img{ width:100%; max-width:110px; margin:0 auto; }
.friends figcaption{ font-family:var(--font-display); font-weight:700; font-size:.98rem; margin-top:2px; }

/* promise list */
.promise{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px 28px; list-style:none; padding:0; margin:0; }
.promise li{ display:flex; gap:12px; align-items:flex-start; background:#fff; border-radius:16px; padding:16px 18px; border:1px solid #EEE8D5; }
.promise li .tick{ margin-top:3px; }
.promise.no li .tick{ background:var(--coral-soft); }
.promise.no li .tick::before{ border:0; width:12px; height:2.5px; background:var(--coral); transform:rotate(45deg); box-shadow:none; }
.promise.no li .tick::after{ content:""; position:absolute; width:12px; height:2.5px; background:var(--coral); transform:rotate(-45deg); }
.promise.no li .tick{ position:relative; }

/* ---------- pricing ---------- */
.billing-toggle{ display:inline-flex; padding:5px; background:#fff; border:2px solid var(--line); border-radius:16px; gap:4px; margin:0 auto 34px; }
.billing-toggle button{
  border:0; background:transparent; font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--ink-soft);
  padding:9px 18px; border-radius:12px; cursor:pointer; min-height:44px;
}
.billing-toggle button[aria-pressed="true"]{ background:var(--brand); color:#fff; }
.billing-toggle .save{ font-size:.78rem; background:var(--marigold-soft); color:var(--gold-ink); padding:2px 8px; border-radius:999px; margin-left:4px; }
.billing-toggle button[aria-pressed="true"] .save{ background:#fff; }
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.plan{ display:flex; flex-direction:column; background:#fff; border-radius:26px; padding:30px 26px; border:2px solid #EEE8D5; box-shadow:var(--shadow-sm); position:relative; }
.plan.featured{ border-color:var(--brand); box-shadow:0 18px 48px rgba(16,104,63,.16); }
.plan .flag{ position:absolute; top:-15px; left:50%; transform:translateX(-50%); background:var(--brand); color:#fff; font-family:var(--font-display); font-weight:700; font-size:.9rem; padding:4px 14px; border-radius:999px; white-space:nowrap; }
.plan.trial{ background:linear-gradient(180deg, var(--paper) 0%, #fff 70%); }
.plan h3{ font-size:1.45rem; margin-bottom:4px; }
.plan .for{ color:var(--ink-soft); font-size:.98rem; margin-bottom:18px; min-height:3em; }
.price{ font-family:var(--font-display); font-weight:800; font-size:3rem; line-height:1; color:var(--ink); display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; margin:0 0 12px; }
.price small{ font-size:1.05rem; font-weight:600; color:var(--ink-soft); }
.price-sub{ font-size:.93rem; color:var(--ink-soft); margin:8px 0 20px; min-height:1.5em; }
.plan ul{ list-style:none; padding:0; margin:0 0 24px; display:grid; gap:10px; flex:1; }
.plan li{ display:flex; gap:10px; align-items:flex-start; font-size:.98rem; }
.plan li .tick{ margin-top:3px; }
.price-table{ width:100%; border-collapse:separate; border-spacing:0; background:#fff; border-radius:18px; overflow:hidden; border:1px solid var(--line); }
.price-table th,.price-table td{ padding:14px 16px; text-align:left; border-bottom:1px solid var(--line); }
.price-table thead th{ background:var(--mint); font-family:var(--font-display); font-size:1.05rem; }
.price-table tr:last-child td{ border-bottom:0; }
.price-table td.num{ font-family:var(--font-display); font-weight:800; font-size:1.15rem; white-space:nowrap; }
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:18px; }

.callout{ border-radius:20px; padding:20px 22px; display:flex; gap:16px; align-items:flex-start; }
.callout img{ width:64px; flex:0 0 64px; }
.callout h3{ margin-bottom:.25em; font-size:1.2rem; }
.callout p:last-child{ margin-bottom:0; }
.callout.gold{ background:var(--marigold-soft); }
.callout.mint{ background:var(--mint); }
.callout.coral{ background:var(--coral-soft); }
.callout.sky{ background:var(--sky); }

/* ---------- FAQ ---------- */
.faq{ display:grid; gap:12px; }
.faq details{ background:#fff; border:1.5px solid var(--line); border-radius:18px; padding:0; transition:border-color .2s, box-shadow .2s; }
.faq details[open]{ border-color:var(--mint-2); box-shadow:var(--shadow-sm); }
.faq summary{
  cursor:pointer; list-style:none; padding:18px 56px 18px 22px; position:relative;
  font-family:var(--font-display); font-weight:700; font-size:1.14rem; line-height:1.3;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:22px; top:50%; width:12px; height:12px; margin-top:-8px;
  border-right:3px solid var(--brand); border-bottom:3px solid var(--brand); transform:rotate(45deg); transition:transform .2s;
}
.faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.faq .answer{ padding:0 22px 18px; color:var(--ink-soft); }
.faq .answer p:last-child{ margin-bottom:0; }
.faq-group h2{ font-size:1.6rem; margin:40px 0 14px; }
.faq-group:first-child h2{ margin-top:0; }

/* ---------- CTA band ---------- */
.cta-band{
  position:relative; overflow:hidden; border-radius:32px; padding:clamp(32px,5vw,60px);
  background:radial-gradient(600px 300px at 90% 0%, rgba(77,204,125,.35), transparent 60%), var(--brand-deep);
  color:#fff; display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center;
}
.cta-band h2{ color:#fff; margin-bottom:.3em; }
.cta-band p{ color:#DDEFE3; font-size:1.1rem; margin-bottom:22px; }
.cta-band .cta-art{ width:clamp(150px, 18vw, 230px); }
.cta-band .small{ color:#CFE7D8; margin:14px 0 0; }

/* ---------- page hero (inner pages) ---------- */
.page-hero{
  background:
    radial-gradient(700px 360px at 0% 0%, rgba(77,204,125,.18), transparent 60%),
    radial-gradient(600px 360px at 100% 20%, rgba(242,167,59,.16), transparent 60%),
    var(--paper);
  padding:clamp(40px,6vw,76px) 0 clamp(40px,5vw,64px);
}
.page-hero-grid{ display:grid; grid-template-columns:1.3fr .7fr; gap:32px; align-items:center; }
.page-hero-grid .art img{ max-height:280px; width:auto; margin:0 auto; }
.page-hero h1{ font-size:clamp(2.1rem, 1.4rem + 2.8vw, 3.5rem); }
.page-hero .lead{ max-width:38em; }

/* ---------- legal / prose ---------- */
.prose{ max-width:780px; margin:0 auto; }
.prose h2{ font-size:1.6rem; margin:2em 0 .5em; }
.prose h3{ font-size:1.22rem; margin:1.6em 0 .4em; }
.prose p,.prose li{ color:#2C3A29; }
.prose li{ margin-bottom:.4em; }
.prose table{ width:100%; border-collapse:collapse; margin:0 0 1.4em; font-size:.96rem; }
.prose th,.prose td{ border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top; }
.prose th{ background:var(--mint); font-family:var(--font-display); }
.prose .toc{ background:var(--paper-2); border:1px solid var(--line); border-radius:16px; padding:16px 22px; margin-bottom:28px; }
.prose .toc ol{ margin:6px 0 0; columns:2; column-gap:28px; }
.prose .toc li{ break-inside:avoid; }
.draft-note{
  background:#FFF4D6; border:2px dashed #D69A1F; color:#4A3304; border-radius:16px; padding:14px 18px; margin:0 0 28px;
  font-weight:700;
}
.ph{ background:#FFF0B8; color:#5A3D00; padding:0 4px; border-radius:4px; font-weight:800; font-style:normal; }
.meta-line{ color:var(--ink-soft); font-size:.95rem; }

/* ---------- forms ---------- */
.form{ display:grid; gap:16px; }
.form .row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field label{ display:block; font-family:var(--font-display); font-weight:700; margin-bottom:6px; }
.field .opt-label{ font-weight:600; color:var(--ink-soft); font-family:var(--font-body); font-size:.88rem; }
.field input,.field select,.field textarea{
  width:100%; font:inherit; font-size:1rem; color:var(--ink); background:#fff;
  border:2px solid #D8D1BB; border-radius:14px; padding:12px 14px; min-height:50px;
}
.field textarea{ min-height:140px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 4px rgba(23,120,77,.18); }
.form-status{ min-height:1.5em; font-weight:700; color:var(--brand-deep); margin:0; }
.contact-cards{ display:grid; gap:16px; }

/* ---------- footer ---------- */
.site-footer{ background:#12281C; color:#D6E6DB; padding:64px 0 28px; margin-top:0; }
.site-footer a{ color:#E9F4EC; text-decoration:none; }
.site-footer a:hover{ color:#fff; text-decoration:underline; }
.footer-grid{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:32px; }
.footer-brand img{ height:36px; width:auto; margin-bottom:12px; }
.footer-brand p{ color:#B9CFC0; max-width:26em; }
.site-footer h2{ font-size:1.05rem; color:#fff; margin-bottom:12px; letter-spacing:.02em; }
.site-footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.site-footer button.linkish{ background:none; border:0; padding:0; color:#E9F4EC; font:inherit; cursor:pointer; }
.site-footer button.linkish:hover{ text-decoration:underline; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:40px; padding-top:22px; font-size:.88rem; color:#A9C2B1; display:grid; gap:8px; }

/* ---------- consent banner ---------- */
.consent{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:80; max-width:560px;
  background:#fff; border-radius:22px; box-shadow:0 20px 60px rgba(20,40,28,.28); border:1px solid var(--line);
  padding:20px 22px; display:flex; gap:16px; align-items:flex-start;
}
.consent[hidden]{ display:none; }
.consent img{ width:56px; flex:0 0 56px; }
.consent h2{ font-size:1.2rem; margin-bottom:.3em; }
.consent p{ font-size:.95rem; color:var(--ink-soft); margin-bottom:12px; }
.consent .btn-row{ gap:10px; }

/* ---------- reveal on scroll (progressive; content visible without JS) ---------- */
@media (prefers-reduced-motion: no-preference){
  .float{ animation:float 6s ease-in-out infinite; }
  .float.d2{ animation-delay:-2s; } .float.d3{ animation-delay:-4s; }
  @keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition:none!important; animation:none!important; }
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .g4{ grid-template-columns:repeat(2,1fr); }
  .friends{ grid-template-columns:repeat(4,1fr); row-gap:18px; }
}
@media (max-width:960px){
  .hero-grid,.split,.page-hero-grid{ grid-template-columns:1fr; }
  .split.rev .split-art{ order:0; }
  .hero-art{ min-height:400px; max-width:560px; margin:0 auto; width:100%; }
  .g3,.plans{ grid-template-columns:1fr; max-width:560px; margin-left:auto; margin-right:auto; }
  .plans{ gap:30px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
  .page-hero-grid .art{ display:none; }
  .cta-band{ grid-template-columns:1fr; text-align:left; }
  .cta-band .cta-art{ display:none; }
  .promise{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  body{ font-size:16.5px; }
  .g2,.g4{ grid-template-columns:1fr; }
  .form .row2{ grid-template-columns:1fr; }
  .hero-art{ min-height:0; display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-end; gap:0 6px; }
  .hero-art .q-card,.hero-art .chik,.hero-art .friend{ position:relative; left:auto; right:auto; top:auto; bottom:auto; }
  .hero-art .q-card{ width:100%; max-width:380px; margin-bottom:-18px; }
  .hero-art .chik{ width:150px; margin-top:0; }
  .hero-art .friend{ width:64px; }
  .hero-art .f2{ width:56px; }
  .btn-row .btn{ flex:1 1 auto; }
  .mock{ padding:16px; }
  .mock .q-text{ font-size:1.05rem; }
  .prose .toc ol{ columns:1; }
  .price{ font-size:2.6rem; }
  .callout{ flex-direction:column; }
  .consent{ flex-direction:column; left:10px; right:10px; bottom:10px; padding:18px; }
  .consent img{ display:none; }
  .ladder .rung{ font-size:.92rem; }
}
@media (min-width:1600px){
  :root{ --wrap:1320px; }
  body{ font-size:18px; }
}

/* ---------- print (legal pages) ---------- */
@media print{
  .site-header,.site-footer,.consent,.cta-band,.btn{ display:none!important; }
  body{ font-size:12pt; }
  .page-hero{ background:none; padding:0 0 12pt; }
}

/* nav items that only appear in the mobile menu */
.site-nav .nav-extra{ display:none; }
@media (max-width:960px){ .site-nav .nav-extra{ display:block; } }

.bg-mint .eyebrow{ background:#fff; }
.section + .section-tight{ padding-top:0; }
.peek{ position:absolute; width:130px; left:-10px; bottom:-40px; z-index:2; filter:drop-shadow(0 10px 12px rgba(0,0,0,.25)); }
@media (max-width:960px){ .peek{ width:96px; left:-4px; bottom:-30px; } }
.header-actions .btn{ white-space:nowrap; }
@media (max-width:960px){ .peek{ display:none; } .split-art[style*="padding-left"]{ padding-left:0!important; } }
/* backdrop-filter would make the header the containing block of the fixed mobile menu */
@media (max-width:960px){ .site-header{ -webkit-backdrop-filter:none; backdrop-filter:none; background:#fff; } }
@media (max-width:960px){ .site-nav a.btn-secondary{ border:2px solid #D5CFBA; } }
@media (max-width:640px){ .prose table{ font-size:.86rem; } .prose th,.prose td{ padding:8px; } }