/* ═══════════════════════════════════════════════════════════════
   Campaign Landing Page (/lp + /lp/<variant> copies) - all LP styles.
   Narrow 880px editorial column (FIXES/399), RTL logical properties only.
   Breakpoints 1024px (tablet) and 767px (mobile). Reuses global tokens +
   utilities; never re-declares them. WhatsApp CTAs use WhatsApp green for
   recognition; the primary form CTA uses the brand purple (--accent-warm).
   Variant-only overrides scope with .lp-page[data-lp-variant='<name>'].
   ═══════════════════════════════════════════════════════════════ */


.lp-page {
  direction: rtl;
  /* background:
    radial-gradient(ellipse at 90% 0%, rgba(0, 113, 227, 0.05) 0%, transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%); */
  color: var(--text-color);
  font-family: var(--font-body);
  min-block-size: 100vh;
}

.lp-main {
  /* Footer clearance for the mobile floating register pill lives on
     .lp-footer (responsive block below). */
  padding-block-end: 0;
}

/* ── Shared CTA ─────────────────────────────────────────────────── */
.lp-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-block-size: 52px;
  padding-block: 14px;
  padding-inline: 32px;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.lp-cta--primary {
  background: var(--accent-warm);
  color: #fff;
  box-shadow: 0 1px 2px rgba(30, 12, 60, 0.12), 0 6px 18px rgba(105, 53, 216, 0.22);
}
.lp-cta--primary:hover {
  background: var(--accent-warm-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(30, 12, 60, 0.16), 0 10px 26px rgba(105, 53, 216, 0.3);
}

.lp-cta--ghost {
  background: transparent;
  color: var(--primary-color);
  border-color: var(--border-default);
}
.lp-cta--ghost:hover {
  border-color: var(--primary-color);
  background: var(--primary-light);
}

/* WhatsApp recognition color. */
.lp-cta--wa.lp-cta--primary {
  background: #1eb14e;
  color: #fff;
  box-shadow: 0 1px 2px rgba(10, 61, 32, 0.18), 0 6px 18px rgba(30, 177, 78, 0.28);
}
.lp-cta--wa.lp-cta--primary:hover {
  background: #17993f;
  transform: translateY(-1px);
}
.lp-cta--wa.lp-cta--ghost {
  color: #128c4a;
  border-color: rgba(18, 140, 74, 0.4);
}
.lp-cta--wa.lp-cta--ghost:hover {
  border-color: #128c4a;
  background: rgba(30, 177, 78, 0.07);
}

.lp-cta--block {
  display: flex;
  inline-size: 100%;
}

/* ── Disabled CTA ───────────────────────────────────────────────────
   Only the quick-form submit is ever disabled, in two states, and NEITHER
   is an error:
     1. Pre-hydration. /lp is prerendered, so the form paints - and reads as
        pressable - seconds before the JS that handles it arrives (~4s on a
        throttled phone). The button carries `disabled` through that window
        because a press would otherwise fire a native submit that wipes the
        typed details AND the query string with the ad click ids (see the
        comment on `hydrated` in LpForm.vue). Unstyled it looked live and was
        inert at once - a paid visitor tapping into silence.
     2. In flight, where the label already swaps to "שולח...".
   Quiet solid chrome, never the global opacity fade: faded reads broken,
   flat reads "not yet" (same call as the wizard nav further down). Hover is
   neutralised in the same rule - :hover still matches a disabled button, so
   .lp-cta--primary:hover would otherwise lift and re-colour it. */
.lp-cta:disabled,
.lp-cta:disabled:hover {
  background: var(--border-light);
  color: var(--text-tertiary);
  border-color: transparent;
  box-shadow: none;
  transform: none;
  cursor: progress;
}

/* Pre-hydration only: a slow highlight sweep across the quiet pill. Without
   it a static grey submit invites the wrong reading - "it will turn on once
   I fill the fields" - and then betrays it when the filled form leaves the
   button grey. Motion is the honest disambiguator: the PAGE is still
   loading. Brand blue, low alpha, no red anywhere near it.
   Specificity note: .lp-cta:disabled above is (0,2,0) and its `background`
   shorthand clears background-image, so the modifier has to match it -
   hence .lp-cta.lp-form__submit--pending, placed after. */
.lp-cta.lp-form__submit--pending {
  background-image: linear-gradient(
    90deg,
    rgba(0, 113, 227, 0) 0%,
    rgba(0, 113, 227, 0.16) 50%,
    rgba(0, 113, 227, 0) 100%
  );
  background-repeat: no-repeat;
  background-size: 55% 100%;
  /* RTL: travels with the reading direction, start (right) to end (left).
     background-position percentages are physical, so this is spelled out in
     physical terms on purpose. */
  animation: lp-submit-pending 1.7s ease-in-out infinite;
}
@keyframes lp-submit-pending {
  from {
    background-position: 140% 0;
  }
  to {
    background-position: -40% 0;
  }
}

/* ── Slim LP header ─────────────────────────────────────────────── */
.lp-header {
  position: sticky;
  inset-block-start: 0;
  /* Below the FAB (998) and the drawer band (1050); above page content. */
  z-index: 940;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(12px);
  border-block-end: 1px solid var(--border-light);
}
.lp-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  max-inline-size: 880px;
  margin-inline: auto;
  min-block-size: 56px;
  padding-block: 8px;
  padding-inline: var(--space-lg);
}
/* Hamburger + brand mark travel together at inline-start (visual right in
   RTL); source order is burger then mark, so the hamburger sits to the RIGHT
   of the logo as an RTL header expects. */
.lp-header__start {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.lp-header__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.lp-header__mark svg {
  display: block;
  block-size: 24px;
  inline-size: auto;
}
.lp-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
/* Quiet full-site text link (rendered when the variant copy provides
   nav.fullSiteLabel): an exit channel, visually subordinate to the CTA.
   Hidden on phones - the drawer's emphasized end link covers it there. */
.lp-header__site {
  padding-block: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
}
.lp-header__site:hover {
  color: var(--primary-color);
  text-decoration: underline;
}
/* Small, high-contrast, and visibly quieter than the hero primary CTA. */
.lp-header__cta {
  min-block-size: 38px;
  padding-block: 8px;
  padding-inline: 20px;
  font-size: 14px;
}
.lp-header__burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  inline-size: 40px;
  block-size: 40px;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.lp-header__burger:hover {
  background: var(--fsp-hover-bg);
}
.lp-header__burger-line {
  display: block;
  inline-size: 20px;
  block-size: 2px;
  border-radius: 1px;
  background: var(--text-color);
}

/* ── LP drawer (lean: pinned CTA + trust links) ─────────────────── */
.lp-drawer-root {
  position: fixed;
  inset: 0;
  /* The site drawer band (1050-1100); above the FAB, below consent (9500). */
  z-index: 1050;
}
.lp-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(9, 14, 28, 0.45);
}
.lp-drawer {
  position: absolute;
  inset-block: 0;
  /* inline-start = the hamburger's side (right in RTL). */
  inset-inline-start: 0;
  inline-size: min(320px, 86vw);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: calc(var(--space-2xl) + var(--space-md)) var(--space-lg) var(--space-xl);
  background: #fff;
  box-shadow: 0 0 40px rgba(0, 60, 130, 0.18);
  overflow-y: auto;
}
.lp-drawer:focus {
  outline: none;
}
.lp-drawer__close {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  inline-size: 40px;
  block-size: 40px;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.lp-drawer__close:hover {
  background: var(--fsp-hover-bg);
}
.lp-drawer__close-x {
  position: relative;
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
.lp-drawer__close-x::before,
.lp-drawer__close-x::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 18px;
  block-size: 2px;
  border-radius: 1px;
  background: var(--text-color);
}
.lp-drawer__close-x::before {
  transform: translate(50%, -50%) rotate(45deg);
}
.lp-drawer__close-x::after {
  transform: translate(50%, -50%) rotate(-45deg);
}
.lp-drawer__nav {
  display: flex;
  flex-direction: column;
}
/* Plain-weight, plain-color links: nav never competes with the CTAs. */
.lp-drawer__link {
  padding-block: 12px;
  border-block-end: 1px solid var(--border-light);
  color: var(--text-color);
  font-size: 16px;
  text-decoration: none;
}
.lp-drawer__link:first-child {
  border-block-start: 1px solid var(--border-light);
}
.lp-drawer__link:hover {
  color: var(--primary-color);
}
/* Emphasized full-site link at the drawer's end (variant opt-in via
   nav.fullSiteLabel): the one deliberate exit gets the brand blue. */
.lp-drawer__site {
  color: var(--primary-color);
  font-weight: 600;
}
/* Open/close motion (Vue <Transition name="lp-drawer">). */
.lp-drawer-enter-active .lp-drawer__overlay,
.lp-drawer-leave-active .lp-drawer__overlay {
  transition: opacity 0.25s ease;
}
.lp-drawer-enter-active .lp-drawer,
.lp-drawer-leave-active .lp-drawer {
  transition: transform 0.28s ease;
}
.lp-drawer-enter-from .lp-drawer__overlay,
.lp-drawer-leave-to .lp-drawer__overlay {
  opacity: 0;
}
.lp-drawer-enter-from .lp-drawer,
.lp-drawer-leave-to .lp-drawer {
  /* The LP is RTL-only; the panel lives on the physical right edge. */
  transform: translateX(105%);
}

/* ── Sections ───────────────────────────────────────────────────── */
/* Every section draws a brand-gradient hairline on its top edge, so each
   section seam gets the same deliberate divider (border-image instead of a
   pseudo-element - ::before/::after are taken on several sections, e.g. the
   lp-what watermark). The line fades toward the viewport edges. */
.lp-section {
  padding-block: var(--space-xl);
  padding-inline: var(--space-lg);
  border-block-start: 1px solid transparent;
  border-image: linear-gradient(
      90deg,
      transparent 0%,
      rgba(8, 148, 255, 0.55) 20%,
      rgba(189, 50, 214, 0.55) 50%,
      rgba(255, 163, 4, 0.55) 80%,
      transparent 100%
    )
    1;
}
.lp-section__inner {
  max-inline-size: 880px;
  margin-inline: auto;
}
/* /course-style section headers, page-wide: a brand-gradient hairline over a
   mono eyebrow over the title (the /next crown order - see .lp-sechead-crown).
   The hairline is the header's single gradient accent: it used to sit UNDER
   the title, and was moved above the eyebrow so the pose stands on it.
   Format is deliberately byte-identical to .nc-teaser-eyebrow (the "המועד
   הקרוב" card this page embeds) so every eyebrow on the page reads as one
   voice - change one and change both. */
.lp-section__eyebrow {
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-color);
  margin-block: 0 var(--space-md);
}
/* Start-aligned headers (openday intro column, lecturer two-col body). */
.lp-section__eyebrow--start {
  text-align: start;
}
.lp-section__title {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--text-color);
  text-align: center;
  text-wrap: balance;
  margin-block-end: var(--space-lg);
}

/* Alternating tone (current rhythm: openday/curriculum/cohort/alumni/register
   tinted, what/who/diff/lecturer/faq white - the final ask stays tinted). */
.lp-openday,
.lp-curriculum,
.lp-cohort,
.lp-alumni,
.lp-register {
  background:
    radial-gradient(ellipse at 10% 100%, rgba(105, 98, 234, 0.04) 0%, transparent 55%),
    linear-gradient(180deg, #f7faff 0%, #eef5ff 100%);
}
/* Anchor target of the hero curriculum link - clear the sticky header. */
.lp-curriculum {
  scroll-margin-block-start: calc(64px + var(--space-lg));
}
/* NOTE: .lp-openday and .lp-register deliberately carry NO scroll-margin here.
   A rule was added at this spot on 2026-08-08 to clear the site's sticky
   toolbar on `/`, and it was dead on arrival: later equal-specificity rules in
   this file (around :978 and :1963, plus the responsive blocks) already set
   scroll-margin-block-start on both, and being later they win. Measured after
   the fact, the anchors land 33-191px BELOW the toolbar at 390 and 1440 on both
   routes, so there was nothing to fix. If a real offset problem ever appears,
   change the EXISTING rules rather than adding another one here. */

/* ── Mascot ─────────────────────────────────────────────────────── */
/* Fixed-ratio wrapper around the inlined 240x240 artwork: sized per placement
   below, so the box never shifts layout (zero CLS). */
.lp-mascot {
  aspect-ratio: 1 / 1;
}
.lp-mascot svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

/* ── Hero ───────────────────────────────────────────────────────── */
/* Two real grid columns. RTL source order = copy | form, which maps to
   physical RIGHT | LEFT. The eye enters top-right on the copy (understand),
   sweeps left, and lands on the frosted form card (act); the delight beat is
   the form-peek mascot rising from behind the card's top edge. */
.lp-hero {
  position: relative;
  padding-block: var(--space-2xl);
  padding-inline: var(--space-lg);
  overflow: hidden;
  isolation: isolate;
  /* Glow 1 breathes behind the copy (right/entry); glow 2 quietly lifts the
     form card off the page (left/action) without any border. */
  background:
    radial-gradient(ellipse at 78% 18%, rgba(105, 98, 234, 0.05) 0%, transparent 55%),
    radial-gradient(ellipse at 16% 55%, rgba(8, 148, 255, 0.06) 0%, transparent 60%);
}
/* Twin terminal-prompt watermarks (owner-tuned positions, 2026-07-22): the
   small mark floats low between the columns; the large second mark anchors
   behind the copy column's lower half. Both stay clear of the form card so
   nothing bleeds through the frosted glass. */
.lp-hero .logo-10x-terminal-watermark {
  inset-inline-start: 83%;
  top: 38%;
  width: 17vw;
  max-width: 420px;
}
.lp-hero .lp-hero__watermark--2 {
  inset-inline-start: 2%;
  top: 40%;
  width: 30vw;
  max-width: 800px;
}
/* Large, faint FULL-BODY "launching a rocket" mascot watermark in the hero's
   visual-right margin (RTL inline-start), behind the copy column - a playful
   brand device filling the otherwise-empty outer margin at wide widths.
   Desktop only (the two-column fold): hidden <=1024px, where the hero stacks
   and LpHeroMascot crowns the H1 instead. Sits at z-index 0, below
   .lp-hero__inner (z-index 1), so the copy always reads on top; the low
   opacity keeps it a watermark that never competes with the text or the form
   CTA. Held a small gap off the right edge (no bleed) so the WHOLE figure -
   head to legs, plus the launched rocket - stays visible; the artwork's own
   left padding keeps it almost entirely within the margin. */
.lp-hero__rocket {
  display: none;
}
@media (min-width: 1025px) {
  .lp-hero__rocket {
    display: block;
    position: absolute;
    z-index: 0;
    inset-inline-start: 8px;
    top: 50%;
    transform: translateY(-50%);
    inline-size: min(26vw, 440px);
    opacity: 0.13;
    pointer-events: none;
    user-select: none;
  }
  .lp-hero__rocket svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }
}
.lp-hero__inner {
  /* Defined here (not on the form wrap) so BOTH columns can read it: the form
     wrap spends it as mascot headroom, the copy column mirrors it so the H1
     top-aligns with the card's top edge on the two-column fold. */
  --lp-peek-size: 276px;
  position: relative;
  display: grid;
  /* The copy track is minmax(0, ...) so IT absorbs shrink between
     1024-1160px - the form column never overflows. Form column capped at
     520px (was ~432px as a 1fr share) with the copy taking the remainder. */
  grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
  column-gap: 64px;
  align-items: start;
  max-inline-size: 1080px;
  margin-inline: auto;
  z-index: 1;
}
/* Three direct children since the mobile-fold rework (2026-07-25): copy,
   form-wrap, claims grid. Source order = the wanted STACKED order (<=1024px
   renders the inner as display:block: copy -> form card -> claims, so the ask
   breaks the phone fold). The two-column desktop fold seats them explicitly:
   copy over claims in the text column (RTL inline-start = physical right),
   the form card spanning both rows at inline-end - visually identical to the
   pre-rework hero, where the grid lived inside the copy column. */
