/* Sonaroom - static site
   ---------------------------------------------------------------------------
   One stylesheet, no framework, no build step, no JavaScript - the same
   arrangement as the Sonasync site, and THE SAME STYLESHEET as its base: the
   rules down to "Sonaroom additions" are a copy of
   sonasync/website/styles.css, so the two sites read as one family made by
   the same people. If Sonasync's palette changes, copy it across here too.
*/

:root {
  --bg:            #0a0c11;
  --bg-alt:        #0d1017;
  --surface:       #12161f;
  --surface-2:     #171c27;
  --sunken:        #090b0f;
  --border:        #232a37;
  --border-strong: #303947;

  --text:          #e6eaf2;
  --text-muted:    #98a3b5;
  --text-faint:    #6b7688;

  --accent:        #4a9eff;
  --accent-dim:    #1e3a5c;
  --warn:          #f5a623;
  --good:          #3ecf8e;
  --bad:           #ff6b6b;

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', Consolas, 'Liberation Mono', monospace;

  --wrap: 1140px;
  --r: 14px;
  --r-sm: 8px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: #04070d;
  padding: 10px 16px; border-radius: var(--r-sm); font-weight: 600; z-index: 100;
}
.skip:focus { left: 16px; top: 16px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ---- top bar ------------------------------------------------------------ */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 12, 17, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 24px; }

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 30px; height: 30px; flex: none; }
.brand-name { font-weight: 700; letter-spacing: -.01em; color: var(--text); font-size: 16px; }
.brand-name span { color: var(--accent); }

.nav { display: flex; align-items: center; gap: 17px; }
.nav a {
  color: var(--text-muted);
  font-size: 14px; font-weight: 500;
  /* NOWRAP IS THE WHOLE FIX. Flex items shrink below their content, so
     without this the labels broke INSIDE themselves - "What it / does",
     "Processor / limits" - and a two-line nav reads as a broken page rather
     than as a full one. Letting an item keep its width means the bar
     overflows honestly if it ever gets too long again, which is visible in
     one glance instead of looking like a rendering fault. */
  white-space: nowrap;
  position: relative;
  transition: color .15s ease;
}
/* Scoped away from the CTA ON PURPOSE. `.nav a` is (0,1,1) and `.nav-cta` is
   (0,1,0), so a padding declared on the former QUIETLY BEATS the button's own
   - which left "Get it" with 17px of side padding replaced by none, the blue
   box hugging the text, and the label looking clipped inside its own button.
   The room is only here to give the hover rule below somewhere to sit, and
   the CTA has no hover rule, so it does not want it anyway. */
.nav a:not(.nav-cta) {
  padding: 6px 0;
}
.nav a:not(.nav-cta)::after {
  /* A rule that grows from the middle on hover. Cheaper to read than a
     colour change alone: the eye catches movement, and it lands under the
     word rather than moving the word. */
  content: "";
  position: absolute;
  left: 50%; right: 50%; bottom: 0;
  height: 1.5px; border-radius: 2px;
  background: var(--accent);
  transition: left .18s ease, right .18s ease;
}
.nav a:not(.nav-cta):hover { color: var(--text); text-decoration: none; }
.nav a:not(.nav-cta):hover::after { left: 0; right: 0; }

.nav-cta {
  background: var(--accent); color: #04070d !important;
  padding: 8px 17px; border-radius: var(--r-sm); font-weight: 600;
  white-space: nowrap;
  transition: background .15s ease, transform .15s ease;
}
.nav-cta:hover { background: #63adff; transform: translateY(-1px); }
.nav-cta:active { transform: translateY(0); }

/* Shed the narrowest-value items first rather than all of them at once.
   The old rule went from eight links to none in one step, so a 1000px window
   - an ordinary laptop beside a rack - lost the whole bar while still having
   room for most of it. */
/* Ten items is a full bar. Shed the two narrowest-value ones as soon as the
   window is off full width, rather than waiting for the bar to be actually
   tight - a nav with 20px of slack is one word away from breaking again. */
@media (max-width: 1240px) {
  .nav { gap: 15px; }
  .nav a[href="#positions"], .nav a[href="#limiters"] { display: none; }
}
@media (max-width: 940px) {
  .nav a[href="#sheet"], .nav a[href="#limits"] { display: none; }
}
@media (max-width: 760px) {
  .nav a:not(.nav-cta) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav a, .nav a::after, .nav-cta { transition: none; }
  .nav-cta:hover { transform: none; }
}

/* ---- hero --------------------------------------------------------------- */
.hero { padding: 84px 0 72px; border-bottom: 1px solid var(--border); overflow: hidden; }
.hero-inner {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 56px; align-items: center;
}
@media (max-width: 980px) { .hero-inner { grid-template-columns: 1fr; gap: 40px; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 20px;
  font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-dim);
  padding: 6px 13px; border-radius: 999px;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.hero-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; }
.hero-badges .eyebrow { margin: 0; }
.whats-new-badge {
  display: inline-flex; align-items: center;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--accent-dim);
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent); text-decoration: none;
  animation: pulse-soft 3.6s ease-in-out infinite;
}
.whats-new-badge:hover { background: var(--accent-dim); border-color: var(--accent); animation: none; }
@keyframes pulse-soft { 0%,100% { opacity: 1; } 50% { opacity: .62; } }

h1 {
  margin: 0 0 22px;
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.1; letter-spacing: -.03em; font-weight: 700;
}
.lede { margin: 0 0 30px; font-size: 17.5px; color: var(--text-muted); max-width: 56ch; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }

.btn {
  display: inline-block; padding: 13px 26px; border-radius: var(--r-sm);
  font-weight: 600; font-size: 15px; border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #04070d; }
.btn-primary:hover { background: #63adff; }
.btn-ghost { border-color: var(--border-strong); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-big { padding: 16px 34px; font-size: 16px; }

.hero-linux { margin: 14px 0 10px; font-size: 14px; color: var(--text-muted); }
.hero-linux-ver { font-family: var(--mono); font-size: 13px; opacity: .75; }
.hero-linux a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; }
.hero-linux a:hover { border-bottom-color: var(--accent); }
.hero-note { margin: 0; font-size: 13.5px; color: var(--text-faint); line-height: 1.7; }
.asio-note { display: flex; gap: 16px; align-items: center; margin: 0 0 14px; }
.asio-note svg { flex: none; }
.asio-note p { margin: 0; font-size: 13.5px; color: var(--text-faint); line-height: 1.7; }
.asio-note .asio-tm { font-size: 12px; }
@media (max-width: 480px) { .asio-note { flex-direction: column; align-items: flex-start; } }

.hero-art {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.plot { width: 100%; height: auto; display: block; }
.plot .grid line { stroke: #1b212c; stroke-width: 1; }
.plot path { fill: none; stroke-linecap: round; }
.trace-faint { stroke: #48566b; stroke-width: 1.6; stroke-dasharray: 4 4; }
.trace-main  { stroke: var(--accent); stroke-width: 3; }
.trace-sub   { stroke: #ff8a4a; stroke-width: 2; stroke-dasharray: 6 4; }
.trace-hi    { stroke: #3ecf8e; stroke-width: 2; stroke-dasharray: 6 4; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip {
  font-family: var(--mono); font-size: 12px;
  background: var(--sunken); border: 1px solid var(--border);
  color: var(--text-muted); padding: 5px 10px; border-radius: 6px;
}
.chip-warn { border-color: #5c4415; color: var(--warn); }

/* ---- sections ----------------------------------------------------------- */
.section { padding: 84px 0; border-bottom: 1px solid var(--border); }
.section-alt { background: var(--bg-alt); }

.kicker {
  margin: 0 0 12px;
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
}
h2 {
  margin: 0 0 20px;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.18; letter-spacing: -.02em; font-weight: 700;
}
h3 { margin: 0 0 10px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }

.section-lede { margin: 0 0 18px; color: var(--text-muted); font-size: 16.5px; max-width: 68ch; }
.section-lede.small { font-size: 14.5px; color: var(--text-faint); }
.section-lede.centered { max-width: none; text-align: center; margin-top: 28px; }
.section-lede em { color: var(--text); font-style: italic; }

/* ---- the eight stages --------------------------------------------------- */
.stages {
  list-style: none; margin: 40px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden;
}
@media (max-width: 980px) { .stages { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .stages { grid-template-columns: 1fr; } }

.stages li { background: var(--surface); padding: 22px 20px; }
.stages span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent-dim); color: var(--accent);
  font-size: 12px; font-weight: 700; margin-bottom: 12px;
}
.stages b { display: block; margin-bottom: 6px; font-size: 15px; }
.stages p { margin: 0; font-size: 13.5px; color: var(--text-faint); line-height: 1.6; }

/* ---- split layouts ------------------------------------------------------ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.split-wide { grid-template-columns: 1.15fr .85fr; }
@media (max-width: 980px) { .split, .split-wide { grid-template-columns: 1fr; gap: 32px; } }

.ticks { list-style: none; margin: 22px 0 0; padding: 0; }
.ticks li {
  position: relative; padding-left: 26px; margin-bottom: 10px;
  color: var(--text-muted); font-size: 15px;
}
.ticks li::before {
  content: ""; position: absolute; left: 4px; top: 9px;
  width: 6px; height: 10px; border: solid var(--good);
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.ticks em { color: var(--text); font-style: italic; }

/* ---- the sheet ---------------------------------------------------------- */
.paper {
  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 22px;
  overflow-x: auto;
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
}
.paper pre {
  margin: 0; font-family: var(--mono); font-size: 12px; line-height: 1.65;
  color: var(--text-muted); white-space: pre;
}
.paper b { color: var(--accent); font-weight: 500; }

/* ---- limiter cards ------------------------------------------------------ */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 38px 0 32px; }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 24px;
}
.card-accent { border-color: var(--accent-dim); background: linear-gradient(160deg, #121a28, var(--surface)); }
.card-label { margin: 0 0 14px; font-size: 13px; color: var(--text-faint); }
.card-figure {
  margin: 0 0 12px; font-family: var(--mono);
  font-size: 34px; font-weight: 500; letter-spacing: -.02em; color: var(--text);
}
.card-figure span { display: block; font-family: var(--sans); font-size: 12.5px; color: var(--text-faint); font-weight: 500; letter-spacing: 0; margin-top: 4px; }
.card-accent .card-figure { color: var(--accent); }
.card-note { margin: 0; font-size: 13px; color: var(--text-muted); font-family: var(--mono); line-height: 1.7; }
.card-accent .card-note { font-family: var(--sans); }

.notebox {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r); padding: 26px 28px;
}
.notebox p { margin: 0 0 18px; color: var(--text-muted); font-size: 15px; max-width: 74ch; }
.notebox p:last-child { margin-bottom: 0; }
.notebox h3 { color: var(--text); }
.notebox h3 + p { margin-top: 0; }
.notebox em { color: var(--text); font-style: italic; }

/* ---- data table --------------------------------------------------------- */
.table-scroll { overflow-x: auto; margin: 34px 0 20px; }
.data {
  width: 100%; border-collapse: collapse; min-width: 640px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden;
}
.data caption {
  caption-side: top; text-align: left; padding: 0 0 12px;
  font-size: 13px; color: var(--text-faint);
}
.data th, .data td { padding: 14px 18px; text-align: left; font-size: 14.5px; }
.data thead th {
  background: var(--surface-2); color: var(--text-faint);
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.data tbody tr + tr td { border-top: 1px solid var(--border); }
.data td:first-child, .data td:nth-child(3), .data td:nth-child(4) { font-family: var(--mono); }
.data td { color: var(--text-muted); }
.data .ok { color: var(--good); font-weight: 600; }
.data .no { color: var(--bad); font-weight: 600; }

/* ---- tiers -------------------------------------------------------------- */
.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 38px;
         align-items: start; }
@media (max-width: 800px) { .tiers { grid-template-columns: 1fr; } }

.tier {
  position: relative;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 30px;
}
.tier-featured { border-color: var(--accent-dim); background: linear-gradient(170deg, #111a27, var(--surface)); }
.tier-badge {
  position: absolute; top: -11px; left: 30px;
  background: var(--accent); color: #04070d;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px; margin: 0;
}
.tier h3 { font-size: 22px; margin-bottom: 4px; }
/* The free tier is a tier, not an absence of one, so it is badged in the
   quiet colour rather than the accent - present, clearly not the pitch. */
.tier-badge-quiet { background: var(--border-strong); color: var(--text); }

.tier-price { margin: 10px 0 2px; font-size: 15px; color: var(--text-muted); }
.tier-price strong {
  font-family: var(--mono); font-size: 27px; color: var(--text);
  font-weight: 600; letter-spacing: -.02em;
}
.tier-price-alt { display: block; margin-top: 3px; font-size: 13.5px; color: var(--text-faint); }
.tier-price-free { font-size: 15px; color: var(--good); font-weight: 600; }
.tier-note {
  margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--border);
  font-size: 13.5px; color: var(--text-faint);
}
.tier-for { margin: 0 0 20px; font-size: 14px; color: var(--text-faint); }
.tier ul { list-style: none; margin: 0; padding: 0; }
.tier li {
  position: relative; padding-left: 24px; margin-bottom: 11px;
  font-size: 14.5px; color: var(--text-muted);
}
.tier li::before {
  content: ""; position: absolute; left: 2px; top: 8px;
  width: 6px; height: 10px; border: solid var(--accent);
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* ---- buying ------------------------------------------------------------- */
.pay {
  margin-top: 34px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r); padding: 28px;
}
.pay h3 { color: var(--text); margin-bottom: 14px; }
.pay p { margin: 0 0 14px; font-size: 14.5px; color: var(--text-muted); }
.pay strong { color: var(--text); }

/* ---- the honest box ----------------------------------------------------- */
.honest {
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r); padding: 28px;
}
.honest h3 { color: var(--text); margin-bottom: 14px; }
.honest p { margin: 0 0 15px; font-size: 14.5px; color: var(--text-muted); }
.honest em { color: var(--text); font-style: italic; }
.ask {
  margin: 0 !important; padding-top: 16px; border-top: 1px solid var(--border);
  color: var(--text) !important;
}
.ask b { color: var(--accent); }

/* ---- footer ------------------------------------------------------------- */
.footer { padding: 56px 0 32px; background: var(--sunken); }
.footer-inner {
  display: flex; flex-wrap: wrap; gap: 32px;
  justify-content: space-between; align-items: flex-start;
  padding-bottom: 32px; border-bottom: 1px solid var(--border);
}
.footer-note { margin: 14px 0 0; font-size: 14px; color: var(--text-faint); max-width: 40ch; }
.footer-links { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.footer-links a { color: var(--text-muted); font-size: 14px; }
.footer-links a:hover { color: var(--text); text-decoration: none; }
.footer-legal {
  display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: space-between;
  padding-top: 22px;
}
.footer-legal p { margin: 0; font-size: 12.5px; color: var(--text-faint); }

/* The changelog list. Tighter than a prose list and without the marker, which
   at this length reads as clutter rather than structure. */
/* Two columns of change notes, side by side. A hairline between items was
   the only thing separating them, which reads fine for one-line entries and
   runs together the moment an entry needs a sentence of explanation.

   So: a marker on every item, and a DIFFERENT marker per column. Added items
   get a plus in the accent colour, fixed ones a check in the good colour, so
   which list you are reading is answerable from the shape in the margin
   without going back up to the heading. */
.changes { list-style: none; padding: 0; margin: 0; }
.changes li {
  position: relative;
  padding: 10px 0 10px 26px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.55;
}
.changes li::before {
  content: "+";
  position: absolute;
  left: 4px;
  top: 10px;
  font-weight: 700;
  color: var(--accent);
}
.changes.fixed li::before {
  content: "¹3";          /* check mark */
  color: var(--good);
  font-weight: 400;
}
.changes li:last-child { border-bottom: none; }
.changes em { color: var(--warn, #f5a623); font-style: normal; }

/* The lead phrase carries the item; the rest is why. Making it a block puts
   the claim on its own line, so the column can be read at a glance and the
   explanation only when it is wanted. */
.changes li > strong:first-child { display: block; color: var(--text); }

/* ------------------------------------------------------------------------ */
/* "Be told when there is a new one".
 *
 * A framed block rather than another column, because it is the one thing on
 * the page a returning visitor is meant to ACT on and the changes beside it
 * would otherwise swallow it. Sits above the release list for the same
 * reason: somebody who reads the changes and leaves has no way back except
 * remembering to return, which is the problem this block exists to solve. */
.notify {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--sunken);
  padding: 20px 22px;
  margin: 0 0 34px;
}
.notify h3 { margin: 0 0 10px; }
.notify .changes li { border-bottom-color: var(--border); }
.notify .changes li:last-child { border-bottom: 0; padding-bottom: 0; }
/* An arrow, not a plus: these are things to go and do, not things that
   changed in a release. */
.notify .changes li::before { content: "\2192"; color: var(--accent); }

/* The caveat under a block - smaller and quieter than body text, but not so
   faint that it reads as decoration. It is usually the sentence that stops
   somebody expecting the wrong thing. */
.fine {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 14px 0 0;
}

/* ------------------------------------------------------------------------ */
/* The job, in order.
 *
 * A numbered list rather than prose because this is the one part of the page
 * somebody reads with their hands on a rig, and a procedure hidden inside
 * paragraphs has to be reconstructed before it can be followed. Framed like
 * the notify block so the two read as "things to do" against the surrounding
 * "things that are true". */
.steps {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--sunken);
  padding: 20px 22px 22px;
  margin: 0 0 34px;
}
.steps h3 { margin: 0 0 14px; }

.numbered { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.numbered li {
  counter-increment: step;
  position: relative;
  padding: 9px 0 9px 38px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  line-height: 1.55;
}
.numbered li:last-child { border-bottom: 0; padding-bottom: 0; }
.numbered li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 9px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 12.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---- the previous releases, folded away ------------------------------- */
/*
   Forty-odd entries of several paragraphs each is a wall, and the one a
   visitor wants is nearly always the latest. The rest stays on the page -
   it is the record of what was wrong and what was done about it - but out
   of the way.

   <details> and no script: the element is keyboard-reachable and announced
   by a screen reader for free, and it still opens with scripting off. The
   default triangle is replaced because it reads as a tree node rather than
   a control, but focus-visible is left to the global rule so the keyboard
   outline is the same one everything else gets.
*/
.older-releases { margin-top: 10px; }
.older-releases > summary {
  display: inline-block;
  padding: 11px 22px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: border-color .15s ease, color .15s ease;
}
.older-releases > summary::-webkit-details-marker { display: none; }
.older-releases > summary::after {
  content: " \25BE";          /* pointing down: press to open */
  color: var(--text-muted);
}
.older-releases[open] > summary::after { content: " \25B4"; }
.older-releases[open] > summary { margin-bottom: 18px; }
.older-releases > summary:hover {
  border-color: var(--accent);
  color: var(--accent);
}


/* =========================================================================
   Sonaroom additions - everything below is this site's own.
   ========================================================================= */

.beta-pill {
  display: inline-block; margin-left: 8px; padding: 2px 8px;
  border: 1px solid #5c4415; border-radius: 999px;
  color: var(--warn); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; vertical-align: 2px;
}

/* The Sonasync <-> Sonaroom round trip, as a row of steps */
.flow {
  list-style: none; margin: 38px 0 30px; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
  counter-reset: flow;
}
@media (max-width: 1180px) { .flow { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .flow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .flow { grid-template-columns: 1fr; } }
.flow li {
  counter-increment: flow; position: relative;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 20px 18px 18px;
}
.flow li::before {
  content: counter(flow);
  display: grid; place-items: center;
  width: 24px; height: 24px; margin-bottom: 12px;
  border-radius: 50%; background: var(--accent-dim); color: var(--accent);
  font-size: 12.5px; font-weight: 700;
}
.flow .who {
  display: block; margin-bottom: 4px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-faint);
}
.flow .who.sona { color: var(--good); }
.flow .who.room { color: var(--accent); }
.flow b { display: block; margin-bottom: 6px; font-size: 15px; }
.flow p { margin: 0; font-size: 13.5px; color: var(--text-faint); line-height: 1.6; }

/* The science: one panel per model, with its formula */
.sci { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 38px 0 24px; }
@media (max-width: 900px) { .sci { grid-template-columns: 1fr; } }
.sci-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 24px 24px 20px;
  min-width: 0;
}
.sci-card h3 { font-size: 17px; margin-bottom: 6px; }
.sci-card p { margin: 0 0 12px; font-size: 14.5px; color: var(--text-muted); }
.sci-card p:last-child { margin-bottom: 0; }
.sci-card .src { font-size: 13px; color: var(--text-faint); }
.formula {
  margin: 12px 0 14px; padding: 14px 16px;
  background: var(--sunken); border: 1px solid var(--border); border-radius: var(--r-sm);
  font-family: var(--mono); font-size: 13.5px; line-height: 1.75; color: var(--text);
  overflow-x: auto; white-space: pre;
}
.formula .c { color: var(--text-faint); }
.formula b { color: var(--accent); font-weight: 500; }

/* Standards, as small labels */
.stds { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.stds li {
  padding: 5px 11px; border: 1px solid var(--border-strong); border-radius: 999px;
  font-family: var(--mono); font-size: 12.5px; color: var(--text-muted); background: var(--surface);
}
.stds li b { color: var(--text); font-weight: 500; }

/* The checks, as a table that keeps its numbers in mono */
.data.checks td:first-child { font-family: var(--sans); color: var(--text); }
.data.checks td:nth-child(2) { font-family: var(--mono); color: var(--good); white-space: nowrap; }
.data.checks td:nth-child(3), .data.checks td:nth-child(4) { font-family: var(--sans); }

/* The research: a reading list, the AES papers marked */
.refs { list-style: none; margin: 30px 0 0; padding: 0; }
.refs li {
  display: grid; grid-template-columns: 64px 1fr; gap: 16px;
  padding: 18px 0; border-bottom: 1px solid var(--border);
}
.refs li:last-child { border-bottom: 0; }
.refs .tag {
  align-self: start; text-align: center;
  padding: 3px 0; border-radius: 6px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .04em;
  border: 1px solid var(--border-strong); color: var(--text-faint);
}
.refs .tag.aes { border-color: var(--accent-dim); background: #0f1a2a; color: var(--accent); }
.refs cite { display: block; font-style: normal; color: var(--text); font-size: 15px; }
.refs .where { display: block; margin-top: 2px; font-size: 13.5px; color: var(--text-faint); }
.refs p { margin: 8px 0 0; font-size: 14px; color: var(--text-muted); }
.refs p b { color: var(--text); font-weight: 600; }
@media (max-width: 560px) { .refs li { grid-template-columns: 1fr; gap: 8px; } .refs .tag { justify-self: start; padding: 3px 10px; } }

/* Pricing: the price is reserved, so the figure is a promise, not a number */
.tiers-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .tiers-3 { grid-template-columns: 1fr; } }
.tier-price .tba {
  display: inline-block; font-family: var(--mono); font-size: 22px; font-weight: 500;
  color: var(--text); letter-spacing: -.01em;
}
.reserve-btn { margin-top: 22px; width: 100%; }

/* Downloads list */
.dl { list-style: none; margin: 22px 0 18px; padding: 0; }
.dl li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 15px;
}
.dl li span { font-family: var(--mono); font-size: 13px; color: var(--text-faint); white-space: nowrap; }

/* The bar, shed in steps for this site's own links (the rules above are keyed
   to Sonasync's). The name never breaks over two lines. */
.brand-name { white-space: nowrap; }
@media (max-width: 1240px) {
  .nav a[href="#checks"], .nav a[href="#stands"] { display: none; }
}
@media (max-width: 1040px) {
  .nav a[href="#research"], .nav a[href="#what"] { display: none; }
}
@media (max-width: 420px) {
  .topbar .beta-pill { display: none; }
}
/* the three reserve buttons on one line, whatever the length of the list */
.tiers-3 .tier { display: flex; flex-direction: column; }
.tiers-3 .tier ul { margin-bottom: 22px; }
.tiers-3 .reserve-btn { margin-top: auto; }
/* phones: the long file names go under their label and may break */
.split > * { min-width: 0; }
@media (max-width: 600px) {
  .dl li { flex-direction: column; align-items: flex-start; gap: 2px; }
  .dl li span { white-space: normal; overflow-wrap: anywhere; }
}

/* The product name, with its tagline on the line below, above the hero headline */
.hero-product { margin: 0 0 14px; line-height: 1.25; }
.hero-product b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.hero-product span { display: block; font-size: 14px; font-weight: 500; color: var(--accent); }