/* WordBinder design tokens and base styles. Light mode only, no shadows. */
:root {
  --paper: #FFFFFF;
  --paper-2: #F6F5F2;
  --rule: #E4E2DD;
  --ink: #141414;
  --ink-2: #5B5B57;
  --ink-3: #9A9A94;
  --accent: #0A6E47;
  --accent-hover: #085537;
  --accent-tint: #E6F2EC;

  --font-ui: Geist, 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'Geist Mono', 'IBM Plex Mono', ui-monospace, monospace;

  --radius-card: 6px;
  --measure-text: 880px;
  --container: 1200px;
  --gutter: 24px;
}
@media (min-width: 768px) { :root { --gutter: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 15px/24px var(--font-ui); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }

a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.mono { font-family: var(--font-mono); }
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.col { max-width: var(--measure-text); }

.t-h1 { font: 600 36px/44px var(--font-ui); letter-spacing: -0.02em; }
@media (min-width: 768px) { .t-h1 { font-size: 44px; line-height: 52px; } }
.t-h2 { font: 600 24px/32px var(--font-ui); }
.t-h3 { font: 600 17px/26px var(--font-ui); }
.t-lead { font: 400 19px/30px var(--font-ui); color: var(--ink-2); }
.t-eyebrow { font: 400 12px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }

.card { border: 1px solid var(--rule); border-radius: var(--radius-card); background: var(--paper); }

/* Tables: header on paper-2, mono numbers, no zebra. */
.tbl { width: 100%; border-collapse: collapse; font: 400 15px/22px var(--font-ui); }
.tbl th { text-align: left; background: var(--paper-2); padding: 10px 14px; border-bottom: 1px solid var(--rule);
  font: 600 12px/16px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--rule); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td.num { font-family: var(--font-mono); text-align: right; }
.tbl th.num { text-align: right; }

/* Site chrome */
.site-header { border-bottom: 1px solid var(--rule); }
.site-header .wrap { height: 64px; display: flex; align-items: center; }
/* Logo mark and wordmark, unchanged from the original site. */
.wordmark { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font: 400 21px/1 var(--font-ui); letter-spacing: -0.02em; }
.wordmark:hover { color: var(--ink); }
.wordmark .word { font-weight: 600; color: var(--accent); }
.wordmark .binder { font-weight: 400; color: var(--ink); }
.logo-mark { width: 32px; height: 32px; flex-shrink: 0; }
.logo-mark svg { width: 100%; height: 100%; display: block; }
.site-footer { border-top: 1px solid var(--rule); }
.site-footer .wrap { padding-top: 24px; padding-bottom: 40px; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; color: var(--ink-2); }
.site-footer a { color: var(--ink-2); }

/* Page sections, 72px vertical rhythm */
.hero { padding-top: 72px; padding-bottom: 56px; }
.hero .col { display: flex; flex-direction: column; gap: 20px; }
.section { padding-bottom: 72px; display: flex; flex-direction: column; gap: 24px; }
.section .col { display: flex; flex-direction: column; gap: 12px; }
.section p { font-size: 17px; line-height: 28px; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tab { padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.tab p { font-size: 15px; line-height: 24px; color: var(--ink-2); }
.band { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--paper-2); margin-bottom: 72px; }
.band .wrap { padding-top: 56px; padding-bottom: 56px; }
.price-frame { max-width: 560px; border: 1px solid var(--rule); border-radius: var(--radius-card); overflow: hidden; background: var(--paper); }
.note { font-size: 14px; line-height: 22px; color: var(--ink-2); }