:root {
  --ink: #17171C;
  --ink-soft: #202027;
  --paper: #FBF9F9;
  --line-dark: rgba(251, 249, 249, 0.17);
  --line-light: rgba(23, 23, 28, 0.16);
  --muted-dark: #888888;
  --muted-light: #444448;
  --serif: "Times New Roman", Georgia, serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --radius: 2px;
  --shell: min(1160px, calc(100vw - 48px));
  --spot-x: 50%;
  --spot-y: 50%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  font-family: var(--sans);
  background: var(--ink);
  color: var(--paper);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  opacity: .035;
  pointer-events: none;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}
img, svg { display: block; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
::selection { color: var(--ink); background: var(--paper); }

.shell { width: var(--shell); margin-inline: auto; }
.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;
}
.skip-link {
  position: fixed; left: 18px; top: 18px; z-index: 1001;
  padding: 10px 14px; color: var(--ink); background: var(--paper);
  transform: translateY(-160%); transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }

.reading-progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 900; }
.reading-progress span { display: block; height: 100%; width: 100%; background: var(--paper); transform: scaleX(0); transform-origin: left; }
.brand-stamp {
  position: fixed; z-index: 100; top: 28px; left: 32px;
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .16em;
  pointer-events: none; mix-blend-mode: difference; color: white;
}
.brand-stamp img { width: 18px; height: 18px; }
.kicker {
  margin: 0 0 22px; color: var(--muted-dark); font-size: 11px;
  font-weight: 600; letter-spacing: .17em; text-transform: uppercase;
}

.hero {
  position: relative; min-height: 100svh; display: grid; align-items: center;
  overflow: clip; isolation: isolate; background: var(--ink);
}
.hero-grid, .visibility-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 58% 42%, black 0, transparent 68%);
}
.hero-inner {
  position: relative; z-index: 2; padding-block: 120px 80px;
  opacity: calc(1 - var(--hero-exit, 0));
  filter: blur(calc(var(--hero-exit, 0) * 7px));
  transform: scale(calc(1 - var(--hero-exit, 0) * .06));
  will-change: transform, opacity, filter;
}
.hero-title {
  margin: 0; max-width: 1050px; font-size: clamp(43px, 7.6vw, 112px);
  line-height: .96; letter-spacing: -.065em; font-weight: 500;
}
.hero-line { display: block; overflow: hidden; padding-bottom: .08em; }
.hero-line { opacity: 0; transform: translateY(1em); animation: heroLine 1.05s var(--ease-out) forwards; }
.hero-line:nth-child(1) { animation-delay: .18s; }
.hero-line:nth-child(2) { animation-delay: .32s; }
.hero-line:nth-child(3) { animation-delay: .46s; }
.word { font-family: var(--serif); font-style: italic; font-weight: 700; letter-spacing: -.05em; }
.word-result { position: relative; color: var(--paper); }
.word-result::after {
  content: ""; position: absolute; inset: auto 0 -.04em; height: .08em;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  animation: lineDraw .8s var(--ease-out) 1.25s forwards;
}
.word-problem { display: inline-block; }
.scroll-cue { position: absolute; z-index: 3; bottom: 28px; left: 50%; width: 1px; height: 60px; background: rgba(255,255,255,.15); overflow: hidden; }
.scroll-cue span { display: block; width: 100%; height: 28px; background: var(--paper); animation: scrollCue 2s ease-in-out infinite; }

.certainty { position: relative; min-height: 230svh; background: var(--ink); }
.certainty-stage { position: sticky; top: 0; min-height: 100svh; display: grid; align-items: center; overflow: clip; }
.certainty-copy { position: relative; z-index: 4; }
.certainty-copy h2 {
  margin: 0; max-width: 1000px; font-size: clamp(42px, 7vw, 98px); line-height: 1.01;
  letter-spacing: -.055em; font-weight: 400;
}
.noise-word { font-family: var(--serif); font-style: italic; font-weight: 700; color: var(--paper); }
.certainty-sequence { display: block; margin-top: .35em; font-family: var(--serif); font-style: italic; }
.certainty-sequence span { display: block; opacity: 0; transform: translateY(22px); will-change: opacity, transform; }
.certainty-sequence span:nth-child(2) { margin-left: 6vw; }
.certainty-sequence span:nth-child(3) { margin-left: 14vw; }
.certainty-sequence span:nth-child(4) { margin-left: 22vw; }

.proof-intro { position: relative; min-height: 360svh; background: var(--ink); }
.proof-stage { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; justify-content: center; overflow: clip; }
.proof-slot { display: flex; flex-direction: column; align-items: center; width: var(--shell); }
.proof-item {
  display: grid; grid-template-rows: 0fr; width: 100%; justify-items: center;
  opacity: 0; transform: translateY(18px);
  transition: grid-template-rows .7s var(--ease-out), opacity .7s var(--ease-out), transform .7s var(--ease-out), margin .7s var(--ease-out), filter .6s var(--ease-out);
}
.proof-item-inner { display: flex; flex-direction: column; align-items: center; text-align: center; overflow: hidden; min-height: 0; }
.proof-item.is-active { grid-template-rows: 1fr; opacity: 1; transform: translateY(0); margin-bottom: 28px; }
.proof-item.is-passed { grid-template-rows: 1fr; opacity: .4; transform: translateY(0); filter: blur(.5px); margin-bottom: 16px; }
.proof-value { font-size: clamp(58px, 10vw, 140px); line-height: .84; letter-spacing: -.075em; font-weight: 500; transition: font-size .6s var(--ease-out); }
.proof-item.is-passed .proof-value { font-size: clamp(28px, 4vw, 52px); }
.proof-item p { margin: 14px 0 0; font-size: clamp(18px, 2vw, 29px); color: var(--muted-dark); transition: font-size .6s var(--ease-out); }
.proof-item.is-passed p { font-size: 13px; margin-top: 6px; }

.proof-unlock { display: flex; justify-content: center; padding: 40px 0 110px; background: var(--ink); }
.unlock-wrap { display: flex; justify-content: center; align-items: center; }
/* slide-to-unlock, iPhone-call-style — the thumb only moves via drag (JS sets --slide-x
   directly, no CSS transition fighting the pointermove updates); Enter/Space is the
   keyboard-accessible fallback since a drag gesture has no keyboard equivalent */
.slide-unlock {
  position: relative; display: flex; align-items: center; overflow: hidden;
  width: min(460px, 88vw); height: 88px; padding: 7px;
  border: 1px solid var(--paper);
  cursor: grab; user-select: none; touch-action: pan-y; -webkit-tap-highlight-color: transparent;
}
.slide-unlock:active { cursor: grabbing; }
/* starts clear of the thumb's resting footprint so the full label is always readable at
   rest — the clip-path that hides it as the thumb slides over it is JS-driven, see script.js */
.slide-unlock-label {
  position: absolute; left: 86px; right: 14px; text-align: center;
  color: var(--paper); font-size: 15px; font-weight: 600; letter-spacing: .02em;
  pointer-events: none;
}
.slide-unlock-thumb {
  position: relative; z-index: 2; display: grid; place-items: center; flex-shrink: 0;
  width: 72px; height: 72px; background: var(--paper); color: var(--ink);
}
.slide-unlock-thumb svg {
  position: absolute; width: 24px; fill: none; stroke: currentColor; stroke-width: 1.5;
  transition: opacity .25s ease, transform .25s ease;
}
.icon-check { opacity: 0; transform: scale(.5); }
/* clean, subtle confirmation once the drag completes — just the icon swap, no glow */
.slide-unlock.is-confirmed .icon-arrow { opacity: 0; transform: scale(.5); }
.slide-unlock.is-confirmed .icon-check { opacity: 1; transform: scale(1); }

/* plain display toggle — no numeric height cap to outgrow on tall screens, and no competing
   opacity crossfade to muddy the timing of the iris reveal that plays on .visibility-section */
.js .story-shell.is-locked { display: none; }
.story-shell { display: block; }
/* the iris reveal plays on the pinned stage only (not the whole, now much taller, lock
   wrapper) — circle()'s percentage radius is relative to the element's own diagonal, so
   animating it on a very tall element made the on-screen sweep complete almost instantly */
.visibility-stage.is-opening { animation: shellOpen 1s var(--ease-out) both; }

.visibility-section { position: relative; color: var(--ink); background: var(--paper); }
/* the section pins here while "visibilidade" reveals like a flashlight sweeping across it —
   scroll only continues normally once the word is fully lit up */
.visibility-lock { position: relative; min-height: 230svh; overflow: clip; }
.visibility-stage { position: sticky; top: 0; min-height: 100svh; display: grid; align-items: center; overflow: clip; }
.visibility-grid {
  background-image: linear-gradient(rgba(20,20,25,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(20,20,25,.045) 1px, transparent 1px);
  mask-image: radial-gradient(circle at var(--spot-x) var(--spot-y), black 0, transparent 55%);
}
.visibility-inner { position: relative; z-index: 2; padding: 120px 0; }
.visibility-section .kicker { color: var(--muted-light); }
.visibility-title { margin: 0; font-size: clamp(36px, 6vw, 82px); line-height: 1.02; letter-spacing: -.055em; font-weight: 500; }
.visibility-title span { display: block; }
.visibility-turn { margin-top: 110px; max-width: 1000px; }
.visibility-turn p { margin: 0; color: var(--muted-light); font-size: clamp(22px, 3.6vw, 52px); line-height: 1.15; }
.visibility-outro { position: relative; z-index: 2; padding: 60px 0 150px; }
.spotlight-word {
  position: relative; display: block; width: max-content; max-width: 100%; margin: .08em 0;
  font-family: var(--serif); font-style: italic; font-weight: 700; font-size: clamp(70px, 14vw, 190px); line-height: .85;
  letter-spacing: -.075em; color: #2e2e35;
  opacity: .04;
  transition: opacity .1s linear;
}
.spotlight-word::after {
  content: ""; position: absolute; inset: -20%; pointer-events: none;
  background: radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(255,255,255,.95) 0 13%, transparent 38%);
  mix-blend-mode: screen; opacity: .35;
}
.problem-body { max-width: 680px; margin: 0; color: var(--muted-light); font-size: clamp(18px, 2.1vw, 27px); line-height: 1.5; }

.loss-section { position: relative; min-height: 90svh; display: grid; align-items: center; overflow: hidden; background: var(--ink); }
.loss-inner { position: relative; z-index: 2; padding: 130px 0; }
.loss-inner h2 { margin: 0; max-width: 1000px; font-size: clamp(46px, 7.3vw, 103px); line-height: .99; letter-spacing: -.06em; font-weight: 400; }
/* flicker lives on the INNER span, .loss-word's opacity is JS-driven on the OUTER span —
   a running CSS animation on a property always wins over an inline style on that same
   property, so keeping them on separate elements is what lets both effects coexist */
.loss-money, .loss-time { display: inline-block; font-family: var(--serif); font-style: italic; animation: flicker 4.8s linear infinite; }
.loss-type { display: inline; }
.loss-word { display: inline-block; opacity: 0; transform: translateY(16px); will-change: opacity, transform; }
.loss-outro { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.loss-outro.is-visible { opacity: 1; transform: translateY(0); }

/* background color is set directly by JS (see script.js) as a plain interpolated rgb() —
   both this and the mobile sticky header read from the exact same computed value every
   tick, so they can never visibly drift out of sync the way two separate CSS values could */
.empathy { position: relative; min-height: 250svh; padding: 140px 0; overflow: clip; background: var(--ink-soft); }
.empathy-layout { position: relative; z-index: 3; display: grid; grid-template-columns: .85fr 1.15fr; gap: 9vw; }
.empathy-sticky { position: sticky; top: 22vh; align-self: start; }
.empathy-sticky h2 { margin: 0; max-width: 500px; font-size: clamp(38px, 5vw, 72px); line-height: 1.02; letter-spacing: -.05em; font-weight: 500; }
.empathy-sticky em { display: block; margin-top: .18em; font-family: var(--serif); font-weight: 700; }
.chapter-meter { width: 100%; max-width: 330px; height: 1px; margin-top: 50px; background: var(--line-dark); }
.chapter-meter-fill { display: block; height: 100%; background: var(--paper); transform: scaleX(0); transform-origin: left; }
.empathy-chapters { padding-top: 12vh; }
.chapter { min-height: 58vh; padding: 40px 0; border-top: 1px solid var(--line-dark); display: flex; align-items: center; }
.chapter p { margin: 0; max-width: 620px; font-size: clamp(26px, 3.2vw, 48px); line-height: 1.18; letter-spacing: -.035em; }
.empathy-data { position: absolute; inset: 10% 0 auto 45%; height: 75%; opacity: .12; pointer-events: none; }
.empathy-data span { position: absolute; display: block; width: 1px; background: linear-gradient(transparent, white, transparent); animation: dataDrop 7s linear infinite; }
.empathy-data span:nth-child(1) { left: 4%; height: 44%; top: 7%; }
.empathy-data span:nth-child(2) { left: 23%; height: 58%; top: 21%; animation-delay: -2s; }
.empathy-data span:nth-child(3) { left: 42%; height: 34%; top: 1%; animation-delay: -4s; }
.empathy-data span:nth-child(4) { left: 61%; height: 69%; top: 15%; animation-delay: -1s; }
.empathy-data span:nth-child(5) { left: 80%; height: 40%; top: 32%; animation-delay: -5s; }
.empathy-data span:nth-child(6) { left: 96%; height: 62%; top: 8%; animation-delay: -3s; }

.method { color: var(--ink); background: var(--paper); }
.method-intro { position: relative; min-height: 160svh; background: var(--paper); }
.method-header-pin { position: sticky; top: 0; min-height: 100svh; display: flex; align-items: center; }
.method-header h2 { margin: 0; max-width: 900px; font-size: clamp(42px, 6.7vw, 90px); line-height: .98; letter-spacing: -.06em; font-weight: 500; }
.method-arrow { display: inline-block; font-size: .62em; font-weight: 400; vertical-align: -.06em; }
.method-strike { position: relative; display: inline-block; }
.strike-line {
  position: absolute; left: 0; right: 0; top: 52%; height: 7px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
}
/* real grid columns, not absolute positioning — the bar-track and the steps are separate
   tracks that can never overlap, regardless of viewport size or content height */
.method-board { display: grid; grid-template-columns: 30px 1fr; align-items: stretch; gap: 34px; padding: 40px 0 170px; }
.method-path-track { position: relative; justify-self: center; width: 6px; background: var(--line-light); border-radius: 3px; overflow: hidden; }
.method-path { display: block; width: 100%; height: 100%; background: var(--ink); transform: scaleY(0); transform-origin: top; }
.method-steps { display: flex; flex-direction: column; min-width: 0; }
.method-step { min-height: 46vh; padding: 20px 0 80px; }
.method-step h3 { margin: 0; max-width: 850px; font-size: clamp(30px, 4.3vw, 62px); line-height: 1.06; letter-spacing: -.045em; font-weight: 500; }
.method-step p:last-child { max-width: 650px; margin: 28px 0 0; color: var(--muted-light); font-size: 18px; line-height: 1.65; }

.testimonials { background: var(--ink); }
.testimonials-top { padding: 150px 0 0; }
.testimonials-connector {
  width: 1px; height: 64px; margin: 0 0 40px 46px; background: var(--paper);
  transform: scaleY(0); transform-origin: top; transition: transform .7s var(--ease-out);
}
.testimonials-connector.is-visible { transform: scaleY(1); }
.testimonials-heading { display: grid; grid-template-columns: 1fr 330px; gap: 80px; align-items: end; }
.testimonials-heading h2 { margin: 0; max-width: 820px; font-size: clamp(40px, 5.8vw, 79px); line-height: 1; letter-spacing: -.055em; font-weight: 500; }
.testimonials-carousel { position: relative; min-height: 220svh; }
.carousel-stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: clip; }
.carousel-track { position: relative; width: min(680px, 88vw); height: 480px; }
.carousel-item {
  position: absolute; inset: 0; z-index: 1; border: 1px solid var(--line-dark); padding: clamp(28px, 4vw, 56px);
  display: flex; flex-direction: column; justify-content: space-between; background: var(--ink);
  opacity: 0; transform: perspective(900px) translateX(110px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out), border-color .25s;
  pointer-events: none; will-change: transform, opacity;
}
.carousel-item.is-active {
  z-index: 2; opacity: 1; pointer-events: auto;
  transform: perspective(900px) translateX(0) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
}
.carousel-item.is-prev { transform: perspective(900px) translateX(-110px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); }
.carousel-item:hover { border-color: rgba(255,255,255,.4); }
.placeholder-label { margin: 0; color: var(--muted-dark); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.testimonial-card blockquote { margin: 30px 0; font-family: var(--serif); font-size: clamp(24px, 3vw, 38px); font-style: italic; line-height: 1.2; }
.testimonial-card footer { display: flex; align-items: center; gap: 15px; }
.avatar-placeholder { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--line-dark); border-radius: 50%; color: var(--muted-dark); flex-shrink: 0; }
.testimonial-card footer div { display: grid; gap: 5px; }
.testimonial-card footer strong { font-size: 13px; }
.testimonial-card footer small { color: var(--muted-dark); }
.carousel-dots { display: flex; gap: 10px; margin-top: 36px; }
.carousel-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--line-dark); transition: background .3s; }
.carousel-dots span.is-active { background: var(--paper); }

.decision { position: relative; z-index: 0; overflow: hidden; color: var(--ink); background: var(--paper); transition: background 1.1s ease, color 1.1s ease; }
.decision.is-flipped { background: var(--ink); color: var(--paper); }
/* a soft light drifting slowly and irregularly across the dark background, like a flashlight
   sweeping the room — independent of the buttons themselves. explicit z-index on both layers
   (0 for the light, 1 for the real content) keeps this scoped and unambiguous. */
/* two independent, gentle motions layered on top of each other: the outer element drifts on
   its own slow, wide loop (kept close to the visible area so it never fully wanders off),
   while the inner element carries a light, laggy nudge toward the cursor — like starlight,
   not a spotlight. Nested elements so both transforms compose without fighting each other. */
.decision-flashlight {
  position: absolute; z-index: 0; top: 15%; left: 15%; width: 50vw; aspect-ratio: 1;
  opacity: 0; pointer-events: none;
}
.decision.is-flipped .decision-flashlight { opacity: 1; animation: flashlightDrift 40s ease-in-out infinite; }
.decision-flashlight-inner {
  width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .05), transparent 70%);
  transform: translate(var(--flash-mx, 0px), var(--flash-my, 0px));
  transition: transform 1.4s var(--ease-out);
}
@keyframes flashlightDrift {
  0% { transform: translate(0%, 0%); }
  22% { transform: translate(14%, -10%); }
  46% { transform: translate(-8%, 12%); }
  70% { transform: translate(10%, 9%); }
  88% { transform: translate(-6%, -6%); }
  100% { transform: translate(0%, 0%); }
}
.decision-intro { position: relative; z-index: 1; padding: 150px 0 80px; }
.decision-intro h2 { margin: 0; max-width: 940px; font-size: clamp(50px, 7.8vw, 108px); line-height: .93; letter-spacing: -.065em; font-weight: 500; }
/* two plain buttons, not cards — "Seguir no escuro" reads as muted/inert, "Crescer com a
   gente" is a plain solid button once flipped. No hover/active states at all, by design. */
.decision-choices { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 26px; padding: 70px 0 150px; }
.decision-choice {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 22px 40px; border: 1px solid var(--line-light); color: var(--muted-dark);
  font-size: clamp(16px, 1.6vw, 19px); font-weight: 600; letter-spacing: -.005em;
  text-decoration: none; cursor: default;
  transition: border-color 1.1s ease;
}
.decision.is-flipped .decision-choice { border-color: var(--line-dark); }
.decision-choice-dark { opacity: .5; }
.decision-choice-light {
  color: var(--ink); cursor: pointer;
  transition: border-color 1.1s ease, color 1.1s ease, background 1.1s ease;
}
.decision.is-flipped .decision-choice-light { color: var(--ink); background: var(--paper); border-color: var(--paper); }

.site-footer { padding: 32px 0; border-top: 1px solid var(--line-dark); background: var(--ink); }
.footer-inner { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 40px; color: var(--muted-dark); font-size: 11px; }
.footer-inner > div { display: flex; align-items: center; gap: 10px; color: var(--paper); font-weight: 700; letter-spacing: .12em; }
.footer-inner img { width: 18px; height: 18px; }
.footer-inner p { margin: 0; }
.footer-inner a { text-decoration: none; }
.footer-inner a:hover { color: var(--paper); }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .85s var(--ease-out), transform .85s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@keyframes heroLine { to { opacity: 1; transform: translateY(0); } }
@keyframes lineDraw { to { transform: scaleX(1); } }
@keyframes scrollCue { 0% { transform: translateY(-120%); } 50%, 100% { transform: translateY(230%); } }
@keyframes shellOpen {
  from { clip-path: circle(0% at var(--reveal-x, 50%) 0%); }
  to { clip-path: circle(150% at var(--reveal-x, 50%) 0%); }
}
@keyframes flicker { 0%, 88%, 100% { opacity: 1; } 90% { opacity: .25; } 92% { opacity: .8; } 94% { opacity: .35; } }
@keyframes dataDrop { 0% { transform: translateY(-12%); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(18%); opacity: 0; } }

@media (max-width: 900px) {
  :root { --shell: min(100% - 36px, 760px); }
  .brand-stamp { left: 20px; top: 20px; }
  .hero-title { font-size: clamp(42px, 11vw, 76px); }
  .certainty { min-height: 190svh; }
  .certainty-copy h2 { font-size: clamp(42px, 9.5vw, 72px); }
  .proof-value { font-size: clamp(72px, 18vw, 126px); }
  .empathy-layout { grid-template-columns: 1fr; gap: 30px; }
  /* on a single mobile column the sticky header sits directly over the scrolling chapters —
     it needs an opaque background or their text shows through. JS keeps this in sync with
     .empathy's own background every tick (see script.js), so it never looks like a mismatched
     solid block once the section starts transitioning toward the method section's light bg. */
  .empathy-sticky { top: 8vh; padding: 14px 0; margin-top: -14px; background: var(--ink-soft); }
  /* no forced svh height here — that left a dead gray gap once the (much shorter) real
     content ran out but the artificial height hadn't. let the chapters set the height. */
  .empathy { min-height: auto; }
  .empathy-chapters { padding-top: 40px; padding-bottom: 60px; }
  /* opacity is JS-driven per scroll tick here (see script.js) — the inherited .reveal
     transition would fight those rapid updates and make the fade lag behind the scroll */
  .chapter { min-height: auto; padding: 55px 0 90px; transition: transform .85s var(--ease-out); }
  .empathy-data { display: none; }
  .testimonials-heading { grid-template-columns: 1fr; gap: 28px; }
  .decision-choices { flex-direction: column; align-items: stretch; gap: 16px; }
  .decision-choice { width: 100%; }
  /* bigger and a touch brighter here — the section is proportionally taller once the two
     buttons stack, so the same light reads as smaller and fainter on a mobile screen */
  .decision-flashlight { top: 6%; left: -15%; width: 85vw; }
  .decision-flashlight-inner { background: radial-gradient(circle, rgba(255, 255, 255, .09), transparent 70%); }
  .footer-inner { grid-template-columns: 1fr; gap: 15px; }
}

@media (max-width: 600px) {
  :root { --shell: calc(100vw - 32px); }
  .hero-grid, .visibility-grid { background-size: 44px 44px; }
  .hero-inner { padding-block: 110px 70px; }
  .hero-title { font-size: clamp(40px, 12.8vw, 59px); line-height: 1.02; }
  .hero-line { overflow: visible; }
  .hero-note { margin-top: 36px; max-width: 280px; }
  .certainty { min-height: 130svh; }
  .certainty-copy h2 { font-size: clamp(38px, 11.2vw, 54px); }
  .certainty-sequence span:nth-child(2) { margin-left: 3vw; }
  .certainty-sequence span:nth-child(3) { margin-left: 7vw; }
  .certainty-sequence span:nth-child(4) { margin-left: 11vw; }
  .proof-intro { min-height: 300svh; }
  .proof-value { font-size: clamp(66px, 22vw, 94px); }
  .proof-item p { font-size: 18px; }
  .proof-unlock { padding: 30px 0 80px; }
  .slide-unlock { width: 100%; height: 80px; }
  .slide-unlock-thumb { width: 64px; height: 64px; }
  .slide-unlock-label { left: 78px; font-size: 14px; }
  .visibility-inner { padding: 100px 0; }
  .visibility-lock { min-height: 170svh; }
  .visibility-title { font-size: clamp(38px, 10vw, 52px); }
  .visibility-turn { margin-top: 78px; }
  .spotlight-word { font-size: clamp(68px, 23vw, 110px); }
  .visibility-outro { padding: 40px 0 100px; }
  .problem-body { font-size: 19px; }
  .loss-inner { padding: 100px 0 150px; }
  .loss-inner h2 { font-size: clamp(43px, 12vw, 62px); }
  .empathy { padding: 100px 0; }
  .empathy-sticky h2 { font-size: 44px; }
  .chapter p { font-size: clamp(26px, 8.7vw, 38px); }
  .method-intro { min-height: 90svh; }
  .method-board { grid-template-columns: 20px 1fr; gap: 20px; padding: 30px 0 120px; }
  .method-step { min-height: auto; padding-bottom: 100px; }
  .method-step h3 { font-size: 32px; }
  .method-step p:last-child { font-size: 16px; }
  .testimonials-top { padding: 100px 0 0; }
  .testimonials-heading h2 { font-size: 43px; }
  .testimonials-carousel { min-height: 190svh; }
  .carousel-track { height: 560px; }
  .testimonial-card blockquote { font-size: 26px; }
  .decision-intro { padding: 105px 0 60px; }
  .decision-intro h2 { font-size: 52px; }
  .decision-choice { padding: 20px 26px; }
  .site-footer { padding-bottom: 45px; }
}

@media (pointer: coarse) {
  .spotlight-word::after { background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.85), transparent 48%); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .certainty-sequence span { opacity: 1; transform: none; }
  .testimonials-connector { transform: scaleY(1); }
  .hero-inner { opacity: 1; filter: none; transform: none; }
  .carousel-item { transform: none !important; }
  .carousel-item.is-active { opacity: 1; }
  .proof-item.is-passed { filter: none; opacity: .5; transform: none; }
  .spotlight-word { opacity: 1; }
  .loss-word { opacity: 1; transform: none; }
  .loss-outro { opacity: 1; transform: none; }
  .strike-line { transform: scaleX(1); }
}