/* Pentiv design tokens: one system for the public pages, the workspace, the desks and administration.
   Warm paper and ink, one cobalt accent for "you can act here", amber kept for deadlines, and status colours that always
   travel with words. A book serif for page titles, the system UI face for work, tabular figures for numbers. System
   fonts load nothing, so there is no layout shift and the content security policy stays on this origin.
   Contrast: every ink and status colour is at least 4.5:1 on --surface, --surface-raised and --side (test/tokens.test.ts). */
:root {
  color-scheme: light;
  --surface: #f6f5f1;
  --surface-raised: #ffffff;
  --surface-sunk: #eeece6;
  --side: #efede7;
  --ink: #15181c;
  --ink-2: #434951;
  --ink-3: #61676f;
  --line: #e1ded5;
  --line-strong: #c9c4b7;
  --accent: #2b47c2;
  --accent-ink: #ffffff;
  --accent-soft: #e9edfb;
  --accent-strong: #1f3796;
  --signal: #8f4c00;
  --signal-soft: #fbefdb;
  --ok: #1b6741;
  --ok-soft: #e2f1e8;
  --warn: #7f5300;
  --warn-soft: #f8edd3;
  --deny: #a3241d;
  --deny-soft: #fae5e2;
  --sev-critical: #a3241d;
  --sev-high: #8f4c00;
  --sev-medium: #475569;
  --rail: var(--side);
  --rail-ink: var(--ink);
  --rail-ink-2: var(--ink-2);
  --rail-mark: var(--accent);
  --shadow-1: 0 1px 2px #15181c0f, 0 0 0 1px #15181c05;
  --shadow-2: 0 18px 50px -18px #15181c40, 0 3px 10px #15181c12;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface: #111316;
    --surface-raised: #181b20;
    --surface-sunk: #0c0e11;
    --side: #14161a;
    --ink: #eceef1;
    --ink-2: #b5bbc4;
    --ink-3: #959ca6;
    --line: #262a31;
    --line-strong: #3a3f48;
    --accent: #9fb2ff;
    --accent-ink: #0c1230;
    --accent-soft: #1b2342;
    --accent-strong: #c3cfff;
    --signal: #f0b45e;
    --signal-soft: #2e2210;
    --ok: #8fd6ad;
    --ok-soft: #14261c;
    --warn: #e6bd6a;
    --warn-soft: #2c2410;
    --deny: #ff9e95;
    --deny-soft: #351a19;
    --sev-critical: #ff9e95;
    --sev-high: #f0b45e;
    --sev-medium: #a9b6c7;
    --shadow-1: 0 0 0 1px #ffffff08;
    --shadow-2: 0 22px 60px -20px #000000c0, 0 0 0 1px #ffffff0d;
  }
}
/* Screens only: paper always gets the light tokens, so dark ink never prints on white. */
@media screen {
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #111316;
  --surface-raised: #181b20;
  --surface-sunk: #0c0e11;
  --side: #14161a;
  --ink: #eceef1;
  --ink-2: #b5bbc4;
  --ink-3: #959ca6;
  --line: #262a31;
  --line-strong: #3a3f48;
  --accent: #9fb2ff;
  --accent-ink: #0c1230;
  --accent-soft: #1b2342;
  --accent-strong: #c3cfff;
  --signal: #f0b45e;
  --signal-soft: #2e2210;
  --ok: #8fd6ad;
  --ok-soft: #14261c;
  --warn: #e6bd6a;
  --warn-soft: #2c2410;
  --deny: #ff9e95;
  --deny-soft: #351a19;
  --sev-critical: #ff9e95;
  --sev-high: #f0b45e;
  --sev-medium: #a9b6c7;
  --shadow-1: 0 0 0 1px #ffffff08;
  --shadow-2: 0 22px 60px -20px #000000c0, 0 0 0 1px #ffffff0d;
}
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mark { width: 26px; height: 26px; flex: none; display: block; }
.mark-bg { fill: var(--accent); }
.mark-fg { fill: none; stroke: var(--accent-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
/* The public site: an editorial front door on ruled paper. The ruled lines are the signature motif, a ledger page. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font: 16px/1.6 var(--font-ui); color: var(--ink); background: var(--surface);
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, color-mix(in srgb, var(--line) 30%, transparent) 31px 32px);
  background-size: 100% 32px;
}
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-strong); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.skip-link { position: absolute; left: 12px; top: -60px; padding: 8px 14px; background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--radius); z-index: 10; }
.skip-link:focus { top: 12px; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px clamp(20px, 5vw, 64px); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 600 19px/1 var(--font-display); letter-spacing: -.005em; }
.brand:hover { color: var(--ink); }
.brand em { font-style: italic; font-weight: 400; color: var(--ink-2); }
.brand-small { font-size: 16px; }
.brand-small .mark { width: 22px; height: 22px; }
.top-nav { display: flex; align-items: center; gap: clamp(10px, 2vw, 22px); }
.top-nav form { margin: 0; }
.top-link, .link-button { font: 500 15px/1.4 var(--font-ui); color: var(--ink-2); text-decoration: none; background: none; border: 0; padding: 8px 2px; cursor: pointer; }
.top-link:hover, .link-button:hover { color: var(--ink); text-decoration: underline; }

main { flex: 1; width: 100%; }
.main-narrow { max-width: 720px; margin: 0 auto; padding: clamp(24px, 6vw, 72px) 24px; }
.main-wide { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }

.eyebrow { margin: 0 0 18px; font: 650 12px/1.3 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; padding: clamp(32px, 7vw, 96px) 0 clamp(48px, 8vw, 112px); }
.hero h1 { margin: 0 0 26px; font: 400 clamp(40px, 6.2vw, 76px)/1.03 var(--font-display); letter-spacing: -.024em; text-wrap: balance; }
.hero h1 em { color: var(--accent); }
.lede { margin: 0; max-width: 58ch; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }

.signin-card { padding: 32px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
.signin-card h2 { margin: 0 0 20px; font: 400 25px/1.2 var(--font-display); letter-spacing: -.01em; }
.signin-action { margin-bottom: 20px; }
.signin-ended { margin: -6px 0 18px; padding: 12px 14px; font-size: 14px; line-height: 1.5; color: var(--ink); background: var(--warn-soft); border-radius: var(--radius); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 10px 20px; border-radius: 999px; font: 600 15px/1.2 var(--font-ui); text-decoration: none; border: 1px solid transparent; transition: background-color .15s, border-color .15s, box-shadow .15s; }
.button-primary { background: var(--accent); color: var(--accent-ink); }
.signin-action .button { width: 100%; }
.button-small { min-height: 38px; padding: 8px 16px; font-size: 14px; background: var(--accent); color: var(--accent-ink); white-space: nowrap; }
.button-small:hover { background: var(--accent-strong); color: var(--accent-ink); }
.button-quiet { color: var(--ink); border-color: var(--line-strong); background: var(--surface-raised); }
.button-quiet:hover { color: var(--ink); border-color: var(--ink-3); }
.button-primary:hover { background: var(--accent-strong); color: var(--accent-ink); }
.button-google { width: 100%; background: var(--surface-raised); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.button-google:hover { color: var(--ink); border-color: var(--ink-3); box-shadow: var(--shadow-2); }
.g { width: 18px; height: 18px; flex: none; }
.invite { margin: 0; padding: 14px 16px; font-size: 14px; line-height: 1.5; color: var(--ink-2); background: var(--accent-soft); border-radius: var(--radius); }
.invite strong { display: block; color: var(--ink); }
.note { margin: 0; color: var(--ink-2); }

.section-title { margin: 0 0 clamp(24px, 4vw, 44px); max-width: 26ch; font: 400 clamp(29px, 3.7vw, 44px)/1.1 var(--font-display); letter-spacing: -.018em; text-wrap: balance; }
.ledger { padding: clamp(40px, 6vw, 80px) 0; border-top: 1px solid var(--line-strong); }
.ledger-row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 3.2fr); gap: 16px clamp(24px, 4vw, 56px); padding: 30px 0; border-top: 1px solid var(--line); }
.ledger-row:first-child { border-top: 0; padding-top: 0; }
.ledger-index { margin: 3px 0 0; font: italic 400 21px/1.3 var(--font-display); color: var(--accent); }
.ledger-row h3 { margin: 0 0 8px; font: 600 clamp(18px, 1.8vw, 21px)/1.3 var(--font-ui); letter-spacing: -.008em; }
.ledger-row p { margin: 0; max-width: 66ch; color: var(--ink-2); }

.limits { margin: 0 calc(-1 * clamp(20px, 5vw, 64px)); padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 64px); background: var(--rail); color: var(--rail-ink); }
.limits-inner { max-width: 1112px; margin: 0 auto; }
.limit-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px clamp(32px, 5vw, 72px); }
.limit-list li { color: var(--rail-ink-2); padding-top: 18px; border-top: 1px solid #ffffff26; }
.limit-list strong { display: block; margin-bottom: 6px; color: var(--rail-ink); font: 400 22px/1.25 var(--font-display); }

.foot { background: var(--surface); border-top: 1px solid var(--line); }
.foot-inner { max-width: 1240px; margin: 0 auto; padding: 26px clamp(20px, 5vw, 64px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; font-size: 14px; color: var(--ink-3); }
.foot nav { display: flex; gap: 18px; }
.foot p { margin: 0 0 0 auto; }

.panel { padding: clamp(24px, 4vw, 40px); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
.panel h1 { margin: 0 0 12px; font: 400 clamp(28px, 4vw, 38px)/1.14 var(--font-display); letter-spacing: -.015em; }
.actions { margin-top: 24px; max-width: 260px; }
.fine { margin: 24px 0 0; font-size: 14px; color: var(--ink-3); }

.prose { padding: clamp(24px, 4vw, 44px); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.prose h1 { margin: 0 0 14px; font: 400 clamp(32px, 4.6vw, 46px)/1.1 var(--font-display); letter-spacing: -.018em; }
.prose h2 { margin: 34px 0 8px; font: 650 17px/1.3 var(--font-ui); }
.prose p { margin: 0 0 12px; color: var(--ink-2); }
.prose .lede { margin-bottom: 12px; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding-top: 18px; }
  .ledger-row { grid-template-columns: 1fr; padding: 24px 0; }
  .limit-list { grid-template-columns: 1fr; gap: 24px; }
  .foot p { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 420px) { .signin-card { padding: 22px; } }

/* Sign-in assurances: three plain facts under the invitation note. */
.assurances { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.assurances li { position: relative; padding-left: 24px; }

/* The workspace schematic: shapes and desk names only, drawn in the site's own tokens so it follows the theme. */
.product-figure { margin: 0 0 clamp(48px, 8vw, 96px); }
.pf-frame {
  display: grid; grid-template-columns: 168px minmax(0, 1fr); height: 360px; overflow: hidden; border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 24px 60px -24px rgba(20, 24, 40, .28);
}
.pf-side { display: flex; flex-direction: column; gap: 9px; padding: 16px 14px; background: var(--side, var(--surface-sunk)); border-right: 1px solid var(--line); }
.pf-side span { display: block; height: 8px; border-radius: 4px; background: var(--line); }
.pf-brand { width: 70%; height: 14px !important; margin-bottom: 8px; background: var(--ink-3) !important; opacity: .55; }
.pf-label { width: 40%; height: 6px !important; margin-top: 8px; opacity: .8; }
.pf-item { width: 78%; }
.pf-on { position: relative; background: var(--accent) !important; opacity: .7; }
.pf-main { display: flex; flex-direction: column; gap: 12px; padding: 0 22px; min-width: 0; }
.pf-top { display: flex; justify-content: flex-end; align-items: center; gap: 10px; height: 44px; margin: 0 -22px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.pf-pill { width: 96px; height: 18px; border-radius: 9px; background: var(--ok-soft); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); }
.pf-search { width: 150px; height: 22px; border-radius: 6px; background: var(--surface-raised); border: 1px solid var(--line); }
.pf-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); opacity: .85; }
.pf-hello { display: grid; gap: 7px; margin-top: 6px; }
.pf-eyebrow { width: 120px; height: 6px; border-radius: 3px; background: var(--accent); opacity: .45; }
.pf-title { width: 210px; height: 20px; border-radius: 5px; background: var(--ink); opacity: .82; }
.pf-heading { margin: 4px 0 -4px; font: 650 9.5px/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.pf-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pf-card { display: grid; gap: 7px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-raised); }
.pf-card b { font: 600 11px/1.2 var(--font-ui); color: var(--ink); }
.pf-num { width: 34px; height: 22px; border-radius: 4px; background: var(--ink); opacity: .78; }
.pf-line { width: 70%; height: 6px; border-radius: 3px; background: var(--line); }
.pf-alert { border-left: 3px solid var(--deny); }
.pf-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pf-rows span { height: 44px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-raised); }
.product-figure figcaption { margin-top: 12px; font-size: 14px; color: var(--ink-3); text-align: center; text-wrap: balance; }
@media (max-width: 860px) {
  .pf-frame { grid-template-columns: minmax(0, 1fr); height: 300px; }
  .pf-side { display: none; }
  .pf-search { width: 90px; }
}
@media (max-width: 520px) {
  .pf-cards { grid-template-columns: minmax(0, 1fr); }
  .pf-cards .pf-card:nth-child(n + 2), .pf-rows span:nth-child(n + 2) { display: none; }
  .pf-rows { grid-template-columns: minmax(0, 1fr); }
  .pf-frame { height: 280px; }
}
@media print { .product-figure { display: none; } }
.assurances li::before { content: ""; position: absolute; left: 1px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: color-mix(in srgb, var(--ok) 16%, transparent); }
.assurances li::after { content: ""; position: absolute; left: 6px; top: 6px; width: 6px; height: 3.5px; border-left: 1.7px solid var(--ok); border-bottom: 1.7px solid var(--ok); transform: rotate(-45deg); }
@media (pointer: coarse), (max-width: 600px) { .top-link, .link-button, .brand, .foot nav a { display: inline-flex; align-items: center; min-height: 44px; } }

/* The sales page. The ruled paper stays the motif; each section is a page of the ledger. */
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.signin-ended-top { margin: 0 0 8px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.section-lede { margin: calc(-1 * clamp(10px, 2vw, 24px)) 0 clamp(24px, 4vw, 40px); max-width: 60ch; font-size: 18px; color: var(--ink-2); text-wrap: pretty; }

/* One renewal's checks: what the engine has settled, and the one thing left for a person. */
.specimen { margin: 0; padding: 22px 24px 18px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
.specimen-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 14px; font: 400 22px/1.2 var(--font-display); letter-spacing: -.01em; border-bottom: 1px solid var(--line); }
.specimen-state { padding: 4px 11px; font: 600 12.5px/1.3 var(--font-ui); letter-spacing: 0; color: var(--ink); background: var(--warn-soft); border-radius: 999px; }
.checks { list-style: none; margin: 0; padding: 0; }
.checks li { position: relative; display: grid; gap: 1px; padding: 12px 0 12px 32px; border-bottom: 1px solid var(--line); }
.checks b { font: 600 15px/1.3 var(--font-ui); }
.checks span { font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.checks li::before { content: ""; position: absolute; left: 0; top: 15px; width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, var(--ok) 16%, transparent); }
.check-ok::after { content: ""; position: absolute; left: 6px; top: 21px; width: 8px; height: 4px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }
.checks .check-no::before { background: color-mix(in srgb, var(--deny) 15%, transparent); }
.check-no::after { content: ""; position: absolute; left: 6px; top: 21px; width: 8px; height: 8px; background: linear-gradient(45deg, transparent 43%, var(--deny) 43% 57%, transparent 57%), linear-gradient(-45deg, transparent 43%, var(--deny) 43% 57%, transparent 57%); }
.checks .check-no span { color: var(--ink); font-weight: 500; }
.checks .check-wait::before { background: transparent; border: 2px solid var(--accent); box-sizing: border-box; }
.specimen figcaption { margin-top: 12px; font-size: 13px; color: var(--ink-3); }

.leaks, .how, .roles, .rules, .start, .faq { padding: clamp(40px, 6vw, 80px) 0; border-top: 1px solid var(--line-strong); }
.leak-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.leak-grid h3 { margin: 0 0 8px; font: 400 25px/1.2 var(--font-display); letter-spacing: -.01em; }
.leak-grid p { margin: 0; color: var(--ink-2); }

.path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 clamp(14px, 2vw, 26px); }
.path-step { position: relative; padding-top: 44px; }
.path-step::before { content: ""; position: absolute; left: 0; right: calc(-1 * clamp(14px, 2vw, 26px)); top: 15px; height: 2px; background: var(--line-strong); }
.path-step:last-child::before { right: 0; }
.path-mark { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 32px; height: 32px; font: 600 14px/1 var(--font-ui); color: var(--ink); background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: 50%; }
.path-person .path-mark { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.path-who { margin: 0 0 4px; font: 650 12px/1.3 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.path-person .path-who { color: var(--accent); }
.path-step h3 { margin: 0 0 6px; font: 400 24px/1.2 var(--font-display); letter-spacing: -.01em; }
.path-step p:last-child { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }

.role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 72px); margin: 0; }
.role-grid div { padding: 18px 0; border-top: 1px solid var(--line); }
.role-grid dt { font: 400 22px/1.25 var(--font-display); }
.role-grid dd { margin: 4px 0 0; color: var(--ink-2); }

