/* ============================================================
   Gainzor — gainzor.com
   Design system carried over from the app ("Premium Calm
   Monochrome"): graphite ground, one cool accent, gold reserved
   strictly for personal records and achievements. Every number
   on the site is set in the app's own mono face so figures read
   like equipment readouts rather than prose.
   ============================================================ */

/* ── Fonts (self-hosted) ────────────────────────────────────
   The same three faces the app bundles. Served from our own
   origin on purpose: a Google Fonts request would hand a
   visitor's IP address to a third party on every page load,
   which would mean disclosing an overseas transfer in the
   privacy policy for nothing. font-display:swap keeps text
   readable while the files arrive.
   ---------------------------------------------------------- */
@font-face { font-family: 'Outfit'; src: url('../fonts/Outfit-600.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('../fonts/Outfit-700.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-400.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-500.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-600.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono-400.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono-500.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono-600.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --ink:      #0A0C10;
  --panel:    #11151B;
  --panel-2:  #171C24;
  --panel-3:  #1E242E;
  --line:     #232936;
  --line-2:   #313947;
  --chalk:    #F2F4F7;
  --muted:    #8A93A1;
  --faint:    #5A626E;
  --signal:   #7CC4FF;   /* interactive / primary only */
  --pr:       #E8B23C;   /* personal records + achievements only */
  --live:     #3FB984;   /* saved / success only */
  --danger:   #E5484D;

  --display: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --text:    'Inter', 'Segoe UI', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --gutter: 24px;
  --max:    1160px;
  --radius: 14px;
  --radius-sm: 8px;
  --section-y: clamp(72px, 10vw, 128px);
}

/* ── Reset & base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--chalk);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; }

::selection { background: var(--signal); color: #05070A; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--signal); color: #05070A;
  padding: 12px 20px; font-weight: 600; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ── Layout primitives ──────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section + .section { border-top: 1px solid var(--line); }

/* Section label riding the hairline, like a collar on a bar. */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
/* Centred variant (closing CTA): the trailing rule would run off to
   one side and unbalance the block, so it is dropped there. */
.eyebrow.center { justify-content: center; }
.eyebrow.center::after { display: none; }

/* ── Type ───────────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--display); margin: 0; }

.display-xl {
  font-size: clamp(2.6rem, 6.6vw, 4.9rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}
.display {
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
h3 { font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.01em; }

.lead {
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  color: var(--muted);
  max-width: 54ch;
}
.muted { color: var(--muted); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── Header ─────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 12, 16, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 20px;
  height: 68px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; font-family: var(--display);
  font-weight: 700; font-size: 1.1875rem; letter-spacing: -0.02em;
  flex-shrink: 0;
}
.brand img { width: 32px; height: 32px; border-radius: 9px; }

.site-nav { display: flex; gap: 28px; margin-inline: auto; }
.site-nav a {
  text-decoration: none; color: var(--muted);
  font-size: 0.9375rem; font-weight: 500;
  transition: color 0.18s ease;
}
.site-nav a:hover { color: var(--chalk); }

.header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.lang-switch {
  font-family: var(--mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.06em;
  display: flex; border: 1px solid var(--line-2); border-radius: 999px;
  overflow: hidden;
}
.lang-switch a {
  padding: 5px 11px; text-decoration: none; color: var(--faint);
  transition: color 0.18s ease, background 0.18s ease;
}
.lang-switch a[aria-current='true'] { color: var(--chalk); background: var(--panel-3); }
.lang-switch a:hover { color: var(--chalk); }

@media (max-width: 880px) {
  /* No hamburger: the nav is short enough to survive as a scrolling
     second row, which keeps every section reachable from the top. */
  .site-header .wrap { height: auto; flex-wrap: wrap; padding-block: 12px; row-gap: 12px; }
  .site-nav {
    order: 3; width: 100%; margin-inline: 0; gap: 22px;
    /* min-width:0 is load-bearing: a flex item defaults to min-width:auto,
       so without this the nav refuses to shrink below its content width
       and pushes the whole header past the viewport instead of scrolling. */
    min-width: 0;
    overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { white-space: nowrap; }
  .header-actions { margin-inline-start: auto; }
}

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 22px; border-radius: 999px;
  font-family: var(--text); font-size: 0.9375rem; font-weight: 600;
  text-decoration: none; border: 1px solid transparent;
  cursor: pointer; transition: transform 0.16s ease, background 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--signal); color: #05070A; }
.btn-primary:hover { background: #9BD3FF; }

.btn-ghost { border-color: var(--line-2); color: var(--chalk); background: transparent; }
.btn-ghost:hover { border-color: var(--faint); background: var(--panel); }

.btn-sm { padding: 8px 16px; font-size: 0.875rem; }

/* Store buttons */
.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.store-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 11px 20px 11px 17px;
  background: var(--panel); border: 1px solid var(--line-2);
  border-radius: 12px; text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.16s ease;
  position: relative;
}
.store-btn:hover { border-color: var(--faint); background: var(--panel-2); transform: translateY(-1px); }
.store-btn svg { width: 24px; height: 24px; fill: var(--chalk); flex-shrink: 0; }
.store-btn span { display: block; line-height: 1.25; }
.store-btn .store-kicker {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--faint);
}
.store-btn .store-name { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.store-btn[data-pending] { opacity: 0.72; cursor: default; }
.store-btn[data-pending]:hover { transform: none; border-color: var(--line-2); background: var(--panel); }
.pending-pill {
  font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--pr);
  border: 1px solid rgba(232, 178, 60, 0.4); border-radius: 999px;
  padding: 2px 7px; margin-inline-start: 4px; align-self: center;
}

/* ── Hero ───────────────────────────────────────────────── */
.hero { padding-block: clamp(52px, 7vw, 92px) clamp(56px, 7vw, 96px); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(40px, 6vw, 76px);
  align-items: center;
}
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
}

.hero h1 { margin-bottom: 22px; }
.hero h1 .accent { color: var(--signal); }
.hero .lead { margin: 0 0 32px; }
.hero-note {
  margin-top: 22px; font-family: var(--mono); font-size: 0.75rem;
  color: var(--faint); letter-spacing: 0.04em;
}

/* ── Signature: the live set logger ─────────────────────── */
.logger {
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.9);
}
.logger-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line);
}
.logger-head strong { font-family: var(--display); font-size: 1.0625rem; font-weight: 600; }
.logger-head .logger-sub {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--faint);
}

.logger table { width: 100%; border-collapse: collapse; }
.logger th {
  font-family: var(--mono); font-size: 0.625rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint);
  text-align: right; padding: 12px 20px 8px;
}
.logger th:first-child { text-align: left; }
.logger th:last-child { text-align: center; width: 64px; }

.logger td {
  padding: 11px 20px;
  border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 0.9375rem;
  font-variant-numeric: tabular-nums; text-align: right;
  color: var(--chalk);
}
.logger td:first-child { text-align: left; color: var(--muted); }
.logger td:last-child { text-align: center; }

.logger tr { transition: background 0.24s ease; }
/* A committed set gets the app's green edge — the same signal the
   phone gives when a row is written to the local database. */
.logger tr.done td { background: rgba(63, 185, 132, 0.05); }
.logger tr.done td:first-child {
  box-shadow: inset 2px 0 0 var(--live);
  color: var(--live);
}

.tick {
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid #3B4453; background: var(--panel-2);
  color: transparent; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.tick svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.6; }
.tick:hover { border-color: var(--faint); }
.tick[aria-pressed='true'] {
  background: rgba(63, 185, 132, 0.16);
  border-color: rgba(63, 185, 132, 0.5);
  color: var(--live);
}

.logger-foot {
  display: grid; grid-template-columns: 1fr auto; gap: 16px;
  align-items: center;
  padding: 16px 20px;
  border-top: 1px solid var(--line-2);
  background: var(--panel-2);
}
.stat-label {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--faint); display: block;
}
.stat-value {
  font-family: var(--mono); font-size: 1.375rem; font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.rest-timer {
  font-family: var(--mono); font-size: 1.375rem; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--signal);
  letter-spacing: -0.02em;
}
.rest-timer[data-idle='true'] { color: var(--faint); }

/* Connectivity readout: the whole point of the demo. */
.conn {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 0.6875rem;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.conn-item { display: flex; align-items: center; gap: 8px; color: var(--faint); }
.conn-item.ok { color: var(--live); }
.bars { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.bars i {
  width: 3px; background: var(--line-2); border-radius: 1px; display: block;
}
.bars i:nth-child(1) { height: 25%; }
.bars i:nth-child(2) { height: 50%; }
.bars i:nth-child(3) { height: 75%; }
.bars i:nth-child(4) { height: 100%; }
.dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--live);
  box-shadow: 0 0 0 3px rgba(63, 185, 132, 0.16);
}

/* ── Proof strip ────────────────────────────────────────── */
.proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-block: 1px solid var(--line);
}
.proof div {
  padding: 26px 20px;
  border-inline-start: 1px solid var(--line);
}
.proof div:first-child { border-inline-start: 0; }
@media (max-width: 640px) {
  .proof div:nth-child(odd) { border-inline-start: 0; }
}
.proof dt {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 6px;
}
.proof dd {
  margin: 0; font-family: var(--mono); font-size: 1.75rem; font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -0.03em;
}

/* ── Feature grid (deliberately uneven) ─────────────────── */
.features {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.card:hover { border-color: var(--line-2); background: var(--panel-2); }
.card p { margin: 0; color: var(--muted); font-size: 0.9688rem; }
.card h3 { margin: 0; }
.card-icon {
  width: 34px; height: 34px; color: var(--signal);
  margin-bottom: 2px;
}
.card-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.span-3 { grid-column: span 3; }
.span-2 { grid-column: span 2; }
@media (max-width: 900px) { .span-3, .span-2 { grid-column: span 6; } }

/* Feature detail list inside a wide card */
.spec {
  list-style: none; margin: 6px 0 0; padding: 0;
  display: grid; gap: 8px;
}
.spec li {
  display: flex; gap: 10px; align-items: baseline;
  font-size: 0.9375rem; color: var(--muted);
}
.spec li::before {
  content: '—'; color: var(--faint); font-family: var(--mono); flex-shrink: 0;
}

/* ── Split section (AI coach) ───────────────────────────── */
.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 64px); align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.chat {
  background: var(--panel); border: 1px solid var(--line-2);
  border-radius: 18px; padding: 20px;
  display: grid; gap: 12px;
}
.bubble {
  border-radius: 14px; padding: 13px 16px; font-size: 0.9375rem; line-height: 1.55;
  max-width: 88%;
}
.bubble.user {
  background: var(--panel-3); justify-self: end; border-bottom-right-radius: 5px;
}
.bubble.coach {
  background: rgba(124, 196, 255, 0.08);
  border: 1px solid rgba(124, 196, 255, 0.2);
  justify-self: start; border-bottom-left-radius: 5px;
}
.bubble .who {
  display: block; font-family: var(--mono); font-size: 0.5625rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint);
  margin-bottom: 6px;
}
.plan-chip {
  margin-top: 10px; padding: 12px 14px;
  border: 1px solid var(--line-2); border-radius: 10px; background: var(--ink);
  font-family: var(--mono); font-size: 0.8125rem; color: var(--muted);
  display: grid; gap: 5px;
}
.plan-chip b { color: var(--chalk); font-weight: 600; }

/* ── Achievements ladder ────────────────────────────────── */
.tiers {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px; margin-top: 8px;
}
.tier {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; background: var(--panel);
  display: grid; gap: 8px;
}
.tier .tier-name {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.18em;
  text-transform: uppercase;
}
.tier .tier-count {
  font-family: var(--mono); font-size: 1.5rem; font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.tier p { margin: 0; font-size: 0.875rem; color: var(--muted); }
.tier[data-tier='bronze']   { border-color: rgba(184, 115, 51, 0.35); }
.tier[data-tier='bronze']   .tier-name, .tier[data-tier='bronze'] .tier-count { color: #C4884F; }
.tier[data-tier='silver']   { border-color: rgba(165, 174, 187, 0.35); }
.tier[data-tier='silver']   .tier-name, .tier[data-tier='silver'] .tier-count { color: #A5AEBB; }
.tier[data-tier='gold']     { border-color: rgba(232, 178, 60, 0.35); }
.tier[data-tier='gold']     .tier-name, .tier[data-tier='gold'] .tier-count { color: var(--pr); }
.tier[data-tier='platinum'] { border-color: rgba(124, 196, 255, 0.35); }
.tier[data-tier='platinum'] .tier-name, .tier[data-tier='platinum'] .tier-count { color: var(--signal); }

.badge-row {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px;
}
.badge-pill {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.06em;
  border: 1px solid var(--line-2); border-radius: 999px;
  padding: 6px 13px; color: var(--muted);
}

/* ── Privacy levels ─────────────────────────────────────── */
.levels { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.level {
  display: grid; grid-template-columns: 132px 1fr; gap: 20px;
  padding: 20px 22px; align-items: baseline;
}
.level + .level { border-top: 1px solid var(--line); }
.level dt {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--signal);
}
.level dd { margin: 0; color: var(--muted); font-size: 0.9375rem; }
@media (max-width: 620px) {
  .level { grid-template-columns: 1fr; gap: 6px; }
}

/* ── FAQ ────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--line); }
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  cursor: pointer; list-style: none;
  padding: 22px 40px 22px 0; position: relative;
  font-family: var(--display); font-size: 1.0625rem; font-weight: 600;
  letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; inset-inline-end: 6px; top: 20px;
  font-family: var(--mono); font-size: 1.25rem; color: var(--faint);
  transition: transform 0.2s ease, color 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); color: var(--signal); }
.faq details p {
  margin: 0 0 24px; color: var(--muted); max-width: 72ch; font-size: 0.9688rem;
}

/* ── Closing CTA ────────────────────────────────────────── */
.cta {
  text-align: center;
  display: grid; justify-items: center; gap: 26px;
}
.cta .lead { margin: 0 auto; }
.cta .stores { justify-content: center; }

/* ── Footer ─────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 56px 40px;
  font-size: 0.9375rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px 24px;
}
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-grid h4 {
  font-family: var(--mono); font-size: 0.625rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint);
  margin: 0 0 14px;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-grid a { color: var(--muted); text-decoration: none; transition: color 0.18s ease; }
.footer-grid a:hover { color: var(--chalk); text-decoration: underline; text-underline-offset: 3px; }
.footer-blurb { color: var(--muted); max-width: 34ch; margin: 14px 0 0; font-size: 0.9375rem; }

.footer-bottom {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em;
  color: var(--faint); text-transform: uppercase;
}

/* Health disclaimer — legally load-bearing, so it is a permanent
   fixture of the footer rather than a one-off line on the home page. */
.disclaimer {
  margin-top: 26px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--muted); font-size: 0.8125rem; line-height: 1.6;
}
.disclaimer strong { color: var(--chalk); }


/* ── Utilities ──────────────────────────────────────────────
   Deliberately placed AFTER every component rule: a component
   like .spec sets `margin: 6px 0 0`, which would otherwise win
   the cascade against a same-specificity spacing utility and
   silently collapse the gap it was asked for.
   ---------------------------------------------------------- */

/* Anchored sections must clear the sticky header. */
[id] { scroll-margin-top: 92px; }

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

.center-text { text-align: center; }
.stat-end { text-align: end; }
.tight { margin-bottom: 16px; }
.tight-lg { margin-bottom: 18px; }
.lead-gap-sm { margin-bottom: 21px; }
.lead-gap { margin-bottom: 36px; }
.lead-gap-lg { margin-bottom: 44px; }
.spec-gap { margin-bottom: 20px; }
.footnote { font-size: 0.9375rem; color: var(--muted); margin: 0; }
.mt-lg { margin-top: 44px; }
.mt-xl { margin-top: 56px; }

/* ============================================================
   Legal documents
   Long-form reading needs a narrower measure and looser leading
   than the marketing page, and must print legibly on paper.
   ============================================================ */
.doc-header {
  padding-block: clamp(48px, 7vw, 80px) 32px;
  border-bottom: 1px solid var(--line);
}
.doc-header h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); letter-spacing: -0.03em; }
.doc-meta {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--faint);
  margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 20px;
}

.doc-layout {
  display: grid; grid-template-columns: 232px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  padding-block: 48px 96px;
  align-items: start;
}
@media (max-width: 940px) { .doc-layout { grid-template-columns: 1fr; } }

