/* ============================================================
   Triathlon Blueprint — VSL base styles
   Gonzalo Yokota design system. Mobile-first single column.
   Each version sets a small :root theme block; everything below
   reads from --accent / --cta / --page tokens.
   ============================================================ */

@import url("_ds/gonzalo-yokota-design-system-1e341e88-7006-434e-b276-6339fc92c3a1/tokens/fonts.css");
@import url("_ds/gonzalo-yokota-design-system-1e341e88-7006-434e-b276-6339fc92c3a1/tokens/colors.css");
@import url("_ds/gonzalo-yokota-design-system-1e341e88-7006-434e-b276-6339fc92c3a1/tokens/typography.css");
@import url("_ds/gonzalo-yokota-design-system-1e341e88-7006-434e-b276-6339fc92c3a1/tokens/spacing.css");
@import url("_ds/gonzalo-yokota-design-system-1e341e88-7006-434e-b276-6339fc92c3a1/tokens/shape.css");

/* ---- GLYPH PATCH ----
   The demo Elza face maps em-dash, en-dash, middot, curly quotes/apostrophes
   and ellipsis to .notdef boxes. Re-route ONLY those codepoints to a
   glyph-complete sans (CDN woff2, with system fallbacks). Declared AFTER the
   Elza faces so it wins for the overlapping ranges. (Arrows live outside the
   latin subset, so those are handled as markup, not glyphs.) */
@font-face {
  font-family: "Elza";
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/hanken-grotesk@latest/latin-400-normal.woff2") format("woff2"),
       local("Arial"), local("Helvetica Neue"), local("Segoe UI"), local("Roboto");
  font-weight: 100 900;
  unicode-range: U+00B7, U+2010-2015, U+2018-201F, U+2026;
}
@font-face {
  font-family: "Elza";
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/hanken-grotesk@latest/latin-700-normal.woff2") format("woff2"),
       local("Arial Bold"), local("Helvetica Neue"), local("Segoe UI");
  font-weight: 600 900;
  unicode-range: U+00B7, U+2010-2015, U+2018-201F, U+2026;
}

/* chevron drawn in CSS — replaces the → glyph (not in the latin subset) */
.chev {
  display: inline-block; width: 8px; height: 8px;
  border-right: 2.5px solid currentColor; border-top: 2.5px solid currentColor;
  transform: rotate(45deg); margin-left: 2px;
  transition: transform .2s var(--ease);
}

/* ---- THEME DEFAULTS (overridden per version) ---- */
:root {
  --accent:       var(--color-primary);
  --accent-tint:  var(--tint-primary);
  --cta:          var(--color-primary);   /* sky blue — consistent across versions */
  --page:         var(--color-bg-2);       /* cream */
  --alt:          var(--color-bg-3);       /* warm sand */
  --section-gap:  44px;
  --pad-x:        26px;
  /* The DS demo Elza cut is missing $ + ' : / and many symbols (they render
     as .notdef boxes and block the fallback). Use Hanken Grotesk — the DS's
     official, glyph-complete Elza fallback — for all body/UI text. */
  --font-base:    "Hanken Grotesk", -apple-system, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #E9E3DE;           /* neutral surround so the column reads as a device */
  font-family: var(--font-base);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
}

.vsl {
  max-width: 440px;
  margin: 0 auto;
  background: var(--page);
  min-height: 100vh;
  overflow: hidden;
  position: relative;
}

/* ---- TYPE ---- */
.eyebrow {
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow.muted { color: var(--text-muted); }

h1, h2, h3 {
  font-family: var(--font-heading);
  color: var(--text-strong);
  letter-spacing: var(--tracking-heading);
  line-height: 1.16;
  margin: 0;
  padding-bottom: 0.3em;   /* demo Recoleta has tall ink that spills below the line box */
  text-wrap: balance;
}
h1 { font-size: 34px; font-weight: 600; }
h2 { font-size: 29px; font-weight: 600; }
h3 { font-size: 21px; font-weight: 600; }

p { margin: 0; line-height: var(--lh-normal); font-size: 16.5px; }
.lead { font-size: 18px; color: var(--text-body); line-height: var(--lh-medium); }
.fg-strong { color: var(--text-strong); }
.accent-text { color: var(--accent); }
em.hl { font-style: normal; font-weight: 700; color: var(--text-strong); }

/* a soft hand-drawn marker underline behind a word */
.marker {
  position: relative;
  white-space: nowrap;
}
.marker::after {
  content: "";
  position: absolute;
  left: -2%; right: -2%; bottom: 4%;
  height: 38%;
  background: var(--accent);
  opacity: .35;
  border-radius: 6px;
  z-index: -1;
}

/* ---- SECTION SHELL ---- */
section.s {
  padding: var(--section-gap) var(--pad-x);
}
section.tint  { background: var(--accent-tint); }
section.sand  { background: var(--alt); }
section.ink   { background: var(--color-fg-1); }
section.ink h1, section.ink h2, section.ink h3 { color: #fff; }
section.ink p { color: rgba(255,255,255,.74); }
section.ink .eyebrow.muted { color: rgba(255,255,255,.5); }

.stack > * + * { margin-top: 16px; }
.stack-lg > * + * { margin-top: 26px; }

/* ---- BRAND HEADER ---- */
.brandbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--pad-x);
  background: rgba(249,246,243,.86);
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid var(--border-subtle);
}
.logo { font-family: var(--font-base); font-size: 19px; color: var(--text-strong); letter-spacing: -.02em; }
.logo b { font-weight: 800; }
.logo span { font-weight: 400; }
.brandbar .disc {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); display: grid; place-items: center;
}
.brandbar .disc svg { width: 19px; height: 19px; }

/* ---- BUTTONS ---- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 19px 24px;
  border: none; border-radius: var(--radius-round);
  background: var(--cta);
  color: #fff;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--cta) 70%, transparent);
}
.btn:hover { background: var(--color-fg-1); transform: var(--lift-sm); }
.btn .arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-ghost {
  background: transparent; color: var(--text-strong);
  box-shadow: inset 0 0 0 2px var(--color-fg-1);
}
.btn-ghost:hover { background: var(--color-fg-1); color: #fff; }
.cta-note { text-align: center; font-size: 13px; color: var(--text-muted); margin-top: 12px; }

/* ---- CARD ---- */
.card {
  background: var(--surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 24px;
}

/* ---- PRODUCT IMAGE EMBED (CSS-drawn mockup, full artboard) ---- */
.product-embed {
  width: 100%;
  aspect-ratio: 1200 / 860;
  border-radius: var(--radius-medium);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: #FBF8F5;
}
.product-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---- VIDEO / MEDIA FRAME ---- */
.media {
  border-radius: var(--radius-medium);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  position: relative;
  background: var(--color-fg-1);
}
.media image-slot { display: block; width: 100%; }
.play {
  position: absolute; inset: 0; margin: auto;
  width: 74px; height: 74px; border-radius: 50%;
  background: rgba(255,255,255,.92);
  display: grid; place-items: center;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
.play::after {
  content: ""; width: 0; height: 0; margin-left: 5px;
  border-left: 22px solid var(--cta);
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
}
.media .badge-live {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: flex; align-items: center; gap: 7px;
  background: rgba(27,22,36,.62); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 7px 12px; border-radius: var(--radius-round);
}
.media .badge-live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-secondary); }

/* ---- PRODUCT FRAME ---- */
.product {
  position: relative;
  background: #fff;
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-card);
  padding: 14px;
}
.product img { width: 100%; display: block; border-radius: 14px; }
.product .bonus {
  position: absolute; bottom: -14px; right: 14px;
  background: var(--color-secondary); color: #fff;
  font-weight: 800; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  padding: 9px 16px; border-radius: var(--radius-round);
  box-shadow: var(--shadow-soft);
  transform: rotate(-3deg);
  white-space: nowrap;
}
.disc-bg {
  position: relative;
  display: grid; place-items: center;
}
.disc-bg::before {
  content: ""; position: absolute;
  width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: var(--accent); opacity: .9; z-index: 0;
}
.disc-bg .product { position: relative; z-index: 1; }

/* ---- STORY SPLIT IMAGE ---- */
.split {
  border-radius: var(--radius-medium);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.split img { width: 100%; display: block; }

/* ---- REASON / BENEFIT LISTS ---- */
.rlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.rlist li { display: flex; gap: 14px; align-items: flex-start; }
.rlist .ic {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; margin-top: 1px;
  font-weight: 800; font-size: 15px;
}
.rlist.neg .ic { background: var(--color-bg-4); color: var(--text-muted); }
.rlist.neg li .txt { color: var(--text-body); }
.rlist.pos .ic { background: var(--success); color: #fff; }
.rlist li .txt { font-size: 15.5px; line-height: 1.45; color: var(--text-body); }
.rlist li .txt b { color: var(--text-strong); font-weight: 700; }

/* ---- "no need" chips ---- */
.needs { display: flex; flex-direction: column; gap: 12px; }
.need {
  background: var(--surface-card); border-radius: 14px;
  box-shadow: var(--shadow-soft);
  padding: 15px 17px; font-size: 15px; line-height: 1.4;
}
.need b { color: var(--text-strong); }

/* ---- TESTIMONIALS ---- */
.tcard { text-align: center; }
.tcard .ava {
  width: 78px; height: 78px; border-radius: 50%;
  margin: 0 auto 14px; overflow: hidden;
  box-shadow: 0 0 0 4px var(--page), 0 0 0 6px var(--accent);
}
.tcard .ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tcard .ava.initials { display: grid; place-items: center; background: var(--color-tertiary);
  font-family: var(--font-heading); font-weight: 600; font-size: 26px; color: var(--color-fg-1); }
.tcard .name { font-family: var(--font-heading); font-weight: 600; font-size: 19px; color: var(--text-strong); }
.tcard .role { font-size: 13.5px; color: var(--text-muted); margin-top: 2px; }
.tcard .quote { font-style: italic; font-size: 15.5px; color: var(--text-body); line-height: 1.5; margin-top: 13px; }
.tcard .stars { color: var(--color-tertiary); letter-spacing: 3px; font-size: 15px; margin-top: 11px; }

/* ---- PRICE ---- */
.price-wrap { text-align: center; }
.price-reg { font-size: 17px; color: var(--text-muted); }
.price-reg s { color: var(--color-secondary); text-decoration-thickness: 2px; }
.price-today { font-family: var(--font-heading); font-weight: 600; color: var(--text-strong);
  font-size: 22px; margin-top: 6px; }
.price-today .amt { color: var(--success); font-size: 40px; }

/* ---- AUTHOR ---- */
.author { text-align: center; }
.author .ava { width: 92px; height: 92px; border-radius: 50%; margin: 0 auto 16px;
  overflow: hidden; box-shadow: 0 0 0 4px var(--page), 0 0 0 6px var(--accent); }
.author .ava image-slot, .author .ava img { width: 100%; height: 100%; display: block; }
.author .who { font-weight: 700; font-size: 14.5px; color: var(--text-strong); letter-spacing: .01em; }

/* ---- FOOTER / DISCLAIMER ---- */
.footer { background: var(--alt); padding: 34px var(--pad-x) 46px; }
.footer .copyright { font-family: var(--font-heading); font-weight: 600; text-align: center;
  font-size: 16px; color: var(--text-strong); }
.footer .legal { font-size: 12px; line-height: 1.65; color: var(--text-faint); text-align: center; margin-top: 18px; }
.footer .links { display: flex; justify-content: center; gap: 8px; margin-top: 22px; font-size: 13px; }
.footer .links a { color: var(--text-muted); text-decoration: underline; }
.footer .links .sep { color: var(--text-faint); }
.footer .fmark {
  width: 40px; height: 40px; border-radius: 11px; background: var(--color-fg-1);
  display: grid; place-items: center; margin: 0 auto 18px;
}
.footer .fmark svg { width: 20px; height: 20px; }

/* ---- DIVIDER RULE ---- */
.rule { height: 1px; background: var(--border-subtle); border: none; margin: 0 var(--pad-x); }

/* ---- small helpers ---- */
.center { text-align: center; }
.tri-ic { display: inline-flex; gap: 10px; align-items: center; color: var(--accent); }
.tri-ic svg { width: 26px; height: 26px; }
.kicker-num { font-family: var(--font-heading); font-weight: 600; font-size: 13px;
  color: var(--accent); letter-spacing: .04em; }

/* ---- ENTRANCE / SCROLL REVEAL (opt-in via data-reveal-root + reveal.js) ---- */
html.reveal-gate [data-reveal-root] { visibility: hidden; }
/* Hidden start-state lives on .reveal itself (NOT gated behind .lit) so the
   opacity:0 baseline is committed at first paint — otherwise the browser
   coalesces hide+show in one tick and the hero snaps in flat. .reveal is only
   added by reveal.js, so no-JS / reduced-motion pages never hide content.
   Reduced motion is handled in reveal.js (it skips adding .reveal entirely). */
[data-reveal-root] .reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .45s var(--ease, cubic-bezier(0.22,1,0.36,1)),
              transform .45s var(--ease, cubic-bezier(0.22,1,0.36,1));
  will-change: opacity, transform;
}
[data-reveal-root] .reveal.in { opacity: 1; transform: none; }