/* ============================================================
   States Agent — design system v5

   Measured from the two references rather than guessed at:
     column.com — SuisseIntl, h1 52px/600 at -0.03em tracking, and a
       subhead that is the SAME navy as the heading at weight 300, not
       grey. Its only uppercase text is data (ACH, USD, GBP). Hero
       visual is real API output. Buttons are 16px, padding 0 16px.
     suby.fi — Rethink Sans, h1 48px/700 at line-height 1.0. Zero
       uppercase elements on the whole page. Buttons 16px/500, 8px 20px.
       Names competitors and real percentages instead of vague contrast.

   So, deliberately NOT here (each is a generated-landing-page tell):
     - uppercase letter-spaced eyebrow labels above every section
     - a 3-4 column stat band of round numbers
     - pastel icon tiles above identical feature cards
     - numbered circles for "how it works"
     - system-ui / Inter as the display face
   Density comes from real data (our actual fee table), the way Column
   gets it from real JSON. Nothing on the page is invented.

   Color roles are deliberately split:
     brand  = identity & interaction (mark, links, focus, active)
     ok     = success semantics only (Done, Paid, Active)
     amber  = attention / money owed
   Brand blue never carries status meaning, so a blue chip and a
   green chip always mean different things.
   ============================================================ */

/* Rethink Sans (OFL), self-hosted: no third-party request, no FOUT swap
   from a different metric. Variable 400-800 in one 35KB file. */
@font-face {
  font-family: 'Rethink Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/rethink-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rethink Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/rethink-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* type */
  --sans: 'Rethink Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono-f: ui-monospace, SFMono-Regular, Menlo, "Cascadia Mono", Consolas, monospace;

  /* color */
  --navy: #101C4E;          /* display / headings */
  --ink: #12161E;           /* body text */
  --gray: #7A7E88;          /* secondary text */
  --gray-2: #A9ACB6;        /* tertiary */
  --line: #E4E6EA;          /* hairlines */
  --bg: #FFFFFF;
  --bg-2: #F6F7F9;          /* alternate band */
  --brand: #0061FF;         /* primary accent — the mark, links, active state */
  --brand-deep: #0047C7;    /* pressed / hover */
  --brand-bright: #4C8DFF;  /* brand on dark backgrounds */
  --brand-tint: #EBF2FF;    /* tint chip */
  --ok: #0F7B60;            /* success only */
  --ok-tint: #EAF5F0;
  --dark: #071235;          /* dark band / footer */
  --amber: #B26200;
  --amber-tint: #FFF4E0;

  /* Radii: Stripe sits at 4px on controls and 5-6px on cards. A uniform 8px
     on everything, with pills scattered around, is the generated default. */
  --r: 6px;
  --r-btn: 5px;

  /* One elevation method at a time. A hairline ring AND a diffuse shadow on
     the same element is two contradictory ways of saying "raised", which is
     itself a tell — so --ring and --shadow are alternatives, not a pair.
     Shadows are tinted toward the navy, never neutral black. */
  --ring: 0 0 0 1px rgba(16, 28, 78, .07);
  --ring-strong: 0 0 0 1px rgba(16, 28, 78, .12);
  --shadow-sm: 0 1px 2px rgba(16, 28, 78, .04);
  --shadow-md: 0 2px 2px rgba(16, 28, 78, .04), 0 8px 16px -4px rgba(16, 28, 78, .04);
  --shadow-lift: 0 18px 40px -24px rgba(16, 28, 78, .28);

  /* Never ease-in on UI: it crawls exactly when the eye is on it. */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --wrap: 1104px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 16px; line-height: 1.5;
  color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Tabular figures everywhere: this page is mostly money, and money that
     shifts width as it changes is the giveaway that nobody looked at it. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
::selection { background: rgba(0, 97, 255, .18); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* ---------- type ----------
   Sized off Column's measured values: 52px/600 at -0.03em, line-height
   1.1. The subhead is navy at weight 400, NOT grey — greying the subhead
   is what makes a page read as a template. */
/* Weight 560, not 700. Every generated page lands on 400/600/700; the sites
   that read as designed pick a custom stop on the variable axis (Linear 510,
   Mercury 480, Vercel's rule is "never 700-800"). Rethink Sans is variable
   400-800, so 560 is a real stop, not a synthesised bold.
   Tracking ramps with size: 0 at body, -0.035em at display. */
/* No ch cap on headings. A max-width in ch breaks the line wherever the
   count lands rather than where the layout actually runs out of room, which
   is why short headings were wrapping with half the column still empty.
   The container (.sec-head / the hero column) sets the width instead. */
.display {
  font-size: clamp(36px, 4.6vw, 54px);
  font-weight: 560; line-height: 1.05;
  letter-spacing: -0.035em; color: var(--navy);
  text-wrap: balance;
}
/* Tone contrast inside one sentence, instead of a gradient or an eyebrow
   label doing the explaining. */
.display .q { color: var(--gray); font-weight: 400; }
.h  { font-size: clamp(26px, 3vw, 38px); font-weight: 560; line-height: 1.1; letter-spacing: -0.03em; color: var(--navy); text-wrap: balance; }
.h .q { color: var(--gray); font-weight: 400; }
.h3 { font-size: 18px; font-weight: 560; letter-spacing: -0.015em; color: var(--navy); }

/* Section label device, borrowed from Vercel: mono, small, positive tracking.
   Reads as infrastructure rather than marketing, which is exactly what a
   tracked-uppercase sans eyebrow fails to do. Used sparingly. */
.slabel {
  font-family: var(--mono-f); font-size: 12.5px; font-weight: 500;
  letter-spacing: .04em; color: var(--gray);
}
.lede { font-size: 19px; line-height: 1.5; font-weight: 400; color: var(--navy); max-width: 52ch; }
.muted { color: var(--gray); }
.faint { color: var(--gray-2); }
.mono { font-family: var(--mono-f); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* Sentence-case, no tracking, no colour shouting. Kept only where it
   genuinely labels a step in the order flow. Never above a marketing
   heading — that pattern is gone from the landing page entirely. */
.eyebrow {
  display: inline-block;
  font-size: 13px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--gray);
}
.eyebrow--ok { color: var(--ok); }
.eyebrow--amber { color: var(--amber); }

/* A factual marker, the way Column carries "Member FDIC" and Suby carries
   "Circle Certified Member". Only ever states something verifiable. */
.fact {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 12px 5px 8px; background: #fff;
  font-size: 13px; color: var(--gray); white-space: nowrap;
}
.fact b { color: var(--navy); font-weight: 600; }
.fact .fmark { width: 15px; height: auto; color: var(--brand); flex: none; }

/* ---------- buttons ----------
   Both references use compact buttons: Column 16px with 0 16px padding,
   Suby 16px/500 with 8px 20px. The oversized pill CTA is a tell. */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--r-btn);
  font-size: 15px; font-weight: 500; line-height: 1.25;
  border: 1px solid transparent; white-space: nowrap;
  transition: background-color .16s var(--ease), border-color .16s var(--ease),
              box-shadow .16s var(--ease), transform .1s var(--ease);
}
/* Press feedback. Cheap, and its absence is one of the things that makes an
   interface feel like a picture of an interface. */
.btn:active { transform: scale(.97); }
.btn-lg { padding: 11px 20px; font-size: 15.5px; }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: #0B1538; }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--gray-2); }
.btn-brand { background: var(--brand); color: #fff; }
.btn-brand:hover { background: var(--brand-deep); }
.btn .arw { transition: transform .16s var(--ease); }
.btn:hover .arw { transform: translateX(3px); }

/* ---------- topbar + nav ---------- */
.topbar {
  background: var(--dark); color: rgba(255,255,255,.85);
  font-size: 13px; padding: 8px 0;
}
.topbar .wrap { display: flex; align-items: center; justify-content: center; gap: 8px; }
.topbar b { color: #fff; font-weight: 600; }
.topbar .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-bright); }

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { display: flex; align-items: center; gap: 32px; height: 64px; }
/* Wordmark: Rethink Sans at 700, tight. The woff2 is preloaded and
   self-hosted, so it is there on first paint. */
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 17.5px; font-weight: 700; letter-spacing: -0.04em;
  color: var(--navy); white-space: nowrap;
}
/* The mark is the contiguous US — 98:61, so height follows width. */
.brand .mark { width: 30px; height: auto; color: var(--brand); flex: none; }
.footer .brand .mark { color: var(--brand-bright); }
.nav-links { display: flex; gap: 26px; font-size: 14.5px; color: var(--gray); margin-left: 8px; }
.nav-links a { transition: color .2s; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.signin { font-size: 14.5px; color: var(--gray); transition: color .2s; }
.signin:hover { color: var(--ink); }

/* ---------- sections ---------- */
.section { padding: 96px 0; }
.section--tight { padding: 56px 0; }
.section--band { background: var(--bg-2); }
/* 780, not 680: the heading and the prose want different measures. At 680 a
   41-character heading came to 703px and wrapped for the sake of 23px. The
   prose underneath keeps its own 52ch measure via .lede, so widening this
   only affects the heading. */
.sec-head { max-width: 780px; margin-bottom: 40px; }
.sec-head .h { margin: 0 0 14px; }

/* ---------- hero ---------- */
.hero { padding: 76px 0 88px; }
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center; }
.hero .fact { margin-bottom: 26px; }
.hero .display { margin-bottom: 20px; }
.hero .lede { margin-bottom: 30px; }
/* wrap: the button is white-space:nowrap, so unwrapped these can sum past a
   375px viewport and drag the whole page into sideways scroll. */
.hero-actions { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }

/* A text link with an arrow, instead of a second heavy button. Column and
   Suby both pair one solid button with something much quieter. */
.link-arw { font-size: 15px; font-weight: 500; color: var(--navy); display: inline-flex; align-items: center; gap: 6px; }
.link-arw .arw { transition: transform .2s; color: var(--brand); }
.link-arw:hover .arw { transform: translateX(3px); }

/* on-load stagger */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero [data-rise] { animation: rise .55s cubic-bezier(.2,.6,.2,1) both; }
.hero [data-rise="2"] { animation-delay: .08s; }
.hero [data-rise="3"] { animation-delay: .16s; }
.hero [data-rise="4"] { animation-delay: .24s; }

/* product mock card (right side of hero) */
.mock {
  background: #fff; border-radius: 12px;
  box-shadow: var(--ring);
  overflow: hidden;
}
.mock-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.mock-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.mock-bar .tt { margin-left: 10px; font-size: 12px; color: var(--gray-2); }
.mock-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px; }
.mock-head .t { font-size: 14px; font-weight: 600; color: var(--navy); }
.mock-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 20px; border-top: 1px solid var(--bg-2);
  transition: background-color .2s;
}
.mock-row:hover { background: var(--bg-2); }
.mock-row .ic {
  flex: none; width: 34px; height: 34px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--brand-tint); color: var(--brand);
}
.mock-row .nm { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.mock-row .sub { display: block; font-size: 12px; color: var(--gray); margin-top: 1px; }
.mock-row .st { margin-left: auto; }

/* badges */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  padding: 4px 9px; border-radius: 999px;
  background: var(--bg-2); color: var(--gray);
}
.badge--live { background: var(--ok-tint); color: var(--ok); }
.badge--blue { background: var(--brand-tint); color: var(--brand); }
.badge--amber { background: var(--amber-tint); color: var(--amber); }
.badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- hero quote panel ----------
   The hero visual is our real arithmetic for a real state, not a drawing of
   a product. Column earns its hero the same way, with live API output. */
.quote {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow-lift);   /* border does the edge, shadow only the lift */
  overflow: hidden;
}
.quote-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 18px; border-bottom: 1px solid var(--line); background: #FCFCFD;
}
.quote-t { font-size: 13.5px; font-weight: 600; color: var(--navy); }
.quote-sel {
  font: inherit; font-size: 13.5px; font-weight: 500; color: var(--navy);
  border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px;
  background: #fff; cursor: pointer; outline: none; max-width: 46%;
}
.quote-sel:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,97,255,.14); }
.quote-rows { padding: 4px 18px; }
.qr {
  display: grid; grid-template-columns: 1fr auto;
  gap: 2px 12px; padding: 13px 0; border-bottom: 1px solid var(--bg-2);
}
.qr:last-child { border-bottom: 0; }
/* Direct children only: the state name lives in a nested <span> inside the
   <i>, and an unscoped `.qr span` restyles it into a grid item. */
.qr > span { grid-column: 1; grid-row: 1; font-size: 14.5px; color: var(--ink); font-weight: 500; }
.qr > i { grid-column: 1; grid-row: 2; font-style: normal; font-size: 12.5px; color: var(--gray); }
.qr > i span { font: inherit; color: var(--ink); }
.qr > b { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 15px; font-weight: 560; color: var(--navy); }
.quote-total {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 14px 18px; border-top: 1px solid var(--line); background: var(--brand-tint);
}
.quote-total span { font-size: 14px; font-weight: 600; color: var(--navy); }
.quote-total b { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; color: var(--brand); }
.quote-foot { padding: 13px 18px; font-size: 12.5px; line-height: 1.5; color: var(--gray); border-top: 1px solid var(--line); }
.quote-foot b { color: var(--navy); font-weight: 600; }

/* ---------- price list ----------
   A table, because a price list is tabular. Not six cards with icons. */
.ptable { border-top: 1px solid var(--navy); }
.ptable-head, .prow {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.15fr;
  gap: 16px; align-items: baseline;
}
.ptable-head {
  padding: 12px 0; border-bottom: 1px solid var(--line);
  font-size: 12.5px; font-weight: 500; color: var(--gray);
}
.prow { padding: 15px 0; border-bottom: 1px solid var(--bg-2); }
.prow:hover { background: #FCFCFD; }
.ps { font-size: 15px; font-weight: 600; color: var(--navy); }
.ps em {
  font-style: normal; font-size: 11px; font-weight: 500; color: var(--gray-2);
  border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; margin-left: 7px;
  vertical-align: 1.5px;
}
.prow .num { font-size: 14.5px; color: var(--ink); }
.prow .num.is-none { color: var(--ok); font-weight: 600; }
/* The per-state footnote: real, and the reason the table is worth reading. */
.pnote { grid-column: 1 / -1; font-size: 12.5px; color: var(--gray); margin-top: -4px; }
.tnote { margin-top: 18px; font-size: 12.5px; color: var(--gray); max-width: 76ch; }

/* ---------- audience (who it's for) ---------- */
.aud-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.aud h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.025em; color: var(--navy); }
.aud-sub { font-size: 15px; color: var(--gray); line-height: 1.55; margin-top: 8px; max-width: 44ch; }
.aud ul { list-style: none; margin-top: 20px; border-top: 1px solid var(--line); }
.aud li {
  padding: 11px 0 11px 18px; border-bottom: 1px solid var(--line);
  font-size: 14.5px; color: var(--ink); position: relative;
}
/* A hairline tick, not a green check emoji in a circle. */
.aud li::before {
  content: ""; position: absolute; left: 0; top: 18px;
  width: 7px; height: 1.5px; background: var(--brand);
}

/* ---------- definition list (what's included) ----------
   Fixed tracks, not `1fr 2.1fr auto`. Each row is its own grid, so an `auto`
   price column sized itself to its own content ("$99" vs "$199 + state fee"),
   which changed how much space the fr columns divided up — and every
   description started at a different left edge. Fixed widths make the rows
   share one set of tracks. */
.deflist { border-top: 1px solid var(--navy); }
.dfrow {
  display: grid; grid-template-columns: 200px minmax(0, 1fr) 150px;
  gap: 32px; align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid var(--line);
}
.dfrow dt { font-size: 16px; font-weight: 600; color: var(--navy); letter-spacing: -0.015em; }
.dfrow dd { font-size: 14.5px; line-height: 1.55; color: var(--gray); }
.dfrow .dfp { font-size: 15px; font-weight: 600; color: var(--navy); white-space: nowrap; text-align: right; }
.dfrow .dfp a { color: var(--brand); }

