/* ================= Hero ================= */
/* #hero keeps the vertical rhythm; .hero-inner (an .section-inner) owns the two-column
   composition and is what actually gets capped/centered to leave the Navie lane. */
#hero { padding-top: 190px; padding-bottom: 110px; }
.hero-inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; }

/* Vertical rhythm tuned for a slower, more editorial read than the default component
   spacing gives — each gap widened a little so the headline reads as the one dominant
   move, not a stack of equally-weighted lines. */
.hero-copy .eyebrow { margin-bottom: 22px; }
.hero-copy h1 { margin-bottom: 26px; }
.hero-copy p.lead { font-size: 19px; max-width: 460px; margin: 0 0 36px; }
.hero-ctas { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 44px; }
/* Secondary CTA stays the same shape/copy, just visually quieter than the solid primary. */
.hero-ctas .btn-ghost { color: var(--ink-soft); }
.hero-points { display: flex; gap: 28px; flex-wrap: wrap; }
.hero-point { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.hero-point .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

.hero-visual { position: relative; }
.hero-visual::before {
  content: ''; position: absolute; width: 440px; height: 440px; border-radius: 50%;
  background: radial-gradient(circle, rgba(184,137,62,0.14), transparent 70%); top: -10%; right: -12%; z-index: 0;
}
/* The frame reads as a held artifact rather than a floating dashboard screenshot: a
   hairline gold edge, a second soft gold-tinted shadow underneath the existing one, and
   four small corner ticks (the cartographic register-mark language used nowhere else on
   the page yet, but consistent with the compass/route motif already in the brand). */
/* aspect-ratio overridden from the shared 4:3 (components.css) to 9:16: the hero demo
   video is a portrait phone-screen recording (1072x1904), and forcing it into a
   landscape frame with object-fit:cover left large black bars either side — this is the
   one Hero dimension change made, and only because the video genuinely required it (see
   index.html's video comment). max-width sized so the resulting height roughly matches
   .hero-copy's natural height at desktop, keeping the two-column balance intact. */
.hero-visual .video-frame {
  position: relative; z-index: 2; max-width: 310px; margin: 0 auto;
  aspect-ratio: 9 / 16;
  border: 1px solid rgba(184,137,62,0.25);
  box-shadow: var(--shadow), 0 10px 46px -18px rgba(184,137,62,0.28);
}
.hero-visual .video-frame::before {
  content: ''; position: absolute; inset: 13px; z-index: 4; pointer-events: none;
  background:
    linear-gradient(to right, rgba(236,224,199,0.8) 13px, transparent 0) top left / 13px 1.5px no-repeat,
    linear-gradient(to bottom, rgba(236,224,199,0.8) 13px, transparent 0) top left / 1.5px 13px no-repeat,
    linear-gradient(to left, rgba(236,224,199,0.8) 13px, transparent 0) bottom right / 13px 1.5px no-repeat,
    linear-gradient(to top, rgba(236,224,199,0.8) 13px, transparent 0) bottom right / 1.5px 13px no-repeat;
}
/* Badges keep Phase 2A's icon treatment but stop bobbing — with Navie's idle drift and
   the ambient particles already moving, a third simultaneous motion on static proof
   chips read as decoration rather than product truth. */
.hero-visual .float-badge { animation: none; }
.hero-fb-1 { top: -6%; left: -8%; }
.hero-fb-2 { bottom: 10%; right: -12%; }

/* ================= Problem / Solution ================= */
/* 760px is narrower than the lane-driven cap at most widths, but not guaranteed at every
   tablet lane tier (confirmed: at ~1000px the 160px lane tier leaves less margin than a
   flat 760px assumes, and the safe-zone fallback in js/navie.js can't rescue it because
   the true edge itself isn't clear either). Capping against the lane the same way
   .section-inner does removes the fixed-width assumption instead of patching around it. */
.problem-inner { max-width: min(760px, calc(100% - 2 * var(--navie-lane))); margin: 0 auto; text-align: center; }
#problem .divider { width: 46px; height: 2px; background: var(--gold); margin: 28px auto 28px; }

/* ================= Features =================
   A single uniform accordion of all six capabilities — reverted from a primary/secondary
   split that read as an unwanted hierarchy. Rounded gradient icon tiles + a chevron per
   row, the whole list held in one bordered panel with the active row picked out by a
   warm gradient wash and a gold left edge. */
.features-lead { display: grid; grid-template-columns: 1.1fr 1fr; gap: 50px; align-items: flex-end; margin-bottom: 54px; }

.features-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--paper); }
.feature-row {
  position: relative; display: grid; grid-template-columns: 56px 1fr 20px; gap: 20px; align-items: center;
  padding: 24px 28px; border-bottom: 1px solid var(--line); cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.feature-row:last-child { border-bottom: none; }
.feature-row:hover { background: rgba(184,137,62,0.04); }
.feature-row.fr-active { background: linear-gradient(90deg, rgba(184,137,62,0.09), rgba(184,137,62,0.02)); border-left-color: var(--gold); }

/* Icon container: a soft gold-gradient tile rather than a thin ring — a warmer, more
   filled treatment that reads clearly as a distinct icon "chip" per row. */
.feature-icon {
  width: 56px; height: 56px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--gold-soft), var(--paper) 80%);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 2px 10px -4px rgba(184,137,62,0.3);
  color: var(--gold);
  transition: transform 0.3s ease;
}
.feature-icon svg { width: 24px; height: 24px; }
.feature-row:hover .feature-icon { transform: translateY(-2px); }

.feature-row h3 { margin-bottom: 4px; font-size: 19px; }
/* Phase 3: eased with the site's one signature motion curve (already used by .reveal and
   Navie's own travel) instead of plain "ease", so the expand reads as a natural
   deceleration into place rather than a generic linear-ish default. */
.feature-row p { font-size: 14.5px; max-width: 64ch; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.4s cubic-bezier(0.16,1,0.3,1), opacity 0.3s cubic-bezier(0.16,1,0.3,1), margin 0.3s cubic-bezier(0.16,1,0.3,1); }
.feature-row.fr-active p { max-height: 60px; opacity: 1; margin-top: 4px; }

.feature-chevron { width: 18px; height: 18px; color: var(--steel); transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), color 0.3s ease; }
.feature-row.fr-active .feature-chevron { transform: rotate(180deg); color: var(--gold); }

.features-proof { margin-top: 68px; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); position: relative; }
.features-proof img { width: 100%; }
.features-proof-label { position: absolute; top: 20px; left: 20px; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--paper); background: rgba(12,30,51,0.55); padding: 8px 14px; border-radius: 999px; backdrop-filter: blur(8px); }

/* ================= How It Works =================
   Builds on the existing route/waypoint language rather than adding a new visual system:
   the same three node-rings that mark the curved .journey-path above now get a named
   stage under their number (Discover/Plan/Travel — the section's own existing framing,
   not new copy), so the connection between "a dot on the route" and "a stage in the
   journey" is explicit rather than left to the reader to infer from position alone. */
.how-it-works-inner h2 { max-width: 620px; }
.journey-wrap { position: relative; margin-top: 70px; }
.journey-svg { width: 100%; height: 90px; display: block; }
.journey-path { stroke: var(--gold-soft); stroke-width: 1.5; fill: none; }
.journey-node-ring { fill: var(--paper); stroke: var(--gold); stroke-width: 1.5; }
.steps-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 8px; }
.step { position: relative; padding-left: 4px; }
.step-num { font-family: 'Fraunces', serif; font-size: 15px; font-weight: 600; color: var(--gold); letter-spacing: 1px; margin-bottom: 16px; display: block; }
.step-stage { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--steel); margin: -12px 0 16px; }
.step h3 { margin-bottom: 10px; }
.step p { font-size: 15px; }

/* Phase 3: a small internal cascade (waypoint number -> stage label -> title ->
   description) within each step's own .reveal — the route/node-rings above stay fully
   static (no looping route animation), this is the only reveal motion in the section,
   keyed off the existing .step.in class content-reveal.js already sets, so no JS change
   was needed. Kept fast (120ms total spread) so three steps don't feel like a slow cascade. */
.step-num, .step-stage, .step h3, .step p { opacity: 0; transform: translateY(8px); transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1), transform 0.5s cubic-bezier(0.16,1,0.3,1); }
.step.in .step-num { opacity: 1; transform: none; }
.step.in .step-stage { opacity: 1; transform: none; transition-delay: 0.04s; }
.step.in h3 { opacity: 1; transform: none; transition-delay: 0.08s; }
.step.in p { opacity: 1; transform: none; transition-delay: 0.12s; }

/* ================= AI Section (Navy) =================
   The strongest "show, don't tell" moment on the page, so the product visual gets the
   same premium-artifact framing introduced in Hero/Discover (hairline edge, corner
   registration ticks, layered shadow) — tinted gold-bright rather than gold, since that's
   what already reads correctly against navy elsewhere (.eyebrow.on-navy, .vf-label). */
section.navy { background: var(--navy); }
#ai-section { padding-top: 140px; padding-bottom: 140px; overflow: hidden; }
/* .ai-inner also carries the .section-inner class in the markup, so it's capped/centered
   for the Navie lane without a redundant extra wrapper. */
.ai-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.ai-copy .eyebrow { margin-bottom: 20px; }
.ai-copy h2 { margin-bottom: 16px; }
.ai-copy > p.reveal:not(.eyebrow) { max-width: 420px; }

.ai-demo { background: rgba(255,255,255,0.04); border: 1px solid var(--line-navy); border-radius: 18px; padding: 26px; margin: 28px 0; min-height: 168px; }
.ai-demo-prompt { font-family: 'Fraunces', serif; font-size: 16px; font-style: italic; color: var(--paper); }
.ai-demo .cursor { display: inline-block; width: 2px; height: 16px; background: var(--gold-bright); margin-left: 3px; animation: blink 1s step-end infinite; vertical-align: middle; }
.ai-demo-processing { display: none; align-items: center; gap: 10px; margin-top: 18px; font-size: 12.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gold-bright); }
.ai-demo-processing.show { display: flex; }
.ai-dots { display: flex; gap: 4px; }
.ai-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--gold-bright); animation: dotPulse 1.2s ease-in-out infinite; }
.ai-dots span:nth-child(2) { animation-delay: 0.2s; }
.ai-dots span:nth-child(3) { animation-delay: 0.4s; }
.ai-demo-result { display: none; margin-top: 18px; border-top: 1px solid var(--line-navy); padding-top: 16px; }
.ai-demo-result.show { display: block; }
.ai-result-item { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--navy-soft); padding: 6px 0; }
.ai-result-item b { color: var(--paper); font-weight: 600; }

.ai-visual { display: flex; justify-content: center; position: relative; }
.ai-visual::before { content: ''; position: absolute; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(184,137,62,0.18), transparent 70%); z-index: 0; }
/* aspect-ratio overridden from the shared 4:3 (components.css) to the itinerary-generation
   video's own 880x1920 — a portrait phone-screen recording, same shape/issue/fix as the
   Hero and Discover demo videos (object-fit:cover in a landscape frame left large black
   bars either side). max-width sized so the resulting height roughly matches .ai-copy's
   natural height, keeping the two-column balance intact. */
.ai-visual .video-frame {
  width: 100%; max-width: 250px; position: relative; z-index: 1;
  aspect-ratio: 880 / 1920;
  border: 1px solid rgba(205,160,92,0.3);
  box-shadow: 0 30px 60px -24px rgba(4,10,18,0.55), 0 10px 40px -16px rgba(205,160,92,0.22);
}
.ai-visual .video-frame::before {
  content: ''; position: absolute; inset: 13px; z-index: 4; pointer-events: none;
  background:
    linear-gradient(to right, rgba(236,224,199,0.75) 13px, transparent 0) top left / 13px 1.5px no-repeat,
    linear-gradient(to bottom, rgba(236,224,199,0.75) 13px, transparent 0) top left / 1.5px 13px no-repeat,
    linear-gradient(to left, rgba(236,224,199,0.75) 13px, transparent 0) bottom right / 13px 1.5px no-repeat,
    linear-gradient(to top, rgba(236,224,199,0.75) 13px, transparent 0) bottom right / 1.5px 13px no-repeat;
}
.ai-visual .float-badge { animation: none; }
.ai-fb { top: -8%; right: 4%; }

/* ================= Prepare =================
   Repurposed from the old "Connected" section: practical pre-departure readiness
   (packing/visa/budget/tools). The four capabilities now read as a departure-register
   strip — ticket-stub dividers, no floating pills — ahead of the readiness screenshot,
   so the section reads TRIP PLANNED -> TRIP PREPARED -> READY TO GO top to bottom. */
#prepare { text-align: center; }

.prepare-checklist { display: inline-flex; margin-top: 52px; border: 1px solid var(--line); border-radius: 4px; }
.prepare-item { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 30px; border-left: 1px solid var(--line); color: var(--ink); }
.prepare-item:first-child { border-left: none; }
.prepare-item svg { width: 20px; height: 20px; color: var(--gold); }
.prepare-item span { font-size: 13.5px; font-weight: 600; white-space: nowrap; }

/* max-width reduced from 340 to 270 to suit the aspect-ratio override below — see
   .prepare-visual .video-frame. */
.prepare-visual { position: relative; max-width: 270px; margin: 48px auto 0; }
/* aspect-ratio overridden from the shared 4:3 (components.css) to the prepare-travel-tools
   video's own 880x1920 — a portrait phone-screen recording, same shape/issue/fix already
   applied to the Hero, Discover, and AI demo videos (object-fit:cover in a landscape
   frame left large black bars either side). */
.prepare-visual .video-frame {
  position: relative; z-index: 1;
  aspect-ratio: 880 / 1920;
  border: 1px solid rgba(184,137,62,0.22);
  box-shadow: var(--shadow), 0 10px 40px -18px rgba(184,137,62,0.2);
}
.prepare-visual .video-frame::before {
  content: ''; position: absolute; inset: 12px; z-index: 4; pointer-events: none;
  background:
    linear-gradient(to right, rgba(236,224,199,0.8) 12px, transparent 0) top left / 12px 1.5px no-repeat,
    linear-gradient(to bottom, rgba(236,224,199,0.8) 12px, transparent 0) top left / 1.5px 12px no-repeat,
    linear-gradient(to left, rgba(236,224,199,0.8) 12px, transparent 0) bottom right / 12px 1.5px no-repeat,
    linear-gradient(to top, rgba(236,224,199,0.8) 12px, transparent 0) bottom right / 1.5px 12px no-repeat;
}

/* ================= Discover =================
   Deliberately not the Hero/AI two-column split repeated a third time: an editorial
   opener block (heading + lead, unconstrained by a side column so it can breathe) sits
   above a second row that pairs the screenshot with a typographic "index of places"
   rather than a row of pill badges — closer to a travel-magazine spread than a SaaS
   feature block. */
#discover { position: relative; overflow: hidden; }
/* .discover-inner also carries the .section-inner class in the markup — same reasoning as .ai-inner. */
.discover-inner { position: relative; z-index: 2; }
.discover-intro { max-width: 560px; margin-bottom: 58px; }
.discover-intro h2 { max-width: 480px; }
.discover-intro p { max-width: 440px; margin-top: 16px; }

.discover-spread { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 60px; align-items: center; }

.discover-visual { position: relative; }
/* aspect-ratio overridden from the shared 4:3 (components.css) to the discover demo
   video's own 880x1906 — it's a portrait phone-screen recording, and forcing it into a
   landscape frame with object-fit:cover left large black bars either side (same issue
   and same fix as the Hero demo video). max-width reduced accordingly so the section
   doesn't grow beyond what's needed to show the video cleanly. */
.discover-visual .video-frame {
  max-width: 260px; margin: 0 auto;
  aspect-ratio: 880 / 1906;
  border: 1px solid rgba(184,137,62,0.22);
  box-shadow: var(--shadow), 0 10px 42px -18px rgba(184,137,62,0.22);
}
.discover-visual .video-frame::before {
  content: ''; position: absolute; inset: 13px; z-index: 4; pointer-events: none;
  background:
    linear-gradient(to right, rgba(236,224,199,0.8) 13px, transparent 0) top left / 13px 1.5px no-repeat,
    linear-gradient(to bottom, rgba(236,224,199,0.8) 13px, transparent 0) top left / 1.5px 13px no-repeat,
    linear-gradient(to left, rgba(236,224,199,0.8) 13px, transparent 0) bottom right / 13px 1.5px no-repeat,
    linear-gradient(to top, rgba(236,224,199,0.8) 13px, transparent 0) bottom right / 1.5px 13px no-repeat;
}
.discover-visual .float-badge { animation: none; }
.discover-fb { bottom: -6%; left: -6%; }

/* The dashed rule reads as a short stretch of route, not a generic sidebar divider —
   echoing .navie-path-line/.journey-path's dash rhythm elsewhere on the page. Each place
   is a typographic entry (Fraunces, like a printed index), not a filled pill. */
.discover-index { display: flex; flex-direction: column; border-left: 1px dashed rgba(184,137,62,0.4); padding-left: 26px; }
.discover-place {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 0; border-bottom: 1px solid var(--line);
  font-family: 'Fraunces', serif; font-size: 19px; color: var(--ink);
}
.discover-place:first-child { padding-top: 0; }
.discover-place svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--gold); }
.discover-more { display: inline-block; margin-top: 22px; font-size: 14px; font-weight: 700; color: var(--gold-ink); }
.discover-more:hover { color: var(--gold); }

