/* ============ base ============ */

::selection { background: var(--hl-pear); color: var(--color-ink); }

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

html, body { overflow-x: clip; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); font-style: normal; margin: 0; }
p { margin: 0; }
a { color: inherit; }

img, svg, video { max-width: 100%; }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--color-accent); color: var(--color-ink); }

.hl {
  --hl-h: 0.32em;
  background-image: linear-gradient(var(--hl, var(--hl-pear)) 0 0);
  background-repeat: no-repeat;
  background-size: 100% var(--hl-h);
  background-position: var(--hl-pos, 0 82%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-bottom: 0.02em;
}

/* ============ buttons · Hum push system ============ */

.btn {
  --btn-face: var(--color-accent);
  --btn-ink: var(--color-ink);
  --btn-edge: var(--color-accent-deep);
  --btn-cast: var(--color-accent-cast);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  padding: 0.8rem 1.4rem; font-weight: 600; font-family: var(--font-body);
  font-size: var(--text-base); text-decoration: none; white-space: nowrap;
  border: 0; border-radius: var(--radius-pill);
  color: var(--btn-ink); background: var(--btn-face); cursor: pointer;
  position: relative; isolation: isolate;
  box-shadow: 0 4px 0 0 var(--btn-edge), 0 6px 12px -3px var(--btn-cast);
  transform: translateY(0);
  transition: transform var(--dur-fast) var(--ease-press),
              box-shadow var(--dur-fast) var(--ease-press),
              background-color 160ms;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 0 var(--btn-edge), 0 12px 22px -4px var(--btn-cast); }
.btn:active { transform: translateY(3px);  box-shadow: 0 1px 0 0 var(--btn-edge), 0 2px 6px -2px var(--btn-cast); transition-duration: 70ms; }
.btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.55; cursor: not-allowed; pointer-events: none;
  transform: none; box-shadow: 0 4px 0 0 var(--btn-edge);
}
.btn--lg { padding: 1rem 1.9rem; font-size: var(--text-md); }
.btn--ink {
  --btn-face: var(--color-ink);
  --btn-ink: var(--color-paper);
  padding: 0.55rem 1rem;
  font-size: var(--text-sm);
  border-radius: 10px;
  box-shadow: 0 1px 2px var(--ink-12);
  transform: none;
}
.btn--ink:hover { transform: translateY(-1px); box-shadow: 0 3px 8px -2px var(--ink-25); }
.btn--ink:active { transform: translateY(0);  box-shadow: 0 1px 2px var(--ink-12); }

.num-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-label); font-size: 13px; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--hero-ink-soft);
  background: none;
  border: 1px solid oklch(99% 0.003 258 / 0.35);
  border-radius: 10px;
  padding: 9px 13px;
  cursor: pointer;
  transition: background-color 160ms, border-color 160ms, scale 100ms var(--ease-press);
}
.num-chip:hover { background: oklch(99% 0.003 258 / 0.10); border-color: oklch(99% 0.003 258 / 0.55); }
.num-chip__icon { width: 14px; height: 14px; opacity: 0.8; flex: none; }
.num-chip__imsg { width: 16px; height: 16px; border-radius: 4px; flex: none; }
.num-chip__text { min-width: 15ch; text-align: left; }

/* the compose bar, drawn like the real one: plus outside, hairline field,
 * black typed text with a trailing caret, gray "iMessage" when empty,
 * send button snug inside that only goes blue once there is text */
.composer {
  display: inline-flex; align-items: center; gap: 10px;
  width: min(440px, 100%);
  text-decoration: none;
  font-family: var(--font-phone); font-size: 17px;
  transition: translate var(--dur-med) var(--ease-out);
}
.composer:hover { translate: 0 -1px; }
.composer__plus {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: oklch(99% 0.003 258 / 0.20);
  color: var(--hero-ink);
}
.composer__plus svg { width: 17px; height: 17px; }
.composer__field {
  flex: 1; min-width: 0;
  display: flex; align-items: center;
  min-height: 40px;
  background: var(--bubble-white);
  border: 1px solid var(--phone-hairline);
  border-radius: var(--radius-pill);
  padding: 4px 4px 4px 16px;
  color: var(--phone-gray-ink);
  text-align: left;
  transition: box-shadow var(--dur-med) var(--ease-out);
}
.composer:hover .composer__field { box-shadow: var(--shadow-chip); }
.composer__text { white-space: pre; overflow: hidden; }
.composer__caret {
  width: 2px; height: 1.2em; flex: none;
  margin-left: 1px;
  background: var(--phone-blue);
  animation: caret 1.1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.composer.is-typing .composer__caret { animation: none; opacity: 1; }
.composer__hint { display: none; color: var(--phone-meta); margin-left: 4px; }
.composer__text:empty ~ .composer__hint { display: inline; }
.composer__send {
  margin-left: auto; flex: none;
  width: 31px; height: 31px;
  display: grid; place-items: center;
  background: var(--phone-blue);
  border-radius: var(--radius-pill);
  transition: transform var(--dur-fast) var(--ease-spring), background-color var(--dur-med) var(--ease-out);
}
.composer:not(.has-text) .composer__send { background: var(--phone-avatar-2); }
.composer__send svg { width: 17px; height: 17px; }
.composer:hover .composer__send { transform: scale(1.08); }
.composer:active .composer__send { transform: scale(0.94); }
.composer--lg { font-size: 19px; max-width: 500px; }
.composer--lg .composer__field { min-height: 48px; padding-left: 20px; }
.composer--lg .composer__send { width: 38px; height: 38px; }
/* narrow phones: the longest phrases must fit the field with the caret clear of send */
@media (max-width: 430px) {
  .composer { font-size: 15px; gap: 8px; }
  .composer__plus { width: 32px; height: 32px; }
  .composer__caret { margin-right: 4px; }
  .composer--lg { font-size: 16.5px; }
}
.composer--lg .composer__send svg { width: 20px; height: 20px; }
.composer--lg .composer__plus { width: 44px; height: 44px; }

.num-chip--inline {
  border: 0; padding: 6px 8px 6px 4px; background: none; border-radius: 8px;
  font-size: 17px; font-weight: 500;
  color: var(--hero-ink);
  gap: 10px;
}
.num-chip--inline:hover { background: oklch(99% 0.003 258 / 0.10); border: 0; }
.num-chip--inline .num-chip__imsg { width: 20px; height: 20px; border-radius: 5px; box-shadow: 0 1px 2px oklch(20% 0.012 250 / 0.25); }
.num-chip--inline .num-chip__icon { opacity: 0.65; overflow: visible; }
.num-chip--inline .num-chip__text { min-width: 12.5ch; }
.num-chip--inline .copy-glyph { transition: opacity var(--dur-fast) var(--ease-out); }
.num-chip--inline .copy-check {
  opacity: 0; transform: scale(0.5); transform-origin: 50% 50%;
  transition: opacity var(--dur-fast) var(--ease-out), transform 320ms var(--ease-spring);
}
.num-chip--inline.is-copied .num-chip__icon { opacity: 1; }
.num-chip--inline.is-copied .copy-glyph { opacity: 0; }
.num-chip--inline.is-copied .copy-check { opacity: 1; transform: scale(1); }

.btn--flat {
  box-shadow: 0 1px 2px var(--ink-08);
}
.btn--flat:hover { transform: translateY(-1px); box-shadow: 0 3px 8px -2px var(--ink-12); }
.btn--flat:active { transform: translateY(1px);  box-shadow: 0 1px 2px var(--ink-08); }

/* the CTA is a message: bubble corners, Messages icon, a tail */
.btn--paper {
  --btn-face: var(--bubble-white);
  --btn-ink: var(--color-ink);
  --btn-edge: var(--bubble-white-edge);
  --btn-cast: var(--bubble-white-cast);
}
.btn--blue {
  --btn-face: var(--hero-blue);
  --btn-ink: var(--hero-ink);
  --btn-edge: var(--hero-blue-deep);
  --btn-cast: var(--hero-blue-cast);
}
.btn--bubble { border-radius: 20px; }
.btn--bubble.btn--lg { border-radius: 24px; }
.btn__imsg { width: 20px; height: 20px; border-radius: 5px; flex: none; box-shadow: 0 1px 2px oklch(20% 0.012 250 / 0.2); }
.btn--lg .btn__imsg { width: 24px; height: 24px; border-radius: 6px; }
.btn__tail {
  position: absolute;
  right: -8px; bottom: -1px;
  width: 20px; height: auto;
  pointer-events: none;
}
.btn--lg .btn__tail { width: 24px; right: -9px; }

/* ============ nav · wordmark + one action ============ */

.nav {
  position: fixed; inset: 0 0 auto; z-index: var(--z-nav);
  display: flex; flex-direction: column; align-items: center;
  padding: 8px var(--page-gutter) 0;
  pointer-events: none; /* only the banner and the pill are real */
}
.nav__banner, .nav__bar { pointer-events: auto; }

/* the bar is a detached capsule floating over the page: frosted, hairlined,
 * always afloat; scrolling only deepens its shadow */
.nav__bar {
  width: min(100%, 56rem);
  background: var(--nav-frost); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--ink-08);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-chip);
}
.nav__bar-inner {
  height: 52px;
  padding-inline: 20px 7px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg);
}

.nav__brand {
  display: inline-flex; align-items: baseline;
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-lg); letter-spacing: -0.025em;
  text-decoration: none;
}
.nav__brand-money { font-weight: 600; color: var(--color-mint-text); } /* money is green */

.nav__links { display: flex; gap: var(--space-lg); margin-inline: auto; }
.nav__mobile-link { display: none; }
.nav__links a {
  position: relative;
  text-decoration: none; font-weight: 500; font-size: var(--text-sm);
  color: var(--ink-70); white-space: nowrap;
  padding: 3px 2px;
  transition: color 160ms;
}
.nav__links a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 1px;
  height: 7px; border-radius: 2px;
  background: var(--hl-pear);
  transform: scaleX(0); transform-origin: right center; /* leaves to the right, enters from the left */
  transition: transform 220ms var(--ease-snap);
  z-index: -1;
}
.nav__links a:hover, .nav__links a:active, .nav__links a.is-current { color: var(--color-ink); }
.nav__links a.is-current { font-weight: 600; }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left center; } /* the doorway line: one quiet fact above the capsule; it folds away as you
 * scroll instead of blinking out */
.nav__banner {
  margin: 0 0 6px; padding: 2px var(--page-gutter);
  text-align: center;
  font-size: 12px; letter-spacing: 0.01em;
  color: var(--ink-60);
  max-height: 40px; overflow: hidden;
  transition: max-height 320ms var(--ease-snap), opacity 180ms var(--ease-out),
    margin-bottom 320ms var(--ease-snap), visibility 0s 0s;
}
.nav__banner a { color: var(--color-blue-text); font-weight: 600; text-decoration: none; }
.nav__banner a:hover { text-decoration: underline; }
.nav.is-scrolled .nav__banner {
  max-height: 0; opacity: 0; margin-bottom: 0;
  visibility: hidden; transition-delay: 0s, 0s, 0s, 320ms; /* unfocusable once folded */
}
/* the capsule morphs on scroll: it contracts around its contents and sits
 * deeper, like it settled in for the ride */
.nav__bar {
  transition: width 360ms var(--ease-snap), border-color var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out);
}
.nav__bar-inner { transition: height 360ms var(--ease-snap); }
.nav.is-scrolled .nav__bar {
  width: min(100%, 46rem);
  border-color: var(--ink-12);
  box-shadow: var(--shadow-chip-hover);
}
.nav.is-scrolled .nav__bar-inner { height: 46px; }
/* the nav CTA is a small sent message · same tail construction as the chat bubbles */
.nav__cta {
  font-weight: 600;
  font-size: var(--text-sm);
  padding: 0.5rem 1.05rem;
  border-radius: var(--radius-pill);
}
.nav__cta .btn__imsg { width: 18px; height: 18px; border-radius: 5px; }
.blip { height: auto; overflow: visible; flex: none; }
.nav__brand .blip { width: 1em; margin-right: 0.3em; align-self: center; translate: 0 0.05em; transition: scale var(--dur-med) var(--ease-spring); }
@media (hover: hover) { .nav__brand:hover .blip { scale: 1.12; } }

/* ============ shell discipline ============ */

.section { max-width: var(--shell); margin-inline: auto; padding: var(--space-2xl) var(--page-gutter); }
/* one generous breath after the hero; every other seam stays tight so the
 * air is a choice, not a default. The board also gets its chapter wash:
 * a whisper of the chat-blue family, breathing in and back out to paper. */
#team {
  padding-top: var(--space-3xl);
  max-width: none;
  background: linear-gradient(180deg, var(--color-paper) 0%, var(--tint-blue) 45%, var(--color-paper) 100%);
}
#team .section__inner { max-width: var(--shell); margin-inline: auto; }

/* divider language: one quiet dashed rule per seam, PostHog-style */
.section--rule { position: relative; scroll-margin-top: calc(var(--bar-h) + 12px); }
.section--rule::before {
  content: "";
  position: absolute; top: 0;
  left: var(--page-gutter); right: var(--page-gutter);
  border-top: 1px dashed var(--ink-12);
}

.js-anim .section__title, .js-anim .section__lede { opacity: 0; translate: 0 14px; }
.js-anim .is-head-in .section__title, .js-anim .is-head-in .section__lede {
  opacity: 1; translate: 0 0;
  transition: opacity 480ms var(--ease-out), translate 560ms var(--ease-snap);
}
.js-anim .is-head-in .section__lede { transition-delay: 90ms; }
.section__title {
  font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.025em;
  text-wrap: balance;
  overflow-wrap: anywhere; min-width: 0;
  margin-bottom: var(--space-xl);
}
.section__inner--narrow { max-width: 46rem; }
.section__lede {
  font-size: var(--text-md); color: var(--ink-70);
  max-width: 44ch; text-wrap: pretty;
  margin: calc(-1 * var(--space-lg)) 0 var(--space-xl);
}

/* ============ hero · the blue card ============ */

