html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body { font-family: var(--font-sans); background: #fff; color: var(--color-ink);
font-size: 16px; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* ═══ Layout ═══════════════════════════════════════════════════════════
Three column widths (§43): the navigation bar and footer run widest at
1440, page content sits in 1200, and the video demo narrows to 1024 so
the carousel reads as a focused window rather than a full-bleed band. */
.wrap { max-width: 1200px; margin-inline: auto; padding-inline: 20px; }
@media (min-width: 768px) { .wrap { padding-inline: 40px; } }
.hdr .wrap, footer .wrap { max-width: 1440px; }
.wrap-video { max-width: 1024px; }
.sec { padding-block: 88px; }
@media (min-width: 768px) { .sec { padding-block: 120px; } }
/* Local trim: #problem closes on a compact row, so its bottom rule sits
tighter than the section default. */
#problem { padding-block: 88px 72px; }
@media (min-width: 768px) { #problem { padding-block: 120px 88px; } }
/* ═══ Type ═════════════════════════════════════════════════════════════ */
.d1 { font-size: clamp(2.5rem, 5.2vw, 4.25rem); line-height: 1.03; letter-spacing: -0.033em; font-weight: 600; }
.d2 { font-size: clamp(1.875rem, 3.8vw, 3rem); line-height: 1.08; letter-spacing: -0.028em; font-weight: 600; }
.d3 { font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; }
.d4 { font-size: 1.0625rem; line-height: 1.4; letter-spacing: -0.011em; font-weight: 600; }
.lede { font-size: clamp(1.0625rem, 1.1vw, 1.1875rem); line-height: 1.6; color: var(--color-muted); }
.on-dark .lede { color: var(--color-dark-muted); }
.body-s { font-size: .9375rem; line-height: 1.62; color: var(--color-muted); }
.on-dark .body-s { color: var(--color-dark-muted); }
.eyebrow { font-family: var(--font-mono); font-size: .6875rem; font-weight: 500;
letter-spacing: .15em; text-transform: uppercase; color: var(--color-faint); }
.on-dark .eyebrow { color: var(--color-dark-muted); }
.mono { font-family: var(--font-mono); }
/* ═══ Surfaces ═════════════════════════════════════════════════════════ */
.card { background: #fff; border: 1px solid var(--color-rule); border-radius: 12px; }
.on-dark .card { background: var(--color-ink-2); border-color: rgba(255,255,255,.10); }
/* A single dark card on a light ground: pairs with the on-dark class on
the card itself so its text, pills and links pick up the dark variants. */
.card-dark { background: var(--color-ink); border-color: rgba(255,255,255,.10);
color: var(--color-dark-text); }
section.on-dark { background: var(--color-ink); color: var(--color-dark-text); }
/* Lifecycle cells are white cards on the ink ground: the section stays
dark for its heading and pills, but each step box flips to paper and
takes the light-ground text colours back. */
#lifecycle ol li { background: #fff; color: var(--color-ink); }
#lifecycle ol li .mono { color: var(--color-faint); }
#lifecycle ol li .body-s { color: var(--color-muted); }
/* The trust cards stay paper when their section goes ink: white boxes
with light-ground text, like the lifecycle grid. */
#trust-model dl .card { background: #fff; border-color: var(--color-rule); color: var(--color-ink); }
#trust-model dl .card .body-s { color: var(--color-muted); }
/* ═══ Buttons: one filled primary per section (§35) ═══════════════════ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
min-height: 46px; padding-inline: 1.25rem; border-radius: 10px; cursor: pointer;
font-size: .9375rem; font-weight: 500; letter-spacing: -0.006em;
transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .14s ease; }
.btn:hover { transform: scale(.985); }
.btn:active { transform: scale(.96); }
.btn-primary { background: var(--color-ink); color: #fff; }
.btn-primary:hover { background: #2b2b2f; }
.btn-ghost { background: #fff; color: var(--color-ink); border: 1px solid var(--color-rule); }
.btn-ghost:hover { background: var(--color-surface); border-color: #d4d4d8; }
.on-dark .btn-ghost { background: transparent; color: var(--color-dark-text); border-color: rgba(255,255,255,.20); }
.on-dark .btn-ghost:hover { background: rgba(255,255,255,.06); }
/* Ink is invisible on an ink ground, so the dark sections invert instead. */
.on-dark .btn-primary { background: #fff; color: var(--color-ink); }
.on-dark .btn-primary:hover { background: #e4e4e7; }
/* The header's primary button follows the header's own ground: when the
sticky header goes dark over a dark section, the filled button inverts
with it instead of disappearing into black-on-black. */
.nav-dark .btn-primary { background: #fff; color: var(--color-ink); }
.nav-dark .btn-primary:hover { background: #e4e4e7; }
.btn-sm { min-height: 40px; padding-inline: .9rem; font-size: .875rem; border-radius: 9px; }
/* The header CTA is scoped away from the stock small button so it can carry
a touch more height and padding without touching the mockup buttons
inside the product frames. */
.hdr .btn-sm { min-height: 42px; padding-inline: 1rem; }
.link { color: var(--color-blue); font-weight: 500; text-decoration: none;
display: inline-flex; align-items: center; gap: .375rem;
transition: gap .18s ease, color .18s ease; min-height: 44px; }
.link:hover { gap: .625rem; color: var(--color-blue-strong); }
.on-dark .link { color: var(--color-blue-dark); }
.on-dark .link:hover { color: #e4e4e7; }
:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 3px; border-radius: 6px; }
.on-dark :focus-visible, .nav-dark :focus-visible { outline-color: var(--color-blue-dark); }
.skip { position: absolute; left: 20px; top: -60px; z-index: 100; background: #fff;
border: 1px solid var(--color-rule); border-radius: 8px; padding: .7rem 1rem;
font-size: .875rem; font-weight: 500; transition: top .16s ease; }
.skip:focus { top: 12px; }
/* ═══ Status pills: icon + word + colour, in that order ═══════════════ */
.pill { display: inline-flex; align-items: center; gap: .3rem; border-radius: 6px;
padding: .2rem .5rem; font-size: .6875rem; font-weight: 500; line-height: 1.4;
white-space: nowrap; border: 1px solid transparent; }
.pill svg { width: 11px; height: 11px; flex: none; }
/* Backgrounds are literals, not theme vars: the browser build of Tailwind
prunes @theme variables it never sees used in utilities, and these are
only referenced from hand-written rules. */
.pill-ok { background: #f4f4f5; color: var(--color-ok); border-color: #d4d4d8; }
.pill-warn { background: #f4f4f5; color: var(--color-warn); border-color: #d4d4d8; }
.pill-bad { background: #e4e4e7; color: var(--color-bad); border-color: #a1a1aa; }
.pill-blue { background: #f4f4f5; color: var(--color-ink); border-color: #d4d4d8; }
.pill-neutral { background: #f3f4f6; color: var(--color-neutral); border-color: #e4e4e7; }
.on-dark .pill-ok { background: rgba(255,255,255,.12); color: #f4f4f5; border-color: rgba(255,255,255,.28); }
.on-dark .pill-warn { background: rgba(255,255,255,.12); color: #d4d4d8; border-color: rgba(255,255,255,.28); }
.on-dark .pill-bad { background: rgba(255,255,255,.12); color: #d4d4d8; border-color: rgba(255,255,255,.28); }
.on-dark .pill-blue { background: rgba(255,255,255,.13); color: var(--color-dark-text); border-color: rgba(255,255,255,.3); }
.on-dark .pill-neutral { background: rgba(255,255,255,.07); color: #a1a1aa; border-color: rgba(255,255,255,.14); }
/* …but pills sitting on the light mock chips inside a dark card keep the
light-ground palette: the surface beneath them is white, not ink. */
.card-dark .pill-blue { background: #f4f4f5; color: var(--color-ink); border-color: #d4d4d8; }
.card-dark .pill-ok { background: #f4f4f5; color: var(--color-ok); border-color: #d4d4d8; }
/* Demonstration data is always labelled (§45). */
.demo-tag { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-mono);
font-size: .625rem; letter-spacing: .08em; text-transform: uppercase;
color: var(--color-faint); }
.on-dark .demo-tag { color: var(--color-dark-muted); }
/* ═══ Reveal ═══════════════════════════════════════════════════════════ */
.rv { opacity: 0; transform: translate3d(0,14px,0);
transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
transition-delay: var(--d, 0ms); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.rv { opacity: 1 !important; transform: none !important; transition: none !important; }
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
transition-duration: .01ms !important; }
}
/* ═══ Header ═══════════════════════════════════════════════════════════ */
.hdr { position: sticky; top: 0; z-index: 60; border-bottom: 1px solid transparent;
transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
.hdr.is-stuck { background: rgba(255,255,255,.92); backdrop-filter: saturate(1.6) blur(12px);
border-bottom-color: var(--color-rule); }
.hdr.is-stuck.nav-neutral { background: rgba(244,244,245,.92); }
.hdr.nav-dark { color: var(--color-dark-text); }
.hdr.nav-dark.is-stuck { background: rgba(11,13,16,.92); border-bottom-color: rgba(255,255,255,.1); }
.logo { font-family: var(--font-mono); font-weight: 600; letter-spacing: -0.025em; }
.logo-dot { color: var(--color-blue); }
.nav-dark .logo-dot, .on-dark .logo-dot, footer .logo-dot { color: var(--color-blue-dark); }
footer .eyebrow { font-size: .875rem; font-weight: 600; }
.navlink { display: inline-flex; align-items: center; gap: .375rem; height: 44px; padding-inline: .6875rem;
border-radius: 8px; font-size: .9375rem; font-weight: 500; color: var(--color-muted);
text-decoration-line: underline; text-decoration-color: transparent;
text-decoration-thickness: 2px; text-underline-offset: 7px;
transition: color .18s ease, text-decoration-color .18s ease; }
.navlink:hover { color: var(--color-ink); text-decoration-color: var(--color-ink); }
/* Pricing sits in the IA before its page exists. It is rendered as text,
not an anchor, so it never ships as a dead href: and it is dimmed so it
does not invite the click it cannot answer. */
.navlink-soon, .navlink-soon:hover { color: var(--color-faint); cursor: default; }
.nav-dark .navlink { color: #a1a1aa; }
.nav-dark .navlink:hover { color: #fff; text-decoration-color: #fff; }
.nav-dark .navlink-soon, .nav-dark .navlink-soon:hover { color: #696970; }
/* Orientation, not decoration: the Product trigger gains weight while a
visitor is inside the product area, even with the panel closed. */
.menu-item:has(.menu-link[aria-current="page"]) > .navlink { font-weight: 600; }
.navlink svg { width: 12px; height: 12px; opacity: .75; transition: transform .18s ease; }
.menu-item:hover .navlink svg, .menu-item:focus-within .navlink svg { transform: rotate(180deg); }
.menu-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 70;
opacity: 0; visibility: hidden; transform: translate3d(0,-4px,0) scale(.99);
transform-origin: top left;
transition: opacity .2s ease, transform .2s ease, visibility .2s;
background: #fff; color: var(--color-ink); border: 1px solid var(--color-rule);
border-radius: 12px; box-shadow: 0 12px 32px -12px rgba(11,13,16,.18);
padding: .5rem; min-width: 280px; }
.menu-item:hover > .menu-panel, .menu-item:focus-within > .menu-panel,
.menu-item.is-open > .menu-panel {
opacity: 1; visibility: visible; transform: translate3d(0,0,0) scale(1); }
.menu-item.is-dismissed > .menu-panel { opacity: 0; visibility: hidden; transform: translate3d(0,-4px,0) scale(.99); }
.menu-link { display: block; padding: .625rem .75rem; border-radius: 8px; min-height: 44px;
transition: background-color .15s ease; }
.menu-link:hover { background: var(--color-surface); }
.menu-link b { display: block; font-size: .875rem; font-weight: 500; }
.menu-link span { display: block; font-size: .75rem; color: var(--color-faint); margin-top: .1rem; }
@media (max-width: 1023px) { .menu-panel { display: none; } }
/* ═══ Mobile drawer ════════════════════════════════════════════════════ */
.drawer { position: fixed; inset: 0; z-index: 80; visibility: hidden; }
.drawer[data-open="true"] { visibility: visible; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(11,13,16,.4); opacity: 0;
transition: opacity .24s ease; }
.drawer[data-open="true"] .drawer-scrim { opacity: 1; }
.drawer-panel { position: absolute; inset-block: 0; right: 0; width: min(400px, 92vw);
background: #fff; transform: translate3d(100%,0,0);
transition: transform .28s cubic-bezier(.22,.61,.36,1);
display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
.drawer[data-open="true"] .drawer-panel { transform: none; }
.drawer details > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
justify-content: space-between; min-height: 52px; font-size: 1rem; font-weight: 500; }
.drawer details > summary::-webkit-details-marker { display: none; }
.drawer details[open] > summary svg { transform: rotate(180deg); }
.drawer summary svg { width: 14px; height: 14px; color: var(--color-faint); transition: transform .2s ease; }
.drawer-sub a { min-height: 44px; display: flex; align-items: center; font-size: .9375rem; color: var(--color-muted); }
.drawer-sub a:hover { color: var(--color-blue); }
/* ═══ FAQ ══════════════════════════════════════════════════════════════ */
.faq > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
justify-content: space-between; gap: 1.5rem; min-height: 64px;
font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.011em; }
.faq > summary::-webkit-details-marker { display: none; }
.faq summary .ico { flex: none; width: 18px; height: 18px; position: relative; }
.faq summary .ico::before, .faq summary .ico::after {
content: ""; position: absolute; background: var(--color-faint); border-radius: 1px;
transition: transform .2s ease, opacity .2s ease; }
.faq summary .ico::before { inset: 8px 0 8px 0; height: 2px; }
.faq summary .ico::after { inset: 0 8px 0 8px; width: 2px; }
.faq[open] summary .ico::after { transform: rotate(90deg); opacity: 0; }
.faq[open] > summary + * { animation: faqIn .25s ease; }
@keyframes faqIn { from { opacity: 0; } }
/* ═══ Product frame: one consistent chrome for every screenshot ═══════ */
.frame { border: 1px solid var(--color-rule); border-radius: 14px; background: #fff; overflow: hidden; }
.on-dark .frame { border-color: rgba(255,255,255,.1); background: var(--color-ink-2); }
.frame-bar { display: flex; align-items: center; gap: .5rem; padding: .625rem .875rem;
border-bottom: 1px solid var(--color-rule); background: var(--color-surface); }
.on-dark .frame-bar { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.03); }
.frame-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-rule); flex: none; }
.on-dark .frame-dot { background: rgba(255,255,255,.16); }
.urlbar { display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 0; background: #fff;
border: 1px solid var(--color-rule); border-radius: 8px; padding: .35rem .7rem;
font-size: .75rem; color: var(--color-muted); }
/* Footer links are 18px of text on desktop, which is fine for a mouse; on
touch widths they get a real row to hit. */
@media (max-width: 767px) { footer nav li > a { display: flex; align-items: center; min-height: 44px; } }
.grid-bg { background-image: linear-gradient(var(--color-rule-soft) 1px, transparent 1px),
linear-gradient(90deg, var(--color-rule-soft) 1px, transparent 1px);
background-size: 48px 48px; }
/* On the ink ground the grid is the hero's dashed bead pattern: white
dots-and-dashes in 150px cells, drawn as an SVG tile, dissolving to
nothing before the bottom of the section. */
.on-dark .grid-bg {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.13' stroke-width='1.4' stroke-linecap='round' stroke-dasharray='1 8'%3E%3Cpath d='M0 .7h150'/%3E%3Cpath d='M.7 0v150'/%3E%3C/g%3E%3C/svg%3E");
background-size: 150px 150px;
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 88%);
mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 88%); }
/* ═══ Verification entry ═══════════════════════════════════════════════
The task owns the fold. Nothing sells anything above this form (§23). */
.ventry { padding-block: 56px 40px; }
@media (min-width: 768px) { .ventry { padding-block: 76px 52px; } }
.vform { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 640px) { .vform { flex-direction: row; align-items: flex-start; } }
.vwrap { position: relative; flex: 1; min-width: 0; }
.vinput { width: 100%; height: 56px; padding: 0 44px 0 14px; border-radius: 10px;
border: 1px solid var(--color-rule); background: #fff; color: var(--color-ink);
font-family: var(--font-mono); font-size: .9375rem; letter-spacing: -.01em;
transition: border-color .15s ease, box-shadow .15s ease; }
.vinput::placeholder { font-family: var(--font-sans); color: #a1a1aa; letter-spacing: 0; }
.vinput:hover { border-color: #d4d4d8; }
.vinput:focus { outline: none; border-color: var(--color-blue);
box-shadow: 0 0 0 3px rgba(11,13,16,.14); }
.vinput[aria-invalid="true"] { border-color: var(--color-bad); }
.vinput[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(185,28,28,.13); }
.vsubmit { height: 56px; flex: none; padding-inline: 24px; }
@media (max-width: 639px) { .vsubmit { width: 100%; } }
/* Clear control sits inside the field, and stays a real 44px target. */
.vclear { position: absolute; right: 6px; top: 6px; width: 44px; height: 44px;
display: none; place-items: center; border-radius: 8px; color: var(--color-faint); }
.vclear:hover { background: var(--color-surface); color: var(--color-ink); }
.vform.has-value .vclear { display: grid; }
.vhelp { font-size: .8125rem; color: var(--color-faint); }
.verr { display: none; align-items: flex-start; gap: .4rem; margin-top: 8px;
font-size: .8125rem; color: var(--color-bad); }
.verr svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.verr.on { display: flex; }
/* Demonstration shortcuts: labelled, never dressed up as customer proof. */
.vtry { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* 44px, not the 32px a chip normally takes: this row is the primary
control on a page strangers open on a phone, so it meets the enhanced
target size rather than the minimum. */
.vchip { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px;
padding: 0 14px; border-radius: 999px; border: 1px solid var(--color-rule);
background: #fff; font-size: .75rem; color: var(--color-muted);
white-space: nowrap; transition: border-color .15s ease, color .15s ease; }
.vchip:hover { border-color: #d4d4d8; color: var(--color-ink); }
.vchip .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
/* ═══ Result ═══════════════════════════════════════════════════════════
One panel, seven states. The chrome never moves between them, so the
status is the only thing the eye has to compare. */
.result { border: 1px solid var(--color-rule); border-radius: 16px; background: #fff;
overflow: hidden; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.result-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
padding: 14px 18px; border-bottom: 1px solid var(--color-rule-soft);
background: var(--color-surface); }
.result-body { padding: 18px; }
@media (min-width: 768px) { .result-body { padding: 24px; } }
.result-note { display: flex; align-items: flex-start; gap: .5rem; border-radius: 10px;
padding: 10px 12px; font-size: .8125rem; line-height: 1.55; }
.result-note svg { width: 14px; height: 14px; flex: none; margin-top: 3px; }
.note-ok { background: #f4f4f5; color: #18181b; }
.note-warn { background: #f4f4f5; color: #3f3f46; }
.note-bad { background: #e4e4e7; color: #18181b; }
.note-blue { background: #f4f4f5; color: #18181b; }
.note-neutral { background: #f3f4f6; color: #52525b; }
/* At the wider column the field list and the history sit side by side.
One 1024px-wide column would strand every value against the far edge. */
.result-split { display: grid; gap: 22px; margin-top: 24px; }
.result-history { border-top: 1px solid var(--color-rule-soft); padding-top: 18px; }
@media (min-width: 880px) {
.result-split { grid-template-columns: minmax(0,1fr) 300px; gap: 40px; }
.result-history { border-top: 0; border-left: 1px solid var(--color-rule-soft);
padding-top: 0; padding-left: 32px; }
}
.frow { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0;
border-top: 1px solid var(--color-rule-soft); font-size: .8125rem; }
.frow:first-child { border-top: 0; }
.frow dt { color: var(--color-faint); flex: none; }
.frow dd { font-weight: 500; text-align: right; min-width: 0; word-break: break-word; }
/* Skeleton: reserves the panel's height so the result never shifts the
page when it lands (CLS), and holds still under reduced motion. */
.skel { border-radius: 6px; background: linear-gradient(90deg,#e4e4e7 25%,#e4e4e7 37%,#e4e4e7 63%);
background-size: 400% 100%; animation: shimmer 1.4s ease infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
/* ═══ Status dictionary ════════════════════════════════════════════════ */
.dict { display: grid; gap: 0; }
.dict-row { display: grid; gap: 6px 20px; padding: 18px 0;
border-top: 1px solid var(--color-rule-soft); }
.dict-row:first-child { border-top: 0; }
@media (min-width: 768px) { .dict-row { grid-template-columns: 190px 1fr; align-items: start; } }
.timeline { position: relative; padding-left: 20px; }
.timeline::before { content: ""; position: absolute; left: 3px; top: 6px; bottom: 6px;
width: 1px; background: var(--color-rule); }
.tl-item { position: relative; padding-block: 7px; font-size: .8125rem; }
.tl-item::before { content: ""; position: absolute; left: -20px; top: 13px; width: 7px; height: 7px;
border-radius: 50%; background: var(--color-rule); box-shadow: 0 0 0 3px #fff; }
.tl-item:first-child::before { background: var(--color-blue); }
@media (prefers-reduced-motion: reduce) {
.skel { animation: none; background: #e4e4e7; }
.vinput, .vchip { transition: none; }
}
/* ═══ Issuance ═════════════════════════════════════════════════════════
The commercial page (§20). Fifteen sections, so the rhythm does the
wayfinding: alternating grounds and one filled CTA per major beat (§35)
rather than a second sticky bar competing with the header. */
/* Numbered steps: the sequence is the argument, so the number is visible
rather than decorative. */
.step-n { display: grid; place-items: center; width: 30px; height: 30px; flex: none;
border-radius: 8px; background: var(--color-ink); color: #fff;
font-family: var(--font-mono); font-size: .75rem; font-weight: 500; }
.on-dark .step-n { background: #fff; color: var(--color-ink); }
/* A connector between steps that disappears on the last one and when the
row stacks: an arrow pointing at nothing reads as a broken layout. */
.steps { display: grid; gap: 22px; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 26px; } }
.step { position: relative; }
@media (min-width: 900px) {
.step:not(:last-child)::after {
content: ""; position: absolute; top: 15px; left: 42px; right: -26px; height: 1px;
background: var(--color-rule);
}
.on-dark .step:not(:last-child)::after { background: rgba(255,255,255,.14); }
}
/* Outcome cards lead with the operational problem, not the feature. */
.outcome { display: grid; gap: 10px; padding: 22px; border-radius: 12px;
border: 1px solid var(--color-rule); background: #fff; }
.on-dark .outcome { border-color: rgba(255,255,255,.1); background: var(--color-ink-2); }
/* Demonstration tables inside a product frame. Fixed row heights so the
mock never reflows as content wraps at narrow widths. */
.mock { width: 100%; border-collapse: collapse; font-size: .75rem; }
.mock th { text-align: left; font-weight: 500; color: var(--color-faint);
padding: 8px 12px; border-bottom: 1px solid var(--color-rule-soft);
white-space: nowrap; }
.mock td { padding: 9px 12px; border-bottom: 1px solid var(--color-rule-soft);
white-space: nowrap; }
.mock tr:last-child td { border-bottom: 0; }
.mock-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Progress meter for the bulk job. Value is stated in text beside it:
the bar alone never carries the number. */
.meter { height: 6px; border-radius: 3px; background: var(--color-rule-soft); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 3px; background: var(--color-blue); }
/* Lifecycle rail: eight states in sequence, wrapping cleanly on mobile. */
.rail { display: flex; flex-wrap: wrap; gap: 8px; }
.rail li { display: inline-flex; align-items: center; gap: .45rem; min-height: 36px;
padding: 0 12px; border-radius: 999px; font-size: .75rem;
border: 1px solid rgba(255,255,255,.14); color: #d4d4d8; white-space: nowrap; }
.rail li .n { font-family: var(--font-mono); font-size: .6875rem; opacity: .6; }
/* Two-column feature rows that alternate side without duplicating markup. */
.split { display: grid; gap: 32px; align-items: center; }
@media (min-width: 960px) { .split { grid-template-columns: 1fr 1fr; gap: 56px; }
.split.flip > *:first-child { order: 2; } }
.kv { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0;
border-top: 1px solid var(--color-rule-soft); font-size: .8125rem; }
.kv:first-child { border-top: 0; }
.kv dt { color: var(--color-faint); }
.kv dd { font-weight: 500; text-align: right; }
/* ═══ Hero instrument: one product frame, four stage rows ══════════
Rich at the ends (the record, the result), compressed in the middle.
One physical spine sits below the numbered column and fills as the
page is read, matching the homepage verification trace. */
.evh { background: #fff; border: 1px solid var(--color-rule); border-radius: 12px; overflow: hidden; }
#hero .wrap > *, .evh-row > div { min-width: 0; }
.evh-trace { --evh-progress: 0; position: relative; isolation: isolate; }
.evh-trace::before, .evh-trace::after {
content: ""; position: absolute; z-index: 1;
left: calc(1rem + 12px); top: var(--evh-spine-top, 0);
width: 2px; height: var(--evh-spine-height, 0);
border-radius: 999px; transform-origin: top;
}
.evh-trace::before { background: var(--color-rule); }
.evh-trace::after { background: var(--color-ink); transform: scaleY(var(--evh-progress)); will-change: transform; }
.evh-row { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr);
column-gap: 12px; padding: .85rem 1rem; }
.evh-row + .evh-row { border-top: 1px solid var(--color-rule-soft); }
.evh-row > div { position: relative; z-index: 2; }
.evh-node { position: relative; z-index: 3; display: grid; place-items: center; height: 26px;
align-self: start; border-radius: 8px; border: 1px solid var(--color-rule);
background: #fff; font-family: var(--font-mono); font-size: .625rem;
font-variant-numeric: tabular-nums; color: var(--color-muted);
box-shadow: 0 0 0 6px #fff;
transition: background-color .18s ease, border-color .18s ease, color .18s ease; }
.evh-row.is-passed .evh-node { background: var(--color-ink); border-color: var(--color-ink); color: #fff; }
.evh-row:last-child { background: var(--color-surface); }
.evh-row:last-child .evh-node { box-shadow: 0 0 0 6px var(--color-surface); }
.evh-label { font-family: var(--font-mono); font-size: .625rem; font-weight: 500;
letter-spacing: .15em; text-transform: uppercase; color: var(--color-faint); }
.evh-kv { display: grid; gap: .25rem .75rem; margin-top: .5rem; font-size: .75rem;
grid-template-columns: repeat(2, minmax(0, 1fr)); }
.evh-kv > div { display: grid; grid-template-columns: 7.75rem minmax(0, 1fr); gap: .4rem; }
.evh-kv dt { color: var(--color-faint); }
.evh-kv dd { font-weight: 500; }
.evh-inline { margin-top: .45rem; display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .75rem; }
.evh-inline dt { color: var(--color-faint); margin-right: .3rem; }
.evh-inline dd { font-weight: 500; display: inline; }
.evh-clm { margin-top: .5rem; display: grid; gap: .3rem; font-size: .75rem; }
.evh-clm > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .75rem; }
.evh-clm .f { color: var(--color-faint); margin-right: .4rem; }
.evh-note { margin-top: .45rem; font-size: .75rem; color: var(--color-muted); }
.evh-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 479px) {
.evh, .evh-trace, .evh-row { min-width: 0; max-width: 100%; }
.evh-demo-long { display: none; }
.evh-kv { grid-template-columns: 1fr; }
.evh-kv > div { grid-template-columns: 1fr; gap: 0; }
.evh-kv dd, .evh-inline dd, .evh-clm span { overflow-wrap: anywhere; }
}
.flw-ol { margin-top: .9rem; border-left: 1px solid var(--color-rule);
padding-left: 1.1rem; display: grid; gap: .5rem; }
.flw-ol li { display: flex; align-items: baseline; gap: .6rem; font-size: .875rem; }
.flw-ol li .n { font-family: var(--font-mono); font-size: .625rem; color: var(--color-faint); }
/* ═══ Product proof rail ════════════════════════════════════════════ */
.proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.proof > div { padding: .9rem 1rem; border-left: 1px solid var(--color-rule); }
.proof > div:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 767px) {
.proof { grid-template-columns: 1fr 1fr; }
.proof > div { padding: .7rem .9rem; }
.proof > div:nth-child(odd) { border-left: 0; padding-left: 0; }
.proof > div:nth-child(n+3) { border-top: 1px solid var(--color-rule); }
}
/* ═══ Before and after flows ════════════════════════════════════════ */
.flw { display: grid; gap: 1.75rem; }
@media (min-width: 768px) { .flw { grid-template-columns: 1fr 1fr; } }
.flw ol { margin-top: .9rem; border-left: 1px solid var(--color-rule);
padding-left: 1.1rem; display: grid; gap: .5rem; }
.flw li { display: flex; align-items: baseline; gap: .6rem; font-size: .875rem; }
.flw li .n { font-family: var(--font-mono); font-size: .625rem; color: var(--color-faint); }
/* ═══ Participant strip ═════════════════════════════════════════════ */
.part { display: grid; }
.part > div { padding: 1rem 0; border-top: 1px solid var(--color-rule); }
@media (min-width: 768px) {
.part { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.part > div { border-top: 0; border-left: 1px solid var(--color-rule);
padding: 0 1.5rem; }
.part > div:first-child { border-left: 0; padding-left: 0; }
}
/* ═══ Verifier workflow: four stages, one rail ═════════════════════ */
.wf4 { display: flex; }
.wf4-item { position: relative; flex: 1 1 0; min-width: 0; }
.wf4-name { display: flex; align-items: center; gap: .5rem; font-size: 1rem;
font-weight: 600; letter-spacing: -0.011em; line-height: 1.3;
position: relative; z-index: 1; background: var(--color-surface);
padding-right: .5rem; }
.wf4-node { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px;
border-radius: 7px; border: 1px solid var(--color-rule);
background: var(--color-surface); font-family: var(--font-mono);
font-size: .5625rem; font-variant-numeric: tabular-nums; color: var(--color-muted); }
.wf4-item:last-child .wf4-node { background: var(--color-ink); border-color: var(--color-ink); color: #fff; }
.wf4-d { margin-top: .4rem; padding-left: 30px; font-size: .75rem; line-height: 1.5;
color: var(--color-muted); }
.wf4-m { margin-top: .45rem; padding-left: 30px; font-family: var(--font-mono);
font-size: .625rem; color: var(--color-faint); }
.wf4-item::before { content: ""; position: absolute; left: 0; right: 0; top: 10.5px;
height: 1px; background: var(--color-rule); }
.wf4-item:first-child::before { left: 11px; }
.wf4-item:last-child::before { right: auto; width: 11.5px; }
@media (max-width: 1023px) {
.wf4 { display: grid; gap: 1.25rem; }
.wf4-item { padding-left: 2rem; }
.wf4-item::before { left: 11px; top: 24px; bottom: -1.25rem; right: auto; width: 1px; height: auto; }
.wf4-item:last-child::before { display: none; }
.wf4-node { position: absolute; left: 0; top: 0; }
.wf4-name, .wf4-d, .wf4-m { padding-left: 0; }
.wf4-name { background: transparent; }
}
/* ═══ Result state rows: icon, name, one line ══════════════════════ */
.rsrow { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
gap: .2rem 1.5rem; align-items: baseline; padding: .7rem 0;
border-top: 1px solid var(--color-rule-soft); }
.rsrow:first-child { border-top: 0; }
.rsrow .nm { display: flex; align-items: center; gap: .55rem; font-weight: 600; font-size: .875rem; }
.rsrow .nm svg { width: 14px; height: 14px; flex: none; }
.rsrow .ds { font-size: .8125rem; color: var(--color-muted); }
@media (max-width: 639px) { .rsrow { grid-template-columns: 1fr; gap: .2rem; } }
/* ═══ FAQ verification card ═════════════════════════════════════════ */
.faq-verify { max-width: 360px; }
.fv-card { position: relative; overflow: hidden; padding: 1.25rem; }
.fv-scan { position: absolute; left: 0; right: 0; top: 0; height: 44px;
opacity: 0; pointer-events: none;
background: linear-gradient(180deg, transparent,
rgba(37,99,235,.07) 40%, rgba(37,99,235,.20) 78%, rgba(37,99,235,.48)); }
.faq-verify.scan-on .fv-scan { animation: fvScan 4.4s ease-in-out infinite; }
@keyframes fvScan {
0%, 2% { opacity: 0; transform: translate3d(0, -44px, 0); }
4% { opacity: 1; }
60% { opacity: 1; transform: translate3d(0, 700%, 0); }
62%, 92% { opacity: 0; transform: translate3d(0, 700%, 0); }
100% { opacity: 0; transform: translate3d(0, -44px, 0); }
}
/* ═══ Masked values in the privacy composition ══════════════════════ */
.msk { font-family: var(--font-mono); letter-spacing: .12em; color: var(--color-dark-muted); }