/* ============================================================
   SiteYay — landing page
   Tokens from BRAND.md. Typography locked 2026-08-20 from the
   B2 test: Nunito Black (900) display + Nunito Sans body/UI.
   (Sora and Onest were tested and rejected.)
   ============================================================ */

:root {
  --font-display: "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Nunito Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --blue: #0064FE;
  --blue-hover: #0058E5;
  --blue-active: #004DCC;
  --navy: #021F64;

  --canvas: #F8F7F4;
  --white: #FFFFFF;

  --yellow: #FEBC07;
  --coral: #FD5B4C;
  --mint: #39C99E;

  --text-body: #5F6470;
  /* Brand token is #8A8F99; darkened for WCAG AA at small sizes (flagged in PRODUCT.md). */
  --text-muted: #6B7180;

  --border: #E6E7EA;
  --surface-soft: #F3F5F8;

  --blue-soft: #EEF4FF;
  --yellow-soft: #FFF8DD;
  --mint-soft: #EAF9F4;
  --coral-soft: #FFF0ED;

  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 12px;

  --shadow-card: 0 24px 48px -20px rgba(2, 31, 100, 0.16);
  --shadow-chip: 0 14px 28px -12px rgba(2, 31, 100, 0.18);

  --container: 1200px;
  --header-h: 76px;
}

/* ---------- Reset / base ---------- */

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 500;
  color: var(--text-body);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }

[hidden] { display: none !important; }

h1, h2, h3 { color: var(--navy); margin: 0; text-wrap: balance; }

p { margin: 0; }

a { color: var(--blue); }

.container {
  width: min(100% - 48px, var(--container));
  margin-inline: auto;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--navy); color: #fff; padding: 10px 18px;
  border-radius: 10px; font-weight: 600; text-decoration: none;
  transition: top .2s ease-out;
}
.skip-link:focus { top: 12px; }

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

.text-blue { color: var(--blue); }

.icon { width: 20px; height: 20px; flex: none; }

/* ---------- Type scale ---------- */

h1 {
  font-family: var(--font-display);
  font-size: clamp(46px, 6.4vw, 86px);
  font-weight: 900;
  line-height: 0.97;
  letter-spacing: -0.035em;
}

h2 {
  font-size: clamp(34px, 4.6vw, 60px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
}

/* Major brand headlines use the display face (B2 system); UI headings (e.g. intake modal)
   stay in the body family. */
.section-head h2,
.cta-copy h2 {
  font-family: var(--font-display);
  font-weight: 900;
}

h3 {
  font-size: clamp(21px, 2.2vw, 26px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.lead {
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 500;
  line-height: 1.55;
}

.eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0;
}

.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--blue-soft);
  padding: 8px 16px;
  border-radius: 999px;
}
.eyebrow-pill .icon { width: 15px; height: 15px; }

.pill-mint  { background: var(--mint-soft);  color: #0F7A59; }
.pill-yellow{ background: var(--yellow-soft); color: #8A6002; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  border-radius: 14px;
  border: 1.5px solid transparent;
  padding: 17px 30px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .16s ease-out, transform .12s ease-out,
              box-shadow .16s ease-out, border-color .16s ease-out;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(0, 100, 254, 0.55);
}
.btn-primary:hover { background: var(--blue-hover); box-shadow: 0 14px 26px -10px rgba(0, 100, 254, 0.6); }
.btn-primary:active { background: var(--blue-active); }

.btn-secondary {
  background: var(--white);
  color: var(--navy);
  border-color: var(--border);
}
.btn-secondary:hover { border-color: #C9CDD4; }

.btn-on-blue {
  background: var(--white);
  color: var(--blue);
}
.btn-on-blue:hover { background: #F0F5FF; }

.btn-lg { padding: 19px 34px; font-size: 17px; }
.btn-sm { padding: 12px 22px; font-size: 15px; border-radius: 12px; }

.link-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: inherit; font-weight: 700;
  color: var(--blue);
}
.link-btn:hover { color: var(--blue-hover); }

.microcopy {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-body);
}
.microcopy .icon { color: var(--blue); }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease-out;
}
.site-header.is-scrolled { border-bottom-color: var(--border); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

.brand img {
  width: 168px;
  height: auto;
  mix-blend-mode: multiply; /* logo asset is flat-on-white; multiply keys it out on light bg */
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 34px;
}
.nav-menu > a {
  color: var(--navy);
  text-decoration: none;
  font-weight: 600;
  font-size: 15.5px;
}
.nav-menu > a:hover { color: var(--blue); }

.nav-toggle { display: none; }

/* ---------- Hero ---------- */

.hero {
  background: var(--white);
  padding: clamp(40px, 6vw, 84px) 0 clamp(56px, 7vw, 104px);
  overflow: clip;
}

.hero-grid {
  display: grid;
  grid-template-columns: 45fr 50fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.hero-copy { max-width: 560px; }
.hero-copy .eyebrow-pill { margin-bottom: 26px; }
.hero-copy h1 { margin-bottom: 26px; }
.hero-copy .lead { max-width: 46ch; margin-bottom: 34px; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 24px;
}

/* Hero artwork — approved production asset (HERO IMAGE.png), used as-is. */

.hero-art { display: grid; justify-items: center; }

.hero-image {
  width: 100%;
  max-width: 620px;
  height: auto;
  /* Blends the artwork's baked near-white ground seamlessly into the white hero canvas. */
  mix-blend-mode: multiply;
}

.browser-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--border);
}

.dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.dot-yellow { background: var(--yellow); }
.dot-coral  { background: var(--coral); }
.dot-mint   { background: var(--mint); }

.mock-line {
  height: 9px;
  border-radius: 999px;
  background: #E3E6EB;
  margin-bottom: 9px;
}
.w-90 { width: 90%; } .w-85 { width: 85%; } .w-80 { width: 80%; }
.w-70 { width: 70%; } .w-60 { width: 60%; } .w-55 { width: 55%; } .w-50 { width: 50%; }

.mock-btn {
  width: 34%;
  height: 16px;
  border-radius: 999px;
  background: var(--blue);
  margin-top: 12px;
}

/* floating chips */

.chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: var(--shadow-chip);
}

.chip-lines { display: grid; gap: 6px; width: 74px; }
.chip-lines i { display: block; height: 7px; border-radius: 999px; background: #E3E6EB; }
.chip-lines .chip-accent { background: var(--blue); }

.chip-aa {
  font-weight: 800;
  font-size: 21px;
  color: var(--blue);
  line-height: 1;
}

.chip-tile {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex: none;
}
.chip-tile svg { width: 22px; height: 22px; }
.tile-yellow { background: var(--yellow); }
.tile-mint   { background: var(--mint); }
.tile-blue   { background: var(--blue); }

.tile-soft-blue   { background: var(--blue-soft);   color: var(--blue); }
.tile-soft-yellow { background: var(--yellow-soft); color: #8A6002; }
.tile-soft-mint   { background: var(--mint-soft);   color: #0F7A59; }
.tile-soft-coral  { background: var(--coral-soft);  color: var(--coral); }

.confetti-dot {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
}
.cd-yellow { background: var(--yellow); }
.cd-coral  { background: var(--coral); }
.cd-mint   { background: var(--mint); }
.cd-blue   { background: var(--blue); }

/* ---------- Sections shared ---------- */

.section { padding: clamp(72px, 9vw, 132px) 0; }

.section-head {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.section-head .eyebrow-pill { margin-bottom: 22px; }
.section-head h2 { margin-bottom: 20px; }

.section-lead {
  font-size: clamp(17px, 1.6vw, 19px);
  font-weight: 500;
  line-height: 1.6;
}
.section-lead strong { font-weight: 700; }

/* ---------- 02 · How it works ---------- */

.how-it-works { background: var(--canvas); position: relative; }

/* ---- Yay Dot parade (one-time Easter egg): the three tiny browser-control
   characters walk together through the whitespace toward the next section,
   coral leading, then fade out. Nothing remains afterwards. ---- */
.dot-parade {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 30px;
  height: 52px;
  pointer-events: none;
}
.parade-dot {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 52px;
  aspect-ratio: 1;
  opacity: 0;
  --parade-dist: min(58vw, 700px);
}
.parade-dot svg { display: block; width: 100%; height: 100%; }
.parade-dot.is-walking {
  animation: parade 3.2s linear forwards;
}
@keyframes parade {
  0%   { transform: translateX(0); opacity: 0; }
  6%   { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateX(var(--parade-dist)); opacity: 0; }
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
}

.step { position: relative; text-align: center; }

.step-num {
  position: absolute;
  top: -6px;
  left: 6%;
  z-index: 2;
  font-weight: 800;
  font-size: 17px;
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.num-yellow { background: var(--yellow-soft); color: #8A6002; }
.num-mint   { background: var(--mint-soft);   color: #0F7A59; }
.num-coral  { background: var(--coral-soft);  color: var(--coral); }

.step-scene {
  position: relative;
  height: clamp(235px, 26vw, 320px);
  display: grid;
  place-items: end center;
  margin-bottom: 30px;
}
.step-scene::before {
  content: "";
  position: absolute;
  inset: 9% 5% 8%;
  border-radius: 46% 54% 50% 50% / 56% 48% 52% 44%;
}
.scene-yellow::before { background: var(--yellow-soft); }
.scene-mint::before   { background: var(--mint-soft); }
.scene-coral::before  { background: var(--coral-soft); }

/* ---- Browser Buddy PNG pose controller (Phase 1: How It Works only) ----
   Two stacked layers crossfade between corrected 1254x1254 pose assets;
   the stage carries restrained ambient idle, the tilt wrapper carries the
   desktop-only cursor tilt. Layout is fixed by the container so pose swaps
   can never shift the page. Without JS, the inline final-pose layer shows
   statically (guide §27 fallback). */
.step-scene .buddy {
  position: relative;
  z-index: 1;
  width: clamp(182px, 19vw, 246px);
  aspect-ratio: 1;
}
.buddy-stage,
.buddy-tilt { position: absolute; inset: 0; }
.buddy-stage { animation: buddy-idle 4.5s ease-in-out infinite alternate; }
.buddy-tilt {
  transform: translate(var(--tilt-x, 0px), var(--tilt-y, 0px)) rotate(var(--tilt-r, 0deg));
  transition: transform .6s cubic-bezier(0.2, 0.7, 0.3, 1);
  will-change: transform;
}
.buddy-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.985) translateY(2px);
  transition: opacity .24s ease-out, transform .24s cubic-bezier(0.2, 0.7, 0.3, 1);
  filter: drop-shadow(0 16px 18px rgba(2, 31, 100, 0.14));
}
.buddy-layer.is-active { opacity: 1; transform: none; }
@keyframes buddy-idle {
  from { transform: translateY(0) rotate(-0.4deg); }
  to   { transform: translateY(-4px) rotate(0.4deg); }
}
@keyframes buddy-idle-sm {
  from { transform: translateY(0) rotate(-0.2deg); }
  to   { transform: translateY(-2px) rotate(0.2deg); }
}

.step-scene .chip-mini {
  position: absolute;
  right: -3%;
  top: 20%;
  z-index: 2;
  padding: 10px 12px;
}
.chip-mini .chip-aa { font-size: 17px; }
.chip-mini .chip-lines { width: 56px; }

.mini-site {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-chip);
  width: 128px;
}
.mini-site .browser-bar { padding: 7px 10px; gap: 5px; }
.mini-site .dot { width: 7px; height: 7px; }
.mini-site-body { padding: 12px; }
.mini-site-body .mock-line { height: 6px; margin-bottom: 6px; }
.mock-thumb {
  height: 40px;
  border-radius: 7px;
  margin-bottom: 9px;
}
.thumb-mint { background: var(--mint-soft); }
.thumb-blue { background: var(--blue-soft); }

/* Step 2's website-being-built Lottie (assets/build-website.json, 1000x566).
   The aspect-ratio box reserves layout before the SVG mounts — zero shift.
   Centered in the scene rather than bottom-anchored like the Buddy steps. */
.step-scene .build-anim {
  position: relative;
  z-index: 1;
  place-self: center;
  width: min(94%, 340px);
  aspect-ratio: 1000 / 566;
}
.build-anim svg { display: block; }
.build-anim-fallback {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72%;
  height: 100%;
  object-fit: contain;
}

.heart-badge {
  position: absolute;
  right: 5%;
  top: 3%;
  z-index: 2;
  width: 54px; height: 54px;
  background: var(--white);
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-chip);
}
.heart-badge svg { width: 27px; height: 27px; }

.step h3 { margin-bottom: 12px; }
.step p { max-width: 34ch; margin-inline: auto; }

.risk-banner {
  margin-top: clamp(56px, 6vw, 84px);
  background: var(--blue-soft);
  border-radius: var(--radius-lg);
  padding: 28px 36px;
  display: flex;
  align-items: center;
  gap: 22px;
}
.risk-shield {
  width: 54px; height: 54px; flex: none;
  border-radius: 16px;
  background: var(--blue);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 20px -8px rgba(0, 100, 254, 0.5);
}
.risk-shield svg { width: 28px; height: 28px; }
.risk-banner strong {
  display: block;
  color: var(--navy);
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 3px;
}
.risk-banner p { font-size: 16px; }
.risk-doodle { width: 120px; margin-left: auto; flex: none; }

/* ---------- 03 · Examples ---------- */

.examples { background: var(--white); }

.work-stage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 24px;
}

.work-item { margin: 0; position: relative; }

.work-frame { border-radius: var(--radius-md); position: relative; z-index: 1; }
.work-frame img { width: 100%; }

/* Peeking Buddies: physically BEHIND their project frame (z below .work-frame),
   partially concealed by the card so they read as peeking, not stickers. */
.peek-buddy {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

/* How far above the card Buddy may show. The stage is pushed down by exactly
   this much (below) and the clip window opens exactly this high, so the peek is
   carved out of NEW space rather than borrowed from the section copy — the
   headline and lead keep their full margin no matter what Buddy does. */
.examples { --peek-room: 94px; }
/* PADDING, not margin: an adjacent margin would collapse against
   .section-head's own margin-bottom and the peek would eat the section's
   breathing room instead of adding to it (measured: 11px of clearance
   instead of 78px). Padding cannot collapse, so the gap is genuinely
   section-head margin + peek room. */
.examples .work-stage { padding-top: var(--peek-room); }

/* THE CLIP. Its top edge sits where the stage would have started, so nothing
   inside can reach the copy above — a mistuned `top` can only ever show less
   Buddy, never spill into text. */
.peek-zone {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--peek-room));
  height: calc(var(--peek-room) + 150px);
  overflow: hidden;
  pointer-events: none;
}

/* Buddy's artwork carries ~25% transparent padding above his head, so this
   offset lands the top of his HEAD on the clip line. The visible slice is then
   exactly --peek-room: crown, browser-bar and eyes, cut just above the mouth. */
.peek-top {          /* eyes peeking over North Phoenix's top edge */
  top: -60px;
  left: 9%;
  width: 236px;
  /* Drop the raised waving arm. Its hand sits high enough to fall inside the
     peek window while the arm joining it to the body falls below the card
     line — so it rendered as a detached black blob floating beside his head.
     Trimming the right 16% keeps the silhouette to head and body only. */
  clip-path: inset(0 16% 0 0);
}
.peek-side {         /* thumbs-up peek around AdvanceWare's lower-right edge */
  right: -148px;
  bottom: 12%;
  width: 232px;
}

/* No "grab" layer. A paw drawn in front of the frame read as going through the
   site rather than holding it, so both peeks are plain peeks: the whole mascot
   stays behind its card and only what clears the top edge is visible. */

.url-pill {
  margin-left: 10px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 3px 12px;
  letter-spacing: 0.01em;
}

.work-a { grid-column: 1 / 8; grid-row: 1; z-index: 2; }
.work-b { grid-column: 7 / 13; grid-row: 1; margin-top: 26%; z-index: 3; }
.work-c { grid-column: 3 / 10; grid-row: 2; margin-top: 56px; z-index: 1; }

.work-b .work-frame { box-shadow: 0 34px 64px -24px rgba(2, 31, 100, 0.28); }

.work-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 6px 0;
}
.work-meta strong {
  display: block;
  color: var(--navy);
  font-size: 16.5px;
  font-weight: 700;
}
.work-meta span:last-child {
  font-size: 14.5px;
  color: var(--text-body);
}