.hero {
  padding: calc(var(--bar-h) + var(--space-2xl) + 34px) var(--page-gutter) 0;
  max-width: var(--shell); margin-inline: auto;
}
.hero__card {
  position: relative;
  background: var(--hero-blue);
  border-radius: var(--radius-hero);
  color: var(--hero-ink);
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--space-xl);
  align-items: center;
  padding: var(--space-xl) var(--space-2xl) 0 var(--space-2xl);
  margin-bottom: calc(var(--space-3xl) + var(--space-2xl) + var(--space-lg)); /* room for the phone to hang below the card */
}
.hero__card :focus-visible { outline-color: var(--color-ink); } /* ink ring reads on both the white bubble and the blue card */

.hero__title {
  /* Neko lesson: elegance from size, not weight. One notch bigger, one lighter. */
  font-size: clamp(2.7rem, 3.8vw + 0.9rem, 4.4rem); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.03;
  text-wrap: balance;
  overflow-wrap: anywhere; min-width: 0;
}
.hero__l1 { white-space: nowrap; }
.hero__title .hl {
  --hl: var(--color-accent);
  --hl-h: 0.12em;               /* drawn underline, not a band, so the white stays legible */
  --hl-pos: 0 97%;
}
.hero__lede {
  margin-top: var(--space-md);
  font-size: var(--text-md); color: var(--hero-ink-soft);
  max-width: 38ch; text-wrap: pretty;
}
.hero__cta {
  margin-top: var(--space-lg);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm);
}
.hero__trust { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--hero-ink-soft); }
.hero__aside {
  display: flex; align-items: flex-start; gap: 6px;
  font-family: var(--font-hand); font-size: 16px; font-weight: 500;
  color: var(--hero-ink-soft);
  margin-top: var(--space-md); margin-bottom: var(--space-xl);
}
.aside-arrow { width: 40px; height: 20px; flex: none; translate: 0 2px; }
.aside-dir--down { display: none; }

.dot-char {
  display: inline-block;
  width: 0.34em; height: 0.34em;
  margin-left: 0.07em;
  vertical-align: 0.01em;
  overflow: visible;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.hero__stage {
  position: relative;
  display: grid; place-items: center;
  perspective: 1200px;
  align-self: start;
  margin-top: var(--space-lg);
}

/* ============ the cast ============ */

.char { position: absolute; overflow: visible; cursor: pointer; }
.char__body { transform-origin: 50% 100%; transition: transform 90ms var(--ease-out); }
.char:active .char__body { transform: scale(0.92); } /* squish on press, release springs via the bounce */
.is-bounce .char__body { animation: char-bounce 550ms var(--ease-spring); }
@keyframes char-bounce {
  0%   { transform: translateY(0)    scale(1, 1); }
  35%  { transform: translateY(-9px) scale(0.96, 1.06); }
  70%  { transform: translateY(1px)  scale(1.05, 0.95); }
  100% { transform: translateY(0)    scale(1, 1); }
}
.char__look { transition: transform 140ms var(--ease-out); transform-box: fill-box; transform-origin: center; }
.char__eye { animation: char-blink 5.4s infinite; transform-box: fill-box; transform-origin: center; }
.char--mint .char__eye { animation-delay: 1.7s; }
.char--sunny .char__eye { animation-delay: 2.6s; }
.char--pip .char__eye { animation-delay: 3.9s; }
.nav__brand .char__eye { animation-delay: 3.1s; }
.hero__title .char__eye { animation-delay: 0.8s; }
@keyframes char-blink {
  0%, 94%, 100% { transform: scaleY(1); }
  96.5%         { transform: scaleY(0.08); }
}
/* idle glance for coarse pointers; fine pointers get JS eye-tracking instead */
@media (hover: none) {
  .char__look { animation: char-glance 9s var(--ease-in-out) infinite; }
  @keyframes char-glance {
    0%, 34%, 100% { transform: translateX(0); }
    12%, 22%      { transform: translateX(-2.4px); }
    52%, 66%      { transform: translateX(2.4px); }
  }
}

/* Dozer sleeps until his line lands */
.char__eyes-open { display: none; }
.is-awake .char__eyes-open { display: block; }
.is-awake .char__eyes-closed { display: none; }
.char__zzz text { animation: zzz 3.2s var(--ease-in-out) infinite; transform-box: fill-box; }
.char__zzz text:nth-child(2) { animation-delay: 1.6s; }
@keyframes zzz {
  0%   { opacity: 0; transform: translateY(5px); }
  35%  { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-7px); }
}

.char--dozer {
  width: clamp(72px, 7vw, 104px); height: auto;
  left: 15%; top: -2.7rem; /* perched on the card's top edge */
  z-index: var(--z-float);
  transform-origin: 50% 100%;
  animation: sway 6s var(--ease-in-out) infinite alternate;
}
@keyframes sway {
  from { transform: rotate(-3.5deg); }
  to   { transform: rotate(3.5deg); }
}
.char--penny {
  width: 40%; height: auto;
  top: calc(var(--phone-w) * -0.13); left: 50%; translate: -50% 0;
  animation: penny-idle 12s var(--ease-in-out) infinite;
}
/* mostly a gentle bob; twice a cycle she rises up for a proper look around */
@keyframes penny-idle {
  0%, 100% { transform: translateY(0); }
  18%      { transform: translateY(5px); }
  36%      { transform: translateY(-2px); }
  54%      { transform: translateY(4px); }
  66%      { transform: translateY(-11px); }
  74%      { transform: translateY(-11px); }
  86%      { transform: translateY(2px); }
}
.char--mint {
  width: 24%; height: auto;
  left: -17%; bottom: 43%;
  animation: floaty 7.5s var(--ease-in-out) -5s infinite alternate;
}
@keyframes floaty {
  from { transform: translateY(-4px); }
  to   { transform: translateY(5px); }
}

/* agent job chips: everyone's working. These are notifications from the cast,
 * so they speak the page's bubble language, not a dashboard's: soft corners in
 * family with the 20px buttons and the 32px slab, a warm edge instead of a cold
 * hairline, and enough shadow travel to actually lift off the blue. */
.agent-chip {
  position: absolute; z-index: 22;
  background: var(--chip-face);
  border: 1px solid var(--chip-edge);
  border-radius: var(--radius-chip);
  box-shadow: var(--shadow-float), inset 0 1px 0 var(--chip-sheen);
  padding: 11px 15px 12px;
  width: max-content; min-width: 244px;
  rotate: var(--chip-tilt, 0deg);
  /* the avatar owns a column and spans both rows, so the name and the line
   * under it share one left edge. Two ragged edges is what read as sloppy. */
  display: grid;
  grid-template-columns: 26px 1fr;
  column-gap: 10px; row-gap: 5px;
  transition: box-shadow var(--dur-med) var(--ease-out),
              translate var(--dur-med) var(--ease-out),
              rotate var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out);
}
.agent-chip .chip-ava { grid-row: 1 / span 2; align-self: start; margin-top: 1px; width: 26px; height: 26px; }
.agent-chip .chip-mascot { width: 18px; height: 18px; } /* hover squares the chip up and lifts it: the tilt is what makes it feel
 * dropped into the scene, so taking it away is the reward for pointing at it */
@media (hover: hover) { .agent-chip:hover { translate: 0 -2px; rotate: 0deg; box-shadow: var(--shadow-float-hover), inset 0 1px 0 var(--chip-sheen); } }
.agent-chip.is-hot { translate: 0 -2px; rotate: 0deg; box-shadow: var(--shadow-float-hover), inset 0 1px 0 var(--chip-sheen); border-color: var(--chip-edge-hot); }
.agent-chip__label {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0;
  color: var(--chip-ink-soft);
}
.agent-chip__row {
  display: flex; align-items: center; gap: 5px;
  font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--chip-ink);
  font-variant-numeric: tabular-nums;
}
.agent-chip__row img { border-radius: 3px; display: block; }
.agent-chip__up { color: var(--chip-up); font-weight: 600; }
.status-ico { width: 12px; height: 12px; flex: none; color: var(--ink-60); }
.status-ico--alert { color: var(--color-accent-3); }
.chip-mascot { width: 15px; height: 15px; flex: none; overflow: visible; }
.chip-ava {
  width: 24px; height: 24px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--ava-bg, var(--color-paper));
}
.chip-ava--pear { --ava-bg: var(--tint-pear); }
.chip-ava--coral { --ava-bg: var(--tint-coral); }
.chip-ava--mint { --ava-bg: var(--tint-mint); }
.agent-chip__time {
  margin-left: auto; padding-left: 14px;
  font-family: var(--font-label); font-size: 10px;
  color: var(--chip-ink-meta);
  font-variant-numeric: tabular-nums;
}
/* no tilt: the pills used to sit at about a degree each, and text rotated
 * off-axis rasterizes soft (the founder saw it as blur; the receipt made the
 * same call). The scatter comes from the offsets alone. */
.agent-chip--subs { left: calc(15% + 98px); top: -16px; }
.agent-chip--fraud { left: -44%; bottom: -7%; } /* rides below the trust line and composer */
.agent-chip--recap { right: -9%; top: 2%; }
.js-anim .agent-chip { animation: chip-in 360ms var(--ease-snap) backwards; } /* a text pill settles in; ballooning from scale(0) is the mascots' move */
@keyframes chip-in {
  from { opacity: 0; transform: translateY(8px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}
.js-anim .agent-chip--subs { animation-delay: 1150ms; }
.js-anim .agent-chip--fraud { animation-delay: 1300ms; }
.js-anim .agent-chip--recap { animation-delay: 1250ms; }

.spark { position: absolute; width: 20px; height: 20px; fill: var(--hero-ink); opacity: 0.7; }
.spark--1 { top: 12%; left: 52%; animation: twinkle 3.4s var(--ease-in-out) infinite; }
.spark--2 { bottom: 18%; left: 44%; width: 13px; height: 13px; animation: twinkle 3.4s var(--ease-in-out) -1.7s infinite; }
@keyframes twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.7) rotate(0deg); }
  50%      { opacity: 0.85; transform: scale(1) rotate(20deg); }
}

/* entrance choreography (motion-capable visits only) */
.js-anim .hero__copy > * { animation: rise-in 600ms var(--ease-snap) backwards; }
.js-anim .hero__copy > *:nth-child(1) { animation-delay: 60ms; }
.js-anim .hero__copy > *:nth-child(2) { animation-delay: 150ms; }
.js-anim .hero__copy > *:nth-child(3) { animation-delay: 240ms; }
.js-anim .hero__copy > *:nth-child(4) { animation-delay: 330ms; }
.js-anim .hero__copy > *:nth-child(5) { animation-delay: 420ms; } /* the handwritten aside lands last; unlisted, it fired at 0ms, before the headline */
@keyframes rise-in {
  from { opacity: 0; translate: 0 14px; }
  to   { opacity: 1; translate: 0 0; }
}
.js-anim .phone { animation: phone-in 700ms cubic-bezier(0.19, 1, 0.22, 1) 150ms backwards; }
@keyframes phone-in {
  from { opacity: 0; translate: 0 30px; }
  to   { opacity: 1; translate: 0 0; }
}
.js-anim .char--dozer { animation: char-in 480ms var(--ease-spring) 700ms backwards, sway 6s var(--ease-in-out) 1.3s infinite alternate; }
.js-anim .char--penny { animation: penny-in 600ms var(--ease-snap) 900ms backwards, penny-idle 12s var(--ease-in-out) 1.6s infinite; }
.js-anim .char--mint { animation: char-in 480ms var(--ease-spring) 1050ms backwards, floaty 7.5s var(--ease-in-out) 1.6s infinite alternate; }
@keyframes char-in {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes penny-in {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
.js-anim .hero__title .hl { animation: hl-sweep 550ms var(--ease-out) 500ms backwards; }
@keyframes hl-sweep {
  from { background-size: 0% var(--hl-h, 0.32em); }
  to   { background-size: 100% var(--hl-h, 0.32em); }
}

/* 2:07 AM: the hero phone works Mint's night shift. Scene two toggles
 * .is-night and every surface reads from these vars; the 700ms color
 * transitions already on the phone's parts make it a crossfade. */
#phone.is-night {
  --phone-screen: var(--night);
  --phone-gray: var(--night-2);
  --phone-gray-ink: var(--night-ink);
  --phone-meta: var(--night-meta);
  --phone-hairline: var(--night-line);
  --phone-head: var(--night-head);
  --phone-screen-fade: var(--night-screen-fade);
  --phone-avatar-emoji-1: var(--night-avatar-1);
  --phone-avatar-emoji-2: var(--night-avatar-2);
}
#phone.is-night .phone__home { background: var(--night-line-2); }

/* Real iPhone 16 Pro render (transparent screen aperture) over live HTML.
 * Geometry measured off the trimmed 1308 x 2710 asset, same as the source
 * mockup: glass = aperture + 8 source px so corners tuck under the bezel. */

.phone {
  --phone-w: clamp(290px, 24vw, 350px);
  container-type: inline-size;
  width: var(--phone-w);
  aspect-ratio: 1308 / 2710;
  margin-bottom: calc(-1 * (var(--space-3xl) + var(--space-2xl))); /* deep bottom burst keeps the card compact, Nabi-style */
  position: relative; z-index: 2;
  transform: rotateY(-3deg);
}
.phone__hw {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; user-select: none;
  z-index: 30;
}
.phone__shadow {
  position: absolute; inset: 1px;
  border-radius: calc(var(--phone-w) * 0.19);
  box-shadow: var(--shadow-phone);
}
.phone__screen {
  position: absolute;
  left: 3.2875%; top: 1.3284%;
  width: 93.4251%; height: 97.3432%;
  background: var(--phone-screen);
  border-radius: calc(var(--phone-w) * 0.12);
  overflow: clip;
  display: flex; flex-direction: column;
  font-family: var(--font-phone);
  transition: background-color 700ms var(--ease-in-out);
}

.phone__header, .msg--in, .msg--typing, .phone__input, .phone__plus, .phone__stamp, .msg-meta, .phone__status, .phone__contact, .msg__tapback {
  transition: background-color 700ms var(--ease-in-out), color 700ms var(--ease-in-out), border-color 700ms var(--ease-in-out);
}
.phone .msg--tail::after, .setup__msgs .msg--tail::after, .dayboard .msg--tail::after, .dayboard__card--standalone .msg--tail::after, .cta-final__ask .msg--tail::after { transition: background-color 700ms var(--ease-in-out); }

.phone__status {
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  /* the island's center sits 7.95cqi below the screen top in the render;
   * time and glyphs center in the bezel ears beside it (island: 35.8-64.1cqi) */
  padding: calc(7.95cqi - 8px) calc(16.3cqi - 22px) 0 calc(16.2cqi - 15px);
  color: var(--phone-gray-ink);
  pointer-events: none;
}
.phone__time { font-size: 12px; font-weight: 600; letter-spacing: -0.1px; }
.phone__glyphs { display: flex; align-items: center; gap: 5px; }

/* iOS 26 liquid glass: no opaque bar or hairline, the header fades into the
 * thread and the controls float as glass circles */
.phone__header {
  position: relative;
  /* island bottom sits 12.15cqi below the screen top; clear it */
  padding: calc(12.15cqi + 10px) 14px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: linear-gradient(180deg, var(--phone-screen) 58%, var(--phone-screen-fade, var(--paper-screen-fade)));
}
.phone__avatar {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  font-size: 24px;
  background: linear-gradient(var(--phone-avatar-emoji-1), var(--phone-avatar-emoji-2));
  border-radius: var(--radius-pill);
  box-shadow: 0 1px 4px oklch(20% 0.012 250 / 0.16);
}
.glass-btn {
  position: absolute; top: calc(12.15cqi + 17px);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: oklch(97% 0.004 270 / 0.72);
  box-shadow:
    inset 0 0.5px 0 oklch(100% 0 0 / 0.9),
    inset 0 -0.5px 0 oklch(20% 0.012 250 / 0.07),
    0 1px 3px oklch(20% 0.012 250 / 0.10);
  color: var(--phone-blue);
}
.glass-btn svg { width: 15px; height: 15px; }
.glass-btn--video svg { width: 17px; height: 11px; }
.glass-btn--back { left: 12px; }
.glass-btn--video { right: 12px; }
.phone__contact { font-size: 10.5px; color: var(--phone-gray-ink); }
.phone__chev { color: var(--phone-meta); }

.phone__thread {
  flex: 1; min-height: 0; /* allow clipping instead of pushing the composer off-screen */
  padding: 10px 13px 6px;
  display: flex; flex-direction: column; gap: 3px;
  justify-content: flex-end; /* thread hugs the composer; overflow spills off the top like a scrolled chat */
  overflow: clip;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 56px);
  mask-image: linear-gradient(180deg, transparent 0, #000 56px);
}
.phone__pause {
  position: absolute; right: 8px; bottom: 12px; z-index: 40;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid oklch(100% 0 0 / 0.38); border-radius: var(--radius-pill);
  background: oklch(97% 0.004 270 / 0.72);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.72), 0 2px 6px oklch(20% 0.012 250 / 0.18);
  color: var(--phone-blue); cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-press), opacity var(--dur-fast) var(--ease-out);
}
.phone__pause::before { content: ""; position: absolute; inset: -7px; }
.phone__pause:hover { opacity: 1; }
.phone__pause:active { transform: scale(0.94); }
.phone__pause:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.phone__pause-icon { grid-area: 1 / 1; font-family: var(--font-label); font-size: 11px; line-height: 1; transition: opacity var(--dur-fast) var(--ease-out); }
.phone__pause-icon--play { opacity: 0; translate: 1px 0; }
.phone__pause[aria-pressed="true"] .phone__pause-icon--pause { opacity: 0; }
.phone__pause[aria-pressed="true"] .phone__pause-icon--play { opacity: 1; }

