/* Stamp Days: the app's own world on the web. Brand-navy bands, warm passport paper,
   stamp green as the one action colour, and the app's PassportStamp pressed in country inks.
   Signika for text, rounded for stamp codes, mono for dates and counts. */

@font-face {
  font-family: "Signika";
  src: url("assets/fonts/signika-latin.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
  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;
}
@font-face {
  font-family: "Signika";
  src: url("assets/fonts/signika-latin-ext.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("assets/fonts/jetbrains-mono-normal-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("assets/fonts/jetbrains-mono-normal-latin-ext.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4;
}

:root {
  /* Navy bands: the app's hero card and icon */
  --night: #0E1633;
  --navy: #16224F;
  --navy-2: #1E2F6E;
  --navy-3: #2B3F86;
  --rule-d: #34478D;
  --text-d: #F4F2EC;
  --mute-d: #BBC5E8;

  /* Stamp green: the plane on the icon, the one action colour on navy */
  --accent: #5DD9A8;
  --accent-hi: #7FE5BC;
  --on-accent: #0B1A3A;

  /* Paper: the app's warm passport-paper ground */
  --paper: #F4F2EC;
  --paper-2: #E9E6DC;
  --paper-blue: #E4E9F8;
  --blue: #2F51C2;
  --text: #141821;
  --mute: #545A66;
  --rule: #D8D4C8;

  /* Safety colours, used by the privacy signs only */
  --prohibit: #C8102E;
  --safe: #13875F;

  /* Country inks, the app's own: on paper, and on navy (-d) */
  --ink-blue: #2F51C2;      --ink-blue-d: #8AA6FF;
  --ink-vermilion: #C2410C; --ink-vermilion-d: #FF9466;
  --ink-green: #13875F;     --ink-green-d: #5DD9A8;
  --ink-violet: #7C3AED;    --ink-violet-d: #B79BFF;
  --ink-ochre: #A16207;     --ink-ochre-d: #F5C451;
  --ink-teal: #0E7490;      --ink-teal-d: #5BD3EA;
  --ink-magenta: #B91C5C;   --ink-magenta-d: #FF7EB0;
  --ink-slate: #4D5B7C;     --ink-slate-d: #A9B6D6;

  --f: "Signika", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --rounded: ui-rounded, "SF Pro Rounded", "Signika", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --wrap: 1320px;
  --gutter: clamp(16px, 4vw, 48px);
  --section: clamp(72px, 9vw, 128px);
  --radius: 6px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; scrollbar-color: var(--rule-d) var(--night); }
body {
  margin: 0;
  background: var(--night);
  color: var(--text-d);
  font: 400 1.0625rem/1.55 var(--f);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  caret-color: var(--accent);
  -webkit-tap-highlight-color: transparent;
}
::selection { background: var(--accent); color: var(--on-accent); }
img, video, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 600; text-wrap: balance; letter-spacing: -0.015em; }
p { text-wrap: pretty; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 2px; }
a:hover { text-decoration-color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.flag { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; line-height: 1; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--accent); color: var(--on-accent); font-weight: 600; border-radius: var(--radius); text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- Strip (header) ---------- */
.strip {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--night) 94%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--rule-d);
}
.strip-in { display: flex; align-items: center; gap: 24px; min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1.125rem; text-decoration: none; }
.brand img { border-radius: 8px; }
.strip-nav { display: flex; gap: 4px; margin-left: auto; }
.strip-nav a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--radius);
  color: var(--mute-d); text-decoration: none; font-weight: 500;
  transition: color .2s, background-color .2s;
}
.strip-nav a svg { width: 18px; height: 18px; color: var(--accent); }
.strip-cta {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px;
  background: var(--accent); color: var(--on-accent);
  border-radius: var(--radius); font-weight: 600; text-decoration: none;
  transition: background-color .2s;
}
.strip-cta svg { width: 16px; height: 16px; }
.strip-cta { transition: background-color .2s, transform .16s var(--ease-out); }
.strip-cta:active { transform: scale(.97); }
.strip-cta:focus-visible { outline-color: var(--text-d); }

