/* ─── DESIGN TOKENS ──────────────────────────────────────── */
:root {
  --bg:          #050709;
  --bg-mid:      #080d0a;
  --bg-card:     #0e1511;
  --bg-card-h:   #131d17;
  --bg-glass:    rgba(14,21,17,0.75);

  --border:      rgba(16,200,122,0.12);
  --border-b:    rgba(16,200,122,0.38);
  --border-g:    rgba(207,181,59,0.30);

  --green:       #10c87a;
  --green-dim:   #3C7A50;
  --green-glow:  rgba(16,200,122,0.18);
  --green-deep:  rgba(16,200,122,0.05);

  --gold:        #CFB53B;
  --gold-b:      #F5D060;
  --gold-glow:   rgba(207,181,59,0.22);

  --navy:        #0C2340;
  --navy-b:      #0e2d50;

  --tw:          #eef4f0;
  --ts:          #94aaa0;
  --tm:          #637e71;  /* lifted from #4a6358 for WCAG AA contrast on dark bg (3.09:1 -> 4.57:1) */

  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 32px;
  --ease: 0.3s cubic-bezier(.4,0,.2,1);
  --bounce: 0.4s cubic-bezier(.34,1.56,.64,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--tw);
  overflow-x: hidden;
  line-height: 1.6;
}
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; }
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 2000;
  background: var(--green); color: #04150d; font-weight: 700;
  padding: 10px 16px; border-radius: 8px; transition: top .15s ease;
}
.skip-link:focus { top: 12px; outline: 3px solid #fff; outline-offset: 2px; }

/* ─── CELTIC KNOTWORK BG ─────────────────────────────────── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2310c87a' stroke-width='1'%3E%3Ccircle cx='50' cy='50' r='30'/%3E%3Ccircle cx='50' cy='50' r='42'/%3E%3Cline x1='50' y1='8' x2='50' y2='20'/%3E%3Cline x1='50' y1='80' x2='50' y2='92'/%3E%3Cline x1='8' y1='50' x2='20' y2='50'/%3E%3Cline x1='80' y1='50' x2='92' y2='50'/%3E%3Cline x1='21' y1='21' x2='29' y2='29'/%3E%3Cline x1='71' y1='71' x2='79' y2='79'/%3E%3Cline x1='79' y1='21' x2='71' y2='29'/%3E%3Cline x1='21' y1='79' x2='29' y2='71'/%3E%3Ccircle cx='50' cy='8' r='3'/%3E%3Ccircle cx='50' cy='92' r='3'/%3E%3Ccircle cx='8' cy='50' r='3'/%3E%3Ccircle cx='92' cy='50' r='3'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100px 100px;
}

/* ─── NAV ────────────────────────────────────────────────── */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px; height: 72px;
  transition: var(--ease);
}
#nav.scrolled {
  background: rgba(5,7,9,0.94);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
}
.nav-logo {
  display: flex; align-items: center; gap: 11px;
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em;
}
.nav-logo svg { width: 34px; height: 34px; }
.nav-logo .nav-badge { width: 36px; height: 36px; display: block; border-radius: 8px; }
.nav-logo .g { color: var(--green); margin-left: -0.5em; }
.nav-links { display: flex; align-items: center; gap: 36px; list-style: none; }
.nav-links a {
  font-size: .8rem; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ts);
  transition: color .15s;
}
.nav-links a:hover { color: var(--tw); }
.nav-right { display: flex; align-items: center; gap: 14px; }
.nav-cart {
  position: relative; background: var(--bg-card); border: 1px solid var(--border);
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; transition: var(--ease);
}
.nav-cart:hover { border-color: var(--border-b); }
.cart-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--green); color: #020e07;
  font-size: .6rem; font-weight: 800;
  width: 16px; height: 16px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
}
.cart-badge.show { display: flex; }
.nav-cta {
  background: linear-gradient(135deg, var(--gold) 0%, #8a6010 100%);
  color: #060400; font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 10px 22px; border: none; border-radius: 40px;
  transition: var(--ease); box-shadow: 0 4px 20px var(--gold-glow);
}
.nav-cta:hover {
  transform: translateY(-2px); filter: brightness(1.12);
  box-shadow: 0 8px 30px var(--gold-glow);
}
/* mobile hamburger */
.nav-ham {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; padding: 6px;
  /* 44x44 minimum touch target (WCAG 2.5.5) — visual bars stay 22px wide */
  min-width: 44px; min-height: 44px;
  align-items: center; justify-content: center;
  cursor: pointer;
}
.nav-ham span {
  display: block; width: 22px; height: 2px;
  background: var(--ts); border-radius: 2px; transition: var(--ease);
}
.mobile-menu {
  display: none; position: fixed; inset: 0; z-index: 999;
  background: rgba(5,7,9,0.97); backdrop-filter: blur(20px);
  flex-direction: column; align-items: center; justify-content: center; gap: 28px;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-family: 'Cinzel', serif;
  font-size: 1.6rem; font-weight: 700; color: var(--tw);
  transition: color .15s;
}
.mobile-menu a:hover { color: var(--green); }
.mobile-close {
  position: absolute; top: 24px; right: 28px;
  background: none; border: none; color: var(--ts);
  font-size: 1.6rem; transition: color .15s;
}
.mobile-close:hover { color: var(--tw); }

/* ─── HERO ───────────────────────────────────────────────── */
#hero {
  position: relative; min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 140px 24px 100px; overflow: hidden;
}
.hero-grad {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(12,35,64,.85) 0%, transparent 65%),
    radial-gradient(ellipse 55% 45% at 15% 100%, rgba(16,200,122,.1) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 85% 100%, rgba(207,181,59,.07) 0%, transparent 55%),
    var(--bg);
}
#heroCanvas { position: absolute; inset: 0; z-index: 1; }
.hero-content {
  position: relative; z-index: 10;
  text-align: center; max-width: 920px;
}
.hero-pill {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .7rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--green);
  background: var(--green-deep); border: 1px solid var(--border-b);
  padding: 6px 18px; border-radius: 40px; margin-bottom: 30px;
  animation: fadeDown .8s ease both;
}
.hero-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(3.4rem, 9vw, 7.5rem);
  font-weight: 900; line-height: .95; letter-spacing: -.02em;
  margin-bottom: 18px;
  animation: fadeUp .9s ease .1s both;
}
.hero-title .rock { color: var(--green); }
.hero-title .audio {
  display: block; font-size: .42em;
  letter-spacing: .45em; color: var(--gold);
  font-weight: 400; margin-top: 10px;
}
.hero-tagline {
  font-size: clamp(.95rem, 2vw, 1.2rem);
  color: var(--ts); max-width: 560px; margin: 0 auto 48px;
  line-height: 1.8; animation: fadeUp .9s ease .25s both;
}
.hero-actions {
  display: flex; gap: 14px; justify-content: center;
  flex-wrap: wrap; animation: fadeUp .9s ease .35s both;
}
.btn-em {
  background: linear-gradient(135deg, var(--green), #0a9a5e);
  color: #020e07; font-size: .82rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 15px 38px; border: none; border-radius: 40px;
  transition: var(--ease); box-shadow: 0 4px 28px rgba(16,200,122,.3);
}
.btn-em:hover { transform: translateY(-3px); box-shadow: 0 10px 40px rgba(16,200,122,.42); }
.btn-ghost {
  background: transparent; color: var(--tw);
  font-size: .82rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; padding: 15px 38px;
  border: 1px solid var(--border-b); border-radius: 40px; transition: var(--ease);
}
.btn-ghost:hover { border-color: var(--green); color: var(--green); background: var(--green-deep); }
.hero-scroll {
  position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
  z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 8px;
  animation: fadeIn 1s ease 1.1s both;
}
.hero-scroll span { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--tm); }
.scroll-line {
  width: 1px; height: 48px;
  background: linear-gradient(to bottom, var(--green), transparent);
  animation: pulse 2s ease-in-out infinite;
}

/* ─── MARQUEE ────────────────────────────────────────────── */
.marquee-strip {
  position: relative; z-index: 5; overflow: hidden;
  background: linear-gradient(90deg, var(--green-dim), #1a5c3a, var(--green-dim));
  border-top: 1px solid rgba(16,200,122,.25);
  border-bottom: 1px solid rgba(16,200,122,.25);
  padding: 13px 0;
}
.marquee-track {
  display: flex; animation: marquee 28s linear infinite; white-space: nowrap;
}
.m-item {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0 28px;
  font-size: .72rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: rgba(5,7,9,.88);
}
.m-item::after { content: '☘'; opacity: .55; }

/* ─── SHARED SECTION ─────────────────────────────────────── */
section { position: relative; z-index: 5; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 48px; }
.sec-head { text-align: center; margin-bottom: 72px; }
.sec-eye {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: .68rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 18px;
}
.sec-eye::before, .sec-eye::after {
  content: ''; display: block; width: 28px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.sec-eye::after { background: linear-gradient(90deg, var(--gold), transparent); }
.sec-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 900;
  line-height: 1.1; margin-bottom: 18px;
}
.sec-title .accent { color: var(--green); }
.sec-desc { font-size: 1rem; color: var(--ts); max-width: 520px; margin: 0 auto; line-height: 1.8; }

/* ─── ABOUT ──────────────────────────────────────────────── */
#about { padding: 120px 0; }
.about-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
}
.about-visual {
  display: flex; align-items: center; justify-content: center; position: relative;
}
.ring-outer {
  width: 380px; height: 380px; border-radius: 50%;
  border: 1px solid var(--border-b); position: relative;
  display: flex; align-items: center; justify-content: center;
}
.ring-outer::before {
  content: ''; position: absolute; inset: 18px; border-radius: 50%;
  border: 1px dashed rgba(16,200,122,.2);
  animation: spin 25s linear infinite;
}
.ring-outer::after {
  content: ''; position: absolute; inset: 40px; border-radius: 50%;
  border: 1px solid rgba(207,181,59,.15);
  animation: spin 40s linear infinite reverse;
}
.clover-center {
  width: 150px; height: 150px;
  filter: drop-shadow(0 0 32px rgba(16,200,122,.45));
  animation: float 6s ease-in-out infinite;
}
/* ornament dots on ring */
.ring-dot {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 10px var(--green);
}
.ring-dot:nth-child(1) { top: -4px; left: 50%; transform: translateX(-50%); }
.ring-dot:nth-child(2) { bottom: -4px; left: 50%; transform: translateX(-50%); }
.ring-dot:nth-child(3) { left: -4px; top: 50%; transform: translateY(-50%); }
.ring-dot:nth-child(4) { right: -4px; top: 50%; transform: translateY(-50%); }

.about-copy {}
.about-eye {
  font-size: .68rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--green); margin-bottom: 14px;
}
.about-h {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 900; line-height: 1.15; margin-bottom: 22px;
}
.about-h em { color: var(--green); font-style: normal; }
.about-p { color: var(--ts); line-height: 1.85; margin-bottom: 14px; }
.stats-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px;
}
.stat-box {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 22px 16px; text-align: center;
  transition: var(--ease);
}
.stat-box:hover { border-color: var(--border-b); background: var(--bg-card-h); }
.stat-n {
  font-family: 'Cinzel', serif;
  font-size: 2rem; font-weight: 900; color: var(--green);
  display: block; line-height: 1;
}
.stat-l {
  font-size: .65rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tm); margin-top: 6px;
}

/* ─── DSP PHILOSOPHY STRIP ───────────────────────────────── */
#dsp {
  padding: 100px 0;
  background: linear-gradient(135deg, #060c09 0%, var(--navy) 50%, #060c09 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.dsp-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
}
.dsp-cell {
  background: var(--bg-glass); backdrop-filter: blur(10px);
  border: 1px solid var(--border); padding: 36px 28px;
  text-align: center; transition: var(--ease); position: relative; overflow: hidden;
}
.dsp-cell:hover { background: var(--bg-card-h); border-color: var(--border-b); }
.dsp-cell::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  opacity: 0; transition: opacity .3s;
}
.dsp-cell:hover::before { opacity: 1; }
.dsp-icon { font-size: 2.2rem; display: block; margin-bottom: 16px; }
.dsp-title {
  font-family: 'Cinzel', serif;
  font-size: .92rem; font-weight: 700; color: var(--tw); margin-bottom: 10px;
}
.dsp-desc { font-size: .8rem; color: var(--ts); line-height: 1.7; }

/* ─── PLUGINS ────────────────────────────────────────────── */
#plugins { padding: 120px 0; }
.plugins-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.p-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  transition: var(--ease); cursor: pointer; position: relative;
}
.p-card:hover {
  border-color: var(--border-b); transform: translateY(-7px);
  box-shadow: 0 32px 64px rgba(0,0,0,.55), 0 0 40px var(--green-glow);
}
.p-card-top { position: absolute; top: 0; left: 0; right: 0; height: 2px; opacity: 0; transition: opacity .3s; }
.p-card:hover .p-card-top { opacity: 1; }
.c-g .p-card-top { background: linear-gradient(90deg, var(--green), #0a6640); }
.c-go .p-card-top { background: linear-gradient(90deg, var(--gold), #8a6000); }
.c-b .p-card-top  { background: linear-gradient(90deg, #5AE6DC, #0E7F86); }

/* GUI mockup area */
.p-gui { height: 200px; position: relative; overflow: hidden; }
.g-pipes { background: linear-gradient(155deg, #020c05 0%, #071a0f 60%, #040e08 100%); }
.g-fitz  { background: linear-gradient(155deg, #0d0a00 0%, #1c1400 60%, #110c00 100%); }
/* Ground taken from the shipped DeWHALER GUI (sampled from 05_screenshots/dewhaler_ui_web.png:
   #081018 / #02191F / #031421). Was an indigo derived from the retired periwinkle. */
.g-whale { background: linear-gradient(155deg, #030b10 0%, #02191F 60%, #031421 100%); }

.p-gui-label {
  position: absolute; top: 16px; left: 18px;
  font-family: 'Cinzel', serif; font-size: .95rem; font-weight: 700;
}
.p-gui-label.g  { color: var(--green); text-shadow: 0 0 15px rgba(16,200,122,.5); }
.p-gui-label.go { color: var(--gold);  text-shadow: 0 0 15px rgba(207,181,59,.4); }
.p-gui-label.b  { color: #5AE6DC;     text-shadow: 0 0 15px rgba(90,230,220,.4); }

.p-tag {
  position: absolute; top: 14px; right: 14px;
  font-size: .58rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; padding: 3px 10px; border-radius: 20px;
}
.t-g  { background: rgba(16,200,122,.12); color: var(--green); border: 1px solid rgba(16,200,122,.3); }
.t-go { background: rgba(207,181,59,.1);  color: var(--gold);  border: 1px solid rgba(207,181,59,.28); }
.t-b  { background: rgba(90,230,220,.1); color: #5AE6DC;     border: 1px solid rgba(90,230,220,.28); }

/* waveform SVG */
.wave-svg { position: absolute; bottom: 56px; left: 0; right: 0; height: 36px; opacity: .35; }

/* VU meters */
.vu-row {
  position: absolute; right: 18px; top: 50%; transform: translateY(-60%);
  display: flex; gap: 3px; align-items: flex-end;
}
.vu-b {
  width: 4px; border-radius: 2px;
  animation: vuBounce var(--d, 1s) ease-in-out infinite alternate;
}

/* Knob row */
.knob-row {
  position: absolute; bottom: 14px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 18px;
}
.knob {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid; position: relative;
  transition: transform .4s ease;
}
.p-card:hover .knob { transform: rotate(var(--r, 30deg)); }
.k-g  { border-color: var(--green); background: rgba(16,200,122,.06); }
.k-go { border-color: var(--gold);  background: rgba(207,181,59,.06); }
.k-b  { border-color: #5AE6DC;     background: rgba(90,230,220,.06); }
.knob::after {
  content: ''; position: absolute; top: 4px; left: 50%;
  transform: translateX(-50%); width: 2px; height: 11px;
  border-radius: 2px;
}
.k-g::after  { background: var(--green); }
.k-go::after { background: var(--gold); }
.k-b::after  { background: #5AE6DC; }

/* ON AIR lamp */
.on-air-lamp {
  position: absolute; top: 18px; right: 52px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #f03030; box-shadow: 0 0 9px #f03030;
  animation: blink 2.4s step-end infinite;
}
.on-air-txt {
  position: absolute; top: 14px; right: 68px;
  font-size: .58rem; font-weight: 700; letter-spacing: .1em;
  color: var(--gold); font-family: monospace;
}

/* plugin card body */
.p-body { padding: 26px 26px 30px; }
.p-cat {
  font-size: .62rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--tm); margin-bottom: 8px;
}
.p-name {
  font-family: 'Cinzel', serif; font-size: 1.45rem; font-weight: 900;
  margin-bottom: 11px; line-height: 1.1;
}
.p-name.g  { color: var(--green); }
.p-name.go { color: var(--gold); }
.p-name.b  { color: #5AE6DC; }
.p-blurb { color: var(--ts); font-size: .88rem; line-height: 1.65; margin-bottom: 22px; }
.fmt-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 22px; }
.fmt {
  font-size: .58rem; font-weight: 700; letter-spacing: .1em;
  padding: 3px 9px; border-radius: 4px;
  background: rgba(255,255,255,.04); color: var(--tm);
  border: 1px solid rgba(255,255,255,.07);
}
.p-foot { display: flex; align-items: center; justify-content: space-between; }
.p-price { font-family: 'Outfit', sans-serif; font-size: 1.55rem; font-weight: 800; }
.p-price sup { font-size: .55em; vertical-align: super; }
.pp-g  { color: var(--green); }
.pp-go { color: var(--gold); }
.pp-b  { color: #5AE6DC; }
.btn-learn {
  font-size: .72rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; padding: 9px 20px; border-radius: 30px;
  border: 1px solid; background: transparent; transition: var(--ease);
}
.bl-g  { color: var(--green); border-color: var(--border-b); }
.bl-g:hover  { background: rgba(16,200,122,.1); border-color: var(--green); }
.bl-go { color: var(--gold);  border-color: var(--border-g); }
.bl-go:hover { background: rgba(207,181,59,.1); border-color: var(--gold); }
.bl-b  { color: #5AE6DC; border-color: rgba(90,230,220,.3); }
.bl-b:hover  { background: rgba(90,230,220,.1); border-color: #5AE6DC; }

/* ─── PLATINUM (ShamPRESSOR) THEME ───────────────────────── */
.c-shampressor .p-card-top { background: linear-gradient(90deg, #aeb9c9, #6c7888); }
.g-la   { background: linear-gradient(155deg, #07080a 0%, #14181f 60%, #0a0c10 100%); }
.p-gui-label.la { color: #c4cedb; text-shadow: 0 0 15px rgba(174,185,201,.45); }
.t-la   { background: rgba(174,185,201,.1); color: #c4cedb; border: 1px solid rgba(174,185,201,.3); }
.p-name.la { color: #c4cedb; }
.pp-la  { color: #c4cedb; }
.k-la   { border-color: #aeb9c9; background: rgba(174,185,201,.06); }
.k-la::after { background: #aeb9c9; }
.bl-la  { color: #c4cedb; border-color: rgba(174,185,201,.3); }
.bl-la:hover { background: rgba(174,185,201,.1); border-color: #aeb9c9; }
.bb-la  { background: linear-gradient(135deg, #aeb9c9, #5c6878); color: #0a0c10; box-shadow: 0 4px 20px rgba(174,185,201,.25); }
.bb-la:hover { box-shadow: 0 8px 30px rgba(174,185,201,.4); transform: translateY(-2px); }
/* ShillelaghDRIVE — amber valve-drive theme */
.c-drive .p-card-top { background: linear-gradient(90deg, #e0913f, #a5641f); }
.g-dr   { background: linear-gradient(155deg, #0c0806 0%, #1f1509 60%, #0f0a06 100%); }
.p-gui-label.dr { color: #e6a45a; text-shadow: 0 0 15px rgba(224,145,63,.45); }
.t-dr   { background: rgba(224,145,63,.1); color: #e6a45a; border: 1px solid rgba(224,145,63,.3); }
.p-name.dr { color: #e6a45a; }
.pp-dr  { color: #e6a45a; }
.k-dr   { border-color: #e0913f; background: rgba(224,145,63,.06); }
.k-dr::after { background: #e0913f; }
.bl-dr  { color: #e6a45a; border-color: rgba(224,145,63,.3); }
.bl-dr:hover { background: rgba(224,145,63,.1); border-color: #e0913f; }
.bb-dr  { background: linear-gradient(135deg, #e0913f, #9a5a1a); color: #0f0a06; box-shadow: 0 4px 20px rgba(224,145,63,.25); }
.bb-dr:hover { box-shadow: 0 8px 30px rgba(224,145,63,.4); transform: translateY(-2px); }
/* VU needle nod to the optical gain-reduction meter */
.la-vu { position: absolute; top: 16px; right: 16px; font-size: .58rem; font-weight: 700; letter-spacing: .12em; color: #d96a5a; font-family: monospace; }

/* ─── MODALS ─────────────────────────────────────────────── */
.modal {
  display: none; position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,.88); backdrop-filter: blur(14px);
  overflow-y: auto; padding: 60px 24px;
}
.modal.on { display: flex; align-items: flex-start; justify-content: center; animation: fadeIn .22s ease; }
.m-box {
  background: var(--bg-card); border: 1px solid var(--border-b);
  border-radius: var(--r-xl); width: 100%; max-width: 920px;
  overflow: hidden; animation: mIn .36s var(--bounce);
  position: relative;
}
.m-close {
  position: absolute; top: 18px; right: 18px; z-index: 10;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.07); border: none;
  color: var(--ts); font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: var(--ease);
}
.m-close:hover { background: rgba(255,255,255,.14); color: var(--tw); }
.m-hero { height: 260px; position: relative; overflow: hidden; display: flex; align-items: flex-end; }
.m-hero-bg { position: absolute; inset: 0; }
.m-hero-content { padding: 36px; position: relative; z-index: 2; }
.m-badge {
  font-size: .62rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; padding: 4px 14px; border-radius: 20px;
  display: inline-block; margin-bottom: 10px;
}
.m-title { font-family: 'Cinzel', serif; font-size: clamp(1.9rem,4vw,2.8rem); font-weight: 900; }
.m-sub { color: var(--ts); font-size: .92rem; margin-top: 7px; }
.m-body { padding: 44px; }
/* Real plugin screenshot. These are actual captures of the shipped interface
   (LOGOS/16_plugin_identity_2026-07-25/05_screenshots/, see its SOURCE.md), which is why
   the alt text is allowed to say "interface" — the emblems it sits beside are not.
   Not every product has an approved capture; check SOURCE.md before adding one. */
.m-shot { margin: 0 0 36px; }
.m-shot picture { display: block; }
.m-shot img {
  display: block; width: 100%; height: auto; border-radius: var(--r-md);
  border: 1px solid var(--border); background: #05070a;
}
.m-shot figcaption {
  font-size: .68rem; color: var(--tm); margin-top: 10px; text-align: center;
  letter-spacing: .04em;
}
.m-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 44px; }
.m-desc { color: var(--ts); line-height: 1.85; font-size: .93rem; margin-bottom: 28px; }
.m-feats h3 {
  font-family: 'Cinzel', serif; font-size: .8rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px;
}
.feat-list { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.feat-list li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: .85rem; color: var(--ts); line-height: 1.5;
}
.feat-list li::before { content: '▸'; color: var(--green); flex-shrink: 0; margin-top: 1px; }
.m-ctrl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
.ctrl-box {
  background: var(--bg-mid); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 11px 13px;
}
.ctrl-n { font-size: .72rem; font-weight: 700; }
.ctrl-d { font-size: .67rem; color: var(--tm); margin-top: 3px; }

.m-side {}
.m-price-card {
  background: var(--bg-mid); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 26px; text-align: center; margin-bottom: 16px;
}
.m-price { font-family: 'Outfit', sans-serif; font-size: 2.8rem; font-weight: 900; line-height: 1; }
.m-price sup { font-size: .42em; vertical-align: super; }
.m-price-note { font-size: .7rem; color: var(--tm); margin-top: 8px; }
.btn-buy {
  width: 100%; padding: 15px; border: none; border-radius: var(--r-md);
  font-size: .82rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; margin-bottom: 10px; transition: var(--ease);
}
.bb-g  { background: linear-gradient(135deg, var(--green), #0a9a5e); color: #020e07; box-shadow: 0 4px 20px rgba(16,200,122,.25); }
.bb-g:hover  { box-shadow: 0 8px 30px rgba(16,200,122,.4); transform: translateY(-2px); }
.bb-go { background: linear-gradient(135deg, var(--gold), #8a6010); color: #060400; box-shadow: 0 4px 20px var(--gold-glow); }
.bb-go:hover { box-shadow: 0 8px 30px rgba(207,181,59,.4); transform: translateY(-2px); }
.bb-b  { background: linear-gradient(135deg, #0E7F86, #0A5F66); color: #fff; box-shadow: 0 4px 20px rgba(90,230,220,.25); }
.bb-b:hover  { box-shadow: 0 8px 30px rgba(90,230,220,.4); transform: translateY(-2px); }
.btn-demo {
  width: 100%; padding: 12px; border: 1px solid var(--border);
  border-radius: var(--r-md); background: transparent; color: var(--ts);
  font-size: .75rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; transition: var(--ease);
}
.btn-demo:hover { border-color: var(--border-b); color: var(--tw); }
.m-guar { font-size: .68rem; color: var(--tm); text-align: center; margin: 10px 0 4px; }
.ab-player { margin-top: 18px; background: var(--bg-mid); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px; }
.ab-head { font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ts); margin-bottom: 10px; }
.ab-row { display: flex; align-items: center; gap: 8px; }
.ab-play { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-b); background: transparent; color: var(--green); font-size: .8rem; flex-shrink: 0; transition: var(--ease); }
.ab-play:hover { background: var(--green-deep); }
.ab-play.playing { color: var(--gold); border-color: var(--border-g); }
.ab-seg { flex: 1; font-size: .72rem; font-weight: 600; padding: 7px 4px; border: 1px solid var(--border); border-radius: var(--r-sm); background: transparent; color: var(--ts); transition: var(--ease); }
.ab-seg.ab-active { border-color: var(--border-b); color: var(--tw); background: var(--green-deep); }
.ab-note { font-size: .64rem; color: var(--tm); margin-top: 9px; text-align: center; }
.ab-player.ready .ab-note { display: none; }
.ab-player.disabled .ab-play, .ab-player.disabled .ab-seg { opacity: .45; pointer-events: none; }
.m-specs { margin-top: 26px; }
.m-specs h4 {
  font-size: .62rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--tm); margin-bottom: 12px;
}
.spec-r {
  display: flex; justify-content: space-between;
  font-size: .77rem; padding: 7px 0; border-bottom: 1px solid var(--border);
  color: var(--ts);
}
.spec-r:last-child { border: none; }
.spec-v { color: var(--tw); font-weight: 500; }

/* ─── QUOTE BAND ─────────────────────────────────────────── */
#quote {
  padding: 96px 0;
  background: linear-gradient(135deg, #050b07 0%, var(--navy) 50%, #050b07 100%);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.quote-inner { text-align: center; max-width: 780px; margin: 0 auto; }
.q-orn {
  display: flex; align-items: center; gap: 20px;
  justify-content: center; margin-bottom: 36px;
}
.q-line { flex: 1; height: 1px; max-width: 100px; }
.q-line.l { background: linear-gradient(90deg, transparent, var(--gold)); }
.q-line.r { background: linear-gradient(90deg, var(--gold), transparent); }
.q-clover { font-size: 1.8rem; }
blockquote {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.3rem, 2.8vw, 2rem);
  font-weight: 700; line-height: 1.55; color: var(--tw); margin-bottom: 28px;
}
blockquote em { color: var(--green); font-style: normal; }
.q-attr { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--tm); }

/* ─── MARKETPLACE ────────────────────────────────────────── */
#market { padding: 120px 0; background: var(--bg-mid); }
.mkt-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 40px;
}
.mkt-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 28px 20px; text-align: center;
  transition: var(--ease); position: relative; overflow: hidden;
}
.mkt-card:hover { border-color: var(--border-b); transform: translateY(-4px); }
.mkt-card.best {
  border-color: rgba(207,181,59,.4);
  background: linear-gradient(160deg, #130f04 0%, var(--bg-card) 100%);
}
.best-ribbon {
  position: absolute; top: 0; left: 0; right: 0;
  background: linear-gradient(90deg, var(--gold), #8a6010);
  color: #050300; font-size: .58rem; font-weight: 800;
  letter-spacing: .18em; text-align: center; padding: 5px;
}
.mkt-icon { font-size: 2.4rem; margin: 20px 0 14px; display: block; }
/* Product mark. 2026-07-25: the 480x300 faceplate ILLUSTRATIONS were replaced by the
   1024x1024 plugin icons from LOGOS/16_plugin_identity_2026-07-25. Per USAGE-SPEC 5 the
   mark gets no added stroke, shadow or frame, and is not squashed — hence no border and
   object-fit: contain. Any product still carrying a legacy 480x300 emblem letterboxes
   inside the same square box, so the grid stays aligned either way. */
.mkt-emblem { width: 100%; max-width: 150px; aspect-ratio: 1 / 1; object-fit: contain; margin: 4px auto 20px; display: block; }
/* Legacy-emblem opt-in. A legacy 480x300 illustration letterboxes inside the square slot,
   which next to filled app icons reads as "broken" rather than "no mark yet". The frame makes
   the empty state look deliberate. It is NOT applied to the system marks — USAGE-SPEC 5
   forbids adding a stroke or frame to those. Drop this rule once no legacy emblem remains. */
.mkt-emblem.legacy { border: 1px solid var(--border); border-radius: 12px; background: #0a0d0b; }
.mkt-name {
  font-family: 'Cinzel', serif;
  font-size: 1rem; font-weight: 800; margin-bottom: 7px;
}
.mkt-sub { font-size: .75rem; color: var(--tm); margin-bottom: 18px; line-height: 1.5; }
.mkt-price { font-family: 'Outfit', sans-serif; font-size: 1.9rem; font-weight: 900; margin-bottom: 4px; }
.mkt-price sup { font-size: .5em; vertical-align: super; }
.mkt-note { font-size: .68rem; color: var(--tm); margin-bottom: 18px; }
.mkt-inc { list-style: none; margin-bottom: 20px; text-align: left; }
.mkt-inc li { font-size: .73rem; color: var(--ts); padding: 3px 0; }
.mkt-inc li::before { content: '✓  '; color: var(--green); }
.btn-mkt {
  width: 100%; padding: 11px; border-radius: var(--r-sm);
  font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  transition: var(--ease); border: none;
}
.bm-out {
  background: transparent; color: var(--ts); border: 1px solid var(--border);
}
.bm-out:hover { border-color: var(--border-b); color: var(--tw); }
.bm-gold { background: linear-gradient(135deg, var(--gold), #8a6010); color: #050300; }
.bm-gold:hover { filter: brightness(1.12); }
.mkt-guar { font-size: .62rem; color: var(--tm); margin-top: 9px; letter-spacing: .02em; }
.mkt-pop {
  position: absolute; top: 0; right: 0;
  background: var(--green-dim); color: var(--green);
  font-size: .54rem; font-weight: 800; letter-spacing: .14em;
  padding: 4px 9px; border-bottom-left-radius: var(--r-sm); z-index: 2;
}

.guarantee {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 22px 36px;
  display: flex; align-items: center; justify-content: center;
  gap: 44px; flex-wrap: wrap;
}
.g-item { display: flex; align-items: center; gap: 10px; font-size: .78rem; color: var(--ts); }
.g-icon { font-size: 1.35rem; }
.daw-chip {
  font-size: .82rem; font-weight: 600; color: var(--ts);
  padding: 7px 16px; border: 1px solid var(--border);
  border-radius: 30px; background: var(--bg-card); transition: var(--ease);
}
.daw-chip:hover { border-color: var(--border-b); color: var(--tw); }

/* ─── TESTIMONIALS ───────────────────────────────────────── */
#testimonials { padding: 120px 0; }
.t-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.t-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 34px 28px;
  transition: var(--ease);
}
.t-card:hover { border-color: var(--border-b); background: var(--bg-card-h); }
.t-stars { color: var(--gold); font-size: 1rem; letter-spacing: 2px; margin-bottom: 16px; }
.t-quote { font-size: .9rem; color: var(--ts); line-height: 1.8; margin-bottom: 24px; font-style: italic; }
.t-author { display: flex; align-items: center; gap: 12px; }
.t-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg-mid); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
}
.t-name { font-size: .82rem; font-weight: 700; color: var(--tw); }
.t-role { font-size: .7rem; color: var(--tm); }

/* ─── COMING SOON ────────────────────────────────────────── */
#soon { padding: 100px 0; background: var(--bg-mid); }
.soon-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.soon-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 22px 16px;
  text-align: center; position: relative; overflow: hidden;
  transition: var(--ease);
}
.soon-card:hover { border-color: var(--border-b); transform: translateY(-3px); }
.soon-badge {
  position: absolute; top: 0; right: 0;
  background: var(--green-dim); color: var(--green);
  font-size: .52rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 3px 8px; border-bottom-left-radius: var(--r-sm);
}
.soon-icon { font-size: 2rem; margin-bottom: 10px; display: block; }
.soon-name {
  font-family: 'Cinzel', serif; font-size: .82rem; font-weight: 700;
  margin-bottom: 5px; color: var(--tw);
}
.soon-type { font-size: .62rem; color: var(--tm); letter-spacing: .1em; text-transform: uppercase; }

/* email signup */
.signup-row {
  text-align: center; margin-top: 52px;
}
.signup-row p { font-size: .85rem; color: var(--tm); margin-bottom: 18px; }
.signup-form {
  display: flex; gap: 10px; justify-content: center;
  max-width: 460px; margin: 0 auto;
}
.signup-input {
  flex: 1; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 40px; padding: 12px 22px; color: var(--tw);
  font-size: .83rem; outline: none; transition: border-color .15s;
  font-family: inherit;
}
.signup-input:focus { border-color: var(--border-b); }
.signup-input::placeholder { color: var(--tm); }

/* ─── FOOTER ─────────────────────────────────────────────── */
footer {
  background: #030406; border-top: 1px solid var(--border); padding: 60px 0 36px;
}
.ft-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 44px; margin-bottom: 52px;
}
.ft-logo {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  font-family: 'Outfit', sans-serif; font-size: 1.05rem; font-weight: 800;
}
.ft-logo svg { width: 30px; height: 30px; }
.ft-logo .ft-badge { width: 32px; height: 32px; display: block; border-radius: 7px; }
.ft-logo .g { color: var(--green); margin-left: -0.5em; }
.ft-tagline { color: var(--tm); font-size: .82rem; line-height: 1.7; max-width: 240px; }
.ft-social { display: flex; gap: 10px; margin-top: 22px; }
.soc-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg-card); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; color: var(--tm); transition: var(--ease);
}
.soc-btn:hover { border-color: var(--border-b); color: var(--tw); }
.ft-col h4 {
  font-size: .62rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--tm); margin-bottom: 18px;
}
.ft-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.ft-col ul li a { font-size: .82rem; color: var(--ts); transition: color .15s; }
.ft-col ul li a:hover { color: var(--green); }
.ft-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 28px; border-top: 1px solid var(--border); flex-wrap: wrap; gap: 12px;
}
.ft-copy { font-size: .72rem; color: var(--tm); }
.ft-copy .g { color: var(--green); }
.ft-legal { display: flex; gap: 20px; }
.ft-legal a { font-size: .72rem; color: var(--tm); transition: color .15s; }
.ft-legal a:hover { color: var(--ts); }

/* ─── TOAST ──────────────────────────────────────────────── */
#toast {
  position: fixed; bottom: 32px; right: 32px; z-index: 9999;
  background: var(--bg-card-h); border: 1px solid var(--border-b);
  border-radius: var(--r-md); padding: 16px 24px;
  display: flex; align-items: center; gap: 12px;
  transform: translateY(100px); opacity: 0;
  transition: all .4s var(--bounce);
  pointer-events: none;
}
#toast.show { transform: translateY(0); opacity: 1; }
.toast-icon { color: var(--green); font-size: 1.2rem; }
.toast-msg { font-size: .85rem; }

/* ─── ANIMATIONS ─────────────────────────────────────────── */
@keyframes fadeIn   { from { opacity:0 } to { opacity:1 } }
@keyframes fadeUp   { from { opacity:0; transform:translateY(22px) } to { opacity:1; transform:translateY(0) } }
@keyframes fadeDown { from { opacity:0; transform:translateY(-14px) } to { opacity:1; transform:translateY(0) } }
@keyframes marquee  { from { transform:translateX(0) } to { transform:translateX(-50%) } }
@keyframes spin     { to { transform:rotate(360deg) } }
@keyframes float    { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-16px) } }
@keyframes vuBounce { from { transform:scaleY(.15) } to { transform:scaleY(1) } }
@keyframes blink    { 0%,49% { opacity:1 } 50%,100% { opacity:.15 } }
@keyframes pulse    { 0%,100% { opacity:.25; transform:scaleY(.6) } 50% { opacity:1; transform:scaleY(1) } }
@keyframes mIn      { from { opacity:0; transform:scale(.92) translateY(18px) } to { opacity:1; transform:scale(1) translateY(0) } }
@keyframes countUp  { from { opacity:0 } to { opacity:1 } }

.reveal { opacity:0; transform:translateY(36px); transition: opacity .65s ease, transform .65s ease; }
.reveal.vis { opacity:1; transform:translateY(0); }

/* ─── REDUCED MOTION (accessibility) ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* Fully stop continuous/looping motion: marquee, spinning rings, floating clover, scroll-line pulse */
  .marquee-track,
  .ring-outer::before, .ring-outer::after,
  .clover-center,
  .scroll-line {
    animation: none !important;
  }
  /* Neutralise transform offsets left by halted intro animations so content stays visible */
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  /* Disable all decorative transitions/animations site-wide */
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .plugins-grid  { grid-template-columns: 1fr 1fr; }
  .mkt-grid      { grid-template-columns: 1fr 1fr; }
  .soon-grid     { grid-template-columns: repeat(3, 1fr); }
  .ft-grid       { grid-template-columns: 1fr 1fr; }
  .about-grid    { grid-template-columns: 1fr; }
  .dsp-grid      { grid-template-columns: 1fr 1fr; }
  .t-grid        { grid-template-columns: 1fr 1fr; }
  .ring-outer    { width: 280px; height: 280px; }
}
@media (max-width: 768px) {
  .container     { padding: 0 20px; }
  #nav           { padding: 0 20px; }
  .nav-links, .nav-cta { display: none; }
  .nav-ham       { display: flex; }
  .nav-cart      { display: flex; }
  .plugins-grid  { grid-template-columns: 1fr; }
  .mkt-grid      { grid-template-columns: 1fr; }
  .soon-grid     { grid-template-columns: 1fr 1fr; }
  .t-grid        { grid-template-columns: 1fr; }
  .ft-grid       { grid-template-columns: 1fr; }
  .dsp-grid      { grid-template-columns: 1fr 1fr; }
  .m-grid        { grid-template-columns: 1fr; }
  .m-body        { padding: 28px 20px; }
  .m-ctrl        { grid-template-columns: 1fr; }
  .stats-row     { grid-template-columns: repeat(3, 1fr); }
  .guarantee     { gap: 20px; }
}

/* ── Mobile legibility floor ───────────────────────────────────────────────
   Audited at 390px: real reading text was rendering at 9.3–11.7px — control
   descriptions (10.7px), format badges (9.3px), the marketplace guarantee line
   (9.9px) and footer headings (9.9px). Body copy under ~12px is hard to read on
   a phone and invites pinch-zoom. These bump ONLY at <=768px — the desktop
   design is unchanged. Uppercase micro-labels with wide letter-spacing sit at
   ~11-11.5px, which reads larger than the number suggests because of the caps. */
@media (max-width: 768px) {
  .mkt-inc li  { font-size: .8rem; }    /* 11.7 -> 12.8  feature bullets      */
  .ctrl-n      { font-size: .8rem; }    /* 11.5 -> 12.8  control name         */
  .ctrl-d      { font-size: .76rem; }   /* 10.7 -> 12.2  control description  */
  .ab-seg      { font-size: .8rem; }    /* 11.5 -> 12.8  A/B toggle (tappable)*/
  .mkt-note    { font-size: .78rem; }   /* 10.9 -> 12.5  "not yet for sale"   */
  .mkt-guar    { font-size: .75rem; }   /*  9.9 -> 12.0  guarantee line       */
  .fmt         { font-size: .7rem; }    /*  9.3 -> 11.2  uppercase badge      */
  .ft-col h4   { font-size: .72rem; }   /*  9.9 -> 11.5  uppercase heading    */

  /* Second pass — the plugin cards, modals and footer. */
  .p-tag        { font-size: .68rem; }  /*  9.3 -> 10.9  card art tag         */
  .p-cat        { font-size: .72rem; }  /*  9.9 -> 11.5  card category        */
  .m-badge      { font-size: .72rem; }  /*  9.9 -> 11.5  modal badge          */
  .m-body h4    { font-size: .72rem; }  /*  9.9 -> 11.5  "Specifications"     */
  .ab-head      { font-size: .72rem; }  /* 10.2 -> 11.5  "Hear it"            */
  .sec-eye      { font-size: .72rem; }  /* 10.9 -> 11.5  section eyebrow      */
  /* .stat-l deliberately NOT bumped: it lives in a repeat(3,1fr) grid and the
     long labels ("Lookahead Samples") exceed their track at any larger size —
     measured, it blew the About section from 386 -> 411px. It stays at 10.4px,
     uppercase with wide tracking under a large number that carries the meaning.
     Fixing it properly means restructuring the stats row, which is a design
     decision, not a bug fix. */
  .ab-note      { font-size: .75rem; }  /* 10.2 -> 12.0  reading text         */
  .m-guar       { font-size: .75rem; }  /* 10.9 -> 12.0  reading text         */
  .m-price-note { font-size: .78rem; }  /* 11.2 -> 12.5  "not yet for sale"   */
  .t-role       { font-size: .78rem; }  /* 11.2 -> 12.5  reading text         */
  .btn-learn    { font-size: .78rem; }  /* 11.5 -> 12.5  tappable             */
  .ft-legal a   { font-size: .78rem; }  /* 11.5 -> 12.5  tappable legal links */
}