/* ================= Whop Access =================
   The conversion moment: an editorial panel rather than a pricing card (no price grid,
   no plan comparison — just the statement, the two existing CTAs, and reassurance), with
   the primary CTA made to clearly dominate the now-quieter secondary. A short dashed
   approach terminating in a filled waypoint sits above it — "this is where the route
   leads" — reusing the same dash/node language as .journey-path and the signature
   #routeLine rather than inventing a new decorative device. */
#whop-access { text-align: center; }
/* Same lane-aware cap as .problem-inner — 620px already tested clear of the lane at every
   tier, but this removes the fixed-width assumption rather than relying on that holding. */
.whop-inner { max-width: min(620px, calc(100% - 2 * var(--navie-lane))); margin: 0 auto; }

.whop-arrival { display: flex; flex-direction: column; align-items: center; margin-bottom: 26px; }
.whop-arrival span { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }
.whop-arrival::before { content: ''; width: 1px; height: 34px; margin-bottom: 8px; border-left: 1px dashed rgba(184,137,62,0.5); }

.whop-panel { padding: 56px 56px 48px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,0.4); }
.whop-badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; border-radius: 999px; background: rgba(255,255,255,0.7); border: 1px solid var(--line); margin-bottom: 30px; font-size: 13.5px; font-weight: 700; color: var(--ink-soft); }
.whop-badge img { width: 20px; height: 20px; border-radius: 5px; }
#whop-access .btn-row { display: flex; align-items: center; gap: 18px; justify-content: center; flex-wrap: wrap; margin: 30px 0 20px; }
#whop-access .btn-row .btn-ghost { color: var(--ink-soft); }
#whop-access .fine-print { font-size: 13.5px; color: var(--steel); }

/* ================= Final CTA =================
   The emotional departure, not another conversion push — quieter than Whop by design: no
   panel, no border, just open space, the existing compass, and one small coordinate line
   standing in for "a destination, waiting" (the same decorative-metadata language as the
   ambient background's coordinate labels elsewhere, kept faint enough to be felt rather
   than read). */
#final-cta { text-align: center; background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%); position: relative; overflow: hidden; }
#final-cta::before { content: ''; position: absolute; top: -20%; left: 50%; transform: translateX(-50%); width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(circle, rgba(184,137,62,0.12), transparent 70%); z-index: 0; }
.final-compass { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 480px; height: 480px; opacity: 0.06; z-index: 0; }
.final-coord { display: block; position: relative; z-index: 1; font-size: 11px; letter-spacing: 1.5px; color: var(--navy-soft); opacity: 0.55; margin-bottom: 22px; }
#final-cta .btn-row { display: flex; align-items: center; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: 34px; position: relative; z-index: 1; }
#final-cta .btn-row .btn-ghost.on-navy { color: rgba(255,255,255,0.65); }
#final-cta h2, #final-cta p { position: relative; z-index: 1; }
#final-cta p { max-width: 480px; margin: 0 auto; }

/* Quiet secondary navigation, not a CTA — same muted/hover language already used for
   on-navy secondary text elsewhere in this section (.btn-ghost.on-navy) and in the
   footer (.footer-col a), reused rather than introducing a new color pair. No pill,
   border, or background; the only motion is the existing color-transition pattern. */
.final-more {
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  margin-top: 26px; position: relative; z-index: 1;
}
.final-more-label { font-size: 13px; color: var(--navy-soft); transition: color 0.3s ease; }
.final-more-name { font-size: 14px; font-weight: 700; color: var(--paper); transition: color 0.3s ease; }
.final-more:hover .final-more-label { color: rgba(255,255,255,0.85); }
.final-more:hover .final-more-name { color: var(--gold-bright); }

/* ================= Footer ================= */
footer { background: var(--navy-deep); padding: 80px 8vw 40px; color: var(--navy-soft); position: relative; z-index: 2; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 60px; }
.footer-brand { display: flex; align-items: center; gap: 10px; font-family: 'Fraunces', serif; font-size: 20px; font-weight: 600; color: var(--paper); margin-bottom: 12px; }
.footer-brand img { height: 28px; width: auto; }
.footer-tagline { font-size: 13.5px; color: var(--steel); }
.footer-col h4 { font-family: 'Manrope', sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--steel); margin-bottom: 16px; }
.footer-col a { display: block; font-size: 14px; color: var(--navy-soft); margin-bottom: 12px; transition: color 0.2s ease; }
.footer-col a:hover { color: var(--gold-bright); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 24px; font-size: 12.5px; color: var(--steel); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }