/* ==========================================================================
   WIP — Linear-style design system, shared by wip.html and its subpages
   ========================================================================== */
/* ==========================================================================
   Tokens — Linear's values (read off linear.app), with WIP blue as accent
   ========================================================================== */
:root {
  --bg:        #0c0d0f;
  --bg-2:      #131416;
  --bg-3:      #181a1c;
  --surface:   #ffffff05;
  --surface-2: #ffffff0a;

  --text:      #f7f8f8;
  --text-2:    #d0d6e0;
  --text-3:    #8a8f98;
  --text-4:    #62666d;

  --line:      #ffffff0d;   /* translucent hairline */
  --line-2:    #23252a;     /* solid hairline */
  --line-3:    #34343a;

  --accent:    #3d8bef;     /* WIP #1A6FBF, lifted to read on near-black */
  --logo:      #6fb4f5;     /* the mark: the accent blue, lifted to sky */
  --accent-2:  #1a6fbf;
  --ok:        #4cb782;

  --globe-dot:    #8a8f98;
  --globe-accent: #3d8bef;

  --font: "Inter Variable", "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "Berkeley Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --w-med: 510;
  --w-semi: 590;

  --ease-out:  cubic-bezier(.165, .84, .44, 1);   /* Linear ease-out-quart */
  --ease-io:   cubic-bezier(.455, .03, .515, .955);

  --r-6: 6px; --r-8: 8px; --r-12: 12px; --r-16: 16px;
  /* Boxes are square-cornered, as on linear.app/customers: cards, media and
     panels all sit at 0. Pills and form fields keep their own shapes. */
  --r-box: 0px;
  --wrap: 1200px;
  --pad: 32px;
  --nav-h: 64px;
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.6 var(--font);
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button, input { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-weight: var(--w-med); letter-spacing: -0.022em; line-height: 1.1; }
::selection { background: #3d8bef55; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--pad) * 2); margin-inline: auto; padding-inline: var(--pad); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.slot { color: var(--text-4); font-family: var(--mono); font-size: .86em; }
.dim { color: var(--text-3); }

.eyebrow { font-size: 15px; color: var(--text-3); margin-bottom: 16px; }
.eyebrow--ruled { padding-bottom: 16px; border-bottom: 1px solid var(--line-3); margin-bottom: 56px; }

.link { color: var(--text); text-decoration: underline; text-decoration-color: var(--text-4); text-underline-offset: 4px; transition: text-decoration-color .25s var(--ease-out); }
.link:hover { text-decoration-color: var(--text); }

/* Buttons: Linear's pill — near-white fill, dark ink — and a quiet ghost. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding-inline: 18px;
  border-radius: 9999px; border: 1px solid transparent;
  font-size: 14px; font-weight: var(--w-med); white-space: nowrap; cursor: pointer;
  transition: background-color .25s var(--ease-out), border-color .25s var(--ease-out), color .25s var(--ease-out);
}
.btn--pill { background: #e6e6e6; color: var(--bg); }
.btn--pill:hover { background: #fff; }
.btn--ghost { background: var(--surface-2); border-color: var(--line); color: var(--text); }
.btn--ghost:hover { background: #ffffff14; border-color: var(--line-3); }
.btn--sm { height: 32px; padding-inline: 14px; font-size: 13px; }

/* ==========================================================================
   Logo — the caret is the mark: the name is a build state, so it blinks
   ========================================================================== */
.logo {
  display: inline-flex; align-items: baseline; gap: 7px;
  font-family: var(--mono); font-size: 21px; font-weight: 500; letter-spacing: -0.02em;
  color: var(--logo);
}
.logo i {
  width: 9px; height: 18px; background: currentColor; display: inline-block;
  transform: translateY(2px);
  animation: blink 1.4s steps(2, start) infinite;
}
.logo--sm { font-size: 18px; }
.logo--sm i { width: 8px; height: 15px; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .logo i { animation: none; } }

/* ==========================================================================
   Nav
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 50;
  /* Near-solid rather than glass: the bar crosses white folds too, and at
     .72 the page behind turned it grey there. */
  background: rgba(12, 13, 15, .95);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.nav__in { height: var(--nav-h); display: flex; align-items: center; gap: 24px; }
.nav__links { display: flex; gap: 4px; margin-left: auto; }
.nav__links a {
  padding: 6px 12px; border-radius: var(--r-8);
  font-size: 14px; color: var(--text-3);
  transition: color .1s linear;
}
.nav__links a:hover { color: var(--text); }
.nav__act { display: flex; align-items: center; gap: 20px; }
.nav__rule { width: 1px; height: 20px; background: var(--line-3); }
.nav__act .btn { height: 34px; font-size: 13px; padding-inline: 16px; }

.nav__toggle { display: none; width: 40px; height: 40px; margin-left: auto; background: none; border: 0; cursor: pointer; border-radius: var(--r-8); }
.nav__bars { display: grid; gap: 6px; width: 18px; margin: auto; }
.nav__bars i { display: block; height: 1.5px; background: var(--text); transition: transform .25s var(--ease-out); }
.nav__toggle[aria-expanded="true"] .nav__bars i:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__bars i:last-child { transform: translateY(-3.75px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg);
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
}
.menu[hidden] { display: none; }
.menu__bar {
  position: sticky; top: 0; z-index: 1;
  height: var(--nav-h); flex-shrink: 0;
  display: flex; align-items: center; gap: 14px;
  padding-inline: var(--pad);
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.menu__bar .logo { margin-right: auto; }
.menu__close {
  width: 36px; height: 36px; display: grid; place-items: center;
  background: none; border: 0; border-radius: var(--r-8); color: var(--text); cursor: pointer;
}
.menu__close:hover { background: var(--surface-2); }
.menu__in { display: flex; flex-direction: column; padding: 28px calc(var(--pad) + 12px) 48px; }
.menu__group { margin: 28px 0 10px; font-size: 15px; color: var(--text-3); }
.menu__group:first-child { margin-top: 0; }
.menu__in a {
  padding: 6px 0; align-self: flex-start;
  font-size: 30px; line-height: 1.25; font-weight: var(--w-med); letter-spacing: -0.024em;
  color: var(--text); transition: color .1s linear;
}
.menu__in a:hover { color: var(--text-3); }
.menu__meta { margin-top: 44px; color: var(--text-4); font-family: var(--mono); font-size: 12px; }
.js .menu:not([hidden]) .menu__in > * { animation: menuin .5s var(--ease-out) both; }
.js .menu:not([hidden]) .menu__in > :nth-child(n+2) { animation-delay: .03s; }
.js .menu:not([hidden]) .menu__in > :nth-child(n+4) { animation-delay: .06s; }
.js .menu:not([hidden]) .menu__in > :nth-child(n+6) { animation-delay: .09s; }
@keyframes menuin { from { opacity: 0; transform: translateY(8px); } }

/* ==========================================================================
   Hero — the globe is the backdrop, bleeding off the right edge
   ========================================================================== */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(880px, calc(100svh - var(--nav-h)));
  display: flex; align-items: center;
  padding-block: 120px 112px;
  border-bottom: 1px solid var(--line);
}
.hero__bg {
  position: absolute; z-index: -1; pointer-events: none;
  top: 50%; right: -14%;
  width: min(1040px, 92vw); aspect-ratio: 1;
  transform: translateY(-46%);
  /* the left edge dissolves into the page so the copy never sits on dots */
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
}
.hero__bg::after {
  /* a low wash of accent behind India, the hub of the picture */
  content: ""; position: absolute; inset: 18%;
  background: radial-gradient(closest-side, #3d8bef1f, transparent 70%);
}
.hero__globe { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s var(--ease-out); }
.hero__globe[data-globe-ready] { opacity: .95; }
.hero::before {
  /* keeps the copy column legible over the sphere on narrower screens */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, var(--bg) 18%, #0c0d0fcc 46%, transparent 72%);
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: -1; pointer-events: none;
  background: linear-gradient(transparent, var(--bg));
}

.hero__in { position: relative; }
.hero__title {
  max-width: 14.5em;
  font-size: clamp(44px, 6.4vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.032em;
  background: linear-gradient(180deg, #fff 30%, #ffffffb3);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__row { margin-top: 28px; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.hero__sub { max-width: 34em; font-size: 17px; line-height: 1.6; color: var(--text-3); }
.hero__news {
  display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0;
  font-size: 13px; color: var(--text-3);
  transition: color .1s linear;
}
.hero__news:hover { color: var(--text); }
.hero__news-tag { color: var(--text); font-weight: var(--w-med); }
.hero__cta { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ==========================================================================
   Sections
   ========================================================================== */
.sec { padding-block: 144px; position: relative; }
.sec + .sec { border-top: 1px solid var(--line); }
.sec__head { max-width: 760px; margin-bottom: 64px; }
.sec__head h2 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -0.03em; }
.sec__sub { margin-top: 20px; max-width: 36em; font-size: 17px; color: var(--text-3); }
.sec__actions { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px; }

/* A fold that inverts to white. Only the tokens change: every component in
   here already draws itself from them, so the section flips whole. What
   follows are the few things tokens can't reach — a near-white button fill
   with nothing to sit on, fields tinted up with white, and the figures,
   whose gradient stops the script writes as white. */
.sec--light {
  --bg:        #ffffff;
  --bg-2:      #f5f6f7;
  --bg-3:      #eceef0;
  --surface:   #0c0d0f05;
  --surface-2: #0c0d0f0a;

  --text:      #0c0d0f;
  --text-2:    #2c3037;
  --text-3:    #5a5f68;
  --text-4:    #868b94;

  --line:      #0c0d0f14;
  --line-2:    #0c0d0f1f;
  --line-3:    #0c0d0f2e;

  --accent:    var(--accent-2);

  background: var(--bg);
  color: var(--text);
}
.sec--light .btn--pill { background: var(--text); color: #fff; }
.sec--light .btn--pill:hover { background: #2c3037; }
.sec--light .proof--white { box-shadow: inset 0 0 0 1px var(--line-2); }
.sec--light .field input { background: #fff; border-color: var(--line-2); }
.sec--light .field input:focus { background: #fff; border-color: var(--accent); }
.sec--light .bookform__err { color: #c0392b; }
.sec--light .iso-body { fill: #fff; }
.sec--light .iso-ink { stroke: #0c0d0f66; }
.sec--light .iso-guide { stroke: #0c0d0f40; }
.sec--light .iso-dots { fill: #0c0d0f80; }
.sec--light .fig__art stop, .sec--light .bank__art stop { stop-color: #0c0d0f; }
.sec--light .fig__art::before { background: radial-gradient(58% 54% at 50% 52%, #0c0d0f0a, transparent 70%); }

/* --- Problem: two-tone statement + figures -------------------------------- */
.statement {
  max-width: 1080px;
  font-size: clamp(30px, 4vw, 52px); line-height: 1.12; letter-spacing: -0.028em;
  color: var(--text-3);
}
.statement__lead { color: var(--text); }
/* One sentence carrying the fold: full weight, no grey tail. */
.statement--solo { color: var(--text); max-width: 16em; }

.figs { margin-top: 128px; display: grid; grid-template-columns: repeat(3, 1fr); }
.fig { padding: 0 40px 8px; display: flex; flex-direction: column; }
.fig:first-child { padding-left: 0; }
.fig:last-child { padding-right: 0; }
.fig + .fig { border-left: 1px solid var(--line-2); }
.fig__art { position: relative; height: 360px; margin: 0 0 48px; }
.fig__art::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 54% at 50% 52%, #ffffff12, transparent 70%);
}
.fig__art svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fig h3 { font-size: 16px; letter-spacing: -0.012em; font-weight: var(--w-med); }
.fig p { margin-top: 10px; color: var(--text-3); max-width: 30em; }

/* iso line-art, drawn by the script from rounded boxes. Strokes run
   through gradients, so edges brighten and fade across a figure the way
   Linear's plates do, rather than sitting at one flat weight. */
.fig__art path, .fig__art line { vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
/* The faces sit a shade above the page rather than below it, and the edges
   carry more weight, so each box reads as an object in front of the ground
   rather than a wireframe cut into it. The wash behind does the rest. */
.iso-body { fill: #121317; }
.iso-edge { fill: none; stroke-width: 1; }
.iso-ink { fill: none; stroke: #ffffff66; stroke-width: 1; }
.iso-guide { stroke: #ffffff40; stroke-width: 1; stroke-dasharray: 1 4; }
.iso-dots { fill: #ffffff80; }
.js .iso-float { animation: isofloat 6s var(--ease-io) infinite; }
.js .iso-drift { animation: isodrift 7s var(--ease-io) infinite; }
@keyframes isofloat { 50% { transform: translateY(-8px); } }
@keyframes isodrift { 50% { transform: translate(3px, -4px); } }

/* --- What we do: the question bank ---------------------------------------
   One panel instead of two cards. The rail on the left names the six things
   we do, grouped the way the two cards used to split them; the panel on the
   right carries whichever one is selected, so no item has to compete with
   the other five for room and nothing is ever cropped to fit. It is a
   tablist, and reads as one: arrow keys move between items, the arrows at
   the foot walk them in order.
   The rail keeps the page's own dark even inside a white fold — the black
   against the white is the point — so it re-declares the dark tokens and
   everything inside it draws from those. */
.bank { display: grid; grid-template-columns: 300px minmax(0, 1fr); border: 1px solid var(--line-2); }
.bank__set { position: relative; }
.bank__set + .bank__set { margin-top: 26px; }
.bank__rail {
  --bank-dwell: 5s;
  --text:   #f7f8f8;
  --text-2: #d0d6e0;
  --text-3: #8a8f98;
  --text-4: #62666d;
  --line:   #ffffff0d;
  background: #0c0d0f;
  padding: 26px 0;
  display: flex; flex-direction: column;
}
.bank__group {
  margin: 26px 26px 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-4);
}
.bank__group:first-child { margin-top: 0; }
/* The six are one sequence — discovery through to running it in
   production — so the rail is a flow: a line down through the marks, a
   number on each stage, and the stages behind the current one marked
   done. The line under the current stage fills while it is on screen, so
   the wait before the next one is visible rather than a surprise. */
.bank__item {
  position: relative;
  display: grid; grid-template-columns: 14px 26px 1fr; align-items: center; gap: 12px;
  width: 100%; padding: 13px 26px;
  border: 0; background: none;
  font-size: 15px; line-height: 1.35; text-align: left; color: var(--text-3); cursor: pointer;
  transition: color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.bank__item::before, .bank__item::after {
  content: ""; position: absolute; left: 32px; width: 1px; top: 0; bottom: 0;
}
.bank__item::before { background: #ffffff1f; }
.bank__item::after { background: var(--accent); transform: scaleY(0); transform-origin: top; }
.bank__item:first-of-type::before, .bank__item:first-of-type::after { top: 50%; }
.bank__item:last-of-type::before, .bank__item:last-of-type::after { bottom: 50%; }
.bank__item.is-done::after { transform: scaleY(1); }
.bank__item.is-running::after { transform: scaleY(1); transition: transform var(--bank-dwell, 5s) linear; }
.bank__item:hover { color: var(--text); background: #ffffff08; }
.bank__item[aria-selected="true"] { color: var(--text); background: #ffffff0f; }
.bank__no { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--text-4); transition: color .2s var(--ease-out); }
.bank__item[aria-selected="true"] .bank__no { color: var(--accent); }
.bank__item.is-done .bank__no { color: var(--text-3); }
.bank__mark {
  position: relative; z-index: 1;
  width: 11px; height: 11px; border-radius: 50%;
  border: 1.5px solid currentColor; background: #0c0d0f;
  transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.bank__item.is-done .bank__mark { border-color: var(--accent); background: var(--accent); }
.bank__item[aria-selected="true"] .bank__mark {
  border-color: var(--accent); background: var(--accent);
  box-shadow: inset 0 0 0 2.5px #0c0d0f, 0 0 0 4px #3d8bef29;
}

.bank__panel { display: flex; flex-direction: column; padding: 48px 48px 22px; background: var(--bg); }
.bank__pane {
  flex: 1; min-height: 300px;
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 40px; align-items: center;
}
.bank__pane[hidden] { display: none; }
.js .bank__pane { animation: bankin .4s var(--ease-out) both; }
@keyframes bankin { from { opacity: 0; transform: translateY(6px); } }
.bank__tag { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.bank__copy h3 { margin-top: 16px; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.026em; }
.bank__copy > p { margin-top: 16px; max-width: 26em; font-size: 16px; color: var(--text-3); }
.bank__copy .link { display: inline-block; margin-top: 24px; font-size: 15px; }
.bank__art { position: relative; height: 260px; }
.bank__art svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bank__foot {
  margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.bank__count { font-family: var(--mono); font-size: 12px; color: var(--text-4); }
.bank__count b { color: var(--text-2); font-weight: var(--w-med); }
.bank__nav { display: flex; gap: 8px; }
.bank__arrow {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line-2); background: none; color: var(--text-3); cursor: pointer;
  transition: color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.bank__arrow:hover { color: var(--text); border-color: var(--line-3); }

/* shared mock chrome */
.mock { font-size: 13px; color: var(--text-3); }

/* --- Stack: two-column hairline grid with live mocks ---------------------- */
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line-2); }
.cell { padding: 56px 48px 64px; border-bottom: 1px solid var(--line-2); display: flex; flex-direction: column; }
.cell:nth-child(odd) { padding-left: 0; border-right: 1px solid var(--line-2); }
.cell:nth-child(even) { padding-right: 0; }
.cell h3 { font-size: 17px; letter-spacing: -0.012em; }
.cell > p { margin-top: 8px; max-width: 30em; color: var(--text-3); }
/* Every cell ends with its picture, and every picture is the same height,
   so they line up across the grid however long the copy above them runs.
   They are centred rather than flush left: at two columns a left-aligned
   picture leaves a ragged gutter down the middle of the section. */
.cell__mock {
  margin-top: auto; padding-top: 36px; height: 204px; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.cell__mock > * { max-width: 100%; }

.panel, .mock--checks, .mock--rows, .mock--term, .mock--prompt {
  width: 100%; max-width: 380px; border: 1px solid var(--line); border-radius: var(--r-box);
  background: linear-gradient(180deg, #ffffff07, #ffffff02);
  box-shadow: 0 4px 24px #0003;
}

/* 1 · checks tick off in order, then reset */
.mock--checks { padding: 8px; }
.mock--checks li {
  display: flex; align-items: center; gap: 12px; height: 44px; padding-inline: 12px; color: var(--text-3);
  transition: color .4s var(--ease-out), background-color .4s var(--ease-out);
}
.mock--checks li + li { border-top: 1px solid var(--line); }
.mock--checks li::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--text-4);
  transition: background-color .4s var(--ease-out), border-color .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.mock--checks li.is-done { color: var(--text); }
.mock--checks li.is-done::before { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--bg-2); }
.mock--checks li::after { content: "Draft"; margin-left: auto; font-size: 12px; color: var(--text-4); }
.mock--checks li.is-done::after { content: "Agreed"; color: var(--text-3); }

/* 2 · a journey; the active step walks along it */
.mock--flow { display: flex; align-items: center; padding-top: 10px; }
.mock--flow span {
  padding: 10px 16px; border-radius: var(--r-box); white-space: nowrap;
  border: 1px solid var(--line); background: #ffffff05; color: var(--text-3);
  transition: color .5s var(--ease-out), border-color .5s var(--ease-out), background-color .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.mock--flow span.is-on { color: var(--text); border-color: #3d8bef66; background: #3d8bef14; box-shadow: 0 0 0 4px #3d8bef0d; }
.mock--flow i { width: 36px; height: 1px; flex-shrink: 0; background: linear-gradient(90deg, var(--line-3), var(--line-3)) no-repeat; position: relative; overflow: hidden; }
.mock--flow i::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: translateX(-101%); transition: transform .5s var(--ease-out); }
.mock--flow i.is-on::after { transform: none; }

/* 3 · platform rows, like Linear's "Required" form rows */
.mock--rows { padding: 6px 8px; }
.mock--rows li { display: flex; align-items: center; justify-content: space-between; height: 46px; padding-inline: 10px; color: var(--text-2); }
.mock--rows li + li { border-top: 1px solid var(--line); }
.mock--rows em { font-style: normal; font-size: 12px; color: var(--text-3); display: inline-flex; align-items: center; gap: 8px; }
.mock--rows em::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px #4cb78222; }
.js .mock--rows li:nth-child(2) em::before { animation: pulse 2.6s var(--ease-io) infinite .6s; }
.js .mock--rows li:nth-child(1) em::before { animation: pulse 2.6s var(--ease-io) infinite; }
.js .mock--rows li:nth-child(3) em::before { animation: pulse 2.6s var(--ease-io) infinite 1.2s; }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px #4cb78200; } }

/* 4 · notifications swap in with a blur, as in the Linear Asks recording */
.mock--notes { position: relative; width: 100%; max-width: 380px; height: 96px; margin-top: 10px; }
.mock--notes::before, .mock--notes::after {
  /* the cards stacked behind */
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -8px; height: 20px;
  border: 1px solid var(--line); border-top: 0; background: #101113;
}
.mock--notes::after { left: 20px; right: 20px; bottom: -15px; opacity: .6; }
.note {
  position: absolute; inset: 0; z-index: 1;
  display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-content: center;
  padding: 0 18px; border-radius: var(--r-box);
  border: 1px solid var(--line-2); background: #17181a; box-shadow: 0 8px 28px #0006;
  opacity: 0; filter: blur(6px); transform: translateY(10px) scale(.98);
  transition: opacity .6s var(--ease-out), filter .6s var(--ease-out), transform .6s var(--ease-out);
}
.note b { color: var(--text); font-weight: var(--w-med); font-size: 13px; }
.note span { color: var(--text-3); font-size: 13px; }
.note.is-on { opacity: 1; filter: none; transform: none; }
.note.is-out { opacity: 0; filter: blur(6px); transform: translateY(-10px) scale(.98); }
html:not(.js) .note:first-child { opacity: 1; filter: none; transform: none; }

/* 5 · a terminal */
.mock--term { padding: 18px 20px; font-family: var(--mono); font-size: 12.5px; line-height: 2; color: var(--text-2); }
.mock__dim { color: var(--text-4); }
.mock__ok { color: var(--ok); font-size: 10px; margin-right: 4px; }

/* 6 · a prompt being typed, like Linear's "/asks" */
.mock--prompt { padding: 0; overflow: hidden; }
.mock__cmd { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #ffffff04; color: var(--text-3); }
.mock__cmd b { color: var(--text); font-weight: var(--w-med); }
.mock__cmd::before { content: "AI"; font-size: 10px; font-weight: 600; letter-spacing: .02em; width: 20px; height: 20px; border-radius: 3px; display: grid; place-items: center; background: var(--accent-2); color: #fff; }
.mock__input { padding: 16px; min-height: 76px; color: var(--text-2); }

.caret { display: inline-block; width: 1.5px; height: 1.05em; margin-left: 2px; background: var(--text-2); vertical-align: -0.15em; animation: blink 1.1s steps(2, start) infinite; }

/* --- Social proof: Linear testimonial panels ------------------------------ */
.proofs { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.proof {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 520px; padding: 36px 36px 32px; border-radius: var(--r-box);
  display: flex; flex-direction: column; justify-content: space-between;
  color: #0b0d12;
  transition: transform .5s var(--ease-out);
}
.proof:hover { transform: translateY(-3px); }
.proof--white { background: #f4f5f6; }
.proof--white::after {
  /* the WIP caret, oversized and faint, where Linear puts a client mark */
  content: ""; position: absolute; z-index: -1; right: 12%; top: 14%; width: 11%; height: 66%;
  background: linear-gradient(180deg, #0000000f, #00000005);
}
.proof--yellow { background: #e4f222; }
.proof__line { max-width: 15em; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.14; letter-spacing: -0.028em; font-weight: var(--w-med); }
.proof--yellow .proof__line { max-width: 12em; }
.proof__by { display: flex; align-items: center; gap: 16px; }
/* The panels are already light, so the mark sits straight on them — no
   white tile behind it, as on the Work cards. */
.proof__by img { width: 40px; height: 40px; object-fit: contain; }
.proof__by span { display: grid; gap: 2px; padding-left: 16px; border-left: 1px solid currentColor; border-left-color: #0b0d1226; font-size: 14px; opacity: .72; }
.proof--yellow .proof__by span { border-left-color: #0b0d1226; }
.proof__by b { font-weight: var(--w-med); opacity: 1; }
.proofs__foot { margin-top: 36px; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-inline: 24px; color: var(--text-3); }
.proofs__foot b { color: var(--text); font-weight: var(--w-med); }
.proofs__foot .link { color: var(--text-3); text-decoration: none; white-space: nowrap; transition: color .1s linear; }
.proofs__foot .link:hover { color: var(--text); }

/* --- FAQ ------------------------------------------------------------------ */
.faq { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; }
.faq__intro h2 { font-size: clamp(34px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -0.03em; }
.faq__lede { margin-top: 24px; max-width: 24em; color: var(--text-3); }
.faq__ask { margin-top: 20px; color: var(--text-3); }
.qa details { border-bottom: 1px solid var(--line-2); }
.qa details:first-child summary { padding-top: 0; }
.qa summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 24px 0; font-size: 16px; font-weight: var(--w-med); letter-spacing: -0.012em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; flex-shrink: 0; width: 7px; height: 7px; margin-right: 6px;
  border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3);
  transform: rotate(-45deg);
  transition: transform .25s var(--ease-out);
}
.qa details[open] summary::after { transform: rotate(45deg) translate(-2px, -2px); }
.qa summary:hover::after { border-color: var(--text); }
.qa__a { padding: 0 48px 28px 0; color: var(--text-2); font-size: 16px; line-height: 1.65; }
.qa__a .link { color: var(--text); }

/* --- Contact -------------------------------------------------------------- */
.contact__in { display: grid; grid-template-columns: 1fr 1fr; }
.contact__copy { padding-right: 64px; }
.contact__copy h2 { font-size: clamp(38px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -0.032em; max-width: 9em; }
.checks { margin-top: 44px; display: grid; gap: 18px; }
.checks li { display: flex; align-items: center; gap: 14px; font-size: 18px; letter-spacing: -0.015em; color: var(--text-2); }
/* The bullet is the WIP mark: four rounded blocks, drawn in the current
   colour so it works on any ground. */
.checks li::before {
  content: ""; width: 13px; height: 13px; flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='1' y='1' width='9' height='11' rx='2.6'/%3E%3Crect x='12.5' y='1' width='6.5' height='6' rx='2'/%3E%3Crect x='1' y='14.5' width='9' height='4.5' rx='2'/%3E%3Crect x='12.5' y='9.5' width='6.5' height='9.5' rx='2.6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='1' y='1' width='9' height='11' rx='2.6'/%3E%3Crect x='12.5' y='1' width='6.5' height='6' rx='2'/%3E%3Crect x='1' y='14.5' width='9' height='4.5' rx='2'/%3E%3Crect x='12.5' y='9.5' width='6.5' height='9.5' rx='2.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.bookform { padding-left: 64px; border-left: 1px solid var(--line-2); }
.bookform h3 { font-size: 20px; letter-spacing: -0.015em; }
.bookform__sub { margin-top: 8px; color: var(--text-3); }
.field { display: grid; gap: 10px; margin-top: 26px; font-size: 15px; color: var(--text-2); }
.field input {
  height: 52px; padding-inline: 16px; border-radius: var(--r-8);
  border: 1px solid var(--line); background: #ffffff08;
  font-size: 15px; color: var(--text);
  transition: border-color .1s linear, background-color .1s linear;
}
.field input::placeholder { color: var(--text-4); }
.field input:hover { border-color: var(--line-3); }
.field input:focus { outline: none; border-color: var(--accent); background: #ffffff0a; }
.field input[aria-invalid="true"] { border-color: #eb5757; }
.bookform__err { margin-top: 16px; color: #ff8f8f; font-size: 14px; }
.bookform__act { margin-top: 32px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.bookform__act .btn, .bookform__done .btn { height: 52px; padding-inline: 28px; font-size: 15px; }
.bookform__note { font-size: 14px; color: var(--text-3); }
.bookform__done h3 { font-size: 32px; letter-spacing: -0.028em; }
.bookform__done .btn { margin-top: 28px; }
.bookform__done .bookform__note { margin-top: 14px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.foot { border-top: 1px solid var(--line); padding-block: 72px 48px; }
.foot__in { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.foot__col h4 { font-size: 14px; letter-spacing: -0.01em; color: var(--text); }
.foot__col ul { margin-top: 24px; display: grid; gap: 14px; }
.foot__col a { font-size: 14px; color: var(--text-3); transition: color .1s linear; }
.foot__col a:hover { color: var(--text); }
.foot__bar { margin-top: 88px; display: flex; gap: 28px; font-size: 13px; color: var(--text-4); }
.foot__bar span:first-child { margin-left: calc((100% - 32px * 4) / 5.4 * 1.4 + 32px); }

/* ==========================================================================
   Reveal — one quiet rise, Linear's ease-out
   ========================================================================== */
.js .rise { opacity: 0; transform: translateY(16px); filter: blur(4px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out); }
.js .rise.in { opacity: 1; transform: none; filter: none; }
.js .figs .rise:nth-child(2), .js .proofs .rise:nth-child(2) { transition-delay: .08s; }
.js .figs .rise:nth-child(3) { transition-delay: .16s; }
.js .hero__in > * { animation: heroin 1.1s var(--ease-out) both; }
.js .hero__in > :nth-child(2) { animation-delay: .06s; }
.js .hero__in > :nth-child(3) { animation-delay: .14s; }
.js .hero__in > :nth-child(4) { animation-delay: .22s; }
@keyframes heroin { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  /* The rail goes above the panel and the figure below the copy: two
     columns of either would leave both too narrow to read. */
  .bank { grid-template-columns: 1fr; }
  .bank__rail { flex-direction: column; padding: 22px 0; border-bottom: 1px solid var(--line-2); }
  .bank__panel { padding: 36px 28px 18px; }
  .bank__pane { grid-template-columns: 1fr; gap: 28px; min-height: 0; }
  .bank__art { height: 220px; order: -1; }
  .figs { grid-template-columns: 1fr; margin-top: 88px; }
  .fig, .fig:first-child, .fig:last-child { padding: 40px 0; }
  .fig + .fig { border-left: 0; border-top: 1px solid var(--line-2); }
  .fig__art { height: 240px; }
  .proofs { grid-template-columns: 1fr; }
  .proof { min-height: 380px; }
  .foot__in { grid-template-columns: repeat(4, 1fr); }
  .foot__in .logo { grid-column: 1 / -1; margin-bottom: 16px; }
  .foot__bar span:first-child { margin-left: 0; }
}
@media (max-width: 860px) {
  :root { --pad: 20px; }
  .nav__links, .nav__act { display: none; }
  .nav__toggle { display: block; }
  .hero { padding-block: 72px 88px; min-height: 0; display: block; }
  .hero__bg { right: auto; left: 50%; top: auto; bottom: -34%; width: 140vw; transform: translateX(-38%); }
  .hero::before { background: linear-gradient(180deg, var(--bg) 40%, #0c0d0f99 70%, transparent); }
  .hero__row { flex-direction: column; align-items: flex-start; gap: 20px; }
  .hero__cta { margin-top: 28px; }
  .sec { padding-block: 96px; }
  .sec__head { margin-bottom: 44px; }
  .grid2, .faq, .contact__in { grid-template-columns: 1fr; }
  .cell, .cell:nth-child(odd), .cell:nth-child(even) { padding: 40px 0 48px; border-right: 0; }
  .faq { gap: 40px; }
  .contact__copy { padding-right: 0; }
  .bookform { padding: 48px 0 0; margin-top: 48px; border-left: 0; border-top: 1px solid var(--line-2); }
  .proofs__foot { flex-direction: column; align-items: flex-start; padding-inline: 0; }
  .qa__a { padding-right: 0; }
}
@media (max-width: 520px) {
  .foot__in { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .mock--flow span { padding: 8px 10px; font-size: 12px; }
  .mock--flow i { width: 18px; }
  .proof { padding: 28px 24px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .caret { animation: none; }
}

/* ==========================================================================
   Subpages — Build, Scale and Work
   ========================================================================== */
/* Page hero: the homepage hero without the globe, so a subpage opens on its
   title rather than on a picture. */
.phero { padding-block: 112px 88px; border-bottom: 1px solid var(--line); }
.phero__crumb { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-3); }
.phero__crumb b { color: var(--text); font-weight: var(--w-med); }
.phero h1 { margin-top: 24px; max-width: 12em; font-size: clamp(40px, 5.6vw, 64px); line-height: 1.04; letter-spacing: -0.032em; }
.phero__sub { margin-top: 24px; max-width: 38em; font-size: 17px; color: var(--text-3); }
.phero__cta { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }

/* Image placeholders. Dashed, labelled, and clearly not artwork yet. */
.ph {
  display: grid; place-items: center; gap: 6px; text-align: center;
  min-height: 200px; padding: 24px;
  border: 1px dashed var(--line-3); border-radius: var(--r-box);
  background: repeating-linear-gradient(135deg, #ffffff05 0 10px, transparent 10px 20px), #0c0d0e;
  font-family: var(--mono); font-size: 12px; color: var(--text-4);
}
.ph--wide { min-height: 420px; }
.ph--tile { min-height: 0; aspect-ratio: 4 / 3; }
.ph--card { min-height: 0; aspect-ratio: 16 / 9; }

/* Numbered cells: starting points, phases, pillars, ways in. */
.steps { display: grid; gap: 24px; }
.steps--3 { grid-template-columns: repeat(3, 1fr); }
.steps--4 { grid-template-columns: repeat(4, 1fr); }
.step { display: flex; flex-direction: column; gap: 14px; }
.step__n { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-4); }
.step h3 { font-size: 20px; letter-spacing: -0.02em; }
.step p { color: var(--text-3); }
.step .link { margin-top: auto; padding-top: 8px; align-self: flex-start; }

/* Pillars: a wide card, image beside the copy, alternating sides. */
.pillars { display: grid; gap: 24px; }
.pillar {
  display: grid; grid-template-columns: 5fr 7fr; gap: 40px; align-items: center;
  padding: 32px; border: 1px solid var(--line); border-radius: var(--r-box);
  background: linear-gradient(180deg, #ffffff08, #ffffff03 60%);
}
.pillar:nth-child(even) .pillar__media { order: 2; }
.pillar__media .ph { min-height: 260px; }
.pillar h3 { margin-top: 10px; font-size: 24px; letter-spacing: -0.024em; }
.pillar__lede { margin-top: 10px; color: var(--text-2); }

/* A quiet cross-link band between pages. */
.band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
  padding: 32px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--surface);
}
.band h3 { font-size: 20px; letter-spacing: -0.02em; }
.band p { margin-top: 6px; color: var(--text-3); }
.band__links { display: flex; flex-wrap: wrap; gap: 12px; }

/* Work index — Linear's "Now" grid: filters, then hairline-split cards. */
.tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 36px; }
.tabs button {
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  font-size: 15px; color: var(--text-3); transition: color .1s linear;
}
.tabs button:hover { color: var(--text-2); }
.tabs button[aria-pressed="true"] { color: var(--text); }
.tabs__search { margin-left: auto; position: relative; }
.tabs__search input {
  width: 260px; height: 40px; padding: 0 16px 0 40px;
  border-radius: 9999px; border: 1px solid var(--line); background: var(--surface);
  font-size: 14px;
}
.tabs__search input::placeholder { color: var(--text-4); }
.tabs__search input:focus { outline: none; border-color: var(--line-3); }
.tabs__search svg { position: absolute; left: 15px; top: 12px; color: var(--text-4); }

.posts { margin-top: 44px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.post {
  display: flex; flex-direction: column;
  border: 1px solid var(--line-2); background: var(--surface);
  transition: border-color .25s var(--ease-out), background-color .25s var(--ease-out);
}
.post:hover { border-color: var(--line-3); background: var(--surface-2); }
.post__body { padding: 28px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.post .ph, .post__art { aspect-ratio: 16 / 9; border-bottom: 1px solid var(--line-2); }
.post__meta { font-size: 14px; color: var(--text-3); }
.post h3 { margin-top: 10px; font-size: 22px; letter-spacing: -0.024em; }
.post p { margin-top: 12px; color: var(--text-3); }
.post .link { margin-top: auto; padding-top: 18px; align-self: flex-start; }

/* Domains: the stack grid, without the mocks. */
.domains { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-2); }
.domain { padding: 36px 40px 44px; border-bottom: 1px solid var(--line-2); }
.domain:not(:nth-child(3n)) { border-right: 1px solid var(--line-2); }
.domain:nth-child(3n + 1) { padding-left: 0; }
.domain:nth-child(3n) { padding-right: 0; }
.domain h3 { font-size: 17px; letter-spacing: -0.012em; }
.domain p { margin-top: 8px; color: var(--text-3); }

@media (max-width: 1024px) {
  .steps--4 { grid-template-columns: repeat(2, 1fr); }
  .pillar { grid-template-columns: 1fr; gap: 28px; }
  .pillar:nth-child(even) .pillar__media { order: 0; }
  .domains { grid-template-columns: repeat(2, 1fr); }
  .domain:not(:nth-child(3n)) { border-right: 0; }
  .domain:nth-child(odd) { padding-left: 0; border-right: 1px solid var(--line-2); }
  .domain:nth-child(even) { padding-right: 0; }
}
@media (max-width: 860px) {
  .phero { padding-block: 64px 56px; }
  .steps--3, .steps--4, .domains, .posts { grid-template-columns: 1fr; }
  .posts { gap: 20px; }
  .domain, .domain:nth-child(odd), .domain:nth-child(even) { padding: 32px 0; border-right: 0; }
  .pillar { padding: 24px; }
  .tabs { gap: 16px; }
  .tabs__search { margin-left: 0; width: 100%; }
  .tabs__search input { width: 100%; }
  .ph--wide { min-height: 240px; }
}

/* Spec list: two columns of ticked rows, so the section reads as a list of
   inclusions rather than as a page of notes. */
.specs { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 64px; border-top: 1px solid var(--line-2); }
.specs li {
  display: grid; grid-template-columns: 20px 1fr; column-gap: 14px; align-items: baseline;
  padding: 20px 0; border-bottom: 1px solid var(--line-2);
}
.specs li::before {
  content: ""; width: 12px; height: 12px; align-self: center;
  background: var(--text-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='1' y='1' width='9' height='11' rx='2.6'/%3E%3Crect x='12.5' y='1' width='6.5' height='6' rx='2'/%3E%3Crect x='1' y='14.5' width='9' height='4.5' rx='2'/%3E%3Crect x='12.5' y='9.5' width='6.5' height='9.5' rx='2.6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='1' y='1' width='9' height='11' rx='2.6'/%3E%3Crect x='12.5' y='1' width='6.5' height='6' rx='2'/%3E%3Crect x='1' y='14.5' width='9' height='4.5' rx='2'/%3E%3Crect x='12.5' y='9.5' width='6.5' height='9.5' rx='2.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.specs b { font-weight: var(--w-med); font-size: 16px; letter-spacing: -0.012em; }
.specs span { grid-column: 2; margin-top: 4px; color: var(--text-3); }
@media (max-width: 860px) {
  .specs { grid-template-columns: 1fr; column-gap: 0; }
}

/* ==========================================================================
   Animated page header — the subpage answer to the homepage globe
   ========================================================================== */
.phero--art { position: relative; isolation: isolate; overflow: hidden; padding-block: 152px 128px; min-height: 640px; display: flex; align-items: center; }
.phero__field { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.6s var(--ease-out); }
.phero__field[data-field-ready] { opacity: 1; }
.phero--art::before {
  /* a wash under the copy, so the field never fights the words */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 18% 50%, var(--bg) 22%, color-mix(in srgb, var(--bg) 80%, transparent) 52%, transparent 78%),
    radial-gradient(60% 60% at 70% 42%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
}
.phero--art::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 180px; z-index: -1; pointer-events: none;
  background: linear-gradient(transparent, var(--bg));
}

/* Stage columns — Linear's numbered fold: a mono marker, a statement, a
   line underneath, split by full-height hairlines. */
.stages { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 72px; }
.stage { padding: 0 32px 8px; display: flex; flex-direction: column; min-height: 320px; }
.stage:first-child { padding-left: 0; }
.stage:last-child { padding-right: 0; }
.stage + .stage { border-left: 1px solid var(--line-2); }
.stage__n { font-family: var(--mono); font-size: 14px; color: var(--text-4); }
.stage__n b { color: var(--text-3); font-weight: 400; margin-left: 10px; }
.stage h3 { margin-top: auto; font-size: 26px; line-height: 1.18; letter-spacing: -0.026em; font-weight: var(--w-med); }
.stage p { margin-top: 14px; color: var(--text-3); }
@media (max-width: 1024px) {
  .stages { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
  .stage { min-height: 240px; }
  .stage:nth-child(odd) { padding-left: 0; }
  .stage:nth-child(even) { padding-right: 0; }
  .stage:nth-child(3) { border-left: 0; }
}
@media (max-width: 860px) {
  .phero--art { padding-block: 88px 72px; min-height: 0; display: block; }
  .stages { grid-template-columns: 1fr; row-gap: 40px; margin-top: 48px; }
  .stage, .stage:nth-child(odd), .stage:nth-child(even) { padding: 0; min-height: 0; }
  .stage + .stage { border-left: 0; border-top: 1px solid var(--line-2); padding-top: 32px; }
  .stage h3 { margin-top: 20px; font-size: 22px; }
}

.sec--tight { padding-block: 48px 0; }

/* Work cards: the homepage testimonial panels, reused as the card art. */
.post__art {
  position: relative; overflow: hidden; display: grid; place-items: center;
  aspect-ratio: 16 / 9;
}
.post__art--white { background: #f4f5f6; }
.post__art--yellow { background: #e4f222; }
.post__art img { width: 88px; height: 88px; object-fit: contain; }

/* A single line carrying a section: Scale's claim between the pillars. */
.claim {
  max-width: 20em; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.14;
  letter-spacing: -0.028em; color: var(--text-3);
}

/* ==========================================================================
   Feature panes — a mono list on the left, the matching panel on the right,
   after Linear's FIG. spreads. The list is the control: hover or click an
   item and the panel changes; left alone, it advances on its own.
   ========================================================================== */
.feature { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; }
.feature__fig { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--text-4); margin-bottom: 40px; }
.feature__list { display: grid; gap: 2px; }
.feature__item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 18px 20px; border: 1px solid transparent; background: none;
  transition: background-color .35s var(--ease-out), border-color .35s var(--ease-out);
}
.feature__item b {
  display: block; font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-3);
  transition: color .35s var(--ease-out);
}
.feature__item span {
  display: block; margin-top: 10px; max-width: 30em;
  font-family: var(--mono); font-size: 12px; line-height: 1.7; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-4);
}
.feature__item[aria-selected="true"] { background: var(--surface-2); border-color: var(--line); }
.feature__item[aria-selected="true"] b { color: var(--text); }

.feature__panels { position: relative; min-height: 460px; }
.win {
  position: absolute; inset: 0; overflow: hidden;
  border: 1px solid var(--line-2); background: var(--bg-2);
  box-shadow: 0 4px 24px #0003;
  opacity: 0; filter: blur(6px); transform: translateY(10px);
  transition: opacity .55s var(--ease-out), filter .55s var(--ease-out), transform .55s var(--ease-out);
}
.win.is-on { opacity: 1; filter: none; transform: none; }
html:not(.js) .win { position: static; opacity: 1; filter: none; transform: none; margin-bottom: 16px; }
.win__bar {
  height: 50px; display: flex; align-items: center; gap: 10px; padding-inline: 18px;
  border-bottom: 1px solid var(--line); background: #ffffff03;
  font-size: 13px; color: var(--text-3);
}
.win__bar b { color: var(--text-2); font-weight: var(--w-med); }
.win__bar span { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--text-4); }
.win__body { padding: 24px; display: grid; gap: 12px; align-content: start; }
.win__title { font-size: 19px; letter-spacing: -0.02em; }
.win__meta { font-family: var(--mono); font-size: 12px; color: var(--text-4); }
.win__note { font-size: 14px; line-height: 1.7; color: var(--text-2); }
.win__note mark { background: #3d8bef2e; color: var(--text); padding: 1px 3px; }

.row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 15px; border: 1px solid var(--line); background: #ffffff04;
  font-size: 13px; color: var(--text-2);
}
.row em { font-style: normal; margin-left: auto; color: var(--text-3); font-size: 12px; }
.row--ok em { color: var(--ok); }
.row__key { font-family: var(--mono); font-size: 12px; color: var(--text-4); }
.dot-ok { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px #4cb78222; flex: none; }
.dot-run { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--accent); flex: none; }
.pill { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; padding: 3px 9px; border: 1px solid var(--line-3); color: var(--text-3); }

/* a small column chart, for the observability panel */
.bars { display: flex; align-items: flex-end; gap: 6px; height: 120px; padding: 12px 15px; border: 1px solid var(--line); background: #ffffff04; }
.bars i { flex: 1; background: linear-gradient(180deg, var(--accent), #3d8bef26); opacity: .75; }

@media (max-width: 1024px) {
  .feature { grid-template-columns: 1fr; gap: 32px; }
  .feature__panels { min-height: 380px; }
  .feature__fig { margin-bottom: 24px; }
}
@media (max-width: 620px) {
  .feature__panels { min-height: 340px; }
  .win__body { padding: 16px; }
}

/* ==========================================================================
   Homepage stack mocks — the pictures inside "What we can build"
   ========================================================================== */
/* Product Design: a web frame and a phone, both still wireframes. The blocks
   breathe in sequence, the way a design fills in rather than loads. */
/* Product Design: the same screen twice — drawn, then built. Dashed
   outlines appear nowhere else on the page, so the pair reads as design
   work rather than as another pair of devices. */
.craft { width: 100%; max-width: 380px; display: flex; align-items: stretch; gap: 20px; }
.craft__wire, .craft__real {
  flex: 1; min-width: 0; height: 150px; padding: 14px;
  display: flex; flex-direction: column; gap: 9px;
  border-radius: var(--r-box);
}
.craft__wire { border: 1px dashed var(--line-3); }
.craft__real { border: 1px solid var(--line-2); background: linear-gradient(180deg, #ffffff0a, #ffffff03); }
.craft__w, .craft__r { display: block; border-radius: 3px; }
/* drawn: outlines only */
.craft__w { height: 9px; border: 1px dashed var(--line-3); }
.craft__w--bar { width: 54%; }
.craft__w--block { flex: 1; }
.craft__w--short { width: 62%; }
.craft__w--btn { width: 46%; height: 18px; border-radius: 999px; }
/* built: the same shapes, filled */
.craft__r { height: 9px; background: #ffffff14; }
.craft__r--bar { width: 54%; background: #ffffff24; }
.craft__r--block { flex: 1; background: #ffffff0a; border: 1px solid var(--line); }
.craft__r--short { width: 62%; background: #ffffff0f; }
.craft__r--btn { width: 46%; height: 18px; border-radius: 999px; background: var(--accent); }
.craft__arrow { align-self: center; width: 26px; height: 1px; background: var(--line-3); position: relative; flex: none; }
.craft__arrow::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 6px; height: 6px; border-top: 1px solid var(--line-3); border-right: 1px solid var(--line-3);
  transform: translateY(-50%) rotate(45deg);
}
.js .craft__real > * { animation: craftin 4.4s var(--ease-io) infinite; }
.js .craft__real > :nth-child(2) { animation-delay: .12s; }
.js .craft__real > :nth-child(3) { animation-delay: .24s; }
.js .craft__real > :nth-child(4) { animation-delay: .36s; }
.js .craft__real > :nth-child(5) { animation-delay: .48s; }
@keyframes craftin { 0%, 60%, 100% { opacity: 1; } 30% { opacity: .35; } }

/* Web & Mobile: two iOS devices, each running a real screen. Everything is
   drawn from divs at device scale, so it stays crisp on any display. */
/* The devices are drawn at device scale and then halved, so both fit whole
   instead of the phone filling the cell and the browser being cut in half.
   The translate re-centres the group inside its own box, which keeps its
   full width while the picture takes half of it. */
/* The cell is a window, not a frame: the phone runs off its left edge and
   the dashboard off its right, so each shows about half. Drawn at device
   scale and cropped, rather than shrunk to fit — two whole miniatures read
   as toys in a box, a crop reads as one product photographed close. */
.phones {
  /* Both edges are negative, so the phone is always cut by the left of the
     cell and the dashboard by the right, at any width. */
  position: absolute; top: 0; left: -56px; right: -120px; max-width: none;
  display: flex; align-items: flex-start; gap: 28px;
}

/* The web half: a browser window, cropped by the cell so the pair reads as
   one product on two surfaces. */
.webapp {
  flex: 1 1 auto; min-width: 420px; height: 302px; margin-top: 18px;
  border: 1px solid #2b2d33; border-radius: 10px; overflow: hidden;
  background: #ffffff; box-shadow: 0 18px 40px #00000073;
  display: flex; flex-direction: column;
}
.webapp__bar {
  height: 24px; flex: none; display: flex; align-items: center; gap: 10px; padding-inline: 9px;
  border-bottom: 1px solid #0c0d0f14; background: #f5f6f7;
}
.webapp__dots { display: flex; gap: 4px; }
.webapp__dots i { width: 6px; height: 6px; border-radius: 50%; background: #0c0d0f24; }
.webapp__url { flex: 1; max-width: 280px; height: 12px; border-radius: 3px; background: #ffffff; border: 1px solid #0c0d0f14; }
.webapp__in { flex: 1; display: flex; min-height: 0; }
.webapp__side { flex: 0 0 96px; padding: 12px 10px; display: flex; flex-direction: column; gap: 7px; border-right: 1px solid #0c0d0f14; background: #f5f6f7; }
.webapp__side i { height: 9px; border-radius: 3px; background: #0c0d0f14; }
.webapp__side i.is-on { background: #0c0d0f2e; }
.webapp__main { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.webapp__h { height: 10px; width: 78px; border-radius: 3px; background: #0c0d0f33; }
.webapp__filters { display: flex; gap: 5px; }
.webapp__filters i { height: 14px; width: 40px; border-radius: 999px; background: #0c0d0f0f; }
.webapp__filters i.is-on { background: var(--accent); opacity: .9; width: 30px; }
.webapp__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.webapp__grid span { display: block; }
.webapp__grid i { display: block; height: 52px; border-radius: 6px; background: #0c0d0f08; border: 1px solid #0c0d0f0f; }
.webapp__grid span:nth-child(2) i { background: #0c0d0f12; }
.webapp__grid span:nth-child(5) i { background: #3d8bef1f; border-color: #3d8bef3d; }
.webapp__grid b { display: block; height: 5px; width: 66%; margin-top: 7px; border-radius: 999px; background: #0c0d0f1a; }
.iphone {
  position: relative; flex: 0 0 148px; height: 302px; padding: 5px;
  border-radius: 26px; border: 1px solid #2b2d33;
  background: linear-gradient(160deg, #202227, #121316 40%, #0b0c0e);
  box-shadow: 0 18px 40px #00000073;
}
.iphone--back { transform: translateY(22px) scale(.94); transform-origin: top left; }
.iphone__screen {
  position: relative; height: 100%; overflow: hidden;
  border-radius: 21px; background: #ffffff;   /* the screens run white, as the light folds do */
  display: flex; flex-direction: column;
}
.iphone__island {
  position: absolute; z-index: 2; top: 11px; left: 50%; transform: translateX(-50%);
  width: 46px; height: 13px; border-radius: 999px; background: #000;
}
.iphone__home { width: 46%; height: 3px; border-radius: 999px; background: #0c0d0f2e; margin: 0 auto 6px; }

/* The screen, drawn as a skeleton: shapes in the right places, no invented
   numbers. Same greys as the browser beside it. */
.sk { padding-top: 30px; }
.sk i, .sk b { display: block; background: #0c0d0f14; border-radius: 3px; }
.sk__status { display: flex; align-items: center; justify-content: space-between; padding: 0 14px 6px; }
.sk__status i { width: 20px; height: 6px; }
.sk__sys { width: 26px !important; }
.sk__nav { display: flex; align-items: center; gap: 8px; padding: 0 11px 10px; }
.sk__back { width: 6px; height: 10px; border-radius: 2px; }
.sk__title { flex: 1; height: 9px; max-width: 64px; }
.sk__avatar { width: 15px; height: 15px; border-radius: 50% !important; margin-left: auto; }
.sk__body { flex: 1; padding: 0 11px; display: flex; flex-direction: column; gap: 8px; }
.sk__card { padding: 11px; border-radius: 12px; background: #0c0d0f08; border: 1px solid #0c0d0f0f; display: grid; gap: 8px; }
.sk__cap { width: 42%; height: 6px; }
.sk__big { width: 68%; height: 14px; }
.sk__meter { height: 4px; border-radius: 999px !important; background: linear-gradient(90deg, var(--accent-2) 62%, #0c0d0f14 62%) !important; }
.sk__row { display: flex; align-items: center; gap: 8px; height: 22px; }
.sk__row i { width: 6px; height: 6px; border-radius: 50% !important; }
.sk__row b { flex: 1; height: 7px; max-width: 74px; }
.sk__cta { margin-top: auto; margin-bottom: 8px; height: 26px; border-radius: 999px; background: var(--accent-2); }
.sk__tabs { display: flex; justify-content: space-around; padding: 7px 14px 5px; border-top: 1px solid #0c0d0f14; }
.sk__tabs i { width: 14px; height: 4px; border-radius: 999px !important; background: #0c0d0f1a; }
.sk__tabs i.is-on { background: var(--accent-2); }

/* One column is narrower than the pair's own 472px box, so the group scales
   down again to fit rather than being cropped. */
/* Narrow cells show less of the pair, not smaller devices. */
@media (max-width: 560px) {
  .phones { left: -44px; right: -90px; gap: 20px; }
}

/* Integrations: the service's own icon, not a coloured square. */
.note__ico {
  grid-row: span 2; width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--line-3); border-radius: 4px; color: var(--text-2);
  background: #ffffff08;
}
.note__ico svg { width: 18px; height: 18px; }
.note:nth-child(1) .note__ico { color: #6fb4f5; }
.note:nth-child(2) .note__ico { color: #5fd0a0; }
.note:nth-child(3) .note__ico { color: #b9a6ff; }

/* Data & AI: not another panel. Signals come in from the left, meet the
   model, and leave as actions on the right, with runs travelling the paths. */

.flow, .flow svg { width: 100%; height: 100%; }
.flow path { fill: none; vector-effect: non-scaling-stroke; }
.flow__line { stroke: #ffffff1a; stroke-width: 1; }
.flow__run {
  stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round;
  stroke-dasharray: 26 620; stroke-dashoffset: 646;
  opacity: .85;
}
.js .flow__run { animation: flowrun 4.6s linear infinite; animation-delay: calc(var(--i) * .42s); }
.js .flow__run--out { animation-name: flowrun-out; animation-delay: calc(var(--i) * .42s + 1.5s); }
@keyframes flowrun { to { stroke-dashoffset: 0; } }
@keyframes flowrun-out { from { stroke-dashoffset: 646; } to { stroke-dashoffset: 0; } }
.flow__halo { fill: var(--accent); opacity: .12; }
.js .flow__halo { animation: flowpulse 2.8s var(--ease-io) infinite; transform-origin: 252px 84px; }
@keyframes flowpulse { 50% { transform: scale(1.35); opacity: .05; } }
.flow__core { fill: var(--bg); stroke: var(--accent); stroke-width: 1.6; }
@media (prefers-reduced-motion: reduce) { .flow__run { opacity: .5; } }

/* Fig 2: the load arrives in three crates and the slab gives under them. */
.js .iso-load { animation: isoload 6s var(--ease-out) infinite; }
.js .iso-load--2 { animation-delay: .5s; }
.js .iso-load--3 { animation-delay: 1s; }
.js .iso-sag { animation: isosag 6s var(--ease-io) infinite; }
@keyframes isoload {
  0%, 4% { opacity: 0; transform: translateY(-26px); }
  16%, 86% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(-26px); }
}
@keyframes isosag {
  0%, 12% { transform: none; }
  40% { transform: translateY(3px); }
  62%, 86% { transform: translateY(6px); }
  96%, 100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .iso-load, .iso-sag { animation: none !important; }
}