/* www.css — the marketing-site components, on top of audora.css.
   Class names mirror docs/design/www.html (the approved prototype). */

  .mx {
    --navink: var(--ink);
    --sect: var(--u4); --hgap: var(--u3); --gut: var(--u5); --gap: var(--u3);
  }
  .mx .bg { display:block; width:100%; height:100%; object-fit:cover; }
  .mx-slab-img .bg { filter:grayscale(1) contrast(1.15); }

  /* shared */
  .mx-k { font-family:var(--mono); font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--acc-text); margin-bottom:var(--u2); }
  .mx-h2 { font-family:var(--face-display); font-size:clamp(1.5rem,2.7vw,2.1rem); font-weight:800; letter-spacing:-.028em; line-height:1.05; text-transform:uppercase; max-width:26ch; text-wrap:balance; }
  .mx-b1 { display:inline-block; background:var(--ink); color:var(--paper); font-size:.88rem; font-weight:700;
           letter-spacing:.03em; text-transform:uppercase; padding:var(--u2) var(--u4); }
  .mx-b2 { display:inline-block; border:2px solid var(--ink); color:var(--ink); font-size:.88rem; font-weight:700;
           letter-spacing:.03em; text-transform:uppercase; padding:calc(var(--u2) - 2px) calc(var(--u4) - 2px); }
  .mx-fine { font-family:var(--mono); font-size:.72rem; line-height:1.75; color:var(--faint); }

  /* 01 nav — from Hard */
  .mx-nav { display:flex; align-items:center; gap:var(--u3); padding:var(--u2) var(--edge); background:var(--navink); color:#EAE8E3; position:sticky; top:0; z-index:50; }
  /* Sticky nav offset: keep in-page anchor targets (#how, #pricing, guide TOCs) clear of the bar. */
  [id] { scroll-margin-top:4rem; }
  .mx-mk { font-size:1.58rem; font-weight:700; letter-spacing:-.028em; }
  .mx-mk i { font-style:italic; display:inline-block; transform:skewX(-8deg); margin-right:-.025em; }
  /* The A is inline-block + skewed, so its layout box is the upright advance while the
     glyph leans into the u. A POSITIVE margin here made the A|u ink gap 0.117em against
     0.051em for every other pair — measured, not eyeballed. -.025em lands it at 0.050em,
     matching ud/do/or exactly. Mirrored in src/components/common/AudoraLogo.tsx. */
  /* Mobile-first: the secondary link row collapses below 760px so the header
     (logo + Log in + Apply) never overflows narrow viewports. www ships no JS,
     so this is a pure CSS reveal — not a scripted hamburger. .mx-login carries
     margin-left:auto while the links are hidden so the CTAs stay right-aligned. */
  .mx-nav nav { display:none; gap:var(--u3); font-family:var(--mono); font-size:.67rem;
                letter-spacing:.13em; text-transform:uppercase; color:#9DA2AA; }
  .mx-login { margin-left:auto; border:1px solid #4A4A52; color:#EAE8E3; font-family:var(--mono); font-size:.67rem; letter-spacing:.13em;
              text-transform:uppercase; padding:calc(var(--u1) - 1px) var(--u2); }
  @media (hover:hover){ .mx-login:hover { border-color:#EAE8E3; } }
  .mx-apply { background:var(--acc); color:#fff; font-family:var(--mono); font-size:.67rem; letter-spacing:.13em;
              text-transform:uppercase; padding:var(--u1) var(--u2); }
  /* 760px, not 700: with four links (AI assistant joined 2026-10-03) the row wraps to two
     lines below ~720px, so the links wait until they fit on one. */
  @media (min-width:760px){ .mx-nav nav { display:flex; margin-left:auto; } .mx-login { margin-left:0; } }

  /* 02 hero — text from Signal, buttons from Hard */
  .mx-hero { }
  .mx-hl { padding:var(--u3) var(--edge); }
  .mx-hl .mx-strap, .mx-hl .mx-h1, .mx-hl .mx-sub, .mx-hl .mx-acts { margin-bottom:var(--u2); }
  .mx-strap { display:flex; align-items:center; gap:var(--u2); font-family:var(--mono); font-size:.68rem; }
  .mx-strap b { background:var(--acc); color:#fff; padding:.16rem .4rem; font-weight:700; }
  .mx-strap { letter-spacing:.15em; text-transform:uppercase; color:var(--dim); margin-bottom:var(--u3); }
  .mx-h1 { font-family:var(--face-display); font-size:clamp(2.3rem,7.4vw,5.6rem); font-weight:800; line-height:.92; letter-spacing:-.045em;
           text-transform:uppercase; max-width:15ch; margin-bottom:var(--u3); text-wrap:balance; }
  .mx-h1 em { font-style:normal; color:var(--acc); }
  .mx-sub { font-size:1.08rem; line-height:1.55; color:var(--dim); max-width:46ch; margin-bottom:var(--u3); }
  .mx-acts { display:flex; flex-wrap:wrap; gap:var(--u2); margin-bottom:var(--u3); }
  .mx-hph { position:relative; aspect-ratio:21/9; border-block:3px solid var(--ink); }
  .mx-cap { position:absolute; left:0; bottom:0; background:var(--ink); color:#EAE8E3;
            font-family:var(--mono); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; padding:var(--u1) var(--u2); }
  /* A stock photograph's credit (13-imagery §7): "Photo: <name> on <library>", quieter than the
     chip and in the opposite corner of the same frame, so no layout around a photo moves. Below
     560px a frame is too narrow for both on one line, so the credit goes to the top corner. */
  .mx-credit { position:absolute; right:0; bottom:0; background:rgb(12 12 14 / .62); color:#D9D6CE;
               font-family:var(--mono); font-size:.58rem; line-height:1.4; padding:.2rem .45rem; max-width:calc(100% - 1rem); }
  .mx-credit a { color:inherit; text-decoration:underline; text-underline-offset:2px; text-decoration-color:rgb(217 214 206 / .5); }
  @media (hover:hover){ .mx-credit a:hover { color:#fff; text-decoration-color:currentColor; } }
  @media (max-width:559px){ .mx-credit { top:0; bottom:auto; } }

  /* 03 steps */
  .mx-steps { padding:0; }
  /* No border-bottom: the next block is always .mx-pillar, whose border-top
     draws this line. Both would stack to 6px against every other 3px seam. */
  .mx-track { display:grid; grid-template-columns:1fr; }
  @media (min-width:800px){ .mx-track { grid-template-columns:repeat(3,1fr); } }
  .mx-tk { padding:var(--u4) var(--edge); border-top:1px solid var(--seam); }
  @media (min-width:800px){ .mx-tk { border-top:0; border-left:1px solid var(--seam); padding:var(--u4); }
    .mx-tk:first-child { border-left:0; padding-left:var(--edge); }
    .mx-tk:last-child { padding-right:var(--edge); } }
  .mx-tt { font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; color:var(--acc-text); margin-bottom:var(--u1); font-variant-numeric:tabular-nums; }
  .mx-tn { font-size:1.02rem; font-weight:800; text-transform:uppercase; letter-spacing:-.014em; margin-bottom:var(--u1); }
  .mx-tp { font-size:.92rem; line-height:1.56; color:var(--dim); max-width:36ch; }

  /* 04-07 pillars */
  .mx-pillar { display:grid; grid-template-columns:1fr; border-top:3px solid var(--ink); background:var(--card); }
  @media (min-width:920px){ .mx-pillar { grid-template-columns:1.05fr .95fr; } .mx-pillar.rev { grid-template-columns:.95fr 1.05fr; } }
  .mx-ptxt { padding:var(--sect) var(--gut) var(--sect) var(--edge); display:flex; flex-direction:column; justify-content:center; }
  /* Outer/inner edge padding follows which grid column .mx-ptxt actually sits
     in, not the .rev class name — .rev only means "the graphic block is the
     narrower/first column", and several pages put the graphic there while
     still listing .mx-ptxt first in the DOM (non-rev pillars can do the same,
     graphic-first). Keying off :last-child instead of .rev keeps the outer
     margin on the true outer edge in every layout, not just the one where
     .rev happens to also mean "ptxt is last". */
  .mx-pillar > .mx-ptxt:last-child { padding:var(--sect) var(--edge) var(--sect) var(--gut); }
  .mx-ph3 { font-family:var(--face-display); font-size:clamp(1.4rem,2.5vw,1.9rem); font-weight:800; letter-spacing:-.026em; line-height:1.05; text-transform:uppercase; max-width:22ch; margin-bottom:var(--u3); }
  .mx-plist { display:flex; flex-direction:column; gap:var(--u2); margin-top:0; }
  .mx-plist li { display:flex; gap:var(--u2); font-size:.95rem; line-height:1.5; color:var(--dim); max-width:48ch; }
  .mx-plist li::before { content:"—"; color:var(--acc); font-weight:600; flex:none; }
  .mx-pimg { position:relative; min-height:300px; border-left:3px solid var(--ink); }
  /* Third of the same mirror family as the .mx-ptxt and .mx-monwrap rules
     above. .mx-pimg's 3px rule is the seam between the photo and the text
     beside it, not a page edge, so it belongs on whichever side the text is:
     left while the photo is the right-hand column (the original and still the
     common case), right once a pillar leads with the photo. Gated at the
     two-column breakpoint for the .mx-monwrap reason — stacked, there is no
     text beside it, and flipping the rule at one column would make adjacent
     photos disagree about which margin they hang off. */
  @media (min-width:920px){ .mx-pillar > .mx-pimg:first-child { border-left:0; border-right:3px solid var(--ink); } }
  .mx-pnote { font-family:var(--mono); font-size:.68rem; color:var(--faint); margin-top:var(--u3); line-height:1.7; }
  /* An artist's own wordmark set above the proof note that names them — theirs, in ink. */
  .mx-pmark { display:inline-block; margin-top:var(--u4); }
  .mx-pmark img { display:block; width:180px; height:auto; }

  /* release monitor (distribute pillar visual) */
  .mx-monwrap { padding:var(--sect) var(--gut) var(--sect) var(--edge); display:flex; align-items:center; }
  /* Mirror of the .mx-ptxt:last-child rule above, for the same reason: the
     outer/inner edge padding follows which grid column the block actually
     sits in. Until /how-it-works/ every .mx-monwrap was the first child, so
     the single left-column padding was enough; a pillar that puts the panel
     in the right-hand column needs --edge on the true outer edge, which is
     now the right. Gated at the two-column breakpoint, unlike the .mx-ptxt
     rule: a stacked pillar has no inner edge, and .mx-mon is a bordered
     block with a filled header bar, so flipping its indent at one column
     makes alternating panels visibly disagree about where the page margin
     is — an ambiguity a run of body text doesn't have. */
  @media (min-width:920px){ .mx-pillar > .mx-monwrap:last-child { padding:var(--sect) var(--edge) var(--sect) var(--gut); } }
  .mx-mon { border:1px solid var(--seam); background:var(--paper); width:100%; }
  .mx-montop { display:flex; padding:var(--u1) var(--u2);
               font-family:var(--mono); font-size:.63rem; letter-spacing:.13em; text-transform:uppercase; background:var(--navink); color:#EAE8E3; }
  .mx-montop em { margin-left:auto; font-style:normal; font-variant-numeric:tabular-nums; }
  .mx-row { display:flex; align-items:center; gap:var(--u2); padding:var(--u2); border-bottom:1px solid var(--seam); }
  .mx-row:last-child { border-bottom:0; }
  .mx-art { width:34px; height:34px; flex:none; }
  .mx-t { font-size:.88rem; font-weight:600; }
  .mx-s { font-family:var(--mono); font-size:.64rem; color:var(--faint); font-variant-numeric:tabular-nums; }
  .mx-st { margin-left:auto; display:flex; align-items:center; gap:var(--u1); font-family:var(--mono); font-size:.62rem;
           letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
  .mx-d { width:9px; height:9px; border:1.5px solid var(--ink); border-radius:50%; flex:none; }
  .mx-d.f{background:var(--ink)} .mx-d.h{background:linear-gradient(90deg,var(--ink) 0 50%,transparent 50%)}
  .mx-d.x{border-radius:0;transform:rotate(45deg);background:var(--acc);border-color:var(--acc)}

  /* The .mx-fb feedback-card family was deleted 2026-09-20 (maintenance-todo
     §19). Both live cards came off www on 2026-08-30 — a fabricated
     testimonial cannot be reworded into an honest one — and the design
     source stopped drawing it on 2026-09-20, so nothing referenced these
     eleven rules. `.mx-mon*` is NOT dead and stays: it is the frame the real
     app screenshots sit in, 12 live uses. */

  /* 08 proof */
  .mx-slab { display:grid; grid-template-columns:1fr; background:var(--navink); color:var(--paper); }
  @media (min-width:900px){ .mx-slab { grid-template-columns:1.05fr .95fr; } }
  .mx-slab-txt { padding:var(--sect) var(--gut) var(--sect) var(--edge); display:flex; flex-direction:column; justify-content:center; }
  .mx-slab-k { font-family:var(--mono); font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; color:#9B988E; margin-bottom:var(--u2); }
  .mx-slab-h { font-family:var(--face-display); font-size:clamp(1.5rem,2.8vw,2.15rem); font-weight:800; line-height:1.03; letter-spacing:-.028em; text-transform:uppercase; max-width:19ch; margin-bottom:var(--u3); text-wrap:balance; }
  .mx-slab-p { font-size:1rem; line-height:1.6; color:#C6C3B9; max-width:44ch; }
  .mx-slab-img { position:relative; min-height:280px; border-left:3px solid var(--ink); }
  .mx-proof { padding:var(--sect) var(--edge); display:grid; grid-template-columns:1fr; gap:var(--hgap) var(--gut); }
  @media (min-width:900px){ .mx-slab { display:grid; grid-template-columns:1fr; background:var(--navink); color:var(--paper); }
  @media (min-width:900px){ .mx-slab { grid-template-columns:1.05fr .95fr; } }
  .mx-slab-txt { padding:var(--sect) var(--gut) var(--sect) var(--edge); display:flex; flex-direction:column; justify-content:center; }
  .mx-slab-k { font-family:var(--mono); font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; color:#9B988E; margin-bottom:var(--u2); }
  .mx-slab-h { font-family:var(--face-display); font-size:clamp(1.5rem,2.8vw,2.15rem); font-weight:800; line-height:1.03; letter-spacing:-.028em; text-transform:uppercase; max-width:19ch; margin-bottom:var(--u3); text-wrap:balance; }
  .mx-slab-p { font-size:1rem; line-height:1.6; color:#C6C3B9; max-width:44ch; }
  .mx-slab-img { position:relative; min-height:280px; border-left:3px solid var(--ink); }
  .mx-proof { grid-template-columns:1.1fr .9fr; align-items:start; } }
  .mx-bio { font-size:.97rem; line-height:1.62; color:var(--dim); max-width:52ch; margin-top:var(--u2); }
  .mx-bio b { color:var(--ink); font-weight:600; }
  .mx-marc { background:var(--card); border:1px solid var(--seam); padding:var(--u3); }
  .mx-mwho { display:flex; align-items:baseline; gap:var(--u2); margin-bottom:var(--u1); }
  .mx-mn { font-size:1.06rem; font-weight:600; letter-spacing:-.015em; }
  .mx-mg { font-family:var(--mono); font-size:.63rem; letter-spacing:.11em; text-transform:uppercase; color:var(--faint); }
  .mx-mq { font-size:.94rem; line-height:1.6; color:var(--dim); margin-bottom:var(--u2); }
  .mx-mfacts { display:flex; flex-wrap:wrap; gap:var(--u1) var(--u3); border-top:1px solid var(--seam); padding-top:var(--u2); }
  .mx-mf { font-family:var(--mono); font-size:.67rem; color:var(--faint); font-variant-numeric:tabular-nums; }
  .mx-mf b { color:var(--ink); font-weight:500; }

  /* 09 platforms */
  .mx-plat { border-block:3px solid var(--ink); background:var(--card); padding:var(--sect) var(--edge); }
  .mx-dsps { display:grid; grid-template-columns:repeat(2,1fr); gap:0 var(--gut); margin-top:var(--hgap); }
  @media (min-width:700px){ .mx-dsps { grid-template-columns:repeat(4,1fr); } }
  .mx-dsp { font-family:var(--mono); font-size:.78rem; color:var(--dim); padding:var(--u1) 0; border-top:1px solid var(--seam);
            display:flex; justify-content:space-between; font-variant-numeric:tabular-nums; }
  .mx-dsp b { color:var(--ink); font-weight:500; }

  /* 10 comparison */
  .mx-cmp { padding:var(--sect) var(--edge); }
  .mx-tblwrap { overflow-x:auto; margin-top:var(--hgap); border:1px solid var(--seam); }
  .mx-tbl { width:100%; border-collapse:collapse; background:var(--card); min-width:640px; }
  .mx-tbl th { font-family:var(--mono); font-size:.63rem; letter-spacing:.12em; text-transform:uppercase;
               text-align:left; background:var(--navink); color:#9DA2AA; padding:var(--u2); }
  .mx-tbl th.au { color:#fff; background:var(--acc); }
  .mx-tbl td { font-size:.88rem; line-height:1.5; padding:var(--u2); border-bottom:1px solid var(--seam); color:var(--dim); vertical-align:top; }
  .mx-tbl td:first-child { font-weight:600; color:var(--ink); }
  .mx-tbl td.au { color:var(--ink); }
  .mx-tbl tr:last-child td { border-bottom:0; }

  /* 11 pricing */
  .mx-price { border-block:3px solid var(--ink); background:var(--card); padding:var(--sect) var(--edge); }
  .mx-tiers { display:grid; grid-template-columns:1fr; gap:var(--gap); margin-top:var(--hgap); }
  @media (min-width:860px){ .mx-tiers { grid-template-columns:repeat(4,1fr); } }
  .mx-tier { border:1px solid var(--seam); background:var(--paper); padding:var(--u3); display:flex; flex-direction:column; }
  .mx-tier.hot { border:3px solid var(--ink); }
  /* Label: a different kind of account, not a fifth step — one full row under the four. */
  @media (min-width:860px){ .mx-tier.wide { grid-column:1 / -1; } }
  .mx-tname { font-size:.95rem; font-weight:800; letter-spacing:.01em; text-transform:uppercase; }
  .mx-tprice { font-size:1.7rem; font-weight:600; letter-spacing:-.03em; margin:var(--u1) 0 0; font-variant-numeric:tabular-nums; }
  .mx-tprice span { font-size:.85rem; font-weight:400; color:var(--faint); letter-spacing:0; }
  .mx-tlist { margin-top:var(--u2); display:flex; flex-direction:column; gap:var(--u1); }
  .mx-tlist li { font-size:.85rem; line-height:1.45; color:var(--dim); display:flex; gap:var(--u1); }
  .mx-tlist li::before { content:"—"; color:var(--acc); flex:none; }
  .mx-tcta { margin-top:auto; padding-top:var(--u3); }
  .mx-tbtn { display:block; text-align:center; border:2px solid var(--ink); color:var(--ink); font-size:.8rem; font-weight:700;
             letter-spacing:.03em; text-transform:uppercase; padding:var(--u1); }
  /* The featured tier is marked by its 3px card border above — the button does not
     need to differ too, and filling it made the odd one out in a row of four AND
     killed its hover, since .mx-tbtn:hover inverts outline->filled and this one was
     already filled. All four tier buttons are now the same type. */
  .mx-pfoot { font-family:var(--mono); font-size:.7rem; color:var(--faint); margin-top:var(--u3); line-height:1.75; }

  /* 12 faq */
  .mx-faq { padding:var(--sect) var(--edge); }
  .mx-faq details { max-width:58rem; }
  .mx-faq details { border-top:1px solid var(--seam); }
  .mx-faq details:last-of-type { border-bottom:1px solid var(--seam); }
  .mx-faq summary { cursor:pointer; list-style:none; display:flex; align-items:baseline; gap:var(--u2);
                    font-size:1rem; font-weight:600; letter-spacing:-.012em; padding:var(--u2) 0; }
  .mx-faq summary::before { content:"+"; font-family:var(--mono); color:var(--acc); font-weight:600; }
  .mx-faq details[open] summary::before { content:"–"; }
  .mx-faq summary::-webkit-details-marker { display:none; }
  .mx-fa { font-size:.94rem; line-height:1.62; color:var(--dim); max-width:64ch; padding:0 0 var(--u3) calc(1em + var(--u2)); }

  /* 13 guides */
  .mx-guides { padding:var(--sect) var(--edge); }
  .mx-gcards { display:grid; grid-template-columns:1fr; gap:var(--gap); margin-top:var(--hgap); }
  @media (min-width:800px){ .mx-gcards { grid-template-columns:repeat(3,1fr); } }
  .mx-gc { background:var(--card); border:1px solid var(--seam); padding:var(--u3); display:flex; flex-direction:column; gap:var(--u1); }
  .mx-gk { font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--acc); }
  .mx-gt { font-size:1.02rem; font-weight:600; letter-spacing:-.015em; line-height:1.25; }
  .mx-gd { font-size:.88rem; line-height:1.55; color:var(--dim); }
  .mx-gm { font-family:var(--mono); font-size:.66rem; color:var(--faint); margin-top:auto; padding-top:var(--u2); }

  /* 14 close */
  .mx-close { position:relative; border-top:3px solid var(--ink); }
  .mx-cl { padding:var(--sect) var(--gut) var(--sect) var(--edge); }
  @media (min-width:900px){ .mx-cl { width:48%; } }
  .mx-clh { font-family:var(--face-display); font-size:clamp(1.6rem,3.1vw,2.4rem); font-weight:800; letter-spacing:-.03em; line-height:1.02; text-transform:uppercase; max-width:16ch; margin-bottom:var(--u3); text-wrap:balance; }
  .mx-clp { font-size:1.02rem; line-height:1.6; color:var(--dim); max-width:40ch; margin-bottom:var(--u3); }
  .mx-clim { position:relative; aspect-ratio:16/10; }
  @media (min-width:900px){ .mx-clim { position:absolute; top:0; right:0; bottom:0; left:52%; aspect-ratio:auto; border-left:3px solid var(--ink); } }

  /* 15 footer */
  .mx-foot { background:var(--navink); color:#A5A29A; padding:var(--sect) var(--edge); }
  .mx-fgrid { display:flex; flex-wrap:wrap; gap:var(--hgap) var(--sect); }
  .mx-fcol .mx-fh { font-family:var(--mono); font-size:.62rem; letter-spacing:.15em; text-transform:uppercase; color:#8A887E; margin-bottom:var(--u2); }
  .mx-fcol ul { display:flex; flex-direction:column; gap:var(--u1); }
  .mx-fcol li { font-size:.85rem; }
  .mx-fmk { color:var(--paper); font-size:1.05rem; font-weight:700; letter-spacing:-.028em; margin-bottom:var(--u1); }
  .mx-fmk i { font-style:italic; display:inline-block; transform:skewX(-8deg); margin-right:-.025em; }
  .mx-flegal { font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; margin-top:var(--u4); color:#8A887E; }

  /* ── motion (14-motion.md): instrument ballistics. Base page is complete without any of this. ── */
  @media (prefers-reduced-motion: no-preference) {
    /* peak-hold hovers: attack 0ms, decay 233ms */
    .mx-nav nav span, .mx-apply, .mx-b1, .mx-b2, .mx-tbtn, .mx-faq summary, .mx-gc, .mx-fcol li
      { transition: background-color var(--t-3) var(--e-out), color var(--t-3) var(--e-out),
                    border-color var(--t-3) var(--e-out), transform var(--t-2) var(--e-out); }
    @media (hover:hover) {
      .mx-nav nav span:hover { color:#fff; transition:none; }
      .mx-apply:hover { background:#B02209; transition:none; }
      /* Was #26262B on #0C0C0E — a 3% lift on near-black, which reads as nothing.
         Signal red is this system's action colour (the nav Apply button, the
         'yours to do' diamond), so the primary CTA revealing it on hover is both
         unmistakable and on-brand. White on --acc passes AA. */
      .mx-b1:hover { background:var(--acc); color:#fff; transition:none; }
      /* The old rule set border-color to var(--ink) — which is what .mx-b2 already
         is, so the hover did LITERALLY NOTHING. Invert to filled, matching
         .mx-tbtn:hover so every outlined button in the system answers the same way. */
      .mx-b2:hover { background:var(--ink); color:var(--paper); transition:none; }
      .mx-tbtn:hover { background:var(--ink); color:var(--paper); transition:none; }
      .mx-gc:hover { border-color:var(--ink); transition:none; }
      .mx-fcol li:hover { color:#EAE8E3; transition:none; }
    }
    /* press: 0ms in, never below .97 */
    .mx-b1:active, .mx-b2:active, .mx-apply:active, .mx-tbtn:active { transform:scale(.97); transition:none; }
    /* disclosure: answer settles in, 233ms, travel one step */
    .mx-faq details[open] .mx-fa { animation: mx-settle var(--t-3) var(--e-in); }
    @keyframes mx-settle { from { opacity:0; transform:translateY(8px); } }
    /* the one cue light: DELIVERING is a real in-flight process — slow discrete blink, tally-style */
    .mx-d.h { animation: mx-cue 1.6s steps(2, jump-none) infinite; }
    @keyframes mx-cue { 50% { opacity:.35; } }
  }
  /* MPA crossfade where supported; instant elsewhere is the design */
  @view-transition { navigation: auto; }

  html { scroll-behavior: auto; }
  .mx-gt a:hover { color: var(--acc-text); }

  /* ── inner-page templates (docs/handoff/10-www.md) ─────────────────────
     Three shared layouts on the same register as the homepage:
     .mx-phead   content-page header (services, features, campaigns)
     .mx-prose   long-form article body (guides)
     .mx-legal   plain legal text                                          */

  /* page header — lighter than the homepage hero, same voice */
  .mx-phead { padding:var(--u4) var(--edge) var(--u4); border-bottom:3px solid var(--ink); }
  .mx-phead .mx-h1 { font-size:clamp(2rem,5.2vw,3.8rem); max-width:18ch; }
  .mx-phead .mx-sub { margin-bottom:0; }
  .mx-phead .mx-acts { margin:var(--u3) 0 0; }
  /* A real app screenshot as the page's hero, where other pages put the
     .mx-hph photo band (/labels/, 2026-09-29: labels buy the tool, so the
     first thing they see is the tool). Capped at the capture's own 1100px so
     it is never upscaled. No border-bottom: the next block is a .mx-pillar,
     whose border-top draws the line. */
  .mx-hshot { padding:var(--u4) var(--edge); background:var(--card); }
  .mx-hshot .mx-mon { max-width:1100px; }

  /* content sections on inner pages */
  .mx-sect { padding:var(--sect) var(--edge); border-top:1px solid var(--seam); }
  .mx-sect:first-of-type { border-top:0; }
  .mx-sect .mx-h2 { margin-bottom:var(--u3); }

  /* article (guides) — measured column, mono furniture */
  .mx-artw { padding:var(--u4) var(--edge); }
  .mx-prose { max-width:68ch; }
  .mx-prose > * + * { margin-top:var(--u3); }
  .mx-prose h2 { font-family:var(--face-display); font-size:1.35rem; font-weight:800; letter-spacing:-.02em; text-transform:uppercase;
                 padding-top:var(--u3); border-top:3px solid var(--ink); margin-top:var(--u4); }
  .mx-prose h3 { font-size:1.05rem; font-weight:700; margin-top:var(--u4); }
  .mx-prose p, .mx-prose li { font-size:1rem; line-height:1.65; color:var(--ink); }
  .mx-prose ul, .mx-prose ol { padding-left:1.2em; }
  .mx-prose ul { list-style:square; }
  .mx-prose ol { list-style:decimal; }
  .mx-prose li + li { margin-top:var(--u1); }
  .mx-prose a { text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
  .mx-prose strong { font-weight:700; }
  .mx-prose blockquote { border-left:3px solid var(--ink); padding-left:var(--u3); color:var(--dim); }
  .mx-meta-row { display:flex; flex-wrap:wrap; gap:var(--u3); font-family:var(--mono); font-size:.68rem;
                 letter-spacing:.13em; text-transform:uppercase; color:var(--faint); margin-top:var(--u3); }
  .mx-meta-row b { color:var(--acc-text); font-weight:700; }

  /* data tables inside prose (comparison tables) */
  .mx-prose .mx-tblwrap { margin-top:var(--u3); }

  /* legal — quiet, dense, honest */
  .mx-legal { max-width:68ch; padding:var(--u4) 0 var(--u5); }
  .mx-legal h2 { font-family:var(--face-display); font-size:1.05rem; font-weight:800; text-transform:uppercase; letter-spacing:.01em; margin-top:var(--u4); }
  .mx-legal h3 { font-size:.95rem; font-weight:700; margin-top:var(--u3); }
  .mx-legal p, .mx-legal li { font-size:.92rem; line-height:1.7; color:var(--dim); margin-top:var(--u2); }
  .mx-legal ul, .mx-legal ol { padding-left:1.2em; }
  .mx-legal ul { list-style:square; }
  .mx-legal ol { list-style:decimal; }
  .mx-legal a { text-decoration:underline; text-underline-offset:3px; }
  .mx-legal strong { color:var(--ink); }

  /* shared gate-CTA close for inner pages (partial cta-apply) */
  .mx-pclose { padding:var(--sect) var(--edge); border-top:3px solid var(--ink); }
  .mx-pclose .mx-clp { font-size:1.02rem; line-height:1.6; color:var(--dim); max-width:52ch; margin:0 0 var(--u3); }
  .mx-pclose .mx-acts { margin-bottom:var(--u2); }

  /* article/legal furniture */
  .mx-arth1 { font-family:var(--face-display); font-size:clamp(1.9rem,4.6vw,3.2rem); font-weight:800; line-height:1.0; letter-spacing:-.035em;
              text-transform:uppercase; max-width:22ch; margin:var(--u2) 0 var(--u3); text-wrap:balance; }
  .mx-stand { font-size:1.08rem; line-height:1.55; color:var(--dim); max-width:52ch; }
  .mx-afig { position:relative; border-block:3px solid var(--ink); margin:var(--u4) 0; max-width:820px; }
  .mx-afig img { width:100%; height:auto; }
  .mx-keys { border:3px solid var(--ink); padding:var(--u3); margin-top:var(--u4); max-width:68ch; }
  .mx-keys .mx-k { margin-bottom:var(--u2); }
  .mx-keys ul { padding-left:1.2em; list-style:square; }
  .mx-keys li { font-size:.95rem; line-height:1.6; }
  .mx-keys li + li { margin-top:var(--u1); }
  .mx-note { border-left:3px solid var(--acc); background:var(--card); padding:var(--u2) var(--u3); margin-top:var(--u3); }
  .mx-note p { font-size:.95rem; }
  .mx-note .mx-acts { margin:var(--u2) 0 0; }
  .mx-legal h1 { font-family:var(--face-display); font-size:clamp(1.7rem,3.8vw,2.5rem); font-weight:800; text-transform:uppercase;
                 letter-spacing:-.03em; line-height:1.02; margin-bottom:var(--u1); }
  .mx-faqs { max-width:68ch; margin-top:var(--u4); }
  .mx-faqs details { border-top:1px solid var(--seam); }
  .mx-faqs details:last-child { border-bottom:1px solid var(--seam); }
  .mx-faqs summary { font-weight:700; font-size:.98rem; padding:var(--u2) 0; cursor:pointer; list-style:none; display:flex; }
  .mx-faqs summary::after { content:"+"; margin-left:auto; font-weight:400; color:var(--faint); }
  .mx-faqs details[open] summary::after { content:"–"; }
  .mx-faqs .mx-fa { font-size:.95rem; line-height:1.6; color:var(--dim); padding:0 0 var(--u3); max-width:60ch; }
  .mx-rel { margin-top:var(--u4); display:grid; gap:var(--u2); grid-template-columns:1fr; max-width:820px; }
  @media (min-width:760px){ .mx-rel { grid-template-columns:1fr 1fr; } }
  .mx-relc { border:1px solid var(--seam); background:var(--card); padding:var(--u3); display:block; }
  .mx-relc b { display:block; font-size:.98rem; font-weight:700; margin-bottom:var(--u1); }
  .mx-relc span { font-size:.88rem; line-height:1.5; color:var(--dim); }
  @media (hover:hover){ .mx-relc:hover { border-color:var(--ink); } }

  /* 16 forms — a real <form method="post"> posting to an edge function.
     No JS: every validation cue here is native HTML (required, type=,
     minlength) — see docs/handoff/12-frontend.md §1 for why www ships none. */
  .mx-form { max-width:640px; margin-top:var(--u4); display:flex; flex-direction:column; gap:var(--u3); }
  .mx-frow { display:grid; gap:var(--u3); grid-template-columns:1fr; }
  @media (min-width:640px){ .mx-frow.mx-f2 { grid-template-columns:1fr 1fr; } }
  .mx-field { display:flex; flex-direction:column; gap:var(--u1); }
  .mx-field label { font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
  .mx-field .mx-optional { text-transform:none; letter-spacing:0; }
  .mx-field input, .mx-field select, .mx-field textarea {
    font:inherit; font-size:.95rem; color:var(--ink); background:var(--paper);
    border:1px solid var(--seam); padding:var(--u2); width:100%;
  }
  .mx-field textarea { resize:vertical; min-height:9em; }
  .mx-field input:focus-visible, .mx-field select:focus-visible, .mx-field textarea:focus-visible {
    outline:2px solid var(--ink); outline-offset:1px;
  }
  .mx-fhint { font-size:.8rem; color:var(--faint); }
  .mx-fnote { font-size:.82rem; line-height:1.6; color:var(--dim); max-width:60ch; }
  /* Honeypot: off-screen (not display:none/visibility:hidden — some scripted
     submitters skip fields hidden that way) rather than absent, so a bot
     filling every visible-looking field still catches it. */
  .mx-hp { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
  .mx-fsubmit { border:none; cursor:pointer; }

  /* 17 calculators — plain vanilla JS at the bottom of the page it's in,
     never a framework. Values in .mx-cres are pre-rendered with the same
     defaults the <script> starts from, so a crawler or a no-JS fetch reads a
     real, sensible number rather than an empty box. */
  .mx-calc { border:3px solid var(--ink); background:var(--card); padding:var(--u3); margin:var(--u4) 0; max-width:68ch; }
  .mx-calc .mx-k { margin-bottom:var(--u2); }
  /* A number box holds "4", not a sentence: .mx-field input is width:100% for
     the contact and takedown forms that share it, which made a one-digit
     input 600px wide inside a calculator (Bo, 2026-09-21). */
  .mx-calc .mx-field input[type="number"] { width:8rem; }
  .mx-cgrid { display:grid; gap:var(--u3); grid-template-columns:1fr; }
  @media (min-width:640px){ .mx-cgrid.mx-c2 { grid-template-columns:1fr 1fr; } }
  .mx-ctoggle { display:flex; flex-wrap:wrap; gap:var(--u1); }
  .mx-ctoggle button {
    font:inherit; font-size:.82rem; font-weight:700; letter-spacing:.01em; cursor:pointer;
    padding:var(--u1) var(--u2); border:1px solid var(--seam); background:var(--paper); color:var(--ink);
  }
  .mx-ctoggle button[aria-pressed="true"] { background:var(--ink); color:var(--paper); border-color:var(--ink); }
  .mx-ccheck { display:flex; align-items:center; gap:var(--u2); font-size:.88rem; cursor:pointer; }
  .mx-ccheck input { accent-color:var(--acc); width:1.1em; height:1.1em; flex:none; }
  .mx-cresults { display:grid; gap:var(--u2); grid-template-columns:1fr; margin-top:var(--u3); }
  /* Two results are two short figures, not two columns of page: cap them so the
     box hugs its number instead of stretching to half the calculator
     (Bo, 2026-09-21 — 312px boxes around "$30 – $50"). */
  @media (min-width:640px){ .mx-cresults.mx-c2 { grid-template-columns:repeat(2,minmax(0,15rem)); justify-content:start; } }
  @media (min-width:900px){ .mx-cresults.mx-c4 { grid-template-columns:repeat(4,1fr); } }
  .mx-cres { border:1px solid var(--seam); background:var(--paper); padding:var(--u2); }
  .mx-cres.mx-ctotal { border-color:var(--ink); }
  /* Calculator result label. Named .mx-crl, not .mx-cl: that one is the close
     block's text column (padding:var(--sect)…; width:48%), and a result box
     inheriting it rendered section-sized padding with a half-width label —
     the four totals became giant boxes with labels wrapped over three lines
     (found on /guides/distrokid-true-cost/, 2026-09-21). */
  .mx-cres .mx-crl { font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:var(--u1); line-height:1.3; }
  .mx-cres .mx-cv { font-size:1.15rem; font-weight:800; letter-spacing:-.01em; }
  .mx-cwarn { display:none; margin-top:var(--u3); padding:var(--u2) var(--u3); border-left:3px solid var(--acc); background:var(--paper); font-size:.88rem; color:var(--dim); }
  .mx-cwarn.mx-show { display:block; }
  .mx-cfine { font-size:.78rem; line-height:1.6; color:var(--faint); margin-top:var(--u3); }

  /* 18 featured releases — cards rendered by netlify/lib/featured-releases.mjs,
     shared by the homepage strip (spliced in by netlify/edge-functions/
     home-releases.ts, so these rules ride in the homepage's inlined www.css)
     and /artists/ (netlify/functions/artists-index.mjs links this file).
     No motion: the only state change is the link colour on hover. */
  .mx-rels { padding:var(--sect) var(--edge); border-top:1px solid var(--seam); }
  .mx-rhead { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--u2) var(--gut); }
  .mx-rhead .mx-h2 { margin:0; }
  .mx-rmore { font-family:var(--mono); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink);
              border-bottom:1px solid var(--ink); padding-bottom:2px; }
  .mx-rgrid, .mx-agrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap); margin-top:var(--hgap); }
  @media (min-width:640px){ .mx-rgrid, .mx-agrid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
  @media (min-width:960px){ .mx-rgrid, .mx-agrid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
  .mx-rc { background:var(--card); border:1px solid var(--seam); display:flex; flex-direction:column; min-width:0; }
  .mx-rcov { width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; background:var(--paper); border-bottom:1px solid var(--seam); }
  .mx-rcov--none { display:flex; align-items:center; justify-content:center; font-family:var(--face-display);
                   font-size:2.4rem; font-weight:800; color:var(--faint); }
  .mx-rbody { flex:1; display:flex; flex-direction:column; gap:var(--u1); padding:var(--u2); }
  .mx-rbody .mx-gt { overflow-wrap:anywhere; }
  .mx-rby { font-size:.88rem; line-height:1.4; color:var(--dim); overflow-wrap:anywhere; }
  .mx-rby a { text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
  .mx-rlinks { margin-top:auto; padding-top:var(--u1); display:flex; flex-wrap:wrap; gap:var(--u1) var(--u2);
               font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; color:var(--faint); }
  .mx-rlinks a { color:var(--ink); border-bottom:1px solid var(--seam); }
  @media (hover:hover){ .mx-rby a:hover, .mx-rlinks a:hover, .mx-rmore:hover { color:var(--acc-text); } }
  /* Recommended listens — an issue page (netlify/functions/listen-issue.mjs)
     is the release cards above plus Audora's line on why, and a row of links
     to the other issues. */
  .mx-rwhy { font-size:.95rem; line-height:1.45; color:var(--ink); overflow-wrap:anywhere; }
  .mx-issues { list-style:none; margin:var(--u2) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:var(--u1) var(--u3);
               font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
  .mx-issues a { color:var(--ink); border-bottom:1px solid var(--seam); }

  /* 19 featured artists — cards rendered by netlify/lib/featured-artists.mjs,
     the whole of /artists/. Same box/image-top/body-below shape as the release
     cards above (.mx-rc/.mx-rbody), reused directly, so the two grids read as
     one system. The logo is the card's lead image — Bo, 2026-09-14: "go back
     to the card design ... make the logo way bigger" (an earlier full-bleed
     attempt read as an empty box because the tone measurement it relied on was
     wrong, not because a big logo was the wrong idea — see image-tone.mjs).
     Only the art differs from a cover: contain, not cover (cropping a wordmark
     to a square cuts the name in half), on the backdrop measured per logo
     (netlify/lib/image-tone.mjs), mapped exactly as the artist's own page maps
     its logo disc — light ink (or unmeasurable) on black, dark ink on white,
     an image with its own background on the card surface. The whole card is
     the link, unlike a release card's several; no motion beyond the name's
     hover colour. */
  .mx-ac { display:flex; min-width:0; }
  .mx-ac > .mx-rc { flex:1; }
  .ax-logo { width:100%; height:auto; aspect-ratio:1/1; object-fit:contain; box-sizing:border-box;
             padding:var(--u3); border-bottom:1px solid var(--seam); }
  .ax-logo--none { display:flex; align-items:center; justify-content:center;
                   font-family:var(--face-display); font-size:3rem; font-weight:800;
                   letter-spacing:-.03em; color:var(--faint); }
  .ax-img--on-dark { background:var(--ink); }
  .ax-img--on-light { background:#fff; }
  .ax-img--own { background:var(--card); }
  .mx-rc .mx-gd { overflow-wrap:anywhere; }

  /* A partner's mark beside a line saying so (Songstats on /features/stats/, 2026-10-01). */
  .mx-partner { display:flex; flex-wrap:wrap; align-items:center; gap:var(--u2) var(--u3); margin-top:var(--u4); font-size:.9rem; color:var(--dim); }
  .mx-partner img { display:block; height:24px; width:auto; }

  /* /brand/: the logo and badge tiles, and the copy-paste code (Bo, 2026-10-03). */
  .mx-brand-tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:var(--u2); margin:var(--u3) 0; }
  .mx-brand-tile { display:flex; align-items:center; justify-content:center; min-height:7.5rem; padding:var(--u3); background:#fff; border:1px solid var(--seam); }
  .mx-brand-tile--ink { background:var(--ink); border-color:var(--ink); }
  /* Explicit heights: the base reset sets img { height:auto }, which would show each SVG at its
     ~3,500-unit intrinsic width. The badge reads at about the height a footer line gives it. */
  .mx-brand-tile img { display:block; width:auto; max-width:100%; height:1.6rem; }
  .mx-brand-tile--logo img { height:2.75rem; }
  .mx-brand-code { font-family:var(--mono); font-size:.72rem; line-height:1.6; white-space:pre-wrap; word-break:break-all; background:#fff; border:1px solid var(--seam); padding:var(--u2) var(--u3); margin:var(--u2) 0 var(--u3); max-width:72ch; }

  /* The AI assistant on the homepage (canvas approved by Bo 2026-10-03). Text left, a real
     chat captured from stage right; while the right cell holds only its placeholder comment,
     :empty drops it and the text takes the row. The three points run under it in .mx-track. */
  .mx-ai { border-top:3px solid var(--ink); background:var(--card); }
  .mx-ai-top { display:flex; flex-direction:column; }
  .mx-ai-txt { padding:var(--sect) var(--edge); display:flex; flex-direction:column; justify-content:center; }
  .mx-ai-txt .mx-h2 { margin-bottom:var(--u3); }
  .mx-ai-txt .mx-stand { margin-bottom:var(--u3); }
  .mx-ai-txt .mx-acts { margin-bottom:0; }
  .mx-ai-panel { padding:0 var(--edge) var(--sect); }
  .mx-ai-panel:empty { display:none; }
  .mx-ai > .mx-track { border-top:1px solid var(--seam); }
  @media (min-width:920px){
    .mx-ai-top { flex-direction:row; }
    .mx-ai-txt { flex:1.05 1 0; padding-right:var(--gut); }
    .mx-ai-panel { flex:.95 1 0; padding:var(--sect) var(--edge) var(--sect) var(--gut); display:flex; align-items:center; }
  }

  /* A chat frame for a real assistant conversation, shown as the product's own furniture:
     generic on purpose, never a copy of any one assistant's interface. */
  .chat-panel { display:flex; flex-direction:column; gap:var(--u2); width:100%; border:1px solid var(--seam); background:var(--paper); padding:var(--u3); }
  .chat-caption { align-self:flex-start; background:var(--ink); color:#EAE8E3; font-family:var(--mono); font-size:.62rem;
                  letter-spacing:.13em; text-transform:uppercase; padding:var(--u1) var(--u2); }
  .chat-turn { max-width:88%; font-size:.92rem; line-height:1.55; overflow-wrap:anywhere; }
  .chat-turn p + p { margin-top:var(--u1); }
  .chat-turn--user { align-self:flex-end; background:var(--card); border:1px solid var(--seam); padding:var(--u2) var(--u3); color:var(--ink); }
  .chat-turn--assistant { align-self:flex-start; border-left:3px solid var(--ink); padding:var(--u1) 0 var(--u1) var(--u3); color:var(--dim); }
  .chat-tools { display:flex; flex-wrap:wrap; gap:var(--u1); font-family:var(--mono); font-size:.62rem; letter-spacing:.06em; color:var(--faint); }
  .chat-tool { display:inline-flex; align-items:center; gap:.4em; border:1px solid var(--seam); padding:.2rem .5rem; }
  .chat-tool::before { content:"✓"; color:var(--acc-text); font-weight:700; }
  @media (max-width:520px){ .chat-panel { padding:var(--u2); } .chat-turn { max-width:100%; } }

  /* The AI assistant line on each paid plan: a line of its own under a small red kicker. */
  .mx-tlist li.mx-tai { display:block; margin-top:var(--u1); padding-top:var(--u2); border-top:1px solid var(--seam); color:var(--ink); }
  .mx-tlist li.mx-tai::before { content:none; }
  .mx-tai-k { display:block; font-family:var(--mono); font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; color:var(--acc-text); margin-bottom:.3rem; }
  .mx-tai a { text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }