/* ==========================================================================
   Hyper38 — 2026 design system
   Ink ground, paper counter-ground, Geist / Geist Mono, hairline grid.
   Palette values are the sRGB equivalents of the design's oklch ramp.
   ========================================================================== */

:root {
  /* ink surface */
  --ink:            #080A0E;
  --ink-panel:      #0B0E13;
  --ink-raised:     #0E1218;

  --line:           #212427;
  --line-mid:       #2F3337;
  --line-input:     #34393C;
  --line-strong:    #494E51;

  --fg:             #FFFFFF;
  --fg-bright:      #CCD2D6;
  --fg-lead:        #ADB2B6;
  --fg-body:        #9A9FA3;
  --fg-meta:        #82878B;
  --fg-faint:       #656A6D;
  --fg-ghost:       #54595C;

  /* paper surface */
  --paper:          #F3F3F1;
  --paper-fg:       #0B0D11;
  --paper-line:     #C1C4C7;
  --paper-body:     #4E5358;
  --paper-meta:     #5E6468;
  --paper-faint:    #757B80;

  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --shell:   1440px;
  --gutter:  clamp(20px, 5vw, 56px);
  --band-y:  clamp(64px, 9vw, 110px);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, blockquote, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; }

a { color: inherit; text-decoration: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 1px solid var(--fg);
  outline-offset: 3px;
}

::selection { background: var(--fg); color: var(--ink); }

/* --------------------------------------------------------------- primitives */

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* A full-width horizontal band. Dark by default, paper when modified. */
.band { border-bottom: 1px solid var(--line); }
.band--paper {
  background: var(--paper);
  color: var(--paper-fg);
  border-bottom: 0;
}
.band__inner { padding-block: var(--band-y); }

/* Mono eyebrow / caption lettering */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-meta);
  line-height: 1.8;
}
.band--paper .eyebrow { color: var(--paper-meta); }

.meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-meta);
}
.band--paper .meta { color: var(--paper-meta); }

.rule { width: 40px; height: 1px; background: var(--line-strong); }

/* Rail + body: the recurring two-column editorial split */
.split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px 56px;
}
.split__rail { flex: 0 1 220px; padding-top: 12px; }
.split__body { flex: 1 1 540px; min-width: 0; }

.lede {
  font-size: 17px;
  line-height: 1.65;
  color: var(--fg-lead);
  max-width: 620px;
  text-wrap: pretty;
}
.band--paper .lede { color: var(--paper-body); }

.h2 {
  font-size: clamp(34px, 4.4vw, 62px);
  line-height: 1.02;
  font-weight: 300;
  letter-spacing: -0.04em;
  max-width: 900px;
  text-wrap: balance;
}
.h2--sm {
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

/* Hairline cell grid: container draws top+left, each cell right+bottom. */
.cells {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cell, 300px)), 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.cells > * {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.band--paper .cells,
.band--paper .cells > * { border-color: var(--paper-line); }

/* Buttons */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 17px 30px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--solid { background: var(--fg); color: var(--ink); }
.btn--solid:hover { background: var(--fg-bright); }
.btn--ghost { border-color: var(--line-strong); color: var(--fg-bright); }
.btn--ghost:hover { border-color: var(--fg); color: var(--fg); }
.btn--sm { padding: 14px 24px; font-size: 11px; }

/* ------------------------------------------------------------------ masthead */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(8, 10, 14, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.masthead__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 20px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 40px;
}

.wordmark { display: block; color: var(--fg); }
.wordmark svg { height: 15px; width: auto; }
.wordmark--lg svg { height: 18px; }

.masthead__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--fg-body);
}
.masthead__nav a { transition: color .18s ease; }
.masthead__nav a:hover { color: var(--fg); }
.masthead__nav .btn {
  color: var(--fg);
  border-color: var(--line-strong);
  padding: 9px 18px;
  font-size: 11px;
  letter-spacing: 0.18em;
}
.masthead__nav .btn:hover { background: var(--fg); color: var(--ink); border-color: var(--fg); }

.burger {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 1px solid var(--line-strong);
  cursor: pointer;
  position: relative;
}
.burger span {
  position: absolute;
  left: 11px;
  width: 16px;
  height: 1px;
  background: var(--fg);
  transition: transform .22s ease, opacity .18s ease;
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 20px; }
.burger span:nth-child(3) { top: 25px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.drawer {
  display: none;
  border-bottom: 1px solid var(--line);
  background: var(--ink);
}
.drawer.is-open { display: block; }
.drawer nav {
  display: flex;
  flex-direction: column;
  padding-bottom: 24px;
}
.drawer a {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  color: var(--fg-bright);
}
.drawer .btn { margin-top: 24px; text-align: center; border-bottom: 1px solid var(--line-strong); }

@media (max-width: 900px) {
  .masthead__nav { display: none; }
  .burger { display: block; }
}

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

.hero__top {
  padding: clamp(56px, 8vw, 96px) var(--gutter) 0;
  max-width: var(--shell);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px 56px;
}
.hero__rail {
  flex: 0 1 220px;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.hero__rail .meta--soft {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--fg-faint);
  line-height: 1.8;
}
.hero__body {
  flex: 1 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.6vw, 44px);
  padding-bottom: clamp(48px, 6vw, 80px);
}
.hero h1 {
  font-size: clamp(44px, 7vw, 104px);
  line-height: 0.94;
  font-weight: 300;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.hero__sub {
  max-width: 620px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--fg-lead);
  text-wrap: pretty;
}
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

.stat {
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stat__num {
  font-size: 44px;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
}
.hero__coords {
  padding: 18px 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* ------------------------------------------------------------------- marquee */

.marquee {
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 42s linear infinite;
}
.marquee__set {
  display: flex;
  gap: 34px;
  padding-right: 34px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-ghost);
  white-space: nowrap;
}
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* --------------------------------------------------------------- client wall */

/* 12 logos — only column counts that divide 12 evenly, so rows always fill. */
.clients {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--paper-line);
  border-left: 1px solid var(--paper-line);
}
.clients > * {
  height: 116px;
  border-right: 1px solid var(--paper-line);
  border-bottom: 1px solid var(--paper-line);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.clients img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 40px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.7;
}
/* vector marks carry less optical padding than the raster ones */
.clients img.is-vector { max-height: 36px; }
@media (max-width: 1080px) { .clients { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .clients { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .clients { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ----------------------------------------------------------------- numbered */

.numbered {
  padding: 34px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.numbered__idx {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--paper-faint);
}
.numbered__title {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.numbered p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--paper-body);
  max-width: 470px;
  text-wrap: pretty;
}

/* --------------------------------------------------------------- audit panel */

.audit { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px 56px; }
.audit__rail {
  flex: 0 1 220px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.audit__claim {
  font-size: 21px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.audit__rail p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--fg-body);
  text-wrap: pretty;
}
.spec {
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--fg-body);
}
.spec div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.spec span + span { color: var(--fg-faint); }
/* the audit is the lead magnet — its price is the line that should read first */
.spec .spec__free { color: var(--fg); }
.audit__rail .btn { align-self: flex-start; }

.terminal {
  flex: 1 1 560px;
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--ink-panel);
}
.terminal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--fg-meta);
}
.terminal__dots { display: flex; gap: 6px; }
.terminal__dots i { width: 8px; height: 8px; background: #44484C; }
.terminal__dots i:last-child { background: #AAAFB3; }
.terminal__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.terminal__col {
  padding: 34px 30px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 2.1;
  color: var(--fg-body);
  overflow-wrap: anywhere;
}
.terminal__col + .terminal__col { border-left: 1px solid var(--line); }
.terminal__col b { color: var(--fg); font-weight: 400; }
.terminal__col b.wide { letter-spacing: 0.14em; }
.terminal__gap { height: 18px; }
.terminal__gap--lg { height: 30px; }
@media (max-width: 760px) {
  .terminal__col + .terminal__col {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* ---------------------------------------------------------------- audit tiers */

/* Scarcity meter: one tick per free place, open ticks are the ones left. */
.places {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}
.places__meter { display: flex; gap: 5px; }
.places__tick {
  width: 13px;
  height: 13px;
  border: 1px solid var(--line-strong);
}
.places__tick.is-open { background: var(--fg); border-color: var(--fg); }
.places__count {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-meta);
}
.places__count strong { color: var(--fg); font-weight: 400; }

.tier {
  padding: 36px 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* the free tier is the lead magnet — lift it off the ground slightly */
.tier--lead { background: var(--ink-raised); }
.tier__price {
  font-size: 40px;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
}
.tier__sub {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--fg-meta);
  line-height: 1.7;
}
.tier > p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--fg-body);
  text-wrap: pretty;
}
.tier__list { display: flex; flex-direction: column; gap: 9px; }
.tier__list li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-bright);
}
.tier__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 10px;
  height: 1px;
  background: var(--line-strong);
}
.tier .spec { margin-top: auto; }
.tier .btn { text-align: center; }

/* ------------------------------------------------------------------ services */

.service {
  padding: 36px 30px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 300px;
  transition: background-color .18s ease;
}
.service:hover { background: var(--ink-raised); }
.service__title {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.service p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--fg-body);
  text-wrap: pretty;
}
.tags {
  margin-top: auto;
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-meta);
}
.tags span { border: 1px solid var(--line-mid); padding: 5px 9px; }

/* ------------------------------------------------------------------- pillars */

.pillar {
  padding: 27px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pillar__title { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.pillar__note {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--paper-meta);
}

/* Two-column prose rows separated by hairlines */
.rows > div {
  padding: 32px 0;
  border-top: 1px solid var(--paper-line);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px 40px;
}
.rows > div:last-child { border-bottom: 1px solid var(--paper-line); }
.rows h3 {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.rows p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--paper-body);
  text-wrap: pretty;
}

.step {
  padding: 36px 34px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.step__idx {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--paper-faint);
}
.step__title { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
.step p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--paper-body);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------- cases */

.cases { border-top: 1px solid var(--line); }
.case {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 20px 40px;
  padding: 38px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
  transition: background-color .18s ease;
}
.case:hover { background: var(--ink-raised); }
.case__sector {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-meta);
  padding-top: 6px;
}
.case__body { display: flex; flex-direction: column; gap: 12px; }
.case__title { font-size: 26px; font-weight: 500; letter-spacing: -0.025em; }
.case__body p {
  max-width: 680px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--fg-body);
  text-wrap: pretty;
}
.case__result {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: right;
}
.case__num { font-size: 40px; font-weight: 300; letter-spacing: -0.03em; line-height: 1; }
.case__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-meta);
}
@media (max-width: 800px) {
  .case__result { text-align: left; }
}

/* ------------------------------------------------------------------- founder */

.founder {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(36px, 5vw, 72px);
  align-items: flex-start;
}
.founder__portrait { flex: 1 1 260px; max-width: 380px; display: flex; flex-direction: column; gap: 20px; }
.founder__portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1); }
.founder__quote { flex: 3 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 40px; padding-top: 8px; }
.founder__quote blockquote {
  font-size: clamp(24px, 2.8vw, 38px);
  line-height: 1.28;
  font-weight: 300;
  letter-spacing: -0.03em;
  text-wrap: pretty;
}
.founder__sig {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.founder__name { font-size: 16px; font-weight: 500; letter-spacing: 0.01em; }

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

.contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(48px, 6vw, 80px);
  align-items: start;
}
.contact__lead { display: flex; flex-direction: column; gap: 30px; }
.contact h2 {
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.98;
  font-weight: 300;
  letter-spacing: -0.045em;
}
.contact__lead p { max-width: 480px; font-size: 17px; line-height: 1.65; color: var(--fg-lead); text-wrap: pretty; }
.channels { margin-top: 12px; border-top: 1px solid var(--line); }
.channels > * {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 15px;
  color: var(--fg-bright);
}
.channels a:hover { color: var(--fg); }
.channels .key {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--fg-faint);
}

.form-card {
  border: 1px solid var(--line);
  padding: clamp(28px, 4vw, 44px) clamp(24px, 3.4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.form-card__head { display: flex; flex-direction: column; gap: 8px; }
.form-card__title { font-size: 30px; font-weight: 300; letter-spacing: -0.03em; }
.form-card__head p { margin-top: 6px; font-size: 14px; line-height: 1.7; color: var(--fg-meta); text-wrap: pretty; }
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 20px;
}
.field { display: flex; flex-direction: column; gap: 9px; }
.field > span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-meta);
}
.field input,
.field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-input);
  padding: 10px 0;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--fg);
  outline: none;
  transition: border-color .18s ease;
}
.field input:focus,
.field textarea:focus { border-bottom-color: var(--fg); }
.field textarea { resize: vertical; }
.field.has-error input,
.field.has-error textarea { border-bottom-color: #C4574F; }
.field .field__error {
  display: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #C4574F;
}
.field.has-error .field__error { display: block; }
.form-card button { width: 100%; padding: 17px 0; }
.form-card button[disabled] { opacity: .55; cursor: default; }
.form-note {
  font-size: 14px;
  line-height: 1.7;
  color: var(--fg-meta);
}
.form-sent {
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 8px 0;
}
.form-sent.is-visible { display: flex; }
.form-card.is-sent form { display: none; }

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

.site-footer__top {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 56px var(--gutter) 40px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px 60px;
  flex-wrap: wrap;
}
.site-footer__mark { display: flex; flex-direction: column; gap: 14px; }
.site-footer__mark .rule { width: 152px; background: var(--line-input); }
.site-footer__tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--fg-meta);
  padding-left: 0.28em;
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 30px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-meta);
}
.site-footer__links a:hover { color: var(--fg); }
.site-footer__legal {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 22px var(--gutter) 56px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 12px 40px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--fg-faint);
}

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

.legal__head {
  padding-top: clamp(56px, 8vw, 96px);
  padding-bottom: clamp(40px, 5vw, 64px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 56px;
}
.legal__head h1 {
  font-size: clamp(40px, 6vw, 82px);
  line-height: 0.98;
  font-weight: 300;
  letter-spacing: -0.045em;
}
.legal__title { display: flex; flex-direction: column; gap: 20px; }

.legal__body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 40px 56px;
  padding-block: clamp(48px, 6vw, 80px);
}
.legal__toc {
  flex: 0 1 240px;
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.legal__toc a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  line-height: 1.6;
  color: var(--fg-meta);
  padding: 6px 0;
}
.legal__toc a:hover { color: var(--fg); }

.prose { flex: 1 1 620px; min-width: 0; max-width: 760px; }
.prose > * + * { margin-top: 18px; }
.prose p, .prose li {
  font-size: 16px;
  line-height: 1.75;
  color: var(--fg-lead);
  text-wrap: pretty;
}
.prose h2 {
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--fg);
  margin-top: 64px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  scroll-margin-top: 96px;
}
.prose > h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.prose h3 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-meta);
  margin-top: 34px;
}
.prose ul { display: flex; flex-direction: column; gap: 8px; }
.prose li { padding-left: 22px; position: relative; }
.prose li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  width: 10px;
  height: 1px;
  background: var(--line-strong);
}
.prose strong { color: var(--fg); font-weight: 500; }
.prose a { color: var(--fg); border-bottom: 1px solid var(--line-strong); }
.prose a:hover { border-bottom-color: var(--fg); }

.legal__foot {
  border-top: 1px solid var(--line);
  padding-block: clamp(40px, 5vw, 64px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
}

@media (max-width: 900px) {
  .legal__toc { display: none; }
}