/* galivo.app — tokens and layout recreated from web/design/project/Galivo Landing.dc.html */

:root {
  --night: 0;
  --bg-l: 0.972;
  --fg: #121216;
  --sub: rgba(60, 60, 67, 0.8);
  --line: rgba(0, 0, 0, 0.08);
  --chip: rgba(0, 0, 0, 0.05);
  --accent: oklch(0.52 0.2 268);
  --card: #fff;
  --wm-dot: #4364df;
  --night-fg: #f4f4f6;
  --night-sub: rgba(235, 235, 245, 0.74);
  --night-line: rgba(255, 255, 255, 0.12);
  --night-accent: oklch(0.74 0.14 268);
  --night-cell: rgba(255, 255, 255, 0.04);
  --night-band: oklch(0.16 0.012 280);
  --tg-bg: rgba(255, 255, 255, 0.65);
  --tg-edge: rgba(0, 0, 0, 0.08);
  --tg-on: #fff;
  --tg-on-fg: #121216;
  --tg-fg: rgba(60, 60, 67, 0.8);
  --bg: oklch(calc(0.972 - 0.842 * var(--night)) calc(0.003 + 0.009 * var(--night)) 280);
  --sel: color-mix(in oklch, var(--accent) 22%, transparent);
  /* icon (light variant) */
  --i-bg: oklch(0.55 0.19 268);
  --i-back: rgba(255, 255, 255, 0.28);
  --i-photo: oklch(0.9 0.05 85);
  --i-sun: oklch(0.8 0.13 70);
  --i-hill: oklch(0.66 0.09 165);
  --i-ring: #fff;
  --i-lens: rgba(255, 255, 255, 0.18);
  --i-edge: rgba(255, 255, 255, 0.12);
  /* hero photo tiles */
  --tile-rim: #fff;
  --tile-shadow: 0 14px 34px -10px rgba(20, 24, 60, 0.32), 0 3px 8px rgba(20, 24, 60, 0.1);
  --tile-filter: saturate(0.96);
  --tile-filter-edge: saturate(0.78) contrast(0.96);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color-scheme: light;
}

/* Dark theme — the same values whether picked by the system (auto) or by the toggle. */
:root[data-theme='dark'] {
  --fg: #f4f4f6;
  --sub: rgba(235, 235, 245, 0.74);
  --line: rgba(255, 255, 255, 0.12);
  --chip: rgba(255, 255, 255, 0.08);
  --accent: oklch(0.74 0.14 268);
  --card: oklch(0.21 0.01 280);
  --wm-dot: #587cf1;
  --bg: oklch(calc(0.15 - 0.04 * var(--night)) calc(0.003 + 0.009 * var(--night)) 280);
  --night-band: transparent;
  --i-bg: oklch(0.2 0.01 270);
  --i-back: rgba(255, 255, 255, 0.1);
  --i-photo: oklch(0.36 0.05 268);
  --i-sun: oklch(0.8 0.1 70);
  --i-hill: oklch(0.5 0.08 165);
  --i-ring: oklch(0.72 0.15 268);
  --i-lens: rgba(255, 255, 255, 0.06);
  --i-edge: rgba(255, 255, 255, 0.08);
  --tile-rim: rgba(255, 255, 255, 0.86);
  --tile-shadow: 0 16px 38px -10px rgba(0, 0, 0, 0.7), 0 3px 8px rgba(0, 0, 0, 0.4);
  --tile-filter: brightness(0.74) saturate(0.88);
  --tile-filter-edge: brightness(0.64) saturate(0.78);
  color-scheme: dark;
}
/* No-JS fallback: follow the system. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --fg: #f4f4f6;
    --sub: rgba(235, 235, 245, 0.74);
    --line: rgba(255, 255, 255, 0.12);
    --chip: rgba(255, 255, 255, 0.08);
    --accent: oklch(0.74 0.14 268);
    --card: oklch(0.21 0.01 280);
    --wm-dot: #587cf1;
    --bg: oklch(0.15 0.003 280);
    --night-band: transparent;
    --i-bg: oklch(0.2 0.01 270);
    --i-back: rgba(255, 255, 255, 0.1);
    --i-photo: oklch(0.36 0.05 268);
    --i-hill: oklch(0.5 0.08 165);
    --i-ring: oklch(0.72 0.15 268);
    --i-lens: rgba(255, 255, 255, 0.06);
    --tile-rim: rgba(255, 255, 255, 0.86);
    --tile-shadow: 0 16px 38px -10px rgba(0, 0, 0, 0.7), 0 3px 8px rgba(0, 0, 0, 0.4);
    --tile-filter: brightness(0.74) saturate(0.88);
    --tile-filter-edge: brightness(0.64) saturate(0.78);
    color-scheme: dark;
  }
  :root:not([data-theme]) .scr-light { display: none; }
}
:root:not([data-theme]) .scr-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .scr-dark { display: block; } }
:root[data-theme='light'] .scr-dark,
:root[data-theme='dark'] .scr-light { display: none; }

/* Toggle chrome over the night sections (light mode) or in dark mode. */
:root[data-theme='dark'],
:root[data-night='1'] {
  --tg-bg: rgba(40, 40, 46, 0.55);
  --tg-edge: rgba(255, 255, 255, 0.14);
  --tg-on: rgba(255, 255, 255, 0.18);
  --tg-on-fg: #fff;
  --tg-fg: rgba(235, 235, 245, 0.72);
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
  scrollbar-color: color-mix(in oklch, var(--fg) 28%, transparent) transparent;
}
body { margin: 0; background: var(--bg); min-height: 100vh; }
::selection { background: var(--sel); color: inherit; }
img, svg, video { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration: none; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.92em; }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 80;
  padding: 10px 16px; border-radius: 12px; background: var(--card); color: var(--fg);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
}
.skip:focus { top: 12px; }

