/* ══════════════════════════════════════════════════════════════════════════════
   RTM AUDIO v2 — PAGE. Every surface that is not the homepage: the store, the account,
   the preset submission, the legal pages.

   Requires /v2/base.css, which owns the tokens, the reset, the bar and the ground.
   ⚠ Declares no token of its own. If a colour is needed here that base.css does not have,
   it goes in base.css, not here.

   THE IDEA. The homepage is a place you walk through; these are the rooms off it. So they keep
   the same ground, the same lamp, the same bar and the same face, and they differ only in that
   they hold information rather than a performance. What they must NOT do is revert to the old
   site's datasheet furniture — no blueprint grid, no binding rail, no rev. numbers. The v2
   register is quiet and wide, and it is the same register whether you are listening or buying.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── the shell ─────────────────────────────────────────────────────────────── */
.sheet{position:relative;z-index:1;max-width:1180px;margin:0 auto;
  padding:calc(var(--u)*16) calc(var(--u)*4) calc(var(--u)*10)}
.sheet-narrow{max-width:760px}

/* ── the head of a page. Same construction as a room's head: a small mark above, one wide
      display line, one sentence. Nothing else competes. ── */
.p-head{margin-bottom:calc(var(--u)*10)}
/* .p-kicker moved to base.css — the homepage uses it too, and a token or a piece of
   furniture lives in exactly one file. */
.p-title{margin-top:calc(var(--u)*3);
  font-family:var(--display);font-weight:var(--display-weight);
  letter-spacing:-.035em;line-height:.86;
  font-size:clamp(2.6rem,7.5vw,6.5rem);color:var(--chalk)}
.p-lede{margin-top:calc(var(--u)*4);font-size:clamp(1rem,1.4vw,1.25rem);line-height:1.55;
  color:var(--chalk-2);max-width:52ch;font-weight:300}
.p-lede b{color:var(--chalk);font-weight:400}

/* ── the shelf: one product per row. The store is a shelf you read down, not a grid of cards.
      A card grid makes six plug-ins look like a marketplace; a shelf makes them look like a
      catalogue with an author. ── */
.shelf{border-top:1px solid var(--edge-2)}
.shelf-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) auto;
  gap:calc(var(--u)*5);align-items:center;
  padding:calc(var(--u)*5) 0;border-bottom:1px solid var(--edge-2);
  transition:background .5s var(--slow)}
.shelf-row:hover{background:linear-gradient(90deg,rgba(255,255,255,.022),transparent 70%)}
.shelf-id{display:flex;align-items:baseline;gap:calc(var(--u)*2)}
.shelf-no{font-family:var(--mark);font-size:11px;letter-spacing:.2em;color:var(--tone)}
.shelf-name{font-family:var(--display);font-weight:var(--display-weight);
  font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1;letter-spacing:-.03em;color:var(--chalk)}
.shelf-lane{margin-top:calc(var(--u)*1.5);font-family:var(--mark);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dust)}
.shelf-line{color:var(--chalk-2);line-height:1.55;font-weight:300;max-width:46ch}
.shelf-act{display:flex;flex-direction:column;align-items:flex-end;gap:calc(var(--u)*2);
  min-width:150px}
.shelf-price{font-family:var(--display);font-weight:var(--display-weight);font-size:1.6rem;line-height:1;
  color:var(--chalk)}
.shelf-ver{font-family:var(--mark);font-size:var(--t-fine);letter-spacing:.16em;text-transform:uppercase;
  color:var(--dust)}
@media(max-width:860px){
  .shelf-row{grid-template-columns:1fr;gap:calc(var(--u)*3)}
  .shelf-act{align-items:flex-start}
}

/* ── the bundle. It is our attach-rate mechanism, so it is stated once, plainly, at the top of
      the shelf rather than hidden as an upsell at the end. ── */
.bundle{border:1px solid var(--edge);border-top:2px solid var(--lamp);
  display:grid;grid-template-columns:1fr 300px;margin-bottom:calc(var(--u)*8)}
.bundle-l{padding:calc(var(--u)*5);border-right:1px solid var(--edge-2)}
.bundle-r{padding:calc(var(--u)*5);display:flex;flex-direction:column;justify-content:center;
  gap:calc(var(--u)*2);align-items:flex-start}
.bundle-name{font-family:var(--display);font-weight:var(--display-weight);
  font-size:clamp(1.6rem,3vw,2.4rem);line-height:1;letter-spacing:-.03em}
.bundle-price{font-family:var(--display);font-weight:var(--display-weight);font-size:clamp(2.4rem,5vw,3.6rem);
  line-height:.9;color:var(--chalk)}
.bundle-inc{font-family:var(--mark);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dust)}
@media(max-width:720px){
  .bundle{grid-template-columns:1fr}
  .bundle-l{border-right:0;border-bottom:1px solid var(--edge-2)}
}

/* ── controls ──────────────────────────────────────────────────────────────── */
.act{display:inline-flex;align-items:center;justify-content:center;
  background:var(--lamp);color:var(--air);border:0;cursor:pointer;
  font-family:var(--mark);font-size:var(--t-act);letter-spacing:.14em;text-transform:uppercase;
  padding:calc(var(--u)*1.9) calc(var(--u)*3.5);
  transition:filter .3s var(--slow)}
.act:hover{filter:brightness(1.12)}
.act[disabled]{background:transparent;color:var(--dust);border:1px solid var(--edge);
  cursor:not-allowed;filter:none}
.act-quiet{background:transparent;color:var(--chalk-2);border:1px solid var(--edge)}
.act-quiet:hover{filter:none;color:var(--chalk);border-color:var(--chalk-2)}
.link{color:var(--chalk-2);border-bottom:1px solid var(--edge);
  transition:color .3s var(--slow),border-color .3s var(--slow)}
.link:hover{color:var(--lamp);border-color:var(--lamp)}

/* ── notes and states ──────────────────────────────────────────────────────── */
.note{border:1px solid var(--edge-2);border-left:2px solid var(--lamp);
  padding:calc(var(--u)*3) calc(var(--u)*4);color:var(--chalk-2);line-height:1.55;
  margin-bottom:calc(var(--u)*6)}
.note.warn{border-left-color:#d8a13c}
.trust{display:flex;gap:calc(var(--u)*5);flex-wrap:wrap;margin-top:calc(var(--u)*7);
  font-family:var(--mark);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dust)}
.trust span{display:flex;align-items:center;gap:calc(var(--u)*1.5)}
.trust i{width:5px;height:5px;border-radius:50%;background:var(--lamp);display:block;flex:none}

/* ── forms. Used by the account page and the preset submission. ────────────── */
.field{display:block;margin-bottom:calc(var(--u)*3)}
.field span{display:block;font-family:var(--mark);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dust);margin-bottom:calc(var(--u)*1.5)}
.field input,.field textarea,.field select{
  width:100%;background:var(--air-2);border:1px solid var(--edge);color:var(--chalk);
  font-family:var(--text);font-size:1rem;font-weight:300;
  padding:calc(var(--u)*1.9) calc(var(--u)*2.5);
  transition:border-color .3s var(--slow)}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--lamp)}
.field textarea{min-height:140px;resize:vertical;line-height:1.55}

/* ── prose. The legal pages, and only the legal pages. Set narrow and quiet: nobody should have
      to fight the type to read a licence. ── */
.prose{max-width:68ch;color:var(--chalk-2);line-height:1.7;font-weight:300}
.prose h2{margin:calc(var(--u)*7) 0 calc(var(--u)*2.5);
  font-family:var(--display);font-weight:var(--display-weight);letter-spacing:-.02em;
  font-size:clamp(1.3rem,2.2vw,1.8rem);color:var(--chalk);line-height:1.1}
.prose h3{margin:calc(var(--u)*5) 0 calc(var(--u)*2);
  font-family:var(--mark);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dust)}
.prose p{margin-bottom:calc(var(--u)*2.5)}
.prose ul,.prose ol{margin:0 0 calc(var(--u)*3) calc(var(--u)*3)}
.prose li{margin-bottom:calc(var(--u)*1.5)}
.prose a{color:var(--chalk);border-bottom:1px solid var(--edge)}
.prose a:hover{color:var(--lamp);border-color:var(--lamp)}
.prose strong,.prose b{color:var(--chalk);font-weight:400}

/* ── data rows: licences on the account page ───────────────────────────────── */
.rows{border-top:1px solid var(--edge-2)}
.rows .r{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:calc(var(--u)*4);
  align-items:center;padding:calc(var(--u)*3.5) 0;border-bottom:1px solid var(--edge-2)}
.rows .k{font-family:var(--display);font-weight:var(--display-weight);font-size:1.15rem;color:var(--chalk)}
.rows .m{font-family:var(--mark);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dust)}
@media(max-width:720px){.rows .r{grid-template-columns:1fr;gap:calc(var(--u)*1.5)}}

/* ── the lane rail. Built from the products the store is ACTUALLY showing, so every pill is a
      real URL a crawler can follow and it cannot drift from the shelf above it. ── */
.lanes{margin-top:calc(var(--u)*6)}
.lanes ul{display:flex;gap:calc(var(--u)*1.5);flex-wrap:wrap;list-style:none;margin:0}
.lanes a{display:inline-flex;align-items:center;gap:calc(var(--u)*1.5);
  border:1px solid var(--edge);padding:calc(var(--u)*1.4) calc(var(--u)*2.5);
  font-family:var(--mark);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dust);transition:color .3s var(--slow),border-color .3s var(--slow)}
.lanes a:hover{color:var(--chalk);border-color:var(--chalk-2)}
.lanes a[aria-current]{color:var(--chalk);border-color:var(--lamp)}
.lanes .n{color:var(--lamp)}

/* the store with nothing in it. It still has to point somewhere the visitor can act. */
.empty{margin-top:calc(var(--u)*6);color:var(--chalk-2);line-height:1.6}
.empty a{color:var(--lamp);border-bottom:1px solid var(--lamp)}

/* ── the bar, on a page that scrolls ────────────────────────────────────────
   The homepage can use `mix-blend-mode:difference` because every room is a full screen and the
   bar always sits over a known ground. A page that scrolls has no such guarantee: the bar
   collided with the bundle price the moment the shelf scrolled under it. Here it gets a real
   ground of its own instead. */
.bar{mix-blend-mode:normal;background:rgba(11,11,13,.86);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--edge-2)}

/* A control that lives in the bar must look like the links beside it, not like a native OS
   button dropped into the header. The store has a cart control here and the account has a
   log out; both are <button> because they act rather than navigate. */
.bar button{background:transparent;border:0;color:inherit;font:inherit;letter-spacing:inherit;
  text-transform:inherit;cursor:pointer;padding:0;transition:color .3s var(--slow)}
.bar button:hover{color:var(--chalk)}

/* Product names are not shouted. `TxB EQ` is not `TXB EQ`, and a mark line that lists products
   must not uppercase them into something we do not call them. */
.bundle-inc.names{text-transform:none;letter-spacing:.06em}

/* ── the legal documents ────────────────────────────────────────────────────
   The EULA and the privacy notice keep their markup EXACTLY as written: they are reviewed
   documents, and re-tagging a contract to suit a redesign is how a clause quietly changes.
   Only the presentation moves into the v2 register. Set narrow and quiet — nobody should have
   to fight the type to read a licence, and a licence that is hard to read is a licence nobody
   has actually agreed to. */
.legal{max-width:70ch;color:var(--chalk-2);line-height:1.72;font-weight:300}
.legal h1{font-family:var(--display);font-weight:var(--display-weight);letter-spacing:-.035em;
  line-height:.9;font-size:clamp(2.2rem,5.5vw,4rem);color:var(--chalk);margin-bottom:calc(var(--u)*3)}
.legal .updated{font-family:var(--mark);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dust);margin-bottom:calc(var(--u)*6)}
.legal .intro{font-size:1.05rem;color:var(--chalk-2);
  border-left:2px solid var(--edge);padding-left:calc(var(--u)*3);margin-bottom:calc(var(--u)*7)}
.legal section{margin-bottom:calc(var(--u)*5)}
.legal h2{display:flex;gap:calc(var(--u)*2);align-items:baseline;
  font-family:var(--display);font-weight:var(--display-weight);letter-spacing:-.02em;
  font-size:clamp(1.15rem,2vw,1.5rem);color:var(--chalk);line-height:1.15;
  margin:calc(var(--u)*6) 0 calc(var(--u)*2.5)}
.legal h2 .n{font-family:var(--mark);font-size:11px;letter-spacing:.18em;color:var(--lamp);
  flex:none;position:relative;top:-.15em}
.legal h3{font-family:var(--mark);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dust);margin:calc(var(--u)*4) 0 calc(var(--u)*1.5)}
.legal p{margin-bottom:calc(var(--u)*2.5)}
.legal ul,.legal ol{margin:0 0 calc(var(--u)*3) calc(var(--u)*3)}
.legal li{margin-bottom:calc(var(--u)*1.5)}
.legal strong,.legal b{color:var(--chalk);font-weight:400}
.legal a{color:var(--chalk);border-bottom:1px solid var(--edge)}
.legal a:hover{color:var(--lamp);border-color:var(--lamp)}
/* the partials are wrapped in the old .frame rail; in v2 the sheet already sets the measure */
.sheet .frame{max-width:none;padding:0;margin:0}

/* ⚠ These two came across from site.css when the legal pages moved to the v2 layout, and they are
   here because a gate caught that they had NOT: the v2 layout does not load site.css, so the
   warranty and liability paragraphs were rendering as ordinary body copy and the section rules
   had vanished. An all-caps legal disclaimer set in body type is not a styling nicety — those
   paragraphs are set apart deliberately, because that is how a limitation of liability is
   presented. See scripts/gates/styledclasses.mjs. */
.legal .legalcaps{font-family:var(--mark);font-size:11px;letter-spacing:.06em;line-height:1.75;
  color:var(--dust);border:1px solid var(--edge-2);padding:calc(var(--u)*2.5) calc(var(--u)*3);
  margin-bottom:calc(var(--u)*3)}
.legal .rule{height:1px;background:var(--edge-2);border:0;margin:calc(var(--u)*6) 0}