@charset "UTF-8";
/* ==========================================================================
   Oraya — "מְרַצָּה מְרוּצָה" landing page
   Source comp: Oraya_Landing_Female_Page.pdf — 2 artboards, 1920 × 16275.
   Built mobile-first; one desktop breakpoint at 1024.
   Type is fluid: clamp(mobileMin, V/19.2 vw, V px) so every size resolves to
   the exact comp value at a 1920 viewport — which is what the overlay diff
   is measured against.
   ========================================================================== */

/* ---------- fonts ---------------------------------------------------------
   Assistant only. GveretLevinAlefAlefAlef appears ONCE in the entire comp
   (the script line in S13) so it is NOT loaded as a webfont — it ships as an
   outlined SVG (files/script-derech-chaim.svg).
   ------------------------------------------------------------------------ */
@font-face {
  font-family: "Assistant";
  src: url("../files/fonts/Assistant-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Assistant";
  src: url("../files/fonts/Assistant-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ------------------------------------------------------ */
:root {
  /* palette — read per section directly off the comp */
  --c-purple:      #48266a;   /* headings, CTAs, brand dark */
  --c-purple-mid:  #5f427d;   /* hero 3D lettering (baked into hero_bg) */
  --c-peri:        #879ace;   /* periwinkle — panel bg, CTA bg, accents */
  --c-peri-2:      #96a7d4;   /* periwinkle variant (page 2) */
  --c-amber:       #fbb03b;   /* dots, arrows, swashes, secondary pill */
  --c-amber-2:     #fcba54;
  --c-cream:       #fdf8f5;   /* section bands + page base */
  --c-beige:       #f0e4db;   /* leaf ornaments */
  --c-white:       #fff;
  --c-ink:         #111;      /* body copy on light bg is BLACK, not brand purple */
  --c-rule:        #ccc;

  /* layout — content column measured off the 4-card grid: x361.5 → x1560 */
  --col: 1200px;
  --gutter: 22px;

  /* fluid type scale (min, fluid, comp value) */
  --fs-100:   clamp(34px, 5.208vw, 100px);
  --fs-85:    clamp(30px, 4.406vw, 84.59px);
  --fs-80:    clamp(28px, 4.167vw, 80px);
  --fs-70:    clamp(26px, 3.646vw, 70px);
  --fs-60:    clamp(24px, 3.125vw, 60px);
  --fs-50:    clamp(20px, 2.604vw, 50px);
  --fs-42:    clamp(19px, 2.188vw, 42px);
  --fs-41:    clamp(19px, 2.121vw, 40.73px);
  --fs-40:    clamp(19px, 2.083vw, 40px);
  --fs-38:    clamp(19px, 1.989vw, 38.19px);
  --fs-34:    clamp(19px, 1.771vw, 34px);
  --fs-32:    clamp(18px, 1.667vw, 32px);
  --fs-26:    clamp(14px, 1.354vw, 26px);
  --fs-price: clamp(96px, 11.963vw, 229.68px);
  --fs-clock: clamp(44px, 5.040vw, 96.76px);
  --fs-cur:   clamp(20px, 2.051vw, 39.38px);

  --lh-tight: 1.12;
  --lh-head:  1.2;
  --lh-body:  1.5;
}

/* ---------- reset ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  background: var(--c-cream);
  color: var(--c-ink);
  font-family: "Assistant", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: var(--fs-34);
  line-height: var(--lh-body);
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, ol, blockquote, figure { margin: 0; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
strong { font-weight: 700; }

.skip {
  position: absolute; inset-inline-start: -9999px; top: 0;
  background: var(--c-purple); color: #fff; padding: 12px 20px; z-index: 100;
  font-size: 18px; border-radius: 0 0 8px 0;
}
.skip:focus { inset-inline-start: 0; }
:focus-visible { outline: 3px solid var(--c-amber); outline-offset: 3px; }

/* ---------- section shell ----------------------------------------------
   Sections are width:100% (never 100vw) so no scrollbar-gutter compensation
   is needed and colored bands can never overflow horizontally.
   ---------------------------------------------------------------------- */
.page { width: 100%; }

.sec { position: relative; width: 100%; }
.sec__inner {
  width: 100%;
  max-width: var(--col);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 2;
}
.sec--white { background: var(--c-white); }
.sec--cream, .sec--band { background: var(--c-cream); }

/* ---------- type helpers ------------------------------------------------ */
.t-100 { font-size: var(--fs-100); line-height: var(--lh-tight); }
.t-85  { font-size: var(--fs-85);  line-height: var(--lh-head); }
.t-80  { font-size: var(--fs-80);  line-height: var(--lh-head); }
.t-70  { font-size: var(--fs-70);  line-height: var(--lh-head); }
.t-60  { font-size: var(--fs-60);  line-height: 1.28; }
.t-50  { font-size: var(--fs-50);  line-height: 1.32; }
.t-41  { font-size: var(--fs-41);  line-height: 1.38; }
.t-34  { font-size: var(--fs-34);  line-height: var(--lh-body); }
.t-32  { font-size: var(--fs-32);  line-height: var(--lh-body); }
.t-bold   { font-weight: 700; }
.t-purple { color: var(--c-purple); }
.t-center { text-align: center; }

/* ==========================================================================
   S1 · HERO — one composed unit
   ========================================================================== */
.hero {
  position: relative;
  background: var(--c-cream);
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  z-index: 0;
}
.hero__inner {
  position: relative; z-index: 2;
  max-width: var(--col);
  margin-inline: auto;
  padding: 6.2% var(--gutter) 5%;
  min-height: 78vw;                 /* mobile: keep the 3D lettering visible */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
}
.hero__logo { width: clamp(150px, 10.3vw, 198px); margin-inline: auto; }
.hero__caption { padding-top: 8vw; }
.hero__title {
  font-size: var(--fs-80);
  font-weight: 700;
  color: var(--c-purple);
  line-height: 1.1;
}
.hero__sub {
  font-size: var(--fs-38);
  margin-top: .35em;
}
.hero__lead {
  font-size: var(--fs-38);
  margin-top: 1.15em;
  line-height: 1.36;
}

/* ==========================================================================
   Photo sections (S2 S5 S11 S16) — photo right, copy left, copy right-aligned.
   Mobile: .sec__media is a static aspect-ratio band above the copy.
   Desktop: it is absolutely positioned and the copy overlays it.
   ========================================================================== */
.sec--media { background: var(--c-cream); }
.sec--media .sec__media {
  position: relative;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}
.sec--media .sec__inner { padding-top: 7%; padding-bottom: 9%; }
.sec__copy { text-align: start; }

.sec--s2 .sec__media { aspect-ratio: 1920 / 620; background-image: url("../files/section1_bg.webp"); background-position: 62% top; }
.sec--s5 .sec__media { aspect-ratio: 1920 / 640; background-image: url("../files/section5_bg.webp"); background-position: 70% top; }
.sec--s11 .sec__media{ aspect-ratio: 1920 / 700; background-image: url("../files/section11_bg.webp"); background-position: 62% center; }
.sec--s16 .sec__media{ aspect-ratio: 1920 / 900; background-image: url("../files/section16_bg.webp"); background-position: 72% top; }

.sec--s2 .sec__copy > * + * { margin-top: .5em; }
.sec--s5 .sec__copy > * + * { margin-top: .9em; }
.sec--s11 .sec__copy > * + * { margin-top: .7em; }
.sec--s2 .t-60, .sec--s2 .t-100 { color: var(--c-purple); }

/* ==========================================================================
   S3 / S4b · "את משלמת" two-up cards
   ========================================================================== */
.sec--s3  .sec__inner { padding-top: 11%; padding-bottom: 8%; }
.sec--s4b .sec__inner { padding-top: 7%;  padding-bottom: 9%; }

.paycols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12% 0;
  margin-top: 9%;
}
.paycol { text-align: center; position: relative; }
.paycol__media { width: min(78%, 372px); margin-inline: auto; }
.paycol__media img { width: 100%; }
.paycol__dot {
  display: block;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--c-amber);
  margin: 4% auto 3%;
}
.paycol__title {
  font-size: var(--fs-50);
  font-weight: 700;
  color: var(--c-purple);
  line-height: 1.18;
  margin-bottom: .5em;
}
.paycol__body {
  font-size: var(--fs-34);
  line-height: 1.42;
  max-width: 32ch;
  margin-inline: auto;
}

/* ---------- S4 cream band ---------------------------------------------- */
.sec--band .sec__inner { padding-block: 3.2%; }

/* ==========================================================================
   S6 · let's check
   ========================================================================== */
.sec--s6 .sec__inner { padding-top: 9%; padding-bottom: 8%; }
.deco-rule { width: clamp(140px, 11.1vw, 214px); margin: 6% auto; }

/* ==========================================================================
   S7 · the scenario
   ========================================================================== */
.sec--s7 { padding-bottom: 0; }
.sec--s7 .sec__inner { padding-top: 8%; padding-bottom: 0; }

.clock {
  display: flex; align-items: center; justify-content: center;
  gap: 18px;
  color: var(--c-purple);
  font-size: var(--fs-clock);
  line-height: 1;
}
.clock__rule { display: block; height: 2px; width: clamp(70px, 14vw, 269px); background: var(--c-purple); }
.s7__setup { margin-top: 4%; }

.bubble {
  position: relative;
  margin: 7% auto 0;
  width: min(100%, 798px);
  padding: 6% 6% 6.5%;
  border: 2px solid var(--c-amber);
  border-radius: 28px;
  font-size: var(--fs-50);
  line-height: 1.42;
}
/* speech tail — comp places it on the inline-start (right) underside */
.bubble::before,
.bubble::after {
  content: "";
  position: absolute;
  inset-inline-start: 12%;
  width: 40px; height: 28px;
  clip-path: polygon(0 0, 100% 0, 26% 100%);
}
.bubble::before { bottom: -28px; background: var(--c-amber); }
.bubble::after  { bottom: -25px; background: var(--c-cream); }

.s7__ask { margin-top: 9%; }
.toggles { width: min(72%, 538px); margin: 5% auto 0; }
.arrow-down { width: clamp(42px, 3.97vw, 76.2px); margin: 7% auto; }

.s7__iceberg > strong { display: block; color: var(--c-ink); line-height: 1.24; }
.s7__iceberg > .t-34  { display: block; margin-top: 1.1em; line-height: 1.45; }
.s7__mistake { margin-top: 1.4em; }
.s7__mistake .t-34 { line-height: 1.5; }

.flow3 {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 6% 0;
  margin: 10% auto 0;
}
.flow3__item {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
}
.flow3__item img { height: clamp(74px, 6.7vw, 129px); width: auto; }
.flow3__label {
  font-size: var(--fs-60);
  font-weight: 700;
  line-height: 1.14;
  text-align: center;
}
/* mobile: flow reads top→bottom, so the arrows rotate to match */
.flow3__arrow img { width: clamp(44px, 5.48vw, 105px); transform: rotate(-90deg); }

/* ---------- S8 periwinkle panel — straddles the S7/S9 seam ------------- */
.panel {
  position: relative;
  z-index: 3;
  width: min(calc(100% - 2 * var(--gutter)), 944px);
  margin: 10% auto -8%;
  padding: 6% 6.5% 7%;
  background: var(--c-peri);
  border-radius: 26px;
  color: #fff;
  text-align: center;
}
.panel__body { font-size: var(--fs-42); line-height: 1.45; }
.panel__punch {
  position: relative;
  display: inline-block;
  margin-top: .7em;
  font-size: var(--fs-80);
  font-weight: 700;
  line-height: 1.2;
}
.panel__underline {
  position: absolute;
  inset-inline: 0;
  bottom: -.34em;
  width: 100%;
}

/* ==========================================================================
   S9 · not every "yes"
   ========================================================================== */
/* overflow:hidden belongs in the BASE, not only the desktop block: on mobile
   .s9__media is widened to 118% and would otherwise give the page a
   horizontal scrollbar. Desktop needs it too, for the right-edge bleed. */
.sec--s9 { overflow: hidden; }
.sec--s9 .sec__inner { padding-top: 16%; padding-bottom: 8%; }
.s9__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7% 0;
  margin-top: 8%;
  align-items: center;
}
.reasons {
  display: grid;
  gap: 1.1em;
  font-size: var(--fs-32);
  text-align: center;
}
.reasons li { position: relative; padding-bottom: 1.1em; }
.reasons li:not(:last-child)::after {
  content: "";
  position: absolute; bottom: 0; inset-inline-start: 50%;
  transform: translateX(50%);
  width: 147px; max-width: 60%; height: 2px;
  background: var(--c-amber);
}

/* ==========================================================================
   S10 · outcome cards
   ========================================================================== */
.sec--s10 .sec__inner { padding-top: 4%; padding-bottom: 9%; }
.s10__sub { margin-top: 1.1em; }
.s10__sub .t-50 { display: inline-block; margin-top: .5em; }

.outcomes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 9%;
}
.outcome {
  background: var(--c-cream);
  border-radius: 14px;
  padding: 26px 16px 30px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.outcome img { height: clamp(52px, 4.5vw, 88px); width: auto; }
.outcome__title {
  font-size: var(--fs-40);
  font-weight: 700;
  color: var(--c-purple);
  margin: .5em 0 .2em;
}
.outcome__body { font-size: var(--fs-32); line-height: 1.36; }

/* ==========================================================================
   S12 · you'll start noticing — amber arrow between rows
   ========================================================================== */
.sec--s12 .sec__inner { padding-top: 10%; padding-bottom: 8%; }
.s12__intro .t-80 { display: inline-block; margin-top: .3em; }
.notices { margin-top: 8%; }
.notice { text-align: center; }
.notice + .notice { margin-top: clamp(74px, 8.2vw, 158px); position: relative; }
.notice + .notice::before {
  content: "";
  position: absolute;
  top: clamp(-52px, -5.6vw, -34px);
  inset-inline-start: 50%;
  transform: translateX(50%);
  width: clamp(26px, 1.98vw, 38px);
  height: clamp(36px, 2.74vw, 53px);
  background: url("../files/section7_chevron_down.webp") center / contain no-repeat;
}
.notice__title {
  font-size: var(--fs-50);
  font-weight: 700;
  color: var(--c-purple);
  line-height: 1.2;
}
.notice__body { font-size: var(--fs-32); margin-top: .3em; }

/* ==========================================================================
   S13 · every change starts with understanding
   ========================================================================== */
.sec--s13 { overflow: hidden; }
.sec--s13 .sec__inner { padding-top: 8%; padding-bottom: 8%; }
.sec--s13 .t-50 { margin-top: .55em; line-height: 1.42; }
.leaf {
  position: absolute;
  top: 30%;
  width: clamp(90px, 8.8vw, 170px);
  z-index: 1;
  pointer-events: none;
}
.leaf--start { inset-inline-start: 0; }
.leaf--end   { inset-inline-end: 0; }

.script { position: relative; display: inline-block; margin-top: .5em; }
.script__img { width: clamp(230px, 26.9vw, 517px); margin-inline: auto; }
.script__underline { width: clamp(236px, 27.6vw, 531px); margin: .2em auto 0; }

/* ==========================================================================
   S14 · one shared price
   ========================================================================== */
.sec--s14 .sec__inner { padding-top: 9%; padding-bottom: 7%; }
.s14__lead .t-70 { display: inline-block; margin-top: .25em; }
.chip {
  display: inline-block;
  margin-top: 6%;
  padding: .38em 1.15em;
  background: var(--c-cream);
  border-radius: 12px;
  color: var(--c-purple);
  font-size: var(--fs-70);
  font-weight: 700;
  line-height: 1.24;
}

/* ==========================================================================
   S15 · the offer
   ========================================================================== */
.sec--s15 .sec__inner { padding-top: 6%; padding-bottom: 9%; }
.price {
  position: relative;
  display: flex;                 /* block-level so margin-inline:auto centres it;
                                    as inline-flex it shared a line box and drifted */
  width: fit-content;
  margin-inline: auto;
  align-items: flex-start;
  gap: .1em;
  margin-top: 2%;
  color: var(--c-purple);
  font-weight: 700;
  line-height: 1;
}
.price__num { font-size: var(--fs-price); letter-spacing: -.02em; }
.price__cur { font-size: var(--fs-cur); margin-top: .9em; }
.price__underline {
  position: absolute;
  inset-inline: -6%;
  bottom: -.16em;
  width: 112%;
}

.cta {
  display: flex;                 /* block-level: see .price note */
  align-items: center;
  gap: clamp(14px, 1.6vw, 30px);
  margin-top: 8%;
  min-height: 56px;
  padding: .42em 1.1em;
  background: var(--c-peri);
  border-radius: 999px;
  color: #fff;
  font-size: var(--fs-50);
  font-weight: 700;
  box-shadow: 0 18px 30px -12px rgba(72, 38, 106, .38);
  transition: transform .18s ease, box-shadow .18s ease;
}
/* own line + own centring: as inline-level siblings the CTA and the pill would
   share one line box and centre as a GROUP, leaving each individually off-axis */
.cta, .pill { margin-inline: auto; width: fit-content; }
.cta:hover { transform: translateY(-2px); box-shadow: 0 22px 34px -12px rgba(72, 38, 106, .46); }
.cta__knob {
  flex: none;
  width: clamp(34px, 3.7vw, 71px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
}

.pill {
  display: block;
  margin-top: 5%;
  padding: .36em 1.15em;
  min-height: 48px;
  background: var(--c-amber);
  border-radius: 999px;
  color: #fff;
  font-size: var(--fs-50);
  font-weight: 700;
  line-height: 1.6;
  transition: filter .18s ease;
}
.pill:hover { filter: brightness(1.06); }

/* ==========================================================================
   S16 · about + signoff
   ========================================================================== */
.sec--s16 .sec__copy > * + * { margin-top: 1.1em; }
.signoff { margin-top: 10%; }
.signoff__name {
  font-size: var(--fs-50);
  font-weight: 700;
  color: var(--c-purple);
  line-height: 1.28;
}
.signoff__role { color: var(--c-peri); }

.creds {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .5em .7em;
  margin-top: .7em;
  font-size: var(--fs-34);
}
.creds__sep { width: 2px; height: 1.1em; background: var(--c-amber); display: block; }
.closing { margin-top: 1.6em; font-size: var(--fs-40); line-height: 1.42; }
.closing strong { color: var(--c-purple); }

/* ==========================================================================
   Footer
   ========================================================================== */
.foot { background: var(--c-white); padding: 26px var(--gutter); }
.foot__credit {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: var(--fs-26);
  color: #555;
  direction: ltr;
}
.foot__credit img { width: clamp(52px, 3.85vw, 74px); opacity: .75; }

/* ==========================================================================
   Floating CTA — IL convention, added on top of the comp
   ========================================================================== */
.fab {
  position: fixed;
  inset-block-end: 18px;
  inset-inline-end: 18px;
  z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 82px; height: 82px;
  border-radius: 50%;
  background: var(--c-purple);
  color: #fff;
  text-align: center;
  box-shadow: 0 14px 26px -8px rgba(0, 0, 0, .42);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.92);
  transition: opacity .26s ease, transform .26s ease, visibility .26s;
}
.fab.is-visible { opacity: 1; visibility: visible; transform: none; }
.fab__price { font-size: 21px; font-weight: 700; line-height: 1.05; }
.fab__label { font-size: 13px; line-height: 1.2; opacity: .9; }

/* ==========================================================================
   DESKTOP — single breakpoint. Layout shifts and decoration only;
   all type scaling lives in the fluid clamps above.
   ========================================================================== */
@media (min-width: 1024px) {

  /* Every value below is PIXELS read off the comp. Percentages are avoided
     here on purpose: a % padding on .sec__inner resolves against .sec (1920),
     not against the 1200 content column, which silently inflates every
     section. Comp section extents are noted per rule as `top..bottom`. */
  :root { --gutter: 0px; }

  .sec { --comp-h: auto; min-height: var(--comp-h); }

  /* Comp leading is uniformly ~1.2em — measured from tspan deltas: 40.8px at
     fs34, 45.9px at fs38.19, 40.8px at fs34 in every card body. Mobile keeps
     looser leading, which is a readability call for a narrow column, not type
     scaling. Declared last so it wins over the per-component values above. */
  body, .t-34, .t-32, .t-41, .t-50, .t-60,
  .paycol__body, .outcome__body, .notice__body, .reasons,
  .bubble, .panel__body, .closing, .hero__lead, .creds,
  .s7__iceberg > .t-34, .s7__mistake .t-34, .sec--s13 .t-50 { line-height: 1.2; }

  /* --- S1 hero · 0..1098 --------------------------------------------- */
  .hero__inner {
    min-height: 0;
    height: 1098px;
    padding: 0;
    display: block;
  }
  .hero__bg { object-position: 50% 50%; }
  .hero__logo { position: absolute; top: 85px; inset-inline: 0; }
  .hero__caption { position: absolute; top: 774px; inset-inline: 0; padding-top: 0; }
  .hero__sub  { margin-top: .22em; }
  .hero__lead { margin-top: .81em; }

  /* --- photo sections: copy overlays the photo ----------------------- */
  .sec--media .sec__media { position: absolute; inset: 0; aspect-ratio: auto; }
  .sec--s2 .sec__media,
  .sec--s5 .sec__media,
  .sec--s11 .sec__media,
  .sec--s16 .sec__media { background-position: center; background-size: cover; }

  .sec--media .sec__inner { display: flex; justify-content: flex-end; align-items: flex-start; }
  .sec--media .sec__copy { width: 47%; }
  .sec--media .sec__inner { padding-bottom: 0; }

  .sec--s2  { --comp-h: 836px; }                     /* 1098..1934 */
  .sec--s2  .sec__inner { padding-top: 252px; }
  .sec--s5  { --comp-h: 754px; }                     /* 4077..4831 */
  .sec--s5  .sec__inner { padding-top: 160px; }
  .sec--s5  .sec__copy { width: 62%; }
  /* This paragraph is set loose in the comp — 49px pitch, not the page's 1.2 */
  .sec--s5  .sec__copy p { line-height: 49px; }
  .sec--s5  .sec__copy > * + * { margin-top: 45px; }
  .sec--s11 { --comp-h: 747px; }                     /* 10723..11470 */
  .sec--s11 .sec__inner { padding-top: 74px; }
  .sec--s11 .sec__copy { width: 38%; }

  .sec--s16 { --comp-h: 1545px; }                    /* 14651..16196 */
  .sec--s16 .sec__inner { display: block; padding-top: 211px; padding-bottom: 46px; }
  /* The comp sets this bio in a 642px box ending at x1023 — NOT flush to the
     column's inline-start edge. At 55% (660px) flush right it wrapped into 4
     lines where the comp has 5, shifting everything below by ~127px. */
  .sec--s16 .sec__copy {
    width: 642px;
    margin-inline-start: auto;   /* RTL: auto on the start(=right) side pushes it LEFT */
    margin-inline-end: 21px;     /* block x381..1023 */
  }
  /* one blank line between paragraphs — the comp's para pitch is 4x41 */
  .sec--s16 .sec__copy > * + * { margin-top: 41px; }
  /* Signoff chain from the comp (offsets from section top 14651):
       divider box 1073 (15724..15766) -> 40 -> name box (2 lines @60) ->
       0 -> creds -> 83 -> closing (2 lines @48) -> 53 padding */
  .signoff { margin-top: 211px; }
  .signoff__name { line-height: 1.2; }   /* comp name pitch is 60 = 50 x 1.2 */
  .signoff .deco-rule { margin: 0 auto 30px; }   /* scoped: S6 uses 46/22 */
  .creds { margin-top: 0; }
  .closing { margin-top: 83px; }

  /* --- S3 · 1934..2986 / S4b · 3207..4077 --------------------------- */
  .sec--s3  { --comp-h: 1052px; }
  .sec--s3 .sec__inner  { padding-top: 97px; padding-bottom: 0; }
  .sec--s4b { --comp-h: 870px; }
  .sec--s4b .sec__inner { padding-top: 60px; padding-bottom: 0; }
  .sec--s4b .paycols { margin-top: 0; }
  .sec--s3  .paycols { margin-top: 36px; }   /* photo row top = comp 2179 */

  .paycols {
    grid-template-columns: 1fr 1px 1fr;
    gap: 0;
    margin-top: 40px;
    align-items: start;
  }
  .paycols::before {
    content: "";
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    width: 1px;
    height: 328px;
    background: var(--c-rule);
  }
  .paycol { padding-inline: 46px; }
  /* The comp centres the left card's copy on x678.5 while its grid column
     centres on 659.9 — the designer nudged this card ~19px right. */
  .paycol:first-child { padding-left: 65px; padding-right: 27px; }
  /* grid-row is REQUIRED here: with only grid-column set, sparse auto-placement
     refuses to backtrack past the ::before divider and drops card 2 onto row 2 */
  .paycol:first-child { grid-column: 3; grid-row: 1; }   /* col 3 = physically LEFT in RTL */
  .paycol:last-child  { grid-column: 1; grid-row: 1; }
  /* Card photos ship as @4/3 exports (496/475/537/536 px wide). Sizing the
     FRAME to the comp dimension keeps the raw pixel size out of layout —
     `width:auto` on the img would render 496px and push the section 124px tall.
     The comp aligns the two DOTS, not the photo edges: the photos differ in
     height and neither top- nor bottom-align. A fixed frame height puts both
     dots on one line, and a padding-top offsets the shorter photo the way the
     comp does — the S3 left photo deliberately overflows 19px past its frame. */
  /* border-box so `height` is the frame INCLUDING padding-top — otherwise the
     offset is added on top of the height and the dot lands 16px low. */
  .paycol__media { margin-inline: auto; box-sizing: border-box; }
  .sec--s3  .paycol__media { height: 372px; }
  .sec--s4b .paycol__media { height: 338px; }
  .sec--s3  .paycol:nth-child(1) .paycol__media { width: 356px; padding-top: 35px; }
  .sec--s3  .paycol:nth-child(2) .paycol__media { width: 372px; }
  .sec--s4b .paycol:nth-child(1) .paycol__media { width: 402px; padding-top: 16px; }
  .sec--s4b .paycol:nth-child(2) .paycol__media { width: 403px; }
  /* position:relative is load-bearing — the dot is a block BACKGROUND, and the
     photo is replaced content, which paints above block backgrounds. Without
     it the frame's image covers the dot's top half and it reads as a half-disc. */
  .paycol__dot { position: relative; }
  .sec--s3  .paycol__dot { margin: -10px auto 12px; }   /* straddles the frame edge */
  .sec--s4b .paycol__dot { margin: 2px auto 12px; }     /* clears the shorter photo */
  /* The comp hand-sizes each card's text box, so the four wrap differently.
     Widths are read off the widest line the comp actually renders per card. */
  .paycol__title { margin-bottom: 39px; }        /* comp title->body gap */
  .sec--s3  .paycol:nth-child(1) .paycol__body { max-width: 440px; }
  .sec--s3  .paycol:nth-child(2) .paycol__body { max-width: 390px; }
  .sec--s4b .paycol:nth-child(1) .paycol__body { max-width: 455px; }
  .sec--s4b .paycol:nth-child(2) .paycol__body { max-width: 508px; }

  /* --- S4 band · 2986..3207 ----------------------------------------- */
  .sec--band { --comp-h: 221px; }
  .sec--band .sec__inner { padding-top: 47px; padding-bottom: 50px; }

  /* --- S6 · 4831..5492 ---------------------------------------------- */
  .sec--s6 { --comp-h: 661px; }
  .sec--s6 .sec__inner { padding-top: 68px; padding-bottom: 0; }
  .deco-rule { margin: 46px auto 22px; }

  /* --- S7 · 5492..8372 (panel overhangs to 8648) -------------------- */
  .sec--s7 { --comp-h: 2880px; }
  .sec--s7 .sec__inner { padding-top: 26px; }
  .clock__rule { width: 269px; }
  .s7__setup { margin-top: 42px; }
  .bubble { margin-top: 16px; padding: 58px 52px 62px; border-radius: 34px; }
  .s7__ask { margin-top: 122px; }
  .toggles { width: 538px; margin-top: 46px; }
  .arrow-down { margin: 64px auto; }
  .s7__mistake { margin-top: 28px; }

  .flow3 {
    grid-template-columns: auto auto auto auto auto;
    align-items: start;
    justify-content: center;
    /* gap 29 (not 44) puts the arrow centres at +-211.5 from the row centre,
       matching the comp. The comp row is not a perfectly regular grid — its
       outer labels sit ~7px wider than any single gap/width pair can satisfy —
       so the arrows, the one clean symmetric measurement, set the spacing. */
    gap: 0 29px;
    margin-top: 165px;
  }
  .flow3__item { width: 260px; gap: 26px; }
  .flow3__arrow { align-self: start; margin-top: 26px; }
  .flow3__arrow img { transform: none; }   /* desktop flow is horizontal */

  /* true overlay: straddles the S7/S9 seam, so it is positioned rather
     than flowed (comp y8204 = 2712 from S7 top) */
  .panel {
    position: absolute;
    top: 2712px;
    inset-inline: 0;
    margin: 0 auto;
    /* Comp panel is 8204..8648 = 444 tall, and its space is bottom-heavy:
       45 above the body, 96 below the punch. 45+202+5+96+96 = 444. */
    padding: 45px 60px 96px;
    border-radius: 30px;
  }
  .panel__punch { margin-top: 5px; }
  /* The comp draws the squiggle at its natural 660px under a 636px text box and
     drops it well clear of the baseline. Centred here — the comp nudges it 12px
     right of the text centre, which is hand-placement, not a rule. */
  /* 687, not the asset's natural 660: the webp carries ~13px of transparent
     margin each side, and the comp's visible squiggle measures a full 660. */
  .panel__underline { width: 687px; margin-inline: auto; bottom: -49px; }

  /* --- S9 · 8372..9990 ---------------------------------------------- */
  /* The comp bleeds the photo off the RIGHT edge (box x671.6..1927.4, 1256x837)
     and lets the title sit over its alpha-faded upper edge. A 1256px image
     cannot live in the 1200px content column, so it is positioned rather than
     placed in a grid cell; .sec__inner is lifted above it so the title reads. */
  .sec--s9 { --comp-h: 1618px; position: relative; overflow: hidden; }
  .sec--s9 .sec__inner { padding-top: 344px; padding-bottom: 0; }
  /* Lift the title and list over the photo. Safe to position these two: both
     are siblings of .s9__grid, never ancestors of .s9__media. */
  .sec--s9 .t-80, .reasons { position: relative; z-index: 2; }
  .s9__media {
    position: absolute; z-index: 1; margin: 0;
    top: 373px;                  /* comp 8744.9 - section top 8372 */
    /* Offsets resolve against .sec__inner's padding box (x360..1560) — it carries
       a global position:relative. Physical left/right, not logical: the comp
       bleeds this photo off the RIGHT edge regardless of RTL.
         left  312 -> page x672   (comp 671.6)
         right -368 -> page x1928 (comp 1927.4, i.e. 8px past the canvas) */
    left: 312px; right: -368px;
    width: auto; height: 837px;
  }
  .s9__media img { width: 100%; height: 100%; }
  .s9__grid { display: block; margin-top: 0; }
  /* Every comp line — all four items AND all three dividers — centres on
     x633.5, so this list is CENTRE-aligned and sits left of the photo.
     Baseline pitch is 121.7px: 39 line + 43 padding + 39 gap. */
  .reasons {
    display: grid; gap: 47px;
    width: 350px;
    margin-inline-start: auto;   /* RTL: auto on the start(=right) side pushes it LEFT */
    margin-inline-end: 99px;     /* block x459..809, centre 634 */
    margin-top: 119px;
    text-align: center;
  }
  /* 38 line + 37 padding puts each divider on the comp's 9005.5 / 9126.5 /
     9250.5; +47 gap makes the baseline pitch the comp's 122. */
  .reasons li { padding-bottom: 37px; }
  .reasons li:not(:last-child)::after { width: 147px; max-width: none; }
  .sec--s9 .arrow-down:first-of-type { margin: 142px auto 66px; }
  .sec--s9 .arrow-down:last-of-type  { margin: 60px auto 0; }

  /* --- S10 · 9990..10723 -------------------------------------------- */
  .sec--s10 { --comp-h: 733px; }
  .sec--s10 .sec__inner { padding-top: 24px; padding-bottom: 0; }
  /* Comp gaps here are much tighter than the em-based defaults: 5 under the H2
     and 3 under the lead, then a WIDE 88 before the cards. */
  .s10__sub { margin-top: 5px; }
  .s10__sub .t-50 { margin-top: 3px; }
  .outcomes { grid-template-columns: repeat(4, 1fr); gap: 21px; margin-top: 88px; }
  .outcome { padding: 30px 18px 34px; border-radius: 16px; }
  .outcome__title { margin: 9px 0 -1px; }

  /* --- S12 · 11470..13055 ------------------------------------------- */
  .sec--s12 { --comp-h: 1585px; }
  .sec--s12 .sec__inner { padding-top: 90px; padding-bottom: 0; }
  .notices { margin-top: 62px; }
  /* comp row-top deltas are ~222px and each row is ~113px tall */
  /* 6 notices = 5 gaps; 121 not 122 so the stack lands on the comp's 1585 */
  .notice + .notice { margin-top: 121px; }

  /* --- S13 · 13055..13594 ------------------------------------------- */
  .sec--s13 { --comp-h: 539px; }
  .sec--s13 .sec__inner { padding-top: 76px; padding-bottom: 0; }
  .sec--s13 .t-50 { margin-top: 6px; }
  .sec--s13 .script { margin-top: -12px; }
  .leaf { top: 165px; }

  /* --- S14 · 13594..14030 / S15 · 14030..14651 ---------------------- */
  .sec--s14 { --comp-h: 436px; }
  .sec--s14 .sec__inner { padding-top: 122px; padding-bottom: 16px; }
  .chip { margin-top: 17px; padding: 11px 60px; }
  .sec--s15 { --comp-h: 621px; height: 621px; position: relative; z-index: 5; }
  .sec--s15 .sec__inner { padding-top: 22px; padding-bottom: 0; }
  .cta { margin-top: 60px; min-height: 108px; padding: 0 46px; }
  .pill {
    margin-top: 71px;            /* spills past the S15 box onto S16's photo */
    min-height: 93px; padding: 0 52px; line-height: 93px;
  }

  /* --- footer · 16196..16275 ---------------------------------------- */
  .foot { padding: 24px 0; }
  .fab { width: 96px; height: 96px; inset-block-end: 28px; inset-inline-end: 28px; }
  .fab__price { font-size: 24px; }
  .fab__label { font-size: 14px; }
}

/* ==========================================================================
   MOBILE-ONLY adjustments — layout + decoration drops only.
   Kept deliberately small; if this block grows, the base wasn't mobile-first.
   ========================================================================== */
@media (max-width: 1023px) {
  /* slim horizontal-rhythm ornaments do no work in a narrow column → drop */
  .leaf { display: none; }

  /* the wide reflection photo would shrink to a smudge — give it room */
  .s9__media { width: 118%; margin-inline-start: -9%; }

  /* the offer swash reads better tucked tighter under the numeral */
  .price__underline { inset-inline: -4%; width: 108%; }
}