/* ---------- Hero: the app's passport stamps press in around the phone ---------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(70% 90% at 78% 30%, rgb(62 91 181 / .55), transparent 70%),
    linear-gradient(160deg, var(--navy-2) 0%, var(--navy) 55%, var(--night) 100%);
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
  min-height: min(820px, calc(100svh - 60px));
  padding: clamp(40px, 6vw, 88px) 0;
}
.hero-copy { max-width: 640px; }
.h1-accent { color: var(--accent); }
.hero-stage { position: relative; display: grid; place-items: center; min-height: 640px; }
.ring { position: absolute; width: min(560px, 100%); aspect-ratio: 1; color: rgb(244 242 236 / .13); animation: spin 120s linear infinite; }
.hero-stage .phone { position: relative; z-index: 1; width: 290px; }
.stamp-svg { display: block; overflow: visible; color: var(--ink); }
.stamp-svg text { fill: currentColor; text-anchor: middle; }
.stamp-code { font: 800 27px/1 var(--rounded); letter-spacing: .02em; }
.stamp-cap { font: 700 10.5px/1 var(--mono); letter-spacing: .04em; }
.hero-stage .stamp-svg {
  position: absolute; z-index: 2; width: var(--s, 112px); left: var(--x); top: var(--y);
  transform: rotate(var(--tilt));
  filter: drop-shadow(0 6px 14px rgb(5 10 30 / .35));
}
.pict { flex: none; display: grid; place-items: center; width: clamp(40px, 3.4vw, 52px); aspect-ratio: 1; background: var(--accent); color: var(--on-accent); border-radius: 4px; }
.pict svg { width: 68%; height: 68%; }
h1 { font-size: clamp(2.5rem, 5.2vw, 4.5rem); line-height: 1; letter-spacing: -0.03em; }
.lede { margin-top: 24px; font-size: clamp(1.125rem, 1.5vw, 1.3125rem); color: var(--mute-d); max-width: 54ch; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }

.panel-btn {
  display: inline-grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  min-height: 66px; padding: 10px 18px;
  background: var(--accent); color: var(--on-accent);
  border-radius: var(--radius); text-decoration: none;
  box-shadow: 0 1px 0 rgb(255 255 255 / .35) inset, 0 14px 28px -16px rgb(93 217 168 / .45);
  transition: background-color .2s, transform .16s var(--ease-out);
}
.panel-btn .apple { width: 26px; height: 26px; }
.panel-btn span { display: grid; font-size: 1.375rem; font-weight: 600; line-height: 1.05; }
.panel-btn small { font-size: .75rem; font-weight: 500; letter-spacing: .01em; }
.panel-btn .go { width: 24px; height: 24px; margin-left: 10px; transition: transform .25s var(--ease-out); }
.panel-btn:active { transform: scale(.98); }
.panel-btn:focus-visible { outline-color: var(--text-d); }

.follow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: underline; text-decoration-color: rgb(93 217 168 / .7); }
.follow svg { width: 18px; height: 18px; color: var(--accent); transition: transform .25s var(--ease-out); }

.facts-inline { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px; color: var(--mute-d); font-size: .9375rem; }
.facts-inline li { display: inline-flex; align-items: center; gap: 7px; }
.facts-inline svg { width: 17px; height: 17px; color: var(--accent); }

.phone {
  position: relative; width: 300px; max-width: 100%;
  padding: 7px; border-radius: 44px;
  background: #0A0B0D;
  box-shadow: 0 0 0 1px #3A404A, 0 0 0 4px #15171B, 0 40px 80px -30px rgb(0 0 0 / .85);
}
.phone img, .phone video { width: 100%; height: auto; border-radius: 37px; background: #F4F2EC; }
.phone video { aspect-ratio: 480 / 1043; object-fit: cover; object-position: 50% 0; }
.who-media .phone { overflow: hidden; }
.who-media .phone video { transform: scale(1.3); transform-origin: 50% 0; }
.who-media .phone::after { content: ""; position: absolute; inset: 7px; border-radius: 37px; box-shadow: 0 0 0 9px #0A0B0D; pointer-events: none; }


/* ---------- Directory ---------- */
.directory { position: relative; z-index: 1; background: var(--navy); border-top: 1px solid var(--rule-d); border-bottom: 1px solid var(--rule-d); }
.directory ul { display: grid; grid-template-columns: repeat(4, 1fr); }
.directory li {
  display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: start;
  padding: 26px 24px 26px 0;
}
.directory li + li { padding-left: 24px; border-left: 1px solid var(--rule-d); }
.directory svg { grid-row: span 2; width: 28px; height: 28px; color: var(--accent); margin-top: 2px; }
.directory b { font-weight: 600; font-size: 1.0625rem; }
.directory span { color: var(--mute-d); font-size: .9375rem; line-height: 1.4; }

