/* Generated by tools/fetch_fonts.py: each family subset to the
   characters the locales it serves actually print. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/inter-600.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/inter-700.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/inter-800.woff2) format('woff2');
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/bricolage-800.woff2) format('woff2');
}
@font-face {
  font-family: 'NotoJP';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/notojp-400.woff2) format('woff2');
}
@font-face {
  font-family: 'NotoJP';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/notojp-700.woff2) format('woff2');
}
@font-face {
  font-family: 'NotoSC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/notosc-400.woff2) format('woff2');
}
@font-face {
  font-family: 'NotoSC';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/notosc-700.woff2) format('woff2');
}
@font-face {
  font-family: 'NotoTC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/nototc-400.woff2) format('woff2');
}
@font-face {
  font-family: 'NotoTC';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/nototc-700.woff2) format('woff2');
}
@font-face {
  font-family: 'NotoDeva';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/notodeva-400.woff2) format('woff2');
}
@font-face {
  font-family: 'NotoDeva';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/notodeva-700.woff2) format('woff2');
}

/* Visio.AI Gallery — the site's whole stylesheet.
   Colours are read from the app's own theme (lib/theme/app_colors.dart), not
   picked: the page and the product are the same object seen from outside. */

:root {
  --ground: #141414;        /* AppColors.scaffoldBackgroundDark */
  --deep: #04666F;          /* blumineBlueDarkPrimaryContainer */
  --teal: #19647E;          /* blumineBlueLightPrimary */
  --accent: #82BACE;        /* blumineBlueDarkPrimary */
  --amber: #F0AE4E;         /* AppColors.amber — reserved for "now" */
  --paper: #EDF1F2;

  --ink: #EAF1F3;
  --ink-2: rgba(234, 241, 243, .66);
  --ink-3: rgba(234, 241, 243, .45);
  --paper-ink: #16242B;
  --paper-ink-2: #4A5D65;

  --glass: rgba(255, 255, 255, .05);
  --rim: rgba(255, 255, 255, .11);
  --hair: rgba(255, 255, 255, .09);

  --r-sm: 6px;
  --r-card: 12px;
  --r-panel: 20px;

  --gutter: clamp(20px, 6vw, 72px);
  --measure: 1200px;

  --display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Cyrillic has no Bricolage Grotesque cut, so /ru/ sets its display face to
   Inter rather than dropping every heading into a system fallback. */
html[lang="ru"] { --display: 'Inter', system-ui, sans-serif; }

/* The four non-Latin locales keep Inter and Bricolage in front for the Latin
   they still print — Visio.AI, iOS, Google Play — and fall through to their
   own Noto for everything else. Three Han faces share code points, so each
   is named and reached only from its own pages. */
html[lang="ja"] { --display: 'Bricolage Grotesque', 'NotoJP', sans-serif; --body: 'Inter', 'NotoJP', sans-serif; }
html[lang="zh-CN"] { --display: 'Bricolage Grotesque', 'NotoSC', sans-serif; --body: 'Inter', 'NotoSC', sans-serif; }
html[lang="zh-TW"] { --display: 'Bricolage Grotesque', 'NotoTC', sans-serif; --body: 'Inter', 'NotoTC', sans-serif; }
html[lang="hi"] { --display: 'Bricolage Grotesque', 'NotoDeva', sans-serif; --body: 'Inter', 'NotoDeva', sans-serif; }

/* Headings in those four are set at 700, the heaviest Noto weight shipped,
   without the negative tracking and the 1.03 leading that suit a Latin
   display face and crush a Han or Devanagari one. */
html[lang="ja"] :is(h1, h2, h3),
html[lang="zh-CN"] :is(h1, h2, h3),
html[lang="zh-TW"] :is(h1, h2, h3),
html[lang="hi"] :is(h1, h2, h3) {
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
}
/* Devanagari hangs marks above and below the line, so it needs the room. */
html[lang="hi"] body { line-height: 1.7; }

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -.035em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6.4vw, 5.4rem); }
h2 { font-size: clamp(1.9rem, 3.5vw, 3rem); }
h3 { font-size: 1.25rem; letter-spacing: -.02em; }
p, ul, ol { margin: 0; }

a { color: inherit; }
img, svg { display: block; max-width: 100%; }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 20;
  background: var(--accent);
  color: var(--ground);
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .875rem;
  text-decoration: none;
}
.skip:focus { left: 16px; }

/* ---------------------------------------------------------------- shell -- */

.wrap {
  max-width: var(--measure);
  margin-inline: auto;
}

.band {
  padding: clamp(48px, 8vw, 112px) var(--gutter);
  border-top: 1px solid var(--hair);
}
/* Landing from a nav link should not put the heading against the very edge. */
section[id] { scroll-margin-top: 24px; }
.band > .wrap { display: grid; gap: 48px; }

/* Section heads sit as a pair: the claim on the left, the sentence that backs
   it on the right, both baseline-aligned. One column below 900. */
.bhead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: end;
}
.bp {
  font-size: 1.125rem;
  color: var(--ink-2);
  line-height: 1.5;
  max-width: 46ch;
}

/* ------------------------------------------------------------------ nav -- */

.nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 28px);
  padding: 24px var(--gutter);
  position: relative;
  z-index: 3;
}
.nav > .wrap {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 28px);
  width: 100%;
}

/* Mark and wordmark side by side: the mark is the App Store icon, so someone
   who saw the app recognises it, and the wordmark alone says nothing. */
.mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  text-decoration: none;
  flex: none;
}
/* The three lockups are masks, not <img>: the colour comes from CSS, so one
   file serves any ground and the accent stays a token rather than a fill. */
.mark .mk, .mark .wm, .foot .lockup {
  display: block;
  background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.mark .mk {
  height: 34px;
  aspect-ratio: 121.6 / 126.4;
  -webkit-mask-image: url(/logo-mark.svg); mask-image: url(/logo-mark.svg);
}
.mark .wm {
  height: 21px;
  aspect-ratio: 204.4 / 50.4;
  -webkit-mask-image: url(/logo-wordmark.svg); mask-image: url(/logo-wordmark.svg);
}

.nav .lnk {
  font-size: .875rem;
  color: var(--ink-2);
  font-weight: 500;
  text-decoration: none;
}
.nav .lnk:hover { color: var(--ink); }
.nav .sp { margin-left: auto; }

/* --------------------------------------------------------------- badges -- */

/* Official artwork, never recoloured, stretched, rotated or shadowed. Apple
   asks that its badge be no smaller than any other; Google asks that Play be
   equal or larger. Equal height is the only layout that satisfies both, with
   at least a quarter of the badge height as clear space around them. */
.badges {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.badges a { display: inline-flex; line-height: 0; border-radius: var(--r-sm); }
.badges img { height: 40px; width: auto; }
.badges.lg img { height: 52px; }
@media (max-width: 560px) { .badges.lg img { height: 46px; } }

/* ----------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  padding: clamp(24px, 3vw, 40px) var(--gutter) clamp(56px, 7vw, 88px);
  overflow: hidden;
}
.hero > .wrap { position: relative; z-index: 2; }

.wall { position: absolute; inset: 0; }
.wall img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .46;
}
.wall::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(20, 20, 20, .94) 0%, rgba(20, 20, 20, .86) 34%, rgba(20, 20, 20, .42) 100%),
    linear-gradient(180deg, rgba(20, 20, 20, .3) 0%, rgba(20, 20, 20, .72) 58%, var(--ground) 94%);
}

.hin { max-width: 62ch; }
.sub {
  margin-top: 24px;
  font-size: 1.25rem;
  color: var(--ink-2);
  max-width: 34ch;
  line-height: 1.45;
}

/* The one orchestrated moment on the page: this field types its query once. */
.demo {
  margin-top: 40px;
  background: var(--glass);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-panel);
  padding: 20px;
  max-width: 560px;
  backdrop-filter: blur(12px);
}
.field {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, .07);
  border-radius: 999px;
  padding: 12px 20px;
  font-size: 1.125rem;
  font-weight: 600;
}
.field svg { width: 20px; height: 20px; fill: var(--ink-3); flex: none; }
/* Holds the field open while site.js empties the query and retypes it, so the
   hero does not jump on load. */