.doc-toc { position: sticky; top: 88px; }
@media (max-width: 940px) {
  .doc-toc {
    position: static;
    border: 1px solid var(--line); border-radius: var(--radius); padding: 20px;
    background: var(--panel);
  }
}
.doc-toc h2 {
  font-family: var(--mono); font-size: 0.625rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint);
  margin: 0 0 14px;
}
.doc-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; counter-reset: toc; }
.doc-toc li { counter-increment: toc; }
.doc-toc a {
  color: var(--muted); text-decoration: none; font-size: 0.875rem;
  display: flex; gap: 10px; line-height: 1.45;
  transition: color 0.18s ease;
}
.doc-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--mono); font-size: 0.6875rem; color: var(--faint);
  flex-shrink: 0; padding-top: 2px;
}
.doc-toc a:hover { color: var(--chalk); }

.doc {
  max-width: 70ch;
  font-size: 1.0313rem;
  line-height: 1.78;
}
.doc > section { scroll-margin-top: 90px; }
.doc h2 {
  font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em;
  margin: 52px 0 16px; padding-top: 24px; border-top: 1px solid var(--line);
}
.doc > section:first-child h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.doc h3 { font-size: 1.0625rem; margin: 30px 0 10px; }
.doc p { margin: 0 0 16px; color: #D5DAE2; }
.doc ul, .doc ol { margin: 0 0 18px; padding-inline-start: 22px; color: #D5DAE2; }
.doc li { margin-bottom: 9px; }
.doc li::marker { color: var(--faint); }
.doc strong { color: var(--chalk); font-weight: 600; }
.doc a { color: var(--signal); text-decoration: underline; text-underline-offset: 3px; }

.doc .callout {
  border: 1px solid var(--line-2); border-inline-start: 3px solid var(--signal);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--panel); padding: 18px 20px; margin: 0 0 22px;
}
.doc .callout p:last-child { margin-bottom: 0; }
.doc .callout.warn { border-inline-start-color: var(--pr); }

.doc-table-wrap { overflow-x: auto; margin: 0 0 22px; }
.doc table {
  width: 100%; border-collapse: collapse; font-size: 0.9375rem;
  min-width: 480px;
}
.doc th, .doc td {
  text-align: start; padding: 11px 14px;
  border: 1px solid var(--line); vertical-align: top; color: #D5DAE2;
}
.doc th {
  background: var(--panel-2); color: var(--chalk); font-weight: 600;
  font-size: 0.8125rem; letter-spacing: 0.02em;
}

.doc-updated {
  margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--faint);
}

/* Legal index cards */
.legal-index {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.legal-index a {
  display: grid; gap: 8px; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; background: var(--panel);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.legal-index a:hover { border-color: var(--line-2); background: var(--panel-2); }
.legal-index strong { font-family: var(--display); font-size: 1.0625rem; font-weight: 600; }
.legal-index span { color: var(--muted); font-size: 0.9063rem; }

/* Paper: legal text must survive being printed and filed. */
@media print {
  :root { --ink: #fff; --chalk: #000; --muted: #333; --line: #ccc; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .site-header, .site-footer, .doc-toc, .skip-link, .disclaimer { display: none !important; }
  .doc-layout { grid-template-columns: 1fr; padding-block: 0; }
  .doc { max-width: none; }
  .doc p, .doc li, .doc td, .doc th { color: #000; }
  .doc a { color: #000; text-decoration: underline; }
  .doc h2 { border-color: #ccc; page-break-after: avoid; }
  .doc .callout { border: 1px solid #999; background: #f5f5f5; }
}

/* Narrow phones: tighten the logger's gutters so the first column
   ("1 · Isınma") stays on one line and every row keeps the same height. */
@media (max-width: 460px) {
  .logger th, .logger td { padding-inline: 14px; }
  .logger td:first-child { white-space: nowrap; }
  .logger-head, .logger-foot, .conn { padding-inline: 14px; }
}

/* A page that opens with .doc-header and then drops into a .section was
   paying for both paddings at once, leaving a dead band under the title. */
.doc-header + .section { padding-top: clamp(32px, 4vw, 48px); }