@media (min-width: 1025px) {
  .lp-hero__inner {
    grid-template-rows: auto 1fr;
  }
  .lp-hero__copy {
    grid-column: 1;
    grid-row: 1;
  }
  .lp-hero__inner > .lp-cards {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    /* Pixel parity with the pre-rework hero: inside the copy column the
       subtitle's 8px bottom margin COLLAPSED into the grid's 24px top margin
       (net 24). Across the grid-row boundary nothing collapses, so 8 + 16
       restores the same 24px visual gap. */
    margin-block-start: var(--space-md);
  }
  .lp-hero__form-wrap {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

/* ── Form column (RTL left / action) ── */
/* Shared positioning wrapper for the frosted card and the form-peek mascot
   overlay. The top padding is headroom: the mascot's head rises ~0.5 of the
   peek box above the card's top edge and must stay inside the hero's
   overflow clip. Padding (not margin) keeps the drop zero-CLS-safe. */
.lp-hero__form-wrap {
  position: relative;
  padding-block-start: calc(var(--lp-peek-size) * 0.52);
}
/* Copy column mirrors the mascot headroom so the H1's top lands level with
   the form card's top edge (two-column fold only - the stacked <=1024px hero
   flows copy above the card and needs no offset). */
@media (min-width: 1025px) {
  .lp-hero__copy {
    padding-block-start: calc(var(--lp-peek-size) * 0.52);
  }
}
/* form-peek overlay: a SIBLING layered BEHIND the glass card - never a child
   (the card's overflow:hidden would clip it). The artwork carries no ledge
   line; SVG y=162 (the undrawn ledge) is pinned to the card's top edge:
   block-start = 0.52*size (wrapper padding) - 0.675*size (162/240 of the
   box). The occluded body below the edge blurs through the frosted glass.
   Transform/opacity only (zero CLS); never blocks form interaction. */
.lp-hero__form-peek {
  position: absolute;
  inset-inline-start: 24px;
  inset-block-start: calc(var(--lp-peek-size) * -0.155);
  inline-size: var(--lp-peek-size);
  block-size: var(--lp-peek-size);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.lp-hero__form-peek svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  /* The success-state duck lives on the svg (the wrapper's transform is owned
     by the entrance animation, whose fill mode would win over a class). */
  transition: transform 0.5s ease-in-out, opacity 0.4s ease-in-out;
}
.lp-hero__form-peek--ducked svg {
  transform: translateY(62%);
  opacity: 0;
}
/* Entrance: the robot rises from fully behind the card edge after a short
   beat. Pure CSS on the two-column desktop fold (runs from first SSG paint,
   no hydration flash); on the stacked <=1024px layouts the JS rig holds it
   (--armed) until the card scrolls into view, then replays the same
   keyframes (--enter). */
@keyframes lp-peek-rise {
  from {
    transform: translateY(55%);
  }
  to {
    transform: translateY(0);
  }
}
@media (min-width: 1025px) {
  .lp-hero__form-peek {
    animation: lp-peek-rise 0.9s ease-in-out 0.7s both;
  }
}
.lp-hero__form-peek--armed {
  transform: translateY(55%);
}
.lp-hero__form-peek--enter {
  animation: lp-peek-rise 0.9s ease-in-out 0.15s both;
}
/* Idle loop: gentle head bob + antenna sway + occasional blink. Small
   amplitudes - charm, not distraction. The bob keyframes re-state the pose's
   -8deg head tilt because a CSS transform replaces the SVG attribute
   transform; origins are in user units of the 240 grid. */
@keyframes lp-peek-bob {
  0%,
  100% {
    transform: translateY(0) rotate(-8deg);
  }
  50% {
    transform: translateY(-2.5px) rotate(-8deg);
  }
}
@keyframes lp-peek-sway-l {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(3deg);
  }
}
@keyframes lp-peek-sway-r {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-2.5deg);
  }
}
@keyframes lp-peek-blink {
  0%,
  91%,
  100% {
    transform: scaleY(1);
  }
  93.5%,
  96.5% {
    transform: scaleY(0.08);
  }
}
.lp-hero__form-peek #fp-head {
  transform-origin: 120px 114px;
  animation: lp-peek-bob 6s ease-in-out 2.2s infinite;
}
.lp-hero__form-peek #fp-antenna-l {
  transform-origin: 108px 68px;
  animation: lp-peek-sway-l 5.4s ease-in-out 2.2s infinite;
}
.lp-hero__form-peek #fp-antenna-r {
  transform-origin: 132px 68px;
  animation: lp-peek-sway-r 6.6s ease-in-out 2.2s infinite;
}
.lp-hero__form-peek #fp-eye-l,
.lp-hero__form-peek #fp-eye-r {
  transform-box: fill-box;
  transform-origin: center;
  animation: lp-peek-blink 5.2s ease-in-out 3s infinite;
}
/* JS pupil tracking eases between offsets (the circles are the "pupils"). */
.lp-hero__form-peek #fp-pupil-l,
.lp-hero__form-peek #fp-pupil-r {
  transition: transform 0.16s ease-in-out;
}
/* ── Chin-rest doze (the demo's "Chin rest" variant as a rig state) ──
   After ~9s without pointer / scroll / focus activity the JS rig adds
   --rest: the spread grip+point hands fade out as folded forearms + fists
   rise onto the ledge, the head settles chin-on-fists (the pose group adds
   +13deg over the base -8deg tilt = the demo's +5deg, with a small lift so
   the chin lands ON the fists), and the eyes close into the content
   closed-eye smile. Any activity wakes it (fast reverse: eyes open first).
   All motion is transform/opacity; the idle bob keeps running underneath as
   a breathing beat. Fully static under prefers-reduced-motion (the JS rig
   never arms the doze timer there, and the block below flattens transitions). */
.lp-hero__form-peek #fp-pose {
  transform-origin: 120px 114px;
  transition: transform 1.1s ease-in-out;
}
.lp-hero__form-peek #fp-hand-grip,
.lp-hero__form-peek #fp-hand-point,
.lp-hero__form-peek #fp-eye-l,
.lp-hero__form-peek #fp-eye-r,
.lp-hero__form-peek #fp-mouth {
  transition: opacity 0.35s ease-in-out;
}
.lp-hero__form-peek #fp-rest,
.lp-hero__form-peek #fp-eyes-rest,
.lp-hero__form-peek #fp-mouth-rest {
  opacity: 0;
  transition: opacity 0.35s ease-in-out;
}
.lp-hero__form-peek--rest #fp-pose {
  transform: translateY(-8px) rotate(13deg);
}
.lp-hero__form-peek--rest #fp-hand-grip,
.lp-hero__form-peek--rest #fp-hand-point {
  opacity: 0;
}
.lp-hero__form-peek--rest #fp-rest {
  opacity: 1;
  transition-delay: 0.3s;
}
.lp-hero__form-peek--rest #fp-eye-l,
.lp-hero__form-peek--rest #fp-eye-r,
.lp-hero__form-peek--rest #fp-mouth {
  opacity: 0;
  transition-delay: 0.65s;
  transition-duration: 0.25s;
}
.lp-hero__form-peek--rest #fp-eyes-rest,
.lp-hero__form-peek--rest #fp-mouth-rest {
  opacity: 1;
  transition-delay: 0.72s;
  transition-duration: 0.3s;
}
/* Blink is meaningless behind closed lids - hold it while dozing. */
.lp-hero__form-peek--rest #fp-eye-l,
.lp-hero__form-peek--rest #fp-eye-r {
  animation-play-state: paused;
}
@media print {
  .lp-hero__form-peek {
    display: none;
  }
}
/* The .lp-hero__form-col IS the frosted card now (LpForm's own card chrome is
   neutralized below, so there is no card-in-card). It is the heaviest object
   in the fold by shadow depth - that is how it anchors, not by height. */
/* One glass recipe across all three conversion surfaces (hero card, wizard
   card, final quick form): radius-xl, border-light, blur(16px)/160%. */
.lp-hero__form-col {
  position: relative;
  /* Anchor target of the mobile header CTA (#lp-hero-form): clear the sticky
     header on tablets; phones (static header) tighten this below. */
  scroll-margin-block-start: calc(56px + var(--space-md));
  /* Above the form-peek overlay; the glass then blurs the body behind it. */
  z-index: 1;
  inline-size: 100%;
  padding: var(--space-xl);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-light);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
/* The fold's ONE sanctioned decorative gradient: a 2px brand-gradient rule
   capping the card top, echoing the mascot's gradient line-art. Clipped to the
   card radius by overflow:hidden. Never sits behind text. */
.lp-hero__form-col::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  background: linear-gradient(90deg, #0894ff 0%, #bd32d6 50%, #ffa304 100%);
  pointer-events: none;
}
.lp-hero__form-header {
  margin-block-end: var(--space-md);
  padding-block-end: var(--space-md);
  border-block-end: 1px solid rgba(0, 60, 130, 0.08);
}
.lp-hero__form-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--primary-color);
  margin: 0 0 var(--space-xs);
}
.lp-hero__form-title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-color);
  margin: 0 0 4px;
}
.lp-hero__form-subline {
  font-size: 14px;
  line-height: 1.5;
  /* Full text color (owner call 2026-07-22): the longer subline is a real
     pitch line now, not card chrome - secondary gray read too faint. */
  color: var(--text-color);
  margin: 0;
  margin-top: 10px;
}
/* Scarcity line under the subline - quiet urgency, brand blue, no shouting. */
.lp-hero__form-urgency {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--primary-color);
  margin: var(--space-lg) 0 0;
}
/* Neutralize LpForm's own card so the outer form-col is the single card. */
.lp-hero__form-col .lp-form-wrap {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
/* Mascot crowning the H1 across the stacked hero (mobile + tablet, <=1024px).
   Hidden from 1025px up, where the two-column fold top-aligns the H1 to the
   form card and a mascot above it would break that alignment. Static pose,
   centered over the centered stacked-hero copy (matches .lp-secmascot). */
.lp-hero__cape {
  display: none;
}
@media (max-width: 1024px) {
  .lp-hero__cape {
    display: block;
    inline-size: 180px;
    margin: 0 auto var(--space-sm);
    /* Hidden until the client picks the random pose (LpHeroMascot mounts and
       adds .is-ready), so the deterministic SSR default never flashes. */
    opacity: 0;
    transition: opacity 260ms ease;
  }
  .lp-hero__cape.is-ready {
    opacity: 1;
  }
}
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .lp-hero__cape {
    transition: none;
  }
}
.lp-hero__h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.8vw, 46px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.14;
  color: var(--text-color);
  margin-block-end: var(--space-md);
}
.lp-hero__logo {
  vertical-align: baseline;
}
/* The thin Logo10x SVG canvas carries ~8/105em of empty space after the
   wordmark (viewBox 620 wide, artwork ends at x=612). On its own wrapped line
   the box edge - not the artwork - aligns to the RTL line start, indenting
   the mark slightly from the headline above. Pull it flush. Only >=1025px:
   the stacked hero (mobile + tablet) centers its lines, where the correction
   over-shifts. */
@media (min-width: 1025px) {
  .lp-hero__logo {
    margin-inline-start: -0.08em;
  }
}
.lp-hero__subtitle.lp-hero__subtitle_2
{
  font-size: clamp(15px, 2vw, 20px);
  color: black;

}
.lp-hero__subtitle {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.6vw, 24px);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--primary-color);
  margin-block-end: var(--space-sm);
}

/* ── What is 10x ────────────────────────────────────────────────── */
/* White editorial section with the faint '10x' gradient text watermark
   (ported from the home/module pattern) and a bottom brand hairline bracket.
   Content needs z-index above the watermark. */
.lp-what {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.lp-what::before {
  content: '10x';
  position: absolute;
  top: 61%;
  left: 70%;
  transform: translate(-52%, -50%);
  font-family: var(--font-display);
  font-size: min(46vw, 560px);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.85;
  white-space: nowrap;
  background: linear-gradient(
    160deg,
    rgba(8, 148, 255, 0.09) 0%,
    rgba(100, 98, 234, 0.02) 40%,
    rgba(189, 50, 214, 0.05) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
/* (Section-close hairline now comes from the uniform .lp-section top-edge
   border - see the Sections block.) */
.lp-what__inner {
  position: relative;
  z-index: 1;
}
.lp-what__lead {
  text-align: center;
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-color);
  max-inline-size: 640px;
  margin: 0 auto var(--space-lg);
}
.lp-what__bullets {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-inline-size: 640px;
  display: grid;
  gap: var(--space-sm);
}
.lp-what__bullet {
  position: relative;
  padding-inline-start: 30px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}
.lp-what__bullet::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.62em;
  inline-size: 16px;
  block-size: 16px;
  border-radius: var(--radius-full);
  background:
    linear-gradient(135deg, #0894ff 0%, #6462ea 100%);
  opacity: 0.9;
}

/* ── Open day: two-column - descriptive text (RTL right) beside the
   embedded compact wizard (RTL left). Text format + copy mirror the home
   OpenDayCtaSection (eyebrow + accented title + lead + icon facts). ── */
.lp-openday {
  /* Clear the sticky header on anchor jumps from the hero / header / alumni. */
  scroll-margin-block-start: calc(56px + var(--space-md));
}
.lp-openday__inner {
  /* Wider than the default 880px so both columns breathe. */
  max-inline-size: 1080px;
  display: grid;
  /* Wizard column (inline-end) leads the layout; the intro column takes the
     narrower remainder. */
  grid-template-columns: minmax(0, 1fr) minmax(440px, 560px);
  gap: var(--space-2xl);
  align-items: start;
}

/* ── Intro column (RTL right) ── */
.lp-openday__intro {
  text-align: start;
}
.lp-openday__title {
  text-align: start;
  margin-block-end: var(--space-md);
}
.lp-openday__title-accent {
  color: var(--primary-color);
}
/* Header row: eyebrow + two-line title at the reading start (right), the point
   mascot at the inline-end (left) pointing across the gap at the wizard. */
.lp-openday__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.lp-openday__head-text {
  min-inline-size: 0;
}
/* Black line stacked over the blue line - the title stays narrow so the
   mascot has room beside it (owner: preserve width for the mascot). */
.lp-openday__title-line {
  display: block;
}
.lp-openday__lead {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-block: 0 var(--space-lg);
}

/* ── Icon facts (mirrors the home open-day facts; single column) ── */
.lp-openday__facts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-md);
}
.lp-openday__fact {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
}
.lp-openday__fact-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: var(--radius-md);
  background: rgba(8, 148, 255, 0.08);
  color: var(--primary-color);
}
.lp-fact-icon {
  display: block;
  inline-size: 22px;
  block-size: 22px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.lp-fact-icon--clock {
  -webkit-mask-image: url('/icons/pillars/clock.svg');
  mask-image: url('/icons/pillars/clock.svg');
}
.lp-fact-icon--user {
  -webkit-mask-image: url('/icons/pillars/user-tie.svg');
  mask-image: url('/icons/pillars/user-tie.svg');
}
.lp-fact-icon--tag {
  -webkit-mask-image: url('/icons/pillars/tag.svg');
  mask-image: url('/icons/pillars/tag.svg');
}
.lp-openday__fact-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}
.lp-openday__fact-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-color);
}
.lp-openday__fact-desc {
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--text-secondary);
}
/* Desktop: vertically balance the short intro against the tall wizard card
   (the grid keeps align-items: start so the card stays top-anchored while
   its height changes across wizard steps). */
@media (min-width: 1025px) {
  .lp-openday__intro {
    align-self: center;
  }
}

/* ── Wizard column (RTL left) - frosted card around the compact wizard.
   The global .wizard-* styles carry the flow; the compact variant
   (.wizard-container--compact, in open-day-view.css) narrows it. ── */
.lp-openday__wizard-wrap {
  padding: var(--space-lg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  /* Glassier than the usual 0.85 card - the section tint reads through; the
     date slots inside keep their own solid #fff (open-day-upcoming-dates.css)
     so the choices stay maximally legible. */
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: var(--shadow-md);
}
.lp-openday__wizard {
  margin: 0;
}
/* Emphasize the primary "continue" action. */
.lp-openday__wizard .wizard-nav .btn-primary {
  min-inline-size: 150px;
}
/* Emphasize date selection: lift the selected slot. */
.lp-openday__wizard .upcoming-dates-item-inner.is-selected {
  box-shadow: 0 0 0 2px var(--primary-color), var(--shadow-md);
}
/* Pre-registration calendar/Waze rows are a conversion leak on the LP (a
   visitor can calendar the event believing they registered) and quadruple
   the tappables around the one real choice. The success screen's calendar
   actions (.wizard-success-calendar) are untouched. */
.lp-openday__wizard .upcoming-dates-actions {
  display: none;
}
/* The globally faded disabled state (opacity 0.45) reads broken, not locked.
   Solid quiet chrome flips to the purple primary the moment a date is picked. */
.lp-openday__wizard .wizard-nav .btn-primary:disabled {
  opacity: 1;
  background: var(--border-light);
  color: var(--text-tertiary);
  box-shadow: none;
}
/* The wizard opens on the date step (progress 0%), which renders the bar as
   a bare grey rule. Cool the track and keep a brand sliver visible so it
   reads "step 1 of N", not "unstyled element". */
.lp-openday__wizard .wizard-progress {
  background: var(--border-light);
}
.lp-openday__wizard .wizard-progress-fill {
  min-inline-size: 10%;
}

/* ── Differentiators ────────────────────────────────────────────── */
.lp-diff__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.lp-diff__card {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}
.lp-diff__card-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-color);
  text-wrap: balance;
  margin-block-end: var(--space-sm);
}
.lp-diff__card-body {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-secondary);
  text-wrap: pretty;
  margin: 0;
}

/* ── Curriculum teaser (compact) (item 9) ─────────────────────────── */
.lp-curriculum__lead {
  text-align: center;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-inline-size: 640px;
  margin: 0 auto var(--space-xl);
}
.lp-curriculum__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}
.lp-curriculum__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: var(--shadow-sm);
}
.lp-curriculum__col-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-block-end: var(--space-md);
  border-block-end: 1px solid var(--border-light);
}
.lp-curriculum__logo {
  block-size: 22px;
  inline-size: auto;
}
.lp-curriculum__counts {
  font-size: 13px;
  color: var(--text-tertiary);
  margin: 0;
}
.lp-curriculum__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-xs);
  counter-reset: lp-curr;
  flex: 1 1 auto;
}
.lp-curriculum__item {
  position: relative;
  counter-increment: lp-curr;
  padding-inline-start: 30px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-color);
}
.lp-curriculum__item::before {
  content: counter(lp-curr, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.15em;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--primary-color);
}
.lp-curriculum__cta {
  align-self: flex-start;
  font-size: 15px;
  color: var(--primary-color);
  text-decoration: none;
  margin-block-start: var(--space-xs);
}
.lp-curriculum__cta::after {
  content: ' ←';
}
.lp-curriculum__cta:hover {
  text-decoration: underline;
}

/* ── Next cohort (compact, price-free) (item 10) ──────────────────── */
.lp-cohort__inner {
  max-inline-size: 760px;
}

/* ── Alumni swipe scroller ──────────────────────────────────────── */
.lp-alumni__scroller {
  position: relative;
}
/* Manual scroll-snap track: ~3 cards on desktop, ~2 on tablet, one card with
   a next-card peek on mobile. Never autoplays. */
.lp-alumni__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--space-lg)) / 3);
  gap: var(--space-lg);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  list-style: none;
  padding: 4px;
  margin: 0;
  padding-block-end: var(--space-sm);
  scrollbar-width: thin;
}
.lp-alumni__card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
  text-align: start;
  margin: 0;
}
.lp-alumni__quote-mark {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 0.6;
  color: var(--primary-color);
  opacity: 0.45;
}
.lp-alumni__quote {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-color);
  flex: 1 1 auto;
}
/* Closing gershayim at the bottom-left - bookends the opening quote-mark
   (top) that leads the card. text-align:end resolves to physical left in RTL,
   where a Hebrew quote closes. */
.lp-alumni__quote::after {
  content: '״';
  display: block;
  margin-block-start: 2px;
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 0.5;
  color: var(--primary-color);
  opacity: 0.45;
  text-align: end;
}
.lp-alumni__by {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-block-start: var(--space-sm);
}
.lp-alumni__avatar {
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex: 0 0 auto;
}
.lp-alumni__meta {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}
.lp-alumni__name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-color);
}
.lp-alumni__role {
  font-size: 0.85rem;
  color: var(--text-secondary);
  /* Belt-and-suspenders with the single-<bdi> byline: mixed LTR role/company
     lines resolve by their own first strong character, not the RTL page. */
  unicode-bidi: plaintext;
}
/* Arrow buttons: desktop-only affordance over the track edges. */
.lp-alumni__arrow {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  z-index: 2;
  inline-size: 40px;
  block-size: 40px;
  padding: 0;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow-md);
  cursor: pointer;
}
.lp-alumni__arrow:hover {
  border-color: var(--primary-color);
}
.lp-alumni__arrow--prev {
  inset-inline-start: -12px;
}
.lp-alumni__arrow--next {
  inset-inline-end: -12px;
}
.lp-alumni__arrow-glyph {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 9px;
  block-size: 9px;
  border-block-start: 2px solid var(--text-color);
  border-inline-end: 2px solid var(--text-color);
}
/* Chevrons: "prev" points to the track start (right in RTL), "next" left.
   Glyph borders are block-start + inline-end, so in RTL: 135deg = right,
   -45deg = left. */
.lp-alumni__arrow-glyph--prev {
  transform: translate(35%, -50%) rotate(135deg);
}
.lp-alumni__arrow-glyph--next {
  transform: translate(65%, -50%) rotate(-45deg);
}
.lp-alumni__cta {
  display: flex;
  justify-content: center;
  margin-block-start: var(--space-xl);
}
.lp-alumni__cta .lp-cta {
  min-inline-size: min(360px, 100%);
}

/* ── Lecturer teaser ────────────────────────────────────────────── */
.lp-lecturer__inner {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: center;
  max-inline-size: 900px;
}
/* Transparent cutout floats on the section background (same technique and
   crop knobs as the about-lecturer portrait card, LP-scoped). */
.lp-lecturer__media {
  position: relative;
  inline-size: 100%;
  max-inline-size: 280px;
  aspect-ratio: 4 / 5;
  background-image: url('/images/rotemx-navy-cutout-q65.webp');
  background-repeat: no-repeat;
  background-size: 136%;
  background-position: 59% 14%;
}
/* Soft seat glow behind the figure (module-hero glow language). */
.lp-lecturer__media::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 60%, rgba(8, 148, 255, 0.07) 0%, transparent 70%);
  z-index: -1;
  pointer-events: none;
}
.lp-lecturer__title {
  text-align: start;
  margin-block-end: var(--space-sm);
}
.lp-lecturer__bio {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-block: 0 var(--space-lg);
}
/* Gradient eyebrow (item 8): mono kicker with a thin brand-gradient rule. */
/* Exit-stat pull-quote: a thin gradient rule over the "6 exits" proof line. */
.lp-lecturer__exit-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-block: var(--space-md) var(--space-lg);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.5;
}
.lp-lecturer__exit-stat::before {
  content: '';
  inline-size: 56px;
  block-size: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0894ff 0%, #bd32d6 50%, #ffa304 100%);
}
.lp-lecturer__exit-line {
  color: var(--text-secondary);
}
.lp-lecturer__exit-emph {
  font-weight: 600;
  color: var(--text-color);
}
/* Gradient stat tiles (weight-200 numerals) - the brand-signature move; the
   gradient is sanctioned here precisely because the numeral is light-weight. */
