/* Layout concept: strata. Rows of records, one vein of true silver running through them.
   Data is set in mono like an instrument readout; prose in a precise technical grotesk.
   Three looks share one token set, picked per build (brand.json) via data-look on <html>:
   dark ("rock"), light ("assay sheet"), and mixed: light paper with dark instrument blocks
   (.on-dark: hero panels, the qualifies band, the check card, contact + footer).
   data-look, not data-theme: the claude.ai viewer owns data-theme. */

/* dark colour tokens: the default, and every .on-dark block in the mixed look */
:root,
:root[data-look="mixed"] .on-dark {
  --ink: #07080a;        /* page ground; also the text colour on primary buttons */
  --rock: #0d0f12;       /* raised surface */
  --rock-2: #13161a;     /* card / input surface */
  --seam: #1d2127;       /* hairlines between strata */
  --seam-2: #2a3038;     /* stronger lines, borders on hover */
  --quartz: #eceff3;     /* primary text */
  --slate: #9198a2;      /* secondary text */
  --slate-2: #838b96;    /* tertiary text, ticks (AA on ink) */
  --silver: #e6eaf0;     /* primary buttons, metallic type: true silver */
  --silver-hi: #ffffff;
  --silver-lo: #98a3b2;
  --signal: #8eaaff;     /* the instrument accent: bars, ticks, the vein's glow */
  --signal-hi: #b9c9ff;
  --signal-lo: rgba(142, 170, 255, 0.14);
  --ok: #8fd0aa;         /* semantic: licensable */
  --warn: #e6c06f;       /* semantic: partial / review */
  --no: #e68b7f;         /* semantic: excluded */
  --em: linear-gradient(180deg, #ffffff 0%, #e6eaf0 40%, #98a3b2 100%);
  --hl: rgba(255, 255, 255, 0.05);        /* top-edge highlight on panels */
  --hl-2: rgba(255, 255, 255, 0.08);
  --shade: rgba(0, 0, 0, 0.9);            /* drop shadows */
  --shade-tint: rgba(142, 170, 255, 0.18);
  --band: var(--rock);       /* full-bleed "what qualifies" band */
  --sheet: var(--ink);       /* tables inside the band */
  --cell: transparent;       /* principle cells */
  --fade-mid: 78%;           /* how much the hero copy side covers the strata */
  /* hero canvas */
  --cv-far: #838b96; --cv-near: #e6eaf0; --cv-glow: #8eaaff; --cv-pulse: #e6eaf0; --cv-alpha: 0.16;
  color-scheme: dark;
}
:where(:root[data-look="mixed"]) .on-dark { color: var(--quartz); }
:root[data-look="mixed"] .hero-visual { --shade: rgba(16, 24, 40, 0.45); }

:root {
  --display: "Geist", "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --body: "Geist", "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --h-weight: 600;        /* display headings */
  --h-track: -0.035em;    /* h1 tracking */
  --h2-track: -0.03em;
  --h-stretch: normal;    /* font-stretch for display type */
  --h1-scale: 1;
  --mono-track: 1;        /* multiplier for tracked-out mono labels */

  --t-label: 0.75rem;
  --t-small: 0.875rem;
  --t-body: 1.0625rem;
  --t-lead: clamp(1.125rem, 1.35vw, 1.25rem);
  --t-h3: 1.1875rem;
  --t-h2: clamp(1.875rem, 3.3vw, 2.75rem);
  --t-h1: clamp(2.375rem, 4.4vw, 3.75rem);

  --gutter: clamp(16px, 4vw, 40px);
  --max: 1200px;
  --radius: 3px;
}

:root[data-look="light"],
:root[data-look="mixed"] {
  --ink: #f4f5f7;
  --rock: #ffffff;
  --rock-2: #fbfbfc;
  --seam: #e2e5ea;
  --seam-2: #cfd4db;
  --quartz: #0b0d10;
  --slate: #4f5762;
  --slate-2: #5f6773;
  --silver: #0d1014;     /* primary buttons go graphite */
  --silver-hi: #262b33;
  --silver-lo: #5d6672;
  --signal: #2b50e6;
  --signal-hi: #5b7cff;
  --signal-lo: rgba(43, 80, 230, 0.08);
  --ok: #17804d;
  --warn: #9a6200;
  --no: #bf3b2b;
  --em: linear-gradient(180deg, #4d6bff 0%, #2b50e6 55%, #1d3bb8 100%);
  --hl: rgba(255, 255, 255, 0.9);
  --hl-2: rgba(255, 255, 255, 1);
  --shade: rgba(16, 24, 40, 0.22);
  --shade-tint: rgba(43, 80, 230, 0.12);
  --band: #eaedf1;
  --sheet: #ffffff;
  --cell: #ffffff;
  --fade-mid: 92%;
  --cv-far: #8a929d; --cv-near: #0d1014; --cv-glow: #2b50e6; --cv-pulse: #2b50e6; --cv-alpha: 0.22;
  color-scheme: light;
}

/* ---------- type sets: display / body / mono ---------- */
:root[data-font="geist-martian"] {
  --mono: "Martian Mono", "Geist Mono", ui-monospace, Menlo, monospace;
  --mono-track: 0.55;
}
:root[data-font="martian"] {
  --display: "Martian Mono", ui-monospace, Menlo, monospace;
  --mono: "Martian Mono", ui-monospace, Menlo, monospace;
  --h-weight: 500; --h-stretch: 87.5%; --h-track: -0.05em; --h2-track: -0.045em; --h1-scale: 0.8; --mono-track: 0.55;
}
:root[data-font="geistmono"] {
  --display: "Geist Mono", ui-monospace, Menlo, monospace;
  --h-weight: 500; --h-track: -0.055em; --h2-track: -0.05em; --h1-scale: 0.88;
}
:root[data-font="saira"] {
  --display: "Saira", "Geist", Arial, sans-serif;
  --body: "Saira", "Helvetica Neue", Arial, sans-serif;
  --mono: "Martian Mono", "Geist Mono", ui-monospace, Menlo, monospace;
  --h-stretch: 87.5%; --h-track: -0.015em; --h2-track: -0.01em; --h1-scale: 1.1; --mono-track: 0.55;
}
:root[data-font="hubot"] {
  --display: "Hubot Sans", "Geist", Arial, sans-serif;
  --body: "Mona Sans", "Geist", Arial, sans-serif;
  --mono: "Martian Mono", "Geist Mono", ui-monospace, Menlo, monospace;
  --h-weight: 650; --h-stretch: 87.5%; --h-track: -0.02em; --h2-track: -0.015em; --h1-scale: 1.04; --mono-track: 0.55;
}
:root[data-font="zalando"] {
  --display: "Zalando Sans", "Geist", Arial, sans-serif;
  --body: "Zalando Sans", "Geist", Arial, sans-serif;
  --mono: "Martian Mono", "Geist Mono", ui-monospace, Menlo, monospace;
  --h-weight: 650; --h-stretch: 115%; --h-track: -0.03em; --h2-track: -0.025em; --h1-scale: 0.9; --mono-track: 0.55;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--quartz);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }
img, svg, canvas { max-width: 100%; }
::selection { background: var(--signal); color: var(--ink); }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; letter-spacing: var(--h2-track); font-stretch: var(--h-stretch); }
h1 { font-size: calc(var(--t-h1) * var(--h1-scale)); line-height: 1.04; font-weight: var(--h-weight); letter-spacing: var(--h-track); }
h2 { font-size: calc(var(--t-h2) * (0.5 + var(--h1-scale) / 2)); line-height: 1.1; font-weight: var(--h-weight); }
h3 { font-size: var(--t-h3); line-height: 1.3; font-weight: 600; letter-spacing: -0.015em; }
p { margin: 0; max-width: 64ch; }
.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--slate); max-width: 58ch; }
.muted { color: var(--slate); }

