/* Switchyard site.
   One theme, locked dark. One accent (rail teal). One radius scale (10px,
   pill for interactive). Palette is carried over from the app itself.

   Motion contract: every moving thing reads a custom property that one
   requestAnimationFrame loop in app.js writes. Nothing animates off a scroll
   event directly, and everything collapses under prefers-reduced-motion. */

:root {
  --ground: #0b100f;
  --ground-2: #080c0b;
  --surface: #121a18;
  --surface-2: #18211f;
  --surface-3: #1e2a27;
  --line: #222d2a;
  --line-strong: #2f3d39;

  --ink: #e8efec;
  --ink-2: #aebbb6;
  --muted: #7c8b86;

  --accent: #3fc2a6;
  --accent-deep: #1f7a66;
  --accent-soft: #10302a;

  --rail-1: #3fc2a6;
  --rail-2: #e08a55;
  --rail-3: #9a92e0;
  --rail-4: #5d9de0;

  --ok: #5cb868;
  --warn: #d6a939;
  --bad: #e2695c;

  --r: 10px;
  --r-lg: 16px;
  --maxw: 1240px;
  --ease: cubic-bezier(.16, 1, .3, 1);

  --sans: 'Geist', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Written by the scroll loop. Declared here so first paint is sane. */
  --page: 0;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
code { font-family: var(--mono); font-size: 0.92em; }

h1, h2, h3, h4 {
  margin: 0; line-height: 1.1; text-wrap: balance;
  letter-spacing: -0.02em; font-weight: 600;
}
p { margin: 0; max-width: 62ch; }
a { color: inherit; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: #05100d; padding: 10px 16px; z-index: 100;
}
.skip:focus { left: 8px; top: 8px; border-radius: var(--r); }

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

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
@media (max-width: 760px) { .wrap { padding: 0 16px; } }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; white-space: nowrap;
  padding: 9px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 500; text-decoration: none;
  border: 1px solid transparent;
  transition: transform .18s var(--ease), background-color .18s, border-color .18s;
}
.btn:active { transform: translateY(1px) scale(.985); }
.btn-primary { background: var(--accent); color: #05100d; font-weight: 600; }
.btn-primary:hover { background: #55d3b7; }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { background: var(--surface); border-color: var(--accent-deep); }
.btn-lg { padding: 13px 26px; font-size: 15px; }
.btn.is-disabled { opacity: .45; cursor: not-allowed; }

/* -------------------------------------------------------------------- nav */
.nav {
  position: sticky; top: 0; z-index: 40;
  height: 68px; display: flex; align-items: center; gap: 32px;
  padding: 0 28px;
  max-width: var(--maxw); margin: 0 auto;
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(4px)) { .nav { background: var(--ground); } }

/* Reading position. Scales on one axis so it costs nothing to move. */
.nav::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--rail-3));
  transform: scaleX(var(--page)); transform-origin: 0 50%;
}

.brand {
  display: flex; align-items: center; gap: 9px;
  font-weight: 600; letter-spacing: -0.01em; text-decoration: none;
  color: var(--ink); flex: none;
}
.brand svg { color: var(--accent); }

.nav nav { display: flex; gap: 24px; margin-right: auto; }
.nav nav a {
  display: inline-flex; align-items: center; min-height: 24px;
  font-size: 14px; color: var(--ink-2); text-decoration: none;
  transition: color .16s;
}
.nav nav a:hover { color: var(--ink); }
.nav-cta { flex: none; }

/* Below 860 the inline links do not fit, so they move into a disclosure. It
   is a details element, so it opens with the keyboard and without script. */
.menu { display: none; position: relative; flex: none; }
.menu summary {
  list-style: none; cursor: pointer;
  width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
}
.menu summary::-webkit-details-marker { display: none; }
/* Three bars drawn from one element and its two shadows. */
.menu summary span, .menu summary span::before, .menu summary span::after {
  content: ""; display: block; width: 15px; height: 1.5px;
  background: var(--ink-2); border-radius: 2px;
}
.menu summary span { position: relative; }
.menu summary span::before { position: absolute; top: -5px; }
.menu summary span::after { position: absolute; top: 5px; }
.menu[open] summary { border-color: var(--accent-deep); background: var(--accent-soft); }
.menu[open] nav {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 50;
  display: grid; gap: 2px; min-width: 190px;
  padding: 8px; border-radius: var(--r);
  border: 1px solid var(--line-strong); background: var(--surface);
  box-shadow: 0 22px 44px -20px rgba(0,0,0,.92);
}
.menu[open] nav a {
  padding: 9px 11px; border-radius: 7px;
  font-size: 14px; color: var(--ink-2); text-decoration: none;
}
.menu[open] nav a:hover { background: var(--surface-3); color: var(--ink); }

@media (max-width: 860px) {
  .nav { gap: 12px; padding: 0 16px; }
  .nav > nav { display: none; }
  .nav .brand { margin-right: auto; }
  .menu { display: block; }
}

/* ------------------------------------------------------------------- hero */
/* The glow lives on a full width band with overflow hidden, so an oversized
   pseudo element cannot widen the document. */
.hero-band { position: relative; overflow: hidden; }
.hero-band::before {
  content: "";
  position: absolute; left: -20%; right: -20%; top: -14%; bottom: 0;
  background:
    radial-gradient(48% 46% at 68% 28%, rgba(63,194,166,.13), transparent 70%),
    radial-gradient(40% 40% at 20% 8%, rgba(154,146,224,.07), transparent 70%);
  pointer-events: none;
}

.hero {
  position: relative;
  max-width: var(--maxw); margin: 0 auto;
  padding: 80px 28px 72px;
  display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: 56px; align-items: center;
}
.hero h1 { font-size: clamp(2.5rem, 5.4vw, 4rem); }
.hero h1 em { font-style: italic; font-weight: 600; color: var(--accent); line-height: 1.1; }
.hero .lede { margin-top: 20px; font-size: 1.08rem; color: var(--ink-2); max-width: 44ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-note {
  margin-top: 18px; font-family: var(--mono); font-size: 12px;
  color: var(--muted); letter-spacing: .01em;
}

/* The hero deck: a real 3D stack. --tx/--ty come from the pointer, --hp from
   scroll, so the card settles as you read past it. */
.deck { perspective: 1500px; perspective-origin: 50% 40%; }
/* --settle goes 1 to 0 shortly after load: the card arrives tilted and comes
   to rest flat. That matters for more than taste. A rotated element is
   rasterised once and then sampled, so text inside it loses its hinting and
   subpixel antialiasing for as long as the rotation lasts. Landing on exactly
   matrix(1,0,0,1,0,0) hands the glyphs back to the text rasteriser. */
.hero-deck {
  --tx: 0; --ty: 0; --hp: 0; --settle: 1;
  position: relative;
  transform-style: preserve-3d;
  transform:
    rotateX(calc(var(--settle) * 7deg + var(--ty) * 5deg - var(--hp) * 7deg))
    rotateY(calc(var(--settle) * -9deg + var(--tx) * 6deg))
    translateY(calc(var(--hp) * -26px))
    scale(calc(1 - var(--hp) * .04));
  transition: transform 1.1s var(--ease);
}
/* Pointer tracking needs to feel immediate, so it drops the long easing. */
.hero-deck.live { transition: transform .12s linear; }

.pane {
  border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  box-shadow: 0 40px 90px -36px rgba(0,0,0,.92), 0 0 0 1px rgba(255,255,255,.02) inset;
  overflow: hidden;
}

/* Two chips float off the main plane on the Z axis. This is the only place
   the 3D is decorative rather than structural, and it is two elements. */
.chip {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 13px; border-radius: 999px;
  background: color-mix(in srgb, var(--surface-3) 88%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line-strong);
  font-size: 12.5px; font-weight: 500; white-space: nowrap;
  box-shadow: 0 18px 34px -18px rgba(0,0,0,.9);
}
.chip b { font-family: var(--mono); font-weight: 500; color: var(--accent); }
/* Z depth also magnifies under perspective, which is a fractional scale and
   therefore also soft. The chips ride --settle back to the card's own plane. */
.chip { transition: transform 1.1s var(--ease); }
/* Far enough out that they sit in the empty gutter either side of the card
   rather than on top of commit subjects. Once the card is flat they read as
   labels attached to it, not as something covering it. */
.chip-1 { top: 13%; left: -25%; transform: translateZ(calc(var(--settle) * 70px)); }
.chip-2 { bottom: 11%; right: -15%; transform: translateZ(calc(var(--settle) * 46px)); }
.chip .spark { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding: 48px 16px 56px; }
  .chip-1 { left: 2%; } .chip-2 { right: 2%; }
}
@media (max-width: 560px) { .chip { display: none; } }

/* ------------------------------------------------------- app chrome (fake)
   The same shell serves the hero mini and the pinned tour, so there is one
   set of rules to keep honest. */
.app { display: flex; flex-direction: column; background: var(--surface); }
.app-bar {
  display: flex; align-items: center; gap: 10px;
  height: 38px; padding: 0 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2); flex: none;
}
.app-bar .mark { color: var(--accent); display: flex; }
.app-bar .title { font-size: 12px; font-weight: 500; color: var(--ink-2); }
.app-bar .path {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  margin-left: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-bar .caps { margin-left: auto; display: flex; gap: 14px; color: var(--muted); flex: none; }
.app-bar .caps i { width: 11px; height: 1px; background: currentColor; display: block; margin-top: 8px; }
.app-bar .caps i.sq { height: 9px; width: 9px; background: none; border: 1px solid currentColor; margin-top: 0; }
.app-bar .caps i.x { position: relative; background: none; height: 9px; width: 9px; margin-top: 0; }
.app-bar .caps i.x::before, .app-bar .caps i.x::after {
  content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: currentColor;
}
.app-bar .caps i.x::before { transform: rotate(45deg); }
.app-bar .caps i.x::after { transform: rotate(-45deg); }

.app-tools {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-bottom: 1px solid var(--line); flex: none;
}
.tool {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 7px;
  border: 1px solid var(--line-strong); background: var(--surface-3);
  font-size: 11.5px; color: var(--ink-2);
}
.tool b { font-family: var(--mono); font-weight: 500; color: var(--accent); font-size: 10.5px; }
.tool.on { border-color: var(--accent-deep); color: var(--ink); background: var(--accent-soft); }
.app-tools .grow { margin-left: auto; }
.app-tools .branch {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px; color: var(--ink-2);
}
.app-tools .branch::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rail-1);
}

/* ------------------------------------------------ hero mini graph (canvas) */
.mini canvas { display: block; width: 100%; height: 316px; }
@media (max-width: 560px) { .mini canvas { height: 240px; } }
.mini-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 13px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; color: var(--muted);
}
.mini-foot .pill {
  padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line-strong);
  color: var(--ink-2);
}

/* ----------------------------------------------------------- rail marquee */
.marquee {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  overflow: hidden; background: var(--ground-2);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: slide 46s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 22px;
  font-family: var(--mono); font-size: 12px; color: var(--ink-2);
  letter-spacing: .02em; white-space: nowrap;
}
.marquee-track span::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); opacity: .5;
}
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ------------------------------------------------------------------ strip */
.strip {
  max-width: var(--maxw); margin: 0 auto;
  padding: 30px 28px;
  border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.strip-item { display: flex; flex-direction: column; gap: 2px; }
.strip-item b {
  font-family: var(--mono); font-size: 1.55rem; font-weight: 500;
  color: var(--accent); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.strip-item span { font-size: 12.5px; color: var(--muted); }
@media (max-width: 760px) {
  .strip { grid-template-columns: repeat(2, 1fr); padding: 24px 16px; gap: 20px; }
}

/* ============================================================ the 3D tour
   A tall section with a pinned viewport. The scroll loop writes --p (0 to 1)
   and a data-act attribute; CSS does the rest. */
.tour { position: relative; height: 560vh; background: var(--ground-2); }
.tour-vp {
  --p: 0;
  position: sticky; top: 0; height: 100vh;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 18px; padding: 82px 28px 30px;
  overflow: hidden;
}
.tour-vp::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 50% 34%, rgba(63,194,166,.09), transparent 72%);
  pointer-events: none;
}

.tour-head {
  position: relative;
  max-width: var(--maxw); margin: 0 auto; width: 100%;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
}
.tour-head .eyebrow { margin: 0; }
.tour-head h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-top: 8px; }
.tour-rail { display: flex; gap: 2px; flex: none; }
/* The visible mark is a 3px bar, but the target around it is 34 by 24, which
   is a size a finger can actually hit. */
.tour-rail button {
  width: 38px; height: 24px; padding: 0; border: 0; background: none;
  cursor: pointer; display: grid; place-items: center;
}
.tour-rail button::before {
  content: ""; width: 30px; height: 3px; border-radius: 999px;
  background: var(--line-strong); transition: background-color .3s;
}
.tour-rail button[aria-current="true"]::before { background: var(--accent); }
.tour-rail button:hover::before { background: var(--ink-2); }

.tour-stage {
  position: relative;
  max-width: 1080px; width: 100%; margin: 0 auto;
  perspective: 1800px; perspective-origin: 50% 46%;
  min-height: 0;
}
/* The window itself. Rotation eases out as you scroll in, so act one lands
   flat and readable and only the approach is angled. */
/* Settled flat by p = 0.1, early in chapter one, and flat is the whole point:
   a rotated element is rasterised once and then sampled, so the file list and
   the diff inside it would stay soft for as long as any rotation lasted. There
   is deliberately no pointer term here. */
.tour-win {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform:
    rotateX(calc((1 - min(var(--p) * 10, 1)) * 13deg))
    rotateY(calc((1 - min(var(--p) * 10, 1)) * -15deg))
    scale(calc(.9 + min(var(--p) * 10, 1) * .1));
  transform-origin: 50% 20%;
}
.tour-win .app { position: absolute; inset: 0; border-radius: var(--r-lg); }

.tour-cap {
  position: relative;
  max-width: var(--maxw); margin: 0 auto; width: 100%;
  min-height: 76px;
}
.tour-cap article {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 5px;
  opacity: 0; transform: translateY(10px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  pointer-events: none;
}
.tour-cap article h3 { font-size: 1.15rem; }
.tour-cap article p { font-size: 14px; color: var(--ink-2); max-width: 74ch; }
.tour-vp[data-act="0"] article[data-act="0"],
.tour-vp[data-act="1"] article[data-act="1"],
.tour-vp[data-act="2"] article[data-act="2"],
.tour-vp[data-act="3"] article[data-act="3"] { opacity: 1; transform: none; }

/* ---- the window's three columns */
.app-body {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 172px minmax(0, 1fr) minmax(0, 1fr);
}
.side { border-right: 1px solid var(--line); background: var(--surface-2); padding: 12px 0; overflow: hidden; }
.side-label {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); font-weight: 500;
  padding: 0 14px; margin: 0 0 6px;
}
.side ul { list-style: none; margin: 0 0 16px; padding: 0; }
.side li { display: flex; align-items: center; gap: 8px; padding: 5px 14px; font-size: 12px; color: var(--ink-2); }
.side li i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); flex: none; }
.side li.cur { color: var(--ink); background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.side li.cur i { background: var(--accent); }
.side li.r2 i { background: var(--rail-2); }
.side li.r3 i { background: var(--rail-3); }
.side li .n { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--muted); }

.col { min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.col:last-child { border-right: 0; }
.col-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-bottom: 1px solid var(--line); flex: none;
  font-size: 11px; color: var(--muted);
}
.col-head b { color: var(--ink-2); font-weight: 500; }
.col-head .tag {
  margin-left: auto; font-family: var(--mono); font-size: 10px;
  padding: 1px 6px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--ink-2);
}
.col-scroll { flex: 1; min-height: 0; overflow: hidden; position: relative; }

/* The graph column paints to canvas, same as the real app. */
.graph-col canvas { display: block; width: 100%; height: 100%; }

/* Panes stack in the third column and cross-fade with the act. */
.swap { position: absolute; inset: 0; opacity: 0; transition: opacity .4s var(--ease); pointer-events: none; }
.tour-vp[data-act="0"] .swap[data-act="0"],
.tour-vp[data-act="1"] .swap[data-act="1"],
.tour-vp[data-act="2"] .swap[data-act="2"],
.tour-vp[data-act="3"] .swap[data-act="3"] { opacity: 1; }

/* ---- act 0: commit detail */
.detail { padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; }
.detail .sha { font-family: var(--mono); font-size: 11px; color: var(--accent); }
.detail .subj { font-size: 13.5px; font-weight: 500; }
.detail .meta { font-size: 11px; color: var(--muted); font-family: var(--mono); line-height: 1.8; }
.detail .obj-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
  padding-top: 4px; border-top: 1px solid var(--line);
}
.detail .obj-head .mini-btn { margin-left: auto; }

/* ---- act 1: staging */
.files { list-style: none; margin: 0; padding: 6px 0; }
.files li {
  display: grid; grid-template-columns: 14px 15px 1fr auto; gap: 9px;
  align-items: center; padding: 5px 14px;
  font-family: var(--mono); font-size: 11px; color: var(--ink-2);
}
.box { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--line-strong); position: relative; }
.files li.on .box { background: var(--accent); border-color: var(--accent); }
.files li.on .box::after {
  content: ""; position: absolute; left: 2px; right: 2px; top: 2px; bottom: 3px;
  border: 1.6px solid #05100d; border-top: 0; border-right: 0;
  transform: rotate(-45deg);
}
.st { font-size: 10px; font-weight: 500; text-align: center; }
.st.m { color: var(--warn); } .st.a { color: var(--ok); } .st.d { color: var(--bad); }
.files .f { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files .adds { font-size: 10px; color: var(--muted); }
.files .adds b { color: var(--ok); font-weight: 500; }
.files .adds i { color: var(--bad); font-style: normal; }

.commit-box { border-top: 1px solid var(--line); padding: 11px 14px; }
.commit-box .msg {
  min-height: 46px; padding: 8px 10px; border-radius: 7px;
  background: var(--ground); border: 1px solid var(--line-strong);
  font-family: var(--mono); font-size: 11px; color: var(--ink); line-height: 1.6;
}
.caret {
  display: inline-block; width: 1px; height: 12px; margin-left: 1px;
  background: var(--accent); vertical-align: -2px;
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.commit-box .row { display: flex; align-items: center; gap: 9px; margin-top: 9px; }
.commit-box .row .who { font-size: 10.5px; color: var(--muted); margin-right: auto; }
.mini-btn {
  padding: 5px 13px; border-radius: 999px; border: 0;
  background: var(--accent); color: #05100d;
  font-size: 11px; font-weight: 600; font-family: var(--sans);
}
.mini-btn.ghost { background: none; border: 1px solid var(--line-strong); color: var(--ink-2); }

/* ---- act 2: diff */
.diff { font-family: var(--mono); font-size: 10.5px; line-height: 1.72; padding: 6px 0; }
.diff div { display: grid; grid-template-columns: 30px 14px 1fr; padding: 0 12px; white-space: pre; }
.diff .ln { color: #4d5b57; text-align: right; padding-right: 9px; font-size: 9.5px; }
.diff .sg { text-align: center; }
.diff .add { background: rgba(92,184,104,.10); }
.diff .add .tx, .diff .add .sg { color: #a7dfae; }
.diff .del { background: rgba(226,105,92,.10); }
.diff .del .tx, .diff .del .sg { color: #edb0a9; }
.diff .hunk { color: var(--rail-3); background: rgba(154,146,224,.07); }
.diff .tx { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; }

/* ---- act 3: transfer */
.tr { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; height: 100%; }
.tr-paths { display: grid; gap: 6px; }
.tr-path { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 9px; align-items: center; font-family: var(--mono); font-size: 10px; }
.tr-path span:first-child { color: var(--muted); letter-spacing: .1em; text-transform: uppercase; font-size: 9px; }
.tr-path span:last-child {
  padding: 5px 9px; border-radius: 6px;
  background: var(--ground); border: 1px solid var(--line-strong);
  color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; align-content: start; }
.tr-list li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 7px 0; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-2);
}
.tr-list .f { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 9.5px; font-weight: 500; letter-spacing: .02em;
  border: 1px solid var(--line-strong); color: var(--muted); white-space: nowrap;
}
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge.new { color: var(--ok); border-color: rgba(92,184,104,.34); }
.badge.over { color: var(--warn); border-color: rgba(214,169,57,.34); }
.badge.same { color: var(--muted); }
.badge.bad { color: var(--bad); border-color: rgba(226,105,92,.34); }
.badge.wait::before { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.tr-foot { display: flex; align-items: center; gap: 9px; margin-top: auto; }
.tr-foot .sum { font-size: 10.5px; color: var(--muted); margin-right: auto; }

/* Narrow: the tour drops the sidebar, then the graph column. */
@media (max-width: 980px) {
  .tour { height: 480vh; }
  .tour-vp { padding: 74px 16px 24px; }
  .app-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .side { display: none; }
}
@media (max-width: 660px) {
  .app-body { grid-template-columns: 1fr; }
  .graph-col { display: none; }
  .tour-cap { min-height: 104px; }
  .tour-head h2 { display: none; }
}

/* Reduced motion: unpin it, drop the 3D, show one act as a plain figure. */
@media (prefers-reduced-motion: reduce) {
  .tour { height: auto; }
  .tour-vp { position: static; height: auto; padding: 64px 16px; }
  .tour-stage { height: 520px; }
  .tour-win { transform: none; }
  .tour-rail { display: none; }
  .tour-cap { min-height: 0; display: grid; gap: 20px; margin-top: 26px; }
  .tour-cap article { position: static; opacity: 1; transform: none; }
  .swap { position: static; opacity: 1; display: none; }
  .swap[data-act="1"] { display: block; }
}

/* ------------------------------------------------------- split explainer */
.split {
  max-width: var(--maxw); margin: 0 auto;
  padding: 104px 28px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px; align-items: center;
}
.eyebrow {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 14px;
}
.split h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); margin-bottom: 20px; }
.split p { color: var(--ink-2); margin-bottom: 16px; }
.split .facts { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 9px; }
.split .facts li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; font-size: 14px; color: var(--ink-2); }
.split .facts li::before {
  content: ""; width: 7px; height: 7px; margin-top: 8px; border-radius: 2px;
  background: var(--accent); transform: rotate(45deg);
}
.split-figure {
  margin: 0; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line-strong); background: var(--surface);
  height: 460px; display: flex; flex-direction: column;
  box-shadow: 0 30px 70px -34px rgba(0,0,0,.85);
}
.split-figure canvas { flex: 1; width: 100%; display: block; min-height: 0; }
.split-figure figcaption {
  flex: none; padding: 10px 14px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; color: var(--muted);
  background: var(--surface-2);
}
@media (max-width: 980px) {
  .split { grid-template-columns: 1fr; gap: 34px; padding: 68px 16px; }
  .split-figure { height: 380px; }
}

/* ------------------------------------------------------------------ bento */
.bento-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px 104px; }
.section-head { font-size: clamp(1.8rem, 3.2vw, 2.5rem); max-width: 22ch; margin-bottom: 14px; }
.section-lede { color: var(--ink-2); margin-bottom: 36px; max-width: 58ch; }
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cell {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); padding: 26px 24px;
  display: flex; flex-direction: column; gap: 9px;
  transition: border-color .25s, transform .3s var(--ease);
}
.cell:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.cell h3 { font-size: 1.05rem; }
.cell p { font-size: 14px; color: var(--ink-2); }
.cell code { color: var(--accent); }
.cell .keys { margin-top: auto; padding-top: 12px; display: flex; gap: 6px; flex-wrap: wrap; }

.cell-wide { grid-column: span 2; }
.cell-accent {
  background: radial-gradient(120% 120% at 100% 0%, var(--accent-soft), transparent 62%), var(--surface);
  border-color: var(--accent-deep);
}
.surface-shot { background: linear-gradient(200deg, rgba(63,194,166,.09), transparent 55%), var(--surface); }
/* The rails sit in the bottom 46px, so the copy has to clear them. */
.cell-rails { position: relative; overflow: hidden; padding-bottom: 62px; }
.cell-rails::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 46px;
  background:
    repeating-linear-gradient(90deg, var(--rail-1) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(90deg, var(--rail-2) 11px 13px, transparent 13px 33px);
  opacity: .22; pointer-events: none;
}
@media (max-width: 980px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-wrap { padding: 0 16px 72px; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .cell-wide { grid-column: span 1; }
}

/* ------------------------------------------------------------- shortcuts */
.keys-sec { border-top: 1px solid var(--line); background: var(--ground-2); padding: 96px 0; }
.keys-grid {
  max-width: var(--maxw); margin: 34px auto 0; padding: 0 28px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 12px;
}
.keys-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--surface);
}
.keys-row .what { font-size: 13.5px; color: var(--ink-2); margin-right: auto; }
.keys-row .combo { display: flex; gap: 5px; flex: none; }
/* Keycaps get depth from a hard bottom edge, not a blurred shadow. */
kbd {
  font-family: var(--mono); font-size: 10.5px; line-height: 1;
  min-width: 22px; padding: 6px 7px; text-align: center;
  color: var(--ink); background: var(--surface-3);
  border: 1px solid var(--line-strong); border-bottom-width: 3px;
  border-radius: 6px; display: inline-block;
  transition: transform .1s, border-bottom-width .1s;
}
.keys-row:hover kbd { transform: translateY(1px); border-bottom-width: 2px; }
@media (max-width: 760px) { .keys-sec { padding: 68px 0; } .keys-grid { padding: 0 16px; } }

/* --------------------------------------------------------------- transfer */
.transfer { border-top: 1px solid var(--line); background: var(--surface-2); padding: 96px 28px; }
.transfer-inner { max-width: var(--maxw); margin: 0 auto; }
.transfer h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); margin-bottom: 16px; }
.transfer-lede { max-width: 58ch; margin-bottom: 40px; color: var(--ink-2); }
.transfer-grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 40px; align-items: start;
}
.transfer-input pre {
  margin: 0; padding: 20px 22px;
  background: var(--ground); border: 1px solid var(--line-strong); border-radius: var(--r);
  font-family: var(--mono); font-size: 12.5px; line-height: 1.85;
  color: var(--ink-2); overflow-x: auto;
}
.caption { margin-top: 12px; font-size: 13px; color: var(--muted); }
.transfer-states { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.transfer-states li {
  display: grid; grid-template-columns: 10px auto minmax(0, 1fr); gap: 12px; align-items: baseline;
  padding: 13px 4px; border-bottom: 1px solid var(--line); font-size: 14px;
}
.transfer-states li:last-child { border-bottom: 0; }
.transfer-states b { font-weight: 500; white-space: nowrap; }
.transfer-states span:last-child { color: var(--muted); font-size: 13px; }
@media (max-width: 980px) {
  .transfer { padding: 68px 16px; }
  /* minmax(0, 1fr) rather than 1fr: a grid item's automatic minimum is its
     min-content size, and the pasted paths are long unbreakable tokens. */
  .transfer-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
.transfer-input, .transfer-states { min-width: 0; }
.transfer-input pre { max-width: 100%; }
.caption { overflow-wrap: anywhere; }

/* -------------------------------------------------------- under the hood */
.hood { padding: 96px 0; border-top: 1px solid var(--line); }
.hood-grid {
  max-width: var(--maxw); margin: 34px auto 0; padding: 0 28px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}
.hood-item { padding: 26px 26px 26px 0; border-top: 1px solid var(--line-strong); }
.hood-item .num {
  font-family: var(--mono); font-size: 11px; color: var(--accent);
  letter-spacing: .14em; display: block; margin-bottom: 12px;
}
.hood-item h3 { font-size: 1rem; margin-bottom: 8px; }
.hood-item p { font-size: 13.5px; color: var(--ink-2); }
.hood-item code { color: var(--accent); }
@media (max-width: 860px) {
  .hood { padding: 68px 0; }
  .hood-grid { padding: 0 16px; }
  .hood-item { padding: 22px 0; }
}

/* ------------------------------------------------------------- is / isn't */
.stance { border-top: 1px solid var(--line); background: var(--ground-2); padding: 96px 0; }
.stance-cols {
  max-width: var(--maxw); margin: 34px auto 0; padding: 0 28px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
.stance-card { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 28px 26px; }
.stance-card.no { background: none; border-style: dashed; }
.stance-card h3 { font-size: 1rem; margin-bottom: 16px; display: flex; align-items: center; gap: 9px; }
.stance-card h3 span {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-deep);
}
.stance-card.no h3 span { background: none; color: var(--muted); border-color: var(--line-strong); }
.stance-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.stance-card li { font-size: 13.5px; color: var(--ink-2); padding-left: 16px; position: relative; }
.stance-card li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent-deep);
}
.stance-card.no li::before { background: none; border: 1px solid var(--line-strong); }
@media (max-width: 860px) {
  .stance { padding: 68px 0; }
  .stance-cols { grid-template-columns: 1fr; padding: 0 16px; }
}

/* --------------------------------------------------------------- roadmap */
.road { border-top: 1px solid var(--line); background: var(--ground-2); padding: 96px 0; }
.road-list { max-width: var(--maxw); margin: 34px auto 0; padding: 0 28px; }
.road-item {
  display: grid; grid-template-columns: 108px 22px minmax(0, 1fr); gap: 20px;
  padding: 22px 0; border-top: 1px solid var(--line);
}
.road-item:first-child { border-top: 0; }
.road-when {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); padding-top: 3px;
}
.road-mark { position: relative; }
.road-mark::before {
  content: ""; position: absolute; left: 7px; top: 6px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ground-2); border: 2px solid var(--line-strong);
}
/* Reaches the next item's dot: 22px of padding either side of the divider,
   plus the 6px the dot sits down from the item's top edge. */
