/* TripSpotter's website. The colours, the mark and the lettering are the app's own (brand.py): Ink, Silver, Gold,
   Charcoal, Linen and the Night of its dark look, and Manrope, served from this site. Gold is for the one thing to
   press, for what the radar finds and for the trip the page follows; green is for a good use of miles, as in the
   app; orange is for problems only. */

@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --night: #0E0F12;
  --ink: #15161A;
  --charcoal: #24262D;
  --silver: #C9CED6;
  --mist: #8E949E;
  --linen: #F7F6F3;
  --gold: #E9B949;
  --gold-bright: #F3CB62;
  --line: rgba(201, 206, 214, 0.11);
  --line-strong: rgba(201, 206, 214, 0.2);
  --warn: #FFA65C;
  --good: #5FD39A;
  --good-line: rgba(95, 211, 154, 0.55);
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 48px);
  --section: clamp(72px, 9vw, 136px);
  --sweep: 10s;
  /* The app's plane, flying right, in gold: the mark of the trip the page follows. */
  --plane: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='rotate(90 12 12)' fill='%23E9B949' d='M12 2C13 2 13.5 3 13.5 4L13.5 9 21 13.5 21 15.5 13.5 13.2 13.5 18.5 16 20.3 16 22 12 21 8 22 8 20.3 10.5 18.5 10.5 13.2 3 15.5 3 13.5 10.5 9 10.5 4C10.5 3 11 2 12 2Z'/%3E%3C/svg%3E");
  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--night);
  color: var(--linen);
  font: 400 1.0625rem/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
h1, h2, h3 { font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }

a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold-bright); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

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

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

/* The header: the mark and the name as the app's header has them, three links and the one button. A solid ink band
   with a gold line under it, the mark at 60 px and the name at 30 px at the top of the page, a step smaller once the
   page has moved (Daniel's choice of header A, 2026-10-30). */
.top {
  position: sticky; top: 0; z-index: 50;
  background: var(--ink);
  border-bottom: 1px solid rgba(233, 185, 73, 0.3);
}
.top__inner { display: flex; align-items: center; gap: 32px; height: 96px; transition: height 0.25s ease; }
.top .brand { gap: 14px; }
.top .brand__mark { width: 60px; height: 60px; transition: width 0.25s ease, height 0.25s ease; }
.top .brand__name { font-size: 30px; transition: font-size 0.25s ease; }
.top[data-scrolled] .top__inner { height: 72px; }
.top[data-scrolled] .brand__mark { width: 46px; height: 46px; }
.top[data-scrolled] .brand__name { font-size: 24px; }
.top__nav { display: flex; gap: 28px; margin-left: auto; }
.top__nav a { color: var(--silver); font-weight: 600; font-size: 0.9375rem; text-decoration: none; }
.top__nav a:hover { color: var(--linen); }

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--linen); text-decoration: none; }
.brand:hover { color: var(--linen); }
.brand__mark { width: 34px; height: 34px; flex: none; }
.brand__name { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.brand__gold { color: var(--gold); }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 22px; border: 0; border-radius: 12px;
  font: 700 1rem/1 var(--font); letter-spacing: -0.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.button:active { transform: translateY(1px); }
.button--gold { background: var(--gold); color: var(--ink); }
.button--gold:hover { background: var(--gold-bright); color: var(--ink); }
.button--small { height: 40px; padding: 0 16px; border-radius: 10px; font-size: 0.9375rem; }
.button[disabled] { cursor: progress; opacity: 0.75; }

/* Words shared by the sections. */
.section-title { font-size: clamp(2rem, 1.25rem + 2.5vw, 3.25rem); max-width: 19ch; }
.section-lead { margin-top: 20px; max-width: 58ch; color: var(--silver); font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.55; }

/* The hero: what TripSpotter is, the sign-up, and the radar with the app's own card in front of it. */
.hero {
  position: relative;
  padding-block: clamp(36px, 6vw, 88px) clamp(56px, 7vw, 104px);
  background:
    radial-gradient(52% 58% at 78% 34%, rgba(233, 185, 73, 0.075), transparent 70%),
    var(--night);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.status {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--silver); font-size: 0.875rem; font-weight: 600;
}
.status__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.status__dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid var(--gold); opacity: 0;
  animation: ring 2.4s ease-out infinite;
}
.hero__title {
  margin-top: 24px;
  font-size: clamp(2.625rem, 1.4rem + 4vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.hero__title span { display: block; }
.hero__lead { margin-top: 24px; max-width: 34em; color: var(--silver); font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); line-height: 1.55; }
.hero__sample { margin-top: 36px; color: var(--mist); font-size: 0.8125rem; }

.hero__visual { position: relative; padding-bottom: 8px; }

.radar {
  --x: 50%; --y: 50%;
  position: relative;
  width: min(100%, 560px);
  aspect-ratio: 1 / 1;
  margin-left: auto;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(36, 38, 45, 0.55) 0%, rgba(21, 22, 26, 0.4) 62%, rgba(21, 22, 26, 0) 71%);
}
.radar__grid { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.radar__grid circle, .radar__grid line { fill: none; stroke: rgba(201, 206, 214, 0.15); stroke-width: 1; vector-effect: non-scaling-stroke; }
.radar__grid circle:first-child { stroke: rgba(233, 185, 73, 0.38); }
.radar__grid line { stroke-dasharray: 2 6; stroke: rgba(201, 206, 214, 0.12); }
.radar__sweep {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(233, 185, 73, 0) 0deg 262deg, rgba(233, 185, 73, 0.07) 300deg, rgba(233, 185, 73, 0.2) 344deg, rgba(233, 185, 73, 0.34) 360deg);
  animation: sweep var(--sweep) linear infinite;
}
.radar__sweep::after {
  content: ""; position: absolute; left: calc(50% - 1px); top: 0;
  width: 2px; height: 50%; border-radius: 2px;
  background: linear-gradient(to bottom, rgba(243, 203, 98, 0.95), rgba(233, 185, 73, 0.25));
}
.radar.is-paused .radar__sweep, .radar.is-paused .blip__dot, .radar.is-paused .blip__label { animation-play-state: paused; }

/* What the sweep finds. Each one lights up as the sweep passes it: its delay is its angle's share of a turn. */
.blip { position: absolute; left: var(--x); top: var(--y); }
.blip__dot {
  position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(233, 185, 73, 0.16), 0 0 18px rgba(233, 185, 73, 0.55);
  animation: blip var(--sweep) linear infinite;
  animation-delay: var(--d);
}
.blip__label {
  position: absolute; left: 14px; top: 0; transform: translateY(-50%);
  padding: 7px 11px; border: 1px solid var(--line-strong); border-radius: 9px;
  background: rgba(21, 22, 26, 0.86);
  font-size: 0.8125rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; white-space: nowrap;
  animation: label var(--sweep) linear infinite;
  animation-delay: var(--d);
}
.blip__label span { display: block; color: var(--silver); font-weight: 600; font-variant-numeric: tabular-nums; }
.blip--lisbon { --x: 70%; --y: 16%; --d: 0.85s; }
.blip--tokyo { --x: 86%; --y: 41%; --d: 2.11s; }
.blip--porto { --x: 31%; --y: 30%; --d: 8.79s; }
.blip--bangkok { --x: 14%; --y: 40%; --d: 7.93s; }
.blip--tokyo .blip__label { left: auto; right: 14px; }

.hero__shot {
  position: relative; z-index: 2;
  width: min(100%, 640px);
  margin-top: -46%;
  margin-right: auto;
}
.hero__shot img {
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(201, 206, 214, 0.12), 0 40px 80px -24px rgba(0, 0, 0, 0.75), 0 0 60px -10px rgba(233, 185, 73, 0.12);
}

/* The programs TripSpotter reads award seats from: names only, no logos, since none of them is a partner. */
.programs { padding-block: 40px 44px; border-top: 1px solid var(--line); }
.programs__inner { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 16px 48px; align-items: baseline; }
.programs__title { color: var(--silver); font-size: 1rem; font-weight: 700; letter-spacing: -0.005em; line-height: 1.45; }
/* Each name has its dot before it, and the list is pulled left under a clip, so no line starts or ends on a dot. */
.programs__clip { overflow: hidden; }
.programs__list { display: flex; flex-wrap: wrap; gap: 10px 0; margin: 0 0 0 -22px; padding: 0; list-style: none; }
.programs__list li { position: relative; padding-left: 22px; color: var(--linen); font-size: 0.9375rem; font-weight: 600; white-space: nowrap; }
.programs__list li::before { content: ""; position: absolute; left: 9px; top: 0.62em; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); opacity: 0.75; }
/* The banks whose points move to those airlines, under them, with what TripSpotter does with the transfers. */
.programs__title--banks, .programs__banks { padding-top: 12px; }
.programs__note { margin-top: 12px; max-width: 72ch; color: var(--silver); font-size: 0.9375rem; line-height: 1.55; }

