/* ═══════════════════════════════════════════════════════════════════════════
   Harmonic Earthwalk - Order page
   Visual world: DESIGN.md (Moon, 2026-07-24). White is the only ground.
   Playfair Display (display) / Source Sans 3 (reading) / Montserrat (labels).
   Every selector order-form.js touches is preserved.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Chrome - the only fixed colors (DESIGN.md) */
  --white:       #FFFFFF;
  --ink:         #2C2823;   /* Earth Ink - all type below heading level, never pure black */
  --text:        #2C2823;
  --text-sec:    var(--ink);  /* hierarchy comes from size/weight, never a second neutral (DESIGN.md) */
  --text-ter:    var(--ink);  /* hints, tertiary (JS references this) */
  --blue-hour:      #135E87;   /* the one main color (DESIGN.md): solid fills only, always with Earth Ink type */
  --blue-hour-heading: #0C3F58; /* the same blue a step deeper: title, H1, H2, lines, marks, focus ring */
  --sky:        #3E7DA0;   /* H3 (DESIGN.md, The Sky Exception) */
  --button-gradient: linear-gradient(180deg,#3E7DA0 0%,#135E87 60%,#0C3F58 100%);  /* every solid button (DESIGN.md) */
  --label:       var(--ink);  /* labels, eyebrows, links, coord: Earth Ink, distinguished by size/weight/tracking, not a separate color */
  --error-red:   #8A2A12;   /* Signal Red - the one deliberate exception to One Main Color, scoped to field-validation errors only, Moon 2026-09-03 */

  /* Functional surfaces - separation from whitespace + soft shadow, never tint */
  --field-border: var(--blue-hour-heading);  /* Blue Hour Heading: input outlines + functional strokes (DESIGN.md) */
  --line:         rgba(44,40,35,.22);  /* Line: see-through Earth Ink dividers (DESIGN.md) */
  --input-bg:     #FFFFFF;

  /* Elevation replaces tinted panels */
  --lift:    0 40px 80px -48px rgba(44,40,35,.45);
  --lift-md: 0 22px 48px -30px rgba(44,40,35,.32);
  --lift-sm: 0 10px 26px -18px rgba(44,40,35,.30);

  --disp:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --heading: var(--disp);
  --body:  'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --mont: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  --r-md: 9px;   /* 9px radius on everything (DESIGN.md) */

  --measure: 640px;
  --focus: 0 0 0 2px var(--blue-hour-heading);  /* Blue Hour Heading focus ring (DESIGN.md) */
}

* { box-sizing: border-box; }

/* Accent words (DESIGN.md): bold in reading copy is Blue Hour Heading. On a fill or a
   button the word keeps the fill's Earth Ink so it is never blue on blue. */
b, strong { color: var(--blue-hour-heading); }
button b, button strong, .btn-primary b, .btn-primary strong, .opt b, .opt strong,
.who-for-option b, .who-for-option strong, .needs-moon b { color: inherit; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(19,94,135,.20); }

a { color: var(--label); text-underline-offset: 2px; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 56vh;
  padding: clamp(28px,6vw,56px);
  padding-bottom: clamp(72px,9vh,110px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  overflow: hidden;
  background-color: #123; /* fallback while the photo loads */
  background-image: url("harmonic-earthwalk-hero.jpg?v=6");
  background-size: cover;
  background-position: center 44%;
}
/* Bottom scrim: text over image, low in the frame (DESIGN.md) */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Legibility scrim: darkens the top behind the white logo, clears through the
     middle, peaks again behind the low-sitting text, then eases off before the
     bottom so it never fights the fade-to-white. */
  background:
    linear-gradient(to bottom,
      rgba(12,26,28,.44) 0%,
      rgba(12,26,28,.16) 20%,
      rgba(12,26,28,0) 38%,
      rgba(12,26,28,0) 50%,
      rgba(12,26,28,.46) 74%,
      rgba(12,26,28,.22) 100%);
}
.hero > * { position: relative; z-index: 3; }

/* hero-logo-link keeps its ORIGINAL reserved box size (min(440px,66vw), the
   image's own 2000:667 ratio) so the flex-end-justified text/credit stack
   below it is completely undisturbed - that stack's math depends on this
   box's height, and an earlier attempt that pulled the logo fully out of
   flow shrank the reserved group and let the text ride up underneath the
   logo. The image itself is 25% larger than that box and absolutely
   positioned inside it, top-pinned and centered, so only the image
   overflows visually; nothing about the surrounding layout changes. */
.hero-logo-link {
  display: block;
  position: relative;
  width: min(440px, 66vw);
  aspect-ratio: 2000 / 667;
  margin-bottom: clamp(20px,4vw,36px);
  line-height: 0;
}
.hero-logo {
  position: absolute;
  top: 0;
  left: 50%;
  width: 125%;
  height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 2px 18px rgba(0,0,0,.28));
}
.hero-copy { max-width: 40rem; }
.hero-copy h1 {
  font-family: var(--disp);
  font-weight: 600;
  font-size: clamp(2.4rem, 6.2vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 .5em;
  text-wrap: balance;
  text-shadow: 0 2px 22px rgba(0,0,0,.42);
}
.hero-copy p {
  font-size: clamp(1rem, 2.2vw, 1.18rem);
  line-height: 1.55;
  color: rgba(255,255,255,.92);
  margin: 0 auto;
  max-width: 34rem;
  text-shadow: 0 1px 14px rgba(0,0,0,.45);
}
.hero-credit {
  position: absolute;
  right: clamp(14px,3vw,26px);
  bottom: 10px;
  z-index: 3;
  font-family: var(--mont);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-ter);
  /* Independent of the global scrim (which fades toward white but doesn't
     reach full opacity this close to the bottom edge): a photo dense with dark
     foliage right here can still take contrast to ~1.2:1 without this backing
     (Impeccable audit, 2026-09-03, measured by compositing the real photo). */
  padding: 3px 8px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.85);
}

/* ── The photograph dissolves into the page: a soft fade to white ──────────── */
.hero-fade {
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(150px, 24vh, 300px);
  z-index: 2;
  display: block;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0)    0%,
    rgba(255,255,255,0)    42%,
    rgba(255,255,255,.14)  60%,
    rgba(255,255,255,.42)  74%,
    rgba(255,255,255,.74)  87%,
    #ffffff               100%);
}

/* Screens 2 and 3 (past the essentials step): logo alone, no photo - matching
   every other page in the flow past the entry screen (DESIGN.md; Moon
   2026-09-03: the photo and "Order your report" text were staying up through
   payment and the insight questions; only the opening screen carries it). */
body.is-finalize .hero {
  min-height: 0;
  padding: clamp(48px,8vw,88px) clamp(28px,6vw,56px);
  justify-content: center;
  background-color: var(--white);
  background-image: none;
}
body.is-finalize .hero::after,
body.is-finalize .hero-fade,
body.is-finalize .hero-credit,
body.is-finalize .hero-copy { display: none; }
body.is-finalize .hero-logo-link { width: min(520px,74vw); margin-bottom: 0; }
body.is-finalize .hero-logo { filter: none; }

/* ── The white page the photo tears into ──────────────────────────────────── */
main {
  position: relative;
  z-index: 3;
  max-width: 720px;
  margin: 0 auto;
  background: var(--white);
  padding: 0 clamp(20px,5vw,44px) clamp(36px,6vw,64px);
}

/* ── Progress bar (sticky wayfinding) ─────────────────────────────────────── */
.progress {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0 calc(-1 * clamp(20px,5vw,44px));
  padding: 14px clamp(20px,5vw,44px) 13px;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .progress { background: #fff; }
}
.progress-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}
.progress-step {
  font-family: var(--mont);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--label);
  white-space: nowrap;
}
.progress-now {
  font-family: var(--disp);
  font-size: 1.02rem;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}
.progress-track {
  height: 4px;
  border-radius: 9px;
  background: var(--line);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  border-radius: 9px;
  background: var(--blue-hour);
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}

/* ── Sections / steps ─────────────────────────────────────────────────────── */
fieldset {
  border: 0;
  margin: 0;
  padding: clamp(26px,3.6vw,38px) 0;
  border-top: 1px solid var(--line);
}
main > form > fieldset:first-of-type { border-top: 0; }

.section-head { margin-bottom: 20px; }
/* Screen 3 has no fieldset above it to supply the usual gap from the progress
   bar (Moon 2026-09-03: "Saved" and the payment-received card, now the first
   thing here, were touching). Matches the padding-top every fieldset already
   uses for this. */
#finalize-payment-status:first-child { margin-top: clamp(26px,3.6vw,38px); }
/* .paid-banner's own bottom margin (4px) is sized for sitting above the
   content it used to introduce; now that "Step three" follows it instead,
   it needs more air before that heading. */
#finalize-payment-status:has(.paid-banner) { margin-bottom: 20px; }
legend {
  display: block;
  float: none;
  width: auto;
  padding: 0;
  font-family: var(--disp);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 1.92rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--blue-hour-heading);
  text-wrap: balance;
}
.eyebrow {
  display: block;
  margin-bottom: 7px;
  font-family: var(--mont);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--label);
}
.section-intro {
  margin: 9px 0 0;
  max-width: var(--measure);
  color: var(--text-sec);
  font-size: 1rem;
  line-height: 1.55;
}

/* ── Who is this for ──────────────────────────────────────────────────────── */
.who-for-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.who-for-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 62px;
  padding: 10px 8px;
  border: 1px solid var(--field-border);
  border-radius: var(--r-md);
  background: var(--white);
  cursor: pointer;
  font-family: var(--mont);
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--text-sec);
  transition: border-color .18s, box-shadow .18s, background .18s, color .18s;
}
.who-for-option input { position: absolute; opacity: 0; pointer-events: none; }
.who-for-option:hover { border-color: var(--field-border); color: var(--ink); }
.who-for-option:has(input:checked) {
  background: var(--blue-hour);
  border-color: var(--blue-hour);
  color: var(--white);
  font-weight: 600;
  box-shadow: var(--lift-sm);
}
.who-for-option:has(input:focus-visible) { box-shadow: var(--focus); }

.returning-wrap { margin-top: 16px; }
.returning-label {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: .96rem;
  color: var(--text-sec);
}
.returning-label input { margin-top: 3px; accent-color: var(--blue-hour-heading); width: 16px; height: 16px; flex: none; }
.returning-label:hover { border-color: var(--field-border); }

/* ── Report toggle ────────────────────────────────────────────────────────── */
.report-toggle { margin-top: 4px; }
.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 58px;
  padding: 12px 14px;
  border: 1px solid var(--field-border);
  border-radius: var(--r-md);
  background: var(--white);
  cursor: pointer;
  font-family: var(--mont);
  font-size: .92rem;
  text-transform: none;
  color: var(--text-sec);
  transition: border-color .18s, box-shadow .18s, background .18s, color .18s;
}
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt b { font-weight: 600; }
.opt:hover { border-color: var(--field-border); color: var(--ink); }
.opt:has(input:checked) {
  background: var(--blue-hour);
  border-color: var(--blue-hour);
  color: var(--white);
  box-shadow: var(--lift-sm);
}
.opt:has(input:focus-visible) { box-shadow: var(--focus); }
.report-detail {
  margin-top: 12px;
  color: var(--text-sec);
  font-size: .98rem;
  line-height: 1.5;
}
.tier-summary { margin: 0 0 10px; color: var(--ink); font-size: 1rem; line-height: 1.5; }
.tier-includes-label {
  margin: 0 0 6px;
  font-family: var(--mont);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--label);
}
.tier-includes { margin: 0; padding-left: 1.15em; color: var(--text-sec); font-size: .96rem; line-height: 1.5; }
.tier-includes li { margin: 5px 0; }

/* ── Insight questions ────────────────────────────────────────────────────── */
.insight-heading {
  font-family: var(--heading);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--blue-hour-heading);
  margin: 32px 0 6px;
  max-width: var(--measure);
}
.insight-heading-body {
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-sec);
  margin: 12px 0 0;
  max-width: var(--measure);
}
.insight-question { margin-top: 26px; border: 0; padding: 0; min-width: 0; width: 100%; box-sizing: border-box; }
.insight-question:first-child { margin-top: 0; }
.insight-question-title {
  display: block;
  font-family: var(--heading);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}
.insight-question-text {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 6px;
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  padding: 0;
}
.insight-instruction {
  display: block;
  margin: 0 0 10px;
  font-family: var(--body);
  font-size: 1rem;
  font-style: italic;
  color: var(--text-ter);
}
.insight-options {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--field-border);
  border-radius: var(--r-md);
  background: var(--white);
  overflow: hidden;
}
.insight-opt {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--field-border);
  cursor: pointer;
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.45;
  color: var(--text-sec);
  transition: background .18s, color .18s;
}
.insight-opt:last-child { border-bottom: 0; }
.insight-opt input { margin-top: 3px; flex: none; accent-color: var(--blue-hour-heading); }
.insight-opt:hover { background: var(--input-bg); color: var(--ink); }
.insight-opt:has(input:checked) { color: var(--ink); font-weight: 500; }
.insight-opt:has(input:focus-visible) { box-shadow: var(--focus); }
.insight-opt-own { font-style: italic; }
.insight-own-words { margin: 8px 14px 12px; width: calc(100% - 28px); }

/* ── Insight question accordion (Moon 2026-09-03 audit: chunk the 12-question
   wall, one group open at a time) ───────────────────────────────────────── */
.insight-progress {
  font-family: var(--mont);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-ter);
  margin: 22px 0 4px;
}
.insight-group { margin-top: 14px; }

/* Collapsed state for a returning client whose 12 insight answers were
   already saved (Moon 2026-09-04) - a compact "done" bar instead of
   scrolling back through all 12 questions. */
.insight-assessment-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 14px 0 4px;
  padding: 16px clamp(16px,3vw,22px);
  border: 1px solid var(--field-border);
  border-radius: var(--r-md);
  background: var(--white);
}
.insight-assessment-summary p { margin: 0; font-weight: 600; color: var(--ink); }
.btn-link {
  border: none;
  background: none;
  padding: 0;
  font-family: var(--mont);
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  cursor: pointer;
}

/* The three-page finalize flow (Moon 2026-09-04): one page's worth of
   questions at a time instead of one long scroll. */
.step-label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--mont);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--label);
}
.step-back {
  display: block;
  margin-bottom: 14px;
}
.insight-group:first-child { margin-top: 0; }
.insight-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  background: var(--white);
  border: 1px solid var(--field-border);
  border-radius: var(--r-md);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.insight-group-toggle:hover { border-color: var(--blue-hour-heading); }
.insight-group-toggle:focus-visible { outline: none; box-shadow: var(--focus); }
.insight-group-label {
  font-family: var(--heading);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--ink);
}
.insight-group-chevron {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--ink);
  transition: transform .2s ease;
}
.insight-group-toggle[aria-expanded="true"] .insight-group-chevron { transform: rotate(180deg); }
.insight-group-body { display: none; padding-top: 24px; }
.insight-group-body.is-open { display: block; }

/* ── Fields ───────────────────────────────────────────────────────────────── */
.field { margin-top: 18px; }
.field:first-child { margin-top: 0; }
label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--mont);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--label);
}
abbr[title] { color: var(--ink); text-decoration: none; border: 0; }

input[type="text"],
input[type="email"],
input[type="number"],
select,
textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 1.02rem;
  color: var(--ink);
  background: var(--input-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  transition: border-color .16s, box-shadow .16s;
  -webkit-appearance: none;
  appearance: none;
}
textarea { line-height: 1.5; resize: vertical; min-height: 62px; }
select {
  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' fill='none' stroke='%2366635B' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 34px;
}
input::placeholder, textarea::placeholder { color: var(--text-ter); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--blue-hour-heading);
  box-shadow: var(--focus);
}
/* A field named by the error summary also gets marked at the field itself, so
   fixing it doesn't mean re-scanning the whole form (Impeccable critique, 2026-09-03). */
input.field-invalid, select.field-invalid, textarea.field-invalid { border-color: var(--error-red); }

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .95rem;
  color: var(--ink);
  cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
  accent-color: var(--blue-hour-heading);
}
/* Checkbox borders barely read as invalid at this size, so the label text
   carries the signal too (Moon 2026-09-03: birth-data confirmation gate). */
.checkbox-label:has(input.field-invalid) { color: var(--error-red); }

.input-row { display: flex; gap: 10px; }
.date-row select { flex: 1; }
.time-row { align-items: center; }
.time-row input[type="number"] { width: 74px; flex: none; text-align: center; }
.time-row .colon { color: var(--text-ter); font-size: 1.2rem; }
.time-row select { width: 84px; flex: none; }
.name-row > div { min-width: 0; }

.hint {
  margin: 7px 0 0;
  font-size: .86rem;
  line-height: 1.45;
  color: var(--text-ter);
}
.coord-display {
  font-family: var(--mont);
  font-size: .66rem;
  letter-spacing: .16em;
  color: var(--label);
}
.req-star abbr { color: var(--ink); }

/* ── Autocomplete ─────────────────────────────────────────────────────────── */
.autocomplete-wrap { position: relative; }
.autocomplete-list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--white);
  border: 1px solid var(--field-border);
  border-radius: var(--r-md);
  box-shadow: var(--lift-md);
  max-height: 232px;
  overflow-y: auto;
}
.autocomplete-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  cursor: pointer;
  font-size: .96rem;
  border-bottom: 1px solid var(--line);
}
.autocomplete-item:last-child { border-bottom: 0; }
.autocomplete-item:hover, .autocomplete-item.active { background: rgba(120,168,165,.15); }
.autocomplete-coords {
  font-family: var(--mont);
  font-size: .66rem;
  letter-spacing: .16em;
  color: var(--text-ter);
  white-space: nowrap;
}
/* The place's own kind (town / county / island). Same meta treatment as the
   coordinates above - no new values - but margin-right:auto keeps it beside the
   place name instead of drifting to the middle, so the pair reads as one label
   and the coordinates stay right-aligned. */
.autocomplete-kind {
  font-family: var(--mont);
  font-size: .66rem;
  letter-spacing: .16em;
  color: var(--text-ter);
  white-space: nowrap;
  text-transform: lowercase;
  margin-right: auto;
}

/* ── Location rows ────────────────────────────────────────────────────────── */
.locations-builder { display: flex; flex-direction: column; gap: 14px; }
.location-row {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px;
  background: var(--white);
  box-shadow: var(--lift-sm);
}
.loc-row-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.loc-row-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 9px;
  background: var(--blue-hour);
  color: var(--white);
  font-family: var(--mont);
  font-size: .8rem;
  font-weight: 600;
}
.btn-remove-loc {
  border: 0;
  background: none;
  color: var(--text-ter);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  min-width: 24px;   /* measured at 22x24px live, 2px under this project's own minimum (Impeccable audit, 2026-09-03) */
}
.btn-remove-loc:hover { color: var(--ink); }
.loc-row-main { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; }
.loc-col-label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--mont);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--label);
}
.loc-date-fields { display: flex; gap: 6px; }
.loc-date-fields select { padding: 10px 6px; font-size: .9rem; }
.loc-notes-row { margin-top: 12px; }

