/* ============================================================
   EAS — The Lounge Form (v2 — Redesign)
   Chrome-first, 7-step, light canonical token system.
   Built from mockups/lounge-form-begin-redesign-mockup.html.
   LAW 18 component self-containment — every token defined here,
   zero inheritance from the host page (this page has no header/
   footer chrome to inherit from anyway).
   ============================================================ */

#eas-lounge,
#eas-lounge *,
#eas-lounge *::before,
#eas-lounge *::after {
  box-sizing: border-box;
}

body.page-id-18429,
body.page-id-18663 {
  margin: 0 !important;
  padding: 0 !important;
}

body.page-id-18429 .e-con,
body.page-id-18429 .e-con-inner {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.eas-lg {
  --canvas: #FAF7F0;
  --cream: #FEFDFB;
  --forest: #2C3424;
  --ink: #1C1A14;
  --gold: #B8780A;
  --gold-on-light: #924F08;
  --amber: #C9963C;
  --tobacco: #B59E7D;
  --char: #584738;
  --ink-muted: rgba(88,71,56,0.72);
  --ink-faint: rgba(88,71,56,0.12);
  --gold-dim: rgba(184,120,10,0.5);
  --gold-pale: rgba(184,120,10,0.12);
  --parchment: #F2EBD9;
  --parchment-soft: #EDE5CE;

  display: block;
  min-height: 100vh;
  background: var(--canvas);
  color: var(--ink);
  font-family: 'Jost', Helvetica, Arial, sans-serif;
  font-weight: 300;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
}

.eas-lg h1, .eas-lg h2, .eas-lg h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  margin: 0;
  color: var(--ink);
}

.eas-lg .sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Honeymoon warm mode — subtle, restrained shift only ────── */
.eas-lg.is-honeymoon {
  --canvas: #FBF4EA;
  --gold: #C9822A;
  --gold-on-light: #A05E12;
  --gold-pale: rgba(201,130,42,0.14);
  --parchment-soft: #F0E3D0;
}
.eas-lg.is-honeymoon .eas-lg-header,
.eas-lg.is-honeymoon .eas-lg-progress-wrap,
.eas-lg.is-honeymoon .eas-lg-footer {
  background: var(--cream);
}

/* ── CHROME: HEADER ──────────────────────────────────────────── */
.eas-lg-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px 40px;
  background: var(--cream);
  border-bottom: 1px solid var(--ink-faint);
  flex-wrap: wrap;
}

/* Revisions v1.5, item 2 — real logo asset (SVG, eas_logo_uri()), not
   hardcoded text; sized to sit comfortably in the lounge header's own
   20px vertical padding, same proportions as the site nav's own
   .eas-logo img rule (height-constrained, width auto).
   Revisions v1.6 — 40px left the "THE LUXURY OF TIME" subline (drawn
   inside the same SVG, roughly the bottom third of it) too small to
   read comfortably; enlarged to 64px so the whole mark, tagline
   included, is genuinely legible.
   Revisions v1.7 — the markup now inlines the SVG (not <img src>), so
   this sizing rule targets both — svg for the normal path, img kept
   as the fallback selector when the asset file is missing on disk. */
.eas-lg-logo {
  display: block;
  line-height: 0;
  text-decoration: none;
}
.eas-lg-logo svg,
.eas-lg-logo img {
  display: block;
  height: 64px;
  width: auto;
  max-width: min(300px, 60vw);
}
/* Revisions v1.7 — the shared logo asset's tagline fill (.st0,
   #E8C06A) is tuned for dark/photographic contexts (root CLAUDE.md's
   own token rules: "amber... dark/photographic contexts only"). This
   header is always on a light cream background, where that gold reads
   as low-contrast — recolored here to the same darker gold already
   used site-wide for text-on-light ("gold-on-light", #924F08), scoped
   to this page only so the shared nav asset elsewhere is untouched. */
.eas-lg-logo svg .st0 { fill: var(--gold-on-light); }

.eas-lg-header-right {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.eas-lg-link {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  color: var(--char);
  text-decoration: none;
  letter-spacing: 0.4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.eas-lg-link:hover { color: var(--gold-on-light); }

.eas-lg-resume-wrap { position: relative; }
.eas-lg-resume-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  width: 280px;
  background: var(--cream);
  border: 1px solid var(--ink-faint);
  box-shadow: 0 24px 48px -20px rgba(28,26,20,0.28);
  padding: 18px;
  z-index: 60;
}
.eas-lg-resume-panel-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 17px;
  color: var(--ink);
  margin-bottom: 4px;
}
.eas-lg-resume-panel-sub {
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.5;
  margin-bottom: 12px;
}
.eas-lg-resume-panel input[type="email"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ink-faint);
  background: var(--canvas);
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 10px;
}
.eas-lg-resume-status {
  font-size: 11.5px;
  color: var(--ink-muted);
  margin-top: 10px;
  line-height: 1.5;
}
.eas-lg-resume-status.is-success { color: var(--gold-on-light); }
.eas-lg-resume-status.is-error { color: #A64545; }

/* ── CHROME: PROGRESS ────────────────────────────────────────── */
.eas-lg-progress-wrap {
  background: var(--cream);
  padding: 0 40px 20px;
}
.eas-lg-progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.6px;
  margin-bottom: 10px;
  padding-top: 4px;
}
.eas-lg-progress-line {
  height: 2px;
  background: var(--ink-faint);
  position: relative;
}
.eas-lg-progress-fill {
  height: 2px;
  background: var(--gold);
  width: 14.28%;
  transition: width 0.35s ease;
}
.eas-lg-progress-steps {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 10px;
  color: var(--ink-muted);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  gap: 4px;
}
.eas-lg-progress-steps span {
  flex: 1;
  text-align: center;
}
.eas-lg-progress-steps span:first-child { text-align: left; }
.eas-lg-progress-steps span:last-child { text-align: right; }
.eas-lg-progress-steps span.current,
.eas-lg-progress-steps span.done { color: var(--gold-on-light); }

/* ── MAIN ─────────────────────────────────────────────────────── */
.eas-lg-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 40px 90px;
}
.eas-lg-eyebrow {
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--gold-on-light);
  text-transform: uppercase;
  font-weight: 500;
}

.eas-lg-step { animation: eas-lg-stepIn 0.35s ease both; }
@keyframes eas-lg-stepIn {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}
.eas-lg-step.eas-lg-step--back { animation: eas-lg-stepBack 0.35s ease both; }
@keyframes eas-lg-stepBack {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── STEP 1: journey cards ───────────────────────────────────── */
.eas-lg-step1-head { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.eas-lg-h1 { font-size: clamp(30px, 4.2vw, 42px); margin: 14px 0 12px; line-height: 1.1; }
.eas-lg-h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 8px; line-height: 1.15; }
.eas-lg-lead { font-size: 15px; color: var(--ink-muted); line-height: 1.7; }
.eas-lg-step1-head .eas-lg-lead { max-width: 560px; margin: 0 auto; }

.eas-lg-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.eas-lg-jcard {
  position: relative;
  height: 260px;
  border: 1px solid var(--ink-faint);
  overflow: hidden;
  cursor: pointer;
  /* Revisions v1.1, item 2 — real photography, one per card. PHP inlines
     the gradient overlay + real image URL together via style="" (same
     asset already used sitewide for this journey's nav/footer face); this
     background-size/position pair is what makes that inline photo crop
     correctly instead of tiling/stretching. The plain gradient fallback
     below only shows if a journey somehow has no image URL. */
  background:
    linear-gradient(180deg, rgba(28,26,20,0.10) 0%, rgba(28,26,20,0.78) 100%),
    linear-gradient(120deg, #8a6a3f, #3f4a2e);
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 22px;
  text-align: left;
  transition: transform 0.2s ease, outline-color 0.2s ease;
}
.eas-lg-jcard:hover { transform: translateY(-3px); }
.eas-lg-jcard:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.eas-lg-jcard.selected { outline: 2px solid var(--gold); outline-offset: -2px; }
.eas-lg-jcard-title { display: block; color: var(--cream); font-family: 'Cormorant Garamond', Georgia, serif; font-size: 23px; margin-bottom: 6px; }
.eas-lg-jcard-sub { display: block; color: rgba(254,253,251,0.85); font-size: 12.5px; line-height: 1.5; }

/* 6th slot — deliberately not a photo card (Revisions v1.1, item 2):
   light parchment, an icon, a heading, and a quiet call link read as a
   different kind of choice rather than a filler pillar. */
.eas-lg-jcard--muted {
  background: var(--parchment-soft);
  background-image: none;
  border: 1px solid var(--ink-faint);
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  cursor: default;
}
.eas-lg-jcard--muted:hover { transform: none; }
.eas-lg-jcard-muted-icon { color: var(--gold-on-light); margin-bottom: 4px; }
.eas-lg-jcard-title--muted { color: var(--ink); font-size: 16px; font-family: 'Cormorant Garamond', Georgia, serif; }
.eas-lg-jcard-muted-sub { font-size: 12px; color: var(--ink-muted); line-height: 1.5; margin: 0 0 4px; max-width: 200px; }
.eas-lg-jcard-muted-continue {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 11px; letter-spacing: 0.4px; color: var(--char);
  text-decoration: underline; text-underline-offset: 2px;
}
.eas-lg-jcard-muted-continue:hover { color: var(--gold-on-light); }
.eas-lg-jcard-muted-call {
  font-size: 13px; color: var(--gold-on-light); text-decoration: none;
  font-weight: 500; margin-top: 2px;
}
.eas-lg-jcard-muted-call:hover { color: var(--gold); }

/* ── Mobile journey-card selection confirmation — Revisions v1.4, item 1
   Mobile-only (created by JS only under the same <768px threshold this
   file already uses elsewhere, e.g. goToStep's scroll-on-advance) — a
   real element inserted as the tapped card's next sibling, not an
   overlay. The mobile grid is single-column, so its own natural grid
   flow already places it directly below the card that was tapped; on
   desktop's 3-column grid this class is never created at all. */
.eas-lg-jcard-confirm {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--gold-pale);
  border: 1px solid var(--gold-dim);
  color: var(--gold-on-light);
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3px;
  padding: 12px 16px;
  margin-top: -4px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.eas-lg-jcard-confirm.is-shown { opacity: 1; transform: translateY(0); }

/* ── STEPS 2–6: two-column layout + choice grids ─────────────── */
.eas-lg-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: start;
}
.eas-lg-step-head { margin-bottom: 28px; }
.eas-lg-step-head .eas-lg-lead { margin-top: 8px; max-width: 520px; }

.eas-lg-field-group { margin-bottom: 30px; }
.eas-lg-label {
  display: block;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--char);
  font-weight: 500;
  margin-bottom: 12px;
}
.eas-lg-label-note {
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-muted);
  font-weight: 400;
}

.eas-lg-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.eas-lg-choice-grid--month { grid-template-columns: repeat(4, 1fr); }
.eas-lg-choice-grid--year { grid-template-columns: repeat(4, 1fr); }

