/* ==========================================================================
   וולנס — סטודיו לאימון
   Material 3, played straight, on a deep plum tonal palette.

   Two rules this file never breaks, both pinned by the client:
   1. NO gradients. Anywhere. Depth is tonal fill + real cast shadow, which is
      what Material 3 actually does — elevation is a surface tone, not a fade.
      Where a photo needs type over it, a solid tonal plate carries the type
      instead of a scrim.
   2. NO italic. `font-style: italic` appears nowhere; emphasis is weight.
   ========================================================================== */

/* ---------- 1. fonts ------------------------------------------------------ */

@font-face{font-family:'Miriam Libre';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/miriam-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:'Miriam Libre';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/miriam-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Sans Hebrew';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/noto-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:'Noto Sans Hebrew';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/noto-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}

/* ---------- 2. tokens ----------------------------------------------------- */

:root{
  /* --- the plum ramp. Sampled off the studio's own painted wall, then
     darkened until white type clears 12:1 on the field. --- */
  --plum-5:   #1B0912;   /* footer, deepest plate                       */
  --plum-10:  #2A0E1E;
  --plum-20:  #3A1428;
  --plum-30:  #4A1D33;   /* THE FIELD — hero plate, form, Dvir          */
  --plum-40:  #5E2742;   /* raised surface on the field                 */
  --plum-50:  #74304F;
  --plum-60:  #8C3D60;   /* pressed state on light grounds              */
  --plum-70:  #C98BA6;   /* plum as type ON the field — 6.1:1 on plum-30 */

  /* action on light grounds */
  --primary:      #6B2646;  /* 9.2:1 on white — filled button, links     */
  --primary-press:#54182F;

  /* tertiary — apricot. FILLS ONLY, and only on a plum ground, where it
     carries 9.4:1 against plum-30. It is never set as type on a light
     surface: at that size it would sit near 2.4:1 and stop being readable. */
  --apricot:      #F0A860;
  --apricot-press:#D98C42;
  --on-apricot:   #2A0E1E;  /* 9.1:1 on apricot                          */

  /* neutrals, tinted toward the plum so the page reads as one temperature.
     Deliberately NOT cream: the ground is a cool off-white with a faint
     mauve cast, which is what keeps a wellness page out of the spa cliché. */
  --surface:    #FBF8F9;
  --surface-c:  #F4ECEF;   /* surface-container                          */
  --surface-ch: #EBE0E5;   /* surface-container-high                     */
  --outline:    #D6C6CD;
  --outline-v:  #EADFE4;   /* outline-variant, hairlines                 */

  --ink:    #1D1218;       /* 15.8:1 on surface                          */
  --ink-2:  #48383F;       /* 8.4:1  — body                              */
  --ink-3:  #6B575F;       /* 5.4:1  — captions, never body              */

  --on-field:   #FFFFFF;   /* 12.9:1 on plum-30                          */
  --on-field-2: #EBDDE3;   /* 10.1:1                                     */
  --on-field-3: #C3A9B4;   /*  5.6:1 — captions on the field             */

  /* --- Material shape scale. Photographs sit at the small end on purpose:
     square-ish media against pill controls is what keeps the page from
     reading like a phone app. --- */
  --sh-xs:4px; --sh-s:8px; --sh-m:12px; --sh-l:16px; --sh-xl:28px; --sh-full:999px;

  /* --- elevation. M3 levels 1/2/3. --- */
  --el-1:0 1px 2px rgba(29,18,24,.28), 0 1px 3px 1px rgba(29,18,24,.11);
  --el-2:0 1px 2px rgba(29,18,24,.28), 0 2px 6px 2px rgba(29,18,24,.13);
  --el-3:0 4px 8px 3px rgba(29,18,24,.13), 0 1px 3px rgba(29,18,24,.28);

  /* --- 4dp spacing grid --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* --- type --- */
  --display:'Miriam Libre','Noto Sans Hebrew',system-ui,sans-serif;
  --text:'Noto Sans Hebrew',system-ui,-apple-system,'Segoe UI',sans-serif;

  --t-display: clamp(2.35rem, 5.6vw, 4.25rem);
  --t-h2:      clamp(1.85rem, 3.8vw, 2.9rem);
  --t-h3:      clamp(1.12rem, 1.9vw, 1.35rem);
  --t-lede:    clamp(1.06rem, 1.8vw, 1.28rem);
  --t-body:    clamp(1rem, 1.4vw, 1.0625rem);
  --t-sm:      .9375rem;
  --t-label:   .8125rem;
  --t-micro:   .6875rem;

  /* --- Material emphasized easing --- */
  --ease:cubic-bezier(.2,0,0,1);
  --ease-out:cubic-bezier(.05,.7,.1,1);
  --d-s:200ms; --d-m:350ms; --d-l:500ms;

  --wrap:1240px;
  --gut:clamp(20px, 5vw, 56px);
}

/* ---------- 3. base ------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--surface); color:var(--ink-2);
  font-family:var(--text); font-size:var(--t-body); font-weight:400; line-height:1.7;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{margin:0; color:var(--ink); font-family:var(--display); font-weight:700; line-height:1.12; letter-spacing:-.015em}
h1{font-size:var(--t-display); line-height:1.06; letter-spacing:-.025em}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3); font-family:var(--text); line-height:1.3; letter-spacing:-.005em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
img,video,svg{display:block; max-width:100%}
img,video{height:auto}
/* The UA rule for this is `[hidden]{display:none}` at zero specificity, so any
   class that sets `display` outranks it — `.btn` is `inline-flex`, which meant
   a hidden button stayed on screen. Anything toggled with the `hidden`
   property in main.js depends on this line. */
[hidden]{display:none!important}
a{color:var(--primary); text-decoration-thickness:1px; text-underline-offset:.22em}
button,input,select,textarea{font:inherit; color:inherit}
ul,ol{margin:0; padding:0; list-style:none}
strong,b{font-weight:700; color:var(--ink)}
/* every numeric range and currency amount — bidi reorders them into nonsense */
.ltr{direction:ltr; unicode-bidi:isolate; display:inline-block}

:focus-visible{outline:3px solid var(--primary); outline-offset:3px; border-radius:var(--sh-xs)}
.field :focus-visible,.foot :focus-visible{outline-color:var(--apricot)}

.skip{position:absolute; inset-inline-start:-9999px; top:0; z-index:100;
  background:var(--primary); color:#fff; padding:var(--s3) var(--s5);
  border-end-start-radius:var(--sh-m); border-end-end-radius:var(--sh-m); font-weight:700}
.skip:focus{inset-inline-start:0}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
section{padding-block:clamp(56px, 9vw, 118px)}
/* the app bar is fixed, so an anchor target must clear it or every nav link
   lands its own heading underneath the bar */
:target,section[id],[id]{scroll-margin-top:92px}

/* ---------- 4. shared section furniture ---------------------------------- */

.eyebrow{
  display:inline-flex; align-items:center; gap:var(--s2);
  font-size:var(--t-micro); font-weight:700; letter-spacing:.14em;
  color:var(--primary); margin:0 0 var(--s4);
}
.eyebrow::before{content:''; width:22px; height:2px; background:var(--primary); border-radius:2px}
.field .eyebrow{color:var(--apricot)}
.field .eyebrow::before{background:var(--apricot)}

.lede{font-size:var(--t-lede); line-height:1.62; color:var(--ink-2); max-width:54ch}
.field .lede{color:var(--on-field-2)}

h2 + .lede,h1 + .lede{margin-top:var(--s5)}

/* the chip that labels every invented fact */
.ph{
  display:inline-block; font-size:var(--t-micro); font-weight:700; letter-spacing:.09em;
  color:var(--ink-3); background:var(--surface-ch); border:1px solid var(--outline-v);
  padding:5px 11px; border-radius:var(--sh-full);
}
/* .ph is drawn for light grounds. Any dark section that carries one must
   restate BOTH colours rather than inheriting ink-on-ink. */
.field .ph{color:var(--on-field-3); background:var(--plum-20); border-color:var(--plum-40)}

/* ---------- 5. buttons — M3 filled / tonal / outlined -------------------- */

.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:var(--s2); min-height:56px; padding:0 var(--s6);
  border:0; border-radius:var(--sh-full); cursor:pointer;
  font-family:var(--text); font-size:1.0625rem; font-weight:700; letter-spacing:-.005em;
  text-decoration:none; text-align:center;
  transition:box-shadow var(--d-s) var(--ease), transform var(--d-s) var(--ease);
  overflow:hidden; -webkit-tap-highlight-color:transparent;
}
/* M3 state layer: 8% on hover, 12% pressed. A layer, not a colour swap. */
.btn::after{content:''; position:absolute; inset:0; background:currentColor; opacity:0;
  transition:opacity var(--d-s) var(--ease); pointer-events:none}
