/* Mapliva Website — editorial travel-journal aesthetic
 * Note: Google Fonts is loaded via <link> in each HTML head (faster than @import,
 * lets the browser begin the font request without waiting for this CSS to parse).
 */

:root {
  --paper:   #F4EFE6;
  --paper-2: #ECE5D7;
  --paper-3: #E4DBC7;
  --ink:     #1A1714;
  --ink-2:   #3C352D;
  --ink-3:   #6B6054;
  --ink-4:   #9A8F81;
  --rule:    #D6CCB7;

  --accent:      #B54A2A;
  --accent-2:    #C9633F;
  --accent-soft: #F0D8C9;

  --ocean:  #3A5A6B;
  --forest: #556B48;
  --sand:   #D4A574;

  /* Fixed inks from EditorialTheme.Colors.StampInk, on matte cream paper. */
  --stamp-ink-accent: #B54A2A;
  --stamp-ink-ocean: #3A5A6B;
  --stamp-ink-forest: #556B48;
  --stamp-ink-sand: #7A521F;

  --serif: 'Fraunces', 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --max: 1280px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* Paper grain — subtle, always on */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.08  0 0 0 0 0.06  0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  z-index: 999;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

.serif { font-family: var(--serif); font-optical-sizing: auto; }
.mono  { font-family: var(--mono); }
.num   {
  font-family: var(--serif);
  font-feature-settings: 'lnum', 'tnum';
  font-variant-numeric: lining-nums tabular-nums;
}
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.num-tag {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--accent);
  text-transform: uppercase;
}

/* ─────────────────────────── NAV ─────────────────────────── */
.nav {
  position: sticky; top: 0;
  z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 40px;
  background: rgba(244, 239, 230, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 0.5px solid var(--rule);
}
.brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.brand-mark {
  display: inline-block;
  width: 30px; height: 30px;
  border-radius: 7px;
  object-fit: cover;
  background: var(--ink);
  box-shadow: 0 1px 3px rgba(26, 23, 20, 0.15), 0 0 0 0.5px rgba(26, 23, 20, 0.1);
}
.brand-wordmark {
  width: 152px;
  height: auto;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .brand-wordmark { width: 118px; }
}
.nav-links {
  display: flex; gap: 32px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-2);
}
.nav-links a {
  position: relative;
  padding: 4px 0;
  transition: color 180ms;
}
.nav-links a:hover { color: var(--accent); }
.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px 9px 18px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.005em;
  transition: transform 180ms, background 180ms;
}
.nav-cta:hover { background: var(--accent); transform: translateY(-1px); }

/* Analytics consent — denied by default in the GA tag configuration. */
.analytics-consent {
  position: fixed;
  z-index: 1000;
  right: 22px;
  bottom: 22px;
  left: 22px;
  max-width: 880px;
  margin: 0 auto;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border: 1px solid rgba(244, 239, 230, 0.24);
  border-radius: 14px;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 18px 60px rgba(26, 23, 20, 0.28);
}
.analytics-consent-copy {
  display: grid;
  gap: 5px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
}
.analytics-consent-copy strong {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
}
.analytics-consent-copy span { color: rgba(244, 239, 230, 0.76); }
.analytics-consent-copy a {
  color: var(--paper);
  border-bottom: 1px solid rgba(244, 239, 230, 0.6);
}
.analytics-consent-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}
.analytics-consent button {
  padding: 9px 13px;
  border: 1px solid rgba(244, 239, 230, 0.35);
  border-radius: 999px;
  background: transparent;
  color: var(--paper);
  font-family: var(--sans);
  font-size: 12px;
}
.analytics-consent .consent-accept {
  border-color: var(--paper);
  background: var(--paper);
  color: var(--ink);
}
@media (max-width: 700px) {
  .analytics-consent {
    right: 12px;
    bottom: 12px;
    left: 12px;
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }
  .analytics-consent-actions { justify-content: flex-end; }
}

/* Tiny EN/ES language toggle — sits between the nav links and the "Get the app"
   CTA. Shows the OTHER language as its label (clicking it = switch). */
.nav-lang {
  background: transparent;
  border: 0.5px solid var(--rule);
  color: var(--ink-2);
  border-radius: 999px;
  padding: 7px 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 180ms, color 180ms, background 180ms;
  margin-right: 8px;
}
.nav-lang:hover { color: var(--accent); border-color: var(--accent); }

/* Legal-pages-EN-only notice. Hidden when lang=en, shown when lang=es.
   Sits directly under the nav with the same paper-2 ground as a contact card. */
.legal-en-only-notice {
  max-width: 780px;
  margin: 14px auto 0;
  padding: 12px 18px;
  background: var(--paper-3);
  border: 0.5px solid var(--rule);
  border-radius: 10px;
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.45;
}
.legal-en-only-notice .mono {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 14px;
}

/* ─────────────────────────── LEGAL PAGE LAYOUT ───────────────────────────
   Reading-column container for /privacy.html and /terms.html. Without
   this, <main class="legal-page"> stretches full window width and the
   1400px-wide paragraph lines become unreadable. We cap at 760px (the
   commonly-cited 60-75 characters-per-line sweet spot for serif body
   copy) with consistent side padding on mobile. */
.legal-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 32px 80px;
  font-family: var(--serif);
  color: var(--ink);
  line-height: 1.6;
}
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  margin-bottom: 32px;
  transition: color 120ms ease;
}
.legal-back:hover { color: var(--accent); }
.legal-back svg { width: 12px; height: 12px; }

.legal-title {
  margin-bottom: 28px;
}
.legal-title .eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 18px;
}
.legal-title h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 14px;
  text-wrap: balance;
}
.legal-title h1 em { font-style: italic; color: var(--accent); font-weight: 400; }
.legal-title .effective {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}

.legal-page section {
  margin-top: 48px;
  border-top: 0.5px solid var(--rule);
  padding-top: 32px;
}
.legal-page section:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 36px;
}
.legal-page h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 18px;
}
.legal-page h3 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin: 28px 0 10px;
}
.legal-page p {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 14px;
}
.legal-page p:last-child { margin-bottom: 0; }
.legal-page strong { color: var(--ink); font-weight: 600; }
.legal-page a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 2px;
}
.legal-page a:hover { color: var(--accent-2, var(--accent)); }
.legal-page ul {
  margin: 0 0 14px;
  padding-left: 22px;
}
.legal-page ul li {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.legal-page code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--paper-3);
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--ink);
}

/* Subprocessors table — hairline borders in the editorial gold, generous
   padding for readability. Horizontally scrolls on narrow viewports. */
.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  font-family: var(--serif);
  font-size: 14px;
}
.legal-table thead th {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-3);
  text-align: left;
  padding: 10px 12px;
  border-bottom: 0.5px solid var(--ink);
}
.legal-table tbody td {
  padding: 14px 12px;
  border-bottom: 0.5px solid var(--rule);
  color: var(--ink-2);
  line-height: 1.5;
  vertical-align: top;
}
.legal-table tbody tr:last-child td { border-bottom: 0; }
.legal-table tbody td:first-child {
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
}
.legal-table tbody td:last-child {
  white-space: nowrap;
  color: var(--ink-3);
}
@media (max-width: 720px) {
  .legal-page { padding: 20px 20px 64px; }
  .legal-table { font-size: 13px; }
  .legal-table tbody td:first-child,
  .legal-table tbody td:last-child {
    white-space: normal;
  }
}
@media (max-width: 800px) {
  .nav { padding: 14px 20px; }
  .nav-links { display: none; }
  /* Keep the lang toggle visible on mobile (the only nav UI besides Get-the-app) */
  .nav-lang { margin-right: 4px; padding: 6px 10px; font-size: 10px; }
}

/* ─────────────────────────── HERO ─────────────────────────── */
.hero {
  padding: 56px 40px 80px;
  max-width: var(--max);
  margin: 0 auto;
  position: relative;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
  min-height: calc(100vh - 130px);
}
.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(56px, 8vw, 112px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin: 22px 0 28px;
  color: var(--ink);
}
.display em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.hero-lead {
  font-family: var(--serif);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 520px;
  margin: 0 0 36px;
  text-wrap: pretty;
}
.hero-actions {
  display: flex; gap: 18px; align-items: center;
  flex-wrap: wrap;
  margin-bottom: 56px;
}
.appstore {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 11px 22px 11px 18px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 12px;
  transition: transform 180ms, background 180ms;
}
.appstore:hover { background: var(--accent); transform: translateY(-2px); }
.appstore-text { display: flex; flex-direction: column; line-height: 1.1; }
.appstore-line1 {
  font-size: 10px;
  letter-spacing: 0.03em;
  text-transform: none;
  opacity: 0.75;
  margin-bottom: 2px;
}
.appstore-line2 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.hero-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  padding: 8px 4px;
  border-bottom: 1px solid var(--ink-2);
  transition: color 180ms, border-color 180ms;
}
.hero-secondary:hover { color: var(--accent); border-color: var(--accent); }
.hero-secondary .arrow { transition: transform 180ms; }
.hero-secondary:hover .arrow { transform: translateX(4px); }

.hero-meta {
  display: flex; align-items: center; gap: 22px;
  padding-top: 22px;
  border-top: 0.5px solid var(--rule);
  max-width: 520px;
}
.hero-meta > div:not(.meta-rule) { display: flex; flex-direction: column; gap: 2px; }
.hero-meta .num { font-size: 22px; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); }
.meta-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.meta-rule { width: 1px; height: 28px; background: var(--rule); }

/* Hero stage with stamps + phone */
.hero-stage {
  position: relative;
  height: 640px;
  display: flex; align-items: center; justify-content: center;
}
/* Shared app stamp treatments: EditorialStampBadge and Profile passportStamp. */
.stamp-badge, .passport-stamp {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--stamp-color, var(--stamp-ink-accent));
  border-radius: 4px;
  color: var(--stamp-color, var(--stamp-ink-accent));
  background: rgba(245, 238, 224, 0.92);
  text-align: center;
  transform: rotate(var(--stamp-rotation, -4deg));
}
.stamp-badge {
  padding: 8px 16px 7px;
  font: 700 10px/1.3 var(--mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}
.stamp-badge-sub { font-size: 8px; font-weight: 500; letter-spacing: 0.1em; opacity: 0.85; margin-top: 2px; }
.passport-stamp {
  flex: 0 1 auto;
  max-width: 100%;
  padding: 7px 9px;
  gap: 3px;
  background: rgba(244, 239, 230, 0.92);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  transform: rotate(var(--stamp-rotation, 0deg));
}
.passport-stamp-meta { font: 600 8.5px/1.3 var(--mono); letter-spacing: 0.8px; }
.passport-stamp-country { display: flex; align-items: center; justify-content: center; gap: 4px; max-width: 100%; color: var(--ink); font: 500 12px/1.25 var(--serif); }
.passport-stamp-flag { flex-shrink: 0; font: 13px/1 system-ui; }
.passport-stamps { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.stamp-floating { position: absolute; z-index: 2; user-select: none; animation: stampFloat 6s ease-in-out infinite; }
.stamp-lisbon { top: 8%; left: 0%; animation-delay: 0s; }
.stamp-porto { top: 22%; right: 4%; animation-delay: -1.5s; }
.stamp-coimbra { bottom: 18%; left: 6%; animation-delay: -3s; }
@keyframes stampFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -8px; }
}
@media (prefers-reduced-motion: reduce) {
  .stamp-floating, .about-stamp { animation: none; }
}

/* Phone — universal mockup */
.phone {
  width: 280px;
  height: 580px;
  background: var(--paper);
  border-radius: 44px;
  padding: 8px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 30px 70px -30px rgba(26, 23, 20, 0.45),
    0 12px 30px -10px rgba(26, 23, 20, 0.25);
  position: relative;
  z-index: 3;
  border: 1px solid var(--rule);
}
.phone-bezel {
  position: absolute; inset: 0;
  border-radius: 44px;
  pointer-events: none;
  box-shadow: 0 0 0 1.5px rgba(26, 23, 20, 0.15) inset;
}
.phone-screen {
  background: var(--paper);
  height: 100%;
  border-radius: 36px;
  overflow: hidden;
  position: relative;
  display: flex; flex-direction: column;
  padding: 12px 16px 16px;
}
.phone-hero { transform: rotate(-3deg); }

/* Status bar */
.ph-status {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-2);
  letter-spacing: 0.04em;
  padding: 4px 6px 10px;
}
.ph-status.light { color: var(--paper); }
.ph-time { font-weight: 500; }
.ph-icons { letter-spacing: 0.2em; opacity: 0.6; font-size: 8px; }

/* Phone header (home) */
.ph-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 4px 12px;
}
.ph-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.ph-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--paper-3);
  border: 0.5px solid var(--rule);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-2);
  letter-spacing: 0.05em;
}
.ph-h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 4px 4px 14px;
  color: var(--ink);
}
.ph-h1 em { font-style: italic; }
.ph-h2-serif {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 32px;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 0;
  color: var(--ink);
}

.ph-hero-card {
  background: var(--paper-2);
  border: 0.5px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
  margin: 0 0 12px;
}
.ph-hero-map { position: relative; background: #13202B; height: 130px; overflow: hidden; }
.ph-hero-map .hero-map-img {
  width: 100%; height: 100%;
  display: block;
}
.ph-hero-tag {
  position: absolute; bottom: 8px; left: 10px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--paper);
  background: rgba(26,23,20,0.6);
  backdrop-filter: blur(6px);
  padding: 4px 8px;
  border-radius: 4px;
}

.ph-stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 8px 4px 14px;
  border-bottom: 0.5px solid var(--rule);
  margin-bottom: 14px;
}
.ph-stat-row.inline { border-bottom: 0; padding-bottom: 18px; }
.ph-stat-num {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.ph-stat-num span { font-size: 14px; color: var(--ink-3); }
.ph-stat-lbl {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  margin-top: 2px;
  text-transform: uppercase;
}

.ph-next {
  background: var(--ink);
  color: var(--paper);
  border-radius: 14px;
  padding: 14px 16px;
}
.ph-next-eyebrow {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--accent-2);
  margin-bottom: 4px;
}
.ph-next-title {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.ph-next-sub {
  font-size: 12px;
  color: var(--ink-4);
  font-style: italic;
}

.ph-quick {
  display: flex; flex-direction: column; gap: 8px;
}
.ph-q {
  display: flex; align-items: center; gap: 12px;
  background: var(--paper-2);
  border: 0.5px solid var(--rule);
  border-radius: 14px;
  padding: 12px 14px;
}
.q-ico {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--paper-3);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  color: var(--accent);
  font-size: 16px;
}
.q-t { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink); }
.q-s { font-family: var(--mono); font-size: 9px; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px; }

