/* Suonable marketing site — global styles */

html, body { margin: 0; padding: 0; background: #F6F5F2; scroll-behavior: smooth; }
html { scroll-padding-top: 60px; }
section[id], [id^="beta"] { scroll-margin-top: 60px; }
* { box-sizing: border-box; }
body { font-family: 'Figtree', Helvetica, sans-serif; color: #17171B; background: #F6F5F2; }
a { color: #17171B; text-decoration: none; }
a:hover { color: #1055AD; }
input { font: inherit; }
img { max-width: 100%; }

/* ---------- keyframes ---------- */
@keyframes head { from { left: 0.5%; } to { left: 99%; } }
@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0.2; } }
@keyframes flow { 0% { background-position: 0 0; } 100% { background-position: 28px 0; } }
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marq2 { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes reveal { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes ch1 { 0%, 0% { background: #48525E; color: #DDE3EA; box-shadow: none; } 0.05%, 13.7% { background: #558AE4; color: #07111B; box-shadow: 0 0 26px rgba(85,138,228,0.45); } 13.75%, 100% { background: #48525E; color: #DDE3EA; box-shadow: none; } }
@keyframes ch2 { 0%, 13.75% { background: #48525E; color: #DDE3EA; box-shadow: none; } 13.8%, 30% { background: #558AE4; color: #07111B; box-shadow: 0 0 26px rgba(85,138,228,0.45); } 30.05%, 100% { background: #48525E; color: #DDE3EA; box-shadow: none; } }
@keyframes ch3 { 0%, 30% { background: #48525E; color: #DDE3EA; box-shadow: none; } 30.05%, 41.2% { background: #558AE4; color: #07111B; box-shadow: 0 0 26px rgba(85,138,228,0.45); } 41.25%, 100% { background: #48525E; color: #DDE3EA; box-shadow: none; } }
@keyframes ch4 { 0%, 41.25% { background: #48525E; color: #DDE3EA; box-shadow: none; } 41.3%, 62.5% { background: #558AE4; color: #07111B; box-shadow: 0 0 26px rgba(85,138,228,0.45); } 62.55%, 100% { background: #48525E; color: #DDE3EA; box-shadow: none; } }
@keyframes ch5 { 0%, 62.55% { background: #48525E; color: #DDE3EA; box-shadow: none; } 62.6%, 71.2% { background: #558AE4; color: #07111B; box-shadow: 0 0 26px rgba(85,138,228,0.45); } 71.25%, 100% { background: #48525E; color: #DDE3EA; box-shadow: none; } }
@keyframes ch6 { 0%, 71.25% { background: #48525E; color: #DDE3EA; box-shadow: none; } 71.3%, 87.5% { background: #558AE4; color: #07111B; box-shadow: 0 0 26px rgba(85,138,228,0.45); } 87.55%, 100% { background: #48525E; color: #DDE3EA; box-shadow: none; } }
@keyframes ch7 { 0%, 87.55% { background: #48525E; color: #DDE3EA; box-shadow: none; } 87.6%, 100% { background: #558AE4; color: #07111B; box-shadow: 0 0 26px rgba(85,138,228,0.45); } }
@keyframes sweep { from { left: 0%; } to { left: 100%; } }
@keyframes beat { 0%, 22% { transform: scale(1); opacity: 1; } 23%, 100% { transform: scale(0.62); opacity: 0.28; } }
@keyframes meterLevel { 0% { height: 55%; } 12% { height: 18%; } 24% { height: 68%; } 36% { height: 32%; } 48% { height: 76%; } 60% { height: 22%; } 72% { height: 58%; } 84% { height: 12%; } 100% { height: 55%; } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- nav ---------- */
.nav-links { flex: 1 1 0%; min-width: 0; display: flex; flex-wrap: nowrap; align-items: center; justify-content: safe center; gap: clamp(6px, 1.2vw, 26px); font-size: 13px; font-weight: 500; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
@media (max-width: 759px) { .nav-links { display: none; } }
@media (min-width: 760px) { .nav-links { font-size: 14px; } .cta { font-size: 15px; } }
/* Section spacing is vh-based, which balloons on tall phone screens: use fixed, tighter steps there.
   (The inline styles fall back to their desktop values when these aren't set.) */
@media (max-width: 759px) { :root { --space-hero: 32px; --space-section: 64px; --space-gap: 56px; } }

/* ---------- legal pages (generated by _build/legal_pages.py) ---------- */
.legal { padding-block: clamp(36px, 5vh, 72px) clamp(64px, 9vh, 112px); }   /* the page wrapper gives the sides */
.legal-inner { max-width: var(--page-text, 980px); margin: 0 auto; }
.legal-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: var(--t-eyebrow, 11px); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #1055AD; }
.legal h1 { margin: 12px 0 0; font-size: clamp(30px, 4.4vw, 58px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.06; text-wrap: balance; }
.legal-stamp { margin: 14px 0 0; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: 0.06em; color: #6E6E78; }
.legal-lede { margin: 18px 0 0; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: #6E6E78; max-width: 60ch; }
.legal-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; }
.legal-tab { border: 1px solid #E8E8E4; border-radius: 99px; padding: 8px 17px; background: #FFFFFF; font-size: 14px; font-weight: 600; color: #6E6E78; }
.legal-tab:hover { color: #1055AD; }
.legal-tab.is-current, .legal-tab.is-current:hover { background: #17171B; border-color: #17171B; color: #FFFFFF; }
.legal-body { max-width: 68ch; margin: 40px 0 0; }
.legal-intro { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: #4A4A52; margin: 0; }
.legal-body h2 { margin: 40px 0 0; font-size: var(--t-h3, 21px); font-weight: 800; letter-spacing: -0.025em; }
.legal-body p { margin: 12px 0 0; font-size: 16px; line-height: 1.75; color: #3C3F45; }
.legal-operator { max-width: 68ch; margin: 56px 0 0; background: #FFFFFF; border: 1px solid #E8E8E4; border-radius: 16px; padding: 24px; }
.legal-operator-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #6E6E78; }
.legal-operator p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.7; color: #3C3F45; }
.legal-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin: 36px 0 0; }
.legal-card { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid #E8E8E4; border-radius: 16px; padding: 24px; }
.legal-card:hover { border-color: #1055AD; color: #17171B; }
.legal-card h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.025em; }
.legal-card p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: #6E6E78; }
.legal-card-go { display: inline-block; margin-top: auto; padding-top: 16px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: #1055AD; }

/* ---------- keyboard focus ---------- */
/* Tabbing through the page showed nothing. This marks where you are, without
   touching what a mouse sees. */
:focus-visible { outline: 2px solid #1055AD; outline-offset: 3px; border-radius: 4px; }
#how :focus-visible, #chords :focus-visible, #live :focus-visible, #straight :focus-visible,
.legal-tab:focus-visible, .shape-pill:focus-visible { outline-color: #6098DB; }

/* ---------- desktop scale ---------- */
/* The page was built around a 1160px column with 15px text, which reads small on a full
   desktop screen. These variables widen it and lift the type; the fallbacks in the markup
   keep phones and tablets exactly as they were. */
@media (min-width: 1180px) {
  :root {
    --page: 1320px; --page-text: 1080px;
    --t-body: 16px; --t-body-sm: 15.5px; --t-h3: 22px; --t-foot: 14px; --t-eyebrow: 11.5px;
  }
  .nav-links { font-size: 17px; gap: clamp(10px, 1.5vw, 30px); }
  .cta { font-size: 16.5px; padding: 12px 22px; }
  .lang-btn { font-size: 12.5px; padding: 6px 10px; }
  .devices-stage, .devices-still { max-width: 1400px; }
  .footer-bar { font-size: 11px; }
  .legal-body p { font-size: 16.5px; }
  .legal-tab { font-size: 14.5px; }
}

/* ---------- mobile hamburger menu ---------- */
.hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 34px; height: 34px; padding: 0; border: none; border-radius: 8px; background: transparent; cursor: pointer; flex: 0 0 auto; }
.hamburger:hover { background: rgba(23,23,27,0.06); }
.hamburger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: #17171B; transition: transform 0.2s ease, opacity 0.2s ease; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu { display: none; }

@media (max-width: 759px) {
  .hamburger { display: flex; }
  .site-nav { position: sticky; }
  .site-nav .nav-lang { display: none; }
  .mobile-menu {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    flex-direction: column; gap: 2px;
    background: #FFFFFF; border: 1px solid #E8E8E4; border-radius: 16px; padding: 10px;
    box-shadow: 0 24px 48px -24px rgba(12,15,20,0.35);
  }
  .site-nav.menu-open .mobile-menu { display: flex; }
  .mobile-menu a { padding: 14px 16px; border-radius: 10px; font-size: 15px; font-weight: 600; color: #17171B; }
  .mobile-menu a:hover { background: #F6F5F2; color: #1055AD; }
  .mobile-menu-lang { display: flex; gap: 6px; padding: 6px 16px 14px; margin-bottom: 6px; border-bottom: 1px solid #E8E8E4; }
  .mobile-menu-lang .lang-btn { padding: 7px 14px; font-size: 12px; border-radius: 8px; }
}

.nav-lang { display: flex; gap: 2px; }
.lang-btn { display: inline-block; padding: 4px 8px; border-radius: 6px; border: none; cursor: pointer; font: inherit; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; background: transparent; color: #6E6E78; }
.lang-btn:hover { opacity: 0.75; color: #6E6E78; }
.lang-btn[aria-current="page"], .lang-btn[aria-current="page"]:hover { background: #17171B; color: #FFFFFF; }
/* the language the visitor picked last time, shown on a page in another language */
.lang-btn.is-saved, .lang-btn.is-saved:hover { color: #1055AD; box-shadow: inset 0 0 0 1.5px #1055AD; }

.cta { background: #1055AD; color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.cta:hover { background: #0D3D7C; color: #fff; }

/* ---------- player mockup ---------- */
.player[data-theme="light"] {
  --shell: #FFFFFF; --shellBorder: #EDEDE8; --ink: #17171B; --dim: #8C8C94; --mid: #4A4A52;
  --hair: #E8E8E4; --line: #DFDFDA; --accent: #0D3D7C;
  --meterBg: rgba(23,23,27,0.10); --meterCap: rgba(23,23,27,0.18); --panTrack: rgba(23,23,27,0.14);
  --msBg: rgba(255,255,255,0.75); --msBorder: rgba(23,23,27,0.10);
  --masterFill: #17171B; --masterRest: #D9CFC0; --masterTick: rgba(23,23,27,0.4); --masterKnobBorder: #17171B;
  --wave: #C3D3E8; --waveMid: rgba(150,175,205,0.55);
  --toggleActiveBg: #17171B; --toggleActiveInk: #FFFFFF;
}
.player[data-theme="dark"] {
  --shell: #0B0C0F; --shellBorder: #23262E; --ink: #F4F7FA; --dim: #8A97A8; --mid: #C6D2E0;
  --hair: #23262E; --line: #2C313B; --accent: #418CEB;
  --meterBg: rgba(255,255,255,0.13); --meterCap: rgba(255,255,255,0.3); --panTrack: rgba(255,255,255,0.18);
  --msBg: rgba(255,255,255,0.06); --msBorder: rgba(255,255,255,0.14);
  --masterFill: #FFFFFF; --masterRest: #C9BCA8; --masterTick: rgba(255,255,255,0.55); --masterKnobBorder: #FFFFFF;
  --wave: #5E6C7D; --waveMid: rgba(94,108,125,0.5);
  --toggleActiveBg: #FFFFFF; --toggleActiveInk: #0B0C0F;
}

.player { max-width: 1160px; margin: 0 auto; background: var(--shell); border: 1px solid var(--shellBorder); border-radius: 20px; padding: clamp(12px, 1.6vw, 18px); box-shadow: 0 40px 80px -50px rgba(12,15,20,0.4); transition: background 0.2s, border-color 0.2s; }
.player-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 6px 8px 16px; }
.song-title { font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; color: var(--ink); }
.song-artist { font-size: 14px; color: var(--dim); padding-top: 4px; }
.player-head-right { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(10px, 1.6vw, 20px); }
.player-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.meta-pill { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 99px; padding: 7px 14px; }
.meta-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--dim); }
.meta-value { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; color: var(--ink); }
.edit-pill { border: 1px solid var(--line); border-radius: 99px; padding: 7px 16px; font-size: 13px; color: var(--mid); }


.player-panel { background: var(--shell); border-radius: 16px; padding: clamp(10px, 1.4vw, 16px) clamp(12px, 1.8vw, 20px) clamp(14px, 2vw, 22px); }

.section-strip { display: flex; gap: 4px; padding-bottom: 12px; }
.section-chip { flex: var(--w) 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; border-radius: 6px; padding: 6px 4px; color: #FFFFFF; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; }
.player[data-theme="light"] .s-intro { background: #2C7FA8; } .player[data-theme="dark"] .s-intro { background: #2C6E96; }
.player[data-theme="light"] .s-verse { background: #ED8A72; } .player[data-theme="dark"] .s-verse { background: #B04A34; }
.player[data-theme="light"] .s-chorus { background: #B18AF0; } .player[data-theme="dark"] .s-chorus { background: #6B45C0; }
.player[data-theme="light"] .s-bridge { background: #86C98D; } .player[data-theme="dark"] .s-bridge { background: #26743A; }
.player[data-theme="light"] .s-outro { background: #E0B183; } .player[data-theme="dark"] .s-outro { background: #B07A32; }

.wave-wrap { position: relative; height: clamp(96px, 12vw, 152px); overflow: hidden; }
.wave-wrap canvas { display: block; width: 100%; height: 100%; }
.playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); animation: head 42s linear infinite; }

.transport-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); align-items: center; gap: 14px; padding: clamp(16px, 2.4vw, 26px) 0 clamp(14px, 2vw, 22px); }
.time-readout { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-size: clamp(15px, 1.5vw, 21px); color: var(--ink); }
.time-readout span { color: var(--dim); }
.transport-controls { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 1.6vw, 22px); }
.transport-controls > *:first-child,
.transport-controls > *:last-child { width: 108px; flex: 0 0 auto; }
.ghost-btn { width: 42px; height: 42px; border-radius: 99px; border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.transport-label { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; color: var(--mid); padding-top: 8px; white-space: nowrap; }
.play-btn { width: 58px; height: 58px; border-radius: 99px; background: var(--accent); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }

.toolbar { display: flex; flex-wrap: nowrap; gap: 10px; justify-content: safe center; overflow-x: auto; border-top: 1px solid var(--hair); padding-top: clamp(14px, 2vw, 22px); scrollbar-width: none; }

.pill { flex: 0 0 auto; display: flex; align-items: center; border: 1px solid var(--line); border-radius: 99px; overflow: hidden; color: var(--ink); }
.pill span { padding: 9px 13px; font-size: 13px; font-weight: 500; }
.pill .lbl { font-family: 'JetBrains Mono', monospace; letter-spacing: 0.06em; color: var(--mid); }
.pill .ink { border-left: 1px solid var(--line); color: var(--ink); }
.pill .dim { border-left: 1px solid var(--line); color: var(--dim); }
.pill .dim.mono { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.solo-pill { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 99px; padding: 9px 15px; font-size: 13px; color: var(--ink); }
.solo-pill .arrow { font-size: 15px; color: var(--mid); }
.gear-glyph { display: block; width: 13px; height: 13px; border-radius: 99px; border: 2px solid var(--mid); box-shadow: 0 0 0 2px var(--shell), 0 0 0 3px var(--line); }
.check-glyph { display: block; width: 11px; height: 6px; border-left: 2px solid var(--mid); border-bottom: 2px solid var(--mid); transform: rotate(-45deg); margin-top: -3px; }

.tabs-row { display: flex; gap: 26px; align-items: flex-end; border-bottom: 1px solid var(--hair); padding: 8px 10px 0; margin-bottom: 18px; }
.tab-active { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); padding-bottom: 12px; border-bottom: 2px solid var(--accent); margin-bottom: -1px; }
.tab-active span { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 700; color: var(--accent); }
.tab-idle { font-size: 17px; font-weight: 500; letter-spacing: -0.02em; color: var(--dim); padding-bottom: 12px; }
.tab-idle span { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 700; color: var(--dim); }

.stem-scroller { display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.stem-card { flex: 1 0 132px; border-radius: 14px; padding: 18px 12px 14px; text-align: center; border: 1px solid transparent; }
.player[data-theme="dark"] .stem-card { border-color: color-mix(in srgb, var(--c) 40%, transparent); border-bottom: 2px solid var(--c); }
.stem-head { min-height: 46px; padding-bottom: 12px; }
.stem-title { font-size: 13px; font-weight: 800; letter-spacing: 0.04em; line-height: 1.25; color: var(--ink); }
.stem-sub { font-size: 12px; font-weight: 500; color: var(--mid); padding-top: 2px; }
.stem-body { display: flex; gap: 10px; justify-content: center; align-items: flex-end; height: clamp(128px, 15vw, 190px); }
.fader-track { position: relative; width: 3px; border-radius: 99px; background: var(--c); height: 100%; }
.fader-thumb { position: absolute; top: -3px; left: 50%; width: 24px; height: 12px; margin-left: -12px; border-radius: 4px; background: var(--c); }
.meter { position: relative; width: 8px; border-radius: 99px; background: var(--meterBg); height: 100%; }
.meter-cap { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 4px; background: var(--c); animation: meterLevel 2.8s ease-in-out infinite; }
.stem-card:nth-child(1) .meter-cap { animation-duration: 2.6s; animation-delay: 0s; }
.stem-card:nth-child(2) .meter-cap { animation-duration: 3.1s; animation-delay: -0.9s; }
.stem-card:nth-child(3) .meter-cap { animation-duration: 2.7s; animation-delay: -1.9s; }
.stem-card:nth-child(4) .meter-cap { animation-duration: 3.3s; animation-delay: -0.4s; }
.stem-card:nth-child(5) .meter-cap { animation-duration: 2.3s; animation-delay: -1.4s; }
.stem-card:nth-child(6) .meter-cap { animation-duration: 2.9s; animation-delay: -2.3s; }
.stem-card:nth-child(7) .meter-cap { animation-duration: 3.4s; animation-delay: -0.7s; }
.stem-card:nth-child(8) .meter-cap { animation-duration: 2.7s; animation-delay: -1.6s; }
.stem-value { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-size: 14px; color: var(--ink); padding: 14px 0 12px; }
.pan-row { display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 600; color: var(--dim); }
.pan-track { position: relative; flex: 1; height: 2px; border-radius: 99px; background: var(--panTrack); display: block; }
.pan-knob { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 99px; background: var(--c); display: block; }
.ms-row { display: flex; gap: 8px; justify-content: center; padding-top: 14px; }
.ms-chip { padding: 6px 11px; border-radius: 8px; font-size: 12px; font-weight: 700; color: var(--ink); background: var(--msBg); border: 1px solid var(--msBorder); }

.stem-click { background: #F4E8FF; } .player[data-theme="dark"] .stem-click { background: #2B2039; }
.stem-drums { background: #FEE4E4; } .player[data-theme="dark"] .stem-drums { background: #33201F; }
.stem-bass { background: #FFEEDA; } .player[data-theme="dark"] .stem-bass { background: #352616; }
.stem-guitar { background: #DEFAE6; } .player[data-theme="dark"] .stem-guitar { background: #17301F; }
.stem-piano { background: #E7EFFA; } .player[data-theme="dark"] .stem-piano { background: #16253D; }
.stem-other { background: #FEF8C8; } .player[data-theme="dark"] .stem-other { background: #33301A; }
.stem-vocals { background: #FFE3E7; } .player[data-theme="dark"] .stem-vocals { background: #331A21; }
.stem-backing { background: #E2E5FF; } .player[data-theme="dark"] .stem-backing { background: #232346; }

.master-row { display: flex; align-items: center; gap: clamp(12px, 2vw, 26px); padding: 20px 8px 6px; }
.master-label { font-size: 14px; font-weight: 600; color: var(--mid); white-space: nowrap; }
.master-track { position: relative; flex: 1; height: 5px; border-radius: 99px; background: var(--masterRest); display: block; }
.master-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 79%; background: var(--masterFill); border-radius: 99px; display: block; }
.master-tick { position: absolute; left: 84%; top: -3px; width: 2px; height: 11px; background: var(--masterTick); display: block; }
.master-knob { position: absolute; left: 79%; top: 50%; width: 17px; height: 17px; margin: -8.5px 0 0 -8.5px; border-radius: 99px; background: #FFFFFF; border: 1.5px solid var(--masterKnobBorder); display: block; }
.master-value { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-size: 14px; color: var(--mid); }

/* ---------- hero device mockup ---------- */
/* A real photo of a MacBook and an iPhone with both screens punched out to
   transparency. The photo sits on top and the app UI renders underneath, so the
   bezels and the phone's body always cover it with their real edges; each screen's
   content is also masked to that screen's exact shape. The app UI lays out at a
   fixed desktop size and the whole rig is scaled as one picture (app.js). */
.devices { padding-top: 24px; }
/* The live rig needs several full-size composited layers plus two masks, which exhausts
   the iOS Safari web process ("A problem repeatedly occurred"). Only desktop pointers get
   it (html.live-mockup, set in <head>); everyone else sees still renders of the same rig
   (mockup/still-*, made by _build/render_mockup.py), cross-faded between light and dark. */
.devices-still { position: relative; width: 100%; max-width: 1360px; margin: 0 auto; }
.devices-still .still { display: block; }
.devices-still img { display: block; width: 100%; height: auto; max-width: none; }
.devices-still .still-dark { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transition: opacity 0.9s ease-in-out; }
.devices-still.is-dark .still-dark { opacity: 1; }
.devices-stage { display: none; position: relative; width: 100%; max-width: 1360px; margin: 0 auto; aspect-ratio: 2400 / 1498; overflow: hidden; }
.live-mockup .devices-stage { display: block; }
.live-mockup .devices-still { display: none; }
@media (min-width: 760px) { .devices-stage, .devices-still { width: 90%; max-width: 1224px; } }
.devices-scale { position: absolute; top: 0; left: 0; transform-origin: top left; }
.photo-rig { position: relative; width: 2400px; height: 1498px; }
.photo-bg { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; max-width: none; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.screens { position: absolute; inset: 0; z-index: 1; }
.screen-clip { position: absolute; inset: 0; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.clip-laptop { -webkit-mask-image: url("mockup/mask-laptop.png"); mask-image: url("mockup/mask-laptop.png"); }
.clip-phone { -webkit-mask-image: url("mockup/mask-phone.png"); mask-image: url("mockup/mask-phone.png"); }
.ov-laptop { position: absolute; overflow: hidden; background: #F6F5F2; left: 12.129%; top: 5.073%; width: 78.275%; height: 79.455%; }
.ov-laptop[data-theme="dark"] { background: #0C0F14; }
.ov-phone { position: absolute; overflow: hidden; background: #000; left: 1.128%; top: 29.645%; width: 19.292%; height: 68.897%; }
.phone-shot { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: opacity 0.9s ease-in-out; }
.phone-shot.dark { opacity: 0; }
.ov-phone.is-dark .phone-shot.light { opacity: 0; }
.ov-phone.is-dark .phone-shot.dark { opacity: 1; }
.shell-scale { position: absolute; top: 0; left: 0; transform-origin: top left; }

.app-shell { display: flex; align-items: stretch; width: 1500px; min-height: 976px; background: #FFFFFF; }
.app-shell[data-theme="dark"] { background: #0C0F14; }
.sidebar { width: 276px; flex: 0 0 auto; padding: 40px 24px; display: flex; flex-direction: column; gap: 30px; background: #EEEDEA; color: #17171B; transition: background 0.5s ease, color 0.5s ease; }
.sidebar[data-theme="dark"] { background: #0C0F14; color: #F4F7FA; }
.sb-logo { display: flex; align-items: center; gap: 10px; }
.sb-mark { width: 30px; height: 34px; display: block; flex: 0 0 auto; }
.sb-mark img { width: 100%; height: 100%; display: block; }
.sb-mark-sm { width: 22px; height: 25px; }
.sb-name { font-size: 21px; font-weight: 800; letter-spacing: -0.03em; }
.sb-nav { display: flex; flex-direction: column; gap: 26px; }
.sb-item { display: flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 500; color: inherit; }
.sb-item svg { width: 21px; height: 21px; flex: 0 0 auto; color: #55555C; }
.sidebar[data-theme="dark"] .sb-item svg { color: #8A97A8; }
.sb-divider { height: 1px; background: #DAD9D4; margin-top: -6px; }
.sidebar[data-theme="dark"] .sb-divider { background: #1E2731; }
.sb-spacer { flex: 1; }
.sb-admin { align-self: flex-start; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: #6E6E78; border: 1px solid #DAD9D4; border-radius: 8px; padding: 6px 12px; }
.sidebar[data-theme="dark"] .sb-admin { color: #8A97A8; border-color: #1E2731; }
.sb-signout { color: #6E6E78; font-size: 15px; }
.sidebar[data-theme="dark"] .sb-signout { color: #8A97A8; }
.sb-signout svg { color: inherit; width: 18px; height: 18px; }
.main-col { flex: 1 1 auto; padding: 10px 30px; min-width: 0; }

/* the player inside the laptop is a picture: freeze every viewport-relative size */
.devices .player { padding: 16px; }
.devices .song-title { font-size: 27px; }
.devices .player-head-right { gap: 16px; }
.devices .player-panel { padding: 14px 18px 20px; }
.devices .wave-wrap { height: 123px; }
.devices .transport-row { padding: 14px 0 10px; }
.devices .time-readout { font-size: 15px; }
.devices .transport-controls { gap: 16px; }
.devices .stem-body { height: 154px; }
.devices .master-row { gap: 20px; }

/* controls, laid out like the current desktop app */
.devices .zoom-slot { display: flex; justify-content: flex-end; }
.devices .pill .lbl { display: flex; align-items: center; }
.devices .mag-glyph { display: inline-block; width: 9px; height: 9px; margin-right: 7px; position: relative; border: 1.5px solid var(--mid); border-radius: 99px; }
.devices .mag-glyph::after { content: ""; position: absolute; right: -3px; bottom: -2.5px; width: 5px; height: 1.5px; background: var(--mid); transform: rotate(45deg); }
.devices .loop-row { display: flex; justify-content: center; padding-bottom: 12px; }
.devices .loop-pill { min-width: 270px; justify-content: center; }
.devices .toolbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; overflow: visible; padding-top: 20px; }
.devices .toolbar > * { width: 100%; justify-content: center; }
.devices .pill > span { white-space: nowrap; }
.devices .pill > span:first-child { border-left: none; }
.devices .pill span span { padding: 0; }
.devices .pill .flat { margin-left: 7px; color: var(--dim); }
.devices .seg-lead { display: flex; align-items: center; gap: 9px; padding: 9px 13px; font-size: 13px; font-weight: 500; color: var(--ink); }
.devices .check-seg { display: flex; align-items: center; }
.devices .check-glyph { border-color: #22C55E; }

@media (prefers-reduced-motion: reduce) {
  .phone-shot { transition: none; }
}

/* ---------- footer ---------- */
.footer-bar { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: flex-start; border-top: 1px solid #E8E8E4; padding-top: 24px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; color: #6E6E78; }
.footer-brand { display: flex; align-items: center; gap: 5px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-mail { line-height: 1.8; text-align: right; }
@media (max-width: 759px) {
  /* logo alone on top, then the three links stacked with equal spacing */
  .footer-bar { flex-direction: column; align-items: center; gap: 14px; }
  .footer-brand { display: contents; }
  .footer-brand img { margin-bottom: 6px; }
  .footer-mail { text-align: center; line-height: normal; }
}

/* ---------- beta buttons ---------- */
.beta-btn { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; border-radius: 12px; padding: 17px 18px; width: 100%; border: none; font: inherit; text-align: left; cursor: pointer; }
.beta-btn.navy { background: #0B2545; color: #fff; }
.beta-btn.navy:hover { background: #071831; color: #fff; }
.beta-btn.blue { background: #1055AD; color: #fff; }
.beta-btn.blue:hover { background: #0D3D7C; color: #fff; }
.beta-btn.lightblue { background: #418CEB; color: #fff; }
.beta-btn.lightblue:hover { background: #6FAAF2; color: #fff; }
.beta-btn span { color: inherit; }

.dl-caret { display: inline-block; margin-left: 8px; font-size: 12px; transition: transform 0.2s ease; }
.dl-dropdown button[aria-expanded="true"] .dl-caret { transform: rotate(180deg); }

.dl-options { display: none; flex-direction: column; gap: 4px; margin-top: 8px; padding: 8px; background: #F6F5F2; border: 1px solid #E8E8E4; border-radius: 12px; }
.dl-options.open { display: flex; }
.dl-option-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px; border-radius: 8px; font-size: 14.5px; font-weight: 600; color: #17171B; }
.dl-option-link:hover { background: #FFFFFF; color: #1055AD; }
.dl-option-caption { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: #6E6E78; }

/* ---------- mobile accordions (long text sections) ---------- */
.feature-list { display: flex; flex-direction: column; }
.accordion-caret { display: none; }

@media (max-width: 759px) {
  .accordion-trigger { cursor: pointer; }
  .accordion-panel { display: none; }
  .accordion.open .accordion-panel { display: block; }
  .accordion.open .accordion-panel.feature-list { display: flex; }
  .accordion-caret { display: inline-block; margin-left: auto; font-size: 12px; color: #6E6E78; transition: transform 0.2s ease; flex: 0 0 auto; }
  .accordion-caret.light { color: #8A97A8; }
  .accordion.open .accordion-caret { transform: rotate(180deg); }
}

/* ---------- how-it-works steps grid ---------- */
.steps-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
/* the privacy point runs the full width under the four steps, title beside the text */
.step-wide { display: grid; grid-template-columns: minmax(0, max-content) 1fr; gap: 0 clamp(18px, 2.2vw, 32px); align-items: start; }
.step-wide > div { max-width: 320px; }                /* the title column follows the title, not a fixed width */
.step-wide > p { padding-top: 38px; }                 /* start on the title's line, not the number's */
@media (max-width: 759px) { .step-wide { grid-template-columns: 1fr; gap: 12px; } .step-wide > p { padding-top: 0; } }
@media (max-width: 1179px) { .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .steps-grid { grid-template-columns: 1fr; } }

/* ---------- misc reveal ---------- */
[data-reveal] { opacity: 1; }