.label {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: calc(0.12em * var(--mono-track));
  text-transform: uppercase;
  color: var(--slate);
  display: inline-flex; align-items: center; gap: 10px;
}
.label::before { content: ""; width: 14px; height: 1px; background: var(--signal); }
.label.plain::before { display: none; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--seam);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--quartz); }
/* Wordmark: fixed lettering in Geist Mono 600, whatever the type set. The tittle of the i is the
   brand's one graphic detail: a signal-blue square drawn over a dotless i at the font's own tittle
   position and size (measured: top 0.285em, left 0.27em, 0.12 x 0.115em). */
.brand-word { font-family: "Geist Mono", ui-monospace, Menlo, monospace; font-weight: 600; font-size: 1.25rem; letter-spacing: -0.06em; line-height: 1; color: var(--quartz); }
.brand-word .tittle { position: relative; }
.brand-word .tittle::after { content: ""; position: absolute; top: 0.285em; left: 0.27em; width: 0.12em; height: 0.115em; background: var(--signal); }
.brand-desc { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: calc(0.12em * var(--mono-track)); text-transform: uppercase; color: var(--slate); padding-left: 11px; margin-left: 3px; border-left: 1px solid var(--seam-2); line-height: 1; height: 15px; display: inline-flex; align-items: center; white-space: nowrap; }
@media (max-width: 1180px) and (min-width: 981px), (max-width: 420px) { .brand-desc { display: none; } }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a { white-space: nowrap; text-decoration: none; color: var(--slate); font-family: var(--mono); font-size: 0.75rem; letter-spacing: calc(0.1em * var(--mono-track)); text-transform: uppercase; transition: color .15s; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--quartz); }
.nav .btn, .nav .btn:hover, .nav .btn[aria-current="page"] { color: var(--ink); }
.menu-btn { display: none; background: none; border: 1px solid var(--seam-2); color: var(--quartz); border-radius: var(--radius); padding: 8px 14px; min-height: 44px; font: 500 var(--t-small) var(--body); cursor: pointer; }

@media (max-width: 1180px) and (min-width: 981px) { .nav { gap: 20px; } }
@media (max-width: 980px) {
  .menu-btn { display: inline-flex; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0;
         background: var(--ink); border-bottom: 1px solid var(--seam); padding: 8px var(--gutter) 20px; }
  .nav.open { display: flex; }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--seam); font-size: var(--t-body); }
  .nav .btn { margin-top: 14px; justify-content: center; border-bottom: 0; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font: 550 0.9375rem/1 var(--body); letter-spacing: -0.01em;
  padding: 14px 20px; border-radius: var(--radius); text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s, transform .15s;
  white-space: nowrap;
}
.btn-primary { background: var(--silver); color: var(--ink); }
.btn-primary:hover { background: var(--silver-hi); }
.btn-ghost { background: transparent; color: var(--quartz); border-color: var(--seam-2); }
.btn-ghost:hover { border-color: var(--slate-2); background: var(--rock); }
.btn-small { padding: 10px 14px; font-size: var(--t-small); }
.btn .arrow { transition: transform .15s; }
.btn:hover .arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .btn, .btn .arrow { transition: none; } }

/* ---------- sections ---------- */
.section { padding-block: clamp(64px, 7.5vw, 104px); border-top: 1px solid var(--seam); }

/* ---------- technical-drawing guides ----------
   Two hairlines run down the page at the edges of the content column, and a small crosshair
   marks where each section's top rule meets them (borrowed from the drafting-sheet look several
   YC data/eval sites use). One translucent neutral so the same lines read on paper and on the
   dark blocks. Positions are rounded to whole pixels so the hairlines stay crisp. */
:root { --guide: rgba(120, 130, 145, 0.22); --guide-mark: rgba(120, 130, 145, 0.75); --guide-x: round(down, calc(50% - var(--max) / 2), 1px); }
main { position: relative; }
main::before, main::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--guide); pointer-events: none; z-index: 1; }
main::before { left: var(--guide-x); }
main::after { right: var(--guide-x); }
.section { position: relative; }
.section::before, .section::after {
  content: ""; position: absolute; top: -5px; width: 9px; height: 9px; pointer-events: none; z-index: 2;
  background: linear-gradient(var(--guide-mark), var(--guide-mark)) center / 9px 1px no-repeat,
              linear-gradient(var(--guide-mark), var(--guide-mark)) center / 1px 9px no-repeat;
}
.section::before { left: calc(var(--guide-x) - 4px); }
.section::after { right: calc(var(--guide-x) - 4px); }
@media (max-width: 1279px) { main::before, main::after, .section::before, .section::after { display: none; } }
.section-head { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head .lead { max-width: 60ch; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; }  /* the next section's top rule closes it; a border here doubled the line */
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.hero::after { /* keep text legible over the strata */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--ink) 0%, color-mix(in srgb, var(--ink) var(--fade-mid), transparent) 50%, transparent 80%);
}
.hero .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 500px); gap: clamp(32px, 4vw, 64px); align-items: center; padding-block: clamp(64px, 8vw, 104px); }
.hero-copy { display: grid; gap: 26px; min-width: 0; }
.hero-copy h1 em { font-style: normal; background: var(--em); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.trust-line { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--slate); display: flex; flex-wrap: wrap; gap: 6px 18px; }
.trust-line span { display: inline-flex; align-items: center; gap: 8px; }
.trust-line span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--slate-2); }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } .hero::after { background: color-mix(in srgb, var(--ink) 70%, transparent); } .hero canvas { opacity: .35; } }

/* ---------- assay card ---------- */
.assay {
  background: color-mix(in srgb, var(--rock) 92%, transparent);
  border: 1px solid var(--seam-2); border-radius: var(--radius);
  font-family: var(--mono); font-size: 0.8125rem; line-height: 1.45; margin: 0;
  box-shadow: 0 30px 80px -40px var(--shade), 0 0 0 1px var(--hl) inset;
  min-width: 0;
}
.assay-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--seam); }
.assay-head b { font-weight: 500; color: var(--quartz); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.72rem; }
.assay-head span { color: var(--slate-2); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; }
.assay-sub { padding: 10px 16px 0; color: var(--slate); font-size: 0.74rem; }
.assay-table-wrap { overflow-x: auto; padding: 6px 8px 4px; }
.assay table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.assay th { text-align: left; font-weight: 400; color: var(--slate-2); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 8px 7px 6px; white-space: nowrap; }
.assay td { padding: 9px 6px; border-top: 1px solid var(--seam); color: var(--quartz); white-space: nowrap; }
.assay td.num { text-align: right; color: var(--slate); }
.assay th.num { text-align: right; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; letter-spacing: 0.02em; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: currentColor; }
.pill.ok { color: var(--ok); } .pill.warn { color: var(--warn); } .pill.no { color: var(--no); }
.assay-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 16px; padding: 12px 16px 14px; border-top: 1px solid var(--seam); color: var(--slate); }
.assay-foot strong { color: var(--signal); font-weight: 500; }
.bar { height: 4px; background: var(--seam); border-radius: 2px; overflow: hidden; margin: 0 16px 14px; }
.bar i { display: block; height: 100%; width: 62%; background: linear-gradient(90deg, var(--signal) 0%, var(--signal-hi) 100%); }