@media (min-width: 75rem) { .agent-chip--subs { display: none; } }
.phone__stamp {
  text-align: center;
  font-size: 10px; color: var(--phone-meta);
  margin-bottom: 10px;
}

.msg {
  max-width: 76%;
  padding: 7px 12px;
  border-radius: 18px;
  font-size: 13px; line-height: 1.33;
  position: relative;
  width: fit-content;
}
.msg--in { background: var(--phone-gray); color: var(--phone-gray-ink); align-self: flex-start; }
.msg--out { background: var(--phone-blue); color: var(--phone-blue-ink); align-self: flex-end; }
.msg--stats p { white-space: pre-line; }
.msg--reacted { margin-top: 14px; }
.msg--tail { margin-bottom: 5px; }

.msg-meta {
  align-self: flex-end;
  font-size: 10px; font-weight: 500;
  color: var(--phone-meta);
  margin: -3px 8px 2px 0;
}
.js-anim .phone .msg-meta { display: none; }
.js-anim .phone .msg-meta.is-on { display: block; animation: msg-pop 220ms var(--ease-out) both; }
.js-anim .phone .msg-meta.is-set { display: block; }

/* iMessage bubble tails: colour blob + screen-colour cutout, group ends only */
.phone .msg--tail::before, .setup__msgs .msg--tail::before, .dayboard .msg--tail::before, .dayboard__card--standalone .msg--tail::before, .cta-final__ask .msg--tail::before {
  content: ""; position: absolute; bottom: 0;
  height: 20px; width: 20px; z-index: -1;
}
.phone .msg--tail::after, .setup__msgs .msg--tail::after, .dayboard .msg--tail::after, .dayboard__card--standalone .msg--tail::after, .cta-final__ask .msg--tail::after {
  content: ""; position: absolute; bottom: 0;
  height: 20px; width: 10px;
  background: var(--phone-screen);
}
.phone .msg--in.msg--tail::before, .phone .msg--typing.msg--tail::before, .setup__msgs .msg--in.msg--tail::before, .dayboard .msg--in.msg--tail::before, .dayboard__card--standalone .msg--in.msg--tail::before, .cta-final__ask .msg--in.msg--tail::before {
  left: -7px; background: var(--phone-gray); border-bottom-right-radius: 16px 14px;
}
.phone .msg--in.msg--tail::after, .phone .msg--typing.msg--tail::after, .setup__msgs .msg--in.msg--tail::after, .dayboard .msg--in.msg--tail::after, .dayboard__card--standalone .msg--in.msg--tail::after, .cta-final__ask .msg--in.msg--tail::after {
  left: -10px; border-bottom-right-radius: 10px;
}
.phone .msg--out.msg--tail::before, .setup__msgs .msg--out.msg--tail::before, .dayboard .msg--out.msg--tail::before, .dayboard__card--standalone .msg--out.msg--tail::before {
  right: -7px; background: var(--phone-blue); border-bottom-left-radius: 16px 14px;
}
.phone .msg--out.msg--tail::after, .setup__msgs .msg--out.msg--tail::after, .dayboard .msg--out.msg--tail::after, .dayboard__card--standalone .msg--out.msg--tail::after {
  right: -10px; border-bottom-left-radius: 10px;
}
.phone .msg { z-index: 0; } /* own stacking context so the -1 tail sits behind the bubble only */
.phone .msg p { position: relative; z-index: 1; }

.msg__tapback {
  position: absolute; top: -13px; right: -7px; z-index: 2;
  font-size: 11px; line-height: 1;
  background: var(--phone-screen);
  border: 1px solid var(--phone-hairline);
  border-radius: var(--radius-pill);
  padding: 4px 6px;
  box-shadow: var(--shadow-tapback);
}
.msg--out .msg__tapback { right: auto; left: -7px; }

.msg--typing {
  display: none; /* only the animated version shows the typing dots */
  background: var(--phone-gray);
  border-bottom-left-radius: 5px;
  align-self: flex-start;
  gap: 3px; align-items: center;
  padding: 10px 12px;
}
.js-anim .msg--typing { display: flex; }
.msg--typing span {
  width: 6px; height: 6px; border-radius: var(--radius-pill);
  background: var(--phone-meta);
  animation: typing-dot 1.2s var(--ease-in-out) infinite;
}
.msg--typing span:nth-child(2) { animation-delay: 0.15s; }
.msg--typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-dot {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-2px); }
}

/* chart card · the rich-link bubble the product really sends: the raster on
 * the product's paper ground with a mono kicker and footnotes, the claim as
 * the title, coral spent only on the over-budget bar. iMessage draws the card
 * borderless: the paper image and the gray strip define its edges. */
.msg--card {
  width: 84%; max-width: 236px;
  flex: none; /* fixed-ratio media must not squash when the thread overflows; it clips off the top instead */
  padding: 0; overflow: hidden;
  background: var(--phone-gray);
  border-radius: 16px;
}
.chart-card__img { display: block; width: 100%; height: auto; }
.cc-bg { fill: var(--color-paper); }
.cc-kicker { font: 600 7px var(--font-label); letter-spacing: 0.09em; fill: var(--ink-60); }
.cc-title { font: 800 12.5px var(--font-display); fill: var(--color-ink); }
.cc-val { font: 600 8px var(--font-label); fill: var(--ink-60); }
.cc-month { font: 500 7.5px var(--font-label); fill: var(--ink-60); }
.cc-note { font: 500 7px var(--font-label); fill: var(--ink-60); }
.cc-bar { fill: var(--ink-25); }
.cc-bar--over { fill: var(--coral-deep); }
.cc-val--over { fill: var(--coral-deep); font-weight: 700; }
.cc-target { stroke: var(--ink-60); stroke-width: 1; stroke-dasharray: 3 4; stroke-linecap: round; }
/* the strip under the image reads like iMessage renders it: the page title in
 * semibold ink, the bare domain in meta gray below */
.chart-card__meta {
  padding: 5px 10px 7px;
  background: var(--phone-gray);
  border-top: 1px solid var(--phone-hairline);
}
.chart-card__pgtitle { margin: 0; font: 600 10.5px var(--font-phone); color: var(--phone-gray-ink); }
.chart-card__domain { margin: 1px 0 0; font: 400 9.5px var(--font-phone); color: var(--phone-meta); }

/* gif bubble · an image message, GIF badge and all. The asset is a real pick
 * from the product's budget_win pool, served from this site. */
.msg--gif { padding: 0; overflow: hidden; border-radius: 16px; flex: none; }
.gif-media { display: block; width: 148px; height: auto; }
.gif-badge {
  position: absolute; left: 7px; bottom: 7px;
  padding: 2px 5px; border-radius: 4px;
  font: 700 8px var(--font-phone); letter-spacing: 0.06em;
  color: oklch(99% 0.002 95);
  background: oklch(20% 0.012 250 / 0.55);
}

/* animated states, scoped to the phone, applied only when JS + motion are available.
 * bubbles are display-toggled so each new message pushes the thread up, like real texting */
.js-anim .phone .msg { display: none; }
.js-anim .phone .msg--out { transform-origin: bottom right; }
.js-anim .phone .msg--in, .js-anim .phone .msg--typing { transform-origin: bottom left; }
.js-anim .phone .msg.is-set { display: block; } /* pre-filled opening beats, no entrance */
.js-anim .phone .msg.is-on { display: block; animation: msg-pop 300ms var(--ease-snap) both; }
.js-anim .phone .phone__stamp { display: none; }
.js-anim .phone .phone__stamp.is-set { display: block; }
.js-anim .phone .phone__stamp.is-on { display: block; animation: msg-pop 300ms var(--ease-snap) both; }
.js-anim .phone .msg--typing.is-on { display: flex; }
.js-anim .phone .msg--typing.is-done { display: none; }
@keyframes msg-pop {
  from { opacity: 0; transform: translateY(9px) scale(0.92); }
  to   { opacity: 1; transform: none; }
}
.js-anim .phone .msg__tapback { opacity: 0; transform: scale(0); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-med) var(--ease-spring); }
.js-anim .phone .msg__tapback.is-on { opacity: 1; transform: scale(1); }
.js-anim .phone .msg__tapback.is-set { opacity: 1; transform: scale(1); transition: none; } /* prefilled history shows its reactions instantly */

.phone__composer {
  display: flex; gap: 8px; align-items: center;
  padding: 6px 13px 2px;
}
.phone__plus {
  width: 29px; height: 29px; flex: none;
  display: grid; place-items: center;
  background: var(--phone-gray); color: var(--phone-meta);
  border-radius: var(--radius-pill);
  font-size: 17px; font-weight: 400; line-height: 1;
}
.phone__input {
  flex: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  border: 1px solid var(--phone-hairline);
  border-radius: var(--radius-pill);
  padding: 6px 10px 6px 12px;
  font-size: 13px; color: var(--phone-meta);
}
.phone__mic { color: var(--phone-meta); opacity: 0.8; flex: none; }
.phone__home {
  width: 34%; height: 4px;
  transition: background-color 700ms var(--ease-in-out);
  background: var(--phone-bezel);
  border-radius: var(--radius-pill);
  margin: 8px auto;
  opacity: 0.3;
}

/* The claim is "one conversation", so the section shows exactly that: a
 * single thread with the three beats annotated off a timeline. The rail is
 * the spine: it carries the times, wears each beat's color on its way down
 * (blue, then mint, then honey), and lands on the payoff node. */

.setup {
  list-style: none; margin: 0; padding: 0;
  position: relative;
  max-width: 52rem;
  margin-inline: auto; /* the composition centers; the shell's spare width splits both sides */
  display: flex; flex-direction: column;
  --phone-screen: var(--color-paper); /* bubble tails cut against the page */
  --node: 30px;
}
/* the rail: one solid line that travels the beat colors on its way down,
 * blue to mint to honey, and every node sits ON it */
.setup::before, .setup::after {
  content: "";
  position: absolute; top: 15px; bottom: 8px;
  left: calc(var(--node) / 2 - 1.5px);
  width: 3px; border-radius: var(--radius-pill);
  background: linear-gradient(180deg,
    var(--color-blue-text) 0%, var(--color-blue-text) 8%,
    var(--color-mint-text) 30%, var(--color-mint-text) 40%,
    var(--color-lav-text) 62%, var(--color-lav-text) 72%,
    var(--color-accent-text) 94%, var(--color-accent-text) 100%);
}
.setup::before, .setup::after { z-index: 0; }
.setup::before { opacity: 0.14; } /* the faint track: the journey ahead */
.setup::after {
  opacity: 0.62;
  /* draws down to --seq-p; defaults fully drawn so no-JS reads complete */
  clip-path: inset(0 0 calc((1 - var(--seq-p, 1)) * 100%) 0);
  transition: clip-path 160ms linear;
}
.setup__beat {
  display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: 0 var(--space-xl);
  align-items: start;
  padding-bottom: var(--space-lg); /* the rail runs through the padding, unbroken */
}
.setup__note {
  /* z-index 1 lifts the whole note above the rails even when a reveal
   * translate turns the note into its own stacking context (which traps the
   * tile's z-index inside it: the mobile strike-through bug) */
  position: relative; z-index: 1;
}
.setup__marker {
  display: flex; align-items: center; gap: 12px;
  font-weight: 700; font-size: var(--text-base); letter-spacing: -0.01em;
}
.setup__num {
  position: relative; z-index: 1; /* sits ON the rail, explicitly above it */
  flex: none;
  width: var(--node); height: var(--node);
  display: grid; place-items: center;
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 0 0 5px var(--color-paper); /* real blank space between node and line */
}
.setup__num { transition: scale var(--dur-med) var(--ease-spring); }
@media (hover: hover) { .setup__beat:hover .setup__num { scale: 1.1; } }
.setup__num--imsg svg { width: 100%; height: 100%; display: block; }
.setup__num--plaid {
  background: var(--phone-bezel); color: var(--bubble-white);
}
.setup__num--plaid svg { width: 17px; height: 18px; display: block; }
.setup__num--emoji {
  font-size: 17px; line-height: 1;
  background: var(--beat-tint, var(--tint-pear));
}
/* the unlit state is an opaque paper veil inside the tile, never tile
 * transparency: a translucent tile would show the rail through it */
.setup__num::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--color-paper);
  opacity: 0;
  transition: opacity 360ms var(--ease-out);
  pointer-events: none;
}
.setup__beat--blue { --beat-tint: var(--tint-blue); --beat-ink: var(--color-blue-text); --beat-line: var(--draft-line); }
.setup__beat--mint { --beat-tint: var(--tint-mint); --beat-ink: var(--color-mint-text); --beat-line: var(--line-mint); }
.setup__beat--lav { --beat-tint: var(--tint-lav); --beat-ink: var(--color-lav-text); --beat-line: var(--line-lav); }
.setup__beat--pear { --beat-tint: var(--tint-pear); --beat-ink: var(--color-accent-text); --beat-line: var(--line-pear); }
.setup__time {
  margin: var(--space-2xs) 0 0 42px;
  font-family: var(--font-label); font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--ink-60);
}
.setup__desc {
  margin: var(--space-xs) 0 0 42px; /* aligns under the marker text, past the node */
  font-size: var(--text-sm); color: var(--ink-60);
  max-width: 27ch; text-wrap: pretty;
}
.setup__msgs { display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
.setup__msgs .msg { font-family: var(--font-phone); font-size: 15px; max-width: min(76%, 30rem); }
.setup__msgs .msg--reacted { margin-top: 14px; }

/* the rail lands on the fifth station: a check tile in the node family,
 * and the receipt reads in the site's own voice, not console mono */
.setup__end { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.setup__end-dot {
  position: relative; z-index: 1; /* paints above the rail, same as the beat nodes */
  flex: none;
  width: 24px; height: 24px;
  margin-left: calc((var(--node) - 24px) / 2);
  display: grid; place-items: center;
  font-size: 13px; line-height: 1;
  border-radius: 8px;
  background: var(--tint-pear);
  box-shadow: 0 0 0 5px var(--color-paper);
}
.setup__end p {
  margin: 0;
  font-weight: 600; font-size: 13.5px; letter-spacing: -0.005em;
  color: var(--ink-70);
}

@media (max-width: 60rem) {
  .setup { --node: 26px; }
  .setup__num--emoji { font-size: 15px; }
  .setup__num--plaid svg { width: 15px; height: 16px; }
  .setup__beat { grid-template-columns: minmax(0, 1fr); gap: var(--space-md) 0; padding-bottom: var(--space-lg); }
  .setup__time { margin-left: 38px; }
  .setup__desc { margin-left: 38px; }
  .setup__msgs { padding-left: 38px; } /* the thread stays indented off the rail */
  .setup__msgs .msg { max-width: min(92%, 26rem); }
  .setup__end-dot { width: 22px; height: 22px; margin-left: calc((var(--node) - 22px) / 2); }
}

/* the Plaid link preview: real logomark on its black app-icon tile */
.link-card.link-card--plaid { padding: 10px 13px; gap: 11px; background: var(--bubble-white); box-shadow: var(--shadow-tapback); }
.link-card .link-card__glyph--plaid {
  width: 32px; height: 32px;
  background: var(--phone-bezel); color: var(--bubble-white);
  border-radius: 8px;
}
.link-card .link-card__glyph--plaid svg { width: 21px; height: 21px; }
.link-card--plaid .link-card__body b { font-size: 12.5px; }

/* margin scribble: why the Plaid link is safe to tap */
.plaid-doodle {
  display: flex; align-items: flex-start; gap: 7px;
  margin: 2px 0 6px 20px;
  position: relative; z-index: 1;
  font-family: var(--font-label); font-size: 10.5px; line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--ink-70);
}
.plaid-doodle p { max-width: 27ch; }
.plaid-doodle .hl { --hl-h: 0.45em; padding-inline: 1px; }
.plaid-doodle__arrow { width: 19px; height: 38px; flex: none; margin-top: -8px; color: var(--ink-60); }
.brand-inline { white-space: nowrap; }
.venmo-mark {
  width: 13px; height: 13px;
  vertical-align: -2.5px;
  margin-right: 2px;
  border-radius: 3.5px;
}

/* ============ the team roster ============ */

.roster__name { font-weight: 700; font-size: var(--text-md); letter-spacing: -0.015em; }
.roster__role {
  margin-left: var(--space-xs);
  font-size: 11px; font-weight: 500; color: var(--ink-60);
  border: 1px solid var(--ink-12); border-radius: var(--radius-pill);
  padding: 2px 9px;
  vertical-align: 3px;
  white-space: nowrap;
}
.roster__desc { margin-top: var(--space-2xs); color: var(--ink-70); text-wrap: pretty; }
.roster__status {
  display: flex; align-items: center; gap: 6px;
  margin-top: var(--space-xs);
  font-family: var(--font-label); font-size: 11px; letter-spacing: 0.02em;
  color: var(--ink-60);
  font-variant-numeric: tabular-nums;
}
 /* paper grain, pen role labels · cards sit square on a strict grid */
#team .dayboard__card { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.035'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }

.dayboard {
  display: grid; gap: var(--space-md);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "mint dozer penny"
    "pip sunny sunny"
    "yours yours yours";
  align-items: stretch;
  --phone-screen: var(--bubble-white);
}
#team .dayboard { grid-template-rows: 26rem 27rem auto; }
.dayboard__card {
  position: relative;
  background: var(--bubble-white);
  border: 1px solid var(--ink-12);
  border-radius: 16px;
  box-shadow: var(--shadow-chip);
  padding: var(--space-lg);
  display: flex; flex-direction: column;
}
/* the team board only · the memory rail below shares the class but keeps its sticky-note look */
#team .dayboard__card {
  border-radius: 20px;
  box-shadow: none; /* hairline only · the surface is flat, the content carries depth */
  padding: var(--space-lg) var(--space-lg) 0;
  overflow: hidden;
  --card-bg: var(--bubble-white);
}
/* claim first, proof below · the card is a window onto the product */
.dayboard__claim {
  font-family: var(--font-display); font-size: 19px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.2;
  margin: 0 0 var(--space-md); text-wrap: balance;
}
.dayboard__claim span {
  display: block; margin-top: 5px;
  font-family: var(--font-body); font-size: 13.5px; font-weight: 500;
  letter-spacing: -0.005em; line-height: 1.45; color: var(--ink-60);
}
#card-mint .dayboard__claim { color: var(--night-ink); }
#card-mint .dayboard__claim span { color: var(--night-meta-2); }
/* the thread runs to the bottom edge and fades out under it */
#team .dayboard__msgs { padding-bottom: var(--space-lg); }
#team .dayboard__card:not(#card-yours)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
  background: linear-gradient(to bottom, transparent, var(--card-bg));
  pointer-events: none;
}
#team #card-mint { --card-bg: var(--night); } /* outranks the #team card rule above */
.dayboard__who { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-md); }
.dayboard__name { font-weight: 700; font-size: var(--text-base); letter-spacing: -0.01em; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.dayboard__msgs { display: flex; flex-direction: column; gap: 5px; }
.dayboard__msgs .msg { font-family: var(--font-phone); font-size: 13.5px; max-width: 96%; }
.dayboard__msgs .msg--out { align-self: flex-end; }
/* card footer · the agent's mini self on duty + a quiet sentence */
.dayboard__card .roster__status {
  margin-top: auto;
  padding-top: var(--space-md);
  gap: 8px;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 500;
  letter-spacing: -0.01em; color: var(--ink-60);
}
#card-mint  .roster__status { color: var(--night-meta-2); }
.chip-ava--lav { --ava-bg: var(--tint-lav); }
.chip-ava--night { --ava-bg: var(--night-chip-bg); }
.dayboard .msg__receipt {
  align-self: flex-end;
  font-family: var(--font-phone); font-size: 10px; font-weight: 500;
  color: var(--phone-meta);
  margin: -1px 8px 4px 0;
}

/* Mint works the night shift · the board's one dark card */
#card-mint {
  background: var(--night);
  border-color: var(--night-line);
  --phone-screen: var(--night);
}
#card-mint .dayboard__name { color: var(--night-ink); }
#card-mint .roster__status { color: var(--night-meta); }
#card-mint .dayboard__msgs {
  flex: 1 1 auto; justify-content: flex-end;
  padding-bottom: 64px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 40px), transparent 100%);
} /* thread hangs low, with the closer clear of the card edge */
#card-mint .msg--in { background: var(--night-2); color: var(--night-ink); }
#card-mint .msg--in.msg--tail::before { background: var(--night-2); }
#card-mint .msg__tapback { background: var(--night-2); border-color: var(--night-line); }
#card-mint .msg__receipt { color: var(--night-meta); }
/* roles are colored microtext, no container · the color alone ties label to agent */
.dayboard__card .roster__role {
  font-family: var(--font-hand); font-size: 13px; font-weight: 500;
  letter-spacing: 0; text-transform: lowercase;
  font-size: 11px; font-weight: 650; letter-spacing: 0.015em;
  padding: 0; border: 0; border-radius: 0; background: none;
  margin-left: 0; /* shares the name's left edge, no pill indent */
}
#card-mint  .roster__role { color: var(--night-chip-ink); }
#card-dozer .roster__role { color: var(--color-coral-text); }
#card-penny .roster__role, #card-sunny .roster__role { color: var(--color-accent-text); }
#card-pip   .roster__role { color: var(--color-lav-text); }

/* Dozer's watch list · merchant favicon chips */
.merch { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-md); }
.merch__chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-label); font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-90);
  background: var(--bubble-white);
  border: 1px solid var(--ink-12); border-radius: 8px;
  padding: 3px 8px 3px 5px;
  box-shadow: var(--shadow-chip);
}
.merch__chip img { border-radius: 3px; }
.logo { width: 14px; height: 14px; flex: none; display: block; }
.agent-chip__row .logo { width: 14px; height: 14px; }
.merch__chip--more { padding: 3px 8px; color: var(--ink-60); background: transparent; border-style: dashed; box-shadow: none; }

/* Pip's asks · every ask is a tiny received bubble, because that is what it was */
.merch--asks { gap: 7px 6px; }
.merch--asks .merch__chip {
  font-family: var(--font-phone); font-size: 11.5px; font-weight: 500;
  border: none; border-radius: 13px;
  padding: 5px 11px;
  box-shadow: none;
  background: var(--phone-gray); color: var(--phone-gray-ink);
}
.merch__up { color: var(--color-coral-text); font-weight: 700; }
.js-anim .merch__chip { opacity: 0; translate: 0 6px; }
.js-anim .dayboard__card.is-in .merch__chip {
  opacity: 1; translate: 0 0;
  transition: opacity 380ms var(--ease-out), translate 460ms var(--ease-spring);
}
.js-anim .dayboard__card.is-in .merch__chip:nth-child(1) { transition-delay: 350ms; }
.js-anim .dayboard__card.is-in .merch__chip:nth-child(2) { transition-delay: 440ms; }
.js-anim .dayboard__card.is-in .merch__chip:nth-child(3) { transition-delay: 530ms; }
.js-anim .dayboard__card.is-in .merch__chip:nth-child(4) { transition-delay: 620ms; }
.js-anim .dayboard__card.is-in .merch__chip:nth-child(5) { transition-delay: 710ms; }

/* Sunny holds the wide slot · thread on the left, the week's bars on the right */
#card-sunny {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  column-gap: var(--space-xl);
}
#card-sunny .dayboard__who, #card-sunny .dayboard__claim { grid-column: 1 / -1; }
#card-sunny .dayboard__msgs { grid-column: 1; grid-row: 3; align-self: start; }
#card-sunny .wrap { grid-column: 2; grid-row: 3; align-self: center; margin-top: 0; }
#card-sunny .trend { grid-column: 1 / -1; grid-row: 4; }
@media (max-width: 960px) {
  #card-sunny { display: flex; }
  #card-sunny .wrap { margin-top: var(--space-md); align-self: stretch; }
}

