/*
Theme Name: Shine Rose — HaMahapach
Theme URI: https://webivize.com
Author: Webivize
Author URI: https://webivize.com
Description: Custom RTL landing-page theme for Shine Rose's "HaMahapach" writing-based transformation process. Ported 1:1 from the React prototype; content is editable via the landing editor on the front page.
Version: 1.0.0
Requires PHP: 8.0
Text Domain: shine-theme
*/

/* =====================================================
   Shine Rose - "HaMahapach" landing page
   Restrained modern gold · dark theme lock · RTL Hebrew
   Heebo only (no serif: client dislikes serif Hebrew display)
   Written to port 1:1 to WordPress/PHP: plain CSS,
   logical properties, IntersectionObserver-only JS motion.
   ===================================================== */

/* ---------- Self-hosted fonts (public/fonts) ---------- */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/heebo-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/heebo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: dark;

  /* surfaces: near-monochrome, one-step contrast only */
  --bg: #0b0a08;
  --bg-elevated: #100f0c;
  --bg-panel: #14120e;
  --bg-soft: #19160f;
  --bg-media: #070604;
  --field: #12100d;

  /* text */
  --text: #f4f0e7;
  --text-muted: #c9c0b1;
  --text-subtle: #918675;

  /* gold family (locked brand) */
  --gold-hi: #f6e7b4;
  --gold: #e3c268;
  --gold-mid: #c79b45;
  --gold-deep: #a97f2f;

  /* lines */
  --line: #2c2417;
  --line-strong: #60471f;

  /* semantic */
  --error: #d98c74;
  --whatsapp: #25d366;

  /* shape lock: media 18 / card 16 / control 10 / interactive pill */
  --radius-media: 18px;
  --radius-card: 16px;
  --radius-control: 10px;
  --radius-pill: 999px;

  /* z-index scale */
  --z-lightbox: 1000;
  --z-sticky: 60;
  --z-whatsapp: 50;
  --z-skip: 1100;

  --sans: 'Heebo', 'Assistant', 'Segoe UI', Arial, sans-serif;

  --cta-ink: #1b1206;
}

/* ---------- Reset / base ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* clip (not hidden) so we tame horizontal overflow WITHOUT turning html/body
     into a scroll container - hidden forces overflow-y:auto, which silently
     breaks position:sticky (the about portrait) for the whole page */
  overflow-x: clip;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.75;
  text-align: start;
  overflow-x: clip; /* see html above - keeps position:sticky alive */
}

#root {
  overflow-x: clip;
}

img,
video,
iframe {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

::selection {
  background: rgba(227, 194, 104, 0.85);
  color: #1b1206;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.container {
  width: min(1240px, 92vw);
  margin-inline: auto;
}

.container--narrow {
  width: min(760px, 92vw);
}

/* ---------- Skip link ---------- */
.skip-link {
  position: fixed;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  z-index: var(--z-skip);
  padding: 0.6rem 1.4rem;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: var(--cta-ink);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-300%);
}

.skip-link:focus-visible {
  transform: none;
}

/* ---------- Gold gradient text: hero H1 + method quote ONLY ---------- */
.gold-text {
  background: linear-gradient(180deg, var(--gold-hi) 10%, var(--gold) 50%, var(--gold-deep) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------- Scroll reveal (fade + small rise only) ---------- */
.reveal {
  opacity: 1;
  transform: none;
}

.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.js .reveal.is-shown {
  opacity: 1;
  transform: none;
}

/* ---------- Section rhythm ---------- */
.section {
  padding-block: clamp(4.5rem, 9vw, 7.5rem);
}

/* sections separate by background tone, never by hairlines.
   Depth comes from light, not texture: a halo at the head, side washes,
   a pool at the foot, and a vertical tonal flow instead of one flat slab */
.section--band {
  background: radial-gradient(ellipse 46% 28% at 50% 0%, rgba(227, 194, 104, 0.07), transparent 68%),
    radial-gradient(ellipse 30% 48% at 0% 26%, rgba(180, 130, 52, 0.09), transparent 72%),
    radial-gradient(ellipse 30% 48% at 100% 70%, rgba(180, 130, 52, 0.09), transparent 72%),
    radial-gradient(ellipse 40% 22% at 50% 100%, rgba(227, 194, 104, 0.06), transparent 70%),
    linear-gradient(180deg, #1a1610 0%, #0e0c08 48%, #16120b 100%);
}

.section-head {
  margin-block-end: clamp(1.8rem, 4vw, 2.8rem);
}

.section-head--center {
  text-align: center;
}

.section__kicker {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gold);
  margin-block-end: 0.5rem;
}

.section__title {
  font-weight: 800;
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.section__cta {
  margin-block-start: clamp(2.4rem, 5vw, 3.4rem);
}

/* ---------- Prose ---------- */
.prose p {
  margin-block-end: 0.45rem;
  max-width: 62ch;
}

/* emphasized block: gold inline-start rule, no card */
.emphasis-block {
  margin-block: 1.8rem;
  padding-inline-start: 1.4rem;
  border-inline-start: 3px solid var(--gold-deep);
}

.emphasis-block p {
  font-weight: 700;
  font-size: 1.12em;
  line-height: 1.7;
  color: var(--gold);
  margin-block: 0.3rem;
  max-width: 46ch;
}

/* the punch line steps up for emphasis (client 2026-07-07) */
.emphasis-block .emphasis-block__big {
  font-size: 1.42em;
  line-height: 1.45;
}

/* gold underline emphasis inside body copy (client-requested highlights) */
.u-underline-gold {
  text-decoration: underline;
  text-decoration-color: rgba(227, 194, 104, 0.75);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.24em;
}

/* ---------- Hero: centered VSL stage, portrait presenting her own video ---------- */
.hero {
  position: relative;
  padding-block-start: clamp(3rem, 7vh, 5.5rem);
  overflow: hidden;
  text-align: center;
  /* gold light washes fill the side voids without competing with content */
  background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(227, 194, 104, 0.1), transparent 65%),
    radial-gradient(ellipse 24% 42% at 0% 52%, rgba(227, 194, 104, 0.07), transparent 72%),
    radial-gradient(ellipse 24% 42% at 100% 52%, rgba(227, 194, 104, 0.07), transparent 72%),
    var(--bg);
}

.hero__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* the brand mark opens the page: gold pen-calligraphy logo, quiet glow so it
   reads as foil on the dark stage */
.hero__brand {
  margin-block-end: clamp(0.6rem, 2vw, 1.4rem);
}

.hero__brand img {
  display: block;
  inline-size: clamp(190px, 26vw, 320px);
  block-size: auto;
  margin-inline: auto;
  filter: drop-shadow(0 0 26px rgba(227, 194, 104, 0.22));
}

.hero__title {
  font-weight: 900;
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.hero__subtitle {
  margin-block-start: 0.8rem;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  color: var(--text-muted);
  max-width: 62ch;
}

.hero__watch-block {
  margin-block-start: clamp(1rem, 2.5vh, 1.7rem);
}

.hero__watch {
  font-size: clamp(1.1rem, 2.4vw, 1.3rem);
  font-weight: 700;
  color: var(--gold);
}

.hero__watch-note {
  margin-block-start: 0.2rem;
  font-size: 0.9rem;
  color: var(--text-muted);
  max-width: 56ch;
}

/* the stage: centered frame, portrait in front of its inline-start edge */
.hero__stage {
  position: relative;
  margin-block-start: 1.1rem;
  width: min(760px, 100%);
  /* deep enough that the portrait's fade zone lands on dark, never on the frame */
  padding-block-end: clamp(3.5rem, 7vh, 4.5rem);
}

.hero__stage::before {
  /* one shared glow that binds portrait and frame together */
  content: '';
  position: absolute;
  inset: -6% -14% -10%;
  background: radial-gradient(ellipse 60% 52% at 50% 55%, rgba(227, 194, 104, 0.1), transparent 70%);
  pointer-events: none;
}

/* (the ::after arc ornament and the portrait cutout are gone - client 2026-07-07:
   the video is the only thing on the stage) */
.hero__frame-block {
  position: relative;
  z-index: 1;
}

/* hero pending poster: blurred dark ambiance, so the cutout portrait is
   the only face on the stage */
.hero .media-frame--pending img {
  object-position: 50% 20%;
  filter: saturate(0.4) brightness(0.5) blur(12px);
  transform: scale(1.12);
}

/* hero social proof: flanks the stage on wide screens, rides under the
   video on smaller ones */
.hero__stats {
  margin: 0;
}

.hero__stat {
  display: flex;
  flex-direction: column-reverse; /* value above its label, dt/dd order kept for AT */
  align-items: center;
  text-align: center;
}

.hero__stat-value {
  font-size: clamp(2.4rem, 3.2vw, 3.6rem);
  font-weight: 800;
  line-height: 1.05;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.hero__stat-label {
  margin-block-start: 0.45rem;
  font-size: 0.92rem;
  color: var(--text-muted);
  max-width: 17ch;
}

@media (min-width: 1440px) {
  .hero__stats {
    display: contents;
  }

  .hero__stat {
    position: absolute;
    z-index: 1;
    inset-block-start: 33%;
    width: max-content;
    max-width: 210px;
  }

  .hero__stat--start {
    inset-inline-start: calc(100% + clamp(8rem, 10vw, 11rem));
  }

  .hero__stat--end {
    inset-inline-end: calc(100% + clamp(8rem, 10vw, 11rem));
  }
}

@media (max-width: 1439.98px) {
  .hero__stats {
    display: flex;
    justify-content: center;
    gap: clamp(2.5rem, 8vw, 5rem);
    margin-block-start: 1.6rem;
  }
}

.hero__cta {
  margin-block-start: clamp(0.9rem, 2vh, 1.5rem);
  padding-block-end: clamp(2.5rem, 6vh, 4rem);
}

.hero .cta {
  align-items: center;
}

.hero__sentinel {
  height: 1px;
}

/* ---------- Media frame (VSL + podcast facades) ---------- */
.media-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-media);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--bg-media);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

.media-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.media-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.media-frame__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 6, 4, 0.05) 40%, rgba(7, 6, 4, 0.6));
  pointer-events: none;
}

.media-frame__scrim--deep {
  background: radial-gradient(ellipse 90% 90% at 50% 30%, rgba(7, 6, 4, 0.35), rgba(7, 6, 4, 0.88));
}

.media-frame__play {
  position: absolute;
  /* direction-agnostic centering; playback icons do not mirror in RTL */
  inset-block-start: calc(50% - 32px);
  inset-inline-start: calc(50% - 32px);
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-pill);
  color: var(--cta-ink);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-deep));
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), 0 0 26px rgba(227, 194, 104, 0.3);
}

/* click-to-load facade is a real button */
.media-frame--facade {
  cursor: pointer;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
}

.media-frame--facade:hover img {
  transform: scale(1.035);
}

.media-frame--facade:hover .media-frame__play {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), 0 0 42px rgba(227, 194, 104, 0.45);
}

.media-frame--facade:active {
  transform: scale(0.995);
}

/* pending VSL: honest placeholder over a real portrait poster */
.media-frame--pending .media-frame__pending-body {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: 1rem 1.4rem 1.1rem;
}

.media-frame--pending .media-frame__play {
  /* raised so the seal never collides with the pending title/note */
  inset-block-start: calc(30% - 32px);
}

/* bare pending frames (no placeholder text) keep the seal dead-center */
.media-frame--bare .media-frame__play {
  inset-block-start: calc(50% - 32px);
}

@media (max-width: 700px) {
  .media-frame__play {
    width: 48px;
    height: 48px;
    inset-block-start: calc(50% - 24px);
    inset-inline-start: calc(50% - 24px);
  }

  .media-frame--pending .media-frame__play {
    inset-block-start: calc(26% - 24px);
  }

  .media-frame--bare .media-frame__play {
    inset-block-start: calc(50% - 24px);
  }

  .media-frame__note {
    font-size: 0.8rem;
  }
}

.media-frame__title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
}

.media-frame__note {
  margin-block-start: 0.15rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ---------- Testimonials: her clients' reels, right under the hero CTA.
   Renders only once the videos arrive (see content.testimonials). ---------- */
/* the rail: native RTL scroll-snap; edge cards dissolve via a mask so the
   row never ends on a hard cut */
.testi__rail {
  overflow-x: auto;
  /* CRITICAL for mobile: overflow-x:auto silently computes overflow-y to
     auto too, and the lifted cards create a few px of inner vertical
     overflow - vertical swipes then scroll INSIDE the rail (trapped by the
     mandatory snap) instead of scrolling the page */
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block: 26px 34px;
  margin-block-start: clamp(1rem, 2.5vw, 1.8rem);
  /* generous fade zones: cards dissolve well before the page edge */
  -webkit-mask-image: linear-gradient(90deg, transparent 2%, #000 26%, #000 74%, transparent 98%);
  mask-image: linear-gradient(90deg, transparent 2%, #000 26%, #000 74%, transparent 98%);
}

.testi__rail::-webkit-scrollbar {
  display: none;
}

.testi__track {
  display: flex;
  gap: clamp(1rem, 2.6vw, 1.9rem);
  inline-size: max-content;
  /* periodic nudge: a brief sway hinting there are more cards (RTL: the next
     card waits on the left, so the sway pushes the row right) */
  animation: testi-nudge 7s ease-in-out 3s infinite;
}

.testimonials--engaged .testi__track {
  animation: none;
}

@keyframes testi-nudge {
  0%,
  12%,
  100% {
    transform: translateX(0);
  }
  4% {
    transform: translateX(14px);
  }
  8% {
    transform: translateX(-2px);
  }
}

.testi__card {
  --testi-lift: calc((1 - var(--dist, 1)) * 1);
  position: relative;
  flex: none;
  inline-size: var(--testi-card-w);
  scroll-snap-align: center;
  /* the centered card rises and grows; neighbors sink and DIM so the eye
     (and the click) lands on the middle one */
  transform: translateY(calc(var(--dist, 1) * 14px)) scale(calc(1.08 - var(--dist, 1) * 0.11));
  filter: brightness(calc(1 - var(--dist, 1) * 0.45)) saturate(calc(1 - var(--dist, 1) * 0.25));
  transition: transform 0.15s linear, filter 0.15s linear;
}

/* the gold pool beneath the centered card */
.testi__card::after {
  content: '';
  position: absolute;
  inset-inline: -14%;
  inset-block-end: -26px;
  block-size: 44px;
  z-index: -1;
  background: radial-gradient(ellipse 52% 100% at 50% 0%, rgba(227, 194, 104, 0.5), transparent 70%);
  opacity: var(--testi-lift);
  pointer-events: none;
}

.testi__frame {
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(227, 194, 104, calc(0.28 + var(--testi-lift) * 0.45));
  background: #121009;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55),
    0 0 calc(var(--testi-lift) * 30px) rgba(227, 194, 104, calc(var(--testi-lift) * 0.2));
}

.testi__frame video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

/* poster face: still + scrim + the gold play seal (video loads on press) */
.testi__poster[hidden] {
  display: none;
}

.testi__poster {
  position: relative;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.testi__poster img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

.testi__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 10, 8, 0.06) 55%, rgba(11, 10, 8, 0.5));
}

/* the base .media-frame__play already self-centers (calc(50% - 32px)) -
   adding another translate here double-shifts it in RTL. A compact 48px
   seal fits the smaller cards (recentered for its own size). */
.testi__poster .media-frame__play {
  z-index: 2;
  inline-size: 48px;
  block-size: 48px;
  inset-block-start: calc(50% - 24px);
  inset-inline-start: calc(50% - 24px);
}

.testi__poster .media-frame__play svg {
  inline-size: 19px;
  block-size: 19px;
}

/* navigation: a windowed dots strip over the step arrows. The strip shows
   ~9 dots; the rest slide behind an edge-fade mask (like the cards) */
.testi__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-block-start: 2px;
}

