/* Open Day Page - Premium */

.open-day-page {
  padding: 72px 24px 80px;
  direction: rtl;
}

.open-day-inner {
  max-width: 660px;
  margin: 0 auto;
  text-align: center;
}

.open-day-title {
  font-size: 48px;
  font-weight: 800;
  color: var(--text-color);
  margin-bottom: 18px;
  font-family: var(--font-display);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.open-day-lead {
  font-size: 20px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 56px;
  font-weight: 400;
  font-family: var(--font-body);
}

.open-day-lead__logo svg {
  height: 1em;
  /* transform: translateY(-1px); */
}

.open-day-card {
  background: linear-gradient(135deg, var(--bg-card-start, #E0ECFF) 0%, var(--bg-card-end, #EDF3FF) 100%);
  border: 1px solid var(--primary-border);
  border-radius: var(--radius-xl);
  padding: 44px 36px;
  margin-bottom: 56px;
  box-shadow: var(--shadow-sm);
}

.open-day-card h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 14px;
  font-family: var(--font-display);
}

.open-day-card p {
  font-size: 17px;
  color: var(--text-secondary);
  line-height: 1.6;
  font-weight: 400;
}

.open-day-benefits {
  text-align: right;
  margin-bottom: 56px;
}

.open-day-benefits h3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 24px;
  font-family: var(--font-display);
}

.open-day-benefits ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.open-day-benefits li {
  padding: 14px 22px 14px 0;
  position: relative;
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.55;
  font-weight: 400;
  font-family: var(--font-body);
  border-bottom: 1px solid var(--border-light);
}

.open-day-benefits li::before {
  content: '';
  position: absolute;
  right: 0;
  top: 20px;
  width: 6px;
  height: 6px;
  background: var(--primary-color);
  border-radius: 50%;
}

.open-day-benefits li:last-child {
  border-bottom: none;
}

.open-day-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Wizard ─────────────────────────────────── */

.wizard-container {
  max-width: 680px;
}

/* ── Compact embeddable variant ──────────────────────────────────
   Used by the /lp/go open-day two-column section (OpenDayWizard :compact).
   Fills its column, forces every option grid to a single column, and
   tightens type + spacing so the whole flow fits a ~400px-wide card. */
.wizard-container--compact {
  max-width: 100%;
}
.wizard-container--compact .wizard-progress {
  margin-bottom: 28px;
}
.wizard-container--compact .wizard-step-label {
  font-size: 13px;
}
.wizard-container--compact .wizard-question {
  font-size: 21px;
  line-height: 1.35;
  margin-bottom: 22px;
}
/* Single-column option grids (the narrow column can't hold the multi-up
   layouts the full-page wizard uses). */
.wizard-container--compact .wizard-options,
.wizard-container--compact .wizard-options--rich,
.wizard-container--compact .wizard-options--rich-compact,
.wizard-container--compact .wizard-options--courses {
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 26px;
  max-width: 100%;
}
/* Plain label options: shorter + tighter. */
.wizard-container--compact .wizard-option {
  min-height: 58px;
  padding: 14px 18px 14px 46px;
}
.wizard-container--compact .wizard-option-label {
  font-size: 15px;
}
/* Rich info-cards: smaller hero + padding. */
.wizard-container--compact .wizard-option--rich {
  padding: 18px 14px 16px;
}
.wizard-container--compact .wizard-option-hero {
  width: 52px;
  height: 52px;
  font-size: 22px;
}
/* Course cards: shorter blocks in the narrow column. */
.wizard-container--compact .wizard-options--courses .wizard-course-card {
  min-height: 0;
  padding: 20px 18px;
}
.wizard-container--compact .wizard-options--courses .wizard-course-card--bundle {
  min-height: 0;
  padding: 24px 18px;
}
/* Contact-info: stack the first/last-name pair; keep inputs full-width. */
.wizard-container--compact .wizard-form {
  max-width: 100%;
}
.wizard-container--compact .wizard-form-row {
  flex-direction: column;
}
.wizard-container--compact .wizard-nav {
  margin-top: 24px;
}
/* Consent row: one step down in type so the required tick and the button
   still fit the LP column without pushing the ask down the page. */
.wizard-container--compact .wizard-consent {
  margin-top: 1rem;
}
.wizard-container--compact .wizard-consent .consent__text {
  font-size: 0.85rem;
}

.wizard-progress {
  width: 100%;
  height: 4px;
  background: #e8e8e8;
  border-radius: 2px;
  margin-bottom: 48px;
  overflow: hidden;
}

.wizard-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #0894FF 0%, #BD32D6 50%, #FFA304 100%);
  border-radius: 2px;
  transition: width 0.4s ease;
}

.wizard-step {
  animation: wizardFadeIn 0.35s ease;
}

@keyframes wizardFadeIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.wizard-step-label {
  font-size: 14px;
  color: #888;
  margin-bottom: 8px;
  font-family: 'Noto Sans Hebrew', "Helvetica Neue", "Open Sans", sans-serif;
  font-weight: 500;
}

.wizard-question {
  font-size: 28px;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 32px;
  font-family: 'Noto Sans Hebrew', "Helvetica Neue", "Open Sans", sans-serif;
  line-height: 1.4;
}

.wizard-question-hint {
  font-size: 14px;
  color: #6e6e73;
  margin-top: -24px;
  margin-bottom: 24px;
  font-style: italic;
}

/* ── Survey-note callout (poll questions) ──────────────────────
   On the questions whose aggregate answers set the real course
   schedule/format (frequency, days, format), this banner frames the
   pick as a vote. Styled to stand out as a call-to-action: brand-blue
   field, a scarce three-stop gradient accent rail, an icon chip, and
   confident solid-blue copy (gradient never sits on the bold text). */
.wizard-poll-note {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: -8px auto 26px;
  max-width: 560px;
  padding: 16px 20px;
  border: 1px solid rgba(0, 113, 227, 0.24);
  border-radius: 14px;
  background: rgba(0, 113, 227, 0.06);
  box-shadow: 0 6px 20px rgba(0, 60, 130, 0.08);
  overflow: hidden;
  text-align: start;
}

.wizard-poll-note::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: linear-gradient(180deg, #0894ff 0%, #bd32d6 50%, #ffa304 100%);
}

.wizard-poll-note__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--primary-color);
  color: #fff;
  font-size: 16px;
}

.wizard-poll-note__text {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--primary-color);
  letter-spacing: 0.005em;
}

/* The multi-select hint normally tucks up under the heading; when the
   poll banner sits between them, cancel that pull so they don't overlap. */
.wizard-poll-note + .wizard-question-hint {
  margin-top: 0;
}

/* ── Wizard Options (single-choice card grid) ── */

.wizard-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 40px;
}

.wizard-option {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 72px;
  width: 100%;
  padding: 20px 26px 20px 52px;
  border: 2px solid #e0e0e0;
  border-radius: 16px;
  background: #fff;
  font-family: 'Noto Sans Hebrew', "Helvetica Neue", "Open Sans", sans-serif;
  color: #2d2d2d;
  cursor: pointer;
  text-align: right;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.wizard-option:hover {
  border-color: var(--primary-color);
  background: rgba(0, 113, 227, 0.035);
  box-shadow: 0 6px 18px rgba(0, 113, 227, 0.08);
  transform: translateY(-2px);
}

.wizard-option:focus-visible {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.18);
}

.wizard-option.selected {
  border-color: var(--primary-color);
  background: rgba(0, 113, 227, 0.08);
  box-shadow: 0 8px 22px rgba(0, 113, 227, 0.14);
}

.wizard-option-label {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wizard-option.selected .wizard-option-label {
  color: var(--primary-color);
  font-weight: 600;
}

.wizard-option-sublabel {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  color: #6b6b6b;
}

.wizard-option.selected .wizard-option-sublabel {
  color: var(--primary-color);
  opacity: 0.85;
  font-weight: 400;
}

.wizard-option-check {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%) scale(0.6);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.wizard-option.selected .wizard-option-check {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* ── Option with inline free-text input (e.g. "Other: ___") ──── */

.wizard-option-wrap {
  display: contents;
}

.wizard-option-wrap.has-text-input {
  display: flex;
  flex-direction: column;
  gap: 8px;
  grid-column: 1 / -1;
}

.wizard-option-text-input {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid var(--primary-color);
  border-radius: 12px;
  background: #fff;
  font-family: 'Noto Sans Hebrew', "Helvetica Neue", "Open Sans", sans-serif;
  font-size: 1rem;
  color: #2d2d2d;
  box-shadow: 0 1px 2px rgba(0, 113, 227, 0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  direction: rtl;
  text-align: right;
}

.wizard-option-text-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15);
}

.wizard-option-text-input::placeholder {
  color: #999;
}

/* ── Rich info-card variant (q6-session-frequency) ────────────────
   A vertical card with a hero icon at the top, short title, tagline,
   and a three-bullet stat row. Intended to replace a long paragraph
   with at-a-glance infographic bullets. Three cards sit side-by-side
   on desktop and stack on mobile. */

.wizard-options--rich {
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: stretch;
}

/* Exclusive opt-out options (e.g. "אין לי העדפה") span the full row below
   the other options so they read as a row-wide opt-out rather than as just
   another card. Applies to both the rich-card grid (q6) and the plain
   auto-fit grid (q7 days). */
.wizard-option-wrap.is-exclusive {
  display: block;
  grid-column: 1 / -1;
}

/* Because it spans the full row, the opt-out reads as a centred row-wide
   action rather than a left-edge list item. Symmetric inline padding keeps
   the label optically centred despite the absolutely-positioned check
   circle (mirrors the .wizard-options--rich-compact meta-option treatment). */
.wizard-option-wrap.is-exclusive .wizard-option {
  justify-content: center;
  text-align: center;
  padding-inline: 52px;
}

.wizard-option-wrap.is-exclusive .wizard-option-label {
  align-items: center;
}

.wizard-option--rich {
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 0;
  padding: 22px 14px 18px;
  gap: 10px;
  overflow: hidden;
}

/* Brand-gradient rail that "unlocks" on selection */
.wizard-option--rich::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, #0894ff 0%, #bd32d6 50%, #ffa304 100%);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.32s ease;
  border-radius: 16px 16px 0 0;
}

.wizard-option--rich.selected::before {
  transform: scaleX(1);
}