/* ---------- Floor sections ---------- */
.floor { background: var(--paper); color: var(--text); padding: var(--section) 0; }
.floor + .floor { padding-top: 0; }
.floor a:hover { text-decoration-color: var(--text); }
.floor :focus-visible { outline-color: var(--text); }
.head { max-width: 720px; margin-bottom: clamp(36px, 4.5vw, 56px); }
.head h2 { font-size: clamp(1.875rem, 3.4vw, 2.75rem); line-height: 1.08; letter-spacing: -0.02em; }
.head p { margin-top: 16px; font-size: clamp(1.0625rem, 1.3vw, 1.125rem); color: var(--mute); max-width: 60ch; }
.head-dark p { color: var(--mute-d); }

/* How it counts: a route with three stops */
.route { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); }
.route::before { content: ""; position: absolute; left: 28px; right: 0; top: 26px; height: 4px; background: var(--navy-2); border-radius: 2px; }
.route li { position: relative; }
.route-pict { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--navy-2); color: var(--accent); box-shadow: 0 0 0 6px var(--paper); }
.route-pict svg { width: 26px; height: 26px; }
.route h3 { margin-top: 24px; font-size: clamp(1.25rem, 1.8vw, 1.375rem); line-height: 1.2; }
.route p { margin-top: 10px; color: var(--mute); max-width: 42ch; }
.route .rule-text { margin-top: 16px; font-family: var(--mono); font-size: .8125rem; color: var(--text); padding-top: 12px; border-top: 1px solid var(--rule); }

