/* ============================================================================
   Engraven marketing site — stylesheet.
   Tokens are transcribed exactly from docs/design/V04-BRAND-SYSTEM.md (the
   app's own brand system) — same hexes, same measured contrast ratios. Light
   "Parchment" is the default; dark "Ink" activates via prefers-color-scheme,
   exactly as the app's two themes do. The hero band is deliberately
   theme-invariant (always the dark violet ground) — the brand doc's own
   precedent for this is the celebration overlay, which stays violet in both
   themes because it is a fixed, sacred/branded surface, not chrome.
   No frameworks, no build step, no external fonts beyond the two self-hosted
   OFL families already shipped in the app (Literata, Manrope).
   ========================================================================== */
:root{
  color-scheme: light dark;

  /* ---- Brand ramp (theme-independent identity hexes, §2.1) ---- */
  --violet-glow:#A78BFA; --violet-bright:#8B5CF6; --violet-action:#7C3AED; --violet-deep:#6D28D9;
  --violet-edge:#5B21B6; --violet-on-ink:#B79CFF; --violet-lift:#C4ADFF; --violet-ink:#250F44;
  --violet-night:#2A1163; --violet-tint:#EDE9FE;
  --gold:#C9A227; --gold-bright:#E3C567; --gold-on-ink:#E0B94E; --gold-on-parch:#7A5C0E;
  --gold-deep:#A5801C; --gold-pale:#F0D07A;

  /* ---- LIGHT "Parchment" role tokens (default), §2.3 ---- */
  --surface-0:#F7F2E6; --surface-1:#FFFCF5; --surface-2:#EFE8D8; --surface-3:#E5DCC8;
  --on-surface:#221C2B; --on-surface-variant:#605868;
  --verse-surface:#FFFDF9; --on-verse-surface:#1B1622; --verse-rim:rgba(122,92,14,.38);
  --primary:#7C3AED; --on-primary:#FFFFFF; --primary-container:#EDE7FF; --on-primary-container:#33146B;
  --secondary:#7A5C0E; --on-secondary:#FFFFFF; --secondary-container:#F7EED2; --on-secondary-container:#4A3705;
  --outline:#7A7266; --outline-variant:#DCD3C0;
  --success:#17703F; --warning:#A64B0A; --error:#A32235;
  --shadow-rgb:42,17,99; /* #2A1163 — violet-tinted shadow, never grey (§4.4) */

  /* Primary-button "carved relief" face, §4.2 — LIGHT: saturated fill,
     white label. (Deliberately NOT the same pairing as --primary/--on-primary,
     which are the text/icon-safe working tones — a button fill has a
     different, wider contrast budget than a text color does.) */
  --btn-face-top:#7C3AED; --btn-face-bottom:#6D28D9; --btn-label:#FFFFFF; --btn-edge:#5B21B6;

  --r:18px;
  --shadow:0 10px 28px rgba(var(--shadow-rgb),.10);
  --shadow-lg:0 22px 54px rgba(var(--shadow-rgb),.16);
}
@media (prefers-color-scheme: dark){
  :root{
    /* ---- DARK "Ink" role tokens, §2.2 ---- */
    --surface-0:#14111C; --surface-1:#1C1826; --surface-2:#262133; --surface-3:#322B42;
    --on-surface:#F0EADF; --on-surface-variant:#B4ACC0;
    --verse-surface:#221C28; --on-verse-surface:#F7F2E7; --verse-rim:rgba(201,162,39,.32);
    --primary:#B79CFF; --on-primary:#250F44; --primary-container:#3B2472; --on-primary-container:#E4D6FF;
    --secondary:#E0B94E; --on-secondary:#2A1D00; --secondary-container:#3A2E10; --on-secondary-container:#F4E3B4;
    --outline:#847C9C; --outline-variant:#332C40;
    --success:#6FDBA0; --warning:#F79A5C; --error:#FF9AA5;
    /* Primary-button face, §4.2 — DARK: lavender fill, dark ink label
       (a white label on a saturated fill fails AA at 16px in dark theme;
       this is the accessibility trade-off the brand doc calls out in §3.5). */
    --btn-face-top:#C4ADFF; --btn-face-bottom:#B79CFF; --btn-label:#250F44; --btn-edge:#7C3AED;
    --shadow-rgb:0,0,0;
    --shadow:0 10px 28px rgba(0,0,0,.45);
    --shadow-lg:0 22px 54px rgba(0,0,0,.55);
  }
}

/* ---------- fonts (self-hosted, SIL OFL 1.1 — same files as the app) ---------- */
@font-face{font-family:'Literata';src:url('fonts/Literata-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Literata';src:url('fonts/Literata-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Literata';src:url('fonts/Literata-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Literata';src:url('fonts/Literata-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('fonts/Manrope-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('fonts/Manrope-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('fonts/Manrope-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Manrope',system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--surface-0);color:var(--on-surface);line-height:1.6;overflow-x:hidden;
  font-size:1rem;
}
h1,h2,h3,.disp{font-family:'Literata',Georgia,"Times New Roman",serif}
img,svg{max-width:100%}
a{color:var(--primary)}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
ul{list-style:none}
button{font-family:inherit}

/* ---------- accessibility: focus, skip link, screen-reader-only ---------- */
:focus{outline:none}
:focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:4px}
/* Buttons whose own fill IS var(--primary) need the ring INSIDE, in
   on-primary, per V04-BRAND-SYSTEM.md §4.2 — an outline the same color as
   the fill it sits on is invisible. */
.btn.primary:focus-visible{outline:none;box-shadow:0 0 0 3px var(--surface-1),0 0 0 5px var(--primary), inset 0 0 0 2px var(--btn-label)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-60px;background:var(--surface-1);color:var(--on-surface);
  padding:12px 18px;border-radius:10px;box-shadow:var(--shadow-lg);z-index:1000;transition:top .2s;font-weight:700}
.skip-link:focus{top:12px}

/* ---------- topbar ---------- */
.topbar{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;align-items:center;gap:16px;
  padding:14px 24px;transition:background .3s,box-shadow .3s;background:transparent}
.topbar.scrolled{background:rgba(var(--shadow-rgb),.9);backdrop-filter:blur(10px);box-shadow:0 2px 18px rgba(0,0,0,.22)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#F0EADF}
.logo .mark{width:34px;height:34px;flex:none}
.logo .nm{font-family:'Literata',serif;font-weight:700;font-size:1.15rem;letter-spacing:.02em;color:#FFF8EA}
nav.top{margin-left:auto;display:flex;gap:2px;align-items:center}
nav.top a{padding:9px 14px;border-radius:999px;font-size:.9rem;font-weight:600;color:#F0EADF;text-decoration:none;transition:.2s}
nav.top a:hover{background:rgba(255,255,255,.14)}
nav.top a.active{background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.nav-cta{display:inline-flex;align-items:center;gap:8px;background:var(--gold-bright);color:#2A1D00!important;
  padding:9px 18px;border-radius:999px;font-weight:800;font-size:.87rem;text-decoration:none;margin-left:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.25);transition:.2s;white-space:nowrap}
.nav-cta:hover{transform:translateY(-2px)}
.menu-btn{display:none;margin-left:auto;background:none;border:0;color:#F0EADF;font-size:1.6rem;cursor:pointer;line-height:1}

/* ---------- hero (deliberately theme-invariant: always the dark violet
   ground, matching the brand doc's own celebration-overlay precedent) ---------- */
.hero{
  position:relative;overflow:hidden;color:#F0EADF;text-align:center;
  background:
    radial-gradient(ellipse 900px 500px at 18% -10%, rgba(167,139,250,.35), transparent 60%),
    linear-gradient(155deg, #2E224C 0%, #221D3D 45%, #221D1D 100%);
  padding:150px 22px 120px;
}
.hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:2px;
  background:linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold) 75%, transparent);
  opacity:.55;
}
.heroin{position:relative;z-index:2;max-width:760px;margin:0 auto}
.kicker{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);
  border:1px solid rgba(224,185,78,.55);padding:7px 18px;border-radius:999px;font-size:.76rem;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-bright);margin-bottom:22px}
.hero h1{font-size:clamp(2rem,5vw,3.1rem);line-height:1.2;font-weight:700;color:#FBF7EE}
.hero h1 em{font-style:normal;color:var(--violet-glow)}
.hero p.sub{margin:22px auto 0;max-width:600px;font-size:1.14rem;color:#D9D2E8;font-family:'Manrope'}
.heroctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.pillar-teaser{display:flex;gap:10px 22px;flex-wrap:wrap;justify-content:center;margin-top:38px;
  font-size:.86rem;font-weight:600;color:#CBC0DE}
.pillar-teaser span{display:inline-flex;align-items:center;gap:8px}
.pillar-teaser b{color:var(--gold-bright);font-weight:800}

/* subhero (inner pages) — same dark ground, shorter */
.subhero{position:relative;overflow:hidden;color:#F0EADF;text-align:center;
  background:linear-gradient(155deg, #2E224C 0%, #221D3D 60%, #221D1D 100%);
  padding:132px 22px 78px}
.subhero::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;
  background:linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold) 75%, transparent);opacity:.55}
.subhero h1{position:relative;z-index:2;font-size:clamp(1.9rem,4.2vw,2.6rem);max-width:760px;margin:0 auto;color:#FBF7EE}
.subhero p.sub{position:relative;z-index:2;margin:16px auto 0;max-width:620px;font-size:1.05rem;color:#D9D2E8}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:999px;
  font-weight:800;font-size:1rem;text-decoration:none;border:0;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s;
  font-family:'Manrope'}
.btn:active{transform:translateY(1px) scale(.98)}
.btn.primary{background:linear-gradient(180deg,var(--btn-face-top),var(--btn-face-bottom));color:var(--btn-label);
  box-shadow:0 4px 0 var(--btn-edge), 0 10px 24px rgba(var(--shadow-rgb),.35)}
.btn.primary:hover{transform:translateY(-2px)}
.btn.primary:active{box-shadow:0 1px 0 var(--btn-edge), 0 4px 10px rgba(var(--shadow-rgb),.3);transform:translateY(2px)}
.btn.ghost{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.4);color:#F5F0FF}
.btn.ghost:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}
.btn.solid{background:var(--primary);color:var(--on-primary);box-shadow:var(--shadow)}
.btn.solid:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn.paper{background:var(--surface-1);color:var(--primary);box-shadow:var(--shadow-lg)}
.btn.paper:hover{transform:translateY(-2px)}
/* .ghost is built for the dark hero band specifically (semi-transparent
   white fill/border) — on a themed surface (light OR dark) use .outline
   instead, which reads correctly in both themes via the token system. */
.btn.outline{background:transparent;color:var(--primary);border:1.5px solid var(--outline)}
.btn.outline:hover{background:var(--primary-container);border-color:var(--primary);transform:translateY(-2px)}
.btn[aria-disabled="true"]{opacity:.6;cursor:not-allowed;box-shadow:none}
.btn[aria-disabled="true"]:hover{transform:none}

/* ---------- trust strip ---------- */
.truststrip{background:var(--surface-2);border-bottom:1px solid var(--outline-variant);padding:16px 0}
.truststrip .in{max-width:1080px;margin:0 auto;padding:0 24px;display:flex;flex-wrap:wrap;gap:8px 30px;
  justify-content:center;font-size:.86rem;font-weight:700;color:var(--on-surface-variant)}
.truststrip b{color:var(--on-surface)}

/* ---------- sections ---------- */
section.blk{padding:80px 0}
section.blk.alt{background:var(--surface-1)}
.eyebrow{font-family:'Manrope';color:var(--secondary);font-weight:800;font-size:.82rem;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:10px}
h2.big{font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.22;margin-bottom:14px}
.leadp{font-size:1.05rem;color:var(--on-surface-variant);max-width:680px}
.center{text-align:center;margin-left:auto;margin-right:auto}

/* reveal-on-scroll */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}

/* ---------- pillar cards ---------- */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:36px}
.pillar{background:var(--surface-1);border:1px solid var(--outline-variant);border-radius:var(--r);
  padding:30px 26px;box-shadow:var(--shadow);transition:transform .3s,box-shadow .3s}
.pillar:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.pillar .ico{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:var(--primary-container);color:var(--on-primary-container);font-size:1.3rem;margin-bottom:16px}
.pillar h3{font-size:1.15rem;margin-bottom:8px}
.pillar p{font-size:.94rem;color:var(--on-surface-variant)}

/* ---------- feature list (modes/games) ---------- */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:32px}
.feature-card{background:var(--surface-1);border:1px solid var(--outline-variant);border-radius:14px;
  padding:20px 22px;box-shadow:var(--shadow)}
.feature-card h3{font-size:1rem;font-family:'Manrope';font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.feature-card h3 .num{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:50%;background:var(--secondary-container);color:var(--on-secondary-container);font-size:.72rem;font-weight:800}
.feature-card p{font-size:.9rem;color:var(--on-surface-variant)}

/* ---------- verse showcase (illuminated-manuscript moment) ---------- */
.verse-frame{position:relative;background:var(--verse-surface);color:var(--on-verse-surface);
  border-radius:24px;padding:44px 36px;box-shadow:var(--shadow-lg);max-width:700px;margin:36px auto 0;
  border:1.2px solid var(--verse-rim)}
.verse-frame::before{content:"";position:absolute;inset:0;border-radius:24px;pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--verse-rim)}
.verse-frame blockquote{font-family:'Literata';font-weight:500;font-size:clamp(1.15rem,2.6vw,1.5rem);
  line-height:1.62;letter-spacing:.01em}
.verse-frame cite{display:block;margin-top:18px;font-family:'Manrope';font-weight:700;font-size:.82rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gold-on-parch);font-style:normal}
@media (prefers-color-scheme: dark){.verse-frame cite{color:var(--gold-on-ink)}}

/* ---------- doctrine explainer ---------- */
.doctrine{background:var(--primary-container);border-radius:26px;padding:44px 34px;margin-top:36px;
  border:1px solid var(--primary)}
.doctrine h2{color:var(--on-primary-container)}
.doctrine p{color:var(--on-primary-container);font-size:1.02rem;max-width:760px}
.doctrine ol{margin-top:18px;padding-left:0;counter-reset:doc}
.doctrine ol li{list-style:none;counter-increment:doc;position:relative;padding:10px 0 10px 40px;
  color:var(--on-primary-container);font-size:.96rem}
.doctrine ol li::before{content:counter(doc);position:absolute;left:0;top:8px;width:26px;height:26px;
  border-radius:50%;background:var(--primary);color:var(--on-primary);font-weight:800;font-size:.82rem;
  display:flex;align-items:center;justify-content:center}

/* ---------- pricing ---------- */
.price-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:36px;
  align-items:stretch}
.price-card{background:var(--surface-1);border:1px solid var(--outline-variant);border-radius:22px;
  padding:32px 28px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.price-card.premium{border:2px solid var(--primary);box-shadow:var(--shadow-lg);position:relative}
.price-card .badge{position:absolute;top:-14px;left:28px;background:var(--gold);color:#2A1D00;
  font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:6px 14px;border-radius:999px}
.price-card h3{font-size:1.3rem;margin-bottom:4px}
.price-card .amount{font-family:'Literata';font-size:2.1rem;font-weight:700;margin:14px 0 4px;color:var(--primary)}
.price-card .amount small{font-family:'Manrope';font-size:.95rem;font-weight:600;color:var(--on-surface-variant)}
.price-card ul{margin-top:18px;flex:1}
.price-card li{padding:8px 0 8px 28px;position:relative;font-size:.92rem;color:var(--on-surface-variant)}
.price-card li::before{content:"✓";position:absolute;left:0;color:var(--success);font-weight:900}
.price-card .btn{margin-top:22px;justify-content:center;width:100%}
.price-note{background:var(--secondary-container);color:var(--on-secondary-container);border-radius:14px;
  padding:16px 20px;font-size:.88rem;margin-top:28px}

/* comparison table */
.compare-table{width:100%;border-collapse:collapse;margin-top:40px;background:var(--surface-1);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.compare-table th,.compare-table td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--outline-variant);
  font-size:.92rem}
.compare-table th{background:var(--surface-2);font-family:'Manrope';font-weight:700}
.compare-table td.yes{color:var(--success);font-weight:700}
.compare-table td.limit{color:var(--on-surface-variant)}
.compare-table tr:last-child td{border-bottom:0}

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin:32px auto 0}
details.f{background:var(--surface-1);border:1px solid var(--outline-variant);border-radius:14px;
  margin-bottom:11px;box-shadow:var(--shadow);overflow:hidden}
details.f[open]{box-shadow:var(--shadow-lg)}
details.f summary{list-style:none;cursor:pointer;padding:18px 22px;font-weight:700;display:flex;
  align-items:center;gap:14px;font-size:.98rem}
details.f summary::-webkit-details-marker{display:none}
details.f summary::before{content:"+";margin-left:auto;flex:0 0 26px;width:26px;height:26px;border-radius:50%;
  background:var(--surface-2);color:var(--primary);display:inline-flex;align-items:center;justify-content:center;
  font-weight:900;transition:transform .3s}
details.f[open] summary::before{transform:rotate(45deg)}
details.f .a{padding:0 22px 20px;color:var(--on-surface-variant);font-size:.94rem;line-height:1.65}
details.f .a a{color:var(--primary)}

/* ---------- get-Engraven / store badges ---------- */
.store-badges{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.store-badge{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);
  border:1.5px solid rgba(255,255,255,.35);color:#F5F0FF;padding:12px 20px;border-radius:14px;
  font-weight:700;font-size:.9rem;text-decoration:none;transition:.2s}
.store-badge:hover{background:rgba(255,255,255,.14)}
.store-badge.is-pending{cursor:default;opacity:.6}
.store-badge.is-pending:hover{background:rgba(255,255,255,.06)}
.store-badge .sub{display:block;font-size:.68rem;font-weight:600;opacity:.75;text-transform:uppercase;letter-spacing:.06em}
.store-badge .lbl{font-family:'Manrope';font-size:1rem}

/* ---------- CTA band ---------- */
.ctaband{text-align:center;padding:64px 30px;border-radius:28px;color:#F0EADF;position:relative;overflow:hidden;
  background:radial-gradient(ellipse at 30% 20%, #3B1A85, #2A1163 60%, #1B0B45 100%);box-shadow:var(--shadow-lg)}
.ctaband h2{font-size:clamp(1.5rem,3.2vw,2.1rem);margin-bottom:10px;color:#FBF7EE}
.ctaband p{color:#D9D2E8;max-width:560px;margin:0 auto 26px}

/* ---------- translation petition (site/translations.html) ---------- */
.doctrine-note{background:var(--primary-container);color:var(--on-primary-container);
  border-radius:14px;padding:18px 22px;font-weight:700;font-size:.96rem;margin-top:22px}
.petition{max-width:640px;margin:32px auto 0}
.petition-form{display:flex;flex-direction:column;gap:22px}
.field{display:flex;flex-direction:column;gap:7px}
.field>label{font-weight:700;font-size:.92rem}
.field .hint{font-weight:500;color:var(--on-surface-variant);font-size:.84rem}
.field input[type="text"],.field input[type="email"],.field textarea{
  font:inherit;font-size:.96rem;padding:12px 14px;border-radius:12px;
  border:1.5px solid var(--outline-variant);background:var(--surface-1);color:var(--on-surface)}
.field input[type="text"]:focus,.field input[type="email"]:focus,.field textarea:focus{
  border-color:var(--primary)}
.field textarea{resize:vertical;min-height:96px;font-family:inherit}
.field-error{display:none;color:var(--error);font-size:.84rem;font-weight:600}
.field.invalid input,.field.invalid textarea{border-color:var(--error)}
.field.invalid .field-error{display:block}
.checkbox-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 16px}
.checkbox-row{display:flex;align-items:center;gap:10px;font-size:.94rem;font-weight:600;cursor:pointer}
.checkbox-row input[type="checkbox"]{width:18px;height:18px;flex:none;accent-color:var(--primary)}
.other-row{display:flex;align-items:center;gap:12px;margin-top:6px;flex-wrap:wrap}
.other-row .checkbox-row{flex:none}
.other-row input[type="text"]{flex:1;min-width:200px}
.consent-row{display:flex;align-items:flex-start;gap:10px;font-size:.9rem;color:var(--on-surface-variant);cursor:pointer}
.consent-row input{margin-top:4px;width:18px;height:18px;flex:none;accent-color:var(--primary)}
.thankyou{display:none;background:var(--surface-1);border:1px solid var(--outline-variant);
  border-radius:var(--r);padding:36px 30px;text-align:center;box-shadow:var(--shadow)}
.thankyou.show{display:block}
.petition-form.is-hidden{display:none}

/* ---------- legal pages ---------- */
.legal{max-width:760px;margin:0 auto;padding:56px 24px 90px}
.legal .draft-banner{background:var(--warning);color:#fff;border-radius:14px;padding:16px 20px;
  font-weight:700;font-size:.92rem;margin-bottom:36px}
.legal h2{margin-top:36px;margin-bottom:10px;font-size:1.3rem}
.legal p,.legal li{color:var(--on-surface-variant);font-size:.96rem;line-height:1.7;margin-bottom:12px}
.legal ul{padding-left:0;margin-bottom:16px}
.legal li{padding-left:22px;position:relative}
.legal li::before{content:"–";position:absolute;left:0;color:var(--primary)}
.legal a{color:var(--primary)}
.legal .meta{color:var(--on-surface-variant);font-size:.85rem;margin-bottom:28px}


/* ---------- footer ---------- */
footer.ft{background:#1B1622;color:#D6CFE2;margin-top:0;padding-top:56px}
footer.ft .in{max-width:1080px;margin:0 auto;padding:0 24px 30px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:26px;font-size:.87rem}
footer.ft h4{color:#FBF7EE;font-size:.9rem;margin-bottom:10px;font-family:'Manrope';font-weight:700}
footer.ft a{color:#C9BEDD;text-decoration:none}
footer.ft a:hover{color:#F0EADF;text-decoration:underline}
footer.ft .brand-blurb{color:#B7ADC9;max-width:280px;line-height:1.6}
footer.ft .cred{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding:18px 24px 0;
  text-align:center;font-size:.78rem;color:#9E93B3;max-width:1080px;margin:0 auto}
footer.ft .cred p{margin-bottom:6px}

/* ---------- responsive ---------- */
@media (max-width:860px){
  nav.top{display:none}
  nav.top.open{display:flex;position:fixed;inset:66px 14px auto 14px;flex-direction:column;
    background:var(--surface-1);border-radius:16px;box-shadow:var(--shadow-lg);padding:14px;z-index:99}
  nav.top.open a{color:var(--on-surface)}
  nav.top.open a.active{background:var(--primary-container);color:var(--on-primary-container)}
  .nav-cta{display:none}
  .menu-btn{display:block}
  .price-cards{grid-template-columns:1fr}
  .compare-table{font-size:.82rem}
  .compare-table th,.compare-table td{padding:10px 10px}
}
@media (max-width:400px){
  .wrap,.legal{padding-left:16px;padding-right:16px}
  .hero,.subhero{padding-left:16px;padding-right:16px}
}

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

/* ---------- print (legal pages may be printed for records) ---------- */
@media print{
  .topbar,.menu-btn,footer.ft,.hero::after{display:none}
  body{background:#fff;color:#000}
}