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; } }
/* ═══ 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; }
/* ═══ 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; } }
/* ═══ Record-history timeline. Newest first: the current state is the
loudest item; each older entry steps down in weight. Blue node marks
the current state, neutral grey the history, semantic colour only
where the event itself is semantic (review, correction). */
.timeline { position: relative; padding-left: 20px; }
.timeline::before { content: ""; position: absolute; left: 3px; top: 8px; bottom: 8px;
width: 1px; background: var(--color-rule); }
.tl-tracker { position: absolute; z-index: 2; left: -1px; top: 0; width: 9px; height: 9px;
border-radius: 50%; background: var(--color-blue); box-shadow: 0 0 0 3px #fff;
opacity: 0; transform: translate3d(0,var(--tl-y,12px),0);
transition: transform .65s cubic-bezier(.22,.61,.36,1), opacity .2s ease; }
.timeline.is-tracking .tl-tracker { opacity: 1; }
.tl-item { position: relative; padding-block: 7px; font-size: .8125rem; color: var(--color-faint); }
.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.tl-now { color: var(--color-ink); font-weight: 500; }
.tl-item.tl-now::before { width: 9px; height: 9px; top: 12px; left: -21px;
background: var(--color-rule); }
.tl-item.tl-mid { color: var(--color-muted); }
.tl-item.tl-mid .tl-date { color: var(--color-muted); }
.tl-item.is-tracker-active { color: var(--color-ink); font-weight: 500; }
.tl-item.is-tracker-active .tl-date { color: var(--color-muted); }
.tl-date { font-family: var(--font-mono); font-size: .6875rem; }
.tl-note { font-size: .6875rem; font-style: italic; }
.tl-status { min-width: 92px; justify-content: center; transition: opacity .16s ease; }
.tl-status.is-changing { opacity: .35; }
/* One-time reveal: entries land newest-last (Move → Resolve → Rest),
never looping. Reduced motion rests at the final state. */
.tl-rv { opacity: 0; transform: translate3d(0, 5px, 0);
transition: opacity .4s ease, transform .4s ease; }
.tl-rv.tl-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.tl-rv { opacity: 1 !important; transform: none !important; transition: none !important; }
.tl-tracker, .tl-status { transition: none !important; }
}
@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); }
/* ═══ After-issuance split: the narrative remains pinned while each
stage enters the normal document flow. Nothing intercepts page scroll. */
.af-scroll-section { position: relative; }
.af-scroll-sticky { width: 100%; }
.af-split { display: grid; gap: 48px; align-items: start; }
.af-intro { min-width: 0; }
.af-stage { position: relative; min-width: 0; }
.af-card-stack { display: grid; gap: 20px; }
.af-card { min-width: 0; scroll-margin-top: 120px; border: 1px solid var(--color-rule);
border-radius: 14px; background: #fff; padding: 26px 26px 22px; }
.af-stage.has-reveal .af-card { opacity: 0; transform: translate3d(0,40px,0);
transition: opacity .5s ease,
transform .65s cubic-bezier(.2,.85,.35,1.12); }
.af-stage.has-reveal .af-card.is-revealed { opacity: 1; transform: none; }
.af-num { font-family: var(--font-mono); font-size: .8125rem; font-weight: 600;
color: var(--color-blue-dark, #fafafa); letter-spacing: .12em; }
.af-title { font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em;
line-height: 1.25; margin-top: 10px; color: var(--color-ink); }
.af-points { margin-top: 16px; display: grid; gap: 8px; }
.af-points li { display: flex; gap: .6rem; align-items: baseline;
font-size: .875rem; color: var(--color-muted); }
.af-points li::before { content: ""; width: 4px; height: 4px; margin-top: .55em; flex: none;
border-radius: 50%; background: var(--color-rule-strong, #d4d4d8); }
.af-spy { display: grid; margin-top: 30px; border-top: 1px solid rgba(255,255,255,.14); }
.af-spy-link { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 12px;
min-height: 54px; border-bottom: 1px solid rgba(255,255,255,.14);
color: var(--color-dark-muted, #a1a1aa); text-decoration: none;
transition: color .2s ease; }
.af-spy-index { display: grid; place-items: center; width: 30px; height: 30px;
border: 1px solid rgba(255,255,255,.2); border-radius: 7px;
font-family: var(--font-mono); font-size: .6875rem;
transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
.af-spy-link:hover { color: #fff; }
.af-spy-link.is-active { color: #fff; }
.af-spy-link.is-active .af-spy-index { color: var(--color-ink); background: #fff; border-color: #fff; }
.af-spy-label { font-size: .875rem; font-weight: 500; }
@media (min-width: 960px) {
.af-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
/* The first card enters with its top on the screen's midline (the
stage's padding-top). To leave the same way, the pinned intro lets go
at the moment the last card's bottom reaches that midline. Where it
lets go depends on the intro's own height, which changes as its text
wraps, so the script supplies it as --af-intro-h: the stage pads its
end, or on tall screens the intro extends its margin box, whichever
the arithmetic needs. Without the script both resolve to 0. */
.af-intro { position: sticky; top: 104px;
margin-bottom: max(0px, calc(50vh - 104px - var(--af-intro-h, 100vh))); }
.af-stage { padding-top: max(0px, calc(50vh - 104px));
padding-bottom: max(0px, calc(104px + var(--af-intro-h, 0px) - 50vh)); }
.af-card-stack { gap: 28px; }
.af-card { min-height: 300px; display: flex; flex-direction: column; justify-content: center;
padding: 38px 40px 34px; }
}
@media (prefers-reduced-motion: reduce) {
.af-stage.has-reveal .af-card { opacity: 1; transform: none; transition: none; }
.af-spy-link, .af-spy-index { transition: none; }
}
.steps { display: grid; gap: 22px; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 26px; } }
/* After-issuance flow: each step reveals once when scrolled into view,
then rests. No loop. */
.step-rv { opacity: 0; transform: translate3d(0, 6px, 0);
transition: opacity .45s ease, transform .45s ease; }
.step-rv.tl-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.step-rv { opacity: 1 !important; transform: none !important; transition: none !important; }
}
.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); }
/* Hero issuance composer: one focused creation flow, deliberately distinct
from the record tables and lifecycle surfaces used later on the page. */
.issue-composer { box-shadow: 0 14px 36px -30px rgba(11,13,16,.3); }
.issue-progress { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.issue-progress li { position: relative; min-width: 0; text-align: center; }
.issue-progress li:not(:last-child)::after {
content: ""; position: absolute; z-index: 0; top: 13px; left: calc(50% + 18px);
right: calc(-50% + 18px); height: 1px; background: var(--color-rule);
}
.issue-progress li:nth-child(1)::after { background: var(--color-rule); }
.issue-step-dot { position: relative; z-index: 1; display: grid; place-items: center;
width: 27px; height: 27px; margin-inline: auto; border-radius: 8px;
border: 1px solid var(--color-rule); background: #fff; color: var(--color-faint);
font-family: var(--font-mono); font-size: .6875rem; font-weight: 600; }
.issue-progress .is-complete .issue-step-dot { border-color: var(--color-rule); background: var(--color-surface); color: var(--color-faint); }
.issue-progress .is-active .issue-step-dot { border-color: var(--color-ink); background: var(--color-ink); color: #fff; }
.issue-field { min-width: 0; min-height: 56px; padding: 9px 12px; border: 1px solid var(--color-rule);
border-radius: 9px; background: #fff; }
.issue-field-label { display: block; font-size: .6875rem; color: var(--color-faint); }
.issue-field-value { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; font-size: .8125rem; font-weight: 500; }
.issue-review { border: 1px solid var(--color-rule); border-radius: 10px; background: var(--color-surface); }
.issue-hero-field { opacity: 0; animation: issue-enter .42s cubic-bezier(.22,.61,.36,1) forwards; }
.issue-hero-field:nth-child(2) { animation-delay: .09s; }
.issue-hero-field:nth-child(3) { animation-delay: .18s; }
.issue-hero-field:nth-child(4) { animation-delay: .27s; }
.issue-review-state { opacity: 0; transform: translateY(5px); animation: issue-resolve .38s ease-out .52s forwards; }
.issue-hero-action { opacity: .5; animation: issue-ready .32s ease-out .82s forwards; }
@keyframes issue-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes issue-resolve { to { opacity: 1; transform: none; } }
@keyframes issue-ready { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.issue-hero-field, .issue-review-state, .issue-hero-action { animation: none; opacity: 1; transform: none; }
}
/* 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; }
/* ── Page components: entry modes, concept rows, ops tabs ────────── */
.modes { display: grid; }
@media (min-width: 900px) { .modes { grid-template-columns: repeat(4, 1fr); } }
.mode { border-left: 1px solid var(--color-rule); padding: 2px 20px 0 20px; }
.mode:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 899px) {
.mode { border-left: 0; padding: 12px 0 0 0; border-top: 1px solid var(--color-rule-soft); }
.mode:first-child { border-top: 0; padding-top: 0; }
}
.hrow { display: grid; gap: 4px 24px; padding: 13px 0; border-top: 1px solid var(--color-rule-soft); }
.hrow:first-of-type { border-top: 0; padding-top: 2px; }
@media (min-width: 640px) { .hrow { grid-template-columns: 10.5rem 1fr; } }
.ops-tabs { display: flex; gap: 20px; overflow-x: auto; border-bottom: 1px solid var(--color-rule-soft);
padding-bottom: 0; }
.ops-tab { font-family: var(--font-mono); font-size: .75rem; color: var(--color-faint);
padding: 2px 0 11px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.ops-tab.on { color: var(--color-ink); border-bottom-color: var(--color-ink); font-weight: 600; }
/* Organisational control: one workspace, with the operating context
changing inside it rather than splitting into separate feature cards. */
.org-rail { display: grid; margin-top: 28px; border-block: 1px solid var(--color-rule); }
.org-principle { display: flex; align-items: center; min-height: 58px; padding: 12px 0;
border-top: 1px solid var(--color-rule-soft); font-size: .8125rem;
font-weight: 500; line-height: 1.45; }
.org-principle:first-child { border-top: 0; }
.org-workspace { margin-top: 32px; }
.org-stack-label { display: flex; align-items: center; gap: 10px; min-height: 44px;
padding: 9px 14px; border: 1px solid var(--color-rule); border-radius: 12px;
background: var(--color-surface); }
/* The workspace bar pins first, and each card pins below it. A sticky box
is released when its margin box meets the bottom of the stack, so every
pinned item carries a bottom margin equal to the distance it still owes
card four: the bar owes its gap, three steps and a card; the cards owe
3, 2, 1 and 0 steps. That gives all five one release point, the instant
card four reaches its offset, so four never pauses and the bar, the
cards and the section beneath leave together. The next item's top
margin takes the rest back, keeping the bar 14px above card one and the
arrivals one card per --stack-gap. Flex stops the two margins
collapsing into one. */
.org-stack { --stack-top: 72px; --stack-step: 32px; --stack-gap: clamp(150px,28vh,240px);
--stack-card-h: 390px; --stack-label-h: 44px; --stack-label-gap: 14px;
--stack-first: calc(var(--stack-top) + var(--stack-label-h) + var(--stack-label-gap));
position: relative; overflow: clip;
display: flex; flex-direction: column; }
.org-stack > .org-stack-label { position: sticky; top: var(--stack-top); z-index: 5; flex: none;
height: var(--stack-label-h); min-height: 0;
margin-bottom: calc(var(--stack-label-gap) + var(--stack-step) * 3 + var(--stack-card-h)); }
.org-stack-card { position: sticky; flex: none; }
.org-stack-card:nth-of-type(1) { top: var(--stack-first); z-index: 1;
margin-top: calc(0px - var(--stack-step) * 3 - var(--stack-card-h));
margin-bottom: calc(var(--stack-step) * 3); }
.org-stack-card:nth-of-type(2) { top: calc(var(--stack-first) + var(--stack-step)); z-index: 2;
margin-top: calc(var(--stack-gap) - var(--stack-step) * 3);
margin-bottom: calc(var(--stack-step) * 2); }
.org-stack-card:nth-of-type(3) { top: calc(var(--stack-first) + var(--stack-step) * 2); z-index: 3;
margin-top: calc(var(--stack-gap) - var(--stack-step) * 2);
margin-bottom: var(--stack-step); }
.org-stack-card:nth-of-type(4) { top: calc(var(--stack-first) + var(--stack-step) * 3); z-index: 4;
margin-top: calc(var(--stack-gap) - var(--stack-step)); }
/* Entrance and recession are separate properties so that only the
one-off entrance is timed. The recession is driven by scroll position,
so it carries no transition: easing it over a clock is what let it run
ahead of, or trail behind, the hand doing the scrolling. */
.org-stack-card-surface { height: var(--stack-card-h); border: 1px solid rgba(255,255,255,.12); border-radius: 14px;
background: var(--color-ink); color: var(--color-dark-text); overflow: hidden; transform-origin: top center;
translate: 0 var(--stack-enter-y,0);
scale: var(--stack-scale,1);
transition: translate .32s cubic-bezier(.2,.75,.25,1); }
.org-stack.has-motion .org-stack-card-surface { will-change: transform; }
.org-stack-card-head { display: flex; align-items: center; gap: 16px; min-height: 52px;
padding: 10px 20px; border-bottom: 1px solid rgba(255,255,255,.12);
background: var(--color-ink-2); }
.org-stack-card-title { color: var(--color-dark-text); font-family: var(--font-mono); font-size: .75rem; font-weight: 600; }
.org-stack-card-body { padding: 24px; }
.org-stack.has-motion .org-stack-card:first-of-type:not(.is-entered) { --stack-enter-y: 80px; }
.org-stack-card .text-faint { color: var(--color-dark-muted) !important; }
.org-identity-head { display: flex; align-items: center; gap: 12px; }
.org-data-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
margin-top: 24px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; overflow: hidden; }
.org-data { min-width: 0; padding: 16px; border-top: 1px solid rgba(255,255,255,.1); }
.org-data:nth-child(-n+2) { border-top: 0; }
.org-data:nth-child(even) { border-left: 1px solid rgba(255,255,255,.1); }
.org-data dt { font-size: .75rem; color: var(--color-dark-muted); }
.org-data dd { margin-top: 5px; font-size: .875rem; font-weight: 500; }
.org-list { margin-top: 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; overflow: hidden; }
.org-list-row { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(120px,.8fr);
gap: 16px; align-items: center; min-height: 58px; padding: 10px 16px;
border-top: 1px solid rgba(255,255,255,.1); font-size: .8125rem; }
.org-list-row:first-child { border-top: 0; }
.org-list-head { min-height: 40px; background: rgba(255,255,255,.04); color: var(--color-dark-muted);
font-family: var(--font-mono); font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; }
.org-event { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px;
padding: 14px 0; border-top: 1px solid rgba(255,255,255,.1); }
.org-event:first-child { border-top: 0; padding-top: 0; }
.org-event-meta { margin-top: 4px; font-size: .75rem; color: var(--color-dark-muted); }
.org-event-time { font-family: var(--font-mono); font-size: .6875rem; color: var(--color-dark-muted); }
.org-dev-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 18px; }
.org-dev-item { min-height: 82px; padding: 16px; border: 1px solid rgba(255,255,255,.12);
border-radius: 10px; background: rgba(255,255,255,.04); }
.org-dev-item p:first-child { font-size: .875rem; font-weight: 500; }
.org-dev-item p:last-child { margin-top: 5px; font-size: .75rem; color: var(--color-dark-muted); }
@media (min-width: 768px) {
.org-rail { grid-template-columns: repeat(3,minmax(0,1fr)); }
.org-principle { padding: 14px 22px; border-top: 0; border-left: 1px solid var(--color-rule); }
.org-principle:first-child { padding-left: 0; border-left: 0; }
.org-stack-card-body { padding: 30px 32px; }
.org-data-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.org-data { border-top: 0; border-left: 1px solid rgba(255,255,255,.1); }
.org-data:first-child { border-left: 0; }
}
@media (max-width: 639px) {
.org-list-head { display: none; }
.org-list-row { grid-template-columns: 1fr auto; gap: 5px 12px; padding-block: 13px; }
}
@media (min-width: 960px) {
.org-stack { --stack-top: 80px; --stack-step: 40px; --stack-gap: clamp(220px,36vh,360px); }
}
@media (prefers-reduced-motion: reduce) {
.org-stack-card-surface { transition: none; translate: none; scale: none; }
}
#journey .vn-link { color: #fafafa; }
#journey .vn-link:hover { color: #e4e4e7; }