/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Fonts ────────────────────────────────────────────────────
   Self-hosted (variable woff2, one file covers every weight) so
   no visitor data goes to Google Fonts. Latin + Latin Extended only. */
@font-face {
  font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/hanken-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/hanken-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url(fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url(fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===========================================================================
   Design tokens — aligned with the BAD Tea MKIII panel (dark mode)
   ----------------------------------------------------------------------------
   The panel and the site now share one palette, one type scale, and one
   "engraved label" treatment, so marketing and product read as one object.
   =========================================================================== */
:root {
  /* type — the panel's exact families */
  --sans: 'Hanken Grotesk', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  /* surface — near-black ground, lifted plate */
  --bg:           #08080b;
  --bg-2:         #0f0f14;
  --bg-3:         #161620;
  --surface:      #1a1a26;
  --plate-a:      #1f1f2a;          /* lifted card face (top) */
  --plate-b:      #15151d;          /* lifted card face (bottom) */
  --border:       rgba(255,255,255,0.07);
  --border-strong:rgba(255,255,255,0.12);

  /* brand accents */
  --crimson:      #c0192b;
  --crimson-h:    #e01f33;
  --crimson-dk:   #8c0f1e;
  --gold:         #c9993a;
  --gold-l:       #e8b84b;

  /* phosphor — the panel's LCD readout green */
  --phos:         #5EF53F;
  --phos-glow:    rgba(94,245,63,0.55);

  /* ink scale (panel's --ink / --ink-soft / --ink-faint) */
  --text:         #ededf0;
  --ink:          #d2d2dc;
  --muted:        #9a9aab;
  --faint:        #7a7a8c;

  /* engraved-label lips — the panel's signature cut-into-surface look */
  --emb-lo: rgba(255,255,255,.13);
  --emb-hi: rgba(0,0,0,.75);

  --radius:    6px;
  --radius-lg: 10px;
}

html { scroll-behavior: smooth; }

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

a { color: inherit; text-decoration: none; }

img { display: block; max-width: 100%; }

/* ── Typography ───────────────────────────────────────────── */
.display { font-family: var(--sans); }

h1, h2, h3 { line-height: 1.2; font-weight: 700; }

/* Engraved label — the panel's .lbl cut-into-surface shadow. Labels stay in
   the sans; the mono is reserved for .readout (real values, like the
   panel's LCDs). */
.engraved,
.format-badge,
.footer-col h4,
.specs-col h3,
.plugin-type {
  text-shadow: 0 1px 0 var(--emb-lo), 0 -1px 1px var(--emb-hi);
}

/* Readout — the plugin's phosphor LCD (ported from BAD Tea's MKIII panel
   spec, GUI/MKIII/panel_mkiii.html): green mono in recessed glass, a
   sub-pixel red/cyan fringe at rest and a brief chromatic-aberration burst
   late in a long cycle. Duration (11-27 s) and phase are randomised per
   readout by initReadouts(), so a glitch is an occasional event, not a
   flicker. The panel does the fringe with stacked red/cyan copies of the
   text; here it's offset text-shadows, because fetchLivePrices() rewrites
   textContent and copies would go stale. Used sparingly, prices only. */
.readout {
  position: relative;
  isolation: isolate;
  display: inline-block;
  font-family: var(--mono);
  font-weight: 700;
  color: var(--phos);
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 0.34em 0.6em 0.32em;
  border-radius: 4px;
  background:
    radial-gradient(120% 80% at 14% -18%, rgba(255,255,255,.10), transparent 58%),
    linear-gradient(100deg, rgba(120,190,140,.07), rgba(0,0,0,0) 46%),
    linear-gradient(180deg, #163010, #0a1322);
  box-shadow:
    inset 0 6px 8px rgba(0,0,0,1),
    inset 3px 0 5px rgba(0,0,0,.55),
    inset -3px 0 5px rgba(0,0,0,.35),
    inset 0 -2px 0 rgba(120,255,150,.55),
    0 0 0 1px rgba(15,20,32,.9),
    0 0 0 3px rgba(28,29,38,.65),
    0 1px 0 rgba(255,255,255,.10),
    0 2px 4px rgba(17,28,45,.6),
    0 4px 8px rgba(17,28,45,.35);
  text-shadow:
    .35px 0 0 rgba(255,71,87,.46), -.35px 0 0 rgba(0,217,255,.42),
    0 0 .6px rgba(160,255,140,.85), 0 0 3.5px rgba(29,233,0,.30);
  animation: readout-ab var(--abd, 19s) steps(1, end) var(--abdel, 0s) infinite;
}

/* screen glass + glare, entering from the left like the panel's key light */
.readout::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(101deg,
      rgba(255,255,255,.20) 0%,
      rgba(255,255,255,.11) 9%,
      rgba(255,255,255,.03) 21%,
      rgba(255,255,255,0)   38%),
    linear-gradient(90deg, rgba(186,226,255,.09), rgba(186,226,255,0) 52%);
  box-shadow: inset 1px 0 0 rgba(255,255,255,.14);
}

@keyframes readout-ab {
  0%, 95%, 98.3%, 100% {
    text-shadow:
      .35px 0 0 rgba(255,71,87,.46), -.35px 0 0 rgba(0,217,255,.42),
      0 0 .6px rgba(160,255,140,.85), 0 0 3.5px rgba(29,233,0,.30); }
  95.6% {
    text-shadow:
      1.7px .4px 0 rgba(255,71,87,.46), -1.6px -.4px 0 rgba(0,217,255,.42),
      1.2px 0 2px rgba(255,71,87,.70), -1.2px 0 2px rgba(0,217,255,.66),
      0 0 6px rgba(29,233,0,.30); }
  96.4% {
    text-shadow:
      1.1px -.4px 0 rgba(255,71,87,.46), -1px .4px 0 rgba(0,217,255,.42),
      .7px 0 2px rgba(255,71,87,.50), -.7px 0 2px rgba(0,217,255,.46),
      0 0 7px rgba(29,233,0,.40); }
  97.1% {
    text-shadow:
      2.2px 0 0 rgba(255,71,87,.46), -2.1px 0 0 rgba(0,217,255,.42),
      1.9px 0 2.5px rgba(255,71,87,.88), -1.9px 0 2.5px rgba(0,217,255,.84),
      0 0 5px rgba(29,233,0,.24); }
  97.7% {
    text-shadow:
      1px .3px 0 rgba(255,71,87,.46), -.9px -.3px 0 rgba(0,217,255,.42),
      .6px 0 2px rgba(255,71,87,.44), -.6px 0 2px rgba(0,217,255,.40),
      0 0 7px rgba(29,233,0,.40); }
}

@media (prefers-reduced-motion: reduce) {
  .readout { animation: none; }
}

/* ── Layout ───────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

section { padding: 100px 0; }

/* ── NAV ──────────────────────────────────────────────────── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  /* recessed bezel — the bar reads as a channel cut into the top of the page,
     the same way the panel's head sits in the chassis */
  background: linear-gradient(180deg, #050507, rgba(8,8,11,0.92));
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid rgba(0,0,0,0.8);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 -2px 4px rgba(0,0,0,0.6),
    0 4px 16px rgba(0,0,0,0.5);
  transition: background 0.3s;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.logo {
  font-family: var(--sans);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-mark-img {
  height: 44px;
  width: auto;
  object-fit: contain;
  /* Mark already carries its own crimson/black linework — just add the glow */
  filter: drop-shadow(0 0 10px rgba(192,25,43,0.85)) drop-shadow(0 0 20px rgba(192,25,43,0.5));
}

.logo-text span {
  color: var(--gold);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}

/* Nav links: plain sans, engraved into the bar. */
.nav-links a {
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--muted);
  text-shadow: 0 1px 0 var(--emb-lo), 0 -1px 1px var(--emb-hi);
  transition: color 0.2s;
}

.nav-links a:hover { color: var(--text); }

.nav-links .nav-cta {
  padding: 6px 16px;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  text-shadow: none !important;
  color: #fff;
}

.nav-links .nav-cta:hover {
  color: #fff;
}

/* ── HERO ─────────────────────────────────────────────────── */
#hero {
  padding: 172px 0 96px;
  position: relative;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 60% 50%, rgba(192,25,43,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 20% 80%, rgba(201,153,58,0.07) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

/* Grid lines. The vertical offset (--grid-y) is driven by JS on scroll,
   moving the grid at a fraction of the page's scroll speed so it drifts
   slowly for a parallax effect instead of scrolling 1:1 with content —
   works on iOS, unlike background-attachment: fixed. */
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  background-position: 0 var(--grid-y, 0px);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}

/* Same parallax grid behind Support, so it reads as one continuous
   drifting grid across the sections. */
#support { position: relative; }

#support::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.026) 1px, transparent 1px);
  background-size: 60px 60px;
  background-position: 0 var(--grid-y, 0px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  pointer-events: none;
  z-index: 0;
}

/* Keep each section's own content above its grid layer */
#support .container {
  position: relative;
  z-index: 1;
}

/* Narrow grid + glow strip between Plugins and About — both sections sit on
   flat black, so this breaks the seam the same way the hero/support grid does. */
.grid-glow-strip {
  position: relative;
  height: 110px;
  overflow: hidden;
  background: var(--bg-2);
}

.grid-glow-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 60px 60px;
  background-position: 0 var(--grid-y, 0px);
  mask-image: linear-gradient(180deg, transparent, #000 50%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 50%, transparent);
}

.grid-glow-strip::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 45% 140% at 50% 50%, rgba(192,25,43,0.05) 0%, transparent 70%),
    radial-gradient(ellipse 25% 100% at 70% 50%, rgba(201,153,58,0.03) 0%, transparent 70%);
}

.grid-glow-strip .strip-divider-top,
.grid-glow-strip .strip-divider-bottom {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.grid-glow-strip .strip-divider-top { top: 0; }
.grid-glow-strip .strip-divider-bottom { bottom: 0; }

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 960px;
}

.hero-title {
  font-family: var(--sans);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
  line-height: 1.05;
  white-space: nowrap;
    color: #fff;
  text-shadow:
    0 2px 2px rgba(0,0,0,0.7),
    0 8px 30px rgba(0,0,0,0.5);
}

.hero-title .accent {
  background: linear-gradient(135deg, var(--crimson) 0%, var(--gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-sub {
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 520px;
  margin-bottom: 44px;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}

.btn-primary {
  background: linear-gradient(180deg, var(--crimson-h), var(--crimson));
  color: #fff;
  border: 1px solid var(--crimson-dk);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    inset 0 -2px 4px rgba(0,0,0,0.3),
    0 4px 14px rgba(192,25,43,0.35),
    0 0 0 1px rgba(0,0,0,0.4);
}

.btn-primary:hover {
  background: linear-gradient(180deg, #f02d44, var(--crimson-h));
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -2px 4px rgba(0,0,0,0.3),
    0 8px 24px rgba(224,31,51,0.5),
    0 0 0 1px rgba(0,0,0,0.4);
}

.btn-ghost {
  background: rgba(255,255,255,0.03);
  color: var(--text);
  border: 1px solid var(--border);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.btn-ghost:hover {
  border-color: var(--border-strong);
  background: rgba(255,255,255,0.06);
}

/* Headline + waveform */
.hero-title-wrap {
  position: relative;
}

/* Audio waveform behind the headline, emerging from behind "darkness" */
.hero-wave {
  position: absolute;
  left: 62%;
  bottom: 8px;
  width: 520px;
  height: 82px;
  opacity: 0.45;
  pointer-events: none;
  z-index: -1;
}

/* Divider between full-bleed sections */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(192,25,43,0.7) 30%,
    rgba(201,153,58,0.6) 70%,
    transparent);
  box-shadow: 0 0 12px rgba(192,25,43,0.25);
}

/* ── STATS BAR ────────────────────────────────────────────── */
.stats-bar {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 32px 0;
}

.stats-inner {
  display: flex;
  gap: 0;
  justify-content: center;
  flex-wrap: wrap;
}

.stat {
  text-align: center;
  padding: 12px 56px;
  border-right: 1px solid var(--border);
}

.stat:last-child { border-right: none; }

.stat-num {
  font-family: var(--sans);
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--text);
  display: block;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--muted);
  text-shadow: 0 1px 0 var(--emb-lo), 0 -1px 1px var(--emb-hi);
  margin-top: 4px;
}

/* ── PLUGINS ──────────────────────────────────────────────── */
#plugins { background: var(--bg); }

.section-header {
  text-align: center;
  margin-bottom: 64px;
}



.section-title {
  font-family: var(--sans);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 800;
  margin-bottom: 16px;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.05),
    0 2px 1px rgba(0,0,0,0.6);
}

.section-sub {
  color: var(--muted);
  font-size: 1rem;
  max-width: 520px;
  margin: 0 auto;
}

/* Left-aligned section headers (Plugins & Support) */
#plugins .section-header,
#support .section-header {
  text-align: left;
}

#plugins .section-header .section-sub,
#support .section-header .section-sub {
  margin-left: 0;
}

#plugins .section-header .section-sub {
  max-width: none;
}

/* Plugin cards — glass plate over the deck, like a panel section */
.plugins-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

.plugin-card {
  background: linear-gradient(180deg, var(--plate-a), var(--plate-b));
  border: 1px solid rgba(0,0,0,0.6);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  /* physical plate: inset top highlight + cast shadow ramp, echoing the
     panel deck's graded contact shadow */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 0 0 1px rgba(255,255,255,0.03),
    inset 0 -16px 30px rgba(0,0,0,0.25),
    0 0 1px rgba(0,0,0,0.8),
    0 2px 5px rgba(0,0,0,0.45),
    0 8px 18px rgba(0,0,0,0.45),
    0 18px 40px rgba(0,0,0,0.4);
}

.plugin-card:hover {
  transform: translateY(-6px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 0 0 1px rgba(255,255,255,0.03),
    inset 0 -16px 30px rgba(0,0,0,0.25),
    0 0 1px rgba(0,0,0,0.8),
    0 0 0 1px rgba(224,31,51,0.3),
    0 6px 14px rgba(0,0,0,0.5),
    0 22px 56px rgba(0,0,0,0.55),
    0 0 40px rgba(224,31,51,0.12);
}

.plugin-visual {
  height: 180px;
  position: relative;
  overflow: hidden;
  background: var(--bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  /* a recessed window cut into the card, like the panel's VU screen housing */
  box-shadow: inset 0 4px 12px rgba(0,0,0,0.7), inset 0 -1px 0 rgba(255,255,255,0.04);
}

/* SVG plugin UI mockups */
.plugin-visual svg {
  width: 100%;
  height: 100%;
}

/* Real screenshot thumbnails (as opposed to the hand-drawn SVG mockups) —
   contain rather than cover, so a wide plugin panel is never cropped down
   to an unrecognisable sliver inside the fixed-height card window. The
   padding plus the visual's own recessed dark background reads as the
   screenshot sitting on a lit shelf rather than filling the frame edge to
   edge. */
.plugin-thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  box-sizing: border-box;
  padding: 14px;
}

.plugin-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(192,25,43,0.9);
  color: #fff;
  text-shadow: none;
  border: 1px solid rgba(0,0,0,0.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 2px 8px rgba(192,25,43,0.4);
}

.plugin-tag.new {
  background: linear-gradient(180deg, var(--gold-l), var(--gold));
  border-color: rgba(0,0,0,0.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 2px 8px rgba(201,153,58,0.4);
}

.plugin-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.plugin-name {
  font-family: var(--sans);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
  /* raised metal lettering, like the wordmark engraved on the chassis head */
  text-shadow:
    0 1px 0 rgba(255,255,255,0.08),
    0 2px 2px rgba(0,0,0,0.7);
}

.plugin-type {
  font-size: 0.82rem;
  color: var(--crimson-h);
  font-weight: 600;
  margin-bottom: 8px;
}

.plugin-desc {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.65;
  flex: 1;
  margin-bottom: 24px;
}

.plugin-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}

.plugin-price {
  display: flex;
  flex-direction: column;
}

.price-amount {
  font-family: var(--sans);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--gold);
}

