/* Site-wide system for the inner pages (owner 2026-10-19, "Apple × Linear"): body.sys. The site's tokens are already dark
   (ds.css); this adds the system: bands alternating #000 / #111114, General Sans headings at the system scale (H1
   clamp(44px, 6vw, 96px) / 600 / -0.03em, section heads clamp(32px, 4vw, 64px)), body 19 px, two-tone headings, statement
   lines, 28 px faux-glass cards (no blur), and each page's scene. Real blur stays on the nav only (the pill is faux). */
@font-face { font-family: "General Sans"; src: url(/revenue/assets/fonts/GeneralSans-Variable.49d3fbd2f1.woff2) format("woff2"); font-weight: 200 700; font-style: normal; font-display: swap; }
.sys { --sys-font: "General Sans", "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --sys-grey: #86868b; --sys-card: linear-gradient(115deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,.03) 100%), linear-gradient(160deg, rgba(44,40,64,.7) 0%, rgba(22,21,32,.86) 45%, rgba(14,13,20,.92) 100%);
  --sys-line: rgba(255,255,255,.12); --sys-r: 28px; --sys-pad: clamp(56px, 7vw, 112px); background: #000; }
.sys main { background: #000; }
.sys main > section { --band: #000; background: var(--band); border: 0; }
.sys main > section:nth-of-type(even) { --band: #111114; }
.sys main > section::before { content: none; }
.sys .page-hero { padding-block: clamp(56px, 8vw, 128px) clamp(40px, 6vw, 96px); text-align: left; }
.sys .page-hero h1, .sys .sys-h1 { font: 600 clamp(44px, 6vw, 96px)/1.02 var(--sys-font); letter-spacing: -0.03em; color: #fff; max-width: 18ch; text-wrap: balance; margin: 12px 0 0; }
.sys .sec-head h2, .sys .sys-h2 { font: 600 clamp(32px, 4vw, 64px)/1.05 var(--sys-font); letter-spacing: -0.03em; color: #fff; max-width: 20ch; text-wrap: balance; }
.sys .tt-b { color: var(--sys-grey); }
.sys .page-hero .lede, .sys .sec-head p, .sys .sys-lede { font-size: 19px; line-height: 1.55; color: #a1a1aa; max-width: 40em; }
.sys .eyebrow { color: #a78bfa; font-family: var(--sys-font); letter-spacing: normal; text-transform: none; }
.sys .sys-w { display: inline-block; }
.sys .sys-say { font: 600 clamp(28px, 3.6vw, 56px)/1.12 var(--sys-font); letter-spacing: -0.025em; color: #fff; max-width: 24ch; text-wrap: balance; margin: 0; }
.sys .sys-say-sec { padding-block: var(--sys-pad); }
.sys .sys-say-sec .small { margin-top: 20px; max-width: 60ch; color: #a1a1aa; }
.sys .sys-head { margin: 0 0 clamp(28px, 4vw, 48px); }
/* faux-glass cards, 28 px */
.sys .pc, .sys .hw-vis > *, .sys .sys-device, .sys .sec-row, .sys .surface-2, .sys .pf, .sys .calc, .sys .sys-table-card { border-radius: var(--sys-r); }
.sys .pc { background: var(--sys-card); border: 1px solid var(--sys-line); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(167,139,250,.24), 0 0 0 1px rgba(139,92,246,.08), 0 24px 48px -28px rgba(0,0,0,.9); -webkit-backdrop-filter: none; backdrop-filter: none; }
.sys .pc.pc-hero { border-color: rgba(167,139,250,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 80px rgba(139,92,246,.12), 0 0 0 1px rgba(139,92,246,.2), 0 40px 100px -40px rgba(139,92,246,.55); }
.sys .pc-amt, .sys .num { font-family: var(--sys-font); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.sys .pc-amt { font-weight: 600; letter-spacing: -0.03em; }

/* ── /pricing: the stage ── */
.sys .sys-stage .sys-frame { position: relative; padding-block: var(--sys-pad); overflow: clip; perspective: 1600px; }
.sys .sys-stage .pc-grid { position: relative; z-index: 1; }
.sys .sys-floor { position: absolute; left: 50%; bottom: 6%; width: min(1100px, 92%); height: 220px; transform: translateX(-50%); border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(139,92,246,.42), rgba(91,33,182,.18) 55%, rgba(76,29,149,0) 100%); opacity: var(--fo, .9); }
/* the comparison table: sticky header under the docked pill */
.sys .sys-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 16px; }
.sys .sys-table th, .sys .sys-table td { padding: 16px 18px; border-top: 1px solid rgba(255,255,255,.08); text-align: left; vertical-align: top; color: #d4d4d8; white-space: normal; }
.sys .sys-table thead th { position: sticky; top: 76px; z-index: 2; background: #0c0c10; border-top: 0; border-bottom: 1px solid rgba(255,255,255,.14); color: #fff; font: 600 17px/1.25 var(--sys-font); }
.sys .sys-table thead th small { display: block; margin-top: 4px; font: 500 15px/1.2 var(--sys-font); color: #a78bfa; font-variant-numeric: tabular-nums; }
.sys .sys-table tbody th { color: #fff; font-weight: 500; width: 34%; }
.sys .sys-table td { text-align: center; } .sys .sys-table thead th:not(:first-child) { text-align: center; }
.sys .sys-table .yes { color: #a78bfa; font-weight: 600; } .sys .sys-table .no { color: #52525b; }
.sys .sys-table tr.sys-grp th { padding-top: 28px; color: #a78bfa; font: 600 13px/1 var(--sys-font);   border-top: 0; }
@media (max-width: 640px) { .sys .sys-table { font-size: 15px; } .sys .sys-table th, .sys .sys-table td { padding: 12px 8px; } .sys .sys-table thead th { top: 68px; font-size: 15px; } .sys .sys-table thead th small { font-size: 13px; } .sys .sys-table tbody th { width: 40%; } }

/* ── /how-it-works: the pinned timeline (desktop: the device stays while the steps scroll; phones: each step keeps its own UI) ── */
.sys .sys-tl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.sys .sys-device { display: none; }
@media (min-width: 1024px) {
  .sys .sys-tl { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; }
  .sys .sys-tl .hw-steps { grid-column: 1; }
  .sys .sys-tl .hw-step { display: block; min-height: 78vh; padding-block: 12vh; border: 0; }
  .sys .sys-tl .hw-step .hw-vis { display: none; }
  .sys .sys-device { display: block; grid-column: 2; grid-row: 1; position: sticky; top: 96px; height: min(72vh, 640px); margin-top: 12vh; background: var(--sys-card); border: 1px solid var(--sys-line); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(167,139,250,.24), 0 40px 100px -40px rgba(139,92,246,.45); overflow: hidden; }
  .sys .sys-device-bar { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; border-bottom: 1px solid rgba(255,255,255,.08); font: 500 13px/1 var(--sys-font); color: #a1a1aa; }
  .sys .sys-device-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.14); }
  .sys .sys-device-bar b { color: #fff; font-weight: 500; }
  .sys .sys-screen { position: absolute; inset: 44px 0 0; padding: 28px; display: grid; align-content: center; opacity: 0; transform: translateY(16px) scale(.985); transition: opacity .45s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1); }
  .sys .sys-screen.is-on { opacity: 1; transform: none; }
  .sys .sys-screen > * { max-width: 100%; }
  .sys .sys-steps-dots { position: absolute; right: 18px; top: 14px; display: flex; gap: 6px; } .sys .sys-steps-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.2); transition: background .3s; } .sys .sys-steps-dots i.is-on { background: #a78bfa; }
}
html:not(.sys-js) .sys .sys-screen:first-of-type { opacity: 1; transform: none; }   /* no JS: the first state shows */
.sys .hw-step h2 { font: 600 clamp(28px, 3vw, 44px)/1.08 var(--sys-font); letter-spacing: -0.025em; color: #fff; }
.sys .hw-step p { font-size: 19px; line-height: 1.55; color: #a1a1aa; }
.sys .hw-n { color: #a78bfa; }

/* ── /security: the exploded layers ── */
.sys .sys-explode { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
.sys .sys-xstack-wrap { position: relative; height: 340px; perspective: 1400px; }
.sys .sys-xstack { position: absolute; left: 50%; top: 50%; width: min(460px, 86%); height: 100px; transform: translate(-50%, -50%) rotateX(var(--rx, 0deg)) rotateZ(var(--rz, 0deg)); transform-style: preserve-3d; }
.sys .sys-xslab { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 20px; background: var(--sys-card); border: 1px solid var(--sys-line); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 30px 60px -30px rgba(0,0,0,.9); transform: translateZ(calc(var(--i) * var(--sep, 6px))); font: 500 17px/1 var(--sys-font); color: #fff; }
.sys .sys-xslab.is-on { border-color: rgba(167,139,250,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 1px rgba(139,92,246,.3), 0 30px 80px -30px rgba(139,92,246,.6); }
.sys .sec-flow { counter-reset: none; }
.sys .sec-flow > li { border-radius: 20px; transition: background .3s, border-color .3s; }
.sys .sec-flow > li.is-on { background: rgba(139,92,246,.08); border-color: rgba(167,139,250,.35); }
@media (min-width: 1024px) { .sys .sys-explode { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; } .sys .sys-xstack-wrap { height: 520px; } .sys .sys-xstack { height: 120px; } .sys .sys-xslab { font-size: 20px; } }
/* legal and long-form rows stay calm: system type and bands only */
.sys .sec-row h2 { font: 600 clamp(22px, 2.2vw, 28px)/1.2 var(--sys-font); letter-spacing: -0.015em; }
/* the four layers read as one column beside their stack */
.sys .sys-explode .sec-flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.sys .sys-explode .sec-flow > li { padding: 20px 22px; }
/* phones: the comparison table fits the screen (fixed columns, cells wrap) */
@media (max-width: 640px) { .sys .sys-table { table-layout: fixed; } .sys .sys-table th, .sys .sys-table td { overflow-wrap: anywhere; hyphens: auto; } .sys .sys-table tbody th { width: 31%; } .sys .sys-table thead th:first-child { width: 31%; } .sys .sys-table th, .sys .sys-table td { padding: 10px 5px; font-size: 14px; } .sys .sys-table thead th { font-size: 14px; } .sys .sys-table thead th small { font-size: 12px; } }
.sys .sys-xslab:not(:last-child) { color: rgba(255,255,255,var(--lt, 0)); }   /* merged: only the top slab is labelled */
@media (min-width: 1024px) { .sys .sys-xstack-wrap { position: sticky; top: 120px; align-self: start; } }
/* phones: words wrap whole (never mid-word), in the system face, not the site's uppercase table labels; the assessment
   header shows its last word, the rest stays in the accessible name */
@media (max-width: 640px) {
  .sys .sys-table th, .sys .sys-table td { overflow-wrap: normal; word-break: normal; hyphens: manual; }
  .sys .sys-table th { font-family: var(--sys-font); text-transform: none; letter-spacing: 0; }
  .sys .sys-table tbody th { width: 34%; font-size: 14px; line-height: 1.3; }
  .sys .sys-table thead th:first-child { width: 34%; }
  .sys .sys-table td { font-size: 14px; line-height: 1.35; }
  .sys .sys-table .sys-lead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 640px) {
  .sys .sys-table thead th { font-size: 13.5px; letter-spacing: 0; padding-inline: 3px; }
  .sys .sys-table thead th small { font-size: 12.5px; letter-spacing: 0; }
  .sys .sys-table tbody th, .sys .sys-table thead th:first-child { width: 30%; }
}
/* the comparison header sticks flush under the pill (12 + 52 px; phones 8 + 52) in the band's own solid colour, and the same
   colour fills the strip above it to the top of the screen, so no row shows above or through it (owner 2026-10-19) */
.sys .sys-table thead th { top: 64px; z-index: 5; background: var(--band, #000); box-shadow: inset 0 -1px 0 rgba(255,255,255,.14); border-bottom: 0; }
.sys .sys-table thead th::before { content: none; }
.sys .sys-table.is-stuck thead th::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 64px; background: var(--band, #000); pointer-events: none; }
@media (max-width: 640px) { .sys .sys-table thead th { top: 60px; } .sys .sys-table thead th::before { height: 60px; } }
/* the exploded stack stays inside its own box at every scroll position: the slabs rise toward the viewer as they separate, so
   the stack's centre moves down with the separation (≈ 1.25 × --sep) and is back in the middle once collapsed */
.sys .sys-xstack { top: calc(50% + var(--sep, 6px) * 1.25); }
/* the last step holds as long as the others: without room after it the pin ended ~400 px into "verify" (others ~720) */
@media (min-width: 1024px) { .sys .sys-tl .hw-step:last-child { min-height: 114vh; padding-bottom: 36vh; } }

/* ── batch (b) part 2: pages that join the system as they are (about, partners, start, check, legal) ── */
.sys main :is(h1, h2, h3, h4) { font-family: var(--sys-font); }
/* section headings at the system scale; headings inside cards, forms and the check widget keep their own size */
.sys:not(.sys-doc):not(.sys-sr) main > section h2:not(:is(.surface-2, .surface-3, .sf-panel, .card, .chk-card, .chk-step, .chk-how, .chk-cta, .sf-done, .sf-step-head, .pt-model, .pt-price, .ab-not) h2):not(.sf-step-head h2) {
  font-weight: 600; font-size: clamp(32px, 4vw, 56px); line-height: 1.05; letter-spacing: -0.03em; color: #fff; text-wrap: balance; }
/* faux-glass cards: large panels 28 px, small cards 20 px */
.sys :is(.surface-2, .surface-3, .sf-panel, .pt-model, .pt-price) { background: var(--sys-card); border: 1px solid var(--sys-line); border-radius: var(--sys-r);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(167,139,250,.18), 0 24px 48px -28px rgba(0,0,0,.9); }
.sys :is(a.card, .pt-flow > li, .chk-card) { background: var(--sys-card); border: 1px solid var(--sys-line); border-radius: 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 18px 36px -24px rgba(0,0,0,.9); }
.sys :is(a.card, .pt-flow > li).is-you, .sys .pt-flow > li.is-you { border-color: rgba(167,139,250,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px rgba(139,92,246,.18), 0 30px 70px -36px rgba(139,92,246,.6); }
/* legal documents: the system face at a reading scale, never the marketing H1 */
.sys-doc main h1 { font: 600 clamp(32px, 4vw, 52px)/1.08 var(--sys-font); letter-spacing: -0.025em; color: #fff; }
.sys-doc main h2 { letter-spacing: -0.015em; }

/* ── /sample-report (.sys-sr): Linear-style, full bleed. One near-black app surface edge to edge; the report sections list
   is a full-height rail with a hairline edge; findings are flat panels (12 px, 1 px hairline, no glow); records are dense
   rows. Every figure, citation and status is the report's own (sample.mjs); this only restyles it. ── */
.sys-sr { --lin-bg: #08090a; --lin-rail: #0b0c0d; --lin-panel: #0f1012; --lin-line: rgba(255,255,255,.07); --lin-line-2: rgba(255,255,255,.11); --lin-2: #8a8f98; }
.sys-sr main, .sys-sr main > section, .sys-sr main > section:nth-of-type(even) { --band: var(--lin-bg); background: var(--lin-bg); }
.sys-sr .sr-hero > .wrap, .sys-sr .sr-exports > .wrap { max-width: none; padding-inline: clamp(20px, 4vw, 72px); }
.sys-sr .sr-hero { padding-block: clamp(40px, 5vw, 72px) 40px; border-bottom: 1px solid var(--lin-line); }
.sys-sr .sr-hero h1 { font: 600 clamp(32px, 3.6vw, 48px)/1.08 var(--sys-font); letter-spacing: -0.025em; max-width: 24ch; }
.sys-sr .sr-exports { border-bottom: 1px solid var(--lin-line); }
.sys-sr .sr-body > .wrap.sr-layout { max-width: none; padding: 0; }
.sys-sr .sr-main { padding: 0 var(--gutter, 20px) 72px; }
@media (min-width: 1100px) {
  .sys-sr .sr-layout { grid-template-columns: 264px minmax(0, 1fr); gap: 0; }
  .sys-sr .sr-side { border-right: 1px solid var(--lin-line); background: var(--lin-rail); }
  .sys-sr .sr-toc { top: 64px; height: calc(100vh - 64px); overflow: auto; padding: 32px 16px 32px 20px; }
  .sys-sr .sr-main { padding: 0 clamp(32px, 4vw, 72px) 96px; max-width: 1240px; }
}
.sys-sr .sr-toc-h { color: var(--lin-2); font-size: 13px; margin-bottom: 10px; padding-left: 10px; }
.sys-sr .sr-toc ol a { min-height: 34px; padding: 6px 10px; border: 0; border-radius: 6px; font-size: 14px; color: #d0d3d8; }
.sys-sr .sr-toc ol a:hover { background: rgba(255,255,255,.045) !important; color: #fff; }
.sys-sr .sr-toc-pdf { display: inline-block; margin: 16px 0 0 10px; font-size: 14px; }
.sys-sr .sr-sec { padding-top: 56px; }
.sys-sr .sr-sec + .sr-sec { margin-top: 56px; border-top-color: var(--lin-line); }
.sys-sr .sr-sec-head h2 { font: 600 clamp(24px, 2.4vw, 32px)/1.15 var(--sys-font); letter-spacing: -0.02em; color: #fff; max-width: 40ch; }
.sys-sr .sr-sec-kicker { color: var(--lin-2); font-size: 13px; }
.sys-sr .sr-h3 { font: 600 15px/1.3 var(--sys-font); color: #e6e7ea; letter-spacing: -0.005em; }
.sys-sr .sr-pillars > li { background: none; border: 0; box-shadow: none; }
.sys-sr :is(.sr-lead, .sr-stats, .sr-pillars > li > a, .bucket, .sr-cannot, .sr-ev > li, .sr-statement) { background: var(--lin-panel); border: 1px solid var(--lin-line); border-radius: 12px; box-shadow: none; }
.sys-sr .sr-recs { border-top-color: var(--lin-line-2); }
.sys-sr .sr-recs-head { border-bottom-color: var(--lin-line); color: var(--lin-2); }
.sys-sr .sr-rec { border-bottom-color: var(--lin-line); }
.sys-sr .sr-rec > summary:hover { background: rgba(255,255,255,.03); }
.sys-sr .readout { border-top: 1px solid var(--lin-line); }
.sys-sr .sr-pillars > li.is-cannot > a { border-style: dashed; background: transparent; }
.sys-sr .sr-jump { margin: 0; padding: 0 var(--gutter, 20px); background: rgba(8,9,10,.92); border-bottom-color: var(--lin-line); }