/* Shared by terms.html, privacy.html and refunds.html.
 *
 * These three pages carried byte-identical copies of this stylesheet —
 * about a hundred lines each, kept in step by hand. A link costs one
 * request on pages nobody reaches in a hurry, which is a better trade
 * than three chances to fix a rule in two places.
 *
 * The homepage keeps its CSS inline: it is the first thing a buyer sees
 * and it shares almost none of these rules.
 *
 * Font URLs are absolute, so they resolve the same from here as they did
 * from inside each page.
 */
/* Self-hosted, from our own origin. No Google Fonts, no third-party CDN. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/inter-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/inter-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2')}
/* 500, 600 and 700 added 2026-08-29. Before them every mono label in the
   product had one weight, so anything bolder was synthesized -- smeared
   stems at the 11px these labels are set at, with 500 and 600 rendering
   identically because both fell back to the same synthetic bold.
   Every mono face here is @fontsource/ibm-plex-mono 5.3.0, latin subset,
   normal style. The 400 used to be the exception -- it predated 5.3.0 and
   was held back on the reasoning that replacing a live file bought nothing
   visible. That was reversed 2026-09-02 on the owner's instruction: one
   family on one release beats a saved byte, and a family that is six files
   from one release and one file from another is a mismatch waiting to be
   diagnosed twice. These pages declare four weights; the full 100-700 set
   is declared in site/marketing.css. */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/ibm-plex-mono-latin-700-normal.woff2') format('woff2')}

/* Generated from src/lib/tokens.ts — run `npm run tokens` after changing it. */
:root{
  --ink:#12263F;--paper:#FFFFFF;--panel:#EFF4FA;--tint:#EAF2FD;--card:#FFFFFF;
  --rule:#0B63CE;--rule-hover:#094FA6;--mark:#CFE3FA;--on-ink:#9DB4D0;
  --body:#4A5568;--meta:#647085;--border:#DCE4EE;--border-mid:#C3D8EF;
  --band-body:#BCD8F8;--hero-edge:#D2E2F6;
  --verified:#1B6046;--caution:#A9660A;--caution-wash:#FAF0DC;--caution-bg:#FAF0DC;
  --ok:#C9DDF4;--ok-line:#AFCCEC;--legacy:#0B63CE;--legacy-line:#094FA6;
  --ink-soft:#4A5568;--rule-hair:#DCE4EE;--seal:#0B63CE;--seal-wash:#EFF4FA;
  --text-heading:var(--ink);--text-body:var(--body);--text-meta:var(--meta);--text-on-ink:var(--on-ink);
  --text-link:var(--rule);--text-link-hover:var(--rule-hover);--accent:var(--rule);--focus-ring:var(--rule);
  --surface-page:var(--paper);--surface-panel:var(--panel);--surface-card:var(--card);--surface-inverse:var(--ink);
  --border-hairline:var(--border);--border-strong:var(--border-mid);
  --radius:5px;--radius-card:8px;--radius-pill:999px;
  --rule-weight:4px;--rule-weight-caution:5px;
  --frame-marketing:680px;--frame-marketing-wide:1040px;--frame-legal-wide:820px;
  --frame-record:680px;--frame-app:32rem;--frame-app-md:44rem;--frame-app-lg:60rem;
  --measure-read:46rem;--measure-prose:38rem;--measure-legal:72ch;
  --gutter:30px;--gutter-phone:20px;--gutter-wide:40px;--tap-min:44px;
  --space-1:4px;--space-2:8px;--space-3:14px;--space-4:18px;--space-5:22px;
  --space-6:26px;--space-7:32px;--space-8:44px;--space-9:64px;
  --font-weight-regular:400;--font-weight-semibold:600;--font-weight-bold:700;
  --size-label:11px;--size-fine:13px;--size-small:14px;--size-body-record:15px;
  --size-body:16px;--size-body-wide:18px;--size-lede:17px;--size-h3:17px;
  --size-h2-app:20px;--size-h2-app-wide:22px;--size-record-name:24px;
  --size-h2:25px;--size-band:27px;--size-h1:32px;--size-amount:36px;
  --line-tight:1.15;--line-heading:1.3;--line-body:1.6;--line-record:1.7;
  --track-h1:-1.2px;--track-h2:-.5px;--track-h2-app:-.4px;--track-label:.06em;
  --transition-colour:120ms;
  --sans:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  --sans-short:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--body);
  font-family:var(--sans);font-size:16px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased}
/* The legal pages carry the site nav and footer, and both of those sit in
   marketing.css's .frame: 1200px wide with a 40px gutter, so their content
   edge lands at the same x on every page. .wrap used to be 680px with a
   30px gutter, which centred it on a different axis: at 1440px the heading
   started 180px to the right of the nav above it. Match .frame exactly, and
   hold the prose to a readable measure inside it rather than letting lines
   run to 1120px. */
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}
@media (max-width:760px){.wrap{padding:0 20px}}
/* THIS IS THE ONE THAT KEEPS BITING. marketing.css carries a bare element
   selector, `p{max-width:70ch}`, and these pages load marketing.css for the
   nav and the footer. So every paragraph here was silently capped at about
   795px no matter what .wrap was set to, and the column sat hard against
   the left of the frame with the right third empty. Widening .wrap alone
   does nothing; the cap has to be lifted here, where legal.css wins on both
   order and specificity.

   These pages are ONE COLUMN filling the frame: left edge on the nav's,
   right edge on the footer's, symmetric because the frame is centred. */
.wrap p,.wrap li,.wrap ul,.wrap ol,.wrap h1,.wrap h2,.wrap h3{max-width:none}
/* An oversized export cannot break the frame or overflow at 360px. */
img{max-width:100%;height:auto;display:block}
a{color:var(--rule)}
a:hover{color:var(--rule-hover)}

/* Logo in place of the text wordmark. Height-driven with width:auto so the
   5.4:1 file cannot be squashed by the flex row, and the intrinsic
   width/height are on the tag so the bar does not reflow as it loads. */
@media (min-width:761px){.logo{height:34px}}
@media (max-width:400px){.logo{height:24px}}
/* Same sign-in as the homepage. These pages are reachable from search and
   from the footer, so somebody can land here first. */

main{padding:32px 0 44px}
h1{margin:0 0 8px;font-size:32px;font-weight:700;letter-spacing:-1.2px;
  line-height:1.15;color:var(--ink)}
.updated{font-family:var(--sans);font-size:var(--size-label);font-weight:700;line-height:1.4;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--meta);margin:0 0 28px}
/* The copyright line. Only 404.html reaches this rule through legal.css —
   every other page carries the line inside the dark footer, where
   `footer small` in marketing.css sets it. Same 11px either way; the color
   differs because the grounds do. */
.copyright{display:block;margin:36px 0 0;font-size:11px;line-height:1.6;color:var(--meta)}
h2{margin:28px 0 8px;font-size:25px;font-weight:600;letter-spacing:-.5px;
  line-height:1.25;color:var(--ink)}
p,li{margin:0 0 12px}
ul{padding-left:1.2rem}

/* The chrome -- the seven-link bar, the menu, the columned footer and
   the back-to-top button -- comes from site/marketing.css, which these
   pages now link ahead of this file. Their own `nav`, `.brand`, `.logo`
   and `.signin` rules were removed on 2026-08-31: bare element
   selectors, and the footer's link groups are `<nav>` elements, so they
   would have painted each of them a panel. This file keeps only what a
   legal document needs. */
footer{padding:22px 0 40px;
  font-size:13px;line-height:1.6}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
a{-webkit-tap-highlight-color:rgba(30,90,156,.12)}
:focus-visible{outline:2px solid var(--rule);outline-offset:2px}
footer :focus-visible{outline-color:#fff}
p,li,h1,h2{overflow-wrap:break-word}

@media (max-width:640px){
  .wrap{padding:0 20px}
  nav .wrap{padding-top:10px;padding-bottom:10px}
  main{padding:24px 0 36px}
  h1{font-size:29px}
  h2{font-size:22px;margin-top:24px}
    footer a{display:flex;align-items:center;margin-right:0;padding:.45rem 0;min-height:44px}
}

@media (min-width:768px){
  body{font-size:18px}
  h1{font-size:40px}
}

@media (min-width:1025px){
  main{padding:44px 0 60px}
}

/* Wide screens. The container matches marketing.css's .frame so the prose
   starts on the same x as the nav above it and the footer below it. The
   measure stays capped: these pages are pure prose, and spending the extra
   width on longer lines would only make them harder to read.

   Until 2026-09-09 this capped .wrap at 820px, which centred the text on
   its own axis. At 1440px the heading began 190px to the right of the nav. */
@media (min-width:1100px){
  .wrap{max-width:1200px;padding:0 40px}
}

@media print{
  nav,  body{background:#fff;font-size:11pt;color:#000}
  footer{background:#fff;color:#000;border-top:1px solid #999}
  footer a{color:#000}
}


/* Numbered acknowledgments in the terms. Several sections of that document
   are a bare first-person sentence with no title, so they are paragraphs
   with a bold number rather than headings with nothing to head. Hanging
   indent so the number sits proud of the text it introduces. */
.wrap p.ack-item{padding-left:26px;text-indent:-26px;margin:0 0 16px}
