/* ============================================================
   Tell and Show — Homepage v2 (stylesheet)
   /tns/home-v2.css
   ----------------------------------------------------------------
   Depends on /tns/site-base-v2.css for tokens, reset, nav, footer,
   button/section/eyebrow/ai-mark primitives, and motion utilities.
   This file contains ONLY homepage section styles (hero, trust,
   reel, tracks, counter, age, loop, studio mockup, literacy,
   parents, pricing, box, promise, quote, FAQ, easter, final CTA)
   plus their page-specific motion + responsive overrides.
   ============================================================ */


/* ---------- HERO ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(440px, .92fr) minmax(540px, 1.08fr);
  gap: 64px;
  align-items: center;
  /* Only block padding — horizontal gutters fall through to .page so the
     hero never sits flush against the viewport edge on mobile. */
  padding-top: 88px;
  padding-bottom: 104px;
}
.hero-copy { position: relative; z-index: 2; }
.hero-copy .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 24px;
}
.hero-copy .eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--m-accent);
}
.hero h1 {
  /* The .line--nowrap modifier on the second line forces "ImaginAItion" to
     stay one word, so the font-size ceiling is the budget that has to fit
     it inside the hero column at every viewport. 68px x 12ch x ~0.55em fits
     the 440px min column width with margin to spare. */
  font-size: clamp(44px, 5.6vw, 68px);
  line-height: .96;
  letter-spacing: -.022em;
  font-weight: 540;
}
.hero h1 .keyword { color: var(--m-accent); }
.hero h1 .scribble { padding-bottom: 8px; background-size: 100% 12px; }
.hero h1 span.line { display: block; }
.hero h1 span.line--nowrap { white-space: nowrap; }
.hero-copy > p {
  margin-top: 28px;
  max-width: 520px;
  color: var(--m-ink-2);
  font-size: 21px;
  line-height: 1.38;
}
.hero-cta {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hero-wink {
  margin-top: 22px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--m-ink-3);
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.4;
}
.hero-wink::before {
  content: "↗";
  font-style: normal;
  font-family: var(--f-sans);
  font-size: 13px;
  color: var(--m-accent);
  font-weight: 700;
}

.hero-meta {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  color: var(--m-muted);
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 500;
}
.hero-meta b {
  color: var(--m-ink);
  font-weight: 700;
}

.hero-artifact {
  position: relative;
}
.hero-artifact .browser {
  transform: rotate(-.5deg);
}
.hero-artifact .browser:hover { transform: rotate(0deg) translateY(-2px); }
.hero-artifact .browser {
  transition: transform 450ms var(--e-out);
}

/* ---------- BROWSER CHROME (recurring motif) ---------- */

.browser {
  position: relative;
  border: 1px solid var(--m-line-strong);
  border-radius: 12px;
  background: white;
  box-shadow: 0 28px 64px rgba(20, 20, 19, .15), 0 8px 18px rgba(20, 20, 19, .06);
  overflow: hidden;
}
.browser-chrome {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(180deg, #F7F4ED 0%, #F1EDE3 100%);
  border-bottom: 1px solid var(--m-line);
}
.traffic-lights { display: flex; gap: 7px; }
.traffic-lights span {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #E6E0D3;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.12);
}
.traffic-lights span:nth-child(1) { background: #FF5F57; }
.traffic-lights span:nth-child(2) { background: #FEBC2E; }
.traffic-lights span:nth-child(3) { background: #28C840; }
.url-bar {
  height: 32px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--r-pill);
  background: white;
  border: 1px solid var(--m-line);
  color: var(--m-ink-2);
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .003em;
  max-width: 540px;
  margin: 0 auto;
  width: 100%;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.02);
}
.url-bar .lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--m-muted);
}
.url-bar .lock svg { width: 11px; height: 11px; }
.url-bar .host { color: var(--m-ink); font-weight: 600; }
.url-bar .path { color: var(--m-muted); }
.browser-chrome-right {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--m-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.browser-screen {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #04071a;
}
.browser-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.play-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.30) 100%);
  transition: background var(--d-base) var(--e-out);
}
.browser:hover .play-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.22) 100%);
}
.play-overlay .play-btn {
  width: 80px; height: 80px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .35);
  transition: transform var(--d-base) var(--e-out);
}
.browser:hover .play-overlay .play-btn { transform: scale(1.06); }
.play-overlay .play-btn::after {
  content: "";
  width: 0; height: 0;
  margin-left: 7px;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 22px solid var(--m-ink);
}

/* polaroid corner tape */
.tape {
  position: absolute;
  width: 84px;
  height: 22px;
  background: rgba(255, 226, 152, .68);
  border: 1px solid rgba(196, 154, 80, .42);
  box-shadow: 0 2px 6px rgba(20,20,19,.08);
  z-index: 4;
  pointer-events: none;
}
.tape-tl { top: -10px; left: 28px; transform: rotate(-6deg); }
.tape-tr { top: -10px; right: 32px; transform: rotate(7deg); }
.tape-br { bottom: -10px; right: 56px; transform: rotate(-8deg); }
.tape-bl { bottom: -10px; left: 50px; transform: rotate(6deg); }

/* tucked show-tab */
.show-tab {
  position: absolute;
  top: 38px;
  right: -16px;
  z-index: 6;
  padding: 7px 14px 7px 16px;
  background: var(--studio-accent);
  color: white;
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 3px;
  box-shadow: 0 8px 18px rgba(20, 20, 19, .22), inset 0 1px 0 rgba(255,255,255,.18);
  transform: rotate(2deg);
}
.show-tab::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 6px;
  background: var(--studio-accent);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
}

/* "ship seal" stamp */
.ship-seal {
  position: absolute;
  bottom: -36px;
  left: -36px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--show-card-bg);
  border: 2px solid var(--m-ink);
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--m-ink);
  transform: rotate(-12deg);
  box-shadow: 0 8px 22px rgba(20, 20, 19, .14);
  line-height: 1.25;
  z-index: 5;
}
.ship-seal::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--m-ink);
  border-radius: 50%;
}
.ship-seal span {
  display: block;
  font-size: 18px;
  font-family: var(--f-serif);
  font-weight: 540;
  text-transform: none;
  letter-spacing: -.01em;
  margin-top: 2px;
}

.hero-caption {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-left: 4px;
}
.hero-caption-text {
  color: var(--m-ink-2);
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 500;
}
.hero-caption-text b { color: var(--m-ink); font-weight: 700; }
.hero-caption-text em { font-style: italic; color: var(--m-muted); }
.hero-stamps { display: flex; gap: 8px; }
.hero-stamps a {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--m-line-strong);
  color: var(--m-ink-2);
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: border-color var(--d-base) var(--e-out), color var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
.hero-stamps a:hover {
  border-color: var(--t-game);
  color: var(--t-game);
  transform: translateY(-2px);
}

/* ---------- TRUST STRIP ---------- */

.trust-section {
  padding: 36px 0;
  border-top: 1px solid var(--m-line);
  border-bottom: 1px solid var(--m-line);
  background: linear-gradient(180deg, #FBFAF5 0%, white 100%);
}
.trust-strip {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 36px;
  align-items: center;
}
.trust-quote {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.35;
  color: var(--m-ink);
  position: relative;
  padding-left: 16px;
}
.trust-quote::before {
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 3px;
  background: var(--m-accent);
}
.trust-quote small {
  display: block;
  margin-top: 8px;
  font-family: var(--f-sans);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--m-muted);
}
.trust-stat {
  text-align: left;
  border-left: 1px solid var(--m-line-strong);
  padding-left: 22px;
}
.trust-stat b {
  display: block;
  font-family: var(--f-serif);
  font-size: 36px;
  line-height: 1;
  letter-spacing: -.015em;
  font-weight: 540;
  color: var(--m-ink);
}
.trust-stat small {
  display: block;
  margin-top: 8px;
  color: var(--m-muted);
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}
.trust-stat b .keyword { color: var(--m-accent); }

/* ---------- THE REAL KID REEL ---------- */

.reel-section .section-head { max-width: 800px; }
.reel-grid {
  /* Editorial bento: Achilles is the featured card (top-left tall), three
     smaller satellite cards fill the remaining 2x2 quadrant on the right.
     Avoids the generic 4-equal feature row. */
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
}
.reel-grid #card-achilles {
  grid-column: 1;
  grid-row: 1 / span 2;
}
.reel-grid #card-icarus  { grid-column: 2; grid-row: 1; }
.reel-grid #card-orion   { grid-column: 3; grid-row: 1; }
.reel-grid #card-perseus { grid-column: 2 / span 2; grid-row: 2; }
.reel-grid #card-achilles .gamecard-head h3 { font-size: 30px; }
.gamecard {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--show-card-line);
  border-radius: var(--r-lg);
  background: var(--show-card-bg);
  box-shadow: var(--show-card-shadow);
  overflow: hidden;
  transition: transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out);
}
.gamecard::before {
  content: "";
  display: block;
  height: 5px;
  background: var(--t-game);
}
.gamecard:hover,
.gamecard:focus-within {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--t-game) 40%, var(--m-line-strong));
  box-shadow: 0 30px 60px rgba(20, 20, 19, .12);
}
.gamecard-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--m-line);
}
.gamecard-head h3 {
  font-size: 24px;
  line-height: 1.04;
  letter-spacing: -.005em;
  font-weight: 560;
}
.gamecard-head .sub {
  margin-top: 5px;
  color: var(--m-muted);
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .005em;
}
.stamp {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--t-game);
  color: var(--t-game);
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 860;
  letter-spacing: .08em;
}
.gamecard-art {
  position: relative;
  margin: 14px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #04071a;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--m-line);
}
.gamecard-art img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--e-out);
}
.gamecard:hover .gamecard-art img { transform: scale(1.04); }
.gamecard-tally {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
}
.gamecard-tally span {
  padding: 4px 8px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .92);
  color: var(--m-ink-2);
  backdrop-filter: blur(6px);
}
.gamecard-tally span b { color: var(--m-ink); font-weight: 800; }
.gamecard-tally .kept b { color: #1F6E40; }
.gamecard-tally .undone b { color: var(--err); }
.gamecard-body {
  padding: 0 18px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.gamecard-tag {
  color: var(--m-ink-2);
  font-size: 15px;
  line-height: 1.4;
}
.gamecard-detail {
  display: grid;
  max-height: 0;
  margin-top: 0;
  padding-top: 0;
  border-top: 1px solid transparent;
  opacity: 0;
  overflow: hidden;
  transform: translateY(6px);
  transition: max-height 320ms var(--e-out), margin-top 320ms var(--e-out), padding-top 320ms var(--e-out), border-color 320ms var(--e-out), opacity 240ms var(--e-out), transform 320ms var(--e-out);
}
.gamecard-detail p {
  color: var(--m-ink-3);
  font-family: var(--f-sans);
  font-size: 13px;
  line-height: 1.5;
  font-style: italic;
}
.gamecard:hover .gamecard-detail,
.gamecard:focus-within .gamecard-detail {
  max-height: 140px;
  margin-top: 14px;
  padding-top: 14px;
  border-color: var(--m-line);
  opacity: 1;
  transform: translateY(0);
}
.gamecard-play {
  margin-top: auto;
  padding-top: 14px;
  padding-bottom: 10px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px dashed var(--m-line);
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--m-accent);
}
.gamecard-play::after {
  content: "→";
  font-weight: 500;
  transition: transform var(--d-base) var(--e-out);
}
.gamecard:hover .gamecard-play::after { transform: translateX(4px); }

.reel-footer {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 24px 28px;
  border: 1px solid var(--m-line);
  border-radius: var(--r-lg);
  background: linear-gradient(0deg, #FAFAF5 0%, #FFFFFF 100%);
}
.reel-footer p { font-size: 18px; line-height: 1.4; color: var(--m-ink); }
.reel-footer p .keyword { color: var(--m-accent); font-weight: 600; }
.reel-footer .live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--m-ink-2);
}
.reel-footer .live::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 22%, transparent);
  animation: live-pulse 2.4s ease-out infinite;
}
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 22%, transparent); }
  50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--ok) 0%, transparent); }
}

/* ---------- FOUR-TRACK LINEUP ---------- */

.tracks-section { background: #FBFAF5; }
.tracks-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 16px;
}
.tracks-grid .track-card--game {
  grid-column: 1;
  grid-row: 1 / span 3;
  min-height: 100%;
}
.tracks-grid .track-card--game h3 { font-size: 44px; line-height: .98; }
.tracks-grid .track-card--game .what { font-size: 18px; max-width: 38ch; }
.tracks-grid .track-card--story { grid-column: 2; grid-row: 1; }
.tracks-grid .track-card--site  { grid-column: 2; grid-row: 2; }
.tracks-grid .track-card--movie { grid-column: 2; grid-row: 3; }
.tracks-grid .track-card--story,
.tracks-grid .track-card--site,
.tracks-grid .track-card--movie { min-height: 180px; }
.track-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px;
  border-radius: var(--r-lg);
  border: 1px solid var(--m-line-strong);
  background: white;
  min-height: 320px;
  overflow: hidden;
  transition: transform var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.track-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 4px; height: 100%;
  background: var(--tc);
}
.track-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--tc) 50%, var(--m-line-strong));
  box-shadow: 0 20px 44px rgba(20, 20, 19, .08);
}
.track-card .stamp {
  border-color: var(--tc);
  color: var(--tc);
  align-self: flex-end;
}
.track-card--game  { --tc: var(--t-game); }
.track-card--story { --tc: var(--t-story); }
.track-card--site  { --tc: var(--t-site); }
.track-card--movie { --tc: var(--t-movie); }
.track-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.track-card h3 {
  font-size: 30px;
  line-height: 1.04;
  letter-spacing: -.008em;
  font-weight: 540;
  color: var(--m-ink);
}
.track-card .what {
  margin-top: 12px;
  color: var(--m-ink-2);
  font-size: 15px;
  line-height: 1.42;
}
.track-card .ex {
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--m-muted);
  letter-spacing: .01em;
}
.track-card .ex b {
  display: block;
  color: var(--m-ink);
  font-weight: 700;
  font-family: var(--f-serif);
  font-size: 15px;
  font-style: italic;
  margin-top: 4px;
  letter-spacing: 0;
}
.track-card .live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ok) 12%, white);
  color: #1F6E40;
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* inner-refraction edge on the major surface cards — premium edge */
.gamecard,
.price-card,
.parent-frame,
.tracks-grid .track-card--game,
.age-grid .age-card[data-min="9"],
.box-card {
  box-shadow:
    var(--show-card-shadow),
    inset 0 1px 0 rgba(255, 255, 255, .85);
}
.gamecard:hover,
.price-card:hover,
.parent-frame:hover,
.box-card:hover {
  box-shadow:
    0 28px 60px rgba(20, 20, 19, .12),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}
.track-card .live-pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ok);
}
.track-card .soon-chip {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--m-line);
  color: var(--m-ink-3);
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ---------- COUNTER-POSITIONING ---------- */

.counter-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  margin-top: 12px;
}
.counter-panel {
  position: relative;
  border: 1px solid var(--m-line-strong);
  border-radius: var(--r-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 480px;
}
.counter-panel.slop {
  background: linear-gradient(180deg, #2B2A26 0%, #1E1D1A 100%);
  border-color: #1A1916;
  color: #C6BFB1;
}
.counter-panel.tns {
  background: white;
}
.counter-panel-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.counter-panel.slop .counter-panel-label {
  background: rgba(255, 255, 255, .08);
  color: #E0D6BE;
}
.counter-panel.tns .counter-panel-label {
  background: color-mix(in srgb, var(--m-accent) 10%, white);
  color: var(--m-accent-ink);
}
.counter-panel h3 {
  font-size: 32px;
  line-height: 1.04;
  letter-spacing: -.008em;
  font-weight: 540;
}
.counter-panel.slop h3 { color: white; }
.counter-panel .lede {
  font-size: 17px;
  line-height: 1.45;
}
.counter-panel.slop .lede { color: #C6BFB1; }
.counter-panel.tns .lede { color: var(--m-ink-2); }

.slop-output {
  margin-top: auto;
  padding: 20px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.62;
  color: #BFB6A0;
}
.slop-output strong {
  display: block;
  color: white;
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-weight: 700;
}
.slop-output em {
  display: block;
  margin-top: 14px;
  color: rgba(255, 255, 255, .35);
  font-style: italic;
  font-family: var(--f-serif);
  font-size: 13px;
}

.tns-output {
  margin-top: auto;
  padding: 20px;
  border-radius: var(--r-md);
  background: var(--show-card-bg);
  border: 1px solid var(--show-card-line);
}
.tns-prompt {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  align-items: start;
  font-family: var(--f-sans);
  font-size: 14px;
  color: var(--m-ink-2);
  margin-bottom: 14px;
}
.tns-prompt .speaker {
  font-weight: 700;
  color: var(--m-ink);
}
.tns-options { display: grid; gap: 8px; margin-bottom: 14px; }
.tns-option {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: center;
  padding: 11px 14px;
  border: 1px solid var(--m-line);
  border-radius: var(--r-md);
  background: white;
  font-family: var(--f-sans);
  font-size: 13px;
  color: var(--m-ink-2);
}
.tns-option.picked {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 6%, white);
  color: var(--m-ink);
  font-weight: 600;
}
.tns-option .check {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--m-line-strong);
  display: grid;
  place-items: center;
}
.tns-option.picked .check {
  background: var(--ok);
  border-color: var(--ok);
  color: white;
}
.tns-option.picked .check::after {
  content: "✓";
  font-size: 13px;
  font-weight: 800;
}
.tns-decision-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--m-line);
}
.tns-decision-row span {
  display: grid;
  place-items: center;
  padding: 9px 0;
  border-radius: var(--r-sm);
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 700;
  background: white;
  border: 1px solid var(--m-line);
  color: var(--m-ink-3);
}
.tns-decision-row .is-active {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 10%, white);
  color: #1F6E40;
}

/* ---------- IS THIS FOR MY KID? ---------- */

.age-section {
  background: linear-gradient(180deg, #FBF6E8 0%, #FAF1D8 100%);
}
.age-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
  margin-top: 12px;
}
.age-grid .age-card[data-min="9"] {
  grid-column: 1;
  grid-row: 1 / span 2;
  min-height: 100%;
}
.age-grid .age-card[data-min="9"] .range { font-size: 80px; }
.age-grid .age-card[data-min="9"] h4 { font-size: 26px; }
.age-grid .age-card[data-min="9"] p { font-size: 16px; }
.age-grid .age-card[data-min="6"] {
  grid-column: 2;
  grid-row: 1;
}
.age-grid .age-card[data-min="12"] {
  grid-column: 2;
  grid-row: 2;
}
.age-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border-radius: var(--r-lg);
  background: white;
  border: 1px solid #E8DCC8;
  min-height: 280px;
  box-shadow: 0 12px 32px rgba(112, 86, 24, .08);
}
.age-card .range {
  font-family: var(--f-serif);
  font-size: 56px;
  line-height: 1;
  font-weight: 540;
  letter-spacing: -.018em;
  color: var(--m-ink);
}
.age-card .role {
  margin-top: 10px;
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--m-accent);
}
.age-card h4 {
  margin-top: 14px;
  font-size: 22px;
  line-height: 1.12;
  font-weight: 560;
}
.age-card p {
  margin-top: 10px;
  color: var(--m-ink-2);
  font-size: 15px;
  line-height: 1.45;
}
.age-card ul {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 6px;
  font-family: var(--f-sans);
  font-size: 13px;
  color: var(--m-ink-2);
}
.age-card ul li {
  position: relative;
  padding-left: 16px;
}
.age-card ul li::before {
  content: "·";
  position: absolute;
  left: 0;
  top: -3px;
  color: var(--m-accent);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

/* ---------- MAKER LOOP ---------- */

.loop-strip {
  /* 4-step process visualized as a staircase: each frame drops slightly
     lower than its predecessor, so the eye traces the sequence even before
     reading the step numbers. Defaults to none on reduced motion. */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 8px;
  position: relative;
}
.loop-strip > .loop-frame:nth-child(2) { transform: translateY(18px); }
.loop-strip > .loop-frame:nth-child(3) { transform: translateY(36px); }
.loop-strip > .loop-frame:nth-child(4) { transform: translateY(54px); }
.loop-strip { margin-bottom: 54px; }
@media (prefers-reduced-motion: reduce) {
  .loop-strip > .loop-frame { transform: none !important; }
  .loop-strip { margin-bottom: 0; }
}
.loop-strip::after {
  content: "→ → →";
  position: absolute;
  top: -34px;
  right: 0;
  font-family: var(--f-sans);
  font-size: 14px;
  letter-spacing: .4em;
  color: var(--m-line-strong);
}
.loop-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--m-line-strong);
  border-radius: var(--r-lg);
  background: white;
  overflow: hidden;
  min-height: 380px;
  transition: transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.loop-frame:hover {
  box-shadow: 0 18px 38px rgba(20, 20, 19, .08);
}
.loop-frame-head {
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--m-line);
  background: #FBFAF5;
}
.loop-step-num {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--studio-accent);
}
.loop-frame-head h4 {
  margin-top: 6px;
  font-size: 22px;
  line-height: 1.06;
  font-weight: 560;
  letter-spacing: -.005em;
}
.loop-frame-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 18px 18px;
  gap: 14px;
}
.loop-frame-caption {
  margin-top: auto;
  color: var(--m-muted);
  font-family: var(--f-sans);
  font-size: 12px;
  font-style: italic;
  line-height: 1.45;
}

.theo-note {
  position: relative;
  padding: 22px 20px;
  background:
    repeating-linear-gradient(transparent 0 22px, #E5EAF3 22px 23px),
    #FBFCFE;
  border: 1px solid var(--m-line);
  border-radius: var(--r-sm);
  font-family: "Caveat", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: 23px;
  line-height: 1.2;
  color: #233252;
  transform: rotate(-1.2deg);
  min-height: 170px;
  box-shadow: 0 4px 14px rgba(20, 20, 19, .06);
}
.theo-note::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 68px;
  height: 16px;
  background: rgba(220, 180, 100, .42);
  border: 1px solid rgba(180, 140, 60, .45);
}
.theo-note small {
  display: block;
  margin-top: 14px;
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--m-muted);
  font-style: normal;
  letter-spacing: .02em;
}

.inkie-card {
  border: 1px solid var(--m-line);
  border-radius: var(--r-md);
  background: var(--s-panel);
  padding: 14px;
}
.inkie-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-family: var(--f-sans);
  font-size: 12px;
  color: var(--m-ink-2);
}
.inkie-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--studio-accent);
  position: relative;
}
.inkie-dot::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 2px;
  background: white;
  opacity: .92;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 60% 70%, 50% 100%, 40% 70%, 0 70%);
}
.inkie-row b { color: var(--m-ink); font-weight: 700; }
.prompt-preview {
  padding: 12px 14px;
  border: 1px dashed var(--m-line-strong);
  border-radius: var(--r-sm);
  background: white;
  font-family: var(--f-mono);
  font-size: 11.5px;
  line-height: 1.62;
  color: var(--m-ink-2);
}
.prompt-preview b { color: var(--m-accent); font-weight: 700; }

.change-frame {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--m-line);
  aspect-ratio: 4 / 3;
}
.change-frame img { width: 100%; height: 100%; object-fit: cover; }
.change-pin {
  position: absolute;
  top: 18%;
  left: 56%;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--t-movie);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--t-movie) 25%, transparent);
  animation: pin-pulse 2.4s ease-out infinite;
}
@keyframes pin-pulse {
  0%, 100% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--t-movie) 25%, transparent); }
  50%      { box-shadow: 0 0 0 16px color-mix(in srgb, var(--t-movie) 0%, transparent); }
}
.change-label {
  position: absolute;
  top: 14%;
  right: 8%;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: white;
  border: 1px solid var(--t-movie);
  color: var(--t-movie);
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.decision-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.decision-row span {
  display: grid;
  place-items: center;
  padding: 14px 0;
  border-radius: var(--r-md);
  border: 1px solid var(--m-line);
  background: white;
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--m-ink-3);
}
.decision-row .keep {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 10%, white);
  color: #1F6E40;
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--ok) 40%, white);
}
.decision-note {
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--show-card-decision-bg);
  color: var(--show-card-decision-ink);
  font-family: var(--f-sans);
  font-size: 12.5px;
  line-height: 1.5;
  border: 1px solid color-mix(in srgb, var(--show-card-decision-ink) 18%, white);
}
.decision-note b { font-weight: 800; }

/* ---------- STUDIO MOCKUP ---------- */

.studio-frame {
  margin-top: 12px;
  border: 1px solid var(--m-line-strong);
  border-radius: 14px;
  background: var(--s-panel);
  overflow: hidden;
  box-shadow: 0 36px 80px rgba(20, 20, 19, .12), 0 8px 22px rgba(20, 20, 19, .06);
}
.studio-chrome {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 12px 18px;
  background: #ECEEF2;
  border-bottom: 1px solid var(--s-line);
  font-family: var(--f-sans);
  font-size: 12px;
  color: var(--s-muted);
}
.studio-chrome .traffic-lights span { background: #CFD3DA; }
.studio-chrome .traffic-lights span:nth-child(1) { background: #FF5F57; }
.studio-chrome .traffic-lights span:nth-child(2) { background: #FEBC2E; }
.studio-chrome .traffic-lights span:nth-child(3) { background: #28C840; }
.studio-chrome b { color: var(--s-ink); font-weight: 700; }
.studio-chrome .file-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px;
  background: white;
  border-radius: 6px;
  border: 1px solid var(--s-line);
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--s-ink);
}
.studio-chrome .file-tab::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ok);
}
.studio-chrome .right {
  display: flex; gap: 6px; align-items: center;
  font-family: var(--f-sans);
  font-size: 11px;
}
.studio-chrome .right .toggle {
  display: inline-flex;
  background: white;
  border: 1px solid var(--s-line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.studio-chrome .right .toggle span {
  padding: 5px 11px;
  font-weight: 600;
  color: var(--s-muted);
}
.studio-chrome .right .toggle span.on {
  background: var(--s-ink);
  color: white;
}
.studio-body {
  display: grid;
  grid-template-columns: 220px minmax(0, 1.4fr) minmax(320px, .9fr);
  gap: 0;
  min-height: 480px;
}
.studio-rail {
  border-right: 1px solid var(--s-line);
  background: white;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--f-sans);
  font-size: 12px;
  color: var(--s-muted);
}
.studio-rail h6 {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--m-muted);
}
.studio-rail-list {
  display: grid;
  gap: 4px;
  margin-top: 8px;
}
.studio-rail-list .item {
  padding: 7px 10px;
  border-radius: var(--r-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--s-ink);
  font-weight: 500;
}
.studio-rail-list .item.on {
  background: color-mix(in srgb, var(--t-game) 12%, white);
  color: var(--t-game);
  font-weight: 700;
}
.studio-rail-list .item small {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--m-muted);
  font-weight: 600;
}
.studio-canvas {
  position: relative;
  background: #04071a;
  overflow: hidden;
  border-right: 1px solid var(--s-line);
}
.studio-canvas img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.studio-canvas-overlay {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: flex;
  gap: 8px;
  z-index: 2;
}
.studio-canvas-overlay span {
  padding: 9px 14px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.94);
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--s-ink);
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
}
.studio-canvas-overlay span.primary {
  background: var(--t-game);
  color: white;
}
.studio-canvas .change-pin {
  top: 26%;
  left: 50%;
}
.studio-canvas .helper-mark {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 3;
  padding: 8px 12px;
  background: rgba(255, 255, 255, .94);
  border-radius: var(--r-pill);
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--studio-accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.studio-canvas .helper-mark::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--studio-accent);
}
.studio-chat {
  background: white;
  display: flex;
  flex-direction: column;
}
.studio-chat-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--s-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--s-ink);
}
.studio-chat-head .inkie-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.studio-chat-head .inkie-pill::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--studio-accent);
}
.studio-chat-head .small {
  font-weight: 600;
  color: var(--s-muted);
  font-family: var(--f-mono);
  font-size: 11px;
}
.studio-chat-thread {
  flex: 1;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--f-sans);
  font-size: 13px;
  overflow: hidden;
}
.bubble {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 12px;
  line-height: 1.45;
}
.bubble.kid {
  align-self: flex-end;
  background: var(--m-ink);
  color: white;
  border-bottom-right-radius: 3px;
}
.bubble.ai {
  align-self: flex-start;
  background: var(--s-panel);
  color: var(--s-ink);
  border: 1px solid var(--s-line);
  border-bottom-left-radius: 3px;
}
.bubble.ai b { color: var(--studio-accent); font-weight: 700; }
.tool-trace {
  align-self: flex-start;
  max-width: 88%;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--studio-accent) 6%, white);
  border: 1px solid color-mix(in srgb, var(--studio-accent) 18%, white);
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--studio-accent-ink);
  line-height: 1.55;
}
.tool-trace .meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: .7;
}
.tool-trace b { color: var(--studio-accent-ink); font-weight: 700; }
.studio-quick-replies {
  padding: 10px 14px 4px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.studio-quick-replies span {
  padding: 5px 10px;
  border: 1px solid var(--s-line);
  border-radius: var(--r-pill);
  font-family: var(--f-sans);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--s-muted);
  background: white;
}
.studio-chat-actions {
  border-top: 1px solid var(--s-line);
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.studio-chat-actions span {
  padding: 11px 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  border: 1px solid var(--s-line);
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--s-ink);
  background: white;
}
.studio-chat-actions span.primary {
  background: var(--ok);
  color: white;
  border-color: var(--ok);
}

/* ---------- AI LITERACY OUTCOMES ---------- */

.literacy-section {
  background: linear-gradient(180deg, #F4F6FB 0%, white 100%);
}
.literacy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 12px;
}
.literacy-grid .literacy-card:nth-child(odd) {
  transform: translateY(28px);
}
@media (max-width: 1180px) {
  .literacy-grid .literacy-card:nth-child(odd) { transform: none; }
}
.literacy-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-radius: var(--r-lg);
  background: white;
  border: 1px solid #D6DCE7;
  box-shadow: 0 10px 28px rgba(30, 58, 110, .06);
}
.literacy-card .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--m-accent) 10%, white);
  color: var(--m-accent-ink);
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.literacy-card h4 {
  margin-top: 14px;
  font-size: 22px;
  line-height: 1.1;
  font-weight: 560;
  letter-spacing: -.005em;
}
.literacy-card p {
  margin-top: 10px;
  color: var(--m-ink-2);
  font-size: 14.5px;
  line-height: 1.5;
}
.literacy-card .moment {
  margin-top: 16px;
  padding: 12px 14px;
  border-left: 3px solid var(--m-accent);
  background: #F8FAFC;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: var(--m-ink);
}
.literacy-card .moment b { font-style: normal; font-weight: 700; color: var(--m-accent); }
.literacy-foot {
  margin-top: 32px;
  padding: 20px 24px;
  border: 1px dashed var(--m-line-strong);
  border-radius: var(--r-lg);
  text-align: center;
  font-family: var(--f-serif);
  font-size: 17px;
  line-height: 1.5;
  color: var(--m-ink-2);
  font-style: italic;
}
.literacy-foot b {
  font-style: normal;
  color: var(--m-ink);
  font-weight: 700;
}

/* ---------- PARENT SURFACES ---------- */

.parent-section {
  background: #FBFAF5;
}
.parent-strip {
  /* The approval email is the emotionally loaded card; give it the wider
     column and let the next three breathe at narrower widths beside it. */
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 18px;
  margin-top: 8px;
}
.parent-strip .parent-frame:first-child .parent-frame-head h4 { font-size: 24px; }
.parent-frame {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--m-line-strong);
  border-radius: var(--r-lg);
  background: white;
  overflow: hidden;
  min-height: 400px;
  box-shadow: 0 14px 30px rgba(20, 20, 19, .06);
}
.parent-frame-head {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--m-line);
  background: #FBFAF5;
}
.parent-frame-head .num {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--m-accent);
}
.parent-frame-head h4 {
  margin-top: 6px;
  font-size: 20px;
  font-weight: 560;
  line-height: 1.08;
  letter-spacing: -.005em;
}
.parent-frame-body {
  flex: 1;
  padding: 14px;
}
.parent-frame-caption {
  padding: 12px 16px 14px;
  background: #FBFAF5;
  border-top: 1px solid var(--m-line);
  color: var(--m-muted);
  font-family: var(--f-sans);
  font-size: 12px;
  line-height: 1.45;
  font-style: italic;
}

.email {
  font-family: var(--f-sans);
  font-size: 12px;
  color: var(--m-ink-2);
  line-height: 1.5;
}
.email-head {
  border-bottom: 1px solid var(--m-line);
  padding-bottom: 10px;
  margin-bottom: 12px;
}
.email-head .from { color: var(--m-muted); font-size: 11.5px; }
.email-head .from b { color: var(--m-ink); font-weight: 700; }
.email-head .subject {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--m-ink);
}
.email-body p { margin: 0 0 8px; }
.email-body .approve-row {
  margin-top: 14px;
  display: flex;
  gap: 6px;
}
.email-body .approve-row span {
  padding: 7px 14px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 700;
}
.email-body .approve-row .approve { background: var(--ok); color: white; }
.email-body .approve-row .deny { background: white; color: var(--err); border: 1px solid var(--err); }
.email-expires {
  margin-top: 10px;
  color: var(--m-muted);
  font-family: var(--f-mono);
  font-size: 10px;
}

.dashboard {
  font-family: var(--f-sans);
  font-size: 12px;
}
.dashboard-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  color: var(--m-ink);
  font-weight: 700;
}
.dashboard-title .badge {
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--warn);
  color: white;
  font-size: 10px;
  font-weight: 800;
}
.dashboard-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--m-line);
  background: white;
  margin-bottom: 6px;
}
.dashboard-row.pending {
  border-color: color-mix(in srgb, var(--warn) 40%, var(--m-line));
  background: color-mix(in srgb, var(--warn) 6%, white);
}
.dashboard-row .who {
  font-size: 12px;
  color: var(--m-ink);
  font-weight: 600;
}
.dashboard-row .who small {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--m-muted);
}
.dashboard-row .state {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.dashboard-row.pending .state { color: #7A5400; }
.dashboard-row.live .state { color: #1F6E40; }
.dashboard-row.flagged .state { color: #8A1F10; }

.review-shell {
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--m-line);
  background: #04071a;
  aspect-ratio: 4 / 3;
  position: relative;
}
.review-shell img { width: 100%; height: 100%; object-fit: cover; }
.review-shell .readonly-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, .94);
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--m-ink-2);
  letter-spacing: .03em;
  text-transform: uppercase;
}
.review-shell .actions {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.review-shell .actions span {
  padding: 9px 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 700;
}
.review-shell .actions .approve { background: var(--ok); color: white; }
.review-shell .actions .deny { background: white; color: var(--err); border: 1px solid var(--err); }

.published { font-family: var(--f-sans); font-size: 12px; }
.published .mini-url {
  padding: 9px 12px;
  border-radius: var(--r-pill);
  background: var(--show-card-bg);
  border: 1px solid var(--show-card-line);
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--m-ink-2);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  word-break: break-all;
}
.published .mini-url svg { width: 12px; height: 12px; flex: 0 0 12px; }
.published .mini-url b { color: var(--m-ink); font-weight: 700; }
.published .status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ok) 12%, white);
  color: #1F6E40;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.published .status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ok);
}
.published .small-meta {
  color: var(--m-ink-2);
  line-height: 1.5;
  font-size: 12px;
}
.published .unpublish {
  margin-top: 14px;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  background: white;
  border: 1px solid var(--m-line-strong);
  color: var(--m-ink-2);
  font-size: 11px;
  font-weight: 700;
  display: inline-block;
}

/* ---------- PRIVACY / TRUST CALLOUT ---------- */

.privacy-block {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  margin-top: 56px;
  padding: 32px;
  border: 1px solid var(--m-line);
  border-radius: var(--r-lg);
  background: white;
}
.privacy-block h3 {
  font-size: 26px;
  line-height: 1.12;
  font-weight: 560;
  letter-spacing: -.005em;
}
.privacy-block p {
  margin-top: 12px;
  color: var(--m-ink-2);
  font-size: 16px;
  line-height: 1.5;
}
.privacy-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.privacy-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  font-family: var(--f-sans);
  font-size: 13.5px;
  color: var(--m-ink-2);
  line-height: 1.45;
}
.privacy-list li::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ok) 16%, white);
  color: #1F6E40;
  font-size: 11px;
  font-weight: 900;
  margin-top: 1px;
}
.privacy-list li b { color: var(--m-ink); font-weight: 700; }

/* ---------- PRICING ---------- */

.pricing-section .section-head {
  /* left-aligned: matches the editorial rhythm of every other section head */
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--m-line-strong);
  border-radius: var(--r-lg);
  padding: 36px;
  background: white;
  min-height: 400px;
  transition: transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.price-card.is-featured {
  border-color: var(--m-accent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--m-accent) 5%, white) 0%, white 60%);
  box-shadow: 0 28px 56px color-mix(in srgb, var(--m-accent) 15%, transparent);
}
.price-card:hover { transform: translateY(-3px); }
.price-card .badge {
  position: absolute;
  top: 24px;
  right: 24px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--m-accent);
  color: white;
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.price-card h3 {
  font-size: 28px;
  font-weight: 540;
  letter-spacing: -.005em;
}
.price-card .price {
  margin-top: 24px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--m-ink);
  font-size: 68px;
  line-height: 1;
  letter-spacing: -.018em;
  font-weight: 520;
}
.price-card .price small {
  color: var(--m-muted);
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
}
.price-card .price-tag {
  margin-top: 16px;
  color: var(--m-muted);
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 600;
}
.price-card .pitch {
  margin-top: 22px;
  color: var(--m-ink-2);
  font-size: 18px;
  line-height: 1.42;
}
.price-card ul {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-family: var(--f-sans);
  font-size: 14px;
  color: var(--m-ink-2);
  line-height: 1.45;
}
.price-card li {
  position: relative;
  padding-left: 22px;
}
.price-card li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--m-accent);
}
.price-card .btn { margin-top: 32px; width: 100%; }
.cohort-line {
  margin-top: 26px;
  text-align: center;
  font-family: var(--f-sans);
  font-size: 14px;
  color: var(--m-muted);
}
.cohort-line a {
  color: var(--m-accent);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.cohort-line a:hover { color: var(--m-accent-ink); }

/* ---------- WHAT'S IN THE BOX ---------- */

.box-section { background: #FBFAF5; }
.box-grid {
  /* 2x2 zigzag: each row of cards is offset to the right, breaking the
     monotonous 4-equal feature row into a more editorial cadence. */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 22px;
}
.box-grid > .box-card:nth-child(even) { transform: translateY(28px); }
@media (prefers-reduced-motion: reduce) {
  .box-grid > .box-card:nth-child(even) { transform: none; }
}
.box-card {
  padding: 26px;
  border-radius: var(--r-lg);
  border: 1px solid var(--m-line-strong);
  background: white;
}
.box-card .icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--m-accent) 8%, white);
  color: var(--m-accent);
  font-family: var(--f-mono);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 18px;
}
.box-card h4 {
  font-size: 19px;
  line-height: 1.12;
  font-weight: 560;
  letter-spacing: -.005em;
}
.box-card p {
  margin-top: 9px;
  color: var(--m-ink-2);
  font-size: 14px;
  line-height: 1.45;
}

/* ---------- PROMISE ---------- */

.promise-section {
  /* Block padding only — gutters come from .page. */
  padding-top: 100px;
  padding-bottom: 100px;
  border-top: 1px solid var(--m-line);
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--m-accent) 6%, white) 0%, white 70%);
  position: relative;
}
.promise-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'><circle cx='30' cy='30' r='1' fill='%23C9C2B5' opacity='0.4'/></svg>");
  background-size: 24px 24px;
  opacity: .5;
  pointer-events: none;
}
.promise {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 32px 40px;
  align-items: start;
  text-align: left;
}
.promise > * { grid-column: 2; }
.promise .promise-seal-stamp { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
.promise-seal-stamp {
  margin: 0 auto 28px;
  width: 140px;
  height: 140px;
  border: 2.5px solid var(--m-accent);
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  text-align: center;
  background: white;
  transform: rotate(-4deg);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--m-accent) 22%, transparent);
}
.promise-seal-stamp::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--m-accent);
  border-radius: 50%;
}
.promise-seal-stamp .inner {
  font-family: var(--f-serif);
  font-size: 22px;
  font-weight: 540;
  letter-spacing: -.008em;
  color: var(--m-accent);
  line-height: 1.05;
}
.promise-seal-stamp .ring-top,
.promise-seal-stamp .ring-bot {
  position: absolute;
  left: 0;
  right: 0;
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--m-accent);
}
.promise-seal-stamp .ring-top { top: 18px; }
.promise-seal-stamp .ring-bot { bottom: 18px; }
.promise h2 {
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.04;
  font-weight: 520;
  letter-spacing: -.012em;
}
.promise h2 .keyword { color: var(--m-accent); }
.promise p {
  margin-top: 22px;
  font-family: var(--f-sans);
  font-size: 16px;
  color: var(--m-ink-2);
  line-height: 1.5;
  max-width: 680px;
}

/* ---------- PULL QUOTE ---------- */

.quote-section { padding: 96px 0; border-top: 1px solid var(--m-line); }
.pullquote {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}
.pullquote .mark {
  font-family: var(--f-serif);
  font-size: 88px;
  line-height: 0.5;
  color: var(--m-accent);
  margin-bottom: 24px;
}
.pullquote blockquote {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.22;
  letter-spacing: -.005em;
  color: var(--m-ink);
  margin: 0;
}
.pullquote .keyword { color: var(--m-accent); font-style: normal; }
.pullquote cite {
  display: block;
  margin-top: 28px;
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--m-ink-2);
  font-style: normal;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.pullquote cite span {
  font-weight: 500;
  color: var(--m-muted);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 8px;
}

/* ---------- FAQ ---------- */

.faq-section { background: #FBFAF5; }
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 56px;
  align-items: start;
}
.faq-layout .lead h2 {
  font-size: clamp(32px, 3.6vw, 44px);
  line-height: 1.04;
  font-weight: 520;
  letter-spacing: -.008em;
}
.faq-layout .lead p {
  margin-top: 14px;
  color: var(--m-ink-2);
  font-size: 17px;
  line-height: 1.5;
}
.faq-layout .lead .eyebrow {
  display: inline-block;
  margin-bottom: 14px;
}
.faq-list {
  display: grid;
  gap: 10px;
}
.faq-item {
  background: white;
  border: 1px solid var(--m-line-strong);
  border-radius: var(--r-md);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  font-size: 18px;
  font-weight: 540;
  letter-spacing: -.005em;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--f-sans);
  font-size: 22px;
  font-weight: 500;
  color: var(--m-accent);
  transition: transform var(--d-base) var(--e-out);
}
.faq-item[open] summary::after {
  transform: rotate(45deg);
}
.faq-item .answer {
  padding: 0 22px 20px;
  color: var(--m-ink-2);
  font-size: 16px;
  line-height: 1.55;
  font-family: var(--f-serif);
}
.faq-item .answer p + p { margin-top: 10px; }

/* ---------- MANGA EASTER EGG ---------- */

.easter-section {
  padding: 80px 0;
  background: #0F1424;
  color: #E8E3D2;
  border-top: 1px solid #1B2138;
}
.easter-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 48px;
  align-items: center;
}
.easter-layout h2 {
  font-size: clamp(32px, 3.6vw, 44px);
  line-height: 1.04;
  font-weight: 520;
  letter-spacing: -.008em;
  color: white;
}
.easter-layout h2 .keyword { color: #FFCB44; }
.easter-layout p {
  margin-top: 16px;
  color: #B2AC95;
  font-size: 17px;
  line-height: 1.55;
}
.easter-layout .kbd-row {
  margin-top: 26px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12);
  font-family: var(--f-mono);
  font-size: 13px;
  color: #C9C2A8;
}
.kbd {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .12);
  color: #FFCB44;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 700;
  border-bottom: 2px solid rgba(255, 255, 255, .18);
}
.easter-art {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
}
.easter-art img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.06) saturate(.92);
}
.easter-tag {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 5px 12px;
  background: #FFCB44;
  color: #0F1424;
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 3px;
}

/* ---------- FINAL CTA ---------- */

.final-section {
  /* Block padding only — keep .page horizontal gutters. */
  padding-top: 96px;
  padding-bottom: 112px;
  border-top: 1px solid var(--m-line);
  background: white;
}
.final-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: end;
  max-width: 1080px;
  margin: 0 auto;
}
.final-cta h2 {
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.0;
  letter-spacing: -.012em;
  font-weight: 520;
}
.final-cta p {
  margin-top: 16px;
  max-width: 560px;
  color: var(--m-ink-2);
  font-size: 19px;
  line-height: 1.42;
}
.final-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  min-width: 260px;
}


/* ---------- RESPONSIVE ---------- */

@media (max-width: 1180px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding-top: 56px; padding-bottom: 72px; }
  .reel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }
  .reel-grid #card-achilles,
  .reel-grid #card-icarus,
  .reel-grid #card-orion,
  .reel-grid #card-perseus { grid-column: auto; grid-row: auto; }
  .box-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .box-grid > .box-card:nth-child(even) { transform: none; }
  /* Bento collapses: reset spans so cards stack cleanly */
  .tracks-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }
  .tracks-grid .track-card--game,
  .tracks-grid .track-card--story,
  .tracks-grid .track-card--site,
  .tracks-grid .track-card--movie {
    grid-column: auto;
    grid-row: auto;
  }
  .tracks-grid .track-card--game { grid-column: 1 / -1; }
  .tracks-grid .track-card--game h3 { font-size: 36px; }
  .age-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .age-grid .age-card[data-min="9"],
  .age-grid .age-card[data-min="6"],
  .age-grid .age-card[data-min="12"] {
    grid-column: auto;
    grid-row: auto;
  }
  .literacy-grid { grid-template-columns: 1fr; }
  .literacy-grid .literacy-card:nth-child(odd) { transform: none; }
  .counter-layout,
  .privacy-block,
  .easter-layout,
  .faq-layout,
  .final-cta { grid-template-columns: 1fr; }
  .loop-strip,
  .parent-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loop-strip > .loop-frame { transform: none; }
  .loop-strip { margin-bottom: 0; }
  .studio-body { grid-template-columns: 1fr; }
  .studio-rail { display: none; }
  .studio-canvas { min-height: 320px; border-right: 0; border-bottom: 1px solid var(--s-line); }
  .pricing-grid { grid-template-columns: 1fr; }
  .promise {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .promise > * { grid-column: 1; }
  .promise .promise-seal-stamp { grid-column: 1; grid-row: auto; margin-bottom: 8px; }
  footer .page { grid-template-columns: 1fr 1fr; gap: 32px; }
  .trust-strip { grid-template-columns: 1fr 1fr; gap: 24px; }
  .trust-stat { border-left: 0; padding-left: 0; }
  .loop-strip::after { display: none; }
  .age-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  /* Layout collapses for homepage sections. .page, .nav-links, .section,
     .section-tight, footer columns, and base section padding live in
     site-base-v2.css and apply here automatically. */
  .reel-grid,
  .loop-strip,
  .parent-strip,
  .literacy-grid,
  .box-grid,
  .trust-strip { grid-template-columns: 1fr; }
  .tracks-grid { grid-template-columns: 1fr; }
  .tracks-grid .track-card--game { grid-column: auto; }
  .tracks-grid .track-card--game h3 { font-size: 32px; }
  .reel-footer { flex-direction: column; align-items: flex-start; }

  /* Hero on phones: smaller display, smaller body, larger tap targets. */
  .hero { padding-top: 40px; padding-bottom: 56px; }
  .hero h1 { font-size: clamp(34px, 8.5vw, 48px); }
  .hero-copy > p { font-size: 17px; }
  .url-bar { font-size: 11px; padding: 0 10px; }
  .hero-stamps a { width: 44px; height: 44px; font-size: 10px; }
  .hero-artifact .browser { animation: none; }   /* save paint on mobile */
  .show-tab { top: 28px; right: -8px; font-size: 9px; padding: 6px 12px 6px 14px; }

  /* Parent-strip: reset the desktop "featured first card" h4 bump. */
  .parent-strip .parent-frame:first-child .parent-frame-head h4 { font-size: 20px; }

  /* Final CTA: text + actions stack; actions go full-width. */
  .final-cta-actions { min-width: 0; width: 100%; }
  .final-cta-actions .btn { width: 100%; }

  /* Studio mockup: keep canvas + chat readable when stacked. */
  .studio-canvas { min-height: 220px; }
  .studio-chat-thread { padding: 14px; gap: 10px; }
  .bubble { max-width: 96%; }

  /* Promise: stack stamp above headline, reduce stamp size. */
  .promise-seal-stamp { width: 110px; height: 110px; }
  .promise-seal-stamp .inner { font-size: 18px; }
}

@media (max-width: 480px) {
  /* Very narrow phones — extra trim for legibility. */
  .hero { padding-top: 32px; padding-bottom: 48px; gap: 28px; }
  .hero h1 { font-size: clamp(30px, 9.5vw, 40px); }
  .hero-copy > p { font-size: 16px; margin-top: 18px; }
  .hero-cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-cta .btn { width: 100%; }
  .hero-caption { flex-direction: column; align-items: flex-start; gap: 14px; }

  /* Reel + tracks: tighten card padding. */
  .gamecard-head { padding: 14px 14px 12px; }
  .gamecard-art { margin: 12px; }
  .gamecard-body { padding: 0 14px 14px; }
  .track-card { padding: 22px; min-height: 0; }
  .tracks-grid .track-card--game h3 { font-size: 28px; }

  /* Counter + privacy + literacy + age cards: tighten padding. */
  .counter-panel { padding: 24px; min-height: 0; }
  .counter-panel h3 { font-size: 26px; }
  .age-card { padding: 22px; min-height: 0; }
  .age-grid .age-card[data-min="9"] .range { font-size: 60px; }
  .age-grid .age-card[data-min="9"] h4 { font-size: 22px; }
  .literacy-card { padding: 20px; }
  .privacy-block { padding: 22px; gap: 24px; }

  /* Loop frames: tighter. */
  .loop-frame { min-height: 0; }
  .loop-frame-head { padding: 14px 14px 12px; }
  .loop-frame-head h4 { font-size: 20px; }
  .loop-frame-body { padding: 14px; }

  /* Pricing: pad less; price hero shrinks. */
  .price-card { padding: 28px; min-height: 0; }
  .price-card .price { font-size: 52px; }
  .price-card .pitch { font-size: 16px; }

  /* Box (what's in the box): single-col, no offset. */
  .box-grid { grid-template-columns: 1fr; gap: 14px; }
  .box-grid > .box-card:nth-child(even) { transform: none; }
  .box-card { padding: 20px; }

  /* Promise + final CTA: tighten + stack. */
  .promise { gap: 20px 0; }
  .promise-section { padding-top: 64px; padding-bottom: 64px; }
  .final-section { padding-top: 64px; padding-bottom: 80px; }
  .final-cta h2 { font-size: clamp(28px, 8vw, 36px); }
  .final-cta p { font-size: 16px; }

  /* FAQ: tighten summary. */
  .faq-item summary { padding: 14px 16px; font-size: 16px; }
  .faq-item .answer { padding: 0 16px 16px; font-size: 15px; }

  /* Easter section: tighter padding + smaller h2. */
  .easter-section { padding: 56px 0; }
  .easter-layout h2 { font-size: clamp(26px, 7.5vw, 34px); }
  .easter-layout p { font-size: 16px; }

  /* Trust strip: collapse to centered-stat cards. */
  .trust-section { padding: 28px 0; }
  .trust-quote { font-size: 16px; }
  .trust-stat b { font-size: 28px; }
}

/* ============================================================
   MOTION PRIMITIVES
   Subtle universal motion — scroll-reveal, hero stagger, the
   AI-mark stamp-in, the change-pin pulse, card tilt, cursor
   spotlight, page grain. Top-tier finish is the sum of small
   moves at the right amplitude. None of this overrides the
   existing design language; it lifts what's there.
   ============================================================ */


/* hero entrance choreography — first impression motion */
.hero-copy .eyebrow,
.hero-copy h1 .line,
.hero-copy > p,
.hero-cta,
.hero-wink,
.hero-meta {
  opacity: 0;
  transform: translateY(20px);
  animation: hero-rise 820ms var(--e-out) forwards;
}
.hero-copy .eyebrow                 { animation-delay: 60ms; }
.hero-copy h1 .line:nth-child(1)    { animation-delay: 180ms; }
.hero-copy h1 .line:nth-child(2)    { animation-delay: 320ms; }
.hero-copy > p                      { animation-delay: 520ms; }
.hero-cta                           { animation-delay: 640ms; }
.hero-wink                          { animation-delay: 740ms; }
.hero-meta                          { animation-delay: 820ms; }
@keyframes hero-rise {
  to { opacity: 1; transform: translateY(0); }
}