/* ── Person cards (couple / family) ───────────────────────────────────────── */
#additional-people-container { display: flex; flex-direction: column; gap: 18px; }
.person-card {
  border: 1px solid var(--field-border);
  border-radius: var(--r-md);
  padding: clamp(18px,3vw,26px);
  background: var(--white);
  box-shadow: var(--lift-sm);
}
.person-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.person-card-title { font-family: var(--disp); font-size: 1.3rem; color: var(--sky); }
.btn-remove-person {
  border: 1px solid var(--field-border);
  background: none;
  border-radius: var(--r-md);
  padding: 5px 12px;
  font-family: var(--mont);
  font-size: .66rem;
  letter-spacing: .16em;
  color: var(--text-sec);
  cursor: pointer;
}
.btn-remove-person:hover { border-color: var(--blue-hour-heading); color: var(--ink); }
.person-birth-section { margin-top: 4px; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.form-actions { margin-top: 26px; }
/* The live build, readable from the page itself (Moon 2026-09-05). Deliberately
   quiet: it is for Moon, not for a client reading the footer. */
.build-stamp { opacity: .55; font-size: 12px; letter-spacing: .04em; margin-top: 6px; }
.finalize-step-actions { margin-top: 26px; }
.btn-add-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--label);
  background: none;
  border-radius: 9px;
  padding: 10px 20px;
  font-family: var(--mont);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--label);
  cursor: pointer;
  transition: background .16s, color .16s, border-color .16s;
}
.btn-add-row:hover { background: var(--label); color: #fff; }
.btn-add-row:disabled { opacity: .5; cursor: default; background: none; color: var(--text-ter); border-color: var(--field-border); }

.btn-primary {
  display: block;
  width: 100%;
  border: none;
  background: var(--button-gradient);
  border-radius: var(--r-md);
  padding: 12px 20px;
  font-family: var(--mont);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--white);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(44,40,35,.16), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .12s ease, box-shadow .18s;
}
.btn-primary:hover:not(:disabled) { box-shadow: 0 4px 12px -6px rgba(44,40,35,.35), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-primary:active:not(:disabled) { transform: translateY(1px); }
.btn-primary:disabled { opacity: .58; cursor: default; box-shadow: none; }
.btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--blue-hour-heading), 0 1px 2px rgba(44,40,35,.16), inset 0 1px 0 rgba(255,255,255,.35); }

.form-errors {
  margin-top: 16px;
  color: var(--error-red);
  font-size: .95rem;
  line-height: 1.5;
}
.form-errors > div { padding: 3px 0; }
.form-errors:not(:empty) {
  padding: 14px 16px;
  border: 1px solid var(--error-red);
  background: var(--white);
  border-radius: var(--r-md);
}

/* ── Three-screen flow (Essentials · Payment · Your places) ────────────────── */
.screen { display: none; }
.screen.is-active { display: block; }

/* Small caption under an invoice line item (was an inline literal in the JS). */
.invoice-item-note { margin-top: 2px; font-size: .86rem; line-height: 1.4; color: var(--text-ter); }

/* Quiet secondary action beside a primary button (e.g. "Edit my details"). */
.btn-text {
  display: inline-block;
  width: 100%;
  margin-top: 14px;
  padding: 8px;
  background: none;
  border: 0;
  font-family: var(--mont);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--label);
  text-align: center;
  cursor: pointer;
}
.btn-text:hover { color: var(--ink); }
.btn-text:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-md); }

/* ── Screen 3: payment received, then the places step ──────────────────────── */
.paid-banner {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin: 22px 0 4px;
  padding: 18px clamp(16px,3vw,22px);
  border: 1px solid var(--field-border);
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: var(--lift-sm);
}
.paid-banner svg { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--ink); }
.paid-banner strong { display: block; font-weight: 600; color: var(--ink); }
.paid-banner span { display: block; margin-top: 3px; font-size: .95rem; line-height: 1.5; color: var(--text-sec); }

.finalize-person,
.finalize-narrative {
  padding: clamp(24px,3.6vw,36px) 0;
  border-top: 1px solid var(--line);
}
#finalize-people > .finalize-person:first-child { border-top: 0; }
/* One page shows at a time now (Moon 2026-09-04) - whichever page is visible
   sits right under the "Step three" heading, so its own separator line would
   just underline empty space above it. */
.finalize-step { border-top: 0; }

/* ── Payment ──────────────────────────────────────────────────────────────── */
.context-banner {
  margin: 0 0 22px;
  padding: 15px 18px;
  border: 1px solid var(--field-border);
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: var(--lift-sm);
  font-size: .98rem;
  line-height: 1.55;
  color: var(--text-sec);
}
.context-banner strong { color: var(--ink); }
/* The steps read as a scannable list, not a paragraph (Moon 2026-08-17: people
   do not read paragraphs well). Left border marks the sequence without numbering
   it, since the order is already carried by the reading order. */
.context-banner-title {
  display: block;
  margin-bottom: 9px;
  font-family: var(--mont);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--label);
}
.context-banner ul {
  margin: 0;
  padding-left: 1.15em;
  list-style: disc;
}
.context-banner li { margin-bottom: 7px; }
.context-banner li:last-child { margin-bottom: 0; }

.coupon-row { margin-bottom: 22px; }
.coupon-label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--mont);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--label);
}
.coupon-input-wrap { display: flex; gap: 10px; }
.coupon-input-wrap input { flex: 1; }
.coupon-input-wrap .btn-add-row { flex: none; }
#coupon-message { margin-top: 8px; }
.coupon-ok { color: var(--label); }
.coupon-bad { color: var(--ink); }

/* Review-and-pay recap: what you're paying for, not just what it costs
   (Impeccable critique, 2026-09-03 - birth data was invisible on this screen). */
.review-recap { margin-bottom: 18px; }
.review-recap-label {
  margin: 0 0 6px;
  font-family: var(--mont);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--label);
}
.review-recap-name { margin: 0; font-family: var(--disp); font-size: 1.15rem; color: var(--ink); }
.review-recap-detail { margin: 4px 0 0; font-size: .96rem; line-height: 1.5; color: var(--text-sec); }

.invoice {
  border: 1px solid var(--field-border);
  border-radius: var(--r-md);
  padding: 22px 22px 8px;
  margin-bottom: 8px;
}
.invoice-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.invoice-from { font-size: .82rem; color: var(--text-ter); }
.invoice-label {
  font-family: var(--mont);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--label);
}
.invoice-item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.invoice-item:last-child { border-bottom: 0; }
.invoice-item-name { font-family: var(--body); font-size: 1rem; color: var(--ink); }
.invoice-item-price { font-family: var(--disp); font-size: 1.12rem; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.invoice-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 0 6px;
  margin-top: 6px;
  border-top: 2px solid var(--ink);
}
.invoice-total-row > span:first-child {
  font-family: var(--mont);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--label);
}
#invoice-total-amount { font-family: var(--disp); font-size: 1.7rem; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Coupon apply row + the discount line it drives in the invoice. */
.coupon-row { display: flex; gap: 10px; align-items: stretch; }
.coupon-row input { flex: 1 1 auto; }
.btn-apply {
  flex: none;
  border: 1.5px solid var(--field-border);
  background: none;
  color: var(--label);
  font-family: var(--mont);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 0 20px;
  border-radius: var(--r-md);
  cursor: pointer;
}
.btn-apply:hover { border-color: var(--blue-hour-heading); color: var(--ink); }
.btn-apply:focus-visible { outline: none; box-shadow: var(--focus); }
.coupon-message { margin-top: 8px; font-family: var(--body); font-size: .92rem; line-height: 1.45; min-height: 1.2em; }
.coupon-message.valid { color: var(--ink); }
.coupon-message.invalid { color: var(--ink); }
.invoice-discount-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.invoice-discount-row > span:first-child { font-family: var(--body); font-size: .96rem; }
#invoice-discount-amount { font-family: var(--disp); font-size: 1.06rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Privacy reassurance shown beside the personal questions on the reflections step. */
.privacy-note {
  margin-top: 22px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.privacy-note-label {
  font-family: var(--mont);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: 6px;
}
.privacy-note p:last-child { font-family: var(--body); font-size: 1rem; line-height: 1.5; color: var(--text-sec); margin: 0; }

#pay-hint { margin: 16px 0 14px; }
#card-container {
  border: 1px solid var(--field-border);
  border-radius: var(--r-md);
  padding: 4px 14px;
  min-height: 52px;
}
.payment-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
.payment-secured {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mont);
  font-size: .66rem;
  letter-spacing: .16em;
  color: var(--text-sec);
}
.payment-secured svg { color: var(--label); }
.payment-cards { display: flex; gap: 7px; }
.card-logo { width: 38px; height: 24px; border-radius: 3px; }

/* Screen 1's fieldsets stay expanded the whole screen through (Moon
   2026-09-03) - this wrapper no longer collapses, but stays as a plain
   container around each fieldset's fields. */
.step-body { display: grid; grid-template-rows: 1fr; }
.step-body > .step-body-inner { min-height: 0; }


/* ── Footer ───────────────────────────────────────────────────────────────── */
footer {
  max-width: 760px;
  margin: 0 auto;
  padding: 26px clamp(20px,4.6vw,52px) 40px;
  text-align: center;
  font-size: .82rem;
  color: var(--text-ter);
}
footer p { margin: .25rem 0; }
footer a { color: var(--label); }

/* ── Utility ──────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  body { font-size: 16px; }
  .hero { min-height: 52vh; padding-bottom: clamp(64px,8vh,92px); }
  .hero-logo { width: min(300px, 74vw); }
  .hero-copy h1 { font-size: clamp(2.05rem, 8vw, 2.6rem); }
  .hero-copy p { font-size: 1rem; }
  main { margin-top: -44px; border-radius: var(--r-md) var(--r-md) 0 0; }
  .who-for-group { grid-template-columns: 1fr 1fr; }
  .seg { grid-template-columns: 1fr; }
  .loc-row-main { grid-template-columns: 1fr; }
  .progress-now { font-size: .92rem; }
  .name-row { flex-direction: column; gap: 0; }
  .name-row > div + div { margin-top: 18px; }
  .invoice-header { flex-direction: column; align-items: flex-start; gap: 4px; }
}

@media (max-width: 400px) {
  .time-row input[type="number"] { width: 60px; }
  .payment-trust { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .001ms !important; }
  .progress-fill { transition: none; }
}

/* ── Save & Resume ────────────────────────────────────────────────────────── */
/* [hidden] must win over the class's own display, or the native hide/show this
   banner relies on silently does nothing (found live, 2026-09-03, while wiring
   this banner up for the first time). */
.resume-banner[hidden] { display: none; }
.resume-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin: 0 0 6px;
  padding: 20px clamp(18px,3vw,26px);
  background: var(--white);
  border: 1px solid var(--field-border);
  border-radius: var(--r-md);
  box-shadow: var(--lift-sm);
}
.resume-banner-text { flex: 1 1 280px; font-size: 1rem; line-height: 1.5; color: var(--ink); }
.resume-banner-text strong { font-weight: 600; }
.resume-hint {
  display: block;
  margin-top: 6px;
  font-size: .84rem;
  line-height: 1.45;
  color: var(--text-ter);
}
.resume-banner-actions { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.resume-banner .resume-yes {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 13px 24px;
  font-size: .9rem;
}
.resume-no {
  background: none;
  border: 0;
  padding: 6px 2px;
  font-family: var(--mont);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--label);
  cursor: pointer;
}
.resume-no:hover { color: var(--ink); }
.resume-no:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-md); }

/* After a restore, each place must be re-picked from the live suggestions so a
   fresh coordinate is resolved (never a trusted stale one). */
.coord-display.reconfirm { display: block; color: var(--ink); }

/* Quiet autosave reassurance, shown under the progress bar once a draft exists. */
.draft-note {
  display: none;
  align-items: center;
  gap: 6px;
  margin: 9px 0 0;
  font-family: var(--mont);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-ter);
}
.draft-note.is-on { display: flex; }
.draft-note svg { width: 12px; height: 12px; flex: 0 0 auto; stroke: var(--blue-hour-heading); }

@media (max-width: 560px) {
  .resume-banner-actions { width: 100%; justify-content: space-between; }
}