/* Map screen */
.phone-screen-map { padding: 0; background: var(--paper-2); }
.phone-screen-map .ph-status { padding: 16px 18px 0; }
.ph-bigmap {
  flex: 1;
  width: 100%;
  min-height: 0;
  display: block;
  background: #ECE5D7;
}
.ph-mapsheet {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--paper);
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  padding: 8px 18px 22px;
  box-shadow: 0 -10px 30px -10px rgba(26, 23, 20, 0.15);
}
.sheet-handle {
  width: 36px; height: 4px;
  background: var(--ink-4);
  opacity: 0.4;
  border-radius: 2px;
  margin: 0 auto 14px;
}
.ph-sub {
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin: 4px 0 10px;
}
.sheet-chips { display: flex; gap: 6px; }
.chip {
  font-family: var(--mono);
  font-size: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 0.5px solid var(--rule);
  color: var(--ink-3);
}
.chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Trip hero */
.ph-trip-hero { padding: 10px 4px 16px; border-bottom: 0.5px solid var(--rule); margin-bottom: 14px; }
.ph-trip-mono {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.ph-trip-sub {
  font-size: 13px;
  font-style: italic;
  color: var(--ink-2);
  margin-top: 6px;
}
.ph-trip-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 0 4px 16px;
  border-bottom: 0.5px solid var(--rule);
  margin-bottom: 14px;
}
.ph-seg {
  display: flex; gap: 2px;
  background: var(--paper-3);
  padding: 3px;
  border-radius: 10px;
  margin-bottom: 14px;
}
.ph-seg .seg {
  flex: 1; text-align: center;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
  padding: 6px 4px;
  border-radius: 8px;
  white-space: nowrap;
}
.ph-seg .seg.active { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.ph-day { display: flex; flex-direction: column; }
.day-row {
  display: grid;
  grid-template-columns: 14px 60px 1fr;
  align-items: center;
  gap: 8px;
  padding: 11px 0;
  border-bottom: 0.5px solid var(--rule);
}
.day-dot { width: 7px; height: 7px; border-radius: 50%; }
.day-kind { font-size: 8.5px; letter-spacing: 0.12em; color: var(--ink-3); font-weight: 600; }
.day-date { font-family: var(--serif); font-size: 13px; color: var(--ink); }
.day-row.open .day-kind { color: var(--accent); }
.day-row.open .day-date { color: var(--accent); }
.day-open { padding: 12px 0 4px 24px; font-size: 13px; line-height: 1.55; color: var(--ink-2); font-style: italic; text-wrap: pretty; }

/* Photo scan */
.ph-scan { display: flex; flex-direction: column; align-items: center; padding: 18px 0; }
.ph-scan-eyebrow {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.ph-ring { width: 144px; height: 144px; margin-bottom: 16px; }
.ph-scan-step { font-family: var(--serif); font-size: 14px; font-style: italic; color: var(--ink-2); margin-bottom: 22px; }
.ph-scan-counts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; width: 100%;
  padding: 14px 8px;
  border-top: 0.5px solid var(--rule);
  border-bottom: 0.5px solid var(--rule);
  text-align: center;
  margin-bottom: 18px;
}
.ph-privacy-note {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  display: inline-flex; align-items: center; gap: 6px;
}
.ph-privacy-note .mono { color: var(--accent); font-size: 14px; line-height: 0; }

/* Recap screen */
.ph-recap { padding: 8px 0; }
.recap-toast {
  background: var(--ink);
  color: var(--accent-2);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  padding: 6px 12px;
  border-radius: 999px;
  display: inline-block;
  margin: 16px 0 18px;
}
.recap-deck {
  display: flex; flex-direction: column; gap: 14px;
}
.recap-card {
  background: var(--paper-2);
  border: 0.5px solid var(--rule);
  border-radius: 14px;
  padding: 16px 18px;
  position: relative;
  transform: rotate(var(--r, 0deg));
}
.recap-card.stamped {
  background: var(--paper);
  border-color: var(--accent);
}
.rc-place { font-family: var(--serif); font-size: 20px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.rc-country { font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: 0.16em; margin-top: 4px; }
.rc-stamp {
  position: absolute; top: 14px; right: 14px;
  border: 2px solid var(--accent);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  padding: 3px 8px;
  border-radius: 4px;
  transform: rotate(8deg);
  font-weight: 700;
}
.rc-chips {
  display: flex; gap: 6px; margin-top: 12px;
}
.rc-chips span {
  font-family: var(--mono);
  font-size: 10px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--paper);
  border: 0.5px solid var(--ink-2);
  color: var(--ink);
  font-weight: 500;
}
.rc-chips span.dim { border-color: var(--rule); color: var(--ink-3); background: transparent; }

/* ─────────────────────────── MARQUEE ─────────────────────────── */
.marquee {
  overflow: hidden;
  border-top: 0.5px solid var(--rule);
  border-bottom: 0.5px solid var(--rule);
  padding: 22px 0;
  background: var(--paper-2);
}
.marquee-track {
  display: inline-flex; gap: 32px;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.16em;
  color: var(--ink-2);
  animation: marqueeScroll 50s linear infinite;
  padding-left: 32px;
}
.marquee-track span:nth-child(3n+1) { color: var(--accent); }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ─────────────────────────── PLAY THE GAME ─────────────────────────── */
.play-section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 110px 40px 40px;
}
.play-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 72px;
  align-items: center;
}
@media (max-width: 980px) {
  .play-grid { grid-template-columns: 1fr; gap: 48px; }
  .play-section { padding: 80px 24px 20px; }
}
.play-copy { max-width: 520px; }
.play-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5.6vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 16px 0 22px;
  color: var(--ink);
}
.play-title em { font-style: italic; color: var(--accent); font-weight: 400; }
.play-lead {
  font-family: var(--serif);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.5;
  color: var(--ink-3);
  margin: 0 0 32px;
  text-wrap: pretty;
}
.play-cta {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 26px 16px 28px;
  background: var(--accent);
  color: var(--paper);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.005em;
  box-shadow: 0 12px 28px -10px rgba(181, 74, 42, 0.55), 0 4px 10px -4px rgba(181, 74, 42, 0.35);
  transition: transform 200ms cubic-bezier(.2,.7,.3,1.2), box-shadow 200ms, background 200ms;
  position: relative;
  overflow: hidden;
}
.play-cta::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 600ms cubic-bezier(.2,.7,.3,1);
}
.play-cta:hover {
  transform: translateY(-3px);
  background: oklch(0.52 0.13 35);
  box-shadow: 0 18px 36px -10px rgba(181, 74, 42, 0.6), 0 6px 14px -4px rgba(181, 74, 42, 0.4);
}
.play-cta:hover::before { transform: translateX(100%); }
.play-cta svg { transition: transform 220ms cubic-bezier(.2,.7,.3,1.4); position: relative; z-index: 1; }
.play-cta:hover svg { transform: translateX(4px); }
.play-cta > span { position: relative; z-index: 1; }
.play-bullets {
  margin-top: 30px;
  border-top: 0.5px solid var(--rule);
  padding-top: 8px;
}
.play-bullets > div {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 0.5px solid var(--rule);
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink-2);
  text-wrap: pretty;
}
.play-bullets .mono {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-weight: 500;
}

/* ── Stage ── */
.play-stage {
  position: relative;
  background: var(--paper-2);
  border: 0.5px solid var(--rule);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 30px 60px -30px rgba(26,23,20,0.25);
  overflow: hidden;
}
.play-stage::before {
  /* paper grain inside the stage too */
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.08  0 0 0 0 0.06  0 0 0 0.2 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.35;
  mix-blend-mode: multiply;
  pointer-events: none;
  border-radius: 24px;
}
.play-stage > * { position: relative; }

.play-stage-eyebrow {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
  min-height: 22px;
}
.play-stage-tag {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  font-weight: 600;
}
.play-stage-toast {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  padding: 5px 11px;
  border-radius: 999px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 280ms, transform 280ms;
}
.play-stage-toast.show { opacity: 1; transform: translateY(0); }

/* Cards grid — 4×2 passport spread */
.play-cards {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 540px) {
  .play-cards { grid-template-columns: repeat(2, 1fr); }
}

.play-card {
  position: relative;
  min-width: 0;
  width: 100%;
  background: var(--paper-2);
  border: 1.5px solid var(--rule);
  border-radius: 14px;
  padding: 8px;
  aspect-ratio: 1;
  min-height: 154px;
  display: flex; flex-direction: column;
  text-align: left;
  transition: border-color 280ms, box-shadow 280ms;
  overflow: hidden;
}
.pc-photo, .pc-scrim {
  position: absolute;
  top: 8px; left: 8px;
  width: calc(100% - 16px); height: calc(100% - 66px);
  border-radius: 8px;
  pointer-events: none;
}
.pc-photo { object-fit: cover; filter: saturate(0.85); }
.pc-scrim { z-index: 1; background: linear-gradient(180deg, rgba(26,23,20,.25), transparent 50%); transition: background 200ms; }
.pc-iata { position: relative; z-index: 2; padding: 6px; color: white; font: 500 9px/1.2 var(--mono); letter-spacing: .12em; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.pc-city { position: relative; margin-top: auto; color: var(--ink); font: 500 15px/1.1 var(--serif); letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-meta { display: flex; align-items: baseline; justify-content: space-between; margin-top: 4px; gap: 6px; color: var(--ink-3); font: 9px/1.2 var(--mono); }
.pc-meta > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pc-badge {
  position: absolute; z-index: 3;
  top: calc(50% - 25px); left: 50%;
  transform: translate(-50%, -50%) rotate(-6deg);
  opacity: 0; pointer-events: none;
}
.play-card.stamped { border-color: var(--stamp-color, var(--stamp-ink-accent)); }
.play-card.stamped .pc-scrim { background: rgba(236,229,215,.78); }
.play-card.stamped .pc-iata { opacity: 0; }
.play-card.stamped .pc-badge { animation: playStamp 420ms cubic-bezier(.2,.7,.3,1.4) forwards; }
@keyframes playStamp {
  0% { transform: translate(-50%, -50%) rotate(-6deg) scale(1.6); opacity: 0; }
  60% { transform: translate(-50%, -50%) rotate(-6deg) scale(.92); opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-6deg) scale(1); opacity: 1; }
}
/* "+1" pulse on each stamp */
.play-card.stamped::after {
  content: '+1';
  position: absolute;
  top: 38%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  color: var(--accent);
  pointer-events: none;
  opacity: 0;
  animation: playPulse 700ms ease-out;
}
@keyframes playPulse {
  0%   { opacity: 0; transform: translate(-50%, -10%) scale(0.6); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -80%) scale(1.1); }
}

/* Cursor */
.play-cursor {
  position: absolute;
  top: 0; left: 0;
  width: 22px; height: 22px;
  pointer-events: none;
  opacity: 0;
  transition: transform 520ms cubic-bezier(.4, 0, .2, 1), opacity 280ms;
  z-index: 5;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.25));
}
.play-cursor.show { opacity: 1; }
.play-cursor.tap { animation: cursorTap 220ms ease-out; }
@keyframes cursorTap {
  0%   { transform: var(--cursor-base) scale(1); }
  50%  { transform: var(--cursor-base) scale(0.72); }
  100% { transform: var(--cursor-base) scale(1); }
}

/* Live stats panel inside stage */
.play-livestats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--paper);
  border: 0.5px solid var(--rule);
  border-radius: 14px;
}
.play-livestat { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.play-livestat-num {
  font-family: var(--serif);
  font-feature-settings: 'lnum','tnum';
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1;
}
.play-livestat.accent .play-livestat-num { color: var(--accent); }
.play-livestat-lbl {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  text-transform: uppercase;
  white-space: nowrap;
}
.play-livestat-rule {
  width: 1px;
  height: 32px;
  background: var(--rule);
  flex-shrink: 0;
}
@media (max-width: 540px) {
  /* Force a 2×2 grid so the 4 stats split evenly instead of wrapping 3+1 */
  .play-livestat-rule { display: none; }
  .play-livestats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .play-cursor { display: none; }
  .play-card.stamped::after { display: none; }
}
.what {
  max-width: var(--max);
  margin: 0 auto;
  padding: 120px 40px 80px;
}
.section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 64px;
}
.section-head-tight { margin-bottom: 48px; }
.section-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 16px 0 18px;
}
.section-head .lead {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0;
  text-wrap: pretty;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
@media (max-width: 980px) {
  .feature-grid { grid-template-columns: 1fr; gap: 56px; }
}
.feature {
  display: flex; flex-direction: column;
  border-top: 0.5px solid var(--ink);
  padding-top: 20px;
}
.feature-num { font-size: 11px; color: var(--accent); letter-spacing: 0.16em; margin-bottom: 14px; }
.feature h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 14px;
}
.feature p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 28px;
  text-wrap: pretty;
}

.feature-mock {
  background: var(--paper-2);
  border-radius: 22px;
  border: 0.5px solid var(--rule);
  padding: 22px;
  margin-top: auto;
  position: relative;
}
.mock-card {
  background: var(--paper);
  border-radius: 14px;
  border: 0.5px solid var(--rule);
  padding: 18px;
}
.mock-eyebrow {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* Profile's packed country stamps, with the same subtle tilt as the app. */
.mock-passport-stamps { min-height: 172px; align-content: center; justify-content: center; gap: 15px 12px; padding: 8px 0; }
.mock-stamps-caption { margin-top: 18px; padding-top: 12px; border-top: 0.5px solid var(--rule); color: var(--ink-3); font: 9px/1.6 var(--mono); text-align: center; }

/* Mock 2 — photo detection */
.mock-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 14px;
}
.mock-photo {
  aspect-ratio: 1;
  width: 100%;
  height: auto;
  border-radius: 6px;
  object-fit: cover;
  display: block;
  background: var(--paper-3);
  position: relative;
  overflow: hidden;
}
.mock-photo::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.25'/></svg>");
  mix-blend-mode: overlay;
}
.mock-trip { margin-bottom: 14px; }
.mock-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  margin-top: 4px;
}
.mock-actions { display: flex; gap: 8px; }
.mock-btn {
  flex: 1;
  border: 0;
  padding: 8px 12px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
}
.mock-btn.ghost { background: transparent; border: 0.5px solid var(--rule); color: var(--ink-2); }
.mock-btn.primary { background: var(--ink); color: var(--paper); }

/* Mock 3 — map */
.mock-card-map { padding: 0; overflow: hidden; }
.mock-card-map svg,
.mock-card-map .feat-map-img {
  display: block;
  width: 100%;
  height: 170px;
  background: #ECE5D7;
}
.mock-map-pill {
  position: absolute;
  bottom: 56px; left: 14px; right: 14px;
  background: var(--paper);
  border: 0.5px solid var(--rule);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex; justify-content: space-between; align-items: center;
  box-shadow: 0 6px 14px -4px rgba(26,23,20,0.15);
}
.mock-yr { font-size: 18px; color: var(--accent); }
.mock-zoom {
  position: absolute;
  bottom: 14px; left: 14px;
  display: flex; gap: 4px;
  background: var(--paper);
  border: 0.5px solid var(--rule);
  border-radius: 999px;
  padding: 3px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
}
.mock-zoom span {
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--ink-3);
}
.mock-zoom span.active { background: var(--ink); color: var(--paper); }

/* ─────────────────────────── EDITORIAL SPREAD ─────────────────────────── */
.spread {
  background: var(--ink);
  color: var(--paper);
  padding: 120px 40px;
  position: relative;
  overflow: hidden;
}
.spread::before {
  content: '';
  position: absolute; inset: 0;
  opacity: 0.18;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.9  0 0 0 0 0.8  0 0 0 0.3 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  pointer-events: none;
}
.spread-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 80px;
  position: relative;
}
@media (max-width: 900px) {
  .spread-grid { grid-template-columns: 1fr; gap: 56px; }
  .spread { padding: 80px 24px; }
}
.spread-quote { position: relative; }
.quote-mark {
  font-family: var(--serif);
  font-size: 180px;
  line-height: 0.6;
  color: var(--accent);
  margin-left: -8px;
  margin-bottom: -40px;
  font-style: italic;
}
.spread-body {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--paper);
  margin: 0 0 32px;
}
.spread-body em { font-style: italic; color: var(--accent-2); }
.spread-sig { padding-top: 24px; border-top: 0.5px solid rgba(244, 239, 230, 0.2); display: flex; align-items: baseline; gap: 16px; }
.sig-name { font-size: 14px; font-style: italic; color: var(--paper); }
.sig-from { font-size: 11px; letter-spacing: 0.14em; color: var(--ink-4); }

