/* Craft & Site — shared brand base.
   Extracted 2026-08-23 for the legal pages (/terms, /refunds, /privacy), which are the first pages
   to link a stylesheet instead of inlining one. The marketing pages still carry their own inline
   <style> blocks; this file is the seed of that consolidation, not a replacement for it yet.
   Any token change here must be mirrored in those inline blocks until they are migrated. */

:root{
  --paper:#FBFAF7; --paper-2:#F2F0EA; --ink:#111110; --ink-soft:#6E6C67;
  --accent:#111110; --accent-2:#2A2926; --accent-deep:#000000; --gold:#6E6C67;
  --line:#E2E0DA; --radius:0px;
    --font-display:"Syne","Instrument Sans",system-ui,sans-serif;
    --font-body:"Instrument Sans",system-ui,sans-serif;
    --disp-weight:800; --disp-track:-.03em; --disp-lh:.98;
  --wrap:min(100% - 2.4rem, 1200px);
  --s--1:clamp(.85rem,.82rem + .15vw,.94rem);
  --s0:clamp(1rem,.96rem + .25vw,1.14rem);
  --s1:clamp(1.2rem,1.08rem + .55vw,1.5rem);
  --s2:clamp(1.55rem,1.25rem + 1.5vw,2.3rem);
  --s3:clamp(2.05rem,1.45rem + 3vw,3.5rem);
  --s4:clamp(2.6rem,1.5rem + 5.4vw,5.7rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:var(--s0);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;min-height:100vh;display:flex;flex-direction:column}

a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-display);font-weight:var(--disp-weight);line-height:1.03;letter-spacing:-.03em;margin:0}
p{margin:0}
.wrap{width:var(--wrap);margin-inline:auto;position:relative;z-index:2;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.eyebrow{font-size:var(--s--1);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.lede{font-size:var(--s1);color:var(--ink-soft);line-height:1.45}

.btn{display:inline-flex;align-items:center;gap:.55rem;min-height:54px;padding:.9rem 1.7rem;border-radius:0;font-weight:600;font-size:var(--s0);transition:transform .18s,box-shadow .18s}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:#fff;box-shadow:0 10px 30px -12px rgba(126,52,13,.55)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(126,52,13,.72)}
/* background MUST be explicit. A <button> carries the browser's own grey default, so a ghost
   button rendered as a light grey box on warm paper while the identical <a> looked correct. */
.btn-ghost{background:transparent;border:1.5px solid var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px)}
.arrow{transition:transform .18s} .btn:hover .arrow{transform:translateX(3px)}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:0}
.skip{position:absolute;left:.75rem;top:-4rem;z-index:100;background:var(--ink);color:var(--paper);padding:.75rem 1.15rem;border-radius:0;font-weight:600;transition:top .18s}
.skip:focus{top:.75rem}
main:focus{outline:none}

header{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--paper) 84%,transparent);backdrop-filter:blur(12px)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 0}
.brand{font-family:"Instrument Sans",system-ui,sans-serif;font-weight:700;font-size:1.3rem;letter-spacing:-.02em;min-height:44px;display:inline-flex;align-items:center}
.brand .amp{color:var(--accent);font-style:italic;font-weight:460}
.bar .btn{min-height:44px;padding:.55rem 1.2rem;font-size:var(--s--1)}

footer{border-top:1px solid var(--line);padding:clamp(2.4rem,1.5rem + 3vw,3.4rem) 0;position:relative;z-index:2}
.footgrid{display:grid;gap:2rem clamp(1.5rem,1rem + 2vw,3rem);grid-template-columns:1fr}
.footbrand .brand{font-size:1.2rem}
.foot-tag{color:var(--ink-soft);font-size:var(--s--1);margin:.5rem 0 0;max-width:32ch}
.nap{font-style:normal;color:var(--ink-soft);font-size:var(--s--1);margin-top:1rem;line-height:1.7}
.nap a{color:var(--accent);font-weight:600}
.foot-h{font-family:"Instrument Sans",system-ui,sans-serif;font-weight:560;font-size:var(--s0);margin:0 0 .7rem}
.footnav{display:flex;flex-direction:column;gap:.05rem}
.footnav a{color:var(--ink-soft);font-weight:600;font-size:var(--s--1);min-height:40px;display:inline-flex;align-items:center;transition:color .18s}
.footnav a:hover,.footnav a[aria-current]{color:var(--accent)}
.footcontact .mail{color:var(--accent);font-weight:600;display:inline-flex;min-height:40px;align-items:center}
.foot-fine{color:var(--ink-soft);font-size:var(--s--1);margin:.4rem 0 0}
.footguides{margin-top:1.5rem}
@media(min-width:720px){.footgrid{grid-template-columns:1.5fr 1fr 1fr}}

/* ---- Legal document layer -------------------------------------------------
   These pages are read, not scanned. Measure is capped near 68ch, headings get
   a rule so a reader can find a clause fast, and the key promise gets a pull
   block so it is not buried in body copy. */

.legal-main{flex:1;padding:clamp(2.4rem,1.6rem + 4vw,4.6rem) 0 clamp(3rem,2rem + 4vw,5rem)}
.legal-head{max-width:56ch;margin-bottom:clamp(2rem,1.4rem + 2vw,3rem)}
.legal-head h1{font-size:var(--s3);font-weight:640;margin:.55rem 0 1rem;max-width:18ch}
.legal-head .lede{max-width:52ch}
.updated{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.3rem;font-size:var(--s--1);font-weight:600;color:var(--ink-soft);background:var(--paper-2);border:1px solid var(--line);border-radius:0;padding:.42rem 1rem}
.updated::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}

.legal-body{max-width:68ch;display:grid;gap:clamp(1.9rem,1.4rem + 1.4vw,2.7rem)}
.legal-body section{display:grid;gap:.85rem;scroll-margin-top:5.5rem}
.legal-body h2{font-size:var(--s1);font-weight:640;padding-top:1.3rem;border-top:1px solid var(--line)}
.legal-body section:first-child h2{padding-top:0;border-top:0}
.legal-body p{color:var(--ink-soft)}
.legal-body strong,.legal-body b{color:var(--ink);font-weight:600}
.legal-body a:not(.btn){color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.legal-body ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem;color:var(--ink-soft)}
.legal-body li{display:flex;gap:.7rem;align-items:baseline}
.legal-body li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent);position:relative;top:-1px}

/* The one clause a reader is actually looking for. */
.promise{background:linear-gradient(135deg,rgba(17,17,16,.07),rgba(110,108,103,.11));border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--radius);padding:clamp(1.2rem,1rem + 1vw,1.7rem)}
.promise p{color:var(--ink)}
.promise p + p{margin-top:.7rem}

.legal-nav{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:clamp(2.4rem,1.8rem + 2vw,3.4rem);padding-top:1.6rem;border-top:1px solid var(--line);max-width:68ch}
.legal-nav a{font-size:var(--s--1);font-weight:600;color:var(--ink-soft);border:1px solid var(--line);border-radius:0;padding:.5rem 1.1rem;min-height:40px;display:inline-flex;align-items:center;transition:color .18s,border-color .18s}
.legal-nav a:hover{color:var(--accent);border-color:var(--accent)}
.legal-nav a[aria-current="page"]{color:var(--accent);border-color:var(--accent);background:var(--paper-2)}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============================================================================
   SHARED NAV. Single source of truth as of 2026-08-25.
   This lived inline in 13 separate pages, which is why a one line dropdown fix was a
   thirteen file edit and why the bug survived as long as it did. Every page now links
   brand.css BEFORE its own <style>, so a page can still override anything here locally.
   ============================================================================ */

/* ---- Nav dropdown, redesigned 2026-08-25 --------------------------------
   It read as a plain white rectangle for three compounding reasons, all fixed here.
   (1) The header is a translucent blurred wash (paper at 84%) over a hero tinted warm by the
       orange orbs. A panel of FULL-opacity paper hanging off it reads brighter and colder than
       everything around it. Flipping the panel to ink removes the whole problem: an ink card on
       warm paper cannot read as a white rectangle, and it is a component this system already
       ships (the dark monthly block on /pricing uses these exact tones).
   (2) It had no edge and no lift. --line on --paper is about 6% of contrast, and the old shadow
       was 0 24px 44px -22px: a 22px negative spread against a 44px blur renders almost nothing.
   (3) There was no content design inside it, just five identical links in a column. Each item now
       carries a second line saying who it is for, which is what makes it a menu instead of a list.
   Behaviour is untouched. nav.js already handles aria-expanded, Escape with focus return, arrow
   keys, outside click and close-on-select, and it resolves the panel with `:scope > div` and items
   with `a[href]`, so a nested <span> inside each link is safe. Zero JS changes. */
html .nav-drop-p{
  left:50%; transform:translateX(-50%);
  min-width:320px; max-width:calc(100vw - 2.4rem);
  background:var(--ink);
  border:1px solid rgba(251,250,247,.14);
  border-radius:0;
  padding:.55rem;
  box-shadow:0 18px 40px -12px rgba(17,17,16,.45), 0 2px 6px rgba(17,17,16,.18);
}
/* A notch ties the panel to its trigger so it reads as attached, not floating. */
html .nav-drop-p::before{
  content:""; position:absolute; top:-6px; left:50%; margin-left:-5px;
  width:10px; height:10px; background:var(--ink);
  border-top:1px solid rgba(251,250,247,.14); border-left:1px solid rgba(251,250,247,.14);
  transform:rotate(45deg); border-radius:0 0 0 0;
}
html .nav-drop .nav-drop-p a,
html .sub .subsheet a{
  flex-direction:column; align-items:flex-start; gap:.12rem;
  padding:.6rem .75rem; min-height:0; white-space:normal;
  color:#F2F0EA; font-size:var(--s--1); line-height:1.3;
}
html .nav-drop .nav-drop-p a span,
html .sub .subsheet a span{
  display:block; font-weight:500; font-size:.82rem; line-height:1.35;
  color:#A79B86; letter-spacing:0;
}
html .nav-drop-p a:hover,
html .nav-drop-p a:focus-visible{
  background:rgba(251,250,247,.08); color:var(--paper);
}
html .nav-drop .nav-drop-p a:hover span,
html .nav-drop .nav-drop-p a:focus-visible span{color:#C9BCA4}
html .nav-drop .nav-drop-p a:focus-visible{outline:2px solid var(--gold); outline-offset:-2px}
/* A quiet caption gives the panel a top edge and tells you what you are looking at. */
html .nav-drop-cap{
  margin:.15rem .75rem .45rem; padding-bottom:.5rem;
  border-bottom:1px solid rgba(251,250,247,.12);
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold);
}
@media(prefers-reduced-motion:no-preference){
  .nav-drop[open] .nav-drop-p{animation:navdrop .16s ease-out}
  @keyframes navdrop{from{opacity:0;transform:translateX(-50%) translateY(-4px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
}
/* The mobile submenu is an inset card, not a bare list: without its own ground the light link
   colour above would sit on transparent over the light sheet and be unreadable. Same ink as the
   desktop panel so the two read as one component. */
html .sub .subsheet{
  background:var(--ink);
  border:1px solid rgba(251,250,247,.14);
  border-radius:0;
  padding:.45rem .3rem .35rem;
  margin:.1rem .15rem .35rem;
}
html .sub .subsheet .nav-drop-cap{margin:.1rem .6rem .4rem}
html .sub .subsheet a{padding:.55rem .6rem}

/* The mobile submenu is an inset card, not a bare list: without its own ground the light link
   colour above would sit on transparent over the light sheet and be unreadable. Same ink as the
   desktop panel so the two read as one component. */
html .sub .subsheet{
  background:var(--ink);
  border:1px solid rgba(251,250,247,.14);
  border-radius:0;
  padding:.45rem .3rem .35rem;
  margin:.1rem .15rem .35rem;
}
html .sub .subsheet .nav-drop-cap{margin:.1rem .6rem .4rem}
html .sub .subsheet a{padding:.55rem .6rem}