.price-amount.readout { font-family: var(--mono); font-size: 1.15rem; font-weight: 700; color: var(--phos); }

.price-note {
  font-size: 0.8rem;
  color: var(--faint);
  margin-top: 2px;
}

.btn-buy {
  background: linear-gradient(180deg, var(--crimson-h), var(--crimson));
  color: #fff;
  padding: 10px 22px;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--crimson-dk);
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -2px 4px rgba(0,0,0,0.3);
}

.btn-buy:hover {
  background: linear-gradient(180deg, #f02d44, var(--crimson-h));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 4px 18px rgba(192,25,43,0.4);
  transform: translateY(-1px);
}

/* ── FEATURE ICON (shared) ────────────────────────────────── */
.feature-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  /* recessed into the surface like a panel indicator window */
  background: linear-gradient(180deg, #0a0a10, #14141c);
  border: 1px solid rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--crimson-h);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,0.8),
    inset 0 -1px 0 rgba(255,255,255,0.05),
    0 0 0 1px rgba(255,255,255,0.04),
    0 2px 6px rgba(0,0,0,0.4);
  /* glow out of the recess, like the panel's knob rings */
  filter: drop-shadow(0 0 8px rgba(224,31,51,0.25));
}

.feature-icon svg { width: 20px; height: 20px; }

/* ── ABOUT ────────────────────────────────────────────────── */
#about { background: var(--bg); }

.about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.about-visual {
  position: relative;
}

.about-glyph {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 200/230;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.about-glyph img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 40px rgba(192,25,43,0.3));
}

.about-text .section-title { text-align: left; font-size: clamp(1.6rem, 3vw, 2.2rem); }

.about-body {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.75;
  margin-top: 20px;
}

.about-body p + p { margin-top: 16px; }

.legal-body h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold);
  margin-top: 28px;
  margin-bottom: 10px;
}

.legal-body h3:first-child { margin-top: 0; }

.legal-body ul { padding-left: 1.2em; margin: 10px 0 16px; }
.legal-body li + li { margin-top: 6px; }
.legal-body li strong { color: var(--text); font-weight: 600; }
.legal-body a { color: var(--gold); }
.legal-updated { font-size: 0.85rem; margin-bottom: 28px; }

.about-links {
  display: flex;
  gap: 16px;
  margin-top: 36px;
  flex-wrap: wrap;
}

/* ── FORMATS ──────────────────────────────────────────────── */
.formats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.format-badge {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  /* engraved chip set into the surface, like a silkscreened format label */
  border: 1px solid rgba(0,0,0,0.6);
  color: var(--ink);
  background: linear-gradient(180deg, #14141c, #0e0e14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 2px rgba(0,0,0,0.5);
}

/* ── DIVIDER ──────────────────────────────────────────────── */
.gold-divider {
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, var(--crimson), var(--gold));
  margin: 20px 0;
  border-radius: 2px;
}

/* ── FOOTER ───────────────────────────────────────────────── */
footer {
  background: var(--bg-2);
  padding: 56px 0 32px;
}

.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 48px;
  margin-bottom: 48px;
}

.footer-brand .logo { margin-bottom: 16px; }

.footer-desc {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.65;
  max-width: 280px;
}

.footer-col h4 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 16px;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col a {
  font-size: 0.85rem;
  color: var(--muted);
  transition: color 0.2s;
}

.footer-col a:hover { color: var(--text); }

/* License info in footer */
.footer-license ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-license-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-license-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-license-head svg {
  width: 16px;
  height: 16px;
  color: var(--gold);
  flex-shrink: 0;
}

.footer-license-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
}

.footer-license-desc {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.55;
}

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-copy {
  font-size: 0.78rem;
  color: var(--muted);
}

.footer-copy span { color: var(--gold); }

/* ── SUPPORT CATS ─────────────────────────────────────────── */
.support-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vw, 48px);
}

.support-layout .support-grid { flex: 1; }

.support-cat {
  width: clamp(130px, 15vw, 210px);
  height: auto;
  flex-shrink: 0;
  /* Crimson glow to match the studio (About) cat */
  filter: drop-shadow(0 0 40px rgba(192,25,43,0.3)) drop-shadow(0 12px 30px rgba(0,0,0,0.5));
}

/* ── SUPPORT ──────────────────────────────────────────────── */
#support {
  background:
    radial-gradient(ellipse 60% 55% at 28% 42%, rgba(192,25,43,0.10) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 82% 88%, rgba(201,153,58,0.06) 0%, transparent 60%),
    var(--bg-2);
}

.support-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.support-card {
  background: linear-gradient(180deg, var(--plate-a), var(--plate-b));
  border: 1px solid rgba(0,0,0,0.6);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 0 0 1px rgba(255,255,255,0.03),
    inset 0 -16px 30px rgba(0,0,0,0.25),
    0 0 1px rgba(0,0,0,0.8),
    0 8px 24px rgba(0,0,0,0.4);
  transition: transform 0.25s, box-shadow 0.25s;
}

.support-card:hover {
  transform: translateY(-6px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 0 0 1px rgba(255,255,255,0.03),
    inset 0 -16px 30px rgba(0,0,0,0.25),
    0 0 1px rgba(0,0,0,0.8),
    0 0 0 1px rgba(224,31,51,0.3),
    0 6px 14px rgba(0,0,0,0.5),
    0 22px 56px rgba(0,0,0,0.55),
    0 0 40px rgba(224,31,51,0.12);
}

.support-card h3 {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.support-card p {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.55;
  flex: 1;
}

.support-link {
  color: var(--gold);
  font-size: 0.9rem;
  font-weight: 600;
  transition: color 0.2s;
}

.support-link:hover { color: var(--gold-l); }

/* ── PLUGIN DETAIL PAGE ───────────────────────────────────── */

/* Back link above the hero */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 28px;
  transition: color 0.2s;
}

.back-link:hover { color: var(--gold); }

/* Hero */
.plugin-hero {
  padding: 156px 0 100px;
  position: relative;
  overflow: hidden;
}

.plugin-hero > .container {
  position: relative;
  z-index: 1;
}

.plugin-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.plugin-hero-tagline {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text);
  margin: 6px 0 20px;
}

.plugin-hero-desc {
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.75;
  max-width: 480px;
  margin-bottom: 32px;
}

.plugin-hero-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 28px;
}

.plugin-hero-price .price-amount { font-size: 1.9rem; }

.plugin-hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.plugin-hero-visual {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.6);
  background: var(--bg-3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -16px 40px rgba(0,0,0,0.3),
    0 0 1px rgba(0,0,0,0.8),
    0 24px 64px rgba(0,0,0,0.55),
    0 0 60px rgba(192,25,43,0.1);
}

.plugin-hero-visual svg,
.plugin-hero-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Cyan accent variant — used on plugin pages whose own GUI runs a light-mode
   cyan accent (Bad Tea's MKIII panel), so the product shot's own colour
   language shows up in its frame instead of the site's default crimson glow. */
.plugin-hero-visual.accent-cyan,
.interface-frame.accent-cyan {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -16px 40px rgba(0,0,0,0.3),
    0 0 1px rgba(0,0,0,0.8),
    0 24px 64px rgba(0,0,0,0.55),
    0 0 60px rgba(0,203,220,0.14);
  border-color: rgba(0,203,220,0.2);
}

/* ── HERO SHOWCASE (large centred product shot + reflection) ────
   Used instead of the split .plugin-hero-grid layout on flagship product
   pages where a real screenshot exists and deserves room to be read —
   headline/CTAs centred above, one big shot below with a fading mirror
   reflection underneath it (the classic hardware-product-page treatment). */
.hero-showcase-text {
  max-width: 100%;
  margin: 56px auto 0;
  text-align: center;
  position: relative;
  z-index: 1;
}

.hero-showcase-text .formats,
.hero-showcase-text .plugin-hero-actions { justify-content: center; }

.hero-showcase-text .plugin-hero-desc { max-width: 100%; margin-left: auto; margin-right: auto; }

.hero-showcase {
  position: relative;
  max-width: 1180px;
  margin: 64px auto 0;
  z-index: 1;
}

/* Base glow defaults to Bad Tea's own cyan (its GUI's light-theme accent) —
   left as-is since it's what bad-tea.html already renders. Other plugins on
   this hero-showcase template add an .accent-<colour> modifier below,
   matching their own panel's accent instead of inheriting Bad Tea's. */
.hero-showcase-frame {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.6);
  background: var(--bg-3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -16px 40px rgba(0,0,0,0.3),
    0 0 1px rgba(0,0,0,0.8),
    0 24px 64px rgba(0,0,0,0.55),
    0 0 80px rgba(0,203,220,0.16);
  border-color: rgba(0,203,220,0.2);
}

/* PhaseyQ's own accent — sampled from its wordmark/UI magenta. */
.hero-showcase-frame.accent-magenta {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -16px 40px rgba(0,0,0,0.3),
    0 0 1px rgba(0,0,0,0.8),
    0 24px 64px rgba(0,0,0,0.55),
    0 0 80px rgba(224,64,251,0.16);
  border-color: rgba(224,64,251,0.2);
}

/* Gif-Fi's own accent — sampled from its wordmark/UI green (re-sampled
   2026-08-31 after the MKIV GUI redesign darkened it from #5DF63F). */
.hero-showcase-frame.accent-green {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -16px 40px rgba(0,0,0,0.3),
    0 0 1px rgba(0,0,0,0.8),
    0 24px 64px rgba(0,0,0,0.55),
    0 0 80px rgba(18,150,5,0.22);
  border-color: rgba(18,150,5,0.28);
}

/* Styx's own accent — sampled from its wordmark/UI blue. */
.hero-showcase-frame.accent-blue {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -16px 40px rgba(0,0,0,0.3),
    0 0 1px rgba(0,0,0,0.8),
    0 24px 64px rgba(0,0,0,0.55),
    0 0 80px rgba(65,105,225,0.2);
  border-color: rgba(65,105,225,0.25);
}

/* StudioCat's own accent — sampled from its wordmark gold. */
.hero-showcase-frame.accent-gold {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -16px 40px rgba(0,0,0,0.3),
    0 0 1px rgba(0,0,0,0.8),
    0 24px 64px rgba(0,0,0,0.55),
    0 0 80px rgba(255,197,61,0.18);
  border-color: rgba(255,197,61,0.22);
}

/* Sized to the image's own natural width (capped by the 1180px container,
   down-scaled further on narrow viewports) rather than force-stretched to
   fill it — different plugins' panels have different native capture sizes
   (Bad Tea's happens to be ~1180px wide already; PhaseyQ and Gif-Fi are
   narrower), and stretching a narrower capture up to a fixed width just
   softens it for no reason. Confirmed 2026-08-22: this, not capture
   resolution, was the actual cause of PhaseyQ/Gif-Fi looking softer than
   Bad Tea — their raw captures are comparable resolution, they were just
   being upscaled 19%/44% by CSS to fill the same box Bad Tea's wider
   capture already filled at ~1:1. */
.hero-showcase-frame {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}

.hero-showcase-frame img { max-width: 100%; height: auto; display: block; }

/* The reflection: the same image, flipped, cropped short and masked to a
   fade — only ever a hint of the image, never a full mirrored copy. Sized
   to match the frame above it (see comment there) so the two stay aligned
   instead of the reflection being wider than the panel it's reflecting. */
.hero-showcase-reflection {
  width: fit-content;
  max-width: 100%;
  height: 130px;
  overflow: hidden;
  margin: 2px auto 0;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.32), transparent 85%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.32), transparent 85%);
  pointer-events: none;
}