.btn:hover::after{opacity:.08}
.btn:active::after{opacity:.12}
.btn:active{transform:scale(.985)}

.btn--filled{background:var(--primary); color:#fff; box-shadow:var(--el-1)}
.btn--filled:hover{box-shadow:var(--el-2)}
/* on the plum field the filled button flips to apricot — the one place
   apricot is allowed to own a surface */
.field .btn--filled{background:var(--apricot); color:var(--on-apricot)}

.btn--tonal{background:var(--surface-ch); color:var(--primary)}
.field .btn--tonal{background:var(--plum-40); color:var(--on-field)}

.btn--outlined{background:transparent; color:var(--primary); box-shadow:inset 0 0 0 1.5px var(--outline)}
.field .btn--outlined{color:var(--on-field); box-shadow:inset 0 0 0 1.5px var(--plum-50)}

.btn--lg{min-height:64px; font-size:1.125rem; padding:0 var(--s7)}
.btn svg{width:20px; height:20px; flex:none}

/* the action group that closes most sections */
.acts{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s4); margin-top:var(--s6)}
.acts__note{font-size:var(--t-sm); color:var(--ink-3); font-weight:500}
.field .acts__note{color:var(--on-field-3)}

/* ---------- 6. top app bar ----------------------------------------------- */

.nav{
  position:fixed; inset-inline:0; top:0; z-index:50; height:72px;
  background:var(--surface); border-bottom:1px solid transparent;
  transition:box-shadow var(--d-m) var(--ease), border-color var(--d-m) var(--ease),
             transform var(--d-m) var(--ease);
}
.nav.is-stuck{box-shadow:var(--el-1); border-bottom-color:var(--outline-v)}
.nav.is-away{transform:translateY(-100%)}
.nav__in{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut);
  height:100%; display:flex; align-items:center; gap:var(--s6)}

.brand{display:flex; align-items:center; gap:var(--s3); text-decoration:none; color:var(--ink)}
.brand__mark{width:34px; height:34px; flex:none}
.brand__t{display:flex; flex-direction:column; line-height:1.15}
.brand__t b{font-family:var(--display); font-size:1.125rem; letter-spacing:-.01em}
.brand__t span{font-size:var(--t-micro); font-weight:600; letter-spacing:.1em; color:var(--ink-3)}

.nav__links{display:flex; gap:var(--s2); margin-inline-start:auto}
.nav__links a{
  padding:var(--s2) var(--s4); border-radius:var(--sh-full); text-decoration:none;
  color:var(--ink-2); font-size:var(--t-sm); font-weight:600;
  transition:background var(--d-s) var(--ease), color var(--d-s) var(--ease);
}
.nav__links a:hover{background:var(--surface-ch); color:var(--ink)}
.nav__cta{min-height:44px; padding-inline:var(--s5); font-size:var(--t-sm)}

/* The way back to the parent site. Deliberately the quietest control in the
   bar — a tonal chip, one step down in size from the nav links and two from
   the CTA — because it must be findable without ever competing with the
   studio's own action. */
.nav__back{
  display:inline-flex; align-items:center; gap:6px; flex:none;
  min-height:34px; padding:0 12px; border-radius:var(--sh-full);
  background:var(--surface-c); color:var(--ink-3); text-decoration:none;
  font-size:var(--t-micro); font-weight:700; letter-spacing:.04em;
  transition:background var(--d-s) var(--ease), color var(--d-s) var(--ease);
}
.nav__back svg{width:12px; height:12px; flex:none}
.nav__back:hover{background:var(--surface-ch); color:var(--ink)}

@media (max-width:1040px){
  .nav__links,.nav__cta{display:none}
  /* the links carried the auto margin that pushed everything to the trailing
     edge; with them gone it has to move to this one */
  .nav__back{margin-inline-start:auto}
}
/* Below ~380px the brand and a labelled chip start fighting for the bar, so
   the label goes and the chevron carries it — the accessible name is on the
   anchor, not in the span, so nothing is lost. */
@media (max-width:380px){
  .nav__back span{display:none}
  .nav__back{padding:0 9px}
}

/* ---------- 7. hero ------------------------------------------------------- */

.hero{padding-block:calc(72px + var(--s5)) 0; position:relative}
.hero__grid{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
.hero__stage{position:relative}

/* The frame NEVER moves. Only the picture inside it scales.
   The first build put the settle transform on this wrapper, so the whole frame
   grew and drifted 46px down into the proof chips beneath it and washed them
   out. `overflow:hidden` here plus the transform on the <video> contains the
   effect entirely inside the frame, which is what a parallax is supposed to be. */
.hero__media{
  position:relative; border-radius:var(--sh-l); overflow:hidden;
  background:var(--surface-ch); aspect-ratio:4/3;
}
.hero__media video,.hero__media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(var(--hs,1)) translateY(var(--hy,0px));
  transform-origin:50% 40%;
}

/* The plate that carries the type. A SOLID tonal surface, not a scrim — which
   is both the no-gradient rule and, on a page whose argument is "nothing here
   is left vague", the honest way to set type against a photograph.
   It sits BELOW the video rather than over it: the client is paying for the
   film, and half of it was hidden behind this plate.
   It carries `.field` in the markup, so the eyebrow, the filled button and the
   note pick up their on-dark values instead of rendering plum-on-plum. */
.hero__plate{
  position:relative; z-index:2; margin-top:calc(var(--s5) * -1);
  margin-inline:var(--s4);
  border-radius:var(--sh-xl); box-shadow:var(--el-3);
  padding:clamp(28px, 4vw, 52px);
}
.hero__plate h1{font-size:clamp(1.95rem, 4.4vw, 3.15rem); line-height:1.08; color:var(--on-field); max-width:19ch}
.hero__plate .lede{max-width:58ch}

/* the three proof marks live OUTSIDE the plate, as a chip row on the page
   ground: inside it they added ~110px of height to a plate that has to fit
   within the photograph's own height on desktop */
/* below the plate's own width the two actions stack full-width rather than
   leaving the secondary one orphaned against the inline-start edge */
@media (max-width:560px){
  .hero .acts .btn{flex:1 1 100%}
}

.hero__marks{
  display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s6);
}
.hero__marks li{
  display:flex; align-items:center; gap:var(--s2);
  background:var(--surface-c); border:1px solid var(--outline-v);
  border-radius:var(--sh-full); padding:9px 17px;
  font-size:var(--t-sm); font-weight:600; color:var(--ink-2);
}
.hero__marks svg{width:17px; height:17px; color:var(--primary); flex:none}

.hero__say .lede{margin-top:var(--s5)}

@media (min-width:900px){
  .hero{padding-block:calc(72px + var(--s6)) 0}
  .hero__media{aspect-ratio:16/9}
  /* The band runs the full content width, so it splits: headline on the
     reading side, lede and actions on the other. A single column this wide
     would give the lede a 100ch measure. */
  .hero__plate{
    display:grid; grid-template-columns:1.08fr 1fr; gap:var(--s8);
    align-items:center; margin-inline:var(--s6);
  }
  .hero__say .lede{margin-top:0}
}

/* ---------- 8. the problem ------------------------------------------------ */

.prob{background:var(--surface)}
.prob__grid{display:grid; gap:var(--s7); align-items:start}
@media (min-width:900px){ .prob__grid{grid-template-columns:1.05fr .95fr; gap:var(--s9)} }

.prob__body p{max-width:56ch}
.prob__punch{
  font-family:var(--display); font-weight:700; font-size:clamp(1.35rem,2.6vw,1.9rem);
  line-height:1.28; color:var(--ink); letter-spacing:-.02em; margin-top:var(--s5);
}

/* The inoculation card — a filled tonal container, which is Material's actual
   vocabulary for "this block is emphasised". It had a 5px accent bar down one
   edge; that side-tab is not in M3's system at all, and it is one of the most
   recognisable machine-made-UI tells. Emphasis comes from the tone step and
   from the display-weight line inside it. */
.inoc{
  background:var(--surface-ch); border-radius:var(--sh-xl); padding:clamp(24px,3vw,40px);
}
.inoc p{color:var(--ink-2)}
.inoc strong{display:block; font-family:var(--display); font-size:clamp(1.2rem,2.2vw,1.5rem);
  line-height:1.3; color:var(--ink); margin-top:var(--s3); letter-spacing:-.015em}

/* ==== ARCHIVED · not referenced by index.html ==============================
   These rule sets belong to sections cut on 2026-08-13 to bring the page from
   29 mobile screens to ~19. They are KEPT, not deleted, so restoring a section
   from plan.md's archive needs only the markup — never a rewrite of its CSS.
   See demos/wellness-gym/plan.md §4 and §5.
   ========================================================================= */

/* ---------- 8b. the outcome ----------------------------------------------
   The section the first build never had. It was all friction-removal and no
   desire: excellent at "nothing will be asked of you", silent on who you are
   in six months. This is where LF8 #1 finally lands, in daily terms rather
   than gym terms. */

.gain{background:var(--surface)}
.gain__head{max-width:60ch; margin-bottom:var(--s8)}

/* A before→after ledger, not a grid of six icon cards.
   Two reasons the icon grid went: the house rule against a section that is a
   grid of identical icon-heading-text cards, and the fact that a heart standing
   in for "lift your kid" is a generic icon doing an authored asset's job.
   The contrast pair also simply sells harder — the reader recognises the "today"
   line as themselves before they read what replaces it. */
.gain__list{display:grid; gap:0}
.gain__list li{
  padding-block:clamp(22px,2.6vw,30px);
  border-top:1px solid var(--outline-v);
  display:grid; gap:var(--s3);
}
.gain__list li:last-child{border-bottom:1px solid var(--outline-v)}

.gain__now{
  margin:0; font-size:var(--t-sm); line-height:1.6; color:var(--ink-3);
  display:flex; gap:var(--s3); align-items:baseline;
}
.gain__now span{
  flex:none; font-size:var(--t-micro); font-weight:700; letter-spacing:.11em;
  color:var(--ink-3); background:var(--surface-ch);
  border-radius:var(--sh-full); padding:4px 11px;
}
.gain__then{
  margin:0; font-family:var(--display); font-weight:700;
  font-size:clamp(1.16rem,2.1vw,1.5rem); line-height:1.3;
  letter-spacing:-.018em; color:var(--ink);
}

/* The timing chip. Five promises with no date is five promises nobody can
   check — and the ladder that carried the dates sat BELOW the ledger, so the
   reader had to cross-reference it themselves. Each row now states its own
   horizon, and the ladder collapsed into `.gain__honest`.
   A date is a measurement, so it earns the accent. */
.gain__aft{display:grid; gap:var(--s3); justify-items:start}
.gain__when{
  display:inline-block; background:var(--plum-30); color:var(--on-field);
  border-radius:var(--sh-full); padding:5px 13px;
  font-size:var(--t-micro); font-weight:700; letter-spacing:.08em;
}

.gain__honest{
  margin-top:var(--s7); background:var(--plum-30); color:var(--on-field-2);
  border-radius:var(--sh-xl); padding:clamp(22px,2.6vw,34px);
  font-size:var(--t-sm); line-height:1.7; max-width:none;
}

@media (min-width:900px){
  .gain__list li{grid-template-columns:.85fr 1.15fr; gap:var(--s8); align-items:baseline}
}

/* ---------- 8b2. the stakes ----------------------------------------------
   The section that finally carries LF8 #1. Everything before it was really
   LF8 #5 — comfort — wearing #1's clothes: stairs, kids, 4pm, sleep. Nothing
   said "you will live longer", and nothing said what happens if you don't.
   Comfort is worth ₪199; not losing your last independent decade is worth ₪420.

   On the plum field on purpose: this is the page's heaviest passage, and it
   also breaks a long light stretch between the hero and the band. It is the
   ONLY place carrying real sourced data — the same fiction/fact split
   kagan-dental uses. Sources live in copy.md. */

.stakes__head{max-width:56ch; margin-bottom:var(--s8)}

.stakes__list{display:grid; gap:0; counter-reset:st}
.stakes__list > li{
  counter-increment:st;
  padding-block:clamp(22px,2.8vw,32px);
  border-top:1px solid var(--plum-40);
  display:grid; gap:var(--s3);
  padding-inline-start:var(--s8); position:relative;
}
.stakes__list > li:last-child{border-bottom:1px solid var(--plum-40)}
.stakes__list > li::before{
  content:counter(st); position:absolute; inset-inline-start:0; top:clamp(22px,2.8vw,32px);
  font-family:var(--display); font-size:1.1rem; color:var(--apricot); line-height:1.3;
}
.stakes__list p{margin:0; max-width:62ch; color:var(--on-field-2); line-height:1.72}
.stakes__list b{color:var(--on-field)}

/* one figure at scale — a hierarchy, not a grid of stat tiles */
.stakes__big{
  font-family:var(--display); font-weight:700; color:var(--apricot);
  font-size:clamp(3.2rem,9vw,5.5rem); line-height:1; letter-spacing:-.04em;
}
.stakes__cap{font-size:var(--t-sm); color:var(--on-field-3)!important}

.stakes__turn{margin-top:var(--s8); max-width:64ch}
.stakes__punch{
  font-family:var(--display); font-weight:700; color:var(--on-field);
  font-size:clamp(1.4rem,3vw,2.15rem); line-height:1.24; letter-spacing:-.022em;
  margin-bottom:.7em;
}
.stakes__turn strong{color:var(--apricot)}

/* The honest limitation. An association is not a promise, and saying so is
   what earns the right to use the numbers at all — same voice as
   "מי שמבטיח לכם משהו תוך שבוע, מוכר". */
.stakes__honest,.stakes__now{
  margin-top:var(--s6); background:var(--plum-20); border-radius:var(--sh-l);
  padding:var(--s5) var(--s6); max-width:68ch;
}
.stakes__honest p,.stakes__now p{font-size:var(--t-sm); color:var(--on-field-2); margin-bottom:.6em}
.stakes__honest p:last-child,.stakes__now p:last-child{margin-bottom:0}
.stakes__honest b,.stakes__now b{color:var(--on-field)}
.stakes__honest strong{color:var(--apricot)}
/* emphasis by weight and rule, never by italic */
.nx{font-style:normal; font-weight:700; color:var(--on-field);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em}

/* ==== ARCHIVED · not referenced by index.html =============================
   The live chair-stand test, built and then removed on 2026-08-13 at the
   client's call: "unnecessary, and it does not convert to sales". Kept on the
   same terms as every other archived block — the markup and the JS are in
   ARCHIVE.md §8, so restoring it needs paste, not a rewrite.
   NOTE: `[hidden]{display:none!important}` in §3 was added for this widget and
   STAYS — it is a correct fix for the whole page, not a dependency of this.
   ========================================================================= */
/* ---------- 8b3. the live chair-stand test ------------------------------
   The one structural move the page owns. Everything else here is a stack of
   well-made sections in landing-page order; this is the only object on the
   page that does something, and it is the page's OWN test rather than a
   borrowed widget — #stakes already cites it and #plan already says Dvir
   runs it on day 0.

   Three constraints it is built under:
   1. Entirely optional. `.cst__panel` is display:none until JS adds `.is-live`,
      so a reader without scripting gets the heading, the validation and the
      day-0 line — which is exactly the list item this replaced.
   2. The clock is an instrument, never an offer. It appears inside the panel,
      it is labelled in seconds, and it never touches the price or the form.
      The page's no-urgency rule is about countdowns that sell; this one counts
      a measurement.
   3. It steps once per second rather than per frame, so `prefers-reduced-motion`
      has nothing continuous to suppress and the bar stays informative. */

.cst{
  margin-top:var(--s8); background:var(--plum-20);
  border-radius:var(--sh-xl); padding:clamp(24px,3.2vw,44px);
}
.cst__t{
  font-family:var(--display); font-weight:700; color:var(--on-field);
  font-size:clamp(1.28rem,2.4vw,1.75rem); line-height:1.24; letter-spacing:-.02em;
  margin-bottom:var(--s4); max-width:26ch;
}
.cst__say p{color:var(--on-field-2); max-width:62ch; font-size:var(--t-sm); line-height:1.72}
.cst__invite{margin-top:var(--s3); color:var(--apricot)!important; font-weight:700}

.cst__panel{display:none}
.cst.is-live .cst__panel{display:grid; gap:var(--s6); margin-top:var(--s7)}
/* Without scripting there is no test to take, so the two lines that only make
   sense next to one — the invitation and the safety note — go with it. What
   is left is a heading, the validation and the day-0 line: the list item this
   widget replaced, intact. */
.cst:not(.is-live) .cst__invite,
.cst:not(.is-live) .cst__safe{display:none}
@media (min-width:820px){
  .cst.is-live .cst__panel{grid-template-columns:1fr minmax(0,300px); gap:var(--s8)}
  .cst__out{grid-column:1 / -1}
}

/* --- setup: age band + the three instructions --- */
.cst__ages{border:0; padding:0; margin:0}
.cst__ages legend{padding:0; margin-bottom:var(--s3);
  font-size:var(--t-label); font-weight:700; color:var(--on-field)}
.cst__chips{display:flex; flex-wrap:wrap; gap:var(--s2)}
.cst__age{position:relative}
.cst__age input{position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer}
.cst__age > span{
  display:block; padding:10px 16px; border-radius:var(--sh-full);
  background:var(--plum-30); box-shadow:inset 0 0 0 1.5px var(--plum-50);
  font-size:var(--t-sm); font-weight:600; color:var(--on-field-2);
  transition:background var(--d-s) var(--ease), color var(--d-s) var(--ease),
             box-shadow var(--d-s) var(--ease);
}
.cst__age input:hover + span{background:var(--plum-40)}
.cst__age input:checked + span{background:var(--apricot); color:var(--on-apricot); box-shadow:none}
.cst__age input:focus-visible + span{outline:3px solid var(--apricot); outline-offset:3px}
.cst__age input:disabled + span{opacity:.45; cursor:default}

.cst__how{
  counter-reset:cst; display:grid; gap:var(--s3);
  margin-top:var(--s6); padding-top:var(--s5); border-top:1px solid var(--plum-40);
}
.cst__how li{
  counter-increment:cst; position:relative; padding-inline-start:var(--s6);
  font-size:var(--t-sm); line-height:1.6; color:var(--on-field-2);
}
.cst__how li::before{
  content:counter(cst); position:absolute; inset-inline-start:0; top:0;
  width:22px; height:22px; border-radius:50%; background:var(--plum-40);
  color:var(--on-field); font-size:var(--t-micro); font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

/* --- the stage: clock, the target, the two controls --- */
.cst__stage{display:grid; gap:var(--s4); align-content:start}

.cst__secs{
  margin:0 0 var(--s3); display:flex; align-items:baseline; gap:var(--s2);
  color:var(--on-field-3); font-size:var(--t-sm); font-weight:600;
}
.cst__secs b{font-family:var(--display); font-size:2rem; color:var(--on-field); line-height:1;
  letter-spacing:-.03em; min-width:2.2ch}
.cst__bar{height:6px; border-radius:var(--sh-full); background:var(--plum-40); overflow:hidden}
.cst__bar i{display:block; height:100%; width:100%; border-radius:inherit; background:var(--apricot)}

/* The target. Big enough for a thumb mid-rep and for a foot of travel between
   glances — a 56px pill would be missed by someone who is standing up. */
.cst__tap{
  display:grid; place-content:center; gap:var(--s1);
  min-height:clamp(148px,26vw,196px); padding:var(--s5);
  border:0; border-radius:var(--sh-xl); cursor:pointer;
  background:var(--apricot); color:var(--on-apricot);
  box-shadow:var(--el-2); -webkit-tap-highlight-color:transparent;
  transition:transform var(--d-s) var(--ease), background var(--d-s) var(--ease);
}
.cst__tap b{font-family:var(--display); font-size:clamp(3.4rem,9vw,4.6rem);
  line-height:1; letter-spacing:-.045em; color:var(--on-apricot)}
.cst__tap span{font-size:var(--t-label); font-weight:700; letter-spacing:.08em;
  color:var(--on-apricot)}
.cst__tap:not(:disabled):active{transform:scale(.975); background:var(--apricot-press)}
.cst__tap:disabled{
  background:var(--plum-30); box-shadow:none; cursor:default;
  color:var(--on-field-3);
}
.cst__tap:disabled b,.cst__tap:disabled span{color:var(--on-field-3)}

.cst__acts{display:flex; flex-wrap:wrap; gap:var(--s3)}
.cst__acts .btn{flex:1 1 auto; min-height:52px; padding-inline:var(--s5)}

/* --- the result --- */
.cst__out{
  background:var(--plum-30); border-radius:var(--sh-l); padding:var(--s5) var(--s6);
}
.cst__res-n{
  margin:0 0 var(--s4); display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap;
  font-size:var(--t-sm); color:var(--on-field-2);
}
.cst__res-n b{font-family:var(--display); font-size:clamp(2.6rem,7vw,3.6rem);
  line-height:1; letter-spacing:-.04em; color:var(--apricot)}
.cst__out p{font-size:var(--t-sm); line-height:1.7; color:var(--on-field-2); margin-bottom:.65em}
.cst__out p:last-child{margin-bottom:0}
.cst__res-v{color:var(--on-field)!important; font-weight:700}
.cst__res-c{
  margin-top:var(--s5)!important; padding-top:var(--s4); border-top:1px solid var(--plum-40);
  font-family:var(--display); font-weight:700; letter-spacing:-.018em;
  font-size:clamp(1.05rem,1.8vw,1.25rem)!important; line-height:1.35!important;
  color:var(--on-field)!important;
}
.cst__src{font-size:var(--t-micro); color:var(--on-field-3)}

.cst__safe{
  margin-top:var(--s6); padding-top:var(--s5); border-top:1px solid var(--plum-40);
  font-size:var(--t-micro); line-height:1.75; color:var(--on-field-3); max-width:72ch;
}
.cst__safe b{color:var(--on-field-2)}

/* the status line exists for screen readers only — everything it says is
   already on screen in larger type */
.cst__sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap}
/* ==== end ARCHIVED ======================================================== */

/* ---------- 8c. the band, and the sections that came with Part A ---------
   The page had eight screens of same-sized rectangles inside cards and never
   once gave an image scale. One full-bleed break is what gives it a beat. */

.band{margin:0; display:block; background:var(--surface-ch)}
.band img{width:100%; height:clamp(280px, 52vh, 560px); object-fit:cover; display:block}
/* the night band sits between the plum form and the plum footer, so its own
   ground is plum rather than the light one — otherwise the letterbox either
   side of the photo flashes white between two dark blocks while it loads */
.band--night{background:var(--plum-20)}

/* --- solution: the "what is this, in one line" the page never had --- */
.sol{background:var(--surface)}
.sol__grid{display:grid; gap:var(--s7); align-items:center}
@media (min-width:900px){ .sol__grid{grid-template-columns:1fr .9fr; gap:var(--s9)} }
.sol__pic{margin:0; border-radius:var(--sh-l); overflow:hidden; box-shadow:var(--el-1)}
.sol__pic img{width:100%; aspect-ratio:16/10; object-fit:cover}
/* "why not just do it alone, for free" — the heaviest objection at ₪420, and
   the page had already won the argument seven screens earlier in #wall, so
   this only has to collect the win. */
.alone{
  margin-top:var(--s6); background:var(--surface-ch); border-radius:var(--sh-l);
  padding:var(--s5) var(--s6);
}
.alone p{font-size:var(--t-sm); color:var(--ink-2); margin-bottom:.6em}
.alone p:last-child{margin-bottom:0}
.alone strong{color:var(--ink)}

.sol__facts{display:flex; flex-wrap:wrap; gap:var(--s5) var(--s7); margin-top:var(--s6);
  padding-top:var(--s5); border-top:1px solid var(--outline-v)}
.sol__facts li{display:flex; align-items:baseline; gap:var(--s3)}
.sol__facts b{font-family:var(--display); font-size:2rem; color:var(--primary); line-height:1}
.sol__facts span{font-size:var(--t-sm); color:var(--ink-2); max-width:14ch; line-height:1.4}

/* --- the picture that joins the problem section --- */
.prob__pic{margin:0 0 var(--s6); border-radius:var(--sh-l); overflow:hidden; box-shadow:var(--el-1)}
.prob__pic img{width:100%; aspect-ratio:3/2; object-fit:cover}
.routes__pic,.said__pic{margin:var(--s7) 0 0; border-radius:var(--sh-l); overflow:hidden;
  box-shadow:var(--el-1)}
.routes__pic img{width:100%; height:clamp(180px,26vh,260px); object-fit:cover}
.said__pic img{width:100%; height:clamp(200px,30vh,320px); object-fit:cover}

/* --- "and what happens after day 30" — closes the costliest hole --- */
.after30{
  margin-top:var(--s7); background:var(--plum-30); color:var(--on-field-2);
  border-radius:var(--sh-xl); padding:clamp(24px,3vw,40px);
}
.after30 h3{color:var(--on-field); font-family:var(--display);
  font-size:clamp(1.2rem,2vw,1.5rem); letter-spacing:-.018em; margin-bottom:var(--s4)}
.after30 p{max-width:64ch}
.after30 strong{color:var(--on-field)}

/* --- what a month is. Value BEFORE price, which the page had inverted. --- */
.val{background:var(--surface-c)}
.val__head{max-width:58ch; margin-bottom:var(--s8)}

/* ONE object. This section used to be `.val__stack` — three labelled cards,
   each a vertical list with its heading beside it, plus a separate figure
   below. That made it the THIRD section on the page built to that same
   skeleton (`#stakes`, `#plan`, `#value`), and it spent most of a mobile
   screen on furniture rather than on argument.
   A month is one thing you either buy or you don't, so it is drawn as one
   thing: a single raised plate, contents on the reading side, and the only
   frame on the page that is set in the reader's own kitchen.
   `.val__stack` and friends are kept below, marked ARCHIVED. */
.month{
  background:var(--surface); border-radius:var(--sh-xl); box-shadow:var(--el-1);
  padding:clamp(24px,3vw,40px);
  display:grid; gap:var(--s7);
}
@media (min-width:900px){
  .month{grid-template-columns:1fr minmax(0,340px); gap:var(--s8); align-items:start}
}
.month__ttl{
  margin:0 0 var(--s5); padding-bottom:var(--s4); border-bottom:1px solid var(--outline-v);
  font-family:var(--display); font-weight:700; color:var(--ink);
  font-size:clamp(1.5rem,2.8vw,2rem); letter-spacing:-.025em; line-height:1.1;
}
.month__list{display:grid; gap:var(--s3)}
.month__list li{
  position:relative; padding-inline-start:var(--s5);
  font-size:var(--t-sm); line-height:1.65; color:var(--ink-2);
}
.month__list li::before{
  content:''; position:absolute; inset-inline-start:0; top:.62em;
  width:7px; height:7px; border-radius:50%; background:var(--primary);
}
/* the half that says what a month does NOT cost you — the page's own device,
   and the handoff into #price so the number is still stated exactly once */
.month__vs{
  margin:var(--s6) 0 0; padding-top:var(--s5); border-top:1px solid var(--outline-v);
  font-size:var(--t-sm); line-height:1.7; color:var(--ink-2); max-width:60ch;
}
.month__pic{margin:0; display:grid; gap:var(--s3)}
.month__pic img{width:100%; border-radius:var(--sh-l); box-shadow:var(--el-1)}
.month__pic figcaption{font-size:var(--t-sm); color:var(--ink-3); line-height:1.55}

/* ==== ARCHIVED · not referenced by index.html =============================
   The three-card value stack `.month` replaced on 2026-08-13. Kept, not
   deleted, on the same terms as the blocks above: restoring it needs markup
   only. See plan.md §2.3.
   ========================================================================= */
.val__stack{display:grid; gap:var(--s4)}
.val__stack > li{
  background:var(--surface); border-radius:var(--sh-xl); box-shadow:var(--el-1);
  padding:clamp(22px,2.6vw,32px);
  display:grid; gap:var(--s4);
}
@media (min-width:820px){
  .val__stack > li{grid-template-columns:minmax(0,190px) 1fr; gap:var(--s7); align-items:start}
}
.val__n{
  margin:0; font-family:var(--display); font-size:clamp(1.15rem,1.9vw,1.35rem);
  color:var(--primary); letter-spacing:-.018em; line-height:1.25;
}
.val__stack ul{display:grid; gap:var(--s3)}
.val__stack ul li{
  position:relative; padding-inline-start:var(--s5);
  font-size:var(--t-sm); line-height:1.65; color:var(--ink-2);
}
.val__stack ul li::before{
  content:''; position:absolute; inset-inline-start:0; top:.62em;
  width:7px; height:7px; border-radius:50%; background:var(--primary);
}
/* the admission rides inside its own row rather than becoming a separate block */
.val__ad{display:block; font-style:normal; color:var(--ink-3); margin-top:2px}

.val__pic{margin:var(--s7) 0 0; display:grid; gap:var(--s3)}
.val__pic img{width:100%; max-width:520px; border-radius:var(--sh-l); box-shadow:var(--el-1)}
.val__pic figcaption{font-size:var(--t-sm); color:var(--ink-3); max-width:44ch}
/* ==== end ARCHIVED ======================================================== */

/* --- the anchor. Not an invented "total value" — the studio's own printed
   personal-training price, which makes ₪420 read as a quarter rather than as
   double a chain. An inflated total would contradict the page's own voice. --- */
.anchor{
  margin-bottom:var(--s7); background:var(--surface-c);
  border-radius:var(--sh-xl); padding:clamp(22px,2.6vw,32px);
}
.anchor__row{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
  gap:var(--s3); padding-block:var(--s4); border-bottom:1px solid var(--outline-v);
}
.anchor__row--us{border-bottom:0; padding-bottom:0}
.anchor__l{margin:0; font-size:var(--t-sm); color:var(--ink-2)}
.anchor__v{margin:0; font-size:var(--t-sm); color:var(--ink-3)}
.anchor__v b{font-family:var(--display); font-size:1.5rem; color:var(--ink); letter-spacing:-.02em}
.anchor__row--us .anchor__l{color:var(--ink); font-weight:700}
.anchor__row--us .anchor__v b{color:var(--primary); font-size:2rem}
.anchor__note{margin:var(--s5) 0 0; font-size:var(--t-sm); color:var(--ink-2); max-width:62ch}

/* ==== ARCHIVED · not referenced by index.html =============================
   Risk reversal as an object. Cut on 2026-08-13: it restated the four
   promises of `.book__list` directly above it in paragraph form, and #plan's
   "what we will not ask of you" column had already stated them a third time.
   The one sentence it owned — no persuasion call if you do not connect —
   moved into the list. Kept, not deleted. See plan.md §2.4.
   ========================================================================= */
.risk{
  margin-top:var(--s6); background:var(--plum-20); border-radius:var(--sh-l);
  padding:var(--s5) var(--s6);
}
.risk h3{color:var(--on-field); font-family:var(--display); font-size:1.15rem;
  letter-spacing:-.015em; margin-bottom:var(--s3)}
.risk p{font-size:var(--t-sm); color:var(--on-field-2); margin-bottom:.6em}
.risk strong{color:var(--apricot)}
/* ==== end ARCHIVED ======================================================== */


/* ---------- 8d. #studio — "what this is" + "who runs it", merged ----------
   Was two sections (#sol light, #dvir plum). Merged because Dvir's story IS
   the credibility for "what this is" — split across two sections each was
   arguing without its own evidence. On the plum field: it keeps the
   light/dark alternation now that #place is gone, and it is where the old
   #dvir already lived. It also absorbed the three studio rules, which were
   the only differentiating material in #place. */

.studio__top{display:grid; gap:var(--s7); align-items:center}
@media (min-width:900px){ .studio__top{grid-template-columns:1.1fr .9fr; gap:var(--s9)} }
.studio__media{border-radius:var(--sh-l); overflow:hidden; background:var(--plum-40); box-shadow:var(--el-3)}
.studio__media video{width:100%; aspect-ratio:4/3; object-fit:cover}
@media (max-width:899px){ .studio__media video{aspect-ratio:16/9} }

.studio__facts{display:flex; flex-wrap:wrap; gap:var(--s5) var(--s7); margin-top:var(--s6);
  padding-top:var(--s5); border-top:1px solid var(--plum-40)}
.studio__facts li{display:flex; align-items:baseline; gap:var(--s3)}
.studio__facts b{font-family:var(--display); font-size:2rem; color:var(--apricot); line-height:1}
.studio__facts span{font-size:var(--t-sm); color:var(--on-field-2); max-width:14ch; line-height:1.4}

.studio__rules{display:grid; gap:var(--s4); margin-top:var(--s8)}
@media (min-width:760px){ .studio__rules{grid-template-columns:repeat(3,1fr)} }
.studio__rules li{background:var(--plum-20); border-radius:var(--sh-l); padding:var(--s5) var(--s6)}
.studio__rules b{display:block; font-family:var(--display); font-size:1.06rem; color:var(--on-field);
  letter-spacing:-.012em; margin-bottom:var(--s2)}
.studio__rules p{font-size:var(--t-sm); margin:0; color:var(--on-field-2)}

.studio__dvir{display:grid; gap:var(--s7); align-items:start; margin-top:var(--s9);
  padding-top:var(--s8); border-top:1px solid var(--plum-40)}
@media (min-width:860px){ .studio__dvir{grid-template-columns:minmax(0,320px) 1fr; gap:var(--s8)} }
.studio__pic{margin:0; border-radius:var(--sh-xl); overflow:hidden; box-shadow:var(--el-3); background:var(--plum-40)}
.studio__pic img{width:100%; aspect-ratio:4/5; object-fit:cover}
/* On a phone this portrait ran the full 390px at 4:5 — 487px, well over half a
   screen, for a headshot. Capped rather than re-cropped: squeezing a 4:5
   portrait into a wider box takes the crop out of his head, and the plate
   cannot be regenerated. */
@media (max-width:859px){
  .studio__pic{max-width:62%}
}
.studio__name{font-family:var(--display); font-size:clamp(1.5rem,2.6vw,2rem);
  color:var(--on-field); letter-spacing:-.022em; margin-bottom:var(--s4)}
.studio__dvir p{max-width:56ch}

/* .alone now sits on the plum field, so it restates both colours */
.field .alone{background:var(--plum-20)}
.field .alone p{color:var(--on-field-2)}
.field .alone strong,.field .alone b{color:var(--on-field)}

/* ---------- 8e. the "and when it comes back" strip -----------------------
   Rescued from #gain, which was otherwise superseded by #stakes. It is the
   one part of that section #stakes could not replace: the horizons. */
.whenback{margin-top:var(--s7); max-width:none}
.whenback h3{color:var(--on-field); font-family:var(--display);
  font-size:clamp(1.15rem,1.9vw,1.35rem); letter-spacing:-.018em; margin-bottom:var(--s4)}
.whenback ol{display:grid; gap:1px; background:var(--plum-40);
  border-radius:var(--sh-m); overflow:hidden}
@media (min-width:820px){ .whenback ol{grid-template-columns:repeat(4,1fr)} }
.whenback li{background:var(--plum-30); padding:var(--s5)}
.whenback b{display:block; font-family:var(--display); color:var(--apricot);
  font-size:1.1rem; letter-spacing:-.015em; margin-bottom:var(--s2)}
.whenback span{font-size:var(--t-sm); line-height:1.6; color:var(--on-field-2)}
/* rescued from the FAQ row this strip made redundant — the horizons answered
   "how long until I feel something", but this line was the only part of that
   answer the strip could not say for itself */
.whenback__n{margin:var(--s4) 0 0; font-size:var(--t-sm); color:var(--on-field-3)}

.foot__now{font-size:var(--t-sm); color:var(--apricot); font-weight:700; margin-bottom:var(--s3)}
.foot__now .open-dot{display:inline-block; width:9px; height:9px; border-radius:50%;
  background:currentColor; margin-inline-end:7px; vertical-align:middle}

/* ---------- 9. the 30-day timeline --------------------------------------- */

.plan{background:var(--surface-c)}
.plan__head{max-width:62ch; margin-bottom:var(--s8)}

.tl{position:relative; display:grid; gap:var(--s5)}
.tl__row{
  position:relative; background:var(--surface); border-radius:var(--sh-xl);
  box-shadow:var(--el-1); overflow:hidden;
  display:grid; grid-template-columns:1fr; align-items:stretch;
}
.tl__pic{position:relative; background:var(--surface-ch); aspect-ratio:3/2}
.tl__pic img{width:100%; height:100%; object-fit:cover}
/* Three stacked 3:2 plates cost most of a mobile screen in photography alone
   before a word is read. 16:9 takes 12% off each, centred, which none of the
   three compositions notice — all are mid-shots with headroom to spare. */
@media (max-width:959px){
  .tl__pic{aspect-ratio:16/9}
}
.tl__day{
  position:absolute; inset-block-start:var(--s4); inset-inline-start:var(--s4);
  background:var(--plum-30); color:var(--on-field);
  border-radius:var(--sh-full); padding:7px 16px 7px 14px;
  font-size:var(--t-label); font-weight:700; letter-spacing:.02em;
  display:flex; align-items:baseline; gap:6px; box-shadow:var(--el-2);
}
.tl__day b{font-size:1.15rem; color:var(--apricot); font-family:var(--display)}

.tl__body{padding:clamp(22px,2.6vw,34px); display:grid; gap:var(--s5); align-content:start}
.tl__t{font-family:var(--display); font-size:clamp(1.25rem,2.2vw,1.55rem);
  color:var(--ink); letter-spacing:-.018em; line-height:1.22}

.tl__cols{display:grid; gap:var(--s5)}
@media (min-width:620px){ .tl__cols{grid-template-columns:1fr 1fr; gap:var(--s6)} }

.tl__col h4{font-size:var(--t-micro); font-weight:700; letter-spacing:.12em;
  color:var(--ink-3); margin-bottom:var(--s2); font-family:var(--text)}
.tl__col p{font-size:var(--t-sm); line-height:1.65; margin:0}
/* The second column is the page's signature copy device — the promise nobody
   else in this category makes — so it is set at ink weight, not caption grey. */
.tl__col--not h4{color:var(--primary)}
.tl__col--not p{color:var(--ink); font-weight:500}
.tl__col--not{padding-inline-start:var(--s5); border-inline-start:2px solid var(--outline)}
@media (max-width:619px){
  .tl__col--not{padding-inline-start:0; padding-top:var(--s4);
    border-inline-start:0; border-top:2px solid var(--outline)}
}

@media (min-width:960px){
  .tl__row{grid-template-columns:minmax(0,320px) 1fr}
  .tl__pic{aspect-ratio:auto; height:100%; min-height:210px}
  .tl__body{align-content:center}
}

.plan__sheet{
  margin-top:var(--s7); background:var(--surface); border:1px dashed var(--outline);
  border-radius:var(--sh-l); padding:var(--s5) var(--s6);
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s4);
  font-size:var(--t-sm); color:var(--ink-2);
}
.plan__sheet svg{width:26px; height:26px; color:var(--primary); flex:none}

/* ==== ARCHIVED · not referenced by index.html ==============================
   These rule sets belong to sections cut on 2026-08-13 to bring the page from
   29 mobile screens to ~19. They are KEPT, not deleted, so restoring a section
   from plan.md's archive needs only the markup — never a rewrite of its CSS.
   See demos/wellness-gym/plan.md §4 and §5.
   ========================================================================= */

/* ---------- 10. the studio ------------------------------------------------ */

.place__grid{display:grid; gap:var(--s6); margin-top:var(--s8)}
@media (min-width:820px){
  .place__grid{grid-template-columns:1.25fr .75fr; align-items:start}
}

/* Four media tiles in ONE strip, not two stacked rows.
   Measured: this section ran 2.1 desktop / 3.16 mobile screens carrying only
   101 words — 32 words per screen on mobile, the thinnest passage on the page.
   The cause was wiring new plates in by "which sections have no image" without
   checking density first, which stacked five media items into the section that
   argues least. Same four assets, one row. */
.place__strip{
  display:grid; gap:var(--s4); margin-top:var(--s6);
  grid-template-columns:repeat(4,1fr);
}
.place__strip li{
  border-radius:var(--sh-m); overflow:hidden; background:var(--surface-ch);
  box-shadow:var(--el-1);
}
.place__strip video,.place__strip img{width:100%; aspect-ratio:4/3; object-fit:cover}

/* On phones the four tiles become a swipeable rail rather than a 2×2 block.
   Measured: as a grid this section still ran 45 words per screen on mobile,
   under the 55 floor. One row instead of two buys back most of a screen, and
   a scroll-snap carousel is Material's own answer here rather than a bodge. */
@media (max-width:759px){
  .place__strip{
    display:flex; gap:var(--s3);
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    /* bleed to the viewport edges so the rail reads as scrollable */
    margin-inline:calc(var(--gut) * -1); padding-inline:var(--gut);
    padding-block-end:var(--s2);
  }
  .place__strip::-webkit-scrollbar{display:none}
  .place__strip li{flex:0 0 min(62%, 230px); scroll-snap-align:start}
}

.place__media{border-radius:var(--sh-l); overflow:hidden; background:var(--surface-ch);
  box-shadow:var(--el-1)}
.place__media video,.place__media img{width:100%; aspect-ratio:3/2; object-fit:cover}

.rules{display:grid; gap:var(--s5)}
.rules li{background:var(--surface-c); border-radius:var(--sh-l); padding:var(--s5) var(--s6)}
.rules b{display:block; font-family:var(--display); font-size:1.1rem; color:var(--ink);
  letter-spacing:-.012em; margin-bottom:var(--s1)}
.rules p{font-size:var(--t-sm); margin:0; color:var(--ink-2)}

/* a <dl> takes <div> wrappers around each pair, never <li> — an <li> in a <dl>
   is invalid, and it renders its list marker because list-style:none is scoped
   to ul/ol */
.facts{
  margin-top:var(--s8); display:grid; gap:1px; background:var(--outline-v);
  border:1px solid var(--outline-v); border-radius:var(--sh-l); overflow:hidden;
}
@media (min-width:640px){ .facts{grid-template-columns:repeat(2,1fr)} }
@media (min-width:980px){ .facts{grid-template-columns:repeat(4,1fr)} }
.facts > div{background:var(--surface); padding:var(--s5) var(--s6)}
.facts dt{font-size:var(--t-micro); font-weight:700; letter-spacing:.11em; color:var(--ink-3);
  margin-bottom:var(--s2)}
.facts dd{margin:0; font-size:var(--t-sm); color:var(--ink); font-weight:600; line-height:1.5}
.facts .open-dot{display:inline-block; width:9px; height:9px; border-radius:50%;
  background:var(--primary); margin-inline-end:7px; vertical-align:middle}

/* ==== ARCHIVED · not referenced by index.html ==============================
   These rule sets belong to sections cut on 2026-08-13 to bring the page from
   29 mobile screens to ~19. They are KEPT, not deleted, so restoring a section
   from plan.md's archive needs only the markup — never a rewrite of its CSS.
   See demos/wellness-gym/plan.md §4 and §5.
   ========================================================================= */

/* ---------- 11. routes ---------------------------------------------------- */

.routes{background:var(--surface-c)}
.route-list{display:grid; gap:var(--s3); margin-top:var(--s8)}
/* four children — glyph, text, meta, chevron — so four columns. With three,
   the chevron wrapped to a second row and dragged every row 60px taller. */
.route{
  position:relative; display:grid; grid-template-columns:auto 1fr auto auto;
  align-items:center; gap:var(--s5);
  background:var(--surface); border-radius:var(--sh-l); padding:var(--s5) var(--s6);
  text-decoration:none; color:inherit; box-shadow:var(--el-1);
  transition:box-shadow var(--d-s) var(--ease), transform var(--d-s) var(--ease);
}
.route::after{content:''; position:absolute; inset:0; background:var(--primary); opacity:0;
  border-radius:inherit; transition:opacity var(--d-s) var(--ease); pointer-events:none}
.route:hover{box-shadow:var(--el-2); transform:translateY(-1px)}
.route:hover::after{opacity:.05}
.route:active::after{opacity:.09}

/* Sized to be decoded, not to decorate. The first pass drew these at 74px and
   they read as smudges — a diagram too small to read is a sparkline. */
.route__glyph{width:96px; height:49px; color:var(--ink); flex:none; stroke-width:2.2}
.route__t b{display:block; font-family:var(--display); font-size:1.2rem; color:var(--ink);
  letter-spacing:-.015em; line-height:1.25}
.route__t span{font-size:var(--t-sm); color:var(--ink-2)}
.route__meta{text-align:end; display:grid; gap:2px}
.route__meta b{font-family:var(--display); font-size:1.05rem; color:var(--primary)}
.route__meta span{font-size:var(--t-micro); font-weight:700; letter-spacing:.08em; color:var(--ink-3)}
.route__go{width:22px; height:22px; color:var(--primary); flex:none}

@media (max-width:700px){
  .route{grid-template-columns:auto 1fr; gap:var(--s4); padding:var(--s5)}
  .route__glyph{width:76px; height:39px}
  .route__meta{grid-column:1 / -1; text-align:start; display:flex; gap:var(--s4); align-items:baseline;
    padding-top:var(--s3); border-top:1px solid var(--outline-v)}
  .route__go{display:none}
}

/* ---------- 12. Dvir — a full plum field --------------------------------- */

.field{background:var(--plum-30); color:var(--on-field-2)}
.field h2,.field h3{color:var(--on-field)}
.field strong,.field b{color:var(--on-field)}

.dvir__grid{display:grid; gap:var(--s7); align-items:center}
@media (min-width:860px){ .dvir__grid{grid-template-columns:minmax(0,380px) 1fr; gap:var(--s9)} }
.dvir__pic{border-radius:var(--sh-xl); overflow:hidden; box-shadow:var(--el-3);
  background:var(--plum-40)}
.dvir__pic img{width:100%; aspect-ratio:4/5; object-fit:cover}
.dvir__body p{max-width:56ch}

.creds{display:flex; flex-wrap:wrap; gap:var(--s2); margin:var(--s6) 0}
.creds li{font-size:var(--t-label); font-weight:600; color:var(--on-field-2);
  background:var(--plum-40); border-radius:var(--sh-full); padding:7px 15px}

/* same reasoning as .inoc — a tone step, not an accent bar */
.admit{
  margin-top:var(--s6); background:var(--plum-20); border-radius:var(--sh-l);
  padding:var(--s5) var(--s6);
}
.admit p{margin:0; color:var(--on-field-2); font-size:var(--t-sm)}
.admit b{display:block; margin-bottom:var(--s1); color:var(--on-field)}

/* ---------- 13. members --------------------------------------------------- */

.said{background:var(--surface-c)}
.said__grid{display:grid; gap:var(--s5); margin-top:var(--s8)}
@media (min-width:760px){ .said__grid{grid-template-columns:repeat(2,1fr)} }
.said figure{
  margin:0; background:var(--surface); border-radius:var(--sh-xl); padding:clamp(22px,2.4vw,32px);
  box-shadow:var(--el-1); display:flex; flex-direction:column; gap:var(--s5);
}
/* the objection is the headline — not the praise */
.said__obj{
  font-family:var(--display); font-size:clamp(1.1rem,1.9vw,1.28rem); line-height:1.34;
  color:var(--ink); letter-spacing:-.015em;
}
.said blockquote{margin:0; font-size:var(--t-sm); line-height:1.72; color:var(--ink-2)}
.said figcaption{display:flex; align-items:center; gap:var(--s3); margin-top:auto;
  padding-top:var(--s4); border-top:1px solid var(--outline-v)}
.said figcaption img{width:46px; height:46px; border-radius:50%; object-fit:cover; flex:none}
.said figcaption b{font-size:var(--t-sm); color:var(--ink); display:block; line-height:1.3}
.said figcaption span{font-size:var(--t-micro); color:var(--ink-3); font-weight:600; letter-spacing:.06em}

/* ---------- 14. price ----------------------------------------------------- */

.price__grid{display:grid; gap:var(--s5); margin-top:var(--s8)}
@media (min-width:760px){ .price__grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1080px){ .price__grid{grid-template-columns:repeat(4,1fr)} }

.tier{background:var(--surface-c); border-radius:var(--sh-xl); padding:var(--s6);
  display:flex; flex-direction:column; gap:var(--s3)}
.tier--lead{background:var(--surface-ch); box-shadow:inset 0 0 0 2px var(--primary)}
.tier__n{font-size:var(--t-label); font-weight:700; letter-spacing:.05em; color:var(--ink-2)}
.tier__v{font-family:var(--display); font-size:clamp(1.9rem,3.4vw,2.4rem); color:var(--primary);
  letter-spacing:-.03em; line-height:1}
.tier__u{font-size:var(--t-sm); color:var(--ink-3); margin-top:auto}

.admit--light{
  margin-top:var(--s6); background:var(--plum-30); color:var(--on-field-2);
  border-radius:var(--sh-xl); padding:clamp(24px,3vw,40px); border-inline-start:0;
}
.admit--light b{color:var(--on-field); font-family:var(--display);
  font-size:clamp(1.15rem,2vw,1.4rem); letter-spacing:-.015em; line-height:1.3}
.admit--light p{font-size:var(--t-body); color:var(--on-field-2); margin-bottom:.7em}
.admit--light p:last-child{margin-bottom:0}

/* ---------- 15. FAQ ------------------------------------------------------- */

.faq{background:var(--surface-c)}
.faq__list{max-width:78ch; margin:var(--s8) auto 0; display:grid; gap:var(--s2)}
.faq details{background:var(--surface); border-radius:var(--sh-l); overflow:hidden}
.faq summary{
  list-style:none; cursor:pointer; padding:var(--s5) var(--s6);
  display:flex; align-items:center; gap:var(--s4);
  font-family:var(--display); font-size:1.06rem; color:var(--ink); letter-spacing:-.01em;
  transition:background var(--d-s) var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--surface-ch)}
.faq summary::after{
  content:''; width:11px; height:11px; margin-inline-start:auto; flex:none;
  border-inline-end:2.4px solid var(--primary); border-bottom:2.4px solid var(--primary);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--d-m) var(--ease);
}
.faq details[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.faq__a{padding:0 var(--s6) var(--s5); font-size:var(--t-sm); line-height:1.72; color:var(--ink-2)}
.faq__a p{max-width:62ch}

/* ---------- 16. the form -------------------------------------------------- */

.book__grid{display:grid; gap:var(--s7)}
@media (min-width:960px){ .book__grid{grid-template-columns:1fr minmax(0,520px); gap:var(--s9)} }

.form{
  background:var(--surface); color:var(--ink-2); border-radius:var(--sh-xl);
  padding:clamp(24px,3vw,40px); box-shadow:var(--el-3);
}
/* A section that sets a colour scheme on itself will hand it to a light sheet
   inside it. `.book` is light-on-dark and this form is a light sheet, so every
   on-dark rule it would otherwise inherit is restated here for a light ground.
   The button matters most: apricot is a fill for PLUM grounds only, and on
   white it sits near 1.5:1 as a surface and stops reading as an action. */
.form h3{color:var(--ink); font-family:var(--display); font-size:1.3rem; letter-spacing:-.018em}
.field .form .btn--filled{background:var(--primary); color:#fff}
.field .form .ph{color:var(--ink-3); background:var(--surface-ch); border-color:var(--outline-v)}
.field .form :focus-visible{outline-color:var(--primary)}
.form legend{font-size:var(--t-label); font-weight:700; color:var(--ink-2); padding:0;
  margin-bottom:var(--s3)}
.form fieldset{border:0; padding:0; margin:0 0 var(--s6)}

/* the stage chips — Cashvertising's transtheoretical model as a control */
.stages{display:flex; flex-wrap:wrap; gap:var(--s2)}
.stage{position:relative}
.stage input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer}
.stage span{
  display:block; padding:11px 17px; border-radius:var(--sh-full);
  background:var(--surface-c); box-shadow:inset 0 0 0 1.5px var(--outline);
  font-size:var(--t-sm); font-weight:600; color:var(--ink-2);
  transition:background var(--d-s) var(--ease), color var(--d-s) var(--ease),
             box-shadow var(--d-s) var(--ease);
}
.stage input:hover + span{background:var(--surface-ch)}
.stage input:checked + span{background:var(--primary); color:#fff; box-shadow:none}
.stage input:focus-visible + span{outline:3px solid var(--primary); outline-offset:3px}

.f-row{display:grid; gap:var(--s4)}
@media (min-width:520px){ .f-row{grid-template-columns:1fr 1fr} }
.f{display:flex; flex-direction:column; gap:var(--s2)}
.f label{font-size:var(--t-label); font-weight:700; color:var(--ink-2)}
.f input{
  min-height:56px; padding:0 var(--s4); border-radius:var(--sh-s);
  border:1.5px solid var(--outline); background:var(--surface);
  font-size:1.0625rem; color:var(--ink);
  transition:border-color var(--d-s) var(--ease), box-shadow var(--d-s) var(--ease);
}
.f input:focus{outline:0; border-color:var(--primary); box-shadow:inset 0 0 0 1px var(--primary)}
.f input::placeholder{color:var(--ink-3)}

.form .btn{width:100%; margin-top:var(--s2)}
.after{
  margin-top:var(--s5); padding-top:var(--s5); border-top:1px solid var(--outline-v);
  font-size:var(--t-sm); line-height:1.66; color:var(--ink-2);
}
.after b{display:block; color:var(--ink); margin-bottom:var(--s1)}
#after-line{color:var(--primary); font-weight:600}

.book__side .lede{max-width:48ch}
.book__list{display:grid; gap:var(--s4); margin-top:var(--s6)}
.book__list li{display:flex; gap:var(--s3); font-size:var(--t-sm); color:var(--on-field-2)}
.book__list svg{width:20px; height:20px; color:var(--apricot); flex:none; margin-top:3px}

/* ---------- 17. footer ---------------------------------------------------- */

.foot{background:var(--plum-5); color:var(--on-field-2); padding-block:var(--s8) var(--s7)}
.foot__grid{display:grid; gap:var(--s7)}
@media (min-width:820px){ .foot__grid{grid-template-columns:1.2fr 1fr 1fr} }
.foot h4{font-size:var(--t-micro); font-weight:700; letter-spacing:.13em; color:var(--on-field-3);
  font-family:var(--text); margin-bottom:var(--s4)}
.foot li,.foot p{font-size:var(--t-sm); color:var(--on-field-2)}
.foot li{margin-bottom:var(--s2)}
.foot a{color:var(--on-field-2); text-decoration:none}
.foot a:hover{color:var(--apricot); text-decoration:underline}
.foot .brand__t b{color:var(--on-field)}
.foot .brand__t span{color:var(--on-field-3)}
.foot__hours td{padding:2px 0; font-size:var(--t-sm)}
.foot__hours td:first-child{padding-inline-end:var(--s5); color:var(--on-field-3)}
.foot__hours tr[data-today] td{color:var(--apricot); font-weight:700}
.foot__d{
  margin-top:var(--s8); padding-top:var(--s5); border-top:1px solid var(--plum-20);
  font-size:var(--t-label); line-height:1.66; color:var(--on-field-3); max-width:80ch;
}

/* ---------- 18. ribbon + mobile bottom app bar --------------------------- */

.ribbon{
  position:fixed; z-index:45; inset-inline-start:var(--s5); bottom:var(--s5);
  display:inline-flex; align-items:center; gap:var(--s2);
  background:var(--plum-30); color:var(--on-field); text-decoration:none;
  padding:11px 18px; border-radius:var(--sh-full); box-shadow:var(--el-3);
  font-size:var(--t-label); font-weight:700;
  transition:background var(--d-s) var(--ease);
}
.ribbon:hover{background:var(--plum-40)}
.ribbon svg{width:15px; height:15px}

.dock{
  position:fixed; inset-inline:0; bottom:0; z-index:48;
  background:var(--surface); border-top:1px solid var(--outline-v);
  box-shadow:var(--el-3); padding:var(--s3) var(--gut);
  padding-bottom:calc(var(--s3) + env(safe-area-inset-bottom));
  display:none; align-items:center; gap:var(--s3);
  transform:translateY(105%); transition:transform var(--d-m) var(--ease);
  visibility:hidden;
}
.dock.is-on{transform:none; visibility:visible}
.dock .btn{min-height:52px; flex:1}
.dock .btn--icon{flex:none; width:52px; padding:0}
@media (max-width:1040px){
  .dock{display:flex}
  .ribbon{display:none}     /* the thumb zone belongs to the studio */
  body{padding-bottom:0}
}

/* ---------- 19. reveal ---------------------------------------------------- */

[data-rise]{opacity:0; transform:translateY(14px);
  transition:opacity var(--d-l) var(--ease-out), transform var(--d-l) var(--ease-out);
  transition-delay:calc(var(--i,0) * 70ms)}
[data-rise].is-in{opacity:1; transform:none}

/* the hero settles out of the way as you leave it — a scroll effect, never a
   scroll scrub: the page never stops responding to the wheel. */
.scenes .hero__media{will-change:transform}
.hero__media{transform:scale(var(--hs,1)) translateY(var(--hy,0px))}

/* ---------- 20. preferences ---------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important}
  [data-rise]{opacity:1!important; transform:none!important}
  .hero__media{transform:none!important}
  .nav{transition:none}
}
@media (prefers-contrast:more){
  :root{
    --ink-2:#2A1D23; --ink-3:#453036; --outline:#8D7A81; --outline-v:#B9A7AE;
    --primary:#54182F; --on-field-2:#FFFFFF; --on-field-3:#E4D2DA;
  }
  .btn--outlined{box-shadow:inset 0 0 0 2px currentColor}
  .tl__row,.route,.said figure,.form{box-shadow:var(--el-2), inset 0 0 0 1px var(--outline)}
}