/* Self-hosted variable fonts — verbatim @fontsource-variable files in
   /vendor/fonts/ (was Google Fonts: removed so the only third party a
   reader's browser meets on this site is the hero map's tile server). */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/vendor/fonts/fraunces-latin-opsz-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/vendor/fonts/fraunces-latin-opsz-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/vendor/fonts/instrument-sans-latin-wght-normal.woff2') format('woff2');
}

/* Kylala landing — warm daylight, editorial pacing. */

:root {
  --canvas: #fff7ee;
  --surface: #ffffff;
  --sunken: #f6ecdf;
  --hairline: #efe0d0;
  --ink: #2d2a26;
  --ink-2: #6b645c;
  --ink-3: #9a9187;
  --ink-inverse: #fff7ee;
  --clay-50: #fff1ea;
  --clay-100: #ffdfd0;
  --clay-300: #ff9c73;
  --clay-500: #ff6435;
  --clay-600: #f04d1a;
  --clay-700: #c93a0d;
  --sage-100: #dcf5e6;
  --sage-500: #17a566;
  --sage-700: #0d7647;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Instrument Sans', system-ui, sans-serif;
  --e2: 0 2px 8px rgb(60 42 28 / 0.08);
  --e4: 0 8px 28px rgb(60 42 28 / 0.16);
  --e5: 0 24px 70px rgb(60 42 28 / 0.22);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.12;
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

.kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clay-700);
  margin-bottom: 14px;
}

.kicker--light {
  color: var(--clay-300);
}

/* ---------- reveal on scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.2, 0, 0, 1), transform 0.7s cubic-bezier(0.2, 0, 0, 1);
}

.reveal--in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

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

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  /* One row, always: a wrapped nav item floats over the hero. */
  flex-wrap: nowrap;
  min-width: 0;
  align-items: center;
  gap: 28px;
  padding: 14px clamp(20px, 5vw, 56px);
  background: rgb(250 246 240 / 0.85);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--hairline);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  color: var(--clay-700);
  margin-right: auto;
}

.nav__door {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
}

.nav__door svg {
  border-radius: 50%;
  box-shadow: 0 1px 4px rgb(60 42 28 / 0.18);
}

.nav__links {
  display: flex;
  gap: 22px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-2);
}

.nav__links a:hover {
  color: var(--ink);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  border-radius: 14px;
  /* A button label never wraps: "Open the app" once broke into a
     three-line tower at 360px and overflowed the nav. */
  white-space: nowrap;
  transition: transform 0.16s cubic-bezier(0.32, 1.32, 0.35, 1), background 0.16s ease;
}

.btn:active {
  transform: scale(0.97);
}

.btn--nav {
  background: var(--ink);
  color: var(--ink-inverse);
  font-size: 14.5px;
  padding: 10px 18px;
}

.btn--primary {
  background: var(--ink);
  color: var(--ink-inverse);
  font-size: 17px;
  padding: 16px 30px;
  box-shadow: var(--e2);
}

.btn--primary:hover {
  background: #1f1c19;
}

.btn--big {
  font-size: 19px;
  padding: 18px 38px;
}

/* ---------- hero: a living map with the copy floating over it ---------- */

.hero {
  position: relative;
  overflow: hidden;
  /* Warm gradient stands in for the map before it loads (and without JS). */
  background:
    radial-gradient(90% 70% at 70% 20%, var(--clay-50) 0%, transparent 60%),
    linear-gradient(175deg, #f6f1e9 0%, #efe7da 55%, #ece2d2 100%);
}

/* Paper-tooth grain on the pre-map gradient (visible pre-load and with
   JS off); the map fades in OVER it, so once loaded the grain is gone.
   ::after already holds the edge fade, so the grain takes ::before. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  mix-blend-mode: overlay;
  opacity: 0.3;
}

.hero__map {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
}

.hero__map--ready {
  opacity: 1;
}

/* Soft edges so the map melts into the page instead of ending abruptly. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(250 246 240 / 0.5) 0%, transparent 14%, transparent 88%, rgb(255 247 238 / 0.6) 100%);
}

.hero__copy {
  position: relative;
  z-index: 2;
  background: rgb(250 246 240 / 0.8);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgb(255 255 255 / 0.65);
  box-shadow: var(--e4);
}

@media (min-width: 960px) {
  .hero {
    min-height: 92vh;
    display: flex;
    align-items: center;
    padding: 40px clamp(20px, 6vw, 72px);
  }
  .hero__copy {
    max-width: min(640px, 52vw);
    border-radius: 30px;
    padding: clamp(30px, 4vw, 50px) clamp(28px, 3.5vw, 54px);
  }
}

/* Mobile: the map on top, the copy sliding over its bottom edge like the
 * app's own bottom sheet — grab-handle and all. */
@media (max-width: 959px) {
  /* A band, not a screen: the primary CTA must sit inside the first 664 px
   * of a 390-wide Safari viewport in every language (LANDING.md §2.1),
   * so the map takes at most 34svh and the copy panel follows. */
  .hero__map {
    position: relative;
    inset: auto;
    height: clamp(190px, 30svh, 340px);
  }
  .hero::after {
    display: none;
  }
  .hero__copy {
    margin-top: -26px;
    border-radius: 26px 26px 0 0;
    border-bottom: none;
    padding: 16px 22px 38px;
    text-align: center;
    box-shadow: 0 -14px 44px rgb(60 42 28 / 0.16);
  }
  .hero__copy::before {
    content: '';
    display: block;
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: #ddd2c2;
    margin: 0 auto 14px;
  }
  .hero .kicker {
    font-size: 12px;
    margin-bottom: 8px;
  }
  .hero__lede {
    margin-inline: auto;
  }
  .hero__cta {
    justify-content: center;
    margin-top: 16px;
    gap: 10px 18px;
  }
  .hero__note {
    justify-content: center;
    margin-top: 10px;
    font-size: 13px;
  }
  .hero__note li:nth-child(3) {
    flex-basis: 100%;
    text-align: center;
  }
  .hero__note li:nth-child(3)::before {
    content: none;
    margin: 0;
  }
  .hero h1 {
    font-size: clamp(34px, 9.4vw, 42px);
  }
  .hero h1:lang(fr) {
    font-size: clamp(28px, 7.6vw, 36px);
  }
  /* „Frag deine Straße um eine Hand.“ holds two lines down to 360px. */
  .hero h1:lang(de) {
    font-size: clamp(29px, 8.4vw, 40px);
  }
  .hero__lede {
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.5;
  }
  /* The longer sentences (FR, DE, ES) keep the CTA inside 664px at 15px. */
  .hero__lede:lang(fr),
  .hero__lede:lang(de),
  .hero__lede:lang(es) {
    font-size: 15px;
  }
  .hero__copy:lang(fr),
  .hero__copy:lang(de),
  .hero__copy:lang(es) {
    padding-left: 18px;
    padding-right: 18px;
  }
}

.hero h1 {
  font-size: clamp(40px, 5.2vw, 66px);
}

/* « Demande un coup de main à ta rue. » holds two lines at every width. */
.hero h1:lang(fr) {
  font-size: clamp(34px, 4.2vw, 56px);
}

.hero h1 em {
  font-style: italic;
  color: var(--clay-600);
}

.hero__lede {
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--ink-2);
  max-width: 34em;
  margin-top: 22px;
}

.hero__cta {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 30px;
  flex-wrap: wrap;
}

/* The quiet second action beside the primary: a link to the tour figure. */
.hero__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--clay-700);
}

.hero__more .lico {
  width: 16px;
  height: 16px;
}

/* The three-item note under the CTA: separators BEFORE every item but the
 * first, items never break inside, so a line can never start with a dot. */
