/* Europe Unlocked holding page
   Editorial travel layout built from the product palette and motion system. */

/* 13 Oct 2026: the tokens live on .eu-home, not :root. On :root they redefined the app's own
   --brand-500, --font-sans and --font-mono (src/app/globals.css) for the whole page, the shared
   header and footer included. Everything that reads them is inside .eu-home; the motion lab's
   pages and frames, which use this stylesheet without that box, put .eu-tokens on <html>. */
.eu-home, .eu-tokens {
  --brand-50: #e4f7f4;
  --brand-100: #c5ede3;
  --brand-200: #93dcc9;
  --brand-300: #5dcaa5;
  --brand-400: #2aa18c;
  --brand-500: #0f766e;
  --brand-600: #0c6058;
  --brand-700: #094a44;
  --brand-800: #063632;
  --ink-50: #e9eff5;
  --ink-200: #a3bcd2;
  --ink-300: #7c9cba;
  --ink-700: #16324f;
  --ink-800: #0f2438;
  --ink-900: #091725;
  --charcoal: #1f2937;
  --muted: #607083;
  --line: #dce6e9;
  --paper: #fbfcfa;
  --warm: #f4f2eb;
  --water: #071624;
  --white: #fff;
  /* Geist 1.8 from next/font, the app's own (src/app/fonts.ts: preloaded, with a size-matched
     fallback); the motion lab's pages fall back to fonts.css's "Geist". */
  --font-sans: var(--font-geist-sans, "Geist"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: var(--eu-mono-latin, "Geist Mono"), var(--eu-mono-ext, "Geist Mono"), ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --shell: 1240px;
  --section-title: clamp(36px, 3.6vw, 48px);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 94px;
  -webkit-text-size-adjust: 100%;
}

/* 12 Oct 2026: the homepage is a Next page now, with the shared header and footer around it. These
   page-wide rules were on body and bare elements; they are scoped to the homepage content box
   (.eu-home, src/components/pages/LaunchHome) so they leave the header and footer alone.
   :where() keeps each rule's specificity exactly what it was, so no class rule below changes. */
.eu-home {
  width: 100%;
  overflow-x: clip;
  background: var(--paper);
  color: var(--charcoal);
  font: 400 17px/1.65 var(--font-sans);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

:where(.eu-home) :is(h1, h2, h3, p, figure, blockquote) { margin: 0; }
:where(.eu-home) :is(h1, h2, h3) {
  color: var(--ink-700);
  font-weight: 730;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-wrap: balance;
}

:where(.eu-home) img { display: block; max-width: 100%; }
:where(.eu-home) a { color: inherit; text-decoration: none; }
:where(.eu-home) :is(button, input, select) { font: inherit; }

:where(.eu-home) ::selection { background: var(--brand-200); color: var(--brand-800); }
:where(.eu-home) :focus-visible { outline: 3px solid var(--brand-200); outline-offset: 3px; }

.shell { width: min(100%, var(--shell)); margin-inline: auto; padding-inline: 28px; }
.band { padding-block: clamp(64px, 7vw, 104px); }
.mist { background: var(--brand-50); }
.dark { background: var(--water); color: var(--ink-50); }

.eyebrow {
  color: var(--brand-600);
  font: 700 14px/1.25 var(--font-mono);
  letter-spacing: .15em;
  text-transform: uppercase;
}

.inverse .eyebrow, .dark .eyebrow { color: var(--brand-300); }

.section-intro { max-width: none; }
.section-intro h2 {
  margin-top: 14px;
  max-width: 1200px;
  font-size: var(--section-title);
  letter-spacing: -.025em;
  line-height: 1.1;
}
.section-intro > p:last-child {
  max-width: 900px;
  margin-top: 16px;
  color: var(--muted);
  font-size: clamp(16px, 1.4vw, 18px);
}
.section-intro.inverse h2 { color: var(--white); }
.section-intro.inverse > p:last-child { color: var(--ink-200); }

/* Reveal motion. 13 Oct 2026 (Page Speed Brief): visible by default. Everything started at opacity 0
   until a script revealed it, so on a slow phone Google found no main content at all (Lighthouse
   "NO_LCP", a mobile score of 0) and a visitor stared at an empty hero. Now only a .rise that is
   still below the screen when the page loads waits (MarketingRuntime adds .rise-wait), then fades
   up as it arrives. Without a script, everything simply shows. */
.rise { transition: opacity .75s var(--ease), transform .75s var(--ease); }
.rise.rise-wait { opacity: 0; transform: translateY(20px); }
.no-reveal .rise { opacity: 1 !important; transform: none !important; transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, .rise.rise-wait { opacity: 1; transform: none; transition: none; }
}

/* Build the page from the top (Rick, 15 Oct 2026: "render the top part first"). The browser lays out
   and paints a section only when it comes near the screen; until then it holds the space given here.
   The HTML is unchanged, so search engines, find-in-page and the section links see everything, and
   `auto` remembers each section's real height once drawn, so scrolling back does not jump.
   On a phone the homepage is 24,000 px and laying all of it out held the first paint back.
   Safe because nothing in these sections draws outside them: everything that overhangs is already
   clipped by its own scroller (checked at 412 and 1423 px wide), and the one full-screen viewer is
   a <dialog> outside <main>, in the top layer. The hero stays as it is: it is the first screen. */
.eu-home main > section:not(:first-child),
.eu-home .airport-showcase > .daytrip-unlock,
.eu-home .airport-showcase > .destinations-teaser {
  content-visibility: auto;
  contain-intrinsic-size: auto 1200px;
}
/* A jump to a section (#explore, a shared /#ways-to-search) must land on it, and with sections held
   at 1200 px it landed up to 1,900 px out. MarketingRuntime sets this just before any jump, so the
   browser measures the real page; it stays on for the visit (the cost is one layout, by the reader's
   own choice). */
html.eu-built .eu-home main > section,
html.eu-built .eu-home .airport-showcase > * { content-visibility: visible; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 88px;
  padding: 10px max(14px, calc((100vw - var(--shell)) / 2));
  border: 0;
  background: rgba(7, 22, 36, .96);
  backdrop-filter: blur(22px) saturate(135%);
}
.site-header::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(93, 202, 165, .5), rgba(42, 161, 140, .12), transparent);
  content: "";
}
.header-shell {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: min(100%, var(--shell));
  min-height: 66px;
  margin-inline: auto;
  overflow: hidden;
  padding: 9px 10px 9px 13px;
  border: 1px solid rgba(147, 220, 201, .22);
  border-radius: 20px;
  background: linear-gradient(112deg, rgba(19, 48, 70, .93), rgba(10, 34, 52, .94) 48%, rgba(8, 45, 52, .88));
  box-shadow: 0 24px 60px -40px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .07);
  animation: header-arrive .72s var(--ease) both;
}
.header-shell::before {
  position: absolute;
  z-index: -1;
  top: -110px;
  right: -40px;
  width: 440px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(42, 161, 140, .2), transparent 66%);
  content: "";
  pointer-events: none;
}
.header-shell::after {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 7%;
  width: 34%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(197, 237, 227, .8), transparent);
  content: "";
  pointer-events: none;
}

.brandmark { display: flex; z-index: 3; min-width: 0; align-items: center; gap: 11px; }
.footer-brand { display: flex; align-items: center; gap: 11px; }
.brandmark-emblem {
  position: relative;
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(197, 237, 227, .32);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 0 0 5px rgba(93, 202, 165, .035), 0 12px 28px -18px rgba(93, 202, 165, .9);
}
.brandmark img { width: 40px; height: 40px; }
.brandmark-status {
  position: absolute;
  right: 0;
  bottom: 2px;
  width: 10px;
  height: 10px;
  border: 2px solid #113047;
  border-radius: 50%;
  background: var(--brand-300);
  box-shadow: 0 0 12px rgba(93, 202, 165, .9);
  animation: header-pulse 2.8s ease-in-out infinite;
}
.brandmark-copy { display: grid; min-width: 0; gap: 2px; }
.brandmark strong { color: var(--white); font-size: 16px; letter-spacing: -.025em; line-height: 1.1; white-space: nowrap; }
/* The trademark sign, raised and shrunk so it marks the name without crowding it. */
.brandmark .tm { position: relative; top: -.55em; margin-left: .1em; font-size: .52em; font-weight: 600; line-height: 0; }
.brandmark small { color: var(--brand-200); font: 560 9px/1.2 var(--font-mono); letter-spacing: .11em; text-transform: uppercase; white-space: nowrap; }
.header-actions { display: flex; z-index: 3; align-items: center; gap: 11px; }
.from-edt {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 9px;
  padding: 0 14px 0 8px;
  border: 1px solid rgba(163, 188, 210, .16);
  border-radius: 999px;
  background: rgba(5, 21, 34, .32);
  color: var(--ink-200);
  font-size: 12.5px;
  white-space: nowrap;
}
/* "Flying from" picker: drives every airport-led part of the page */
.header-airport {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  padding: 0 6px 0 14px;
  border: 1px solid rgba(93, 202, 165, .35);
  border-radius: 999px;
  background: rgba(5, 21, 34, .5);
  color: var(--brand-200);
  font-size: 12.5px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}
.header-airport:hover, .header-airport:focus-within { border-color: var(--brand-300); }
.header-airport select {
  min-height: 32px;
  max-width: 170px;
  padding: 0 30px 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--brand-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  appearance: none;
  cursor: pointer;
}
.header-airport select:focus-visible { outline: 3px solid var(--brand-200); outline-offset: 2px; }
.header-airport option { background: var(--ink-900); color: var(--white); }
.from-edt-spark { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: rgba(93, 202, 165, .12); color: var(--brand-300); font-size: 11px; }
.from-edt a { color: var(--brand-100); font-weight: 690; }
.header-cta {
  position: relative;
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 9px;
  overflow: hidden;
  padding: 0 7px 0 15px;
  border: 1px solid rgba(228, 247, 244, .42);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand-200), var(--brand-300));
  color: var(--water);
  font-size: 12.5px;
  font-weight: 730;
  box-shadow: 0 15px 34px -18px rgba(93, 202, 165, .95), inset 0 1px 0 rgba(255, 255, 255, .65);
  transition: box-shadow .25s ease, transform .25s var(--ease);
}
.header-cta::before {
  position: absolute;
  top: -70%;
  left: -35%;
  width: 40%;
  height: 240%;
  background: rgba(255, 255, 255, .28);
  content: "";
  pointer-events: none;
  transform: rotate(18deg);
  transition: left .45s var(--ease);
}
.header-cta:hover { box-shadow: 0 20px 42px -17px rgba(93, 202, 165, 1); transform: translateY(-2px); }
.header-cta:hover::before { left: 112%; }
.header-cta-icon { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; background: rgba(7, 22, 36, .12); font-size: 12px; transform: rotate(-12deg); transition: transform .25s var(--ease); }
.header-cta:hover .header-cta-icon { transform: translate(2px, -1px) rotate(-12deg); }
.header-cta-short { display: none; }

@keyframes header-arrive {
  from { opacity: 0; transform: translateY(-10px) scale(.992); }
}

@keyframes header-pulse {
  50% { box-shadow: 0 0 20px rgba(93, 202, 165, 1); transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .header-shell, .brandmark-status { animation: none; }
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(58px, 8vw, 112px);
  background: var(--paper);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--brand-300), var(--brand-500) 55%, var(--ink-700));
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(430px, .95fr);
  align-items: center;
  gap: clamp(46px, 7vw, 92px);
}
.launch-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--brand-700);
  font: 650 12px/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.launch-label span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-400);
  box-shadow: 0 0 0 5px var(--brand-100);
}
.hero h1 {
  margin-top: 24px;
  max-width: 760px;
  color: var(--ink-800);
  font-size: clamp(54px, 6.7vw, 91px);
  letter-spacing: -.035em;
  line-height: 1.05;
}
.hero h1 span { color: var(--brand-500); }
.hero .lede {
  max-width: 650px;
  margin-top: 28px;
  color: #4d5e70;
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.62;
}
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 34px; }
.btn {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 23px;
  border: 0;
  border-radius: 10px;
  background: var(--brand-500);
  color: var(--white);
  font-weight: 680;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: background .2s ease, transform .2s var(--ease), box-shadow .2s ease;
}
.btn:hover { background: var(--brand-600); transform: translateY(-2px); box-shadow: 0 12px 28px -14px rgba(15, 118, 110, .7); }
.text-link { border-bottom: 1px solid var(--brand-300); color: var(--brand-700); font-size: 15px; font-weight: 650; }
.trust-line { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 34px; color: var(--muted); font-size: 13px; }
.trust-line span { display: inline-flex; align-items: center; gap: 8px; }
.trust-line span::before { content: "✓"; color: var(--brand-500); font-weight: 750; }

.hero-proof {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(93, 202, 165, .22);
  border-radius: 24px;
  background: var(--water);
  color: var(--white);
  box-shadow: 0 30px 70px -35px rgba(7, 22, 36, .8);
}
.proof-topline, .proof-route { position: relative; z-index: 2; }
.proof-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 12px;
  color: var(--ink-200);
  font: 600 11px/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.proof-topline strong { color: var(--brand-300); font-size: 13px; }
.hero-proof route-map { display: block; min-height: 365px; }
.proof-route { padding: 18px 22px 22px; border-top: 1px solid rgba(255, 255, 255, .08); }
.proof-route p { font-size: 17px; font-weight: 680; letter-spacing: -.015em; }
.proof-route p span { color: var(--brand-300); }
.proof-route small { display: block; margin-top: 6px; color: var(--ink-300); font-size: 13px; }

/* Trip explorer */
.trip-explorer {
  position: relative;
  overflow: hidden;
  padding-block: clamp(54px, 6vw, 86px) clamp(78px, 8vw, 112px);
  background:
    radial-gradient(circle at 82% 8%, rgba(15, 118, 110, .28), transparent 30%),
    radial-gradient(circle at 14% 42%, rgba(56, 189, 248, .07), transparent 32%),
    linear-gradient(180deg, #071624 0%, #061522 56%, #071624 100%);
  color: var(--ink-50);
}
.trip-explorer::after {
  position: absolute;
  inset: 0;
  background-image: url("../img/halftone-field.svg"), url("../img/halftone-field.svg");
  background-position: top -150px right -220px, bottom -190px left -250px;
  background-repeat: no-repeat;
  background-size: min(1080px, 86vw) auto, min(940px, 76vw) auto;
  content: "";
  opacity: .46;
  pointer-events: none;
}
.trip-explorer > .shell { position: relative; z-index: 1; }
.explorer-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--brand-300), var(--brand-500) 55%, #38bdf8);
}
.explorer-intro {
  max-width: 1180px;
  margin-inline: auto;
  text-align: center;
}
.explorer-intro .launch-label { color: var(--brand-300); }
.explorer-intro .launch-label span { box-shadow: 0 0 0 5px rgba(93, 202, 165, .16); }
.explorer-intro h1 {
  margin: 0 auto;
  max-width: 1140px;
  color: var(--white);
  font-size: clamp(48px, 4.5vw, 60px);
  letter-spacing: -.015em;
  line-height: 1.04;
  text-wrap: balance;
}
.explorer-intro > p {
  max-width: 720px;
  margin: 26px auto 0;
  color: var(--ink-200);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.65;
}
.explorer-subtitle { display: grid; gap: 9px; max-width: 1030px; margin: 23px auto 0; }
.explorer-subtitle p { color: var(--ink-200); font-size: clamp(15px, 1.25vw, 17px); line-height: 1.55; }
.explorer-subtitle p:last-child { color: var(--brand-100); }
.explorer-intro .explorer-proof {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 9px;
  margin: 18px auto 0;
  padding: 9px 14px;
  border: 1px solid rgba(93, 202, 165, .28);
  border-radius: 999px;
  background: rgba(93, 202, 165, .1);
  color: var(--white);
  font-size: 15px;
  font-weight: 680;
  line-height: 1.35;
}
.explorer-intro .explorer-proof span { color: var(--brand-300); }

/* Launch mode: every route leads into the Finder */
.hero-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 22px; }
.hero-search { min-height: 58px; padding: 0 30px; background: linear-gradient(135deg, var(--brand-300), var(--brand-400)); color: var(--ink-900); font-size: 18px; font-weight: 760; box-shadow: 0 18px 40px -18px rgba(93, 202, 165, .9); }
.hero-search:hover { background: linear-gradient(135deg, var(--brand-200), var(--brand-300)); color: var(--ink-900); }
.hero-free { color: var(--ink-200); font-size: 13.5px; }
.try-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.try-card.signup .try-search { min-height: 60px; padding: 0 30px; background: var(--white); color: var(--brand-700); font-size: 18px; font-weight: 760; }
.try-card.signup .try-search:hover { background: var(--brand-50); color: var(--brand-800); }
.try-card .smallprint { margin-top: 0; }
.try-card .signup-trust { margin-top: 4px; }
.story-open { width: 100%; min-height: 48px; margin-top: 16px; font-size: 15px; }
.trip-story > .story-open:first-child { margin-top: 0; }
.mode-try { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 12px 20px; border-radius: 999px; background: var(--brand-500); color: var(--white); font-size: 15px; font-weight: 700; transition: background .2s ease, transform .2s var(--ease); }
.mode-try:hover { background: var(--brand-600); transform: translateY(-1px); }
.explorer-intro .explorer-lede {
  max-width: 790px;
  margin-top: 16px;
}
/* The airport showcase: the picker plus everything it drives, framed as one
   connected unit so the selection obviously controls all of it. */
.airport-showcase {
  position: relative;
  margin-top: 28px;
  padding: clamp(16px, 2.2vw, 26px);
  border: 1px solid rgba(93, 202, 165, .3);
  border-radius: 26px;
  background: rgba(255, 255, 255, .03);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.airport-bar {
  position: relative;
  padding: 6px 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  text-align: center;
}
.airport-bar-label .eyebrow { color: var(--brand-300); font-size: 14px; }
.airport-cta { margin-top: 9px; color: var(--ink-200); font-size: clamp(18px, 2vw, 25px); font-weight: 640; letter-spacing: -.015em; line-height: 1.25; }
.airport-cta strong { color: var(--white); font-weight: 760; }
.showcase-band {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 5px 9px;
  margin-top: 16px;
  color: var(--ink-200);
  font-size: 14px;
}
.showcase-band .showcase-dot { align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-300); box-shadow: 0 0 0 4px rgba(93, 202, 165, .14); animation: header-pulse 2.8s ease-in-out infinite; }
.showcase-band strong { color: var(--brand-200); font-weight: 760; }
.showcase-band small { flex-basis: 100%; color: var(--ink-300); font-size: 11.5px; text-align: center; }
.airport-picker {
  margin-top: 17px;
  padding-inline: 18px;
}
/* Each pill sizes to its own name, so "Leeds Bradford" and "East Midlands"
   get the same breathing room as "Luton". The rows wrap and stay centred. */
.airport-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  overflow: visible;
  padding: 5px 0 7px;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.airport-pills::-webkit-scrollbar { display: none; }
.airport-scroll {
  display: none;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(93, 202, 165, .35);
  border-radius: 50%;
  background: rgba(7, 19, 32, .82);
  color: var(--brand-300);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease, opacity .2s ease;
}
.airport-scroll:hover:not(:disabled) { border-color: var(--brand-300); background: var(--brand-700); color: var(--white); }
.airport-scroll:disabled { opacity: .28; cursor: default; }
.airport-pill {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(7, 19, 32, .7);
  color: var(--ink-200);
  font-size: 11.5px;
  font-weight: 620;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
  scroll-snap-align: center;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.airport-pill:hover { border-color: var(--brand-300); color: var(--white); }
.airport-pill[aria-pressed="true"] { border-color: var(--brand-300); background: var(--brand-500); color: var(--white); }
.route-flag {
  display: inline-block;
  width: 1.35em;
  height: .9em;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(15, 36, 56, .18);
  vertical-align: -.08em;
}
/* 13 Oct 2026: flags are <img>s now (the shared <CountryFlag>, public/flags), not the flags.svg sprite. */
.eu-home img.route-flag {
  /* Card photo rules (".connector-phase img", ".edt-card img") would otherwise size and place it. */
  position: static !important;
  display: inline-block !important;
  width: 1.35em !important;
  max-width: none !important;
  height: .9em !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: cover;
  transform: none !important;
}

.trips-grid {
  display: grid;
  grid-template-columns: minmax(430px, 1.1fr) minmax(0, .9fr);
  align-items: start;
  gap: 24px;
  margin-top: 18px;
}
.explorer-stage { position: relative; }
/* The map, with the selected trip told underneath it */
.map-column { display: flex; min-width: 0; flex-direction: column; gap: 16px; }
.explorer-stage .map-frame {
  width: 100%;
  min-height: 0;
  aspect-ratio: 1.42;
}
.map-frame {
  overflow: hidden;
  min-height: 470px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  background: #071320;
  box-shadow: 0 30px 70px -38px rgba(0, 0, 0, .9);
}
.trips-side {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  background: rgba(255, 255, 255, .055);
}
.live-label { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--brand-300); font: 600 10px/1.2 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; }
.live-label span { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-300); box-shadow: 0 0 0 4px rgba(93, 202, 165, .12); }
.live-label strong { color: var(--white); }
.panel-blurb { color: var(--ink-200); font-size: 16px; line-height: 1.65; }
.panel-trips { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.trip-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 14px;
  width: 100%;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 14px;
  background: rgba(7, 19, 32, .5);
  color: var(--white);
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s var(--ease);
}
.trip-row:hover { transform: translateY(-1px); border-color: var(--brand-300); }
.trip-row[aria-pressed="true"] { border-color: var(--brand-300); background: rgba(15, 118, 110, .2); }
.trip-kind { color: var(--brand-300); font: 650 10px/1 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; }
.trip-route { grid-column: 1 / -1; margin-top: 7px; font-size: 16px; font-weight: 680; line-height: 1.35; }
.trip-meta { color: var(--ink-300); font-size: 12px; }
.trip-price { grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--white); font-size: 18px; font-weight: 730; white-space: nowrap; }
.trip-edt { display: grid; grid-column: 1 / -1; gap: 2px; margin-top: 9px; padding-top: 11px; border-top: 1px solid rgba(255, 255, 255, .1); }
.trip-edt b { color: var(--brand-300); font-size: 12px; }
.trip-edt small { color: var(--ink-300); font-size: 12px; line-height: 1.4; }
.trip-none { padding: 16px; border: 1px dashed rgba(255, 255, 255, .18); border-radius: 12px; color: var(--ink-300); font-size: 14px; }

/* The selected trip, told as a trip rather than a route */
.trip-story { padding: 20px 22px; border: 1px solid rgba(93, 202, 165, .22); border-radius: 14px; background: rgba(15, 118, 110, .12); }
.story-intro { color: var(--white); font-size: 15.5px; font-weight: 560; line-height: 1.55; }
.story-cities { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 22px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .1); }
.story-city-name { display: flex; align-items: baseline; gap: 8px; color: var(--brand-200); font-size: 14px; font-weight: 700; }
.story-city-name small { color: var(--ink-300); font: 600 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.story-city ul { display: grid; gap: 5px; margin: 7px 0 0; padding: 0; list-style: none; }
.story-city li { position: relative; padding-left: 18px; color: var(--ink-200); font-size: 13.5px; line-height: 1.45; }
.story-city li::before { position: absolute; left: 0; top: 0; color: var(--brand-300); content: "✦"; font-size: 11px; line-height: 1.7; }

.daytrip-unlock {
  position: relative;
  display: block;
  margin-top: 24px;
  padding: clamp(34px, 3.5vw, 44px);
  border: 1px solid rgba(93, 202, 165, .28);
  border-radius: 20px;
  background: linear-gradient(120deg, rgba(15, 118, 110, .26), rgba(255, 255, 255, .055));
}
.trip-continues {
  position: absolute;
  top: -17px;
  left: 44px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px;
  border: 1px solid rgba(93, 202, 165, .4);
  border-radius: 999px;
  background: var(--water);
  color: var(--brand-300);
  font: 600 10px/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.trip-continues span { font-size: 15px; }
.daytrip-copy { display: grid; grid-template-columns: 1fr; align-items: start; }
.daytrip-copy .eyebrow { color: var(--brand-300); }
.daytrip-copy h2 { max-width: 1180px; margin-top: 14px; color: var(--white); font-size: clamp(28px, 2.9vw, 38px); line-height: 1.12; }
.daytrip-answer { max-width: 1160px; margin-top: 16px; color: var(--brand-300); font-size: clamp(18px, 1.6vw, 21px); font-weight: 680; line-height: 1.45; }
#edt-base { max-width: 1120px; margin-top: 13px; color: var(--ink-200); font-size: 16px; line-height: 1.55; }
#edt-base strong { color: var(--white); }
.linked-route {
  display: block;
  width: 100%;
  margin-top: 24px;
  padding: 15px 18px;
  border: 1px solid rgba(93, 202, 165, .2);
  border-left: 4px solid var(--brand-300);
  border-radius: 0 10px 10px 0;
  background: rgba(7, 19, 32, .58);
  color: var(--white);
  font: 650 clamp(13px, 1.2vw, 16px)/1.5 var(--font-mono);
}
.linked-route[hidden] { display: none; }
.edt-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 24px; }
.edt-card {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  background: var(--white);
  color: var(--charcoal);
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .9);
  transition: transform .25s var(--ease);
}
.edt-card:hover { transform: translateY(-3px); }
.edt-card img { width: 100%; height: 172px; object-fit: cover; }
.edt-body { padding: 17px; }
.edt-route { display: grid; grid-template-columns: auto 1fr; gap: 7px 8px; align-items: start; }
.route-plane { color: var(--brand-500); font-size: 17px; line-height: 1.2; transform: rotate(-12deg); }
.edt-route > span:nth-child(2) { min-width: 0; }
.edt-route b { display: block; overflow: hidden; color: var(--ink-700); font-size: 14px; font-weight: 720; line-height: 1.35; text-overflow: ellipsis; }
.edt-route small { display: block; margin-top: 2px; color: var(--muted); font: 600 10px/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.edt-route strong { grid-column: 1 / -1; color: var(--brand-600); font-size: 17px; }
.edt-from { margin-top: 5px; color: var(--muted); font-size: 11.5px; }
.edt-schedule { display: grid; gap: 5px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
.edt-schedule p { display: grid; grid-template-columns: minmax(62px, 1fr) auto 15px auto; gap: 6px; align-items: center; color: var(--muted); font-size: 11px; }
.edt-schedule span { display: inline-flex; align-items: center; gap: 4px; }
.edt-schedule i { font-style: normal; }
.edt-schedule b { color: #35495d; font: 600 11px/1 var(--font-mono); }
.edt-schedule em { color: var(--brand-500); font-style: normal; text-align: center; }
.edt-ground { margin-top: 9px; color: var(--brand-700); font-size: 13px; font-weight: 680; }

/* Destinations Unlocked preview */
.destinations-teaser[hidden] { display: none; }
.destinations-teaser {
  position: relative;
  margin-top: 18px;
  padding: clamp(26px, 3vw, 38px);
  overflow: hidden;
  border: 1px solid rgba(71, 198, 224, .3);
  border-radius: 20px;
  background:
    radial-gradient(circle at 88% 0, rgba(71, 198, 224, .14), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, .075), rgba(15, 118, 110, .13));
}
.destinations-teaser::after {
  position: absolute;
  z-index: 0;
  right: -190px;
  bottom: -230px;
  width: 600px;
  height: 600px;
  background: url("../img/halftone-field.svg") center / contain no-repeat;
  content: "";
  opacity: .2;
  pointer-events: none;
}
.destinations-teaser > * { position: relative; z-index: 1; }
.destinations-teaser-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 28px; }
.destinations-teaser .eyebrow { color: #6edcf0; }
.destinations-teaser h2 { max-width: 900px; margin-top: 11px; color: var(--white); font-size: clamp(28px, 3vw, 40px); line-height: 1.1; }
.destinations-teaser-heading > div > p:last-child { max-width: 820px; margin-top: 11px; color: var(--ink-200); font-size: 16px; line-height: 1.55; }
.destinations-teaser-heading > a { display: inline-flex; align-items: center; gap: 9px; padding: 11px 15px; border: 1px solid rgba(110, 220, 240, .34); border-radius: 999px; background: rgba(7, 19, 32, .5); color: #99e9f6; font-size: 13px; font-weight: 700; white-space: nowrap; }
.destinations-teaser-heading > a:hover { border-color: #99e9f6; color: var(--white); }
.unlocked-qualifier { margin-top: 14px; color: var(--ink-300); font: 600 10px/1.5 var(--font-mono); }
/* How a first flight opens up the map: the three steps, side by side */
.unlock-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; counter-reset: none; }
.unlock-steps li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: start; padding: 16px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; background: rgba(7, 19, 32, .35); }
.unlock-steps li > span { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(110, 220, 240, .28); border-radius: 10px; background: rgba(71, 198, 224, .1); color: #99e9f6; font: 700 11px/1 var(--font-mono); }
.unlock-steps strong { display: block; color: var(--white); font-size: 15px; line-height: 1.25; }
.unlock-steps p { margin-top: 4px; color: var(--ink-300); font-size: 13px; line-height: 1.5; }
.unlock-close { margin-top: 16px; color: var(--ink-300); font-size: 13px; line-height: 1.55; }
@media (max-width: 900px) {
  .unlock-steps { grid-template-columns: 1fr; }
}
.destinations-teaser.number-only .destinations-teaser-heading { grid-template-columns: minmax(0, 900px) auto; }
.destinations-teaser.number-only #destinations-teaser-copy { color: var(--brand-300); font-size: clamp(20px, 2vw, 27px); font-weight: 720; }
.unlocked-teaser-fallback { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 17px; align-items: center; width: min(100%, 720px); min-height: 150px; padding: 22px; border: 1px dashed rgba(110, 220, 240, .28); border-radius: 15px; background: rgba(7, 19, 32, .35); }
.unlocked-teaser-fallback > span { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 14px; background: rgba(71, 198, 224, .13); color: #99e9f6; font-size: 23px; }
.unlocked-teaser-fallback strong { color: var(--white); font-size: 17px; }
.unlocked-teaser-fallback p { margin-top: 6px; color: var(--ink-300); font-size: 13px; line-height: 1.5; }

/* How it works */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; }
.step { min-height: 250px; padding: 30px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); box-shadow: 0 16px 38px -34px rgba(22, 50, 79, .5); }
.step + .step { padding-left: 30px; border-left: 1px solid var(--line); }
.step-icon { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 15px; background: var(--brand-50); font-size: 27px; }
.step h3 { max-width: 280px; margin-top: 30px; font-size: clamp(24px, 2.5vw, 31px); line-height: 1.15; }
.step p { max-width: 310px; margin-top: 14px; color: var(--muted); font-size: 15px; }
.mechanic-close { display: grid; grid-template-columns: 1fr 1fr; gap: 42px; align-items: end; margin-top: 46px; }
.mechanic-close p { max-width: 620px; color: var(--muted); }
.mechanic-close strong { color: var(--brand-600); font-size: clamp(25px, 3.3vw, 42px); letter-spacing: -.025em; line-height: 1.12; }

/* Definition */
.getaway-definition { background: var(--paper); }
.getaway-definition .section-intro h2 { max-width: 1160px; }
.definition-copy {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
  gap: clamp(42px, 7vw, 92px);
  align-items: start;
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.definition-text { display: grid; gap: 16px; }
.definition-copy p { max-width: 760px; color: var(--muted); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; }
.definition-copy strong { max-width: 520px; color: var(--brand-700); font-size: clamp(21px, 2.1vw, 28px); letter-spacing: -.02em; line-height: 1.25; }
.definition-side { display: grid; gap: 24px; }
.definition-preview { overflow: hidden; border: 1px solid var(--brand-100); border-radius: 18px; background: var(--white); box-shadow: 0 26px 62px -44px rgba(9, 74, 68, .7); }
.definition-preview img { width: 100%; height: 360px; object-fit: cover; object-position: top; }
.definition-preview figcaption { padding: 12px 15px; border-top: 1px solid var(--brand-100); color: var(--muted); font: 600 11px/1.4 var(--font-mono); }
.gallery-trigger { position: relative; display: block; width: 100%; min-width: 0; padding: 0; overflow: hidden; border: 0; border-radius: 14px; background: transparent; color: inherit; cursor: zoom-in; text-align: left; }
.definition-preview .gallery-trigger { border-radius: 0; }
.gallery-trigger img { display: block; transition: filter .25s ease, transform .45s var(--ease); }
.gallery-trigger:hover img { filter: brightness(.88); transform: scale(1.012); }
.gallery-trigger:focus-visible { outline: 3px solid var(--brand-400); outline-offset: -3px; }
.gallery-zoom { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid rgba(255, 255, 255, .32); border-radius: 999px; background: rgba(5, 26, 38, .86); box-shadow: 0 10px 30px -18px rgba(3, 20, 30, .9); color: var(--white); font-size: 11px; font-weight: 750; letter-spacing: .01em; pointer-events: none; transition: background .2s ease, transform .2s ease; }
.gallery-trigger:hover .gallery-zoom { background: var(--brand-600); transform: translateY(-2px); }

/* Trip shapes */
.shape-grid { display: grid; gap: 22px; margin-top: 56px; }
.shape-card {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(420px, 1.15fr);
  overflow: hidden;
  min-height: 430px;
  border: 1px solid rgba(9, 74, 68, .13);
  border-radius: 22px;
  background: var(--white);
  box-shadow: 0 22px 52px -42px rgba(9, 74, 68, .45);
}
.shape-card:nth-child(even) .shape-copy { order: 2; }
.shape-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 5vw, 64px); }
.shape-label { color: var(--brand-600); font: 650 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.shape-copy h3 { margin-top: 16px; font-size: clamp(31px, 3.2vw, 44px); line-height: 1.1; }
.shape-copy > p:not(.shape-label) { margin-top: 20px; color: var(--muted); font-size: 16px; }
.shape-copy .shape-punch { color: var(--brand-700) !important; font-weight: 680; }
.shape-fare { display: inline-flex; margin-left: 9px; padding: 5px 9px; border-radius: 999px; background: var(--brand-100); color: var(--brand-700); font-size: 14px; line-height: 1; white-space: nowrap; }
.shape-map { min-height: 430px; background: #e9f7f3; }

/* Destinations Unlocked explainer */
.destinations-unlocked {
  background: linear-gradient(145deg, #071d2a 0%, #0a2f37 55%, #07332f 100%);
  color: var(--white);
}
.destinations-unlocked .section-intro .eyebrow { color: #6edcf0; }
/* This headline is longer than one line at desktop width, so it wraps where the
   other section headlines hold to one line. */
.destinations-unlocked .section-intro h2 { max-width: 1120px; color: var(--white); white-space: normal; text-wrap: balance; }
.destinations-unlocked .section-intro > p:last-child { max-width: 900px; color: var(--ink-200); }
.unlocked-explainer { display: grid; grid-template-columns: minmax(280px, .58fr) minmax(0, 1.42fr); align-items: start; gap: 24px; min-width: 0; margin-top: 48px; }
.unlocked-explainer > *, .unlocked-browser-heading > div { min-width: 0; }
.unlock-path { display: grid; gap: 10px; }
.unlock-path article { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; padding: 20px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 15px; background: rgba(255, 255, 255, .055); }
.unlock-path article > span { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(110, 220, 240, .28); border-radius: 11px; background: rgba(71, 198, 224, .1); color: #99e9f6; font: 700 11px/1 var(--font-mono); }
.unlock-path strong { display: block; color: var(--white); font-size: 16px; line-height: 1.25; }
.unlock-path p { margin-top: 5px; color: var(--ink-300); font-size: 13px; line-height: 1.5; }
.unlocked-browser { min-width: 0; max-width: 100%; padding: clamp(22px, 3vw, 32px); border: 1px solid rgba(110, 220, 240, .2); border-radius: 20px; background: rgba(255, 255, 255, .065); box-shadow: 0 30px 80px -52px rgba(0, 0, 0, .9); }
.unlocked-browser-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 22px; }
.unlocked-browser-heading .eyebrow { color: var(--brand-300); }
.unlocked-browser-heading h3 { max-width: 700px; margin-top: 9px; color: var(--white); font-size: clamp(25px, 2.7vw, 36px); line-height: 1.12; }
#unlocked-count { display: flex; max-width: 170px; align-items: center; gap: 10px; color: var(--ink-200); line-height: 1.2; text-align: left; }
#unlocked-count:empty { display: none; }
#unlocked-count strong { color: #99e9f6; font-size: 34px; line-height: 1; }
#unlocked-count span { font-size: 11px; font-weight: 680; }
.unlocked-airport-pills { display: flex; min-width: 0; max-width: 100%; flex-wrap: wrap; gap: 7px; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); }
.unlocked-airport-pill { min-height: 32px; padding: 0 11px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; background: rgba(7, 19, 32, .58); color: var(--ink-200); font-size: 11px; font-weight: 650; cursor: pointer; }
.unlocked-airport-pill:hover { border-color: #6edcf0; color: var(--white); }
.unlocked-airport-pill[aria-pressed="true"] { border-color: var(--brand-300); background: var(--brand-500); color: var(--white); }
.unlocked-count-note { margin-top: 14px; color: var(--ink-300); font: 600 10px/1.5 var(--font-mono); }
.unlocked-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; margin-top: 22px; }
/* auto-fill (not auto-fit) in the main browser, so one lone result stays a
   normal-sized card instead of stretching into a full-width letterbox */
.unlocked-card-grid:not(.unlocked-card-grid-compact) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.unlocked-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(9, 74, 68, .15);
  border-radius: 15px;
  background: var(--white);
  color: var(--ink-700);
  box-shadow: 0 20px 44px -34px rgba(0, 0, 0, .82);
  transition: transform .25s var(--ease), box-shadow .25s ease;
}
.unlocked-card:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -34px rgba(0, 0, 0, .9); }
.unlocked-card.compact { display: grid; grid-template-columns: 112px minmax(0, 1fr); min-height: 216px; }
.unlocked-card-grid-compact .unlocked-card:only-child { max-width: 610px; }
/* The cards' space while the reach data loads (13 Oct 2026), about one row of compact cards. */
.unlocked-teaser-loading { grid-column: 1 / -1; min-height: 218px; border-radius: 16px; background: rgba(255, 255, 255, .04); }
@media (max-width: 760px) { .unlocked-teaser-loading { flex: 1 0 100%; min-height: 255px; } }
.unlocked-card.compact .unlocked-card-photo { height: 100%; min-height: 216px; }
.unlocked-card.compact .unlocked-card-body { align-self: center; padding: 15px; }
.unlocked-card.compact .unlocked-card-body h3 { font-size: 19px; }
.unlocked-card.compact .unlocked-route { font-size: 9.5px; line-height: 1.45; }
.unlocked-card.compact .unlocked-meta { align-items: start; flex-direction: column; gap: 5px; }
.unlocked-card.compact .unlocked-meta strong { white-space: normal; line-height: 1.15; }
.unlocked-card.compact .unlocked-safe { top: 9px; left: 8px; max-width: 110px; border-radius: 9px; font-size: 10px; }
.unlocked-card-photo { position: relative; display: grid; height: 164px; place-items: center; overflow: hidden; background: linear-gradient(135deg, var(--brand-700), var(--water)); color: var(--brand-300); font-size: 42px; }
.unlocked-card-photo::after { position: absolute; inset: auto 0 0; height: 48%; background: linear-gradient(transparent, rgba(3, 23, 35, .46)); content: ""; pointer-events: none; }
.unlocked-card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.unlocked-card:hover .unlocked-card-photo img { transform: scale(1.025); }
.unlocked-safe { position: absolute; z-index: 1; top: 12px; left: 12px; padding: 7px 9px; border: 1px solid rgba(255, 255, 255, .42); border-radius: 999px; background: rgba(6, 35, 45, .87); color: var(--white); font-size: 10.5px; font-weight: 750; line-height: 1.2; }
.unlocked-card-body { padding: 18px; }
.unlocked-country { color: var(--brand-600); font: 700 10px/1 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; }
.unlocked-card-body h3 { margin-top: 8px; color: var(--ink-800); font-size: 23px; line-height: 1.15; }
.unlocked-route { margin-top: 13px; color: var(--muted); font-size: 11px; font-weight: 620; line-height: 1.55; }
.unlocked-meta { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line); }
.unlocked-meta span { color: var(--muted); font-size: 11px; }
.unlocked-meta strong { color: var(--brand-700); font-size: 17px; white-space: nowrap; }
.unlocked-empty { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 15px; align-items: center; margin-top: 22px; padding: 22px; border: 1px dashed rgba(110, 220, 240, .3); border-radius: 15px; background: rgba(7, 19, 32, .26); }
.unlocked-empty[hidden] { display: none; }
.unlocked-empty > span { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 13px; background: rgba(71, 198, 224, .12); color: #99e9f6; font-size: 21px; }
.unlocked-empty strong { color: var(--white); }
.unlocked-empty p { margin-top: 4px; color: var(--ink-300); font-size: 13px; line-height: 1.5; }
.unlocked-close { max-width: 850px; margin: 30px auto 0; color: var(--ink-200); font-size: 14px; line-height: 1.6; text-align: center; }

/* Why this did not exist before */
.why-built { border-top: 1px solid var(--brand-100); background: linear-gradient(145deg, #f6fbf9, #eaf7f3); }
.why-built .section-intro h2 { white-space: normal; }
.why-built-grid { display: grid; grid-template-columns: minmax(330px, .72fr) minmax(0, 1.28fr); align-items: start; gap: clamp(44px, 7vw, 92px); }
.why-built .section-intro { text-align: left; }
.why-built .section-intro h2 { max-width: 500px; }
.why-built-copy { display: grid; gap: 18px; }
.why-built-copy > p { color: var(--muted); font-size: clamp(16px, 1.4vw, 18px); line-height: 1.65; }
.why-built-copy > p strong { color: var(--ink-700); }

/* Connector */
.connector-heading > .eyebrow { color: var(--brand-300); letter-spacing: .15em; }
.connector-heading h2 { margin-top: 14px; max-width: 1180px; color: var(--white); font-size: var(--section-title); letter-spacing: -.025em; line-height: 1.08; }
.connector-heading > p:last-child { max-width: 980px; margin-top: 16px; color: var(--ink-200); font-size: clamp(16px, 1.4vw, 18px); line-height: 1.55; }
.connector-layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(560px, 1.05fr); align-items: start; gap: clamp(36px, 4.5vw, 62px); margin-top: 38px; }
.connector-copy > p { max-width: 680px; margin-top: 26px; color: var(--ink-200); font-size: 17px; line-height: 1.65; }
.connector-copy > strong { display: block; max-width: 700px; margin-top: 30px; color: var(--white); font-size: 19px; line-height: 1.5; }
.connector-phases { display: grid; gap: 12px; }
.connector-phase {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  background: rgba(255, 255, 255, .05);
}
.connector-phase figure { position: relative; min-height: 100%; background: var(--ink-900); }
.connector-phase img { width: 100%; height: 100%; min-height: 112px; object-fit: cover; }
.connector-phase figcaption { position: absolute; inset: auto 8px 8px; padding: 6px 8px; border-radius: 7px; background: rgba(7, 22, 36, .84); color: var(--white); font: 700 10px/1.2 var(--font-mono); }
.phase-events { display: grid; align-content: center; }
.phase-events > div { display: grid; grid-template-columns: 38px 78px 1fr; align-items: center; min-height: 74px; padding: 10px 14px 10px 10px; }
.phase-events > div + div { border-top: 1px solid rgba(255, 255, 255, .08); }
.phase-events span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; background: rgba(93, 202, 165, .12); font-size: 17px; }
.phase-events b { color: var(--brand-300); font: 700 12px/1 var(--font-mono); white-space: nowrap; }
.phase-events p { display: grid; gap: 2px; color: var(--white); }
.phase-events strong { font-size: 15px; line-height: 1.25; }
.phase-events small { color: var(--ink-300); font-size: 12px; line-height: 1.35; }
.connector-visual { position: sticky; top: 96px; }
.connector-map {
  overflow: hidden;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px;
  background: var(--water);
  box-shadow: 0 28px 55px -30px rgba(0, 0, 0, .9);
}
.connector-map route-map { display: block; width: 100%; }
.connector-visual > p { max-width: 560px; margin: 14px auto 0; color: var(--ink-300); font: 600 11px/1.5 var(--font-mono); text-align: center; }

/* Reach */
.reach { background: var(--water); color: var(--ink-50); border-top: 1px solid rgba(255, 255, 255, .06); }
.reach-heading { display: block; }
.reach .section-intro h2 { max-width: 1100px; white-space: normal; }
.reach-heading > p { max-width: 900px; margin-top: 16px; color: var(--ink-200); font-size: 17px; }
.reach-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.reach-stats span { display: inline-flex; min-height: 44px; align-items: baseline; gap: 7px; padding: 10px 15px; border: 1px solid rgba(93, 202, 165, .22); border-radius: 999px; background: rgba(93, 202, 165, .08); color: var(--ink-200); font-size: 13px; }
.reach-stats b { color: var(--brand-300); font-size: 18px; line-height: 1; }
.reach-grid { display: grid; gap: 20px; margin-top: 22px; }
.reach-network { grid-template-columns: 1fr; }
.reach-grid .map-frame { min-height: 430px; }
.standing { margin-top: 16px; color: var(--ink-300); font-size: 13px; text-align: center; }

/* Search comparison */
.search-pain { background: linear-gradient(160deg, #f2faf7, #e3f4ee 62%, #ddf1ea); }
.compare-intro { max-width: 1184px; }
.compare-intro h2 { max-width: 1120px; margin-top: 14px; font-size: var(--section-title); line-height: 1.08; text-wrap: balance; white-space: normal; }
.compare-intro > p:last-child { max-width: 920px; margin-top: 16px; color: var(--muted); font-size: clamp(16px, 1.4vw, 18px); }
.product-carousel { overflow: hidden; margin-top: 38px; border: 1px solid #d6e4df; border-radius: 22px; background: var(--white); box-shadow: 0 28px 80px -64px rgba(23, 42, 55, .52); }
.product-carousel-top { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 22px 26px; }
.product-carousel-top h3 { margin-top: 8px; font-size: clamp(24px, 2.7vw, 34px); }
.product-carousel-controls { display: flex; gap: 8px; }
.product-carousel-controls button { display: grid; width: 42px; height: 42px; place-items: center; padding: 0; border: 1px solid var(--brand-200); border-radius: 50%; background: var(--brand-50); color: var(--brand-700); font-size: 20px; cursor: pointer; transition: background .2s ease, color .2s ease, transform .2s var(--ease); }
.product-carousel-controls button:hover { background: var(--brand-600); color: var(--white); transform: translateY(-1px); }
.product-carousel-window { overflow: hidden; border-top: 1px solid #d6e4df; }
.product-carousel-track { display: flex; transition: transform .65s var(--ease); }
/* Swipe and drag (13 Oct): sideways moves are the carousel's, up and down stays the page's. */
.product-carousel-window { touch-action: pan-y; cursor: grab; }
.product-carousel-window img { -webkit-user-drag: none; user-select: none; }
.product-carousel.is-dragging .product-carousel-window { cursor: grabbing; user-select: none; }
.product-carousel.is-dragging .product-carousel-track { transition: none; }
.product-slide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .36fr); min-width: 100%; margin: 0; padding: 18px; background: linear-gradient(135deg, #f6faf8, #edf7f4); }
.product-slide img { width: 100%; height: clamp(360px, 39vw, 520px); border: 1px solid #d7e5e1; border-radius: 14px; background: var(--water); object-fit: contain; object-position: top center; box-shadow: 0 18px 44px -38px rgba(9, 74, 68, .8); }
.product-slide:nth-child(1) .gallery-trigger { align-self: center; }
.product-slide:nth-child(1) img { height: auto; }
.product-slide figcaption { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: 10px; padding: clamp(24px, 4vw, 46px); }
.product-slide figcaption strong { color: var(--brand-700); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.1; }
.product-slide figcaption span { color: var(--muted); font-size: 15px; line-height: 1.6; }
.product-carousel-dots { display: flex; justify-content: center; gap: 8px; padding: 13px 18px 16px; border-top: 1px solid #d6e4df; background: var(--white); }
.product-carousel-dots button { width: 8px; height: 8px; padding: 0; border: 0; box-sizing: content-box; outline-offset: 4px; position: relative; border-radius: 999px; background: var(--brand-100); cursor: pointer; transition: width .25s var(--ease), background .25s ease; }
.product-carousel-dots button::after { position: absolute; inset: -14px -6px; content: ""; }
.product-carousel-dots button[aria-pressed="true"] { width: 28px; background: var(--brand-500); }

/* Full-screen product gallery */
body:has(.screenshot-gallery[open]) { overflow: hidden; }
.screenshot-gallery { width: min(1480px, calc(100vw - 28px)); height: min(940px, calc(100dvh - 28px)); max-width: none; max-height: none; padding: 0; overflow: hidden; border: 1px solid rgba(132, 226, 203, .28); border-radius: 22px; background: var(--ink-900); box-shadow: 0 30px 100px rgba(0, 0, 0, .55); color: var(--white); }
.screenshot-gallery:not([open]) { display: none; }
.screenshot-gallery::backdrop { background: rgba(2, 13, 23, .84); backdrop-filter: blur(12px); }
.screenshot-gallery-shell { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; background: radial-gradient(circle at 76% 10%, rgba(77, 207, 177, .12), transparent 34%), linear-gradient(145deg, #071522, #092a33); }
.screenshot-gallery-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 20px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.screenshot-gallery-header > div:first-child { display: grid; gap: 4px; }
.screenshot-gallery-header span { color: var(--brand-200); font: 700 9px/1.1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.screenshot-gallery-header strong { font-size: clamp(16px, 2vw, 21px); }
.screenshot-gallery-status { display: flex; align-items: center; gap: 14px; }
.screenshot-gallery-status > span { color: var(--ink-200); white-space: nowrap; }
.screenshot-gallery-status button { display: grid; width: 40px; height: 40px; place-items: center; padding: 0 0 3px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--white); font-size: 27px; line-height: 1; cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.screenshot-gallery-status button:hover { border-color: var(--brand-200); background: rgba(77, 207, 177, .18); transform: rotate(5deg); }
.screenshot-gallery button:focus-visible { outline: 2px solid var(--brand-200); outline-offset: 3px; }
.screenshot-gallery-stage { display: grid; grid-template-columns: 54px minmax(0, 1fr) 54px; min-height: 0; align-items: center; gap: 14px; padding: 16px 18px 6px; }
.screenshot-gallery-stage figure { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; height: 100%; min-height: 0; margin: 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; background: rgba(255, 255, 255, .055); }
.screenshot-gallery-image { display: flex; min-height: 0; align-items: center; justify-content: center; overflow: hidden; padding: 12px; background: rgba(2, 13, 23, .62); }
.screenshot-gallery-image img { display: block; width: auto; max-width: 100%; height: auto; max-height: 100%; border-radius: 9px; background: var(--white); object-fit: contain; box-shadow: 0 24px 64px -34px rgba(0, 0, 0, .9); }
.screenshot-gallery-stage figcaption { display: grid; gap: 5px; padding: 14px 18px 16px; border-top: 1px solid rgba(255, 255, 255, .1); }
.screenshot-gallery-stage figcaption > span { color: var(--brand-200); font: 700 9px/1.2 var(--font-mono); letter-spacing: .11em; text-transform: uppercase; }
.screenshot-gallery-stage figcaption strong { font-size: clamp(19px, 2.5vw, 28px); line-height: 1.12; }
.screenshot-gallery-stage figcaption p { max-width: 980px; color: var(--ink-200); font-size: clamp(13px, 1.3vw, 16px); line-height: 1.48; }
.screenshot-gallery-arrow { display: grid; width: 50px; height: 50px; place-items: center; padding: 0; border: 1px solid rgba(132, 226, 203, .32); border-radius: 50%; background: rgba(77, 207, 177, .1); color: var(--brand-200); font-size: 23px; cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s var(--ease); }
.screenshot-gallery-arrow:hover { border-color: var(--brand-200); background: var(--brand-600); color: var(--white); transform: scale(1.05); }
.screenshot-gallery-dots { display: flex; justify-content: center; gap: 8px; padding: 10px 18px 15px; }
.screenshot-gallery-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .25); cursor: pointer; transition: width .2s var(--ease), background .2s ease; }
.screenshot-gallery-dots button[aria-pressed="true"] { width: 30px; background: var(--brand-200); }
/* "How is this different" comparison table */
.cmp-drill { display: grid; gap: 6px; padding: 18px 20px; border-left: 3px solid var(--brand-200); border-radius: 0 12px 12px 0; background: rgba(255, 255, 255, .62); }
.cmp-drill p { color: var(--muted); font-size: 15px; font-weight: 620; line-height: 1.45; }
.cmp-drill .drill-wince { margin-top: 5px; color: var(--ink-700); font-size: 17.5px; font-weight: 780; letter-spacing: -.01em; }
.why-maths { margin-top: clamp(30px, 4vw, 48px); }
.why-maths-head h3 { margin-top: 10px; color: var(--ink-700); font-size: clamp(25px, 2.7vw, 35px); letter-spacing: -.02em; line-height: 1.1; }
.why-maths-head > p:last-child { max-width: 760px; margin-top: 10px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.why-maths-story { display: grid; gap: 10px; max-width: 860px; margin: 18px 0 0; padding: 18px 22px 18px 44px; border-left: 3px solid var(--brand-200); border-radius: 0 12px 12px 0; background: rgba(255, 255, 255, .7); counter-reset: none; }
.why-maths-story li { padding-left: 4px; color: var(--ink-700); font-size: 15.5px; line-height: 1.55; }
.why-maths-story li::marker { color: var(--brand-400); font-weight: 800; }
.why-maths-story strong { color: var(--brand-700); }
.why-maths-story b { color: #c2410c; font-weight: 750; }
.why-maths-multi { max-width: 900px; margin-top: 18px; color: var(--ink-700); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; }
.why-maths-multi strong { color: #c2410c; }
.why-stat span b { color: var(--ink-700); }
.why-maths-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.why-stat { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border: 1px solid var(--brand-100); border-radius: 16px; background: rgba(255, 255, 255, .78); }
.why-stat strong { color: var(--ink-700); font-size: clamp(22px, 2.2vw, 27px); letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.why-stat span { color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.why-stat em { margin-top: auto; padding-top: 8px; color: #c2410c; font-size: 15px; font-style: normal; font-weight: 750; }
.why-stat-us { border-color: var(--brand-300); background: var(--brand-500); }
.why-stat-us strong, .why-stat-us span { color: var(--white); }
.why-stat-us em { color: var(--brand-100); }
.why-maths-note { max-width: 900px; margin-top: 12px; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
@media (max-width: 760px) {
  .why-maths-grid { grid-template-columns: 1fr; }
}
.gold-answer { display: grid; grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: 26px; padding: clamp(26px, 3.5vw, 42px); border: 1px solid var(--brand-200); border-left: 5px solid var(--brand-500); border-radius: 0 20px 20px 0; background: var(--white); box-shadow: 0 26px 60px -48px rgba(9, 74, 68, .8); }
.gold-copy h3 { margin-top: 12px; font-size: clamp(25px, 2.7vw, 35px); line-height: 1.1; }
.gold-sub { margin-top: 9px; color: var(--brand-600); font-size: 16px; font-weight: 720; }
.gold-detail p { color: var(--muted); font-size: 15.5px; line-height: 1.65; }
.gold-count { margin-top: 14px; }
.gold-count strong { color: var(--brand-700); }

/* Founder story */
.founder-story { background: linear-gradient(180deg, var(--white), #f7fbf9); }
.founder-grid { display: grid; grid-template-columns: minmax(440px, .88fr) minmax(0, 1.12fr); gap: clamp(40px, 5vw, 68px); align-items: start; }
.founder-visual { position: sticky; top: 110px; min-width: 0; }
.founder-map { overflow: hidden; border: 1px solid var(--brand-100); border-radius: 20px; background: var(--brand-50); box-shadow: 0 24px 60px -44px rgba(9, 74, 68, .65); }
.founder-map > p { padding: 15px 18px; border-top: 1px solid var(--brand-100); color: var(--muted); font: 500 12px/1.4 var(--font-mono); }
.founder-diary { overflow: hidden; margin-top: 16px; border: 1px solid rgba(77, 207, 177, .35); border-radius: 20px; background: linear-gradient(135deg, var(--ink-800), #0c403e); box-shadow: 0 24px 60px -42px rgba(6, 43, 41, .9); color: var(--white); }
.founder-diary-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 16px 10px; }
.founder-diary-head > div:first-child { display: grid; gap: 3px; }
.founder-diary-head strong { font-size: 16px; }
.founder-diary-kicker { color: var(--brand-200); font: 700 9px/1.2 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; }
.founder-diary-controls { display: flex; gap: 7px; }
.founder-diary-controls button { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--white); cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.founder-diary-controls button:hover { border-color: var(--brand-200); background: rgba(77, 207, 177, .18); transform: translateY(-1px); }
.founder-diary-controls button:focus-visible { outline: 2px solid var(--brand-200); outline-offset: 2px; }
.founder-diary-price { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 16px 12px; padding: 9px 12px; border: 1px solid rgba(132, 226, 203, .24); border-radius: 10px; background: rgba(77, 207, 177, .1); font-size: 12px; }
.founder-diary-price span { color: var(--brand-100); font: 700 9px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.founder-diary-price strong { color: var(--brand-200); font-size: 13px; }
/* No left padding (13 Oct 2026): with 16 px there, scroll-snap moved the strip 16 px as the page
   loaded, to where it rests anyway. In the Lighthouse traces those load-time scrolls (this one and
   the destination cards' 1 px) came before the first paint, and every mobile run reported no LCP
   ("NO_LCP", a score of 0); without them, every run measured it. */
.founder-diary-window { overflow-x: auto; padding: 0 16px 16px 0; outline: none; scrollbar-width: none; scroll-behavior: smooth; scroll-snap-type: x mandatory; }
.founder-diary-window::-webkit-scrollbar { display: none; }
.founder-diary-window:focus-visible { box-shadow: inset 0 0 0 2px var(--brand-200); }
.founder-diary-track { display: flex; width: max-content; gap: 10px; }
.founder-diary figure { position: relative; overflow: hidden; width: clamp(220px, 22vw, 292px); height: 190px; flex: 0 0 auto; border: 1px solid rgba(255, 255, 255, .16); border-radius: 13px; background: var(--ink-700); scroll-snap-align: start; }
.founder-diary figure::after { position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(3, 22, 33, .92)); content: ""; pointer-events: none; }
.founder-diary figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.founder-diary figure:hover img { transform: scale(1.035); }
.founder-diary figcaption { position: absolute; z-index: 1; right: 12px; bottom: 11px; left: 12px; display: grid; gap: 3px; color: var(--white); font-size: 13px; font-weight: 700; }
.founder-diary figcaption span { color: var(--brand-200); font: 700 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.founder-diary-city-start { margin-left: 12px; border-color: var(--brand-200) !important; }
.founder-diary-city-start::before { position: absolute; z-index: 2; top: 10px; left: 10px; padding: 6px 9px; border: 1px solid var(--brand-200); border-radius: 999px; background: rgba(3, 29, 38, .9); color: var(--brand-200); content: "Next stop: Milan"; font: 700 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.founder-copy h2 { margin-top: 14px; font-size: var(--section-title); line-height: 1.08; text-wrap: wrap; }
.founder-copy > p:not(.eyebrow, .founder-signoff) { max-width: 720px; margin-top: 18px; color: var(--muted); font-size: clamp(16px, 1.4vw, 18px); }
.founder-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 760px; margin-top: 24px; }
.founder-highlights > div { display: grid; gap: 7px; padding: 18px; border: 1px solid var(--brand-100); border-radius: 14px; background: var(--white); box-shadow: 0 18px 40px -36px rgba(9, 74, 68, .6); }
.founder-highlights strong { color: var(--brand-700); font-size: 16px; }
.founder-highlights span { color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.founder-copy .founder-origin { margin-top: 30px !important; padding: 18px 20px; border-left: 4px solid var(--brand-300); background: var(--brand-50); color: var(--ink-700) !important; font-weight: 700; }
.founder-signoff { display: flex; align-items: center; gap: 16px; margin-top: 28px; }
.founder-signoff img { width: 76px; height: 76px; flex: 0 0 auto; border: 3px solid var(--white); border-radius: 50%; object-fit: cover; box-shadow: 0 14px 30px -20px rgba(12, 70, 65, .8); }
.founder-signoff p { display: flex; flex-direction: column; }
.founder-signoff strong { color: var(--ink-700); font-size: 18px; }
.founder-signoff span { color: var(--muted); font-size: 13px; }

/* Five ways to search */
.search-modes { border-top: 1px solid var(--brand-100); background: linear-gradient(180deg, #eef8f5 0%, #e4f4ef 100%); }
.search-modes .mode-tabs { box-shadow: 0 14px 34px -26px rgba(9, 74, 68, .55); }
.modes { margin-top: clamp(28px, 3.5vw, 44px); }
.mode-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); width: fit-content; max-width: 100%; }
.mode-tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-700); font-size: 15px; font-weight: 650; cursor: pointer; transition: background .2s ease, color .2s ease; }
.mode-tabs button:hover { background: var(--brand-50); }
.mode-tabs button[aria-selected="true"] { background: var(--brand-500); color: var(--white); }
.mode-panel { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 3.5vw, 48px); align-items: center; margin-top: clamp(20px, 2.6vw, 30px); }
.mode-copy h3 { color: var(--ink-700); font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.02em; line-height: 1.15; }
.mode-copy > p, .filters-intro > p { margin-top: 12px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.mode-copy em { color: var(--ink-700); font-style: italic; font-weight: 600; }
.mode-visual { display: grid; min-width: 0; gap: 16px; }
.mode-stat { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--brand-100); border-radius: 14px; background: var(--brand-50); }
.mode-stat strong { color: var(--brand-600); font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.02em; line-height: 1.05; }
.mode-stat span { color: var(--ink-700); font-size: 14px; line-height: 1.5; }
.mode-proof { margin-top: 16px; padding: 12px 16px; border-radius: 12px; background: var(--white); color: var(--ink-700); font-size: 15px; line-height: 1.5; box-shadow: 0 10px 26px -22px rgba(9, 74, 68, .6); }
.mode-copy > .mode-proof { color: var(--ink-700); }
.mode-proof strong { color: var(--brand-600); }
.mode-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.mode-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--brand-200); border-radius: 999px; background: rgba(255, 255, 255, .7); color: var(--brand-700); font-size: 13.5px; font-weight: 650; }
.mode-chips li::before { color: var(--brand-400); content: "✓"; font-size: 12px; font-weight: 800; }
.mode-kicker { margin-top: 16px; color: var(--brand-600); font-size: 15px; font-weight: 700; }
.mode-panel[hidden] { display: none; }
.mode-shot { margin: 0; overflow: hidden; border: 1px solid rgba(9, 23, 37, .12); border-radius: 16px; background: var(--water); box-shadow: 0 30px 60px -38px rgba(9, 23, 37, .55); }
.mode-shot img { width: 100%; height: auto; }
/* 13 Oct 2026: Single City, Multi-City, Overnighter, Weekender and Christmas Markets show their motion
   scene in place of the screenshot (Rick). The scene draws its own card, so the frame has none; it sizes
   itself to the scene (assets/motion/embed.js), and the copy beside it stays top-aligned so a scene that
   changes height never moves the text. */
.mode-shot.mode-motion { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.mode-motion iframe, .motion-scene iframe, .motion-frame { display: block; width: 100%; height: 360px; border: 0; }
.mode-panel:has(.mode-motion) { align-items: start; }
.reach .motion-scene { margin-top: 22px; }
/* The map gets its own dark stage, which suits the dark screenshot */
.search-map { position: relative; overflow: hidden; background: radial-gradient(ellipse at 78% 40%, rgba(42, 161, 140, .22), transparent 60%), var(--water); }
.mode-map { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 3.5vw, 56px); align-items: center; }
.search-map .mode-map-copy h2 { margin-top: 12px; color: var(--white); font-size: var(--section-title); letter-spacing: -.025em; line-height: 1.08; }
.search-map .mode-map-copy > p { margin-top: 16px; color: var(--ink-200); font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; }
.search-map .mode-shot { border-color: rgba(255, 255, 255, .12); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(93, 202, 165, .12); }
.search-filters { background: var(--white); }
.filters-intro h2 { margin-top: 12px; color: var(--ink-700); font-size: var(--section-title); letter-spacing: -.025em; line-height: 1.08; }
.filters-intro > p { max-width: 760px; }
.search-filters .filter-grid li { background: var(--paper); transition: border-color .2s ease, transform .2s var(--ease); }
.search-filters .filter-grid li:hover { border-color: var(--brand-200); transform: translateY(-2px); }
.filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: clamp(22px, 2.8vw, 32px) 0 0; padding: 0; list-style: none; }
.filter-grid li { display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.filter-grid b { color: var(--ink-700); font-size: 15px; line-height: 1.3; }
.filter-grid span { color: var(--muted); font-size: 14px; line-height: 1.5; }
@media (max-width: 1020px) {
  .mode-panel, .mode-map { grid-template-columns: 1fr; }
  .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The tabs ride along at the top of the screen while you read a mode, and let go when the section
   ends, so switching to Multi-City or the Overnighter never means scrolling back up (Rick, 13 Oct:
   "you don't want to go back up to click multi-city"). Sticky inside .modes, so it stops there. */
/* --mode-tabs-top: site.js sets it under the phone header while that header is showing. */
.mode-tabs { position: sticky; top: var(--mode-tabs-top, calc(env(safe-area-inset-top, 0px) + 10px)); z-index: 30; transition: box-shadow .25s ease; }
.mode-tabs.is-stuck { box-shadow: 0 16px 34px -18px rgba(9, 74, 68, .5); }
.mode-kicker button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: underline; text-decoration-color: var(--brand-200); text-underline-offset: 4px; cursor: pointer; }
@media (max-width: 1020px) {
  /* One row that scrolls sideways, so the stuck bar is a single line and leaves the screen to the mode.
     Phones and tablets alike (13 Oct: at 768 px the five tabs wrapped to two rows). */
  .mode-tabs { flex-wrap: nowrap; overflow-x: auto; border-radius: 16px; width: 100%; scrollbar-width: none; scroll-padding-inline: 6px; overscroll-behavior-x: contain; }
  .mode-tabs::-webkit-scrollbar { display: none; }
  .mode-tabs button { flex: 0 0 auto; justify-content: center; padding: 9px 13px; font-size: 14px; white-space: nowrap; }
}
@media (max-width: 420px) {
  .filter-grid { grid-template-columns: 1fr; }
}

/* Testimonials */
.testimonials { background: var(--brand-50); }
.testimonial-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 28px); margin-top: clamp(28px, 3.5vw, 44px); }
.testimonial { display: flex; flex-direction: column; gap: 16px; padding: clamp(24px, 3vw, 34px); border: 1px solid rgba(20, 99, 91, .13); border-radius: 18px; background: var(--white); box-shadow: 0 24px 48px -36px rgba(12, 70, 65, .55); }
.testimonial-stars { color: #00b67a; font-size: 18px; letter-spacing: 2px; }
.testimonial blockquote { flex: 1 1 auto; }
.testimonial-title { color: var(--ink-700); font-size: clamp(19px, 1.8vw, 22px); font-weight: 700; line-height: 1.25; }
.testimonial blockquote p + p { margin-top: 10px; color: var(--charcoal); font-size: 16px; line-height: 1.6; }
.testimonial figcaption { display: flex; align-items: center; gap: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.testimonial figcaption img { width: 64px; height: 64px; flex: 0 0 auto; border: 3px solid var(--white); border-radius: 50%; object-fit: cover; box-shadow: 0 12px 26px -18px rgba(12, 70, 65, .8); }
.testimonial figcaption span { display: flex; flex-direction: column; }
.testimonial figcaption strong { color: var(--ink-700); font-size: 17px; }
.testimonial figcaption small { color: var(--muted); font-size: 13px; }
.testimonials-more { margin-top: clamp(22px, 2.6vw, 30px); text-align: center; }
.testimonials-more a { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border: 1px solid var(--brand-200); border-radius: 999px; background: var(--white); color: var(--brand-600); font-size: 15px; font-weight: 700; transition: border-color .2s ease, background .2s ease; }
.testimonials-more a:hover { border-color: var(--brand-400); background: var(--brand-50); }
@media (max-width: 760px) {
  .testimonial-grid { grid-template-columns: 1fr; }
}

/* Credibility */
.credibility { padding-block: clamp(64px, 8vw, 96px); border-top: 1px solid var(--brand-100); background: var(--paper); }
.credibility-inner { text-align: center; }
.credibility-inner .eyebrow { color: var(--brand-600); }
.credibility-inner h2 { max-width: 1100px; margin: 14px auto 0; font-size: var(--section-title); line-height: 1.08; }
.credibility-inner h2 a { color: var(--brand-600); text-decoration-color: var(--brand-200); text-decoration-thickness: .08em; text-underline-offset: .1em; }
.featured-label { margin-top: 34px; color: var(--muted); font: 650 11px/1 var(--font-mono); letter-spacing: .15em; text-transform: uppercase; }
.press-logos { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); align-items: center; gap: 18px 34px; max-width: 1040px; margin: 26px auto 0; padding: clamp(24px, 3vw, 38px); border: 1px solid rgba(20, 99, 91, .13); border-radius: 18px; background: rgba(255, 255, 255, .7); }
.press-logos img { width: 100%; height: 48px; object-fit: contain; filter: grayscale(1); opacity: .62; }

/* Capture */
.capture { position: relative; overflow: hidden; padding-block: clamp(72px, 9vw, 118px); background: linear-gradient(125deg, var(--brand-500), #0b6b64 54%, var(--brand-700)); color: var(--white); }
.capture::before { content: none; }
.capture-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .8fr) minmax(560px, 1.2fr); gap: 50px; align-items: center; }
.capture .eyebrow { color: var(--brand-100); }
.capture-copy h2 { margin-top: 14px; color: var(--white); font-size: var(--section-title); line-height: 1.08; }
.capture-copy > .capture-body { max-width: 560px; margin-top: 16px; color: var(--brand-50); font-size: 16px; }
.audience-proof { display: flex; max-width: 560px; align-items: center; gap: 13px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .22); }
.audience-proof strong { color: var(--white); font-size: clamp(25px, 2.5vw, 34px); line-height: 1; }
.audience-proof span { max-width: 280px; color: var(--brand-100); font-size: 12px; font-weight: 650; line-height: 1.35; }
.signup { padding: clamp(24px, 3.5vw, 38px); border: 1px solid rgba(255, 255, 255, .24); border-radius: 18px; background: rgba(6, 54, 50, .28); }
.signup > label { display: block; margin-bottom: 10px; color: var(--white); font-size: 13px; font-weight: 650; }
.signup-row { display: flex; gap: 10px; }
.signup input {
  min-width: 0;
  min-height: 54px;
  flex: 1 1 340px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--white);
  color: var(--charcoal);
}
.signup input::placeholder { color: #8a98a6; }
.signup .btn { flex: 0 0 auto; background: var(--ink-800); }
.signup .btn:hover { background: var(--ink-900); }
.signup .btn:disabled { cursor: wait; opacity: .68; }
.signup-honeypot { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.smallprint { margin-top: 11px; color: var(--brand-100); font-size: 11.5px; }
.signup-trust {
  display: flex; align-items: flex-start; gap: 9px;
  max-width: 46em; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  color: var(--brand-100); font-size: 12.5px; line-height: 1.55;
}
.signup-trust a { color: var(--white); font-weight: 700; }
.signup-trust strong { color: var(--white); }
/* the stars fill to 4.7 out of 5 (94%), Trustpilot green */
.trust-stars {
  flex: none; margin-top: 1px; font-size: 14px; letter-spacing: 1.5px;
  background: linear-gradient(90deg, #00B67A 94%, rgba(255, 255, 255, .3) 94%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.form-error { display: none; margin-top: 13px; color: #ffe0d9; font-size: 13px; font-weight: 650; }
.signup.error .form-error { display: block; }
.thanks { display: none; margin-top: 14px; color: var(--white); font-weight: 650; }
.signup.done .signup-row, .signup.done > label, .signup.done .signup-honeypot, .signup.done .smallprint, .signup.done .form-error { display: none; }
.signup.done .thanks { display: block; }

/* Halftone atmosphere */
.getaway-definition,
#how-it-works,
.trip-shapes,
.destinations-unlocked,
.why-built,
.connector,
.reach,
.search-pain,
.founder-story,
.credibility,
.capture {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.getaway-definition > .shell,
#how-it-works > .shell,
.trip-shapes > .shell,
.destinations-unlocked > .shell,
.why-built > .shell,
.connector > .shell,
.reach > .shell,
.search-pain > .shell,
.founder-story > .shell,
.credibility > .shell,
.capture > .shell {
  position: relative;
  z-index: 1;
}
.getaway-definition::after,
#how-it-works::after,
.trip-shapes::after,
.destinations-unlocked::after,
.why-built::after,
.connector::after,
.reach::after,
.search-pain::after,
.founder-story::after,
.credibility::after,
.capture::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image: url("../img/halftone-field.svg"), url("../img/halftone-field.svg");
  background-position: top -180px right -250px, bottom -200px left -280px;
  background-repeat: no-repeat;
  background-size: 920px auto, 820px auto;
  content: "";
  opacity: .28;
  pointer-events: none;
}
.connector::after,
.destinations-unlocked::after,
.reach::after,
.capture::after { opacity: .44; }

/* Ticker and footer */
.ticker { overflow: hidden; padding: 18px 0; background: var(--brand-800); color: var(--white); }
.ticker-track { display: flex; width: max-content; animation: ticker 54s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }
.ticker-item { display: inline-flex; align-items: center; gap: 12px; padding: 0 28px; white-space: nowrap; font-size: 14px; font-weight: 580; }
.ticker-item .route { display: inline-flex; align-items: center; gap: 8px; }
.ticker-item .hop { color: var(--brand-300); }
.ticker-item .fare { color: var(--brand-100); font-weight: 730; }
.ticker-item .dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, .28); }

.site-footer { padding-block: 42px 54px; background: var(--water); color: var(--ink-300); font-size: 13px; }
.footer-grid { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 28px; }
.footer-brand img { width: 34px; height: 34px; }
.footer-brand strong { color: var(--white); }
.footer-brand span { font-size: 11px; }
.site-footer a { color: var(--brand-300); font-weight: 650; }
/* Capped so the legal line cannot widen its auto column until the brand column
   is too narrow for its own text, which made the two overlap. */
.legal { max-width: 460px; color: #566b7f; }

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

@media (max-width: 1120px) {
  .explorer-intro h1 { white-space: normal; }
  .trips-grid { grid-template-columns: 1fr; }
  .explorer-stage .map-column { width: 100%; max-width: 760px; justify-self: end; }
  .airport-picker {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 10px;
    padding-inline: 16px;
  }
  .airport-pills {
    display: grid;
    grid-template-rows: repeat(2, 34px);
    grid-template-columns: none;
    grid-auto-columns: max-content;
    grid-auto-flow: column;
    justify-content: start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }
  .airport-scroll { display: grid; }
  .airport-pill { width: auto; padding-inline: 12px; font-size: 12px; }
}

@media (min-width: 1021px) {
  .section-intro h2,
  .connector-heading h2 { white-space: nowrap; }
}

/* Tablet portrait */
@media (min-width: 761px) and (max-width: 900px) {
  .edt-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .edt-card:last-child {
    display: grid;
    grid-template-columns: minmax(260px, .92fr) minmax(0, 1.08fr);
    grid-column: 1 / -1;
  }
  .edt-card:last-child img { width: 100%; height: 100%; min-height: 220px; }
  .capture { padding-block: 72px; }
  .capture-grid { grid-template-columns: 1fr; gap: 30px; }
  .capture-copy { text-align: center; }
  .capture-copy h2 { text-wrap: balance; }
  .capture-copy > .capture-body, .audience-proof { margin-inline: auto; }
  .signup { width: min(100%, 700px); margin-inline: auto; }
  .footer-grid { grid-template-columns: 1fr auto; gap: 20px 28px; }
  .footer-grid .legal { grid-column: 1 / -1; }
}

/* Tablet */
@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 800px; }
  .hero-proof { max-width: 760px; }
  .explorer-intro { grid-template-columns: 1fr; gap: 22px; }
  .explorer-intro > p { max-width: 720px; }
  .airport-bar { grid-template-columns: 190px minmax(0, 1fr); }
  .trips-grid { grid-template-columns: 1fr; }
  .map-frame { min-height: 430px; }
  .definition-copy { grid-template-columns: 1fr; gap: 24px; }
  .definition-side { gap: 20px; }
  .shape-card { grid-template-columns: 1fr; }
  .shape-card:nth-child(even) .shape-copy { order: initial; }
  .shape-map { min-height: 390px; }
  .unlocked-explainer { grid-template-columns: 1fr; }
  .unlock-path { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .unlock-path article { grid-template-columns: 1fr; }
  .why-built-grid { grid-template-columns: 1fr; gap: 32px; }
  .why-built .section-intro h2 { max-width: 720px; }
  .connector-layout { grid-template-columns: 1fr; }
  .connector-visual { position: relative; top: auto; max-width: 820px; width: 100%; }
  .reach-heading { grid-template-columns: 1fr; gap: 24px; }
  .reach-grid { grid-template-columns: 1fr; }
  .reach-grid .uk-map { min-height: 330px; }
  .founder-grid { grid-template-columns: 1fr; }
  .founder-copy { order: -1; }
  .founder-visual { position: static; }
  .capture-grid { grid-template-columns: 1fr; gap: 34px; }
  .capture-copy > .capture-body { max-width: 760px; }
}

/* The airport picker takes the room the EDT badge had; the badge is still in the footer and the credibility strip. */
@media (max-width: 1180px) {
  .from-edt { display: none; }
}

/* Narrow phones: the round badge carries the name, so the wordmark steps aside for the picker */
@media (max-width: 480px) {
  .brandmark-copy { display: none; }
}

@media (max-width: 760px) {
  .header-airport { gap: 0; padding: 0 4px; }
  .header-airport-label { display: none; }
  .header-airport select { max-width: 132px; font-size: 12px; }
}

/* Mobile */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .shell { padding-inline: 18px; }
  .site-header { min-height: 74px; padding: 7px 9px; }
  .header-shell { min-height: 58px; gap: 10px; padding: 7px 8px 7px 9px; border-radius: 16px; }
  .brandmark { gap: 9px; }
  .brandmark-emblem { width: 40px; height: 40px; }
  .brandmark img { width: 34px; height: 34px; }
  .brandmark-status { right: -1px; bottom: 1px; width: 9px; height: 9px; }
  .brandmark strong { font-size: 14px; }
  .brandmark small { display: block; font-size: 8px; letter-spacing: .08em; }
  .from-edt { display: none; }
  .header-cta { min-height: 40px; gap: 8px; padding: 0 7px 0 14px; font-size: 12px; }
  .header-cta-icon { width: 26px; height: 26px; font-size: 11px; }
  .hero { padding-block: 50px 72px; }
  .hero-grid { gap: 44px; }
  .hero h1 { font-size: clamp(47px, 14vw, 66px); line-height: 1.05; }
  .hero .lede { margin-top: 23px; font-size: 18px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 17px; }
  .trust-line { flex-direction: column; gap: 8px; }
  .hero-proof route-map { min-height: 300px; }
  .proof-topline { padding-inline: 16px; }
  .proof-route { padding-inline: 17px; }
  .section-intro h2 { font-size: clamp(35px, 9vw, 44px); }
  .explorer-intro h1 { font-size: clamp(37px, 10vw, 44px); line-height: 1.04; }
  .explorer-intro > p { font-size: 17px; }
  .explorer-subtitle { gap: 10px; margin-top: 20px; }
  .explorer-subtitle p { font-size: 15px; line-height: 1.5; }
  .explorer-intro .explorer-proof { max-width: 100%; padding: 9px 12px; font-size: 13px; }
  .airport-showcase { margin-top: 26px; padding: 12px; border-radius: 20px; }
  .airport-bar { padding: 8px 0 14px; }
  .airport-bar-label .eyebrow { font-size: 13px; }
  .airport-bar-label > p:last-child { padding-inline: 12px; font-size: 15px; }
  .airport-picker { grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 7px; padding-inline: 10px; }
  .airport-scroll { width: 34px; height: 34px; }
  .explorer-stage .map-frame { aspect-ratio: 1.02; }
  .map-frame { min-height: 330px; }
  .trips-side { padding: 20px; }
  .trip-row { padding: 15px; }
  .trip-route { padding-right: 6px; font-size: 14px; }
  .trip-price { font-size: 16px; }
  .trip-edt { margin-top: 8px; }
  .daytrip-unlock { margin-top: 22px; padding: 30px 18px 24px; }
  .trip-continues { left: 18px; }
  .daytrip-copy h2 { font-size: clamp(35px, 9vw, 44px); }
  .daytrip-answer { font-size: 18px; }
  .linked-route { margin-top: 20px; padding: 13px 14px; font-size: 12px; }
  .edt-cards { grid-template-columns: 1fr; }
  .edt-card { display: grid; grid-template-columns: 112px 1fr; }
  .edt-card img { width: 112px; height: 100%; min-height: 176px; }
  .destinations-teaser { padding: 27px 18px 22px; }
  .destinations-teaser-heading { grid-template-columns: 1fr; gap: 18px; }
  .destinations-teaser-heading > a { justify-self: start; }
  /* No left padding (13 Oct 2026): with 1 px there, scroll-snap moved the row 1 px as the page
     loaded, to where it rests anyway. See .founder-diary-window. */
  .unlocked-card-grid-compact { display: flex; gap: 13px; overflow-x: auto; padding: 0 1px 8px 0; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .unlocked-card-grid-compact::-webkit-scrollbar { display: none; }
  .unlocked-card-grid-compact .unlocked-card { flex: 0 0 min(82%, 320px); scroll-snap-align: start; }
  .destinations-unlocked .section-intro h2 { font-size: clamp(35px, 9vw, 44px); }
  .unlocked-explainer { margin-top: 36px; }
  .unlock-path { grid-template-columns: 1fr; }
  .unlock-path article { grid-template-columns: 42px minmax(0, 1fr); }
  .unlocked-browser { padding: 20px 16px; }
  .unlocked-browser-heading { grid-template-columns: 1fr; gap: 13px; }
  .unlocked-browser-heading h3 { white-space: normal; overflow-wrap: anywhere; }
  #unlocked-count { max-width: none; }
  .unlocked-airport-pills { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 7px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .unlocked-airport-pills::-webkit-scrollbar { display: none; }
  .unlocked-airport-pill { flex: 0 0 auto; scroll-snap-align: center; }
  .unlocked-card-grid { grid-template-columns: 1fr; }
  .unlocked-card-photo { height: 190px; }
  .unlocked-route { font-size: 10.5px; }
  .steps { grid-template-columns: 1fr; }
  .step { min-height: 0; padding: 24px; }
  .step + .step { padding-left: 24px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
  .step h3 { margin-top: 20px; }
  .mechanic-close { grid-template-columns: 1fr; gap: 22px; }
  .definition-copy { margin-top: 32px; padding-top: 26px; }
  .definition-copy strong { font-size: 25px; }
  .definition-preview img { height: clamp(300px, 58vw, 520px); }
  .shape-grid { margin-top: 38px; }
  .shape-card { min-height: 0; }
  .shape-copy { padding: 28px 24px 32px; }
  .shape-map { min-height: 310px; }
  .why-built-grid { grid-template-columns: 1fr; gap: 28px; }
  .why-built .section-intro h2 { max-width: 720px; }
  .connector-heading h2 { font-size: clamp(35px, 9vw, 44px); line-height: 1.08; }
  .connector-layout { margin-top: 36px; }
  .connector-phase { grid-template-columns: 1fr; }
  .connector-phase figure { min-height: 160px; }
  .connector-phase img { height: 160px; min-height: 160px; }
  .phase-events > div { grid-template-columns: 38px 80px 1fr; padding-right: 12px; }
  .connector-visual { max-width: none; }
  .reach-grid .map-frame { min-height: 0; }
  .product-carousel-top { align-items: flex-start; padding: 20px; }
  .product-slide { grid-template-columns: 1fr; padding: 12px; }
  .product-slide img { height: 76vw; max-height: 430px; }
  .product-slide figcaption { padding: 24px 16px 18px; }
  .product-slide figcaption strong { font-size: 24px; }
  .screenshot-gallery { width: calc(100vw - 12px); height: calc(100dvh - 12px); border-radius: 16px; }
  .screenshot-gallery-header { padding: 13px 14px; }
  .screenshot-gallery-header > div:first-child span { display: none; }
  .screenshot-gallery-header strong { font-size: 15px; }
  .screenshot-gallery-status { gap: 9px; }
  .screenshot-gallery-stage { position: relative; grid-template-columns: minmax(0, 1fr); padding: 8px 8px 4px; }
  .screenshot-gallery-stage figure { border-radius: 12px; }
  .screenshot-gallery-image { padding: 7px; }
  .screenshot-gallery-stage figcaption { gap: 4px; padding: 12px 14px 14px; }
  .screenshot-gallery-stage figcaption strong { font-size: 19px; }
  .screenshot-gallery-stage figcaption p { font-size: 12.5px; line-height: 1.4; }
  .screenshot-gallery-arrow { position: absolute; z-index: 2; top: 42%; width: 42px; height: 42px; border-color: rgba(255, 255, 255, .35); background: rgba(4, 27, 37, .88); color: var(--white); }
  .screenshot-gallery-previous { left: 14px; }
  .screenshot-gallery-next { right: 14px; }
  .screenshot-gallery-dots { padding: 8px 12px 11px; }
  .founder-grid, .capture-grid { grid-template-columns: 1fr; }
  .gold-answer { grid-template-columns: 1fr; gap: 18px; }
  .founder-grid { gap: 42px; }
  .founder-copy { order: -1; }
  .founder-visual { position: static; }
  .founder-diary figure { width: min(76vw, 286px); }
  .founder-highlights { grid-template-columns: 1fr; }
  .compare-intro h2, .founder-copy h2, .capture-copy h2 { font-size: clamp(35px, 9vw, 44px); }
  .press-logos { grid-template-columns: repeat(2, minmax(110px, 1fr)); gap: 16px 24px; }
  .capture-grid { gap: 36px; }
  .signup-row { flex-direction: column; }
  .signup input { flex-basis: 54px; }
  .trip-explorer::after {
    background-position: top -100px right -370px, bottom -130px left -380px;
    background-size: 670px auto, 630px auto;
    opacity: .34;
  }
  .getaway-definition::after,
  #how-it-works::after,
  .trip-shapes::after,
  .destinations-unlocked::after,
  .why-built::after,
  .connector::after,
  .reach::after,
  .search-pain::after,
  .founder-story::after,
  .credibility::after,
  .capture::after {
    background-position: top -110px right -390px, bottom -140px left -390px;
    background-size: 640px auto, 600px auto;
  }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .header-shell { gap: 7px; }
  .header-cta { display: inline-flex; min-height: 38px; padding: 0 6px 0 12px; font-size: 11px; white-space: nowrap; }
  .header-cta-long { display: none; }
  .header-cta-short { display: inline; }
  /* "Stop searching. Start choosing." (Michelle, 10 Sep) is 31 characters against the old 16: on a
     narrow phone it ran under the CTA, so let it break onto a second line rather than clip. */
  .brandmark small { white-space: normal; line-height: 1.35; }
  .hero h1 { font-size: 45px; }
  .credibility-inner h2 { font-size: clamp(32px, 8.6vw, 34px); }
  .credibility-inner h2 a { display: block; font-size: clamp(25px, 7.7vw, 31px); white-space: nowrap; }
  .proof-route p { font-size: 15px; }
  .trip-row { grid-template-columns: 1fr; }
  .trip-price { grid-row: auto; grid-column: 1; margin-top: 6px; }
  .edt-card { grid-template-columns: 96px 1fr; }
  .edt-card img { width: 96px; }
  .edt-route b { font-size: 11px; }
  .edt-schedule p { grid-template-columns: minmax(48px, 1fr) auto 10px auto; }
  .phase-events > div { grid-template-columns: 34px 74px 1fr; padding: 10px 10px 10px 8px; }
  .phase-events span { width: 31px; height: 31px; font-size: 15px; }
  .phase-events strong { font-size: 14px; }
  .phase-events small { font-size: 11.5px; }
}