/* ---------------------------------------------------------------- fixed theme toggle */
.theme-toggle {
  position: fixed; top: 16px; right: 16px; z-index: 60;
  display: flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: var(--tg-bg);
  backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: inset 0 0 0 0.5px var(--tg-edge), 0 6px 20px rgba(0, 0, 0, 0.08);
  transition: background 0.2s linear;
}
:root:not(.js) .theme-toggle { display: none; }
.theme-toggle button {
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--tg-fg);
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.theme-toggle button:hover { color: var(--tg-on-fg); }
.theme-toggle button[aria-pressed='true'] { background: var(--tg-on); color: var(--tg-on-fg); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
:root[data-theme='dark'] .theme-toggle button[aria-pressed='true'],
:root[data-night='1'] .theme-toggle button[aria-pressed='true'] { box-shadow: none; }
.theme-toggle button:focus-visible { outline-offset: 1px; border-radius: 16px; }

/* ---------------------------------------------------------------- top bar */
.top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  height: 70px; padding: 0 140px 0 max(20px, env(safe-area-inset-left)); max-width: 1260px; margin: 0 auto;
}
.top-brand { display: block; color: var(--fg); }
.top-brand:hover { text-decoration: none; opacity: 0.8; }
.wordmark .wm-dot { fill: var(--wm-dot); }
.wm-top { height: 30px; width: auto; }
.top-nav a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 32px; padding: 0 12px; border-radius: 16px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--fg);
  background: var(--chip);
}
.top-nav a:hover { text-decoration: none; background: color-mix(in oklch, var(--fg) 12%, transparent); }

/* ---------------------------------------------------------------- landing story */
.story { position: relative; display: block; }
.panel {
  position: relative; z-index: 3;
  max-width: 1180px; margin: 0 auto; padding: 72px 20px;
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center;
}
.panel.hero { padding-top: 104px; }
.copy { max-width: 520px; display: flex; flex-direction: column; gap: 20px; }
.hero .copy { gap: 24px; }
.copy-b { grid-column: 1; }

h1 { margin: 0; font-size: clamp(44px, 6.2vw, 80px); line-height: 0.96; font-weight: 700; letter-spacing: -0.04em; }
h2 { margin: 0; font-size: clamp(36px, 4.6vw, 60px); line-height: 1; font-weight: 700; letter-spacing: -0.035em; }
h2.h-big { font-size: clamp(40px, 5.4vw, 72px); line-height: 0.98; letter-spacing: -0.04em; }
.lead { margin: 0; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.5; color: var(--sub); max-width: 62ch; }
.hero .lead { font-size: clamp(17px, 1.6vw, 20px); }
.fine { margin: 0; font-size: 14px; color: var(--sub); }

.points { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
.points li { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-top: 1px solid var(--line); }
.points strong { font-size: 16px; font-weight: 600; }
.points span { font-size: 15px; line-height: 1.45; color: var(--sub); }

.cells {
  list-style: none; margin: 6px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--night-line); border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--night-line);
}
.cells li { display: flex; flex-direction: column; gap: 5px; padding: 16px 18px; background: var(--night-band); }
.cells strong { font-size: 16px; font-weight: 600; }
.cells span { font-size: 14px; line-height: 1.4; color: var(--night-sub); }

