/* ==========================================================================
   MTHRBORD.STUDIO — main stylesheet
   Tweak the variables below to tune the whole site.
   ========================================================================== */
:root {
  --bg: #050505;
  --bg-2: #0d0d0d;
  --panel: #101010;
  --line: #262626;
  --line-soft: #1a1a1a;
  --text: #e9e6df;
  --text-dim: #9a968e;
  --text-faint: #6a665f;
  --paper: #efe9df;        /* light button fill */
  --accent: #d13b3b;       /* default accent, overridden per plugin page */

  --font-display: "Michroma", "Orbitron", sans-serif;
  --font-mono: "Space Mono", "JetBrains Mono", ui-monospace, monospace;

  --logo-w: 250px;         /* header logo width on desktop (the mock was roughly 2x this) */
  --logo-w-mobile: 150px;
  --max-w: 1280px;
  --gutter: clamp(16px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.65;
  overflow-x: hidden;
}
img, video, canvas { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: #fff; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 1em; }
ul { list-style: none; margin: 0; padding: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

/* Film grain overlay */
.grain {
  pointer-events: none; position: fixed; inset: 0; z-index: 50; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}

/* Type helpers */
.display {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: .95;
  letter-spacing: -.01em;
  color: var(--paper);
  text-shadow: 0 2px 30px rgba(0,0,0,.6);
}
.eyebrow {
  font-size: 11px; letter-spacing: .4em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 .9em;
}
.lead { font-size: 15px; color: var(--text-dim); max-width: 52ch; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max-w)); margin-inline: auto; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  padding: .9em 2.2em; border: 1px solid var(--paper);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--paper); background: transparent; transition: background .2s, color .2s;
}
.btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.btn--solid { background: var(--paper); color: #111; }
.btn--solid:hover { background: #fff; color: #000; }
.btn--play::before { content: "\25B6"; font-size: 9px; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: relative; z-index: 20;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start;
  padding: 0px var(--gutter) 0;
  width: min(100%, var(--max-w)); margin-inline: auto;
}
.site-nav { display: flex;
    gap: clamp(18px, 3vw, 40px);
    padding-top: 50px;
    font-family: var(--font-display);
    text-transform: uppercase;
    line-height: .95;
    letter-spacing: -.01em;
    color: var(--paper);
    text-shadow: 0 2px 30px rgba(0, 0, 0, .6);}
.site-nav--right { justify-content: flex-end; }
.site-nav a { font-size: 11px; letter-spacing: .25em; text-transform: uppercase; color: var(--text);    }
.site-nav a[aria-current] { color: #fff; border-bottom: 1px solid var(--text-dim); padding-bottom: 2px; }
.site-logo { display: block; width: var(--logo-w); margin-top: -4px; }
.site-logo .logo { width: 260px; }
.site-logo__sub { display: block; width: 260px; /* same as .logo, which is wider than .site-logo */ margin-top: 6px; padding-left: .41em; text-align: center; font-size: 9px; letter-spacing: .41em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; }

.nav-toggle {
  display: none; grid-column: 3; justify-self: end;
  width: 36px; height: 30px; background: none; border: 0; padding: 4px;
  flex-direction: column; justify-content: space-between;
}
.nav-toggle span { display: block; height: 1px; background: var(--text); }

.header-strap {
  position: absolute; z-index: 5; left: 0; right: 0; top: 150px;
  display: flex; justify-content: space-between; padding: 0 var(--gutter);
  width: min(100%, var(--max-w)); margin-inline: auto;
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--text-dim); line-height: 1.8;
}
.header-strap__right { text-align: right; }

@media (max-width: 800px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-nav { display: none; }
  .site-logo { grid-column: 1; width: var(--logo-w-mobile); }
  .nav-toggle { display: flex; grid-column: 2; }
  .site-header.is-open .site-nav {
    display: flex; flex-direction: column; gap: 18px; grid-column: 1 / -1; padding: 24px 0 8px; border-top: 1px solid var(--line);
  }
  .site-header.is-open .site-nav--right { justify-content: flex-start; padding-top: 0; border: 0; }
  .header-strap { display: none; }
}

/* ==========================================================================
   Hero (shared by home + plugin pages)
   ========================================================================== */
.hero {
  position: relative; margin-top: -120px; padding-top: 120px; min-height: 92vh;
  display: grid; align-items: end; isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--bg-2); }
.hero__bg img { width: 100%; height: 100%; object-fit: contain; object-position: center 35%; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(5,5,5,.75) 0%, rgba(5,5,5,.15) 25%, rgba(5,5,5,.2) 60%, var(--bg) 100%),
    radial-gradient(60% 40% at 50% 100%, rgba(0,0,0,.6), transparent);
}
.hero__inner {
  width: min(100% - 2 * var(--gutter), var(--max-w)); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: end;
  padding-bottom: 48px;
}
.hero__title { font-size: clamp(38px, 6.4vw, 92px); margin: .1em 0 .25em; }
.hero__sub { font-size: 13px; letter-spacing: .45em; text-transform: uppercase; margin-bottom: 1.4em; color: var(--text); }
.hero__actions { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 28px; }

.feature-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  border-left: 1px solid var(--line);
}
.feature-row > div {
  border-right: 1px solid var(--line); padding: 10px 14px 6px; text-align: center;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); line-height: 1.6;
}
.feature-row svg { width: 36px; height: 36px; margin: 0 auto 10px; stroke: var(--text); fill: none; stroke-width: 1.2; }

@media (max-width: 900px) {
  .hero { min-height: 0; }
  .hero__inner { grid-template-columns: 1fr; gap: 32px; }
}

/* ==========================================================================
   Sections
   ========================================================================== */
.section { padding: clamp(56px, 8vw, 110px) 0; border-top: 1px solid var(--line-soft); }
.section__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.section__title { font-size: clamp(30px, 4.5vw, 56px); }

/* Detail block (big image + copy + small image) */
.detail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr); gap: 48px; align-items: start; }
.detail__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border: 1px solid var(--line); }
.detail--text { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.detail__copy { display: grid; grid-template-columns: 1fr auto; gap: 24px 36px; }
.detail__copy h2 { font-size: clamp(26px, 3.2vw, 40px); margin-bottom: .5em; }
.detail__thumb { width: min(100%, 220px); margin: 0; }
.detail__thumb img { width: 100%; aspect-ratio: 16/10; object-fit: cover; filter: grayscale(1) contrast(1.1); border: 1px solid var(--line); }
.detail__thumb figcaption { font-size: 9px; letter-spacing: .25em; text-transform: uppercase; text-align: right; color: var(--text-dim); margin-top: 8px; }
.detail__points { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border-top: 1px solid var(--line); margin-top: 8px; }
.detail__points li { padding: 18px 14px 0 0; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); line-height: 1.7; border-right: 1px solid var(--line); margin-right: 14px; }
.detail__points li:last-child { border: 0; }
@media (max-width: 900px) {
  .detail { grid-template-columns: 1fr; }
  .detail__copy { grid-template-columns: 1fr; }
}

/* Audio examples */
.examples { position: relative; overflow: hidden; border-top: 1px solid var(--line-soft); }
.examples__bg { position: absolute; inset: 0; z-index: -1; background: var(--bg-2); }
.examples__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.examples__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, var(--bg) 20%, rgba(5,5,5,.3) 60%, rgba(5,5,5,.6)), linear-gradient(to bottom, transparent 50%, var(--bg)); }
.examples__intro { padding: clamp(56px, 10vw, 140px) 0 clamp(40px, 6vw, 80px); max-width: 560px; }
.examples__intro .display { font-size: clamp(44px, 7vw, 96px); margin: .05em 0 .25em; }
.examples__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-bottom: 60px; }
@media (max-width: 860px) { .examples__grid { grid-template-columns: 1fr; } }

.example {
  position: relative; border: 1px solid var(--line); background: rgba(10,10,10,.82); backdrop-filter: blur(6px);
  padding: 22px 22px 0; overflow: hidden;
}
.example__num { position: absolute; left: 22px; top: 24px; font-size: 10px; letter-spacing: .3em; color: var(--text-dim); }
.example__title { font-size: clamp(22px, 2.6vw, 32px); margin-left: 44px; }
.example__sub { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--text-dim); margin: 6px 0 20px 44px; }
.example__body { display: grid; grid-template-columns: 120px 1fr; gap: 20px; }
.example__thumb { background: var(--bg-2); }
.example__thumb img { width: 100%; aspect-ratio: 1/1.4; object-fit: cover; filter: grayscale(.4) contrast(1.1); }
.example__tags { display: flex; gap: 0; margin: 20px -22px 0; border-top: 1px solid var(--line); }
.example__tags li { flex: 1; padding: 12px 8px; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; text-align: center; color: var(--text-dim); border-right: 1px solid var(--line); }
.example__tags li:last-child { border: 0; }
@media (max-width: 500px) { .example__body { grid-template-columns: 1fr; } .example__thumb { display: none; } }

/* Audio player */
.player { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto auto; column-gap: 12px; align-items: center; margin-bottom: 14px; }
.player__label { grid-column: 2; font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--text-faint); }
.player--with .player__label { color: var(--accent); }
.player__btn {
  grid-row: 2; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--text-dim); background: #000;
  display: grid; place-items: center; color: var(--text); padding: 0;
}
.player__btn svg { width: 11px; height: 11px; fill: currentColor; }
.player__btn .ico-pause { display: none; }
.player.is-playing .player__btn .ico-play { display: none; }
.player.is-playing .player__btn .ico-pause { display: block; }
.player--with .player__btn { border-color: var(--accent); color: var(--accent); }
.player__wave { grid-row: 2; position: relative; height: 40px; cursor: pointer; }
.player__wave canvas { width: 100%; height: 100%; }
.player__time { grid-column: 2; font-size: 9px; letter-spacing: .2em; text-align: right; color: var(--text-faint); margin-top: 4px; }
.player audio { display: none; }

/* Icon strip */
.icon-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.icon-strip > div { padding: 28px 16px; text-align: center; border-right: 1px solid var(--line); font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--text-dim); line-height: 1.7; }
.icon-strip > div:last-child { border: 0; }
.icon-strip svg { width: 32px; height: 32px; margin: 0 auto 14px; stroke: var(--text); fill: none; stroke-width: 1.2; }

/* ==========================================================================
   Plugin grid (home + /plugins/)
   ========================================================================== */
.plugin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1px; padding: 1px; }
.plugin-card { background: var(--bg); box-shadow: 0 0 0 1px var(--line); padding: 24px; display: flex; flex-direction: column; gap: 14px; position: relative; transition: background .25s; }
.plugin-card:hover { background: var(--panel); }
.plugin-card__img { aspect-ratio: 16/10; overflow: hidden; border: 1px solid var(--line-soft); background: var(--bg-2); }
.plugin-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.plugin-card:hover .plugin-card__img img { transform: scale(1.04); }
.plugin-card__code { font-size: 10px; letter-spacing: .35em; text-transform: uppercase; color: var(--card-accent, var(--accent)); }
.plugin-card__title { font-size: 22px; }
.plugin-card__tag { color: var(--text-dim); font-size: 12px; flex: 1; }
.plugin-card__foot { display: flex; justify-content: space-between; align-items: center; font-size: 10px; letter-spacing: .25em; text-transform: uppercase; border-top: 1px solid var(--line); padding-top: 14px; }
.plugin-card__price { color: var(--text); }
.plugin-card--soon { opacity: .6; }
.plugin-card__img > span { display: grid; place-items: center; height: 100%; font-size: 10px; letter-spacing: .4em; text-transform: uppercase; color: var(--text-faint); }
.plugin-card--soon .plugin-card__img { display: grid; place-items: center; font-size: 10px; letter-spacing: .4em; text-transform: uppercase; color: var(--text-faint); }

