/* =========================================================
   Vamos Simplificar · Workshop — Gestão para Empreendedoras
   Warm editorial design system
   ========================================================= */

:root{
  /* palette — light & airy (matches her live site), camel + ink on near-white,
     terracotta kept only as a purposeful conversion/urgency spark */
  --cream:      #FCFCF7;   /* base (client-specified) */
  --cream-2:    #F6F4EB;   /* soft warm section */
  --cream-3:    #EFEADB;   /* sand — cards / accents / bands */
  --ink:        #1A1712;   /* near-black text */
  --ink-soft:   #5E5649;
  --ink-faint:  #948A79;
  --camel:      #BFA588;   /* primary brand tan (logo) */
  --camel-deep: #9E8158;   /* legible camel for text/hover */
  --terra:      #C0562F;   /* restrained warm spark — action only */
  --terra-deep: #9F441F;
  --sage:       #A7BC9A;   /* minor tertiary */
  --white:      #FFFFFF;
  --line:       rgba(26,23,18,.12);
  --line-soft:  rgba(26,23,18,.06);

  /* type — "Playfair Display" is a J-only subset (see index.html): it supplies
     just the capital J; every other glyph falls through to Fraunces */
  --serif: "Playfair Display", "Fraunces", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, sans-serif;

  /* radii */
  --r-xl: 40px;
  --r-lg: 28px;
  --r-md: 20px;
  --r-sm: 14px;

  /* shadow */
  --shadow-sm: 0 2px 10px rgba(33,29,24,.05);
  --shadow-md: 0 18px 50px -22px rgba(33,29,24,.30);
  --shadow-lg: 0 40px 90px -40px rgba(33,29,24,.42);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --wrap: 1180px;
  --pad: clamp(20px, 5vw, 64px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  font-size:clamp(16px,1.05vw,17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* NO overflow-x here: it breaks position:sticky on iOS Safari (kills the
     #programa pan). All wide content is clipped by its own section instead. */
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
mark{ background:linear-gradient(transparent 55%, rgba(191,165,136,.5) 0); color:inherit; padding:0 .05em; }
em{ font-style:italic; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:clamp(64px,10vw,140px); position:relative; }

/* ---------- typography helpers ---------- */
h1,h2,h3{ font-family:var(--serif); font-weight:500; line-height:1.04; letter-spacing:-.01em; margin:0; }
.kicker{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.72rem;
  font-weight:600;
  color:var(--camel-deep);
  margin:0 0 1.2rem;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; color:var(--ink-soft);
  padding:.5rem .9rem; border:1px solid var(--line);
  border-radius:999px; background:rgba(255,255,255,.5); backdrop-filter:blur(4px);
}
.eyebrow .dot{ width:8px; height:8px; border-radius:50%; background:var(--terra); box-shadow:0 0 0 0 rgba(216,97,60,.5); animation:pulse 2.4s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(216,97,60,.5)} 70%{box-shadow:0 0 0 10px rgba(216,97,60,0)} 100%{box-shadow:0 0 0 0 rgba(216,97,60,0)} }

.section-head-block{ max-width:720px; margin-bottom:clamp(32px,5vw,60px); }
.section-head-block.center{ margin-inline:auto; text-align:center; }
.section-head-block h2,
.section-head.split-title{ font-size:clamp(2rem,4.6vw,3.4rem); }

.pill{ display:inline-block; font-family:var(--sans); font-size:.72rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; padding:.4rem .8rem; border-radius:999px;
  background:var(--cream-3); color:var(--ink-soft); }
.pill-accent{ background:var(--terra); color:#fff; }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  --bg:var(--ink); --fg:#fff;
  position:relative; display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--sans); font-weight:600; font-size:.98rem;
  padding:.95rem 1.6rem; border-radius:999px; cursor:pointer; border:none;
  background:var(--bg); color:var(--fg); line-height:1;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s;
  will-change:transform;
}
.btn:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.btn:active{ transform:translateY(-1px); }
.btn-arrow{ width:19px; height:19px; transition:transform .35s var(--ease); }
.btn:hover .btn-arrow{ transform:translateX(4px); }
.btn-primary{ --bg:var(--terra); --fg:#fff; }
.btn-primary:hover{ background:var(--terra-deep); }
.btn-ghost{ --bg:transparent; --fg:var(--ink); border:1.5px solid var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:#fff; }
.btn-text{ background:none; color:var(--ink); padding-inline:.4rem; }
.btn-text::after{ content:""; position:absolute; left:.4rem; right:.4rem; bottom:.55rem; height:1.5px; background:currentColor; transform:scaleX(.35); transform-origin:left; opacity:.5; transition:transform .4s var(--ease), opacity .3s; }
.btn-text:hover{ transform:none; box-shadow:none; }
.btn-text:hover::after{ transform:scaleX(1); opacity:1; }
.btn-block{ display:flex; width:100%; justify-content:center; }
.btn-lg{ padding:1.15rem 2rem; font-size:1.05rem; }

/* =========================================================
   SCROLL PROGRESS
   ========================================================= */
.scroll-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:1200; pointer-events:none; }
.scroll-progress span{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--terra),var(--camel)); }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  transition:transform .5s var(--ease), background .4s, box-shadow .4s;
}
.site-header.hide{ transform:translateY(-105%); }
.site-header.solid{ background:rgba(252,252,247,.86); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line-soft); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding-block:.85rem; }
.brand{ display:inline-flex; align-items:center; gap:.6rem; }
.brand-mark{ height:46px; width:auto; }
.brand-name{ font-family:var(--serif); font-size:1.05rem; font-weight:600; letter-spacing:-.01em; }
.brand-name em{ font-style:italic; color:var(--camel-deep); font-weight:400; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.header-cta{ padding:.6rem 1.2rem; font-size:.9rem; }
@media (max-width:560px){ .brand-name{ font-size:.85rem; } .brand-mark{ height:36px; } }

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; padding-top:clamp(64px,10vh,120px); padding-bottom:clamp(40px,7vw,90px); overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.blob{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; }
.blob-a{ width:52vw; height:52vw; max-width:640px; max-height:640px; right:-12vw; top:-8vw; background:radial-gradient(circle at 30% 30%, rgba(191,165,136,.55), transparent 70%); }
.blob-b{ width:44vw; height:44vw; max-width:520px; max-height:520px; left:-14vw; bottom:-16vw; background:radial-gradient(circle at 50% 50%, rgba(167,188,154,.5), transparent 70%); }

.hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center; }

