/* Fly Friendly website. One stylesheet for every page, no scripts, no inline styles (CSP: style-src 'self').
   Colours are the app's "Airfield" tokens (docs/03-design-system.md): light is the default, dark follows the system.
   The dark "departure board" band stays dark in light mode too, like the app's next-flight card.
   One web font: IBM Plex Sans Thai (the app's Thai font, SIL OFL, fonts/OFL.txt), self-hosted (CSP font-src 'self') and
   limited to the Thai block, so a page only downloads it when it shows Thai text. Without it, phones fall back to
   their old looped system Thai fonts. Chinese uses each system's modern sans (PingFang / YaHei / Noto Sans CJK): a
   Chinese web font would be several MB. */

@font-face {
  font-family: "Fly Thai";
  src: url("/fonts/ibm-plex-sans-thai-400.ttf") format("truetype");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0E00-0E7F, U+200B-200D, U+2060, U+25CC;
}
@font-face {
  font-family: "Fly Thai";
  src: url("/fonts/ibm-plex-sans-thai-600.ttf") format("truetype");
  font-weight: 600 650;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0E00-0E7F, U+200B-200D, U+2060, U+25CC;
}
@font-face {
  font-family: "Fly Thai";
  src: url("/fonts/ibm-plex-sans-thai-700.ttf") format("truetype");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0E00-0E7F, U+200B-200D, U+2060, U+25CC;
}

:root {
  color-scheme: light dark;
  --bg: #F2F3F5;
  --surface: #FFFFFF;
  --line: #E1E3E8;
  --line-strong: #C5C9D1;
  --control-line: #80858E;
  --text: #0A0A0B;
  --text-2: #3F434A;
  --text-3: #5F646C;
  --accent: #0058E6;
  --on-accent: #FFFFFF;
  --amber: #9A5B00;
  --amber-bg: #FFF4DB;
  --red: #D61F26;
  --green: #0B7A3E;
  /* Always-dark surfaces (hero band, alert board, invite card). */
  --hero-bg: #0A0A0B;
  --hero-raised: #141416;
  --hero-line: #2C2C31;
  --hero-text: #F2F2F0;
  --hero-text-2: #A8A8AE;
  --hero-accent: #3D8BFF;
  --hero-amber: #FFB000;
  --hero-green: #2BD46A;
  /* "Fly Thai" only covers Thai, so Latin and Chinese characters fall through to the next fonts in the list. */
  --font: "IBM Plex Sans", "Fly Thai", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Thai", "Noto Sans", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-zh: "IBM Plex Sans", "Fly Thai", -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", system-ui, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gutter: 1.25rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0A0A0B;
    --surface: #141416;
    --line: #26262A;
    --line-strong: #36363C;
    --control-line: #6E6E76;
    --text: #F2F2F0;
    --text-2: #A8A8AE;
    --text-3: #8E8E96;
    --accent: #3D8BFF;
    --on-accent: #05070C;
    --amber: #FFB000;
    --amber-bg: #2A2005;
    --red: #FF4D4D;
    --green: #2BD46A;
    --hero-bg: #141416;
    --hero-raised: #1C1C1F;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

:lang(th) body, body:lang(th) { line-height: 1.75; }
/* Chinese text names its fonts before system-ui, so Windows picks YaHei rather than an old serif CJK fallback. */
:lang(zh-Hans) { font-family: var(--font-zh); }

img { max-width: 100%; height: auto; }

a { color: var(--accent); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, .button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0.5rem;
  background: var(--surface);
  padding: 0.5rem 1rem;
  z-index: 10;
}
.skip:focus { left: 0.5rem; }

.wrap { max-width: 68rem; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Header ---------- */

header.site {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
header.site .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  font-weight: 650;
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
  color: var(--text);
  text-decoration: none;
  margin-right: auto;
}
.brand img {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  box-shadow: 0 0 0 1px var(--line-strong);
}
nav.top ul, nav.lang ul, nav.foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
nav.top li + li, nav.lang li + li { margin-top: 0; }

/* Main links: at least 44 x 44 px to tap. */
nav.top ul { gap: 0 0.75rem; }
nav.top a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.25rem;
  color: var(--text-2);
  text-decoration: none;
  font-weight: 500;
}
nav.top a:hover { color: var(--text); text-decoration: underline; }
nav.top a[aria-current="page"] { color: var(--text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.4em; }

nav.lang { margin-right: 0.5rem; }
/* Language switcher: separate boxes (no overflow clipping, so the focus ring shows in full).
   The current language is filled; a link to a page that is not translated has a dotted underline
   and a screen-reader note in the target language. */
nav.lang ul { gap: 0.25rem; }
nav.lang a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.6rem;
  border: 1px solid var(--control-line);
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--text-2);
  text-decoration: none;
}
nav.lang a:hover { color: var(--text); border-color: var(--text-3); }
nav.lang a[aria-current] { color: var(--surface); background: var(--text); border-color: var(--text); font-weight: 600; }
nav.lang a.partial { text-decoration: underline dotted; text-underline-offset: 0.3em; }

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.nowrap { white-space: nowrap; }

/* Narrow screens: brand and language on the first row, the main links below (same as the source order). */
@media (max-width: 47.99rem) {
  header.site .wrap { gap: 0.25rem 0.75rem; padding-top: 0.5rem; padding-bottom: 0.25rem; }
  nav.lang { margin-right: 0; }
  nav.top { width: 100%; }
  nav.top ul { gap: 0 0.5rem; }
  nav.top li:first-child a { margin-left: -0.25rem; }
}

/* ---------- Document pages (privacy, terms, delete account, support, invite) ---------- */

main { padding: 2.5rem 0 3.5rem; }
main:not(.home) > .wrap > * { max-width: 46rem; }

h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 0.75rem; letter-spacing: -0.015em; font-weight: 700; }
h2 { font-size: 1.375rem; line-height: 1.3; margin: 2.5rem 0 0.5rem; letter-spacing: -0.01em; }
h3 { font-size: 1.0625rem; line-height: 1.4; margin: 1.5rem 0 0.25rem; }
:lang(th) h1, :lang(th) h2, :lang(th) h3 { line-height: 1.45; letter-spacing: 0; }
:lang(zh-Hans) h1, :lang(zh-Hans) h2, :lang(zh-Hans) h3 { letter-spacing: 0; }
p, ul, ol, table { margin: 0 0 1rem; }
h1, h2, h3, summary, caption { text-wrap: balance; }
p, li, td, th { text-wrap: pretty; }
:lang(zh-Hans) { word-break: auto-phrase; }
li + li { margin-top: 0.25rem; }

.lede { font-size: 1.125rem; color: var(--text-2); }
.meta { color: var(--text-3); font-size: 0.9375rem; }

code, .mono { font-family: var(--mono); font-size: 0.9375em; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin: 0 0 1rem;
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

/* Dark card used by the invite page. */
.hero {
  background: var(--hero-bg);
  color: var(--hero-text);
  border-radius: 16px;
  padding: 1.75rem 1.5rem;
  margin: 0 0 2rem;
}
.hero h1 { color: var(--hero-text); }
.hero p { color: var(--hero-text-2); }
.hero a { color: var(--hero-accent); }

.button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.65rem 1.1rem;
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  text-decoration: none;
}
.button.secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--line-strong);
}
.buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1rem 0; }

/* Owner placeholders must be impossible to miss before publishing. */
.owner {
  background: var(--amber-bg);
  color: var(--amber);
  border: 1px dashed var(--amber);
  border-radius: 4px;
  padding: 0 0.25em;
  font-weight: 600;
}
.draft {
  border: 2px solid var(--amber);
  background: var(--amber-bg);
  color: var(--text);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  margin: 0 0 1.5rem;
}

.table-wrap { overflow-x: auto; margin: 0 0 1rem; }
table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; }
th, td {
  text-align: left;
  vertical-align: top;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--line);
}
th { font-weight: 600; color: var(--text-2); }
caption { text-align: left; color: var(--text-3); padding-bottom: 0.25rem; }

details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.25rem 1rem;
  margin: 0 0 0.75rem;
}
summary { cursor: pointer; font-weight: 600; padding: 0.6rem 0; min-height: 44px; }
details[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 0.75rem; }

.toc { font-size: 0.9375rem; }
.toc ol, .toc ul { padding-left: 1.25rem; margin: 0; }
.toc li + li { margin-top: 0; }
.toc a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0.15rem 0; }

.table-wrap:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- Home page ---------- */

main.home { padding: 0; }

.section { padding: 4rem 0; }
.section.alt { background: var(--surface); border-block: 1px solid var(--line); }
.section h2 { font-size: 1.75rem; line-height: 1.25; margin: 0 0 0.75rem; letter-spacing: -0.015em; }
.section-intro { max-width: 40rem; font-size: 1.0625rem; color: var(--text-2); margin-bottom: 2.25rem; }

/* Hero: the always-dark band. */
.intro {
  background: var(--hero-bg);
  color: var(--hero-text);
  border-bottom: 1px solid var(--hero-line);
}
.intro .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2rem 4rem;
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}
.intro-text { max-width: 40rem; }
.intro h1 {
  font-size: 3rem;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 1.25rem;
  color: var(--hero-text);
}
.intro h1:lang(th) { font-size: 2.5rem; line-height: 1.35; letter-spacing: 0; }
.intro h1:lang(zh-Hans) { font-size: 2.625rem; line-height: 1.3; letter-spacing: 0.01em; }
.intro .lede { color: var(--hero-text-2); font-size: 1.1875rem; max-width: 36rem; margin-bottom: 0.75rem; }
.intro .stores { margin-top: 2rem; }
.intro .note + .note { margin-top: 0.5rem; }
.intro a { color: var(--hero-accent); }
.intro a:focus-visible { outline-color: var(--hero-accent); }

/* App screenshots in a plain phone outline: a rounded dark frame, no device-brand drawing.
   The images are 600 x 1298 (a 390 x 844 phone screen); width/height attributes reserve the space. */
