/* ─────────────────────────────────────────────────────────────────────────────
   Tralupo product site — the site layer.

   Consumes the vendored Organic tokens in organic.css. Every colour, radius,
   space and shadow comes from a var(); the only additions here are web-scale
   type (the app's 44px display is a phone size, not a desktop one), layout,
   and the motion vocabulary ported from apps/mobile/src/ui/motion.ts.

   Semantic accent contract — binding, not styling:
     terracotta  --color-accent    = actions and changes
     sage        --color-accent-2  = kept, safe, locked, unchanged
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* layout */
  --wrap: 1180px;
  --gutter: 20px;
  --section-y: clamp(76px, 9vw, 132px);

  /* web type scale — the sheet's scale plus a display clamp for the hero */
  --fs-display: clamp(42px, 7.4vw, 78px);
  --fs-h2: clamp(29px, 4.2vw, 46px);
  --fs-h3: clamp(21px, 2.3vw, 28px);
  --fs-lead: clamp(16.5px, 1.45vw, 20px);

  /* motion — verbatim from the app's motion.ts */
  --ease-soft: cubic-bezier(0.22, 0.9, 0.28, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-glide: cubic-bezier(0.4, 0, 0.2, 1);
  --d-fade: 150ms;
  --d-chip: 160ms;
  --d-fold: 220ms;
  --d-swap: 240ms;
  --d-lock: 260ms;
  --d-enter: 300ms;
  --d-enter-lg: 400ms;
  --d-container: 440ms;
  --d-stagger: 60ms;

  /* derived */
  --radius-card: calc(
    var(--radius-lg) * 1.15
  ); /* ≈32 — the over-rounded look is deliberate */
  --radius-row: 22px;
  --ink-55: color-mix(in srgb, var(--color-text) 55%, transparent);
  --ink-60: color-mix(in srgb, var(--color-text) 60%, transparent);
  --ink-70: color-mix(in srgb, var(--color-text) 70%, transparent);
}

@media (min-width: 720px) {
  :root {
    --gutter: 28px;
  }
}
@media (min-width: 1080px) {
  :root {
    --gutter: 40px;
  }
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ── primitives ───────────────────────────────────────────────────────────── */

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

.section {
  position: relative;
  padding-block: var(--section-y);
}
.section--band {
  background: var(--color-neutral-100);
}
.section--tight {
  padding-block: clamp(56px, 6vw, 88px);
}

.kicker {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11.5px;
  line-height: 16px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  line-height: 15px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  margin-bottom: 8px;
}

.display {
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -0.022em;
  margin: 0;
}
.h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0;
}
.h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.14;
  letter-spacing: -0.012em;
  margin: 0;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-70);
  margin: 0;
}
.muted {
  color: var(--ink-60);
}
.small {
  font-size: 13px;
  line-height: 19px;
}
.tiny {
  font-size: 11.5px;
  line-height: 16px;
  color: var(--color-neutral-600);
}

/* body copy in terracotta must use the deep ramp step — the base accent on this
   ground is tuned to 3:1, enough for chrome and large text, not for paragraphs */
.accent-text {
  color: var(--color-accent-700);
}
.sage-text {
  color: var(--color-accent-2-700);
}

.section__head {
  max-width: 46rem;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.section__head .lead {
  margin-top: var(--space-3);
  max-width: 40rem;
}

.stack {
  display: flex;
  flex-direction: column;
}
.stack-2 {
  gap: var(--space-2);
}
.stack-3 {
  gap: var(--space-3);
}
.stack-4 {
  gap: var(--space-4);
}
.stack-6 {
  gap: var(--space-6);
}
.row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ── decoration: circles and morphing blobs ───────────────────────────────── */

.deco {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.circle {
  position: absolute;
  border-radius: 999px;
}
.blob {
  position: absolute;
  border-radius: 62% 38% 46% 54% / 60% 55% 45% 40%;
  animation: blobMorph var(--blob-dur, 7s) var(--ease-glide) infinite;
}
.blob--rev {
  animation-direction: reverse;
}

@keyframes blobMorph {
  0% {
    border-radius: 62% 38% 46% 54% / 60% 55% 45% 40%;
    transform: rotate(0deg) scale(1);
  }
  33% {
    border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
    transform: rotate(120deg) scale(1.04);
  }
  66% {
    border-radius: 55% 45% 37% 63% / 52% 62% 38% 48%;
    transform: rotate(240deg) scale(0.97);
  }
  100% {
    border-radius: 62% 38% 46% 54% / 60% 55% 45% 40%;
    transform: rotate(360deg) scale(1);
  }
}

/* the gentle non-rotating drift used for small icon patches */
@keyframes blobDrift {
  0% {
    border-radius: 62% 38% 46% 54% / 60% 55% 45% 40%;
    transform: rotate(-3deg) scale(1);
  }
  100% {
    border-radius: 44% 56% 58% 42% / 47% 52% 48% 53%;
    transform: rotate(3deg) scale(1.04);
  }
}
.patch {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 58% 42% 47% 53% / 52% 48% 52% 48%;
  animation: blobDrift 7s var(--ease-glide) infinite alternate;
}
.patch--sm {
  width: 40px;
  height: 40px;
}
.patch--accent {
  background: var(--color-accent-200);
  color: var(--color-accent-800);
}
.patch--sage {
  background: var(--color-accent-2-200);
  color: var(--color-accent-2-800);
}
.patch--neutral {
  background: var(--color-neutral-200);
  color: var(--color-neutral-700);
}
.patch--solid {
  background: var(--color-accent);
  color: var(--color-bg);
}

/* the marching dashed route — RouteMark's signature, reused everywhere */
@keyframes routeDash {
  to {
    stroke-dashoffset: -7.6;
  }
}
.route-dash {
  animation: routeDash 1.6s linear infinite;
}

/* ── buttons: site-scale on top of the sheet's pills ─────────────────────── */

.btn-lg {
  font-size: 19px;
  padding: 15px 26px;
  gap: 9px;
}
.btn-primary.btn-lg {
  box-shadow: var(--shadow-md);
}
.btn-primary {
  transition:
    background var(--d-chip) var(--ease-soft),
    transform var(--d-chip) var(--ease-spring);
}
.btn:active {
  transform: scale(0.97);
}
.btn-ghost.btn-lg {
  font-size: 17px;
  color: var(--color-accent-700);
}

.badge-link {
  display: inline-block;
  line-height: 0;
  border-radius: 9px;
  transition:
    transform var(--d-chip) var(--ease-spring),
    opacity var(--d-chip) linear;
}
.badge-link img {
  width: 176px;
  height: auto;
}
.badge-link:hover {
  transform: translateY(-1px);
  opacity: 0.88;
}
.badge-link--sm img {
  width: 132px;
}

/* pill facts under the hero CTA */
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.facts li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  line-height: 17px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--ink-70);
}
.facts svg {
  color: var(--color-accent-2-700);
  flex: none;
}

