/* Landing v5: the idea and a demo. Each section has its own treatment (hero with a live vignette, a step strip,
   the one dark block holding the product window, an accordion with pictures, a bento grid, a centred form).
   Every value is a token from brand4/tokens.css or site3/css/tokens-site.css; hairlines separate, nothing casts a shadow. */

body.page { font-size: var(--fs-1); line-height: var(--lh-body); }
.title { font-size: var(--fs-h2); line-height: var(--lh-tight); margin-bottom: var(--s-7); }
.avatar { display: inline-grid; place-items: center; width: var(--size-token); height: var(--size-token); border-radius: 50%; border: var(--size-hairline) solid var(--c-line-strong); background: var(--c-surface); color: var(--c-ink-2); flex: none; }
.avatar svg { width: var(--size-icon-m); height: var(--size-icon-m); }
.avatar--s { width: var(--size-chip); height: var(--size-chip); }
.avatar--s svg { width: var(--s-3); height: var(--s-3); }
.vgl { width: var(--size-icon-m); height: var(--size-icon-m); }
.vgl--l { width: var(--size-icon-l); height: var(--size-icon-l); }
code { color: inherit; }
[hidden] { display: none !important; }

/* Live status dot: a solid dot with a ring that grows and fades while work runs */
.pulse { position: relative; display: inline-block; width: var(--size-dot); height: var(--size-dot); border-radius: 50%; background: var(--c-ink-2); flex: none; }
.pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: ping calc(var(--d-fast) * 8) var(--ease-out) infinite; }
.pulse--still::after { animation: none; }
@keyframes ping { from { transform: scale(1); opacity: 0.7; } 70%, to { transform: scale(2.6); opacity: 0; } }
@keyframes settle { from { opacity: 0; transform: translateY(var(--s-1)) scale(0.96); } to { opacity: 1; transform: none; } }
[data-hide] { opacity: 0; transform: translateY(var(--s-1)); }

/* Navigation: the lockup and the one action */
.nav { position: sticky; top: 0; z-index: 20; background: var(--c-bg); border-bottom: var(--size-hairline) solid var(--c-line); }
.nav__row { display: flex; align-items: center; justify-content: space-between; min-height: var(--s-8); }
.brand { display: inline-flex; align-items: center; min-height: var(--size-control); }
.lockup { display: block; height: var(--s-5); width: auto; }
.lockup--small { height: var(--size-mark); }

/* Window frame shared by the hero vignette and the demo: hairline chrome, 12 px radius, no shadow */
.win { margin: 0; border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-frame); background: var(--c-bg); overflow: hidden; font-size: var(--fs-0); line-height: var(--lh-app); }
.win__bar { display: flex; align-items: center; gap: var(--s-3); min-height: var(--size-row); padding: 0 var(--s-4); background: var(--c-surface); border-bottom: var(--size-hairline) solid var(--c-line); }
.win__title { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; color: var(--c-ink-2); font-size: var(--fs-micro); }
.win__title .mark { height: var(--size-mark-small); }
.win__dim { color: var(--c-ink-4); }
.win__ctl { display: inline-flex; gap: var(--s-1); margin-left: auto; }
.win__ctl .btn svg { width: var(--size-icon-s); height: var(--size-icon-s); }
.dots { display: inline-flex; gap: var(--s-2); }
.dots i { width: var(--size-swatch); height: var(--size-swatch); border-radius: 50%; border: var(--size-hairline) solid var(--c-line-strong); }

/* 1. Hero: a centred headline whose last words resolve, then the product shot lit from behind on a fading dot grid.
   The hero's own light values derive from the sky primitive; ink-violet is sky turned a little toward violet and darkened. */
