/* ============================================================
   DOCUMENT PAGES (/support, /privacy)
   Shared chrome for the site's prose pages. The landing page is one
   self-contained file because it is one page with its own animation
   and demo state; these are two near-identical documents, so the
   masthead, type scale and footer live here once instead of twice.

   Token block is lifted verbatim from index.html's light scope, which
   is the site's committed look. Brand hex appears here and nowhere
   else in the sheet. No animation, no JS: a support page has to render
   even when everything else is broken.
   ============================================================ */
:root{
  --brand-ink:#0B1420;       /* Ink Navy  */
  --brand-persimmon:#FF8A55; /* Persimmon */
  --brand-cloud:#F3F6F8;     /* Cloud     */

  --bg:var(--brand-cloud);
  --surface:#FFFFFF;
  --surface-sunk:#E7EDF2;
  --text:var(--brand-ink);
  --text-2:#4B5D6E;
  --text-3:#8598A6;
  --hairline:rgba(11,20,32,.11);
  --rule:var(--brand-ink);
  --accent:var(--brand-persimmon);
  /* Persimmon on Cloud lands near 2:1, unreadable as type. Fills and
     rules use --accent; anything glyph-shaped uses --accent-text. */
  --accent-text:#B4451A;
  --on-accent:#FFFFFF;
  --focus:var(--brand-persimmon);

  --label-font:"Instrument Sans",system-ui,sans-serif;
  --label-sm:11px;
  --label-md:12px;
  --label-lg:13px;
  --label-weight:600;
}

*{box-sizing:border-box;margin:0;padding:0;}

html{-webkit-text-size-adjust:100%;}

body{
  font-family:"Instrument Sans",system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:1180px;margin:0 auto;padding:22px clamp(18px,4vw,40px) 40px;}

/* ---------- masthead (matches the landing page lockup) ---------- */
.masthead{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding-bottom:16px;border-bottom:1.5px solid var(--rule);
}
.brand{display:flex;flex-direction:column;line-height:1;}
.wordmark{
  display:inline-flex;align-items:center;gap:.375em;
  font-size:clamp(24px,3vw,34px);align-self:flex-start;
  text-decoration:none;
}
.wordmark svg{height:1.333em;width:1.333em;flex:none;color:var(--accent);}
.wordmark .wm-text{
  font-family:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  letter-spacing:-.035em;color:var(--text);line-height:1;white-space:nowrap;
}
.wordmark .wm-text .t{font-weight:400;}
.wordmark .wm-text .c{font-weight:500;}
.dateline{
  font-family:var(--label-font);font-size:var(--label-md);
  font-weight:var(--label-weight);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);margin-top:6px;
}
nav{display:flex;align-items:center;gap:26px;}
nav a{font-size:15px;color:var(--text-2);text-decoration:none;letter-spacing:.01em;}
nav a:hover{color:var(--text);}
@media(max-width:600px){ nav a{display:none;} }

/* ---------- document body ---------- */
.doc{max-width:660px;padding-top:clamp(34px,6vw,64px);}

.eyebrow{
  font-family:var(--label-font);font-size:var(--label-lg);
  font-weight:var(--label-weight);letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-text);
  display:flex;align-items:center;gap:9px;
}
.eyebrow::before{content:"";width:22px;height:1.5px;background:var(--accent);display:inline-block;}
@media(max-width:600px){ .eyebrow{font-size:var(--label-md);letter-spacing:.14em;} }

/* Stepped down from the landing page's hero scale. These are documents
   someone opened with a question, not a pitch, and the smaller head puts
   the first real line of content on the first screen. */
.doc h1{
  font-family:"Fraunces",serif;font-optical-sizing:auto;font-weight:900;
  letter-spacing:-.02em;line-height:1.04;
  font-size:clamp(34px,4.6vw,48px);margin:16px 0 0;
}
.doc .lede{
  font-size:16.5px;line-height:1.55;
  color:var(--text-2);max-width:54ch;margin-top:16px;
}

.doc h2{
  font-family:"Fraunces",serif;font-optical-sizing:auto;font-weight:600;
  letter-spacing:-.01em;line-height:1.18;
  font-size:clamp(21px,2.4vw,26px);
  margin:clamp(38px,5vw,52px) 0 0;
}
/* First question sits closer to the lede than the ones that follow each
   other, so the page opens as one block instead of a gap. */
.doc h2.first{margin-top:clamp(30px,4vw,40px);}

.doc h3{
  font-family:var(--label-font);font-size:var(--label-lg);
  font-weight:var(--label-weight);letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3);
  margin:clamp(34px,4.5vw,46px) 0 0;
}

.doc p{font-size:16.5px;line-height:1.62;color:var(--text-2);margin-top:14px;}
.doc p b,.doc li b{color:var(--text);font-weight:600;}

.doc ul{margin:14px 0 0;padding-left:0;list-style:none;}
.doc li{
  font-size:16.5px;line-height:1.62;color:var(--text-2);
  padding-left:20px;position:relative;margin-top:9px;
}
.doc li::before{
  content:"";position:absolute;left:2px;top:.65em;
  width:6px;height:6px;border-radius:50%;background:var(--accent);
}

.doc a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px;}
.doc a:hover{text-decoration-thickness:2px;}
.doc a:focus-visible{outline:2.5px solid var(--focus);outline-offset:3px;border-radius:2px;}

/* An in-app label quoted in prose. Not a code font: it is a thing the
   reader is about to go tap, so it should look like the button it names. */
.ui{
  font-weight:600;color:var(--text);
  background:var(--surface-sunk);border-radius:5px;
  padding:1px 6px;white-space:nowrap;
}

/* ---------- collapsed question list (/support) ----------
   Native <details>/<summary>, so the page stays free of JavaScript and
   keyboard support comes for free. Collapsed by default: seven questions
   plus the contact card then fit one phone screen, which is where a
   support link actually gets opened. The tradeoff taken knowingly is
   that find-on-page will not reach text inside a closed answer. */
.faq{margin-top:clamp(26px,4vw,36px);border-top:1.5px solid var(--rule);}

.qa{border-bottom:1px solid var(--hairline);}

.qa summary{
  display:flex;align-items:baseline;gap:14px;
  padding:16px 0;cursor:pointer;list-style:none;
  font-family:"Fraunces",serif;font-optical-sizing:auto;font-weight:600;
  font-size:18px;line-height:1.26;letter-spacing:-.005em;color:var(--text);
}
/* Safari draws its own triangle unless both of these are set. */
.qa summary::-webkit-details-marker{display:none;}
.qa summary::marker{content:"";}
.qa summary:hover{color:var(--accent-text);}
.qa summary:focus-visible{outline:2.5px solid var(--focus);outline-offset:3px;border-radius:3px;}

/* The chevron is drawn from a rotated border rather than loaded as an
   asset, the same reasoning as the app's own icons: one glyph is not
   worth a font file or an SVG request. Nudged off the baseline so it
   stays level with the first line on questions that wrap. */
.chev{
  flex:none;width:8px;height:8px;margin-left:auto;position:relative;top:-2px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);transform-origin:center;
  transition:transform .18s ease;
}
.qa[open] .chev{transform:rotate(-135deg);}
@media(prefers-reduced-motion:reduce){ .chev{transition:none;} }

.qa .body{padding:0 26px 18px 0;}
.qa .body p{font-size:15.5px;line-height:1.55;color:var(--text-2);margin:0;}
.qa .body p + p{margin-top:10px;}

/* Closing contact block, and the one card on the page. */
.contact{
  background:var(--surface);border:1.5px solid var(--rule);border-radius:14px;
  padding:clamp(20px,3vw,28px);margin-top:clamp(30px,4vw,42px);
}
.contact h2{margin-top:0;}
.contact p{margin-top:10px;}

/* Effective date and the "this is not legal advice" register: smaller,
   quieter, still readable. Never below the 11px floor. */
.fine{
  font-family:var(--label-font);font-size:var(--label-sm);
  font-weight:var(--label-weight);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3);margin-top:26px;
}

.foot{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-top:1.5px solid var(--rule);margin-top:clamp(48px,7vw,84px);padding:16px 0 6px;
  font-family:var(--label-font);font-size:var(--label-sm);
  font-weight:var(--label-weight);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3);
}
.foot a{color:var(--text-3);text-decoration:none;}
.foot a:hover{color:var(--text);}