/* ── nav ──────────────────────────────────────────────────────────────────── */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  transition: box-shadow var(--d-fade) linear;
}
.site-nav[data-scrolled] {
  box-shadow: 0 1px 0 var(--color-divider);
}
.site-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 68px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  margin-right: auto;
}
.brand__mark {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--color-accent);
  border-radius: 58% 42% 47% 53% / 52% 48% 52% 48%;
  animation: blobDrift 7s var(--ease-glide) infinite alternate;
}
.brand__name {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 21px;
  letter-spacing: -0.01em;
}
.site-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.site-nav__links a {
  color: var(--ink-70);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: color var(--d-chip) linear;
}
.site-nav__links a:hover {
  color: var(--color-accent-700);
}
@media (max-width: 899px) {
  .site-nav__links {
    display: none;
  }
}

/* ── hero ─────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  padding-block: clamp(48px, 6vw, 88px) var(--section-y);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  gap: clamp(44px, 5vw, 64px);
  align-items: center;
}
@media (min-width: 980px) {
  .hero__grid {
    grid-template-columns: 1.02fr 0.98fr;
    gap: clamp(40px, 4vw, 72px);
  }
}

.hero__copy {
  position: relative;
  z-index: 1;
  max-width: 34rem;
}
.hero__copy .display {
  margin-bottom: var(--space-4);
}
.hero__north {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.45;
  color: var(--ink-70);
  margin: 0 0 var(--space-6);
  max-width: 30rem;
}
.hero__north b {
  font-weight: 700;
  color: var(--color-text);
}
.hero__cta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.hero__media {
  position: relative;
}
/* The hero loop is cropped to the device itself, so it needs no panel behind
   it — just the phone's own corner radius and an ink-tinted float shadow. The
   crop is 314x634, hugging the bezel with its antialiased outer pixel intact on
   all four sides, and the device's corner radius measures 41px on that box —
   so 41/314 ≈ 13.06% of the displayed width. Match it: too small leaves the
   source's cream showing in the corners, too large clips the bezel. */
/* The shadow is a box-shadow on the wrapper, not a filter on the video: a
   drop-shadow filter over a playing video is recomputed for every video frame
   (30fps across 628x1268 with a 44px blur), while a box-shadow on an opaque
   rounded rect is painted once and cached. The result is identical — the video
   is clipped to the same radius, so the two shapes coincide. */
.hero__phone {
  --pw: clamp(244px, 27vw, 322px);
  position: relative;
  z-index: 1;
  width: var(--pw);
  margin-inline: auto;
  border-radius: calc(var(--pw) * 0.1306);
  box-shadow:
    0 2px 5px rgba(46, 43, 37, 0.16),
    0 22px 44px rgba(46, 43, 37, 0.24);
}
.hero__phone video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}
/* the sign-in screen's construction: a sage circle bleeding off behind the
   device's upper right, a peach one tucked under its lower left */
.hero__deco-sage {
  width: 54%;
  padding-top: 54%;
  background: var(--color-accent-2-200);
  top: 5%;
  right: -6%;
}
.hero__deco-peach {
  width: 31%;
  padding-top: 31%;
  background: var(--color-accent-200);
  bottom: 7%;
  left: 0%;
}
.hero__caption {
  margin-top: var(--space-3);
  text-align: right;
}

/* ── the diff — the hero moment ───────────────────────────────────────────── */

.diff-layout {
  display: grid;
  gap: clamp(36px, 4vw, 60px);
  align-items: start;
}
@media (min-width: 1000px) {
  .diff-layout {
    grid-template-columns: 0.92fr 1.08fr;
    gap: clamp(48px, 5vw, 84px);
  }
}

.diff {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-card);
  padding: clamp(var(--space-4), 3vw, var(--space-8));
  box-shadow: var(--shadow-lg);
}
.diff__title {
  margin: 0 0 var(--space-6);
  font-size: clamp(21px, 2vw, 26px);
}
.diff__group + .diff__group {
  margin-top: var(--space-4);
}
.diff__label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.diff__group--kept .diff__label {
  color: var(--color-accent-2-700);
}
.diff__group--moved .diff__label {
  color: var(--color-accent-700);
}
.diff__group--removed .diff__label {
  color: var(--color-neutral-600);
}

.diff__row {
  display: flex;
  align-items: center;
  gap: 11px;
  border-radius: var(--radius-row);
  padding: 13px 16px;
  background: var(--color-neutral-100);
}
.diff__row + .diff__row {
  margin-top: 7px;
}
.diff__row--kept {
  background: var(--color-accent-2-100);
}
.diff__name {
  font-weight: 700;
  font-size: 14.5px;
  line-height: 20px;
}
.diff__meta {
  margin-left: auto;
  font-size: 11.5px;
  line-height: 16px;
  color: var(--ink-55);
  white-space: nowrap;
}
.diff__check {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--color-accent-2-500);
  color: var(--color-bg);
}
.diff__lock {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--color-accent);
  color: var(--color-bg);
}

/* the moved card: old value leaves before its replacement lands, in the SAME slot */
.diff__card {
  border-radius: var(--radius-row);
  padding: 15px 16px;
  background: var(--color-accent-100);
  box-shadow: inset 0 0 0 1.5px
    color-mix(in srgb, var(--color-accent) 35%, transparent);
}
.diff__cardhead {
  display: flex;
  align-items: center;
  gap: 10px;
}
.diff__slot {
  display: grid;
  margin-top: 9px;
  min-height: 24px;
}
.diff__old,
.diff__new {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.diff__old {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-55);
  position: relative;
}
.diff__old::after {
  content: "";
  position: absolute;
  left: 0;
  top: 52%;
  height: 1.5px;
  width: 0;
  background: var(--color-accent-700);
}
.diff__new {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--color-accent-800);
  opacity: 0;
}
.diff__pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-bg);
}
.diff__row--drop {
  transition: opacity var(--d-fold) linear;
}
.diff__strike {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--color-neutral-500);
}

.diff__why {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: var(--space-4) 0 0;
  border-radius: var(--radius-row);
  padding: 13px 15px;
  background: var(--color-accent-2-100);
  font-size: 13px;
  line-height: 19px;
  color: var(--color-accent-2-800);
}
.diff__why svg {
  flex: none;
  margin-top: 2px;
}
.diff__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}

.diff__replay {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--color-accent-700);
  background: var(--color-bg);
  border: 0;
  border-radius: 999px;
  padding: 7px 13px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform var(--d-chip) var(--ease-spring);
}
.diff__replay:hover {
  transform: translateY(-1px);
}
.diff__replay:active {
  transform: scale(0.95);
}

/* At rest the panel shows its finished state — it is legible with JS disabled.
   .is-playing replays the app's own 1.6s choreography: reassurance, then news. */
.diff.is-playing .diff__group--kept .diff__row:nth-child(2) {
  animation: diffLand var(--d-enter) var(--ease-soft) both;
}
.diff.is-playing .diff__group--kept .diff__row:nth-child(3) {
  animation: diffLand var(--d-enter) var(--ease-soft) 80ms both;
}
.diff.is-playing .diff__group--moved {
  animation: diffLand var(--d-enter) var(--ease-soft) 340ms both;
}
.diff.is-playing .diff__old::after {
  animation: diffStrike var(--d-swap) var(--ease-soft) 480ms both;
}
.diff.is-playing .diff__old {
  animation: diffLeave var(--d-swap) var(--ease-soft) 700ms both;
}
.diff.is-playing .diff__new {
  animation: diffArrive var(--d-swap) var(--ease-soft) 820ms both;
}
.diff.is-playing .diff__pill {
  animation: diffPill var(--d-chip) var(--ease-spring) 900ms both;
}
.diff.is-playing .diff__group--removed {
  animation: diffLand var(--d-enter) var(--ease-soft) 1060ms both;
}
.diff.is-playing .diff__row--drop {
  animation: diffFade var(--d-fold) linear 1240ms both;
}
.diff.is-playing .diff__why {
  animation: diffRise var(--d-enter) var(--ease-soft) 1380ms both;
}
.diff.is-playing .diff__actions {
  animation: diffRise var(--d-enter) var(--ease-soft) 1500ms both;
}

@keyframes diffLand {
  from {
    opacity: 0;
    transform: translateX(-14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes diffRise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes diffStrike {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes diffLeave {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateY(-11px);
  }
}
@keyframes diffArrive {
  from {
    opacity: 0;
    transform: translateY(13px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes diffPill {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes diffFade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.55;
  }
}

/* resting state mirrors the end of the animation */
.diff .diff__old {
  opacity: 0;
}
.diff .diff__new {
  opacity: 1;
}
.diff .diff__row--drop {
  opacity: 0.55;
}
.diff.is-playing .diff__old {
  opacity: 1;
}

/* ── the lock ─────────────────────────────────────────────────────────────── */

.lock-layout {
  display: grid;
  gap: clamp(36px, 4vw, 60px);
  align-items: center;
}
@media (min-width: 1000px) {
  .lock-layout {
    grid-template-columns: 1.06fr 0.94fr;
    gap: clamp(48px, 5vw, 80px);
  }
}

.lockdemo {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.lockdemo__hint {
  font-size: 12.5px;
  line-height: 17px;
  color: var(--color-neutral-600);
  text-align: center;
  margin-top: var(--space-2);
}

.stopcard {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  text-align: left;
  background: var(--color-surface);
  border: 0;
  border-radius: var(--radius-row);
  padding: 15px 16px;
  box-shadow: var(--shadow-sm);
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: box-shadow var(--d-lock) var(--ease-soft);
}
.stopcard__time {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-60);
  width: 44px;
  flex: none;
}
.stopcard__body {
  flex: 1;
  min-width: 0;
}
.stopcard__name {
  font-weight: 700;
  font-size: 14.5px;
  line-height: 20px;
}
.stopcard__meta {
  font-size: 11.5px;
  line-height: 16px;
  color: var(--ink-60);
}
.stopcard__lock {
  position: relative;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--color-neutral-200);
  color: var(--color-neutral-600);
  transition:
    background var(--d-chip) linear,
    color var(--d-chip) linear;
}
.stopcard[aria-pressed="true"] {
  box-shadow:
    var(--shadow-sm),
    inset 0 0 0 2px var(--color-accent);
}
.stopcard[aria-pressed="true"] .stopcard__lock {
  background: var(--color-accent);
  color: var(--color-bg);
}
.stopcard.is-firing .stopcard__lock {
  animation: lockPress var(--d-lock) var(--ease-spring);
}
/* the sage ripple: "kept / safe" confirming the promise */
.stopcard__lock::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--color-accent-2-400);
  opacity: 0;
  transform: scale(1);
}
.stopcard.is-firing .stopcard__lock::after {
  animation: lockRipple 380ms var(--ease-soft);
}
.stopcard.is-refusing {
  animation: lockRefuse 90ms linear 2;
}

@keyframes lockPress {
  0% {
    transform: scale(1);
  }
  38% {
    transform: scale(0.86);
  }
  72% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lockRipple {
  from {
    opacity: 0.5;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(2.6);
  }
}
@keyframes lockRefuse {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(3px);
  }
  100% {
    transform: translateX(0);
  }
}

/* ── the loop trail ───────────────────────────────────────────────────────── */

.trail {
  display: grid;
  gap: var(--space-4);
  counter-reset: stage;
}
@media (min-width: 760px) {
  .trail {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1080px) {
  .trail {
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-3);
  }
}

.stage {
  position: relative;
  padding-top: var(--space-4);
}
/* the marching dot trail between stages — the RouteMark motif, scaled up */
.stage::before {
  content: "";
  position: absolute;
  /* the 54px dot sits below .stage's top padding, so its centre is at
     padding + 27px; offset by half the line's own 4px height so the line is
     centred on the blobs rather than grazing their tops */
  top: calc(var(--space-4) + 25px);
  left: 56px;
  right: -14px;
  height: 4px;
  background-image: radial-gradient(
    circle,
    var(--color-neutral-400) 1.7px,
    transparent 1.8px
  );
  background-size: 11px 4px;
  background-repeat: repeat-x;
  animation: trailMarch 1.6s linear infinite;
}
@media (max-width: 1079px) {
  .stage::before {
    display: none;
  }
}
.trail .stage:last-child::before {
  display: none;
}
@keyframes trailMarch {
  to {
    background-position-x: 11px;
  }
}

.stage__dot {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 58% 42% 47% 53% / 52% 48% 52% 48%;
  animation: blobDrift 7s var(--ease-glide) infinite alternate;
  margin-bottom: var(--space-3);
}
.stage__name {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 19px;
  margin-bottom: 4px;
}
.stage__body {
  font-size: 13px;
  line-height: 19px;
  color: var(--ink-60);
  margin: 0;
}

/* ── timeline: "why it's here" ────────────────────────────────────────────── */

.timeline {
  max-width: 42rem;
}
.tl-row {
  display: flex;
  gap: 13px;
}
.tl-gutter {
  width: 46px;
  flex: none;
  padding-top: 17px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-60);
}
.tl-card {
  flex: 1;
  min-width: 0;
  background: var(--color-surface);
  border-radius: var(--radius-row);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.tl-name {
  font-weight: 700;
  font-size: 15px;
  line-height: 21px;
}
.tl-meta {
  font-size: 11.5px;
  line-height: 16px;
  color: var(--ink-60);
  margin-top: 1px;
}
.tl-why {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 19px;
  color: var(--color-accent-2-700);
  margin-top: 9px;
}
.tl-why svg {
  flex: none;
  margin-top: 3px;
}
.tl-connector {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: 59px;
  padding-block: 4px;
}
.tl-connector span {
  width: 1.5px;
  height: 15px;
  background: var(--color-divider);
}
.tl-connector em {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-style: normal;
  font-size: 11.5px;
  color: var(--ink-55);
}

/* ── profile playback ─────────────────────────────────────────────────────── */

.playback {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  padding: clamp(var(--space-4), 2.4vw, var(--space-6));
  box-shadow: var(--shadow-md);
}
.pb-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.pb-row + .pb-row {
  margin-top: var(--space-4);
}
.pb-badge {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 999px;
  display: grid;
  place-items: center;
}
.pb-title {
  font-weight: 800;
  font-size: 14.5px;
  line-height: 20px;
}
.pb-sub {
  font-size: 12.5px;
  line-height: 18px;
  color: var(--color-neutral-600);
}
.pb-foot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-4);
  margin-left: 52px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-accent-700);
}

/* ── the loader: "watch it think" ─────────────────────────────────────────── */

.think-layout {
  display: grid;
  gap: clamp(40px, 5vw, 68px);
  align-items: center;
}
@media (min-width: 900px) {
  .think-layout {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

.loader {
  position: relative;
  width: 232px;
  height: 232px;
  margin-inline: auto;
  display: grid;
  place-items: center;
}
.loader__blob {
  position: absolute;
}
.loader__blob--outer {
  width: 172px;
  height: 172px;
  background: var(--color-accent-200);
  --blob-dur: 7s;
}
.loader__blob--inner {
  width: 128px;
  height: 128px;
  background: var(--color-accent);
  --blob-dur: 5.5s;
}
.loader__orbit {
  position: absolute;
  width: 182px;
  height: 182px;
  animation: orbit 3.6s linear infinite;
}
.loader__dot {
  position: absolute;
  top: -5px;
  left: 50%;
  margin-left: -5px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--color-accent-2-600);
}
.loader__mark {
  position: relative;
  z-index: 2;
  width: 62px;
  height: 62px;
}
@keyframes orbit {
  to {
    transform: rotate(360deg);
  }
}

.check {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.check li {
  display: flex;
  align-items: center;
  gap: 11px;
  opacity: 0.5;
  transition: opacity var(--d-fade) linear;
}
.check li[data-state="done"],
.check li[data-state="active"] {
  opacity: 1;
}
.check__badge {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 2px solid var(--color-neutral-400);
  color: transparent;
  transition:
    background var(--d-chip) linear,
    border-color var(--d-chip) linear;
}
.check li[data-state="done"] .check__badge {
  background: var(--color-accent-2-500);
  border-color: transparent;
  color: var(--color-bg);
}
.check li[data-state="active"] .check__badge {
  background: var(--color-accent);
  border-color: transparent;
  color: var(--color-bg);
  animation: checkPulse 1.4s var(--ease-soft) infinite alternate;
}
.check__label {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-neutral-600);
}
.check li[data-state="done"] .check__label {
  color: var(--color-neutral-700);
}
.check li[data-state="active"] .check__label {
  color: var(--color-text);
  font-weight: 700;
}
@keyframes checkPulse {
  from {
    opacity: 0.35;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.progress {
  height: 8px;
  border-radius: 999px;
  background: var(--color-neutral-200);
  overflow: hidden;
  margin-top: var(--space-6);
}
.progress__fill {
  height: 100%;
  width: 10%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--color-accent-400),
    var(--color-accent)
  );
  transition: width 500ms var(--ease-glide);
}

/* ── feature grid ─────────────────────────────────────────────────────────── */

.fgrid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}
.fcard {
  gap: var(--space-3);
  padding: clamp(var(--space-4), 2vw, var(--space-6));
  box-shadow: var(--shadow-sm);
}
.fcard h3 {
  margin: 0;
  font-size: 19px;
}
.fcard p {
  margin: 0;
  font-size: 13.5px;
  line-height: 20px;
  color: var(--ink-70);
}

/* ── straight answers ─────────────────────────────────────────────────────── */

.answers {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.answer {
  padding: clamp(var(--space-4), 2vw, var(--space-6));
  border-radius: var(--radius-card);
}
.answer--sage {
  background: var(--color-accent-2-100);
}
.answer--accent {
  background: var(--color-accent-100);
}
.answer--neutral {
  background: var(--color-neutral-200);
}
.answer h3 {
  margin: 0 0 var(--space-2);
  font-size: 19px;
}
.answer p {
  margin: 0;
  font-size: 13.5px;
  line-height: 20px;
}
.answer--sage p {
  color: var(--color-accent-2-800);
}
.answer--accent p {
  color: var(--color-accent-800);
}
.answer--neutral p {
  color: var(--color-neutral-800);
}

/* ── phone mockups (triptych) ─────────────────────────────────────────────── */

.triptych {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(-40px, -2vw, 16px);
}
.phone {
  --scale: 0.58;
  width: calc(402px * var(--scale));
  height: calc(874px * var(--scale));
  flex: none;
}
.phone__frame {
  width: 402px;
  height: 874px;
  transform: scale(var(--scale));
  transform-origin: top left;
  position: relative;
  overflow: hidden;
  border-radius: 48px;
  background: var(--color-bg);
  box-shadow:
    0 40px 80px color-mix(in srgb, var(--color-neutral-900) 18%, transparent),
    0 0 0 1px color-mix(in srgb, var(--color-neutral-900) 12%, transparent);
}
.phone__island {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 126px;
  height: 37px;
  border-radius: 24px;
  background: #000;
  z-index: 5;
}
.phone__home {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 139px;
  height: 5px;
  border-radius: 100px;
  background: color-mix(in srgb, var(--color-neutral-900) 25%, transparent);
  z-index: 6;
}
.phone__screen {
  position: absolute;
  inset: 0;
  padding: 62px 20px 30px;
  overflow: hidden;
}
.phone--mid {
  --scale: 0.66;
  z-index: 2;
}
@media (min-width: 720px) {
  .phone {
    --scale: 0.64;
  }
  .phone--mid {
    --scale: 0.74;
  }
}
@media (max-width: 719px) {
  .triptych {
    gap: 0;
  }
  .triptych .phone:first-child,
  .triptych .phone:last-child {
    display: none;
  }
  .phone--mid {
    --scale: 0.82;
  }
}

.ph-kicker {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--color-accent);
}
.ph-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 30px;
  line-height: 34px;
  margin: 6px 0 0;
}
.ph-sub {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-neutral-700);
  margin: 6px 0 0;
}
.ph-hero-wash {
  position: absolute;
  inset: 0 0 auto;
  height: 150px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-neutral-900) 36%, transparent) 0%,
      color-mix(in srgb, var(--color-accent-300) 50%, transparent) 42%,
      var(--color-bg) 100%
    ),
    var(--color-accent-200);
}
.ph-daypills {
  display: flex;
  gap: 9px;
  margin-top: 16px;
}
.ph-daypill {
  border-radius: 999px;
  padding: 9px 15px;
  background: var(--color-surface);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-neutral-700);
}
.ph-daypill.is-on {
  background: var(--color-accent);
  color: var(--color-neutral-100);
}
.ph-stop {
  display: flex;
  gap: 13px;
  margin-top: 12px;
}
.ph-stop__t {
  width: 44px;
  flex: none;
  padding-top: 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-60);
}
.ph-stop__c {
  flex: 1;
  background: var(--color-surface);
  border-radius: 22px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.ph-stop__n {
  font-weight: 700;
  font-size: 14.5px;
}
.ph-stop__m {
  font-size: 11.5px;
  color: var(--ink-60);
  margin-top: 1px;
}
.ph-stop__w {
  font-size: 11.5px;
  line-height: 16px;
  color: var(--color-accent-2-700);
  margin-top: 5px;
}
.ph-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 40px;
  text-align: center;
}
.ph-tag {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 7px 14px;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent-800);
}
.ph-daycard {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--color-surface);
  border-radius: 22px;
  padding: 9px 13px;
  box-shadow: var(--shadow-sm);
  margin-top: 7px;
}
.ph-daycard__b {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 58% 42% 47% 53% / 52% 48% 52% 48%;
  display: grid;
  place-items: center;
  text-align: center;
}
.ph-daycard__d {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  line-height: 10px;
}
.ph-daycard__n {
  font-family: var(--font-heading);
  font-size: 14px;
  line-height: 17px;
}
.ph-daycard__t {
  font-weight: 800;
  font-size: 13.5px;
  line-height: 18px;
}
.ph-daycard__s {
  font-size: 11.5px;
  line-height: 15px;
  color: var(--color-neutral-600);
}
.ph-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
  margin-left: auto;
}
.ph-bars i {
  width: 4px;
  border-radius: 999px;
  display: block;
}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */

.faq {
  max-width: 46rem;
}
.faq details {
  background: var(--color-surface);
  border-radius: var(--radius-row);
  padding: var(--space-3) var(--space-4);
}
.faq details + details {
  margin-top: 9px;
}
.faq summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 15px;
  line-height: 22px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "";
  margin-left: auto;
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2.75px solid var(--color-accent);
  border-bottom: 2.75px solid var(--color-accent);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--d-fold) var(--ease-soft);
}
.faq details[open] summary::after {
  transform: rotate(225deg) translateY(-2px);
}
.faq details p {
  margin: var(--space-2) 0 0;
  font-size: 13.5px;
  line-height: 20px;
  color: var(--ink-70);
  max-width: 40rem;
}

/* ── closing CTA ──────────────────────────────────────────────────────────── */

.closer {
  position: relative;
  overflow: hidden;
  text-align: left;
}
.closer__inner {
  position: relative;
  z-index: 1;
  max-width: 40rem;
}
.closer__deco-a {
  width: 340px;
  padding-top: 340px;
  background: var(--color-accent-2-200);
  top: -140px;
  right: -90px;
}
.closer__deco-b {
  width: 190px;
  padding-top: 190px;
  background: var(--color-accent-200);
  bottom: -80px;
  right: 120px;
}

/* ── footer ───────────────────────────────────────────────────────────────── */

.site-foot {
  background: var(--color-neutral-900);
  color: var(--color-neutral-200);
  padding-block: clamp(48px, 5vw, 72px) var(--space-6);
}
.site-foot .brand__name {
  color: var(--color-neutral-100);
}
.site-foot__grid {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 760px) {
  .site-foot__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--space-8);
  }
}
.site-foot h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--color-neutral-500);
  margin: 0 0 var(--space-3);
}
.site-foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.site-foot a {
  color: var(--color-neutral-200);
  text-decoration: none;
  font-size: 14px;
}
.site-foot a:hover {
  color: var(--color-accent-300);
  text-decoration: underline;
}
.site-foot p {
  color: var(--color-neutral-400);
  font-size: 13px;
  line-height: 19px;
}
.site-foot__legal {
  margin-top: clamp(36px, 4vw, 56px);
  padding-top: var(--space-4);
  border-top: 1px solid
    color-mix(in srgb, var(--color-neutral-100) 14%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  align-items: center;
  font-size: 12.5px;
  color: var(--color-neutral-500);
}
.site-foot__legal a {
  font-size: 12.5px;
  color: var(--color-neutral-300);
}
.site-foot :focus-visible {
  outline-color: var(--color-accent-300);
}

/* ── legal pages ──────────────────────────────────────────────────────────── */

.legal {
  padding-block: clamp(40px, 5vw, 72px) var(--section-y);
}
.legal__head {
  max-width: 44rem;
  margin-bottom: clamp(36px, 4vw, 56px);
}
.legal__head .display {
  font-size: clamp(34px, 5.4vw, 56px);
}
.legal__updated {
  margin-top: var(--space-3);
  font-size: 13px;
  color: var(--ink-55);
}
.legal__grid {
  display: grid;
  gap: clamp(32px, 4vw, 56px);
}
@media (min-width: 1000px) {
  .legal__grid {
    grid-template-columns: 232px minmax(0, 1fr);
  }
}

.toc {
  align-self: start;
}
@media (min-width: 1000px) {
  .toc {
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 128px);
    overflow-y: auto;
  }
}
.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.toc a {
  display: block;
  text-decoration: none;
  color: var(--ink-70);
  font-size: 13px;
  line-height: 18px;
  padding: 7px 12px;
  border-radius: 999px;
  transition:
    background var(--d-chip) linear,
    color var(--d-chip) linear;
}
.toc a:hover {
  background: var(--color-surface);
  color: var(--color-accent-700);
}
.toc a[aria-current="true"] {
  background: var(--color-accent-100);
  color: var(--color-accent-800);
  font-weight: 700;
}