.hero {
  --hero-sky: color-mix(in oklch, var(--p-sky-400) 34%, transparent);
  --hero-violet: color-mix(in oklch, oklch(from var(--p-sky-600) calc(l - 0.08) c calc(h + 28)) 20%, transparent);
  --hero-dot: color-mix(in srgb, var(--c-ink) 13%, transparent);
  --hero-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --px: 0; --py: 0;
  position: relative; isolation: isolate; padding-block: var(--s-8); overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__bg::after { content: ""; position: absolute; inset: 0; background-image: var(--hero-grain); opacity: 0.05; mix-blend-mode: multiply; }
.hero__grid { position: absolute; inset: 0; background-image: radial-gradient(var(--hero-dot) 1px, transparent 1.2px); background-size: var(--s-5) var(--s-5); background-position: 50% 0; -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 46%, #000 20%, transparent 100%); mask-image: radial-gradient(ellipse 62% 58% at 50% 46%, #000 20%, transparent 100%); }
.hero__proof { margin-top: var(--s-3); font-size: var(--fs-micro); color: var(--c-ink-3); text-wrap: pretty; }
.hero__proof b { font-weight: var(--fw-semibold); color: var(--c-ink-2); }
.hero__backed { display: inline-flex; align-items: center; gap: var(--s-3); font-size: var(--fs-micro); color: var(--c-ink-3); }
.hero__backed img { display: block; height: var(--s-6); width: auto; }

/* Spotlight: a soft sky disc follows a mouse or pen across the hero and, brighter, across the window surface.
   It moves by transform only; JS turns it on, so touch and reduced motion never see it. */
.spot { position: absolute; left: 0; top: 0; width: calc(var(--s-9) * 7); aspect-ratio: 1; margin: calc(var(--s-9) * -3.5) 0 0 calc(var(--s-9) * -3.5); border-radius: 50%; pointer-events: none; opacity: 0; transform: translate3d(var(--sx, -999px), var(--sy, -999px), 0); transition: opacity var(--d-settle) var(--ease-out); will-change: transform; }
.spot--hero { background: radial-gradient(closest-side, color-mix(in oklch, var(--p-sky-400) 34%, transparent), transparent); }
.spot--win { z-index: 1; width: calc(var(--s-9) * 5); margin: calc(var(--s-9) * -2.5) 0 0 calc(var(--s-9) * -2.5); background: radial-gradient(closest-side, color-mix(in oklch, var(--p-sky-400) 30%, transparent), transparent); mix-blend-mode: multiply; }
.hero[data-spot] .spot { opacity: 1; }
.hero__copy { display: grid; gap: var(--s-5); justify-items: center; text-align: center; }
.hero__title { font-size: var(--fs-display); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: var(--track-hero); text-wrap: balance; }
.hero__sub { font-size: var(--fs-2); line-height: var(--lh-body); color: var(--c-ink-2); text-wrap: pretty; }
.hero__act { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); padding-top: var(--s-2); }
.hero__act svg { width: var(--size-icon-s); height: var(--size-icon-s); }

/* The swap: claims an agent makes appear in a muted tone, are struck through, and give way to "really done" */
.swap { display: inline-grid; white-space: nowrap; }
.swap > * { grid-area: 1 / 1; }
.swap__claim { position: relative; justify-self: start; color: var(--c-ink-4); font-weight: var(--fw-medium); opacity: 0; }
.swap__claim::after { content: ""; position: absolute; left: calc(var(--s-1) * -1); right: calc(var(--s-1) * -1); top: 55%; height: var(--size-stroke); border-radius: var(--r-pill); background: var(--c-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--d-settle) var(--ease-standard); }
.swap__claim[data-on] { opacity: 1; transition: opacity var(--d-fast) var(--ease-standard); }
.swap__claim[data-struck]::after { transform: scaleX(1); }
.swap__end { justify-self: center; padding-bottom: 0.08em; background: linear-gradient(100deg, var(--p-sky-500) 8%, oklch(from var(--p-sky-600) calc(l - 0.14) calc(c * 0.8) calc(h + 12)) 62%, var(--c-ink) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.swap[data-run] .swap__end { opacity: 0; transform: translateY(var(--shift-rise)); }
.swap[data-run] .swap__end { filter: blur(0.12em); }
.swap[data-run][data-resolved] .swap__end { opacity: 1; transform: none; filter: none; transition: opacity calc(var(--d-settle) * 2) var(--ease-out), transform calc(var(--d-settle) * 2.4) var(--ease-spring), filter calc(var(--d-settle) * 2) var(--ease-out); }
.swap:not([data-run]) .swap__claim, .swap[data-resolved] .swap__claim { display: none; }

.hero__shot { position: relative; margin-top: var(--s-7); }
/* Light behind the window: a wide sky glow above centre and a fainter ink-violet glow lower right */
.glow { position: absolute; inset: calc(var(--s-9) * -1.5) calc(var(--s-8) * -1) 10%; z-index: -1; pointer-events: none; background: radial-gradient(48% 46% at 42% 30%, var(--hero-sky), transparent 72%), radial-gradient(40% 44% at 74% 52%, var(--hero-violet), transparent 70%); filter: blur(var(--s-6)); }
/* The stage holds the window and draws the sheen: a short sky arc on a conic gradient that circles the border every 6 s */
@property --sheen { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.stage { position: relative; border-radius: var(--r-frame); overflow: hidden; }
.sheen { position: absolute; inset: 0; z-index: 2; padding: var(--size-hairline); border-radius: inherit; pointer-events: none; background: conic-gradient(from var(--sheen), transparent 0 74%, color-mix(in oklch, var(--p-sky-400) 40%, transparent) 78%, color-mix(in oklch, var(--p-sky-500) 70%, transparent) 80%, color-mix(in oklch, var(--p-sky-400) 30%, transparent) 82%, transparent 86%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: sheen 6s linear infinite; }
@keyframes sheen { to { --sheen: 360deg; } }
.hero[data-still] .sheen, .hero[data-still] .glyph, .hero[data-still] .pulse::after { animation-play-state: paused; }
.win--shot { position: relative; background: var(--c-bg); border-color: var(--c-line-strong); }
.stage { box-shadow: var(--elev-overlay), 0 var(--s-6) var(--s-8) calc(var(--s-5) * -1) color-mix(in oklch, var(--p-sky-600) 22%, transparent); }
.win--shot .win__bar { background: var(--c-surface); }
.win--shot .win__dim { color: var(--c-ink-3); font-size: var(--fs-micro); }
.spill { display: inline-flex; align-items: center; gap: var(--s-2); height: var(--size-chip); margin-left: auto; padding: 0 var(--s-2); border: var(--size-hairline) solid var(--c-line-strong); border-radius: var(--r-pill); background: var(--c-bg); font-size: var(--fs-chip); font-weight: var(--fw-medium); color: var(--c-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.spill > span { display: none; }
.spill[data-spill="run"] [data-spill-run], .spill[data-spill="done"] [data-spill-done] { display: inline; }
.spill[data-spill="run"] .pulse { background: var(--c-accent); }
.spill[data-spill="done"] .pulse { background: var(--c-verified); }
.spill b { font-weight: inherit; display: inline-block; }
.spill b[data-pop] { animation: pop calc(var(--d-settle) * 1.6) var(--ease-spring); color: var(--c-verified); }
@keyframes pop { from { transform: translateY(40%) scale(0.7); opacity: 0; } }
.spill[data-spill="done"] .pulse::after { animation: none; }
.shot { display: grid; gap: var(--size-hairline); background: var(--c-line); }
@media (min-width: 64rem) { .shot { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } }
.shot__main, .shot__side { display: grid; align-content: start; gap: var(--s-4); padding: var(--s-5) var(--s-5) var(--s-7); background: var(--c-bg); }
.shot__side { background: var(--c-surface); }
.sdiff { display: grid; gap: var(--s-2); }
.sdiff__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); font-size: var(--fs-micro); }
.sdiff__code { position: relative; overflow: hidden; padding-block: var(--s-2); border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-3); background: var(--c-bg); }
.sdiff__code .code__t { overflow: hidden; text-overflow: ellipsis; white-space: pre; }
.sdiff[data-scanning] .scanline { opacity: 0.7; }
.code__row[data-pending] { background: transparent; }
.code__row[data-pending] .code__tag { opacity: 0; }
.term--shot { height: auto; }
.term--shot .term__lines { gap: var(--s-1); }
.float { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--size-row); padding: 0 var(--s-3); border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-3); background: var(--c-bg); box-shadow: var(--elev-overlay); font-size: var(--fs-0); font-weight: var(--fw-medium); white-space: nowrap; }
.float--a { left: var(--s-4); bottom: calc(var(--s-5) * -1); }
.float--b { right: var(--s-4); bottom: var(--s-6); }
@media (min-width: 80rem) { .float--a { left: calc(var(--s-5) * -1); } .float--b { right: calc(var(--s-5) * -1); } }
.js .float[data-wait] { opacity: 0; transform: translateY(var(--shift-rise)) scale(0.96); }
.float { transition: opacity var(--d-settle) var(--ease-out), transform var(--d-settle) var(--ease-spring); }
@media (max-width: 63.99rem) { .float--a { left: var(--s-3); } .float--b { right: var(--s-3); bottom: calc(var(--s-5) * -1); } }
@media (max-width: 47.99rem) { .float--b { display: none; } }

/* Glyph chips: what agents claim to have touched, floating at three depths around the window. Each drifts a few
   pixels on its own and shifts with the pointer by its depth, deeper chips smaller, softer and slower. */
.glyph { --depth: 1; position: absolute; z-index: 3; display: grid; place-items: center; width: calc(var(--size-control) * 1.25); height: calc(var(--size-control) * 1.25); border: var(--size-hairline) solid var(--c-line-strong); border-radius: var(--r-frame); background: color-mix(in srgb, var(--c-bg) 86%, transparent); -webkit-backdrop-filter: blur(var(--s-2)); backdrop-filter: blur(var(--s-2)); box-shadow: var(--elev-overlay); color: var(--c-accent); pointer-events: none; translate: calc(var(--px) * var(--depth) * var(--s-3)) calc(var(--py) * var(--depth) * var(--s-3)); transition: translate var(--d-settle) var(--ease-out); animation: drift 7s ease-in-out infinite alternate; }
.glyph svg { width: var(--size-icon-m); height: var(--size-icon-m); }
.glyph--commit { --depth: 1.4; left: calc(var(--s-8) * -1.3); top: var(--s-7); }
.glyph--terminal { --depth: 0.6; left: calc(var(--s-8) * -0.9); top: calc(var(--s-9) * 2.6); scale: 0.82; opacity: 0.75; animation-duration: 9s; animation-delay: -3s; color: var(--c-ink-3); }
.glyph--shield { --depth: 1; left: 26%; top: calc(var(--s-6) * -1); animation-duration: 8s; animation-delay: -5s; }
.glyph--card { --depth: 1.2; right: calc(var(--s-8) * -1.2); top: calc(var(--s-6) * 1.2); animation-duration: 8.5s; animation-delay: -2s; }
.glyph--record { --depth: 0.6; right: calc(var(--s-8) * -0.85); top: calc(var(--s-9) * 2.2); scale: 0.82; opacity: 0.75; animation-duration: 10s; animation-delay: -6s; color: var(--c-ink-3); }
@keyframes drift { from { transform: translateY(calc(var(--s-1) * -1)) rotate(-2deg); } to { transform: translateY(var(--s-1)) rotate(2deg); } }
@media (max-width: 87.99rem) { .glyph--commit, .glyph--terminal { left: calc(var(--s-6) * -1); } .glyph--card, .glyph--record { right: calc(var(--s-6) * -1); } }
@media (max-width: 63.99rem) { .glyph--terminal, .glyph--record { display: none; } .glyph--commit { left: var(--s-3); top: calc(var(--s-6) * -1); } .glyph--card { right: var(--s-3); top: calc(var(--s-6) * -1); } }
@media (max-width: 39.99rem) { .glyph--shield { display: none; } .glyph { width: var(--size-control); height: var(--size-control); border-radius: var(--r-3); } .glyph--commit { left: var(--s-5); } .glyph--card { right: var(--s-5); } }

/* Reduced motion: the light stays, nothing moves. No sheen travel, drift, parallax, spotlight or blur-in. */
@media (prefers-reduced-motion: reduce) {
  .sheen { animation: none; background: none; }
  .glyph { animation: none; translate: none; transition: none; }
  .spot { display: none; }
  .swap[data-run] .swap__end { filter: none; }
}
@media (max-width: 39.99rem) { .hero { padding-top: var(--s-8); } .win--shot .win__dim, .spill { display: none; } .shot__main, .shot__side { padding: var(--s-4); } .sdiff__code .code__tag { display: none; } }

/* 2. How it works: one hairline strip of three cells */
.strip { display: grid; gap: var(--size-hairline); background: var(--c-line); border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-3); overflow: hidden; }
@media (min-width: 48rem) { .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.strip__cell { display: grid; background: var(--c-bg); }
.strip__art { display: grid; place-items: center; min-height: calc(var(--s-9) * 1.75); padding: var(--s-5); background: var(--c-surface); }
.strip__label { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); font-weight: var(--fw-medium); color: var(--c-ink); border-top: var(--size-hairline) solid var(--c-line); }
.strip__n { display: inline-grid; place-items: center; width: var(--size-chip); height: var(--size-chip); border-radius: var(--r-1); border: var(--size-hairline) solid var(--c-line-strong); font-family: var(--font-mono); font-size: var(--fs-chip); color: var(--c-ink-3); }
.mini-bubble { display: flex; align-items: center; gap: var(--s-2); }
.mini-bubble__text { padding: var(--s-2) var(--s-3); border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-3); background: var(--c-bg); font-size: var(--fs-0); font-weight: var(--fw-medium); }
.mini-term { display: grid; gap: var(--s-1); min-width: calc(var(--s-9) * 2); padding: var(--s-3); border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-3); background: var(--c-bg); font-family: var(--font-mono); font-size: var(--fs-chip); line-height: var(--lh-code); color: var(--c-ink); }
.mini-term b { color: var(--c-ink-4); font-weight: var(--fw-regular); }
.mini-term__dim { color: var(--c-ink-3); }
.mini-term__ok { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--c-verified-ink); }
.mini-term__ok .pulse { background: var(--c-verified); }
.mini-verdicts { display: grid; gap: var(--s-2); justify-items: start; }

