/* The Claim Letter - design system (v2, 2026-10-07)
   Editorial ledger: warm paper, Fraunces serif display, IBM Plex Sans text,
   IBM Plex Mono for stats/labels. Gold = accent, ink = dark surfaces,
   blue = claim buttons (kept from v1). No em dashes anywhere. */

@font-face { font-family:'Fraunces'; font-style:normal; font-weight:600 700;
  src:url('/fonts/Fraunces-700.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Fraunces'; font-style:italic; font-weight:600 700;
  src:url('/fonts/Fraunces-700italic.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:800 900;
  src:url('/fonts/Fraunces-900.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400 500;
  src:url('/fonts/IBMPlexSans-400.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:600;
  src:url('/fonts/IBMPlexSans-600.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500 600;
  src:url('/fonts/IBMPlexMono-600.woff2') format('woff2'); font-display:swap; }

:root {
  --ink:#16181d; --ink2:#20242c; --paper:#f7f4ee; --paper2:#efe9df;
  --text:#20242c; --dim:#54514a; --gold:#d9a441; --gold-deep:#b98a2e;
  --blue:#1a56c4; --blue-dark:#14439c; --green:#1e7a46; --red:#b23830;
  --line:#e2dccc; --line2:#d8d2c2;
  --disp:'Fraunces',Georgia,serif;
  --sans:'IBM Plex Sans','Segoe UI',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--sans); background:var(--paper); color:var(--text);
  overflow-x:hidden; -webkit-font-smoothing:antialiased; }
a { color:var(--blue); }
::selection { background:rgba(217,164,65,.35); }
.frow input[type=email], .frow button, .s-in { max-width:100%; }

/* ---------- motion (v2.1) ---------- */
html.js .reveal { opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease; }
html.js .reveal.in { opacity:1; transform:none; }
.step, .share-box, .sample { transition:transform .18s ease, box-shadow .18s ease; }
.step:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(32,36,44,.10); }
.share-box:hover { transform:translateY(-2px); box-shadow:0 8px 26px rgba(32,36,44,.10); }
.btn-gold:hover, .signup button:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(217,164,65,.45); }
.btn-ghost:hover { background:#fffdf9; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity:1; transform:none; transition:none; }
  .step, .share-box, .sample, .btn-gold, .signup button { transition:none; }
  .step:hover, .share-box:hover, .btn-gold:hover, .signup button:hover { transform:none; }
  html { scroll-behavior:auto; }
}

/* ---------- buttons ---------- */
.btn { display:inline-block; padding:14px 26px; font-family:var(--sans); font-size:15.5px;
  font-weight:600; border-radius:10px; border:1px solid transparent; cursor:pointer;
  text-decoration:none; transition:transform .12s ease, box-shadow .12s ease, background .12s; }
.btn:active { transform:translateY(1px); }
.btn-gold { background:var(--gold); color:#231a07; box-shadow:0 2px 10px rgba(217,164,65,.35); }
.btn-gold:hover { background:#e2b052; }
.btn-ink { background:var(--ink); color:#f7f4ee; }
.btn-ink:hover { background:var(--ink2); }
.btn-blue { background:var(--blue); color:#fff; }
.btn-blue:hover { background:var(--blue-dark); }
.btn-ghost { background:transparent; color:var(--text); border-color:var(--line2); }
.btn-ghost:hover { border-color:var(--ink); }

/* ---------- modal ---------- */
.modal { position:fixed; inset:0; background:rgba(22,24,29,.78); display:none;
  align-items:center; justify-content:center; z-index:99; padding:20px; }
.modal .box { max-width:460px; width:100%; background:var(--paper); border:1px solid var(--line2);
  border-radius:16px; padding:30px 28px; text-align:center;
  box-shadow:0 24px 70px rgba(0,0,0,.4); }
.modal h3 { margin:0 0 10px; font-size:22px; color:var(--ink); font-family:var(--disp); font-weight:700; }
.modal p { margin:0 0 8px; font-size:15px; line-height:1.55; color:var(--dim); }
.modal .big { font-size:32px; margin-bottom:6px; }
.modal button { margin-top:16px; background:var(--gold); color:#231a07; border:0; border-radius:10px;
  padding:12px 28px; font-size:15px; font-weight:600; cursor:pointer; }
.modal .hl { color:var(--ink); font-weight:600; }

/* ---------- footer ---------- */
footer { padding:38px 24px 46px; text-align:center; font-size:13px; color:var(--dim); line-height:1.85;
  border-top:1px solid var(--line); background:var(--paper2); }
footer a { color:var(--dim); text-decoration:underline; }
.f-mark { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:14px; }
.f-brand { font-family:var(--disp); font-weight:900; font-size:17px; color:var(--ink); letter-spacing:-.01em; }
.f-brand em { font-style:italic; color:var(--gold); }

@media (max-width: 620px) {
  .modal { padding:14px; }
  .modal .box { padding:24px 18px; }
}