/* 1Take website. Colours and type follow the app (lib/core/theme/app_palette.dart, app_type.dart)
   and the brand rules in product-and-brand.md §2.3: Geist only, ink and white, the spectrum only as light. */

@font-face { font-family: "Geist"; src: url("fonts/geist-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/geist-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/geist-semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  color-scheme: light dark;
  --bg: #FAFAFB;          /* background */
  --raised: #F1F2F5;      /* surface */
  --sunken: #E5E7EC;      /* surfaceSunken */
  --text: #0C0D10;        /* foreground */
  --text-2: #565B66;      /* foregroundSecondary */
  --text-3: #8D93A0;      /* foregroundTertiary */
  --rule: #E5E7EC;
  --button-bg: #0C0D10;   /* primary */
  --button-text: #FFFFFF; /* onPrimary */
  --gutter: 20px;
  --ui: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #08090B;
    --raised: #131519;
    --sunken: #1E2127;
    --text: #F1F3F6;
    --text-2: #A6ACB8;
    --text-3: #6C7380;
    --rule: #1E2127;
    --button-bg: #F1F3F6;
    --button-text: #08090B;
  }
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.6 var(--ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}

main { flex: 1; }

a { color: var(--text); text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--text-3); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; border-radius: 4px; }

/* The lockup: the mark and "1Take" side by side, Geist SemiBold, exactly −4%. */
.lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.32em;
  color: var(--text);
  font: 600 22px/1 var(--ui);
  letter-spacing: -0.04em;
  text-decoration: none;
}
.lockup svg { display: block; width: 0.95em; height: 0.95em; flex: none; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 28px;
  border-radius: 16px;
  background: var(--button-bg);
  color: var(--button-text);
  font: 600 17px/1 var(--ui);
  text-decoration: none;
  transition: transform 160ms var(--ease-out), opacity 160ms var(--ease-out);
}
.button svg { width: 20px; height: 20px; flex: none; }
.button:hover { opacity: 0.9; }
.button:active { transform: scale(0.97); }

/* ---------- front page: the app's welcome ---------- */

.is-home { min-height: 100vh; min-height: 100svh; }

/* About one screen tall (it scrolls rather than overlap). The photo hangs from the top edge and fades into the page, with
   the welcome's flare (light catching the lens, upper right). Its height gives way
   on short screens, cropped from the bottom so the face stays. */
.home {
  --art-w: min(100vw, 560px);
  --art-h: max(320px, min(calc(var(--art-w) * 1.2), calc(100svh - 400px)));
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
}

.art { position: relative; flex: none; width: var(--art-w); height: var(--art-h); margin: 0 auto; overflow: hidden; }
.art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
.art {
  -webkit-mask-image: linear-gradient(180deg, #000 45%, rgba(0, 0, 0, 0.55) 72%, transparent 98%);
  mask-image: linear-gradient(180deg, #000 45%, rgba(0, 0, 0, 0.55) 72%, transparent 98%);
}

@media (min-width: 600px) {
  /* Narrower than the screen: soften the sides too. */
  .art {
    -webkit-mask-image:
      linear-gradient(180deg, #000 45%, rgba(0, 0, 0, 0.55) 72%, transparent 98%),
      linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.5) 12%, #000 28%, #000 72%, rgba(0, 0, 0, 0.5) 88%, transparent);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(180deg, #000 45%, rgba(0, 0, 0, 0.55) 72%, transparent 98%),
      linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.5) 12%, #000 28%, #000 72%, rgba(0, 0, 0, 0.5) 88%, transparent);
    mask-composite: intersect;
  }
}

/* The brand flare (kit flareLayer): warm light upper right, one soft spectral band, two small ghosts. */
.flare { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.flare i { position: absolute; display: block; }
.flare .sun { inset: 0; background: radial-gradient(55% 32% at 96% 2%, rgba(255, 236, 200, 0.95), transparent 70%); }
.flare .band {
  left: -20%; right: -20%; top: -10%; height: 70%;
  transform: rotate(-28deg);
  transform-origin: 80% 0;
  background: linear-gradient(90deg, transparent 30%, rgba(127, 224, 230, 0.42) 42%, rgba(140, 140, 242, 0.38) 50%, rgba(231, 154, 217, 0.36) 58%, rgba(242, 194, 122, 0.34) 66%, transparent 78%);
  filter: blur(18px);
}
.flare .ghost { border-radius: 50%; }
.flare .g1 { left: 70%; top: 24%; width: 46px; height: 46px; background: radial-gradient(circle, rgba(231, 154, 217, 0.4), transparent 70%); }
.flare .g2 { left: 58%; top: 12%; width: 22px; height: 22px; background: radial-gradient(circle, rgba(127, 224, 230, 0.46), transparent 70%); }

.intro {
  position: relative;
  flex: none;
  margin-top: calc(var(--art-h) * -0.12); /* the headline sits in the photo's fade */
  padding: 0 var(--gutter);
  text-align: center;
}
.intro .lockup { font-size: 20px; margin-bottom: 20px; }

.intro h1 {
  margin: 0;
  font: 600 clamp(36px, 7vw, 52px)/1.04 var(--ui);
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.intro p {
  max-width: 30em;
  margin: 16px auto 28px;
  color: var(--text-2);
  font-size: 18px;
  line-height: 1.5;
  text-wrap: balance;
}

/* Entrance: light through glass, one step after another, no overlap, no bounce. */
@media (prefers-reduced-motion: no-preference) {
  .art img { animation: settle 900ms var(--ease-out) both; }
  .flare { animation: light 1200ms var(--ease-out) 300ms both; }
  .intro .lockup { animation: rise 420ms var(--ease-out) 500ms both; }
  .intro h1 { animation: rise 420ms var(--ease-out) 620ms both; }
  .intro p { animation: rise 420ms var(--ease-out) 740ms both; }
  .intro .button { animation: rise 420ms var(--ease-out) 860ms both; }
  .lost .mark-big { animation: settle 900ms var(--ease-out) both; }
}
/* Reduce Motion: everything is simply there, the flare included. */
@keyframes settle { from { transform: scale(1.03); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes light { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }

/* ---------- front page: the app, screen by screen (assets/show.js) ---------- */

html { overflow-x: clip; }

/* Phone: lockup, headline, the show, the line, the button. Wide: the words on the
   left, the show on the right, both centred in the first screen. */
.home-show {
  --pw: min(62vw, 252px); /* phone width */
  display: grid;
  grid-template-areas: "lockup" "head" "show" "text" "cta";
  justify-items: center;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px var(--gutter) 0;
  overflow-x: clip; /* the neighbouring screens peek in, never out */
  text-align: center;
}
.home-show .pitch { display: contents; }
.home-show .lockup { grid-area: lockup; font-size: 20px; }
.home-show h1 {
  grid-area: head;
  margin: 28px 0 0;
  font: 600 clamp(36px, 7vw, 56px)/1.04 var(--ui);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.home-show .pitch p {
  grid-area: text;
  max-width: 30em;
  margin: 28px 0 24px;
  color: var(--text-2);
  font-size: 18px;
  line-height: 1.5;
  text-wrap: balance;
}
.home-show .button { grid-area: cta; }
.show { grid-area: show; width: 100%; margin-top: 32px; }

@media (min-width: 900px) {
  .home-show {
    --pw: min(300px, calc((100svh - 260px) / 2.164));
    grid-template-columns: 1fr minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto auto 1fr;
    grid-template-areas: ". show" "lockup show" "head show" "text show" "cta show" ". show";
    justify-items: start;
    column-gap: 48px;
    min-height: calc(100svh - 120px);
    padding-top: 40px;
    text-align: left;
  }
  .home-show h1 { margin-top: 24px; }
  .home-show .pitch p { margin: 20px 0 32px; text-wrap: pretty; }
  .show { align-self: center; margin-top: 0; }
}

.slides {
  position: relative;
  height: calc(var(--pw) * 2.164); /* the screenshots are 1170 × 2532 */
  margin: 0;
  padding: 0;
  list-style: none;
  touch-action: pan-y;
}
/* Light behind the phone, soft and off to the upper right, as on the Pro screen. */
.slides::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--pw) * 2.2);
  height: calc(var(--pw) * 2.6);
  transform: translate(-46%, -54%);
  background: radial-gradient(closest-side, rgba(140, 140, 242, 0.16), rgba(127, 224, 230, 0.1) 45%, rgba(231, 154, 217, 0.08) 70%, transparent);
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  .slides::before { background: radial-gradient(closest-side, rgba(140, 140, 242, 0.2), rgba(127, 224, 230, 0.1) 45%, rgba(231, 154, 217, 0.08) 70%, transparent); }
}

.slide {
  --step: calc(var(--pw) * 0.78);
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--pw);
  margin-left: calc(var(--pw) / -2);
  transition: transform 420ms var(--ease-out), opacity 420ms var(--ease-out), filter 420ms var(--ease-out);
}
.slide[hidden] { display: none; }
.slide[data-pos="0"] { z-index: 2; }
/* Neighbours are solid and dimmed, never see-through, so screens don't blend while they change places. */
.slide[data-pos="1"], .slide[data-pos="-1"] { z-index: 1; cursor: pointer; filter: brightness(1.04) contrast(0.7) saturate(0.6); }
@media (prefers-color-scheme: dark) {
  .slide[data-pos="1"], .slide[data-pos="-1"] { filter: brightness(0.42) saturate(0.6); }
}
.slide[data-pos="1"] { transform: translateX(var(--step)) scale(0.8); }
.slide[data-pos="-1"] { transform: translateX(calc(var(--step) * -1)) scale(0.8); }
.slide[data-pos="far"] { opacity: 0; transform: scale(0.7); pointer-events: none; }
@media (min-width: 900px) { .slide { --step: calc(var(--pw) * 0.42); } }  /* tucked behind, clear of the words */

/* The phone: an ink body, the screen inset with concentric corners. No shadow. */
.phone {
  --bezel: calc(var(--pw) * 0.03);
  --r: calc(var(--pw) * 0.17);
  padding: var(--bezel);
  border-radius: var(--r);
  background: #0C0D10;
}
.phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--r) - var(--bezel));
  user-select: none;
  -webkit-user-drag: none;
}
@media (prefers-color-scheme: dark) {
  .phone { background: #1A1C21; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
}

/* The caption keeps its height (two lines on a phone) so nothing jumps; the pause button sits at its end. */
.show-caption { position: relative; display: flex; align-items: center; justify-content: center; min-height: 3.2em; margin: 16px 0 4px; padding: 0 44px; }
.caption { margin: 0; font-size: 16px; line-height: 1.4; font-weight: 500; text-align: center; text-wrap: balance; }
.show-caption .play { position: absolute; right: 0; top: 50%; translate: 0 -50%; }
.show:not(.is-live) .play, .show:not(.is-live) .thumbs { display: none; }

/* The steps as small screens with their names. The current one is at full strength
   with a heavier name; the others are quiet. Not a progress bar: any step, any order. */
.thumbs { display: flex; justify-content: center; gap: 2px; }
.thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 64px;
  white-space: nowrap;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--text-2);
  font: 400 12px/1.2 var(--ui);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 300ms var(--ease-out);
}
.thumb picture { display: block; width: 36px; }
.thumb img { display: block; width: 100%; height: auto; border-radius: 6px; background: var(--sunken); }
.thumb:hover { opacity: 0.8; }
.thumb.is-now { opacity: 1; color: var(--text); font-weight: 600; }
@media (min-width: 900px) {
  .show-caption { min-height: 2em; margin-top: 20px; }
  .caption { font-size: 17px; }
  .thumbs { gap: 10px; }
  .thumb { width: 76px; }
  .thumb picture { width: 44px; }
}

.play {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-2);
  cursor: pointer;
}
.play svg { width: 20px; height: 20px; fill: currentColor; }
.play .i-play, .play.is-paused .i-pause { display: none; }
.play.is-paused .i-play { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .home-show .lockup { animation: rise 420ms var(--ease-out) 100ms both; }
  .home-show h1 { animation: rise 420ms var(--ease-out) 220ms both; }
  .show { animation: settle 900ms var(--ease-out) 300ms both; }
  .home-show .pitch p { animation: rise 420ms var(--ease-out) 520ms both; }
  .home-show .button { animation: rise 420ms var(--ease-out) 640ms both; }
}
/* Reduce Motion: screens change in place, and the show never moves by itself (show.js). */
@media (prefers-reduced-motion: reduce) {
  .slide { transition: opacity 200ms linear; }
}

/* ---------- not found ---------- */

.lost { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px var(--gutter) 0; text-align: center; }
.lost .mark-big { position: relative; width: 120px; height: 120px; margin-bottom: 40px; color: var(--text); }
.lost .mark-big svg { position: relative; display: block; width: 100%; height: 100%; }
.lost .mark-big::before {
  /* light catching the mark, upper right */
  content: "";
  position: absolute;
  inset: -60%;
  background: radial-gradient(circle closest-side at 62% 38%, rgba(255, 236, 200, 0.85), rgba(140, 140, 242, 0.2) 45%, rgba(231, 154, 217, 0.12) 70%, transparent);
  filter: blur(6px);
}
.lost h1 { margin: 0; font: 600 clamp(32px, 6vw, 44px)/1.08 var(--ui); letter-spacing: -0.03em; }
.lost p { margin: 12px 0 28px; color: var(--text-2); font-size: 18px; }

