/* ============================================================
   BARLINE PAGE — "Stand Display"                    (2026-09-26)
   ------------------------------------------------------------
   /apps/barline/ only, loaded after styles.css and apps.css.
   Everything is scoped under main.bl, so the shared nav, the
   cluster bar, the CTA band and the footer are untouched.

   The page follows the app's own design system (Barline repo,
   Docs/design/design-system.md), chosen on the Claude Design
   canvas "Barline web page", hero A:
   - Two surfaces, as in the app. The practice bands are the
     stage (#141414, always dark); the reading bands (how it
     works, price, help) are the native light ground (#F2F2F7).
   - Coral means the loop: the bracket, the looped waveform,
     the lit beat, Play, and the move that is playing. Never
     decoration, never text on white.
   - The app's screens are drawn in SF Pro (system stack); the
     page's own words are Instrument Sans, semi-condensed for
     headings, Bold at most, default tracking.
   The animations live in barline-walkthrough.js (the song map
   and the phone) and barline.js (the hero's stand display).
   ============================================================ */

main.bl {
  --bl-ink: #141414;
  --bl-raised: #262625;
  --bl-well: #181818;
  --bl-line: #2E2E2C;
  --bl-text2: #A3A39E;
  --bl-faint: #6E6E6A;
  --bl-loop: #E86B4A;
  --bl-wash: rgba(232, 107, 74, 0.18);
  --bl-ground: #F2F2F7;
  --bl-surface: #FFFFFF;
  --bl-text: #141414;
  --bl-secondary: #6C6C70;   /* 4.7:1 on the ground; the system grey is 3.4:1 */
  --bl-body: #48484A;
  --bl-accent: #B84027;      /* links and chevrons on light: 5.5:1 on white */
  --bl-sep: #E5E5EA;
  --bl-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bl-app: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Instrument Sans', 'Segoe UI', sans-serif;
  --bl-gutter: clamp(16px, 5.6vw, 80px);
  --bl-band: clamp(72px, 9.5vw, 136px);
}
/* Every band but the shared Mirentha CTA, which keeps the site's own type. */
main.bl > section:not(.cta-section) {
  font-family: var(--bl-sans);
  -webkit-font-smoothing: antialiased;
}
main.bl > section:not(.cta-section) :is(h1, h2, h3) {
  font-family: var(--bl-sans);
  font-weight: 600;
  font-stretch: 88%;
  letter-spacing: 0;
  margin: 0;
}
main.bl > section:not(.cta-section) p { margin: 0; }

.bl-wrap {
  box-sizing: border-box;
  max-width: 1440px;   /* 1280 of content inside the 80px gutters */
  margin: 0 auto;
  padding: 0 var(--bl-gutter);
}
.bl-stage { background: var(--bl-ink); color: #FFFFFF; }
.bl-light { background: var(--bl-ground); color: var(--bl-text); }

.bl-label { font-size: 17px; line-height: 1.3; color: var(--bl-secondary); }
.bl-stage .bl-label { color: var(--bl-text2); }
.bl-h2 { margin-top: 16px !important; font-size: clamp(38px, 4.45vw, 64px); line-height: 1.04; color: inherit; }
.bl-intro { margin-top: 24px !important; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--bl-body); text-wrap: pretty; }
.bl-stage .bl-intro { color: var(--bl-text2); }

.bl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 12px;
  font-family: var(--bl-sans);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.bl-btn:active { opacity: 0.7; transform: scale(0.97); }
.bl-btn--loop { background: var(--bl-loop); color: var(--bl-ink); }      /* ink on coral, 5.8:1 */
.bl-btn--loop:hover { background: #EF7B5C; color: var(--bl-ink); }
.bl-btn--raised { background: var(--bl-raised); color: #FFFFFF; }
.bl-btn--raised:hover { background: #31312F; color: #FFFFFF; }
main.bl a:focus-visible, main.bl button:focus-visible {
  outline: 2px solid var(--bl-loop);
  outline-offset: 3px;
}

/* ============ HERO ============ */
.bl-hero {
  padding: calc(86px + clamp(40px, 6vh, 64px)) 0 clamp(48px, 5vw, 64px);
  overflow: hidden;
}
@media (max-width: 1024px) { .bl-hero { padding-top: calc(78px + 40px); } }

.bl-hero-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 80px;
}
.bl-hero-title { display: flex; flex-direction: column; gap: 28px; }
.bl-badge { display: flex; align-items: center; gap: 12px; font-size: 17px; }
.bl-badge img { width: 44px; height: 44px; border-radius: 10px; box-shadow: 0 0 0 1px var(--bl-line); }
.bl-badge-name { font-weight: 600; }
.bl-badge-dot { color: var(--bl-faint); }
.bl-badge-state { color: var(--bl-text2); }
.bl-hero h1 {
  font-size: clamp(48px, 5.85vw, 84px);
  line-height: 1.02;
  color: #FFFFFF;
}
.bl-hero h1 span { color: var(--bl-text2); }
.bl-hero-side { width: 440px; flex-shrink: 0; display: flex; flex-direction: column; gap: 28px; padding-bottom: 6px; }
.bl-lede { font-size: clamp(17px, 1.35vw, 19px); line-height: 1.55; color: var(--bl-text2); text-wrap: pretty; }
.bl-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.bl-rule { height: 1px; background: var(--bl-line); margin: 56px 0 40px; }

@media (max-width: 1100px) {
  .bl-hero-head { flex-direction: column; align-items: flex-start; gap: 28px; }
  .bl-hero-side { width: auto; max-width: 600px; padding-bottom: 0; }
}
@media (max-width: 760px) {
  .bl-badge { font-size: 15px; gap: 10px; }
  .bl-badge img { width: 36px; height: 36px; border-radius: 8px; }
  .bl-hero-title { gap: 24px; }
  .bl-ctas { flex-direction: column; align-self: stretch; }
  .bl-ctas .bl-btn { width: 100%; }
  .bl-hero-side { align-self: stretch; }
  .bl-rule { margin: 48px 0 32px; }
}

/* ---- The stand display: the Song screen at page width ----
   Wide: counter and Play | state, detail and beat lights | Speed
   and Pitch, then the song map across the whole width. Under
   760px it is the app's own screen, top to bottom. */
.bl-stand {
  margin: 0;
  display: grid;
  grid-template-areas:
    "count state steps"
    "map map map"
    "readout readout readout";
  grid-template-columns: auto minmax(0, 1fr) minmax(300px, 400px);
  column-gap: clamp(32px, 3.9vw, 56px);
  row-gap: 36px;
  align-items: center;
  font-family: var(--bl-app);
  color: #FFFFFF;
  --bl-well-h: 64px;
  --bl-value: 30px;
  --bl-step: 60px;
}
.bl-stand-song { grid-area: song; display: none; }
.bl-stand-count {
  grid-area: count;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 2.2vw, 32px);
  min-width: 0;
}
.bl-counter {
  font-size: clamp(96px, 12.8vw, 184px);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #FFFFFF;
  min-width: 1.25em;
}
.bl-counter.is-dim { color: var(--bl-text2); }
.bl-play {
  width: clamp(64px, 7.8vw, 112px);
  height: clamp(64px, 7.8vw, 112px);
  border-radius: 50%;
  background: var(--bl-loop);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bl-play svg { width: 38%; height: 38%; }
.bl-play .bl-i-pause { display: none; }
.bl-play.is-playing .bl-i-pause { display: block; }
.bl-play.is-playing .bl-i-play { display: none; }

.bl-stand-state { grid-area: state; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bl-state { font-size: clamp(17px, 2.1vw, 30px); font-weight: 600; line-height: 1.2; }
.bl-detail { font-size: clamp(15px, 1.55vw, 22px); line-height: 1.3; color: var(--bl-text2); font-variant-numeric: tabular-nums; }
.bl-lights { display: flex; gap: 12px; margin-top: 16px; }
.bl-lights i { flex: 1 1 0; height: 12px; border-radius: 6px; background: var(--bl-faint); }
.bl-lights i.is-lit { background: var(--bl-loop); }

.bl-steppers { grid-area: steps; display: flex; gap: 20px; min-width: 0; }
.bl-stepper { flex: 1 1 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bl-stepper-label { font-size: 17px; color: var(--bl-text2); }
.bl-stepper-well {
  height: var(--bl-well-h);
  border-radius: 16px;
  background: var(--bl-raised);
  display: flex;
  align-items: center;
}
.bl-stepper-well > span:first-child,
.bl-stepper-well > span:last-child { width: var(--bl-step); display: flex; justify-content: center; flex-shrink: 0; }
.bl-stepper-value { flex: 1 1 auto; text-align: center; font-size: var(--bl-value); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bl-stepper-well svg { width: 18px; height: 18px; }
.bl-speedbar { height: 6px; border-radius: 3px; background: var(--bl-raised); margin-top: 4px; overflow: hidden; }
.bl-speedbar i { display: block; height: 100%; width: 56.25%; border-radius: 3px; background: var(--bl-loop); }
.bl-cells { height: 6px; display: flex; gap: 3px; margin-top: 4px; }
.bl-cells i { flex: 1 1 0; border-radius: 1.5px; background: var(--bl-raised); }
.bl-cells i.is-zero { background: var(--bl-faint); }
.bl-cells i.is-on { background: var(--bl-loop); }

.bl-map { grid-area: map; min-width: 0; min-height: 168px; }
/* The map's height before the script draws it, at the scales barline.js picks
   (1.5 from 1040px wide, 1.25 from 700px, the app's own size below). */
@media (max-width: 1039px) { .bl-map { min-height: 140px; } }
@media (max-width: 699px) { .bl-map { min-height: 112px; } }
html.no-js .bl-map { display: none; }
.bl-readout {
  grid-area: readout;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 24px;
  font-size: 19px;
  color: var(--bl-text2);
  font-variant-numeric: tabular-nums;
}
.bl-readout-actions { display: none; }

@media (max-width: 1100px) {
  .bl-stand {
    grid-template-areas:
      "count state"
      "steps steps"
      "map map"
      "readout readout";
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 32px;
  }
  .bl-steppers { max-width: 560px; }
  .bl-readout { font-size: 16px; }
}
/* The app's own screen, top to bottom (layout 1b of the design). */
@media (max-width: 760px) {
  .bl-stand {
    grid-template-areas: "song" "count" "state" "map" "readout" "steps";
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
    --bl-well-h: 44px;
    --bl-value: 22px;
    --bl-step: 44px;
  }
  .bl-stand-song { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; }
  .bl-stand-song b { font-size: 17px; font-weight: 600; line-height: 22px; }
  .bl-stand-song span { font-size: 15px; line-height: 20px; color: var(--bl-text2); }
  .bl-stand-count { height: 100px; }
  .bl-counter { font-size: 96px; }
  .bl-play { width: 64px; height: 64px; }
  .bl-stand-state { margin-top: 8px; gap: 2px; }
  .bl-state { font-size: 17px; line-height: 22px; }
  .bl-detail { font-size: 15px; line-height: 20px; }
  .bl-lights { gap: 8px; margin-top: 12px; }
  .bl-lights i { height: 8px; border-radius: 4px; }
  .bl-map { margin-top: 16px; }
  .bl-readout { margin-top: 8px; min-height: 44px; font-size: 13px; gap: 8px; }
  .bl-readout-meta { display: none; }
  .bl-readout-actions { display: flex; gap: 8px; font-size: 17px; font-weight: 600; color: #FFFFFF; }
  .bl-readout-actions span {
    height: 44px; min-width: 44px; padding: 0 16px; box-sizing: border-box;
    border-radius: 12px; background: var(--bl-raised);
    display: flex; align-items: center; justify-content: center;
  }
  .bl-readout-actions span.bl-x { padding: 0; }
  .bl-steppers { margin-top: 16px; gap: 16px; }
  .bl-stepper { gap: 4px; }
  .bl-stepper-label { font-size: 13px; line-height: 18px; }
  .bl-stepper-well { border-radius: 12px; }
  .bl-stepper-well svg { width: 16px; height: 16px; }
  .bl-speedbar, .bl-cells { height: 4px; margin-top: 2px; }
  .bl-cells { gap: 2px; }
}

/* ---- The song map (drawn by barline-walkthrough.js) ---- */
.bl-songmap { position: relative; }
.bl-songmap-strip { position: relative; }
.bl-songmap-strip span {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--bl-raised, #262625);
  color: var(--bl-text2, #A3A39E);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.bl-songmap-strip span.is-loop { background: var(--bl-loop, #E86B4A); color: var(--bl-ink, #141414); }
.bl-songmap-well { position: relative; overflow: hidden; background: var(--bl-well, #181818); }
.bl-songmap-well canvas { position: absolute; left: 0; top: 0; }
.bl-songmap-head { position: absolute; top: 0; bottom: 0; left: 0; background: #FFFFFF; will-change: transform; }

/* ============ HOW IT WORKS ============ */
.bl-how { padding: var(--bl-band) 0; }
.bl-how-grid {
  display: grid;
  grid-template-areas: "head phone" "moves phone";
  grid-template-columns: minmax(0, 780px) auto;
  grid-template-rows: auto 1fr;
  justify-content: space-between;
  column-gap: 80px;
}
.bl-how-head { grid-area: head; }
.bl-how-head .bl-intro { max-width: 600px; }
.bl-moves { grid-area: moves; list-style: none; margin: 56px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bl-move {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 24px 32px;
  border: none;
  border-radius: 12px;
  background: transparent;
  display: flex;
  gap: 28px;
  align-items: flex-start;
  text-align: left;
  font-family: var(--bl-sans);
  color: var(--bl-text);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.bl-move:hover { background: rgba(20, 20, 20, 0.035); }
.bl-move.is-active { background: rgba(232, 107, 74, 0.14); }
/* The loop bracket, as on the app icon: two coral edges round the move that is playing. */
.bl-move.is-active::before,
.bl-move.is-active::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 2px;
  background: var(--bl-loop);
}
.bl-move.is-active::before { left: 0; }
.bl-move.is-active::after { right: 0; }
.bl-move-num { width: 28px; flex-shrink: 0; padding-top: 7px; font-size: 17px; color: var(--bl-secondary); font-variant-numeric: tabular-nums; }
.bl-move-text { display: flex; flex-direction: column; gap: 8px; }
.bl-move-title { font-size: clamp(21px, 1.95vw, 28px); font-weight: 600; font-stretch: 92%; line-height: 1.2; }
.bl-move-body { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.55; color: var(--bl-secondary); }

.bl-how-phone { grid-area: phone; align-self: end; }
.bl-phone-box {
  --bl-phone: 0.9;
  width: calc(414px * var(--bl-phone));
  height: calc(868px * var(--bl-phone));
}
.bl-phone {
  width: 414px;
  height: 868px;
  transform: scale(var(--bl-phone));
  transform-origin: top left;
}
html.no-js .bl-how-phone { display: none; }

@media (max-width: 1000px) {
  .bl-how-grid {
    grid-template-areas: "head" "phone" "moves";
    grid-template-columns: minmax(0, 1fr);
  }
  .bl-how-phone { justify-self: center; margin-top: 40px; }
  .bl-moves { margin-top: 32px; }
}
@media (max-width: 760px) {
  .bl-move { padding: 16px 20px; gap: 16px; }
  .bl-move.is-active::before, .bl-move.is-active::after { width: 3px; }
  .bl-move-num { width: 22px; padding-top: 4px; font-size: 15px; }
  .bl-move-text { gap: 6px; }
}
@media (max-width: 430px) { .bl-phone-box { --bl-phone: 0.8; } }
@media (max-width: 359px) { .bl-phone-box { --bl-phone: 0.68; } }

/* ============ BANDS: two columns, copy and detail ============ */
.bl-band { padding: var(--bl-band) 0; }
.bl-cols {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 620px);
  justify-content: space-between;
  column-gap: 80px;
  row-gap: 40px;
  align-items: start;
}
@media (max-width: 1000px) { .bl-cols { grid-template-columns: minmax(0, 1fr); } }

/* The short version: plain rows on the stage, hairlines between. */
.bl-rows { border-top: 1px solid var(--bl-line); }
.bl-rows > div { padding: 36px 0; border-bottom: 1px solid var(--bl-line); display: flex; flex-direction: column; gap: 12px; }
.bl-rows h3 { font-size: clamp(22px, 1.95vw, 28px); line-height: 1.2; color: #FFFFFF; }
.bl-rows p { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; color: var(--bl-text2); }
@media (max-width: 760px) { .bl-rows > div { padding: 24px 0; gap: 8px; } }

/* Price: the paywall's two plans, then the facts as a grouped list. */
.bl-price { padding-bottom: clamp(40px, 6vw, 96px); }
.bl-price .bl-h2, .bl-help .bl-h2 { font-size: clamp(38px, 3.9vw, 56px); line-height: 1.06; }
.bl-price-detail { display: flex; flex-direction: column; gap: 32px; }
.bl-plans { display: flex; gap: 12px; }
.bl-plan {
  flex: 1 1 0;
  padding: 20px 24px;
  border-radius: 12px;
  background: var(--bl-surface);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bl-plan-name { font-size: 17px; font-weight: 600; }
.bl-plan-price { font-family: var(--bl-app); font-size: clamp(28px, 2.4vw, 34px); font-weight: 700; font-variant-numeric: tabular-nums; }
.bl-plan-note { font-size: 15px; line-height: 1.4; color: var(--bl-secondary); }
.bl-facts { margin: 0; border-radius: 12px; background: var(--bl-surface); }
.bl-facts > div { margin-left: 24px; padding: 16px 24px 16px 0; border-bottom: 1px solid var(--bl-sep); display: flex; gap: 24px; }
.bl-facts > div:last-child { border-bottom: none; }
.bl-facts dt { width: 170px; flex-shrink: 0; font-size: 16px; line-height: 1.5; color: var(--bl-secondary); }
.bl-facts dd { margin: 0; font-size: 16px; line-height: 1.5; }
@media (max-width: 760px) {
  .bl-plans { gap: 10px; }
  .bl-plan { padding: 16px; gap: 2px; }
  .bl-plan-name { font-size: 15px; }
  .bl-plan-note { font-size: 13px; }
  .bl-facts > div { margin-left: 16px; padding: 12px 16px 12px 0; flex-direction: column; gap: 2px; }
  .bl-facts dt { width: auto; font-size: 13px; }
}

/* Help and legal: native rows with the accent chevron. */
.bl-help { padding-top: 0; }
.bl-help .bl-cols { padding-top: 56px; border-top: 1px solid #D8D8DD; }
.bl-links { border-radius: 12px; background: var(--bl-surface); display: flex; flex-direction: column; }
.bl-links a {
  margin-left: 24px;
  padding: 20px 24px 20px 0;
  border-bottom: 1px solid var(--bl-sep);
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: var(--bl-text);
}
.bl-links a:last-child { border-bottom: none; }
.bl-links a:hover .bl-link-title { color: var(--bl-accent); }
.bl-link-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; }
.bl-link-title { font-size: 18px; font-weight: 600; transition: color 0.15s ease; }
.bl-link-desc { font-size: 16px; line-height: 1.5; color: var(--bl-secondary); }
.bl-link-cta { font-size: 16px; color: var(--bl-accent); white-space: nowrap; }
.bl-links svg { width: 8px; height: 14px; flex-shrink: 0; }
@media (max-width: 760px) {
  .bl-help .bl-cols { padding-top: 40px; }
  .bl-links a { margin-left: 16px; padding: 16px 16px 16px 0; gap: 12px; }
  .bl-link-title { font-size: 17px; }
  .bl-link-desc { font-size: 15px; }
  .bl-link-cta { display: none; }
}

/* ============ LAUNCH ============
   The shared .sp-notify-form (its handler is in scripts.js), set on the
   stage. One lit beat above the heading: "on the one". */
.bl-notify { padding: var(--bl-band) 0; text-align: center; }
.bl-notify .bl-wrap { display: flex; flex-direction: column; align-items: center; }
.bl-notify .bl-lights { width: 208px; margin: 0 0 32px; gap: 8px; }
.bl-notify .bl-lights i { height: 10px; border-radius: 5px; }
.bl-notify .bl-intro { max-width: 600px; }
.bl-notify-form { width: 100%; max-width: 560px; margin-top: 40px; text-align: left; }
.bl-notify .form-group label { font-family: var(--bl-sans); font-size: 15px; letter-spacing: 0; color: var(--bl-text2); }
.bl-notify .form-group input {
  height: 52px;
  box-sizing: border-box;
  padding: 0 16px;
  border: 1px solid #3A3A38;
  border-radius: 12px;
  background: var(--bl-raised);
  color: #FFFFFF;
  font-family: var(--bl-sans);
  font-size: 17px;
  font-weight: 400;
}
.bl-notify .form-group input::placeholder { color: var(--bl-faint); }
.bl-notify .form-group input:focus { border-color: var(--bl-loop); box-shadow: 0 0 0 2px rgba(232, 107, 74, 0.25); outline: none; }
.bl-notify .btn.btn-primary {
  min-height: 52px;
  border: none;
  border-radius: 12px;
  background: var(--bl-loop);
  color: var(--bl-ink);
  box-shadow: none;
  font-family: var(--bl-sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.bl-notify .btn.btn-primary:hover { background: #EF7B5C; box-shadow: none; }
.bl-notify .btn.btn-primary:disabled { opacity: 0.6; }
.bl-notify .sp-notify-note { font-family: var(--bl-sans); font-size: 15px; line-height: 1.55; color: var(--bl-text2); }
.bl-notify .sp-notify-note a { color: #FFFFFF; }
.bl-notify .sp-notify-status { font-family: var(--bl-sans); color: #FFFFFF; }
.bl-notify .sp-notify-status.is-error { color: #FF6961; }

@media (prefers-reduced-motion: reduce) {
  .bl-btn, .bl-move, .bl-link-title { transition: none; }
}