/* ─── tokens — distinctive: aged-cream + oxblood + petrol-teal ────── */
    :root {
      --bg:        #EAE3CE;   /* aged-map cream, cooler than bone */
      --surface:   #F8F3E0;   /* lifted paper for cards */
      --fg:        #0F1622;   /* near-black, cool indigo undertone */
      --muted:     #7C7567;
      --border:    #D5CCB3;
      --accent:    #8E1F26;   /* oxblood — primary CTA, links, active pins */
      --forest:    #1B3D48;   /* petrol teal — kickers, "On" pins, tags */

      --accent-soft: color-mix(in oklch, var(--accent) 12%, transparent);
      --forest-soft: color-mix(in oklch, var(--forest) 12%, transparent);
      --fg-soft:     color-mix(in oklch, var(--fg) 5%, transparent);
      --ink-line:    color-mix(in oklch, var(--fg) 20%, transparent);

      --font-display: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
      --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
      --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

      --fs-h1:   clamp(48px, 6.2vw, 86px);
      --fs-h2:   clamp(30px, 3.4vw, 46px);
      --fs-h3:   22px;
      --fs-lead: 19px;
      --fs-body: 17px;
      --fs-meta: 13px;

      --gap-xs: 8px;
      --gap-sm: 12px;
      --gap-md: 20px;
      --gap-lg: 32px;
      --gap-xl: 56px;
      --gap-2xl: 96px;
      --container: 1200px;
      --gutter: 32px;

      --radius: 10px;
      --radius-lg: 16px;
    }

    /* ─── reset & base ───────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; }
    body {
      margin: 0;
      background: var(--bg);
      color: var(--fg);
      font-family: var(--font-body);
      font-size: var(--fs-body);
      line-height: 1.6;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }
    img, svg { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; cursor: pointer; }
    p { text-wrap: pretty; }
    h1, h2, h3, h4 { text-wrap: balance; }

    /* ─── layout primitives ──────────────────────────────────────── */
    .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
    .section { padding-block: clamp(56px, 8vw, var(--gap-2xl)); }
    .section + .section { border-top: 1px solid var(--border); }
    .stack { display: flex; flex-direction: column; }
    .stack > * + * { margin-top: var(--gap-md); }
    .row { display: flex; align-items: center; gap: var(--gap-md); }
    .row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); }
    .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-lg); }
    .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-lg); }
    @media (max-width: 920px) {
      .grid-3, .grid-4, .hero-split { grid-template-columns: 1fr !important; }
    }

    /* ─── type ───────────────────────────────────────────────────── */
    h1, .h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -0.025em; margin: 0; font-weight: 600; }
    h2, .h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.02em; margin: 0; font-weight: 600; }
    h3, .h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; margin: 0; font-family: var(--font-body); }
    .lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--muted); max-width: 60ch; margin: 0; }
    .kicker {
      display: inline-flex; align-items: center; gap: 8px;
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--forest);
      margin: 0 0 var(--gap-md);
    }
    .kicker::before { content: '▌'; color: var(--accent); font-size: 14px; line-height: 1; }
    .meta { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
    .num  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

    /* ─── topnav ─────────────────────────────────────────────────── */
    .topnav {
      position: sticky; top: 0; z-index: 20;
      background: color-mix(in oklch, var(--bg) 92%, transparent);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
    }
    .topnav-inner { display: flex; align-items: center; justify-content: space-between; padding-block: 16px; gap: 24px; }
    .wordmark { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
    .wordmark .dot { color: var(--accent); }
    .topnav nav { display: flex; gap: 28px; }
    .topnav nav a { font-size: 14px; color: var(--muted); transition: color 0.15s ease; }
    .topnav nav a:hover { color: var(--fg); }
    .topnav .right { display: flex; align-items: center; gap: 18px; }
    .topnav .signin { font-size: 14px; color: var(--muted); }
    .topnav .signin:hover { color: var(--fg); }
    @media (max-width: 920px) {
      .topnav nav { display: none; }
    }

    /* ─── buttons ────────────────────────────────────────────────── */
    .btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 11px 22px;
      border-radius: 999px;
      border: 1px solid transparent;
      font-size: 15px;
      font-weight: 500;
      letter-spacing: -0.005em;
      transition: transform 0.05s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }
    .btn:active { transform: translateY(1px); }
    .btn-primary { background: var(--accent); color: var(--surface); border-color: var(--accent); }
    .btn-primary:hover { background: color-mix(in oklch, var(--accent) 88%, black); }
    .btn-secondary { background: transparent; color: var(--fg); border-color: var(--border); }
    .btn-secondary:hover { border-color: var(--fg); }
    .btn-ghost { background: transparent; color: var(--fg); border-color: transparent; padding-inline: 6px; }
    .btn-ghost:hover { color: var(--accent); }
    .btn-arrow::after { content: '→'; transition: transform 0.2s ease; margin-left: 2px; }
    .btn-arrow:hover::after { transform: translateX(3px); }

    /* ─── HERO — unified planner + map ───────────────────────────── */
    .hero { padding-block: clamp(64px, 9vw, 128px); }
    .hero-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 72px; align-items: center; }
    @media (max-width: 1080px) { .hero-split { gap: 48px; } }

    .hero h1 { margin-bottom: 24px; }
    .hero h1 em { font-style: normal; font-weight: 700; color: var(--accent); }
    .hero .hero-deck { font-size: 21px; line-height: 1.5; color: var(--muted); max-width: 36ch; margin: 0 0 36px; }

    /* unified search bar */
    .planner {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 6px;
      display: grid;
      grid-template-columns: 1.3fr 1fr auto;
      align-items: stretch;
      gap: 0;
      box-shadow: 0 1px 0 var(--fg-soft);
      max-width: 540px;
    }
    .planner-field {
      padding: 14px 18px;
      display: flex; flex-direction: column; gap: 2px;
      border-right: 1px solid var(--border);
    }
    .planner-field:nth-child(2) { border-right: 0; }
    .planner-field .label {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .planner-field .value {
      font-size: 16px;
      color: var(--fg);
      font-weight: 500;
    }
    .planner-field .value.placeholder { color: var(--muted); font-weight: 400; }
    .planner-field input[type="date"] {
      font-size: 16px; font-weight: 500; font-family: var(--font-body);
      color: var(--fg); background: transparent; border: none; outline: none;
      padding: 0; margin: 0; cursor: pointer; width: 100%;
    }
    .planner-field input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.4; cursor: pointer; }
    /* custom city dropdown */
    .city-dd { position: relative; }
    .city-trigger {
      background: none; border: none; padding: 0; cursor: pointer; width: 100%;
      font: 500 16px/1 var(--font-body); color: var(--fg);
      display: flex; align-items: center; gap: 5px; text-align: left;
    }
    .city-trigger:hover { color: var(--accent); }
    .city-chevron { width: 12px; height: 12px; flex-shrink: 0; color: var(--muted); transition: transform 0.18s; }
    .city-dd.open .city-chevron { transform: rotate(180deg); }
    .city-menu {
      display: none;
      position: absolute; top: calc(100% + 10px); left: -18px; z-index: 9999;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 16px; padding: 6px;
      box-shadow: 0 8px 32px rgba(15,22,34,0.13), 0 1px 4px rgba(15,22,34,0.06);
      min-width: 200px; list-style: none; margin: 0;
    }
    .city-dd.open .city-menu { display: block; animation: cityMenuIn 0.15s ease; }
    @keyframes cityMenuIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
    .city-menu li {
      padding: 10px 14px; border-radius: 10px; cursor: pointer;
      font-size: 14px; color: var(--fg); transition: background 0.12s;
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
    }
    .city-menu li:hover { background: var(--bg); }
    .city-menu li.sel { font-weight: 600; }
    .city-menu li .city-cc {
      font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
      color: var(--muted); background: var(--bg); border: 1px solid var(--border);
      padding: 2px 6px; border-radius: 4px;
    }
    .city-menu li.sel .city-cc { color: var(--accent); border-color: color-mix(in oklch, var(--accent) 30%, var(--border)); }
    .planner-btn {
      background: var(--accent);
      color: var(--surface);
      border: 0;
      padding: 0 28px;
      border-radius: 10px;
      font-weight: 500;
      font-size: 15px;
      display: inline-flex; align-items: center; gap: 8px;
      margin: 4px;
    }
    .planner-btn:hover { background: color-mix(in oklch, var(--accent) 88%, black); }

    /* toggle chips */
    .chips { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
    .chip {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 7px 14px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 999px;
      font-size: 13px;
      font-weight: 500;
      color: var(--fg);
      transition: border-color 0.15s ease, background 0.15s ease;
    }
    .chip.active { border-color: var(--fg); }
    .chip .glyph { width: 14px; height: 14px; opacity: 0.85; }
    .chip[data-vert="on"] .glyph { color: var(--forest); }
    .chip[data-vert="do"] .glyph,
    .chip[data-vert="stay"] .glyph,
    .chip[data-vert="see"] .glyph { color: var(--fg); }
    .micro {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--muted);
      letter-spacing: 0.04em;
      margin-top: 18px;
      font-variant-numeric: tabular-nums;
    }
    .micro .dot { color: var(--accent); margin-inline: 6px; }

    /* ─── map panel ──────────────────────────────────────────────── */
    .map-panel {
      position: relative;
      aspect-ratio: 4 / 5;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 1px 0 var(--fg-soft);
    }
    .map-panel .map-canvas {
      position: absolute; inset: 0;
      background:
        radial-gradient(120% 80% at 30% 20%, color-mix(in oklch, var(--accent) 5%, transparent), transparent 60%),
        radial-gradient(100% 80% at 80% 90%, color-mix(in oklch, var(--forest) 6%, transparent), transparent 60%),
        var(--bg);
    }
    #urb-map { position: absolute; inset: 0; cursor: pointer; }
    #urb-map .leaflet-tile-pane { filter: saturate(0.55) brightness(1.04); }
    #urb-map.aerial .leaflet-tile-pane { filter: none; }
    #urb-map .leaflet-control-attribution { font-size: 9px; opacity: 0.5; }
    #urb-aerial-btn {
      position: absolute; bottom: 12px; right: 12px; z-index: 1000;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 8px; padding: 5px 11px;
      font-family: var(--font-mono); font-size: 10px;
      letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--fg); cursor: pointer;
      box-shadow: 0 1px 4px rgba(15,22,34,0.14);
      transition: background 0.15s, color 0.15s;
    }
    #urb-aerial-btn:hover { background: var(--bg); }
    #urb-aerial-btn.active { background: var(--fg); color: var(--surface); border-color: var(--fg); }

    /* pins */
    .pin {
      position: absolute;
      transform: translate(-50%, -100%);
      display: flex; flex-direction: column; align-items: center;
      filter: drop-shadow(0 2px 4px rgba(28,26,23,0.18));
    }
    .pin .head {
      width: 32px; height: 32px;
      border-radius: 50% 50% 50% 4px;
      transform: rotate(-45deg);
      display: grid; place-items: center;
      border: 2px solid var(--surface);
    }
    .pin .head svg { transform: rotate(45deg); width: 14px; height: 14px; color: var(--surface); }
    .pin .label {
      margin-top: 4px;
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      background: var(--surface);
      padding: 2px 7px;
      border-radius: 4px;
      border: 1px solid var(--border);
      color: var(--fg);
    }
    .pin[data-vert="stay"] .head { background: var(--fg); }
    .pin[data-vert="do"]   .head { background: var(--accent); }
    .pin[data-vert="see"]  .head { background: var(--fg); border-style: dashed; border-color: var(--accent); }
    .pin[data-vert="see"]  .head svg { color: var(--accent); }
    .pin[data-vert="on"]   .head { background: var(--forest); }
    .pin[data-vert="on"]::before {
      content: ''; position: absolute; top: -2px; left: 50%;
      width: 32px; height: 32px;
      border-radius: 50% 50% 50% 4px;
      transform: translateX(-50%) rotate(-45deg);
      background: var(--forest);
      opacity: 0.35;
      animation: pulse-on 3s ease-out infinite;
    }
    @keyframes pulse-on {
      0%   { transform: translateX(-50%) rotate(-45deg) scale(1); opacity: 0.4; }
      70%  { transform: translateX(-50%) rotate(-45deg) scale(1.7); opacity: 0; }
      100% { transform: translateX(-50%) rotate(-45deg) scale(1.7); opacity: 0; }
    }

    /* tethered floating cards */
    .floater {
      position: absolute;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px 12px;
      min-width: 168px;
      box-shadow: 0 2px 8px rgba(28,26,23,0.06);
      font-size: 13px;
      line-height: 1.35;
    }
    .floater .ftop {
      display: flex; align-items: center; gap: 6px;
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 4px;
    }
    .floater .ftop .dotc { width: 6px; height: 6px; border-radius: 50%; }
    .floater[data-vert="stay"] .dotc { background: var(--fg); }
    .floater[data-vert="do"]   .dotc { background: var(--accent); }
    .floater[data-vert="on"]   .dotc { background: var(--forest); }
    .floater .ftitle { font-weight: 600; color: var(--fg); }
    .floater .fmeta { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12px; margin-top: 2px; }
    .tether { position: absolute; pointer-events: none; }

    @media (max-width: 920px) {
      .map-panel { aspect-ratio: 1 / 1; }
      .floater { display: none; }
    }

    /* ─── EXPLAINER bar: four tabs → one canvas ──────────────────── */
    .explainer { background: var(--bg); }
    .explainer-grid {
      display: grid;
      grid-template-columns: 1fr 60px 1fr;
      gap: 32px;
      align-items: center;
    }
    .tab-stack { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .ghost-tab {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px 8px 4px 4px;
      padding: 10px 14px;
      display: flex; align-items: center; gap: 10px;
      opacity: 0.55;
      filter: grayscale(1);
    }
    .ghost-tab .gh-dots { display: flex; gap: 3px; }
    .ghost-tab .gh-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--border); }
    .ghost-tab .gh-label { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.04em; }
    .arrow-merge {
      display: grid; place-items: center;
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: 22px;
    }
    .urb-canvas {
      background: var(--surface);
      border: 1.5px solid var(--accent);
      border-radius: 12px;
      padding: 18px 22px;
      display: flex; flex-direction: column; gap: 10px;
      box-shadow: 0 1px 0 var(--accent-soft);
    }
    .urb-canvas .ucr {
      display: flex; align-items: center; gap: 10px;
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: 0.04em;
      color: var(--fg);
    }
    .urb-canvas .ucd { width: 8px; height: 8px; border-radius: 50%; }
    .urb-canvas .ucd.stay { background: var(--fg); }
    .urb-canvas .ucd.do   { background: var(--accent); }
    .urb-canvas .ucd.see  { background: var(--fg); border: 1.5px dashed var(--accent); box-sizing: border-box; }
    .urb-canvas .ucd.on   { background: var(--forest); }
    .explainer-body { max-width: 56ch; margin: 40px auto 0; text-align: center; color: var(--muted); font-size: 17px; line-height: 1.6; }
    .explainer-body strong { color: var(--fg); font-weight: 500; }
    @media (max-width: 920px) {
      .explainer-grid { grid-template-columns: 1fr; gap: 16px; }
      .arrow-merge { transform: rotate(90deg); }
    }

    /* ─── LISBON ITINERARY ───────────────────────────────────────── */
    .itinerary-head { text-align: left; max-width: 720px; margin-bottom: 56px; }
    .itinerary-head h2 em { font-style: normal; font-weight: 700; color: var(--accent); }
    .itin {
      position: relative;
      max-width: 880px;
      margin-inline: auto;
    }
    .itin::before {
      content: '';
      position: absolute;
      left: 90px;
      top: 14px; bottom: 14px;
      width: 1px;
      background: repeating-linear-gradient(to bottom, var(--ink-line) 0 4px, transparent 4px 10px);
    }
    .itin-row {
      display: grid;
      grid-template-columns: 90px 24px 1fr;
      gap: 20px;
      padding: 18px 0;
      align-items: start;
      position: relative;
    }
    .itin-row .time {
      font-family: var(--font-mono);
      font-size: 14px;
      font-variant-numeric: tabular-nums;
      color: var(--muted);
      letter-spacing: 0.04em;
      padding-top: 14px;
    }
    .itin-row .marker {
      position: relative;
      width: 24px; height: 24px;
      margin-top: 14px;
      display: grid; place-items: center;
      background: var(--bg);
      z-index: 1;
    }
    .itin-row .marker .mdot {
      width: 14px; height: 14px;
      border-radius: 50%;
      border: 2px solid var(--surface);
      box-shadow: 0 0 0 1.5px var(--fg);
    }
    .itin-row[data-vert="stay"] .mdot { background: var(--fg); }
    .itin-row[data-vert="do"]   .mdot { background: var(--accent); box-shadow: 0 0 0 1.5px var(--accent); }
    .itin-row[data-vert="see"]  .mdot { background: var(--bg); box-shadow: 0 0 0 1.5px var(--fg); }
    .itin-row[data-vert="on"]   .mdot { background: var(--forest); box-shadow: 0 0 0 1.5px var(--forest); }

    .itin-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 18px 22px;
      transition: transform 0.2s ease, border-color 0.2s ease;
    }
    .itin-card:hover { transform: translateY(-2px); border-color: var(--ink-line); }
    .itin-card .tophead {
      display: flex; align-items: center; gap: 10px;
      margin-bottom: 8px;
    }
    .itin-card .vlabel {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 4px;
      border: 1px solid var(--border);
    }
    .itin-row[data-vert="stay"] .vlabel { color: var(--fg); }
    .itin-row[data-vert="do"]   .vlabel { color: var(--accent); border-color: var(--accent-soft); }
    .itin-row[data-vert="see"]  .vlabel { color: var(--fg); }
    .itin-row[data-vert="on"]   .vlabel { color: var(--forest); border-color: var(--forest-soft); }
    .itin-card .title { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
    .itin-card .blurb { color: var(--muted); font-size: 15px; margin: 4px 0 0; line-height: 1.55; }
    .itin-card .footrow {
      display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
      margin-top: 12px;
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--muted);
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.03em;
    }
    .itin-card .footrow .price { color: var(--fg); }
    .itin-card .onmap { color: var(--accent); }
    .itin-card .onmap:hover { text-decoration: underline; }

    @media (max-width: 760px) {
      .itin::before { left: 64px; }
      .itin-row { grid-template-columns: 64px 20px 1fr; gap: 12px; }
      .itin-card { padding: 14px 16px; }
    }

    /* ─── STATS ──────────────────────────────────────────────────── */
    .stat-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 32px;
    }
    .stat .num-big {
      font-family: var(--font-display);
      font-size: clamp(54px, 6.2vw, 88px);
      line-height: 0.95;
      letter-spacing: -0.04em;
      color: var(--accent);
      font-weight: 500;
      font-variant-numeric: tabular-nums;
    }
    .stat .num-big.zero { color: var(--forest); }
    .stat .label { color: var(--muted); font-size: 14px; margin-top: 12px; max-width: 22ch; line-height: 1.45; }
    @media (max-width: 920px) {
      .stat-row { grid-template-columns: repeat(2, 1fr); }
    }

    /* ─── WHY (features) ─────────────────────────────────────────── */
    .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; }
    .why-cell { border-top: 1px solid var(--fg); padding-top: 28px; }
    .why-cell .why-h {
      font-family: var(--font-display);
      font-size: 26px;
      line-height: 1.2;
      letter-spacing: -0.015em;
      margin: 0 0 14px;
      font-weight: 500;
    }
    .why-cell p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
    @media (max-width: 920px) { .why-grid { grid-template-columns: 1fr; gap: 32px; } }

    /* ─── CITIES rail ────────────────────────────────────────────── */
    .cities {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }
    .city-tile {
      position: relative;
      aspect-ratio: 4 / 5;
      border-radius: 14px;
      overflow: hidden;
      background: var(--fg);
      transition: transform 0.25s ease;
      cursor: pointer;
    }
    .city-tile:hover { transform: translateY(-3px); }
    .city-tile .bg {
      position: absolute; inset: 0;
      filter: grayscale(1) contrast(1.1);
      transition: filter 0.4s ease;
      opacity: 0.85;
    }
    .city-tile:hover .bg { filter: grayscale(0) contrast(1); }
    .city-tile .veil {
      position: absolute; inset: 0;
      background: linear-gradient(180deg, transparent 40%, rgba(28,26,23,0.85) 100%);
    }
    .city-tile .label {
      position: absolute;
      bottom: 16px; left: 18px; right: 18px;
      color: var(--bg);
    }
    .city-tile .label .name {
      font-family: var(--font-display);
      font-size: 24px;
      line-height: 1.1;
      letter-spacing: -0.015em;
      font-weight: 500;
    }
    .city-tile .label .meta-line {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      color: color-mix(in oklch, var(--bg) 75%, transparent);
      margin-top: 4px;
      font-variant-numeric: tabular-nums;
    }
    .city-tile.more {
      background: var(--surface);
      border: 1px dashed var(--ink-line);
      display: grid; place-items: center;
      color: var(--fg);
      text-align: center;
    }
    .city-tile.more .plus {
      font-family: var(--font-display);
      font-size: 56px;
      line-height: 1;
      font-weight: 500;
      color: var(--accent);
    }
    .city-tile.more .more-label {
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: 8px;
    }

    /* duotone city backgrounds — abstract painted (no external images) */
    .bg-lisbon    { background: linear-gradient(160deg, var(--accent) 0%, var(--fg) 70%); }
    .bg-barcelona { background: linear-gradient(140deg, var(--forest) 0%, var(--fg) 65%); }
    .bg-berlin    { background: linear-gradient(170deg, var(--muted) 0%, var(--fg) 80%); }
    .bg-tokyo     { background: linear-gradient(155deg, var(--accent) 10%, var(--forest) 90%); }
    .bg-prague    { background: linear-gradient(135deg, var(--fg) 0%, var(--muted) 100%); }
    .bg-mexico    { background: linear-gradient(150deg, var(--accent) 0%, var(--forest) 80%); }
    .bg-warsaw    { background: linear-gradient(140deg, var(--forest) 0%, var(--fg) 90%); }
    .bg-vienna    { background: linear-gradient(120deg, var(--muted) 0%, var(--accent) 100%); }
    .bg-seoul     { background: linear-gradient(165deg, var(--fg) 0%, var(--accent) 95%); }
    .bg-amsterdam { background: linear-gradient(145deg, var(--muted) 0%, var(--forest) 85%); }

    @media (max-width: 920px) { .cities { grid-template-columns: repeat(2, 1fr); } }

    /* ─── NEWSLETTER ─────────────────────────────────────────────── */
    .newsletter {
      max-width: 720px;
      margin-inline: auto;
      text-align: left;
    }
    .newsletter h2 {
      font-size: clamp(28px, 3.2vw, 42px);
      line-height: 1.15;
      letter-spacing: -0.02em;
      font-weight: 500;
    }
    .newsletter h2 em { font-style: normal; font-weight: 700; color: var(--accent); }
    .newsletter .nform {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 0;
      margin-top: 28px;
      max-width: 540px;
    }
    .newsletter .nform input {
      padding: 14px 18px;
      border: 1px solid var(--border);
      border-right: 0;
      border-radius: 999px 0 0 999px;
      background: var(--surface);
      color: var(--fg);
      font: inherit;
      font-size: 15px;
      outline: none;
    }
    .newsletter .nform input::placeholder { color: var(--muted); }
    .newsletter .nform input:focus { border-color: var(--accent); }
    .newsletter .nform button {
      background: var(--accent);
      color: var(--surface);
      border: 1px solid var(--accent);
      border-radius: 0 999px 999px 0;
      padding: 0 26px;
      font-weight: 500;
      font-size: 15px;
    }
    .newsletter .nform button:hover { background: color-mix(in oklch, var(--accent) 88%, black); }
    .newsletter .nmicro {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--muted);
      letter-spacing: 0.03em;
      margin-top: 14px;
    }

    /* ─── FOOTER ─────────────────────────────────────────────────── */
    .pagefoot {
      border-top: 1px solid var(--border);
      padding-block: 64px 40px;
      color: var(--muted);
    }
    .foot-grid {
      display: grid;
      grid-template-columns: 1.4fr repeat(4, 1fr);
      gap: 32px;
      margin-bottom: 56px;
    }
    .foot-brand .wordmark { font-size: 26px; }
    .foot-brand .tag { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-top: 12px; letter-spacing: 0.04em; max-width: 26ch; line-height: 1.5; }
    .foot-col h4 {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--fg);
      margin: 0 0 16px;
      font-weight: 500;
    }
    .foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
    .foot-col a { font-size: 14px; color: var(--muted); transition: color 0.15s ease; }
    .foot-col a:hover { color: var(--fg); }
    .foot-bottom {
      border-top: 1px solid var(--border);
      padding-top: 24px;
      display: flex; justify-content: space-between; gap: 24px;
      flex-wrap: wrap;
      font-size: 13px;
    }
    .foot-bottom .disclosure {
      max-width: 56ch;
      line-height: 1.5;
    }
    .foot-bottom .disclosure strong { color: var(--fg); font-weight: 500; }
    .foot-bottom .net {
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: 0.04em;
    }
    @media (max-width: 920px) {
      .foot-grid { grid-template-columns: 1fr 1fr; }
      .foot-brand { grid-column: 1 / -1; }
    }

    /* focus visible */
    :focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
      border-radius: 4px;
    }

    /* ─── WIZARD ─────────────────────────────────────────────────── */
    .section-wizard { background: var(--bg); padding-block: clamp(48px, 7vw, 80px); }
    .wizard-wrap { max-width: 640px; margin: 0 auto; }
    .wiz-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
    .wiz-card { background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: clamp(28px, 5vw, 48px); box-shadow: 0 2px 16px rgba(15,22,34,0.06); }
    .wiz-progress { display: flex; align-items: center; gap: 6px; margin-bottom: 32px; }
    .wiz-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); transition: background 0.25s, width 0.25s; }
    .wiz-dot.on { background: var(--accent); width: 22px; border-radius: 4px; }
    .wiz-dot.done { background: color-mix(in oklch, var(--accent) 40%, var(--border)); }
    .wiz-step-num { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
    /* Horizontal deck: hero (panel 0) slides LEFT out, wizard (panel 1) slides in from the right. */
    .deck-vp { overflow: hidden; transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
    .deck-track { display: flex; flex-wrap: nowrap; align-items: flex-start; width: 200%; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; }
    .deck-panel { width: 50%; flex: 0 0 50%; box-sizing: border-box; }
    .wiz-card { overflow: hidden; }
    .wiz-viewport { overflow: hidden; width: 100%; }
    .wiz-track {
      display: flex;
      flex-wrap: nowrap;
      align-items: flex-start;
      width: 400%;
      transition: transform 0.52s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: transform;
    }
    .wiz-step { width: 25%; box-sizing: border-box; }
    .wiz-q { font-family: var(--font-display); font-size: clamp(20px, 3.5vw, 28px); font-weight: 600; color: var(--fg); margin-bottom: 20px; line-height: 1.2; }
    .wiz-input { width: 100%; box-sizing: border-box; padding: 13px 16px; border: 1.5px solid var(--border); border-radius: 12px; font-family: var(--font-body); font-size: 16px; background: var(--bg); color: var(--fg); outline: none; transition: border-color 0.15s; }
    .wiz-input:focus { border-color: var(--fg); }
    .wiz-sug-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
    .wiz-sug { padding: 6px 14px; border: 1px solid var(--border); border-radius: 20px; font-size: 13px; cursor: pointer; background: var(--bg); color: var(--fg); transition: all 0.15s; white-space: nowrap; }
    .wiz-sug:hover { background: var(--fg); color: var(--surface); border-color: var(--fg); }
    .wiz-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
    .wiz-dates label { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
    .wiz-dates input[type="date"] { padding: 11px 14px; border: 1.5px solid var(--border); border-radius: 10px; font-family: var(--font-body); font-size: 15px; background: var(--bg); color: var(--fg); outline: none; }
    .wiz-dates input[type="date"]:focus { border-color: var(--fg); }
    .wiz-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
    .wiz-cat { padding: 16px; border: 1.5px solid var(--border); border-radius: 14px; cursor: pointer; background: var(--bg); text-align: left; transition: all 0.15s; }
    .wiz-cat.sel { border-color: var(--fg); background: var(--fg); color: var(--surface); }
    .wiz-cat .cat-icon { width: 20px; height: 20px; margin-bottom: 8px; opacity: 0.7; }
    .wiz-cat.sel .cat-icon { opacity: 1; }
    .wiz-cat .cat-name { font-weight: 600; font-size: 14px; display: block; }
    .wiz-cat .cat-sub { font-size: 11px; opacity: 0.55; display: block; margin-top: 2px; }
    .wiz-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; }
    .wiz-back { font-size: 14px; color: var(--muted); cursor: pointer; background: none; border: none; padding: 0; font-family: var(--font-body); }
    .wiz-back:hover { color: var(--fg); }
    .wiz-next { padding: 12px 30px; background: var(--fg); color: var(--surface); border: none; border-radius: 10px; font-family: var(--font-body); font-size: 15px; font-weight: 600; cursor: pointer; transition: opacity 0.15s; }
    .wiz-next:hover { opacity: 0.82; }
    /* results */
    .wiz-res-head { margin-bottom: 22px; }
    .wiz-res-title { font-family: var(--font-display); font-size: clamp(22px, 4vw, 30px); font-weight: 700; color: var(--fg); }
    .wiz-res-sub { font-size: 14px; color: var(--muted); margin-top: 4px; }
    .wiz-res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .wiz-rcard { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }
    .wiz-rcard-cat { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; display: flex; align-items: center; gap: 5px; }
    .wiz-rcard-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
    .wiz-rcard[data-cat="hotels"] .wiz-rcard-dot { background: var(--fg); }
    .wiz-rcard[data-cat="activities"] .wiz-rcard-dot { background: var(--accent); }
    .wiz-rcard[data-cat="attractions"] .wiz-rcard-dot { background: var(--fg); }
    .wiz-rcard[data-cat="events"] .wiz-rcard-dot { background: var(--forest); }
    .wiz-rcard-name { font-weight: 600; font-size: 14px; color: var(--fg); margin-bottom: 3px; }
    .wiz-rcard-meta { font-size: 12px; color: var(--muted); line-height: 1.5; }
    .wiz-cta { margin-top: 20px; width: 100%; padding: 14px; background: var(--accent); color: var(--surface); border: none; border-radius: 12px; font-family: var(--font-body); font-size: 15px; font-weight: 600; cursor: pointer; letter-spacing: 0.01em; transition: opacity 0.15s; }
    .wiz-cta:hover { opacity: 0.88; }
    .wiz-restart { display: block; text-align: center; margin-top: 12px; font-size: 13px; color: var(--muted); cursor: pointer; background: none; border: none; font-family: var(--font-body); width: 100%; }
    .wiz-restart:hover { color: var(--fg); }
    @media (max-width: 480px) {
      .wiz-res-grid { grid-template-columns: 1fr; }
    }

    /* ════════════════════════════════════════════════════════════════
       SECONDARY PAGES — shared components (listings, articles, prose)
       ════════════════════════════════════════════════════════════════ */

    /* ─── breadcrumb ─────────────────────────────────────────────── */
    .crumb { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--muted); display: flex; gap: 8px; align-items: center; }
    .crumb a:hover { color: var(--accent); }
    .crumb .sep { opacity: 0.5; }

    /* ─── page head (category / listing hero) ────────────────────── */
    .page-head { padding-block: clamp(40px, 6vw, 72px) clamp(28px, 4vw, 40px); }
    .page-head h1 { font-size: clamp(40px, 5.4vw, 68px); margin: 18px 0 16px; }
    .page-head h1 em { font-style: normal; font-weight: 700; color: var(--accent); }
    .page-head .lead { font-size: 19px; max-width: 56ch; }
    .page-head.on h1 em { color: var(--forest); }

    /* mini search line reused on category pages */
    .findbar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; align-items: center; }
    .findbar .field {
      display: flex; align-items: center; gap: 8px;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 999px; padding: 10px 18px; font-size: 14px;
    }
    .findbar .field label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
    .findbar .field select, .findbar .field input {
      font: inherit; font-size: 14px; border: 0; background: transparent; color: var(--fg); outline: none; cursor: pointer;
    }

    /* ─── filter / sort row ──────────────────────────────────────── */
    .filterbar {
      position: sticky; top: 65px; z-index: 10;
      background: color-mix(in oklch, var(--bg) 92%, transparent);
      backdrop-filter: blur(10px);
      border-block: 1px solid var(--border);
      padding-block: 14px;
    }
    .filterbar-inner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
    .fpill {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 8px 15px; border-radius: 999px;
      background: var(--surface); border: 1px solid var(--border);
      font-size: 13px; font-weight: 500; color: var(--fg); transition: border-color 0.15s, background 0.15s;
    }
    .fpill:hover { border-color: var(--fg); }
    .fpill.active { background: var(--fg); color: var(--surface); border-color: var(--fg); }
    .fpill .glyph { width: 14px; height: 14px; }
    .filterbar .count { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

    /* ─── listing grid + card ────────────────────────────────────── */
    .listings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
    @media (max-width: 980px) { .listings { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 640px) { .listings { grid-template-columns: 1fr; } }
    .listing {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 16px; overflow: hidden;
      display: flex; flex-direction: column;
      transition: transform 0.22s ease, border-color 0.22s ease;
    }
    .listing:hover { transform: translateY(-3px); border-color: var(--ink-line); }
    .listing .ph { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
    .listing .ph .veil { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(15,22,34,0.55) 100%); }
    .listing .vtag {
      position: absolute; top: 12px; left: 12px; z-index: 2;
      font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
      background: var(--surface); border: 1px solid var(--border); color: var(--fg);
      padding: 4px 9px; border-radius: 5px;
    }
    .listing[data-vert="do"]  .vtag { color: var(--accent); }
    .listing[data-vert="on"]  .vtag { color: var(--forest); }
    .listing .city-stamp { position: absolute; bottom: 12px; left: 14px; z-index: 2; color: var(--bg); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; }
    .listing .body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
    .listing .name { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
    .listing .blurb { color: var(--muted); font-size: 14px; line-height: 1.5; }
    .listing .foot {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border);
      font-family: var(--font-mono); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
    }
    .listing .foot .price { color: var(--fg); font-weight: 500; }
    .listing .foot .price b { font-weight: 600; }
    .listing .rate { color: var(--accent); }

    /* duotone listing backgrounds (no external imagery) */
    .duo-1 { background: linear-gradient(150deg, var(--accent) 0%, var(--fg) 72%); }
    .duo-2 { background: linear-gradient(140deg, var(--forest) 0%, var(--fg) 70%); }
    .duo-3 { background: linear-gradient(160deg, var(--fg) 0%, var(--muted) 100%); }
    .duo-4 { background: linear-gradient(155deg, var(--accent) 8%, var(--forest) 92%); }
    .duo-5 { background: linear-gradient(135deg, var(--muted) 0%, var(--fg) 80%); }
    .duo-6 { background: linear-gradient(165deg, var(--forest) 0%, var(--accent) 95%); }

    /* ─── article / journal grid ─────────────────────────────────── */
    .article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
    @media (max-width: 980px) { .article-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 640px) { .article-grid { grid-template-columns: 1fr; } }
    .article { display: flex; flex-direction: column; gap: 12px; }
    .article .ph { aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; position: relative; }
    .article .ph .veil { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(15,22,34,0.4) 100%); }
    .article .atag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--forest); }
    .article h3 { font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; }
    .article:hover h3 { color: var(--accent); }
    .article p { color: var(--muted); font-size: 15px; line-height: 1.55; margin: 0; }
    .article .byline { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }

    .feature {
      display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center;
      background: var(--surface); border: 1px solid var(--border); border-radius: 20px; overflow: hidden;
    }
    .feature .ph { aspect-ratio: 4 / 3; position: relative; }
    .feature .ph .veil { position: absolute; inset: 0; background: linear-gradient(120deg, transparent 40%, rgba(15,22,34,0.45) 100%); }
    .feature .ftext { padding: clamp(28px, 4vw, 48px); }
    .feature h2 { margin-bottom: 14px; }
    @media (max-width: 820px) { .feature { grid-template-columns: 1fr; } .feature .ph { aspect-ratio: 16/9; } }

    /* ─── prose (about, editorial) ───────────────────────────────── */
    .prose { max-width: 68ch; margin-inline: auto; }
    .prose p { font-size: 18px; line-height: 1.7; color: var(--fg); margin: 0 0 24px; }
    .prose p.big { font-size: 23px; line-height: 1.5; letter-spacing: -0.01em; }
    .prose h2 { margin: 48px 0 18px; }
    .prose h3 { margin: 32px 0 12px; font-size: 20px; }
    .prose strong { font-weight: 600; }
    .prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
    .prose ul { padding-left: 20px; color: var(--fg); line-height: 1.7; font-size: 18px; }
    .prose li { margin-bottom: 10px; }
    .pullquote {
      border-left: 3px solid var(--accent); padding: 4px 0 4px 28px; margin: 40px 0;
      font-family: var(--font-display); font-size: 28px; line-height: 1.3; font-weight: 500; letter-spacing: -0.02em; color: var(--fg);
    }

    /* ─── pager ──────────────────────────────────────────────────── */
    .pager { display: flex; justify-content: center; gap: 8px; margin-top: 56px; }
    .pager a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--border); font-family: var(--font-mono); font-size: 14px; color: var(--muted); }
    .pager a:hover { border-color: var(--fg); color: var(--fg); }
    .pager a.on { background: var(--fg); color: var(--surface); border-color: var(--fg); }

    /* ─── region filter (destinations) ──────────────────────────── */
    .regionbar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }

    /* ─── city template hero ─────────────────────────────────────── */
    .city-hero { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 21 / 9; display: flex; align-items: flex-end; }
    @media (max-width: 720px) { .city-hero { aspect-ratio: 4 / 3; } }
    .city-hero .veil { position: absolute; inset: 0; background: linear-gradient(160deg, transparent 30%, rgba(15,22,34,0.78) 100%); }
    .city-hero .inner { position: relative; padding: clamp(24px, 4vw, 44px); color: var(--bg); }
    .city-hero h1 { color: var(--bg); font-size: clamp(40px, 6vw, 76px); }
    .city-hero .sub { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; color: color-mix(in oklch, var(--bg) 80%, transparent); margin-top: 10px; }

    .vert-nav { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 32px; }
    .vert-nav a {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 10px 18px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
      font-size: 14px; font-weight: 500; color: var(--fg); transition: border-color 0.15s;
    }
    .vert-nav a:hover { border-color: var(--fg); }

    .sec-label { display: flex; align-items: baseline; gap: 14px; margin-bottom: 28px; }
    .sec-label .dotc { width: 10px; height: 10px; border-radius: 50%; align-self: center; }
    .sec-label[data-vert="stay"] .dotc { background: var(--fg); }
    .sec-label[data-vert="do"] .dotc { background: var(--accent); }
    .sec-label[data-vert="see"] .dotc { background: var(--fg); border: 2px dashed var(--accent); box-sizing: border-box; }
    .sec-label[data-vert="on"] .dotc { background: var(--forest); }
    .sec-label .cnt { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }

    /* ─── CTA band ───────────────────────────────────────────────── */
    .ctaband { background: var(--fg); color: var(--bg); border-radius: 20px; padding: clamp(36px, 5vw, 64px); text-align: center; }
    .ctaband h2 { color: var(--bg); margin-bottom: 14px; }
    .ctaband p { color: color-mix(in oklch, var(--bg) 72%, transparent); max-width: 50ch; margin: 0 auto 28px; }
    .ctaband .btn-primary { background: var(--accent); border-color: var(--accent); }

    /* hide planner map-only bits when not present — no-op safety */