/* 3. The one dark block: the demo window */
.dark { background: var(--c-bg); color: var(--c-ink); padding-block: var(--s-9); }
@media (max-width: 39.99rem) { .dark { padding-block: var(--s-8); } }
.dark__head { display: grid; gap: var(--s-3); justify-items: center; text-align: center; margin-bottom: var(--s-7); }
.dark__head .title { margin: 0; }
.dark__head p { color: var(--c-ink-3); font-size: var(--fs-2); }
.dark__more { display: flex; justify-content: center; margin-top: var(--s-5); font-size: var(--fs-0); }
.dark__more a { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--size-control); text-decoration: none; font-weight: var(--fw-medium); }
.dark__more svg { width: var(--size-icon-s); height: var(--size-icon-s); }

.win--demo { background: var(--c-surface); border-color: var(--c-line-strong); }
.win--demo .win__bar { background: var(--c-surface-2); border-color: var(--c-line); }
.wtabs { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; padding: 0 var(--s-2); border-bottom: var(--size-hairline) solid var(--c-line); background: var(--c-surface); }
.wtab { position: relative; display: inline-flex; align-items: center; min-height: var(--size-row); padding: 0 var(--s-4); border: 0; background: none; color: var(--c-ink-3); font: inherit; font-size: var(--fs-micro); font-weight: var(--fw-medium); cursor: pointer; white-space: nowrap; transition: color var(--d-fast) var(--ease-standard); }
.wtab:hover { color: var(--c-ink); }
.wtab[aria-selected="true"] { color: var(--c-ink); }
.wtab__bar { position: absolute; left: var(--s-4); right: var(--s-4); bottom: 0; height: var(--size-bar); overflow: hidden; }
.wtab__bar span { display: block; height: 100%; background: var(--c-ink); transform: scaleX(0); transform-origin: left; }
.wtab[aria-selected="true"] .wtab__bar span { transform: scaleX(1); }
@media (max-width: 39.99rem) { .wtabs { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; } .wtab { justify-content: center; padding: 0 var(--s-2); } .wtab__bar { left: var(--s-2); right: var(--s-2); } }

.win__body { display: grid; gap: var(--size-hairline); background: var(--c-line); }
@media (min-width: 64rem) { .win__body { grid-template-columns: minmax(0, 1fr) var(--size-col); } }
.win__main { background: var(--c-surface); padding: var(--s-5); min-height: calc(var(--size-diff) + var(--s-6)); }
@media (max-width: 39.99rem) { .win__main { padding: var(--s-4); min-height: var(--size-stage); } }
.wpanel { height: 100%; }

/* Claims rail */
.rail { display: grid; align-content: start; gap: var(--s-3); padding: var(--s-5) var(--s-4); background: var(--c-surface); }
.rail__head { font-size: var(--fs-micro); font-weight: var(--fw-medium); color: var(--c-ink-3); }
.rail__list { display: grid; gap: var(--s-2); }
@media (min-width: 40rem) and (max-width: 63.99rem) { .rail__list { grid-template-columns: 1fr 1fr; } }
.rclaim { display: grid; gap: var(--s-2); width: 100%; padding: var(--s-3); border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-3); background: var(--c-bg); color: var(--c-ink); font: inherit; font-size: var(--fs-0); text-align: left; cursor: pointer; transition: opacity var(--d-fast) var(--ease-standard), transform var(--d-fast) var(--ease-standard); }
.rclaim:hover { border-color: var(--c-line-strong); }
.rclaim[aria-current] { border-color: var(--c-ink); }
.rclaim[data-state="hidden"] { opacity: 0; transform: translateY(var(--s-1)); }
.rclaim__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: var(--size-chip); }
.rclaim__top code { font-size: var(--fs-chip); color: var(--c-ink-3); }
.rclaim__state { display: inline-flex; font-size: var(--fs-chip); color: var(--c-ink-3); }
.rclaim__state > * { display: none; align-items: center; gap: var(--s-2); }
.rclaim[data-state="waiting"] .rclaim__wait, .rclaim[data-state="running"] .rclaim__run { display: inline-flex; }
.rclaim[data-state="done"] .chip { display: inline-flex; animation: settle calc(var(--d-fast) * 1.6) var(--ease-out) both; }
.rclaim__text { font-weight: var(--fw-medium); }
.rclaim__go { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--fs-chip); color: var(--c-ink-3); }
.rclaim__go svg { width: var(--s-3); height: var(--s-3); transition: transform var(--d-fast) var(--ease-standard); }
.rclaim:hover .rclaim__go { color: var(--c-ink); }
.rclaim:hover .rclaim__go svg { transform: translateX(var(--s-1)); }

/* Pull request tab */
.pr { display: grid; gap: var(--s-4); align-content: start; }
.pr__head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.pr__title { font-size: var(--fs-3); letter-spacing: var(--track-heading); }
.pill { display: inline-flex; align-items: center; height: var(--size-chip); padding: 0 var(--s-2); border: var(--size-hairline) solid var(--c-line-strong); border-radius: var(--r-pill); font-size: var(--fs-chip); font-weight: var(--fw-medium); color: var(--c-ink-2); }
.pr__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); font-size: var(--fs-micro); color: var(--c-ink-3); }
.pr__meta > span { display: inline-flex; align-items: center; gap: var(--s-2); }
.pr__meta svg { width: var(--size-icon-s); height: var(--size-icon-s); }
.pr__delta { font-family: var(--font-mono); font-size: var(--fs-chip); color: var(--c-ink-2); }
.pr__comment { display: flex; gap: var(--s-3); align-items: start; }
.pr__bubble { flex: 1; min-width: 0; border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-3); background: var(--c-bg); overflow: hidden; }
.pr__by { padding: var(--s-2) var(--s-3); border-bottom: var(--size-hairline) solid var(--c-line); background: var(--c-surface-2); font-size: var(--fs-micro); }
.pr__say { padding: var(--s-3); font-size: var(--fs-1); color: var(--c-ink); min-height: calc(var(--s-7) + var(--s-1)); }
.pr__says { color: var(--c-ink-3); }
.typing::after { content: ""; display: inline-block; width: var(--size-hairline); height: var(--size-caret); margin-left: var(--size-hairline); vertical-align: text-bottom; background: var(--c-ink); animation: caret var(--d-caret) steps(1) infinite; }
.pr__found { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-micro); color: var(--c-ink-2); transition: opacity var(--d-fast) var(--ease-standard), transform var(--d-fast) var(--ease-standard); }
.pr__found .mark { height: var(--size-mark-small); }
.pr__claims { display: grid; gap: var(--s-2); }
.pr__claim { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); min-height: var(--size-row); padding: 0 var(--s-3); border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-1); background: var(--c-bg); transition: opacity calc(var(--d-fast) * 1.6) var(--ease-out), transform calc(var(--d-fast) * 1.6) var(--ease-out); }
.pr__n { font-size: var(--fs-chip); color: var(--c-ink-3); font-variant-numeric: tabular-nums; }
.pr__text { font-weight: var(--fw-medium); }
.pr__claim code { font-size: var(--fs-chip); color: var(--c-ink-3); }
@media (max-width: 39.99rem) { .pr__claim { grid-template-columns: auto minmax(0, 1fr); padding-block: var(--s-2); } .pr__claim code { grid-column: 2; } }

/* Rerun tab: a terminal */
.term { display: grid; grid-template-rows: auto 1fr; height: 100%; border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-3); background: var(--c-bg); overflow: hidden; }
.term__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: var(--size-row); padding: 0 var(--s-3); border-bottom: var(--size-hairline) solid var(--c-line); }
.cpill { display: inline-flex; align-items: center; gap: var(--s-2); height: var(--size-chip); padding: 0 var(--s-2); border: var(--size-hairline) solid var(--c-line-strong); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: var(--fs-chip); color: var(--c-ink-2); }
.cpill i { position: relative; width: var(--size-dot); height: var(--size-dot); border-radius: 50%; border: var(--size-hairline) solid var(--c-ink-3); }
.cpill[data-cstate="running"] i { background: var(--c-ink); border-color: var(--c-ink); }
.cpill[data-cstate="running"] i::after { content: ""; position: absolute; inset: calc(var(--size-hairline) * -1); border-radius: 50%; background: var(--c-ink); animation: ping calc(var(--d-fast) * 8) var(--ease-out) infinite; }
.cpill[data-cstate="exited"] i { background: var(--c-ink-3); }
.term__count { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--c-ink-3); }
.term__count b { color: var(--c-ink); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.term__lines { display: grid; align-content: start; gap: var(--s-2); padding: var(--s-4); font-family: var(--font-mono); font-size: var(--fs-chip); line-height: var(--lh-code); overflow: hidden; }
.term__line { display: grid; transition: opacity var(--d-fast) var(--ease-standard), transform var(--d-fast) var(--ease-standard); }
.term__cmd { color: var(--c-ink); word-break: break-all; }
.term__out { color: var(--c-ink-3); padding-left: var(--s-4); }
.term__dots { color: var(--c-verified); letter-spacing: var(--track-display); word-break: break-all; }
.term__ok { color: var(--c-verified-ink); font-weight: var(--fw-medium); }

/* Diff tab: the real diff with a scan line and live coverage marks */
.dview { display: grid; grid-template-rows: auto 1fr auto; gap: var(--s-3); height: 100%; }
.dview__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); font-size: var(--fs-micro); }
.dview__path { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--c-ink-2); }
.dview__path svg { width: var(--size-icon-s); height: var(--size-icon-s); }
.dview__for { color: var(--c-ink-3); }
.dview__count { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.dview__count b { font-family: var(--font-mono); font-weight: var(--fw-medium); color: var(--c-ink); }
.dview__count[data-tone="unran"] b { color: var(--c-not-tested-ink); }
.dview__scan { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--fs-chip); color: var(--c-ink-3); }
.dview__scan::before { content: ""; width: var(--size-dot); height: var(--size-dot); border-radius: 50%; background: var(--c-ink-2); animation: caret var(--d-caret) steps(1) infinite; }
.dview__code { position: relative; max-height: calc(var(--size-diff) - var(--s-7)); overflow: auto; padding-block: var(--s-2); border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-3); background: var(--c-bg); overscroll-behavior: contain; }
.scanline { position: absolute; left: 0; right: 0; top: var(--s-2); height: var(--size-hairline); background: var(--c-scan); opacity: 0; pointer-events: none; z-index: 1; }
.scanline::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--s-5); background: color-mix(in srgb, var(--c-ink) 5%, transparent); }
.dview__code[data-scanning] .scanline { opacity: 0.7; }
.code__row[data-hit] { animation: settle calc(var(--d-fast) * 1.6) var(--ease-out) both; }
.dview__legend { display: flex; flex-wrap: wrap; gap: var(--s-4); font-size: var(--fs-chip); color: var(--c-ink-3); }
.dview__legend span { display: inline-flex; align-items: center; gap: var(--s-2); }
.lg { width: var(--size-dot); height: var(--size-dot); border-radius: 50%; border: var(--size-hairline) solid var(--c-unmeasured); }
.lg--unran { border-color: var(--c-not-tested-mark); }
.lg--ran { background: var(--c-verified); border-color: var(--c-verified); }

@media (max-width: 39.99rem) {
  .dview__for, .dview__code .code__tag { display: none; }
  .dview__code .code { min-width: max-content; }
  .dview__code .code__t { white-space: pre; }
  .win__title .mono, .win__ctl .btn span { display: none; }
}

/* Verdict tab */
.vd { display: grid; gap: var(--s-4); align-content: start; }
.vd__list { display: grid; gap: var(--s-3); }
.vd__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-1) var(--s-3); padding: var(--s-4); border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-3); background: var(--c-bg); transition: opacity calc(var(--d-fast) * 1.6) var(--ease-out), transform calc(var(--d-fast) * 1.6) var(--ease-out); }
.vd__row[data-hide] { transform: translateY(var(--s-1)) scale(0.98); }
.vd__claim { font-size: var(--fs-1); font-weight: var(--fw-medium); }
.vd__why { grid-column: 2 / -1; font-size: var(--fs-chip); color: var(--c-ink-3); }
.ghc { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-3); background: var(--c-bg); }
.ghc__icon { display: inline-grid; place-items: center; width: var(--size-icon-l); height: var(--size-icon-l); flex: none; }
.ghc__icon svg { width: var(--size-icon-l); height: var(--size-icon-l); }
.ghc[data-gh="pending"] svg, .ghc[data-gh="done"] .pulse { display: none; }
.ghc[data-gh="done"] svg { animation: settle calc(var(--d-fast) * 1.6) var(--ease-out) both; }
.ghc__text { display: grid; flex: 1; min-width: 0; font-size: var(--fs-micro); }
.vd__note { font-size: var(--fs-chip); color: var(--c-ink-3); }
@media (max-width: 39.99rem) { .vd__row { grid-template-columns: auto minmax(0, 1fr); } .vd__row .chip { grid-column: 2; justify-self: start; } .ghc { flex-wrap: wrap; } }

/* 4. Where it runs: accordion list beside one stage of generated scenes, each with one live interface detail */
.acc { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 64rem) { .acc { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s-8); align-items: center; } }
.acc__list { border-bottom: var(--size-hairline) solid var(--c-line); }
.acc__row { border-top: var(--size-hairline) solid var(--c-line); }
.acc__row h3 { font-size: inherit; }
.acc__btn { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); width: 100%; min-height: var(--s-8); padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-3); font-weight: var(--fw-medium); letter-spacing: var(--track-heading); color: var(--c-ink-3); text-align: left; cursor: pointer; transition: color var(--d-fast) var(--ease-standard); }
.acc__btn:hover, .acc__row[data-open] .acc__btn { color: var(--c-ink); }
.acc__btn svg { width: var(--size-icon-l); height: var(--size-icon-l); flex: none; transition: transform var(--d-settle) var(--ease-spring); }
.acc__row[data-open] .acc__btn svg { transform: rotate(45deg); }
.acc__panel { display: grid; gap: var(--s-4); padding-bottom: var(--s-5); animation: settle var(--d-settle) var(--ease-out) both; }
.acc__panel p { color: var(--c-ink-2); font-size: var(--fs-1); text-wrap: pretty; }

/* A scene: the generated picture at 16:10 with interface elements placed in its own coordinates */
.scene { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-frame); background: var(--c-bg); }
.scene picture, .scene img { display: block; width: 100%; height: 100%; }
.scene img { object-fit: cover; }
.scene__ov { position: absolute; inset: 0; pointer-events: none; }
.ov { position: absolute; display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--size-control); padding: 0 var(--s-2) 0 var(--s-3); border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-3); background: var(--c-bg); box-shadow: var(--elev-overlay); font-size: var(--fs-micro); font-weight: var(--fw-medium); color: var(--c-ink); white-space: nowrap; }
.ov svg { width: var(--size-icon-s); height: var(--size-icon-s); flex: none; }
.ov__dim { color: var(--c-ink-3); font-weight: var(--fw-regular); }
.ov .chip { margin-left: var(--s-1); }
.ov--pr { left: 47%; top: 22%; }
.ov--gate { left: 50%; top: 14%; transform: translateX(-50%); padding-right: var(--s-3); }
.ov--live { left: 58%; top: 70%; }
.ov--beyond { left: 8%; top: 70%; }
.ov--leads { left: 58%; top: 34%; padding: 0 var(--s-1); }
.ov--hub { left: 55%; top: 30%; padding-right: var(--s-3); }
.ov--hash { left: 64%; top: 24%; gap: var(--s-2); padding-right: var(--s-3); font-family: var(--font-mono); font-size: var(--fs-chip); font-weight: var(--fw-regular); font-variant-numeric: tabular-nums; }
.ov--client-a { left: 16%; top: 66%; }
.ov--client-b { right: 16%; top: 81%; }
.pulse--ok { background: var(--c-verified); }

.acc__stage { display: none; position: relative; aspect-ratio: 16 / 10; }
.acc__stage .scene { position: absolute; inset: 0; opacity: 0; transform: translateY(var(--s-1)); transition: opacity var(--d-fast) var(--ease-standard), transform var(--d-settle) var(--ease-out); }
.acc__stage .scene[data-on] { opacity: 1; transform: none; }
.acc__stage .scene .ov { opacity: 0; transform: translateY(var(--s-1)); transition: opacity var(--d-fast) var(--ease-standard), transform var(--d-settle) var(--ease-spring); }
.acc__stage .scene .ov--gate { transform: translate(-50%, var(--s-1)); }
.acc__stage .scene[data-on] .ov { opacity: 1; transform: none; transition-delay: var(--d-fast); }
.acc__stage .scene[data-on] .ov--gate { transform: translateX(-50%); }
@media (min-width: 64rem) { .acc__stage { display: block; } .scene--panel { display: none; } }
@media (max-width: 39.99rem) { .ov { min-height: calc(var(--size-chip) + var(--s-1)); padding-left: var(--s-2); font-size: var(--fs-chip); } .ov .chip { margin-left: 0; } .ov--pr { left: 26%; top: 20%; } .ov--live { left: 38%; } .ov--beyond { left: 5%; } }
@media (max-width: 47.99rem) { .ov--hub .ov__dim { display: none; } .ov--hub { left: 50%; } .ov--hash { left: 44%; } }

/* 5. Built for: a bento of four tiles, each led by its scene, cover-cropped to one height, tilting under the pointer */
.bento { display: grid; gap: var(--s-4); }
@media (min-width: 48rem) { .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tile--wide { grid-column: span 2; } }
.tile { display: grid; grid-template-rows: auto auto 1fr; gap: var(--s-2); padding-bottom: var(--s-5); border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-frame); background: var(--c-bg); overflow: hidden; transform: perspective(calc(var(--size-page) * 0.8)) rotateX(calc(var(--y, 0) * var(--tilt) * -1)) rotateY(calc(var(--x, 0) * var(--tilt))) translateY(calc(var(--share, 0) * var(--s-1) * -1)); transition: transform var(--d-settle) var(--ease-spring), border-color var(--d-fast) var(--ease-standard); }
.tile[data-live] { transition: transform var(--d-press) linear, border-color var(--d-fast) var(--ease-standard); }
.tile:hover { border-color: var(--c-line-strong); }
.tile h3 { padding: var(--s-4) var(--s-5) 0; font-size: var(--fs-2); }
.tile p { padding-inline: var(--s-5); color: var(--c-ink-3); text-wrap: pretty; }
.tile__art { position: relative; height: var(--size-tile-art); overflow: hidden; border-bottom: var(--size-hairline) solid var(--c-line); }
.scene--cover { position: absolute; left: 50%; top: 46%; width: max(100% + var(--s-5), calc(var(--size-tile-art) * 1.6 + var(--s-5))); border-radius: 0; transform: translate(calc(-50% - var(--x, 0) * var(--shift-parallax)), calc(-46% - var(--y, 0) * var(--shift-parallax))); transition: transform var(--d-settle) var(--ease-spring); }
.tile[data-live] .scene--cover { transition: transform var(--d-press) linear; }

/* 6. Request a demo */
.close__inner { display: grid; justify-items: center; text-align: center; }
.close .title { margin-bottom: var(--s-3); }
.close__line { color: var(--c-ink-2); font-size: var(--fs-2); margin-bottom: var(--s-6); }
.req { display: grid; gap: var(--s-2) var(--s-4); width: min(100%, var(--size-cmdk)); text-align: left; }
@media (min-width: 40rem) { .req { grid-template-columns: 1fr 1fr; } }
.req .field__input { min-height: var(--size-control-l); }
.req__act { display: grid; padding-top: var(--s-2); }
@media (min-width: 40rem) { .req__act { grid-column: 1 / -1; } }
.req__done { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--size-control-l); padding: 0 var(--s-4); border: var(--size-hairline) solid var(--c-line); border-radius: var(--r-3); font-weight: var(--fw-medium); animation: settle calc(var(--d-fast) * 1.6) var(--ease-out) both; }
.req__done svg { width: var(--size-icon-m); height: var(--size-icon-m); }
.req__done:focus { outline: 0; }

/* 7. Footer: the lockup, then the company, privacy and the year on one baseline */
.foot { border-top: var(--size-hairline) solid var(--c-line); font-size: var(--fs-micro); line-height: var(--lh-app); color: var(--c-ink-3); }
.foot__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-6); min-height: var(--s-9); }
.foot__brand { display: inline-flex; align-items: center; min-height: var(--size-control); }
.foot__meta { display: flex; align-items: baseline; gap: var(--s-5); }
.foot__meta a { color: inherit; }
.foot__meta a:hover { color: var(--c-ink); }
@media (max-width: 39.99rem) {
  .foot__row { flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--s-3); padding-block: var(--s-6); }
  .foot__meta { flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
}

/* Liveliness: presses, underlines, focus, reveals. Each explains or rewards an action; none blocks reading. */
/* Buttons press and the focus ring draws in from the shared library (components.css) */
.link, .dark__more a { position: relative; text-decoration: none; }
.link::after, .dark__more a span::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--size-hairline) * -2); height: var(--size-hairline); background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--d-settle) var(--ease-out); }
.dark__more a span { position: relative; }
.link:hover::after, .link:focus-visible::after, .dark__more a:hover span::after { transform: scaleX(1); }
.js [data-reveal]:not([data-in]) > * { opacity: 0; }
.js [data-reveal][data-in] > * { animation: rise var(--d-settle) var(--ease-out) both; }
.js [data-reveal][data-in] > :nth-child(2) { animation-delay: var(--d-press); }
.js [data-reveal][data-in] > :nth-child(3) { animation-delay: calc(var(--d-press) * 2); }
.js [data-reveal][data-in] > :nth-child(n + 4) { animation-delay: calc(var(--d-press) * 3); }
@keyframes rise { from { opacity: 0; translate: 0 var(--shift-rise); } }
[data-held] *, [data-held] *::before, [data-held] *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] > * { opacity: 1; animation: none; }
  .js .float[data-wait] { opacity: 1; transform: none; }
  .tile, .scene--cover { transition: none; }
  .pulse::after, .cpill i::after, .typing::after, .dview__scan::before { animation: none; }
  .rclaim .chip, .acc__panel, .code__row[data-hit], .ghc svg, .req__done, [data-sum-done] { animation: none; }
}

/* Privacy: one readable column of short sections */
.doc { padding-block: var(--s-9); }
.doc__inner { display: grid; gap: var(--s-4); }
.doc__title { font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: var(--track-display); margin-bottom: var(--s-2); }
.doc__lede { font-size: var(--fs-2); color: var(--c-ink-2); text-wrap: pretty; }
.doc h2 { margin-top: var(--s-5); font-size: var(--fs-3); letter-spacing: var(--track-heading); }
.doc p { color: var(--c-ink-2); text-wrap: pretty; }
.doc .link { color: var(--c-ink); }
.doc__meta { margin-top: var(--s-5); font-size: var(--fs-micro); }

/* Not found: centred, with the way home and the one action */
.lost { padding-block: var(--s-9); }
.lost__inner { display: grid; gap: var(--s-4); justify-items: center; text-align: center; min-height: calc(var(--size-stage) * 0.8); align-content: center; }
.lost__code { font-size: var(--fs-micro); color: var(--c-ink-3); font-variant-numeric: tabular-nums; }
.lost__title { font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: var(--track-display); text-wrap: balance; }
.lost__line { color: var(--c-ink-2); font-size: var(--fs-2); }

/* Release merge: proof line and backer under the hero actions, a quiet report button, and a compact footer. */
.hero__proof { margin-top: var(--s-5); font-size: var(--fs-micro); color: var(--c-ink-3); text-wrap: pretty; }
.hero__proof b { font-weight: var(--fw-semibold); color: var(--c-ink-2); }
.hero__backed { display: inline-flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); font-size: var(--fs-micro); color: var(--c-ink-3); }
.hero__backed img { height: var(--s-6, 32px); width: auto; display: block; }
.dark__more .dark__btn { gap: var(--s-2); background: var(--c-bg); color: var(--c-ink); border: var(--size-hairline) solid transparent; }
.dark__more .dark__btn svg { width: 14px; height: 14px; }
.foot__row { gap: var(--s-5); }
.foot__brand { margin-right: auto; }
@media (max-width: 39.99rem) { .foot__row { flex-direction: column; align-items: flex-start; gap: var(--s-2); padding-block: var(--s-6); min-height: 0; } }

/* Proof row: monochrome marks with names, muted until hovered; they mark where the study's pull requests came from, not endorsement. */
.proof { margin-top: var(--s-7); display: grid; gap: var(--s-4); justify-items: center; }
.proof__label { font-size: var(--fs-micro); color: var(--c-ink-3); }
.proof__row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-5) var(--s-7); list-style: none; margin: 0; padding: 0; }
.proof__item { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--c-ink-3); font-size: var(--fs-2); font-weight: var(--fw-semibold); letter-spacing: -0.01em; transition: color 150ms ease; }
.proof__item svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
.proof__item:hover { color: var(--c-ink); }
@media (max-width: 39.99rem) { .proof__row { gap: var(--s-4) var(--s-5); } .proof__item { font-size: var(--fs-1); } .proof__item svg { width: 18px; height: 18px; } }

/* Calm hero: no grain, dot grid, sheen, spotlight or floating glyphs; one soft glow behind the product window and a solid accent on "really done". */
.hero__bg::after, .sheen, .spot, .glyph { display: none !important; }
.hero__accent { color: var(--c-accent, #2B5CF0); }

/* Hero ground: a fine, even dot grid washed with a soft sky gradient, both fading out before the edges and the text. */
.hero__grid { display: block !important;
  background-image: radial-gradient(circle, color-mix(in oklch, var(--c-ink, #0A0A0A) 14%, transparent) 1px, transparent 1.4px);
  background-size: 22px 22px; background-position: center top;
  -webkit-mask-image: radial-gradient(75% 65% at 50% 40%, #000 35%, transparent 82%); mask-image: radial-gradient(75% 65% at 50% 40%, #000 35%, transparent 82%); }

/* Request a demo: one compact panel, copy and live verdict chips on the left, the form on the right. */
.close__panel { display: grid; gap: var(--s-6); align-items: center; padding: var(--s-7); border: var(--size-hairline) solid var(--c-line); border-radius: 16px; background: var(--c-surface); }
@media (min-width: 64rem) { .close__panel { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-8); padding: var(--s-8); } }
@media (max-width: 39.99rem) { .close__panel { padding: var(--s-5); gap: var(--s-5); } }
.close__copy { display: grid; gap: var(--s-3); text-align: left; }
.close__panel .title, .close__panel .close__line { margin-bottom: 0; }
.close__chips { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.close__claim { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: var(--size-row); padding: 0 var(--s-3); border: var(--size-hairline) solid var(--c-line); border-radius: 8px; background: var(--c-bg); font-size: var(--fs-0); font-weight: var(--fw-medium); }
.close__panel .req { width: 100%; gap: var(--s-1) var(--s-3); }
.close__panel .req .field__input { min-height: var(--size-control); background: var(--c-bg); }
.close__panel .field__note:empty { display: none; }

/* No coloured light on the hero: the white ground and the neutral dot grid carry it. */
.glow { display: none !important; }

/* The subline never runs wider than the headline: the copy block sizes to the title and the subline fills that width. */
.hero__copy { width: fit-content; max-width: 100%; margin-inline: auto; }
.hero__sub { width: 0; min-width: 100%; text-wrap: balance; }

.proof__plain { margin-top: var(--s-6); font-size: var(--fs-micro); color: var(--c-ink-3); text-align: center; }
.proof__plain b { font-weight: var(--fw-semibold); color: var(--c-ink-2); }