.hero__note {
  list-style: none;
  display: flex;
  gap: 6px 0;
  padding: 0;
  margin: 16px 0 0;
  flex-wrap: wrap;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink-2);
}

.hero__note li {
  white-space: nowrap;
}

.hero__note li + li::before {
  content: '·';
  margin: 0 8px;
  color: var(--ink-3);
}

.hero__note:lang(fr) li:nth-child(3) {
  flex-basis: 100%;
}

.hero__note:lang(fr) li:nth-child(3)::before {
  content: none;
  margin: 0;
}

/* ---------- hero map: pins, teaser card, hint chip ---------- */

/* MapLibre positions the marker element itself via transform, so animation
 * lives on the button INSIDE the .hero-pin wrapper, never on the wrapper. */
.hero-pin {
  cursor: pointer;
}

/* Mirrors the app's .map-pill (app/src/styles/map.css) so the hero looks
 * exactly like the street it is selling. */
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 3px 12px rgb(60 42 28 / 0.16);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
  animation: pill-breathe 3s ease-in-out infinite alternate;
}

.hero-pill:hover,
.hero-pill:focus-visible {
  background: var(--ink);
  color: var(--ink-inverse);
  border-color: var(--ink);
  /* The target stops breathing the moment a cursor (or focus) reaches
     it — a click should never chase a moving pill. */
  animation-play-state: paused;
}

.hero-pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

@keyframes pill-breathe {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.06);
  }
}

.hero-tease {
  width: 252px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: var(--e4);
  padding: 16px;
  text-align: left;
  outline: none;
}

.hero-tease__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
}

.hero-tease__bars {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.hero-tease__bar {
  display: block;
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(90deg, #efe6d8 25%, #faf4ea 42%, #efe6d8 60%);
  background-size: 300% 100%;
  animation: tease-shimmer 1.7s linear infinite;
}

@keyframes tease-shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}

.hero-tease__note {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
}

.hero-tease__cta {
  display: flex;
  justify-content: center;
  margin-top: 12px;
  background: var(--ink);
  color: var(--ink-inverse);
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 10px;
  padding: 9px 14px;
}

.hero-tease__cta:hover {
  background: #1f1c19;
}

.hero-hint {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  pointer-events: none;
  background: rgb(45 42 38 / 0.82);
  color: var(--ink-inverse);
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  box-shadow: var(--e2);
  animation: hint-in 0.8s cubic-bezier(0.2, 0, 0, 1) backwards;
  transition: opacity 0.6s ease;
}

@keyframes hint-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.hero-hint--hide {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hero-pill {
    animation: none;
  }
  .hero-tease__bar {
    animation: none;
    background: #efe6d8;
  }
  .hero-hint {
    animation: none;
  }
  .hero__map {
    transition: none;
  }
}

/* ---------- the browser frame (the desktop screenshot in #more) ---------- */

.browser {
  margin-top: 38px;
  border-radius: 18px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  box-shadow: var(--e5);
  overflow: hidden;
}

.browser__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  background: var(--sunken);
  border-bottom: 1px solid var(--hairline);
}

.browser__bar span {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: #ddd0bf;
}

.browser__bar span:nth-child(1) {
  background: #f0968a;
}

.browser__bar span:nth-child(2) {
  background: #f2cc8b;
}

.browser__bar span:nth-child(3) {
  background: #a4d4ae;
}

.browser img {
  width: 100%;
  height: auto;
}

/* ---------- sections: the shared container ---------- */

.moments,
.faq {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(60px, 10vh, 110px) clamp(20px, 6vw, 60px) 0;
}

.moments h2,
.faq h2 {
  font-size: clamp(30px, 4vw, 46px);
  margin-bottom: 10px;
}

/* ---------- privacy manifesto ---------- */

.privacy {
  position: relative;
  /* New stacking context so the grain's z-index:-1 stays inside the band. */
  isolation: isolate;
  margin-top: clamp(70px, 12vh, 120px);
  background: var(--ink);
  color: var(--ink-inverse);
}

/* Inline-SVG grain — zero assets; z-index:-1 keeps it under the pcards
   so text never sits on noise. */
.privacy::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  mix-blend-mode: overlay;
  opacity: 0.35;
}

.privacy__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(60px, 10vh, 100px) clamp(20px, 6vw, 60px);
}

.privacy h2 {
  font-size: clamp(30px, 4vw, 46px);
  max-width: 18em;
}

/* One rule set serves both schemes: the band is pinned dark in both. */
.pcard {
  background: linear-gradient(137deg, rgb(255 255 255 / 0.07) 4%, rgb(255 255 255 / 0.03) 76%);
  border: 1px solid rgb(255 241 225 / 0.10);
  box-shadow: inset 0 1px 0 rgb(255 241 225 / 0.08);
  border-radius: 20px;
  padding: 24px;
}

.pcard h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16.5px;
  margin: 0 0 8px;
}

/* The icon gets a tile of its own. */
.pcard h3 .lico {
  width: 28px;
  height: 28px;
  padding: 6px;
  box-sizing: content-box;
  flex: none;
  border-radius: 11px;
  color: var(--clay-300);
  background: rgb(255 255 255 / 0.06);
  box-shadow: 0 0 0 1px rgb(255 241 225 / 0.12), inset 0 1px 0 rgb(255 241 225 / 0.08);
}

.pcard p {
  font-size: 14.5px;
  color: rgb(250 246 240 / 0.78);
  line-height: 1.55;
}

/* ---------- faq ---------- */

.faq {
  max-width: 760px;
  padding-bottom: 20px;
}

.faq details {
  border-bottom: 1px solid var(--hairline);
  padding: 4px 0;
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 16.5px;
  padding: 18px 48px 18px 0;
  list-style: none;
  position: relative;
  transition: color 0.15s ease;
}

.faq summary:hover {
  color: var(--clay-700);
}

.faq summary::-webkit-details-marker {
  display: none;
}

/* The affordance is a crafted chip, not a raw typographic glyph. */
.faq summary::after {
  content: '+';
  position: absolute;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1;
  color: var(--clay-600);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), 0 1px 2px rgb(60 42 28 / 0.06);
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), background 0.2s ease;
}

.faq details[open] summary {
  color: var(--clay-700);
}

.faq details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
  background: var(--clay-50);
  border-color: var(--clay-100);
}

.faq details p {
  color: var(--ink-2);
  padding: 0 48px 20px 0;
  font-size: 15.5px;
  line-height: 1.6;
}

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

.footer {
  text-align: center;
  padding: clamp(70px, 12vh, 120px) 20px 34px;
  background:
    radial-gradient(60% 50% at 50% 100%, var(--clay-50) 0%, transparent 70%);
}

.footer__cta h2 {
  font-size: clamp(32px, 4.5vw, 52px);
  margin-bottom: 28px;
}

.footer__note {
  margin-top: 16px;
  font-size: 14px;
  color: var(--ink-2);
}

.footer__fine {
  margin-top: 70px;
  font-size: 13px;
  color: var(--ink-2);
}

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

@media (max-width: 880px) {
  .nav__links {
    display: none;
  }
}

.footer__maker {
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-3, #8a8477);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.footer__maker a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}
.footer__maker a:hover {
  text-decoration: underline;
}

/* ---------- theme switcher (R41: auto / light / dark, every footer) ---- */

.footer .theme-pick {
  display: inline-flex;
  gap: 2px;
  margin-top: 16px;
  padding: 3px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
}

.theme-pick .theme-pick__opt {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  transition: color var(--dur-fast, 0.15s) ease;
}

.theme-pick .theme-pick__opt:hover {
  color: var(--ink);
}

.theme-pick .theme-pick__opt--on {
  background: var(--canvas);
  color: var(--ink);
  box-shadow: 0 1px 3px rgb(58 34 20 / 0.14);
}

html.dk .theme-pick .theme-pick__opt--on {
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.5);
}
.footer__support {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.footer__heart {
  display: inline-block;
  animation: heartbeat 1.6s ease-in-out infinite;
  transform-origin: center;
}
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.25); }
  24% { transform: scale(1); }
  36% { transform: scale(1.18); }
  48% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .footer__heart { animation: none; }
}

/* ----------------------------------------------------------------------
   Dark theme (R21) — follows the system, no toggle. The palette mirrors
   the app's ink-plum dark (app/src/styles/tokens.css): Apple-dark grays,
   clay brights kept hot, tints derived from the gray ground. Most of the
   page flips through the tokens; below them sit the handful of rules
   that hardcoded daylight.
   ---------------------------------------------------------------------- */
/* dark (system via boot script, or forced via html.dk) */
html.dk {
  --canvas: #0b0b0d;
  --surface: #1c1c1e;
  --sunken: #161618;
  --hairline: #38383a;
  --ink: #f5f5f7;
  --ink-2: #a6a6ad;
  --ink-3: #7d7d85;
  --ink-inverse: #101012;
  --clay-50: color-mix(in oklab, #ff6435 9%, #0b0b0d);
  --clay-100: color-mix(in oklab, #ff6435 16%, #1c1c1e);
  --clay-300: #d1704e;
  --clay-500: #ff7248;
  --clay-600: #f25422;
  --clay-700: #ff9873;
  --sage-100: color-mix(in oklab, #17a566 14%, #1c1c1e);
  --sage-500: #19a76b;
  --sage-700: #7cd6ac;
  --e2: 0 2px 8px rgb(0 0 0 / 0.4);
  --e4: 0 8px 28px rgb(0 0 0 / 0.5);
  --e5: 0 24px 70px rgb(0 0 0 / 0.6);
}

html.dk .nav {
  background: rgb(11 11 13 / 0.82);
}

/* Ink buttons flip: light pill, dark label (the tokens already swap
   --ink/--ink-inverse); only the hardcoded hover shade needs help. */
html.dk .btn--primary:hover,
html.dk .hero-tease__cta:hover {
  background: #e4e4e8;
}

/* The pre-map gradient matches the dark basemap's land color, so the
   canvas fade-in is a change of texture, not of brightness. */
html.dk .hero {
  background:
    radial-gradient(90% 70% at 70% 20%, color-mix(in oklab, #ff6435 7%, #161718) 0%, transparent 60%),
    linear-gradient(175deg, #161718 0%, #131415 55%, #101112 100%);
}

html.dk .hero::after {
  background: linear-gradient(180deg, rgb(11 11 13 / 0.55) 0%, transparent 14%, transparent 88%, rgb(11 11 13 / 0.65) 100%);
}

html.dk .hero__copy {
  background: rgb(22 22 24 / 0.78);
  border-color: rgb(255 255 255 / 0.08);
}

@media (max-width: 959px) {
  html.dk .hero__copy {
    box-shadow: 0 -14px 44px rgb(0 0 0 / 0.55);
  }
  html.dk .hero__copy::before {
    background: #3a3a3e;
  }
}

html.dk .hero-pill {
  box-shadow: 0 3px 12px rgb(0 0 0 / 0.45);
}

html.dk .hero-tease__bar {
  background: linear-gradient(90deg, #26262a 25%, #313136 42%, #26262a 60%);
}

html.dk .hero-tease__cta {
  background: var(--ink);
  color: var(--ink-inverse);
}

/* The base rule pairs a hardcoded dark background with color:
   var(--ink-inverse) — correct in light mode (inverse = light text),
   but --ink-inverse flips to near-black in dark mode, so the override
   below fixed the background and left the text invisible on it
   (reported from a real phone). This chip is always a dark badge
   floating on the map, in both themes — pin the text light too. */
html.dk .hero-hint {
  background: rgb(28 28 30 / 0.92);
  border: 1px solid var(--hairline);
  color: #f5f5f7;
}

/* Browser-chrome frame: a light app window on a dark desk — honest
   about the screenshot, and it reads as intentional. */
html.dk .browser {
  background: #2c2c2e;
  border-color: #3a3a3e;
}

html.dk .browser__bar {
  background: #232326;
}

/* FAQ chip: only the bevel needs a delta — every other value flips
   via tokens. */
html.dk .faq summary::after {
  box-shadow: inset 0 1px 0 rgb(255 241 225 / 0.06), 0 1px 2px rgb(0 0 0 / 0.4);
}

/* The privacy manifesto is a DESIGNED dark band: in light mode it gets
   that from background: var(--ink) — but in dark mode --ink is the
   LIGHT text color, which flipped the band bright while its hardcoded
   cream card text stayed cream (invisible — reported from a real
   phone). Pin the band dark in both themes; a hair lighter than the
   canvas so it still reads as a band. */
html.dk .privacy {
  background: #17171a;
  color: #f5f5f7;
}

/* ---------- guides (evergreen articles) ----------
   Token-only colors, so the dark scheme above applies unchanged. */

.article {
  max-width: 720px;
  margin: 0 auto;
  padding: 130px 24px 40px;
}

.article__crumbs {
  font-size: 13.5px;
  color: var(--ink-3);
  margin-bottom: 18px;
}
/* Crumb link styling lives AFTER .article a below — source order matters. */

.article h1 {
  font-size: clamp(34px, 6vw, 48px);
  margin-bottom: 14px;
}

.article__standfirst {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 34px;
}

.article h2 {
  font-size: 26px;
  margin: 44px 0 12px;
}

.article h3 {
  font-size: 19px;
  margin: 28px 0 8px;
}

.article p {
  margin: 0 0 16px;
  color: var(--ink-2);
}

.article strong {
  color: var(--ink);
}

.article ul,
.article ol {
  margin: 0 0 16px;
  padding-left: 22px;
  color: var(--ink-2);
}

.article li {
  margin-bottom: 8px;
}

/* Quiet underline: alpha-derived from --clay-700 so it flips correctly
   in dark (clay-300 goes muddy there); saturates on hover. */
.article a {
  color: var(--clay-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in oklab, var(--clay-700) 40%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s;
}

.article a:hover {
  text-decoration-color: currentColor;
}

/* Crumbs are navigation chrome, not prose — exempt them. Sits AFTER
   .article a so source order wins the 0-1-1 tie. */
.article__crumbs a {
  color: var(--ink-3);
  text-decoration: none;
}

.article__crumbs a:hover {
  color: var(--clay-700);
}

/* A quiet aside — the practical box a reader screenshots. */
.article .aside {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 20px 22px;
  margin: 26px 0;
  box-shadow: var(--e2);
}

.article .aside h3 {
  margin-top: 0;
}

/* The soft, honest plug — clearly a plug, never disguised as advice. */
.article .plug {
  background: var(--clay-50);
  border: 1px solid var(--clay-100);
  border-radius: 16px;
  padding: 22px 24px;
  margin: 40px 0 8px;
}

.article .plug p {
  color: var(--ink-2);
}

.article .plug .btn {
  margin-top: 12px;
}

/* Guide cards on the /guides/ index. */
.guide-list {
  display: grid;
  gap: 14px;
  margin-top: 34px;
}

.guide-card {
  display: block;
  background: linear-gradient(137deg, #fffdf9 0%, #f6efe4 100%);
  border: 1px solid rgb(58 34 20 / 0.08);
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.85), 0 1px 2px rgb(58 34 20 / 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Hover lift layered UNDER the same inset bevel, so it never disappears. */
.guide-card:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.85), 0 6px 20px rgb(60 42 28 / 0.10);
}

.guide-card h2 {
  font-size: 21px;
  margin: 0 0 6px;
}

.guide-card p {
  color: var(--ink-2);
  font-size: 15.5px;
}

/* dark (system via boot script, or forced via html.dk) */
html.dk .article .plug {
  background: var(--sunken);
  border-color: var(--hairline);
}

/* Card material dark deltas — warm-tinted hairline/bevel (255 241 225)
   keeps the cream brand in the dark scheme. */
html.dk .guide-card {
  background: linear-gradient(137deg, #232325 4%, #1a1a1c 76%);
  border-color: rgb(255 241 225 / 0.08);
  box-shadow: inset 0 1px 0 rgb(255 241 225 / 0.07), 0 1px 2px rgb(0 0 0 / 0.4);
}

html.dk .guide-card:hover {
  box-shadow: inset 0 1px 0 rgb(255 241 225 / 0.07), 0 6px 20px rgb(0 0 0 / 0.5);
}

/* Inline code on article pages (the privacy policy's subject-string
   example). Compound selector: must survive reshuffles vs .article rules. */
.article code {
  font-size: 0.88em;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 5px;
  padding: 1px 5px;
}

/* ---------- R38: worldwide pass ----------------------------------------- */

/* Buttons inside articles are buttons, not links: `.article a` (0-1-1)
   outranks `.btn--primary` (0-1-0) on color and adds an underline, which
   painted every plug CTA clay-on-ink — unreadable in dark. Compound
   selector so it survives reshuffles. */
.article a.btn {
  color: var(--ink-inverse);
  text-decoration: none;
}

/* Same trap, second victim: a guide card IS an <a> inside .article, so the
   link rule underlined entire cards — title and description — in clay. */
.article a.guide-card {
  color: inherit;
  text-decoration: none;
}

/* Inline Lucide icons (extracted from the app's own icon set, so landing
   and app speak one visual language — replacing the emoji glyphs). */
.lico {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex: none;
}
.footer__heart .lico { width: 14px; height: 14px; color: #e25555; vertical-align: -2px; }

/* Guide-card icon chip (replaces the emoji in the card title). */
.guide-card h2 .guide-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--clay-50);
  color: var(--clay-700);
  border: 1px solid var(--clay-100);
  vertical-align: -10px;
  margin-right: 8px;
}
.guide-card h2 .guide-card__icon .lico { width: 18px; height: 18px; }

/* A phone screenshot inside an article — small, real, captioned. */
.article .article__figure {
  margin: 28px auto 8px;
  max-width: 270px;
}
.article .article__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
  border: 1px solid var(--hairline);
  box-shadow: var(--e4);
}
.article .article__figure figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-3);
  text-align: center;
}

/* The "In the app" backlink box — a tinted panel that sits IN the page:
   inset ring instead of a border-left, no elevation shadow. The tint is
   clay-600 at 7% alpha over the cream canvas (keep 6-8% or it goes salmon). */
.article .aside.applinks {
  border: 0;
  border-left: 0;
  background: rgb(240 77 26 / 0.07);
  box-shadow: inset 0 0 0 1px rgb(240 77 26 / 0.18);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 28px 0;
}

/* The heading is a kicker: the box names its kind instead of shouting. */
.article .aside.applinks h3 {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--clay-700);
  margin: 0 0 8px;
}

.article .aside.applinks a {
  color: var(--clay-700);
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in oklab, var(--clay-700) 35%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s;
}

.article .aside.applinks a:hover {
  text-decoration-color: currentColor;
}

/* --clay-700 already flips in dark; only the tint/ring hue needs a delta. */
/* dark (system via boot script, or forced via html.dk) */
html.dk .article .aside.applinks {
  background: rgb(255 114 72 / 0.08);
  box-shadow: inset 0 0 0 1px rgb(255 114 72 / 0.20);
}

/* Language switcher in the nav (populated by /lang.js from the page's own
   hreflang links; hidden until built, invisible without JS). De-defaulted:
   appearance:none kills the platform widget, so the chevron comes back as
   an inline SVG. */
.nav .lang select {
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  appearance: none;
  -webkit-appearance: none;
  padding: 7px 26px 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b645c' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: var(--ink);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), 0 1px 2px rgb(60 42 28 / 0.06);
}

/* This rule sits after the main dark block, so its chevron/bevel need
   their own delta here. */
/* dark (system via boot script, or forced via html.dk) */
html.dk .nav .lang select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a6a6ad' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  box-shadow: inset 0 1px 0 rgb(255 241 225 / 0.06);
}

/* ---------- R39: the nav actually fits a phone -------------------------- */

/* Budget at 360px: brand ~96 + lang(code) ~52 + CTA ~100 + gaps/padding
   ~40 = ~288px — one line holds in all four languages. */
@media (max-width: 560px) {
  .nav {
    gap: 8px;
    padding: 10px 12px;
  }
  .nav__brand {
    font-size: 18px;
    gap: 6px;
    flex: none;
  }
  .nav__door {
    width: 24px;
    height: 24px;
  }
  .nav__brand img {
    width: 24px;
    height: 24px;
  }
  .nav .lang {
    margin-left: auto;
    flex: none;
  }
  .btn--nav {
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 999px;
    flex: none;
  }
}

/* ---------- R40: the company page's team card ---------------------------- */

.article .team-card {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  margin: 26px 0 8px;
  padding: 22px 24px;
  border-radius: 16px;
  background: linear-gradient(137deg, #fffdf9 0%, #f6efe4 100%);
  border: 1px solid rgb(58 34 20 / 0.08);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.85), 0 1px 2px rgb(58 34 20 / 0.04);
}

.article .team-card img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--hairline), var(--e2);
}

.article .team-card h3 {
  margin: 2px 0 2px;
  font-size: 21px;
}

.article .team-card .team-card__role {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clay-700);
  margin-bottom: 10px;
}