.eas-lg-choice {
  border: 1px solid var(--ink-faint);
  background: var(--cream);
  padding: 18px 20px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.eas-lg-choice:hover { border-color: var(--gold-dim); }
.eas-lg-choice.selected { border-color: var(--gold); background: var(--gold-pale); }
.eas-lg-choice--sm { padding: 12px 14px; align-items: center; text-align: center; }
.eas-lg-choice-t { font-size: 15px; font-family: 'Cormorant Garamond', Georgia, serif; color: var(--ink); }
.eas-lg-choice--sm .eas-lg-choice-t { font-size: 14px; }
.eas-lg-choice-d { font-size: 12px; color: var(--ink-muted); line-height: 1.45; }
.eas-lg-choice.selected .eas-lg-choice-t { color: var(--gold-on-light); }

/* .eas-lg-honeymoon-highlight retired (Revisions v1.3, item 4) — replaced
   by the real, dynamic .eas-lg-choice--recommended mechanism below. */

/* ── Style step move-type cards — Revisions v1.2, item 7 ────────
   Real mobile-specific layout, not a shrink of the desktop 2-column grid:
   single column below 640px with generous padding, so the fuller
   description text (plus the Overland info icon) has room to breathe. */
@media (max-width: 640px) {
  /* .eas-lg-choice-grid.eas-lg-choice-grid--style (two classes in the
     selector) deliberately outranks the plain single-class
     `.eas-lg-choice-grid` rule inside the later @media (max-width: 767px)
     block below — same specificity trick used for --accom; without it,
     the later, more generic 767px rule would win the cascade and silently
     undo this override at the exact widths it's meant for. */
  .eas-lg-choice-grid.eas-lg-choice-grid--style { grid-template-columns: 1fr; }
  .eas-lg-choice-grid--style .eas-lg-choice { padding: 20px 22px; }
}

.eas-lg-grid-error { animation: eas-lg-shake 0.4s ease; }
@keyframes eas-lg-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.eas-lg-grid-error .eas-lg-jcard,
.eas-lg-grid-error .eas-lg-choice { border-color: #A64545; }

/* Phase A, A2 (2026-08-14) — children's-age validation error state. Same
   red already used for the shake-error border above (#A64545), applied to
   a plain text input (which has no grid to shake) plus its own message
   line, shown/hidden by validateStep() rather than always in the DOM. */
.eas-lg-input--error { border-color: #A64545 !important; animation: eas-lg-shake 0.4s ease; }
.eas-lg-field-error { color: #A64545; font-size: 13px; margin: 8px 0 0; font-weight: 400; }

/* Migration guidance */
.eas-lg-migration-guidance {
  background: var(--parchment-soft);
  border: 1px solid var(--gold-dim);
  padding: 20px 22px;
  margin-bottom: 26px;
}
.eas-lg-migration-title { font-size: 11px; letter-spacing: 1.5px; color: var(--gold-on-light); display: block; margin-bottom: 12px; }
.eas-lg-migration-row {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 12.5px; padding: 7px 0; border-bottom: 1px solid var(--ink-faint);
  color: var(--char);
}
.eas-lg-migration-row:last-child { border-bottom: none; }
.eas-lg-mig-period { color: var(--gold-on-light); font-weight: 500; flex-shrink: 0; }
.eas-lg-mig-detail { text-align: right; }
.eas-lg-mig-peak .eas-lg-mig-period { color: var(--gold); }
.eas-lg-migration-note { font-size: 11.5px; color: var(--ink-muted); margin-top: 12px; line-height: 1.5; }

/* Text fields */
.eas-lg-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.eas-lg-input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--ink-faint);
  background: var(--cream);
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  color: var(--ink);
}
.eas-lg-input:focus { outline: none; border-color: var(--gold); }
.eas-lg-textarea { resize: vertical; min-height: 110px; line-height: 1.7; }
.eas-lg-char-counter { display: block; font-size: 11px; color: var(--ink-muted); margin-top: 6px; text-align: right; }

/* Nav buttons */
.eas-lg-step-actions { display: flex; justify-content: space-between; margin-top: 8px; gap: 14px; }
.eas-lg-step-actions--center { justify-content: center; }
.eas-lg-btn {
  padding: 14px 30px;
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
/* Revisions v1.1, item 3 — site-wide unified primary button, pulled from
   the real Final CTA hover state (.eas-comp-final__btn in
   css/eas-components.css): resting gold #B8780A / cream #FEFDFB text,
   hover forest #2C3424 / cream #F4F1E9 text. --gold and --cream already
   equal the resting values; the hover pair is hardcoded literally here
   (not var()) since this component is self-contained per LAW 18 and
   .eas-lg has no forest/near-white-cream token pair of its own that
   matches exactly. */
.eas-lg-btn--primary { background: var(--gold); color: var(--cream); }
.eas-lg-btn--primary:hover { background: #2C3424; color: #F4F1E9; }
.eas-lg-btn--primary:disabled { opacity: 0.6; cursor: not-allowed; }
.eas-lg-btn--ghost { background: transparent; color: var(--char); border: 1px solid var(--ink-faint); }
.eas-lg-btn--ghost:hover { border-color: var(--gold-dim); color: var(--gold-on-light); }
.eas-lg-btn--sm { padding: 9px 16px; font-size: 10.5px; }

/* ── SUMMARY SIDEBAR ──────────────────────────────────────────── */
.eas-lg-summary {
  background: var(--parchment-soft);
  border: 1px solid var(--ink-faint);
  padding: 26px;
  position: sticky;
  top: 24px;
}
.eas-lg-summary-title {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-on-light);
  margin-bottom: 16px;
}
.eas-lg-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ink-faint);
}
.eas-lg-summary-row--last { border-bottom: none; }
.eas-lg-summary-label { color: var(--ink-muted); flex-shrink: 0; }
.eas-lg-summary-value { color: var(--ink); text-align: right; font-weight: 500; }

.eas-lg-summary-experience {
  background: var(--cream);
  border: 1px solid var(--ink-faint);
  padding: 12px;
  margin-top: 14px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
/* ── Revisions v1.4, item 4 — real bug, same class as the earlier
   cart-note fix (Revisions v1.2, item 3): an author-stylesheet rule with
   `display` set always wins over the browser's own `[hidden] {
   display:none }` UA rule, regardless of specificity or source order —
   so this block rendered as an empty bordered/cream box (a "blank white
   box" sitting right below Investment) on every session with no carried-
   in Experience, since JS only ever wrote its innerHTML when a cart item
   existed and otherwise just set the `hidden` attribute, which the rule
   above was silently overriding. `[hidden]` here restores the native
   collapse. */
.eas-lg-summary-experience[hidden] { display: none; }
.eas-lg-summary-experience-price { color: var(--gold-on-light); flex-shrink: 0; }
.eas-lg-summary-note { font-size: 11px; color: var(--ink-muted); margin-top: 12px; line-height: 1.6; }

.eas-lg-summary-email { margin-top: 20px; border-top: 1px solid var(--ink-faint); padding-top: 16px; }
.eas-lg-summary-email-toggle { font-size: 11.5px; }
.eas-lg-summary-email-panel { margin-top: 12px; }
.eas-lg-summary-email-input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--ink-faint);
  background: var(--cream);
  font-size: 12.5px;
  margin-bottom: 8px;
}
.eas-lg-summary-email-status { font-size: 11px; color: var(--ink-muted); margin-top: 8px; line-height: 1.5; }
.eas-lg-summary-email-status.is-success { color: var(--gold-on-light); }
.eas-lg-summary-email-status.is-error { color: #A64545; }

/* Restore notice */
.eas-lg-restore-notice {
  background: var(--gold-pale);
  border: 1px solid var(--gold-dim);
  color: var(--gold-on-light);
  font-size: 13px;
  padding: 12px 18px;
  margin-bottom: 24px;
  transition: opacity 0.5s ease;
}

/* ── STEP 7: Confirm ──────────────────────────────────────────── */
.eas-lg-step7 { max-width: 700px; margin: 0 auto; text-align: center; }
.eas-lg-step7 .eas-lg-lead { margin-bottom: 6px; }
.eas-lg-reassure {
  background: var(--parchment);
  border: 1px solid var(--ink-faint);
  padding: 24px 28px;
  margin: 28px 0;
  font-size: 14px;
  color: var(--char);
  line-height: 1.7;
  text-align: left;
}
.eas-lg-trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
}
.eas-lg-tato-badge { flex-shrink: 0; }
.eas-lg-trust-text { font-size: 12px; color: var(--ink-muted); letter-spacing: 0.4px; }

.eas-lg-reviews {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 0 0 30px;
  text-align: left;
}
.eas-lg-review-card {
  background: var(--cream);
  border: 1px solid var(--ink-faint);
  padding: 20px;
}
.eas-lg-review-stars { color: var(--gold); font-size: 13px; margin-bottom: 8px; }
.eas-lg-review-card blockquote {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 16px;
  margin: 0 0 10px;
  line-height: 1.5;
  color: var(--char);
}
.eas-lg-review-card cite { font-size: 11px; letter-spacing: 0.6px; color: var(--gold-on-light); font-style: normal; }

.eas-lg-alt-contact { margin-top: 22px; font-size: 13px; color: var(--ink-muted); }
.eas-lg-alt-contact a { color: var(--gold-on-light); text-decoration: none; }
.eas-lg-privacy { margin-top: 14px; font-size: 11.5px; color: var(--ink-muted); }

.eas-lg-btn--submit { position: relative; min-width: 220px; }
.eas-lg-btn--submit.loading .eas-lg-submit-label { visibility: hidden; }
.eas-lg-btn--submit.loading .eas-lg-submit-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.eas-lg-form-error { color: #A64545; font-size: 13px; margin-top: -10px; text-align: center; }

/* ── SUCCESS ──────────────────────────────────────────────────── */
.eas-lg-success {
  min-height: 60vh;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 60px 20px;
}
.eas-lg-success-inner { max-width: 480px; }
.eas-lg-success-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--gold-pale); color: var(--gold-on-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; margin: 0 auto 20px;
}
.eas-lg-success-title { font-size: 32px; margin-bottom: 12px; }
.eas-lg-success-sub { font-size: 15px; color: var(--ink-muted); line-height: 1.7; margin-bottom: 24px; }
.eas-lg-success-home {
  display: inline-block; padding: 13px 28px;
  background: var(--gold); color: var(--cream);
  font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none;
}
.eas-lg-success-home:hover { background: var(--gold-on-light); }

/* ── CHROME: FOOTER ───────────────────────────────────────────── */
.eas-lg-footer {
  background: var(--cream);
  border-top: 1px solid var(--ink-faint);
  padding: 24px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--ink-muted);
  flex-wrap: wrap;
  gap: 10px;
}
.eas-lg-footer-links a { color: var(--ink-muted); text-decoration: none; margin-right: 18px; }
.eas-lg-footer-links a:hover { color: var(--gold-on-light); }

/* ── Exit overlay (retained mechanism, restyled to canonical) ─── */
.eas-exit-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(28,26,20,0.55);
  align-items: center; justify-content: center;
  padding: 20px;
}
.eas-exit-inner {
  background: var(--cream, #FEFDFB);
  max-width: 420px; width: 100%;
  padding: 34px 30px;
  position: relative;
  text-align: center;
}
.eas-exit-close {
  position: absolute; top: 14px; right: 14px;
  background: none; border: none; font-size: 16px; cursor: pointer; color: var(--ink-muted, #746554);
}
.eas-exit-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 24px; margin-bottom: 10px; color: var(--ink, #1C1A14); }
.eas-exit-copy { font-size: 13.5px; color: var(--ink-muted, #746554); line-height: 1.7; margin-bottom: 22px; }
.eas-exit-actions { display: flex; flex-direction: column; gap: 10px; }
.eas-exit-resume {
  padding: 13px 24px; background: var(--gold, #B8780A); color: #FEFDFB;
  border: none; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer;
}
.eas-exit-resume:hover { background: var(--gold-on-light, #924F08); }
.eas-exit-leave { font-size: 12px; color: var(--ink-muted, #746554); text-decoration: none; }
.eas-exit-leave:hover { color: var(--gold-on-light, #924F08); }

/* ── Cart indicator ───────────────────────────────────────────
   Revisions v1.1, item 1: this rule used to force position:static on
   the lounge variant so it would sit inline in the header-right flex
   row. But .eas-cart-indicator__panel (css/header.css) is
   position:absolute, anchored to the nearest positioned ancestor —
   with the toggle static AND .eas-lg-header itself static (it has no
   position set), the panel's containing block escaped all the way up
   to the page's initial containing block, so `top: calc(100% + 12px)`
   measured from the TOP OF THE DOCUMENT, not the header, landing the
   dropdown mid-page. .eas-cart-indicator is already position:relative
   in css/header.css (the sitewide base rule) — leaving it alone here
   is the actual fix; the flex row already lays it out inline without
   needing position:static at all. */

/* ── Info icon — Revisions v1.1, item 11 ──────────────────────
   Hover shows the bubble on desktop; a click/tap toggles `.is-open`
   (wired in lounge-form.js) for mobile, which has no hover. Applied to
   "circuit" / "Overland" (Style step) and the tented-camp-vs-lodge
   distinction (Accommodations step). */
.eas-lg-info-wrap { display: inline-block; position: relative; margin-left: 5px; vertical-align: middle; }
.eas-lg-info {
  /* Revisions v1.2, items 4/7 — now a <span role="button">, not a
     <button> (see eas_lg_info_icon() in the template for why) — spans
     are inline by default, so display is set explicitly here or the
     width/height/line-height below would be silently ignored. */
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink-faint); color: var(--char);
  border: none; font-size: 10px; font-style: italic; font-family: Georgia, serif;
  line-height: 16px; text-align: center; cursor: pointer; padding: 0;
}
.eas-lg-info:hover, .eas-lg-info:focus-visible, .eas-lg-info.is-open { background: var(--gold-dim); color: var(--cream); }
.eas-lg-info-bubble {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  /* Revisions v1.2, item 7 — --eas-info-x-shift is written by
     positionInfoBubble() in lounge-form.js, real measured px, 0 by
     default (unset via var() fallback) so this is a no-op until the JS
     ever needs to clamp it off an edge. */
  transform: translateX(calc(-50% + var(--eas-info-x-shift, 0px)));
  width: 240px; background: var(--ink); color: var(--cream);
  font-size: 12px; font-style: normal; font-weight: 300; line-height: 1.6;
  padding: 12px 14px; z-index: 40; opacity: 0; visibility: hidden;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.eas-lg-info-bubble::after {
  content: ''; position: absolute; top: 100%; left: 50%;
  /* The arrow stays pointing at the icon's real center even when the
     bubble box itself has shifted — it moves the opposite direction,
     relative to the bubble's own (now-shifted) box. */
  transform: translateX(calc(-50% - var(--eas-info-x-shift, 0px)));
  border: 6px solid transparent; border-top-color: var(--ink);
}
@media (hover: hover) {
  .eas-lg-info:hover .eas-lg-info-bubble,
  .eas-lg-info:focus-visible .eas-lg-info-bubble { opacity: 1; visibility: visible; }
}
.eas-lg-info.is-open .eas-lg-info-bubble { opacity: 1; visibility: visible; }

/* Revisions v1.2, item 7 — real viewport-aware flip, wired from
   positionInfoBubble() in lounge-form.js. Opening upward is still the
   default (unchanged); this only overrides it when there genuinely isn't
   enough room above the tapped icon. */
.eas-lg-info--flip-down .eas-lg-info-bubble {
  bottom: auto; top: calc(100% + 8px);
}
.eas-lg-info--flip-down .eas-lg-info-bubble::after {
  top: auto; bottom: 100%;
  border-top-color: transparent; border-bottom-color: var(--ink);
}

/* ── Real per-destination stops with nights — Revisions v1.1, item 6 ── */
.eas-lg-park-panel {
  background: var(--cream);
  border: 1px solid var(--ink-faint);
  border-left: 2px solid var(--gold-dim);
  padding: 16px 18px;
  margin-top: 12px;
}
.eas-lg-park-panel-label { font-size: 12px; color: var(--char); margin: 0 0 10px; }
.eas-lg-park-rows { display: flex; flex-direction: column; gap: 8px; }
.eas-lg-park-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 13.5px; color: var(--ink); cursor: pointer;
  padding: 6px 0; border-bottom: 1px solid var(--ink-faint);
}
.eas-lg-park-row:last-child { border-bottom: none; }
.eas-lg-park-row input[type="checkbox"] { accent-color: var(--gold); width: 15px; height: 15px; flex-shrink: 0; }
.eas-lg-park-row-name { flex: 1; }
.eas-lg-park-row-nights { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.eas-lg-park-step {
  width: 22px; height: 22px; border: 1px solid var(--ink-faint); background: var(--canvas);
  color: var(--char); cursor: pointer; font-size: 14px; line-height: 1; padding: 0;
}
.eas-lg-park-step:hover { border-color: var(--gold-dim); color: var(--gold-on-light); }
.eas-lg-park-nights-input {
  width: 34px; text-align: center; border: 1px solid var(--ink-faint); background: var(--canvas);
  font-size: 12.5px; padding: 3px 0; color: var(--ink);
}
.eas-lg-park-nights-input:disabled { opacity: 0.4; }

/* ── Accommodation image chips — Revisions v1.1, item 6, resized in
   Revisions v1.2, item 6 for the 45+ readability standard: bigger chip,
   bigger text, bigger touch target (min-height 44px is this project's own
   standing minimum — this clears it several times over), one column on
   both desktop and mobile since 3 taller rows read better stacked than a
   lopsided 2-then-1 grid. ─────────────────────────────────────────── */
/* Two classes in the selector on purpose — outranks the later, plain
   `.eas-lg-choice-grid { grid-template-columns: 1fr 1fr }` mobile rule in
   the @media (max-width: 767px) block below, same equal-specificity/
   source-order trap already documented next to --style above. */
.eas-lg-choice-grid.eas-lg-choice-grid--accom { grid-template-columns: 1fr; }
/* Revisions v1.3, item 7 (re-flagged) — founder's own diagnosis: excess
   padding, not overall card size, was the real defect. 22px/24px of
   padding around a modest chip+text row read as a big empty box with
   small content floating inside it, not as "the card got bigger." Cut
   padding roughly in half and put the difference into the chip and text
   themselves, so what actually grows is content, not whitespace. */
/* Revisions v1.4, item 2 — real edge-to-edge split, not a padded shell
   around a shrunken chip. The card's own border/height/width stay as
   they were (per direct instruction — "height and width are already
   correct"); what changes is that the outer padding is removed entirely
   and the image now fills its own section flush to the card's top/left/
   bottom edges (align-self:stretch inside the row, no border/radius/
   margin of its own), with only the text getting padding. `overflow:
   hidden` keeps the flush image inside the card's own border instead of
   bleeding past it. */
.eas-lg-choice--chip { flex-direction: row; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
.eas-lg-choice-chip {
  width: 130px; align-self: stretch; flex-shrink: 0;
  background-size: cover; background-position: center;
  border: none; border-radius: 0;
}
.eas-lg-choice-body { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 16px 20px; }
.eas-lg-choice--chip .eas-lg-choice-t { font-size: 21px; }
.eas-lg-choice--chip .eas-lg-choice-d { font-size: 15.5px; line-height: 1.45; }

/* ── Standard-inclusion note — Revisions v1.3, item 8 ────────────
   Visually distinct from the real selectable activity cards below it:
   no border-hover/selected states (it isn't interactive), a real
   "Included" badge instead of a price or select affordance. */
.eas-lg-included-note {
  background: var(--gold-pale); border: 1px dashed var(--gold-dim);
  padding: 16px 20px; margin-bottom: 16px; display: flex; flex-wrap: wrap;
  align-items: center; gap: 6px 14px;
}
.eas-lg-included-note .eas-lg-choice-t { font-size: 15px; font-family: 'Cormorant Garamond', Georgia, serif; color: var(--ink); }
.eas-lg-included-badge {
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--gold-on-light); background: var(--cream); border: 1px solid var(--gold-dim);
  padding: 3px 9px;
}
.eas-lg-included-note .eas-lg-choice-d { flex-basis: 100%; font-size: 12.5px; color: var(--ink-muted); }

/* ── Recommended-experience highlight — Revisions v1.3, item 4 ───
   Reusable: any card carrying data-recommended-journeys gets this
   treatment when the client's current journey matches AND the card
   isn't already showing the "already in your cart" state (item 3's own
   note toggling handles that exclusivity in JS). */
.eas-lg-choice--recommended { border-color: var(--gold); background: var(--gold-pale); }
.eas-lg-choice-recommended {
  display: block; font-size: 10.5px; letter-spacing: 0.3px; font-weight: 500;
  color: var(--gold-on-light); margin-top: 6px;
}
.eas-lg-choice-recommended[hidden] { display: none; }

/* ── Blend tip — Revisions v1.3, item 6 ──────────────────────────── */
.eas-lg-blend-tip {
  font-size: 12.5px; color: var(--ink-muted); line-height: 1.6; margin: 12px 0 0;
  padding-left: 14px; border-left: 2px solid var(--gold-dim);
}

/* ── Experiences step — cart-state sync note (item 8) ──────────── */
/* Revisions v1.2, item 3 — real bug, not the JS matching logic: this rule
   used to set `display: block` unconditionally. Author-stylesheet rules
   always win over the user-agent's own `[hidden] { display: none }` rule
   regardless of specificity or source order (origin beats specificity in
   the cascade) — so every note rendered visible on every card the instant
   this class matched, completely independent of whether lounge-form.js
   ever set `note.hidden = true`. The `[hidden]` selector below restores
   the native behavior; `:not([hidden])` is what actually shows it. */
.eas-lg-choice-cart-note[hidden] { display: none; }
.eas-lg-choice-cart-note:not([hidden]) {
  display: block; font-size: 10.5px; letter-spacing: 0.3px;
  color: var(--gold-on-light); margin-top: 6px; font-weight: 500;
}

/* ── Mini review quote — Revisions v1.1, item 9 ─────────────────
   Same real data as Step 8's carousel, a single quote surfaced earlier. */
.eas-lg-mini-quote {
  border-left: 2px solid var(--gold-dim);
  padding: 4px 0 4px 16px;
  margin: 4px 0 30px;
}
.eas-lg-mini-quote blockquote {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 17px; color: var(--char); margin: 0 0 6px; line-height: 1.5;
}
.eas-lg-mini-quote cite { font-size: 11px; letter-spacing: 0.5px; color: var(--gold-on-light); font-style: normal; }

/* ── Real calendar date inputs — Revisions v1.1, item 7 ─────────── */
/* 2026-08-15, founder report — the native calendar POPUP grid (the actual
   month view that opens on click) is OS/browser-drawn with no CSS pseudo-
   elements reaching its internals in any browser — the same fundamental
   limitation this file's own .eas-lg-cs* combobox comment documents for
   <select>. Unlike <select>, though, a real CSS lever exists here:
   `accent-color` is honored by Chromium/Edge's native date-picker (the
   selected-day/today highlight inside the popup, not just checkboxes/
   radios/range sliders), so the picker's own blue theme becomes the real
   brand gold with no JS rebuild needed — a full custom calendar widget
   would be the only way to also restyle the popup's borders/typography,
   which is a proportionately bigger rebuild than this specific complaint
   (a wrong ACCENT color) calls for. Firefox/Safari's own date pickers
   don't yet honor accent-color the same way — on those browsers this
   input still shows their native picker unchanged, a real, disclosed gap
   in the CSS platform itself, not something fixable from this stylesheet. */
.eas-lg-input--date { cursor: pointer; accent-color: var(--gold); }
.eas-lg-input--date::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.65; }
.eas-lg-input--date:focus { border-color: var(--gold); outline: none; }

/* ── Investment panel — Revisions v1.1, item 10 (static copy) +
   Revisions v1.5, item 1 (bordered/gold-tinted panel treatment).
   Replaces the old flex-column row entirely — the block carries its
   own weight (panel + icon) instead of blending into the row list
   above it. Revisions v1.6 — founder direction removed the anchor
   figure line that briefly sat here; the panel/icon alone is the
   fix, no number needed. */
.eas-lg-summary-investment {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--gold-pale); border: 1px solid var(--gold-dim);
  padding: 16px 18px; margin-top: 6px;
}
.eas-lg-summary-investment-icon { flex-shrink: 0; margin-top: 2px; color: var(--gold-on-light); }
.eas-lg-summary-investment-body { display: flex; flex-direction: column; gap: 5px; }
.eas-lg-summary-investment-body .eas-lg-summary-label {
  font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold-on-light);
}
.eas-lg-summary-value--static {
  text-align: left; font-weight: 400; font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 15px; line-height: 1.4; color: var(--ink-muted);
}

/* ── Trip Reference (Trip Hash serial) — PHASE2-ZOHO-DEEP-AUDIT-AND-
   BOOKS-SETUP-v1.0.md §6. Styled as a lot-number/bespoke-tailoring ticket,
   not a raw system ID: Cormorant Garamond, gold-on-light, letter-spaced —
   same visual family as the Investment panel above it, deliberately NOT
   monospace/code styling. Hidden until a real AJAX submit succeeds. */
.eas-lg-summary-trip-ref {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  background: var(--gold-pale); border: 1px solid var(--gold-dim);
  padding: 16px 18px; margin-top: 6px;
}
.eas-lg-summary-trip-ref[hidden] { display: none; }
.eas-lg-summary-trip-ref .eas-lg-summary-label {
  font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold-on-light);
}
.eas-lg-summary-trip-ref-value {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500;
  font-size: 19px; letter-spacing: 1.5px; color: var(--ink);
}
.eas-lg-summary-trip-ref-note {
  font-family: 'Jost', sans-serif; font-size: 11px; color: var(--ink-muted);
}

/* ── Accumulating review panel — Revisions v1.2, item 9 ─────────── */
.eas-lg-summary-row--empty { border-bottom: none; padding-top: 2px; }
.eas-lg-summary-value--muted { color: var(--ink-muted); font-weight: 400; text-align: left; font-size: 13px; line-height: 1.5; }

/* ── Family Legacy adults/kids counters — Revisions v1.2, item 5 ──
   Reuses the park-nights stepper's interaction pattern but sized up —
   these are the primary field on this step, not a secondary refinement,
   and clear a real 44px touch target on every axis. */
.eas-lg-family-counters { display: flex; flex-direction: column; gap: 10px; }
.eas-lg-counter-row {
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--ink-faint); background: var(--cream); padding: 14px 18px;
}
.eas-lg-counter-label { font-size: 15px; font-family: 'Cormorant Garamond', Georgia, serif; color: var(--ink); }
.eas-lg-counter-controls { display: flex; align-items: center; gap: 10px; }
.eas-lg-fam-step {
  width: 40px; height: 40px; border: 1px solid var(--ink-faint); background: var(--canvas);
  color: var(--char); cursor: pointer; font-size: 17px; line-height: 1; padding: 0;
}
.eas-lg-fam-step:hover { border-color: var(--gold-dim); color: var(--gold-on-light); }
.eas-lg-fam-count-input {
  width: 40px; text-align: center; border: 1px solid var(--ink-faint); background: var(--canvas);
  font-size: 15px; padding: 8px 0; color: var(--ink);
}

/* ── Per-child age boxes — 2026-08-15, replaces the old comma-separated
   free-text ages field. One real, individually-labeled number input per
   child, rendered dynamically by renderChildAgeInputs() in lounge-form.js.
   Shared visual language with the counter rows above (same border/cream
   background), sized for a 2-digit age, not a full-width text field. ── */
.eas-lg-ages-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.eas-lg-age-box {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: 1px solid var(--ink-faint); background: var(--cream); padding: 10px 12px; width: 76px;
}
.eas-lg-age-box-label {
  font-family: 'Jost', sans-serif; font-size: 11px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-muted);
}
.eas-lg-age-box-input {
  width: 100%; text-align: center; border: 1px solid var(--ink-faint); background: var(--canvas);
  font-family: 'Jost', sans-serif; font-size: 16px; padding: 8px 0; color: var(--ink);
}
.eas-lg-age-box-input:focus { border-color: var(--gold); outline: none; }
.eas-lg-age-box-input::-webkit-inner-spin-button,
.eas-lg-age-box-input::-webkit-outer-spin-button { opacity: 0.5; }

/* ── Two date-entry modes — Revisions v1.2, item 10 ─────────────── */
.eas-lg-datemode { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 26px; }
.eas-lg-datemode-btn {
  border: 1px solid var(--ink-faint); background: var(--cream); padding: 16px 18px;
  font-family: 'Jost', sans-serif; font-size: 13.5px; letter-spacing: 0.3px; color: var(--char);
  cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.eas-lg-datemode-btn:hover { border-color: var(--gold-dim); }
.eas-lg-datemode-btn.selected { border-color: var(--gold); background: var(--gold-pale); color: var(--gold-on-light); font-weight: 500; }
.eas-lg-datemode-panel { animation: eas-lg-stepIn 0.3s ease both; }
.eas-lg-select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23584738' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px;
  cursor: pointer;
}

/* ── Revisions v1.3, item 2 — real custom combobox, native <select>
   chrome eliminated entirely ────────────────────────────────────────
   A pure-CSS `appearance:none` (above) only restyles the CLOSED state —
   the OPEN dropdown list is drawn by the OS in every browser and cannot
   be restyled from CSS at all, which is exactly the hardcoded browser-
   blue the founder flagged. Reuses the exact combobox pattern already
   proven on `single-eas_departure.php` (`.eas-cs*` there) — same
   mechanism (button + listbox, real native <select> kept hidden as the
   actual form control), renamed to this page's own `.eas-lg-cs*`
   namespace since lounge-form.css is fully self-contained (LAW 18) and
   shares no stylesheet with that template. */
.eas-lg-cs { position: relative; }
.eas-lg-cs-native { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; pointer-events: none; }
.eas-lg-cs-display {
  width: 100%; padding: 14px 40px 14px 16px; background: var(--cream);
  border: 1px solid var(--ink-faint); font-family: 'Jost', sans-serif; font-size: 15px; font-weight: 300;
  color: var(--ink); text-align: left; cursor: pointer; position: relative; display: block;
  box-sizing: border-box; transition: border-color 0.15s ease;
}
.eas-lg-cs-display:focus-visible,
.eas-lg-cs-display[aria-expanded="true"] { border-color: var(--gold); outline: none; }
.eas-lg-cs-display::after {
  content: ''; position: absolute; right: 17px; top: 50%; width: 8px; height: 8px;
  border-right: 1px solid var(--ink-muted); border-bottom: 1px solid var(--ink-muted);
  transform: translateY(-70%) rotate(45deg); transition: transform 0.2s ease; pointer-events: none;
}
.eas-lg-cs-display[aria-expanded="true"]::after { transform: translateY(-20%) rotate(225deg); }
.eas-lg-cs-display--placeholder { color: var(--ink-muted); }
.eas-lg-cs-panel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20;
  background: var(--cream); border: 1px solid var(--ink-faint); box-shadow: 0 18px 40px -20px rgba(28,26,20,0.35);
  max-height: 240px; overflow-y: auto; display: none;
}
.eas-lg-cs-panel.is-open { display: block; }
.eas-lg-cs-option {
  padding: 12px 16px; font-family: 'Jost', sans-serif; font-size: 14.5px; font-weight: 300;
  color: var(--ink); cursor: pointer;
}
.eas-lg-cs-option:hover { background: var(--gold-pale); color: var(--gold-on-light); }
.eas-lg-cs-option[aria-selected="true"] { color: var(--gold-on-light); font-weight: 500; }

/* ── Custom date picker — PRIORITY-FIX-BRIEF-BUGS-DESIGN-CLEANUP-E2E-v1.0
   item 1.2. Native <input type="date">'s own OS-drawn popup cannot be
   restyled by any CSS property (confirmed via a real screenshot: the
   popup's "today" cell still rendered browser-default blue despite a
   correctly-computed accent-color) — real custom picker, same visual
   language as .eas-lg-cs* above. ─────────────────────────────────── */
.eas-lg-dp { position: relative; }
.eas-lg-dp-native {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.eas-lg-dp-display {
  width: 100%; text-align: left; padding: 12px 16px; border-radius: 8px;
  border: 1.5px solid var(--ink-faint); background: var(--cream);
  font-family: 'Jost', sans-serif; font-size: 14.5px; font-weight: 400;
  color: var(--ink); cursor: pointer; position: relative;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23924F08' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 44px;
}
.eas-lg-dp-display--placeholder { color: var(--ink-muted); }
.eas-lg-dp-display:focus, .eas-lg-dp-display:hover { border-color: var(--gold); outline: none; }
.eas-lg-dp-panel {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 40;
  width: 280px; background: var(--cream); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(26, 22, 15, 0.18); padding: 16px;
}
.eas-lg-dp-panel.is-open { display: block; }
.eas-lg-dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.eas-lg-dp-label { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 16px; color: var(--ink); }
.eas-lg-dp-nav {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--ink-faint);
  background: transparent; color: var(--ink); cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.eas-lg-dp-nav:hover { border-color: var(--gold); color: var(--gold-on-light); }
.eas-lg-dp-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr); text-align: center;
  font-family: 'Jost', sans-serif; font-size: 10.5px; font-weight: 500;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: 4px;
}
.eas-lg-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.eas-lg-dp-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: 6px; cursor: pointer;
  font-family: 'Jost', sans-serif; font-size: 13px; color: var(--ink);
}
.eas-lg-dp-day--blank { cursor: default; }
.eas-lg-dp-day:not(.eas-lg-dp-day--blank):not(.is-disabled):hover { background: var(--gold-pale); }
.eas-lg-dp-day.is-today { color: var(--gold-on-light); font-weight: 600; }
.eas-lg-dp-day.is-selected { background: var(--gold); color: var(--cream); font-weight: 600; }
.eas-lg-dp-day.is-disabled { color: var(--ink-faint); cursor: not-allowed; }
.eas-lg-dp-foot {
  display: flex; justify-content: space-between; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid var(--ink-faint);
}
.eas-lg-dp-link {
  font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 500;
  color: var(--gold-on-light); text-decoration: none; cursor: pointer;
}
.eas-lg-dp-link:hover { text-decoration: underline; }

/* ── 200-character reveal — Revisions v1.2, item 1 ──────────────── */
.eas-lg-depth-reveal {
  font-size: 13px; color: var(--gold-on-light); margin-top: 10px; line-height: 1.5;
  opacity: 0; transform: translateY(-4px); transition: opacity 0.35s ease, transform 0.35s ease;
}
.eas-lg-depth-reveal.is-shown { opacity: 1; transform: translateY(0); }

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 980px) {
  .eas-lg-layout { grid-template-columns: 1fr; }
  .eas-lg-summary { position: static; order: -1; }
  .eas-lg-card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .eas-lg-header { padding: 16px 20px; }
  .eas-lg-header-right { gap: 14px; width: 100%; justify-content: space-between; }
  .eas-lg-logo svg, .eas-lg-logo img { height: 52px; max-width: 60vw; }
  .eas-lg-call-link { display: none; }
  .eas-lg-progress-wrap { padding: 0 20px 16px; }
  .eas-lg-progress-steps span { display: none; }
  .eas-lg-progress-steps span.current { display: block; flex: none; text-align: left; }
  .eas-lg-progress-meta { font-size: 10px; }
  .eas-lg-main { padding: 28px 20px 60px; }
  /* Revisions v1.2, item 8 — real mobile-specific card redesign, not a
     resized copy of the desktop grid. The old 150px-tall shrink read as a
     generic stacked list, losing the hero-photo-card treatment that gives
     these impact on desktop. Taller cards, a real scrim (a ::before layer,
     independent of the inline photo `style=""` on each card — an inline
     style can't be reached by a media query, so contrast has to come from
     an added layer, not a modified one) and bigger type restore that. */
  .eas-lg-card-grid { grid-template-columns: 1fr; gap: 14px; }
  .eas-lg-jcard { height: 212px; padding: 24px; }
  .eas-lg-jcard::before {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(180deg, rgba(28,26,20,0.05) 0%, rgba(28,26,20,0.52) 55%, rgba(28,26,20,0.92) 100%);
  }
  .eas-lg-jcard-title, .eas-lg-jcard-sub { position: relative; z-index: 1; }
  .eas-lg-jcard-title { font-size: 27px; margin-bottom: 8px; }
  .eas-lg-jcard-sub { font-size: 13.5px; line-height: 1.55; }
  /* Revisions v1.3, item 3 — a real, additional mobile-only affordance
     (not present on desktop, where hover already implies interactivity)
     confirming this card is tappable, on top of the already-shipped v1.2
     redesign (re-verified this session via computed style + a fresh
     screenshot: real 212px height, real scrim, real 27px title — all
     genuinely present on staging right now). */
  .eas-lg-jcard::after {
    content: 'Select \2192'; position: absolute; right: 20px; bottom: 20px; z-index: 1;
    font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.08em;
    text-transform: uppercase; color: rgba(232,215,180,0.92);
  }
  .eas-lg-jcard--muted::after { content: none; }
  .eas-lg-jcard--muted { height: auto; padding: 26px 20px; }
  .eas-lg-jcard--muted::before { content: none; }
  .eas-lg-choice-grid { grid-template-columns: 1fr 1fr; }
  .eas-lg-field-row { grid-template-columns: 1fr; }
  .eas-lg-reviews { grid-template-columns: 1fr; }
  .eas-lg-step-actions { flex-direction: column-reverse; }
  .eas-lg-btn { width: 100%; text-align: center; }
  .eas-lg-h1 { font-size: 28px; }
  .eas-lg-footer { flex-direction: column; align-items: flex-start; padding: 20px; }
  .eas-lg-resume-panel { width: calc(100vw - 40px); left: -20px; }
  /* Revisions v1.1 — new-component mobile fits */
  .eas-lg-info-bubble { width: min(280px, calc(100vw - 56px)); font-size: 15px; }
  /* Revisions v1.4, item 2 — the edge-to-edge image split (align-items:
     stretch) is the same on mobile as desktop; the old `flex-start`
     override here predates that rework (it existed to top-align a fixed
     88px chip against taller wrapped text) and would re-introduce a gap
     between the image and the card's bottom edge if left in place. */
  .eas-lg-choice-chip { width: 108px; }
  .eas-lg-park-row { flex-wrap: wrap; }
  .eas-lg-park-row-nights { margin-left: auto; }
  .eas-lg-datemode { grid-template-columns: 1fr; }

  /* Revisions v1.2, item 2 — mobile typography floor: 16px minimum for
     real body/paragraph copy, 13px minimum for labels/meta/utility text.
     A full-page audit, not just the two named examples (progress-meta and
     the header link) — every other element below 13px/16px on this page
     is raised here too. Desktop sizes are untouched (not flagged, and
     these rules only apply under the 767px breakpoint already governing
     this page's mobile layout). Declared after every earlier rule in this
     media query on purpose, so equal-specificity later-wins cascade order
     actually lands the fix — line 859's own `.eas-lg-progress-meta {
     font-size: 10px }` is the literal, confirmed source of the "About 4
     minutes" bug the founder reported; this overrides it. */
  .eas-lg-link { font-size: 13px; }
  .eas-lg-resume-panel-sub { font-size: 16px; line-height: 1.6; }
  .eas-lg-resume-status { font-size: 13px; }
  .eas-lg-progress-meta { font-size: 13px; }
  .eas-lg-progress-steps { font-size: 13px; }
  .eas-lg-eyebrow { font-size: 13px; }
  .eas-lg-label { font-size: 13px; }
  .eas-lg-choice-d { font-size: 13px; }
  .eas-lg-migration-row { font-size: 13px; }
  .eas-lg-migration-note { font-size: 16px; line-height: 1.6; }
  .eas-lg-char-counter { font-size: 13px; }
  .eas-lg-summary-title { font-size: 13px; }
  .eas-lg-summary-experience { font-size: 13px; }
  .eas-lg-summary-note { font-size: 13px; }
  .eas-lg-summary-value--static { font-size: 16px; line-height: 1.6; }
  .eas-lg-summary-email-input { font-size: 16px; }
  .eas-lg-summary-email-status { font-size: 13px; }
  .eas-lg-reassure { font-size: 16px; }
  .eas-lg-trust-text { font-size: 13px; }
  .eas-lg-review-card cite { font-size: 13px; }
  .eas-lg-privacy { font-size: 13px; }
  .eas-lg-footer-links a, .eas-lg-footer-copy { font-size: 13px; }
  .eas-lg-mini-quote cite { font-size: 13px; }
  .eas-lg-park-panel-label { font-size: 13px; }
  .eas-lg-park-nights-input { font-size: 13px; }
  .eas-lg-lead { font-size: 16px; }
  .eas-lg-input, .eas-lg-select { font-size: 16px; } /* also stops iOS Safari auto-zoom-on-focus */
  .eas-lg-btn { font-size: 13px; }
  .eas-lg-btn--sm { font-size: 13px; }
  .eas-lg-success-sub { font-size: 16px; }
  .eas-lg-success-home { font-size: 13px; }
  .eas-exit-copy { font-size: 16px; }
  .eas-exit-resume, .eas-exit-leave { font-size: 13px; }
  .eas-lg-counter-label { font-size: 16px; }
  .eas-lg-datemode-btn { font-size: 13px; }
}