/* ==========================================================================
   SutorBooks — sutorbooks.com

   THE TOKENS BELOW ARE TRANSCRIBED FROM THE APPLICATION, not chosen here.
   Reviewed 2026-09-06 against:

       abooks-frontend/src/theme.ts            palette, type scale, radii
       abooks-frontend/scripts/brand/mark.mjs  the mark and its named colours
       abooks-frontend/src/main.tsx            which Inter weights ship

   THREE THINGS WERE WRONG HERE BEFORE THAT REVIEW, and each made the site and
   the product look like different companies:

     - primary was #2563EB. That is the app's primary.DARK - its hover state.
       The real primary is #3B82F6 (mark.mjs BLUE).
     - "success" was #0d9488, a teal invented on this site. The app uses #10B981.
     - the typeface was a system stack. The app is Inter, self-hosted.

   Two files holding one fact will drift and nothing reconciles them. If the
   app's palette moves, change it HERE in the same pass and say so.

   MOBILE IS NOT AN AFTERTHOUGHT IN THIS FILE. Every size is fluid, every
   interactive target is at least 44px, and nothing is allowed to overflow the
   viewport horizontally. See the "mobile" section at the foot.
   ========================================================================== */

/* --------------------------------------------------------------- Inter
   Self-hosted, matching the app's @fontsource setup: no third-party font
   origin, so first paint never waits on a DNS+TLS round trip to Google.
   font-display:swap so text is readable immediately rather than invisible.
   Exactly the five weights main.tsx imports - no guessing, no extras. */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/inter-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/inter-latin-500-normal.woff2) format('woff2');}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/inter-latin-600-normal.woff2) format('woff2');}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/inter-latin-700-normal.woff2) format('woff2');}
@font-face{font-family:Inter;font-style:normal;font-weight:800;font-display:swap;
  src:url(/assets/fonts/inter-latin-800-normal.woff2) format('woff2');}

:root {
  /* ---- Brand, from mark.mjs ---- */
  --navy:       #0f1e38;   /* NAVY */
  --blue:       #3b82f6;   /* BLUE       - THE primary */
  --blue-deep:  #2563eb;   /* BLUE_DEEP  - hover / pressed */
  --blue-light: #60a5fa;   /* BLUE_LIGHT */
  --paper:      #f8fafc;   /* PAPER */

  /* ---- Surfaces, from theme.ts palette.sidebar + background ---- */
  --slate-900:  #0f172a;
  --slate-800:  #1e293b;
  --slate-700:  #334155;

  /* ---- Ink ---- */
  --ink:        #0f172a;
  --ink-body:   #475569;
  --ink-muted:  #64748b;
  --ink-faint:  #94a3b8;

  --bg:         #ffffff;
  --bg-soft:    #f8fafc;
  --line:       #e2e8f0;
  --line-soft:  #eef2f7;
  --tint:       #eff6ff;
  --tint-line:  #bfdbfe;

  /* ---- Status, from theme.ts ---- */
  --ok:         #10b981;
  --ok-dark:    #059669;
  --ok-tint:    #ecfdf5;
  --violet:     #8b5cf6;   /* palette.secondary */

  /* ---- Shape, from theme.ts shape.borderRadius = 8 + its overrides ---- */
  --r-sm:  8px;    /* inputs, chips */
  --r-btn: 10px;   /* MuiButton */
  --r-card:16px;   /* MuiCard */
  --r-lg:  20px;   /* MuiDialog */

  /* ---- Layout. FULL WIDTH: sections paint edge to edge; only text is
          constrained, and to 1280 - what large SaaS marketing sites use. ---- */
  --wrap:   1280px;
  --gutter: clamp(18px, 4vw, 48px);

  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --sh-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --sh-md: 0 4px 12px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
  --sh-lg: 0 18px 44px rgba(15,23,42,.10), 0 4px 12px rgba(15,23,42,.05);
  --sh-xl: 0 32px 72px rgba(15,23,42,.14), 0 8px 20px rgba(15,23,42,.06);

  --tap: 44px;   /* minimum touch target. Never go below this. */
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;   /* stop iOS inflating text in landscape */
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv02","cv03","cv04","cv11";
  overflow-x: hidden;               /* a stray wide child must never scroll the page */
  -webkit-tap-highlight-color: rgba(59,130,246,.18);
}

/* Type scale mirrors theme.ts (h1 2.5rem/700/-0.02em ...) then scales up for
   marketing, where a hero carries a page rather than heading a table. Every
   size is fluid, so nothing has to be re-tuned per breakpoint. */
h1,h2,h3,h4 { color: var(--ink); margin: 0 0 .5em; line-height: 1.12; overflow-wrap: break-word; }
h1 { font-size: clamp(2.15rem, 1.5rem + 3.4vw, 4.25rem); font-weight: 800; letter-spacing: -.035em; }
h2 { font-size: clamp(1.75rem, 1.35rem + 2vw, 3rem);     font-weight: 800; letter-spacing: -.028em; }
h3 { font-size: clamp(1.12rem, 1.05rem + .3vw, 1.25rem); font-weight: 700; letter-spacing: -.014em; }
h4 { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--blue-deep); text-underline-offset: 3px; }
/* SVG IS DELIBERATELY EXCLUDED FROM height:auto.
   A CSS rule beats an SVG's width/height ATTRIBUTES, and WebKit resolves
   height:auto on an <svg> to a default size instead of deriving it from the
   viewBox - so `svg{height:auto}` inflates every inline icon on iOS Safari
   while looking perfect in Chromium. That is exactly what broke this page on
   a phone on 2026-09-06. Raster media keeps the intrinsic-ratio behaviour it
   actually needs; SVG only gets a width cap. */
img, video { max-width: 100%; height: auto; }
svg { max-width: 100%; }

.tabular { font-variant-numeric: tabular-nums; }

:where(a,button,input,summary):focus-visible {
  outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px;
}
.on-dark :where(a,button):focus-visible { outline-color: #fff; }

/* ---------------------------------------------------------------- layout */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 780px; }
section { padding: clamp(56px, 7vw, 112px) 0; }
.band-soft { background: var(--bg-soft); }
.band-line { border-block: 1px solid var(--line-soft); }

.visually-hidden {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link {
  position:absolute; left:12px; top:-64px; z-index:200;
  background:var(--blue); color:#fff; padding:12px 20px;
  border-radius:0 0 var(--r-sm) var(--r-sm); font-weight:600; text-decoration:none;
  transition:top .15s ease;
}
.skip-link:focus { top:0; }

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.site-header .wrap { display:flex; align-items:center; gap:28px; height:70px; }

/* The mark is INLINE SVG, not a PNG: the same path the app's sidebar renders
   (mark.mjs MARK_PATH), so it is the same drawing rather than a picture of
   one. Stays sharp at any size and recolours with its container. */
.brand { display:inline-flex; align-items:center; gap:11px; text-decoration:none; flex:none; }
.brand-mark {
  width:36px; height:36px; border-radius:var(--r-sm); flex:none;
  background:var(--blue); color:#fff; display:grid; place-items:center;
}
.brand-mark svg { width:22px; height:22px; display:block; flex:none; }
.brand-word { font-weight:800; font-size:1.15rem; letter-spacing:-.03em; color:var(--ink); }

.nav { margin-left:auto; display:flex; align-items:center; gap:4px; }
.nav a {
  color:var(--ink-body); text-decoration:none; font-size:.95rem; font-weight:500;
  padding:10px 14px; border-radius:var(--r-sm);
  display:inline-flex; align-items:center; min-height:var(--tap);
}
.nav a:hover { color:var(--ink); background:var(--bg-soft); }
.nav .btn { margin-left:10px; }

/* The mobile menu button is hidden on desktop and revealed at the breakpoint. */
.nav-toggle {
  display:none; width:var(--tap); height:var(--tap); margin-left:auto;
  align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line); border-radius:var(--r-sm);
  color:var(--ink); cursor:pointer;
}
.nav-toggle svg { width:22px; height:22px; }
.nav-toggle .ico-x { display:none; }
.nav-toggle[aria-expanded="true"] .ico-x { display:block; }
.nav-toggle[aria-expanded="true"] .ico-bars { display:none; }

/* ---------------------------------------------------------------- buttons */

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font:inherit; font-size:1rem; font-weight:600;
  min-height:var(--tap); padding:12px 22px;
  border:1px solid transparent; border-radius:var(--r-btn);
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background .15s, border-color .15s, transform .08s, box-shadow .15s;
}
.btn-primary { background:var(--blue); color:#fff; box-shadow:0 1px 2px rgba(37,99,235,.28); }
.btn-primary:hover { background:var(--blue-deep); box-shadow:0 4px 14px rgba(37,99,235,.30); }
.btn-primary:active { transform:translateY(1px); }
.btn-ghost { background:#fff; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover { border-color:var(--ink-faint); background:var(--bg-soft); }
.btn-onblue { background:#fff; color:var(--navy); }
.btn-onblue:hover { background:var(--paper); }
.btn-outline-light { border-color:rgba(255,255,255,.34); color:#fff; background:transparent; }
.btn-outline-light:hover { border-color:#fff; background:rgba(255,255,255,.08); }
.btn-lg { font-size:1.05rem; padding:15px 30px; min-height:52px; }

/* ---------------------------------------------------------------- bits */

.eyebrow {
  display:inline-flex; align-items:center; gap:9px;
  font-size:.76rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--blue-deep); background:var(--tint); border:1px solid var(--tint-line);
  padding:6px 14px; border-radius:999px; margin-bottom:22px;
}
.eyebrow::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--blue); flex:none; }
.eyebrow-light { color:#bfdbfe; background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.22); }
.eyebrow-light::before { background:var(--blue-light); }

.lede { font-size:clamp(1.04rem, .98rem + .35vw, 1.22rem); color:var(--ink-body); }
.section-head { max-width:720px; margin-bottom:clamp(34px,4vw,60px); }
.section-head.center { margin-inline:auto; text-align:center; }

.crumbs { font-size:.9rem; color:var(--ink-muted); margin-bottom:18px; }
.crumbs a { text-decoration:none; } .crumbs a:hover { text-decoration:underline; }
.crumbs span { margin:0 8px; color:var(--ink-faint); }

/* ---------------------------------------------------------------- hero */

.hero {
  position:relative; overflow:hidden;
  padding: clamp(52px,8vw,116px) 0 clamp(52px,7vw,104px);
  background:
    radial-gradient(64rem 34rem at 82% -8%, #e8f1ff 0%, transparent 60%),
    radial-gradient(48rem 30rem at -6% 10%, #f1f6ff 0%, transparent 58%),
    var(--bg);
}
/* Faint ledger rules behind the hero: the product's own name as texture. */
.hero::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(90deg, rgba(59,130,246,.055) 1px, transparent 1px);
  background-size:96px 100%;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.75), transparent 72%);
          mask-image:linear-gradient(180deg, rgba(0,0,0,.75), transparent 72%);
}
.hero > * { position:relative; z-index:1; }

.hero-grid {
  display:grid; gap:clamp(34px,5vw,72px);
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  align-items:center;
}
.hero h1 { max-width:16ch; }
.hero .lede { max-width:54ch; margin:0 0 30px; font-size:clamp(1.06rem,1rem+.5vw,1.3rem); }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.hero-reassure {
  margin-top:24px; display:flex; flex-wrap:wrap; gap:10px 24px;
  font-size:.92rem; color:var(--ink-muted);
}
.hero-reassure span { display:inline-flex; align-items:center; gap:8px; }
.hero-reassure span::before {
  content:""; width:16px; height:16px; border-radius:50%; flex:none;
  background:var(--ok-tint); border:1.5px solid var(--ok);
}

/* ------------------------------------------------- the ledger (hero art)
   A real balanced journal entry, not a screenshot. It makes the product's
   name literal - sutor, to stitch two sides together - and it CANNOT
   misrepresent the software, because it is not a picture of the software. */
.ledger {
  background:#fff; border:1px solid var(--line); border-radius:var(--r-card);
  box-shadow:var(--sh-xl); overflow:hidden;
}
.ledger-top {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 20px; background:var(--bg-soft); border-bottom:1px solid var(--line-soft);
}
.ledger-top .t { font-size:.9rem; font-weight:700; color:var(--ink); letter-spacing:-.01em; }
.ledger-chip {
  font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-muted); background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:3px 10px; white-space:nowrap;
}
.ledger-row {
  display:grid; grid-template-columns:1fr auto; gap:12px; align-items:baseline;
  padding:13px 20px; border-top:1px solid var(--line-soft);
}
.ledger-row:first-of-type { border-top:0; }
.ledger-row .acct { font-size:.95rem; color:var(--ink); font-weight:500; }
.ledger-row .acct small { display:block; font-size:.75rem; color:var(--ink-faint); font-weight:400; margin-top:1px; }
.ledger-row .amt { font-family:var(--mono); font-size:.92rem; color:var(--ink); font-variant-numeric:tabular-nums; }
.ledger-row.cr .acct { padding-left:22px; }
.ledger-stitch { height:0; border-top:2px dashed var(--tint-line); margin:8px 20px; }
.ledger-foot {
  display:grid; grid-template-columns:1fr auto; gap:12px;
  padding:15px 20px; border-top:1px solid var(--line); background:var(--bg-soft);
}
.ledger-foot .l { font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); }
.ledger-foot .amt { font-family:var(--mono); font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.ledger-ok {
  display:flex; align-items:center; gap:9px; margin:0; padding:13px 20px;
  background:var(--ok-tint); border-top:1px solid #a7f3d0;
  font-size:.87rem; font-weight:600; color:var(--ok-dark);
}
.ledger-ok svg { flex:none; }

/* ---------------------------------------------------------------- strip
   Full-bleed capability strip. It stands where a competitor puts customer
   logos - which this site cannot use, because there are no customers. */
.strip { background:var(--navy); color:#cbd5e1; padding:26px 0; }
.strip-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 40px; }
.strip-label { font-size:.74rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:#7d8ea8; }
.strip-items { display:flex; flex-wrap:wrap; gap:12px 30px; }
.strip-items span { display:inline-flex; align-items:center; gap:9px; font-size:.93rem; font-weight:500; color:#e2e8f0; }
.strip-items svg { color:var(--blue-light); flex:none; }

/* ---------------------------------------------------------------- bento */

.bento { display:grid; gap:20px; grid-template-columns:repeat(6,1fr); }
.bento > * { grid-column:span 2; }
.bento .span3 { grid-column:span 3; }
.bento .span6 { grid-column:span 6; }

.tile {
  background:#fff; border:1px solid var(--line); border-radius:var(--r-card);
  padding:clamp(24px,2.4vw,32px);
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.tile:hover { border-color:var(--tint-line); box-shadow:var(--sh-md); transform:translateY(-2px); }
.tile h3 { margin-bottom:10px; }
.tile p { font-size:.98rem; margin:0; }
.tile-icon {
  width:44px; height:44px; border-radius:var(--r-btn); margin-bottom:18px;
  background:var(--tint); color:var(--blue-deep); display:grid; place-items:center;
}
.tile-dark {
  background:linear-gradient(150deg, var(--slate-900), var(--slate-800) 62%, #1d3a6b);
  color:#cbd5e1; border-color:transparent;
}
.tile-dark h2, .tile-dark h3 { color:#fff; }
.tile-dark:hover { transform:none; box-shadow:var(--sh-lg); border-color:transparent; }
.tile-dark .tile-icon { background:rgba(96,165,250,.16); color:var(--blue-light); }

.addon-note {
  margin-top:16px !important; padding-top:14px; border-top:1px solid var(--line-soft);
  font-size:.88rem !important; color:var(--ink-muted) !important;
}
.badge-addon {
  display:inline-block; margin-right:8px;
  font-size:.65rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--blue-deep); background:var(--tint); border:1px solid var(--tint-line);
  border-radius:5px; padding:2px 7px; vertical-align:1px;
}

/* ---------------------------------------------------------------- lists */

.checks { list-style:none; padding:0; margin:0; display:grid; gap:13px; }
.checks li { position:relative; padding-left:32px; font-size:1rem; }
.checks li::before {
  content:""; position:absolute; left:0; top:.35em; width:19px; height:19px;
  border-radius:50%; background:var(--ok-tint); border:1.5px solid var(--ok);
}
.checks li::after {
  content:""; position:absolute; left:5.5px; top:.62em; width:8px; height:4px;
  border-left:2px solid var(--ok-dark); border-bottom:2px solid var(--ok-dark);
  transform:rotate(-45deg);
}
.checks strong { color:var(--ink); font-weight:650; }
.on-dark .checks li { color:#cbd5e1; }
.on-dark .checks strong { color:#fff; }

.crosses { list-style:none; padding:0; margin:0; display:grid; gap:11px; }
.crosses li { position:relative; padding-left:32px; font-size:.98rem; color:var(--ink-muted); }
.crosses li::before, .crosses li::after {
  content:""; position:absolute; left:4px; top:.72em; width:12px; height:2px;
  background:var(--ink-faint); border-radius:2px;
}
.crosses li::before { transform:rotate(45deg); }
.crosses li::after  { transform:rotate(-45deg); }

.steps { counter-reset:s; list-style:none; padding:0; margin:0; display:grid; gap:15px; }
.steps li { counter-increment:s; position:relative; padding-left:46px; }
.steps li::before {
  content:counter(s); position:absolute; left:0; top:-2px; width:30px; height:30px;
  border-radius:50%; background:var(--tint); color:var(--blue-deep);
  border:1px solid var(--tint-line); font-size:.86rem; font-weight:700;
  display:grid; place-items:center;
}

/* ---------------------------------------------------------------- audience */

.aud {
  background:#fff; border:1px solid var(--line); border-radius:var(--r-card);
  padding:clamp(24px,2.4vw,32px); display:flex; flex-direction:column;
}
.aud .who {
  font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--blue-deep); margin-bottom:14px;
}
.aud blockquote {
  margin:0 0 16px; padding-left:18px; border-left:3px solid var(--tint-line);
  font-size:1.02rem; color:var(--ink); font-weight:500;
}
.aud p { font-size:.96rem; margin:0; }

/* ---------------------------------------------------------------- story */

.story { display:grid; gap:clamp(30px,5vw,64px); align-items:center;
         grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); }
.story-card {
  background:linear-gradient(155deg, var(--navy), #163057 55%, var(--blue-deep));
  color:#fff; border-radius:var(--r-lg);
  padding:clamp(30px,4vw,52px) clamp(24px,3vw,42px);
  text-align:center; box-shadow:var(--sh-xl);
}
.story-card .term { font-size:clamp(2.3rem,1.8rem+3vw,3.6rem); font-weight:800; letter-spacing:-.04em; line-height:1; margin:0 0 12px; }
.story-card .say  { font-family:var(--mono); font-size:.92rem; color:#93c5fd; margin:0 0 22px; }
.story-card .gloss{ font-size:1rem; color:#dbeafe; margin:0; padding-top:20px; border-top:1px solid rgba(255,255,255,.2); }
.story-card .gloss em { color:#fff; font-style:normal; font-weight:650; }

/* ---------------------------------------------------------------- packages */

.plans { display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); align-items:stretch; }
.plan {
  display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-card); padding:clamp(24px,2.4vw,30px);
}
.plan.featured { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue), var(--sh-lg); }
.plan-name { font-weight:750; font-size:1.22rem; color:var(--ink); margin:0 0 6px; letter-spacing:-.02em; }
.plan-desc { font-size:.95rem; margin:0 0 20px; min-height:3em; }
.plan-price { margin:0 0 22px; font-size:2rem; font-weight:800; color:var(--ink); letter-spacing:-.035em; }
.plan-price .per { font-size:.95rem; font-weight:500; color:var(--ink-faint); margin-left:4px; }
/* An UNSET price is not free, and must never be styled to look like a number. */
.plan-price-tba {
  display:inline-block; font-size:.86rem; font-weight:650; line-height:1.4;
  color:var(--ink-muted); background:var(--bg-soft);
  border:1px dashed var(--line); border-radius:var(--r-sm); padding:8px 13px;
}
.plan-price-free { color:var(--ok-dark); }
.plan-caps { list-style:none; padding:0; margin:0 0 18px; }
.plan-caps li { font-size:.93rem; padding:3px 0; }
.plan-caps strong { color:var(--ink); font-weight:700; }
.plan-mods { list-style:none; padding:18px 0 22px; margin:0 0 22px; border-top:1px solid var(--line-soft); }
.plan-mods li { position:relative; padding-left:22px; font-size:.92rem; padding-bottom:5px; }
.plan-mods li::before { content:""; position:absolute; left:2px; top:.55em; width:8px; height:8px; border-radius:50%; background:var(--tint-line); }
.plan .btn { margin-top:auto; text-align:center; }
.addon-req { font-size:.88rem; color:var(--ink-muted); margin-top:12px; }

/* ---------------------------------------------------------------- notice */

.notice {
  border:1px solid var(--line); border-left:3px solid var(--blue);
  background:#fff; border-radius:var(--r-sm); padding:20px 22px; font-size:.97rem;
}
.notice strong { color:var(--ink); }

/* ---------------------------------------------------------------- tables */

.scroll-x { overflow-x:auto; -webkit-overflow-scrolling:touch; }
section table { border-collapse:collapse; width:100%; font-size:.97rem; }
section th, section td { text-align:left; padding:12px 15px; border-bottom:1px solid var(--line); }
section thead th {
  font-size:.74rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--ink-faint); font-weight:700; border-bottom:2px solid var(--line);
}
section tbody th { font-weight:500; color:var(--ink-body); }
section tbody td { color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }

/* ---------------------------------------------------------------- CTA */

.cta {
  background:
    radial-gradient(52rem 26rem at 12% 0%, rgba(59,130,246,.30), transparent 62%),
    linear-gradient(160deg, var(--slate-900) 0%, #13233f 55%, var(--navy) 100%);
  color:#cbd5e1; padding:clamp(56px,7vw,104px) 0;
}
.cta h2 { color:#fff; }
.cta .lede { color:#b6c4d8; }
.cta-inner { max-width:660px; margin-inline:auto; text-align:center; }
.cta-actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:30px 0 18px; }
.cta-note { font-size:.9rem; color:#8fa1b8; margin:0; }
.cta-note a { color:#bfdbfe; }

/* ---------------------------------------------------------------- footer */

.site-footer { background:var(--slate-900); color:#94a3b8; padding:clamp(44px,5vw,72px) 0 36px; font-size:.95rem; }
.site-footer .brand-word { color:#fff; }
.footer-grid { display:grid; gap:34px; grid-template-columns:minmax(220px,1.7fr) repeat(4,minmax(125px,1fr)); }
.footer-blurb { max-width:34ch; margin-top:16px; color:#8697ad; font-size:.93rem; }
.site-footer h3 { color:#fff; font-size:.74rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; margin:0 0 14px; }
.site-footer nav a { display:block; color:#94a3b8; text-decoration:none; padding:7px 0; }
.site-footer nav a:hover { color:#fff; text-decoration:underline; }
.footer-legal {
  margin-top:44px; padding-top:24px; border-top:1px solid #1e293b;
  display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between;
  font-size:.86rem; color:#64748b;
}
.footer-legal p { margin:0; }

/* ==========================================================================
   MOBILE
   Handled as a first-class case rather than as a shrink of the desktop.
   ========================================================================== */

@media (max-width: 1080px) {
  .bento { grid-template-columns:repeat(4,1fr); }
  .bento > * { grid-column:span 2; }
  .bento .span3, .bento .span6 { grid-column:span 4; }
  .footer-grid { grid-template-columns:1fr 1fr 1fr; }
}

@media (max-width: 900px) {
  .hero-grid, .story { grid-template-columns:1fr; }
  .story-card { order:-1; }
}

/* --- THE NAV BECOMES A DRAWER. Below this width there is not room for five
       items plus a button, and shrinking them under 44px would make them
       hard to hit. The toggle is a real <button> with aria-expanded, so it
       announces its state; the panel is hidden with `hidden` rather than
       display:none in CSS so the markup and the styling cannot disagree. --- */
@media (max-width: 860px) {
  .nav-toggle { display:inline-flex; }
  .nav {
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:2px;
    margin:0; padding:12px var(--gutter) 20px;
    background:#fff; border-bottom:1px solid var(--line); box-shadow:var(--sh-lg);
    max-height:calc(100dvh - 70px); overflow-y:auto;
  }
  .nav[hidden] { display:none; }
  .nav a { font-size:1.02rem; padding:14px 12px; }
  .nav .btn { margin:10px 0 0; width:100%; }
}

@media (max-width: 700px) {
  body { font-size:16px; }
  .bento { grid-template-columns:1fr; }
  .bento > *, .bento .span3, .bento .span6 { grid-column:span 1; }
  .site-header .wrap { height:64px; gap:12px; }
  .nav { max-height:calc(100dvh - 64px); }
  .brand-mark { width:32px; height:32px; }
  .brand-mark svg { width:19px; height:19px; }
  .brand-word { font-size:1.05rem; }

  /* Full-width buttons on a phone: a 44px-tall target spanning the column is
     far easier to hit than two side by side. */
  .hero-actions .btn, .cta-actions .btn { width:100%; }
  .cta-actions { flex-direction:column; }

  .footer-grid { grid-template-columns:1fr 1fr; }
  .strip-inner { flex-direction:column; align-items:flex-start; gap:14px; }
  .plan-desc { min-height:0; }
  .hero-reassure { gap:8px 18px; font-size:.88rem; }

  /* The ledger is the one dense element. Tighten it rather than let it
     dictate a horizontal scrollbar for the whole page. */
  .ledger-row, .ledger-foot, .ledger-ok, .ledger-top { padding-inline:16px; }
  .ledger-stitch { margin-inline:16px; }
  .ledger-row .acct { font-size:.9rem; }
}

@media (max-width: 420px) {
  :root { --gutter:16px; }
  .footer-grid { grid-template-columns:1fr; }
  .ledger-row.cr .acct { padding-left:14px; }
}

/* A phone in landscape, or any short viewport: stop the hero eating the
   screen before the first line of copy is visible. */
@media (max-height: 520px) and (max-width: 900px) {
  .hero { padding-block:40px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition:none !important; animation:none !important; }
}

@media print {
  .site-header, .cta, .hero-actions, .strip { display:none; }
  body { color:#000; font-size:12pt; }
  .site-footer { background:none; color:#000; }
}