/* ---------- policy and support pages ---------- */

.top, .doc { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 var(--gutter); }
.top { padding-top: 32px; }

.doc { padding-bottom: 32px; }
.doc h1 {
  margin: 64px 0 12px;
  font: 600 clamp(36px, 7vw, 52px)/1.06 var(--ui);
  letter-spacing: -0.03em;
}
.doc h2 {
  margin: 56px 0 12px;
  font: 600 24px/1.25 var(--ui);
  letter-spacing: -0.02em;
}
.doc h3 {
  margin: 32px 0 8px;
  font: 600 18px/1.4 var(--ui);
  letter-spacing: -0.01em;
}
.doc p, .doc ul { margin: 0 0 16px; }
.doc ul { padding-left: 1.25em; }
.doc li { margin-bottom: 8px; }
.doc li::marker { color: var(--text-3); }
.doc strong { font-weight: 600; }
.doc a { overflow-wrap: anywhere; }
.doc .meta { color: var(--text-2); font-size: 15px; }
.doc .lead { margin: 0 0 32px; color: var(--text-2); font-size: 20px; line-height: 1.5; }
.doc .button { margin-bottom: 8px; color: var(--button-text); text-decoration: none; }

/* A short summary at the top of a policy: a soft surface step, no border. */
.doc .summary { margin: 32px 0 8px; padding: 20px; border-radius: 16px; background: var(--raised); }
.doc .summary h2 { margin: 0 0 8px; font-size: 18px; }
.doc .summary ul { margin: 0; }
.doc .summary li:last-child { margin-bottom: 0; }