.field::before { content: ""; display: block; width: 0; height: 1.55em; }
.caret {
  display: inline-block;
  width: 2px;
  height: 20px;
  background: var(--accent);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
/* One suggestion is the answer and the rest are alternatives, so only the
   answer is lit. Which word that is depends on the language, so the demo
   reads the same way in all eight. */
.chip {
  font-size: .8125rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 5px 12px;
  background: rgba(255, 255, 255, .06);
  color: var(--ink-3);
  white-space: nowrap;
}
.chip.on { background: rgba(130, 186, 206, .15); color: var(--accent); }
.chip s, .placebar s {
  text-decoration: none;
  opacity: .6;
  font-variant-numeric: tabular-nums;
  margin-left: 6px;
}

.hits { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 16px; }
.hits img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); }
.hits img.off { opacity: .2; filter: grayscale(1); }

.note { margin-top: 14px; font-size: .8125rem; color: var(--ink-3); }

.cta2 { display: flex; gap: 16px; margin-top: 32px; align-items: center; flex-wrap: wrap; }
.cta2 .pr { font-size: .875rem; color: var(--ink-3); }

/* ---------------------------------------------------------------- trips -- */

.band.trip {
  background: linear-gradient(168deg, var(--teal) 0%, var(--deep) 60%, var(--ground) 100%);
  border-top: 0;
}

/* Days are a sequence, so they are drawn as a route rather than four cards:
   a line, a filled dot per finished day, a hollow amber dot for the open one. */
.route {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}
.routeline {
  position: absolute;
  left: 8px;
  /* stops at the centre of the fourth dot: the route ends at today. */
  right: calc(25% - 26px);
  top: 7px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 68%, rgba(240, 174, 78, .5) 100%);
}
.day {
  display: grid;
  gap: 6px;
  align-content: start;
  position: relative;
  padding-top: 32px;
}
.day .dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--accent);
}
.day.open .dot {
  background: transparent;
  border: 3px solid var(--amber);
  box-shadow: 0 0 0 6px rgba(240, 174, 78, .18);
}
.day .dt { font-size: .8125rem; color: var(--ink-3); font-weight: 600; }
.day.open .dt { color: var(--amber); font-weight: 700; }
.day .pl { font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em; }
.day .g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 2px; }
.day .g img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); }
.day .ct { font-size: .8125rem; color: var(--ink-3); }

/* ------------------------------------------------------------------ map -- */

.maparea {
  position: relative;
  border-radius: var(--r-panel);
  overflow: hidden;
  height: clamp(280px, 34vw, 420px);
  background: #1C1C1C;
}
.mapgrid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(130, 186, 206, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(130, 186, 206, .07) 1px, transparent 1px),
    radial-gradient(circle at 22% 62%, rgba(25, 100, 126, .4), transparent 38%),
    radial-gradient(circle at 74% 30%, rgba(25, 100, 126, .3), transparent 40%);
  background-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%;
}
.mroad { position: absolute; background: rgba(234, 241, 243, .06); border-radius: 999px; }
.pin { position: absolute; width: clamp(56px, 6.4vw, 80px); transform: translate(-50%, -50%); }
.pin img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r-card);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 8px 18px rgba(0, 0, 0, .5);
}
.pin b {
  position: absolute;
  top: -8px;
  right: -10px;
  background: var(--accent);
  color: var(--ground);
  font-size: .75rem;
  font-weight: 800;
  border-radius: 999px;
  padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}
.placebar {
  position: absolute;
  inset: auto 0 0 0;
  padding: 18px 22px;
  background: linear-gradient(180deg, transparent, rgba(20, 20, 20, .9));
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.placebar span {
  font-size: .8125rem;
  font-weight: 600;
  background: rgba(20, 20, 20, .7);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
}

/* --------------------------------------------------------------- people -- */

/* The only inverted block on the page, because the message is that nothing is
   being kept back. */
.band.light { background: var(--paper); color: var(--paper-ink); }
.band.light h2 { color: var(--deep); }
.band.light .bp { color: var(--paper-ink-2); }

.peoplerow { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.col {
  background: #fff;
  border-radius: var(--r-card);
  padding: 24px;
  border: 1px solid rgba(22, 36, 43, .1);
}
.col.stay { background: var(--teal); color: var(--ink); border-color: transparent; }
.col .ct { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: 16px; }
.col.stay .ct { color: #BCE0EC; }
.col ul { padding: 0; list-style: none; display: grid; gap: 10px; }
.col li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  line-height: 1.4;
}
.col li i { font-style: normal; font-weight: 700; color: #BCE0EC; }

.facesbox { display: grid; gap: 20px; align-content: center; padding-left: 8px; }
.faces { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.faces figure { margin: 0; display: grid; gap: 8px; justify-items: center; }
.faces .av {
  width: 76px;
  height: 76px;
  border-radius: 999px;
  object-fit: cover;
  display: grid;
  place-items: center;
  font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -.02em;
  background: #DCE5E7;
  color: var(--paper-ink-2);
  box-shadow: 0 0 0 3px #fff, 0 5px 14px rgba(22, 36, 43, .2);
}
.faces .more .av { box-shadow: none; }
.faces figcaption { font-size: .875rem; font-weight: 600; }
.faces .more figcaption { color: var(--paper-ink-2); font-weight: 500; }
.fnote { font-size: .875rem; color: var(--paper-ink-2); line-height: 1.45; max-width: 34ch; }

/* -------------------------------------------------- duplicates, compress -- */

.twoup { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; }
.panel {
  background: var(--glass);
  border: 1px solid var(--rim);
  border-radius: var(--r-panel);
  padding: 24px;
  display: grid;
  gap: 16px;
  align-content: start;
}
.panel .pt { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; }
.panel .pb { font-size: .875rem; color: var(--ink-2); }

.burst { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.burst img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); }
.burst img.keep { box-shadow: 0 0 0 3px var(--accent); }
.burst img.gone { opacity: .34; filter: grayscale(.7); }
.tags {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  font-size: .8125rem;
  text-align: center;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.tags b { color: var(--accent); font-weight: 700; }

.figure { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.figure b {
  font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
  font-size: clamp(2.25rem, 4.4vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.figure span { font-size: .875rem; color: var(--ink-2); }

.beforeafter { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.beforeafter img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); }
.beforeafter i { font-style: normal; color: var(--accent); font-size: 1.25rem; font-weight: 700; }
.balabel {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  font-size: .8125rem;
  color: var(--ink-3);
  text-align: center;
}
.balabel b { color: var(--ink); font-weight: 700; display: block; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ memories -- */

.memrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mem {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-card);
  overflow: hidden;
}
.mem img { width: 100%; height: 100%; object-fit: cover; }
.mem::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(7, 16, 20, .86));
}
.mcap { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; }
.mcap .yr {
  font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
  font-size: clamp(1.75rem, 3.2vw, 2.375rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.mcap .lb { font-size: .875rem; font-weight: 600; margin-top: 4px; }
.mcap .sm { font-size: .8125rem; color: var(--ink-2); }
/* Amber means "now", here and on the open trip dot, and nowhere else. */
.mem.now .yr { color: var(--amber); }

/* ------------------------------------------------------- everything else -- */

/* A flat list of peers, so it gets a hairline rule and no box. */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 24px; }
.tile { display: grid; gap: 8px; align-content: start; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .18); }
.tile svg { width: 24px; height: 24px; fill: var(--accent); }
.tile b { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
.tile span { font-size: .875rem; color: var(--ink-2); line-height: 1.4; }

/* -------------------------------------------------------------- closing -- */

.close {
  padding: clamp(56px, 8vw, 112px) var(--gutter);
  background: linear-gradient(168deg, var(--deep), var(--ground) 70%);
  border-top: 1px solid var(--hair);
}
.close h2 { font-size: clamp(2.4rem, 4.4vw, 3.75rem); max-width: 14ch; }
.close .row { display: flex; gap: 16px; margin-top: 32px; align-items: center; flex-wrap: wrap; }
.close .spec { margin-top: 24px; font-size: .875rem; color: var(--ink-3); max-width: 62ch; }

/* --------------------------------------------------------------- footer -- */

.foot {
  padding: 48px var(--gutter) 56px;
  border-top: 1px solid var(--hair);
  font-size: .875rem;
}
.foot > .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
/* The full lockup, with its "PHOTO GALLERY" line, only works where there is
   room; at nav height that line turns to mush, so the nav uses mark plus
   wordmark instead. */
.foot .lockup {
  height: 54px;
  aspect-ratio: 299.2 / 80.8;
  color: var(--accent);
  margin-bottom: 12px;
  -webkit-mask-image: url(/logo-lockup.svg); mask-image: url(/logo-lockup.svg);
}
.foot .ft { font-size: .8125rem; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.foot ul { padding: 0; list-style: none; display: grid; gap: 6px; color: var(--ink-3); }
.foot a { color: var(--ink-3); text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; }
.foot .langs {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px 14px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: var(--ink-3);
  font-size: .8125rem;
  align-items: center;
}
.foot .lang { font-weight: 600; color: var(--ink); }
.lang-select {
  font: inherit;
  color: var(--ink);
  background: var(--glass);
  border: 1px solid var(--rim);
  border-radius: 999px;
  padding: 7px 34px 7px 14px;
  cursor: pointer;
  appearance: none;
  /* The chevron is drawn here rather than left to the platform, so the
     control reads as part of the footer instead of as a system widget. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2382BACE' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 11px;
}
.lang-select:hover { border-color: var(--line-strong, rgba(255, 255, 255, .28)); }
/* The browser paints the open list, so its options need a readable ground. */
.lang-select option { background: #1C2529; color: var(--ink); }
.lang-links { display: flex; gap: 8px 14px; flex-wrap: wrap; }
.lang-links a { color: var(--ink-3); }

/* ---------------------------------------------------------------- toast -- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 12px);
  z-index: 30;
  background: var(--accent);
  color: var(--ground);
  font-size: .875rem;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- legal -- */

.doc { padding: clamp(40px, 6vw, 80px) var(--gutter) clamp(56px, 8vw, 112px); }
.legal { max-width: 62ch; }
.legal h1 { font-size: clamp(2.25rem, 4.6vw, 3.5rem); }
.legal .sub { max-width: none; }
.legal h2 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); margin-top: 48px; }
.legal p { font-size: 1.0625rem; color: var(--ink-2); margin-top: 14px; line-height: 1.6; }
.legal ul { margin-top: 14px; padding-left: 24px; font-size: 1.0625rem; color: var(--ink-2); display: grid; gap: 6px; }
.legal a { color: var(--accent); }

/* ------------------------------------------------------------------ 404 -- */

.nf {
  position: relative;
  padding: clamp(72px, 12vw, 160px) var(--gutter);
  overflow: hidden;
  min-height: 60vh;
  display: flex;
  align-items: center;
}
.nf > .wrap { position: relative; z-index: 2; width: 100%; }
.nf h1 { font-size: clamp(2.25rem, 5.4vw, 4.5rem); }
.btn {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .16);
  color: var(--ink);
}
.btn.solid { background: var(--accent); color: var(--ground); border-color: transparent; }

/* ----------------------------------------------------------- responsive -- */

/* When the row tightens the wordmark goes, not a link: the mark next to it
   is the App Store icon and already carries the recognition, while every
   link is a section someone might be looking for. */
@media (max-width: 1150px) {
  .mark .wm { display: none; }
}

/* Between the wordmark going and the links going there is a band where the
   longest set of labels (French) still needs a little room: the badges give
   it up, staying well above the quarter-height clear space they require. */
@media (max-width: 1010px) {
  .nav > .wrap { gap: 14px; }
  .nav .badges img { height: 34px; }
}

@media (max-width: 900px) {
  .bhead { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  .route { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .routeline { display: none; }
  .peoplerow { grid-template-columns: 1fr; }
  .facesbox { padding-left: 0; }
  .twoup { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .foot > .wrap { grid-template-columns: 1fr 1fr; }
  .nav .lnk { display: none; }
}

@media (max-width: 560px) {
  .band > .wrap { gap: 32px; }
  .sub { max-width: none; }
  .hits { grid-template-columns: repeat(3, 1fr); }
  .memrow { grid-template-columns: 1fr 1fr; }
  .memrow > :last-child { display: none; }
  /* At phone width the badges must stay, so the wordmark goes: the mark is
     the App Store icon and carries the recognition on its own. */
  .mark .wm { display: none; }
  .mark .mk { height: 30px; }
  .badges img { height: 34px; }
  /* Five places in one scrolling row rather than three stacked rows sitting
     on top of the pins. */
  .placebar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 14px; }
  .placebar::-webkit-scrollbar { display: none; }
  .pin b { font-size: .6875rem; padding: 0 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}