/* the AI mark gets its own stamp-in choreography last */
.hero-copy .ai-mark {
  opacity: 0;
  animation: ai-stamp 700ms var(--e-snap) 540ms forwards;
}
@keyframes ai-stamp {
  0%   { opacity: 0; transform: scale(.78) rotate(-3deg); }
  55%  { opacity: 1; transform: scale(1.08) rotate(1.2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.hero-copy .ai-mark::before {
  transform-origin: center;
  animation: wash-in 480ms var(--e-out) 900ms both;
}
@keyframes wash-in {
  from { opacity: 0; transform: scaleX(.4) rotate(-2deg); }
  to   { opacity: 1; transform: scaleX(1) rotate(-1.4deg); }
}

/* the hero browser frame floats gently on a long cycle */
.hero-artifact .browser {
  animation: float 9s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: rotate(-.5deg) translateY(0); }
  50%      { transform: rotate(-.5deg) translateY(-8px); }
}
.hero-artifact .browser:hover { animation-play-state: paused; }


/* live ticker / marquee for the live indicator */
.ticker {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  overflow: hidden;
  max-width: 100%;
}
.ticker-track {
  display: inline-flex;
  gap: 18px;
  white-space: nowrap;
  animation: ticker-scroll 22s linear infinite;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* loop-strip auto-cycle highlight */
.loop-frame {
  transition: transform 360ms var(--e-out), box-shadow 360ms var(--e-out), border-color 360ms var(--e-out);
}
.loop-frame.is-cycle {
  border-color: var(--studio-accent);
  box-shadow:
    0 26px 50px rgba(20, 20, 19, .12),
    inset 0 1px 0 rgba(255, 255, 255, .85);
}
.loop-frame.is-cycle .loop-step-num {
  color: var(--studio-accent-ink);
  font-weight: 800;
}

/* studio demo cursor */
.demo-cursor {
  position: absolute;
  top: 80%;
  left: 8%;
  width: 22px;
  height: 22px;
  z-index: 20;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
  transition: transform 1.4s var(--e-out), opacity 400ms var(--e-out);
  opacity: 0;
}
.demo-cursor.live { opacity: 1; }
.demo-cursor.at-keep { transform: translate(280px, -110px); }
.demo-cursor.at-keep-pressed { transform: translate(280px, -108px) scale(.92); }

/* pulse on the keep button when cursor lands */
.studio-chat-actions span.primary.armed {
  animation: keep-pulse 1.2s var(--e-out);
}
@keyframes keep-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 50%, transparent); }
  40%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--ok) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 0%, transparent); }
}

/* typewriter target — JS injects letters; keep stable layout via min-height */
.typewriter {
  min-height: 1.4em;
}
.typewriter .caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -.12em;
  background: var(--studio-accent);
  animation: caret 1s steps(2) infinite;
}
@keyframes caret {
  50% { opacity: 0; }
}

/* age slider — interactive moment */
.age-slider {
  margin-top: 8px;
  padding: 28px 28px 22px;
  border: 1px solid var(--m-line-strong);
  border-radius: var(--r-lg);
  background: white;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 18px 28px;
  align-items: center;
  box-shadow: 0 10px 32px rgba(20, 20, 19, .06);
}
.slider-display {
  display: flex;
  align-items: baseline;
  gap: 10px;
  grid-row: 1 / span 2;
}
.slider-display .big {
  font-family: var(--f-serif);
  font-size: 72px;
  line-height: 1;
  letter-spacing: -.025em;
  font-weight: 540;
  color: var(--m-ink);
  font-variant-numeric: tabular-nums;
  min-width: 1.8em;
  text-align: center;
}
.slider-display .sm {
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--m-muted);
}
.slider-control {
  position: relative;
}
.slider-control input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--m-accent) 0%, var(--m-accent) var(--p, 50%), var(--m-line) var(--p, 50%));
  outline: none;
  cursor: pointer;
}
.slider-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--m-accent);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--m-accent) 35%, transparent);
  cursor: grab;
  transition: transform 160ms var(--e-out);
}
.slider-control input[type="range"]::-moz-range-thumb {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--m-accent);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--m-accent) 35%, transparent);
  cursor: grab;
}
.slider-control input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.1); cursor: grabbing; }
.slider-marks {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--m-muted);
}
.slider-hint {
  grid-column: 1 / -1;
  padding-top: 14px;
  border-top: 1px solid var(--m-line);
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
  color: var(--m-ink-2);
}
.slider-hint b {
  font-style: normal;
  color: var(--m-ink);
  font-weight: 700;
}

/* age card highlight when slider is in range */
.age-card.is-active {
  border-color: var(--m-accent);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--m-accent) 18%, transparent);
  transform: translateY(-3px);
  transition: transform 360ms var(--e-out), border-color 360ms var(--e-out), box-shadow 360ms var(--e-out);
}
.age-card { transition: transform 360ms var(--e-out), border-color 360ms var(--e-out), box-shadow 360ms var(--e-out); }

/* box-section: real SVG icons stage */
.box-card .icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--m-accent) 10%, white), color-mix(in srgb, var(--m-accent) 18%, white));
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border: 1px solid color-mix(in srgb, var(--m-accent) 18%, white);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 6px 14px color-mix(in srgb, var(--m-accent) 14%, transparent);
}
.box-card .icon svg {
  width: 28px;
  height: 28px;
  color: var(--m-accent);
}

/* ---------- JOURNAL ATLAS RAIL ---------- */

.journal-rail-section {
  background: #FBFAF5;
  border-top: 1px solid var(--m-line);
  border-bottom: 1px solid var(--m-line);
}
.home-journal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 34px;
}
.home-journal-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: white;
  border: 1px solid var(--m-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: var(--m-ink);
  text-decoration: none;
  transition: transform var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.home-journal-card:hover,
.home-journal-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--m-accent);
  box-shadow: 0 18px 42px rgba(20, 20, 19, .10);
}
.home-journal-media {
  position: relative;
  aspect-ratio: 5 / 3;
  overflow: hidden;
  background: #102038;
  border-bottom: 1px solid var(--m-line);
}
.home-journal-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms var(--e-out);
}
.home-journal-card:hover .home-journal-media img,
.home-journal-card:focus-visible .home-journal-media img { transform: scale(1.035); }
.home-journal-signal {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  width: max-content;
  max-width: calc(100% - 24px);
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .92);
  color: var(--m-ink-2);
  font-family: var(--f-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 8px 22px rgba(20, 20, 19, .14);
}
.home-journal-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 18px 18px 20px;
}
.home-journal-body span {
  font-family: var(--f-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--m-accent);
}
.home-journal-body h3 {
  font-family: var(--f-serif);
  font-size: 21px;
  line-height: 1.12;
  letter-spacing: -.005em;
  color: var(--m-ink);
}
.home-journal-body p {
  font-family: var(--f-serif);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--m-ink-2);
}
.journal-rail-link {
  min-height: 44px;
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  color: var(--m-accent);
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

@media (max-width: 1080px) {
  .home-journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .home-journal-grid { grid-template-columns: 1fr; }
}

/* hero stamps subtle entrance */
.hero-stamps a {
  animation: stamp-in 600ms var(--e-out) backwards;
}
.hero-stamps a:nth-child(1) { animation-delay: 920ms; }
.hero-stamps a:nth-child(2) { animation-delay: 1000ms; }
.hero-stamps a:nth-child(3) { animation-delay: 1080ms; }
.hero-stamps a:nth-child(4) { animation-delay: 1160ms; }
@keyframes stamp-in {
  from { opacity: 0; transform: scale(.7) rotate(-8deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}

/* the show-tab arrives last */
.show-tab {
  animation: tab-in 540ms var(--e-out) 1100ms backwards;
}
@keyframes tab-in {
  from { opacity: 0; transform: rotate(8deg) translateX(20px); }
  to   { opacity: 1; transform: rotate(2deg) translateX(0); }
}

/* responsive slider */
@media (max-width: 720px) {
  .age-slider {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 22px;
  }
  .slider-display .big { font-size: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Blanket cap for any page-specific keyframe that escaped its own guard
     (live-pulse, pin-pulse, float, caret, keep-pulse, stamp-in, tab-in).
     The shared .reveal / .grain rules live in site-base-v2.css. */
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
  }
  .hero-copy h1 .line,
  .hero-copy > p,
  .hero-cta,
  .hero-wink,
  .hero-stamps a,
  .show-tab,
  .hero-copy .ai-mark { opacity: 1 !important; transform: none !important; animation: none !important; }
}