/* Hallmark · genre: atmospheric · macrostructure: custom broadcast build (asymmetric hero / bleed strip / signal-path rail / tracklist / spec-sheet) · theme: custom navy #070D1A + on-air orange · nav: N5 floating pill · footer: Ft2 inline · enrichment: Tier-A CSS phone mockup (brief-mandated) */

    /* ---------- 1. tokens ---------- */
    :root {
      /* color — navy ramp anchored on the mandated #070D1A */
      --color-bg:        #070D1A;  /* page base (mandated) */
      --color-surface-1: #0C1526;  /* cards, nav pill, elevated rows */
      --color-surface-2: #12203A;  /* hover / higher elevation */
      --color-screen:    #0A1224;  /* phone screen background */
      --color-line:      #1E2C47;  /* hairlines, borders */
      --color-ink:       #F2F5FB;  /* primary text */
      --color-muted:     #A6B3C9;  /* secondary text */
      --color-faint:     #7E8DA6;  /* decorative mono labels, track numbers */
      --color-accent:      #F97316; /* warm “on air” orange */
      --color-accent-bright:#FDBA74; /* accent text on elevated surfaces */
      --color-on-accent: #070D1A;  /* text on orange fills — ALWAYS navy, never white */
      --color-live:      #FF6B6B;  /* ON AIR / REC status red only */

      /* fonts */
      --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
      --font-body: 'Inter', system-ui, -apple-system, sans-serif;
      --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

      /* type scale */
      --text-hero: clamp(2.625rem, 7vw + 1rem, 6rem);
      --text-h2: clamp(2.25rem, 4vw, 3.5rem);
      --text-statement: clamp(2.5rem, 4.5vw, 4.25rem);
      --text-feature-title: 1.5rem;
      --text-body-lg: 1.125rem;
      --text-label: 0.6875rem;   /* 11px mono labels */
      --text-label-lg: 0.75rem;  /* 12px mono labels */

      /* spacing — 4pt scale */
      --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
      --space-5: 24px; --space-6: 32px; --space-8: 48px; --space-10: 64px;
      --space-12: 80px; --space-16: 104px; --space-20: 128px;

      /* radii */
      --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px;
      --radius-phone: 46px; --radius-pill: 999px;

      /* motion */
      --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
      --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
      --dur-fast: 150ms; --dur-med: 250ms;

      /* layout */
      --container: 1120px;
      --gutter: clamp(20px, 5vw, 48px);
    }

    /* ---------- 2. base / reset ---------- */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: smooth; }
    html, body { overflow-x: clip; }

    body {
      background: var(--color-bg);
      color: var(--color-ink);
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }

    svg { display: block; }
    a { color: inherit; text-decoration: none; }
    ul[role="list"], ol[role="list"] { list-style: none; }

    [id] { scroll-margin-top: 88px; }

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

    /* display headings — authored sentence case; Bebas renders all caps */
    h1, h2, h3 {
      font-family: var(--font-display);
      font-weight: 400;
      font-style: normal;
      letter-spacing: .02em;
      overflow-wrap: anywhere; /* safety net only — hero clamp floor prevents mid-word wraps */
      min-width: 0;
    }

    /* mono status labels — authored uppercase in the markup */
    .kicker {
      font: 500 var(--text-label) var(--font-mono);
      letter-spacing: .14em;
      color: var(--color-faint);
    }

    /* skip link — first in body, visible on focus */
    .skip-link {
      position: fixed;
      top: 12px;
      left: 12px;
      z-index: 20;
      translate: 0 -300%;
      background: var(--color-accent);
      color: var(--color-on-accent);
      font: 600 1rem var(--font-body);
      padding: 10px 18px;
      border-radius: var(--radius-sm);
      white-space: nowrap;
    }
    .skip-link:focus-visible { translate: 0 0; }

    /* ---------- 3. nav — floating pill (N5) ---------- */
    .nav {
      position: fixed;
      top: 16px;
      left: 50%;
      translate: -50% 0;
      z-index: 10;
      display: flex;
      align-items: center;
      gap: var(--space-5);
      background: rgba(12, 21, 38, 0.88); /* rgba of --color-surface-1 */
      border: 1px solid var(--color-line);
      border-radius: var(--radius-pill);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      padding: 10px 12px 10px 20px;
    }
    .nav__brand {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      font-family: var(--font-display);
      font-size: 1.25rem;
      letter-spacing: .04em;
      line-height: 1;
    }
    .nav__logo {
      width: 28px;
      height: 28px;
      border-radius: 7px;
      flex: none;
    }
    .nav__dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--color-live);
    }
    .nav__links { display: flex; gap: var(--space-5); }
    .nav__links a {
      font: 500 var(--text-label-lg) var(--font-mono);
      letter-spacing: .14em;
      color: var(--color-muted);
      white-space: nowrap;
      padding: 12px 0;  /* ≥44px tap target */
      margin: -12px 0;  /* offset the padding so pill layout is unchanged */
      transition: color var(--dur-fast) var(--ease-out);
    }
    .nav__links a:hover { color: var(--color-ink); }
    .nav__cta {
      font: 500 var(--text-label-lg) var(--font-mono);
      letter-spacing: .14em;
      color: var(--color-on-accent);
      background: var(--color-accent);
      padding: 10px 18px;
      border-radius: var(--radius-pill);
      white-space: nowrap;
      transition: background-color var(--dur-fast) var(--ease-out);
    }
    .nav__cta:hover { background: var(--color-accent-bright); }

    /* ---------- 4. hero — asymmetric split ---------- */
    .hero {
      position: relative;
      padding: 128px 0 96px;
    }
    /* the one gradient on the page — static “studio lamp” behind the phone column */
    .hero::before {
      content: "";
      position: absolute;
      top: 24px;
      right: -6%;
      width: min(46vw, 620px);
      aspect-ratio: 1;
      border-radius: 50%;
      background: radial-gradient(closest-side, rgba(249, 115, 22, 0.13), transparent 70%); /* rgba of --color-accent */
      pointer-events: none;
      z-index: 0;
    }
    .hero__grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: var(--space-10);
      align-items: start;
    }
    .hero__rec {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      font: 500 var(--text-label) var(--font-mono);
      letter-spacing: .14em;
      color: var(--color-faint);
    }
    .rec-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--color-live);
    }
    .hero h1 {
      margin-top: var(--space-5);
      font-size: var(--text-hero);
      line-height: .95;
      letter-spacing: .02em;
    }
    .accent { color: var(--color-accent); }
    .hero__sub {
      margin-top: var(--space-5);
      font-size: var(--text-body-lg);
      color: var(--color-muted);
      max-width: 34rem;
    }
    .hero__cta {
      margin-top: var(--space-8);
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--space-5);
    }
    .text-link {
      font-weight: 600;
      color: var(--color-accent-bright);
      text-decoration: underline;
      text-underline-offset: 4px;
      white-space: nowrap;
      padding-block: 9px;   /* ≥44px tap target */
      margin-block: -9px;   /* offset the padding so layout is unchanged */
      transition: color var(--dur-fast) var(--ease-out);
    }
    .text-link:hover { color: var(--color-ink); }
    .hero__claim {
      margin-top: var(--space-6);
      font: 500 var(--text-label) var(--font-mono);
      letter-spacing: .14em;
      color: var(--color-faint);
    }
    .hero__phone { margin-top: var(--space-8); display: flex; justify-content: center; }

    /* ---------- 5. phone mockup (role="img" illustration) ---------- */
    .phone {
      position: relative;
      width: min(300px, 78vw);
      aspect-ratio: 9 / 19.3;
      background: var(--color-surface-2);
      border-radius: var(--radius-phone);
      padding: 10px;
      box-shadow: 0 24px 60px rgba(0, 0, 0, .45); /* tight dark shadow, not a glow */
    }
    .phone__island {
      position: absolute;
      top: 20px;
      left: 50%;
      translate: -50% 0;
      width: 84px;
      height: 24px;
      border-radius: var(--radius-pill);
      background: var(--color-bg);
      z-index: 2;
    }
    .screen {
      height: 100%;
      border-radius: 36px;
      background: var(--color-screen);
      overflow: hidden;
      padding: 52px 18px 18px;
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
    }
    .onair-chip {
      align-self: flex-start;
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      border: 1px solid var(--color-line);
      border-radius: var(--radius-pill);
      padding: 6px 12px;
      font: 500 var(--text-label) var(--font-mono);
      letter-spacing: .16em;
      color: var(--color-live);
    }
    .onair-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--color-live);
      box-shadow: 0 0 10px rgba(255, 107, 107, .6); /* rgba of --color-live — the lamp */
      animation: live-pulse 2s infinite;
    }
    .screen__head { display: flex; flex-direction: column; gap: var(--space-1); }
    .screen__title {
      font-family: var(--font-display);
      font-size: 1.75rem;
      line-height: 1.05;
      letter-spacing: .02em;
    }
    .screen__meta, .screen__hint {
      font: 500 var(--text-label) var(--font-mono);
      letter-spacing: .12em;
      color: var(--color-faint);
      font-variant-numeric: tabular-nums;
    }
    /* host chips stack vertically — two chips never share the narrow screen row */
    .hosts {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-2);
    }
    .host {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      font: 500 var(--text-label) var(--font-mono);
      letter-spacing: .1em;
      color: var(--color-muted);
      border: 1px solid var(--color-line);
      border-radius: var(--radius-pill);
      padding: 6px 10px;
      white-space: nowrap;
    }
    .host--speaking { border-color: var(--color-accent); color: var(--color-accent-bright); }
    .host__ava, .host__jor {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 10px;
      flex: none;
    }
    .host__ava { background: var(--color-accent); color: var(--color-on-accent); }
    .host__jor { border: 1px solid var(--color-line); color: var(--color-muted); }
    .progress { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
    .progress__track {
      height: 4px;
      border-radius: var(--radius-pill);
      background: var(--color-line);
    }
    .progress__fill {
      width: 36%;
      height: 100%;
      border-radius: inherit;
      background: var(--color-accent);
    }
    .progress__time {
      display: flex;
      justify-content: space-between;
      font: 500 var(--text-label) var(--font-mono);
      color: var(--color-faint);
      font-variant-numeric: tabular-nums;
    }
    .transport {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-6);
    }
    .transport__btn {
      all: unset;
      position: relative;
      cursor: default;
      color: var(--color-muted);
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
    }
    .transport__play {
      all: unset;
      cursor: default;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: var(--color-accent);
      color: var(--color-on-accent);
      display: grid;
      place-items: center;
    }
    .transport__num {
      position: absolute;
      right: 2px;
      bottom: 0;
      font: 500 8px/1 var(--font-mono);
      letter-spacing: .05em;
      color: var(--color-faint);
      font-variant-numeric: tabular-nums;
    }

    /* ---------- 6. waveform + keyframes + reduced-motion ---------- */
    /* Height rule: every .waveform instance MUST declare an explicit height —
       bar heights are percentages and only resolve against a definite parent. */
    .waveform {
      display: flex;
      align-items: center;
      gap: 3px;
      pointer-events: none;
    }
    .waveform span {
      width: 3px;
      border-radius: var(--radius-pill);
      background: var(--color-accent);
      height: var(--h, 30%);
    }
    .waveform--live {
      height: 88px;             /* inside the phone screen */
      justify-content: space-between; /* bars span the full screen width */
    }
    .waveform--static {
      height: 44px;             /* ON AIR strip backdrop */
      justify-content: space-between;
    }
    .waveform--live span {
      animation: wave-pulse 1.3s var(--ease-in-out) infinite;
      animation-delay: calc(var(--i, 0) * -0.12s);
      transform-origin: center;
    }
    @keyframes wave-pulse {
      0%, 100% { transform: scaleY(0.3); }
      50%      { transform: scaleY(1); }
    }
    /* ON AIR / REC lamp — pulse opacity only (transform stays untouched) */
    @keyframes live-pulse {
      0%, 100% { opacity: 1; }
      50%      { opacity: .35; }
    }
    @media (prefers-reduced-motion: reduce) {
      .waveform--live span { animation: none; }  /* bars keep their static --h heights */
      .onair-dot, .strip__dot { animation: none; }  /* lamps stop pulsing, stay lit */
    }

    /* ---------- 7. ON AIR strip — full-bleed divider band ---------- */
    .strip {
      position: relative;
      background: var(--color-surface-1);
      border-block: 1px solid var(--color-line);
      padding: 14px 0;
    }
    .strip .waveform--static {
      position: absolute;
      inset-inline: 0;
      top: 50%;
      translate: 0 -50%;
      opacity: .2; /* audit fix: keeps 12px live-red strip text ≥5:1 where bars pass beneath */
      pointer-events: none;
    }
    .strip__inner {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: var(--space-2) var(--space-5);
    }
    .strip__left {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font: 500 var(--text-label-lg) var(--font-mono);
      letter-spacing: .18em;
      color: var(--color-live);
      white-space: nowrap;
    }
    .strip__dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--color-live);
      box-shadow: 0 0 12px rgba(255, 107, 107, .6); /* rgba of --color-live — the one allowed glow, it is the lamp */
      animation: live-pulse 2s infinite;
    }
    .strip__right {
      position: relative;
      z-index: 1;
      font: 500 var(--text-label) var(--font-mono);
      letter-spacing: .14em;
      color: var(--color-muted);
    }

    /* ---------- 8. how it works — signal-path rail ---------- */
    .how { padding: 96px 0; }
    .section-head { max-width: 40rem; }
    .section-head h2 {
      margin-top: var(--space-3);
      font-size: var(--text-h2);
      line-height: 1;
    }
    .section-head > p {
      margin-top: var(--space-3);
      color: var(--color-muted);
    }
    .steps {
      position: relative;
      margin-top: var(--space-10);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-8);
    }
    .steps::before {
      content: "";
      position: absolute;
      top: 20px;
      left: 8%;
      right: 8%;
      height: 1px;
      background: var(--color-line);
    }
    .step { position: relative; min-width: 0; }
    .step__chip {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--color-bg);
      border: 1px solid var(--color-accent);
      color: var(--color-accent);
      font: 500 var(--text-label-lg) var(--font-mono);
      font-variant-numeric: tabular-nums;
    }
    .step__title {
      margin-top: var(--space-4);
      font-size: 1.375rem;
      line-height: 1.05;
    }
    .step__copy {
      margin-top: var(--space-3);
      color: var(--color-muted);
    }

    /* ---------- 9. features — the tracklist ---------- */
    .features { padding: 96px 0 104px; }
    .tracklist { margin-top: var(--space-10); }
    .track {
      display: grid;
      grid-template-columns: 72px minmax(0, 1fr) auto;
      gap: var(--space-5);
      padding: var(--space-6) 0;
      border-top: 1px solid var(--color-line);
      align-items: baseline;
    }
    .track:last-child { border-bottom: 1px solid var(--color-line); }
    .track__no {
      font: 500 var(--text-label) var(--font-mono);
      letter-spacing: .14em;
      color: var(--color-faint);
      font-variant-numeric: tabular-nums;
    }
    .track__title {
      font-size: var(--text-feature-title);
      line-height: 1.05;
    }
    .track__copy {
      margin-top: var(--space-2);
      color: var(--color-muted);
      max-width: 56ch;
    }
    .track__meta {
      font: 500 var(--text-label) var(--font-mono);
      letter-spacing: .14em;
      color: var(--color-faint);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    /* ---------- 10. privacy + the deal — bleed statement block ---------- */
    .privacy {
      background: var(--color-surface-1);
      padding: 112px 0;
    }
    .privacy__grid {
      display: grid;
      grid-template-columns: 1.38fr 1fr;
      gap: var(--space-10);
      align-items: center;
    }
    .privacy__statement {
      margin-top: var(--space-4);
      font-size: var(--text-statement);
      line-height: 1;
    }
    .privacy__copy {
      margin-top: var(--space-5);
      color: var(--color-muted);
      max-width: 58ch;
    }
    .deal { border-bottom: 1px solid var(--color-line); }
    .deal .kicker { display: block; margin-bottom: var(--space-4); }
    .spec {
      display: flex;
      justify-content: space-between;
      gap: var(--space-4);
      border-top: 1px solid var(--color-line);
      padding: var(--space-4) 0;
      font: 500 var(--text-label-lg) var(--font-mono);
      letter-spacing: .14em;
    }
    .spec dt { color: var(--color-muted); }
    .spec dd {
      color: var(--color-ink);
      text-align: right;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    /* ---------- 11. final CTA — narrow centered close ---------- */
    .cta { padding: 128px 0; }
    .cta__inner {
      max-width: 720px;
      margin-inline: auto;
      text-align: center;
    }
    .cta h2 {
      font-size: var(--text-h2);
      line-height: 1;
    }
    .cta__sub {
      margin-top: var(--space-4);
      color: var(--color-muted);
    }
    .cta .store-badge { margin-top: var(--space-6); }
    .cta__note {
      margin-top: var(--space-6);
      font: 500 var(--text-label) var(--font-mono);
      letter-spacing: .14em;
      color: var(--color-faint);
    }

    /* Official Apple App Store badge (app-store-badge.svg) — white border per Apple's marketing guidelines for dark backgrounds */
    .store-badge {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: var(--color-surface-1);
      border: 1px solid var(--color-line);
      border-radius: 12px;
      padding: 10px 20px;
      color: var(--color-ink);
      transition: background-color var(--dur-fast) var(--ease-out);
    }
    .store-badge:hover { background: var(--color-surface-2); }
    .store-badge img { display: block; border: 1px solid rgba(255, 255, 255, .85); border-radius: 10.5px; }
    .store-badge__text {
      display: flex;
      flex-direction: column;
      text-align: left;
      line-height: 1.2;
    }
    .store-badge__text small {
      font: 500 var(--text-label) var(--font-mono);
      letter-spacing: .14em;
      color: var(--color-faint);
    }
    .store-badge__text strong {
      font-weight: 600;
      font-size: 1.125rem;
      color: var(--color-ink);
    }

    /* ---------- 12. footer — inline single line ---------- */
    .footer {
      border-top: 1px solid var(--color-line);
      padding: var(--space-6) 0;
    }
    .footer__inner {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      flex-wrap: wrap;
      gap: var(--space-2) var(--space-6);
    }
    .footer__left {
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: var(--space-2) var(--space-4);
    }
    .footer__brand {
      font-family: var(--font-display);
      font-size: 1rem;
      letter-spacing: .04em;
    }
    .footer__meta {
      font: 500 var(--text-label) var(--font-mono);
      letter-spacing: .14em;
      color: var(--color-faint);
    }
    .footer__link { padding: 12px 0; margin: -12px 0; transition: color var(--dur-fast) var(--ease-out); }
    .footer__link:hover { color: var(--color-ink); }

    /* ---------- 13. focus ---------- */
    :focus-visible {
      outline: 2px solid var(--color-accent);
      outline-offset: 3px;
    }

    /* global reduced-motion (waveform/lamp freezes live with the component in §6) */
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
    }

    /* ---------- 14. media queries ---------- */
    /* nav links collapse below 720px — wordmark + DOWNLOAD only, nothing wraps */
    @media (max-width: 719.98px) {
      .nav__links { display: none; }
    }

    /* hero stacks below 900px — phone drops below text, centered */
    @media (max-width: 899.98px) {
      .hero__grid { grid-template-columns: 1fr; }
      .hero__phone { margin-top: var(--space-10); }
      .hero::before {
        top: auto;
        bottom: -10%;
        right: auto;
        left: 50%;
        translate: -50% 0;
        width: min(90vw, 560px);
      }
      .privacy__grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
      }
    }

    /* steps rail goes vertical below 860px — line becomes a left rail, chips sit on it */
    @media (max-width: 859.98px) {
      .steps {
        display: block;
        border-left: 1px solid var(--color-line);
        padding-left: var(--space-6);
      }
      .steps::before { display: none; }
      .step + .step { margin-top: var(--space-8); }
      .step__chip { margin-left: calc(-1 * var(--space-6) - 20px); } /* 40px chip centered on the rail */
    }

    /* track meta hidden below 640px; number column tightens */
    @media (max-width: 639.98px) {
      .track { grid-template-columns: 48px minmax(0, 1fr); }
      .track__meta { display: none; }
    }

    /* spec sheet stays on one line at very narrow widths */
    @media (max-width: 399.98px) {
      .spec {
        font-size: var(--text-label);
        letter-spacing: .12em;
      }
    }

/* ---------- 15. subpages (privacy / support / thanks) ---------- */
.page { padding: 150px 0 96px; }
.page__head { max-width: 46rem; }
.page__head h1 {
  margin-top: var(--space-4);
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: .98;
}
.page__lede {
  margin-top: var(--space-5);
  font-size: var(--text-body-lg);
  color: var(--color-muted);
  max-width: 38rem;
}
.prose { max-width: 44rem; margin-top: var(--space-8); }
.prose section + section { margin-top: var(--space-8); }
.prose h2 {
  font-size: 1.75rem;
  line-height: 1;
}
.prose p {
  margin-top: var(--space-3);
  color: var(--color-muted);
}
.prose ul { margin-top: var(--space-3); list-style: none; }
.prose li {
  color: var(--color-muted);
  padding-left: var(--space-5);
  position: relative;
}
.prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .7em;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-accent);
}
.prose a { color: var(--color-accent-bright); text-decoration: underline; text-underline-offset: 3px; }

/* support form */
.form-card {
  max-width: 34rem;
  margin-top: var(--space-8);
  background: var(--color-surface-1);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
.form-field { margin-top: var(--space-5); }
.form-field:first-child { margin-top: 0; }
.form-field label {
  display: block;
  font: 500 var(--text-label) var(--font-mono);
  letter-spacing: .14em;
  color: var(--color-faint);
  margin-bottom: var(--space-2);
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  background: var(--color-screen);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  font: 400 1rem var(--font-body);
  padding: 12px 14px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.form-field select { appearance: none; -webkit-appearance: none; }
.form-field select option { background: var(--color-surface-1); }
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-color: var(--color-accent);
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-card .store-badge { margin-top: var(--space-6); border: 0; cursor: pointer; font-family: var(--font-body); }
.form-card .store-badge:hover { background: var(--color-surface-2); }
.hidden-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }