/* ==========================================================================
   Club Lights — shared stylesheet
   Pure black / frosted glass / neon gradient accent
   ========================================================================== */

:root {
  /* Surfaces.
     The page stays pure black to match the app, but cards sit on a solid
     lifted surface rather than a 6% white wash — at 6% over black a card
     edge is essentially invisible, which made the whole page read as one
     flat field. */
  --bg: #000000;
  --surface: #17171C;
  --surface-hover: #202027;
  --glass-fill: var(--surface);
  --glass-fill-hover: var(--surface-hover);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-border-strong: rgba(255, 255, 255, 0.30);

  /* Text — raised from the original #A6A6A6 / #7A7A7A, which technically
     passed AA but read as dim and washed out against black. */
  --text: #ffffff;
  --text-muted: #C9C9D2;
  --text-dim: #9B9BA6;

  /* Neon accent */
  --pink: #ff6fb0;
  --purple: #b26cff;
  --cyan: #3ed6ff;
  --gradient: linear-gradient(100deg, #ff6fb0 0%, #b26cff 52%, #3ed6ff 100%);

  /* Geometry */
  --radius: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --maxw: 1120px;
  --maxw-prose: 720px;

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;

  --focus: #3ed6ff;
}

/* --------------------------------------------------------------- reset -- */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 1.05rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3,
h4 {
  color: var(--text);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  font-weight: 650;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 7vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 4.5vw, 2.1rem); }
h3 { font-size: clamp(1.1rem, 3vw, 1.3rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--cyan);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

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

ul, ol {
  margin: 0 0 1.1em;
  padding-left: 1.25em;
}

li {
  margin-bottom: 0.5em;
}

li::marker {
  color: var(--purple);
}

strong {
  color: var(--text);
  font-weight: 600;
}

hr {
  border: 0;
  border-top: 1px solid var(--glass-border);
  margin: 2.5rem 0;
}

/* ------------------------------------------------------------- helpers -- */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 20px;
}

.prose {
  max-width: var(--maxw-prose);
}

.gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Fallback for engines without background-clip:text */
  -webkit-text-fill-color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .gradient-text {
    color: var(--pink);
    -webkit-text-fill-color: currentColor;
  }
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: #111;
  color: var(--text);
  border: 1px solid var(--glass-border-strong);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 12px;
}

/* Utility classes — these exist so no element needs a style="" attribute,
   which lets the Content-Security-Policy forbid inline styles outright. */

.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
}

.section-tight { padding-top: 24px; }
.section-flush { padding-top: 0; }
.stack-gap { margin-top: 16px; }
.center { margin-inline: auto; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------- torch beams ---------- */
/* Light travelling down the whole page, alternating side to side: a pool at
   the left edge, then one at the right, then left again, each spreading
   inward and thinning out to almost nothing by the centre.

   The layer is absolutely positioned (not fixed) so the light scrolls with
   the content, and the gradients are tiled with `repeat-y` so the rhythm
   continues for any page length — from the short home page to the long
   privacy policy — without hard-coding a position per section.

   Purely decorative: aria-hidden, pointer-events none, and every alpha below
   is capped so that text sitting on top of the brightest point of a beam
   still clears WCAG AA. */

/* Light down the length of the page, not per section.

   Anchoring to sections made the spacing follow section heights: two lights
   crammed into a short block, two stretched far apart in a tall one. This
   layer instead spans the whole document and tiles a fixed rhythm, so the
   lights land evenly however long the page is.

   One tile carries four lights — left, right, left, right — each occupying a
   quarter of the tile, so where one light ends the next begins. The vertical
   reach is wide enough that consecutive lights meet rather than leaving dark
   bands between them; because consecutive lights are always on opposite
   sides, their overlap never compounds into a brighter patch under the text.

   Decorative only: aria-hidden, pointer-events none, and every alpha is
   capped so text over the brightest point still clears WCAG AA. */

.page-light {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Screen keeps the light additive over black rather than muddying it. */
  mix-blend-mode: screen;

  background-image:
    radial-gradient(56% 20% at -6% 12.5%, rgba(255, 111, 176, 0.30), rgba(255, 111, 176, 0.08) 44%, transparent 78%),
    radial-gradient(56% 20% at 106% 37.5%, rgba(62, 214, 255, 0.25), rgba(62, 214, 255, 0.07) 44%, transparent 78%),
    radial-gradient(56% 20% at -6% 62.5%, rgba(178, 108, 255, 0.33), rgba(178, 108, 255, 0.09) 44%, transparent 78%),
    radial-gradient(56% 20% at 106% 87.5%, rgba(255, 111, 176, 0.26), rgba(178, 108, 255, 0.08) 44%, transparent 78%);
  /* 3600px tile / 4 lights = one light every 900px down the page. */
  background-size: 100% 3600px;
  background-repeat: repeat-y;
  background-position: 0 0;
}

/* Narrow screens: a light reaching 45% across a desktop reaches most of the
   way across a phone, so pull it back off the edge and tighten the rhythm. */
@media (max-width: 700px) {
  .page-light {
    background-image:
      radial-gradient(76% 18% at -20% 12.5%, rgba(255, 111, 176, 0.26), rgba(255, 111, 176, 0.07) 44%, transparent 78%),
      radial-gradient(76% 18% at 120% 37.5%, rgba(62, 214, 255, 0.22), rgba(62, 214, 255, 0.06) 44%, transparent 78%),
      radial-gradient(76% 18% at -20% 62.5%, rgba(178, 108, 255, 0.28), rgba(178, 108, 255, 0.08) 44%, transparent 78%),
      radial-gradient(76% 18% at 120% 87.5%, rgba(255, 111, 176, 0.22), rgba(178, 108, 255, 0.07) 44%, transparent 78%);
    background-size: 100% 2800px;
  }
}

/* The layer is a child of <body>, so body establishes its containing block. */
body {
  position: relative;
}

.site-header { z-index: 50; }

main,
.site-footer {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------- card -- */

.card {
  background: var(--surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 26px;
  /* A top highlight plus a drop shadow give the card an actual edge, so it
     reads as a raised surface instead of a slightly-less-black rectangle. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 32px -20px rgba(0, 0, 0, 0.95);
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 12px;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 650;
  letter-spacing: -0.01em;
  font-size: 1.05rem;
  text-decoration: none;
}

.brand:hover,
.brand:focus-visible {
  text-decoration: none;
}

.brand img {
  width: 30px;
  height: 30px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.nav-links li {
  margin: 0;
}

.nav-links a {
  display: inline-block;
  color: var(--text-muted);
  font-size: 0.95rem;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--text);
  background: var(--glass-fill);
  border-color: var(--glass-border);
  text-decoration: none;
}

.nav-links a[aria-current="page"] {
  color: var(--text);
  background: var(--glass-fill);
  border-color: var(--glass-border);
}

/* -------------------------------------------------------------- layout -- */

main {
  display: block;
}

.section {
  padding-block: clamp(48px, 9vw, 88px);
}

.section-head {
  max-width: 640px;
  margin-bottom: 36px;
}

.section-head p {
  font-size: 1.05rem;
}

.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 12px;
  font-weight: 600;
}

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

.hero {
  position: relative;
  padding-top: clamp(40px, 8vw, 76px);
  /* Kept tight: the phone column is taller than the text column, so centring
     already leaves slack below the buttons. Generous padding on top of that
     opened a dead band of nearly 300px before the next section. */
  padding-bottom: clamp(20px, 3vw, 36px);
  overflow: hidden;
}

.hero + .section {
  padding-top: clamp(28px, 4.5vw, 52px);
}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero-inner {
  display: grid;
  gap: clamp(36px, 6vw, 64px);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .hero-inner {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

.hero-logo {
  width: 84px;
  height: 84px;
  margin-bottom: 24px;
}

.hero h1 {
  margin-bottom: 14px;
}

.tagline {
  font-size: clamp(1.15rem, 3.4vw, 1.4rem);
  font-weight: 550;
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}

.hero-pitch {
  font-size: 1.05rem;
  max-width: 46ch;
}

.hero-visual {
  display: flex;
  justify-content: center;
}

/* ---------------------------------------------------------- device frame -- */

.device {
  position: relative;
  padding: 8px;
  border-radius: 42px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03) 42%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.10),
    0 24px 60px -18px rgba(0, 0, 0, 0.9);
  width: min(280px, 74vw);
  flex: none;
}

.device::after {
  content: "";
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 32%;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.16);
  pointer-events: none;
}

.device img {
  width: 100%;
  display: block;
  border-radius: 34px;
  background: #000;
}

/* ------------------------------------------------------------- buttons -- */

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: var(--radius-pill);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid var(--glass-border);
  background: var(--glass-fill);
  color: var(--text);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.btn:hover,
.btn:focus-visible {
  background: var(--glass-fill-hover);
  border-color: var(--glass-border-strong);
  text-decoration: none;
  transform: translateY(-1px);
}

.btn svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.btn small {
  display: block;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  line-height: 1.3;
}

.btn-primary {
  position: relative;
  border-color: transparent;
  background:
    linear-gradient(#0a0a0a, #0a0a0a) padding-box,
    var(--gradient) border-box;
  border: 1px solid transparent;
}

.btn-primary::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--gradient);
  opacity: 0.14;
  z-index: -1;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background:
    linear-gradient(#141414, #141414) padding-box,
    var(--gradient) border-box;
}

/* ------------------------------------------------------------ features -- */

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 940px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

.feature {
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.feature:hover {
  background: var(--glass-fill-hover);
  border-color: var(--glass-border-strong);
  transform: translateY(-2px);
}

.feature h3 {
  margin-bottom: 8px;
}

.feature p {
  font-size: 1rem;
  margin: 0;
}

.feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid var(--glass-border-strong);
}

.feature-icon svg {
  width: 22px;
  height: 22px;
}

/* --------------------------------------------------------- screenshots -- */

.shots {
  display: grid;
  gap: 40px 26px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  .shots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.shot {
  margin: 0;
}

.shot .device {
  width: min(230px, 68%);
  margin-inline: auto;
  padding: 6px;
  border-radius: 30px;
}

.shot .device::after {
  top: 11px;
  height: 3.5px;
}

.shot .device img {
  border-radius: 24px;
}

.shot figcaption {
  margin-top: 22px;
}

.shot figcaption h3 {
  font-size: 1.12rem;
  margin-bottom: 8px;
}

.shot figcaption p {
  font-size: 0.98rem;
  margin: 0;
}

/* ------------------------------------------- alternating mode rows ------- */

.modes {
  display: grid;
  gap: clamp(56px, 9vw, 96px);
}

.mode {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}

/* On narrow screens the screenshot always leads, then its explanation. */
.mode-media { order: -1; }

@media (min-width: 900px) {
  .mode {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
  }

  /* Odd rows put the screen on the right, even rows on the left, so the
     page alternates instead of marching down one side. */
  .mode-media { order: 0; }
  .mode:nth-child(even) .mode-media { order: -1; }
}

.mode-media .device {
  width: min(252px, 70vw);
  margin-inline: auto;
}

.mode-text h3 {
  font-size: clamp(1.35rem, 3.4vw, 1.7rem);
  margin-bottom: 12px;
}

.mode-text > p {
  font-size: 1.02rem;
}

.use-heading {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-dim);
  margin: 26px 0 14px;
}

.use-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}

.use-list li {
  margin: 0;
  padding-left: 26px;
  position: relative;
  font-size: 0.99rem;
}

.use-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 12px;
  height: 2px;
  border-radius: 1px;
  background: var(--gradient);
}

/* ---------------------------------------------------- split explainer ---- */

.split {
  display: grid;
  gap: 36px;
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 60px;
  }
}

.split .device {
  margin-inline: auto;
  width: min(260px, 72vw);
}

.mech {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 22px;
}

.mech li {
  margin: 0;
  padding-left: 20px;
  border-left: 2px solid rgba(255, 255, 255, 0.12);
}

.mech li:first-child { border-left-color: var(--pink); }
.mech li:nth-child(2) { border-left-color: var(--purple); }
.mech li:nth-child(3) { border-left-color: var(--cyan); }

.mech h3 {
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.mech p {
  font-size: 0.98rem;
  margin: 0;
}

/* Footer credit line */
.footer-credit a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.3);
}

.footer-credit a:hover,
.footer-credit a:focus-visible {
  color: var(--text);
  text-decoration-color: var(--cyan);
}

/* ------------------------------------------------------------ pipeline -- */

.pipeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 28px;
  counter-reset: step;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 18px;
  align-items: start;
  margin: 0;
}

.step-num {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  background:
    linear-gradient(#0b0b0b, #0b0b0b) padding-box,
    var(--gradient) border-box;
  border: 1.5px solid transparent;
  position: relative;
  z-index: 1;
}

/* connector between consecutive steps */
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 22.5px;
  top: 52px;
  bottom: -34px;
  width: 1.5px;
  background: linear-gradient(180deg, var(--purple), rgba(255, 255, 255, 0.10));
  z-index: 0;
}