/* Sunny's week wrap · logo bars */
.wrap { display: flex; flex-direction: column; gap: 7px; margin-top: var(--space-md); }
.wrap__label {
  font-family: var(--font-label); font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-60);
  margin-bottom: 1px;
}
.wrap__row {
  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center; gap: 8px;
  font-family: var(--font-label); font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-70);
}
.wrap__row img { border-radius: 4px; }
.wrap__emoji { font-size: 11px; line-height: 1; text-align: center; }
/* over budget: the fill bursts past the limit notch and pulses */
.wrap__bar.wrap__bar--over { background: var(--tint-coral); overflow: visible; }
.wrap__bar.wrap__bar--over::after {
  content: ""; /* the budget line it blew past */
  position: absolute; top: -3px; bottom: -3px; right: 0;
  width: 2px; border-radius: 1px;
  background: var(--ink-60);
  z-index: 1;
}
.wrap__bar.wrap__bar--over i {
  width: calc(100% + 6px);
  background: linear-gradient(90deg, var(--color-accent-3), var(--coral-deep));
}
.js-anim .dayboard__card.is-in .wrap__bar--over i { animation: over-pulse 1.8s var(--ease-in-out) 1.4s infinite; }
@keyframes over-pulse {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 10px 2px var(--coral-glow); }
}
.wrap__row--over .wrap__amt { color: var(--color-coral-text); font-weight: 700; }
.wrap__row--protected .wrap__amt { color: var(--color-accent-text); font-weight: 700; }
.merch .wrap__label { flex-basis: 100%; margin: 0; }
.wrap__bar {
  display: block; height: 8px; border-radius: var(--radius-pill);
  background: var(--tint-pear);
  position: relative; overflow: hidden;
}
.wrap__bar i {
  position: absolute; inset: 0; width: var(--w);
  background: var(--color-accent); border-radius: inherit;
  transform-origin: left center;
}
.js-anim .wrap__bar i { transform: scaleX(0); }
.js-anim .dayboard__card.is-in .wrap__bar i { transform: scaleX(1); transition: transform 700ms var(--ease-snap); }
.js-anim .dayboard__card.is-in .wrap__row:nth-of-type(1) .wrap__bar i { transition-delay: 400ms; }
.js-anim .dayboard__card.is-in .wrap__row:nth-of-type(2) .wrap__bar i { transition-delay: 520ms; }
.js-anim .dayboard__card.is-in .wrap__row:nth-of-type(3) .wrap__bar i { transition-delay: 640ms; }
.js-anim .dayboard__card.is-in .wrap__row:nth-of-type(4) .wrap__bar i { transition-delay: 760ms; }
.js-anim .dayboard__card.is-in .wrap__row:nth-of-type(5) .wrap__bar i { transition-delay: 880ms; }
.js-anim .dayboard__card.is-in .wrap__row:nth-of-type(6) .wrap__bar i { transition-delay: 1000ms; }

/* Sunny's six-week line · a full-bleed footer wave under both columns */
.trend { margin: var(--space-md) calc(-1 * var(--space-lg)) 0; }
.trend__head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 8px;
  margin: 0 0 4px; padding: 0 var(--space-lg);
}
.trend__head .wrap__label { white-space: nowrap; }
.trend__delta {
  font-family: var(--font-label); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.04em; font-variant-numeric: tabular-nums;
  color: var(--hero-blue);
  white-space: nowrap; margin-left: auto;
}
.trend__plot { position: relative; }
.trend__chart { display: block; width: 100%; height: 72px; }
.trend__line {
  stroke: var(--hero-blue); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
/* the endpoint dot and value are HTML, pinned to the last data point (x 614/640, y 52/72) */
.trend__dot {
  position: absolute; left: calc(100% * 614 / 640); top: 52px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--hero-blue);
  box-shadow: 0 0 0 2px var(--bubble-white);
  translate: -50% -50%;
}
.trend__val {
  position: absolute; left: calc(100% * 614 / 640 - 12px); top: 10px;
  translate: -100% 0;
  font-family: var(--font-label); font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-90);
}
.js-anim .trend__line { stroke-dasharray: 820; stroke-dashoffset: 820; }
.js-anim .dayboard__card.is-in .trend__line { stroke-dashoffset: 0; transition: stroke-dashoffset 1100ms var(--ease-out) 350ms; }
.js-anim .trend__area, .js-anim .trend__dot, .js-anim .trend__val { opacity: 0; }
.js-anim .dayboard__card.is-in .trend__area { opacity: 1; transition: opacity 500ms var(--ease-out) 1000ms; }
.js-anim .dayboard__card.is-in .trend__dot,
.js-anim .dayboard__card.is-in .trend__val { opacity: 1; transition: opacity 300ms var(--ease-out) 1300ms; }

.roster__face { width: 42px; height: auto; overflow: visible; cursor: pointer; flex: none; }
.roster__face .char__body { transform-origin: 50% 100%; transition: transform 90ms var(--ease-out); }
.roster__face:active .char__body { transform: scale(0.92); }
/* the open seat · the team's colors bloom behind the invitation */
#card-yours {
  flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-sm);
  text-align: center;
  padding: var(--space-lg);
  background:
    radial-gradient(60% 95% at 12% -12%, var(--tint-cyan), transparent 62%),
    radial-gradient(60% 95% at 88% -12%, var(--tint-lav), transparent 62%),
    radial-gradient(52% 75% at 50% -22%, var(--tint-pear), transparent 68%),
    var(--bubble-white);
  border: 1px solid var(--ink-12);
  box-shadow: var(--shadow-chip);
  --phone-screen: var(--bubble-white);
}
.yours__team { display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-2xs); }
.yours__team .chip-ava { width: 34px; height: 34px; border: 2px solid var(--color-paper); }
.yours__team .chip-ava + .chip-ava { margin-left: -9px; }
.yours__team .chip-mascot { width: 21px; height: 21px; }
.yours__seat { background: transparent; width: 38px; height: 38px; border: none; }
.yours__seat svg { width: 100%; height: 100%; overflow: visible; }
.ghost-plus { transition: opacity var(--dur-med) var(--ease-out); }

/* one message in, one agent out · the hatch state lives on the card */
#card-yours .ghost-body { fill: transparent; transition: fill var(--dur-med) var(--ease-out); }
#card-yours.is-live .ghost-body { fill: var(--seat-fill, transparent); }
#card-yours.is-live .ghost-eyes { opacity: 1; }
#card-yours.is-live .ghost-eyes rect { fill: var(--char-face); }
#card-yours.is-live .ghost-plus { opacity: 0; }

.yours__caret {
  display: inline-block; width: 2px; height: 1em;
  background: var(--phone-blue-ink);
  margin-left: 2px; vertical-align: -2px;
  animation: caret 1.1s steps(1) infinite;
}
#yours-ask { min-height: 1.33em; }

/* the send, the birth, the welcome */
.yours__sent { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.yours__delivered {
  font-family: var(--font-phone); font-size: 10px; font-weight: 500;
  color: var(--phone-meta);
  margin-right: 8px;
  opacity: 0; transition: opacity 220ms var(--ease-out);
}
.yours__sent.is-sent .yours__delivered { opacity: 1; }
.yours__seat { position: relative; }
@keyframes seat-pop { 0% { transform: scale(0.55); } 62% { transform: scale(1.12); } 100% { transform: scale(1); } }
.js-anim #card-yours.is-live .yours__seat { animation: seat-pop 480ms var(--ease-spring); }
.js-anim #card-yours.is-live .yours__seat::after {
  content: ""; position: absolute; top: -8px; right: -7px;
  width: 14px; height: 14px;
  background:
    linear-gradient(90deg, transparent 44%, var(--color-accent-3) 44% 56%, transparent 56%),
    linear-gradient(0deg,  transparent 44%, var(--color-accent-3) 44% 56%, transparent 56%);
  animation: star-burst 560ms ease-out 140ms both;
  pointer-events: none;
}
@keyframes ava-hop { 0%, 100% { translate: 0 0; } 45% { translate: 0 -5px; } }
.js-anim .yours__team.is-cheer .chip-ava:nth-child(1) { animation: ava-hop 460ms var(--ease-spring) 40ms; }
.js-anim .yours__team.is-cheer .chip-ava:nth-child(2) { animation: ava-hop 460ms var(--ease-spring) 95ms; }
.js-anim .yours__team.is-cheer .chip-ava:nth-child(3) { animation: ava-hop 460ms var(--ease-spring) 150ms; }
.js-anim .yours__team.is-cheer .chip-ava:nth-child(4) { animation: ava-hop 460ms var(--ease-spring) 205ms; }
.js-anim .yours__team.is-cheer .chip-ava:nth-child(5) { animation: ava-hop 460ms var(--ease-spring) 260ms; }

.yours__title {
  font-weight: 700;
  font-size: var(--text-md); letter-spacing: -0.015em;
}
#card-yours .dayboard__msgs { width: 100%; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-sm); }
#card-yours .dayboard__msgs .msg { max-width: min(100%, 560px); }

/* Dozer wakes when you linger */
@media (hover: hover) {
  #card-dozer:hover .char__eyes-open { display: block; }
  #card-dozer:hover .char__eyes-closed { display: none; }
}

/* cards drift in, then breathe with a whisper of parallax.
 * The reveal fails open: cards drift, they never fade. A fast scroller sees
 * the board instantly; the motion is garnish, not a gate on the content. */
.js-anim .dayboard__card { translate: 0 14px; transition: translate 480ms var(--ease-snap); }
.js-anim .dayboard__card.is-in { translate: 0 0; transition: translate 480ms var(--ease-snap), transform 80ms linear; }

/* the open role: eyes appear when you look closer */
#card-yours .ghost-eyes { opacity: 0; transition: opacity var(--dur-med) var(--ease-out); }
@media (hover: hover) {
  #card-yours:hover .ghost-eyes { opacity: 1; }
  #card-yours:hover .ghost-plus { opacity: 0; }
}

/* ============ creed · one serif breath ============ */

.creed {
  max-width: var(--shell); margin-inline: auto;
  padding: var(--space-lg) var(--page-gutter) var(--space-2xl);
  text-align: center;
}
.creed__line {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(1.85rem, 2.6vw + 1rem, 3rem);
  line-height: 1.22; letter-spacing: -0.01em;
  color: var(--color-ink);
  text-wrap: balance;
  max-width: 24ch; margin-inline: auto;
}
.creed__setup {
  display: block;
  font-size: 0.6em; color: var(--ink-60);
  margin-bottom: 0.35em;
}
.creed__punch { position: relative; display: inline-block; }
.js-anim .js-anim .creed.is-head-in .creed__hl { position: relative; white-space: nowrap; }
.creed__stroke {
  position: absolute; left: -1.5%; bottom: -0.3em;
  width: 103%; height: 0.34em;
  overflow: visible;
}
.creed__stroke path { stroke: var(--pen-ink); stroke-width: 4.5; fill: none; stroke-linecap: round; }