/* /plugins/ list: one wide row per plugin, screenshot left, text right */
.plugin-list { display: flex; flex-direction: column; gap: 32px; }
.plugin-row { display: flex; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; transition: border-color .15s, transform .15s; }
.plugin-row:hover { border-color: var(--card-accent); transform: translateY(-3px); color: inherit; }
.plugin-row__media { flex: 0 0 50%; display: flex; align-items: center; background: var(--bg-2); border-right: 1px solid var(--line); }
.plugin-row__media img { width: 100%; height: auto; }
.plugin-row__body { flex: 1; min-width: 0; padding: 32px 40px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.plugin-row__title { font-size: 22px; margin: 0; }
.plugin-row__cat { margin: 0; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--card-accent); }
.plugin-row__desc { margin: 8px 0 0; color: var(--text-dim); font-size: 13px; line-height: 1.6; }
.plugin-row__price { margin-top: 18px; align-self: flex-start; padding: 8px 22px; border: 1px solid var(--card-accent); border-radius: 999px; background: rgba(0,0,0,.35); font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
@media (max-width: 720px) {
  .plugin-row { flex-direction: column; }
  .plugin-row__media { flex: none; border-right: 0; border-bottom: 1px solid var(--line); }
  .plugin-row__body { padding: 24px; }
}

/* ==========================================================================
   Signup
   ========================================================================== */
.signup { position: relative; padding: clamp(70px, 10vw, 140px) 0; overflow: hidden; border-top: 1px solid var(--line-soft); }
.signup { isolation: isolate; }
.signup__bg { position: absolute; inset: 0; z-index: -1; background: #0b0907; }
.signup__bg > * { position: absolute; }
.signup__grunge { inset: 0; background: url("/assets/grunge-concrete.jpg") center/cover no-repeat; opacity: .55; }
/* mixer photo owns the right side, feathered into the grunge on its left edge */
.signup__mixer {
  top: 0; right: 0; height: 100%; width: 64%; object-fit: cover; object-position: 30% 50%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%);
          mask-image: linear-gradient(to right, transparent 0%, #000 34%);
  filter: sepia(.25) contrast(1.05) brightness(.5);
}
.signup__paper { inset: -4%; background: url("/assets/paper-scratched.jpg") center/cover no-repeat; mix-blend-mode: screen; opacity: .3; }
.signup__bg .hero__stars { opacity: .5; }
.signup__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(5,5,5,.85) 0%, rgba(5,5,5,.45) 40%, rgba(5,5,5,0) 70%), linear-gradient(to bottom, rgba(5,5,5,.5), transparent 25%, transparent 75%, rgba(5,5,5,.6)); }
@media (max-width: 800px) {
  .signup__mixer { width: 100%; opacity: .45; -webkit-mask-image: none; mask-image: none; }
}
.signup__inner { width: min(100% - 2 * var(--gutter), var(--max-w)); margin-inline: auto; }
.signup .display { font-size: clamp(44px, 6.5vw, 88px); margin-bottom: .3em; }
.signup__lead { color: var(--text-dim); max-width: 42ch; margin-bottom: 2em; }
.signup__form { display: flex; max-width: 520px; border: 1px solid var(--paper); }
.signup__form input { flex: 1; min-width: 0; background: var(--paper); border: 0; padding: 14px 18px; font: inherit; font-size: 11px; letter-spacing: .25em; color: #111; }
.signup__form input::placeholder { color: #666; }
.signup__form input:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.signup__turnstile { margin-top: 12px; }
.signup__form button { background: #000; color: var(--paper); border: 0; border-left: 1px solid var(--paper); padding: 14px 26px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; }
.signup__form button:hover { background: #1a1a1a; }
.signup__form.is-busy button { opacity: .5; pointer-events: none; }
.signup__note { font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--text-faint); margin-top: 1.2em; }
.signup__note.is-ok { color: #7fd48a; }
.signup__note.is-err { color: #e06a6a; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { border-top: 1px solid var(--line); padding: 64px 0 0; }
.site-footer__top, .site-footer__bottom, .site-footer__tail { width: min(100% - 2 * var(--gutter), var(--max-w)); margin-inline: auto; }
.site-footer__top { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 48px; padding-bottom: 56px; border-bottom: 1px solid var(--line); }
.site-footer__brand .logo { width: min(100%, 240px); margin-bottom: 18px; }
.site-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 28px; }
.site-footer__col h3 { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; margin-bottom: 1.2em; padding-bottom: .8em; border-bottom: 1px solid var(--line); display: inline-block; }
.site-footer__col li { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--text-dim); margin-bottom: .9em; }
.site-footer__col a:hover { color: #fff; }
.site-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: 28px 0; font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--text-dim); }
.site-footer__bottom p { margin: 0; }
.socials { display: flex; gap: 22px; }
.socials a { display: block; color: var(--text); }
.site-footer__pay a { text-decoration: underline; text-underline-offset: 4px; }
.site-footer__tail {
  display: flex; justify-content: space-between; padding: 40px 0 48px;
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--text-faint); line-height: 1.9;
  background: radial-gradient(50% 60% at 50% 100%, rgba(255,255,255,.06), transparent);
}
.site-footer__tail span:last-child { text-align: right; }
@media (max-width: 760px) { .site-footer__top { grid-template-columns: 1fr; } }

/* ==========================================================================
   Simple content pages (about / studio / support)
   ========================================================================== */
.page { padding: 40px 0 80px; }
.page__head { padding: clamp(40px, 6vw, 80px) 0 40px; border-bottom: 1px solid var(--line); margin-bottom: 48px; }
.page__head .display { font-size: clamp(40px, 6vw, 80px); }
/* smaller, cleaner page head (used on /plugins/) */
.page__head--compact { padding: clamp(16px, 3vw, 40px) 0 0; border-bottom: 0; margin-bottom: 40px; }
.page__head--compact .eyebrow { color: var(--accent); font-weight: 700; letter-spacing: .3em; margin-bottom: 14px; }
.page__head--compact .display { font-size: clamp(28px, 3.6vw, 44px); }
.prose { max-width: 68ch; color: var(--text-dim); }
.prose h2 { font-family: var(--font-display); text-transform: uppercase; font-size: 22px; color: var(--paper); margin: 2.2em 0 .8em; }
.prose h3 { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--text); margin: 2em 0 .6em; }
.prose a { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.prose strong { color: var(--text); }
.prose ul { list-style: square; padding-left: 1.2em; }
.prose li { margin-bottom: .4em; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 3em 0; }
.body-row { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }

/* Support page: narrow column, FAQ as +/- accordion */
.support { max-width: 760px; }
.support details { border-bottom: 1px solid var(--line); padding: 20px 0; }
.support details:first-of-type { border-top: 1px solid var(--line); }
.support summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; color: var(--text); font-size: 15px; }
.support summary::-webkit-details-marker { display: none; }
.support summary::after { content: "+"; color: var(--accent); font-weight: 700; }
.support details[open] summary::after { content: "–"; }
.support details p { margin: 12px 0 0; }
.support .btn { text-decoration: none; }
.prose:has(.support-wrap) { max-width: none; }
.support-wrap { display: grid; grid-template-columns: minmax(0, 760px) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.support__photo { margin: 0; position: sticky; top: 32px; border: 1px solid var(--line); }
.support__photo img { width: 100%; height: auto; filter: saturate(.8) brightness(.85); }
@media (max-width: 900px) { .support-wrap { grid-template-columns: 1fr; } .support__photo { position: static; } }

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

/* ==========================================================================
   Home: anniversary hero + motto line
   ========================================================================== */
.hero--home { min-height: 100vh; }
.hero--home .hero__title { font-size: clamp(40px, 6.2vw, 88px); }
.hero--home .hero__inner { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.hero--home .feature-row { grid-template-columns: repeat(4, 1fr); }
.motto {
  text-align: center; padding: 28px var(--gutter); border-top: 1px solid var(--line-soft);
  font-size: 12px; letter-spacing: .5em; text-transform: uppercase; color: var(--text-dim); font-family: var(--font-display);
}

/* ==========================================================================
   Logo lockup: SVG mark + wordmark, CRT glow / halation
   ========================================================================== */
.logo { display: block; position: relative; }
/* The artwork touches every edge of the SVG, and Safari clips CSS filters to the img box,
   so the glow under STUDIO got cut off. Padding gives the glow room inside the box; the
   matching negative margin keeps the layout exactly where it was. */
.logo__img {
  display: block; width: 100%; height: auto;
  box-sizing: content-box; padding: 28px; margin: -28px;
  opacity: .85;
  filter:
    drop-shadow(0 0 1px rgba(255,250,240,.6))
    drop-shadow(0 0 9px rgba(255,245,230,.25))
    drop-shadow(0 0 24px rgba(255,235,210,.14));
}
/* nudge down without changing header height (margin/padding would push the page down) */
.site-logo { width: var(--logo-w); margin-top: 0; position: relative; top: 20px; }
@media (max-width: 800px) { .site-logo { width: var(--logo-w-mobile); } }

/* Home hero: centered over the background image; marks row sits below as its own band */
.hero--home { align-items: center; text-align: center; }
.hero--home .hero__bg::after {
  background:
    linear-gradient(to bottom, rgba(5,5,5,.7) 0%, rgba(5,5,5,.25) 30%, rgba(5,5,5,.35) 70%, var(--bg) 100%);
}
.hero__center { width: min(100% - 2 * var(--gutter), 1100px); margin-inline: auto; padding: 60px 0 80px; }
.hero__center .lead { margin-inline: auto; }
.hero__center .hero__actions { justify-content: center; }
.marks { padding: 0 0 clamp(40px, 6vw, 80px); }
.marks__row { max-width: 900px; margin-inline: auto; border-right: 1px solid var(--line); }
.marks__row > div { padding: 26px 14px 20px; display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center; }
.marks__row > div:last-child { border-right: 0; }
@media (max-width: 800px) {
  .marks__row { grid-template-columns: 1fr 1fr; border-right: 0; }
  .marks__row > div:nth-child(2n) { border-right: 0; }
  /* keep fixed-px logo sizes from overflowing small screens */
  .site-logo .logo { max-width: 100%; }
  .site-logo__sub { width: auto; font-size: 7px; letter-spacing: .15em; padding-left: .15em; margin-top: 4px; }
}

/* ==========================================================================
   Home hero layers: grunge base -> moon cutout -> scratched paper -> stars
   Tune the opacities here. All three images live in src/assets/.
   ========================================================================== */
.hero__bg--layered { background: #0b0907; }
.hero__bg--layered::after {
  background:
    linear-gradient(to bottom, rgba(5,5,5,.55) 0%, rgba(5,5,5,0) 28%, rgba(5,5,5,0) 55%, var(--bg) 100%),
    radial-gradient(70% 50% at 50% 60%, rgba(0,0,0,.35), transparent 70%);
}
.hero__grunge { opacity: .5; }
.hero__moon {
  position: absolute; left: 50%; top: 11%;
  width: min(104%, 1500px); height: auto; max-width: none;
  transform: translateX(-50%);
  mix-blend-mode: screen;
  opacity: .95;
  filter:
    sepia(.35) brightness(1.05)
    drop-shadow(0 0 18px rgba(255,236,200,.35))
    drop-shadow(0 0 70px rgba(255,225,180,.18));
  animation: moon-drift 40s ease-in-out infinite alternate;
}
/* EQP-1A render behind the home hero (replaced the moon; .hero__moon styles kept above) */
.hero__bg .hero__eq {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 60% 50%;
  opacity: .5; filter: brightness(.8) contrast(1.1);
  animation: eq-drift 40s ease-in-out infinite alternate;
}
@keyframes eq-drift { from { transform: scale(1.02); } to { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .hero__eq { animation: none; } }
.hero__paper {
  position: absolute; inset: -4%;
  background: url("/assets/paper-scratched.jpg") center/cover no-repeat;
  mix-blend-mode: screen; opacity: .35;
}
.hero__stars {
  position: absolute; inset: 0; mix-blend-mode: screen; opacity: .8;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 22% 62%, #fff 50%, transparent 100%),
    radial-gradient(2px 2px at 31% 28%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 47% 12%, #fff 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 58% 70%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 66% 22%, #fff 50%, transparent 100%),
    radial-gradient(2px 2px at 78% 44%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 84% 14%, #fff 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 91% 66%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 7% 80%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 40% 86%, #fff 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 72% 88%, #fff 50%, transparent 100%);
}
@keyframes moon-drift {
  from { transform: translateX(-50%) translateY(0); }
  to   { transform: translateX(-50%) translateY(-2.5%); }
}
@media (max-width: 800px) {
  .hero__moon { width: 170%; top: 10%; }
}
@media (prefers-reduced-motion: reduce) { .hero__moon { animation: none; } }



/* ==========================================================================
   Showcase plugin page (front matter `showcase: true`, see slush3r.md)
   Hero shows src/assets/plugins/<slug>/ui.jpg whole, over the home-page grunge layers.
   ========================================================================== */
.feature-row svg, .icon-strip svg { display: block; }
.grunge-layer { position: absolute; inset: 0; }
.grunge-layer--concrete { background: url("/assets/grunge-concrete.jpg") center/cover no-repeat; opacity: .5; }
.grunge-layer--glow { background: radial-gradient(45% 55% at 72% 45%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); mix-blend-mode: screen; }

.hero--shot { min-height: 0; padding-top: 290px; align-items: start; }
.hero--shot .hero__bg::after {
  background: linear-gradient(to bottom, rgba(5,5,5,.75) 0%, rgba(5,5,5,.1) 30%, rgba(5,5,5,.15) 75%, var(--bg) 100%);
}
.no-strap .hero--shot { padding-top: 190px; }
.hero--shot .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: clamp(32px, 5vw, 72px); padding-bottom: 56px; }
.hero--shot .hero__title { font-size: clamp(36px, 5vw, 72px); }
.hero--shot .hero__sub { letter-spacing: .3em; line-height: 1.7; }
.hero__shot { margin: 0; position: relative; }
.hero__shot img {
  width: 100%; height: auto; display: block;
  box-shadow: 0 30px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04);
  transform: rotate(-1.2deg);
}
.hero__shot::before { /* tape strip, like the stickers on the panel */
  content: ""; position: absolute; z-index: 1; top: -14px; left: 12%; width: 110px; height: 30px;
  background: rgba(205,195,170,.55); transform: rotate(-6deg);
  -webkit-mask: url("/assets/paper-scratched.jpg") center/300px; mask: url("/assets/paper-scratched.jpg") center/300px;
  mask-mode: luminance;
}
.hero__features { margin-bottom: 56px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hero__features > div { padding: 22px 14px 18px; }
.hero__features > div:last-child { border-right: 0; }
@media (max-width: 900px) {
  .hero--shot, .no-strap .hero--shot { padding-top: 150px; }
  .hero--shot .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__shot { order: -1; }
  .hero__features { grid-template-columns: 1fr 1fr; border-left: 0; }
  .hero__features > div:nth-child(2n) { border-right: 0; }
}

.section--grunge { position: relative; isolation: isolate; overflow: hidden; }
.section__bg { position: absolute; inset: 0; z-index: -1; background: #0b0907; }
.section__bg .grunge-layer--concrete { opacity: .3; }
.section__bg .hero__paper { opacity: .22; }
.section__bg .hero__stars { opacity: .35; }
.section__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--bg), rgba(5,5,5,.2) 20%, rgba(5,5,5,.2) 80%, var(--bg)); }

/* detail block: image left, copy right in one column, thumb under the text */
.section--grunge .detail { align-items: start; }
.section--grunge .detail__copy { grid-template-columns: minmax(0, 1fr); }
.section--grunge .detail__copy .lead { max-width: 60ch; }
.section--grunge .detail__thumb { justify-self: start; width: min(100%, 280px); }
.section--grunge .detail__thumb img { filter: none; transform: rotate(1.5deg); box-shadow: 0 16px 34px rgba(0,0,0,.6); }
.section--grunge .detail__thumb figcaption { text-align: left; margin-top: 14px; }
.section--grunge .detail__media img { box-shadow: 0 24px 50px rgba(0,0,0,.6); }

/* sweeps: two panels styled after the plugin's own sections */
.sweeps { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.sweep {
  position: relative; padding: 28px 28px 24px; background: rgba(12,11,10,.72);
  border: 1px solid var(--line); border-top: 2px solid var(--sweep);
  box-shadow: inset 0 0 60px rgba(0,0,0,.5);
}
.sweep__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; }
.sweep__led { width: 12px; height: 12px; border-radius: 50%; background: var(--sweep); box-shadow: 0 0 12px var(--sweep), 0 0 2px #fff inset; }
.sweep__name { color: var(--paper); }
.sweep__role { color: var(--text-dim); }
.sweep__text { color: var(--text-dim); font-size: 14px; line-height: 1.75; }
.sweep__text strong { color: var(--sweep); font-weight: 700; }
.sweep__controls { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.sweep__controls li { border: 1px solid color-mix(in srgb, var(--sweep) 45%, transparent); color: var(--text); font-size: 10px; letter-spacing: .25em; text-transform: uppercase; padding: 6px 12px; }
.sweeps__note { margin-top: 32px; max-width: 75ch; }
@media (max-width: 860px) { .sweeps { grid-template-columns: minmax(0, 1fr); } .section--grunge .detail { grid-template-columns: minmax(0, 1fr); } }

/* presets: numbered grid of cards */
.presets__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px 48px; align-items: end; margin-bottom: 40px; }
.presets__head .section__title { margin: 0; }
.presets { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.preset { padding: 24px 22px 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(10,9,8,.55); transition: background .3s; }
.preset:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.preset__num { font-size: 10px; letter-spacing: .3em; color: var(--accent); }
.preset__name { font-family: var(--font-display); text-transform: uppercase; font-size: 16px; color: var(--paper); margin: 10px 0 8px; font-weight: 400; }
.preset p { color: var(--text-dim); font-size: 13px; line-height: 1.65; }
@media (max-width: 860px) { .presets__head { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .hero--shot .hero__title { font-size: clamp(30px, 9vw, 44px); } .hero--shot .hero__sub { letter-spacing: .2em; } }
.plugin-card__title { overflow-wrap: anywhere; }

/* ==========================================================================
   Panel plugin page (layout plugin-panel.njk, see eqp1a.md)
   Clean, no grunge: colours come from the plugin's own plate (--plate, --strip,
   --legend, --lamp are set per page from the front matter `panel`).
   ========================================================================== */
.page-panel .grain { display: none; }
.page-panel { background: #070909; }
.pp-eyebrow { display: flex; align-items: center; gap: 12px; font-family: "Barlow Condensed", sans-serif; font-weight: 500;
  font-size: 15px; letter-spacing: .28em; text-transform: uppercase; color: color-mix(in srgb, var(--legend) 70%, var(--plate)); margin: 0 0 1em; }
.pp-eyebrow--on-plate { color: color-mix(in srgb, var(--legend) 80%, var(--plate)); }
.pp-led { width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 40% 35%, #ffd1c8, var(--lamp) 45%, #7a0d08);
  box-shadow: 0 0 10px var(--lamp), 0 0 22px color-mix(in srgb, var(--lamp) 50%, transparent); }
.pp-title { font-size: clamp(30px, 4.4vw, 54px); text-shadow: none; margin-bottom: .45em; }
.pp-head .pp-title { margin-bottom: 0; }
.pp-trick .pp-title { font-size: clamp(26px, 2.8vw, 40px); }
.pp-lead { font-size: 15px; line-height: 1.75; color: color-mix(in srgb, var(--legend) 72%, transparent); max-width: 56ch; }
.pp-section { padding: clamp(64px, 9vw, 120px) 0; border-top: 1px solid rgba(232,236,233,.06); }
.pp-section--plate { background: linear-gradient(180deg, var(--plate-dark), color-mix(in srgb, var(--plate) 80%, #000) 55%, var(--plate-dark)); border-top: 0; }
.pp-section--plate .pp-lead { color: color-mix(in srgb, var(--legend) 82%, transparent); }
.pp-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px 56px; align-items: end; margin-bottom: clamp(32px, 5vw, 56px); }
.pp-head .pp-lead { margin: 0; }
@media (max-width: 860px) { .pp-head { grid-template-columns: minmax(0, 1fr); } }

/* hero: the 3D render fills the right side and fades into the page on the left */
.pp-hero { position: relative; margin-top: -120px; padding: 220px 0 clamp(64px, 9vw, 120px); overflow: hidden; isolation: isolate;
  background: radial-gradient(70% 90% at 75% 40%, var(--plate-dark), #070909 70%); }
.pp-hero__img { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: min(66%, 1300px); }
.pp-hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; filter: brightness(.82) contrast(1.05);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 45%); mask-image: linear-gradient(to right, transparent, #000 45%); }
.pp-hero__img::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(7,9,9,.85), transparent 45%), linear-gradient(to bottom, transparent 65%, #070909); }
.pp-hero__inner { position: relative; }
.pp-hero__inner > * { max-width: 520px; }
.pp-hero__title { font-size: clamp(38px, 5.6vw, 78px); margin: .1em 0 .3em; text-shadow: 0 2px 40px rgba(0,0,0,.6); }
.pp-hero__sub { font-family: "Barlow Condensed", sans-serif; font-weight: 500; font-size: 22px; letter-spacing: .06em; text-transform: uppercase; color: var(--legend); margin-bottom: 1em; }
.pp-hero__note { margin-top: 22px; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: color-mix(in srgb, var(--legend) 55%, transparent); }
@media (max-width: 900px) {
  .pp-hero { display: flex; flex-direction: column; padding-top: 110px; }
  .pp-hero__img { position: relative; z-index: 0; width: auto; margin: 0 0 4px; }
  .pp-hero__img img { height: auto; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent); }
  .pp-hero__img::after { display: none; }
  .pp-hero__inner > * { max-width: none; }
}

/* stats: the preset strip of the plugin, stretched */
.pp-stats { background: var(--strip); border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 30px rgba(0,0,0,.4); }
.pp-stats__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pp-stat { padding: 28px 20px 26px; border-left: 1px solid rgba(0,0,0,.55); box-shadow: inset 1px 0 0 rgba(255,255,255,.04); display: grid; gap: 8px; }
.pp-stat:first-child { border-left: 0; box-shadow: none; }
.pp-stat__value { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: clamp(30px, 3.6vw, 44px); line-height: 1; color: var(--legend); }
.pp-stat__label { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: color-mix(in srgb, var(--legend) 55%, transparent); line-height: 1.7; }
@media (max-width: 760px) { .pp-stats__row { grid-template-columns: 1fr 1fr; } .pp-stat:nth-child(3) { border-left: 0; box-shadow: none; } .pp-stat:nth-child(n+3) { border-top: 1px solid rgba(0,0,0,.55); } }

/* the flat UI, framed like a rack unit */
.pp-ui { margin: 0; padding: clamp(6px, 1vw, 12px); background: linear-gradient(#1b1d1e, #0e0f10); border: 1px solid #000; border-radius: 6px;
  box-shadow: 0 40px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); }
.pp-ui img { width: 100%; height: auto; border-radius: 3px; }

/* control legends, printed on little plates */
.pp-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.pp-plate { background: linear-gradient(170deg, color-mix(in srgb, var(--plate) 92%, #fff), var(--plate) 40%, color-mix(in srgb, var(--plate) 85%, #000));
  border-radius: 4px; padding: 20px 20px 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 12px 28px rgba(0,0,0,.35); }
.pp-plate__title { font-family: "Barlow Condensed", sans-serif; font-weight: 500; font-size: 19px; letter-spacing: .08em; text-transform: uppercase; color: var(--legend); margin-bottom: 12px; }
.pp-plate dl { margin: 0; display: grid; gap: 10px; }
.pp-plate dl > div { border-top: 1px solid rgba(232,236,233,.14); padding-top: 9px; }
.pp-plate dt { font-family: "Barlow Condensed", sans-serif; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--legend) 62%, transparent); }
.pp-plate dd { margin: 2px 0 0; font-family: "Barlow Condensed", sans-serif; font-size: 17px; color: var(--legend); }
@media (max-width: 1000px) { .pp-controls { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pp-controls { grid-template-columns: minmax(0, 1fr); } }

/* the trick: copy + a response graph on a dark screen, like the preset strip */
.pp-trick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.pp-graph { margin: 0; }
.pp-graph__screen { background: linear-gradient(#1f2324, var(--strip)); border: 1px solid #000; border-radius: 6px; padding: 22px 22px 30px 44px;
  box-shadow: inset 0 2px 12px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.08); }
.pp-graph__plot { position: relative; aspect-ratio: 1000 / 360; }
.pp-graph__plot .pp-chart { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pp-graph__ylabels span, .pp-graph__xlabels span { position: absolute; font-family: "Barlow Condensed", sans-serif; font-size: 12px; color: color-mix(in srgb, var(--legend) 45%, transparent); }
.pp-graph__ylabels span { left: -36px; width: 28px; text-align: right; transform: translateY(-50%); }
.pp-graph__xlabels { position: relative; height: 0; }
.pp-graph__xlabels span { top: 8px; transform: translateX(-50%); }
.pp-graph__xlabels span:first-child { transform: none; }
.pp-graph__xlabels span:last-child { transform: translateX(-100%); }
.pp-chart__grid { stroke: rgba(232,236,233,.08); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pp-chart__zero { stroke: rgba(232,236,233,.25); }
.pp-chart__line { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: .75; stroke-linejoin: round; }
.pp-chart__line.is-main { stroke-width: 2.5; opacity: 1; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--lamp) 60%, transparent)); }
.pp-chart__area { opacity: .12; }
.pp-graph__legend { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 18px; font-family: "Barlow Condensed", sans-serif; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--legend); }
.pp-graph__legend li { display: flex; align-items: center; gap: 10px; }
.pp-graph__legend b { font-weight: 400; color: color-mix(in srgb, var(--legend) 60%, transparent); }
.pp-swatch { width: 18px; height: 3px; background: var(--c); border-radius: 2px; }
.pp-graph figcaption { margin-top: 12px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: color-mix(in srgb, var(--legend) 50%, transparent); line-height: 1.7; }
@media (max-width: 900px) { .pp-trick { grid-template-columns: minmax(0, 1fr); } }

/* gallery: one big shot, four below */
.pp-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: clamp(32px, 5vw, 56px); }
.pp-shot { margin: 0; background: #0d1011; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 0 0 1px rgba(232,236,233,.06); }
.pp-shot img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .8s ease; }
.pp-shot:hover img { transform: scale(1.03); }
.pp-shot figcaption { padding: 18px 20px 22px; }
.pp-shot h3 { font-family: "Barlow Condensed", sans-serif; font-weight: 500; font-size: 19px; letter-spacing: .08em; text-transform: uppercase; color: var(--legend); margin-bottom: 6px; }
.pp-shot p { font-size: 13px; line-height: 1.65; color: color-mix(in srgb, var(--legend) 60%, transparent); margin: 0; }
.pp-shot:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: end; }
.pp-shot:first-child img { aspect-ratio: 16 / 9; }
.pp-shot:first-child figcaption { padding: 32px; }
.pp-shot:first-child h3 { font-size: 26px; }
.pp-shot:first-child p { font-size: 14px; }
@media (max-width: 1000px) { .pp-gallery { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .pp-gallery { grid-template-columns: minmax(0, 1fr); } .pp-shot:first-child { display: flex; } .pp-shot:first-child figcaption { padding: 18px 20px 22px; } }

/* presets: each card gets its own small screen with the preset's real curve */
.pp-presets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.pp-preset { background: linear-gradient(170deg, color-mix(in srgb, var(--plate) 92%, #fff), var(--plate) 40%, color-mix(in srgb, var(--plate) 85%, #000));
  border-radius: 4px; padding: 14px 14px 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 12px 28px rgba(0,0,0,.35); display: flex; flex-direction: column; }
.pp-preset__screen { position: relative; background: var(--strip); border-radius: 3px; border: 1px solid #000; box-shadow: inset 0 2px 8px rgba(0,0,0,.6); aspect-ratio: 16 / 9; padding: 24px 8px 8px; }
.pp-preset__num { position: absolute; top: 6px; left: 9px; font-family: "Barlow Condensed", sans-serif; font-size: 12px; color: color-mix(in srgb, var(--legend) 50%, transparent); }
.pp-chart--mini { width: 100%; height: 100%; display: block; }
.pp-chart--mini .pp-chart__line.is-main { stroke-width: 2; filter: none; }
.pp-chart--mini .pp-chart__area { opacity: .1; }
.pp-preset__name { font-family: "Barlow Condensed", sans-serif; font-weight: 500; font-size: 20px; letter-spacing: .06em; text-transform: uppercase; color: var(--legend); margin: 14px 4px 6px; }
.pp-preset p { font-size: 13px; line-height: 1.6; color: color-mix(in srgb, var(--legend) 72%, transparent); margin: 0 4px 14px; flex: 1; }
.pp-preset__settings { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 4px; }
.pp-preset__settings li { font-family: "Barlow Condensed", sans-serif; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--legend);
  background: rgba(0,0,0,.28); border-radius: 2px; padding: 3px 7px; }
@media (max-width: 1100px) { .pp-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .pp-presets { grid-template-columns: 1fr 1fr; } }
@media (max-width: 440px) { .pp-presets { grid-template-columns: minmax(0, 1fr); } }

/* closer: the call to action and the specs side by side */
.pp-closer__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px 72px; align-items: start; }
.pp-specs { color: color-mix(in srgb, var(--legend) 78%, transparent); }
.pp-specs h2:first-child { margin-top: 0; }
.pp-specs h2 { color: var(--legend); }
.pp-specs ul { margin-bottom: 1.6em; }
.pp-specs code { font-family: var(--font-mono); font-size: .9em; color: var(--legend); }
.pp-specs p:last-child { color: color-mix(in srgb, var(--legend) 55%, transparent); }
@media (max-width: 860px) { .pp-closer__inner { grid-template-columns: minmax(0, 1fr); } }

/* the shared signup block, without its grunge layers on this page */
.page-panel .signup__bg { background: radial-gradient(60% 80% at 80% 50%, var(--plate-dark), #070909 75%); }
.page-panel .signup__bg > * { display: none; }
.page-panel .signup__bg::after { display: none; }
.page-panel .signup__form input:focus { outline-color: var(--lamp); }

/* ==========================================================================
   "Download free" modal (claim-modal.njk, main.js section 4)
   ========================================================================== */
.claim { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--gutter); }
.claim[hidden] { display: none; }
.claim__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.78); backdrop-filter: blur(6px); }
.claim__card {
  position: relative; width: min(560px, 100%); padding: clamp(28px, 5vw, 48px);
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset;
  animation: claim-in .22s ease-out;
}
@keyframes claim-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.claim__x {
  position: absolute; top: 10px; right: 12px; width: 40px; height: 40px;
  background: transparent; border: 0; color: var(--text-dim); font-size: 28px; line-height: 1; cursor: pointer;
}
.claim__x:hover { color: #fff; }
.claim__eyebrow { color: var(--accent); margin: 0 0 10px; }
.claim__title { font-size: clamp(26px, 5vw, 40px); margin: 0 0 14px; }
.claim__lead { color: var(--text-dim); font-size: 14px; line-height: 1.6; margin: 0 0 22px; }
.claim__form input[type="email"] {
  width: 100%; background: var(--paper); border: 0; padding: 15px 18px;
  font: inherit; font-size: 12px; letter-spacing: .25em; color: #111;
}
.claim__form input[type="email"]::placeholder { color: #666; }
.claim__form input[type="email"]:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.claim__turnstile { margin-top: 12px; }
.claim__turnstile:empty { display: none; }
.claim__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.claim__actions .btn { flex: 1 1 auto; text-align: center; cursor: pointer; }
.claim__go { background: var(--accent); color: #fff; border-color: var(--accent); }
.claim__go:hover { background: #fff; color: #111; border-color: #fff; }
.claim__form.is-busy .claim__go { opacity: .6; pointer-events: none; }
.claim__status { min-height: 1.4em; margin: 14px 0 0; font-size: 12px; letter-spacing: .08em; color: var(--text-dim); }
.claim__status.is-err { color: var(--accent); }
.claim__done[hidden] { display: none; }
.claim__done-mark { font-size: 42px; margin: 0 0 8px; color: var(--accent); }
.claim__done-text { font-size: 15px; line-height: 1.6; margin: 0 0 12px; }
.claim__done-note { color: var(--text-faint); font-size: 12px; line-height: 1.6; margin: 0; }
.claim__done-note a { color: var(--text-dim); text-decoration: underline; }
body.claim-open { overflow: hidden; }

/* ==========================================================================
   /account/ — plugin owners (account.njk, js/account.js)
   ========================================================================== */
.acct__lead { max-width: 60ch; color: var(--text-dim); font-size: 15px; line-height: 1.6; margin: 0 0 24px; }
.acct__form { display: flex; max-width: 520px; border: 1px solid var(--paper); }
.acct__form input { flex: 1; min-width: 0; background: var(--paper); border: 0; padding: 14px 18px; font: inherit; font-size: 11px; letter-spacing: .25em; color: #111; }
.acct__form input::placeholder { color: #666; }
.acct__form input:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.acct__form .btn { border: 0; border-left: 1px solid var(--paper); border-radius: 0; cursor: pointer; }
.acct__form.is-busy .btn { opacity: .6; pointer-events: none; }
.acct__turnstile { margin-top: 12px; }
.acct__turnstile:empty { display: none; }
.acct__status { margin: 14px 0 0; font-size: 12px; letter-spacing: .08em; color: var(--text-dim); min-height: 1.4em; }
.acct__status.is-ok { color: var(--text); }
.acct__status.is-err { color: var(--accent); }
.acct__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }
.acct__who { font-size: 13px; color: var(--text); }
.acct__who .eyebrow { display: inline; margin-right: 10px; }
.acct__out { padding: .6em 1.4em; cursor: pointer; }
.acct__list { display: grid; gap: 24px; }
.acct__item { border: 1px solid var(--line); background: var(--panel); padding: clamp(20px, 3vw, 32px); }
.acct__item-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.acct__code { color: var(--accent); margin: 0 0 6px; }
.acct__name { font-size: clamp(22px, 3vw, 30px); margin: 0; }
.acct__page { padding: .6em 1.4em; }
.acct__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; border-top: 1px solid var(--line-soft); padding-top: 18px; }
.acct__field { min-width: 0; }
.acct__label { display: block; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; }
.acct__value { font-size: 13px; color: var(--text); }
.acct__serial { display: inline-block; font-family: var(--font-mono); font-size: 15px; letter-spacing: .08em; color: var(--paper); background: #000; border: 1px solid var(--line); padding: 8px 12px; margin-right: 8px; user-select: all; }
.acct__copy { background: transparent; border: 1px solid var(--line); color: var(--text-dim); font: inherit; font-size: 10px; letter-spacing: .25em; text-transform: uppercase; padding: 9px 12px; cursor: pointer; }
.acct__copy:hover { color: #fff; border-color: var(--paper); }
.acct__dl { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 20px; }
.acct__dl .acct__label { width: 100%; margin-bottom: 0; }
.acct__dlbtn { padding: .7em 1.4em; font-size: 11px; }
.acct__tools { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 20px; }
.acct__reset { padding: .6em 1.4em; cursor: pointer; }
.acct__item-status { margin: 0; }
.acct__note { color: var(--text-faint); font-size: 12px; line-height: 1.6; margin-top: 32px; }
.acct__note a { color: var(--text-dim); text-decoration: underline; }
@media (max-width: 640px) {
  .acct__grid { grid-template-columns: 1fr; }
  .acct__form { flex-direction: column; }
  .acct__form .btn { border-left: 0; border-top: 1px solid var(--paper); }
}

/* account: computers on a key */
.acct__devices { margin-top: 20px; border-top: 1px solid var(--line-soft); padding-top: 16px; }
.acct__devlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.acct__dev { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name btn" "meta btn"; align-items: center; gap: 2px 16px; padding: 10px 12px; background: #000; border: 1px solid var(--line); }
.acct__dev--none { display: block; color: var(--text-faint); font-size: 12px; }
.acct__dev-name { grid-area: name; font-size: 13px; color: var(--text); }
.acct__dev-meta { grid-area: meta; font-size: 11px; color: var(--text-faint); letter-spacing: .04em; }
.acct__dev-release { grid-area: btn; }

/* claim modal: promo code */
.claim__code-toggle { margin: 10px 0 0; font-size: 11px; letter-spacing: .12em; }
.claim__link { background: none; border: 0; padding: 0; color: var(--text-dim); font: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.claim__link:hover { color: #fff; }
.claim__code { margin-top: 10px; }
.claim__code input { width: 100%; background: var(--paper); border: 0; padding: 13px 18px; font: inherit; font-size: 12px; letter-spacing: .25em; text-transform: uppercase; color: #111; }
.claim__code input:focus { outline: 2px solid var(--accent); outline-offset: -2px; }