.spread-aside .eyebrow {
  color: var(--accent-2);
  margin-bottom: 12px;
  display: block;
}
.aside-body {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--paper);
  opacity: 0.85;
  margin: 0 0 32px;
  text-wrap: pretty;
}
.aside-divider {
  width: 56px; height: 0.5px;
  background: rgba(244, 239, 230, 0.2);
  margin-bottom: 32px;
}

/* ─────────────────────────── SCREENSHOTS RAIL ─────────────────────────── */
.screens {
  padding: 120px 0 80px;
  max-width: 100%;
  overflow: hidden;
}
.screens .section-head { padding: 0 40px; }
.screens-rail {
  display: flex;
  gap: 40px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 20px 40px 60px;
  scrollbar-width: none;
}
.screens-rail::-webkit-scrollbar { display: none; }
.screen-fig {
  flex-shrink: 0;
  width: 280px;
  margin: 0;
  scroll-snap-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.screen-fig .phone { transform: rotate(0); }
.screen-fig figcaption {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-2);
}
.fig-num { color: var(--accent); letter-spacing: 0.14em; font-size: 11px; font-style: normal; }

.rail-controls {
  display: flex; justify-content: center; align-items: center; gap: 22px;
  margin-top: 8px;
}
.rail-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 0.5px solid var(--rule);
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  transition: background 180ms, color 180ms, transform 180ms;
}
.rail-btn:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.rail-btn:disabled { opacity: .4; cursor: default; }
.rail-btn:disabled:hover { background: var(--paper-2); color: var(--ink); transform: none; }
.rail-progress {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  min-width: 80px;
  text-align: center;
}

/* ─────────────────────────── PRIVACY ─────────────────────────── */
.privacy {
  max-width: var(--max);
  margin: 0 auto;
  padding: 120px 40px;
}
.privacy-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: center;
}
@media (max-width: 900px) {
  .privacy-grid { grid-template-columns: 1fr; gap: 56px; }
}
.privacy-stamp {
  display: flex; align-items: center; justify-content: center;
}
.psm {
  position: relative;
  width: 280px; height: 280px;
}
.psm-ring {
  position: absolute; inset: 0;
  border: 2.5px solid var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 6px var(--paper), 0 0 0 7px var(--accent);
}
.psm-text {
  position: absolute; inset: 0;
  animation: psmSpin 30s linear infinite;
}
@keyframes psmSpin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .psm-text { animation: none; }
}
.psm-line {
  position: absolute; inset: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--accent);
  font-weight: 500;
}
.psm-line svg, .psm-line {
  /* fallback: render text inside an SVG on a circular path */
}
/* Use SVG textPath for circular text */
.psm-text {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 280'><defs><path id='c' d='M 140,140 m -110,0 a 110,110 0 1,1 220,0 a 110,110 0 1,1 -220,0'/></defs><text font-family='JetBrains Mono, monospace' font-size='15' letter-spacing='3' fill='%23B54A2A' font-weight='500'><textPath href='%23c' startOffset='0'>· ON-DEVICE · ALWAYS · PRIVATE · BY · DESIGN · 100%25 · YOURS · </textPath></text></svg>")
    center / contain no-repeat;
}
.psm-line { display: none; }
.psm-center {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.psm-c-num {
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.psm-c-sub {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-top: 6px;
  font-weight: 600;
}

.privacy-copy h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 16px 0 32px;
}
.privacy-copy h2 em { font-style: italic; color: var(--accent); }
.privacy-list {
  list-style: none;
  padding: 0; margin: 0 0 32px;
}
.privacy-list li {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: baseline;
  gap: 10px;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-2);
  padding: 18px 0;
  border-top: 0.5px solid var(--rule);
}
.privacy-list li:last-child { border-bottom: 0.5px solid var(--rule); }
.li-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-weight: 500;
}
.privacy-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  padding: 6px 0;
  border-bottom: 1px solid var(--ink);
}
.privacy-link:hover { color: var(--accent); border-color: var(--accent); }
.consent-manage {
  border-top: 0;
  border-right: 0;
  border-left: 0;
  background: transparent;
  cursor: pointer;
}

/* ─────────────────────────── ABOUT ───────────────────────────
   Ported verbatim from /design/website/site.css. Editorial two-column
   layout under the section head: a serif lede on the left + magazine-
   style fact-sheet aside on the right (Founded / Team / Funded by /
   Currently in / contact link). A tilted passport stamp pinned to the
   top-right corner is the visual anchor — reuses the shared .stamp-badge treatment
   from the hero stamp pile. */
.about {
  max-width: var(--max);
  margin: 0 auto;
  padding: 120px 40px 40px;
  position: relative;
}
.about-stamp {
  position: absolute;
  top: 96px;
  right: 56px;
  transform: rotate(6deg);
  animation: stampFloat 7s ease-in-out infinite;
  animation-delay: -2s;
}
@media (max-width: 900px) {
  .about-stamp { top: 60px; right: 24px; transform: rotate(6deg) scale(0.85); }
}
@media (max-width: 560px) {
  /* Pull stamp up + shrink so it doesn't crash the centred eyebrow on phones */
  .about-stamp { top: 16px; right: 16px; transform: rotate(6deg) scale(0.7); transform-origin: top right; }
}
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 96px;
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
  padding-top: 24px;
  border-top: 0.5px solid var(--rule);
}
.about-lede { padding-top: 8px; }
.about-body {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0 0 22px;
  text-wrap: pretty;
}
.about-body:last-child { margin-bottom: 0; }
.about-body em {
  font-style: italic;
  color: var(--accent);
}
.about-aside {
  display: flex;
  flex-direction: column;
  padding-top: 8px;
}
.about-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 0.5px solid var(--rule);
}
.about-row:first-child { border-top: 0.5px solid var(--rule); }
.about-row .eyebrow { color: var(--ink-4); }
.about-fact {
  font-size: 17px;
  font-weight: 400;
  color: var(--ink);
  text-align: right;
  letter-spacing: -0.005em;
}
.about-locs {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  text-align: right;
  text-transform: uppercase;
}
.about-contact {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding: 12px 4px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 0.5px solid var(--accent);
  align-self: flex-start;
  transition: color 180ms, border-color 180ms, gap 180ms;
}
.about-contact:hover {
  color: var(--ink);
  border-color: var(--ink);
  gap: 14px;
}
.about-contact .arrow { font-size: 14px; }
@media (max-width: 800px) {
  .about { padding: 80px 24px 24px; }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-body { font-size: 19px; }
}

/* ─────────────────────────── PRICING ─────────────────────────── */
.pricing {
  max-width: var(--max);
  margin: 0 auto;
  padding: 60px 40px 120px;
}
.price-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
@media (max-width: 800px) {
  .price-grid { grid-template-columns: 1fr; }
}
.price-card {
  background: var(--paper-2);
  border: 0.5px solid var(--rule);
  border-radius: 22px;
  padding: 36px 32px;
  display: flex; flex-direction: column;
}
.price-card .eyebrow { color: var(--ink-3); }
.eyebrow-on-dark { color: var(--accent-2) !important; }
.price-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 36px;
  letter-spacing: -0.02em;
  margin: 8px 0 16px;
  color: var(--ink);
}
.price-num {
  display: flex; align-items: baseline; gap: 8px;
  padding-bottom: 28px;
  border-bottom: 0.5px solid var(--rule);
  margin-bottom: 28px;
}
.price-num .num { font-size: 56px; font-weight: 400; letter-spacing: -0.03em; color: var(--ink); }
.price-per { font-family: var(--mono); font-size: 13px; color: var(--ink-3); }
.price-list { list-style: none; padding: 0; margin: 0 0 28px; flex: 1; }
.price-list li {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink-2);
  padding: 10px 0;
  padding-left: 22px;
  position: relative;
  text-wrap: pretty;
}
.price-list li::before {
  content: '✓';
  position: absolute; left: 0; top: 11px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
}

.price-card-featured {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  position: relative;
  overflow: hidden;
}
.price-card-featured::before {
  content: '';
  position: absolute; inset: 0;
  opacity: 0.15; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.9  0 0 0 0 0.8  0 0 0 0.3 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  pointer-events: none;
}
.price-card-featured > * { position: relative; }
.price-card-featured .price-name { color: var(--paper); }
.price-card-featured .price-num .num { color: var(--paper); }
.price-card-featured .price-per { color: var(--ink-4); }
.price-card-featured .price-num { border-bottom-color: rgba(244,239,230,0.2); }
.price-list-on-dark li { color: var(--paper); opacity: 0.92; }
.price-list-on-dark li::before { color: var(--accent-2); }
.price-foot {
  max-width: 620px;
  margin: 28px auto 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-3);
  text-align: center;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  transition: transform 180ms, background 180ms, color 180ms;
  border: 0;
}
.btn:hover { transform: translateY(-2px); }
.btn-ghost-line {
  background: transparent;
  border: 0.5px solid var(--ink);
  color: var(--ink);
}
.btn-ghost-line:hover { background: var(--ink); color: var(--paper); }
.btn-paper {
  background: var(--paper);
  color: var(--ink);
}
.btn-paper:hover { background: var(--accent); color: var(--paper); }

/* ─────────────────────────── FAQ ─────────────────────────── */
.faq {
  max-width: 920px;
  margin: 0 auto;
  padding: 80px 40px 120px;
}
.faq-list { border-top: 0.5px solid var(--ink); }
.faq-item {
  border-bottom: 0.5px solid var(--rule);
  padding: 4px 0;
}
.faq-item summary {
  list-style: none;
  display: grid;
  grid-template-columns: 48px 1fr 32px;
  align-items: center;
  padding: 28px 0;
  cursor: pointer;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-num { font-size: 11px; letter-spacing: 0.14em; color: var(--accent); }
.faq-q {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.faq-tog {
  font-family: var(--serif);
  font-size: 28px;
  color: var(--ink-3);
  text-align: right;
  transition: transform 240ms, color 240ms;
}
.faq-item[open] .faq-tog { transform: rotate(45deg); color: var(--accent); }
.faq-item[open] .faq-q { color: var(--accent); }
.faq-a {
  padding: 0 32px 28px 64px;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ─────────────────────────── CTA ─────────────────────────── */
.cta {
  background: var(--paper-2);
  border-top: 0.5px solid var(--rule);
  border-bottom: 0.5px solid var(--rule);
  padding: 140px 40px 160px;
  position: relative;
  overflow: hidden;
}
.cta-inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}
.cta-app-tile {
  position: relative;
  width: 132px; height: 132px;
  margin: 0 auto 36px;
}
.cta-app-tile img {
  position: relative;
  z-index: 2;
  width: 100%; height: 100%;
  border-radius: 28px;
  display: block;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 30px 50px -20px rgba(26, 23, 20, 0.55),
    0 10px 25px -8px rgba(26, 23, 20, 0.35),
    0 0 0 0.5px rgba(26, 23, 20, 0.4);
  transform: rotate(-4deg);
  transition: transform 400ms cubic-bezier(.2,.7,.3,1);
}
.cta-app-tile:hover img { transform: rotate(0deg) scale(1.04); }
.cta-app-shadow {
  position: absolute;
  inset: auto 14px -10px 14px;
  height: 32px;
  background: radial-gradient(ellipse at center, rgba(26,23,20,0.35) 0%, transparent 70%);
  z-index: 1;
  filter: blur(8px);
}
.cta-eyebrow { color: var(--accent); margin-bottom: 24px; display: block; }
.cta-h {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(64px, 9vw, 132px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 0 0 28px;
}
.cta-h em { font-style: italic; color: var(--accent); }
.cta-lead {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 540px;
  margin: 0 auto 44px;
  text-wrap: pretty;
}
.cta-actions {
  display: flex; align-items: center; justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}
.appstore-light {
  background: var(--ink);
}
.qr-block {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 20px 10px 12px;
  border: 0.5px solid var(--rule);
  border-radius: 14px;
  background: var(--paper);
  transition: transform 180ms, border-color 180ms;
}
.qr-block:hover { border-color: var(--accent); transform: translateY(-2px); }
.beta-contact { padding: 18px 22px; }
.beta-contact .qr { display: none; }
.qr { width: 64px; height: 64px; flex-shrink: 0; border-radius: 6px; overflow: hidden; }
.qr svg { display: block; width: 100%; height: 100%; }
.qr-copy { text-align: left; }
.qr-eyebrow { font-size: 9px; letter-spacing: 0.18em; color: var(--ink-4); margin-bottom: 4px; }
.qr-text {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.cta-stamp {
  position: absolute;
  inset: auto 0 -40px 0;
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(80px, 16vw, 260px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
  opacity: 0.12;
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
  z-index: 1;
}

/* ─────────────────────────── FOOTER ─────────────────────────── */
.foot {
  background: var(--ink);
  color: var(--paper);
  padding: 80px 40px 40px;
}
.foot-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 60px;
  border-bottom: 0.5px solid rgba(244,239,230,0.15);
}
@media (max-width: 800px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
.foot-grid-five { grid-template-columns: 2fr repeat(4, 1fr); }
@media (max-width: 800px) {
  .foot-grid-five { grid-template-columns: 1fr 1fr; }
}
.foot-brand .brand { color: var(--paper); }
.foot-brand .brand-mark {
  width: 34px; height: 34px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(255, 255, 255, 0.08);
}
.foot-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--paper);
  opacity: 0.85;
  margin: 14px 0 22px;
  max-width: 320px;
}
.foot-meta { font-size: 10px; letter-spacing: 0.14em; color: var(--ink-4); }
.foot-col { display: flex; flex-direction: column; gap: 12px; }
.foot-col .eyebrow { color: var(--ink-4); margin-bottom: 8px; }
.foot-col a {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--paper);
  opacity: 0.8;
  transition: color 180ms, opacity 180ms;
}
.foot-col a:hover { color: var(--accent-2); opacity: 1; }
.foot-bottom {
  max-width: var(--max);
  margin: 32px auto 0;
  display: flex; justify-content: center; gap: 16px;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-4);
}

/* ─────────────────────────── Responsive trims ─────────────────────────── */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 60px; min-height: auto; }
  .hero { padding: 40px 24px 60px; }
  .hero-stage { height: 540px; }
  .what, .privacy, .pricing { padding-left: 24px; padding-right: 24px; }
  .screens .section-head { padding: 0 24px; }
  .screens-rail { padding: 20px 24px 60px; }
}
@media (max-width: 560px) {
  .hero-stage .stamp-floating { display: none; }
}

/* Geographic illustrations are bundled SVG images, with their pins projected
   at build time. Keep their aspect ratios intact at every screen size. */
.hero-map-img { object-fit: contain; }
.ph-bigmap { object-fit: cover; object-position: center top; background: #dce8e9; }
.mock-card-map .feat-map-img { height: auto; }
.mock-map-pill { position: relative; left: auto; right: auto; bottom: auto; margin: 0; border-radius: 0; }
.mock-zoom { display: none; }
.mock-btn { text-align: center; }
.ph-avatar { display: grid; place-items: center; }
.preview-note, .map-source { color: var(--ink-3); font-size: 14px; line-height: 1.6; }
.preview-note { margin: 20px auto 0; }
.map-source { text-align: center; margin: 24px 24px 0; }
.map-source a { text-underline-offset: 3px; }
.record-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; border-top: 1px solid var(--rule); margin-top: 64px; padding-top: 40px; }
.record-notes h3 { font-size: 30px; font-weight: 500; margin: 14px 0; }
.record-notes p { font-size: 16px; line-height: 1.65; color: var(--ink-2); max-width: 56ch; }
.ph-country { margin-top: 24px; }
.ph-country-kicker { margin-top: 22px; font-size: 12px; color: var(--ink-3); }
.ph-country .ph-h2-serif { margin: 4px 0 16px; }
.ph-country-days { display: flex; align-items: baseline; gap: 8px; }
.ph-country-days .num { font-family: var(--serif); font-size: 64px; line-height: 1; }
.ph-country-days > span:last-child { font-size: 12px; color: var(--ink-3); }
.ph-country-years { margin-top: 8px; font-size: 10px; color: var(--ink-3); }
.ph-country-tabs { display: flex; justify-content: space-between; border-bottom: 1px solid var(--rule); margin-top: 24px; gap: 8px; font-size: 11px; }
.ph-country-tabs span { padding-bottom: 8px; }
.ph-country-tabs .active { border-bottom: 2px solid var(--accent); }
.ph-country-row { display: flex; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--rule); font-family: var(--serif); font-size: 17px; }
.ph-country-row > span:last-child { font-family: var(--sans); font-size: 12px; color: var(--ink-3); align-self: center; }
.ph-country-note { font-size: 12px; line-height: 1.5; color: var(--ink-3); margin-top: 15px; }
@media (max-width: 700px) {
  .record-notes { grid-template-columns: 1fr; gap: 32px; }
}

/* ─────────────────────── STICKY TESTFLIGHT BAR ───────────────────────
   Persistent beta ask. Hidden until the reader has scrolled past the hero
   (they've seen the pitch), and hidden again once the closing CTA section
   is on screen so the page never shows the same ask twice. Sits below the
   consent banner's z-index; `body.tf-bar-on` lifts the banner clear. */
.tf-bar {
  position: fixed;
  z-index: 997;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 12px 22px calc(12px + env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: 0.5px solid var(--rule);
  box-shadow: 0 -10px 40px rgba(26, 23, 20, 0.07);
  transform: translateY(100%);
  transition: transform 320ms cubic-bezier(0.2, 0, 0, 1);
}
.tf-bar.is-visible { transform: translateY(0); }

.tf-bar-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tf-bar-eyebrow {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.tf-bar-line {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tf-bar-line em { font-style: italic; font-weight: 300; }

.tf-bar-action {
  display: inline-flex; align-items: center; gap: 8px;
  flex: none;
  padding: 10px 18px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  transition: transform 180ms, background 180ms;
}
.tf-bar-action:hover { background: var(--accent); transform: translateY(-1px); }

.tf-bar-dismiss {
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 0.5px solid var(--rule);
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-3);
  font-size: 15px;
  line-height: 1;
  padding: 0;
}
.tf-bar-dismiss:hover { color: var(--ink); border-color: var(--ink-4); }

/* Keep the last section clear of the bar. */
body.tf-bar-on { padding-bottom: 68px; }
body.tf-bar-on .analytics-consent { bottom: calc(22px + 68px); }

@media (max-width: 640px) {
  .tf-bar { gap: 12px; padding-left: 16px; padding-right: 16px; }
  .tf-bar-eyebrow { font-size: 9px; letter-spacing: 0.1em; }
  .tf-bar-line { font-size: 13.5px; }
  .tf-bar-action { padding: 9px 14px; font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .tf-bar { transition: none; }
  .tf-bar-action:hover { transform: none; }
}

/* Five-frame tour: representative layouts from the current SwiftUI screens. */
.screens-rail .phone-screen > * { flex-shrink: 0; }
.tour-eyebrow { color: var(--ink-3); font: 8px/1.4 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.tour-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--ink-3); font: 8px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 6px 0 12px; }
.tour-nav > span:first-child, .tour-nav > span:last-child { font-size: 17px; line-height: 1; }
.tour-home .ph-header { padding-bottom: 6px; align-items: center; }
.tour-home .ph-avatar { display: grid; place-items: center; width: 24px; height: 24px; font-size: 8px; }
.tour-home .ph-eyebrow { font-size: 8px; }
.tour-home .ph-h1 { font-size: 25px; margin: 2px 0 12px; }
.tour-year-card { background: var(--paper-2); border: .5px solid var(--rule); border-radius: 16px; padding: 12px; }
.tour-year-prose { margin: 6px 0 10px; font: 400 16px/1.25 var(--serif); }
.tour-year-prose strong { font-weight: 500; }
.tour-year-prose em { color: var(--accent); font-style: normal; }
.tour-year-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: .5px solid var(--rule); padding-top: 8px; gap: 5px; }
.tour-year-stats > div { display: flex; flex-direction: column; gap: 2px; }
.tour-year-stats .num { font: 17px/1.1 var(--serif); color: var(--ink); }
.tour-year-stats span:last-child { color: var(--ink-3); font: 7px/1.3 var(--mono); text-transform: uppercase; }
.tour-action-heading { margin: 12px 0 7px; }
.tour-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
.tour-action { background: var(--paper-2); border: .5px solid var(--rule); border-radius: 12px; padding: 8px; }
.tour-action-icon { display: block; color: var(--accent); font-size: 14px; line-height: 1; margin-bottom: 4px; }
.tour-action-title { font-size: 10px; line-height: 1.25; font-weight: 500; }
.tour-action-sub { font-size: 8px; line-height: 1.3; color: var(--ink-3); margin-top: 3px; }
.tour-review-entry { display: flex; align-items: center; justify-content: space-between; gap: 6px; border: .5px solid var(--rule); border-radius: 12px; background: var(--accent-soft); padding: 10px; margin-top: 8px; font: 12px/1.2 var(--serif); }
.tour-review-entry > span:last-child { color: var(--accent); }
.tour-tabbar { display: flex; align-items: center; justify-content: space-around; gap: 3px; background: var(--paper-2); border: .5px solid var(--rule); border-radius: 999px; padding: 5px; margin-top: auto; font-size: 7px; color: var(--ink-3); }
.tour-tabbar > span { padding: 6px 3px; }
.tour-tabbar .active { background: var(--ink); color: var(--paper); border-radius: 999px; }

.tour-atlas { padding: 0; background: var(--paper-2); }
.tour-atlas > .ph-status { position: relative; z-index: 2; padding: 16px 18px 0; }
.tour-atlas-map { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tour-atlas-chrome { position: absolute; z-index: 2; top: 35px; left: 12px; right: 12px; background: rgba(244,239,230,.96); border: .5px solid var(--rule); border-radius: 14px; padding: 8px 10px 10px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.tour-atlas-chrome .tour-nav { padding: 0 0 8px; }
.tour-atlas-title { display: flex; align-items: baseline; justify-content: space-between; gap: 5px; margin-bottom: 9px; font: 19px/1.2 var(--serif); }
.tour-atlas-title .mono { font: 6.5px/1.4 var(--mono); color: var(--ink-3); }
.tour-atlas-chrome .chip { font-size: 8px; padding: 4px 8px; white-space: nowrap; }
.tour-year-chips { margin-top: 7px; gap: 4px; }
.tour-year-chips .chip { padding: 4px 6px; font-size: 7px; }
.tour-atlas .ph-mapsheet { padding: 8px 18px 16px; }
.tour-atlas .sheet-handle { margin-bottom: 10px; }
.tour-sheet-title { font: 22px/1.2 var(--serif); margin: 3px 0 8px; }
.tour-place-row { display: flex; justify-content: space-between; align-items: center; border-top: .5px solid var(--rule); padding: 9px 0; font: 14px/1.2 var(--serif); }
.tour-place-row .mono { color: var(--ink-3); font-size: 8px; }

.tour-trip-cover { position: relative; height: 185px; margin: 0 -16px 12px; overflow: hidden; }
.tour-trip-cover > img { width: 100%; height: 100%; object-fit: cover; }
.tour-trip-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(26,23,20,.05),rgba(26,23,20,.8)); }
.tour-trip-cover-copy { position: absolute; z-index: 1; bottom: 16px; left: 16px; right: 16px; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.tour-trip-cover .ph-trip-mono { color: rgba(255,255,255,.85); font-size: 8px; }
.tour-trip-cover .ph-h2-serif { color: white; font-size: 27px; }
.tour-trip-cover .ph-trip-sub { color: rgba(255,255,255,.9); font-size: 10px; }
.tour-trip .ph-trip-stats { padding: 0 0 12px; margin-bottom: 10px; }
.tour-trip .ph-stat-lbl { font-size: 7px; letter-spacing: .03em; }
.tour-trip .ph-stat-num { font-size: 21px; margin-top: 3px; }
.tour-trip .ph-seg { margin-bottom: 4px; }
.tour-trip .ph-seg .seg { font-size: 9px; padding: 6px 3px; }
.tour-trip .day-row { grid-template-columns: 8px 53px 1fr; gap: 6px; padding: 9px 0; }
.tour-trip .day-kind { font-size: 7px; }
.tour-trip .day-date { font-size: 11px; }
.tour-trip .day-open { font-size: 11px; line-height: 1.45; padding: 10px 0 0 14px; }

.tour-scan-body { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 25px; }
.tour-scan-body .ph-ring { width: 148px; height: 148px; margin-bottom: 20px; }
.tour-scan-step { font: 500 18px/1.2 var(--serif); margin-bottom: 8px; }
.tour-scan-dots { color: var(--accent); font-size: 8px; letter-spacing: 5px; margin: 24px 0; }
.tour-scan-review { width: 100%; border: .5px solid var(--rule); border-radius: 14px; padding: 12px; background: var(--paper-2); text-align: left; }
.tour-scan-review .serif { font-size: 15px; }
.tour-scan-review p { font-size: 11px; line-height: 1.45; margin: 4px 0 0; color: var(--ink-3); }
.tour-scan-private { color: var(--ink-3); font: 9px/1.5 var(--mono); margin: 18px 0 0; }

.tour-country-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 8px 0 14px; }
.tour-country-heading .ph-h2-serif { font-size: 29px; margin-top: 4px; }
.tour-country-stamp { padding: 7px 9px 6px; gap: 2px; font-size: 9px; --stamp-rotation: -6deg; }
.tour-country-stamp .stamp-badge-sub { font-size: 6px; letter-spacing: .06em; }
.tour-country-days-card { background: var(--paper-2); border: .5px solid var(--rule); border-radius: 16px; padding: 14px; }
.tour-country-days-card .tour-eyebrow { font-size: 7px; }
.tour-country .ph-country-days { margin: 6px 0 3px; }
.tour-country .ph-country-days .num { font-size: 64px; }
.tour-country .ph-country-days > span:last-child { font: italic 18px/1 var(--serif); }
.tour-country-spent { font: 13px/1.3 var(--serif); color: var(--ink-3); }
.tour-country-overview { font: 10px/1.3 var(--serif); color: var(--ink-3); margin-top: 3px; }
.tour-country-yearbar { display: flex; gap: 3px; margin-top: 12px; }
.tour-country-yearbar > span { flex: 1; height: 12px; border-radius: 2px; background: var(--accent); }
.tour-country-yearbar > .empty { background: var(--paper-3); }
.tour-country-yearlabels { display: flex; justify-content: space-between; color: var(--ink-3); font-size: 7px; margin-top: 4px; }
.tour-country .ph-country-tabs { margin-top: 16px; font-size: 10px; gap: 5px; }
.tour-country .ph-country-row { font-size: 16px; padding: 10px 0; }
.tour-country .ph-country-row > span:last-child { font-size: 10px; }
.tour-country .ph-country-note { font-size: 10px; margin-top: 12px; }

/* Home-country exploration and the shared image/video composer. */
.hero-preview-note { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; color: var(--ink-3); font: 9px/1.5 var(--mono); }
.phone-hero .ph-hero-map { height: 190px; background: #dce8e9; }
.phone-hero .ph-hero-map .hero-map-img { object-fit: cover; }
.phone-hero .ph-avatar { display: grid; place-items: center; }
.local-scope { display: flex; gap: 5px; padding: 4px; background: var(--paper-3); border-radius: 9px; margin-bottom: 14px; }
.local-scope > span { flex: 1; text-align: center; padding: 7px 4px; font: 10px/1.3 var(--sans); color: var(--ink-3); }
.local-scope > .active { background: var(--paper); border-radius: 6px; color: var(--accent); box-shadow: 0 1px 3px rgba(26,23,20,.08); }
.local-city-stamps { display: grid; grid-template-columns: repeat(auto-fit,minmax(80px,1fr)); gap: 8px; margin: 18px 0; }
.local-city-stamp { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 15px 3px; border: 1px solid var(--stamp-ink-forest); border-radius: 4px; color: var(--stamp-ink-forest); background: var(--paper); }
.local-city-stamp:nth-child(2) { transform: rotate(2deg); }
.local-city-stamp:nth-child(3) { transform: rotate(-2deg); }
.local-city-stamp .mono { font-size: 8px; }
.local-city-stamp strong { color: var(--ink); font: 500 17px/1.2 var(--serif); }
.local-city-stamp > span:last-child { font: 8px/1.3 var(--sans); }
.local-search { border: 1px dashed var(--rule); border-radius: 8px; padding: 11px; font: italic 13px/1.4 var(--serif); color: var(--ink-3); }
.spread-sig .sig-name { flex-shrink: 0; }
.tour-local-map { display: block; width: 100%; height: 100px; object-fit: cover; border-radius: 8px; margin: 0 0 8px; }
.tour-home .ph-h1 { margin-bottom: 6px; }
.tour-home .tour-year-prose { font-size: 15px; }
.tour-home .tour-action-heading { margin-top: 10px; }
.tour-share .local-scope { margin-bottom: 8px; }
.tour-share-sizes { display: flex; gap: 6px; justify-content: center; margin-bottom: 10px; font: 8px/1.4 var(--sans); color: var(--ink-3); }
.tour-share-sizes > span { padding: 5px 7px; border-radius: 5px; }
.tour-share-sizes > .active { background: var(--paper-3); color: var(--ink); }
.tour-share-card { width: 176px; aspect-ratio: 4 / 5; align-self: center; background: var(--paper-2); border: 1px solid var(--rule); padding: 19px 13px 12px; margin-bottom: 10px; display: flex; flex-direction: column; text-align: center; color: var(--ink); }
.tour-share-card .tour-eyebrow { font-size: 6px; }
.tour-share-number { font: 82px/1.1 var(--serif); letter-spacing: -.05em; color: var(--accent); margin-top: 10px; }
.tour-share-card > .serif { font-size: 15px; font-style: italic; }
.tour-share-rule { width: 24px; height: 1px; background: var(--accent); margin: 12px auto 8px; }
.tour-share-card p { font-size: 8px; margin: 0; }
.tour-share-brand { font-size: 7px; letter-spacing: .16em; margin-top: auto; }
.tour-share-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 9px 0; border-top: 1px solid var(--rule); font: 12px/1.25 var(--serif); }
.tour-share-row small { display: block; font: 8px/1.4 var(--sans); color: var(--ink-3); margin-top: 3px; }
.tour-share-note { color: var(--ink-3); font: italic 9px/1.4 var(--serif); margin: 7px 0; }
.tour-share-send { text-align: center; padding: 10px 6px; border-radius: 8px; background: var(--accent); color: var(--paper); font: 10px/1.3 var(--sans); margin-top: auto; }