.testi__dots-viewport {
  /* positioned: the JS centers the active dot via offsetLeft, which is
     measured against the nearest positioned ancestor.
     Desktop is roomy (most of the 22 dots breathe in view, expanding both
     ways like the cards); mobile narrows to a compact window below. */
  position: relative;
  /* MUST stay narrower than one dot-copy (22 dots ~ 343px): the strip is
     tripled for looping, and a wider window would show duplicate lit dots */
  inline-size: min(300px, 60vw);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%, #000 76%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 24%, #000 76%, transparent 100%);
}

.testi__arrows {
  display: flex;
  align-items: center;
  gap: clamp(2.4rem, 7vw, 5.5rem);
}

@media (max-width: 760px) {
  .testi__dots-viewport {
    inline-size: min(150px, 56vw);
  }

  .testi__arrows {
    gap: 2.4rem;
  }
}

.testi__arrow {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(227, 194, 104, 0.45);
  background: none;
  color: var(--gold);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.testi__arrow:hover {
  border-color: var(--gold);
  box-shadow: 0 0 16px rgba(227, 194, 104, 0.25);
  transform: translateY(-1px);
}

.testi__dots {
  /* positioned so the dots' offsetParent is ALWAYS the strip - without this
     it flips from the viewport to the strip once a transform is applied,
     and the centering math silently breaks after the first slide */
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  inline-size: max-content;
  padding-block: 4px;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.testi__dot {
  inline-size: 7px;
  block-size: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(227, 194, 104, 0.28);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.testi__dot--on {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-deep));
  transform: scale(1.5);
  box-shadow: 0 0 10px rgba(227, 194, 104, 0.5);
}

:root {
  --testi-card-w: clamp(150px, 12.5vw, 185px);
}

/* ---------- CTA button ---------- */
.cta {
  display: inline-flex;
  flex-direction: column;
}

/* two lines inside one pill (the client's reference button): the ask + arrow
   on top, the assessment line smaller beneath it */
.cta-button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.75rem 2.6rem 0.85rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-deep));
  color: var(--cta-ink);
  text-decoration: none;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 26px rgba(227, 194, 104, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cta-button__main {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: clamp(1.1rem, 2.6vw, 1.3rem);
  font-weight: 800;
}

.cta-button__arrow {
  flex: none;
  transition: transform 0.2s ease;
}

.cta-button__sub {
  font-size: 0.84rem;
  font-weight: 600;
  opacity: 0.82;
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5), 0 0 40px rgba(227, 194, 104, 0.32);
}

/* the arrow leans forward (left = onward in RTL) on hover */
.cta-button:hover .cta-button__arrow {
  transform: translateX(-3px);
}

.cta-button:active {
  transform: translateY(0) scale(0.98);
}

/* ---------- Sticky bar ---------- */
/* button-only bar: no hard bottom edge - the dark wash FADES into the page
   (no border, no blur; a blur region would re-introduce a visible edge).
   The bar itself ignores the pointer so the transparent tail never blocks
   content; only the button is interactive. */
.sticky-bar {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  block-size: 96px;
  padding-block-start: 12px;
  padding-inline: clamp(1rem, 4vw, 2.4rem);
  background: linear-gradient(
    180deg,
    rgba(11, 10, 8, 0.94) 0%,
    rgba(11, 10, 8, 0.78) 46%,
    rgba(11, 10, 8, 0.38) 72%,
    transparent 100%
  );
  pointer-events: none;
  transform: translateY(-110%);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sticky-bar.is-visible {
  transform: translateY(0);
}

.sticky-bar__cta {
  pointer-events: auto;
  padding: 0.42rem 1.5rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-deep));
  color: var(--cta-ink);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: transform 0.15s ease;
}

.sticky-bar__cta:hover {
  transform: translateY(-1px);
}

.sticky-bar__cta:active {
  transform: translateY(0) scale(0.97);
}

/* ---------- Skeptics -> Proof: one continuous canvas ---------- */
/* the two sections share a single background so no color starts at the
   section edge: near-black doubt warms toward the threshold, then cools
   back into the proof depths. The tonal peak sits mid-flow, never at a
   boundary. Side washes + foot pool replace the band the proof lost. */
.skeptic-proof-flow {
  position: relative;
  overflow: clip;
  /* two layers, each with a job: (1) ONE warm light blooming on the center
     axis at the threshold - the proof emerging from the dark of doubt, the
     glow the question descends into; (2) a vertical tonal ramp that warms
     mid-flow so the section seam never lands on a color edge. No scattered
     ornaments - every value here is load-bearing. */
  background:
    radial-gradient(58% 24% at 50% 41%, rgba(227, 194, 104, 0.12), rgba(176, 130, 52, 0.05) 46%, transparent 74%),
    linear-gradient(180deg, #0b0a08 0%, #0f0d09 30%, #17130c 41%, #0f0d09 64%, #15110b 100%);
}

/* content paints above the wrapper-level gold thread (svg has z-index: 0;
   positioned siblings later in tree order win). Deliberately NO z-index. */
.skeptic-proof-flow > .section {
  position: relative;
}

.skeptic-proof-flow .proof.section--band {
  background: transparent; /* the wrapper owns the canvas: nothing restarts */
}

.skeptic-proof-flow .skeptics {
  padding-block: clamp(4.5rem, 8vw, 7rem) clamp(2.5rem, 5vw, 4rem);
}

.skeptic-proof-flow .proof {
  /* a generous run so the thread has room to slide down into the answer */
  padding-block-start: clamp(3rem, 7vw, 6rem);
}

/* the manifesto is a centered editorial descent on the page's vertical axis -
   it shares the proof title's center so the question falls straight into its
   answer, and the gold thread runs down that same axis between them */
.skeptics__col {
  max-inline-size: 60rem;
  margin-inline: auto;
  text-align: center;
}

.skeptics__head {
  margin-block-end: clamp(2rem, 4.5vw, 3.5rem);
}

.skeptics__title {
  max-inline-size: 18ch;
  margin-inline: auto;
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  line-height: 1.06;
  font-weight: 900;
}


.skeptics__prose p {
  margin-block: 0 clamp(0.55rem, 1.3vw, 0.85rem);
  margin-inline: auto;
  max-inline-size: 52ch;
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.7;
  color: var(--text-muted);
}

/* beat 1: the failed attempts - regular body text (no faded line), with the
   key phrase of each line lifted into solid gold */
.skeptics__attempts {
  margin-block-end: clamp(1.4rem, 3vw, 2.2rem);
}

.skeptics__em {
  color: var(--gold);
  font-weight: 700;
}

/* beat 2: the refusal breaks the rhythm - a centered pull-line, gold underline */
.skeptics__prose .skeptics__turn {
  inline-size: fit-content;
  max-inline-size: min(90%, 24ch);
  margin: clamp(2.2rem, 4.5vw, 3.6rem) auto;
  padding-inline: 0.35em;
  font-size: clamp(1.55rem, 3vw, 2.4rem);
  line-height: 1.2;
  font-weight: 900;
  color: var(--text);
  background: linear-gradient(180deg, transparent 62%, rgba(227, 194, 104, 0.16) 62%, rgba(191, 149, 63, 0.06) 90%, transparent 90%);
}

/* beat 3: the evidence ledger */
.skeptics__ledger {
  margin-block-start: clamp(1.4rem, 3vw, 2.2rem);
}

.skeptics__prose .skeptics__beacon {
  font-weight: 700;
  color: var(--text);
}

/* the "not X / not Y / not Z" triptych: centered stacked clauses, each under
   a soft gold wash (rendered text stays byte-identical to the source line) */
.skeptics__not-line {
  margin-block: clamp(1rem, 2vw, 1.5rem) 0;
  max-inline-size: none;
}

.skeptics__not-line span {
  display: table;
  margin: 0.32rem auto;
  padding-inline: 0.55rem;
  font-weight: 600;
  color: var(--text);
  background: linear-gradient(180deg, transparent 58%, rgba(227, 194, 104, 0.18) 58%, transparent 92%);
}

/* the resolution: the real thing, brighter and heavier */
.skeptics__prose .skeptics__resolution {
  max-inline-size: 40ch;
  margin: clamp(1.2rem, 2.5vw, 1.9rem) auto 0;
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  line-height: 1.55;
  font-weight: 800;
  color: var(--text);
}

/* beat 4: the setup, then the climactic question on the center axis */
.skeptics__prose .skeptics__setup {
  margin-block-start: clamp(2.4rem, 5vw, 4rem);
  max-inline-size: 44ch;
}

.skeptics__question-track {
  position: relative;
  margin-block-start: clamp(1.4rem, 3vw, 2.4rem);
}

.skeptics__prose .skeptics__question {
  inline-size: fit-content;
  max-inline-size: 100%;
  margin-inline: auto;
  margin-block: 0;
  font-size: clamp(2.1rem, 4.8vw, 3.9rem);
  line-height: 1.08;
  font-weight: 900;
}

/* mobile connector: a glint drops from the question toward the answer where
   the SVG thread is hidden (<981px). On desktop the real thread takes over,
   so this is suppressed there to avoid a doubled line. */
.skeptics__question-track::after {
  content: '';
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  inline-size: 2px;
  block-size: clamp(2.5rem, 8vw, 4rem);
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, rgba(252, 246, 186, 0.82), rgba(191, 149, 63, 0.3) 60%, rgba(170, 119, 28, 0));
}

@media (min-width: 981px) {
  .skeptics__question-track::after {
    display: none;
  }
}

/* the proof title recast as the answer: same foil, same center axis */
.proof .section-head.proof__answer-head {
  margin-block-end: clamp(2rem, 4vw, 3.25rem);
}

.proof .section__title.proof__answer-title {
  max-inline-size: 14ch;
  margin-inline: auto;
  font-size: clamp(2.5rem, 5.4vw, 4.9rem);
  line-height: 1.04;
  font-weight: 900;
}

/* scroll-driven extra: the gold foil breathes as the question and answer
   cross the viewport; unsupported browsers keep the static state */
@supports (animation-timeline: view()) {
  .skeptics__prose .skeptics__question,
  .proof .section__title.proof__answer-title {
    animation: foil-breathe linear both;
    animation-timeline: view(block);
  }
}

@keyframes foil-breathe {
  from {
    filter: brightness(0.94);
  }
  to {
    filter: brightness(1.1);
  }
}

@media (max-width: 980px) {
  .skeptics__col {
    max-inline-size: 100%;
  }

  .skeptics__title {
    font-size: clamp(2.1rem, 9vw, 3.2rem);
  }

  /* mobile: break the centered wall. The opening story beat (the exhausted
     attempts) reads start-aligned along ONE quiet gold rule that dries out -
     an ink margin-line marking "this is the story part" - so the centered
     beats that follow (the refusal, the ledger, the question) land as
     deliberate stage moments instead of more of the same column */
  .skeptics__attempts {
    position: relative;
    text-align: start;
    max-inline-size: 34rem;
    margin-inline: auto;
    padding-inline-start: 1rem;
    margin-block-end: 2rem;
  }

  .skeptics__attempts::before {
    content: '';
    position: absolute;
    inset-block: 0.2rem;
    inset-inline-start: 0;
    inline-size: 2px;
    border-radius: var(--radius-pill);
    background: linear-gradient(180deg, var(--gold-mid), rgba(199, 155, 69, 0.35) 55%, rgba(199, 155, 69, 0));
  }

  .skeptics__attempts p {
    margin-inline: 0;
  }

  /* more air between the beats - the eye needs the pauses on a phone */
  .skeptics__prose p {
    margin-block-end: 0.8rem;
  }

  .skeptics__ledger {
    margin-block-start: 2rem;
  }

  .skeptics__prose .skeptics__setup {
    margin-block-start: 2.6rem;
  }

  .skeptics__prose .skeptics__question {
    font-size: clamp(1.8rem, 8vw, 2.8rem);
  }

  /* narrow phones: the pull-line's underline wash was hugging the screen
     edges, and the climax question ran under the floating WhatsApp seal -
     let the type yield a step and keep the moment clear of the button */
  @media (max-width: 480px) {
    .skeptics__prose .skeptics__turn {
      font-size: clamp(1.3rem, 6.2vw, 1.55rem);
    }

    .skeptics__question-track {
      padding-inline: 3rem;
    }

    .skeptics__prose .skeptics__question {
      font-size: clamp(1.65rem, 7.4vw, 2.8rem);
    }
  }

  /* 360px-class phones: one more step in so the question stays fully
     clear of the floating WhatsApp seal */
  @media (max-width: 380px) {
    .skeptics__question-track {
      padding-inline: 3.2rem;
    }

    .skeptics__prose .skeptics__question {
      font-size: 1.4rem;
    }
  }

  /* the climax question gets a quiet candle pool so it reads as the section's
     focal point even without the desktop thread being born beneath it */
  .skeptics__question-track::before {
    content: '';
    position: absolute;
    inset: -70% -12%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse 62% 52% at 50% 55%, rgba(227, 194, 104, 0.09), transparent 70%);
  }

  .proof .section__title.proof__answer-title {
    font-size: clamp(2.1rem, 8.5vw, 3.4rem);
  }
}

/* ---------- Proof: evidence rows bound by the gold thread ---------- */
.proof__container {
  position: relative;
}

/* Container children stay positioned for the editorial evidence layout.
   Deliberately NO z-index here - it would create a stacking context that
   traps the fixed lightbox (z 90) below the sticky bar (z 60). */
.proof__container > * {
  position: relative;
}

.proof .section__title {
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
}

.proof .section-head {
  margin-block-end: clamp(2.5rem, 5vw, 4rem);
}

/* intro row shares the episode-row structure: text in the start column */
.proof__intro-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  margin-block-end: clamp(3rem, 7vw, 5rem);
}

.proof__intro {
  grid-column: 1;
}

/* the metallic thread */
.gold-thread {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
  /* the timeline lives on the svg (a real box); the path animates against it */
  view-timeline: --goldthread block;
}

