/* ==========================================================================
   AI MASTERBOX — static UI shell
   Mobile-first. No external assets, no fonts, no CDN.

   HEADER SAFETY CONTRACT (do not break):
   - The header lives in normal document flow (static), never fixed/absolute.
   - Top padding = safe-area inset + at least 24px of black space.
   - No ancestor of [data-logo] may use overflow:hidden.
   - No negative margins / negative top / translateY on the logo or wrappers.
   - --safe-top-test / --safe-left-test / --safe-right-test are TEST HOOKS:
     set them from devtools to emulate a notch inset.
   ========================================================================== */

:root {
  --black:        #000000;
  --near-black:   #050505;
  --ink:          #ffffff;
  --muted:        #9aa3a0;
  --green:        #22e06a;
  --green-bright: #2bff88;
  --purple:       #8b3dff;
  --purple-soft:  #a855f7;

  --font-display: "Arial Narrow", "Helvetica Neue", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-ui:      "Helvetica Neue", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Resolved safe-area values (test hook wins when set). */
  --safe-top:   var(--safe-top-test,   env(safe-area-inset-top, 0px));
  --safe-left:  var(--safe-left-test,  env(safe-area-inset-left, 0px));
  --safe-right: var(--safe-right-test, env(safe-area-inset-right, 0px));

  /* Guaranteed black space ABOVE the logo, on top of the inset. */
  --header-top-gap: 24px;
  --gutter: 20px;
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--black);
  color: var(--ink);
  /* NOTE: deliberately no overflow:hidden here — it would clip the logo. */
}

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100dvh;
  font-family: var(--font-ui);
  background:
    radial-gradient(120% 80% at 50% 0%, #070707 0%, var(--black) 62%),
    var(--black);
  position: relative;
  z-index: 0;
}

/* ---------- decorative background (never an ancestor of the logo) -------- */

.bg-decor {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;           /* safe: sibling of the header, not an ancestor */
}
.bg-glow {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .45;
}
.bg-glow--green {
  width: 70vmax; height: 70vmax;
  left: -22vmax; top: 22vh;
  background: radial-gradient(circle, rgba(34,224,106,.30) 0%, rgba(34,224,106,0) 66%);
}
.bg-glow--purple {
  width: 66vmax; height: 66vmax;
  right: -24vmax; top: 6vh;
  background: radial-gradient(circle, rgba(139,61,255,.28) 0%, rgba(139,61,255,0) 66%);
}
.bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(80% 60% at 50% 35%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(80% 60% at 50% 35%, #000 0%, transparent 78%);
}

/* ============================== HEADER ================================== */

.site-header {
  position: static;                 /* real layout height, normal flow */
  display: block;
  width: 100%;
  background: transparent;
  /* >= safe-area inset + 24px of black above the logo */
  padding-top:    calc(var(--safe-top) + var(--header-top-gap));
  padding-left:   calc(var(--safe-left) + var(--gutter));
  padding-right:  calc(var(--safe-right) + var(--gutter));
  padding-bottom: 18px;
  /* explicitly NOT overflow:hidden */
}

.header-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  text-decoration: none;
  color: inherit;
  /* no transforms, no negative offsets */
}
.logo:focus-visible {
  outline: 2px solid var(--green-bright);
  outline-offset: 6px;
  border-radius: 8px;
}

.logo-mark {
  display: block;
  height: clamp(20px, 6.6vw, 34px);
  width: auto;
  aspect-ratio: 132 / 48;          /* locked to the viewBox ratio */
  flex: none;
  filter: drop-shadow(0 0 10px rgba(34,224,106,.35));
}

.wordmark {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 87.5%;
  font-size: clamp(7.5px, 3.3vw, 15px);
  letter-spacing: .26em;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
}
/* Mobile: whole wordmark white (per mock-up). */
.wm-main, .wm-accent { color: var(--ink); }

/* ---------------------------- step indicator ---------------------------- */

.steps {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.step-pill {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: 6px 14px;
  border: 1px solid rgba(34,224,106,.65);
  border-radius: 999px;
  color: var(--green-bright);
  font-size: clamp(8px, 2.6vw, 11px);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.step-rail {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.step {
  display: flex;
  align-items: center;
  gap: 0;
}
.step + .step::before {
  content: "";
  display: block;
  width: clamp(10px, 3.4vw, 18px);
  height: 1px;
  background: rgba(34,224,106,.38);
}
.step-dot {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid rgba(34,224,106,.75);
  background: transparent;
  flex: none;
}
.step.is-active .step-dot {
  background: var(--green-bright);
  border-color: var(--green-bright);
  box-shadow: 0 0 10px rgba(43,255,136,.8);
}
.step-label { display: none; }

/* =============================== PAGE ================================== */

.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 6px calc(var(--safe-left) + var(--gutter)) 40px calc(var(--safe-right) + var(--gutter));
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  width: 100%;
}

.hero-copy { text-align: center; width: 100%; }

.headline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 87.5%;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .98;
  font-size: clamp(24px, 8.6vw, 44px);
}
.headline-l1, .headline-l2 { display: block; }
.headline-l1 { color: var(--ink); }
.headline-l2 {
  color: var(--green-bright);
  text-shadow: 0 0 26px rgba(43,255,136,.35);
}

.subcopy {
  display: none;                    /* desktop-only per mock-up */
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
  max-width: 30ch;
}

/* ------------------------------- portal --------------------------------- */

.hero-portal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.portal {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(160px, 66vw, 300px);
  max-width: 100%;
  aspect-ratio: 1 / 1;
  isolation: isolate;
}

.portal-halo,
.portal-ring,
.portal-base {
  position: absolute;
  display: block;
  pointer-events: none;
}

.portal-halo {
  inset: -9%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, rgba(43,255,136,.20) 0%, rgba(43,255,136,.06) 42%, rgba(139,61,255,.16) 66%, rgba(0,0,0,0) 74%);
  filter: blur(10px);
  animation: haloPulse 6s ease-in-out infinite;
}

.portal-ring {
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(43,255,136,.30);
  background:
    radial-gradient(circle at 50% 30%, rgba(43,255,136,.10) 0%, rgba(0,0,0,0) 60%),
    radial-gradient(circle at 50% 100%, rgba(139,61,255,.22) 0%, rgba(0,0,0,0) 62%);
  box-shadow:
    0 0 0 1px rgba(139,61,255,.16),
    0 0 46px rgba(34,224,106,.22),
    inset 0 0 60px rgba(34,224,106,.10);
}

/* holographic cylinder foot */
.portal-base {
  left: 4%;
  right: 4%;
  bottom: -7%;
  height: 22%;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(43,255,136,.34) 0%, rgba(139,61,255,.20) 55%, rgba(0,0,0,0) 100%);
  filter: blur(7px);
  opacity: .9;
}

.dropzone {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 82%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 2px dashed rgba(43,255,136,.62);
  background:
    radial-gradient(circle at 50% 40%, rgba(43,255,136,.08) 0%, rgba(0,0,0,.55) 62%, rgba(0,0,0,.85) 100%);
  color: var(--green-bright);
  cursor: pointer;
  text-align: center;
  padding: 8%;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.dropzone:hover,
.dropzone.is-dragover {
  border-color: var(--green-bright);
  border-style: solid;
  box-shadow: 0 0 42px rgba(43,255,136,.45), inset 0 0 40px rgba(43,255,136,.14);
}
.dz-icon {
  display: block;
  width: 28%;
  max-width: 56px;
  height: auto;
  aspect-ratio: 1 / 1;
  color: var(--green-bright);
}
.dz-title {
  color: var(--ink);
  font-size: clamp(11px, 3.6vw, 15px);
  font-weight: 600;
  line-height: 1.25;
}
.dz-cta {
  color: var(--green-bright);
  font-size: clamp(10px, 3.2vw, 13px);
  font-weight: 600;
}

.formats {
  display: inline-flex;
  align-items: center;
  gap: clamp(6px, 2.2vw, 10px);
  margin: 0;
  padding: 8px clamp(10px, 4vw, 16px);
  max-width: 100%;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-size: clamp(8px, 2.9vw, 12px);
  font-weight: 600;
  letter-spacing: clamp(.07em, .5vw, .16em);
  white-space: nowrap;
}
.fmt-glyph { display: block; width: clamp(13px, 5.5vw, 22px); height: auto; aspect-ratio: 24 / 16; color: var(--green); opacity: .85; flex: none; }
.fmt-text { color: #cfd6d3; }
.dot-sep { color: var(--green); }

/* ------------------------------ primary CTA ----------------------------- */

.primary-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 520px;
  padding: 18px 22px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--green-bright) 0%, var(--green) 100%);
  color: #041207;
  font-family: var(--font-ui);
  font-size: clamp(12px, 3.6vw, 16px);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 40px rgba(34,224,106,.32);
  transition: transform .16s ease, box-shadow .16s ease;
}
.primary-btn:hover { box-shadow: 0 12px 52px rgba(34,224,106,.46); }
.primary-btn:active { transform: translateY(1px); }
.primary-btn .dot-sep { color: #041207; }
.btn-icon { display: block; width: 20px; height: 20px; }

.footnote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 0;
  color: #6f7a76;
  font-size: clamp(10px, 3vw, 12px);
  line-height: 1.45;
  text-align: center;
}
.lock-icon { display: block; width: 14px; height: 14px; flex: none; color: var(--green); opacity: .8; }
.fn-break { display: block; }

