/* AllArounder — product landing page additions: the consultation form, the
   before/after demonstration cards, the fit grid, and the thank-you page.

   Loaded AFTER /assets/css/style.css and /assets/lp-service-night.css. It ADDS the
   components those two do not have and overrides nothing they define, so the existing
   four service LPs are untouched. Every rule is scoped under .lp-night for the same
   reason lp-service-night.css is: the base stylesheet already owns generic class names
   like .reveal, .step and .btn-ghost.

   RTL: written with logical properties (inline-start/end, padding-inline) so the page
   mirrors correctly. Do not reintroduce left/right here.

   Colour: tokens only, from the :root block in style.css. Body text sits on --cream-soft
   or --cream over --void-2/--void-3, and labels use --cream-label (a solid value chosen
   to clear 4.5:1 on those backgrounds) rather than a low-alpha cream, because a
   translucent label over a gradient has no single measurable contrast ratio. */

/* ── hero microcopy under the CTA row ────────────────────────────────────── */
.lp-night .hero-microcopy{margin-top:16px;font-size:14px;color:var(--cream-label);line-height:1.6}

/* ── before / after demonstration cards ──────────────────────────────────── */
/* Noam asked for product 2 to be explained "כמו להסביר לילד". A benefit bullet cannot
   do that; a literal today-vs-after pair can, so this component always renders both
   halves and the arrow between them. */
.lp-night .demo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:28px 0}
.lp-night .demo-card{background:var(--void-2);border:1px solid var(--void-4);border-radius:14px;padding:22px}
.lp-night .demo-title{font-size:16px;font-weight:800;color:var(--gold-bright);margin-bottom:16px}
.lp-night .demo-row{display:flex;gap:10px;align-items:flex-start}
.lp-night .demo-row p{font-size:15px;line-height:1.65;margin:0;color:var(--cream-mute)}
.lp-night .demo-after p{color:var(--cream)}
/* min-width, not width: the two labels render at different natural widths, which pushed
   the two paragraphs to different start edges in a card whose whole job is comparing
   them. Equal pills align both paragraphs AND make the arrow's hidden pill exact. */
.lp-night .demo-tag{flex-shrink:0;min-width:58px;text-align:center;font-size:11px;font-weight:800;letter-spacing:.04em;padding:3px 10px;border-radius:20px;background:rgba(245,240,232,.07);color:var(--cream-label);border:1px solid var(--void-5);margin-top:2px}
.lp-night .demo-tag-on{background:rgba(200,169,110,.14);color:var(--gold-bright);border-color:rgba(200,169,110,.4)}
/* The arrow mirrors a demo-row: a hidden pill holds the tag column open, so flex:1 on
   the mark is exactly the paragraph column and centring inside it lands the arrow on
   the text's centre instead of the card's. No magic offset to drift out of sync. */
.lp-night .demo-arrow{display:flex;gap:10px;align-items:center;margin:10px 0}
.lp-night .demo-tag-ghost{visibility:hidden}
.lp-night .demo-arrow-mark{flex:1;text-align:center;color:var(--gold);font-size:19px;line-height:1}

/* ── who this is for / not for ───────────────────────────────────────────── */
/* Saying who it is NOT for is doing conversion work, not losing leads: it is the cheapest
   way to stop a 30-minute call that was never going to fit. */
.lp-night .fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:28px 0}
.lp-night .fit-col{border-radius:14px;padding:26px}
.lp-night .fit-yes{background:linear-gradient(135deg,var(--void-3),var(--void-4));border:1px solid rgba(200,169,110,.4)}
.lp-night .fit-no{background:rgba(245,240,232,.04);border:1px solid var(--void-4)}
.lp-night .fit-col h3{font-size:16px;font-weight:800;margin-bottom:16px}
.lp-night .fit-yes h3{color:var(--gold-bright)}
.lp-night .fit-no h3{color:var(--cream-label)}
.lp-night .fit-col ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.lp-night .fit-col li{font-size:15px;line-height:1.6;display:flex;gap:10px;align-items:flex-start}
.lp-night .fit-yes li{color:var(--cream-soft)}
.lp-night .fit-yes li::before{content:'✓';color:var(--gold);font-weight:800;flex-shrink:0}
.lp-night .fit-no li{color:var(--cream-label)}
.lp-night .fit-no li::before{content:'-';color:var(--cream-faint);flex-shrink:0}

/* ── the consultation form ───────────────────────────────────────────────── */
.lp-night .consult-block{scroll-margin-top:88px}
.lp-night .consult-card{background:linear-gradient(168deg,var(--void-3),var(--void-2));border:1px solid rgba(200,169,110,.32);border-radius:18px;padding:34px;box-shadow:0 30px 70px -34px rgba(0,0,0,.75)}
.lp-night .consult-head{margin-bottom:26px}
.lp-night .consult-badge{display:inline-block;background:rgba(200,169,110,.12);border:1px solid rgba(200,169,110,.34);color:var(--gold-bright);font-size:12px;font-weight:700;padding:5px 16px;border-radius:20px;margin-bottom:16px}
.lp-night .consult-card h2{font-size:clamp(22px,3vw,30px);font-weight:900;color:var(--cream);line-height:1.22;margin-bottom:12px}
.lp-night .consult-card h2 em{color:var(--gold);font-style:normal}
.lp-night .consult-sub{font-size:16px;color:var(--cream-soft);line-height:1.7;margin-bottom:18px}
.lp-night .consult-promise{list-style:none;display:flex;flex-direction:column;gap:9px;margin:0}
.lp-night .consult-promise li{font-size:15px;color:var(--cream-soft);line-height:1.6;display:flex;gap:10px;align-items:flex-start}
.lp-night .consult-promise li::before{content:'✓';color:var(--gold);font-weight:800;flex-shrink:0}
/* The disqualification promise. It is the real fear remover on this form, because the fear is
   not "they will sell to me", it is "they will sell to me even when it is wrong for me and I
   will not be able to tell". So it gets its own visual weight, separated from the agenda. */
.lp-night .consult-disqualify{margin-top:16px;padding-top:16px;border-top:1px solid var(--void-4);font-size:15px;color:var(--cream);line-height:1.7}
.lp-night .consult-disqualify strong{color:var(--gold-bright)}

.lp-night .consult-form{display:flex;flex-direction:column;gap:16px}
.lp-night .cf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lp-night .cf-field{display:flex;flex-direction:column;gap:7px}
.lp-night .cf-label{font-size:14px;font-weight:700;color:var(--cream)}
.lp-night .cf-req{color:var(--gold)}
.lp-night .cf-hint{font-size:13px;color:var(--cream-label);line-height:1.5}
.lp-night .consult-form input[type=text],
.lp-night .consult-form input[type=tel],
.lp-night .consult-form input[type=email],
.lp-night .consult-form textarea{
  width:100%;background:var(--void);border:1px solid var(--void-5);border-radius:11px;
  padding:13px 15px;font-family:inherit;font-size:16px; /* 16px: anything smaller makes iOS Safari zoom on focus */
  color:var(--cream);line-height:1.5;transition:border-color .18s,box-shadow .18s}
.lp-night .consult-form textarea{resize:vertical;min-height:88px}
.lp-night .consult-form ::placeholder{color:var(--cream-faint)}
.lp-night .consult-form input:focus,
.lp-night .consult-form textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,169,110,.22)}
/* Keyboard users must still see a ring even where the browser suppresses :focus styles. */
.lp-night .consult-form input:focus-visible,
.lp-night .consult-form textarea:focus-visible,
.lp-night .cf-submit:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px}
.lp-night .consult-form input:invalid:not(:placeholder-shown){border-color:rgba(214,120,96,.6)}

.lp-night .cf-check{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--cream-soft);line-height:1.6;cursor:pointer}
.lp-night .cf-check input{width:19px;height:19px;flex-shrink:0;margin-top:2px;accent-color:var(--gold);cursor:pointer}

/* Honeypot. Kept off-screen rather than display:none, because some bots skip
   display:none fields and a genuinely hidden input is what we want them to fill. */
.lp-night .cf-hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.lp-night .cf-turnstile{min-height:0}
.lp-night .cf-submit{align-self:flex-start;border:none;cursor:pointer;font-family:inherit}
.lp-night .cf-submit[disabled]{opacity:.62;cursor:progress}
.lp-night .cf-legal{font-size:13px;color:var(--cream-label);line-height:1.6;margin:0}
.lp-night .cf-legal a{color:var(--gold-bright);text-decoration:underline}
.lp-night .cf-error{background:rgba(214,120,96,.12);border:1px solid rgba(214,120,96,.5);border-radius:11px;padding:13px 16px;font-size:15px;color:#F2CFC4;line-height:1.6}

/* ── thank-you page ──────────────────────────────────────────────────────── */
.lp-night .thanks-hero{background:linear-gradient(168deg,var(--void) 0%,var(--void-2) 58%,#16210f 100%);padding:76px 40px 64px;position:relative;overflow:hidden;text-align:center}
.lp-night .thanks-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 700px 420px at 50% 110%,var(--gold-glow),transparent 70%);pointer-events:none}
.lp-night .thanks-inner{max-width:660px;margin:0 auto;position:relative;z-index:1}
.lp-night .thanks-check{width:66px;height:66px;border-radius:50%;background:rgba(122,158,108,.16);border:2px solid rgba(200,169,110,.42);color:var(--gold-bright);display:flex;align-items:center;justify-content:center;margin:0 auto 22px}
.lp-night .thanks-hero h1{font-size:clamp(27px,4.4vw,44px);font-weight:900;color:var(--cream);line-height:1.16;margin-bottom:16px}
.lp-night .thanks-hero h1 em{color:var(--gold);font-style:normal}
.lp-night .thanks-hero .hero-sub{margin:0 auto 30px;text-align:center}
.lp-night .thanks-next{background:var(--void-2);border:1px solid var(--void-4);border-radius:14px;padding:22px 26px;text-align:start}
.lp-night .thanks-next-title{font-size:13px;font-weight:800;color:var(--gold);letter-spacing:.05em;margin-bottom:12px}
.lp-night .thanks-next ol{margin:0;padding-inline-start:20px;display:flex;flex-direction:column;gap:9px}
.lp-night .thanks-next li{font-size:15px;color:var(--cream-soft);line-height:1.65}
.lp-night .thanks-wa{margin-top:20px;font-size:15px;color:var(--cream-label);line-height:1.6}
.lp-night .thanks-wa a{color:var(--gold-bright);font-weight:700;text-decoration:underline}

/* ── blog invitation cards ───────────────────────────────────────────────── */
/* auto-fit, not a fixed 3: the old rule paired repeat(3,1fr) with a jump to ONE
   column below 900px, which was harmless until these cards gained a 3:2 thumbnail.
   At 768px that single column made every thumbnail 726x484 - a tablet screen of
   mostly image. auto-fit lands 3 / 2 / 1 by the width actually available, and
   leaves desktop byte-identical (still 3 columns at 247px). */
.lp-night .read-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:28px 0}
.lp-night .read-card{display:flex;flex-direction:column;gap:9px;background:var(--void-2);border:1px solid var(--void-4);border-radius:14px;padding:0 0 20px;overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s}
/* The thumbnail is DECORATIVE: alt="" on purpose. It carries no information the
   heading beneath it does not already give, and announcing an abstract watercolour to
   a screen reader adds noise, not access. Fixed aspect box so a slow image cannot
   reflow the card under someone mid-read. */
/* height:auto is load-bearing. The <img> carries width/height attributes for CLS,
   and the height attribute becomes a real CSS height:320px, so with BOTH dimensions
   resolved the aspect-ratio below is ignored entirely - every thumbnail rendered
   247x320, a portrait crop of a 720x480 landscape master, at every width. Reading
   the rule and seeing aspect-ratio:3/2 is not evidence it applied; the box was. */
.lp-night .read-thumb{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;
  background:var(--void-3);border-block-end:1px solid var(--void-4);
  transition:transform .35s cubic-bezier(.22,.7,.3,1)}
.lp-night .read-card:hover .read-thumb{transform:scale(1.04)}
.lp-night .read-card>h3,.lp-night .read-card>p,.lp-night .read-card>.read-more{margin-inline:20px}
.lp-night .read-card>h3{margin-block-start:16px}
@media (prefers-reduced-motion:reduce){.lp-night .read-card:hover .read-thumb{transform:none}}
.lp-night .read-card:hover{transform:translateY(-3px);border-color:rgba(200,169,110,.4);box-shadow:0 18px 44px -22px rgba(0,0,0,.72)}
.lp-night .read-card h3{font-size:16px;font-weight:800;color:var(--cream);line-height:1.35;margin:0}
.lp-night .read-card p{font-size:14px;color:var(--cream-mute);line-height:1.6;margin:0;flex:1}
.lp-night .read-more{font-size:13px;font-weight:800;color:var(--gold-bright)}
.lp-night .read-more::after{content:' ←'}
.lp-night .read-all{text-align:center;font-size:15px}
.lp-night .read-all a{color:var(--gold-bright);font-weight:700;text-decoration:underline}

/* ── the boundary block (who this is NOT for, stated first) ──────────────── */
/* Deliberately quiet rather than alarming: this is a page saying something true about its own
   limits, not a warning banner. A red-alert treatment would read as a conversion trick, which
   is the exact thing the block exists to not be. */
.lp-night .boundary-card{background:rgba(245,240,232,.04);border:1px solid var(--void-5);border-inline-start:4px solid var(--cream-faint);border-radius:0 16px 16px 0;padding:28px 30px}
.lp-night .boundary-label{font-size:12px;font-weight:800;color:var(--cream-label);letter-spacing:.07em;margin-bottom:12px}
.lp-night .boundary-card h2{font-size:clamp(20px,2.6vw,27px);margin-bottom:18px}
.lp-night .boundary-list{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.lp-night .boundary-list li{font-size:16px;color:var(--cream-mute);line-height:1.7;display:flex;gap:11px;align-items:flex-start}
.lp-night .boundary-list li::before{content:'-';color:var(--cream-faint);flex-shrink:0}
.lp-night .boundary-after{font-size:16px;color:var(--cream);line-height:1.75;margin:0;padding-top:18px;border-top:1px solid var(--void-4)}

/* ── the instrument (self-diagnostic that returns a reading) ─────────────── */
.lp-night .instrument-card{background:linear-gradient(168deg,var(--void-3),var(--void-2));border:1px solid rgba(200,169,110,.3);border-radius:18px;padding:32px}
.lp-night .instrument-label{font-size:12px;font-weight:800;color:var(--gold);letter-spacing:.07em;margin-bottom:12px}
.lp-night .instrument-card h2{font-size:clamp(21px,2.8vw,29px);margin-bottom:12px}
.lp-night .instrument-prompt{font-size:16px;color:var(--cream-soft);line-height:1.7;margin-bottom:22px}
.lp-night .instrument-items{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px}
.lp-night .instrument-item{display:flex;gap:11px;align-items:flex-start;background:var(--void);border:1px solid var(--void-4);border-radius:11px;padding:13px 15px;cursor:pointer;transition:border-color .18s,background .18s}
.lp-night .instrument-item:hover{border-color:rgba(200,169,110,.36)}
.lp-night .instrument-item:has(input:checked){border-color:var(--gold);background:rgba(200,169,110,.09)}
.lp-night .instrument-item input{width:18px;height:18px;flex-shrink:0;margin-top:2px;accent-color:var(--gold);cursor:pointer}
.lp-night .instrument-item-text{flex:1;font-size:15px;color:var(--cream-soft);line-height:1.5}
.lp-night .instrument-item-weight{flex-shrink:0;font-size:12px;font-weight:700;color:var(--cream-label);white-space:nowrap;margin-top:2px}
.lp-night .instrument-readout{border-top:1px solid var(--void-4);padding-top:22px}
.lp-night .instrument-empty{font-size:15px;color:var(--cream-label);line-height:1.65;margin:0}
.lp-night .instrument-number{font-size:clamp(36px,6vw,56px);font-weight:900;color:var(--gold-bright);line-height:1.05}
.lp-night .instrument-number small{font-size:16px;font-weight:600;color:var(--sage-soft)}
.lp-night .instrument-line{font-size:17px;color:var(--cream);line-height:1.7;margin:12px 0 0}
.lp-night .instrument-math{font-size:13px;color:var(--cream-label);line-height:1.6;margin:14px 0 0}

/* ── the pre-call question on the thank-you page ─────────────────────────── */
/* Ogilvy's correction to the brief: right after booking, the two highest-value jobs are cutting
   the no-show and pre-framing the call. A blog link as the primary action spends the highest
   intent moment in the funnel on a page view. So this sits above the reading list. */
.lp-night .precall{max-width:660px;margin:26px auto 0;background:var(--void-2);border:1px solid rgba(200,169,110,.28);border-radius:14px;padding:24px 26px;text-align:start}
.lp-night .precall-title{font-size:16px;font-weight:800;color:var(--cream);margin-bottom:7px}
.lp-night .precall-why{font-size:14px;color:var(--cream-label);line-height:1.6;margin-bottom:14px}
.lp-night .precall textarea{width:100%;background:var(--void);border:1px solid var(--void-5);border-radius:11px;padding:12px 14px;font-family:inherit;font-size:16px;color:var(--cream);line-height:1.5;resize:vertical;min-height:78px}
.lp-night .precall textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,169,110,.22)}
.lp-night .precall textarea:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px}
.lp-night .precall-actions{display:flex;gap:12px;align-items:center;margin-top:13px;flex-wrap:wrap}
.lp-night .precall-send{border:none;cursor:pointer;font-family:inherit;padding:11px 24px;font-size:15px}
.lp-night .precall-state{font-size:14px;line-height:1.6;margin:0}
.lp-night .precall-state.ok{color:var(--sage-soft)}
.lp-night .precall-state.err{color:#F2CFC4}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .lp-night .demo-grid,
  .lp-night .fit-grid,
  .lp-night .cf-row,
  .lp-night .instrument-items{grid-template-columns:1fr}
  .lp-night .consult-card,
  .lp-night .instrument-card{padding:24px 20px}
  .lp-night .boundary-card{padding:22px 20px}
  .lp-night .precall{padding:20px}
  .lp-night .thanks-hero{padding:56px 20px 48px}
  .lp-night .cf-submit{align-self:stretch;justify-content:center;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  .lp-night .read-card,.lp-night .do-card{transition:none}
  .lp-night .read-card:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   VISUAL PASS (2026-08-19, Nave: "יותר מירכוז וסימטריה, עמודים יותר מעניינים
   ועם יותר גרפיקות"). Three things: centre the section furniture, add real
   painted decoration, and give the page a vertical rhythm instead of a stack
   of identical text blocks.

   BLEND-MODE DEVIATION FROM DESIGN.md, stated because it is deliberate, and
   MEASURED rather than reasoned. DESIGN.md specifies multiply for decorative
   watercolor. Multiply DARKENS, which is right on the cream surfaces that rule
   was written for and wrong here: these pages run the Night theme on #1e2d1a,
   where a cream watercolor under multiply resolves to nothing at all.

   `screen` alone is not the fix either. Every one of our watercolors is painted
   on a CREAM PAPER GROUND, and screen lifts that whole ground to near-white --
   a bright panel with dark leaves punched out of it, the exact inverse of what
   the art is. So the paint is inverted FIRST (cream ground -> near-black, which
   screens to nothing) and the hue rotated back 180deg (invert also flips hue,
   so this restores the olive). The leaves then glow as light foliage on the
   dark ground and the gradient's depth survives.

   Picked by rendering all eight candidates against the real --void #1e2d1a and
   looking: luminosity and soft-light both flatten the panel to grey-green,
   plain screen at .13 is invisible on the band art. Test card + captures:
   scratchpad/preview-site/blend-test.html.
   Every other half of the rule is kept: codex watercolor assets only, no
   hand-drawn SVG, soft mask fade so there is never a hard rectangle edge, and
   repeated art as a CSS background rather than a repeated <img src>.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── centring: the furniture, never the body copy ────────────────────────── */
/* DESIGN.md: "Don't center-align body text (only suitable for hero super-short
   lines)". So headings, eyebrows and section leads centre; card bodies and list
   items stay start-aligned where the eye needs a reading edge. */
.lp-night .hero-inner{text-align:center}
.lp-night .hero-breadcrumb{justify-content:center}
.lp-night .hero-sub{margin-inline:auto;text-align:center}
.lp-night .hero-cta-row{justify-content:center}
.lp-night .hero-microcopy{text-align:center}

.lp-night .block>h2{text-align:center;max-inline-size:22ch;margin-inline:auto}
.lp-night .block>p.lead{text-align:center;max-inline-size:62ch;margin-inline:auto}
.lp-night .answer-box .label{text-align:center}

/* The "בקצרה" box as a flow rather than a paragraph (Nave 2026-08-20). An <ol> so the
   order is real structure, not just visual: an answer engine and a screen reader both
   get the sequence. Numbers come from a counter, so a step can be added or removed
   without renumbering anything by hand. */
.lp-night .answer-lead{text-align:center;max-inline-size:58ch;margin:0 auto 18px}
.lp-night .answer-flow{list-style:none;counter-reset:aflow;display:flex;align-items:stretch;gap:26px;margin:0;padding:0}
.lp-night .answer-flow li{counter-increment:aflow;position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;padding:16px 12px;background:var(--void-2);border:1px solid var(--void-4);border-radius:14px}
.lp-night .answer-flow li::before{content:counter(aflow);flex-shrink:0;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;background:rgba(200,169,110,.14);color:var(--gold-bright);border:1px solid rgba(200,169,110,.4)}
.lp-night .answer-flow-text{font-size:14px;line-height:1.55;color:var(--cream)}
/* The connector sits INSIDE the 26px gap, anchored to the card it leaves. inline-END is
   the side facing the next card in both directions, so the arrow never lands outside the
   row and cannot widen it - the failure mode a previous connector here actually caused. */
.lp-night .answer-flow li:not(:last-child)::after{content:'\2190';position:absolute;inset-inline-end:-26px;top:50%;transform:translateY(-50%);width:26px;text-align:center;color:var(--gold);font-size:17px;line-height:1}
@media (max-width:760px){
  .lp-night .answer-flow{flex-direction:column;gap:22px}
  .lp-night .answer-flow li:not(:last-child)::after{inset-inline-end:auto;inset-inline-start:50%;top:auto;bottom:-22px;transform:translateX(-50%) rotate(-90deg)}
}
.lp-night .answer-note{text-align:center;max-inline-size:58ch;margin:18px auto 0;font-size:14px;color:var(--cream-mute)}

/* Pain cards: the bold lead is a real heading, the rest floats (Nave 2026-08-20). The
   panel sits on its own slightly lighter surface and lifts on hover, so the motion is a
   response to the reader rather than ambient animation - the same restraint the sticky
   CTA follows. transform + box-shadow only: both are compositor properties, so the lift
   cannot reflow the card or nudge the text underneath it. */
/* FAQ (Nave 2026-08-20: smaller box, lines across its full width). The answers were
   using 59% of the box - measured, not guessed - because the centring block above caps
   `.block p` at 62ch and centres it, and an FAQ answer is a `.block p`. Inside a box that
   is already narrow, that cap buys nothing and costs a lot of extra lines. text-align:start
   (not `right`) so the same rule stays correct if a page is ever rendered LTR. */
.lp-night .faq{gap:10px}
.lp-night .faq details{padding:2px 18px}
.lp-night .faq summary{padding:13px 0;font-size:15px}
.lp-night .faq details p{max-inline-size:none;margin-inline:0;text-align:start;line-height:1.7;padding:0 0 15px}

/* "מי אנחנו" below the form - sitewide copy, so it reads as the site talking, not the
   landing page selling. Deliberately quieter than the sections above it. */
.lp-night .about-block{max-inline-size:64ch;margin-inline:auto}
.lp-night .about-lead{font-size:17px;font-weight:700;color:var(--cream)}
.lp-night .about-body{color:var(--cream-mute)}
.lp-night .about-cta{margin-top:14px}
.lp-night .about-cta a{color:var(--gold-bright);text-decoration:underline;text-underline-offset:4px}

.lp-night .pain-head{margin:0 0 10px;font-size:16px;font-weight:800;line-height:1.4;color:var(--gold-bright)}
.lp-night .pain-body{margin:0;padding:12px 14px;border-radius:12px;background:rgba(245,240,232,.035);border:1px solid rgba(245,240,232,.06);font-size:15px;line-height:1.65;color:var(--cream-mute);transition:transform .22s ease,box-shadow .22s ease,background .22s ease}
.lp-night .pain-card:hover .pain-body,
.lp-night .pain-card:focus-within .pain-body{transform:translateY(-3px);background:rgba(245,240,232,.06);box-shadow:0 10px 22px -12px rgba(0,0,0,.55)}
@media (prefers-reduced-motion:reduce){
  .lp-night .pain-body{transition:none}
  .lp-night .pain-card:hover .pain-body,
  .lp-night .pain-card:focus-within .pain-body{transform:none}
}

.lp-night .instrument-card>.instrument-label,
.lp-night .instrument-card>h2,
.lp-night .instrument-card>.instrument-prompt,
.lp-night .consult-head{text-align:center}
.lp-night .instrument-card>h2{max-inline-size:24ch;margin-inline:auto}
.lp-night .instrument-card>.instrument-prompt{max-inline-size:56ch;margin-inline:auto}
.lp-night .consult-head .consult-sub{margin-inline:auto;max-inline-size:56ch}
/* The promise list and the disqualification line keep a reading edge: a centred
   ragged list of different-length lines reads as decoration, not as terms. */
.lp-night .consult-promise{max-inline-size:52ch;margin-inline:auto;text-align:start}
.lp-night .consult-disqualify{max-inline-size:60ch;margin-inline:auto;text-align:start}
.lp-night .cf-submit{align-self:center}
.lp-night .cf-legal{text-align:center;max-inline-size:56ch;margin-inline:auto}

/* Symmetry: an odd last row in a 2-up grid centres instead of hanging left. */
.lp-night .do-grid,.lp-night .demo-grid,.lp-night .pain-grid{justify-content:center}
.lp-night .do-grid>:last-child:nth-child(odd),
.lp-night .pain-grid>:last-child:nth-child(odd){grid-column:1 / -1;max-inline-size:min(100%,520px);margin-inline:auto}

/* ── painted decoration ────────────────────────────────────────────
   Each page carries ONE artwork, generated for THAT product's subject
   (Nave 2026-08-19: no olive leaves; graphics that fit the content, new).
   The shared olive-branch watercolor set is deliberately absent here — not
   unused by accident. If you are adding a block here and reach for the shared
   watercolor folder, that is the thing this note exists to stop.

   Why the earlier invert+hue-rotate treatment is gone: it existed only to
   rescue CREAM-ground stock art on a dark theme (invert to kill the paper,
   rotate the hue back to undo invert's colour flip). The new art is painted
   on a dark ground to begin with, so `screen` needs no correction — the
   ground contributes almost nothing and only the painted light lifts off.

   One artwork per page, three placements, never repeating the same crop:
   hero takes the top of the image, the closing band takes the bottom and
   mirrors it, the thank-you page takes the centre.
   ──────────────────────────────────────────────────────────────────── */

/* Every decorated block clips its own bleed. `clip` not `hidden`: hidden would
   also cut vertical overlap, and in RTL a negative inline inset otherwise
   inflates document width and pushes the headline off the right edge. */
.lp-night .hero,
.lp-night .cta-band,
.lp-night .consult-block,
.lp-night .thanks-hero{overflow-x:clip}

/* The hero. Art sits BELOW the existing radial gradients and below the text,
   so nothing competes with the headline. */
.lp-night .hero::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--lp-art);
  background-size:cover;background-position:center top;
  mix-blend-mode:screen;opacity:.28;
  -webkit-mask-image:radial-gradient(ellipse 95% 85% at 50% 35%,#000 25%,transparent 80%);
          mask-image:radial-gradient(ellipse 95% 85% at 50% 35%,#000 25%,transparent 80%);
}
.lp-night .hero-inner{position:relative;z-index:2}

/* The divider between major sections: pure CSS, no asset. It is what turns a
   stack of text blocks into a page with a pulse, and it carries no subject of
   its own, so it never competes with the page's one artwork. */
.lp-night .lp-divider{
  --mark:7px;
  display:flex;align-items:center;justify-content:center;gap:16px;
  inline-size:min(420px,68%);block-size:34px;margin:10px auto 0;
}
/* Two hairlines with a gap between them, and the centre mark drawn INTO the gap
   as a rotated square. The gap is load-bearing: both lines are flex:1, so with
   no gap they meet in the middle and cover the mark completely. */
.lp-night .lp-divider::before,
.lp-night .lp-divider::after{
  content:'';flex:1;block-size:1px;
  background:linear-gradient(to right,transparent,rgba(200,169,110,.5));
}
.lp-night .lp-divider::after{background:linear-gradient(to left,transparent,rgba(200,169,110,.5))}
.lp-night .lp-divider{
  background-image:linear-gradient(45deg,var(--gold) 0 100%);
  background-size:var(--mark) var(--mark);
  background-repeat:no-repeat;
  background-position:center;
}

/* The step connector, removed on this theme - and it is a real bug fix, not taste.
   The base stylesheet turns .step's ::before into a HORIZONTAL timeline at >=821px
   (inset-inline-end:-50%; width:100%), which assumes .steps is a flex ROW. The night
   theme keeps .steps a COLUMN of discrete bordered cards (.lp-night .steps outranks
   the base rule), so that connector had nothing to bridge and simply stuck out of the
   page: a 138px horizontal scrollbar on all five product pages.

   MEASURED, not guessed: disabling exactly this rule at runtime took the document
   overflow 138px -> 0. It is also PRE-EXISTING - the live pages, which still serve the
   previous stylesheet, measure the same 138px - so this pass did not introduce it.
   Night steps read as a sequence from their numbered badges; they need no connector. */
.lp-night .step:not(:last-child)::before,
.lp-night .step:not(:last-child)::after{content:none}

/* Consult card and founder note: light, assetless surface treatment. These sit
   next to the form, where a second picture would only pull the eye off it. */
.lp-night .consult-card{position:relative;overflow:hidden}
.lp-night .consult-card::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 55% at 85% 0%,rgba(200,169,110,.10),transparent 70%);
}
.lp-night .consult-head,.lp-night .consult-form{position:relative;z-index:1}

.lp-night .founders-note{position:relative;overflow:hidden}
.lp-night .founders-note::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(to left,rgba(122,158,108,.10),transparent 65%);
}
.lp-night .founders-note p{position:relative;z-index:1}

/* Closing band: the same artwork, bottom crop and mirrored, so the page ends
   on the piece it opened with without reading as a repeat. */
.lp-night .cta-band::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--lp-art);
  background-size:cover;background-position:center bottom;
  transform:scaleX(-1);
  mix-blend-mode:screen;opacity:.22;
  -webkit-mask-image:radial-gradient(ellipse 85% 95% at 50% 50%,#000 20%,transparent 78%);
          mask-image:radial-gradient(ellipse 85% 95% at 50% 50%,#000 20%,transparent 78%);
}
.lp-night .cta-band .cta-inner{position:relative;z-index:1}

/* Thank-you hero: centre crop of the same artwork. */
.lp-night .thanks-hero::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--lp-art);
  background-size:cover;background-position:center center;
  mix-blend-mode:screen;opacity:.24;
  -webkit-mask-image:radial-gradient(ellipse 90% 85% at 50% 45%,#000 22%,transparent 78%);
          mask-image:radial-gradient(ellipse 90% 85% at 50% 45%,#000 22%,transparent 78%);
}
.lp-night .thanks-inner{position:relative;z-index:2}

@media (max-width:900px){
  .lp-night .block>h2{max-inline-size:none}
  .lp-night .lp-divider{inline-size:78%;block-size:28px}
  .lp-night .consult-card::before{inline-size:80%;block-size:210px}
  .lp-night .cf-submit{align-self:stretch}
}

/* ── centre everything (Nave 2026-08-20) ──────────────────────────────────────
   DESIGN.md says not to centre body copy. Nave asked for it on these five pages
   explicitly, so it is centred here and ONLY here: every rule below is scoped to
   .lp-night, so no other page family inherits it. */
.lp-night .block,
.lp-night .block p,
.lp-night .block li,
.lp-night .note,
.lp-night .note p,
.lp-night .founders-note p,
.lp-night .answer-box,
.lp-night .answer-box p,
.lp-night .pain-card,
.lp-night .do-card,
.lp-night .demo-card,
.lp-night .step,
.lp-night .step-c,
.lp-night .step-card,
.lp-night .instrument-item-text,
.lp-night .faq-q,
.lp-night .faq-a,
.lp-night .cta-inner,
.lp-night .cta-inner p{ text-align:center; }

/* The step rows were a two-column grid, which is what made them read ragged: a short
   label on one side and a long run of text on the other. Stack and centre instead. */
.lp-night .step{ display:block; }
.lp-night .step .step-num{ margin-inline:auto; margin-block-end:10px; }
.lp-night .step-c,.lp-night .step-card{ align-items:center; text-align:center; }

/* Keep the reading measure sane once centred: a centred line longer than ~62ch is
   hard to track back to. */
.lp-night .block p,
.lp-night .note p,
.lp-night .founders-note p{ max-inline-size:62ch; margin-inline:auto; }

/* The promise list and the disqualification line were deliberately start-aligned
   earlier for a reading edge. Nave's instruction supersedes that. */
.lp-night .consult-promise,
.lp-night .consult-disqualify{ text-align:center; }
.lp-night .consult-promise li{ list-style:none; }

/* --- the page reacts to you (Nave 2026-08-20) ---------------------------------
   Every rule here honours prefers-reduced-motion. That is not politeness: a page
   that keeps moving can make some people physically unwell, and this one is asking
   them to book a call, not to endure it. */

/* Sticky call bar. Injected by lp-chrome.js after the hero scrolls away, removed
   again once the form is on screen. */
.lp-sticky-cta{
  position:fixed; inset-inline:0; inset-block-end:0; z-index:60;
  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  padding:11px 18px; background:rgba(21,32,18,.94); backdrop-filter:blur(9px);
  border-block-start:1px solid rgba(200,169,110,.3);
  transform:translateY(110%); opacity:0; pointer-events:none;
  transition:transform .32s cubic-bezier(.22,.7,.3,1), opacity .32s;
}
.lp-sticky-cta.is-on{ transform:translateY(0); opacity:1; pointer-events:auto; }
.lp-sticky-text{ font-size:14px; color:var(--cream-mute,rgba(245,240,232,.75)); }
.lp-sticky-btn{
  display:inline-flex; align-items:center; padding:10px 24px; border-radius:50px;
  background:linear-gradient(135deg,var(--gold-bright,#e2c488),var(--gold,#c8a96e));
  color:#23180a; font-weight:800; font-size:15px; text-decoration:none;
  box-shadow:0 8px 22px -8px rgba(200,169,110,.55);
  transition:transform .18s, box-shadow .18s;
}
.lp-sticky-btn:hover{ transform:translateY(-1px); box-shadow:0 12px 26px -8px rgba(200,169,110,.7); }
@media (max-width:520px){ .lp-sticky-text{ display:none; } .lp-sticky-cta{ padding:9px 12px; } }

/* Cards answer the cursor. A 2px lift and a warmer edge is enough to say "this is a
   thing", without the page bouncing. */
.lp-night .do-card,.lp-night .pain-card,.lp-night .demo-card,
.lp-night .step,.lp-night .read-card,.lp-night .instrument-item{
  transition:transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.lp-night .do-card:hover,.lp-night .pain-card:hover,.lp-night .demo-card:hover,
.lp-night .step:hover,.lp-night .read-card:hover{
  transform:translateY(-2px); border-color:rgba(200,169,110,.42);
}
.lp-night .instrument-item:hover{ background:rgba(245,240,232,.05); }

/* A tick should feel like it registered. */
.lp-night .instrument-item input[type=checkbox]{ transition:transform .12s ease; }
.lp-night .instrument-item input[type=checkbox]:active{ transform:scale(.88); }

/* The FAQ marker turns instead of swapping. */
.lp-night details summary{ cursor:pointer; }
.lp-night details summary::marker{ color:var(--gold,#c8a96e); }

@media (prefers-reduced-motion:reduce){
  .lp-sticky-cta{ transition:none; }
  .lp-night .do-card,.lp-night .pain-card,.lp-night .demo-card,
  .lp-night .step,.lp-night .read-card,.lp-night .instrument-item{ transition:none; }
  .lp-night .do-card:hover,.lp-night .pain-card:hover,.lp-night .demo-card:hover,
  .lp-night .step:hover,.lp-night .read-card:hover{ transform:none; }
  .lp-sticky-btn:hover{ transform:none; }
}

/* ── the floating calculation flow (paid-ads) ─────────────────────────────────
   Cards that sit above the page rather than in it: elevated, connected by a gold spine,
   arriving one after another. The spine is a ::before on the list so it cannot add width;
   an earlier connector on this page did exactly that and pushed the row off-canvas. */
.lp-night .calcflow{position:relative;list-style:none;counter-reset:none;max-inline-size:52ch;margin:26px auto 0;padding:0;display:flex;flex-direction:column;gap:12px}
.lp-night .calcflow::before{content:'';position:absolute;inset-inline-start:calc(50% - 1px);inset-block:14px;inline-size:2px;background:linear-gradient(180deg,rgba(200,169,110,.05),rgba(200,169,110,.42),rgba(200,169,110,.05));pointer-events:none}
.lp-night .calcflow-step{position:relative;display:flex;align-items:center;gap:12px;justify-content:center;text-align:center;background:var(--void-2);border:1px solid var(--void-4);border-radius:14px;padding:14px 18px;box-shadow:0 14px 34px -26px rgba(0,0,0,.8);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.lp-night .calcflow.visible .calcflow-step{animation:flowIn .5s ease both;animation-delay:calc(var(--flow-i,0) * .09s + .08s)}
@keyframes flowIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.lp-night .calcflow-step:hover{transform:translateY(-3px);border-color:rgba(200,169,110,.4);box-shadow:0 20px 44px -24px rgba(0,0,0,.75)}
.lp-night .calcflow-n{flex-shrink:0;inline-size:24px;block-size:24px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;background:rgba(200,169,110,.14);color:var(--gold-bright);border:1px solid rgba(200,169,110,.4)}
.lp-night .calcflow-t{font-size:15px;line-height:1.5;color:var(--cream)}
.lp-night .calcflow-out{max-inline-size:52ch;margin:14px auto 0;text-align:center;font-size:16px;font-weight:700;color:var(--gold-bright)}
.lp-night .calcflow-note{max-inline-size:58ch;margin:14px auto 0;text-align:center;font-size:14px;color:var(--cream-mute)}
@media (prefers-reduced-motion:reduce){.lp-night .calcflow.visible .calcflow-step{animation:none}.lp-night .calcflow-step{transition:none}.lp-night .calcflow-step:hover{transform:none}}

/* ── contrast, read ACROSS instead of down ────────────────────────────────────
   Two columns of bullets are read one side at a time, which is why the difference was
   not landing. A real grid puts each pair on one row, so the same decision made two ways
   sits side by side and the comparison happens without effort. */
.lp-night .contrast-paired{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin:26px 0;align-items:stretch}
.lp-night .contrast-head{font-size:16px;font-weight:800;text-align:center;padding:10px 12px;border-radius:12px}
.lp-night .contrast-head-a{background:rgba(245,240,232,.05);color:var(--cream-label);border:1px solid var(--void-4)}
.lp-night .contrast-head-b{background:rgba(200,169,110,.14);color:var(--gold-bright);border:1px solid rgba(200,169,110,.4)}
.lp-night .contrast-cell{display:flex;align-items:center;gap:9px;font-size:14.5px;line-height:1.55;padding:13px 15px;border-radius:12px;text-align:start}
.lp-night .contrast-paired .contrast-a{background:rgba(245,240,232,.03);border:1px solid var(--void-4);color:var(--cream-label)}
.lp-night .contrast-paired .contrast-b{background:linear-gradient(135deg,var(--void-3),var(--void-4));border:1px solid rgba(200,169,110,.3);color:var(--cream)}
.lp-night .contrast-paired .contrast-a::before{content:'\00d7';color:var(--cream-faint);font-weight:800;flex-shrink:0}
.lp-night .contrast-paired .contrast-b::before{content:'\2713';color:var(--gold);font-weight:800;flex-shrink:0}
@media (max-width:700px){
  /* One row per pair, still adjacent, so the comparison survives the narrow screen. */
  .lp-night .contrast-paired{grid-template-columns:1fr;gap:8px}
  .lp-night .contrast-head{position:sticky;top:0}
  .lp-night .contrast-paired .contrast-a{order:calc(var(--row-i) * 2 + 1)}
  .lp-night .contrast-paired .contrast-b{order:calc(var(--row-i) * 2 + 2);margin-bottom:10px}
  .lp-night .contrast-head-a,.lp-night .contrast-head-b{display:none}
}

/* ── accordion (steps + fit on the paid-ads page) ─────────────────────────────
   Smaller type than the cards it replaces, one panel open at a time, and the whole row
   is the target rather than a small chevron. */
.lp-night .acc{display:flex;flex-direction:column;gap:10px;margin:26px 0}
.lp-night .acc details{background:var(--void-2);border:1px solid var(--void-4);border-radius:14px;overflow:hidden;transition:border-color .22s ease,box-shadow .22s ease}
.lp-night .acc details[open]{border-color:rgba(200,169,110,.36);box-shadow:0 18px 44px -30px rgba(0,0,0,.8)}
.lp-night .acc summary{display:flex;align-items:center;gap:11px;cursor:pointer;padding:15px 18px;list-style:none;font-size:15px;font-weight:700;color:var(--cream);transition:background .18s ease}
.lp-night .acc summary::-webkit-details-marker{display:none}
.lp-night .acc summary:hover{background:rgba(245,240,232,.035)}
.lp-night .acc summary:focus-visible{outline:2px solid var(--gold-bright);outline-offset:-2px}
.lp-night .acc summary::after{content:'+';margin-inline-start:auto;font-size:20px;font-weight:400;color:var(--gold);transition:transform .22s ease;flex-shrink:0}
.lp-night .acc details[open] summary::after{transform:rotate(45deg)}
.lp-night .acc-n{flex-shrink:0;inline-size:24px;block-size:24px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;background:rgba(200,169,110,.14);color:var(--gold-bright);border:1px solid rgba(200,169,110,.4)}
.lp-night .acc-t{min-inline-size:0}
.lp-night .acc-b{padding:0 18px 17px}
.lp-night .acc-b p{font-size:14.5px;line-height:1.75;color:var(--cream-mute);margin:0;text-align:start}
.lp-night .acc-b ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0}
.lp-night .acc-b li{font-size:14.5px;line-height:1.6;color:var(--cream-soft);display:flex;gap:10px;align-items:flex-start;text-align:start}
.lp-night .acc-yes .acc-b li::before{content:'\2713';color:var(--gold);font-weight:800;flex-shrink:0}
.lp-night .acc-no .acc-b li::before{content:'-';color:var(--cream-faint);flex-shrink:0}
.lp-night .acc-mark{flex-shrink:0;inline-size:10px;block-size:10px;border-radius:50%}
.lp-night .acc-yes .acc-mark{background:var(--gold)}
.lp-night .acc-no .acc-mark{background:var(--void-5)}
@media (prefers-reduced-motion:reduce){.lp-night .acc details,.lp-night .acc summary,.lp-night .acc summary::after{transition:none}}

/* ── the thank-you page, which had been left behind ───────────────────────────
   Measured 2026-08-20: a product page had 6 revealing blocks and ~35-56 elements that
   respond to the reader; a thank-you page had 1 and 11, and the 11 were only what came
   free with the blog cards. "All ten pages" had really landed on five.

   Deliberately restrained: this is a confirmation page, and someone who has just handed
   over their details should not meet a page that performs at them. The steps arrive in
   the order they will happen, and the one thing they can actually touch answers back. */
.lp-night .thanks-next.reveal.visible ol li{animation:stepIn .45s ease both;animation-delay:calc(var(--step-i,0) * .12s + .1s)}
@keyframes stepIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* The pre-call box is the only control on the page. focus-within, not hover: it should
   respond when someone starts answering, not when a cursor passes over it. */
.lp-night .precall{transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.lp-night .precall:focus-within{border-color:rgba(200,169,110,.45);box-shadow:0 16px 40px -24px rgba(0,0,0,.6);transform:translateY(-2px)}

@media (prefers-reduced-motion:reduce){
  .lp-night .thanks-next.reveal.visible ol li{animation:none}
  .lp-night .precall{transition:none}
  .lp-night .precall:focus-within{transform:none}
}

/* Mobile: the box is ~343px wide, so 18px of side padding is a real slice of the line.
   Trim it so an answer needs fewer lines, which is the whole point of the change. */
@media (max-width:600px){
  .lp-night .faq details{padding:2px 13px}
  .lp-night .faq summary{font-size:14.5px}
}

/* ══ Google-doc review round, Nave 2026-08-26 ═══════════════════════════════════
   Two notes repeat on almost every page of his document: "למרכז" and "להגדיל את
   הפונט" (three sizes on the blueprint page, two on the paid page). Repeated notes
   about the same area on more than one page are his standing instruction to fix
   horizontally, so the whole type scale moves here once, for all five pages, rather
   than page by page.

   Everything stays scoped to .lp-night, so no other page family inherits it. */

/* ── the type scale, one step up across the board ───────────────────────────── */
.lp-night .block h2{ font-size:clamp(26px,3.5vw,38px); }
.lp-night .block>h2{ max-inline-size:26ch; }
.lp-night .lead{ font-size:20px!important; }
.lp-night .block p{ font-size:17px; line-height:1.72; }
.lp-night .do-card h3{ font-size:18px; }
.lp-night .do-card p{ font-size:16px; line-height:1.7; }
.lp-night .pain-head{ font-size:18px; }
.lp-night .pain-body{ font-size:16.5px; }
.lp-night .boundary-card h2{ font-size:clamp(23px,3vw,31px); }
.lp-night .boundary-list li{ font-size:17px; }
.lp-night .instrument-card h2{ font-size:clamp(24px,3.2vw,33px); }
.lp-night .instrument-item-text{ font-size:17px; }
.lp-night .instrument-prompt{ font-size:17px; }
.lp-night .calcflow-t{ font-size:16.5px; }
.lp-night .calcflow-out{ font-size:17.5px; }
.lp-night .calcflow-note{ font-size:15.5px; }
.lp-night .faq summary{ font-size:16.5px; }
.lp-night .faq details p{ font-size:16px; }
.lp-night .acc-t{ font-size:17px; }
.lp-night .acc-b p{ font-size:16px; }
.lp-night .contrast-paired .contrast-a,
.lp-night .contrast-paired .contrast-b{ font-size:16px; }
.lp-night .fit-col h3{ font-size:18px; }
.lp-night .cta-inner p{ font-size:17.5px; }

/* ── the centring his notes keep landing on ─────────────────────────────────────
   The earlier pass centred the block-level copy but stopped at the components that
   carry their own alignment. Those are exactly the ones he kept re-flagging, so they
   are named here. The FAQ answer is the one deliberate exception: he asked last round
   for those lines to run the full width of the box, and that instruction still holds. */
.lp-night .acc summary,
.lp-night .acc-b p,
.lp-night .boundary-list li,
.lp-night .boundary-after,
.lp-night .fit-col h3,
.lp-night .fit-col li,
.lp-night .instrument-prompt,
.lp-night .contrast-paired .contrast-a,
.lp-night .contrast-paired .contrast-b{ text-align:center; }

/* The boundary and fit rows were flex lists with a leading marker, which pins the text
   to the start edge no matter what text-align says. Centre the row itself. */
.lp-night .boundary-list li,
.lp-night .fit-col li{ justify-content:center; }
.lp-night .acc summary{ justify-content:center; }
.lp-night .contrast-paired .contrast-a,
.lp-night .contrast-paired .contrast-b{ justify-content:center; }

/* ── hero: the three cases (business-blueprint) ─────────────────────────────────
   Nave: "לעשות את זה בשלושה איקונים צפים". They float, gently and out of phase, and
   stop entirely for anyone who asked the OS for less motion. */
.lp-night .hero-cases{
  list-style:none; margin:22px auto 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
  max-inline-size:72ch;
}
.lp-night .hero-case{
  display:flex; align-items:center; gap:10px;
  padding:11px 18px; border-radius:50px;
  background:rgba(245,240,232,.04); border:1px solid rgba(200,169,110,.22);
  font-size:15.5px; line-height:1.45; color:var(--cream-soft,rgba(245,240,232,.88));
  text-align:start;
  animation:caseFloat 5.2s ease-in-out infinite;
  transition:border-color .2s ease, background-color .2s ease;
}
.lp-night .hero-case:nth-child(2){ animation-delay:.5s; }
.lp-night .hero-case:nth-child(3){ animation-delay:1s; }
.lp-night .hero-case:hover{ border-color:rgba(200,169,110,.45); background:rgba(245,240,232,.07); }
.lp-night .hero-case-ic{ display:grid; place-items:center; flex-shrink:0; color:var(--gold-bright,#e2c488); }
@keyframes caseFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
@media (max-width:620px){
  .lp-night .hero-cases{ flex-direction:column; align-items:stretch; }
  .lp-night .hero-case{ font-size:15px; }
}
@media (prefers-reduced-motion:reduce){
  .lp-night .hero-case{ animation:none; transition:none; }
  .lp-night .hero-case:hover{ background:rgba(245,240,232,.04); }
}

/* ── prose subheadings ─────────────────────────────────────────────────────────
   Nave: "לסיים את הפסקה בכותרות משנה". A wall of four equal paragraphs gives a
   reader nowhere to re-enter after looking away; the subheads are the way back in. */
.lp-night .prose-part{ margin:0 auto 26px; max-inline-size:66ch; }
.lp-night .prose-part:last-child{ margin-block-end:0; }
.lp-night .prose-head{
  margin:0 0 8px; font-size:19px; font-weight:800; line-height:1.35;
  color:var(--gold-bright,#e2c488); text-align:center;
}
.lp-night .prose-part p{ margin:0; }

/* ── the instrument's per-question explanation ─────────────────────────────────
   Replaces the six identical "שאלה אחת" labels. It sits under the question rather
   than beside it, so the question line itself stays centred and unbroken. */
.lp-night .instrument-item.has-explain{ flex-wrap:wrap; align-items:flex-start; }
.lp-night .instrument-item-explain{
  flex-basis:100%; margin-block-start:7px;
  font-size:15px; line-height:1.65; color:var(--cream-mute,rgba(245,240,232,.72));
  text-align:center;
}
@media (max-width:620px){ .lp-night .instrument-item-explain{ font-size:14.5px; } }

/* Optional extra questions on the consult form, folded behind a disclosure so the
   required path stays five fields plus the qualifier. */
.lp-night .cf-more{ border:1px solid var(--void-4); border-radius:12px; background:rgba(245,240,232,.02); }
.lp-night .cf-more>summary{
  cursor:pointer; padding:12px 15px; font-size:15px; font-weight:700;
  color:var(--gold-bright,#e2c488); text-align:start; list-style-position:inside;
}
.lp-night .cf-more[open]>summary{ border-block-end:1px solid var(--void-4); }
.lp-night .cf-more-body{ display:flex; flex-direction:column; gap:13px; padding:14px 15px 16px; }
.lp-night .cf-more-body .cf-label{ font-weight:600; }

/* The בקצרה box: everything inside it was already centred, but a 4px accent bar pinned
   to one edge kept the whole card reading as edge-anchored. Nave flagged this box on
   two separate pages with a bare "למרכז". The accent becomes a centred top rule, so
   the card is symmetric and the design language survives. */
.lp-night .answer-box::before{
  inset-block: 0 auto; inset-inline: 50% auto;
  transform: translateX(50%);
  width: 88px; height: 3px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
/* FAQ answers: he asked to centre headings and paragraphs on the FAQ too. The earlier
   instruction about these lines was about LENGTH (run the full width of the box so the
   answer does not become a narrow column), which centring does not undo. */
.lp-night .faq details p{ text-align:center; }
.lp-night .faq summary{ text-align:center; }

/* ══ Review round 2, Nave 2026-08-28 ═══════════════════════════════════════════
   The 2026-08-26 block above asked for the right things and several of them never
   reached a pixel.

   Five of its rules compute exactly as written and paint wrong, because a value can
   win the cascade and still be powerless in the layout mode it lands in: text-align
   cannot move a flex ITEM, and justify-content has nothing left to distribute once
   an auto margin has absorbed the free space (measured at 415px on .acc summary).
   getComputedStyle returns "center" for every one of them. Only painted geometry
   sees the defect, which is why the same "למרכז" notes came back unchanged after a
   round that genuinely addressed them.

   Two more rules lost a specificity fight and were simply inert: .cta-inner p and
   .pain-body. The closing band never received its raise at all.

   And the block above contains no @media, so every size in it renders identically
   on a 375px phone and a 1440px desktop. That is the whole of the mobile note. The
   fix here is to raise the clamp FLOORS rather than add a phone-only branch, so the
   two viewports cannot drift apart again.

   Verified with T-tools/04-scripts/verify-lp-rendered-mobile.mjs, which until today
   could not see these pages at all: Turnstile holds a blob request open forever, so
   waitUntil:'networkidle' never fired and the gate returned BLIND on all five. */

/* ── 1. centring that computed correctly and painted wrong ─────────────────── */

/* The '+' marker carried margin-inline-start:auto, which ate all free space before
   justify-content:center could use any. Pin the marker; centre the rest. No
   transform here: details[open] summary::after already owns transform for its
   rotate, and a second one would silently replace it. */
.lp-night .acc summary{ position:relative; padding-inline:46px; }
.lp-night .acc summary::after{
  margin-inline-start:0; position:absolute; inset-inline-end:18px; inset-block:0;
  display:grid; place-items:center;
}

/* .faq summary is display:flex + justify-content:space-between, so the text-align
   :center added last round could never move it. Same treatment. */
.lp-night .faq summary{ position:relative; justify-content:center; padding-inline:36px; }
.lp-night .faq summary::after{
  position:absolute; inset-inline-end:0; inset-block:0;
  display:grid; place-items:center;
}

/* .lp-night .answer-box p{margin:0} (0,2,1) beat .answer-lead{margin:0 auto} (0,2,0),
   so max-inline-size:58ch still applied while the auto margin did not: a narrow column
   pinned to the start edge with up to 229px of dead space beside it. Desktop only,
   which is why a mobile look did not catch it. */
.lp-night .answer-box .answer-lead,
.lp-night .answer-box .answer-note{ margin-inline:auto; }
.lp-night .answer-box .answer-lead{ margin-block:0 18px; }
.lp-night .answer-box .answer-note{ margin-block:18px 0; }

/* Same shape: .acc-b p{margin:0} cancelled the auto margin from .block p. */
.lp-night .acc .acc-b p{ margin-inline:auto; }

/* ── 2. rules that were written and never applied ──────────────────────────── */

/* .lp-night .cta-inner p (0,2,1) loses to .lp-night .cta-band .cta-inner p (0,3,1)
   in lp-service-night.css, so the closing band still rendered at 16px. */
.lp-night .cta-band .cta-inner p{ font-size:18px; }
/* .pain-body (0,2,0) lost to .block p (0,2,1). */
.lp-night .pain-card .pain-body{ font-size:18px; }
/* .cf-legal lost the same fight and rendered at body size. */
.lp-night .block .cf-legal{ font-size:14.5px; }

/* ── 3. the squeeze on the booking card ────────────────────────────────────── */

/* .consult-promise li was display:flex, so each <strong> became its own flex item
   and shrank: measured 65px, 51px and 49px columns wrapping to three stacked
   single words, at BOTH widths, directly above the form. Blocking the row lets the
   text run as one paragraph and keeps the marker hanging. */
.lp-night .consult-promise li{ display:block; }
.lp-night .consult-promise li::before{ margin-inline-end:9px; }

/* ── 4. the type scale, the second and third step ──────────────────────────────
   "להגדיל את הפונט בשלוש מידות" and "בשתי מידות להכל". Last round moved a named list
   of components by one step and skipped everything not on the list: the h1, the hero
   sub, the body paragraph, the whole form, both buttons and the closing band all
   received zero. A component list will keep missing whatever is not on it, so this
   pass names the surfaces a reader actually looks at first. */

.lp-night .hero h1{ font-size:clamp(35px,5.4vw,60px); }
.lp-night .hero-sub{ font-size:clamp(20px,2.5vw,24px); }
.lp-night .hero-microcopy{ font-size:16px; }
.lp-night .hero-case{ font-size:17px; }

.lp-night .block h2{ font-size:clamp(29px,3.8vw,42px); }
.lp-night .boundary-card h2{ font-size:clamp(26px,3.3vw,35px); }
.lp-night .instrument-card h2{ font-size:clamp(27px,3.5vw,37px); }
.lp-night .lead{ font-size:22px!important; }
.lp-night .block p{ font-size:19px; line-height:1.72; }
.lp-night .prose-head{ font-size:22px; }

.lp-night .answer-box p{ font-size:19px; }
.lp-night .answer-box .answer-note{ font-size:17.5px; }
.lp-night .answer-flow-text{ font-size:16.5px; }
.lp-night .answer-box .label{ font-size:14px; }

.lp-night .do-card h3{ font-size:20px; }
.lp-night .do-card p{ font-size:17.5px; }
.lp-night .pain-head{ font-size:20px; }
.lp-night .fit-col h3{ font-size:20px; }
.lp-night .fit-col li{ font-size:17.5px; }
.lp-night .boundary-list li{ font-size:18.5px; }

.lp-night .acc summary{ font-size:17px; }
.lp-night .acc-t{ font-size:19px; }
.lp-night .acc .acc-b p{ font-size:17.5px; }
.lp-night .acc .acc-b li{ font-size:17px; }
.lp-night .faq summary{ font-size:18.5px; }
.lp-night .faq details p{ font-size:17.5px; }

.lp-night .instrument-item-text{ font-size:18.5px; }
.lp-night .instrument-prompt{ font-size:19px; }
.lp-night .instrument-item-explain{ font-size:16.5px; }
.lp-night .instrument-label,
.lp-night .instrument-item-weight{ font-size:14px; }

.lp-night .calcflow-t{ font-size:18px; }
.lp-night .calcflow-out{ font-size:19px; }
.lp-night .calcflow-note{ font-size:17px; }
.lp-night .contrast-head{ font-size:17.5px; }
.lp-night .contrast-paired .contrast-a,
.lp-night .contrast-paired .contrast-b{ font-size:17.5px; }
.lp-night .contrast-cell{ font-size:17.5px; }

/* the numerals: 11px circles were the smallest text anywhere on the page */
.lp-night .acc-n,
.lp-night .calcflow-n{ font-size:12.5px; }

/* the form and the buttons, none of which were touched last round */
.lp-night .consult-promise li{ font-size:17px; }
.lp-night .consult-badge{ font-size:14px; }
.lp-night .cf-label{ font-size:16px; }
.lp-night .cf-hint{ font-size:15px; }
.lp-night .cf-more>summary{ font-size:17px; }
.lp-night .cf-form input,
.lp-night .cf-form textarea,
.lp-night .cf-form select{ font-size:17px; }
.lp-night .cf-submit,
.lp-night .btn-primary,
.lp-night .btn-ghost{ font-size:17.5px; }

/* The closing call to action had become the SMALLEST section heading on the page,
   at 34px against 38px, on a 1.78 body line-height. */
.lp-night .cta-band .cta-inner h2{ font-size:clamp(28px,3.6vw,40px); line-height:1.22; }

/* ── 5. mobile ──────────────────────────────────────────────────────────────── */

/* Raising the clamp floors above does most of the mobile work. What is left is
   hierarchy: at 375px h2 lands near its floor while h3 keeps its desktop value, so
   subheads stop reading as subheads. Pull the body down one notch and hold the
   subheads above it. */
@media (max-width:620px){
  .lp-night .block p{ font-size:18px; }
  .lp-night .answer-box p{ font-size:18px; }
  .lp-night .prose-head{ font-size:20.5px; }
  .lp-night .do-card h3{ font-size:19px; }
  .lp-night .acc-t{ font-size:18px; }
}

/* The comparison table hid its two column headers below 700px, so a phone reader had
   only a small ✕ or ✓ to tell "שיווק טיפש" from "שיווק חכם" in a section whose entire
   point is the contrast between them. Show them, compactly. */
@media (max-width:700px){
  .lp-night .contrast-head-a,
  .lp-night .contrast-head-b{ display:block; font-size:14.5px; padding:7px 10px; }
}

/* The required consent checkbox was a 19x19 tap target gating the whole form. */
.lp-night .cf-consent input[type=checkbox]{ inline-size:22px; block-size:22px; }

/* ── 6. the one page he asked for a THIRD step on ──────────────────────────────
   "להגדיל את הפונט בשלוש מידות" sits on the blueprint page; "בשתי מידות" sits on the
   paid page. Until today <body> carried only class="lp-night", so those two amounts
   were not expressible in CSS at all, and one shared step went to all five pages.
   build.mjs now emits lp-<slug> beside it, so the difference can finally be written
   down instead of being averaged away. */
/* CHILD selector, deliberately. As a descendant selector this rule was (0,3,1) and
   outranked every component that owns its own size, so an FAQ answer and the בקצרה
   note both rendered at 20.5px body size on this page alone. That is the same
   over-reach that .lp-night .block p caused for .cf-legal and .pain-body, which
   section 2 above exists to repair. .prose-part p is named because those paragraphs
   are nested and do want the page's body size. */
.lp-night.lp-business-blueprint .block>p,
.lp-night.lp-business-blueprint .prose-part p{ font-size:20.5px; }
.lp-night.lp-business-blueprint .block h2{ font-size:clamp(31px,4.1vw,45px); }
.lp-night.lp-business-blueprint .instrument-card h2{ font-size:clamp(29px,3.8vw,40px); }
.lp-night.lp-business-blueprint .instrument-item-text{ font-size:20px; }
.lp-night.lp-business-blueprint .instrument-prompt{ font-size:20.5px; }
.lp-night.lp-business-blueprint .instrument-item-explain{ font-size:17.5px; }
.lp-night.lp-business-blueprint .answer-box p{ font-size:20.5px; }
.lp-night.lp-business-blueprint .answer-flow-text{ font-size:17.5px; }
.lp-night.lp-business-blueprint .prose-head{ font-size:23.5px; }
@media (max-width:620px){
  .lp-night.lp-business-blueprint .block>p,
  .lp-night.lp-business-blueprint .prose-part p{ font-size:19px; }
  .lp-night.lp-business-blueprint .answer-box p{ font-size:19px; }
  .lp-night.lp-business-blueprint .prose-head{ font-size:21.5px; }
}

/* ── 7. the six question bubbles ───────────────────────────────────────────────
   "ולמרכז מחדש את המשפטים בתוך הבועות". The repeating "שאלה אחת" label went last
   round; the recentring did not. .instrument-item is a flex row carrying an 18px
   checkbox plus an 11px gap, so text-align:center centres the question inside the
   LEFTOVER column, 29px off the bubble's own centre, while the explanation below it
   has flex-basis:100% and centres on the bubble. Two different centres inside one
   card, which is what makes it read crooked rather than merely offset.
   A matching spacer on the far edge, and the same 29px inset on the explanation,
   put both on the bubble's true centre. */
.lp-night .instrument-item{ padding-inline-end:44px; }
.lp-night .instrument-item-explain{ margin-inline-start:29px; }

/* ── 8. corrections from re-reading the document's own screenshots ─────────────
   Reading the PDF export rather than the text export resolves every note to the
   element it was actually drawn on. Two of the size notes turn out to be narrower
   than the horizontal reading applied above, and one of MY rules turns out to be
   inert in precisely the way section 2 exists to fix.

   "להגדיל את הפונט בשלוש מידות" is drawn on the six capability cards of the
   blueprint page, not on the page as a whole. Those carried 16px and 14px, so
   three steps is 22px and 20px. */
.lp-night.lp-business-blueprint .do-card h3{ font-size:22px; }
.lp-night.lp-business-blueprint .do-card p{ font-size:20px; }

/* "להגדיל את הפונט בשתי מידות להכל" is drawn on the budget block of the paid page. */
.lp-night .calcflow-t{ font-size:19px; }
.lp-night .calcflow-out{ font-size:20px; }

/* .calcflow-note (0,2,0) was losing to .block p (0,2,1): declared 17px, measured 19px.
   That is the same inert-rule defect section 2 above was written to repair, introduced
   by me in the same pass that repaired it, and caught only because the declared value
   was compared against the rendered one. Raise the specificity so the file is honest
   about what it does. */
.lp-night .block .calcflow-note{ font-size:18px; }

/* The blueprint's third step raised .block p to 20.5px, and an accordion body IS a
   .block p, so a panel's body rendered LARGER than the title above it. */
.lp-night.lp-business-blueprint .acc-t{ font-size:20px; }
.lp-night.lp-business-blueprint .acc .acc-b p{ font-size:18px; }

/* and the same over-reach one level down: the blueprint .answer-box p rule (0,3,1)
   was also catching .answer-note, which is meant to sit below the lead, not level with it. */
.lp-night.lp-business-blueprint .answer-box .answer-note{ font-size:18px; }