/* ---------- self-hosted fonts (Figtree, variable) ---------- */
/* latin-ext italic */
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url(../assets/fonts/figtree-latin-ext-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
/* latin italic */
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url(../assets/fonts/figtree-latin-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
/* latin-ext normal */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(../assets/fonts/figtree-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
/* latin normal */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(../assets/fonts/figtree-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

/* ============================================================
   MUSIC SERVICES — design system
   Motif: the waveform as the bridge. Sound becoming money.
   Palette: green-black base, emerald growth, gold royalties, cool paper.
   Type: Fraunces (display) / Schibsted Grotesk (UI, body) / Fragment Mono (data)
   ============================================================ */

:root {
  --ink: #0a0f0c;
  --ink-2: #101712;
  --ink-3: #18231b;
  --paper: #eef4ef;
  --paper-2: #dfe9e1;
  --amber: #13b981;
  --gold: #f5c36b;
  --cyan: #f5c36b;
  --cyan-dim: rgba(245, 195, 107, 0.55);
  --text: #e9f1ec;
  --text-dim: rgba(233, 241, 236, 0.6);
  --text-faint: rgba(233, 241, 236, 0.38);
  --ink-text: #0f1512;
  --ink-text-dim: rgba(15, 21, 18, 0.64);
  --line: rgba(233, 241, 236, 0.12);
  --line-strong: rgba(233, 241, 236, 0.22);
  --line-ink: rgba(15, 21, 18, 0.14);

  --font-display: "Figtree", "Helvetica Neue", sans-serif;
  --font-body: "Figtree", "Helvetica Neue", sans-serif;
  --font-mono: "Figtree", "Helvetica Neue", sans-serif;

  --step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.875rem);
  --step-0: clamp(0.95rem, 0.9rem + 0.25vw, 1.0625rem);
  --step-1: clamp(1.15rem, 1.05rem + 0.5vw, 1.375rem);
  --step-2: clamp(1.45rem, 1.25rem + 1vw, 2rem);
  --step-3: clamp(1.9rem, 1.5rem + 2vw, 3rem);
  --step-4: clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);
  --step-5: clamp(3.2rem, 2rem + 6vw, 6.5rem);

  --space-1: clamp(0.5rem, 0.5vw, 0.75rem);
  --space-2: clamp(1rem, 1.2vw, 1.5rem);
  --space-3: clamp(1.75rem, 2.4vw, 3rem);
  --space-4: clamp(3rem, 4.5vw, 5.5rem);
  --space-5: clamp(5rem, 8vw, 10rem);

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --maxw: 84rem;
  --radius: 14px;
  --radius-lg: 22px;

  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --dur: 0.9s;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--text);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
::selection { background: var(--amber); color: var(--ink-text); }

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

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--amber); color: var(--ink-text);
  padding: 0.6em 1.2em; font-weight: 600; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* grain overlay */
body::after {
  content: "";
  position: fixed; inset: -50%;
  pointer-events: none; z-index: 90;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- typography helpers ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 380;
  font-variation-settings: "opsz" 100;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.display em {
  font-style: italic;
  font-weight: 340;
  color: var(--gold);
}
.on-paper .display em { color: #0b7a54; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 0.75em;
}
.eyebrow::before {
  content: "";
  width: 2rem; height: 1px;
  background: var(--amber);
  flex: none;
}
.eyebrow.cyan::before { background: var(--cyan); }
.on-paper .eyebrow { color: var(--ink-text-dim); }

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-dim);
  max-width: 34em;
  text-wrap: pretty;
}
.on-paper .lede { color: var(--ink-text-dim); }

.mono { font-family: var(--font-mono); }

/* ---------- layout ---------- */
.wrap {
  width: min(100% - 2 * var(--gutter), var(--maxw));
  margin-inline: auto;
}
.section { padding-block: var(--space-5); position: relative; }
#solutions.section { padding-bottom: 0; } /* full-bleed tile grid runs straight into the next section */
.section-head { max-width: 46rem; margin-bottom: var(--space-4); }
.section-head .eyebrow { margin-bottom: var(--space-2); }
.section-head h2 { font-size: var(--step-4); margin-bottom: var(--space-2); }
/* keep a phrase on one line where there's room; let it wrap on phones */
@media (min-width: 600px) { .keep-together { white-space: nowrap; } }