/* hero lockup: monogram left, two-line wordmark right — header-brand styling, scaled up.
   Sizing note: lockup ≈ 10.2em wide (mark 2.4em + gap + "Empreendedoras" 7.3em) — the
   clamps below keep it inside the copy column (desktop) / viewport (stacked). */
.hero-title{ font-size:clamp(2rem,3.4vw,3.15rem); font-weight:500; margin:.5rem 0 1.4rem; line-height:1.04; }
.hero-lockup{ display:flex; align-items:center; gap:clamp(14px,1.6vw,26px); }
.hero-mark{
  /* as tall as the two wordmark lines (2 × line-height) */
  height:2.08em; width:auto;
  opacity:0; transform:translateY(10px) scale(.94); transform-origin:left center;
  transition:opacity .9s var(--ease-out) .1s, transform .9s var(--ease-out) .1s;
}
.hero-title.is-in .hero-mark{ opacity:1; transform:none; }
.hero-lines{ display:flex; flex-direction:column; justify-content:center; }
.hero-title .line{ display:block; overflow:hidden; white-space:nowrap; }
.hero-title .line > *{ display:block; }
.hero-title em{ font-style:italic; color:var(--camel-deep); font-weight:400; }

.hero-sub{ font-size:clamp(1.05rem,1.7vw,1.3rem); color:var(--ink-soft); max-width:32ch; margin:0 0 2rem; }
.hero-sub em{ color:var(--ink); font-style:italic; }
.hero-actions{ display:flex; align-items:center; gap:.6rem 1rem; flex-wrap:wrap; margin-bottom:2.6rem; }

.hero-facts{ list-style:none; margin:0; padding:0; display:flex; gap:clamp(18px,3vw,40px); border-top:1px solid var(--line); padding-top:1.4rem; max-width:440px; }
.hero-facts li{ display:flex; flex-direction:column; }
.hero-facts strong{ font-family:var(--serif); font-size:1.5rem; font-weight:600; }
.hero-facts span{ font-size:.82rem; color:var(--ink-faint); }

.hero-media{ position:relative; }
.hero-photo{ margin:0; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-lg); transform-style:preserve-3d; background:var(--cream-2); aspect-ratio:3/4; }
.hero-photo img{ width:100%; height:100%; object-fit:cover; }

.event-badge{
  position:absolute; top:-18px; left:-22px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:88px; height:88px; border-radius:22px; background:var(--white); color:var(--ink);
  box-shadow:var(--shadow-md); line-height:1; text-align:center; z-index:2; border:1px solid var(--line-soft);
}
.event-badge-k{ font-size:.62rem; letter-spacing:.18em; color:var(--camel-deep); }
.event-badge-day{ font-family:var(--serif); font-size:2.1rem; font-weight:600; margin:.1rem 0; }
.event-badge-m{ font-size:.62rem; letter-spacing:.18em; color:var(--terra); font-weight:700; }

.hero-note{
  position:absolute; bottom:22px; right:-14px; z-index:2;
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.86); backdrop-filter:blur(8px);
  padding:.7rem 1.05rem; border-radius:999px; font-size:.84rem; font-weight:600;
  box-shadow:var(--shadow-md); border:1px solid rgba(255,255,255,.6);
}
.hero-note-emoji{ color:var(--terra); }

.scroll-cue{ position:absolute; left:50%; bottom:18px; transform:translateX(-50%); width:26px; height:42px; border:1.5px solid var(--line); border-radius:14px; display:flex; justify-content:center; z-index:3; }
.scroll-cue span{ width:4px; height:8px; border-radius:2px; background:var(--terra); margin-top:7px; animation:scrolldot 1.8s infinite; }
@keyframes scrolldot{ 0%{opacity:0; transform:translateY(-3px)} 40%{opacity:1} 80%{opacity:0; transform:translateY(12px)} 100%{opacity:0} }

/* section-end next cues (JS-generated, desktop only) — same mouse pill as the hero */
.next-cue{ display:none; }
@media (min-width:961px){
  .next-cue{
    display:flex; justify-content:center;
    width:26px; height:42px; margin:clamp(28px,3.5vw,52px) auto 0;
    border:1.5px solid var(--line); border-radius:14px;
    transition:border-color .3s, transform .35s var(--ease);
  }
  .next-cue span{ width:4px; height:8px; border-radius:2px; background:var(--terra); margin-top:7px; animation:scrolldot 1.8s infinite; }
  .next-cue:hover{ border-color:var(--terra); }
  .next-cue.up{ transform:rotate(180deg); }
}

.float{ animation:float 6s ease-in-out infinite; }
.hero-note.float{ animation-delay:-3s; }
@keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{ background:var(--cream-3); color:var(--ink); padding-block:1rem; overflow:hidden; white-space:nowrap; border-block:1px solid var(--line-soft); }
.marquee-track{ display:inline-flex; align-items:center; gap:2.2rem; will-change:transform; animation:marquee 32s linear infinite; }
.marquee span{ font-family:var(--serif); font-size:1.35rem; font-style:italic; }
.marquee .sep{ color:var(--terra); font-style:normal; font-size:1rem; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* =========================================================
   PAIN POINT
   ========================================================= */
.pain{ background:var(--cream); }
.pain .section-head{ font-size:clamp(1.9rem,4.4vw,3.2rem); max-width:16ch; margin-bottom:clamp(30px,5vw,56px); }
.pain-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); }
.pain-lead p{ margin:0 0 1.2rem; }
.pain-lead p:first-child{ font-size:1.15rem; color:var(--ink-soft); }
.pullquote{ font-family:var(--serif); font-size:clamp(1.4rem,2.6vw,2rem)!important; line-height:1.25; font-weight:500; color:var(--ink)!important; }
.pain-body p{ margin:0 0 1.1rem; color:var(--ink-soft); }
.pain-kicker{ font-family:var(--serif); font-style:italic; font-size:1.3rem; color:var(--ink)!important; }

/* =========================================================
   FOR YOU IF
   ========================================================= */
.foryou{ background:var(--cream-2); }
.foryou-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,5vw,80px); align-items:start; }
.foryou-head{ position:sticky; top:110px; }
.foryou-title{ font-size:clamp(1.9rem,3.6vw,2.9rem); }
.foryou-sub{ margin:1rem 0 0; color:var(--ink-faint); font-size:.95rem; font-style:italic; }

.checklist{ list-style:none; margin:0; padding:0; }
.check-row{
  display:flex; gap:1.1rem; align-items:flex-start;
  padding:1.15rem 0; border-bottom:1px solid var(--line);
  opacity:0; translate:0 22px;
  transition:opacity .6s var(--ease-out) calc(var(--i,0)*.14s),
             translate .6s var(--ease-out) calc(var(--i,0)*.14s);
}
.checklist.is-in .check-row{ opacity:1; translate:0 0; }
.cbox{
  flex:0 0 auto; width:27px; height:27px; margin-top:.1rem;
  border:1.5px solid var(--ink); border-radius:8px;
  display:grid; place-items:center; color:var(--cream);
  transition:background .3s var(--ease) calc(var(--i,0)*.14s + .3s);
}
.cbox svg{ width:16px; height:16px; }
.tick{
  stroke-dasharray:24; stroke-dashoffset:24;
  transition:stroke-dashoffset .4s var(--ease) calc(var(--i,0)*.14s + .38s);
}
.checklist.is-in .cbox{ background:var(--ink); }
.checklist.is-in .tick{ stroke-dashoffset:0; }
.check-text{ font-weight:500; padding-top:.1rem; }
.check-text em{ font-style:italic; color:var(--terra-deep); }

.check-final{ border-bottom:none; margin-top:.5rem; }
.check-final .check-text{ font-family:var(--serif); font-weight:500; font-size:clamp(1.25rem,2vw,1.6rem); padding-top:0; }
.check-final .cbox{ border-color:var(--terra); }
.checklist.is-in .check-final .cbox{ background:var(--terra); }

/* =========================================================
   CURRICULUM
   ========================================================= */
.curriculum{ background:var(--cream); }

/* scroll-driven horizontal card row:
   .hscroll gets a tall height from JS; .hscroll-sticky pins the viewport;
   vertical scroll progress translates .modules sideways. */
.hscroll{ position:relative; }
.hscroll-sticky{
  position:sticky; top:0;
  min-height:100vh; min-height:100svh; /* vh fallback for iOS < 15.4 */
  overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(48px,7vh,84px);
}
.hscroll-head{ margin-bottom:clamp(24px,4vh,48px); }
.hscroll-hint{
  display:inline-block; margin-top:1rem; font-size:.82rem; font-weight:600;
  letter-spacing:.08em; color:var(--ink-faint);
  animation:hintNudge 2.6s var(--ease) infinite;
}
@keyframes hintNudge{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(8px)} }

.modules{
  list-style:none; margin:0;
  /* first card aligns with the wrapped section title.
     100vw (not %): percentage padding is cyclic inside a max-content track
     and browsers resolve it to junk values */
  padding-inline:max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad)));
  display:flex; gap:clamp(16px,2vw,26px);
  width:max-content; will-change:transform;
}
.module-card{
  /* no math funcs inside `flex` — old iOS Safari drops the whole declaration,
     cards fall to max-content width and the track explodes to ~11000px */
  flex:0 0 auto;
  width:340px;                    /* fallback for engines without clamp() */
  width:clamp(300px,32vw,430px);
  display:flex; flex-direction:column; gap:1.1rem;
  background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r-lg);
  padding:clamp(26px,2.6vw,40px);
  box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s;
}
.module-card:hover{ box-shadow:var(--shadow-md); border-color:var(--camel); transform:translateY(-6px); }
.module-num{
  font-family:var(--serif); font-size:clamp(2.6rem,4.6vw,3.8rem); font-weight:300; font-style:italic;
  color:var(--camel-deep); line-height:1;
}
.module-body h3{ font-size:clamp(1.3rem,2vw,1.6rem); margin-bottom:.55rem; }
.module-body p{ margin:0; color:var(--ink-soft); font-size:.96rem; }

.hscroll-progress{
  margin:clamp(24px,4vh,44px) max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad))) 0;
  height:3px; border-radius:2px; background:rgba(26,23,18,.12); overflow:hidden;
  max-width:280px;
}
.hscroll-progress span{ display:block; height:100%; width:0%; background:var(--camel-deep); border-radius:2px; }

/* phone-sized cards so the pan shows roughly one card at a time */
@media (max-width:600px){
  .module-card{ width:80vw; max-width:340px; } /* zero math functions */
}

/* fallback: natural swipe row (reduced motion / no-JS) */
.hscroll.is-static{ height:auto !important; }
.hscroll.is-static .hscroll-sticky{ position:static; min-height:0; overflow:visible; }
.hscroll.is-static .modules{
  width:auto; overflow-x:auto; transform:none !important;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  padding-bottom:.8rem; scrollbar-width:thin;
}
.hscroll.is-static .module-card{ scroll-snap-align:start; width:84vw; max-width:360px; }
.hscroll.is-static .hscroll-progress{ display:none; }

/* =========================================================
   BONUS
   ========================================================= */
.bonus{ background:var(--cream-2); }
.bonus-head{ text-align:center; margin-bottom:clamp(28px,4vw,50px); }
.bonus-head .pill{ margin-bottom:1rem; }
.bonus-head h2{ font-size:clamp(1.9rem,4vw,3rem); }
.bonus-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,28px); }
.bonus-card{
  position:relative; background:linear-gradient(180deg,var(--white),#fffdf9);
  border:1px solid var(--line-soft); border-radius:var(--r-lg);
  padding:clamp(28px,3.4vw,44px); box-shadow:var(--shadow-sm); overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.bonus-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:5px; background:linear-gradient(90deg,var(--terra),var(--camel)); }
.bonus-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.bonus-badge{ position:absolute; top:22px; right:22px; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--camel-deep); }
.bonus-icon{ width:56px; height:56px; border-radius:16px; background:var(--cream-3); color:var(--camel-deep); display:grid; place-items:center; margin-bottom:1.4rem; }
.bonus-icon svg{ width:28px; height:28px; }
.bonus-card h3{ font-size:1.5rem; margin-bottom:.5rem; }
.bonus-card p{ color:var(--ink-soft); margin:0 0 1.3rem; }
.bonus-tag{ display:inline-block; font-size:.8rem; font-weight:600; color:var(--ink-soft); background:var(--cream-3); padding:.4rem .8rem; border-radius:999px; }

/* =========================================================
   LIVE SESSION — TICKET
   ========================================================= */
.live{ background:var(--cream); }
.ticket{
  display:grid; grid-template-columns:1.5fr 1fr; overflow:hidden;
  border-radius:var(--r-xl); box-shadow:var(--shadow-lg);
  background:var(--white); color:var(--ink); border:1px solid var(--line-soft);
  transform-style:preserve-3d;
}
.ticket-main{ padding:clamp(32px,4.6vw,64px); }
.ticket-kicker{ text-transform:uppercase; letter-spacing:.2em; font-size:.75rem; color:var(--camel-deep); font-weight:600; margin:0 0 1.2rem; }
.ticket-date{ font-family:var(--serif); font-size:clamp(2.4rem,5.5vw,4rem); font-weight:500; margin:0; line-height:1; }
.ticket-time{ font-size:1.15rem; margin:.7rem 0 1.4rem; }
.ticket-tz{ color:var(--ink-faint); font-size:.9rem; }
.ticket-desc{ color:var(--ink-soft); max-width:44ch; margin:0; }
.ticket-stub{
  position:relative; background:var(--terra); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:clamp(28px,3.5vw,48px) clamp(20px,3vw,40px); text-align:center; gap:.2rem;
}
.ticket-stub::before{ content:""; position:absolute; left:-11px; top:0; bottom:0; width:22px;
  background:radial-gradient(circle at left, transparent 0 11px, var(--terra) 11px);
  background-size:22px 30px; background-position:left center;
  /* scalloped edge */
  -webkit-mask:radial-gradient(circle 11px at 0 15px, transparent 0 11px, #000 12px); }
.ticket-stub-label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.16em; opacity:.85; }
.ticket-stub-value{ font-family:var(--serif); font-size:1.5rem; font-weight:600; margin-bottom:1.2rem; }
.ticket-perforation{ width:60%; border-top:2px dashed rgba(255,255,255,.5); margin:.4rem 0 1.3rem; }
.ticket-btn{ --bg:#fff; --fg:var(--ink); background:#fff; color:var(--ink); }
.ticket-btn:hover{ background:var(--cream); }

/* =========================================================
   PRICING
   ========================================================= */
.pricing{ background:var(--cream-2); }
.price-card{
  max-width:560px; margin-inline:auto; background:var(--white);
  border-radius:var(--r-xl); padding:clamp(32px,4.6vw,56px);
  box-shadow:var(--shadow-lg); text-align:center; border:1px solid var(--line-soft);
  position:relative; overflow:hidden;
}
.price-flag{ display:flex; align-items:center; justify-content:center; gap:.8rem; margin-bottom:1.4rem; }
.price-deadline{ font-size:.9rem; color:var(--ink-soft); }
.price-value{ display:flex; align-items:flex-start; justify-content:center; gap:.15rem; line-height:1; }
.price-amount{ font-family:var(--serif); font-size:clamp(4.5rem,12vw,7rem); font-weight:500; }
.price-cur{ font-family:var(--serif); font-size:2.2rem; margin-top:.6rem; color:var(--terra); }
.price-sub{ color:var(--ink-soft); margin:.4rem 0 1.8rem; }
.price-includes{ list-style:none; margin:0 auto 2rem; padding:0; max-width:340px; text-align:left; display:grid; gap:.7rem; }
.price-includes li{ position:relative; padding-left:1.9rem; }
.price-includes li::before{ content:""; position:absolute; left:0; top:.35em; width:18px; height:18px; border-radius:50%;
  background:var(--camel); }
.price-includes li::after{ content:""; position:absolute; left:5px; top:calc(.35em + 4px); width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(42deg); }

.countdown{ margin-top:1.8rem; border-top:1px solid var(--line); padding-top:1.4rem; }
.countdown-label{ font-size:.78rem; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-faint); font-weight:600; }
.countdown-clock{ display:flex; justify-content:center; gap:.7rem; margin-top:.8rem; }
.cd{ display:flex; flex-direction:column; align-items:center; background:var(--cream-2); border-radius:14px; padding:.6rem .9rem; min-width:60px; }
.cd b{ font-family:var(--serif); font-size:1.7rem; font-weight:600; font-variant-numeric:tabular-nums; }
.cd i{ font-style:normal; font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-faint); }

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.testimonials{ background:var(--cream); overflow:hidden; }
.testi-marquee{
  overflow:hidden; cursor:grab; touch-action:pan-y;
  -webkit-mask:linear-gradient(90deg,transparent, #000 8%, #000 92%, transparent);
  mask:linear-gradient(90deg,transparent, #000 8%, #000 92%, transparent);
}
.testi-marquee:active{ cursor:grabbing; }
.testi-track{ user-select:none; -webkit-user-select:none; }
.testi-track{ display:flex; gap:22px; width:max-content; will-change:transform; }
.testi-card{ flex:0 0 auto; width:340px; width:clamp(280px,32vw,400px); margin:0; background:var(--white); border:1px solid var(--line-soft);
  border-radius:var(--r-lg); padding:clamp(26px,3vw,38px); box-shadow:var(--shadow-sm); }
.testi-card p{ margin:0; font-family:var(--serif); font-size:1.12rem; line-height:1.5; font-style:italic; color:var(--ink); }
.testi-card.highlight{ background:var(--cream-3); border-color:var(--camel); }

/* =========================================================
   ABOUT
   ========================================================= */
.about{ background:var(--cream-2); }
.about-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,5vw,72px); align-items:center; }
.about-media{ position:relative; }
.about-photo{ margin:0; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:3/4; background:var(--cream-3); transform-style:preserve-3d; }
.about-photo img{ width:100%; height:100%; object-fit:cover; }
.about-stat{
  position:absolute; right:-16px; bottom:26px; background:var(--white);
  border-radius:20px; padding:1rem 1.3rem; box-shadow:var(--shadow-md); text-align:center; max-width:170px;
}
.about-stat b{ display:block; font-family:var(--serif); font-size:2.4rem; font-weight:600; color:var(--camel-deep); line-height:1; }
.about-stat span{ font-size:.82rem; color:var(--ink-soft); }
.about-title{ font-size:clamp(2.2rem,4.4vw,3.4rem); margin:.4rem 0 1.4rem; }
.about-text p{ margin:0 0 1rem; color:var(--ink-soft); }
.about-creds{ display:flex; flex-wrap:wrap; gap:.6rem; margin:1.6rem 0 2rem; }
.about-creds span{ font-size:.82rem; font-weight:600; color:var(--ink-soft); background:var(--white); border:1px solid var(--line-soft); padding:.5rem .9rem; border-radius:999px; }

/* =========================================================
   FAQ
   ========================================================= */
.faq{ background:var(--cream); }
.faq-wrap{ max-width:820px; }
.faq-list{ margin-top:clamp(20px,3vw,36px); border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.3rem 0; font-family:var(--serif); font-size:clamp(1.1rem,2vw,1.4rem); font-weight:500;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-ico{ position:relative; flex:0 0 auto; width:26px; height:26px; }
.faq-ico::before,.faq-ico::after{ content:""; position:absolute; left:50%; top:50%; background:var(--camel-deep); border-radius:2px; transition:transform .35s var(--ease); }
.faq-ico::before{ width:14px; height:2.2px; transform:translate(-50%,-50%); }
.faq-ico::after{ width:2.2px; height:14px; transform:translate(-50%,-50%); }
.faq-item[open] .faq-ico::after{ transform:translate(-50%,-50%) scaleY(0); }
.faq-a{ overflow:hidden; }
.faq-a p{ margin:0; padding:0 0 1.4rem; color:var(--ink-soft); max-width:64ch; }
.faq-a a{ color:var(--terra-deep); text-decoration:underline; }

/* =========================================================
   FINAL CTA
   ========================================================= */
.final-cta{ background:var(--cream); }
.final-card{
  position:relative; overflow:hidden; text-align:center;
  background:linear-gradient(165deg, var(--cream-2), var(--cream-3));
  color:var(--ink); border:1px solid var(--camel);
  border-radius:var(--r-xl); padding:clamp(48px,7vw,96px) clamp(28px,5vw,72px);
  box-shadow:var(--shadow-md);
}
.blob-c{ position:absolute; width:60%; height:120%; right:-15%; top:-30%; border-radius:50%;
  background:radial-gradient(circle, rgba(192,86,47,.18), transparent 65%); filter:blur(40px); pointer-events:none; }
.final-card h2{ position:relative; font-size:clamp(2rem,5vw,3.6rem); max-width:16ch; margin-inline:auto; }
.final-card p{ position:relative; color:var(--ink-soft); max-width:46ch; margin:1.2rem auto 2rem; }
.final-card .btn-lg{ position:relative; }
.final-fine{ position:relative; font-size:.85rem !important; color:var(--ink-faint) !important; margin-top:1.2rem !important; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:var(--cream-2); color:var(--ink); padding-block:clamp(36px,5vw,56px); border-top:1px solid var(--line); }
.footer-inner{ display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between; }
.footer-brand{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--serif); font-size:1.1rem; }
.footer-logo{ height:94px; width:auto; }
.footer-wordmark{ display:none; line-height:1.15; }
.footer-wordmark small{ display:block; font-family:var(--sans); font-size:.62rem; letter-spacing:.34em; text-transform:uppercase; color:var(--camel-deep); margin-bottom:.15rem; }
.footer-wordmark em{ font-style:italic; color:var(--camel-deep); font-weight:400; }
.footer-mail{ margin:0; }
.footer-mail a{
  font-size:.85rem; color:var(--ink-faint); font-weight:500;
  text-decoration:underline; text-underline-offset:4px;
  text-decoration-color:rgba(26,23,18,.22); text-decoration-thickness:1px;
  transition:color .3s, text-decoration-color .3s;
}
.footer-mail a:hover{ color:var(--ink); text-decoration-color:var(--camel-deep); }
.footer-copy{ width:100%; font-size:.8rem; color:var(--ink-faint); margin:0; }

/* =========================================================
   STICKY MOBILE CTA
   ========================================================= */
.sticky-cta{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:1100;
  display:none; align-items:center; justify-content:space-between; gap:1rem;
  background:var(--white); border:1px solid var(--line); border-radius:999px;
  padding:.5rem .5rem .5rem 1.3rem; box-shadow:var(--shadow-lg);
  transform:translateY(160%); transition:transform .5s var(--ease);
}
.sticky-cta.show{ transform:translateY(0); }
.sticky-cta-info{ display:flex; flex-direction:column; line-height:1.2; }
.sticky-cta-price{ font-family:var(--serif); font-size:1.2rem; font-weight:600; }
.sticky-cta-price em{ font-family:var(--sans); font-size:.7rem; font-style:normal; color:var(--camel-deep); font-weight:600; text-transform:uppercase; letter-spacing:.08em; }
.sticky-cta-date{ font-size:.72rem; color:var(--ink-faint); }
.sticky-cta .btn{ padding:.75rem 1.3rem; }

/* =========================================================
   MOTION — reveal base states (JS toggles .is-in)
   ========================================================= */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:.09s; }
[data-reveal][data-delay="2"]{ transition-delay:.18s; }
[data-reveal][data-delay="3"]{ transition-delay:.27s; }

/* word/line reveal for hero + split titles */
.line > span, .split-title .w{ display:inline-block; transform:translateY(110%); opacity:0; transition:transform .9s var(--ease-out), opacity .9s var(--ease-out); }
.split-title .w{ transform:translateY(105%); }
.hero-title .line > span{ will-change:transform; }
.is-in .line > span, .split-title.is-in .w{ transform:translateY(0); opacity:1; }
.split-title .w{ padding-bottom:.04em; } /* avoid descender clip */

/* module cards entrance (staggered by JS via --i) */
.module-card{ opacity:0; translate:64px 0; transition:opacity .8s var(--ease-out), translate .8s var(--ease-out); transition-delay:calc(var(--i,0)*.08s); }
.module-card.is-in{ opacity:1; translate:0 0; }

/* count + tilt helpers */
[data-tilt]{ transition:transform .4s var(--ease); }

@media (prefers-reduced-motion: reduce){
  [data-reveal], .line > span, .split-title .w, .module-card, .hero-mark{ opacity:1 !important; transform:none !important; translate:none !important; clip-path:none !important; transition:none !important; animation:none !important; }
  .hscroll-hint{ animation:none !important; }
  .marquee-track, .testi-track, .float, .eyebrow .dot, .scroll-cue span, .next-cue span{ animation:none !important; }
  .check-row{ opacity:1 !important; translate:none !important; transition:none !important; }
  .cbox{ background:var(--ink) !important; transition:none !important; }
  .check-final .cbox{ background:var(--terra) !important; }
  .tick{ stroke-dashoffset:0 !important; transition:none !important; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:960px){
  .hero{ padding-top:clamp(24px,4vh,40px); } /* no header here — don't waste the top */
  .hero-grid{ grid-template-columns:1fr; gap:40px; }
  .hero-title{ font-size:clamp(2.1rem,6.2vw,3.4rem); } /* stacked: full width available */
  .hero-media{ max-width:420px; margin-inline:auto; }
  .hero-facts{ margin-inline:auto; }
  .pain-grid{ grid-template-columns:1fr; }
  .foryou-grid{ grid-template-columns:1fr; }
  .foryou-head{ position:static; }
  .bonus-grid{ grid-template-columns:1fr; }
  .ticket{ grid-template-columns:1fr; }
  /* stacked ticket: perforation runs horizontally along the top of the stub
     (strip overlaps 11px into the white part, mirroring the desktop left edge) */
  .ticket-stub::before{
    left:0; right:0; top:-11px; bottom:auto; width:auto; height:22px;
    background:radial-gradient(circle at top, transparent 0 11px, var(--terra) 11px);
    background-size:30px 22px; background-position:center top; background-repeat:repeat-x;
    -webkit-mask:none; mask:none;
  }
  .about-grid{ grid-template-columns:1fr; }
  .about-media{ max-width:420px; margin-inline:auto; }
}
@media (max-width:600px){
  .header-cta{ display:none; }
  .sticky-cta{ display:flex; }
  .scroll-cue{ display:none; }
  .hero-note{ right:auto; left:50%; transform:translateX(-50%); bottom:-14px; }
  .countdown-clock{ gap:.5rem; }
  .cd{ min-width:52px; padding:.5rem .6rem; }
}