/* verifield.ai
   Structure after squid.energy (Jacob, 1 Oct 2026): numbered chapters in
   full-width bands, one heavy sans for headings, IBM Plex Mono for labels and
   for the product's own objects (file names, versions, rule packs), and line
   diagrams drawn in HTML rather than pictures.
   Colour is the platform's palette (docs/DESIGN.md): control-room navy and ink
   for the dark bands, the app's ground and white for the light ones, action
   blue as the one accent. Green, red, amber and purple mean states and nothing
   else, always as a word plus a colour. */

:root {
  --white: #FFFFFF;
  --ground: #F4F6FA;          /* the app's ground */
  --border: #DCE2EA;
  --border-soft: #EBEFF4;
  --line: #9AA6B8;            /* diagram lines on light */
  --text: #0F172A;
  --text-2: #334155;
  --text-3: #526074;

  --accent: #2457D6;          /* action blue: fills with white type, blue text on light (5.9:1) */
  --accent-hover: #1A44AC;
  --accent-soft: #E8EEFC;
  --accent-on-dark: #7FA6FF;  /* blue text on navy and ink */
  --mark-blue: #4C7DFF;       /* the logo's inner chevron */

  --navy: #0B1324;            /* the control room and the app's rail */
  --navy-2: #111B2E;
  --navy-line: #22314D;
  --navy-text: #C3CCDA;
  --navy-muted: #8D9AB0;
  --ink: #070D1A;             /* the darkest band: thesis and how it decides */

  --p-pass: #0B6645; --p-pass-soft: #DDF3E9;
  --p-warn: #8F5200; --p-warn-soft: #FCF0DA;
  --p-fail: #B42318; --p-fail-soft: #FDE3E1;
  --p-review: #5B3DB8; --p-review-soft: #ECE8FB;

  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --wrap: 1200px;
  --gutter: 32px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--white); color: var(--text-2); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3 { margin: 0; color: var(--text); text-wrap: balance; }
h1, h2 { font-weight: 800; letter-spacing: -0.035em; }
h3 { font-weight: 650; letter-spacing: -0.015em; }
p { margin: 0; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--text); }
code { font: 500 0.92em/1.4 var(--mono); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.dark :focus-visible, .band-blue :focus-visible { outline-color: #FFFFFF; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -48px; z-index: 100; background: var(--text); color: #FFFFFF; padding: 8px 14px; border-radius: 8px; }
.skip:focus { top: 12px; color: #FFFFFF; }

/* Mono labels: section numbers, keys, the product's own objects */
.label-n { margin: 0 0 20px; font: 500 12.5px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.dark .label-n { color: var(--accent-on-dark); }
.band-blue .label-n { color: #DCE6FF; }
.k { font: 500 11.5px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.dark .k { color: var(--navy-muted); }
.caption { margin-top: 28px; font: 500 12px/1.6 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.dark .caption { color: var(--navy-muted); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 8px; border: 1px solid transparent; font: 600 15px/1 var(--sans); text-decoration: none; white-space: nowrap; transition: background-color 120ms var(--ease), border-color 120ms var(--ease), color 120ms var(--ease); }
.btn-primary { background: var(--accent); color: #FFFFFF; }
.btn-primary:hover { background: var(--accent-hover); color: #FFFFFF; }
.btn-quiet { background: var(--white); border-color: var(--border); color: var(--text); }
.btn-quiet:hover { border-color: var(--text-3); color: var(--text); }
.btn-light { background: #FFFFFF; color: var(--accent); }
.btn-light:hover { background: #E8EEFC; color: var(--accent-hover); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.arrow { font-family: var(--mono); font-weight: 500; }

/* ---------- Pills: a word plus a colour ---------- */
.pill { text-transform: none; letter-spacing: 0; display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font: 600 12px/18px var(--sans); white-space: nowrap; background: #EEF1F6; color: var(--text-2); }
.pill.fail { background: var(--p-fail-soft); color: var(--p-fail); }
.pill.warn { background: var(--p-warn-soft); color: var(--p-warn); }
.pill.review { background: var(--p-review-soft); color: var(--p-review); }
.pill.pass { background: var(--p-pass-soft); color: var(--p-pass); }
.pill.d-fail { background: #3A1518; color: #FF8A8A; }
.pill.d-review { background: #231C44; color: #C3B5FF; }
.pill.d-warn { background: #33260E; color: #F5B94A; }
.pill.d-pass { background: #0E2E24; color: #5FE3AA; }

/* ---------- Logo ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.brand:hover { color: var(--text); }
.brand-mark { width: 30px; height: 30px; flex: none; fill: none; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.mark-outer { stroke: var(--navy); }
.mark-inner { stroke: var(--mark-blue); }
.wordmark { font: 750 21px/1 var(--sans); letter-spacing: -0.035em; color: var(--text); }
.wordmark span { color: var(--accent); }
.on-dark .mark-outer { stroke: #F4F6FA; }
.on-dark .wordmark { color: #FFFFFF; }
.on-dark .wordmark span { color: var(--accent-on-dark); }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: var(--navy); border-bottom: 1px solid transparent; transition: border-color 200ms var(--ease); }
.nav.is-scrolled { border-bottom-color: var(--navy-line); }
.nav-inner { position: relative; display: flex; align-items: center; gap: 28px; height: 68px; }
.nav-links { display: flex; gap: 28px; margin-left: auto; }
.nav-links a { display: inline-flex; align-items: center; min-height: 40px; color: var(--navy-text); text-decoration: none; font: 500 12.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.nav-links a:hover { color: #FFFFFF; }
.nav :focus-visible { outline-color: #FFFFFF; }
.nav-toggle { display: none; min-height: 40px; padding: 0 14px; border-radius: 8px; border: 1px solid #2A3A58; background: transparent; color: #FFFFFF; font: 600 14px/1 var(--sans); cursor: pointer; }

/* ---------- Bands ---------- */
.band { padding: 128px 0; }
.band-ground { background: var(--ground); }
.band-ink { background: var(--ink); color: var(--navy-text); }
.band-navy { background: var(--navy); color: var(--navy-text); }
.band-blue { background: var(--accent); color: #E6ECFB; }
.dark h2, .dark h3, .band-blue h2 { color: #FFFFFF; }
.band h2 { font-size: clamp(2.5rem, 5vw, 4.25rem); line-height: 0.98; }

/* A chapter opens with the number, a short headline, and one paragraph beside it */
.head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0 72px; align-items: start; }
.head .label-n { grid-column: 1 / -1; }
.head > p:not(.label-n) { margin-top: 10px; padding-left: 24px; border-left: 1px solid var(--border); font-size: 18px; line-height: 1.6; max-width: 46ch; }
.dark .head > p:not(.label-n) { border-left-color: var(--navy-line); }

/* Sample data pill beside a drawing */
.sample { display: flex; justify-content: flex-end; }

/* Reveal once on scroll; everything shows without scripts or with reduced motion */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Hero: every asset as a square ---------- */
.hero { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 720px; padding: 96px 0 104px; background: var(--navy); color: var(--navy-text); }
.hero-inner { position: relative; z-index: 2; width: 100%; }
.hero-copy { max-width: 620px; }
.h1-kicker { display: block; max-width: 52ch; margin-bottom: 24px; font: 500 13px/1.55 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-on-dark); }
.hero h1 { color: #FFFFFF; font-size: clamp(3rem, 6.4vw, 5.75rem); line-height: 0.95; letter-spacing: -0.045em; max-width: 11ch; }
.lead { margin-top: 28px; font-size: 19px; line-height: 1.6; max-width: 52ch; color: var(--navy-text); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }
.field, .field-callouts { position: absolute; top: 0; right: 0; bottom: 0; width: 64%; }
.field { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%); mask-image: linear-gradient(90deg, transparent 0, #000 34%); }
.field canvas { display: block; width: 100%; height: 100%; }
.field-callouts { z-index: 1; pointer-events: none; }
.callout { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px 7px 8px; background: rgba(17, 27, 46, 0.94); border: 1px solid #2A3A58; border-radius: 10px; font-size: 12.5px; color: #E6ECF5; white-space: nowrap; transform: translate(18px, -50%); opacity: 0; transition: opacity 500ms var(--ease); }
.callout::before { content: ""; position: absolute; top: 50%; left: -14px; width: 12px; height: 1px; background: #4C5F82; }
.callout[data-side="left"] { transform: translate(calc(-100% - 18px), -50%); }
.callout[data-side="left"]::before { left: auto; right: -14px; }
.callout[data-side="pin"] { transform: translate(0, -50%); }
.callout[data-side="pin"]::before { display: none; }
.callout.is-in { opacity: 1; }
.field-key { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 28px; font-size: 13px; color: var(--navy-muted); }
.key-sq { width: 9px; height: 9px; border-radius: 2px; background: rgba(127, 166, 255, 0.45); }

/* ---------- 01 Thesis ---------- */
.pull { margin-top: 80px; font: 800 clamp(2rem, 4.2vw, 3.5rem)/1.04 var(--sans); letter-spacing: -0.035em; color: var(--accent-on-dark); max-width: 30ch; text-wrap: balance; }

/* ---------- 02 The record: files in, one record out ---------- */
.flow { margin: 72px 0 0; }
.flow-grid { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 0.8fr) 64px minmax(0, 1fr); align-items: center; }
.flow-src { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.flow-src li { position: relative; height: 60px; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 0 16px; background: var(--white); border: 1px solid var(--border); border-radius: 8px; }
.flow-src li::after { content: ""; position: absolute; top: 50%; left: 100%; width: 32px; border-top: 1px solid var(--line); }
.flow-src::before { content: ""; position: absolute; top: 30px; bottom: 30px; left: calc(100% + 32px); border-left: 1px solid var(--line); }
.flow-src::after { content: ""; position: absolute; top: 50%; left: calc(100% + 32px); width: 32px; border-top: 1px solid var(--line); }
.flow-src code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--text); }
.flow-gate { position: relative; padding: 18px 18px 16px; background: var(--white); border: 1px solid var(--border); border-radius: 8px; }
.flow-gate::after { content: ""; position: absolute; top: 50%; left: 100%; width: 64px; border-top: 1.5px solid var(--accent); }
.flow-gate ul { list-style: none; margin: 12px 0 0; padding: 0; font: 500 12.5px/1.4 var(--mono); color: var(--text-2); }
.flow-gate li { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 8px; padding: 7px 0; border-top: 1px solid var(--border-soft); }
.flow-gate li span:first-child { color: var(--text-3); }
.flow-gate .ok { color: var(--p-pass); }
.flow-gate .held { color: var(--p-warn); }
.flow-rec { position: relative; }
.rec-box { padding: 18px 20px; background: var(--navy); border-radius: 8px; color: #FFFFFF; font: 500 15px/1.4 var(--mono); }
.rec-box span { display: block; margin-top: 4px; font-size: 12.5px; color: var(--accent-on-dark); }
.rec-notes { position: absolute; top: calc(100% + 12px); left: 0; right: 0; list-style: none; margin: 0; padding: 0; font: 500 12.5px/1.5 var(--mono); color: var(--text-3); }
.rec-notes li { padding: 6px 0 6px 22px; position: relative; }
.rec-notes li::before { content: ""; position: absolute; left: 0; top: 50%; width: 14px; border-top: 1px dashed var(--line); }

/* The asset's life as a version line */
.life { position: relative; list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.life::before { content: ""; position: absolute; top: 5px; left: 0; right: 16.66%; border-top: 1.5px solid var(--text); }
.life::after { content: ""; position: absolute; top: 5px; left: 83.33%; right: 0; border-top: 1.5px dashed var(--line); }
.life li { position: relative; padding: 24px 12px 0 0; font: 500 12px/1.45 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }
.life li::before { content: ""; position: absolute; top: 0; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--ground); border: 1.5px solid var(--text); }
.life li span { display: block; margin-top: 4px; letter-spacing: 0.04em; text-transform: none; color: var(--text-3); }
.life li.now::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px rgba(36, 87, 214, 0.18); }
.life li.now span { color: var(--accent); }
.life li.next { color: var(--text-3); }
.life li.next::before { border-style: dashed; border-color: var(--line); }

/* ---------- 03 The checks: expected against found ---------- */
.checks { margin-top: 72px; border-top: 1.5px solid var(--text); }
.checks-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.checks table { width: 100%; border-collapse: collapse; }
.checks th, .checks td { text-align: left; vertical-align: top; padding: 18px 16px 18px 0; border-bottom: 1px solid var(--border); }
.checks thead th { padding-top: 14px; padding-bottom: 12px; font: 500 11.5px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.checks tbody th { font-weight: 650; font-size: 16px; color: var(--text); width: 22%; }
.checks td { font-size: 15px; line-height: 1.5; color: var(--text-2); }
.checks td.v { font: 500 13.5px/1.55 var(--mono); color: var(--text); }
.checks td.v small { display: block; margin-top: 3px; font-size: 12px; color: var(--text-3); }
.checks td:last-child { padding-right: 0; }
.rules { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 0.6fr) minmax(0, 2fr); gap: 24px 48px; align-items: start; }
.rules ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
.rules li { padding: 12px 0; border-top: 1px solid var(--border); font-size: 15px; line-height: 1.45; }
.rules li b { display: block; font: 500 13px/1.4 var(--mono); color: var(--text); letter-spacing: 0.02em; margin-bottom: 2px; }

/* ---------- 04 Intelligence: six agents and the record you can ask ---------- */
.intel { margin-top: 72px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: start; }
.agents { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.agents li { padding: 18px 0 22px; border-top: 1px solid var(--border); }
.agents h3 { margin: 0 0 6px; font-size: 18px; }
.agents p:last-child { font-size: 15px; line-height: 1.55; }
.console { margin: 0; background: var(--navy); border-radius: 14px; overflow: hidden; color: var(--navy-text); box-shadow: 0 40px 80px -40px rgba(4, 9, 20, 0.55); }
.console-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--navy-line); font: 500 11.5px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy-muted); }
.console-body { padding: 22px 22px 18px; }
.ask { display: inline-block; max-width: 100%; padding: 12px 14px; border-radius: 8px; background: var(--navy-2); border: 1px solid var(--navy-line); font: 500 14px/1.5 var(--mono); color: #FFFFFF; }
.answer { margin-top: 18px; padding: 16px 18px; border-radius: 10px; background: #FFFFFF; color: var(--text-2); font-size: 15px; line-height: 1.6; }
.answer .k { margin-bottom: 8px; }
.answer b { color: var(--text); font-weight: 650; }
.chips { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { padding: 3px 8px; border: 1px solid var(--border); border-radius: 6px; font: 500 11.5px/1.5 var(--mono); color: var(--text-2); }
.chips li:first-child { border: 0; padding-left: 0; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; }
.asks { list-style: none; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--navy-line); font: 500 13px/1.5 var(--mono); color: var(--navy-muted); }
.asks li { padding: 4px 0; }
.console-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--navy-line); font: 500 11.5px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy-muted); }

/* ---------- 05 How it decides ---------- */
.decides h2 .s1 { color: var(--navy-muted); }
.decides h2 .s3 { color: var(--accent-on-dark); }
.decide-grid { margin-top: 64px; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 72px; align-items: start; }
.decide-copy p + p { margin-top: 18px; }
.decide-copy p { font-size: 18px; line-height: 1.6; max-width: 44ch; }
.decide-copy strong { color: #FFFFFF; font-weight: 650; }
.log { margin: 0; }
.log .ask { margin-bottom: 20px; }
.log dl { margin: 0; font: 500 13.5px/1.55 var(--mono); }
.log dl div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 9px 0; border-top: 1px solid var(--navy-line); }
.log dt { color: var(--navy-muted); letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; padding-top: 1px; }
.log dd { margin: 0; color: #E6ECF5; }
.log dd.hit { color: #FF8A8A; }
.log dd.wait { color: var(--accent-on-dark); }
.log figcaption { display: flex; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--navy-line); font: 500 11.5px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy-muted); }

/* ---------- 06 Who it's for: the control room's dark 3D model ---------- */
.uc-tabs { display: none; flex-wrap: wrap; gap: 8px; margin: 40px 0 8px; }
.js .uc-tabs { display: flex; } /* without scripts the three panels simply stack */
.uc-tab { min-height: 44px; padding: 0 18px; border-radius: 8px; border: 1px solid var(--border); background: var(--white); color: var(--text); font: 600 15px/1 var(--sans); cursor: pointer; transition: background-color 120ms var(--ease), border-color 120ms var(--ease), color 120ms var(--ease); }
.uc-tab:hover { border-color: #7A879A; }
.uc-tab[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: #FFFFFF; }
.uc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 24px 0 8px; }
.uc[hidden] { display: none; }
.uc:focus-visible { outline-offset: 8px; }
.uc-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 56px; align-items: start; }
.uc-copy .uc-k, .uc-copy h3, .uc-copy > p { grid-column: 1; }
.uc-outcome { margin-top: 14px; padding: 14px 16px; border-left: 2px solid var(--accent); background: var(--ground); font-size: 15.5px; line-height: 1.55; color: var(--text); }
.uc-outcome .k { display: block; margin-bottom: 4px; }
.uc-copy > ul { grid-column: 2; grid-row: 1 / span 5; margin-top: 30px; }
.uc-k { margin-bottom: 8px; font: 500 12.5px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.uc h3 { font-weight: 800; font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.08; letter-spacing: -0.03em; margin-bottom: 8px; }
.uc-copy > p { font-size: 17px; }
.uc-copy > ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.uc-copy > ul li { position: relative; padding-left: 20px; font-size: 16px; line-height: 1.5; }
.uc-copy > ul li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 7px; height: 7px; border-radius: 2px; background: var(--mark-blue); }
.uc-status { margin-top: 10px; font-size: 14px; color: var(--text-3); }
.uc-status b { color: var(--p-pass); font-weight: 600; }
.uc-art { margin: 0; }
.uc-art.dark { position: relative; overflow: hidden; background: #070D1A; border: 1px solid #1B2740; border-radius: 14px; box-shadow: 0 40px 80px -40px rgba(4, 9, 20, 0.6); }
.uc-art.dark svg { display: block; width: 100%; height: auto; }
.uc-sample { position: absolute; left: 16px; top: 16px; }
.glow { filter: drop-shadow(0 0 6px rgba(255, 122, 122, 0.9)); }
.uc-notes { display: none; list-style: none; margin: 0; padding: 0; }
.uc-notes li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; padding: 12px 0; border-bottom: 1px solid var(--border-soft); font-size: 15px; }
.uc-notes .pill { grid-row: 1 / span 2; align-self: start; margin-top: 2px; }
.uc-notes b { color: var(--text); font-weight: 600; }

/* ---------- 07 In use today ---------- */

/* ---------- 08 Start with one site ---------- */
.fit { list-style: none; margin: 72px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.fit li { padding-top: 18px; border-top: 1px solid var(--navy-line); }
.fit h3 { margin: 8px 0 10px; font-size: 20px; }
.fit p { font-size: 16px; line-height: 1.6; }
.security { margin-top: 72px; padding: 24px 0; border-top: 1px solid var(--navy-line); border-bottom: 1px solid var(--navy-line); display: grid; grid-template-columns: minmax(0, 0.5fr) minmax(0, 2fr) auto; gap: 16px 40px; align-items: start; }
.security ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 32px; font: 500 12.5px/1.5 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: #E6ECF5; }
.security li { position: relative; padding-left: 18px; }
.security li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 2px; background: var(--mark-blue); }
.security a { display: inline-flex; align-items: center; min-height: 32px; font: 500 12.5px/1.5 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-on-dark); white-space: nowrap; }
.security a:hover { color: #FFFFFF; }

/* ---------- 09 FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: 64px; align-items: start; }
.faq-grid h2 { font-size: clamp(2.2rem, 3.8vw, 3.2rem); line-height: 1; }
.faq-list { border-top: 1.5px solid var(--text); }
.faq-list details { border-bottom: 1px solid var(--border); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 0; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 4px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: translateY(-3px) rotate(45deg); transition: transform 120ms var(--ease); }
.faq-list details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq-list summary h3 { font-size: 17px; }
.faq-list details p { padding: 0 36px 22px 0; font-size: 16px; max-width: 64ch; }

/* ---------- Closing: one big ask, in the accent ---------- */
.cta-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.band-blue h2 { font-size: clamp(3rem, 7.4vw, 6.5rem); line-height: 0.95; letter-spacing: -0.045em; max-width: 10ch; }
.cta-copy > p:not(.label-n) { margin-top: 20px; font-size: 18px; max-width: 46ch; }
.cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 32px; }
.cta-mail { color: #FFFFFF; font-weight: 500; }
.cta-mail:hover { color: #DCE6FF; }
.cta-note { margin-top: 16px; font-size: 14px; color: #DCE6FF; }
.cta-cal { background: #FFFFFF; border-radius: 12px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(3, 12, 40, 0.6); }
.cta-cal iframe { display: block; width: 100%; height: 660px; border: 0; }
.cal-off { display: flex; flex-direction: column; gap: 14px; justify-content: center; min-height: 660px; padding: 40px; color: var(--text-2); }
.cal-off[hidden] { display: none; }
.cal-off-title { font: 800 26px/1.15 var(--sans); letter-spacing: -0.03em; color: var(--text); }
.cal-off-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cal-off-note { font-size: 14px; color: var(--text-3); }
.cal-off [data-consent] { display: none; }
.js .cal-off [data-consent] { display: inline-flex; }

/* ---------- Footer ---------- */
.footer { padding: 48px 0 32px; font-size: 14px; color: var(--text-3); }
.footer-top { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer-links { display: flex; gap: 8px 24px; flex-wrap: wrap; }
.footer-links a, .footer-legal a { display: inline-flex; align-items: center; min-height: 32px; color: var(--text-2); text-decoration: none; }
.footer-links a:hover, .footer-legal a:hover { color: var(--text); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 20px; }
.footer-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.footer-base a { color: var(--text); }
.linklike { display: none; min-height: 32px; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--text-2); cursor: pointer; }
.js .linklike { display: inline-flex; align-items: center; }
.linklike:hover { color: var(--text); }
.linklike.inline { display: inline; min-height: 0; font-size: inherit; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Cookie choice ---------- */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: var(--white); border-top: 1px solid var(--border); box-shadow: 0 -12px 32px -16px rgba(15, 23, 42, 0.25); }
.consent[hidden] { display: none; }
.consent-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; padding-top: 16px; padding-bottom: 16px; flex-wrap: wrap; }
.consent p { font-size: 15px; line-height: 1.5; max-width: 72ch; color: var(--text-2); }
.consent strong { color: var(--text); }
.consent-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Text pages: privacy, terms, security ---------- */
.legal { padding: 80px 0 104px; }
.legal .wrap { max-width: 800px; }
.legal h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1; letter-spacing: -0.04em; }
.legal .updated { margin-top: 14px; font-size: 14px; color: var(--text-3); }
.legal .intro { margin-top: 20px; font-size: 19px; line-height: 1.6; }
.legal .summary { margin-top: 28px; padding: 20px 22px; border: 1px solid var(--border); border-radius: 8px; background: var(--ground); font-size: 16px; }
.legal .summary ul { margin: 8px 0 0; padding-left: 20px; }
.legal h2 { margin-top: 44px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.legal h3 { margin-top: 24px; font-size: 17px; }
.legal p, .legal li { font-size: 16.5px; line-height: 1.7; }
.legal p { margin-top: 12px; }
.legal ul { margin: 12px 0 0; padding-left: 22px; }
.legal li + li { margin-top: 6px; }
.legal table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 15px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.legal th { font: 500 11.5px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }

/* 404 */
.notfound { min-height: 100vh; display: flex; align-items: center; }
.notfound .wrap { width: 100%; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.notfound h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); line-height: 1; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .callout { transition: none; opacity: 1; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1000px) {
  .band { padding: 96px 0; }
  .head { grid-template-columns: minmax(0, 1fr); }
  .head > p:not(.label-n) { margin-top: 24px; }
  .hero { flex-direction: column; align-items: stretch; min-height: 0; padding-bottom: 0; }
  .hero-inner { order: 1; }
  .field { order: 2; }
  .field-callouts { order: 3; }
  .field, .field-callouts { position: relative; width: 100%; height: 320px; margin-top: 40px; }
  .field-callouts { margin-top: -320px; }
  .field { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 25%); mask-image: linear-gradient(180deg, transparent 0, #000 25%); }
  .flow-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .flow-src li::after, .flow-src::before, .flow-src::after, .flow-gate::after { display: none; }
  .flow-src { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-gate::before, .flow-rec::before { content: ""; position: absolute; left: 50%; top: -33px; height: 32px; border-left: 1px solid var(--line); }
  .flow-rec { position: relative; }
  .flow-rec::before { border-left: 1.5px solid var(--accent); }
  .rules { grid-template-columns: minmax(0, 1fr); }
  .rules ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intel, .decide-grid, .cta-grid, .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .security { grid-template-columns: minmax(0, 1fr); }
  .security ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uc-copy { grid-template-columns: minmax(0, 1fr); }
  .uc-copy > ul { grid-column: 1; grid-row: auto; margin-top: 12px; }
  .uc-art.dark { margin: 0 calc(-1 * var(--gutter)); border-radius: 0; border-left: 0; border-right: 0; }
}

/* ---------- Narrow tablet: the menu button and the stacked checks ---------- */
@media (max-width: 900px) {
  .js .nav-toggle { display: inline-flex; align-items: center; margin-left: auto; padding: 0 12px; }
  .js .nav-links { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; margin: 0; padding: 8px var(--gutter) 16px; background: var(--navy); border-bottom: 1px solid var(--navy-line); }
  .js .nav-links.is-open { display: flex; }
  .js .nav-links a { min-height: 48px; font-size: 13px; border-top: 1px solid var(--navy-line); }
  .checks table, .checks tbody, .checks tr, .checks th, .checks td { display: block; width: 100%; }
  .checks thead { display: none; }
  .checks tr { padding: 16px 0; border-bottom: 1px solid var(--border); }
  .checks tbody th, .checks td { padding: 3px 0; border: 0; width: 100%; }
  .checks tbody th { margin-bottom: 6px; }
  .checks td[data-l]::before { content: attr(data-l); display: block; font: 500 11px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-top: 6px; }
}

/* ---------- Phone ---------- */
@media (max-width: 720px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }
  .band { padding: 72px 0; }
  .band h2 { font-size: clamp(2.2rem, 10vw, 2.9rem); }
  .head > p:not(.label-n) { font-size: 17px; padding-left: 16px; }
  .nav-inner { height: 60px; gap: 8px; }
  .brand-mark { width: 28px; height: 28px; }
  .wordmark { font-size: 20px; }
  .nav .btn { padding: 0 12px; font-size: 13px; }
  .hero { padding-top: 40px; }
  .hero h1 { font-size: clamp(2.8rem, 13vw, 3.6rem); }
  .lead { font-size: 17px; }
  .callout.opt { display: none; }
  .callout { font-size: 11.5px; }
  .pull { margin-top: 56px; }
  .figs { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .flow, .checks, .intel, .proofs, .fit { margin-top: 48px; }
  .flow-src { grid-template-columns: minmax(0, 1fr); }
  .life { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .life::before { top: 0; bottom: 16.66%; left: 5px; right: auto; border-top: 0; border-left: 1.5px solid var(--text); }
  .life::after { top: 83.33%; bottom: 0; left: 5px; right: auto; border-top: 0; border-left: 1.5px dashed var(--line); }
  .life li { padding: 0 0 18px 28px; }
  .rules ul, .agents, .security ul, .fit { grid-template-columns: minmax(0, 1fr); }
  .fit { gap: 28px; }
  .decide-grid { margin-top: 40px; }
  .log dl div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .console-body { padding: 18px 16px 16px; }
  .uc-art .sc-card { display: none; }
  .uc-notes { display: block; margin-top: 8px; }
  .uc-sample { position: static; margin: 14px 16px; }
  .uc-tab { flex: 1 1 auto; font-size: 14px; padding: 0 12px; }
  .proof-lead { padding: 24px 20px; }
  .band-blue h2 { font-size: clamp(2.8rem, 13vw, 3.8rem); }
  .cta-cal iframe { height: 600px; }
  .cal-off { min-height: 0; padding: 28px 22px; }
  .legal { padding: 48px 0 72px; }
  .consent-inner { padding-top: 14px; padding-bottom: 14px; }
}

/* Caption beside a Sample data pill */
.foot-row { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; margin-top: 28px; }
.foot-row .caption { margin-top: 0; }
.decides h2 span { display: block; }
@media (max-width: 1000px) {
  .flow-grid > span { display: none; }
  .rec-notes { position: static; margin-top: 12px; }
}


/* Live today: one row of real figures under the hero */
.proof-strip { padding: 40px 0 44px; background: var(--ground); border-bottom: 1px solid var(--border); }
.proof-strip .label-n { margin-bottom: 18px; }
.strip-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 0; }
.strip-figs div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; }
.strip-figs dd { margin: 0; font: 800 clamp(2rem, 3.4vw, 2.8rem)/1 var(--sans); letter-spacing: -0.04em; color: var(--text); font-variant-numeric: tabular-nums; }
.strip-figs dt { font-size: 15px; color: var(--text-3); }
@media (max-width: 720px) { .strip-figs { grid-template-columns: minmax(0, 1fr); gap: 20px; } }

.hero .btn-quiet { background: transparent; border-color: #2A3A58; color: #FFFFFF; }
.hero .btn-quiet:hover { background: var(--navy-2); border-color: #3A4D70; color: #FFFFFF; }