/* the wire as a cylinder: dark bronze edges under a foil body under a
   thin near-white specular ridge = round metal, not a painted line */
.gold-thread__stroke {
  stroke-linecap: round;
}

.gold-thread__glow {
  stroke: rgba(227, 194, 104, 0.1);
  stroke-width: 8;
}

.gold-thread__edge {
  stroke: #3f2f10;
  stroke-width: 4.4;
}

.gold-thread__base {
  stroke-width: 3;
}

.gold-thread__ridge {
  stroke-width: 1.1;
  opacity: 0.85;
}

/* phase B starts invisible; on scroll the two ridges crossfade so the
   soft bright bands appear to drift along the metal (no dashes, ever) */
.gold-thread__ridge--b {
  opacity: 0;
}

@supports (animation-timeline: view()) {
  .gold-thread__ridge--a {
    animation: ridge-a linear both;
    animation-timeline: --goldthread;
  }

  .gold-thread__ridge--b {
    animation: ridge-b linear both;
    animation-timeline: --goldthread;
  }
}

@keyframes ridge-a {
  from {
    opacity: 0.85;
  }

  to {
    opacity: 0.1;
  }
}

@keyframes ridge-b {
  from {
    opacity: 0;
  }

  to {
    opacity: 0.8;
  }
}

@media (max-width: 980px) {
  .gold-thread {
    display: none;
  }

  .proof__intro-row {
    grid-template-columns: 1fr;
    margin-block-end: clamp(2.2rem, 6vw, 3rem);
  }

  /* mobile: each episode reads as ONE tight proof unit - quote, source line,
     screen - with the big air moved BETWEEN episodes, so the section scans
     like a curated episode reel instead of a stretched desktop composition */
  .ep-rows {
    gap: clamp(3.4rem, 10vw, 4.5rem);
  }

  .ep-row {
    gap: 1.2rem;
  }

  .ep-row__text {
    padding-block-start: 1.5rem;
  }

  .ep-row__text::before {
    font-size: 3.4rem;
    inset-block-start: -0.3rem;
  }

  .ep-row__meta {
    margin-block-start: 0.9rem;
    padding-block-start: 0.8rem;
    /* safe area: the long source line wraps before the inline-end corner,
       where the floating WhatsApp seal lives on mobile */
    padding-inline-end: 3.6rem;
  }

  /* the quote hangs from its episode's screen: the pair stays glued even if
     a future episode's copy runs long */
  .ep-row__title {
    font-size: clamp(1.45rem, 5.6vw, 1.7rem);
    line-height: 1.35;
  }
}

/* episodes as editorial evidence rows, video inside a laptop silhouette */
.ep-rows {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 7vw, 5rem);
}

.ep-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr; /* equal halves: the quote carries as much weight as the video */
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

/* Selective background interest kept dimmer than the content. */
.ep-row::before {
  content: '';
  position: absolute;
  inset: -20% -22%;
  z-index: -1;
  pointer-events: none;
}

.ep-row:nth-child(1)::before {
  background: radial-gradient(ellipse 42% 60% at 14% 88%, rgba(170, 119, 28, 0.13), transparent 68%);
}

.ep-row:nth-child(2)::before {
  background: radial-gradient(ellipse 38% 55% at 88% 16%, rgba(150, 104, 30, 0.12), transparent 68%);
}

.ep-row:nth-child(3)::before {
  background: radial-gradient(ellipse 36% 52% at 12% 20%, rgba(170, 119, 28, 0.1), transparent 68%);
}

.ep-row--flip .ep-row__text {
  order: 2;
}

/* pull-quote treatment: giant hanging mark, display-scale type,
   attribution under a short gold rule */
.ep-row__text {
  position: relative;
  padding-block-start: clamp(2.4rem, 4vw, 3.2rem);
}

.ep-row__text::before {
  content: '”';
  position: absolute;
  inset-block-start: -0.6rem;
  inset-inline-start: -0.4rem;
  font-size: clamp(4.5rem, 8vw, 7rem);
  font-weight: 900;
  line-height: 1;
  color: var(--gold);
  opacity: 0.22;
  pointer-events: none;
}

.ep-row__title {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.ep-row__meta {
  position: relative;
  margin-block-start: 1.5rem;
  padding-block-start: 1.1rem;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.ep-row__meta::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 44px;
  height: 2px;
  background: var(--gold-deep);
}

/* minimal laptop: slim bezel + deck, no fake keyboard/camera detail */
.laptop {
  filter: drop-shadow(0 26px 42px rgba(0, 0, 0, 0.5));
}

.laptop__screen {
  position: relative;
  margin-inline: 4%;
  padding: clamp(7px, 1vw, 11px);
  background: linear-gradient(180deg, #221e16, #12100c);
  border: 1px solid var(--line-strong);
  border-block-end: 0;
  border-radius: 14px 14px 0 0;
}

.laptop__viewport {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 5px;
  overflow: hidden;
  background: var(--bg-media);
}

.laptop__viewport iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.laptop__base {
  position: relative;
  height: clamp(10px, 1.4vw, 15px);
  background: linear-gradient(180deg, #2b2519, #0e0c09 80%);
  border: 1px solid var(--line-strong);
  border-radius: 3px 3px 14px 14px;
}

.laptop__base::after {
  /* thumb scoop; physical left is fine, centering is symmetric */
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -1px;
  width: clamp(64px, 9vw, 110px);
  height: 45%;
  background: #0a0906;
  border: 1px solid var(--line);
  border-block-start: 0;
  border-radius: 0 0 12px 12px;
}

.laptop__poster {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.laptop__poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* dark grade so YouTube set colors sit inside the black+gold system */
  filter: saturate(0.5) contrast(1.05) brightness(0.78);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.45s ease;
}

.laptop__poster:hover img {
  transform: scale(1.03);
  filter: saturate(0.68) contrast(1.05) brightness(0.86);
}

.laptop__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 6, 4, 0.18), rgba(7, 6, 4, 0.45)),
    radial-gradient(ellipse 85% 75% at 50% 45%, transparent 45%, rgba(7, 6, 4, 0.5));
}

.laptop .media-frame__play {
  width: 54px;
  height: 54px;
  inset-block-start: calc(50% - 27px);
  inset-inline-start: calc(50% - 27px);
}

/* episode lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(7, 6, 4, 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: lightbox-fade 0.22s ease;
}

.lightbox__body {
  width: min(1040px, 100%);
  margin: 0;
  animation: lightbox-zoom 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.lightbox__player {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-media);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--bg-media);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7);
}

.lightbox__player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.lightbox__caption {
  margin-block-start: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.lightbox__title {
  font-weight: 700;
}

.lightbox__meta {
  color: var(--text-muted);
  font-size: 0.88rem;
}

.lightbox__close {
  position: fixed;
  inset-block-start: 18px;
  right: 18px; /* physically top-right per client preference, also in RTL */
  z-index: 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease;
}

.lightbox__close:hover {
  color: var(--gold);
  transform: scale(1.06);
}

/* When a video dialog is open, it must become the whole experience. The About
   story lightbox is rendered inside the section, so the section/CTA stacking
   layer used to paint above it on mobile. Lift the lightbox owner and mute all
   floating conversion UI until the dialog closes. */
.about__video:has(.lightbox),
.ep-rows:has(.lightbox) {
  position: relative;
  z-index: calc(var(--z-lightbox) + 1);
}

body.is-lightbox-open .sticky-bar,
body.is-lightbox-open .whatsapp {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 700px) {
  .lightbox {
    padding-block: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-bottom));
    padding-inline: 0.75rem;
  }

  .lightbox__body {
    width: min(100%, calc(100vw - 1.5rem));
  }

  .lightbox.lightbox--portrait .lightbox__body--portrait {
    width: min(calc(100vw - 1.5rem), 48svh);
    max-width: 100%;
  }

  .lightbox.lightbox--portrait .lightbox__player--portrait {
    width: 100%;
    height: auto;
    max-height: calc(100svh - 5.5rem);
  }

  .lightbox.lightbox--portrait .lightbox__player--portrait video {
    object-fit: contain;
    background: #000;
  }

  .lightbox__close {
    inset-block-start: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    width: 42px;
    height: 42px;
  }
}

@keyframes lightbox-fade {
  from {
    opacity: 0;
  }
}

@keyframes lightbox-zoom {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* section conclusion: centered, quiet channel link above the CTA */
.proof__end {
  text-align: center;
  margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
}

.proof__end .cta {
  align-items: center;
}

/* ---------- Pain: the loop - manifestations orbiting what repeats ---------- */
.pain .section-head--center {
  margin-block-end: clamp(1.6rem, 3.5vw, 2.6rem);
}

/* the composed public mask, then the turn inward - centered */
.pain__intro {
  max-inline-size: 52ch;
  margin-inline: auto;
  text-align: center;
}

.pain__lead-line {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  font-weight: 600;
  color: var(--text);
  margin-block-end: clamp(1rem, 2vw, 1.4rem);
}

.pain__facade {
  color: var(--text);
}

.pain__facade p {
  margin-block: 0.2rem;
}

.pain__turn {
  margin-block-start: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 800;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  color: var(--gold);
}

/* the loop */
.pain__loop {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-block: clamp(1.5rem, 4vw, 3rem);
}

.pain__ring {
  position: relative;
  inline-size: clamp(19rem, 48vw, 32rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

/* the orbit: a single thin gold ring with a soft glow (the site's arc motif) */
.pain__ring::before {
  content: '';
  position: absolute;
  inset: clamp(2.4rem, 5vw, 4rem);
  border-radius: 50%;
  border: 1px solid rgba(227, 194, 104, 0.32);
  box-shadow:
    0 0 50px rgba(227, 194, 104, 0.09),
    inset 0 0 50px rgba(227, 194, 104, 0.05);
  z-index: 0;
}

/* the warm core glow the manifestations orbit */
.pain__ring::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  inline-size: clamp(11rem, 22vw, 16rem);
  block-size: clamp(11rem, 22vw, 16rem);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 194, 104, 0.16), rgba(180, 130, 52, 0.05) 55%, transparent 72%);
  z-index: 0;
}

/* the core: what keeps repeating - the thing they all orbit */
.pain__core {
  position: relative;
  z-index: 2;
  max-inline-size: 11ch;
  margin: 0;
  text-align: center;
  font-size: clamp(1.1rem, 1.5vw, 1.5rem);
  font-weight: 800;
  line-height: 1.22;
}

/* the orbit layer fills the ring so nodes measure from its center */
.pain__orbit {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  z-index: 1;
}

/* each manifestation sits on the orbit at its precomputed angle --a
   (rotate out, then rotate the label back upright) */
.pain__node {
  position: absolute;
  top: 50%;
  left: 50%;
  inline-size: max-content;
  text-align: center;
  --ring-r: clamp(8.5rem, 22vw, 14rem);
  transform:
    translate(-50%, -50%)
    rotate(var(--a))
    translateY(calc(-1 * var(--ring-r)))
    rotate(calc(-1 * var(--a)));
}

.pain__node-pre {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-subtle);
}

.pain__node-dom {
  display: block;
  font-size: clamp(1.05rem, 1.5vw, 1.4rem);
  font-weight: 800;
  color: var(--gold);
}

/* the 7th, long line lands below the ring as the culminating beat */
.pain__loop-last {
  margin-block-start: clamp(1.6rem, 3vw, 2.6rem);
  max-inline-size: 40ch;
  text-align: center;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 600;
  color: var(--text);
}

/* balance the wrap on every centered multi-line block so no line is left
   with one stranded word */
.pain__lead-line,
.pain__core,
.pain__loop-last,
.pain__frustration p,
.pain__closing .emphasis-block p {
  text-wrap: balance;
}

/* the frustration build, centered */
.pain__frustration {
  margin-block: clamp(2rem, 4vw, 3rem) 0;
  text-align: center;
}

.pain__frustration p {
  margin-block-end: 0.35rem;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: var(--text);
}

/* the concluding line of the paragraph - same white/design, a small beat off */
.pain__frustration-close {
  margin-block-start: clamp(0.9rem, 1.8vw, 1.4rem);
}

/* the gold pivot: understanding is no longer enough */
.pain__closing {
  max-inline-size: 42ch;
  margin-inline: auto;
  margin-block-start: clamp(1.6rem, 3vw, 2.4rem);
}

.pain__closing .emphasis-block {
  border-inline-start: 0;
  padding-inline-start: 0;
  text-align: center;
  color: var(--gold);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.5;
}

/* below ~760px the orbit becomes a diagnostic card: the core line ("משהו
   עדיין חוזר על עצמו") glows at the heart of a soft halo, and the six
   manifestations wrap beneath it as readable symptom chips - the same
   diagnosis ("many surfaces, one mechanism"), restructured for a phone */
@media (max-width: 760px) {
  .pain__ring {
    inline-size: 100%;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding-block: 0.5rem;
  }

  .pain__ring::before {
    display: none;
  }

  /* the warm core glow survives as the halo behind the core statement */
  .pain__ring::after {
    top: 0;
    left: 50%;
    inline-size: min(19rem, 88vw);
    block-size: 9rem;
    transform: translate(-50%, -28%);
  }

  .pain__core {
    max-inline-size: none;
    font-size: clamp(1.25rem, 5.4vw, 1.55rem);
  }

  /* the manifestations as symptom chips - scannable, contained, diagnostic */
  .pain__orbit {
    position: static;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 0.55rem;
    max-inline-size: 24rem;
    padding: 0;
  }

  .pain__node {
    position: static;
    inline-size: auto;
    transform: none;
    padding: 0.38rem 0.85rem;
    border: 1px solid rgba(227, 194, 104, 0.24);
    border-radius: var(--radius-pill);
    background: rgba(227, 194, 104, 0.05);
  }

  .pain__node-pre {
    display: inline;
    font-size: 0.8rem;
    color: var(--text-muted);
  }

  .pain__node-dom {
    display: inline;
    margin-inline-start: 0.3rem;
    font-size: 1rem;
  }

  .pain__loop-last {
    margin-block-start: 1.1rem;
  }

  /* safe area: the centered gold closing lines stop short of the corners,
     so the floating WhatsApp seal never sits on their line-ends */
  .pain__closing {
    padding-inline: 2.6rem;
  }
}

/* ---------- Not enough: the mechanism beneath the surface ---------- */
.reframe {
  position: relative;
}

/* depth as TONE, not a box: a full-bleed darkening that is transparent at BOTH
   ends, so it can never "cut off" against the page (the old pool's hard edge was
   the bug). Deepest in the lower half where the plumb sinks toward the mechanism. */
.reframe::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 28%,
    rgba(0, 0, 0, 0.32) 60%,
    rgba(0, 0, 0, 0.44) 76%,
    rgba(0, 0, 0, 0.18) 92%,
    transparent 100%
  );
}

.reframe > .container {
  position: relative;
  z-index: 1;
}

.reframe .section-head--center {
  margin-block-end: clamp(1.8rem, 4vw, 2.8rem);
}

/* the journey: tried everything -> the quiet self-blame (centered descent) */
.reframe__journey {
  max-inline-size: 56ch;
  margin-inline: auto;
  text-align: center;
}

.reframe__journey p {
  margin-block: 0 clamp(0.5rem, 1.2vw, 0.8rem);
  font-size: clamp(1.02rem, 1.3vw, 1.18rem);
  line-height: 1.7;
  color: var(--text);
}

/* the piled-up lists of what was tried - readable white, like the rest */
.reframe__catalog {
  color: var(--text);
}

/* "והדפוס חזר." - the collapse, a hard stark beat */
.reframe__journey .reframe__collapse {
  margin-block: clamp(1.3rem, 2.8vw, 2rem);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.1;
  font-weight: 900;
  color: var(--text);
}

/* the quiet self-blame - the low point; kept readable, its internal-voice
   quality carried by the quotation marks rather than by dimming */
.reframe__journey .reframe__doubt {
  margin-block-start: clamp(1rem, 2vw, 1.5rem);
  color: var(--text-muted);
}

/* the pivot: maybe you were solving the wrong thing */
.reframe__pivot {
  max-inline-size: 48ch;
  margin-inline: auto;
  margin-block-start: clamp(2.2rem, 4.5vw, 3.6rem);
  text-align: center;
}

.reframe__pivot p {
  margin-block-end: 0.5rem;
  font-size: clamp(1.15rem, 1.7vw, 1.42rem);
  line-height: 1.55;
  color: var(--text);
  text-wrap: balance;
}

.reframe__pivot-key {
  font-weight: 800;
  color: var(--gold);
}

/* ---- The plumb line: the four things you touched hang on a gold thread and
   dim as they descend; a long fading drop into the dark, then the mechanism you
   never reached. Depth is LIGHT + fading gradients, never a bounded box (the old
   "pool" was a dark region whose edge cut off against the page - that was the bug). */
.reframe__plumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-block-start: clamp(2.4rem, 5vw, 3.8rem);
}

/* a thread segment between the beads */
.reframe__seg {
  inline-size: 2px;
  block-size: clamp(2rem, 4vw, 2.9rem);
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    rgba(227, 194, 104, 0.06),
    rgba(227, 194, 104, 0.42) 42%,
    rgba(227, 194, 104, 0.42) 58%,
    rgba(227, 194, 104, 0.06)
  );
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.5s ease-out;
}

.reframe__plumb.is-shown .reframe__seg {
  transform: scaleY(1);
}

/* stagger the thread being drawn downward, bead by bead */
.reframe__plumb.is-shown .reframe__seg:nth-of-type(1) { transition-delay: 0.05s; }
.reframe__plumb.is-shown .reframe__seg:nth-of-type(2) { transition-delay: 0.22s; }
.reframe__plumb.is-shown .reframe__seg:nth-of-type(3) { transition-delay: 0.39s; }
.reframe__plumb.is-shown .reframe__seg:nth-of-type(4) { transition-delay: 0.56s; }

/* the long drop: the untraveled depth - fades toward the dark, never terminates */
.reframe__seg--drop {
  block-size: clamp(6rem, 13vw, 9rem);
  margin-block-end: clamp(1rem, 2.5vw, 1.6rem); /* the gap of silence before the knot */
  background: linear-gradient(180deg, rgba(227, 194, 104, 0.42), rgba(227, 194, 104, 0.05) 86%, transparent);
  transition: transform 0.8s ease-out 0.7s;
}

.reframe__touch {
  margin: 0;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-muted);
  opacity: 0; /* revealed with a stagger; they also dim as they descend */
  transition: opacity 0.5s ease;
}

.reframe__plumb.is-shown .reframe__touch {
  opacity: calc(0.92 - var(--i) * 0.08);
  transition-delay: calc(0.14s + var(--i) * 0.17s);
}

.reframe__touch b {
  font-weight: 800;
  color: var(--text);
}

/* the knot: the thread re-igniting - the ONLY glow object in the section */
.reframe__knot {
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: #f4e2a1;
  box-shadow: 0 0 22px 2px rgba(227, 194, 104, 0.4), 0 0 6px rgba(252, 246, 186, 0.7);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.5s ease 1.2s, transform 0.5s ease 1.2s;
}

.reframe__plumb.is-shown .reframe__knot {
  opacity: 1;
  transform: scale(1);
}

/* the mechanism: the one thing you never reached, glowing up from the dark */
.reframe__mech {
  position: relative;
  max-inline-size: 32rem;
  margin-inline: auto;
  margin-block-start: clamp(0.8rem, 2vw, 1.4rem);
  text-align: center;
}

/* a soft pool of light behind the headline - low alpha, transparent edges (no box) */
.reframe__mech::before {
  content: '';
  position: absolute;
  inset: -70% -35%;
  z-index: -1;
  background: radial-gradient(ellipse 58% 52% at 50% 52%, rgba(227, 194, 104, 0.1), transparent 70%);
  pointer-events: none;
}

.reframe__mech-lead {
  margin: 0 0 clamp(0.7rem, 1.6vw, 1.1rem);
  font-size: clamp(0.98rem, 1.25vw, 1.12rem);
  color: var(--text-muted);
}

.reframe__mech-word {
  margin: 0;
  font-size: clamp(1.85rem, 4vw, 3rem);
  line-height: 1.16;
  font-weight: 900;
  text-wrap: balance;
  /* per-line gold foil (tiled) so BOTH wrapped lines carry the full sheen - a
     single 180deg clip makes line 1 bright + line 2 dark. NO text-shadow (that
     muddied the foil); the ::before pool lifts it instead. */
  color: transparent;
  background-image: linear-gradient(180deg, #fcf6ba 8%, #e3c268 48%, #bf953f 82%, #aa771c 100%);
  background-size: 100% 1.16em;
  background-repeat: repeat-y;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .reframe__seg,
  .reframe__touch,
  .reframe__knot {
    transition: none;
  }
  .reframe__seg { transform: scaleY(1); }
  .reframe__touch { opacity: calc(0.92 - var(--i) * 0.08); }
  .reframe__knot { opacity: 1; transform: scale(1); }
}

/* the payoff: that's the whole difference (gold) */
.reframe__payoff {
  margin-block-start: clamp(2.2rem, 4.5vw, 3.4rem);
  text-align: center;
}

.reframe__payoff p {
  font-size: clamp(1.6rem, 3.4vw, 2.7rem);
  font-weight: 900;
  color: transparent;
  background: linear-gradient(180deg, var(--gold-hi) 10%, var(--gold) 50%, var(--gold-deep) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* the stakes: the closer */
.reframe__stakes {
  max-inline-size: 52ch;
  margin-inline: auto;
  margin-block-start: clamp(1.8rem, 3.5vw, 2.6rem);
  text-align: center;
}

.reframe__stakes p {
  margin-block-end: 0.5rem;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.6;
  color: var(--text);
  text-wrap: balance;
}

.reframe .section__cta {
  margin-block-start: clamp(2rem, 4vw, 3rem);
  text-align: center; /* center the inline-flex CTA on the section axis */
}

.reframe .section__cta .cta {
  align-items: center; /* center the button + microcopy within the column */
}

/* mobile: the reframe's opening journey leaves the centered-essay form.
   The narrated part reads start-aligned along the quiet gold ink rule
   (the same margin-line as the skeptics story), while the hard beats -
   "והדפוס חזר." and everything from the pivot down - stay centered stage
   moments. Same shift-of-frame, better phone reading path. */
@media (max-width: 760px) {
  .reframe__journey {
    position: relative;
    text-align: start;
    max-inline-size: 34rem;
    padding-inline-start: 1rem;
  }

  .reframe__journey::before {
    content: '';
    position: absolute;
    inset-block: 0.2rem;
    inset-inline-start: 0;
    inline-size: 2px;
    border-radius: var(--radius-pill);
    background: linear-gradient(180deg, var(--gold-mid), rgba(199, 155, 69, 0.35) 55%, rgba(199, 155, 69, 0));
  }

  /* the collapse stays a centered hard beat inside the aligned story */
  .reframe__journey .reframe__collapse {
    text-align: center;
  }

  /* safe areas: the waterline words, the self-blame quote line and the
     centered closer lines stop short of the corners, so the floating
     WhatsApp seal never sits on readable copy */
  .reframe__journey .reframe__doubt {
    padding-inline-end: 3rem;
  }

  .reframe__mech {
    padding-inline: 2.4rem;
  }

  .reframe__stakes {
    padding-inline: 2.2rem;
  }
}

/* ---------- Method: writing slows the mechanism - WIDE layout + animated ink ---------- */
.method__wide {
  position: relative;
}

.method .section-head--center {
  margin-block-end: clamp(1.6rem, 3.5vw, 2.6rem);
}

/* the quiet dismissal */
.method__not {
  max-inline-size: 48ch;
  margin-inline: auto;
  margin-block-end: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
  color: var(--text-muted);
}

.method__not p {
  font-weight: 600;
  margin-block: 0.25rem;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
}

/* HERO: wide two-column - the writing statement beside the pen (ink origin) */
.method__hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  margin-block-end: clamp(2.5rem, 6vw, 5rem);
}

/* grid children must be allowed to shrink below their content, or long lines
   overflow the container (default grid/flex min-width is auto, not 0) */
.method__hero-copy,
.method__pen,
.method__col {
  min-inline-size: 0;
}

.method__what-lead {
  /* client 2026-07-11: a step bigger - but never rivals the hero line below */
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  font-weight: 700;
  color: var(--text-muted);
  margin-block-end: clamp(0.6rem, 1.4vw, 1rem);
}

.method__what-hero {
  font-size: clamp(2.1rem, 4vw, 3.3rem);
  font-weight: 900;
  line-height: 1.08;
  max-inline-size: 100%;
}

.method__pen {
  margin: 0;
}

.method__pen img {
  display: block;
  inline-size: clamp(9rem, 20vw, 17rem);
  margin-inline: auto;
  opacity: 0.96;
}

/* setup + gold thesis, centered */
.method__thesis {
  position: relative;
  z-index: 1;
  max-inline-size: 58ch;
  margin-inline: auto;
  text-align: center;
  margin-block-end: clamp(2.5rem, 6vw, 4.5rem);
}

.method__setup {
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  line-height: 1.7;
  color: var(--text);
  margin-block: 0 0.4rem;
}

.method__key {
  margin-block-start: clamp(1.2rem, 2.5vw, 1.9rem);
  font-size: clamp(1.7rem, 3.4vw, 2.8rem);
  font-weight: 900;
  line-height: 1.12;
  color: transparent;
  background: linear-gradient(180deg, #fcf6ba, #e3c268 50%, #bf953f);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* WIDE contrast: speech (escaping) | writing (holding) */
.method__contrast {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  max-inline-size: 64rem;
  margin-inline: auto;
  margin-block-end: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}

/* each column: kicker -> lead header (with a divider) -> a marked list */
.method__col-kicker {
  min-block-size: 1.5em; /* hold both columns' leads on the same baseline */
  margin-block: 0 0.35rem;
  font-size: clamp(0.92rem, 1.15vw, 1.05rem);
  font-weight: 600;
  color: var(--text-muted);
}

.method__col--speech .method__col-kicker {
  color: var(--text-subtle);
}

.method__col-lead {
  margin-block: 0 clamp(0.9rem, 1.8vw, 1.3rem);
  padding-block-end: clamp(0.7rem, 1.4vw, 1.05rem);
  border-block-end: 1px solid rgba(227, 194, 104, 0.2);
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
  font-weight: 800;
  line-height: 1.25;
}

/* speech fades - it slips away */
.method__col--speech .method__col-lead {
  color: var(--text-subtle);
  border-block-end-color: var(--line);
}

/* writing holds - gold */
.method__col-lead--gold {
  color: transparent;
  background: linear-gradient(180deg, #fcf6ba, #e3c268 55%, #bf953f);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
}

.method__col-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.55rem, 1.3vw, 0.85rem);
}

.method__col-list li {
  position: relative;
  padding-inline-start: 1.15rem;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.4;
}

.method__col-list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0.15rem;
  inset-block-start: 0.62em;
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
}

.method__col--speech .method__col-list li {
  color: var(--text-subtle);
}

.method__col--speech .method__col-list li::before {
  background: rgba(145, 134, 117, 0.5);
}

.method__col--write .method__col-list li {
  color: var(--text-muted);
}

.method__col--write .method__col-list li::before {
  background: rgba(227, 194, 104, 0.6);
}

/* the honest line - full width, centered */
.method__honest {
  position: relative;
  z-index: 1;
  max-inline-size: 58ch;
  margin-inline: auto;
  text-align: center;
  margin-block-end: clamp(2.5rem, 5vw, 4rem);
}

.method__honest p {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.65;
  color: var(--text);
  text-wrap: balance;
}

/* the quote - where the ink seeps in */
.method__quote-wrap {
  position: relative;
  z-index: 1;
  max-inline-size: 44rem;
  margin-inline: auto;
  margin-block: clamp(2rem, 4vw, 3.5rem);
}

.method__quote {
  margin: 0;
  text-align: center;
  max-inline-size: none;
  padding-block-start: 0;
}

.method__quote::before {
  display: none;
}

.quote__intro {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-block-end: 0.8rem;
}

.quote__text {
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.method__quote .quote__text {
  max-inline-size: 26ch;
  margin-inline: auto;
}

/* closing */
.method__closing {
  position: relative;
  z-index: 1;
  max-inline-size: 52ch;
  margin-inline: auto;
  text-align: center;
}

.method__closing p {
  margin-block-end: 0.4rem;
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  line-height: 1.65;
  color: var(--text);
}

/* the gold ink that flows out of the pen and wraps down to the quote */
.method-ink {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

.method-ink__path {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.method-ink__glow {
  stroke: rgba(227, 194, 104, 0.13);
  stroke-width: 9;
}

.method-ink__line {
  stroke-width: 2.4;
}

/* the ink is ALWAYS fully drawn (no scroll-draw animation - user's call, same as
   the about lasso): the path just renders whole, still fading into the white
   sentence via the JS-set mask-image */

/* mobile: collapse everything to one column */
@media (max-width: 900px) {
  .method-ink {
    display: none;
  }

  .method__hero {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .method__pen {
    display: none;
  }

  /* the speech/writing contrast becomes two compact prescription cards:
     the escape (dim, quiet frame) above the hold (gold frame, warm tint).
     Start-aligned lists put the marker dots back beside their lines -
     centered text was stranding them at the margin. */
  .method__contrast {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }

  .method__col {
    padding: 1.1rem 1.25rem 1.25rem;
    border-radius: var(--radius-media);
  }

  .method__col--speech {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.015);
  }

  .method__col--write {
    border: 1px solid rgba(227, 194, 104, 0.24);
    background: radial-gradient(ellipse 90% 70% at 80% 0%, rgba(180, 130, 52, 0.09), transparent 70%),
      rgba(227, 194, 104, 0.03);
  }

  /* the empty baseline-holder kicker is desktop furniture */
  .method__col-kicker {
    min-block-size: 0;
  }

  /* safe area: the centered thesis lines stop short of the corners, clear
     of the floating WhatsApp seal */
  .method__thesis {
    padding-inline: 2.2rem;
  }
}

/* ---------- About: profile dossier ---------- */
/* ---------- About: editorial profile ("the profile that becomes a confession") ----------
   desktop is a two-column magazine feature: the text (five movements + two
   pull-quotes) reads down the inline-start column while the portrait STICKS in
   the inline-end rail and accompanies the reader; at the foot the portrait
   releases and her voice (the 9:16 video) + the CTA form the closing row.
   grid areas: story fills the tall first row, the portrait rides beside it,
   the CTA + video sit in the second row. */
.about {
  position: relative;
  display: grid;
}

/* a warm parchment wash behind the profile - two brown-gold blooms (one behind
   the reading column's heart, one under the phone/CTA foot) so the chapter
   sits on candle-lit paper instead of flat black; painted before the lasso in
   DOM order so the golden thread still rides above it */
.about::before {
  content: '';
  position: absolute;
  /* generous bottom/side bleed so the warm washes (a background gradient, which
     always clips to this box) fade fully to transparent BEFORE the box edge -
     a tight box cut the bottom bloom mid-fade, reading as a hard glow edge under
     the phone. more room at the foot (where the phone's gold pool lives). */
  inset: -6% -12% -22%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 44% 26% at 72% 16%, rgba(180, 130, 52, 0.1), transparent 70%),
    radial-gradient(ellipse 38% 22% at 22% 78%, rgba(227, 194, 104, 0.07), transparent 72%);
}

.about {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  /* the invite/CTA cell was removed (client 2026-07-07); the reading column now
     spans both rows so the narrow side-column simply stacks portrait then phone -
     no empty half beside the video */
  grid-template-areas:
    'story portrait'
    'story video';
  column-gap: clamp(3rem, 6vw, 5rem);
  row-gap: clamp(2.2rem, 5vw, 3.4rem);
  align-items: start;
}

/* the closing beat's content sits above the lasso thread (which is z-index 0) */
.about__rail,
.about__story,
.about__video,
.about__cta {
  position: relative;
  z-index: 1;
}

/* the eye-leading gold lasso (desktop only): behind the content, always drawn.
   anchored top-left (not inset:0) so the JS height can extend past the grid to
   reach the loop under the phone without the box scaling the viewBox */
.about-lasso {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

.about-lasso__glow {
  stroke: rgba(227, 194, 104, 0.13);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-lasso__line {
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* the rail bounds the sticky travel to the tall first row, so the portrait
   releases exactly where the video begins instead of floating over it (a direct
   grid item's sticky rect would otherwise span the whole grid) */
.about__rail {
  grid-area: portrait;
  align-self: stretch;
  min-block-size: 0;
}

/* the sticky witness */
.about__portrait {
  position: sticky;
  inset-block-start: clamp(84px, 10vh, 120px);
  margin: 0;
}

/* one deliberate arc-ring hugging her upper (inline-end) shoulder - the site
   motif, masked to a fragment so it reads as a halo, not decoration */
.about__portrait::before {
  content: '';
  position: absolute;
  inset-block-start: -1.9rem;
  inset-inline-end: -2.1rem;
  width: clamp(150px, 15vw, 220px);
  aspect-ratio: 1;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(227, 194, 104, 0.28);
  -webkit-mask-image: linear-gradient(205deg, #000 18%, transparent 55%);
  mask-image: linear-gradient(205deg, #000 18%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

.about__portrait-frame {
  position: relative;
  z-index: 1;
  border-start-start-radius: var(--radius-media);
  border-start-end-radius: var(--radius-media);
  overflow: hidden;
  /* the bottom dissolves into the band - a directional melt, not a boxed frame */
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}

/* a fine gold hairline set just inside the plate - the double-frame move of
   editorial profile plates; it inherits the frame's dissolve mask, so the line
   melts into the band together with the photo */
.about__portrait-frame::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(227, 194, 104, 0.32);
  border-start-start-radius: calc(var(--radius-media) - 8px);
  border-start-end-radius: calc(var(--radius-media) - 8px);
  pointer-events: none;
}

.about__portrait-frame img {
  display: block;
  width: 100%;
  /* cropped taller than the 4:5 source (sides only - no decapitation) so she
     fills the rail like an editorial profile plate */
  aspect-ratio: 5 / 7;
  object-fit: cover;
  object-position: 50% 18%;
}

/* credentials: no card, no label - just the three seal-marked lines sitting
   directly on the portrait's top corner (RTL inline-start = her right). */
.about__credits {
  position: absolute;
  z-index: 2;
  inset-block-start: clamp(1.1rem, 2.2vw, 1.7rem);
  inset-inline-start: clamp(1.2rem, 2.4vw, 1.9rem);
  display: flex;
  flex-direction: column;
}

.about__credit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.34rem;
}

.about__credit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.about__credit-text {
  font-size: clamp(0.76rem, 1.4vw, 0.86rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--gold);
  /* CRISP thin dark outline (0 blur = sharp, no haze) so the gold reads on the
     bright studio wall behind her - replaces the blurry drop-shadow that made
     the text look fuzzy */
  text-shadow: 0.5px 0.5px 0 rgba(0, 0, 0, 0.55), -0.5px 0.5px 0 rgba(0, 0, 0, 0.4),
    0.5px -0.5px 0 rgba(0, 0, 0, 0.4), -0.5px -0.5px 0 rgba(0, 0, 0, 0.4);
}

/* the foil seal - the arc-ring motif closed into a medallion with a foil glint */
.about__seal {
  flex: none;
  inline-size: clamp(0.95rem, 1.7vw, 1.12rem);
  block-size: clamp(0.95rem, 1.7vw, 1.12rem);
  /* tight (sharp) dark edge for legibility + a faint gold glow */
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 2px rgba(227, 194, 104, 0.4));
}

.about__seal-ring {
  stroke: rgba(227, 194, 104, 0.5);
  stroke-width: 1.1;
}

.about__seal-glint {
  fill: #f2d68b;
}

/* the reading column */
.about__story {
  grid-area: story;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.4rem);
}

.about__move {
  position: relative;
}

.about__lead {
  max-inline-size: 60ch;
  font-size: clamp(1.14rem, 1.6vw, 1.32rem);
  font-weight: 500;
  line-height: 1.75;
  color: var(--text);
}

.about__body {
  max-inline-size: 60ch;
  line-height: 1.8;
  color: var(--text-muted);
}

.about__kick {
  display: block;
  margin-block-end: 0.4rem;
  font-weight: 700;
  color: var(--text);
}

.about__strong {
  font-weight: 700;
  color: var(--text);
}

.about__em {
  font-weight: 700;
  color: var(--gold);
}

/* movement 04 - the "close to 400 people" proof reads as a quiet headline */
.about__proof {
  max-inline-size: 60ch;
}

.about__proof-head {
  display: block;
  margin-block-end: 0.5rem;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  font-weight: 800;
  line-height: 1.45;
  color: var(--text);
}

.about__body-inline {
  line-height: 1.8;
  color: var(--text-muted);
}

/* movement 05 - was a small dim "whisper"; folded into the regular gray body
   text (one fewer text style - see the pull-quote intro too) */
.about__whisper {
  color: var(--text-muted);
}

.about__whisper--lead {
  margin-block-start: 0.7rem;
}

.about__confess-line {
  max-inline-size: 52ch;
  margin-block-start: 0.35rem;
  line-height: 1.7;
  color: var(--text-muted);
}

/* the two pull-quotes: weight and scale, never a card */
.about__pq {
  max-inline-size: 60ch;
}

.about__pq--rule {
  position: relative;
  padding-inline-start: 1.4rem;
  /* cross the gutter toward the portrait - the magazine pull-quote move */
  margin-inline-end: calc(-1 * clamp(1rem, 4vw, 3.5rem));
  margin-block: clamp(0.4rem, 1.2vw, 1rem);
}

/* the quote's rule is a drawn ink stroke, not a flat border: bright where the
   words begin, drying out toward both ends - the section's thread language */
.about__pq--rule::before {
  content: '';
  position: absolute;
  inset-block: -0.35rem;
  inset-inline-start: 0;
  inline-size: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(169, 127, 47, 0), var(--gold) 30%, var(--gold-deep) 72%, rgba(169, 127, 47, 0));
}

/* was a small dim eyebrow; now just regular gray body text (one fewer text style) */
.about__pq-intro {
  margin-block-end: 0.5rem;
  color: var(--text-muted);
}

.about__pq-line {
  font-size: clamp(1.3rem, 2.1vw, 1.62rem);
  font-weight: 800;
  line-height: 1.5;
  color: var(--text);
}

.about__pq--climax {
  margin-inline-end: calc(-1 * clamp(1.5rem, 5vw, 4.5rem));
  /* the climax is the chapter's loudest beat - give it air on both sides so
     the turn lands, and let the lasso be born out of real silence */
  margin-block-start: clamp(0.8rem, 2vw, 1.6rem);
}

.about__pq-line--big {
  font-size: clamp(1.5rem, 2.7vw, 2.05rem);
  font-weight: 900;
  line-height: 1.4;
}

/* the deeper (gold) line of each quote lands a beat after the first */
.about__pq .about__pq-gold {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.22s,
    transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.22s;
}

.about__pq.is-shown .about__pq-gold {
  opacity: 1;
  transform: none;
}

/* multi-line gold: tile the foil PER LINE (background-size = one line tall) so
   every wrapped line carries the same sheen, instead of the block-wide 180deg
   gradient making the first visual line bright and the next one dark */
.about__foil {
  background-image: linear-gradient(180deg, var(--gold-hi) 6%, var(--gold) 50%, var(--gold-mid) 94%);
  background-size: 100% 1.4em;
  background-repeat: repeat-y;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* her voice - the 9:16 video sits at the foot of the rail, beside the CTA */
.about__video {
  grid-area: video;
  align-self: end;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about__video-cap {
  margin-block-end: 0.7rem;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gold);
}

.about__video-pre {
  margin-inline-end: 0.4rem;
  font-weight: 600;
  color: var(--text-subtle);
}

/* the floating gold phone: the story video plays inside the generated frame.
   screen inset (top/bottom 3.52%, sides ~8.1%) is measured from the PNG so the
   video lands exactly in the display */
.about__phone {
  position: relative;
  display: block;
  width: clamp(220px, 25vw, 284px);
  aspect-ratio: 632 / 1250;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  filter: drop-shadow(0 26px 46px rgba(0, 0, 0, 0.62)) drop-shadow(0 0 32px rgba(227, 194, 104, 0.24));
  transition: filter 0.2s ease, transform 0.2s ease;
}

/* a soft gold pool beneath it, so it reads as floating on the page */
.about__phone::before {
  content: '';
  position: absolute;
  /* generous box + a radial that fades to transparent WELL inside it, so the
     pool dissolves before every edge. a background gradient always clips to its
     own box - the old tight box (40% tall, -20% sides) cut the pool while it was
     still lit, giving a hard edge under the phone (and faint side edges). the
     glow stays centered at the foot (~56% down the box); the box just extends
     past it in every direction to give the fade room. */
  inset-block-end: -20%;
  inset-inline: -52%;
  block-size: 72%;
  background: radial-gradient(ellipse 42% 46% at 50% 60%, rgba(227, 194, 104, 0.17), transparent 64%);
  pointer-events: none;
  z-index: 0;
}

.about__phone-screen {
  position: absolute;
  top: 3.52%;
  bottom: 3.52%;
  left: 8.07%;
  right: 8.23%;
  z-index: 1;
  overflow: hidden;
  border-radius: clamp(15px, 2vw, 22px);
  background: #000;
}

.about__phone-screen video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the gold frame sits on top of the video (below the play seal) */
.about__phone-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* silent preview: darken the video a touch so the gold play seal reads,
   and lift the custom seal above the frame */
.about__phone-scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 78% 62% at 50% 50%, rgba(7, 6, 4, 0.28), rgba(7, 6, 4, 0.6));
  pointer-events: none;
}

.about__phone .media-frame__play {
  z-index: 3;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

/* small gold hint under the play seal (this custom phone player only) */
.about__phone-hint {
  position: absolute;
  z-index: 3;
  inset-block-start: calc(50% + 44px);
  inset-inline: 12%;
  text-align: center;
  font-size: clamp(0.72rem, 1.4vw, 0.82rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--gold);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.78);
  pointer-events: none;
}

.about__phone--preview:hover .about__phone-hint {
  color: var(--gold-hi);
}

.about__phone--preview:hover {
  filter: drop-shadow(0 26px 46px rgba(0, 0, 0, 0.62)) drop-shadow(0 0 46px rgba(227, 194, 104, 0.42));
}

.about__phone--preview:hover .media-frame__play {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), 0 0 44px rgba(227, 194, 104, 0.5);
  transform: scale(1.06);
}

.about__phone--preview:active {
  transform: scale(0.994);
}

/* the story video opens full (sound + controls) in a vertical lightbox */
.lightbox__body--portrait {
  width: auto;
}

.lightbox__player--portrait {
  aspect-ratio: 9 / 16;
  width: auto;
  height: min(84vh, 760px);
  margin-inline: auto;
}

.lightbox__player--portrait video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the CTA closes the section directly under the climax quote */
.about__cta {
  grid-area: cta;
  align-self: center;
  margin-block-start: clamp(0.8rem, 2vw, 1.6rem);
}

/* a faint candle-glow pools behind the invitation, so the closing beat has the
   same floating depth as the phone across the gutter */
.about__cta::before {
  content: '';
  position: absolute;
  inset: -18% -10%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 50% 60%, rgba(227, 194, 104, 0.07), transparent 72%);
}

/* the invitation copy that bridges her story -> the video -> the CTA */
.about__invite-eyebrow {
  margin-block-end: 0.7rem;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gold);
}

.about__invite-lead {
  max-inline-size: 46ch;
  margin-block-end: 0.6rem;
  line-height: 1.75;
  color: var(--text);
}

.about__invite-lead:last-of-type {
  margin-block-end: clamp(1.3rem, 3vw, 2rem);
}

/* clean vertical video frame (no phone chrome) */
.phone {
  width: min(280px, 78vw);
  border-radius: var(--radius-media);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: #000;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.6), 0 0 40px rgba(227, 194, 104, 0.09);
}

.phone__screen {
  aspect-ratio: 9 / 16;
}

.phone__screen iframe,
.phone__screen video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  background: #000;
}

.phone__placeholder {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 1rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ---------- Fit: clean eligibility threshold ----------
   No illustration here: the previous freehand thread made this section feel
   accidental. Gold is now only used as controlled hierarchy - a selected-side
   frame, a straight threshold rule, and consistent yes markers. */
.fit-section {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(180, 130, 52, 0.035) 48%, rgba(255, 255, 255, 0.01));
}

.fit {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  column-gap: clamp(1.6rem, 4vw, 3.8rem);
  align-items: stretch;
}

.fit__lane {
  position: relative;
  padding: clamp(1.35rem, 3vw, 2rem);
  border-radius: calc(var(--radius-card) + 4px);
}

.fit__lane h3 {
  font-size: 1.3rem;
  font-weight: 800;
  margin-block-end: 1.35rem;
}

.fit__lane ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.fit__lane li {
  position: relative;
  line-height: 1.7;
  padding-inline-start: 1.9rem;
}

.fit__lane--not {
  border: 1px solid rgba(255, 255, 255, 0.055);
  background: rgba(255, 255, 255, 0.018);
}

.fit__lane--not h3 {
  color: var(--text-muted);
}

.fit__lane--not li {
  color: var(--text-subtle);
}

.fit__lane--not li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0.15rem;
  inset-block-start: 0.82em;
  inline-size: 0.72rem;
  block-size: 1px;
  background: rgba(255, 255, 255, 0.2);
}

.fit__lane--yes {
  border: 1px solid rgba(227, 194, 104, 0.34);
  background:
    linear-gradient(135deg, rgba(227, 194, 104, 0.11), rgba(255, 255, 255, 0.025) 48%, rgba(227, 194, 104, 0.055)),
    var(--bg-elevated);
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.fit__lane--yes::before {
  content: '';
  position: absolute;
  inset-block: 1.1rem;
  inset-inline-start: -0.85rem;
  inline-size: 1px;
  background: linear-gradient(180deg, transparent, rgba(227, 194, 104, 0.25), var(--gold), rgba(227, 194, 104, 0.25), transparent);
  box-shadow: 0 0 18px rgba(227, 194, 104, 0.18);
}

.fit__lane--yes h3 {
  color: var(--gold-hi);
}

.fit__lane--yes li {
  color: var(--text-muted);
}

.fit__lane--yes li::before {
  content: '✓';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.08em;
  color: var(--gold);
  font-weight: 800;
  text-shadow: 0 0 10px rgba(227, 194, 104, 0.28);
}

/* ---------- FAQ: answer ledger ----------
   Design decision: the FAQ is a quiet consultation ledger. Gold marks the
   active question and the reading rail only; no freehand ornament is needed. */
.faq-section {
  position: relative;
  background:
    radial-gradient(ellipse 36% 28% at 50% 18%, rgba(227, 194, 104, 0.075), transparent 70%),
    linear-gradient(180deg, var(--bg), rgba(22, 18, 11, 0.72) 48%, var(--bg));
}

.faq-section .container--narrow {
  position: relative;
}

.faq-section .container--narrow::before {
  content: '';
  position: absolute;
  inset-block: clamp(4rem, 9vw, 7rem) 1rem;
  inset-inline-start: -2rem;
  inline-size: 1px;
  background: linear-gradient(180deg, transparent, rgba(227, 194, 104, 0.5), rgba(227, 194, 104, 0.12), transparent);
  pointer-events: none;
}

.faq {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-block-start: clamp(1.8rem, 4vw, 2.8rem);
  border-radius: calc(var(--radius-card) + 8px);
  border: 1px solid rgba(227, 194, 104, 0.13);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.008)),
    rgba(10, 10, 9, 0.72);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.035);
  overflow: hidden;
}

.faq__item {
  position: relative;
  border-block-start: 1px solid rgba(227, 194, 104, 0.11);
}

.faq__item:first-child {
  border-block-start: 0;
}

.faq__item--open {
  background: linear-gradient(90deg, rgba(227, 194, 104, 0.08), transparent 42%);
}

.faq__item--open::before {
  content: '';
  position: absolute;
  inset-block: 0.85rem;
  inset-inline-start: 0;
  inline-size: 2px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
  box-shadow: 0 0 18px rgba(227, 194, 104, 0.2);
}

.faq__heading {
  margin: 0;
}

.faq__question {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 1.2rem);
  padding: 1.25rem clamp(1rem, 3vw, 1.65rem);
  background: none;
  border: 0;
  color: var(--text);
  font-family: inherit;
  font-size: 1.06rem;
  font-weight: 750;
  text-align: start;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}

.faq__question:hover {
  color: var(--gold-hi);
  background: rgba(227, 194, 104, 0.035);
}

.faq__item--open .faq__question {
  color: var(--gold-hi);
}

.faq__index {
  color: rgba(227, 194, 104, 0.58);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.faq__question-text {
  min-width: 0;
}

.faq__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(227, 194, 104, 0.22);
  color: var(--gold);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1;
  transition: border-color 0.2s ease, background 0.2s ease;
}

/* the +/× SPINS by rotating the glyph itself, not the circle container:
   rotating the whole .faq__icon pivoted around the circle's centre, not the
   glyph's, so the × swung off-centre. Rotating the svg spins it in place. */
.faq__icon svg {
  transition: transform 0.25s ease;
}

.faq__item--open .faq__icon svg {
  transform: rotate(45deg);
}

.faq__item--open .faq__icon {
  border-color: rgba(227, 194, 104, 0.5);
  background: rgba(227, 194, 104, 0.1);
}

/* the height-animating wrapper: a grid row eased 0fr -> 1fr expands to the
   answer's natural height with no JS measuring; the inner region clips overflow */
.faq__answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq__item--open .faq__answer-wrap {
  grid-template-rows: 1fr;
}

.faq__answer {
  overflow: hidden;
  min-block-size: 0;
  /* NO block padding on the collapsing grid item - vertical padding would create
     a height floor that stops it collapsing to 0. the bottom breathing room lives
     on the last paragraph's margin instead (overflow:hidden makes this a BFC, so
     that margin is contained and counts toward the open height). */
  padding-block: 0;
  padding-inline: clamp(1rem, 3vw, 1.65rem) clamp(3.4rem, 6vw, 4.4rem);
  color: var(--text-muted);
  max-width: 68ch;
  /* the copy fades + settles down as the row opens (and reverses on close) */
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.22s ease, transform 0.3s ease;
}

.faq__item--open .faq__answer {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s ease 0.1s, transform 0.42s cubic-bezier(0.4, 0, 0.2, 1) 0.06s;
}

.faq__answer p {
  margin-block-end: 0.35rem;
}

.faq__answer p:last-child {
  margin-block-end: 1.45rem;
}

/* the one inline link inside an answer (her YouTube channel) */
.faq__link {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-color: rgba(227, 194, 104, 0.55);
  text-underline-offset: 0.2em;
}

.faq__link:hover {
  text-decoration-color: var(--gold);
}

/* ---------- Final CTA: her invitation + the closing gold wire ----------
   The section's signature is the gold WIRE (see FinalThread.jsx) - the ONLY
   linework here. The old rose ornament, the outer section frame and the corner
   brackets are gone. Shine stands blended into the dark (her black suit melts
   into the section, only face + hands emerge), personally extending the
   invitation. Three zones, RTL reading order: portrait -> copy -> form. */
.final {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse 58% 62% at 80% 84%, rgba(227, 194, 104, 0.12), transparent 66%),
    radial-gradient(ellipse 42% 50% at 26% 6%, rgba(227, 194, 104, 0.055), transparent 72%),
    linear-gradient(180deg, rgba(22, 18, 11, 0.9), var(--bg) 46%, rgba(20, 16, 10, 0.92));
  overflow: hidden;
}

.final .container {
  position: relative;
}

/* the closing wire: behind the copy + form, in front of the bg glow */
.final-thread {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

.final-thread__glow {
  stroke: rgba(227, 194, 104, 0.14);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.final-thread__line {
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.final__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(240px, 0.82fr) minmax(0, 1fr) minmax(340px, 1.12fr);
  gap: clamp(1.6rem, 3.6vw, 3.2rem);
  align-items: center;
}

/* she emerges from the dark at the inline-start (right) edge, bottom-anchored;
   her black suit dissolves into the section (foot mask), a warm gold pool
   behind grounds + lights her */
.final__portrait {
  position: relative;
  align-self: end;
  justify-self: center;
  margin: 0;
  z-index: 1;
}

.final__portrait::before {
  content: '';
  position: absolute;
  inset-block-end: -4%;
  inset-inline: -24%;
  block-size: 76%;
  background: radial-gradient(ellipse 46% 52% at 50% 62%, rgba(227, 194, 104, 0.17), transparent 66%);
  z-index: -1;
  pointer-events: none;
}

.final__portrait img {
  display: block;
  inline-size: clamp(224px, 22vw, 348px);
  block-size: auto;
  -webkit-mask-image: linear-gradient(180deg, #000 56%, transparent 97%);
  mask-image: linear-gradient(180deg, #000 56%, transparent 97%);
  filter: saturate(0.97) brightness(0.94) contrast(1.02);
}

.final__lead {
  position: relative;
  z-index: 1;
}

.final__title {
  margin-block-end: 1.4rem;
  text-wrap: balance;
}

.final__form-col {
  position: relative;
  z-index: 1;
}

/* her social profiles, centered right under the form card */
.final__socials {
  display: flex;
  justify-content: center;
  gap: 0.85rem;
  margin-block-start: 1.15rem;
  padding: 0;
  list-style: none;
}

.final__social {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  border: 1px solid rgba(227, 194, 104, 0.32);
  color: var(--gold);
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.final__social:hover {
  transform: translateY(-2px);
  border-color: rgba(227, 194, 104, 0.65);
  background: rgba(227, 194, 104, 0.1);
}

/* below the wire's cutoff: drop her portrait + collapse to copy | form (2 cols),
   so there's never an orphaned portrait with no wire connecting it */
@media (max-width: 1080px) {
  .final__portrait {
    display: none;
  }

  .final__grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
  }
}

/* the only elevated card on the page */
.lead-card {
  width: 100%;
  max-width: 520px;
  padding: clamp(1.6rem, 4vw, 2.2rem);
  border-radius: var(--radius-card);
  border: 1px solid rgba(227, 194, 104, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.012)),
    var(--bg-elevated);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.58), 0 0 42px rgba(227, 194, 104, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.lead-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.lead-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.lead-form__field label {
  font-weight: 700;
  color: var(--text);
}

.lead-form__field input:not([type='checkbox']) {
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-control);
  border: 1px solid rgba(227, 194, 104, 0.16);
  background: rgba(0, 0, 0, 0.24);
  color: var(--text);
  font-family: inherit;
  font-size: 1.02rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.lead-form__field input:not([type='checkbox']):focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(227, 194, 104, 0.18);
}

.lead-form__consent input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.lead-form__field input[aria-invalid='true'] {
  border-color: var(--error);
}

.lead-form__field input::placeholder {
  color: var(--text-subtle);
}

.lead-form__error {
  color: var(--error);
  font-size: 0.88rem;
}

.lead-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--text-muted);
  cursor: pointer;
}

.lead-form__consent input {
  margin-block-start: 0.3rem;
  accent-color: var(--gold);
}

.lead-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-block-start: 0.4rem;
  padding: 1rem 1.6rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-deep));
  color: var(--cta-ink);
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 0 26px rgba(227, 194, 104, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.lead-form__submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 40px rgba(227, 194, 104, 0.32);
}

.lead-form__submit:active {
  transform: translateY(0) scale(0.98);
}

.lead-form__submit:disabled {
  opacity: 0.7;
  cursor: default;
  transform: none;
}

.lead-form__success {
  padding: 1.2rem 0.4rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gold);
}

/* ---------- Footer ---------- */
.footer {
  position: relative;
  padding-block: 2.2rem;
  background: #070706;
  color: var(--text-muted);
  font-size: 0.9rem;
  border-block-start: 1px solid rgba(227, 194, 104, 0.12);
}

.footer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer__logo-img {
  display: block;
  block-size: 64px;
  inline-size: auto;
  filter: drop-shadow(0 0 14px rgba(227, 194, 104, 0.18));
}

/* ---------- WhatsApp float: dark seal, green glyph as semantic cue ---------- */
.whatsapp {
  position: fixed;
  inset-inline-start: 20px;
  inset-block-end: 20px;
  z-index: var(--z-whatsapp);
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--line-strong);
  color: var(--whatsapp);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s ease;
}

.whatsapp:hover {
  transform: scale(1.07);
}

.whatsapp:active {
  transform: scale(0.98);
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero__stage {
    padding-block-end: 0;
  }

  /* keep the shared gold glow (sized to the frame alone) so the mobile hero
     stays candle-lit instead of flat black */
  .hero__stage::before {
    inset: -10% -8%;
    background: radial-gradient(ellipse 70% 60% at 50% 42%, rgba(227, 194, 104, 0.09), transparent 70%);
  }

  .hero .media-frame--pending img {
    transform: scale(1.04);
  }

  .hero__cta {
    margin-block-start: 1.6rem;
    padding-block-end: 3rem;
  }

  .ep-row {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .ep-row--flip .ep-row__text {
    order: 0; /* text always above the laptop on mobile */
  }

  .fit,
  .final__grid {
    grid-template-columns: 1fr;
  }

  .fit__lane--not {
    margin-block-end: 2.2rem;
  }

  /* about collapses to one column: portrait -> story -> video -> cta (source
     order); the portrait stops sticking and the pull-quotes pull back in */
  .about {
    display: flex;
    flex-direction: column;
    gap: clamp(1.8rem, 6vw, 2.6rem);
  }

  .about__rail {
    align-self: center;
    inline-size: 100%;
    max-inline-size: 440px;
  }

  .about__portrait {
    position: static;
    inset-block-start: auto;
  }

  /* the halo arc pokes past the centered portrait at narrow widths - drop it */
  .about__portrait::before {
    display: none;
  }

  /* the credential seals leave the photo: on the stacked layout the 4/5 crop
     puts the top corner on her hair, so the caption steps off the plate and
     sits beneath it as a compact centered dossier row */
  .about__credits {
    position: static;
    margin-block-start: 0.8rem;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1.1rem;
  }

  .about__credit-list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1.1rem;
  }

  .about__portrait-frame img {
    aspect-ratio: 4 / 5;
  }

  .about__pq--rule,
  .about__pq--climax {
    margin-inline-end: 0;
  }

  /* the lasso only makes sense beside the two-column desktop closing beat */
  .about-lasso {
    display: none;
  }

  .about__cta {
    align-self: center;
    margin-block-start: 0;
  }

  .lead-card {
    max-width: none;
  }
}

@media (max-width: 700px) {
  body {
    font-size: 1.03rem;
  }

  .section {
    padding-block: clamp(3.25rem, 12vw, 4.35rem);
  }

  .section-head {
    margin-block-end: clamp(1.45rem, 7vw, 2.1rem);
  }

  .section__title,
  .hero__title {
    overflow-wrap: anywhere;
  }

  /* mobile hero: a tighter, conversion-first first viewport - the headline
     yields a step of scale and the beats close ranks so the VSL, the proof
     pair and the CTA all arrive sooner */
  .hero__title {
    font-size: clamp(2.05rem, 9.4vw, 2.5rem);
  }

  .hero__subtitle {
    margin-block-start: 0.6rem;
    font-size: 1rem;
  }

  .hero__watch-block {
    margin-block-start: 0.9rem;
  }

  .hero__watch-note {
    font-size: 0.86rem;
  }

  .hero__stage {
    margin-block-start: 0.9rem;
  }

  /* the proof pair reads as one ruled ledger row: a fine gold seam between
     the two numbers instead of two loose floating stats */
  .hero__stats {
    gap: 0;
    margin-block-start: 1.2rem;
    width: 100%;
  }

  .hero__stat {
    flex: 1 1 0;
    padding-inline: 0.6rem;
  }

  .hero__stat + .hero__stat {
    border-inline-start: 1px solid rgba(227, 194, 104, 0.22);
  }

  .hero__stat-value {
    font-size: 2.1rem;
  }

  .hero__stat-label {
    margin-block-start: 0.3rem;
    font-size: 0.86rem;
  }

  .hero__cta {
    margin-block-start: 1.3rem;
    padding-block-end: 2.4rem;
    width: 100%;
  }

  .section__title {
    font-size: clamp(1.85rem, 8.2vw, 2.35rem);
    line-height: 1.16;
  }

  .stats__grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .stats__item + .stats__item {
    border-inline-start: 0;
    padding-inline-start: 0;
    border-block-start: 1px solid var(--line);
    padding-block-start: 1.2rem;
  }

  .cta-button {
    /* keep the two-line stack on mobile (ask + arrow on top, assessment line
       beneath) - a plain block let the inline sub-span run up onto the main
       line and wrap raggedly */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(100%, 400px);
    padding-inline: 1.25rem;
  }

  .sticky-bar__cta {
    font-size: 0.85rem;
    padding-inline: 1rem;
    white-space: nowrap;
  }

  /* Mobile art direction: keep the portrait as an intentional editorial plate,
     but reduce the harsh white studio card and stop the desktop drop-cap from
     eating the first paragraph. */
  .about-section .section-head {
    text-align: center;
    max-inline-size: 24rem;
    margin-inline: auto;
  }

  .about__rail {
    max-inline-size: min(100%, 315px);
  }

  .about__portrait-frame {
    border-radius: calc(var(--radius-media) + 4px);
    background: radial-gradient(ellipse 75% 62% at 50% 18%, rgba(227, 194, 104, 0.12), rgba(12, 10, 7, 0.92) 78%);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45), 0 0 36px rgba(227, 194, 104, 0.08);
    -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
  }

  .about__portrait-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(10, 8, 5, 0.08) 0%, rgba(10, 8, 5, 0.2) 58%, rgba(10, 8, 5, 0.82) 100%),
      radial-gradient(ellipse 80% 52% at 50% 18%, transparent 0 46%, rgba(11, 9, 6, 0.28) 78%);
  }

  .about__portrait-frame::after {
    z-index: 3;
  }

  .about__portrait-frame img {
    position: relative;
    z-index: 1;
    aspect-ratio: 4 / 5;
    object-position: 50% 15%;
    filter: saturate(0.9) brightness(0.86) contrast(1.02);
  }

  .about__credits {
    inset-block-start: 0.9rem;
    inset-inline-start: 0.9rem;
    inset-block-end: auto;
    gap: 0.4rem;
  }

  .about__credit-text {
    font-size: 0.74rem;
  }

  .about__lead {
    font-size: clamp(1.06rem, 4.3vw, 1.18rem);
    line-height: 1.65;
  }

  .about__pq-line {
    font-size: clamp(1.2rem, 5vw, 1.42rem);
  }

  /* Mobile centering fix: the desktop about video sits at grid-end. Once the
     section collapses to a one-column RTL flex stack, align-self:end becomes
     the visual left edge, which made the gold phone look accidentally parked
     off-center. Keep the phone as the artistic focal point by recentering the
     video block and the button only on mobile. */
  .about__video {
    align-self: center;
    inline-size: 100%;
    margin-inline: auto;
  }

  .about__phone {
    margin-inline: auto;
  }

  .method__hero {
    margin-block-end: clamp(1.8rem, 8vw, 2.7rem);
  }

  .method__pen img {
    inline-size: clamp(5.8rem, 28vw, 8rem);
  }

  .fit {
    gap: clamp(1rem, 5vw, 1.5rem);
  }

  /* the grid row-gap carries the spacing between the stacked cards; the
     legacy stacked-layout margin was doubling it and splitting the decision
     pair apart */
  .fit__lane--not {
    margin-block-end: 0;
  }

  .fit__lane {
    padding: clamp(1.05rem, 5vw, 1.35rem);
  }

  .fit__lane h3 {
    font-size: clamp(1.12rem, 5vw, 1.28rem);
    margin-block-end: 1rem;
  }

  .fit__lane ul {
    gap: 0.85rem;
  }

  .fit__lane li {
    font-size: 0.98rem;
    line-height: 1.62;
    padding-inline-start: 1.55rem;
    /* safe area: wrapped criteria lines stop short of the inline-end edge,
       where the floating WhatsApp seal rides on mobile */
    padding-inline-end: 1.9rem;
  }

  .fit__lane--not {
    background: rgba(255, 255, 255, 0.026);
    border-color: rgba(255, 255, 255, 0.085);
  }

  .fit__lane--not li {
    color: rgba(201, 192, 177, 0.76);
  }

  .fit__lane--yes::before {
    inset-inline-start: 0;
    opacity: 0.72;
  }

  .faq-section .container--narrow::before {
    display: none;
  }

  .faq {
    border-radius: calc(var(--radius-card) + 4px);
    /* Keep the FAQ ledger centered on mobile. The old WhatsApp safe-area margin
       used inline-end; in RTL that becomes the left side and visually pushed the
       whole ledger to the right. The floating button sits low in the corner, so
       centering the card is the cleaner fix. */
    width: min(100%, 760px);
    margin-inline: auto;
  }

  .faq__question {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.65rem;
    /* the +/× icon sits on the card's edge line the SAME whether the row is open
       or closed (0.95rem inline-end both) - the old closed-only 3.15rem inset (to
       dodge the WhatsApp seal) made the closed + look stuck near the text instead
       of on the edge. */
    padding: 1rem 0.85rem;
    padding-inline-end: 0.95rem;
    font-size: 0.98rem;
    line-height: 1.35;
  }

  .faq__icon {
    inline-size: 1.55rem;
    block-size: 1.55rem;
    font-size: 1rem;
  }

  .faq__index {
    font-size: 0.7rem;
  }

  .faq__answer {
    padding-block: 0;
    padding-inline: 0.95rem;
    font-size: 0.98rem;
    line-height: 1.68;
    max-width: none;
  }

  /* a beat more air between answer paragraphs - the open ledger entry
     reads as breathing prose instead of a packed block */
  .faq__answer p {
    margin-block-end: 0.55rem;
  }

  .faq__answer p:last-child {
    margin-block-end: 1.25rem;
  }

  .final {
    /* keep the submit reachable above the floating WhatsApp button */
    padding-block-end: 7rem;
  }

  .final__grid {
    gap: clamp(1.55rem, 7vw, 2.1rem);
  }

  .final__form-col {
    display: grid;
    justify-items: center;
    inline-size: 100%;
  }

  .final__lead {
    text-align: center;
    /* safe area: the centered intro prose stops short of both corners so
       the floating WhatsApp seal rides in empty margin, never over copy */
    padding-inline: 2.6rem;
  }

  .final__lead .section__title {
    margin-inline: auto;
  }

  .lead-card {
    padding: clamp(1.1rem, 5.5vw, 1.35rem);
    /* Keep the final signing desk centered on mobile. The old WhatsApp safe-area
       margin used inline-end, which in RTL becomes the left side and pushed the
       whole card visually to the right. Vertical padding already keeps the
       submit reachable above the floating button, so the card itself should sit
       on the viewport centerline. */
    width: min(100%, 520px);
    margin-inline: auto;
  }

  .lead-form {
    gap: 0.95rem;
  }

  .lead-form__field input:not([type='checkbox']) {
    min-block-size: 46px;
    font-size: 1rem;
  }

  .lead-form__consent {
    font-size: 0.78rem;
    line-height: 1.5;
  }

  .lead-form__submit {
    padding: 0.92rem 1.05rem;
    font-size: clamp(1rem, 4.6vw, 1.08rem);
    white-space: normal;
  }

  .footer__row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    /* safe area: the sign-off lines wrap short of the corners, clear of the
       floating WhatsApp seal */
    padding-inline: 2.6rem;
  }

  /* mobile: the seal crosses to the inline-end corner - RTL text is
     right-aligned, so the left edge is the quiet side and the seal stops
     sitting on the episodes' source lines; a touch smaller too */
  .whatsapp {
    inline-size: 44px;
    block-size: 44px;
    inset-inline-start: auto;
    inset-inline-end: 12px;
    inset-block-end: 12px;
  }

  /* the a11y widget yields that corner to the WhatsApp seal on mobile and
     crosses to the opposite (inline-start) corner; its panel follows.
     div-qualified: must out-rank the base rules even where the port appends
     them AFTER this media block (WP), where equal specificity would lose */
  div.a11y {
    inset-inline-end: auto;
    inset-inline-start: 12px;
    inset-block-end: 12px;
  }

  div.a11y .a11y__panel {
    inset-inline-end: auto;
    inset-inline-start: 0;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .sticky-bar,
  .sticky-bar__cta,
  .cta-button,
  .lead-form__submit,
  .whatsapp,
  .faq__icon,
  .faq__icon svg,
  .faq__question,
  .faq__answer-wrap,
  .faq__answer,
  .laptop__poster img,
  .lightbox__close,
  .media-frame img,
  .testi__card {
    transition: none;
  }

  .testi__track {
    animation: none;
  }

  /* still fully open/closed, just no easing */
  .faq__item--open .faq__answer {
    opacity: 1;
    transform: none;
  }

  .lightbox,
  .lightbox__body {
    animation: none;
  }

  .gold-thread__ridge--a,
  .gold-thread__ridge--b {
    animation: none;
  }

  .gold-thread__ridge--b {
    opacity: 0;
  }

  .skeptics__prose .skeptics__question,
  .proof .section__title.proof__answer-title {
    animation: none;
    filter: none;
  }

  /* about: the two-step gold quote reveal + the video warm-in are stilled */
  .about__pq .about__pq-gold {
    opacity: 1;
    transform: none;
    transition: none;
  }


  .laptop__poster:hover img,
  .media-frame--facade:hover img,
  .media-frame--facade:active,
  .cta-button:hover,
  .cta-button:active,
  .sticky-bar__cta:hover,
  .sticky-bar__cta:active,
  .lead-form__submit:hover,
  .lead-form__submit:active,
  .whatsapp:hover,
  .whatsapp:active {
    transform: none;
  }
}

/* ===== Legal-checklist additions (2026-07-16): a11y widget, modes, legal links ===== */

/* ---------- Accessibility widget (רכיב נגישות) ---------- */
.a11y {
  position: fixed;
  inset-inline-end: 20px;
  inset-block-end: 20px;
  z-index: var(--z-whatsapp);
}

.a11y__btn {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--line-strong);
  color: var(--gold);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.a11y__btn:hover {
  transform: scale(1.07);
}

.a11y__panel {
  position: absolute;
  inset-block-end: 68px;
  inset-inline-end: 0;
  inline-size: 248px;
  padding: 0.9rem 1rem 1rem;
  border-radius: 14px;
  background: #15120c;
  border: 1px solid var(--line-strong);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}

.a11y__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: 0.5rem;
}

.a11y__title {
  font-weight: 700;
  color: var(--gold);
}

.a11y__close {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-muted);
  cursor: pointer;
}

.a11y__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding-block: 0.42rem;
  color: var(--text);
  font-size: 0.95rem;
}

.a11y__steps {
  display: flex;
  gap: 4px;
}

.a11y__step {
  min-inline-size: 34px;
  padding: 0.2rem 0.3rem;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.a11y__step[aria-pressed='true'] {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--cta-ink);
}

/* toggle switch: the knob slides toward inline-start when on */
.a11y__toggle {
  position: relative;
  inline-size: 42px;
  block-size: 24px;
  padding: 0;
  border-radius: 999px;
  background: #2a251c;
  border: 1px solid var(--line-strong);
  cursor: pointer;
  transition: background 0.15s ease;
}

.a11y__toggle .a11y__knob {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 2px;
  inline-size: 18px;
  block-size: 18px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform 0.15s ease, background 0.15s ease;
}

.a11y__toggle[aria-pressed='true'] {
  background: var(--gold-deep);
}

.a11y__toggle[aria-pressed='true'] .a11y__knob {
  transform: translateX(-18px);
  background: #fff;
}

.a11y__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-start: 0.6rem;
  padding-block-start: 0.6rem;
  border-block-start: 1px solid var(--line);
}

.a11y__reset {
  padding: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
}

.a11y__link {
  color: var(--gold);
  font-size: 0.85rem;
}

body.is-lightbox-open .a11y {
  display: none;
}

/* ---------- Accessibility modes (set on <html> by the widget) ---------- */
/* text enlargement: scaling the root font-size scales every rem-based size */
html.a11y-text-1 {
  font-size: 112.5%;
}

html.a11y-text-2 {
  font-size: 125%;
}

/* high contrast: brighten the text tokens, deepen the stage to pure black */
html.a11y-contrast {
  --bg: #000;
  --text: #fff;
  --text-muted: #f0ede6;
  --text-subtle: #ddd6c8;
  --gold: #ffd75e;
  --gold-hi: #ffe9a8;
}

html.a11y-contrast body {
  background: #000;
}

/* stop animations: kill motion everywhere and force revealed content visible */
html.a11y-no-motion *,
html.a11y-no-motion *::before,
html.a11y-no-motion *::after {
  animation: none !important;
  transition: none !important;
}

html.a11y-no-motion {
  scroll-behavior: auto !important;
}

html.a11y-no-motion .reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* legal pages nav (מדיניות פרטיות · הצהרת נגישות) */
.footer__legal {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-subtle);
}

.footer__legal a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer__legal a:hover {
  color: var(--gold);
}

/* consent-by-submission notice: one quiet line, no checkbox friction */
.lead-form__notice {
  margin-block-start: 0.7rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-subtle);
}

.lead-form__notice a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lead-form__notice a:hover {
  color: var(--gold);
}

/* pending social platforms: faded reminders until real links arrive */
.final__social--pending {
  opacity: 0.3;
  filter: grayscale(0.4);
  pointer-events: none;
  cursor: default;
}