/* ---------- compare ---------- */
.compare {
  display: grid; grid-template-columns: 1fr 1fr;
  margin-top: 44px; border-radius: var(--r); overflow: hidden;
  box-shadow: var(--ring);
}
.compare .col { padding: 30px; background: #fff; }
.compare .col.old { background: var(--bg-2); }
.compare .col.new { border-left: 1px solid var(--line); }
.compare h4 { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.compare .old h4 { color: var(--gray-2); }
.compare .new h4 { color: var(--brand); }
.compare ul { list-style: none; margin-top: 14px; }
.compare li { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(18,22,30,.05); font-size: 14.5px; align-items: flex-start; }
.compare .old li { color: var(--gray); }
.compare li:first-of-type { border-top: 0; }
.compare .mk { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; margin-top: 1px; }
.compare .old .mk { background: #E9EAEE; color: var(--gray-2); }
.compare .new .mk { background: var(--brand-tint); color: var(--brand); }

/* ---------- how it works (diagram steps) ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; position: relative; }
.step { position: relative; padding: 26px 24px; background: #fff; border-radius: var(--r); box-shadow: var(--ring); }
.step .num {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--navy); color: #fff;
  font-size: 13px; font-weight: 600; margin-bottom: 16px;
}
.step h3 { font-size: 16.5px; font-weight: 600; color: var(--navy); }
.step p { font-size: 14px; color: var(--gray); margin-top: 7px; line-height: 1.55; }
.step::after {
  content: ""; position: absolute; top: 40px; right: -16px;
  width: 16px; border-top: 1px dashed var(--gray-2);
}
.step:last-child::after { display: none; }

/* ---------- coverage table ---------- */
.panel { background: #fff; border-radius: var(--r); box-shadow: var(--ring); overflow: hidden; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tbl thead th {
  text-align: left; font-size: 11.5px; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--gray);
  padding: 14px 20px; border-bottom: 1px solid var(--line); background: #FBFBFC;
}
.tbl td { padding: 15px 20px; border-bottom: 1px solid var(--bg-2); }
.tbl tbody tr { transition: background-color .15s; }
.tbl tbody tr:hover { background: #FAFBFC; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.st-name { font-weight: 600; color: var(--navy); }
.code {
  display: inline-block; margin-left: 8px;
  font-size: 11px; font-weight: 600; color: var(--gray-2);
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px;
  vertical-align: 1px;
}
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- dark band ---------- */
.dark-band { background: var(--dark); border-radius: 14px; padding: 64px; position: relative; overflow: hidden; }
.dark-band .eyebrow { color: var(--brand-bright); }
.dark-band h2 { color: #fff; font-size: clamp(26px, 3vw, 36px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; max-width: 21ch; margin-top: 14px; }
.dark-band p { color: rgba(255,255,255,.72); font-size: 16px; max-width: 52ch; margin-top: 14px; }
.dark-band .grid-lines {
  position: absolute; inset: 0; pointer-events: none; opacity: .55;
}

/* ---------- dashboard preview + app shell ---------- */
.dash {
  display: grid; grid-template-columns: 210px 1fr;
  background: #fff; border-radius: 12px;
  box-shadow: var(--ring);
  overflow: hidden; min-height: 400px;
}
.dash-side { border-right: 1px solid var(--line); padding: 18px 12px; background: #FBFBFC; }
.di {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: var(--gray);
  padding: 9px 12px; border-radius: 7px; margin-bottom: 2px;
  transition: background-color .15s, color .15s;
}
.di:hover { background: #F1F2F5; color: var(--ink); }
.di.active { background: var(--brand-tint); color: var(--brand); font-weight: 600; }
.dash-main { padding: 24px 28px; }
.dh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.dash-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.dc { background: #fff; border-radius: var(--r); box-shadow: var(--ring); padding: 16px 18px; }
.dc .l { font-size: 12px; color: var(--gray); }
.dc .v { font-size: 26px; font-weight: 600; color: var(--navy); letter-spacing: -0.02em; margin-top: 3px; font-variant-numeric: tabular-nums; }

.app-shell { max-width: 1104px; margin: 40px auto 80px; padding: 0 24px; }

/* ---------- full dashboard page ---------- */
.dpage { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.dnav { border-right: 1px solid var(--line); background: #FBFBFC; padding: 18px 14px; display: flex; flex-direction: column; }
.dnav .brand { padding: 6px 8px 22px; }
.dnav-group { font-family: var(--mono-f); font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: none; color: var(--gray-2); padding: 16px 12px 6px; }
.dnav-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  font-size: 14px; color: var(--gray); background: none; border: 0;
  padding: 9px 12px; border-radius: 7px; margin-bottom: 1px; transition: background-color .15s, color .15s;
}
.dnav-item svg { flex: none; opacity: .8; }
.dnav-item:hover { background: #F0F1F4; color: var(--ink); }
.dnav-item.active { background: var(--brand-tint); color: var(--brand); font-weight: 600; }
.dnav-item.active svg { opacity: 1; }
.dnav-foot { margin-top: auto; padding: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--gray-2); }

.dmain { min-width: 0; }
.dtop { display: flex; align-items: center; gap: 16px; height: 62px; padding: 0 32px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: rgba(255,255,255,.9); backdrop-filter: blur(8px); z-index: 10; }
.dtop .crumb { font-size: 14px; color: var(--gray); }
.dtop .spacer { margin-left: auto; }
.dbody { padding: 32px; max-width: 1100px; }
.dtitle { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--navy); }

.dv { display: none; }
.dv.on { display: block; animation: rise .4s cubic-bezier(.2,.6,.2,1) both; }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 22px 0 30px; }
.kpi { background: #fff; border-radius: var(--r); box-shadow: var(--ring); padding: 18px; }
.kpi .l { font-size: 12px; color: var(--gray); }
.kpi .v { font-size: 30px; font-weight: 600; color: var(--navy); letter-spacing: -0.02em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.kpi .v small { font-size: 15px; color: var(--brand); font-weight: 600; }

.dsection { margin-bottom: 34px; }
.dsection > h3 { font-size: 15px; font-weight: 600; color: var(--navy); margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; }
.dsection > h3 a { font-size: 13px; font-weight: 500; color: var(--brand); }

.doc-list { background: #fff; border-radius: var(--r); box-shadow: var(--ring); overflow: hidden; }
.doc { display: flex; align-items: center; gap: 13px; padding: 14px 18px; border-top: 1px solid var(--bg-2); transition: background-color .15s; }
.doc:first-child { border-top: 0; }
.doc:hover { background: #FAFBFC; }
.doc .ic { flex: none; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand); }
.doc .nm { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.doc .sub { display: block; font-size: 12.5px; color: var(--gray); margin-top: 1px; }
.doc .st { margin-left: auto; }

.mkt-group { font-family: var(--mono-f); font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: none; color: var(--gray); margin: 26px 0 12px; }
.mkt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mkt-card { background: #fff; border-radius: var(--r); box-shadow: var(--ring); padding: 18px; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.mkt-card:hover { box-shadow: var(--ring-strong), var(--shadow-md); transform: translateY(-2px); }
.mkt-card .t { font-size: 14.5px; font-weight: 600; color: var(--navy); }
.mkt-card .d { font-size: 12.5px; color: var(--gray); margin-top: 5px; line-height: 1.5; flex: 1; }
.mkt-card .foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--bg-2); }
.mkt-card .pr { font-size: 13px; font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; }
.mkt-card .ep { font-size: 10px; font-family: ui-monospace, Menlo, monospace; color: var(--gray-2); }
.mkt-add { font-size: 12.5px; font-weight: 600; color: var(--brand); background: var(--brand-tint); border: 0; padding: 5px 11px; border-radius: 6px; transition: background-color .15s; }
.mkt-add:hover { background: #DAE7FF; }

@media (max-width: 900px) {
  .dpage { grid-template-columns: 1fr; }
  .dnav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); align-items: center; padding: 8px; }
  .dnav .brand, .dnav-group, .dnav-foot { display: none; }
  .dnav-item { white-space: nowrap; width: auto; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .mkt { grid-template-columns: 1fr; }
  .dbody { padding: 20px; }
}

/* ---------- order flow (catalog + cart) ---------- */
.order-shell { padding: 34px 0 90px; }
.oflow-steps { display: flex; gap: 8px; align-items: center; margin-bottom: 30px; flex-wrap: wrap; }
.ostep { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--gray-2); font-weight: 500; }
.ostep i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: #EDEEF1; color: var(--gray-2); font-style: normal; transition: background-color .2s, color .2s; }
.ostep::after { content: ""; width: 26px; border-top: 1px solid var(--line); margin: 0 4px; }
.ostep:last-child::after { display: none; }
.ostep.on { color: var(--navy); }
.ostep.on i { background: var(--navy); color: #fff; }
.ostep.done i { background: var(--brand-tint); color: var(--brand); }

.ostage { display: none; }
.ostage.on { display: block; animation: rise .35s cubic-bezier(.2,.6,.2,1) both; }

.order-grid { display: grid; grid-template-columns: 1fr 336px; gap: 32px; align-items: start; }

/* catalog */
.cat-group { font-family: var(--mono-f); font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: none; color: var(--gray); margin: 26px 0 12px; }
.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.cat-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px; display: flex; flex-direction: column; transition: border-color .2s, box-shadow .2s;
}
.cat-card.in-cart { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.cat-card .t { font-size: 14.5px; font-weight: 600; color: var(--navy); }
.cat-card .d { font-size: 12.5px; color: var(--gray); margin-top: 5px; line-height: 1.5; flex: 1; }
.cat-card .foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.cat-card .pr { font-size: 13px; font-weight: 600; color: var(--navy); }
.cat-add {
  font-size: 12.5px; font-weight: 600; color: var(--brand); background: var(--brand-tint);
  border: 0; padding: 6px 13px; border-radius: 6px; transition: background-color .15s;
}
.cat-add:hover { background: #DAE7FF; }
.cat-add.added { background: var(--brand); color: #fff; }

/* cart */
.ocart { position: sticky; top: 84px; }
.ocart-inner { background: #fff; border-radius: var(--r); box-shadow: var(--ring); padding: 20px; }
.ocart-head { display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 600; color: var(--navy); margin-bottom: 14px; }
.ocart-lines { min-height: 40px; }
.cart-empty { font-size: 13px; color: var(--gray-2); padding: 10px 0; }
.cart-line { display: flex; align-items: flex-start; gap: 8px; padding: 11px 0; border-top: 1px solid var(--bg-2); font-size: 13.5px; }
.cart-line:first-child { border-top: 0; }
.cart-line .cl-t { color: var(--ink); font-weight: 500; }
.cart-line .cl-p { margin-left: auto; color: var(--navy); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cart-line .cl-x { border: 0; background: none; color: var(--gray-2); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; transition: color .15s; }
.cart-line .cl-x:hover { color: var(--amber); }
.ocart-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); margin-top: 12px; padding-top: 14px; font-weight: 600; color: var(--navy); }
.ocart-total #cart-total { font-size: 20px; letter-spacing: -0.01em; }

/* payment note (Suby) */
.pay-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 13px 15px; background: var(--brand-tint); border-radius: var(--r); font-size: 13px; color: var(--ink); line-height: 1.5; }
.pay-note svg { flex: none; color: var(--brand); margin-top: 1px; }
.pay-note b { color: var(--brand); }

/* review */
#review-panel .rv-line { display: flex; justify-content: space-between; padding: 14px 20px; border-top: 1px solid var(--bg-2); font-size: 14.5px; }
#review-panel .rv-line:first-child { border-top: 0; }
#review-panel .rv-t { color: var(--ink); font-weight: 600; }
#review-panel .rv-sub { color: var(--gray); font-size: 12.5px; margin-top: 2px; }
#review-panel .rv-p { color: var(--navy); font-weight: 600; font-variant-numeric: tabular-nums; }
#review-panel .rv-total { display: flex; justify-content: space-between; padding: 16px 20px; background: var(--bg-2); font-weight: 600; color: var(--navy); }
#review-panel .rv-total b { font-size: 18px; }

@media (max-width: 900px) {
  .order-grid { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: 1fr; }
  .ocart { position: static; }
}

/* ---------- order wizard ---------- */
.wiz-steps { display: flex; gap: 8px; margin: 26px 0; }
.ws { flex: 1; height: 3px; border-radius: 3px; background: var(--line); transition: background-color .3s; }
.ws.on { background: var(--brand); }
.opt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.opt {
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px; cursor: pointer; background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.opt:hover { border-color: var(--gray-2); }
.opt.on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.opt .ti { font-weight: 600; font-size: 14.5px; color: var(--navy); }
.opt .de { font-size: 12.5px; color: var(--gray); margin-top: 3px; }
.opt .pr { font-size: 13.5px; font-weight: 600; color: var(--brand); margin-top: 10px; font-variant-numeric: tabular-nums; }
.field { margin: 14px 0; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.field input, .field select {
  width: 100%; padding: 11px 12px; font: inherit; font-size: 14.5px;
  border: 1px solid var(--line); border-radius: var(--r); background: #fff;
  color: var(--ink); outline: none; transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,97,255,.14); }
.wiz-actions { display: flex; justify-content: space-between; margin-top: 26px; }
.summary { background: var(--bg-2); border-radius: var(--r); padding: 16px 18px; font-size: 14px; }
.summary .row { display: flex; justify-content: space-between; padding: 6px 0; }
.summary .row.total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; font-weight: 600; color: var(--navy); }

/* ---------- faq ---------- */
.faq { max-width: 720px; margin-top: 36px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between;
  padding: 20px 0; font-size: 16.5px; font-weight: 600; color: var(--navy);
  cursor: pointer; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq .pm { color: var(--gray-2); font-weight: 400; font-size: 20px; transition: transform .25s; }
.faq details[open] .pm { transform: rotate(45deg); }
.faq .ans { padding: 0 0 20px; font-size: 15px; color: var(--gray); line-height: 1.6; max-width: 60ch; }

/* ---------- cta ---------- */
.cta {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  background: var(--bg-2); border-radius: 14px; padding: 48px 56px;
}
.cta h2 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; letter-spacing: -0.02em; color: var(--navy); }
.cta p { color: var(--gray); margin-top: 8px; font-size: 15.5px; }

/* ---------- footer ---------- */
.footer { background: var(--dark); color: rgba(255,255,255,.66); margin-top: 96px; }
.footer .wrap { padding-top: 56px; padding-bottom: 32px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.footer .brand { color: #fff; }
.foot-note { font-size: 13px; line-height: 1.6; margin-top: 14px; max-width: 34ch; color: rgba(255,255,255,.5); }
.foot-col h4 { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.45); margin-bottom: 12px; }
/* :not(.brand) — the footer wordmark is also an <a> here, and it must stay
   an inline-flex lockup instead of stacking the mark above the name. */
.foot-col a:not(.brand) { display: block; font-size: 14px; padding: 5px 0; color: rgba(255,255,255,.72); transition: color .2s; }
.foot-col a:not(.brand):hover { color: #fff; }
.foot-bottom {
  display: flex; justify-content: space-between; font-size: 12.5px; color: rgba(255,255,255,.4);
  border-top: 1px solid rgba(255,255,255,.1); margin-top: 44px; padding-top: 22px;
}

/* ---------- scroll reveal ---------- */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .55s cubic-bezier(.2,.6,.2,1), transform .55s cubic-bezier(.2,.6,.2,1); }
.rv.in { opacity: 1; transform: none; }
.rv[data-d="1"] { transition-delay: .06s; }
.rv[data-d="2"] { transition-delay: .12s; }
.rv[data-d="3"] { transition-delay: .18s; }
@media (prefers-reduced-motion: reduce) {
  .rv, .hero [data-rise] { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
}
/* safety: if animations can't run (frozen webviews), force final state */
.anim-done .hero [data-rise], .anim-done .rv { opacity: 1 !important; transform: none !important; }

/* ---------- responsive ---------- */
.hidden-sm { }
@media (max-width: 960px) {
  /* minmax(0,1fr), not 1fr: a plain fr track floors at the item's min-content
     width, so one wide child would push the whole page into sideways scroll. */
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat { padding-left: 0; border-left: 0; }
  .aud-grid, .compare, .steps { grid-template-columns: 1fr; }
  .step::after { display: none; }
  .compare .col.new { border-left: 0; border-top: 1px solid var(--line); }
  .dash { grid-template-columns: 1fr; }
  .dash-side { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .cta { flex-direction: column; align-items: flex-start; padding: 36px 28px; }
  .dark-band { padding: 40px 28px; }
  .nav-links, .hidden-sm { display: none; }
  .opt-grid { grid-template-columns: 1fr; }
  /* The coverage table is wider than a phone. Without this it is silently
     clipped by .panel's overflow:hidden, so let it scroll on its own axis. */
  .panel { overflow-x: auto; }
  .tbl { min-width: 520px; }

  .aud-grid { gap: 40px; }
  .section { padding: 64px 0; }
  .hero { padding: 40px 0 56px; }
  .hero-grid { gap: 36px; }
}

/* ---------- phone: the two data blocks restack ----------
   A five-column price list and a three-column definition list cannot fit
   375px. Rather than let them scroll sideways or shrink to unreadable, each
   row becomes label/value pairs, which is what the columns meant anyway. */
@media (max-width: 760px) {
  .ptable { border-top: 0; }
  .ptable-head { display: none; }
  .prow {
    grid-template-columns: 1fr auto; gap: 0 16px;
    padding: 18px 0; border-bottom: 1px solid var(--line);
  }
  .ps { grid-column: 1 / -1; margin-bottom: 8px; }
  .prow .num {
    grid-column: 1 / -1;
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 5px 0; font-size: 14px;
  }
  /* The column header travels with the value instead of sitting in a head row. */
  .prow .num::before {
    content: attr(data-l);
    font-family: var(--sans); font-size: 13px; font-weight: 400;
    color: var(--gray); letter-spacing: 0;
  }
  .pnote { margin-top: 8px; }

  .dfrow { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
  .dfrow .dfp { text-align: left; }
}