/* ==========================================================================
   crown-airport-hero.v1.0.0.css
   Crown Concierge — SHARED companion sheet for every airport-hero page
   (was anna-airport-hero.v1.0.0.css; Anna was first, now every city loads
   this identical file — see PORTING-HANDOFF Section 2)

   Loads AFTER crown-hero.v7.4.0.css. Does not modify it. Everything here is
   scoped under .an-hero (the airport-hero calculator's namespace, used on
   every city page) or the .an-* namespace, so nothing here can reach
   unrelated hero sections elsewhere on the site.

   ── THE STRUCTURAL RULE THIS FILE ENFORCES ──────────────────────────────
   The recurring white-gap bug came from .crown-hero-section collapsing from
   a tall content-driven height to a short one in the same frame that .ch-bg
   (position:absolute; inset:0; background-size:cover) had to resize against
   it. This sheet does not try to make that collapse *smooth*. It makes it
   IMPOSSIBLE:

     1. .an-hero is height-LOCKED to 100svh in every state. Not min-height —
        height + max-height. The section's box is identical in the plan
        state, the result state, the reserve state and the confirmed state.
     2. Because the section never resizes, .ch-bg (whose containing block is
        that section) never resizes either. There is no resize to race.
     3. svh (not vh) means the lock also survives the mobile URL bar
        showing/hiding — a second, unrelated source of hero resize on real
        devices that vh would have reintroduced.
     4. All four views are position:absolute; inset:0 siblings inside a
        fixed-height panel body. Switching views is a pure opacity
        cross-fade. Zero layout mutation occurs anywhere in the tree above
        the internal scroll container when Reserve is clicked.
     5. Content that would overflow the locked height scrolls INSIDE
        .an-scroll. That containment is what buys rule 1.

   The background is NOT position:fixed. The hero remains a normal in-flow
   position:relative block, so header/footer/below-hero stacking on this
   page is untouched (the Frisco fixed-background attempt is not repeated).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. THE HEIGHT LOCK  (the whole point of this file)
   -------------------------------------------------------------------------- */

.crown-hero-section.an-hero {
  /* 57px shaved off 100svh total (18px, then +12px, then +27px once the
     pace step was removed from the outbound flow entirely) so the panel's
     bottom clears the fold under this site's header+breadcrumb height.
     Still one fixed value used everywhere (rule 1's whole point), just a
     different fixed value. NOTE: the .an-head/.an-foot padding trims
     elsewhere are a separate, independent change — they redistribute
     space *within* this fixed box (to/from .an-scroll), they don't
     affect this box's own size. Only this value does that. */
  height: calc(100svh - 57px);
  min-height: calc(100svh - 57px);
  max-height: calc(100svh - 57px);

  display: block;          /* replaces the base flex centering; .an-grid owns layout */
  padding: 0;              /* base padding moves to .an-inner */
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

/* Older engines without svh: dvh is wrong here (it resizes with the URL bar,
   which is exactly what we are trying to avoid), so fall back to vh. */
@supports not (height: 100svh) {
  .crown-hero-section.an-hero {
    height: calc(100vh - 57px);
    min-height: calc(100vh - 57px);
    max-height: calc(100vh - 57px);
  }
}

/* The photo layer. Given a stable, permanently-promoted compositor layer so
   sibling repaints never force it to re-rasterize. Its containing block is
   .an-hero, which by rule 1 never changes size. */
.an-hero .ch-bg {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Slightly deeper right-side scrim than the base sheet: the panel sits on the
   right and needs the photo to recede behind it without a hard edge. */
.an-hero .ch-bg::before {
  background: linear-gradient(
    100deg,
    rgba(4, 4, 4, 0.74) 0%,
    rgba(4, 4, 4, 0.40) 46%,
    rgba(4, 4, 4, 0.20) 72%,
    rgba(4, 4, 4, 0.46) 100%
  );
}

/* --------------------------------------------------------------------------
   2. SHELL / GRID
   -------------------------------------------------------------------------- */

.an-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 40px 48px;
}

.an-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(392px, 42%);
  gap: 56px;
  align-items: center;
  height: 100%;
  min-height: 0;
}

/* Entrance is owned here, not by the base .ch-inner > * rule (which this page
   deliberately does not opt into — see markup, there is no .ch-inner). */
.an-copy,
.an-stage {
  opacity: 0;
  animation: anRise .58s cubic-bezier(.22, .68, .3, 1) forwards;
}
.an-copy  { animation-delay: .08s; }
.an-stage { animation-delay: .20s; }

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

@media (prefers-reduced-motion: reduce) {
  .an-copy, .an-stage { animation: none; opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   3. LEFT COLUMN — editorial copy
   -------------------------------------------------------------------------- */

.an-copy { min-width: 0; }

.an-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(201, 168, 76, 0.11);
  border: 0.5px solid rgba(201, 168, 76, 0.24);
  border-radius: 100px;
  padding: 6px 16px;
  margin-bottom: 24px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold-lt);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.an-badge .an-stars { color: var(--gold); letter-spacing: 2.5px; font-size: 10px; }

.an-h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(40px, 4.6vw, 64px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.012em;
  color: var(--text-warm);
  margin-bottom: 18px;
  max-width: 17ch;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.55);
}
.an-h1 em { font-style: italic; color: var(--gold-lt); }

.an-sub {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.66;
  color: rgba(245, 240, 232, 0.78);
  max-width: 46ch;
  margin-bottom: 30px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.an-ctas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Reuses .an-btn-pri's gold gradient/shadow verbatim (see the shared .an-btn
   block below) — only layout is overridden here, to sit inline at the same
   pill size as .an-cta-ghost rather than the block-level footer treatment
   .an-btn-pri normally gets. */
.an-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: none;
  border-radius: 100px;
  padding: 13px 26px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  text-decoration: none;
  background-image: linear-gradient(135deg, #d9bc60 0%, #c9a84c 52%, #b3923c 100%);
  color: #0a0a0a;
  box-shadow: 0 4px 18px rgba(201, 168, 76, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.26);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: transform .12s, box-shadow .2s;
}
.an-cta-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 24px rgba(201, 168, 76, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
.an-cta-primary:active { transform: translateY(0) scale(.99); }

.an-cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 100px;
  padding: 13px 24px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text);
  text-decoration: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background .18s, border-color .18s, transform .12s;
}
.an-cta-ghost:hover {
  background: rgba(201, 168, 76, 0.12);
  border-color: rgba(226, 201, 126, 0.5);
  transform: translateY(-1px);
}
.an-cta-ghost svg { width: 14px; height: 14px; color: var(--gold); }

.an-proof {
  display: flex;
  gap: 0;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.10);
}
.an-proof-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  flex: 1;
  min-width: 0;
}
.an-proof-item:first-child { padding-left: 0; border-left: none; }
.an-proof-icon { width: 21px; height: 21px; color: var(--gold); flex-shrink: 0; }
.an-proof-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.an-proof-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--text);
  line-height: 1.25;
  white-space: nowrap;
}
.an-proof-sub {
  font-size: 10.5px;
  letter-spacing: .02em;
  color: var(--t60);
  font-weight: 500;
  line-height: 1.3;
}

/* 4th item — BBB badge stands alone (no accompanying label — text made the
   column too wide). Sized larger than the 30px icon-row height since it no
   longer needs to share visual weight with a two-line text block; centered
   in its column so it doesn't look adrift without text to left-align against.

   Width/height are also set as HTML attributes directly on the <img>
   (inline wins over any external stylesheet, !important included) — see
   the fix history below for why that matters on this theme specifically. */
.an-proof-bbb { justify-content: center; }
.an-bbb-inline { flex-shrink: 0; line-height: 0; display: block; }
.an-bbb-inline img {
  display: block;
  width: 117px !important;
  height: 38px !important;
  max-width: 117px !important;
  object-fit: contain;
  width: auto;
  border: 0;
  opacity: .9;
  transition: opacity .16s;
}
.an-bbb-inline:hover img { opacity: 1; }

/* --------------------------------------------------------------------------
   4. THE PANEL — fixed box, four cross-faded views
   -------------------------------------------------------------------------- */

.an-stage {
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.an-panel {
  width: 100%;
  max-width: 540px;

  /* FIXED height. Does not vary by view. This is what keeps .an-hero's
     content from ever demanding a different section height. */
  height: min(100%, 748px);

  display: flex;
  flex-direction: column;
  min-height: 0;

  background:
    linear-gradient(163deg, rgba(255, 248, 235, 0.075) 0%, rgba(201, 168, 76, 0.05) 44%, rgba(255, 248, 235, 0.028) 100%),
    rgba(14, 13, 11, 0.72);
  border: 1px solid rgba(226, 201, 126, 0.26);
  border-radius: 20px;
  overflow: hidden;
  backdrop-filter: blur(34px) saturate(165%);
  -webkit-backdrop-filter: blur(34px) saturate(165%);
  box-shadow:
    0 4px 20px rgba(201, 168, 76, 0.10),
    0 28px 76px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Hairline shimmer across the panel's top edge. */
.an-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(226, 201, 126, 0.85), transparent);
  background-size: 200% 100%;
  animation: anShimmer 6s ease-in-out infinite;
  z-index: 4;
  pointer-events: none;
}
.an-panel { position: relative; }
@keyframes anShimmer {
  0%   { background-position: 200% 0; opacity: .3; }
  50%  { background-position: 0% 0;   opacity: 1; }
  100% { background-position: -200% 0; opacity: .3; }
}
@media (prefers-reduced-motion: reduce) { .an-panel::before { animation: none; opacity: .55; } }

/* ── Panel head: constant across all views. Only its text changes. ── */
.an-head {
  flex: 0 0 auto;
  padding: 18px 26px 13px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.09);
  text-align: center;
}
.an-head-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 7px;
}
.an-head-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 25px;
  font-weight: 300;
  line-height: 1.08;
  color: var(--text-warm);
}
.an-head-title em { font-style: italic; color: var(--gold-lt); }
.an-head-link {
  display: inline-block;
  margin-top: 8px;
  background: none;
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 11.5px;
  color: var(--gold-lt);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(226, 201, 126, 0.35);
  text-underline-offset: 3px;
  transition: color .16s;
}
.an-head-link:hover { color: var(--text-warm); }
.an-head-link[hidden] { display: none; }

