/* ==========================================================================
   Receipts OnHand: one stylesheet for every /receipts/ page, and for the
   apex at /, which links it for the tokens, the base type, the header and
   the footer. The apex keeps its own handful of rules inline in its file.

   Palette is sampled from the logo artwork:
     #2D7875 deep teal (outlines, wordmark)   #52A498 mid teal (badge)
     #C8EFDD soft mint (badge ground)         #367777 mid-deep teal

   No webfonts, no third-party requests, no build step. Edit this file
   directly; every page links it and nothing generates it.
   ========================================================================== */

/* --- tokens -------------------------------------------------------------- */

:root{
  /* brand constants, identical in both themes */
  --teal-900:#12302e;
  --teal-700:#2d7875;
  --teal-600:#367777;
  --teal-500:#52a498;
  --mint-200:#c8efdd;
  --mint-100:#e8f7ef;

  /* light theme */
  --bg:#fbfdfc;
  --bg-2:#f1f7f4;
  --surface:#ffffff;
  --surface-2:#f7fbf9;
  --ink:#12302e;
  --ink-2:#3c5b57;
  --muted:#5c736f;
  --line:#dbe7e2;
  --line-soft:#e8f0ed;
  --control:#748d87;
  --accent:#2d7875;
  --accent-2:#52a498;
  --accent-ink:#ffffff;
  --accent-wash:rgba(82,164,152,.12);
  --stop:#b04a40;
  --shadow:0 1px 2px rgba(18,48,46,.04),0 12px 32px -12px rgba(18,48,46,.16);
  --shadow-lg:0 2px 4px rgba(18,48,46,.05),0 32px 64px -24px rgba(18,48,46,.28);
  --device-bezel:#dfe8e5;

  /* type */
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  /* rhythm */
  --page:76rem;
  --prose:44rem;
  --radius:14px;
  --radius-lg:22px;

  color-scheme:light;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0c1817;
    --bg-2:#101f1e;
    --surface:#162827;
    --surface-2:#132322;
    --ink:#e7f1ee;
    --ink-2:#b7ccc7;
    --muted:#8aa39e;
    --line:#223937;
    --line-soft:#1b2f2e;
    --control:#5f8580;
    --accent:#6fc7b6;
    --accent-2:#52a498;
    --accent-ink:#07211e;
    --accent-wash:rgba(111,199,182,.14);
    --stop:#f0938a;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -12px rgba(0,0,0,.6);
    --shadow-lg:0 2px 4px rgba(0,0,0,.45),0 32px 64px -24px rgba(0,0,0,.75);
    --device-bezel:#2a413f;
    color-scheme:dark;
  }
}

:root[data-theme="dark"]{
  --bg:#0c1817;
  --bg-2:#101f1e;
  --surface:#162827;
  --surface-2:#132322;
  --ink:#e7f1ee;
  --ink-2:#b7ccc7;
  --muted:#8aa39e;
  --line:#223937;
  --line-soft:#1b2f2e;
  --control:#5f8580;
  --accent:#6fc7b6;
  --accent-2:#52a498;
  --accent-ink:#07211e;
  --accent-wash:rgba(111,199,182,.14);
  --stop:#f0938a;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -12px rgba(0,0,0,.6);
  --shadow-lg:0 2px 4px rgba(0,0,0,.45),0 32px 64px -24px rgba(0,0,0,.75);
  --device-bezel:#2a413f;
  color-scheme:dark;
}

/* --control is a deliberately stronger line than --line: WCAG 1.4.11 wants
   3:1 for anything whose outline is the only thing identifying it as a
   control. --line stays soft, for hairlines and card edges, which are
   decorative. Don't collapse the two. */

/* --- base ---------------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  -webkit-tap-highlight-color:transparent}
/* No 300ms double-tap-zoom wait on anything you can press. */
a,button,summary,label,input,select,textarea{touch-action:manipulation}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 clamp(1rem,.97rem + .16vw,1.0625rem)/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
strong{font-weight:640}
code{font-family:var(--mono);font-size:.9em}
hr{border:0;border-top:1px solid var(--line);margin:3rem 0}