.phone {
  margin: 0;
  width: 17rem;
  max-width: 100%;
  padding: 0.5rem;
  background: #0A0A0B;
  border: 1px solid var(--line-strong);
  border-radius: 2.5rem;
  box-shadow: 0 1px 2px rgb(10 10 11 / 0.08), 0 16px 40px -20px rgb(10 10 11 / 0.35);
}
.phone picture, .phone img { display: block; }
.phone img { width: 100%; height: auto; border-radius: 2rem; }
.intro .phone { border-color: #2C2C31; box-shadow: none; }
.phone-hero { width: 18rem; }

/* Hero motion, CSS only. Four real screens cross-fade in the phone (about 5 s each, a 20 s loop); the app's own push banner
   for the delay on the first screen slides in while that screen shows; behind everything a faint world map with planes flying
   back and forth between airports; the phone floats a few pixels. Only transform, opacity and offset-distance animate.
   Under prefers-reduced-motion everything is still: the first screen only, no banner, the map and routes without planes. */
.intro { position: relative; overflow: hidden; overflow: clip; }
.intro > .wrap { position: relative; z-index: 1; }
.hero-stage { position: relative; justify-self: end; }

/* World map (img/world-map.svg, Natural Earth land) and the routes overlay share one box and both crop like "cover",
   so the airports stay on the land. The left side is darkened under the text so the headline keeps its contrast. */
.hero-map { position: absolute; inset: 0; pointer-events: none; }
.hero-map img, .hero-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-map img { object-fit: cover; opacity: 0.085; }
.hero-map::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, color-mix(in srgb, var(--hero-bg) 80%, transparent) 0%, color-mix(in srgb, var(--hero-bg) 65%, transparent) 45%, transparent 66%);
}
.hero-routes .route { fill: none; stroke: rgb(255 255 255 / 0.17); stroke-width: 1; stroke-dasharray: 3 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hero-routes .city { fill: rgb(255 255 255 / 0.38); }
.hero-routes .city-code { fill: rgb(255 255 255 / 0.3); font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; }
.hero-routes .plane { display: none; fill: rgb(255 255 255 / 0.6); }
.intro .phone-hero { position: relative; z-index: 1; overflow: hidden; } /* the banner slides in from under the frame's top edge */
.screens { position: relative; overflow: hidden; border-radius: 2rem; }
.screens .slide:not(.slide-1) { position: absolute; inset: 0; opacity: 0; }
.notif {
  position: absolute;
  top: 1.15rem;
  left: 1rem;
  right: 1rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  border-radius: 1.1rem;
  background: rgb(246 246 248 / 0.95);
  color: #0A0A0B;
  box-shadow: 0 10px 24px -10px rgb(0 0 0 / 0.55);
  font-size: 0.75rem;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(-150%);
}
.phone .notif img { width: 1.85rem; height: 1.85rem; border-radius: 0.45rem; flex: none; }
.notif-text { display: flex; flex-direction: column; min-width: 0; }
.notif-app { font-size: 0.6875rem; color: #5F646C; }
.notif-title { font-weight: 650; font-family: var(--mono); font-size: 0.75rem; }
:lang(th) .notif, :lang(zh-Hans) .notif { line-height: 1.45; }
@media (prefers-color-scheme: dark) {
  .notif { background: rgb(44 44 48 / 0.95); color: #F2F2F0; }
  .notif-app { color: #A8A8AE; }
}
@media (prefers-reduced-motion: no-preference) {
  .screens .slide-2, .screens .slide-3 { animation: hero-slide 20s ease-in-out infinite backwards; }
  .screens .slide-4 { animation: hero-slide-last 20s ease-in-out infinite backwards; }
  .screens .slide-2 { animation-delay: 4s; }
  .screens .slide-3 { animation-delay: 9s; }
  .screens .slide-4 { animation-delay: 14s; }
  .notif { animation: hero-notif 20s ease-in-out infinite; }
  .intro .phone-hero { animation: hero-float 7s ease-in-out infinite alternate; }
  @supports (offset-path: path('M0 0')) {
    .hero-routes .plane { display: block; opacity: 0; animation: hero-plane 30s linear infinite; }
    .hero-routes .p1 { offset-path: path('M503 233Q328 85 98 82'); animation-duration: 40s; animation-delay: -3s; }
    .hero-routes .p2 { offset-path: path('M503 233Q566 161 662 145'); animation-duration: 30s; animation-delay: -14s; }
    .hero-routes .p3 { offset-path: path('M516 283Q636 319 705 424'); animation-duration: 34s; animation-delay: -22s; }
    .hero-routes .p4 { offset-path: path('M556 199Q570 159 606 138'); animation-duration: 26s; animation-delay: -6s; }
    .hero-routes .p5 { offset-path: path('M503 233Q518 256 516 283'); animation-duration: 24s; animation-delay: -17s; }
    .hero-routes .p6 { offset-path: path('M496 213Q536 184 585 188'); animation-duration: 28s; animation-delay: -9s; }
  }
}
/* A later screen fades in over the one before, which then drops out underneath it; the last one fades back to Flights. */
@keyframes hero-slide { 0% { opacity: 0; } 5% { opacity: 1; } 30% { opacity: 1; } 32%, 100% { opacity: 0; } }
@keyframes hero-slide-last { 0% { opacity: 0; } 5% { opacity: 1; } 30% { opacity: 1; } 35%, 100% { opacity: 0; } }
/* In at 1.2 s, held until 3.6 s, away before the next screen at 4 s. */
@keyframes hero-notif {
  0%, 6% { opacity: 0; transform: translateY(-150%); }
  9%, 18% { opacity: 1; transform: translateY(0); }
  21%, 100% { opacity: 0; transform: translateY(-150%); }
}
@keyframes hero-float { from { transform: translateY(0); } to { transform: translateY(-6px); } }
/* Out along the route, then back: the plane turns round (offset-rotate) while it is faded out at the far end. */
@keyframes hero-plane {
  0% { offset-distance: 0%; offset-rotate: auto; opacity: 0; }
  5% { opacity: 1; }
  43% { opacity: 1; }
  48% { offset-distance: 100%; offset-rotate: auto; opacity: 0; }
  50% { offset-distance: 100%; offset-rotate: reverse; opacity: 0; }
  55% { opacity: 1; }
  93% { opacity: 1; }
  98%, 100% { offset-distance: 0%; offset-rotate: reverse; opacity: 0; }
}

/* Store availability. Not links until the listings exist. */
.stores { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.stores li + li { margin-top: 0; }
.store {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 11.5rem;
  min-height: 3.5rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--control-line);
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  line-height: 1.25;
}
.store small { color: var(--text-3); font-size: 0.8125rem; }
.store strong { font-size: 1.125rem; font-weight: 600; white-space: nowrap; }
.intro .store { color: var(--hero-text); border-color: #6E6E76; }
.intro .store small { color: var(--hero-text-2); }
ol .stores { margin: 0.75rem 0 1rem; }
.intro .note { color: var(--hero-text-2); font-size: 0.9375rem; margin: 0; }

/* Feature grid. */
.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.features li + li { margin-top: 0; }
.features li { border-top: 2px solid var(--text); padding-top: 1rem; }
.features h3 { font-size: 1.125rem; margin: 0 0 0.5rem; }
.features p { color: var(--text-2); margin: 0; }

/* Feature rows: text beside a screenshot, sides alternating on wide screens. */
.shots-note { margin: -1.5rem 0 1rem; }
.showcase { margin: 0 0 3.5rem; }
.show {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 2rem 4rem;
  padding: 3rem 0;
}
.show + .show { border-top: 1px solid var(--line); }
.show:nth-child(even) .show-text { order: 2; }
.show .phone, .show .phone-pair { justify-self: center; }
.show-text { max-width: 30rem; }
.show-text h3 { font-size: 1.5rem; line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 0.75rem; }
.show-text p { color: var(--text-2); font-size: 1.0625rem; margin: 0; }
.phone-pair { display: flex; align-items: flex-start; gap: 1.25rem; }
.phone-pair .phone { width: 15rem; }
.phone-pair .phone + .phone { margin-top: 3rem; }
.features-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* "Your travel map": a dark band with the Passport route map across the full width. */
.mapband {
  background: var(--hero-bg);
  color: var(--hero-text);
  padding: 4rem 0 2.5rem;
  border-block: 1px solid var(--hero-line);
}
.mapband h2 { color: var(--hero-text); font-size: 1.75rem; line-height: 1.25; letter-spacing: -0.015em; margin: 0 0 1.5rem; }
.mapband figure { margin: 0; }
.mapband picture, .mapband img { display: block; }
.mapband img {
  width: 100%;
  max-width: 100rem;
  height: auto;
  margin: 0 auto;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.mapband figcaption { color: var(--hero-text-2); font-size: 0.875rem; padding-top: 1rem; }

/* Alerts: text beside a departure-board style table. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 2.5rem 4rem;
  align-items: start;
}
.split > div > :last-child { margin-bottom: 0; }
.board {
  background: var(--hero-bg);
  color: var(--hero-text);
  border: 1px solid var(--hero-line);
  border-radius: 16px;
  padding: 0.5rem 1.25rem 0.75rem;
  margin: 0;
  overflow-x: auto;
}
.board table { font-size: 0.9375rem; margin: 0; }
.board caption {
  color: var(--hero-amber);
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.75rem 0 0.5rem;
}
.board caption:lang(th), .board caption:lang(zh-Hans) { letter-spacing: 0; font-family: var(--font); }
.board th, .board td { border-bottom: 1px solid var(--hero-line); padding: 0.6rem 0; }
.board tr:last-child th, .board tr:last-child td { border-bottom: 0; }
.board thead th {
  color: var(--hero-text-2);
  font-size: 0.8125rem;
  font-weight: 500;
  padding-top: 0.25rem;
}
.board tbody th { color: var(--hero-text); font-weight: 500; padding-right: 1rem; }
.board tbody th span { display: block; color: var(--hero-text-2); font-weight: 400; font-size: 0.875rem; }
.board td { text-align: right; font-family: var(--mono); font-weight: 600; white-space: nowrap; color: var(--hero-text); }
.board td.free { color: var(--hero-green); }
.board td.pro { color: var(--hero-amber); }
.board thead th:last-child { text-align: right; }

/* Free and Pro. */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.plan {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.5rem 1.5rem 1.25rem;
}
.plan h3 { font-size: 1.375rem; margin: 0 0 0.25rem; }
.plan .plan-sub { color: var(--text-3); margin: 0 0 1rem; }
.plan ul { padding-left: 1.2rem; margin: 0 0 1rem; }
.plan li::marker { color: var(--text-3); }
.plan > :last-child { margin-bottom: 0; }
.plan-terms { color: var(--text-2); font-size: 0.9375rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.plans + .meta { margin-top: 1.25rem; }

/* Data and privacy. */
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 3rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}
.facts li { border-top: 1px solid var(--line-strong); padding: 1rem 0 1.25rem; margin: 0; }
.facts h3 { font-size: 1.0625rem; margin: 0 0 0.25rem; }
.facts p { color: var(--text-2); margin: 0; }
.links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; padding: 0; margin: 0; list-style: none; font-weight: 600; }
.links li + li { margin-top: 0; }
.links a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }

/* How it works: three numbered steps. */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li { margin: 0; counter-increment: step; }
.steps li::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--control-line);
  border-radius: 50%;
  font-family: var(--mono);
  font-weight: 600;
  color: var(--text);
}
.steps h3 { font-size: 1.125rem; margin: 0 0 0.35rem; }
.steps p { color: var(--text-2); margin: 0; }

/* Plans sit on the surface band: give the cards the page colour so they still read as cards. */
.section.alt .plan { background: var(--bg); }

/* Who sees what: a plain data table inside the privacy section. */
.section .table-wrap { margin: 0 0 2rem; }
.section .table-wrap table { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; border-collapse: separate; border-spacing: 0; }
.section .table-wrap caption { font-weight: 600; color: var(--text); font-size: 1.0625rem; padding: 0 0 0.5rem; }
.section .table-wrap th[scope="row"] { color: var(--text); width: 32%; }
@media (max-width: 47.99rem) {
  .section .table-wrap th[scope="row"] { width: 45%; }
}
@media (max-width: 30rem) {
  /* Stack each row: the data name above its value, full width. */
  .section .table-wrap table, .section .table-wrap tbody, .section .table-wrap tr,
  .section .table-wrap th[scope="row"], .section .table-wrap td { display: block; width: auto; }
  .section .table-wrap table { background: none; border: 0; border-radius: 0; }
  .section .table-wrap tbody { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
  .section .table-wrap caption { display: block; }
  .section .table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .section .table-wrap tr { border-bottom: 1px solid var(--line); padding: 0.6rem 0.75rem; }
  .section .table-wrap tr:last-child { border-bottom: 0; }
  .section .table-wrap th[scope="row"], .section .table-wrap td { border: 0; padding: 0; }
  .section .table-wrap th[scope="row"] { margin-bottom: 0.15rem; }
}
.section .table-wrap tr:last-child th, .section .table-wrap tr:last-child td { border-bottom: 0; }

/* Two short sections side by side (phones and languages, importing). */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 4rem; }
.duo section > :last-child { margin-bottom: 0; }
.duo p { color: var(--text-2); }

/* ---------- Questions and answers (home #faq and the support pages) ----------
   Always open, no <details> and no script: an anchor such as /support/#cancel lands on a visible answer.
   Wide screens: the heading and a list of the questions on the left (sticky), the answers as cards on the right.
   The answer a link points at gets an accent outline (:target). */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
  gap: 2rem 4rem;
  align-items: start;
}
main:not(.home) > .wrap > .faq-layout { max-width: none; margin-top: 3rem; }
.faq-side h2 { margin-top: 0; }
.faq-updated { margin: 0 0 1.5rem; }
.faq-index { font-size: 0.9375rem; }
.faq-index ol, .faq-index ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.faq-index li + li { margin-top: 0; }
.faq-index a {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-left: -2px;
  padding: 0.4rem 0.25rem 0.4rem 1rem;
  border-left: 2px solid transparent;
  color: var(--text-2);
  line-height: 1.4;
  text-decoration: none;
}
.faq-index a:hover { color: var(--text); border-left-color: var(--accent); text-decoration: underline; }
:lang(th) .faq-index a, :lang(zh-Hans) .faq-index a { line-height: 1.5; }

.faq-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.875rem; }
.faq-item, .faq-list > .qa {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.375rem 1.5rem 1.5rem;
}
.faq-item h3, .faq-list > .qa h3 {
  margin: 0 0 0.6rem;
  font-size: 1.125rem;
  line-height: 1.4;
  letter-spacing: -0.005em;
  scroll-margin-top: 3rem;
}
.faq-item p, .faq-list > .qa p, .faq-list > .qa li { color: var(--text-2); }
.faq-item > :last-child, .faq-list > .qa > :last-child { margin-bottom: 0; }
.faq-list > .qa ol, .faq-list > .qa ul { padding-left: 1.25rem; }
.faq-list > .qa li + li { margin-top: 0.4rem; }
.faq-list > .qa strong { color: var(--text); }
.faq-item:has(h3:target), .faq-list > .qa:has(h3:target) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
/* Cards on the page colour need the surface colour; on the surface band they need the page colour. */
.section.alt .faq-item { background: var(--bg); }

