/* ═══════════════════════════════════════════════════════════════════════════
   Harmonic Earthwalk — Order page
   Visual world: DESIGN.md (Moon, 2026-07-24). White is the only ground; the
   Earth photograph carries the color; type names what you are looking at.
   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;   /* all type, never pure black */
  --text:        #2C2823;
  --text-sec:    #66635B;   /* secondary text; merged with --label to one warm-gray (2026-07-27, the fonts distinguish the roles) */
  --text-ter:    #66635B;   /* hints, tertiary (JS references this); merged to the one warm-gray per DESIGN.md (6.0:1) */
  /* Golden Hour orange — the single accent, sampled from the hero (Moon 2026-07-25) */
  --orange:      #E79948;   /* the one warm accent: primary button, checkmarks, required marks, selected states (ink text, 6.3:1) */
  --orange-deep: #A35D10;   /* Golden Hour Deep — the heading color: same accent hue carried to type-safe depth (5.08:1 on white). Headings only, never body copy, never a control (Moon 2026-08-08) */
  --orange-edge: #C97A22;   /* 1px edge on orange */
  --orange-hov:  #DE8A34;   /* button hover */
  --label:       #66635B;   /* labels, eyebrows, links, coord: quiet warm-neutral gray (6.0:1), photo-agnostic; same value as --text-sec */

  /* Functional surfaces — separation from whitespace + soft shadow, never tint */
  --field-border: #5E938F;  /* Light Shore teal, deepened from #78A8A5 to meet the 3:1 UI-component contrast min (3.47:1): input outlines + functional strokes */
  --line:         #ECE9E2;  /* hairline divider inside components only */
  --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;
  --body:  'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --mont: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  --r-sm: 5px;
  --r-md: 9px;
  --r-lg: 14px;

  --measure: 640px;
  --focus: 0 0 0 3px rgba(231,153,72,.40);
}

* { box-sizing: border-box; }

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(231,153,72,.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=5");
  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; }
/* Screen 3 (after payment): the title/paragraph are irrelevant once someone has
   already ordered, but the logo sits in the same flex-end-justified stack as
   this block, so removing it from the flow (display:none) would let the logo
   drop to fill the space. visibility:hidden keeps its layout box reserved —
   same flex math, same logo position — while showing nothing. */
body.is-finalize .hero-copy { visibility: hidden; }
.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: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-ter);
}

/* ── 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%);
}

/* ── 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: 999px;
  background: #C9D7D8;   /* Light Shore pale: the unfilled track */
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  border-radius: 999px;
  background: var(--orange);
  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; }
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(--ink);
  text-wrap: balance;
}
.eyebrow {
  display: block;
  margin-bottom: 7px;
  font-family: var(--mont);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .17em;
  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(--orange);
  border-color: var(--orange-edge);
  color: var(--ink);
  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(--orange); 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;
  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(--orange);
  border-color: var(--orange-edge);
  color: var(--ink);
  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: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  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-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-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: .82rem;
  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: .92rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.4;
  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(--orange); }
.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); }

/* ── Fields ───────────────────────────────────────────────────────────────── */
.field { margin-top: 18px; }
.field:first-child { margin-top: 0; }
label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--mont);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--label);
}
abbr[title] { color: var(--orange); 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(--orange);
  box-shadow: var(--focus);
}

.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: .72rem;
  letter-spacing: .05em;
  color: var(--label);
}
.req-star abbr { color: var(--orange); }

/* ── 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: .68rem;
  letter-spacing: .04em;
  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: .68rem;
  letter-spacing: .04em;
  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: 999px;
  background: var(--orange);
  color: var(--ink);
  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;
}
.btn-remove-loc:hover { color: var(--orange); }
.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: .68rem;
  font-weight: 600;
  letter-spacing: .09em;
  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-lg);
  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(--orange-deep); }
.btn-remove-person {
  border: 1px solid var(--field-border);
  background: none;
  border-radius: var(--r-sm);
  padding: 5px 12px;
  font-family: var(--mont);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--text-sec);
  cursor: pointer;
}
.btn-remove-person:hover { border-color: var(--orange); color: var(--orange); }
.person-birth-section { margin-top: 4px; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.form-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: 999px;
  padding: 10px 20px;
  font-family: var(--mont);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  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: 1px solid var(--orange-edge);
  background: var(--orange);
  border-radius: 999px;
  padding: 18px 28px;
  font-family: var(--mont);
  font-size: .98rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, var(--lift-md);
  transition: transform .12s ease, box-shadow .18s, background .18s;
}
.btn-primary:hover:not(:disabled) { background: var(--orange-hov); box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, var(--lift); }
.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: var(--focus), var(--lift-md); }

.form-errors {
  margin-top: 16px;
  color: #8A2A12;
  font-size: .95rem;
  line-height: 1.5;
}
.form-errors > div { padding: 3px 0; }
.form-errors:not(:empty) {
  padding: 14px 16px;
  border: 1px solid #E4C3B4;
  background: #FCF5F1;
  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: .74rem;
  font-weight: 600;
  letter-spacing: .09em;
  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-sm); }

/* ── 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(--orange-edge); }
.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; }

/* ── 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: .72rem;
  font-weight: 600;
  letter-spacing: .09em;
  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: .72rem;
  font-weight: 600;
  letter-spacing: .09em;
  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: #8A2A12; }

.invoice {
  border: 1px solid var(--field-border);
  border-radius: var(--r-lg);
  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: .7rem;
  font-weight: 600;
  letter-spacing: .18em;
  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: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  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: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 0 20px;
  border-radius: var(--r-md);
  cursor: pointer;
}
.btn-apply:hover { border-color: var(--orange-edge); 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: #2F6D4F; }
.coupon-message.invalid { color: #8A2A12; }
.invoice-discount-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  color: #2F6D4F;
}
.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: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: 6px;
}
.privacy-note p:last-child { font-family: var(--body); font-size: .92rem; 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: .72rem;
  letter-spacing: .03em;
  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; }

/* ── Accordion (complete-collapse) ────────────────────────────────────────── */
.step-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .42s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
}
.step-body > .step-body-inner { min-height: 0; }

.step-summary {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  margin-top: 4px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.step-summary:hover { border-color: var(--field-border); }
.step-summary-check { flex: none; width: 17px; height: 17px; color: var(--orange); }
.step-summary-text {
  flex: 1;
  min-width: 0;
  color: var(--text-sec);
  font-size: .98rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.step-edit {
  flex: none;
  font-family: var(--mont);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--label);
}

/* Collapsed state: fold the body, reveal the summary */
.step--collapsed .step-body {
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
}
.step--collapsed .step-body > .step-body-inner { overflow: hidden; }
.step--collapsed .section-intro { display: none; }
.step--collapsed .step-summary { display: flex; }
.step--collapsed legend { font-size: 1.28rem; }
.step--collapsed .section-head { margin-bottom: 0; }
.step--collapsed { padding-top: clamp(18px,2.6vw,24px); padding-bottom: clamp(18px,2.6vw,24px); }


/* ── 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; }
}

@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 ────────────────────────────────────────────────────────── */
.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: .72rem;
  font-weight: 600;
  letter-spacing: .09em;
  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-sm); }

/* 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(--orange-edge); }

/* 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: .62rem;
  font-weight: 600;
  letter-spacing: .11em;
  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(--orange-edge); }

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