h1,h2,h3,h4{line-height:1.15;letter-spacing:-.021em;font-weight:640;margin:0;
  text-wrap:balance}
h1{font-size:clamp(2.1rem,1.5rem + 2.6vw,3.5rem)}
h2{font-size:clamp(1.6rem,1.25rem + 1.5vw,2.4rem)}
h3{font-size:clamp(1.15rem,1.05rem + .4vw,1.35rem)}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--page);margin-inline:auto;padding-inline:clamp(1.15rem,4vw,2.5rem)}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--accent-ink);
  padding:.7rem 1.1rem;border-radius:0 0 8px 0;z-index:100}
.skip:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* --- header -------------------------------------------------------------- */

.site-head{
  position:sticky;top:0;z-index:50;
  background:var(--bg);
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s;
}
.site-head.is-stuck{border-bottom-color:var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:1.4rem;
  min-height:60px;padding-block:.6rem}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--ink);text-decoration:none;
  font-weight:640;letter-spacing:-.02em;font-size:1.02rem;white-space:nowrap}
.brand:hover{text-decoration:none}
.brand img{width:30px;height:30px;flex:none}
.site-head nav{margin-left:auto;display:flex;align-items:center;gap:1.7rem}
.site-head nav a{color:var(--ink-2);font-size:.925rem;font-weight:500;text-decoration:none;
  transition:color .2s}
.site-head nav a:hover{color:var(--accent)}
.site-head nav a[aria-current="page"]{color:var(--accent);font-weight:560}

.theme-toggle{margin-left:.2rem;flex:none;display:grid;place-items:center;width:34px;height:34px;
  border:1px solid var(--control);border-radius:9px;background:transparent;color:var(--ink-2);
  cursor:pointer;transition:border-color .2s,color .2s}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}
.theme-toggle svg{width:16px;height:16px}
.theme-toggle .moon{display:none}
:root[data-theme="dark"] .theme-toggle .moon,
:root[data-theme="dark"] .theme-toggle .sun{display:none}
:root[data-theme="dark"] .theme-toggle .moon{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .sun{display:none}
  :root:not([data-theme="light"]) .theme-toggle .moon{display:block}
}

@media (max-width:860px){
  .site-head nav a.opt{display:none}
  .site-head nav{gap:1.1rem}
}

/* --- buttons ------------------------------------------------------------- */

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font:560 .95rem/1 var(--sans);letter-spacing:-.01em;
  padding:.82rem 1.35rem;border-radius:999px;border:1px solid transparent;
  cursor:pointer;text-decoration:none;transition:transform .18s,background .2s,border-color .2s,color .2s}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:none}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--teal-600)}
:root[data-theme="dark"] .btn-primary:hover{background:var(--teal-500)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .btn-primary:hover{background:var(--teal-500)}
}
.btn-ghost{border-color:var(--control);color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn[aria-disabled="true"]{opacity:.55;cursor:default;pointer-events:none}
.btn-sm{padding:.6rem 1rem;font-size:.88rem}

/* --- reveal (progressive, JS-gated, motion-safe) ------------------------- */

.js .reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.is-in{opacity:1;transform:none}
.js .reveal.d1{transition-delay:.08s}
.js .reveal.d2{transition-delay:.16s}
.js .reveal.d3{transition-delay:.24s}

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

/* --- hero ---------------------------------------------------------------- */

.hero{position:relative;padding:clamp(3rem,7vw,6rem) 0 clamp(3rem,6vw,5rem);overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:-30% -20% auto -20%;height:150%;z-index:-1;
  background:
    radial-gradient(46% 40% at 22% 8%,var(--accent-wash),transparent 70%),
    radial-gradient(38% 44% at 88% 18%,var(--accent-wash),transparent 72%);
}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;
  font:560 .78rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-wash);
  padding:.5rem .8rem;border-radius:999px;margin-bottom:1.4rem}