/* ---------- 04 · Pricing ---------- */

.pricing { background: var(--canvas); position: relative; }
.pricing .container { position: relative; }

.price-moment {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  max-width: 980px;
  margin-inline: auto;
}

.price-side { text-align: center; }

.price-big {
  display: block;
  font-weight: 800;
  font-size: clamp(76px, 10vw, 148px);
  line-height: 1;
  letter-spacing: -0.04em;
}
.price-zero { color: var(--navy); }
.price-monthly { color: var(--blue); }
.price-per {
  font-size: 0.34em;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-left: 2px;
}

.price-label {
  display: block;
  margin-top: 14px;
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 700;
  color: var(--navy);
}
.label-blue { color: var(--blue); }

.annual-option {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-body);
}
.annual-option strong { color: var(--navy); font-weight: 700; }
.annual-badge {
  background: var(--mint-soft);
  color: #0F7A59;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 4px 10px;
}

.billing-note {
  margin-top: 28px;
  text-align: center;
  font-size: 15.5px;
  color: var(--text-body);
}

.price-bridge {
  text-align: center;
  color: var(--text-muted);
  display: grid;
  justify-items: center;
  gap: 12px;
}
.price-bridge strong {
  color: var(--navy);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  display: block;
  max-width: 12ch;
}
.bridge-sub {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-body);
  max-width: 14ch;
}

.included {
  max-width: 980px;
  margin: clamp(56px, 6vw, 88px) auto 0;
  text-align: center;
}

.included-title {
  display: flex;
  align-items: center;
  gap: 24px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 40px;
}
.included-title::before,
.included-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.included-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 28px 16px;
}
.included-list li {
  display: grid;
  justify-items: center;
  gap: 14px;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--navy);
}
.check-circle {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--mint-soft);
  color: #0F7A59;
  display: grid;
  place-items: center;
}
.check-circle svg { width: 24px; height: 24px; }

.included-note {
  margin-top: 48px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
}

.pricing-dot-1 { top: 12%; left: 4%; }
.pricing-dot-2 { top: 58%; left: 1%; }
.pricing-dot-3 { top: 22%; right: 3%; }

/* Small pricing Buddy in the reference's bottom-left slot; desktop only. */
.pricing-buddy {
  position: absolute;
  left: 0.5%;
  bottom: 6%;
  width: clamp(110px, 10vw, 148px);
  aspect-ratio: 1;
  z-index: 1;
}
@media (max-width: 1080px) {
  .pricing-buddy { display: none; }
}

/* ---------- 05 · Compare ---------- */

.compare { background: var(--white); }

.compare-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}

.compare-card {
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3.4vw, 44px);
}
.compare-card h3 {
  font-size: clamp(23px, 2.4vw, 28px);
  margin-bottom: 28px;
}
.compare-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.compare-card li {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 18px 0;
}
.compare-card li + li { border-top: 1px solid var(--border); }
.compare-card li strong {
  display: block;
  color: var(--navy);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 4px;
}
.compare-card li p { font-size: 15.5px; }