/* ---------- services ---------- */
.services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.service { background: var(--rock); border: 1px solid var(--seam); border-radius: var(--radius); padding: 28px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.service .step { font-family: var(--mono); font-size: var(--t-label); color: var(--slate-2); letter-spacing: 0.1em; text-transform: uppercase; }
.service .step b { color: var(--signal); font-weight: 500; }
.service p { color: var(--slate); }
.service ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: var(--t-small); color: var(--quartz); }
.service li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; }
.service li::before { content: "\2013"; color: var(--signal); font-family: var(--mono); line-height: inherit; }
@media (max-width: 980px) { .services { grid-template-columns: 1fr; } }

/* ---------- principles ---------- */
.principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--seam); border-left: 1px solid var(--seam); }
.principles > div { background: var(--cell); padding: 26px 26px 30px; border-right: 1px solid var(--seam); border-bottom: 1px solid var(--seam); display: grid; gap: 10px; align-content: start; min-width: 0; }
.principles p { color: var(--slate); font-size: 0.975rem; }
@media (max-width: 1080px) { .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .principles { grid-template-columns: 1fr; } }

/* ---------- fit ---------- */
.fit { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; margin-top: 28px; border-bottom: 1px solid var(--seam); }
.chip { font-family: var(--mono); font-size: 0.78rem; line-height: 1.45; color: var(--quartz); border-top: 1px solid var(--seam); padding: 12px 0 12px 22px; position: relative; }
.chip::before { content: "+"; position: absolute; left: 2px; top: 12px; color: var(--signal); }
@media (max-width: 560px) { .chips { grid-template-columns: 1fr; } }
.cta-card { background: radial-gradient(120% 120% at 100% 0%, var(--signal-lo) 0%, transparent 55%), var(--rock); border: 1px solid var(--seam-2); border-radius: var(--radius); padding: clamp(26px, 4vw, 40px); display: grid; gap: 16px; }
.cta-card p { color: var(--slate); }
@media (max-width: 900px) { .fit { grid-template-columns: 1fr; } }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
.email-box { display: flex; align-items: center; gap: 0; border: 1px solid var(--seam-2); border-radius: var(--radius); overflow: hidden; background: var(--rock); max-width: 100%; }
.email-box code { font-family: var(--mono); font-size: 1rem; padding: 14px 18px; color: var(--quartz); user-select: all; overflow-wrap: anywhere; }
.email-box button { border: 0; border-left: 1px solid var(--seam-2); background: transparent; color: var(--slate); padding: 14px 16px; font: 500 var(--t-small) var(--body); cursor: pointer; }
.email-box button:hover { color: var(--quartz); background: var(--rock-2); }
@media (max-width: 760px) { .contact { grid-template-columns: 1fr; align-items: start; } }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--seam); padding-block: 40px 56px; background: var(--ink); }
#contact { background: var(--ink); }
.site-footer .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: center; }
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: var(--t-small); }
.foot-links a { color: var(--slate); text-decoration: none; padding: 10px 0; display: inline-block; }
.foot-links a:hover { color: var(--quartz); }
.fine { grid-column: 1 / -1; color: var(--slate-2); font-size: 0.8125rem; display: grid; gap: 6px; }
@media (max-width: 700px) { .site-footer .wrap { grid-template-columns: 1fr; } }

/* ---------- page head (inner pages) ---------- */
.page-head { padding-block: clamp(56px, 8vw, 96px) clamp(36px, 5vw, 56px); border-bottom: 1px solid var(--seam); position: relative; overflow: hidden; }
.page-head .wrap { display: grid; gap: 18px; position: relative; }
.page-head::before { content: ""; position: absolute; right: -10%; top: -60%; width: 60%; height: 220%; background: radial-gradient(closest-side, var(--signal-lo), transparent 70%); pointer-events: none; }

/* ---------- FAQ ---------- */
.faq-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.faq-toc { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 88px); display: grid; gap: 4px; font-size: var(--t-small); }
.faq-toc a { color: var(--slate); text-decoration: none; padding: 6px 0; border-left: 1px solid var(--seam); padding-left: 14px; }
.faq-toc a:hover { color: var(--quartz); border-left-color: var(--signal); }
.faq-group { display: grid; gap: 0; margin-bottom: 56px; scroll-margin-top: 96px; }
.faq-group > .label { margin-bottom: 14px; }
details.qa { border-top: 1px solid var(--seam); }
details.qa:last-child { border-bottom: 1px solid var(--seam); }
details.qa summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; font-family: var(--display); font-weight: var(--h-weight); font-size: 1.125rem; letter-spacing: -0.01em; font-stretch: var(--h-stretch); }
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::after { content: "+"; position: absolute; right: 4px; top: 18px; font-family: var(--mono); color: var(--slate); font-size: 1.1rem; }
details.qa[open] summary::after { content: "–"; color: var(--signal); }
details.qa .ans { padding: 0 0 24px; color: var(--slate); display: grid; gap: 12px; }
details.qa .ans p { max-width: 68ch; }
@media (max-width: 860px) { .faq-layout { grid-template-columns: 1fr; } .faq-toc { position: static; grid-auto-flow: column; overflow-x: auto; grid-auto-columns: max-content; padding-bottom: 6px; } .faq-toc a { border-left: 0; border-bottom: 1px solid var(--seam); padding: 8px 12px 8px 0; } }

/* ---------- readiness check ---------- */
.check-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.q { border-top: 1px solid var(--seam); padding: 26px 0 30px; display: grid; gap: 14px; }
.q legend { display: contents; }
.q .qn { font-family: var(--mono); font-size: var(--t-label); color: var(--signal); letter-spacing: 0.1em; }
.q h3 { font-size: 1.1875rem; }
.q .hint { color: var(--slate); font-size: var(--t-small); max-width: 60ch; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opt span { display: inline-block; padding: 10px 14px; border: 1px solid var(--seam-2); border-radius: var(--radius); background: var(--rock); color: var(--slate); font-size: 0.9375rem; transition: border-color .12s, color .12s, background .12s; }
.opt input:hover + span { border-color: var(--slate-2); color: var(--quartz); }
.opt input:checked + span { border-color: var(--signal); color: var(--quartz); background: color-mix(in srgb, var(--signal) 10%, var(--rock)); }
.opt input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: 2px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

.result { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 88px); background: var(--rock); border: 1px solid var(--seam-2); border-radius: var(--radius); overflow: hidden; }
.result-top { padding: 22px 22px 18px; display: grid; gap: 10px; border-bottom: 1px solid var(--seam); }
.grade { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.grade b { font-family: var(--display); font-weight: 600; font-size: 1.75rem; letter-spacing: -0.02em; }
.grade span { font-family: var(--mono); color: var(--slate); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.meter { height: 6px; background: var(--seam); border-radius: 3px; overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--signal), var(--signal-hi)); transition: width .35s ease; }
@media (prefers-reduced-motion: reduce) { .meter i { transition: none; } }
.result-summary { color: var(--slate); font-size: 0.9375rem; }
.areas { list-style: none; margin: 0; padding: 8px 22px; display: grid; }
.areas li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--seam); font-size: 0.875rem; }
.areas li:first-child { border-top: 0; }
.areas .a-name { color: var(--quartz); }
.areas .a-note { grid-column: 1 / -1; color: var(--slate); font-size: 0.8125rem; }
.result-actions { padding: 16px 22px 22px; display: grid; gap: 10px; border-top: 1px solid var(--seam); }
.result-actions .row { display: flex; gap: 8px; flex-wrap: wrap; }
.example-flag { font-family: var(--mono); font-size: 0.72rem; color: var(--warn); letter-spacing: 0.04em; }
.copy-status { font-size: 0.8125rem; color: var(--ok); min-height: 1.2em; }
textarea.copy-fallback { width: 100%; min-height: 120px; background: var(--ink); color: var(--quartz); border: 1px solid var(--seam-2); border-radius: var(--radius); font: 0.8rem/1.5 var(--mono); padding: 10px; }
@media (max-width: 980px) { .check-layout { grid-template-columns: 1fr; } .result { position: static; } }


