/* ==================================================================== *
 * Paros Guide — marketing site
 * Design tokens ported 1:1 from the Paros Guide design system
 * (colors / typography / spacing). Light "Aegean" is default; add
 * data-theme="dark" on an ancestor to switch to the "Midnight" scheme.
 * ==================================================================== */

/* Manrope is served from our own server (assets/fonts), not Google Fonts,
   so visitors' IP addresses are not sent to Google. It is a variable font:
   one file per script covers every weight. The browser only downloads a
   file when the page uses characters in its unicode-range (Greek visitors
   get the Greek file, and so on). The latin file is also preloaded in each
   page's <head>. Files and ranges from Google Fonts' Manrope v20; licence in
   assets/fonts/OFL.txt. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('assets/fonts/manrope-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('assets/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('assets/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Type families */
  --font-display: 'Manrope', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, sans-serif;

  /* ===== Semantic tokens — LIGHT (Aegean) ===== */
  --accent:       #1c6ca1;
  --accent-text:  #ffffff;
  --accent-soft:  #e9f1f8;

  --bg:       #f4f8fb;
  --surface:  #ffffff;
  --field:    #f1f5f7;
  --card:     #e9f1f8;

  --ink:   #0d2a40;
  --body:  #46596a;
  --sub:   #4a6f8c;

  --line:   #dde8f0;
  --line-2: #e6eef4;

  --star:       #f4c150;
  --pink-badge: #d4357f;
  --pink-soft:  #fbe7f1;

  --shadow-color: rgba(13, 42, 64, 0.14);
  --white: #ffffff;
}

/* ===== Semantic tokens — DARK (Midnight) ===== */
[data-theme="dark"] {
  --accent:       #d9b46a;
  --accent-text:  #12161c;
  --accent-soft:  #262b22;

  --bg:       #12161c;
  --surface:  #1b212a;
  --field:    #1c222b;
  --card:     #1b212a;

  --ink:   #f4f1e8;
  --body:  #aab1bd;
  --sub:   #8f98a5;

  --line:   #2a313b;
  --line-2: #333b46;

  --star:       #d9b46a;
  --pink-badge: #e0689f;
  --pink-soft:  #2c1f28;

  --shadow-color: rgba(0, 0, 0, 0.5);
  --white: #1b212a;
}

/* ---- base ---- */
html, body { margin: 0; padding: 0; background: #f4f8fb; }
body { overscroll-behavior-y: none; }
* { box-sizing: border-box; }
a { color: #1c6ca1; text-decoration: none; }
a:hover { color: #0e3a5e; }
::selection { background: #1c6ca1; color: #ffffff; }

/* ---- animations ---- */
@keyframes pg-hero-zoom { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes pg-bob { 0%, 100% { transform: translateY(0); opacity: 0.9; } 50% { transform: translateY(7px); opacity: 0.5; } }

.maplibregl-ctrl-attrib { font-size: 10px; opacity: 0.6; }

/* subtle hover/active affordances for the theme + language toggles */
#pg-theme-toggle:hover { background: rgba(255,255,255,0.28) !important; }
#pg-theme-toggle:active { transform: scale(0.94); }
#pg-lang-toggle:hover { background: rgba(255,255,255,0.28) !important; }
#pg-lang-toggle:active { transform: scale(0.96); }

/* ---- text pages: privacy.html, terms.html ---- */
.pp { max-width: 720px; margin: 0 auto; padding: 28px 20px 72px; }
.pp-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; font-size: 14.5px; font-weight: 600; }
.pp-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 400; font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; color: var(--ink); text-decoration: none; }
.pp-langs a { margin-left: 14px; }
.pp h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 6vw, 42px); letter-spacing: -1px; line-height: 1.1; margin: 0 0 8px; }
.pp h2 { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.2px; margin: 34px 0 8px; }
.pp p, .pp li { font-size: 16px; line-height: 1.65; color: var(--body); }
.pp p { margin: 0 0 12px; }
.pp ul { margin: 0 0 12px; padding-left: 22px; }
.pp li { margin-bottom: 4px; }
.pp .updated { color: var(--sub); font-size: 14px; margin-bottom: 26px; }
.pp a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.pp .pp-brand { text-decoration: none; }
.pp section + section { margin-top: 64px; padding-top: 44px; border-top: 1px solid var(--line); }
.pp-foot { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; }
.pp .pp-foot a { color: var(--sub); }
.pp .pp-foot a[aria-current] { color: var(--ink); text-decoration: none; }

/* ---- error pages: 400/401/403/404/500.html ---- */
.nf { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 20px; }
.nf-mark { color: var(--accent); margin-bottom: 26px; }
.nf-code { font-family: var(--font-display); font-weight: 400; font-size: 13px; letter-spacing: 0.3em; margin: 0 0 14px; margin-right: -0.3em; color: var(--sub); }
.nf h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 6vw, 44px); letter-spacing: -1px; line-height: 1.1; margin: 0 0 12px; }
.nf p { font-size: 16.5px; line-height: 1.6; color: var(--body); max-width: 30em; margin: 0 0 30px; }
.nf-home { display: inline-block; padding: 14px 26px; border-radius: 999px; background: var(--accent); color: var(--accent-text); font-weight: 700; font-size: 15px; text-decoration: none; }
.nf-home:hover { color: var(--accent-text); filter: brightness(1.08); }