.status {
  margin: 0;
  min-height: 1.2em;
  color: var(--green-bright);
  font-size: 12px;
  letter-spacing: .04em;
  text-align: center;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.visually-hidden:focus-visible + * { outline: 2px solid var(--green-bright); }

/* ============================== DESKTOP ================================= */

@media (min-width: 768px) {

  :root { --gutter: 28px; }

  .site-header {
    padding-top:   calc(var(--safe-top) + var(--header-top-gap));
    padding-bottom: 10px;
  }

  .header-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 12px 22px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 18px;
    background: rgba(255,255,255,.028);
    backdrop-filter: blur(6px);
  }

  .logo {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    margin: 0;
  }
  .logo-mark { height: clamp(26px, 2.6vw, 34px); }
  .wordmark {
    font-size: clamp(11px, 1.05vw, 14px);
    text-align: left;
  }
  .wm-main   { color: var(--ink); }
  .wm-accent { color: var(--green-bright); }

  .steps { flex-wrap: nowrap; }
  .step { gap: 8px; }
  .step + .step::before { width: clamp(12px, 1.5vw, 26px); margin: 0 8px; }
  /* 768-1023: not enough room for the full labelled rail -> pill + dots. */
  .step-pill { display: inline-flex; font-size: 10px; }
  .step-label {
    display: none;
    font-size: clamp(8px, .78vw, 10px);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.42);
    white-space: nowrap;
  }
  .step.is-active .step-label { color: var(--green-bright); }

  .page {
    padding-top: 24px;
    padding-bottom: 56px;
    gap: 28px;
  }

  .hero {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    min-height: 56vh;
  }

  .hero-copy { text-align: left; flex: 1 1 52%; }
  .headline { font-size: clamp(30px, 4.35vw, 62px); }
  .subcopy { margin-left: 0; margin-right: 0; font-size: clamp(15px, 1.2vw, 18px); max-width: 34ch; }

  .hero-portal { flex: 0 1 44%; gap: 26px; }
  .portal { width: clamp(280px, 32vw, 420px); }

  .dz-title { font-size: clamp(14px, 1.15vw, 17px); }
  .dz-cta {
    padding: 9px 18px;
    border: 1px solid rgba(43,255,136,.6);
    border-radius: 999px;
    font-size: clamp(11px, .95vw, 13px);
    margin-top: 4px;
  }
  .dropzone:hover .dz-cta { border-color: var(--green-bright); background: rgba(43,255,136,.10); }

  .formats { font-size: 12px; letter-spacing: .16em; }

  /* Scoped to the upload stage: on desktop the upload CTA lives inside the
     portal. Unscoped, this also hid the DOWNLOAD button on the result
     screen, which shares the .primary-btn class. */
  #stage-upload .primary-btn { display: none; }

  .footnote { font-size: 12px; }
  .fn-break { display: inline; }
}

@media (min-width: 1024px) {
  .headline { line-height: .94; }
  /* Full labelled progress rail (desktop mock-up) once there is room. */
  .step-pill  { display: none; }
  .step-label { display: block; }
  .step + .step::before { width: clamp(14px, 1.6vw, 26px); margin: 0 10px; }
}

/* ============================ ANIMATION ================================= */

@keyframes haloPulse {
  0%, 100% { opacity: .85; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.035); }
}

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

/* ==================================================================== */
/*  STAGES: processing, result, error                                    */
/*  Appended by the engine team. Nothing above this line is modified,    */
/*  so the header/logo rules stay exactly as verified.                   */
/* ==================================================================== */

.stage {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 max(20px, var(--safe-left)) 64px max(20px, var(--safe-right));
}
#stage-upload { max-width: none; padding-left: 0; padding-right: 0; }

.stage-title {
  font-size: clamp(28px, 5vw, 44px);
  letter-spacing: .01em;
  text-transform: uppercase;
  text-align: center;
  margin: 8px 0 4px;
  color: #fff;
}
.stage-title--error { color: #ff6b6b; }
.stage-file {
  text-align: center;
  color: rgba(255,255,255,.55);
  font-size: 14px;
  margin: 0 0 28px;
  word-break: break-all;
}

/* ---------------------------------------------------------- processing */

.proc-steps { list-style: none; margin: 0 auto 28px; padding: 0; max-width: 420px; }
.proc-step {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 0;
  color: rgba(255,255,255,.38);
  font-size: 15px;
  transition: color .35s ease;
}
.proc-dot {
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25);
  flex: 0 0 auto;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.proc-step.is-done { color: rgba(255,255,255,.62); }
.proc-step.is-done .proc-dot { background: var(--green); border-color: var(--green); }
.proc-step.is-active { color: #fff; }
.proc-step.is-active .proc-dot {
  background: var(--green); border-color: var(--green);
  box-shadow: 0 0 0 5px rgba(43,255,136,.16);
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse { 50% { box-shadow: 0 0 0 10px rgba(43,255,136,0); } }

.proc-bar {
  height: 4px; border-radius: 999px;
  background: rgba(255,255,255,.10);
  overflow: hidden;
  max-width: 420px; margin: 0 auto 12px;
}
.proc-bar-fill {
  display: block; height: 100%; width: 2%;
  background: linear-gradient(90deg, var(--green), var(--purple));
  transition: width .6s ease;
}
.proc-elapsed {
  text-align: center; color: rgba(255,255,255,.45);
  font-size: 13px; margin: 0 0 24px;
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------- result */

.ab {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 22px 18px 18px;
  background: rgba(255,255,255,.025);
  margin-bottom: 26px;
}
.ab-toggle {
  display: flex; gap: 6px; padding: 5px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  max-width: 320px; margin: 0 auto 10px;
}
.ab-btn {
  flex: 1 1 0; padding: 11px 8px;
  border: 0; border-radius: 999px;
  background: transparent; color: rgba(255,255,255,.62);
  font: inherit; font-size: 14px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.ab-btn.is-active { background: var(--green); color: #04150b; }
.ab-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.ab-note {
  text-align: center; color: rgba(255,255,255,.42);
  font-size: 12.5px; line-height: 1.5; margin: 0 0 18px;
}

.player { display: flex; align-items: center; gap: 14px; }
.play-btn {
  width: 52px; height: 52px; flex: 0 0 auto;
  border-radius: 50%; border: 1px solid rgba(43,255,136,.45);
  background: rgba(43,255,136,.10); color: var(--green);
  cursor: pointer; display: grid; place-items: center;
}
.play-btn svg { width: 26px; height: 26px; }
.play-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.seek {
  flex: 1 1 auto; min-width: 0;
  -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 999px; background: rgba(255,255,255,.16);
  cursor: pointer;
}
.seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--green); border: 0; cursor: pointer;
}
.seek::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--green); border: 0; cursor: pointer;
}
.time {
  flex: 0 0 auto; font-size: 12.5px;
  color: rgba(255,255,255,.55);
  font-variant-numeric: tabular-nums;
}
.wave { display: none; }

.summary { list-style: none; margin: 0 0 26px; padding: 0; }
.summary li {
  position: relative;
  padding: 9px 0 9px 26px;
  color: rgba(255,255,255,.80);
  font-size: 15px; line-height: 1.5;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.summary li::before {
  content: ""; position: absolute; left: 4px; top: 16px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
}

#stage-result .primary-btn,
#stage-result .ghost-btn { max-width: 100%; }

/* The download is the whole point of the screen, so it sits directly under the
   player rather than below the summary, and it is allowed to shout a little. */
.download-cta {
  margin-top: 4px;
  box-shadow: 0 10px 44px rgba(34, 224, 106, .34);
  text-decoration: none;   /* it is an <a>, but it reads as a button */
}
.download-note {
  margin: 10px 0 26px;
  text-align: center;
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
}
.summary { margin-top: 4px; }

.ghost-btn { max-width: 100%; }

.ghost-btn {
  display: block; width: 100%; max-width: 420px;
  margin: 18px auto 0; padding: 14px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: transparent; color: rgba(255,255,255,.72);
  font: inherit; font-size: 14px; letter-spacing: .05em;
  text-transform: uppercase; cursor: pointer;
}
.ghost-btn:hover { border-color: rgba(255,255,255,.34); color: #fff; }
.ghost-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.error-message {
  text-align: center; color: rgba(255,255,255,.78);
  font-size: 15px; line-height: 1.6; margin: 0 auto 8px; max-width: 460px;
}

@media (prefers-reduced-motion: reduce) {
  .proc-step.is-active .proc-dot { animation: none; }
  .proc-bar-fill { transition: none; }
  .stage { scroll-behavior: auto; }
}

@media (min-width: 768px) {
  .stage { padding-bottom: 80px; }
  .player { gap: 18px; }
}

/* Completed steps in the header rail. */
.step-rail .step.is-done .step-dot {
  background: var(--green);
  border-color: var(--green);
  opacity: .55;
}
.step-rail .step.is-done .step-label { color: rgba(255,255,255,.45); }

/* ==================================================================== */
/*  HERO: headline accent + benefit bullets                              */
/* ==================================================================== */

/* "AI" picked out, without breaking the condensed face. */
.headline-l1 em {
  font-style: normal;
  color: var(--green-bright);
  text-shadow: 0 0 22px rgba(43, 255, 136, .35);
}

/* Both headline lines must stay on ONE line at every width. The size is
   therefore derived from the available width rather than from a vw guess:
   `--headline-k` is the measured ratio of rendered line width to font size for
   the longest line ("DROP YOUR AI TRACK."), plus a margin for fonts that render
   a little wider than the local Arial Narrow fallback. */
:root { --headline-k: 10.2; }   /* measured 9.47 + ~8% margin */

.headline-l1,
.headline-l2 {
  display: block;
  white-space: nowrap;
}

.headline {
  font-size: clamp(13px, calc((100vw - 44px) / var(--headline-k)), 44px);
}

/* --- the lead + bullets ------------------------------------------------- */

/* The lead is a transformation, so it is built to be *scanned*: the eye should
   land on the destination, not on the sentence. "AI-generated" is deliberately
   dimmed and "release-ready" carries the accent colour and the glow. */
.subcopy {
  display: block;
  margin: 14px auto 0;
  color: rgba(255, 255, 255, .55);
  font-size: clamp(14px, 3.9vw, 17px);
  line-height: 1.45;
  letter-spacing: .002em;
  max-width: 30ch;
}

.subcopy .from {
  color: rgba(255, 255, 255, .62);
  font-weight: 600;
  /* "AI-generated" must never be split at its hyphen. */
  white-space: nowrap;
}

.subcopy .to {
  color: var(--green-bright);
  font-weight: 700;
  text-shadow: 0 0 20px rgba(43, 255, 136, .32);
  white-space: nowrap;
}

/* A short arrow that carries the "from -> to" without spelling it out twice. */
.subcopy .arrow {
  display: inline-block;
  width: 1.7em;
  height: .6em;
  margin: 0 .34em -.02em .38em;
  vertical-align: baseline;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, .28), var(--green-bright));
  -webkit-mask: var(--arrow-mask) no-repeat center / contain;
  mask: var(--arrow-mask) no-repeat center / contain;
}
:root {
  --arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 12'%3E%3Cpath d='M0 6h27M22 1.5 27.5 6 22 10.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* The reason to care, one line, deliberately quieter than the promise. */
.subcopy-why {
  margin: 7px auto 0;
  max-width: 40ch;
  color: rgba(255, 255, 255, .46);
  font-size: clamp(12.5px, 3.4vw, 14px);
  line-height: 1.5;
  /* Even line lengths: without this the break stranded a single word. */
  text-wrap: balance;
}

/* Keep the promise itself from ever breaking mid-phrase. */
.subcopy { text-wrap: balance; }

.benefits {
  list-style: none;
  margin: 18px auto 0;
  padding: 0;
  display: grid;
  gap: 11px;
  width: fit-content;
  max-width: 100%;
  text-align: left;
}

.benefits li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 11px;
  color: var(--muted);
  font-size: clamp(13px, 3.6vw, 15px);
  line-height: 1.45;
}

.benefits strong {
  color: rgba(255, 255, 255, .94);
  font-weight: 600;
}

/* A small neon tick that echoes the brand rather than a generic bullet. */
.tick {
  position: relative;
  width: 18px;
  height: 18px;
  margin-top: .12em;
  border-radius: 6px;
  background: rgba(43, 255, 136, .10);
  border: 1px solid rgba(43, 255, 136, .38);
  box-shadow: 0 0 12px rgba(43, 255, 136, .14);
}
.tick::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2.5px;
  width: 5px;
  height: 9px;
  border: solid var(--green-bright);
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(43deg);
}

@media (min-width: 768px) {
  /* In the left-hand hero column the headline is bounded by that column,
     not by the viewport. */
  .headline { font-size: clamp(24px, calc((52vw - 80px) / var(--headline-k)), 62px); }
  .subcopy {
    margin-left: 0;
    margin-right: 0;
    font-size: clamp(15px, 1.28vw, 19px);
    /* Wide enough for "Van AI-powered of AI-generated -> release-ready."
       to sit on one line in the hero column. */
    max-width: none;
  }
  .subcopy-why {
    margin-left: 0;
    margin-right: 0;
    font-size: clamp(13px, 1.05vw, 15px);
    max-width: 52ch;
  }
  .benefits {
    margin-left: 0;
    margin-right: 0;
    gap: 15px;
    margin-top: 26px;
  }
  .benefits li { font-size: clamp(14.5px, 1.32vw, 17px); gap: 13px; }
  .tick { width: 20px; height: 20px; border-radius: 7px; }
  .tick::after { left: 5.8px; top: 3px; width: 5.4px; height: 10px; }
}

@media (min-width: 1280px) {
  .headline { font-size: clamp(24px, calc((52vw - 110px) / var(--headline-k)), 62px); }
}

/* The upload CTA sat flush against the WAV / AIFF / FLAC pill (measured 0px)
   and almost against the footnote (4px). Both need room to breathe. Scoped to
   the upload stage so the download CTA keeps its own spacing. */
#stage-upload .primary-btn {
  margin-top: clamp(20px, 5.4vw, 30px);
  margin-bottom: clamp(12px, 3.4vw, 18px);
}