.mini-result { display: none; }
@media (max-width: 980px) {
  .mini-result { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 40;
    justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius);
    background: color-mix(in srgb, var(--rock-2) 94%, transparent); border: 1px solid var(--seam-2); text-decoration: none; color: var(--quartz);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 12px 40px -12px var(--shade); }
  .mini-result b { font-family: var(--display); font-weight: 600; margin-left: 8px; }
  .mini-score { font-family: var(--mono); color: var(--signal); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
  .check-layout { padding-bottom: 72px; }
}

/* ---------- skip link ---------- */
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--signal); color: var(--ink); padding: 10px 14px; border-radius: var(--radius); font-weight: 600; text-decoration: none; }
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); }

/* ---------- why now ---------- */
.why { display: grid; gap: 18px; }
.why .lead { max-width: 68ch; }

/* ---------- qualifies: full-bleed manifest band ---------- */
.band { background: var(--band); }
.manifest { border: 1px solid var(--seam-2); border-radius: var(--radius); overflow-x: auto; background: var(--sheet); box-shadow: 0 24px 60px -40px var(--shade); }
.manifest table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.manifest th { text-align: left; font-family: var(--mono); font-weight: 400; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate-2); padding: 14px 18px; border-bottom: 1px solid var(--seam-2); white-space: nowrap; }
.manifest td { padding: 13px 18px; border-top: 1px solid var(--seam); vertical-align: baseline; }
.manifest tbody tr:first-child td { border-top: 0; }
.manifest td.c-src { font-family: var(--mono); font-size: 0.8125rem; color: var(--slate); white-space: nowrap; }
.manifest td.c-why { color: var(--slate); }
.manifest td .pill { white-space: nowrap; font-family: var(--mono); font-size: 0.75rem; }
@media (max-width: 760px) { .manifest .c-src, .manifest .c-why { display: none; } .manifest td, .manifest th { padding: 12px 14px; } }

/* ---------- process with inline week bars ---------- */
.process { list-style: none; margin: 0; padding: 0; display: grid; }
.process li { display: grid; grid-template-columns: 56px minmax(0, 1fr) 300px; gap: 24px; padding: 24px 0; border-top: 1px solid var(--seam); align-items: start; }
.process li:last-child { border-bottom: 1px solid var(--seam); }
.process .n { font-family: var(--mono); color: var(--signal); font-size: 0.875rem; padding-top: 3px; }
.process p { color: var(--slate); margin-top: 6px; }
.p-time { display: grid; gap: 10px; padding-top: 4px; }
.when { font-family: var(--mono); font-size: 0.8125rem; color: var(--quartz); }
.track { position: relative; height: 8px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--seam) 0, var(--seam) 1px, transparent 1px, transparent 10%); box-shadow: inset 0 0 0 1px var(--seam); }
.track i { position: absolute; top: 0; bottom: 0; border-radius: 2px; background: color-mix(in srgb, var(--signal) 55%, transparent); }
.track i.hot { background: var(--signal); }
.axis-note { display: grid; grid-template-columns: 56px minmax(0, 1fr) 300px; gap: 24px; margin-top: 10px; font-family: var(--mono); font-size: 0.75rem; color: var(--slate-2); max-width: none; }
.axis-note span { grid-column: 3; grid-row: 1; }
.axis-note span:last-child { justify-self: end; }
@media (max-width: 760px) {
  .process li { grid-template-columns: 36px minmax(0, 1fr); gap: 14px; }
  .p-time { grid-column: 2; padding-top: 0; }
  .track, .axis-note { display: none; }
}

/* ---------- contact ---------- */
.contact-actions { display: grid; gap: 12px; justify-items: start; }

/* ---------- readiness: review fixes ---------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.grade span { white-space: nowrap; }
.result { max-height: calc(100vh - 104px); overflow: auto; }
.example-line { font-size: 0.8125rem; color: var(--slate-2); border-top: 1px dashed var(--seam-2); padding-top: 10px; }
.example-line b { color: var(--slate); font-weight: 500; }
.opt input:checked + span { border-color: var(--silver); color: var(--ink); background: var(--silver); font-weight: 600; }
.opt input:checked + span::before { content: "\2713"; margin-right: 6px; font-weight: 700; }
@media (max-width: 980px) { .result { max-height: none; overflow: visible; } }

@media (max-width: 860px) { .faq-toc { grid-auto-flow: row; grid-template-columns: 1fr 1fr; overflow: visible; } .faq-toc a { padding: 10px 8px 10px 0; } }

@media (max-width: 560px) { .assay .c-vol, .assay .c-en { display: none; } }

/* ---------- hero visual: layered instrument panels ---------- */
.hero-visual { position: relative; perspective: 1800px; min-width: 0; padding-top: 128px; }
.hero-visual .assay, .fit-panel { transform: rotateX(9deg) rotateY(-15deg) rotateZ(2.5deg); transform-origin: 60% 50%; }
.hero-visual .assay {
  background: linear-gradient(180deg, var(--hl) 0%, transparent 22%), var(--rock);
  box-shadow: 0 1px 0 var(--hl-2) inset, 0 40px 90px -30px var(--shade), 30px 30px 60px -40px var(--shade-tint);
}
.fit-panel {
  position: absolute; right: -10px; top: 0; z-index: 3; width: min(290px, 66%);
  background: linear-gradient(180deg, var(--hl-2) 0%, transparent 30%), var(--rock-2);
  border: 1px solid var(--seam-2); border-radius: var(--radius); padding: 12px 14px 14px;
  font-family: var(--mono); font-size: 0.75rem; color: var(--quartz);
  box-shadow: 0 1px 0 var(--hl-2) inset, 0 30px 60px -20px var(--shade);
  translate: 0 0 60px;
}
.fp-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.fp-head b { font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.6875rem; }
.fp-head span { color: var(--slate-2); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; }
.fp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 8px 0 6px; border-top: 1px solid var(--seam); }
.fp-row .v { color: var(--signal-hi); font-variant-numeric: tabular-nums; }
.fp-bar { grid-column: 1 / -1; height: 3px; background: var(--seam); border-radius: 2px; overflow: hidden; }
.fp-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--signal) 0%, var(--signal-hi) 100%); }
@media (max-width: 900px) {
  .hero-visual { padding-top: 0; perspective: none; }
  .hero-visual .assay { transform: none; }
  .fit-panel { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hero-visual .assay, .fit-panel { transform: none; } }

/* ---------- hero: route for forwarded readers ---------- */
.route { font-family: var(--mono); font-size: 0.8125rem; color: var(--slate); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0; }
.route a { color: var(--quartz); text-decoration: none; border-bottom: 1px solid var(--seam-2); padding-bottom: 1px; }
.route a:hover { border-bottom-color: var(--signal); color: var(--signal); }

/* ---------- who signs off: four readers ---------- */
.role-tabs { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--seam-2); border-radius: var(--radius); padding: 4px; gap: 4px; margin-bottom: 28px; background: var(--rock); }
.role-tabs [role="tab"] { font: 500 0.75rem/1 var(--mono); letter-spacing: calc(0.1em * var(--mono-track)); text-transform: uppercase; color: var(--slate); background: transparent; border: 0; border-radius: var(--radius); padding: 12px 18px; min-height: 40px; cursor: pointer; white-space: nowrap; }
.role-tabs [role="tab"]:hover { color: var(--quartz); }
.role-tabs [role="tab"][aria-selected="true"] { background: var(--silver); color: var(--ink); }
.js-roles .role-panel[hidden] { display: none; }
.role-panel { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(24px, 4vw, 56px); align-items: start; scroll-margin-top: 96px; }
.role-panel + .role-panel { margin-top: 40px; }            /* no-JS: panels stack */
.js-roles .role-panel + .role-panel { margin-top: 0; }
.role-panel:focus-visible { outline-offset: 8px; }
.role-main { display: grid; gap: 14px; min-width: 0; }
.role-main h3 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); line-height: 1.2; letter-spacing: -0.02em; }
.role-qa { margin: 8px 0 0; display: grid; border-top: 1px solid var(--seam); }
.role-qa > div { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); gap: 8px 28px; padding: 16px 0; border-bottom: 1px solid var(--seam); }
.role-qa dt { font-family: var(--display); font-weight: 560; color: var(--quartz); }
.role-qa dd { margin: 0; color: var(--slate); }
.role-card { border: 1px solid var(--seam-2); border-radius: var(--radius); background: var(--rock); padding: 22px 22px 20px; display: grid; gap: 12px; align-content: start; }
.role-card ul { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 8px; font-size: 0.9375rem; }
.role-card li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; }
.role-card li::before { content: "+"; font-family: var(--mono); color: var(--signal); }
.role-card .role-link { justify-self: start; margin-top: 4px; }
@media (max-width: 900px) {
  .role-panel { grid-template-columns: 1fr; }
  .role-qa > div { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 640px) {
  .role-tabs { display: grid; grid-auto-flow: row; grid-template-columns: 1fr 1fr; width: 100%; }
}

/* engineering: who does what, drawn as two groups (our calls, then the buyer's delivery team) */
.flow { margin: 8px 0 0; grid-column: 1 / -1; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; counter-reset: flow; }
.flow-group { display: grid; gap: 10px; align-content: start; min-width: 0; }
.flow ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.flow li { position: relative; border: 1px solid var(--seam-2); border-radius: var(--radius); background: var(--rock); padding: 12px 12px 14px; display: grid; gap: 6px; align-content: start; min-width: 0; counter-increment: flow; }
.flow li::before { content: counter(flow, decimal-leading-zero); font: 500 0.6875rem/1 var(--mono); color: var(--signal); }
.flow li::after { content: "\2192"; position: absolute; right: -15px; top: 50%; transform: translateY(-50%); font: 500 0.75rem/1 var(--mono); color: var(--slate-2); }
.flow .them li:last-child::after { display: none; }
.flow .them li { border-style: dashed; background: transparent; }
.flow .them li::before { color: var(--slate-2); }
.flow b { font: 600 0.875rem/1.25 var(--display); color: var(--quartz); }
.flow li span { font-size: 0.8125rem; line-height: 1.4; color: var(--slate); }
.flow-cap { margin: 0; padding-top: 8px; font: 500 0.6875rem/1.3 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--slate-2); max-width: none; }
.flow .us .flow-cap { border-top: 1px solid var(--signal); color: var(--signal); }
.flow .them .flow-cap { border-top: 1px dashed var(--seam-2); }
@media (max-width: 1100px) {
  .flow { grid-template-columns: 1fr; gap: 22px; }
  .flow .us li:last-child::after { content: "\2193"; right: auto; left: 50%; top: auto; bottom: -38px; transform: translateX(-50%); }
}
@media (max-width: 560px) {
  .flow ol { grid-template-columns: 1fr; gap: 14px; }
  .flow li::after { content: "\2193"; right: auto; left: 50%; top: auto; bottom: -14px; transform: translateX(-50%); }
  .flow .us li:last-child::after { bottom: -38px; }
}


/* ================= strict layout (2026-10-04): fewer, larger blocks; square corners =================
   Igor: "less small studio, more serious; too much text". One statement per screen, hairline structure,
   the example readiness review as the main visual. */
:root { --t-h1: clamp(2.75rem, 6.2vw, 6.25rem); --t-h2: clamp(2rem, 3.9vw, 3.5rem); }
.section { padding-block: clamp(88px, 10vw, 152px); }
.section-head { margin-bottom: clamp(40px, 5.5vw, 72px); }
.page-head h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); }

/* hero: one statement, full screen, commitments along the bottom rule */
.hero { min-height: min(calc(100svh - 64px), 920px); display: flex; background: var(--ink); color: var(--quartz); }
.hero .wrap.hero-inner { grid-template-columns: minmax(0, 1fr); align-content: end; gap: 32px; padding-block: clamp(96px, 14vh, 168px) 36px; width: 100%; }
.hero h1 { font-size: calc(var(--t-h1) * var(--h1-scale)); line-height: 1; max-width: 14ch; }
.hero h1 em { font-style: normal; background: var(--em); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero::after { background: linear-gradient(90deg, var(--ink) 0%, color-mix(in srgb, var(--ink) 92%, transparent) 50%, color-mix(in srgb, var(--ink) 40%, transparent) 72%, transparent 92%), linear-gradient(0deg, var(--ink) 0%, transparent 36%); }
.hero-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; }
.hero-foot .lead { max-width: 46ch; }
.hero-meta { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--seam-2); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 32px; }
.hero-meta li { display: grid; gap: 6px; align-content: start; font-family: var(--mono); font-size: 0.75rem; line-height: 1.5; }
.hero-meta b { font-weight: 500; letter-spacing: calc(0.1em * var(--mono-track)); text-transform: uppercase; color: var(--quartz); }
.hero-meta span { color: var(--slate); }
.hero-meta .route span { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.hero-meta .route a { color: var(--quartz); text-decoration: none; border-bottom: 1px solid var(--seam-2); }
.hero-meta .route a:hover { color: var(--signal); border-bottom-color: var(--signal); }
@media (max-width: 900px) { .hero { min-height: auto; } .hero-foot { grid-template-columns: 1fr; } .hero-meta { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .hero-meta { grid-template-columns: 1fr; } }

/* why now: three short reasons under one rule each */
.reasons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.reasons li { border-top: 1px solid var(--seam-2); padding-top: 20px; display: grid; gap: 14px; align-content: start; }
.reasons .n { font-family: var(--mono); font-size: 0.8125rem; color: var(--signal); }
.reasons p { font-size: 1.1875rem; line-height: 1.5; color: var(--quartz); }
@media (max-width: 820px) { .reasons { grid-template-columns: 1fr; } }

/* what we do: three pillars, no cards */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.pillars > div { border-top: 1px solid var(--quartz); padding-top: 20px; display: grid; gap: 12px; align-content: start; }
.pillars .step { font-family: var(--mono); font-size: var(--t-label); letter-spacing: calc(0.12em * var(--mono-track)); text-transform: uppercase; color: var(--signal); }
.pillars h3 { font-size: clamp(1.375rem, 2vw, 1.75rem); letter-spacing: -0.025em; }
.pillars p { color: var(--slate); }
@media (max-width: 820px) { .pillars { grid-template-columns: 1fr; } }

/* the example readiness review: the page's one big visual */
.sample { margin-top: clamp(56px, 7vw, 96px); background: var(--ink); color: var(--quartz); border: 1px solid var(--seam-2); border-radius: var(--radius); }
.sample-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 16px 22px; border-bottom: 1px solid var(--seam); }
.sample-body { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.sample .assay { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 8px 12px 14px; }
.sample .assay td { padding: 12px 8px; }
.sample-side { border-left: 1px solid var(--seam); display: grid; align-content: start; }
.score { display: grid; gap: 6px; padding: 22px; border-bottom: 1px solid var(--seam); font-family: var(--mono); font-size: 0.8125rem; color: var(--slate); }
.score b { font-family: var(--display); font-weight: 600; font-size: 4rem; line-height: 1; letter-spacing: -0.045em; color: var(--quartz); }
.score .bar { margin: 10px 0 0; }
.fit-list { padding: 18px 22px 22px; font-family: var(--mono); font-size: 0.75rem; color: var(--quartz); }
@media (max-width: 900px) { .sample-body { grid-template-columns: 1fr; } .sample-side { border-left: 0; border-top: 1px solid var(--seam); } }

/* principles: a row of short statements on hairlines */
.principles { border: 0; gap: 32px; }
.principles > div { border: 0; border-top: 1px solid var(--seam-2); background: none; padding: 20px 0 0; }

/* closing: the call, and who it fits */
.closing-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.closing-main { display: grid; gap: 22px; }
.closing-main .email-box { justify-self: start; }
.closing-fit { display: grid; gap: 16px; }
.closing .chips { grid-template-columns: 1fr; margin-top: 0; }
@media (max-width: 900px) { .closing-grid { grid-template-columns: 1fr; } }
/* dark header (mixed look): near-opaque so it stays black over light pages */
:root[data-look="mixed"] .site-header.on-dark { background: color-mix(in srgb, var(--ink) 96%, transparent); border-bottom-color: var(--seam); }

/* ================= v3 (2026-10-05): plainer, merged with Nazar's draft =================
   Nazar: "simpler messages, a design that doesn't look AI-made". Light page and header; dark only for
   "why it's free" and the closing. No canvas, no drafting guides, no gradient type, sentence-case labels
   in the body face (mono stays for the wordmark, numbers and the receipt). Gennadii's pass starts here. */
:root { --t-h1: clamp(2.5rem, 5.4vw, 4.75rem); --t-h2: clamp(1.875rem, 3.2vw, 2.75rem); --radius: 6px; }
.section { padding-block: clamp(72px, 8.5vw, 124px); }
.section-head { margin-bottom: clamp(32px, 4.5vw, 56px); }
main::before, main::after, .section::before, .section::after { display: none; }

.label { font-family: var(--body); font-size: 0.9375rem; font-weight: 550; letter-spacing: -0.005em; text-transform: none; color: var(--signal); gap: 0; }
.label::before { display: none; }
.label.plain { color: var(--slate); font-size: 0.875rem; }
.brand-desc { font-family: var(--body); font-size: 0.8125rem; letter-spacing: 0; text-transform: none; }
.nav a { font-family: var(--body); font-size: 0.9375rem; letter-spacing: -0.005em; text-transform: none; }
.nav .btn { color: var(--ink); }
.role-tabs [role="tab"] { font: 550 0.875rem/1 var(--body); letter-spacing: 0; text-transform: none; }
.flow-cap { font: 500 0.8125rem/1.35 var(--body); letter-spacing: 0; text-transform: none; }
.pillars .step { font-family: var(--body); font-size: 0.875rem; font-weight: 550; letter-spacing: 0; text-transform: none; }
.text-link { color: var(--signal); text-decoration: none; font-weight: 550; border-bottom: 1px solid color-mix(in srgb, var(--signal) 35%, transparent); }
.text-link:hover { border-bottom-color: var(--signal); }

/* hero: light, sized to its content */
.hero { min-height: 0; display: block; background: var(--ink); }
.hero::after { display: none; }
.hero .wrap.hero-inner { align-content: start; gap: 28px; padding-block: clamp(72px, 10vw, 136px) clamp(48px, 6vw, 72px); }
.hero h1 { font-size: calc(var(--t-h1) * var(--h1-scale)); line-height: 1.02; max-width: 15ch; }
.hero-foot { align-items: end; }
.hero-foot .lead { max-width: 52ch; color: var(--slate); }
.proof { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--seam-2); }
.proof li { display: grid; gap: 6px; align-content: start; padding: 22px 24px 4px 0; min-width: 0; }
.proof li + li { padding-left: 24px; border-left: 1px solid var(--seam); }
.proof b { font-family: var(--display); font-weight: 600; font-size: clamp(1.625rem, 2.6vw, 2.25rem); line-height: 1; letter-spacing: -0.035em; color: var(--quartz); font-variant-numeric: tabular-nums; }
.proof span { color: var(--slate); font-size: 0.9375rem; line-height: 1.4; }
@media (max-width: 900px) {
  .proof { grid-template-columns: 1fr 1fr; }
  .proof li:nth-child(3) { padding-left: 0; border-left: 0; }
  .proof li:nth-child(n+3) { border-top: 1px solid var(--seam); margin-top: 18px; }
}
@media (max-width: 460px) { .proof { grid-template-columns: 1fr; } .proof li, .proof li + li { padding-left: 0; border-left: 0; } .proof li + li { border-top: 1px solid var(--seam); margin-top: 14px; } }

/* the buyers, in one line */
.buyers-line { border-top: 1px solid var(--seam); background: var(--rock); }
.buyers-line .wrap { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px 32px; align-items: baseline; padding-block: 28px; }
.buyers-line p { font-size: 1.125rem; line-height: 1.5; color: var(--quartz); max-width: 70ch; }
@media (max-width: 700px) { .buyers-line .wrap { grid-template-columns: 1fr; } }

/* how it works: a real sequence, so it is numbered */
.how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.how li { border-top: 2px solid var(--quartz); padding-top: 18px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.how .n { font-size: 0.875rem; font-weight: 550; color: var(--signal); font-variant-numeric: tabular-nums; }
.how h3 { font-size: 1.3125rem; letter-spacing: -0.02em; }
.how p { color: var(--slate); }
.how-note { margin-top: clamp(28px, 4vw, 40px); padding-top: 18px; border-top: 1px solid var(--seam); color: var(--slate); max-width: 80ch; }
@media (max-width: 980px) { .how { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .how { grid-template-columns: 1fr; } }

/* what qualifies: two lists side by side */
.qual { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.qual-panel { background: var(--rock); border: 1px solid var(--seam); border-radius: var(--radius); padding: clamp(22px, 3vw, 32px); display: grid; gap: 18px; align-content: start; min-width: 0; }
.qual-panel h3 { font-size: 1.1875rem; }
.tools { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--seam); }
.tools li { display: grid; gap: 2px; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--seam); min-width: 0; }
.tools li:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--seam); }
.tools b { font-weight: 600; }
.tools span { color: var(--slate); font-size: 0.9375rem; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; }
.checks li::before { content: "\2713"; grid-row: 1 / span 2; color: var(--signal); font-weight: 700; line-height: 1.6; }
.checks b { font-weight: 600; }
.checks span { grid-column: 2; color: var(--slate); font-size: 0.9375rem; }
.stays-out { margin-top: 22px; color: var(--slate); max-width: none; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.stays-out b { color: var(--quartz); font-weight: 600; }
.stays-out a { color: var(--signal); text-decoration: none; font-weight: 550; }
@media (max-width: 860px) { .qual { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .tools { grid-template-columns: 1fr; } .tools li:nth-child(even) { padding-left: 0; border-left: 0; } }

/* what we do: four pillars */
.pillars.four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.pillars.four h3 { font-size: clamp(1.25rem, 1.7vw, 1.4375rem); }
@media (max-width: 1080px) { .pillars.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pillars.four { grid-template-columns: 1fr; } }

/* why it's free: who pays whom, set like a payout statement */
.free { background: var(--ink); }
.free-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: clamp(32px, 6vw, 96px); align-items: center; }
.free-copy { display: grid; gap: 20px; }
.receipt { margin: 0; border: 1px solid var(--seam-2); border-radius: var(--radius); background: var(--rock); font-family: var(--mono); font-size: 0.875rem; }
.receipt div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 20px; }
.receipt div + div { border-top: 1px dashed var(--seam-2); }
.receipt dt { color: var(--slate); }
.receipt dd { margin: 0; color: var(--quartz); text-align: right; }
.receipt .hl dt { color: var(--quartz); }
.receipt .hl dd { font-family: var(--display); font-weight: 600; font-size: 2rem; line-height: 1; letter-spacing: -0.03em; color: var(--signal-hi); }
@media (max-width: 900px) { .free-grid { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .receipt div { flex-direction: column; gap: 4px; } .receipt dd { text-align: left; } }

/* who signs off: the aside is a light card now */
.role-card { background: var(--rock); }

/* safety */
.safety { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); }
.safety > div { display: grid; gap: 16px; align-content: start; border-top: 1px solid var(--seam-2); padding-top: 20px; min-width: 0; }
.safety p { color: var(--slate); }
.never { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.never li { display: grid; grid-template-columns: 26px minmax(0, 1fr); }
.never li::before { content: ""; width: 14px; height: 2px; background: var(--no); margin-top: 0.8em; }
@media (max-width: 800px) { .safety { grid-template-columns: 1fr; } }

/* who we are */
.about { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.about > div:first-child { display: grid; gap: 16px; }
.about-copy { display: grid; gap: 16px; }
.about-copy .lead { color: var(--quartz); }
.about-copy p:not(.lead) { color: var(--slate); }
@media (max-width: 800px) { .about { grid-template-columns: 1fr; } }

/* short FAQ on the home page */
.faq-short { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.faq-short .section-head { margin-bottom: 0; }
.faq-list details.qa summary { font-size: 1.0625rem; }
@media (max-width: 860px) { .faq-short { grid-template-columns: 1fr; } }

/* closing */
.closing .chips { border-bottom: 1px solid var(--seam); }
.closing .chip { font-family: var(--body); font-size: 0.9375rem; }
.closing .chip::before { content: "\2713"; font-size: 0.8rem; top: 13px; }
.hero h1 { max-width: 27ch; }
.hero h1 .h1-2 { display: block; }
.tools li { align-content: start; }
.closing.on-dark { background: var(--ink); }
.site-header { background: color-mix(in srgb, var(--ink) 94%, transparent); }

/* hero schematic (from Nazar's draft): your tools, through us, to the buyers. The only motion on the page:
   the pad ring turns once a minute; off under reduced motion. */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.hero-copy { display: grid; gap: 24px; align-content: start; min-width: 0; }
.hero .hero-copy h1 { font-size: clamp(2.375rem, 4.3vw, 4rem); max-width: none; }
.hero .hero-copy .lead { max-width: 52ch; }
.schematic { margin: 0; background: var(--rock); border: 1px solid var(--seam); border-radius: 16px; padding: clamp(10px, 1.6vw, 20px); min-width: 0; }
.schematic svg { display: block; width: 100%; height: auto; }
.sc-title { font-family: var(--mono); font-size: 13px; fill: var(--slate); letter-spacing: 0.02em; }
.sc-chip { fill: var(--ink); stroke: var(--seam-2); stroke-width: 1.2; }
.sc-chip.dashed { fill: none; stroke-dasharray: 5 5; }
.sc-text { font-family: var(--body); font-size: 15px; font-weight: 500; fill: var(--quartz); }
.sc-text.dim { fill: var(--slate); }
.sc-note { font-family: var(--mono); font-size: 12.5px; fill: var(--slate); }
.sc-wire { fill: none; stroke: var(--slate-2); stroke-width: 1.3; opacity: 0.6; }
.sc-wire-out { fill: none; stroke: var(--signal); stroke-width: 2; }
.sc-wire-out.dim { opacity: 0.45; }
.sc-plate { fill: var(--silver); }
.sc-pads { fill: none; stroke: var(--ink); stroke-width: 12; stroke-dasharray: 13.5 12; transform-origin: 372px 210px; animation: sc-spin 60s linear infinite; }
.sc-hub { fill: var(--rock); }
.sc-brand { font-family: "Geist Mono", ui-monospace, Menlo, monospace; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; fill: var(--signal); }
@keyframes sc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sc-pads { animation: none; } }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } .schematic { max-width: 680px; } }
@media (max-width: 520px) { .schematic { display: none; } }
.hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
.hero .hero-copy h1 { font-size: clamp(2.375rem, 3.7vw, 3.625rem); }
.sc-text { font-size: 17px; }
.sc-title { font-size: 14px; }
.sc-note { font-size: 14px; }
.sc-brand { font-size: 19px; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } }
.page-head::before { display: none; }