.compare-old {
  background: var(--surface-soft);
  border: 1px solid var(--border);
}
.compare-old .row-icon {
  background: var(--white);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.compare-yay { background: var(--mint-soft); }
.compare-yay li + li { border-top-color: #D3EFE4; }
.compare-yay .row-icon { background: var(--white); }

.row-icon {
  width: 48px; height: 48px; flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.row-icon svg { width: 23px; height: 23px; }
.icon-yellow { color: #8A6002; }
.icon-blue   { color: var(--blue); }
.icon-coral  { color: var(--coral); }
.icon-mint   { color: #0F7A59; }

.vs-badge {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 24px -8px rgba(0, 100, 254, 0.5);
  border: 4px solid var(--white);
}

.feels-better {
  margin-top: 26px;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 16px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-chip);
}
.feels-better p {
  color: var(--navy);
  font-size: 18px;
  font-weight: 700;
}
.yay-underline {
  color: var(--blue);
  background: linear-gradient(transparent 78%, var(--yellow) 78%, var(--yellow) 94%, transparent 94%);
  padding: 0 2px;
}

.compare-footnote {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 32px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 16px;
  text-align: center;
}
.compare-footnote strong { color: var(--navy); }

/* ---------- 06 · Real reviews ---------- */

.reviews { background: var(--canvas); padding-top: 0; padding-bottom: 0; }

.review-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 22px;
  align-items: start;
}

.review-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.review-featured {
  border-color: #D3EFE4;
  background: var(--white);
  box-shadow: var(--shadow-chip);
}

.review-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.stars { display: inline-flex; gap: 3px; }
.stars svg { width: 19px; height: 19px; fill: var(--yellow); }
.quote-chip {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--mint-soft);
  color: #0F7A59;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  display: grid;
  place-items: center;
  padding-top: 12px;
  box-sizing: border-box;
}

.review-card blockquote {
  margin: 0;
  color: var(--navy);
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.6;
  flex: 1;
}

.review-who {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.review-who strong {
  display: block;
  color: var(--navy);
  font-size: 15.5px;
  font-weight: 700;
}
.review-who span:last-child { font-size: 13.5px; color: var(--text-body); }

.avatar {
  width: 44px; height: 44px; flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14.5px;
  font-weight: 700;
}
.avatar-blue   { background: var(--blue-soft);   color: var(--blue); }
.avatar-mint   { background: var(--mint-soft);   color: #0F7A59; }
.avatar-yellow { background: var(--yellow-soft); color: #8A6002; }

.reviews-footnote {
  margin-top: clamp(36px, 4vw, 52px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-body);
}

/* ---------- 07 · FAQ ---------- */

.faq { background: var(--canvas); }

.faq-layout { position: relative; }

.faq-buddy {
  position: absolute;
  left: calc(-1 * clamp(10px, 3vw, 40px));
  top: 34%;
  width: clamp(120px, 13vw, 190px);
  aspect-ratio: 1;
}

.faq-main { max-width: 780px; margin-inline: auto; }

.faq h2 { position: relative; display: inline-block; }
.sparks {
  position: absolute;
  width: 30px;
  top: -14px;
  right: -36px;
}

.accordion { display: grid; gap: 14px; }

.acc-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow .2s ease-out;
}
.acc-item:has(.acc-trigger[aria-expanded="true"]) { box-shadow: var(--shadow-chip); }

.acc-item h3 { margin: 0; font-size: inherit; }

.acc-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  background: none;
  border: 0;
  padding: 18px 20px;
  font-family: inherit;
  font-size: clamp(16.5px, 1.7vw, 18.5px);
  font-weight: 700;
  color: var(--navy);
  text-align: left;
  cursor: pointer;
}

.acc-icon {
  width: 46px; height: 46px; flex: none;
  border-radius: 13px;
  display: grid;
  place-items: center;
}
.acc-icon svg { width: 22px; height: 22px; }

.acc-chevron {
  margin-left: auto;
  width: 40px; height: 40px; flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  color: var(--blue);
  display: grid;
  place-items: center;
  transition: transform .25s ease-out, background-color .2s ease-out;
}
.acc-chevron svg { width: 19px; height: 19px; }
.acc-trigger[aria-expanded="true"] .acc-chevron { transform: rotate(180deg); background: var(--blue-soft); border-color: transparent; }

.acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.acc-item:has(.acc-trigger[aria-expanded="true"]) .acc-panel { grid-template-rows: 1fr; }
.acc-panel > .acc-body {
  overflow: hidden;
  opacity: 0;
  transition: opacity .25s ease-out;
}
.acc-item:has(.acc-trigger[aria-expanded="true"]) .acc-panel > .acc-body { opacity: 1; }

.acc-body p {
  margin: 0 20px 20px calc(20px + 46px + 16px);
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--surface-soft);
  font-size: 16px;
  line-height: 1.6;
}
.acc-body.tint-mint p   { background: var(--mint-soft); }
.acc-body.tint-yellow p { background: var(--yellow-soft); }

.faq-more {
  margin-top: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 16px 28px;
  font-weight: 500;
  font-size: 16px;
}

/* ---------- 08 · Final CTA ---------- */

.final-cta {
  background: var(--white);
  padding: clamp(84px, 10vw, 150px) 0;
  overflow: clip;
}

.final-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

.cta-copy { text-align: center; }
.cta-copy h2 { font-size: clamp(40px, 4.8vw, 64px); margin-bottom: 24px; }
.cta-copy .lead { max-width: 44ch; margin: 0 auto 34px; }
.cta-copy .microcopy { justify-content: center; margin-top: 22px; }

.cta-art { position: relative; height: 100%; min-height: 300px; }

.cta-buddy {
  position: absolute;
  left: 0;
  bottom: 4%;
  width: clamp(200px, 20vw, 300px);
  aspect-ratio: 1;
  z-index: 1; /* Buddy in front of the confetti layer */
}

/* One-shot confetti Lottie: decorative layer originating around/behind Buddy.
   No document flow, no pointer events; section overflow:clip contains spill. */
.confetti-lottie {
  position: absolute;
  left: -18%;
  bottom: -2%;
  width: 145%;
  aspect-ratio: 16 / 9;
  pointer-events: none;
  z-index: 0;
}
.confetti-lottie svg { display: block; width: 100%; height: 100%; }
.cta-art .sparks { position: absolute; width: 34px; }

.cta-art-right .mini-site {
  position: absolute;
  top: 0;
  right: 8%;
  width: 168px;
}
.cta-art-right .mini-site .mock-btn { height: 12px; width: 44%; margin-top: 8px; }
.cta-art-right .chip-star { position: absolute; top: 52%; left: 2%; }
.cta-art-right .chip-donut { position: absolute; bottom: 2%; right: 12%; }
.donut { width: 44px; height: 44px; }
.cta-cursor {
  position: absolute;
  bottom: 16%;
  left: 26%;
  width: 90px;
}

/* ---------- 09 · Footer ---------- */

.site-footer {
  position: relative;
  background: var(--blue);
  color: #fff;
  padding: clamp(56px, 7vw, 96px) 0 0;
  overflow: clip;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 0.9fr 0.9fr 1.1fr;   /* brand · product · legal · get started */
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(48px, 6vw, 80px);
}

.footer-brand img { width: 190px; margin-bottom: 22px; }
.footer-brand p {
  color: #D6E4FF;
  font-size: 17px;
  font-weight: 500;
  max-width: 26ch;
}

.footer-title {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #A8C6FF;
  margin-bottom: 18px;
}

.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; }
.footer-col a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 15.5px;
}
.footer-col a:hover { text-decoration: underline; text-underline-offset: 4px; }

.footer-note { color: #D6E4FF; font-size: 15px; max-width: 30ch; }
.footer-col .btn-on-blue { margin-top: 6px; }

/* Policy disclosure under the pricing block: present and readable, but
   deliberately quiet so it never competes with the $97 hierarchy. */
.billing-fine {
  text-align: center;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 62ch;
  margin: 8px auto 0;
}
.billing-fine a { color: var(--blue); font-weight: 600; }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  padding-block: 26px;
  font-size: 14.5px;
  color: #D6E4FF;
}
.footer-bottom p { display: flex; align-items: center; gap: 10px; }
.footer-bottom .icon { width: 18px; height: 18px; }

.footer-buddy {
  position: absolute;
  right: clamp(16px, 6vw, 90px);
  bottom: 74px;
  width: 84px;
  transform: rotate(-6deg);
}

.footer-mountains {
  position: absolute;
  left: 0;
  bottom: 76px;
  width: clamp(220px, 26vw, 360px);
  opacity: 0.07;
  pointer-events: none;
}

/* Yellow trampoline Yay Dot: parks in the quiet pocket left of micro-Buddy,
   above the legal bar. The Lottie canvas has generous transparent padding,
   so the box runs larger than the character reads. */
.footer-trampoline {
  position: absolute;
  right: calc(clamp(16px, 6vw, 90px) + 118px);
  bottom: 60px;
  width: 96px;
  aspect-ratio: 1;
  pointer-events: none;
}

/* ---------- Intake modal ---------- */

.intake-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(2, 31, 100, 0.5);
  display: grid;
  place-items: center;
  padding: 20px;
}
.intake-overlay[hidden] { display: none; }

.intake-modal {
  position: relative;
  width: min(100%, 560px);
  background: var(--white);
  border-radius: 24px;
  padding: clamp(28px, 5vw, 48px);
  box-shadow: 0 40px 80px -24px rgba(2, 31, 100, 0.45);
  max-height: calc(100dvh - 40px);
  overflow: auto;
}

.intake-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--navy);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.intake-close svg { width: 19px; height: 19px; }
.intake-close:hover { border-color: #C9CDD4; }

.intake-progress {
  display: flex;
  gap: 8px;
  margin-bottom: 30px;
}
.ip-dot {
  height: 6px;
  flex: 1;
  border-radius: 999px;
  background: var(--surface-soft);
  transition: background-color .2s ease-out;
}
.ip-dot.is-active { background: var(--blue); }

.intake-h {
  font-size: clamp(24px, 3.4vw, 31px);
  margin: 14px 0 24px;
}

.intake-step .eyebrow { color: var(--text-muted); letter-spacing: 0.08em; }

.field { display: block; margin-bottom: 18px; }
.field-label {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 8px;
}
.field-label em { font-style: normal; font-weight: 500; color: var(--text-muted); }

.field input,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 16.5px;
  color: var(--navy);
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 15px 16px;
  transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--text-muted); }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px var(--blue-soft);
}
.field textarea { resize: vertical; min-height: 110px; }

.intake-error {
  color: var(--coral);
  font-size: 14.5px;
  font-weight: 600;
  margin-bottom: 6px;
}

/* Honeypot: parked far offscreen (not display:none — cruder bots skip those). */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.intake-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 26px;
}
.intake-nav .intake-next { margin-left: auto; }

.intake-success { text-align: center; }
.intake-success p { max-width: 40ch; margin-inline: auto; }

.success-burst {
  position: relative;
  display: inline-block;
  margin-bottom: 8px;
}
.success-burst img {
  animation: buddy-pop 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes buddy-pop {
  from { transform: scale(0.4); opacity: 0; }
}
.pop-dot {
  position: absolute;
  left: 50%;
  top: 62%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  opacity: 0;
  animation: dot-burst 0.8s cubic-bezier(0.2, 0.7, 0.3, 1) 0.25s;
}
@keyframes dot-burst {
  0%   { transform: translate(0, 0) scale(0.4); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; }
}

/* ============================================================
   Motion — driven by script.js (SiteYayMotion). CSS owns every
   animation; JS only toggles .is-loaded/.is-visible/.attention.
   All pre-animation hidden states are gated behind `html.js` so
   the page is fully visible if JS never runs.
   ============================================================ */

.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease-out, transform .6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.reveal[data-reveal-delay="1"] { transition-delay: .1s; }
.reveal[data-reveal-delay="2"] { transition-delay: .2s; }
.reveal.is-visible { opacity: 1; transform: none; }

/* Shared one-time "prop arrives" pop — slight overshoot lives in the
   keyframes, easing stays exponential. */
@keyframes prop-pop {
  0%   { opacity: 0; transform: scale(0.6); }
  70%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

/* ---- Hero (Animation Guide §11): copy renders instantly; only the
   artwork settles in, ~700ms. ---- */
.js .hero-image {
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: opacity .7s ease-out, transform .7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.hero.is-loaded .hero-image { opacity: 1; transform: none; }

/* One restrained attention lift when the CTA is hovered (8s cooldown in JS).
   Buddy is baked into the raster hero art, so this is a whole-scene body cue —
   real CTA gaze belongs to the future rig. */
.hero-art.attention .hero-image {
  animation: hero-attention .9s cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes hero-attention {
  0%   { transform: none; }
  40%  { transform: translateY(-6px) scale(1.006); }
  100% { transform: none; }
}

/* ---- How It Works (guide §13): each step is a tiny story —
   scene settles first, its prop arrives a beat later. Fires at
   ~30% visibility via [data-motion]. ---- */
.js .step {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .55s ease-out, transform .55s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.js .step:nth-child(2) { transition-delay: .12s; }
.js .step:nth-child(3) { transition-delay: .24s; }
.step.is-visible { opacity: 1; transform: none; }

.js .step-scene .chip-mini,
.js .step-scene .heart-badge { opacity: 0; }
/* With JS the Lottie owns Step 2's slot; the fallback img only returns if the
   runtime fails to load (script restores it) or scripting is off entirely. */
.js .build-anim-fallback { display: none; }
.step.is-visible .chip-mini   { animation: prop-pop .5s cubic-bezier(0.2, 0.7, 0.3, 1) .45s both; }
.step.is-visible .heart-badge { animation: prop-pop .55s cubic-bezier(0.2, 0.7, 0.3, 1) .75s both; }

/* ---- Old way vs. yay way (guide §16): old side rides the plain grid
   reveal; the SiteYay side resolves item by item, "That feels better."
   last. ---- */
.js .compare-yay li,
.js .feels-better {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s ease-out, transform .45s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.compare-grid.is-visible .compare-yay li { opacity: 1; transform: none; }
.compare-grid.is-visible .compare-yay li:nth-child(1) { transition-delay: .15s; }
.compare-grid.is-visible .compare-yay li:nth-child(2) { transition-delay: .28s; }
.compare-grid.is-visible .compare-yay li:nth-child(3) { transition-delay: .41s; }
.compare-grid.is-visible .compare-yay li:nth-child(4) { transition-delay: .54s; }
.compare-grid.is-visible .feels-better { opacity: 1; transform: none; transition-delay: .72s; }

/* ---- Real reviews (guide §17): cards stagger gently; the featured card
   resolves last and therefore reads most prominent. Stars stay static. ---- */
.js .review-grid.reveal { opacity: 1; transform: none; } /* container never hides */
.js .review-grid .review-card {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease-out, transform .5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.review-grid.is-visible .review-card { opacity: 1; transform: none; }
.review-grid.is-visible .review-card:nth-child(3) { transition-delay: .12s; }
.review-grid.is-visible .review-card.review-featured { transition-delay: .24s; }

/* ---- Final CTA (guide §19): Buddy rises (below), then the celebration
   bits pop once — no looping confetti. ---- */
.js .cta-art-left .confetti-dot,
.js .cta-art-left .sparks { opacity: 0; }
.cta-art-left.is-visible .confetti-dot { animation: dot-arrive .55s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.cta-art-left.is-visible .confetti-dot:nth-of-type(1) { animation-delay: .85s; }
.cta-art-left.is-visible .confetti-dot:nth-of-type(2) { animation-delay: .95s; }
.cta-art-left.is-visible .confetti-dot:nth-of-type(3) { animation-delay: 1.05s; }
.cta-art-left.is-visible .sparks { animation: prop-pop .5s cubic-bezier(0.2, 0.7, 0.3, 1) 1.1s both; }
@keyframes dot-arrive {
  from { opacity: 0; transform: translateY(10px) scale(0.4); }
  to   { opacity: 1; transform: none; }
}

/* ---- Footer (guide §20): micro Buddy peeks up once, then holds. ---- */
.js .footer-buddy {
  opacity: 0;
  transform: translateY(16px) rotate(-6deg);
  transition: opacity .55s ease-out .25s, transform .55s cubic-bezier(0.2, 0.7, 0.3, 1) .25s;
}
.site-footer.is-visible .footer-buddy { opacity: 1; transform: rotate(-6deg); }

/* Decorative objects only drift, very subtly and at different speeds (Animation Guide §12).
   Mascot PNGs stay static — the guide's approved fallback until the Rive rig exists (§2, §27). */
@keyframes floaty {
  from { transform: translateY(0); }
  to   { transform: translateY(-6px); }
}
.float-a { animation: floaty 7.5s ease-in-out infinite alternate; }
.float-b { animation: floaty 9s ease-in-out 1.2s infinite alternate; }
.float-c { animation: floaty 8s ease-in-out 2.4s infinite alternate; }
.step-scene img { animation: none; }

/* Pricing sequence (Animation Guide §15): $0 → bridge → $97 → annual pill
   → "2 months free" badge, then inclusions stagger. Motion explains the offer. */
.js .price-moment > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease-out, transform .5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.price-moment.is-visible > *:nth-child(1) { transition-delay: 0s; }
.price-moment.is-visible > *:nth-child(2) { transition-delay: .18s; }
.price-moment.is-visible > *:nth-child(3) { transition-delay: .36s; }
.price-moment.is-visible > * { opacity: 1; transform: none; }
.price-moment.reveal { transform: none; }

.js .price-moment .annual-option {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s ease-out, transform .45s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.price-moment.is-visible .annual-option { opacity: 1; transform: none; transition-delay: .68s; }
.js .price-moment .annual-badge { opacity: 0; }
.price-moment.is-visible .annual-badge {
  animation: prop-pop .45s cubic-bezier(0.2, 0.7, 0.3, 1) 1s both;
}

.included.reveal { transform: none; }
.js .included .included-list li {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s ease-out, transform .45s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.included.is-visible .included-list li { opacity: 1; transform: none; }
.included.is-visible .included-list li:nth-child(2) { transition-delay: .06s; }
.included.is-visible .included-list li:nth-child(3) { transition-delay: .12s; }
.included.is-visible .included-list li:nth-child(4) { transition-delay: .18s; }
.included.is-visible .included-list li:nth-child(5) { transition-delay: .24s; }
.included.is-visible .included-list li:nth-child(6) { transition-delay: .3s; }

/* Examples settle with a slight scale and lift on hover (Animation Guide §14). */
.js .work-item.reveal { transform: translateY(26px) scale(0.985); }
.work-item.reveal.is-visible { transform: none; }
.work-frame { transition: transform .25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow .25s ease-out; }
.work-frame:hover { transform: translateY(-5px); }

/* Final CTA: Buddy rises into frame once (Animation Guide §19). */
.js .cta-art-left.reveal { transform: translateY(44px); transition-duration: .8s; }
.cta-art-left.reveal.is-visible { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .float-a, .float-b, .float-c { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .acc-panel { transition: none; }
  .acc-panel > .acc-body { opacity: 1; transition: none; }
  /* Zero durations AND delays so `both`-filled sequenced animations resolve
     instantly instead of holding their hidden from-state through the delay. */
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    transition-delay: 0s !important;
    animation-delay: 0s !important;
  }
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1080px) {
  .final-grid { grid-template-columns: 1fr 2fr 1fr; }
  .cta-buddy { width: clamp(160px, 18vw, 220px); }
  .faq-buddy { display: none; }
}

@media (max-width: 920px) {
  /* --- header --- */
  .nav-toggle {
    display: grid;
    gap: 5px;
    background: none;
    border: 0;
    padding: 10px;
    cursor: pointer;
  }
  .nav-toggle span {
    width: 22px; height: 2.5px;
    border-radius: 2px;
    background: var(--navy);
    transition: transform .2s ease-out, opacity .2s ease-out;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  .nav-menu {
    position: absolute;
    top: var(--header-h);
    left: 0; right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px 24px 20px;
    display: none;
  }
  .nav-menu.is-open { display: flex; }
  .nav-menu > a { padding: 12px 4px; font-size: 17px; }
  .nav-menu .btn { margin-top: 10px; }

  /* --- hero: copy first, art second --- */
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { order: 1; max-width: 640px; }
  .hero-art { order: 2; }
  .hero-image { max-width: 480px; }

  /* --- sections --- */
  .steps { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; gap: 48px; }
  .step-scene { height: 250px; }
  .step-scene img { width: 180px; }
  .step-num { left: 0; }

  .risk-banner { flex-direction: column; text-align: center; gap: 16px; }
  .risk-doodle { display: none; }

  .work-stage { grid-template-columns: 1fr; gap: 44px; }
  .work-a, .work-b, .work-c { grid-column: 1; grid-row: auto; margin: 0; }
  /* Mobile: keep only the top peek, smaller; omit the side peek (cramped + overflow risk).
     Smaller Buddy means a smaller head, so the peek window shrinks with him —
     and the lead runs full width here, so there is no horizontal escape route
     and the clip is what keeps him out of the copy. */
  .examples { --peek-room: 60px; }
  .peek-top { width: 150px; top: -38px; left: 6%; }
  .peek-side { display: none; }

  .price-moment { grid-template-columns: 1fr; gap: 28px; }
  .included-list { grid-template-columns: repeat(3, 1fr); }

  .compare-grid { grid-template-columns: 1fr; }
  .vs-badge { position: static; transform: none; margin: -14px auto; }

  .review-grid { grid-template-columns: 1fr; }

  .final-grid { grid-template-columns: 1fr; }
  .cta-art-left { order: 2; min-height: 260px; }
  .cta-copy { order: 1; }
  .cta-art-right { display: none; }
  .cta-buddy { left: 50%; transform: translateX(-50%); }
  /* Mobile: tighter confetti spread, centered on Buddy, CTA stays readable. */
  .confetti-lottie { left: 50%; transform: translateX(-50%); width: 110%; bottom: 6%; }

  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-buddy { bottom: auto; top: 24px; right: 24px; width: 64px; }
  /* Micro-Buddy moves to the top corner here, freeing the lower-right pocket. */
  .footer-trampoline { right: 16px; bottom: 118px; width: 62px; }

  /* Less animation on mobile (Animation Guide §29): no decorative drift loops,
     and Buddy's ambient idle travels half as far. */
  .float-a, .float-b, .float-c { animation: none; }
  .buddy-stage { animation-name: buddy-idle-sm; }

  /* Loose confetti dots read as stray bullets at narrow widths. */
  .pricing .confetti-dot { display: none; }

  /* Yay Dot parade: smaller characters, shorter procession on mobile. */
  .dot-parade { bottom: 20px; left: 8%; right: 8%; }
  .parade-dot { width: 38px; --parade-dist: 62vw; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .container { width: min(100% - 40px, var(--container)); }

  .hero { padding-top: 28px; }
  .hero-actions .btn { width: 100%; }
  .chip-lines { width: 58px; }

  .included-list { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; }

  .acc-trigger { padding: 15px 14px; gap: 12px; }
  .acc-icon { width: 40px; height: 40px; border-radius: 11px; }
  .acc-icon svg { width: 19px; height: 19px; }
  .acc-chevron { width: 34px; height: 34px; }
  .acc-body p { margin-left: 14px; margin-right: 14px; }

  .sparks { right: -30px; }

  .cta-copy h2 { font-size: clamp(36px, 10vw, 44px); }

  .footer-bottom { justify-content: center; text-align: center; }
}