/* Shared page chrome — the scaffolding scale and the nav, footer, document
   pages and back-to-top that every page carries. Page-specific layout stays in
   each document's own <style>. styles.css remains the design system; this file
   only arranges it. */

:root { --edge: clamp(20px, 5vw, 64px); --measure: 62ch; }
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--edge)}
.hr{margin:var(--space-12) 0}

/* — nav — */
/* Wrap rather than clip: between the 560px breakpoint and roughly 860px the row
   is wider than its box, and the call to action was cut off at the right edge.
   Wrapping drops it to a second line instead. */
.nav{padding-inline:max(var(--edge), calc((100% - 1120px) / 2 + var(--edge)));position:sticky;top:0;z-index:10;flex-wrap:wrap;row-gap:var(--space-2)}
.nav a{white-space:nowrap}
/* The brand is an anchor, so it has to outrank styles.css's `.nav a` size. */
.nav a.nav-brand{font-size:22px}
.nav-mark{width:1.15em;height:1.15em;display:block;flex:none}
/* display:contents, so above the breakpoint the wrapper adds no box and the
   links stay direct flex items of the bar — the desktop row is unchanged. */
.nav-links{display:contents}
.nav-toggle{display:none}
.nav-cta-short{display:none}

/* Narrow screens fold the links into a panel behind the hamburger, but never
   the brand. 560px is where the row stops fitting even wrapped. */
@media (max-width:560px){
  /* Wordmark, call to action, hamburger — the toggle is ordered last in the row
     but stays before the panel in the source, which is the order the keyboard
     wants. The brand's margin-right:auto pushes the other two right.
     Three things sharing one row makes the sizes below a budget: 375px leaves
     335px between the edges, and at full size the three add up to 382px. So
     each gives something up — "free" leaves the label, the button takes tighter
     padding, the gap halves and the wordmark drops 2px — which lands at 310px,
     inside the 320px a 360px-wide Android leaves. Narrower than that the row
     wraps rather than clips, and flex-end holds the wrapped line against the
     right edge instead of stranding it under the wordmark. */
  .nav{gap:var(--space-2);justify-content:flex-end}
  .nav a.nav-brand{font-size:20px}
  .nav a.nav-cta{padding:10px var(--space-3);font-size:13.5px}
  .nav-cta-long{display:none}
  .nav-cta-short{display:block}
  .nav-toggle{order:2;display:grid;place-items:center;width:44px;height:44px;padding:0;
    border:0;background:none;color:var(--color-text);cursor:pointer;border-radius:var(--radius-sm)}
  .nav-toggle:hover{color:var(--color-accent-700)}
  /* One bar plus two pseudo-elements, which cross into an X while open. */
  .nav-bars{position:relative;display:block;width:20px;height:2px;border-radius:1px;background:currentColor}
  .nav-bars::before,.nav-bars::after{content:"";position:absolute;left:0;width:20px;height:2px;border-radius:1px;background:currentColor}
  .nav-bars::before{transform:translateY(-6px)}
  .nav-bars::after{transform:translateY(6px)}
  .nav-bars,.nav-bars::before,.nav-bars::after{transition:transform .18s ease,background-color .18s ease}
  .nav-toggle[aria-expanded="true"] .nav-bars{background:transparent}
  .nav-toggle[aria-expanded="true"] .nav-bars::before{transform:rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .nav-bars::after{transform:rotate(-45deg)}

  /* Anchored to the nav, which is sticky and therefore the containing block.
     Opaque rather than the bar's translucent fill: the panel sits over body
     copy, and blurred text behind menu labels is unreadable. */
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:var(--space-2) var(--edge) var(--space-5);
    background:var(--color-bg);border-bottom:1px solid var(--color-divider);
    box-shadow:var(--shadow-md)}
  .nav-links.is-open{display:flex}
  /* Full-width rows with a 44px touch target, divided rather than spaced. */
  .nav-links a{display:block;padding:var(--space-3) 0;font-size:16px;
    border-bottom:1px solid var(--color-divider)}
  .nav-links a:last-child{border-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  .nav-bars,.nav-bars::before,.nav-bars::after{transition:none}
}

/* — footer — */
footer{padding:var(--space-10) 0;font-size:13.5px;line-height:1.7;color:var(--color-muted)}
footer .fgrid{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-8);justify-content:space-between}
/* No rule at rest, one on hover — the contact details became real links when
   they moved behind the base64 decoder, and arrived underlined by default. */
footer a{color:inherit;text-decoration:none}
footer a:hover{color:var(--color-accent-700);text-decoration:underline}
/* Left-aligned rather than spread: this is the lowest row on the page and the
   fixed back-to-top button sits over the bottom-right corner. */
footer .flinks{margin-top:var(--space-4);border-top:1px solid var(--color-divider);padding-top:var(--space-4);justify-content:flex-start}

/* — back to top — */
/* Ink, not sienna: the closing section is a full sienna field, and an accent
   button would disappear into it.
   visibility (not display) is what hides it, so it leaves the tab order and the
   accessibility tree while still being able to fade. */
.to-top{position:fixed;right:clamp(16px,4vw,32px);bottom:clamp(16px,4vw,32px);z-index:20;
  width:48px;height:48px;display:grid;place-items:center;padding:0;border:0;
  background:var(--color-text);color:var(--color-surface);border-radius:var(--radius-pill);
  box-shadow:var(--shadow-md);cursor:pointer;opacity:0;visibility:hidden;
  transition:opacity .18s ease,visibility .18s ease,background .18s ease}
.to-top.is-visible{opacity:1;visibility:visible}
.to-top:hover{background:var(--color-accent-700)}
.to-top:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.to-top{transition:none}}

/* — document pages (terms, privacy, PAIA, FAQ) — */
/* One measure, flush left. Legal copy is read in long runs, so the column is
   narrower than the marketing sections and separated by space, not by rules. */
.doc{padding:var(--space-12) 0;max-width:70ch}
.doc-title{font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:clamp(36px,5vw,58px);line-height:1.06;letter-spacing:-0.022em;margin:0}
.doc-meta{font-size:12px;font-weight:600;line-height:1.5;letter-spacing:0.16em;text-transform:uppercase;color:var(--color-muted);margin:var(--space-6) 0 0}
.doc-lead{font-size:19px;line-height:1.6;color:var(--color-body);margin:var(--space-6) 0 0;max-width:46ch}
.doc h2{font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:27px;line-height:1.2;letter-spacing:-0.01em;margin:var(--space-12) 0 0;padding-top:var(--space-6);border-top:1px solid var(--color-divider)}
.doc h3{font-family:var(--font-body);font-weight:600;font-size:17px;line-height:1.4;margin:var(--space-6) 0 0}
.doc p{font-size:16px;line-height:1.7;color:var(--color-body);margin:var(--space-4) 0 0}
.doc ul,.doc ol{list-style:none;margin:var(--space-4) 0 0;padding:0;display:grid;gap:var(--space-2)}
.doc li{position:relative;font-size:16px;line-height:1.7;color:var(--color-body);padding-left:24px}
.doc li::before{content:"";position:absolute;left:0;top:0.72em;width:7px;height:7px;border-radius:50%;background:var(--color-accent)}
.doc ol{counter-reset:doc}
.doc ol li{counter-increment:doc}
.doc ol li::before{content:counter(doc) ".";background:none;border-radius:0;color:var(--color-accent);font-weight:600;font-size:14px;width:auto;height:auto;top:0.1em;font-variant-numeric:tabular-nums}
.doc dl{margin:var(--space-6) 0 0}
.doc dt{font-size:12px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--color-muted);margin-top:var(--space-4)}
.doc dd{margin:var(--space-1) 0 0;font-size:16px;line-height:1.7;color:var(--color-body)}
/* Marks a clause the owner still has to settle. Deliberately loud — it must be
   impossible to publish one of these by accident. */
.todo{display:inline-block;background:var(--color-accent-200);color:var(--color-accent-800);
  border-left:3px solid var(--color-accent);padding:3px var(--space-3);border-radius:var(--radius-sm);font-size:15px}