/* Glpfy — site styles.
   Palette is taken from the launcher icon: deep navy ground, mint→cyan mark. */

:root {
  --mint: #93e5b5;
  --cyan: #55d0de;
  --teal: #2fb8a8;
  --coral: #ff9d7a;
  --amber: #ffc98f;
  --grad: linear-gradient(135deg, var(--mint) 0%, var(--cyan) 100%);
  --grad-warm: linear-gradient(135deg, var(--coral) 0%, var(--amber) 100%);

  --bg: #08131f;
  --bg-elev: #0d1e2f;
  --surface: #112739;
  --surface-2: #16324a;
  --line: rgba(147, 229, 181, 0.14);
  --line-strong: rgba(147, 229, 181, 0.28);
  --text: #e8f1f5;
  --text-dim: #9fb4c2;
  --text-faint: #6f8798;
  --accent: var(--mint);
  --accent-ink: #05131c;
  --warn-bg: rgba(255, 184, 119, 0.1);
  --warn-line: rgba(255, 184, 119, 0.35);
  --warn-text: #ffc98f;
  --shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
  --radius: 18px;

  /* Hero scroll-morph endpoints, as r,g,b triplets so JS can lerp them per frame. */
  --hero-c1: 8, 19, 31;
  --hero-c2: 26, 15, 20;

  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --bg: #f5f8f9;
    --bg-elev: #ffffff;
    --surface: #ffffff;
    --surface-2: #eef4f5;
    --line: rgba(10, 40, 58, 0.1);
    --line-strong: rgba(10, 40, 58, 0.2);
    --text: #0a1826;
    --text-dim: #4a6070;
    --text-faint: #6d8492;
    --accent: #0d7a68;
    --accent-ink: #ffffff;
    --warn-bg: rgba(179, 94, 23, 0.08);
    --warn-line: rgba(179, 94, 23, 0.3);
    --warn-text: #8a4610;
    --shadow: 0 20px 50px -24px rgba(10, 30, 50, 0.35);
    --hero-c1: 245, 248, 249;
    --hero-c2: 250, 240, 233;
    color-scheme: light;
  }
}

:root[data-theme='light'] {
  --bg: #f5f8f9;
  --bg-elev: #ffffff;
  --surface: #ffffff;
  --surface-2: #eef4f5;
  --line: rgba(10, 40, 58, 0.1);
  --line-strong: rgba(10, 40, 58, 0.2);
  --text: #0a1826;
  --text-dim: #4a6070;
  --text-faint: #6d8492;
  --accent: #0d7a68;
  --accent-ink: #ffffff;
  --warn-bg: rgba(179, 94, 23, 0.08);
  --warn-line: rgba(179, 94, 23, 0.3);
  --warn-text: #8a4610;
  --shadow: 0 20px 50px -24px rgba(10, 30, 50, 0.35);
  --hero-c1: 245, 248, 249;
  --hero-c2: 250, 240, 233;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
.narrow { width: min(760px, calc(100% - 40px)); margin-inline: auto; }

/* ── Scroll reveal ──────────────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Header ─────────────────────────────────────────────────────────── */

header.site {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 14px 0 0;
}

.nav {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 11px 18px;
  border-radius: 999px;
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  background: color-mix(in srgb, var(--bg-elev) 78%, transparent);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

/* Homepage only (see the nav-floating class in index.html): starts transparent over the hero and
   solidifies once scrolled past it. Every other page keeps the plain solid pill above. */
.nav.nav-floating {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}
.nav.nav-floating.is-scrolled {
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  background: color-mix(in srgb, var(--bg-elev) 78%, transparent);
  border-color: var(--line);
  box-shadow: var(--shadow);
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  font-size: 1.02rem;
}
.brand:hover { text-decoration: none; }
.brand img { width: 32px; height: 32px; border-radius: 9px; }

.nav-links { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.nav-links a { color: var(--text-dim); font-size: 0.94rem; font-weight: 500; }
.nav-links a:hover { color: var(--text); text-decoration: none; }

.theme-toggle {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text-dim);
  width: 34px; height: 34px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  display: grid;
  place-items: center;
}
.theme-toggle:hover { color: var(--text); border-color: var(--accent); }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text);
  width: 34px; height: 34px;
  border-radius: 10px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.nav-toggle:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 720px) {
  .nav-links a.hide-sm { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* ── Mobile menu ────────────────────────────────────────────────────── */

.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
  padding: 10px;
  border-radius: 16px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.mobile-menu.is-open { display: flex; }
.mobile-menu a {
  color: var(--text-dim);
  font-size: 0.98rem;
  font-weight: 500;
  padding: 11px 14px;
  border-radius: 10px;
}
.mobile-menu a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
@media (min-width: 721px) {
  .mobile-menu { display: none !important; }
}

/* ── Buttons ────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.96rem;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--grad); color: #05131c; }
.btn-primary:hover { filter: brightness(1.07); }
.btn-ghost { border-color: var(--line-strong); color: var(--text); background: transparent; }
.btn-ghost:hover { border-color: var(--accent); }

/* Store button: the two-line "GET IT ON / Google Play" shape both stores' badges use. */
.btn-store { padding: 9px 20px; text-align: left; }
.btn-store svg { flex: none; }
.btn-store-sub { display: block; font-size: 0.68rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.btn-store-main { display: block; font-size: 1.02rem; font-weight: 700; line-height: 1.2; }
/* Pre-launch: reads as a status, not a link, so nobody taps through to a 404 — but it keeps the
   accent so it still looks like the main event rather than a third equal option beside the ghosts. */
.btn-store.is-pending {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--text);
  cursor: default;
}
.btn-store.is-pending .btn-store-sub { color: var(--accent); opacity: 1; }
.btn-store.is-pending:hover { filter: none; }

/* ── Hero ───────────────────────────────────────────────────────────── */

.hero-track { position: relative; }

.hero {
  position: relative;
  padding: clamp(56px, 9vw, 104px) 0 clamp(48px, 7vw, 84px);
  overflow: hidden;
  background: rgb(var(--hero-c1));
}

/* Pinned scroll effect: the hero sticks to the top of the viewport for the extra height of its
   track, giving the background-morph + phone-rise JS room to play out before the page continues
   scrolling normally. Desktop/tablet only, and only when motion is welcome. */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .hero-track { height: calc(100vh + 42vh); }
  .hero {
    position: sticky;
    top: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
.hero::before {
  content: '';
  position: absolute;
  inset: -30% 20% auto -10%;
  height: 640px;
  background: radial-gradient(ellipse at 30% 40%, rgba(85, 208, 222, 0.18), transparent 62%);
  pointer-events: none;
  animation: drift-a 22s ease-in-out infinite;
}
.hero::after {
  content: '';
  position: absolute;
  inset: -10% -20% auto 45%;
  height: 620px;
  background: radial-gradient(ellipse at 60% 30%, rgba(147, 229, 181, 0.14), transparent 60%),
              radial-gradient(ellipse at 80% 70%, rgba(255, 157, 122, 0.13), transparent 55%);
  pointer-events: none;
  animation: drift-b 26s ease-in-out infinite;
}
.hero .wrap { position: relative; z-index: 1; }

@keyframes drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(3%, 4%) scale(1.06); }
}
@keyframes drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-4%, -3%) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after { animation: none; }
}

.hero-center {
  max-width: 700px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-center .cta-row { justify-content: center; }

/* Phone stage: on desktop the phone sits low enough to be cropped by the hero's overflow at rest,
   then the scroll JS lifts it into full view — mirrors a common "device rises on scroll" hero. */
.hero-phone-stage { margin-top: clamp(28px, 5vw, 48px); width: 100%; }
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .hero-phone-stage { margin-top: clamp(40px, 8vw, 90px); }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 5px 13px;
  margin-bottom: 22px;
}

h1 {
  font-size: clamp(2.2rem, 5.4vw, 3.7rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 0 0 20px;
  font-weight: 700;
}
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
:root[data-theme='light'] .grad-text,
:root:not([data-theme='dark']) .grad-text { }
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .grad-text {
    background: linear-gradient(135deg, #0f8a6f, #0e7fa6);
    -webkit-background-clip: text;
    background-clip: text;
  }
}
:root[data-theme='light'] .grad-text {
  background: linear-gradient(135deg, #0f8a6f, #0e7fa6);
  -webkit-background-clip: text;
  background-clip: text;
}

.lede { font-size: clamp(1.05rem, 1.9vw, 1.28rem); color: var(--text-dim); margin: 0 0 30px; max-width: 40ch; margin-inline: auto; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ── Trust strip ────────────────────────────────────────────────────── */

.trust {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}
.trust-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
}
.trust-cell { background: var(--bg); padding: 26px 24px; }
.trust-cell strong { display: block; font-size: 1.02rem; margin-bottom: 4px; }
.trust-cell span { color: var(--text-dim); font-size: 0.92rem; }
@media (max-width: 760px) { .trust-inner { grid-template-columns: 1fr; } }

/* ── Sections ───────────────────────────────────────────────────────── */

section { padding: clamp(56px, 8vw, 96px) 0; }

.section-head { max-width: 62ch; margin-bottom: 44px; }
.section-head .kicker {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 12px;
}
h2 {
  font-size: clamp(1.65rem, 3.2vw, 2.35rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 14px;
  font-weight: 700;
}
h3 { font-size: 1.12rem; letter-spacing: -0.015em; margin: 0 0 8px; font-weight: 650; }
.section-head p { color: var(--text-dim); margin: 0; font-size: 1.03rem; }

/* ── Feature cards ──────────────────────────────────────────────────── */

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 940px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cards { grid-template-columns: 1fr; } }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
}
.card p { color: var(--text-dim); margin: 0; font-size: 0.95rem; }
.card .ico {
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  margin-bottom: 16px;
}
.card .ico svg { width: 21px; height: 21px; stroke: var(--accent); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.card.wide { grid-column: span 2; }
@media (max-width: 620px) { .card.wide { grid-column: span 1; } }

.card, .showcase-card { transition: transform .3s ease, border-color .3s ease; }
.card:hover, .showcase-card:hover { transform: translateY(-3px); border-color: var(--line-strong); }

/* ── Showcase (bento) tiles ────────────────────────────────────────── */

.showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
@media (max-width: 760px) { .showcase { grid-template-columns: 1fr; } }

.showcase-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  padding: 30px 28px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.showcase-card::before {
  content: '';
  position: absolute;
  inset: -40% -20% auto auto;
  width: 70%;
  height: 220%;
  border-radius: 50%;
  opacity: .5;
  filter: blur(6px);
  pointer-events: none;
}
.showcase-card.wash-cool { background: color-mix(in srgb, var(--cyan) 10%, var(--surface)); }
.showcase-card.wash-cool::before { background: radial-gradient(circle, color-mix(in srgb, var(--cyan) 55%, transparent), transparent 70%); }
.showcase-card.wash-warm { background: color-mix(in srgb, var(--coral) 10%, var(--surface)); }
.showcase-card.wash-warm::before { background: radial-gradient(circle, color-mix(in srgb, var(--coral) 55%, transparent), transparent 70%); }

.showcase-card .ico {
  position: relative;
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  border: 1px solid var(--line-strong);
  margin-bottom: 18px;
}
.showcase-card .ico svg { width: 22px; height: 22px; stroke: var(--text); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.showcase-card h3 { position: relative; font-size: 1.24rem; margin-bottom: 8px; }
.showcase-card p { position: relative; color: var(--text-dim); margin: 0; font-size: 0.96rem; max-width: 42ch; }

/* ── Phone mock ─────────────────────────────────────────────────────── */

.phone {
  width: min(340px, 82%);
  margin-inline: auto;
  background: #0b1c2c;
  border: 1px solid rgba(147, 229, 181, 0.2);
  border-radius: 34px;
  padding: 12px;
  box-shadow: var(--shadow);
}
.phone-screen {
  background: #0a1725;
  border-radius: 24px;
  padding: 18px 16px 22px;
  color: #e8f1f5;
}
/* Real device screenshots (see phone-screen-shot) replace the hand-drawn mock cards below and
   sit flush against the bezel, since they already carry their own status bar and page background. */
.phone-screen-shot { padding: 0; overflow: hidden; background: #f5f1ea; }
.phone-screen-shot img { display: block; width: 100%; height: auto; }
.phone-bar {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.68rem; color: #7d94a4; margin-bottom: 14px;
}
.mock-card {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(147, 229, 181, 0.13);
  border-radius: 15px;
  padding: 14px;
  margin-bottom: 11px;
}
.mock-label { font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase; color: #7d94a4; margin-bottom: 7px; }
.mock-big { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; }
.mock-sub { font-size: 0.72rem; color: #93e5b5; }
.mock-row { display: flex; gap: 11px; }
.mock-row > .mock-card { flex: 1; margin-bottom: 0; }
.mock-foot { font-size: 0.61rem; color: #6b8394; margin-top: 9px; text-align: center; }

/* ── Phone slide carousel ──────────────────────────────────────────── */

.phone-wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; }

.phone-slides { position: relative; }
.phone-slide {
  display: none;
  animation: slide-in .5s ease both;
}
.phone-slide.is-active { display: block; }
@keyframes slide-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .phone-slide { animation: none; }
}

.phone-controls { display: flex; align-items: center; gap: 16px; }
.phone-dots { display: flex; gap: 8px; }
.phone-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line-strong);
  border: none; padding: 0; cursor: pointer;
  transition: background .25s ease, width .25s ease;
}
.phone-dot.is-active { background: var(--accent); width: 20px; border-radius: 4px; }
.phone-arrow {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text);
  display: grid; place-items: center;
  cursor: pointer;
}
.phone-arrow:hover { border-color: var(--accent); color: var(--accent); }
.phone-arrow svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Split / privacy panel ──────────────────────────────────────────── */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }

.checklist { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 13px; }
.checklist li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; color: var(--text-dim); font-size: 0.97rem; }
.checklist li::before {
  content: '';
  width: 20px; height: 20px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232fb8a8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 12px; background-repeat: no-repeat; background-position: center;
  margin-top: 3px;
}
.checklist li strong { color: var(--text); font-weight: 600; }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(24px, 3.5vw, 36px);
}

/* ── Pricing ────────────────────────────────────────────────────────── */

.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } }

.plan {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 30px 28px;
}
.plan.featured { border-color: var(--line-strong); position: relative; }
.plan.featured::before {
  content: '';
  position: absolute; inset: -1px; border-radius: 22px;
  padding: 1px;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.6;
}
.plan h3 { font-size: 1.28rem; margin-bottom: 4px; }
.plan .price { font-size: 0.94rem; color: var(--text-dim); margin: 0 0 20px; }
.plan .checklist { margin-top: 0; }

/* ── Callout ────────────────────────────────────────────────────────── */

.callout {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: 16px;
  padding: 22px 24px;
}
.callout h3 { color: var(--warn-text); margin-bottom: 6px; }
.callout p { color: var(--text-dim); margin: 0; font-size: 0.95rem; }
.callout p + p { margin-top: 10px; }

/* ── Closing CTA band ──────────────────────────────────────────────── */

.cta-band {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  padding: clamp(40px, 6vw, 64px) clamp(24px, 5vw, 48px);
  border-radius: 28px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--mint) 9%, var(--surface)) 0%,
    color-mix(in srgb, var(--coral) 9%, var(--surface)) 100%);
  border: 1px solid var(--line);
}
.cta-band h2 { margin-bottom: 12px; }
.cta-band p { color: var(--text-dim); margin: 0 0 26px; }
.cta-band .cta-row { justify-content: center; }

/* ── FAQ ────────────────────────────────────────────────────────────── */

.faq { display: grid; gap: 12px; }
details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 22px;
}
details[open] { border-color: var(--line-strong); }
summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; color: var(--accent); font-size: 1.35rem; line-height: 1; font-weight: 400; }
details[open] summary::after { content: '−'; }
details p { color: var(--text-dim); margin: 12px 0 0; font-size: 0.96rem; }

/* ── Footer ─────────────────────────────────────────────────────────── */

footer.site {
  border-top: 1px solid var(--line);
  padding: 52px 0 40px;
  background: color-mix(in srgb, var(--surface) 40%, transparent);
}
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 32px; }
@media (max-width: 720px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > div:first-child { grid-column: span 2; } }
.foot-grid h4 { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 14px; font-weight: 600; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.foot-grid a { color: var(--text-dim); font-size: 0.93rem; }
.foot-grid a:hover { color: var(--text); }
.foot-note { color: var(--text-faint); font-size: 0.85rem; margin: 34px 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
.foot-note p { margin: 0 0 6px; }

/* ── Legal documents ────────────────────────────────────────────────── */

.doc { padding: clamp(44px, 6vw, 76px) 0 clamp(56px, 8vw, 90px); }
.doc h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin-bottom: 10px; }
.doc .updated { color: var(--text-faint); font-size: 0.9rem; margin: 0 0 8px; }
.doc .summary {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 18px 22px;
  margin: 28px 0 40px;
  color: var(--text-dim);
  font-size: 0.97rem;
}
.doc .summary strong { color: var(--text); }
.doc h2 { font-size: 1.32rem; margin: 42px 0 12px; letter-spacing: -0.02em; }
.doc h3 { font-size: 1.03rem; margin: 26px 0 8px; }
.doc p { color: var(--text-dim); margin: 0 0 16px; }
.doc ul, .doc ol { color: var(--text-dim); padding-left: 22px; margin: 0 0 18px; }
.doc li { margin-bottom: 9px; }
.doc li strong { color: var(--text); }
.doc hr { border: none; border-top: 1px solid var(--line); margin: 44px 0; }

.toc {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 40px;
}
.toc h4 { margin: 0 0 12px; font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.toc ol { margin: 0; padding-left: 20px; display: grid; gap: 7px; }
.toc a { font-size: 0.95rem; }

.doc-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 0; }
.doc-nav a {
  font-size: 0.86rem; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--text-dim);
}
.doc-nav a:hover { color: var(--text); border-color: var(--accent); text-decoration: none; }
.doc-nav a[aria-current='page'] { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text); border-color: var(--accent); }

/* Data-safety table */
.table-scroll { overflow-x: auto; margin: 0 0 22px; border: 1px solid var(--line); border-radius: 14px; }
table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 0.92rem; }
thead th {
  text-align: left; padding: 13px 16px; background: var(--surface-2);
  color: var(--text); font-weight: 600; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
tbody td { padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--text-dim); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody td:first-child { color: var(--text); font-weight: 500; }

.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.pill-no { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.pill-yes { background: var(--warn-bg); color: var(--warn-text); border: 1px solid var(--warn-line); }

/* 404 */
.center-page { min-height: 62vh; display: grid; place-items: center; text-align: center; padding: 60px 0; }