/* ===================================================================
   Public pages (2026-10-23): landing, FAQ, privacy, terms, sponsorship,
   and the guides' header and footer, in the dashboard's toy look. Uses
   v2.css's tokens and parts (body.v2, .v2-brand, .v2-pill, .v2-btn,
   .v2-chip) plus the pieces below, all scoped to body.v2-public (the
   guide and application layouts load every stylesheet).
   layouts/public, pages/_public_header, pages/_public_footer.
   =================================================================== */

html:has(body.v2-public) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html:has(body.v2-public) { scroll-behavior: auto; }
}
body.v2-public { min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; }
body.v2-public > main { flex: 1 0 auto; }
.v2-public h1, .v2-public h2, .v2-public h3 { text-wrap: balance; }
.v2-public .container,
.v2-public .pub-wrap { box-sizing: border-box; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* --- Header: brand, then pills; under 860px the pills fold into a menu --- */
.v2-public .pub-header { position: sticky; top: 0; z-index: 100; background: var(--v2-cream); border-bottom: 2px solid var(--v2-line); }
.v2-public .pub-header-inner { position: relative; display: flex; align-items: center; gap: 12px; min-height: 72px; }
.v2-public .pub-header .v2-brand { font-size: 24px; }
.v2-public .pub-nav { display: flex; align-items: center; gap: 8px; }
.v2-public .pub-lang svg { width: 18px; height: 12px; border-radius: 2px; }
.v2-public .pub-menu-btn { display: none; }
.v2-public .pub-menu-btn .pub-menu-open { display: inline-flex; }
.v2-public .pub-menu-btn .pub-menu-close { display: none; }
@media (max-width: 860px) {
  .v2-public .pub-menu-btn { display: inline-flex; padding: 0 12px; }
  .v2-public .pub-nav {
    display: none; position: absolute; top: calc(100% + 8px); left: 12px; right: 12px;
    flex-direction: column; align-items: stretch; gap: 8px; padding: 12px;
    background: #fff; border: 2px solid var(--v2-line); border-radius: 20px; box-shadow: 0 4px 0 var(--v2-line);
  }
  .v2-public .pub-header-inner.is-open .pub-nav { display: flex; }
  .v2-public .pub-header-inner.is-open .pub-menu-btn .pub-menu-open { display: none; }
  .v2-public .pub-header-inner.is-open .pub-menu-btn .pub-menu-close { display: inline-flex; }
  .v2-public .pub-nav .v2-pill, .v2-public .pub-nav .v2-btn { justify-content: center; }
}
@media (max-width: 480px) {
  .v2-public .pub-header .v2-brand { font-size: 21px; gap: 8px; }
  .v2-public .pub-header .v2-brand img { width: 34px; height: 34px; }
  .v2-public .container, .v2-public .pub-wrap { padding: 0 16px; }
}

/* --- Footer: the warm "crust" strip --- */
.v2-public .pub-footer { margin-top: auto; padding: 26px 0 30px; background: var(--v2-gold-bg); border-top: 2px solid var(--v2-gold-line); color: var(--v2-gold-ink); text-align: center; font-size: 14px; }
.v2-public .pub-footer-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.v2-public .pub-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 10px 0 0; }
body.v2-public .pub-footer a { color: var(--v2-gold-ink); font-weight: 700; }

/* --- Landing hero: the berry-dot cream backdrop, tinted per open tab --- */
body.v2-public > main.pub-landing { display: flex; flex-direction: column; }
/* The hero takes the room above the footer, content centered, so a tall
   screen shows more hero instead of an empty band; its container keeps
   its full width (a flex item centered with margin: auto would shrink). */
