/* ============================================================
   SONNANCE — landing page styles

   Tokens below come from the product design system
   (infrastructure/22-IOS-DESIGN-SYSTEM.md §1). Change a colour
   here and it changes everywhere on the page.

   The page is deliberately dark-only: it is one committed look,
   matching the app and the reference, not a themeable surface.
   ============================================================ */

:root {
  /* --- brand tokens (doc-22 §1, dark appearance) --- */
  --bg:            #08090e;
  --surface:       #14151b;
  --surface-2:     #1c1d25;
  --fg:            #f1f1f1;
  --fg-2:          #b9bac2;
  --fg-3:          #7c7e8a;
  --border:        rgba(241, 241, 241, .12);
  --border-strong: rgba(241, 241, 241, .22);
  --accent:        #4e36f5;   /* fills, dots, borders */
  --accent-text:   #8f7dff;   /* the same accent, light enough to read as text
                                 (6.2:1 on the page ground; #4e36f5 is 3.0:1) */

  /* --- Signal category colours (derived expression, doc-74 §3) --- */
  --c-hiring:    #8f7dff;
  --c-open:      #4aa3ff;
  --c-studio:    #7ed957;
  --c-producers: #2ec4b6;
  --c-artists:   #e0518f;
  --c-collab:    #ff7a45;
  --c-beats:     #f5a623;
  --c-release:   #b06bff;
  --c-biz:       #d6d6d6;

  /* --- scale (doc-22 §4) --- */
  --sp-xs: 4px; --sp-sm: 8px; --sp-md: 16px; --sp-lg: 24px; --sp-xl: 32px;
  --r-ctl: 16px; --r-card: 20px; --r-sheet: 28px;
  --wrap: 1120px;

  --ease: cubic-bezier(.2, .7, .2, 1);
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: Lexend, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; }

::selection { background: var(--accent); color: #fff; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--fg); color: var(--bg);
  padding: 10px 16px; border-radius: 0 0 12px 0; z-index: 100;
}
.skip-link:focus { left: 0; }

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

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}
.wrap--narrow { max-width: 680px; }

.section { padding-block: clamp(72px, 12vw, 148px); }

.grid-2 {
  display: grid;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
  grid-template-columns: 1fr;
}
/* Grid children default to min-width:auto, which lets a wide child (the
   Signal ticker) push the page sideways instead of scrolling inside itself. */
.grid-2 > *, .id-layout > * { min-width: 0; }

@media (min-width: 880px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-2--media-first .media { order: -1; }
}

/* ---------- type ---------- */

.h2 {
  font-size: clamp(30px, 4.6vw, 50px);
  line-height: 1.08;
  letter-spacing: -.025em;
  font-weight: 700;
  margin: 0 0 var(--sp-lg);
}
.h2--center { text-align: center; }

.h3 {
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.2;
  letter-spacing: -.02em;
  font-weight: 600;
  margin: 0 0 var(--sp-md);
}

.body {
  color: var(--fg-2);
  font-size: 16px;
  margin: 0 0 var(--sp-md);
  max-width: 46ch;
}
.body strong { color: var(--fg); font-weight: 600; }

.lead {
  color: var(--fg-2);
  font-size: clamp(15px, 1.8vw, 17px);
  text-align: center;
  max-width: 52ch;
  margin: 0 auto var(--sp-xl);
}

.label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 var(--sp-sm);
  padding: 0;
}

.hint { font-size: 13px; color: var(--fg-3); margin: 6px 0 0; }
.hint a { color: var(--fg-2); }

.opt { color: var(--fg-3); font-weight: 400; text-transform: none; letter-spacing: 0; }

.ast { color: var(--accent-text); font-weight: 700; }

.note {
  font-size: 13px;
  color: var(--fg-3);
  border-left: 2px solid var(--border-strong);
  padding-left: 12px;
  margin-top: var(--sp-md);
}

.section-head { margin-bottom: clamp(40px, 6vw, 72px); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s var(--ease), background-color .2s var(--ease),
              border-color .2s var(--ease), opacity .2s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-light { background: var(--fg); color: #0b0b0f; }
.btn-light:hover { background: #fff; }

.btn-ghost {
  background: var(--surface-2);
  color: var(--fg);
  border-color: var(--border);
}
.btn-ghost:hover { background: #262731; }

.btn-sm { padding: 9px 20px; font-size: 14px; }
.btn-block { width: 100%; padding-block: 16px; }

.link-arrow {
  color: var(--fg);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease);
}
.link-arrow:hover { border-bottom-color: var(--border-strong); }

.center-cta { text-align: center; margin: clamp(40px, 6vw, 72px) 0 0; }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--border); }

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Language switch — small, always visible, never a dropdown.
   Two clicks to find your language is one too many. */
.lang {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
}
.lang > * {
  padding: 5px 8px;
  border-radius: 999px;
  text-decoration: none;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.lang-on { color: var(--fg); background: var(--surface-2); }
.lang a  { color: var(--fg-3); }
.lang a:hover { color: var(--fg); background: var(--surface); }

@media (max-width: 420px) {
  .header-right { gap: 10px; }
  .btn-sm { padding: 9px 14px; }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--fg);
}
.brand-mark { width: 24px; height: 24px; flex: none; }
.brand-word {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.01em;
}
.brand-dot { color: var(--accent-text); }
.brand--sm .brand-word { font-size: 17px; }

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

.hero {
  padding-top: clamp(48px, 8vw, 96px);
  padding-bottom: clamp(56px, 8vw, 104px);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.eyebrow {
  font-size: 17px;
  font-weight: 500;
  color: var(--fg);
  margin: 0 0 var(--sp-lg);
  opacity: .85;
}

.hero-title {
  font-size: clamp(34px, 6.4vw, 66px);
  line-height: 1.04;
  letter-spacing: -.035em;
  font-weight: 700;
  margin: 0 auto var(--sp-md);
  /* 16ch was too narrow for anything but the English line — it forced the
     Spanish headline onto three lines. `ch` scales with the font, so this
     stays right at every clamp step. */
  max-width: 22ch;
  text-wrap: balance;
}

/* Spanish runs ~15% longer than English for the same idea. Rather than
   shortening the copy to fit an English-shaped box, give the language its
   own step. Any future language gets its own line here. */
:lang(es) .hero-title {
  font-size: clamp(31px, 5.5vw, 57px);
  max-width: 20ch;
}

.hero-sub {
  color: var(--fg-2);
  font-size: clamp(15px, 2vw, 18px);
  max-width: 44ch;
  margin: 0 auto var(--sp-lg);
  text-wrap: balance;
}

.hero-actions { margin: 0 0 clamp(24px, 4vw, 40px); }

.hero-stage {
  position: relative;
  max-width: 940px;
  margin: 0 auto;
  aspect-ratio: 20 / 11;
}

.hero-glow {
  position: absolute;
  right: 4%;
  bottom: 8%;
  width: 46%;
  aspect-ratio: 1;
  background: radial-gradient(circle,
              rgba(226, 199, 106, .34) 0%,
              rgba(226, 199, 106, .11) 38%,
              transparent 68%);
  filter: blur(6px);
  pointer-events: none;
}

.hero-crowd {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 88%;
  transform: translateX(-50%);
  border-radius: 8px;
  mask-image: linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%);
}

.hero-card {
  position: absolute;
  border-radius: var(--r-card);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}
.hero-card--front { left: 4%;  bottom: 18%; width: 25%; }
.hero-card--back  { right: 9%; bottom: 30%; width: 15%; }

.hero-more { margin: clamp(20px, 3vw, 32px) 0 0; }

@media (max-width: 640px) {
  .hero-stage { aspect-ratio: 4 / 3; }
  .hero-crowd { width: 100%; }
  .hero-card--front { left: 0; bottom: 22%; width: 34%; }
  .hero-card--back  { right: 2%; bottom: 34%; width: 21%; }
}

/* ---------- media collages ---------- */

.media { position: relative; }

.media--signals { aspect-ratio: 1 / 1; }
.media--signals .media-a {
  position: absolute; right: 4%; top: 4%; width: 64%;
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.media--signals .media-b {
  position: absolute; left: 0; bottom: 10%; width: 47%;
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}

/* The 40h badge — the one product mechanic worth showing on the page */
.expiry-chip {
  position: absolute;
  left: 8%;
  bottom: 2%;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  background: var(--fg);
  color: #0b0b0f;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
}
.expiry-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .35; transform: scale(.72); }
}

.media--events { aspect-ratio: 1 / 1; }
.media--events .media-a {
  position: absolute; left: 0; top: 10%; width: 66%;
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.media--events .media-phone {
  position: absolute; right: 2%; top: 0; width: 36%;
  border-radius: 26px;
  border: 1px solid var(--border-strong);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .65);
}

/* ---------- Signal ticker (replaces the partner-logo strip) ---------- */

.ticker {
  margin-top: var(--sp-xl);
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track {
  display: flex;
  gap: 10px;
  width: max-content;
  animation: marquee 42s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.sig {
  --c: var(--fg-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c);
  border: 1px solid color-mix(in srgb, var(--c) 34%, transparent);
  background: color-mix(in srgb, var(--c) 9%, transparent);
}
.sig::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c);
  flex: none;
}
.sig--hiring    { --c: var(--c-hiring); }
.sig--open      { --c: var(--c-open); }
.sig--studio    { --c: var(--c-studio); }
.sig--producers { --c: var(--c-producers); }
.sig--artists   { --c: var(--c-artists); }
.sig--collab    { --c: var(--c-collab); }
.sig--beats     { --c: var(--c-beats); }
.sig--release   { --c: var(--c-release); }
.sig--biz       { --c: var(--c-biz); }

/* ---------- chips ---------- */

.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.chips li {
  padding: 7px 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  color: var(--fg-2);
}

/* ---------- Music ID: sticky visual + accordion ---------- */

.id-layout {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 880px) {
  .id-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .id-visual { position: sticky; top: 108px; }
}

.id-visual-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-sheet);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.id-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity .45s var(--ease), transform .6s var(--ease);
}
.id-shot.is-active { opacity: 1; transform: scale(1); }

.accordion { border-top: 1px solid var(--border); }

.acc-item { border-bottom: 1px solid var(--border); }

.acc-h { margin: 0; font-size: inherit; font-weight: inherit; }

.acc-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 22px 4px;
  background: none;
  border: 0;
  color: var(--fg-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color .2s var(--ease);
}
.acc-btn:hover { color: var(--fg); }
.is-open .acc-btn { color: var(--fg); }

.acc-num {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--fg-3);
  flex: none;
  font-variant-numeric: tabular-nums;
}
.is-open .acc-num { color: var(--accent-text); }

.acc-title {
  font-size: clamp(17px, 2.2vw, 21px);
  font-weight: 600;
  letter-spacing: -.015em;
  flex: 1;
}

.acc-tag {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
}

.acc-chevron {
  flex: none;
  width: 11px; height: 11px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .3s var(--ease);
  opacity: .65;
}
.is-open .acc-chevron { transform: rotate(-135deg) translate(-2px, -2px); }

.acc-panel {
  overflow: hidden;
  height: 0;
  transition: height .35s var(--ease);
}
.acc-panel-inner { padding: 0 4px 24px; }
.acc-panel-inner p {
  color: var(--fg-2);
  font-size: 15px;
  margin: 0 0 12px;
  max-width: 46ch;
}
.acc-panel-inner p:last-child { margin-bottom: 0; }
.acc-panel-inner em { color: var(--fg); font-style: normal; opacity: .9; }

/* ---------- form ---------- */

.section--form {
  border-top: 1px solid var(--border);
  background:
    radial-gradient(70% 100% at 50% 0%, rgba(78, 54, 245, .13), transparent 70%),
    var(--bg);
}

.form { margin-top: clamp(24px, 4vw, 40px); }

.field { border: 0; padding: 0; margin: 0 0 var(--sp-lg); }
.field legend { padding: 0; }

input[type="email"],
select,
textarea {
  width: 100%;
  padding: 13px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-ctl);
  color: var(--fg);
  font: inherit;
  font-size: 15px;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
input[type="email"]::placeholder,
textarea::placeholder { color: var(--fg-3); }

input[type="email"]:hover, select:hover, textarea:hover { border-color: var(--border-strong); }
input[type="email"]:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  background: var(--surface-2);
  outline: none;
}
input[aria-invalid="true"] { border-color: #ff6b6b; }

textarea { resize: vertical; min-height: 96px; }

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-3) 50%),
                    linear-gradient(135deg, var(--fg-3) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select option { background: var(--surface); color: var(--fg); }

.checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.check--wide { grid-column: 1 / -1; }

.check {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-ctl);
  font-size: 14px;
  color: var(--fg-2);
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.check:hover { border-color: var(--border-strong); }
.check:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--fg);
}
.check input { accent-color: var(--accent); width: 16px; height: 16px; flex: none; }

.form-status {
  margin: var(--sp-md) 0 0;
  font-size: 14px;
  min-height: 1.4em;
  color: var(--fg-2);
  text-align: center;
}
.form-status.is-error { color: #ff8f8f; }
.form-status.is-ok    { color: #8ce39d; }

/* ---------- honeypot ---------------------------------------------
   Off-screen rather than display:none — some bots skip hidden fields,
   and this one is only useful if a bot fills it in. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- the access sheet -------------------------------------
   The form floated over the landing page. The page underneath stays
   exactly where it was, so closing returns you to your place rather
   than to the top — which is the whole reason not to navigate. */

.sheet { position: fixed; inset: 0; z-index: 80; }

.sheet-scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 4, 8, .66);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  /* The scrim leads slightly and lingers on the way out, so the page behind
     is already dimming before the panel moves and has not snapped back by
     the time it leaves. Two things arriving at once reads as a pop. */
  transition: opacity 520ms cubic-bezier(.33, 0, .2, 1);
}
.sheet.is-open .sheet-scrim { opacity: 1; }

.sheet-panel {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(720px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  box-shadow: 0 -30px 90px rgba(0, 0, 0, .7);
  /* Rises from below, like the app's sheets. Slow enough to read as a
     movement rather than a state change — a sheet that arrives in under
     ~400ms is perceived as having simply appeared. */
  transform: translate(-50%, 100%);
  transition: transform 620ms cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}
.sheet.is-open .sheet-panel { transform: translate(-50%, 0); }

@media (min-width: 720px) {
  .sheet-panel {
    top: 50%;
    bottom: auto;
    max-height: 88vh;
    border: 1px solid var(--border);
    border-radius: var(--r-sheet);
    /* More travel and a deeper scale than the first version, which moved
       24px and 1.5% — too little distance to read as motion, so it looked
       like a pop however long the duration was. Distance is what makes an
       animation legible; duration alone cannot rescue it. */
    transform: translate(-50%, calc(-50% + 40px)) scale(.94);
    opacity: 0;
    transition:
      transform 620ms cubic-bezier(.16, 1, .3, 1),
      opacity 380ms cubic-bezier(.33, 0, .2, 1);
    will-change: transform, opacity;
  }
  .sheet.is-open .sheet-panel {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

.sheet-close {
  position: sticky;
  top: 14px;
  float: right;
  z-index: 1;
  width: 34px;
  height: 34px;
  margin: 14px 14px 0 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--fg-2);
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.sheet-close::before,
.sheet-close::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 13px; height: 1.5px;
  background: currentColor;
  transform-origin: center;
}
.sheet-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.sheet-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.sheet-close:hover { color: var(--fg); border-color: var(--border-strong); }

.sheet .section--form {
  border-top: 0;
  padding-block: clamp(32px, 6vw, 56px);
  background: none;
}

/* Hold the page still behind the sheet. The padding that compensates for
   the vanished scrollbar is applied by motion.js, which is the only place
   that can measure it. */
body.sheet-open { overflow: hidden; }

/* The form on its own page: it is the only thing there, so it should sit
   in the middle rather than at the top of an empty screen. */
.page-access #main {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 68px - 130px);
}
.page-access .section--form-page {
  width: 100%;
  border-top: 0;
}

/* ---------- status section ---------- */

.section--status {
  border-top: 1px solid var(--border);
  padding-block: clamp(56px, 8vw, 96px);
}
.status-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 var(--sp-md);
}
.section--status .body { max-width: none; }
.section--status a { color: var(--fg); text-underline-offset: 3px; }

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

.site-footer {
  border-top: 1px solid var(--border);
  padding-block: 36px 44px;
}
.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-md);
}
.footer-nav { display: flex; gap: 24px; }
.footer-nav a {
  color: var(--fg-3);
  font-size: 14px;
  text-decoration: none;
  transition: color .2s var(--ease);
}
.footer-nav a:hover { color: var(--fg); }

.footer-fine {
  margin: 24px 0 0;
  font-size: 12px;
  color: var(--fg-3);
}

/* ---------- the halo -------------------------------------------
   One ambient light behind the entire page, whose colour is set by
   whichever section you are looking at (motion.js). The web
   translation of the app's adaptive gradient — the colour should
   feel pulled from the content, never chosen from a palette. */

.halo {
  --halo: #4e36f5;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 45% at 50% 22%,
      color-mix(in srgb, var(--halo) 22%, transparent) 0%,
      color-mix(in srgb, var(--halo) 7%, transparent) 42%,
      transparent 72%);
  /* NO transition on purpose. motion.js interpolates --halo per frame, which
     is continuous under any scroll speed; a CSS transition here would restart
     on every section change and make a fast scroll lurch. */
  animation: halo-breathe 14s ease-in-out infinite;
}
@keyframes halo-breathe {
  0%, 100% { opacity: .85; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}

/* Everything real sits above the halo. */
.site-header, main, .site-footer { position: relative; z-index: 1; }

/* ---------- reveal ---------------------------------------------
   Rise once, on arrival. The transform is small on purpose: a big
   travel reads as a slideshow, a small one reads as the page
   settling. */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 700ms cubic-bezier(.2, .7, .2, 1),
    transform 700ms cubic-bezier(.2, .7, .2, 1);
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* ---------- the 40 hours ---------------------------------------
   A ring that actually drains, in place of the old static dot. */

.expiry-ring { width: 16px; height: 16px; flex: none; display: block; }
.expiry-ring circle { fill: none; stroke-width: 2; }
.expiry-ring .track { stroke: rgba(11, 11, 15, .18); }
.expiry-ring .arc {
  stroke: var(--accent);
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

/* ---------- motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .ticker-track { animation: none; }
  .acc-panel { transition: none; }

  /* The halo stops
     breathing and reveals are painted in place rather than animated — so
     the page is complete and still, not broken and invisible. */
  .halo { animation: none; transition: none; }
  .sheet-scrim, .sheet-panel { transition: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .expiry-ring .arc { stroke-dashoffset: 0 !important; }
}