/* Hyperlinear website — the site's own construction.
 *
 * Reads the brand tokens from tokens.css (generated from the design language)
 * and adds the site's components: one card (.cell4 in a shared-hairline grid),
 * spec box, plate, strip, tabs and panel, segmented stepper and split panel
 * with a product surface, the layer plates and rows, row list, footer, buttons,
 * eyebrow, and the hero rings. Document components are not transplanted here; the construction
 * is the product-site one approved on 2026-09-16 (study A, version 4).
 *
 * Type (D14, 2026-09-17; D16, 2026-09-22): h1 and h2 in Source Serif 4 600, and
 * so are the card claims and the moment titles, one level below; the small
 * h3s (panels, cells, rows) in Fustat 700;
 * interface, lede and short copy in Fustat; prose at length (a post's body)
 * in Source Serif 4 at 18px (.prose, D17, 2026-09-22); eyebrows, indices and
 * diagram labels in IBM Plex Mono.
 *
 * Edges (D21, 2026-09-22): a card, pane or window is marked by its fill alone,
 * as in the documents; no hairline ring, no window shadow. The bar keeps its
 * ring because it floats over other things. The frames inside the windows
 * keep their line-colour border, as the documents' thread does. */

@import url('https://fonts.googleapis.com/css2?family=Fustat:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400..700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  color-scheme: light;
  /* site-only aliases and scale; brand values come from tokens.css */
  --paper: var(--mist);        /* the page ground: Mist, not white (ruled 2026-09-21 after Lightfield's grey; every family's ground since D22, 2026-09-22) */
  --serif: var(--text);
  --mute: var(--muted);
  --line2: #b8d4d6;
  --kale: var(--head);
  --w: 72rem; --r: var(--card-radius);
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem;
}
* { box-sizing: border-box; }
body { margin: 0; padding-top: 3.75rem; background: var(--paper); color: var(--ink); font-family: var(--display); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
.wrap { max-width: var(--w); margin: 0 auto; padding-inline: var(--s5); }
.eyebrow { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; /* the ruled label track (D24, 2026-09-22) */ text-transform: uppercase; color: var(--accent); display: flex; gap: var(--s3); align-items: center; }
.eyebrow .ix { color: var(--mute); }

h1, h2 { margin: 0; color: var(--head); font-family: var(--serif); font-weight: 600; text-wrap: balance; }
h3 { margin: 0; color: var(--head); font-family: var(--display); font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(2.8rem, 5.9vw, 4.4rem); line-height: 1.06; letter-spacing: -.02em; font-variation-settings: 'opsz' 60; max-width: 15ch; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.12; letter-spacing: -.012em; font-variation-settings: 'opsz' 40; max-width: 20ch; }
h3 { font-size: 1.05rem; line-height: 1.35; letter-spacing: -.01em; }
.lede { font-size: 1.1rem; line-height: 1.5; max-width: 36rem; color: var(--ink); }
/* prose at length reads in the serif, the face the documents read in, a step
 * larger than Fustat by the ratio the title moved by (ruled 2026-09-22, D17,
 * from the second harmony round). Short copy stays Fustat: this class is for
 * a post's body, nothing on the home page. */
.prose { font-family: var(--serif); font-size: 1.125rem; line-height: 1.5; }
.sechead { display: grid; gap: var(--s3); margin-bottom: var(--s6); }
section { padding-block: 0 var(--s8); }
/* a faint rule the width of the column above each section (ruled 2026-09-21, after Lightfield) */
section::before { content: ""; display: block; height: 1px; background: var(--accent-hair); width: calc(100% - 2 * var(--s5)); max-width: calc(var(--w) - 2 * var(--s5)); margin: 0 auto var(--s8); }

/* buttons: one action, one shape (a screen rule of the language since D23, 2026-09-22). Every filled button on the site is the demo
 * request, in the bar button's low profile (ruled 2026-09-21): borderless,
 * .84rem, 8px radius. Colour follows the ground: kale with lime text on
 * white and on the plane (ruled 2026-09-21), lime with kale text on kale and
 * Deep water. No secondary buttons: in-page movement is a mono text link
 * (.next). */
.btn { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; font-weight: 600; font-size: .84rem; line-height: 1; padding: .56rem .85rem; border-radius: 8px; border: 0; cursor: pointer; transition: background .15s ease, color .15s ease; }
.btn.primary { background: var(--head); color: var(--lime); }
.btn.primary:hover { background: var(--accent); }
.btn.lime { background: var(--lime); color: var(--lime-ink); }
.btn.lime:hover { background: #fff; color: var(--head); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* nav: a floating bar in Lightfield's construction (ruled 2026-09-21): fixed,
 * inset 1rem, content width, 11px radius, Plane over a blur with a hairline; the
 * wordmark, six links, a hairline, Log in and the demo button. Below 980px
 * the links fold into the pill behind the menu button (see the phone rules). */
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: flex; justify-content: center; padding: 1rem var(--s4) 0; pointer-events: none; }
.nav { pointer-events: auto; display: flex; align-items: center; gap: 1.25rem; width: max-content; max-width: calc(100% - 2 * var(--s4)); padding: .25rem .28rem .25rem .95rem; border-radius: 11px; background: rgba(241,247,243,.88); backdrop-filter: blur(17px); -webkit-backdrop-filter: blur(17px); box-shadow: 0 0 0 1px rgba(184,212,214,.8); } /* the hairline that sets the bar off the Mist ground (ruled 2026-09-21, Vlad's suggestion) */
.nav .mark { display: block; margin-right: .4rem; }
.nav .mark svg { width: 6.25rem; height: auto; display: block; color: var(--head); }
/* the wordmark's outlines are ~1.5 units on a 254-unit box, under a pixel at these sizes; a .5 stroke under the fill
 * lifts it to a regular weight in the bar and footer (ruled 2026-09-21, provisional pending Todd; the strip's other steps
 * are in the wordmark-weights trial). Set on the <use>, which the symbol's paths inherit. */
.nav .mark svg use, footer .mark svg use { stroke: currentColor; stroke-width: .5; paint-order: stroke; stroke-linejoin: miter; }
.nav .links { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 1.15rem; }
.nav .links a, .nav .login { font-weight: 500; font-size: .875rem; line-height: 1; color: var(--mute); padding: .45rem 0; transition: color .12s ease; white-space: nowrap; }
.nav .links a:hover, .nav .login:hover { color: var(--head); }
.nav .links a:focus-visible, .nav .login:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
.nav .div { width: 1px; height: 1.25rem; background: var(--line); }
.nav .login { margin-inline: .1rem .35rem; }
.menu { display: none; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 8px; background: transparent; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; padding: 0; }
.menu span { display: block; width: 1.1rem; height: 1px; background: var(--head); transition: transform .2s ease; }
.navbar[data-open] .menu span:first-child { transform: translateY(3px) rotate(45deg); }
.navbar[data-open] .menu span:last-child { transform: translateY(-3px) rotate(-45deg); }
.menu:hover { background: rgba(1,53,57,.06); }
.menu:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* on a phone the bar folds out (P1, ruled 2026-09-21): the pill grows
 * downward and the same six links and Log in stack inside it, ruled by
 * hairlines; the demo button stays in the bar row. The menu carries nothing
 * the bar does not. The Sept 18 drop panel is kept in the palette. */

/* hero */
.hero { padding-block: var(--s7) var(--s7); display: grid; grid-template-columns: minmax(0,6fr) minmax(0,6fr); gap: var(--s8); align-items: center; }
.hero .copy { display: grid; gap: var(--s5); }
.hero .eyebrow { margin-bottom: calc(var(--s3) - var(--s5)); } /* the eyebrow sits 12px above the headline, as on the section heads */
.hero .acts { display: flex; gap: var(--s3); flex-wrap: wrap; }
.hero .fig { max-width: 34rem; width: 100%; justify-self: end; }
.hero .fig svg { display: block; width: 100%; height: auto; }
.spec { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: grid; margin: 0; }
.spec .row { display: grid; grid-template-columns: 8rem 1fr; gap: var(--s4); padding: var(--s3) var(--s4); border-top: 1px solid var(--line); font-size: .92rem; }
.spec .row:first-child { border-top: 0; background: var(--plane); font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); grid-template-columns: 1fr; }
.spec dt { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); padding-top: .2rem; }
.spec dd { margin: 0; color: var(--ink); }

/* the hero's rings: agents inside the control layer inside your environment,
 * drawn in the system figure's register (ruled 2026-09-21, H6 of the hero
 * trials): sub-pixel dashes, a dotted grid inside the environment, faint
 * crosshairs, mono labels with leaders, and the approver and the record on
 * the control ring as the figure's people. Motion: the control ring's dashes
 * turn one way and the agent ring's the other, a faint sweep circles the
 * control ring and lights three ticks lime as it passes, a lime ring breathes
 * around the core, five specialists orbit. Lime in the hero is those two
 * moments only. Holds still under reduced motion. Still the placeholder for
 * the stylized hero animation (ruled 2026-09-17). */
.rings .draft { fill: none; stroke: rgba(6,111,118,.10); stroke-width: .6; stroke-dasharray: 2 4; }
.rings .ring { fill: none; stroke: var(--accent); stroke-width: .9; stroke-dasharray: 3 4; opacity: .7; }
.rings .ring.faint { stroke: var(--accent); opacity: .42; stroke-dasharray: 2 3; }
.rings .node { fill: #fff; stroke: #c6dbdc; stroke-width: .9; }
.rings .core { fill: #fff; stroke: rgba(6,111,118,.7); stroke-width: .9; }
.rings .core-glow { fill: none; stroke: var(--accent); stroke-width: .9; }
.rings .corering { fill: none; stroke: var(--lime); stroke-width: 1.2; }
.rings .ic { fill: var(--accent); }
.rings .sweep { fill: url(#hero-sweep); }
.rings .human { fill: #fff; stroke: rgba(6,111,118,.8); stroke-width: .9; }
.rings .hdot { fill: rgba(6,111,118,.55); }
.rings .ledger path { fill: none; stroke: #b8d4d6; stroke-width: 1.1; stroke-linecap: round; }
.rings .tick { fill: rgba(6,111,118,.18); stroke: rgba(6,111,118,.55); stroke-width: .8; }
.rings .plab { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; fill: var(--mute); }
.rings .plab.on { fill: var(--head); }
.rings .llead { fill: none; stroke: #c6dbdc; stroke-width: .8; }
.rings .ltab { fill: var(--paper); }
@keyframes ringspin { to { stroke-dashoffset: -96; } }
@keyframes ringdash { to { stroke-dashoffset: -70; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes unspin { to { transform: rotate(-360deg); } }
@keyframes breathe { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes limeblink { 0%, 100% { fill: rgba(6,111,118,.18); stroke: rgba(6,111,118,.55); } 2% { fill: #A3E96A; stroke: #8fd65a; } 16% { fill: rgba(6,111,118,.18); stroke: rgba(6,111,118,.55); } }
.rings .ring.live { animation: ringdash 10s linear infinite; }
.rings .ring.inner { animation: ringdash 16s linear infinite reverse; }
.rings .sweepg { transform-origin: 300px 280px; animation: spin 14s linear infinite; }
.rings .orbit { transform-origin: 300px 280px; animation: spin 36s linear infinite; }
.rings .sat { transform-origin: center; transform-box: fill-box; animation: unspin 36s linear infinite; }
.rings .core-glow, .rings .corering { animation: breathe 4s ease-in-out infinite; }
.rings .tick.lime { animation: limeblink 14s linear infinite; }
@media (prefers-reduced-motion: reduce) { .rings * { animation: none !important; } }

/* the desk: a window on a desktop, inset to the grid under the hero, holding a
 * live product screen scaled to fit. Its ground is Deep water (D15, 2026-09-20),
 * replacing the swept slide-backdrop gradient of 2026-09-18. */
.desk { margin-block: var(--s4) var(--s6); padding: var(--s6); border-radius: var(--block-radius); }
.desk > .window { position: relative; z-index: 1; }

/* the two fills at the site's finish (D15, 2026-09-20). tokens.css carries the
 * print arrangement of Frost and Deep water; here Deep water goes out of focus
 * behind a kale veil and a film of grain, and each surface gets its own
 * arrangement (.a1 to .a7) so no two cards match. Frost on the site is the
 * token as it is, on .band-plane cards when they want it. */
/* the finish on the fills, a screen rule of the language since D23 (2026-09-22): blurred behind a veil and grained, an arrangement per surface */
.hz { position: relative; isolation: isolate; overflow: hidden; background: #0e3d4e; color: #fff; }
.hz > * { position: relative; z-index: 1; }
.hz::before { content: ""; position: absolute; inset: -28%; z-index: 0; pointer-events: none; background-image: var(--hz, var(--fill-deep)); filter: blur(48px); transform: scale(1.15); }
.hz::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .24; mix-blend-mode: soft-light; background-size: 220px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.hz.a1 { --hz: linear-gradient(rgba(1,53,57,.22), rgba(1,53,57,.22)), radial-gradient(ellipse 67% 56% at 44% 57%, rgba(6,111,118,0.95) 0%, rgba(6,111,118,0) 70%), radial-gradient(ellipse 36% 31% at 51% 60%, rgba(1,53,57,0.9) 0%, rgba(1,53,57,0) 70%), radial-gradient(ellipse 32% 23% at 66% 85%, rgba(42,138,109,0.7) 0%, rgba(42,138,109,0) 70%), radial-gradient(ellipse 57% 33% at 1% 87%, rgba(90,160,92,0.55) 0%, rgba(90,160,92,0) 70%), radial-gradient(ellipse 55% 51% at 108% 106%, rgba(163,233,106,0.26) 0%, rgba(163,233,106,0) 70%), radial-gradient(ellipse 50% 29% at 9% -8%, rgba(27,94,120,0.85) 0%, rgba(27,94,120,0) 70%); }
.hz.a2 { --hz: linear-gradient(rgba(1,53,57,.22), rgba(1,53,57,.22)), radial-gradient(ellipse 65% 39% at 101% 104%, rgba(6,111,118,0.95) 0%, rgba(6,111,118,0) 70%), radial-gradient(ellipse 50% 31% at 61% 41%, rgba(1,53,57,0.9) 0%, rgba(1,53,57,0) 70%), radial-gradient(ellipse 37% 30% at 13% 43%, rgba(42,138,109,0.7) 0%, rgba(42,138,109,0) 70%), radial-gradient(ellipse 58% 47% at -7% 0%, rgba(90,160,92,0.55) 0%, rgba(90,160,92,0) 70%), radial-gradient(ellipse 43% 25% at 52% 78%, rgba(163,233,106,0.26) 0%, rgba(163,233,106,0) 70%), radial-gradient(ellipse 56% 52% at 84% 61%, rgba(27,94,120,0.85) 0%, rgba(27,94,120,0) 70%); }
.hz.a3 { --hz: linear-gradient(rgba(1,53,57,.22), rgba(1,53,57,.22)), radial-gradient(ellipse 54% 57% at 72% 1%, rgba(6,111,118,0.95) 0%, rgba(6,111,118,0) 70%), radial-gradient(ellipse 55% 42% at 90% 52%, rgba(1,53,57,0.9) 0%, rgba(1,53,57,0) 70%), radial-gradient(ellipse 57% 52% at 53% 3%, rgba(42,138,109,0.7) 0%, rgba(42,138,109,0) 70%), radial-gradient(ellipse 59% 48% at 24% 35%, rgba(90,160,92,0.55) 0%, rgba(90,160,92,0) 70%), radial-gradient(ellipse 63% 38% at 105% 107%, rgba(163,233,106,0.26) 0%, rgba(163,233,106,0) 70%), radial-gradient(ellipse 43% 42% at -1% 25%, rgba(27,94,120,0.85) 0%, rgba(27,94,120,0) 70%); }
.hz.a4 { --hz: linear-gradient(rgba(1,53,57,.22), rgba(1,53,57,.22)), radial-gradient(ellipse 35% 38% at 36% 18%, rgba(6,111,118,0.95) 0%, rgba(6,111,118,0) 70%), radial-gradient(ellipse 51% 40% at 59% 73%, rgba(1,53,57,0.9) 0%, rgba(1,53,57,0) 70%), radial-gradient(ellipse 61% 58% at 78% 59%, rgba(42,138,109,0.7) 0%, rgba(42,138,109,0) 70%), radial-gradient(ellipse 35% 22% at 91% 43%, rgba(90,160,92,0.55) 0%, rgba(90,160,92,0) 70%), radial-gradient(ellipse 55% 51% at 77% 10%, rgba(163,233,106,0.26) 0%, rgba(163,233,106,0) 70%), radial-gradient(ellipse 29% 31% at -3% 84%, rgba(27,94,120,0.85) 0%, rgba(27,94,120,0) 70%); }
.hz.a5 { --hz: linear-gradient(rgba(1,53,57,.22), rgba(1,53,57,.22)), radial-gradient(ellipse 47% 46% at 64% 97%, rgba(6,111,118,0.95) 0%, rgba(6,111,118,0) 70%), radial-gradient(ellipse 59% 58% at 102% 52%, rgba(1,53,57,0.9) 0%, rgba(1,53,57,0) 70%), radial-gradient(ellipse 35% 40% at 93% -6%, rgba(42,138,109,0.7) 0%, rgba(42,138,109,0) 70%), radial-gradient(ellipse 59% 38% at 80% 21%, rgba(90,160,92,0.55) 0%, rgba(90,160,92,0) 70%), radial-gradient(ellipse 38% 24% at 33% 43%, rgba(163,233,106,0.26) 0%, rgba(163,233,106,0) 70%), radial-gradient(ellipse 41% 39% at 51% 68%, rgba(27,94,120,0.85) 0%, rgba(27,94,120,0) 70%); }
.hz.a6 { --hz: linear-gradient(rgba(1,53,57,.22), rgba(1,53,57,.22)), radial-gradient(ellipse 69% 55% at -1% 82%, rgba(6,111,118,0.95) 0%, rgba(6,111,118,0) 70%), radial-gradient(ellipse 54% 59% at 103% 42%, rgba(1,53,57,0.9) 0%, rgba(1,53,57,0) 70%), radial-gradient(ellipse 35% 20% at 14% -5%, rgba(42,138,109,0.7) 0%, rgba(42,138,109,0) 70%), radial-gradient(ellipse 32% 24% at 43% 5%, rgba(90,160,92,0.55) 0%, rgba(90,160,92,0) 70%), radial-gradient(ellipse 29% 27% at 38% 96%, rgba(163,233,106,0.26) 0%, rgba(163,233,106,0) 70%), radial-gradient(ellipse 35% 22% at 99% 78%, rgba(27,94,120,0.85) 0%, rgba(27,94,120,0) 70%); }
.hz.a7 { --hz: linear-gradient(rgba(1,53,57,.22), rgba(1,53,57,.22)), radial-gradient(ellipse 61% 68% at 65% 79%, rgba(6,111,118,0.95) 0%, rgba(6,111,118,0) 70%), radial-gradient(ellipse 29% 24% at 79% 101%, rgba(1,53,57,0.9) 0%, rgba(1,53,57,0) 70%), radial-gradient(ellipse 66% 41% at 103% 68%, rgba(42,138,109,0.7) 0%, rgba(42,138,109,0) 70%), radial-gradient(ellipse 51% 46% at 46% 20%, rgba(90,160,92,0.55) 0%, rgba(90,160,92,0) 70%), radial-gradient(ellipse 40% 44% at -8% 16%, rgba(163,233,106,0.26) 0%, rgba(163,233,106,0) 70%), radial-gradient(ellipse 61% 39% at 82% 9%, rgba(27,94,120,0.85) 0%, rgba(27,94,120,0) 70%); }

/* the six reasons: a rail of cards on Deep water, three in view, arrows below
 * (ruled 2026-09-20 after Lightfield's customer cards; replaces the plane band
 * of six hairline cells) */
.rail { display: flex; gap: var(--s4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; }
.rail::-webkit-scrollbar { display: none; }
.card { flex: 0 0 calc((100% - 2 * var(--s4)) / 3); scroll-snap-align: start; border-radius: var(--r); padding: var(--s5); min-height: 24rem; display: grid; grid-template-rows: auto 1fr; gap: var(--s5); } /* no ring: the fill alone marks the edge (ruled 2026-09-22, D21) */
.card .top { display: flex; align-items: center; gap: .65rem; font-weight: 500; font-size: 1rem; }
.card .top svg { width: 1.5rem; height: 1.5rem; fill: currentColor; display: block; flex: none; }
.card .body { display: grid; gap: var(--s3); align-content: start; }
.card h3 { color: inherit; font-family: var(--serif); font-weight: 600; font-variation-settings: 'opsz' 40; font-size: 1.6rem; line-height: 1.22; letter-spacing: -.01em; }
.card p { font-size: .95rem; line-height: 1.5; opacity: .86; }
.arrows { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s4); }
.arrow { width: 3.5rem; height: 2rem; border: 0; border-radius: 8px; background: var(--plane); color: var(--head); cursor: pointer; display: grid; place-items: center; padding: 0; transition: background .15s, opacity .15s; } /* the button profile, borderless (2026-09-21) */
.arrow:hover { background: #e4efe8; }
.arrow[disabled] { opacity: .35; cursor: default; }
.arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.arrow svg { width: 1.1rem; height: 1.1rem; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.window { border-radius: var(--block-radius); overflow: hidden; background: #fff; border: 1px solid transparent; } /* no ring, no shadow (D21) */
.wbar { position: relative; height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: #f5f8f6; border-bottom: 1px solid var(--line); }
.wbar i { width: 11px; height: 11px; border-radius: 999px; background: #cfdbd8; display: block; }
.shot { position: relative; overflow: hidden; }
.shot > * { transform-origin: 0 0; }
.shot .d-scr { pointer-events: none; }

/* the desk's first screen (the "quiet desk" trial, 2026-09-17) */
.d-scr{position:absolute;left:0;top:0;width:1280px;height:930px;transform-origin:0 0;display:grid;grid-template-columns:232px 1fr;
  --ground:var(--mist); --chrome:var(--mist-deep); --chrome-line:var(--line); --ink:#212427; --head:#013539; --mute:#5b6b6d; --line:var(--line); --line-soft:#eaf0ee;
  --accent:#066F76; --kale:#013539; --lime:#A3E96A; --plane:#F1F7F3; --urgent:#EA616C; --amber:#A8641A; --amber-soft:rgba(168,100,26,.12);
  --card:#fff; --r:6px; --nav-ink:#213b3d; --nav-mute:#6b7f80; --nav-on:#013539; --nav-on-bg:#F1F7F3;
  background:var(--ground);color:var(--ink);font-family:var(--display);font-size:14px;line-height:1.45}
.d-scr svg.d-i{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* sidebar */
.d-side{background:var(--chrome);border-right:1px solid var(--chrome-line);display:flex;flex-direction:column;padding:18px 12px 14px;color:var(--nav-ink)}
.d-brand{display:flex;align-items:center;gap:10px;padding:2px 8px 18px}
.d-brand svg{height:22px;width:auto;display:block}
.d-newbtn{display:flex;align-items:center;justify-content:center;gap:8px;height:36px;border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--head);font-weight:600;font-size:13.5px;margin:0 0 14px}
.d-nav{display:flex;flex-direction:column;gap:2px}
.d-nav a{display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;border-radius:var(--r);color:var(--nav-ink);text-decoration:none;font-weight:500;font-size:13.5px}
.d-nav a.d-on{background:var(--nav-on-bg);color:var(--nav-on);font-weight:600}
.d-nav a .d-n{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--accent);background:rgba(6,111,118,.10);border-radius:999px;padding:1px 7px}
.d-nav .d-sec{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--nav-mute);padding:16px 10px 6px}
.d-nav .d-hist a{height:28px;font-weight:400;color:var(--nav-mute);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:28px}
.d-side .d-foot{margin-top:auto;display:flex;flex-direction:column;gap:2px}
.d-user{display:flex;align-items:center;gap:10px;padding:8px 10px;font-size:13px}
.d-user .d-av{width:24px;height:24px;border-radius:999px;background:var(--kale);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;font-family:var(--mono)}
.d-user small{display:block;color:var(--nav-mute);font-size:11px}
/* main */
.d-main{display:flex;flex-direction:column;min-width:0}
.d-top{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;font-size:13px;color:var(--mute)}
.d-top .d-crumb{display:flex;gap:8px;align-items:center}
.d-top .d-acts{display:flex;gap:6px}
.d-top .d-acts span{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r);color:var(--head);font-weight:500;background:#fff}
.d-wrap{width:760px;margin:0 auto;padding:44px 0 0}
.d-greet{margin:0 0 22px}
.d-greet .d-eye{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.d-greet h1{max-width:none;font-family:var(--serif);font-weight:600;font-variation-settings:'opsz' 60;font-size:34px;line-height:1.1;letter-spacing:-.02em;color:var(--head);margin:0}
.d-greet .d-sub{font-size:17px;font-weight:500;color:var(--mute);margin:6px 0 0}
/* composer */
.d-comp{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 1px 0 rgba(1,53,57,.03)}
.d-comp .d-ctabs{display:flex;gap:2px;padding:6px 8px 0;border-bottom:1px solid var(--line-soft)}
.d-comp .d-ctabs span{display:inline-flex;align-items:center;gap:6px;padding:8px 10px 9px;font-size:13px;font-weight:500;color:var(--mute);border-bottom:2px solid transparent;margin-bottom:-1px}
.d-comp .d-ctabs span.d-on{color:var(--head);font-weight:600;border-bottom-color:var(--kale)}
.d-comp .d-in{padding:16px 16px 8px;min-height:88px;font-size:15px;color:#8a9a9b}
.d-comp .d-in i{font-style:normal;border-left:1.5px solid var(--kale);margin-right:1px}
.d-comp .d-bar{display:flex;align-items:center;gap:6px;padding:8px 10px 10px}
.d-comp .d-bar span{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r);font-size:12.5px;font-weight:500;color:var(--head);background:#fff}
.d-comp .d-bar span.d-ghost{border-color:transparent;color:var(--mute)}
.d-comp .d-bar .d-send{margin-left:auto;width:34px;height:30px;border-radius:var(--r);background:var(--kale);color:#fff;display:grid;place-items:center}
.d-hint{font-family:var(--mono);font-size:11px;color:var(--mute);letter-spacing:.02em;margin:10px 2px 0}
/* needs you */
.d-needs{margin:26px 0 0}
.d-h{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 8px}
.d-h .d-t{font-weight:700;font-size:13px;color:var(--head);display:flex;align-items:center;gap:8px}
.d-h .d-t .d-dot{width:7px;height:7px;border-radius:999px;background:var(--lime);box-shadow:0 0 0 2px rgba(163,233,106,.35)}
.d-h .d-more{font-size:12.5px;color:var(--accent);font-weight:500}
.d-rows{border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden}
.d-row{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:center;padding:11px 14px;border-top:1px solid var(--line-soft);font-size:13.5px}
.d-row:first-child{border-top:0}
.d-row .d-k{font-family:var(--mono);font-size:11px;color:var(--mute);letter-spacing:.02em}
.d-row .d-who{color:var(--mute);font-size:12.5px}
.d-row b{font-weight:600;color:var(--head)}
.d-row .d-gate{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--r);font-size:12px;font-weight:600;border:1px solid var(--line);color:var(--head);background:#fff}
.d-row .d-gate.d-pri{background:var(--kale);color:#fff;border-color:var(--kale)}
.d-row .d-amb{color:var(--amber);background:var(--amber-soft);font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:3px}
/* shortcuts */
.d-shorts{margin:26px 0 0}
.d-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.d-sc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px 13px;display:flex;flex-direction:column;gap:4px;min-height:82px}
.d-sc .d-ti{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13.5px;color:var(--head)}
.d-sc .d-ti svg{color:var(--accent)}
.d-sc p{margin:0;font-size:12.5px;color:var(--mute);line-height:1.4}
.d-sc .d-st{margin-top:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);padding-top:6px}


/* the moments: five things a person does with the system, text beside a
 * mockup drawn with the product shot's d- classes and the split treatment's
 * frame, chip, kv and score surfaces. Each screen sits on Frost, the light
 * fill (ruled 2026-09-21 after Lightfield's grey grounds; Deep water was
 * overused so soon after the desk). Alternate sides
 * with .flip: that is the stack below 900px, under reduced motion, and
 * without script.
 *
 * Pinned (ruled 2026-09-20, variant A after Lightfield's "What customers
 * do" section): the script adds .pin when the window is wide and motion is
 * welcome. Each .moment then dissolves into the section grid; the five
 * texts share one sticky cell on the left and the five screens scroll past
 * on the right, each with --travel of its own. The screen nearest the
 * middle of the window chooses the text; the change is a fade, never a
 * slide. When the fifth has passed, the page releases into the catalog.
 * The section head above the moments is in normal flow and scrolls away;
 * the moments' headings are h3 at the subsection size (2026-09-21). */
#how { --travel: 84vh; --pin-top: calc(50vh - 9rem); }
#how.pin { padding-bottom: var(--s7); }
#how.pin .moments { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); column-gap: var(--s8); grid-auto-rows: minmax(var(--travel), auto); align-items: center; }
#how.pin .moment, #how.pin .moment.flip { display: contents; }
#how.pin .moment .txt { order: 0; grid-column: 1; grid-row: 1 / span 5; position: sticky; top: var(--pin-top); align-self: start; opacity: 0; pointer-events: none; transition: opacity .28s ease; }
#how.pin .moment .txt.on { opacity: 1; pointer-events: auto; transition-delay: .06s; }
#how.pin .moment .mock { grid-column: 2; align-self: center; }
.moment { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: var(--s8); align-items: center; padding-block: var(--s7); border-top: 1px solid var(--accent-hair); }
.moment:first-child { border-top: 0; }
.moment .txt { display: grid; gap: var(--s4); }
.moment .txt h3 { font-family: var(--serif); font-weight: 600; font-variation-settings: 'opsz' 40; font-size: 1.75rem; line-height: 1.2; letter-spacing: -.012em; max-width: 22ch; } /* the subsection size under the section's h2 (ruled 2026-09-21) */
.moment .txt p { max-width: 34rem; }
.moment.flip { grid-template-columns: minmax(0,7fr) minmax(0,5fr); }
.moment.flip .txt { order: 2; }
.mock { border-radius: var(--block-radius); padding: var(--s5); background: var(--fill-frost);
  --card: #fff; --line-soft: #eaf0ee; --nav-mute: #6b7f80; --amber: #A8641A; --amber-soft: rgba(168,100,26,.12); }
.mock .window { border-radius: 10px; border-color: transparent; }
.mock .mbody { padding: 18px 20px 20px; font-family: var(--display); font-size: 14px; line-height: 1.45; color: var(--ink); background: var(--mist); } /* the app's ground, as the desk screen (2026-09-21) */
.mock svg.d-i { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mock .d-in.typed { color: var(--ink); font-size: 15px; min-height: 0; padding-bottom: 12px; }
.mock .d-in.typed i { border-left: 1.5px solid var(--kale); margin-left: 2px; }
.mock .d-h.mt { margin-top: 18px; }
.mock .d-h.mt2 { margin-top: 14px; }
.mock .d-row { grid-template-columns: 1fr auto auto; }
.mock .d-row .d-k { color: var(--accent); }
.mock .frame { font-size: .84rem; }
.mock .kv { grid-template-columns: 6.5rem 1fr; }

/* the catalog: categories at left on a hairline, each with a one-line
 * descriptor, the chosen one in kale with a bar; the category's agents at
 * right as four white cards on a Frost pane, Lightfield's grey panel in our
 * fill (C2, ruled 2026-09-21 after their Teams section). The cell grid it
 * replaces is kept in the palette. */
.cat2 { display: grid; grid-template-columns: minmax(0,4fr) minmax(0,8fr); gap: var(--s8); align-items: start; }
.catnav { list-style: none; margin: 0; padding: 0; display: grid; border-left: 1px solid var(--line); }
.catnav button { position: relative; font: inherit; font-weight: 500; font-size: 1.15rem; line-height: 1.3; text-align: left; color: var(--mute); background: none; border: 0; padding: .6rem 0 .6rem 1.25rem; cursor: pointer; transition: color .15s ease; width: 100%; }
.catnav button:hover, .catnav button[aria-selected="true"] { color: var(--head); }
.catnav button[aria-selected="true"]::before { content: ""; position: absolute; left: -1px; top: .45rem; bottom: .45rem; width: 2px; background: var(--kale); }
.catnav button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }
.catnav small { display: block; font-weight: 400; font-size: .85rem; line-height: 1.4; color: var(--mute); margin-top: .15rem; max-width: 22rem; }
.catnav button[aria-selected="true"] small { color: var(--ink); }
.catpanel { animation: catfade .25s ease; }
.catpanel[hidden] { display: none; }
@keyframes catfade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.agpane { background: var(--fill-frost); border-radius: var(--block-radius); padding: var(--s5); }
.agcards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.agcard { background: #fff; border-radius: var(--r); padding: var(--s4); display: grid; gap: .45rem; align-content: start; }
.agcard .ico { width: 1.25rem; height: 1.25rem; color: var(--accent); }
.agcard .ico svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.agcard b { font-weight: 600; font-size: 1.02rem; color: var(--head); }
.agcard p { font-size: .92rem; color: var(--ink); }
.agcard .k { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin-top: .2rem; }
@media (prefers-reduced-motion: reduce) { .catpanel { animation: none; } }

/* plate: a diagram in Todd's vocabulary on white */
.plate { border: 1px solid var(--line); background: var(--paper); border-radius: var(--r); overflow: hidden; }
.plate svg { display: block; width: 100%; height: auto; }
.plate .cap { border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s3) var(--s4); font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; color: var(--mute); text-transform: uppercase; }
.dg .soft { fill: #EDF3F0; stroke: #cfdedf; stroke-width: 1; }
.dg .white { fill: #fff; }
.dg .solid { fill: var(--accent); }
.dg .dash { fill: #fff; stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 4 4; }
.dg .wire { fill: none; stroke: var(--accent); stroke-width: 1.6; }
.dg .wire.faint { stroke: #b8d4d6; }
.dg .ic { fill: var(--accent); }
.dg .ic.lime { fill: var(--lime); }
.dg .lab { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; fill: var(--head); }
.dg .lab.mute { fill: var(--mute); }

/* trust strip */
.strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: var(--s7); }
.strip .wrap { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
.strip .cell { padding: var(--s4) var(--s4) var(--s4) 0; display: grid; gap: .25rem; border-left: 1px solid var(--line); padding-left: var(--s4); }
.strip .cell:first-child { border-left: 0; padding-left: 0; }
.strip .k { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.strip .v { font-weight: 600; color: var(--head); font-size: .95rem; }

/* the cell grid: cards that share hairlines */
.cells { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); background: var(--line); gap: 1px; }
.cell4 { background: var(--paper); padding: var(--s5); display: grid; gap: var(--s3); align-content: start; position: relative; }
.cell4 .ico { width: 1.25rem; height: 1.25rem; color: var(--accent); }
.cell4 .ico svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.cell4 p { font-size: .93rem; color: var(--ink); }
.cell4 .head { display: flex; gap: var(--s3); align-items: center; }
.band-plane { background: var(--plane); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* stages: tabs and panel */
.stages { display: grid; grid-template-columns: minmax(0,4fr) minmax(0,8fr); gap: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--paper); }
.tabs { display: grid; align-content: start; border-right: 1px solid var(--line); }
.tab { display: grid; grid-template-columns: 4rem 1fr; gap: var(--s3); text-align: left; width: 100%; font: inherit; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; padding: var(--s4) var(--s4); cursor: pointer; color: var(--mute); transition: all .15s ease; }
.tab:last-child { border-bottom: 0; }
.tab:hover { color: var(--head); background: var(--plane); }
.tab[aria-pressed="true"] { color: var(--head); border-left-color: var(--kale); background: var(--plane); }
.tab .n { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; padding-top: .2rem; }
.tab b { font-weight: 600; font-size: 1rem; }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.panel { padding: var(--s6); display: grid; gap: var(--s4); align-content: start; min-height: 20rem; }
.panel[hidden] { display: none; }
.panel .eyebrow { color: var(--mute); }
.panel h3 { font-size: 1.4rem; letter-spacing: -.02em; }
.panel p { max-width: 34rem; }
.panel ul { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.panel li { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--s2); font-size: .93rem; align-items: start; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.panel li::before { content: ""; width: .5rem; height: .5rem; margin-top: .5rem; background: var(--accent); }
.next { justify-self: start; margin-top: var(--s2); font: inherit; font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; }
.next::after { content: "→"; margin-left: .5rem; }
.next:hover { color: var(--head); }
.next:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* stages, second treatment: a segmented control over a split panel whose
 * right half is a product surface (frame, chips, ledger, key-value, score).
 * Lifted from the D console study on 2026-09-17 to sit beside the tabs and
 * panel above while both are being weighed. */
.seg { display: inline-grid; grid-template-columns: repeat(4, auto); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: var(--s5); }
.seg button { font: inherit; font-weight: 500; font-size: .9rem; background: var(--paper); border: 0; border-left: 1px solid var(--line); padding: .6rem 1.1rem; cursor: pointer; color: var(--mute); display: flex; gap: .6rem; align-items: center; }
.seg button:first-child { border-left: 0; }
.seg button .n { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; }
.seg button:hover { color: var(--head); }
.seg button[aria-pressed="true"] { background: var(--kale); color: #fff; }
.seg button[aria-pressed="true"] .n { color: var(--lime); }
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.split { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); background: var(--paper); }
.split[hidden] { display: none; }
.split .txt { padding: var(--s6); display: grid; gap: var(--s3); align-content: start; border-right: 1px solid var(--line); }
.split .txt .eyebrow { color: var(--mute); }
.split .txt h3 { font-size: 1.35rem; letter-spacing: -.02em; }
.split .txt ul { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: .45rem; font-size: .92rem; }
.split .txt li { display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--s2); }
.split .txt li::before { content: ""; width: .5rem; height: .5rem; margin-top: .5rem; background: var(--accent); }
.split .txt .next { justify-self: start; margin-top: var(--s3); }
.split .surf { padding: var(--s5); background: var(--plane); display: grid; align-content: start; gap: var(--s3); }
.frame { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); overflow: hidden; font-size: .8rem; }
.frame .bar { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: .55rem var(--s4); border-bottom: 1px solid var(--line); background: var(--plane); font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.chip { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; padding: .2rem .5rem; border: 1px solid var(--line); border-radius: var(--chip-radius); color: var(--mute); background: #fff; } /* square, the language's chip (ruled 2026-09-22, D20) */
.chip::before { content: ""; width: .45rem; height: .45rem; background: currentColor; }
.chip.ok { color: var(--accent); border-color: #bcd9da; background: var(--accent-soft); }
.chip.wait { color: var(--attention); border-color: #e9d3a5; background: var(--attention-soft); }
.chip.done { color: var(--head); }
.ledger { width: 100%; border-collapse: collapse; }
.ledger td { padding: .5rem var(--s4); border-bottom: 1px solid var(--line); color: var(--ink); }
.ledger td.id { font-family: var(--mono); font-size: .7rem; color: var(--mute); white-space: nowrap; }
.ledger td:last-child { text-align: right; }
.kv { display: grid; grid-template-columns: 8rem 1fr; gap: .4rem var(--s4); padding: var(--s4); margin: 0; font-size: .82rem; }
.kv dt { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); padding-top: .15rem; }
.kv dd { margin: 0; color: var(--ink); }
.score { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
.score div { padding: var(--s3) var(--s4); border-left: 1px solid var(--line); display: grid; gap: .15rem; }
.score div:first-child { border-left: 0; }
.score b { font-family: var(--mono); font-size: 1.1rem; color: var(--head); font-weight: 500; font-variant-numeric: tabular-nums; }
.score span { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }

/* the layers: three isometric plates and the rows that answer them (L0 of
 * the layer studies, 2026-09-17). The drawing and the rows select each
 * other; the selected plate lifts and fills, the others dim. */
.duo { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--s5); align-items: start; }
.duo .plate { padding: 0; }
.duo .plate svg { padding: var(--s4); }
.lrows { display: grid; border-top: 1px solid var(--line); }
.lrow { border-bottom: 1px solid var(--line); }
.lh { display: flex; align-items: center; gap: .9rem; width: 100%; text-align: left; font: inherit; background: none; border: 0; padding: 1.1rem 0; cursor: pointer; color: var(--head); }
.lh:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.tile { width: 2.4rem; height: 2.4rem; flex: none; border-radius: var(--r); background: var(--accent-soft); display: grid; place-items: center; color: var(--accent); transition: background .25s ease, color .25s ease; }
.tile svg { width: 1.3rem; height: 1.3rem; fill: currentColor; }
.lt { flex: 1; font-weight: 700; font-size: 1.2rem; letter-spacing: -.02em; line-height: 1.1; opacity: .55; transition: opacity .25s ease; }
.lt small { display: block; font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); font-weight: 400; margin-top: .3rem; }
.pm { position: relative; width: 1rem; height: 1rem; flex: none; color: var(--accent); transition: opacity .25s ease; }
.pm::before, .pm::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; background: currentColor; margin-top: -1px; }
.pm::after { transform: rotate(90deg); }
.lh:hover .lt { opacity: .85; }
.lrow[aria-expanded="true"] .lt { opacity: 1; }
.lrow[aria-expanded="true"] .tile { background: var(--kale); color: var(--lime); }
.lrow[aria-expanded="true"] .pm { opacity: 0; } /* the open row has nothing to close; only the plus is needed (2026-09-21) */
.lb { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.lb > div { overflow: hidden; min-height: 0; }
.lrow[aria-expanded="true"] .lb { grid-template-rows: 1fr; }
.lbi { padding: 0 0 1.25rem 3.3rem; display: grid; gap: var(--s3); }
.lbi p { font-size: .95rem; max-width: 34rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chips span { font-size: .82rem; font-weight: 600; color: var(--head); border-radius: 4px; padding: .3rem .7rem; background: var(--plane); } /* borderless on the plane (ruled 2026-09-21) */
/* the layers figure: the ruled register (2026-09-20); the figure floats on the page, the rows are unruled */
#layers .plate { border: 0; background: transparent; }
#layers .duo .plate svg { padding: 0; }
#layers .lrows { border-top: 0; }
#layers .lrow { border-bottom: 0; }
.plates .slab { fill: #f1f6f4; stroke: #d3e2e2; stroke-width: .8; }
.plates .shell { fill: #fff; stroke: #c6dbdc; stroke-width: .9; transition: fill .35s ease, stroke .25s ease; }
.plates .grid { stroke: none; }
.plates .guide { fill: none; stroke: rgba(6,111,118,.22); stroke-width: .7; stroke-dasharray: 3 3; }
.plates .draft { fill: none; stroke: rgba(6,111,118,.10); stroke-width: .6; stroke-dasharray: 2 4; }
.plates .hole { fill: #fff; stroke: #c6dbdc; stroke-width: .8; }
.plates .llead { fill: none; stroke: #c6dbdc; stroke-width: .8; }
.plates [data-state="sel"] .shell { fill: #F7FAF9; stroke: rgba(6,111,118,.6); stroke-width: 1; }
.plates [data-state="sel"] .hole { stroke: rgba(6,111,118,.6); }
.plates [data-layer]:not(.slice)[data-state="sel"] .lift { transform: translateY(-12px); }
.plates .plab { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; fill: var(--mute); }
.plates [data-state="sel"] .plab { fill: var(--head); }
.plates .tsh { fill: none; stroke: rgba(6,111,118,.28); stroke-width: .7; }
.plates .tile { stroke: rgba(6,111,118,.42); stroke-width: .7; }
.plates .tile.pick { stroke: rgba(6,111,118,.7); stroke-width: .9; }
.plates .slot { fill: none; stroke: #c6dbdc; stroke-width: .8; stroke-dasharray: 2 3; }
.plates .block { fill: rgba(6,111,118,.16); stroke: rgba(6,111,118,.8); stroke-width: .9; }
.plates .wire { fill: none; stroke: var(--accent); stroke-width: .9; opacity: .6; }
.plates .wire.faint { stroke: #c6dbdc; opacity: 1; stroke-dasharray: 2 3; }
.plates .wire.crawl { stroke-dasharray: 3 4; animation: crawl 1.6s linear infinite; }
.plates .human { fill: #fff; stroke: rgba(6,111,118,.8); stroke-width: .9; }
.plates .hdot { fill: var(--lime); }
.plates .ledger path { fill: none; stroke: #c6dbdc; stroke-width: 1.1; stroke-linecap: round; }
.plates .ring { fill: none; stroke: var(--accent); stroke-width: .9; stroke-dasharray: 3 4; opacity: .7; }
.plates .ring.faint { stroke: #c6dbdc; opacity: 1; stroke-dasharray: 2 3; animation: none; }
.plates .ring.live { animation: ringspin 12s linear infinite; }
.plates .ref { fill: #fff; stroke: #c6dbdc; stroke-width: .8; }
.plates .ref.live { fill: rgba(6,111,118,.3); stroke: rgba(6,111,118,.7); }
.plates [data-state="on"] .lift > g:nth-child(n+3) { opacity: .6; transition: opacity .35s ease; }
.plates [data-state="sel"] .lift > g { opacity: 1; }
[data-sel="compliance"] .lrow:not([data-layer="compliance"]) .tile { background: rgba(6,111,118,.22); }
/* focus: no browser ring on click; a stroke for keyboard focus */
.plates [data-layer] { cursor: pointer; outline: none; }
.plates [data-layer]:focus-visible .shell, .plates [data-layer]:focus-visible .pface { stroke: var(--accent); stroke-width: 1.4; }
/* the slice */
.plates .slice { cursor: pointer; outline: none; }
.plates .slice .lift { transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .35s ease; }
.plates .pface { fill: rgba(6,111,118,.05); stroke: rgba(6,111,118,.38); stroke-width: .8; transition: fill .3s ease, stroke .3s ease; }
.plates .slice.back .pface { fill: rgba(6,111,118,.03); stroke: rgba(6,111,118,.22); }
.plates .slice .hole { stroke: rgba(6,111,118,.3); }
.plates .rule { fill: none; stroke: rgba(6,111,118,.18); stroke-width: .7; }
.plates .rmark { fill: rgba(6,111,118,.3); stroke: rgba(6,111,118,.7); stroke-width: .8; }
.plates .ptop { fill: rgba(6,111,118,.12); stroke: rgba(6,111,118,.45); stroke-width: .8; transition: fill .3s ease; }
.plates .pend { fill: rgba(6,111,118,.09); stroke: rgba(6,111,118,.38); stroke-width: .8; transition: fill .3s ease; }
.plates .foot { fill: rgba(6,111,118,.10); stroke: none; transition: fill .3s ease; }
.plates .footline { fill: none; stroke: rgba(6,111,118,.45); stroke-width: .8; }
.plates .slice-foot { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.plates .slice-lab .plab { fill: var(--mute); transition: fill .3s ease; }
.plates .slice:hover .pface { stroke: var(--accent); }
.plates .slice:focus-visible .pface { stroke: var(--accent); stroke-width: 1.4; }
/* printed on the pane */
.plates .trace { fill: none; stroke: rgba(6,111,118,.5); stroke-width: .8; stroke-linejoin: round; }
.plates .trace.long { stroke: rgba(6,111,118,.55); stroke-width: 1; stroke-dasharray: 5 6; animation: crawlup 2.2s linear infinite; }
.plates .bus { fill: none; stroke: rgba(6,111,118,.4); stroke-width: .8; }
.plates .pad { fill: #fff; stroke: rgba(6,111,118,.6); stroke-width: .9; }
.plates .node { fill: rgba(6,111,118,.25); stroke: rgba(6,111,118,.7); stroke-width: .9; }
.plates .chip { fill: rgba(6,111,118,.12); stroke: rgba(6,111,118,.55); stroke-width: .8; }
.plates .chk { fill: #fff; stroke: rgba(6,111,118,.5); stroke-width: .8; }
.plates .chk.on { fill: rgba(6,111,118,.45); }
.plates .bracket { fill: none; stroke: rgba(6,111,118,.55); stroke-width: .8; }
.plates .tick { fill: rgba(6,111,118,.18); stroke: rgba(6,111,118,.55); stroke-width: .8; animation: blink 7s ease-out infinite; }
.plates .sweep { fill: url(#sweepg); animation: sweep 7s linear infinite; }
@keyframes crawlup { to { stroke-dashoffset: -22; } }
@keyframes sweep { from { transform: translateY(0); } to { transform: translateY(460px); } }
@keyframes blink { 0%, 100% { fill: rgba(6,111,118,.18); } 4% { fill: rgba(6,111,118,.85); } 16% { fill: rgba(6,111,118,.18); } }
[data-sel="compliance"] .plates .trace { stroke: rgba(6,111,118,.8); }
[data-sel="compliance"] .plates .trace.long { stroke: var(--accent); }
[data-sel="compliance"] .plates .pad, [data-sel="compliance"] .plates .node { stroke: var(--accent); }
[data-sel="compliance"] .plates .chip { fill: rgba(6,111,118,.25); stroke: var(--accent); }
[data-sel="compliance"] .plates .chk.on { fill: rgba(6,111,118,.75); }
[data-sel="compliance"] .plates .bracket, [data-sel="compliance"] .plates .bus { stroke: var(--accent); }
/* selected: the slice slides back and to the left, and darkens; the plates stay */
[data-sel="compliance"] .plates .slice .lift, [data-sel="compliance"] .plates .slice-foot { transform: translate(-12px,-7px); }
[data-sel="compliance"] .plates .pface { fill: rgba(6,111,118,.11); stroke: rgba(6,111,118,.85); stroke-width: .9; }
[data-sel="compliance"] .plates .slice.back .pface { fill: rgba(6,111,118,.06); stroke: rgba(6,111,118,.45); }
[data-sel="compliance"] .plates .ptop { fill: rgba(6,111,118,.28); stroke: var(--accent); }
[data-sel="compliance"] .plates .pend { fill: rgba(6,111,118,.18); stroke: var(--accent); }
[data-sel="compliance"] .plates .foot { fill: rgba(6,111,118,.22); }
[data-sel="compliance"] .plates .footline, [data-sel="compliance"] .plates .slot { stroke: var(--accent); }
[data-sel="compliance"] .plates .rmark { fill: rgba(6,111,118,.6); }
[data-sel="compliance"] .plates .slice-lab .plab { fill: var(--head); }
[data-sel="compliance"] .plates [data-state="on"] .lift > g:nth-child(n+3) { opacity: .8; }
/* a plate selected: the slice steps back */
.plates .slice { transition: opacity .35s ease; }
[data-sel]:not([data-sel="compliance"]) .plates .slice { opacity: .6; }
@media (prefers-reduced-motion: reduce) { .plates * { animation: none !important; transition: none !important; } .lb, .tile, .pm, .lt { transition: none !important; } }

/* your environment: the boundary drawn around the six items (V4, ruled
 * 2026-09-21): a dashed edge in the accent, a dotted grid fading inside it,
 * the account named on its edge, Hyperlinear's role as a line at the foot. */
.boundary { position: relative; border: 1px dashed rgba(6,111,118,.45); border-radius: var(--block-radius); padding: var(--s6) var(--s6) var(--s5); background: radial-gradient(ellipse 60% 60% at 50% 40%, rgba(6,111,118,.04), rgba(6,111,118,0) 70%); }
.boundary::before { content: ""; position: absolute; inset: -5rem; z-index: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><path d='M20,0 H0 V20' fill='none' stroke='%23c4d9db' stroke-width='.75' stroke-dasharray='1 3'/></svg>"); -webkit-mask-image: linear-gradient(to right, transparent, #000 7rem, #000 calc(100% - 7rem), transparent), linear-gradient(to bottom, transparent, #000 7rem, #000 calc(100% - 7rem), transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 7rem, #000 calc(100% - 7rem), transparent), linear-gradient(to bottom, transparent, #000 7rem, #000 calc(100% - 7rem), transparent); mask-composite: intersect; pointer-events: none; } /* the hero's grid, running past the box and fading at its edges (2026-09-21) */
.boundary > * { position: relative; }
/* the dotted grid above bleeds 5rem past the boundary, wider than the page
 * gutter below ~1360px, so the section clips it sideways: without this the
 * page scrolls horizontally at laptop and phone widths (website-launch#05) */
section:has(.boundary) { overflow-x: clip; }
.btag { position: absolute; top: -.6rem; left: var(--s5); background: var(--paper); padding: 0 .5rem; font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--head); }
.bfoot { display: flex; align-items: center; gap: .6rem; margin-top: var(--s5); font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.bfoot .ref { width: .9rem; height: .9rem; border-radius: 3px; background: rgba(6,111,118,.18); border: 1px solid rgba(6,111,118,.7); flex: none; }
.kgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5) var(--s6); }
.kcell { display: grid; gap: .45rem; align-content: start; }
.kcell .ico { width: 1.25rem; height: 1.25rem; color: var(--accent); }
.kcell .ico svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.kcell h3 { font-size: 1.05rem; }
.kcell p { font-size: .92rem; color: var(--ink); }

/* control rows (kept for the palette's P12) */
.rows { border-top: 1px solid var(--line); }
.row3 { display: grid; grid-template-columns: minmax(0,4fr) minmax(0,7fr); gap: var(--s5); padding: var(--s5) 0; border-bottom: 1px solid var(--line); align-items: start; }
.row3 h3 { font-size: 1.2rem; }
.row3 p { color: var(--ink); max-width: 40rem; }

/* the call to action: a Deep water box on the grid before the footer
 * (ruled 2026-09-21; it opened the kale footer before). Lime eyebrow and
 * lime button on the dark ground. */
/* two corners by size (ruled 2026-09-22, D19, fourth harmony round): --card-radius on pieces in a column,
 * --block-radius on the big blocks that hold a screen or ground a section: the desk, the windows, the panes,
 * the boundary and the closing block. The bar keeps its own 11px (ruled 2026-09-21). */
/* the closing block stays on Deep water, as the documents' does (ruled 2026-09-22, D18, third harmony round) */
.cta { padding: var(--s7); border-radius: var(--block-radius); display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--s6); align-items: center; }
.cta .eyebrow { color: var(--lime); }
.cta h2 { color: #fff; margin-top: var(--s3); }
.cta p { color: rgba(255,255,255,.78); margin-top: var(--s3); max-width: 34rem; }

/* footer: white, no rule above it (2026-09-21) */
footer { background: var(--paper); color: var(--ink); padding-block: 0 var(--s5); }
#talk::before { display: none; } /* the box carries its own edge; no rule before or after it */
footer .cols { padding-block: var(--s7); display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s6); font-size: .9rem; }
footer h4 { margin: 0 0 var(--s3); font-family: var(--display); font-size: .8rem; color: var(--mute); font-weight: 500; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
footer ul a { color: var(--head); }
footer ul a:hover { color: var(--accent); }
footer .mark svg { width: 7.5rem; height: auto; color: var(--head); margin-bottom: var(--s3); }
footer .mark p { color: var(--mute); max-width: 24rem; font-size: .88rem; }
footer .legal { border-top: 1px solid var(--accent-hair); padding-block: var(--s4); font-size: .8rem; color: var(--mute); display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }

/* the bar folds out below 980px: with six links it crowds the row before the
 * rest of the layout needs to stack at 900px (2026-09-21) */
@media (max-width: 980px) {
  body { padding-top: 3.5rem; }
  .navbar { padding: .75rem var(--s4) 0; }
  .nav { flex-wrap: wrap; width: 100%; max-width: none; gap: .6rem; padding: .25rem .28rem .25rem .9rem; }
  .nav .links, .nav .div, .nav .login { display: none; }
  .nav .mark { order: 0; margin-right: auto; }
  .nav .btn { order: 1; }
  .nav .menu { order: 2; display: flex; }
  .navbar[data-open] .nav .links { display: block; order: 3; width: 100%; margin: .2rem .62rem 0; }
  .navbar[data-open] .nav .links li a { display: block; font-size: .95rem; color: var(--head); padding: .7rem 0; border-top: 1px solid var(--line); }
  .navbar[data-open] .nav .login { display: block; order: 4; width: 100%; margin: -.6rem .62rem .2rem; font-size: .95rem; padding: .7rem 0; border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .moment, .moment.flip { grid-template-columns: minmax(0,1fr); gap: var(--s5); } /* minmax: the first plate's min-content is 364px, which pushed the column past a 360px phone */
  .moment.flip .txt { order: 0; }
  .card { flex-basis: calc((100% - var(--s4)) / 2); }
  .mock { padding: var(--s4); }
  .hero { grid-template-columns: 1fr; gap: var(--s6); }
  .hero .fig { justify-self: stretch; max-width: none; }
  .cells { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cat2 { grid-template-columns: 1fr; gap: var(--s5); }
  .catnav { border-left: 0; border-top: 1px solid var(--line); grid-template-columns: 1fr 1fr; }
  .catnav button { padding: .6rem 0; font-size: 1rem; }
  .catnav button[aria-selected="true"]::before { left: 0; right: 0; top: -1px; bottom: auto; height: 2px; width: auto; }
  .catnav small { display: none; }
  .agcards { grid-template-columns: 1fr; }
  .strip .wrap { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .strip .cell:nth-child(3) { border-left: 0; padding-left: 0; }
  .strip .cell { padding-block: var(--s3); }
  .desk { padding: var(--s4); border-radius: 8px; }
  .window { border-radius: 6px; }
  .stages { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .duo { grid-template-columns: 1fr; }
  .lbi { padding-left: 0; }
  .split .txt { border-right: 0; border-bottom: 1px solid var(--line); }
  .seg { display: grid; grid-template-columns: repeat(2, 1fr); }
  .seg button:nth-child(3) { border-left: 0; }
  .seg button:nth-child(n+3) { border-top: 1px solid var(--line); }
  .tabs { border-right: 0; border-bottom: 1px solid var(--line); }
  .row3 { grid-template-columns: 1fr; gap: var(--s2); }
  .kgrid { grid-template-columns: 1fr; }
  .boundary { padding: var(--s5) var(--s4); }
  .cta { grid-template-columns: 1fr; padding: var(--s6) var(--s5); }
  .cta .btn { justify-self: start; } /* one column: the button keeps its own width instead of stretching across the box */
  footer .cols { grid-template-columns: 1fr 1fr; }
  section { padding-block: 0 var(--s7); }
  section::before { margin-bottom: var(--s7); }
}
@media (max-width: 560px) {
  .card { flex-basis: 86%; min-height: 21rem; }
  .boundary { padding-top: 2.5rem; } /* the edge tag runs to two lines here; room for its second line above the first item */
  .mock .d-row { grid-template-columns: 1fr; gap: 8px; }
  .mock .d-ctabs { flex-wrap: wrap; } /* the composer's tabs are wider than the plate on a phone: whole tabs move to a second row */
  .mock .d-ctabs span { padding-inline: 6px; white-space: nowrap; }
  .cells { grid-template-columns: 1fr; }
  footer .cols { grid-template-columns: 1fr; }
  .spec .row { grid-template-columns: 1fr; gap: .25rem; }
  .panel { padding: var(--s4); }
  .split .txt, .split .surf { padding: var(--s4); }
  .kv { grid-template-columns: 1fr; }
  .score { grid-template-columns: 1fr; }
  .score div { border-left: 0; border-top: 1px solid var(--line); }
  .score div:first-child { border-top: 0; }
  .strip .wrap { grid-template-columns: 1fr; }
  .strip .cell { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .strip .cell:first-child { border-top: 0; }
}

/* About and Contact (website-launch#04, 2026-09-22), appended rather than
 * merged into the rules above so the branches editing this file in parallel
 * merge cleanly.
 *
 * The two pages are built from the components already here. Two additions the
 * set did not have, both made from the card and the button: the person card
 * and the form. */

/* the foundation's four: the six reasons' card, on a grid instead of in a
 * scrolling rail, so all four are in view at once */
.quad { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s4); }
/* the rail sets a card's height so three of them line up while scrolling; on
 * the grid the row already does that, so the card takes its content */
.quad .card { min-height: 0; }

/* the person card: a square portrait at the card's radius, then the name, the
 * role in the eyebrow's mono, three lines and the link */
.people { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s5); }
.person { background: var(--surface); border-radius: var(--r); padding: var(--s5); display: grid; gap: var(--s4); align-content: start; box-shadow: 0 0 0 1px rgba(1,53,57,.10); }
.person img { width: 9rem; height: 9rem; border-radius: var(--r); object-fit: cover; display: block; }
.person .who { display: grid; gap: var(--s1); }
.person .role { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.person ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.person li { font-size: .95rem; line-height: 1.5; color: var(--ink); }

/* the contact page: the form in a white card, the aside beside it */
.two { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: var(--s6); align-items: start; }
.panelcard { background: var(--surface); border-radius: var(--r); padding: var(--s6); box-shadow: 0 0 0 1px rgba(1,53,57,.10); }
.panelcard > p { font-size: 1rem; color: var(--ink); max-width: 40rem; }
.aside { display: grid; gap: var(--s3); align-content: start; }

/* the form: labels in the eyebrow's mono, a hairline field on white at the
 * card's radius, and one filled button carrying the site's single action */
.contact { display: grid; gap: var(--s2); }
.contact label { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-top: var(--s4); }
.contact input, .contact textarea { font-family: var(--display); font-size: .95rem; line-height: 1.5; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: .55rem .7rem; width: 100%; }
.contact textarea { resize: vertical; }
.contact input::placeholder, .contact textarea::placeholder { color: var(--mute); }
.contact input:focus-visible, .contact textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.contact .btn { justify-self: start; margin-top: var(--s5); }
/* the honeypot is moved off-screen rather than display:none, which some bots
 * read as a field to skip */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* the two outcomes, hidden until the Worker's redirect targets one (the path
 * without JavaScript) or the page's script marks one .on */
.status { display: none; font-size: .95rem; margin-top: var(--s4); }
.status:target, .status.on { display: block; }
#sent { color: var(--accent); }
#error { color: var(--urgent); }

@media (max-width: 900px) {
  .quad { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .people { grid-template-columns: 1fr; }
  .two { grid-template-columns: 1fr; gap: var(--s5); }
  .panelcard { padding: var(--s5); }
}
@media (max-width: 560px) {
  .quad { grid-template-columns: 1fr; }
}

/* a hero with no figure takes the measure: one column, so .copy gets the
 * wrap's width instead of the left half of the two-column hero. The base h1
 * caps at 15ch, which at the hero's size is barely wider than that half
 * column, so on its own the single column would still leave the headline in
 * four short lines. 26ch is the cap here, which reads as two lines at 1440.
 * It is scoped above 900px, where the hero was two columns: below that the
 * hero is already one column and the base 15ch still sets the measure, so the
 * phone rendering is the same as before this modifier existed. The lede keeps
 * the base rule's 36rem throughout. */
.hero.solo { grid-template-columns: 1fr; }
@media (min-width: 901px) {
  .hero.solo h1 { max-width: 26ch; }
}