/* agentbuzz — landing.  Tokens live in tokens.css; this file only composes. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 720px; }

/* ── type ─────────────────────────────────────────────────────────────── */
.display {
  font-size: var(--size-display);
  line-height: var(--leading-display);
  letter-spacing: var(--track-display);
  font-weight: 500;
  text-transform: lowercase;
  margin: 0 0 var(--s5);
  text-wrap: balance;
}
.display--sm { font-size: var(--size-title); line-height: var(--leading-title); }

.title {
  font-size: var(--size-title);
  line-height: var(--leading-title);
  letter-spacing: var(--track-title);
  font-weight: 500;
  text-transform: lowercase;
  margin: 0 0 var(--s4);
  text-wrap: balance;
}

.lead { font-size: var(--size-lead); color: var(--ink-72); max-width: var(--measure); margin: 0 0 var(--s7); }
.sub  { color: var(--ink-72); max-width: var(--measure); margin: 0 0 var(--s5); }
.fine { color: var(--ink-52); font-size: var(--size-small); max-width: var(--measure); margin: var(--s5) 0 0; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--size-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-38);
  margin: 0 0 var(--s4);
}
strong { font-weight: 500; color: var(--ink); }
code { font-family: var(--font-mono); font-size: 0.9em; }

/* ── nav ──────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--paper) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: var(--hairline);
}
.nav__in {
  max-width: var(--page); margin-inline: auto; padding: var(--s3) var(--gutter);
  display: flex; align-items: center; gap: var(--s6);
}
.nav__links { display: flex; gap: var(--s5); margin-left: auto; }
.nav__links a { color: var(--ink-52); text-decoration: none; font-size: var(--size-small); transition: color var(--dur-fast) var(--ease); }
.nav__links a:hover { color: var(--ink); }
@media (max-width: 720px) { .nav__links { display: none; } .nav__in { gap: var(--s4); } .btn--sm { margin-left: auto; } }

.wordmark {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-weight: 500; letter-spacing: var(--track-title);
  color: var(--ink); text-decoration: none;
}
.wordmark__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ok) 18%, transparent);
}

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--s3) var(--s5);
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink); border-radius: var(--radius-pill);
  font: inherit; font-size: var(--size-small); font-weight: 500;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:hover { opacity: 0.86; }
.btn:active { transform: translateY(1px); }
.btn--sm { padding: var(--s2) var(--s4); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink-14); }

/* ── the install command ──────────────────────────────────────────────── */
.cmd {
  display: inline-flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s3) var(--s3) var(--s5);
  background: var(--paper-rise);
  border: 1px solid var(--ink-14); border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: var(--size-body);
  letter-spacing: var(--track-mono); color: var(--ink);
  cursor: pointer; transition: border-color var(--dur-fast) var(--ease);
}
.cmd:hover { border-color: var(--ink-38); }
.cmd__prompt { color: var(--ink-38); }
.cmd__copy {
  font-size: var(--size-micro); color: var(--ink-52);
  padding: var(--s1) var(--s3); border-radius: var(--radius-pill);
  background: var(--ink-04); border: var(--hairline);
}
.cmd__copy::after { content: attr(data-label); }
.cmd.is-copied .cmd__copy { color: var(--ok); background: var(--ok-fill); border-color: transparent; }
.cmd--lg { font-size: var(--size-lead); padding: var(--s4) var(--s4) var(--s4) var(--s6); }

.cta { margin-bottom: var(--s7); }

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero { padding: var(--s10) 0 var(--s9); position: relative; overflow: hidden; }
/* the one gradient in the system: a soft state-coloured bloom behind the hero */
.hero::before {
  content: ""; position: absolute; inset: -30% 0 auto 50%;
  width: 900px; height: 700px; transform: translateX(-50%);
  background: radial-gradient(closest-side,
      color-mix(in oklab, var(--ok) 14%, transparent), transparent 70%);
  filter: blur(20px); pointer-events: none; z-index: -1;
}

/* ── hero layout ──────────────────────────────────────────────────────
   Two columns: the pitch and the terminal it describes on the left, the
   hardware the notification lands on to the right of both. The devices are
   centred against the whole left column rather than against the terminal
   alone — they answer the headline as much as they answer the run. */