/* ---------- Passport page: stamps press in as it scrolls into view ---------- */
.passport { border-top: 1px solid var(--rule); padding-top: var(--section) !important; }
.passport-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.passport .head { margin-bottom: 0; }
.passport-grid > *, .hero-grid > *, .gate-in > *, .who-grid > *, .faq-grid > *, .dep-body > * { min-width: 0; }
.page-facts { margin-top: 32px; display: grid; }
.page-facts li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--rule); }
.page-facts li:last-child { border-bottom: 1px solid var(--rule); }
.page-facts svg { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--paper-blue); color: var(--blue); }
.page-facts b { display: block; font-size: 1.125rem; font-weight: 600; }
.page-facts span { color: var(--mute); }
.page {
  position: relative; margin: 0 0 40px;
  padding: clamp(24px, 3vw, 40px) clamp(20px, 3vw, 40px) 0;
  background-color: #FBFAF6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%232F51C2' stroke-opacity='.07'%3E%3Ccircle cx='120' cy='120' r='30'/%3E%3Ccircle cx='120' cy='120' r='60'/%3E%3Ccircle cx='120' cy='120' r='90'/%3E%3Ccircle cx='120' cy='120' r='120'/%3E%3Ccircle cx='0' cy='0' r='60'/%3E%3Ccircle cx='240' cy='0' r='60'/%3E%3Ccircle cx='0' cy='240' r='60'/%3E%3Ccircle cx='240' cy='240' r='60'/%3E%3C/g%3E%3C/svg%3E");
  border-radius: 22px;
  box-shadow: 0 1px 0 rgb(255 255 255 / .8) inset, 0 0 0 1px rgb(30 47 110 / .08), 0 40px 80px -40px rgb(30 47 110 / .35);
}
.page-tag { position: absolute; top: 16px; right: 18px; padding: 4px 10px; border-radius: 999px; background: var(--paper-blue); color: var(--blue); font-size: .8125rem; font-weight: 600; }
.page-stamps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 2vw, 24px) clamp(8px, 1.6vw, 20px); padding-top: 28px; }
.page-stamps li { display: grid; justify-items: center; gap: 8px; text-align: center; }
.page-stamps .stamp-svg { width: 100%; max-width: 128px; transform: rotate(var(--tilt)); }
.page-stamps small { font-size: .8125rem; font-weight: 600; color: var(--mute); }
.page-stamps .pair { position: relative; width: 100%; max-width: 128px; }
.page-stamps .pair { aspect-ratio: 1; }
.page-stamps .pair .stamp-svg { position: absolute; width: 62%; left: 0; top: 0; }
.page-stamps .pair .stamp-svg + .stamp-svg { left: auto; top: auto; right: 0; bottom: 0; }
.stamp-missing { opacity: .8; }
.stamp-missing use { stroke-dasharray: 4 5; }
.mrz { margin: clamp(20px, 3vw, 32px) calc(-1 * clamp(20px, 3vw, 40px)) 0; padding: 14px clamp(20px, 3vw, 40px) 18px; border-top: 1px dashed var(--rule); font: 500 clamp(.6875rem, 1vw, .875rem)/1.5 var(--mono); letter-spacing: .18em; color: #676D78; white-space: nowrap; overflow: hidden; }
.page figcaption { position: absolute; left: 0; right: 0; bottom: -34px; text-align: center; color: var(--mute); font-size: .875rem; }

/* ---------- Concourse (features) ---------- */
.concourse { background: var(--navy); padding-top: var(--section); }
.gate { border-top: 1px solid var(--rule-d); }
.gate-in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "head head" "copy media";
  column-gap: clamp(32px, 6vw, 96px); row-gap: clamp(28px, 3vw, 40px);
  align-items: center; padding: clamp(40px, 5vw, 64px) 0;
}
.gate:nth-of-type(even) .gate-in { grid-template-areas: "head head" "media copy"; }
.gate-head {
  grid-area: head; display: flex; align-items: center; gap: clamp(12px, 1.4vw, 18px);
  padding: 12px clamp(16px, 2vw, 24px) 12px 12px;
  background: var(--navy-2); border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .07);
  font-size: clamp(1.25rem, 1.6vw, 1.375rem); line-height: 1.2;
}
.gate-head .pict { width: clamp(44px, 3.6vw, 56px); }
.gate-code { flex: none; padding: 3px 8px; border: 1.5px solid var(--accent); border-radius: 3px; color: var(--accent); font-size: .8125rem; font-weight: 700; }
.gate-name { min-width: 0; }
.gate-arrow { flex: none; margin-left: auto; width: clamp(28px, 2.6vw, 40px); height: auto; aspect-ratio: 1; color: var(--accent); }
.gate:nth-of-type(even) .gate-arrow { transform: scaleX(-1); }
.gate-copy { grid-area: copy; }
.gate-media { grid-area: media; }
.gate-lead { font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; max-width: 20ch; text-wrap: balance; }
.gate-copy > p:not(.gate-lead) { margin-top: 16px; color: var(--mute-d); font-size: 1.125rem; max-width: 52ch; }
.ticks { margin-top: 22px; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 30px; color: var(--text-d); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 18px; height: 18px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pro {
  display: inline-block; vertical-align: .12em; margin-left: 6px;
  padding: 2px 7px 1px; border-radius: 3px;
  background: var(--accent); color: var(--on-accent);
  font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4;
}
.gate-head .pro { font-size: .75rem; vertical-align: .3em; }
.gate-media { display: flex; justify-content: center; }
.gate-media .phone { width: 280px; }

/* App-UI illustrations keep the app's own look, mounted on the concourse wall */
.import { display: flex; align-items: center; gap: 18px; }
.import-photos { display: grid; grid-template-columns: repeat(2, 64px); gap: 8px; }
.import-photos i { display: block; aspect-ratio: 1; border-radius: 10px; background: var(--bg); box-shadow: 0 0 0 1px rgb(255 255 255 / .08); }
.import-arrow { width: 32px; height: 32px; color: var(--accent); flex: none; }
.import-sheet { width: 260px; padding: 18px; background: #F4F2EC; color: #17191D; border-radius: 22px; box-shadow: 0 30px 60px -28px rgb(0 0 0 / .8); }
.import-head { font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: #4A4F58; margin-bottom: 10px; }
.trip { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; background: #fff; border-radius: 12px; margin-top: 8px; }
.trip .flag { font-size: 1.5rem; }
.trip b { display: block; font-weight: 600; }
.trip small { display: block; color: #5A606A; font-size: .8125rem; }
.box { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #B9BEC7; }
.box.on { background: var(--ink-blue); border-color: var(--ink-blue); color: #fff; }
.box svg { width: 14px; height: 14px; }
.import-btn { margin-top: 14px; padding: 12px; text-align: center; background: var(--ink-blue); color: #fff; font-weight: 600; border-radius: 12px; }

.widgets { display: grid; gap: 18px; justify-items: center; }
.lock {
  width: 300px; padding: 22px 20px 20px; border-radius: 30px; text-align: center; color: #fff;
  background: radial-gradient(120% 90% at 20% 10%, #31489A, #1E2F6E 60%, #121A3D);
  box-shadow: 0 30px 60px -28px rgb(0 0 0 / .8);
}
.lock-inline { font-size: .875rem; font-weight: 500; opacity: .92; }
.lock-time { font-size: 4.5rem; font-weight: 600; line-height: 1; letter-spacing: -0.03em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.lock-acc { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.lock-acc span { padding: 6px 12px; border-radius: 12px; background: rgb(255 255 255 / .16); font-size: .8125rem; font-weight: 600; }
.w-row { display: flex; gap: 14px; }
.w-small, .w-medium { background: #F4F2EC; color: #17191D; border-radius: 22px; padding: 14px; box-shadow: 0 24px 48px -26px rgb(0 0 0 / .8); }
.w-small { width: 128px; height: 128px; display: grid; align-content: space-between; }
.w-small .flag, .w-medium .flag { font-size: 1.75rem; }
.w-small b, .w-medium b { display: block; font-weight: 600; font-size: 1.0625rem; line-height: 1.1; }
.w-small small, .w-medium small { color: var(--ink-blue); font-weight: 600; font-size: .875rem; }
.w-medium { width: 272px; height: 128px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 12px; }
.w-medium > div { display: grid; gap: 4px; }
.w-medium dl { display: grid; gap: 8px; }
.w-medium dl div { background: #fff; border-radius: 12px; padding: 6px 10px; }
.w-medium dt { font-weight: 700; font-size: 1.125rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.w-medium dd { font-size: .75rem; color: #5A606A; }

/* ---------- Who it's for ---------- */
.who { border-top: 1px solid var(--rule); padding-top: var(--section) !important; }
.who-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.who-list { display: grid; gap: 0; }
.who-list li { display: grid; grid-template-columns: 52px 1fr; gap: 20px; padding: 24px 0; border-top: 1px solid var(--rule); }
.who-list li:last-child { border-bottom: 1px solid var(--rule); }
.who-list svg { width: 52px; height: 52px; padding: 12px; border-radius: 4px; background: var(--navy-2); color: var(--accent); }
.who-list h3 { font-size: clamp(1.25rem, 1.8vw, 1.375rem); line-height: 1.2; }
.who-list p { margin-top: 6px; color: var(--mute); max-width: 58ch; }
.who-media { display: flex; justify-content: center; }
.who-media .phone { width: 280px; }

/* ---------- Privacy: prohibition signs ---------- */
.security { background: var(--navy); padding: var(--section) 0; }
.prohibit { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule-d); border: 1px solid var(--rule-d); border-radius: var(--radius); overflow: hidden; }
.prohibit li { display: grid; gap: 8px; align-content: start; padding: clamp(24px, 2.6vw, 36px); background: var(--navy); }
.prohibit b { margin-top: 14px; font-size: 1.375rem; font-weight: 600; }
.prohibit li > span:last-child { color: var(--mute-d); }
.no, .yes { position: relative; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; color: var(--text-d); }
.no { border: 7px solid var(--prohibit); }
.no::after { content: ""; position: absolute; width: 7px; height: 100%; background: var(--prohibit); transform: rotate(-45deg); }
.yes { background: var(--safe); }
.no svg, .yes svg { width: 34px; height: 34px; }
.security-link { margin-top: 28px; }

/* ---------- Notice: the honest limits ---------- */
.notice { background: var(--paper-blue); color: var(--navy-2); padding: clamp(48px, 6vw, 80px) 0; }
.notice-in { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
.notice-pict { color: var(--blue); }
.notice-pict svg { width: clamp(52px, 6vw, 76px); height: auto; aspect-ratio: 1; }
.notice h2 { font-size: clamp(1.625rem, 2.8vw, 2.375rem); line-height: 1.1; }
.notice ul { margin-top: 20px; display: grid; gap: 12px; max-width: 64ch; }
.notice li { position: relative; padding-left: 26px; font-size: 1.0625rem; }
.notice li::before { content: ""; position: absolute; left: 0; top: .72em; width: 14px; height: 3px; background: var(--blue); border-radius: 2px; }

/* ---------- Fares ---------- */
.board { background: var(--navy-2); color: var(--text-d); border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 60px -36px rgb(0 0 0 / .6); }
.board table { width: 100%; border-collapse: collapse; }
.board th, .board td { padding: 16px clamp(16px, 2.4vw, 32px); border-bottom: 1px solid var(--rule-d); }
.board thead th { padding-top: 28px; padding-bottom: 24px; text-align: left; vertical-align: bottom; }
.board thead th:not(:first-child), .board td { text-align: center; width: 22%; }
.fare-name { display: block; font-size: .875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mute-d); }
.fare-price { display: block; margin-top: 6px; font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.fare-price small { font-size: .9375rem; font-weight: 500; margin-left: 6px; letter-spacing: 0; color: var(--mute-d); }
.col-pro { background: rgb(93 217 168 / .08); }
.board thead .col-pro { background: var(--accent); color: var(--on-accent); }
.board thead .col-pro .fare-name, .board thead .col-pro .fare-price small { color: #0B3D2A; }
.board tbody th { text-align: left; font-weight: 400; color: var(--text-d); }
.board td svg { width: 24px; height: 24px; margin-inline: auto; color: var(--accent); }
.board td svg.off { color: var(--rule-d); }
.board td.num { font-weight: 600; font-variant-numeric: tabular-nums; }
.board tbody tr:last-child th, .board tbody tr:last-child td { border-bottom: 0; }
.board tbody tr { transition: background-color .2s; }
.board-foot { padding: 18px clamp(16px, 2.4vw, 32px); border-top: 1px solid var(--rule-d); color: var(--mute-d); font-size: .9375rem; }

/* ---------- Information desk ---------- */
.faq { border-top: 1px solid var(--rule); padding-top: var(--section) !important; }
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-grid .head { position: sticky; top: 100px; }
.faq-list details { border-top: 1px solid var(--rule); }
.faq-list details:last-child { border-bottom: 1px solid var(--rule); }
.faq-list summary {
  position: relative; list-style: none; cursor: pointer;
  padding: 22px 48px 22px 0; font-size: 1.1875rem; font-weight: 600; line-height: 1.3;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 22px; height: 22px; margin-top: -11px;
  background: var(--text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v15M6 13l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v15M6 13l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s var(--ease-out);
}
.faq-list details[open] summary::after { transform: rotate(180deg); }
.faq-list details p { padding: 0 48px 24px 0; color: var(--mute); max-width: 68ch; }

/* ---------- Departures ---------- */
.departures { background: var(--night); padding: var(--section) 0; }
.dep-sign { padding: clamp(24px, 3vw, 44px); background: var(--navy-2); border-radius: var(--radius); box-shadow: inset 0 1px 0 rgb(255 255 255 / .07); }
.dep-sign h2 { font-size: clamp(2.25rem, 4.6vw, 3.5rem); line-height: 1.02; letter-spacing: -0.025em; }
.dep-pict { display: inline-grid; width: .82em; margin-right: .28em; vertical-align: -.06em; }
.gates-dir { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1px; margin-bottom: clamp(48px, 6vw, 80px); background: var(--rule-d); border: 1px solid var(--rule-d); border-radius: var(--radius); overflow: hidden; }
.gates-dir a { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 14px 18px; background: var(--navy); color: var(--text-d); font-weight: 600; text-decoration: none; transition: background-color .16s; }
.gates-dir .mono { color: var(--accent); font-size: .8125rem; font-weight: 700; }
.gates-dir svg { width: 18px; height: 18px; margin-left: auto; color: var(--accent); }
.gates-dir .pro { margin-left: 2px; }
.gates-dir a:active { background: var(--navy-2); }
.dep-body { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; margin-top: clamp(32px, 4vw, 48px); }
.dep-body .lede { margin-top: 0; }
.dep-meta { margin-top: 20px; font-size: .8125rem; color: var(--mute-d); }
.qr { display: grid; justify-items: center; gap: 12px; }
.qr svg { width: 168px; height: 168px; padding: 14px; background: #fff; color: var(--on-accent); border-radius: var(--radius); }
.qr span { font-size: .875rem; color: var(--mute-d); }

/* ---------- Footer ---------- */
.foot { background: var(--night); border-top: 1px solid var(--rule-d); padding: 40px 0 calc(40px + env(safe-area-inset-bottom)); }
.foot-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.foot nav a { color: var(--mute-d); text-decoration: none; font-weight: 500; }
.foot nav a:hover { color: var(--text-d); text-decoration: underline; text-decoration-color: var(--accent); }
.foot-legal { margin-top: 24px; max-width: 90ch; color: var(--mute-d); font-size: .8125rem; line-height: 1.6; }

/* ---------- Stamps on the fare board and at Departures ---------- */
.board { position: relative; overflow: visible; }
.board table { border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
.board-stamp { position: absolute; z-index: 2; width: clamp(84px, 9vw, 120px); right: clamp(-40px, -2.4vw, -2px); top: clamp(-64px, -4vw, -36px); transform: rotate(var(--tilt)); }
.board-stamp .stamp-code { font-size: 24px; }
.dep-sign { position: relative; }
.dep-stamp { position: absolute; width: clamp(96px, 12vw, 156px); right: clamp(16px, 4vw, 56px); top: 50%; margin-top: calc(clamp(96px, 12vw, 156px) / -2); transform: rotate(var(--tilt)); }
.dep-stamp .stamp-code { font-size: 19px; }
.dep-stamp .stamp-cap { font-size: 8.5px; }
.dep-sign h2 { max-width: 13ch; }

/* ---------- Motion ---------- */
@keyframes spin { to { transform: rotate(360deg); } }

/* A stamp lands: it drops from above, bites into the page a touch too far, and settles. */
@keyframes press {
  0%   { opacity: 0; transform: rotate(calc(var(--tilt) - 14deg)) scale(1.9); filter: blur(6px); }
  50%  { opacity: 1; transform: rotate(var(--tilt)) scale(.92); filter: blur(0); }
  74%  { transform: rotate(var(--tilt)) scale(1.03); }
  100% { opacity: 1; transform: rotate(var(--tilt)) scale(1); }
}
@keyframes word-in {
  from { opacity: 0; transform: translateY(.35em); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes phone-in {
  from { opacity: 0; transform: translateY(48px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes lift { from { transform: translateY(56px) rotate(-1.5deg); } to { transform: none; } }

h1 .w { display: inline-block; }

@media (prefers-reduced-motion: no-preference) {
  /* Smooth only after load, so a refresh restores its position instantly instead of gliding there. */
  html.smooth { scroll-behavior: smooth; }
  h1 .w { animation: word-in .7s var(--ease-out) both; animation-delay: calc(80ms + var(--i) * 55ms); }
  .hero .rise { animation: rise-in .7s var(--ease-out) both; animation-delay: calc(520ms + var(--i) * 90ms); }
  .hero-stage .phone { animation: phone-in 1s var(--ease-out) both; animation-delay: 200ms; }
  .hero-stage .stamp-svg { animation: press .62s var(--ease-out) both; animation-delay: calc(900ms + var(--i) * 150ms); }

  /* Scroll-pressed stamps wait unseen until their page arrives, then land one after another. */
  .js [data-press].await .stamp-svg { opacity: 0; }
  .js [data-press].pressed .stamp-svg { animation: press .56s var(--ease-out) both; animation-delay: calc(var(--i) * 110ms); }

  @supports (animation-timeline: view()) {
    .gate-media .phone, .gate-media .import, .gate-media .widgets {
      animation: lift linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
  }
}

/* ---------- Motion: signs slide in along their arrow, once ---------- */
.js .slide.pre { opacity: 0; transform: translateX(-32px); }
.js .slide.in { opacity: 1; transform: none; transition: opacity .45s var(--ease-out), transform .6s var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js .slide.pre { opacity: 0; transform: none; }
  .js .slide.in { transition: opacity .2s ease !important; }
}

/* Hover only where a pointer can hover: a tap must not leave things nudged. */
@media (hover: hover) and (pointer: fine) {
  .strip-nav a:hover { color: var(--text-d); background: var(--navy-2); }
  .strip-cta:hover { background: var(--accent-hi); }
  .panel-btn:hover { background: var(--accent-hi); }
  .panel-btn:hover .go { transform: translateX(4px); }
  .follow:hover svg { transform: translateY(3px); }
  .follow-dark:hover svg { transform: translateX(3px); }
  .gates-dir a:hover { background: var(--navy-2); }
  .board tbody tr:hover { background: rgb(255 255 255 / .03); }
  .faq-list summary:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .22em; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .strip-nav a svg { display: none; }
  .directory ul { grid-template-columns: repeat(2, 1fr); }
  .directory li:nth-child(3) { padding-left: 0; border-left: 0; }
  .directory li:nth-child(n + 3) { border-top: 1px solid var(--rule-d); }
  .prohibit { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; min-height: 0; padding-bottom: 24px; }
  .hero-stage { min-height: 520px; }
  .hero-stage .phone { width: 220px; }
  .hero-stage .stamp-svg { width: calc(var(--s, 112px) * .6); }
  .hero-stage .stamp-svg.l { left: -3%; }
  .hero-stage .stamp-svg.r { left: auto; right: -3%; }
  .ring { width: min(440px, 100%); }
  .passport-grid { grid-template-columns: 1fr; }
  .strip-nav { display: none; }
  .strip-cta { margin-left: auto; }



  .route { grid-template-columns: 1fr; gap: 36px; }
  .route::before { left: 26px; right: auto; top: 28px; bottom: 28px; width: 4px; height: auto; }
  .route li { padding-left: 80px; }
  .route-pict { position: absolute; left: 0; top: 0; }
  .route h3 { margin-top: 12px; }

  .gate-in { grid-template-columns: 1fr; }
  .gate-in, .gate:nth-of-type(even) .gate-in { grid-template-areas: "head" "copy" "media"; }
  .gate-arrow { display: none; }
  .gate-media .phone { width: 260px; }

  .who-grid, .faq-grid { grid-template-columns: 1fr; }
  .faq-grid .head { position: static; }

  .dep-body { grid-template-columns: 1fr; }
  .qr { justify-items: start; }
  .qr svg { width: 140px; height: 140px; }
}

@media (max-width: 560px) {
  .page-stamps { grid-template-columns: repeat(2, 1fr); }
  .page-stamps .stamp-svg, .page-stamps .pair { max-width: 112px; }
  .dep-stamp { position: static; margin: 20px 0 0; }
  body { font-size: 1rem; }
  .brand span { font-size: 1.0625rem; }
  .actions { gap: 18px; }
  .panel-btn { width: 100%; }
  .directory ul { grid-template-columns: 1fr; }
  .directory li, .directory li + li { padding: 18px 0; border-left: 0; }
  .directory li + li { border-top: 1px solid var(--rule-d); }
  .prohibit { grid-template-columns: 1fr; }
  .import { flex-direction: column; }
  .import-photos { grid-template-columns: repeat(6, 1fr); width: 100%; max-width: 300px; }
  .import-arrow { transform: rotate(90deg); }
  .w-row { flex-direction: column; align-items: center; }
  .board th, .board td { padding-inline: 12px; }
  .board thead th:not(:first-child), .board td { width: 25%; }
  .board tbody th { font-size: .9375rem; }
  .faq-list summary { font-size: 1.0625rem; padding-right: 40px; }
  .faq-list details p { padding-right: 0; }
  .notice-in { grid-template-columns: 1fr; }
}