.prose {
  max-width: 68ch;
}
.prose h2 {
  font-size: clamp(23px, 2.4vw, 29px);
  margin: clamp(40px, 4vw, 56px) 0 var(--space-3);
  scroll-margin-top: 92px;
}
.prose h2:first-child {
  margin-top: 0;
}
.prose h3 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 15.5px;
  line-height: 22px;
  letter-spacing: 0;
  margin: var(--space-6) 0 var(--space-2);
}
.prose p,
.prose li {
  font-size: 15px;
  line-height: 25px;
  color: color-mix(in srgb, var(--color-text) 88%, transparent);
}
.prose ul,
.prose ol {
  padding-left: 22px;
  margin: 0 0 var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.prose li::marker {
  color: var(--color-accent-600);
}
.prose a {
  color: var(--color-accent-700);
  text-decoration: underline;
}
.prose strong {
  font-weight: 800;
}
.prose code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.88em;
  background: var(--color-neutral-200);
  padding: 2px 6px;
  border-radius: 6px;
}
.ph {
  /* an unresolved placeholder — deliberately loud */
  font-weight: 800;
  color: var(--color-accent-800);
  background: var(--color-accent-200);
  padding: 1px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.callout {
  border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-4);
  margin: var(--space-4) 0;
}
.callout > :last-child {
  margin-bottom: 0;
}
.callout--sage {
  background: var(--color-accent-2-100);
}
.callout--sage p,
.callout--sage li {
  color: var(--color-accent-2-800);
}
.callout--accent {
  background: var(--color-accent-100);
}
.callout--accent p,
.callout--accent li {
  color: var(--color-accent-800);
}
.callout--neutral {
  background: var(--color-neutral-200);
}
.callout__label {
  display: block;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.table-scroll {
  overflow-x: auto;
  margin: var(--space-4) 0;
}
.table-scroll .table {
  min-width: 520px;
}
.table-scroll .table td,
.table-scroll .table th {
  font-size: 13.5px;
  line-height: 19px;
}

/* ── reveal on scroll ─────────────────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(16px);
}
.js .reveal {
  transition:
    opacity var(--d-enter) var(--ease-soft),
    transform var(--d-enter) var(--ease-soft);
  transition-delay: calc(var(--i, 0) * var(--d-stagger));
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
html:not(.js) .reveal {
  opacity: 1;
  transform: none;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--color-accent);
  color: var(--color-bg);
  padding: 10px 16px;
  border-radius: 0 0 999px 0;
  font-weight: 700;
  text-decoration: none;
}
.skip:focus {
  left: 0;
}

/* ── reduced motion: every loop renders static, layout unchanged ─────────── */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .diff .diff__old {
    opacity: 0;
  }
  .diff .diff__new {
    opacity: 1;
  }
  .diff__replay {
    display: none;
  }
}

/* ── lock demo: the time swap, and locked stops refusing ─────────────────── */

.stopcard__time {
  display: grid;
}
.stopcard__time .t {
  grid-area: 1 / 1;
}
.stopcard__time .t--late {
  opacity: 0;
}
.stopcard.is-late .t--now {
  animation: diffLeave var(--d-swap) var(--ease-soft) both;
}
.stopcard.is-late .t--late {
  animation: diffArrive var(--d-swap) var(--ease-soft) 120ms both;
}
.stopcard.is-late .stopcard__time {
  color: var(--color-accent-700);
}

.lockdemo__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}
.lockdemo__count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-accent-2-800);
  background: var(--color-accent-2-100);
  border-radius: 999px;
  padding: 7px 14px;
}

@media (prefers-reduced-motion: reduce) {
  .stopcard.is-late .t--now {
    opacity: 0;
  }
  .stopcard.is-late .t--late {
    opacity: 1;
  }
}

/* ── layout corrections ───────────────────────────────────────────────────
   Stacked labels inside mock cards are marked up as spans (so they can live
   inside a <button> or a <span> container); they need to be blocks. */
.stopcard__name,
.stopcard__meta,
.ph-stop__n,
.ph-stop__m,
.ph-stop__w,
.ph-daycard__t,
.ph-daycard__s,
.ph-daycard__d,
.ph-daycard__n {
  display: block;
}

