/* =====================================================
   TRAVEL KEEPER — School Break Planner
   =====================================================
   Standalone lead-gen tool, deployed separately from the
   app (planner.gotravelkeeper.com). Shares the brand
   system with www/styles.css but not the stylesheet.

   SHADOW RULE (matches the app, Megan 2026-06-13):
   never use the chunky offset `box-shadow: Npx Npx 0 var(--x)`.
   Floating surfaces (gate modal, datepicker) get the soft
   green-tinted drop shadow. Inline cards (form card,
   progress bar) go flat with just the border. Hover and
   focus are carried by a pink border, never by an offset. */

/* ===== The hidden attribute must ALWAYS win =====
   Author `display` rules (.progress-bar, .gate-overlay, .results) override the
   browser's own [hidden]{display:none}, silently un-hiding anything gated with
   `hidden`. Caught here on the progress bar: on an active or past trip it kept
   its display:flex and sat above the status card showing a stale "0 / 13".
   Same rule, same reason, as www/styles.css. Verify hiding with COMPUTED
   DISPLAY, never `el.hidden` — the attribute can be true while the element
   shows. */
[hidden] { display: none !important; }

:root {
  --white: #FFFFFF;
  --green: #004745;
  --green-deep: #00302e;
  --green-soft: #e8f1f0;
  --pink: #d81159;
  --pink-deep: #a00d42;
  --pink-soft: #fdeaf0;
  --ink: #004745;
  --muted: #4a6b69;
  /* Late-milestone amber, mirrors the app's late state */
  --amber: #b45309;
  --amber-soft: #fef3c7;
  /* The one sanctioned shadow: floating surfaces only */
  --shadow-float: 0 12px 44px rgba(0, 71, 69, 0.22);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--white);
  color: var(--ink);
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
  font-weight: 400;
}

h1, h2, h3, h4, .serif {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  color: var(--green);
}

/* Registered trademark mark. Small and raised so it reads as a legal mark
   rather than a character in the wordmark. Travel Keeper is registered in
   class 039. */
.tm {
  font-size: 0.5em;
  vertical-align: super;
  line-height: 0;
  letter-spacing: 0;
  margin-left: 0.05em;
  font-style: normal;
  font-weight: 400;
}

/* In the wide-tracked uppercase lockups the parent's letter-spacing lands
   between the final "r" and the mark, floating it away from the wordmark.
   Pull it back by roughly that tracking so it sits tight to the name. */
.masthead-brand .tm,
.hero-kicker .tm,
.footer-brand .tm {
  margin-left: -0.12em;
}

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 2.5rem;
  position: relative;
}

/* ===== MASTHEAD ===== */
.masthead {
  padding: 2rem 0 1.25rem;
  border-bottom: 1.5px solid var(--green);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

/* Deliberately NOT a flex container. It was `display:flex` with a 0.7rem gap,
   which turned the <span class="tm"> into a flex item: vertical-align has no
   effect on flex items, so the ® dropped to the baseline and the gap shoved it
   away from the wordmark. Block keeps it inline text, the way .footer-brand
   always rendered it correctly. */
.masthead-brand {
  font-family: 'Futura', 'Futura PT', 'Jost', 'Trebuchet MS', 'Century Gothic', sans-serif;
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
}

.masthead-back {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--green);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.85rem;
  border: 1.5px solid var(--green);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.masthead-back .back-arrow {
  font-size: 0.95rem;
  line-height: 1;
  transition: transform 0.18s ease;
}

.masthead-back:hover,
.masthead-back:focus-visible {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
  outline: none;
}

.masthead-back:hover .back-arrow,
.masthead-back:focus-visible .back-arrow {
  transform: translateX(-3px);
}

/* ===== HERO ===== */
.hero {
  padding: 3.5rem 0 3rem;
  border-bottom: 1.5px solid var(--green);
  position: relative;
}

/* Plain block, no flanking rules. (It was a flex row with ::before/::after
   drawing a dash on each side.) Block also means the ® stays inline text
   instead of becoming a flex item, so no wrapper span is needed. */
.hero-kicker {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--pink);
  margin-bottom: 1.5rem;
}

/* Sized to match `.calc-intro h2` exactly (2.25rem / 1.12 / -0.012em). Kept as
   a flat value rather than a clamp so the two headings stay identical at every
   width. `.reveal-date` matches these three values too. */
.hero h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 2.25rem;
  line-height: 1.12;
  letter-spacing: -0.012em;
  max-width: 20ch;
  color: var(--green);
}

.hero h1 em { font-style: italic; color: var(--pink); }
.hero h1 .num { font-style: normal; color: var(--pink); }

.hero-sub {
  margin-top: 2rem;
  max-width: 58ch;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ink);
}

.hero-sub p {
  padding-left: 1.5rem;
  border-left: 2px solid var(--pink);
}

.hero-sub strong { color: var(--green); font-weight: 700; }

.scroll-hint {
  margin-top: 3rem;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  opacity: 0.75;
}

.scroll-hint::after {
  content: '↓';
  font-size: 1rem;
  animation: bounce 1.8s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ===== CALCULATOR ===== */
.calc {
  padding: 4rem 0;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4rem;
  border-bottom: 1.5px solid var(--green);
  align-items: start;
}

/* In sections 02/03 the numeral sits in the left grid column beside the
   heading. The calculator has no such column (its right side is the form
   card), so 01 stacks above the heading instead. */
.calc-intro .section-num { margin-bottom: 0.75rem; }

.calc-intro h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 2.25rem;
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin-bottom: 1.5rem;
  color: var(--green);
}

.calc-intro h2 em { font-style: italic; color: var(--pink); }

.calc-intro-body {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
}

.calc-intro-body p + p { margin-top: 1rem; }

.calc-intro-body em {
  color: var(--pink);
  font-style: italic;
  font-weight: 600;
}

/* Inline card that sits ON the page: flat, border only. No offset shadow. */
.form-card {
  background: var(--white);
  border: 1.5px solid var(--green);
  padding: 2.5rem;
  position: relative;
}

.form-label {
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 0.5rem;
  color: var(--green);
}

.form-hint {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.84rem;
  font-style: italic;
  color: var(--muted);
  margin-bottom: 1rem;
  line-height: 1.5;
}

.date-group {
  margin-bottom: 1.75rem;
  position: relative;
}

/* ===== CUSTOM DATE INPUT =====
   Hover/open/focus are carried by the pink border alone. */
.date-field {
  width: 100%;
  padding: 0.95rem 2.75rem 0.95rem 1.1rem;
  border: 1.5px solid var(--green);
  background: var(--white);
  font-family: 'Open Sans', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: var(--green);
  outline: none;
  cursor: pointer;
  user-select: none;
  position: relative;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 3rem;
}

.date-field:hover,
.date-field:focus-visible,
.date-field.open {
  border-color: var(--pink);
}

.date-field .placeholder {
  color: var(--muted);
  font-style: italic;
  font-weight: 400;
}

.date-field .icon {
  flex: 0 0 auto;
  color: var(--pink);
  font-size: 1.15rem;
  line-height: 1;
  pointer-events: none;
}

/* Airline select dropdown, styled to match the date field */
.select-wrapper {
  position: relative;
  display: block;
}

.select-field {
  width: 100%;
  padding: 0.95rem 2.75rem 0.95rem 1.1rem;
  border: 1.5px solid var(--green);
  background: var(--white);
  font-family: 'Open Sans', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: var(--green);
  outline: none;
  cursor: pointer;
  border-radius: 0;
  min-height: 3rem;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: border-color 0.15s ease;
}

.select-field:hover,
.select-field:focus { border-color: var(--pink); }

.select-icon {
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pink);
  font-size: 1.15rem;
  line-height: 1;
  pointer-events: none;
}

/* ===== DATE PICKER POPUP =====
   Floating surface: soft drop shadow, never an offset. */
.datepicker {
  position: absolute;
  z-index: 50;
  top: calc(100% + 0.5rem);
  left: 0;
  width: 320px;
  max-width: 100%;
  background: var(--white);
  border: 1.5px solid var(--green);
  box-shadow: var(--shadow-float);
  padding: 1.25rem;
  display: none;
  animation: pickerIn 0.18s ease-out;
}

.datepicker.open { display: block; }

@keyframes pickerIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.dp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.dp-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.15rem;
  color: var(--green);
  cursor: pointer;
  user-select: none;
  padding: 0.25rem 0.5rem;
  background: none;
  border: none;
  transition: color 0.15s ease;
}

.dp-title:hover,
.dp-title:focus-visible { color: var(--pink); outline: none; }

.dp-nav { display: flex; gap: 0.4rem; }

.dp-nav-btn {
  width: 32px;
  height: 32px;
  background: var(--white);
  border: 1.5px solid var(--green);
  color: var(--green);
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  padding: 0;
}

.dp-nav-btn:hover:not(:disabled),
.dp-nav-btn:focus-visible:not(:disabled) {
  background: var(--green);
  color: var(--white);
  outline: none;
}

.dp-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  background: var(--white);
  color: var(--green);
}

.dp-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 0.5rem;
}

.dp-weekday {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pink);
  text-align: center;
  padding: 0.4rem 0;
}

.dp-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.dp-day {
  aspect-ratio: 1 / 1;
  background: var(--white);
  border: 1.5px solid transparent;
  color: var(--green);
  font-family: 'Open Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  padding: 0;
}

.dp-day:hover:not(:disabled):not(.selected),
.dp-day:focus-visible:not(:disabled):not(.selected) {
  background: var(--green-soft);
  border-color: var(--green);
  outline: none;
}

.dp-day.other-month { color: rgba(0, 71, 69, 0.25); }

.dp-day.today {
  border-color: var(--pink);
  color: var(--pink);
  font-weight: 700;
}

.dp-day.selected {
  background: var(--pink);
  color: var(--white);
  border-color: var(--pink);
  font-weight: 700;
}

.dp-day:disabled {
  color: rgba(0, 71, 69, 0.2);
  cursor: not-allowed;
  background: transparent;
}

.dp-grid-choice {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.dp-choice {
  padding: 0.9rem 0.5rem;
  background: var(--white);
  border: 1.5px solid transparent;
  color: var(--green);
  font-family: 'Open Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.dp-choice:hover:not(.selected),
.dp-choice:focus-visible:not(.selected) {
  background: var(--green-soft);
  border-color: var(--green);
  outline: none;
}

.dp-choice.current {
  border-color: var(--pink);
  color: var(--pink);
  font-weight: 700;
}

.dp-choice.selected {
  background: var(--pink);
  color: var(--white);
  border-color: var(--pink);
  font-weight: 700;
}

.dp-choice:disabled { opacity: 0.3; cursor: not-allowed; }

.dp-footer {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--green);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.dp-quick {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--green);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.3rem 0;
  transition: color 0.12s ease;
}

.dp-quick:hover:not(:disabled),
.dp-quick:focus-visible:not(:disabled) { color: var(--pink); outline: none; }

.dp-quick:disabled { opacity: 0.3; cursor: not-allowed; }

/* Primary button: pink wipe on hover, no offset shadow. */
.calc-btn {
  width: 100%;
  margin-top: 1rem;
  padding: 1.1rem;
  background: var(--green);
  color: var(--white);
  border: 1.5px solid var(--green);
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}

.calc-btn span { position: relative; z-index: 2; }

/* The pink hover fill parks fully below the button. translateY(100%) left a
   1px sliver of pink showing along the bottom edge at rest (subpixel rounding
   against the border), so it is pushed just past 100%. */
.calc-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--pink);
  transform: translateY(101%);
  transition: transform 0.25s ease;
  z-index: 1;
}

.calc-btn:hover::before,
.calc-btn:focus-visible::before { transform: translateY(0); }
.calc-btn:hover,
.calc-btn:focus-visible { border-color: var(--pink); outline: none; }

.error-msg {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: var(--pink-soft);
  border-left: 3px solid var(--pink);
  font-size: 0.88rem;
  color: var(--pink-deep);
  display: none;
}

.error-msg.show { display: block; }

/* ===== RESULTS ===== */
.results[hidden] { display: none; }

.results.show {
  display: block;
  animation: fadeUp 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Bottom padding is deliberately much smaller than the top. The stat row
   already carries 1.5rem of its own padding under the labels, so a matching
   4rem here left ~92px of dead space between the labels and the closing rule
   (against 26px above the numbers). */
.reveal {
  padding: 5rem 0 1.5rem;
  border-bottom: 1.5px solid var(--green);
}

/* Plain block, no leading dash. (Was a flex row with a ::before rule.) */
.reveal-tag {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--pink);
  margin-bottom: 2rem;
}

.reveal-date-label {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 1.4rem;
  color: var(--green);
  margin-bottom: 0.5rem;
}

/* Sized to match the hero h1 (and therefore `.calc-intro h2`) exactly. Keep
   these three values in sync if either headline is ever resized again. */
.reveal-date {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 2.25rem;
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--pink);
  margin-bottom: 1.5rem;
  display: block;
}

/* ALREADY-OPEN state: the booking window opened before today. Not a failure,
   and deliberately not styled like one. The date goes green rather than the
   usual pink "here is your date" treatment, and a reassuring note explains
   that nothing was missed. Amber rule to tie it to the late milestones. */
.reveal.is-open .reveal-date { color: var(--green); }

.reveal.is-open .reveal-tag { color: var(--amber); }

.reveal-note {
  margin-top: 0.25rem;
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--amber-soft);
  border-left: 3px solid var(--amber);
  font-family: 'Open Sans', sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink);
  max-width: 62ch;
}

.reveal-note strong { color: var(--green); font-weight: 700; }

/* On the already-open card the countdown dot has nothing to count down to. */
.reveal.is-open .countdown-pulse { display: none; }

.reveal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1.5px solid var(--green);
  margin-top: 2.5rem;
}

.reveal-stat {
  padding: 1.5rem 1.5rem 1.5rem 0;
  border-right: 1.5px solid var(--green);
}

.reveal-stat:last-child { border-right: none; }
.reveal-stat:not(:first-child) { padding-left: 1.5rem; }

.stat-value {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 2.25rem;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--green);
  display: block;
  margin-bottom: 0.4rem;
}

.stat-value .unit {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  font-style: italic;
  color: var(--pink);
  margin-left: 0.3rem;
}

.stat-label {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted);
}

.countdown-pulse {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pink);
  margin-right: 0.5rem;
  vertical-align: middle;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.3); }
}

/* Asymmetric on purpose. 5rem above separates a section from the one before
   it; 5rem below just stacked on top of the closing disclaimer's own margin
   and left ~82px of dead space before the rule. Half that reads as the end of
   a block instead of a gap. */
.section {
  padding: 5rem 0 2.5rem;
  border-bottom: 1.5px solid var(--green);
}

/* Row gap is deliberately separate from the column gap. A single `gap: 4rem`
   applied to both, which dropped 4rem of dead space between the section title
   and the intro paragraph sitting under it. */
.section-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0.75rem 4rem;
  margin-bottom: 3rem;
  align-items: end;
}

.section-num {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 4rem;
  line-height: 1;
  color: var(--pink);
  letter-spacing: -0.02em;
}

/* Same 2.25rem / 1.12 / -0.012em as `.hero h1`, `.calc-intro h2` and
   `.reveal-date`. All four display headings are deliberately one size. */
.section-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 2.25rem;
  line-height: 1.12;
  letter-spacing: -0.012em;
  /* No max-width: the grid column (2fr) is the measure. An earlier 28ch cap
     held the title ~44px short of the right margin while everything else in
     the section runs the full width, so the heading block floated, anchored
     to neither edge. The column is 731px at desktop, so 02 (616px natural)
     still sits on one line and 03 (1016px) wraps to two, flush right. */
  color: var(--green);
}

.section-title em { font-style: italic; color: var(--pink); }

/* Like .section-title, no max-width. A 62ch cap stopped this 163px short of
   the right margin, which is what made the whole heading block look like it
   was drifting left inside its column. The grid column sets the measure. */
.section-intro {
  grid-column: 2;
  margin-top: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
}

.section-intro em { color: var(--pink); font-style: italic; font-weight: 600; }

/* ===== AIRLINES TABLE ===== */
.airlines {
  border: 1.5px solid var(--green);
}

.airline-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 2fr;
  gap: 0;
  border-bottom: 1.5px solid var(--green);
  transition: background 0.15s ease;
}

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

.airline-row.header {
  background: var(--green);
  color: var(--white);
}

.airline-row.header .airline-cell { color: var(--white); }

.airline-row:not(.header):hover { background: var(--green-soft); }

.airline-cell {
  padding: 1.1rem 1.25rem;
  border-right: 1.5px solid var(--green);
  font-family: 'Open Sans', sans-serif;
  font-size: 0.92rem;
  color: var(--ink);
  display: flex;
  align-items: center;
}

.airline-row.header .airline-cell {
  border-right-color: rgba(255,255,255,0.25);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.airline-cell:last-child { border-right: none; }

.airline-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.15rem;
  color: var(--green);
}

.airline-days {
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--pink);
  font-size: 1.1rem;
}

.airline-note {
  font-style: italic;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.cash-callout {
  margin-top: 2.5rem;
  padding: 1.75rem 2rem;
  background: var(--green-soft);
  border-left: 4px solid var(--pink);
}

.cash-callout-label {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 0.75rem;
}

.cash-callout h3 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.5rem;
  color: var(--green);
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}

.cash-callout p {
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 0.65rem;
}

.cash-callout p:last-child { margin-bottom: 0; }

.cash-callout strong { color: var(--pink); font-weight: 700; }

.disclaimer {
  margin-top: 1.5rem;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--muted);
  line-height: 1.5;
}

.affiliate-disclosure { margin-top: 2.5rem; }

/* ===== ADVISOR CTA =====
   Sits at the foot of the timeline. Borrows the .cash-callout treatment
   (green-soft fill, pink left rule) so it reads as part of the page rather
   than an ad, with a real button since this one is meant to be clicked. */
.advisor-cta {
  margin-bottom: 2.5rem;
  padding: 2rem 2.25rem;
  background: var(--green-soft);
  border-left: 4px solid var(--pink);
}

/* Identical to .cash-callout h3, so the two asides read as the same rank. */
.advisor-cta h3 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--green);
  margin-bottom: 0.75rem;
}

/* No max-width: the copy runs the full width of the block, matching
   .cash-callout. A 58ch cap here left the right half of the box empty. */
.advisor-cta p {
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 1.5rem;
}

/* Same pink-wipe mechanic as .calc-btn, sized to its text rather than full
   width. Parked at 101% so no sliver shows along the bottom edge at rest. */
.advisor-btn {
  display: inline-block;
  padding: 0.7rem 1.25rem;
  background: var(--green);
  color: var(--white);
  border: 1.5px solid var(--green);
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.advisor-btn span { position: relative; z-index: 2; }

.advisor-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--pink);
  transform: translateY(101%);
  transition: transform 0.25s ease;
  z-index: 1;
}

.advisor-btn:hover::before,
.advisor-btn:focus-visible::before { transform: translateY(0); }
.advisor-btn:hover,
.advisor-btn:focus-visible { border-color: var(--pink); outline: none; }

/* ===== SCHOOL YEAR MAP (section 00) =====
   Form card on the left, the break list on the right, the month strip full
   width underneath. Kid colours are brand tokens, assigned in order and kept
   per kid (removing one never recolours the others). */
/* Laid out like the calculator (01): label, heading and copy stacked on the
   left, form card on the right. The break list sits under the copy so the
   whole section fits one desktop screen. */
.year-section {
  padding: 4rem 0;
  border-bottom: 1.5px solid var(--green);
}

.year-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4rem;
  align-items: start;
}

/* "Start here" takes the numeral's slot, a size down so a phrase doesn't
   shout the way a two-digit number can. */
.section-num.start-here { font-size: 2.7rem; }

.year-list { margin-top: 2.5rem; }

/* Compact form: this card holds more fields than the calculator's. */
.year-form { padding: 1.75rem; }
.year-form .date-group { margin-bottom: 1.1rem; }
.year-form .form-hint { margin-bottom: 0.6rem; font-size: 0.8rem; }
.year-form .date-field,
.year-form .text-field { min-height: 2.75rem; padding-top: 0.65rem; padding-bottom: 0.65rem; font-size: 0.95rem; }
.year-form .calc-btn { margin-top: 0.4rem; padding: 0.9rem; }

.date-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

/* The picker is wider than half the card. Let it overhang, and open the
   right-hand one leftward so it stays on the page. */
.date-pair .datepicker { width: 320px; max-width: none; }
.date-pair .date-group:last-child .datepicker { left: auto; right: 0; }

.k0 { --kid: var(--green); }
.k1 { --kid: var(--pink); }
.k2 { --kid: var(--amber); }
.k3 { --kid: var(--muted); }
.k4 { --kid: var(--pink-deep); }
.k5 { --kid: var(--green-deep); }

.kid-swatch {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  background: var(--kid);
  flex: 0 0 auto;
}

/* Text input, styled to match .date-field */
.text-field {
  width: 100%;
  min-height: 3rem;
  padding: 0.85rem 1.1rem;
  border: 1.5px solid var(--green);
  border-radius: 0;
  background: var(--white);
  font-family: 'Open Sans', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: var(--green);
  outline: none;
  transition: border-color 0.15s ease;
}

.text-field:hover,
.text-field:focus { border-color: var(--pink); }

.text-field::placeholder { color: var(--muted); font-style: italic; font-weight: 400; }

.inline-add { display: flex; gap: 0.5rem; }

.small-btn {
  flex: 0 0 auto;
  padding: 0 1.25rem;
  background: var(--green);
  color: var(--white);
  border: 1.5px solid var(--green);
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.small-btn:hover,
.small-btn:focus-visible { background: var(--pink); border-color: var(--pink); outline: none; }
.small-btn:disabled { opacity: 0.4; cursor: not-allowed; background: var(--green); border-color: var(--green); }

.kid-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.kid-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.35rem 0.3rem 0.75rem;
  border: 1.5px solid var(--green);
  font-weight: 600;
  font-size: 0.92rem;
}

.kid-remove {
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  border: 1.5px solid transparent;
  background: none;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.kid-remove:hover,
.kid-remove:focus-visible { color: var(--pink); border-color: var(--pink); outline: none; }

.kid-choices { border: none; min-width: 0; }
.kid-choices legend { padding: 0; }

.kid-choice-list { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }

.kid-choice {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  cursor: pointer;
}

.kid-choice input { width: 1.1rem; height: 1.1rem; accent-color: var(--pink); }

/* ----- Break list ----- */
.year-empty {
  padding: 1.5rem 0;
  border-top: 1.5px solid var(--green);
  font-style: italic;
  color: var(--muted);
}

.break-list { list-style: none; border-top: 1.5px solid var(--green); }

.break-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--green-soft);
}

/* Fixed width (one slot per kid in the family) so every name lines up,
   whether a break has one kid's bar or all of them. */
.break-bars { display: flex; gap: 3px; align-self: stretch; width: calc(var(--kids, 1) * 7px - 3px); }
.break-bar { width: 4px; background: var(--kid); }

.break-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.1rem;
  line-height: 1.25;
}

.break-dates { font-size: 0.85rem; color: var(--muted); }

/* A future flights-open date, inline on the second line */
.break-open { font-weight: 600; color: var(--pink); white-space: nowrap; }

.break-actions { display: flex; align-items: center; gap: 0.25rem; }

/* Quiet text links: one per row adds up fast, so no boxes. */
.break-plan {
  padding: 0.35rem 0.5rem;
  border: none;
  background: none;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--green);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.break-plan:hover,
.break-plan:focus-visible { color: var(--pink); outline: none; }

.break-edit,
.text-btn {
  padding: 0.35rem 0.5rem;
  border: 1.5px solid transparent;
  background: none;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.break-edit:hover,
.break-edit:focus-visible,
.text-btn:hover,
.text-btn:focus-visible { color: var(--pink); outline: none; }

.text-btn { display: block; margin: 0.5rem auto 0; }

.kid-toggle { margin: 0; padding: 0; text-align: left; font-size: 0.85rem; }

/* "Your kids" header: collapses the kids box, shows names while closed */
.kid-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  font-family: 'Open Sans', sans-serif;
  text-align: left;
  color: var(--green);
  cursor: pointer;
}

.kid-head .form-label { margin-bottom: 0; }
.kid-head-names { font-size: 0.9rem; font-weight: 600; }

.kid-arrow {
  margin-left: auto;
  color: var(--pink);
  font-size: 1.15rem;
  line-height: 1;
  transform: rotate(-90deg);
  transition: transform 0.15s ease;
}

.kid-head[aria-expanded="true"] { margin-bottom: 0.5rem; }
.kid-head[aria-expanded="true"] .kid-arrow { transform: none; }
.kid-head:hover .form-label,
.kid-head:focus-visible .form-label { color: var(--pink); }
.kid-head:focus-visible { outline: none; }

/* The break currently loaded in the form */
.break-item.is-editing { background: var(--green-soft); margin: 0 -0.6rem; padding-left: 0.6rem; padding-right: 0.6rem; }
.break-item.is-editing .break-edit { color: var(--pink); }

/* ----- Month strip ----- */
.year-map { margin-top: 2.5rem; }

.year-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  margin-bottom: 1.25rem;
  font-size: 0.92rem;
  font-weight: 600;
}

.legend-item { display: inline-flex; align-items: center; gap: 0.45rem; }


.legend-count { font-weight: 400; color: var(--muted); }
.legend-count strong { color: var(--green); }

.ym-strip { border-top: 1.5px solid var(--green); border-bottom: 1.5px solid var(--green); }

.ym-row {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  align-items: center;
  border-bottom: 1px solid var(--green-soft);
}

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

.ym-month {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ym-year { font-weight: 400; color: var(--muted); letter-spacing: 0.02em; }

.ym-days {
  display: grid;
  grid-template-columns: repeat(31, minmax(0, 1fr));
  gap: 2px;
}

.ym-head .ym-days { padding: 0.4rem 0 0.2rem; }
.ym-num { font-size: 0.68rem; color: var(--muted); text-align: center; }

.ym-day {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 1px;
}

.ym-lane { display: block; height: 6px; background: var(--green-soft); }
.ym-weekend .ym-lane { opacity: 0.45; }
.ym-lane.on { background: var(--kid); opacity: 1; }
.ym-pad { visibility: hidden; }
.ym-past { opacity: 0.3; }

.legend-today {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border: 1.5px solid var(--pink);
}


.ym-today { outline: 1.5px solid var(--pink); outline-offset: -1.5px; }

.year-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 1.75rem;
}

.year-actions-note { font-size: 0.92rem; color: var(--muted); }

/* ===== APP CTA =====
   Closing section, always visible. Same heading size as every other
   display heading. */
.app-cta {
  padding: 5rem 0;
  border-bottom: 1.5px solid var(--green);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 4rem;
  align-items: center;
}

.app-cta-body p { font-size: 1.1rem; line-height: 1.6; margin-bottom: 1.5rem; }

.app-cta-links { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Store buttons are pink so they read as "the app", not another control in
   this tool. Same wipe mechanic as .advisor-btn, reversed: teal fills in. */
.app-btn { background: var(--pink); border-color: var(--pink); }
.app-btn::before { background: var(--green); }
.app-btn:hover,
.app-btn:focus-visible { border-color: var(--green); }

/* ===== TIMELINE / CHECKLIST ===== */
/* Vertical line as a background gradient so it can be "interrupted" by the
   white halos on the circles.
   ALIGNMENT: the line must run through the centre of the circles. The track
   pads 4rem (64px); each .timeline-check is absolutely positioned at
   left: -3rem (-48px), so its box starts at x=16px and, being 26px wide,
   centres on x=29px. A 2px line therefore has to start at 28px. It was at
   13px, which ran the line down the circles' left edge instead of through
   them. Change one of these three numbers and you must redo this math. */
.timeline-track {
  position: relative;
  margin-left: 0;
  padding-left: 4rem;
  background-image: linear-gradient(to bottom, var(--green) 0, var(--green) 100%);
  background-size: 2px 100%;
  background-repeat: no-repeat;
  background-position: 28px 0;
}

.timeline-item {
  position: relative;
  padding-bottom: 3rem;
}

.timeline-item:last-child { padding-bottom: 0; }

/* Checkbox/circle centered on the vertical line, with a white halo
   that visually "breaks" the line for a clean inline look. The halo is a
   spread-only shadow (not an offset), so the shadow rule still holds. */
.timeline-check {
  position: absolute;
  left: -3rem;
  top: 0.15rem;
  width: 26px;
  height: 26px;
  background: var(--white);
  border: 2.5px solid var(--green);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  z-index: 2;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 5px var(--white);
}

.timeline-check:hover,
.timeline-check:focus-visible {
  transform: scale(1.08);
  border-color: var(--pink);
  outline: none;
}

.timeline-check::after {
  content: '';
  width: 8px;
  height: 14px;
  border-right: 2.5px solid var(--white);
  border-bottom: 2.5px solid var(--white);
  transform: rotate(45deg) translateY(-2px);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.timeline-item.done .timeline-check {
  background: var(--pink);
  border-color: var(--pink-deep);
}

.timeline-item.done .timeline-check::after { opacity: 1; }

.timeline-item.milestone-urgent .timeline-check { border-color: var(--pink); }

/* LATE state: the ideal window has passed but the trip hasn't started.
   Amber, mirroring the app. Not an error, just "do this now". */
.timeline-item.milestone-late .timeline-check {
  border-color: var(--amber);
  background: var(--amber-soft);
}

.timeline-body { transition: opacity 0.25s ease; }

.timeline-item.done .timeline-body { opacity: 0.45; }

.timeline-item.done .timeline-title {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--pink);
}

.timeline-date {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.timeline-badge {
  background: var(--green);
  color: var(--white);
  padding: 0.15rem 0.5rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.timeline-badge.late { background: var(--amber); }
.timeline-badge.urgent { background: var(--pink); }
.timeline-badge.done { background: var(--pink-deep); }

.timeline-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.35rem;
  line-height: 1.2;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
  color: var(--green);
}

.timeline-late-icon {
  color: var(--amber);
  margin-right: 0.4rem;
  font-size: 1rem;
}

.timeline-desc {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--ink);
  max-width: 58ch;
}

/* Actions row: Learn more toggle + external/affiliate links */
.timeline-actions {
  margin-top: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.timeline-cta {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  background: var(--white);
  border: 1.5px solid var(--green);
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.timeline-cta:hover,
.timeline-cta:focus-visible {
  background: var(--green);
  color: var(--white);
  outline: none;
}

.timeline-cta-secondary {
  color: var(--pink);
  border-color: var(--pink);
}

.timeline-cta-secondary:hover,
.timeline-cta-secondary:focus-visible {
  background: var(--pink);
  color: var(--white);
  border-color: var(--pink);
}

.timeline-learn-more {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem 0;
  transition: color 0.15s ease;
}

.timeline-learn-more:hover,
.timeline-learn-more:focus-visible { color: var(--pink); outline: none; }

.timeline-details {
  display: none;
  margin-top: 0.85rem;
  padding: 1rem 1.25rem;
  background: var(--green-soft);
  border-left: 3px solid var(--green);
  font-family: 'Open Sans', sans-serif;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink);
  max-width: 58ch;
}

.timeline-details.shown { display: block; }

/* Late advice reads amber to match the late milestone marker */
.timeline-item.milestone-late .timeline-details {
  background: var(--amber-soft);
  border-left-color: var(--amber);
}

.timeline-days {
  margin-top: 0.6rem;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.76rem;
  font-style: italic;
  color: var(--muted);
}

/* Trip-active / trip-past status card replaces the whole timeline */
.timeline-status-message {
  padding: 2rem 2.25rem;
  background: var(--green-soft);
  border-left: 4px solid var(--pink);
  margin-left: -4rem;
}

.timeline-status-message h3 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.6rem;
  color: var(--green);
  margin-bottom: 0.75rem;
}

.timeline-status-message h3 em { font-style: italic; color: var(--pink); }

.timeline-status-message p {
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--ink);
  max-width: 58ch;
}

/* Progress bar: inline, flat, border only */
.progress-bar {
  margin-bottom: 2.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--white);
  border: 1.5px solid var(--green);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.progress-label {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--green);
}

.progress-count {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.4rem;
  color: var(--pink);
}

.progress-count .total { color: var(--green); }

.progress-track {
  flex: 1;
  min-width: 200px;
  height: 8px;
  background: var(--green-soft);
  position: relative;
  overflow: hidden;
}

.progress-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  background: var(--pink);
  transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ===== FOOTER ===== */
/* The wordmark row sits in a band between two rules: the section's closing
   border above and .footer-legal's border-top below. padding-top sets the
   space above it, the flex row-gap sets the space below, so the two must
   MATCH for it to read as centred. They were 32/20, which sat it low in the
   band. Both 1.25rem now. */
.footer {
  padding: 1.25rem 0 1.5rem;
  color: var(--green);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.footer-brand {
  font-family: 'Futura', 'Futura PT', 'Jost', 'Trebuchet MS', 'Century Gothic', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
}

.footer-tagline {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--green);
  text-transform: none;
  letter-spacing: 0;
}

.footer-legal {
  padding-top: 1rem;
  border-top: 1px solid var(--green);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--muted);
  text-align: center;
}

.footer-legal a {
  color: var(--green);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.footer-legal a:hover,
.footer-legal a:focus-visible {
  color: var(--pink);
  border-bottom-color: var(--pink);
  outline: none;
}

.footer-sep {
  color: var(--muted);
  opacity: 0.5;
}

/* ===== EMAIL GATE MODAL ===== */
.gate-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 71, 69, 0.88);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.gate-overlay[hidden] { display: none; }

.gate-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Lock body scroll when gate is visible */
body.gate-locked { overflow: hidden; }

/* Floating surface: soft drop shadow, never an offset. */
.gate-card {
  background: var(--white);
  border: 1.5px solid var(--green);
  box-shadow: var(--shadow-float);
  padding: 3rem 2.75rem 2.5rem;
  max-width: 480px;
  width: 100%;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  position: relative;
  transform: translateY(20px) scale(0.98);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.gate-overlay.visible .gate-card { transform: translateY(0) scale(1); }

/* Plain block, no leading dash. (Was a flex row with a ::before rule.)
   Matches .hero-kicker and .reveal-tag: the flanking-rule motif is retired
   everywhere on this page. */
.gate-kicker {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--pink);
  margin-bottom: 1rem;
}

.gate-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--green);
  margin-bottom: 1rem;
}

.gate-title em { font-style: italic; color: var(--pink); }

.gate-body {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 1.75rem;
}

.gate-field { margin-bottom: 1.1rem; }

.gate-field label {
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 0.4rem;
  color: var(--green);
}

.gate-input {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--green);
  background: var(--white);
  font-family: 'Open Sans', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: var(--green);
  outline: none;
  border-radius: 0;
  transition: border-color 0.15s ease;
}

.gate-input:focus { border-color: var(--pink); }

.gate-input::placeholder {
  color: var(--muted);
  font-style: italic;
  font-weight: 400;
}

.gate-submit {
  width: 100%;
  margin-top: 0.75rem;
  padding: 1.05rem;
  background: var(--green);
  color: var(--white);
  border: 1.5px solid var(--green);
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}

.gate-submit span { position: relative; z-index: 2; }

.gate-submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--pink);
  transform: translateY(101%);
  transition: transform 0.25s ease;
  z-index: 1;
}

.gate-submit:hover::before,
.gate-submit:focus-visible::before { transform: translateY(0); }
.gate-submit:hover,
.gate-submit:focus-visible { border-color: var(--pink); outline: none; }

.gate-submit:disabled {
  opacity: 0.6;
  cursor: wait;
}

.gate-error {
  margin-top: 0.85rem;
  padding: 0.65rem 0.9rem;
  background: var(--pink-soft);
  border-left: 3px solid var(--pink);
  font-family: 'Open Sans', sans-serif;
  font-size: 0.85rem;
  color: var(--pink-deep);
  display: none;
}

.gate-error.show { display: block; }

.gate-privacy {
  margin-top: 1rem;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--muted);
  line-height: 1.5;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 500px) {
  .gate-card { padding: 2rem 1.5rem 1.75rem; }
  .gate-title { font-size: 1.6rem; }
}

@media (max-width: 600px) {
  .masthead-back span:not(.back-arrow) { display: none; }
  .masthead-back { padding: 0.5rem 0.75rem; }
}

@media (max-width: 900px) {
  .container { padding: 0 1.5rem; }
  .calc { grid-template-columns: 1fr; gap: 2.5rem; padding: 2.5rem 0; }
  .section-head { grid-template-columns: 1fr; gap: 1rem; }
  .section-intro { grid-column: 1; }
  .section-num { font-size: 2.7rem; }
  .reveal-grid { grid-template-columns: 1fr; }
  .reveal-stat { border-right: none; border-bottom: 1.5px solid var(--green); padding: 1.25rem 0 !important; }
  .reveal-stat:last-child { border-bottom: none; }
  .form-card { padding: 1.75rem; }
  .datepicker { width: 100%; left: 0; right: 0; }
  .airline-row { grid-template-columns: 1fr; }
  .airline-cell { border-right: none; border-bottom: 1px dashed var(--green); }
  .airline-row.header { display: none; }
  .airline-cell::before {
    content: attr(data-label);
    font-family: 'Open Sans', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--pink);
    margin-right: 0.75rem;
    flex: 0 0 90px;
  }
  .timeline-status-message { margin-left: -4rem; padding: 1.5rem; }
  .year-section { padding: 2.5rem 0; }
  .year-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .section-num.start-here { font-size: 2rem; }
  .ym-row { grid-template-columns: 3rem 1fr; }
  .ym-days { gap: 1px; }
  .ym-day { padding: 4px 0; }
  .ym-lane { height: 5px; }
  .ym-num { font-size: 0.6rem; }
  .ym-year { display: block; }
  .app-cta { grid-template-columns: 1fr; padding: 3.5rem 0; }
}

@media (max-width: 600px) {
  .date-pair { grid-template-columns: 1fr; gap: 0; }
  .date-pair .datepicker,
  .date-pair .date-group:last-child .datepicker { width: 100%; left: 0; right: 0; }
}

@media (max-width: 500px) {
  .break-item { grid-template-columns: auto 1fr; }
  .break-actions { grid-column: 2; }
}