/* The homepage at https://bolt-gauge.com: its own stylesheet (PLAN-0013
 * phase 2, the homepage design brief of 2026-09-29).
 *
 * The page is dark only. tokens.css, loaded first, brings the Space Grotesk
 * font face, the token names and the reduced-motion rule that stops every
 * animation and transition below; the :root block here pins the dark set of
 * those tokens so the page renders dark whatever the operating system says.
 * Every animation is written from its start state to the element's resting
 * state, so with animation switched off the page is simply at rest.
 *
 * No style attribute and no <style> block anywhere: the policy is
 * style-src 'self'.
 */

:root {
  --page: #090a0f;
  --surface: #11131a;
  --ink: #f7f8fc;
  --ink-2: #d2d6e0;
  --muted: #b5bac8;
  --border: rgba(247, 248, 252, .10);
  --identity-core: #7f8eff;
  --identity-needle: #b878f4;
  --s1: #8faaff;
  --s2: #5bf8f3;
  --s5: #b36afe;

  --void: #04050a;
  --core: #7f8eff;
  --violet: #b878f4;
  --hair: rgba(247, 248, 252, .08);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --panel-m: clamp(10px, 1.2vw, 18px);
  --panel-r: clamp(18px, 2.2vw, 28px);
  --gutter: clamp(18px, 4vw, 56px);
  --top-h: 78px;
  --stage-w: 1900px;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--void);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* The in-page links glide only for visitors who have not asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  min-height: 100svh;
  font-family: var(--display-font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background:
    radial-gradient(70% 50% at 72% -10%, rgba(96, 88, 255, .34), rgba(96, 88, 255, 0) 70%),
    radial-gradient(40% 40% at 100% 40%, rgba(184, 120, 244, .14), rgba(184, 120, 244, 0) 70%),
    var(--void);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; }
img, svg { display: block; }
b, strong { font-weight: 600; }
code { font-family: var(--mono); font-size: .92em; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--identity-core);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---- the panel: a dark plate inset on the page, lit from the top right ---- */

.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - 2 * var(--panel-m));
  margin: var(--panel-m);
  border-radius: var(--panel-r);
  /* clip, not hidden: a hidden overflow makes the panel a scroll container,
   * and the step plates' view timelines would then measure against the panel
   * (which never scrolls) instead of the page. clip cuts the art at the
   * rounded edge the same way and is not a scroll container. */
  overflow: clip;
  isolation: isolate;
  /* The two glows that light the first screen are placed in px from the
   * panel's top (where tidy round 2's page put them: 6% and 34% of that
   * page's height, at 1440x900 and, in the phone rule below, at 390x844), so
   * they stay on the first screen however long the page grows; the third is
   * the faint light at the panel's foot. */
  --glow-1: 174px;
  --glow-2: 984px;
  background:
    radial-gradient(1100px 760px at 66% var(--glow-1), rgba(97, 84, 255, .26), rgba(97, 84, 255, 0) 62%),
    radial-gradient(700px 520px at 88% var(--glow-2), rgba(184, 120, 244, .14), rgba(184, 120, 244, 0) 60%),
    radial-gradient(900px 500px at 8% 100%, rgba(97, 84, 255, .07), rgba(97, 84, 255, 0) 60%),
    linear-gradient(180deg, #0b0c17 0%, #08090f 55%, #06070c 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .8),
    0 0 0 2px rgba(120, 132, 255, .22),
    0 0 48px rgba(102, 96, 255, .34),
    0 0 140px rgba(92, 84, 255, .22),
    0 50px 140px -30px rgba(0, 0, 0, .9);
}

/* The rim: one bright hairline, brightest where the light lands, and a
 * soft inner glow just inside it. */
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(115deg, rgba(150, 162, 255, .55) 0%, rgba(184, 120, 244, .6) 28%, rgba(170, 180, 255, .9) 50%, rgba(184, 120, 244, .45) 74%, rgba(150, 162, 255, .5) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;
  box-shadow: inset 0 0 40px rgba(120, 132, 255, .12), inset 0 0 2px rgba(190, 200, 255, .35);
  pointer-events: none;
}

/* ---- the top bar ---- */

/* The top bar and the first screen share one container, at most 1900px wide
 * and centred in the panel, so on a wide monitor the brand stays over the
 * headline and the account links over the card instead of drifting to the
 * panel's corners. Below 1936px wide the container is the panel itself. */
.top {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 36px);
  width: 100%;
  max-width: var(--stage-w);
  height: var(--top-h);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  margin-right: clamp(4px, 1.5vw, 24px);
}

.brand img { width: 36px; height: 36px; }

.wordmark {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
}

.wordmark .wm-g { color: var(--violet); }

.menu, .account { display: flex; align-items: center; }
.menu { gap: clamp(14px, 2vw, 30px); }
.account { gap: 10px; margin-left: auto; }

.menu a {
  font-size: .9375rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: color .25s;
}

.menu a:hover { color: var(--ink); }

/* ---- buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 50px;
  padding: 0 1.4em;
  border-radius: 12px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), background-color .25s, border-color .25s;
}

.btn-primary {
  color: #0a0b14;
  background: linear-gradient(180deg, #9ca7ff 0%, #7684ff 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 -1px 0 rgba(0, 0, 0, .18),
    0 12px 32px -10px rgba(118, 132, 255, .8);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 0 rgba(0, 0, 0, .18),
    0 16px 40px -10px rgba(118, 132, 255, .95);
}

.btn-ghost {
  color: var(--ink);
  border: 1px solid rgba(247, 248, 252, .18);
  background: rgba(247, 248, 252, .025);
}

.btn-ghost:hover {
  border-color: rgba(247, 248, 252, .42);
  background: rgba(247, 248, 252, .06);
}

.btn-ghost .arrow { transition: transform .4s var(--ease-out); }
.btn-ghost:hover .arrow { transform: translateX(3px); }

/* The two account links share one height. Sign in is a dark pill, so its
 * words keep their contrast whatever the art does behind the top bar. */
.signin, .btn-top {
  min-height: 40px;
  padding: 0 1.05em;
  border-radius: 10px;
  font-size: .9375rem;
}

.signin {
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid rgba(247, 248, 252, .16);
  background: rgba(6, 7, 12, .82);
  transition: border-color .25s, background-color .25s;
}

.signin:hover {
  border-color: rgba(247, 248, 252, .4);
  background: rgba(10, 11, 18, .92);
}

.btn-top {
  color: #0a0b14;
  background: linear-gradient(180deg, #9ca7ff 0%, #7684ff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 24px -10px rgba(118, 132, 255, .8);
}

.btn-top:hover { transform: translateY(-1px); }

/* ---- the first screen ---- */

main { flex: 1; display: flex; flex-direction: column; }

/* The hero fills the first screen below the top bar. The floor only matters
 * on a very short window; on a laptop's real content area the card and the
 * headline shrink instead (the max-height rules below). On a screen taller
 * than the art needs, the hero stops growing instead (--hero-cap: the arc's
 * lower end, 24px of card over it, the card and the bottom padding), so the
 * card stays on the gauge and the page simply continues below. On a laptop
 * the screen is the smaller of the two, or within a few px of it.
 *
 * The art's size (--s, one unit of the mark's 256-unit box) and the tip's
 * pin (--tip) live here so the cap can read them; the card's rhythm (--v)
 * too, so the cap can allow for the card's height (96px + 26.4 * --v, the
 * measured card at each rhythm; 38px more in the narrow laptop column, where
 * the dial labels stack and the pace line wraps). */
.hero {
  --s: calc(min(53vw, max(min(72svh, 20.5vw + 60svh - 220px), 160svh - 950.4px), 1320px) / 256);
  --tip: clamp(min(9px + var(--s) * 6, 35px), 100vw / 8 - 140px, 35px);
  --pad-b: clamp(28px, 4.5vh, 52px);
  --v: 14px;
  --card-h: calc(96px + 26.4 * var(--v));
  --hero-cap: calc(var(--s) * 150.6 - var(--tip) - 24px + var(--pad-b) + var(--card-h));
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 38%);
  column-gap: clamp(24px, 3.5vw, 56px);
  align-items: end;
  width: 100%;
  max-width: var(--stage-w);
  min-height: max(min(calc(100svh - 2 * var(--panel-m) - var(--top-h)), var(--hero-cap)), 540px);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--pad-b);
}

.copy {
  position: relative;
  z-index: 3;
  max-width: 760px;
  padding-bottom: 6px;
}

/* Sized by width and by height: on a short laptop screen the headline gives
 * way so the button stays on the first screen; on a tall monitor it grows. */
h1 {
  margin: 0 0 clamp(16px, 2.6vh, 28px);
  font-size: clamp(2.75rem, min(1rem + 6vw, 11svh), 8rem);
  font-weight: 300;
  line-height: .96;
  letter-spacing: -.035em;
  color: var(--ink);
}

.lead {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(1.0625rem, .95rem + .5vw, 1.3125rem);
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink-2);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(22px, 3.4vh, 38px);
}

.trust {
  display: flex;
  flex-wrap: wrap;
  gap: .3em .75em;
  margin: clamp(16px, 2.6vh, 28px) 0 0;
  font-size: .875rem;
  color: var(--muted);
}

.trust span { white-space: nowrap; }

/* The separator belongs to the item that follows, so a wrap never leaves one dangling. */
.trust span + span::before {
  content: "\00B7";
  margin-right: .75em;
  opacity: .55;
}

/* The stage holds the card and, in the markup, the art. On a laptop or a
 * monitor the stage is static, so the art is placed from the hero itself
 * (its containing block); in the stacked layout below the stage positions it.
 *
 * The card's sizes are in em of the stage's font size, and its vertical
 * rhythm in --v, so one rule scales the whole card: the laptop and monitor
 * rules below set both from the viewport's height, continuously, where a
 * step at one height made the card jump over the hub. */
.stage {
  position: static;
  justify-self: end;
  width: min(100%, 40em);
  font-size: .875rem;
}

/* The art: the mark, sixty times its size, placed from the panel's top and
 * the container's width so its geometry holds at every laptop width.
 *
 * --s (set on the hero) is the size of one unit of the mark's 256-unit box:
 * 72% of the height up to 1080px tall, then growing 1.6px per px of height,
 * so on a tall monitor the arc's lower end still reaches the card; never
 * more than 53% of the width or 1480px. On a laptop the art is also held to
 * 20.5vw + 60svh - 220px (576px at 1440x900 is 615; 522 at 1280x800), which
 * binds from about 1100 to 1600 wide: there the art sat under the menu and
 * over the headline, and shrinking it a little clears both (the fold with
 * 160svh - 950.4px keeps a monitor at the height rule).
 *
 * The needle's tip (unit 208,58) is pinned --tip above the hero, in the top
 * bar's empty middle: 35px on a laptop or a monitor, and from 1320 wide down
 * 9px plus 6 units, which puts the first point 16px or more under the menu's
 * text where the art sits beneath it. The tip never comes nearer than 55px
 * to Sign in, whose left edge is the gutter and 195px of account links in
 * from the container's right edge (the tip stops 250px in); the hub's centre
 * (unit 144,128) sits at 64% of the container's width (64% of the hero plus
 * 0.28 panel margins equals 64vw less one margin, the old placement,
 * whenever the container is the panel), right of the copy and left of the
 * card, so the five lines end before the card begins. The arc is cut by the
 * panel's top edge. */
.art {
  position: absolute;
  z-index: 0;
  top: calc(0px - var(--tip) - var(--s) * 58);
  left: min(calc(64% + .28 * var(--panel-m) - var(--s) * 144), calc(100% - var(--gutter) - 250px - var(--s) * 208));
  width: calc(var(--s) * 256);
  aspect-ratio: 1;
  pointer-events: none;
  animation: art-in 1.6s var(--ease-out) both;
}

.gauge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* The live layer paints on its own, so a frame of motion never repaints the
 * render under it. */
.gauge-live { will-change: transform; }

/* The render: one sprite from site/art/blender/hero-gauge.py, 504 by 376 in
 * the mark's units, shown three times, each time clipped to one of its regions
 * and placed so that region lands at its place on the mark. The body (the
 * sprite's units 0..376 square) covers the mark's units -60 to 316, the glow's
 * room past the mark's box; the needle (the sprite's 376..484 by 0..108) sits
 * at the mark's 116..224 by 44..152 and turns about the hub's centre (the
 * mark's 144,128, which is 404,84 inside the sprite as the needle is placed);
 * the core (the sprite's 376..504 by 108..236) sits at the mark's 80..208 by
 * 64..192, above the needle, as the mark draws it. The clips are percentages
 * of the sprite's box, so they hold at every width and for every size in the
 * srcset. */
.render {
  position: absolute;
  display: block;
  width: calc(var(--s) * 504);
  height: auto;
  pointer-events: none;
}

.render-body {
  left: calc(var(--s) * -60);
  top: calc(var(--s) * -60);
  clip-path: inset(0 25.3968% 0 0);
}

.render-needle {
  left: calc(var(--s) * -260);
  top: calc(var(--s) * 44);
  clip-path: inset(0 3.9683% 71.2766% 74.6032%);
  transform-origin: calc(var(--s) * 404) calc(var(--s) * 84);
}

.render-core {
  left: calc(var(--s) * -296);
  top: calc(var(--s) * -44);
  clip-path: inset(28.7234% 0 37.234% 74.6032%);
}

/* ---- the product card ---- */

.card {
  position: relative;
  z-index: 1;
  padding: calc(var(--v) * 1.7) clamp(18px, 1.9vw, 28px) calc(var(--v) * 1.55);
  border-radius: 18px;
  border: 1px solid rgba(247, 248, 252, .10);
  background: linear-gradient(180deg, #12141f 0%, #0c0d15 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 0 0 1px rgba(0, 0, 0, .6),
    0 40px 90px -24px rgba(0, 0, 0, .92),
    0 0 80px -30px rgba(118, 132, 255, .35);
  color: var(--muted);
  animation: rise 1.2s var(--ease-out) both .45s;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--v);
  border-bottom: 1px solid var(--hair);
}

.machine {
  font-size: 1.214em;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}

.live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .93em;
  color: var(--ink-2);
}

.live .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 0 3px rgba(61, 220, 132, .16);
  animation: blink 2.6s ease-in-out infinite;
}

.dials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.14em;
  padding: calc(var(--v) * 1.15) 0 var(--v);
  border-bottom: 1px solid var(--hair);
}

.dial {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--v) * .65);
  text-align: center;
}

/* 58px at the tightest laptop rhythm (--v 10px), 70px at 14px, 79px at 17px. */
.ring { width: calc(var(--v) * 3 + 28px); height: calc(var(--v) * 3 + 28px); transform: rotate(-90deg); }
.ring .track { fill: none; stroke: rgba(247, 248, 252, .09); stroke-width: 6; }

.ring .fill {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 144.5;
  animation: ring 1.7s cubic-bezier(.2, .8, .2, 1) both .75s;
}

.ring-claude .fill { stroke: var(--core); stroke-dashoffset: 54.9; }
.ring-codex .fill { stroke: var(--violet); stroke-dashoffset: 89.6; }

.dial-label { font-size: .93em; line-height: 1.35; }
.dial-label b, .row b, .pace b { color: var(--ink); }

.row {
  margin: 0;
  padding: calc(var(--v) * .93) 0;
  border-bottom: 1px solid var(--hair);
}
.row .cost { white-space: nowrap; }

.chart { padding: calc(var(--v) * .93) 0 2px; }

.chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: calc(var(--v) * .7);
  font-size: .93em;
}

.legend { display: inline-flex; gap: .857em; font-size: .857em; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
.k-claude { background: var(--core); }
.k-codex { background: var(--violet); }
.k-grok { background: var(--s2); }

/* 56px at the tightest laptop rhythm, 90px at 14px, 115px at 17px. */
.bars { width: 100%; height: calc(var(--v) * 8.5 - 29px); }
.bars .c { fill: var(--core); }
.bars .k { fill: var(--violet); }
.bars .g { fill: var(--s2); }

.bars g {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: grow 1.2s var(--ease-out) both .9s;
}

.bars g:nth-child(2) { animation-delay: .97s; }
.bars g:nth-child(3) { animation-delay: 1.04s; }
.bars g:nth-child(4) { animation-delay: 1.11s; }
.bars g:nth-child(5) { animation-delay: 1.18s; }
.bars g:nth-child(6) { animation-delay: 1.25s; }
.bars g:nth-child(7) { animation-delay: 1.32s; }

.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-top: calc(var(--v) * .43);
  font-size: .786em;
  letter-spacing: .02em;
  text-align: center;
  color: var(--muted);
}

.days span:last-child { color: var(--ink-2); }

.pace {
  margin: calc(var(--v) * .7) 0 0;
  padding-top: calc(var(--v) * .93);
  border-top: 1px solid var(--hair);
  color: var(--ink-2);
}

/* ---- motion on arrival ---- */

.copy > * { animation: rise 1.1s var(--ease-out) both; }
.copy > :nth-child(2) { animation-delay: .1s; }
.copy > :nth-child(3) { animation-delay: .2s; }
.copy > :nth-child(4) { animation-delay: .3s; }

/* The needle rises from a low reading, overshoots its rest and settles. */
.render-needle { animation: settle 2.6s var(--ease-out) both .3s; }

.gauge .corehalo { animation: breathe 5s ease-in-out infinite 2s; }

/* A pulse is a comet of four dashes with their heads aligned under a blurred
 * glow; each layer has its own offsets (see site/art/hero-gauge.mjs: the start
 * offset is L + w/2 - 3 and the end offset L + w/2 - 89 for a dash of length L
 * and width w). Five lines, staggered, so at most two comets run at once. */
.gauge .pulse, .mini .pulse { opacity: 0; }
.pulses-g .pulse { animation: pulse-g 6s linear infinite; }
.pulses-a .pulse { animation: pulse-a 6s linear infinite; }
.pulses-b .pulse { animation: pulse-b 6s linear infinite; }
.pulses-c .pulse { animation: pulse-c 6s linear infinite; }
.pulses-d .pulse { animation: pulse-d 6s linear infinite; }
.gauge .p1, .mini .p1 { animation-delay: 1.2s; }
.gauge .p2, .mini .p2 { animation-delay: 2.1s; }
.gauge .p3, .mini .p3 { animation-delay: 3s; }
.gauge .p4, .mini .p4 { animation-delay: 3.9s; }
.gauge .p5, .mini .p5 { animation-delay: 4.8s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
}

@keyframes art-in {
  from { opacity: 0; scale: .965; }
}

@keyframes settle {
  0% { transform: rotate(-56deg); }
  62% { transform: rotate(4deg); }
  84% { transform: rotate(-1deg); }
  100% { transform: rotate(0deg); }
}

@keyframes ring {
  from { stroke-dashoffset: 144.5; }
}

@keyframes grow {
  from { transform: scaleY(0); }
}

@keyframes pulse-g {
  0% { stroke-dashoffset: 12.5; opacity: 0; }
  5% { opacity: 1; }
  32% { opacity: 1; }
  40%, 100% { stroke-dashoffset: -73.5; opacity: 0; }
}

@keyframes pulse-a {
  0% { stroke-dashoffset: 14.5; opacity: 0; }
  5% { opacity: 1; }
  32% { opacity: 1; }
  40%, 100% { stroke-dashoffset: -71.5; opacity: 0; }
}

@keyframes pulse-b {
  0% { stroke-dashoffset: 9.2; opacity: 0; }
  5% { opacity: 1; }
  32% { opacity: 1; }
  40%, 100% { stroke-dashoffset: -76.8; opacity: 0; }
}

@keyframes pulse-c {
  0% { stroke-dashoffset: 3.9; opacity: 0; }
  5% { opacity: 1; }
  32% { opacity: 1; }
  40%, 100% { stroke-dashoffset: -82.1; opacity: 0; }
}

@keyframes pulse-d {
  0% { stroke-dashoffset: .2; opacity: 0; }
  5% { opacity: 1; }
  32% { opacity: 1; }
  40%, 100% { stroke-dashoffset: -85.8; opacity: 0; }
}

@keyframes breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: .74; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

/* ---- below the first screen ----
 *
 * Every section is a band across the panel whose content sits in the same
 * centred container as the top bar and the hero (--stage-w), so on a wide
 * monitor nothing drifts to the panel's left edge. The type is the first
 * screen's: a large light heading, a short lead in the second ink, and the
 * card's dark plates for anything that holds a list. The art continues the
 * first screen's light: three Blender stills from the same model
 * (site/art/blender/stills.py) with the moving parts drawn over them, and the
 * three step pictures drawn as SVG in candidate A's way (site/art/stills.mjs). */

.band {
  position: relative;
  z-index: 1;
  padding-top: clamp(96px, 13vh, 168px);
}

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

.band-head { max-width: 1060px; }

.title {
  margin: 0 0 clamp(14px, 2vh, 22px);
  font-size: clamp(2.25rem, 1.3rem + 3.4vw, 4.5rem);
  font-weight: 300;
  line-height: .98;
  letter-spacing: -.03em;
  color: var(--ink);
}

.sub {
  margin: 0;
  max-width: 54ch;
  font-size: clamp(1.0625rem, .95rem + .5vw, 1.3125rem);
  line-height: 1.45;
  color: var(--ink-2);
}

.note { color: var(--muted); font-size: .9375rem; line-height: 1.5; }
.note a { color: var(--ink-2); }

/* No heading or lead below the first screen ends on a one-word line, and no
 * paragraph or list item there leaves a short last line. "Radial 47" stays
 * together in the footers by a class, not a no-break space, so the words
 * read with a plain space. */
.band :is(p, li) { text-wrap: pretty; }
.title, .plan h3, .sub, .close .sub { text-wrap: balance; }
.nowrap { white-space: nowrap; }

/* ---- what the agent never sends: the standing gauge ---- */

/* A pool of the panel's violet light behind the scene, so the render's floor
 * fades into lit ground rather than flat black. */
.ns-scene {
  position: relative;
  margin-top: clamp(4px, 1.5vh, 16px);
}

.ns-scene::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 8%;
  right: 8%;
  top: 6%;
  bottom: 4%;
  background: radial-gradient(50% 55% at 46% 62%, rgba(97, 84, 255, .16), rgba(97, 84, 255, 0) 70%);
  pointer-events: none;
}

.ns-frame { position: relative; }
.ns-render { display: block; width: 100%; height: auto; }

.ns-live {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* The stream: sixteen points of light spread along the line from the hub's
 * right edge to the frame's right edge (their static places), each drifting
 * the whole way and back to its start; --f is where along the line each one
 * sits (set per point in the generated rules below), so the keyframes and the
 * negative delay put it at its static place at time zero. At rest, with the
 * animation switched off, they are a still trail. */
.ns-live circle {
  animation: ns-drift 11s linear infinite;
  animation-delay: calc(var(--f) * -11s);
}

.ns-keys {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ns-label, .ns-tag, .ns-note {
  position: absolute;
  font-size: clamp(.8125rem, .72rem + .42vw, 1.0625rem);
  line-height: 1.2;
  white-space: nowrap;
}

.ns-label {
  transform: translateY(-50%);
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--ink);
}

.ns-tag {
  padding: .4em .9em;
  border: 1px solid rgba(247, 248, 252, .16);
  border-radius: 999px;
  background: rgba(6, 7, 12, .72);
  color: var(--ink-2);
  font-weight: 500;
}

.ns-pc { transform: translate(-50%, -50%); }
.ns-cloud { transform: translateY(-50%); }
.ns-note { transform: translateY(-50%); color: var(--muted); }

/* The block under it: the statement large on the left, the list ruled on the right. */
.never-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
  gap: clamp(20px, 4vw, 80px);
  align-items: start;
  margin-top: clamp(24px, 4vh, 48px);
}

.never-block p { margin: 0; }

.never-block strong {
  display: block;
  max-width: 16ch;
  font-size: clamp(1.625rem, 1.15rem + 1.8vw, 2.75rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -.025em;
  color: var(--ink);
}

.never-block ul { list-style: none; margin: 0; padding: 0; }

.never-block li {
  padding: 13px 0;
  border-top: 1px solid var(--hair);
  max-width: 64ch;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.never-block li:first-child { border-top: 0; padding-top: 2px; }
.never-block li:last-child { padding-bottom: 0; }
.never-note { margin: 22px 0 0; max-width: 70ch; }

/* ---- how it works: three plates, the mark assembling ---- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 26px);
  margin: clamp(28px, 5vh, 56px) 0 0;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(247, 248, 252, .09);
  background: linear-gradient(180deg, #12141f 0%, #0b0c15 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 0 0 1px rgba(0, 0, 0, .6),
    0 30px 70px -30px rgba(0, 0, 0, .85);
}

.step-art {
  aspect-ratio: 316 / 228;
  padding: 5% 7% 1%;
  border-bottom: 1px solid var(--hair);
  background: radial-gradient(70% 60% at 50% 50%, rgba(97, 84, 255, .14), rgba(97, 84, 255, 0) 72%);
}

.mini { display: block; width: 100%; height: 100%; overflow: visible; }

.step-text { padding: 20px clamp(18px, 1.8vw, 28px) 26px; }

.step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(150, 162, 255, .45);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ink);
  background: rgba(127, 142, 255, .12);
  box-shadow: 0 0 14px -2px rgba(127, 142, 255, .5);
}

.step-name {
  margin: 12px 0 8px;
  font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.2;
  color: var(--ink);
}

.step p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--ink-2); }

/* Step 1: one file arrives. The point of light above the hub drops into it
 * and comes back; at rest it waits above the hub on its line. */
.mini-1 .file-point { animation: file-drop 4.4s var(--ease-out) infinite 1s; }

/* Step 2: the core lights as the plate scrolls into view, and breathes. The
 * plate itself is the timeline (a view timeline named on the <li>: a group
 * inside the drawing has no box of its own to track), and the scroll-driven
 * animation needs an "auto" duration, set after the shorthand: a browser
 * without scroll timelines drops that declaration and the timeline, plays
 * the timed animation once on load, and rests lit. */
.step-2 { view-timeline: --step-2 block; }
.step-3 { view-timeline: --step-3 block; }

.mini-2 .core {
  animation: light-up 1.2s var(--ease-out) both;
  animation-duration: auto;
  animation-timeline: --step-2;
  animation-range: entry 30% entry 90%;
}
.mini-2 .corehalo, .mini-3 .corehalo { animation: breathe 5s ease-in-out infinite; }

/* Step 3: the needle rises and settles as the plate scrolls into view, and
 * the comets run on the lines as on the first screen. */
.mini-3 .needle {
  transform-box: view-box;
  transform-origin: 144px 128px;
  animation: settle 2.2s var(--ease-out) both;
  animation-duration: auto;
  animation-timeline: --step-3;
  animation-range: entry 20% cover 42%;
}

@keyframes file-drop {
  0%, 40% { transform: translateY(0); opacity: 1; }
  62% { transform: translateY(98px); opacity: 1; }
  68% { transform: translateY(98px); opacity: 0; }
  70% { transform: translateY(0); opacity: 0; }
  80%, 100% { transform: translateY(0); opacity: 1; }
}

@keyframes light-up {
  from { opacity: .18; }
}

/* ---- free, and what Cloud adds ---- */

.plans-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(20px, 3.5vw, 64px);
  align-items: center;
}

.cl-scene { position: relative; }

.cl-scene::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 4% 0;
  background: radial-gradient(48% 52% at 60% 50%, rgba(97, 84, 255, .18), rgba(97, 84, 255, 0) 70%);
  pointer-events: none;
}

.cl-frame { position: relative; }
.cl-render { display: block; width: 100%; height: auto; }

.cl-label {
  position: absolute;
  transform: translateY(-50%);
  font-size: clamp(.875rem, .8rem + .4vw, 1.0625rem);
  font-weight: 500;
  letter-spacing: -.005em;
  white-space: nowrap;
  color: var(--ink);
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 26px);
  margin-top: clamp(28px, 5vh, 60px);
}

.plan {
  padding: clamp(24px, 2.4vw, 40px);
  border-radius: 22px;
  border: 1px solid rgba(247, 248, 252, .09);
  background: linear-gradient(180deg, #12141f 0%, #0b0c15 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 0 0 1px rgba(0, 0, 0, .6),
    0 30px 70px -30px rgba(0, 0, 0, .85);
}

.plan-cloud {
  border-color: rgba(150, 162, 255, .32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 0 0 1px rgba(0, 0, 0, .6),
    0 30px 70px -30px rgba(0, 0, 0, .85),
    0 0 70px -24px rgba(118, 132, 255, .55);
}

.eyebrow {
  margin: 0 0 12px;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.plan-cloud .eyebrow { color: #aeb7ff; }

.plan h3 {
  margin: 0 0 14px;
  font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.375rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--ink);
}

.plan p { margin: 0; font-size: 1.0625rem; line-height: 1.5; color: var(--ink-2); }
.plan p + p { margin-top: 12px; }
.plan ul { list-style: none; margin: 16px 0 18px; padding: 0; }

/* The mark's point as the bullet: blue for the free gauge, violet for Cloud. */
.plan li {
  position: relative;
  padding: 11px 0 11px 26px;
  border-top: 1px solid var(--hair);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.plan li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 20px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--core);
  box-shadow: 0 0 10px rgba(127, 142, 255, .8);
}

.plan-cloud li::before { background: var(--violet); box-shadow: 0 0 10px rgba(184, 120, 244, .8); }
.plan-foot { color: var(--muted); font-size: .9375rem; }

/* ---- the close: one more way in ---- */

.close-wrap { text-align: center; }
.close .band-head { max-width: none; }
.close .title { margin-bottom: 12px; }
.close .sub { margin: 0 auto; }
.close .actions { justify-content: center; }

.close::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 20%;
  right: 20%;
  top: 30%;
  bottom: -20%;
  background: radial-gradient(50% 60% at 50% 60%, rgba(97, 84, 255, .2), rgba(97, 84, 255, 0) 70%);
  pointer-events: none;
}

/* ---- the footer ---- */

.foot {
  position: relative;
  z-index: 1;
  margin-top: clamp(72px, 10vh, 130px);
  border-top: 1px solid var(--hair);
}

.foot-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 32px;
  width: 100%;
  max-width: var(--stage-w);
  margin: 0 auto;
  padding: 26px var(--gutter) 34px;
  font-size: .875rem;
  color: var(--muted);
}