.rule-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); }
.rule-list li { display: grid; gap: 2px; padding: 14px 0; border-top: 1px solid var(--line); }
.rule-list b { font: 600 16px/1.3 var(--font-ui); }
.rule-list span { font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.rules-note { margin: 22px 0 0; font-size: 14px; color: var(--ink-3); }

.start-list { list-style: none; margin: 0; padding: 0; counter-reset: start; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
.start-list li { counter-increment: start; }
.start-list li::before { content: counter(start); display: block; margin-bottom: 8px; font: italic 400 30px/1 var(--font-display); color: var(--accent); }
.start-list h3 { margin: 0 0 6px; font: 600 17px/1.3 var(--font-ui); }
.start-list p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }

.demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; padding: clamp(40px, 6vw, 80px) 0; border-top: 1px solid var(--line-strong); }
.demo-points { margin: 0; padding-left: 20px; color: var(--ink-2); }
.demo-points li { margin-top: 6px; }
.demo-form { display: grid; gap: 16px; padding: clamp(20px, 3vw, 30px); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
.panel .demo-form { margin-top: 20px; padding: 0; background: none; border: 0; box-shadow: none; }
.demo-form .button { width: 100%; cursor: pointer; }
.field { display: grid; gap: 5px; min-width: 0; }
.field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field label { font: 600 14px/1.3 var(--font-ui); }
.field input, .field select { width: 100%; min-height: 46px; padding: 10px 12px; font: 16px/1.3 var(--font-ui); color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); }
.field-bad input, .field-bad select { border-color: var(--deny); }
.field-error { margin: 0; font-size: 14px; color: var(--deny); }
.form-summary { margin: 16px 0 0; padding: 12px 14px; font-size: 14.5px; background: var(--warn-soft); border-radius: var(--radius); }
.form-note { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.faq details { max-width: 780px; border-top: 1px solid var(--line); }
.faq summary { min-height: 44px; padding: 13px 0; cursor: pointer; font: 600 17px/1.4 var(--font-ui); }
.faq details p { margin: 0 0 16px; color: var(--ink-2); }

.staff { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 1.4fr); gap: clamp(24px, 5vw, 72px); align-items: start; padding: clamp(32px, 5vw, 56px) 0 clamp(40px, 6vw, 72px); border-top: 1px solid var(--line-strong); }
.staff h2 { margin: 0 0 16px; font: 400 25px/1.2 var(--font-display); letter-spacing: -.01em; }
.staff .assurances { margin-top: 0; }

@media (max-width: 1000px) {
  .path { grid-template-columns: minmax(0, 1fr); }
  .path-step { padding: 0 0 26px 48px; }
  .path-step::before { left: 15px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .path-step:last-child::before { display: none; }
  .start-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .leak-grid, .demo, .staff, .role-grid { grid-template-columns: minmax(0, 1fr); }
  .rule-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .top-extra { display: none; }
}
@media (max-width: 520px) {
  .rule-list, .start-list, .field-pair { grid-template-columns: minmax(0, 1fr); }
  .hero-actions .button { width: 100%; }
  .button-small { min-height: 44px; }
}

/* Footer links are text on a pointer, and a finger needs more to hit. */
@media (pointer: coarse) {
  .foot-inner a { padding-block: 11px; }
}