/* ShopLaunch — city landing pages (/city/*)
   Layered on site.css and vs.css: same ink navy, one accent, hairline borders.
   Mobile first (390px); widened at 640px / 900px. */

/* ── hero extras ─────────────────────────────────────────── */
.city-hero-in{display:grid;gap:26px}
@media(min-width:980px){.city-hero-in{grid-template-columns:1.14fr .86fr;align-items:center;gap:34px}}
.city-art{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0}
@media(max-width:979px){.city-art{display:none}}
.city-art .device{width:min(236px,62vw)}
.city-art .art-note span{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:#dfe3ee;box-shadow:none}
.city-art .art-note svg{color:var(--accent)}
.city-place{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8d95aa;margin-bottom:10px}
.city-place b{color:#fff;font-weight:800}
.city-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.city-tags span{font-size:11.5px;font-weight:700;color:#dfe3ee;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:4px 10px}

/* ── neighbourhood chips ─────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 4px}
.chips span{font-size:12.5px;font-weight:600;color:var(--ink-2);background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:6px 12px;box-shadow:var(--shadow-xs)}
.chips span.mark{background:var(--accent-050);border-color:var(--accent-100);color:var(--accent-600)}

/* ── example pages ───────────────────────────────────────── */
.demo-grid{display:grid;gap:12px;margin:16px 0 0}
@media(min-width:720px){.demo-grid{grid-template-columns:1fr 1fr;gap:14px}}
.demo-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:16px 17px;box-shadow:var(--shadow-xs);
  transition:border-color .15s,transform .15s}
.demo-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.demo-card .kicker{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.demo-card .kicker i{font-style:normal;background:var(--paper-3);color:var(--ink-2);
  border-radius:999px;padding:2px 7px;letter-spacing:.02em;font-size:10px}
.demo-card .nm{font-size:15.5px;font-weight:800;color:var(--ink);margin-top:8px;letter-spacing:-.02em}
.demo-card .meta{font-size:12.5px;color:var(--muted);margin-top:2px}
.demo-card .go{margin-top:12px;font-size:13px;font-weight:700;color:var(--accent)}
.demo-card .note{font-size:11px;color:var(--faint);margin-top:8px;line-height:1.5}
.demo-foot{font-size:12px;color:var(--muted);margin-top:14px}
.demo-foot a{color:var(--ink-2);text-decoration:underline}

/* ── bilingual band (Miami) ──────────────────────────────── */
.lang-band{display:grid;gap:14px}
@media(min-width:820px){.lang-band{grid-template-columns:1fr 1fr;gap:20px}}
.lang-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px 19px}
.lang-box .tagline{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.lang-box h3{font-size:16px;margin-bottom:8px}
.lang-box p{font-size:13.5px;color:var(--body);margin-bottom:8px}
.lang-box ul{list-style:none;display:grid;gap:6px}
.lang-box li{font-size:13px;color:var(--body);padding-left:15px;position:relative}
.lang-box li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:2px;background:var(--accent)}

/* ── other cities / home city grid ───────────────────────── */
.city-grid{display:grid;gap:10px}
@media(min-width:640px){.city-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.city-grid{grid-template-columns:repeat(3,1fr);gap:12px}}
.city-grid a{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:14px 16px;transition:border-color .15s,transform .15s;box-shadow:var(--shadow-xs)}
.city-grid a:hover{border-color:var(--accent);transform:translateY(-1px)}
.city-grid .c{font-size:14.5px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.city-grid .n{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.city-grid a.us{border-color:var(--accent);background:#fff9f6}

/* ── price line with sterling (London) ───────────────────── */
.price-alt{display:block;font-size:12px;font-weight:700;color:var(--muted);letter-spacing:-.01em;margin-top:2px}
.currency-note{font-size:12px;color:var(--muted);line-height:1.6;margin-top:10px;max-width:70em}

/* the required H1 is long: one notch smaller than the vs hero so it holds two lines */
.city-hero h1{font-size:clamp(26px,4.1vw,37px);line-height:1.12}
@media(max-width:979px){.city-hero h1{font-size:clamp(27px,7vw,34px)}}

/* one example only: keep the card from sitting in a half-empty two-column grid */
.demo-grid.one{grid-template-columns:1fr;max-width:640px}

/* ── eleven-platform three-year table (2nd wave city pages) ─ */
.tco table.vs3 tbody th{width:24%;font-size:12px}
.tco table.vs3 th.num,.tco table.vs3 td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tco table.vs3 thead th.num{background:var(--paper-2);color:var(--ink)}
.tco table.vs3 tr.ours th,.tco table.vs3 tr.ours td{background:#fff9f6;color:var(--ink);font-weight:800}
.tco table.vs3 tr.ours td.num{color:var(--ok)}
.tco-note{font-size:11.5px;color:var(--muted);line-height:1.65;margin-top:10px;max-width:80em}
@media(max-width:620px){.tco table.vs3 tbody th{width:31%}}

/* the brief's H1 ends with the studio name: keep it in the heading, small */
.city-hero h1 .h1-brand{display:block;font-size:.44em;font-weight:700;color:#8d95aa;letter-spacing:-.01em;margin-top:9px}