/* the coverage strip under the creed: a river of banks, because 12,000 never ends */
.creed__banks-wrap { margin-top: var(--space-2xl); }
.creed__banks-label {
  margin: 0 0 var(--space-lg);
  display: inline-flex; align-items: flex-start; gap: 7px;
  font-family: var(--font-hand); font-size: 16px; font-weight: 500;
  color: var(--pen-ink);
}
.creed__banks-arrow { width: 34px; height: 17px; flex: none; translate: 0 6px; }
.bankriver {
  display: flex; flex-direction: column; gap: 16px;
  width: 100vw; margin-left: calc(50% - 50vw);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.bankriver__row { display: flex; width: max-content; }
.bankriver__track {
  list-style: none; margin: 0; padding: 6px;
  display: flex; gap: 14px; align-items: center;
  animation: river-drift 70s linear infinite;
}
.bankriver__row--b .bankriver__track { animation-direction: reverse; animation-duration: 84s; }
@keyframes river-drift { to { translate: -100% 0; } }
/* each bank is a little card · real card grammar: logo, contactless, chip, number, holder */
.bankcard {
  position: relative;
  width: 134px; height: 84px; flex: none;
  padding: 10px 12px 9px;
  border-radius: 9px;
  text-align: left;
  overflow: hidden; /* the brand band clips to the card corners */
  background:
    linear-gradient(115deg, rgba(255,255,255,0.08), transparent 44%, rgba(255,255,255,0.05) 86%),
    var(--card-face, var(--bubble-white));
  box-shadow:
    inset 0 -4px 0 var(--card-band, transparent),
    inset 0 1px 0 rgba(255,255,255,0.2),
    inset 0 -1px 0 rgba(0,0,0,0.14),
    0 0 0 0.5px var(--card-ring, rgba(0,0,0,0.22)),
    0 3px 7px -3px oklch(20% 0.012 250 / 0.35);
  display: flex; flex-direction: column;
  translate: 0 var(--card-y, 0); /* stagger, not rotation: rotated glyphs rasterize soft */
}
/* contactless arcs sit mid-right, across from the chip */
.bankcard::before {
  content: ""; position: absolute; top: 39px; right: 12px;
  width: 11px; height: 11px;
  background: radial-gradient(circle at 0% 50%,
    transparent 0 2.4px, var(--card-soft, var(--ink-25)) 2.4px 3.4px,
    transparent 3.4px 5.2px, var(--card-soft, var(--ink-25)) 5.2px 6.2px,
    transparent 6.2px 8px, var(--card-soft, var(--ink-25)) 8px 9px, transparent 9px);
}
.bankriver__track li:nth-child(5n+1) { --card-y: -4px; }
.bankriver__track li:nth-child(5n+2) { --card-y: 3px; }
.bankriver__track li:nth-child(5n+3) { --card-y: -1px; }
.bankriver__track li:nth-child(5n+4) { --card-y: 4px; }
.bankriver__track li:nth-child(5n)   { --card-y: -2px; }
.bankcard__logo {
  width: 20px; height: 20px; padding: 2.5px;
  background: #fff; border-radius: 5.5px;
  box-shadow: 0 0.5px 1.5px rgba(0,0,0,0.25);
  display: block;
}
/* the chip sits alone at mid-left, air around it, gold with its contact cross */
.bankcard__emv {
  position: absolute; top: 37px; left: 12px;
  width: 19px; height: 14px; border-radius: 3.5px;
  background:
    linear-gradient(oklch(60% 0.09 85 / 0.85), oklch(60% 0.09 85 / 0.85)) 50% 0 / 1.3px 100% no-repeat,
    linear-gradient(oklch(60% 0.09 85 / 0.85), oklch(60% 0.09 85 / 0.85)) 0 33% / 100% 1.2px no-repeat,
    linear-gradient(oklch(60% 0.09 85 / 0.85), oklch(60% 0.09 85 / 0.85)) 0 66% / 100% 1.2px no-repeat,
    linear-gradient(135deg, oklch(88% 0.08 92), oklch(73% 0.1 85));
  box-shadow: inset 0 0 0 1px oklch(62% 0.09 85 / 0.55), 0 0.5px 1.5px rgba(0,0,0,0.3);
}
/* the number and the holder line, embossed in the face's ink */
.bankcard__num {
  margin-top: auto;
  padding-left: 27px; /* the number runs to the right of the chip, never under it */
  font-family: var(--font-label); font-size: 10px; letter-spacing: 0.16em;
  color: var(--card-ink, var(--ink-60)); line-height: 1;
  text-shadow: var(--card-emboss, none);
  opacity: 0.9;
}
.bankcard__name {
  margin-top: 4px;
  font-family: var(--font-display); font-size: 8px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.15em; line-height: 1.1;
  color: var(--card-ink, var(--ink-70)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: var(--card-emboss, none);
}
/* the far row sits a step deeper in the stream */
.bankriver__row--b .bankcard { scale: 0.88; opacity: 0.9; margin-inline: -6px; }
.creed__banks-note {
  margin: var(--space-lg) 0 0;
  font-size: var(--text-sm); color: var(--ink-60);
}
/* entrance: the two streams slide in from opposite banks once the pen has drawn */
.js-anim .creed .bankriver__row,
.js-anim .creed .creed__banks-label,
.js-anim .creed .creed__banks-note { opacity: 0; }
.js-anim .creed .bankriver__row--a { translate: 48px 10px; }
.js-anim .creed .bankriver__row--b { translate: -48px 10px; }
.js-anim .creed.is-head-in .creed__banks-label { opacity: 1; transition: opacity 500ms var(--ease-out) 600ms; }
.js-anim .creed.is-head-in .bankriver__row {
  opacity: 1; translate: 0 0;
  transition: opacity 600ms var(--ease-out), translate 800ms var(--ease-snap);
}
.js-anim .creed.is-head-in .bankriver__row--a { transition-delay: 750ms; }
.js-anim .creed.is-head-in .bankriver__row--b { transition-delay: 900ms; }
.js-anim .creed.is-head-in .creed__banks-note { opacity: 1; transition: opacity 500ms var(--ease-out) 1250ms; }
@media (prefers-reduced-motion: reduce) {
  .bankriver { mask-image: none; -webkit-mask-image: none; }
  .bankriver__row { width: auto; justify-content: center; }
  .bankriver__track { animation: none; flex-wrap: wrap; justify-content: center; }
  .js-anim .creed .bankriver__row, .js-anim .creed .creed__banks-label, .js-anim .creed .creed__banks-note { opacity: 1; translate: 0 0; transition: none; }
  .bankriver { width: auto; margin-left: 0; max-width: 62rem; margin-inline: auto; }
  .bankriver__track[aria-hidden] { display: none; }
}
@media (max-width: 40rem) {
  .bankcard { width: 116px; height: 73px; }
  .bankcard__name { font-size: 7.5px; letter-spacing: 0.09em; }
  .bankcard__num { font-size: 8.5px; letter-spacing: 0.12em; }
  .bankcard__emv { top: 31px; }
  .bankcard::before { top: 33px; }
  .bankriver { -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
}
/* the pen draws the underline when the line comes into view */
.js-anim .creed__stroke path { stroke-dasharray: 235; stroke-dashoffset: 235; }
.js-anim .creed.is-head-in .creed__stroke path { animation: pen-draw 650ms var(--ease-out) 350ms forwards; }
@keyframes pen-draw { to { stroke-dashoffset: 0; } }

/* scrub mode: while the section is pinned, vertical scroll drives the rail */

 

/* the whole board answers the cursor: cards lift a hair under the pointer */
@media (hover: hover) and (pointer: fine) {
  .dayboard .dayboard__card {
    transition: translate 240ms var(--ease-snap), box-shadow 240ms var(--ease-out);
  }
  .dayboard .dayboard__card:hover { translate: 0 -3px; box-shadow: var(--shadow-chip-hover); }
}

/* the personalize card sits on the texting tint, grained like its siblings */
#card-yours {
  background-color: var(--tint-blue);
  border-color: oklch(55% 0.20 258 / 0.14);
  padding-top: var(--space-lg); padding-bottom: var(--space-lg);
  --phone-screen: var(--tint-blue); /* bubble tail cutouts carve against the tint, not white */
}
#card-yours .yours__team .chip-ava { width: 34px; height: 34px; }
.yours__sub {
  text-align: center;
  font-size: var(--text-sm); color: var(--ink-60);
  margin: -4px 0 var(--space-sm);
}
.yours__ideas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin-bottom: var(--space-sm); }
.yours__ideas span {
  font-family: var(--font-phone); font-size: 12.5px; font-weight: 500;
  padding: 6px 13px; border-radius: 16px;
  background: var(--draft-bg);
  border: 1.5px dashed var(--draft-line);
  color: var(--color-blue-text);
}

/* ============ step demo vignettes · CSS-only loops ============ */

.step__sys {
  text-align: center;
  font-family: var(--font-label); font-size: 10.5px;
  color: var(--ink-60);
  margin-top: 2px;
}
.link-card {
  display: flex; align-items: center; gap: 10px;
  background: var(--color-paper);
  border: 1px solid var(--ink-12);
  border-radius: 12px;
  padding: 9px 12px;
  max-width: 92%;
}
.link-card__glyph {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  background: var(--tint-cyan);
  border-radius: 7px;
  color: var(--color-accent-2-text);
}
.link-card__glyph svg { width: 15px; height: 15px; }
.link-card__body { display: flex; flex-direction: column; line-height: 1.3; }
.link-card__body b { font-size: 12px; font-weight: 600; }
.link-card__body i { font-style: normal; font-size: 10.5px; color: var(--ink-60); }

/* The section pins and the scroll drives the conversation: messages arrive
 * into a chat window (and retract when scrolling back), the current chapter
 * lights in the margin, and the rail draws in sync. JS builds this stage;
 * without JS, on mobile, or with reduced motion the annotated list below
 * renders as-is. */
.setup--scrub { max-width: none; }
.setup--scrub::before, .setup--scrub::after { content: none; } /* the rail moves into the stage */
.story-stage {
  position: sticky; top: calc(var(--bar-h) + 20px);
  max-width: 66rem; margin-inline: auto;
  height: min(84vh, 820px);
  display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: stretch;
  transform: scale(var(--zoom, 1));
  transform-origin: 50% 38%;
  transition: transform 420ms var(--ease-snap);
}
.story-notes { position: relative; display: flex; flex-direction: column; gap: var(--space-lg); padding-top: 6px; }
.story-notes::before, .story-notes::after {
  content: "";
  position: absolute; top: 18px; bottom: 12px;
  left: calc(var(--node) / 2 - 1.5px);
  width: 3px; border-radius: var(--radius-pill);
  background: linear-gradient(180deg,
    var(--color-blue-text) 0%, var(--color-blue-text) 8%,
    var(--color-mint-text) 30%, var(--color-mint-text) 40%,
    var(--color-lav-text) 62%, var(--color-lav-text) 72%,
    var(--color-accent-text) 94%, var(--color-accent-text) 100%);
}
.story-notes::before, .story-notes::after { z-index: 0; }
.story-notes::before { opacity: 0.14; }
.story-notes::after {
  opacity: 0.62;
  clip-path: inset(0 0 calc((1 - var(--seq-p, 0)) * 100%) 0);
  transition: clip-path 160ms linear;
}
/* stations light when the rail reaches them and STAY lit; the future ones
 * wait quietly at low volume: no filters, no halos */
.setup--scrub .setup__note { translate: none; }
.setup--scrub .setup__note .setup__marker { color: var(--ink-60); transition: color 360ms var(--ease-out); }
.setup--scrub .setup__note .setup__num::after { opacity: 0.72; }
.setup--scrub .setup__note :is(.setup__time, .setup__desc) { opacity: 0.72; transition: opacity 360ms var(--ease-out); }
.setup--scrub .setup__note:is(.is-active, .is-passed) .setup__marker { color: var(--color-ink); }
.setup--scrub .setup__note:is(.is-active, .is-passed) .setup__num::after { opacity: 0; }
.setup--scrub .setup__note:is(.is-active, .is-passed) :is(.setup__time, .setup__desc) { opacity: 1; }
.setup--scrub .setup__end { opacity: 0; transition: opacity 360ms var(--ease-out); margin-top: auto; }
.setup--scrub .setup__end.is-on { opacity: 1; }
.story-window {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 44px);
  mask-image: linear-gradient(180deg, transparent 0, #000 44px);
}
.story-feed {
  display: flex; flex-direction: column; gap: 4px;
  padding-top: 48px;
  transition: transform 380ms var(--ease-snap);
  will-change: transform;
}
.setup--scrub .story-feed > * {
  opacity: 0; translate: 0 18px;
  transition: opacity 380ms var(--ease-out), translate 420ms var(--ease-snap);
}
.setup--scrub .story-feed > .is-on { opacity: 1; translate: 0 0; }
.setup--scrub .story-feed .msg { font-size: 17px; max-width: min(78%, 34rem); }
.setup--scrub .story-feed .link-card { max-width: min(94%, 36rem); }
.setup--scrub .story-feed .msg__tapback {
  opacity: 0; transform: scale(0); transform-origin: bottom right;
  transition: opacity var(--dur-fast) var(--ease-out) 300ms, transform 420ms var(--ease-spring) 300ms;
}
.setup--scrub .story-feed .is-on .msg__tapback { opacity: 1; transform: scale(1); }

/* Scroll-told story: with JS and motion, each piece of the setup reveals as
 * it crosses the reader's eyeline, and the rail draws down in step with the
 * scroll. Without JS, with reduced motion, or on any misfire, everything is
 * simply visible: the reveal is garnish, never a gate. */
.js-seq .setup__note,
.js-seq .setup__msgs > *,
.js-seq .setup__end,
.js-seq .setup__go {
  opacity: 0; translate: 0 14px;
  transition: opacity 420ms var(--ease-out), translate 460ms var(--ease-snap);
}
.js-seq :is(.setup__note, .setup__msgs > *, .setup__end, .setup__go).is-seen { opacity: 1; translate: 0 0; }
/* tapbacks pop just after their bubble lands */
.js-seq .setup__msgs .msg__tapback {
  opacity: 0; transform: scale(0); transform-origin: bottom right;
  transition: opacity var(--dur-fast) var(--ease-out) 280ms, transform 420ms var(--ease-spring) 280ms;
}
.js-seq .setup__msgs .is-seen .msg__tapback { opacity: 1; transform: scale(1); }
@keyframes c-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }

/* the header runs as one row (title, lede, host) and the chat takes the full
 * stage below it: no half-empty intro column beside the fun part */
.faq-grid {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
}
.faq-side { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); }
.faq-side .section__title { margin-bottom: 0; }
.faq-side .section__lede { margin: 0 0 var(--space-2xs); }
.faq--chat { max-width: 54rem; width: 100%; margin-inline: auto; } /* centered: the air splits instead of pooling left */
.faq-side__num {
  white-space: nowrap; /* a phone number never breaks in half */
  font-family: var(--font-label); font-size: 0.9em;
  color: var(--color-accent-2-text);
  text-decoration-color: var(--ink-25); text-underline-offset: 3px;
}
.faq-host { width: 64px; margin-left: auto; }
.faq--chat {
  display: flex; flex-direction: column; gap: var(--space-md);
  min-height: 15rem; /* one exchange swaps in place; the tray below stays put */
  --phone-screen: var(--color-paper); /* bubble tails cut against the page */
}
html.has-js .faq__item { display: none; }
html.has-js .faq__item.is-active { display: flex; }
.faq__item { display: flex; flex-direction: column; gap: 9px; }
.faq__q {
  appearance: none; border: 0; cursor: pointer;
  align-self: flex-end;
  max-width: 88%;
  font-family: var(--font-phone); font-size: 15.5px; font-weight: 500; line-height: 1.35;
  padding: 9px 14px;
  text-align: left;
  transition: translate var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), scale 100ms var(--ease-press);
}
.faq__q:hover { translate: 0 -1px; box-shadow: var(--shadow-chip); }
.faq__q:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.faq__a { display: flex; align-items: flex-end; gap: 8px; }
.faq__a .chip-ava { flex: none; margin-bottom: 1px; }
.faq__a .msg {
  max-width: min(82%, 46ch);
  font-family: var(--font-phone); font-size: 15.5px; line-height: 1.4;
  text-wrap: pretty;
}
.faq__a[hidden] { display: none; }
html:not(.has-js) .faq__a[hidden] { display: flex; } /* the suggestion tray · unasked questions wait here like iMessage reply chips */
.faq-tray { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: var(--space-lg); }
/* draft bubbles: dashed edge + a little send circle; hover previews the send */
.faq-chip {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px;
  align-self: auto; max-width: 100%;
  background: var(--draft-bg);
  border: 1.5px dashed var(--draft-line);
  border-radius: 18px;
  color: var(--phone-blue);
  font-family: var(--font-phone); font-size: 15px; font-weight: 500; line-height: 1.3;
  padding: 8px 9px 8px 14px;
  text-decoration: none;
  transition: translate var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out), scale 100ms var(--ease-press);
}
.faq-chip { position: relative; padding: 8px 14px; }
.faq-chip::after {
  content: "↑";
  position: absolute; right: -7px; top: 50%;
  width: 20px; height: 20px; margin-top: -10px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--phone-blue-ink); color: var(--phone-blue);
  font-size: 13px; font-weight: 700; line-height: 1;
  opacity: 0; transform: scale(0.4);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-med) var(--ease-spring);
}
@media (hover: hover) {
  .faq-chip:hover {
    translate: 0 -1px;
    background: var(--phone-blue);
    border-color: transparent; border-style: solid;
    color: var(--phone-blue-ink);
    box-shadow: var(--shadow-chip);
  }
  /* the send circle pokes out past the bubble's edge instead of widening it:
   * a chip that grew on hover shoved every neighbor in the tray 20px left */
  .faq-chip:hover::after { opacity: 1; transform: scale(1); }
}
.faq-chip:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.faq-chip--sms {
  background: var(--tint-mint);
  border-color: var(--line-mint);
  color: var(--color-mint-text);
}
.faq-chip--sms::after { content: none; }
.faq-chip--sms .num-imsg { width: 18px; height: 18px; border-radius: 22.5%; flex: none; box-shadow: 0 1px 2px var(--ink-12); }
.faq-chip--sms:hover { background: var(--color-mint-text); border-color: transparent; color: var(--bubble-white); }
.faq__q.is-sent, .faq__q:disabled { cursor: default; }
.faq__q.is-sent:hover, .faq__q:disabled:hover { translate: none; box-shadow: none; }

/* Pip is typing… */
.faq-typing-bubble { display: flex; align-items: center; gap: 5px; min-height: 1.4em; }
.faq-typing-bubble i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--phone-meta); opacity: 0.4;
  animation: faq-dot 1.2s var(--ease-in-out) infinite;
}
.faq-typing-bubble i:nth-child(2) { animation-delay: 0.18s; }
.faq-typing-bubble i:nth-child(3) { animation-delay: 0.36s; }
@keyframes faq-dot { 30% { opacity: 1; transform: translateY(-2px); } }

/* one of the cast peeks over the composer, watching what you type */
.composer--lg { position: relative; overflow: visible; }
.char--peeker {
  position: absolute; top: -42px; left: 15%;
  width: 76px; height: 54px;
  clip-path: inset(0 0 12px 0);
  pointer-events: none;
}
/* the close is a Neko-style wash: the page fades into warm pear and the
 * whole section is one centered set piece: title, number, composer */

.cta-final {
  text-align: center;
  max-width: none; /* the wash runs edge to edge; the inner keeps the shell */
  padding-block: var(--space-3xl);
  background: linear-gradient(180deg, var(--color-paper) 0%, var(--tint-pear-soft) 55%, var(--tint-pear) 100%);
}
.cta-final .section__inner { max-width: var(--shell); margin-inline: auto; }
.cta-final__card {
  position: relative;
  max-width: min(46rem, 100%);
  margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-xl);
  color: var(--color-ink);
}
.cta-final__bridge {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-xl);
}
.cta-final__send { width: min(500px, 100%); }
.cta-final__send .composer { width: 100%; }
.cta-final .composer__plus { background: var(--ink-08); color: var(--ink-70); }
.cta-final__qr { display: none; margin: 0; }
.cta-final__ask {
  display: flex; align-items: flex-end; gap: 10px;
  max-width: min(46rem, 100%); /* rides the same column as the set piece */
  margin: 0 auto var(--space-lg);
  --phone-screen: var(--color-paper); /* tail cutout matches the page */
}
.cta-final__ask .msg { font-family: var(--font-phone); font-size: 17px; text-align: left; max-width: 30rem; }
.cta-final__ava {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  font-size: 15px;
  background: linear-gradient(var(--phone-avatar-emoji-1), var(--phone-avatar-emoji-2));
  border-radius: var(--radius-pill);
  box-shadow: 0 1px 3px var(--ink-12);
}
.js-anim .cta-final__ask { opacity: 0; }
.js-anim .cta-final__ask.is-in { animation: c-in 420ms var(--ease-snap) both; }
.cta-final__meta {
  margin: 6px 8px 0 0;
  text-align: right;
  font-family: var(--font-phone); font-size: 13px; font-weight: 500;
  color: var(--ink-60);
}
.js-anim .cta-final__meta { opacity: 0; }
.js-anim .cta-final__meta.is-in { opacity: 1; transition: opacity 200ms var(--ease-out); }
.js-anim .composer:not(.has-text) + .cta-final__meta.is-in { opacity: 0; }
.cta-final__title { font-size: var(--text-display); font-weight: 700; letter-spacing: -0.03em; }
.cta-final__number {
  display: inline-flex; align-items: center; gap: clamp(10px, 1.5vw, 18px);
  font-family: var(--font-label);
  font-size: var(--text-number);
  font-weight: 500; letter-spacing: -0.02em;
  text-decoration: none; white-space: nowrap;
  color: var(--color-ink);
  background: none; border: 0; padding: 0; cursor: pointer;
  transition: scale 100ms var(--ease-press);
}
.cta-final__number .num-chip__text { min-width: 17ch; text-align: center; transition: color var(--dur-med) var(--ease-out); }
.cta-final__number:hover .num-chip__text { color: var(--color-accent-text); }
.cta-final__copy {
  width: clamp(18px, 2vw, 26px); height: auto; flex: none;
  opacity: 0.7;
  overflow: visible;
  transition: opacity var(--dur-med) var(--ease-out);
}
.cta-final__number:hover .cta-final__copy { opacity: 1; }
.cta-final__copy .copy-glyph { transition: opacity var(--dur-fast) var(--ease-out); }
.cta-final__copy .copy-check {
  opacity: 0; transform: scale(0.5); transform-origin: 50% 50%;
  transition: opacity var(--dur-fast) var(--ease-out), transform 320ms var(--ease-spring);
}
.cta-final__number.is-copied .cta-final__copy { opacity: 1; }
.cta-final__number.is-copied .copy-glyph { opacity: 0; }
.cta-final__number.is-copied .copy-check { opacity: 1; transform: scale(1); }
.cta-final__number .num-imsg { width: clamp(26px, 3vw, 38px); height: auto; border-radius: 22.5%; box-shadow: 0 1px 3px var(--ink-12); flex: none; }

.btn__arrow { width: 14px; height: 14px; flex: none; }
.setup__go { display: flex; justify-content: center; margin-top: var(--space-xl); }

/* ============ footer · the bar, then the whole team on the hills ============ */

.footer {
  background: linear-gradient(180deg, var(--tint-pear) 0%, var(--hl-pear) 100%);
}
.footer__bar {
  max-width: var(--shell); margin-inline: auto;
  padding: var(--space-xl) var(--page-gutter) 0;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-lg); flex-wrap: wrap;
  position: relative;
}
.footer__wordmark {
  display: inline-flex; align-items: baseline;
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-lg); letter-spacing: -0.025em;
}
.footer__wordmark span { font-weight: 600; color: var(--color-mint-text); }
.footer__wordmark .blip { width: 1em; margin-right: 0.3em; align-self: center; translate: 0 0.05em; }
.footer__tag { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--ink-60); }
.footer__links {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-lg);
  padding-top: 6px;
  font-size: var(--text-sm);
}
.footer__links a {
  min-height: 44px;
  display: inline-flex; align-items: center;
  text-decoration: none; color: var(--ink-70);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__links a:hover { color: var(--color-ink); }
.footer__num {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-label); font-size: 13px; font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}
.footer__num .num-imsg { width: 18px; height: 18px; border-radius: 22.5%; flex: none; box-shadow: 0 1px 2px var(--ink-12); }

.scape {
  position: relative;
  height: clamp(280px, 32vw, 420px);
  margin-top: var(--space-xl);
  overflow: clip;
}
/* the sun is setting behind the ridge: a low glow that turns the cream wash
   into sky (paints under the hills; the svgs come later in the DOM) */
.scape::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(130% 110% at 50% 112%, var(--hl-pear), transparent 72%);
}
.scape__word {
  position: absolute; top: 5%; left: 50%; translate: -50% 0;
  margin: 0;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(4.2rem, 13vw, 11rem);
  letter-spacing: -0.045em; line-height: 1; white-space: nowrap;
  color: var(--ink-08);
  user-select: none;
}
.scape__hills, .scape__front { position: absolute; inset: 0; width: 100%; height: 100%; }
.scape__front { z-index: 3; pointer-events: none; }
.scape .char {
  position: absolute; z-index: 2;
  top: auto; right: auto; translate: none;
  animation: none; /* the hero cast's perch/idle rules stop at the hills */
}
.js-anim .scape .char { translate: 0 46px; opacity: 0; transition: translate 650ms var(--ease-snap), opacity 400ms var(--ease-out); }
.js-anim .scape.is-up .char { translate: 0 0; opacity: 1; }
.scape .char--penny { width: clamp(72px, 8vw, 118px);  left: 6%;  bottom: 40%; rotate: -4deg; } /* peeks over the front ridge */
.scape .char--pip { width: clamp(50px, 5.4vw, 78px);  left: 25%; bottom: 52%; rotate: -5deg; } /* up on the back ridge */
.scape .char--mint { width: clamp(40px, 4.6vw, 66px);  left: 47%; bottom: 25%; rotate: 3deg; }  /* peeks, sky behind his face */
.scape .char--sunny { width: clamp(86px, 9.2vw, 138px); left: 62%; bottom: 36%; rotate: 0deg; }  /* rises from behind the mid crest, base hidden */
.scape .char--dozer { width: clamp(48px, 5.8vw, 84px);  left: 87%; bottom: 26%; rotate: 7deg; }  /* asleep behind the near ridge */
.js-anim .scape .char--pip { transition-delay: 70ms; }
.js-anim .scape .char--penny { transition-delay: 140ms; }
.js-anim .scape .char--sunny { transition-delay: 210ms; }
.js-anim .scape .char--dozer { transition-delay: 280ms; }
.scape__meta {
  position: absolute; bottom: var(--space-md); left: 50%; translate: -50% 0;
  color: var(--hero-ink);
  background: var(--hill-4);
  padding: 6px 16px; border-radius: var(--radius-pill);
  font-size: var(--text-sm); white-space: nowrap;
  z-index: 4;
}

/* ============ press feedback ============ */
/* the audience is on a phone, where hover never fires, so a tap gets its own
 * answer before the after-effect (the FLIP send, the copied check) lands */
.faq-chip:active, .faq__q:not(:disabled):active, .num-chip:active, .rail-nav__dot:active { scale: 0.97; }
.cta-final__number:active { scale: 0.985; }

/* ============ star-burst (Hum move 7) ============ */

.star-burst {
  position: fixed; z-index: var(--z-burst);
  width: 24px; height: 24px;
  background:
    linear-gradient(90deg, transparent 47%, var(--color-accent-3) 47% 53%, transparent 53%),
    linear-gradient(0deg,  transparent 47%, var(--color-accent-3) 47% 53%, transparent 53%);
  animation: star-burst 420ms ease-out forwards;
  pointer-events: none;
}
@keyframes star-burst {
  0%   { transform: scale(0) rotate(0deg);    opacity: 1; }
  60%  { transform: scale(1.2) rotate(35deg); opacity: 0.9; }
  100% { transform: scale(1.4) rotate(45deg); opacity: 0; }
}

/* ============ responsive ============ */

@media (min-width: 60rem) {
  .cta-final__bridge {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px;
    gap: var(--space-lg) var(--space-xl);
    align-items: center;
  }
  .cta-final__title { grid-column: 1 / -1; }
  .cta-final__number { justify-self: center; }
  .cta-final__qr { display: block; width: 120px; }
  .cta-final__qr svg {
    display: block; width: 120px; height: 120px;
    box-sizing: border-box; padding: 6px;
    background: var(--bubble-white);
    border-radius: 12px;
    box-shadow: 0 0 0 1px var(--ink-08), 0 1px 2px -1px var(--ink-08), 0 2px 4px var(--ink-08);
  }
  .cta-final__qr figcaption {
    margin-top: 7px;
    font-family: var(--font-label); font-size: 11px; line-height: 1.25;
    color: var(--ink-60); text-align: center;
  }
}

@media (max-width: 60rem) {
  .nav__links { display: none; }
  .cta-final { padding-block: var(--space-2xl) var(--space-xl); }
  .nav__mobile-link {
    display: flex; align-items: center; justify-content: center;
    min-height: 44px; margin-left: auto;
    font-size: var(--text-sm); font-weight: 600; color: var(--ink-70);
    text-decoration: none;
  }
  .hero { padding-top: calc(var(--bar-h) + var(--space-xl)); }
  .hero__card { grid-template-columns: minmax(0, 1fr); padding: var(--space-xl) var(--space-lg) 0; margin-bottom: var(--space-2xl); }
  .hero__stage { margin-top: 0; }
  .hero__aside { margin-bottom: var(--space-xs); } /* the arrow lands next to the phone it points at */
  .aside-dir--right { display: none; }
  .aside-dir--down { display: inline; }
  /* the phone sits centered below, so the arrow bends down and back toward it */
  .aside-arrow { rotate: 145deg; translate: -2px 10px; }
  .char--dozer { left: auto; right: 12%; top: -2.2rem; }
  .agent-chip { display: none; }
  .faq-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .faq-host { display: none; }
  .faq__q { max-width: 94%; }
  .faq__a .msg { max-width: 100%; }
  /* the bar hands off to the hills with no dead cream between: tighter bar,
     tighter link rows, and the scene itself grows to close the page */
  .footer__bar { padding-top: var(--space-lg); }
  .footer__links { row-gap: 0; padding-top: 0; }
  .scape { height: 264px; margin-top: var(--space-sm); }
  .scape__word { font-size: 3.4rem; top: 8%; }
  .scape .char--mint, .scape .char--dozer { display: none; }
  .scape .char--pip { left: 8%; bottom: 50%; }
  .scape .char--penny { left: 36%; bottom: 24%; }
  .scape .char--sunny { left: 60%; bottom: 34%; }
  .hero__stage { padding-top: var(--space-md); }
  .phone { margin-bottom: calc(var(--space-xl) * -1); transform: none; }
  .spark--1 { top: 6%; left: auto; right: 8%; }
  .spark--2 { display: none; }
  /* the board becomes a swipeable carousel · next card peeks in from the right */
  .dayboard {
    grid-template-columns: none;
    grid-template-areas: none;
    grid-auto-flow: column;
    grid-auto-columns: min(84%, 24rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--page-gutter);
    margin-inline: calc(-1 * var(--page-gutter)); /* bleed to the screen edge */
    padding: 4px var(--page-gutter) var(--space-sm);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .dayboard::-webkit-scrollbar { display: none; }
  /* uniform frames: the row stretches every card to match the fullest one, so
     the thread hangs from the claim and the proof block sits on the bottom
     edge (the shape Mint's night card already has) instead of leaving a
     ragged white gap under the short cards */
  #team .dayboard__card:not(#card-yours) .dayboard__msgs { margin-top: auto; }
  #team .dayboard__card .merch,
  #team .dayboard__card .wrap { padding-bottom: var(--space-lg); }
  /* nothing clips at this size, so the edge fade only needs to kiss the bottom */
  #team .dayboard__card:not(#card-yours)::after { height: 28px; }
  /* Sunny slims to the single-column slot: the six-week wave and the two
     thinnest bars are desktop luxuries that would stretch the whole rail */
  #card-sunny .trend { display: none; }
  #card-sunny .wrap .wrap__row:nth-child(n + 6) { display: none; }
  .dayboard__card { grid-area: auto !important; scroll-snap-align: start; }
  .dayboard__msgs .msg { max-width: min(92%, 26rem); }
  #card-yours { padding: var(--space-xl) var(--space-md); }
  #card-yours.dayboard__card--standalone { width: 100%; margin-top: var(--space-xl); }
  #team .dayboard { grid-template-rows: none; }

  /* carousel rail nav · the active dot stretches into the card's color */
  .rail-nav { display: flex; align-items: center; justify-content: center; gap: var(--space-lg); margin-top: var(--space-md); }
  .rail-nav__dots { display: flex; align-items: center; gap: 8px; }
  .rail-nav__dot {
    appearance: none; border: 0; padding: 0; cursor: pointer;
    width: 8px; height: 8px; border-radius: var(--radius-pill);
    background: var(--ink-25);
    transition: width 320ms var(--ease-snap), background-color var(--dur-fast) var(--ease-out), scale 100ms var(--ease-press);
  }
  .rail-nav__dot:hover { background: var(--ink-60); }
  .rail-nav__dot.is-here { width: 24px; background: var(--dot-c, var(--color-ink)); }
  .rail-nav__dot:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
  .rail-nav__btn {
    display: none;
    width: 32px; height: 32px; flex: none;
    place-items: center;
    border: 1px solid var(--ink-12); border-radius: 50%;
    background: var(--bubble-white); color: var(--ink-70);
    box-shadow: var(--shadow-chip);
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-press), box-shadow var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
  }
  .rail-nav__btn svg { width: 14px; height: 14px; }
  .rail-nav__btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-chip-hover); color: var(--color-ink); }
  .rail-nav__btn:active:not(:disabled) { transform: translateY(1px) scale(0.94); }
  .rail-nav__btn:disabled { opacity: 0.3; cursor: default; box-shadow: none; }
  @media (hover: hover) { .rail-nav__btn { display: grid; } }
}

@media (max-width: 40rem) {
  .nav__bar-inner { gap: var(--space-sm); padding-inline: 14px 6px; }
  .nav__mobile-link { font-size: 12px; }
  .nav__cta { padding-inline: 0.75rem; }
  .hero__title { font-size: clamp(2.25rem, 8.5vw, 2.6rem); }
  .section__title { font-size: var(--text-xl); }
  .char--mint { left: -5%; bottom: 42%; }
  .phone { --phone-w: clamp(260px, 78vw, 320px); }
  .btn--lg { width: 100%; padding: 0.9rem 1rem; font-size: var(--text-base); }
  .hero__cta { gap: var(--space-md); }
}

@media (max-width: 30rem) {
  .hero__lede-more { display: none; }
}

@media (max-width: 22.5rem) {
  .hero__title { font-size: clamp(2.15rem, 8.5vw, 2.3rem); }
}

/* without the animated loop (no JS, or reduced motion), show the day scene only
 * so the static transcript fits the screen without clipping */
html:not(.js-anim) [data-step="20"],
html:not(.js-anim) [data-step="21"],
html:not(.js-anim) [data-step="23"],
html:not(.js-anim) [data-step="31"] { display: none; } /* ============ pricing · a receipt ============ */
.price {
  display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: center; /* the steps sit midway beside the tall receipt */
  margin-top: var(--space-xl);
}
/* the wrapper holds the shadow and the tilt; the paper holds the torn edge (a clip would eat the shadow) */
.receipt-wrap {
  position: relative;
  /* no tilt: sub-1deg rotation rasterizes the mono text soft */
  filter: drop-shadow(0 1px 2px oklch(20% 0.012 250 / 0.06)) drop-shadow(0 18px 28px oklch(20% 0.012 250 / 0.14));
}
/* the receipt rides the section's head reveal, then the stamp inks on after
 * it: this was the one section that just existed while every other arrived */
.js-anim .receipt-wrap { opacity: 0; translate: 0 18px; }
.js-anim .is-head-in .receipt-wrap {
  opacity: 1; translate: 0 0;
  transition: opacity 480ms var(--ease-out) 140ms, translate 560ms var(--ease-snap) 140ms;
}
.js-anim .receipt__stamp { opacity: 0; scale: 1.5; }
.js-anim .is-head-in .receipt__stamp {
  opacity: 0.85; scale: 1;
  transition: opacity 200ms var(--ease-out) 620ms, scale 320ms var(--ease-press) 620ms;
}
/* the receipt: paper, mono, a torn bottom edge */
.receipt {
  position: relative;
  background: var(--bubble-white);
  padding: 26px 24px 30px;
  font-family: var(--font-label); font-size: 12.5px; line-height: 1.5;
  letter-spacing: 0.02em; /* a touch of dot-matrix looseness */
  color: var(--ink-70);
  font-variant-numeric: tabular-nums;
  clip-path: polygon(0 0, 100% 0, 100.00% calc(100% - 0px), 96.43% calc(100% - 9px), 92.86% calc(100% - 0px), 89.29% calc(100% - 9px), 85.71% calc(100% - 0px), 82.14% calc(100% - 9px), 78.57% calc(100% - 0px), 75.00% calc(100% - 9px), 71.43% calc(100% - 0px), 67.86% calc(100% - 9px), 64.29% calc(100% - 0px), 60.71% calc(100% - 9px), 57.14% calc(100% - 0px), 53.57% calc(100% - 9px), 50.00% calc(100% - 0px), 46.43% calc(100% - 9px), 42.86% calc(100% - 0px), 39.29% calc(100% - 9px), 35.71% calc(100% - 0px), 32.14% calc(100% - 9px), 28.57% calc(100% - 0px), 25.00% calc(100% - 9px), 21.43% calc(100% - 0px), 17.86% calc(100% - 9px), 14.29% calc(100% - 0px), 10.71% calc(100% - 9px), 7.14% calc(100% - 0px), 3.57% calc(100% - 9px), 0.00% calc(100% - 0px));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.03'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(90deg, oklch(20% 0.012 250 / 0.05), transparent 8% 92%, oklch(20% 0.012 250 / 0.05));
}
.receipt__head { text-align: center; padding-bottom: 12px; border-bottom: 1px dashed var(--ink-25); }
.receipt__brand { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.03em; color: var(--color-ink); }
.receipt__sub { margin: 2px 0 0; font-size: 11px; color: var(--ink-60); }
.receipt__meta {
  margin: 10px 0 0;
  display: flex; justify-content: space-between;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-60);
}
.receipt__team { display: flex; align-items: center; justify-content: center; padding: 12px 0 4px; }
.receipt__team-note {
  margin: 0 0 8px; text-align: center;
  font-family: var(--font-hand); font-size: 14px; font-weight: 500;
  color: var(--pen-ink);
}
.receipt__team .chip-ava { width: 30px; height: 30px; border: 2px solid var(--bubble-white); }
.receipt__team .chip-ava + .chip-ava { margin-left: -8px; }
.receipt__team .chip-mascot { width: 18px; height: 18px; }
.receipt__team .yours__seat { display: none; }
.receipt__lines, .receipt__totals { list-style: none; margin: 0; padding: 0; }
.receipt__lines li, .receipt__totals li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.receipt__lines { padding: 8px 0 10px; border-bottom: 1px dashed var(--ink-25); }
/* dot leaders carry the eye from item to price, like the real thermal thing */
.receipt__lines li { gap: 0; align-items: baseline; }
.receipt__lines li::before {
  content: ""; order: 2; flex: 1; min-width: 14px; margin-inline: 7px;
  border-bottom: 2px dotted var(--ink-25);
  translate: 0 -3px;
}
.receipt__lines li span:first-child { order: 1; }
.receipt__lines li span:last-child { order: 3; }
.receipt__lines li span:last-child { color: var(--ink-60); }
.receipt__totals { padding: 10px 0 12px; border-bottom: 1px dashed var(--ink-25); }
.receipt__total { font-weight: 700; font-size: 18px; color: var(--color-ink); padding-bottom: 6px; }
.receipt__total span:first-child { text-transform: uppercase; letter-spacing: 0.09em; }
.receipt__free { font-weight: 700; color: var(--step-green); }
.receipt__free span:last-child { background: var(--tint-mint); padding: 0 6px; border-radius: 3px; }
.receipt__cancel { font-weight: 700; color: var(--color-ink); }
/* the star rule that thermal printers love */
.receipt__stars {
  margin: 10px 0 0; text-align: center;
  font-size: 11px; letter-spacing: 0.45em; text-indent: 0.45em;
  color: var(--ink-60);
}
/* the barcode · varied widths on a long period so it never reads as stripes */
.receipt__bar {
  position: relative;
  height: 34px; margin: 8px 10px 4px;
  background: repeating-linear-gradient(90deg,
    var(--color-ink) 0 2px, transparent 2px 3.5px,
    var(--color-ink) 3.5px 6.5px, transparent 6.5px 8px,
    var(--color-ink) 8px 9px, transparent 9px 13px,
    var(--color-ink) 13px 14px, transparent 14px 15.5px,
    var(--color-ink) 15.5px 19px, transparent 19px 21px);
  opacity: 0.8;
}
/* EAN guard bars run a little long at both ends */
.receipt__bar::before, .receipt__bar::after {
  content: ""; position: absolute; top: 0; bottom: -4px; width: 2px;
  background: var(--color-ink);
}
.receipt__bar::before { left: -6px; box-shadow: 4px 0 0 var(--color-ink); }
.receipt__bar::after { right: -6px; box-shadow: -4px 0 0 var(--color-ink); }
.receipt__barnum { margin: 0 0 12px; text-align: center; font-size: 10px; letter-spacing: 0.3em; color: var(--ink-60); }
.receipt__thanks { margin: 0; text-align: center; font-size: 11px; line-height: 1.7; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ink); font-weight: 700; }
/* the stamp, inked on after the fact */
.receipt__stamp {
  position: absolute; top: 16px; right: 14px; z-index: 1;
  margin: 0; padding: 4px 10px;
  font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--step-green);
  border: 2.5px solid var(--step-green); border-radius: 6px;
  rotate: 12deg; opacity: 0.85;
  mix-blend-mode: multiply;
}
/* the price, said loud, before the receipt gets to be charming */
.price__tag { margin: 0 0 var(--space-xs); display: flex; flex-direction: column; gap: 8px; }
.price__amount {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(3.2rem, 4.6vw, 4.2rem); letter-spacing: -0.045em; line-height: 0.95;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.price__unit { font-size: 0.4em; font-weight: 700; letter-spacing: -0.01em; color: var(--ink-60); margin-left: 3px; }
/* the trial leads: the section used to open on the price alone, and the
 * free two weeks sat in a small green line under it */
.price__free {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.8rem, 2.7vw, 2.4rem); letter-spacing: -0.03em; line-height: 1;
  color: var(--step-green);
}
.price__then { font-size: 0.4em; font-weight: 700; letter-spacing: -0.01em; color: var(--ink-60); margin-right: 8px; }
.price__alt { font-size: var(--text-base); color: var(--ink-70); }
.price__note { font-size: var(--text-sm); font-weight: 700; color: var(--step-green); }
/* how paying works */
.price__how { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); padding-top: var(--space-md); }
.price__h { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.7rem, 2.8vw, 2.2rem); letter-spacing: -0.01em; line-height: 1.1; margin: 0; }
.price__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; max-width: 30rem; }
.price__steps li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--text-md); line-height: 1.45; letter-spacing: -0.005em; }
.price__n {
  flex: none; width: 26px; height: 26px; border-radius: var(--radius-pill);
  display: grid; place-items: center;
  background: var(--tint-pear); color: var(--color-accent-text);
  font-family: var(--font-label); font-size: 12px; font-weight: 700;
  margin-top: 2px;
}
.price__cta { margin-top: var(--space-xs); }
@media (max-width: 60rem) {
  .price { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); justify-items: center; }
  .receipt-wrap { width: min(100%, 22rem); }
  /* price before prop: the tag, steps, and CTA outrank the tall receipt on a phone */
  .price__how { align-items: stretch; width: 100%; order: -1; padding-top: 0; }
}

/* ============ reduced motion ============ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .char, .char__eye, .char__look, .spark, .msg--typing span, .char__zzz text { animation: none; }
  
  
  .nav__banner, .nav__bar, .nav__bar-inner { transition: none; }
  .js-anim .dayboard__card { translate: 0 0; transition: none; }
    .is-bounce .char__body { animation: none; }
  .char__look { transition: none; }
  .card, .btn { transition: background-color 150ms, box-shadow 150ms, color 150ms; }
  @media (hover: hover) { .card:hover { transform: none; } }
  .btn:hover, .btn:active { transform: none; }
  .star-burst { display: none; }
  .phone__pause { display: none; }
}