/* ==========================================================================
   CUA — Copyright Evidence Infrastructure
   Landing page design system
   ========================================================================== */

/* Brand script face, self-hosted */
@font-face {
  font-family: 'Modernline';
  src: url('/fonts/modernline.woff2') format('woff2'),
       url('/fonts/modernline.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Surfaces */
  --bg:            #05080F;
  --bg-2:          #080D18;
  --panel:         #0B1322;
  --card:          #0E1729;
  --card-2:        #121D33;

  /* Brand */
  --gold:          #F3CE87;
  --gold-bright:   #FFDFA1;
  --gold-deep:     #C9A35C;
  --teal:          #34D8A8;
  --blue:          #5B9BE8;

  /* Text */
  --text:          #FFFFFF;
  --text-2:        #C6D0E0;
  --text-3:        #8D9BB0;
  --text-4:        #5F6C80;

  /* Lines */
  --line:          rgba(255, 255, 255, 0.10);
  --line-soft:     rgba(255, 255, 255, 0.06);
  --line-gold:     rgba(243, 206, 135, 0.32);

  /* Type */
  --serif:  'Playfair Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --script: 'Modernline', 'Segoe Script', cursive;

  /* Metrics */
  --gutter: 28px;
  --maxw:   1280px;
  --radius: 14px;
  --header-h: 84px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-2);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; color: var(--text); font-weight: 700; line-height: 1.12; }
p  { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

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

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

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

/* ---------- Shared type ---------- */
.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0;
}
.eyebrow--gold { color: var(--gold-deep); }

.display {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
}
.display .gold { color: var(--gold); display: block; }

/* Modernline has long ascenders/descenders, so it needs generous leading
   to keep swashes from colliding between lines. */
.script {
  font-family: var(--script);
  font-weight: 400;
  color: var(--gold);
  line-height: 1.42;
}

.lead { color: var(--text-2); font-size: 17px; max-width: 54ch; }

/* Stacked, wide-tracked caps used as a graphic device */
.caps-stack {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  line-height: 2.1;
  color: var(--text-2);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.btn svg { flex: none; }

.btn--gold {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #171208;
  box-shadow: 0 8px 26px rgba(243, 206, 135, 0.20);
}
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(243, 206, 135, 0.32); }

.btn--ghost {
  border: 1px solid var(--line-gold);
  color: var(--text);
  background: rgba(9, 14, 24, 0.45);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { border-color: var(--gold); background: rgba(243, 206, 135, 0.08); transform: translateY(-2px); }

.btn--sm { padding: 11px 20px; font-size: 15px; }

/* Gold underlined text link with arrow */
.link-gold {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--gold);
  font-weight: 600;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line-gold);
  transition: border-color .2s ease, gap .2s ease;
}
.link-gold:hover { border-color: var(--gold); gap: 14px; }

/* ==========================================================================
   Header
   ========================================================================== */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  height: var(--header-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.header.is-stuck {
  background: rgba(5, 8, 15, 0.88);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.header > .container { display: flex; align-items: center; gap: 32px; }

.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand__mark { width: 38px; height: 38px; }
.brand__name {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
  line-height: 1.05;
}
.brand__tag {
  display: block;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.115em;
  color: var(--text-3);
  white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: 34px; margin-inline: auto; }
.nav a {
  font-size: 15.5px;
  font-weight: 500;
  color: var(--text-2);
  transition: color .18s ease;
}
.nav a:hover { color: var(--gold); }

.header__actions { display: flex; align-items: center; gap: 12px; flex: none; }

.nav-toggle { display: none; padding: 8px; color: var(--text); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  padding: calc(var(--header-h) + 100px) 0 0;
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media video,
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, var(--bg) 6%, rgba(5, 8, 15, 0.86) 32%, rgba(5, 8, 15, 0.34) 56%, rgba(5, 8, 15, 0.62) 100%),
    linear-gradient(to bottom, rgba(5, 8, 15, 0.72) 0%, transparent 28%, rgba(5, 8, 15, 0.88) 92%, var(--bg) 100%);
}

/* The wider left column pushes the receipt right so the hero subject's
   face reads in the gap between the copy and the card. */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 52px;
  align-items: center;
  min-height: 470px;
}

.hero__copy { max-width: 620px; }
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 30px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-3);
}
.hero__eyebrow span { color: var(--gold-deep); }

.hero h1 {
  font-family: var(--serif);
  font-size: clamp(40px, 5.6vw, 70px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin-bottom: 26px;
}
.hero h1 .gold {
  display: block;
  color: var(--gold);
}

.hero__lead {
  font-size: 18px;
  color: var(--text-2);
  max-width: 30em;
  margin-bottom: 38px;
}

.hero__ctas { display: flex; flex-wrap: wrap; gap: 16px; }

/* Sits above the receipt card, right edge aligned to the container. */
.hero__script {
  position: absolute;
  top: calc(var(--header-h) + 2px);
  right: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  font-size: clamp(24px, 2.6vw, 34px);
  text-align: right;
  transform: rotate(-5deg);
  transform-origin: 100% 50%;
  pointer-events: none;
  text-shadow: 0 2px 24px rgba(5, 8, 15, 0.8);
}

.hero__trust {
  margin-top: 40px;
  padding: 20px 0 26px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--text-4);
}

/* ---------- Evidence receipt card ---------- */
.receipt {
  background: linear-gradient(165deg, rgba(20, 32, 56, 0.94), rgba(9, 15, 27, 0.96));
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(12px);
}

.receipt__head { display: flex; align-items: center; gap: 16px; }
.receipt__thumb {
  width: 56px; height: 56px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(91, 155, 232, 0.14);
  border: 1px solid rgba(91, 155, 232, 0.28);
  color: var(--blue);
}
.receipt__title { font-size: 21px; font-weight: 600; }
.receipt__artist { font-size: 15px; color: var(--text-3); }

.receipt__player { display: flex; align-items: center; gap: 16px; margin: 22px 0; }
.receipt__play {
  width: 46px; height: 46px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid var(--line);
  color: var(--text);
  transition: background-color .2s ease, transform .2s ease;
}
.receipt__play:hover { background: rgba(243, 206, 135, 0.18); transform: scale(1.06); }

/* Bar count is computed from the measured width in site.js, so the
   waveform never forces the card wider than a phone viewport. */
.waveform {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 2.5px;
  height: 42px;
  min-width: 0;
  overflow: hidden;
}
.waveform i {
  flex: 1 1 0;
  min-width: 1.5px;
  background: rgba(198, 208, 224, 0.55);
  border-radius: 2px;
  height: var(--h, 30%);
}
.receipt__time { font-size: 14px; color: var(--text-3); flex: none; font-variant-numeric: tabular-nums; }

.receipt__body {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}
.receipt__checks { display: grid; gap: 13px; flex: 1; min-width: 0; }
.receipt__checks li { display: flex; align-items: center; gap: 12px; font-size: 15.5px; color: var(--text); }
.check {
  width: 22px; height: 22px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--teal);
  color: #05221A;
}
.receipt__seal { width: 128px; height: auto; flex: none; }

.receipt__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  font-size: 14.5px;
  color: var(--text-3);
}
.receipt__foot a { color: var(--text); font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.receipt__foot a:hover { color: var(--gold); }

/* ==========================================================================
   Sections
   ========================================================================== */
.section { padding: 104px 0; position: relative; isolation: isolate; }
.section--tight { padding: 84px 0; }

.section__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}
.section__scrim { position: absolute; inset: 0; z-index: -1; }

.section-heads {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 38px;
}

/* ---------- Mediums grid ---------- */
.mediums { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 50%, var(--bg) 100%); }

.mediums__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}

.medium {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 3 / 4;
  isolation: isolate;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.medium:hover { transform: translateY(-6px); border-color: var(--line-gold); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5); }
.medium img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.medium:hover img { transform: scale(1.05); }
.medium::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(5, 8, 15, 0.96) 14%, rgba(5, 8, 15, 0.42) 52%, rgba(5, 8, 15, 0.12) 100%);
}
.medium__label {
  position: absolute;
  inset: auto 0 0 0;
  padding: 20px;
}
.medium__label h3 { font-size: 19px; font-weight: 600; margin-bottom: 4px; }
/* Reserve two lines so every tile's title sits on the same baseline,
   whether or not its caption wraps. */
.medium__label p {
  font-size: 14px;
  color: var(--text-3);
  line-height: 1.35;
  min-height: 2.7em;
}

/* ---------- Platforms ---------- */
.platforms .section__scrim {
  background: linear-gradient(90deg, var(--bg) 8%, rgba(5, 8, 15, 0.88) 38%, rgba(5, 8, 15, 0.55) 100%);
}
.platforms__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 56px;
  align-items: center;
}
.platforms h2 {
  font-family: var(--serif);
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.14;
  margin: 18px 0 22px;
  text-wrap: balance;
}
.platforms h2 .gold { display: block; color: var(--gold); }
.platforms .lead { margin-bottom: 34px; }

.flow {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(8, 13, 24, 0.72);
  backdrop-filter: blur(10px);
  padding: 32px 18px;
}
.flow__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: start;
  gap: 8px;
}
.flow__step { text-align: center; min-width: 0; }
.flow__icon {
  width: 62px; height: 62px;
  margin: 0 auto 16px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  color: var(--text);
}
.flow__icon--api  { background: rgba(91, 155, 232, 0.14); border-color: rgba(91, 155, 232, 0.30); color: var(--blue); }
.flow__icon--done { background: rgba(52, 216, 168, 0.13); border-color: rgba(52, 216, 168, 0.32); color: var(--teal); }
.flow__step h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.flow__step--api h3 { color: var(--teal); }
.flow__step p { font-size: 14.5px; color: var(--text-3); line-height: 1.5; }
.flow__arrow { color: var(--teal); padding-top: 22px; }

.platforms__note {
  margin-top: 22px;
  text-align: right;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--text-4);
}

/* ==========================================================================
   Featured integrations
   ========================================================================== */
.integration { padding: 0; position: relative; isolation: isolate; overflow: hidden; }
.integration .section__scrim {
  background: linear-gradient(92deg, rgba(5, 8, 15, 0.97) 4%, rgba(5, 8, 15, 0.90) 34%, rgba(5, 8, 15, 0.30) 72%, rgba(5, 8, 15, 0.55) 100%);
}
.integration__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: 40px;
  align-items: center;
  padding: 92px 0 78px;
}
.integration__copy { display: flex; gap: 26px; max-width: 680px; }

.brand-tile {
  width: 92px; height: 92px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 16px;
  border: 1px solid var(--line-gold);
  background: rgba(6, 10, 18, 0.85);
  overflow: hidden;
}
.brand-tile img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
/* Monogram fallback shown until the real partner logo is dropped in */
.brand-tile__monogram {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
}

.integration h2 {
  font-family: var(--serif);
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.08;
  margin: 12px 0 10px;
}
.integration__sub {
  font-family: var(--serif);
  font-size: clamp(20px, 2.1vw, 27px);
  font-weight: 400;
  color: var(--gold);
  margin-bottom: 22px;
}
.integration .lead { margin-bottom: 30px; }

.integration__accent { justify-self: end; text-align: center; padding-right: 8px; }
.integration__accent .script { font-size: clamp(28px, 3.2vw, 44px); }
.integration__accent .caps-stack { color: var(--gold-deep); text-align: center; }
.integration__accent hr {
  width: 46px;
  margin: 18px auto 0;
  border: 0;
  border-top: 1px solid var(--line-gold);
}

/* 4-up feature strip beneath each integration.
   Full-bleed dark band so the labels stay legible over the photography. */
.feature-band {
  position: relative;
  background: linear-gradient(to bottom, rgba(4, 7, 13, 0.72), rgba(4, 7, 13, 0.90));
  border-top: 1px solid var(--line-soft);
  backdrop-filter: blur(3px);
}
.feature-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.feature-strip__item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 24px 18px 24px 0;
  min-width: 0;
}
.feature-strip__item + .feature-strip__item { border-left: 1px solid var(--line-soft); padding-left: 22px; }
.feature-strip__icon {
  width: 52px; height: 52px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-gold);
  color: var(--gold);
}
.feature-strip--blue .feature-strip__icon { border-color: rgba(198, 208, 224, 0.28); color: var(--text-2); }
.feature-strip__item h4 { font-size: 15.5px; font-weight: 600; margin-bottom: 2px; line-height: 1.3; }
.feature-strip__item p { font-size: 13.5px; color: var(--text-3); line-height: 1.4; }

/* ==========================================================================
   Foundation band
   ========================================================================== */
.foundation { padding: 0; position: relative; isolation: isolate; overflow: hidden; }
.foundation .section__scrim {
  background: linear-gradient(90deg, rgba(5, 8, 15, 0.55) 0%, rgba(5, 8, 15, 0.88) 28%, rgba(5, 8, 15, 0.95) 100%);
}
.foundation__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) repeat(4, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
  padding: 76px 0;
}
.foundation__title { padding-right: 32px; display: flex; align-items: center; }
.foundation__title .caps-stack { font-size: 14px; letter-spacing: 0.30em; color: var(--text); }

.pillar {
  padding: 4px 26px;
  border-left: 1px solid var(--line-soft);
  min-width: 0;
}
.pillar__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--line);
  color: var(--text);
  margin-bottom: 18px;
}
.pillar h3 { font-size: 19px; font-weight: 600; margin-bottom: 10px; }
.pillar p { font-size: 15px; color: var(--text-3); line-height: 1.5; }

/* ==========================================================================
   Pricing
   ========================================================================== */
.pricing { background: var(--bg-2); border-block: 1px solid var(--line-soft); }
.pricing__head { text-align: center; margin-bottom: 46px; }
.pricing__head h2 {
  font-family: var(--serif);
  font-size: clamp(32px, 3.8vw, 48px);
  margin: 16px 0 14px;
}
.pricing__head p { color: var(--text-3); max-width: 56ch; margin-inline: auto; }

.pricing__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 880px;
  margin-inline: auto;
}
.plan {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(165deg, var(--card-2), var(--card));
  padding: 38px 34px;
  display: flex;
  flex-direction: column;
}
.plan--featured { border-color: var(--line-gold); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45); }
.plan h3 { font-size: 20px; font-weight: 600; margin-bottom: 18px; }
.plan__price {
  font-family: var(--serif);
  font-size: 48px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
}
.plan__period { font-size: 14px; color: var(--text-4); margin: 8px 0 22px; }
.plan p.plan__desc { font-size: 15.5px; color: var(--text-3); margin-bottom: 30px; }
.plan .btn { align-self: flex-start; margin-top: auto; }

/* ==========================================================================
   Final CTA
   ========================================================================== */
.final { padding: 0; position: relative; isolation: isolate; overflow: hidden; }
.final .section__scrim {
  background: linear-gradient(90deg, rgba(5, 8, 15, 0.95) 6%, rgba(5, 8, 15, 0.72) 40%, rgba(5, 8, 15, 0.40) 74%, rgba(5, 8, 15, 0.72) 100%);
}
.final__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 36px 48px;
  padding: 88px 0;
}
.final__copy { flex: 1 1 320px; min-width: 0; }
.final h2 {
  font-family: var(--serif);
  font-size: clamp(32px, 4.2vw, 52px);
  margin-top: 16px;
}
.final__ctas { display: flex; flex-wrap: wrap; gap: 16px; flex: none; }
.final__note {
  flex: 0 1 260px;
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  line-height: 2.1;
  text-transform: uppercase;
  color: var(--text-2);
  text-align: right;
  text-shadow: 0 2px 14px rgba(4, 7, 13, 0.95);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background: #030509; border-top: 1px solid var(--line-soft); padding: 46px 0 34px; }
.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px 40px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line-soft);
}
.footer__nav { display: flex; flex-wrap: wrap; gap: 34px; margin-left: auto; }
.footer__nav a { font-size: 15.5px; color: var(--text-2); }
.footer__nav a:hover { color: var(--gold); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 30px;
  padding-top: 26px;
  font-size: 14.5px;
  color: var(--text-4);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 26px; margin-left: auto; }
.footer__legal a:hover { color: var(--gold); }
.footer__copy { margin-inline: auto; }

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
  .reveal.is-in { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .nav { gap: 24px; }
  .nav a { font-size: 14.5px; }
  .mediums__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  :root { --gutter: 22px; }

  .nav,
  .header__actions .btn--ghost { display: none; }
  .nav-toggle { display: grid; place-items: center; margin-left: auto; order: 3; }
  .header__actions { gap: 8px; }

  .nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    inset: var(--header-h) 0 auto 0;
    margin: 0;
    padding: 14px var(--gutter) 22px;
    background: rgba(5, 8, 15, 0.97);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
  }
  .nav.is-open a { padding: 12px 0; font-size: 17px; width: 100%; }

  .hero__grid { grid-template-columns: 1fr; gap: 46px; min-height: 0; }
  .hero__script { position: static; text-align: left; transform: none; margin-bottom: 22px; }
  .hero__media video, .hero__media img { object-position: 70% center; }
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(5, 8, 15, 0.80) 0%, rgba(5, 8, 15, 0.72) 40%, rgba(5, 8, 15, 0.94) 88%, var(--bg) 100%);
  }
  .hero__trust { margin-top: 46px; }

  .platforms__grid { grid-template-columns: 1fr; gap: 42px; }
  .platforms__note { text-align: left; }

  .integration__inner { grid-template-columns: 1fr; gap: 32px; padding: 72px 0 62px; }
  .integration__accent { justify-self: start; text-align: left; }
  .integration__accent .caps-stack { text-align: left; }
  .integration__accent hr { margin-inline: 0; }

  .feature-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-strip__item { padding: 22px 20px 22px 0; }
  .feature-strip__item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .feature-strip__item:nth-child(even) { border-left: 1px solid var(--line-soft); padding-left: 22px; }
  .feature-strip__item:nth-child(n + 3) { border-top: 1px solid var(--line-soft); }

  .foundation__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 0; padding: 62px 0; }
  .foundation__title { grid-column: 1 / -1; padding-right: 0; }
  .pillar { padding: 4px 22px; }
  .pillar:nth-child(odd) { border-left: 0; padding-left: 0; }

  .final__note { flex-basis: 100%; margin-left: 0; text-align: left; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }

  .section { padding: 72px 0; }
  .section--tight { padding: 60px 0; }

  .brand__tag { display: none; }
  .brand__mark { width: 34px; height: 34px; }

  /* Keep brand + CTA + toggle inside a phone viewport */
  .header > .container { gap: 12px; }
  .header__actions .btn--gold { padding: 10px 14px; font-size: 14px; gap: 7px; }

  .hero { padding-top: calc(var(--header-h) + 48px); }
  .hero__trust { letter-spacing: 0.2em; font-size: 10px; }
  .eyebrow { letter-spacing: 0.22em; }
  .hero__eyebrow { gap: 10px; font-size: 10px; letter-spacing: 0.22em; flex-wrap: wrap; }
  .hero__ctas .btn { flex: 1 1 100%; justify-content: center; }

  .receipt { padding: 20px; border-radius: 16px; }
  .receipt__body { flex-direction: column; align-items: flex-start; gap: 20px; }
  .receipt__seal { width: 104px; align-self: center; }

  .mediums__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .medium { aspect-ratio: 4 / 5; }

  .flow { padding: 26px 20px; }
  .flow__row { grid-template-columns: 1fr; gap: 24px; }
  .flow__arrow { transform: rotate(90deg); padding: 0; justify-self: center; }

  .integration__copy { flex-direction: column; gap: 20px; }
  .brand-tile { width: 74px; height: 74px; }

  .feature-strip { grid-template-columns: 1fr; }
  .feature-strip__item,
  .feature-strip__item:nth-child(even) { border-left: 0; padding: 18px 0; }
  .feature-strip__item + .feature-strip__item { border-top: 1px solid var(--line-soft); }

  .foundation__inner { grid-template-columns: 1fr; }
  .pillar { border-left: 0; padding: 0; }
  .pillar + .pillar { border-top: 1px solid var(--line-soft); padding-top: 26px; }

  .pricing__grid { grid-template-columns: 1fr; }
  .plan { padding: 30px 26px; }

  .final__inner { padding: 68px 0; }
  .final__ctas { flex: 1 1 100%; }
  .final__ctas .btn { flex: 1 1 100%; justify-content: center; }

  .footer__nav { gap: 18px 26px; margin: 0; }
  .footer__legal { margin-left: 0; }
  .footer__copy { margin-inline: 0; }
}

/* ==========================================================================
   Documentation pages
   ========================================================================== */
:root {
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", "Courier New", monospace;
}

/* Pages without a hero video carry the opaque header from the start */
.header--solid {
  background: rgba(5, 8, 15, 0.88);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}

/* ---------- Docs hero ---------- */
.doc-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--header-h) + 76px) 0 68px;
}
.doc-hero .section__scrim {
  background: linear-gradient(96deg, var(--bg) 10%, rgba(5, 8, 15, 0.90) 42%, rgba(5, 8, 15, 0.62) 100%),
              linear-gradient(to bottom, transparent 55%, var(--bg) 100%);
}
.doc-hero h1 {
  font-family: var(--serif);
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 18px 0 20px;
}
.doc-hero .lead { font-size: 18px; max-width: 46em; margin-bottom: 32px; }
.doc-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* Base-URL chip */
.url-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px 11px 16px;
  border: 1px solid var(--line-gold);
  border-radius: 10px;
  background: rgba(8, 13, 24, 0.66);
  backdrop-filter: blur(6px);
  font-family: var(--mono);
  font-size: 14.5px;
  color: var(--text);
  max-width: 100%;
}
.url-chip__label {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  flex: none;
}
.url-chip code { overflow-x: auto; white-space: nowrap; min-width: 0; }

/* ---------- Layout ---------- */
.doc-layout {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 60px;
  align-items: start;
  padding-block: 64px 96px;
}
/* Grid items default to min-width:auto, which would let the code blocks and
   the TOC rail push the page wider than the viewport instead of scrolling. */
.doc-nav,
.doc-body { min-width: 0; }

/* ---------- Sticky table of contents ---------- */
.doc-nav { position: sticky; top: calc(var(--header-h) + 28px); }
.doc-nav__title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: 16px;
}
.doc-nav a {
  display: block;
  padding: 7px 0 7px 15px;
  border-left: 1px solid var(--line);
  font-size: 15px;
  color: var(--text-3);
  transition: color .18s ease, border-color .18s ease;
}
.doc-nav a:hover { color: var(--text); border-left-color: var(--text-3); }
.doc-nav a.is-current { color: var(--gold); border-left-color: var(--gold); }
.doc-nav__sub a { padding-left: 28px; font-size: 13.5px; font-family: var(--mono); }

/* ---------- Content ---------- */
.doc-section { scroll-margin-top: calc(var(--header-h) + 28px); }
.doc-section + .doc-section { margin-top: 64px; padding-top: 56px; border-top: 1px solid var(--line-soft); }
.doc-section > h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 38px);
  margin-bottom: 18px;
}
.doc-section p { color: var(--text-2); max-width: 68ch; }
.doc-section p + p,
.doc-section > p + .code,
.doc-section > p + .callout { margin-top: 18px; }
.doc-section a:not(.btn) { color: var(--gold); border-bottom: 1px solid var(--line-gold); }
.doc-section a:not(.btn):hover { border-bottom-color: var(--gold); }

.doc-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 26px 0 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.doc-label span {
  font-family: var(--mono);
  letter-spacing: 0;
  text-transform: none;
  font-size: 12px;
  color: var(--text-4);
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
}

/* ---------- Code blocks ---------- */
.code {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #070C16;
  overflow: hidden;
}
.code__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px 9px 16px;
  background: rgba(255, 255, 255, 0.035);
  border-bottom: 1px solid var(--line-soft);
}
.code__lang {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-4);
}
.code__copy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-3);
  border: 1px solid transparent;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.code__copy:hover { color: var(--gold); background: rgba(243, 206, 135, 0.08); border-color: var(--line-gold); }
.code__copy.is-done { color: var(--teal); border-color: rgba(52, 216, 168, 0.35); }

.code pre {
  margin: 0;
  padding: 18px 20px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-2);
  tab-size: 2;
}
.code .key    { color: var(--gold); }
.code .string { color: var(--teal); }
.code .num    { color: #A9C2F5; }
.code .bool   { color: #C7A7F0; }
.code .cmt    { color: var(--text-4); font-style: italic; }
.code .req    { color: #F09A9A; }

/* ---------- Endpoints ---------- */
.endpoint {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(165deg, var(--card-2), var(--card));
  padding: 24px 26px 28px;
  scroll-margin-top: calc(var(--header-h) + 28px);
}
.endpoint + .endpoint { margin-top: 22px; }
.endpoint__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.method {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  border-radius: 6px;
  flex: none;
}
.method--post { background: rgba(52, 216, 168, 0.15); color: var(--teal); border: 1px solid rgba(52, 216, 168, 0.34); }
.method--get  { background: rgba(91, 155, 232, 0.15); color: var(--blue); border: 1px solid rgba(91, 155, 232, 0.34); }
.endpoint__path {
  font-family: var(--mono);
  font-size: 15.5px;
  color: var(--text);
  word-break: break-all;
}
.endpoint__desc { color: var(--text-3); margin-top: 12px; }

.endpoint__notes {
  list-style: none;
  display: grid;
  gap: 10px;
  color: var(--text-3);
  font-size: 15px;
}
.endpoint__notes li {
  position: relative;
  padding-left: 18px;
  line-height: 1.62;
}
.endpoint__notes li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.7;
}
.endpoint__notes code {
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 5px;
}

/* ---------- Callouts ---------- */
.callout {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 12px;
  border: 1px solid rgba(91, 155, 232, 0.30);
  background: rgba(91, 155, 232, 0.08);
  color: var(--text-2);
}
.callout__icon { flex: none; color: var(--blue); margin-top: 2px; }
.callout p { max-width: none; }
.callout strong { color: var(--text); }
.callout--warn { border-color: var(--line-gold); background: rgba(243, 206, 135, 0.07); }
.callout--warn .callout__icon { color: var(--gold); }

/* ---------- Table ---------- */
.doc-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.doc-table { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 520px; }
.doc-table th, .doc-table td { padding: 14px 20px; text-align: left; }
.doc-table thead th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-4);
  background: rgba(255, 255, 255, 0.035);
  border-bottom: 1px solid var(--line-soft);
}
.doc-table tbody tr + tr td { border-top: 1px solid var(--line-soft); }
.doc-table td:first-child { color: var(--text); font-weight: 600; }
.doc-table td:last-child { font-family: var(--mono); font-size: 14px; color: var(--text-2); }

@media (max-width: 1024px) {
  .doc-layout { grid-template-columns: minmax(0, 1fr); gap: 34px; padding-block: 40px 72px; }

  /* TOC becomes a horizontal chip rail under the hero */
  .doc-nav {
    position: static;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
  }
  .doc-nav__title { display: none; }
  .doc-nav__list { display: flex; gap: 8px; width: max-content; }
  .doc-nav__sub { display: none; }
  .doc-nav a {
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    white-space: nowrap;
    font-size: 14px;
  }
  .doc-nav a.is-current { border-color: var(--gold); }
}

@media (max-width: 720px) {
  .doc-hero { padding: calc(var(--header-h) + 44px) 0 48px; }
  .doc-hero__actions .btn { flex: 1 1 100%; justify-content: center; }
  .url-chip { width: 100%; }
  .endpoint { padding: 20px 18px 24px; }
  .code pre { padding: 15px 16px; font-size: 12.5px; }
  .doc-section + .doc-section { margin-top: 48px; padding-top: 42px; }
}

/* Auth requirement tag on endpoint cards */
.auth-tag {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-gold);
  color: var(--gold);
  white-space: nowrap;
}
.auth-tag--public {
  border-color: rgba(52, 216, 168, 0.34);
  color: var(--teal);
}

/* ==========================================================================
   Developer overview page
   ========================================================================== */

/* Inline gold run inside a heading (the block-level .gold forces its own line) */
.gold-inline { color: var(--gold); }

.nav a.is-current {
  color: var(--gold);
  box-shadow: inset 0 -2px 0 var(--gold);
  padding-bottom: 4px;
}

/* ---------- Hero ---------- */
.dev-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--header-h) + 72px) 0 60px;
}
.dev-hero__media { position: absolute; inset: 0; z-index: -2; }
.dev-hero__media video,
.dev-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 72% center;
}
/* The footage is left to its own colours: the wash only covers the dark
   empty third the copy sits on, and clears completely before the globe.
   The loop is cut to the segment that stays dark there, so nothing more
   is needed - see the note on the video in DEPLOYMENT.md. */
.dev-hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg,
    rgba(5, 8, 15, 0.72) 0%,
    rgba(5, 8, 15, 0.55) 18%,
    rgba(5, 8, 15, 0.28) 32%,
    rgba(5, 8, 15, 0.08) 42%,
    rgba(5, 8, 15, 0) 50%);
}

.dev-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: 40px;
  align-items: center;
}
.dev-hero__copy { max-width: 790px; }
.dev-hero h1 {
  font-family: var(--serif);
  /* Capped so "for a More Creative Internet." stays on one line, as drawn. */
  font-size: clamp(32px, 3.9vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 22px 0 24px;
}
.dev-hero .lead { font-size: 17.5px; max-width: 38em; margin-bottom: 34px; }
.dev-hero__ctas { display: flex; flex-wrap: wrap; gap: 15px; }
.dev-hero__note {
  margin-top: 30px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--text-4);
}

.dev-hero__accent { justify-self: end; text-align: center; }
/* The accent sits over the brightest part of the globe. Legibility comes
   from weighting the text, not from dimming the footage behind it. */
.dev-hero__accent .script {
  font-size: clamp(26px, 2.8vw, 38px);
  transform: rotate(-6deg);
  text-shadow:
    0 1px 2px rgba(5, 8, 15, 0.95),
    0 2px 10px rgba(5, 8, 15, 0.9),
    0 0 34px rgba(5, 8, 15, 0.85);
}
.dev-hero__accent hr {
  width: 54px; margin: 26px auto 20px;
  border: 0; border-top: 1px solid var(--line-gold);
}
.dev-hero__accent .caps-stack {
  font-size: 12px;
  letter-spacing: 0.32em;
  line-height: 2.2;
  color: var(--gold);
  text-shadow:
    0 1px 2px rgba(5, 8, 15, 0.95),
    0 2px 12px rgba(5, 8, 15, 0.9);
}
.dev-hero__accent hr { box-shadow: 0 1px 6px rgba(5, 8, 15, 0.9); }

/* ---------- Pillars + code band ---------- */
.dev-band { padding: 60px 0 76px; background: var(--bg); }
.dev-band__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 30px;
  /* Stretch so the code panel matches the card block at any width, rather
     than pinning it to a height that only happens to line up at 1440. */
  align-items: stretch;
}
.code--tabbed { display: flex; flex-direction: column; }
.code--tabbed .lang-panel { flex: 1 1 auto; display: flex; }
.code--tabbed .lang-panel[hidden] { display: none; }
.code--tabbed .lang-panel pre { flex: 1 1 auto; }

.pillar-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.pillar-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(165deg, rgba(18, 29, 51, 0.72), rgba(11, 19, 34, 0.72));
  padding: 24px 20px 26px;
  text-align: center;
  transition: border-color .25s ease, transform .25s ease;
}
.pillar-card:hover { border-color: var(--line-gold); transform: translateY(-3px); }
.pillar-card__icon {
  width: 52px; height: 52px;
  margin: 0 auto 16px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  color: var(--text);
}
.pillar-card h3 { font-size: 17.5px; font-weight: 600; margin-bottom: 8px; }
.pillar-card p { font-size: 14.5px; color: var(--text-3); line-height: 1.5; }

/* ---------- Tabbed code panel ---------- */
.code--tabbed .code__bar { padding: 0 10px 0 8px; align-items: stretch; }
.lang-tabs { display: flex; gap: 2px; align-items: stretch; min-width: 0; overflow-x: auto; }
.lang-tab {
  padding: 13px 15px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-3);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .18s ease, border-color .18s ease;
}
.lang-tab:hover { color: var(--text); }
.lang-tab.is-active { color: var(--gold); border-bottom-color: var(--gold); }

.code--tabbed .code__copy { align-self: center; }
.lang-panel pre { min-height: 236px; }

/* ---------- Closing band ---------- */
.dev-close {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 76px 0 60px;
}
.dev-close .section__scrim {
  background: linear-gradient(to bottom, var(--bg) 0%, rgba(5, 8, 15, 0.88) 18%, rgba(5, 8, 15, 0.66) 52%, rgba(5, 8, 15, 0.42) 100%);
}
.dev-close__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 38px;
  align-items: start;
}
.dev-close h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 2.7vw, 36px);
  margin: 16px 0 20px;
}
.dev-close .lead { font-size: 16.5px; margin-bottom: 26px; }
.dev-close__grid > div > .eyebrow { margin-bottom: 18px; }

.dev-close__strip {
  margin-top: 56px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* ---------- Language tiles ---------- */
.lang-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.lang-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 8px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(8, 13, 24, 0.66);
  transition: border-color .25s ease;
}
.lang-tile:hover { border-color: var(--line-gold); }
.lang-tile__mark {
  width: 42px;
  height: 42px;
  object-fit: contain;
}
.lang-tile__name { font-size: 13.5px; color: var(--text-2); text-align: center; }
.lang-grid__note {
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-4);
}

/* ---------- Platform tiles ---------- */
.platform-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.platform-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 10px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(8, 13, 24, 0.66);
  text-align: center;
  transition: border-color .25s ease, transform .25s ease;
}
.platform-tile:hover { border-color: var(--line-gold); transform: translateY(-3px); }
.platform-tile img { width: 48px; height: 48px; object-fit: contain; margin-bottom: 4px; }
.platform-tile__name { font-size: 14.5px; font-weight: 600; color: var(--text); line-height: 1.25; }
.platform-tile__sub { font-size: 12.5px; color: var(--text-3); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .dev-band__grid { grid-template-columns: 1fr; gap: 26px; }
  .pillar-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dev-close__grid { grid-template-columns: 1fr 1fr; gap: 38px; }
  .dev-close__copy { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {
  .dev-hero__grid { grid-template-columns: 1fr; gap: 34px; }
  .dev-hero__accent { justify-self: start; text-align: left; }
  .dev-hero__accent hr { margin-inline: 0; }
  .dev-hero__accent .caps-stack { text-align: left; }
  /* Show the dark left of the frame instead of dimming the bright right. */
  .dev-hero__media video,
  .dev-hero__media img { object-position: 28% center; }
  .dev-hero__scrim {
    background: linear-gradient(to bottom, rgba(5, 8, 15, 0.55) 0%, rgba(5, 8, 15, 0.45) 55%, rgba(5, 8, 15, 0.70) 100%);
  }
  .pillar-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .dev-hero { padding: calc(var(--header-h) + 40px) 0 44px; }
  .dev-hero__ctas .btn { flex: 1 1 100%; justify-content: center; }
  .dev-band { padding: 44px 0 56px; }
  .dev-close { padding: 56px 0 44px; }
  .dev-close__grid { grid-template-columns: 1fr; gap: 34px; }
  .lang-panel pre { min-height: 0; }
  .lang-tab { padding: 12px 11px; font-size: 13px; }
  .platform-grid { grid-template-columns: 1fr; }
  .platform-tile { flex-direction: row; text-align: left; gap: 14px; padding: 14px 16px; }
  .platform-tile img { margin-bottom: 0; }
  .dev-close__strip { letter-spacing: 0.22em; margin-top: 40px; }
}

/* Long section navs (e.g. the developer pages) need tighter tracking to
   stay on one row before the mobile breakpoint takes over. */
@media (max-width: 1400px) {
  .nav { gap: 22px; }
  .nav a { font-size: 15px; }
}
@media (max-width: 1240px) {
  .nav { gap: 16px; }
  .nav a { font-size: 14px; }
  .header > .container { gap: 22px; }
}

/* ==========================================================================
   Form pages (API access request)
   ========================================================================== */
.form-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--header-h) + 64px) 0 80px;
  min-height: 100vh;
}
.form-page .section__scrim {
  background:
    linear-gradient(100deg, var(--bg) 6%, rgba(5, 8, 15, 0.93) 38%, rgba(5, 8, 15, 0.80) 100%),
    linear-gradient(to bottom, rgba(5, 8, 15, 0.5) 0%, transparent 30%, var(--bg) 100%);
}

.form-page__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 60px;
  align-items: start;
}

.form-page__intro { padding-top: 8px; }
.form-page h1 {
  font-family: var(--serif);
  font-size: clamp(32px, 3.8vw, 48px);
  line-height: 1.1;
  margin: 18px 0 20px;
}
.form-page .lead { margin-bottom: 30px; }

.form-page__points { display: grid; gap: 14px; margin-bottom: 30px; }
.form-page__points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15.5px;
  color: var(--text-2);
  line-height: 1.5;
}
.form-page__tick {
  width: 22px; height: 22px;
  flex: none;
  margin-top: 1px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--teal);
  color: #05221A;
}
.form-page__aside { font-size: 14.5px; color: var(--text-3); }
.form-page__aside a { color: var(--gold); border-bottom: 1px solid var(--line-gold); }
.form-page__aside a:hover { border-bottom-color: var(--gold); }

/* ---------- Card ---------- */
.form-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(165deg, rgba(18, 29, 51, 0.9), rgba(11, 19, 34, 0.92));
  backdrop-filter: blur(10px);
  padding: 34px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.field { display: block; margin-bottom: 18px; }
.field__label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 8px;
}
.field__label em { color: var(--gold); font-style: normal; }

.field__input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(5, 8, 15, 0.55);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.4;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field__input::placeholder { color: var(--text-4); }
.field__input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(243, 206, 135, 0.14);
}
.field__input--area { resize: vertical; min-height: 96px; }

/* Native select arrow is invisible on a dark field, so draw one. */
select.field__input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
                    linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: calc(100% - 19px) 52%, calc(100% - 14px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}
select.field__input option { background: #0B1322; color: var(--text); }

.field__input.is-invalid { border-color: #E78585; }
.field__error {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #F09A9A;
  min-height: 1em;
}

/* Honeypot: out of sight and out of the tab order, but not display:none,
   which some bots detect and skip. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-card__note {
  font-size: 13.5px;
  color: var(--text-4);
  line-height: 1.55;
  margin: 4px 0 20px;
}
.form-card__note a { color: var(--text-3); border-bottom: 1px solid var(--line); }
.form-card__note a:hover { color: var(--gold); border-bottom-color: var(--line-gold); }

.form-card__submit { width: 100%; justify-content: center; }
.form-card__submit:disabled { opacity: 0.65; cursor: default; transform: none; }

.form-card__status {
  margin-top: 14px;
  font-size: 14.5px;
  min-height: 1em;
  text-align: center;
}
.form-card__status.is-error { color: #F09A9A; }

/* ---------- Success ---------- */
.form-card__done { text-align: center; padding: 18px 6px 10px; }
.form-card__done-icon {
  width: 56px; height: 56px;
  margin: 0 auto 18px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(52, 216, 168, 0.14);
  border: 1px solid rgba(52, 216, 168, 0.34);
  color: var(--teal);
}
.form-card__done h2 {
  font-family: var(--serif);
  font-size: 28px;
  margin-bottom: 12px;
}
.form-card__done p { color: var(--text-2); font-size: 15.5px; line-height: 1.6; }
.form-card__done a { color: var(--gold); border-bottom: 1px solid var(--line-gold); }

@media (max-width: 1024px) {
  .form-page { padding: calc(var(--header-h) + 44px) 0 64px; min-height: 0; }
  .form-page__grid { grid-template-columns: 1fr; gap: 38px; }
  .form-page .section__scrim {
    background: linear-gradient(to bottom, rgba(5, 8, 15, 0.86) 0%, rgba(5, 8, 15, 0.93) 40%, var(--bg) 100%);
  }
}

@media (max-width: 720px) {
  .form-card { padding: 24px 20px; border-radius: 16px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .form-page__points li { font-size: 15px; }
}

/* Secondary hint inside a field label */
.field__hint { font-weight: 400; color: var(--text-4); }
.form-page__points a { color: var(--gold); border-bottom: 1px solid var(--line-gold); }
.form-page__points a:hover { border-bottom-color: var(--gold); }

/* ==========================================================================
   Legal documents
   ========================================================================== */
.legal-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--header-h) + 62px) 0 54px;
}
.legal-hero .section__scrim {
  background:
    linear-gradient(100deg, var(--bg) 8%, rgba(5, 8, 15, 0.92) 40%, rgba(5, 8, 15, 0.7) 100%),
    linear-gradient(to bottom, transparent 40%, var(--bg) 100%);
}
.legal-hero h1 {
  font-family: var(--serif);
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.08;
  margin: 16px 0 18px;
}
.legal-hero .lead { max-width: 60ch; }
.legal-hero__meta {
  margin-top: 22px;
  font-size: 13px;
  color: var(--text-4);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}

.legal-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 58px;
  align-items: start;
  padding-block: 56px 96px;
}
.legal-nav, .legal-body { min-width: 0; }
.legal-nav { position: sticky; top: calc(var(--header-h) + 28px); }
.legal-nav__title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: 14px;
}
.legal-nav a {
  display: block;
  padding: 6px 0 6px 15px;
  border-left: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--text-3);
  transition: color .18s ease, border-color .18s ease;
}
.legal-nav a:hover { color: var(--text); border-left-color: var(--text-3); }
.legal-nav a.is-current { color: var(--gold); border-left-color: var(--gold); }

.legal-section { scroll-margin-top: calc(var(--header-h) + 28px); }
.legal-section + .legal-section {
  margin-top: 52px;
  padding-top: 46px;
  border-top: 1px solid var(--line-soft);
}
.legal-section h2 {
  font-family: var(--serif);
  font-size: clamp(24px, 2.5vw, 31px);
  margin-bottom: 16px;
}
.legal-section h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin: 26px 0 10px;
}
.legal-section p { color: var(--text-2); max-width: 72ch; line-height: 1.7; }
.legal-section p + p { margin-top: 14px; }
.legal-section > p + ul,
.legal-section > p + .callout,
.legal-section > p + .doc-table-wrap { margin-top: 16px; }

.legal-list { display: grid; gap: 11px; margin: 16px 0; max-width: 72ch; }
.legal-list li {
  position: relative;
  padding-left: 20px;
  color: var(--text-2);
  line-height: 1.65;
}
.legal-list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 11px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold-deep);
}
.legal-list strong { color: var(--text); }

.legal-section a:not(.btn) {
  color: var(--gold);
  border-bottom: 1px solid var(--line-gold);
}
.legal-section a:not(.btn):hover { border-bottom-color: var(--gold); }

/* Contact / address block */
.legal-address {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(8, 13, 24, 0.6);
  padding: 22px 24px;
  margin-top: 18px;
  max-width: 72ch;
}
.legal-address p { margin: 0 0 4px; color: var(--text-2); }
.legal-address p:last-child { margin-bottom: 0; }
.legal-address strong { color: var(--text); }

@media (max-width: 1024px) {
  .legal-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-block: 36px 72px; }
  .legal-nav {
    position: static;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
  }
  .legal-nav__title { display: none; }
  .legal-nav__list { display: flex; gap: 8px; width: max-content; }
  .legal-nav a {
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    white-space: nowrap;
    font-size: 13.5px;
  }
  .legal-nav a.is-current { border-color: var(--gold); }
}

@media (max-width: 720px) {
  .legal-hero { padding: calc(var(--header-h) + 38px) 0 40px; }
  .legal-section + .legal-section { margin-top: 40px; padding-top: 34px; }
  .legal-address { padding: 18px; }
}

/* ==========================================================================
   Verification pages
   ========================================================================== */
.verify-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--header-h) + 58px) 0 84px;
  min-height: 100vh;
}
.verify-page .section__scrim {
  background:
    linear-gradient(100deg, var(--bg) 6%, rgba(5, 8, 15, 0.92) 42%, rgba(5, 8, 15, 0.78) 100%),
    linear-gradient(to bottom, rgba(5, 8, 15, 0.4) 0%, transparent 26%, var(--bg) 100%);
}

.verify-shell { max-width: 860px; margin-inline: auto; }

/* ---------- Status banner ---------- */
.verify-status {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-radius: 14px;
  border: 1px solid;
  margin-bottom: 26px;
}
.verify-status__icon {
  width: 44px; height: 44px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
}
.verify-status h1 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.25;
}
.verify-status p { font-size: 14.5px; color: var(--text-3); margin-top: 3px; }

.verify-status--ok      { border-color: rgba(52, 216, 168, 0.36); background: rgba(52, 216, 168, 0.08); }
.verify-status--ok .verify-status__icon { background: var(--teal); color: #05221A; }
.verify-status--ok h1   { color: var(--teal); }

.verify-status--wait    { border-color: var(--line-gold); background: rgba(243, 206, 135, 0.07); }
.verify-status--wait .verify-status__icon { background: var(--gold); color: #171208; }
.verify-status--wait h1 { color: var(--gold); }

.verify-status--bad     { border-color: rgba(231, 133, 133, 0.36); background: rgba(231, 133, 133, 0.08); }
.verify-status--bad .verify-status__icon { background: #E78585; color: #2A0E0E; }
.verify-status--bad h1  { color: #F09A9A; }

/* ---------- The record ---------- */
.verify-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(165deg, rgba(18, 29, 51, 0.9), rgba(11, 19, 34, 0.92));
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.42);
  overflow: hidden;
}

.verify-head {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 30px 32px;
  border-bottom: 1px solid var(--line-soft);
}
.verify-head__text { min-width: 0; flex: 1; }
.verify-head h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.14;
  margin-bottom: 8px;
  word-break: break-word;
}
.verify-head__artist { font-size: 17px; color: var(--text-2); }
.verify-head__album { font-size: 14.5px; color: var(--text-4); margin-top: 4px; }
/* height:auto on both seals is load-bearing, not tidying.
   The markup carries width/height attributes so the browser can reserve the
   space before the image loads. Those attributes are presentational hints for
   the CSS width and height properties, and author CSS here only set width - so
   below 720px, where the width drops to 76 and 104, the height hint stayed at
   its full 96 and 128 and the seal was drawn stretched. Desktop was unaffected
   because there the CSS width and the attribute agreed. */
.verify-head__seal { width: 96px; height: auto; flex: none; }

.verify-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.verify-fact {
  padding: 22px 32px;
  border-top: 1px solid var(--line-soft);
  min-width: 0;
}
.verify-fact:nth-child(odd) { border-right: 1px solid var(--line-soft); }
.verify-fact__label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: 9px;
}
.verify-fact__label svg { color: var(--gold-deep); }
.verify-fact__value {
  font-size: 16px;
  color: var(--text);
  word-break: break-word;
}
.verify-fact__value--mono { font-family: var(--mono); font-size: 13.5px; line-height: 1.6; }
.verify-fact__note { font-size: 13.5px; color: var(--text-3); margin-top: 6px; line-height: 1.5; }
.verify-fact a { color: var(--gold); border-bottom: 1px solid var(--line-gold); }
.verify-fact a:hover { border-bottom-color: var(--gold); }

.verify-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 26px 32px;
  border-top: 1px solid var(--line-soft);
  background: rgba(5, 8, 15, 0.35);
}

/* ---------- Supporting blocks ---------- */
.verify-note {
  margin-top: 24px;
  display: flex;
  gap: 14px;
  padding: 20px 22px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(8, 13, 24, 0.6);
}
.verify-note__icon { flex: none; color: var(--text-3); margin-top: 2px; }
.verify-note p { font-size: 14.5px; color: var(--text-2); line-height: 1.65; }
.verify-note p + p { margin-top: 10px; }
.verify-note strong { color: var(--text); }
.verify-note a { color: var(--gold); border-bottom: 1px solid var(--line-gold); }

.verify-id {
  margin-top: 22px;
  text-align: center;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-4);
  word-break: break-all;
}

.verify-platform {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-gold);
  background: rgba(243, 206, 135, 0.06);
  font-size: 13.5px;
  color: var(--text-2);
  margin-bottom: 20px;
}
.verify-platform img { width: 22px; height: 22px; object-fit: contain; }

/* ---------- Lookup form ---------- */
.verify-lookup { max-width: 620px; margin-inline: auto; text-align: center; }
.verify-lookup h1 {
  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
  margin: 16px 0 16px;
}
.verify-lookup .lead { margin-inline: auto; margin-bottom: 32px; }
.verify-lookup__form { display: flex; gap: 12px; }
.verify-lookup__form .field__input { flex: 1; min-width: 0; text-align: left; }
.verify-lookup__hint { margin-top: 14px; font-size: 13.5px; color: var(--text-4); }
.verify-lookup__error {
  margin-top: 14px;
  font-size: 14px;
  color: #F09A9A;
  min-height: 1em;
}

@media (max-width: 720px) {
  .verify-page { padding: calc(var(--header-h) + 36px) 0 56px; min-height: 0; }
  .verify-head { flex-direction: column-reverse; align-items: flex-start; gap: 18px; padding: 24px 20px; }
  .verify-head__seal { width: 76px; align-self: center; }
  .verify-facts { grid-template-columns: 1fr; }
  .verify-fact { padding: 20px; }
  .verify-fact:nth-child(odd) { border-right: 0; }
  .verify-actions { padding: 20px; }
  .verify-actions .btn { flex: 1 1 100%; justify-content: center; }
  .verify-status { padding: 16px; gap: 13px; }
  .verify-status h1 { font-size: 16px; }
  .verify-lookup__form { flex-direction: column; }
  .verify-lookup__form .btn { justify-content: center; }
}