.foot .brand { margin-right: 0; }
.foot .brand img { width: 28px; height: 28px; }
.foot .wordmark { font-size: 1.0625rem; }
.foot nav { display: flex; flex-wrap: wrap; gap: 22px; margin-left: auto; }
.foot a { color: var(--ink-2); text-decoration: none; }
.foot nav a:hover { color: var(--ink); text-decoration: underline; }

/* ---- the 404 page: the same plate, one message in the middle ---- */

/* The page is exactly one screen: a flex body keeps the panel's top margin
 * from collapsing through it and adding its 10 to 18 px to the page's height. */
.page-404 { display: flex; flex-direction: column; }

.lost {
  flex: 1;
  display: grid;
  place-items: center;
  padding: clamp(40px, 8vh, 96px) var(--gutter);
  text-align: center;
}

.lost-wrap { max-width: 600px; }
.lost-mark { width: 88px; height: 88px; margin: 0 auto 26px; filter: drop-shadow(0 0 28px rgba(127, 142, 255, .55)); }
.lost h1 { margin: 0 0 14px; font-size: clamp(2.5rem, 1.8rem + 3vw, 4.75rem); }
.lost .lead { margin: 0 auto; }
.lost .actions { justify-content: center; }

/* ---- the sections on narrower screens ---- */

@media (max-width: 1099px) {
  .plans-top { grid-template-columns: minmax(0, 1fr); }
  .cl-scene { max-width: 640px; }
  /* The keys sit closer to their points, in smaller type, so the longest one
   * ("what the model answered") stays inside the column at 720 wide. */
  .ns-label, .ns-tag, .ns-note { font-size: .8125rem; }
}

@media (max-width: 899px) {
  .steps { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .plans-grid { grid-template-columns: minmax(0, 1fr); }
  .never-block { grid-template-columns: minmax(0, 1fr); }
  .never-block strong { max-width: 22ch; }
}

/* A phone: the standing gauge is shown larger than the screen and cut at both
 * sides, and the five keys become a row of chips under it. */
@media (max-width: 719px) {
  .panel { --glow-1: 244px; --glow-2: 1383px; }
  .band { padding-top: clamp(72px, 10vh, 96px); }
  .ns-scene { margin-inline: calc(-1 * var(--gutter)); overflow: hidden; }
  .ns-frame { width: 135%; margin-left: -18%; }
  .ns-note { display: none; }
  /* The frame's right 13% is off the screen; the tag comes in to the visible
   * edge (the selector outranks the generated position rule below). */
  .ns-frame .ns-cloud { right: 16%; }
  .ns-keys {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px var(--gutter) 0;
    pointer-events: auto;
  }
  .ns-label {
    position: static;
    transform: none;
    padding: .4em .85em;
    border: 1px solid rgba(247, 248, 252, .14);
    border-radius: 999px;
    background: rgba(6, 7, 12, .6);
    font-size: .8125rem;
    font-weight: 500;
  }
  .close-wrap { text-align: left; }
  .close .sub { margin: 0; }
  .close .actions { justify-content: flex-start; }
  .foot nav { margin-left: 0; width: 100%; }
}

/* The generated rules: where each label and tag sits over the never-sends
 * render (from site/art/blender/never-sends.json), where each point of the
 * stream starts, the stream's keyframes, and the Cloud labels' places in the
 * mark's units. */
/* stills begin (generated by site/art/stills.mjs) */
.ns-l1 { right: 75.85%; top: 25.55%; }
.ns-l2 { right: 75.64%; top: 37.20%; }
.ns-l3 { right: 75.43%; top: 48.63%; }
.ns-l4 { right: 75.22%; top: 59.85%; }
.ns-l5 { right: 75.02%; top: 70.87%; }
.ns-pc { left: 49.54%; top: 80.62%; }
.ns-cloud { right: 0.6%; top: 12.84%; }
.ns-note { right: 26.00%; top: 21.40%; }
.ns-live .d1 { --f: 0.05; }
.ns-live .d2 { --f: 0.11; }
.ns-live .d3 { --f: 0.17; }
.ns-live .d4 { --f: 0.24; }
.ns-live .d5 { --f: 0.3; }
.ns-live .d6 { --f: 0.37; }
.ns-live .d7 { --f: 0.43; }
.ns-live .d8 { --f: 0.5; }
.ns-live .d9 { --f: 0.57; }
.ns-live .d10 { --f: 0.63; }
.ns-live .d11 { --f: 0.7; }
.ns-live .d12 { --f: 0.76; }
.ns-live .d13 { --f: 0.82; }
.ns-live .d14 { --f: 0.88; }
.ns-live .d15 { --f: 0.93; }
.ns-live .d16 { --f: 0.97; }
@keyframes ns-drift {
  0% { transform: translate(calc(var(--f) * -878.5px), calc(var(--f) * 210.395px)); opacity: 0; }
  7% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translate(calc((1 - var(--f)) * 878.5px), calc((1 - var(--f)) * -210.395px)); opacity: 0; }
}
.cl-l1 { right: 69.06%; top: 26.67%; }
.cl-l2 { right: 69.06%; top: 50.00%; }
.cl-l3 { right: 69.06%; top: 73.33%; }
/* stills end */

/* ---- a laptop: the card's size follows the screen's height ---- */

/* From 760px tall (13px type, a 10px rhythm: the card is 360px tall and clears
 * the hub) to 940px (14px, 14px: the card is 470px tall), continuously, so no
 * height makes the card jump up over the hub; the ramp is gentler than the
 * art's growth, so the hub stays at least 25px clear of the card throughout. */
@media (min-width: 1100px) {
  .hero { --v: clamp(10px, 2.222svh - 6.89px, 14px); }
  .stage { font-size: clamp(13px, .5556svh + 8.778px, 14px); }
}

/* A laptop's real content area is short, so the top bar, the lead and the
 * buttons tighten too and the main button stays on the first screen. */
@media (min-width: 1100px) and (max-height: 760px) {
  :root { --top-h: 68px; }
  .hero { --pad-b: 24px; }
  .copy { padding-bottom: 2px; }
  .lead { font-size: 1.125rem; }
  .btn { min-height: 46px; }
  .card { padding-left: 20px; padding-right: 20px; }
}

/* A narrow laptop column: the dial labels take the phone's shape (the percent
 * on its own line, no separator) instead of wrapping with a dangling dot. */
@media (min-width: 1100px) and (max-width: 1279px) {
  .hero { --card-h: calc(134px + 26.4 * var(--v)); }
  .sep { display: none; }
  .pct { display: block; margin-top: 2px; font-size: 1.15em; }
}

/* ---- a wide monitor: the card and the type grow with the screen ---- */

@media (min-width: 1700px) and (min-height: 900px) {
  .copy { max-width: 900px; }
  .hero { --v: clamp(14px, 1.5svh + .5px, 17px); }
  .stage {
    width: min(100%, 41.3em);
    font-size: clamp(15px, .5svh + 10.5px, 16.5px);
  }
  .lead { max-width: 36ch; }
}

/* ---- narrower than a laptop: the screen stacks ---- */

@media (max-width: 1099px) {
  :root { --top-h: 68px; }

  .menu { display: none; }

  .hero {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    min-height: 0;
    padding-top: clamp(28px, 6vh, 56px);
    padding-bottom: 0;
  }

  h1 { font-size: clamp(2.75rem, 1rem + 6vw, 6rem); }
  .copy { max-width: 640px; }
  .lead { max-width: 36ch; }

  .stage {
    position: relative;
    z-index: 2;
    justify-self: stretch;
    width: auto;
    margin-top: clamp(48px, 8vh, 72px);
    padding-top: 272px;
  }

  /* The gauge rises behind the card, cut by the panel's right edge: the arc's
   * top clears the trust line, the core, the hub and four of the five points
   * sit above the card, and the needle's tip stays inside the panel. */
  .art {
    --s: calc(min(90vw, 560px) / 256);
    top: 0;
    left: auto;
    right: -12%;
    translate: 0 -16%;
  }

  .card { max-width: 560px; }
}

@media (max-width: 599px) {
  .actions .btn { min-height: 48px; flex: 1 1 100%; }
  /* The trust line's first item takes its own line, and the second opens the
   * next without a separator, so no line begins with a dot. */
  .trust span:first-child { flex: 1 1 100%; }
  .trust span:nth-child(2)::before { content: none; }
  .brand { margin-right: 0; }
  .brand img { width: 32px; height: 32px; }
  .wordmark { font-size: 1.125rem; }
  .account { gap: 8px; }
  .signin, .btn-top { min-height: 36px; padding: 0 .85em; font-size: .875rem; border-radius: 9px; }
  .stage { padding-top: 160px; margin-top: 44px; }
  .art { --s: calc(min(88vw, 360px) / 256); right: -12%; translate: 0 -20%; }
  .dials { gap: 12px; }
  .ring { width: 66px; height: 66px; }
  .dial-label { font-size: .75rem; }
  .sep { display: none; }
  .pct { display: block; margin-top: 2px; font-size: 1rem; }
  .row { line-height: 1.45; }
  /* Grok's line keeps its separator on a phone wide enough to hold it whole. */
  .row .sep { display: inline; }
  .legend { gap: 9px; }
  .days { font-size: .625rem; }
  .card { padding: 16px 16px 14px; border-radius: 16px; }
}

@media (max-width: 379px) {
  .chart-head { flex-wrap: wrap; }
}

/* Below 400 wide Grok's line cannot hold its cost, so the cost takes its own
 * line, as the dials' percentages do, instead of leaving a word behind. */
@media (max-width: 399px) {
  .row .sep { display: none; }
  .row .cost { display: block; }
}

/* A narrow phone (360 wide is most Galaxy phones): the top bar's row tightens
 * so "Sign in" keeps one line beside Download; a very narrow one keeps the
 * mark and drops the wordmark's text (the link keeps its label). */
@media (max-width: 369px) {
  .top { gap: 10px; }
  /* The footer's three links keep one line at 360 wide. */
  .foot nav { gap: 14px; }
  .wordmark { font-size: 1rem; }
  .account { gap: 6px; }
  .signin, .btn-top { padding: 0 .7em; }
}

@media (max-width: 339px) {
  .wordmark { display: none; }
}