.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { height: 32px; padding: 0 14px; border-radius: 16px; display: flex; align-items: center; font-size: 14px; font-weight: 500; background: var(--chip); }

/* Night sections (voice, privacy): light text on the dark band. */
.night { color: var(--night-fg); background: var(--night-band); max-width: none; }
.night .lead, .night .points span { color: var(--night-sub); }
.night .points, .night .points li { border-color: var(--night-line); }
.night .copy { margin: 0 auto; width: 100%; }
.night ::selection { background: color-mix(in oklch, var(--night-accent) 35%, transparent); }
.night a { color: var(--night-accent); }

/* App Store badge — Apple badge layout (black, 1px #a6a6a6 rim). Not linked until APP_STORE_URL is set. */
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.badge {
  height: 56px; padding: 0 20px 0 14px; border-radius: 13px; background: #000; color: #fff;
  display: inline-flex; align-items: center; gap: 10px;
  box-shadow: inset 0 0 0 1px #a6a6a6, 0 6px 20px rgba(0, 0, 0, 0.14);
}
a.badge:hover { text-decoration: none; opacity: 0.85; }
.badge-text { display: flex; flex-direction: column; line-height: 1; gap: 3px; }
.badge-top { font-size: 11px; font-weight: 500; letter-spacing: 0.02em; }
.badge-name { font-size: 23px; font-weight: 600; letter-spacing: -0.025em; }
.soon {
  height: 28px; padding: 0 12px; border-radius: 14px; display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 700; color: #fff; background: oklch(0.52 0.2 268);
}
/* Campaign line: its own row under the badge, clear space ≥ ¼ badge height (Apple badge rule). */
.offer { flex-basis: 100%; margin: 4px 0 0; font-size: 15px; font-weight: 600; color: var(--accent); }