.hero-showcase-reflection img {
  max-width: 100%;
  height: auto;
  display: block;
  transform: scaleY(-1);
}

/* Overview */
#overview { background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.overview-lede {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.8;
  max-width: 100%;
  margin: 0 auto 56px;
  text-align: center;
}

/* Interface showcase */
.interface-frame {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.6);
  background: var(--bg-3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -16px 40px rgba(0,0,0,0.3),
    0 0 1px rgba(0,0,0,0.8),
    0 24px 64px rgba(0,0,0,0.5);
}

.interface-frame svg,
.interface-frame img { width: 100%; height: auto; display: block; }

/* Detail-crop variant — zooms into one region of a full-panel screenshot
   (e.g. a channel strip) so a page that already shows the whole plugin in
   its hero isn't just repeating the same full shot lower down. */
.interface-frame.zoom-detail {
  max-width: 560px;
  height: 420px;
  margin: 0 auto;
}

.interface-frame.zoom-detail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0% 45%;
}

.interface-caption {
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 20px;
}

/* Specs — read like a panel parameter sheet */
.specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 40px;
}

.specs-col {
  background: linear-gradient(180deg, var(--plate-a), var(--plate-b));
  border: 1px solid rgba(0,0,0,0.6);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 0 0 1px rgba(255,255,255,0.03),
    0 8px 24px rgba(0,0,0,0.35);
}

.specs-col h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 18px;
  color: var(--gold);
}

.specs-col ul { list-style: none; }

.specs-col li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.85rem;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
}

.specs-col li:last-child { border-bottom: none; }

.specs-col li span:last-child { color: var(--text); text-align: right; }

.specs-note {
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
}

/* Manuals & FAQ page — plain text-link list, no cards */
.manual-list {
  list-style: none;
  background: linear-gradient(180deg, var(--plate-a), var(--plate-b));
  border: 1px solid rgba(0,0,0,0.6);
  border-radius: var(--radius-lg);
  padding: 8px 32px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 0 0 1px rgba(255,255,255,0.03),
    0 8px 24px rgba(0,0,0,0.35);
}

.manual-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}

.manual-list li:last-child { border-bottom: none; }

.manual-list-name {
  font-size: 0.95rem;
  color: var(--text);
  font-weight: 500;
}

.manual-list-status {
  font-size: 0.88rem;
  color: var(--muted);
}

/* Pricing CTA */
#pricing-cta { background: var(--bg); }

.pricing-panel {
  background: linear-gradient(180deg, var(--plate-a), var(--plate-b));
  border: 1px solid rgba(0,0,0,0.6);
  border-radius: 14px;
  padding: 56px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -16px 40px rgba(0,0,0,0.3),
    0 0 1px rgba(0,0,0,0.8),
    0 16px 48px rgba(0,0,0,0.45);
}

.pricing-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 100% 0%, rgba(192,25,43,0.1) 0%, transparent 70%);
  pointer-events: none;
}

.pricing-bullets {
  list-style: none;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pricing-bullets li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--muted);
}

.pricing-bullets svg { flex-shrink: 0; color: var(--gold); width: 16px; height: 16px; }

.pricing-buy {
  text-align: center;
  position: relative;
  z-index: 1;
}

.pricing-buy .price-amount { font-size: 2.6rem; display: block; }
.pricing-buy .price-amount.readout { font-size: 2.2rem; display: inline-block; margin-bottom: 10px; }
.pricing-buy .price-note { font-size: 0.82rem; display: block; margin-bottom: 20px; }
.pricing-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Download picker (openDownloads) — a native <dialog> on the card plate */
.dl-modal {
  width: min(560px, calc(100vw - 32px));
  margin: auto;
  padding: 36px 36px 28px;
  color: var(--text);
  background: linear-gradient(180deg, var(--plate-a), var(--plate-b));
  border: 1px solid rgba(0,0,0,0.6);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 1px rgba(0,0,0,0.8),
    0 24px 64px rgba(0,0,0,0.6);
}

.dl-modal::backdrop { background: rgba(4,4,8,0.72); backdrop-filter: blur(4px); }

.dl-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.dl-close:hover { color: var(--text); }

.dl-title { font-size: 1.5rem; font-weight: 800; margin-bottom: 10px; padding-right: 24px; }
.dl-note { color: var(--muted); font-size: 0.88rem; line-height: 1.6; margin-bottom: 24px; }

/* Platform switch: a recessed channel with a lifted selected segment */
.dl-tabs {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  margin-bottom: 16px;
  background: var(--bg);
  border-radius: var(--radius);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.6), inset 0 -1px 0 rgba(255,255,255,0.04);
}

.dl-tabs button {
  padding: 8px 18px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.dl-tabs button[aria-selected="true"] {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 6px rgba(0,0,0,0.4);
}

.dl-list { list-style: none; }

.dl-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}

.dl-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dl-format { font-weight: 700; }
.dl-path { color: var(--faint); font-size: 0.8rem; overflow-wrap: anywhere; }
.dl-path code { font-family: inherit; color: var(--muted); }
.dl-size { color: var(--faint); font-size: 0.82rem; white-space: nowrap; }
.dl-row .btn { padding: 10px 18px; }
.dl-reqs { color: var(--faint); font-size: 0.8rem; margin-bottom: 16px; }

@media (max-width: 520px) {
  .dl-modal { padding: 28px 20px 20px; }
  .dl-row { flex-wrap: wrap; }
  .dl-row .btn { width: 100%; justify-content: center; }
}

/* Related */
#related { background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* FAQ */
.faq-list { max-width: 760px; }

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-item summary {
  padding: 22px 0;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '+';
  font-family: var(--sans);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gold);
  flex-shrink: 0;
  transition: transform 0.2s;
}

.faq-item[open] summary::after { transform: rotate(45deg); }

.faq-item p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.7;
  padding-bottom: 22px;
  max-width: 640px;
}

/* ── COMING SOON CARD VARIANT ─────────────────────────────── */
/* Shared "not yet released" treatment — used for every plugin that doesn't
   have a real product/detail page yet, so future plugins slot in without
   inventing a one-off inline style each time. */
.plugin-card.soon {
  opacity: 0.7;
  pointer-events: none;
  cursor: default;
}

.plugin-card.soon .plugin-glyph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.plugin-card.soon .plugin-glyph .ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed #2a2a3a;
}

.plugin-card.soon .plugin-glyph .ring.r1 { width: 100px; height: 100px; }
.plugin-card.soon .plugin-glyph .ring.r2 { width: 60px; height: 60px; }

.plugin-card.soon .plugin-glyph .initial {
  font-family: var(--sans);
  font-size: 2.4rem;
  font-weight: 800;
  color: #3a3a4a;
  position: relative;
  z-index: 1;
}

.plugin-tag.soon {
  background: rgba(100,100,120,0.8);
}

.plugin-card.soon .price-amount {
  color: var(--muted);
  font-size: 0.92rem;
}

.plugin-card.soon .btn-buy {
  background: var(--bg-3);
  color: var(--muted);
  cursor: default;
  box-shadow: none;
}

.plugin-card.soon .btn-buy:hover {
  background: var(--bg-3);
  transform: none;
  box-shadow: none;
}

.card-crosslink {
  font-size: 0.76rem;
  color: var(--faint);
  margin-top: 10px;
  line-height: 1.5;
}

/* ── PLUGIN CAROUSEL (homepage teaser) ───────────────────────── */
.carousel-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}

.carousel-viewport {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
  /* overflow-x: auto forces overflow-y to clip too, which cuts off the
     card hover lift + glow. Pad the scrollport so the shadow has room,
     and pull it back out with negative margins so layout is unchanged.
     Inline padding = track gap, so neighbouring cards don't peek in. */
  padding: 48px 24px 72px;
  margin: -48px -24px -72px;
  scroll-padding-inline: 24px;
}

.carousel-viewport::-webkit-scrollbar { display: none; }

.carousel-track {
  display: flex;
  gap: 24px;
}

/* End spacer: the viewport's inline-end padding isn't counted as scroll
   room when cards overflow the track, so the last page would stop 24px
   short. The gap before this empty item supplies that 24px instead. */
.carousel-track::after {
  content: '';
  flex: 0 0 1px;
  margin-left: -1px;
}

.carousel-track .plugin-card {
  flex: 0 0 calc((100% - 48px) / 3);
  min-width: 0;
  scroll-snap-align: start;
}

.carousel-arrow {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s;
}

.carousel-arrow:hover {
  border-color: var(--border-strong);
  background: rgba(255,255,255,0.06);
  color: var(--gold);
}

.carousel-arrow svg { width: 18px; height: 18px; }

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.2s;
}

.carousel-dot.active {
  background: var(--crimson-h);
  box-shadow: 0 0 8px rgba(224,31,51,0.5);
  transform: scale(1.3);
}

.view-all-cta {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

/* ── MOBILE ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-links { display: none; }
  /* Flatten .about-text so the cat can sit between the body copy and the buttons */
  .about-inner { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
  .about-text { display: contents; }
  .about-visual { order: 1; align-self: center; width: min(62vw, 260px); margin-top: 32px; }
  .about-links { order: 2; }
  .footer-inner { grid-template-columns: 1fr; }
  .stat { border-right: none; border-bottom: 1px solid var(--border); padding: 12px 32px; }
  .stat:last-child { border-bottom: none; }
  .hero-wave { display: none; }
  .hero-title { white-space: normal; }
  .support-layout { flex-direction: column; gap: 24px; }
  .support-layout .support-grid { width: 100%; }
  .support-grid { grid-template-columns: 1fr; }
  .support-cat { width: min(50vw, 200px); }
  .plugin-hero-grid { grid-template-columns: 1fr; }
  .plugin-hero { padding: 132px 0 64px; }
  .specs-grid { grid-template-columns: 1fr; }
  .pricing-panel { grid-template-columns: 1fr; padding: 36px; text-align: center; }
  .pricing-bullets { align-items: center; }
  .carousel-track .plugin-card { flex: 0 0 85%; }
  .carousel-arrow { display: none; }
  .hero-showcase { margin-top: 40px; }
  .hero-showcase-reflection { height: 70px; }
  .interface-frame.zoom-detail { height: 260px; }
}

/* ── ANIMATIONS ───────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.anim { opacity: 0; animation: fadeUp 0.7s ease forwards; }
.anim-1 { animation-delay: 0.1s; }
.anim-2 { animation-delay: 0.25s; }
.anim-3 { animation-delay: 0.4s; }
.anim-4 { animation-delay: 0.55s; }

/* ── PLUGIN DETAIL PAGES ───────────────────────────────────────
   ONE stylesheet for every plugin detail page. Each page's <body> carries
   `plugin-page` (all shared rules below hang off it) plus that plugin's
   two-letter tag (.bt Bad Tea, .pq PhaseyQ, .gf Gif-Fi, .sx Styx,
   .sc StudioCat), which is ONLY for that plugin's own art tweaks — never
   for layout, colour or anything else that should match across pages.
   Bad Tea is the reference. Shared sections (hero CTAs, divider, promo
   video, specs, pricing, free edition) are rendered by initPluginPage()
   in plugins-data.js, so a new page gets them by construction. */

.plugin-page .hero-showcase-text { text-align: left; }

/* The hero heading block stays centred under the product shot; the
   copy beneath it runs the full width, flush left. */
.plugin-page .hero-showcase-text .hero-title,
.plugin-page .hero-showcase-text .plugin-hero-tagline { text-align: center; }

.plugin-page .hero-title {
  white-space: normal;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
}

.plugin-page .hero-showcase-text .plugin-hero-desc { max-width: 100%; margin-left: 0; margin-right: 0; }
.plugin-page .hero-showcase-text .plugin-hero-actions { margin-top: 28px; }

.plugin-page .overview-lede { text-align: left; margin: 0 0 40px; }
.plugin-page .interface-caption { text-align: left; margin-top: 16px; }
.plugin-page .faq-list,
.plugin-page .faq-item p { max-width: 100%; }

/* Promo video — sits between the hero and #overview */
.promo-video-frame {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.6);
  background: #000;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 1px rgba(0,0,0,0.8),
    0 24px 64px rgba(0,0,0,0.55),
    0 0 60px rgba(192,25,43,0.12);
}

.promo-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Full-width flowing body copy */
.bt-body {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.8;
}

.bt-body p + p { margin-top: 20px; }

/* #overview: copy column + a piece of cat art on the right */
.overview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 34%);
  align-items: center;
  gap: clamp(40px, 6vw, 88px);
}

.overview-art {
  display: block;
  width: min(100%, 380px);
  height: auto;
  justify-self: end;
  background: transparent;
  filter: drop-shadow(0 0 40px rgba(192,25,43,0.3)) drop-shadow(0 12px 30px rgba(0,0,0,0.5));
}

/* Per-plugin art tweaks only */
.gf-overview-cat { image-rendering: pixelated; transform: scaleX(-1); }
.sx-overview-cat { width: min(100%, 300px); }
.sc-overview-cat { width: min(100%, 290px); }

/* Pricing panel title sits left beside the bullets */
.pricing-panel .section-title { text-align: left; }

.btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* Free edition (e.g. StudioKitten) — a slimmer companion panel directly
   beneath the pricing panel, same plate, no crimson glow. */
.free-edition-panel {
  margin-top: 24px;
  background: linear-gradient(180deg, var(--plate-a), var(--plate-b));
  border: 1px solid rgba(0,0,0,0.6);
  border-radius: 14px;
  padding: 36px 56px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 1px rgba(0,0,0,0.8),
    0 12px 36px rgba(0,0,0,0.4);
}

.free-edition-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 4px 0 12px;
}

.free-edition-desc {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.7;
  max-width: 640px;
}

.free-edition-buy { text-align: center; }
.free-edition-buy .price-amount { font-size: 1.8rem; display: block; margin-bottom: 14px; }
.free-edition-buy .price-amount.readout { font-size: 1.5rem; display: table; margin: 0 auto 14px; }

/* StudioCat character art */
.sc-hero-walk-cat {
  position: absolute;
  z-index: 2;
  top: 243px;
  right: calc(50% + 200px);
  width: clamp(300px, 25vw, 360px);
  max-width: none;
  height: auto;
  background: transparent;
  transform: scaleX(-1);
  filter: none;
  pointer-events: none;
}

@media (max-width: 980px) {
  .sc-hero-walk-cat {
    top: 277px;
    right: calc(50% + 168px);
    width: 270px;
  }
}

@media (max-width: 768px) {
  .overview-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .overview-art {
    width: min(78vw, 320px);
    justify-self: center;
  }

  .sc-overview-cat { width: min(58vw, 240px); }

  /* No room beside the panel here, so the cat walks off across it at basket
     height, head just past the panel's left edge. --f tracks the frame width
     (panel image is 390px, capped by the 40px container gutters). */
  .sc-hero-walk-cat {
    --f: min(390px, 100vw - 80px);
    top: calc(var(--f) * 0.27);
    right: auto;
    left: calc((100% - var(--f)) / 2 - 30px);
    width: calc(var(--f) * 0.75);
  }

  .pricing-panel .section-title { text-align: center; }

  .free-edition-panel { grid-template-columns: 1fr; padding: 32px; text-align: center; }
  .free-edition-desc { margin: 0 auto; }}