/* ── Body: the only place any of the four views live. Fixed box. ── */
.an-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

/* Bottom scroll-fade so a cut-off row reads as "more below" not "broken". */
.an-body::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 34px;
  background: linear-gradient(to top, rgba(14, 13, 11, 0.85), transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
  z-index: 2;
}
.an-body.is-scrollable::after { opacity: 1; }

.an-view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;

  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.an-view.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .30s ease .07s, transform .30s cubic-bezier(.22,.68,.3,1) .07s, visibility 0s;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .an-view, .an-view.is-active { transition: opacity .01s linear; transform: none; }
}

.an-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 18px 26px 22px;
  scrollbar-width: thin;
  scrollbar-color: rgba(226, 201, 126, 0.28) transparent;
}
.an-scroll::-webkit-scrollbar { width: 6px; }
.an-scroll::-webkit-scrollbar-track { background: transparent; }
.an-scroll::-webkit-scrollbar-thumb {
  background: rgba(226, 201, 126, 0.24);
  border-radius: 100px;
}
.an-scroll::-webkit-scrollbar-thumb:hover { background: rgba(226, 201, 126, 0.42); }

.an-foot {
  flex: 0 0 auto;
  padding: 11px 26px;
  padding-bottom: max(13px, env(safe-area-inset-bottom, 13px));
  border-top: 0.5px solid rgba(255, 255, 255, 0.09);
  background: rgba(8, 8, 7, 0.42);
  z-index: 3;
}

/* Arrival-only baggage checkbox — replaces what used to be a full step
   with two large tiles. High-contrast per the request: white border,
   solid gold fill when checked, not a subtle default browser checkbox. */
.an-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  color: var(--text-warm);
  line-height: 1.4;
}
.an-check[hidden] { display: none; }
.an-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  position: relative;
  transition: background .16s, border-color .16s;
}
.an-check input[type="checkbox"]:checked {
  background: var(--gold);
  border-color: var(--gold);
}
.an-check input[type="checkbox"]:checked::after {
  content: '\2713';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #1a1712;
}
.an-check small { color: var(--t60); font-weight: 400; }

/* --------------------------------------------------------------------------
   5. DIRECTION TOGGLE
   -------------------------------------------------------------------------- */

.an-dir {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 0.5px solid rgba(255, 255, 255, 0.10);
  border-radius: 100px;
  padding: 4px;
  margin-bottom: 20px;
}
.an-dir-btn {
  background: transparent;
  border: none;
  border-radius: 100px;
  padding: 9px 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--t60);
  cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s;
}
.an-dir-btn:hover { color: var(--text); }
.an-dir-btn[aria-selected="true"] {
  background: rgba(201, 168, 76, 0.18);
  color: var(--gold-lt);
  box-shadow: inset 0 0 0 0.5px rgba(226, 201, 126, 0.4);
}

/* --------------------------------------------------------------------------
   6. STEPS  (numbered badges removed 2026-08-29 — per feedback, they made
      this read as a survey rather than a booking form. The counter-based
      renumbering-on-hide cleverness went with them; not needed once
      there's nothing to number.)
   -------------------------------------------------------------------------- */

.an-step { margin-bottom: 22px; }
.an-step:last-child { margin-bottom: 4px; }
.an-step[hidden] { display: none; }

.an-step-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 11px;
}

.an-step-lbl {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ── Choice tiles (airport / buffer / deplane) ── */
.an-choices { display: grid; gap: 6px; }
.an-choices.cols-2 { grid-template-columns: 1fr 1fr; }
.an-choices.cols-3 { grid-template-columns: repeat(3, 1fr); }

.an-choice {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 9px;
  padding: 8px 8px;
  text-align: center;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: background .18s, border-color .18s, transform .12s, box-shadow .18s;
}
.an-choice:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.26);
  transform: translateY(-1px);
}
.an-choice[aria-pressed="true"] {
  background: rgba(201, 168, 76, 0.11);
  border-color: rgba(226, 201, 126, 0.66);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.10), 0 4px 16px rgba(201, 168, 76, 0.14);
}
.an-choice[aria-pressed="true"]::after {
  content: '✓';
  position: absolute;
  top: 5px; right: 7px;
  font-size: 10px;
  color: var(--gold-lt);
  line-height: 1;
}
.an-choice-k {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-warm);
  letter-spacing: .01em;
  margin-bottom: 2px;
}
.an-choice[aria-pressed="true"] .an-choice-k { color: var(--gold-lt); }
.an-choice-v {
  display: block;
  font-size: 8.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--t60);
  font-weight: 500;
}

/* ── Inline confirmation chip under a completed step ── */
.an-chip {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
  padding: 9px 13px;
  background: rgba(201, 168, 76, 0.07);
  border: 0.5px solid rgba(226, 201, 126, 0.26);
  border-radius: 9px;
  font-size: 12px;
  color: var(--t85);
  line-height: 1.4;
}
.an-chip.on { display: flex; }
.an-chip .an-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(226, 201, 126, 0.7);
}
.an-chip b { color: var(--gold-lt); font-weight: 600; }

/* ── Fields ── */
.an-fieldrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.an-fieldrow.one { grid-template-columns: 1fr; }
.an-field { display: flex; flex-direction: column; min-width: 0; }
.an-field-lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--t72);
  margin-bottom: 6px;
}
.an-field-lbl .an-opt { color: var(--t38); font-weight: 400; letter-spacing: .04em; text-transform: none; }

.an-hero .an-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9px;
  padding: 11px 13px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  outline: none;
  caret-color: var(--gold);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.an-hero .an-input::placeholder { color: rgba(245, 240, 232, 0.34); font-weight: 300; }
.an-hero .an-input:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.24); }
.an-hero .an-input:focus {
  border-color: rgba(226, 201, 126, 0.68);
  background: rgba(201, 168, 76, 0.07);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.16), 0 0 0 3px rgba(201, 168, 76, 0.15);
}
.an-hero .an-input.is-ok {
  border-color: var(--success-bdr);
  background: var(--success-bg);
}
.an-hero input.an-input[type="date"],
.an-hero input.an-input[type="time"] { -webkit-text-fill-color: var(--text); padding-right: 8px; }
.an-hero input.an-input[type="date"]::-webkit-calendar-picker-indicator,
.an-hero input.an-input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(.55);
  cursor: pointer;
}
.an-field-hint { font-size: 10.5px; color: var(--t38); margin-top: 5px; line-height: 1.4; }

/* ── Address autocomplete ── */
.an-ac { position: relative; }
.an-sugs {
  position: absolute;
  top: calc(100% + 5px);
  left: 0; right: 0;
  background: rgba(10, 10, 10, 0.98);
  border: 0.5px solid var(--bdr-mid);
  border-radius: 11px;
  overflow: hidden;
  z-index: 60;
  display: none;
  max-height: 216px;
  overflow-y: auto;
  backdrop-filter: blur(20px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.68);
}
.an-sugs.on { display: block; }
.an-sug {
  padding: 11px 15px;
  font-size: 12.5px;
  color: var(--t60);
  cursor: pointer;
  border-bottom: 0.5px solid var(--bdr);
  text-align: left;
  line-height: 1.35;
}
.an-sug:last-child { border-bottom: none; }
.an-sug:hover, .an-sug.is-hi { background: rgba(201, 168, 76, 0.10); color: var(--text); }
.an-sug b { color: var(--text); font-weight: 500; display: block; }
.an-sug small { font-size: 11px; color: var(--t38); }

/* ── Passenger stepper ── */
.an-stepper {
  display: flex;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9px;
  overflow: hidden;
}
.an-stepper button {
  width: 38px;
  background: transparent;
  border: none;
  color: var(--gold-lt);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background .16s, color .16s;
}
.an-stepper button:hover:not(:disabled) { background: rgba(201, 168, 76, 0.14); }
.an-stepper button:disabled { color: var(--t22); cursor: not-allowed; }
.an-stepper output {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  padding: 11px 0;
}

/* --------------------------------------------------------------------------
   7. RESULT VIEW — the "Leave by" plan
   -------------------------------------------------------------------------- */

/* ── Two-time choice (result screen, outbound only) ──
   Redesigned again 2026-08-29: selectable rows rather than a full
   "Leave by [huge time] + its own button" block per option. The times
   stay prominent (~34px, roughly half the 68px verdict treatment) so
   they're still the thing you read first, but two of them plus one
   shared CTA now fit the card without crowding. "Leave by" is kept
   deliberately — at this size, a bare "2:40 AM" reads ambiguously as a
   flight time rather than a leave-the-house time. */
.an-time-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 11px;
  padding: 12px 14px;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: background .18s, border-color .18s, box-shadow .18s;
}
.an-time-option + .an-time-option { margin-top: 8px; }
.an-time-option:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.26);
}
.an-time-option[aria-pressed="true"] {
  background: rgba(201, 168, 76, 0.11);
  border-color: rgba(226, 201, 126, 0.66);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.10);
}

/* Radio affordance — makes "these are alternatives, pick one" legible
   at a glance rather than inferred from the highlight alone.
   align-items:center on the row centers against the FULL body (time +
   note stacked), which visually lands high relative to the time text
   specifically once the row shrank to two lines — switched to
   flex-start + a calculated margin-top that centers against the time
   line alone: label removed, so the time line starts at 0; its line-box
   is 34px * 1.02 \u2248 35px tall, radio is 17px, so (35-17)/2 \u2248 9px. */
.an-time-radio {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 9px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.32);
  position: relative;
  transition: border-color .18s;
}
.an-time-option[aria-pressed="true"] .an-time-radio { border-color: var(--gold-lt); }
.an-time-option[aria-pressed="true"] .an-time-radio::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold-lt);
}

.an-time-body { min-width: 0; flex: 1; }
.an-time-big {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 34px;
  font-weight: 300;
  line-height: 1.02;
  color: var(--gold-lt);
  letter-spacing: -.015em;
  text-shadow: 0 0 30px rgba(226, 201, 126, 0.22);
}
.an-time-big .an-ampm { font-size: .48em; letter-spacing: .04em; margin-left: .1em; }
.an-time-note {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--t60);
  margin-top: 3px;
}

/* Fallback link, moved out of the card header to below the CTA so it
   stops pushing the whole flow down (per the layout note that prompted
   this pass). */
.an-time-alt {
  display: block;
  width: 100%;
  margin-top: 10px;
  background: none;
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 11.5px;
  color: var(--t60);
  cursor: pointer;
  text-align: center;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.22);
  text-underline-offset: 3px;
  transition: color .16s;
}
.an-time-alt:hover { color: var(--text-warm); }
.an-time-alt[hidden] { display: none; }

/* Static reassurance block below the time rows — fills the space the
   fare would occupy if it were available this early (it isn't; see the
   markup comment). No dynamic content, no JS. */
/* Generic icon+text info rows — originally built for the outbound
   choice screen's reassurance block, reused verbatim (2026-08-29) for
   arrival's simplified result summary. Renamed from .an-time-assure*
   since it's no longer time-choice-specific. */
.an-info-rows {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.10);
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.an-info-row {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  line-height: 1.35;
  color: var(--t68);
}
.an-info-row svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--gold);
}
.an-info-row b { color: var(--text-warm); font-weight: 600; }

/* Simple bullet line — single line, a colored dot instead of an icon.
   Matches the homepage booking widget's "Premium Black SUV recommended"
   treatment more directly than the icon-row style above. */
.an-bullet {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  color: var(--t72);
  margin-bottom: 8px;
}
.an-bullet:last-child { margin-bottom: 0; }
.an-bullet-dot {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  transform: translateY(-2px);
}
.an-bullet b { color: var(--text-warm); font-weight: 600; }

/* Hero fare — the price as the dominant element, per the homepage
   widget reference. Vertical stack (label / huge price / caption)
   rather than the horizontal .an-farebar split-row used elsewhere;
   arrival gets this instead of .an-farebar, everything else keeps the
   smaller horizontal treatment (not complained about, left as-is). */
.an-fare-hero {
  position: relative;
  text-align: center;
  margin-top: 18px;
  padding: 16px 15px;
  background: rgba(201, 168, 76, 0.07);
  border: 0.5px solid rgba(226, 201, 126, 0.26);
  border-radius: 11px;
}
.an-fare-hero-crown {
  position: absolute;
  top: 12px;
  right: 14px;
  display: block;
  width: 28px;
  height: 28px;
  opacity: .9;
}
.an-fare-hero-v {
  font-family: 'Cormorant Garamond', serif;
  font-size: 46px;
  font-weight: 400;
  line-height: 1;
  color: var(--gold-lt);
  text-shadow: 0 0 34px rgba(226, 201, 126, 0.24);
  margin-bottom: 8px;
}
.an-fare-hero-v.is-calc { font-size: 18px; color: var(--t38); font-family: 'DM Sans', sans-serif; font-weight: 400; }
.an-fare-hero-k {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-lt);
}
.an-fare-hero-sub {
  font-size: 11px;
  color: var(--t60);
  margin-top: 9px;
}

.an-verdict { text-align: center; padding: 6px 0 20px; }
.an-verdict-lbl {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--t60);
  margin-bottom: 6px;
}
.an-verdict-time {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(50px, 8vw, 68px);
  font-weight: 300;
  line-height: .96;
  color: var(--gold-lt);
  letter-spacing: -.015em;
  text-shadow: 0 0 44px rgba(226, 201, 126, 0.28);
}
.an-verdict-time .an-ampm { font-size: .46em; letter-spacing: .04em; margin-left: .1em; }
.an-verdict-day {
  font-size: 12px;
  color: var(--t68);
  margin-top: 9px;
  letter-spacing: .03em;
}

.an-ledger {
  border-top: 0.5px solid rgba(255, 255, 255, 0.10);
  padding-top: 4px;
}
.an-ledger-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.07);
  font-size: 13px;
}
.an-ledger-row:last-child { border-bottom: none; }
.an-ledger-k { color: var(--t68); }
.an-ledger-v { color: var(--text-warm); font-weight: 600; white-space: nowrap; }
.an-ledger-note {
  font-size: 10.5px;
  color: var(--t38);
  line-height: 1.5;
  margin-top: 11px;
}

.an-farebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 13px 15px;
  background: rgba(201, 168, 76, 0.07);
  border: 0.5px solid rgba(226, 201, 126, 0.26);
  border-radius: 11px;
}
.an-farebar-k {
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--t72);
}
.an-farebar-sub { font-size: 10.5px; color: var(--t38); margin-top: 3px; }
.an-farebar-v {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  font-weight: 400;
  color: var(--gold-lt);
  line-height: 1;
  white-space: nowrap;
}
.an-farebar-v.is-calc { font-size: 15px; color: var(--t38); font-family: 'DM Sans', sans-serif; font-weight: 400; }