.step h3 {
  margin: 10px 0 6px;
  font-size: 1.1rem;
}

.step p {
  font-size: 1rem;
  margin: 0;
}

.step p + p {
  margin-top: 0.7em;
}

.step-tag {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 2px;
}

@media (min-width: 900px) {
  .pipeline {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }

  .step {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* connector runs horizontally between the number badges */
  .step:not(:last-child)::before {
    left: 58px;
    right: -36px;
    top: 22.5px;
    bottom: auto;
    width: auto;
    height: 1.5px;
    background: linear-gradient(90deg, var(--purple), rgba(255, 255, 255, 0.10));
  }

  .step h3 {
    margin-top: 20px;
  }
}

/* ------------------------------------------------------ why / where ------ */

.reasons {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .reasons { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 980px) {
  .reasons { grid-template-columns: repeat(4, 1fr); }
}

.reason h3 {
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.reason p {
  font-size: 1rem;
  margin: 0;
}

.places {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .places { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 940px) {
  .places { grid-template-columns: repeat(3, 1fr); }
}

.place {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  align-items: start;
  padding: 18px 20px;
}

.place-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid var(--glass-border-strong);
}

.place-icon svg {
  width: 21px;
  height: 21px;
}

.place h3 {
  font-size: 1.04rem;
  margin: 2px 0 4px;
}

.place p {
  font-size: 0.96rem;
  margin: 0;
}

/* ----------------------------------------------------------------- CTA -- */

.cta {
  text-align: center;
  padding: clamp(32px, 6vw, 52px) 24px;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(178, 108, 255, 0.14), transparent 62%),
    var(--glass-fill);
}

.cta .btn-row {
  justify-content: center;
}

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

.page-header {
  position: relative;
  padding-top: clamp(40px, 7vw, 64px);
  padding-bottom: clamp(20px, 4vw, 32px);
  overflow: hidden;
}

.page-header .container {
  position: relative;
  z-index: 1;
}

.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  font-size: 0.95rem;
  color: var(--text-dim);
}

.doc-meta li {
  margin: 0;
}

.doc-meta strong {
  color: var(--text-muted);
  font-weight: 500;
}

.legal h2 {
  margin-top: 2.4em;
  padding-top: 1.6rem;
  border-top: 1px solid var(--glass-border);
  font-size: clamp(1.25rem, 3.4vw, 1.55rem);
  scroll-margin-top: 80px;
}

.legal > section:first-of-type > h2 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.legal h3 {
  margin-top: 1.8em;
  font-size: 1.05rem;
}

.legal p,
.legal li {
  font-size: 1rem;
}

/* Permission / data tables in the legal pages. Reviewers scan these, so they
   need to stay legible on a phone — hence the horizontal scroll container. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1.4em;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
}

.legal table {
  border-collapse: collapse;
  width: 100%;
  /* Fixed layout so the columns fit the prose width on desktop instead of
     the longest cell pushing the last column out of view. Below the
     min-width the wrapper scrolls horizontally. */
  table-layout: fixed;
  min-width: 540px;
  font-size: 0.92rem;
}

.legal table col:nth-child(1) { width: 30%; }
.legal table col:nth-child(2) { width: 34%; }
.legal table col:nth-child(3) { width: 36%; }

.legal th,
.legal td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  vertical-align: top;
  overflow-wrap: break-word;
}

.legal td code {
  font-size: 0.86em;
  overflow-wrap: anywhere;
}

.legal thead th {
  color: var(--text);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.05);
  white-space: nowrap;
}

.legal tbody tr:last-child td {
  border-bottom: 0;
}

.summary-box {
  margin-bottom: 40px;
  border-color: var(--glass-border-strong);
}

.summary-box h2 {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  font-size: 1.1rem;
}

.summary-box ul {
  margin-bottom: 0;
}

.toc {
  margin-bottom: 40px;
}

.toc h2 {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  font-size: 1rem;
}

.toc ol {
  columns: 2;
  column-gap: 28px;
  margin: 0;
  padding-left: 1.2em;
  font-size: 0.92rem;
}

@media (max-width: 560px) {
  .toc ol { columns: 1; }
}

/* ----------------------------------------------------------------- FAQ -- */

.faq-wrap {
  /* Full container width — the 720px prose measure is too narrow for two
     columns of answers. */
  max-width: none;
}

.faq {
  display: grid;
  gap: 14px;
}

@media (min-width: 880px) {
  .faq {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
    /* Without this, both items in a row stretch to match the taller one, so
       opening one answer would pad its neighbour with dead space. */
    align-items: start;
  }
}

.faq details {
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 4px 20px;
}

.faq details[open] {
  border-color: var(--glass-border-strong);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 34px 18px 0;
  position: relative;
  color: var(--text);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.45;
}

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

.faq summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--purple);
  border-bottom: 2px solid var(--purple);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.faq details[open] summary::after {
  transform: rotate(-135deg);
  margin-top: -2px;
}

.faq summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.faq .answer {
  padding-bottom: 20px;
  font-size: 1.02rem;
}

.faq .answer > *:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------- contact -- */

.contact-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
}

.contact-card h3 {
  margin-bottom: 6px;
}

.contact-card .big-link {
  font-size: 1.15rem;
  font-weight: 600;
  word-break: break-word;
}

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

.site-footer {
  border-top: 1px solid var(--glass-border);
  padding-block: 44px 40px;
  margin-top: clamp(40px, 8vw, 80px);
}

.footer-inner {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .footer-inner {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 40px;
  }
}

.footer-brand p {
  font-size: 0.9rem;
  margin-top: 12px;
  max-width: 34ch;
}

.footer-col h2 {
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 12px;
  font-weight: 600;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col li {
  margin-bottom: 8px;
}

.footer-col a {
  color: var(--text-muted);
  font-size: 0.97rem;
}

.footer-col a:hover,
.footer-col a:focus-visible {
  color: var(--text);
}

.footer-bottom {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 0.9rem;
  color: var(--text-dim);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
}

.footer-bottom p {
  margin: 0;
}

/* ------------------------------------------------------- accent divider -- */

.accent-rule {
  height: 2px;
  width: 72px;
  border-radius: 2px;
  background: var(--gradient);
  margin-bottom: 22px;
}

/* --------------------------------------------------- reduced motion ----- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ------------------------------------------------------------- print --- */

@media print {
  body { background: #fff; color: #000; }
  .site-header, .site-footer, .btn-row { display: none; }
  .page-light { display: none; }
  h1, h2, h3 { color: #000; }
  .card { border: 1px solid #ccc; background: none; }
  a { color: #000; text-decoration: underline; }
}