.article .team-card p {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

@media (max-width: 560px) {
  .article .team-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* dark (system via boot script, or forced via html.dk) */
html.dk .article .team-card {
  background: linear-gradient(137deg, #232325 4%, #1a1a1c 76%);
  border-color: rgb(255 241 225 / 0.08);
  box-shadow: inset 0 1px 0 rgb(255 241 225 / 0.07), 0 1px 2px rgb(0 0 0 / 0.4);
}

/* ----------------------------------------------------------------------
   Round L — the landing (LANDING.md). Every rule below is prefixed .l-
   and written as a compound selector, so a reshuffle of the rules above
   cannot outrank it; colors come from the tokens only. The eight ask-kind
   colors become custom properties (same values as the app's
   tokens.css --cat-*); --l-card is the card material every new card
   shares, named once.
   ---------------------------------------------------------------------- */

:root {
  --cat-give: #e8489e;
  --cat-lost: #0da6b4;
  --cat-borrow: #f5a300;
  --cat-parcel: #ff5c2e;
  --cat-hand: #2f80f2;
  --cat-homewatch: #17a566;
  --cat-headsup: #ea3829;
  --cat-other: #7a6ff0;
  --l-card: linear-gradient(137deg, #fffdf9 0%, #f6efe4 100%);
  --l-card-border: rgb(58 34 20 / 0.08);
  --l-card-shadow: inset 0 1px 0 rgb(255 255 255 / 0.85), 0 1px 2px rgb(58 34 20 / 0.04);
}

/* dark (system via boot script, or forced via html.dk) */
html.dk {
  --l-card: linear-gradient(137deg, #232325 4%, #1a1a1c 76%);
  --l-card-border: rgb(255 241 225 / 0.08);
  --l-card-shadow: inset 0 1px 0 rgb(255 241 225 / 0.07), 0 1px 2px rgb(0 0 0 / 0.4);
}

/* ---- typography: no orphan word in a heading or a caption, no widow in
   body copy (Chromium 114+/117+; older engines ignore the property) ---- */
h1,
h2,
h3,
.l-cap {
  text-wrap: balance;
}

p,
li,
figcaption,
.l-tour__label {
  text-wrap: pretty;
}

/* A two-sentence kicker or heading breaks at the period, never mid-phrase:
   each sentence is an atomic inline box (build-pages.mjs sent()). */
.l-sent {
  display: inline-block;
}

.l-nowrap {
  white-space: nowrap;
}

/* ---- fixes to existing rules: the AA misses of the audit (LANDING.md §4) ---- */
.article .aside.applinks {
  background: rgb(240 77 26 / 0.045);
}

.footer .footer__maker {
  color: var(--ink-2);
}

.article .article__crumbs,
.article .article__crumbs a {
  color: var(--ink-2);
}

.article .article__figure figcaption {
  color: var(--ink-2);
}

/* The skip link: off-canvas until focused. */
.nav .l-skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 8px 12px;
  border-radius: 10px;
}

.nav .l-skip:focus {
  left: 12px;
  z-index: 60;
}

/* ---- footer: languages, the fine print as rows of items, the maker line ---- */
.footer .footer__langs {
  margin-top: 12px;
  font-size: 13px;
  color: var(--ink-2);
}

.footer .footer__langs a {
  color: var(--ink-2);
  margin: 0 6px;
}

.footer .footer__langs a[aria-current] {
  color: var(--ink);
  font-weight: 600;
}

/* A separator is drawn BEFORE every item but a row's first, items never
   break inside, and below 1000px each row becomes a column without
   separators, so a middle dot can never start a line. */
.footer .l-fine {
  list-style: none;
  margin: 70px auto 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 0;
  max-width: 74em;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}

.footer .l-fine + .l-fine {
  margin-top: 4px;
}

.footer .l-fine li {
  white-space: nowrap;
}

.footer .l-fine li + li::before {
  content: '·';
  margin: 0 8px;
  color: var(--ink-3);
}

.footer .l-fine a {
  color: var(--clay-700);
}

@media (max-width: 999px) {
  .footer .l-fine {
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
  .footer .l-fine li {
    white-space: normal;
  }
  .footer .l-fine li + li::before {
    content: none;
    margin: 0;
  }
}

.footer .l-tagline {
  margin: 22px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}

.footer .l-maker {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}

.footer .l-maker li {
  white-space: nowrap;
}

.footer .l-maker li + li::before {
  content: '·';
  margin: 0 8px;
  color: var(--ink-3);
}

.footer .l-maker a {
  color: var(--ink-2);
  font-weight: 600;
  text-decoration: none;
}

.footer .l-maker a:hover {
  text-decoration: underline;
}

/* Article pages have no footer CTA: the fine print starts at the top. */
.footer.footer--article {
  padding-top: 48px;
}

.footer.footer--article .l-fine {
  margin-top: 0;
}

/* ---- the flat device frame (bezel-less: the app renders its own safe
   areas inside the screenshot), the crops, the captions ---- */
.l-device {
  position: relative;
  width: min(300px, 72vw);
  margin: 0;
  border-radius: 44px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--hairline), var(--e5);
  overflow: hidden;
}

.l-device img,
.l-device video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 44px;
}

/* Crops: the frame shows a band of the 390x844 screenshot. --l-crop-h is
   the band's height in frame pixels, set inline by build-pages.mjs from
   crops.json (measured on the frame, never typed). A top crop ends on a
   flat band of the sheet and fades over 24px, so a cut never shows half a
   glyph; an edge crop lands on a block boundary without a fade; a bottom
   crop (a sheet over a dimmed page) keeps the sheet's rounded top whole. */
.l-device.l-crop {
  aspect-ratio: 390 / var(--l-crop-h, 557);
  min-height: 0;
  border-radius: 44px 44px 0 0;
}

.l-device.l-crop.l-crop--bottom {
  border-radius: 0 0 44px 44px;
}

.l-device.l-crop img {
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 44px 44px 0 0;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 24px), transparent);
}

.l-device.l-crop.l-crop--bottom img {
  object-position: bottom;
  border-radius: 0 0 44px 44px;
  -webkit-mask-image: none;
  mask-image: none;
}

.l-device.l-crop.l-crop--edge img {
  -webkit-mask-image: none;
  mask-image: none;
}

.l-cap {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
  text-align: center;
  max-width: min(26em, 100%);
}

.l-demo-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
  text-align: center;
}

.l-demo-note a {
  color: var(--clay-700);
  font-weight: 600;
  white-space: nowrap;
}

.l-fig {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 10px;
  max-width: 100%;
  min-width: 0;
}

/* The play disc over the tour's poster (icon only: no text in pixels). */
.l-device .l-play {
  position: absolute;
  left: 50%;
  top: 44%;
  translate: -50% -50%;
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--ink-inverse);
  display: grid;
  place-items: center;
  box-shadow: var(--e4);
  cursor: pointer;
}

.l-device .l-play .lico {
  width: 26px;
  height: 26px;
  margin-left: 3px;
}

/* ---- how it works: the head, three beats with frames, the tour figure
   (poster, 64px disc, the labelled button, transcript, note); on phones the
   tour comes first and only the asker's card stays as a still ---- */
.l-how {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(60px, 10vh, 110px) clamp(20px, 6vw, 60px) 0;
  display: grid;
  gap: 0;
}

.l-how .l-how__head {
  order: 1;
}

/* Desktop: three columns on a shared row grid (subgrid), so the three
   frames start on one line and the three captions sit on one line. */
.l-how .l-how__beats {
  order: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto auto auto;
  gap: 0 22px;
  margin: 40px 0 0;
  list-style: none;
  padding: 0;
}

.l-how .l-tour {
  order: 3;
}

.l-how h2 {
  font-size: clamp(30px, 4vw, 46px);
  margin-bottom: 10px;
}

.l-how .l-beat {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  row-gap: 12px;
  align-content: start;
  justify-items: start;
}

.l-how .l-beat__n {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--clay-50);
  color: var(--clay-700);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  box-shadow: 0 0 0 1px rgb(58 34 20 / 0.10);
}

.l-how .l-beat h3 {
  font-size: 22px;
}