/* Choice screen specifically gets a larger, heavier fare — per Lucas,
   this needs to be the clear focal point of that section since it's the
   first real price the visitor sees. Scoped so the reserve/confirmed
   screens' fare (already established, not complained about) stays as-is. */
#anTimeChoiceFare .an-farebar-v { font-size: 40px; font-weight: 500; }

/* --------------------------------------------------------------------------
   8. RESERVE VIEW — the merged card
   Route summary + fare + form live in ONE continuous scroll column. The
   plan ledger is not stacked above it; it collapses into the one-line
   .an-recap-when and is re-openable via .an-recap-toggle.
   -------------------------------------------------------------------------- */

.an-recap {
  padding: 14px 15px;
  background: rgba(255, 255, 255, 0.045);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 13px;
  margin-bottom: 18px;
}
.an-recap-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}
.an-recap-route { min-width: 0; }
.an-recap-a, .an-recap-b {
  font-size: 13.5px;
  color: var(--text-warm);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.an-recap-b { display: flex; align-items: baseline; gap: 7px; margin-top: 5px; }
.an-recap-b .an-arrow { color: var(--gold); font-size: 12px; flex-shrink: 0; }
.an-recap-when {
  font-size: 12px;
  color: var(--t68);
  margin-top: 8px;
  letter-spacing: .02em;
}
.an-recap-when b { color: var(--gold-lt); font-weight: 600; }

/* Result view only: flatten the trip summary from three stacked lines
   (address / arrow+airport / edit link) into one wrapping line, to buy
   back vertical room on the time-choice screen. Scoped to
   .an-result-confirm deliberately — the reserve view reuses these same
   .an-recap-* classes and still wants the taller stacked treatment. */
.an-result-confirm {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.10);
}
.an-result-confirm .an-recap-a,
.an-result-confirm .an-recap-b { font-size: 12.5px; margin-top: 0; }
.an-result-confirm .an-recap-b { gap: 6px; }
.an-result-confirm .an-result-edit { margin-top: 0; font-size: 11px; }
.an-recap-fare { text-align: right; flex-shrink: 0; }
.an-recap-fare-k {
  font-size: 9.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--t72);
  margin-bottom: 3px;
}
.an-recap-fare-v {
  font-family: 'Cormorant Garamond', serif;
  font-size: 34px;
  font-weight: 400;
  color: var(--gold-lt);
  line-height: 1;
}
.an-recap-fare-sub {
  font-size: 9.5px;
  color: var(--t38);
  line-height: 1.4;
  margin-top: 4px;
  max-width: 15ch;
  margin-left: auto;
}

.an-recap-acts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.09);
}
.an-linkbtn {
  background: none;
  border: none;
  padding: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 11.5px;
  color: var(--t60);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(245, 240, 232, 0.22);
  text-underline-offset: 3px;
  transition: color .16s;
}
.an-linkbtn:hover { color: var(--gold-lt); }

.an-recap-detail { display: none; margin-top: 11px; }
.an-recap-detail.on { display: block; animation: anFade .22s ease; }
@keyframes anFade { from { opacity: 0; } to { opacity: 1; } }

.an-formhd {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.an-form > .an-fieldrow { margin-bottom: 11px; }

/* ── Phone with country code (reuses the base sheet's .ch-cc-* dropdown) ── */
.an-phone { display: flex; align-items: stretch; position: relative; }
.an-phone .an-input {
  flex: 1;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
  min-width: 0;
}
.an-cc {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-right: none;
  border-radius: 9px 0 0 9px;
  padding: 0 11px;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .16s, border-color .16s;
}
.an-cc:hover { background: rgba(255, 255, 255, 0.08); }
.an-cc[aria-expanded="true"] { border-color: rgba(226, 201, 126, 0.66); }
.an-cc-flag { font-size: 16px; line-height: 1; }
.an-cc-code { font-size: 12px; color: var(--t60); }
.an-cc-caret { font-size: 8px; color: var(--t38); }

.an-ccdd {
  display: none;
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  width: min(330px, 100%);
  max-height: 300px;
  background: rgba(10, 10, 10, 0.98);
  border: 0.5px solid var(--bdr-mid);
  border-radius: 11px;
  overflow: hidden;
  z-index: 70;
  backdrop-filter: blur(20px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7);
  flex-direction: column;
}
.an-ccdd.on { display: flex; }
.an-hero .an-ccdd-search {
  background: rgba(255, 255, 255, 0.04);
  border: none;
  border-bottom: 0.5px solid var(--bdr);
  border-radius: 0;
  padding: 10px 14px;
  font-size: 13px;
  box-shadow: none;
}
.an-hero .an-ccdd-search:focus { background: rgba(255, 255, 255, 0.06); box-shadow: none; }
.an-ccdd-list { overflow-y: auto; max-height: 246px; }
.an-ccopt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  font-size: 13px;
  color: var(--t60);
  transition: background .12s;
}
.an-ccopt:hover, .an-ccopt.is-hi { background: rgba(201, 168, 76, 0.09); color: var(--text); }
.an-ccopt.is-sel { color: var(--gold-lt); }
.an-ccopt-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-ccopt-code { font-size: 11px; color: var(--t38); }

