/* Ported from the Claude Design document. Colours and fonts live here; edit once, applies everywhere. */
:root {
  --brand: #e82020;
  --brand-dark: #b91515;
  --brand-soft: #fdecec;
  --ink: #18181b;
  --ink-2: #52525b;
  --ink-3: #8a8a93;
  --ink-4: #b4b4bb;
  --line: #e5e5e8;
  --line-2: #d9d9de;
  --bg: #f6f6f7;
  --surface: #fafafa;
  --fill: #f1f1f3;
  --white: #fff;
  --ok-bg: #e9f6ee;
  --ok: #15803d;
  --warn-icon: #b45309;
  --warn-text: #7c4a10;
  --sans: "IBM Plex Sans Thai", system-ui, sans-serif;
  --mono: 'IBM Plex Mono',monospace;
}

/* globals — lifted verbatim from the document's <helmet> block */
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }
::selection { background: var(--brand); color: var(--white); }

/* callout badges (26 of them) — the offset stays inline, everything else is shared */
.callout { position: absolute; z-index:6; display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:999px; background:var(--brand); color:var(--white); font-size:12.5px; font-weight:700; box-shadow:0 2px 8px rgba(232,32,32,0.4); }
.callout-sm { font-size: 12px; }

/* patterns repeated 3+ times in the document */
.body-text { margin:0; font-size:14.5px; line-height:1.7; color:var(--ink-2); }   /* x42 */
.step-num { flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:999px; background:var(--ink); color:var(--white); font-size:12px; font-weight:700; }   /* x31 */
.step-row { display:flex; gap:14px; align-items:flex-start; }   /* x26 */
.emph { font-weight:600; color:var(--ink); }   /* x24 */
.mono-faint { font-family:var(--mono); font-size:11px; color:var(--ink-4); }   /* x23 */
.grow { flex:1; }   /* x22 */
.step-title { font-size:15px; font-weight:600; margin-bottom:3px; }   /* x21 */
.card { padding:22px; border:1px solid var(--line); border-radius:14px; background:var(--white); }   /* x14 */
.toc-link { display:flex; gap:10px; align-items:baseline; padding:7px 10px; border-radius:9px; font-size:13px; color:var(--ink-2); }   /* x13 */
.sec-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }   /* x13 */
.sec-num { display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:9px; background:var(--brand); color:var(--white); font-family:var(--mono); font-size:13px; font-weight:600; }   /* x13 */
.sec-title { margin:0; font-size:27px; font-weight:700; letter-spacing:-0.01em; }   /* x13 */
.sec { scroll-margin-top:24px; padding-top:72px; }   /* x12 */
.sec-lead { margin:0 0 28px; font-size:16px; line-height:1.75; color:var(--ink-2); max-width:760px; }   /* x11 */
.mono-tiny { font-family:var(--mono); font-size:10.5px; color:var(--ink-4); }   /* x11 */
.card-title { font-size:15px; font-weight:600; margin-bottom:8px; }   /* x8 */
.label-strong { font-size:13.5px; font-weight:600; }   /* x7 */
.mono-muted { font-family:var(--mono); font-size:11px; color:var(--ink-3); }   /* x6 */
.mock-nav-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px; color:var(--ink-2); font-size:13px; }   /* x6 */
.row-between { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }   /* x6 */
.grow-muted { flex:1; color:var(--ink-2); }   /* x6 */
.card-lg { padding:24px; border:1px solid var(--line); border-radius:16px; background:var(--white); }   /* x6 */
.tight { line-height:1.25; }   /* x5 */
.card-title-bold { font-size:15px; font-weight:700; margin-bottom:8px; }   /* x5 */
.chip-row { display:flex; flex-wrap:wrap; gap:6px; }   /* x5 */
.grow-min { flex:1; min-width:0; }   /* x5 */
.icon-row { display:flex; align-items:center; gap:6px; margin-bottom:6px; }   /* x5 */
.step-row-tight { display:flex; gap:12px; align-items:flex-start; }   /* x5 */
.body-text-tight { margin:0; font-size:14.5px; line-height:1.65; color:var(--ink-2); }   /* x5 */
.mock-filter-row { display:flex; align-items:center; gap:10px; padding:6px 10px; font-size:12.5px; color:var(--ink-2); }   /* x5 */
.mock-radio { width:16px; height:16px; border:1.5px solid var(--line-2); border-radius:999px; }   /* x5 */
.field-label { font-size:11px; color:var(--ink-3); margin-bottom:2px; }   /* x5 */
.label-md { font-size:14px; font-weight:600; }   /* x4 */
.label-sm { font-size:12.5px; font-weight:600; }   /* x4 */
.mock-filter-row-sm { display:flex; align-items:center; gap:9px; padding:5px 9px; font-size:12.5px; color:var(--ink-2); }   /* x4 */
.mock-radio-sm { width:15px; height:15px; border:1.5px solid var(--line-2); border-radius:999px; }   /* x4 */
.mock-card { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--white); }   /* x4 */
.mock-thumb { position:relative; display:flex; align-items:center; justify-content:center; height:104px; background:var(--fill); color:var(--ink-4); }   /* x4 */
.badge-live { position:absolute; right:8px; top:8px; padding:2px 8px; border-radius:999px; background:var(--ok-bg); color:var(--ok); font-size:11px; font-weight:500; }   /* x4 */
.mock-card-body { padding:11px 11px 13px; }   /* x4 */
.mock-card-title { font-size:13px; font-weight:600; line-height:1.35; margin-bottom:9px; }   /* x4 */
.mock-pill { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 12px; border:1px solid var(--line); border-radius:999px; font-size:12px; color:var(--ink-2); }   /* x4 */
.mock-chip { padding:6px 12px; border:1px solid var(--line); border-radius:7px; font-size:11.5px; color:var(--ink-2); }   /* x4 */
.mock-thumb-sm { width:54px; height:54px; border:1px solid var(--line); border-radius:10px; background:var(--fill); }   /* x4 */
.mono-sm-muted { font-family:var(--mono); font-size:12.5px; color:var(--ink-3); }   /* x4 */
.text-xs-muted { font-size:11px; color:var(--ink-3); }   /* x3 */
.tag-pill { padding:6px 14px; border-radius:999px; background:var(--white); border:1px solid var(--line); font-size:12.5px; color:var(--ink-2); }   /* x3 */
.card-xl { padding:26px; border:1px solid var(--line); border-radius:16px; background:var(--white); }   /* x3 */
.note-icon { flex:0 0 auto; margin-top:1px; color:var(--warn-icon); }   /* x3 */
.note-text { margin:0; font-size:14.5px; line-height:1.7; color:var(--warn-text); }   /* x3 */
.dot { width:9px; height:9px; border-radius:999px; background:var(--line-2); }   /* x3 */
.mock-chip-round { padding:4px 11px; border:1px solid var(--line); border-radius:999px; font-size:11.5px; color:var(--ink-2); }   /* x3 */
.text-sm-faint { font-size:12.5px; color:var(--ink-4); }   /* x3 */
.mono-price { font-family:var(--mono); font-size:15px; font-weight:700; }   /* x3 */
.text-xs-faint { font-size:11px; color:var(--ink-4); }   /* x3 */
.card-sm { padding:20px; border:1px solid var(--line); border-radius:14px; background:var(--white); }   /* x3 */
.card-title-sm { font-size:14.5px; font-weight:600; margin-bottom:7px; }   /* x3 */
.body-text-sm { margin:0; font-size:14px; line-height:1.7; color:var(--ink-2); }   /* x3 */
.mock-menu-item { padding:7px 10px; font-size:13px; color:var(--ink-2); }   /* x3 */
.mock-col { width:70px; }   /* x3 */
.mock-col-center { width:46px; text-align:center; }   /* x3 */
.card-rel { position:relative; padding:18px; border:1px solid var(--line); border-radius:16px; background:var(--white); }   /* x3 */
.tier-row { display:flex; align-items:center; padding:10px 12px; border-radius:10px; background:var(--fill); font-size:13.5px; }   /* x3 */
.tier-price { width:120px; text-align:right; font-family:var(--mono); font-weight:700; }   /* x3 */
.tier-row-lg { display:flex; align-items:center; padding:14px; border-radius:10px; background:var(--fill); font-size:15px; }   /* x3 */
.tier-price-lg { width:170px; text-align:right; font-family:var(--mono); font-weight:700; }   /* x3 */
.card-head { display:flex; align-items:center; gap:9px; margin-bottom:14px; }   /* x3 */
.icon-box { display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:9px; background:var(--fill); color:var(--ink-2); }   /* x3 */
.label-lg { font-size:16px; font-weight:700; }   /* x3 */