.l-how .l-beat p {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

.l-how .l-beat .l-fig {
  grid-row: span 2;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 10px;
  justify-self: center;
  margin-top: 8px;
  align-items: end;
}

.l-how .l-beat .l-fig .l-cap {
  align-self: start;
}

.l-how .l-beat .l-device {
  width: min(260px, 72vw);
}

.l-tour {
  margin: 48px 0 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  padding: clamp(20px, 3vw, 36px);
  border-radius: 24px;
  background: var(--sunken);
  border: 1px solid var(--hairline);
}

.l-tour .l-tour__media {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.l-tour .l-tour__media .l-device {
  width: min(230px, 60vw);
}

.l-tour .l-tour__media .l-play {
  top: 42%;
}

/* The one labelled affordance beside the poster; the disc is a second
   target on the poster itself. Both go once the film plays. */
.l-tour .l-tour__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  white-space: nowrap;
  border: 0;
  background: var(--ink);
  color: var(--ink-inverse);
  font: inherit;
  font-size: 14.5px;
  line-height: 1.3;
  font-weight: 600;
  border-radius: 14px;
  padding: 12px 18px 12px 14px;
  box-shadow: var(--e2);
  cursor: pointer;
  text-align: center;
}

.l-tour .l-tour__play .lico {
  width: 16px;
  height: 16px;
  flex: none;
}

.l-tour.is-playing .l-tour__disc,
.l-tour.is-playing .l-tour__play {
  display: none;
}

.l-tour .l-tour__body {
  text-align: left;
}

.l-tour .l-tour__label {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

.l-tour .l-video__transcript {
  margin-top: 16px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

.l-tour .l-video__transcript summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
}

.l-tour .l-video__transcript ol {
  margin: 10px 0 0;
  padding-left: 20px;
}

.l-tour .l-video__transcript li {
  margin: 4px 0;
}

.l-tour .l-demo-note {
  margin-top: 14px;
  text-align: left;
}

/* Captions rendered by the browser over the film: the page's body face,
   readable on both themes' films. */
.l-tour video::cue {
  background: rgb(11 11 13 / 0.82);
  color: #f5f5f7;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.35;
}

@media (max-width: 880px) {
  .l-how .l-how__beats {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 22px;
    order: 3;
    margin-top: 28px;
  }
  /* Phones: each beat is a numbered row (number beside the text); the
     film above carries the screens, one still stays (beat 2). */
  .l-how .l-beat {
    grid-row: auto;
    grid-template-rows: none;
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 6px;
    justify-items: start;
    text-align: left;
  }
  .l-how .l-beat h3 {
    grid-column: 2;
    font-size: 19px;
    margin-top: 5px;
  }
  .l-how .l-beat p {
    grid-column: 2;
    font-size: 15px;
    line-height: 1.5;
  }
  .l-how .l-beat .l-fig {
    grid-column: 1 / -1;
    grid-row: auto;
    grid-template-rows: none;
    justify-self: center;
    margin-top: 10px;
  }
  .l-how .l-beat:not([data-beat='2']) .l-fig {
    display: none;
  }
  .l-how .l-tour {
    order: 2;
    margin-top: 28px;
  }
}

@media (max-width: 680px) {
  .l-tour {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 18px 16px;
  }
  .l-tour .l-tour__body,
  .l-tour .l-demo-note {
    text-align: center;
  }
  .l-tour .l-video__transcript ol {
    text-align: left;
  }
  .l-tour .l-tour__media .l-device {
    width: min(200px, 56vw);
  }
  .l-tour .l-tour__media .l-play {
    width: 56px;
    height: 56px;
  }
  .l-how .l-beat .l-device {
    width: min(240px, 70vw);
  }
}

/* Phones: a 60px rhythm between sections (10vh of 844 is 84). */
@media (max-width: 680px) {
  .l-how,
  .l-fit,
  .l-quiet,
  .l-more,
  .l-founder,
  .moments,
  .faq {
    padding-top: 60px;
  }
  .privacy {
    margin-top: 60px;
  }
  .privacy .privacy__inner {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .footer {
    padding-top: 64px;
  }
  .l-how .l-how__beats {
    margin-top: 22px;
  }
}

/* ---- the two moments: side by side on desktop (copy above the frame),
   stacked on phones; chips on tokens; the closing line under both ---- */
.moments .l-moments__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto auto auto auto;
  gap: 40px clamp(28px, 5vw, 60px);
  margin-top: clamp(36px, 6vh, 56px);
  align-items: start;
}

.moments .l-moment {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  row-gap: 14px;
  justify-items: start;
  align-content: start;
}

.moments .l-moment .l-fig {
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 10px;
  align-items: end;
  justify-self: center;
  margin-top: 12px;
}

.moments .l-moment .l-fig .l-cap {
  align-self: start;
}

.moments .l-moment h3 {
  font-size: clamp(22px, 2.4vw, 28px);
}

.moments .l-moment p {
  color: var(--ink-2);
  max-width: 30em;
}

.moments .l-moment .l-device {
  width: min(260px, 72vw);
}

.moments .l-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: 10px;
  padding: 6px 12px;
}

.moments .l-chip::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cat-parcel);
}

.moments .l-chip--parcel {
  background: var(--clay-50);
  color: var(--clay-700);
}

.moments .l-chip--homewatch {
  background: var(--sage-100);
  color: var(--sage-700);
}

.moments .l-chip--homewatch::before {
  background: var(--cat-homewatch);
}

.moments .l-moments__closing {
  margin: clamp(36px, 6vh, 60px) auto 0;
  max-width: 34em;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.35;
  color: var(--ink);
}

@media (max-width: 880px) {
  .moments .l-moments__grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 30px;
    margin-top: 28px;
  }
  .moments .l-moment {
    grid-row: auto;
    grid-template-rows: none;
    gap: 10px;
  }
  .moments .l-moment .l-fig {
    grid-row: auto;
    grid-template-rows: none;
  }
  .moments .l-moment .l-device {
    width: min(220px, 64vw);
  }
  .moments .l-moments__closing {
    margin-top: 34px;
  }
}

/* ---- for you / not for you: two lists, always open (the page's
   strongest honest device) ---- */
.l-fit {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(60px, 10vh, 110px) clamp(20px, 6vw, 60px) 0;
}

.l-fit h2 {
  font-size: clamp(30px, 4vw, 46px);
  margin-bottom: 10px;
}

.l-fit .l-fit__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 36px;
}

.l-fit .l-fit__col {
  border-radius: 22px;
  padding: 26px;
  background: var(--l-card);
  border: 1px solid var(--l-card-border);
  box-shadow: var(--l-card-shadow);
}

.l-fit .l-fit__col h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 21px;
  margin-bottom: 14px;
}

.l-fit .l-fit__col h3 .lico {
  width: 20px;
  height: 20px;
  color: var(--sage-700);
}

.l-fit ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.l-fit li {
  position: relative;
  padding-left: 26px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

.l-fit li .lico {
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 16px;
  height: 16px;
  color: var(--sage-700);
}

@media (max-width: 680px) {
  .l-fit .l-fit__cols {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 26px;
  }
  .l-fit .l-fit__col {
    padding: 16px 18px 18px;
  }
  .l-fit .l-fit__col h3 {
    font-size: 19px;
    margin-bottom: 12px;
  }
  .l-fit li {
    font-size: 15px;
  }
}

/* ---- privacy band: four cards (facts.band, injected by the AI layer),
   the closing line beside two proof frames, the policy link. The inner
   container is a two-column grid; everything spans both columns except
   the closing (left) and the proofs (right). ---- */
.privacy .privacy__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  column-gap: clamp(24px, 4vw, 56px);
}

.privacy .privacy__inner > * {
  grid-column: 1 / -1;
}

.privacy .l-privacy__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 44px;
}

.privacy .l-privacy__closing {
  grid-column: 1;
  align-self: center;
  margin-top: 40px;
  font-size: 16.5px;
  line-height: 1.6;
  color: rgb(250 246 240 / 0.86);
  max-width: 34em;
}

.privacy .l-privacy__proofs {
  grid-column: 2;
  align-self: center;
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: 12px;
  justify-items: center;
  align-items: end;
}

.privacy .l-privacy__proofs .l-fig {
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 10px;
  align-items: end;
}

.privacy .l-privacy__proofs .l-fig .l-cap {
  align-self: start;
  color: rgb(250 246 240 / 0.78);
}

/* The proof frames sit on the dark band in both themes, so they are the
   dark frame's material even on a light page (the band is pinned dark). */
.privacy .l-privacy__proofs .l-device {
  width: min(200px, 100%);
  background: #0b0b0d;
  box-shadow: 0 0 0 1px rgb(255 241 225 / 0.14), var(--e5);
}

.privacy .l-privacy__link {
  justify-self: start;
  display: inline-block;
  margin-top: 28px;
  font-weight: 600;
  color: var(--clay-300);
  text-wrap: pretty;
}

/* The arrow rides the last word (a nowrap span), never beside two lines. */
.privacy .l-privacy__link .lico {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  margin-left: 2px;
}

@media (max-width: 1000px) {
  .privacy .l-privacy__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 880px) {
  .privacy .privacy__inner {
    grid-template-columns: 1fr;
  }
  .privacy .l-privacy__closing,
  .privacy .l-privacy__proofs {
    grid-column: 1 / -1;
  }
  .privacy .l-privacy__proofs {
    margin-top: 28px;
  }
}

@media (max-width: 680px) {
  .privacy .l-privacy__grid {
    gap: 10px;
    margin-top: 30px;
  }
  .privacy .pcard {
    padding: 14px 16px 15px;
  }
  .privacy .pcard h3 {
    font-size: 15.5px;
    gap: 10px;
    margin-bottom: 6px;
  }
  .privacy .pcard h3 .lico {
    width: 20px;
    height: 20px;
    padding: 5px;
    border-radius: 9px;
  }
  .privacy .pcard p {
    font-size: 14px;
    line-height: 1.5;
  }
  .privacy .l-privacy__proofs .l-device {
    width: min(168px, 100%);
  }
}

/* Phones: four stacked cards, the icon and the title on one row. */
@media (max-width: 560px) {
  .privacy .l-privacy__grid {
    grid-template-columns: 1fr;
  }
}

/* ---- quiet by contract: the head beside two frames; seven tiles on a
   12-column grid: 4 + 3 on desktop, 2 + 2 + 2 + 1 on phones, never a hole ---- */
.l-quiet {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(60px, 10vh, 110px) clamp(20px, 6vw, 60px) 0;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.l-quiet h2 {
  font-size: clamp(30px, 4vw, 46px);
  margin-bottom: 10px;
}

.l-quiet .l-quiet__p {
  color: var(--ink-2);
  max-width: 36em;
}

.l-quiet .l-quiet__frames {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  justify-items: center;
  align-items: start;
}

.l-quiet .l-quiet__frames .l-device {
  width: min(200px, 100%);
}

.l-quiet .l-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.l-quiet .l-stat {
  grid-column: span 3;
  border-radius: 18px;
  padding: 16px 14px 14px;
  background: var(--l-card);
  border: 1px solid var(--l-card-border);
  box-shadow: var(--l-card-shadow);
}

.l-quiet .l-stat:nth-child(n + 5) {
  grid-column: span 4;
}

.l-quiet .l-stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  white-space: nowrap;
}

.l-quiet .l-stat span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-2);
}

@media (max-width: 880px) {
  .l-quiet {
    grid-template-columns: 1fr;
  }
  .l-quiet .l-quiet__frames {
    margin-top: 8px;
  }
}

@media (max-width: 680px) {
  .l-quiet .l-stats {
    gap: 8px;
    margin-top: 22px;
  }
  .l-quiet .l-stat,
  .l-quiet .l-stat:nth-child(n + 5) {
    grid-column: span 6;
    padding: 12px 12px 11px;
  }
  .l-quiet .l-stat:nth-child(7) {
    grid-column: span 12;
  }
  .l-quiet .l-stat b {
    font-size: 19px;
  }
  .l-quiet .l-stat span {
    font-size: 12.5px;
    margin-top: 4px;
  }
  .l-quiet .l-quiet__frames .l-device {
    width: min(160px, 100%);
  }
}

/* ---- the inline fold (R-37): on phones a body's trailing sentences sit
   behind a "More" summary in the same paragraph; media.js opens every fold
   from 681px up, so desktop readers never see the summary. Never
   display:none — the words stay in the document for every reader. ---- */
.l-fold {
  display: inline;
}

.l-fold > summary {
  display: inline;
  cursor: pointer;
  list-style: none;
  color: var(--clay-700);
  font-weight: 600;
}

.l-fold > summary::-webkit-details-marker {
  display: none;
}

.l-fold[open] > summary {
  display: none;
}

/* ---- also on the street: six rows, the desktop frame on wide screens only ---- */
.l-more {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(60px, 10vh, 110px) clamp(20px, 6vw, 60px) 0;
}

.l-more h2 {
  font-size: clamp(30px, 4vw, 46px);
  margin-bottom: 10px;
}

.l-more .l-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

.l-more .l-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--hairline);
}

.l-more .l-row__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--clay-50);
  color: var(--clay-700);
  box-shadow: 0 0 0 1px rgb(58 34 20 / 0.10);
}

.l-more .l-row__icon .lico {
  width: 20px;
  height: 20px;
}

.l-more .l-row h3 {
  font-size: 17.5px;
  margin: 0 0 4px;
}

.l-more .l-row p {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

.l-more .l-row a {
  color: var(--clay-700);
  font-weight: 600;
  white-space: nowrap;
}

.l-more .l-more__desk {
  margin-top: 44px;
  justify-items: stretch;
}

.l-more .l-more__desk .browser {
  margin-top: 0;
  width: 100%;
}

.l-more .l-more__desk .l-cap {
  margin-top: 2px;
  justify-self: center;
}

@media (max-width: 680px) {
  .l-more .l-rows {
    grid-template-columns: 1fr;
    margin-top: 24px;
  }
  .l-more .l-row {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 12px;
    padding: 13px 0;
  }
  .l-more .l-row__icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }
  .l-more .l-row__icon .lico {
    width: 17px;
    height: 17px;
  }
  .l-more .l-row h3 {
    font-size: 16.5px;
    margin-bottom: 2px;
  }
  .l-more .l-row p {
    font-size: 14px;
  }
  .l-more .l-more__desk {
    display: none;
  }
}

/* ---- why this exists: the kicker, one line, and the way to the team
   page (the founder's signed note lives THERE, not here), beside the
   quiet flyer link ---- */
.l-founder {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(60px, 10vh, 110px) clamp(20px, 6vw, 60px) 0;
}

.l-founder .l-founder__line {
  max-width: 34em;
  margin: 12px 0 0;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

.l-founder .l-founder__actions {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.l-founder .l-founder__team,
.l-founder .l-founder__flyer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--clay-700);
  font-weight: 600;
}

.l-founder .l-founder__team .lico,
.l-founder .l-founder__flyer .lico {
  width: 16px;
  height: 16px;
}

/* the founder's note keeps its signed-blockquote form on the team page */
.article blockquote[data-voice='founder'] {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

.article blockquote[data-voice='founder'] p + p {
  margin-top: 12px;
}

.article blockquote[data-voice='founder'] footer {
  margin-top: 16px;
  display: grid;
  gap: 2px;
  font-weight: 600;
  color: var(--ink);
}

.article blockquote[data-voice='founder'] footer .l-sig__place {
  font-weight: 500;
  font-size: 0.93em;
  color: var(--ink-2);
  white-space: nowrap;
}

.l-founder__mark {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--sage-100);
  color: var(--sage-700);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.02em;
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--hairline);
}

@media (max-width: 680px) {
  .l-founder .l-founder__line {
    font-size: 16.5px;
    line-height: 1.5;
  }
  .l-founder .l-founder__actions {
    gap: 16px 22px;
    margin-top: 18px;
  }
  .l-founder__mark {
    width: 48px;
    height: 48px;
    font-size: 17px;
  }
}

/* ---- the FAQ: the rows keep a 760px measure; on phones the first three
   questions, then the rest behind one row (a <details> wrapper the AI
   layer writes open; the summary shows only on phones) ---- */
.faq h2,
.faq details {
  max-width: 760px;
}

.faq .l-faq__more {
  border-bottom: 0;
  padding: 0;
}

.faq .l-faq__more > summary {
  display: none;
}

/* While the wrapper is open (always on wide screens, after a tap on
   phones) the page's `.faq details[open] summary` would paint every nested
   row as open: restate the closed look for the rows. The wrapper's own
   summary keeps the page grammar (+ closed, rotated when open). */
.faq .l-faq__more[open] details:not([open]) summary {
  color: var(--ink);
}

.faq .l-faq__more[open] details:not([open]) summary::after {
  transform: translateY(-50%) rotate(0);
  background: var(--surface);
  border-color: var(--hairline);
}

.faq .l-faq__more[open] details:not([open]) summary:hover {
  color: var(--clay-700);
}

@media (max-width: 680px) {
  .faq {
    padding-bottom: 12px;
  }
  .faq details[data-faq] summary {
    padding: 14px 44px 14px 0;
    font-size: 15.5px;
  }
  .faq .l-faq__more > summary {
    display: block;
    cursor: pointer;
    font-weight: 600;
    font-size: 15.5px;
    padding: 14px 44px 14px 0;
    list-style: none;
    position: relative;
    color: var(--clay-700);
  }
  .faq .l-faq__more > summary::-webkit-details-marker {
    display: none;
  }
  .faq .l-faq__more {
    border-bottom: 1px solid var(--hairline);
  }
  .faq .l-faq__more > summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1;
    color: var(--clay-600);
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 999px;
  }
}

/* ---- guides hub: a small frame per card, the Updated line ---- */
.article .l-guide-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px;
  grid-template-areas: 'head shot' 'body shot';
  gap: 6px 18px;
  align-items: center;
}

/* The title beside its icon on a two-column grid: a wrapped second line
   starts under the first, never under the icon. */
.article .l-guide-card h2 {
  grid-area: head;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin: 0;
}

.article .l-guide-card h2 .guide-card__icon {
  margin: 0;
  vertical-align: baseline;
}

.article .l-guide-card h2 .l-guide-card__title {
  padding-top: 3px;
}

.article .l-guide-card .l-guide-card__body {
  grid-area: body;
}

.article .l-guide-card .l-guide-card__shot {
  grid-area: shot;
  width: 84px;
  aspect-ratio: 390 / 560;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--hairline), var(--e2);
  background: var(--surface);
}

.article .l-guide-card .l-guide-card__shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px 16px 0 0;
}

.article .l-guide-card .l-guide-card__tail {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--clay-700);
}

.article .l-guide-card .l-guide-card__updated {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--ink-2);
}

.article .l-hub-note {
  margin: 14px 0 0;
}

@media (max-width: 560px) {
  .article .l-guide-card {
    grid-template-columns: minmax(0, 1fr) 72px;
    grid-template-areas: 'head head' 'body shot';
    gap: 8px 14px;
    align-items: start;
  }
  .article .l-guide-card .l-guide-card__shot {
    width: 72px;
    border-radius: 14px;
  }
  .article .l-guide-card .l-guide-card__shot img {
    border-radius: 14px 14px 0 0;
  }
}

/* ---- articles (guide, team, privacy, flyer): figures on the flat frame,
   the FAQ block in the index's grammar, the promises, the team card ---- */
.article .l-fig {
  margin: 28px auto 8px;
}

.article .l-fig .l-device {
  width: min(270px, 78vw);
}

.article .l-fig-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 22px 0 6px;
  justify-items: center;
}

.article .l-fig-row .l-fig {
  margin: 0;
}

.article .l-fig-row .l-device {
  width: min(220px, 36vw);
}

.article .aside.l-inapp h2 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
}

.article .l-faq {
  margin-top: 40px;
}

.article .l-faq details {
  border-bottom: 1px solid var(--hairline);
  padding: 4px 0;
}

.article .l-faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 16.5px;
  padding: 14px 54px 14px 0;
  list-style: none;
  position: relative;
  color: var(--ink);
}

.article .l-faq summary::-webkit-details-marker {
  display: none;
}

/* 7px in: the open state rotates the disc 45 degrees, which widens its
   box by 6px a side. */
.article .l-faq summary::after {
  content: '+';
  position: absolute;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1;
  color: var(--clay-600);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), 0 1px 2px rgb(60 42 28 / 0.06);
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
}

.article .l-faq details[open] summary {
  color: var(--clay-700);
}

.article .l-faq details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
  background: var(--clay-50);
  border-color: var(--clay-100);
}

.article .l-faq details p {
  padding: 0 48px 16px 0;
  margin: 0;
}

.article .l-promises {
  margin: 14px 0 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.article .l-promises li {
  padding-left: 26px;
  position: relative;
  color: var(--ink-2);
}

.article .l-promises li .lico {
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 16px;
  height: 16px;
  color: var(--sage-700);
}

.article .l-team-card {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  margin: 26px 0 8px;
  padding: 22px 24px;
  border-radius: 16px;
  background: var(--l-card);
  border: 1px solid var(--l-card-border);
  box-shadow: var(--l-card-shadow);
}

.article .l-team-card .l-founder__mark {
  flex: none;
}

.article .l-team-card h3 {
  margin: 2px 0;
}

.article .l-team-card p {
  margin: 0;
}

.article .l-team-card .team-card__role {
  margin-bottom: 10px;
}

.article .l-plug-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
}

.article .l-plug-grid .l-device {
  width: min(160px, 44vw);
}

.article .l-effective {
  font-size: 14px;
  color: var(--ink-2);
  margin-top: -6px;
}

.article .l-short {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 10px;
}

.article .l-short li {
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--l-card);
  border: 1px solid var(--l-card-border);
  box-shadow: var(--l-card-shadow);
  color: var(--ink-2);
}

.article .l-short li strong {
  color: var(--ink);
}

.article .l-article-figs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  justify-items: center;
  margin: 22px 0 6px;
}

.article .l-article-figs .l-fig {
  margin: 0;
}

.article .l-article-figs .l-device {
  width: min(210px, 40vw);
}

@media (max-width: 560px) {
  .article .l-team-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .article .l-plug-grid {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}

/* The hub's first card enters the 390 fold (the article opened 130px
   below the top on phones; the sticky nav is 59). */
@media (max-width: 680px) {
  .article {
    padding-top: 84px;
  }
  .article .article__standfirst {
    font-size: 17px;
    line-height: 1.5;
  }
  .article h1 {
    margin-bottom: 10px;
  }
}

/* ---- the 404 on the stylesheet ---- */
.l-404 {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(90px, 18vh, 160px) 24px 60px;
  text-align: center;
}

.l-404 h1 {
  font-size: clamp(34px, 6vw, 52px);
}

.l-404 p {
  color: var(--ink-2);
  font-size: 18px;
  margin-top: 14px;
}

.l-404 .l-404__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.l-404 .l-404__open {
  color: var(--clay-700);
  font-weight: 600;
}

/* ---- the OG card (1200 x 630, rendered by scripts/rebrand/rebrand-assets.mjs
   with this stylesheet): lockup, h1, colophon, domain, the light street in a
   device cut by the edge. Light card, light frame (LANDING.md §12.6). ---- */
.og {
  width: 1200px;
  height: 630px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 58% 42%;
  background: radial-gradient(70% 60% at 30% 20%, var(--clay-50) 0%, transparent 60%), var(--canvas);
}

.og .og__copy {
  padding: 64px 0 0 84px;
}

.og .og__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 600;
  color: var(--clay-700);
  margin: 0;
}

.og .og__brand img {
  width: 52px;
  height: 52px;
}

.og .og__h1 {
  margin: 44px 0 0;
  font-family: var(--font-display);
  font-size: 62px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 11em;
}

.og .og__h1 em {
  font-style: italic;
  color: var(--clay-600);
}

.og .og__colophon {
  margin-top: 24px;
  font-size: 26px;
  line-height: 1.35;
  color: var(--ink-2);
  font-weight: 600;
}

.og .og__domain {
  position: absolute;
  left: 84px;
  bottom: 44px;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink-2);
}

.og .og__phone {
  position: absolute;
  right: 110px;
  top: 78px;
  width: 300px;
  border-radius: 44px;
  box-shadow: 0 0 0 1px var(--hairline), var(--e5);
  overflow: hidden;
  background: var(--surface);
}

.og .og__phone img {
  display: block;
  width: 100%;
  height: auto;
}

/* The guides' "Updated" line under the standfirst (a date, not prose). */
.article .l-guide__updated {
  margin: -22px 0 30px;
  font-size: 13px;
  color: var(--ink-3);
}