.v2-public .pub-landing > .hero { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; }
.v2-public .hero {
  text-align: center;
  padding: 48px 0 64px;
  background-image:
    radial-gradient(ellipse 16px 12px, rgba(209, 165, 123, .12) 50%, transparent 50%),
    radial-gradient(ellipse 10px 14px, rgba(209, 165, 123, .08) 50%, transparent 50%);
  background-color: var(--v2-cream);
  background-size: 90px 80px, 120px 100px;
  background-position: 0 0, 45px 35px;
  transition: background-color .4s ease;
}
.v2-public .hero:has(#hero-tab-1:checked) { background-color: #f2f0f6; }
.v2-public .hero:has(#hero-tab-2:checked) { background-color: #f6eff2; }
.v2-public .hero:has(#hero-tab-3:checked) { background-color: #fcf2e6; }
.v2-public .hero:has(#hero-tab-4:checked) { background-color: #f1f4e8; }
.v2-public .hero:has(#hero-tab-5:checked) { background-color: #f9ecf1; }

/* Who are you? Three pills that swap the headline's subtitle (CSS-only). */
.v2-public .persona-switch { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 22px; max-width: 720px; scroll-margin-top: 90px; }
.v2-public .persona-switch input { position: absolute; opacity: 0; pointer-events: none; }
.v2-public .persona-pill {
  display: inline-flex; align-items: center; height: 42px; padding: 0 18px; box-sizing: border-box;
  border-radius: 999px; background: #fff; border: 2px solid var(--v2-line); box-shadow: 0 3px 0 var(--v2-line);
  color: var(--v2-ink); font-weight: 700; font-size: 15px; white-space: nowrap; cursor: pointer; user-select: none;
  transition: transform .08s ease, box-shadow .08s ease;
}
.v2-public .persona-pill:hover { transform: translateY(-2px); }
.v2-public .persona-pill:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--v2-line); }
.v2-public #persona-streamer:focus-visible ~ label[for="persona-streamer"],
.v2-public #persona-mod:focus-visible ~ label[for="persona-mod"],
.v2-public #persona-sponsor:focus-visible ~ label[for="persona-sponsor"] { outline: 3px solid var(--v2-blue); outline-offset: 3px; }
.v2-public #persona-streamer:checked ~ label[for="persona-streamer"],
.v2-public #persona-mod:checked ~ label[for="persona-mod"],
.v2-public #persona-sponsor:checked ~ label[for="persona-sponsor"] {
  background: var(--v2-blue); border-color: var(--v2-blue); box-shadow: 0 3px 0 var(--v2-blue-deep); color: #fff;
}

.v2-public .hero-question {
  max-width: 820px; margin: 0 auto 14px;
  font-family: var(--v2-display); font-weight: 800; font-size: clamp(34px, 5vw, 56px); line-height: 1.2; color: var(--v2-ink);
}
.v2-public .hero-accent { color: var(--v2-blue); }
.v2-public .hero-h1--sponsor { display: none; }
.v2-public .hero:has(#persona-sponsor:checked) .hero-h1--default { display: none; }
.v2-public .hero:has(#persona-sponsor:checked) .hero-h1--sponsor { display: inline; }
/* All three subtitles share one spot; min-height keeps the hero still
   when they differ in length. */
.v2-public .hero-subtitle-stack { max-width: 680px; margin: 0 auto 24px; min-height: 4.5em; }
.v2-public .hero-subtitle { display: none; margin: 0; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.5; font-weight: 500; color: var(--v2-muted); }
.v2-public .hero:has(#persona-streamer:checked) .hero-subtitle--streamer,
.v2-public .hero:has(#persona-mod:checked) .hero-subtitle--mod,
.v2-public .hero:has(#persona-sponsor:checked) .hero-subtitle--sponsor { display: block; }
body.v2-public .hero-sponsor-link { color: var(--v2-pink-ink); font-weight: 700; white-space: nowrap; }
.v2-public .hero-cta { display: flex; justify-content: center; margin: 0 0 40px; }

/* The five product tabs: a stage that plays one video, and a column of
   pills. Hidden radios drive which figure shows (:checked); the stage and
   the open pill take that tab's color through --active-*. */
.v2-public .hero-tabs {
  display: grid; grid-template-columns: 1fr 230px; gap: 14px; align-items: stretch;
  max-width: 1100px; margin: 0 auto; scroll-margin-top: 90px;
  --active-tint: #fff; --active-accent: var(--v2-blue); --active-deep: var(--v2-blue-deep); --active-text: var(--v2-blue-ink);
}
.v2-public .hero-tabs:has(#hero-tab-1:checked) { --active-tint: var(--v2-blue-bg); --active-accent: var(--v2-blue); --active-deep: var(--v2-blue-deep); --active-text: var(--v2-blue-ink); }
.v2-public .hero-tabs:has(#hero-tab-2:checked) { --active-tint: var(--v2-purple-bg); --active-accent: var(--v2-purple); --active-deep: var(--v2-purple-deep); --active-text: var(--v2-purple-ink); }
.v2-public .hero-tabs:has(#hero-tab-3:checked) { --active-tint: var(--v2-gold-bg); --active-accent: var(--v2-gold); --active-deep: var(--v2-gold-deep); --active-text: var(--v2-gold-ink); }
.v2-public .hero-tabs:has(#hero-tab-4:checked) { --active-tint: var(--v2-green-bg); --active-accent: var(--v2-green); --active-deep: var(--v2-green-deep); --active-text: var(--v2-green-ink); }
.v2-public .hero-tabs:has(#hero-tab-5:checked) { --active-tint: var(--v2-pink-bg); --active-accent: var(--v2-pink); --active-deep: var(--v2-pink-deep); --active-text: var(--v2-pink-ink); }
.v2-public .hero-tabs > input { position: absolute; opacity: 0; pointer-events: none; }

.v2-public .hero-tabs-stage {
  position: relative; height: 640px; overflow: hidden; box-sizing: border-box;
  background: var(--active-tint); border: 2px solid var(--v2-line); border-radius: 24px; box-shadow: 0 4px 0 var(--v2-line);
  transition: background .25s ease;
}
.v2-public .hero-tabs-stage figure {
  position: absolute; inset: 0; margin: 0; padding: 14px; display: flex; flex-direction: column;
  opacity: 0; transform: translateY(16px); pointer-events: none; scroll-margin-top: 90px;
  transition: opacity .3s ease, transform .3s ease;
}
.v2-public #hero-tab-1:checked ~ .hero-tabs-stage #hero-pic-1,
.v2-public #hero-tab-2:checked ~ .hero-tabs-stage #hero-pic-2,
.v2-public #hero-tab-3:checked ~ .hero-tabs-stage #hero-pic-3,
.v2-public #hero-tab-4:checked ~ .hero-tabs-stage #hero-pic-4,
.v2-public #hero-tab-5:checked ~ .hero-tabs-stage #hero-pic-5 { opacity: 1; transform: none; pointer-events: auto; }
/* The video fills what the caption and progress bar leave; contain keeps
   its aspect, letterboxed on the neutral backdrop. */
.v2-public .hero-tabs-stage figure :is(img, video) {
  flex: 1 1 0; width: 100%; max-width: 100%; height: 100%; min-height: 0; margin: 0 0 12px; display: block; box-sizing: border-box;
  object-fit: contain; object-position: center; background: #e8ecf1; border: 2px solid var(--v2-line); border-radius: 16px;
}
.v2-public .hero-pic-progress { flex: 0 0 auto; width: 100%; height: 6px; margin: 0 0 12px; overflow: hidden; border-radius: 999px; background: rgba(58, 37, 24, .10); pointer-events: none; }
.v2-public .hero-pic-progress-bar { width: 0%; height: 100%; border-radius: 999px; background: var(--active-accent); transition: width .1s linear; }
.v2-public .hero-tabs-stage figcaption {
  flex: 0 0 auto; height: 140px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box;
  margin: 0; padding: 14px 22px; text-align: left;
  background: #fff; border: 2px solid var(--v2-line); border-radius: 16px;
  color: var(--v2-ink); font-size: 15.5px; line-height: 1.55; font-weight: 500;
}
body.v2-public .hero-pic-link {
  align-self: flex-start; margin-top: 6px; padding-bottom: 1px;
  color: var(--active-text); font-size: 14px; font-weight: 700; text-decoration: none; border-bottom: 2px solid currentColor;
}
body.v2-public .hero-pic-link:hover { opacity: .75; }
.v2-public .hero-pic-fs-btn {
  position: absolute; top: 26px; right: 26px; z-index: 2; width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(58, 37, 24, .62); color: #fff; border: none; border-radius: 12px; cursor: pointer;
  opacity: 0; transition: opacity .2s ease, background .2s ease;
}
.v2-public .hero-tabs-stage figure:hover .hero-pic-fs-btn,
.v2-public .hero-pic-fs-btn:focus-visible { opacity: 1; }
.v2-public .hero-pic-fs-btn:hover { background: rgba(58, 37, 24, .82); }

.v2-public .hero-tabs-labels { display: flex; flex-direction: column; gap: 10px; }
.v2-public .hero-tab {
  flex: 1; display: flex; align-items: center; gap: 10px; padding: 12px 16px; box-sizing: border-box;
  background: #fff; border: 2px solid var(--v2-line); border-radius: 18px; box-shadow: 0 3px 0 var(--v2-line);
  color: var(--v2-ink); font-family: var(--v2-display); font-weight: 800; font-size: 16px; line-height: 1.2; text-align: left;
  cursor: pointer; user-select: none; transition: transform .08s ease, box-shadow .08s ease, background .15s ease;
}
.v2-public .hero-tab:hover { transform: translateY(-2px); }
.v2-public .hero-tab > svg { flex-shrink: 0; width: 20px; height: 20px; }
.v2-public .hero-tab--blue > svg { color: var(--v2-blue); }
.v2-public .hero-tab--purple > svg { color: var(--v2-purple); }
.v2-public .hero-tab--gold > svg { color: var(--v2-gold); }
.v2-public .hero-tab--green > svg { color: var(--v2-green); }
.v2-public .hero-tab--pink > svg { color: var(--v2-pink); }
.v2-public #hero-tab-1:checked ~ .hero-tabs-labels label[for="hero-tab-1"],
.v2-public #hero-tab-2:checked ~ .hero-tabs-labels label[for="hero-tab-2"],
.v2-public #hero-tab-3:checked ~ .hero-tabs-labels label[for="hero-tab-3"],
.v2-public #hero-tab-4:checked ~ .hero-tabs-labels label[for="hero-tab-4"],
.v2-public #hero-tab-5:checked ~ .hero-tabs-labels label[for="hero-tab-5"] {
  background: var(--active-accent); border-color: var(--active-accent); box-shadow: 0 3px 0 var(--active-deep); color: #fff;
}
.v2-public #hero-tab-1:checked ~ .hero-tabs-labels label[for="hero-tab-1"] > svg,
.v2-public #hero-tab-2:checked ~ .hero-tabs-labels label[for="hero-tab-2"] > svg,
.v2-public #hero-tab-3:checked ~ .hero-tabs-labels label[for="hero-tab-3"] > svg,
.v2-public #hero-tab-4:checked ~ .hero-tabs-labels label[for="hero-tab-4"] > svg,
.v2-public #hero-tab-5:checked ~ .hero-tabs-labels label[for="hero-tab-5"] > svg { color: #fff; }

/* Free during the beta: a card under the tabs with the second sign-up. */
.v2-public .hero-beta {
  max-width: 760px; margin: 48px auto 0; padding: 28px 28px 30px; box-sizing: border-box;
  background: #fff; border: 2px solid var(--v2-line); border-radius: 24px; box-shadow: 0 4px 0 var(--v2-line);
}
.v2-public .hero-beta h2 { margin: 0 0 10px; font-family: var(--v2-display); font-weight: 800; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--v2-ink); }
.v2-public .hero-beta p { max-width: 620px; margin: 0 auto 20px; font-size: 17px; line-height: 1.55; color: var(--v2-muted); }

@media (max-width: 1024px) {
  .v2-public .hero-tabs-stage { height: 560px; }
  /* Narrower captions wrap to more lines: let the card grow (the video
     takes what's left) instead of cutting the text off. */
  .v2-public .hero-tabs-stage figcaption { height: auto; min-height: 140px; }
}
/* Phones: the pills stay on the right as an icon column, so the stage
   keeps most of the width. The open figure joins the flow so the stage
   grows to fit it (a long caption no longer squeezes the video away),
   and the video keeps its own proportions. */
@media (max-width: 800px) {
  .v2-public .hero-tabs { grid-template-columns: 1fr 60px; gap: 10px; }
  .v2-public .hero-tabs-stage { height: auto; }
  .v2-public #hero-tab-1:checked ~ .hero-tabs-stage #hero-pic-1,
  .v2-public #hero-tab-2:checked ~ .hero-tabs-stage #hero-pic-2,
  .v2-public #hero-tab-3:checked ~ .hero-tabs-stage #hero-pic-3,
  .v2-public #hero-tab-4:checked ~ .hero-tabs-stage #hero-pic-4,
  .v2-public #hero-tab-5:checked ~ .hero-tabs-stage #hero-pic-5 { position: relative; }
  .v2-public .hero-tabs-stage figure :is(img, video) { flex: none; height: auto; }
  .v2-public .hero-tab { justify-content: center; padding: 12px 6px; }
  .v2-public .hero-tab .hero-tab-label { display: none; }
  .v2-public .hero-tabs-stage figcaption { height: auto; min-height: 140px; padding: 12px 16px; }
}
@media (max-width: 600px) {
  .v2-public .hero { padding: 32px 0 44px; }
  .v2-public .hero-cta { margin-bottom: 28px; }
  .v2-public .hero-cta .v2-btn { width: 100%; max-width: 360px; }
  .v2-public .hero-beta { margin-top: 32px; padding: 22px 18px 24px; }
  .v2-public .hero-beta .v2-btn { width: 100%; }
}

/* --- Zoom modal (landing videos; screenshots on sponsorship and apps) --- */
.v2-public .modal-overlay { display: none; position: fixed; inset: 0; z-index: 200; justify-content: center; align-items: center; background: rgba(58, 37, 24, .8); cursor: zoom-out; }
.v2-public .modal-overlay.open { display: flex; }
.v2-public .modal-overlay img { max-width: 92vw; max-height: 92vh; width: auto; height: auto; border-radius: 16px; border: 2px solid #fff; }
.v2-public .modal-close { position: absolute; top: 18px; right: 24px; border: none; background: none; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; opacity: .8; }
.v2-public .modal-close:hover { opacity: 1; }

/* --- FAQ: one card per question, its number in a rotating pie color --- */
.v2-public .faq-content { padding: 48px 0 80px; }
.v2-public .faq-content > .container { max-width: 860px; }
.v2-public .faq-content h1 { margin: 0 0 8px; font-family: var(--v2-display); font-weight: 800; font-size: clamp(32px, 4vw, 44px); line-height: 1.1; }
.v2-public .faq-subtitle { margin: 0 0 30px; font-size: 18px; font-weight: 500; color: var(--v2-muted); }
.v2-public .faq-item { margin: 0 0 14px; background: #fff; border: 2px solid var(--v2-line); border-radius: 20px; box-shadow: 0 4px 0 var(--v2-line); scroll-margin-top: 96px; }
.v2-public .faq-item:target { border-color: var(--v2-blue); box-shadow: 0 4px 0 var(--v2-blue-deep); }
.v2-public .faq-item summary { display: flex; align-items: center; gap: 14px; padding: 16px 20px; list-style: none; cursor: pointer; user-select: none; font-weight: 700; font-size: 17px; line-height: 1.4; }
.v2-public .faq-item summary::-webkit-details-marker { display: none; }
.v2-public .faq-item summary::after {
  content: "+"; flex-shrink: 0; margin-left: auto; width: 32px; height: 32px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--v2-cream); border: 2px solid var(--v2-line); border-radius: 999px;
  color: var(--v2-muted); font-weight: 800; font-size: 18px; line-height: 1;
}
.v2-public .faq-item[open] summary::after { content: "\2212"; }
.v2-public .faq-number {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--v2-blue); color: #fff; font-family: var(--v2-display); font-weight: 800; font-size: 15px;
}
.v2-public .faq-item:nth-of-type(5n+2) .faq-number { background: var(--v2-purple); }
.v2-public .faq-item:nth-of-type(5n+3) .faq-number { background: var(--v2-pink); }
.v2-public .faq-item:nth-of-type(5n+4) .faq-number { background: var(--v2-gold); }
.v2-public .faq-item:nth-of-type(5n) .faq-number { background: var(--v2-green); }
.v2-public .faq-answer { padding: 0 22px 20px 70px; font-size: 16px; line-height: 1.7; color: var(--v2-ink); }
.v2-public .faq-answer p { margin: 0 0 12px; }
.v2-public .faq-answer p:last-child { margin: 0; }
.v2-public .faq-answer ol, .v2-public .faq-answer ul { margin: 10px 0 14px; padding-left: 22px; }
.v2-public .faq-answer li { margin-bottom: 6px; }
@media (max-width: 600px) {
  .v2-public .faq-content { padding: 32px 0 56px; }
  .v2-public .faq-item summary { padding: 14px 16px; gap: 12px; font-size: 16px; }
  .v2-public .faq-answer { padding: 0 16px 18px; }
}

/* --- Privacy and terms: the text in one white card --- */
.v2-public :is(.privacy-content, .terms-content) { padding: 48px 0 80px; }
.v2-public :is(.privacy-content, .terms-content) > .container {
  max-width: 860px; width: calc(100% - 32px); padding: 36px 40px;
  background: #fff; border: 2px solid var(--v2-line); border-radius: 24px; box-shadow: 0 4px 0 var(--v2-line);
}
.v2-public :is(.privacy-content, .terms-content) h1 { margin: 0 0 6px; font-family: var(--v2-display); font-weight: 800; font-size: clamp(24px, 4vw + 12px, 40px); line-height: 1.1; }
.v2-public .last-updated { margin: 0 0 24px; color: var(--v2-muted); font-size: 14px; font-weight: 600; }
.v2-public :is(.privacy-content, .terms-content) h2 { margin: 28px 0 10px; font-family: var(--v2-display); font-weight: 800; font-size: 22px; line-height: 1.2; }
.v2-public :is(.privacy-content, .terms-content) p { margin: 0 0 12px; font-size: 16px; line-height: 1.7; }
.v2-public :is(.privacy-content, .terms-content) ul { margin: 0 0 14px; padding-left: 22px; font-size: 16px; line-height: 1.7; }
.v2-public :is(.privacy-content, .terms-content) li { margin-bottom: 4px; }
@media (max-width: 600px) {
  .v2-public :is(.privacy-content, .terms-content) { padding: 24px 0 48px; }
  .v2-public :is(.privacy-content, .terms-content) > .container { padding: 24px 20px; }
}

/* --- Sponsorship pitch: flat bands, steps as cards, toy CTAs --- */
.v2-public .pitch-page .container { max-width: 1020px; }
.v2-public .pitch-hero { padding: 56px 0 48px; text-align: center; background: var(--v2-cream); }
.v2-public .pitch-eyebrow { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--v2-blue-bg); color: var(--v2-blue-ink); font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.v2-public .pitch-hero h1 { max-width: 18ch; margin: 18px auto 14px; font-family: var(--v2-display); font-weight: 800; font-size: clamp(34px, 6vw, 56px); line-height: 1.1; color: var(--v2-ink); }
.v2-public .pitch-hero .sub { max-width: 62ch; margin: 0 auto; font-size: 18px; line-height: 1.6; font-weight: 500; color: var(--v2-muted); }
.v2-public .pitch-hero-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.v2-public .pitch-hero-nav a { min-height: 46px; height: auto; padding: 8px 20px; white-space: normal; }
.v2-public .pitch-hero-nav .dot { display: inline-block; flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; }
.v2-public .pitch-section { padding: 48px 0 40px; border-top: 2px solid var(--v2-line); }
.v2-public .pitch-section.on-white { background: #fff; }
.v2-public .pitch-section.on-pink { background: var(--v2-pink-bg); border-top-color: var(--v2-pink-line); }
.v2-public .pitch-section.on-cream { background: var(--v2-cream); }
.v2-public .sec-chip { margin-bottom: 12px; text-transform: uppercase; letter-spacing: .06em; }
.v2-public .sec-chip.streamer { background: var(--v2-blue-bg); color: var(--v2-blue-ink); }
.v2-public .sec-chip.sponsor { background: #fff; color: var(--v2-pink-ink); }
.v2-public .pitch-section h2 { margin: 0; font-family: var(--v2-display); font-weight: 800; font-size: clamp(26px, 4vw, 36px); line-height: 1.15; }
.v2-public .sec-sub { max-width: 68ch; margin: 10px 0 0; font-size: 17px; line-height: 1.6; color: var(--v2-muted); }
.v2-public .pitch-page .step { margin: 36px 0; }
.v2-public .pitch-page .step-head { display: flex; align-items: center; gap: 14px; }
.v2-public .pitch-page .step-num {
  flex: none; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: var(--v2-blue); box-shadow: 0 3px 0 var(--v2-blue-deep); color: #fff; font-family: var(--v2-display); font-weight: 800; font-size: 18px;
}
.v2-public .pitch-page .step-num.pinkish { background: var(--v2-pink); box-shadow: 0 3px 0 var(--v2-pink-deep); }
.v2-public .pitch-page .step h3 { margin: 0; font-family: var(--v2-display); font-weight: 800; font-size: 22px; line-height: 1.2; }
.v2-public .pitch-page .step p { max-width: 72ch; margin: 10px 0 18px 54px; font-size: 17px; line-height: 1.6; color: var(--v2-muted); }
.v2-public .pitch-page .step p strong, .v2-public .pitch-page .fact p strong, .v2-public .pitch-page .privacy-note strong { color: var(--v2-ink); }
@media (max-width: 640px) { .v2-public .pitch-page .step p { margin-left: 0; } }
.v2-public .pitch-page .shot-btn { display: block; width: 100%; padding: 0; border: none; background: none; cursor: zoom-in; }
.v2-public .pitch-page .shot-btn:focus-visible { outline: 3px solid var(--v2-blue); outline-offset: 3px; border-radius: 18px; }
.v2-public .pitch-page .shot { display: block; width: 100%; height: auto; box-sizing: border-box; background: #fff; border: 2px solid var(--v2-line); border-radius: 18px; box-shadow: 0 4px 0 var(--v2-line); }
.v2-public .pitch-page .shot-cap { margin-top: 12px; text-align: center; font-size: 14px; font-weight: 600; color: var(--v2-muted); }
.v2-public .pitch-page .facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 30px 0; }
@media (max-width: 900px) { .v2-public .pitch-page .facts { grid-template-columns: 1fr; } }
.v2-public .pitch-page .fact { padding: 22px; background: #fff; border: 2px solid var(--v2-line); border-radius: 20px; box-shadow: 0 4px 0 var(--v2-line); }
.v2-public .pitch-page .fact h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-family: var(--v2-display); font-weight: 800; font-size: 18px; line-height: 1.2; }
.v2-public .pitch-page .fact svg { flex: none; }
.v2-public .pitch-page .fact p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--v2-muted); }
.v2-public .pitch-page .privacy-note { display: flex; align-items: flex-start; gap: 14px; margin: 34px 0; padding: 20px 22px; background: var(--v2-gold-bg); border: 2px solid var(--v2-gold-line); border-radius: 20px; }
.v2-public .pitch-page .privacy-note p { margin: 0; color: var(--v2-gold-ink); }
.v2-public .pitch-cta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .v2-public .pitch-cta-grid { grid-template-columns: 1fr; } }
.v2-public .pitch-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px; border-radius: 24px; border: 2px solid; box-shadow: 0 4px 0; }
.v2-public .pitch-cta.streamer-cta { background: var(--v2-blue-bg); border-color: var(--v2-blue-line); box-shadow: 0 4px 0 var(--v2-blue-line); color: var(--v2-blue-ink); }
.v2-public .pitch-cta.sponsor-cta { background: var(--v2-pink-bg); border-color: var(--v2-pink-line); box-shadow: 0 4px 0 var(--v2-pink-line); color: var(--v2-pink-ink); }
.v2-public .pitch-cta h3 { margin: 0; font-family: var(--v2-display); font-weight: 800; font-size: 22px; line-height: 1.2; }
.v2-public .pitch-cta p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--v2-ink); }
.v2-public .pitch-cta .v2-btn { margin-top: 6px; }
.v2-public .pitch-note { margin: 22px 0 0; text-align: center; font-size: 14px; font-weight: 600; color: var(--v2-muted); }

/* --- Apps (/apps): one section per app, its store screenshots below --- */
.v2-public .app-intro { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: start; }
.v2-public .app-icon { display: block; width: 120px; height: 120px; border-radius: 28px; border: 2px solid var(--v2-line); box-shadow: 0 4px 0 var(--v2-line); }
.v2-public .app-kind { background: var(--v2-blue-bg); color: var(--v2-blue-ink); }
.v2-public .app-tagline { margin: 6px 0 0; font-family: var(--v2-display); font-weight: 800; font-size: clamp(20px, 2.4vw, 24px); line-height: 1.25; color: var(--v2-ink); }
.v2-public .app-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 20px; }
/* Phones swipe through the screenshots edge to edge (the strip bleeds
   into the container's gutter); wider screens see all eight at once. */
.v2-public .app-shots {
  --gutter: 24px;
  display: flex; gap: 14px; margin: 32px calc(-1 * var(--gutter)) 0; padding: 4px var(--gutter) 14px;
  list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
}
.v2-public .app-shots li { flex: 0 0 auto; width: min(62vw, 220px); scroll-snap-align: start; }
@media (min-width: 760px) {
  .v2-public .app-shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 36px 0 0; padding: 0; overflow: visible; }
  .v2-public .app-shots li { width: auto; }
}
.v2-public .apps-page .facts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.v2-public .app-fact-icon { display: inline-flex; }
.v2-public .app-fact-icon--blue { color: var(--v2-blue); }
.v2-public .app-fact-icon--purple { color: var(--v2-purple); }
.v2-public .app-fact-icon--pink { color: var(--v2-pink); }
.v2-public .app-fact-icon--gold { color: var(--v2-gold); }
.v2-public .app-fact-icon--green { color: var(--v2-green); }
@media (max-width: 640px) {
  .v2-public .app-intro { grid-template-columns: 1fr; gap: 18px; }
  .v2-public .app-icon { width: 96px; height: 96px; border-radius: 22px; }
  .v2-public .app-intro .v2-btn { width: 100%; }
}
@media (max-width: 480px) { .v2-public .app-shots { --gutter: 16px; } }