.wizard-option-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(140deg, rgba(0, 113, 227, 0.12) 0%, rgba(189, 50, 214, 0.10) 100%);
  color: var(--primary-color);
  font-size: 28px;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.wizard-option--rich:hover .wizard-option-hero {
  transform: translateY(-2px) scale(1.04);
}

.wizard-option--rich.selected .wizard-option-hero {
  background: linear-gradient(140deg, #0894ff 0%, #bd32d6 100%);
  color: #fff;
  transform: scale(1.06);
}

.wizard-option-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: #1d1d1f;
}

.wizard-option--rich.selected .wizard-option-title {
  color: var(--primary-color);
}

.wizard-option-tagline {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #5a6475;
  background: rgba(0, 113, 227, 0.06);
  border: 1px solid rgba(0, 113, 227, 0.12);
}

.wizard-option--rich.selected .wizard-option-tagline {
  color: var(--primary-color);
  background: rgba(0, 113, 227, 0.12);
  border-color: rgba(0, 113, 227, 0.22);
}

.wizard-option-bullets {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.wizard-option-bullets li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(0, 113, 227, 0.04);
  font-size: 13px;
  line-height: 1.35;
  color: #3c4455;
  text-align: start;
  transition: background 0.2s ease, color 0.2s ease;
}

.wizard-option-bullets li i {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--primary-color);
  background: rgba(0, 113, 227, 0.10);
  border-radius: 6px;
}

.wizard-option--rich.selected .wizard-option-bullets li {
  background: rgba(0, 113, 227, 0.08);
  color: #1d1d1f;
}

.wizard-option--rich.selected .wizard-option-bullets li i {
  background: rgba(0, 113, 227, 0.18);
}

.wizard-option--rich .wizard-option-check {
  top: 14px;
  inset-inline-end: 14px;
  left: auto;
  transform: scale(0.6);
}

.wizard-option--rich.selected .wizard-option-check {
  transform: scale(1);
}

/* ── Compact rich grid (icon + title + tagline, no stat-bullets) ──
   Used by the "other technological background" question. Four
   category cards sit 2-up and centred; the brand-gradient rail and
   the hero-icon fill-on-select (inherited from .wizard-option--rich)
   keep the step playful without inventing fake stats. The plain
   meta-options ("אחר" with its text input, and the "לא" opt-out)
   span the full row beneath the category grid. */
.wizard-options--rich-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 560px;
  margin-inline: auto;
}

.wizard-options--rich-compact .wizard-option--rich {
  padding: 26px 18px 24px;
  gap: 12px;
}

/* The two plain meta-options ("לא" opt-out at the top, "אחר" free-text at
   the bottom) span the full row and read as centred opt-in/out actions
   rather than left-edge list rows. Symmetric inline padding keeps the
   label optically centred despite the absolutely-positioned check circle. */
.wizard-options--rich-compact .wizard-option-wrap .wizard-option {
  grid-column: 1 / -1;
  justify-content: center;
  text-align: center;
  padding-inline: 52px;
}

.wizard-options--rich-compact .wizard-option-wrap .wizard-option-label {
  align-items: center;
}

/* ── Course-of-interest cards ──────────────────────────────────
   Bespoke step layout: the two single courses share the top row;
   the full study track and the "undecided" opt-out each span both
   columns. The brand wordmarks (Logo10x / Logo10xArchitect /
   Logo10xCourse) act as the card title, a factual subtitle sits
   beneath, and a three-stop gradient rail unlocks on selection. */
.wizard-options--courses {
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 680px;
  margin-inline: auto;
}

.wizard-options--courses .wizard-course-card {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 128px;
  padding: 26px 22px;
  gap: 12px;
  overflow: hidden;
}

.wizard-options--courses .wizard-course-card::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, #0894ff 0%, #bd32d6 50%, #ffa304 100%);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.32s ease;
  border-radius: 16px 16px 0 0;
}

.wizard-options--courses .wizard-course-card.selected::before {
  transform: scaleX(1);
}

.wizard-options--courses .wizard-course-card__logo {
  line-height: 0;
}

.wizard-options--courses .wizard-course-card__logo svg {
  display: block;
  height: 30px;
  width: auto;
}

.wizard-options--courses .wizard-course-card__sub {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #5a6475;
  max-width: 320px;
}

.wizard-options--courses .wizard-course-card.selected .wizard-course-card__sub {
  color: #3c4455;
}

.wizard-options--courses .wizard-course-card .wizard-option-check {
  top: 14px;
  inset-inline-start: auto;
  inset-inline-end: 14px;
  transform: scale(0.6);
}

.wizard-options--courses .wizard-course-card.selected .wizard-option-check {
  transform: scale(1);
}

/* Full study track + undecided opt-out span both columns. */
.wizard-options--courses .wizard-course-card--bundle,
.wizard-options--courses .wizard-course-card--plain {
  grid-column: 1 / -1;
}

/* Full study track - the most prominent card: taller, a soft brand
   glow that deepens on selection, and a wide single-line wordmark. */
.wizard-options--courses .wizard-course-card--bundle {
  min-height: 176px;
  padding: 32px 26px;
  gap: 14px;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(8, 148, 255, 0.05) 0%, rgba(189, 50, 214, 0.035) 45%, transparent 70%),
    #fff;
}

.wizard-options--courses .wizard-course-card--bundle:hover {
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(8, 148, 255, 0.08) 0%, rgba(189, 50, 214, 0.05) 45%, transparent 72%),
    rgba(0, 113, 227, 0.035);
}

.wizard-options--courses .wizard-course-card--bundle.selected {
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(8, 148, 255, 0.11) 0%, rgba(189, 50, 214, 0.06) 45%, transparent 72%),
    rgba(0, 113, 227, 0.05);
}

.wizard-options--courses .wizard-course-card__badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--primary-color);
  background: rgba(0, 113, 227, 0.08);
  border: 1px solid rgba(0, 113, 227, 0.16);
}

.wizard-options--courses .wizard-course-card--bundle.selected .wizard-course-card__badge {
  background: rgba(0, 113, 227, 0.14);
  border-color: rgba(0, 113, 227, 0.26);
}

.wizard-options--courses .wizard-course-card__logo--course svg {
  height: auto;
  width: 100%;
  max-width: 380px;
}

/* Undecided - deliberately plain and short: no logo, no rail,
   understated text that turns brand-blue when chosen. */
.wizard-options--courses .wizard-course-card--plain {
  min-height: 60px;
  padding: 18px 22px;
  gap: 0;
}

.wizard-options--courses .wizard-course-card--plain::before {
  display: none;
}

.wizard-options--courses .wizard-course-card__plain {
  font-size: 16px;
  font-weight: 400;
  color: #5a6475;
}

.wizard-options--courses .wizard-course-card--plain.selected .wizard-course-card__plain {
  color: var(--primary-color);
}

/* ── Slider (scale question) ─────────────────── */

/* ── Wizard Slider (scale / likert) ──────────────
   Minimalist stepped slider in the Apple / Anthropic register: a thin rail,
   a small clean thumb, restrained typography, and a discrete per-step icon
   row as a segmented shortcut. Layout vars are chosen so pip/step-dot
   centers align pixel-exactly with the native thumb center at each value. */
.wizard-slider-container {
  --thumb-size: 22px;
  --track-height: 4px;
  --pip-size: 4px;
  --slider-fill: 0%;
  /* Apple-like system-blue fill - single brand hue with a whisper of
     top-to-bottom shade for dimensionality. The brand gradient stays
     rare; this single-hue fill matches iOS slider restraint. */
  --slider-track-gradient: linear-gradient(180deg, #1A85EC 0%, #0071E3 100%);
  --slider-track-shadow: rgba(0, 113, 227, 0.16);

  margin: 16px auto 32px;
  max-width: 520px;
  padding: 0;
  direction: rtl;
}

.wizard-slider-value-display {
  text-align: center;
  min-height: 48px;
  margin-bottom: 14px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
}

.wizard-slider-icon {
  font-size: 22px;
  color: var(--text-secondary);
  animation: wizardSliderValuePop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
  transform: translateY(3px);
}

.wizard-slider-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-color);
  letter-spacing: -0.02em;
  animation: wizardSliderValuePop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes wizardSliderValuePop {
  0%   { transform: translateY(4px); opacity: 0; }
  100% { transform: translateY(0);   opacity: 1; }
}

.wizard-slider-value { animation-name: wizardSliderValuePop; }
.wizard-slider-icon { animation-name: wizardSliderValuePop; }

.wizard-slider-placeholder {
  font-size: 13.5px;
  color: var(--text-tertiary);
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* ── Track + thumb ───────────────────────────── */

.wizard-slider-track {
  position: relative;
  padding: 0 calc(var(--thumb-size) / 2);
  height: var(--thumb-size);
  display: flex;
  align-items: center;
}

/* base track */
.wizard-slider-track::before {
  content: "";
  position: absolute;
  inset: calc(50% - var(--track-height) / 2) calc(var(--thumb-size) / 2);
  height: var(--track-height);
  border-radius: 999px;
  background: #E8EDF4;
}

/* live fill, driven by --slider-fill; RTL-aware via `inset-inline-end` */
.wizard-slider-track::after {
  content: "";
  position: absolute;
  top: calc(50% - var(--track-height) / 2);
  height: var(--track-height);
  /* Anchor at inline-start (the min side: right in RTL, left in LTR) so
     the fill grows from min toward the thumb. Previously anchored on
     inline-end, which in RTL visually fills from the max side → "backwards". */
  inset-inline-start: calc(var(--thumb-size) / 2);
  width: calc(var(--slider-fill));
  border-radius: 999px;
  background: var(--slider-track-gradient);
  transition: width 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.wizard-slider-container.is-unset .wizard-slider-track::after {
  opacity: 0;
}

/* Tick pips - tiny dots on the rail. Restrained: visible only as a hint that
   the scale is discrete. Inset compensates for pip radius so first/last pip
   CENTERS align with the thumb center at min/max. */
.wizard-slider-pips {
  position: absolute;
  inset: 0 calc(var(--thumb-size) / 2 - var(--pip-size) / 2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

.wizard-slider-pip {
  width: var(--pip-size);
  height: var(--pip-size);
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(0, 60, 130, 0.22);
  transition: opacity 0.2s ease;
}

.wizard-slider-pip.is-filled {
  opacity: 0;
}

/* Native range input - invisible track, visible thumb on top */
.wizard-slider {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  outline: none;
  margin: 0;
  padding: 0;
  cursor: grab;
  direction: rtl;
}

.wizard-slider:active { cursor: grabbing; }

.wizard-slider::-webkit-slider-runnable-track {
  height: 100%;
  background: transparent;
  border: none;
}

.wizard-slider::-moz-range-track {
  height: 100%;
  background: transparent;
  border: none;
}

.wizard-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--thumb-size);
  height: var(--thumb-size);
  border-radius: 50%;
  background: #FFFFFF;
  border: none;
  box-shadow:
    0 0 0 1px rgba(0, 60, 130, 0.14),
    0 2px 6px rgba(0, 60, 130, 0.12),
    0 0 0 0 rgba(0, 113, 227, 0);
  cursor: grab;
  transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1),
              box-shadow 0.18s ease;
}

.wizard-slider::-webkit-slider-thumb:hover {
  transform: scale(1.05);
  box-shadow:
    0 0 0 1px rgba(0, 60, 130, 0.18),
    0 3px 10px rgba(0, 60, 130, 0.16);
}

.wizard-slider:focus-visible::-webkit-slider-thumb {
  box-shadow:
    0 0 0 1px rgba(0, 60, 130, 0.18),
    0 2px 6px rgba(0, 60, 130, 0.12),
    0 0 0 4px rgba(0, 113, 227, 0.18);
}

.wizard-slider:active::-webkit-slider-thumb {
  cursor: grabbing;
  transform: scale(1.08);
  box-shadow:
    0 0 0 1px rgba(0, 60, 130, 0.22),
    0 4px 12px rgba(0, 60, 130, 0.22);
}

.wizard-slider::-moz-range-thumb {
  width: var(--thumb-size);
  height: var(--thumb-size);
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid rgba(0, 60, 130, 0.14);
  box-shadow: 0 2px 6px rgba(0, 60, 130, 0.12);
  cursor: grab;
  transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.wizard-slider::-moz-range-thumb:hover { transform: scale(1.05); }

/* ── Stepped icon row (clickable shortcut, visible at-a-glance scale) ──
   The inner box is inset by half the thumb on each side so its width equals
   the thumb's traversal distance. Each button is absolutely positioned at
   `inset-inline-start: (idx/(N-1))*100%` and translated by 50% to center on
   that anchor - pixel-exact alignment with the pip / thumb center. */
.wizard-slider-steps {
  margin-top: 10px;
}

.wizard-slider-steps-inner {
  position: relative;
  height: 62px;
  margin-inline: calc(var(--thumb-size) / 2);
}

.wizard-slider-step {
  all: unset;
  position: absolute;
  top: 0;
  transform: translateX(50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 2px;
  width: 76px;
  border-radius: var(--radius-sm);
  transition: transform 0.18s ease;
}

.wizard-slider-step:hover { transform: translateX(50%) translateY(-1px); }

.wizard-slider-step:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 3px;
}

.wizard-slider-step-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid var(--border-default);
  display: grid;
  place-items: center;
  color: var(--text-tertiary);
  font-size: 11px;
  transition: border-color 0.18s ease,
              color 0.18s ease,
              background 0.18s ease,
              transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1),
              box-shadow 0.18s ease;
}

.wizard-slider-step:hover .wizard-slider-step-dot {
  border-color: var(--text-secondary);
  color: var(--text-secondary);
}

.wizard-slider-step.is-passed .wizard-slider-step-dot {
  border-color: transparent;
  color: #FFFFFF;
  background: var(--slider-track-gradient);
}

.wizard-slider-step.is-active .wizard-slider-step-dot {
  transform: scale(1.12);
  box-shadow: 0 0 0 3px rgba(94, 107, 133, 0.12);
}

.wizard-slider-step-label {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-tertiary);
  line-height: 1.3;
  text-align: center;
  max-width: 100%;
  transition: color 0.18s ease, font-weight 0.18s ease;
  letter-spacing: 0.005em;
}

.wizard-slider-step:hover .wizard-slider-step-label { color: var(--text-secondary); }

.wizard-slider-step.is-active .wizard-slider-step-label {
  color: var(--text-color);
  font-weight: 600;
}

/* ── Context anchors (min / max narrative framing) ──
   Intentionally quiet - a whisper beneath the control, not a frame. */
.wizard-slider-anchors {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding: 0 calc(var(--thumb-size) / 2);
  font-size: 11px;
  font-weight: 400;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
  font-family: var(--font-body);
}

.wizard-slider-anchor {
  opacity: 0.85;
}

/* ── Wizard Slider Description (live per-step format note) ── */
/* Used only when the question's ScaleOptions defines a `descriptions[]`
   array. Subtle card below the anchors that cross-fades on each step
   change - a quiet, gamifying reveal of what the pace actually means. */

.wizard-slider-description {
  margin-top: 20px;
  padding: 18px 22px;
  border-radius: 16px;
  background: linear-gradient(180deg, #F8FAFD 0%, #F1F4FA 100%);
  border: 1px solid rgba(0, 60, 130, 0.08);
  text-align: center;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Minimalist top accent - a 2px three-stop brand-gradient rail that scales
   in from center once the user engages the slider, so the panel "unlocks"
   visibly when a choice is made. */
.wizard-slider-description::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  height: 2px;
  background: var(--primary-color);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

.wizard-slider-description:not(.is-unset)::before {
  transform: scaleX(1);
}

.wizard-slider-description.is-unset {
  background: rgba(245, 247, 250, 0.5);
}

.wizard-slider-description-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #191A23;
  font-family: var(--font-body);
  max-width: 520px;
}

.wizard-slider-description-text--placeholder {
  color: #8E8F9E;
  font-style: italic;
}

/* Cross-fade transition when stepping between values. */
.wizard-desc-enter-active,
.wizard-desc-leave-active {
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.wizard-desc-enter-from {
  opacity: 0;
  transform: translateY(4px);
}
.wizard-desc-leave-to {
  opacity: 0;
  transform: translateY(-4px);
}

/* ── Wizard Form (personal info) ────────────── */

.wizard-form {
  max-width: 400px;
  margin: 0 auto 40px;
}

.wizard-form-row {
  display: flex;
  gap: 12px;
}

.wizard-input {
  width: 100%;
  padding: 16px 20px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  font-size: 17px;
  font-family: 'Noto Sans Hebrew', "Helvetica Neue", "Open Sans", sans-serif;
  font-weight: 400;
  color: #333;
  outline: none;
  transition: border-color 0.2s ease;
  background: #fff;
}

.wizard-input:focus {
  border-color: var(--primary-color);
}

.wizard-input::placeholder {
  color: #bbb;
}

.wizard-input.is-invalid {
  border-color: #d93025;
}

.wizard-input.is-invalid:focus {
  border-color: #d93025;
  box-shadow: 0 0 0 4px rgba(217, 48, 37, 0.12);
}

.wizard-input-error {
  margin: 8px 4px 0;
  font-size: 14px;
  color: #d93025;
  text-align: right;
  font-family: 'Noto Sans Hebrew', "Helvetica Neue", "Open Sans", sans-serif;
}

/* ── Date step (uses OpenDayUpcomingDates in selectable mode) ──── */

/* The date step renders <OpenDayUpcomingDates selectable> directly.
   All visual styling for the cards lives in open-day-upcoming-dates.css. */

/* ── Summary ────────────────────────────────── */

.wizard-summary {
  text-align: right;
  margin-bottom: 40px;
}

.wizard-summary-section {
  background: #fafaf9;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 16px;
}

.wizard-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.wizard-summary-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #1d1d1f;
  font-family: 'Noto Sans Hebrew', "Helvetica Neue", "Open Sans", sans-serif;
  margin: 0;
}

.wizard-edit-link {
  font-size: 13px;
  color: var(--primary-color);
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Noto Sans Hebrew', "Helvetica Neue", "Open Sans", sans-serif;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.wizard-edit-link:hover {
  background: rgba(0, 113, 227, 0.08);
}

.wizard-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 15px;
  font-family: 'Noto Sans Hebrew', "Helvetica Neue", "Open Sans", sans-serif;
  color: #333;
  gap: 16px;
  min-width: 0;
}

.wizard-summary-row:last-child {
  border-bottom: none;
}

.wizard-summary-label {
  font-weight: 500;
  color: #666;
  flex-shrink: 0;
  min-width: 0;
}

.wizard-summary-row--stacked {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 12px 0;
}

.wizard-summary-row--stacked .wizard-summary-question {
  flex-shrink: 1;
  font-weight: 500;
  color: #666;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.wizard-summary-row--stacked .wizard-summary-answer {
  color: #1d1d1f;
  font-weight: 500;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* ── Success ────────────────────────────────── */

.wizard-success {
  text-align: center;
  padding: 40px 0;
}

.wizard-success-icon {
  font-size: 64px;
  color: #34c759;
  margin-bottom: 24px;
}

.wizard-success h2 {
  font-size: 32px;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 12px;
  font-family: 'Noto Sans Hebrew', "Helvetica Neue", "Open Sans", sans-serif;
}

.wizard-success p {
  font-size: 18px;
  color: #555;
  font-weight: 400;
}

.wizard-success-detail {
  font-size: 16px;
  color: #777;
  margin-bottom: 28px;
}

/* "המועד שביקשתם:" prefix on the date line. The wizard records a request,
   not a booking (owner 2026-08-06), so the date is labelled as the one the
   visitor asked for - the label carries that meaning and is weighted a
   notch heavier than the date itself. */
.wizard-success-detail-label {
  font-weight: 500;
  color: var(--text-secondary);
}

.wizard-success-calendar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}

.wizard-success-calendar-note {
  font-size: 15px;
  color: var(--text-secondary);
  font-weight: 400;
}

.wizard-success-home {
  margin-top: 4px;
}

/* Arrival details card (in person or Zoom, then car + license plate): sits
   directly below the calendar/navigation pills, above the recap. A quiet
   bordered card so the one actionable ask on the screen reads as such without
   shouting. ONE card, not two - the car question is a consequence of the
   attendance answer above it (owner D1/D7, 2026-08-16). */
.wizard-success-arrival {
  max-width: 480px;
  margin: 0 auto 32px;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.wizard-arrival-title {
  font-size: 17px;
  font-weight: 600;
  color: #1d1d1f;
  font-family: 'Noto Sans Hebrew', "Helvetica Neue", "Open Sans", sans-serif;
  margin: 0 0 6px;
}

.wizard-success .wizard-arrival-note {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 14px;
}

.wizard-arrival-choices {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.wizard-arrival-choice {
  min-height: 42px;
  padding: 8px 22px;
  background: #fff;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-full);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-color);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.wizard-arrival-choice:hover {
  border-color: var(--primary-color);
}

.wizard-arrival-choice--selected {
  border-color: var(--primary-color);
  background: var(--primary-light);
  color: var(--primary-color);
  font-weight: 600;
}

/* The revealed half of the card: separated by a hairline rather than a second
   box, so the two questions still read as one ask. */
.wizard-arrival-car {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}

.wizard-arrival-subtitle {
  font-size: 15.5px;
  font-weight: 600;
  color: #1d1d1f;
  font-family: 'Noto Sans Hebrew', "Helvetica Neue", "Open Sans", sans-serif;
  margin: 0 0 6px;
}

.wizard-arrival-plate {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

/* The shared text-input style is grid-aware; here it lives in a flex row.
   The plate reads left-to-right (dir=ltr on the input, matching the admin
   panel's plate convention). */
.wizard-arrival-plate .wizard-arrival-input {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.wizard-arrival-save {
  flex: none;
  min-height: 44px;
  padding: 10px 26px;
}

/* Scoped under .wizard-success: the generic `.wizard-success p` rule
   (0-1-1) would otherwise out-specify the status/error colors and sizes. */
.wizard-success .wizard-arrival-status {
  margin: 12px 0 0;
  font-size: 14.5px;
  color: #1d7a3e;
  font-weight: 500;
}

/* The live region stays mounted while empty (screen readers need it in the
   tree before the text lands) - collapse its footprint until then. */
.wizard-success .wizard-arrival-status:empty {
  margin: 0;
}

.wizard-success .wizard-arrival-error {
  margin: 12px 0 0;
  font-size: 15px;
  color: #dc2626;
}

@media (max-width: 767px) {
  .wizard-arrival-plate {
    flex-direction: column;
  }
  .wizard-arrival-save {
    width: 100%;
  }
}

/* Registration recap on the success screen (moved from the old summary step).
   The success screen is centre-aligned, so constrain the box and restore the
   right-aligned reading direction the summary rows expect. */
.wizard-success-summary {
  max-width: 480px;
  margin: 8px auto 32px;
  text-align: right;
}

.wizard-success-summary-title {
  font-size: 18px;
  font-weight: 600;
  color: #1d1d1f;
  font-family: 'Noto Sans Hebrew', "Helvetica Neue", "Open Sans", sans-serif;
  margin: 0 0 16px;
  text-align: center;
}

.wizard-success-summary .wizard-summary {
  margin-bottom: 0;
}

/* ── Navigation ─────────────────────────────── */

.wizard-nav {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 32px;
}

.wizard-skip-row {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.wizard-skip-link {
  background: transparent;
  border: none;
  padding: 6px 10px;
  font-family: 'Noto Sans Hebrew', "Helvetica Neue", "Open Sans", sans-serif;
  font-size: 14px;
  color: var(--primary-color);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  border-radius: 6px;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.wizard-skip-link:hover {
  color: var(--primary-color);
  background: var(--fsp-hover-bg);
}

.wizard-skip-link:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.wizard-start-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.wizard-error {
  background: #fef2f2;
  color: #dc2626;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 15px;
  margin-bottom: 16px;
  font-family: 'Noto Sans Hebrew', "Helvetica Neue", "Open Sans", sans-serif;
  text-align: center;
}

/* ── Tablet ────────────────────────────────────── */

@media (max-width: 1024px) {
  .open-day-title {
    font-size: 38px;
  }

  .open-day-lead {
    font-size: 18px;
  }

  .wizard-question {
    font-size: 24px;
  }
}

/* ── Phone ─────────────────────────────────────── */

@media (max-width: 767px) {
  .open-day-page {
    padding: 44px 20px 60px;
  }

  .open-day-title {
    font-size: 32px;
  }

  .open-day-lead {
    font-size: 18px;
    margin-bottom: 36px;
    line-height: 1.6;
  }

  .open-day-card {
    padding: 32px 24px;
    margin-bottom: 40px;
  }

  .open-day-card h2 {
    font-size: 22px;
  }

  .open-day-card p {
    font-size: 17px;
  }

  .open-day-benefits h3 {
    font-size: 22px;
  }

  .open-day-benefits li {
    font-size: 17px;
    padding: 14px 22px 14px 0;
  }

  .open-day-actions {
    flex-direction: column;
    align-items: center;
  }

  .wizard-question {
    font-size: 22px;
    margin-bottom: 24px;
  }

  .wizard-options {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .wizard-option {
    min-height: 60px;
    padding: 16px 20px 16px 46px;
  }

  .wizard-option-label {
    font-size: 15px;
  }

  .wizard-options--rich {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Keep the tech-background categories 2-up on phones - the cards
     are compact (icon + title + tagline) so two fit comfortably. */
  .wizard-options--rich-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .wizard-options--rich-compact .wizard-option--rich {
    padding: 20px 12px 18px;
  }

  .wizard-options--courses {
    gap: 12px;
  }

  .wizard-options--courses .wizard-course-card {
    min-height: 112px;
    padding: 22px 18px;
  }

  .wizard-options--courses .wizard-course-card--bundle {
    min-height: 150px;
    padding: 26px 20px;
  }

  .wizard-options--courses .wizard-course-card__logo svg {
    height: 26px;
  }

  .wizard-options--courses .wizard-course-card__sub {
    font-size: 13px;
  }

  .wizard-option--rich {
    padding: 22px 18px 18px;
    gap: 8px;
  }

  .wizard-option-hero {
    width: 54px;
    height: 54px;
    font-size: 24px;
  }

  .wizard-option-title {
    font-size: 17px;
  }

  .wizard-option-bullets li {
    font-size: 13.5px;
    padding: 7px 10px;
  }

  .wizard-slider-container {
    --thumb-size: 22px;
    max-width: 100%;
  }

  .wizard-slider-value { font-size: 20px; }
  .wizard-slider-icon { font-size: 20px; }

  .wizard-slider-step {
    width: 64px;
  }

  .wizard-slider-step-dot {
    width: 24px;
    height: 24px;
    font-size: 10px;
  }

  .wizard-slider-step-label {
    font-size: 10.5px;
    letter-spacing: 0;
    line-height: 1.25;
  }

  .wizard-slider-anchors {
    font-size: 10.5px;
    padding: 0 calc(var(--thumb-size) / 2);
    letter-spacing: 0.02em;
  }

  .wizard-slider-description {
    margin-top: 16px;
    padding: 14px 16px;
    min-height: 64px;
  }

  .wizard-slider-description-text {
    font-size: 14px;
    line-height: 1.5;
  }

  .wizard-form-row {
    flex-direction: column;
  }

  .wizard-input {
    padding: 14px 16px;
    font-size: 16px;
  }

  .wizard-summary-row {
    flex-direction: column;
    gap: 4px;
  }

  .wizard-success h2 {
    font-size: 24px;
  }

  .wizard-success-icon {
    font-size: 48px;
  }

  .open-day-actions .btn-primary,
  .open-day-actions .btn-secondary {
    width: 100%;
    max-width: 320px;
    text-align: center;
  }
}

/* ── Contact-permission consent (phone step) ───────────────────
   The required tick that lets us approach the person on WhatsApp or by
   phone. It reuses the shared .consent / .consent__checkbox / .consent__text
   recipe from contact-view.css (loaded before this file, so these rules win
   at equal specificity) and only re-states what differs here: the wizard's
   centred measure, its type scale and its red.
   RTL: `display: flex` under the page's global `direction: rtl` already puts
   the box at the reading start (right) - no side-specific rule needed. */
.wizard-consent {
  max-width: 460px;
  margin: 1.25rem auto 0;
  text-align: right;
}

/* Finger-sized target. The whole label toggles, but the box is what people
   aim at, and 18px is a miss on a phone. */
.wizard-consent .consent__checkbox {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-top: 1px;
}

.wizard-consent .consent__text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-secondary);
  /* Never strand the trailing inline brand mark alone on its own line. */
  text-wrap: pretty;
}

.wizard-consent--error .consent__text {
  color: #d93025;
}

.wizard-consent--error .consent__checkbox {
  accent-color: #d93025;
  /* box-shadow, not outline - outline would suppress the UA focus ring. */
  box-shadow: 0 0 0 1.5px #d93025;
  border-radius: 3px;
}

/* Sits under the consent row on the same measure. The base
   .wizard-input-error margin is tuned for a full-width input, so it is
   restated here (this rule is later in the file, so it wins). */
.wizard-consent-error {
  max-width: 460px;
  margin: 6px auto 0;
}

.wizard-consent-note {
  margin: 1rem 0 0.5rem;
  font-size: 0.85rem;
  color: #6b7280;
  line-height: 1.6;
  text-align: center;
}

/* ── Privacy reassurance (green, near email/phone/submit) ──────
   Reads as a calm, trustworthy promise rather than a marketing
   shout - subtle leaf icon, restrained green, paragraph weight. */
.wizard-privacy-note {
  margin: 14px auto 0;
  max-width: 460px;
  padding: 12px 16px;
  border: 1px solid rgba(22, 163, 74, 0.22);
  background: rgba(22, 163, 74, 0.06);
  border-radius: 12px;
  color: #15803d;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
  letter-spacing: 0.005em;
}

/* ── Min-selection warning (q7-days) ────────────────────────
   Inline calm-red message above the wizard nav. Appears when
   the user has at least one selection but is still under the
   per-question minimum. Pairs with the disabled "המשך" button. */
.wizard-min-selection-warning {
  margin: 8px auto 0;
  max-width: 460px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(217, 48, 37, 0.06);
  border: 1px solid rgba(217, 48, 37, 0.18);
  color: #d93025;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  letter-spacing: 0.005em;
}

/* ── Rich-card grid: 2-card variant (q8-format) ────────────
   The default rich grid is 3 columns (q6 has 3 cards). For 2
   cards we want them centered side-by-side, not stretched
   across the full width. count-N reflects card options only
   (the full-row "אין לי העדפה" opt-out is excluded), so
   q8-format's two format cards + opt-out still match count-2:
   the cards share this 600px row and the opt-out spans it
   full-width beneath them. */
.wizard-options--rich.wizard-options--count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 600px;
  margin-inline: auto;
}

@media (max-width: 768px) {
  .wizard-options--rich.wizard-options--count-2 {
    grid-template-columns: 1fr;
  }
}