.hero h1{margin-bottom:1.1rem;letter-spacing:-.032em}
.hero h1 em,.section-head h2 em{font-style:normal;color:var(--accent)}
.lede{font-size:clamp(1.06rem,1rem + .4vw,1.25rem);color:var(--ink-2);line-height:1.6;
  max-width:34rem;margin:0 0 1.9rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.hero-note{margin:1.4rem 0 0;font-size:.9rem;color:var(--muted)}
.hero-note b{color:var(--ink-2);font-weight:560}

@media (max-width:840px){
  .hero .wrap{grid-template-columns:1fr;gap:2.5rem}
  .hero-art{justify-self:center;margin-top:.5rem}
}

/* --- device frames ------------------------------------------------------- */

.phone{
  position:relative;width:min(272px,72vw);margin-inline:auto;
  border:9px solid var(--device-bezel);border-radius:38px;
  background:var(--device-bezel);box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.phone img{width:100%;display:block;border-radius:29px}
.phone::after{content:"";position:absolute;inset:0;border-radius:29px;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(18,48,46,.08)}
.phone-lg{width:min(310px,78vw)}

.laptop{position:relative;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-lg);background:var(--surface)}
.laptop img{width:100%;display:block}

figure{margin:0}
figcaption{margin-top:.85rem;font-size:.85rem;color:var(--muted);text-align:center}

/* --- proof strip --------------------------------------------------------- */

.proof{border-block:1px solid var(--line);background:var(--bg-2)}
.proof .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,3vw,2.5rem);
  padding-block:clamp(1.8rem,3vw,2.6rem)}
.proof-item h3{font-size:.98rem;margin-bottom:.25rem;letter-spacing:-.015em}
.proof-item p{margin:0;font-size:.9rem;color:var(--muted);line-height:1.55}
.proof-item svg{width:22px;height:22px;color:var(--accent);margin-bottom:.65rem}
@media (max-width:800px){.proof .wrap{grid-template-columns:repeat(2,1fr);gap:1.6rem}}

/* --- section furniture --------------------------------------------------- */

.section{padding-block:clamp(3.5rem,7vw,6.5rem)}
.section-head{max-width:42rem;margin-bottom:clamp(2rem,4vw,3.2rem);scroll-margin-top:5rem}
.section-head p{color:var(--ink-2);font-size:1.05rem;margin:.9rem 0 0;text-wrap:pretty}
.kicker{font:560 .78rem/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent);margin:0 0 .9rem}

/* --- the loop (scroll narrative) ----------------------------------------- */

.loop{background:var(--bg-2);border-block:1px solid var(--line);
  padding-block:clamp(3rem,6vw,5rem)}
.loop-intro{max-width:40rem;margin-bottom:clamp(1.4rem,3vw,2.2rem)}

.step{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,5rem);align-items:center;
  padding-block:clamp(1.2rem,2.4vw,1.75rem);
}
.step + .step{border-top:1px solid var(--line-soft)}
.step.wide{grid-template-columns:1fr;gap:clamp(1.4rem,3vw,2rem)}
.step.wide .step-body{max-width:46rem}
/* Full width to itself, so the diagram can be read rather than squinted at. */
.step.wide .diagram-wide{max-width:56rem}
.step-body{max-width:34rem}
.step-n{display:flex;align-items:baseline;gap:.7rem;margin-bottom:1rem}
.step-n b{font:640 .85rem/1 var(--mono);letter-spacing:.02em;color:var(--accent-ink);
  background:var(--accent);padding:.42rem .55rem;border-radius:7px}
.step-n span{font:560 .78rem/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.step h3{font-size:clamp(1.5rem,1.2rem + 1.1vw,2rem);letter-spacing:-.028em;margin-bottom:.85rem}
.step p{color:var(--ink-2);margin:0 0 1rem}
.step-art{justify-self:center;width:100%;display:flex;justify-content:center}

.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.25rem 0 0;padding:0;list-style:none}
.tags li{font-size:.845rem;color:var(--ink-2);background:var(--surface);
  border:1px solid var(--line);border-radius:999px;padding:.38rem .78rem;line-height:1.35}

@media (min-width:900px){
  .step{min-height:54svh}
  .step-art{position:sticky;top:16vh}
  .step.wide .step-art{position:static}
  .step.flip .step-body{order:2}
  .step.flip .step-art{order:1}
}
@media (max-width:899px){
  .step{grid-template-columns:1fr;gap:2rem}
  .step-art{margin-top:.25rem}
}

/* --- mechanism diagram --------------------------------------------------- */

.diagram{width:100%;max-width:30rem;color:var(--ink);}
.diagram .box{fill:var(--surface);stroke:var(--line)}
.diagram .device{fill:var(--accent-wash);stroke:var(--accent);stroke-dasharray:6 5}
.diagram .flow{stroke:var(--accent);fill:none;stroke-width:1.6}
.diagram .lbl{fill:var(--ink);font:600 12px var(--sans)}
.diagram .lbl-sm{fill:var(--muted);font:500 10.5px var(--sans)}
.diagram .ico{fill:none;stroke:var(--accent);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.diagram .ico-muted{stroke:var(--muted)}
/* Reading the receipt is what the product does, so its box is the only filled
   one in the diagram; everything else is an outline. */
.diagram .box-ai{fill:var(--accent);stroke:var(--accent)}
.diagram .ico-on{stroke:var(--accent-ink)}
.diagram .lbl-on{fill:var(--accent-ink)}
.diagram .lbl-on-2{fill:var(--accent-ink);fill-opacity:.78}
.diagram .stop-sign{fill:none;stroke:var(--stop);stroke-width:2.4;stroke-linecap:round}
.diagram .lbl-stop{fill:var(--stop);font:640 10px var(--sans);letter-spacing:.09em}
.diagram .lbl-accent{fill:var(--accent);font:600 10.5px var(--sans);letter-spacing:.06em}
.diagram .node-fill{fill:var(--accent)}
.diagram .node-glyph{fill:var(--surface)}
.diagram .node-line{fill:var(--accent)}
/* A wide diagram keeps its own scroller on small screens rather than
   shrinking its labels to nothing; the page body never scrolls sideways. */
.diagram-scroll{width:100%;overflow-x:auto;padding-bottom:.5rem;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.diagram-wide{width:100%;max-width:44rem;margin-inline:auto}
@media (max-width:680px){.diagram-wide{min-width:34rem}}
.diagram .blocked{stroke:var(--muted);stroke-width:1.4;stroke-dasharray:4 4;fill:none;opacity:.7}

/* --- file / code cards --------------------------------------------------- */

.filecard{width:100%;max-width:30rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}
.filecard-bar{display:flex;align-items:center;gap:.5rem;padding:.7rem 1rem;
  border-bottom:1px solid var(--line-soft);background:var(--surface-2)}
.filecard-bar span{width:9px;height:9px;border-radius:50%;background:var(--line);flex:none}
.filecard-bar b{margin-left:.4rem;font:500 .82rem/1 var(--mono);color:var(--muted)}
.filecard pre{margin:0;padding:1.05rem 1.2rem;overflow-x:auto;
  font:.815rem/1.7 var(--mono);color:var(--ink-2);tab-size:2}
.filecard pre .k{color:var(--accent);font-weight:600}
.filecard pre .c{color:var(--muted)}
.filecard pre .d{color:var(--muted)}
.filecard + .filecard{margin-top:1rem}


/* --- founder note --------------------------------------------------------- */

.note{max-width:44rem;margin-inline:auto;text-align:center}
.note .kicker{margin-bottom:1.4rem}
.note blockquote{margin:0;border:0;padding:0}
.note blockquote p{font-size:clamp(1.1rem,1.02rem + .5vw,1.35rem);line-height:1.6;
  color:var(--ink);margin:0 0 1rem;letter-spacing:-.011em}
.note blockquote p:last-child{margin-bottom:0}
.note figcaption{display:flex;align-items:center;justify-content:center;gap:.7rem;
  margin-top:1.9rem;padding-top:1.5rem;border-top:1px solid var(--line);
  text-align:left}
.note figcaption img{width:34px;height:34px;flex:none;border-radius:8px}
.note figcaption span{display:flex;flex-direction:column;font-size:.9rem;color:var(--muted);
  line-height:1.35}
.note figcaption strong{color:var(--ink);font-weight:620}

/* --- pricing -------------------------------------------------------------- */

/* There is one price, so there is one card. The two columns under it contrast
   what the purchase buys against what it never touches; they are deliberately
   not a pair of plan cards, because neither one is a tier you can be on. */

.price-card{max-width:32rem;margin:0 auto clamp(1.5rem,3vw,2.2rem);text-align:center;
  background:var(--surface);border:1px solid var(--accent);border-radius:var(--radius-lg);
  padding:clamp(1.5rem,3.2vw,2.1rem);box-shadow:var(--shadow-lg)}
.price-card .plan-price{justify-content:center;margin-bottom:.9rem}
.price-card .plan-note{text-align:center}
.price-lead{margin:0;color:var(--ink-2);font-size:.975rem;line-height:1.6}

.gate{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,2.5vw,1.5rem);align-items:stretch}
@media (max-width:760px){.gate{grid-template-columns:1fr}}
.gate-col{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:clamp(1.3rem,2.8vw,1.8rem);box-shadow:var(--shadow);
  display:flex;flex-direction:column;justify-content:center}
.gate-col.is-paid{border-color:var(--accent)}
.gate-col h3{font-size:1.08rem;letter-spacing:-.018em;margin:0 0 .55rem}
.gate-col p{margin:0;color:var(--ink-2);font-size:.945rem;line-height:1.6}
.gate-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.62rem}
.gate-col li{position:relative;padding-left:1.5rem;color:var(--ink-2);font-size:.945rem;
  line-height:1.55}
/* Same tick as the platform list, so the two lists read as one idea. */
.gate-col li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--accent);
  font-weight:700;font-size:1em;line-height:1.55}
.gate-col ul + p{margin-top:1.05rem;padding-top:.95rem;border-top:1px solid var(--line-soft);
  color:var(--muted);font-size:.9rem}
/* Plain bullets, not the tick: one of these points is a caveat. */
.gate-col .points{gap:.7rem}
.gate-col .points li{padding-left:1.15rem}
.gate-col .points li::before{content:"\2022";font-size:1.05em;line-height:1.5}

.plan-price{font-size:clamp(2rem,1.6rem + 1.6vw,2.7rem);font-weight:660;letter-spacing:-.035em;
  color:var(--ink);margin:0 0 1.3rem;line-height:1;
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:.45rem}
.plan-price .unit{font-size:.95rem;font-weight:500;letter-spacing:-.01em;color:var(--muted)}
.plan-price s{font-size:.54em;font-weight:560;color:var(--muted);
  text-decoration-color:var(--muted);text-decoration-thickness:.07em}
.plan-price .now{color:var(--accent)}
.plan-note{margin:1.4rem 0 0;padding-top:1.1rem;border-top:1px solid var(--line-soft);
  font-size:.9rem;color:var(--muted);line-height:1.55}
.plan-note strong{color:var(--accent);font-weight:620}


/* --- honesty ------------------------------------------------------------- */

.honest-list{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.honest-list li{background:var(--surface);padding:1.25rem 1.4rem}
.honest-list h3{font-size:1rem;margin-bottom:.35rem;letter-spacing:-.015em}
.honest-list p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.6}
@media (min-width:900px){.honest-list{grid-template-columns:1fr 1fr}}

/* --- platforms ----------------------------------------------------------- */

.platforms{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
@media (max-width:860px){.platforms{grid-template-columns:1fr}}
.platform-list{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.7rem}
.platform-list li{display:flex;gap:.65rem;align-items:flex-start;color:var(--ink-2);font-size:.96rem}
.platform-list svg{width:17px;height:17px;color:var(--accent);flex:none;margin-top:.28rem}

/* --- signup / CTA -------------------------------------------------------- */

.cta{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(1.8rem,4vw,3rem);box-shadow:var(--shadow);text-align:center}
.cta h2{letter-spacing:-.028em;margin-bottom:.8rem}
.cta p{color:var(--ink-2);max-width:38rem;margin:0 auto 1.7rem}

.signup{display:flex;gap:.6rem;max-width:29rem;margin:0 auto;flex-wrap:wrap}
.signup input[type=email]{flex:1 1 15rem;min-width:0;font:400 1rem var(--sans);color:var(--ink);
  background:var(--bg);border:1px solid var(--control);border-radius:999px;padding:.8rem 1.15rem}
.signup input[type=email]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.signup .btn{flex:0 0 auto}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{min-height:1.5em;margin:.9rem 0 0;font-size:.9rem;color:var(--muted)}
.form-status.ok{color:var(--accent)}
.form-status.bad{color:var(--stop)}
.privacy-note{margin:1rem 0 0;font-size:.83rem;color:var(--muted)}

/* --- footer -------------------------------------------------------------- */

.site-foot{border-top:1px solid var(--line);background:var(--bg-2);
  padding-block:clamp(2.5rem,5vw,3.5rem);margin-top:auto}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));
  gap:clamp(1.5rem,4vw,3rem)}
@media (max-width:700px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
.foot-brand img{width:38px;height:38px;margin-bottom:.7rem}
.foot-brand p{margin:.4rem 0 0;color:var(--muted);font-size:.88rem;max-width:24rem;line-height:1.6}
/* Every page's footer markup uses <h2>; this only ever matched h4, so the
   column labels were rendering at full h2 size. Match all three. */
.site-foot h2,.site-foot h3,.site-foot h4{font:560 .76rem/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .9rem}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.site-foot ul a{color:var(--ink-2);font-size:.92rem;text-decoration:none}
.site-foot ul a:hover{color:var(--accent)}
.foot-legal{margin-top:clamp(2rem,4vw,2.8rem);padding-top:1.4rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;
  color:var(--muted);font-size:.85rem}
.foot-legal a{color:var(--muted)}
.foot-legal a:hover{color:var(--accent)}

/* ==========================================================================
   Document pages: privacy, terms, support, shortcuts, user guide
   ========================================================================== */

body.doc{display:flex;flex-direction:column;min-height:100vh}
/* A document with no contents column reads better in a narrower measure, with
   its title over the text rather than adrift at the far left of a wide page.
   The user guide carries `guide` as well as `doc` and keeps the full width for
   its sidebar. The site header and footer stay wide on every page. */
body.doc:not(.guide) .doc-head .wrap,
body.doc:not(.guide) .doc-main .wrap{max-width:53rem}
.doc-head{background:var(--bg-2);border-bottom:1px solid var(--line);
  padding-block:clamp(2.2rem,5vw,3.4rem)}
.doc-head .wrap{max-width:var(--page)}
.doc-head h1{letter-spacing:-.03em;font-size:clamp(1.9rem,1.4rem + 2vw,2.9rem)}
.doc-head .meta{margin:.9rem 0 0;color:var(--muted);font-size:.92rem}
.doc-head .meta strong{color:var(--ink-2);font-weight:560}

.doc-main{flex:1 0 auto;padding-block:clamp(2.4rem,5vw,4rem)}
.doc-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:3rem}
.doc-layout.with-toc{grid-template-columns:15.5rem minmax(0,1fr)}
@media (max-width:960px){.doc-layout.with-toc{grid-template-columns:minmax(0,1fr)}}

.prose{max-width:var(--prose);font-size:1.0125rem}
.doc-layout.with-toc .prose{max-width:46rem}
.prose > *:first-child{margin-top:0}
.prose h2{font-size:clamp(1.35rem,1.2rem + .6vw,1.65rem);letter-spacing:-.024em;
  margin:2.6rem 0 .9rem;scroll-margin-top:5rem}
.prose h3{font-size:1.1rem;letter-spacing:-.018em;margin:2rem 0 .6rem;scroll-margin-top:5rem}
.prose h2 + h3{margin-top:1.2rem}
.prose p{margin:0 0 1.05em}
.prose ul,.prose ol{margin:0 0 1.15em;padding-left:1.35em}
.prose li{margin:.45em 0}
.prose li > ul,.prose li > ol{margin:.45em 0 .2em}
.prose .lead{font-size:1.1rem;color:var(--ink-2);line-height:1.62}
.prose code{background:var(--bg-2);border:1px solid var(--line-soft);border-radius:5px;
  padding:.12em .38em;color:var(--ink)}
.prose pre{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.1rem 1.25rem;overflow-x:auto;margin:0 0 1.4em;
  font:.85rem/1.65 var(--mono);color:var(--ink-2)}
.prose pre code{background:none;border:0;padding:0;font-size:inherit}
.prose blockquote{margin:0 0 1.3em;padding:.2rem 0 .2rem 1.15rem;
  border-left:3px solid var(--accent);color:var(--ink-2)}
.prose hr{margin:2.6rem 0}
.prose img{border-radius:var(--radius);border:1px solid var(--line);margin:1.4em 0}

.prose table{width:100%;border-collapse:collapse;margin:0 0 1.5em;font-size:.94rem;
  display:block;overflow-x:auto}
.prose thead th{text-align:left;font-weight:600;color:var(--ink);
  border-bottom:2px solid var(--line);padding:.6rem .8rem;white-space:nowrap}
.prose tbody td{border-bottom:1px solid var(--line-soft);padding:.6rem .8rem;
  color:var(--ink-2);vertical-align:top}
.prose tbody tr:last-child td{border-bottom:0}

.anchor{float:left;margin-left:-1.05em;padding-right:.3em;color:var(--line);
  opacity:0;text-decoration:none;font-weight:400;transition:opacity .15s}
h2:hover .anchor,h3:hover .anchor,.anchor:focus{opacity:1}
.anchor:hover{color:var(--accent);text-decoration:none}
@media (max-width:700px){.anchor{display:none}}

/* table of contents (user guide) */
.toc{align-self:start;font-size:.9rem}
@media (min-width:961px){.toc{position:sticky;top:5.2rem;max-height:calc(100vh - 7rem);overflow-y:auto}}
.toc h2{font:560 .76rem/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .9rem}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.toc li ol{margin:.15rem 0 .35rem .9rem;padding-left:.7rem;border-left:1px solid var(--line-soft)}
.toc a{display:block;color:var(--ink-2);text-decoration:none;padding:.28rem .55rem;
  border-radius:7px;line-height:1.4}
.toc a:hover{background:var(--accent-wash);color:var(--accent)}
.toc a.is-current{background:var(--accent-wash);color:var(--accent);font-weight:560}
.toc li li a{font-size:.86rem;color:var(--muted)}
@media (max-width:960px){
  .toc{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
    padding:1rem 1.1rem;margin-bottom:1rem}
  .toc li ol{display:none}
}

/* callout used by doc pages */
.callout{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--radius);padding:1.15rem 1.3rem;margin:0 0 1.5em}
.callout p:last-child{margin-bottom:0}
.callout h3{font-size:1rem;margin:0 0 .45rem}
.callout .callout-title{font:620 1rem/1.3 var(--sans);letter-spacing:-.015em;
  color:var(--ink);margin:0 0 .45rem}

/* support form */
.form{display:grid;gap:1.15rem;max-width:34rem;margin:0 0 1.5em}
.form label{display:block;font:560 .85rem/1 var(--sans);color:var(--ink-2);margin-bottom:.45rem}
.form input[type=text],.form input[type=email],.form select,.form textarea{
  width:100%;font:400 1rem var(--sans);color:var(--ink);background:var(--surface);
  border:1px solid var(--control);border-radius:10px;padding:.7rem .85rem}
.form textarea{min-height:9rem;resize:vertical;line-height:1.55}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.form button{justify-self:start}

/* download rows (shortcuts page) */
.dl{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;margin:0 0 1.6em}
.dl-row{background:var(--surface);padding:1.15rem 1.3rem;display:flex;gap:1.2rem;
  align-items:center;flex-wrap:wrap}
.dl-row div{flex:1 1 16rem;min-width:0}
.dl-row h3{font-size:1rem;margin:0 0 .3rem;letter-spacing:-.015em}
.dl-row p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.55}
/* print */
@media print{
  .site-head,.site-foot,.toc,.theme-toggle,.skip{display:none}
  body{background:#fff;color:#000}
  .prose{max-width:none}
}