/* ==================================================================== */
/*  BRAND LOCKUP: company mark + product name                            */
/*  The .logo element itself is untouched — every verified header         */
/*  measurement (top >= inset+24, nothing clipped, ratio 2.75) still      */
/*  holds, because MASTERBOX is a sibling, never a parent.               */
/* ==================================================================== */

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.brand-rule {
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
}

.product-badge {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: clamp(10px, 2.7vw, 12px);
  letter-spacing: .34em;
  text-indent: .34em;          /* balances the trailing letter-space */
  text-transform: uppercase;
  color: var(--green-bright);
  text-shadow: 0 0 18px rgba(43, 255, 136, .3);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .brand { flex-direction: row; gap: 14px; }
  .brand-rule { width: 1px; height: 20px;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.22), transparent); }
  .product-badge { font-size: clamp(10px, .95vw, 12px); letter-spacing: .3em; }
}

/* ==================================================================== */
/*  THREE-WAY LISTENING DEMO                                             */
/*  Proof before the upload. Compact on purpose: it must not compete     */
/*  with the dropzone, so it reuses the A/B control language the user    */
/*  will meet again on the result screen.                                */
/* ==================================================================== */

.demo {
  width: 100%;
  max-width: 560px;
  margin: clamp(30px, 7vw, 46px) auto 0;
  padding: clamp(18px, 4.5vw, 22px) clamp(16px, 4vw, 22px) clamp(16px, 4vw, 20px);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 20px;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(43, 255, 136, .05), transparent 60%),
    rgba(255, 255, 255, .022);
  text-align: center;
}
.demo[hidden] { display: none; }

.demo-title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 87.5%;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: clamp(15px, 4vw, 18px);
  color: rgba(255, 255, 255, .90);
}
.demo-dot { color: var(--green-bright); }

/* --- the three-way switch ----------------------------------------------- */

.demo-switch {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 0 0 16px;
  background: rgba(0, 0, 0, .45);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 999px;
}

.demo-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, .58);
  font: inherit;
  font-size: clamp(11px, 3vw, 12.5px);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.demo-btn:hover { color: rgba(255, 255, 255, .82); }
.demo-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.demo-btn.is-active { background: var(--green); color: #04150b; }
/* The product's own result gets the accent even when it is not selected. */
.demo-btn[data-key="masterbox"]:not(.is-active) { color: var(--green-bright); }

/* --- transport ----------------------------------------------------------- */

.demo-player { display: flex; align-items: center; gap: 12px; }

.demo-play {
  width: 42px; height: 42px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(43, 255, 136, .45);
  background: rgba(43, 255, 136, .10);
  color: var(--green-bright);
  cursor: pointer;
}
.demo-play svg { width: 21px; height: 21px; }
.demo-play:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.demo-play.is-loading { color: rgba(255, 255, 255, .45); cursor: progress; }
.demo-play.is-loading svg { animation: demo-pulse 1s ease-in-out infinite; }
@keyframes demo-pulse { 50% { opacity: .35; } }

.demo-bar {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  cursor: pointer;
}
.demo-bar:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.demo-bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green), var(--green-bright));
}

.demo-time {
  flex: 0 0 auto;
  font-size: 12px;
  color: rgba(255, 255, 255, .50);
  font-variant-numeric: tabular-nums;
}

.demo-note {
  margin: 12px 0 0;
  font-size: clamp(11.5px, 3vw, 12.5px);
  line-height: 1.5;
  color: rgba(255, 255, 255, .40);
}

@media (prefers-reduced-motion: reduce) {
  .demo-play.is-loading svg { animation: none; }
  .demo-bar-fill { transition: none; }
}

/* ==================================================================== */
/*  ASSURANCES AT THE POINT OF ACTION                                    */
/*  A visitor about to upload unreleased music is weighing three things: */
/*  what it costs them, how long it takes, and whether they keep their   */
/*  rights. Those answers belong next to the button, not in a footer.    */
/* ==================================================================== */

.assurances {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(10px, 3vw, 26px);
  margin: 0 auto;
  padding: 0 max(16px, var(--safe-left)) 0 max(16px, var(--safe-right));
  max-width: 620px;
}

.assurances li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, .56);
  font-size: clamp(11.5px, 3vw, 13px);
  line-height: 1.3;
  white-space: nowrap;
}

.assurances svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--green);
  opacity: .85;
}

/* The risk reversal. This is the sentence that removes the last hesitation,
   and every word of it is something the engine actually does. */
.reassure {
  max-width: 46ch;
  margin: 14px auto 0;
  padding: 0 max(16px, var(--safe-left)) 0 max(16px, var(--safe-right));
  text-align: center;
  font-size: clamp(12px, 3vw, 13.5px);
  line-height: 1.55;
  color: rgba(255, 255, 255, .52);
  text-wrap: pretty;
}
.reassure strong {
  display: block;
  margin-top: 5px;
  color: rgba(255, 255, 255, .80);
  font-weight: 600;
}

@media (min-width: 768px) {
  .assurances { gap: 30px; }
  .assurances li { font-size: 13.5px; }
  .reassure { margin-top: 16px; max-width: 54ch; font-size: 14px; }
}

/* ==================================================================== */
/*  LANGUAGE SWITCHER                                                    */
/* ==================================================================== */

.lang {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 999px;
  background: rgba(0, 0, 0, .4);
}

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, .55);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.lang-btn:hover { color: rgba(255, 255, 255, .85); }
.lang-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.lang-btn.is-active { background: rgba(43, 255, 136, .14); color: var(--green-bright); }

.lang-flag {
  width: 18px;
  height: 13px;
  flex: 0 0 auto;
  border-radius: 2px;
  display: block;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14);
}

/* On phones the label would push the row too wide; the flag carries it. */
.lang-label { display: none; }

@media (min-width: 1024px) {
  .lang-label { display: inline; }
}

/* ==================================================================== */
/*  MOBILE OPTIMISATION                                                  */
/*  Driven by measurement on a 390x844 phone, not by eye.                */
/* ==================================================================== */

/* The language chips painted at 36x23 px. Anything under ~44 px is hard to hit
   reliably with a thumb, but growing the chip would add height to a header that
   is already 21% of the viewport. So the *hit area* is extended past the paint
   instead: the chip stays slim, the target becomes 45 px tall. */
.lang-btn { position: relative; }
.lang-btn::after {
  content: "";
  position: absolute;
  inset: -11px -3px;
  border-radius: 999px;
}
@media (max-width: 767px) {
  .lang-btn::after { inset: -11px -4px; }
}

@media (max-width: 767px) {
  /* Reclaim header height: it was 181 px before any content appeared. */
  .header-inner { gap: 11px; }
  .brand { gap: 8px; }
  .lang { padding: 2px; gap: 2px; }
  /* 18px flag + padding gives a 40px chip; the hit area below widens it to 46. */
  .lang-btn { padding: 5px 11px; }

  /* Tighten the hero so the drop target sits higher in the fold. */
  .subcopy { margin-top: 11px; }
  .subcopy-why { margin-top: 6px; }
  .benefits { margin-top: 15px; gap: 9px; }
  .benefits li { line-height: 1.4; }
  .hero { gap: 20px; }
  .hero-portal { gap: 16px; }

  /* Full-width, comfortable controls on the result screen. */
  .ab-btn { padding: 14px 8px; }   /* 43px measured; 44 is the floor */
  .play-btn { width: 56px; height: 56px; }
  .seek { height: 6px; }
  .seek::-webkit-slider-thumb { width: 20px; height: 20px; }
  .seek::-moz-range-thumb { width: 20px; height: 20px; }
  .demo-play { width: 48px; height: 48px; }
  .demo-btn { padding: 12px 5px; }
  .ghost-btn { padding: 15px 20px; }
}

/* Phones in landscape are short: stop the portal eating the whole viewport. */
@media (max-width: 900px) and (orientation: landscape) {
  .portal { max-width: min(64vh, 100%); }
  .site-header { padding-bottom: 10px; }
}

/* iOS: keep the whole app inside the visual viewport and stop the page from
   rubber-banding horizontally while dragging a file over the dropzone. */
html, body { overscroll-behavior-x: none; }

/* The download label wrapped to two lines on a 390px phone. Tightening the
   tracking keeps it on one line without shrinking the button. */
@media (max-width: 767px) {
  .download-cta { letter-spacing: .10em; font-size: clamp(12px, 3.4vw, 15px); }
}

/* ====================== DESKTOP AMBIENCE ===============================
   The glows are sized in vmax with negative offsets. On a phone 70vmax is
   wider than the screen, so the gradient peak lands under the content. On a
   desktop the same rule parks both peaks in the left and right margins —
   green fades out around x=520 and purple only starts near x=980 on a 1440
   viewport — leaving the middle, where the hero actually sits, on pure
   black. Anchor the peaks a fixed distance either side of centre so they
   stay over the 1180px content column at any width, and lift the opacity to
   compensate for the far larger area they are spread across. */
@media (min-width: 1024px) {
  .bg-glow {
    filter: blur(90px);
    opacity: .6;
    top: 50%;
    left: 50%;
    right: auto;
  }
  .bg-glow--green {
    width: min(1180px, 92vw);
    height: min(1180px, 92vw);
    transform: translate(calc(-50% - 290px), -52%);
    background: radial-gradient(circle, rgba(34,224,106,.34) 0%, rgba(34,224,106,0) 70%);
  }
  .bg-glow--purple {
    width: min(1060px, 84vw);
    height: min(1060px, 84vw);
    transform: translate(calc(-50% + 310px), -58%);
    background: radial-gradient(circle, rgba(139,61,255,.32) 0%, rgba(139,61,255,0) 70%);
  }
}

/* ====================== DESKTOP HEADER OVERFLOW =========================
   The header row lays out brand / language / rail with space-between, and
   none of the three can shrink: the step labels are white-space:nowrap and
   flex items default to min-width:auto. At >=1024 the full labelled rail
   turned on while the bar is capped at max-width:1180, so the row needed
   ~1257px in 1178px and DOWNLOAD rendered outside the rounded border at
   every desktop width.

   The widest viewports are the tightest case, not the narrowest: the bar
   stops growing at 1180 but the vw-based clamps keep growing until they cap,
   which left only 5px of slack at 1920. So trim the purely decorative parts
   (connector length, tracking, gaps), hold the labelled rail back until
   1200px where it genuinely fits, and keep wrap as a backstop so nothing can
   spill past the border again. */
@media (min-width: 1024px) {
  .header-inner {
    flex-wrap: wrap;
    row-gap: 10px;
    column-gap: 16px;
  }
  .header-inner > * { min-width: 0; }
  .steps { flex: 0 1 auto; }
}

/* 1024-1199: the labelled rail does not fit next to the brand and the five
   language buttons, so keep the compact pill + dots the design already has. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .step-pill  { display: inline-flex; }
  .step-label { display: none; }
}

@media (min-width: 1200px) {
  .step + .step::before { width: clamp(10px, 1.1vw, 14px); margin: 0 6px; }
  .step-label { letter-spacing: .10em; }
  .step { gap: 6px; }
}