.hero__in {
  display: grid; grid-template-columns: minmax(0, 1fr) 392px;
  gap: var(--s7); align-items: center; margin-bottom: var(--s4);
}
.hero__art { justify-self: end; }
/* The headline sets its own line breaks, and the lead has --measure; neither
   needs the column to constrain it further. */
.hero__copy .lead { margin-bottom: var(--s6); }

.term {
  background: var(--paper-sunk);
  border: var(--hairline); border-radius: var(--radius-lg);
  overflow: hidden;
}
.term__bar {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s4); border-bottom: var(--hairline);
}
.term__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-14); }
.term__title {
  margin-left: var(--s3); font-family: var(--font-mono);
  font-size: var(--size-micro); color: var(--ink-38);
}
.term__body {
  margin: 0; padding: var(--s5);
  font-family: var(--font-mono); font-size: var(--size-small);
  line-height: 1.75; letter-spacing: var(--track-mono);
  color: var(--ink-72); white-space: pre-wrap; word-break: break-word;
  min-height: 280px;
}
.term__body .t-dim  { color: var(--ink-38); }
.term__body .t-ok   { color: var(--ok); }
.term__body .t-warn { color: var(--blocked); }
.term__body .t-fail { color: var(--fail); }
.term__body .t-cur  { background: var(--ink); color: var(--paper); }

/* ── the hardware ──────────────────────────────────────────────────────
   An iPhone and an Apple Watch, drawn in CSS at the proportions of the real
   objects — iPhone 16 Pro is 149.6 × 71.5mm, so 2.092:1; Watch Series 10
   46mm is 46 × 39mm, so 1.179:1. The ratio is the whole trick: a phone at
   the wrong aspect reads as a wireframe, and the claim this page is making
   is that a real notification lands on real hardware.

   Device chrome never inverts — see the --device-* tokens. Hardware is also
   the one thing here that is genuinely an object in space, so it casts the
   page's only other shadow.
   ───────────────────────────────────────────────────────────────────── */

/* Cluster: phone on the right, watch overlapping its lower-left rail. The
   overlap is 14px — enough to read as depth, small enough that it only ever
   covers the phone's metal edge and never the notification. */
.devices { position: relative; width: 392px; padding-left: 142px; }

/* ── iPhone ───────────────────────────────────────────────────────────── */
.iphone {
  position: relative; width: 250px;
  aspect-ratio: 71.5 / 149.6;
  border-radius: 39px;          /* 0.157 × width, from the real corner arc  */
  padding: 8px;                 /* the titanium rail                        */
  /* Specular highlights where a machined band would catch the light. */
  background:
    linear-gradient(148deg,
      #5b5b61 0%, #232327 10%, #47474d 26%, #1a1a1d 46%,
      #3e3e44 62%, #141416 80%, #52525a 94%, #26262a 100%);
  box-shadow: var(--shadow-device);
}
.iphone__screen {
  /* Hardware doesn't invert, and neither does what's on it: pin the card
     tokens to their light values so the banner is identical in dark mode. */
  --paper-rise: var(--device-card);
  --ink:    var(--device-card-ink);
  --ink-72: color-mix(in srgb, var(--device-card-ink) 72%, transparent);
  --ink-52: color-mix(in srgb, var(--device-card-ink) 52%, transparent);
  --ink-38: color-mix(in srgb, var(--device-card-ink) 38%, transparent);
  --ink-14: color-mix(in srgb, var(--device-card-ink) 14%, transparent);
  --ink-08: color-mix(in srgb, var(--device-card-ink)  8%, transparent);
  --ink-04: color-mix(in srgb, var(--device-card-ink)  4%, transparent);
  --ok:      var(--device-card-ok);
  --blocked: var(--device-card-blocked);
  --fail:    var(--device-card-fail);

  position: relative; height: 100%; overflow: hidden;
  border-radius: 32px;
  background:
    radial-gradient(120% 60% at 50% 0%,
      color-mix(in oklab, var(--device-screen-a) 90%, #fff 10%), transparent 70%),
    linear-gradient(168deg, var(--device-screen-a) 0%, var(--device-screen-b) 58%);
  display: flex; flex-direction: column;
  padding: 38px 12px 10px;
}
.iphone__island {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 76px; height: 23px; border-radius: var(--radius-pill);
  background: #000;
}
/* Side buttons. Left rail: Action, then volume. Right rail: power, then
   Camera Control. They sit 2px proud of the body, as they do in life. */
.iphone__btn {
  position: absolute; width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, #4a4a50, #1c1c1f 40%, #3d3d43);
}
.iphone__btn--action { left: -2px;  top: 92px;  height: 24px; }
.iphone__btn--volup  { left: -2px;  top: 132px; height: 42px; }
.iphone__btn--voldn  { left: -2px;  top: 184px; height: 42px; }
.iphone__btn--power  { right: -2px; top: 150px; height: 64px; }
.iphone__btn--cam    { right: -2px; top: 232px; height: 28px; opacity: 0.8; }

/* Lock screen. Time at the top, notifications stacked at the bottom —
   the iOS layout, because that is where the reader's eye already looks. */
.lock { text-align: center; color: var(--device-fg); }
.lock__date {
  margin: 0 0 2px; font-size: 0.7rem; font-weight: 500;
  color: var(--device-fg-dim); letter-spacing: 0.01em;
}
.lock__time {
  margin: 0; font-size: 3.5rem; font-weight: 500; line-height: 1;
  letter-spacing: var(--track-display);
}
.lock__notes { margin-top: auto; }
.lock__bar {
  width: 36%; height: 4px; margin: var(--s3) auto 0;
  border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.55);
}

/* ── Apple Watch ──────────────────────────────────────────────────────
   Everything scales off --w, including the type, so the same markup can be
   a 140px prop in the hero and a 230px hero of its own further down. */
.awatch {
  --w: 156px;
  position: relative; width: var(--w);
  font-size: calc(var(--w) * 0.074);
}
.hero .awatch { position: absolute; left: 0; bottom: 40px; }

.awatch__case {
  position: relative; z-index: 1;
  width: var(--w); aspect-ratio: 39 / 46;
  border-radius: calc(var(--w) * 0.28);   /* the cushion, not a rectangle */
  padding: calc(var(--w) * 0.055);
  background:
    linear-gradient(150deg,
      #6a6a72 0%, #212125 14%, #55555d 34%, #17171a 56%,
      #4d4d55 74%, #131315 88%, #5f5f68 100%);
  box-shadow: var(--shadow-device),
              inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}
.awatch__screen {
  height: 100%; overflow: hidden;
  border-radius: calc(var(--w) * 0.235);
  background: #000;                        /* a Watch screen is true black */
  padding: 0.85em 0.75em;
  display: flex; flex-direction: column;
}
/* A short length of black sport band above and below, tucked under the case
   and stopped with a rounded tip. An earlier version faded out instead and
   read as fog rather than rubber — a strap that ends is more convincing than
   a strap that dissolves. */
.awatch__band {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 61%; height: calc(var(--w) * 0.40);
  background: linear-gradient(100deg, #08080a, #24242a 34%, #131316 62%, #050506);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.awatch__band--top {
  bottom: 100%; margin-bottom: calc(var(--w) * -0.11);
  border-radius: calc(var(--w) * 0.09) calc(var(--w) * 0.09) 3px 3px;
}
.awatch__band--bot {
  top: 100%; margin-top: calc(var(--w) * -0.11);
  border-radius: 3px 3px calc(var(--w) * 0.09) calc(var(--w) * 0.09);
}
/* Digital Crown and the side button, on the right edge where they live. */
.awatch__crown {
  position: absolute; z-index: 2; right: calc(var(--w) * -0.035); top: 26%;
  width: calc(var(--w) * 0.05); height: calc(var(--w) * 0.19);
  border-radius: 2px;
  background: repeating-linear-gradient(180deg, #6d6d76 0 1.5px, #26262a 1.5px 3px);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.18);
}
.awatch__side {
  position: absolute; z-index: 2; right: calc(var(--w) * -0.022); top: 50%;
  width: calc(var(--w) * 0.028); height: calc(var(--w) * 0.24);
  border-radius: 3px;
  background: linear-gradient(180deg, #3c3c43, #17171a);
}

/* The notification as the Watch renders it: no app chrome, no timestamp
   row, just the title, the command, and buttons big enough for a thumb. */
.wnote {
  height: 100%; display: flex; flex-direction: column;
  color: var(--device-fg);
  opacity: 0; transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease-enter),
              transform var(--dur-slow) var(--ease-enter);
}
.wnote.is-in { opacity: 1; transform: none; }
/* With no buttons there is nothing to push the copy up, and a watch face is
   small enough that the leftover black reads as an error. Centre it. */
.wnote:has(> .wnote__acts[hidden]),
.wnote:not(:has(> .wnote__acts)) { justify-content: center; }
.wnote__app {
  display: flex; align-items: center; gap: 0.45em; margin: 0 0 0.5em;
  font-size: 0.62em; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--device-fg-dim);
}
.wnote__dot {
  width: 0.8em; height: 0.8em; border-radius: 0.25em; background: var(--device-ok);
}
.wnote__title {
  margin: 0 0 0.35em; font-size: 1.02em; font-weight: 600;
  letter-spacing: var(--track-title); line-height: 1.2;
}
.wnote__body {
  margin: 0; font-size: 0.8em; line-height: 1.35; color: var(--device-fg-dim);
}
.wnote__cmd {
  margin: 0.5em 0 0; font-family: var(--font-mono); font-size: 0.72em;
  letter-spacing: var(--track-mono); color: var(--device-fg);
  background: var(--device-fill); border-radius: var(--radius-sm);
  padding: 0.4em 0.5em; word-break: break-all;
}
.wnote__acts { margin-top: auto; padding-top: 0.5em; display: grid; gap: 0.3em; }
.wnote__act {
  padding: 0.42em; font: inherit; font-size: 0.72em;
  border: 0; border-radius: var(--radius-pill);
  background: var(--device-fill); color: #fff; cursor: pointer;
}
.wnote__act--ok { background: color-mix(in oklab, var(--device-ok) 42%, #000); }

.wnote[data-state="ok"]      .wnote__dot   { background: var(--device-ok); }
.wnote[data-state="blocked"] .wnote__dot   { background: var(--device-blocked); }
.wnote[data-state="fail"]    .wnote__dot   { background: var(--device-fail); }
.wnote[data-state="blocked"] .wnote__title { color: var(--device-blocked); }
.wnote[data-state="fail"]    .wnote__title { color: var(--device-fail); }

/* ── the cluster on smaller screens ───────────────────────────────────── */
@media (max-width: 900px) {
  .hero__in { grid-template-columns: 1fr; gap: var(--s8); }
  .hero__art { justify-self: center; }
  /* Stacked, the strip lands under the phone rather than under the terminal,
     so it is no longer a caption for anything — centre it and give it room.
     Qualified with .hero because the base .worksWith rule sets `margin: 0`
     and is declared LATER in this file; at equal specificity it would win. */
  .hero .worksWith { justify-content: center; margin-top: var(--s9); }
}
@media (max-width: 420px) {
  .devices { width: 302px; padding-left: 100px; }
  .iphone { width: 202px; border-radius: 32px; padding: 7px; }
  .iphone__screen { border-radius: 26px; padding: 32px 10px 8px; }
  .iphone__island { width: 62px; height: 19px; }
  .lock__time { font-size: 2.75rem; }
  .iphone__btn--action { top: 74px; height: 20px; }
  .iphone__btn--volup  { top: 107px; height: 34px; }
  .iphone__btn--voldn  { top: 149px; height: 34px; }
  .iphone__btn--power  { top: 121px; height: 52px; }
  .iphone__btn--cam    { top: 188px; height: 23px; }
  .awatch { --w: 114px; }
}

/* the notification — the only element in the system allowed a shadow */
.note {
  /* `color` is inherited as a resolved value, so the token overrides on
     .iphone__screen do not reach it — it has to re-read --ink here or the
     title goes light-on-white when the page is in dark mode. */
  color: var(--ink);
  background: var(--paper-rise); border-radius: var(--radius-lg);
  padding: var(--s3) var(--s4) var(--s4);
  box-shadow: var(--shadow-notification);
  opacity: 0; transform: translateY(-14px) scale(0.96);
  transition: opacity var(--dur) var(--ease-enter), transform var(--dur-slow) var(--ease-enter);
}
.note.is-in { opacity: 1; transform: none; }
.note__head { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.note__icon {
  width: 18px; height: 18px; border-radius: 5px; background: var(--ok);
  display: grid; place-items: center;
}
.note__app { font-size: var(--size-micro); color: var(--ink-52); text-transform: uppercase; letter-spacing: 0.06em; }
.note__ago { margin-left: auto; font-size: var(--size-micro); color: var(--ink-38); }
.note__title { margin: 0 0 var(--s1); font-size: var(--size-small); font-weight: 600; letter-spacing: var(--track-title); }
.note__body  { margin: 0; font-size: var(--size-small); color: var(--ink-72); }
.note__meta  { margin: var(--s2) 0 0; font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-38); }
.note__actions { display: flex; gap: var(--s2); margin-top: var(--s3); }
.note__act {
  flex: 1; padding: var(--s2); font: inherit; font-size: var(--size-micro);
  border: var(--hairline); border-radius: var(--radius-sm);
  background: var(--ink-04); color: var(--ink); cursor: pointer;
}
.note__act--deny { color: var(--fail); }

/* state theming of the notification, driven by JS */
.note[data-state="ok"]      .note__icon { background: var(--ok); }
.note[data-state="blocked"] .note__icon { background: var(--blocked); }
.note[data-state="fail"]    .note__icon { background: var(--fail); }

/* ── works-with strip ─────────────────────────────────────────────────── */
.worksWith {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--s5);
  padding: 0; margin: 0;
  color: var(--ink-38); font-size: var(--size-small);
}

/* ── sections ─────────────────────────────────────────────────────────── */
.section { padding: var(--s10) 0; border-top: var(--hairline); }
.section--sunk { background: var(--paper-sunk); }

.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); margin-top: var(--s7); }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5); margin-top: var(--s7); }
@media (max-width: 860px) { .grid3, .grid2 { grid-template-columns: 1fr; } }

.card {
  background: var(--paper-rise); border: var(--hairline);
  border-radius: var(--radius-lg); padding: var(--s6);
}
.card h3 { margin: var(--s4) 0 var(--s2); font-size: var(--size-lead); font-weight: 500; letter-spacing: var(--track-title); }
.card p  { margin: 0; color: var(--ink-72); font-size: var(--size-small); }

.chip {
  display: inline-block; padding: var(--s1) var(--s3);
  border-radius: var(--radius-pill); font-family: var(--font-mono);
  font-size: var(--size-micro); letter-spacing: 0.02em;
}
.chip--ok      { background: var(--ok-fill);      color: var(--ok); }
.chip--blocked { background: var(--blocked-fill); color: var(--blocked); }
.chip--fail    { background: var(--fail-fill);    color: var(--fail); }

/* ── quiet meter ──────────────────────────────────────────────────────── */
.meter {
  margin-top: var(--s7); padding: var(--s6);
  background: var(--paper-rise); border: var(--hairline); border-radius: var(--radius-lg);
}
.meter__row { display: flex; justify-content: space-between; font-size: var(--size-small); color: var(--ink-52); }
.meter__v { font-family: var(--font-mono); color: var(--ink); }
.meter__bar { display: flex; height: 10px; border-radius: var(--radius-pill); overflow: hidden; margin: var(--s3) 0; }
.meter__bar i { background: var(--ink-14); }
.meter__bar b { background: var(--ok); }
.meter__legend { display: flex; flex-wrap: wrap; gap: var(--s5); font-size: var(--size-small); color: var(--ink-52); }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: var(--s2); }
.sw--quiet { background: var(--ink-14); }
.sw--sent  { background: var(--ok); }

/* ── split (watch section) ────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 320px; gap: var(--s8); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split__art { justify-self: center; } }

.ticks { list-style: none; padding: 0; margin: var(--s5) 0 0; }
.ticks li { position: relative; padding-left: var(--s5); margin-bottom: var(--s3); color: var(--ink-72); font-size: var(--size-small); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
}

/* The section's own Watch is the same component, scaled up. It is static —
   the hero already shows one arriving — and it carries the worst case the
   product can produce: a two-line command AND three buttons. That does not
   fit a 46mm screen at the hero's type scale, so this instance tightens the
   stack rather than letting anything run off the glass. Truncating the
   command is the one thing not allowed: the page promises you see all of it.  */
.split__art .awatch { --w: 232px; margin: var(--s7) auto; }
.split__art .wnote  { opacity: 1; transform: none; }
.split__art .wnote__title { font-size: 0.92em; }
.split__art .wnote__cmd   { font-size: 0.64em; }
.split__art .wnote__acts  { gap: 0.28em; padding-top: 0.45em; }
.split__art .wnote__act   { font-size: 0.68em; padding: 0.36em; }

/* ── code block ───────────────────────────────────────────────────────── */
.code {
  background: var(--paper-rise); border: var(--hairline); border-radius: var(--radius);
  padding: var(--s5); overflow-x: auto; margin: 0;
  font-family: var(--font-mono); font-size: var(--size-small);
  line-height: 1.7; color: var(--ink-72);
}

/* ── pricing ──────────────────────────────────────────────────────────── */
.card--price { display: flex; flex-direction: column; }
.card--accent { border-color: var(--ink-38); }
.price__name { margin: 0; font-size: var(--size-small); text-transform: lowercase; color: var(--ink-52); font-weight: 500; letter-spacing: var(--track-body); }
.price__amt  { margin: var(--s2) 0 var(--s4); font-size: var(--size-title); letter-spacing: var(--track-display); font-weight: 500; }
.price__amt span { font-size: var(--size-body); color: var(--ink-38); letter-spacing: var(--track-body); }
.card--price .btn, .card--price .btn--ghost { margin-top: auto; align-self: flex-start; }
.card--price .ticks { margin-bottom: var(--s6); }

/* ── faq ──────────────────────────────────────────────────────────────── */
.faq { margin: var(--s7) 0 0; }
.faq dt { font-weight: 500; letter-spacing: var(--track-title); padding-top: var(--s5); border-top: var(--hairline); }
.faq dd { margin: var(--s2) 0 var(--s5); color: var(--ink-72); font-size: var(--size-small); max-width: var(--measure); }

/* ── close + footer ───────────────────────────────────────────────────── */
.close { text-align: center; }
.close .display { margin-bottom: var(--s7); }

.foot { border-top: var(--hairline); padding: var(--s7) 0; }
.foot__in { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }
.foot__links { display: flex; gap: var(--s5); }
.foot__links a { color: var(--ink-52); text-decoration: none; font-size: var(--size-small); }
.foot__links a:hover { color: var(--ink); }
.foot__note { margin-left: auto; color: var(--ink-38); font-size: var(--size-small); }
@media (max-width: 720px) { .foot__note { margin-left: 0; width: 100%; } }

/* ── focus ────────────────────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--ok); outline-offset: 3px; border-radius: var(--radius-sm); }

/* ── numbered setup steps ─────────────────────────────────────────────── */
.steps { list-style: none; counter-reset: step; padding: 0; margin: var(--s7) 0 0; }
.steps li {
  counter-increment: step; position: relative;
  padding-left: calc(var(--s7) + var(--s2)); padding-bottom: var(--s7);
  border-left: var(--hairline); margin-left: 17px;
}
.steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps li::before {
  content: counter(step); position: absolute; left: -17px; top: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--ink-14); color: var(--ink);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: var(--size-small);
}
.steps h3 { margin: var(--s1) 0 var(--s2); font-size: var(--size-lead); font-weight: 500; letter-spacing: var(--track-title); }
.steps p { margin: 0 0 var(--s4); color: var(--ink-72); font-size: var(--size-small); max-width: var(--measure); }
.steps .code { margin: 0; }

/* Secondary hero line — quieter than the lead, still above the fold. */