/* ==========================================================================
   home.css: the front page's own layer (v3.10.0), loaded by site/index.html ONLY,
   after brand.css and site.css. Grew out of landing-v2/landing.css.

   NO NEW TOKENS. The colour comes from the content (Reels, stills, real
   product photos) set around the existing brand: --blue, the hero field
   #2D569B, --brand-ink, --brand-cream, and --orange as a FILL only (stamps,
   slashes, dots), never as text.

   Class names are prefixed so nothing here is Tailwind-shaped:
   .hero-*, .free-*, .reelwall-*, .svc-*, .egg-*, .backstage-*, .dock, .foot-*.

   SEIZURE-SAFE: nothing flashes, strobes, flickers or bounces. The only
   motion is a slow drift on one still, the reveal fade, the note's curl
   (driven by scroll, never by a clock) and short hover transitions. Every
   one of them stops under prefers-reduced-motion (bottom of this file).
   ========================================================================== */

/* ── rhythm: one spacing scale ─────────────────────────────────────── */
.band { padding: 112px 0; }
@media (max-width: 820px) { .band { padding: 72px 0; } }
.sec-head { margin-bottom: 40px; }
.sec-head h2, .reelwall-head h2, .free-title, .closer-inner h2 {
  font-size: clamp(30px, 4.2vw, 46px); letter-spacing: -.026em; line-height: 1.08;
}
.eyebrow { font-size: 13px; letter-spacing: .1em; }

/* Mindy's fix 9: nothing a phone reader needs is under 14px. */
.tour-cap, .tier-note, .receipt-row dt span, .foot-tag, .foot-legal { font-size: 14px; }

/* ── header: 44px targets, one line above 1020 ─────────────────────── */
.btn-theme { width: 44px; height: 44px; }
.chrome-nav a, .chrome-login { min-height: 44px; display: inline-flex; align-items: center; }
.chrome-cta { min-height: 44px; }

/* ── 1. hero ───────────────────────────────────────────────────────── */
.hero-v2 { min-height: min(86vh, 780px); }
.hero-v2 .hero-inner { padding: 88px 24px 132px; }
.hero-pill {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 18px 0 14px; margin-bottom: 22px;
  border-radius: 999px; text-decoration: none;
  font-size: 15px; font-weight: 700; color: #FAF2E8;
  background: rgba(250, 242, 232, .12);
  box-shadow: inset 0 0 0 1px rgba(250, 242, 232, .34);
  transition: background .2s var(--ease);
}
.hero-pill:hover { background: rgba(250, 242, 232, .2); }
.hero-pill:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring), inset 0 0 0 1px rgba(250,242,232,.34); }
.hero-pill-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); flex: none; }
.hero-v2 .hero-title {
  max-width: 13.5ch;
  font-size: clamp(42px, 6.4vw, 84px);
  letter-spacing: -.034em; line-height: 1.0;
  margin-bottom: 22px;
}
.hero-v2 .hero-lede { font-size: 19px; max-width: 40ch; margin-bottom: 26px; }

.hero-proof {
  display: inline-flex; flex-direction: column; gap: 4px;
  margin: 0 0 30px; padding: 14px 20px 16px;
  border-radius: 16px;
  background: rgba(16, 26, 38, .28);
  box-shadow: inset 0 0 0 1px rgba(250, 242, 232, .18);
  color: #FAF2E8; max-width: 100%;
}
.hero-proof-label { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(250,242,232,.86); }
.hero-proof-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.hero-proof-row > .num { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.hero-proof-arrow {
  width: 34px; height: 3px; background: var(--orange); position: relative; border-radius: 2px; flex: none;
}
.hero-proof-arrow::after {
  content: ""; position: absolute; right: -2px; top: -5px;
  border-left: 10px solid var(--orange); border-top: 6.5px solid transparent; border-bottom: 6.5px solid transparent;
}
.hero-proof-in { font-size: 17px; white-space: nowrap; }
.hero-proof-in b { font-weight: 800; }

.hero-v2 .hero-cta .btn-lg { min-height: 52px; font-size: 16.5px; padding: 14px 26px; }
.hero-badges {
  display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 22px 0 0;
  font-size: 14px; font-weight: 600; color: rgba(250, 242, 232, .9);
}
.hero-badges span { display: inline-flex; align-items: center; gap: 8px; }
.hero-badges span::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); flex: none;
}
.hero-winnie { display: none; }

@media (max-width: 820px) {
  .hero-v2 { flex-direction: column; align-items: stretch; }
  .hero-v2 .hero-inner { padding: 26px 20px 52px; }
  .hero-pill { margin-bottom: 16px; }
  .hero-v2 .hero-title { margin-bottom: 16px; }
  .hero-proof { margin-bottom: 22px; }
  .hero-v2 .hero-title { font-size: clamp(36px, 11vw, 46px); max-width: 14ch; }
  .hero-v2 .hero-lede { font-size: 17px; }
  .hero-v2 .hero-art { display: none; }
  .hero-v2::before { background: #2D569B; }
  .hero-winnie {
    display: block; position: relative; height: 172px; margin: 0 -20px 18px;
  }
  .hero-winnie img {
    width: 100%; height: 100%; object-fit: cover; object-position: 90% 26%; display: block;
  }
}
@media (max-width: 400px) {
  .hero-v2 .hero-inner { padding: 22px 16px 48px; }
  .hero-winnie { height: 150px; margin: 0 -16px 16px; }
}

/* ── 2. tour + follow ─────────────────────────────────────────────── */
.hero-v2 + .tour { margin-top: -96px; }
@media (max-width: 820px) { .hero-v2 + .tour { margin-top: -28px; } }
.tour { padding-bottom: 72px; }
.tour-bezel { border-radius: 22px; }
.follow-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px;
  margin-top: 26px;
}
.follow-lead { margin: 0; font-size: 16px; font-weight: 700; }
.follow-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.follow-chip {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 0 16px 0 12px;
  border-radius: 999px; text-decoration: none;
  font-size: 15px; font-weight: 600; color: var(--label);
  background: var(--surface); box-shadow: var(--shadow);
  transition: transform .2s var(--ease);
}
.follow-chip img { width: 20px; height: 20px; display: block; }
.follow-chip:hover { transform: translateY(-1px); }
.follow-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
:root[data-theme="dark"] .follow-chip { background: #FAF2E8; color: #1C2A3D; }

/* ── 3. Pro is free: full-bleed band ──────────────────────────────── */
.free-band {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--brand);
  min-height: 560px;
}
.free-media { position: relative; overflow: hidden; background: #1C2A3D; }
.free-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 45%;
  animation: free-drift 22s ease-in-out infinite alternate;
}
@keyframes free-drift { from { transform: scale(1); } to { transform: scale(1.07); } }
.free-panel { display: flex; align-items: center; padding: 72px 56px; }
.free-inner { max-width: 540px; color: #FAF2E8; }
.free-eyebrow { color: rgba(250, 242, 232, .86); }
.free-title { margin: 0 0 22px; color: #FAF2E8; }
.free-price { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin: 0 0 24px; }
.free-was {
  position: relative; display: inline-block;
  font-size: clamp(40px, 5vw, 64px); font-weight: 800; letter-spacing: -.03em;
  color: rgba(250, 242, 232, .92); white-space: nowrap; line-height: 1;
}
/* The bold diagonal slash: an orange FILL across the price. */
.free-slash {
  position: absolute; left: -6%; right: -6%; top: 50%; height: 9px; margin-top: -4.5px;
  background: var(--orange); border-radius: 6px;
  transform: rotate(-11deg); box-shadow: 0 2px 0 rgba(28, 42, 61, .25);
}
.free-stamp {
  display: inline-block; padding: 10px 18px 11px;
  font-size: clamp(22px, 2.6vw, 30px); font-weight: 900; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap; line-height: 1;
  color: #1C2A3D; background: var(--orange);          /* ink on orange: 5.7:1 */
  border-radius: 10px; transform: rotate(-4deg);
  box-shadow: 0 6px 18px rgba(16, 26, 38, .3);
}
.free-body { margin: 0 0 28px; font-size: 17.5px; line-height: 1.55; color: #FAF2E8; }
.free-cta { background: #FAF2E8; color: #1C2A3D; min-height: 52px; font-size: 16.5px; }
.free-cta:hover { opacity: .9; }
.free-small { margin: 14px 0 0; font-size: 14px; color: rgba(250, 242, 232, .86); }
@media (max-width: 900px) {
  .free-band { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .free-media { aspect-ratio: 4 / 3; }
  .free-panel { padding: 48px 24px 56px; }
}
@media (max-width: 400px) { .free-panel { padding: 40px 16px 48px; } }

/* ── 4. the Reel wall: a stage ────────────────────────────────────── */
.reelwall {
  position: relative; overflow: hidden;
  padding: 104px 0 96px;
  color: #FAF2E8;
  background:
    radial-gradient(60% 70% at 12% 0%, rgba(52, 96, 160, .55), transparent 70%),
    radial-gradient(50% 60% at 92% 10%, rgba(243, 130, 52, .30), transparent 70%),
    radial-gradient(70% 60% at 50% 110%, rgba(168, 67, 122, .30), transparent 70%),
    #121C29;
}
.reelwall-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
.reelwall-head h2 { margin: 0 0 12px; color: #FAF2E8; }
.reelwall-eyebrow { color: rgba(250, 242, 232, .86); }
.reelwall-lede { color: rgba(250, 242, 232, .92); max-width: 46ch; }
.reelwall-nav { display: flex; gap: 10px; flex: none; }
.reelwall-arrow {
  width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: #1C2A3D; background: #FAF2E8;
}
.reelwall-arrow svg { width: 22px; height: 22px; }
.reelwall-arrow:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); }
@media (hover: none) { .reelwall-nav { display: none; } }

/* The strip scrolls INSIDE itself; padding lines its first card up with
   .wrap so the page edge never moves. */
.reelwall-track {
  display: flex; gap: 18px; margin: 0; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: max(24px, calc((100vw - 1072px) / 2));
  padding: 6px max(24px, calc((100vw - 1072px) / 2)) 22px;
  scrollbar-width: thin; scrollbar-color: rgba(250,242,232,.4) transparent;
}
.reelwall-card {
  flex: 0 0 min(250px, 60vw); scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.reelwall-phone {
  position: relative; aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden;
  background: #0B1118;
  box-shadow: 0 0 0 6px #0B1118, 0 0 0 7px rgba(250, 242, 232, .18), 0 24px 50px rgba(0, 0, 0, .45);
  margin: 7px;
}
.reelwall-phone img, .reelwall-phone video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.reelwall-play {
  position: absolute; left: 50%; top: 79%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(250, 242, 232, .92); box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s var(--ease);
}
.reelwall-play span {
  width: 0; height: 0; margin-left: 5px;
  border-left: 18px solid #1C2A3D; border-top: 11px solid transparent; border-bottom: 11px solid transparent;
}
@media (hover: hover) { .reelwall-play:hover { transform: translate(-50%, -50%) scale(1.06); } }
.reelwall-play:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); }
.reelwall-title { margin: 4px 8px 0; font-size: 16px; font-weight: 700; line-height: 1.3; }
.reelwall-link {
  /* margin-top: auto pins every link to the card's foot, so a one-line title
     leaves its "On Instagram" level with its neighbours' (Vic, iPad, v3.10.2). */
  margin: auto 8px 0; align-self: flex-start;
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 15px; font-weight: 600; color: #FAF2E8; text-underline-offset: 3px;
}
.reelwall-endcard {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  padding: 22px 18px;
  background:
    radial-gradient(90% 60% at 80% 10%, rgba(243, 130, 52, .55), transparent 70%),
    linear-gradient(160deg, #3460A0, #1C2A3D);
}
.reelwall-endcard p { margin: 0; position: relative; }
.reelwall-end-tag {
  align-self: flex-start; padding: 6px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #1C2A3D; background: var(--orange);
}
.reelwall-end-title { font-size: 24px; font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
.reelwall-end-body { font-size: 15px; line-height: 1.45; color: rgba(250, 242, 232, .94); }
.reelwall-end-price { font-size: 15px; color: rgba(250, 242, 232, .94); }
.reelwall-end-price b { color: #FAF2E8; white-space: nowrap; }

/* ── 5. services bento ────────────────────────────────────────────── */
.svc-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "sim sim pro pro"
    "sim sim calc how"
    "reel reel c167 books"
    "merch merch merch merch";
}
.svc-sim { grid-area: sim; } .svc-pro { grid-area: pro; } .svc-calc { grid-area: calc; }
.svc-how { grid-area: how; } .svc-reel { grid-area: reel; } .svc-167 { grid-area: c167; }
.svc-books { grid-area: books; } .svc-merch { grid-area: merch; }
/* The Custom Reels picture stays 16:10 although it is two columns wide, so its text
   starts lower than the 167 and books cards beside it. Kept on purpose (v3.10.3): a
   one-row-tall crop (83:25) cut "CUSTOM" off the banner and left "REELS". */
@media (max-width: 1023px) {
  .svc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "sim sim" "pro pro" "calc how" "reel reel" "c167 books" "merch merch";
  }
}
@media (max-width: 640px) {
  .svc-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "sim" "pro" "calc" "how" "reel" "c167" "books" "merch"; }
}
.svc {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); border-radius: 22px; overflow: hidden;
  box-shadow: var(--shadow);
}
.svc-pic { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-3); }
.svc-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px 22px 24px; flex: 1; }
.svc-body h3 { margin: 0; font-size: 22px; letter-spacing: -.015em; line-height: 1.15; }
.svc-body p { margin: 0; font-size: 15.5px; line-height: 1.5; }
.svc-body .btn { margin-top: auto; min-height: 44px; }
/* v3.10.3: was margin-top: 8px, which beat the auto above and left buttons in one
   row at different heights (up to 117px); the body's 10px gap keeps the space. */
.svc-tag {
  padding: 5px 12px; border-radius: 999px;
  font-size: 13.5px !important; font-weight: 700; letter-spacing: .01em;
  background: var(--surface-2); color: var(--label);
}
.svc-tag-free { background: var(--green-wash); }
.svc-tag-orange, .svc-tag-soon { background: var(--orange); color: #1C2A3D; }
.svc-price { font-weight: 600; }
.svc-price b { white-space: nowrap; }

/* The big simulator card: the real app, a phone and its chart. */
.svc-sim { background: linear-gradient(160deg, #3460A0 0%, #2D569B 55%, #1C2A3D 100%); color: #FAF2E8; }
.svc-sim .svc-body h3 { font-size: clamp(26px, 3vw, 34px); color: #FAF2E8; }
.svc-sim .svc-body p { color: #FAF2E8; font-size: 17px; }
.svc-sim .svc-tag { background: rgba(250, 242, 232, .16); color: #FAF2E8; }
.svc-sim .btn-primary { background: #FAF2E8; color: #1C2A3D; }
.svc-pic-app { aspect-ratio: auto; flex: 1 1 auto; min-height: 300px; background: none; display: flex; justify-content: center; align-items: center; gap: 0; padding: 34px 22px 8px; }
.svc-sim .svc-body { flex: none; padding-bottom: 30px; }
.svc-pic-app img { width: auto; height: auto; object-fit: contain; }
.svc-pic-app img:first-child {
  width: min(46%, 250px); border-radius: 22px;
  box-shadow: 0 0 0 5px #0B1118, 0 20px 40px rgba(0, 0, 0, .35);
  position: relative; z-index: 1;
}
.svc-pic-chart {
  width: min(52%, 300px) !important; margin-left: -6%; margin-bottom: 34px;
  border-radius: 16px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); align-self: center;
}

.svc-calc { background: var(--surface-2); }
.svc-calc .svc-body { justify-content: flex-start; }
.svc-calc .svc-body::before {
  /* A tiny three-line chart in pure CSS, so the card is not just words. */
  content: ""; display: block; width: 100%; height: 86px; margin-bottom: 6px; border-radius: 12px;
  background:
    linear-gradient(160deg, transparent 49%, var(--series-debt) 49% 52%, transparent 52%) 0 0 / 100% 100% no-repeat,
    linear-gradient(170deg, transparent 58%, var(--series-loc) 58% 61%, transparent 61%) 0 0 / 100% 100% no-repeat,
    var(--surface);
}
.svc-pic-books { display: flex; gap: 12px; justify-content: center; align-items: flex-end; padding: 22px 22px 0; background: linear-gradient(180deg, #F3EDE3, #E8E0D3); }
.svc-pic-books a { display: block; width: 44%; }
.svc-pic-books img { width: 100%; height: auto; border-radius: 6px 6px 0 0; box-shadow: 0 10px 24px rgba(28, 42, 61, .25); }
.svc-pic-books a:nth-child(2) img { transform: rotate(3deg); transform-origin: bottom center; }
:root[data-theme="dark"] .svc-pic-books { background: linear-gradient(180deg, #22303F, #18232F); }

/* Merch: the card is the rack. */
.svc-merch { flex-direction: row; align-items: stretch; background: linear-gradient(120deg, #FAF2E8 0%, #F3EDE3 100%); }
:root[data-theme="dark"] .svc-merch { background: var(--surface); }
.svc-merch .svc-body { flex: 0 1 360px; justify-content: center; padding: 30px; }
.svc-rack { position: relative; flex: 1 1 0; min-width: 0; min-height: 300px; display: flex; justify-content: center; gap: 4%; padding: 44px 24px 0; }
.svc-rail {
  position: absolute; left: 18px; right: 18px; top: 26px; height: 8px; border-radius: 4px;
  background: linear-gradient(180deg, #9AA3AD, #5C6670); box-shadow: 0 2px 4px rgba(0,0,0,.25);
}
.svc-hang { position: relative; width: 28%; max-width: 190px; transform-origin: 50% -18px; transition: transform .6s var(--ease); }
.svc-hook {
  position: absolute; left: 50%; top: -22px; width: 18px; height: 24px; margin-left: -9px;
  border: 3px solid #5C6670; border-bottom: 0; border-radius: 10px 10px 0 0;
}
.svc-hang img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 14px 28px rgba(28, 42, 61, .25); }
@media (hover: hover) {
  .svc-merch:hover .svc-hang-1 { transform: rotate(-2.5deg); }
  .svc-merch:hover .svc-hang-3 { transform: rotate(2.5deg); }
}
@media (max-width: 720px) {
  .svc-merch { flex-direction: column; }
  .svc-merch .svc-body { flex: none; padding: 22px 22px 24px; }
  .svc-rack { min-height: 0; padding: 44px 16px 0; }
}

/* ── the curling sticky note (on the month-one receipt) ───────────── */
.receipt { position: relative; }
.egg-note {
  --c: 10px;                                   /* curl size, set by landing.js */
  position: absolute; right: 14px; top: -42px; z-index: 2;
  width: 150px; padding: 12px 20px 16px 13px;
  font: 700 15px/1.25 "Marker Felt", "Chalkboard SE", "Comic Sans MS", var(--font);
  color: #1C2A3D;
  background: linear-gradient(170deg, #FFE867, #FFD93B);
  transform: rotate(4deg);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%);
  filter: drop-shadow(0 6px 10px rgba(28, 42, 61, .22));
}
.egg-note::after {
  /* the curled-up underside of the corner */
  content: ""; position: absolute; right: 0; bottom: 0;
  width: var(--c); height: var(--c);
  background: linear-gradient(315deg, transparent 50%, #E8C21E 50%, #F7DE6A 100%);
  border-radius: 0 0 0 6px;
}
.egg-note::before {
  content: ""; position: absolute; left: 50%; top: -8px; width: 54px; height: 18px; margin-left: -27px;
  background: rgba(255, 255, 255, .55); transform: rotate(-3deg);
}
@media (max-width: 860px) { .egg-note { right: 10px; top: -46px; width: 140px; font-size: 14px; } }
@media (max-width: 300px) { .egg-note { display: none; } }

/* ── Winnie peeking over the FAQ ──────────────────────────────────── */
#faq .wrap { position: relative; }
#faq { overflow: hidden; }
.egg-winnie {
  position: absolute; right: 16px; top: -44px; z-index: 2;
  width: 96px; height: 96px; padding: 0; border: 0; background: none; cursor: pointer;
  transform: translateY(18px); transition: transform .5s var(--ease);
}
.egg-winnie img { width: 100%; height: 100%; display: block; }
.egg-winnie:hover, .egg-winnie:focus-visible, .egg-winnie.is-up { transform: translateY(0); }
.egg-winnie:focus-visible { outline: none; }
.egg-winnie:focus-visible img { filter: drop-shadow(0 0 0 var(--blue)) drop-shadow(0 0 3px var(--blue)); }
.egg-bubble {
  position: absolute; right: 86px; top: 8px; white-space: nowrap;
  padding: 8px 12px; border-radius: 14px 14px 2px 14px;
  font-size: 14px; font-weight: 700; color: #1C2A3D; background: #FAF2E8;
  box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease);
}
.egg-bubble:empty { display: none; }
.egg-winnie.is-up .egg-bubble { opacity: 1; }
@media (max-width: 820px) { #faq { padding-top: 96px; } .egg-winnie { top: -64px; } }

/* ── backstage ────────────────────────────────────────────────────── */
.backstage { background: var(--brand-ink); color: #FAF2E8; }
.backstage h2 { color: #FAF2E8; }
.backstage-eyebrow { color: rgba(250, 242, 232, .86); }
.backstage-grid {
  display: grid; gap: 22px;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
}
@media (max-width: 900px) { .backstage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .backstage-rig { grid-column: 1 / -1; } }
@media (max-width: 300px) { .backstage-grid { grid-template-columns: minmax(0, 1fr); } }
.backstage-item { margin: 0; min-width: 0; }
.backstage-item figcaption { margin-top: 12px; font-size: 15px; color: rgba(250, 242, 232, .92); }
.egg-rig { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #dde5ee; }
.egg-rig img, .egg-rig iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.egg-rig-btn {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 15.5px; font-weight: 700; white-space: nowrap;
  color: #FAF2E8; background: #1C2A3D; box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
}
.egg-rig-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); }
@media (max-width: 380px) { .egg-rig-btn { font-size: 14px; padding: 0 16px; white-space: normal; } }
.egg-guitar {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
}
/* The photo's near-black backdrop melts into the ink band instead of
   reading as a box: lighten keeps whichever is lighter, the band or the guitar. */
.egg-guitar img { display: block; width: 78%; max-width: 230px; height: auto; margin: 0 auto; transform: rotate(-12deg); transition: transform .5s var(--ease); mix-blend-mode: lighten; }
.egg-guitar[aria-expanded="true"] img, .egg-guitar:hover img { transform: rotate(-4deg); }
.egg-guitar:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); border-radius: 12px; }
.backstage-rig figcaption, .backstage-guitar figcaption, .backstage-flip figcaption { text-align: center; }
.backstage-flip img { display: block; width: 82%; max-width: 220px; height: auto; margin: 0 auto; transform: rotate(5deg); }

/* ── closer ───────────────────────────────────────────────────────── */
.closer { background: var(--brand); color: #FAF2E8; }
.closer-inner h2 { color: #FAF2E8; max-width: 22ch; margin-left: auto; margin-right: auto; }
.closer-inner p { color: #FAF2E8; }
.closer .btn-primary { background: #FAF2E8; color: #1C2A3D; min-height: 52px; font-size: 16.5px; }

/* ── footer ───────────────────────────────────────────────────────── */
.foot-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
@media (max-width: 760px) { .foot-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .foot-cols > :first-child { grid-column: 1 / -1; } }
@media (max-width: 300px) { .foot-cols { grid-template-columns: minmax(0, 1fr); } }
.foot-brand { align-items: flex-start; }
.foot-mail { margin: 8px 0 0; }
.foot-mail a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--blue); overflow-wrap: anywhere; }
.foot-nav { display: flex; flex-direction: column; min-width: 0; }
.foot-h { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--label-2); }
.foot-nav a { display: flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--label); text-decoration: none; }
.foot-nav a:hover { text-decoration: underline; }
.foot-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; font-size: 14px; }

/* ── the phone dock ───────────────────────────────────────────────── */
.dock { display: none; }
@media (max-width: 820px) {
  .dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--chrome-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid var(--separator);
    transform: translateY(110%); transition: transform .3s var(--ease);
  }
  .dock.is-on { transform: none; }
  .dock .btn { min-height: 48px; font-size: 15.5px; }
  .dock-go { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
  .dock-login { flex: none; }
  body { padding-bottom: 72px; }
}
@media (max-width: 300px) { .dock-login { display: none; } }

/* ── reduced motion: everything stops ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .free-media img { animation: none; }
  .svc-hang, .egg-winnie, .egg-guitar img, .dock, .follow-chip, .reelwall-play, .hero-pill { transition: none; }
  .reelwall-track { scroll-behavior: auto; }
}

/* ── measured fixes, first shoot.js pass ──────────────────────────── */
/* The 44px moon cost the 390 bar 12px it did not have (395 wide). The gap
   gives it back; the lockup keeps its 48px. */
@media (max-width: 400px) { .site-chrome .chrome-inner { gap: 6px; } }
/* 44px everywhere, not only on touch: an iPad at 1024 reports a fine pointer
   in emulation and a coarse one in the hand, and both must pass. */
.btn, a.btn { min-height: 44px; }
.btn-lg { min-height: 48px; }
.site-chrome .chrome-cta, .site-chrome .chrome-menu-cta { min-height: 44px; }
#stratControl button, #calcControl button { min-height: 44px; }
/* Mindy's fix 9 on the kept sections too: no label under 14px on a phone. */
@media (max-width: 820px) {
  .eyebrow, .hero-proof-label, .reelwall-end-tag, .card-title, .tile-label,
  .tile-note, .ht-meta, .card-sub, .legend, .legend-item, .strat-stat dt, .strat-stat small,
  .strat-note, .receipt-note, .tiers-foot, .tier-flag, .step-n, .foot-h { font-size: 14px; }
}

/* Second pass: a phone gets shorter pictures so eight cards are not eight
   screens (the simulator and the book covers keep their shape). */
@media (max-width: 640px) {
  .svc-pic:not(.svc-pic-app):not(.svc-pic-books) { aspect-ratio: 2 / 1; }
  .svc-body { padding: 18px 18px 20px; gap: 8px; }
  .svc-body h3 { font-size: 21px; }
  .svc-pic-app { min-height: 0; padding: 24px 16px 4px; }
  .svc-pic-books { padding-top: 16px; }
  .svc-pic-books a { width: 36%; }
}
/* Third pass: the home link is a tap target too (40px lockup from 1021 to
   1119 and under 380), and two labels read 13px on a phone. */
.chrome-brand { min-height: 44px; }
@media (max-width: 820px) { .tier-name, .foot-disclaimer { font-size: 14px; } }
/* The phone window's edges showed as a faint seam against the field: fade
   them out so Winnie sits in the blue rather than in a box. */
@media (max-width: 820px) {
  .hero-winnie img {
    object-position: 84% 26%;
    -webkit-mask-image: radial-gradient(ellipse 62% 88% at 70% 42%, #000 62%, transparent 100%);
            mask-image: radial-gradient(ellipse 62% 88% at 70% 42%, #000 62%, transparent 100%);
  }
}
/* Stacked, the rack's flex-basis 0 collapsed it to no height and the
   hangers fell over the copy. It sizes to its pictures instead. */
@media (max-width: 720px) { .svc-rack { flex: none; padding-bottom: 4px; } }
.btn { text-align: center; }

/* ══════════════════════════════════════════════════════════════════════
   v3.10.0, the trim: the prototype was 23 phone screens. These rules are
   what took it to about ten without dropping a word: the long story folds
   into tap-to-open panels, the services become a swipe strip on a phone,
   and the back room opens on the origin story.
   ══════════════════════════════════════════════════════════════════════ */

/* ── the folds ─────────────────────────────────────────────────────── */
.deep .sec-head { margin-bottom: 28px; }
.folds { display: flex; flex-direction: column; gap: 12px; }
.fold { background: var(--surface); border-radius: 18px; box-shadow: var(--shadow); overflow: clip; }
.fold-sum {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: minmax(0, 1fr) 24px;
  grid-template-areas: "k chev" "t chev";
  align-items: center; gap: 4px 14px;
  min-height: 64px; padding: 16px 20px 16px 22px;
}
.fold-sum::-webkit-details-marker { display: none; }
.fold-sum::after {
  content: ""; grid-area: chev; justify-self: center;
  width: 11px; height: 11px; margin-top: -6px;
  border-right: 2.5px solid var(--blue); border-bottom: 2.5px solid var(--blue);
  transform: rotate(45deg); transition: transform .25s var(--ease);
}
.fold[open] > .fold-sum::after { transform: rotate(-135deg); margin-top: 6px; }
.fold-sum:hover .fold-t { color: var(--blue); }
.fold-sum:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--ring); border-radius: 18px; }
.fold-k { grid-area: k; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--label-2); }
.fold-k .tier-flag { position: static; margin-left: 6px; vertical-align: 1px; }
.fold-t { grid-area: t; font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--label); }
/* Inside a panel the old sections lose their band padding and colour,
   and never wait for a reveal: a shut panel never intersects, so the
   observer would leave them transparent. */
.fold > .band { padding: 4px 0 30px; background: none; }
.fold > .band > .wrap { max-width: none; padding: 0 22px; }
.fold > .honest { background: var(--brand-ink); padding: 40px 0; }
.fold .sec-head { margin-bottom: 26px; }
.fold .sec-head h2 { font-size: clamp(24px, 3vw, 32px); }
.js .fold .reveal { opacity: 1; transform: none; transition: none; }
.fold .wall-grid { margin-top: 56px; }
@media (max-width: 640px) {
  .fold-sum { padding: 14px 16px 14px 18px; }
  .fold-t { font-size: 17px; }
  .fold > .band > .wrap { padding: 0 16px; }
}

/* ── services: a swipe strip on a phone ───────────────────────────── */
.svc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.svc-nav { display: none; }
.svc-scroller { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) {
  .svc-band .sec-head { margin-bottom: 22px; }
  .svc-scroller {
    max-width: none; padding: 4px 24px 18px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 24px;
    scrollbar-width: thin;
  }
  .svc-grid { display: flex; gap: 14px; width: max-content; }
  .svc { flex: 0 0 min(300px, 80vw); scroll-snap-align: start; }
  .svc-pic-app img:first-child { width: 112px; }
  .svc-pic-chart { width: 150px !important; margin-bottom: 18px; }
  .svc-merch .svc-rack { padding-top: 40px; }
  /* v3.10.3: in the strip every body stretches to the card foot, so all eight
     buttons share one line (the simulator and merch bodies were flex: none). */
  .svc-sim .svc-body, .svc-merch .svc-body { flex: 1; padding-bottom: 20px; }
}
@media (max-width: 640px) and (hover: hover) { .svc-nav { display: flex; } }

/* ── Pro is free: a shorter picture on a phone ────────────────────── */
@media (max-width: 900px) { .free-media { aspect-ratio: 16 / 7; } }

/* ── pricing: the Free list, one tap on a phone ───────────────────── */
.tier-more { margin: 2px 0 18px; }
.tier-more > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-weight: 700; color: var(--blue);
}
.tier-more > summary::-webkit-details-marker { display: none; }
.tier-more > summary::after {
  content: ""; width: 8px; height: 8px; margin-top: -4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
.tier-more[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.tier-more > summary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); border-radius: 8px; }
.tier-more .tier-list { margin-top: 6px; }
@media (min-width: 760px) { .js .tier-more > summary { display: none; } .tier-more { margin-top: 0; } }

/* ── the back room: the origin story ──────────────────────────────── */
.origin {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 40px; align-items: center; margin: 0 0 56px;
}
.origin picture, .origin img { display: block; width: 100%; height: auto; }
.origin img { border-radius: 22px; box-shadow: 0 24px 50px rgba(0, 0, 0, .4); }
.origin figcaption { min-width: 0; }
.origin-quote { margin: 0; }
.origin-quote p {
  margin: 0 0 14px; color: #FAF2E8;
  font-size: clamp(24px, 3vw, 36px); font-weight: 800; line-height: 1.18; letter-spacing: -.02em;
}
.origin-who { margin: 0; font-size: 16px; font-weight: 700; color: #FAF2E8; }
.origin-who::before { content: ""; display: inline-block; width: 28px; height: 3px; margin: 0 10px 5px 0; border-radius: 2px; background: var(--orange); vertical-align: middle; }
.origin-note { margin: 14px 0 0; font-size: 15px; color: rgba(250, 242, 232, .9); }
@media (max-width: 760px) {
  .origin { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-bottom: 36px; }
}
/* The rig is a LINK to its own page now, not a button that builds an iframe. */
a.egg-rig { display: block; text-decoration: none; color: inherit; }
a.egg-rig:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); }
.egg-rig .egg-rig-btn { display: inline-flex; align-items: center; justify-content: center; }
@media (hover: hover) { a.egg-rig:hover .egg-rig-btn { background: #2D569B; } }
@media (max-width: 900px) {
  .egg-guitar img { width: 64%; max-width: 160px; }
  .backstage-flip img { width: 66%; max-width: 160px; }
}

/* ── a tighter rhythm on a phone ──────────────────────────────────── */
@media (max-width: 820px) {
  .band { padding: 60px 0; }
  .reelwall { padding: 64px 0 56px; }
  .closer { padding: 56px 0; }
}
@media (max-width: 820px) {
  .band { padding: 52px 0; }
  .reelwall-card { flex-basis: min(250px, 54vw); }
  .fold-sum { min-height: 56px; }
}
.tiers-fine { text-align: center; margin: 8px 0 0; }
.tiers-fine .tiers-foot { margin-top: 4px; }
@media (max-width: 820px) { #faq { padding-top: 76px; } .egg-winnie { top: -56px; } }
/* Gate fixes, first full run: the chevrons are rotated boxes, and a
   rotation counts toward scrollable overflow (2px at 250 and 320); a panel's
   own padding cost the KPI tiles 2px at 360. */
.tier-more > summary { padding-right: 6px; }
@media (max-width: 400px) { .fold > .band > .wrap { padding: 0 10px; } .fold .tiles { gap: 10px; } }
/* While the phone dock is up, the chat launcher rides above it: both are
   fixed bottom-right, and the launcher (z-index 60) covered Log in. */
@media (max-width: 820px) { .dock-up .cc-launch { transform: translateY(-68px); } }
/* v3.10.0, Headquarters: the chat launcher covered the right end of "Watch
   the showreel" on a phone. While the hero's buttons are on screen it slides
   off the right edge (hidden, so it cannot be tapped through or tabbed to),
   and it slides back once they scroll away. */
@media (max-width: 820px) {
  .home .cc-launch { transition: transform .3s var(--ease), visibility 0s; }
  .hero-btns-in .cc-launch { transform: translateX(110px); visibility: hidden; transition: transform .3s var(--ease), visibility 0s .3s; }
}
@media (max-width: 820px) and (prefers-reduced-motion: reduce) { .home .cc-launch, .hero-btns-in .cc-launch { transition: none; } }

/* v3.10.3: the pricing heading sits over its two centred cards, as FAQ's does. */
#pricing .sec-head { max-width: 800px; margin-inline: auto; }