.stopcard__body {
  display: block;
}
.progress__fill {
  display: block;
}

/* the checklist badge swaps its glyph with its state, not just its colour */
.check__badge .ic {
  display: none;
}
.check li[data-state="done"] .check__badge .ic-check {
  display: block;
}
.check li[data-state="active"] .check__badge .ic-moon {
  display: block;
}

/* the lock demo reads as a list, not a banner */
.lockdemo {
  max-width: 470px;
  margin-inline: auto;
  width: 100%;
}

/* a neutral patch on a neutral card needs one more step of separation */
.answer--neutral .patch {
  background: var(--color-neutral-300);
  color: var(--color-neutral-800);
}

/* triptych: a deliberate fan rather than a muddy overlap */
.triptych {
  gap: 0;
  padding-block: var(--space-4);
}
.triptych .phone:first-child {
  transform: rotate(-3.5deg) translate(14px, 26px);
  z-index: 1;
}
.triptych .phone:last-child {
  transform: rotate(3.5deg) translate(-14px, 26px);
  z-index: 1;
}
.triptych .phone--mid {
  z-index: 3;
}

/* hero: let the media panel use the dead space beside the wrap on wide screens */
@media (min-width: 1200px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
  }
}

/* the "now" band on the day screen — sage, because it is reassurance */
.ph-now {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 9px 12px;
  border-radius: 999px;
  background: var(--color-accent-2-100);
}
.ph-now b {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--color-accent-2-500);
  color: var(--color-bg);
}
.ph-now span {
  font-size: 12.5px;
  color: var(--color-accent-2-800);
}
.ph-conn {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 5px 0 0 59px;
}
.ph-conn i {
  width: 1.5px;
  height: 12px;
  background: var(--color-divider);
  display: block;
}
.ph-conn em {
  font-style: normal;
  font-size: 10.5px;
  color: var(--ink-55);
}

/* triptych: fan the side phones out, never over each other's content */
.triptych {
  gap: clamp(6px, 1.2vw, 22px);
  align-items: flex-start;
}
.triptych .phone:first-child {
  transform: rotate(-3.5deg) translateY(28px);
}
.triptych .phone:last-child {
  transform: rotate(3.5deg) translateY(28px);
}

/* the current page in the site nav */
.site-nav__links a[aria-current="page"] {
  color: var(--color-accent-700);
}

/* small screens: a lighter nav */
@media (max-width: 619px) {
  .badge-link--sm img {
    width: 104px;
  }
  .brand__mark {
    width: 34px;
    height: 34px;
  }
  .brand__name {
    font-size: 19px;
  }
  .site-nav__inner {
    min-height: 60px;
  }
  .hero__cta {
    gap: var(--space-3) var(--space-4);
  }
}

/* ── contrast pass ────────────────────────────────────────────────────────
   The Organic readme is explicit: "the accent-to-ground pair is tuned to at
   least 3:1 — enough for icons, large text and interface chrome, not for body
   copy — so for paragraph-size text in the accent use a deep ramp step
   (--color-accent-700 on this ground) rather than the accent itself."
   The same applies to neutral-600 at small sizes. Everything below moves one
   ramp step deeper so small text clears WCAG AA (4.5:1). The phone mockups are
   aria-hidden decoration and deliberately keep the app's own literal values. */

.kicker {
  color: var(--color-accent-700);
}
.eyebrow {
  color: var(--color-neutral-700);
}
.tiny {
  color: var(--color-neutral-700);
}
.muted {
  color: var(--ink-70);
}

.stage__body,
.tl-meta,
.tl-connector em,
.diff__meta,
.diff__old,
.stopcard__meta,
.stopcard__time,
.tl-gutter,
.legal__updated {
  color: var(--ink-70);
}

.pb-sub,
.lockdemo__hint,
.check__label {
  color: var(--color-neutral-700);
}

/* pending checklist rows are signalled by the empty ring, not by dimming the
   label below the contrast floor */
.check li {
  opacity: 0.9;
}
.check li[data-state="done"],
.check li[data-state="active"] {
  opacity: 1;
}

.site-foot__legal {
  color: var(--color-neutral-400);
}
figcaption {
  color: var(--color-neutral-700);
}
.card-meta {
  color: var(--ink-70);
}
.prose .table th {
  color: var(--color-neutral-700);
}

/* links: the deep ramp step, for the same 3:1-vs-4.5:1 reason as the kickers.
   Scoped overrides (.site-foot a, .btn-*, .site-nav__links a) still win. */
a {
  color: var(--color-accent-700);
}

/* ── animation cost ───────────────────────────────────────────────────────
   These shapes animate border-radius, which is a paint property — every frame
   is a re-raster, not a cheap compositor transform. Giving each one its own
   layer and paint containment keeps that raster inside a ~40-170px box instead
   of letting it dirty a larger region. Nothing here changes how they look. */
.patch,
.stage__dot,
.brand__mark,
.loader__blob,
.blob {
  contain: paint;
  will-change: transform, border-radius;
}

/* Each animated element is paused while it is out of view. 28 of them run
   continuously and, at the top of the page, 26 are off screen — so this is
   invisible by construction and removes most of the raster work. */
.anim-off,
.anim-off::before,
.anim-off::after,
.anim-off *,
.anim-off *::before,
.anim-off *::after {
  animation-play-state: paused !important;
}