.lp-lecturer__tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  margin-block-end: var(--space-lg);
}
.lp-lecturer__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--space-md) var(--space-sm);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.lp-lecturer__tile-value {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: 'Helvetica Neue', var(--font-display);
  font-size: 40px;
  font-weight: 200;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(90deg, #0894ff 0%, #bd32d6 35%, #6462ea 50%, #0894ff 70%, #ffa304 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lp-lecturer__tile-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  line-height: 1.3;
}
.lp-lecturer__more {
  display: inline-block;
  font-size: 15px;
  color: var(--primary-color);
  text-decoration: none;
}
.lp-lecturer__more::after {
  content: ' ←';
}
.lp-lecturer__more:hover {
  text-decoration: underline;
}

/* ── Location & environment: compact venue teaser (after the wizard) ──
   A centered eyebrow that ends in the Mindspace wordmark + a brand hairline,
   over a two-column photo/facts card. Airier than the wizard card above it
   (no outer chrome) - the photo figure carries the only shadow so the two
   asks don't read as a stack of identical cards. */
.lp-location__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.14em;
  font-family: var(--font-display);
  font-size: clamp(15px, 1.9vw, 18px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text-secondary);
  text-align: center;
  margin-block: 0 var(--space-md);
}
.lp-location__mindspace {
  display: inline-block;
  block-size: 1.45em;
  inline-size: auto;
  /* Optical lift: the wordmark's x-height sits low against the Hebrew line. */
  transform: translateY(0.06em);
}
/* The header's single gradient accent - matches the section-title hairline. */
.lp-location__hairline {
  display: block;
  inline-size: 56px;
  block-size: 2px;
  border-radius: 999px;
  margin-inline: auto;
  background: linear-gradient(90deg, #0894ff 0%, #bd32d6 50%, #ffa304 100%);
}

/* Band: a 2x2 grid of icon cards (reading start) beside a short venue photo
   (reading end). Wide and low - the redesign trades the tall photo + bullets
   stack for a dense card cluster. align-items: stretch lets the photo match
   the two card rows, so the photo never drives extra height. */
.lp-location__inner {
  max-inline-size: 960px;
}
/* Lower profile than the default section rhythm - the redesign is meant to
   read as a compact logistics strip, not a full content section. */
.lp-location {
  padding-block: var(--space-lg);
}
.lp-location__band {
  display: grid;
  grid-template-columns: 1.16fr 0.84fr;
  gap: clamp(14px, 2vw, 24px);
  align-items: stretch;
  margin-block-start: var(--space-lg);
}
.lp-location__cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1.3vw, 14px);
}
.lp-location__card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.lp-location__card-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
}
.lp-location__card-icon {
  color: var(--primary-color);
  font-size: 14px;
}
.lp-location__card-value {
  font-size: clamp(15px, 1.5vw, 16.5px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text-color);
}
.lp-location__card-sub {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-secondary);
}
/* The photo is out of flow (position: absolute) so its native height never
   inflates the band - the card cluster alone drives the row height and the
   photo simply fills whatever that is (min floor for the rare short case). */
.lp-location__figure {
  position: relative;
  margin: 0;
  min-block-size: 200px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-light);
  box-shadow:
    0 1px 2px rgba(0, 60, 130, 0.06),
    0 16px 40px rgba(0, 60, 130, 0.12);
}
.lp-location__img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Tablet: keep the two columns, just tighten. */
@media (max-width: 1024px) {
  .lp-location__band {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

@media (max-width: 767px) {
  .lp-location__band {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  /* Photo on top, then the 2x2 cards (kept two-up - they stay compact). */
  .lp-location__figure {
    order: -1;
  }
  .lp-location__img {
    block-size: 190px;
    min-block-size: 0;
  }
}

/* Only the narrowest phones drop to a single card column; everywhere else the
   2-up grid stays (shorter than a 4-card stack). */
@media (max-width: 359px) {
  .lp-location__cards {
    grid-template-columns: 1fr;
  }
}

/* ── Who it is for: card-less audience rows (item 7) ─────────────── */
/* The /course co-audience design compacted: no card chrome at all - mask
   icon leading, bold title + one-line desc, mono index bookending at
   inline-end. Header mirrors the home-page audience section (mono eyebrow
   over the title, brand-gradient hairline under it). */
.lp-who__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg) var(--space-2xl);
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-inline-size: 860px;
}
.lp-who__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  /* Keeps wrapped text clear of the absolute index badge. */
  padding-inline-end: var(--space-xl);
}
.lp-who__index {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-end: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--text-tertiary);
  opacity: 0.55;
}
.lp-who__icon {
  flex: 0 0 auto;
  inline-size: 26px;
  block-size: 26px;
  margin-block-start: 2px;
  background-color: var(--text-color);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.lp-who__icon--future {
  -webkit-mask-image: url('/icons/audience/sparkles.svg');
  mask-image: url('/icons/audience/sparkles.svg');
}
.lp-who__icon--entrepreneurs {
  -webkit-mask-image: url('/icons/audience/lightbulb-on.svg');
  mask-image: url('/icons/audience/lightbulb-on.svg');
}
.lp-who__icon--product-managers {
  -webkit-mask-image: url('/icons/audience/diagram-project.svg');
  mask-image: url('/icons/audience/diagram-project.svg');
}
.lp-who__icon--data-analysts {
  -webkit-mask-image: url('/icons/audience/chart-line.svg');
  mask-image: url('/icons/audience/chart-line.svg');
}
.lp-who__icon--tech-leaders {
  -webkit-mask-image: url('/icons/audience/users-gear.svg');
  mask-image: url('/icons/audience/users-gear.svg');
}
.lp-who__icon--builders {
  -webkit-mask-image: url('/icons/audience/rocket-launch.svg');
  mask-image: url('/icons/audience/rocket-launch.svg');
}
.lp-who__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}
.lp-who__item-title {
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-color);
}
.lp-who__item-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  text-wrap: pretty;
}
/* Featured bookends ("programmer of the future" / "build a product"): same
   card-less row as the rest - the emphasis is a color scheme, not chrome:
   brand-gradient icon + solid brand-blue bold title (the gradient itself
   never sits on bold text, per the brand rule). */
.lp-who__item--featured {
  grid-column: 1 / -1;
}
.lp-who__item--featured .lp-who__icon {
  inline-size: 32px;
  block-size: 32px;
  background: linear-gradient(135deg, #0894ff 0%, #bd32d6 55%, #ffa304 100%);
}
.lp-who__item--featured .lp-who__item-title {
  font-size: 19px;
  color: var(--primary-color);
}
.lp-who__item--featured .lp-who__item-desc {
  font-size: 15px;
  color: var(--text-color);
}
.lp-who__item--featured .lp-who__index {
  color: var(--primary-color);
  opacity: 0.7;
}
.lp-who__exclusion {
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-tertiary);
  max-inline-size: 620px;
  margin: var(--space-lg) auto 0;
}

/* ── Logistics + countdown ──────────────────────────────────────── */
/* ── Countdown (minimal) ────────────────────────────────────────────
   Closes each conversion surface (hero form, wizard, final form). No boxes,
   no shadows: a quiet label carrying the 10x mark + four evenly-spaced mono
   units. Reserved clock height keeps the skeleton -> live swap CLS-free. */
.lp-countdown {
  text-align: center;
}
/* Slot modifier: a hairline divider offsets the countdown from the form above
   it wherever it closes a conversion block. */
.lp-countdown--slot {
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-lg);
  border-block-start: 1px solid var(--border-light);
}
.lp-countdown__label {
  margin: 0 0 var(--space-md);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-secondary);
}
/* Optical baseline nudge for the inline 10x mark inside the label. */
.lp-countdown__mark {
  vertical-align: -0.08em;
}
.lp-countdown__clock {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: var(--space-lg);
  /* Digital-clock convention: units run LTR (days leftmost) even on RTL. */
  direction: ltr;
  /* Reserved height so the skeleton -> live swap never shifts layout. */
  min-block-size: 52px;
}
.lp-countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-inline-size: 44px;
}
.lp-countdown__num {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-color);
  font-variant-numeric: tabular-nums;
}
.lp-countdown__lbl {
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
}
.lp-countdown__empty {
  margin: 0;
  margin-inline: auto;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-inline-size: 360px;
}
/* Far-date replacement (nearest date > 7 days out): one static dated line
   in the label's voice, the date itself carrying the ink. Centered inside
   the SAME footprint as the label + reserved clock (21 + 16 + 52 = 89px) so
   the skeleton -> static swap stays CLS-free, like the clock swap. */
.lp-countdown__static {
  display: grid;
  align-content: center;
  min-block-size: 89px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-secondary);
}
.lp-countdown__static-date {
  font-weight: 600;
  color: var(--text-color);
}

/* ── FAQ accordion ──────────────────────────────────────────────── */
.lp-faq {
  max-inline-size: 760px;
  margin-inline: auto;
  border-block-start: 1px solid var(--border-light);
}
.lp-faq__item {
  border-block-end: 1px solid var(--border-light);
}
.lp-faq__q-wrap {
  margin: 0;
}
.lp-faq__q {
  inline-size: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-block-size: 60px;
  padding-block: var(--space-md);
  padding-inline: 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: start;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  color: var(--text-color);
}
.lp-faq__q-text {
  flex: 1;
}
.lp-faq__icon {
  position: relative;
  flex: none;
  inline-size: 20px;
  block-size: 20px;
}
.lp-faq__icon::before,
.lp-faq__icon::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  background: var(--primary-color);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.lp-faq__icon::before {
  inline-size: 14px;
  block-size: 2px;
  transform: translate(50%, -50%);
}
.lp-faq__icon::after {
  inline-size: 2px;
  block-size: 14px;
  transform: translate(50%, -50%);
}
.lp-faq__item--open .lp-faq__icon::after {
  transform: translate(50%, -50%) scaleY(0);
  opacity: 0;
}
.lp-faq__panel {
  padding-block-end: var(--space-md);
}
.lp-faq__a {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0;
}

/* ── Final CTA + form ───────────────────────────────────────────── */
.lp-register {
  position: relative;
  /* Clear the sticky header on anchor jumps (header is static under 767px). */
  scroll-margin-block-start: calc(64px + var(--space-lg));
}
.lp-register__inner {
  position: relative;
  z-index: 1;
  max-inline-size: 560px;
}
.lp-register__subhead {
  text-align: center;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-block-end: var(--space-xl);
}
.lp-register__or {
  text-align: center;
  font-size: 14px;
  color: var(--text-tertiary);
  margin-block: var(--space-md);
}
.lp-register__wa-alt {
  margin-block-start: var(--space-lg);
}
/* Final quick form joins the shared glass recipe (the hero's neutralized
   inner .lp-form-wrap instance is scoped out by .lp-register). */
.lp-register .lp-form-wrap {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: var(--shadow-lg);
}

.lp-form-wrap {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-md);
}
.lp-form {
  display: grid;
  gap: var(--space-md);
}
.lp-field {
  display: grid;
  gap: 6px;
}
.lp-field__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color);
}
.lp-field__input {
  inline-size: 100%;
  min-block-size: 52px;
  padding-block: 12px;
  padding-inline: 16px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  /* 16px min avoids iOS zoom-on-focus. */
  font-size: 16px;
  color: var(--text-color);
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* All /lp forms share one light-gray placeholder tone: the hero/quick-form
   fields here plus the embedded open-day wizard's inputs (scoped to .lp-page
   so the standalone /open-day keeps its own styling). */
.lp-field__input::placeholder,
.lp-page .wizard-input::placeholder,
.lp-page .wizard-option-text-input::placeholder {
  color: #9ca3af;
}
.lp-field__input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--primary-light);
}
.lp-field__input--tel {
  text-align: start;
}
.lp-field__input--error {
  border-color: #d33a2c;
}
.lp-field__input--error:focus {
  box-shadow: 0 0 0 3px rgba(211, 58, 44, 0.12);
}
.lp-field__err {
  font-size: 13px;
  color: #d33a2c;
}
.lp-form__submit {
  margin-block-start: var(--space-xs);
}
/* Mandatory contact consent, directly above the submit. It replaced the
   passive consent LINE that used to sit under the button, so the row costs
   the hero card less height than it looks: this is the page's only consent
   statement now. Deliberately quiet - tertiary text a step below the field
   labels, no fill and no border of its own - because it must not compete
   with the ask it sits above.
   RTL: `display: flex` under the page's global `direction: rtl` puts the box
   at the reading start (right) with no side-specific rule. */
.lp-consent {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  cursor: pointer;
  /* A label forwards a click to its control, and a drag that starts and ends
     inside the text IS a click. Without this, somebody highlighting the
     sentence to read it carefully before agreeing untick the box they had just
     ticked - which is why the contact form's own `.consent` carries the same
     line. */
  user-select: none;
}
/* Finger-sized target. The whole label toggles, but the box is what people
   aim at on a phone. */
.lp-consent__box {
  flex: 0 0 24px;
  inline-size: 24px;
  block-size: 24px;
  margin: 0;
  accent-color: var(--primary-color);
  cursor: pointer;
}
.lp-consent__text {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-tertiary);
  /* Never strand the trailing inline 10x mark alone on its own line. */
  text-wrap: pretty;
}
.lp-consent--error .lp-consent__text {
  color: #d33a2c;
}
.lp-consent--error .lp-consent__box {
  accent-color: #d33a2c;
  /* box-shadow, not outline - outline would suppress the UA focus ring. */
  box-shadow: 0 0 0 1.5px #d33a2c;
  border-radius: 3px;
}
/* Honeypots: off-screen + non-interactive, never shown to real users. */
.lp-hp {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lp-form__fallback {
  margin-block-start: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid rgba(30, 177, 78, 0.25);
  border-radius: var(--radius-md);
  background: rgba(30, 177, 78, 0.05);
  text-align: center;
}
.lp-form__fallback-msg {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-color);
  margin-block: 0 var(--space-md);
}

/* ── Quick-form step 2: the optional email ──────────────────────────
   Rendered BETWEEN the form and the thank-you, and only once the lead is
   already in the CRM - so nothing in here can cost a lead. That is why the
   green acknowledgement leads and the skip is a plain text button rather than a
   second filled pill: the two ways out are equally good, and the layout must
   not pretend otherwise. Fields, submit and errors are the form's own classes,
   unchanged. */
.lp-form-email {
  display: grid;
  gap: var(--space-md);
}
/* The confirmation green, darkened from the WhatsApp fallback panel's
   rgba(30, 177, 78, ...) so it clears 4.5:1 on white as TEXT - that value is a
   border and a 5%-alpha fill there, never type. Same hue family, so the card
   still has one "this worked" tone. */
.lp-form-email__ack {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #157f39;
  margin-block: 0;
}
.lp-form-email__ack-icon {
  font-size: 18px;
  line-height: 1;
}
.lp-form-email__intro {
  display: grid;
  gap: 6px;
}
.lp-form-email__heading {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-color);
  margin-block: 0;
}
/* Quiet, at the consent sentence's size: it is a reassurance, not the ask. */
.lp-form-email__note {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-tertiary);
  margin-block: 0;
  text-wrap: pretty;
}
.lp-form-email__fail {
  font-size: 13px;
  line-height: 1.5;
  color: #d33a2c;
  text-align: center;
  margin-block: 0;
}
.lp-form-email__skip {
  justify-self: center;
  padding: 6px 12px;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.2s ease;
}
.lp-form-email__skip:hover {
  color: var(--text-color);
}