.road-mark::after {
  content: ""; position: absolute; left: 11px; top: 19px; bottom: -51px; width: 1px; background: var(--line);
}
.road-item:last-child .road-mark::after { display: none; }
.road-item.done .road-mark::before { background: var(--accent); border-color: var(--accent); }
.road-item.now .road-mark::before { border-color: var(--accent); }
.road-body h3 { font-size: 1rem; margin-bottom: 6px; }
.road-body p { font-size: 13.5px; color: var(--ink-2); }
.road-body .tagline {
  display: inline-block; margin-top: 8px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted);
}
.road-item.done .tagline { color: var(--accent); border-color: var(--accent-deep); }
@media (max-width: 760px) {
  .road { padding: 68px 0; }
  .road-list { padding: 0 16px; }
  .road-item { grid-template-columns: 22px minmax(0, 1fr); gap: 14px; }
  .road-mark { grid-row: span 2; }
  .road-when { grid-column: 2; padding: 0 0 4px; }
}

/* ------------------------------------------------------------------- faq */
.faq { padding: 96px 0; border-top: 1px solid var(--line); }
.faq-list { max-width: 860px; margin: 30px auto 0; padding: 0 28px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 20px 40px 20px 0; position: relative;
  font-size: 15.5px; font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 26px;
  width: 9px; height: 9px;
  border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted);
  transform: rotate(45deg); transition: transform .24s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details[open] summary { color: var(--accent); }
.faq .answer { padding: 0 0 22px; }
.faq .answer p { font-size: 14px; color: var(--ink-2); }
.faq .answer p + p { margin-top: 10px; }
.faq .answer code { color: var(--accent); }
@media (max-width: 760px) { .faq { padding: 68px 0; } .faq-list { padding: 0 16px; } }

/* --------------------------------------------------------------- download */
.download {
  position: relative; overflow: hidden;
  border-top: 1px solid var(--line);
  padding: 110px 28px;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  text-align: center;
}
.download::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  background: radial-gradient(52% 74% at 50% 108%, rgba(63,194,166,.16), transparent 72%);
  pointer-events: none;
}
.download > * { position: relative; }
.download h2 { font-size: clamp(2rem, 3.8vw, 2.9rem); }
.download .sub { color: var(--ink-2); max-width: 48ch; }
.release-line { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.fineprint { font-size: 13px; color: var(--muted); max-width: 52ch; }
.fineprint code { color: var(--ink-2); }
.dl-meta {
  display: flex; gap: 22px; flex-wrap: wrap; justify-content: center;
  margin-top: 6px; font-family: var(--mono); font-size: 11px; color: var(--muted);
}
@media (max-width: 760px) { .download { padding: 72px 16px; } }

/* ------------------------------------------------------------------- foot */
.foot { border-top: 1px solid var(--line); background: var(--ground-2); }
.foot-top {
  max-width: var(--maxw); margin: 0 auto; padding: 48px 28px 34px;
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px;
}
.foot-brand { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 12px; }
.foot-brand svg { color: var(--accent); }
.foot-blurb { font-size: 13px; color: var(--muted); max-width: 34ch; }
.foot-col h3 {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 12px;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-col a, .foot-col span {
  display: inline-flex; align-items: center; min-height: 24px;
  font-size: 13px; color: var(--ink-2); text-decoration: none;
}
.foot-col a:hover { color: var(--accent); }
.foot-bottom {
  max-width: var(--maxw); margin: 0 auto;
  padding: 20px 28px 48px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.foot-legal { font-size: 12.5px; color: var(--muted); line-height: 1.8; }
.foot-legal a { display: inline-flex; align-items: center; min-height: 24px; color: var(--ink-2); }
.foot-legal a:hover { color: var(--accent); }
.foot-tm { font-family: var(--mono); font-size: 11px; color: var(--muted); text-align: right; }
@media (max-width: 900px) {
  .foot-top { grid-template-columns: repeat(2, 1fr); padding: 40px 16px 30px; }
  .foot-bottom { padding: 20px 16px 40px; }
  .foot-tm { text-align: left; }
}

/* ------------------------------------------------------------ scroll-in */
/* Gated on the js class, which an inline script in the head sets. If the
   script never runs, or app.js throws before the observer is wired, the
   sections stay visible instead of the page being mostly blank. */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal > * { opacity: 0; transform: translateY(16px); }
  html.js .reveal.in > * {
    opacity: 1; transform: none;
    transition: opacity .62s var(--ease), transform .62s var(--ease);
  }
  /* Children stagger so the section resolves in reading order. */
  html.js .reveal.in > *:nth-child(2) { transition-delay: .07s; }
  html.js .reveal.in > *:nth-child(3) { transition-delay: .14s; }
  html.js .reveal.in > *:nth-child(4) { transition-delay: .2s; }
}

/* ------------------------------------------------------------- additions */

/* Visually hidden, still announced. Used by the tour chapter rail. */
.sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* The toolbar button relevant to the current chapter lights up, so the eye
   is told where in the window the story is happening. */
.tour-vp[data-act="0"] .tool[data-act="0"],
.tour-vp[data-act="1"] .tool[data-act="1"],
.tour-vp[data-act="2"] .tool[data-act="2"],
.tour-vp[data-act="3"] .tool[data-act="3"] {
  border-color: var(--accent-deep); color: var(--ink); background: var(--accent-soft);
}
.tool { transition: background-color .35s, border-color .35s, color .35s; }

/* Captions run to three lines at the narrowest width the tour still shows. */
.tour-cap { min-height: 88px; }

/* The framed code block. The privacy section that introduced it is gone; the
   tour's commit detail pane still uses it. */
.wire { border-radius: var(--r); border: 1px solid var(--line-strong); background: var(--ground); overflow: hidden; }
.wire pre { margin: 0; padding: 18px; overflow-x: auto; font-family: var(--mono); font-size: 12px; line-height: 1.8; color: var(--ink-2); }

/* The commit detail pane borrows the wire block; keep its type in scale. */
.detail .wire pre { font-size: 10.5px; }

/* ------------------------------------------------------------------ plans */
/* The plan cards, on the home page's pricing section and on /pricing/.
   pricing/pricing.js fills in what the admin panel has on sale. */

.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 28px 0 16px;
}
.plan {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
  text-align: left;
  position: relative;
}
/* The user-agent's [hidden] loses to the flex above, so a plan taken off
   sale would still show without this. */
.plan[hidden] { display: none; }
.plan.best { border-color: var(--accent-deep); box-shadow: 0 0 0 1px var(--accent-deep) inset; }
.plan h2, .plan h3 { font-size: 20px; margin: 0; }
.plan .tag {
  position: absolute; top: 22px; right: 22px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 2px 10px;
}
.plan .price { font-size: 36px; font-weight: 700; color: var(--ink); line-height: 1.1; margin: 4px 0 0; }
.plan .price small { font-size: 15px; font-weight: 500; color: var(--muted); }
.plan .elsewhere { color: var(--muted); font-size: 14px; margin: 0; }
.plan ul { margin: 6px 0 12px; padding-left: 20px; color: var(--ink-2); }
.plan li { margin-bottom: 6px; }
.plan .btn { margin-top: auto; text-align: center; font: inherit; font-weight: 600; cursor: pointer; }
/* .btn-ghost was written for links, which have no background of their own;
   on a <button> the browser's grey-white fill shows through and the label
   disappears into it. */
.plan .btn-ghost { background: transparent; }
.plan .btn[aria-busy='true'] { opacity: .6; cursor: progress; }
.buy-error { color: var(--bad); min-height: 1.5em; }

/* The home page's pricing section: the case on the left, the two plans on
   the right, with the accent's light pooled behind the yearly plan. It sits
   straight after the features, so the price is met while the reason for it
   is still on screen. */
.pricing-sec { position: relative; padding: 112px 0 120px; border-top: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.pricing-sec::before {
  content: '';
  position: absolute; z-index: -1;
  right: -10%; top: 50%; width: 70%; height: 120%;
  transform: translateY(-50%);
  background: radial-gradient(closest-side, rgba(63, 194, 166, .13), rgba(63, 194, 166, 0) 70%);
  pointer-events: none;
}
.pricing-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.pricing-copy .lede { color: var(--ink-2); max-width: 44ch; margin-bottom: 22px; }
.pricing-points { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; }
.pricing-points li { position: relative; padding-left: 30px; color: var(--ink-2); max-width: 46ch; }
.pricing-points li b { color: var(--ink); font-weight: 600; }
/* A tick drawn from two borders: no icon file for one mark. */
.pricing-points li::before {
  content: '';
  position: absolute; left: 4px; top: .42em;
  width: 6px; height: 11px;
  border: solid var(--accent); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.pricing-copy .more { color: var(--muted); font-size: 14px; max-width: 46ch; margin: 0; }
.pricing-copy .more a { color: var(--ink-2); }
.pricing-sec .plans { margin: 0; align-items: stretch; }
.pricing-sec .plan { transition: border-color .25s var(--ease), transform .25s var(--ease); }
.pricing-sec .plan:hover { border-color: var(--accent-deep); }
.pricing-sec .plan.best {
  background: linear-gradient(180deg, rgba(63, 194, 166, .07), rgba(63, 194, 166, 0) 55%), var(--surface);
  box-shadow: 0 0 0 1px var(--accent-deep) inset, 0 24px 60px -30px rgba(31, 122, 102, .55);
}
.pricing-sec .buy-error { grid-column: 1 / -1; margin: 0; }
@media (max-width: 960px) {
  .pricing-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .pricing-sec { padding: 88px 0 96px; }
}

/* Headings break where the words do, not wherever the line runs out. */
h1, h2, h3, .section-head { text-wrap: balance; }
p, li { text-wrap: pretty; }

@media (max-width: 720px) {
  .plans { grid-template-columns: minmax(0, 1fr); }
}