.on-paper {
  background: var(--paper);
  color: var(--ink-text);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-weight: 600;
  font-size: var(--step-0);
  padding: 0.85em 1.7em;
  border-radius: 999px;
  transition: transform 0.35s var(--ease-out), background 0.35s, color 0.35s, border-color 0.35s;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .arr { transition: transform 0.35s var(--ease-out); }
.btn:hover .arr { transform: translateX(4px); }

.btn-solid { background: var(--amber); color: var(--ink-text); }
.btn-solid:hover { background: var(--gold); }
.btn-ghost {
  border: 1px solid var(--line-strong);
  color: var(--text);
  background: rgba(13, 11, 8, 0.25);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.on-paper .btn-ghost { border-color: var(--line-ink); color: var(--ink-text); background: transparent; }
.on-paper .btn-ghost:hover { border-color: #0b7a54; color: #0b7a54; }
.btn-lg { font-size: var(--step-1); padding: 0.95em 2em; }

.text-link {
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 0.5em;
  color: var(--gold);
}
.text-link .arr { transition: transform 0.35s var(--ease-out); }
.text-link:hover .arr { transform: translateX(4px); }
.on-paper .text-link { color: #0b7a54; }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: border-color 0.4s;
  border-bottom: 1px solid transparent;
}
/* The frosted bar lives on a pseudo-element: backdrop-filter on .nav itself would make it the
   containing block for the fixed mobile menu, shrinking the menu to bar height once scrolled. */
.nav::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(13, 11, 8, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s;
}
.nav.scrolled::after { opacity: 1; }
.nav.scrolled { border-bottom-color: var(--line); }
.nav-inner {
  display: flex; align-items: center; gap: var(--space-3);
  padding-block: 1.1rem;
  transition: padding-block 0.35s var(--ease-out);
}
/* Once scrolled, the bar tightens up and the wordmark collapses to the mark. */
.nav.scrolled .nav-inner { padding-block: 0.5rem; }
.brand {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  line-height: 1;
  display: flex; align-items: center; gap: 0.6rem;
  flex: none;
}
.brand svg { width: 1.5rem; height: 1.5rem; }
.brand .brand-tm { color: var(--gold); }
.brand-logo { height: 2.88rem; width: auto; display: block; }
.footer .brand-logo { height: 2.6rem; }
/* Service-mark notice on the Music Services logo. The mark is unregistered, so
   it carries SM rather than ®. Superscripted to the top of the wordmark and set
   in currentColor so it reads correctly on the dark nav and on the light auth
   pages alike. The negative margin cancels most of .brand's flex gap, which is
   sized for the logo, not for this. */
.brand-sm {
  align-self: flex-start;
  margin-left: -0.38rem;
  margin-top: 0.12rem;
  font-family: var(--font-body);
  font-size: 0.5rem; font-weight: 600;
  letter-spacing: 0.04em; line-height: 1;
  color: currentColor; opacity: 0.75;
}
/* Nav only: crossfade the wordmark to the compact mark once scrolled.
   Both overlap; the wordmark fades out (and shrinks to match) while the mark
   fades in. Mark height is 1.785rem (~15% smaller than the prior 2.1rem). */
.nav .brand { position: relative; }
.nav .brand-logo { transition: height 0.35s var(--ease-out), opacity 0.35s var(--ease-out); }
.nav .brand::before {
  content: "";
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  height: 1.785rem;
  aspect-ratio: 720 / 363.65;
  background: url("../assets/logo-icon.svg") left center / contain no-repeat;
  opacity: 0;
  transition: opacity 0.35s var(--ease-out);
  pointer-events: none;
}
.nav.scrolled .brand-logo { height: 1.785rem; opacity: 0; }
.nav.scrolled .brand::before { opacity: 1; }
/* The SM belongs to the full wordmark, so it fades out with it; left visible it
   would hang in the gap beside the compact icon. Same timing as the crossfade. */
.nav .brand .brand-sm { transition: opacity 0.35s var(--ease-out); }
.nav.scrolled .brand .brand-sm { opacity: 0; }

.nav-links {
  display: flex; align-items: center; gap: 0.25rem;
  margin-left: auto;
}
.nav-links > li { position: relative; }
.nav-links > li.nav-menu-logo { display: none; }
.nav-links > li.nav-social { display: none; }
.nav-links a, .nav-links button.nav-drop-btn {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.6em 0.9em;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  border-radius: 8px;
  transition: color 0.25s;
}
.nav-links a:hover, .nav-links button.nav-drop-btn:hover,
.nav-links a[aria-current="page"] { color: var(--gold); }
.nav-drop-btn .chev { transition: transform 0.3s var(--ease-out); width: 10px; height: 10px; }
.nav-drop.open .nav-drop-btn .chev { transform: rotate(180deg); }

.nav-menu {
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 14rem; width: max-content;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.5rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.3s, transform 0.3s var(--ease-out), visibility 0.3s;
}
.nav-drop.open .nav-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-menu a {
  display: block; padding: 0.65em 0.9em;
  border-radius: 9px; color: var(--text-dim);
  font-size: 0.95rem; white-space: nowrap;
}
.nav-menu a:hover { background: var(--ink-3); color: var(--text); }
.nav-menu a small {
  display: block; font-size: 0.78rem; color: var(--text-faint);
  font-weight: 400; margin-top: 1px;
}
.nav-cta { margin-left: 0.5rem; }
.nav .btn { padding: 0.6em 1.3em; font-size: 0.92rem; }
.nav .btn-solid { color: #fff; }
.nav .btn-solid:hover { color: var(--ink-text); }

.nav-burger {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
}
.nav-burger span {
  width: 22px; height: 2px; background: var(--text);
  transition: transform 0.35s var(--ease-out), opacity 0.25s;
}

/* mobile nav */
@media (max-width: 900px) {
  .nav-links {
    position: fixed; inset: 0; top: 0;
    background: rgba(13, 11, 8, 0.97);
    backdrop-filter: blur(20px);
    flex-direction: column; justify-content: flex-start; align-items: flex-start;
    padding: calc(4.4rem + 38px) var(--gutter) 3rem; /* ~50px of air below the logo */
    gap: 0.4rem;
    opacity: 0; visibility: hidden;
    transition: opacity 0.35s, visibility 0.35s;
    overflow-y: auto;
  }
  .nav-links.open { opacity: 1; visibility: visible; }
  .nav-links a, .nav-links button.nav-drop-btn { font-size: 1.4rem; font-family: var(--font-display); font-weight: 420; }
  .nav-menu {
    position: static; min-width: 0; box-shadow: none; border: 0;
    background: transparent; padding: 0 0 0 1.2rem;
    display: none;
  }
  .nav-drop.open .nav-menu { display: block; }
  .nav-menu a { font-size: 1.05rem !important; font-family: var(--font-body) !important; }
  .nav-menu a small { display: none; }
  .nav-cta { margin: 1.5rem 0 0; }
  .nav-links > li.nav-social { display: block; margin-top: 1.75rem; }
  .nav-social .social { margin-top: 0; }
  .nav .nav-cta .btn { padding: 0.75em 1.6em; font-size: 1.02rem; }
  /* Full logo pinned top-left of the open menu, where the header logo sits. */
  .nav-links > li.nav-menu-logo { display: block; position: absolute; top: 1.5rem; left: calc(var(--gutter) + 1.26rem); }
  .nav-menu-logo a { padding: 0; }
  .nav-menu-logo img { height: 2.88rem; width: auto; display: block; }
  /* The menu logo's link isn't a flex row like .brand, so give it one for the SM. */
  .nav-menu-logo a { display: inline-flex; align-items: flex-start; }
  .nav-menu-logo .brand-sm { margin-left: 0.12rem; color: var(--text); }
  .nav-burger { display: flex; position: relative; z-index: 110; }
  .nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger.open span:nth-child(2) { opacity: 0; }
  .nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- hero (home) ---------- */
.hero {
  position: relative;
  /* Fill the viewport but leave a sliver of the next section peeking as a
     scroll cue, and cap the height on very tall monitors. */
  height: min(100svh - 55px, 1040px);
  min-height: 540px;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; }
.hero-media video, .hero-media img {
  width: 100%; height: 100%; object-fit: cover;
}
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(13,11,8,0.55) 0%, rgba(13,11,8,0.1) 35%, rgba(13,11,8,0.35) 68%, var(--ink) 100%),
    radial-gradient(120% 90% at 20% 85%, rgba(13,11,8,0.55) 0%, transparent 60%);
}
.hero-content {
  position: relative; z-index: 2;
  padding-bottom: clamp(6rem, 12vh, 9rem);
}
.hero h1 {
  font-size: calc(var(--step-5) * 0.8);
  max-width: 9em;
  margin-bottom: var(--space-2);
}
.hero-sub {
  font-family: var(--font-body);
  font-size: var(--step-1);
  line-height: 1.5;
  max-width: 30em;
  color: var(--text-dim);
  margin-bottom: var(--space-3);
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.hero-wave {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: clamp(90px, 14vh, 150px);
  z-index: 1;
  pointer-events: none;
}
.hero-scroll-hint {
  position: absolute; right: var(--gutter); bottom: 2rem; z-index: 3;
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-faint);
  writing-mode: vertical-rl;
}

/* --- No-wave hero variant (driven by the review toggle; ship-ready) --------
   When body.no-wave is set, the hero drops the waveform's reserved space,
   hides the "Scroll" text, and shows a scroll caret straddling the divider. */
body.no-wave .hero-content { padding-bottom: clamp(3rem, 6vh, 4.5rem); }
body.no-wave .hero-scroll-hint { display: none; }
.hero-caret {
  display: none;
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  z-index: 5; width: 52px; height: 52px; border-radius: 50%;
  background: #fff; color: var(--ink);
  align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(13, 11, 8, 0.28);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}
body.no-wave .hero-caret { display: flex; }
.hero-caret svg { width: 22px; height: 22px; animation: caretBounce 1.8s ease-in-out infinite; }
.hero-caret:hover { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 10px 26px rgba(13, 11, 8, 0.34); }
@keyframes caretBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .hero-caret svg { animation: none; } }

/* staggered hero load */
.hero .rise {
  opacity: 0;
  transform: translateY(34px);
  animation: rise 1.1s var(--ease-out) forwards;
}
.hero .rise:nth-child(2) { animation-delay: 0.15s; }
.hero .rise:nth-child(3) { animation-delay: 0.3s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- scroll reveals ---------- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  transition-delay: var(--d, 0s);
}
.reveal.in { opacity: 1; transform: none; }

/* ---------- one-sentence story ---------- */
.story {
  position: relative;
  min-height: 52.8vh;
  display: grid; place-items: center;
  overflow: hidden;
  text-align: center;
}
.story-bg { position: absolute; inset: 0; }
.story-bg img { width: 100%; height: 110%; object-fit: cover; opacity: 0.5; }
.story::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--ink) 0%, rgba(13,11,8,0.25) 30%, rgba(13,11,8,0.25) 70%, var(--ink) 100%);
}
.story .wrap { position: relative; z-index: 2; }
.story h2 { font-size: var(--step-4); max-width: 17em; margin-inline: auto; }
.story p { margin-top: var(--space-2); color: var(--text-dim); font-size: var(--step-1); }