/* Hero icon — the app icon composition from Galivo Icon.dc.html, animated once on load. */
.hero-mark { display: flex; align-items: center; gap: 16px; color: var(--fg); }
.wm-hero { height: 52px; width: auto; }
.landing .top-brand { visibility: hidden; }
.gv-icon {
  position: relative; width: 100em; height: 100em; font-size: 0.76px; flex: none;
  border-radius: 22.4em; overflow: hidden; background: var(--i-bg);
  box-shadow: inset 0 0 0 0.4em var(--i-edge), 0 10px 24px rgba(20, 24, 60, 0.16);
}
.gv-icon > div { position: absolute; }
.gv-back { left: 15em; top: 15em; width: 44em; height: 54em; border-radius: 9em; background: var(--i-back); transform: rotate(-12deg); }
.gv-photo { left: 36em; top: 12em; width: 46em; height: 56em; border-radius: 9em; background: var(--i-photo); transform: rotate(8deg); overflow: hidden; box-shadow: 0 1.5em 4em rgba(0, 0, 0, 0.18); }
.gv-sun { position: absolute; right: 7em; top: 8em; width: 11em; height: 11em; border-radius: 50%; background: var(--i-sun); }
.gv-hill { position: absolute; left: -10em; top: 33em; width: 70em; height: 70em; border-radius: 50%; background: var(--i-hill); }
.gv-lens { left: 21em; top: 37em; width: 46em; height: 46em; border-radius: 50%; border: 5em solid var(--i-ring); background: var(--i-lens); backdrop-filter: blur(1.6em) saturate(150%); -webkit-backdrop-filter: blur(1.6em) saturate(150%); box-shadow: 0 2em 4.5em rgba(0, 0, 0, 0.22), inset 0 0.6em 1.2em rgba(255, 255, 255, 0.45); }
.gv-handle { left: 62em; top: 71em; width: 9em; height: 20em; border-radius: 4.5em; background: var(--i-ring); transform: rotate(-45deg); box-shadow: 0 1.5em 3em rgba(0, 0, 0, 0.2); }
@media (prefers-reduced-motion: no-preference) {
  .gv-icon { animation: gvTile 0.6s var(--ease-out) 0.3s both; }
  .gv-back { animation: gvBack 0.7s var(--ease-out) 0.45s both; }
  .gv-photo { animation: gvPhoto 0.8s var(--ease-out) 0.6s both; }
  .gv-sun { animation: gvSun 0.5s var(--ease-out) 1.05s both; }
  .gv-hill { animation: gvHill 0.7s var(--ease-out) 0.9s both; }
  .gv-lens { animation: gvLens 0.8s var(--ease-out) 1.2s both; }
  .gv-handle { animation: gvHandle 0.4s var(--ease-out) 1.75s both; }
}
@keyframes gvTile { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.04); opacity: 1; } 100% { transform: scale(1); } }
@keyframes gvBack { 0% { transform: translate(-6em, 6em) rotate(-30deg); opacity: 0; } 100% { transform: rotate(-12deg); opacity: 1; } }
@keyframes gvPhoto { 0% { transform: translate(10em, 8em) rotate(28deg); opacity: 0; } 70% { transform: rotate(5deg); opacity: 1; } 100% { transform: rotate(8deg); } }
@keyframes gvSun { 0% { transform: scale(0); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes gvHill { 0% { transform: translateY(30em); } 100% { transform: translateY(0); } }
@keyframes gvLens { 0% { transform: translate(-8em, -14em) scale(0.5); opacity: 0; } 65% { transform: translate(0, 1em) scale(1.04); opacity: 1; } 100% { transform: none; } }
@keyframes gvHandle { 0% { transform: rotate(-45deg) translateY(-6em) scaleY(0.3); opacity: 0; } 100% { transform: rotate(-45deg); opacity: 1; } }

/* ---------------------------------------------------------------- phone */
.phone {
  width: 424px; height: 896px; padding: 11px; border-radius: 66px; background: #0c0c0e;
  box-shadow: 0 0 0 1.5px #3a3a3f, 0 40px 90px rgba(0, 0, 0, 0.28);
}
.phone-screen { position: relative; width: 402px; height: 874px; border-radius: 55px; overflow: hidden; background: #000; }
.scr, .vid, .vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vid video { z-index: 1; }

/* Mobile / narrow: one inline phone per section, sized with the viewport (container units keep the bezel proportional). */
.phone-inline {
  width: min(424px, calc(100vw - 40px), calc(88vh * 424 / 896)); aspect-ratio: 424 / 896;
  margin: 48px auto 0; container-type: inline-size;
}
.phone-inline .phone { width: 100%; height: 100%; padding: 2.594cqw; border-radius: 15.566cqw; }
.phone-inline .phone-screen { width: 100%; height: 100%; border-radius: 12.972cqw; }
.night .phone { box-shadow: 0 0 0 1.5px #3a3a3f, 0 40px 90px rgba(0, 0, 0, 0.4); }

.pin { display: none; }

/* ---------------------------------------------------------------- desktop: sticky phone story */
@media (min-width: 860px) {
  .panel { height: 100vh; min-height: 760px; padding: 0 40px; grid-template-columns: 1fr 1fr; }
  .panel.hero { padding-top: 0; }
  .copy { max-width: 480px; }
  .hero .copy { max-width: 520px; }
  .copy-a { grid-column: 1; }
  .copy-b { grid-column: 2; }
  .night { max-width: 1180px; }
  :root.js .night { background: transparent; }
  .night .copy { margin: 0; }
  .phone-inline { display: none; }
  :root.js .pin { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 2; }
  :root.js .night { --night-band: rgba(255, 255, 255, 0.04); }
  .pin-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
  .phone-pinned { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.8); will-change: transform; }
  .layer { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
  .layer.is-on { opacity: 1; visibility: visible; }
  /* Without JS the inline phones stay, laid out in the second column. */
  :root:not(.js) .phone-inline { display: block; grid-row: 1; margin: 0 auto; width: min(340px, calc((100vh - 150px) * 424 / 896)); }
  :root:not(.js) .copy-a + .phone-inline { grid-column: 2; }
  :root:not(.js) .copy-b + .phone-inline { grid-column: 1; }
}

/* ---------------------------------------------------------------- hero photo tiles (decorative, aria-hidden)
   Scattered behind the copy and the phone, densest at the corners; never under the wordmark/headline/lead/badge
   (clean zone = the copy box + 24 px). Images: tools/web/hero_tiles.py. Motion: landing.js (parallax + fade-out on
   scroll: `translate` + `scale` on each .tile, opacity on .tiles) + the idle float below. Desktop coordinates are
   offsets from the hero centre because the copy column and the phone are centred (max 1180 px) at every width ≥ 1180. */
.tiles {
  position: absolute; top: 0; left: 0; right: 0; height: 0; z-index: 1;
  overflow-x: clip; pointer-events: none;
}
.tile { position: absolute; width: var(--w); rotate: var(--r); display: none; }
.tile img {
  width: 100%; height: auto; border-radius: 20px; border: 3px solid var(--tile-rim);
  box-shadow: var(--tile-shadow); filter: var(--tile-filter); background: var(--chip);
}
.t1 img, .t6 img, .t8 img, .t12 img, .t13 img { filter: var(--tile-filter-edge); }
@media (prefers-reduced-motion: no-preference) {
  .tile img { animation: tileFloat var(--f, 11s) ease-in-out var(--fd, 0s) infinite alternate; }
}
@keyframes tileFloat { from { transform: translate3d(0, -4px, 0) rotate(-0.4deg); } to { transform: translate3d(0, 5px, 0) rotate(0.5deg); } }
.t1 { --f: 12s; --fd: -3s; } .t2 { --f: 9s; --fd: -6s; } .t3 { --f: 13s; --fd: -1s; } .t4 { --f: 10s; --fd: -4s; }
.t5 { --f: 14s; --fd: -9s; } .t6 { --f: 11s; --fd: -2s; } .t7 { --f: 8.5s; --fd: -5s; } .t8 { --f: 12.5s; --fd: -7s; }
.t9 { --f: 10.5s; --fd: -3s; } .t10 { --f: 9.5s; --fd: -8s; } .t11 { --f: 13.5s; --fd: -2s; } .t12 { --f: 11.5s; --fd: -6s; }
.t13 { --f: 10s; --fd: -1s; }

/* Mobile / narrow (< 860): a fanned strip of five above the wordmark; the hero copy moves down to make room. */
@media (max-width: 859px) {
  .panel.hero { padding-top: calc(104px + min(36vw, 150px)); }
  .tiles .t1, .tiles .t2, .tiles .t4, .tiles .t7, .tiles .t12 { display: block; }
  .t1 { left: -7%; top: 92px; --w: min(31%, 170px); --r: -8deg; }
  .t7 { left: 19%; top: 70px; --w: min(23%, 124px); --r: 5deg; }
  .t2 { left: 41%; top: 84px; --w: min(21%, 116px); --r: -4deg; }
  .t4 { left: 60%; top: 76px; --w: min(30%, 168px); --r: 7deg; }
  .t12 { left: 83%; top: 112px; --w: min(30%, 168px); --r: -6deg; }
  .tile img { border-radius: 14px; border-width: 2px; }
}

/* Tablet (860–1179): eight cards along the top band, the right edge and the bottom band. */
@media (min-width: 860px) and (max-width: 1179px) {
  .tiles { height: max(100vh, 760px); }
  .t1, .t2, .t3, .t4, .t6, .t8, .t10, .t12 { display: block; }
  .t1 { left: -3%; top: -34px; --w: 180px; --r: -7deg; }
  .t2 { left: 25%; top: -46px; --w: 104px; --r: 6deg; }
  .t3 { left: 40%; top: -30px; --w: 110px; --r: -5deg; }
  .t4 { left: 57%; top: -20px; --w: 170px; --r: 4deg; }
  .t6 { right: -34px; top: 22%; --w: 140px; --r: -6deg; }
  .t8 { right: -44px; bottom: 12%; --w: 200px; --r: -8deg; }
  .t10 { left: 30%; bottom: -40px; --w: 170px; --r: -5deg; }
  .t12 { left: -30px; bottom: -34px; --w: 190px; --r: 6deg; }
}

/* Desktop (≥ 1180): all thirteen (twelve below 1360 px). */
@media (min-width: 1180px) {
  .tiles { height: max(100vh, 760px); }
  .tile { display: block; left: calc(50% + var(--x)); top: calc(50% + var(--y)); }
  .t1 { --x: -820px; --y: -470px; --w: 240px; --r: -7deg; }
  .t2 { --x: -520px; --y: -500px; --w: 130px; --r: 6deg; }
  .t3 { --x: -250px; --y: -482px; --w: 140px; --r: -5deg; }
  .t4 { --x: -10px; --y: -452px; --w: 200px; --r: 4deg; }
  .t5 { --x: 262px; --y: -482px; --w: 150px; --r: 7deg; }
  .t6 { --x: 540px; --y: -330px; --w: 180px; --r: -6deg; }
  .t7 { --x: 490px; --y: -40px; --w: 170px; --r: 5deg; }
  .t8 { --x: 520px; --y: 230px; --w: 240px; --r: -8deg; }
  .t9 { --x: 180px; --y: 330px; --w: 220px; --r: 4deg; }
  .t10 { --x: -120px; --y: 318px; --w: 200px; --r: -5deg; }
  .t11 { --x: -430px; --y: 330px; --w: 190px; --r: 6deg; }
  .t12 { --x: -830px; --y: 250px; --w: 230px; --r: -6deg; }
  .t13 { --x: -760px; --y: -120px; --w: 150px; --r: 7deg; }
}
@media (min-width: 1180px) and (max-width: 1359px) { .t13 { display: none; } }

/* ---------------------------------------------------------------- footer */
.foot {
  position: relative; z-index: 3; max-width: 1180px; margin: 0 auto; padding: 40px 32px 56px;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 28px;
  border-top: 1px solid var(--line); font-size: 14px; color: var(--sub);
}
.foot-brand { display: flex; align-items: center; gap: 10px; color: var(--fg); }
.foot-icon { border-radius: 7px; }
.wm-foot { height: 24px; width: auto; }
.foot-legal { margin: 0; flex: 1 1 260px; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* ---------------------------------------------------------------- reading pages (privacy, support, 404) */
.reading .top { position: relative; }
.doc { max-width: 1180px; margin: 0 auto; padding: 32px 20px 96px; }
.doc-head { max-width: 68ch; margin-bottom: 40px; }
.doc h1 { font-size: clamp(40px, 5.4vw, 64px); letter-spacing: -0.04em; line-height: 1; }
.doc-date { margin: 16px 0 0; font-size: 14px; color: var(--sub); font-variant-numeric: tabular-nums; }
.lede { font-size: clamp(18px, 1.6vw, 20px); line-height: 1.55; color: var(--fg); margin: 20px 0 0; max-width: 62ch; }
.doc-body { max-width: 68ch; font-size: 17px; line-height: 1.65; }
.doc-body h2 { font-size: 26px; line-height: 1.2; letter-spacing: -0.02em; margin: 56px 0 12px; scroll-margin-top: 24px; }
.doc-body section:first-child h2 { margin-top: 0; }
.doc-body p { margin: 0 0 14px; }
.doc-body ul { margin: 0 0 14px; padding-left: 1.2em; }
.doc-body li { margin: 6px 0; }
.doc-body li::marker { color: var(--sub); }
.doc-body a, .lede a { text-decoration: underline; text-decoration-color: color-mix(in oklch, var(--accent) 45%, transparent); }
.doc-body a:hover, .lede a:hover { text-decoration-color: currentColor; }

.toc { margin: 0 0 40px; padding: 18px 20px; border-radius: 16px; background: var(--chip); max-width: 68ch; }
.toc h2 { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--sub); }
.toc ol { margin: 0; padding-left: 1.4em; columns: 2 16rem; column-gap: 28px; font-size: 15px; line-height: 1.5; }
.toc li { break-inside: avoid; padding: 3px 0; }
.toc li::marker { color: var(--sub); font-variant-numeric: tabular-nums; }
.toc a { color: var(--fg); }
.toc a:hover { color: var(--accent); }
.doc-body section { counter-increment: sec; }
.doc-toc .doc-body h2::before { content: counter(sec) '. '; color: var(--sub); font-variant-numeric: tabular-nums; }

@media (min-width: 1100px) {
  .doc-toc { display: grid; grid-template-columns: minmax(0, 68ch) 15rem; column-gap: 72px; align-items: start; }
  .doc-toc .doc-head { grid-column: 1; }
  .doc-toc .doc-body { grid-column: 1; grid-row: 2; }
  .doc-toc .toc { grid-column: 2; grid-row: 2; position: sticky; top: 72px; background: none; padding: 0; margin: 0; }
  .doc-toc .toc ol { columns: 1; padding-left: 1.6em; }
}

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 2px; border-radius: 8px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { margin: 0; font-size: 18px; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; }
.faq summary::after {
  content: ''; flex: none; width: 10px; height: 10px; margin-right: 6px;
  border-right: 2px solid var(--sub); border-bottom: 2px solid var(--sub); transform: translateY(-3px) rotate(45deg);
  transition: transform 0.25s var(--ease-out);
}
.faq details[open] summary::after { transform: translateY(2px) rotate(225deg); }
.faq summary:hover h3 { color: var(--accent); }
.faq .answer { padding: 0 2px 18px; color: var(--sub); }
.faq .answer strong { color: var(--fg); }
.lost { min-height: 60vh; }

@media (max-width: 520px) {
  .top { padding-right: 132px; height: 64px; }
  .wm-top { height: 26px; }
  .cells { grid-template-columns: minmax(0, 1fr); }
  .foot { padding: 32px 20px 48px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}