/* ── Consent ── */
.an-consent { display: flex; align-items: flex-start; gap: 8px; margin: 13px 0 4px; }
.an-consent input[type="checkbox"] {
  margin-top: 2px;
  width: 15px; height: 15px;
  flex-shrink: 0;
  accent-color: var(--gold);
  cursor: pointer;
}
.an-consent label { font-size: 11.5px; color: #e6ddc8; line-height: 1.45; cursor: pointer; }
.an-consent a {
  color: var(--t72);
  text-decoration: underline;
  text-decoration-color: rgba(245, 240, 232, 0.24);
  text-underline-offset: 2px;
}
.an-consent a:hover { color: var(--gold-lt); }

/* --------------------------------------------------------------------------
   9. BUTTONS / BANNERS / DONE
   -------------------------------------------------------------------------- */

.an-btn {
  width: 100%;
  display: block;
  border: none;
  border-radius: 11px;
  padding: 15px 18px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .03em;
  cursor: pointer;
  text-align: center;
  transition: transform .12s, box-shadow .2s, background .2s, opacity .2s;
}
.an-btn[hidden] { display: none; }
.an-btn-pri {
  background-image: linear-gradient(135deg, #d9bc60 0%, #c9a84c 52%, #b3923c 100%);
  color: #0a0a0a;
  box-shadow: 0 4px 18px rgba(201, 168, 76, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.26);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.14);
}
.an-btn-pri:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 7px 24px rgba(201, 168, 76, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
.an-btn-pri:active:not(:disabled) { transform: translateY(0) scale(.99); }
.an-btn-pri:disabled {
  cursor: not-allowed;
  background-image: linear-gradient(135deg, #6e5d2e 0%, #63552b 52%, #574a26 100%);
  color: rgba(255, 248, 236, 0.44);
  box-shadow: none;
  text-shadow: none;
}
.an-btn-sec {
  background: rgba(255, 255, 255, 0.045);
  color: rgba(226, 201, 126, 0.86);
  border: 1px solid rgba(226, 201, 126, 0.30);
  font-size: 12.5px;
  font-weight: 600;
  padding: 12px 18px;
  margin-top: 8px;
}
.an-btn-sec:hover:not(:disabled) {
  background: rgba(201, 168, 76, 0.11);
  border-color: rgba(226, 201, 126, 0.55);
  color: var(--gold-lt);
}
.an-btn.is-busy { pointer-events: none; opacity: .72; }

.an-foot-note {
  font-size: 10.5px;
  color: var(--t60);
  text-align: center;
  line-height: 1.45;
  margin-top: 10px;
}
.an-foot-note b { color: var(--t85); font-weight: 600; }

.an-banner {
  display: none;
  padding: 10px 13px;
  border-radius: 9px;
  font-size: 12px;
  line-height: 1.45;
  margin-bottom: 12px;
}
.an-banner.on { display: block; animation: anFade .2s ease; }
.an-banner.is-err {
  background: rgba(200, 50, 50, 0.10);
  border: 0.5px solid rgba(200, 50, 50, 0.26);
  color: var(--err);
}
.an-banner.is-ok {
  background: rgba(50, 180, 100, 0.09);
  border: 0.5px solid rgba(50, 180, 100, 0.22);
  color: #6fda9e;
}

.an-done { text-align: center; padding: 26px 6px; }
.an-done-icon {
  width: 56px; height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(201, 168, 76, 0.14);
  border: 0.5px solid rgba(226, 201, 126, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--gold-lt);
  box-shadow: 0 0 30px rgba(201, 168, 76, 0.22);
}
.an-done-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 27px;
  font-weight: 300;
  color: var(--text-warm);
  margin-bottom: 11px;
}
.an-done-body {
  font-size: 13.5px;
  color: var(--t68);
  line-height: 1.62;
  max-width: 36ch;
  margin: 0 auto 18px;
}
.an-done-body b { color: var(--gold-lt); font-weight: 600; }
.an-done-note {
  font-size: 11px;
  color: var(--t38);
  line-height: 1.55;
  max-width: 38ch;
  margin: 0 auto;
  padding-top: 15px;
  border-top: 0.5px solid var(--bdr);
}

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

/* --------------------------------------------------------------------------
   10. RESPONSIVE
   The hero stays height-locked at every breakpoint. Only the internal
   distribution changes — never the section box.
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .an-inner { padding: 32px 32px; }
  .an-grid { grid-template-columns: minmax(0, 1fr) minmax(370px, 46%); gap: 34px; }
  .an-h1 { font-size: clamp(34px, 4.4vw, 50px); }
  .an-proof { display: none; }
}

@media (max-width: 860px) {
  .an-inner { padding: 14px 16px 12px; }

  /* Single column, copy on top, panel takes every remaining pixel.
     Note: the copy block is NEVER collapsed or hidden on state change.
     There is no ch-quote-active-style mutation on this page. What you see
     at load is what you see at confirmation — only the panel's contents
     cross-fade. */
  .an-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
  }

  .an-copy { text-align: center; }
  .an-badge {
    margin-bottom: 10px;
    padding: 4px 12px;
    font-size: 9px;
    letter-spacing: .11em;
  }
  .an-h1 {
    font-size: clamp(23px, 6.2vw, 30px);
    line-height: 1.08;
    margin: 0 auto 6px;
    max-width: 20ch;
  }
  .an-sub, .an-ctas, .an-proof { display: none; }

  .an-stage { align-items: stretch; justify-content: center; }
  .an-panel { max-width: 100%; height: 100%; border-radius: 18px; }

  .an-head { padding: 14px 18px 11px; }
  .an-head-title { font-size: 20px; }
  .an-head-eyebrow { font-size: 9px; margin-bottom: 5px; }

  .an-scroll { padding: 14px 18px 18px; }
  .an-foot { padding: 12px 18px; padding-bottom: max(12px, env(safe-area-inset-bottom, 12px)); }

  .an-step { margin-bottom: 18px; }

  /* Fix #5 — mobile-only progressive reveal. Matches Frisco's own
     crown-airport-hero.v1.0.0.js/.css mechanism: max-height/opacity/margin
     collapse driven by an-step-open, with an-step-settled added ~460ms
     later (see openStep() in the JS) so overflow can safely go visible —
     switching to visible immediately would let the address autocomplete
     dropdown clip during the collapse animation itself. This block exists
     ONLY inside this media query on purpose: nothing here has any effect
     above 860px, where every step already shows at once and stays that
     way, unchanged, per the brief. */
  .an-step {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-bottom: 0;
    transition: max-height .42s cubic-bezier(.22, .61, .36, 1),
                opacity .3s ease .08s,
                margin-bottom .42s cubic-bezier(.22, .61, .36, 1);
  }
  .an-step.an-step-open {
    max-height: 420px;
    opacity: 1;
    margin-bottom: 18px;
  }
  .an-step.an-step-open.an-step-settled {
    overflow: visible;
  }

  @media (prefers-reduced-motion: reduce) {
    .an-step { transition: none; }
  }

  .an-choice { padding: 10px 7px; }
  .an-choice-k { font-size: 14.5px; }
  .an-choice-v { font-size: 8.5px; letter-spacing: .08em; }

  .an-verdict { padding: 2px 0 15px; }
  .an-verdict-time { font-size: clamp(44px, 13vw, 58px); }
  .an-ledger-row { padding: 9px 0; font-size: 12.5px; }

  .an-recap-fare-v { font-size: 29px; }
  .an-fieldrow { grid-template-columns: 1fr; gap: 9px; }

  /* iOS zooms any input under 16px on focus, which visually shifts the whole
     page. Not a hero resize, but it looks like one — so we avoid it. */
  .an-hero .an-input { font-size: 16px; padding: 11px 12px; }
  .an-btn { padding: 15px 16px; }
}