/* ---------- solutions grid ---------- */
.sol-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-ink);
  border-block: 1px solid var(--line-ink);
}
.sol-tile {
  background: var(--paper);
  padding: clamp(1.6rem, 2.6vw, 2.6rem);
  min-height: clamp(13rem, 22vw, 17rem);
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  position: relative;
  overflow: hidden;
  transition: background 0.4s;
}
.sol-tile:hover { background: var(--paper-2); }
.sol-tile h3 {
  font-family: var(--font-display);
  font-weight: 440;
  font-size: var(--step-2);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.sol-tile .sol-glyph {
  position: absolute; right: 1.6rem; top: 1.6rem;
  width: clamp(2.6rem, 4vw, 3.4rem); height: clamp(2.6rem, 4vw, 3.4rem);
  color: #0b7a54;
  transition: transform 0.5s var(--ease-out), color 0.4s;
}
.sol-tile:hover .sol-glyph { transform: translateY(-4px) scale(1.06); color: var(--ink-text); }
.sol-tile .sol-foot {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; font-size: 0.95rem; color: var(--ink-text);
}
.sol-tile .sol-foot .arr { transition: transform 0.35s var(--ease-out); }
.sol-tile:hover .sol-foot .arr { transform: translateX(5px); }
.sol-all { text-align: center; margin-top: clamp(1.6rem, 3vw, 2.4rem); }
/* grid runs straight into the CTA band below; no dead space after the tiles */
.section.sol-section { padding-bottom: 0; }
.sol-section .sol-all { padding-bottom: var(--space-4); }
@media (max-width: 900px) { .sol-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sol-grid { grid-template-columns: 1fr; } }

/* ---------- royalty flow ---------- */
.flow-section { overflow: hidden; }
.flow-stage { position: relative; margin-top: var(--space-4); }
.flow-svg { width: 100%; height: auto; }
.flow-svg .flow-path {
  stroke-dasharray: var(--len, 3000);
  stroke-dashoffset: var(--len, 3000);
}
.flow-svg.play .flow-path {
  animation: dash 5s var(--ease-out) forwards;
}
@keyframes dash { to { stroke-dashoffset: 0; } }
.flow-svg .flow-node { opacity: 0; transform: translateY(10px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.flow-svg.play .flow-node { opacity: 1; transform: none; }
.flow-svg.play .flow-node:nth-of-type(1) { transition-delay: 0.1s; }
.flow-svg.play .flow-node:nth-of-type(2) { transition-delay: 0.9s; }
.flow-svg.play .flow-node:nth-of-type(3) { transition-delay: 1.7s; }
.flow-svg.play .flow-node:nth-of-type(4) { transition-delay: 2.5s; }
.flow-svg.play .flow-node:nth-of-type(5) { transition-delay: 3.3s; }
.flow-svg.play .flow-node:nth-of-type(6) { transition-delay: 4.1s; }
.flow-svg .pulse { animation: pulse 2.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes pulse { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }

/* phones: run the diagram edge to edge and crop the viewBox's empty side
   margins (artwork spans x≈11–1035 of the -75…1125 viewBox) so it reads larger */
@media (max-width: 768px) {
  .flow-stage { width: calc(100% - 1.5rem); margin-inline: auto; overflow: hidden; }
  .flow-svg { width: 117.19%; margin-left: -8.4%; max-width: none; }
}

/* ---------- audiences ---------- */
.aud-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.8rem, 1.4vw, 1.4rem);
}
.aud-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 4.1;
  display: flex; flex-direction: column; justify-content: flex-end;
  isolation: isolate;
  color: var(--text);
}
.aud-card img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.aud-card::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(200deg, transparent 30%, rgba(13,11,8,0.88) 88%);
  transition: opacity 0.5s;
}
.aud-card:hover img { transform: scale(1.05); }
.aud-card-body { padding: clamp(1.4rem, 2.2vw, 2.2rem); }
.aud-card .eyebrow { margin-bottom: 0.6rem; font-size: 0.72rem; }
.aud-card h3 {
  font-family: var(--font-display); font-weight: 420;
  font-size: var(--step-3); line-height: 1; letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}
.aud-card p { color: var(--text-dim); font-size: 0.98rem; max-width: 24em; }
.aud-card .aud-go {
  position: absolute; top: 1.4rem; right: 1.4rem;
  width: 2.8rem; height: 2.8rem; border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  background: rgba(13,11,8,0.35); backdrop-filter: blur(6px);
  transition: background 0.35s, transform 0.35s var(--ease-out), border-color 0.35s;
}
.aud-card:hover .aud-go { background: var(--amber); border-color: var(--amber); color: var(--ink-text); transform: rotate(45deg); }
@media (max-width: 820px) {
  .aud-grid { grid-template-columns: 1fr; }
  .aud-card { aspect-ratio: 4 / 3; }
}

/* ---------- numbers ---------- */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  border-top: 1px solid var(--line);
  padding-top: var(--space-3);
}
.stat .stat-num {
  font-family: var(--font-display);
  font-weight: 340;
  font-size: var(--step-4);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gold);
  display: flex; align-items: baseline;
}
.stat .stat-num .unit { font-size: 0.55em; margin-left: 0.08em; }
.stat .stat-label {
  margin-top: 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.8rem; letter-spacing: 0.08em;
  color: var(--text-dim);
  text-transform: uppercase;
  max-width: 14em;
}
@media (max-width: 820px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- dashboard teaser / coded UI ---------- */
.dash-section { overflow: clip; }
.dash-frame {
  perspective: 1600px;
  margin-top: var(--space-4);
}
.dash-tilt {
  transform: rotateX(14deg) rotateY(-7deg) rotateZ(2deg);
  transform-style: preserve-3d;
  transition: transform 1s var(--ease-out);
}
.dash-frame:hover .dash-tilt { transform: rotateX(6deg) rotateY(-3deg) rotateZ(0.5deg); }

.dash {
  background: linear-gradient(160deg, #111a14, #0b120d 60%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow:
    0 60px 120px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(245, 195, 107, 0.05),
    0 0 120px rgba(19, 185, 129, 0.07);
  overflow: hidden;
  font-size: 0.85rem;
}
.dash-bar {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.9rem 1.3rem;
  border-bottom: 1px solid var(--line);
}
.dash-bar .dots { display: flex; gap: 6px; }
.dash-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.dash-bar .dash-title { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--text-faint); text-transform: uppercase; }
.dash-body { display: grid; grid-template-columns: 1.6fr 1fr; }
.dash-main { padding: 1.4rem; border-right: 1px solid var(--line); }
.dash-side { padding: 1.4rem; display: flex; flex-direction: column; gap: 1rem; }

.kpi-row { display: flex; gap: 2rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.kpi .kpi-label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.3rem; }
.kpi .kpi-val { font-family: var(--font-display); font-size: 1.7rem; font-weight: 400; color: var(--text); }
.kpi .kpi-delta { font-family: var(--font-mono); font-size: 0.7rem; color: var(--cyan); }

.dash-chart { width: 100%; height: auto; }
.dash-chart .bar { fill: rgba(19, 185, 129, 0.75); }
.dash-chart .bar.hot { fill: var(--cyan); }
.dash-chart .gridline { stroke: var(--line); stroke-width: 1; }

.dash-rows { border-top: 1px solid var(--line); margin-top: 1.2rem; }
.dash-row {
  display: grid; grid-template-columns: 2fr 1.1fr 1fr auto;
  gap: 0.8rem; align-items: center;
  padding: 0.62rem 0.15rem;
  border-bottom: 1px solid var(--line);
  color: var(--text-dim);
}
.dash-row b { color: var(--text); font-weight: 500; }
.dash-row .mono { font-size: 0.74rem; color: var(--text-faint); }
.dash-row .amt { font-family: var(--font-mono); font-size: 0.8rem; color: var(--gold); text-align: right; }
.dash-row .badge {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em;
  color: var(--cyan); border: 1px solid rgba(245, 195, 107, 0.35);
  padding: 0.18em 0.6em; border-radius: 99px;
}
.side-block { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }
.side-block .kpi-label { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.6rem; }
.svc-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.34rem 0; }
.svc-row .svc-name { font-size: 0.8rem; color: var(--text-dim); width: 6.2em; flex: none; }
.svc-row .svc-track { flex: 1; height: 4px; border-radius: 4px; background: var(--ink-3); overflow: hidden; }
.svc-row .svc-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--amber), var(--gold)); width: 0; transition: width 1.4s var(--ease-out); }
.svc-row .svc-fill.cyan { background: var(--cyan); }
.svc-row .svc-pct { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-faint); width: 3em; text-align: right; }
.dash.in .svc-fill { width: var(--w); }
@media (max-width: 820px) {
  .dash-body { grid-template-columns: 1fr; }
  .dash-main { border-right: 0; }
  .dash-tilt { transform: rotateX(8deg) rotateY(-3deg); }
}

/* ---------- big CTA ---------- */
.cta-final {
  text-align: center;
  padding-block: var(--space-5);
  position: relative;
  overflow: hidden;
}
.cta-final h2 { font-size: var(--step-5); margin-bottom: var(--space-3); }
.cta-final .cta-wave {
  position: absolute; inset: auto 0 0 0; width: 100%; height: 120px;
  opacity: 0.5; pointer-events: none;
}

/* ---------- footer ---------- */
.footer {
  border-top: 1px solid var(--line);
  padding: var(--space-4) 0 var(--space-3);
  background: #070c09;
  position: relative; z-index: 1;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.footer .brand { margin-bottom: 1rem; }
.footer-tag { color: var(--text-dim); font-size: 0.95rem; max-width: 22em; }
.footer h4 {
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 1rem; font-weight: 400;
}
.footer li { margin-bottom: 0.55rem; }
.footer li a { color: var(--text-dim); font-size: 0.95rem; transition: color 0.25s; }
.footer li a:hover { color: var(--gold); }
.footer-link-btn { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--text-dim); font-size: 0.95rem; cursor: pointer; transition: color 0.25s; text-align: left; }
.footer-link-btn:hover, .footer-link-btn:focus-visible { color: var(--gold); }
/* Social icons: outlined circles, gold on hover. Used in the footer and the mobile menu. */
.social { display: flex; gap: 0.6rem; margin-top: 1.4rem; }
.footer .social li, .nav-links .social li { margin: 0; }
.social a, .footer li .social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); color: var(--text-dim);
  transition: color 0.25s, border-color 0.25s, background 0.25s, transform 0.25s;
}
.social a:hover, .social a:focus-visible { color: var(--gold); border-color: var(--gold); transform: translateY(-2px); }
.social svg { width: 1.05rem; height: 1.05rem; }
.footer-base {
  border-top: 1px solid var(--line);
  padding-top: var(--space-2);
  display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: space-between; align-items: center;
  color: var(--text-faint); font-size: 0.85rem;
}
.footer-base .sesac {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em;
}
.sesac-logo { height: 1.55rem; width: auto; display: block; opacity: 0.8; }
/* SESAC Music Group is federally registered, so it carries ®. The link is a
   flex row so the mark can sit at the logo's top right; negative margin cancels
   most of the gap. White at full opacity on purpose: inheriting the footer's
   dimmed grey at this size is too faint to work as notice. */
.footer-base .sesac a { display: inline-flex; align-items: flex-start; }
.sesac-r {
  align-self: flex-start;
  margin-left: 0.15em;
  font-size: 0.9em; line-height: 1;
  color: #fff; opacity: 1;
}
.footer-base .sesac a:hover .sesac-logo, .footer-base .sesac a:focus-visible .sesac-logo { opacity: 1; }
@media (max-width: 820px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}

/* ============================================================
   INTERIOR PAGE COMPONENTS
   ============================================================ */

.page-hero {
  position: relative;
  padding: clamp(9rem, 18vh, 13rem) 0 var(--space-4);
  overflow: hidden;
}
.page-hero .eyebrow { margin-bottom: var(--space-2); }
.page-hero h1 { font-size: calc(var(--step-5) * 0.8); max-width: 10em; margin-bottom: var(--space-2); }
.page-hero .lede { font-size: var(--step-1); }
.page-hero-bg {
  position: absolute; inset: 0; z-index: -1;
}
.page-hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.32; }
.page-hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,11,8,0.5), rgba(13,11,8,0.75) 55%, var(--ink));
}
.page-hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: var(--space-3); }

/* split: media + copy */
.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 6rem);
  align-items: center;
}
.split.rev > .split-media { order: -1; }
.split-media { position: relative; }
.split-media img {
  border-radius: var(--radius-lg);
  width: 100%;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45);
}
/* Light-mode split images sit on paper — soften the dark-tuned shadow. */
.on-paper .split-media img { box-shadow: 0 20px 45px rgba(15, 21, 18, 0.12); }
/* Balanced "feature block": cap tall images to a fixed height so they sit
   proportionate beside the text. Overscan absorbs parallax. Dark shadow by
   default; softened under .on-paper (light sections). .top anchors the crop
   to the top for images whose subject sits high in frame. */
.split-media.feature {
  height: clamp(360px, 30vw, 480px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45);
}
.on-paper .split-media.feature { box-shadow: 0 20px 45px rgba(15, 21, 18, 0.12); }
.split-media.feature img {
  height: calc(100% + 48px);
  margin-top: -24px;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  box-shadow: none;
}
.split-media.feature.top img { object-position: top center; }
.split-copy h2 { font-size: var(--step-3); margin-bottom: var(--space-2); }
.split-copy .eyebrow { margin-bottom: var(--space-2); }
.split-copy p { color: var(--text-dim); margin-bottom: 1em; max-width: 34em; text-wrap: pretty; }
.on-paper .split-copy p { color: var(--ink-text-dim); }
.split-copy .text-link { margin-top: 0.4rem; }
@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; }
  .split.rev > .split-media { order: 0; }
}

/* feature list */
.feat-list { display: grid; gap: 0; margin-top: var(--space-2); }
.feat {
  display: grid; grid-template-columns: auto 1fr; gap: 1.1rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--line);
}
.on-paper .feat { border-top-color: var(--line-ink); }
.feat-ico {
  width: 2.4rem; height: 2.4rem; flex: none;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  color: var(--gold);
}
.on-paper .feat-ico { border-color: var(--line-ink); color: #0b7a54; }
.feat h4 { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.2rem; }
.feat p { color: var(--text-dim); font-size: 0.95rem; max-width: 40em; }
.on-paper .feat p { color: var(--ink-text-dim); }

/* checklist chips */
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: var(--space-2); }
.chip {
  font-family: var(--font-mono); font-size: 0.78rem;
  padding: 0.45em 1em; border-radius: 99px;
  border: 1px solid var(--line-strong);
  color: var(--text-dim);
}
.on-paper .chip { border-color: var(--line-ink); color: var(--ink-text-dim); }

/* number-led steps */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.step-card { counter-increment: step; background: var(--ink); padding: clamp(1.6rem, 2.4vw, 2.4rem); }
.step-card::before {
  content: "0" counter(step);
  font-family: var(--font-mono); font-size: 0.8rem;
  color: var(--cyan); letter-spacing: 0.15em;
  display: block; margin-bottom: 1.2rem;
}
.step-card h4 { font-family: var(--font-display); font-weight: 450; font-size: var(--step-1); margin-bottom: 0.5rem; }
.step-card p { color: var(--text-dim); font-size: 0.95rem; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }

/* pull-quote band */
.band {
  padding-block: var(--space-4);
  border-block: 1px solid var(--line);
  text-align: center;
}
.band .display { font-size: var(--step-3); max-width: 22em; margin-inline: auto; }
.band .band-src { margin-top: var(--space-2); font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }

/* page-level next CTA */
.next-cta {
  padding-block: var(--space-4);
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  align-items: center; justify-content: space-between;
  border-top: 1px solid var(--line);
}
.next-cta h3 { font-size: var(--step-3); font-family: var(--font-display); font-weight: 400; max-width: 15em; }

/* two-col micro cards on paper sections */
.tier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 2rem); }
.tier {
  border: 1px solid var(--line-ink);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 2.6vw, 2.6rem);
  background: rgba(255, 255, 255, 0.35);
}
.tier h3 { font-family: var(--font-display); font-weight: 460; font-size: var(--step-2); margin-bottom: 0.6rem; }
.tier p { color: var(--ink-text-dim); margin-bottom: 1rem; }
.tier ul { display: grid; gap: 0.5rem; }
.tier li { display: flex; gap: 0.6rem; align-items: baseline; font-size: 0.95rem; }
.tier li::before { content: "→"; color: #0b7a54; font-family: var(--font-mono); }
@media (max-width: 820px) { .tier-grid { grid-template-columns: 1fr; } }

/* five-step variant */
.steps.five { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1080px) { .steps.five { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps.five { grid-template-columns: 1fr; } }

/* legal / long-form policy pages */
.legal-updated {
  margin-top: var(--space-2);
  font-size: var(--step--1); letter-spacing: 0.06em;
  color: var(--text-faint);
}
.legal-section { padding-top: var(--space-4); }
.legal { color: var(--ink-text); }
.legal p, .legal ul { margin-bottom: 1.1rem; text-wrap: pretty; }
.legal p, .legal li { color: rgba(15, 21, 18, 0.8); }
.legal strong { color: var(--ink-text); font-weight: 600; }
.legal h2 {
  font-family: var(--font-display); font-weight: 450;
  font-size: var(--step-3); line-height: 1.1; letter-spacing: -0.015em;
  margin: var(--space-4) 0 var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-ink);
  scroll-margin-top: 6rem;
  text-wrap: balance;
}
.legal h3 {
  font-family: var(--font-display); font-weight: 550;
  font-size: var(--step-1);
  margin: var(--space-3) 0 0.7rem;
}
.legal h4 {
  font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #0b7a54;
  margin: 1.6rem 0 0.5rem;
}
.legal h3, .legal p[id] { scroll-margin-top: 6rem; }
.legal .legal-note { font-style: italic; color: var(--ink-text-dim); margin-top: -0.4rem; }
.legal ul { display: grid; gap: 0.55rem; }
.legal li { position: relative; padding-left: 1.15rem; }
.legal li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: #13b981; }
.legal a { color: #0b7a54; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; overflow-wrap: anywhere; }
.legal a:hover { color: var(--ink-text); }
.legal a strong { color: inherit; }

.legal-table-wrap {
  margin: var(--space-2) 0 var(--space-3);
  border: 1px solid var(--line-ink);
  border-radius: var(--radius);
  overflow-x: auto;
  background: rgba(255, 255, 255, 0.35);
}
.legal-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 34rem; }
.legal-table th {
  text-align: left; font-weight: 600;
  font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-text-dim);
  padding: 1rem 1.2rem;
  background: var(--paper-2);
}
.legal-table td { padding: 1.1rem 1.2rem; vertical-align: top; border-top: 1px solid var(--line-ink); }
.legal-table td:first-child { width: 38%; }
.legal-table ul { margin: 0; }

.legal-contact {
  margin-top: var(--space-2);
  border: 1px solid var(--line-ink);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
  background: rgba(255, 255, 255, 0.35);
}
.legal-contact .legal-contact-name { font-family: var(--font-display); font-weight: 550; font-size: var(--step-1); color: var(--ink-text); margin-bottom: 1rem; }
.legal-contact dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.6rem 1.5rem; }
.legal-contact dt { font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-text-dim); padding-top: 0.15em; }
.legal-contact dd { color: rgba(15, 21, 18, 0.8); }

@media (max-width: 640px) {
  .legal-table { min-width: 0; }
  .legal-table thead { display: none; }
  .legal-table tr, .legal-table td { display: block; width: auto !important; }
  .legal-table tr + tr { border-top: 1px solid var(--line-ink); }
  .legal-table td { border-top: 0; padding: 0.4rem 1.1rem; }
  .legal-table td:first-child { padding-top: 1.1rem; }
  .legal-table td:last-child { padding-bottom: 1.1rem; }
}
@media (max-width: 480px) {
  .legal-contact dl { grid-template-columns: 1fr; gap: 0.2rem; }
  .legal-contact dd { margin-bottom: 0.6rem; }
}

/* song family tree */
.tree-stage { overflow-x: auto; scrollbar-width: none; }
.tree-stage::-webkit-scrollbar { display: none; }
.tree-svg { min-width: 56rem; width: 100%; height: auto; }
.tree-svg .tree-branch {
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
  transition: stroke-dashoffset 1.6s var(--ease-out);
}
.tree-svg.in .tree-branch { stroke-dashoffset: 0; }
.tree-svg .tree-leaf { opacity: 0; transition: opacity 0.8s var(--ease-out); }
.tree-svg.in .tree-leaf { opacity: 1; }
.tree-svg.in .tree-leaf { transition-delay: calc(0.35s + var(--i, 0) * 0.18s); }

/* statement (accounting) coded UI */
.statement {
  background: linear-gradient(160deg, #111a14, #0b120d 60%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
  font-size: 0.85rem;
}
.statement-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint);
}
.statement-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap: 1rem; align-items: center;
  padding: 0.8rem 1.5rem;
  border-bottom: 1px solid var(--line);
  color: var(--text-dim);
}
.statement-row.head-row {
  font-family: var(--font-mono); font-size: 0.64rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint);
  padding-block: 0.6rem;
}
.statement-row b { color: var(--text); font-weight: 500; }
.statement-row .amt { font-family: var(--font-mono); color: var(--gold); text-align: right; }
.statement-row .up { font-family: var(--font-mono); font-size: 0.72rem; color: var(--cyan); }
.statement-total {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.1rem 1.5rem;
  font-family: var(--font-mono);
}
.statement-total .amt { color: var(--gold); font-size: 1.15rem; }
@media (max-width: 700px) {
  .statement-row { grid-template-columns: 1.6fr 1fr auto; }
  .statement-row .hide-sm { display: none; }
}

/* ---------- contact page ---------- */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: start;
}
.contact-form { display: grid; gap: 1.2rem; }
.field label {
  display: block;
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 0.5rem;
}
.field input, .field select, .field textarea {
  width: 100%;
  font: inherit; color: var(--text);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.85em 1em;
  transition: border-color 0.3s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold);
}
.field textarea { min-height: 8.5em; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 820px) {
  .contact-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
}
.form-note { font-size: 0.85rem; color: var(--text-faint); }

/* ---------- HubSpot embedded form (Let's Talk) ---------- */
.hubspot-form-wrap .hs-form { display: grid; gap: 1.2rem; }
.hubspot-form-wrap .hs-form-field { margin: 0; }
.hubspot-form-wrap .hs-dependent-field .hs-form-field + .hs-form-field { margin-top: 1.2rem; }
.hubspot-form-wrap .hs-form-field > label {
  display: block;
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 0.5rem;
}
.hubspot-form-wrap input[type="text"],
.hubspot-form-wrap input[type="email"],
.hubspot-form-wrap input[type="tel"],
.hubspot-form-wrap input[type="number"],
.hubspot-form-wrap input[type="url"],
.hubspot-form-wrap select,
.hubspot-form-wrap textarea {
  width: 100%;
  font: inherit; color: var(--text);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.85em 1em;
  transition: border-color 0.3s;
}
.hubspot-form-wrap input:focus,
.hubspot-form-wrap select:focus,
.hubspot-form-wrap textarea:focus {
  outline: none; border-color: var(--gold);
}
.hubspot-form-wrap textarea { min-height: 8.5em; resize: vertical; }
.hubspot-form-wrap .hs-field-desc { font-size: 0.78rem; line-height: 1.4; margin-bottom: 0.5rem; }
.hubspot-form-wrap ul.hs-error-msgs { list-style: none; padding: 0; margin: 0.4rem 0 0; }
.hubspot-form-wrap ul.hs-error-msgs label { color: #e5484d; font-size: 0.8rem; }
.hubspot-form-wrap .hs-form-booleancheckbox-display,
.hubspot-form-wrap .hs-form-booleancheckbox-display > span { display: flex; align-items: flex-start; gap: 0.6em; font-size: 0.85rem; color: var(--text-dim); }
.hubspot-form-wrap .hs-button {
  font: inherit; font-weight: 600;
  font-size: var(--step-1);
  padding: 0.95em 2em;
  border-radius: 999px;
  border: none; cursor: pointer;
  background: var(--amber); color: var(--ink-text);
  transition: transform 0.35s var(--ease-out), background 0.35s;
}
.hubspot-form-wrap .hs-button:hover { background: var(--gold); transform: translateY(-2px); }
.hubspot-form-wrap .submitted-message { color: var(--text); font-size: var(--step-0); }

/* HubSpot caps fieldsets at 500px; let the form fill its container */
.hubspot-form-wrap .hs-form fieldset { max-width: none !important; width: 100%; }
.hubspot-form-wrap .hs-form fieldset.form-columns-2 { display: flex; gap: 1.2rem; }
.hubspot-form-wrap .hs-form fieldset.form-columns-2 .hs-form-field { flex: 1 1 0; min-width: 0; width: auto !important; float: none !important; }
.hubspot-form-wrap .hs-form fieldset .input { margin-right: 0 !important; }
.hubspot-form-wrap .hs-form .input input:not([type="checkbox"]):not([type="radio"]),
.hubspot-form-wrap .hs-form .input select,
.hubspot-form-wrap .hs-form .input textarea { width: 100% !important; }
@media (max-width: 640px) { .hubspot-form-wrap .hs-form fieldset.form-columns-2 { flex-direction: column; } }

/* Nav stays dark on light pages: keep the dark bar showing even at the top */
.nav-on-paper::after { opacity: 1; }
/* at the top, match the site's green-black page color (other pages show it through the transparent nav) */
.nav-on-paper:not(.scrolled)::after { background: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav-on-paper { border-bottom-color: var(--line); }

/* Custom dropdown arrow so it can sit inset from the right edge */
.hubspot-form-wrap select {
  -webkit-appearance: none; appearance: none;
  padding-right: 3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%230f1512' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.25rem center;
  background-size: 12px 8px;
}

/* Let's Talk: light-mode form (inside .on-paper) */
.on-paper .hubspot-form-wrap .hs-form-field > label { color: var(--ink-text); font-size: 0.85rem; font-weight: 500; }
.on-paper .hubspot-form-wrap .hs-field-desc { color: var(--ink-text-dim); }
.on-paper .hubspot-form-wrap input[type="text"],
.on-paper .hubspot-form-wrap input[type="email"],
.on-paper .hubspot-form-wrap input[type="tel"],
.on-paper .hubspot-form-wrap input[type="number"],
.on-paper .hubspot-form-wrap input[type="url"],
.on-paper .hubspot-form-wrap select,
.on-paper .hubspot-form-wrap textarea {
  color: var(--ink-text);
  background-color: #fff;
  border-color: var(--line-ink);
}
.on-paper .hubspot-form-wrap input:focus,
.on-paper .hubspot-form-wrap select:focus,
.on-paper .hubspot-form-wrap textarea:focus { border-color: #0b7a54; }
.on-paper .hubspot-form-wrap .hs-form-booleancheckbox-display,
.on-paper .hubspot-form-wrap .hs-form-booleancheckbox-display > span,
.on-paper .hubspot-form-wrap .hs-form-checkbox-display,
.on-paper .hubspot-form-wrap .hs-form-checkbox-display > span,
.on-paper .hubspot-form-wrap .hs-form-radio-display,
.on-paper .hubspot-form-wrap .hs-form-radio-display > span { color: var(--ink-text); }
/* checkbox/radio options: vertically center the label on the control, 10px gap between them */
.hubspot-form-wrap .hs-form-checkbox-display,
.hubspot-form-wrap .hs-form-radio-display { display: flex; align-items: center; gap: 10px; }
.hubspot-form-wrap .hs-form-checkbox-display > input,
.hubspot-form-wrap .hs-form-radio-display > input { flex: 0 0 auto; margin: 0; }
.on-paper .hubspot-form-wrap .hs-button:hover { background: #0b7a54; color: #fff; }
.on-paper .hubspot-form-wrap .submitted-message { color: var(--ink-text); }
.on-paper .hubspot-form-wrap a { color: #0b7a54; }

/* ---------- misc ---------- */
.divider-wave { height: 70px; width: 100%; color: var(--line-strong); }

.marquee {
  overflow: hidden; white-space: nowrap;
  border-block: 1px solid var(--line);
  padding-block: 1rem;
  font-family: var(--font-mono);
  font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-faint);
}
.marquee-track { display: inline-block; animation: marquee 38s linear infinite; }
.marquee span { margin-right: 3.5rem; display: inline-flex; align-items: center; vertical-align: middle; }
.marquee span i { color: var(--amber); font-style: normal; margin-left: 3.5rem; }
.marquee-logo {
  height: 22px; width: auto; display: block;
  opacity: 0.7;
}
/* stacked / icon-heavy marks read small at the base height — bump them */
.marquee-logo--lg { height: 34px; }  /* Amazon Music (two-line) */
.marquee-logo--md { height: 30px; }  /* Deezer, Spotify (icon + wordmark) */
.marquee-head { margin-bottom: var(--space-3); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- auth / login ---------- */
.auth-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
}
.auth-bar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: var(--space-2) var(--gutter);
}
.auth-bar-alt { font-size: 0.9rem; color: var(--text-dim); }

.auth {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}

.auth-aside {
  position: relative; overflow: hidden;
  background: var(--ink-2);
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(6rem, 12vh, 9rem) clamp(2rem, 4vw, 4.5rem) var(--space-4);
}
.auth-welcome h2 { font-size: var(--step-4); line-height: 1.02; white-space: nowrap; }
.audiam-mark { width: clamp(150px, 16vw, 186px); height: auto; margin: var(--space-2) 0 var(--space-1); }
.auth-aside-h { font-size: var(--step-4); line-height: 1.04; }
.auth-aside-text { margin-top: var(--space-2); max-width: 34ch; color: var(--text-dim); }
.auth-points { display: grid; gap: 0.9rem; margin-top: var(--space-3); }
.auth-point { display: flex; gap: 0.7rem; align-items: flex-start; color: var(--text-dim); }
.auth-point svg { flex: none; margin-top: 0.2rem; color: var(--amber); }
.auth-aside-foot {
  position: absolute; left: clamp(2rem, 4vw, 4.5rem); bottom: var(--space-4);
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint);
}

.auth-main {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(6rem, 12vh, 9rem) var(--gutter) var(--space-4);
}
.auth-card { width: 100%; max-width: 25rem; }
.auth-card h1 { font-size: var(--step-3); margin: 0.4rem 0 0.5rem; }
.auth-sub { color: var(--text-dim); margin-bottom: var(--space-3); }

.auth-form { display: grid; gap: 1.15rem; }
.field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.field-head label { margin-bottom: 0; }
.field-link { font-size: 0.78rem; font-weight: 600; color: var(--gold); }
.field-link[aria-disabled="true"] { color: var(--text-faint); cursor: default; }

.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 4.5rem; }
.pw-toggle {
  position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint);
  padding: 0.4em 0.55em; border-radius: 8px;
}
.pw-toggle:hover { color: var(--text); }

.check { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: var(--text-dim); }
.check input { width: 1.05rem; height: 1.05rem; accent-color: var(--amber); }

.btn-block { width: 100%; justify-content: center; }

.auth-msg {
  font-size: 0.9rem; color: var(--text-dim);
  background: var(--ink-3); border: 1px solid var(--line);
  border-radius: 10px; padding: 0.85em 1em;
}
.auth-alt {
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  font-size: 0.92rem; color: var(--text-dim); text-align: center;
}

/* Audiam migration callout — sign-post on login.html to the Audiam sign-in page */
.auth-migrate {
  display: flex; align-items: center; gap: 1.35rem;
  margin-top: clamp(2.5rem, 3.2vw, 3.75rem);
  padding: 1.9rem 1.6rem;
  border: 1px solid var(--line-ink);
  border-radius: 14px;
  background: #fff;
  color: var(--ink-text);
  box-shadow: 0 8px 24px rgba(15, 21, 18, 0.06);
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.35s var(--ease-out);
}
.auth-migrate:hover {
  border-color: #6381c1;
  box-shadow: 0 16px 34px rgba(15, 21, 18, 0.12);
  transform: translateY(-2px);
}
.auth-migrate-logo { width: 104px; height: auto; flex: none; }
.auth-migrate-text { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.95rem; line-height: 1.45; }
.auth-migrate-text strong { font-weight: 700; color: var(--ink-text); font-size: 1.05rem; }
.auth-migrate-cta { color: #0b7a54; font-weight: 600; }
.auth-migrate .arr { display: inline-block; transition: transform 0.35s var(--ease-out); }
.auth-migrate:hover .arr { transform: translateX(4px); }

/* Right (form) side in light mode */
.auth-main {
  background: var(--paper);
  color: var(--ink-text);
}
.auth-main .eyebrow { color: var(--ink-text-dim); }
.auth-main .auth-card h1 { color: var(--ink-text); }
.auth-main .auth-sub { color: var(--ink-text-dim); }
.auth-main .field label,
.auth-main .field-head label { color: var(--ink-text-dim); }
.auth-main .field input {
  color: var(--ink-text);
  background: #fff;
  border-color: var(--line-ink);
}
.auth-main .field input::placeholder { color: rgba(15, 21, 18, 0.42); }
.auth-main .field input:focus { border-color: #0b7a54; }
.auth-main .field-link { color: #0b7a54; }
.auth-main .field-link[aria-disabled="true"] { color: rgba(15, 21, 18, 0.4); }
.auth-main .pw-toggle { color: rgba(15, 21, 18, 0.5); }
.auth-main .pw-toggle:hover { color: var(--ink-text); }
.auth-main .check { color: var(--ink-text-dim); }
.auth-main .auth-msg {
  background: var(--paper-2);
  border-color: var(--line-ink);
  color: var(--ink-text-dim);
}
.auth-main .auth-alt {
  color: var(--ink-text-dim);
  border-top-color: var(--line-ink);
}
.auth-main .auth-alt .text-link { color: #0b7a54; }
/* top-right contextual link sits over the light side */
.auth-bar-alt { color: var(--ink-text-dim); }
.auth-bar-alt .text-link { color: #0b7a54; }

@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .auth-bar-alt { display: none; }
  /* form is full-width light now — keep the white wordmark legible */
  .auth-bar .brand-logo { filter: brightness(0); }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .hero .rise { opacity: 1; transform: none; }
  .flow-svg .flow-path { stroke-dashoffset: 0 !important; }
  .flow-svg .flow-node { opacity: 1 !important; transform: none !important; }
  .dash .svc-fill { width: var(--w) !important; }
  .marquee-track { animation: none; }
}

/* ---------- matching-engine visual (technology.html) ----------------------
   Messy metadata falls in, the engine consumes it, micro royalties fall out
   and accumulate on a songwriter statement. Coded, not an image (see §5).
   Loops continuously; --travel / --coin-travel keep the geometry exact, so
   the container height is fixed rather than fluid. */
.engine-viz {
  --travel: 170px;
  --coin-travel: 104px;
  position: relative; overflow: hidden;
  width: 100%; height: 540px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 70% at 50% 47%, rgba(19, 185, 129, 0.08), transparent 62%),
    linear-gradient(180deg, var(--ink-2), var(--ink-3));
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45);
  font-family: var(--font-mono);
}

/* the mess going in */
.eng-pill {
  position: absolute; left: 50%; top: 34px;
  white-space: nowrap; font-size: 0.72rem; letter-spacing: 0.04em;
  padding: 0.42em 1em; border-radius: 99px;
  border: 1px dashed var(--line-strong);
  background: rgba(233, 241, 236, 0.03);
  color: var(--text-faint);
  opacity: 0;
  animation: eng-fall 9s cubic-bezier(0.5, 0.02, 0.62, 1) infinite;
  animation-delay: calc(var(--i) * 3s);
}
@keyframes eng-fall {
  0%   { opacity: 0; transform: translate(-50%, 0) rotate(-3deg) scale(0.96); }
  9%   { opacity: 1; }
  29%  { opacity: 1; transform: translate(-50%, calc(var(--travel) - 14px)) rotate(2.5deg) scale(1); }
  34%  { opacity: 0; transform: translate(-50%, var(--travel)) rotate(0deg) scale(0.78); }
  100% { opacity: 0; transform: translate(-50%, var(--travel)) scale(0.78); }
}

/* the engine */
.eng-box {
  position: absolute; left: 50%; top: 208px; transform: translateX(-50%);
  width: 72%; height: 96px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(233, 241, 236, 0.05), rgba(233, 241, 236, 0.02));
  animation: eng-pulse 3s ease-out infinite;
}
@keyframes eng-pulse {
  0%   { border-color: var(--amber); box-shadow: 0 0 26px rgba(19, 185, 129, 0.34), inset 0 0 20px rgba(19, 185, 129, 0.07); }
  45%  { border-color: var(--line-strong); box-shadow: 0 0 0 rgba(19, 185, 129, 0), inset 0 0 0 rgba(19, 185, 129, 0); }
  100% { border-color: var(--line-strong); box-shadow: 0 0 0 rgba(19, 185, 129, 0), inset 0 0 0 rgba(19, 185, 129, 0); }
}
.eng-mark { display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.eng-mark i { display: block; width: 3.5px; border-radius: 1px; }
.eng-mark i:nth-child(1) { height: 10px; background: #f4a31d; }
.eng-mark i:nth-child(2) { height: 15px; background: #0ea1dc; }
.eng-mark i:nth-child(3) { height: 22px; background: #28b67b; }
.eng-box-label {
  font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim);
}

/* the money coming out */
.eng-coin {
  position: absolute; left: 50%; top: 316px;
  font-size: 0.78rem; letter-spacing: 0.03em; color: var(--gold);
  text-shadow: 0 0 14px rgba(245, 195, 107, 0.35);
  opacity: 0;
  animation: eng-coin 3s cubic-bezier(0.4, 0.05, 0.55, 1) infinite;
  animation-delay: calc(var(--i) * 1s);
}
@keyframes eng-coin {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(0.9); }
  14%  { opacity: 1; transform: translate(-50%, 10px) scale(1); }
  74%  { opacity: 1; transform: translate(-50%, calc(var(--coin-travel) - 10px)); }
  90%  { opacity: 0; transform: translate(-50%, var(--coin-travel)) scale(0.94); }
  100% { opacity: 0; }
}

/* the statement */
.eng-card {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  width: 72%; padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(233, 241, 236, 0.045);
}
.eng-card-h {
  display: block; font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 0.45rem;
}
.eng-total { display: block; height: 26px; overflow: hidden; }
.eng-total-strip { display: block; animation: eng-tick 9s steps(6) infinite; }
.eng-total-strip b {
  display: block; height: 26px; line-height: 26px;
  font-size: 1.18rem; font-weight: 600; color: var(--gold);
}
@keyframes eng-tick { from { transform: translateY(0); } to { transform: translateY(-156px); } }

@media (max-width: 900px) {
  .engine-viz { height: 470px; --travel: 148px; --coin-travel: 88px; }
  .eng-box { top: 182px; height: 84px; }
  .eng-coin { top: 280px; }
}

/* Static, readable composition when motion is reduced. The animation must be
   cancelled outright: an animation's own values outrank normal declarations, so
   without `animation: none` these elements would keep their final keyframe
   (opacity 0) and the panel would render empty. Same reason .flow-node above
   uses !important. */
@media (prefers-reduced-motion: reduce) {
  .eng-pill, .eng-coin, .eng-box, .eng-total-strip { animation: none !important; }
  .eng-pill { opacity: 1 !important; }
  .eng-pill[style*="--i:0"] { transform: translate(-50%, 0) !important; }
  .eng-pill[style*="--i:1"] { transform: translate(-50%, 40px) !important; }
  .eng-pill[style*="--i:2"] { transform: translate(-50%, 80px) !important; }
  .eng-coin { opacity: 1 !important; }
  .eng-coin[style*="--i:0"] { transform: translate(-50%, 4px) !important; }
  .eng-coin[style*="--i:1"] { transform: translate(-50%, 34px) !important; }
  .eng-coin[style*="--i:2"] { transform: translate(-50%, 64px) !important; }
  .eng-total-strip { transform: translateY(0) !important; }
  .eng-box { border-color: var(--amber) !important; }
}

/* --- Export bake (production deploy) -------------------------------------
   The brand-review overlay that toggled these at runtime was removed for
   production, so the selected states are baked in: hero waveform hidden,
   and the label/mono role rendered in Figtree (incl. inline SVG labels). */
body.no-wave .hero-wave { display: none; }
[font-family*="Fragment Mono"] { font-family: "Figtree", "Helvetica Neue", sans-serif !important; }

/* --- Rights Management: single tier + fingerprint match visual ------------ */
.tier-grid.one { grid-template-columns: 1fr; }
@media (min-width: 721px) { .tier-grid.one .tier ul { grid-template-columns: 1fr 1fr; column-gap: 2rem; } }
.fp-viz { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1rem, 2vw, 1.75rem); display: grid; gap: 0.75rem; color: var(--text); }
.fp-row { display: grid; grid-template-columns: minmax(7rem, 1fr) 2fr auto; gap: 1rem; align-items: center; padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius); }
.fp-orig { border-color: var(--line-strong); background: var(--ink-3); }
.fp-label strong { display: block; font-weight: 500; font-size: 0.95rem; }
.fp-label span { display: block; color: var(--text-dim); font-size: 0.8rem; }
.fp-wave svg { width: 100%; height: 28px; display: block; fill: var(--gold); }
.fp-orig .fp-wave svg { fill: var(--text); }
.fp-hash { font-size: 0.85rem; letter-spacing: 0.04em; color: var(--gold); white-space: nowrap; }
.fp-tick { font-style: normal; margin-left: 0.5rem; color: var(--amber); font-weight: 700; }
.fp-foot { text-align: right; font-weight: 500; color: var(--amber); padding-top: 0.25rem; }
@media (max-width: 560px) { .fp-row { grid-template-columns: 1fr auto; } .fp-wave { grid-column: 1 / -1; order: 3; } }

/* ---------- Login chooser (temporary routing page) ------------------------
   login.html sends clients to whichever sign-in already works while the
   Music Services form waits on its backend. Delete this whole block when the
   real sign-in is wired up. */
body.login-chooser .auth {
  display: grid; grid-template-columns: 1fr;
  min-height: 100svh; align-content: start;
}
body.login-chooser .auth-aside {
  display: block; position: relative; overflow: hidden;
  background: var(--ink-2);
  padding: clamp(5rem, 9vh, 6.5rem) var(--gutter) clamp(2.4rem, 4vw, 3.2rem);
}
body.login-chooser .auth-aside-body { width: 100%; max-width: 64rem; margin-inline: auto; }
body.login-chooser .auth-welcome {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: clamp(2rem, 5vw, 4.5rem); margin-top: var(--space-2);
}
body.login-chooser .auth-welcome h2 { max-width: none; }
body.login-chooser .auth-points { margin-top: 0; }
body.login-chooser .auth-aside-foot { display: none; }
/* the top bar sits over the dark band here, so its text stays light */
body.login-chooser .auth-bar-alt { color: var(--text-dim); }
body.login-chooser .auth-bar-alt .text-link { color: var(--gold); }
body.login-chooser .auth-main {
  display: flex; align-items: start; justify-content: center;
  padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) clamp(3rem, 6vw, 5rem);
}

/* Two doors of equal weight.

   The rows are declared here, on the parent, and each door opts into them with
   `grid-template-rows: subgrid`. That is what keeps the two cards aligned line
   for line despite marks of different proportions and body copy of different
   lengths. The sub row is 1fr, which absorbs the difference in copy and pins
   both calls to action to the same baseline. Edit either card's text and the
   alignment still holds. */
.auth-doors {
  width: 100%; max-width: 64rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto 1fr auto auto; /* question, logo, sub, cta, foot */
  column-gap: 80px;
  row-gap: 0.55rem;
}
/* Asked once, above both doors, so the cards can be answers rather than two
   questions side by side. It also gives the page a reason to exist: it says
   why there are two doors before asking anyone to pick one. */
.auth-doors-q {
  grid-column: 1 / -1; grid-row: 1;
  margin: 0 0 clamp(1.4rem, 2.5vw, 2rem);
  font-family: var(--font-display); font-weight: 560;
  font-size: var(--step-2); line-height: 1.12; letter-spacing: -0.01em;
  color: var(--ink-text);
}
.auth-door.is-ms { grid-column: 1; grid-row: 2 / 5; }
.auth-door.is-audiam { grid-column: 2; grid-row: 2 / 5; }
.auth-doors > .auth-alt {
  grid-column: 1 / -1; grid-row: 5;
  text-align: center; margin-top: clamp(1.5rem, 3vw, 2.75rem);
}

.auth-door {
  display: grid;
  grid-template-rows: subgrid;
  padding: clamp(1.8rem, 2.6vw, 2.4rem);
  border: 1px solid var(--line-ink);
  border-radius: 14px;
  background: #fff;
  color: var(--ink-text);
  box-shadow: 0 8px 24px rgba(15, 21, 18, 0.06);
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.35s var(--ease-out);
}
.auth-door:hover {
  box-shadow: 0 16px 34px rgba(15, 21, 18, 0.12);
  transform: translateY(-2px);
}

/* The two marks have different proportions — Audiam is a 5.11:1 single-line
   wordmark, Music Services a 3.07:1 two-line lockup — so matching their widths
   would leave the Audiam mark floating well above the other. Each is sized for
   optical balance instead and centred in the shared row, which puts both on the
   same horizontal band. If your marks have different ratios, tune these two
   heights until the logos look level and their widths land close together. */
.auth-door-logo { align-self: center; width: auto; }
.auth-door.is-ms .auth-door-logo { height: 42px; }
.auth-door.is-audiam .auth-door-logo { height: 26px; }
/* The Music Services door carries an SM mark, so its logo is wrapped; the
   wrapper is the grid item and takes the row, leaving the subgrid intact. */
.auth-door-mark { align-self: center; display: inline-flex; align-items: flex-start; }
.auth-door-mark .brand-sm { margin-left: 0.12rem; margin-top: 0.1rem; }

.auth-door-sub {
  align-self: start;
  margin-top: 0.45rem; /* with row-gap, totals the 1rem the logo needs below it */
  color: var(--ink-text-dim); font-size: 0.95rem; max-width: 34ch;
}
/* Text links, not pills: there is no primary action on this page, both doors
   are equal, and two filled buttons would make the choice harder, not easier. */
.auth-door-btn {
  align-self: end;
  display: inline-flex; align-items: center; gap: 0.5em; margin-top: 1.3rem;
  font-weight: 600; font-size: var(--step-1); line-height: 1.2;
  transition: color 0.3s;
}
.auth-door-btn .arr { transition: transform 0.35s var(--ease-out); }
.auth-door:hover .auth-door-btn .arr { transform: translateX(4px); }

/* house green for Music Services */
.auth-door.is-ms { border-color: #a8d6c2; background: linear-gradient(180deg, #fafdfb, #f2f9f6); }
.auth-door.is-ms:hover { border-color: #3f9d78; }
.auth-door.is-ms .auth-door-btn { color: #0b7a54; }
.auth-door.is-ms:hover .auth-door-btn { color: #085c3f; }

/* Audiam blue, matching the migration card on login.html */
.auth-door.is-audiam { border-color: #9fb0d8; background: linear-gradient(180deg, #fbfcfe, #f4f7fc); }
.auth-door.is-audiam:hover { border-color: #6381c1; }
.auth-door.is-audiam .auth-door-btn { color: #4a63a8; }
.auth-door.is-audiam:hover .auth-door-btn { color: #32477f; }

@media (max-width: 860px) {
  body.login-chooser .auth-aside { display: none; }
  body.login-chooser .auth-welcome { grid-template-columns: 1fr; }
  /* the dark band is gone, so the absolutely positioned top bar now sits on
     light paper: clear it with padding, and put its text back to ink */
  body.login-chooser .auth-main { padding-top: clamp(6rem, 12vh, 9rem); }
  body.login-chooser .auth-bar-alt { color: var(--ink-text-dim); }
  body.login-chooser .auth-bar-alt .text-link { color: #0b7a54; }
  /* stacked: nothing to align across, so each door returns to its own flow */
  .auth-doors {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    max-width: 28rem;
    row-gap: clamp(1.5rem, 3vw, 2.2rem);
  }
  .auth-doors-q { grid-column: 1; grid-row: auto; }
  .auth-door.is-ms, .auth-door.is-audiam { grid-column: 1; grid-row: auto; }
  .auth-door { grid-template-rows: none; row-gap: 0.55rem; }
  .auth-doors > .auth-alt { grid-column: 1; grid-row: auto; }
}