/* The founder's story, beside the trip he built it for: his week drawn as an itinerary, the flight in gold from the
   moment he leaves to the moment he lands, then the day to spare in green. */
.story { padding-block: var(--section); background: var(--ink); border-top: 1px solid var(--line); }
.story__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.story__title { max-width: 21ch; }
.story__text { display: grid; gap: 18px; margin-top: 32px; max-width: 60ch; color: var(--silver); font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); line-height: 1.65; }
.story__sign { display: flex; align-items: center; gap: 14px; margin-top: 32px; color: var(--linen); font-weight: 700; }
.story__sign::before { content: ""; width: 32px; height: 2px; border-radius: 2px; background: var(--gold); }

.rule { margin: 0; padding: 28px 28px 24px; border: 1px solid var(--line-strong); border-radius: 20px; background: var(--night); }
.rule__title { color: var(--mist); font-size: 0.875rem; font-weight: 700; }
.rule__stops { margin: 24px 0 0; padding: 0; list-style: none; }
/* The path runs down the left: each line of the itinerary draws its own piece of it, its dot at 14 px. */
.rule__stops > li { position: relative; padding: 0 0 26px 42px; }
.rule__stops > li::after { content: ""; position: absolute; left: 14px; top: 0; bottom: 0; width: 2px; background: var(--line-strong); }
.rule__stops > li:first-child::after { top: 14px; }
.rule__stops > li:last-child { padding-bottom: 0; }
.rule__stops > li:last-child::after { bottom: auto; height: 14px; }
.rule__stop { display: grid; gap: 2px; }
.rule__stop b { color: var(--linen); font-size: 1.125rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.6; font-variant-numeric: tabular-nums; }
.rule__stop span { color: var(--silver); font-size: 0.9375rem; }
.rule__stop::before {
  content: ""; position: absolute; z-index: 1; left: 7px; top: 7px; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--silver); background: var(--night);
}
.rule__stop--leave::before { left: 3px; top: 3px; width: 24px; height: 24px; border: 0; border-radius: 0; background: var(--plane) center / contain no-repeat; }
.rule__stops > .rule__stop--leave::after { background: linear-gradient(to bottom, var(--line-strong) 0 14px, var(--gold) 14px); }
.rule__stop--land::before { border-color: var(--good); background: var(--good); }
.rule__stops > .rule__stop--land::after { background: linear-gradient(to bottom, var(--gold) 0 14px, var(--good-line) 14px); }
.rule__stops > .rule__spare::after, .rule__stops > .rule__stop--back::after { background: var(--good-line); }
.rule__spare span {
  display: inline-block; padding: 5px 12px; border: 1px dashed var(--good-line); border-radius: 999px;
  color: var(--good); font-size: 0.875rem; font-weight: 700;
}
.rule__note { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--mist); font-size: 0.875rem; }

/* The tour: one trip, part by part. Each part of the app is a stop: its name, what it does, the trip's own line in
   gold, and the app's picture of it. */
.tour { padding-block: var(--section) clamp(40px, 5vw, 72px); border-top: 1px solid var(--line); }
.tour__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; }
.tour__intro .section-lead { margin-top: 0; }
.stop {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 4vw, 48px) clamp(32px, 5vw, 72px); align-items: center;
  padding-block: clamp(56px, 7vw, 104px); border-top: 1px solid var(--line);
}
.tour__intro + .stop { margin-top: clamp(32px, 4vw, 56px); padding-top: clamp(40px, 5vw, 72px); }
.stop--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.stop--wide { grid-template-columns: minmax(0, 1fr); align-items: start; }
.stop--email { grid-template-columns: minmax(240px, 4fr) minmax(0, 7fr); }
.stop__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px clamp(32px, 5vw, 72px); align-items: start; }
.stop__title { font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.375rem); letter-spacing: -0.03em; line-height: 1.1; }
.stop__copy .stop__title { max-width: 18ch; }
.stop__lead { color: var(--silver); font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); line-height: 1.6; max-width: 60ch; }
.stop__copy .stop__lead { margin-top: 16px; }
.stop__trip {
  margin-top: 18px; padding: 12px 16px 12px 46px; max-width: 60ch;
  border: 1px solid rgba(233, 185, 73, 0.28); border-radius: 12px;
  background: rgba(233, 185, 73, 0.06) var(--plane) 16px 13px / 18px 18px no-repeat;
  color: var(--linen); font-size: 0.9375rem; font-weight: 600; line-height: 1.5;
}
.stop .points { margin-top: 0; }
.stop__copy .points { margin-top: 24px; }
.stop__more { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(24px, 4vw, 56px); align-items: center; }
.stop__wallet { display: grid; gap: 24px; }

/* What someone holds, as they would enter it, beside the transfer bonuses running now: the bonuses in gold, as the
   app marks them. Under it, the top of Wallet's own table of where each bank's points can go, at a size it can be
   read. */
.wallet {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px clamp(24px, 4vw, 56px); align-items: start;
  padding: 24px; border: 1px solid var(--line-strong); border-radius: 18px; background: var(--ink);
}
.wallet__note { grid-column: 1 / -1; }
/* The table's rows down to Air France-KLM Flying Blue, the second bonus: the first 1,006 of its 2,184 pixels. */
.crop--transfers { --ar: 2384 / 1006; }
.wallet__name { margin: 0; color: var(--mist); font-size: 0.875rem; font-weight: 700; line-height: 1.4; }
.wallet__list { display: grid; margin: 10px 0 0; padding: 0; list-style: none; }
.wallet__list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.wallet__list span { color: var(--silver); font-size: 0.9375rem; }
.wallet__list b { color: var(--linen); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wallet__list--bonus li { display: grid; gap: 2px; }
.wallet__list--bonus b { color: var(--gold); }
.wallet__note { color: var(--mist); font-size: 0.8125rem; }

/* Bullets of what is useful in a stop. */
.points { display: grid; gap: 14px; margin-top: 28px; padding: 0; list-style: none; }
.points li { position: relative; padding-left: 30px; font-weight: 500; }
.points li::before {
  content: ""; position: absolute; left: 0; top: 0.42em; width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--gold);
  background: radial-gradient(circle, var(--gold) 0 2.5px, transparent 3px);
}
.points--row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 40px; }

/* A picture of the app, framed. */
.frame {
  overflow: hidden; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--ink);
  box-shadow: 0 30px 70px -36px rgba(0, 0, 0, 0.8);
}
.frame img { width: 100%; }
/* The fares table's picture has the foot of the line above the table along its top edge: the first 18 of its
   2,396 × 1,764 pixels (0.75% of its width) are left out. */
.frame--table img { margin-top: -0.75%; }

/* A part of a picture, cut out by CSS from the very screen file: --ar is the part's shape, and --zw, --zx and --zy
   place the whole picture behind it. The card's parts come from where the app drew them
   (screens/card-cash-and-points-narrow.json, as percentages of the picture). */
.crop { margin: 0; }
.crop__view {
  position: relative; display: block; overflow: hidden; aspect-ratio: var(--ar);
  border: 1px solid var(--line-strong); border-radius: 16px; background: #16171B;
  box-shadow: 0 30px 70px -36px rgba(0, 0, 0, 0.8);
}
.frame .crop__view { border: 0; border-radius: 0; box-shadow: none; }
.crop__view img { position: absolute; left: var(--zx, 0%); top: var(--zy, 0%); width: var(--zw, 100%); max-width: none; height: auto; }
.crop--ways { --ar: 1584 / 1080; --zw: 151.52%; --zy: -22.22%; }
/* The card's four parts, for a phone, where the whole card would be too small to read. */
.crop--a1 { --ar: 622 / 219; --zw: 238.1%; --zx: -138.1%; }
.crop--a2 { --ar: 829 / 132; --zw: 178.57%; --zy: -216.67%; }
.crop--a3 { --ar: 651 / 121; --zw: 227.27%; --zy: -350%; }
.crop--a4 { --ar: 681 / 406; --zw: 217.39%; --zy: -133.78%; }
.frame figcaption, .phone figcaption { padding: 14px 18px; border-top: 1px solid var(--line); color: var(--mist); font-size: 0.875rem; }
.phone figcaption { padding: 14px 4px 0; border-top: 0; text-align: center; }
.phone { width: min(100%, 300px); margin-inline: auto; }
.phone__screen {
  overflow: hidden; aspect-ratio: 9 / 18.5;
  border: 9px solid #1B1C21; border-radius: 40px;
  background: var(--ink);
  box-shadow: 0 0 0 1px var(--line-strong), 0 30px 70px -30px rgba(0, 0, 0, 0.85);
}
.phone__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* A flight, part by part: a gold ring and its number round each part the list beside it explains. */
.anatomy__card { position: relative; margin: 0; }
.anatomy__card img { width: 100%; border-radius: 18px; box-shadow: 0 0 0 1px rgba(201, 206, 214, 0.12), 0 40px 80px -30px rgba(0, 0, 0, 0.75); }
.mark {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  border: 2px solid var(--gold); border-radius: 10px; box-shadow: 0 0 0 3px rgba(233, 185, 73, 0.12); pointer-events: none;
}
.mark i {
  position: absolute; left: -12px; top: -12px; display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; background: var(--gold); color: var(--ink); font: normal 800 0.75rem/1 var(--font);
}
.mark--clocks { --x: 73.8%; --y: 3.4%; --w: 25%; --h: 14.5%; }
.mark--shift { --x: 1.2%; --y: 26.4%; --w: 51.5%; --h: 9.4%; }
.mark--cash { --x: 1.2%; --y: 37.8%; --w: 72.5%; --h: 8.7%; }
.mark--miles { --x: 1.2%; --y: 48.2%; --w: 42.3%; --h: 34.6%; }
.anatomy__list { display: grid; gap: 20px; margin: 28px 0 0; padding: 0; list-style: none; counter-reset: mark; }
.anatomy__list li { position: relative; padding-left: 40px; color: var(--silver); }
.anatomy__list li::before {
  counter-increment: mark; content: counter(mark);
  position: absolute; left: 0; top: 0.05em; display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; background: var(--gold); color: var(--ink); font-size: 0.75rem; font-weight: 800;
}
.anatomy__list strong { display: block; color: var(--linen); font-weight: 800; }
.anatomy__list .crop { display: none; }

/* Every way to pay: three ways for the trip's flight out, side by side. The way that is a good use of miles has the
   app's green, as its prices do. */
.pay { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.pay__way { display: grid; align-content: start; gap: 10px; padding: 24px; border: 1px solid var(--line-strong); border-radius: 18px; background: var(--ink); }
.pay__way--good { border-color: var(--good-line); }
.pay__how { color: var(--mist); font-size: 0.875rem; font-weight: 700; }
.pay__price { color: var(--linen); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pay__price span { color: var(--silver); font-size: 0.62em; font-weight: 600; letter-spacing: 0; white-space: nowrap; }
.pay__way--good .pay__price { color: var(--good); }
.pay__note { color: var(--silver); font-size: 0.9375rem; line-height: 1.55; }

/* A round trip's four ways to pay for both flights, as one strip with a hairline between them. */
.both {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0;
  overflow: hidden; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--line-strong);
}
.both > div { display: grid; align-content: start; gap: 8px; padding: 20px 22px; background: var(--ink); }
.both dt { color: var(--mist); font-size: 0.875rem; font-weight: 700; }
.both dd { margin: 0; color: var(--linen); font-size: clamp(1.1875rem, 1rem + 0.5vw, 1.375rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; font-variant-numeric: tabular-nums; }
.both dd small { color: var(--silver); font-size: 0.68em; font-weight: 600; letter-spacing: 0; white-space: nowrap; }
.both dd span { display: block; margin-top: 6px; color: var(--silver); font-size: 0.875rem; font-weight: 600; letter-spacing: 0; line-height: 1.45; }

/* Make it fit your life: the choices a person makes once, in three groups, each shown as it might be set. */
.fit { padding-block: var(--section); background: var(--ink); border-top: 1px solid var(--line); }
.fit__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; }
.fit__intro .section-lead { margin-top: 0; }
.fit__groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px clamp(24px, 3vw, 48px); margin-top: 56px; }
.fit__group { padding-top: 20px; border-top: 1px solid var(--line-strong); }
.fit__name { font-size: 1.25rem; letter-spacing: -0.02em; }
.fit__list { margin: 8px 0 0; }
.fit__list > div { padding: 16px 0 18px; border-bottom: 1px solid var(--line); }
.fit__list > div:last-child { border-bottom: 0; }
.fit__list dt { color: var(--mist); font-size: 0.8125rem; font-weight: 700; }
.fit__list dd { margin: 8px 0 0; color: var(--silver); font-size: 0.9375rem; line-height: 1.5; }
.fit__list .val {
  display: block; width: fit-content; max-width: 100%; margin-bottom: 8px; padding: 7px 12px;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--charcoal);
  color: var(--linen); font-size: 0.9375rem; font-weight: 700; line-height: 1.4;
}

/* The last word: the sign-up again. */
.closing {
  padding-block: var(--section);
  background:
    radial-gradient(60% 90% at 15% 0%, rgba(233, 185, 73, 0.09), transparent 65%),
    var(--night);
  border-top: 1px solid var(--line);
}
.closing__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; }
.closing__inner .section-lead { grid-column: 1; }
.join--closing { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }

/* The sign-up form. */
.join { position: relative; max-width: 520px; margin-top: 36px; }
.join__label { display: block; margin-bottom: 10px; color: var(--silver); font-size: 0.875rem; font-weight: 700; }
.join__row { display: flex; gap: 10px; }
.join__input {
  flex: 1; min-width: 0; height: 52px; padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--ink); color: var(--linen);
  font: 500 1rem var(--font);
}
.join__input::placeholder { color: var(--mist); }
.join__input:focus { border-color: var(--gold); }
.join__input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.join__input[aria-invalid="true"] { border-color: var(--warn); }
.join__note { margin-top: 12px; color: var(--mist); font-size: 0.875rem; }
.join__note a { color: var(--silver); }
.join__said { min-height: 1.6em; margin-top: 8px; font-size: 0.9375rem; font-weight: 600; }
.join__said.is-ok { color: var(--linen); }
.join__said.is-ok::before { content: "✓"; margin-right: 8px; color: var(--gold); font-weight: 800; }
.join__said.is-trouble { color: var(--warn); }
.join__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.join.is-joined .join__row { opacity: 0.55; }

/* The footer: who makes TripSpotter. */
.foot { padding-block: 56px 40px; border-top: 1px solid var(--line); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px 48px; }
.foot .brand__mark { width: 32px; height: 32px; }
.foot__maker { margin-top: 16px; max-width: 46ch; color: var(--silver); font-size: 0.9375rem; }
.foot__nav { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.foot__nav a { color: var(--silver); font-weight: 600; text-decoration: none; }
.foot__nav a:hover { color: var(--linen); }
.foot__fine { grid-column: 1 / -1; padding-top: 22px; border-top: 1px solid var(--line); color: var(--mist); font-size: 0.8125rem; }

/* The other pages: privacy, joined and not found. */
.page-head { padding-block: clamp(48px, 8vw, 104px) clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--line); }
.page-head h1 { max-width: 18ch; font-size: clamp(2.375rem, 1.5rem + 3vw, 3.75rem); letter-spacing: -0.035em; }
.page-head p { margin-top: 20px; max-width: 58ch; color: var(--silver); font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); }
.prose { max-width: 68ch; padding-block: clamp(40px, 6vw, 72px) var(--section); }
.prose h2 { margin-top: 48px; font-size: 1.5rem; letter-spacing: -0.02em; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul { margin-top: 16px; color: var(--silver); }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: 8px; }
.prose strong { color: var(--linen); }
.top__nav a[aria-current="page"] { color: var(--linen); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.foot__nav a[aria-current="page"] { color: var(--linen); }

.page-plain { display: grid; min-height: 100vh; place-items: center; }
.plain { width: 100%; max-width: 560px; padding: 48px var(--gutter); }
.plain__mark { margin-bottom: 40px; font-weight: 800; letter-spacing: -0.02em; }
.plain__mark a { color: var(--linen); text-decoration: none; }
.plain h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); }
.plain p { margin-top: 16px; color: var(--silver); }
.plain .button { margin-top: 28px; }
.trouble { color: var(--warn); font-weight: 600; }

@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes blip {
  0% { transform: scale(2.1); opacity: 1; }
  5% { transform: scale(1); opacity: 1; }
  62% { opacity: 0.4; }
  100% { transform: scale(1); opacity: 0.4; }
}
@keyframes label {
  0%, 8% { opacity: 1; }
  62%, 100% { opacity: 0.62; }
}
@keyframes ring {
  0% { transform: scale(0.6); opacity: 0.9; }
  80%, 100% { transform: scale(1.9); opacity: 0; }
}

@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__copy { max-width: 640px; }
  .radar { width: min(88%, 520px); margin-inline: auto 0; }
  .hero__shot { width: min(92%, 620px); margin-top: -28%; }
  .story__grid { grid-template-columns: minmax(0, 1fr); }
  .rule { max-width: 560px; }
  .stop, .stop--flip { grid-template-columns: minmax(0, 1fr); }
  .stop__copy { order: -1; }
  .anatomy__card { max-width: 740px; }
  .both { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fit__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .top__nav { display: none; }
  .top__inner .button { margin-left: auto; }
  .closing__inner, .programs__inner, .tour__intro, .fit__intro, .stop__head { grid-template-columns: minmax(0, 1fr); }
  .pay, .stop__more, .wallet { grid-template-columns: minmax(0, 1fr); }
  .programs__banks { padding-top: 0; }
  .points--row { grid-template-columns: minmax(0, 1fr); }
  .stop--email { grid-template-columns: minmax(0, 1fr); }
  .fit__groups { grid-template-columns: minmax(0, 1fr); }
  .join--closing { grid-column: auto; grid-row: auto; }
  .foot__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .top__inner { height: 76px; gap: 16px; }
  .top .brand { gap: 10px; }
  .top .brand__mark { width: 48px; height: 48px; }
  .top .brand__name { font-size: 23px; }
  .top[data-scrolled] .top__inner { height: 62px; }
  .top[data-scrolled] .brand__mark { width: 40px; height: 40px; }
  .top[data-scrolled] .brand__name { font-size: 20px; }
  .join__row { flex-direction: column; }
  .join__input { flex: none; width: 100%; }
  .join__row .button { width: 100%; }
  .radar { width: 100%; }
  /* On a phone the hero shows the app as a phone shows it. */
  .hero__shot { width: min(80%, 320px); margin: -46% auto 0; }
  .hero__shot img { border: 8px solid #1B1C21; border-radius: 36px; }
  /* Wide pages keep a size their words can be read at, and swipe sideways; a picture taken on a phone fits as it
     is. */
  .frame__view { overflow-x: auto; -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
  .frame__view img { width: 900px; max-width: none; }
  .frame--shot .frame__view { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .frame--shot .frame__view img { width: 100%; max-width: 100%; }
  .frame--table img { margin-top: -7px; }
  .blip--tokyo { display: none; }
  .frame--table figcaption::after { content: " Swipe the table to see all of it."; }
  /* The whole flight is too small to read on a phone: each part of it is shown with its line instead. */
  .anatomy__card { display: none; }
  .anatomy__list li { padding-left: 0; }
  .anatomy__list li::before { display: none; }
  .anatomy__list .crop { display: block; margin-top: 12px; }
  /* Two of the app's wide pages are too small to read on a phone: the words and figures beside them say it all. */
  .crop--ways, .crop--transfers { display: none; }
  .blip__label { font-size: 0.75rem; padding: 5px 8px; }
  .blip--lisbon .blip__label { left: auto; right: 14px; }
  .both { grid-template-columns: minmax(0, 1fr); }
  .rule { padding: 22px 20px 20px; }
}

/* The narrowest phones: a step smaller again, so the name and the button keep their room beside each other. */
@media (max-width: 374px) {
  .top__inner { height: 64px; gap: 10px; }
  .top .brand { gap: 8px; }
  .top .brand__mark { width: 36px; height: 36px; }
  .top .brand__name { font-size: 18px; }
  .top__inner .button--small { height: 38px; padding: 0 10px; font-size: 0.8125rem; }
  .top[data-scrolled] .top__inner { height: 56px; }
  .top[data-scrolled] .brand__mark { width: 34px; height: 34px; }
  .top[data-scrolled] .brand__name { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .top__inner, .top .brand__mark, .top .brand__name { transition: none; }
  .radar__sweep { animation: none; transform: rotate(52deg); }
  .blip__dot, .blip__label, .status__dot::after { animation: none; }
  .blip__dot { opacity: 1; }
}