/* ── Quick-form thank-you: a lead was captured, nothing was booked ──
   Two stacked blocks: the confirmation (text + thumbs-up bust) and the
   hand-off to the wizard (copy + CTA + pointing bust), split by a hairline. */
.lp-form-success {
  text-align: center;
}
/* Confirmation text at the reading start, static thumbs-up bust beside it. */
.lp-form-success__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  text-align: start;
  margin-block-end: var(--space-lg);
}
.lp-form-success__mascot {
  flex: 0 0 auto;
  inline-size: 128px;
}
.lp-form-success__heading {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--text-color);
  margin-block-end: var(--space-sm);
}
.lp-form-success__body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-block-end: 0;
}
/* The next open day - named, never presented as a reserved seat, so it reads
   one step quieter than the confirmation heading above it. */
.lp-form-success__date {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--primary-color);
  margin-block: var(--space-md) 0;
}
/* The label breaks to its own line first, so "date · hour" stays whole. */
.lp-form-success__date-label {
  flex: 1 0 100%;
  font-weight: 400;
  font-size: 15px;
  color: var(--text-secondary);
}
.lp-form-success__date-when {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}
.lp-form-success__date-sep {
  color: var(--text-tertiary);
  font-weight: 400;
}

/* Hand-off to the wizard: the mascot points at the CTA (inline-end in RTL,
   i.e. the gesture aims back at the button beside it). */
.lp-form-success__next {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding-block-start: var(--space-lg);
  border-block-start: 1px solid var(--border-light);
  text-align: start;
}
.lp-form-success__next-text {
  min-inline-size: 0;
}
.lp-form-success__next-prompt {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--text-color);
  margin-block: 0 4px;
}
.lp-form-success__next-note {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-block: 0 var(--space-md);
}
.lp-form-success__next-cta {
  inline-size: 100%;
}
.lp-form-success__next-mascot {
  flex: 0 0 auto;
  inline-size: 104px;
}

/* ── Footer ─────────────────────────────────────────────────────── */
.lp-footer {
  padding-block: var(--space-xl);
  padding-inline: var(--space-lg);
  border-block-start: 1px solid var(--border-light);
}
.lp-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  align-items: center;
  justify-content: center;
  max-inline-size: 880px;
  margin-inline: auto;
  font-size: 14px;
  color: var(--text-secondary);
}
/* Combined program mark (Logo10xCourse, light weight keeps the gradient
   legible). The wrapper sets the height; the component scales to it. */
.lp-footer__brand {
  display: inline-flex;
  align-items: center;
}
.lp-footer__brand-logo {
  block-size: 20px;
}
.lp-footer__link {
  color: var(--text-secondary);
  text-decoration: none;
}
.lp-footer__link:hover {
  color: var(--primary-color);
  text-decoration: underline;
}
/* End-of-page full-site link (variant opt-in): brand blue against the
   quiet gray footer links. */
.lp-footer__site {
  color: var(--primary-color);
  font-weight: 500;
}

/* ── Mobile floating register button + bottom-sheet form ────────────
   Replaced the two-CTA sticky bar (owner decision 2026-07-25): ONE primary
   pill floats over the page once the hero form card scrolls away; tapping it
   opens a modal bottom sheet holding the quick form (third LpForm instance,
   shared state) + a quiet ghost WhatsApp link. Phones only (<=767px). */
.lp-sticky-register {
  position: fixed;
  inset-inline: 0;
  inset-block-end: calc(12px + env(safe-area-inset-bottom));
  z-index: 900;
  display: none;
  justify-content: center;
  /* The wrapper spans the viewport for centering only - taps pass through. */
  pointer-events: none;
}
.lp-sticky-register__btn {
  pointer-events: auto;
  min-block-size: 52px;
  padding-inline: 30px;
  font-size: 16px;
  /* Deeper drop than the resting primary: the pill floats over arbitrary
     section backgrounds and must read as a layer, not a stray button. */
  box-shadow: 0 2px 6px rgba(30, 12, 60, 0.18), 0 12px 32px rgba(105, 53, 216, 0.35);
  /* Hidden state is transform-only (+ inert on the wrapper): fully below the
     viewport edge, safe-area included. */
  transform: translateY(calc(100% + 60px));
  transition: transform 0.28s ease;
}
.lp-sticky-register--visible .lp-sticky-register__btn {
  transform: translateY(0);
}

/* ── Bottom sheet (modal dialog) ── */
/* Stays MOUNTED while closed (transform-hidden + inert) so the opening tap
   can focus the name field synchronously - see LpStickyRegister.vue. */
.lp-sheet-root {
  position: fixed;
  inset: 0;
  /* Above the header (940) and FAB (998), beside the drawer band (1050);
     below consent (9500). */
  z-index: 1080;
  display: none;
  overflow: hidden;
  pointer-events: none;
}
.lp-sheet-root--open {
  pointer-events: auto;
}
.lp-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 14, 28, 0.45);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.lp-sheet-root--open .lp-sheet__backdrop {
  opacity: 1;
}
.lp-sheet {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  flex-direction: column;
  max-block-size: 88vh;
  max-block-size: 88dvh;
  background: #fff;
  border-start-start-radius: var(--radius-xl);
  border-start-end-radius: var(--radius-xl);
  box-shadow: 0 -12px 48px rgba(0, 60, 130, 0.22);
  /* The 80px overshoot carries the 48px-blur shadow fully below the viewport
     edge too - 105% alone leaves a faint smudge along the closed bottom. */
  transform: translateY(calc(100% + 80px));
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0.28, 1);
  overflow: hidden;
}
.lp-sheet-root--open .lp-sheet {
  transform: translateY(0);
}
/* The hero card's sanctioned 2px brand-gradient cap - same identity, so the
   sheet reads as the SAME ask surfacing, not a new one. */
.lp-sheet::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  background: linear-gradient(90deg, #0894ff 0%, #bd32d6 50%, #ffa304 100%);
  pointer-events: none;
}
.lp-sheet__grabber {
  flex: none;
  inline-size: 36px;
  block-size: 4px;
  border-radius: var(--radius-full);
  background: var(--border-default);
  margin: 10px auto 0;
}
.lp-sheet__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 6px var(--space-lg) 10px;
  border-block-end: 1px solid var(--border-light);
}
.lp-sheet__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-color);
}
/* Close button: the drawer's X glyph recipe at sheet scale. */
.lp-sheet__close {
  flex: none;
  inline-size: 40px;
  block-size: 40px;
  margin-inline-end: -8px;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.lp-sheet__close:hover {
  background: var(--fsp-hover-bg);
}
.lp-sheet__close-x {
  position: relative;
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
.lp-sheet__close-x::before,
.lp-sheet__close-x::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 18px;
  block-size: 2px;
  border-radius: 1px;
  background: var(--text-color);
}
.lp-sheet__close-x::before {
  transform: translate(50%, -50%) rotate(45deg);
}
.lp-sheet__close-x::after {
  transform: translate(50%, -50%) rotate(-45deg);
}
.lp-sheet__scroll {
  overflow-y: auto;
  padding: var(--space-md) var(--space-lg) calc(var(--space-lg) + env(safe-area-inset-bottom));
}
/* The sheet is the card - neutralize LpForm's own chrome (hero-card recipe). */
.lp-sheet .lp-form-wrap {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.lp-sheet__or {
  text-align: center;
  font-size: 13px;
  color: var(--text-tertiary);
  margin-block: var(--space-md) var(--space-sm);
}
.lp-sheet__wa {
  margin-block-end: 2px;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Stacked hero: below ~1100px the two-column fold squeezes the form card
     under 360px and the copy into a strip - both read cramped. One centered
     column (copy above, form card below at readable width) instead; the
     source order already matches the wanted visual order. */
  .lp-hero {
    text-align: center;
  }
  /* The twin prompt watermarks are tuned to the two-column desktop geometry;
     on the stacked fold they land as stray slivers - desktop-only. */
  .lp-hero .logo-10x-terminal-watermark {
    display: none;
  }
  .lp-hero__inner {
    display: block;
    max-inline-size: 640px;
  }
  .lp-hero__form-wrap {
    --lp-peek-size: 230px;
    inline-size: 100%;
    max-inline-size: 520px;
    margin-inline: auto;
    margin-block-start: var(--space-md);
  }
  /* The centered hero must not center the card's form internals. */
  .lp-hero__form-col {
    text-align: start;
  }
  /* Tablets are touch devices too - thumb-friendly quiet text links
     (matching bumps for phones live here as well, <=1024 covers both). */
  .lp-curriculum__cta,
  .lp-lecturer__more {
    padding-block: 10px;
  }
  .lp-footer__link {
    padding-block: 8px;
  }
  /* Stack: intro above the wizard, both centered. */
  .lp-openday__inner {
    grid-template-columns: 1fr;
    max-inline-size: 620px;
    gap: var(--space-xl);
  }
  .lp-openday__intro {
    text-align: center;
  }
  .lp-openday__title {
    text-align: center;
  }
  /* The stacked intro centers - recenter the eyebrow and the hairline over
     it. The head also reverses here (pose above the text), so the crown
     motif reappears on its own: pose > hairline > eyebrow > title. */
  .lp-openday__intro .lp-section__eyebrow--start {
    text-align: center;
  }
  .lp-openday__head-text .lp-sechead-rule {
    margin-inline: auto;
  }
  /* Center the facts block, but keep each fact's text start-aligned. */
  .lp-openday__facts {
    max-inline-size: 420px;
    margin-inline: auto;
    text-align: start;
  }
  .lp-openday__wizard-wrap {
    inline-size: 100%;
    max-inline-size: 560px;
    margin-inline: auto;
  }
  .lp-who__grid {
    grid-template-columns: 1fr;
    max-inline-size: 560px;
    margin-inline: auto;
  }
  .lp-diff__grid {
    grid-template-columns: 1fr;
    max-inline-size: 560px;
    margin-inline: auto;
  }
  .lp-curriculum__grid {
    grid-template-columns: 1fr;
    max-inline-size: 560px;
    margin-inline: auto;
  }
  .lp-lecturer__inner {
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
    gap: var(--space-xl);
  }
  .lp-alumni__track {
    grid-auto-columns: calc((100% - var(--space-lg)) / 2);
  }
}

@media (max-width: 767px) {
  /* Static on mobile: the sticky bottom bar owns the persistent conversion
     path there; exactly one sticky ask per viewport (design gate). */
  .lp-header {
    position: static;
  }
  .lp-header__inner {
    min-block-size: 52px;
    padding-inline: var(--space-md);
  }
  .lp-header__cta {
    min-block-size: 36px;
    padding-inline: 14px;
    font-size: 13px;
  }
  /* The drawer's emphasized end link owns the full-site exit on phones. */
  .lp-header__site {
    display: none;
  }
  .lp-register {
    scroll-margin-block-start: var(--space-lg);
  }
  .lp-openday {
    scroll-margin-block-start: var(--space-md);
  }
  .lp-openday__wizard-wrap {
    padding: var(--space-md);
  }
  .lp-section {
    padding-block: var(--space-2xl);
    padding-inline: var(--space-md);
  }
  /* fsp-design floor: display text never below ~32px on phone. */
  .lp-section__title {
    font-size: 32px;
    line-height: 1.15;
  }
  /* The ~10.5:1 course lockup inherits 1.25em of the 32px title (~420px
     wide) and clips at the viewport edge - cap the mark's height so it
     fits the phone content column on its own wrapped line. */
  .lp-what .lp-section__title .logo-10x-course-inline svg {
    block-size: 30px;
  }
  /* The stacked hero comes from the <=1024px block (source order = visual
     order: h1 -> subtitle -> subtitle_2 -> form card -> claims grid); phones
     tighten the paddings and MINIFY the form card (2026-07-25 fold rework):
     the card must break the first screen even under in-app-browser chrome
     (~660px real viewport), so the card header compresses and the peek
     mascot retires (owner follow-up, 2026-07-25). The subline, urgency
     line, consent and the hero mascot above the H1 all stay. */
  .lp-hero {
    padding-block: var(--space-lg) var(--space-xl);
    padding-inline: var(--space-md);
  }
  /* Peek mascot retired on phones only - its headroom goes back to the fold
     budget and the card's gradient ring meets the copy directly. Tablet
     (768-1024px) and desktop keep the full rig. */
  .lp-hero__form-peek {
    display: none;
  }
  .lp-hero__form-wrap {
    padding-block-start: 0;
    margin-block-start: var(--space-md);
  }
  .lp-hero__form-col {
    padding: var(--space-md) var(--space-md) var(--space-lg);
    /* Static header on phones - a breath of offset is enough. */
    scroll-margin-block-start: var(--space-md);
  }
  /* Compressed card header: smaller title/eyebrow type, tighter seams. The
     full subline + urgency copy stay - only their size and rhythm shrink. */
  .lp-hero__form-header {
    margin-block-end: var(--space-sm);
    padding-block-end: var(--space-sm);
  }
  .lp-hero__form-eyebrow {
    font-size: 11px;
  }
  .lp-hero__form-title {
    font-size: 24px;
  }
  .lp-hero__form-subline {
    font-size: 13px;
    margin-top: 6px;
  }
  .lp-hero__form-urgency {
    font-size: 13px;
    margin: var(--space-sm) 0 0;
  }
  /* Consent compresses mildly (full text always; ~11px legal floor). Scoped
     to the minified hero card + the bottom sheet - the final-section form
     keeps the 12.5px original. The row is above the button here, so every
     pixel it saves is a pixel the ask keeps above the fold. */
  .lp-hero__form-col .lp-consent__text,
  .lp-sheet .lp-consent__text {
    font-size: 11.5px;
  }
  .lp-form-wrap {
    padding: var(--space-lg);
  }
  /* The header is static here, so anchor jumps need no sticky-header offset
     (matches the .lp-register / .lp-openday reductions above). */
  .lp-curriculum {
    scroll-margin-block-start: var(--space-md);
  }
  /* Four units + gaps must clear a 320px viewport. */
  .lp-countdown__clock {
    gap: var(--space-sm);
  }
  .lp-form-success__head {
    flex-direction: column;
    text-align: center;
  }
  .lp-form-success__mascot {
    order: -1;
  }
  .lp-form-success__date {
    justify-content: center;
  }
  /* Phones: the pointing bust drops under the copy and aims up at the CTA
     instead of sitting beside a full-width button. */
  .lp-form-success__next {
    flex-direction: column;
    text-align: center;
  }
  .lp-form-success__next-mascot {
    inline-size: 96px;
  }
  .lp-lecturer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .lp-lecturer__media {
    max-inline-size: 220px;
  }
  .lp-lecturer__title {
    text-align: center;
  }
  /* The stacked lecturer body centers - recenter the eyebrow. The crown that
     sits over it is recentered next to its own definition further down: both
     rules are single-class, so the LAST one in the file wins and an override
     placed here would silently lose to the base rule. */
  .lp-lecturer__body .lp-section__eyebrow--start {
    text-align: center;
  }
  .lp-lecturer__exit-stat {
    align-items: center;
    text-align: center;
  }
  .lp-lecturer__tiles {
    grid-template-columns: 1fr 1fr;
    inline-size: 100%;
  }
  /* One card + next-card peek; native swipe, arrows hidden. */
  .lp-alumni__track {
    grid-auto-columns: 85%;
  }
  .lp-alumni__arrow {
    display: none;
  }
  .lp-who__grid {
    grid-template-columns: 1fr;
  }
  /* The bottom sheet carries the WhatsApp action on mobile; a second floating
     WhatsApp affordance would collide with the register pill in the thumb
     zone. Owner-confirmed deviation (plan section 3, upheld 2026-07-25). */
  .lp-page .whatsapp-fab {
    display: none;
  }
  .lp-sticky-register {
    display: flex;
  }
  .lp-sheet-root {
    display: block;
  }
  /* Keep the footer links clear of the floating register pill
     (52px pill + 12px bottom inset). */
  .lp-footer {
    padding-block-end: calc(var(--space-xl) + 64px + env(safe-area-inset-bottom));
  }
}

/* Respect reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .lp-cta,
  .lp-sticky-register__btn,
  .lp-sheet,
  .lp-sheet__backdrop,
  .lp-faq__icon::before,
  .lp-faq__icon::after,
  .lp-field__input {
    transition: none;
  }
  /* The pre-hydration submit keeps its quiet chrome and progress cursor; only
     the sweep stops. */
  .lp-cta.lp-form__submit--pending {
    animation: none;
  }
  /* form-peek is fully static: final pose visible, no entrance, no idle
     (the JS rig also disables itself - tracking, glance and arming). */
  .lp-hero__form-peek,
  .lp-hero__form-peek--enter,
  .lp-hero__form-peek #fp-head,
  .lp-hero__form-peek #fp-antenna-l,
  .lp-hero__form-peek #fp-antenna-r,
  .lp-hero__form-peek #fp-eye-l,
  .lp-hero__form-peek #fp-eye-r {
    animation: none;
  }
  .lp-hero__form-peek--armed {
    transform: none;
  }
  .lp-hero__form-peek svg,
  .lp-hero__form-peek #fp-pupil-l,
  .lp-hero__form-peek #fp-pupil-r,
  .lp-hero__form-peek #fp-pose,
  .lp-hero__form-peek #fp-hand-grip,
  .lp-hero__form-peek #fp-hand-point,
  .lp-hero__form-peek #fp-eye-l,
  .lp-hero__form-peek #fp-eye-r,
  .lp-hero__form-peek #fp-mouth,
  .lp-hero__form-peek #fp-rest,
  .lp-hero__form-peek #fp-eyes-rest,
  .lp-hero__form-peek #fp-mouth-rest {
    transition: none;
  }
  .lp-drawer-enter-active .lp-drawer__overlay,
  .lp-drawer-leave-active .lp-drawer__overlay,
  .lp-drawer-enter-active .lp-drawer,
  .lp-drawer-leave-active .lp-drawer {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Conversion surfaces ("Proof at the Point of Ask"). The blocks below
   cover the proof/act styling: --v2 section modifiers, the flow diagram,
   quote cards, employers strip, cert badges, and the cohort teaser.
   ═══════════════════════════════════════════════════════════════ */

/* ── Shared accent map (curriculum columns) ───────────────────────── */
.lp-page[data-lp-variant='lp'] [data-accent='blue'] {
  --lp-accent: #0894ff;
  --lp-glow: rgba(8, 148, 255, 0.1);
}
.lp-page[data-lp-variant='lp'] [data-accent='purple'] {
  --lp-accent: #bd32d6;
  --lp-glow: rgba(189, 50, 214, 0.09);
}

/* ── Hero: premium gradient ring on the form card ─────────────────── */
/* CONVERTS the /lp 2px top cap (the fold's one sanctioned decorative
   gradient) into the mask-composite ring from .course-chain-card--bundle
   (landing-page.css) - one gradient element out, one in, budget preserved.
   Same ::before, so the card geometry (and the FIXES/417 ledge pin) is
   untouched. */
.lp-page[data-lp-variant='lp'] .lp-hero__form-col::before {
  inset: 0;
  block-size: auto;
  border-radius: var(--radius-xl);
  padding: 1.5px;
  background: linear-gradient(135deg, #0894ff 0%, #6462ea 50%, #bd32d6 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* ── Hero: wider copy column (owner round 3) ──────────────────────── */
/* The form card gives up ~60px to the copy track: the Method Rail rows and
   quote strip breathe while the 2-field form stays comfortably above its
   360px floor. Only the two-column fold - the <=1024px hero stacks. */
.lp-page[data-lp-variant='lp'] .lp-hero__inner {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 460px);
}
.lp-quotes__fig {
  margin: 0;
  display: grid;
  gap: 10px;
  block-size: 100%;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(0, 60, 130, 0.04), 0 8px 24px rgba(0, 60, 130, 0.05);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
}
.lp-quotes__quote {
  position: relative;
  margin: 0;
  padding-inline-start: 20px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-color);
}
.lp-quotes__quote::before {
  content: '״';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: -0.18em;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
  color: rgba(8, 148, 255, 0.35);
}
/* Closing gershayim, bottom-left - bookends the opening ::before (top-right). */
.lp-quotes__quote::after {
  content: '״';
  display: block;
  margin-block-start: 2px;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 0.5;
  color: rgba(8, 148, 255, 0.35);
  text-align: end;
}
.lp-quotes__who {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-inline-start: 20px;
}
.lp-quotes__avatar {
  inline-size: 36px;
  block-size: 36px;
  border-radius: var(--radius-full);
  object-fit: cover;
}
.lp-quotes__id {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}
.lp-quotes__name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-color);
}
.lp-quotes__role {
  font-size: 12.5px;
  color: var(--text-tertiary);
}

/* ── What-is: compact two-course flow (owner round 3) ─────────────── */
/* The /course hero diagram (.co-hero-flow) distilled: two glass mini-cards
   (step + mono eyebrow + thin logo) joined by the node -> gradient line ->
   chevron connector. Horizontal here (RTL: Developer right, the arrow
   sweeps left into Architect); phones stack it vertically. The connector
   is this element's single brand-gradient carrier. */
.lp-flow {
  display: flex;
  align-items: stretch;
  justify-content: center;
  max-inline-size: 640px;
  margin: 0 auto var(--space-xl);
}
.lp-flow__card {
  position: relative;
  flex: 1 1 0;
  max-inline-size: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 16px 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 254, 0.96) 100%);
  border: 1px solid rgba(8, 148, 255, 0.14);
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0, 60, 130, 0.05);
}
.lp-flow__card--arch {
  border-color: rgba(189, 50, 214, 0.16);
}
.lp-flow__step {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-tertiary);
}
.lp-flow__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.lp-flow__logo {
  block-size: 24px;
  inline-size: auto;
}
/* Connector anatomy (from .co-hero-flow-connector): blue node with glow
   ring -> brand-gradient hairline -> amber chevron tip. Horizontal RTL:
   the gradient starts blue at the node (physical right) and lands amber
   at the tip (physical left). */
.lp-flow__connector {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding-inline: 12px;
}
.lp-flow__node {
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: #0894ff;
  box-shadow: 0 0 0 4px rgba(8, 148, 255, 0.12);
}
.lp-flow__line {
  inline-size: 40px;
  block-size: 2px;
  border-radius: 1px;
  background: linear-gradient(270deg, #0894ff 0%, #bd32d6 50%, #ffa304 100%);
}
.lp-flow__tip {
  inline-size: 9px;
  block-size: 15px;
  display: block;
  color: #ffa304;
  margin-inline-start: -2px;
}

/* ── Shared compact quote card (open-day + final register) ────────── */
.lp-quote-card {
  margin: 0;
  padding: var(--space-lg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(600px 200px at 85% -20%, rgba(8, 148, 255, 0.06), transparent 60%),
    #ffffff;
  box-shadow: var(--shadow-sm);
}
.lp-quote-card__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-block-end: var(--space-sm);
}
.lp-quote-card__quote {
  position: relative;
  margin: 0 0 var(--space-md);
  padding-inline-start: 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-color);
}
.lp-quote-card__quote::before {
  content: '״';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: -0.18em;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
  color: rgba(8, 148, 255, 0.3);
}
/* Closing gershayim, bottom-left - bookends the opening ::before (top-right). */
.lp-quote-card__quote::after {
  content: '״';
  display: block;
  margin-block-start: 2px;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 0.5;
  color: rgba(8, 148, 255, 0.3);
  text-align: end;
}
.lp-quote-card__who {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lp-quote-card__avatar {
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--radius-full);
  object-fit: cover;
}
.lp-quote-card__id {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}
.lp-quote-card__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
}
.lp-quote-card__role {
  font-size: 12.5px;
  color: var(--text-tertiary);
}

/* ── Open day v2: featured-glass wizard card + risk chips ─────────── */
/* Wizard card upgraded to the /course featured-glass recipe
   (.co-audience-card--featured): corner radials over 0.9 white, blur(12),
   3px gradient top rail (this section's one decorative gradient). */
.lp-openday--v2 .lp-openday__wizard-wrap {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(900px 280px at 85% -20%, rgba(8, 148, 255, 0.08), transparent 60%),
    radial-gradient(600px 240px at 10% 120%, rgba(189, 50, 214, 0.06), transparent 60%),
    rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.lp-openday--v2 .lp-openday__wizard-wrap::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0894ff 0%, #bd32d6 50%, #ffa304 100%);
  pointer-events: none;
}
/* Risk-reversal chips: the meeting is free, no commitment, one-off. */
.lp-openday__risk {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: var(--space-lg) 0 0;
}
.lp-openday__risk-chip {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-color);
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  padding: 6px 14px;
}
/* point (G03) directional cue: set beside the open-day title at the intro
   column's inline-end (physical left in RTL). The pose's native arm aims left,
   across the inter-column gap, straight at the wizard card. Sized ~15% up from
   the old cue (owner: enlarge every mascot). */
.lp-openday__mascot {
  flex: 0 0 auto;
  inline-size: 128px;
  pointer-events: none;
  user-select: none;
}
/* Desktop: the quote pair shares row 2 - roy-horev under the intro column,
   sella-rafaeli under the wizard - so both columns close with a card at the
   same top line (owner round 4 symmetry). The wizard self-sizes in row 1.
   Mobile keeps natural source order (intro > wizard > quote) and shows the
   first card only - the second is hidden in the responsive band. */
@media (min-width: 1025px) {
  .lp-openday--v2 .lp-openday__inner {
    grid-template-rows: auto auto;
  }
  .lp-openday--v2 .lp-openday__intro {
    grid-column: 1;
    grid-row: 1;
  }
  .lp-openday--v2 .lp-openday__wizard-wrap {
    grid-column: 2;
    grid-row: 1;
  }
  .lp-openday--v2 .lp-openday__quote {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }
  .lp-openday--v2 .lp-openday__quote--2 {
    grid-column: 2;
  }
}

/* ── Lecturer v2: teach mascot stages the exit-stat pull-quote ────── */
.lp-lecturer--v2 .lp-lecturer__exit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
  margin-block: var(--space-md) var(--space-lg);
}
.lp-lecturer--v2 .lp-lecturer__exit-stat {
  flex: 1 1 240px;
  margin-block: 0;
}

/* ── THE dark terminal-gold band ──────────────────────────────────── */
/* .powered-section recipe (landing-page.css): charcoal gradient, gold
   ambient glow, SVG-noise grain, white-alpha ink scale, 3% white card
   surfaces, gold micro-accents only. Never raw #fff/#000.

   TWO dark bands share this surface now: .lp-diff--dark (the "why we are
   different" approach section) and .lp-cc (the Claude Code section two slots
   later). They must be indistinguishable, which is why they share these rules
   rather than each carrying a copy - both are visible within one scroll, so a
   divergence would read as a rendering bug. Add a third band to these
   selectors; do NOT transcribe the recipe again. */
.lp-diff--dark,
.lp-cc {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #13141c 0%, #1a1b27 50%, #161722 100%);
}
.lp-diff--dark::before,
.lp-cc::before {
  content: '';
  position: absolute;
  inset-block-start: -30%;
  left: 50%;
  transform: translateX(-50%);
  inline-size: 900px;
  block-size: 600px;
  background: radial-gradient(ellipse, rgba(212, 165, 116, 0.055) 0%, transparent 70%);
  pointer-events: none;
}
.lp-diff--dark::after,
.lp-cc::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.5;
}
.lp-diff--dark .lp-section__inner,
.lp-cc .lp-section__inner {
  position: relative;
  z-index: 1;
}
.lp-diff--dark .lp-section__eyebrow {
  color: #d4a574;
}
.lp-diff--dark .lp-section__title,
.lp-cc .lp-section__title {
  color: rgba(255, 255, 255, 0.95);
}
.lp-diff--dark .lp-diff__card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

/* ── Claude Code band (LpClaudeCode.vue) ──────────────────────────────
   A COMPACT port of the retired home page's .powered-section: same claim,
   same dark surface (shared above), roughly half the height. Budgeted at
   ~450-500px on desktop against the original's ~900. Two moves buy that and
   they are the two not to undo:

     1. The logo lockup is a ROW (34px mark) instead of a 114px column.
     2. The three feature CARDS with paragraphs became one row of label-only
        CHIPS - which is also why this is not built on `.powered-features`:
        landing-page.css forces that grid to a single column at <=1024px, so a
        chip row built on it would silently stack on tablets while the desktop
        and phone screenshots both looked right. These chips are flex-wrap, so
        they need no breakpoint override at all.

   `.powered-*` stays behind for /home-classic only. Never style this section
   from it: a future "clean up the retired page's CSS" commit would then strip
   the live front door's band. */
.lp-cc {
  /* Tighter than the page's default section padding: this band is height
     budgeted (~500px against the ~900px version it replaced), and the vertical
     rhythm is where that budget is actually spent. */
  padding-block: 32px;
}
.lp-cc__inner {
  text-align: center;
}
/* The section's single gradient accent, at the page's established 56px (see
   .lp-sechead-crown). The section already provides the top padding, so the
   global 56px auto margin collapses to a tight paired-opening gap. */
.lp-cc__rule {
  inline-size: 56px;
  block-size: 2px;
  border-radius: 999px;
  margin: 0 auto 20px;
}
.lp-cc__badge {
  display: inline-block;
  padding: 7px 20px;
  background: rgba(212, 165, 116, 0.08);
  border: 1px solid rgba(212, 165, 116, 0.18);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #d4a574;
  margin-block-end: var(--space-md);
}
/* LTR: the lockup reads "10x - Powered by - Claude Code" left to right even on
   this RTL page, because that is how the Claude Code wordmark is set. */
.lp-cc__logos {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  /* Three fixed-width items on one line are ~18px too wide for a 320px phone,
     so let the lockup break rather than hang over the section padding. */
  flex-wrap: wrap;
  gap: 14px;
  direction: ltr;
  margin-block-end: var(--space-md);
}
.lp-cc__mark {
  block-size: 34px;
}
.lp-cc__by {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.6);
}
/* Intrinsic size is 480x120 (declared on the tag to reserve the box and keep
   CLS at zero); height drives the rendered size. */
.lp-cc__cc-logo {
  block-size: 30px;
  inline-size: auto;
}
.lp-cc__headline {
  font-weight: 500;
  line-height: 1.3;
  margin-block-end: var(--space-md);
}
/* The headline's two authored lines carry their break STRUCTURALLY, as blocks.
   A <br> that gets hidden at narrow widths runs the two halves together into
   one word, because Vue's whitespace: 'condense' strips any space placed beside
   it in the template - so there is nothing to hide here and nothing depending
   on whitespace. Each line simply wraps inside itself on a phone. */
.lp-cc__headline-line {
  display: block;
}
.lp-cc__desc {
  max-inline-size: 640px;
  margin: 0 auto var(--space-md);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.55);
}
.lp-cc__desc strong {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
}
/* Chips wrap naturally at every width - no grid, so no breakpoint override. */
.lp-cc__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-md);
}
.lp-cc__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-full);
}
/* The 16px thin glyph is what carries the gold accent down to chip scale, at
   no vertical cost - it fits inside the pill's existing line box. */
.lp-cc__chip-icon {
  font-size: 16px;
  line-height: 1;
  color: #d4a574;
}
.lp-cc__chip-label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.82);
}
.lp-cc__cta svg {
  transition: transform 0.2s ease;
}
.lp-cc__cta:hover svg {
  transform: translateX(-3px);
}

@media (max-width: 767px) {
  .lp-cc__mark {
    block-size: 26px;
  }
  .lp-cc__cc-logo {
    block-size: 24px;
  }
  .lp-cc__desc {
    font-size: 16px;
  }
  .lp-cc__cta {
    display: flex;
    inline-size: 100%;
  }
}
.lp-diff__card-kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: #d4a574;
  margin-block-end: var(--space-sm);
}
.lp-diff--dark .lp-diff__card-title {
  color: rgba(255, 255, 255, 0.92);
}
.lp-diff--dark .lp-diff__card-body {
  color: rgba(255, 255, 255, 0.62);
}

/* ── Curriculum v2: de-tinted + per-track cycling accents ─────────── */
/* De-tint (slot 8 would otherwise sit tinted beside tinted cohort at 9;
   on the LP tint marks proof/act zones only). Same specificity as the tint
   rule - source order wins. */
.lp-curriculum--v2 {
  background: #fff;
}
.lp-curriculum--v2 .lp-curriculum__col {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* 5px accent edge bar + soft corner glow (.co-punchline-card recipe). */
.lp-curriculum--v2 .lp-curriculum__col::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 5px;
  background: var(--lp-accent, var(--primary-color));
}
.lp-curriculum--v2 .lp-curriculum__col::after {
  content: '';
  position: absolute;
  inset-block-start: -40px;
  inset-inline-end: -40px;
  inline-size: 140px;
  block-size: 140px;
  background: radial-gradient(circle, var(--lp-glow, rgba(8, 148, 255, 0.08)) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}
/* Counts line becomes a color-mix accent pill. Text is the accent darkened
   toward ink (60/40 mix) - the raw accents (#0894ff at ~3.2:1) fail WCAG AA
   at 12px; the pill chrome carries the pure accent instead. */
.lp-curriculum--v2 .lp-curriculum__counts {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--lp-accent, var(--primary-color)) 60%, #191a23);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--lp-accent, var(--primary-color)) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--lp-accent, var(--primary-color)) 20%, transparent);
}
.lp-curriculum--v2 .lp-curriculum__col-head {
  align-items: flex-start;
}
.lp-curriculum--v2 .lp-curriculum__item::before {
  color: color-mix(in srgb, var(--lp-accent, var(--primary-color)) 60%, #191a23);
}
/* reading-book - "studying the syllabus": full-strength bust on the grid's
   outer side (physical left in RTL), riding the section margin like the
   register signing pose. Desktop only (gated below). */
.lp-curriculum--v2 .lp-curriculum__grid {
  position: relative;
}

/* ── Cohort v2: the home-page NextCohortTeaser card (owner round 3) ── */
/* The card reuses the global .nc-teaser-* classes (next-cohort.css, linked
   before lp.css) so the design IS the home design; these rules only seat it
   inside the lp-section chrome. */
.lp-cohort-teaser {
  /* The lp-section already paces the vertical rhythm. */
  padding: 0;
}
/* Positioning context for the rocket riding the outer margin. */
.lp-cohort--v2 .lp-cohort__inner {
  position: relative;
}
/* Two asks, one hierarchy: the LP primary pill above the quiet full-site
   dates/pricing link (the home CTA label, demoted to a text link). */
.lp-cohort-teaser__footer {
  flex-direction: column;
  gap: var(--space-md);
}
.lp-cohort-teaser__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--primary-color);
  text-decoration: none;
}
.lp-cohort-teaser__more:hover {
  text-decoration: underline;
}
.lp-cohort-teaser__more svg {
  flex: none;
}

/* ── Phone trust note (both LpForm instances) ───────────────────── */
.lp-form__phone-note {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-tertiary);
}

/* ── Final register v2: steps + adjacent quote + graduation-cap ───── */
.lp-register--v2 .lp-register__inner {
  max-inline-size: 880px;
}
/* "What happens after you register" - three hairline step rows. */
.lp-register__steps {
  list-style: none;
  padding: 0;
  margin: 0 auto var(--space-xl);
  max-inline-size: 560px;
  display: grid;
}
.lp-register__step {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0;
  padding-block: 10px;
  border-block-end: 1px solid var(--border-light);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--text-color);
}
.lp-register__step:first-child {
  border-block-start: 1px solid var(--border-light);
}
.lp-register__step-num {
  flex: none;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--primary-color);
}
.lp-register--v2 .lp-register__form-col {
  max-inline-size: 560px;
  margin-inline: auto;
}
.lp-register--v2 .lp-register__quote {
  max-inline-size: 560px;
  margin: var(--space-lg) auto 0;
}
/* Desktop: proof cards grid-placed at inline-start (reading entry), the ask
   beside them - omer-gronich with yuval-lavi stacked right below (owner
   round 4); the form spans both rows so the stack never pushes it down.
   Mobile stacks in source order (form first, quote after) and shows the
   first card only - the second is hidden in the responsive band. */
@media (min-width: 1025px) {
  .lp-register--v2 .lp-register__grid {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: var(--space-lg) var(--space-xl);
    align-items: start;
  }
  .lp-register--v2 .lp-register__quote {
    grid-column: 1;
    grid-row: 1;
    max-inline-size: none;
    margin: 0;
  }
  .lp-register--v2 .lp-register__quote--2 {
    grid-row: 2;
    align-self: start;
  }
  .lp-register--v2 .lp-register__form-col {
    grid-column: 2;
    grid-row: 1 / span 2;
    max-inline-size: none;
    margin-inline: 0;
  }
}
/* signing ("filling the form, like you") - full-strength bust in the margin
   right beside the quick form, absolutely anchored to the register grid so
   it tracks the form card at every viewport width. inline-start offset in
   RTL = the physical LEFT margin zone, i.e. the form column's outer side.
   Desktop only (gated below - the margin vanishes on narrower viewports). */
.lp-register--v2 .lp-register__grid {
  position: relative;
}

/* Lecturer joins the tinted zone (owner 2026-07-23): lecturer + alumni now
   read as ONE continuous credibility block between white who(4) and the
   dark diff(7) band. Exact recipe of the shared tint group. */
.lp-page[data-lp-variant='lp'] .lp-lecturer--v2 {
  background:
    radial-gradient(ellipse at 10% 100%, rgba(105, 98, 234, 0.04) 0%, transparent 55%),
    linear-gradient(180deg, #f7faff 0%, #eef5ff 100%);
}

/* Quiet section links anchor to the block's physical LEFT edge (inline-end
   in RTL; owner 2026-07-23) - the exit points AWAY from the reading edge
   and its ← arrow now points out of the block. Scoped: /lp keeps the
   start-aligned originals. */
.lp-page[data-lp-variant='lp'] .lp-lecturer__more {
  display: block;
  inline-size: fit-content;
  margin-inline-start: auto;
}
.lp-page[data-lp-variant='lp'] .lp-curriculum__cta {
  align-self: flex-end;
}

/* ── Lecturer v2: credential badges (owner round 4) ───────────────── */
/* Two bespoke cards replace the three uniform pills: Microsoft is the
   large emphasized badge - the official MCT program mark restored at
   display size (owner 2026-07-23; supersedes round 3's four-square +
   wordmark lockup) - Claude the clean single-line lockup with a hairline
   divider before its credential. */
.lp-certs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  padding: 0;
  margin: var(--space-lg) 0 0;
}
.lp-cert {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 12px 20px;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
/* The credential text sits behind a quiet hairline, so each badge reads
   [vendor mark | credential]. */
.lp-cert__label {
  padding-inline-start: 14px;
  border-inline-start: 1px solid var(--border-light);
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-secondary);
}
/* Microsoft: a size class larger, tinted ring. */
.lp-cert--microsoft {
  padding: 14px 26px;
  border-color: rgba(0, 113, 227, 0.35);
  /* Solid (not the translucent --primary-light): the card must hold its
     tint over the section's blue-tinted background. */
  background: #f0f7fe;
  background: color-mix(in srgb, #0071e3 5%, #fff);
}
/* The official MCT program mark (480x267, transparent) rendered at display
   size - its baked-in "Microsoft CERTIFIED Trainer" words ARE the badge, so
   no separate text label or divider. Explicit box reserves the lazy load. */
.lp-cert__mct {
  block-size: 64px;
  inline-size: 115px;
  object-fit: contain;
}
.lp-cert--microsoft .lp-cert__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
}
/* Claude lockup (spiral + wordmark, 184x40): sized to sit a clear class
   below the Microsoft badge. */
.lp-cert__claude-logo {
  inline-size: 96px;
  block-size: 21px;
  object-fit: contain;
}

/* ── Alumni: employers strip (owner round 3; re-emphasized round 4) ── */
/* One labeled logo row above the section CTA, lifted onto its own
   indigo-tinted band (the section's blue tint family stays adjacent, so
   indigo reads as A DIFFERENT color, not a shade) with full-color marks -
   the strip is proof, not wallpaper (owner 2026-07-23). Small LTR-isolated
   name captions under each mark. Replaces the retired proof-count lines. */
.lp-employers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: var(--space-xl);
  row-gap: var(--space-md);
  max-inline-size: 760px;
  margin: var(--space-xl) auto 0;
  padding: var(--space-lg) var(--space-xl);
  /* Solid fallback first: the band must hold its tint over the alumni
     section's blue-tinted background. */
  background: #f6f6fe;
  background: color-mix(in srgb, #6462ea 6%, #fff);
  border: 1px solid rgba(100, 98, 234, 0.22);
  border-radius: var(--radius-lg);
}
.lp-employers__label {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  /* Deepened brand indigo - #6462ea itself is a hair under 4.5:1 on the
     tinted band at this size. */
  color: #4a48c4;
}
.lp-employers__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--space-lg);
  row-gap: var(--space-md);
  padding: 0;
  margin: 0;
}
.lp-employers__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.lp-employers__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 26px;
  /* Soft width reserve: the lazy-loaded marks resolve to 26-96px - a floor
     keeps the centered row from lurching as each image arrives. */
  min-inline-size: 56px;
}
.lp-employers__logo {
  max-inline-size: 96px;
  max-block-size: 22px;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
}
/* HiBob ships as a square icon (400x400) - let it use the wrap's full
   height so its visual mass matches the wide wordmarks. */
.lp-employers__logo[src*='hibob'] {
  max-block-size: 26px;
}
.lp-employers__name {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  text-align: center;
  line-height: 1.3;
  direction: ltr;
  unicode-bidi: isolate;
}

/* ── Footer: the number is a WhatsApp line - say so ───────────────── */
.lp-footer__wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* One step darker than the CTA green: 14px text needs >=4.5:1 on the
     near-white footer (the brighter #128c4a measures ~4.25:1). */
  color: #0f7a40;
  text-decoration: none;
}
.lp-footer__wa:hover {
  color: #0c6635;
  text-decoration: underline;
}
.lp-footer__wa-icon {
  font-size: 17px;
  line-height: 1;
}
.lp-footer__wa-label {
  font-weight: 600;
  letter-spacing: 0.01em;
}
.lp-footer__wa-number {
  font-variant-numeric: tabular-nums;
}

/* ── Conversion-surfaces responsive ─────────────────────────────── */
@media (max-width: 1024px) {
  /* Stacked open-day: the intro centers, so the head stacks with the mascot
     centered above the two-line title (section-mascot convention); chips
     center with the intro. */
  .lp-openday__head {
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
  }
  .lp-openday__risk {
    justify-content: center;
  }
  .lp-openday--v2 .lp-openday__quote {
    inline-size: 100%;
    max-inline-size: 560px;
    margin-inline: auto;
  }
  /* Stacked layouts keep ONE proof card per ask (the hero strip's
     one-quote-when-stacked rule) - the symmetric second cards are a
     two-column desktop payoff. */
  .lp-openday__quote--2,
  .lp-register__quote--2 {
    display: none;
  }
  /* Touch tap-target for the footer WhatsApp link (matches __link bump). */
  .lp-footer__wa {
    padding-block: 8px;
  }
}
@media (max-width: 767px) {
  /* The what-is lead's controlled desktop line breaks crowd phones -
     let the copy flow naturally there. */
  .lp-page[data-lp-variant='lp'] .lp-what__lead br {
    display: none;
  }
  /* Two-course flow stacks: cards full width, the connector goes vertical
     (gradient re-aimed downward, chevron rotated to point down). */
  .lp-flow {
    flex-direction: column;
    align-items: center;
    margin-block-end: var(--space-lg);
  }
  .lp-flow__card {
    flex: none;
    inline-size: 100%;
    max-inline-size: 320px;
  }
  .lp-flow__connector {
    flex-direction: column;
    padding-inline: 0;
    padding-block: 10px;
  }
  .lp-flow__line {
    inline-size: 2px;
    block-size: 26px;
    background: linear-gradient(180deg, #0894ff 0%, #bd32d6 50%, #ffa304 100%);
  }
  .lp-flow__tip {
    transform: rotate(-90deg);
    margin-inline-start: 0;
    margin-block-start: -2px;
  }
  /* Credential badges: stacked centered cards (the row form would overflow
     narrow phones); the divider hairline retires with the row. */
  .lp-certs {
    justify-content: center;
  }
  .lp-cert {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    text-align: center;
  }
  .lp-cert__label {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
  /* The MCT mark steps down with the stacked cards. */
  .lp-cert__mct {
    block-size: 56px;
    inline-size: 101px;
  }
  /* Employers strip tightens one step on phones. */
  .lp-employers {
    column-gap: var(--space-lg);
    padding-inline: var(--space-lg);
  }
}

/* Shared icon glyph: same mask machinery + SVG set as the open-day fact icons. */
.lp-icon {
  display: block;
  inline-size: 16px;
  block-size: 16px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.lp-icon--ai {
  -webkit-mask-image: url('/icons/pillars/brain-circuit.svg');
  mask-image: url('/icons/pillars/brain-circuit.svg');
}
.lp-icon--build {
  -webkit-mask-image: url('/icons/pillars/cubes.svg');
  mask-image: url('/icons/pillars/cubes.svg');
}
.lp-icon--stack {
  -webkit-mask-image: url('/icons/audience/puzzle-piece.svg');
  mask-image: url('/icons/audience/puzzle-piece.svg');
}
.lp-icon--mentor {
  -webkit-mask-image: url('/icons/pillars/chalkboard-user.svg');
  mask-image: url('/icons/pillars/chalkboard-user.svg');
}

/* Quiet inline link used inside the hero bento cards. */
.lp-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 13px;
  color: var(--primary-color);
  text-decoration: none;
  border-block-end: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.lp-link:hover {
  border-block-end-color: var(--primary-color);
}
.lp-link svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.lp-link:hover svg {
  transform: translateX(-3px);
}

/* ── Hero claims: typographic 2x2 grid ────────────────────────────── */
.lp-cards {
  list-style: none;
  padding: 0;
  margin: var(--space-lg) 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 24px;
  max-inline-size: 560px;
}
/* Typographic cells (owner round 2, 2026-07-23): the card chrome -
   glass background, border, shadow, blur - is removed; the icon chips
   and the shared alignment carry the grid, whitespace is the separator.
   Still deliberately inert: no hover, no pointer affordance - the block
   must not compete with the form CTA (1:1 attention ratio). */
.lp-card {
  margin: 0;
}
.lp-card__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 32px;
  block-size: 32px;
  border-radius: var(--radius-sm);
  background: #ebf6ff;
  background: color-mix(in srgb, #0894ff 8%, #fff);
  color: var(--primary-color);
  margin-block-end: 10px;
}
.lp-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text-color);
  text-wrap: pretty;
}
.lp-card__title--accent {
  color: var(--primary-color);
}
.lp-card__desc {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
  text-wrap: pretty;
}
.lp-card__link {
  margin-block-start: 8px;
}

/* ── Quote strip (proof band under the hero) ─────────────────────── */
/* Owner round 2 (2026-07-23): the hero quotes moved out of the copy column
   into their own full-width band right below the fold - idan / ROY (gold) /
   alon. Card anatomy reuses .lp-quotes__fig; only the strip grid + the
   gold chrome live here. */
.lp-quotes {
  padding-block: 0 var(--space-2xl);
  padding-inline: var(--space-lg);
}
.lp-quotes__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  align-items: stretch;
}
.lp-quotes__item {
  margin: 0;
  min-inline-size: 0;
}
/* Gold review chrome (roy-horev): the /reviews pinned-card recipe
   (.testimonial-card--gold, testimonial-card.css) at fig scale - warm-end
   brand stops only (#FFA304 / #C4551A), no new tokens: amber radial wash,
   warm hairline, 3px warm gradient cap, warm quote glyph + avatar ring. */
.lp-quotes__fig--gold {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(480px 200px at 85% -10%, rgba(255, 163, 4, 0.1), transparent 60%),
    radial-gradient(360px 160px at 10% 120%, rgba(196, 85, 26, 0.07), transparent 60%),
    rgba(255, 255, 255, 0.9);
  border-color: rgba(196, 85, 26, 0.2);
  box-shadow:
    0 1px 0 rgba(255, 163, 4, 0.22),
    0 8px 24px rgba(0, 60, 130, 0.07);
}
.lp-quotes__fig--gold::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  background: linear-gradient(90deg, #ffa304 0%, #c4551a 50%, #ffa304 100%);
}
.lp-quotes__fig--gold .lp-quotes__quote::before,
.lp-quotes__fig--gold .lp-quotes__quote::after {
  color: rgba(196, 85, 26, 0.4);
}
.lp-quotes__fig--gold .lp-quotes__avatar {
  box-shadow: 0 0 0 2px rgba(196, 85, 26, 0.22);
}

/* ── Hero responsive ─────────────────────────────────────────────── */
/* Stacked hero (<=1024): the claims grid centers at its cap, text stays
   start-aligned; the quote strip stacks to one
   centered column (three side-by-side would crush the quotes). */
@media (max-width: 1024px) {
  .lp-cards {
    margin-inline: auto;
    text-align: start;
  }
  .lp-quotes__grid {
    grid-template-columns: minmax(0, 1fr);
    max-inline-size: 640px;
    margin-inline: auto;
  }
}
/* Phone: the 2x2 grid HOLDS (research directive: compress, don't stack -
   the form must stay inside the first screens); cells tighten one step.
   The lab-only shapes (3-across row, stat bands) reflow for the showcase. */
@media (max-width: 767px) {
  .lp-cards {
    gap: 18px 16px;
  }
  .lp-card__chip {
    inline-size: 28px;
    block-size: 28px;
    margin-block-end: 8px;
  }
  .lp-card__chip .lp-icon {
    inline-size: 15px;
    block-size: 15px;
  }
  .lp-card__title {
    font-size: 14.5px;
  }
  .lp-card__desc {
    font-size: 12.5px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION-HEADER CROWNS
   Every below-hero section leads with its pose standing on a brand-gradient
   hairline, above the eyebrow + title (the /next .nc-sechead-crown motif).
   DOM order and visual order agree - no `order` trick - so keyboard and
   screen-reader traversal match the page. 96px brand floor holds at every
   width.

   Every pose is drawn inside a square 240-unit box with transparent space
   below the lowest stroke, and the amount differs per pose, so a single
   hard-coded overlap would bury the line in one pose's artwork and strand it
   under another's. `--lp-pose-floor` is where that lowest stroke actually
   sits, read off the shipped SVGs with getBBox() - measured, never guessed -
   and the rule pulls the transparent tail back out so the line always lands
   the same 8px under the character's feet at every box size.
   ═══════════════════════════════════════════════════════════════ */
.lp-sechead-crown {
  /* 202 of 240 - where wave / search / teach / graduation-cap / rocket /
     think / point (and reading-book, 199, inside a 1.5px rounding) bottom
     out. */
  --lp-pose-floor: 0.842;
  --lp-crown-box: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  inline-size: var(--lp-crown-box);
  margin-inline: auto; /* centered over the centered eyebrow + title */
  margin-block-end: var(--space-md);
}
/* ...except the cape hem (215.6) and the signed document (216), which run
   ~14 units lower. Without this the hairline would cross the drawing and
   read as part of it. */
.lp-sechead-crown--tight {
  --lp-pose-floor: 0.9;
}
/* Start-aligned sections (the lecturer body column) pin the crown to the
   inline start, over the left-set eyebrow. */
.lp-sechead-crown--start {
  margin-inline: 0 auto;
}
/* The pose fills its crown, so --lp-crown-box is the ONLY place a section
   pose's size is set - there is deliberately no width on .lp-secmascot to
   compete with it. */
.lp-sechead-crown .lp-secmascot {
  inline-size: 100%;
  margin: 0;
}
.lp-secmascot {
  pointer-events: none;
  user-select: none;
}
/* The header's single gradient accent, at the page's established 56px (the
   width the venue header's hairline keeps). */
.lp-sechead-crown .brand-hairline,
.lp-sechead-rule {
  inline-size: 56px;
  block-size: 2px;
  border-radius: 999px;
  margin: 0;
}
.lp-sechead-crown .brand-hairline {
  margin-block-start: calc(var(--lp-crown-box) * (var(--lp-pose-floor) - 1) + 8px);
}
/* Open-day: the pose sits BESIDE the head on desktop (it points across the
   gap at the wizard), so its rule stands alone above the start-set eyebrow
   instead of under a pose. */
.lp-sechead-rule {
  margin-inline: 0 auto;
  margin-block-end: var(--space-sm);
}
@media (max-width: 767px) {
  .lp-sechead-crown {
    --lp-crown-box: 110px;
  }
  /* The open-day header stacks (mascot centered above the title) on mobile -
     hold it a touch under the section-mascot size. */
  .lp-openday__mascot {
    inline-size: 104px;
  }
  /* The lecturer body stacks and centers on mobile - recenter its
     start-pinned crown too, so the pose + hairline sit over the centered
     eyebrow instead of hanging off the inline start. This MUST stay after
     the base .lp-sechead-crown--start rule above: same specificity, so
     source order is what decides it. */
  .lp-sechead-crown--start {
    margin-inline: auto;
  }
}

/* ── Open-day benefit pills ─────────────────────────────────
   The risk chips are soft glass pills, each led by a brand-gradient check
   glyph - framing every line as something the meeting GIVES you (interview /
   trial lesson / free / no commitment). */
.lp-page[data-lp-variant='lp'] .lp-openday__risk {
  gap: 10px;
}
.lp-page[data-lp-variant='lp'] .lp-openday__risk-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-color);
  background: linear-gradient(180deg, #ffffff 0%, #f2f8ff 100%);
  border: 1px solid rgba(8, 148, 255, 0.22);
  border-radius: var(--radius-full);
  padding-block: 7px;
  padding-inline: 12px 15px;
  box-shadow: 0 2px 8px rgba(0, 60, 130, 0.06);
}
/* Gradient check glyph via mask - no per-chip inline SVG or gradient-id
   churn; the brand gradient reads through the check stroke. */
.lp-page[data-lp-variant='lp'] .lp-openday__risk-chip::before {
  content: '';
  flex: none;
  inline-size: 15px;
  block-size: 15px;
  background: linear-gradient(135deg, #0894ff 0%, #bd32d6 55%, #ffa304 100%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}