@media (min-width: 60rem) and (min-height: 40rem) {
  .faq-side { position: sticky; top: 1.5rem; }
}
@media (max-width: 59.99rem) {
  .faq-layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  /* The home page answers follow straight after the heading; the support pages keep their list of questions as a card. */
  .home .faq-index { display: none; }
  .faq-side .toc {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.5rem 1rem;
  }
  .faq-side .toc ul { border-left: 0; }
  .faq-side .toc a { padding-left: 0; margin-left: 0; border-left: 0; }
}
@media (max-width: 30rem) {
  .faq-item, .faq-list > .qa { padding: 1.125rem 1.125rem 1.25rem; }
}

/* 404: three languages stacked. */
.notfound-block + .notfound-block { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.notfound-block h2 { margin-top: 0; }

/* Contact. */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 4rem; }
.contact p { color: var(--text-2); }
.contact .email { font-size: 1.25rem; font-weight: 600; overflow-wrap: anywhere; }
.contact .email a, .foot-about a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Footer ---------- */

footer.site {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 2.5rem 0 2.5rem;
  color: var(--text-3);
  font-size: 0.9375rem;
}
.foot-cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem 3rem; }
.foot-about { max-width: 24rem; }
.foot-about .brand { margin-bottom: 0.5rem; }
.foot-about p { margin: 0.5rem 0 0; }
nav.foot ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  gap: 0 2.5rem;
}
nav.foot li + li { margin-top: 0; }
nav.foot a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
footer.site .fine { margin: 2rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: 0.875rem; }

/* ---------- Responsive ---------- */

@media (max-width: 60rem) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phone-hero { width: 15rem; }
  /* The text column is wider here: no airport codes under it, and a longer dark wash. */
  .hero-routes .city-code { display: none; }
  .hero-map::after { background: linear-gradient(to right, color-mix(in srgb, var(--hero-bg) 82%, transparent) 0%, color-mix(in srgb, var(--hero-bg) 65%, transparent) 55%, transparent 72%); }
  .show { gap: 2rem 3rem; }
  .phone { width: 15rem; }
  .phone-pair .phone { width: 12.5rem; }
  .intro h1 { font-size: 2.5rem; }
  .intro h1:lang(th) { font-size: 2.125rem; }
  .intro h1:lang(zh-Hans) { font-size: 2.25rem; }
}

@media (max-width: 47.99rem) {
  .section { padding: 3rem 0; }
  .section h2 { font-size: 1.5rem; }
  .intro .wrap { grid-template-columns: minmax(0, 1fr); padding-top: 2.5rem; padding-bottom: 3rem; gap: 1.5rem; }
  .hero-stage { justify-self: center; }
  .phone-hero { width: 15rem; }
  .screens { border-radius: 1.75rem; }
  /* Narrow screens: the map sits behind the phone at a fixed scale instead of covering the tall band; text stays on a dark wash. */
  .hero-map { inset: auto auto 4rem 50%; width: 60rem; height: 30.5rem; transform: translateX(-52%); }
  .hero-map::after { background: radial-gradient(closest-side, transparent 55%, var(--hero-bg) 100%); }
  .hero-routes .city-code { display: inline; }
  .intro h1 { font-size: 2.125rem; }
  .intro h1:lang(th) { font-size: 1.875rem; }
  .intro h1:lang(zh-Hans) { font-size: 1.875rem; }
  .intro .lede { font-size: 1.0625rem; }
  .split, .plans, .facts, .contact, .steps, .duo { grid-template-columns: minmax(0, 1fr); }
  .features { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  /* Feature rows stack: text first, then the screenshot, centred. */
  .show, .show:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding: 2.25rem 0; }
  .show:nth-child(even) .show-text { order: 0; }
  .show-text h3 { font-size: 1.25rem; }
  .show-text p { font-size: 1rem; }
  .phone { width: 14rem; padding: 0.4rem; border-radius: 2.1rem; }
  .phone img { border-radius: 1.75rem; }
  .phone-pair { gap: 0.75rem; max-width: 100%; }
  .phone-pair .phone { width: 50%; max-width: 12rem; padding: 0.3rem; border-radius: 1.6rem; }
  .phone-pair .phone img { border-radius: 1.35rem; }
  .phone-pair .phone + .phone { margin-top: 2rem; }
  .showcase { margin-bottom: 2.5rem; }
  .shots-note { margin-top: -1.25rem; }
  .mapband { padding: 3rem 0 2rem; }
  .mapband h2 { font-size: 1.5rem; }
  /* Narrow screens: keep the map tall enough to read by cropping its empty edges. */
  .mapband img { aspect-ratio: 5 / 4; object-fit: cover; object-position: 48% 50%; -webkit-mask-image: none; mask-image: none; }
}

@media (max-width: 30rem) {
  :root { --gutter: 1rem; }
  nav.top ul { gap: 0 0.25rem; }
  nav.top a { font-size: 0.9375rem; padding: 0 0.125rem; }
  h1 { font-size: 1.625rem; }
  .hero { padding: 1.25rem 1rem; }
  .intro h1 { font-size: 1.875rem; }
  .intro h1:lang(th) { font-size: 1.625rem; }
  .intro h1:lang(zh-Hans) { font-size: 1.75rem; }
  .stores li { flex: 1 1 0; min-width: 0; }
  .store { min-width: 0; width: 100%; padding: 0.5rem 0.75rem; }
  .store strong { font-size: 1rem; }
  .plan { padding: 1.25rem 1.1rem 1rem; }
  .board { padding: 0.25rem 1rem 0.5rem; }
  nav.foot ul { gap: 0 1.5rem; }
}

/* Thai and Chinese: taller lines and no negative tracking. Placed last so it wins over .section h2, .intro h1 and .store. */
html:lang(th) :is(h1, h2, h3, .store, .store small, .store strong),
html:lang(zh-Hans) :is(h1, h2, h3, .store, .store small, .store strong) { line-height: 1.45; letter-spacing: 0; }

@media print {
  .hero-map, .notif, .screens .slide:not(.slide-1) { display: none; }
  header.site nav, footer.site nav, .skip, .buttons, .stores { display: none; }
  body { background: #fff; color: #000; }
  a { color: #000; }
  .intro, .board { background: #fff; color: #000; border: 1px solid #000; }
}