/* Placeholders for Kristoffer, visible until they are filled in. */
.todo { padding: 1px 6px; border-radius: 4px; background: #FFE9A8; color: #3D2E00; font-weight: 500; }
@media (prefers-color-scheme: dark) { .todo { background: #4A3A0B; color: #FFE9A8; } }

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

.footer {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 96px var(--gutter) 48px;
  color: var(--text-2);
  font-size: 15px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 12px 24px;
}
.footer-links { display: contents; }
.footer-links a { color: var(--text); text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer p { margin: 0; }
.is-home .footer { flex: none; padding-top: 48px; padding-bottom: max(32px, env(safe-area-inset-bottom)); }

/* ======================================================================
   14 Nov 2026: the bar, the light-tunnel front page, How it works, FAQ, About.
   ====================================================================== */

.skip { position: absolute; left: 12px; top: -60px; z-index: 10; padding: 10px 16px; border-radius: 8px; background: var(--button-bg); color: var(--button-text); text-decoration: none; }
.skip:focus { top: 12px; }

/* The bar: the lockup home on the left, three plain links on the right. The current
   page is the text colour and SemiBold, the others secondary: weight and colour, never colour alone. */
.bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) var(--gutter) 0;
}
.bar .lockup { font-size: 20px; min-height: 44px; }
.bar-links { display: flex; gap: 4px; }
.bar-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  color: var(--text-2);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.bar-links a:hover { color: var(--text); }
.bar-links a[aria-current="page"] { color: var(--text); font-weight: 600; }
.bar-links a:last-child { padding-right: 0; }
@media (max-width: 380px) {
  .bar .lockup { font-size: 18px; }
  .bar-links a { padding: 0 7px; font-size: 14px; }
}
.footer-links a[aria-current="page"] { font-weight: 600; }

/* ---------- front page: the light tunnel ---------- */

.is-tunnel { position: relative; min-height: 100vh; min-height: 100svh; }

/* Fixed behind everything. Before the script runs (or without it) a soft glow stands in;
   without WebGL2, a still of the tunnel. */
.tunnel {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(60% 55% at 50% 48%, transparent 30%, rgba(12, 13, 16, 0.05) 70%, transparent);
}
.tunnel.is-live { background: none; }
.tunnel.is-still { background: url("tunnel-still-light.webp") center / cover no-repeat; }
@media (prefers-color-scheme: dark) {
  .tunnel { background: radial-gradient(60% 55% at 50% 48%, transparent 30%, rgba(241, 243, 246, 0.06) 70%, transparent); }
  .tunnel.is-live { background: none; }
  .tunnel.is-still { background: url("tunnel-still-dark.webp") center / cover no-repeat; }
}
.tunnel-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .tunnel-canvas { animation: light 1600ms var(--ease-out) both; }
}

.is-tunnel .footer { position: relative; z-index: 1; flex: none; padding-top: 32px; padding-bottom: max(28px, env(safe-area-inset-bottom)); }

.hero {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px var(--gutter) 24px;
  text-align: center;
}
.hero-icon {
  display: block;
  width: 104px;
  height: 104px;
  margin-bottom: 36px;
  border-radius: 23px;
}
.hero h1 {
  margin: 0;
  font: 600 clamp(31px, 8.4vw, 64px)/1.04 var(--ui);
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.hero-text {
  max-width: 30em;
  margin: 20px auto 32px;
  color: var(--text-2);
  font-size: 18px;
  line-height: 1.5;
  text-wrap: balance;
}
.fine { margin: 14px 0 0; color: var(--text-2); font-size: 14px; }

@media (prefers-reduced-motion: no-preference) {
  .hero-icon { animation: settle 900ms var(--ease-out) 200ms both; }
  .hero h1 { animation: rise 420ms var(--ease-out) 520ms both; }
  .hero-text { animation: rise 420ms var(--ease-out) 640ms both; }
  .hero .button { animation: rise 420ms var(--ease-out) 760ms both; }
  .hero .fine { animation: rise 420ms var(--ease-out) 860ms both; }
}

/* ---------- How it works: the show, then the steps ---------- */

.how {
  --pw: min(62vw, 268px);
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  overflow-x: clip;
}
.how-head { max-width: 720px; margin: 0 auto; text-align: center; }
.how-head h1 { margin: 64px 0 12px; font: 600 clamp(36px, 7vw, 52px)/1.06 var(--ui); letter-spacing: -0.03em; }
.how-head .lead { margin: 0 auto; max-width: 32em; color: var(--text-2); font-size: 20px; line-height: 1.5; text-wrap: balance; }
.how .show { margin-top: 48px; }

.steps {
  display: grid;
  gap: 40px;
  max-width: 960px;
  margin: 80px auto 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li { counter-increment: step; }
.steps li::before {
  content: counter(step);
  display: block;
  margin-bottom: 12px;
  color: var(--text-3);
  font: 600 15px/1 var(--ui);
}
.steps h2 { margin: 0 0 8px; font: 600 22px/1.25 var(--ui); letter-spacing: -0.02em; }
.steps p { margin: 0; color: var(--text-2); }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(2, 1fr); gap: 48px 64px; } }
@media (min-width: 1040px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 40px; } }

.cta { display: flex; flex-direction: column; align-items: center; margin: 88px 0 0; text-align: center; }

@media (prefers-reduced-motion: no-preference) {
  .how-head h1 { animation: rise 420ms var(--ease-out) 80ms both; }
  .how-head .lead { animation: rise 420ms var(--ease-out) 200ms both; }
  .how .show { animation: settle 900ms var(--ease-out) 260ms both; }
}

/* ---------- FAQ: topics, then questions that open in place ---------- */

.jump { margin: 0 0 16px; }
.jump ul { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 0; padding: 0; list-style: none; }
.jump a { display: inline-flex; min-height: 44px; align-items: center; color: var(--text-2); font-weight: 500; text-decoration: none; }
.jump a:hover { color: var(--text); text-decoration: underline; }

.faq-group { scroll-margin-top: 24px; }
.faq-group h2 { margin-bottom: 8px; }

/* Each question is a row on the page, separated by a hairline step in surface, no box. */
.qa { border-bottom: 1px solid var(--rule); }
.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary h3 { margin: 0; font: 500 17px/1.4 var(--ui); letter-spacing: -0.005em; }
.qa summary:hover h3 { text-decoration: underline; text-decoration-color: var(--text-3); text-underline-offset: 3px; }
.qa .chev { flex: none; width: 20px; height: 20px; color: var(--text-3); transition: transform 240ms var(--ease-out); }
.qa[open] .chev { transform: rotate(180deg); }
.qa[open] summary h3 { font-weight: 600; }
.qa .answer { padding: 0 36px 20px 0; color: var(--text-2); }
.qa .answer p:last-child, .qa .answer ul:last-child { margin-bottom: 0; }
.qa .answer strong { color: var(--text); }
@media (prefers-reduced-motion: no-preference) {
  .qa[open] .answer { animation: rise 260ms var(--ease-out) both; }
}

.ask { margin-top: 72px; padding: 28px; border-radius: 16px; background: var(--raised); }
.ask h2 { margin: 0 0 8px; }
.ask p:last-child { margin: 20px 0 0; }

/* ---------- About ---------- */

.facts { display: grid; gap: 0; margin: 0 0 8px; }
.facts div { display: grid; grid-template-columns: 7.5em 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.facts dt { color: var(--text-2); }
.facts dd { margin: 0; }
@media (max-width: 480px) { .facts div { grid-template-columns: 1fr; gap: 2px; } }

.doc ul.downloads { margin: 24px 0; padding: 0; list-style: none; }
.downloads li { display: flex; justify-content: space-between; gap: 16px; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.downloads span { color: var(--text-3); font-size: 15px; }

/* The icon is light: on the light page a hairline keeps its edge (as the App Store does). */
.hero-icon { box-shadow: 0 0 0 1px rgba(12, 13, 16, 0.08); }
@media (prefers-color-scheme: dark) { .hero-icon { box-shadow: none; } }

/* Apple's badge, unaltered: 54 px tall (min 40), at least a quarter of its height clear around it. */
.store-badge { display: inline-block; padding: 14px; margin: -14px; border-radius: 12px; line-height: 0; }
.store-badge img { display: block; width: auto; height: 54px; }
.store-badge:hover img { opacity: 0.88; }
.hero .store-badge, .cta .store-badge { margin-top: -6px; }
@media (prefers-reduced-motion: no-preference) {
  .hero .store-badge { animation: rise 420ms var(--ease-out) 760ms both; }
}
.footer .credit { flex-basis: 100%; max-width: 40em; margin: 4px auto 0; color: var(--text-3); font-size: 12px; line-height: 1.5; }