/* ═══════════════════════════════════════════════
   SITE.CSS: the design both pages share (focus.html and course.html)

   Everything here was the first ~7,100 lines of each page's own <style>,
   identical in both (moved here 2026-10-29). Each page still has a short
   <style> of its own after the <link> to this file, for what is only
   that page's: the hero sentence and the seal's label, and on the focus
   page the focus cards, the booking button and the share line. The page's
   own rules come after these in the cascade, as they did when it was one
   block, so a page rule wins over a shared one of the same weight.

   A change here changes both pages. When this file changes, bump the
   ?v= on its <link> in BOTH pages in the same commit, or a browser that
   has the old file keeps it.
═══════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════
   DESIGN TOKENS — editorial / cinematic
═══════════════════════════════════════════════ */
:root {
  /* The ketubah paper, measured off the lockup render rather than picked:
     the clean margins of the 4096px source have a median of 233,225,215.
     Matching it exactly is also what lets the logo composite back to its
     source pixel for pixel, since the key un-mixes against this value. */
  /* The paper is the lockup's own, cut out of the 4096px render rather than
     simulated. Turbulence was a fair imitation of grain and could never be
     one of relief: this stock has raised fibre lit from one side, so every
     bump carries a highlight and a shadow, and no noise function produces
     that pairing. Tal asked for the exact texture, so it is the exact
     texture. See Design/tools/papertile.py for how it is cut.

     #E9E1D7 is the measured median of the source's clean margins, and it is
     also what the tile's mean is set to. No darkening compensation any more:
     the tile is opaque and carries its own colour, where the turbulence
     layers composited black and pulled the surface down with them.

     600px is the tile's native scale, one source pixel to one CSS pixel, so
     the relief reads at the size it does in the render itself. */
  /* Not a picked colour: this is what the two texture layers actually
     render as. JPEG quantises the DC coefficient, so the tile's mean cannot
     be dialled to an arbitrary target - it snapped between landing on
     (237.3,227.8,216.7) and (239.2,229.7,218.5). So the tile keeps the mean
     it can hold and --paper is set to what it produces, which makes the
     logo's baked rectangle invisible by construction rather than by within
     a level or two. Simulating the multiply per-pixel across every tile
     phase agreed with mean^2/255 to 0.01, so the number is trustworthy. */
  --paper:        #EFE6DB;
  /* How far the next sheet rides up over the hero photograph, and so how
     much of it is cut by the fold. See the block at the end of this sheet. */
  --peek: clamp(46px, 6.4vh, 66px);
  /* Two layers of the same tile at sizes that share no common multiple, so
     the pattern only truly repeats every lcm(600,970) = 58,200px. A single
     600px tile at this subtlety still reads as tiled: laid out three across
     you can find the same fibres in each copy. The second layer at 970px is
     the same file upscaled by the browser, so it costs no extra request and
     its blur adds broad variation the fine layer does not have.

     multiply, normal: the top layer multiplies with the one under it, and
     the lower one sits normally so the product is not multiplied a third
     time against background-color. That is why the tile is built to a mean
     of 246,244,237 rather than the paper's own: two layers at m multiply to
     about m squared over 255, so 246 lands the product on 238. --paper is
     only the fallback if the image fails now. */
  --paper-grain:  url("paper-texture.jpg"), url("paper-texture.jpg");
  --paper-grain-size:  600px 600px, 970px 970px;
  --paper-grain-blend: multiply, normal;
  --paper-light:  #F8F2E4;
  --paper-dark:   #E8E0CC;
  --ink:          #0E0C0A;
  --ink-soft:     #1F1B16;
  --ink-muted:    #5E5849;
  /* The gold family is the hearts artwork's metal now (#D9B89D, hue 27deg)
     rather than the yellower brass it was (hue 39deg). Every value moved in
     hue only, at its old lightness, so each contrast the page was tuned to
     is where it was. */
  --ember:        #B2896A;
  --ember-bright: #D9B89D;
  --ember-deep:   #886344;
  --sage:         #8A856E;
  --bone:         #FBF7EC;
  --line:         rgba(14,12,10,0.13);
  --line-soft:    rgba(14,12,10,0.06);
  --line-ember:   rgba(178,137,106,0.30);

  --serif: 'Frank Ruhl Libre', serif;
  --sans:  'Assistant', 'Heebo', sans-serif;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x: hidden; }
body {
  background-color: var(--paper);
  background-image: var(--paper-grain);
  background-size: var(--paper-grain-size);
  background-blend-mode: var(--paper-grain-blend);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.7;
  direction: rtl;
  /* No overflow-x here. html already carries overflow-x:hidden, and the root
     element's overflow propagates to the viewport, so the clipping is already
     done one level up and this was only ever a duplicate. What it was not
     free: any non-visible overflow makes an element a scroll container, so
     body became the nearest scroll container for everything on the page, and
     a view timeline resolves against the nearest scroll container. Body never
     scrolls, the document does, so every scroll-driven animation underneath
     it sat frozen at whatever progress it was born with. The cover pan was
     stuck at 88%. */
  overscroll-behavior-x: none;
  -webkit-font-smoothing: antialiased;
}

/* The film-grain overlay that used to sit here is gone. It was a fixed
   z-index:9999 sheet of turbulence at opacity .06 with mix-blend-mode:
   multiply, which means it was not a paper effect at all: it multiplied over
   the whole page, the lockup and the photographs included, so every image on
   the site was rendered slightly darker and speckled than the file it came
   from. That is part of why the logo did not match what was uploaded.

   With the real paper on the surfaces underneath, it is also redundant, and
   two grains stacked read as noise rather than as stock. Restoring it is one
   block if it turns out to be missed. */

/* Selection (Tal, 2026-10-22): a quiet mark that keeps the page's own
   colours. On paper, a beige a step darker than the paper and the text
   keeps its colour; on the night (the hero's dark half, מי מלמד, תוכן
   הקורס, the form), a warm brown under cream. Pictures take no tint.
   Opaque colours, so overlapping line boxes do not stack into bands. */
::selection { background: #D8C9B9; }
.hx-b-panel ::selection, .teacher ::selection, .syllabus ::selection, .final ::selection {
  background: #453C36; color: #FBF6EE; -webkit-text-fill-color: #FBF6EE;
}
.hx-b .lk-3 .lk-name::selection { color: #0D0E10; -webkit-text-fill-color: #0D0E10; }
.hx-b .lk-3 .lk-label::selection { color: #1F3A64; -webkit-text-fill-color: #1F3A64; }
.hx-b .lk-3 .lk-words ::selection { color: #6E4F35; -webkit-text-fill-color: #6E4F35; }
img::selection, :is(.hx-b-panel, .teacher, .syllabus, .final) img::selection { background: transparent; }

img { max-width:100%; display:block; }

/* ═══════════════════════════════════════════════
   TOPBAR — editorial issue header
═══════════════════════════════════════════════ */
.topbar {
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:24px;
  padding:0 6vw; height:74px;
  background: rgba(242,235,219,0.86);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border-bottom:1px solid var(--line);
}
.topbar.scrolled { box-shadow:0 1px 0 var(--line), 0 12px 36px rgba(14,12,10,0.07); }

.topbar-meta {
  font-family:var(--sans);
  font-size:10.5px; letter-spacing:0.32em;
  color:var(--ink-muted); text-transform:uppercase; font-weight:400;
  white-space:nowrap; overflow:hidden;
}
.topbar-meta-r { text-align:left; }

.topbar-brand {
  text-align:center; line-height:1.1;
  display:flex; flex-direction:column; gap:2px; align-items:center;
}
.topbar-brand .brand-name {
  font-family:var(--serif);
  font-size:clamp(18px, 2.2vw, 23px);
  font-weight:700; letter-spacing:-0.01em;
  color:var(--ink);
}
.topbar-brand .brand-sub {
  font-family:var(--sans);
  font-size:11px; letter-spacing:0.28em;
  color:var(--ember); font-weight:500;
  text-transform:uppercase;
}
.topbar-brand .brand-tag {
  display: none;
}

@media (max-width:760px) {
  .topbar { grid-template-columns:1fr; padding:0 5vw; }
  .topbar-meta { display:none; }
}

/* ═══════════════════════════════════════════════
   SHARED — sections, type, helpers
═══════════════════════════════════════════════ */
.section {
  padding: var(--pace-section-pad, clamp(24px, 4vw, 52px)) 6vw;
  position:relative;
}
.section.tight { padding: calc(var(--pace-section-pad, clamp(24px, 4vw, 52px)) * 0.62) 6vw; }

/* Pacing reaches into body rhythm too */
body {
  line-height: var(--pace-line, 1.7);
  letter-spacing: var(--pace-track-body, 0);
}
.display, .hero-title, .insights-head h2 {
  letter-spacing: var(--pace-track-title, -0.03em);
}

/* Mood — evening/noon micro-adjustments beyond the palette swap */
body[data-mood="evening"] .marquee,
body[data-mood="evening"] .cover { border-color: rgba(217,184,157,0.12); }
body[data-mood="evening"] .hero-title .ember::after { opacity: 0.32; }
body[data-mood="evening"] .stat { border-color: rgba(242,235,219,0.13); }
body[data-mood="evening"] .topbar { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
body[data-mood="evening"] .topbar.scrolled { background: rgba(22,18,16,0.86); }

body[data-mood="noon"] .hero-title { letter-spacing: calc(var(--pace-track-title, -0.03em) - 0.005em); }
body[data-mood="noon"] .topbar.scrolled { background: rgba(252,250,242,0.92); }

/* A subtle vignette per mood that breathes life into the canvas */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  background: var(--mood-vignette, none);
  mix-blend-mode: soft-light;
  z-index: 0;
  transition: opacity 0.6s ease;
}
.container { max-width:1200px; margin:0 auto; position:relative; }
.container.narrow { max-width:780px; }

.kicker {
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--sans); font-size:11px; font-weight:500;
  letter-spacing:0.32em; text-transform:uppercase;
  color:var(--ember);
}
.kicker::before {
  content:''; width:24px; height:1px;
  background:currentColor; opacity:0.5;
}
.kicker.center { display:flex; justify-content:center; }

.display {
  font-family:var(--serif);
  font-weight:900;
  line-height:0.95;
  letter-spacing:-0.025em;
  color:var(--ink);
}

.serif { font-family:var(--serif); }
.italic { font-style:italic; font-weight:400; }
.muted { color:var(--ink-muted); }
.ember { color:var(--ember); }

/* Reveal-on-scroll */
.reveal { opacity:0; transform:translateY(28px); transition:opacity 0.9s cubic-bezier(0.2,0.8,0.2,1), transform 0.9s cubic-bezier(0.2,0.8,0.2,1); }
.reveal.in { opacity:1; transform:none; }
.reveal-d2 { transition-delay:0.12s; }
.reveal-d3 { transition-delay:0.24s; }
.reveal-d4 { transition-delay:0.36s; }

/* Hairline divider */
.rule { width:100%; height:1px; background:var(--line); }
.rule-soft { background:var(--line-soft); }

/* ═══════════════════════════════════════════════
   HERO — asymmetric editorial composition
═══════════════════════════════════════════════ */
.hero {
  padding: 72px 6vw 48px;
  display:flex; flex-direction:column; justify-content:center;
  position:relative;
}

/* Decorative compass / north-star SVG behind title */
.hero-compass {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:min(680px, 78vw); height:min(680px, 78vw);
  pointer-events:none; z-index:0;
  opacity:0.22;
}
.hero-compass svg { width:100%; height:100%; }
.hero-compass .ring { fill:none; stroke:var(--ember); stroke-width:0.4; }
.hero-compass .tick { stroke:var(--ember); stroke-width:0.6; }
.hero-compass .star { fill:var(--ember); }

@keyframes spin { to { transform:rotate(360deg); } }
.hero-compass .spin {
  transform-origin: 100px 100px;
  animation: spin 90s linear infinite;
}
.hero-compass .spin-rev {
  transform-origin: 100px 100px;
  animation: spin 130s linear infinite reverse;
}

.hero-grid {
  position:relative; z-index:1;
  display:grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width:1200px; margin:0 auto; width:100%;
}

.hero-issue {
  display:flex; align-items:center; gap:18px;
  font-family:var(--sans); font-size:11px; letter-spacing:0.34em;
  color:var(--ink-muted); text-transform:uppercase; font-weight:500;
}
.hero-issue .dot { width:6px; height:6px; border-radius:50%; background:var(--ember);
  animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:0.4; transform:scale(0.7); }
}
.hero-issue .bar { flex:1; height:1px; background:var(--line); max-width:140px; }

.hero-title {
  font-family:var(--serif);
  font-size: clamp(56px, 11vw, 148px);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 8px 0 20px;
}
.hero-title .ember { color:var(--ember); font-style:italic; font-weight:700; display:inline-block; position:relative; }
.hero-title .ember::after {
  content:''; position:absolute; left:0; right:0; bottom:0.04em; height:0.12em;
  background:var(--ember); opacity:0.18; border-radius:2px;
}
.hero-title .light { font-weight:300; font-style:italic; color:var(--ink-soft); }
.hero-title { position:relative; }

/* Course title — whisper styling */
.hero-title-course {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  font-size: clamp(48px, 9vw, 120px);
  line-height: 0.98;
}
.hero-title-course .course-kicker-pill {
  font-family: var(--sans);
  /* The floor carries the size the phone used to pin with !important; the
     upper end is unchanged, so nothing above the tablet breakpoint moves. */
  font-size: clamp(14px, 2.86vw, 34px);
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ember);
  padding: 12px 31px;
  border: 1px solid var(--line-ember);
  background: rgba(178,137,106,0.05);
  border-radius: 999px;
  margin-bottom: 14px;
  align-self: flex-start;
}
.hero-title-course .course-name-line {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 0.95;
}
.hero-title-course .course-name-line .ember {
  color: var(--ember);
}
/* "תורת ההתאמה הזוגית" is three words where "לבחור נכון" was two. At the
   title's full size it broke one word per line and pushed the hero 150px
   past the fold, so the name sits at 0.8 of the title and breaks after
   ההתאמה in the markup: always two lines, the longer one first. Sizing it
   here as a fraction leaves every breakpoint's font-size rule untouched. */
.hero-title-course .course-name-line { font-size: 0.8em; }
.hero-title-course .course-paren-line {
  display: block;
  margin-top: 10px;
  font-family: var(--serif);
  font-size: 0.7em;
  font-weight: 300;
  font-style: normal;
  color: var(--ink-muted);
  opacity: 0.78;
  letter-spacing: -0.01em;
  line-height: 1;
  position: relative;
  padding-right: 4px;
}
.hero-title-course .course-paren-line em {
  font-style: italic;
  font-weight: 300;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
  padding: 0 6px;
}
.sparkle-star {
  position:absolute; pointer-events:none;
  /* The script sets an inline opacity from the first frame onwards. This is
     the floor under the frames before that, so nothing can flash. */
  opacity:0;
}
@keyframes sparklePop {
  0%   { opacity:0; transform:scale(0) rotate(0deg); }
  40%  { opacity:0.55; transform:scale(1) rotate(90deg); }
  100% { opacity:0; transform:scale(0) rotate(150deg); }
}

.hero-tag-line {
  display:inline-flex; align-items:center; gap:18px;
  font-family:var(--sans);
  font-size: clamp(12px, 1.2vw, 14px);
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--ember);
  font-weight: 500;
  margin: -16px 0 36px;
  position:relative;
  padding-right:14px;
}
.hero-tag-line::before {
  content:''; width:30px; height:1px;
  background:var(--ember); opacity:0.5;
}

.hero-lead {
  font-family:var(--sans);
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.65;
  color: var(--ink-soft);
  font-weight: 300;
  max-width: 620px;
  margin-bottom: 12px;
}
.hero-lead strong { color:var(--ink); font-weight:600; }
.underline-sweep {
  position:relative; display:inline-block; white-space:nowrap;
  color:var(--ink); font-weight:600;
}
.underline-sweep::after {
  content:''; position:absolute; left:0; right:0; bottom:-3px; height:8px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 5 Q 60 1 120 5 T 238 5' stroke='%23B8612C' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform: scaleX(0); transform-origin:right;
  animation: drawLine 1.6s 1.1s cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes drawLine { to { transform:scaleX(1); } }

.hero-supporting {
  font-family:var(--sans); font-weight:300;
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--ink-muted);
  max-width: 600px;
  line-height: 1.75;
  margin-bottom: 24px;
}

.hero-cta {
  display:flex; flex-wrap:wrap; align-items:center; gap:28px;
  max-width: 540px;          /* match form width so button aligns below it */
  justify-content: center;   /* center the hb-wrap so its visible button sits at form center */
}

/* Hero inline form */
.hero-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 460px;
  width: 100%;
}
.hero-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.hero-form-row input[type="text"]:first-child {
  grid-column: 1 / -1;
}
.hero-form input[type="text"] {
  width: 100%;
  background: rgba(14,12,10,0.04);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  padding: 14px 16px;
  border-radius: 2px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  text-align: right;
  direction: rtl;
}
.hero-form input[type="text"]:focus {
  border-color: var(--ember);
  background: rgba(14,12,10,0.02);
}
.hero-form input[type="text"]::placeholder {
  color: var(--ink-muted);
  opacity: 0.55;
}
@media (max-width: 520px) {
  .hero-form-row { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  font-family:var(--sans);
  font-size:15.5px; font-weight:500;
  letter-spacing:0.05em;
  padding:18px 40px;
  border:none; cursor:pointer;
  text-decoration:none;
  position:relative; overflow:hidden;
  transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.3s, background 0.25s, color 0.25s;
  border-radius: 2px;
}

.btn-arrow {
  width:18px; height:10px; display:inline-block; position:relative;
  transition:transform 0.3s cubic-bezier(0.2,0.8,0.2,1);
}
.btn-arrow::before, .btn-arrow::after {
  content:''; position:absolute; background:currentColor;
}
.btn-arrow::before { left:0; right:0; top:50%; height:1.5px; transform:translateY(-50%); }
.btn-arrow::after  { left:0; top:50%; width:8px; height:8px;
  border-left:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-50%) rotate(45deg); }
.btn:hover .btn-arrow { transform:translateX(-6px); }

.btn-primary {
  background: var(--ink);
  color: var(--bone);
}
.btn-primary:hover {
  background: var(--ember-deep);
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(136,99,68,0.35);
}
/* Shimmer */
.btn-primary::before {
  content:''; position:absolute; top:0; left:-60%; width:50%; height:100%;
  background: linear-gradient(90deg, transparent, rgba(217,184,157,0.25), transparent);
  transform: skewX(-22deg);
  transition: left 0.6s ease;
}
.btn-primary:hover::before { left:130%; }

.btn-ember {
  background: var(--ember);
  color: var(--bone);
  box-shadow: 0 8px 28px rgba(178,137,106,0.30);
}
.btn-ember:hover {
  background: var(--ember-bright);
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(178,137,106,0.40);
}

.btn-ghost {
  color: var(--ink);
  background: transparent;
  padding: 10px 4px;
  border-bottom:1px solid var(--ink);
  border-radius:0;
}
.btn-ghost:hover { color: var(--ember); border-color:var(--ember); }

/* Animated rotating gradient border around primary button */
.btn-orbit {
  position:relative; display:inline-block;
  padding:2px;
  border-radius:3px;
  isolation:isolate;
}
.btn-orbit::before {
  content:''; position:absolute; inset:-1px; z-index:-1;
  border-radius:inherit;
  background: conic-gradient(from 0deg,
    transparent 0deg, transparent 200deg,
    var(--ember-bright) 260deg, var(--ember) 290deg,
    transparent 340deg);
  animation: rotateOrbit 4.5s linear infinite;
}
@keyframes rotateOrbit { to { transform:rotate(1turn); } }

.price-line {
  font-family:var(--sans);
  font-size:13px;
  color:var(--ink-muted);
  letter-spacing:0.04em;
  font-weight:400;
}
.price-line .ember { color:var(--ember); font-weight:600; }
.price-line .strike { text-decoration:line-through; opacity:0.55; }
.price-line .sep { display:inline-block; margin:0 10px; opacity:0.4; }

/* ═══════════════════════════════════════════════
   COVER PHOTO — duotone editorial
═══════════════════════════════════════════════ */
.cover {
  position:relative; width:100%;
  background: var(--ink);
  overflow:hidden;
}
.cover-frame {
  position:relative;
  height: clamp(360px, 42vw, 520px);
  overflow:hidden;
}
/* Fixed-attachment reveal: the frame is a shorter window onto a taller/wider
   image, so scrolling pans across different parts of the photo. */
.cover-frame .cover-bg {
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  filter: grayscale(0.25) contrast(1.05) brightness(0.95) sepia(0.18) saturate(1.2);
}
@media (max-width: 820px) {
  /* iOS/mobile don't support background-attachment:fixed reliably */
  .cover-frame .cover-bg { background-attachment: scroll; }
}

.cover-frame::before {
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(14,12,10,0.4) 0%, transparent 40%, transparent 60%, rgba(14,12,10,0.7) 100%),
    linear-gradient(0deg, rgba(178,137,106,0.18), rgba(178,137,106,0.05));
}
/* Vignette corners */
.cover-frame::after {
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  box-shadow: inset 0 0 200px 60px rgba(14,12,10,0.5);
}

.cover-overlay {
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: 6vw;
  color: var(--bone);
}
.cover-overlay .label {
  font-family:var(--sans); font-size:11px; letter-spacing:0.32em;
  color:rgba(251,247,236,0.65); text-transform:uppercase; font-weight:500;
  margin-bottom:14px;
  display:flex; align-items:center; gap:14px;
}
.cover-overlay .label::before {
  content:''; width:32px; height:1px; background:var(--ember-bright);
}
.cover-overlay h3 {
  font-family:var(--serif); font-weight:900;
  font-size:clamp(28px, 4vw, 48px);
  line-height:1.05; letter-spacing:-0.025em;
  max-width: 720px;
}
.cover-overlay h3 em { font-style:italic; font-weight:400; color:var(--ember-bright); }

/* ═══════════════════════════════════════════════
   MARQUEE — scrolling promise band
═══════════════════════════════════════════════ */
.marquee {
  background: var(--ink);
  color: var(--bone);
  border-top: 1px solid rgba(251,247,236,0.08);
  border-bottom: 1px solid rgba(251,247,236,0.08);
  overflow:hidden;
  padding: 22px 0;
  position:relative;
}
.marquee-track {
  display:flex; gap:60px; width:max-content;
  animation: marqueeScroll 36s linear infinite;
}
.marquee-item {
  font-family:var(--serif); font-style:italic;
  font-size:clamp(20px, 2.6vw, 28px);
  font-weight:400; white-space:nowrap;
  display:flex; align-items:center; gap:60px;
}
.marquee-item .star {
  width:14px; height:14px; flex-shrink:0;
  background: var(--ember-bright);
  clip-path: polygon(50% 0%, 60% 35%, 98% 35%, 68% 57%, 80% 91%, 50% 70%, 20% 91%, 32% 57%, 2% 35%, 40% 35%);
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}

/* ═══════════════════════════════════════════════
   ABOUT — editorial split
═══════════════════════════════════════════════ */
.about {
  background: var(--paper-light);
  position:relative;
}
.about::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 70% at 80% 30%, rgba(178,137,106,0.06), transparent 60%);
}
.about-grid {
  display:grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 36px);
  align-items:start;
  position:relative;
}
.about-portrait-wrap {
  position:relative;
  max-width:240px;
  margin:0 auto;
}
.about-portrait-clean {
  position:relative;
  width: 280px; height: 280px;
  margin: 0 auto;
  border-radius: 50%;
  overflow:hidden;
  background: transparent;
  box-shadow: none;
  transform: none;
  transition: transform 0.6s cubic-bezier(0.2,0.8,0.2,1);
}
.about-portrait-clean::before {
  content:''; position:absolute; inset:-14px;
  border-radius:50%;
  border: 1px solid var(--line-ember);
  opacity: 0.55;
  pointer-events:none;
}
.about-portrait-clean::after {
  content:''; position:absolute; inset:-26px;
  border-radius:50%;
  border: 1px dashed var(--line-ember);
  opacity: 0.3;
  pointer-events:none;
  animation: aboutSpin 80s linear infinite;
}
@keyframes aboutSpin { to { transform: rotate(1turn); } }
.about-portrait-clean:hover { transform: scale(1.02); }
.about-portrait-clean img {
  width:100%; height: 100%;
  object-fit:cover;
  object-position: center 25%;
  display:block;
}
.about-portrait-flourish {
  position:absolute;
  top: -10px; left: -10px;
  width: 56px; height: 56px;
  color: var(--ember);
  opacity: 0.85;
  pointer-events: none;
  animation: aboutSpin 24s linear infinite reverse;
}

.about-content { max-width:100%; }
.about-h {
  font-family:var(--serif);
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ember);
  margin: 10px 0 16px;
}
.about-body {
  font-size:18px; color:var(--ink-muted);
  line-height:1.85; margin-bottom:16px;
}
.about-content .kicker {
  font-size:16px;
  color:var(--ink);
}
.about-sig {
  font-family:var(--serif); font-size:clamp(30px, 3.4vw, 40px);
  font-weight:500; font-style:italic;
  color:var(--ember);
  display:inline-flex; align-items:center; gap:14px;
}
.about-sig::after {
  content:''; width:50px; height:1px; background:var(--ember); opacity:0.6;
}

@media (max-width:820px) {
  .about-portrait-wrap { max-width:240px; margin:0 auto; }
}

/* ═══════════════════════════════════════════════
   STATS — editorial proof strip
═══════════════════════════════════════════════ */
.stats {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background-color: var(--paper);
  background-image: var(--paper-grain);
  background-size: var(--paper-grain-size);
  background-blend-mode: var(--paper-grain-blend);
}
.stats-grid {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
}
.stats-grid-2 { grid-template-columns: repeat(2, 1fr) !important; max-width: 720px; margin: 0 auto; }
.stat-num-strike { text-decoration: line-through; opacity: 0.55; }
.stat {
  padding: clamp(24px, 4vw, 44px) clamp(20px, 3vw, 36px);
  text-align:center;
  position:relative;
  border-left: 1px solid var(--line);
}
.stat:first-child { border-left:none; }
.stat-num {
  font-family:var(--serif);
  font-size: clamp(56px, 8vw, 96px);
  font-weight: 900;
  line-height: 0.95;
  color: var(--ink);
  letter-spacing: -0.03em;
  display:flex; align-items:baseline; justify-content:center; gap:6px;
}
.stat-num .currency {
  font-size: 0.45em; font-weight:400; color:var(--ember);
}
.stat-label {
  margin-top: 16px;
  font-family:var(--sans);
  font-size: 12px; letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}

@media (max-width:680px) {
  .stats-grid { grid-template-columns:1fr; }
  .stat { border-left:none; border-top:1px solid var(--line); }
  .stat:first-child { border-top:none; }
}

.stats-explainer {
  max-width:720px; margin:0 auto;
  padding: 20px clamp(20px, 4vw, 32px) 32px;
  text-align:center;
  border-top:1px solid var(--line-soft);
}
.stats-explainer p {
  font-family:var(--sans);
  font-size: clamp(14.5px, 1.4vw, 16.5px);
  line-height: 1.85;
  color: var(--ink-soft);
  font-weight: 300;
}
.stats-explainer strong {
  color: var(--ember);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════
   INSIGHTS — magazine-style numbered grid
═══════════════════════════════════════════════ */
.insights {
  background-color: var(--paper);
  background-image: var(--paper-grain);
  background-size: var(--paper-grain-size);
  background-blend-mode: var(--paper-grain-blend);
  position:relative;
}
.insights-head {
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
  margin-bottom: clamp(12px, 2vw, 20px);
  text-align:right;
  max-width:920px;
}
.insights-head h2 {
  font-family:var(--serif);
  font-size: clamp(40px, 6.8vw, 84px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ember);
  text-wrap: balance;
}
.insights-head h2 em {
  font-style:italic; font-weight:500; color:var(--ember-bright);
}
.insights-head p {
  font-size: clamp(15px, 1.5vw, 18px);
  color: var(--ink-muted);
  max-width: 540px;
  line-height: 1.7;
  font-weight: 300;
}

.insights-grid {
  display:flex; flex-direction:column;
  max-width:780px; margin:0 auto;
  gap: clamp(12px, 2vw, 20px);
}
.insight {
  display:grid;
  grid-template-columns: auto 1fr;
  gap: 22px 26px;
  align-items:center;
  padding-bottom: clamp(16px, 2.5vw, 28px);
  border-bottom: 1px solid var(--line-soft);
  position:relative;
}
.insight:last-child {
  border-bottom: none; padding-bottom: 0;
}
.insight:last-child .insight-body p {
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.75;
  font-weight: 300;
  color: var(--ink-soft);
  max-width: 600px;
}

.insight-num {
  width: clamp(38px, 4.4vw, 52px);
  height: clamp(38px, 4.4vw, 52px);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--ember);
  filter: drop-shadow(0 4px 14px rgba(178,137,106,0.35));
  transition: transform 0.4s cubic-bezier(0.2,0.8,0.2,1);
}
.insight-num svg { width:100%; height:100%; }
.insight:hover .insight-num { transform: rotate(45deg) scale(1.08); }
.insight:last-child:hover .insight-num { transform: rotate(45deg) scale(1.08); }
.insight-body {
  padding-top: 0.4em;
}
.insight-body p {
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--ink-soft);
  font-weight: 300;
}
.insight-body strong,
.insights-lead strong {
  color: var(--ink);
  font-weight: 600;
  background: linear-gradient(180deg, transparent 70%, rgba(178,137,106,0.18) 70%);
  /* No side padding: it opened half a space between a prefix letter and
     its word (ל זוגיות, מ חיפוש) and before a comma (לך ,). */
}

/* ═══════════════════════════════════════════════
   COUNTDOWN — dramatic dark section
═══════════════════════════════════════════════ */
.countdown-wrap {
  background: var(--ink);
  color: var(--bone);
  position:relative; overflow:hidden;
}
.countdown-wrap::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 80% 70% at 50% 0%, rgba(178,137,106,0.18), transparent 60%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(178,137,106,0.12), transparent 60%);
}
.countdown-wrap::after {
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='g' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 0 L40 0 L40 40' fill='none' stroke='%23F2EBDB' stroke-width='0.5'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='400' height='400' fill='url(%23g)'/%3E%3C/svg%3E");
}

.countdown-inner { position:relative; z-index:2; text-align:center; max-width:920px; margin:0 auto; }

.countdown-kicker {
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--sans); font-size:11px; letter-spacing:0.36em;
  color:var(--ember-bright); text-transform:uppercase; font-weight:500;
  margin-bottom:14px;
}
.countdown-kicker .icon {
  width:14px; height:14px;
  background: var(--ember-bright);
  clip-path: polygon(50% 0%, 60% 35%, 98% 35%, 68% 57%, 80% 91%, 50% 70%, 20% 91%, 32% 57%, 2% 35%, 40% 35%);
}
.countdown-title {
  font-family:var(--serif);
  font-size: clamp(34px, 5.4vw, 64px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
}
.countdown-title em { font-style:italic; font-weight:500; color:var(--ember-bright); }
.countdown-sub {
  font-size:14px; letter-spacing:0.16em; text-transform:uppercase;
  color:rgba(251,247,236,0.5); font-weight:500;
  margin-bottom: clamp(20px, 3vw, 36px);
}

.countdown-grid {
  display:flex; align-items:flex-start; justify-content:center;
  gap:0; margin-bottom: clamp(20px, 3vw, 36px);
  direction: ltr;
}
.cd-item {
  padding: 0 clamp(16px, 3vw, 36px);
  border-left: 1px solid rgba(251,247,236,0.10);
  display:flex; flex-direction:column; align-items:center;
  min-width: clamp(80px, 12vw, 130px);
}
.cd-item:first-child { border-left:none; }
.cd-num {
  font-family:var(--serif);
  font-size: clamp(56px, 8.5vw, 108px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--bone);
  transition: opacity 0.25s, transform 0.25s;
}
.cd-num.flip { opacity:0; transform: translateY(-8px); }
.cd-unit {
  margin-top: 14px;
  font-size: 11px; letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(251,247,236,0.5);
  font-weight: 500;
}

/* ═══════════════════════════════════════════════
   FINAL CTA / FORM
═══════════════════════════════════════════════ */
.final {
  background: var(--ink);
  color: var(--bone);
  padding: var(--pace-section-pad, clamp(28px, 4vw, 52px)) 6vw calc(var(--pace-section-pad, clamp(28px, 4vw, 52px)) * 1.1);
  text-align:center;
  position:relative;
}
.final::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 50% 60% at 50% 50%, rgba(178,137,106,0.10), transparent 70%);
  pointer-events:none;
}
.final-inner { max-width:520px; margin:0 auto; position:relative; z-index:2; }

.final-kicker {
  display:inline-block;
  font-family:var(--sans);
  font-size: 11px; letter-spacing: 0.4em;
  text-transform: uppercase; font-weight:500;
  color: var(--ember-bright);
  margin-bottom: 28px;
  padding: 6px 16px;
  border:1px solid rgba(217,184,157,0.35);
  border-radius: 100px;
  background: rgba(217,184,157,0.06);
}
.final-title {
  font-family:var(--serif); font-weight:900;
  font-size: clamp(40px, 6.4vw, 76px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
  color: var(--bone);
}
.final-title em { font-style:italic; font-weight:500; color:var(--ember-bright); }
.final-sub {
  font-size:16px; line-height:1.8;
  color: rgba(251,247,236,0.6);
  font-weight: 300;
  margin-bottom: 48px;
}
.final-sub strong { color: var(--ember-bright); font-weight:500; }
.final-sub .strike { color:rgba(251,247,236,0.4); text-decoration:line-through; font-weight:400; }

/* Form */
.form-shell { width:100%; max-width:440px; margin:0 auto; text-align:right; }
.form-shell table { width:100%; border:none; border-spacing:0; }
.form-shell table tr { display:flex; flex-direction:column; margin-bottom:16px; }
.form-shell table td { border:none; padding:0; }
.form-shell table td b {
  display:block; font-size:11px; font-weight:500; letter-spacing:0.18em;
  text-transform:uppercase;
  color: rgba(251,247,236,0.55);
  margin-bottom:8px;
}
.form-shell table td span[style] { display:none; }
.form-shell input[type="text"],
.form-shell input[type="email"],
.form-shell input[type="tel"],
.form-shell input[type="number"],
.form-shell input:not([type]),
.form-shell select,
.form-shell textarea {
  width:100%;
  background: rgba(251,247,236,0.04) !important;
  border: 1px solid rgba(251,247,236,0.15) !important;
  color: var(--bone) !important;
  -webkit-text-fill-color: var(--bone) !important;
  font-family: var(--sans); font-size:16px; font-weight:300;
  padding: 16px 18px;
  border-radius: 2px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  text-align:right; direction:rtl;
}
.form-shell input[type="text"]:focus,
.form-shell input[type="email"]:focus,
.form-shell input[type="tel"]:focus,
.form-shell input[type="number"]:focus,
.form-shell input:not([type]):focus,
.form-shell select:focus,
.form-shell textarea:focus {
  border-color: var(--ember-bright) !important;
  background: rgba(251,247,236,0.07) !important;
}
.form-shell input::placeholder,
.form-shell textarea::placeholder {
  color: rgba(251,247,236,0.6) !important;
  -webkit-text-fill-color: rgba(251,247,236,0.6) !important;
  opacity: 1 !important;
}
.form-shell select option { color:#1F1B16 !important; -webkit-text-fill-color:#1F1B16 !important; }
/* Marketing-consent checkbox + its label stay visible on the dark form */
.form-shell label,
.form-shell input[type="checkbox"] + *,
.form-shell input[type="radio"] + * {
  color: rgba(251,247,236,0.78);
}
.form-shell input[type="checkbox"],
.form-shell input[type="radio"] { accent-color: var(--ember); }

.form-btn-wrap { display:block; width:100%; margin-top:14px; position:relative; }
.form-btn-wrap::before {
  content:''; position:absolute; inset:-2px; z-index:0;
  border-radius:3px;
  background: conic-gradient(from 0deg,
    transparent 0deg, transparent 200deg,
    var(--ember-bright) 260deg, var(--ember) 290deg,
    transparent 340deg);
  animation: rotateOrbit 4.5s linear infinite;
}
.form-btn-wrap input[type="submit"] {
  position:relative; z-index:1;
  width:100%;
  background: var(--ember);
  color: var(--bone);
  font-family: var(--sans); font-size:16px; font-weight:600;
  letter-spacing: 0.04em;
  padding: 19px 32px;
  border:none; border-radius:2px;
  cursor:pointer;
  transition: background 0.2s, transform 0.15s;
}
.form-btn-wrap input[type="submit"]:hover {
  background: var(--ember-bright);
  transform: translateY(-1px);
}

.form-shell td[colspan] { flex-direction:column; }

.final-note {
  margin-top: 28px;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(251,247,236,0.4); font-weight: 500;
}
.final-note .ember { color:var(--ember-bright); font-weight:600; }

.privacy-note {
  max-width: 440px; margin: 18px auto 0;
  font-size: 12.5px; line-height: 1.7;
  color: rgba(251,247,236,0.5); font-weight: 300;
  text-align: right;
}
.privacy-note a { color: var(--ember-bright); text-decoration: underline; }
.privacy-note a:hover { color: var(--bone); }

/* ═══════════════════════════════════════════════
   FOOTER — minimal editorial
═══════════════════════════════════════════════ */
.footer {
  background-color: var(--paper);
  background-image: var(--paper-grain);
  background-size: var(--paper-grain-size);
  background-blend-mode: var(--paper-grain-blend);
  padding: 36px 6vw;
  border-top: 1px solid var(--line);
}
.footer-row {
  max-width:1200px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:14px;
  font-family:var(--sans);
  font-size: 11.5px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted); font-weight: 500;
}
.footer-row .ember { color:var(--ember); }
.footer-row a { color: inherit; text-decoration:none; }
.footer-row a:hover { color: var(--ember); }
.footer-links { display:flex; flex-wrap:wrap; gap:18px; align-items:center; }

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width:560px) {
  .hero-cta { flex-direction:column; align-items:flex-start; gap:20px; }
  .btn { padding:16px 32px; font-size:14.5px; }
  .cd-item { padding:0 10px; min-width:70px; }
}

/* ═══════════════════════════════════════════════
   HERO INLINE FORM (above hero button) + reused for mid-CTA
═══════════════════════════════════════════════ */
.hero-form-inline {
  max-width: 540px;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.hf-field {
  display: flex; flex-direction: column;
  gap: 5px;
  position: relative;
}
.hf-field:first-child { grid-column: 1 / -1; }
.hf-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-right: 2px;
}
.hf-field input[type="text"] {
  width: 100%;
  background: rgba(14,12,10,0.03);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  padding: 13px 16px;
  border-radius: 2px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  text-align: right;
  direction: rtl;
}
.hf-field input[type="text"]:focus {
  border-color: var(--ember);
  background-color: var(--paper);
  background-image: var(--paper-grain);
  background-size: var(--paper-grain-size);
  background-blend-mode: var(--paper-grain-blend);
}
.hf-field input[type="text"]::placeholder {
  color: var(--ink-muted);
  opacity: 0.5;
}
@media (max-width: 520px) {
  .hf-row { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════
   SECTION 4 — MID CTA
═══════════════════════════════════════════════ */
.cta-mini {
  background: var(--paper-light);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--pace-section-pad, clamp(20px, 3vw, 40px)) 0;
  position: relative;
}
.cta-mini::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(178,137,106,0.06), transparent 70%);
  pointer-events: none;
}
.cta-mini-inner {
  max-width: 720px; margin: 0 auto;
  text-align: center;
  position: relative;
}
.cta-mini-title {
  font-family: var(--serif);
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 14px 0 28px;
}
.cta-mini-title em {
  font-style: italic; color: var(--ember);
}
.cta-mini-body {
  font-family: var(--sans);
  font-size: clamp(15.5px, 1.5vw, 17.5px);
  font-weight: 400;
  line-height: 1.85;
  color: var(--ink-muted);
  margin-bottom: 18px;
  text-align: right;
}
.cta-mini-body:last-of-type { margin-bottom: 36px; }
.cta-mini-body strong { color: var(--ink); font-weight: 600; }
.cta-mini-form {
  margin: 0 auto 0;
  text-align: right;
}

/* CTA button slots — center the injected HB wrap */
.cta-slot { display:flex; justify-content:center; }

.cta-mini-price {
  text-align: center;
  margin-top: 10px;
}

/* ═══════════════════════════════════════════════
   SECTION 6 — ETHICS
═══════════════════════════════════════════════ */
.ethics {
  background-color: var(--paper);
  background-image: var(--paper-grain);
  background-size: var(--paper-grain-size);
  background-blend-mode: var(--paper-grain-blend);
  padding: var(--pace-section-pad, clamp(20px, 3vw, 40px)) 0;
  border-bottom: 1px solid var(--line);
}
.ethics-inner {
  max-width: 760px; margin: 0 auto;
  text-align: center;
}
.ethics-title {
  font-family: var(--serif);
  font-size: clamp(28px, 3.8vw, 44px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 14px 0 28px;
}
.ethics-title em { font-style: italic; color: var(--ember); }
.ethics-body {
  font-family: var(--sans);
  font-size: clamp(15.5px, 1.5vw, 17.5px);
  line-height: 1.85;
  color: var(--ink-muted);
  margin-bottom: 18px;
  text-align: right;
  font-weight: 400;
}
.ethics-body strong { color: var(--ink); font-weight: 600; }
.ethics-tag {
  text-align: center;
  margin-top: 24px;
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 24px);
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
}

/* ═══════════════════════════════════════════════
   WHAT-GET section
═══════════════════════════════════════════════ */
.what-get {
  background: var(--paper-light);
  padding: var(--pace-section-pad, clamp(20px, 3vw, 40px)) 0;
  border-bottom: 1px solid var(--line);
}
.what-get-inner {
  max-width: 820px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 36px;
}
.what-get-title {
  font-family: var(--serif);
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ember);
  margin: 14px 0 24px;
}

.what-get-anchor {
  font-family: var(--serif);
  font-size: clamp(19px, 2.05vw, 25px);
  line-height: 1.5;
  color: var(--ink-soft);
  font-weight: 400;
  padding: 14px 0 22px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--line-ember);
  border-bottom: 1px solid var(--line-ember);
  margin: 8px -10vw;            /* break out of the 820px list column on both sides */
  max-width: 1100px;
  margin-right: auto;
  margin-left: auto;
  text-align: right;
  text-wrap: pretty;
}
.what-get-anchor em { font-style: italic; }
.what-get-anchor-trio {
  display: block;
  margin-top: 6px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1em;
  color: var(--ember);
}
.what-get-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 18px;
}
.what-get-list li {
  display: flex; gap: 16px;
  align-items: baseline;
  padding: 18px 22px;
  background-color: var(--paper);
  background-image: var(--paper-grain);
  background-size: var(--paper-grain-size);
  background-blend-mode: var(--paper-grain-blend);
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  font-family: var(--sans);
  font-size: clamp(15px, 1.45vw, 17px);
  line-height: 1.7;
  color: var(--ink-muted);
  font-weight: 400;
  transition: border-color 0.2s, transform 0.2s;
}
.what-get-list li:hover {
  border-color: var(--line-ember);
  transform: translateX(-4px);
}
.what-get-list .check {
  color: var(--ember);
  font-weight: 700;
  font-size: 1.4em;
  flex-shrink: 0;
}
.what-get-list strong { color: var(--ink); font-weight: 600; }
.what-get-list em { font-style: italic; color: var(--ember); }

/* ═══════════════════════════════════════════════
   SECTION 7 — GUARANTEE
═══════════════════════════════════════════════ */
.guarantee {
  background-color: var(--paper);
  background-image: var(--paper-grain);
  background-size: var(--paper-grain-size);
  background-blend-mode: var(--paper-grain-blend);
  padding: var(--pace-section-pad, clamp(20px, 3vw, 40px)) 0;
  border-bottom: 1px solid var(--line);
}
.guarantee-inner {
  max-width: 880px; margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
.guarantee-medal {
  width: 120px; height: 120px;
  color: var(--ember);
  flex-shrink: 0;
}
.guarantee-title {
  font-family: var(--serif);
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 12px 0 22px;
}
.guarantee-title em { font-style: italic; color: var(--ember); }
.guarantee-body {
  font-family: var(--sans);
  font-size: clamp(15.5px, 1.5vw, 17px);
  line-height: 1.8;
  color: var(--ink-muted);
  font-weight: 400;
}
.guarantee-body strong { color: var(--ink); font-weight: 600; }
@media (max-width: 720px) {
  .guarantee-inner { grid-template-columns: 1fr; text-align: center; }
  .guarantee-medal { margin: 0 auto; width: 88px; height: 88px; }
}

/* Tighten countdown bottom space (button removed there) */
.countdown-wrap { padding-top: clamp(70px, 8vw, 96px); padding-bottom: 0 !important; }
.countdown-wrap .countdown-inner { padding-bottom: clamp(40px, 4vw, 56px) !important; padding-top: 0 !important; }
.countdown-grid { margin-bottom: 0 !important; }

/* ═══════════════════════════════════════════════
   TOPBAR — COURSE BRANDING
═══════════════════════════════════════════════ */
.topbar-brand-course { align-items: center; gap: 4px; }
.topbar-brand-course .brand-byline {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-muted);
  opacity: 0.8;
  margin-bottom: 4px;
}
.brand-course-row {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: nowrap;
  white-space: nowrap;
  position: relative;
  padding: 0 4px;
}
.brand-course-kicker {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--ember);
  padding: 3px 11px;
  border: 1px solid var(--line-ember);
  border-radius: 999px;
  align-self: center;
  background: rgba(178,137,106,0.06);
}
.brand-course-name {
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
  position: relative;
}
.brand-course-name::after {
  content: '';
  position: absolute; left: 4%; right: 4%; bottom: -4px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ember) 40%, var(--ember) 60%, transparent);
  opacity: 0.65;
}
.brand-course-paren {
  font-family: var(--serif);
  font-size: clamp(13px, 1.4vw, 17px);
  font-weight: 400;
  color: var(--ember);
  opacity: 0.85;
  font-style: normal;
  align-self: center;
  position: relative;
  top: 1px;
}
.brand-course-paren em { font-style: italic; color: var(--ember); font-weight: 500; }
@media (max-width: 760px) {
  .topbar { height: auto !important; padding-top: 14px; padding-bottom: 14px; }
  .brand-course-row { flex-wrap: wrap; white-space: normal; justify-content: center; gap: 6px 10px; }
  .topbar-brand-course .brand-byline { font-size: 10px; letter-spacing: 0.24em; }
  .brand-course-name { font-size: 22px; }
  .brand-course-paren { font-size: 13px; }
}

/* ═══════════════════════════════════════════════
   PRICE CARD
═══════════════════════════════════════════════ */
.stats { padding: var(--pace-section-pad, clamp(18px, 3vw, 36px)) 0; }
.price-card {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(36px, 5vw, 56px) clamp(32px, 5vw, 56px);
  background: var(--paper-light);
  border: 1px solid var(--line);
  border-top: 3px solid var(--ember);
  border-radius: 2px;
  box-shadow: 0 16px 40px rgba(14,12,10,0.06);
}
.price-card-head {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 18px;
}
.price-card-num {
  font-family: var(--serif);
  font-size: clamp(80px, 12vw, 132px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
}
.price-card-num .currency { font-size: 0.4em; font-weight: 400; color: var(--ember); }
.price-card-old {
  margin-top: 18px;
  display: inline-flex; align-items: baseline; gap: 10px;
  padding: 12px 18px 0;
  border-top: 1px solid var(--line);
}
.price-card-old-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.price-card-old-num {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 700;
  color: var(--ink-muted);
  display: inline-flex; align-items: baseline; gap: 4px;
}
.price-card-old-num .currency { font-size: 0.6em; }

/* ═══════════════════════════════════════════════
   FOUNDERS BLURB
═══════════════════════════════════════════════ */
.founders-blurb {
  margin: 0 0 28px;
  max-width: 520px;
  padding: 16px 20px;
  background: rgba(178,137,106,0.06);
  border-right: 3px solid var(--ember);
  border-radius: 2px;
}
.founders-blurb p {
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink-muted);
  margin: 0;
}
.founders-blurb p em {
  font-style: normal;
  color: var(--ink);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════
   MOBILE — ≤ 600px
═══════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Topbar — override inline styles from design tool */
  .topbar {
    height: auto !important;
    padding: 10px 5vw !important;
    grid-template-columns: 1fr !important;
  }
  .topbar-brand .brand-name { font-size: 18px !important; }
  .topbar-brand .brand-sub  { font-size: 9px !important; letter-spacing: 0.18em !important; }
  .topbar-brand .brand-tag  { display: none; }
  .topbar-meta              { display: none; }

  /* Hero — tighter top padding to match smaller topbar */
  .hero { padding-top: 76px; }

  /* Hero badge row */
  .hero-issue { font-size: 9px; letter-spacing: 0.18em; gap: 8px; }
  .hero-issue .bar { max-width: 50px; }

  /* Course kicker pill — less wide.
     The font-size that used to be pinned here (13px !important) has moved into
     the base rule's clamp. It was a hard step: the word crossed from 29px to
     13px over one pixel of viewport at this breakpoint, so the kicker was a
     third of the course name on a desktop and an eighth of it on a tablet.
     The clamp holds it at a constant fraction of the name at every width.
     Tracking and padding still tighten here, which is what "less wide" meant. */
  .hero-title-course .course-kicker-pill {
    letter-spacing: 0.16em;
    padding: 8px 16px;
  }

  
  
  
  
  
  
  

  /* Insights / general section padding */
  .section { padding-left: 5vw; padding-right: 5vw; }

  /* About portrait — don't let it overflow */
  .about-portrait-clean { width: 200px !important; height: 200px !important; }

  /* Countdown items */
  .cd-item { min-width: 56px; padding: 0 8px; }
  .cd-num  { font-size: clamp(32px, 9vw, 48px); }

  /* Final CTA table form — stack on mobile */
  .final-form-table { display: flex; flex-direction: column; gap: 10px; }
  .final-form-table td { display: block; width: 100%; }
}

/* ═══ WEIGHT CONTRAST — section titles bolder ═══ */
.insights-head h2,
.what-get-title,
.guarantee-title,
.ethics-title,
.about-h,
.transformation-title,
.final-title {
  font-weight: 900;
}

/* ═══ TRANSFORMATION SECTION (מי אתה אחרי הקורס) ═══ */
.transformation {
  background: var(--paper-light);
  position: relative;
}
.transformation-head {
  margin-bottom: clamp(12px, 2vw, 20px);
  text-align: right;
}
.transformation-title {
  font-family: var(--serif);
  font-size: clamp(28px, 5vw, 56px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 8px;
}
.transformation-title em {
  color: var(--ember);
  font-style: italic;
  font-weight: 700;
}
.transformation-grid {
  display: flex;
  flex-direction: column;
  max-width: 780px;
  margin: 0 auto;
  gap: clamp(10px, 1.5vw, 16px);
}
.transformation-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px 24px;
  align-items: start;
  padding-bottom: clamp(12px, 1.5vw, 20px);
  border-bottom: 1px solid var(--line-soft);
}
.transformation-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.transformation-num {
  width: clamp(30px, 3.5vw, 44px);
  height: clamp(30px, 3.5vw, 44px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ember);
  filter: drop-shadow(0 4px 14px rgba(178,137,106,0.35));
}
.transformation-num svg { width:100%; height:100%; }
.transformation-body p {
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--ink-soft);
  font-weight: 300;
}
.transformation-body strong {
  color: var(--ink);
  font-weight: 600;
  background: linear-gradient(180deg, transparent 70%, rgba(178,137,106,0.18) 70%);
  padding: 0 2px;
}

/* ═══ GUARANTEE — confident, not apologetic ═══ */
.guarantee {
  background-color: var(--paper);
  background-image: var(--paper-grain);
  background-size: var(--paper-grain-size);
  background-blend-mode: var(--paper-grain-blend);
  border-top: 2px solid var(--ember);
}
.guarantee-title {
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.guarantee-body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  font-weight: 400;
}

/* ═══ CTA SECTIONS — direct, less soft ═══ */
.cta-mini-title {
  font-weight: 900;
  font-size: clamp(26px, 4vw, 48px);
  letter-spacing: -0.025em;
}
.cta-mini-body {
  color: var(--ink);
  font-weight: 400;
}

/* ═══ INSIGHT FEATURED — 7th bullet emphasis ═══ */
.insight-featured { background: rgba(178,137,106,0.05); border-right: 3px solid var(--ember); padding-right: 14px; border-radius: 0 4px 4px 0; }
.insight-featured .insight-body p { color: var(--ink); font-weight: 500; font-size: 17px; }

/* ═══ CTA MID SECTION ═══ */
.cta-mid { padding-top: clamp(20px, 3vw, 40px); padding-bottom: clamp(20px, 3vw, 40px); }
.cta-mid .cta-mini-inner { text-align: center; display: flex; flex-direction: column; align-items: center; }

/* ═══ CTA MID INTRO TEXT ═══ */
.cta-mid-intro {
  font-family: var(--serif);
  font-size: clamp(21px, 2.5vw, 33px);
  font-weight: 700;
  font-style: italic;
  color: var(--ink);
  text-align: center;
  max-width: 620px;
  margin: 0 auto 24px;
  line-height: 1.4;
  letter-spacing: -0.015em;
  padding: 22px 28px;
  background: rgba(178,137,106,0.07);
  border: 1px solid var(--line-ember);
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════
   TYPE SCALE-UP — "ראשונים" cycle
   Deliberately last in the sheet so it wins over the
   earlier per-section rules. Containers are widened
   alongside so the bigger copy doesn't turn into a
   narrow tower.
═══════════════════════════════════════════════ */

/* ── HERO supporting copy + founders blurb — 2× ── */
.hero-supporting {
  font-size: clamp(30px, 2.8vw, 34px);
  max-width: 1100px;
}
.founders-blurb {
  max-width: 940px;
  padding: 24px 28px;
}
.founders-blurb p { font-size: 29px; }

/* ── INSIGHTS ("מה תבין דרך הקורס") — 1.5× ── */
.insights-grid { max-width: 1000px; }
.insight-body p,
.insight-featured .insight-body p { font-size: 25px; }
.insight:last-child .insight-body p {
  font-size: clamp(22.5px, 2.25vw, 25.5px);
  max-width: 900px;
}

/* ── WHAT YOU GET ("מה תקבל") — 2× ── */
.what-get-inner { max-width: 1100px; }

.what-get-anchor { font-size: clamp(38px, 4.1vw, 50px); }
.what-get-list li { font-size: clamp(30px, 2.9vw, 34px); }

/* ── COUNTDOWN / open date — 1.5× ── */
.countdown-kicker { font-size: 16.5px; }
.countdown-kicker .icon { width: 21px; height: 21px; }
.countdown-title { font-size: clamp(51px, 8.1vw, 96px); }
.countdown-sub   { font-size: 21px; }

/* ═══════════════════════════════════════════════
   SEPTEMBER 2026 REFRESH — "מחזור הראשונים"
   Also last in the sheet, after the type scale-up,
   so it wins over both the base rules and the scale.
═══════════════════════════════════════════════ */

/* ── The lockup leads the page ──
   It is a modelled, photoreal object, and that is exactly why the old
   top-right corner failed it: at the size a corner mark can be, a rendered
   object among flat line work reads as a sticker stuck on the page. Given
   the scale it was drawn for, and the centre line, it reads as the subject
   instead — so the hero opens on it and everything below centres under it.

   The decorative compass behind the title steps back to 28%. It and the
   logo are the same motif, and at full strength the watermark turned the
   logo's own compass into a duplicate rather than the mark it stands for. */
.hero { padding-top: clamp(34px, 5vw, 66px); }
.hero-grid { justify-items: center; text-align: center; }
.hero-logo { justify-self: center; margin-bottom: clamp(14px, 2.4vw, 30px); }
.hero-logo img {
  display: block;
  width: clamp(210px, 27vw, 360px);
  height: auto;
}
.hero-compass { opacity: .28; }
.hero-kicker { margin-inline: auto; }
.footer-brand img {
  display: block;
  height: clamp(58px, 6vw, 76px);
  width: auto;
}

/* ── Founders blurb — three paragraphs ──
   The gap is stated in em so it tracks the box's own type and matches the
   rhythm the body copy keeps elsewhere on the page.

   The old sheet darkened every paragraph after the first, which suited a
   two-paragraph box where the second was a short kicker. With three running
   paragraphs it just split the box into two colours, so they now share the
   one ink. */
.founders-blurb-copy { display: flex; flex-direction: column; gap: 0.95em; }

/* ── Personal 1:1 session — first five registrants ── */
.personal-session {
  /* The padding is a token because the condition ribbon bleeds to the box
     edges with the negative of it. Two values in two places would drift the
     first time one of them is touched. */
  --ps-pad-x: 30px;
  --ps-pad-top: 26px;
  --ps-pad-bottom: 24px;
  position: relative;
  overflow: hidden;              /* the ribbon's square top inside the 3px radius */
  max-width: 940px;
  margin: 0 0 28px;
  padding: var(--ps-pad-top) var(--ps-pad-x) var(--ps-pad-bottom);
  background: linear-gradient(180deg, rgba(178,137,106,0.13), rgba(178,137,106,0.05));
  border: 2px solid var(--ember);
  border-radius: 3px;
  box-shadow: 0 14px 34px rgba(178,137,106,0.14);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.personal-session-badge {
  align-self: flex-start;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--paper-light);
  background: var(--ember);
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.personal-session-lead {
  font-family: var(--serif);
  font-size: clamp(21px, 2.1vw, 26px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.personal-session-body {
  font-family: var(--sans);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.7;
  font-weight: 400;
  color: var(--ink-soft);
}
.personal-session-note {
  font-family: var(--sans);
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.6;
  font-weight: 400;
  color: var(--ink-muted);
  padding-top: 12px;
  border-top: 1px solid var(--line-ember);
}

/* ── The stage around the registration form ──
   .hb-stage once held the heart-and-arrow animation over the submit button
   (taken out on 2026-09-27; see hb-animation/RESTORE.md). The wrapper stays
   because the spacing around the button is set on it; the later passes
   below tighten these numbers. */
.hb-stage { position: relative; padding-bottom: 84px; }
.hb-stage .submitbuttonbox { margin-top: 92px !important; }
.hb-stage > .rp-form { position: relative; z-index: 5; }

/* ── The embed's consent checkbox ──
   Its own tick is drawn in near-black and vanishes on the dark ground. Hide
   it and paint a bone-coloured one as a background image: a CSS tick would
   need a rotate, and transforms are the one thing the embed's stylesheet
   overrides outright inside its form.

   The embed's own rules here are !important too, so this is decided on
   specificity and it loads after us. `:not(#nope)` adds an id's worth of
   weight without matching anything — the standard way to outrank a
   third-party sheet you cannot edit. */
.form-shell .rp-form .checkbox_styled input[type="checkbox"]:not(#nope) + div::after {
  opacity: 0 !important;
}
.form-shell .rp-form .checkbox_styled input[type="checkbox"]:not(#nope) + div {
  border-color: rgba(251,247,236,0.55) !important;
  border-radius: 3px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 13px 13px !important;
}
.form-shell .rp-form .checkbox_styled input[type="checkbox"]:checked:not(#nope) + div {
  border-color: var(--ember) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF7EC' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.6 L9.2 18 L20 6.4'/%3E%3C/svg%3E") !important;
}

/* The embed hard-codes the consent label to black, which is invisible on the
   dark ground the form sits on. */
.form-shell .confirmation .confirmation_text,
.form-shell label.confirmation_text,
.form-shell .confirmation label {
  color: rgba(251,247,236,0.82) !important;
}

@media (max-width: 600px) {
  .hb-stage { padding-bottom: 52px; }
  .hb-stage .submitbuttonbox { margin-top: 58px !important; }

  
  

  
  
  
  
}

/* ── Sorting out the hero frame ──
   Three things were sharing the same space without agreeing on a centre.

   The kicker pill was the loudest of them: .hero-title-course is a flex
   column with align-items:flex-start, and flex alignment beats the
   text-align:center the grid sets, so the pill stayed pinned to the right
   edge while everything around it centred. That is the misalignment, and
   it is a one-line fix, not a spacing problem.

   The watermark's four-point star sat exactly in the gap between the logo
   and the pill, which is why that gap read as crowded rather than open.
   The star goes: the logo carries a compass of its own two inches above
   it, so the watermark repeating the same figure was never adding a motif,
   only a collision. The rings stay — they are texture, not a symbol — and
   drop down to sit behind the title, where they frame something. */
.hero-title-course { align-items: center; }
.hero-title-course .course-kicker-pill {
  align-self: center;
  margin-bottom: clamp(10px, 1.4vw, 18px);
}
.hero-compass-star { display: none; }
.hero-compass {
  top: 66%;
  width: min(560px, 68vw);
  height: min(560px, 68vw);
}

/* ── Section headings on the centre line ──
   The hero centres now, so the headings that follow it do too — otherwise
   the page changes its mind about where the eye should start one screen
   in. Body copy keeps its right-hand start; it is the headings that set
   the rhythm, and long text centred is harder to read, not more formal. */
.insights-head,
.cycle-format-title,
.what-get-title,
.syllabus-title,
.pricing-title,
.about-content .kicker,
.about-h {
  text-align: center;
}
/* .kicker is inline-flex, so auto margins do nothing to it — the sheet
   already carries a .kicker.center helper that switches it to a centred
   flex row, and that is what the markup now asks for. */
/* .insights-head is capped at 920px inside a wider container. Centring the
   text inside a box that is itself pinned to the right edge only centres it
   within the box, which left the heading 71px off the page's centre line. */
.insights-head, .insights-head p { margin-inline: auto; }

/* ── De-boxing ──
   The page had grown a run of framed rectangles stacked directly on top
   of each other — syllabus cards, price panel, offer box, CTA panel —
   and each new frame cancelled the emphasis of the last. Only the
   first-five offer keeps a frame; the rest carry their weight in type. */
.cta-mid-intro {
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  max-width: 720px;
}
.personal-session {
  border-width: 1px;
  box-shadow: 0 10px 26px rgba(178,137,106,0.10);
}

/* ── Mid CTA — clarity line under the intro ── */
.cta-mid-note {
  font-family: var(--sans);
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink-muted);
  text-align: center;
  max-width: 620px;
  margin: -8px auto 24px;
}

/* ── "מה תקבל" — second lede line, larger and in ember ── */

/* ── SYLLABUS — the five modules ── */
.syllabus {
  background-color: var(--paper);
  background-image: var(--paper-grain);
  background-size: var(--paper-grain-size);
  background-blend-mode: var(--paper-grain-blend);
  border-bottom: 1px solid var(--line);
  padding: var(--pace-section-pad, clamp(20px, 3vw, 40px)) 0;
}
.syllabus-inner { max-width: 1100px; margin: 0 auto; }
.syllabus-title {
  font-family: var(--serif);
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ember);
  margin: 14px 0 28px;
}
.syllabus-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  counter-reset: none;
}
.syllabus-list li {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 16px 22px;
  background: var(--paper-light);
  border: 1px solid var(--line-soft);
  border-right: 3px solid var(--line-ember);
  border-radius: 2px;
  transition: border-color 0.2s, transform 0.2s;
}
.syllabus-list li:hover {
  border-right-color: var(--ember);
  transform: translateX(-4px);
}
.syllabus-num {
  flex-shrink: 0;
  font-family: var(--serif);
  font-size: clamp(30px, 3.2vw, 42px);
  font-weight: 700;
  line-height: 1;
  color: var(--ember);
  min-width: 1.2em;
  text-align: center;
}
.syllabus-text {
  font-family: var(--sans);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink);
}
.syllabus-note {
  font-family: var(--sans);
  font-size: clamp(15px, 1.4vw, 17.5px);
  line-height: 1.7;
  font-weight: 400;
  color: var(--ink-muted);
  margin-top: 20px;
}

/* ── THE FIRST CYCLE — format, price, 1:1 ──
   These two cards used to sit in the hero. They now run after the
   value sections and the personal story, so they need to stand as a
   section of their own rather than as hero trim. */
.cycle-format {
  background: var(--paper-light);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--pace-section-pad, clamp(20px, 3vw, 40px)) 0;
}
.cycle-format-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.cycle-format-title {
  font-family: var(--serif);
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ember);
  margin: 14px 0 4px;
}
/* Out of the hero the width caps and bottom margins are the parent's job. */
.cycle-format .founders-blurb,
.pricing .personal-session {
  max-width: none;
  margin: 0;
}
.cycle-format .founders-blurb { padding: 26px 30px; background: rgba(178,137,106,0.07); }

/* ── PRICE — the 1:1 card, then the number ──
   Its own section rather than a line inside the format block, so the
   cost lands after both value blocks instead of alongside the format. */
.pricing {
  background: var(--paper-light);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--pace-section-pad, clamp(20px, 3vw, 40px)) 0;
}
.pricing-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.pricing-title {
  font-family: var(--serif);
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ember);
  margin: 14px 0 4px;
}
/* Not a box. The price is the loudest sentence on the page, so it is
   carried by type alone — a framed panel here would be the fourth
   bordered rectangle in a row and the emphasis would cancel out. */
.pricing-line {
  font-family: var(--serif);
  font-size: clamp(27px, 3vw, 40px);
  line-height: 1.45;
  font-weight: 400;
  color: var(--ink);
  max-width: 900px;
  margin: 0;
  text-wrap: pretty;
}
.pricing-line em {
  font-style: normal;
  font-weight: 700;
  color: var(--ember-deep);
  white-space: nowrap;
}

/* ── Section rhythm ──
   Bands alternate paper / paper-light so each section reads as its own
   ground. Three paper-light sections used to run together (about,
   cycle-format, what-get) and the boundaries disappeared. */
.cycle-format { background-color: var(--paper); background-image: var(--paper-grain); background-size: var(--paper-grain-size); background-blend-mode: var(--paper-grain-blend); }

/* ── Dates — the cadence, stated as data rather than as another card ── */
.cycle-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 56px;
  padding-top: 4px;
}
.cycle-date {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 16px;
  border-right: 2px solid var(--line-ember);
}
.cycle-date-label {
  font-family: var(--sans);
  font-size: clamp(12px, 1.15vw, 13.5px);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ember);
}
.cycle-date-value {
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}

/* ── The closing section and the one form on the page ──
   Flat ink with a brown cast read dated. Cooler, deeper ground with the
   gold kept as light rather than as pigment, and the fields held in a
   hairline card so the signup reads as a card and not as a block. */
.final {
  background:
    radial-gradient(1100px 520px at 50% 0%, rgba(178,137,106,0.17), transparent 64%),
    linear-gradient(180deg, #15120E 0%, #0C0A08 58%, #100D0A 100%);
}
.final::before { display: none; }
.final-inner { max-width: 560px; }
.final .form-shell {
  max-width: 496px;
  padding: 26px 26px 4px;
  background: linear-gradient(180deg, rgba(251,247,236,0.055), rgba(251,247,236,0.012));
  border: 1px solid rgba(178,137,106,0.26);
  border-radius: 14px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.45), 0 1px 0 rgba(251,247,236,0.06) inset;
}

/* ── "מה תקבל" — rebuilt hierarchy ──
   Reordering the page left four blocks here at nearly the same size,
   stacked and competing. The order is now explicit: the section title,
   the two things this is not (quiet, in the ruled block), the one thing
   it is (the big line), then the anchor and its three promises on their
   own lines, numbered to match "3 דברים". */
.what-get-inner { gap: clamp(16px, 2.6vw, 26px); }
/* Sat 42px below the colour change above it and 4px above the box below,
   so it read as a caption on the box rather than as the heading of the band.
   Balanced: both gaps are now half the total. Written against the same clamp
   the section's padding uses, so it stays balanced at every width - 23/23 at
   1200, 15/15 where the padding bottoms out. */
.what-get-title {
  margin-top: calc(5px - clamp(20px, 3vw, 40px) / 2);
  margin-bottom: calc((clamp(20px, 3vw, 40px) + 10px) / 2);
}

.what-get-anchor {
  margin: clamp(18px, 2.6vw, 28px) 0 0;
  padding: clamp(18px, 2.4vw, 26px) 0 0;
  border-top: 1px solid var(--line-ember);
  border-bottom: none;
  max-width: none;
  font-size: inherit;
  text-align: right;
}
.what-get-anchor-lead {
  font-family: var(--sans);
  font-size: clamp(15.5px, 1.45vw, 18px);
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0 0 clamp(12px, 1.6vw, 18px);
}
ul.what-get-anchor-trio {
  display: grid;
  gap: clamp(9px, 1.2vw, 13px);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: trio;
  font-size: inherit;
  color: inherit;
}
ul.what-get-anchor-trio li {
  display: flex;
  align-items: baseline;
  gap: clamp(10px, 1.2vw, 15px);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(20px, 2.15vw, 27px);
  line-height: 1.35;
  color: var(--ember);
  text-wrap: pretty;
}
ul.what-get-anchor-trio li::before {
  counter-increment: trio;
  content: counter(trio);
  flex-shrink: 0;
  min-width: 1.3em;
  font-style: normal;
  font-weight: 700;
  font-size: 0.72em;
  color: var(--ember);
  opacity: 0.5;
}

/* ── Side gutters ──
   .section provides a 6vw gutter, but these sections set `padding: X 0`
   for their vertical rhythm and wiped it out, so their copy ran to the
   very edge of the viewport. Vertical value kept, gutter restored. */
.what-get, .syllabus, .pricing, .cycle-format {
  padding-left: 6vw;
  padding-right: 6vw;
}

/* The tick list sits under the section's big statement, so it steps down
   from it rather than competing with it. */
.what-get-list li { font-size: clamp(18px, 1.85vw, 23px); }
.what-get-list { gap: 14px; }

/* ── The mark ──
   Masked rather than inlined so it takes --ember from currentColor rather
   than carrying a baked-in colour, and stays sharp at any size. All seven
   bullets carry the same rose: they alternated two for a while, but the grid
   is two columns, so odd and even items land in fixed columns and the
   alternation read as one mark per column rather than as a rhythm down the
   list.

   compass-rose8.svg is drawn from geometry rather than traced. At 26px a
   trace's wobble shows as fuzz along the spikes and the ring's four breaks
   silt up; stated as fractions of the viewBox, the shape holds at any size.
   compass-star.svg and compass-rose.svg are the licensed pair this replaced;
   they stay in the tree, and nothing fetches a mask no element names. */
.insight-num .mark {
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  -webkit-mask: url("compass-rose8.svg") center / contain no-repeat;
  mask: url("compass-rose8.svg") center / contain no-repeat;
}

/* The featured bullet carries a 3px rule plus 14px of inset, which pushed
   its mark 17px off the line the others sit on. Everything else gets the
   same total inset so all seven align. */
.insight { padding-right: 17px; }
.insight-featured { padding-right: 14px; }  /* + its own 3px rule = the same 17px */

/* ── "מה תקבל" — copy and photograph side by side ──
   The section's opening was a wall of type. The photograph takes the
   outer half of the column so the statement has something to sit
   against, and drops below the copy once the two no longer fit. */
.what-get-top { display: block; }
.what-get-copy { display: flex; flex-direction: column; }

/* Arched editorial window: warm paper tone rather than the cover's
   duotone, a gold hairline offset behind it, and a lift on hover that
   lets the photograph come back towards neutral. */
.what-get-photo {
  position: relative;
  margin: 0;
  align-self: center;
}
.what-get-photo::after {
  content: "";
  position: absolute;
  inset: 16px -16px -16px 16px;
  border: 1px solid var(--line-ember);
  border-radius: 999px 999px 6px 6px / 46% 46% 6px 6px;
  pointer-events: none;
  z-index: 0;
}
.what-get-photo img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 999px 999px 6px 6px / 46% 46% 6px 6px;
  filter: sepia(0.42) saturate(0.85) contrast(1.04) brightness(1.03);
  box-shadow: 0 26px 60px rgba(31,27,22,0.20);
  transition: filter 0.6s ease, transform 0.6s cubic-bezier(0.2,0.8,0.2,1);
}
.what-get-photo:hover img {
  filter: sepia(0.12) saturate(1) contrast(1.03) brightness(1.02);
  transform: translateY(-6px);
}

/* ── Mid-page CTA ──
   There is one form now, at the foot of the page. This takes the reader
   to it rather than repeating the embed. */
.cta-jump {
  display: inline-block;
  margin-top: clamp(14px, 2vw, 22px);
  background: var(--ember);
  color: var(--ink);
  font-family: var(--sans);
  /* This is a primary call to action, and it was the smallest piece of running
     type on the page: 15px on a phone, under the 16px note sitting right
     beside it and under the 17px body. A button that reads smaller than its
     own caption does not look like the thing to press. It now sits just above
     body size and below the 25px submit at the foot of the page, so the two
     buttons read as one family with the final one still dominant. */
  font-size: clamp(18px, 1.8vw, 21px);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 17px 44px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(178,137,106,0.32);
  transition: background 0.2s, box-shadow 0.25s, transform 0.15s;
}
.cta-jump:hover {
  background: var(--ember-bright);
  box-shadow: 0 16px 40px rgba(178,137,106,0.42);
  transform: translateY(-1px);
}
.cta-jump:active { transform: scale(0.985); }

@media (max-width: 880px) {
  .what-get-top { grid-template-columns: 1fr; gap: clamp(20px, 4vw, 32px); }
  .what-get-photo { max-width: 420px; margin-inline: auto; width: 100%; }
  .what-get-photo::after { inset: 12px -12px -12px 12px; }
}

/* ── Photographs ──
   Two treatments, used consistently: the arched window for a section's
   feature image, and a soft card with the same offset gold hairline for
   the smaller ones. Everything shares the warm paper tone and the lift
   on hover, so they read as one set. */
.photo-card {
  position: relative;
  margin: 0;
}
.photo-card::after {
  content: "";
  position: absolute;
  inset: 12px -12px -12px 12px;
  border: 1px solid var(--line-ember);
  border-radius: 6px;
  pointer-events: none;
  z-index: 0;
}
.photo-card img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  filter: sepia(0.42) saturate(0.85) contrast(1.04) brightness(1.03);
  box-shadow: 0 20px 46px rgba(31,27,22,0.18);
  transition: filter 0.6s ease, transform 0.6s cubic-bezier(0.2,0.8,0.2,1);
}
.photo-card:hover img {
  filter: sepia(0.12) saturate(1) contrast(1.03) brightness(1.02);
  transform: translateY(-5px);
}

/* "מה תבין דרך הקורס" — the heading shares its row with two couples */
/* The story, and the photograph that closes it */
.about-photo { margin-top: clamp(20px, 2.6vw, 30px); max-width: 460px; }
.about-photo img {
  /* Shown whole. It was cropped to 4/3 when the picture was a landscape
     frame of the two of them; the file Tal wants is square, and forcing it
     into 4/3 cut a quarter of the height away. */
  filter: none;          /* shown as taken */
}
.about-photo:hover img { filter: none; }

.syllabus-inner { display: block; }
@media (max-width: 880px) {
  .about-photo { max-width: 100%; }
}

/* The price under the closing headline, at twice its old 16px. */
.final-sub {
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.6;
  color: rgba(251,247,236,0.78);
  font-weight: 400;
}
.final-sub strong { font-weight: 600; }

/* ── The portrait, opened out to the full frame ──
   A circle cropped away everything but his head. The room is the course
   set, and it is worth seeing, so the picture now runs the width of the
   section at its native 16:9. A true ellipse would eat the corners —
   the lamp on one side, the shelves on the other — which is the part
   that sells, so it's a rectangle with a very large radius instead:
   soft enough to read as a shape, not so soft that it loses the set. */
.about-portrait-wrap {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}
.about-portrait-clean {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  border-radius: clamp(26px, 4.4vw, 64px);
  box-shadow: 0 34px 80px rgba(31,27,22,0.22);
}
.about-portrait-clean img {
  object-position: center 32%;
}
/* the hairline echo follows the new shape; the spinning dashed circle
   only ever made sense around a circle */
.about-portrait-clean::before {
  inset: -12px;
  border-radius: clamp(34px, 5vw, 76px);
  opacity: 0.5;
}
.about-portrait-clean::after { display: none; }
.about-portrait-flourish { display: none; }

@media (max-width: 600px) {
  .about-portrait-clean { border-radius: 20px; }
  .about-portrait-clean::before { inset: -8px; border-radius: 26px; }
}

/* ═══════════════════════════════════════════════
   THREE LISTS IN A ROW — given three different forms

   מה תבין / מה תקבל / חמשת המודולים ran as three stacks of the same
   bar, one after the other, which is why the whole stretch read as one
   undifferentiated wall. They are not the same kind of thing, so they
   no longer look the same:

     מה תבין      → a two-column field of outcomes, no surfaces,
                     ledger rules only. Halves the run and lets the eye
                     scan instead of read.
     מה תקבל      → a grid of small chips. Deliverables are short and
                     factual; they should look like a spec, not prose.
     חמשת המודולים → a timeline. It is a sequence over ten weeks, and a
                     line with numbered nodes says that on sight.

   Type comes down across all three as well: the 2× scale-up is what
   made seven long sentences feel like a wall in the first place.
═══════════════════════════════════════════════ */

/* ── 1. Outcomes: a scannable field ── */
.insights-grid { max-width: 1120px; }
.insight-body p,
.insight-featured .insight-body p { font-size: clamp(17px, 1.55vw, 20px); }
.insight:last-child .insight-body p {
  font-size: clamp(18.5px, 1.75vw, 22px);
  max-width: none;
}
.insight-num { width: clamp(26px, 2.5vw, 32px); height: clamp(26px, 2.5vw, 32px); }
.insight { gap: 14px 18px; }

/* ── The outcomes descend in a zig-zag ──
   Two equal columns put two items on every row, and a row can be read in
   either direction: cross it and you get 1,2,3,4,5,6, read down a column
   instead and you get 1,3,5 then 2,4,6. Six statements that build on each
   other cannot afford a layout with two readings.

   Numbering them fixed the order and cost the section its character - it
   became a list of instructions rather than a description of what changes.
   So the marks and the rules come back exactly as they were, and the order
   is carried by the shape instead: one item per row, alternating sides, so
   the only way through is down. There is never a second thing level with
   the thing you are reading, which is what made the order optional before.

   The copy was resequenced to match, because the pairs that used to sit
   side by side were not the pairs that belong next to each other once they
   are read in a line.

   Below 900px this all collapses to the single column it always was, where
   the question does not arise. */
/* The rules never grow past their own item - they retract from the seam and
   pay back out to it - so nothing ever crosses into the other column. One
   second out, one second back, over 6px - the full 12 was too busy for a
   mark this quiet. Deliberately not gated behind
   prefers-reduced-motion: Tal's machine reports it, and this is a few pixels
   of drift he asked for and would otherwise never see. */
@keyframes insight-rule {
  0%, 100% { width: 100%; }
  50%      { width: calc(100% - 6px); }
}
@keyframes insight-arrow-r {
  0%, 100% { transform: translate(-2px, 50%) rotate(-45deg); }
  50%      { transform: translate(4px, 50%) rotate(-45deg); }
}
@keyframes insight-arrow-l {
  0%, 100% { transform: translate(2px, 50%) rotate(45deg); }
  50%      { transform: translate(-4px, 50%) rotate(45deg); }
}

@media (min-width: 900px) {
  .insights-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* One item per row, so the gaps that separated two columns of text are
       now separating nothing: 60px between the columns and 40px between the
       rows was air the eye has to cross between one line and the next. The
       narrower column gap also widens each half enough that every item
       settles into two lines, which evens the rhythm on its own. */
    column-gap: 0;
    row-gap: 0;
  }
  /* Explicit rows, not auto-placement: given only a column, the algorithm
     packs both items of a pair onto the first row that fits them and the
     zig-zag never happens. */
  .insight:nth-child(1) { grid-area: 1 / 1; }
  .insight:nth-child(2) { grid-area: 2 / 2; }
  .insight:nth-child(3) { grid-area: 3 / 1; }
  .insight:nth-child(4) { grid-area: 4 / 2; }
  .insight:nth-child(5) { grid-area: 5 / 1; }
  .insight-featured     { grid-area: 6 / 1 / 7 / -1; }

  /* The hairline under each item is the tread of the step down to the next
     one. It belongs to the half the item occupies, so it stops where the
     item stops rather than ruling the full width and tying the two columns
     back into rows. */
  .insight {
    /* The rule is drawn by ::before rather than as a border, because a
       border cannot change length and this one breathes. */
    border-bottom: none;
    padding-bottom: clamp(8px, 1vw, 14px);
    gap: 12px 14px;
    /* The compass sits on the middle of its item's text, between the two
       lines. It used to hang off the FIRST line, and for a good reason at
       the time: centring puts it at a distance from that first line which
       depends on how many lines the item runs to, so with items of mixed
       height no single shift could keep every rule level with the next
       item's mark. That objection is gone - every item is now written to
       two lines, measured at 920, 1000, 1200 and 1440 - so centring is
       both exact and constant, and it closes 16px of air per item. */
    align-items: start;
  }
  .insight-num {
    /* Half a line-height became a full one: 0.875 is the middle of the
       first line, 1.75 the middle of two. 0.4em is the text's own offset
       from the top of the item. */
    margin-top: calc(0.4em + 1.75 * clamp(17px, 1.55vw, 20px)
                     - clamp(26px, 2.5vw, 32px) / 2);
  }
  .insight:nth-child(5), .insight-featured { border-bottom: none; }
  /* Each rule lands on the middle of the next item's first line, so the
     zig-zag interlocks instead of stepping down past a gap. The shift is
     the body's own line box plus the padding above it - 1.2 x the text
     size - which is why it is written against the same clamp the text uses
     rather than as a pixel value. Measured to the line's centre at 1000,
     1280 and 1512: off by at most one pixel. */
  .insight:nth-child(n+2):not(.insight-featured) {
    /* 1.2 put the rule on the middle of the next item's FIRST line. The
       mark has since moved down by half a line-height (0.875), so the pull
       grows by exactly that much and the two stay locked together. The
       step between items falls from 61px to 45px as a result, which is the
       air Tal wanted out. Measured at 920, 1000, 1200 and 1440: the rule
       lands within 1px of the next mark's centre at every one. */
    margin-top: calc(-2.075 * clamp(17px, 1.55vw, 20px));
  }

  /* An arrowhead where each rule stops, so the next place to look is stated
     rather than inferred. Both rules stop on the centre seam, and in Hebrew
     an item begins at its own right edge - which is the seam for a left-hand
     item and the far right for a right-hand one. So the head on a right-hand
     item points left, at the next item's compass 17px away, and the head on
     a left-hand item points right, along its own rule to where the next line
     of text starts. Either way it points at the beginning of what to read
     next, at exactly that mark's height. Not on the fifth: it has no rule,
     and the closing box below it is full width and needs no pointing to. */
  .insight:nth-child(-n+4)::before {
    content: '';
    position: absolute;
    bottom: 0;
    height: 1px;
    width: 100%;
    background: rgba(178, 137, 106, 0.22);
    animation: insight-rule 2s ease-in-out infinite;
  }
  .insight:nth-child(-n+4)::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 7px; height: 7px;
    border-style: solid;
    border-color: rgba(178, 137, 106, 0.55);
  }
  /* Each rule is pinned at the edge it starts from and free at the seam,
     so only the arrow end travels: a right-hand rule holds the right edge,
     a left-hand one holds the left. */
  .insight:nth-child(odd)::before  { right: 0; }
  .insight:nth-child(even)::before { left: 0; }
  .insight:nth-child(odd)::after {
    left: 0;
    border-width: 1px 0 0 1px;
    animation: insight-arrow-r 2s ease-in-out infinite;
  }
  .insight:nth-child(even)::after {
    right: 0;
    border-width: 1px 1px 0 0;
    animation: insight-arrow-l 2s ease-in-out infinite;
  }
  /* In step, not half a cycle apart. Both columns retract and pay out
     together, so at any moment the two sets of arrows are travelling in
     opposite directions across the page - they close on the seam and open
     away from it. Tal's call, and it reads better: the mirror is legible as
     a pair breathing, where matching directions just looked like drift. */
}

/* ── 2. Deliverables: chips, not bars ── */
.what-get-list {
  display: grid;
  /* Fixed three across, so six chips land as two even rows and the grid
     shares its rhythm with the three numerals above it. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 14px);
}
@media (max-width: 900px) {
  .what-get-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .what-get-list { grid-template-columns: minmax(0, 1fr); }
}
.what-get-list li {
  align-items: flex-start;
  gap: 11px;
  padding: 15px 17px;
  background: rgba(178,137,106,0.055);
  border: 1px solid var(--line-ember);
  border-radius: 10px;
  font-size: clamp(15.5px, 1.42vw, 17.5px);
  line-height: 1.62;
}
.what-get-list li:hover {
  transform: none;
  border-color: var(--ember);
  background: rgba(178,137,106,0.10);
}
.what-get-list .check { font-size: 1.1em; line-height: 1.4; }

/* ── 3. The modules: a sequence, drawn as one ── */
.syllabus-list { position: relative; gap: 0; }
.syllabus-list::before {
  content: "";
  position: absolute;
  top: 30px;
  bottom: 30px;
  right: 23px;
  width: 1px;
  background: linear-gradient(180deg,
    transparent, var(--line-ember) 10%, var(--line-ember) 90%, transparent);
}
.syllabus-list li {
  background: none;
  border: none;
  border-radius: 0;
  padding: clamp(9px, 1.3vw, 15px) 0;
  gap: clamp(16px, 1.8vw, 24px);
  align-items: center;
}
.syllabus-list li:hover { transform: none; }
.syllabus-num {
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-ember);
  background-color: var(--paper);
  background-image: var(--paper-grain);
  background-size: var(--paper-grain-size);
  background-blend-mode: var(--paper-grain-blend);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(19px, 1.9vw, 23px);
  line-height: 1;
  transition: border-color 0.25s, background 0.25s;
}
.syllabus-list li:hover .syllabus-num {
  border-color: var(--ember);
  background: rgba(178,137,106,0.10);
}
.syllabus-text { font-size: clamp(18px, 1.8vw, 22px); }

/* The later price is struck through in both places. .strike already
   exists for the dark closing section; the mid-page one sits on paper
   and needs its own tone. */
.pricing-line .pricing-later {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(94,88,73,0.55);
  color: var(--ink-muted);
}

/* ── "מה תקבל" — the quantity, before the character ──
   Four chips of adjectives answered "what kind of course is this" but
   never "how much of it is there", which is the first thing a careful
   buyer asks. Three numerals, all drawn from facts the page already
   states: five modules, a live Q&A after each, one every two weeks. */
.what-get-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: clamp(16px, 2.2vw, 24px) 0 clamp(12px, 1.6vw, 18px);
  border-top: 1px solid var(--line-ember);
  border-bottom: 1px solid var(--line-ember);
}
.what-get-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: clamp(13px, 1.7vw, 19px) 8px;
  text-align: center;
}
.what-get-stat + .what-get-stat { border-right: 1px solid var(--line-soft); }
.what-get-stat-num {
  font-family: var(--serif);
  font-size: clamp(32px, 3.8vw, 50px);
  font-weight: 700;
  line-height: 1;
  color: var(--ember);
}
.what-get-stat-label {
  font-family: var(--sans);
  font-size: clamp(11px, 1.1vw, 13.5px);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
  text-wrap: balance;
}

/* ── The caret in the form fields ──
   The field text is painted light with -webkit-text-fill-color, which
   overrides `color` for the glyphs but not for the caret. `color` was
   left at the embed's near-black, and caret-color follows `color` by
   default — so the caret was black on a black field. Both are set now,
   and the caret is given the gold so it is easy to find. */
.form-shell .rp-form input:not([type="checkbox"]):not([type="radio"]):not(#nope),
.form-shell .rp-form textarea:not(#nope),
.form-shell .rp-form select:not(#nope) {
  color: var(--bone) !important;
  caret-color: var(--ember-bright) !important;
  /* The typed text was hard to read on a phone. The page's own field rule
     up in FORM sets a lifted background, but it is written at .form-shell
     weight and the embed's sheet outranks it, so the fields were painted
     transparent and the text sat straight on the section's near-black with
     nothing to separate it. Restated here, where it wins, together with a
     slightly heavier weight: the embed's own webfont renders thin, and a
     thin bone glyph on black holds up on a monitor but not on a small
     screen in daylight. */
  background: rgba(251,247,236,0.06) !important;
  -webkit-text-fill-color: var(--bone) !important;
  font-weight: 500 !important;
}
.form-shell .rp-form input:not([type="checkbox"]):not([type="radio"]):focus:not(#nope),
.form-shell .rp-form textarea:focus:not(#nope) {
  background: rgba(251,247,236,0.10) !important;
}

/* Autofill is the other way the text went dark. The browser repaints an
   autofilled field with its own background and glyph colour, and the
   background half of that carries UA `!important`, which no author rule
   can beat — the standard answer is to cover it with an inset shadow the
   size of the field. `-webkit-text-fill-color` is not forced, so it can
   simply be set back to bone. The absurd transition delay keeps the
   browser's fade from flashing its own colour on the way in. */
.form-shell .rp-form input:-webkit-autofill:not(#nope),
.form-shell .rp-form input:-webkit-autofill:hover:not(#nope),
.form-shell .rp-form input:-webkit-autofill:focus:not(#nope) {
  -webkit-text-fill-color: var(--bone) !important;
  caret-color: var(--ember-bright) !important;
  -webkit-box-shadow: 0 0 0 1000px #15120E inset !important;
          box-shadow: 0 0 0 1000px #15120E inset !important;
  transition: background-color 600000s 0s !important;
}

/* Real labels for the form fields, off-screen but present: they are what
   the autofill heuristics read, and what a screen reader needs, since the
   embed ships placeholders only. */
.form-shell .rp-form label.rp-visually-hidden:not(#nope) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 600px) {
  .hero { padding-top: clamp(22px, 6vw, 34px); }
  .personal-session { --ps-pad-x: 18px; --ps-pad-top: 20px; --ps-pad-bottom: 20px; }
  .cycle-format .founders-blurb { padding: 20px 18px; }
  .cycle-dates { gap: 16px 28px; }
  .cycle-date { padding-right: 12px; }
  .syllabus-list li { gap: 12px; padding: 14px 16px; }
}

/* ── Centring the three blocks under their headings ──
   Each one needs a different mechanism, because text-align only moves text:
   a flex row needs justify-content, a flex column needs align-items, and a
   block with a max-width narrower than its container needs auto margins or
   it stays pinned to the right however its text is aligned. Getting that
   wrong is what left two headings off the centre line last time. */

/* The two dates. Each keeps its gold rule; the pair now sits on the centre
   line instead of against the right edge. */
.cycle-dates { justify-content: center; }
.cycle-date { align-items: center; text-align: center; }

/* מה תקבל, all of it. .what-get-anchor carried an explicit text-align:right,
   so it has to be named rather than inherited over. */
.what-get-inner,
.what-get-anchor,
.what-get-anchor-lead,
/* Each trio row is a flex line holding its number and its text, so the
   text-align did nothing to it — the pair stayed packed against the start
   edge. justify-content centres the number and the text together, which
   keeps the numeral attached to the line it counts. */
ul.what-get-anchor-trio li { text-align: center; justify-content: center; }
.what-get-stat { align-items: center; }
.what-get-list li { justify-content: center; text-align: center; }

/* חמשת המודולים. The list is a timeline: a hairline runs down it at a fixed
   offset and the numbered discs sit on that line. Centring the items would
   pull them off their own rule, so the block is centred instead — shrink it
   to its content and let auto margins place it. */
.syllabus-list { width: fit-content; margin-inline: auto; max-width: 100%; }
.syllabus-note { text-align: center; }

/* תוכן הקורס, 2026-10-06. Was "חמשת המודולים", numbered 1-5 on a timeline.
   Tal will keep five (or give more) but is not sure of the order, and the
   numbers and the line promised one. Now the gold diamonds of the
   credentials under מי מלמד, with no discs and no line. Each diamond sits
   on the centre of its item's FIRST line (the text is 1.5 line-height), so
   a title that wraps on a phone keeps it beside its opening words. */
body section.syllabus .syllabus-list::before { display: none; }
body section.syllabus .syllabus-list li { align-items: flex-start; }
/* ul + li in the selector to outrank the navy disc rule further down. */
body section.syllabus ul.syllabus-list li .syllabus-num,
body section.syllabus ul.syllabus-list li:hover .syllabus-num {
  width: 9px;
  min-width: 9px;
  height: 9px;
  margin: calc(0.75em - 4.5px) 4px 0;
  font-size: clamp(18px, 1.8vw, 22px);
  border-radius: 0;
  border: 1.5px solid #D9B89D;
  background: none;
  transform: rotate(45deg);
}

/* המחיר. .pricing-line is capped at 900px with margin:0, so it needed the
   auto margins as much as the alignment. The 1:1 panel centres its badge and
   its offer line; its two long paragraphs stay ranged right, where they read. */
.pricing-line { text-align: center; margin-inline: auto; }
.personal-session { text-align: center; }
/* The badge is a flex item, and flex alignment beats text-align — the same
   thing that had the hero's kicker pill pinned to the right edge. It stretches
   now rather than centring: see the condition-ribbon note near the end. */
.personal-session-badge { align-self: stretch; }
/* The body and the note were the two long paragraphs in a centred box, and
   long ranged-right copy reads better than long centred copy - which is why
   they were exempted. The note is gone now and Tal wants the body centred
   with the rest, so the exemption has nothing left to hold. */

/* Capped at 950px with margin:0, so its text centred inside a box that
   stayed ranged right. */

/* ── The signature and the photograph under the story ──
   Both were anchored to the right edge, which is what a signature wants
   when the page ranges right and reads as a miss once the page centres.

   The rule beside the name is the part that actually had to change, not
   just its position: a single rule on one side is a device for text held
   against a margin. Centred, it reads as lopsided. So the name now sits
   between two of them, which is the same device stated symmetrically.

   .about-sig is inline-flex, so it needed to become a block-level flex
   rather than inherit an alignment; the photograph is capped at 460px
   with no auto margins, so it needed the margins. Its offset hairline
   frame stays as it is — that asymmetry is deliberate and shared with
   every other photograph on the page. */
.about-sig { display: flex; justify-content: center; }
.about-sig::before {
  content: ''; width: 50px; height: 1px;
  background: var(--ember); opacity: 0.6;
}
.about-photo { margin-inline: auto; }

/* ── The seventh outcome, on the centre line ──
   It already spans both columns and closes the section, so it is the one
   row that should land on the page's centre rather than inside a reading
   column. .insight is a two-column grid holding the mark and the text, and
   text-align moves neither of them off the start edge, so the row becomes a
   flex line and justify-content carries the mark and the copy across
   together.

   Its single right-hand rule had to be mirrored. A rule on one side is a
   device for text held against a margin; centred it reads as lopsided,
   which is the same reason the signature under the story grew a second
   one. The body is capped so the sentence breaks over two balanced lines
   instead of running the full 1120px of the grid. */
/* The selector is doubled on purpose. `.insight:last-child` up in the base
   sheet zeroes padding-bottom, which is right for a plain last row in a ruled
   list: no hairline under it, so no space under it either. This item is no
   longer that. It is a bordered, tinted, centred box, and it is also the last
   child, and `.insight:last-child` (0,2,0) outranks `.insight-featured`
   (0,1,0) however late in the sheet the latter sits. So the shorthand below
   was setting 18px above the text and losing the 18px below it, which is why
   the box read as sitting on its own baseline. `.insight.insight-featured`
   ties the weight and wins on order. Not an !important case.

   Vertical padding now runs a little wider than horizontal. This is the
   closing statement of the section and the only boxed thing in it, so it
   wants the presence; at the old value the two lines of copy were tighter to
   the rules than the rules were to the words. */
.insight.insight-featured {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-right: 3px solid var(--ember);
  border-left: 3px solid var(--ember);
  border-radius: 4px;
  padding: clamp(18px, 2.2vw, 26px) clamp(16px, 2vw, 22px);
  margin-top: clamp(6px, 1.2vw, 14px);
}
.insight-featured .insight-body {
  /* 720 was right when one mark sat beside this line. A second one takes
     another 46px off the measure, which pushed "ורגש." onto a line of its
     own - the worst thing you can do to a closing sentence. 800 holds the
     first sentence whole at 785px, with 984px available before the marks
     would have to move. */
  max-width: 800px;
  padding-top: 0;
}
/* The closing statement is centred, so it takes a mark on each side rather
   than one at the start: a single mark on a centred line reads as a bullet
   that has lost its list. They sit on the line's own centre, which is why
   the first-line anchoring the numbered items use is cleared here. */
.insight-featured .insight-num { margin-top: 0; }

/* ═══════════════════════════════════════════════
   TYPE SCALE — one ladder for the whole page

   The page was typeset in passes: a base sheet, a 2× scale-up, then a
   refresh that walked parts of that back. What survived was six section
   headings at three sizes and two weights, body copy running from 15.5px
   to 29px depending on which pass last touched it, and a row of small
   labels that had drifted to 11px with no floor under them.

   Nothing below is a new invention. Each value is a size the page was
   already using somewhere, now applied to everything doing the same job:

     display       hero / countdown / registration        (unchanged)
     section head  clamp(34px, 4.6vw, 56px), weight 500
     feature       clamp(21px, 2.5vw, 42px)               (unchanged)
     body          clamp(17px, 1.55vw, 20px)
     support       clamp(16px, 1.45vw, 19px)
     note          clamp(15.5px, 1.4vw, 17.5px)
     label         clamp(12.5px, 1.15vw, 13.5px)

   The label floor is the one hard rule. Hebrew has no capitals, so a
   tracked-out label gets no help from cap height, and at 11px on a
   phone the counters close up. Four separate labels sat at 11px.

   This block is last in the sheet on purpose, for the reason the centring
   block above it is: the De-boxing block is not the end of the sheet,
   several hundred lines of later rules restate font-size, and a block
   placed before them loses without it being a specificity problem. Where the
   thing being overridden does out-specify (.about-content .kicker is two
   classes), it is named at its own weight rather than forced.
═══════════════════════════════════════════════ */

/* ── Section headings ──
   All six say the same thing about the page, so they are one size and one
   weight. They were 84 / 56 / 44 across three passes, which read as three
   levels of heading in a page that only has one. 56 is the size four of
   them already shared; 500 is the weight the three most recently drawn
   ones already carried, and it suits Frank Ruhl at this scale better than
   900, which at 56px closes the counters up. */
.insights-head h2,
.about-h,
.cycle-format-title,
.what-get-title,
.syllabus-title,
.pricing-title {
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* The signature was 40px against a 44px heading, and on a phone it was
   actually the larger of the two. It is a flourish at the foot of the
   story, so it steps below the heading it sits under. */
.about-sig { font-size: clamp(24px, 2.4vw, 32px); }

/* The hero's supporting line was 30px on a 390px phone: six lines of
   heavy sans under a 48px title, which made the paragraph, not the course
   name, the loudest thing in the hero. A sub-line belongs at roughly a
   quarter to a third of the display it supports. */
.hero-supporting { font-size: clamp(19px, 2vw, 28px); }

/* ── Body ──
   Every running paragraph on the page, at one size. The format blurb was
   the outlier: a fixed 29px that never responded, so on a phone a
   five-sentence paragraph ran at eleven characters to the line. */
.about-body,
.founders-blurb p {
  font-size: clamp(17px, 1.55vw, 20px);
}

/* ── Support ──
   Lines that introduce something rather than carry it. Both sat below the
   body size while the things they introduce ran at 27px and 22px. */
.what-get-anchor-lead { font-size: clamp(16.5px, 1.5vw, 19px); }
.what-get-list li     { font-size: clamp(16px, 1.45vw, 18px); }

/* ── Notes ── */
.syllabus-note,
.personal-session-note {
  font-size: clamp(15.5px, 1.4vw, 17.5px);
}

/* ── Section eyebrow ──
   Pulled back out of the label tier below, which had swept it in and taken
   it from the 16px it was deliberately set to down to the 12.5px floor.

   It is the same role as a stat caption but not the same optical problem.
   A caption sits directly under an 87px numeral and is read as part of that
   cluster, so the numeral carries it. This one is the only kicker on the
   page: it floats alone in whitespace above a 47px heading with nothing
   beside it but a 24px hairline, so it has to carry itself. Tracked Hebrew
   at 12.5px cannot, having no cap height to give the eye a word shape.

   Sized past the original 16px, not merely back to it. 16px was the value
   from before the page was scaled up around it, and restoring it moved the
   eyebrow 1.5px, which is under the threshold where a change registers at
   all. Against a heading that now runs to 56px it holds about a third of
   the heading, which is where an eyebrow sits. Weight goes to 600 for the
   same reason: at this tracking the extra mass does as much work as the
   extra size. */
.kicker,
.about-content .kicker {
  font-size: clamp(16px, 1.7vw, 19px);
  font-weight: 600;
}
/* The leading hairline was drawn against an 11px label. A longer rule keeps
   its proportion to the word now that the word is bigger. */
.kicker::before { width: clamp(28px, 2.6vw, 36px); }

/* ── Labels ──
   Tracked, uppercase-set small type: badges, units, stat captions. They
   ranged from 10px to 20px for what is one role. */
.cd-unit,
.what-get-stat-label,
.cycle-date-label,
.personal-session-badge,
.footer-row {
  font-size: clamp(12.5px, 1.15vw, 13.5px);
}

/* ═══════════════════════════════════════════════
   COVER REVEAL ON SMALL SCREENS

   Desktop gets this from background-attachment:fixed: the frame is a short
   window, the photo is pinned to the viewport, and scrolling wipes the window
   across a stationary image. Phones have never supported fixed attachment, so
   below 820px the sheet fell back to scroll and the photo simply travelled
   with the page. Nothing below touches the desktop rule.

   The first attempt at replacing it made this layer 100lvh so a script could
   translate it and emulate a fixed background exactly. That is what a fixed
   background does, and it is precisely why it should not be done here.
   background-size:cover sizes the photo to cover its box, so a 390x844
   portrait box scaled a 2000x1582 landscape photo to 1067px wide inside a
   390px window: about a third of the composition survived, and the
   composition is two panels and a divider. The compass and the couple were
   the parts cropped away.

   A phone in portrait cannot show a landscape photo pinned to its viewport
   without that happening, so the reveal here is a pan rather than a pin. 7%
   of overhang top and bottom keeps the photo sized against a box close to the
   frame's own shape, which is what protects the framing, and still leaves
   room to travel. Visible width goes from 37% back to about 75%, against 86%
   for a frame with no overhang at all.
═══════════════════════════════════════════════ */
@media (max-width: 820px) {
  /* Tal's read, and it is the right one: shorten the window rather than
     stretch the layer. The frame was 360px, which on a 390px phone is nearly
     square, and a near-square window onto a 2000x1582 landscape photo has to
     crop the sides hard just to fill itself. That was the real cause of the
     bad framing, and pushing the layer taller only made it worse.

     At 250px the photo is sized against a box close to its own shape: cover
     renders it about 430px wide against a 390px window, so roughly 91% of the
     composition is visible instead of 75%, and on a 430px phone it is all of
     it. The band also stops eating most of a screen on the way past, and 18%
     of overhang leaves 45px a side for the pan to actually travel in. */
  .cover-frame { height: 250px; }
  .cover-frame .cover-bg {
    background-attachment: scroll;
    /* No overhang any more. Overhang existed to give a pan somewhere to
       travel, and the pan was an imitation of the desktop pin that cannot
       work here: looking pinned needs the layer to counter-travel the whole
       distance the frame crosses the screen, about 1100px, and overhang can
       only ever buy 90 of it. What arrived instead was an image that scrolled
       with the page and drifted slightly, which reads as broken rather than
       subtle.

       Without overhang the layer is the frame, 390x250 on a phone, and cover
       sizes the photo from its width: 390 x 308. The full width of the
       composition is visible, both panels and the divider, which is the best
       framing this photo has had on a phone. The reveal is the zoom below. */
    top: 0;
    bottom: 0;
  }
}

/* The pan is driven by CSS, not by a scroll listener, and that is the whole
   answer to the jitter. Touch scrolling is composited off the main thread, so
   a transform written from a scroll handler is always computing against a
   position the compositor has already moved past, and the layer visibly lags
   and snaps. A scroll-driven animation is evaluated on the compositor with
   the scroll itself, so there is nothing left to fall behind.

   The timeline is named on .cover rather than taken with view() on the layer
   itself, because both .cover and .cover-frame are overflow:hidden and an
   overflow:hidden element is a scroll container. view() resolves against the
   nearest scroll container ancestor, which for the layer is the frame, which
   never scrolls. .cover is the outermost of the three, so its own nearest
   scroll container is the document, which is the thing actually scrolling.

   Browsers without scroll-driven animations keep the photograph, centred in
   its overhang, and lose the pan. That is the behaviour they had before any
   of this, and it is the honest fallback: the same JS that jitters here would
   jitter there too. Chrome and Android Chrome have had this since 115 and
   Safari since 26, so iPhones on iOS 18 and earlier are the ones that sit it
   out. */
@supports (animation-timeline: view()) {
  @media (max-width: 820px) {
    .cover { view-timeline-name: --cover-view; }
    .cover-frame .cover-bg {
      animation: cover-pan linear both;
      animation-timeline: --cover-view;
      animation-range: cover;
      will-change: transform;
    }
  }
}
/* The phone reveal is a zoom, not a pan.

   It survives the aspect-ratio problem that defeats the pin: scale makes its
   own overflow in both directions, so it needs no overhang and cannot open a
   gap, and it reads as motion at a magnitude a pan cannot reach here. It also
   describes what the desktop effect feels like rather than how it works, which
   is the part worth carrying across: the picture gradually arriving.

   It runs outwards, 1.14 to 1.00. Starting tight and opening up lands the end
   of the reveal on the fullest framing, so the composition is most complete
   exactly when the band is centred on screen. Ending at 1.00 rather than above
   it is what keeps 100% of the width visible at rest. */
@keyframes cover-pan {
  from { transform: scale(1.14); }
  to   { transform: scale(1); }
}

/* ═══════════════════════════════════════════════
   THE ANCHOR TRIO, AND THE SIX CHIPS
═══════════════════════════════════════════════ */

/* ── The three things the anchor gives you ──
   Two faults, and the second is the one that made it hard to read.

   The numerals were set at 0.72em and then knocked back to opacity 0.5, so
   an already small figure was drawn at half strength in gold on cream. Gold
   on cream is the page's weakest contrast pair to begin with; half of it is
   barely a mark. They are now a badge at full strength, which also matches
   how the page numbers the modules, so the two numbered lists finally agree.

   The rows were centred individually. Three phrases of very different
   lengths, each centred, puts the three numerals at three different
   horizontal positions, so they read as digits scattered through the copy
   rather than as a column counting one two three. That is the confusion.
   The block is centred instead and the rows start together, which is exactly
   what .syllabus-list does and for the same reason: centre a list that has
   markers by the block, or the markers stop lining up. */
ul.what-get-anchor-trio {
  width: fit-content;
  margin-inline: auto;
  gap: clamp(11px, 1.4vw, 16px);
}
ul.what-get-anchor-trio li {
  justify-content: flex-start;
  text-align: start;
  align-items: center;
}
ul.what-get-anchor-trio li::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8em;
  height: 1.8em;
  min-width: 0;
  font-family: var(--sans);
  font-size: 0.58em;
  font-weight: 600;
  line-height: 1;
  color: var(--ember);
  opacity: 1;
  border: 1px solid var(--line-ember);
  border-radius: 999px;
  background: rgba(178,137,106,0.07);
}

/* ── The six chips ──
   The row was aligned on the first baseline, so the tick sat against the
   first line and everything above the last line of a short chip became
   trailing space. The chips are a grid, so they all stretch to the tallest
   in their row: a two-line chip beside a three-line one was reading as a
   box with its copy pushed to the top. Centring the row settles the copy,
   and the tick with it, in the middle of whatever height the row takes. */
.what-get-list li { align-items: center; }

/* ═══════════════════════════════════════════════
   THE HERO, AS ONE MATERIAL

   The lockup is a photoreal object: gold raised off a sheet of paper, lit
   from the upper left, casting real shadows. Everything under it was drawn
   flat. The course name was solid #B2896A with no shadow at all, sitting on
   a 6px block of the same gold, and the eyebrow was a rounded outline pill,
   which is a UI shape on a page that is otherwise entirely editorial. Put a
   rendered object directly above flat graphics and the flat ones read as
   stickers, which is what was happening at the top of the page.

   The fix is one rule applied three times: in this hero a thing is either
   gold raised off the paper, or it is quiet ink. Nothing is flat gold.

   Not a gradient fill. background-clip:text foil was built, previewed and
   rejected once already; this is light and shadow on solid colour, which is
   what foil stamping actually looks like and what the lockup itself is.
═══════════════════════════════════════════════ */

/* ── The course name, stamped rather than printed ──
   Three shadows: a highlight up-left where the light comes from, a hard
   edge down-right for the bevel, and a soft cast under it. All in em, so
   the relief scales with the type from 48px to 120px instead of turning
   into a smear at one end and vanishing at the other. */
.hero-title-course .course-name-line .ember {
  text-shadow:
    -0.013em -0.013em 0 rgba(255, 253, 246, 0.78),
     0.009em  0.013em 0 rgba(120, 92, 50, 0.34),
     0.024em  0.034em 0.052em rgba(88, 66, 34, 0.30);
}

/* ── The rule under it ──
   Was a 6px block of solid gold behind the word, which is the single
   flattest thing in the hero. Now a hairline that fades out at both ends,
   sitting below the word rather than behind it: a flourish, not a
   highlighter. */
.hero-title-course .course-name-line .ember::after {
  bottom: -0.1em;
  height: 0.035em;
  border-radius: 0;
  opacity: 0.55;
  background: linear-gradient(90deg,
    transparent 0%, var(--ember) 22%, var(--ember) 78%, transparent 100%);
}

/* ── The eyebrow ──
   The rounded pill was the only pill on the page. Everything else that
   introduces a section does it with a tracked word between hairlines, so
   the hero now says it the same way. Same word, same size, same tracking:
   only the container changes. */
.hero-title-course .course-kicker-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.62em;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
}
.hero-title-course .course-kicker-pill::before,
.hero-title-course .course-kicker-pill::after {
  content: '';
  width: 1.5em;
  height: 1px;
  background: currentColor;
  opacity: 0.42;
}

/* ── The watermark ──
   The compass rings were drawn against flat colour. The paper carries its
   own relief now, and two textures behind one title is one too many, so the
   rings step back and let the sheet do that work. */
.hero-compass { opacity: 0.15; }

/* ── The descent ──
   Mark, eyebrow, name, promise. The gaps now shorten as the eye travels
   down, which is what makes four stacked things read as one composition
   rather than four separate ones. */
.hero-logo { margin-bottom: clamp(18px, 3vw, 38px); }
.hero-title-course .course-kicker-pill { margin-bottom: clamp(12px, 1.7vw, 22px); }
.hero-supporting { margin-top: clamp(14px, 2vw, 26px); }

/* ═══════════════════════════════════════════════
   THE HERO, BROUGHT UP TO DATE

   Tal read the top of the page as 2005, and the specifics are worth naming
   because "modern" on its own is not actionable. Four things were doing it.

   1. NOTHING TO DO. The most important thing above the fold on a sales page
      is the thing you press, and there wasn't one: the first call to action
      sat two thirds of the way down. Everything else here is decoration by
      comparison. That is the conversion change; the rest is taste.
   2. ORNAMENT INSTEAD OF STRUCTURE. Concentric rings drifting behind the
      title, and a bevel on the type. Both were period devices in 2008 and
      both are gone. The bevel was mine, from the pass before this one: I
      was matching the lockup's material, and matching it with a drop shadow
      on live text is exactly the dated move.
   3. NO MEASURE. The promise ran to the full width of the grid, so it broke
      into three ragged centred lines. Copy is capped at 52 characters now,
      which is where a centred line stops being work to read.
   4. NO RHYTHM. Four things floating in a column with even air between
      them. Spacing is deliberate now, and tightest where the eye should
      move fastest.

   The type does the work instead of effects: bigger, tighter, unornamented.
═══════════════════════════════════════════════ */

/* No bevel on the course name, and no bar under it. The name carries itself
   at this size; the previous pass propped it up with both. */
.hero-title-course .course-name-line .ember { text-shadow: none; }
.hero-title-course .course-name-line .ember::after { display: none; }

/* Confidence comes from the setting, not the decoration. */
.hero-title-course .course-name-line { letter-spacing: -0.038em; }

/* The rings were the last purely decorative object on the page, and they
   dated it on their own. The paper carries the texture now. */
.hero-compass { display: none; }

/* A measure, so the promise reads as one thought rather than three lines
   of centred ragging. */
.hero-supporting {
  font-size: clamp(17px, 1.6vw, 22px);
  max-width: 52ch;
  margin-inline: auto;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ── The thing to press ──
   Same label and same destination as the call to action further down, on
   purpose: one action, named one way, wherever the reader decides. */
.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.2vw, 14px);
  margin-top: clamp(22px, 2.6vw, 34px);
}
.hero-trust {
  font-family: var(--sans);
  font-size: clamp(12.5px, 1.15vw, 14px);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  opacity: 0.8;
  margin: 0;
}

/* ── Rhythm ──
   Wide under the mark, closing as it descends, tightest between the name
   and the promise. Even gaps read as a list; closing gaps read as one
   composition moving toward the button. */
.hero-logo { margin-bottom: clamp(20px, 2.8vw, 34px); }
.hero-title-course .course-kicker-pill { margin-bottom: clamp(14px, 1.6vw, 20px); }
.hero-supporting { margin-top: clamp(16px, 1.8vw, 24px); margin-bottom: 0; }

/* ── Fitting the hero to the fold ──
   The point of putting a button up here is that it is seen without
   scrolling, and measured at 1280x950 it only just was: the hero ran 1028px
   against a 950px viewport, the button's underside landed at 942, and the
   closing date under it was off the bottom of the screen entirely. A call to
   action that needs a scroll to reach is the same as not having one.

   Part of that is the new lockup. It is 720x711 where the one before it was
   720x668, so at the same width it stands 43px taller, and the hero had been
   spaced around the shorter one.

   Nothing here is arbitrary: the mark comes down about a fifth, the gaps
   close, and the section's own padding tightens, which together take roughly
   180px out and leave the whole composition, closing date included, inside a
   950px screen with room to spare. */
.hero-logo img { width: clamp(180px, 21vw, 300px); }
.hero { padding-top: clamp(28px, 3.4vw, 44px); padding-bottom: clamp(24px, 2.6vw, 34px); }
.hero-logo { margin-bottom: clamp(14px, 1.8vw, 24px); }
.hero-title-course .course-kicker-pill { margin-bottom: clamp(10px, 1.2vw, 16px); }
.hero-supporting { margin-top: clamp(12px, 1.4vw, 20px); }
.hero-actions { margin-top: clamp(16px, 1.9vw, 26px); }

/* ── The hero has to know how tall the screen is, not just how wide ──
   Every clamp in here was keyed to viewport width, so on a wide short screen
   they all reached their ceilings while the screen itself got shorter. At
   1440x800, a common laptop, that put the hero at 937px and dropped both the
   button and the closing date below the fold, which is the one thing this
   layout exists to prevent. 1280x950 passed and 390x844 passed; only the
   short wide case failed, and it is the case most people are on.

   So the two things that own the vertical budget, the mark and the name, are
   capped against height as well as width, and the spacing follows. A phone is
   untouched: at 390px the pixel floors win and min() never reaches for vh. */
.hero-logo img { width: min(clamp(180px, 21vw, 300px), 28vh); }
.hero-title-course { font-size: min(clamp(48px, 9vw, 120px), 11vh); }
.hero { padding-top: min(clamp(28px, 3.4vw, 44px), 3.4vh);
        padding-bottom: min(clamp(24px, 2.6vw, 34px), 3vh); }
.hero-logo { margin-bottom: min(clamp(14px, 1.8vw, 24px), 2.4vh); }
.hero-title-course .course-kicker-pill { margin-bottom: min(clamp(10px, 1.2vw, 16px), 1.8vh); }
.hero-supporting { margin-top: min(clamp(12px, 1.4vw, 20px), 2vh); }
.hero-actions { margin-top: min(clamp(16px, 1.9vw, 26px), 2.6vh); }

/* ═══════════════════════════════════════════════
   THE HERO AS A DOCUMENT

   The previous pass tidied the stack. It was still a stack: four things
   centred in a column on an open field, which is the arrangement Tal read as
   old, and refining the spacing of an arrangement does not change it.

   So the hero is a panel now, and the choice of panel is not arbitrary. The
   page is literally a sheet of ketubah paper, and the product is a course
   about choosing the person you sign one with. A formal document laid on that
   sheet is the one framing device this page can use that means something:
   double hairline rule, deep margins, the mark at the head, the commitment at
   the foot. That is an invitation, not a box.

   Modern rather than 2005, and the difference is in the details: hairlines at
   one pixel rather than a heavy frame, a fill barely lighter than the sheet
   rather than a slab of colour, one soft directional shadow rather than a
   bevel, and a lot of air inside. A bordered box goes wrong when the border
   is the loudest thing in it; here it is the quietest.
═══════════════════════════════════════════════ */
.hero-panel {
  position: relative;
  width: min(760px, 100%);
  margin-inline: auto;
  padding: clamp(26px, 3.6vw, 52px) clamp(20px, 3.4vw, 50px) clamp(24px, 3.2vw, 44px);
  /* Barely lighter than the paper, so it reads as a second sheet laid on the
     first rather than as a panel of flat colour. The texture still shows. */
  background: rgba(255, 253, 248, 0.34);
  border: 1px solid rgba(178, 137, 106, 0.34);
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 22px 48px -30px rgba(92, 68, 36, 0.42);
}
/* The inner rule. A single line is a box; two lines a few millimetres apart
   is a document, and that gap is the whole difference. */
.hero-panel::before {
  content: '';
  position: absolute;
  inset: clamp(5px, 0.6vw, 8px);
  border: 1px solid rgba(178, 137, 106, 0.22);
  border-radius: 1px;
  pointer-events: none;
}
/* Inside a frame the mark no longer has to hold the page on its own, so it
   can sit down and let the name lead. */
.hero-logo img { width: min(clamp(150px, 17vw, 235px), 23vh); }
.hero-title-course { font-size: min(clamp(44px, 7.6vw, 96px), 10vh); }
.hero-supporting { max-width: 46ch; }
.hero { padding-left: 6vw; padding-right: 6vw; }

/* ═══════════════════════════════════════════════
   THE HERO BLOCK, MADE SECULAR

   The panel before this read as a ketubah, and Tal is right that it did. The
   tell was not the paper or the gold, it was the frame: a double hairline
   rule enclosing centred gold type is the convention shared by the ketubah,
   the diploma and the certificate, and it is religious the moment it sits on
   parchment. The course is for anyone, so the top of the page cannot open by
   addressing a subset of them.

   What survives is the part that was working: one distinct block rather than
   four things stacked on an open field. What goes is every edge of the
   document. No enclosing border, no inner rule, and corners soft enough to
   read as a card rather than as a page.

   The wedding thought stays, at a whisper, in a single tapered hairline
   under the mark. A short centred rule is what modern invitations use where
   older ones used a frame: it suggests the occasion without certifying
   anything.
═══════════════════════════════════════════════ */
.hero-panel {
  border: 0;
  border-radius: 10px;
  /* Carried now by the sheet itself rather than by a line around it: a
     little more lift in the fill, a real but soft shadow, and the paper
     grain still reading through. */
  background: rgba(255, 253, 248, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 2px 6px -3px rgba(92, 68, 36, 0.14),
    0 26px 56px -34px rgba(92, 68, 36, 0.40);
}
.hero-panel::before { display: none; }

/* The whisper. Tapered, so it has no ends to read as a border. */
.hero-logo::after {
  content: '';
  display: block;
  width: clamp(44px, 5vw, 76px);
  height: 1px;
  margin: clamp(15px, 1.9vw, 24px) auto 0;
  background: linear-gradient(90deg, transparent, rgba(178, 137, 106, 0.5), transparent);
}
.hero-logo { margin-bottom: min(clamp(12px, 1.5vw, 20px), 2vh); }

/* ═══════════════════════════════════════════════
   THE HERO, SPLIT

   Three passes at this were all the same page: a column of centred things on
   an open field, tidied, then framed, then unframed. Tal asked twice for
   something drastic, so this changes the arrangement rather than its
   spacing.

   The photograph opens the page now, beside the message instead of under it.
   It was already the next thing down; moving it up costs no weight, fills
   the half of the hero that was empty paper, and means the first screen
   carries a face, the promise and the button at once rather than a mark
   floating over parchment.

   The panel goes. With two columns the structure is the split, and a card
   inside a column would be a second frame around the first.

   Deliberately kept: the content stays centred inside its own column. The
   page spent nine commits getting onto its centre line, and an asymmetric
   hero over a centred body would fight it. The split provides the structure;
   the centring stays the language.

   Below 900px it stacks back to what it was, message first and the
   photograph under it, because a half-width photograph on a phone is a
   stripe.
═══════════════════════════════════════════════ */

/* The panel was structure when nothing else was. The split is structure now. */
.hero-panel {
  background: none;
  box-shadow: none;
  border: 0;
  padding: 0;
  width: 100%;
  max-width: 560px;
}

@media (min-width: 900px) {
  .hero {
    display: grid;
    grid-template-columns: 1fr minmax(0, 44%);
    align-items: stretch;
    gap: 0;
    padding: 0;
    min-height: 100svh;
  }
  .hero-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(40px, 6vh, 90px) clamp(32px, 4vw, 72px);
  }
  /* The photograph runs the full height of the column and bleeds to the
     edge of the window. A margin here would turn it back into a picture of
     a couple; without one it is the room the page opens in. */
  .hero .cover { height: 100%; }
  .hero .cover-frame { height: 100%; }
  /* background-attachment:fixed was right for a short band the window
     scrolled past. In a full-height column it pins the photo to the viewport
     and the crop stops relating to its own frame, so it scrolls with it. */
  .hero .cover-frame .cover-bg {
    background-attachment: scroll;
    /* The cover is two panels with a dark divider painted down its centre,
       and in a 557px window over a 1138px cover-scaled image the divider is
       inside the frame at every position except the far end. Worked out
       rather than nudged: the window spans 581..1138 at 100% and the divider
       sits at 569, so this is the only crop that does not put a black stripe
       through the picture. It is also the half worth showing. A compass in
       close-up is the brand; two people is the reason anyone is reading. */
    background-position: 100% center;
  }
  /* Freed from holding the page alone, the mark can sit inside the column
     and the name can lead. */
  .hero-logo img { width: min(clamp(150px, 13vw, 210px), 22vh); }
  .hero-title-course { font-size: min(clamp(44px, 5.2vw, 78px), 11vh); }
  .hero-supporting { max-width: 38ch; }
}

/* Moving the cover inside .hero put it inside the section's 6vw side padding,
   so on a phone the band stopped running edge to edge and picked up a margin
   it never had. It escapes the padding again below the split's breakpoint.
   Above it the photograph is a grid column and the padding is not applied to
   the section at all, so this is scoped to where the regression is. */
@media (max-width: 899px) {
  /* The width has to grow with the margins. .cover carries width:100% from
     its base rule, so negative margins alone left it the same 343px wide and
     simply slid it sideways, hanging off one edge and pulling further in on
     the other. */
  .hero .cover { margin-inline: -6vw; width: calc(100% + 12vw); }
}

/* ═══════════════════════════════════════════════
   THE HERO, TAKE THREE: THE PHOTOGRAPH IS THE PAGE

   Attempt one put the column in a frame. Attempt two put the photograph
   beside it. This one puts the reader inside it: the picture is the whole
   first screen, edge to edge and full height, and the words sit on it.

   There is a measured reason to try it here rather than anywhere else. The
   note that decided where this lockup could live says the render's gold face
   is luminance 231 against paper at 235, which is why it needs size to read
   on cream at all, and why a gold-foil treatment was abandoned. On a dark
   ground that inverts: gold on a photograph at 0.6 scrim has the contrast
   the mark was designed for. The one place the brand's gold has never been
   allowed to be gold is the top of its own page.

   The scrim is the existing gradient on .cover-frame::before, strengthened
   rather than a new layer, so there is still exactly one thing darkening the
   picture. Heavier top and bottom than through the middle: the type sits in
   the band where the photograph is quietest, and the edges carry enough
   weight to hold the mark at the top and the closing line at the foot.

   If this is the wrong swing, the split is one commit back and nothing else
   on the page moved.
═══════════════════════════════════════════════ */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  min-height: 100svh;
  padding: clamp(36px, 6vh, 90px) 6vw;
  isolation: isolate;
}
.hero .cover {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}
.hero .cover-frame { height: 100%; }
.hero .cover-frame .cover-bg {
  background-attachment: scroll;
  background-position: 100% center;
}
/* The scrim. Strengthened, not added: one gradient over the picture, not two. */
.hero .cover-frame::before {
  background: linear-gradient(180deg,
    rgba(16, 12, 9, 0.76) 0%,
    rgba(16, 12, 9, 0.54) 34%,
    rgba(16, 12, 9, 0.58) 62%,
    rgba(16, 12, 9, 0.86) 100%);
}
.hero-grid { position: relative; z-index: 2; padding: 0; }

/* ── Type on a dark ground ──
   Gold gets to be bright here, which it cannot be on cream. */
.hero-title-course .course-name-line .ember,
.hero-title-course .course-kicker-pill { color: var(--ember-bright); }
.hero-title-course .course-kicker-pill::before,
.hero-title-course .course-kicker-pill::after { opacity: 0.6; }
.hero-supporting { color: rgba(247, 241, 229, 0.9); }
.hero-trust { color: rgba(247, 241, 229, 0.74); opacity: 1; }
.hero-logo::after {
  background: linear-gradient(90deg, transparent, rgba(225, 195, 130, 0.62), transparent);
}
/* The mark can hold its full size again: it has the contrast for it now. */
.hero-logo img { width: min(clamp(180px, 20vw, 290px), 26vh); }
.hero-title-course { font-size: min(clamp(46px, 7vw, 104px), 12vh); }
.hero-supporting { max-width: 46ch; }

/* The vignette was drawn for a 1425x520 band, where inset 0 0 200px 60px is a
   soft darkening of the corners. Across a full-height screen the 60px spread
   stops being a corner and becomes a rectangle inset from every edge: a frame
   around the picture, which is the one thing a full-bleed hero must not have.
   Spread to zero and the blur much wider, so it falls off instead of edging. */
.hero .cover-frame::after {
  box-shadow: inset 0 0 clamp(180px, 26vw, 420px) 0 rgba(14, 12, 10, 0.5);
}

/* ═══════════════════════════════════════════════
   THE MARK GETS ITS PAPER BACK

   Tal's read: the lockup looks wrong on the photograph. It does, and the
   reason is in how it was cut. The key un-mixes each edge pixel against the
   paper it was going to sit on, fg = (px - paper(1-a))/a, which reconstructs
   the render exactly when it composites back onto that same paper and only
   then. Over a photograph the soft shadows that give it its relief resolve
   against the wrong ground and either vanish or go muddy. No amount of
   colour correction fixes that; the mark needs the surface it was cut for.

   So his suggestion is the right one, and it is better than the alternative:
   give the middle a ground of the page's own paper. The photograph stays
   full bleed and keeps the drama, the panel gives the lockup the surface it
   was measured against, and the type goes back to the palette the rest of
   the page reads in rather than a second light-on-dark scheme.

   Not the ketubah again: no double rule, no inset second border, no sharp
   document corners. A single sheet of the same stock, soft-cornered, lifted
   off the picture by shadow alone. The frame is the edge of the paper, which
   is a material, not an ornament.

   The scrim eases back a little now that it is no longer carrying legibility
   on its own: the panel holds the words, so the picture is allowed to be
   more visible around it.
═══════════════════════════════════════════════ */
.hero-panel {
  width: min(620px, 100%);
  padding: clamp(28px, 4vw, 54px) clamp(22px, 3.6vw, 48px) clamp(26px, 3.4vw, 44px);
  background-color: var(--paper);
  background-image: var(--paper-grain);
  background-size: var(--paper-grain-size);
  background-blend-mode: var(--paper-grain-blend);
  border: 0;
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 40px 80px -40px rgba(10, 7, 5, 0.75),
    0 8px 24px -14px rgba(10, 7, 5, 0.5);
}

/* Back onto paper, so back to the page's own palette. */
.hero-title-course .course-name-line .ember,
.hero-title-course .course-kicker-pill { color: var(--ember); }
.hero-title-course .course-kicker-pill::before,
.hero-title-course .course-kicker-pill::after { opacity: 0.42; }
.hero-supporting { color: var(--ink-soft); }
.hero-trust { color: var(--ink-muted); opacity: 0.8; }
.hero-logo::after {
  background: linear-gradient(90deg, transparent, rgba(178, 137, 106, 0.5), transparent);
}
.hero-logo img { width: min(clamp(160px, 17vw, 240px), 24vh); }
.hero-title-course { font-size: min(clamp(42px, 6vw, 88px), 11vh); }
.hero-supporting { max-width: 42ch; }

/* The panel carries legibility now, so the picture can come forward. */
.hero .cover-frame::before {
  background: linear-gradient(180deg,
    rgba(16, 12, 9, 0.60) 0%,
    rgba(16, 12, 9, 0.38) 34%,
    rgba(16, 12, 9, 0.42) 62%,
    rgba(16, 12, 9, 0.70) 100%);
}

/* ═══════════════════════════════════════════════
   BREAKING THE CERTIFICATE

   A sheet of paper with a soft-cornered edge, a mark centred at its head and
   formal gold type stacked symmetrically beneath it, is a certificate. The
   double rule was only ever half of it; the other half is the shape and the
   symmetry, and removing the rule left both.

   Three things read as "certificate" and all three go:

   The card becomes a band. It runs the full width of the screen, corner to
   corner, with no radius and no edge. A band is a piece of a page; a card
   with four visible corners is a document lying on a table.

   The stack becomes a row. The mark sits beside the words rather than
   presiding over them from above, which is the arrangement that made it read
   as a seal. A horizontal lockup cannot be a certificate; there is nowhere
   for the signature to go.

   The symmetry goes with it. Copy sets from the reading edge instead of
   centring line by line, so the block has a spine down one side. Perfect
   bilateral symmetry is most of what makes formal documents feel formal.

   The lockup still has its own paper underfoot, which is the whole reason
   the panel exists: the key un-mixes its edges against this exact colour and
   reconstructs only over it.
═══════════════════════════════════════════════ */
.hero { padding-left: 0; padding-right: 0; }
/* .hero-grid carries max-width:1200px from the original editorial hero, which
   left the band 33px short of each edge at 1280 and made it a very wide card
   again rather than a band. The inner width is held by the panel's own 6vw
   padding instead. */
.hero-grid { width: 100%; max-width: none; }
.hero-panel {
  width: 100%;
  max-width: none;
  border-radius: 0;
  padding: clamp(26px, 3.6vh, 50px) 6vw;
  /* Shadow above and below only: it is a band lying across the picture, and
     side shadows would draw the two edges a band is not supposed to have. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 -26px 56px -34px rgba(10, 7, 5, 0.72),
    0 26px 56px -34px rgba(10, 7, 5, 0.72);
}

@media (min-width: 860px) {
  .hero-panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-content: center;
    column-gap: clamp(30px, 4vw, 68px);
    row-gap: clamp(8px, 1vh, 14px);
  }
  /* Explicit areas rather than auto-placement: the mark holds the first
     column against all three rows of copy, and nothing can reflow into it. */
  .hero-logo        { grid-area: 1 / 1 / 4 / 2; margin: 0; align-self: center; }
  .hero-title-course{ grid-area: 1 / 2 / 2 / 3; align-items: flex-start; }
  .hero-supporting  { grid-area: 2 / 2 / 3 / 3; }
  .hero-actions     { grid-area: 3 / 2 / 4 / 3; align-items: flex-start; }

  .hero-panel > *, .hero-supporting, .hero-trust { text-align: start; }
  .hero-supporting { margin-inline: 0; max-width: 46ch; }
  /* The rule under the mark was a divider in a stack. In a row it would be a
     line across the middle of the lockup. */
  .hero-logo::after { display: none; }
  .hero-logo img { width: min(clamp(150px, 15vw, 215px), 26vh); }
  .hero-title-course { font-size: min(clamp(40px, 5vw, 76px), 12vh); }
}

/* ═══════════════════════════════════════════════
   THE CARD, WITHOUT THE CERTIFICATE

   The band was worse, so the rectangle comes back. What does not come back is
   what made the rectangle read as a certificate, and it was never the
   rectangle: it was the symmetry inside it.

   A certificate is bilaterally symmetric. A seal centred at the head, every
   line centred beneath it, each one a different width so the block has two
   ragged edges and no spine. That is the arrangement, and it is the only
   thing being changed here.

   Everything sets from the reading edge instead. One straight spine down the
   right, one ragged edge down the left, the mark flush to the same spine as
   the words rather than floating above the middle of them. That is an
   editorial column, and an editorial column cannot be a certificate no matter
   what shape is drawn around it.

   The closing line moves up beside the button rather than sitting centred
   underneath it, which removes the last centred element and reads as a
   caption rather than as a footer.
═══════════════════════════════════════════════ */
.hero { padding-left: 6vw; padding-right: 6vw; }
.hero-panel {
  display: block;
  width: min(620px, 100%);
  max-width: none;
  margin-inline: auto;
  border-radius: 14px;
  padding: clamp(30px, 4.2vw, 54px);
  text-align: start;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 44px 84px -44px rgba(10, 7, 5, 0.78),
    0 10px 26px -16px rgba(10, 7, 5, 0.5);
}

/* Flush to the spine, not floating over the centre.
   .hero-logo shrinks to the image's width and still carries justify-self
   from when it was a grid item, so simply zeroing its margins left it
   centred in the block. Give the wrapper the full width and push the image
   to the start edge with an auto margin on the far side, which does not
   depend on what the wrapper thinks it is. */
.hero-logo {
  display: block;
  width: 100%;
  margin: 0 0 clamp(20px, 2.6vw, 30px);
  text-align: start;
  justify-self: start;
}
.hero-logo img { margin-inline-start: 0; margin-inline-end: auto; }
.hero-logo::after { display: none; }
.hero-logo img { width: min(clamp(194px, 21.5vw, 296px), 30.7vh); }

.hero-title-course { align-items: flex-start; font-size: min(clamp(42px, 5.4vw, 82px), 12vh); }
.hero-supporting { margin-inline: 0; max-width: 44ch; text-align: start; }
.hero-trust { text-align: start; }

/* Button and closing line on one row: the last centred thing in the block. */
.hero-actions {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(14px, 2vw, 24px);
}
.hero-actions .cta-jump { margin-top: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   THE FOLD
   Measured on the deployed page at 1440x860: hero 0-860, card 53-807,
   next section starting at exactly 860. Every element terminated on or
   above the fold line - the list of things crossing it was empty. That is
   what made the first screen look like the whole page.

   Three moves, in order of how much each one carries:
     1. the following sheet rides up over the photograph by --peek and is
        cut by the fold, so a second surface is visibly in play;
     2. the cue stands on that sheet and runs a bead downward, so the eye
        is given a direction rather than just a hint;
     3. the card gives back about 68px of height on short screens, because
        at 754 of 860 it filled the frame and left nothing to cut.
   ═══════════════════════════════════════════════════════════════════════ */

/* 3 - height-aware card. On a wide, short window the width-driven clamps
   were both at their ceiling and the card ran 88% of the viewport. */
.hero-panel    { padding: clamp(30px, min(4.2vw, 4.0vh), 54px); }
.hero-logo     { margin-bottom: min(clamp(20px, 2.6vw, 30px), 2.8vh); }
.hero-logo img { width: min(clamp(194px, 21.5vw, 296px), 28vh); }

/* 1 - the sheet. The negative margin lifts it over the hero; the padding
   on its own container puts the content back where it was, so nothing
   below this point moves. */
.insights {
  z-index: 3;
  margin-top: calc(-1 * var(--peek));
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -20px 46px -20px rgba(10, 7, 5, 0.58);
}
.insights > .container { padding-top: var(--peek); }

/* 2 - the cue, standing in the band the sheet shows above the fold. It is a
   child of the sheet, not of the hero: .hero carries isolation:isolate, so
   anything inside it paints as one unit underneath this sheet however high
   its z-index. */
.fold-cue {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: calc(var(--peek) * 0.16);
  transform: translate(-50%, 0);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 2px 16px 0;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.fold-cue-track {
  position: relative;
  display: block;
  width: 1px;
  height: 22px;
  background: linear-gradient(to bottom,
    rgba(178, 137, 106, 0), rgba(178, 137, 106, 0.40), rgba(178, 137, 106, 0));
}
.fold-cue-bead {
  position: absolute;
  left: 50%;
  top: 0;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--ember, #B2896A);
  box-shadow: 0 0 7px 1px rgba(178, 137, 106, 0.5);
  animation: fold-cue-bead 2.6s cubic-bezier(0.55, 0, 0.5, 1) infinite;
}
.fold-cue-chev {
  width: 20px;
  height: auto;
  overflow: visible;
  fill: none;
  stroke: var(--ember, #B2896A);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.22;
  animation: fold-cue-chev 2.6s cubic-bezier(0.55, 0, 0.5, 1) infinite;
}
.fold-cue:hover .fold-cue-chev { opacity: 0.9; }

@keyframes fold-cue-bead {
  0%   { transform: translateY(-1px); opacity: 0; }
  14%  { opacity: 1; }
  58%  { transform: translateY(19px); opacity: 1; }
  74%  { transform: translateY(22px); opacity: 0; }
  100% { transform: translateY(22px); opacity: 0; }
}
@keyframes fold-cue-chev {
  0%, 40%   { opacity: 0.20; transform: translateY(0); }
  62%       { opacity: 0.92; transform: translateY(2px); }
  86%, 100% { opacity: 0.20; transform: translateY(0); }
}

/* Once the reader has actually moved, the cue has done its job and should
   stop asking. Scroll-driven, so it tracks the scrubbing rather than
   firing once. */
@supports (animation-timeline: scroll()) {
  .fold-cue {
    animation: fold-cue-dismiss linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 110px;
  }
}
@keyframes fold-cue-dismiss {
  from { opacity: 1; transform: translate(-50%, 0); }
  to   { opacity: 0; transform: translate(-50%, 10px); }
}

/* No prefers-reduced-motion branch here, deliberately. The first version
   froze the cue outright and the second let it pulse on opacity only, and
   both left the Mac - where the OS setting is on - with a still dot while
   the phone got the bead running down the line. Tal asked for the movement
   on both. It is a 4px dot travelling 22px, once every 2.6s. */

/* ═══════════════════════════════════════════════════════════════════════
   THE CARD'S ARRANGEMENT
   Measured at 1440x900. The spine is at 987, and the mark, the name, the
   promise and the button all land on it exactly. One thing did not: the
   eyebrow sat 148px clear of BOTH edges - dead centre. One centred item in
   a column that is otherwise set from a single edge is all it takes to make
   the whole block look arbitrary, because the eye reads it as a second,
   contradicting rule rather than as an exception.

   So it goes on the spine with everything else, and the hairline that used
   to flank it on both sides now runs from it to the far edge in one stroke.
   That gives the column the thing it was missing: a horizontal, pointing
   the way the language reads, dividing who this is from what it is. The
   variety now comes from size and space, which is where variety belongs.
   ═══════════════════════════════════════════════════════════════════════ */
.hero-title-course .course-kicker-pill {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.9em;
}
.hero-title-course .course-kicker-pill::before { display: none; }
.hero-title-course .course-kicker-pill::after {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  opacity: 0.3;
}

/* The mark's own bearing. Its box is flush at 987 like everything else, but
   the artwork inside carries 25 of 900 px of shadow margin on that side, so
   the letterforms were landing about 7px short of the line the words hold.
   Optical, not geometric - so it is corrected optically. */
.hero-logo img { margin-inline-start: -7px; }

/* ── Mobile: the sheet is a page, not a second card ──
   Full-bleed cream with 22px corners, arriving right under a narrower card
   of the same cream, read as two stacked cards - and the lower one ran off
   the bottom of the screen behind the system bar, which no card does. Square
   across, it is what it actually is: the top edge of the next page. */
@media (max-width: 760px) {
  .insights {
    border-radius: 0;
    box-shadow: 0 -14px 30px -14px rgba(10, 7, 5, 0.5);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   A NARROWER SHEET
   Tal: all that width is not required by anything in it, and the width is
   most of what still read as a certificate. It was 620px against a 681px
   block - an aspect of 1.10, which is to say square. A certificate is wide
   because it has a seal, a body and two signatures to place side by side;
   this has a mark and four stacked lines, and a column that wide makes them
   look stranded rather than set.

   480px. The promise takes four lines instead of three, which is a better
   rag anyway, and the aspect goes to 1.37 at 1440x800 and 1.59 at 1920x1080
   - a portrait card, which is what an invitation is.

   The cost is height, and height is what the fold spends. Measured at
   1280x720 the narrower card left 1px between itself and the sheet rising
   below it. So the three height-aware controls all tighten a step, and the
   mark takes one more step on windows under 760px tall, where it is the
   largest single thing in the block. Re-measured: 10px clear at 1280x720,
   20px at 1440x800, 92px at 1920x1080, and the button and its date stay on
   one row at every size - at 440px they stop doing that, which is what set
   the floor.
   ═══════════════════════════════════════════════════════════════════════ */
.hero-panel {
  width: min(480px, 100%);
  padding: clamp(26px, min(4.2vw, 4.0vh), 54px);
}
.hero-logo     { margin-bottom: min(clamp(20px, 2.6vw, 30px), 2.4vh); }
.hero-logo img { width: min(clamp(194px, 21.5vw, 296px), 26vh); }
@media (max-height: 760px) {
  .hero-logo img { width: min(clamp(180px, 21.5vw, 296px), 23vh); }
}

/* ── The consent line, two rows rather than three ──
   The text is not ours - it comes from the Ravpage embed - so the only lever
   is the width it gets, and Ravpage renders its whole form at a fixed 263px
   inside a 496px shell, leaving 230px unused. The row takes some of that
   back and centres itself on the form with a negative margin, since it is
   wider than the column it lives in. No font change: at 300px of text column
   it falls to two lines at the size it already was.

   The specificity dance is deliberate. Ravpage's stylesheet is cross-origin,
   injected after this one, and its rules carry !important, so an equal
   !important parses and does nothing; :not(#nope) buys an id's worth of
   weight without matching anything. */
.form-shell div.confirmation:not(#nope) {
  --cw: min(328px, calc(100vw - 108px));
  width: var(--cw) !important;
  grid-template-columns: 20px calc(var(--cw) - 28px) !important;
  margin-inline: calc((100% - var(--cw)) / 2) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   THE STORY, AND WHO TELLS IT
   The question the story actually turns on is now the heading, with what
   used to be the heading demoted to the eyebrow above it. A section titled
   "how I got here" announces a biography; one titled "why do I even want a
   relationship?" asks the reader the same thing it asks the writer, which is
   the only reason to read someone else's story on a sales page.
   ═══════════════════════════════════════════════════════════════════════ */

/* One line in the middle of it is a beat rather than a paragraph - two
   years, stated flat - so it is set as one. The aside stays out of the way
   on its own line, upright and quiet, because it is spoken to the reader
   rather than part of the account. */
.about-beat {
  font-family: var(--serif);
  font-size: clamp(21px, 2.2vw, 28px);
  font-style: italic;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ember);
  text-align: center;
  margin: clamp(22px, 2.8vw, 36px) 0;
}
.about-beat-aside {
  display: block;
  margin-top: 8px;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(13.5px, 1.1vw, 15px);
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  opacity: 0.85;
}

/* The story used to be two paragraphs and is now eight, and it was running
   the container's full 1200px - past a hundred characters to the line, where
   comfortable is sixty-five. The measure is capped and centred on the text
   only: the portrait above and the photograph below keep their width, since
   pictures do not have a reading measure and shrinking them was not asked
   for. */
.about-content .kicker,
.about-h,
.about-beat,
.about-body {
  max-width: 760px;
  margin-inline: auto;
}

/* ── Who teaches ──
   Paper and grain rather than the story's lighter sheet, so the two do not
   run together, and a plain list rather than a card: this is a credential,
   and a credential that arrives in a frame is asking to be believed instead
   of stating itself. Hairlines between the lines, nothing around them. */
.teacher {
  background-color: var(--paper);
  background-image: var(--paper-grain);
  background-size: var(--paper-grain-size);
  background-blend-mode: var(--paper-grain-blend);
  border-top: 1px solid var(--line);
}
.teacher-head { text-align: center; margin-bottom: clamp(16px, 2.2vw, 26px); }
/* The card was centred all along - what was not centred was the TEXT inside
   it. Measured at 1200 in the 702px box: the six lines carried 412, 574,
   497, 148, 457 and 680 pixels of ink, so on average 233px of every line was
   empty on the left, and a block whose mass sits that far right reads as
   pinned to the edge however centred its container is. At 520 the average
   white per line falls to 148 and the column reads centred, which is what
   Tal was asking for. Centring the text itself is not the answer: the
   bullets hang outside the text, so a centred line would float away from
   its own bullet. */
.teacher-card { max-width: 520px; margin-inline: auto; }
/* The lead is a whole sentence again, with the name inside it rather than
   standing over it, so it takes a sentence's size and a sentence's gap under
   it - not the display size the bare name needed to hold the block. Only the
   name is gold; the rest of the line is running text. */
.teacher-lead {
  font-family: var(--serif);
  font-size: clamp(19px, 1.95vw, 25px);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 clamp(14px, 1.8vw, 22px);
  text-align: center;
}
.teacher-lead strong { color: var(--ember); font-weight: 600; }
.teacher-list { list-style: none; margin: 0; padding: 0; }
.teacher-list li {
  font-size: clamp(16px, 1.45vw, 18.5px);
  line-height: 1.7;
  color: var(--ink-muted);
  padding: clamp(11px, 1.3vw, 15px) 0;
  border-top: 1px solid var(--line-soft);
}
.teacher-list li:first-child { border-top: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   THE CARD SCALES
   Tal: too small, and the text with it. Both true, and they were one fault:
   the card was a FIXED 480px, so on a 1920 screen it held 25% of the width
   and on a 2560 screen 19% - a small note pinned to a very large photograph
   - while every size inside it was pinned to px or vw independently, so the
   proportions drifted as the viewport changed.

   Now there is one number. --cw sets the card, everything inside is a share
   of it in cqw, and those shares are the ones measured off the card Tal
   approved: mark 57.35, title 19.06, promise 5.39, button 5.15, padding
   7.5. So it is the same card at every size - 1.43 aspect at 1920, 1.44 at
   1440 - just bigger where there is room.

   --cw takes the smaller of what the width allows and what the HEIGHT
   allows, because the card has to clear the sheet rising below it and
   height is what that spends. The height term is measured, not modelled:
   sweeping widths against the gap gave a clean line, 0.65px of gap per px
   of width, and 56.25svh - 5px is the fit. Measured after: 480 at 1280x720,
   480 at 1440x800, 501 at 1440x900, 603 at 1920x1080, 720 at 2560x1440,
   and the phone untouched at 100%.

   cqw is deliberately NOT used for the card's own padding - that is
   self-referential, since cqw resolves against the content box that the
   padding defines, and it drove the padding straight to its ceiling. The
   padding is a share of --cw instead.
   ═══════════════════════════════════════════════════════════════════════ */
.hero-panel {
  --cw: min(clamp(480px, 38vw, 720px), max(480px, calc(56.25svh - 5px)), 100%);
  container-type: inline-size;
  width: var(--cw);
  padding: calc(var(--cw) * 0.075);
}
.hero-logo     { margin-bottom: 5.29cqw; }
.hero-logo img { width: min(max(194px, 57.35cqw), 27vh); }
.hero-title-course { font-size: min(19.06cqw, 13vh); }
.hero-supporting   { font-size: clamp(17px, 5.39cqw, 30px); margin-top: 4.41cqw; }
.hero-actions      { margin-top: 5.74cqw; }
.hero .cta-jump { font-size: clamp(16px, 5.15cqw, 28px); padding: 4.17cqw 10.78cqw; }

/* Under 760px tall there is no room to trade: the card is already at its
   floor and the fold still wins. The mark gives the height back, since it is
   the tallest single thing in the block. */
@media (max-height: 760px) {
  .hero-logo img   { width: min(max(170px, 57.35cqw), 22vh); }
  .hero-logo       { margin-bottom: 4.2cqw; }
  .hero-supporting { margin-top: 3.4cqw; }
  .hero-actions    { margin-top: 4.4cqw; }
}

/* ── The two sections about him ──────────────────────────────────────── */

/* Both eyebrows gold. One was black and one gold, which reads as two
   different kinds of label rather than the same one used twice. */
.about-content .kicker { color: var(--ember); }

/* The running text was 300 on cream, which is where a light weight goes
   pale: there is not enough ink in the stroke to hold against a warm
   ground. 400, and a darker colour with it. */
.about-body,
.teacher-list li,
.about-beat-aside {
  font-weight: 400;
  color: #4A443D;
}

/* The aside was 15px and faded, which made it look like a footnote on a
   line that is not a footnote - it is the sentence spoken to the reader.
   Body size, same ink as the body, no opacity. */
.about-beat-aside {
  font-size: clamp(17px, 1.55vw, 20px);
  opacity: 1;
  margin-top: 10px;
}

/* Rules between the credentials, gone. They were dividing four lines that
   do not need dividing; the space alone does it. */
/* The list read airy twice over: 1.7 leading inside each entry, and 9-13px
   of padding on both sides of every one, so a wrapped credential had more
   space between its own two lines than a reader needs, and the entries sat
   further apart than they had to. 1.55 and 6-9px take 413px down to 374 on
   a phone and 321 on a desktop, and the entries still separate cleanly
   because the padding gap is still wider than the leading. */
.teacher-list li {
  border-top: 0;
  line-height: 1.55;
  padding: clamp(6px, 0.7vw, 9px) 0;
}
.teacher-sublist { margin-top: 0.25em; }

/* ═══════════════════════════════════════════════════════════════════════
   THE TAGLINE BREAKS ON ITS OWN JOINTS
   Measured, the automatic wrap was breaking three of its four lines inside
   a phrase - after "לבהירות", splitting it from "בדייטים"; after "שהן",
   splitting it from "מובילות אליה" - and leaving 40/40/37/13, so the
   sentence landed on a 13-character orphan instead of on its point.

   The sentence says where it wants to break: it has three commas and they
   mark its four beats. Those are the breaks now, with the first beat split
   at its own phrase boundary, so every line is a unit that can be read
   alone: 18/30/31/26/24. None of them is long enough to re-wrap, so the
   shape is identical on a phone and at 1920 - the tagline reads the same
   everywhere rather than rearranging itself per screen.

   And the leading tightens, because five deliberate lines are a block to be
   taken in at once, where four accidental ones were a paragraph.
   ═══════════════════════════════════════════════════════════════════════ */
.hero-supporting { line-height: 1.45; }
@media (max-height: 760px) {
  /* Five lines cost 1280x720 the clearance it did not have. The leading and
     the mark give it back; nothing else on that screen changes. */
  .hero-supporting { line-height: 1.35; }
  .hero-logo img   { width: min(max(170px, 57.35cqw), 21vh); }
}

/* ═══════════════════════════════════════════════════════════════════════
   THE PHONE STOPS PRETENDING TO BE THE DESKTOP
   The photograph was behind the card on every screen, and on a phone the
   card runs 88% of the width - so the picture was paying for itself in
   bytes and in contrast and showing a 23px frame for it. Tal's read: it
   looks strange to have the image there when it is hidden.

   So below 700px it is not behind the card, it is under it. The hero becomes
   an ordinary block - the content on the page's own paper with the page's
   own margins - and the photograph follows as a full-bleed band. Nothing is
   layered over anything, which is why the card also loses its sheet: a paper
   card on a paper page is only a shadow, and the shadow was the only part
   of it doing any work once the photograph moved.

   Three things come free. The type grows, because --cw is now the full
   column rather than the column minus the card's padding - the mark goes
   194 to 197, the name 55 to 65. The picture brightens, because its scrim
   existed to hold dark type over it and no type sits on it now. And the fold
   gets a better signal than any cue: 245px of photograph above it, with the
   sheet below still rising over its bottom edge.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 699px) {
  .hero {
    display: block;
    min-height: 0;
    isolation: auto;
    padding: clamp(26px, 4.5vh, 54px) 0 0;
  }
  .hero-grid  { padding-inline: 6vw; }
  .hero-panel {
    width: 100%;
    padding: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
  }
  .hero .cover {
    position: static;
    inset: auto;
    width: 100%;
    /* The band takes the PICTURE's proportion, not a slice of the viewport.
       The photograph is a composite with a seam down its middle, so any crop
       moves that seam off-centre and it reads as a mistake - which is exactly
       what it looked like. At 2000/1582 the whole image fits, the seam lands
       on the centre line, and cover and contain become the same thing, so
       nothing is cropped and nothing is letterboxed. 390x308 on a phone. */
    aspect-ratio: 2000 / 1582;
    height: auto;
    margin: clamp(24px, 4vh, 44px) 0 0;
  }
  .hero .cover-frame { height: 100%; }
  .hero .cover-frame::before {
    background: linear-gradient(180deg,
      rgba(16, 12, 9, 0.30) 0%,
      rgba(16, 12, 9, 0.10) 40%,
      rgba(16, 12, 9, 0.14) 62%,
      rgba(16, 12, 9, 0.42) 100%);
  }
  .hero .cover-frame::after { box-shadow: inset 0 0 90px 10px rgba(16, 12, 9, 0.28); }
}

/* ═══════════════════════════════════════════════════════════════════════
   THE PHONE, CENTRED
   Two faults, both from the card's removal.

   The block hugged the right because the spine had nothing left to be a
   spine OF. Set from a card's padding edge it is an arrangement; set from
   the screen's margin with no card around it, it is just text pushed to one
   side - and the mark made it worse, sitting 197px wide in a 343px column
   with 146px of nothing beside it. Measured, the mark also ended 16px from
   the edge where the words ended at 23: that is the -7px optical nudge,
   which was correct against a card's padding and wrong against a screen.
   So the phone is centred. The spine stays where it belongs, on the desktop,
   where there is a card for it to run down.

   And the picture was cropped to 100% - its right edge - which is the
   framing the desktop layer wanted when the card sat over it. As a band it
   needs its own: 88%, which puts the joined hands in the frame. 50% lands on
   the seam in the photograph's own composition and 72% still catches it.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 699px) {
  .hero-panel,
  .hero-panel > *,
  .hero-supporting { text-align: center; }
  .hero-logo     { text-align: center; }
  .hero-logo img { margin-inline: auto; }
  .hero-title-course { align-items: center; }
  .hero-title-course .course-kicker-pill { width: auto; justify-content: center; }
  .hero-title-course .course-kicker-pill::before {
    display: block;
    position: static;
    inset: auto;
    width: 1.6em;
    height: 1px;
    background: currentColor;
    opacity: 0.34;
  }
  .hero-title-course .course-kicker-pill::after {
    flex: 0 0 auto;
    width: 1.6em;
    opacity: 0.34;
  }
  .hero-supporting { margin-inline: auto; }
  .hero-actions    { justify-content: center; }
  /* With the band matching the image, the crop that 88% was choosing between
     no longer exists - the whole frame is shown. */
  .hero .cover-frame .cover-bg { background-position: 50% 50%; }

  /* And the sheet must stop riding over it. The peek was designed against a
     full-bleed hero photograph, where taking 54px off the bottom cost
     nothing - the picture ran past the fold anyway. Against a band sized to
     the whole image it costs the image: measured, 308px of band with 254
     visible, and the 54 it swallowed contained the frame's bottom line. So
     the top line showed and the bottom did not, which is exactly what it
     looked like.

     No overlap on the phone. The sheet's edge and its shadow now land on the
     photograph's own bottom edge, which is a cleaner join than a crop, and
     the fold signal here is the band itself - 245px of it above the line. */
  .insights { margin-top: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   THE COLUMN
   Tal's design, and it solves the thing three earlier attempts did not. The
   card read as a certificate because it was a SHEET - a rectangle floating
   with air on all four sides, which is what a certificate is. Making it
   narrower deepened that, an ornament beside it did nothing, and a line
   crossing its edge only argued with it.

   A column that runs the full height of the photograph is not a sheet at
   all. It has no top edge and no bottom edge; the picture survives as two
   vertical strips beside it, 462 and 477px at 1440. Nothing floats, so
   nothing can look like a document.

   The content centres, as it does on the phone - a spine needs an edge to
   run down, and a column standing in the middle of a picture is symmetrical
   by nature. Which also means the two arrangements are now one, and the
   -7px optical nudge goes with the spine: at the size the mark draws, its
   own ink is 1.4px off centre, which is not worth a rule.
   ═══════════════════════════════════════════════════════════════════════ */

/* Centred everywhere. */
.hero-panel,
.hero-panel > *,
.hero-supporting { text-align: center; }
.hero-logo     { text-align: center; }
.hero-logo img { margin-inline: auto; }
.hero-title-course { align-items: center; }
.hero-title-course .course-kicker-pill { width: auto; justify-content: center; }
.hero-title-course .course-kicker-pill::before,
.hero-title-course .course-kicker-pill::after {
  display: block;
  position: static;
  inset: auto;
  flex: 0 0 auto;
  width: 1.6em;
  height: 1px;
  background: currentColor;
  opacity: 0.34;
}
.hero-supporting { margin-inline: auto; }
.hero-actions    { justify-content: center; }

/* The column itself, on anything with room for the strips beside it. */
@media (min-width: 700px) {
  .hero       { padding-block: 0; }
  .hero-grid  { height: 100%; align-items: stretch; }
  .hero-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 0;
    /* One soft fall-off on every side rather than a drop shadow: a drop
       shadow implies a sheet lying on something, and this is not lying on
       anything - it is cut through the picture. */
    box-shadow: 0 0 70px -10px rgba(10, 7, 5, 0.55);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   BIGGER IN THE COLUMN, AND THE PICTURE COMES UP TO MEET THE BUTTON
   Measured first: the tagline's widest line ran 281px inside a 426px
   column, so a third of the width was going spare. But the button's bottom
   already sat 3px UNDER the sheet peeking at the foot of the hero - the
   column is full height, so centring its content in the full height centres
   it behind that sheet. Room had to be made before any could be spent.

   Bottom padding of --peek plus the difference the flex packing adds does
   that: content lands 28px clear at the top and 28px clear at the bottom,
   balanced, and what that frees goes into the type - about 8%, which puts
   the widest tagline line at 303 of 426 and still leaves a third of the
   column as margin.

   On the phone the picture now rises to the MIDDLE of the button, Tal's
   idea: measured, its top lands within 1px of the button's centre line, so
   the button straddles the join with the paper above it and the photograph
   below. Its shadow deepens to carry that - a button sitting across two
   grounds has to look like it is on top of both.
   ═══════════════════════════════════════════════════════════════════════ */
.hero-logo     { margin-bottom: 5.7cqw; }
.hero-logo img { width: min(max(194px, 62cqw), 31vh); }
.hero-title-course { font-size: min(20.6cqw, 13vh); }
.hero-supporting   { font-size: clamp(17px, 5.82cqw, 32px); margin-top: 4.76cqw; }
.hero-actions      { margin-top: 6.2cqw; }
/* Scoped to the hero. These are container-query lengths, sized against
   .hero-panel, which is the page's only query container - and an unscoped
   .cta-jump also catches the button at the foot of the page, which sits
   outside it. With no container to resolve against, cqw falls back to the
   VIEWPORT: 11.6cqw became 167px of side padding at 1440 instead of 49, and
   that button had quietly grown to 462x181. */
.hero .cta-jump { font-size: clamp(16px, 5.56cqw, 30px); padding: 4.5cqw 11.6cqw; }

@media (min-width: 700px) {
  /* The 56px is calibrated, not guessed: flex packing counts the children's
     margins where a bounding box does not, so --peek alone left the block
     sitting 67 above and 11 below. This lands it 28/28. */
  .hero-panel { padding-block: 0 calc(var(--peek) + 48px); }
}

@media (max-width: 699px) {
  /* -8.2vw, not the -0.8 the first calibration produced: that was measured
     before the type grew, and growing the button moved its centre 29px up.
     It scales because everything on the phone is driven by the column, which
     is the full width - measured off by 0 at 320, 0 at 390 and 4 at 699. */
  .hero .cover { margin-top: -8.2vw; }
  .cta-jump {
    position: relative;
    z-index: 3;
    box-shadow: 0 14px 34px rgba(10, 7, 5, 0.34), 0 4px 10px rgba(10, 7, 5, 0.18);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   AIR AT THE TOP, AND THE BUTTON AS A NOTCH
   The mark sat 28px off the top of the screen, which is cramped for a column
   that runs the full height. But the block was already balanced 28/28, so
   there was nothing to move it into - in a full-height column every pixel
   given to the top is taken from the bottom, where the sheet is waiting.
   The only way to have more of both is a shorter block.

   So it is paid for rather than wished for. The tagline goes UP, to 6.2cqw -
   26.4px against an 88px display, which is 30% of it, and a supporting line
   much past a third starts competing with the thing it supports. Its leading
   comes in to 1.38, which five stated lines want anyway, and the mark gives
   back 17px. Net: the block loses 21px and the air goes 28 to 39 at both
   ends. The widest tagline line is 323 of 426, so a quarter of the column is
   still margin.

   On the phone the button becomes a notch cut into the photograph's edge:
   the picture rises to its centre line and a paper ring holds the picture
   off it. The ring is 8vw because the photograph's own cream border is 8.2%
   of its width - measured off the file, not chosen - so the gap around the
   button and the margin around the frame inside the picture are the same
   width. That is the rhyme that makes it look intended.
   ═══════════════════════════════════════════════════════════════════════ */
.hero-logo     { margin-bottom: 4.4cqw; }
.hero-logo img { width: min(max(194px, 58cqw), 31vh); }
.hero-supporting {
  font-size: clamp(17px, 6.2cqw, 34px);
  margin-top: 4.4cqw;
  line-height: 1.38;
}
.hero-actions { margin-top: 5.6cqw; }
@media (max-height: 760px) { .hero-supporting { line-height: 1.3; } }

@media (max-width: 699px) {
  /* Recalibrated after the type change, not alongside it - growing the
     button moves the centre line this is measured against. Off by 0. */
  .hero .cover { margin-top: -8vw; }
  .cta-jump {
    box-shadow: 0 16px 34px rgba(10, 7, 5, 0.28);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   THE PHONE ANSWERS TO ITS HEIGHT
   Tal saw less of the photograph on his phone than in the tests, and the
   reason was that nothing in the mobile hero responded to height at all -
   the column was the full width whatever the viewport, so a browser with a
   URL bar and a nav bar got the same block in less room. Measured at 390x700
   against 390x844: 146px of picture above the fold instead of 275.

   --cw takes a height term on the phone too, so the whole block scales down
   where there is less room: 223px of picture at 700 instead of 146. The
   mark's px floor comes down with it - at 194 it stopped scaling while
   everything around it shrank, which both broke the proportion and pushed
   the button down.

   The band's offset is -0.092 of the column, measured, not derived. It holds
   at 640, 700, 740 and 844 because everything on the phone is driven by the
   column. Two earlier attempts at this number were wrong because each was
   measured against a different version of the CSS - the fix is to read the
   distance the offset has to close, panel bottom to button centre, rather
   than to infer it from how wrong the last guess looked.

   The ring is a spread shadow, not a pseudo-element. The pseudo-element
   version drew the paper OVER the button and hid the gold completely: the
   button carries z-index:3 to sit above the cover, which makes it a
   stacking context, and inside one a z-index:-1 child paints above the
   element's own background rather than behind it. Moving the ring out to
   a shadow puts it outside the border box, where it cannot cover
   anything. It loses the grain, which at 0.55vw - about two pixels - is
   not a difference the eye can find.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 699px) {
  .hero-panel {
    --cw: min(88vw, 37svh);
    width: var(--cw);
  }
  .hero-logo img { width: min(max(150px, 58cqw), 31vh); }
  .hero .cover  { margin-top: calc(min(88vw, 37svh) * -0.092); }
  .cta-jump {
    /* The ring is exactly the paper's colour, and it still read as a white
       line, because the drop shadow underneath it was 34px of blur with no
       offset to speak of: it darkened the paper all the way around the
       button, and the ring - sitting on top of that darkened halo at the
       paper's true value - became the brightest thing in the area. The fix
       is the shadow, not the ring. A -12px spread pulls it back inside the
       button's own footprint so it only shows below, where the button
       crosses onto the photograph and a shadow is what you want. */
    box-shadow: 0 0 0 0.55vw var(--paper),
                0 14px 20px -12px rgba(10, 7, 5, 0.5);
  }
  /* Tal read this button as transparent three times running. It never was:
     forced to #FF0000 it renders pure red with no photograph through it, at
     opacity 1, with no blend mode anywhere up the tree. The transparency is
     in the COLOUR. #B2896A is a soft mid-tone, and on the phone the button
     straddles the join - paper above, a bright photograph below - so a
     low-contrast flat fill has nothing to hold its edge against and reads
     as a wash laid over both. A flat fill is also the one thing on this
     page that is flat; the lockup above it is modelled gold.

     So: a gradient with a light top and a deep foot, a highlight along the
     top edge and a darker rim, which is what makes a surface look like an
     object rather than a tint. Phone only - on the desktop the button sits
     entirely on paper, where the flat gold is right and Tal is happy with
     it. */
  /* The button is inside .hero-actions, which is a .reveal - and a .reveal
     IS an opacity animation: 0 to 1 over 0.9s after a 0.36s delay. It is the
     only element on the page whose entire content is this button, so if that
     transition is ever left part-way - the observer firing as the URL bar
     collapses and svh relayouts, a backgrounded tab, a slow first paint -
     the button renders at a fraction of full opacity and nothing else moves
     with it. That is exactly the half-transparent button Tal keeps seeing,
     and nothing measured in a settled desktop emulation would ever show it.
     On the phone the hero CTA does not fade at all now: it is above the fold
     on load, so there was never anything to reveal. */
  .hero-actions.reveal,
  .hero-actions.reveal.in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .cta-jump {
    /* A flat colour under the gradient, so a device that fails to paint the
       gradient still gets an opaque button rather than a translucent one,
       and isolation so nothing above can blend into it. */
    /* Proved opaque, not argued: with pure red behind one half of the button
       and pure black behind the other, the gold renders identically across
       both. Tal's own test, and it settles the mechanism.

       What he was seeing is chroma, not alpha. Every gold this button has
       worn - B8975A, A98A4A, 7E6228 - is low-saturation and warm, which is
       precisely the colour gold takes on when it is seen THROUGH something.
       Put that on warm cream paper and the eye reads a veil, however opaque
       the pixels are. The fix is saturation: a gold with enough chroma to
       read as pigment rather than as a tint of the page behind it. */
    /* Back to the brand's own gold, flat. D4AC3B came out yellow rather than
       gold and Tal liked it less, which is fair - it was picked off the
       light end of a gradient, not off the palette.

       What survives from all of that is the one thing he was right about
       from the start: no gradient. A fill lighter at one end than the other
       is what a translucent object looks like, and every version I shipped
       with one kept the thing he kept pointing at. One colour, edge to
       edge, and it is the page's own ember. */
    background-color: var(--ember);
    background-image: none;
    color: var(--ink);
    opacity: 1;
    mix-blend-mode: normal;
    isolation: isolate;
    /* The insets went with the gradient: a highlight along the top edge and
       a darker inner rim are more colours inside the button, which is the
       whole complaint. What is left is the paper ring outside it and the
       shadow under it - neither touches the fill. */
    box-shadow: 0 0 0 0.55vw var(--paper),
                0 14px 20px -12px rgba(10, 7, 5, 0.55);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   THE LOGO CENTRES ITSELF ABOVE קורס
   This was a tuned number - margin-bottom in cqw, measured at three window
   sizes and interpolated. That approach cannot hold. The space ABOVE the
   logo is not a margin at all: the panel centres its content, so that gap
   is half of whatever is left over after the type, and it moves with the
   viewport height, with the column width, and with every branch of every
   clamp in the block. A single number can only be right at the sizes it
   was measured at.

   Auto margins make it true everywhere instead. In a column flex container
   auto margins eat the free space before justify-content sees it, so
   margin-block:auto on the logo splits ALL of it evenly above and below the
   logo - which is the definition of centred between the top of the panel
   and the thing underneath. No measuring, no interpolation, correct at
   every height by construction.

   The correction on the image is the other half of the job. The gaps that
   have to match are the ones the eye sees, between the page edge and the
   INK, and the asset is not centred in its own frame: 11px of margin above
   the letters and 85px below them at 896px tall, because the drop shadow
   is baked in. Centring the box therefore sits the ink 74/896 of its own
   height too low. The negative bottom margin is exactly that much, so the
   box is offset by the same amount the artwork is, and the ink lands level.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 700px) {
  .hero-logo {
    --logo-w: min(max(194px, 58cqw), 31vh);
    margin-top: auto;
    margin-bottom: auto;
  }
  .hero-logo img {
    width: var(--logo-w);
    /* Two corrections in one number, both measured off the live page.
       0.082 is the asset's own lopsidedness: 11px of margin above the
       letters and 85px below at 896px tall, so centring the box drops the
       ink 74/896 of its height too low. The other 0.083 is the gap between
       קורס's line box and the top of the letters themselves - Hebrew has no
       ascenders, so the font reserves room above every line that no glyph
       ever uses, and measuring to the box makes the lower gap look 20-24px
       smaller than it is. Held within 0.077-0.090 of the logo's width at
       1280, 1440, 1600 and 1920. */
    margin-bottom: calc(var(--logo-w) * -0.165);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   THE STORY, SET AS A MAGAZINE PROFILE
   Everything here is typography, measure and pace. No cards, no frames, no
   tinted grounds, no rules through the prose, and nothing set in bold
   inside it - the only marks are the ones the writing itself asks for.
   ═══════════════════════════════════════════════════════════════════════ */

/* The reading column. 640px at 19px lands on about 62 characters a line,
   which is the measure a long first-person piece wants; at 760 it was
   running past 75. Frank Ruhl Libre for the body - the page already loads
   its 400 - because a serif is what makes a block of Hebrew read as an
   article rather than as web copy. It is scoped to the story alone. */
.about-content .about-body {
  max-width: 700px;
  margin-inline: auto;
  margin-bottom: 0.95em;
  /* The face went through Frank Ruhl at 400 (too fine to read), Frank Ruhl
     at 500 (heavy), and Bellefair, before Tal picked Noto Serif out of the
     audition. Frank Ruhl keeps the headings, the drop cap and the pull
     quote, where a display serif belongs. */
  font-family: var(--story-face);
  font-size: 21px;
  font-weight: var(--story-weight);
  line-height: 1.7;
  color: #36312A;
  text-align: right;
}

/* The lede. Centred and narrower than the column it introduces, so the
   piece opens on a held breath rather than at full speed, and a long
   space under it before the prose starts.

   Direct children only. #storyTail wraps everything below the fold, which
   opened a SECOND :first-of-type scope, and the first paragraph inside it
   ("באחד הקשרים...") was being set as a second lede - 26px and centred in
   the middle of the prose. The same applies to the phone rule below. */
.about-content > .about-body:first-of-type {
  max-width: 560px;
  font-size: 26px;
  line-height: 1.62;
  color: #332F2A;
  text-align: center;
  margin-bottom: 1.5em;
}

/* The two-year line, as a pull quote: no quotation marks and no rules,
   because the sentence is already doing that work. The aside under it is
   the writer speaking to the reader, so it stays at reading size in
   reading ink - a footnote-sized grey would turn it into an apology. */
.about-content .about-beat {
  max-width: 700px;
  margin: 0.9em auto 0.7em;
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.4;
}
.about-content .about-beat-aside {
  margin-top: 0.3em;
  font-family: var(--story-face);
  font-style: normal;
  font-weight: var(--story-weight);
  font-size: 21px;
  letter-spacing: 0;
  /* The gold of the line above it. This went back to reading ink once,
     because a later brief specified body colour and I followed it without
     noticing it contradicted an explicit earlier request. The aside belongs
     to the two-year line, not to the prose around it. */
  color: var(--ember);
}

/* The photograph, moved up to the paragraph it belongs to - the marriage
   is described and then shown, rather than shown eight paragraphs later
   as a sign-off. A little wider than the measure so it reads as a plate
   in the article. The offset hairline frame that every other picture on
   the page carries is dropped here: it is a decorative device, and this
   section is not decorated. */
.about-content .about-photo {
  /* Two thirds of the 720px it ran at: at full width it filled the frame and
     read as a plate the piece had stopped for, rather than a picture inside
     it. Below about 500px of column the picture is already narrower than this
     and nothing changes, so this is a desktop and tablet correction. */
  max-width: 480px;
  margin: 1.8em auto 2em;
}
.about-content .about-photo img {
  display: block;
  width: 100%;
  /* The img carries height="872" as an attribute, which lands as a
     presentational height and beats the 4/3 aspect-ratio - it used to be
     neutralised by .photo-card's height:auto, and that class is gone from
     this figure now. Without this the plate rendered 720x872. */
  height: auto;
  border-radius: 6px;
  box-shadow: 0 20px 46px rgba(31, 27, 22, 0.18);
  filter: none;
  transition: none;
}
.about-content .about-photo:hover img { transform: none; }
/* "קרא עוד..." — deliberately the browser's own link blue and not --ember.
   Every other gold thing on this page is decoration; this one is the only
   inline control in the story, and it has to read as clickable at a glance
   to a reader who is skimming. Gold would have been prettier and would have
   disappeared into the run of text. Inline, so it sits inside the sentence
   and the tail reflows into the same paragraph when it opens. */
/* Was an inline "קרא עוד..." link at the end of the sentence, and Tal found
   it barely read as clickable. Now the fold says it twice: the sentence runs
   on into its tail and fades out mid-line, so the eye sees that the text
   continues, and the control sits on a seam right under the fade.

   A seam, not a free-standing label: a centred navy "המשך לקרוא" with an
   arrow under it read to Tal as a link to another page, and he would not
   press it. Hairlines either side make it the fold line of this page, the
   chevron sits beside the words as on anything that opens in place, and
   "המשך הסיפור" names what opens rather than saying "go on". */
.story-more {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 540px;
  margin: -0.6em auto 0;
  padding: 6px 0;
  position: relative;
  background: none;
  border: 0;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  color: var(--ember-deep);
  cursor: pointer;
}
.story-more::before,
.story-more::after {
  content: "";
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--ember) 55%, transparent);
}
.story-more::before { margin-inline-end: 14px; }
.story-more svg { margin-inline-end: 14px; margin-top: 2px; transition: transform .25s ease; }
.story-more:hover svg,
.story-more:focus-visible svg { transform: translateY(3px); }
.story-more:hover,
.story-more:focus-visible { color: #6E4F35; }
.story-more:focus-visible { outline: 2px solid var(--ember); outline-offset: 4px; }
@media (max-width: 699px) {
  /* The prose has 22px of side padding on phones; the seam keeps to it. */
  .story-more { padding-inline: 22px; }
}
.story-more[hidden] { display: none; }
@property --tease { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
.story-tease {
  --tease: 30%;
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--tease), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 var(--tease), transparent 100%);
  transition: --tease 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.story-tease.story-tease-open { --tease: 100%; }
/* [hidden] alone loses to .about-body's own display in some engines once
   the element is a span inside a styled paragraph; this makes it explicit. */
.story-rest[hidden] { display: none !important; }

/* Opening the fold.
   NOT a height transition. #storyTail is about 10,000px tall, so animating
   0 -> full fills the one viewport the reader can actually see inside the
   first few percent of the run: at any duration short enough not to feel
   broken, the visible part is finished before the eye catches it. What reads
   as "expanding" is the content arriving, so that is what is animated - the
   block lifts and fades as a whole, and its paragraphs then stagger in on
   their own .reveal as they always do. */
.story-opening {
  animation: storyOpen 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes storyOpen {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
/* The sentence's tail fades on exactly the same clock as the block below it.
   It used to run shorter (0.35s against 0.55s) on the idea that the line the
   reader is mid-way through should finish first. In practice two lengths read
   as two arrivals - text appearing, and then more text appearing - which is
   the double jump. One fade, one length, one arrival. */
.story-rest-in { animation: storyFade 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes storyFade { from { opacity: 0; } to { opacity: 1; } }
/* Paragraphs that are already on screen when the fold opens are part of the
   same arrival, so they must not also run their own .reveal transition on
   top of it. They are marked .in while this class suppresses the transition,
   then it is removed on the next frame. */
.story-no-anim, .story-no-anim * { transition: none !important; }
/* Reduced motion drops the travel, NOT the fade. Tal's machine reports
   reduce (so does every machine this has been checked on), and an
   `animation: none` here means the one person who asked for this animation
   is the one person who never sees it - the same trap the insight-rule note
   above records. A cross-fade carries no motion to be bothered by, so what
   the setting actually asks for is the 10px lift, and that is what goes. */
@media (prefers-reduced-motion: reduce) {
  .story-opening { animation-name: storyFade; }
}

/* A quiet close, so the piece ends rather than stops. A 40px gold rule now,
   rather than three dots - the dots read as an ellipsis, as though the story
   trailed off, and this one arrives at something. */
.about-end {
  width: 40px;
  height: 1px;
  background: var(--ember);
  margin: 2.4em auto 0;
  opacity: 0.75;
}

/* The reading column. At 700px its right edge stood well outside the
   centred heading above it, so the story looked half centred and half
   pushed right. At 540px it sits on the heading's edge and the whole
   section reads on one axis. The lede keeps its own 560. */
.about-content > p:not(:first-of-type),
#storyTail > p { max-width: 540px; }
/* The bold-italic lines are larger type, and at 540 "להאמין מחדש..." broke
   with one word alone on its second line. They keep the column's right
   edge and are allowed to run further left instead. */
#storyTail > .about-claim,
#storyTail > .about-turn,
#storyTail > .about-ready {
  max-width: 660px;
  margin-right: max(0px, calc(50% - 270px));
  margin-left: auto;
}

/* Fade only. The page's reveal also lifts its elements 28px; through a
   long read that is motion for its own sake, so the story keeps the
   opacity and drops the travel. */
.about-content.reveal,
.about-content .reveal {
  transform: none !important;
}

@media (max-width: 699px) {
  .about-content .about-body { font-size: 20.5px; }
  /* The lede holds Tal's break on the phone too, which means both of its
     sentences have to fit their own line unbroken. Measured in the page's
     own face at 500: the first runs 17.3px of width per px of type size, so
     it needs 294px at 17px - the entire inner width at 375, which wraps.

     Two changes buy the room. The side padding drops to 12px here only, and
     the size is tied to the viewport rather than fixed, so it fits at every
     phone width instead of at the one I happened to test: 17.3px at 375,
     14.2px at 320, and capped at the body's size so the lede never comes
     out larger than the prose it introduces. */
  .about-content > .about-body:first-of-type {
    font-size: min(20.5px, calc((100vw - 64px) / 17));
    padding-inline: 12px;
  }
  .about-content .about-beat-aside { font-size: 20.5px; }
  .about-content .kicker,
  .about-content .about-h,
  .about-content .about-body,
  .about-content .about-beat,
  .about-content .about-photo,
  .about-end { padding-inline: 22px; }
  .about-content .about-photo img { border-radius: 5px; }
}

/* ── The three Februaries ──
   Undecorated on purpose. It first had the gold rule and the indent the
   brief asked for, and Tal was right to pull them: three dates a year apart
   are already the whole argument, and framing them turned the moment he met
   his wife into a marketing device. The only thing this block does now is
   keep its three lines on their own leading, with a hard break each, so
   they read as a list of dates rather than as a paragraph.

   The size is still tied to the viewport on phones - the longest of the
   three has to stay on one line at any width, and a fixed value is only
   ever right at the width it was tested at. */
.about-content {
  /* One pair of variables for the story's face, so a change is one edit and
     not four - the body, the pull quote's aside and the Februaries all read
     from them.

     300 was right in shape and read grey; 360 closed most of that and Tal
     wanted the rest, so 400. I had expected 400 to tip into semibold at
     this size and it does not: Noto Serif is drawn for body copy, and its
     400 is a text weight rather than the display 400 that made Frank Ruhl
     look heavy. Loaded as a variable range, so the weight is real rather
     than synthesised. */
  --story-face: 'Noto Serif Hebrew', var(--serif);
  --story-weight: 400;
}
.about-content .about-timeline {
  max-width: 700px;
  margin: 1.5em auto;
  font-family: var(--story-face);
  font-size: 21px;
  font-weight: var(--story-weight);
  line-height: 1.8;
  color: #36312A;
  text-align: right;
}
/* This one sits closer to the dates it follows from, with more air after. */
.about-content .about-turn { margin: 0.9em auto 2.1em; }
@media (max-width: 699px) {
  .about-content .about-timeline {
    /* Re-measured. 12.1 was Bellefair's ratio; Noto Serif is wider, and the
       rule and indent came back, so the longest line now runs 15.45px of
       width per px of type against an inner width of 100vw - 84. At 375 the
       old formula left it at 20.5px needing 317px in 291 - it wrapped. */
    font-size: min(20.5px, calc((100vw - 84px) / 16));
    padding-inline: 22px;
  }
  .about-content .about-turn { font-size: 20px; padding-inline: 22px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   THE FOOT OF THE PAGE, RESEQUENCED
   מה תקבל → חמשת המודולים → הפורמט של המחזור הראשון → המחיר → CTA →
   הצטרפות. The three new lines below all belong to that move.
   ═══════════════════════════════════════════════════════════════════════ */

/* The cadence line, lifted out of the modules list and set under the format
   box where the dates it refers to actually are. It keeps the .syllabus-note
   treatment it had - same face, size, colour and centring - because nothing
   about it changed except which section it lives in. */
.cycle-cadence {
  font-family: var(--sans);
  font-size: clamp(15.5px, 1.4vw, 17.5px);
  line-height: 1.7;
  font-weight: 400;
  color: var(--ink-muted);
  text-align: center;
  max-width: 760px;
  margin: 22px auto 0;
}

/* The line that puts the price in proportion. A step above body size, since
   it has to be read rather than scanned past, but well under the price it
   answers to. */
.pricing-value {
  font-family: var(--sans);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.6;
  font-weight: 400;
  color: var(--ink-soft);
  text-align: center;
  max-width: 620px;
  margin: 18px auto 0;
}

/* Under the form's submit. Small and secondary on purpose: it is a
   reassurance, and a reassurance that shouts reads as a worry. */
.final-refund {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 400;
  color: rgba(242, 235, 219, 0.62);
  text-align: center;
  margin: 18px auto 0;
}

/* The clarity line is the section's heading now, in the type the sentence
   above it used to carry. It became an h2, so the browser's own heading
   margins have to be cleared - .cta-mid-intro set them for a <p>. */
h2.cta-mid-intro { margin: 0 auto 24px; }

/* ── Why the story shimmered ──
   It was never the face. The body carries -webkit-font-smoothing:
   antialiased, which on a Mac turns OFF subpixel rendering and renders every
   stem from the glyph outline alone. Display type at 40px does not care.
   Body type does: the stems come out thinner and softer than the font was
   drawn to be, and at reading size a serif's fine strokes start to vibrate
   against the page - which is exactly the flicker Tal kept seeing.

   It also explains the whole hunt for a weight. Frank Ruhl at 400 read too
   fine, 500 read heavy, Noto at 360 read grey and at 400 still shimmered:
   every one of those judgements was made on text that was being rendered
   lighter than its own drawing. So the story asks for the platform's normal
   rendering back. Nothing else on the page changes - the rest of it was
   designed against antialiased and looks right that way. */
.about-content .about-body,
.about-content .about-beat,
.about-content .about-beat-aside,
.about-content .about-timeline,
.about-content .about-turn {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

/* ── "אז מה כן?" ──
   The big three-line statement that used to stand between the box and this
   line is gone, and the hairline that separated them went with it - it was
   dividing the statement from the list, and with the statement removed it
   was ruling off nothing. This line now carries the turn on its own, so it
   steps up from the label it used to be: reading size at 22px, the page's
   full ink rather than the muted grey, and centred under the box with room
   to breathe after it. */
.what-get-anchor {
  border-top: none;
  padding-top: 0;
  margin-top: clamp(26px, 3.4vw, 44px);
}
.what-get-anchor-lead {
  font-size: clamp(19px, 1.9vw, 22px);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink);
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: clamp(20px, 2.4vw, 30px);
}

/* The sentence that introduces "התאמה." - reading size and on the reading
   line like the prose around it, and bold, because it is the sentence the
   whole story turns on. It is not a second lede and must not be set as one. */
.about-content .about-anchor-lead {
  font-weight: 700;
}

/* ── The three single lines the story now turns on ──
   Each is a beat rather than a paragraph, so each is set apart by space and
   by face rather than by any rule, box or mark - the section has none of
   those and should not grow one for these.

   "התאמה." is the quietest of the three on purpose: it is the same gold and
   the same italic as the two-year line above it, but smaller, because a
   single word set at the pull quote's size would compete with it and the
   story has already had its loudest moment. */
.about-content .about-word {
  max-width: 700px;
  margin: 1.5em auto;
  font-family: var(--serif);
  font-size: clamp(22px, 2.3vw, 26px);
  font-style: italic;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ember);
  text-align: center;
}
/* The five statements the story turns on. They stay on the reading line
   rather than centring - each is the narrator drawing a conclusion, not a
   caption - and they stay dark rather than gold, which Tal was right about:
   the gold belongs to התאמה and to the two-year line, which are the
   dramatic beats. These are the ones a skimmer should be able to read on
   their own and still get the argument, so they carry weight instead of
   colour: 700, which Frank Ruhl actually ships, rather than a 600 the
   browser would have to synthesise. */
.about-content .about-ready,
.about-content .about-turn,
.about-content .about-claim {
  max-width: 700px;
  margin: 1.6em auto;
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 22px);
  font-weight: 700;
  /* Weight alone was not stopping a skimmer - bold Hebrew at reading size
     reads as emphasis inside a paragraph rather than as a line standing
     apart. The slant is a second signal on a different axis, and it is the
     one the page already uses to mark a line as spoken rather than told:
     the two-year line and התאמה both carry it. */
  font-style: italic;
  line-height: 1.5;
  color: #2A261F;
  text-align: right;
}
/* The closing paragraph, a step up from the body so the piece lands rather
   than stops, with the wish itself in gold. */
.about-content .about-wish {
  max-width: 700px;
  margin: 2em auto 0;
  font-family: var(--story-face);
  font-size: clamp(19px, 1.95vw, 21px);
  font-weight: var(--story-weight);
  line-height: 1.8;
  color: #36312A;
  text-align: right;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}
.about-wish-gold { color: var(--ember); }
/* On the focus page the story goes on past the wish, to the focus
   session, and the wish has no bottom margin of its own. On the course
   page the wish ends the story, so this never matches there. */
.about-content .about-wish + .about-body { margin-top: 1.6em; }

/* The Februaries get their rule back. Tal took it off when the block sat in
   a section that was trying too hard; with the story rebuilt around it, the
   line reads as a quiet margin mark rather than as packaging. */
.about-content .about-timeline {
  padding-inline-start: 1.5em;
  border-inline-start: 2px solid var(--ember);
}

@media (max-width: 699px) {
  .about-content .about-word,
  .about-content .about-ready,
  .about-content .about-turn,
  .about-content .about-claim,
  .about-content .about-wish { padding-inline: 22px; }
  .about-content .about-ready,
  .about-content .about-turn,
  .about-content .about-claim { font-size: 20px; }
  .about-content .about-wish  { font-size: 19.5px; }
  .about-content .about-timeline { padding-inline-start: 1.1em; }
}

/* ── The nested pair under "איש חינוך בלתי פורמלי:" ──
   Same size, same colour, same face as the list above it - it is the same
   register, just one level in. The indent is the only thing marking it, at
   1.2em of the list's own type so it tracks the size rather than sitting at
   a fixed pixel offset.

   The outer li carries vertical padding; the nested one must not inherit it
   or the sub-items would sit as far apart as the credentials do, which
   would read as four separate points instead of two under one heading. */
.teacher-sublist {
  list-style: none;
  margin: 0.35em 0 0;
  padding: 0;
  padding-inline-start: 1.2em;
}
.teacher-sublist li {
  padding: 0.28em 0 0;
  border: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* ── Bullets on the credentials, with a hanging indent ──
   The list had none: the items were paragraphs in a row, which is why the
   nested pair needed an indent to be legible as subordinate at all. A real
   marker does that work, and it lets the text hang off it rather than
   starting flush, so a wrapped line lines up under the first line instead
   of under the bullet.

   Everything here is logical rather than left/right: the page is RTL and
   the markers belong on the reading edge, wherever that is. */
.teacher-list {
  padding-inline-start: 1.15em;
  text-align: start;
}
.teacher-list > li {
  position: relative;
  padding-inline-start: 0.1em;
}
.teacher-list > li::before {
  content: '•';
  position: absolute;
  inset-inline-start: -1.05em;
  color: var(--ember);
  line-height: inherit;
}
/* The nested pair steps in again and takes a lighter mark, so the two
   levels are told apart by the marker as well as by the indent. */
.teacher-sublist {
  padding-inline-start: 1.15em;
}
.teacher-sublist > li {
  position: relative;
}
.teacher-sublist > li::before {
  content: '–';
  position: absolute;
  inset-inline-start: -1.05em;
  color: var(--ember);
  opacity: 0.8;
  line-height: inherit;
}

/* ── The story's opening sentence ──
   Bold and slanted like the five statements, but in the BODY face rather
   than the headings one: it runs inside its own paragraph rather than
   standing on its own line, and changing face mid-sentence would read as a
   quotation from somewhere else. The variable range was loaded to 500, so
   700 here would have been synthesised - the link now goes to 700 and the
   weight is real.

   The drop cap that used to open this paragraph is gone with it. The two
   were competing for the same job: the cap said "the story starts here" by
   ornament, and this says it by voice. */
.about-content .about-lead-in {
  /* Its own line, not a run inside the paragraph. It opens the story, and a
     bold slanted sentence that the next sentence continues on the same line
     reads as emphasis rather than as an opening. */
  display: block;
  margin-bottom: 0.5em;
  font-weight: 700;
  font-style: italic;
  color: #2A261F;
}

/* The price and the line that puts it in proportion are one statement, so
   they are one child of the column rather than two.

   Setting a small margin on the line did not work: .pricing-inner is a flex
   column with a 26px gap, and a flex gap is not a margin - it is added to
   whatever margin the item has, so 6px of margin produced 32px of space.
   Wrapping the pair means the gap now falls between the pair and its
   neighbours, which is where it belongs, and the space inside the pair is
   mine to set. */
.pricing-stack { display: flex; flex-direction: column; gap: 6px; }
.pricing-value { margin: 0; }

/* The badge now carries a sentence rather than two words, so it can no
   longer be set as a tight uppercase chip: the tracking that suits a label
   stretches a sentence past the box on a phone. Same colour, same pill,
   same weight - just room to breathe and a line height that can wrap. */
.personal-session-badge {
  letter-spacing: 0.08em;
  line-height: 1.5;
  white-space: normal;
  max-width: 100%;
}

/* ── The condition on the 1:1, made unmissable ──
   It was a small pale chip above a 26px bold promise: "פגישת אימון 1:1 איתי"
   is what the eye took, and "לחמשת הנרשמים הראשונים" (was עשרת until 09-23) is what it skipped, so
   readers outside the first five expected a session they are not getting. That
   is a promise problem, not a styling preference.

   Three things were wrong and all three are structural. It was SMALL, at
   label size next to a headline. It was LOW CONTRAST - paper-light on ember
   measures about 2.2:1, under every threshold there is, which is precisely
   how type gets skipped. And it was DETACHED, a chip with air around it that
   the eye can step over on its way to the heading.

   So it stops being a chip and becomes the card's header: full width, bled to
   the border on the negative of the box's own padding, ink on ember at about
   8:1, and at reading size. You cannot reach the promise without crossing the
   condition. */
.personal-session-badge {
  margin: calc(var(--ps-pad-top) * -1) calc(var(--ps-pad-x) * -1) 6px;
  /* The earlier chip rule caps this at max-width:100%, which is 100% of the
     box's CONTENT width - it would hold the ribbon inside the padding it is
     supposed to bleed past. */
  max-width: none;
  padding: 12px 18px;
  border-radius: 0;
  background: var(--ember);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(15px, 1.45vw, 17px);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.45;
  text-align: center;
  white-space: normal;
}

/* ── Spacing and type, second pass ── */

/* The box ended and then 89px of nothing before the line that answers it.
   Most of it was a 41px margin doing the same job as the column's own 26px
   gap. */
.what-get-anchor { margin-top: 0; }

/* The cadence line describes how the course actually runs, and it was set at
   16.8px - smaller than the body copy elsewhere on the page, for the one
   paragraph a buyer most needs to take in. Up to 22px, and pulled under the
   heading: 52px of air between a title and its own first line reads as two
   separate things. */
.cycle-format-inner { gap: 20px; }
.cycle-format-title { margin-bottom: 0; }
.cycle-cadence {
  font-size: clamp(18px, 1.85vw, 22px);
  line-height: 1.6;
  color: var(--ink-soft);
  margin-top: 0;
  max-width: 860px;
}

/* 1041px of measure at 18.6px is past a hundred characters to the line, which
   is what made the paragraphs read as scattered rather than dense. Capped to
   a reading width and centred; the gold rule rides the box, so it comes with
   it. */
.cycle-format .founders-blurb {
  max-width: 840px;
  margin-inline: auto;
}

/* ── כמה זה עולה ──
   The number stands alone, and the line under it says what it buys. */
.pricing-for {
  font-family: var(--serif);
  font-size: clamp(19px, 1.9vw, 23px);
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-soft);
  text-align: center;
  margin: 0;
}
/* Where the 1,488 line used to sit, at its own size but centred and in the
   gold of the heading above it - it is the argument for the number, so it
   belongs to the number rather than to the body copy. */
.pricing-value {
  color: var(--ember);
  text-align: center;
  margin: 0;
}
.pricing-stack { gap: 10px; }

/* ══ The two מדבר אליי buttons now land on the first cycle ══
   The hero's button used to jump straight to the form, which let the
   hurried reader skip the story AND the offer. Sending both buttons to
   #first-cycle keeps the skip - he still misses the story - but routes
   him through the format, the risk, the refund and the price before he
   reaches a field. scroll-margin-top keeps the heading off the very top
   edge so the section arrives framed rather than clipped. */
#first-cycle { scroll-margin-top: clamp(16px, 3vh, 40px); }

/* ══ Cohort parts, hidden while the course is filmed in full ══
   2026-10-22: there is no מחזור ראשון for now. Everything that only made
   sense for a live cohort carries data-cohort: the 5/5/10 stats row, the
   "המחזור הראשון יוצא לדרך" section, the whole "כמה זה עולה" section,
   the "כל מפגשי ה־Q&A מוקלטים" bullet and "למחזור הראשון בלבד" under the
   closing price. To bring them back, delete
   this rule, delete the temporary "עוגנים לדייט הבא" bullet, and point
   the two buttons (.hx-cta, .cta-jump) back from
   #register to #first-cycle. */
[data-cohort] { display: none !important; }

/* The second button, where the full reader finishes the bio. By then he
   has read everything about the man and has had no button for several
   screens. Same words, same destination. */
/* Tal and Adi. It used to close the story, where it showed before "קרא
   עוד..." and pulled the eye out of the reading. Here it has one fixed
   place: after the credentials, as the proof that it worked for him, and
   just before the button. מי מלמד follows the story directly, so a reader
   who opened the story still meets it right after the last line. */
.teacher-photo {
  max-width: 420px;
  margin: clamp(30px, 4vw, 48px) auto 0;
}
.teacher-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.28);
}
@media (max-width: 699px) {
  .teacher-photo { padding-inline: 22px; }
  .teacher-photo img { border-radius: 5px; }
}
.teacher-actions {
  display: flex;
  justify-content: center;
  margin-top: clamp(26px, 3.4vw, 42px);
}

/* The push line from the old mid-page band, now a subhead in the dark
   section. It sits between the headline and the price, in bone rather
   than gold so the number under it stays the brightest thing there. */
.final-push {
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 23px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(251,247,236,0.72);
  max-width: 560px;
  margin: -8px auto 18px;
}

/* ══ מפגשי הזום, on its own line ══
   The day and the hour were a subordinate clause at the end of a long
   sentence, which is where a reader loses a detail he needs to diary. */
.cycle-cadence-when {
  display: inline-block;
  margin-top: 0.45em;
  font-weight: 700;
  color: var(--ink);
  /* Now that it names the length too, it runs to two lines on a phone and
     broke 290/57, leaving ב־20:00 alone on the second. Balanced it is
     185/162. No effect on a desktop, where it still fits one line. */
  text-wrap: balance;
}

/* ══ כמה זה עולה ══
   The one real fault here was alignment, and it was mine. Three rules had
   accumulated on .pricing-value: the first gave it a 620px measure with
   `margin: 18px auto 0`, and the two that came later reset `margin: 0` to
   solve a flex-gap problem, taking the auto margins with it. A 620px box
   with no auto margin sits at the start of its 1041px column, which in RTL
   is the right edge - one of the three lines was off-centre, and that is
   what made the whole block look shoved aside. Margins are set one axis at
   a time now: auto inline for centring, explicit block for rhythm, so a
   later block-margin change cannot un-centre it again.

   Everything else goes back to what it was. The 72px number in the
   headings' light gold put two large golds of the same value one above the
   other, and they cancelled rather than ranked; at its old size in the
   deeper gold the price reads as the heading's answer instead of competing
   with it.

   What is left of the complaint about space is fixed without touching the
   type: the number's line-height was 1.45, which is leading for a
   paragraph, not for a single figure - most of the gap under the heading
   was empty line box. 1.15 closes it up, and the heading's bottom margin
   goes with it. */
.pricing-title { margin-bottom: 0; }
.pricing-stack { gap: 0; }
.pricing-line { line-height: 1.15; margin: 0 auto; }
.pricing-for { margin: 0.35em auto 0; }
/* This is the line that justifies the number, and it was the palest thing
   in the section. Measured against the paper it sits on (#F8F2E4), --ember
   gives 2.47:1 - below the 4.5 a reader needs at body size, which is not a
   matter of taste, and the reason Tal could not see it. --ember-deep gets to
   4.02, still the faintest of the three lines; #7A6234 with a 500 reaches
   5.19 and is comfortably legible while staying unmistakably gold.

   And it moves up to sit at the same distance under its neighbour as that
   neighbour sits under the price, so the three lines read as one block
   rather than as a statement with a footnote. */
.pricing-value {
  margin-block: 0.35em 0;
  margin-inline: auto;
  color: #7A6234;
  font-weight: 500;
  /* At its measure the sentence broke with אחת. alone on the last line. */
  text-wrap: balance;
}

/* Centred now, and a centred paragraph needs a shorter measure than a
   ranged one: it ran the box's full 964px, and at that width the eye has to
   find the start of each line from a different place every time. 760px
   holds it to two lines that read as a block. */
.personal-session-body {
  max-width: 760px;
  margin-inline: auto;
  text-wrap: pretty;
}

/* ══ The closing section, tightened around the decision ══

   PRICE. The number and its label ran at one size, so the long white label
   read as the louder of the two and the hierarchy inverted. Same treatment
   as כמה זה עולה further up, in the dark section's gold: whoever scrolls
   straight to the form meets the price in the proportions he would have met
   it in had he read the page. */
.final-sub { margin-bottom: clamp(26px, 3vw, 40px); }
.final-price {
  font-family: var(--serif);
  font-size: clamp(27px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ember-bright);
  margin: 0;
}
.final-for {
  font-family: var(--serif);
  font-size: clamp(19px, 1.9vw, 23px);
  font-weight: 400;
  line-height: 1.4;
  color: rgba(251,247,236,0.66);
  margin: 0.35em 0 0;
}

/* SPACE. 92px above the button and 84px below it were reserved for the
   heart-and-arrow, which only draws on :hover - so on a phone, where hover
   never fires, that space is permanently empty, and the button floats in the
   middle of nothing at the exact moment the reader is deciding. The layers
   are absolutely positioned and pointer-events:none, so they can overrun
   their neighbours on the rare desktop hover; dead space on every phone is
   the worse trade. */
.hb-stage { padding-bottom: 8px; }
.hb-stage .submitbuttonbox:not(#nope) { margin-top: 22px !important; }
/* The embed's own 22px under the form block was the rest of the distance
   between the button and the line that answers it. */
.form-shell .rp-form .multyform:not(#nope) { margin-bottom: 6px !important; }
@media (max-width: 600px) {
  .hb-stage { padding-bottom: 6px; }
  .hb-stage .submitbuttonbox:not(#nope) { margin-top: 18px !important; }
}

/* REASSURANCE. It sat outside the box, small, 129px below the button - which
   is to say nowhere near the moment it exists for. Inside the box now, under
   the button, and it says what the click does before it says what happens if
   you change your mind. */
.form-shell .final-refund {
  margin: 12px 0 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: rgba(242,235,219,0.72);
  text-align: center;
}

/* ══ Hero proposal (B · גרפיט) ═══════════════════════════════════════════
   Replaces the logo + photograph hero. The logo is retired and the couple
   photograph has no licence, so neither appears. Classes are .hx-* so no
   rule written for the old .hero can reach this one; the old rules are
   still in the sheet, dead, and go when a direction is chosen.
   The insights sheet still rides up over whatever is above it by --peek,
   so every variant reserves --peek at its own foot. */
.hx { position: relative; isolation: isolate; overflow: hidden; }
.hx [data-in] {
  animation: hx-in .9s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: calc(var(--d, 0) * 110ms + 120ms);
}
@keyframes hx-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hx-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hx [data-in] { animation-name: hx-fade; }
}
.hx-cta { -webkit-tap-highlight-color: transparent; }
/* The next section no longer rides up over the hero, and the scroll cue
   that stood on it is gone: Tal, "it's obvious the page scrolls". The
   section starts square under the hero, with no lifted edge or shadow, and
   its container gives back the padding that compensated for the overlap. */
.hx + .insights { margin-top: 0; border-radius: 0; box-shadow: none; }
.hx + .insights > .container { padding-top: 0; }

/* B · גרפיט, second pass.
   The name block is on the page's own cream paper now, and the navy panel
   carries Tal's hearts artwork in place of any drawn compass. Tal's name
   comes first and large, then קורס a step below the title, then the title
   one word to a line.

   The panel's navy is not picked: it is the median of the artwork's own
   border band (#1E2537 for the puzzle-hearts artwork), and the artwork file
   dissolves into exactly that colour at its edges, so the image sits in the
   panel without a rectangle - see the .hx-hearts rule. The panel's gold is
   the first artwork's metal, #D9B89D; the second's measures #CDAC8F, close
   enough that the button and the statement still read as the same metal. */
.hx-b {
  --hx-ink: #0D0E10;
  --hx-navy: #1E2537;
  --hx-navy-ink: var(--navy-ink);
  --hx-paper: #F1EADF;
  --hx-gold: #D9B89D;
  --hx-gold-deep: #886344;
  --hx-pad: clamp(28px, 4.4vw, 72px);
  /* One size drives the whole lockup, so name, קורס and title keep their
     proportions at every width. */
  --hx-t: clamp(56px, min(7.4vw, 12.2vh), 136px);
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  /* Exactly half and half: the seam between cream and navy is the page's
     centre line. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
/* The lockup is one block, centred in the cream half and raised to the
   optical centre: the extra bottom padding lifts it about 6vh above the
   geometric middle of what the sheet leaves visible. Inside the block the
   lines stay ranged right, so the stack keeps its hard edge. */
.hx-b-name {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: clamp(32px, 6vh, 72px) 4vw clamp(48px, 12vh, 140px);
  background-color: var(--paper);
  background-image: var(--paper-grain);
  background-size: var(--paper-grain-size);
  background-blend-mode: var(--paper-grain-blend);
  color: var(--hx-ink);
}
.hx-b-lockup { display: flex; flex-direction: column; align-items: flex-start; }
/* Tal's name leads, in the same deep gold as ההתאמה, over a short rule that
   says "author" before the title starts. */
.hx-b .hx-brand {
  font-family: 'Heebo', var(--sans); font-weight: 800;
  font-size: calc(var(--hx-t) * .56); line-height: 1; letter-spacing: -.015em;
  color: var(--hx-gold-deep);
}
.hx-b .hx-brand::after {
  content: ""; display: block; width: .9em; height: 3px;
  margin: .32em 0 .5em; background: var(--hx-gold-deep); opacity: .7;
}
.hx-b .hx-title {
  display: flex; flex-direction: column;
  font-family: 'Heebo', var(--sans); font-weight: 800;
  font-size: var(--hx-t);
  line-height: .9; letter-spacing: -.035em;
  color: var(--hx-ink);
}
/* A step below the title rather than a label above it: Tal wanted קורס
   read, not skimmed past. */
.hx-b .hx-kicker {
  font-size: .64em; line-height: 1; letter-spacing: -.02em;
  margin-bottom: .12em;
  color: var(--hx-navy-ink);
}
/* The metallic gold is 1.8:1 on cream; this deeper one, the same metal a
   shade down, is 4.3:1, and still reads as gold. */
.hx-b .hx-gold { color: var(--hx-gold-deep); }

.hx-b-panel {
  background: var(--hx-navy);
  color: var(--hx-paper);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: clamp(14px, 2.4vh, 26px);
  padding: clamp(12px, 2.4vh, 32px) var(--hx-pad) calc(var(--peek) + clamp(32px, 5vh, 64px));
}
/* Full bleed by width, but never taller than 46% of the viewport: on a
   wide, short window the width-driven artwork pushed the button under the
   fold. Centred with align-self, which also does the bleed - a flex item
   wider than its line overflows both sides equally - so no negative margin
   is needed, and when the height cap wins it sits narrower in the middle.

   The artwork is Tal's second hearts (the puzzle pair, 2026-09-23). The
   drawing runs to its file's left and top edges, and bled edge to edge it
   met the screen edge and the seam - "cut at the sides". So the file is
   rebuilt with the drawing set inside a margin of the panel colour (6% of
   the width each side, 7% of the height top and bottom), no line faded,
   only the artwork's own ground dissolving into the margin
   (Design/tools/hearts_dissolve.py, outside the repo). #1E2537 is the
   median of the artwork's border and the panel's colour, and every edge
   pixel of the file is exactly that, so it bleeds with no rectangle and no
   line ever touches the panel's edge. 1.995 is the file's aspect,
   1600/802. */
.hx-b .hx-hearts {
  display: block;
  align-self: center;
  width: min(calc(100% + 2 * var(--hx-pad)), calc(46vh * 1.995));
  max-width: none;
  height: auto;
  margin-inline: 0;
  margin-bottom: -3%;
}
/* Wide and short (a 1280x720 laptop): the half-width artwork is 350px tall
   there and pushed the hero 44px past the fold; the panel's rhythm gives
   that back. */
@media (min-width: 900px) and (max-height: 800px) {
  .hx-b-panel { gap: clamp(10px, 1.8vh, 18px); }
  .hx-b .hx-lead { line-height: 1.55; }
}
.hx-b .hx-statement {
  font-family: 'Heebo', var(--sans); font-weight: 800;
  font-size: clamp(26px, min(2.6vw, 4.4vh), 40px); line-height: 1.1; letter-spacing: -.02em;
  color: var(--hx-gold);
}
.hx-b .hx-lead {
  font-family: var(--sans); font-size: clamp(17px, min(1.4vw, 2.5vh), 21px); line-height: 1.65;
  max-width: 38ch; text-wrap: pretty;
  color: rgba(241, 234, 223, .82);
}
.hx-b .hx-cta {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Heebo', var(--sans); font-weight: 700; font-size: clamp(17px, 1.4vw, 20px);
  padding: 15px 44px; border-radius: 0;
  border: 1.5px solid var(--hx-gold); color: var(--hx-gold); background: transparent;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.hx-b .hx-cta:hover { background: var(--hx-gold); color: var(--hx-navy); }
.hx-b .hx-cta:focus-visible { outline: 2px solid var(--hx-gold); outline-offset: 4px; }
.hx-b .hx-facts {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  font-family: var(--sans); font-size: 15px; color: rgba(241, 234, 223, .6);
}
.hx-b .hx-facts i { width: 5px; height: 5px; background: var(--hx-gold); transform: rotate(45deg); opacity: .8; }
@media (max-width: 899px) {
  .hx-b { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hx-b-name { padding-top: 20px; padding-bottom: 18px; align-items: stretch; }
  .hx-b .hx-brand::after { margin: .22em 0 .32em; }
  /* The artwork's lowest 10% is empty navy, already faded by the mask, so the
     statement can come up into it. Together these put the button back above
     the fold on a 375x812 phone: it was at 853. */
  .hx-b-panel { padding-top: 4px; gap: 11px; }
  .hx-b .hx-hearts { margin-bottom: -8%; }
  .hx-b .hx-lead { line-height: 1.55; }
}

/* ══ Type: the page follows the hero ══════════════════════════════════════
   Every heading was Frank Ruhl Libre through var(--serif); --serif names
   Heebo now, the hero's face. The personal story was kept in its serifs at
   first and then joined too, at Tal's word: its prose is set in Assistant,
   the face of the hero's paragraph (see "Paper & Night" below). Body copy
   was already Assistant, so --sans is untouched.
   Heebo has no italic; the headings that set an <em> in italic would get a
   synthesised slant, so those are upright outside the story. */
:root { --serif: 'Heebo', 'Assistant', sans-serif; }
/* Measured on the page, not guessed: these three were the only rendered
   italics outside the story once the face changed. */
body :is(ul.what-get-anchor-trio, ul.what-get-anchor-trio li, .final-title em, .final-push) { font-style: normal; }

/* ══ Navy grounds ═════════════════════════════════════════════════════════
   Tal's hearts artwork sits on a navy that is not flat: measured on an 8x5
   grid of its background pixels, it glows from about #292D40 just below
   the centre out to #161D2F at the edges. That glow is the ground for two
   sections, alternating with the cream: מי מלמד after the long story, and
   חמשת המודולים. The closing section with the form stays black; Tal saw
   it in navy and wanted the black back.

   Rather than restyle every rule inside them, the tokens those rules read
   are re-pointed inside these sections: ink turns to the page's cream, the
   lines to cream at low alpha, and the golds to the artwork's own
   (#D9B89D). --paper is left alone, so anything drawn as a cream card stays
   a cream card. */
:root {
  --navy-ground: radial-gradient(ellipse 72% 80% at 52% 52%,
    #292D40 0%, #22293C 30%, #1C2437 58%, #161D2F 100%);
}
body :is(section.teacher, section.syllabus) {
  --ink: #F1EADF;
  --ink-soft: #DDD6CB;
  --ink-muted: #A9A6A0;
  --bone: #F7F1E6;
  --line: rgba(241, 234, 223, 0.14);
  --line-soft: rgba(241, 234, 223, 0.07);
  --ember: #D9B89D;
  --ember-bright: #E9D0B9;
  --ember-deep: #C9A688;
  --line-ember: rgba(217, 184, 157, 0.32);
  background-color: #161D2F;
  background-image: var(--navy-ground);
  background-size: auto;
  background-blend-mode: normal;
  color: var(--ink);
}
/* Two colours in these sections were literals rather than tokens, found by
   reading every text colour back off the page: the bio list was #4A443D,
   which is 1.9:1 on the navy. */
body section.teacher :is(.teacher-list li, .teacher-sublist li) { color: var(--ink-soft); }
/* The module numbers sit on discs that mask the timeline line behind them.
   The discs were cream, and the artwork's gold is 1.6:1 on cream; on navy
   they are outlined in gold, the way the artwork draws. */
body section.syllabus .syllabus-num,
body section.syllabus .syllabus-list li:hover .syllabus-num {
  background: #1A2235;
  border-color: rgba(217, 184, 157, 0.55);
}

/* ══ Paper & Night, through the page ═══════════════════════════════════════
   The hero's language is called נייר ולילה: two materials (cream paper,
   and a night navy that glows at its centre), one metal (the artwork's
   rose gold, #D9B89D on dark and #886344 on paper), one voice (Heebo,
   heavy and tight, over Assistant for reading), square corners, and the
   hearts drawn as a fine engraved line. This block carries it past the
   hero. */

/* The hero's night deepens to black where its sentence sits: navy behind
   the artwork, whose own ground it matches, and under it a block that IS
   the black part - it fades in from the navy, runs to the panel's foot and
   centres the sentence, the button and the numbers inside itself, so they
   sit in the middle of the black by construction. Its bottom padding is
   the sheet's overlap plus a little, so the centring is of what is seen. */
.hx-b-panel {
  background: var(--hx-navy);
  justify-content: flex-start;
  gap: 0;
  padding-bottom: 0;
}
.hx-b .hx-hearts { flex: none; }
.hx-b-copy {
  flex: 1;
  align-self: stretch;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: clamp(14px, 2.4vh, 26px);
  margin-inline: calc(-1 * var(--hx-pad));
  /* The black arrives within the artwork's own faded lower band (14% of
     this block), so the eye reads it as starting right under the hearts.
     For the group to sit in the middle of what is black - from that 14% down
     to the hero's foot - the top padding has to exceed the bottom by 14% of
     the block. The block's height is about 57% of the viewport at every
     width the panel is beside the name, so 8vh is that 14%; the same 24px
     on both ends keeps the group off the edges. (It used to stop where the
     next section rode up over the hero; that overlap is gone.) */
  padding: calc(clamp(32px, 8vh, 96px) + 24px + 5vh) var(--hx-pad) 24px;
  /* Navy into black over about a third of the block on an eased curve
     (Tal: the old 14%-straight fade showed steps). Two dark colours a short
     way apart band on an 8-bit screen; a longer run with the easing spelled
     out in stops gives each step less to jump. The black is solid from 36%;
     the extra 5vh of top padding keeps the group centred on what now reads
     as black. */
  background: linear-gradient(180deg,
    rgba(11, 12, 14, 0) 0%,
    rgba(11, 12, 14, 0.06) 4%,
    rgba(11, 12, 14, 0.16) 8%,
    rgba(11, 12, 14, 0.30) 12%,
    rgba(11, 12, 14, 0.46) 16%,
    rgba(11, 12, 14, 0.62) 20%,
    rgba(11, 12, 14, 0.76) 24%,
    rgba(11, 12, 14, 0.87) 28%,
    rgba(11, 12, 14, 0.95) 32%,
    #0B0C0E 36%,
    #0B0C0E 100%);
}
/* A phone's hero is only as tall as its content, so there is no spare black
   to centre in; the numbers would sit on the sheet's edge without this. */
@media (max-width: 899px) {
  .hx-b-copy { padding-top: 36px; padding-bottom: 44px; }
}
/* The sentence is the panel's only text now (the paragraph under it is
   gone at Tal's word), so it takes the paragraph's room and the size that
   goes with being the one thing said. */
.hx-b .hx-statement {
  font-size: clamp(28px, min(3.3vw, 5.6vh), 52px);
  line-height: 1.14;
  max-width: 17em;
  text-wrap: balance;
  color: #F1EADF;
}
.hx-b .hx-statement span { display: block; color: var(--hx-gold); }
/* The sentence is a line longer than the one it replaced; these give that
   line back where the hero is tight. */
@media (min-width: 900px) and (max-height: 800px) {
  /* The puzzle hearts have almost no empty band at their foot, so the
     short-window saving comes from the height cap instead: 42vh here. */
  .hx-b .hx-hearts { margin-bottom: -4%; width: min(calc(100% + 2 * var(--hx-pad)), calc(42vh * 1.995)); }
}
@media (max-width: 899px) {
  .hx-b { --hx-t: clamp(48px, 13.6vw, 64px); }
  .hx-b-panel { gap: 9px; }
  .hx-b .hx-statement { font-size: clamp(26px, 7.4vw, 34px); }
  .hx-b .hx-hearts { margin-bottom: -4%; }
  .hx-b .hx-lead { line-height: 1.5; }
}

/* The story reads in the hero paragraph's face. Its headings, lede and pull
   quote follow --serif into Heebo. */
.about-content { --story-face: var(--sans); --story-weight: 400; }

/* Section titles speak in the hero's voice: they had come through the face
   change at Frank Ruhl's 500, which in Heebo reads light beside an 800
   hero. The closing title's second line was set apart by weight; it is set
   apart by the metal now, the way ההתאמה is. */
body :is(.insights-head h2, .about-h, .what-get-title, .syllabus-title, .cycle-format-title, .pricing-title, .final-title) {
  font-weight: 800;
  /* Normal tracking. At -0.02em Heebo 800 closed ת onto ב in "מה תבין" -
     Tal saw the two letters join. */
  letter-spacing: 0;
  /* "הדרך שלי לזוגיות לא הייתה לפי הספר" broke with הספר alone on the
     second line. */
  text-wrap: balance;
}
body .final-title em { font-weight: inherit; }
/* Assistant has no italic either; the two story lines that asked for one
   were getting a synthesised slant. */
body .about-content :is(.about-lead-in, .about-beat) { font-style: normal; }
/* The question the old headline asked, marked where it falls in the story
   rather than shouted over it. */
body .about-content .about-question { font-weight: 600; color: var(--ember-deep); }

/* Buttons: square, Heebo, gold. On night the button is drawn in outline and
   fills on hover, exactly as the hero's; the form's submit is the filled
   state held, because it is the one press that matters. */
body :is(section.teacher, section.syllabus) .cta-jump {
  background: transparent;
  color: #D9B89D;
  border: 1.5px solid #D9B89D;
  border-radius: 0;
  box-shadow: none;
  font-family: 'Heebo', var(--sans);
  font-weight: 700;
  letter-spacing: 0;
  padding: 15px 44px;
}
body :is(section.teacher, section.syllabus) .cta-jump:hover {
  background: #D9B89D;
  color: #161D2F;
  box-shadow: none;
  transform: none;
}
/* Ravpage renders its submit twice, stacked, the second as the hover state;
   both are reached here. It keeps its size, so the bow and arrow drawn over
   it still land where they were measured. */
.form-shell .rp-form a.submitButton:not(#nope) {
  border-radius: 0 !important;
  background-color: #D9B89D !important;
  box-shadow: none !important;
}
.form-shell .rp-form .ravxx_hover a.submitButton:not(#nope) { background-color: #E9D0B9 !important; }
.form-shell .rp-form .submitButton:not(#nope),
.form-shell .rp-form .submitButton .textPart:not(#nope) {
  font-family: 'Heebo', 'Assistant', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: #0D0E10 !important;
  border-radius: 0 !important;
}
.form-shell .rp-form input:not([type="checkbox"]):not([type="radio"]):not(#nope) { border-radius: 0 !important; }

/* The footer carries the name in type where the logo image was, with the
   line Tal gave it. */
.footer-brand { display: flex; flex-direction: column; gap: 4px; }
.footer-name {
  font-family: 'Heebo', var(--sans); font-weight: 800;
  font-size: clamp(26px, 2.4vw, 34px); line-height: 1; letter-spacing: -.015em;
  color: var(--ember-deep);
}
.footer-tagline {
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  letter-spacing: .14em; color: var(--ink-muted);
}

/* The hearts as ornament: the artwork's gold lines taken out as an alpha
   mask (16 levels, lossy WebP, 80KB a heart) so they can be tinted with
   the ground's own metal and set very faint. One heart per section, each
   bleeding off an edge, never behind the text column's middle. The section
   isolates so the drawing sits over its ground and under its content. */
body :is(section.about, section.what-get, section.syllabus, section.final) { isolation: isolate; }
/* Clipped for the bleeding hearts. The close clips only sideways: its
   hearts run 150vw wide on a phone, but a clip at the foot cut the bow's
   arrow off. overflow-x: clip leaves the other axis visible. */
body :is(section.about, section.what-get, section.syllabus) { overflow: clip; }
body section.final { overflow-x: clip; overflow-y: visible; }
body :is(section.about, section.what-get, section.syllabus, section.final)::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  -webkit-mask: var(--orn) center / contain no-repeat;
          mask: var(--orn) center / contain no-repeat;
}
/* The story: the heart of anchors and gears, high on the left beside Tal's
   photograph, deep gold on paper. Tal picked it over the floral one. */
body section.about::after {
  --orn: url("heart2-rope.webp");
  width: min(44vw, 560px); aspect-ratio: 720 / 726;
  top: clamp(80px, 10vw, 160px); left: -7vw;
  background: #886344; opacity: .075;
}
/* זה לא קורס פיק־אפ: the floral heart, off the right edge. The two hearts
   alternate down the page so the same one never comes twice in a row. */
body section.what-get::after {
  --orn: url("heart2-lace.webp");
  width: min(40vw, 500px); aspect-ratio: 720 / 687;
  bottom: -40px; right: -9vw;
  background: #886344; opacity: .075;
}
/* The modules, on night: the anchors heart off the left edge, in the metal. */
body section.syllabus::after {
  --orn: url("heart2-rope.webp");
  width: min(38vw, 480px); aspect-ratio: 720 / 726;
  top: 50%; translate: 0 -50%; left: -8vw;
  background: #D9B89D; opacity: .07;
}
/* The close, on black: both hearts, wide and faint, behind the title. */
body section.final::after {
  --orn: url("hearts2-line.webp");
  width: min(94vw, 1180px); aspect-ratio: 1200 / 588;
  top: clamp(8px, 2vw, 32px); left: 50%; translate: -50% 0;
  background: #D9B89D; opacity: .07;
}
@media (max-width: 760px) {
  body section.about::after { width: 78vw; left: -26vw; top: 60px; }
  body section.what-get::after { width: 70vw; right: -24vw; }
  body section.syllabus::after { width: 64vw; left: -24vw; }
  body section.final::after { width: 150vw; }
}

/* ══ Navy type ════════════════════════════════════════════════════════════
   The navy the headings are set in is a step lighter than the night the
   hero's panel is painted in: at #15213A, on cream and at reading distance,
   it read as black. #1F3A64 keeps the blue visible (9.1:1 on --paper). It
   carries the section titles on cream, the story's headline and its
   "קרא עוד...", the hero's קורס, and the whole footer. */
:root { --navy-ink: #1F3A64; }
body :is(.insights-head h2, .about-h, .what-get-title, .cycle-format-title, .pricing-title) { color: var(--navy-ink); }
body .footer :is(.footer-name, .footer-tagline, .footer-links a) { color: var(--navy-ink); }
body .footer .footer-links a:hover { color: var(--ember-deep); }

/* מי מלמד: the name alone now, set as the section's title - the same
   Heebo 800 as every section title, in the section's metal because this
   section is on night, over a short rule that hands over to the list. */
body section.teacher .teacher-name {
  font-family: 'Heebo', var(--sans); font-weight: 800;
  font-size: clamp(40px, 4.6vw, 60px); line-height: 1; letter-spacing: 0;
  color: var(--ember);
  text-align: center;
  margin: 0 0 clamp(22px, 2.6vw, 34px);
}
body section.teacher .teacher-name::after {
  content: ""; display: block;
  width: 56px; height: 2px; margin: 0.42em auto 0;
  background: var(--ember); opacity: 0.6;
}

/* The close: night again, as the hero's left half is - the artwork's navy
   glowing at the top and deepening to black, with both hearts drawn faint
   in that navy. */
body section.final {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(41, 45, 64, 0.95) 0%, rgba(22, 30, 48, 0.9) 42%, rgba(11, 12, 14, 0) 100%),
    linear-gradient(180deg, #161E30 0%, #111624 38%, #0B0C0E 70%, #0B0C0E 100%);
}

/* The form's button is drawn the way the hero's is: an outline in the
   metal that fills on hover. The outline is an inset shadow, not a border,
   so the button keeps the exact box the bow and arrow were measured to.
   Ravpage stacks a second copy for hover; that copy is the filled state. */
.form-shell .rp-form a.submitButton:not(#nope) {
  background-color: transparent !important;
  box-shadow: inset 0 0 0 1.5px #D9B89D !important;
}
.form-shell .rp-form a.submitButton:not(#nope),
.form-shell .rp-form a.submitButton .textPart:not(#nope),
.form-shell .rp-form a.submitButton button:not(#nope) { color: #D9B89D !important; }
.form-shell .rp-form .ravxx_hover a.submitButton:not(#nope) { background-color: #D9B89D !important; }
.form-shell .rp-form .ravxx_hover a.submitButton:not(#nope),
.form-shell .rp-form .ravxx_hover a.submitButton .textPart:not(#nope),
.form-shell .rp-form .ravxx_hover a.submitButton button:not(#nope) { color: #0D0E10 !important; }

/* ══ Name block, alternative 3 ════════════════════════════════════════
   Tal: קורס was not set apart from the course's name at all, and the
   stack gave every word the same weight, so it said nothing about which
   word carries the meaning. Three: a seal, centred. Tal's name over a gold rule with a diamond,
   קורס tracked wide between them and the title, then the title graded by
   meaning: תורת small, ההתאמה largest and in gold because the whole
   course is built on that one anchor, הזוגית between the two. */
.hx-b .lk { display: flex; flex-direction: column; }
.hx-b .lk-name {
  font-family: 'Heebo', var(--sans); font-weight: 800;
  font-size: calc(var(--hx-t) * .5); line-height: 1; letter-spacing: -.015em;
  color: var(--hx-gold-deep);
}
.hx-b .lk-title {
  display: flex; flex-direction: column;
  font-family: 'Heebo', var(--sans); font-weight: 800;
  font-size: var(--hx-t); line-height: .92; letter-spacing: -.035em;
  color: var(--hx-ink);
}

.hx-b .lk-3 { align-items: center; text-align: center; }
/* Tal's name at .8 of the title - the size of תורת and הזוגית - where .5
   read small beside a title this heavy. It is gold like ההתאמה, so the
   seal carries its gold at the top and at the heart. */
.hx-b .lk-3 .lk-name { font-size: calc(var(--hx-t) * .8); }
.hx-b .lk-3 .lk-orn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: calc(var(--hx-t) * 2.7); margin: calc(var(--hx-t) * .22) 0 calc(var(--hx-t) * .22);
}
.hx-b .lk-3 .lk-orn::before,
.hx-b .lk-3 .lk-orn::after { content: ""; flex: 1; height: 1px; background: var(--hx-gold-deep); opacity: .6; }
.hx-b .lk-3 .lk-orn i { width: 8px; height: 8px; border: 1.5px solid var(--hx-gold-deep); transform: rotate(45deg); }
.hx-b .lk-3 .lk-title { align-items: center; }
.hx-b .lk-3 .lk-label {
  /* A third up from .26em (Tal wanted קורס with more presence), and still
     well under טל סרן (.5em) so the label never outranks the name. */
  font-size: .345em; font-weight: 700; line-height: 1; letter-spacing: .42em;
  /* Chrome adds the tracking on the visual right of every letter, so in
     RTL the extra gap sits beside ק, the first letter. Padding the left
     edge by the same amount puts the ink back under the diamond. */
  padding-left: .42em;
  color: var(--navy-ink);
  margin-bottom: .9em;
}
/* תורת matches הזוגית in size, weight and ink, so the two frame ההתאמה:
   medium, large, medium. Gold stays on the name and the anchor word, navy
   on the label - one role per colour. */
.hx-b .lk-3 .lk-lead { font-size: .74em; line-height: .95; letter-spacing: -.02em; }
.hx-b .lk-3 .lk-key { font-size: 1.1em; line-height: .95; color: var(--hx-gold-deep); }
.hx-b .lk-3 .lk-rest { font-size: .74em; line-height: .95; letter-spacing: -.02em; }
@media (max-width: 899px) {
  .hx-b .lk-3 { align-self: center; }
}

/* ══ Pass of 2026-09-23, late ═════════════════════════════════════════════ */

/* The hero's sentence and button are one group, centred on the black both
   ways; inside the group they stay ranged right, so the button still hangs
   from the sentence's edge. */
.hx-b-copy { align-items: center; }
.hx-b-group { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 2.4vh, 26px); }
/* Centring a block of wrapped text centres its box, and a wrapped box is as
   wide as the space it wrapped in, not as its longest line - so the
   sentence sat right of centre. It breaks where it was already breaking,
   after אותך, and its box is exactly its longest line. */
.hx-b .hx-statement { max-width: none; }
/* The button sits on the group's centre line, under the sentence. */
.hx-b-group > div:last-child { align-self: center; }

/* A belt-and-braces edge on the artwork. The file's own margin is already
   the panel colour, but a screen's colour management can lift a JPEG a
   level against a CSS fill, which showed as a faint rectangle in a narrow
   window. The fade lives inside the file's margin (6% / 7%), so it never
   touches a line. */
.hx-b .hx-hearts {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 5.5%, #000 94.5%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6.5%, #000 93.5%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right, transparent 0, #000 5.5%, #000 94.5%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6.5%, #000 93.5%, transparent 100%);
          mask-composite: intersect;
}

/* Between the hero and the section under it. The cream half and the
   section below are the same paper, so they need telling apart - but a 4px
   black rule read as a frame. The separation is depth instead: the hero
   lies on the next sheet, casting a soft shadow onto it, with a hairline
   of faint ink at the edge. Over the black half the hairline disappears,
   which is right: the colour already separates there. */
.hx-b::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  height: 1px; background: rgba(13, 14, 16, 0.2);
}
.hx + .insights { box-shadow: inset 0 12px 16px -14px rgba(11, 12, 14, 0.26); }

/* מה תבין דרך הקורס: every bullet in exactly two lines. Measured, the
   largest size that keeps all five to two lines is 4.1% of the text
   column's width wherever the column is (20.4px on a 497px column at 1440,
   18.8px at 1200, 15.4px at 1000), so the size is tied to the column itself
   with a container unit and holds at every width, capped at 22px.
   Below 560px the column is under 300px and two lines would need 12px,
   which is too small to read; phones get a readable 17px instead and the
   long bullets take three or four lines. */
/* Only the five bullets: the featured box has no column width of its own,
   and as a container it collapsed to zero and set one word per line. */
body .insights .insight:not(.insight-featured) .insight-body { container-type: inline-size; }
body .insight:not(.insight-featured) .insight-body p { font-size: min(22px, 4.1cqw); font-weight: 400; }
/* "תגלה..." fills its first line and left "לך." alone on the second. */
body .insight:not(.insight-featured) .insight-body p { text-wrap: pretty; }
body .insight-featured .insight-body p { font-weight: 400; }
@media (max-width: 560px) {
  body .insight:not(.insight-featured) .insight-body p { font-size: 17px; }
}
body .insight-featured .insight-body p { font-size: clamp(21px, 1.75vw, 25px); }
/* The opening line under the heading: the anchor every bullet hangs from.
   A sentence, not a bullet, so it takes the bullets' voice a step up and
   no mark. */
/* Tal's line breaks, desktop only: the zig-zag's two columns are where a
   break he places falls where he means it. Below 900px everything is one
   column and the text wraps on its own. */
@media (max-width: 899px) {
  .insights br.br-desk { display: none; }
}
body .insights-head .insights-lead {
  font-family: var(--sans);
  font-size: clamp(19px, 1.75vw, 24px);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 760px;
  text-wrap: balance;
}

/* The first module and the first Q&A: a step up, label and value alike. */
body .cycle-date-label { font-size: 18px; }
body .cycle-date-value { font-size: clamp(26px, 2.6vw, 35px); }
/* Both dates: the day and date on one line, and under them in the metal and
   a step smaller, the Q&A's hours and the module's "four days before". A
   separator on one line (a dot, then a dash in the range) broke on a phone
   as "20:00-" / "21:30"; two lines need no separator, and neither can
   break. */
body .cycle-date-day,
body .cycle-date-time { display: block; white-space: nowrap; }
body .cycle-date-time {
  margin-top: 0.12em;
  font-size: 0.74em; font-weight: 500; letter-spacing: 0.02em;
  color: var(--ember-deep);
}
/* On a phone the two stack, and at their own widths their gold rules sat
   at two different x's. One column as wide as the wider date gives both
   the same box, so the rules line up. */
@media (max-width: 560px) {
  body .cycle-dates { display: grid; grid-template-columns: max-content; justify-content: center; }
}

/* The 1:1 card leaves the tan it was in (a tan ribbon on a tan tint): the
   ribbon is night with the metal on it, the card is paper with a quiet
   navy edge. */
body .personal-session {
  background: #F7F1E6;
  border: 1px solid rgba(30, 37, 55, 0.18);
  box-shadow: 0 16px 36px rgba(30, 37, 55, 0.10);
}
body .personal-session-badge {
  background: #1E2537;
  color: #D9B89D;
  font-family: 'Heebo', var(--sans);
  letter-spacing: 0.04em;
}

/* The form's button is narrower than its fields and centred under them: a
   single primary action reads as the end of the form rather than as one
   more row of it. The bow and arrow re-measure the button and follow it.
   Both of Ravpage's stacked copies take the same box. */
.form-shell .rp-form a.submitButton:not(#nope) {
  display: block !important;
  width: 68% !important;
  margin-inline: auto !important;
}

/* ══ Pass of 2026-09-24 ═══════════════════════════════════════════════════ */

/* מי מלמד: the credentials as a list, not cards (Tal: designed bullets,
   not boxes). One column held to a reading measure; each line hangs from a
   diamond in the metal, the same mark as the seal's ornament; the
   credential itself is picked out in the metal, so a glance down the gold
   reads the whole list; hairlines of the metal at low strength separate
   the lines. */
body section.teacher .teacher-card { max-width: 720px; }
body section.teacher .creds {
  list-style: none; margin: 0; padding: 0;
  display: grid; text-align: start;
  border-top: 1px solid rgba(217, 184, 157, 0.2);
}
body section.teacher .creds li {
  position: relative; margin: 0;
  padding: 18px 30px 18px 0;
  border-bottom: 1px solid rgba(217, 184, 157, 0.2);
  font-family: var(--sans); font-size: clamp(17.5px, 1.45vw, 20px); line-height: 1.6;
  color: rgba(241, 234, 223, 0.86);
}
body section.teacher .creds strong { font-weight: 600; color: #D9B89D; }
body section.teacher .creds li::before {
  content: ""; position: absolute; inset-inline-start: 4px; top: calc(18px + 0.8em - 4px);
  width: 8px; height: 8px; border: 1.5px solid #D9B89D; transform: rotate(45deg);
}

/* זה לא קורס שמלמד איך להרשים: the three numbers in the navy the section
   titles are set in. */
body .what-get-stat-num,
body .what-get-stat-label { color: var(--navy-ink); }

/* The first-cycle box runs the width of the dates above it (1100px) and
   reads a step larger. */
body .cycle-format .founders-blurb { max-width: 1100px; margin-inline: auto; }
body .cycle-format .founders-blurb-copy p { font-size: clamp(18px, 1.55vw, 22px); }

/* ══ Pass of 2026-09-25: the first frame fits every screen ═══════════════
   The four lines Tal tried in the hero this morning are gone again at his
   word, and the sentence, its type and its centred button are back exactly
   as they were. What stays from that work is the fix it came with (Tal, on
   a Galaxy S23 FE whose Chrome shows 412x~740: the button was cut): on a
   phone the seal and the artwork are tied to the height actually visible,
   --vh, which is 1svh where supported (the viewport with the browser's bars
   showing), and shrink when the screen is short. The shares are set so a
   phone as tall as that one, or taller, gets them at their full, width-led
   size, exactly as before; only a shorter screen sees them shrink. */
.hx-b { --vh: 1vh; }
@supports (height: 1svh) { .hx-b { --vh: 1svh; } }
@media (max-width: 899px) {
  /* Each is its usual, width-led size down to a screen about 740px tall,
     then gives way faster than the screen shrinks: the offset in each is
     what lets it stay whole at 743 and still leave the sentence and the
     button room at 553 (an iPhone SE with Safari's bars). */
  .hx-b { --hx-t: clamp(32px, min(13.6vw, calc(var(--vh) * 9.5 - 14px)), 64px); }
  .hx-b-name {
    padding-top: clamp(8px, calc(var(--vh) * 2.7), 20px);
    padding-bottom: clamp(8px, calc(var(--vh) * 2.45), 18px);
  }
  .hx-b .hx-hearts { width: min(calc(100% + 2 * var(--hx-pad)), calc((var(--vh) * 38 - 75px) * 1.995)); }
  .hx-b-copy { padding-top: clamp(12px, calc(var(--vh) * 4.9), 36px); }
}

/* ══ Pass of 2026-09-25: עם מה תצא מהקורס, drawn in ══════════════════════
   The bullets were rewritten shorter, and in 560px columns their lines
   ended well short of the seam: a band of empty paper down the middle.
   Tal chose, of three ways out, to draw the two columns in (the grid 1120
   to 960) rather than enlarge the type or stack one column: the text now
   meets the seam and the air goes to the page's margins, where it reads as
   margin. The type stays the size it was (20.4px), no longer tied to the
   narrower column, and every bullet is still two lines from 920 to 1920.
   The fourth bullet's desktop break is gone: its first line was the
   longest in the section and set the limit for all of them.

   The opening line under the title was 24px beside 20px bullets and read
   as one of them. It is 30px now, the same step up from the bullets as
   the 56px title is from it. */
@media (min-width: 900px) {
  .insights-grid { max-width: 960px; margin-inline: auto; }
  body .insight:not(.insight-featured) .insight-body p { font-size: min(20.4px, 4.9cqw); }
}
body .insights-head .insights-lead { font-size: clamp(22px, 2.25vw, 30px); line-height: 1.45; }

/* ══ Pass of 2026-09-25, later: the sentence's two halves ════════════════
   Tal: the text higher, more room between its two sentences, and one of
   them larger. The larger is the first. It is the one the reader has to
   recognise himself in, and on a page for a course about people that is
   what holds him; the answer already has the gold, and its word, תורה,
   already stands very large on the cream half as the course's name, so
   making it the largest line would put the product before the person.
   The first grows by an eighth and the answer keeps exactly the size it
   had (.89 of the new size), a pause of about half a line between them.
   On a desktop the block also rises: the copy's top padding, which held
   the sentence down on the solid black, is mostly gone, so the pair sits
   centred between the artwork and the foot of the hero. */
.hx-b .hx-statement { font-size: clamp(30px, min(3.7vw, 6.3vh), 58px); }
.hx-b .hx-statement span { font-size: .89em; margin-top: .45em; }
@media (min-width: 900px) {
  .hx-b-copy { padding-top: calc(clamp(12px, 3vh, 40px) + 2vh); }
}
@media (max-width: 899px) {
  /* On a short phone the pair gives way too, so the button stays on
     screen: at 412x743 and taller it is its full, width-led size. */
  .hx-b .hx-statement { font-size: clamp(25px, min(8.3vw, calc(var(--vh) * 4.6)), 38px); }
}

/* ══ Pass of 2026-09-25, later still: the black half on one axis ════════
   The sentence was ranged right and the button centred under it: two axes,
   and with lines of different lengths the button belonged to neither. Of
   the two consistent ways (all on the right edge, all centred) Tal chose
   centred. Both halves of the hero are built on a centre: the seal on the
   cream, the symmetric hearts on the navy. Centred, the two sentences and
   the button stand under the point where the two hearts fit together, and
   three short display lines lose nothing to being centred. */
.hx-b .hx-b-group { align-items: center; }
.hx-b .hx-statement { text-align: center; }
.hx-b-group > div:last-child { align-self: center; }

/* ══ Pass of 2026-09-25: the sentence clear of the navy ════════════════
   On a desktop the first line's top touched the band where the navy turns
   to black. Moving the text down a whole line (the height of its letters,
   .953 of the type size) cleared it but sat the group low; bringing the
   black up to meet the text instead made the change a hard edge. Tal chose
   the way between: the group moves down half a line (.4765 of the type
   size, relative, so nothing around it moves), and the navy turns black
   over 23% of the copy block rather than 36% (the same eased stops, drawn
   in), so the black is solid 12px or more above the first letters at every
   desktop size measured, from 1920x1080 to 1280x600, with the button on
   screen at each. Phones are unchanged. */
@media (min-width: 900px) {
  .hx-b-group { position: relative; top: calc(clamp(30px, min(3.7vw, 6.3vh), 58px) * .4765); }
  .hx-b-copy {
    background: linear-gradient(180deg,
      rgba(11, 12, 14, 0) 0%,
      rgba(11, 12, 14, 0.06) 2.6%,
      rgba(11, 12, 14, 0.16) 5.1%,
      rgba(11, 12, 14, 0.30) 7.7%,
      rgba(11, 12, 14, 0.46) 10.2%,
      rgba(11, 12, 14, 0.62) 12.8%,
      rgba(11, 12, 14, 0.76) 15.3%,
      rgba(11, 12, 14, 0.87) 17.9%,
      rgba(11, 12, 14, 0.95) 20.4%,
      #0B0C0E 23%,
      #0B0C0E 100%);
  }
}

/* ══ Pass of 2026-09-25/27: the gold as foil, on the night ═══════════════
   Tal's hearts are drawn in a metal that is never flat. Of four ways to
   carry it into the type he chose foil: bands of the hearts' own palette
   running across the word at 115deg, the way light moves over gold leaf,
   at 37% between the flat gold and the full bands (40% first, then 32%).

   Where: on 2026-09-27 it went on every gold text on the page, and the same
   day Tal narrowed it to the light gold that sits on the navy and the black
   (#D9B89D), where the drawing's metal lives. On the cream it read as noise
   and cost the small, thin golds their legibility (the date labels, the
   story), so the cream's golds are flat again, with one exception he asked
   back: the hero's seal, טל סרן and ההתאמה, where the foil began. Those
   take the deep gold that reads on paper (#886344) with the same bands.

   Only the text fill turns transparent; `color` stays gold, because the
   kicker's rule is drawn in currentColor. Centred blocks shrink to their
   words so the bands fall across them; their text does not move
   (measured). The 1:1 ribbon has a fill of its own, so the foil is a second
   layer over it. The module digits are their own inline element, because
   Chrome drops a text-clipped layer on the flex disc around them. Without
   background-clip:text the flat golds stay. */
/* The foil is set as background-image, after background: none, never as
   background: var(--foil-…) (2026-11-11). When a rule sets the background
   shorthand through a variable and then overrides one of its parts (the
   clip, the size), Chrome copies that rule out with empty values. PostHog's
   recordings are built from that copy, so every foil word showed in them
   as nothing: transparent text with no gradient behind it. The page itself
   was never affected. Same paint, a copy that keeps it. */
:root {
  --foil-night: linear-gradient(115deg, #CAA889 0%, #D8B9A1 20%, #DCBEA5 34%,
    #D1AD91 50%, #C7A68A 62%, #D8B9A1 82%, #D1AD91 100%);
  --foil-paper: linear-gradient(115deg, #836044 0%, #947052 20%, #A17E5E 34%,
    #8A664A 50%, #7E5D41 62%, #977351 82%, #8A664A 100%);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hx-b .hx-statement span,
  body section.teacher .kicker,
  body section.teacher .teacher-name,
  body section.teacher .creds strong,
  body .syllabus-title,
  body .syllabus-digit,
  body .final-title em,
  body .final-price {
    background: none; background-image: var(--foil-night);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .hx-b .lk-3 .lk-name,
  .hx-b .lk-3 .lk-key {
    background: none; background-image: var(--foil-paper);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  body .personal-session-badge {
    background: none; background-image: var(--foil-night), none; background-color: #1E2537;
    -webkit-background-clip: text, padding-box; background-clip: text, padding-box;
    -webkit-text-fill-color: transparent;
  }
  .hx-b .hx-statement span,
  body section.teacher .teacher-name,
  body .syllabus-title,
  body .final-price { width: fit-content; margin-inline: auto; }
}

/* ══ Pass of 2026-09-25: a phone's first frame, the hearts give way ══════
   On Tal's Galaxy S23 FE the button ended at the screen's foot and the
   navy's turn to black ran across the first line. Of three ways to make
   room (the seal, the hearts or the text giving way) he chose the hearts,
   and asked that the turn happen across the whole gap between the hearts
   and the text, so it stays gradual. So, on a phone only:
   - the artwork gives way first as the screen gets shorter (at 412x743 it
     is 324px wide instead of 412) and tucks 6% under the copy, so the
     copy begins at the hearts' tips, in the artwork's empty foot;
   - the copy's top padding is the gap, 8% of the visible height (24px to
     64px), and the navy turns black across all of it, on the same eased
     stops as the desktop, solid 4px above the first line;
   - the gap between the sentence and the button closes a little.
   Measured at twelve phones from 360x560 to 430x932: the turn starts at
   the tips and runs 40-60px, is solid 7-9px before the letters, and the
   button ends at least 5% of the screen above its foot. */
@media (max-width: 899px) {
  /* The hearts sit as far below the navy's top edge as הזוגית's letters sit
     above it (Tal). That distance is the seal's bottom padding plus the
     space under הזוגית's letters in their line (.157 of their size, .74 of
     --hx-t); the drawing starts 4px (the panel's padding) plus 7.11% of the
     artwork's height below the edge (the file's own top margin). The
     difference is --dh; the hearts drop by it and the copy's gap shrinks
     by it, so the sentence and the button do not move and the turn to
     black still runs from the hearts' tips to the first line. */
  .hx-b {
    --dh: calc(clamp(8px, calc(var(--vh) * 2.45), 18px) + var(--hx-t) * .116 - 4px
          - .0711 * min(calc(100vw / 1.995), calc(var(--vh) * 31 - 68px)));
  }
  .hx-b .hx-hearts {
    width: min(calc(100% + 2 * var(--hx-pad)), calc((var(--vh) * 31 - 68px) * 1.995));
    margin-bottom: -6%;
    margin-top: var(--dh);
  }
  .hx-b-copy {
    --pt: clamp(24px, calc(var(--vh) * 8), 64px);
    --pg: calc(var(--pt) - var(--dh));
    padding-top: var(--pg);
    background: linear-gradient(180deg,
      rgba(11, 12, 14, 0) calc((var(--pg) - 4px) * 0),
      rgba(11, 12, 14, 0.06) calc((var(--pg) - 4px) * 0.111),
      rgba(11, 12, 14, 0.16) calc((var(--pg) - 4px) * 0.222),
      rgba(11, 12, 14, 0.30) calc((var(--pg) - 4px) * 0.333),
      rgba(11, 12, 14, 0.46) calc((var(--pg) - 4px) * 0.444),
      rgba(11, 12, 14, 0.62) calc((var(--pg) - 4px) * 0.556),
      rgba(11, 12, 14, 0.76) calc((var(--pg) - 4px) * 0.667),
      rgba(11, 12, 14, 0.87) calc((var(--pg) - 4px) * 0.778),
      rgba(11, 12, 14, 0.95) calc((var(--pg) - 4px) * 0.889),
      #0B0C0E calc(var(--pg) - 4px),
      #0B0C0E 100%);
  }
  .hx-b-group { gap: clamp(10px, calc(var(--vh) * 1.8), 14px); }
}

/* ══ Pass of 2026-09-27: the title "זה לא קורס שמלמד איך להרשים" ════════
   One line on a desktop, and on a phone "זה לא קורס שמלמד / איך להרשים".
   Below 360px that left שמלמד alone on a middle line; a step smaller keeps
   it to two. */
@media (max-width: 359px) {
  body .what-get-title { font-size: 29px; }
}
/* The box of two sentences under the title is gone (Tal), and with it the
   space it held. The title's own margin now stacked on the section's grid
   gap and left 51px (31px on a phone) before "אז מה כן?", where the page's
   other titles sit 14-34px above their first line; the grid gap alone is
   the space now (26px, 16px on a phone). */
body .what-get-title { margin-bottom: 0; }
/* The three stay one line each on a phone: the longest, לעשות סדר בראש
   לאורך כל הדרך, wrapped below 375px at 20px. They scale with the width
   there, and are never under 16.5px. */
@media (max-width: 480px) {
  ul.what-get-anchor-trio li { font-size: max(16.5px, min(20px, 5.25vw)); }
}
/* On a phone "אז מה כן?..." takes two lines, and filled greedily it left זה
   at the end of the first ("...עוגן ההתאמה. זה / נותן לך..."); balancing it
   split עוגן / ההתאמה instead. So עוגן ההתאמה is held together and the
   second sentence is one unit: the break falls after the full stop. */
body .what-get-anchor-lead .lead-tail { white-space: nowrap; }

/* ══ Pass of 2026-09-27: the buttons' gold, when they fill ═══════════════
   Tal: the gradient on the three buttons in their selected state. All three
   are gold outlines on the night that fill with the light gold on hover
   (and, on the page's own two, on keyboard focus); the fill is now the same
   foil as the golds on the night. The fill is a surface, not text, so no
   clipping. The form's button is Ravpage's second, hover copy of it,
   reached as the other submit rules reach it.

   A glint also crossed the hero's answer and these fills for a day; Tal
   took it off everywhere. Instead, on the buttons the foil follows the
   pointer (Tal): the fill is two and a half times the button's width, and
   --mx, the pointer's place across the button from 0 to 1, set by the
   script "The buttons' foil follows the pointer", slides it so the bands
   move with the hand, easing over a quarter second. Without a pointer
   (keyboard focus, or before the first move) it sits at the middle. The
   form's button needs !important throughout, against Ravpage's reset of
   every element in its form; --mx is set on .form-shell, outside that
   reset, and inherited. */
.hx-b .hx-cta:is(:hover, :focus-visible),
body :is(section.teacher, section.syllabus) .cta-jump:is(:hover, :focus-visible) {
  background: none; background-image: var(--foil-night);
  background-size: 250% 100%;
  background-repeat: no-repeat;
  background-position: calc((1 - var(--mx, 0.5)) * 100%) 50%;
  transition: background-position 0.25s ease-out, color 0.2s ease;
}
.form-shell .rp-form .ravxx_hover a.submitButton:not(#nope) {
  background-image: var(--foil-night) !important;
  background-size: 250% 100% !important;
  background-repeat: no-repeat !important;
  background-position: calc((1 - var(--mx, 0.5)) * 100%) 50% !important;
  transition: background-position 0.25s ease-out !important;
}

/* ══ Pass of 2026-09-28: כמה זה עולה, the price on the night ═════════════
   Tal: the first 588 read in an ugly, uninviting brown (#886344), and its
   line in an olive one; both take the gold of the 588 at the close, the
   light gold (#D9B89D) with the foil of the golds on the night. On the
   cream that gold measured 1.67:1, so the price gets a night of its own to
   stand on. The line's box shrinks to its words so the bands fall across
   them. Without background-clip:text, the flat light gold. */
body .pricing-line em,
body .pricing-value { color: #D9B89D; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  body .pricing-line em,
  body .pricing-value {
    background: none; background-image: var(--foil-night);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  body .pricing-value { width: fit-content; margin-inline: auto; }
}

/* The plate. Of five ways to soften a flat navy slab, Tal chose the one
   with the hearts in it: the night glows from its middle and the hearts'
   drawing lies in it at 4.5%, felt more than seen. The plate shrinks to the
   price and its line; ::before is the drawing, masked from hearts2-line. */
body .pricing-stack {
  width: fit-content; max-width: 100%; margin-inline: auto;
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(18px, 2.4vw, 28px) clamp(26px, 4vw, 56px) clamp(20px, 2.6vw, 30px);
  background: radial-gradient(ellipse 75% 95% at 50% 42%, #323752 0%, #262C43 42%, #1B2235 100%);
  box-shadow: 0 16px 36px -22px rgba(11, 12, 14, 0.38);
}
body .pricing-stack::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 118%; aspect-ratio: 1200 / 588; left: 50%; top: 50%; translate: -50% -50%;
  background: #D9B89D; opacity: 0.045;
  -webkit-mask: url("hearts2-line.webp") center / contain no-repeat;
          mask: url("hearts2-line.webp") center / contain no-repeat;
}
body .pricing-for { color: rgba(241, 234, 223, 0.86); }

/* The ribbon over the 1:1 softens the same way, a glow from its middle
   instead of one flat navy. The foil stays on its words: the shorthand
   resets the clip, so it is declared again after it. */
body .personal-session-badge {
  background: radial-gradient(ellipse 55% 160% at 50% 50%, #323752 0%, #262C43 50%, #1D2438 100%);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  body .personal-session-badge {
    background: none; background-image: var(--foil-night),
      radial-gradient(ellipse 55% 160% at 50% 50%, #323752 0%, #262C43 50%, #1D2438 100%);
    -webkit-background-clip: text, padding-box; background-clip: text, padding-box;
    -webkit-text-fill-color: transparent;
  }
}

/* The 1:1 card as a ticket (Tal's option 4): a notch in each side and a
   perforated line inside. The notches are cut by a mask, and a mask would
   take the card's shadow with it, so the paper and its edge move to
   ::before and the mask is on that; the card keeps the shadow. A ring in
   the paper draws the notch's edge where the mask cut the border away.
   The line frames the lead and the body only, from under the ribbon, at
   the same distance from every edge; --tk-in is that distance and --tk-r
   the notch.
   On the cream behind it the paper and its 1px edge were near enough the
   page's colour that the notches went unseen. Of three ways out Tal took
   two together: the edge at 2px and a little darker, and the paper warmed
   toward the gold, so the page shows light through the notches. */
body .personal-session {
  --tk-r: 11px;
  --tk-in: 16px;
  --tk-edge: rgba(30, 37, 55, 0.22);
  --tk-bw: 2px;
  /* Seen through the notch, the table lies in the card's shadow: without
     this shade the hole read as a patch lighter than both its sides. */
  background:
    radial-gradient(circle at 0 50%, rgba(30, 37, 55, 0.05), rgba(30, 37, 55, 0.025) var(--tk-r), transparent calc(var(--tk-r) + 1px)),
    radial-gradient(circle at 100% 50%, rgba(30, 37, 55, 0.05), rgba(30, 37, 55, 0.025) var(--tk-r), transparent calc(var(--tk-r) + 1px));
  border: 0;
  isolation: isolate;
}
body .personal-session::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border: var(--tk-bw) solid var(--tk-edge);
  border-radius: 3px;
  background:
    radial-gradient(circle at 0 50%, transparent var(--tk-r), var(--tk-edge) calc(var(--tk-r) + 0.6px),
      var(--tk-edge) calc(var(--tk-r) + var(--tk-bw) + 0.2px), transparent calc(var(--tk-r) + var(--tk-bw) + 0.8px)),
    radial-gradient(circle at 100% 50%, transparent var(--tk-r), var(--tk-edge) calc(var(--tk-r) + 0.6px),
      var(--tk-edge) calc(var(--tk-r) + var(--tk-bw) + 0.2px), transparent calc(var(--tk-r) + var(--tk-bw) + 0.8px)),
    #F1E5D5;
  background-origin: border-box;
  -webkit-mask:
    radial-gradient(circle at 0 50%, transparent var(--tk-r), #000 calc(var(--tk-r) + 0.6px)) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, transparent var(--tk-r), #000 calc(var(--tk-r) + 0.6px)) right / 51% 100% no-repeat;
          mask:
    radial-gradient(circle at 0 50%, transparent var(--tk-r), #000 calc(var(--tk-r) + 0.6px)) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, transparent var(--tk-r), #000 calc(var(--tk-r) + 0.6px)) right / 51% 100% no-repeat;
}
/* The ribbon ends 18px above the stub (its 6px margin and the card's 12px
   gap); the stub's margins put its line --tk-in from the ribbon and from the
   three edges, and its padding puts the text back where it was. */
body .personal-session-stub {
  display: flex; flex-direction: column; gap: 12px;
  margin: calc(var(--tk-in) - 18px) calc(var(--tk-in) - var(--ps-pad-x)) calc(var(--tk-in) - var(--ps-pad-bottom));
  padding: 16px calc(var(--ps-pad-x) - var(--tk-in) - 1px) 18px;
  border: 1px dashed rgba(178, 137, 106, 0.55);
}
@media (max-width: 600px) {
  body .personal-session { --tk-r: 9px; --tk-in: 12px; --ps-pad-x: 26px; }
}

/* ══ Pass of 2026-09-28: the condition on the 1:1, unmissable ════════════
   Tal: many would miss "ובנוסף, לחמשת הנרשמים הראשונים" and think the
   session was theirs. The ribbon now says the condition alone, and says it
   loudest: larger and heavier than the headline under it, which steps down
   a size. "ובנוסף" went with it: "and also" reads as included for all,
   the very misreading. The body ends on the condition too, since "והיא
   כלולה במחיר" promised the session to everyone. Its measure widens so the
   longer sentence stays at two lines on a desktop. */
body .personal-session-badge {
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.35;
  padding: 15px 18px 16px;
}
body .personal-session-lead { font-size: clamp(19px, 1.8vw, 22px); text-wrap: balance; }
body .personal-session-body { max-width: 940px; text-wrap: balance; }

/* The ribbon's night takes the price plate's drawing, as faint and at the
   same size: the plate's drawing is 118% of a plate about 700px wide on a
   desktop, and the full width on a phone, where plate and ribbon are one
   width. The ribbon is wider than the drawing on a desktop, so the drawing
   repeats out to its ends. The drawing paints over the ribbon's foil words
   as well (the foil is the ribbon's own background, under any child), but
   at 4.5% of the same gold it leaves them as they were. */
body .personal-session-badge { position: relative; isolation: isolate; overflow: hidden; }
body .personal-session-badge::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset-inline: 0; height: 420px; top: 50%; translate: 0 -50%;
  background: #D9B89D; opacity: 0.045;
  -webkit-mask: url("hearts2-line.webp") center / min(118%, 830px) auto repeat-x;
          mask: url("hearts2-line.webp") center / min(118%, 830px) auto repeat-x;
}
/* ══ אומנות הבחירה בזוגיות, 2026-10-22 ══════════════════════════════════
   The course was renamed, and no single word of the new name should
   outrank the others, so the graded תורת / ההתאמה / הזוגית stack is gone.
   The three words now sit equal inside a double gold frame, light and
   tracked wide, all three in the paper foil. טל סרן gives the foil up and
   goes to ink, so the gold belongs to the course's name alone. */
.hx-b .lk-3 .lk-name {
  background: none; -webkit-text-fill-color: currentColor;
  color: var(--hx-ink);
}
.hx-b .lk-3 .lk-words {
  display: flex; flex-direction: column; align-items: center;
  border: 1.5px solid var(--hx-gold-deep);
  outline: 1px solid rgba(136, 99, 68, .45); outline-offset: 6px;
  padding: .26em .42em .3em;
  font-size: .765em; font-weight: 300; line-height: 1.25; letter-spacing: .14em;
}
.hx-b .lk-3 .lk-words > span {
  font-size: 1em; line-height: 1.25; letter-spacing: .14em;
  /* Tracking lands on the visual right of each letter (see קורס), so
     the left edge takes the same amount to keep each word centred. */
  padding-left: .14em;
  color: var(--hx-gold-deep);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hx-b .lk-3 .lk-words > span {
    background: none; background-image: var(--foil-paper);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
/* ══ The infinity marks, 2026-10-22 ══════════════════════════════════
   The diamond under the name becomes an infinity mark, and the same mark
   breaks the top of the frame around the course's name: both lines of the
   frame are cut 12px either side of it, as the rule is, and it sits midway
   between them. The frame's lines move from border and outline onto two
   pseudo-elements so they can be cut; their outer edges are where the
   outline's were, so the alignment script's 7px still holds. */
.hx-b { --inf-w: 28.8px; }
.hx-b .lk-3 .lk-orn i,
.hx-b .lk-3 .lk-frame-orn {
  width: var(--inf-w); height: calc(var(--inf-w) / 2);
  border: 0; transform: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M12 6C9.5 2.4 4.2 2 4.2 6s5.3 3.6 7.8 0 7.8-4 7.8 0-5.3 3.6-7.8 0z' fill='none' stroke='%23886344' stroke-width='1.333'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* On a phone the marks are 30% smaller (Tal); the stroke is redrawn so
   it stays 1.6px, as on a desktop. */
@media (max-width: 899px) {
  .hx-b { --inf-w: 20.16px; }
  .hx-b .lk-3 .lk-orn i,
  .hx-b .lk-3 .lk-frame-orn { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M12 6C9.5 2.4 4.2 2 4.2 6s5.3 3.6 7.8 0 7.8-4 7.8 0-5.3 3.6-7.8 0z' fill='none' stroke='%23886344' stroke-width='1.905'/%3E%3C/svg%3E") center / contain no-repeat; }
}
.hx-b .lk-3 .lk-words { position: relative; outline: 0; border-color: transparent; }
.hx-b .lk-3 .lk-words::before,
.hx-b .lk-3 .lk-words::after {
  content: ""; position: absolute; pointer-events: none;
  --cut: linear-gradient(to right, #000 calc(50% - 12px - var(--inf-w) / 2),
           transparent 0 calc(50% + 12px + var(--inf-w) / 2), #000 0) top / 100% 14px no-repeat,
         linear-gradient(#000 0 0) bottom / 100% calc(100% - 14px) no-repeat;
  -webkit-mask: var(--cut); mask: var(--cut);
}
.hx-b .lk-3 .lk-words::before { inset: -8.5px; border: 1px solid rgba(136, 99, 68, .45); }
.hx-b .lk-3 .lk-words::after { inset: -1.5px; border: 1.5px solid var(--hx-gold-deep); }
.hx-b .lk-3 .lk-frame-orn {
  position: absolute; left: 50%; top: -4.4px;
  translate: -50% -50%;
}

/* The hero's sentence a step lighter (Tal, 2026-10-23): at 800 it matched
   טל סרן and outweighed the light framed name across the seam. */
.hx-b .hx-statement { font-weight: 700; }

/* On a desktop קורס is half again as large (Tal). The frame keeps its
   bottom on the sentence's baseline, so it gives up the height at its top. */
@media (min-width: 900px) {
  .hx-b .lk-3 .lk-label { font-size: calc(.345em * 1.5); margin-bottom: .6em; }
  /* Two words at the old .42em tracking ran half again wider than the
     frame; .14em brings the seal's two words to the frame's width. */
  .hx-b .lk-3 .lk-label { letter-spacing: .14em; }
}

/* The line that opens מה משתנה כשיודעים לבחור (was עם מה תצא מהקורס): who the course is for, and why
   from Tal. Hairlines either side on a desktop; on a phone they would push
   it onto a third line, so it sits bare and balanced. */
.insights-head .insights-for {
  display: flex; align-items: center; justify-content: center; gap: .8em;
  margin: 0 auto 1.1em; text-align: center; max-width: none;
  font-family: 'Heebo', var(--sans); font-weight: 500;
  font-size: clamp(17px, 1.5vw, 22px); color: var(--hx-gold-deep, #886344);
}
.insights-head .insights-for::before,
.insights-head .insights-for::after { content: ""; width: 3em; height: 1px; background: currentColor; opacity: .5; }
@media (max-width: 899px) {
  .insights-head .insights-for { display: block; font-size: 15px; max-width: 20em; text-wrap: balance; }
  .insights-head .insights-for::before,
  .insights-head .insights-for::after { display: none; }
}
/* On a phone the framed name is a step smaller and tighter, and the whole
   first screen gives way to height a little sooner (--hx-t and the
   sentence), so the button stands whole with 26-38px of air under it on
   every phone from 320x568 to 430x830. */
@media (max-width: 899px) {
  .hx-b { --hx-t: clamp(28px, min(13.6vw, calc(var(--vh) * 8.8 - 14px)), 64px); }
  .hx-b .hx-statement { font-size: clamp(23px, min(8.3vw, calc(var(--vh) * 4.45)), 38px); }
  .hx-b .lk-3 .lk-label { margin-bottom: .75em; }
  .hx-b .lk-3 .lk-words { font-size: .64em; padding: .24em .5em .28em; }
  .hx-b .lk-3 .lk-words > span { line-height: 1.16; }
  /* Tal, later: the course's name half again as large (קורס and the
     frame together), paid for by the hearts, which keep .63 of their
     height-led width (--hs; --dh is restated with it, since the drop to
     the black is measured off the drawing's height), and by the sentence,
     about .85 of its size. The button keeps 27-40px under it from
     320x568 to 430x830. */
  .hx-b {
    --hs: .63;
    --dh: calc(clamp(8px, calc(var(--vh) * 2.45), 18px) + var(--hx-t) * .116 - 4px
          - .0711 * var(--hs) * min(calc(100vw / 1.995), calc(var(--vh) * 31 - 68px)));
  }
  .hx-b .hx-hearts {
    width: calc(var(--hs) * min(calc(100% + 2 * var(--hx-pad)), calc((var(--vh) * 31 - 68px) * 1.995)));
  }
  .hx-b .hx-statement { font-size: clamp(20px, min(7.1vw, calc(var(--vh) * 3.8)), 32px); }
  .hx-b .lk-3 .lk-label { font-size: .5175em; }
  .hx-b .lk-3 .lk-words { font-size: .96em; }
}

/* The hero's white sentence grew to two full lines (Tal, 2026-10-23).
   Where the type is width-led its second line would wrap, so the size is
   also capped by the width: the white keeps to two lines and the gold
   pair (.89em of it) shrinks with it, so the white always stays the
   larger of the two. Where the type is height-led nothing changes.
   The caps sit a few percent under the measured two-line limits of the
   line in use (for "מה צריך כדי להגיע לזוגיות טובה?": 3.1vw on a
   desktop, about 7.3vw - 4.4px on a phone). Re-measure them whenever the
   sentence changes. */
.hx-b .hx-statement { font-size: min(clamp(30px, min(3.7vw, 6.3vh), 58px), var(--hx-wcap, 2.9vw)); }
@media (max-width: 899px) {
  .hx-b .hx-statement { font-size: min(clamp(20px, min(7.1vw, calc(var(--vh) * 3.8)), 32px), var(--hx-wcap, calc(7.05vw - 4.2px))); }
}

/* "כאן נלמד אותה." in the sentence's white (Tal, 2026-10-23), so "זאת
   אומנות." is left the one gold line. It keeps the gold's size, a short
   pause above it, smaller than the step from the white to the gold, so
   the two still read as one answer. Its own fill colour, because the
   span's foil is clipped to every glyph inside it. The alignment script
   measures this line's baseline: a marker after a block child would sit
   on a new line below it. */
.hx-b .hx-statement .hx-teach {
  display: block; font-style: normal; margin-top: .35em;
  color: #F1EADF; -webkit-text-fill-color: #F1EADF;
}