/* Kobaso brand palette — sage #7D9A87, brown #8B6E4F, cream #EADCC6,
   peach #F4A98D, off-white #FFF7EF — shared with the artwork in js/art.js */
:root {
  /* surfaces: warm off-white, not white */
  --cream: #FFFCF6;
  --bg: #FFF7EF;
  --surface: #FFFCF6;
  --sunk: #F5EBDC;

  /* ink: warm brown, never black */
  --ink: #5D4A35;
  --muted: #8B6E4F;
  --line: #EADCC6;
  --border: #EADCC6;

  /* soft sage tints, used for gentle fills */
  --mint: #A9C3B2;
  --mint-soft: #D9E6DD;
  --mint-pale: #EEF4EF;

  /* sage: the one action colour */
  --brand: #7D9A87;
  --brand-dark: #5F7B68;
  --accent: #5F7B68;
  --accent-soft: #D9E6DD;

  --cheek: #F4A98D;
  /* peach: the brand's warm accent — carries what gold used to */
  --gold: #F4A98D;
  --gold-soft: #FBE5D8;

  /* one radius scale */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-pill: 999px;
  --radius: var(--r-lg);

  --shadow: 0 6px 22px rgba(92, 74, 62, 0.09);
  --shadow-lg: 0 16px 44px rgba(92, 74, 62, 0.16);

  /* Brand type is Nunito Rounded (bold/semibold for display, regular/medium for
     body). Nunito Rounded has no webfont host, so if a visitor has it installed
     locally we use it; everyone else gets Nunito — the same face minus the
     rounded terminals — from Google Fonts. */
  --font-body: "Nunito Rounded", "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-body);
}

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

/* The whole interface sits on rem, so this is the one dial for its scale.
   16px read small against the roomy layouts; a notch up suits the brand's
   friendly weight without any single screen needing its own numbers. */
html { font-size: 17px; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  font-weight: 500;
}

body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(600px 420px at 85% -10%, rgba(169, 195, 178, 0.30), transparent 60%),
    radial-gradient(520px 420px at -10% 30%, rgba(244, 169, 141, 0.14), transparent 60%),
    radial-gradient(520px 520px at 92% 92%, rgba(244, 169, 141, 0.10), transparent 60%);
}

/* Nunito bold carries display type, per the brand's Nunito Rounded spec */
h1, h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; }
h3 { font-weight: 800; }

#app { max-width: 820px; margin: 0 auto; padding: 24px 20px 80px; position: relative; }
#app.full { max-width: none; padding: 0; }

/* ---------- Animations ---------- */
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes popIn {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@keyframes floatUp {
  0%   { transform: translateY(105vh) rotate(-8deg); opacity: 0; }
  10%  { opacity: 0.5; }
  90%  { opacity: 0.5; }
  100% { transform: translateY(-10vh) rotate(8deg); opacity: 0; }
}
@keyframes planeFly {
  0%   { left: -60px; transform: translateY(0) rotate(0deg); }
  50%  { transform: translateY(-14px) rotate(-6deg); }
  100% { left: calc(100% + 60px); transform: translateY(0) rotate(0deg); }
}
@keyframes dotPulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

.anim-in { animation: fadeSlideIn 0.45s ease both; }
.stagger { animation: fadeSlideIn 0.5s ease both; }
.pop { animation: popIn 0.3s ease; }

/* Scroll-triggered reveals */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Ambient motion */
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.09); } }
.collage-tile img.loaded { animation: kenburns 16s ease-in-out infinite alternate; }
@keyframes compassRock { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.logo-badge { animation: compassRock 5.5s ease-in-out infinite; }
@keyframes blobShift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
body::before { animation: blobShift 14s ease-in-out infinite; }

/* Button shimmer */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; top: 0; left: -80%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg); transition: left 0.55s ease;
}
.btn-primary:hover::after { left: 135%; }




/* Know-before-you-go. Five answers you'd otherwise open five tabs for, on the
   page where you're already planning — so it has to earn its height and not much
   more. No card and no white panel: hairlines top and bottom, a small line-art
   icon, the answer, the label under it. Each one still opens to a sentence.
   Every answer is kept to one line by SHORT_FACT in data.js, which is what lets
   the whole strip sit in about 44px. */
.essentials { margin: 2px 0 30px; }
/* Only a rule underneath. A second one along the top sat right below the page
   heading and read as an underline on the title rather than the top of a strip. */
/* Eight even columns, one row. A grid rather than a wrapping flex row because
   the answers vary from "Korean" to "No meat/dairy", and sizing to content gave
   eight columns of eight different widths. Everything longer than about a dozen
   characters is shortened in SHORT_FACT, with the tail moved to the label line
   ("Plugs · 220V") or the note. */
.ess-row {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
  padding: 2px 0 4px;
}
.ess {
  font: inherit; cursor: pointer; color: inherit; text-align: left;
  display: flex; flex-direction: column; gap: 1px;
  background: none; border: none; padding: 8px 8px;
  min-width: 0; position: relative;
  transition: background 0.15s ease;
}
/* Hairline between columns rather than a box around each. :nth-of-type counts
   buttons only — the notes between them are <p>, so they don't shift the count
   and the first cell of each row correctly goes without. */
.ess:not(:nth-of-type(8n + 1))::before {
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%;
  width: 1px; background: var(--line);
}
.ess:hover { background: var(--mint-pale); border-radius: var(--r-sm); }
.ess[aria-expanded="true"] { background: var(--mint-pale); border-radius: var(--r-sm); }
/* The icon leads the cell, on its own line above the answer — four columns give
   it the room five didn't.
   Two-class selector deliberately: the generic `.ico { width: 19px }` further
   down this file would otherwise win on source order. */
.ess .ess-ico { width: 18px; height: 18px; flex: none; margin-bottom: 3px; }
.ess > strong {
  display: block; max-width: 100%;
  font-size: 0.82rem; font-weight: 800; line-height: 1.35; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.ess > em {
  display: flex; align-items: center; gap: 4px; max-width: 100%;
  font-style: normal; font-size: 0.68rem; font-weight: 700; color: var(--muted);
  line-height: 1.3;
}
.ess > em span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Eight across needs the full-width panel. Narrower than that and they'd be
   slivers, so it steps down to four and then two rather than shrinking. */
@media (max-width: 1080px) {
  .ess-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ess:not(:nth-of-type(8n + 1))::before { content: none; }
  .ess:not(:nth-of-type(4n + 1))::before {
    content: ""; position: absolute; left: 0; top: 22%; bottom: 22%;
    width: 1px; background: var(--line);
  }
}
@media (max-width: 640px) {
  .ess-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ess:not(:nth-of-type(4n + 1))::before { content: none; }
  .ess:not(:nth-of-type(2n + 1))::before {
    content: ""; position: absolute; left: 0; top: 22%; bottom: 22%;
    width: 1px; background: var(--line);
  }
}
/* Each note sits next to its button in the DOM — which is right for reading
   order — but a note opening in the middle of the row would shunt the buttons
   after it onto a second line. Ordering it last keeps the five together and
   drops the note underneath them. */
.ess-note {
  order: 1; grid-column: 1 / -1; margin: 2px 0 4px;
  background: var(--mint-pale); border-radius: var(--r-sm); padding: 9px 13px;
  font-size: 0.83rem; line-height: 1.5;
}
/* Getting there sits under the row rather than in it: it's the one fact that
   depends on where they're leaving from, and a sixth column would have broken
   the five into slivers. */
/* The one line here that changes with where you're leaving from, so it gets to
   look like an answer rather than a footnote: a tinted strip, and a plane that
   flies in and lands on it. It replays on every render, which is exactly when
   the sentence has just changed. */
.ess-flight {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.79rem; line-height: 1.45; margin-top: 12px; color: var(--ink);
  background: linear-gradient(90deg, var(--mint-pale), rgba(238, 244, 239, 0) 78%);
  border-left: 3px solid var(--mint);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 7px 12px; position: relative; overflow: hidden;
}
.ess-flight .ess-flight-ico {
  width: 16px; height: 16px; flex: none;
  animation: planeIn 1s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
/* The contrail draws itself out behind the plane and fades, so the eye is led
   left-to-right into the sentence rather than at a decorative glyph. */
.ess-flight::after {
  content: ""; position: absolute; left: 10px; top: 50%; height: 1px; width: 0;
  border-top: 1.5px dashed var(--mint); pointer-events: none;
  animation: planeTrail 1.4s ease-out both;
}
@keyframes planeIn {
  0%   { transform: translate(-28px, 9px) rotate(-14deg); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes planeTrail {
  0%   { width: 0; opacity: 0; }
  35%  { opacity: 0.9; }
  100% { width: 62%; opacity: 0; }
}
/* Hover gives it a little lift — the whole strip is a hint that this answer came
   from an answer you gave, and can be changed. */
.ess-flight:hover .ess-flight-ico { animation: planeHop 0.8s ease-in-out; }
@keyframes planeHop {
  0%, 100% { transform: none; }
  45%      { transform: translate(5px, -4px) rotate(-10deg); }
}
/* No airport yet, so the prompt is the point — give it a slow pulse rather than
   letting it read as another grey footnote. */
.ess-flight .ess-ask { animation: askPulse 2.6s ease-in-out 1.2s 3; }
@keyframes askPulse {
  0%, 100% { color: var(--brand-dark); transform: none; }
  50%      { color: var(--brand); transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .ess-flight .ess-flight-ico, .ess-flight::after, .ess-flight .ess-ask,
  .ess-flight:hover .ess-flight-ico { animation: none; }
  .ess-flight::after { display: none; }
}
.ess-ask {
  font: inherit; font-weight: 700; color: var(--brand-dark);
  background: none; border: none; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.ess-ask:hover { color: var(--ink); }
/* Getting there overland, when there's no flight to talk about */
.ess-ground {
  margin-top: 8px; padding: 9px 12px; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: linear-gradient(90deg, var(--mint-pale), rgba(238, 244, 239, 0) 78%);
  border-left: 3px solid var(--mint);
}
.ess-ground-head { font-size: 0.74rem; font-weight: 800; color: var(--brand-dark); margin-bottom: 6px; }
/* One way per row, labels in a column, so the three notes read as a list */
.ess-ground-ways { display: flex; flex-direction: column; gap: 5px; }
.ess-way { display: flex; align-items: baseline; gap: 10px; font-size: 0.78rem; line-height: 1.4; min-width: 0; }
.ess-way em { flex: none; min-width: 58px; font-style: normal; font-size: 0.7rem; font-weight: 800; color: var(--muted); }
.ess-foot { font-size: 0.72rem; color: var(--muted); margin-top: 9px; }
/* Search, and the way in to adding a place we don't have */
.poi-search { position: relative; display: flex; align-items: center; margin: 0 0 18px; }
.poi-search-ico { position: absolute; left: 14px; font-size: 0.9rem; pointer-events: none; }
.poi-search input {
  font: inherit; font-size: 0.95rem; width: 100%; color: inherit;
  padding: 11px 40px 11px 40px; border-radius: var(--r-pill);
  background: var(--surface); border: 1.5px solid var(--border);
}
.poi-search input:focus { outline: none; border-color: var(--brand); }
.poi-search input::-webkit-search-cancel-button { display: none; }
.poi-search-clear {
  position: absolute; right: 10px; width: 26px; height: 26px; border-radius: 50%;
  font: inherit; cursor: pointer; color: var(--muted);
  background: var(--sunk); border: none; display: grid; place-items: center;
}
.poi-search-clear:hover { color: var(--ink); }

/* Results we didn't write: real places, plainly marked as not ours */
.osm-results { margin-top: 18px; }
.poi-chip.osm { border-style: dashed; }
.poi-chip.osm .poi-chip-thumb { background: var(--sunk); }
.poi-chip.osm .poi-check {
  background: var(--mint-pale); color: var(--brand-dark); border-color: var(--mint);
  font-size: 0.9rem;
}
.poi-chip.osm:hover .poi-check { background: var(--brand); color: var(--cream); }

/* "We don't cover that, but here's what's near it" */
.off-map {
  margin-bottom: 14px; padding: 14px 18px; border-radius: var(--r-md);
  background: var(--mint-pale); border: 1.5px solid var(--mint);
}
.off-map-head { font-weight: 800; font-size: 0.95rem; margin-bottom: 5px; }
.off-map p { font-size: 0.87rem; line-height: 1.55; color: var(--ink); margin-bottom: 10px; }

.add-own {
  margin-top: 18px; padding: 18px 20px; border-radius: var(--r-md);
  background: var(--surface); border: 1.5px dashed var(--border);
}
.add-own-head { font-weight: 800; font-size: 0.95rem; margin-bottom: 14px; }
.add-own-fields {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 12px 14px; margin-bottom: 14px;
}
.add-own input, .add-own select {
  font: inherit; font-size: 0.88rem; color: inherit; width: 100%;
  padding: 9px 12px; border-radius: var(--r-sm);
  background: var(--bg); border: 1.5px solid var(--border);
}
.add-own input:focus, .add-own select:focus { outline: none; border-color: var(--brand); }
.add-own-note { font-size: 0.78rem; color: var(--muted); margin-top: 10px; line-height: 1.5; }
/* Your own places, marked so they don't look like ours */
.poi-card.own .poi-card-img, .poi-chip.own .poi-chip-thumb {
  background: repeating-linear-gradient(45deg, var(--mint-pale), var(--mint-pale) 8px, var(--sunk) 8px, var(--sunk) 16px);
}

/* Where in the country to look, before anything is listed */
.region-bar { margin: 4px 0 22px; display: flex; flex-direction: column; gap: 9px; }
.region-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.region-chip {
  font: inherit; font-weight: 700; font-size: 0.92rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); color: inherit;
  border: 1.5px solid var(--border); border-radius: var(--r-pill);
  padding: 9px 15px; transition: all 0.15s ease;
}
.region-chip:hover { border-color: var(--brand); }
/* Emoji fill their whole em box, so at text size they loom — take them down */
.region-chip .region-ico { font-size: 0.8em; line-height: 1; }
.region-chip em {
  font-style: normal; font-size: 0.74rem; font-weight: 800; color: var(--muted);
}
.region-chip.on { background: var(--brand); border-color: var(--brand); color: var(--cream); }
.region-chip.on em { color: rgba(253, 252, 247, 0.75); }
/* A first handful, with the rest a tap away */
.poi-grid.must-grid.capped > *:nth-child(n + 11),
.poi-chips.must-grid.capped > *:nth-child(n + 11) { display: none; }
.poi-grid.match-grid.capped > *:nth-child(n + 13) { display: none; }
.show-more {
  font: inherit; font-weight: 800; font-size: 0.88rem; cursor: pointer;
  background: var(--surface); color: var(--brand-dark);
  border: 1.5px dashed var(--brand); border-radius: var(--r-pill);
  padding: 11px 22px; margin: 14px 0 6px; transition: all 0.15s ease;
}
.show-more:hover { background: var(--mint-pale); }
.show-more.wide { display: block; width: 100%; margin-top: 22px; }

/* The wishlist grouped by city — collapsed until wanted, so a country's worth
   of places reads as a handful of places per base. */
.base-group { border: 1.5px solid var(--border); border-radius: var(--r-md); margin-bottom: 10px; background: var(--surface); }
.base-group-head {
  font: inherit; width: 100%; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 12px;
  background: none; border: none; padding: 14px 16px; color: inherit;
}
.base-group-head:hover { background: var(--mint-pale); border-radius: var(--r-md); }
.bg-name { font-weight: 800; font-size: 0.98rem; }
.bg-count { color: var(--muted); font-size: 0.8rem; font-weight: 700; margin-left: auto; }
.bg-chev { color: var(--muted); transition: transform 0.2s ease; }
.base-group.open .bg-chev { transform: rotate(180deg); }
/* .poi-grid sets display:grid and is declared further down, so these need the
   same weight or better to close a group at all */
.poi-grid.base-group-body { display: none; padding: 0 16px 16px; }
.base-group.open .poi-grid.base-group-body { display: grid; }
.poi-chips.base-group-body { display: none; padding: 0 14px 14px; }
.base-group.open .poi-chips.base-group-body { display: grid; }
/* Map marker entrances + stay-pin pulse */
@keyframes markerIn { from { opacity: 0; transform: scale(0.25); } }
.poi-dot { animation: markerIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
@keyframes pillIn { from { opacity: 0; transform: translate(-50%, -175%) scale(0.4); } }
.base-pill { animation: pillIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
@keyframes pinPulse {
  0% { box-shadow: 0 4px 16px rgba(95, 123, 104, 0.5), 0 0 0 0 rgba(125, 154, 135, 0.5); }
  100% { box-shadow: 0 4px 16px rgba(95, 123, 104, 0.5), 0 0 0 16px rgba(125, 154, 135, 0); }
}
.base-pill.current { animation: pillIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) backwards, pinPulse 2.2s ease-out 1.2s infinite; }

/* Results confetti burst */
.burst { position: relative; height: 0; z-index: 5; }
.burst span {
  position: absolute; left: 50%; top: -4px; font-size: 1.1rem; opacity: 0;
  animation: burstFly 1.1s ease-out forwards; animation-delay: calc(var(--i) * 70ms);
}
@keyframes burstFly {
  0% { opacity: 1; transform: translate(-50%, 0) scale(0.5); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x)), -85px) scale(1.15) rotate(20deg); }
}

/* Question swipe transitions */
@keyframes slideInRight { from { opacity: 0; transform: translateX(70px); } to { opacity: 1; transform: none; } }
@keyframes slideInLeft  { from { opacity: 0; transform: translateX(-70px); } to { opacity: 1; transform: none; } }
@keyframes slideOutLeft  { to { opacity: 0; transform: translateX(-70px); } }
@keyframes slideOutRight { to { opacity: 0; transform: translateX(70px); } }
.qcard.enter-fwd  { animation: slideInRight 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; }
.qcard.enter-back { animation: slideInLeft 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; }
.qcard.exit-left  { animation: slideOutLeft 0.2s ease both; pointer-events: none; }
.qcard.exit-right { animation: slideOutRight 0.2s ease both; pointer-events: none; }

/* ---------- Floating background emoji ---------- */
.floaters { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.floater {
  position: absolute; bottom: 0; font-size: 1.6rem;
  animation: floatUp linear infinite;
  filter: grayscale(0.2); opacity: 0;
}
.hero-inner { position: relative; z-index: 1; }

/* ---------- Buttons ---------- */
.btn {
  font: inherit; font-weight: 600; border: none; cursor: pointer;
  border-radius: var(--r-pill); padding: 13px 28px; transition: all 0.15s ease;
}
.btn-primary { background: linear-gradient(135deg, var(--brand), var(--mint)); color: #fff; box-shadow: 0 6px 18px rgba(125, 154, 135, 0.30); }
.btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(125, 154, 135, 0.38); }
.btn-primary:active:not(:disabled) { transform: scale(0.97); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-lg { font-size: 1.15rem; padding: 16px 40px; }
.btn-ghost { background: none; color: var(--muted); border: 2px solid var(--border); }
.btn-ghost:hover { color: var(--ink); border-color: var(--muted); }

/* ---------- Cinematic landing ---------- */
.hero-cinema {
  /* transparent, not cream: the fade at the bottom hands over to the page's
     own fixed wash, which must be the same one visible below the seam */
  position: relative; overflow: hidden;
  /* Fills the screen — it is the whole landing page, so anything short of that
     leaves cream below the fold. Capping the hero itself did exactly that. */
  display: flex; align-items: center;
  height: 100svh; min-height: 560px;
}
.cine-stage { position: absolute; inset: 0; }
.cine-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.5s ease; }
.cine-slide.on { opacity: 1; }
.cine-slide img { width: 100%; height: 100%; object-fit: cover; }
.cine-stage { filter: saturate(1.05); }
.cine-slide.on img { animation: kenburns 22s ease-out both; }
.cine-scrim {
  /* The photograph is the point of this page, so it gets to be a photograph.
     This used to be a cream wash at 99% opacity across the left two-thirds,
     which kept the warm brown type readable by hiding almost all of the
     picture. Now it's a dark gradient weighted to the bottom and left — enough
     to carry light type, little enough to leave the image vivid. Its dark is
     the brand ink's own brown rather than neutral black, so any photo reads
     as lit by the same warm palette as the rest of the page. */
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(96deg, rgba(58, 44, 30, 0.74) 0%, rgba(58, 44, 30, 0.5) 34%,
                    rgba(58, 44, 30, 0.16) 62%, rgba(58, 44, 30, 0) 82%),
    linear-gradient(to top, rgba(48, 37, 25, 0.74) 0%, rgba(48, 37, 25, 0.24) 32%, transparent 58%),
    linear-gradient(to bottom, rgba(48, 37, 25, 0.45), transparent 22%);
}
/* The hand-off to the cream page below. A soft fade was tried twice here —
   painted cream, then a mask — and both read as fog with a hairline at the
   end of it. The photo now tucks under a drawn cream wave instead: a crisp,
   deliberate edge in the brand's own hand, with a pale sage wave peeking out
   behind it, and the corner Kobo standing on it like a hill. */
.cine-wave {
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2;
  display: block; width: 100%; height: clamp(44px, 7vw, 96px);
}
.cine-wave .w-back { fill: var(--mint); opacity: 0.5; }
.cine-wave .w-front { fill: var(--bg); }
/* The hero is the landing's first screen, exactly one screen tall, with the
   two explainer sections following below the fold. */
.hero-cinema { max-height: 100svh; }
.cine-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px clamp(22px, 6vw, 84px); color: #fff;
}
.cine-mark { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; display: flex; align-items: center; gap: 9px; color: var(--cream); text-shadow: 0 2px 14px rgba(24,16,12,0.5); }
/* The brand-sheet wordmark: peach pin, lowercase two-tone. Over the dark hero
   photo it runs all-white, as the reversed logo on the sheet does; on light
   pages "ko" takes the sage. */
.cine-mark .nav-pin { width: 21px; height: 21px; flex: none; color: var(--gold); stroke-width: 2.4; }
.cine-mark .mark-word { text-transform: lowercase; letter-spacing: 0.01em; }
.cine-mark .mark-word b { font-weight: 800; }
.cine-mark.dark .mark-word b { color: var(--brand); }
.cine-compass { display: inline-block; animation: compassRock 5.5s ease-in-out infinite; }
.btn-outline { background: var(--cream); color: var(--ink); border: 1.5px solid var(--line); }
.btn-outline:hover { background: var(--mint-soft); border-color: var(--brand); }

.cine-inner {
  position: relative; z-index: 2; width: 100%;
  max-width: 1240px; margin: 0 auto; padding: 0 clamp(22px, 6vw, 84px); color: var(--cream);
  /* A tall column with the naming pinned high and the acting pinned low, so the
     photograph is framed rather than left empty above a clump of text. */
  display: flex; flex-direction: column; justify-content: space-between;
  /* The column is what's capped, not the photo: past about 900px the gap
     between the two groups stops reading as composition and starts reading as
     a page that hasn't finished loading. */
  height: 100%; max-height: 940px;
  padding-top: clamp(90px, 13vh, 150px); padding-bottom: clamp(40px, 8vh, 96px);
  align-self: end;
}
.cine-eyebrow {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.3em; font-size: 0.85rem; margin-bottom: 8px;
  color: rgba(253, 252, 247, 0.78);
}
/* Big enough to be the picture's title rather than a caption on it. Nunito is a
   wide face, so the cap is lower than the old handwritten one needed. */
.cine-title {
  font-size: clamp(2.9rem, 8.5vw, 6.5rem); line-height: 0.98;
  text-transform: uppercase; color: var(--cream);
  text-shadow: 0 6px 40px rgba(24, 16, 12, 0.5);
}
.cine-title span { color: var(--brand); }
.cine-sub {
  max-width: 34rem; margin: 18px 0 26px;
  color: rgba(253, 252, 247, 0.9); font-size: 1.05rem;
  text-shadow: 0 2px 18px rgba(24, 16, 12, 0.6);
}

.cine-cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.cine-link { color: var(--brand-dark); font-weight: 800; text-decoration: none; border-bottom: 1.5px solid var(--mint); padding-bottom: 2px; }
.cine-link:hover { border-color: var(--brand); }

.below-hero { max-width: 980px; margin: 0 auto; padding: 8px 22px 44px; }
.below-hero .section-label { text-align: center; margin-bottom: 18px; }
.below-hero .hero-features { margin-top: 26px; }

/* ---------- Hero (legacy inner-page bits) ---------- */
.hero { text-align: center; padding: 48px 0 20px; }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px;
  align-items: center; text-align: left; margin-bottom: 26px;
}
.hero-grid .hero-inner { text-align: left; }
.hero-grid .logo-badge { margin: 0 0 22px; }
.hero-grid .hero-sub { margin: 0 0 30px; }
.hero-collage { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.collage-tile {
  position: relative; aspect-ratio: 4 / 3.4; border-radius: var(--r-md); overflow: hidden;
  background: linear-gradient(135deg, var(--mint-pale), var(--mint-soft));
  display: flex; align-items: center; justify-content: center; font-size: 2rem;
  box-shadow: var(--shadow);
}
.collage-tile:nth-child(even) { transform: translateY(22px); }
.collage-tile img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 0.6s ease;
}
.collage-tile img.loaded { opacity: 1; }
.logo-badge {
  font-size: 2.6rem; width: 84px; height: 84px; margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand), var(--mint));
  border-radius: var(--r-lg); box-shadow: var(--shadow);
  transition: transform 0.3s ease;
}
.logo-badge:hover { transform: rotate(-8deg) scale(1.05); }
.hero h1 { font-size: 3rem; letter-spacing: -0.02em; }
.hero h1 span { color: var(--brand); }
.tagline { font-size: 1.3rem; font-weight: 600; color: var(--accent); margin: 4px 0 16px; }
.hero-sub { max-width: 560px; margin: 0 auto 32px; color: var(--muted); font-size: 1.05rem; }

.hero-features {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin-top: 56px; text-align: center;
  list-style: none; padding: 0;
}
.feat {
  position: relative;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 30px 20px 26px;
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  animation: fadeSlideIn 0.6s ease both;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feat:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.feat span { font-size: 1.8rem; }
.feat small { color: var(--muted); line-height: 1.5; }
/* The number, so three cards read as three steps in order rather than three
   unrelated boasts */
.feat .feat-step {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand); color: var(--cream);
  font-size: 0.9rem; font-weight: 800; line-height: 30px;
}
.feat strong { font-size: 1.05rem; }

.how-strip-foot { display: flex; justify-content: center; margin-top: 34px; }
/* .explore-arrow is a flex disc, so it stacks under the label unless the button
   it sits in is a flex row too — which is why it looks right on .planner-go */
.how-strip-foot .btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 9px 9px 9px 28px; font-size: 1rem;
}

/* ---------- Progress ---------- */
.progress-wrap { display: flex; align-items: center; gap: 14px; margin-bottom: 36px; }
.back-link {
  background: var(--surface); border: 1.5px solid var(--border); color: var(--muted);
  font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap;
  border-radius: var(--r-pill); padding: 7px 16px;
  transition: all 0.15s ease;
}
.back-link:hover { color: var(--ink); border-color: var(--muted); transform: translateX(-2px); }
.progress { flex: 1; height: 9px; background: var(--border); border-radius: var(--r-pill); }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--brand), var(--mint)); border-radius: var(--r-pill); transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1); position: relative; }
.progress-plane {
  position: absolute; right: 0; top: 50%; transform: translate(55%, -58%);
  font-size: 1.1rem; filter: drop-shadow(0 2px 4px rgba(92, 74, 62, 0.25));
}
.progress-label { color: var(--muted); font-size: 0.85rem; white-space: nowrap; }

/* ---------- Questions ---------- */
.question h2 { font-size: 1.9rem; letter-spacing: -0.01em; }
.question-sub { color: var(--muted); margin: 6px 0 28px; }

/* One-page quiz sections: select → scroll down */
.quiz-sec {
  padding: 34px 0;
  border-bottom: 1px dashed var(--border);
  scroll-margin-top: 18px;
  transition: opacity 0.45s ease, filter 0.45s ease;
}
.quiz-sec:last-child { border-bottom: none; }
.quiz-sec.locked {
  opacity: 0.3; filter: saturate(0.4);
  pointer-events: none; user-select: none;
}
.quiz-sec h2 { font-size: 1.7rem; }
.quiz-sec .question-sub { margin-bottom: 22px; }

.options { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

.card {
  background: var(--surface); border: 2px solid var(--border);
  border-radius: var(--radius); padding: 20px;
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  position: relative;
}
.option { cursor: pointer; font: inherit; color: inherit; transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; }
.option:hover:not(.disabled) { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow); }
.option:active:not(.disabled) { transform: scale(0.98); }
.option.selected { border-color: var(--brand); background: var(--mint-pale); box-shadow: var(--shadow); }
.option.disabled { opacity: 0.5; cursor: default; }
.card-icon { font-size: 1.9rem; }
.card-title { font-weight: 700; font-size: 1.05rem; }
.card-title em { font-style: normal; color: var(--accent); font-size: 0.9rem; }
.card-sub { color: var(--muted); font-size: 0.9rem; }
.card.compact { flex-direction: row; align-items: center; gap: 14px; }

.tick {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%) scale(0);
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: 0.85rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.option.selected .tick { transform: translateY(-50%) scale(1); }

.step-footer { margin-top: 28px; display: flex; gap: 12px; }
.step-footer.center { justify-content: center; }

/* ---------- Loading ---------- */
.loading { text-align: center; padding: 100px 0; }
.plane-track { position: relative; height: 70px; margin-bottom: 24px; overflow: hidden; }
.plane { position: absolute; top: 20px; font-size: 2.4rem; animation: planeFly 2.4s ease-in-out infinite; }
.loading h2 { font-size: 1.7rem; }
.loading-msg { color: var(--muted); margin-top: 10px; min-height: 1.6em; transition: opacity 0.3s; }
.loading-dots { display: flex; gap: 8px; justify-content: center; margin-top: 24px; }
.loading-dots span {
  width: 10px; height: 10px; border-radius: 50%; background: var(--brand);
  animation: dotPulse 1.2s ease-in-out infinite;
}
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

/* ---------- Results ---------- */
.results-head { text-align: center; margin: 20px 0 28px; }
.results-kicker { color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.06em; }
.pick-badge {
  display: inline-block; margin-top: 10px; padding: 6px 16px; border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--mint-pale), var(--mint-soft)); color: var(--brand-dark);
  font-weight: 700; font-size: 0.85rem;
}
.pick-badge.alt { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.pick-badge.alt a { text-decoration: underline; cursor: pointer; font-weight: 700; }
.results-head h2 { font-size: 2.4rem; margin: 8px 0 4px; letter-spacing: -0.02em; }
.highlight { color: var(--brand); }
.results-area { color: var(--muted); margin-bottom: 14px; }

.match-ring { display: inline-flex; align-items: baseline; gap: 10px; background: var(--accent-soft); padding: 10px 22px; border-radius: var(--r-pill); }
.match-num { font-size: 1.6rem; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.match-sub { color: var(--accent); font-weight: 600; font-size: 0.92rem; }

.winner-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow);
  text-align: center;
}
.winner-emoji { font-size: 3rem; margin-bottom: 10px; }
.winner-blurb { font-size: 1.05rem; max-width: 620px; margin: 0 auto 20px; }

/* score bars */
.score-grid { display: flex; flex-direction: column; gap: 10px; max-width: 560px; margin: 0 auto 20px; }
.score-row { display: grid; grid-template-columns: 150px 1fr 44px; align-items: center; gap: 12px; text-align: left; }
.score-label { font-size: 0.88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* where the bars came from, when we inferred them from the wishlist */
.score-note { font-size: 0.82rem; opacity: 0.7; margin: -8px 0 18px; text-align: center; }
.score-bar { height: 10px; background: var(--border); border-radius: var(--r-pill); overflow: hidden; }
.score-fill {
  height: 100%; width: 0; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--brand), var(--mint));
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}
.score-fill.good { background: linear-gradient(90deg, var(--brand-dark), var(--mint)); }
.score-fill.poor { background: var(--line); }
.score-num { font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }

.tip-box {
  background: var(--accent-soft); border-radius: var(--r-sm); padding: 14px 18px;
  font-size: 0.95rem; text-align: left;
}
.caveat { margin-top: 14px; font-size: 0.9rem; color: var(--muted); text-align: left; }

.daytrips { margin-top: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 28px; }
.daytrips h3 { margin-bottom: 14px; font-size: 1.15rem; }
.daytrips ul { list-style: none; }
.daytrips li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
  transition: background 0.15s ease, padding-left 0.15s ease;
}
.daytrips li:hover { background: var(--bg); padding-left: 8px; }
.daytrips li:last-child { border-bottom: none; }
.trip-time { color: var(--muted); font-size: 0.9rem; white-space: nowrap; }

.split-card {
  margin-top: 24px; border-radius: var(--radius); padding: 24px 28px;
  background: linear-gradient(135deg, var(--mint-pale), var(--mint-pale)); border: 1px solid var(--mint);
}
.split-card.good { background: var(--mint-pale); border-color: var(--mint); }
.leg-area { font-size: 0.82rem; color: var(--muted); font-weight: 700; margin-top: 2px; }
.leg-covers { font-size: 0.76rem; color: var(--muted); line-height: 1.45; margin-top: 6px; }
.leg-link { margin-top: auto; }

/* Share, costs, transport hops, booking links */
a.btn { text-decoration: none; display: inline-block; text-align: center; }
.stay-links { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.fpill.share { border-color: var(--brand); color: var(--brand); }
.fpill.share:hover { background: var(--accent-soft); }
.cost-line {
  background: var(--accent-soft); border-radius: var(--r-sm); padding: 10px 16px;
  font-size: 0.92rem; margin: 8px 0 10px;
}
.season-adj { margin-top: 12px; font-size: 0.85rem; font-weight: 700; color: var(--accent); }
.split-hop { flex: 0 0 130px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }
.split-hop small { font-size: 0.74rem; color: var(--muted); font-weight: 700; line-height: 1.35; }
.leg-link {
  margin-top: 8px; font-size: 0.8rem; font-weight: 800; color: var(--brand);
  text-decoration: none;
}
.leg-link:hover { text-decoration: underline; }

/* Photo thumbs replacing emoji (map dots, compare cards, legs, itinerary) */
.wthumb {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-sm); overflow: hidden; flex-shrink: 0;
  background: linear-gradient(135deg, var(--mint-pale), var(--mint-soft)); vertical-align: middle;
}
.wthumb em { font-style: normal; font-size: 1.2rem; }
.wthumb img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 0.4s ease;
}
.wthumb img.loaded { opacity: 1; }
.wthumb.alt-thumb { width: 52px; height: 52px; }
.wthumb.mini { width: 26px; height: 26px; border-radius: 50%; margin-right: 7px; }
.wthumb.mini em { font-size: 0.85rem; }
/* The base-name row only — the bolds inside the beds line stay inline */
.split-leg > strong { display: flex; align-items: center; }
.itin-base { display: flex; align-items: center; }
.itin-base .wthumb.mini { width: 20px; height: 20px; margin-right: 6px; }
.itin-base .wthumb.mini em { font-size: 0.7rem; }
.wl-img { position: relative; }
.wl-img .wl-emoji { font-style: normal; }
.wl-img img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 0.35s ease;
}
.wl-img img.loaded { opacity: 1; }

/* Day-by-day itinerary */
.itinerary {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px 28px;
}
.itin-day { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.itin-day:last-child { border-bottom: none; }
.itin-num {
  flex-shrink: 0; width: 64px; text-align: center; height: fit-content;
  font-weight: 800; font-size: 0.82rem; color: var(--brand);
  background: var(--accent-soft); border-radius: var(--r-sm); padding: 4px 0;
}
.itin-base {
  font-size: 0.75rem; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.itin-body ul { list-style: none; margin-top: 2px; }
.itin-body li { font-size: 0.93rem; padding: 2px 0; line-height: 1.5; }
/* A pick's row is draggable: grip on the left, grab cursor, and the days that
   can take it light up while it's in the air. */
.itin-body li.itin-pick {
  display: flex; align-items: center; gap: 8px;
  cursor: grab; border-radius: var(--r-sm); padding: 2px 6px; margin-left: -6px;
  transition: background 0.15s ease;
}
.itin-body li.itin-pick:hover { background: var(--mint-pale); }
.itin-body li.itin-pick:active { cursor: grabbing; }
.itin-body li.itin-pick.dragging { opacity: 0.35; }
.itin-pick-label { flex: 1; min-width: 0; }
.itin-grip { flex: none; color: var(--muted); opacity: 0.55; font-size: 0.8rem; }
/* Rows wrap so a note can sit as a second line under its visit */
.itin-body li.itin-pick { flex-wrap: wrap; }
.itin-seq {
  flex: none; width: 19px; height: 19px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mint-pale); color: var(--brand-dark);
  font-size: 0.72rem; font-weight: 800;
}
.itin-note-btn {
  flex: none; font: inherit; font-size: 0.74rem; font-weight: 800; cursor: pointer;
  background: none; border: none; color: var(--brand-dark);
  opacity: 0; transition: opacity 0.15s ease; padding: 2px 4px;
}
.itin-body li.itin-pick:hover .itin-note-btn, .itin-note-btn:focus-visible { opacity: 0.85; }
.itin-note {
  flex-basis: 100%; margin-left: 26px; font-size: 0.8rem; color: var(--accent);
  line-height: 1.45;
}
.itin-note::before { content: "📝 "; }
.itin-note-edit { flex-basis: 100%; margin-left: 26px; }
.itin-note-edit input {
  width: 100%; font: inherit; font-size: 0.8rem; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--brand); border-radius: var(--r-sm);
  padding: 5px 9px; outline: none;
}
/* The wishlist's out-of-reach picks, said plainly at the foot of the plan
   rather than quietly missing from it */
.itin-leftover {
  margin-top: 16px; padding: 13px 16px; border-radius: var(--r-sm);
  background: var(--gold-soft); border: 1px solid var(--gold);
}
.itin-leftover-head { font-size: 0.85rem; font-weight: 800; color: var(--ink); margin-bottom: 7px; }
.itin-leftover ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.itin-leftover li { font-size: 0.85rem; line-height: 1.45; }
.itin-leftover li span { color: var(--muted); }
.itin-leftover li span::before { content: " · "; }
.itin-leftover-note { margin-top: 8px; font-size: 0.8rem; color: var(--muted); }

.itin-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.itin-save-hint { font-size: 0.78rem; color: var(--muted); }
/* The days a drag may land on, and the one it's currently over */
.itin-day { transition: background 0.15s ease, box-shadow 0.15s ease; border-radius: var(--r-sm); }
.itin-day.can-drop { box-shadow: inset 0 0 0 1.5px var(--mint); }
.itin-day.drop-ok { background: var(--mint-pale); box-shadow: inset 0 0 0 2px var(--brand); }

/* Must-visit bar + plan-for-me */
.must-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.must-bar .section-label { margin: 22px 0 0; }
.btn-sm { padding: 8px 18px; font-size: 0.88rem; }
.must-grid { margin-bottom: 8px; }
.split-card h3 { font-size: 1.15rem; margin-bottom: 6px; }
.split-plan { display: flex; align-items: stretch; gap: 14px; margin: 16px 0; flex-wrap: wrap; }
.split-leg { flex: 1 1 240px; background: var(--surface); border-radius: var(--r-sm); padding: 14px 18px; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.split-days { font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.split-arrow { font-size: 1.4rem; color: var(--brand); }
.split-note { color: var(--muted); font-size: 0.92rem; }

.runners-up { margin-top: 32px; }
.runners-up h3 { margin-bottom: 14px; }
.alt-card { box-shadow: none; }

/* ---------- Activity picker (step 5) ---------- */
.section-label {
  font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--brand); margin: 22px 0 12px;
}
.section-label.muted { color: var(--muted); }
.cat-group { margin-bottom: 30px; }
.cat-group.dim { opacity: 0.9; }
.cat-head { font-weight: 800; margin-bottom: 14px; font-size: 1.15rem; }
.chip-wrap { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-weight: 600; font-size: 0.9rem; color: inherit;
  background: var(--surface); border: 2px solid var(--border); border-radius: var(--r-pill);
  padding: 8px 16px; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.chip:hover { border-color: var(--brand); transform: translateY(-1px); box-shadow: var(--shadow); }
.chip:active { transform: scale(0.96); }
.chip.selected { border-color: var(--brand); background: var(--mint-pale); box-shadow: var(--shadow); }
.sticky-footer {
  position: sticky; bottom: 12px; z-index: 600;
  background: var(--bg); padding: 12px 0;
  border-top: 1px solid var(--border);
}

/* Suggestion tiles — Airbnb listing style, compact */
.poi-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(182px, 1fr));
  gap: 22px 16px;
}
/* The name is its own control inside the card: tapping the card adds the place,
   tapping the name asks what it is. Underlined on hover so it reads as one. */
.poi-open { cursor: pointer; text-decoration-color: transparent; }
.poi-open:hover, .poi-open:focus-visible {
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: currentColor;
}
.poi-open:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

/* ---------- A place, in full ---------- */
.poi-modal { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 20px; }
.pm-backdrop { position: absolute; inset: 0; background: rgba(41, 33, 28, 0.55); backdrop-filter: blur(2px); }
.pm-card {
  position: relative; width: min(460px, 100%); max-height: min(88vh, 780px); overflow-y: auto;
  background: var(--surface); border-radius: 26px; box-shadow: 0 24px 60px rgba(41, 33, 28, 0.3);
  animation: pmIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes pmIn { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
.pm-photo {
  position: relative; height: 250px; border-radius: 26px 26px 20px 20px; overflow: hidden;
  background: linear-gradient(135deg, var(--mint-pale), var(--mint-soft));
  display: grid; place-items: center;
}
.pm-fallback { font-size: 3rem; }
/* The gallery is a stack that cross-fades: only the slide that is both loaded
   and current shows, so a slow-loading photo never flashes an empty frame. */
.pm-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.6s ease;
}
.pm-photo img.loaded.on { opacity: 1; }
/* Top centre, not under the title: a two-line name reaches most of the way up
   the photo and the dots landed on top of it. */
.pm-dots {
  position: absolute; left: 62px; right: 62px; top: 24px; z-index: 3;
  display: flex; justify-content: center; gap: 6px;
}
.pm-dot {
  width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%; cursor: pointer;
  background: rgba(253, 252, 247, 0.45); transition: all 0.25s ease;
}
.pm-dot.on { background: var(--cream); width: 18px; border-radius: 4px; }
/* A wash under the title, so white text holds on any photo */
.pm-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(41, 33, 28, 0.92) 0%, rgba(41, 33, 28, 0.55) 32%, rgba(41, 33, 28, 0.1) 62%, transparent 80%);
}
.pm-round {
  position: absolute; top: 14px; z-index: 2; width: 38px; height: 38px; border-radius: 50%;
  font: inherit; font-size: 1.15rem; line-height: 1; cursor: pointer;
  background: rgba(253, 252, 247, 0.9); border: none; color: var(--ink);
  display: grid; place-items: center; transition: transform 0.15s ease, background 0.15s ease;
}
.pm-round:hover { transform: scale(1.08); }
.pm-back { left: 14px; }
.pm-fav { right: 14px; }
.pm-fav.on { background: var(--brand); color: var(--cream); }
.pm-title { position: absolute; left: 20px; right: 20px; bottom: 16px; z-index: 2; color: var(--cream); }
.pm-where { font-size: 0.78rem; font-weight: 700; opacity: 0.92; }
.pm-title h2 { font-size: 1.7rem; line-height: 1.15; margin-top: 2px; }
.pm-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px; padding: 16px 18px 4px;
}
.pm-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; min-width: 0; }
.pm-stat b { font-size: 0.86rem; font-weight: 800; line-height: 1.3; }
/* "Recommended time" is longer than the column, so labels wrap centred rather
   than forcing the three stats out of alignment. */
.pm-stat em {
  font-style: normal; font-size: 0.68rem; font-weight: 700; color: var(--muted);
  line-height: 1.3; max-width: 100%;
}
.pm-card .pm-ico { width: 18px; height: 18px; margin-bottom: 3px; }
.pm-body { padding: 12px 22px 22px; }
.pm-body h3 { font-size: 1.05rem; margin: 14px 0 5px; }
.pm-body p { font-size: 0.9rem; line-height: 1.6; color: var(--muted); }
.pm-body p + p { margin-top: 9px; }
.pm-tag { font-size: 0.78rem !important; font-weight: 700; margin-top: 12px; }
.pm-tips { list-style: none; display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.pm-tips li {
  position: relative; padding-left: 16px;
  font-size: 0.87rem; line-height: 1.55; color: var(--muted);
}
.pm-tips li::before {
  content: ""; position: absolute; left: 3px; top: 9px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--mint);
}
.pm-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.pm-actions .btn { flex: 1 1 auto; }
@media (max-width: 520px) {
  .poi-modal { padding: 0; align-items: end; }
  .pm-card { width: 100%; max-height: 92vh; border-radius: 22px 22px 0 0; }
  .pm-photo { height: 210px; border-radius: 22px 22px 20px 20px; }
}

/* The suggestion list: a round photo, a name, a line, and the facts as icons.
   A quarter the height of a poi-card, so a long tail of places reads as a list
   to skim rather than a second shop window. */
.poi-chips {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 8px;
}
.poi-chip {
  position: relative; font: inherit; color: inherit; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-md);
  padding: 9px 12px; min-width: 0;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.poi-chip:hover { border-color: var(--brand); transform: translateY(-1px); }
.poi-chip.selected { border-color: var(--brand); background: var(--mint-pale); }
.poi-chip-thumb {
  position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%;
  overflow: hidden; background: var(--mint-pale);
  display: grid; place-items: center; font-size: 1.25rem;
}
.poi-chip-thumb img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.3s ease;
}
.poi-chip-thumb img.loaded { opacity: 1; }
.poi-chip-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.poi-chip-body strong { font-size: 0.9rem; line-height: 1.3; }
.poi-chip-desc {
  font-size: 0.78rem; color: var(--muted); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.poi-chip-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 2px; }
.poi-chip-meta em {
  font-style: normal; font-size: 0.7rem; font-weight: 700; color: var(--muted);
  white-space: nowrap;
}
.poi-chip .poi-check {
  position: static; margin-left: auto; flex: none;
  width: 22px; height: 22px; border-radius: 50%; font-size: 0.72rem;
  display: grid; place-items: center;
  background: var(--sunk); color: transparent; border: 1.5px solid var(--border);
}
.poi-chip.selected .poi-check {
  background: var(--brand); border-color: var(--brand); color: var(--cream);
}
.poi-card {
  position: relative; font: inherit; color: inherit; text-align: left;
  background: none; border: none; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; gap: 7px;
}
.poi-card-img {
  position: relative; aspect-ratio: 4 / 3; width: 100%;
  border-radius: var(--r-sm); overflow: hidden;
  background: linear-gradient(135deg, var(--mint-pale), var(--mint-soft));
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow 0.2s ease;
}
.poi-card:hover .poi-card-img { box-shadow: 0 8px 24px rgba(92, 74, 62, 0.18); }
.poi-card:active .poi-card-img { transform: scale(0.98); }
.poi-fallback { font-size: 2rem; }
.poi-card-img img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity 0.4s ease, transform 0.35s ease;
}
.poi-card-img img.loaded { opacity: 1; }
.poi-card:hover .poi-card-img img { transform: scale(1.05); }
.poi-card.selected .poi-card-img {
  outline: 3px solid var(--brand); outline-offset: 2px;
}
.badge-first {
  position: absolute; top: 7px; left: 7px; z-index: 2;
  background: rgba(255, 255, 255, 0.95); color: var(--ink);
  font-size: 0.68rem; font-weight: 800;
  padding: 2px 8px; border-radius: var(--r-pill);
  box-shadow: 0 2px 8px rgba(92, 74, 62, 0.2);
}
.poi-card-body { display: flex; flex-direction: column; gap: 1px; padding: 0 2px; }
/* which part of the country a place is in */
.poi-card-where {
  display: block; font-size: 0.73rem; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--brand-dark); margin-bottom: 3px;
}
.poi-card-title { font-size: 0.95rem; font-weight: 800; line-height: 1.3; }
/* The two facts left on the card: what kind of thing it is, and how much of a
   day it takes. Everything else moved into the detail card behind the name. */
.poi-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.poi-card-tag {
  font-size: 0.74rem; font-weight: 700; color: var(--muted);
  background: var(--sunk); border-radius: var(--r-pill); padding: 3px 10px;
  white-space: nowrap;
}
.poi-card-tag.cat { background: var(--mint-pale); color: var(--brand-dark); }
/* Not in the base you'd be staying in, so it costs a day rather than an hour */
.poi-card-tag.trip { background: var(--gold-soft); color: var(--ink); }
.poi-check {
  position: absolute; top: 7px; right: 7px; z-index: 2;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--brand); color: #fff; font-weight: 800; font-size: 0.78rem;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; box-shadow: 0 2px 8px rgba(95, 123, 104, 0.4);
  transform: scale(0); transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.poi-card.selected .poi-check { transform: scale(1); }

/* ---------- Map ---------- */
.map-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
#map { height: 420px; width: 100%; z-index: 0; background: var(--mint-pale); }
.map-fallback {
  height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-weight: 600;
}
.map-legend {
  display: flex; flex-wrap: wrap; gap: 18px; padding: 12px 18px;
  font-size: 0.85rem; color: var(--muted); border-top: 1px solid var(--border);
}
.map-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.legend-dot { width: 13px; height: 13px; border-radius: 50%; display: inline-block; }
.legend-dot.stay { background: var(--brand); }
.legend-dot.near { background: #fff; border: 3px solid var(--brand); }
.legend-dot.far { background: #fff; border: 3px solid var(--line); }

.poi-dot {
  width: 34px; height: 34px; border-radius: 50%; position: relative;
  background: #fff; border: 3px solid var(--brand);
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; box-shadow: 0 2px 8px rgba(92, 74, 62, 0.25);
  cursor: pointer; transition: transform 0.12s ease;
}
.poi-dot:hover { transform: scale(1.12); }
.poi-dot.poi-far { border-color: var(--line); opacity: 0.8; }
.poi-dot.poi-off { border-color: var(--line); opacity: 0.85; }
.poi-dot.poi-on { border-color: var(--brand); transform: scale(1.08); }
.poi-dot.poi-on::after {
  content: "✓"; position: absolute; top: -6px; right: -6px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--brand); color: #fff;
  font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}
.legend-dot.sel { background: #fff; border: 3px solid var(--brand); }
.legend-dot.unsel { background: #fff; border: 3px solid var(--line); }
.stay-pin {
  background: var(--brand); color: #fff; font-weight: 700; font-size: 0.85rem;
  padding: 7px 14px; border-radius: var(--r-pill); white-space: nowrap; text-align: center;
  box-shadow: 0 4px 14px rgba(95, 123, 104, 0.45);
  border: 2px solid #fff;
}

/* ---------- Results split view (list left, map right) ---------- */
.results-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(360px, 42vw, 900px);
  align-items: start;
  min-height: 100vh;
}
/* centred in its column — margin-left:auto pinned it to the map and left the
   whole surplus as a void on the left at wide viewports */
.results-panel { padding: 32px 40px 80px; max-width: 980px; margin: 0 auto; width: 100%; }
/* The wishlist page's one heading, so it carries the page the way "Stay in
   Kyoto" carries the results */
.wishlist-title { font-size: 2.2rem; letter-spacing: -0.02em; margin: 6px 0 14px; }
/* Kobo lines up with the baseline of the title rather than the middle of it:
   the themed illustrations all stand on a painted patch of ground, and sitting
   that on the type's baseline is what stops him looking like he's floating.
   The width itself lives with the other mascot sizes, after `.kobo`. */
.wishlist-head { display: flex; align-items: flex-end; gap: 12px; }
@media (max-width: 900px) { .wishlist-title { font-size: 1.7rem; } }
.results-map { position: sticky; top: 0; height: 100vh; }
.results-map #map { height: 100%; width: 100%; z-index: 0; background: var(--mint-pale); }
.map-overlay-legend {
  position: absolute; bottom: 18px; left: 18px; z-index: 500;
  background: rgba(255, 255, 255, 0.95); border-radius: var(--r-sm); padding: 10px 16px;
  display: flex; flex-direction: column; gap: 5px;
  font-size: 0.82rem; font-weight: 600; color: var(--ink);
  box-shadow: var(--shadow);
}
.map-overlay-legend > span { display: inline-flex; align-items: center; gap: 8px; }
/* The itinerary, drawn on the map: which day each pick belongs to, and the
   order you'd travel between them. */
.poi-day {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  height: 17px; padding: 0 7px; border-radius: var(--r-pill); white-space: nowrap;
  background: var(--brand-dark); color: var(--cream);
  font-size: 0.64rem; font-weight: 800; line-height: 17px; text-align: center;
  box-shadow: 0 2px 6px rgba(20, 32, 28, 0.35);
}
.route-arrow {
  color: var(--brand-dark); font-size: 0.9rem; line-height: 18px; text-align: center;
  text-shadow: 0 0 4px rgba(253, 252, 247, 0.9);
}

/* A base too far off the winner's match: shown for orientation, not clickable */
.base-pill.dim { opacity: 0.55; cursor: default; }

/* "Perhaps you'd like to visit…" — the far-off bases, offered as their own
   trip rather than as a comparison that could never win. */
.maybe-card {
  background: var(--gold-soft); border: 1.5px solid var(--cheek);
  border-radius: var(--r-md); padding: 14px 16px;
}
.maybe-head { font-weight: 800; font-size: 0.95rem; margin-bottom: 4px; }
.maybe-note { font-size: 0.85rem; color: var(--muted); line-height: 1.5; margin-bottom: 10px; }
.maybe-row { display: flex; flex-wrap: wrap; gap: 8px; }
.maybe-base {
  font: inherit; font-weight: 700; font-size: 0.86rem; cursor: pointer; color: inherit;
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-pill);
  padding: 6px 14px 6px 8px; transition: all 0.15s ease;
}
.maybe-base:hover { border-color: var(--brand); transform: translateY(-1px); box-shadow: var(--shadow); }
.maybe-base .wthumb.mini { margin-right: 3px; }
.maybe-nights { font-style: normal; font-size: 0.74rem; font-weight: 800; color: var(--muted); }

/* What they asked to be near, echoed on the stay card */
.stay-asks { font-size: 0.82rem; font-weight: 700; color: var(--brand-dark); margin-top: 8px; }

/* Brand line icons inline with text: sized by the font, coloured by the text */
.cico { width: 1em; height: 1em; display: inline-block; vertical-align: -0.12em; flex: none; }
.poi-dot .cico { width: 17px; height: 17px; vertical-align: middle; color: var(--brand-dark); }

/* Only true where the map actually needs two fingers — see mapOptions() */
.legend-touch { display: none; }
@media (pointer: coarse) {
  .legend-touch { display: inline-flex; color: var(--muted); }
}

/* The name of the place on the left, everything you can change about it on the
   right — so the answer reads first and the controls don't push it down. */
.rp-head {
  margin-bottom: 24px; display: grid; gap: 14px 26px;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: start;
}
.rp-head-main { min-width: 0; display: flex; align-items: center; gap: 14px; position: relative; }
.rp-head-text { min-width: 0; }
.rp-kobo { flex: none; align-self: center; }
.rp-kobo .found-kobo { width: 64px; height: 64px; }
@media (max-width: 620px) { .rp-kobo .found-kobo { width: 48px; height: 48px; } }
.rp-head-side { min-width: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.rp-head > .filter-row { grid-column: 1 / -1; margin-top: -2px; }
.rp-head-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.rp-restart, .rp-share, .rp-itin { white-space: nowrap; }
/* The itinerary's front door needs the section not to land flush with the
   viewport edge when jumped to. */
.rp-section.itinerary { scroll-margin-top: 18px; }

@media (max-width: 900px) {
  /* Stacked, and the buttons go back to reading left-to-right. They also go
     last: in one column they'd otherwise land between the title and the answers
     that belong to it. */
  .rp-head { grid-template-columns: 1fr; }
  .rp-head-side { align-items: stretch; order: 1; }
  .rp-head-actions { justify-content: flex-start; }
}
.found-line { font-weight: 800; color: var(--accent); font-size: 0.95rem; display: flex; align-items: center; gap: 6px; }
/* Kobo is the way into the passport — a picture of you, so to speak */
.kobo-link {
  background: none; border: none; padding: 0; cursor: pointer; line-height: 0;
  border-radius: 50%; transition: transform 0.15s ease;
}
.kobo-link:hover { transform: scale(1.08); }
.kobo-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.found-line.alt a { text-decoration: underline; cursor: pointer; }
.rp-head h2 { font-size: 2.2rem; letter-spacing: -0.02em; }
.rp-sub { color: var(--muted); margin-bottom: 14px; }
.filter-row { display: flex; flex-wrap: wrap; gap: 7px; align-items: flex-start; }
.fpill-edit { color: var(--ink); }
.fpill {
  font: inherit; font-weight: 700; font-size: 0.8rem; color: var(--muted);
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-pill);
  padding: 6px 12px; cursor: pointer; transition: all 0.15s ease; white-space: nowrap;
}
.fpill:hover { color: var(--ink); }
.fpill:hover { border-color: var(--ink); }

}

.hero-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.hero-banner {
  background: linear-gradient(135deg, var(--mint-pale), var(--mint-soft), var(--mint-soft));
  font-size: 3.4rem; text-align: center; padding: 22px 0;
}
.hero-photo {
  position: relative; height: 270px;
  background: linear-gradient(135deg, var(--mint-pale), var(--mint-soft));
  display: flex; align-items: center; justify-content: center;
}
.hero-photo .poi-fallback { font-size: 3.2rem; }
.hero-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 0.5s ease;
}
.hero-photo img.loaded { opacity: 1; }
.hero-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20, 26, 34, 0.55), transparent 45%);
}
.hero-photo-label {
  position: absolute; bottom: 14px; left: 18px; z-index: 2;
  color: #fff; font-weight: 800; font-size: 1.05rem;

}

/* Photo option tiles (country picker) */
.photo-opt { padding: 0; overflow: hidden; }
.photo-opt-img {
  position: relative; aspect-ratio: 16 / 8.5; width: 100%;
  background: linear-gradient(135deg, var(--mint-pale), var(--mint-soft));
  display: flex; align-items: center; justify-content: center;
}
.photo-opt-img .poi-fallback { font-size: 2.4rem; }
.photo-opt-img img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 0.5s ease, transform 0.35s ease;
}
.photo-opt-img img.loaded { opacity: 1; }
.photo-opt:hover .photo-opt-img img { transform: scale(1.05); }
.photo-opt-body { padding: 13px 17px 15px; display: flex; flex-direction: column; gap: 2px; }
.photo-opt .poi-check { top: 12px; right: 12px; }
.hero-body { padding: 22px 26px 26px; }
.match-line { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.match-line .match-num { font-size: 1.7rem; font-weight: 900; color: var(--accent); }
.match-line .match-sub { color: var(--accent); font-weight: 700; font-size: 0.92rem; }
.hero-body .winner-blurb { text-align: left; margin: 0 0 18px; }
.hero-body .score-grid { margin: 0 0 18px; max-width: none; }

/* Season timing card */
/* A tip rather than a panel: it's a caveat on the answer above it, so it's sized
   like one — no shadow, tighter padding, smaller type. */
.season-card {
  margin-top: 22px; border-radius: var(--r-md); padding: 14px 18px;
  background: var(--surface); border: 1px solid var(--border);
}
.season-card h3 { font-size: 0.98rem; margin-bottom: 4px; }
.season-summary { color: var(--muted); margin-bottom: 10px; font-size: 0.87rem; line-height: 1.5; }
/* Read as a tip, the way the flight line does: a coloured edge and a wash that
   fades out, rather than a fully filled and outlined yellow box. Two of those
   stacked looked like error messages on a form. */
.warn-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.warn-list li {
  display: flex; gap: 8px; align-items: center;
  background: linear-gradient(90deg, var(--gold-soft), rgba(251, 229, 216, 0) 82%);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 6px 11px; font-size: 0.82rem; line-height: 1.45;
}
.warn-ico { flex-shrink: 0; font-size: 0.88rem; }

.rp-section { margin-top: 28px; }
.rp-section h3 { font-size: 1.15rem; margin-bottom: 4px; }
.rp-hint { color: var(--muted); font-size: 0.88rem; margin-bottom: 12px; }

.wl-row {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 12px 16px; margin-bottom: 10px; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.wl-row:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--brand); }
.wl-row.slim { cursor: default; }
.wl-row.slim:hover { transform: none; box-shadow: none; border-color: var(--border); }
.wl-img {
  width: 64px; height: 64px; border-radius: var(--r-sm); flex-shrink: 0;
  background: linear-gradient(135deg, var(--mint-pale), var(--mint-soft));
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
  overflow: hidden;
}
.wl-img img { width: 100%; height: 100%; object-fit: cover; }
.wl-info { display: flex; flex-direction: column; min-width: 0; }
.wl-info strong { font-size: 0.98rem; }
.wl-info span { font-size: 0.83rem; color: var(--muted); }
.wl-far { opacity: 0.75; }
.wl-status {
  margin-left: auto; width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.85rem; color: #fff;
}
.wl-status.ok { background: var(--brand-dark); }
.wl-status.no { background: var(--line); }
.wl-row .trip-time { margin-left: auto; }

.base-pill {
  /* sits above its city point rather than on it, so the wishlist dots stay visible */
  transform: translate(-50%, -175%);
  background: #fff; color: var(--ink);
  font-family: "Nunito", sans-serif; font-weight: 800; font-size: 0.85rem;
  padding: 7px 14px; border-radius: var(--r-pill); white-space: nowrap;
  box-shadow: 0 3px 12px rgba(92, 74, 62, 0.28);
  border: 1px solid rgba(92, 74, 62, 0.08);
  cursor: pointer; transition: transform 0.12s ease;
  display: inline-block; width: max-content;
}
.base-pill:hover { transform: translate(-50%, -175%) scale(1.07); }
.base-pill.current {
  background: linear-gradient(135deg, var(--brand), var(--mint)); color: #fff;
  box-shadow: 0 4px 16px rgba(95, 123, 104, 0.5); border: 2px solid #fff;
  font-size: 0.9rem;
}

/* ---------- Wishlist checklist ---------- */
.checklist {
  margin-top: 24px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px 28px;
}
.checklist h3 { margin-bottom: 14px; font-size: 1.15rem; }
.checklist ul { list-style: none; }
.checklist li {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--border); font-size: 0.97rem;
}
.checklist li:last-child { border-bottom: none; }
.cl-icon {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 800; color: #fff;
}
.cover-yes .cl-icon { background: var(--brand-dark); }
.cover-no .cl-icon { background: var(--line); }
.cover-no { color: var(--muted); }
.cl-note { margin-left: auto; font-size: 0.82rem; color: var(--muted); font-style: italic; white-space: nowrap; }

/* ---------- Where exactly to stay ---------- */
.stay-card {
  margin-top: 18px; padding: 18px 20px; border-radius: var(--r-md);
  background: var(--accent-soft); border: 1px solid rgba(125, 154, 135, 0.28);
}
.stay-head { display: flex; align-items: flex-start; gap: 14px; justify-content: space-between; }
.stay-where { display: flex; flex-direction: column; }
.stay-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.stay-area { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; line-height: 1.2; margin-top: 2px; }
.stay-nights {
  flex: none; background: var(--brand); color: #fff; font-weight: 800; font-size: 0.85rem;
  padding: 6px 14px; border-radius: var(--r-pill); white-space: nowrap;
}
.stay-note { margin-top: 8px; font-size: 0.95rem; }
.stay-alts { margin-top: 10px; font-size: 0.85rem; color: var(--muted); }
.stay-alts span {
  display: inline-block; background: var(--cream); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 2px 10px; margin: 3px 4px 0 0; font-weight: 700; color: var(--ink);
}
.stay-tips { margin-top: 10px; font-size: 0.85rem; color: var(--muted); font-style: italic; }
.leg-why { font-size: 0.8rem; color: var(--muted); margin-top: 2px; }

/* ---------- What staying put saves ---------- */
.savings-card {
  margin-top: 24px; padding: 24px 26px; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--brand-dark), var(--brand)); color: var(--cream);
  box-shadow: 0 10px 30px rgba(92, 74, 62, 0.22);
}
.savings-card h3 { font-size: 1.15rem; margin-bottom: 16px; }
.savings-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sv {
  background: rgba(253, 252, 247, 0.14); border: 1px solid rgba(253, 252, 247, 0.22);
  border-radius: var(--r-sm); padding: 14px 12px; text-align: center;
  display: flex; flex-direction: column; gap: 2px;
}
.sv strong { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1.1; }
.sv span { font-size: 0.78rem; color: rgba(253, 252, 247, 0.85); }
.savings-note { margin-top: 14px; font-size: 0.8rem; color: rgba(253, 252, 247, 0.78); }

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .cine-title { line-height: 1; }
  .cine-caption { display: none; }
  .cine-foot { justify-content: flex-start; padding-bottom: 18px; }
  .cine-sub { font-size: 0.98rem; }
  .savings-row { grid-template-columns: 1fr; }
  .stay-head { flex-direction: column; gap: 8px; }
}

@media (max-width: 600px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .hero h1 { font-size: 2.2rem; }
  .hero-features { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .collage-tile:nth-child(even) { transform: none; }
  .hero-photo { height: 200px; }
  .results-head h2 { font-size: 1.8rem; }
  .split-plan { flex-direction: column; align-items: stretch; }
  .split-arrow { text-align: center; transform: rotate(90deg); }
  .score-row { grid-template-columns: 110px 1fr 40px; }
  .step-footer { flex-direction: column; }
  #map { height: 320px; }
  .cl-note { display: none; }
  .rp-head h2 { font-size: 1.7rem; }
}

@media (max-width: 960px) {
  .results-split { grid-template-columns: 1fr; }
  /* tall enough that fitBounds can frame a country rather than a continent */
  .results-map { position: relative; height: 440px; order: -1; }
  .results-panel { padding: 24px 20px 60px; margin: 0 auto; }
}

/* ---------- Extra questionnaire answers in the results ---------- */
.beds-line { margin-top: 10px; font-size: 0.86rem; color: var(--accent); }
.split-leg .beds-line { font-size: 0.76rem; margin-top: 6px; }
.access-warn {
  margin-top: 12px; padding: 10px 14px; border-radius: var(--r-sm); font-size: 0.86rem;
  background: var(--gold-soft); border: 1px solid var(--gold); color: var(--ink);
}
.pace-warn {
  margin: 10px 0 4px; padding: 10px 14px; border-radius: var(--r-sm); font-size: 0.86rem;
  background: var(--gold-soft); border: 1px solid var(--gold); color: var(--ink);
}

/* Travel-style questions: icon beside a stacked title + description */
.card.compact.stacked { align-items: flex-start; }
.card.compact.stacked .card-icon { font-size: 1.6rem; line-height: 1.2; }
.card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.card-text .card-title { font-weight: 800; }
.card-text .card-sub { color: var(--muted); font-size: 0.85rem; line-height: 1.4; }

/* ---------- Hero itinerary planner ---------- */
.planner {
  background: var(--surface); color: var(--ink);
  border-radius: var(--r-lg); padding: 26px 24px 22px;
  box-shadow: 0 24px 60px rgba(92, 74, 62, 0.4);
  display: flex; flex-direction: column; gap: 14px;
}
.planner-title { font-size: 1.5rem; text-align: center; margin-bottom: 2px; }
.planner-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.planner-label {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); display: flex; align-items: center; gap: 5px;
}
.planner-hint { font-style: normal; cursor: help; color: var(--brand); }
.planner select, .wiz-selects select {
  font: inherit; font-weight: 600; font-size: 0.95rem; color: var(--ink);
  width: 100%; padding: 11px 34px 11px 13px; border-radius: var(--r-sm);
  border: 1.5px solid var(--border); background: var(--surface); cursor: pointer;
  appearance: none; text-overflow: ellipsis;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  transition: border-color 0.15s ease;
}
.planner select:hover, .planner select:focus,
.wiz-selects select:hover, .wiz-selects select:focus { border-color: var(--brand); outline: none; }

.planner-toggle {
  font: inherit; font-weight: 700; font-size: 0.9rem; text-align: left;
  background: none; border: none; cursor: pointer; color: var(--ink);
  padding: 4px 0; display: flex; align-items: center; gap: 6px;
}
.planner-toggle span { color: var(--muted); font-weight: 600; }
.planner-toggle em { font-style: normal; margin-left: auto; color: var(--muted); transition: transform 0.2s ease; }
.planner-toggle.open em { transform: rotate(180deg); }

.planner-acts { display: flex; flex-wrap: wrap; gap: 7px; }
/* author display beats the UA [hidden] rule, so restate it */
.planner-acts[hidden] { display: none; }
.act-chip {
  font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer;
  background: var(--bg); color: var(--ink);
  border: 1.5px solid var(--border); border-radius: var(--r-pill); padding: 6px 12px;
  transition: all 0.15s ease;
}
.act-chip:hover { border-color: var(--brand); }
.act-chip.on { background: var(--accent-soft); border-color: var(--brand); }

.planner-go {
  font: inherit; font-weight: 800; font-size: 1rem; cursor: pointer;
  background: var(--brand); color: var(--cream); border: none;
  border-radius: var(--r-pill); padding: 15px; margin-top: 4px;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.planner-go:hover:not(:disabled) { transform: translateY(-2px); }
.planner-go:disabled { opacity: 0.35; cursor: not-allowed; }
.planner-note { font-size: 0.78rem; color: var(--muted); text-align: center; }
.planner-note a { color: var(--brand); font-weight: 800; cursor: pointer; text-decoration: underline; }

@media (max-width: 900px) {
  .hero-cinema { height: auto; min-height: 100svh; padding: 84px 0 96px; }
  .cine-inner { grid-template-columns: 1fr; gap: 30px; }
  .cine-foot { position: static; padding-top: 26px; }
  .planner { max-width: 420px; }
}
.fpill.refine { border-style: dashed; border-color: var(--brand); color: var(--brand); }
.fpill.refine:hover { background: var(--accent-soft); }
/* our assumption, not their answer — tap it to say what they actually want */
.fpill.assumed { border-style: dashed; opacity: 0.8; }

/* ---------- Hero: top nav ---------- */
.topnav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 4;
  display: flex; align-items: center; gap: 24px;
  padding: 22px clamp(20px, 5vw, 64px); color: var(--ink);
}
.topnav-links { display: flex; gap: 28px; margin: 0 auto; }
.topnav-links a {
  color: var(--muted); font-weight: 700; font-size: 0.92rem;
  text-decoration: none; cursor: pointer; padding-bottom: 3px;
  border-bottom: 2px solid transparent; transition: all 0.15s ease;
}
.topnav-links a:hover { color: var(--ink); border-color: var(--brand); }
.topnav-right { flex: none; }

/* Everything in the hero now sits over a photograph rather than a cream wash,
   so it has to carry its own contrast. Scoped to .hero-cinema — the same nav
   markup on the passport and browse pages still sits on cream. */
.hero-cinema .topnav-links a { color: rgba(253, 252, 247, 0.82); }
.hero-cinema .topnav-links a:hover { color: var(--cream); border-color: var(--cream); }
.hero-cinema .round-btn { background: rgba(253, 252, 247, 0.9); border-color: transparent; }

.greet {
  font: inherit; font-weight: 700; font-size: 0.88rem; color: var(--ink); cursor: pointer;
  display: flex; align-items: center; gap: 9px;
  background: var(--cream); border: 1.5px solid var(--line);
  border-radius: var(--r-pill); padding: 6px 16px 6px 6px; backdrop-filter: blur(6px);
}
.greet:hover { background: var(--mint-soft); }
.greet-avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--mint-soft);
  display: flex; align-items: center; justify-content: center; font-size: 0.85rem;
}

.round-btn { background: rgba(253, 252, 247, 0.9); border-color: transparent; }

.greet {
  font: inherit; font-weight: 700; font-size: 0.88rem; color: var(--ink); cursor: pointer;
  display: flex; align-items: center; gap: 9px;
  background: var(--cream); border: 1.5px solid var(--line);
  border-radius: var(--r-pill); padding: 6px 16px 6px 6px; backdrop-filter: blur(6px);
}
.greet:hover { background: var(--mint-soft); }
.greet-avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--mint-soft);
  display: flex; align-items: center; justify-content: center; font-size: 0.85rem;
}

/* ---------- Hero: title + explore ---------- */
@keyframes titleSwap { from { opacity: 0; transform: translateY(16px); } }
.cine-title.swap { animation: titleSwap 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.explore-arrow {
  width: 38px; height: 38px; border-radius: 50%; background: rgba(253, 252, 247, 0.28);
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
  transition: transform 0.2s ease;
}
.explore-btn:hover .explore-arrow { transform: translateX(3px); }

/* ---------- Hero: overlapping destination cards ---------- */
.cine-controls {
  /* bottom-right, clear of the planner card docked at the bottom-left, and
     riding above the wave so the cream buttons keep the photo behind them */
  position: absolute; right: clamp(20px, 5vw, 64px); bottom: clamp(34px, 5vw, 68px);
  z-index: 4; display: flex; gap: 14px;
}
.round-btn {
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  font-size: 1.3rem; line-height: 1; color: var(--ink);
  background: var(--cream); border: 1.5px solid var(--line);
  transition: all 0.15s ease;
}
.round-btn:hover { background: var(--mint-soft); border-color: var(--brand); transform: scale(1.08); }

/* ---------- Planner docked under the hero ---------- */
.planner-dock {
  position: relative; z-index: 5; max-width: 1160px; margin: -118px auto 0;
}


@media (max-width: 900px) {
  .topnav-links { display: none; }
  .cine-controls { position: static; justify-content: center; padding-top: 18px; }
  .planner-dock { margin-top: -40px; }
}

/* ---------- Sign up (local passport) ---------- */
.cine-mark.dark { color: var(--ink); }
.signup-wrap { min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.signup-card {
  width: min(100%, 440px); background: var(--surface); border-radius: var(--r-lg);
  padding: 32px 30px 26px; box-shadow: 0 20px 50px rgba(92, 74, 62, 0.14);
  display: flex; flex-direction: column; gap: 14px;
}
.signup-card h1 { font-size: 1.9rem; line-height: 1.1; margin-top: 6px; }
.signup-sub { color: var(--muted); font-size: 0.95rem; }
.signup-input {
  font: inherit; font-weight: 600; width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--ink);
}
.signup-input:focus { outline: none; border-color: var(--brand); }
.avatar-row { display: flex; flex-wrap: wrap; gap: 8px; }
.avatar-pick {
  width: 46px; height: 46px; font-size: 1.4rem; cursor: pointer;
  background: var(--bg); border: 2px solid var(--border); border-radius: var(--r-sm);
  transition: all 0.15s ease;
}
.avatar-pick:hover { border-color: var(--brand); }
.avatar-pick.on { border-color: var(--brand); background: var(--accent-soft); transform: scale(1.06); }

/* ---------- Profile shell ---------- */
.profile-shell { display: grid; grid-template-columns: 236px 1fr; min-height: 100svh; }
.profile-side {
  background: var(--surface); border-right: 1px solid var(--border);
  padding: 26px 20px; display: flex; flex-direction: column; gap: 26px;
  position: sticky; top: 0; height: 100svh;
}
.side-nav { display: flex; flex-direction: column; gap: 4px; }
.side-nav a {
  color: var(--muted); font-weight: 700; font-size: 0.92rem; text-decoration: none;
  padding: 10px 12px; border-radius: var(--r-sm); transition: all 0.15s ease;
}
.side-nav a:hover { background: var(--accent-soft); color: var(--ink); }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.side-user { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 0.92rem; }
.side-user em { font-style: normal; font-size: 1.3rem; }
.link-btn { background: none; border: none; font: inherit; font-size: 0.82rem; color: var(--muted); cursor: pointer; text-align: left; text-decoration: underline; }
.link-btn:hover { color: var(--ink); }

.profile-main { padding: 24px clamp(20px, 4vw, 44px) 70px; max-width: 1060px; }
.profile-top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 22px; }

.profile-hero {
  background: var(--surface); border-radius: var(--r-lg); padding: 26px;
  box-shadow: var(--shadow); display: grid;
  grid-template-columns: auto 1fr; gap: 22px 26px; align-items: center;
}
.pf-avatar {
  position: relative; width: 104px; height: 104px; border-radius: var(--r-lg); font-size: 3rem;
  background: linear-gradient(135deg, var(--accent-soft), var(--mint-soft));
  display: flex; align-items: center; justify-content: center;
}
.pf-flame {
  position: absolute; top: -8px; right: -8px; width: 32px; height: 32px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow); font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center;
}
.pf-id h1 { font-size: 2rem; line-height: 1.1; }
.pf-role { color: var(--muted); font-size: 0.9rem; font-weight: 700; margin-bottom: 12px; }
.xp-wrap { display: flex; align-items: center; gap: 12px; max-width: 420px; }
.xp-bar { flex: 1; height: 9px; border-radius: var(--r-pill); background: var(--border); overflow: hidden; }
.xp-fill { height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--brand), var(--mint)); transition: width 0.8s cubic-bezier(0.22,1,0.36,1); }
.xp-num { font-size: 0.76rem; font-weight: 800; color: var(--muted); white-space: nowrap; }

.pf-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pf-stat {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  gap: 0 12px; align-items: center;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 16px;
}
.pf-ico {
  grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 50%; background: var(--surface);
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem; box-shadow: var(--shadow);
}
.pf-stat strong { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; line-height: 1.1; }
.pf-stat small { color: var(--muted); font-size: 0.76rem; }

.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.panel { background: var(--surface); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow); }
.panel + .panel, .profile-grid + .panel { margin-top: 18px; }
.panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.panel-head h2 { font-size: 1.25rem; display: flex; align-items: center; gap: 8px; }
.panel-head h2 em {
  font-style: normal; font-family: var(--font-body); font-size: 0.72rem; font-weight: 800;
  background: var(--bg); border-radius: var(--r-sm); padding: 2px 8px; color: var(--muted);
}
.panel-meter { flex: 1; height: 7px; border-radius: var(--r-pill); background: var(--border); overflow: hidden; min-width: 40px; }
.panel-meter span { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--brand), var(--mint)); }
.panel-count { font-size: 0.74rem; font-weight: 800; color: var(--muted); }
.panel-hint { color: var(--muted); font-size: 0.85rem; margin-bottom: 12px; }

.badge-grid, .stamp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.badge-tile {
  text-align: center; padding: 16px 10px; border-radius: var(--r-md);
  background: var(--bg); border: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.badge-tile strong { font-size: 0.82rem; }
.badge-tile small { font-size: 0.68rem; color: var(--muted); line-height: 1.35; }
.badge-tile.earned { background: var(--accent-soft); border-color: rgba(125, 154, 135, 0.35); }
.badge-tile.earned small { color: var(--brand-dark); font-weight: 800; }
.badge-tile.locked { opacity: 0.62; }
.stamp {
  font: inherit; cursor: pointer; text-align: center; padding: 14px 8px; border-radius: var(--r-md);
  background: var(--bg); border: 2px dashed var(--border); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; gap: 3px; transition: all 0.15s ease;
}
.stamp:hover { border-color: var(--brand); }
.stamp-flag { font-size: 1.7rem; filter: grayscale(1); opacity: 0.5; transition: all 0.2s ease; }
.stamp-name { font-size: 0.8rem; font-weight: 800; }
.stamp-mark { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.stamp.on { border-style: solid; border-color: var(--brand); background: var(--accent-soft); }
.stamp.on .stamp-flag { filter: none; opacity: 1; }
.stamp.on .stamp-mark { color: var(--brand-dark); }

.trip-list { display: flex; flex-direction: column; gap: 8px; }
/* A row is the trip, and clicking it reopens it — so it's a button, and it has
   to look like one you can press without turning the list into a wall of chrome:
   the arrow only arrives on hover. */
.trip-row {
  font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%;
  display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.trip-row:hover { background: var(--mint-pale); border-color: var(--mint); transform: translateX(2px); }
.trip-row:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.trip-flag { font-size: 1.4rem; }
.trip-info { display: flex; flex-direction: column; min-width: 0; }
.trip-info strong { font-size: 0.95rem; }
.trip-info span { font-size: 0.78rem; color: var(--muted); }
.trip-season { margin-left: auto; font-size: 1.1rem; }
.trip-go {
  font-size: 1rem; color: var(--brand-dark); opacity: 0;
  transition: opacity 0.15s ease;
}
.trip-season + .trip-go { margin-left: 0; }
.trip-row:hover .trip-go, .trip-row:focus-visible .trip-go { opacity: 1; }

@media (max-width: 900px) {
  .profile-shell { grid-template-columns: 1fr; }
  .profile-side {
    position: static; height: auto; flex-direction: row; align-items: center;
    gap: 16px; border-right: none; border-bottom: 1px solid var(--border);
    padding: 14px 16px; min-width: 0;
  }
  /* A flex child won't shrink below its own content unless it's told it may, so
     the nav ignored its overflow-x and stretched this bar to twice the width of
     a phone — taking the whole passport page sideways with it. */
  .side-nav { flex-direction: row; overflow-x: auto; flex: 1; min-width: 0; -webkit-overflow-scrolling: touch; }
  .side-nav a { white-space: nowrap; }
  .side-foot { margin-top: 0; margin-left: auto; flex: none; flex-direction: row; align-items: center; gap: 12px; }
  .profile-grid { grid-template-columns: 1fr; }
  .profile-hero { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .pf-stats { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  /* No room for a name and a nav on one line — the nav is what you came for */
  .profile-side { flex-wrap: wrap; gap: 10px 14px; }
  .side-nav { order: 3; flex-basis: 100%; }
  .badge-grid, .stamp-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Kobo the mascot + spot illustrations ---------- */
.kobo { width: 100%; height: auto; display: block; }
.kobo-head { width: 34px; height: auto; flex: none; }
.kobo-head.nav { width: 48px; }
.cine-mark { display: flex; align-items: center; gap: 8px; }

@keyframes koboBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.how-head { display: flex; align-items: center; gap: 26px; margin-bottom: 34px; }
.below-hero .hero-features { margin-top: 26px; }
.how-kobo { width: 150px; flex: none; animation: koboBob 4s ease-in-out infinite; }
.how-title { font-size: 1.9rem; line-height: 1.15; margin: 2px 0 8px; }
.how-sub { color: var(--muted); max-width: 46ch; }
.below-hero .section-label { text-align: left; margin-bottom: 2px; }

.spot { width: 68px; height: 68px; }
.feat .spot { margin-bottom: 6px; }

.wishlist-kobo { width: 104px; flex: none; margin-bottom: 2px; }
@media (max-width: 900px) { .wishlist-kobo { width: 78px; } }
.signup-kobo { width: 120px; margin: -6px auto 0; animation: koboBob 4s ease-in-out infinite; }
.loading-kobo { width: 160px; margin: 0 auto 18px; animation: koboBob 2.4s ease-in-out infinite; }
/* a white bunny on cream disappears below ~56px, so small placements sit on a
   mint disc — the same trick the medals use */
.found-kobo, .kobo-chip {
  width: 46px; height: 46px; flex: none; object-fit: contain; object-position: center bottom;
  background: var(--mint-soft); border-radius: 50%; padding: 4px 4px 0;
}
.found-line { display: flex; align-items: center; gap: 6px; }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0 4px; }
.empty-kobo { width: 120px; opacity: 0.95; }
.empty-state p { color: var(--muted); font-size: 0.9rem; }

/* medals, drawn rather than emoji */
.medal { width: 62px; height: 62px; margin-bottom: 2px; }
.badge-tile.earned .medal { filter: drop-shadow(0 5px 12px rgba(228, 138, 102, 0.35)); }
.badge-tile.locked .medal { opacity: 0.7; }

@media (max-width: 700px) {
  .how-head { flex-direction: column; text-align: center; gap: 14px; }
  .how-sub { margin: 0 auto; }
  .below-hero .section-label { text-align: center; }
}
.ico { width: 19px; height: 19px; flex: none; }
.side-nav a { display: flex; align-items: center; gap: 10px; }
.pf-ico .ico { width: 20px; height: 20px; }
.pf-flame { padding: 3px; }
.pf-flame .kobo-head { width: 26px; height: 26px; object-fit: contain; object-position: center bottom; }
.side-user .kobo-head { width: 30px; height: 30px; object-fit: contain; object-position: center bottom; }

/* ---------- Planner panel: the whole questionnaire, in one card ---------- */
.planner {
  background: var(--surface); color: var(--ink);
  border-radius: var(--r-lg); padding: 26px 26px 22px;
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 18px;
}
.planner-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.planner-title { font-size: 1.6rem; text-align: left; margin: 0; }
.planner-lead { color: var(--muted); font-size: 0.9rem; margin-top: 2px; }
.planner-close {
  flex: none; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  background: var(--bg); border: 1.5px solid var(--line); color: var(--muted); font-size: 0.9rem;
}
.planner-close:hover { background: var(--mint-soft); color: var(--ink); }

.planner-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
.pf-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
/* What the chosen option means, in the space the select hasn't got. Reserved
   whether or not anything is chosen, so the fields stay on the same baseline. */
.pf-hint { font-size: 0.78rem; color: var(--muted); min-height: 1.1em; line-height: 1.35; padding-left: 2px; }

/* Stage one: where to, and nothing else */
.country-choices {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 12px; margin: 4px 0 8px;
}
.country-choice {
  font: inherit; color: inherit; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: auto 1fr; gap: 2px 12px;
  background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--r-md);
  padding: 14px 16px; transition: all 0.15s ease;
}
.country-choice:hover { border-color: var(--brand); background: var(--mint-pale); transform: translateY(-2px); }
.country-choice em { grid-row: 1 / 3; font-style: normal; font-size: 1.7rem; align-self: center; }
.country-choice strong { font-size: 1rem; }
.country-choice small { color: var(--muted); font-size: 0.82rem; line-height: 1.35; }

/* The same choice, compact, sat in the hero under the Explore button */
.cine-naming { max-width: 40rem; }
.cine-acting { display: flex; flex-direction: column; gap: 22px; margin-top: 30px; }
/* The picker is the one control in the app that sat naked on a photograph.
   It docks in a frosted cream card instead — the same card language as every
   other screen — which also lets the continent labels read in the brand brown
   rather than as faint white caps fighting whatever the photo is doing. */
.cine-cta { align-self: flex-start; }
.cine-pick {
  max-width: 640px;
  background: rgba(255, 250, 242, 0.88);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1.5px solid rgba(255, 252, 246, 0.65);
  border-radius: var(--r-lg);
  padding: 16px 20px 20px;
  box-shadow: 0 18px 44px rgba(30, 22, 15, 0.22);
}
.cine-pick-title {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: 0.95rem; color: var(--ink); margin-bottom: 12px;
}
.cine-pick .country-group-label { color: var(--muted); }
/* white on the frost, not cream on cream — the chips need their own edge */
.cine-pick .country-choice.compact {
  background: #fff; backdrop-filter: none;
  box-shadow: 0 2px 10px rgba(93, 74, 53, 0.10);
}
.cine-pick .country-choice.compact:hover { background: var(--mint-pale); }
.cine-pick-row { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: flex-start; }

/* The coverage numbers as their own band under the hero */
.stats-band { background: var(--gold-soft); }
.front-stats.band {
  margin: 0 auto; padding: 36px 5vw;
  justify-content: center; gap: clamp(48px, 10vw, 130px);
  border-top: none; margin-top: 0;
}
.front-stats.band .front-stat { align-items: center; text-align: center; }

/* The picker again at the foot of the front page, as a third slide in the
   same voice as the two above it — the card sits in the copy column, solid
   rather than frosted because the ground here is cream, not a photo */
.front-pick-end .cine-pick {
  margin-top: 34px; max-width: none;
  background: var(--surface); border: 1.5px solid var(--border);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: var(--shadow);
}
/* Kobo waving goodbye, straight on the page — no polaroid frame here */
.pick-kobo {
  position: absolute; top: 8%; left: 24%; width: 42%; z-index: 2;
  animation: koboBob 4s ease-in-out infinite;
}
.pick-art .tag-1 { top: 8%; right: 4%; }
.country-group { display: flex; flex-direction: column; gap: 7px; }
.country-group-label {
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(253, 252, 247, 0.6);
}
.country-group-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* in the modal, where the cards are on cream rather than a photograph */
.country-choices .country-group-label { color: var(--muted); }
.country-choices { display: flex; flex-direction: column; gap: 14px; }
.country-choices .country-group-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px;
}
.country-choice.compact {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: var(--r-pill);
  /* it sits on a photograph, so it needs its own ground to stand on — and its
     own ink, since the hero around it now sets a cream text colour */
  background: rgba(253, 252, 247, 0.92); backdrop-filter: blur(6px);
  color: var(--ink); border-color: transparent;
}
.country-choice.compact em { font-size: 1.05rem; }
.country-choice.compact strong { font-size: 0.88rem; }
.country-choice.compact.on {
  background: var(--brand); border-color: var(--brand); color: var(--cream);
}
.country-choice.compact.on:hover { background: var(--brand-dark); }

/* The questions, on their own page */
.questions-page { max-width: 1160px; margin: 0 auto; padding: 26px clamp(18px, 4vw, 40px) 80px; }
.qp-top { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.qp-crumb { font-weight: 800; font-size: 0.95rem; }
.planner-dock.standalone { margin-top: 0; }


/* Step 2: the explainer on its own, before anything is asked. Wider than it was,
   because the three cards now share the row with Kobo rather than having it. */
.intro-page { max-width: 1240px; }
/* One screen with one job gets to fill it: the band and its button centre in
   the viewport rather than huddling small in the top-left corner. */
.intro-page { display: flex; flex-direction: column; min-height: calc(100svh - 130px); }
.intro-page .intro-head { margin-top: auto; }
.intro-page .how-strip-foot { margin-bottom: auto; }
/* Kobo on the left, the three steps on the right of him — one band rather than
   a mascot with a paragraph, then a separate row of cards underneath. */
.intro-head { display: flex; align-items: center; gap: 40px; margin: 10px 0 6px; }
.intro-head .how-kobo { width: 215px; flex: none; }
.intro-steps { flex: 1; min-width: 0; }
.intro-steps .section-label { font-size: 1rem; }
/* howItWorks() is also used on its own, where it centres itself in the page.
   Beside Kobo it's a column of the band, so it gives that up. */
.intro-steps .below-hero { max-width: none; margin: 0; padding: 0; }
.intro-steps .hero-features { margin-top: 26px; gap: 20px; }
/* The cards carry the whole screen here, so they're a size up from the landing
   version of the same strip. */
.intro-steps .feat { padding: 42px 26px 34px; gap: 8px; }
.intro-steps .feat .spot { width: 96px; height: 96px; margin-bottom: 10px; }
.intro-steps .feat strong { font-size: 1.25rem; }
.intro-steps .feat small { font-size: 0.98rem; }
.intro-steps .feat .feat-step {
  width: 36px; height: 36px; line-height: 36px; font-size: 1.05rem; top: -18px;
}
.intro-page .how-strip-foot { margin-top: 40px; }
.intro-page .how-strip-foot .btn { font-size: 1.15rem; padding: 12px 12px 12px 34px; }
@media (max-width: 700px) {
  .intro-head { flex-direction: column; text-align: center; gap: 16px; }
  .intro-head .how-kobo { width: 160px; }
}
/* The passport, sat where the questions used to be on the landing page */
.dock-passport { display: flex; flex-direction: column; gap: 14px; }
.dock-pp-head { display: flex; align-items: center; gap: 12px; }
.dock-pp-avatar {
  width: 46px; height: 46px; border-radius: var(--r-md); flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
  background: linear-gradient(135deg, var(--accent-soft), var(--mint-soft));
}
.dock-pp-head strong { display: block; font-size: 1rem; }
.dock-pp-role { color: var(--muted); font-size: 0.82rem; font-weight: 700; }
.dock-pp-head .planner-change { margin-left: auto; }

.dock-pp-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.dock-pp-stats span {
  display: flex; flex-direction: column; gap: 1px; flex: 1 1 120px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 10px 12px; font-size: 0.78rem; color: var(--muted); font-weight: 700;
}
.dock-pp-stats b { font-size: 1.25rem; color: var(--ink); }

.dock-pp-stamps { display: flex; flex-wrap: wrap; gap: 6px; font-size: 1.4rem; }
.dock-pp-none { color: var(--muted); font-size: 0.84rem; }

.dock-passport.empty { flex-direction: row; align-items: flex-start; gap: 16px; }
.dock-kobo { width: 96px; flex: none; }
.dock-passport-copy { display: flex; flex-direction: column; gap: 6px; }
.dock-passport-copy strong { font-size: 1rem; }
.dock-passport-copy span { color: var(--muted); font-size: 0.88rem; }
.dock-passport-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; align-items: center; }

@media (max-width: 620px) {
  .dock-passport.empty { flex-direction: column; align-items: center; text-align: center; }
  .dock-passport-actions { justify-content: center; }
}

/* When the hero holds the choice, the panel below only points back to it */
.planner-uplink {
  font: inherit; font-weight: 800; font-size: 0.95rem; cursor: pointer;
  background: var(--mint-pale); color: var(--brand-dark);
  border: 1.5px dashed var(--brand); border-radius: var(--r-pill);
  padding: 12px 24px; align-self: flex-start; transition: all 0.15s ease;
}
.planner-uplink:hover { background: var(--accent-soft); }

/* Stage two: the country already answered, sat above the rest */
.planner-where {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 1.05rem; margin-bottom: 2px;
}
.planner-change {
  font: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer;
  background: none; border: none; color: var(--brand); text-decoration: underline;
  padding: 2px 4px;
}
.planner-change:hover { color: var(--brand-dark); }


/* Months or exact dates — dates also answer "how long", so that field goes
   quiet rather than sitting there able to contradict them. */
.when-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.when-modes { display: inline-flex; gap: 4px; }
.when-mode {
  font: inherit; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; cursor: pointer; padding: 3px 9px;
  border-radius: var(--r-pill); border: 1.5px solid var(--border);
  background: transparent; color: var(--muted);
}
.when-mode.on { background: var(--brand); border-color: var(--brand); color: var(--cream); }

.pf-dates { display: flex; flex-wrap: wrap; gap: 10px; }
.pf-dates label {
  display: flex; flex-direction: column; gap: 4px; flex: 1 1 150px; min-width: 0;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted);
}
.pf-dates input {
  font: inherit; font-weight: 600; font-size: 0.95rem; color: var(--ink);
  padding: 10px 12px; border-radius: var(--r-sm);
  border: 1.5px solid var(--border); background: var(--surface); width: 100%;
}
.pf-dates input:focus { outline: none; border-color: var(--brand); }
.planner select:disabled, .wiz-selects select:disabled { opacity: 0.55; cursor: not-allowed; }
/* Questions that take more than one answer */
/* Four short season chips need less room than three wordy transport ones */
.planner-multi { display: grid; grid-template-columns: 1fr 1.15fr; gap: 14px 22px; margin-top: 14px; }
.pf-multi { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* twelve months read as a calendar, not a ragged wrap */
.pf-chips.months { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
.pf-chips.months .act-chip { padding: 6px 4px; text-align: center; }
@media (max-width: 620px) { .pf-chips.months { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.planner-acts-block { display: flex; flex-direction: column; gap: 8px; }
.planner-label .opt, .planner-label em { font-style: normal; font-weight: 700; color: var(--muted); text-transform: none; letter-spacing: 0; }

.planner-go {
  font: inherit; font-weight: 800; font-size: 1rem; cursor: pointer;
  background: var(--brand); color: var(--cream); border: none;
  border-radius: var(--r-pill); padding: 9px 9px 9px 28px; margin-top: 2px;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  align-self: flex-start; transition: transform 0.15s ease, opacity 0.15s ease;
}
.planner-go .explore-arrow { width: 34px; height: 34px; font-size: 1.05rem; }
.planner-go:hover:not(:disabled) { transform: translateY(-2px); }
.planner-go:disabled { opacity: 0.4; cursor: not-allowed; }
.planner-note { font-size: 0.8rem; color: var(--muted); }

/* docked under the hero, overlapping it. The whole dock is one card — Kobo
   introduces on the left, the form sits on the right, both on the same white. */
.planner-dock {
  display: grid; grid-template-columns: minmax(230px, 290px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 38px); align-items: center;
  background: var(--surface); border-radius: var(--r-lg);
  padding: 28px clamp(22px, 3vw, 34px);
  box-shadow: var(--shadow-lg);
}
/* the form is already inside the card, so it drops its own chrome */
.planner-dock .planner {
  width: 100%; background: none; box-shadow: none; padding: 0; border-radius: 0;
}
.planner-dock .how-head {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 10px; margin: 0; height: 100%; text-align: left;
  border-right: 1px solid var(--line); padding-right: clamp(16px, 2vw, 30px);
}
.planner-dock .how-kobo { width: 150px; margin-left: -10px; }
.planner-dock .how-title { font-size: 1.6rem; }
.planner-dock .how-sub { font-size: 0.92rem; }
.planner-dock .section-label { margin: 0; }
@keyframes dockFlash { 0%, 100% { box-shadow: var(--shadow-lg); } 40% { box-shadow: 0 0 0 5px var(--mint), var(--shadow-lg); } }
.planner-dock.flash { animation: dockFlash 0.9s ease; }

/* floated over the results when you change an answer */
.planner-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 24px; }
.planner-backdrop { position: absolute; inset: 0; background: rgba(92, 74, 62, 0.42); animation: fadeIn 0.2s ease; }
@keyframes fadeIn { from { opacity: 0; } }
.planner-modal-inner {
  position: relative; width: min(100%, 940px); max-height: 90svh; overflow-y: auto;
  animation: fadeSlideIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* wishlist header, replacing the old step counter */
.wl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 28px; }

@media (max-width: 1100px) {
  .planner-dock { grid-template-columns: 1fr; }
  .planner-dock .how-head {
    flex-direction: row; align-items: center; gap: 20px; height: auto;
    border-right: none; border-bottom: 1px solid var(--line);
    padding: 0 0 18px;
  }
  .planner-dock .how-kobo { width: 116px; margin-left: 0; }
}
@media (max-width: 900px) {
  /* Two columns need about 620px to hold "Same bed all trip · 1 hotel" without
     cutting it off; below that it's one field per row. */
  .planner { max-width: 620px; }
  .planner-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planner-multi { grid-template-columns: 1fr; }
  .planner-dock { margin-top: -50px; }
  .planner-go { align-self: stretch; }
}
@media (max-width: 640px) {
  .planner-dock .how-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 680px) {
  .planner { max-width: 420px; }
  .planner-fields { grid-template-columns: 1fr; }
}

/* ---------- Touch ----------
   Everything here is about fingers rather than screen width, so it keys off
   pointer: coarse. A phone in landscape is still a phone, and a 1280px tablet
   still has no cursor — width alone would miss both. */
@media (pointer: coarse) {
  /* iOS Safari zooms the whole page in when you focus a control smaller than
     16px and never zooms back out, stranding you mid-questionnaire at 1.3×. */
  .planner select, .xsearch, .signup-input, .pf-dates input { font-size: 16px; }

  /* A thumb needs about 44px. These all measured between 20px and 43px. */
  .fpill, .act-chip, .xpill, .xchip, .xadd, .btn-sm, .back-link, .round-btn,
  .greet, .leg-link, .link-btn, .tab-btn, .planner-change, .when-mode, .region-chip,
  .topnav-links a, .side-nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Links that read as sentences keep their left edge; only the pills centre */
  .leg-link, .link-btn, .planner-change { justify-content: flex-start; }
  .round-btn { min-width: 44px; }

  /* Hover styling sticks after a tap on touch, leaving buttons looking pressed */
  .fpill:hover, .act-chip:hover, .xpill:hover, .xchip:hover, .xadd:hover,
  .back-link:hover, .round-btn:hover { transform: none; }
}

/* ---------- Results: winner card and wishlist side by side ---------- */
.rp-top {
  /* min(340px, 100%), not a bare 340px: on a 375px phone the column is 335px
     wide, and a hard 340px minimum took the whole page sideways by five. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 18px; align-items: start;
}
.rp-top .hero-card, .rp-top .rp-section { margin-top: 0; }
/* Asides on the second grid row start level with each other */
.rp-top > .season-card, .rp-top > .maybe-card { margin-top: 0; align-self: start; }
/* The split plan needs elbow room its column never had: full width, so the
   legs sit side by side with the hop between them */
.rp-top > .split-card { grid-column: 1 / -1; margin-top: 0; }
.rp-top .rp-section { align-self: stretch; }
.rp-left { display: flex; flex-direction: column; min-width: 0; }
/* Right-hand column: where to stay, how to book it, and how the base scored. */
.rp-right { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rp-right > * { margin-top: 0; }
.score-card {
  margin-top: 12px; padding: 20px 22px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border);
}
.score-head {
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 14px;
  line-height: 1.4;
}
/* The grid's bottom margin and the note's matching negative one cancel out where
   these sit in the hero body. Pulled apart here, the negative margin has nothing
   to cancel and the note lands on top of the last row. */
.rp-right .score-grid { margin: 0; max-width: none; gap: 12px; }
.rp-right .score-note {
  margin: 16px 0 0; padding-top: 14px; text-align: left; line-height: 1.5;
  border-top: 1px solid var(--line);
}
/* A narrower column than the hero body's 150px, and the labels wrap into it
   rather than being cut off with an ellipsis — "Adventure & adrenaline" was
   losing its second word. */
.rp-right .score-row { grid-template-columns: minmax(0, 108px) 1fr 42px; align-items: center; }
.rp-right .score-label { white-space: normal; overflow: visible; line-height: 1.3; font-size: 0.84rem; }
/* The picks, two abreast across the full width — one column made a list of
   seven into a long thin ribbon with an empty half-page beside it. */
.wl-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
  gap: 10px; align-items: stretch;
}
/* The rows carry their own bottom margin for the stacked lists elsewhere; in the
   grid the gap does that job. */
.wl-grid .wl-row { margin-bottom: 0; height: 100%; }

/* three outcomes, not two: on the doorstep, a long day out, or worth a night */
.wl-row.wl-stretch { border-color: var(--gold); background: var(--gold-soft); }
.wl-status.stretch { background: var(--gold); color: var(--ink); }
.wl-status.ok { background: var(--brand); color: var(--cream); }
.wl-status.no, .wl-status.far { background: var(--line); color: var(--muted); }

/* ---------- Explore ---------- */
.explore-page { max-width: 1060px; margin: 0 auto; padding: 24px clamp(20px, 4vw, 44px) 90px; }
.explore-top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 26px; }
.explore-head { display: flex; align-items: center; gap: 26px; margin-bottom: 26px; }
.explore-kobo { width: 128px; flex: none; }

.explore-filters {
  display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px;
  padding-bottom: 20px; border-bottom: 1px solid var(--line);
}
.xcountries, .xcats { display: flex; flex-wrap: wrap; gap: 8px; }
.xpill, .xchip {
  font: inherit; font-weight: 700; font-size: 0.84rem; cursor: pointer;
  background: var(--surface); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--r-pill); padding: 7px 14px;
  transition: all 0.15s ease;
}
.xpill:hover, .xchip:hover { border-color: var(--brand); }
.xpill.on { background: var(--brand); border-color: var(--brand); color: var(--cream); }
.xchip.on { background: var(--mint-soft); border-color: var(--brand); }
.xsearch {
  font: inherit; font-weight: 600; width: 100%; max-width: 420px;
  padding: 11px 16px; border-radius: var(--r-pill);
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink);
}
.xsearch:focus { outline: none; border-color: var(--brand); }

.explore-list { display: flex; flex-direction: column; gap: 14px; }
.xrow {
  display: grid; grid-template-columns: auto minmax(0, 1fr) 168px; gap: 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 18px 20px; transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.xrow:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.xnum {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--mint-soft); border: 1.5px solid var(--brand); color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 800;
}
.xtitle { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; line-height: 1.2; }
.xtags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.xtag {
  font-size: 0.72rem; font-weight: 700; color: var(--muted);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px 9px;
}
.xtag.must { background: var(--gold-soft); border-color: var(--gold); color: var(--ink); }
.xdesc { font-size: 0.92rem; line-height: 1.55; }
.xaccess { font-size: 0.78rem; color: var(--muted); margin-top: 6px; }

.xside { display: flex; flex-direction: column; gap: 10px; }
.xthumb {
  position: relative; height: 106px; border-radius: var(--r-sm); overflow: hidden;
  background: var(--mint-pale); display: flex; align-items: center; justify-content: center;
}
.xthumb em { font-style: normal; font-size: 1.6rem; }
.xthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s ease; }
.xthumb img.loaded { opacity: 1; }
.xadd {
  font: inherit; font-weight: 800; font-size: 0.84rem; cursor: pointer;
  background: var(--surface); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--r-pill); padding: 9px 14px;
  transition: all 0.15s ease;
}
.xadd:hover { border-color: var(--brand); background: var(--mint-pale); }
.xadd.on { background: var(--brand); border-color: var(--brand); color: var(--cream); }

@media (max-width: 760px) {
  .explore-head { flex-direction: column; text-align: center; }
  .xrow { grid-template-columns: auto minmax(0, 1fr); }
  .xside { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .xthumb { flex: 1; height: 90px; }
  .xadd { flex: none; }
}

/* ---------- The questionnaire, one card at a time ---------- */
/* The old nine-dropdown form, dealt as a deck: one question, big tappable
   answers, and a way past every one of them. Same controls vocabulary as the
   rest of the site — chips tick, cards pick — just one decision per screen. */
.wiz { max-width: 780px; margin: 0 auto; }
.wiz-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px clamp(20px, 4vw, 36px) 26px;
  box-shadow: var(--shadow);
}
@keyframes wizIn     { from { opacity: 0; transform: translateX(26px); }  to { opacity: 1; transform: none; } }
@keyframes wizInBack { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
.wiz-card.wiz-in      { animation: wizIn 0.32s cubic-bezier(0.22, 1, 0.36, 1); }
.wiz-card.wiz-in-back { animation: wizInBack 0.32s cubic-bezier(0.22, 1, 0.36, 1); }

.wiz-progress { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.wiz-count {
  flex: none; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted);
}
.wiz-bar { flex: 1; height: 7px; background: var(--sunk); border-radius: var(--r-pill); overflow: hidden; }
.wiz-bar-fill {
  height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--brand), var(--mint));
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.wiz-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.wiz-kobo { width: 92px; flex: none; }
.wiz-title { font-size: 1.55rem; font-weight: 900; line-height: 1.2; }
.wiz-sub { font-size: 0.92rem; color: var(--muted); margin-top: 4px; line-height: 1.5; }

.wiz-choices {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
}
.wiz-choices.dense { grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); }
/* Cards whose sub carries a real sentence (the passport visa notes) need room
   to wrap at the comma, not inside "Visa-free" */
.wiz-choices.wide { grid-template-columns: repeat(auto-fill, minmax(min(215px, 100%), 1fr)); }
/* …and the idle tick shouldn't tax that room — park it in the corner as on mobile */
.wiz-choices.wide .wiz-chip { position: relative; }
.wiz-choices.wide .wiz-tick { position: absolute; top: 8px; right: 8px; margin: 0; }
.wiz-choices.wide .wiz-chip-text { padding-right: 14px; }
.wiz-chip {
  display: flex; align-items: center; gap: 12px; text-align: left;
  font: inherit; cursor: pointer; padding: 13px 14px;
  background: var(--cream); border: 1.5px solid var(--line); border-radius: var(--r-md);
  transition: all 0.15s ease;
}
.wiz-chip:hover { border-color: var(--brand); transform: translateY(-1px); box-shadow: var(--shadow); }
.wiz-chip.on { background: var(--accent-soft); border-color: var(--brand); }
.wiz-ico { font-style: normal; font-size: 1.35rem; flex: none; line-height: 1; }
.wiz-chip-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wiz-chip-text strong { font-size: 0.94rem; font-weight: 800; color: var(--ink); }
.wiz-chip-text small { font-size: 0.77rem; color: var(--muted); line-height: 1.35; }
.wiz-tick {
  margin-left: auto; flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.72rem; font-weight: 900;
  background: var(--brand); color: var(--cream);
  opacity: 0; transform: scale(0.5); transition: all 0.18s ease;
}
.wiz-chip.on .wiz-tick { opacity: 1; transform: none; }
/* The month grid doesn't need card-sized answers */
.wiz-choices.dense .wiz-chip { padding: 10px 12px; }

.wiz-modes { margin-bottom: 14px; }
.wiz-dates { margin-top: 4px; }
.wiz-note { font-size: 0.85rem; color: var(--muted); margin-top: 12px; line-height: 1.5; }
.wiz-selects {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.wiz-foot { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 22px; }
/* .explore-arrow is a flex disc — the button must be a flex row or it stacks */
.wiz-next {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 8px 8px 24px; font-size: 0.95rem;
}
.wiz-next .explore-arrow { width: 32px; height: 32px; font-size: 1rem; }
.wiz-skip {
  font: inherit; font-weight: 800; font-size: 0.9rem; cursor: pointer;
  background: none; border: none; color: var(--muted); padding: 10px 14px;
  border-radius: var(--r-pill); transition: all 0.15s ease;
}
.wiz-skip:hover { color: var(--ink); background: var(--mint-pale); }

/* The recap card at the end: every question, its answer or its honest blank,
   each row a way back to change it. */
.wiz-recap { display: flex; flex-direction: column; gap: 6px; margin-bottom: 22px; }
.wiz-recap-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  font: inherit; text-align: left; cursor: pointer; padding: 9px 14px;
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: all 0.15s ease;
}
.wiz-recap-row:hover { border-color: var(--brand); background: var(--mint-pale); }
.wiz-recap-row span { font-size: 0.88rem; font-weight: 700; color: var(--muted); }
.wiz-recap-row b { font-size: 0.88rem; font-weight: 800; color: var(--brand-dark); text-align: right; }
.wiz-recap-row.open b { color: var(--muted); font-weight: 600; font-style: italic; }
.wiz-go { width: 100%; }

@media (max-width: 560px) {
  .wiz-kobo { width: 64px; }
  .wiz-title { font-size: 1.3rem; }
  .wiz-choices, .wiz-choices.dense { grid-template-columns: 1fr 1fr; }
  .wiz-choices .wiz-chip { flex-direction: column; align-items: flex-start; gap: 6px; }
  .wiz-tick { position: absolute; } /* keep the tick from stretching the column */
  .wiz-chip { position: relative; }
  .wiz-chip .wiz-tick { top: 8px; right: 8px; margin: 0; }
}

/* ---------- Results as pages ---------- */
/* The long scroll became a short deck: tabs say what the pages are, the pager
   at the foot turns them, and the map keeps its half of the screen throughout. */
.rp-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 22px; }
.rp-tab {
  font: inherit; font-weight: 800; font-size: 0.86rem; cursor: pointer;
  padding: 8px 16px; border-radius: var(--r-pill);
  background: var(--surface); color: var(--muted); border: 1.5px solid var(--line);
  transition: all 0.15s ease;
}
.rp-tab:hover { border-color: var(--brand); color: var(--ink); }
.rp-tab.on { background: var(--brand); border-color: var(--brand); color: var(--cream); }

.rp-pager {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--border);
}
.rp-pager-count { flex: none; font-size: 0.8rem; font-weight: 800; color: var(--muted); }

/* The day-by-day in the overview's right column: scrolls inside its card on
   tall trips, so the page itself stays one screen. */
.rp-itin-col .itinerary { max-height: 76vh; overflow-y: auto; }
@media (max-width: 900px) { .rp-itin-col .itinerary { max-height: none; } }

/* The score bars, two abreast now the card has the panel's full width */
.score-grid.cols-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 34px;
  max-width: none; margin: 0 0 16px;
}
@media (max-width: 720px) { .score-grid.cols-2 { grid-template-columns: 1fr; } }

/* The painted activity icons: big enough to read as pictures, like the sheet
   they were sliced from, and the grid loosens up to give them room. */
.wiz-ico .act-art, .act-art { width: 52px; height: 52px; object-fit: contain; display: block; }
/* The passport flags are landscape, and near their cut size so they stay crisp */
.wiz-ico .quiz-art.flag { width: 46px; height: 34px; }
.wiz-choices.acts { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }
.wiz-choices.acts .wiz-chip { padding: 14px 16px; gap: 14px; }
@media (max-width: 560px) {
  .wiz-choices.acts { grid-template-columns: 1fr 1fr; }
  .act-art { width: 42px; height: 42px; }
}

/* ---------- Front door: two explainer screens before the country picker ----------
   In the manner of komoot's homepage — copy on one side, a playful collage on
   the other, one full screen each. Every collage piece floats gently; the float
   keyframe re-states the piece's tilt via --tilt because transform is one
   property, and a translateY-only keyframe would wipe the rotation out. */
.front {
  position: relative; min-height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(96px, 14vh, 150px) clamp(22px, 6vw, 84px) clamp(64px, 9vh, 110px);
}
.front-grid {
  width: 100%; max-width: 1180px;
  display: grid; grid-template-columns: 1.02fr 0.98fr; align-items: center;
  gap: clamp(40px, 6vw, 92px);
}
.front-grid.rev { grid-template-columns: 0.98fr 1.02fr; }

/* The primary lockup, per the brand sheet: peach pin, lowercase, ko in sage */
.front-wordmark {
  display: flex; align-items: center; margin-bottom: 16px;
  font-family: var(--font-display); font-weight: 800; font-size: 1.3rem;
  color: var(--muted); letter-spacing: 0.01em;
}
.front-wordmark b { color: var(--brand); }
.front-wordmark .front-pin { width: 24px; height: 24px; margin-right: 5px; color: var(--gold); stroke-width: 2.4; }

.front-title {
  font-size: clamp(2.5rem, 5.2vw, 4.3rem); line-height: 1.04;
  letter-spacing: -0.015em; color: var(--ink);
}
.front-title span { color: var(--brand); white-space: nowrap; }
.front-title.sm { font-size: clamp(2rem, 3.8vw, 3.1rem); }
.front-sub { max-width: 33rem; margin: 20px 0 30px; font-size: 1.08rem; color: var(--muted); }
.front-eyebrow {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.28em; font-size: 0.8rem; color: var(--brand-dark); margin-bottom: 10px;
}
.front-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.front-or { color: var(--muted); font-weight: 600; }
/* the text link reaches a 44px tap target on touch, not a 30px sliver */
.front-cta .cine-link { display: inline-block; padding: 8px 2px; }

/* What the site actually covers — real counts read off the data, so they
   can't drift out of date. Moved here from the hero, where three numbers and
   the country picker fought over the same corner of the photo. */
.front-stats {
  display: flex; flex-wrap: wrap; gap: clamp(18px, 2.6vw, 38px);
  margin-top: 38px; padding-top: 26px; border-top: 1.5px solid var(--line);
}
.front-stat { display: flex; flex-direction: column; }
/* Numbers are data, not a heading — set like every other number that carries
   weight (the match %, nightly rates, the passport counts). */
.front-stat b {
  font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1; color: var(--brand-dark); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.front-stat span {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted); margin-top: 4px;
}

/* The collage frame: pieces are laid out in % of it, so the whole arrangement
   scales as one picture */
.front-art { position: relative; aspect-ratio: 10 / 9; width: 100%; max-width: 560px; justify-self: center; }

@keyframes frontFloat {
  0%, 100% { transform: rotate(var(--tilt, 0deg)) translateY(0); }
  50%      { transform: rotate(var(--tilt, 0deg)) translateY(-9px); }
}

/* A photograph of Kobo, printed and tossed on the table */
.front-photo {
  position: absolute; top: 2%; left: 10%; width: 52%; z-index: 2;
  background: #fff; padding: 3.5% 3.5% 9%; border-radius: 10px;
  box-shadow: var(--shadow-lg);
  --tilt: -4deg; animation: frontFloat 7s ease-in-out infinite;
}
.front-photo img { width: 100%; display: block; border-radius: 6px; }

/* The map card, with the route drawing itself from A to B on arrival */
.front-map {
  position: absolute; right: 0; bottom: 4%; width: 62%; z-index: 1;
  --tilt: 3deg; animation: frontFloat 8s 0.8s ease-in-out infinite;
  filter: drop-shadow(0 16px 34px rgba(92, 74, 62, 0.18));
}
.front-map svg {
  width: 100%; height: auto; display: block;
  border-radius: 22px; border: 6px solid #fff; background: var(--mint-pale);
}
.route-path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: routeDraw 1.8s 0.9s cubic-bezier(0.5, 0, 0.3, 1) forwards;
}
@keyframes routeDraw { to { stroke-dashoffset: 0; } }
.route-a, .route-a-label {
  transform-box: fill-box; transform-origin: center;
  opacity: 0; transform: scale(0.3);
  animation: markerPop 0.4s 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.route-b {
  position: absolute; top: -7%; right: 9%;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--gold); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 1.15rem;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid #fff; box-shadow: var(--shadow);
  opacity: 0; transform: scale(0.3);
  animation: markerPop 0.45s 2.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes markerPop { to { opacity: 1; transform: scale(1); } }

/* Hand-lettered place tags, in the sheet's sticker spirit */
.front-tag {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--cream); border: 2.5px solid var(--ink); border-radius: var(--r-pill);
  padding: 9px 20px;
  font-family: var(--font-display); font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.82rem;
  box-shadow: 3px 4px 0 rgba(93, 74, 53, 0.16);
}
.front-tag .cico { width: 19px; height: 19px; color: var(--brand-dark); }
.tag-1 { top: -3%; right: 3%; --tilt: 2deg; animation: frontFloat 6s 0.4s ease-in-out infinite; }
.tag-2 { left: -2%; bottom: 27%; --tilt: -3deg; animation: frontFloat 6.5s 1.2s ease-in-out infinite; }

/* Doodles, including the brand sheet's own: a heart that flies off as a plane */
.doodle { position: absolute; z-index: 3; }
.doodle-waves { width: 88px; top: 5%; left: -3%; }
.doodle-flight { width: 158px; left: 4%; bottom: -1%; }
.doodle-burst { width: 74px; right: 3%; top: 0; transform: rotate(16deg); }
.flight-trail { animation: trailMarch 1.4s linear infinite; }
@keyframes trailMarch { to { stroke-dashoffset: -10; } }
.flight-plane {
  transform-box: fill-box; transform-origin: center;
  animation: planeBob 3s ease-in-out infinite;
}
@keyframes planeBob {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(3px, -5px) rotate(4deg); }
}

/* Screen two: the product's promise as two mock cards and the explorer Kobo */
.mock-card {
  position: absolute; z-index: 2;
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 20px 22px;
}
.mock-wishlist { top: 5%; left: 5%; width: 58%; --tilt: -2.5deg; animation: frontFloat 7.5s ease-in-out infinite; }
.mock-wishlist > b { font-size: 1rem; }
.mock-wishlist ul { list-style: none; margin-top: 12px; display: grid; gap: 11px; }
.mock-wishlist li { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 0.92rem; }
.mock-wishlist .cico { width: 20px; height: 20px; flex: none; color: var(--brand-dark); }
.mock-tick {
  width: 21px; height: 21px; flex: none; border-radius: 50%;
  background: var(--brand); color: #fff; font-style: normal; font-weight: 800; font-size: 0.7rem;
  display: flex; align-items: center; justify-content: center;
}
.mock-match { right: 0; bottom: 13%; width: 57%; z-index: 3; --tilt: 2deg; animation: frontFloat 8s 1s ease-in-out infinite; }
.mock-eyebrow {
  display: block; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.68rem; color: var(--muted);
}
.mock-match > b { display: block; font-size: 1.25rem; line-height: 1.2; margin-top: 2px; }
.mock-meter { height: 10px; border-radius: var(--r-pill); background: var(--sunk); margin: 12px 0 8px; overflow: hidden; }
.mock-meter i {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--mint));
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.front-art.in .mock-meter i { transform: scaleX(1); }
.mock-match small { color: var(--muted); font-size: 0.85rem; }
.mock-match small b { color: var(--ink); }
/* Kobo strides through the empty lower-left corner, clear of both cards'
   text — overlapping the match card hid the very numbers it exists to show */
.front-kobo { position: absolute; left: 2%; bottom: 0; width: 33%; z-index: 4; animation: koboBob 4s ease-in-out infinite; }

/* The three steps, beside the collage rather than under it */
.front-steps { list-style: none; display: grid; gap: 18px; margin: 26px 0 30px; }
.front-steps li { display: flex; gap: 16px; align-items: flex-start; }
.front-steps .spot { width: 56px; height: 56px; flex: none; }
.front-steps strong { display: block; font-size: 1.02rem; }
.front-steps small { color: var(--muted); line-height: 1.5; }

/* The nudge that there is more below the first screen */
.front-scroll {
  position: absolute; left: 50%; bottom: 24px; z-index: 5;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  font-size: 1.15rem; line-height: 1; color: var(--ink);
  background: var(--cream); border: 1.5px solid var(--line); box-shadow: var(--shadow);
  animation: cueBounce 2.2s ease-in-out infinite;
}
.front-scroll:hover { background: var(--mint-soft); border-color: var(--brand); }
@keyframes cueBounce {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 7px); }
}

@media (max-width: 900px) {
  .front { padding-top: 104px; }
  .front-grid, .front-grid.rev { grid-template-columns: 1fr; gap: 48px; }
  /* copy first on a phone, both screens — the collage is the garnish */
  .front-grid.rev .front-art { order: 2; }
  .front-art { max-width: 460px; }
  .front-scroll { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .front-photo, .front-map, .front-tag, .mock-card, .front-kobo,
  .flight-trail, .flight-plane, .front-scroll { animation: none; }
  .route-path { animation: none; stroke-dashoffset: 0; }
  .route-a, .route-a-label, .route-b { animation: none; opacity: 1; transform: none; }
  .mock-meter i { transition: none; transform: scaleX(1); }
}