/* ---- privacy.html and terms.html: header card, at-a-glance cards, contents menu ----
 * Builds on the .pp text-page rules above (main.pp.pv). */
.pp.pv { max-width: 1080px; }
.pv-lang[hidden] { display: none; }
/* `.pp section + section` spaces the two languages apart when both show (no
   JavaScript); with one hidden, the visible one must sit right under the nav. */
.pp .pv-lang[hidden] + .pv-lang { margin-top: 0; padding-top: 0; border-top: 0; }
.pv-i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

.pv-langs { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--field); border: 1px solid var(--line); }
.pp .pv-langs a { margin: 0; padding: 7px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--body); text-decoration: none; }
.pp .pv-langs a[aria-current="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 4px var(--shadow-color); }
/* Round sun/moon light/dark button for light backgrounds: beside the
   language switch on privacy/terms, and beside the waitlist heading on the
   home page (the hero keeps its own glass button). The icon follows
   data-theme on <html>, so it is right before any script runs. */
.pv-tools { display: inline-flex; align-items: center; gap: 8px; }
/* home: the button sits in the app-showcase section's top-right corner, in
   the same spot as the page header's button, which has scrolled away by
   then. Insets match the section's own gutters at each width. */
.pg-sec-theme { position: absolute; top: 34px; right: 44px; z-index: 3; }
.pg-theme-btn { width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 999px; background: var(--field); border: 1px solid var(--line); color: var(--ink); cursor: pointer; touch-action: manipulation; transition: background-color 0.15s, transform 0.15s; }
.pg-theme-btn:hover { background: var(--surface); box-shadow: 0 1px 4px var(--shadow-color); }
.pg-theme-btn:active { transform: scale(0.94); }
.pg-theme-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pg-theme-btn [data-icon="sun"], [data-theme="dark"] .pg-theme-btn [data-icon="moon"] { display: none; }
[data-theme="dark"] .pg-theme-btn [data-icon="sun"] { display: block; }

.pv-hero { position: relative; overflow: hidden; padding: 48px 44px 40px; margin-bottom: 16px; border-radius: 28px; border: 1px solid var(--line); background: linear-gradient(155deg, var(--accent-soft) 0%, var(--surface) 100%); }
.pv-hero-mark { position: absolute; right: -24px; bottom: -34px; width: 280px; height: auto; fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.12; pointer-events: none; }
.pp .pv-eyebrow { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.pp .pv-hero h1 { position: relative; font-size: clamp(36px, 6vw, 54px); letter-spacing: -1.4px; margin: 0 0 16px; }
.pp .pv-lede { position: relative; max-width: 38em; margin: 0 0 22px; font-size: 17.5px; line-height: 1.6; color: var(--body); }
.pp .pv-updated { position: relative; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 14px 7px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 13.5px; color: var(--sub); }
.pv-updated .pv-i { width: 16px; height: 16px; }

/* .pp-prefixed so they beat the generic `.pp ul` margin and indent */
.pp .pv-glance { list-style: none; margin: 0 0 56px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pv-glance li { display: flex; flex-direction: column; gap: 6px; padding: 20px 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.pv-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.pv-glance .pv-ico { margin-bottom: 8px; }
.pv-glance strong { font-family: var(--font-display); font-size: 15.5px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.pv-glance .pv-txt { font-size: 14px; line-height: 1.5; color: var(--body); }

.pv-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 64px; align-items: start; }
.pv-body { max-width: 720px; }
.pv-toc { position: sticky; top: 28px; }
.pp .pv-toc p { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sub); }
.pv-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.pp .pv-toc a { display: block; margin-left: -1px; padding: 7px 0 7px 16px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.35; color: var(--body); text-decoration: none; }
.pp .pv-toc a:hover { color: var(--ink); }
.pp .pv-toc a.is-active { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }

.pp .pv-sec { scroll-margin-top: 24px; }
.pp .pv-sec + .pv-sec { margin-top: 0; padding-top: 34px; border-top: 1px solid var(--line); }
.pp .pv-sec { padding-bottom: 34px; }
.pp .pv-sec h2 { display: flex; align-items: baseline; gap: 14px; margin: 0 0 14px; font-size: 23px; letter-spacing: -0.4px; }
.pv-num { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: var(--sub); font-variant-numeric: tabular-nums; }

.pp .pv-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.pp .pv-list li { display: flex; align-items: flex-start; gap: 14px; margin: 0; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); font-size: 15.5px; line-height: 1.55; }
.pv-list .pv-ico { width: 34px; height: 34px; border-radius: 10px; }
.pv-list .pv-i { width: 18px; height: 18px; }
.pv-list li > span:last-child { padding-top: 5px; }

.pp .pv-note { margin: 16px 0 0; padding: 14px 18px; border-radius: 14px; border-left: 3px solid var(--accent); background: var(--accent-soft); color: var(--ink); font-weight: 500; }

.pp .pv-services { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pp .pv-services li { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--field); font-size: 13.5px; line-height: 1.4; }
.pv-services strong { font-size: 14.5px; color: var(--ink); }
.pp .pv-services.pv-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.pv-contact { display: flex; align-items: center; justify-content: space-between; gap: 20px 28px; flex-wrap: wrap; margin-top: 8px; padding: 30px 32px; border-radius: 24px; background: var(--toast-bg); color: var(--toast-text); }
.pp .pv-contact h2 { margin: 0 0 6px; font-size: 21px; color: var(--toast-text); }
.pp .pv-contact p { margin: 0; font-size: 15px; color: var(--toast-text); opacity: 0.86; max-width: 30em; }
.pp .pv-contact-btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 999px; background: var(--white); color: var(--paros-aegean-700); font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; }
.pp .pv-contact-btn:hover { color: var(--paros-aegean-900); }
[data-theme="dark"] .pp .pv-contact-btn { background: var(--accent); color: var(--accent-text); }

@media (max-width: 960px) {
  .pv-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pv-toc { display: none; }
  .pp .pv-glance, .pp .pv-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .pv-hero { padding: 34px 22px 28px; border-radius: 22px; }
  .pv-hero-mark { width: 190px; right: -30px; bottom: -26px; }
  .pp .pv-lede { font-size: 16.5px; }
  .pp .pv-glance { grid-template-columns: minmax(0, 1fr); margin-bottom: 40px; }
  .pp .pv-services.pv-3 { grid-template-columns: minmax(0, 1fr); }
  .pv-glance li { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 14px; padding: 16px; }
  .pv-glance .pv-ico { margin-bottom: 0; }
  .pv-glance strong { flex: 1 1 0; }
  .pv-glance .pv-txt { flex-basis: 100%; padding-left: 54px; }
  .pv-contact { padding: 26px 22px; }
  .pp .pv-contact-btn { white-space: normal; word-break: break-all; }
}


/* Paros Guide design tokens — imported from the Coming Soon bundle (Colors/Typography/Spacing) */
/* ------------------------------------------------------------------ *
 * Paros Guide — Colour tokens
 * Two schemes ship, both exposing the SAME semantic keys:
 *   • light  "Aegean blue"  — bright, sea-and-whitewash (default)
 *   • dark   "Midnight"     — deep slate + warm gold accent
 * Ported 1:1 from src/theme.ts (lightTheme / darkTheme).
 * Consumers get light by default; add data-theme="dark" on any
 * ancestor (or <html>) to switch.
 * ------------------------------------------------------------------ */

:root {
  /* — Raw brand ramp (Aegean) — */
  --paros-aegean-900: #0d2a40; /* deepest ink */
  --paros-aegean-700: #0e3a5e; /* toast / gradient top */
  --paros-aegean-500: #1c6ca1; /* PRIMARY accent */
  --paros-aegean-300: #6b94b3; /* muted / sub */
  --paros-aegean-100: #e9f1f8; /* tinted surface */
  --paros-aegean-050: #f4f8fb; /* page bg */

  /* — Category hues (shared across schemes) — */
  --cat-restaurants: #c2562f;
  --cat-bars:        #8a4fa3;
  --cat-beaches:     #1877a3; /* white chip text needs the darker shade */
  --cat-late-bites:  #caa53b;
  --cat-parties:     #d4357f;
  --cat-accommodation: #b08327;
  --cat-transfers:   #4a6b8a;
  --cat-private-boats: #0e8a86;

  /* — Event type hues — */
  /* Darker than the category hues: these are used as small text on the tints */
  --type-party:      #b02e69;
  --type-live-music: #7e4b95;
  --type-festival:   #276b52;
  --type-party-tint:      #fbe7f1;
  --type-live-music-tint: #f1e9f7;
  --type-festival-tint:   #e4f3ec;

  /* ===== Semantic tokens — LIGHT (Aegean) ===== */
  --accent:       #1c6ca1; /* primary action / interactive accent */
  --accent-text:  #ffffff; /* text/icon ON the accent fill */
  --accent-soft:  #e9f1f8; /* tinted accent surface (chips, wells) */

  --bg:       #f4f8fb; /* page background */
  --surface:  #ffffff; /* raised cards, sheets, tab bar */
  --field:    #f1f5f7; /* input fills / secondary buttons */
  --card:     #e9f1f8; /* info-card fill on detail page */

  --ink:   #0d2a40; /* primary heading text */
  --body:  #46596a; /* body copy */
  --sub:   #4a6f8c; /* muted labels / meta. Was #6b94b3 (aegean-300), only 3:1 on --bg; this is 5:1 */

  --line:   #dde8f0; /* hairline borders */
  --line-2: #e6eef4; /* softer dividers */
  --chip-border: #e6ecef;
  --chip-text:   #39505f;
  --field-icon:  #5f6e7a; /* also placeholder text, so it needs 4.5:1 on --field */

  --star:       #f4c150; /* rating star */
  --pink-badge: #d4357f; /* destructive / events accent */
  --pink-soft:  #fbe7f1;

  --toast-bg:    #0e3a5e;
  --toast-text:  #ffffff;
  --toast-check: #7ed0a8;
  --danger:      #e2435f; /* swipe-to-delete */

  --overlay: rgba(8, 28, 45, 0.42); /* dimmed sheet backdrop */
  --shadow-color: rgba(13, 42, 64, 0.14);
  --white: #ffffff;

  /* Frosted-glass fills for badges/tab bar over imagery */
  --glass: rgba(255, 255, 255, 0.88);
  --glass-tab: rgba(255, 255, 255, 0.6);
}

/* ===== Semantic tokens — DARK (Midnight) ===== */
[data-theme="dark"] {
  --accent:       #d9b46a; /* warm gold */
  --accent-text:  #12161c;
  --accent-soft:  #262b22;

  --bg:       #12161c;
  --surface:  #1b212a;
  --field:    #1c222b;
  --card:     #1b212a;

  --ink:   #f4f1e8;
  --body:  #aab1bd;
  --sub:   #8f98a5; /* was #7d8694, under 4.5:1 on --surface */

  --line:   #2a313b;
  --line-2: #333b46;
  --chip-border: #2a313b;
  --chip-text:   #cdd3dd;
  --field-icon:  #8f98a5;

  --star:       #d9b46a;
  --pink-badge: #e0689f;
  --pink-soft:  #2c1f28;

  --toast-bg:    #262d38;
  --toast-text:  #f4f1e8;
  --toast-check: #7ed0a8;
  --danger:      #e2435f;

  --overlay: rgba(4, 7, 11, 0.62);
  --shadow-color: rgba(0, 0, 0, 0.5);
  --white: #1b212a;

  --glass: rgba(20, 24, 30, 0.82);
  --glass-tab: rgba(27, 33, 42, 0.72);
}

/* ------------------------------------------------------------------ *
 * Paros Guide — Typography tokens
 * Display and body are both Manrope: one family keeps the font download
 * small, and unlike the previous grotesks it has Greek letters, so the
 * Greek text no longer falls back to a system font. The two tokens stay
 * separate so headings and copy can diverge again later.
 * ------------------------------------------------------------------ */

:root {
  --font-display: 'Manrope', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, sans-serif;

  /* Weights */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */

  /* Type scale — sizes lifted verbatim from the app screens.
     Names describe role, not a strict modular scale. */
  --fs-display:   44px; /* detail-page place name (Schibsted 500, -1.2 tracking) */
  --fs-hero:      35px; /* onboarding headline */
  --fs-screen-title: 27px; /* screen H1 (Explore / Trip / Events) */
  --fs-title:     24px; /* auth card title */
  --fs-section:   18px; /* section heading */
  --fs-h2:        16px; /* card / event name */
  --fs-body:      15px; /* body copy */
  --fs-sub:       13.5px; /* subtitles / meta */
  --fs-label:     12.5px; /* labels */
  --fs-caption:   11.5px; /* captions */
  --fs-eyebrow:   11px; /* uppercase eyebrow / category */
  --fs-micro:     10px; /* pill text */

  /* Line-heights used by prose */
  --lh-body:   25px; /* 15px body about-text */
  --lh-tight:  1.06; /* @kind font */

  /* Letter-spacing */
  --ls-tight:   -0.4px; /* screen titles */
  --ls-display: -1.2px; /* big place name */
  --ls-eyebrow: 2px;    /* uppercase eyebrow */
  --ls-caps:    0.6px;  /* small uppercase category */
}

/* ------------------------------------------------------------------ *
 * Paros Guide — Spacing, radius & elevation tokens
 * Screens use an 18–20px horizontal gutter and 12–16px inter-block
 * rhythm rather than a strict 4/8 grid — values are lifted verbatim.
 * ------------------------------------------------------------------ */

:root {
  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 18px;  /* screen gutter */
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --gutter:  18px;  /* standard screen horizontal padding */
  --block:   19px;  /* vertical gap between screen sections */

  /* Radii — the app is generously rounded */
  --r-xs:  8px;   /* small pills / badges */
  --r-sm:  11px;  /* chips, small tiles */
  --r-md:  14px;  /* input fields, thumbnails */
  --r-lg:  16px;  /* buttons, info cards */
  --r-xl:  18px;  /* listing cards, list rows */
  --r-2xl: 22px;  /* feature cards, hero, day summary */
  --r-3xl: 28px;  /* floating tab bar, sheet tops */
  --r-pill: 999px;

  /* Elevation — soft, low-opacity, cool-tinted shadows.
     Cards sit on a hairline border + a faint drop shadow. */
  --shadow-card:  0 2px 10px var(--shadow-color);
  --shadow-row:   0 2px 8px rgba(13, 42, 64, 0.05);
  --shadow-fab:   0 6px 16px var(--shadow-color);
  --shadow-tab:   0 10px 34px rgba(13, 42, 64, 0.18);
  --shadow-sheet: 0 -8px 30px rgba(0, 0, 0, 0.22);
  --shadow-accent: 0 4px 12px rgba(28, 108, 161, 0.30);
}



/* ==================================================================== *
 * App showcase — the design section from the Coming Soon bundle, laid  *
 * out at the site's native scale and made responsive: the two columns  *
 * stack on narrow screens, and the fixed 640x470 phone illustration    *
 * zooms (via main.js) to fit its column.                               *
 * ==================================================================== */
.pg-appshowcase-frame { width: 100%; overflow-x: clip; }
#pg-appshowcase-board { position: relative; max-width: 1180px; margin: 0 auto; transform: none !important; }
#pg-appshowcase-board > div { padding: 104px 44px !important; }           /* section gutters, matches the site */
#pg-appshowcase-board [data-dc-tpl="25"] { transform-origin: top left; } /* phone cluster */
#pg-appshowcase-board [data-dc-tpl="35"] { min-width: 0; }               /* copy column can shrink */

@media (max-width: 1080px) {
  /* stack: phones above, copy below */
  #pg-appshowcase-board [data-dc-tpl="24"] { flex-direction: column; gap: 44px !important; }
  #pg-appshowcase-board [data-dc-tpl="35"] { width: 100%; flex: 1 1 auto !important; }
}

/* ---- interactive phone fan ----
 * main.js drives the geometry (a single transform per mockup); everything
 * here is affordance only. Rules key off [data-slot], never the mockups'
 * [data-dc-tpl] ids, because which mockup sits in which slot changes as
 * soon as the visitor clicks. The initial slots are set in the markup, so
 * the phone layout below still resolves if the script never runs. */
/* The side phones used to be dimmed to 0.9 opacity; that alone pushed their
   small text under the 4.5:1 contrast minimum, so depth comes from scale and
   shadow only. */
#pg-appshowcase-board [data-slot]:focus { outline: none; }
#pg-appshowcase-board [data-slot]:focus-visible { outline: 3px solid var(--accent); outline-offset: 7px; border-radius: 30px; }

/* Store cards in the showcase's copy column. Fixed width rather than
   min-width: the column is only ~396px at 1280, so the pair wraps to two
   rows there — matching widths keep that stack tidy instead of ragged.
   Sizing lives here, not in the inline style, so the phone breakpoint can
   override it without !important. */
.pg-store-card { width: 214px; }

/* the pill switcher only exists for the phone layout */
#pg-mock-tabs { display: none; gap: 8px; justify-content: center; flex-wrap: wrap; }
#pg-mock-tabs button {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--body);
  cursor: pointer;
  touch-action: manipulation;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
#pg-mock-tabs button[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}

@media (prefers-reduced-motion: reduce) {
  #pg-appshowcase-board [data-slot],
  #pg-appshowcase-board [data-slot] > div,
  #pg-mock-tabs button { transition: none !important; }
}


/* ==================================================================== *
 * Phones & small tablets
 *
 * The page is authored almost entirely with inline styles (the showcase
 * came out of a design bundle that way), so every override below has to
 * carry !important. Breakpoints:
 *   <= 900px  large phone / small tablet — tighter gutters, smaller type
 *   <= 640px  phone — single phone mockup, stacked footer & waitlist
 *   <= 380px  small phone — compact header
 * ==================================================================== */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
#pg-lang-toggle, #pg-theme-toggle { touch-action: manipulation; }

/* ---- dynamic viewport units ----
 * On mobile `100vh` is the LARGEST viewport (browser toolbar retracted),
 * so a 100vh hero hides its own scroll cue behind the toolbar on load.
 * The hero switches to `svh` (smallest — always fully visible); the
 * sticky map scene stays on `lvh` so it still covers the screen once the
 * toolbar retracts mid-scroll. Both equal `vh` on desktop. */
@supports (height: 100svh) {
  .pg-hero  { height: 100svh !important; }
  .pg-stage { height: 100lvh !important; }
}

@media (max-width: 900px) {
  /* ---- header ---- */
  .pg-header {
    padding: 18px 20px !important;
    padding-top: calc(18px + env(safe-area-inset-top)) !important;
    padding-left: calc(20px + env(safe-area-inset-left)) !important;
    padding-right: calc(20px + env(safe-area-inset-right)) !important;
    gap: 12px;
  }
  .pg-brand { min-width: 0; }
  .pg-brand span { font-size: 13px !important; letter-spacing: 0.18em !important; }
  .pg-brand svg { width: 35px; height: 26px; }
  /* "Coming soon" is said again by the closing section and the store
     badges — drop it here rather than let it crush the toggles. */
  .pg-badge { display: none !important; }
  .pg-header-actions { flex: 0 0 auto; }

  /* ---- hero ---- */
  .pg-hero { min-height: 480px !important; }
  .pg-hero-copy { padding: 0 20px !important; }
  .pg-hero-copy [data-i18n="hero_kicker"] {
    letter-spacing: 2px !important;
    margin-bottom: 16px !important;
  }
  .pg-hero-copy h1 { font-size: clamp(36px, 10.5vw, 48px) !important; letter-spacing: -1.6px !important; }
  .pg-hero-copy p  { font-size: 16px !important; margin-top: 20px !important; }
  .pg-hero-foot { padding-bottom: calc(26px + env(safe-area-inset-bottom)) !important; }

  /* ---- map journey ----
   * Captions sit clear of the bottom browser toolbar (the stage is sized
   * in lvh, so its last ~80px can be under the chrome). */
  #pg-track { height: 340vh !important; }
  .pg-cap {
    left: 20px !important;
    right: 20px !important;
    bottom: calc(84px + env(safe-area-inset-bottom)) !important;
  }
  .pg-cap > div:first-child { letter-spacing: 2px !important; margin-bottom: 8px !important; }
  .pg-cap > div:last-child  { font-size: clamp(30px, 8.5vw, 44px) !important; letter-spacing: -1.2px !important; }
  .pg-rail { right: 16px !important; height: 120px !important; }

  /* ---- app showcase ---- */
  #pg-appshowcase-board > div { padding: 76px 22px !important; }
  .pg-sec-theme { top: 24px; right: 22px; }
  #pg-appshowcase-board [data-dc-tpl="35"] h2 { font-size: 29px !important; line-height: 33px !important; margin-bottom: 22px !important; }
  /* waitlist field + button wrap instead of squeezing to nothing */
  #pg-appshowcase-board #pg-waitlist { flex-wrap: wrap !important; }
  #pg-appshowcase-board #pg-waitlist > label { min-width: 200px !important; }
  /* once it wraps to its own row, the CTA fills it rather than sitting
     stranded at a third of the width */
  #pg-appshowcase-board #pg-waitlist > button { flex: 1 1 auto; justify-content: center; }

  /* ---- footer ---- */
  .pg-footerband > div { padding: 0 20px 36px !important; }
  .pg-footer { justify-content: center !important; text-align: center; }
}

@media (max-width: 640px) {
  #pg-appshowcase-board > div { padding: 60px 20px !important; }
  .pg-sec-theme { top: 18px; right: 20px; }
  #pg-appshowcase-board [data-dc-tpl="24"] { gap: 34px !important; }

  /* One phone instead of three: the fan of three mockups scales down to
     ~105px each on a phone, where the screens inside read as mush. Show
     whichever mockup is currently centred at native size, drop the two on
     the flanks, and let #pg-mock-tabs switch between them. This also means
     the cluster no longer needs the zoom scaler in main.js. */
  #pg-appshowcase-board [data-dc-tpl="25"] { width: 214px !important; height: 437px !important; }
  #pg-appshowcase-board [data-slot="left"],
  #pg-appshowcase-board [data-slot="right"] { display: none !important; }
  #pg-appshowcase-board [data-slot="center"] {
    left: 0 !important; top: 0 !important; right: auto !important;
    transform: none !important;      /* park it at the origin, not its fan position */
    opacity: 1 !important;
  }
  #pg-mock-tabs { display: flex !important; margin-top: -14px; }

  /* store cards: full-width rows rather than two orphaned cards */
  .pg-store-card { width: 100%; max-width: 320px; }
}

@media (max-width: 380px) {
  .pg-header { padding-left: calc(14px + env(safe-area-inset-left)) !important; padding-right: calc(14px + env(safe-area-inset-right)) !important; }
  .pg-brand span { font-size: 12px !important; letter-spacing: 0.14em !important; }
  .pg-brand { gap: 9px !important; }
  .pg-header-actions { gap: 8px !important; }
}

/* Short landscape phones: the hero has no room for its full stack. */
@media (max-height: 520px) and (orientation: landscape) {
  .pg-hero { min-height: 420px !important; }
  .pg-hero-copy h1 { font-size: clamp(30px, 5vw, 44px) !important; }
  .pg-hero-copy p { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  [style*="pg-hero-zoom"], [style*="pg-bob"] { animation: none !important; }
}

/* ---- app showcase: the three feature icons ---- */
/* They take the accent colour from their tile instead of a fixed blue, so
   they are Aegean blue in light mode and gold in dark (--accent). */
.pg-feat-ico { color: var(--accent); }

/* ---- waitlist form ---- */
.pg-wl-field { transition: border-color .15s, box-shadow .15s; }
.pg-wl-field:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
#pg-wl-email::placeholder { color: var(--field-icon); opacity: 1; }
#pg-waitlist button { transition: filter .15s, opacity .15s; }
#pg-waitlist button:hover { filter: brightness(1.08); }
#pg-waitlist button:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
#pg-waitlist button:disabled { opacity: .65; cursor: progress !important; filter: none; }
#pg-wl-status[data-state="ok"] { color: #1f8a5b !important; }
#pg-wl-status[data-state="error"] { color: #c0392b !important; }
.pg-wl-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }