/* ==========================================================================
   Good Anywhere — base stylesheet
   ========================================================================== */

:root {
  --color-bg: #ffffff;
  --color-fg: #333333;      /* dark gray, used for text and dark surfaces — no true black */
  --color-muted: #6b6b6b;
  --color-line: #e4e4e4;
  /* Nothing on the site is marked with colour. Emphasis and highlights are
     made with glass: a translucent layer, a hairline edge and a blur, sitting
     on top of a photo or a video. */
  --glass-light: rgba(255,255,255,0.14);
  --glass-light-strong: rgba(255,255,255,0.24);
  --glass-light-line: rgba(255,255,255,0.34);
  --glass-dark: rgba(51,51,51,0.06);
  --glass-dark-strong: rgba(51,51,51,0.11);
  --glass-dark-line: rgba(51,51,51,0.16);
  --glass-blur: blur(14px) saturate(160%);

  /* the one colour that marks something. Soft, not a signal light. */
  /* the one accent on the site — a deep gold-green, used both to fill and to mark */
  --color-accent: #a79f48;
  --color-accent-deep: #8a8339;
  --color-accent-soft: rgba(167,159,72,0.30);
  --color-cream: #efe9df;
  --color-sand: #d8cdb8;
  --color-black: #3a3a3a;   /* charcoal gray, kept as a distinct dark tone for panels */
  --color-pink: #f4c9d6;
  --color-forest: #14261f;
  --color-sky: #a9c9e6;

  --font-main: "Archivo", Helvetica, Arial, sans-serif;
  --font-logo: "Fraunces", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;

  --container-width: 1280px;
  --gutter: 48px;
  /* One vertical rhythm for the whole site, so no two sections breathe
     differently. --sec-y is the default; --sec-y-lg is for the moments that
     need room around them (statements, the showcase). */
  --sec-y: 170px;
  --sec-y-lg: 200px;
  --sec-head-gap: 60px;

  --ease: cubic-bezier(.16,.84,.44,1);
}

* { box-sizing: border-box; }

/* Deliberately NOT scroll-behavior: smooth here. Combined with the browser
   restoring your last position, every reload animated the page down the screen
   on its own. Anchor clicks are smoothed in JS instead. */
html { scroll-behavior: auto; }

body {
  margin: 0;
  font-family: var(--font-main);
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4 {
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
h1, h2 {
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
h3, h4 {
  font-family: var(--font-main);
  font-weight: 900;
}

p { margin: 0; }

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------------- reveal-on-scroll ---------------- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------- links ---------------- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.link-arrow.small { font-size: 12px; }
.link-arrow::after {
  content: "→";
  transition: transform .3s var(--ease);
}
.link-arrow:hover::after { transform: translateX(4px); }


/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 300;
  padding-top: 16px;
}

.header-inner {
  display: flex;
}

/* ---------------- floating glass pill nav ---------------- */
.nav-pill {
  display: flex;
  align-items: center;
  gap: 32px;
  width: 100%;
  padding: 10px 10px 10px 22px;
  border-radius: 16px;
  /* keeps just enough tint to hold white text over the white sections,
     and leans on blur and a lit top edge for the rest */
  background: linear-gradient(150deg, rgba(74,74,74,0.44), rgba(74,74,74,0.26));
  backdrop-filter: blur(26px) saturate(190%);
  -webkit-backdrop-filter: blur(26px) saturate(190%);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 -1px 0 rgba(255,255,255,0.08),
    0 14px 38px rgba(60,60,60,0.16);
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.logo {
  font-family: var(--font-logo);
  font-weight: 600;
  font-size: 19px;
  color: #fff;
  white-space: nowrap;
}
.logo em {
  font-style: italic;
  font-weight: 500;
}
.logo sup {
  font-size: 0.5em;
  margin-left: 2px;
  font-style: normal;
  opacity: .8;
}

.quick-nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.quick-nav a {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.85);
  padding: 9px 15px;
  border-radius: 11px;
  transition: color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
/* Hover and the page you're on are both a capsule, not a colour: hover lifts
   out of the bar, the current page presses into it. */
.quick-nav a:hover {
  color: #fff;
  background: rgba(255,255,255,0.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
}
.quick-nav a.is-current {
  color: #fff;
  background: rgba(0,0,0,0.3);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.26);
}

.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28);
  cursor: pointer;
  transition: background .25s var(--ease);
  padding: 0;
  flex-shrink: 0;
}

.grid-icon {
  display: grid;
  grid-template-columns: repeat(2, 4px);
  grid-template-rows: repeat(3, 4px);
  gap: 3px;
}
.grid-icon i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
}
.close-icon {
  display: none;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  font-weight: 400;
}
.nav-toggle[aria-expanded="true"] {
  background: rgba(255,255,255,0.3);
  border-color: rgba(255,255,255,0.5);
}
.nav-toggle[aria-expanded="true"] .close-icon { color: #fff; }
.nav-toggle[aria-expanded="true"] .grid-icon { display: none; }
.nav-toggle[aria-expanded="true"] .close-icon { display: block; }

/* ---------------- fullscreen nav overlay ---------------- */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--color-fg);
  color: #fff;
  display: flex;
  align-items: flex-start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  transition: opacity .5s var(--ease), visibility 0s linear .5s;
}
.nav-overlay.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity .5s var(--ease);
}
.nav-overlay-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 48px;
  /* clears the floating nav pill, which sits above this */
  padding-top: 128px;
  padding-bottom: 52px;
  min-height: 100%;
}
.overlay-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.overlay-nav a {
  display: flex;
  align-items: baseline;
  gap: 20px;
  font-size: clamp(30px, 6vw, 62px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), color .3s var(--ease);
}
.nav-overlay.is-open .overlay-nav a {
  opacity: 1;
  transform: translateY(0);
}
.overlay-nav a:hover {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.35);
  text-decoration-thickness: 3px;
  text-underline-offset: 10px;
}
.overlay-nav a.is-current {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: #fff;
  text-decoration-thickness: 3px;
  text-underline-offset: 10px;
}
.overlay-nav a.is-current span { color: #fff; }
.overlay-nav a span {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-muted);
}

.overlay-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  opacity: 0;
  transition: opacity .6s var(--ease) .2s;
}
.nav-overlay.is-open .overlay-footer { opacity: 1; }
.overlay-col h4 {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  margin-bottom: 10px;
  text-transform: uppercase;
}
.overlay-col p { line-height: 1.7; }
.overlay-col a:hover { text-decoration: underline; }

/* short screens — a laptop at 720px, a small phone — shrink rather than scroll */
@media (max-height: 780px) {
  .nav-overlay-inner {
    gap: 28px;
    padding-top: 104px;
    padding-bottom: 36px;
  }
  .overlay-nav a {
    font-size: clamp(24px, 4.6vw, 42px);
    padding: 4px 0;
  }
  .overlay-footer { gap: 32px; }
}

/* stagger the overlay links */
.overlay-nav a:nth-child(1) { transition-delay: .05s; }
.overlay-nav a:nth-child(2) { transition-delay: .1s; }
.overlay-nav a:nth-child(3) { transition-delay: .15s; }
.overlay-nav a:nth-child(4) { transition-delay: .2s; }
.overlay-nav a:nth-child(5) { transition-delay: .25s; }

.no-scroll { overflow: hidden; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  height: 100vh;
  height: 100lvh;
  min-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-cream);
}
.hero.js-ready { cursor: none; }
.hero-media {
  position: absolute;
  inset: 0;
}
.hero-video {
  width: 100%;
  height: 120%;
  object-fit: cover;
  will-change: transform;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  /* a vertical wash plus a soft pool in the middle, so the claim holds up
     over the bright neon shots as well as the dark ones */
  background:
    radial-gradient(60% 45% at 50% 50%, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.4) 100%);
  transition: opacity .4s var(--ease);
}
.hero.is-active .hero-overlay { opacity: 0.5; }

/* ---------------- cursor-following click & hold hint ---------------- */
.hero-hint {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(6px);
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease);
  transform: translate(-9999px, -9999px);
}
.hero.is-hovering .hero-hint { opacity: 1; }
.hero-hint-text {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.hero-hint-icon {
  display: flex;
  align-items: center;
}

.hero-content {
  position: relative;
  color: #fff;
  text-align: center;
  padding: 0 24px;
}
.hero-claim {
  font-family: var(--font-mono);
  font-size: clamp(12px, 1.3vw, 15px);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.9;
}
.hero-claim-sub {
  opacity: 0.7;
}

/* ==========================================================================
   Latest News
   ========================================================================== */
.news {
  position: relative;
  padding: var(--sec-y) 0;
  background: #fff;
  color: var(--color-fg);
  overflow: hidden;
}
/* white behind the rail — the glass comes from the cards, not the section */
.news .container { position: relative; }
/* a plain-white variant: a fixed grid, and cards that stand on their border */
.news-plain { background: var(--color-bg); }
.news .eyebrow { color: var(--color-muted); }
.news .section-sub { color: var(--color-muted); }
.news .link-arrow { color: var(--color-fg); }

.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  margin-bottom: 12px;
}

.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: var(--sec-head-gap);
}
.section-head h2 { font-size: clamp(15px, 1.6vw, 19px); }
.section-head .link-arrow { margin-top: 8px; white-space: nowrap; }
.section-sub {
  color: var(--color-muted);
  font-size: 16px;
  margin-top: 8px;
}

.section-head-center {
  text-align: center;
  max-width: 560px;
  margin: 0 auto var(--sec-head-gap);
}
.section-head-center h2 { font-size: clamp(16px, 1.8vw, 21px); }


/* ==========================================================================
   Statement
   ========================================================================== */
.statement {
  padding: var(--sec-y-lg) 0;
  border-top: 1px solid var(--color-line);
}
.statement-text {
  font-size: clamp(16px, 1.9vw, 23px);
  font-weight: 400;
  line-height: 1.35;
  max-width: 1000px;
}
.statement-lead + .statement-claim { margin-top: 26px; }
.statement-lead {
  display: block;
  font-family: var(--font-mono);
  font-style: italic;
  font-weight: 600;
  color: var(--color-fg);
}
/* the claim lands as a claim; the paragraph under it is meant to be read */
.statement-claim {
  display: block;
  margin: 30px 0 26px;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(12px, 1.2vw, 15px);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.9;
}
.statement-body {
  display: block;
  max-width: 760px;
  font-family: var(--font-main);
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 19px);
  letter-spacing: 0;
  line-height: 1.65;
  color: var(--color-muted);
}

/* ==========================================================================
   Prices
   ========================================================================== */
.prices {
  position: relative;
  padding: var(--sec-y) 0;
  overflow: hidden;
  border-top: 1px solid var(--color-line);
}
.prices-bg { position: absolute; inset: 0; }
.prices-bg img { width: 100%; height: 100%; object-fit: cover; }
.prices-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16,22,14,0.52) 0%, rgba(16,22,14,0.62) 55%, rgba(16,22,14,0.7) 100%);
}
.prices .container { position: relative; }

/* ---------------- billing toggle ---------------- */
.billing-toggle {
  display: flex;
  justify-content: center;
  gap: 4px;
  width: fit-content;
  margin: 0 auto 48px;
  padding: 4px;
  border-radius: 999px;
  background: var(--glass-dark);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255,255,255,0.6);
}
.billing-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: transparent;
  border: 0;
  color: var(--color-muted);
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.billing-option.is-active {
  background: linear-gradient(140deg, rgba(255,255,255,0.85), rgba(255,255,255,0.6));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--color-fg);
  box-shadow: 0 4px 12px rgba(51,51,51,0.08);
}
.billing-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--glass-dark-strong);
  border: 1px solid var(--glass-dark-line);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--color-fg);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.billing-option:not(.is-active) .billing-badge {
  background: rgba(90,90,90,0.1);
  color: var(--color-muted);
}

/* ---------------- price cards ---------------- */
.price-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
  max-width: 1120px;
  margin: 0 auto;
  transition: max-width .4s var(--ease);
}
/* the free plan drops out on yearly, so the row narrows to two */
.price-grid-3.is-yearly {
  grid-template-columns: repeat(2, 1fr);
  max-width: 800px;
}
.price-card[hidden] { display: none; }
.price-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 26px;
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 16px;
  background: linear-gradient(140deg, rgba(255,255,255,0.5), rgba(255,255,255,0.26));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 10px 30px rgba(51,51,51,0.07);
}

/* the picked plan: same glass as the others, just standing a little prouder */
.price-card.is-featured {
  background: linear-gradient(140deg, rgba(255,255,255,0.68), rgba(255,255,255,0.4));
  border-color: rgba(255,255,255,0.9);
  box-shadow: 0 18px 44px rgba(51,51,51,0.13);
}

.price-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.price-card h3 {
  font-size: 19px;
  letter-spacing: 0.02em;
}
.price-badge {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--glass-dark-strong);
  border: 1px solid var(--glass-dark-line);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--color-fg);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.price-pitch {
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-muted);
  margin-top: -6px;
}

.price-amount {
  font-family: var(--font-mono);
  font-size: 40px;
  font-weight: 500;
}
.amount-period {
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 400;
  color: var(--color-muted);
  margin-left: 4px;
}
.price-billing-note {
  font-size: 13px;
  color: var(--color-muted);
  margin-top: -8px;
}

.price-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.price-features li {
  position: relative;
  padding-left: 24px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-fg);
  opacity: 0.8;
}
.price-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}
.price-group::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-line);
}
.price-group-note {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--color-muted);
  margin-top: -2px;
}
.price-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--color-fg);
  opacity: 0.5;
}

.feature-new {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--color-accent);
  border: 1px solid var(--color-accent-deep);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  vertical-align: 1px;
}

.price-card .btn { align-self: flex-start; margin-top: auto; padding: 12px 24px; }

.price-note {
  margin-top: 32px;
  text-align: center;
  font-size: 13px;
  color: var(--color-muted);
}

/* ==========================================================================
   Values / stacked text
   ========================================================================== */
.values {
  padding: var(--sec-y-lg) 0;
  text-align: center;
  border-top: 1px solid var(--color-line);
}
.stack-text {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.stack-line {
  font-family: var(--font-mono);
  font-size: clamp(19px, 2.9vw, 36px);
  font-weight: 600;
  line-height: 1;
}
.stack-pair {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 6px 0;
}
.stack-old {
  font-family: var(--font-mono);
  font-size: clamp(13px, 1.6vw, 18px);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-muted);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(51,51,51,0.3);
}
.stack-new {
  font-family: var(--font-mono);
  font-style: italic;
  font-size: clamp(19px, 2.9vw, 36px);
  font-weight: 600;
  line-height: 1;
  color: var(--color-fg);
}

/* ==========================================================================
   Feature showcase
   ========================================================================== */
.feature-showcase {
  position: relative;
  padding: var(--sec-y-lg) 0;
  overflow: hidden;
}
.feature-bg {
  position: absolute;
  inset: 0;
  background: var(--color-cream);
}
.feature-bg img { width: 100%; height: 100%; object-fit: cover; }
.feature-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.24));
}

.feature-card .section-head-center h2 {
  font-family: var(--font-main);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.feature-card {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 48px 40px;
  background: linear-gradient(140deg, rgba(255,255,255,0.82), rgba(255,255,255,0.62));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 24px;
  box-shadow: 0 40px 90px rgba(0,0,0,0.18);
}

.value-carousel {
  position: relative;   /* so a card's offsetLeft is measured from the track itself */
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin-top: 28px;
  scrollbar-width: none;
}
.value-carousel::-webkit-scrollbar { display: none; }

/* one card at a time, filling the panel edge to edge */
.value-card {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 32px;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 20px;
  background: linear-gradient(140deg, rgba(255,255,255,0.55), rgba(255,255,255,0.28));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.value-head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 20px 44px;
  align-items: start;
}
.value-pill {
  display: inline-block;
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--color-fg);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 16px;
}
.value-card h3 {
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.2;
}
.value-card p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-muted);
}
.value-media {
  width: 100%;
  aspect-ratio: 21/9;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,0.3);
  margin-top: auto;
}
.value-media img { width: 100%; height: 100%; object-fit: cover; }
.value-media[hidden] { display: none; }

.value-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
}
.value-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-line);
  cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.value-dots button.is-active {
  background: var(--color-fg);
  transform: scale(1.3);
}

/* ==========================================================================
   How it works page (how-it-works.html)
   ========================================================================== */
.hiw-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100lvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-cream);
  text-align: center;
}
.hiw-hero-media { position: absolute; inset: 0; }
.hiw-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hiw-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(51,51,51,0.25), rgba(51,51,51,0.45));
}
.hiw-hero-content { position: relative; color: #fff; }
.hiw-hero-content h1 {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(12px, 1.3vw, 15px);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.9;
  margin-bottom: 36px;
}
.hiw-hero-sub {
  font-family: var(--font-mono);
  font-size: clamp(12px, 1.3vw, 15px);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.9;
  opacity: 0.7;
  margin: -28px 0 36px;
}


.hiw {
  position: relative;
  padding: var(--sec-y) 0;
  background: #fff;
  overflow: hidden;
  text-align: center;
}
/* white here too — see .news above */
.hiw .container { position: relative; }
.hiw-head { max-width: 760px; margin: 0 auto 40px; }
.hiw-eyebrow {
  display: inline-block;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid var(--color-line);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  margin-bottom: 24px;
}
.hiw-title {
  font-size: clamp(18px, 2.3vw, 28px);
  line-height: 1.1;
  margin-bottom: 20px;
}
.hiw-title span {
  /* its own block, so the balanced wrap applies to the grey half on its own —
     across a <br> the browser balances neither side */
  display: block;
  text-wrap: balance;
  color: #b0b0b0;
  font-family: var(--font-main);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.hiw-intro {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-muted);
  max-width: 600px;
  margin: 0 auto;
}

.hiw-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  margin-bottom: 40px;
  border-radius: 999px;
  border: 1px solid var(--glass-dark-line);
  background: var(--glass-dark);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.hiw-tab {
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-muted);
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.hiw-tab.is-active {
  background: var(--color-fg);
  color: #fff;
}

.hiw-cards {
  display: flex;
  gap: 14px;
  align-items: stretch;
  text-align: left;
  min-height: 440px;
}
.hiw-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--glass-dark-line);
  border-radius: 18px;
  background: linear-gradient(140deg, rgba(255,255,255,0.55), rgba(255,255,255,0.28));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  cursor: pointer;
  transition: flex-grow .55s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.hiw-card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}
.hiw-card-body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  width: 100%;
  min-width: 340px;
  padding: 28px;
  opacity: 0;
  transition: opacity .35s var(--ease);
}
/* a closed card keeps only its photo and a label reading up the side */
.hiw-card-label {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.45);
  opacity: 1;
  transition: opacity .3s var(--ease);
}
.hiw-card-pill {
  align-self: flex-start;
  margin-bottom: auto;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(51,51,51,0.07);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-muted);
  transition: background .4s var(--ease), color .4s var(--ease);
}
.hiw-card h2 {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  margin-bottom: 10px;
}
.hiw-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-muted);
  transition: color .4s var(--ease);
}
.hiw-card-foot {
  padding-top: 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* the open card: takes the width, shows its text over the photo */
.hiw-card.is-active {
  flex-grow: 3.4;
  border-color: transparent;
  box-shadow: 0 24px 50px rgba(60,60,60,0.26);
  color: #fff;
}
.hiw-card.is-active .hiw-card-body { opacity: 1; }
.hiw-card.is-active .hiw-card-label { opacity: 0; }
.hiw-card.is-active .hiw-card-body {
  background: linear-gradient(180deg, rgba(51,51,51,0.55), rgba(51,51,51,0.8));
}
.hiw-card.is-active p { color: rgba(255,255,255,0.85); }
.hiw-card.is-active .hiw-card-pill {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

.hiw-cta { margin-top: 48px; }

/* ---------------- at a glance ---------------- */
.glance {
  position: relative;
  padding: var(--sec-y) 0;
  background: #fff;
  text-align: center;
}

/* ---------------- three layers closing line ---------------- */
/* the mono claim voice from the hero, for lines that should land as a statement */
.claim-voice,
.layers-close {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(12px, 1.25vw, 15px);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.9;
}
.layers-close {
  margin-top: 56px;
  text-align: center;
  color: var(--color-fg);
}

/* ---------------- good to know ---------------- */
.good-to-know { padding: var(--sec-y) 0 0; }
.gtk-list {
  list-style: none;
  padding: 0;
  max-width: 680px;
  margin: 40px auto 0;
  border-top: 1px solid var(--color-line);
}
/* The row was a flex container, which turned every inline tag inside it — a
   <mark>, an <em> — into a flex item of its own, so they marched across the
   line instead of wrapping with the words. The dot is positioned instead, and
   the text is ordinary text again. */
.gtk-list li {
  position: relative;
  padding: 18px 4px 18px 28px;
  border-bottom: 1px solid var(--color-line);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-fg);
}
.gtk-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 25px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--glass-dark-strong);
  border: 1px solid var(--glass-dark-line);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* ---------------- cta actions row ---------------- */
.dest-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* ==========================================================================
   Destination page (e.g. japan.html)
   ========================================================================== */
.dest-hero {
  position: relative;
  min-height: 104vh;
  min-height: 104lvh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--color-cream);
  padding-top: 120px;
}
.dest-hero-media { position: absolute; inset: 0; }
.dest-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.dest-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.6) 100%);
}
.dest-hero-content { position: relative; padding-bottom: 64px; color: #fff; }
.dest-hero-content .eyebrow { color: rgba(255,255,255,0.7); }
.dest-hero-text {
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 500;
  line-height: 1.5;
  max-width: 1000px;
}

.quick-facts { padding: 48px 0; border-bottom: 1px solid var(--color-line); }
.facts-grid { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; }
.fact { flex: 1; min-width: 140px; }
.fact span {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  margin-bottom: 6px;
}
.fact p {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.35;
}

.plan-panel {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.plan-panel[data-bg="cream"]  { background: var(--color-cream); }
.plan-panel[data-bg="sand"]   { background: var(--color-sand); }
.plan-panel[data-bg="black"]  { background: var(--color-black); }
.plan-panel[data-bg="pink"]   { background: var(--color-pink); }
.plan-panel[data-bg="forest"] { background: var(--color-forest); }
.plan-panel[data-bg="sky"]    { background: var(--color-sky); }
.plan-media { position: absolute; inset: 0; opacity: 0.55; }
.plan-media img { width: 100%; height: 100%; object-fit: cover; }
.plan-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.5));
}
.plan-content { position: relative; color: #fff; }
.plan-tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.8;
  margin-bottom: 16px;
}
.plan-title {
  font-family: var(--font-main);
  font-size: clamp(48px, 9vw, 130px);
  font-weight: 900;
  line-height: 0.95;
  margin-bottom: 24px;
}
.plan-desc { font-size: 18px; max-width: 480px; margin-bottom: 32px; opacity: 0.9; }
.plan-meta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.plan-days { display: flex; gap: 8px; }
.plan-days span {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.3);
  font-size: 12px;
}

.dest-cta { padding: var(--sec-y) 0; text-align: center; }
.dest-cta-inner h2 { font-size: clamp(18px, 2.1vw, 25px); margin-bottom: 14px; }
.dest-cta-inner p { font-size: 17px; color: var(--color-muted); margin-bottom: 32px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: 170px;
  color: #fff;
  background: var(--color-fg);
}
.footer-media { position: absolute; inset: 0; z-index: -2; }
.footer-media img,
.footer-media video { width: 100%; height: 100%; object-fit: cover; }
.footer-media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30,34,38,0.42) 0%, rgba(30,34,38,0.58) 55%, rgba(30,34,38,0.78) 100%);
}

/* ---------------- the claim and the sign-up ---------------- */
.footer-lead { text-align: center; padding-bottom: 150px; }
.footer-lead h2 {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: clamp(20px, 2.8vw, 35px);
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin-bottom: 36px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.25);
}
.footer-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  width: min(520px, 100%);
  margin: 0 auto;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.32);
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 14px 38px rgba(0,0,0,0.22);
}
.footer-sub input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px 20px;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: var(--font-main);
  font-size: 15px;
}
.footer-sub input::placeholder { color: rgba(255,255,255,0.6); }
.footer-sub input:focus { outline: none; }
.footer-sub-note {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.6);
}

/* ---------------- the glass panel ---------------- */
.footer-panel {
  margin-bottom: 24px;
  padding: 44px 44px 28px;
  border-radius: 24px 24px 0 0;
  border: 1px solid rgba(255,255,255,0.16);
  border-bottom: 0;
  background: rgba(22,26,30,0.42);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
}
.footer-panel-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 48px;
}
.footer-brand .logo { font-size: 22px; color: #fff; }
.footer-brand p {
  margin-top: 16px;
  max-width: 340px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.6);
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.footer-col h4 {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
  margin-bottom: 14px;
}
.footer-col p { line-height: 2; font-size: 14px; }
.footer-col a { color: rgba(255,255,255,0.62); transition: color .25s var(--ease); }
.footer-col a:hover { color: var(--color-accent); }

.footer-rule {
  height: 1px;
  margin: 40px 0 22px;
  background: rgba(255,255,255,0.14);
}
.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}
.footer-social a {
  margin-left: 14px;
  color: rgba(255,255,255,0.62);
  transition: color .25s var(--ease);
}
.footer-social a:hover { color: var(--color-accent); }

@media (max-width: 900px) {
  .site-footer { padding-top: 110px; }
  .footer-lead { padding-bottom: 100px; }
  .footer-panel { padding: 32px 24px 24px; }
  .footer-panel-top { grid-template-columns: 1fr; gap: 34px; }
  .footer-cols { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (max-width: 560px) {
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 26px 16px; }
  .footer-sub { flex-wrap: wrap; border-radius: 22px; }
  .footer-sub input { flex-basis: 100%; }
  .footer-sub button { width: 100%; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .nav-pill { padding: 8px 8px 8px 18px; }
  .nav-overlay-inner {
    justify-content: flex-start;
    gap: 44px;
    padding-top: 108px;
    padding-bottom: 56px;
  }
  .overlay-nav a { gap: 12px; padding: 8px 0; }
  .overlay-nav a span { font-size: 12px; }
  .price-grid-3,
  .price-grid-3.is-yearly { grid-template-columns: 1fr; max-width: 460px; }
  .section-head { flex-direction: column; }
  .feature-card { padding: 32px 24px; }
  .value-card { padding: 24px 20px; gap: 22px; }
  .value-head { grid-template-columns: 1fr; gap: 14px; }
  .value-media { aspect-ratio: 16/10; }
  .facts-grid { gap: 20px; }
  .fact { min-width: 40%; }
  .plan-meta { flex-direction: column; align-items: flex-start; gap: 16px; }

  .hiw { padding: 80px 0 90px; }
  .hiw-cards { flex-direction: column; min-height: 0; }
  /* stacked, so each card takes the height its own text needs */
  .hiw-card { flex: 0 0 auto; min-height: 230px; height: auto; }
  .hiw-card.is-active { flex: 0 0 auto; min-height: 0; }
  /* every card is open on a phone, so every card needs the scrim — not just
     the active one, or the text drowns in a bright photo */
  .hiw-card-body {
    min-width: 0;
    opacity: 1;
    /* let the card grow to its text instead of clipping the number off the top */
    height: auto;
    background: linear-gradient(180deg, rgba(51,51,51,0.32) 0%, rgba(51,51,51,0.78) 55%, rgba(51,51,51,0.88) 100%);
  }
  .hiw-card { color: #fff; }
  .hiw-card p { color: rgba(255,255,255,0.85); }
  .hiw-card .hiw-card-pill { background: rgba(255,255,255,0.2); color: #fff; }
  .hiw-card-label { display: none; }
  .hiw-card-foot { padding-top: 20px; }
}

@media (max-width: 560px) {
}

@media (max-width: 640px) {
  .quick-nav { display: none; }

  /* one compact bar: logo left, menu button pinned to its right edge */
  .nav-pill {
    gap: 12px;
    padding: 7px 7px 7px 16px;
    justify-content: space-between;
  }
  .logo { font-size: 17px; }
  .nav-toggle { width: 38px; height: 38px; }
}

@media (max-width: 560px) {
}

/* ==========================================================================
   Plan page (plan.html) — one destination + plan + duration
   ========================================================================== */
.plan-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100lvh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--color-cream);
  padding-top: 120px;
}
.plan-hero-media { position: absolute; inset: 0; }
.plan-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.plan-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 50% at 30% 70%, rgba(0,0,0,0.3), rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.12) 40%, rgba(0,0,0,0.62) 100%);
}
.plan-hero-content { position: relative; color: #fff; padding-bottom: 72px; }
.plan-hero-content .eyebrow { color: rgba(255,255,255,0.75); }
.plan-hero-content h1 {
  font-size: clamp(22px, 3.2vw, 40px);
  line-height: 0.98;
  margin-bottom: 20px;
}
.plan-hero-sub {
  font-size: clamp(16px, 1.9vw, 21px);
  line-height: 1.5;
  max-width: 740px;
  color: rgba(255,255,255,0.88);
}
.plan-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}
.plan-hero-meta span {
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---------------- a level of the guide ---------------- */
.plan-level {
  position: relative;
  padding: var(--sec-y) 0;
  /* no overflow:hidden here — it would stop the photo panel from sticking */
  background: var(--color-bg);
}
/* on white the glass has nothing to refract, so these carry a real border */
.plan-level .drop,
.plan-level .itinerary-card,
.plan-level .drop[open] { border-color: rgba(51,51,51,0.2); }
.plan-level .container { position: relative; }
.plan-level-light { background: #fff; }
/* one gap between two levels, not two */
.plan-level + .plan-level { padding-top: 0; }

.plan-level-head { max-width: 720px; margin-bottom: 44px; }
.level-tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid var(--glass-dark-line);
  background: var(--glass-dark-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.plan-level-head h2 {
  font-size: clamp(18px, 2.2vw, 27px);
  margin-bottom: 14px;
}

.plan-lede {
  max-width: 760px;
  margin-bottom: 44px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-muted);
}
.plan-lede-em {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 27px);
  line-height: 1.3;
  color: var(--color-fg);
}

/* ---------------- collapsibles ---------------- */
.drop-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.drop {
  position: relative;
  border: 0;
  border-radius: var(--glass-radius);
  background: var(--glass-body);
  backdrop-filter: var(--glass-frost);
  -webkit-backdrop-filter: var(--glass-frost);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,1),
    inset 0 -14px 32px rgba(255,255,255,0.45),
    inset 0 0 40px rgba(255,255,255,0.35),
    var(--glass-shadow);
  transition: background .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.drop::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(152deg,
      rgba(255,255,255,0.80) 0%,
      rgba(255,255,255,0.22) 24%,
      rgba(255,255,255,0) 46%),
    radial-gradient(130% 90% at 4% -14%, rgba(255,255,255,0.65), transparent 58%);
}
.drop::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  padding: 1.6px;
  background: var(--glass-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.drop > summary,
.drop > .drop-body { position: relative; z-index: 1; }
.drop:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,1),
    inset 0 -10px 26px rgba(255,255,255,0.36),
    var(--glass-shadow-lift);
}
.drop[open] {
  background: var(--glass-body-lit);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,1),
    inset 0 -10px 26px rgba(255,255,255,0.38),
    var(--glass-shadow-lift);
}

.drop summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 700;
}
.drop summary::-webkit-details-marker { display: none; }
.drop summary::after {
  content: "+";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(255,255,255,0.72), rgba(250,250,250,0.34));
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.95),
    inset 0 0 0 1px rgba(198,198,198,0.34),
    0 1px 3px rgba(64,64,64,0.06);
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  color: var(--color-muted);
  transition: transform .4s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease);
}
.drop:hover summary::after,
.drop[open] summary::after {
  background: linear-gradient(145deg, rgba(186,178,88,0.92), rgba(167,159,72,0.82));
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.9),
    inset 0 0 0 1px rgba(138,131,57,0.6),
    0 1px 3px rgba(64,64,64,0.07);
  color: var(--color-fg);
}
.drop[open] summary::after { transform: rotate(180deg); }
.drop[open] summary::after { content: "–"; }
.drop summary:hover::after { color: var(--color-fg); }
.drop-body {
  padding: 0 24px 24px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-muted);
}
.drop-body p + p { margin-top: 14px; }
.drop-note {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.drop-facts {
  list-style: none;
  margin: 4px 0 14px;
  padding: 0;
  border-top: 1px solid rgba(51,51,51,0.1);
}
.drop-facts li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(51,51,51,0.1);
  font-size: 14px;
  color: var(--color-fg);
}
.drop-facts li span { color: var(--color-muted); }

/* ---------------- the days ---------------- */
.days-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 40px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.6);
  background: var(--glass-dark);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.days-tab {
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-muted);
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.days-tab.is-active {
  background: var(--color-accent);
  color: var(--color-fg);
  box-shadow: inset 0 0 0 1px var(--color-accent-deep);
}

/* photo on the left running the height of the section, days on the right */
.days-split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 44px;
  /* stretch, so the photo's track runs the whole list and it stays stuck the whole way */
  align-items: stretch;
  /* sits on the page grid like everything else — it used to bleed to the
     viewport edge while the heading above it started at the container */
  width: 100%;
  max-width: var(--container-width);
  margin: 72px auto 0;
  padding: 0 var(--gutter);
}
.days-media {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
  border-radius: 28px;
}
.days-media > img { width: 100%; height: 100%; object-fit: cover; }
.days-media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(20,24,28,0.1) 0%, rgba(20,24,28,0.44) 100%);
}
/* this pane sits on a dark photo, so it keeps a brighter body — the clear one
   would leave its dark text sitting on a dark image */
.days-media .itinerary-card {
  background: linear-gradient(145deg,
    rgba(255,255,255,0.80) 0%,
    rgba(255,255,255,0.62) 45%,
    rgba(250,250,250,0.68) 100%);
  backdrop-filter: blur(30px) saturate(140%);
  -webkit-backdrop-filter: blur(30px) saturate(140%);
  position: absolute;
  top: auto;
  right: 28px;
  top: 50%;
  left: 28px;
  right: 28px;
  transform: translateY(-50%);
  max-width: 380px;
  margin: 0 auto;
}
.days-rail {
  /* the split now sits inside the container, so the rail no longer has to
     claw back the viewport gutter on the right */
  padding: 8px 0;
}
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* One card per day: the title always showing, the photo and the words folded
   away until it opens. Opening is driven by the scroll — whichever day is
   nearest the middle of the screen unfolds itself — and by clicking a title.
   The thread and the dot run down the left the whole way. */
.tl-item {
  --thread: 11px;
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  grid-template-areas:
    "dot day"
    "dot card";
  align-items: start;
  gap: 0 18px;
  padding-bottom: 16px;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.tl-item.is-in {
  opacity: 1;
  transform: translateY(0);
}
/* the thread runs from each dot down to the next */
.tl-item::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: -2px;
  left: var(--thread);
  width: 2px;
  margin-left: -1px;
  background: rgba(51,51,51,0.14);
}
.tl-item:last-child::before { display: none; }

.tl-dot {
  grid-area: dot;
  position: relative;
  z-index: 1;
  justify-self: center;
  align-self: start;
  width: 13px;
  height: 13px;
  margin-top: 4px;
  border-radius: 50%;
  border: 2px solid rgba(51,51,51,0.22);
  background: #fff;
  transform: scale(0.4);
  transition: transform .45s var(--ease) .12s, border-color .3s var(--ease);
}
.tl-item.is-in .tl-dot { transform: scale(1); }
.tl-item.is-open .tl-dot {
  border-color: var(--color-accent-deep);
  background: var(--color-accent);
}

.tl-day {
  grid-area: day;
  display: block;
  padding: 2px 0 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  transition: color .3s var(--ease);
}
.tl-item.is-open .tl-day { color: var(--color-fg); }

.tl-card {
  grid-area: card;
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: var(--glass-body);
  backdrop-filter: var(--glass-frost);
  -webkit-backdrop-filter: var(--glass-frost);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,1),
    inset 0 -14px 32px rgba(255,255,255,0.45),
    var(--glass-shadow);
  transition: box-shadow .35s var(--ease);
}
.tl-item.is-open .tl-card { box-shadow: var(--glass-shadow-lift); }

/* the head is the whole click target */
.tl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 18px 20px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  color: var(--color-fg);
  -webkit-tap-highlight-color: transparent;
}
.tl-title {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
}
/* a plus that becomes a minus, in the accent the site uses for emphasis */
.tl-mark {
  position: relative;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(51,51,51,0.06);
  box-shadow: inset 0 0 0 1px rgba(198,198,198,0.4);
  transition: background .3s var(--ease), box-shadow .3s var(--ease), transform .4s var(--ease);
}
.tl-mark::before,
.tl-mark::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 11px;
  height: 1.5px;
  margin: -0.75px 0 0 -5.5px;
  border-radius: 2px;
  background: var(--color-fg);
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.tl-mark::after { transform: rotate(90deg); }
.tl-item.is-open .tl-mark {
  background: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent-deep);
}
.tl-item.is-open .tl-mark::after { transform: rotate(0deg); opacity: 0; }

/* grid-template-rows animates from nothing to the content's own height */
.tl-reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease);
}
.tl-item.is-open .tl-reveal { grid-template-rows: 1fr; }
.tl-reveal-inner {
  overflow: hidden;
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.tl-item.is-open .tl-reveal-inner { opacity: 1; transition-delay: .12s; }

/* the photo is as wide as the words */
.tl-photo {
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 16 / 9;
  margin: 0 20px;
  background: var(--color-cream);
}
.tl-photo img { width: 100%; height: 100%; object-fit: cover; }
.tl-reveal-inner p {
  padding: 14px 20px 20px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-muted);
}

@media (prefers-reduced-motion: reduce) {
  .tl-item { opacity: 1; transform: none; transition: none; }
  .tl-item .tl-dot { transform: none; transition: none; }
  .tl-reveal { transition: none; }
}

/* the itinerary card rides along as you read the days */
.itinerary-card {
  position: sticky;
  top: 100px;
  padding: 30px 28px;
  border: 1px solid rgba(255,255,255,0.75);
  border-radius: 20px;
  background: linear-gradient(140deg, rgba(255,255,255,0.68), rgba(255,255,255,0.4));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 20px 48px rgba(51,51,51,0.13);
}
.itin-tag {
  display: inline-block;
  margin-bottom: 16px;
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid var(--color-accent-deep);
  background: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.itinerary-card h3 {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.15;
  margin-bottom: 20px;
}
.itin-rows {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  border-top: 1px solid rgba(51,51,51,0.12);
}
.itin-rows li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(51,51,51,0.12);
  font-size: 14px;
}
.itin-rows li span { color: var(--color-muted); }
.itin-rows li strong { font-weight: 700; text-align: right; }
.itin-note {
  margin-bottom: 22px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-muted);
}
.itinerary-card .btn { width: 100%; text-align: center; padding: 14px 20px; }

/* ---------------- other plans ---------------- */
.plan-more { padding: var(--sec-y) 0; border-top: 1px solid var(--color-line); }
.more-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 44px;
}
.more-card {
  display: block;
  padding: 26px 24px;
  border: 1px solid var(--glass-dark-line);
  border-radius: 16px;
  background: var(--glass-dark);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.more-card:hover { border-color: rgba(51,51,51,0.28); transform: translateY(-3px); }
.more-card span {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

@media (max-width: 900px) {
  .days-split { grid-template-columns: 1fr; margin-top: 36px; }
  /* Same idea as the desktop panel: the photo stays behind the card, it just
     stops being a full-height sticky column and becomes a block that wraps
     the card. Keeping the photo is what makes this read like the web version. */
  .days-media {
    position: relative;
    height: auto;
    min-height: 0;
    border-radius: 24px;
    padding: 30px 20px;
  }
  .days-media > img {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .days-media-overlay { z-index: 0; }
  .days-media .itinerary-card {
    position: relative;
    z-index: 1;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    max-width: none;
    margin: 0;
  }
  /* the split already pays the gutter, so the rail must not pay it twice */
  .days-rail { padding: 0; }
  /* on a phone the thread moves to the edge, the day sits above the card,
     and the photo goes under the words. No outline — the dot does the marking. */
  .tl-item {
    --thread: 9px;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 0 14px;
    padding-bottom: 14px;
  }
  .tl-item::before { top: 10px; }
  .tl-day { padding: 0 0 8px; }
  .tl-dot { margin-top: 1px; }
  .tl-head { padding: 16px 16px; }
  .tl-title { font-size: 16px; }
  .tl-photo { margin: 0 16px; }
  .tl-reveal-inner p { padding: 12px 16px 16px; }
  .itinerary-card { position: static; }
  .more-grid { grid-template-columns: 1fr; }
  .plan-level { padding: 100px 0; }
  .plan-more { padding: 100px 0; }
}
@media (max-width: 640px) {
  .plan-hero-content { padding-bottom: 48px; }
  .drop summary { padding: 18px 18px; font-size: 16px; }
  .drop-body { padding: 0 18px 20px; }
}

/* ==========================================================================
   Content pages — story, curation, roadmap, contact, legal
   ========================================================================== */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 220px 0 110px;
  background: var(--color-bg);
}
/* .page-hero-inner rides on .container, so capping it here used to turn the
   whole block into an 820px centred box — the h1 started 230px to the right of
   everything below it. Cap the children instead and keep the page's left edge. */
.page-hero-inner { position: relative; }
.page-hero-inner > * { max-width: 820px; }
.page-hero h1 {
  font-size: clamp(20px, 2.7vw, 34px);
  line-height: 1.02;
  margin-bottom: 22px;
}
.page-hero-sub {
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.6;
  color: var(--color-muted);
  max-width: 640px;
}

/* the ones that carry a photo */
.page-hero-photo { padding: 260px 0 110px; }
.page-hero-media { position: absolute; inset: 0; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(75% 60% at 25% 60%, rgba(0,0,0,0.34), rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.55) 100%);
}
.page-hero-photo .page-hero-inner { color: #fff; }
.page-hero-photo .eyebrow { color: rgba(255,255,255,0.72); }
.page-hero-photo .page-hero-sub { color: rgba(255,255,255,0.86); }

/* ---------------- long-form copy ---------------- */
.prose-section { padding: 130px 0; }
.prose-section + .prose-section { padding-top: 0; }
.prose-tight { padding: 90px 0 130px; }
.prose-cream { background: #fff; padding: 130px 0; }
.prose-cream + .prose-section { padding-top: 0; }

.prose { max-width: 760px; }
/* When .prose sits ON the container it used to become a 760px centred box, so
   its text started 260px to the right of every grid on the same page. Keep the
   page's left edge and hold the readable measure on the children instead. */
.container.prose { max-width: var(--container-width); }
.container.prose > * { max-width: 760px; }
.prose h2 {
  font-size: clamp(15px, 1.7vw, 20px);
  line-height: 1.15;
  margin: 86px 0 20px;
}
.prose > h2:first-child { margin-top: 0; }
.prose p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-muted);
  margin-bottom: 18px;
}
.prose p strong { color: var(--color-fg); font-weight: 700; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--color-fg); }
.prose-pull {
  margin: 30px 0 26px;
  font-family: var(--font-mono);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.35;
  color: var(--color-fg) !important;
}
.prose .claim-voice {
  margin: 48px 0 0;
  color: var(--color-fg);
}
.doc-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 30px;
}
.doc-flag {
  margin-bottom: 44px;
  padding: 20px 24px;
  border: 1px solid var(--color-accent-deep);
  border-radius: 14px;
  background: var(--color-accent-soft);
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-fg);
}

/* ---------------- three-up cards ---------------- */
.layer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: var(--sec-head-gap);
}
.layer-card {
  padding: 28px 26px;
  border: 1px solid var(--glass-dark-line);
  border-radius: 18px;
  background: var(--glass-dark);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.layer-card h3 { font-size: 22px; margin: 14px 0 10px; }
.layer-card p { font-size: 15px; line-height: 1.65; color: var(--color-muted); }

/* ---------------- numbered steps ---------------- */
.step-list {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  max-width: 860px;
  border-top: 1px solid var(--color-line);
}
.step {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 0 20px;
  padding: 26px 0;
  border-bottom: 1px solid var(--color-line);
}
.step-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  padding-top: 4px;
}
.step h3 { font-size: 20px; margin-bottom: 8px; }
.step p { font-size: 15px; line-height: 1.65; color: var(--color-muted); }

/* ---------------- destination chips ---------------- */
.chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 44px 0;
}
.chip {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--glass-dark-line);
  background: var(--glass-dark);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  font-size: 14px;
  color: var(--color-muted);
}
.chip.is-live {
  border-color: var(--color-accent-deep);
  background: var(--color-accent);
  color: var(--color-fg);
  font-weight: 700;
}

/* ---------------- weekend lines ---------------- */
.weekend-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: var(--sec-head-gap);
}
.weekend {
  padding: 24px 22px;
  border: 1px solid var(--color-line);
  border-radius: 16px;
  background: #fff;
}
.weekend h3 { font-size: 17px; margin-bottom: 8px; }
.weekend p { font-size: 14px; line-height: 1.6; color: var(--color-muted); }

/* ---------------- contact ---------------- */
.contact-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 56px;
  align-items: start;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 34px 32px;
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 20px;
  background: linear-gradient(140deg, rgba(255,255,255,0.7), rgba(255,255,255,0.42));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 14px 38px rgba(51,51,51,0.07);
}
.contact-form label { display: flex; flex-direction: column; gap: 8px; }
.contact-form label span {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-muted);
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: #fff;
  color: var(--color-fg);
  font-family: var(--font-main);
  font-size: 15px;
  resize: vertical;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-accent-deep);
  box-shadow: 0 0 0 4px var(--color-accent-soft);
}
.contact-form .btn { align-self: flex-start; margin-top: 4px; }
.form-note { font-size: 13px; color: var(--color-muted); }
.form-note a { text-decoration: underline; text-underline-offset: 3px; }

.contact-aside { display: flex; flex-direction: column; gap: 30px; padding-top: 6px; }
.contact-block h3 { font-size: 17px; margin-bottom: 8px; }
.contact-block p { font-size: 15px; line-height: 1.65; color: var(--color-muted); }
.contact-block a { text-decoration: underline; text-underline-offset: 3px; }
.contact-mail { margin-top: 8px; }
.contact-mail a { font-size: 16px; color: var(--color-fg); }

@media (max-width: 900px) {
  .page-hero { padding: 170px 0 80px; }
  .page-hero-photo { padding: 200px 0 80px; }
  .prose-section { padding: 80px 0; }
  .prose-cream { padding: 80px 0; }
  .prose-cream + .prose-section { padding-top: 80px; }
  .layer-grid { grid-template-columns: 1fr; }
  .weekend-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-split { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 560px) {
  .weekend-grid { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: 6px; }
  .contact-form { padding: 26px 22px; }
}

/* ---------------- how it works: the flow after you pick ---------------- */
.hiw-after { padding: var(--sec-y) 0; background: #fff; }
.flow {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 48px 0 0;
  padding: 0;
}
.flow-step {
  position: relative;
  padding: 30px 26px;
  border: 1px solid var(--glass-dark-line);
  border-radius: 18px;
  background: var(--glass-dark);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.flow-when {
  display: inline-block;
  margin-bottom: 16px;
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid var(--color-accent-deep);
  background: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.flow-step h3 { font-size: 20px; margin-bottom: 10px; }
.flow-step p { font-size: 15px; line-height: 1.65; color: var(--color-muted); }
.flow-note {
  margin-top: 28px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}
.news-plain .layer-grid { margin-top: 44px; }

@media (max-width: 900px) {
  .hiw-after { padding: 90px 0; }
  .flow { grid-template-columns: 1fr; }
}

/* ---------------- centred collapsibles (What every guide gives you) ---------------- */
.drop-centre {
  max-width: 840px;
  margin: 48px auto 0;
  text-align: left;
}
/* a wide row: label on the left, the answer beside it, the plus on the far right */
.drop-centre summary {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) 34px;
  align-items: center;
  gap: 28px;
  padding: 26px 30px;
}
.drop-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}
.drop-lead {
  /* base typeface, told apart from body copy by size and weight, not by a serif */
  font-family: var(--font-main);
  font-weight: 700;
  font-size: clamp(17px, 1.9vw, 21px);
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--color-fg);
  text-align: right;
}
.drop-centre summary::after {
  justify-self: end;
  align-self: center;
}
.drop-centre .drop-body {
  padding: 0 28px 26px;
  text-align: left;
}
.drop-centre .drop-note a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 760px) {
  /* label left, promise right — on the same line, never stacked */
  .drop-centre summary {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) 30px;
    align-items: center;
    gap: 14px;
    padding: 18px 18px;
  }
  .drop-title { font-size: 10px; letter-spacing: 0.06em; }
  .drop-lead { font-size: 15px; line-height: 1.25; }
  .drop-centre summary::after { width: 30px; height: 30px; font-size: 16px; }
  .drop-centre .drop-body { padding: 0 18px 20px; }
}
@media (max-width: 400px) {
  .drop-centre summary { gap: 10px; padding: 16px 15px; }
  .drop-title { font-size: 9px; }
  .drop-lead { font-size: 14px; }
}

/* ---------------- the promises deal in like a deck ---------------- */
/* the list itself doesn't move — the cards inside do, one after another */
.drop-deal.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}
.drop-deal .drop {
  /* every card starts sitting on top of the first one */
  transform: translateY(calc(var(--i, 0) * (-100% - 12px))) scale(0.965);
  opacity: 0;
  z-index: calc(10 - var(--i, 0));
  transition:
    transform .72s cubic-bezier(.22,.9,.3,1),
    opacity .42s var(--ease),
    border-color .3s var(--ease),
    box-shadow .3s var(--ease);
}
.drop-deal.is-visible .drop {
  transform: none;
  opacity: 1;
}
/* dealt top to bottom, a beat apart */
.drop-deal .drop:nth-child(1) { --i: 0; transition-delay: 0ms, 0ms, 0s, 0s; }
.drop-deal .drop:nth-child(2) { --i: 1; transition-delay: 130ms, 130ms, 0s, 0s; }
.drop-deal .drop:nth-child(3) { --i: 2; transition-delay: 260ms, 260ms, 0s, 0s; }
.drop-deal .drop:nth-child(4) { --i: 3; transition-delay: 390ms, 390ms, 0s, 0s; }
.drop-deal .drop:nth-child(5) { --i: 4; transition-delay: 520ms, 520ms, 0s, 0s; }
.drop-deal .drop:nth-child(6) { --i: 5; transition-delay: 650ms, 650ms, 0s, 0s; }

/* once they've landed, stop reserving the stacking order so opening one works normally */
.drop-deal.is-visible .drop[open] { z-index: 11; }

@media (prefers-reduced-motion: reduce) {
  .drop-deal .drop {
    transform: none;
    opacity: 1;
    transition: none;
  }
}

/* ==========================================================================
   THE GLASS RULE
   --------------------------------------------------------------------------
   "Glass" on this site means one specific thing: a thick, milky, heavily
   frosted pane with a LIT RIM running round it — brightest where light would
   catch it, top-left and bottom-right — soft wide shadows, and generous
   corner radius. Not a translucent rectangle with a hairline border.

   Use .glass on any surface that should read as glass. Nested controls get
   .glass-inset, which is the same material one step smaller and softer.
   ========================================================================== */
:root {
  --glass-radius: 26px;
  /* The body is NEUTRAL — white fading to the faintest grey, never blue.
     A tinted body reads as coloured plastic, not glass. */
  --glass-body: linear-gradient(145deg,
    rgba(255,255,255,0.58) 0%,
    rgba(250,250,250,0.26) 45%,
    rgba(243,243,243,0.38) 100%);
  --glass-body-lit: linear-gradient(145deg,
    rgba(255,255,255,0.74) 0%,
    rgba(253,253,253,0.42) 45%,
    rgba(248,248,248,0.52) 100%);
  /* bright at the two light-catching corners, soft grey in between */
  --glass-rim: linear-gradient(140deg,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,0.96) 13%,
    rgba(168,168,168,0.74) 42%,
    rgba(150,150,150,0.66) 58%,
    rgba(255,255,255,0.92) 84%,
    rgba(255,255,255,1) 100%);
  --glass-frost: blur(34px) saturate(135%);
  /* neutral grey shadow — a blue shadow tints the white page under the card */
  --glass-shadow:
    0 2px 5px rgba(64,64,64,0.05),
    0 14px 30px rgba(64,64,64,0.08),
    0 38px 70px rgba(64,64,64,0.08);
  --glass-shadow-lift:
    0 3px 7px rgba(64,64,64,0.05),
    0 22px 44px rgba(64,64,64,0.10),
    0 56px 98px rgba(64,64,64,0.09);
}

.glass {
  position: relative;
  border: 0;
  border-radius: var(--glass-radius);
  background: var(--glass-body);
  backdrop-filter: var(--glass-frost);
  -webkit-backdrop-filter: var(--glass-frost);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,1),
    inset 0 -14px 32px rgba(255,255,255,0.45),
    inset 0 0 40px rgba(255,255,255,0.35),
    var(--glass-shadow);
  transition: background .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}

/* the sheen: light falling across the top-left face */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(152deg,
      rgba(255,255,255,0.80) 0%,
      rgba(255,255,255,0.22) 24%,
      rgba(255,255,255,0) 46%),
    radial-gradient(130% 90% at 4% -14%, rgba(255,255,255,0.65), transparent 58%);
}

/* the rim: a gradient border, which is what actually sells it as glass */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  padding: 1.6px;
  background: var(--glass-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.glass > * { position: relative; z-index: 1; }

.glass:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,1),
    inset 0 -10px 26px rgba(255,255,255,0.36),
    var(--glass-shadow-lift);
}
.glass.is-lit,
.glass[open] {
  background: var(--glass-body-lit);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,1),
    inset 0 -10px 26px rgba(255,255,255,0.38),
    var(--glass-shadow-lift);
}

/* a control sitting inside a glass pane: same material, one step smaller */
.glass-inset {
  position: relative;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(255,255,255,0.72), rgba(250,250,250,0.34));
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.95),
    inset 0 0 0 1px rgba(198,198,198,0.34),
    0 1px 3px rgba(64,64,64,0.06);
}

/* ==========================================================================
   The glass rule, applied to every glass surface on the site
   Kept in one block so the rule lives in one place and can be tuned once.
   ========================================================================== */
.price-card,
.value-card,
.layer-card,
.flow-step,
.more-card,
.tl-card,
.tl-photo,
.itinerary-card,
.contact-form,
.hiw-card {
  position: relative;
  border: 0 !important;
  background: var(--glass-body);
  backdrop-filter: var(--glass-frost);
  -webkit-backdrop-filter: var(--glass-frost);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,1),
    inset 0 -14px 32px rgba(255,255,255,0.45),
    var(--glass-shadow);
  transition: background .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.price-card::before,
.value-card::before,
.layer-card::before,
.flow-step::before,
.more-card::before,
.tl-card::before,
.itinerary-card::before,
.contact-form::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(152deg,
      rgba(255,255,255,0.80) 0%,
      rgba(255,255,255,0.22) 24%,
      rgba(255,255,255,0) 46%),
    radial-gradient(130% 90% at 4% -14%, rgba(255,255,255,0.6), transparent 58%);
}
.price-card::after,
.value-card::after,
.layer-card::after,
.flow-step::after,
.more-card::after,
.tl-card::after,
.tl-photo::after,
.itinerary-card::after,
.contact-form::after,
.hiw-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1.6px;
  background: var(--glass-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.price-card > *,
.value-card > *,
.layer-card > *,
.flow-step > *,
.more-card > *,
.tl-card > *,
.itinerary-card > *,
.contact-form > * { position: relative; z-index: 1; }
.layer-card:hover,
.flow-step:hover,
.more-card:hover,
.contact-form:hover {
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,1),
    inset 0 -14px 32px rgba(255,255,255,0.5),
    var(--glass-shadow-lift);
}

/* chunkier corners, the way the reference has them */
.price-card    { border-radius: 24px; }
.value-card    { border-radius: 26px; }
.layer-card    { border-radius: 22px; }
.flow-step     { border-radius: 22px; }
.more-card     { border-radius: 20px; }
.tl-card       { border-radius: 20px; }
.tl-photo      { border-radius: 20px; }
.itinerary-card{ border-radius: 24px; }
.contact-form  { border-radius: 26px; }
.hiw-card      { border-radius: 24px; }

/* the picked plan reads as a slightly brighter pane, not a different colour */
.price-card.is-featured { background: var(--glass-body-lit); }

/* small controls: the same material, one step down */
.hiw-tabs,
.days-tabs,
.billing-toggle,
.chip,
.plan-hero-meta span,
.level-tag {
  border: 0 !important;
  background: linear-gradient(145deg, rgba(255,255,255,0.72), rgba(250,250,250,0.42));
  backdrop-filter: blur(18px) saturate(165%);
  -webkit-backdrop-filter: blur(18px) saturate(165%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,1),
    inset 0 0 0 1px rgba(198,198,198,0.38),
    0 1px 3px rgba(64,64,64,0.06);
}
.chip.is-live {
  background: linear-gradient(145deg, rgba(186,178,88,0.96), rgba(167,159,72,0.85));
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.9),
    inset 0 0 0 1px rgba(138,131,57,0.65),
    0 1px 3px rgba(64,64,64,0.07);
}
/* these ones sit over photos, so their rim is pure light */
.plan-hero-meta span{
  background: linear-gradient(145deg, rgba(255,255,255,0.34), rgba(255,255,255,0.14));
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.7),
    inset 0 0 0 1px rgba(255,255,255,0.4),
    0 2px 8px rgba(0,0,0,0.12);
}
.plan-hero-meta span { color: #fff; }

/* the open pane on the ways-in accordion keeps its photo, so no milky body there */
.hiw-card {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--glass-shadow);
}

/* Glass over a photo has something real to refract, so it stays far more
   transparent — the milky body is only for glass sitting on white. */
:root {
  --glass-body-clear: linear-gradient(145deg,
    rgba(255,255,255,0.38) 0%,
    rgba(255,255,255,0.16) 46%,
    rgba(248,248,248,0.22) 100%);
  --glass-body-clear-lit: linear-gradient(145deg,
    rgba(255,255,255,0.52) 0%,
    rgba(255,255,255,0.26) 46%,
    rgba(251,251,251,0.32) 100%);
}
.price-card,
.value-card,
.feature-card {
  background: var(--glass-body-clear);
  backdrop-filter: blur(30px) saturate(175%);
  -webkit-backdrop-filter: blur(30px) saturate(175%);
}
.price-card.is-featured { background: var(--glass-body-clear-lit); }
.price-card:hover { background: var(--glass-body-clear-lit); }

/* the outer showcase panel is glass too */
.feature-card {
  position: relative;
  border: 0 !important;
  border-radius: 30px;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.9),
    inset 0 -14px 32px rgba(255,255,255,0.25),
    0 30px 70px rgba(0,0,0,0.18);
}
.feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1.6px;
  background: linear-gradient(140deg,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,0.45) 22%,
    rgba(255,255,255,0.2) 50%,
    rgba(255,255,255,0.6) 78%,
    rgba(255,255,255,1) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* ==========================================================================
   Breathing room — the rhythm scales down instead of being redefined
   ========================================================================== */
@media (max-width: 900px) {
  :root {
    --gutter: 32px;
    --sec-y: 110px;
    --sec-y-lg: 130px;
    --sec-head-gap: 44px;
  }
  .prose h2 { margin-top: 64px; }
}
@media (max-width: 560px) {
  :root {
    --gutter: 22px;
    --sec-y: 86px;
    --sec-y-lg: 100px;
    --sec-head-gap: 36px;
  }
  .prose h2 { margin-top: 52px; }
}

/* the weekend lines are cards too, so they take the same material */
.weekend {
  position: relative;
  border: 0 !important;
  border-radius: 18px;
  background: var(--glass-body);
  backdrop-filter: var(--glass-frost);
  -webkit-backdrop-filter: var(--glass-frost);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,1),
    inset 0 -14px 32px rgba(255,255,255,0.45),
    var(--glass-shadow);
}
.weekend::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1.6px;
  background: var(--glass-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.weekend > * { position: relative; z-index: 1; }

/* ==========================================================================
   Guide pages: the way in to prices
   A white pill on the dark hero, and the same offer following you down the
   page once the hero has scrolled away.
   ========================================================================== */

.guide-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 34px;
}
.guide-cta-note {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.8);
  max-width: 320px;
}

.guide-bar {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 250;
  padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(150deg, rgba(58,58,58,0.62), rgba(58,58,58,0.46));
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 -10px 30px rgba(51,51,51,0.14);
  transform: translateY(110%);
  opacity: 0;
  transition: transform .45s var(--ease), opacity .35s var(--ease);
}
.guide-bar.is-up {
  transform: none;
  opacity: 1;
}
.guide-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.guide-bar-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.guide-bar-text strong {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.guide-bar-text span {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.guide-bar .cta-pill { padding: 13px 26px; }

@media (max-width: 560px) {
  .guide-cta { gap: 14px; }
  .guide-cta-note { font-size: 13px; }
  .guide-bar-text span { display: none; }
  .guide-bar .cta-pill { padding: 12px 20px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .guide-bar { transition-duration: .01ms; }
}

/* ==========================================================================
   Everything reads down the middle
   One block, so the centring lives in one place instead of being sprinkled
   through every section. Page-level type only — the text inside a card stays
   ranged left, because a wrapped paragraph in a narrow card reads badly centred.
   ========================================================================== */
.section-head,
.statement-text,
.container.prose,
.page-hero-inner,
.plan-level-head,
.hiw-head,
.hero-content,
.stack-text,
.hiw-after .container,
.good-to-know .container { text-align: center; }

/* the ones that were a left column now centre as a column */
.section-head {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.section-head > div { width: 100%; }
.section-head .link-arrow { margin-top: 18px; }

.statement-text,
.plan-level-head,
.hiw-head { margin-left: auto; margin-right: auto; }
.statement-body { margin-left: auto; margin-right: auto; }

.container.prose > * { margin-left: auto; margin-right: auto; }
.page-hero-inner > * { margin-left: auto; margin-right: auto; }
.page-hero-sub { margin-left: auto; margin-right: auto; }

/* rows of pills and buttons line up under the centred type */
.plan-hero-meta,
.guide-cta,
.chip-grid,
.deck-controls,
.dest-cta-actions,
.hiw-cta { justify-content: center; }
.guide-cta { flex-direction: column; }
.guide-cta-note { max-width: 420px; text-align: center; }

/* lists keep their own alignment inside a centred block */
.gtk-list,
.price-features,
.itin-rows { text-align: left; }

@media (max-width: 560px) {
  .section-head .link-arrow { margin-top: 14px; }
}

/* Long copy and anything you interact with stays ranged left: a wrapped
   paragraph or a label/value row reads badly down the middle. */
.drop,
.deck-body,
.tl-card,
.price-card,
.value-card,
.itinerary-card,
.contact-form,
.footer-panel,
.guide-bar-text,
.hiw-card-body,
.fact { text-align: left; }

/* ==========================================================================
   The four plans on a destination page
   Photo, title, description — the card shape the guides used to have, laid
   out as a grid instead of four full-bleed panels you had to scroll past.
   ========================================================================== */
.plans { padding: var(--sec-y) 0; background: #fff; }
.plan-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0;
  border-radius: 24px;
  background: var(--glass-body);
  backdrop-filter: var(--glass-frost);
  -webkit-backdrop-filter: var(--glass-frost);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,1),
    inset 0 -14px 32px rgba(255,255,255,0.45),
    var(--glass-shadow);
  text-align: left;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.plan-card:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,1),
    inset 0 -14px 32px rgba(255,255,255,0.5),
    var(--glass-shadow-lift);
}
.plan-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1.6px;
  background: var(--glass-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.plan-card > * { position: relative; z-index: 1; }

.plan-card-thumb {
  position: relative;
  display: block;
  margin: 10px 10px 0;
  overflow: hidden;
  border-radius: 16px;
  aspect-ratio: 16 / 10;
  background: var(--color-cream);
}
.plan-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.plan-card:hover .plan-card-thumb img { transform: scale(1.04); }
.plan-card-tag {
  position: absolute;
  top: 12px; left: 12px;
  padding: 6px 13px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.34);
}

.plan-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 24px 24px;
}
.plan-card-body h3 {
  font-family: var(--font-mono);
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.12;
  margin-bottom: 10px;
}
.plan-card-body h3 a { color: var(--color-fg); }
.plan-card-body h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.plan-card-body > p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-muted);
  margin-bottom: 20px;
}
.plan-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: auto;
}

@media (max-width: 860px) {
  .plan-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ==========================================================================
   No stray words on their own line
   A heading that wrapped as "…how far you want to / go." left one word
   stranded. text-wrap: balance evens the lines out so the last one is never
   a single word; pretty does the same job for body copy, where balancing
   whole paragraphs would be wrong.
   ========================================================================== */
h1, h2, h3, h4,
.hiw-title,
.plan-title,
.statement-lead,
.statement-claim,
.hero-claim,
.stack-text,
.layers-close,
.claim-voice,
.deck-body h3,
.tl-title,
.price-card-head h3,
.value-card h3,
.plan-card-body h3,
.drop-title,
.drop-lead,
.eyebrow,
.hiw-eyebrow {
  text-wrap: balance;
}

.section-sub,
.page-hero-sub,
.hiw-intro,
.plan-hero-sub,
.guide-cta-note,
.price-pitch,
.deck-hint,
.flow-note,
.price-note,
.footer-sub-note,
.dest-cta-inner p {
  text-wrap: balance;
}

p,
.dest-hero-text,
.statement-body,
.price-group-note,
.drop-body p,
.prose p {
  text-wrap: pretty;
}

/* and give the centred heads room before they have to wrap at all */
.section-head-center { max-width: 720px; }
.section-head > div { max-width: 820px; margin: 0 auto; }

/* The destination hero ranges left too, and its button keeps the note beside
   it rather than under it. */
.dest-hero-content { text-align: left; }
.dest-hero-content .dest-hero-text { margin-left: 0; margin-right: 0; }
.dest-hero-content .guide-cta {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.dest-hero-content .guide-cta-note { text-align: left; margin-left: 0; }

/* A plan's hero ranges left — its own composition, not the centred one the
   rest of the site uses. Everything under it lines up on that left edge. */
.plan-hero-content { text-align: left; }
.plan-hero-content .plan-hero-meta,
.plan-hero-content .guide-cta {
  justify-content: flex-start;
  align-items: flex-start;
}
.plan-hero-content .guide-cta-note {
  text-align: left;
  margin-left: 0;
}
.plan-hero-content .plan-hero-sub,
.plan-hero-content h1 { margin-left: 0; margin-right: 0; }

/* ==========================================================================
   One button
   Every button on the site is the same object: a liquid-glass pill, built the
   way the nav pill and the footer's Subscribe are. It takes the accent on
   hover and presses in on click, everywhere, so there is nothing to remember
   and nothing to keep in sync.

   Two skins, because a button either sits on the white page or on a photo.
   The dark-surface skin is picked by context, not by a class in the markup.
   ========================================================================== */
.btn,
.btn-outline,
.btn-light,
.btn-glass,
.cta-pill,
.deck-cta,
.footer-sub button,
.contact-form button[type="submit"],
.form-send {
  display: inline-block;
  padding: 16px 30px;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  color: var(--color-fg);
  background: var(--glass-body-lit);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,1),
    inset 0 0 0 1px rgba(198,198,198,0.38),
    0 2px 6px rgba(64,64,64,0.06),
    0 12px 26px rgba(64,64,64,0.09);
  transition:
    background .28s var(--ease),
    box-shadow .28s var(--ease),
    color .28s var(--ease),
    transform .16s var(--ease);
  -webkit-tap-highlight-color: transparent;
}

/* the accent under the cursor, the way the footer's Subscribe already did */
.btn:hover,
.btn-outline:hover,
.btn-light:hover,
.btn-glass:hover,
.cta-pill:hover,
.deck-cta:hover,
.footer-sub button:hover,
.contact-form button[type="submit"]:hover,
.form-send:hover {
  color: var(--color-fg);
  background: linear-gradient(145deg,
    rgba(190,182,92,0.96) 0%,
    rgba(167,159,72,0.92) 55%,
    rgba(150,143,62,0.96) 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.9),
    inset 0 0 0 1px var(--color-accent-deep),
    0 3px 8px rgba(64,64,64,0.07),
    0 18px 36px rgba(184,160,70,0.22);
  transform: translateY(-2px);
}

/* and the same press on every one of them */
.btn:active,
.btn-outline:active,
.btn-light:active,
.btn-glass:active,
.cta-pill:active,
.deck-cta:active,
.footer-sub button:active,
.contact-form button[type="submit"]:active,
.form-send:active {
  transform: translateY(0) scale(0.975);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.8),
    inset 0 0 0 1px var(--color-accent-deep),
    0 1px 3px rgba(64,64,64,0.1);
}

.btn:focus-visible,
.btn-outline:focus-visible,
.cta-pill:focus-visible,
.deck-cta:focus-visible,
.footer-sub button:focus-visible,
.contact-form button[type="submit"]:focus-visible,
.form-send:focus-visible {
  outline: 2px solid var(--color-accent-deep);
  outline-offset: 3px;
}

/* ---- the skin for a button sitting on a photo or a dark panel ---- */
.hero-content .btn,
.plan-hero-content .btn,
.plan-hero-content .cta-pill,
.dest-hero-content .btn,
.dest-hero-content .cta-pill,
.hiw-hero-content .btn,
.hiw-hero-content .btn-glass,
.page-hero-photo .btn,
.feature-card .btn,
.guide-bar .cta-pill,
.site-footer .btn,
.footer-sub button {
  color: #fff;
  background: linear-gradient(150deg, rgba(255,255,255,0.22), rgba(255,255,255,0.1));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.32),
    0 2px 6px rgba(0,0,0,0.12),
    0 14px 30px rgba(0,0,0,0.2);
  text-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
/* hover is the same accent for both skins — the text goes light again */
.hero-content .btn:hover,
.plan-hero-content .btn:hover,
.plan-hero-content .cta-pill:hover,
.dest-hero-content .btn:hover,
.dest-hero-content .cta-pill:hover,
.hiw-hero-content .btn:hover,
.hiw-hero-content .btn-glass:hover,
.page-hero-photo .btn:hover,
.feature-card .btn:hover,
.guide-bar .cta-pill:hover,
.site-footer .btn:hover,
.footer-sub button:hover {
  color: var(--color-fg);
  text-shadow: none;
  background: linear-gradient(145deg,
    rgba(190,182,92,0.96) 0%,
    rgba(167,159,72,0.92) 55%,
    rgba(150,143,62,0.96) 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.9),
    inset 0 0 0 1px var(--color-accent-deep),
    0 3px 8px rgba(0,0,0,0.12),
    0 18px 36px rgba(0,0,0,0.22);
}

/* the small controls take the same yellow, so a click feels the same anywhere */
.hiw-tab:hover,
.days-tab:hover,
.billing-option:hover,
.deck-arrow:hover:not(:disabled),
.deck-dots button:hover,
.value-dots button:hover {
  background: var(--color-accent);
  color: var(--color-fg);
}
.hiw-tab:active,
.days-tab:active,
.billing-option:active,
.deck-arrow:active:not(:disabled) { transform: scale(0.95); }

/* the footer pill keeps its own size next to the e-mail field */
.footer-sub button { padding: 14px 26px; }
.guide-bar .cta-pill { padding: 13px 26px; }
.deck-cta { display: block; margin: 26px auto 0; padding: 17px 28px; white-space: normal; }

@media (max-width: 560px) {
  .btn,
  .btn-outline,
  .cta-pill,
  .deck-cta { padding: 15px 24px; font-size: 11px; }
  .guide-bar .cta-pill { padding: 12px 20px; font-size: 11px; }
}

/* an editorial line break that only makes sense with room for it */
@media (max-width: 560px) {
  br.wide-only { display: none; }
}


/* On a phone the browser's toolbars slide in and out, and any hero measured to
   the current viewport ends up short of the screen for a moment. Every hero
   gets a little more than the tallest viewport, so what you see is only ever
   photo. */
@media (max-width: 900px) {
  .hero { height: 104lvh; }
  .hiw-hero,
  .plan-hero { min-height: 104lvh; }
  .dest-hero { min-height: 106lvh; }
}


/* ==========================================================================
   Prices on the dark leaf photo
   The heading reads light; the cards stay bright glass so their own dark type
   still has something to sit on.
   ========================================================================== */
.prices .section-head-center h2 { color: #fff; }
.prices .section-head-center .section-sub { color: rgba(255,255,255,0.86); }
.prices .price-note { color: rgba(255,255,255,0.7); }

.price-card {
  background: linear-gradient(145deg,
    rgba(255,255,255,0.93) 0%,
    rgba(255,255,255,0.86) 45%,
    rgba(252,252,252,0.89) 100%);
  backdrop-filter: blur(30px) saturate(140%);
  -webkit-backdrop-filter: blur(30px) saturate(140%);
}
.price-card.is-featured,
.price-card:hover {
  background: linear-gradient(145deg,
    rgba(255,255,255,0.98) 0%,
    rgba(255,255,255,0.93) 45%,
    rgba(254,254,254,0.95) 100%);
}

/* the monthly/yearly switch sits on the photo, so it takes the light skin */
.billing-toggle {
  background: linear-gradient(150deg, rgba(255,255,255,0.22), rgba(255,255,255,0.1)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 0 0 1px rgba(255,255,255,0.28),
    0 8px 24px rgba(0,0,0,0.18) !important;
}
.billing-option { color: rgba(255,255,255,0.8); }
.billing-option.is-active { color: var(--color-fg); }

/* and the secondary type inside them goes a step darker to match */
.price-card .price-pitch,
.price-card .price-billing-note,
.price-card .price-features li,
.price-card .price-group-note { color: #4d4d4d; }

/* the badge rides on the dark toggle now, so it needs the light treatment */
.billing-option:not(.is-active) .billing-badge,
.billing-toggle .billing-badge {
  background: rgba(10,16,8,0.4);
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}
.billing-option.is-active .billing-badge {
  background: var(--color-accent);
  border-color: var(--color-accent-deep);
  color: var(--color-fg);
}


/* the display lines that aren't h1/h2 but read as titles */
.statement-lead,
.plan-card-body h3,
.itinerary-card h3 {
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.25;
}
.plan-card-body h3 { font-size: clamp(16px, 1.7vw, 19px); }
.itinerary-card h3 { font-size: 17px; }


/* the prices section head sits above the whole offer — it holds its size */
.prices .section-head-center h2 { font-size: clamp(19px, 2.3vw, 27px); }

/* the badge sits beside a plan name that can now wrap to two lines */
.price-badge { white-space: nowrap; align-self: flex-start; }
.price-card-head { align-items: flex-start; gap: 10px; }

/* ==========================================================================
   Guides carousel — one card centre stage, the rest fanning out beside it
   Every guide stays on screen. The active one sits in the middle at full size;
   the others step down and back, so you can see what's coming without leaving
   the one you're looking at. Drag, arrows, keys, or click a card to bring it in.
   ========================================================================== */
.cover {
  --cover-w: 380px;
  position: relative;
  margin-top: 64px;
}
.cover-stage {
  position: relative;
  height: calc(var(--cover-w) * 1.28);
  touch-action: pan-y;          /* a vertical swipe still scrolls the page */
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.cover-stage.is-dragging { cursor: grabbing; }

.cover-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--cover-w);
  aspect-ratio: 4 / 5;
  margin: calc(var(--cover-w) * -0.625) 0 0 calc(var(--cover-w) / -2);
  border-radius: 20px;
  overflow: hidden;
  background: #e9e9e9;
  box-shadow:
    0 2px 6px rgba(64,64,64,0.06),
    0 18px 38px rgba(64,64,64,0.13),
    0 44px 84px rgba(64,64,64,0.10);
  will-change: transform, opacity;
  -webkit-tap-highlight-color: transparent;
}
.cover-card.is-settling {
  transition: transform .62s cubic-bezier(.22,.9,.3,1), opacity .5s var(--ease);
}
.cover-link {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-user-drag: none;
}
.cover-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}
/* only the card in the middle is clickable through to its guide */
.cover-card:not(.is-active) .cover-link { pointer-events: none; }

.cover-badge {
  position: absolute;
  top: 14px; left: 14px;
  padding: 6px 13px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  /* Clear glass over the photograph, like every other pill on the site.
     Nothing here is marked with colour. */
  color: #fff;
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.40);
}

/* the caption belongs to the middle card and changes with it */
.cover-caption {
  margin-top: 30px;
  text-align: center;
  transition: opacity .3s var(--ease);
}
.cover-caption.is-swapping { opacity: 0; }
.cover-caption h3 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(15px, 1.7vw, 19px);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.3;
  max-width: 620px;
  margin: 0 auto 8px;
}
.cover-caption h3 a { color: var(--color-fg); }
.cover-caption h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }



.cover-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 26px;
}
.cover-arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--glass-body-lit);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,1),
    inset 0 0 0 1px rgba(198,198,198,0.38),
    0 2px 8px rgba(64,64,64,0.08);
  color: var(--color-fg);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: opacity .25s var(--ease), transform .2s var(--ease), background .25s var(--ease);
}
.cover-arrow:hover:not(:disabled) { background: var(--color-accent); transform: translateY(-2px); }
.cover-arrow:active:not(:disabled) { transform: scale(0.94); }
.cover-arrow:disabled { opacity: 0.3; cursor: default; }

/* the tick row from the reference: a mark per guide, the current one taller */
.cover-ticks { display: flex; align-items: center; gap: 7px; }
.cover-ticks button {
  width: 2px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(51,51,51,0.22);
  cursor: pointer;
  transition: height .3s var(--ease), background .3s var(--ease);
}
.cover-ticks button.is-active {
  height: 22px;
  background: var(--color-accent);
}

@media (max-width: 900px) { .cover { --cover-w: 290px; } }
@media (max-width: 560px) {
  .cover { --cover-w: 220px; }
  .cover-caption { margin-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .cover-card.is-settling { transition-duration: .01ms; }
}

/* ==========================================================================
   Page heroes: the big title in the body face
   Same size, but Archivo instead of the mono — at this scale the body face
   carries a headline better, and the weight does the work the mono's width
   was doing.
   ========================================================================== */
.plan-hero-content h1,
.page-hero h1,
.dest-hero-content h1 {
  font-family: var(--font-main);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.04;
}

/* ==========================================================================
   The fullscreen menu, in the accent
   A green panel with near-black type. Hover and the page you're on both go to
   a dark grey — no second colour, just a shift in weight of tone.
   ========================================================================== */
.nav-overlay {
  background: var(--color-accent);
  color: #1c1c1c;
}
.overlay-nav a {
  color: #1c1c1c;
  border-bottom-color: rgba(28,28,28,0.16);
  padding-left: 16px;
  padding-right: 16px;
  border-radius: 14px 14px 0 0;
  transition:
    opacity .5s var(--ease),
    transform .5s var(--ease),
    color .3s var(--ease),
    background .3s var(--ease);
}
.overlay-nav a span { color: rgba(28,28,28,0.45); }

.overlay-nav a:hover,
.overlay-nav a.is-current {
  color: var(--color-fg);
  background: rgba(28,28,28,0.08);
  text-decoration: none;
}
/* the page you're on is the one that stays marked once you move the cursor off */
.overlay-nav a.is-current {
  background: rgba(28,28,28,0.14);
  border-bottom-color: rgba(28,28,28,0.34);
}
.overlay-nav a.is-current span { color: var(--color-fg); }

.overlay-col h4 { color: rgba(28,28,28,0.55); }
.overlay-col,
.overlay-col p,
.overlay-col a { color: #1c1c1c; }

/* the close button sits on the green, so it goes dark rather than light */
.nav-overlay.is-open ~ .site-header .nav-toggle[aria-expanded="true"],
.site-header .nav-toggle[aria-expanded="true"] {
  background: rgba(28,28,28,0.16);
  border-color: rgba(28,28,28,0.3);
}
.site-header .nav-toggle[aria-expanded="true"] .close-icon { color: #1c1c1c; }


/* ==========================================================================
   The destination inside its card
   The name sits in the middle of the photo and the tags along the bottom, in
   the same glass as everything else — no colour, just the material.
   ========================================================================== */
.cover-name {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  transform: translateY(-50%);
  text-align: center;
  font-family: var(--font-main);
  font-weight: 900;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.35);
  pointer-events: none;
}

.cover-pills {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  pointer-events: none;
}
.cover-pills span {
  padding: 6px 13px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  background: rgba(255,255,255,0.16);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 0 0 1px rgba(255,255,255,0.3);
}

/* the cards behind are small, so their labels would only be noise */
.cover-card:not(.is-active) .cover-name,
.cover-card:not(.is-active) .cover-pills {
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.cover-card.is-active .cover-name,
.cover-card.is-active .cover-pills {
  opacity: 1;
  transition: opacity .4s var(--ease) .1s;
}

@media (max-width: 560px) {
  .cover-pills span { padding: 5px 10px; font-size: 9px; }
}

/* the early-access button that closes the top bar */
.nav-cta {
  flex-shrink: 0;
  padding: 9px 16px;
  border-radius: 11px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--color-fg);
  background: rgba(255,255,255,0.9);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.12);
  transition: background .25s var(--ease), transform .2s var(--ease);
}
.nav-cta:hover { background: var(--color-accent); transform: translateY(-1px); }
.nav-cta:active { transform: scale(0.97); }

@media (max-width: 900px) {
  /* the full-screen menu carries it on a phone */
  .nav-cta { display: none; }
}

/* ==========================================================================
   Home, phase 2 — the blocks the strategy document adds
   Built from the components already here: same glass, same accent, same
   rhythm. Only the marquee, the comparison table and the founder quote are
   genuinely new shapes.
   ========================================================================== */

/* an undecided value, left visible on purpose so it gets decided */
mark.todo {
  padding: 1px 7px;
  border-radius: 6px;
  background: var(--color-accent-soft);
  box-shadow: inset 0 0 0 1px var(--color-accent-deep);
  color: inherit;
  font-style: normal;
}

/* ---------------- 5.1 hero: eyebrow, lead, sign-up ---------------- */
.hero-eyebrow {
  display: block;
  margin-bottom: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.72);
}
.hero-lead {
  max-width: 620px;
  margin: 22px auto 0;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.6;
  color: rgba(255,255,255,0.88);
  text-wrap: balance;
}
.hero-form {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 470px;
  margin: 32px auto 0;
  padding: 6px 6px 6px 20px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 0 0 1px rgba(255,255,255,0.28);
}
.hero-form input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  color: #fff;
  font-family: var(--font-main);
  font-size: 15px;
}
.hero-form input::placeholder { color: rgba(255,255,255,0.6); }
.hero-form input:focus { outline: none; }
.hero-form button {
  flex: 0 0 auto;
  padding: 13px 22px;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-fg);
  background: #fff;
  cursor: pointer;
  transition: background .25s var(--ease), transform .2s var(--ease);
}
.hero-form button:hover { background: var(--color-accent); transform: translateY(-1px); }
.hero-form button:active { transform: scale(0.97); }

.hero-alt {
  display: inline-block;
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.4);
  text-underline-offset: 6px;
}
.hero-alt:hover { text-decoration-color: #fff; }
.hero-micro {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6);
}

@media (max-width: 560px) {
  .hero-form { flex-direction: column; padding: 10px; border-radius: 22px; gap: 10px; }
  .hero-form input { width: 100%; padding: 8px 12px; text-align: center; }
  .hero-form button { width: 100%; }
}

/* ---------------- 5.2 the moving strip ---------------- */
.marquee {
  overflow: hidden;
  padding: 26px 0;
  background: #fff;
  border-block: 1px solid var(--color-line);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-run {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-right: 18px;
  white-space: nowrap;
}
.marquee-run span {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-fg);
}
.marquee-run i { color: var(--color-accent); font-style: normal; }
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .marquee { overflow-x: auto; }
}

/* ---------------- 5.3 the problem ---------------- */
.problem { padding: var(--sec-y) 0; background: #fff; }
.problem .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 56px;
}
.problem-inner { max-width: 720px; }
.problem-inner p {
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.65;
  color: var(--color-muted);
  margin-top: 18px;
}
.problem-turn {
  margin-top: 24px !important;
  font-family: var(--font-mono);
  font-size: clamp(13px, 1.4vw, 16px) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-fg) !important;
}
.problem-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 30px 34px;
  border-radius: 24px;
  background: var(--glass-body);
  backdrop-filter: var(--glass-frost);
  -webkit-backdrop-filter: var(--glass-frost);
  box-shadow: inset 0 1px 1px rgba(255,255,255,1), var(--glass-shadow);
  text-align: center;
}
.problem-stat-figure {
  font-family: var(--font-main);
  font-weight: 900;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1;
}
.problem-stat-label {
  max-width: 16ch;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}
.problem-stat-note {
  margin-top: 6px;
  font-size: 11px;
  color: var(--color-muted);
  opacity: 0.75;
}
@media (max-width: 900px) {
  .problem .container { grid-template-columns: 1fr; gap: 36px; justify-items: center; }
}

/* ==========================================================================
   5.4 carousel: caption blurb, card CTA, and the card with no photo yet
   ========================================================================== */
.cover-blurb {
  max-width: 54ch;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-muted);
}
.cover-blurb mark.todo { font-size: 13px; }
.cover-cta {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-fg);
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 3px;
  transition: border-color .25s var(--ease);
}
.cover-cta:hover { border-bottom-color: var(--color-accent); }

/* Vienna has no photograph in the library yet. Rather than borrow a picture of
   somewhere else, the card shows the frame it will live in. */
.cover-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    linear-gradient(160deg, #efefef 0%, #dedede 52%, #cfcfcf 100%);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(51,51,51,0.42);
}
.cover-card.is-soon .cover-name,
.cover-card.is-soon .cover-pills span { color: var(--color-fg); }
.cover-card.is-soon .cover-name { text-shadow: none; }

/* ==========================================================================
   5.6 showcase: the link under the value cards
   ========================================================================== */
.feature-cta {
  margin-top: 40px;
  text-align: center;
}

/* ==========================================================================
   5.7 Why not just… — the comparison
   A new block: nothing on the site compared anything before. Built from the
   same parts as everything else — a glass pane, the mono for the small caps,
   and the accent only on our own column.
   ========================================================================== */
.versus { padding: var(--sec-y) 0; }
.versus-wrap {
  margin-top: var(--sec-head-gap);
  border-radius: var(--glass-radius);
  background: var(--glass-body);
  backdrop-filter: var(--glass-frost);
  -webkit-backdrop-filter: var(--glass-frost);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,1),
    inset 0 -14px 32px rgba(255,255,255,0.45),
    var(--glass-shadow);
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.versus-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  padding: 1.6px;
  background: var(--glass-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.versus-table {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  text-align: center;
}
.versus-table th,
.versus-table td {
  padding: 20px 18px;
  border-bottom: 1px solid rgba(51,51,51,0.07);
  font-size: 14px;
  font-weight: 400;
}
.versus-table tbody tr:last-child th,
.versus-table tbody tr:last-child td { border-bottom: 0; }
.versus-table thead th {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  border-bottom: 1px solid rgba(51,51,51,0.12);
}
.versus-table tbody th[scope="row"] {
  text-align: left;
  font-weight: 700;
  color: var(--color-fg);
  white-space: nowrap;
}
.versus-table .is-us { position: relative; }
.versus-table thead th.is-us {
  color: var(--color-fg);
  font-weight: 600;
}
/* our column reads as one continuous panel, tinted with the accent */
.versus-table .is-us::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(167,159,72,0.09);
  pointer-events: none;
}
.versus-table thead th.is-us::before { border-radius: 14px 14px 0 0; }
.versus-table tbody tr:last-child td.is-us::before { border-radius: 0 0 14px 14px; }
.vs-mark {
  position: relative;
  z-index: 1;
  display: inline-block;
  min-width: 82px;
  padding: 7px 14px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-muted);
  background: rgba(51,51,51,0.05);
}
[data-v="yes"] .vs-mark {
  color: var(--color-fg);
  background: rgba(51,51,51,0.08);
}
[data-v="na"] .vs-mark { background: none; }
.is-us [data-v] .vs-mark,
td.is-us .vs-mark {
  color: var(--color-accent-deep);
  background: rgba(167,159,72,0.16);
  font-weight: 500;
}

/* ==========================================================================
   5.9 The founder in one paragraph
   ========================================================================== */
.founder { padding: var(--sec-y) 0; }
.founder-inner {
  display: grid;
  grid-template-columns: 260px 1fr;
  align-items: center;
  gap: 60px;
}
.founder-photo {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: linear-gradient(160deg, #efefef 0%, #dedede 52%, #cfcfcf 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,1),
    var(--glass-shadow);
  text-align: center;
}
.founder-quote { margin: 0; }
.founder-quote p {
  font-family: var(--font-mono);
  font-size: clamp(17px, 2vw, 23px);
  font-style: italic;
  line-height: 1.55;
  color: var(--color-fg);
}
.founder-quote cite {
  display: block;
  margin-top: 20px;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}
.founder-quote .link-arrow { margin-top: 26px; }
@media (max-width: 860px) {
  .founder-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 36px;
    text-align: center;
  }
  .founder-photo { width: 200px; }
}

/* ==========================================================================
   5.11 Closing — the last thing on the page
   ========================================================================== */
.closing { padding: var(--sec-y-lg) 0; }
.closing-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.closing h2 { font-size: clamp(26px, 3.4vw, 42px); }
.closing-lead {
  max-width: 54ch;
  margin-top: 22px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-muted);
}
.closing-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 460px;
  margin-top: 42px;
}
.closing-form input[type="email"],
.closing-form input[type="text"] {
  width: 100%;
  padding: 16px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--glass-body);
  backdrop-filter: var(--glass-frost);
  -webkit-backdrop-filter: var(--glass-frost);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,1),
    inset 0 0 0 1px rgba(198,198,198,0.40),
    var(--glass-shadow);
  font-family: var(--font-main);
  font-size: 15px;
  color: var(--color-fg);
  text-align: center;
}
.closing-form input::placeholder { color: var(--color-muted); }
.closing-form input:focus {
  outline: none;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,1),
    inset 0 0 0 1px var(--color-accent-soft),
    var(--glass-shadow);
}
.closing-consent {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
  text-align: left;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-muted);
  cursor: pointer;
}
.closing-consent input[type="checkbox"] {
  margin: 2px 0 0;
  width: 15px;
  height: 15px;
  flex: none;
  accent-color: var(--color-accent);
  cursor: pointer;
}
.closing-consent a { text-decoration: underline; text-underline-offset: 3px; }
.closing-form button { margin-top: 6px; }
.closing-micro {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

/* The closing section carries #early-access, so the footer's own sign-up lead
   would be the second thing with that id on this page. Hide it here. */
body:has(main #early-access) .footer-lead { display: none; }

/* On a phone the table turns on its side: one block per question, each
   alternative on its own line. A sideways scroll would have hidden our own
   column, which is the whole point of the block. */
@media (max-width: 760px) {
  .versus-wrap { overflow: visible; background: none; box-shadow: none; }
  .versus-wrap::after { display: none; }
  .versus-table { min-width: 0; display: block; }
  .versus-table thead { display: none; }
  .versus-table tbody { display: flex; flex-direction: column; gap: 14px; }
  .versus-table tr {
    display: block;
    padding: 22px 24px;
    border-radius: var(--glass-radius);
    background: var(--glass-body);
    backdrop-filter: var(--glass-frost);
    -webkit-backdrop-filter: var(--glass-frost);
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,1),
      inset 0 -14px 32px rgba(255,255,255,0.45),
      var(--glass-shadow);
  }
  .versus-table tbody th[scope="row"] {
    display: block;
    padding: 0 0 14px;
    border-bottom: 1px solid rgba(51,51,51,0.08);
    text-align: center;
    white-space: normal;
    font-size: 15px;
  }
  .versus-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0 0;
    border-bottom: 0;
  }
  .versus-table td::before {
    content: attr(data-col);
    position: static;
    inset: auto;
    background: none;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-muted);
  }
  .versus-table td.is-us::before {
    content: attr(data-col);
    position: static;
    inset: auto;
    background: none;
    color: var(--color-accent-deep);
  }
  .versus-table td.is-us {
    margin-top: 11px;
    padding-top: 12px;
    border-top: 1px solid rgba(167,159,72,0.28);
  }
  .vs-mark { min-width: 0; padding: 6px 12px; }
}

/* ==========================================================================
   5.1b The list — the rest of the hero's words, with the sign-up
   ========================================================================== */
.intro {
  padding: 130px 0 120px;
  background: #fff;
}
.intro-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.intro h2 { font-size: clamp(20px, 2.4vw, 31px); }
.intro-lead {
  max-width: 52ch;
  margin-top: 24px;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.7;
  color: var(--color-muted);
  text-wrap: balance;
}
.intro-form {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 500px;
  margin-top: 40px;
}
.intro-form input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 16px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--glass-body);
  backdrop-filter: var(--glass-frost);
  -webkit-backdrop-filter: var(--glass-frost);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,1),
    inset 0 0 0 1px rgba(198,198,198,0.40),
    var(--glass-shadow);
  font-family: var(--font-main);
  font-size: 15px;
  color: var(--color-fg);
  text-align: center;
}
.intro-form input::placeholder { color: var(--color-muted); }
.intro-form input:focus {
  outline: none;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,1),
    inset 0 0 0 1px var(--color-accent-soft),
    var(--glass-shadow);
}
.intro-form button { flex: none; }
.intro-alt {
  margin-top: 26px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 3px;
  transition: border-color .25s var(--ease);
}
.intro-alt:hover { border-bottom-color: var(--color-accent); }
.intro-micro {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}
@media (max-width: 560px) {
  .intro { padding: 96px 0 90px; }
  .intro-form { flex-direction: column; gap: 12px; }
  .intro-form input[type="email"],
  .intro-form button { width: 100%; }
}

/* ==========================================================================
   Phase 3 — the guide pages (section 6)
   Everything here is built from the same parts as the rest of the site: a
   glass pane, the mono for the small caps, and the accent only where it
   marks something.
   ========================================================================== */

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

/* ---------------- the sign-up rows that repeat across these pages -------- */
.gform {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 520px;
  margin-top: 34px;
}
.gform input[type="email"],
.gform input[type="text"] {
  flex: 1 1 0;
  min-width: 0;
  padding: 16px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--glass-body);
  backdrop-filter: var(--glass-frost);
  -webkit-backdrop-filter: var(--glass-frost);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,1),
    inset 0 0 0 1px rgba(198,198,198,0.40),
    var(--glass-shadow);
  font-family: var(--font-main);
  font-size: 15px;
  color: var(--color-fg);
  text-align: center;
}
.gform input::placeholder { color: var(--color-muted); }
.gform input:focus {
  outline: none;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,1),
    inset 0 0 0 1px var(--color-accent-soft),
    var(--glass-shadow);
}
.gform button { flex: none; }
/* Two fields and a button need more room than one; the first name takes only
   what a first name needs, so the address is not clipped mid-word. */
.gform-two { max-width: 660px; }
.gform-two input[type="text"] { flex: 0 1 150px; }

.gform-micro {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}
/* over a photograph the same line has to hold its own */
.gform-micro-light { color: rgba(255,255,255,0.82); }
/* A white pane over a photograph only works if the photograph is dark, and
   these are not: the Dolomites header is bright rock. The field is a dark
   pane with a light rim instead, so the placeholder holds on any picture. */
.gform-light input[type="email"],
.gform-light input[type="text"] {
  background: rgba(28,28,28,0.34);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.40);
  color: #fff;
}
.gform-light input::placeholder { color: rgba(255,255,255,0.82); }
.gform-light input:focus {
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.72);
}

/* The photo heroes centre their words, so the row under them centres too; the
   destination hero reads from the left, and its row follows that instead. */
.page-hero-photo .gform { margin-left: auto; margin-right: auto; }
.dest-hero-content .gform { margin-left: 0; margin-right: auto; }

/* ---------------- a plain section of words ---------------- */
.gsection { padding: var(--sec-y) 0; background: #fff; }
.gsection-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.gsection-inner h2 {
  font-size: clamp(20px, 2.4vw, 31px);
  margin-top: 16px;
}
.gsection-lead {
  max-width: 62ch;
  margin-top: 24px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--color-muted);
  text-wrap: pretty;
}
.gsection-inner .btn { margin-top: 36px; }
.gsection-inner .gtk-list { width: 100%; text-align: left; }

/* ---------------- 6.1 the filters under the catalogue title ---------------- */
.gfilters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 34px;
}
.gfilters .chip { cursor: default; }
.gfilters .chip.is-soon { opacity: 0.55; }
.gfilters .chip em {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* ---------------- 6.1 the vote ---------------- */
.vote { padding: var(--sec-y) 0 var(--sec-y-lg); background: #fff; }
.vote-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.vote h2 { font-size: clamp(20px, 2.4vw, 31px); margin-top: 16px; }
.vote-lead {
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-muted);
}
.vote-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.vote-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 40px 0 0;
  padding: 0;
  border: 0;
}
.vote-option {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--glass-body);
  backdrop-filter: var(--glass-frost);
  -webkit-backdrop-filter: var(--glass-frost);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,1),
    inset 0 0 0 1px rgba(198,198,198,0.40),
    var(--glass-shadow);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: box-shadow .25s var(--ease), transform .2s var(--ease);
}
.vote-option:hover { transform: translateY(-1px); }
.vote-option input[type="radio"] {
  margin: 0;
  width: 13px;
  height: 13px;
  accent-color: var(--color-accent);
  cursor: pointer;
}
.vote-option:has(input:checked) {
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,1),
    inset 0 0 0 1.5px var(--color-accent-soft),
    var(--glass-shadow-lift);
  color: var(--color-accent-deep);
}
.vote-other {
  width: 92px;
  padding: 3px 0;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  background: none;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-fg);
}
.vote-other:focus { outline: none; border-bottom-color: var(--color-accent); }
.vote-form .gform { margin-top: 26px; }

/* ---------------- 6.2 who it's for, and who it isn't ---------------- */
.gfit { padding: 0 0 70px; background: #fff; }
.gfit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.gfit-card {
  padding: 40px 38px;
  border-radius: var(--glass-radius);
  background: var(--glass-body);
  backdrop-filter: var(--glass-frost);
  -webkit-backdrop-filter: var(--glass-frost);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,1),
    inset 0 -14px 32px rgba(255,255,255,0.45),
    var(--glass-shadow);
  text-align: center;
}
.gfit-label {
  display: block;
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent-deep);
}
.gfit-card-not .gfit-label { color: var(--color-muted); }
.gfit-card p {
  font-size: 17px;
  line-height: 1.65;
  text-wrap: balance;
}

/* ---------------- 6.2 why it's free ---------------- */
.gwhy { padding: 0 0 var(--sec-y); background: #fff; }
/* a run of short blocks that belong together closes up */
.gsection + .gfit { margin-top: calc(var(--sec-y) * -1 + 70px); }
.gwhy-inner { text-align: center; }
.gwhy-inner h2 { font-size: clamp(18px, 2.1vw, 26px); }
.gwhy-inner p {
  max-width: 54ch;
  margin: 20px auto 0;
  font-size: 17px;
  line-height: 1.75;
  color: var(--color-muted);
  text-wrap: balance;
}

/* ---------------- 6.2 the look inside ---------------- */
.gshots { padding: var(--sec-y) 0; background: #fff; }
.gshot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: 880px;
  margin: var(--sec-head-gap) auto 0;
}
.gshot { margin: 0; }
.gshot-frame {
  display: grid;
  place-items: center;
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  padding: 24px;
  text-align: center;
  background: linear-gradient(160deg, #f1f1f1 0%, #e0e0e0 52%, #d2d2d2 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,1),
    var(--glass-shadow);
}
.gshot figcaption {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-muted);
  text-align: center;
  text-wrap: pretty;
}

/* ---------------- 6.3 the price in the hero ---------------- */
.gprice {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 30px 0 24px;
}
.gprice-now {
  font-family: var(--font-main);
  font-weight: 900;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1;
  color: #fff;
}
.gprice-was {
  font-family: var(--font-mono);
  font-size: 15px;
  text-decoration: line-through;
  color: rgba(255,255,255,0.62);
}
.gprice-note {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.78);
}
.gprice mark.todo { background: rgba(255,255,255,0.16); color: #fff; box-shadow: none; }

/* The price used to live only over a photograph. Off one — in the section
   that asks for the order, and at the foot of the page — it reads dark. */
.intro .gprice,
.dest-cta .gprice { justify-content: center; }
.intro .gprice-now,
.dest-cta .gprice-now { color: var(--color-fg); }
.intro .gprice-was,
.dest-cta .gprice-was { color: var(--color-muted); }
.intro .gprice-note,
.dest-cta .gprice-note { color: var(--color-muted); }
.intro .gprice mark.todo,
.dest-cta .gprice mark.todo {
  background: var(--color-accent-soft);
  color: inherit;
  box-shadow: inset 0 0 0 1px var(--color-accent-deep);
}
.intro .gprice { margin: 34px 0 26px; }

/* ---------------- 6.3 the people behind it ---------------- */
.gpeople { padding: var(--sec-y) 0; background: #fff; }
.gpeople-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: var(--sec-head-gap);
}
.gperson {
  padding: 34px 30px;
  border-radius: var(--glass-radius);
  background: var(--glass-body);
  backdrop-filter: var(--glass-frost);
  -webkit-backdrop-filter: var(--glass-frost);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,1),
    inset 0 -14px 32px rgba(255,255,255,0.45),
    var(--glass-shadow);
  text-align: center;
}
.gperson-name {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-main);
  font-weight: 900;
  font-size: 19px;
}
.gperson p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-muted);
  text-wrap: balance;
}

@media (max-width: 900px) {
  .gfit-grid,
  .gshot-grid,
  .gpeople-grid { grid-template-columns: 1fr; }
  .gshot-frame { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .gform { flex-direction: column; gap: 12px; }
  .gform input, .gform button { width: 100%; }
  .gform-two input[type="text"] { flex: 1 1 auto; }
  .vote-option-other { flex-wrap: wrap; }
}

/* The catalogue's carousel follows straight on from the page title, so it does
   not need a section's worth of air above it as well. */
.page-hero + .news { padding-top: 40px; }

/* A guide page opens the way the home does: the header carries the title and
   the promise and nothing else, and the section under it is where we ask for
   the address. */
.intro .gform { margin-top: 40px; }
.intro .gform + .intro-micro { margin-top: 18px; }

/* The destination header now carries a title above its line of text, which it
   did not before; without this they sit on top of each other. */
.dest-hero-content h1 + .dest-hero-text { margin-top: 20px; }

/* ==========================================================================
   Free, said twice: a badge that sits still and a bubble that follows you
   The bubble is the home hero's hint, generalised — any section carrying
   data-cursor-hint gets one, so the other guide pages can use it too.
   ========================================================================== */
/* Clear glass, like the menu pill. Emphasis here comes from the pane and the
   dot, never from a colour. */
.free-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.38),
    0 4px 18px rgba(40,40,40,0.16);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #fff;
}
.free-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.28);
}
.dest-hero-content .free-badge { margin-bottom: 22px; }

[data-cursor-hint] { position: relative; }
[data-cursor-hint].js-ready { cursor: pointer; }
/* Words only. No pane, no rim — a line of type that follows the cursor, with
   a soft shadow so it holds against a bright photograph. */
.hint-bubble {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-shadow: 0 1px 14px rgba(20,20,20,0.75), 0 0 3px rgba(20,20,20,0.5);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease);
  transform: translate(-9999px, -9999px);
}
[data-cursor-hint].is-hovering .hint-bubble { opacity: 1; }
.hint-bubble-text {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.hint-bubble-icon { display: flex; align-items: center; }

/* A pointer is the only thing that can follow a cursor. On a touch screen the
   bubble never shows, and the section it points at is the next thing down. */
@media (hover: none) {
  [data-cursor-hint].js-ready { cursor: auto; }
  .hint-bubble { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hint-bubble { transition: none; }
}

/* ---------------- 6.1 the filter chips and the vibes they open ------------ */
.gfilters .chip { cursor: pointer; font-family: var(--font-mono); }
.gfilters .chip[disabled] { cursor: not-allowed; }
.gvibes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}
.gvibes[hidden] { display: none; }
.gvibes .chip { cursor: pointer; font-family: var(--font-mono); }
.gvibes .chip.is-active,
.gfilters .chip.is-active {
  background: var(--glass-dark-strong);
  border-color: var(--color-fg);
  color: var(--color-fg);
}