/* SELF-HOSTED 11 Aug 2026, and it is a privacy fix rather than a performance one.
   The page told visitors it runs no tracking, which was true, while still requesting fonts
   from Google on every load and handing Google the visitor's IP address. That is the exact
   transfer a careful reader would call us on, and it is the kind of small contradiction a
   privacy policy cannot survive. One 135KB variable file covers every weight we use, and
   the page now makes NO third-party request at all. It also means it renders correctly
   opened straight from disk with no internet. */
@font-face{font-family:'Jost';src:url('/Jost.ttf') format('truetype');
  font-weight:100 900;font-style:normal;font-display:swap}

/* AAVATtype product styles. Green system per the ACE colour guide (2 Jul 2026).
   Font: Jost 300 + 400 only. Light is the default site mode. */
:root{
  --emerald:#0F6A4B; --emerald-deep:#0B5338; --emerald-bright:#148F65;
  --shade1:#073525; --shade2:#084834; --shade3:#0B4F38; --pine:#0E4830;
  --emerald-mid:#107452; --vivid:#1BBC85;
  --fresh:#6FC9A6; --mint:#7AB08C; --pastel:#BFDCC4; --mint-light:#79ECC5;
  --warm-white:#FCFAF7; --ivory:#F4EFE8; --cream:#F4ECE1; --sand:#D1C1AF;
  --sand-accent:#B79A76; --sand-deep:#5C4A30; --cream-text:#F9F7DE;
  /* Added 29 Aug 2026 for the legal pages. The landing page carries its own copy of these
     in its inline CSS; these are the same numbers so the two sets of pages agree.
     --measure is 54ch, and the number is smaller than it looks. The `ch` unit is the width
     of a ZERO, and in Jost a zero is far narrower than an average character, so 54ch renders
     about 75 real characters at this size. MEASURED on the deployed page 29 Aug 2026 by
     probing 80 characters of the actual body text: 76ch was rendering 106 characters a line,
     well past the 45 to 75 range a reader can track back through, while looking like a
     conservative number. Never trust a ch value as a character count; measure the string.
     Change the one number here and all four pages follow. */
  --measure:54ch;
  --gutter:clamp(20px,5vw,48px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-weight:400;
  /* Matched to the landing page 29 Aug 2026. There was no font-size here at all, so these
     pages ran at whatever the browser defaulted to and then overrode it to 12px per page. */
  font-size:clamp(16px,1.05vw,17.5px);
  background:var(--warm-white);color:var(--emerald-deep);line-height:1.55;min-height:100vh;position:relative;overflow-x:hidden}
/* soft green orbs behind everything: the glass treatment, no warm cast */
.orbs{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(80px)}
.orb.a{width:44vw;height:44vw;top:-12vw;left:-10vw;background:radial-gradient(circle,rgba(15,106,75,.10),transparent 70%)}
.orb.b{width:50vw;height:50vw;bottom:-16vw;right:-12vw;background:radial-gradient(circle,rgba(20,143,101,.12),transparent 70%)}
.orb.c{width:30vw;height:30vw;top:38%;left:44%;background:radial-gradient(circle,rgba(122,176,140,.14),transparent 70%)}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px;position:relative;z-index:1}
.wrap.narrow{max-width:680px}

/* type */
h1,h2,h3{font-weight:400;letter-spacing:-.01em;color:var(--emerald-deep)}
h1{font-size:clamp(34px,5vw,54px);line-height:1.08}
h2{font-size:clamp(26px,3.4vw,36px);line-height:1.15}
h3{font-size:20px}
p{color:var(--pine)}
.kicker{letter-spacing:.24em;text-transform:uppercase;font-size:12px;font-weight:400;color:var(--sand-deep)}
.big-word{font-weight:400;letter-spacing:.14em;font-size:clamp(44px,7vw,76px);color:var(--emerald-deep);line-height:1}
.accent{color:var(--emerald)}
.soft{color:var(--pine);opacity:.85}
.small{font-size:13.5px}
.center{text-align:center}

/* glass surfaces */
.glass{background:rgba(255,255,255,.55);border:1px solid rgba(15,106,75,.14);border-radius:18px;
  backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%);
  box-shadow:0 18px 44px rgba(15,106,75,.08)}
.glass-dark{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:18px;
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 22px 54px rgba(0,0,0,.32)}

/* buttons: emerald metallic on light grounds, fresh mint on dark grounds (hard rules) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:inherit;font-weight:400;
  font-size:16px;letter-spacing:.02em;border-radius:40px;padding:15px 30px;cursor:pointer;border:none;
  text-decoration:none;transition:transform .18s,box-shadow .18s;-webkit-tap-highlight-color:transparent}
.btn-emerald{color:var(--cream-text);
  background:linear-gradient(118deg,rgba(255,255,255,.26),rgba(255,255,255,0) 22%,rgba(0,0,0,.18) 55%,rgba(255,255,255,.2) 78%,rgba(0,0,0,.1)),var(--emerald);
  box-shadow:0 12px 30px rgba(11,83,56,.32)}
.btn-emerald:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(11,83,56,.4)}
.btn-mint{color:var(--emerald-deep);
  background:linear-gradient(118deg,rgba(255,255,255,.4),rgba(255,255,255,0) 24%,rgba(0,0,0,.08) 56%,rgba(255,255,255,.35) 80%),var(--fresh);
  box-shadow:0 12px 28px rgba(111,201,166,.35)}
.btn-mint:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(111,201,166,.45)}
.btn-ghost{color:var(--emerald);background:transparent;border:1px solid rgba(15,106,75,.35)}
.btn-ghost:hover{border-color:var(--emerald)}
.btn.sm{font-size:14px;padding:10px 20px}

/* nav */
nav{position:sticky;top:0;z-index:50;background:rgba(252,250,247,.8);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(15,106,75,.1)}
nav .bar{max-width:1080px;margin:0 auto;padding:16px 24px;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.wordmark{display:inline-flex;align-items:baseline;letter-spacing:.4em;font-weight:400;font-size:16px;color:var(--emerald);text-decoration:none;white-space:nowrap}
.wordmark i,.wordmark .lc{display:inline;background:none;width:auto;height:auto;font-style:normal;font-weight:300;text-transform:lowercase;letter-spacing:.05em}
nav .links{display:flex;gap:22px;align-items:center}
nav .links a{color:var(--pine);text-decoration:none;font-size:15px}
nav .links a:hover{color:var(--emerald)}
nav .links a.btn-emerald,nav .links a.btn-emerald:hover,nav .links a.btn-emerald:visited{color:var(--cream-text)}
@media(max-width:720px){nav .links a.hideable{display:none}}

/* sections */
section{padding:72px 0;position:relative;z-index:1}
.dark-band{background:linear-gradient(135deg,var(--shade1) 0%,var(--shade2) 40%,var(--shade3) 75%,var(--emerald-deep) 100%);color:var(--cream-text)}
.dark-band h2,.dark-band h3,.dark-band p{color:var(--cream-text)}
.dark-band .kicker{color:var(--cream-text);opacity:.85}

/* cards / grids */
.grid{display:grid;gap:18px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:860px){.g3,.g2{grid-template-columns:1fr}}
.card{padding:26px 24px}
.tag{display:inline-block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:4px 12px;border-radius:20px;
  background:rgba(15,106,75,.1);color:var(--emerald)}
.tag.free{background:var(--emerald);color:var(--cream-text)}

/* quiz */
.q-progress{height:5px;border-radius:4px;background:rgba(15,106,75,.12);overflow:hidden;margin:26px 0 34px}
.q-progress i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,var(--emerald-mid),var(--emerald));transition:width .3s}
.q-count{font-size:13px;color:var(--sand-deep);letter-spacing:.14em;text-transform:uppercase}
.q-text{font-weight:300;font-size:clamp(24px,3.4vw,32px);color:var(--emerald-deep);margin:14px 0 30px;min-height:3.2em}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{font-family:inherit;font-weight:400;font-size:16.5px;text-align:left;padding:15px 20px;border-radius:14px;cursor:pointer;
  background:rgba(255,255,255,.6);border:1px solid rgba(15,106,75,.16);color:var(--pine);transition:all .14s}
.opt:hover{border-color:var(--emerald);color:var(--emerald-deep)}
.opt.on{background:var(--emerald);border-color:var(--emerald);color:var(--cream-text)}
.q-nav{display:flex;justify-content:space-between;align-items:center;margin-top:30px}
.linkish{background:none;border:none;font-family:inherit;font-size:14.5px;color:var(--emerald);cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* factor bars */
.frow{display:grid;grid-template-columns:130px 1fr;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid rgba(15,106,75,.1)}
.frow:last-child{border-bottom:none}
.frow .fw{font-weight:400;color:var(--emerald-deep)}
.frow .ff{font-size:12px;color:var(--sand-deep);letter-spacing:.06em}
.bar{height:7px;border-radius:5px;background:rgba(15,106,75,.1);overflow:hidden;margin-bottom:7px}
.bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--emerald-mid),var(--emerald))}
.dark-band .bar{background:rgba(249,247,222,.16)}
.dark-band .bar i{background:linear-gradient(90deg,var(--mint),var(--pastel))}
.frow .fd{font-size:14px;color:var(--pine)}

/* share card area */
.cardpick{display:flex;gap:10px;justify-content:center;margin:18px 0}
.cardpick button{font-family:inherit;font-size:14px;padding:9px 20px;border-radius:26px;cursor:pointer;border:1px solid rgba(15,106,75,.3);background:transparent;color:var(--emerald)}
.cardpick button.on{background:var(--emerald);color:var(--cream-text);border-color:var(--emerald)}
.cardframe{max-width:420px;margin:0 auto;border-radius:16px;overflow:hidden;box-shadow:0 24px 60px rgba(11,83,56,.25)}
.cardframe img{display:block;width:100%}

/* pricing */
.tier{position:relative;display:flex;flex-direction:column;gap:10px}
.tier .price{font-size:44px;font-weight:300;color:var(--emerald-deep)}
.tier .price span{font-size:16px}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin:8px 0 16px}
.tier ul li{padding-left:24px;position:relative;font-size:15px;color:var(--pine)}
.tier ul li:before{content:'';position:absolute;left:2px;top:9px;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--emerald)}
.tier.popular{border:1.5px solid var(--emerald)}
.pop-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--emerald);color:var(--cream-text);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:5px 16px;border-radius:20px;white-space:nowrap}

/* inputs */
.field{display:flex;gap:10px;max-width:440px;margin:0 auto}
.field input{flex:1;font-family:inherit;font-size:15.5px;padding:13px 18px;border-radius:30px;border:1px solid rgba(15,106,75,.25);
  background:rgba(255,255,255,.75);color:var(--emerald-deep);outline:none}
.field input:focus{border-color:var(--emerald)}
.note-line{font-size:13px;color:var(--sand-deep);margin-top:10px}

footer{padding:44px 0 60px;border-top:1px solid rgba(15,106,75,.1);position:relative;z-index:1}
footer .small{color:var(--pine);opacity:.75}
.honesty{font-size:13px;color:var(--pine);opacity:.8;max-width:640px}

/* ------------------------------------------------------------------
   THE LEGAL PAGES: /privacy, /terms, /disclaimer, and the 404.
   ONE COPY, HERE. The three pages each carried their own identical <style> block, which is
   three chances for them to drift apart and three edits for every change. Anything below is
   the only definition.

   SIZED TO BE READ, Nikki's call 29 Aug 2026, and it reverses a deliberate decision so it is
   written down. Aziza set these pages in 12px on 11 Aug: "I didn't mean to make it small as in
   cut the text. I meant to make it small, like tiny. Font size, tiny." The type is now the
   site's own body size and the container is the site's own .wrap, so a reader arriving from
   the landing page meets the same margins and the same measure. The COVERAGE is unchanged;
   only the size is.

   THE FRAME IS THE FULL PAGE WIDTH AND THE TEXT IS NOT, which is what the landing page does
   too: its .wrap is 1180px and its lead paragraph sits at 60ch inside it. A legal page set to
   the full 1180 would run about 150 characters a line, which is roughly twice the width a
   person can track back from without losing their place.
   ------------------------------------------------------------------ */
/* EXACTLY THE LANDING PAGE'S MARGINS, 29 Aug 2026, Nikki's instruction, and it is the third
   attempt at this so the two that failed are recorded.

   LEFT-ALIGNED IN THE FULL FRAME came first. Same margins, but a legal page cannot fill
   1180px at a readable line length, so all the leftover width piled up on the right and the
   page read as squashed into the left.

   CENTRING THE COLUMN fixed the look and broke the instruction: the text no longer started
   where the landing page's text starts.

   WHAT WORKS IS WHAT THE LANDING PAGE ITSELF DOES. Its vision block is a two-column grid,
   claim on the left and body on the right, because "one column at 66ch across a 1180px page
   leaves half the width doing nothing" (its own comment). The legal pages now use the same
   shape per section: the heading holds the left column, its text sits on the right at a
   reading measure. Same frame, same gutters, same left edge, and nothing is squashed. */
.doc{
  width:100%;max-width:1180px;margin:0 auto;
  padding-inline:var(--gutter);
  padding-block:clamp(48px,7vw,84px) clamp(72px,9vw,112px);
  position:relative;z-index:1;
}
.doc h1{
  font-size:clamp(2.1rem,4.6vw,3.1rem);font-weight:300;line-height:1.06;
  letter-spacing:-.02em;color:var(--emerald-deep);margin-bottom:6px;
}
.doc .updated{font-size:.82rem;color:var(--sand-deep);margin-bottom:30px}
/* QUIETENED, and that stays Aziza's call from 11 Aug: "why do we need to put it into people's
   faces". Sentence case, muted, only a little larger than the body, so the page reads as small
   print while staying scannable. Scaled up with everything else rather than left at 12.5px,
   which against 17px body would have read as a caption instead of a heading. */
.doc h2{
  /* A step clearer than the body, which 1.05rem was not: against 16px body it read as a
     coloured line rather than a heading. Sentence case and muted stay, per Aziza. */
  font-size:1.2rem;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--sand-deep);margin:34px 0 8px;
}
.doc p, .doc li{
  font-size:1rem;line-height:1.7;color:var(--pine);
  margin-bottom:12px;
  /* CAPPED IN THE SINGLE-COLUMN RANGE, restored 29 Aug 2026. When the per-element caps came
     out I said --measure still governed below the split. It did not: nothing capped the text
     there, and at 999px, the widest single-column width, a line was running 132 characters,
     worse than anything on a desktop. The two-column rule above 1000px overrides this back to
     none, which is where Nikki asked for the full width. */
  max-width:var(--measure);
}
.doc .lede, .doc .help{max-width:var(--measure)}
.doc ul{padding-left:20px;margin-bottom:12px}
.doc li{margin-bottom:6px}
.doc a{color:var(--emerald);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(15,106,75,.4)}
.doc a:hover{color:var(--emerald-bright);text-decoration-color:currentColor}
.doc .lede{font-size:clamp(1.06rem,1.35vw,1.2rem);line-height:1.6;margin-bottom:26px}
.doc .back{display:inline-block;margin-top:44px;font-size:.95rem}
/* 44px touch targets on the footer links without changing how the row looks. */
.doc .back a{display:inline-block;padding:11px 2px;margin:-11px 0}

/* The crisis block on /disclaimer is the one part of a legal page that must not read as small
   print. Someone scanning it in a bad moment should find a phone number without reading
   anything else, so it is set off and a step larger than the body. */
.doc .help{
  border:1px solid rgba(15,106,75,.22);border-radius:16px;
  padding:22px 26px;margin:30px 0;background:rgba(255,255,255,.55);
}
.doc .help h2{margin-top:0}
.doc .help p, .doc .help li{font-size:1.05rem;line-height:1.75}
.doc .help a{display:inline-block;padding:6px 1px;margin:-6px 0}

/* app.css already had `section{padding:72px 0}` for the marketing page's bands, and a legal
   page's <section> inherited it: 144px of padding inside every one, which read as a huge hole
   between sections and had nothing to do with the grid. Reset first, at every width. */
.doc-sec{padding:0}

/* Below the split, a section is just a heading followed by its text, which is the phone
   layout and needs no grid at all. */
@media (min-width:1000px){
  .doc-sec{
    /* THE HEADING COLUMN IS SIZED TO A HEADING, not to a share of the page. It was .86fr,
       about 435px, holding text 100 to 180px wide, so every section had a chasm between the
       heading and the sentence it belongs to.
       18rem, MEASURED. The natural widths of all 43 headings across the three pages run from
       about 90px to 498px; at 13.5rem nine of them wrapped, at 18rem five do, and the five
       are full sentences that would read oddly on one line anyway. Chasing the longest would
       take a 31rem column. WIDENING IS FREE HERE because the headings are right-aligned, so
       a short heading ends at the same x whatever the column width is: the extra room is
       spent only on the long ones. */
    display:grid;grid-template-columns:minmax(0,18rem) minmax(0,1fr);
    /* COLUMN GAP ONLY. `gap` is a shorthand and sets the row gap too, and every paragraph in
       column two is its own grid row, so a 72px gap opened between every pair of sentences
       and left 250px between sections. The vertical rhythm comes from the paragraph margins,
       which is where it already was. */
    column-gap:clamp(28px,3vw,44px);row-gap:0;
    align-items:start;
    margin-bottom:clamp(34px,3.4vw,48px);
  }
  /* RIGHT-ALIGNED so the heading sits against its text rather than stranded at the far left
     of its column. A three-word heading left-aligned in even a narrow column leaves a gap the
     width of the words it does not have. This is the ordinary side-heading shape. */
  .doc-sec > h2{grid-column:1;margin:0;text-align:right}
  /* NO CAP: the text runs to the right margin, Nikki's call 29 Aug 2026. It was capped at
     --measure so a line stayed near 75 characters; uncapped it runs about 110, which is past
     the range a reader tracks back through comfortably. The line-height goes up a step to
     compensate, which is the standard remedy for a long measure: a taller gap between lines
     makes the return sweep easier to land. --measure still governs the single-column layout
     below 1000px, where the frame is the column. */
  .doc-sec > *:not(h2){grid-column:2;max-width:none}
  .doc-sec > p, .doc-sec > ul, .doc-sec > ul li{line-height:1.8}
  .doc-sec > *:not(h2):first-of-type{margin-top:0}
  /* The crisis block sits in the text column like every other section's content, and keeps
     its own heading inside the box so a screenshot of it still says what it is. */
  .doc-sec > .help{grid-column:2;max-width:none;margin:0}
  .doc-sec > .help h2{margin-top:0}
}