/* Short/landscape phones: the panel is already scroll-contained, but trim
   chrome so the primary action stays reachable without scrolling. */
@media (max-height: 620px) and (max-width: 860px) {
  .an-badge { display: none; }
  .an-h1 { font-size: 19px; margin-bottom: 4px; }
  .an-head { padding: 10px 18px 8px; }
  .an-head-title { font-size: 17px; }
  .an-verdict-time { font-size: 40px; }
}

/* --------------------------------------------------------------------------
   11. PORTED ELEMENTS (v1.0.0 — carried over from the previous Anna block)

   Placement rule for everything in this section: it lives either inside
   .an-scroll or inside .an-foot. Both sit below the fixed-height .an-panel,
   so adding, opening or resizing any of it costs internal scroll height and
   nothing else. None of it can reach the hero's box.
   -------------------------------------------------------------------------- */

/* .an-sub-extra (neighborhood-copy span) intentionally removed from every
   city's hero markup — it was costing ~2 lines / ~53px above the trust
   strip, and per the note this class used to carry, that copy belongs in a
   real crawlable section below the hero for SEO purposes anyway, not a
   hero subhead that's hidden on mobile. Each city's neighborhood sentence
   (Anna: Town Square/West Crossing/Hurricane Creek; Frisco: The
   Star/Frisco Square/Stonebriar/Legacy West) is preserved as an HTML
   comment in that page's block, not deleted — still needs a real home
   below the hero, on every ported page, not just these two. */

/* Form footer — BBB badge moved up into .an-proof (the trust strip under the
   headline), so this is deliberately text-only now: "no card required" reads
   stronger alone than sharing space with a badge at high-intent moments. */
.an-foot-row {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.an-foot-row .an-foot-note {
  margin-top: 0;
  text-align: left;
  flex: 1;
  min-width: 0;
}