/* ==================== Assessment questionnaire (step 2) ==================== */
.assess-body {
  background: radial-gradient(ellipse 60% 34% at 50% 0%, rgba(227, 194, 104, 0.07), transparent 70%), var(--bg);
}

.assess-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem 0.9rem;
  background: linear-gradient(180deg, rgba(11, 10, 8, 0.96) 55%, transparent 100%);
  pointer-events: none;
}

.assess-progress__track {
  inline-size: min(460px, 64vw);
  block-size: 16px;
  border-radius: 999px;
  background: #262116;
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.assess-progress__fill {
  position: relative;
  block-size: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 45%, var(--gold-deep) 100%);
  box-shadow: 0 0 12px rgba(227, 194, 104, 0.45);
  overflow: hidden;
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* the sheen: a bright band that sweeps across the gold on every increase
   (the .is-pulsing class is re-triggered by assessment.js) */
.assess-progress__fill::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: -60%;
  inline-size: 55%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 250, 230, 0.85) 50%,
    transparent 100%
  );
  opacity: 0;
  pointer-events: none;
}

.assess-progress__fill.is-pulsing::after {
  animation: assess-sheen 0.85s ease-out;
}

@keyframes assess-sheen {
  0% {
    inset-inline-start: -60%;
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  100% {
    inset-inline-start: 115%;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .assess-progress__fill {
    transition: none;
  }

  .assess-progress__fill.is-pulsing::after {
    animation: none;
  }
}

.assess-progress__label {
  min-inline-size: 3ch;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gold);
}

.assess {
  max-inline-size: 46rem;
  margin-inline: auto;
  padding: 4.6rem 1.2rem 5rem;
}

.assess__head {
  text-align: center;
  margin-block-end: 2.4rem;
}

.assess__logo {
  inline-size: clamp(150px, 22vw, 220px);
  block-size: auto;
  margin-inline: auto;
  margin-block-end: 1rem;
  filter: drop-shadow(0 0 22px rgba(227, 194, 104, 0.2));
}

.assess__title {
  font-weight: 900;
  font-size: clamp(1.7rem, 4.4vw, 2.5rem);
  line-height: 1.2;
  color: var(--text);
  margin-block-end: 0.8rem;
}

.assess__desc {
  color: var(--text-muted);
  line-height: 1.8;
  max-inline-size: 56ch;
  margin-inline: auto;
}

.assess__rule {
  border: none;
  border-block-start: 1px solid rgba(227, 194, 104, 0.22);
  margin-block: 2.4rem;
}

.assess__q {
  margin-block-end: 1.9rem;
}

.assess__label {
  display: block;
  font-weight: 700;
  color: var(--text);
  line-height: 1.65;
  margin-block-end: 0.65rem;
}

.assess__num {
  display: inline-grid;
  place-items: center;
  inline-size: 26px;
  block-size: 26px;
  margin-inline-end: 0.5rem;
  border-radius: 50%;
  background: rgba(227, 194, 104, 0.12);
  border: 1px solid var(--line-strong);
  color: var(--gold);
  font-size: 0.85rem;
}

.assess__opt {
  color: var(--text-subtle);
  font-weight: 400;
  font-size: 0.85em;
}

.assess__input {
  inline-size: 100%;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.6;
}

.assess__input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(227, 194, 104, 0.16);
}

.assess__input--area {
  resize: vertical;
  min-block-size: 7.2em;
}

.assess__choices {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.assess__choice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.55rem 0.8rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  color: var(--text-muted);
  line-height: 1.6;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.assess__choice:hover {
  border-color: var(--line-strong);
}

.assess__choice:has(input:checked) {
  border-color: var(--gold);
  background: rgba(227, 194, 104, 0.08);
  color: var(--text);
}

.assess__choice input {
  margin-block-start: 0.3em;
  accent-color: #e3c268;
}

.assess__choice--confirm {
  font-size: 0.92rem;
}

.assess__scale {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.assess__scale-end {
  font-size: 0.8rem;
  color: var(--text-subtle);
  padding-inline: 0.2rem;
}

.assess__scale-step input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.assess__scale-step span {
  display: grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--text-muted);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.assess__scale-step:hover span {
  border-color: var(--gold);
}

.assess__scale-step input:checked + span {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 60%, var(--gold-deep));
  border-color: var(--gold);
  color: var(--cta-ink);
}

.assess__note {
  margin-block-end: 1.9rem;
  padding: 1rem 1.2rem;
  border-inline-start: 3px solid var(--gold-deep);
  color: var(--text);
  line-height: 1.75;
  background: rgba(227, 194, 104, 0.05);
  border-radius: 0 10px 10px 0;
}

.assess__video {
  margin-block: 2.2rem;
  text-align: center;
}

.assess__video-title {
  color: var(--gold);
  font-size: clamp(1.15rem, 2.6vw, 1.45rem);
  margin-block-end: 0.5rem;
}

.assess__video-desc {
  color: var(--text-muted);
  line-height: 1.7;
  font-size: 0.95rem;
  max-inline-size: 56ch;
  margin-inline: auto;
  margin-block-end: 1rem;
}

.assess__player {
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
}

.assess__player iframe {
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}

.assess__submit {
  inline-size: 100%;
  margin-block-start: 1rem;
}

.assess__privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-block-start: 0.7rem;
  font-size: 0.82rem;
  color: var(--text-subtle);
}

.assess__lock {
  flex: none;
  color: var(--gold);
}

.assess__done {
  text-align: center;
  padding-block: 4rem;
  color: var(--text-muted);
  font-size: 1.05rem;
}

.assess__done-big {
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 800;
  color: var(--gold);
  margin-block-end: 0.6rem;
}

/* ===== assess-scale mobile: the 1-10 row can't fit a phone - break it into
   a labeled 5x2 grid with big tap targets (RTL: 1 starts at the right) ===== */
@media (max-width: 700px) {
  .assess__scale {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    align-items: center;
  }

  .assess__scale-end {
    grid-column: 1 / -1;
    font-size: 0.85rem;
    padding-inline: 0;
  }

  .assess__scale-end:last-of-type {
    text-align: end;
  }

  .assess__scale-step span {
    inline-size: 100%;
    max-inline-size: 54px;
    block-size: auto;
    aspect-ratio: 1;
    margin-inline: auto;
  }

  /* a little more breathing room for the fixed progress bar */
  .assess {
    padding-block-start: 5.2rem;
  }
}

/* ==================== Thank-you page (questionnaire completion) ==================== */
.thanks {
  max-inline-size: 52rem;
  margin-inline: auto;
  padding: clamp(2rem, 6vw, 3.6rem) 1.2rem 4rem;
  text-align: center;
}

.thanks__logo {
  inline-size: clamp(150px, 20vw, 210px);
  block-size: auto;
  margin-inline: auto;
  margin-block-end: 1.6rem;
  filter: drop-shadow(0 0 22px rgba(227, 194, 104, 0.2));
}

.thanks__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  align-items: center;
  gap: clamp(1.2rem, 4vw, 2.6rem);
  margin-block-end: clamp(2rem, 5vw, 3rem);
  text-align: start;
}

/* glow lives on the PARENT: a mask only covers the img's own box, so putting
   the drop-shadow on the img clips the glow at its edges */
.thanks__portrait {
  filter: drop-shadow(0 0 34px rgba(227, 194, 104, 0.14));
}

.thanks__portrait img {
  inline-size: 100%;
  max-inline-size: 300px;
  block-size: auto;
  display: block;
  margin-inline: auto;
  /* she dissolves into the dark - never a flat pasted image */
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}

.thanks__title {
  font-weight: 900;
  font-size: clamp(1.8rem, 4.6vw, 2.7rem);
  line-height: 1.15;
  background: linear-gradient(180deg, var(--gold-hi) 8%, var(--gold) 55%, var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-block-end: 0.7rem;
}

.thanks__lead {
  font-weight: 700;
  color: var(--text);
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  margin-block-end: 0.6rem;
}

.thanks__body {
  color: var(--text-muted);
  line-height: 1.8;
}

.thanks__video {
  margin-block-end: 2.2rem;
}

.thanks__video-title {
  color: var(--gold);
  font-weight: 800;
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  margin-block-end: 0.7rem;
}

.thanks__video-copy {
  color: var(--text-muted);
  line-height: 1.8;
  max-inline-size: 58ch;
  margin-inline: auto;
  margin-block-end: 0.5rem;
}

.thanks__player {
  margin-block-start: 1.2rem;
}

.thanks__whatsapp {
  color: var(--text-subtle);
  font-size: 0.95rem;
}

.thanks__whatsapp a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 700px) {
  .thanks__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .thanks__portrait img {
    max-inline-size: 210px;
  }
}

/* ============================================================
   Cookie consent banner — branded black+gold, RTL, mobile-safe
   ============================================================ */
.cookie-consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 9999;
  background: linear-gradient(180deg, rgba(11,10,8,.97), rgba(7,6,4,.99));
  border-top: 1px solid rgba(227,194,104,.35);
  box-shadow: 0 -10px 40px rgba(0,0,0,.5);
  backdrop-filter: blur(6px);
  animation: cookie-rise .5s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes cookie-rise { from { transform: translateY(100%); } to { transform: translateY(0); } }
.cookie-consent[hidden] { display: none; }
.cookie-consent__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px 22px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.cookie-consent__text {
  margin: 0;
  color: #e8e2d4;
  font-size: 14px;
  line-height: 1.6;
  flex: 1 1 auto;
}
.cookie-consent__text a { color: var(--gold, #e3c268); text-decoration: underline; text-underline-offset: 2px; }
.cookie-consent__actions { display: flex; gap: 10px; flex: 0 0 auto; }
.cookie-consent__btn {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
  white-space: nowrap;
}
.cookie-consent__btn--accept {
  background: linear-gradient(180deg, #f6e7b4 8%, #e3c268 52%, #a97f2f 96%);
  color: #1a1408;
  box-shadow: 0 4px 16px rgba(227,194,104,.28);
}
.cookie-consent__btn--accept:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(227,194,104,.4); }
.cookie-consent__btn--decline {
  background: transparent;
  color: #cfc7b4;
  border-color: rgba(227,194,104,.4);
}
.cookie-consent__btn--decline:hover { background: rgba(227,194,104,.08); color: #e8e2d4; }
.cookie-consent__btn:focus-visible { outline: 2px solid var(--gold, #e3c268); outline-offset: 2px; }

@media (max-width: 640px) {
  .cookie-consent__inner { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); text-align: center; }
  .cookie-consent__actions { justify-content: center; }
  .cookie-consent__btn { flex: 1 1 auto; padding: 12px 16px; }
}

/* Failsafe: if frontend.js never finishes (blocked/errored), force reveal content visible so the page is never blank. */
.reveal-safe .reveal{opacity:1 !important;transform:none !important;}

/* Consent checkbox required-error in the questionnaire */
.assess__q-error{color:#ff7a7a;font-size:14px;font-weight:600;margin:8px 0 0;text-align:right;}
.assess__q--error .assess__choice--confirm{outline:1px solid rgba(255,122,122,.55);outline-offset:4px;border-radius:8px;}

/* a11y: visible keyboard focus on the 1-10 scale (the input is visually hidden) */
.assess__scale-step input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
/* mobile <=360px: 6 social icons (6*44px + gaps = 332px) overflow 320px viewports — wrap + tighten so nothing is clipped */
@media (max-width: 360px) {
  .final__socials { flex-wrap: wrap; gap: 0.55rem; }
  .final__form-col, .final__form-col * { max-width: 100%; box-sizing: border-box; }
}

/* anchor targets clear the fixed top bar (WCAG-ish + UX) */
:target, #form, [id] { scroll-margin-top: 100px; }

/* screen-reader-only utility */
.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;}
/* enlarge carousel dot tap targets to ~24px without changing the visual dot (WCAG 2.5.8) */
.testi__dot{position:relative;}
.testi__dot::after{content:'';position:absolute;inset:-9px;}

/* standalone funnel-page footer (privacy + manage-cookies) */
.funnel-foot{max-width:760px;margin:48px auto 32px;padding:0 20px;text-align:center;font-size:.85rem;color:#8a8172;}
.funnel-foot a{color:#c8a86b;text-decoration:none;}
.funnel-foot a:hover,.funnel-foot a:focus-visible{text-decoration:underline;}
.funnel-foot span{margin:0 6px;opacity:.6;}
.consent-manage{cursor:pointer;}

/* Hero VSL — muted autoplay preview under a dark tint, tap for full audio */
.media-frame--hero { cursor: default; }
.hero__preview { position: absolute; inset: 0; }
.hero__preview iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.media-frame--hero .media-frame__scrim--tint { background: linear-gradient(180deg, rgba(7,6,4,0.20) 0%, rgba(7,6,4,0.30) 55%, rgba(7,6,4,0.52) 100%); }
.hero__play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; padding: 0; margin: 0; cursor: pointer; display: block; }
.hero__play .media-frame__play { transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.3s; }
.hero__play:hover .media-frame__play { transform: scale(1.06); box-shadow: 0 8px 28px rgba(0,0,0,0.5), 0 0 42px rgba(227,194,104,0.5); }
.hero__play:active .media-frame__play { transform: scale(0.98); }
.hero__play:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: -3px; border-radius: var(--radius-media); }
.hero__play-caption { position: absolute; inset-inline: 0; inset-block-start: calc(50% + 46px); text-align: center; color: #fff; font-weight: 700; font-size: 0.98rem; text-shadow: 0 2px 10px rgba(0,0,0,0.7); padding: 0 1.2rem; pointer-events: none; }
@media (max-width: 700px) { .hero__play-caption { inset-block-start: calc(50% + 34px); font-size: 0.84rem; } }

/* questionnaire top consent gate — the single privacy-policy agreement */
.assess__consent { background: linear-gradient(180deg, rgba(227,194,104,0.12), rgba(227,194,104,0.05)); border: 1.5px solid rgba(227,194,104,0.55); border-radius: 14px; padding: 18px 20px; margin: 0 0 26px; }
.assess__consent-title { margin: 0 0 8px; font-weight: 800; font-size: 1.05rem; color: #f4f0e7; }
.assess__consent-check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; line-height: 1.55; }
.assess__consent-check input[type=checkbox] { flex: none; width: 22px; height: 22px; margin-top: 2px; accent-color: #c8a86b; cursor: pointer; }
.assess__consent-check a { color: #e3c268; text-decoration: underline; font-weight: 700; }
.assess__consent-err { margin: 10px 0 0; color: #ff6b6b; font-weight: 600; font-size: 0.92rem; }
.assess__consent--error { border-color: #ff6b6b; box-shadow: 0 0 0 3px rgba(255,107,107,0.15); }
@media (max-width: 640px) { .assess__consent { padding: 15px 16px; } .assess__consent-title { font-size: 1rem; } }