/* ---------- application form (closing, on dark) ---------- */
.on-dark { color-scheme: dark; }
.apply { position: relative; display: grid; gap: 16px; min-width: 0; padding: clamp(20px, 3vw, 28px); background: var(--rock); border: 1px solid var(--seam); border-radius: var(--radius); }
.field { display: grid; gap: 7px; min-width: 0; }
.field label { font-family: var(--mono); font-size: var(--t-label); letter-spacing: calc(0.1em * var(--mono-track)); text-transform: uppercase; color: var(--slate); }
.field input, .field select, .field textarea { width: 100%; min-height: 46px; padding: 11px 14px; background: var(--ink); color: var(--quartz); border: 1px solid var(--seam-2); border-radius: var(--radius); font: 400 1rem/1.4 var(--body); }
.field textarea { resize: vertical; min-height: 92px; }
.field input::placeholder, .field textarea::placeholder { color: var(--slate-2); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--slate-2); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal); }
.field [aria-invalid="true"] { border-color: #ff8f80; }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }
.apply .btn { justify-self: start; }
.apply .btn[disabled] { opacity: .6; cursor: progress; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: var(--t-small); margin: -4px 0 0; }
.form-status { margin: 0; font-size: var(--t-small); line-height: 1.5; }
.form-status.ok { color: var(--signal-hi); }
.form-status.err { color: #ffb3a8; }
.apply.sent .field, .apply.sent .field-row, .apply.sent .btn, .apply.sent .form-note { display: none; }
.apply.sent .form-status { font-size: 1.0625rem; color: var(--quartz); }

/* wordmark without an "i": a small gem (rotated square) in the accent colour */
.gem-mark { display: inline-block; width: 0.34em; height: 0.34em; margin-right: 0.34em; background: var(--signal); transform: rotate(45deg) translateY(-0.06em); vertical-align: middle; }

/* =====================================================================
   "paper" look + "editorial" type (2026-10-08): the site should read like a small
   advisory firm, not a dev tool. Warm paper, a book serif for headings, a plain
   sans for text, one emerald accent (the gem). No tracked-out mono labels,
   no drafting guides, no black slabs: the old .on-dark blocks become a tinted sheet.
   ===================================================================== */
:root[data-look="paper"] {
  --ink: #f7f3ec;        /* page */
  --rock: #fffdf8;       /* raised */
  --rock-2: #fbf7f0;
  --seam: #e5ddcf;
  --seam-2: #d2c8b7;
  --quartz: #1e1c18;     /* text */
  --slate: #59544b;
  --slate-2: #6c665c;
  --silver: #1e1c18;     /* primary button */
  --silver-hi: #3a362f;
  --silver-lo: #6c665c;
  --signal: #1d6a54;     /* emerald */
  --signal-hi: #24826a;
  --signal-lo: rgba(29, 106, 84, 0.08);
  --ok: #1d6a54; --warn: #92600a; --no: #b03a2b;
  --em: linear-gradient(#1d6a54, #1d6a54);
  --hl: rgba(255, 255, 255, 0.9); --hl-2: #fff;
  --shade: rgba(60, 45, 20, 0.14); --shade-tint: rgba(29, 106, 84, 0.10);
  --band: #f0e9dd; --sheet: #fffdf8; --cell: #fffdf8; --fade-mid: 92%;
  --cv-far: #8d867a; --cv-near: #1e1c18; --cv-glow: #1d6a54; --cv-pulse: #1d6a54; --cv-alpha: 0.2;
  --radius: 6px;
  color-scheme: light;
}
:root[data-look="paper"] .on-dark {
  --ink: #efe8dc; --rock: #f8f3ea; --rock-2: #fbf7f0; --seam: #ddd3c3; --seam-2: #cbbfac;
  color: var(--quartz); color-scheme: light;
}
:root[data-font="editorial"] {
  --display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --body: "Source Sans 3", "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: "Source Sans 3", "Helvetica Neue", Arial, system-ui, sans-serif;
  --h-weight: 500; --h-track: -0.012em; --h2-track: -0.008em; --h1-scale: 1.06; --mono-track: 0;
  --t-body: 1.0938rem;
}
:root[data-font="editorial"] body { line-height: 1.62; }
:root[data-font="editorial"] h3 { font-family: var(--body); font-weight: 600; letter-spacing: -0.005em; }
:root[data-font="editorial"] h1 { line-height: 1.08; }

/* labels: a small italic serif kicker instead of tracked caps */
:root[data-look="paper"] .label,
:root[data-look="paper"] .pillars .step,
:root[data-look="paper"] .service .step,
:root[data-look="paper"] .how .n,
:root[data-look="paper"] .flow-cap,
:root[data-look="paper"] .hero-meta b,
:root[data-look="paper"] .fp-head b, :root[data-look="paper"] .fp-head span,
:root[data-look="paper"] .assay-head b, :root[data-look="paper"] .assay-head span {
  font-family: var(--display); font-style: italic; font-weight: 400; text-transform: none;
  letter-spacing: 0; font-size: 1.0625rem; color: var(--signal);
}
:root[data-look="paper"] .label::before { display: none; }
:root[data-look="paper"] .label.plain { color: var(--slate); }

/* header and nav: sentence case, no blur slab */
:root[data-look="paper"] .site-header,
:root[data-look="paper"] .site-header.on-dark { background: color-mix(in srgb, #f7f3ec 94%, transparent); border-bottom-color: #e5ddcf; }
:root[data-look="paper"] .nav a { font-family: var(--body); font-size: 0.975rem; letter-spacing: 0; text-transform: none; }
:root[data-look="paper"] .brand-word { font-family: var(--display); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.01em; text-transform: capitalize; }
:root[data-look="paper"] .brand-desc { font-family: var(--body); text-transform: none; letter-spacing: 0; font-size: 0.875rem; }
:root[data-look="paper"] .gem-mark { width: 0.3em; height: 0.3em; margin-right: 0.32em; }

/* buttons: softer, still plain */
:root[data-look="paper"] .btn { font-weight: 600; letter-spacing: 0; border-radius: 999px; padding: 13px 22px; }
:root[data-look="paper"] .btn-small { padding: 9px 16px; }
:root[data-look="paper"] .btn-ghost { background: transparent; }

/* no drafting guides or crosshairs */
:root[data-look="paper"] main::before, :root[data-look="paper"] main::after,
:root[data-look="paper"] .section::before, :root[data-look="paper"] .section::after { display: none; }

/* role tabs, field labels, table heads: plain sans */
:root[data-look="paper"] .role-tabs [role="tab"] { font: 600 0.9375rem/1 var(--body); letter-spacing: 0; text-transform: none; }
:root[data-look="paper"] .field label { font-family: var(--body); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--quartz); }
:root[data-look="paper"] .manifest th, :root[data-look="paper"] .assay th { font-family: var(--body); text-transform: none; letter-spacing: 0; font-size: 0.8125rem; }
:root[data-look="paper"] .chip { font-family: var(--body); }
:root[data-look="paper"] .email-box code { font-family: var(--body); font-weight: 600; }

/* the hero diagram becomes a line drawing: ink hairlines, serif titles, no spinning parts */
:root[data-look="paper"] .schematic { background: transparent; border-color: transparent; box-shadow: none; }
:root[data-look="paper"] .sc-chip { fill: #fffdf8; stroke: #cbbfac; stroke-width: 1; }
:root[data-look="paper"] .sc-wire { stroke: #8d867a; stroke-width: 1; opacity: 0.8; }
:root[data-look="paper"] .sc-wire-out { stroke: var(--signal); stroke-width: 1.4; }
:root[data-look="paper"] .sc-plate { fill: none; stroke: #1e1c18; stroke-width: 1.2; }
:root[data-look="paper"] .sc-pads { stroke: #cbbfac; stroke-width: 1; stroke-dasharray: 2 6; animation: none; }
:root[data-look="paper"] .sc-hub { fill: var(--signal); }
:root[data-look="paper"] .sc-title { font-family: var(--display); font-style: italic; font-size: 17px; fill: var(--slate); letter-spacing: 0; }
:root[data-look="paper"] .sc-note { font-family: var(--display); font-style: italic; fill: var(--slate); }
:root[data-look="paper"] .sc-text { font-family: var(--body); font-weight: 500; }
:root[data-look="paper"] .sc-brand { font-family: var(--display); font-weight: 600; letter-spacing: 0; fill: var(--quartz); text-transform: capitalize; }

/* the former dark blocks: a tinted sheet with a hairline, not a slab */
:root[data-look="paper"] .free.on-dark,
:root[data-look="paper"] .closing.on-dark { background: #efe8dc; border-top: 1px solid #e5ddcf; }
:root[data-look="paper"] .site-footer.on-dark { background: #1e2a25; color: #e9e4da; --quartz: #f4efe6; --slate: #b9b2a5; --slate-2: #a49d90; --seam: #34413b; --seam-2: #46544d; --signal: #8fd1b6; }
:root[data-look="paper"] .apply { background: #fffdf8; box-shadow: 0 1px 0 rgba(60, 45, 20, 0.04); }
:root[data-look="paper"] .form-status.ok { color: var(--signal); }
:root[data-look="paper"] .form-status.err { color: #b03a2b; }
:root[data-look="paper"] .field [aria-invalid="true"] { border-color: #b03a2b; }
:root[data-look="paper"] .field input, :root[data-look="paper"] .field select, :root[data-look="paper"] .field textarea { background: #ffffff; border-color: #d2c8b7; }
:root[data-look="paper"] .field input:hover, :root[data-look="paper"] .field select:hover, :root[data-look="paper"] .field textarea:hover { border-color: #a99f8f; }
:root[data-look="paper"] code { font-family: var(--body); font-weight: 600; }
:root[data-look="paper"] .hero h1 .h1-2 { font-style: italic; color: var(--signal); }