/* ------------------------------------------------------------------ *
   MadPsy Music -- the site: landing, product pages, store, support
   Single-theme by intent: this is a front panel behind glass, and a
   panel has one finish. Every colour is painted explicitly so the page
   holds on either host ground.
 * ------------------------------------------------------------------ */
:root {
  --void:    #05070d;   /* ground -- blue-biased black, not neutral */
  --deck:    #0c0f18;   /* raised surface */
  --deck-2:  #121622;   /* raised surface, one step up */
  --rule:    #232a3d;   /* hairlines */
  --steel:   #c6cad4;   /* brushed aluminium -- primary text */
  --steel-d: #868da0;   /* secondary text */
  --steel-f: #5c6478;   /* faint text */
  --anodise: #33489a;   /* sampled from the plugin's title bars */
  --anodise-d:#26356f;
  --beam:    #6fa8ff;   /* the panel's light-blue legend colour */
  --acid:    #4be3e0;   /* cyan accent */
  --bloom:   #d94ff0;   /* magenta accent */
  --ca-l:    #4a86f5;   /* aberration, left channel  -- deep electric blue */
  --ca-r:    #8257e8;   /* aberration, right channel -- blue-violet */
  --jade:    #55e0a8;   /* rain accent only */
  --walnut:  #6b4433;   /* the cheek wood, as a warm mark */
  --amber:   #e0a24a;

  --w: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- base ---------- */
html { background: var(--void); }
body {
  margin: 0;
  background: var(--void);
  color: var(--steel);
  font-family: "Archivo", "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
a { color: var(--beam); text-decoration: none; }
img { display: block; }
h1, h2, h3 { text-wrap: balance; margin: 0; }

:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; border-radius: 2px; }

/* ---------- the three atmosphere layers ---------- */

/* 1. digital rain, furthest back */
#rain {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .3;
  /* No mask: thinning it through the middle cost half the frame rate
     without a GPU (D-033), and the scrim already quiets the text column. */
}

/* 2. blueprint deck */
.deckgrid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(111,168,255,.05) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(111,168,255,.05) 0 1px, transparent 1px 56px);
  -webkit-mask-image: radial-gradient(ellipse 90% 62% at 50% 14%, #000 0%, transparent 78%);
          mask-image: radial-gradient(ellipse 90% 62% at 50% 14%, #000 0%, transparent 78%);
}

/* 3. glass: scanlines and a vignette. No sweep and no tear bands (D-014):
   the glass should be felt, not watched. */
.crt {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.07) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse 118% 96% at 50% 50%, transparent 56%, rgba(2,3,7,.7) 100%);
}

.wrap { width: 100%; max-width: var(--w); margin-inline: auto; padding-inline: 28px; }
.page { position: relative; z-index: 1; }

/* ---------- content scrim ---------- */
/* The field runs full-bleed. The content column sits on a translucent,
   lightly blurred ground so type stays legible, while the margins keep
   the field at full strength. Edges are feathered so it never reads as
   a panel. */
.page::before {
  content: "";
  position: fixed;
  top: 0; bottom: 0;
  left: 50%;
  width: min(100%, calc(var(--w) + 48px));
  transform: translateX(-50%);
  background: rgba(5,7,13,.68);   /* a plain wash: a backdrop blur here re-blurs the column on every frame of the rain */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  z-index: -1;
  pointer-events: none;
}
/* A phone has no margins: the column is the whole screen, so the scrim
   above would hide the rain entirely. There the wash is lighter and the
   rain dimmer, so it reads as a faint texture behind the text rather
   than a plain dark page. */
@media (max-width: 700px) {
  #rain { opacity: .22; }
  .page::before { background: rgba(5,7,13,.42); }
}

/* ---------- shared type roles ---------- */
.legend {                       /* silkscreen legend -- the panel's own voice */
  font-family: "Azeret Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--steel-f);
}
.legend--beam { color: var(--beam); }

.display {
  font-family: "Syne", "Archivo", sans-serif;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.02;
}

.prose { max-width: 62ch; color: var(--steel-d); }
.prose strong { color: var(--steel); font-weight: 600; }
.prose em { color: var(--acid); font-style: italic; }

/* ---------- chromatic aberration ---------- */
/* Two offset copies of the same text, screened over the base. Where they
   overlap the base they vanish; where they overhang, you get the fringe. */
/* nowrap on the word and both copies: if the copies could wrap where the word
   overflows, the fringe would stop part-way along it */
.glitch { position: relative; color: #eef4ff; white-space: nowrap; }
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  padding: inherit;                  /* same box as the base, so the copies register */
  pointer-events: none;
  mix-blend-mode: screen;
}
/* A static fringe, and one short burst as the page opens (D-014). */
.glitch::before { color: var(--ca-l); transform: translate3d(-3px, 0, 0); animation: slice-a 1.1s .5s 1 steps(1) both; }
.glitch::after  { color: var(--ca-r); transform: translate3d(3px, 0, 0);  animation: slice-b 1.1s .5s 1 steps(1) both; }
@keyframes slice-a {
  0%, 100% { clip-path: inset(0 0 0 0); transform: translate3d(-3px, 0, 0); }
  20% { clip-path: inset(10% 0 68% 0); transform: translate3d(-18px, 0, 0); }
  35% { clip-path: inset(54% 0 26% 0); transform: translate3d(12px, 0, 0); }
  50% { clip-path: inset(0 0 0 0); transform: translate3d(-3px, 0, 0); }
}
@keyframes slice-b {
  0%, 100% { clip-path: inset(0 0 0 0); transform: translate3d(3px, 0, 0); }
  20% { clip-path: inset(60% 0 18% 0); transform: translate3d(16px, 0, 0); }
  35% { clip-path: inset(18% 0 60% 0); transform: translate3d(-14px, 0, 0); }
  50% { clip-path: inset(0 0 0 0); transform: translate3d(3px, 0, 0); }
}

/* ---------- anodised title bar -- lifted from the instrument ---------- */
.bar {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 7px 22px;
  border-radius: 5px;
  background: linear-gradient(180deg, #435bbd 0%, var(--anodise) 42%, var(--anodise-d) 100%);
  border: 1px solid rgba(111,168,255,.55);
  box-shadow:
    inset 0 1px 0 rgba(190,215,255,.45),
    inset 0 -1px 0 rgba(0,0,0,.4),
    0 0 26px rgba(51,72,154,.45);
  font-family: "Azeret Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #dce7ff;
}
.bar__idx { color: rgba(220,231,255,.55); }
.bar__label { position: relative; z-index: 1; }
.bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 42%, rgba(200,232,255,.42) 50%, transparent 58%);
  transform: translateX(-130%);
}
.bar:hover::after { transform: translateX(130%); transition: transform .9s ease-in-out; }
.bar--accent, .prod .bar {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, #fff 12%) 0%, var(--accent) 42%, color-mix(in srgb, var(--accent) 70%, #000) 100%);
  border-color: color-mix(in srgb, var(--accent-hi) 55%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.4), 0 0 26px color-mix(in srgb, var(--accent) 45%, transparent);
  color: #effffb;
}

/* ---------- nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(5,7,13,.94);   /* opaque enough to need no backdrop blur (see .page::before) */
  border-bottom: 1px solid rgba(111,168,255,.32);
  box-shadow: 0 1px 0 rgba(0,0,0,.7), 0 10px 32px -14px rgba(0,0,0,.9);
}
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 62px; }
.mark {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-family: "Syne", sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .01em;
  color: var(--steel);
}
.mark__colon { color: var(--acid); font-weight: 600; }
.nav__links { display: flex; align-items: center; gap: 26px; }
.nav__links a {
  font-family: "Azeret Mono", ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--steel-d);
  transition: color .2s var(--ease), text-shadow .2s var(--ease);
}
.nav__links a:hover { color: #eef4ff; text-shadow: -1px 0 var(--ca-l), 1px 0 var(--ca-r); }
.nav__cta {
  padding: 8px 16px;
  border: 1px solid var(--anodise);
  border-radius: 4px;
  color: var(--beam) !important;
  background: rgba(51,72,154,.16);
}
.nav__cta:hover { background: rgba(51,72,154,.36); border-color: var(--acid); }
@media (max-width: 860px) { .nav__links .nav__hide { display: none; } }

/* ---------- hero ---------- */
.hero { position: relative; padding: 74px 0 40px; overflow-x: clip; }
.plasma {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(1560px, 155vw);
  height: 900px;
  z-index: 0;
  opacity: .58;
  pointer-events: none;
  /* the field fades out in an ellipse before the hero's top edge, so the
     nav never cuts it; site.js draws the fade into the canvas (D-033) */
}
.hero__in { position: relative; z-index: 1; }

.hero__eyebrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.tick { width: 26px; height: 1px; background: linear-gradient(90deg, var(--walnut), var(--acid)); }

.hero h1.display {
  font-family: "Syne", sans-serif;
  font-weight: 800;
  font-size: clamp(52px, 11vw, 160px);
  line-height: .88;
  letter-spacing: -.04em;
  width: max-content;                  /* sizes are set so the name fits the column at every width */
  padding: .5em .5em .5em .1em;        /* room for the glow, so the box never clips it */
  margin: -.5em 0 calc(4px - .5em) -.1em;
  text-shadow: 0 0 24px color-mix(in srgb, var(--accent-hi, #6fa8ff) 50%, transparent), 0 0 70px color-mix(in srgb, var(--accent-hi, #6fa8ff) 28%, transparent);
}
.hero__lede {
  font-family: "Syne", sans-serif;
  font-weight: 600;
  font-size: clamp(19px, 2.5vw, 28px);
  line-height: 1.3;
  letter-spacing: -.012em;
  color: var(--steel);
  max-width: 22ch;
  margin: 0;
}
.hero__lede em { font-style: normal; color: var(--accent-hi, var(--acid)); text-shadow: 0 0 22px color-mix(in srgb, var(--accent-hi, var(--acid)) 45%, transparent); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 46px;
  align-items: start;
  margin-top: 26px;
}
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; gap: 30px; } }

.btnrow { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 5px;
  font-family: "Azeret Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
}
.btn > * { position: relative; z-index: 1; }
.btn:hover { transform: translateY(-2px); }
.btn--go {
  background: linear-gradient(180deg, #4a63c6 0%, var(--anodise) 55%, var(--anodise-d) 100%);
  border-color: rgba(111,168,255,.6);
  color: #eaf1ff;
  box-shadow: inset 0 1px 0 rgba(190,215,255,.4), 0 0 26px rgba(51,72,154,.42);
}
.btn--go:hover {
  box-shadow: inset 0 1px 0 rgba(190,215,255,.5), 0 8px 38px rgba(51,72,154,.7);
  text-shadow: -1px 0 var(--ca-l), 1px 0 var(--ca-r);
}
.btn--ghost { background: rgba(198,202,212,.03); border-color: var(--rule); color: var(--steel); }
.btn--ghost:hover { border-color: var(--acid); background: rgba(75,227,224,.07); text-shadow: -1px 0 var(--ca-l), 1px 0 var(--ca-r); }
.btn__price { color: rgba(234,241,255,.62); }

.stamp { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--rule); }
.stamp span {
  font-family: "Azeret Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--steel-f);
  text-transform: uppercase;
}
.stamp b { color: var(--steel-d); font-weight: 500; }

/* ---------- the instrument itself ---------- */
.panel { position: relative; margin: 54px 0 0; }
.panel__glow {
  position: absolute;
  inset: -6% -4% -14%;
  background: radial-gradient(ellipse at 50% 45%, rgba(51,72,154,.55), rgba(217,79,240,.16) 45%, transparent 70%);
  filter: blur(48px);
  z-index: 0;
  animation: breathe 11s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: .8;  transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.04); }
}
.panel__frame {
  display: block;           /* an <a> on the front page: inline, it would not contain the image */
  position: relative;
  z-index: 1;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 10px;
  background: linear-gradient(180deg, var(--deck-2), var(--deck));
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.95), inset 0 1px 0 rgba(198,202,212,.08);
  overflow: hidden;
}
.panel__frame img {
  display: block; width: 100%; height: auto; border-radius: 4px;
  filter: saturate(1.14) contrast(1.06) brightness(1.06);
}
/* the panel is being viewed through the same glass as everything else */
.panel__scan { position: absolute; inset: 10px; border-radius: 4px; pointer-events: none; }
.panel__scan { background: repeating-linear-gradient(0deg, rgba(3,6,14,.12) 0 1px, transparent 1px 4px); }
.panel__cap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 12px; }

/* ---------- section scaffolding ---------- */
.sec { padding: 84px 0 64px; position: relative; scroll-margin-top: 78px; }

/* Sections are not divided by a rule -- that would be one more horizontal
   line in a field full of them. Instead a short vertical rail drops into
   each section's title bar, with a block riding down it: signal flowing
   down the page, in the same vocabulary as the falling field. */
.sec__head { position: relative; }
.sec__head::before {                 /* the rail */
  content: "";
  position: absolute;
  left: 21px; top: -72px;
  width: 1px; height: 54px;
  background: linear-gradient(180deg, transparent, var(--rule) 35%, rgba(111,168,255,.7));
}
.sec__head::after {                  /* the block */
  content: "";
  position: absolute;
  left: 18px; top: -72px;
  width: 7px; height: 11px;
  background: var(--beam);
  box-shadow: 0 0 10px rgba(111,168,255,.75);
  transform: translateY(43px);       /* resting at the foot when motion is off */
  animation: drop 3.8s var(--ease) infinite;
}
@keyframes drop {
  0%        { transform: translateY(0);    opacity: 0; }
  12%       { opacity: 1; }
  62%       { transform: translateY(43px); opacity: 1; }
  74%, 100% { transform: translateY(43px); opacity: 0; }
}
/* stagger so seven drops do not fall in lockstep */
.sec:nth-of-type(3n+2) .sec__head::after { animation-delay: -1.3s; }
.sec:nth-of-type(3n)   .sec__head::after { animation-delay: -2.5s; }

.sec__head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 40px; }
.sec__head h2 {
  font-family: "Syne", sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.06;
  letter-spacing: -.03em;
  color: #e6ebf6;
  max-width: 17ch;
  text-shadow: -1px 0 rgba(74,134,245,.4), 1px 0 rgba(130,87,232,.36);
}
.sec__head .prose { margin-top: -4px; }

/* ---------- signal path ---------- */
.path { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1020px) { .path { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px)  { .path { grid-template-columns: 1fr; } }
.stage {
  position: relative;       /* no overflow: hidden, or it cuts off the cable below */
  padding: 22px 20px 24px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(18,22,34,.9), rgba(12,15,24,.55));
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.stage:hover {
  border-color: rgba(75,227,224,.5);
  transform: translateY(-3px);
  box-shadow: 0 0 34px -6px rgba(75,227,224,.28);
}
.stage__n { font-family: "Azeret Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .16em; color: var(--acid); display: block; margin-bottom: 14px; }
.stage h3 { font-family: "Syne", sans-serif; font-weight: 700; font-size: 16px; letter-spacing: -.01em; color: var(--steel); margin-bottom: 8px; }
.stage p { font-size: 14px; line-height: 1.55; color: var(--steel-d); margin: 0; }
.stage::after {                 /* the patch cable between stages: across the 14px gap */
  content: "";
  position: absolute;
  top: 34px; right: -15px;
  width: 14px; height: 1px;
  background: var(--anodise);
}
.stage:last-child::after { display: none; }
@media (max-width: 1020px) { .stage::after { display: none; } }   /* in rows of two or one it would point at nothing */
@media (max-width: 1020px) { .stage::after { display: none; } }

/* ---------- feature rows ---------- */
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 52px; align-items: start; }
.row--flip > .row__vis { order: -1; }
@media (max-width: 940px) {
  .row { grid-template-columns: 1fr; gap: 30px; }
  .row--flip > .row__vis { order: 0; }
}

.speclist { display: grid; gap: 0; margin-top: 26px; border-top: 1px solid var(--rule); }
.speclist div {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 18px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 14.5px;
  color: var(--steel-d);
}
.speclist .k {
  font-family: "Azeret Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--steel-f);
  padding-top: 3px;
}
@media (max-width: 520px) { .speclist div { grid-template-columns: 1fr; gap: 3px; } }

/* ---------- instrument-style enclosures ---------- */
.player {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--deck-2), #090c14);
  box-shadow: inset 0 1px 0 rgba(198,202,212,.07), 0 30px 60px -34px rgba(0,0,0,.9);
  overflow: hidden;
}
.player__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  background: rgba(51,72,154,.11);
}
/* ---------- demo player ---------- */
.tracks { list-style: none; margin: 0; padding: 0; }
.trk {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) minmax(90px, 1.15fr) 54px;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
  transition: background .2s var(--ease);
}
.trk:last-of-type { border-bottom: none; }
.trk:hover { background: rgba(75,227,224,.05); }
.trk.is-playing { background: rgba(51,72,154,.16); }
.trk__btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: linear-gradient(180deg, #1a2030, #10131c);
  box-shadow: inset 0 1px 0 rgba(198,202,212,.09);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.trk__btn:hover { border-color: rgba(75,227,224,.65); box-shadow: 0 0 18px -2px rgba(75,227,224,.4); }
.trk.is-playing .trk__btn { border-color: rgba(111,168,255,.75); background: linear-gradient(180deg, #4a63c6, var(--anodise-d)); }
.trk__ico {
  width: 0; height: 0;
  margin-left: 3px;
  border-left: 10px solid var(--steel);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
.trk.is-playing .trk__ico {
  margin-left: 0;
  width: 10px; height: 12px;
  border: none;
  background: linear-gradient(90deg, #eaf1ff 0 3px, transparent 3px 7px, #eaf1ff 7px 10px);
}
.trk__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trk__name { font-family: "Syne", sans-serif; font-weight: 700; font-size: 15.5px; letter-spacing: -.01em; color: var(--steel); }
.trk__rep {
  display: inline-block; margin-left: 10px; padding: 1px 6px; vertical-align: 2px;
  border: 1px solid var(--rule); border-radius: 3px;
  font-family: "Azeret Mono", monospace; font-size: 10px; font-weight: 400; letter-spacing: .06em;
  color: var(--steel-f); font-variant-numeric: tabular-nums;
}
.trk.is-playing .trk__rep { color: var(--beam); border-color: rgba(111,168,255,.5); }
.trk__tag {
  display: inline-block; margin-right: 8px; padding: 0 6px; vertical-align: 1px;
  border-radius: 3px; border: 1px solid color-mix(in srgb, var(--accent-hi) 45%, transparent);
  font-family: "Azeret Mono", monospace; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-hi);
}
.player__note--more { background: rgba(51,72,154,.12); }
.player__note--more i { background: var(--beam); }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 800px) { .pair { grid-template-columns: 1fr; } }
.pair .offer h3 { font-size: clamp(22px, 2.6vw, 27px); color: #eef4ff; margin-top: 6px; }
.pair .offer .btn { justify-self: start; align-self: start; }
.trk__desc { font-size: 13.5px; line-height: 1.4; color: var(--steel-d); }
.trk__bar { height: 3px; border-radius: 2px; background: var(--rule); overflow: hidden; }
.trk__bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--anodise), var(--acid)); }
.trk__time { font-family: "Azeret Mono", ui-monospace, monospace; font-size: 11.5px; color: var(--steel-f); text-align: right; font-variant-numeric: tabular-nums; }
.trk.is-missing { opacity: .55; }
.trk.is-missing .trk__time { color: var(--amber); font-size: 10px; letter-spacing: .06em; }
@media (max-width: 700px) {
  .trk { grid-template-columns: 42px minmax(0, 1fr) 54px; row-gap: 10px; }
  .trk__bar { grid-column: 2 / 4; }
}
.player__note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 11px 18px;
  border-top: 1px solid var(--rule);
  background: rgba(107,68,51,.18);
}
.player__note i { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); font-style: normal; flex: none; }

/* ---------- filter / fx cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 14px; }
.card {
  position: relative;
  overflow: hidden;
  padding: 20px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(18,22,34,.72), rgba(9,12,20,.5));
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.card:hover { border-color: rgba(217,79,240,.45); box-shadow: 0 0 34px -8px rgba(217,79,240,.34); }
.card h4 { font-family: "Syne", sans-serif; font-weight: 700; font-size: 15px; color: var(--steel); margin: 0 0 4px; }
.card .legend { display: block; margin-bottom: 12px; }
.card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--steel-d); }
.card--warm { border-color: rgba(107,68,51,.6); }
.card--warm .legend { color: var(--amber); }

/* ---------- spec table ---------- */
.tablewrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 6px; }
table { border-collapse: collapse; width: 100%; min-width: 560px; }
th, td { text-align: left; padding: 13px 20px; border-bottom: 1px solid var(--rule); font-size: 14.5px; }
thead th {
  font-family: "Azeret Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--steel-f);
  background: rgba(51,72,154,.12);
  font-weight: 500;
}
tbody th { font-family: "Azeret Mono", ui-monospace, monospace; font-size: 11.5px; letter-spacing: .08em; color: var(--beam); font-weight: 400; width: 34%; }
tbody tr { transition: background .18s var(--ease); }
tbody tr:hover { background: rgba(75,227,224,.04); }
td { color: var(--steel-d); font-variant-numeric: tabular-nums; }
td code { font-family: "Azeret Mono", monospace; font-size: 13px; color: var(--acid); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: none; }

/* ---------- screens (injected by build.py from assets/images) ---------- */
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.shot { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.shot__frame {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 6px;
  background: linear-gradient(180deg, var(--deck-2), var(--deck));
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.95), inset 0 1px 0 rgba(198,202,212,.08);
  overflow: hidden;
}
.shot__frame img { width: 100%; height: auto; border-radius: 3px; filter: saturate(1.1) contrast(1.04); }
.shot__frame .panel__scan { inset: 6px; border-radius: 3px; }
.shot figcaption { display: flex; justify-content: space-between; gap: 12px; }

/* ---------- hero bundle line ---------- */
.hero__bundle { margin: 14px 0 0; font-size: 14px; }
.hero__bundle a { color: var(--steel-d); transition: color .2s var(--ease); }
.hero__bundle a:hover { color: var(--acid); }

/* ---------- bundle ---------- */
.bundle { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 900px) { .bundle { grid-template-columns: minmax(0, 1fr); } }
.bundle__side { display: grid; gap: 18px; }
.bundle__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bundle__chips .chip i { background: var(--accent); box-shadow: 0 0 9px var(--accent); }
.offer__price s { font-family: "Azeret Mono", monospace; font-size: 16px; font-weight: 400; color: var(--steel-f); letter-spacing: 0; }
.offer__note { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--steel-d); }

/* ---------- merch ---------- */
.merch { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.merch__tile { display: flex; flex-direction: column; gap: 10px; }
.merch__img {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(111,168,255,.35);
  border-radius: 6px;
  background:
    repeating-linear-gradient(135deg, rgba(111,168,255,.04) 0 6px, transparent 6px 14px),
    linear-gradient(180deg, rgba(18,22,34,.6), rgba(9,12,20,.4));
}
.merch__cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 26px; }

/* ---------- pricing grid ---------- */
.pricing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .pricing { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pricing { grid-template-columns: 1fr; } }
.price {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 22px 20px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--deck-2), rgba(9,12,20,.6));
  overflow: hidden;
}
.price::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .8; }
.price--lead { border-color: rgba(111,168,255,.45); box-shadow: 0 0 44px -14px rgba(51,72,154,.8); }
.price h3 { font-family: "Syne", sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -.02em; color: #e6ebf6; }
.price__n { font-family: "Syne", sans-serif; font-weight: 800; font-size: 34px; letter-spacing: -.03em; color: #e6ebf6; line-height: 1; margin: 4px 0 8px; }
.price__n s { font-family: "Azeret Mono", monospace; font-size: 13px; font-weight: 400; color: var(--steel-f); margin-left: 10px; letter-spacing: 0; }
.price__btns { display: flex; gap: 8px; margin-top: auto; }
.price__btns .btn { flex: 1; justify-content: center; padding: 10px 14px; font-size: 11px; }

/* ---------- offers ---------- */
.offer {
  position: relative;
  padding: 30px 28px 28px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--deck-2), rgba(9,12,20,.6));
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}
.offer--lead { border-color: rgba(111,168,255,.45); box-shadow: 0 0 52px -14px rgba(51,72,154,.75); }
.offer--lead::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--acid), var(--bloom), transparent);
  background-size: 200% 100%;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.offer h3 { font-family: "Syne", sans-serif; font-weight: 700; font-size: 27px; letter-spacing: -.02em; color: var(--steel); }
/* price, struck price and saving have no spaces between them: wrap them as items, or a phone cannot break the line */
.offer__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-family: "Syne", sans-serif; font-weight: 800; font-size: 44px; letter-spacing: -.03em; color: #e6ebf6; line-height: 1; }
.offer__price small { font-family: "Azeret Mono", monospace; font-size: 12px; letter-spacing: .1em; color: var(--steel-f); font-weight: 400; }
.offer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.offer li { display: grid; grid-template-columns: 15px 1fr; gap: 11px; font-size: 14.5px; line-height: 1.5; color: var(--steel-d); }
.offer li::before { content: "--"; color: var(--anodise); }
.offer--lead li::before { content: "--"; color: var(--acid); }
.offer .btn { justify-content: center; margin-top: auto; }
code { font-family: "Azeret Mono", monospace; font-size: 13px; color: var(--acid); }

/* ---------- chips / footer ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: "Azeret Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .09em;
  color: var(--steel-d);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.chip:hover { border-color: rgba(75,227,224,.4); color: var(--steel); }
.chip i { width: 6px; height: 6px; border-radius: 50%; font-style: normal; }
.chip--soon { border-style: dashed; color: var(--steel-f); }

.foot { position: relative; border-top: 1px solid var(--rule); padding: 54px 0 70px; margin-top: 40px; background: rgba(5,7,13,.55); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 800px) { .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot__brand { grid-column: 1 / -1; } }
.foot__brand p { margin: 12px 0 0; max-width: 36ch; font-size: 14px; color: var(--steel-d); }
.foot__col { display: flex; flex-direction: column; gap: 8px; }
.foot__col .legend { margin-bottom: 4px; }
.foot__col a { font-size: 14px; color: var(--steel-d); transition: color .2s var(--ease); }
.foot__col a:hover { color: var(--steel); }
.foot__base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--rule); }

/* ================================================================== *
   Multi-page components (D-014). Every product page sets --accent and
   --accent-hi on its .prod wrapper; components read those and fall
   back to the site blue on the landing, store and support pages.
 * ================================================================== */
:root { --accent: var(--anodise); --accent-hi: var(--beam); }

/* ---------- nav: product menu, FX switch, current page ---------- */
.nav__links a[aria-current="page"] { color: var(--steel); }
.menu { position: relative; }
.menu summary {
  list-style: none;
  cursor: pointer;
  font-family: "Azeret Mono", ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--steel-d);
  display: flex; align-items: center; gap: 8px;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: ""; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--ease); }
.menu[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.menu summary:hover, .menu[open] summary { color: var(--steel); }
.menu__list {
  position: absolute;
  top: calc(100% + 18px); left: -18px;
  width: 300px;
  display: flex; flex-direction: column;
  padding: 10px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #090c14;               /* opaque, so the page never reads through the open menu */
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.95), inset 0 1px 0 rgba(198,202,212,.07);
}
.menu__group { padding: 8px 10px 4px; font-size: 10px; }
.nav__links .menu__list a {
  display: grid;
  grid-template-columns: 8px auto 1fr;
  align-items: baseline;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 5px;
  font-family: "Archivo", sans-serif;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--steel);
}
.nav__links .menu__list a:hover, .nav__links .menu__list a[aria-current="page"] { background: rgba(111,168,255,.07); text-shadow: none; }
.menu__list a i { width: 7px; height: 7px; border-radius: 2px; background: var(--accent-hi); box-shadow: 0 0 8px var(--accent-hi); align-self: center; }
.menu__list a b { font-family: "Syne", sans-serif; font-weight: 700; }
.menu__list a span { color: var(--steel-f); font-size: 12.5px; justify-self: end; text-align: right; }
.menu__more { display: none; border-top: 1px solid var(--rule); margin-top: 8px; padding-top: 6px; }
.nav__links .menu__more a { grid-template-columns: 1fr; }
@media (max-width: 860px) {
  .menu__more { display: block; }
  .menu__list { position: fixed; top: 62px; left: 16px; right: 16px; width: auto; }
}

@media (max-width: 440px) {
  .nav__cta { display: none; }
  /* the mark, Plug-ins and Cart have to share 390px */
  .nav__in { gap: 10px; }
  .nav__links { gap: 12px; }
  .nav__links a, .menu summary { letter-spacing: .06em; }
  .mark { gap: 5px; font-size: 15px; }
}
.menu summary { white-space: nowrap; }
@media (max-width: 380px) {
  .mark { gap: 2px; font-size: 14px; }
  .nav__links { gap: 10px; }
}

/* ---------- hero variants ---------- */
.headline {
  font-family: "Syne", sans-serif;
  font-weight: 800;
  font-size: clamp(36px, 5.2vw, 70px);
  line-height: 1;
  letter-spacing: -.035em;
  color: #eef4ff;
  max-width: 19ch;
  margin: 0 0 30px;
}
.headline em { font-style: normal; color: var(--beam); text-shadow: -2px 0 rgba(74,134,245,.55), 2px 0 rgba(130,87,232,.5), 0 0 40px rgba(111,168,255,.35); }
.prose--lead { font-size: 18px; line-height: 1.6; color: var(--steel); max-width: 58ch; margin: 0; }
.hero--page { padding: 72px 0 8px; }
.hero--page .prose--lead { color: var(--steel-d); }
.hero--prod { padding-top: 64px; }
.hero__small { margin: 14px 0 0; }

.tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  font-family: "Azeret Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, #fff 14%) 0%, var(--accent) 50%, color-mix(in srgb, var(--accent) 75%, #000) 100%);
  border: 1px solid color-mix(in srgb, var(--accent-hi) 55%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 18px color-mix(in srgb, var(--accent) 40%, transparent);
  white-space: nowrap;
}
.status, .pcard__status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Azeret Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amber);
}
.status i, .pcard__status i { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px var(--amber); animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* a release candidate: settled, so steady rather than blinking, and cooler than a beta's amber */
.status--rc, .pcard__status--rc { color: var(--acid); }
.status--rc i, .pcard__status--rc i { background: var(--acid); box-shadow: 0 0 8px var(--acid); animation: none; }
.pcard__top .pcard__status { margin-left: auto; }
.pcard__top .pcard__status + .pcard__price { margin-left: 12px; }
/* the small cards are too narrow for tag, status and price on one row: the price always takes
   its own line, so the four cards match instead of wrapping by the length of each tag */
.cards4 .pcard__top .pcard__price, .cards4 .pcard__top .pcard__status + .pcard__price { flex-basis: 100%; margin-left: 0; }

/* effects pages: name and copy beside a smaller panel */
.fxhero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
@media (max-width: 940px) { .fxhero { grid-template-columns: 1fr; gap: 30px; } }
.hero--fx h1.display { font-size: clamp(30px, 9vw, 120px); }   /* 30px: "PsyPress" fits a 320px phone */
/* thirteen letters: about 12 px of width per px of size, so this fits 390 px phones and the 1180 px column */
.hero--fx h1.display[data-text="PsyPhaseThree"] { font-size: clamp(20px, 6.6vw, 84px); }
/* "PsyVOX" is wider than "PsyOp": at the 52px minimum it overruns a 360px phone */
.hero h1.display[data-text="PsyVOX"] { font-size: clamp(40px, 11vw, 160px); }
.hero--fx .fxhero { margin-top: 26px; }
.fxhero .hero__lede { max-width: 24ch; margin-bottom: 18px; }
.panel--fx { margin: 0; }
.panel--fx .panel__frame img { width: 100%; }

/* ---------- product cards ---------- */
.cards2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.cards4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
@media (max-width: 1020px) { .cards4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .cards2 { grid-template-columns: 1fr; } }
@media (max-width: 520px)  { .cards4 { grid-template-columns: 1fr; } }
.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--deck-2), rgba(9,12,20,.7));
  box-shadow: inset 0 1px 0 rgba(198,202,212,.07), 0 30px 60px -34px rgba(0,0,0,.9);
  overflow: hidden;
  color: inherit;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.pcard::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-hi), transparent); opacity: .75; z-index: 1; }
.pcard:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent-hi) 50%, transparent); box-shadow: 0 0 44px -12px color-mix(in srgb, var(--accent-hi) 45%, transparent); }
/* Panels differ in shape (PsyOp 1.82:1, PsyVOX 1.64:1, PsyQ nearly 3:1). Each fits
   whole inside the card's 16:9 window: the image is laid over the window instead of
   sitting in it, so it can never size the window itself, which browsers resolve
   differently (clipped in some, spilling in others). */
.pcard__img { position: relative; display: block; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; background: linear-gradient(180deg, #0b0e15, var(--deck)); border-bottom: 1px solid var(--rule); }
@supports not (aspect-ratio: 16 / 9) { .pcard__img { height: 0; padding-top: 56.25%; } }
.pcard__img img { position: absolute; top: 10px; left: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: contain; filter: saturate(1.08) contrast(1.04); }
.pcard__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
/* a narrow card puts the price on its own line rather than past the edge */
.pcard__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 10px; }
.pcard__price { font-family: "Syne", sans-serif; font-weight: 800; font-size: 20px; color: #e6ebf6; }
.pcard__price--free { color: var(--accent-hi); }
.pcard__name { font-family: "Syne", sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -.02em; color: #eef4ff; margin-top: 4px; }
.pcard--wide .pcard__name { font-size: 28px; }
.pcard__line { font-size: 14px; line-height: 1.55; color: var(--steel-d); }
.pcard--wide .pcard__line { font-size: 15px; }
.pcard__go {
  margin-top: auto; padding-top: 12px;
  font-family: "Azeret Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-hi);
}
.pcard__go::after { content: " \2192"; }

/* ---------- feature: copy beside a display ---------- */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 52px; align-items: center; }
.feature--flip { align-items: start; }
@media (max-width: 940px) { .feature { grid-template-columns: 1fr; gap: 32px; } }
.ticks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 9px; }
.ticks li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; font-size: 15px; color: var(--steel-d); }
.ticks li::before { content: ""; width: 6px; height: 6px; margin-top: 9px; border-radius: 1px; background: var(--accent-hi); box-shadow: 0 0 8px color-mix(in srgb, var(--accent-hi) 60%, transparent); }

/* the band display: an instrument screen */
.scope { margin: 0; border: 1px solid var(--rule); border-radius: 8px; background: linear-gradient(180deg, var(--deck-2), #080a11); box-shadow: inset 0 1px 0 rgba(198,202,212,.07), 0 30px 60px -30px rgba(0,0,0,.9); overflow: hidden; }
.scope__head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--rule); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.scope .legend--beam { color: var(--accent-hi); }
.bands { display: block; width: 100%; height: auto; aspect-ratio: 560 / 300; background: #05080b; }
.scope__img { display: block; width: 100%; height: auto; }
.scope__cap { display: block; padding: 9px 14px; border-top: 1px solid var(--rule); font-size: 10px; }

/* ---------- tenets ---------- */
.tenets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 860px) { .tenets { grid-template-columns: 1fr; } }
.tenet { padding: 6px 24px 10px; border-left: 1px solid var(--rule); }
.tenet__k { display: block; font-family: "Syne", sans-serif; font-weight: 800; font-size: 40px; letter-spacing: -.03em; line-height: 1; color: var(--beam); text-shadow: 0 0 30px rgba(111,168,255,.35); margin-bottom: 16px; }
.tenet h3 { font-family: "Syne", sans-serif; font-weight: 700; font-size: 19px; color: #e6ebf6; margin-bottom: 8px; }
.tenet p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--steel-d); }

/* ---------- offers laid out in a row ---------- */
.offer--row { flex-direction: row; justify-content: space-between; align-items: center; gap: 40px; padding: 34px; }
.offer--row h3 { font-size: clamp(26px, 3.4vw, 36px); margin: 8px 0 10px; color: #eef4ff; }
.offer--row .offer__note { max-width: 56ch; margin-bottom: 18px; }
.offer__side { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; flex: none; }
@media (max-width: 860px) { .offer--row { flex-direction: column; align-items: stretch; } }
.offer__note a, .buybar a:not(.btn), .faq a, .prose a { color: var(--accent-hi); border-bottom: 1px solid color-mix(in srgb, var(--accent-hi) 35%, transparent); }

/* ---------- product page pieces ---------- */
.stack { display: grid; gap: 14px; }
.sec .speclist { margin-top: 28px; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 800px) { .duo { grid-template-columns: 1fr; } }
.card--big { padding: 26px 26px 24px; display: flex; flex-direction: column; }
.card--big h4 { font-size: 21px; margin-bottom: 10px; color: #e6ebf6; }
.card--big p { font-size: 15px; }
.card .card__foot { margin-top: auto; padding-top: 18px; }
.prod .card:hover { border-color: color-mix(in srgb, var(--accent-hi) 45%, transparent); box-shadow: 0 0 34px -8px color-mix(in srgb, var(--accent-hi) 30%, transparent); }
.prod .stage__n { color: var(--accent-hi); }

.modules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.modules li {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--anodise);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(18,22,34,.9), rgba(9,12,20,.55));
}
.modules b { font-family: "Syne", sans-serif; font-size: 15px; color: var(--steel); }
.modules span { font-size: 13px; color: var(--steel-f); }

.flow { list-style: none; margin: 0; padding: 0; display: grid; }
.flow li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.flow li:first-child { padding-top: 0; }
.flow li:last-child { border-bottom: none; }
.flow__n { font-family: "Azeret Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .1em; color: var(--accent-hi); padding-top: 3px; }
.flow h3 { font-family: "Syne", sans-serif; font-weight: 700; font-size: 17px; color: #e6ebf6; margin-bottom: 4px; }
.flow p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--steel-d); }

.sec--tight { padding: 40px 0 56px; }
.sec--first { padding-top: 64px; }
.buybar {
  display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap;
  padding: 30px 32px;
  border: 1px solid color-mix(in srgb, var(--accent-hi) 40%, var(--rule));
  border-radius: 8px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 22%, var(--deck-2)), var(--deck) 60%);
  box-shadow: 0 0 52px -16px color-mix(in srgb, var(--accent) 70%, transparent);
}
.buybar h3 { font-family: "Syne", sans-serif; font-weight: 700; font-size: clamp(22px, 2.8vw, 30px); letter-spacing: -.02em; color: #eef4ff; margin: 6px 0 8px; }
.buybar .legend--beam { color: var(--accent-hi); }
.buybar .offer__note { max-width: 52ch; }
.buybar__act { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.buybar__price { font-family: "Syne", sans-serif; font-weight: 800; font-size: 40px; letter-spacing: -.03em; color: #eef4ff; margin-right: 8px; }
.buybar__price--free { color: var(--accent-hi); }

/* "more from the bench": injected by build.py at <!-- @more --> */
.more { padding: 20px 0 30px; }
.more__in { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.more .chip { color: var(--steel-d); }
.more .chip i { background: var(--accent-hi); box-shadow: 0 0 8px var(--accent-hi); }

/* on a product page, or with btn--accent, the primary button wears the product's colour */
.prod .btn--go, .btn--go.btn--accent {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, #fff 16%) 0%, var(--accent) 55%, color-mix(in srgb, var(--accent) 72%, #000) 100%);
  border-color: color-mix(in srgb, var(--accent-hi) 60%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 26px color-mix(in srgb, var(--accent) 45%, transparent);
}
.prod .btn--go:hover, .btn--go.btn--accent:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 38px color-mix(in srgb, var(--accent) 70%, transparent); }

/* PsyVOX's signal flow: two inputs into the instrument, one voice out */
.io {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0;
  margin-bottom: 26px;
}
.io__in { display: grid; gap: 10px; }
.io__port {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 16px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(18,22,34,.9), rgba(9,12,20,.6));
}
.io__port b { font-family: "Syne", sans-serif; font-size: 15px; color: var(--steel); }
.io__out { border-color: color-mix(in srgb, var(--accent-hi) 50%, var(--rule)); }
.io__core { position: relative; padding: 0 42px; }
.io__core .tag { font-size: 13px; padding: 10px 18px; }
/* the patch cables: two lines converging into the tag, one leaving it */
.io__core::before, .io__core::after {
  content: ""; position: absolute; top: 50%; height: 1px; width: 42px;
  background: linear-gradient(90deg, var(--rule), var(--accent-hi));
}
.io__core::before { left: 0; }
.io__core::after { right: 0; background: linear-gradient(90deg, var(--accent-hi), var(--rule)); }
@media (max-width: 760px) {
  .io { grid-template-columns: 1fr; gap: 12px; justify-items: stretch; }
  .io__core { padding: 0; justify-self: center; }
  .io__core::before, .io__core::after { display: none; }
}

/* DAW routing guides, one collapsible panel each */
.daws { display: grid; gap: 10px; max-width: 900px; }
.daw { border: 1px solid var(--rule); border-radius: 6px; background: rgba(12,15,24,.7); }
.daw[open] { border-color: color-mix(in srgb, var(--accent-hi) 40%, var(--rule)); }
.daw summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: baseline; gap: 14px;
  padding: 14px 18px;
}
.daw summary::-webkit-details-marker { display: none; }
.daw summary b { font-family: "Syne", sans-serif; font-size: 17px; color: var(--steel); }
.daw summary::after { content: "+"; margin-left: auto; font-family: "Azeret Mono", monospace; color: var(--accent-hi); }
.daw[open] summary::after { content: "\2212"; }
.daw ol { margin: 0; padding: 0 18px 16px 40px; display: grid; gap: 8px; }
.daw li { font-size: 14.5px; line-height: 1.55; color: var(--steel-d); padding-left: 4px; }
.daw li::marker { font-family: "Azeret Mono", monospace; font-size: 12px; color: var(--accent-hi); }
.daw strong, .faq strong { color: var(--steel); font-weight: 600; }

/* PsyVOX's voice list: name and character, two columns */
.voices { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
@media (max-width: 460px) { .voices { grid-template-columns: 1fr; } }
.voices li { display: flex; flex-direction: column; padding-left: 12px; border-left: 2px solid color-mix(in srgb, var(--accent-hi) 55%, transparent); }
.voices b { font-family: "Syne", sans-serif; font-size: 14.5px; color: var(--steel); }
.voices span { font-size: 13px; color: var(--steel-f); }
.card--big strong { color: var(--steel); font-weight: 600; }

/* ---------- a download: the button, and the facts to check it by ---------- */
.dlbox {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 32px;
  padding: 30px 32px;
  border: 1px solid color-mix(in srgb, var(--accent-hi) 40%, var(--rule));
  border-radius: 8px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 22%, var(--deck-2)), var(--deck) 60%);
  box-shadow: 0 0 52px -16px color-mix(in srgb, var(--accent) 70%, transparent);
}
@media (max-width: 860px) { .dlbox { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; } }
.dlbox h3 { font-family: "Syne", sans-serif; font-weight: 700; font-size: clamp(22px, 2.8vw, 30px); letter-spacing: -.02em; color: #eef4ff; margin: 6px 0 8px; }
.dlbox .legend--beam { color: var(--accent-hi); }
.dlbox .btnrow { margin-top: 20px; }
.dlbox__facts { margin: 0; display: grid; align-content: center; border-top: 1px solid var(--rule); }
.dlbox__facts div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.dlbox__facts dt { font-family: "Azeret Mono", monospace; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--steel-f); padding-top: 2px; }
.dlbox__facts dd { margin: 0; font-size: 14px; color: var(--steel-d); min-width: 0; }
/* file names and hashes are one long word: they must break anywhere. word-break
   covers the browsers that lack overflow-wrap: anywhere, and every column that holds
   one is minmax(0, ...), so the string can never widen its column past the screen */
.dlbox > *, .dlbox__facts dd { min-width: 0; }
.dlbox__facts code, .note code { font-size: 12.5px; overflow-wrap: anywhere; word-break: break-all; }
.hash { letter-spacing: .02em; line-height: 1.6; user-select: all; }
@media (max-width: 460px) { .dlbox__facts div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.notes2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
@media (max-width: 900px) { .notes2 { grid-template-columns: minmax(0, 1fr); } }
.notes2 .note { align-content: start; }
.notes2--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 26px; }
@media (max-width: 900px) { .notes2--pair { grid-template-columns: minmax(0, 1fr); } }
.note p a, .dl__small a { color: var(--accent-hi); border-bottom: 1px solid color-mix(in srgb, var(--accent-hi) 35%, transparent); }
.dl__small { margin-top: 22px; font-size: 14.5px; }

/* ---------- store ---------- */
.price h3 a { color: inherit; }
.price h3 a:hover { color: var(--accent); }
.price--soon { border-style: dashed; }
.price__n--soon { color: var(--steel-f); }
.dl { display: grid; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.dl__row {
  display: grid;
  grid-template-columns: 8px minmax(120px, auto) 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
  color: var(--steel);
  transition: background .2s var(--ease);
}
.dl__row:last-child { border-bottom: none; }
.dl__row:hover { background: rgba(111,168,255,.05); }
.dl__row i { width: 7px; height: 7px; border-radius: 2px; background: var(--accent-hi); box-shadow: 0 0 8px var(--accent-hi); }
.dl__row b { font-family: "Syne", sans-serif; font-size: 16px; }
.dl__row span { font-size: 14px; color: var(--steel-d); }
.dl__row em { font-style: normal; font-family: "Azeret Mono", monospace; font-size: 11px; letter-spacing: .08em; color: var(--steel-f); }
.dl__row em::after { content: "  \2193"; color: var(--beam); }
@media (max-width: 640px) { .dl__row { grid-template-columns: 8px 1fr; } .dl__row span, .dl__row em { grid-column: 2; } }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.steps li { padding: 22px 20px; border: 1px solid var(--rule); border-radius: 6px; background: linear-gradient(180deg, rgba(18,22,34,.85), rgba(9,12,20,.5)); }
.steps__n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(111,168,255,.5); font-family: "Azeret Mono", monospace; font-size: 12px; color: var(--beam); margin-bottom: 14px; }
.steps h3 { font-family: "Syne", sans-serif; font-weight: 700; font-size: 16px; color: #e6ebf6; margin-bottom: 6px; }
.steps p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--steel-d); }

.faq { display: grid; border-top: 1px solid var(--rule); max-width: 820px; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; font-family: "Syne", sans-serif; font-weight: 600; font-size: 17px; color: var(--steel); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: "Azeret Mono", monospace; color: var(--beam); }
.faq details[open] summary::after { content: "\2212"; }
.faq p { margin: -4px 0 18px; max-width: 64ch; font-size: 15px; color: var(--steel-d); }

/* merch placeholders drawn from the panel's own vocabulary */
.merch__tile b { font-family: "Syne", sans-serif; font-size: 16px; color: var(--steel); }
.merch__img { border-style: solid; border-color: var(--rule); }
.merch__art--tee { font-family: "Azeret Mono", monospace; font-size: 11px; letter-spacing: .2em; color: #dce7ff; padding: 26px 18px; border-radius: 6px 6px 18px 18px; background: linear-gradient(180deg, #1b2032, #0e111a); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); text-align: center; }
.merch__art--mat { width: 78%; aspect-ratio: 9 / 4; border-radius: 6px; background: linear-gradient(90deg, #4a2c20 0 5%, transparent 5% 95%, #4a2c20 95%), repeating-linear-gradient(90deg, #9aa0ab 0 2px, #b7bcc6 2px 5px); box-shadow: 0 10px 24px -8px rgba(0,0,0,.8), inset 0 6px 0 var(--anodise); }
.merch__art--bars { display: grid; gap: 6px; width: 64%; }
.merch__art--bars i { height: 12px; border-radius: 3px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 80%, #fff 18%), var(--c) 50%, color-mix(in srgb, var(--c) 70%, #000)); }
.merch__art--pin { width: 70px; height: 70px; display: grid; place-items: center; border-radius: 50%; font-family: "Syne", sans-serif; font-weight: 800; font-size: 36px; color: var(--anodise); background: radial-gradient(circle at 35% 30%, #d8dde6, #7d8494); box-shadow: 0 8px 20px -6px rgba(0,0,0,.8), inset 0 0 0 4px #5c6478; }

/* ---------- support ---------- */
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.toc a { padding: 7px 13px; border: 1px solid var(--rule); border-radius: 999px; font-family: "Azeret Mono", monospace; font-size: 11px; letter-spacing: .08em; color: var(--steel-d); }
.toc a:hover { border-color: rgba(111,168,255,.5); color: var(--steel); }
.note { display: grid; gap: 12px; padding: 22px 24px; border: 1px solid var(--rule); border-radius: 8px; background: rgba(12,15,24,.7); }
.note p { margin: 0; font-size: 14.5px; color: var(--steel-d); max-width: 64ch; }
.note--key { border-color: rgba(224,162,74,.55); background: linear-gradient(120deg, rgba(107,68,51,.28), rgba(12,15,24,.8) 60%); }
.note--key .legend--beam { color: var(--amber); }
.note--key strong { color: var(--steel); }
#terms .note { margin-bottom: 14px; }
.note table { min-width: 0; }
td code { word-break: break-all; }

/* ---------- FX switched off: a clean, static page (D-014) ---------- */
/* the machine cannot keep up (site.js, D-033): the endless loops stop where they are */
.is-still .panel__glow, .is-still .sec__head::after, .is-still .offer--lead::before,
.is-still .status i, .is-still .pcard__status i { animation-play-state: paused; }
.is-calm #rain, .is-calm .crt, .is-calm .plasma, .is-calm .deckgrid { display: none; }
.is-calm .glitch::before, .is-calm .glitch::after { display: none; }
.is-calm .page::before { background: transparent; }
.is-calm *, .is-calm *::before, .is-calm *::after { animation: none !important; }
.is-calm .headline em, .is-calm .sec__head h2 { text-shadow: none; }

/* ================================================================== *
   Cart, checkout, forms and the newsletter (site D-020)
 * ================================================================== */
.navcart { display: inline-flex; align-items: center; gap: 7px; }
.navcart__n {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px;
  background: var(--anodise); color: #eaf1ff;
  font-size: 10px; letter-spacing: 0;
  box-shadow: 0 0 10px rgba(51,72,154,.6);
}
.navcart__n[hidden] { display: none; }

.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 50;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 16px;
  border: 1px solid rgba(111,168,255,.45); border-radius: 8px;
  background: rgba(9,12,20,.97);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.95);
  font-size: 14px; color: var(--steel);
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.toast.is-on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.toast a { font-family: "Azeret Mono", monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--beam); }

/* ---- form controls, in the panel's own finish ---- */
.field { display: grid; gap: 6px; margin: 0 0 14px; border: 0; padding: 0; min-width: 0; }
.field > label, .field > legend, .checkout label {
  font-family: "Azeret Mono", monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--steel-d); padding: 0; margin-bottom: 2px;
}
input[type=email], input[type=text], input:not([type]), input[inputmode], textarea, input[type=file] {
  width: 100%; max-width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--rule); border-radius: 5px;
  background: #080b12; color: var(--steel);
  font: 15px/1.4 "Archivo", system-ui, sans-serif;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6);
}
input[type=file] { padding: 9px; font-size: 13px; color: var(--steel-d); }
input:focus, textarea:focus { outline: none; border-color: rgba(111,168,255,.7); box-shadow: 0 0 0 3px rgba(111,168,255,.15); }
input:disabled, textarea:disabled, button:disabled { opacity: .5; cursor: not-allowed; }
.check { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0; font-size: 14.5px; color: var(--steel-d); text-transform: none; letter-spacing: 0; font-family: "Archivo", sans-serif; }
.check input { margin-top: 3px; accent-color: var(--anodise); }
.check a, .news__note a { color: var(--beam); }
.linkbtn { border: 0; background: none; padding: 0; color: var(--beam); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ---- the cart page ---- */
.cart { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 860px) { .cart { grid-template-columns: 1fr; } }
.cart__lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.cart__lines:empty { display: none; }
.cline { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.cline__name { font-family: "Syne", sans-serif; font-weight: 700; font-size: 18px; color: #e6ebf6; }
.cline__price { font-family: "Syne", sans-serif; font-weight: 700; font-size: 17px; color: var(--steel); font-variant-numeric: tabular-nums; }
.cline__price s { color: var(--steel-f); font-weight: 400; font-size: 14px; margin-right: 4px; }
.cline--off .cline__price { font-family: "Azeret Mono", monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--steel-f); font-weight: 400; }
.cart__empty { display: grid; gap: 14px; justify-items: start; }
.cart__empty[hidden] { display: none; }
.cart__suggest { margin-top: 18px; padding: 16px 18px; border: 1px dashed rgba(111,168,255,.4); border-radius: 6px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.cart__suggest[hidden] { display: none; }
.cart__suggest p { margin: 0; font-size: 14.5px; color: var(--steel-d); max-width: 42ch; }
.cart__suggest b { color: var(--steel); }
.cart__paid { display: grid; gap: 12px; justify-items: start; margin-bottom: 28px; padding: 22px 24px; border: 1px solid rgba(111,168,255,.45); border-radius: 8px; background: linear-gradient(120deg, rgba(51,72,154,.25), var(--deck) 60%); }
.cart__paid[hidden] { display: none; }
.cart__paid h2 { font-family: "Syne", sans-serif; font-size: 30px; color: #eef4ff; }

.checkout { position: sticky; top: 86px; display: grid; gap: 14px; padding: 22px 22px 20px; border: 1px solid var(--rule); border-radius: 8px; background: linear-gradient(180deg, var(--deck-2), rgba(9,12,20,.7)); }
.checkout__total { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.checkout__total b { font-family: "Syne", sans-serif; font-weight: 800; font-size: 32px; color: #eef4ff; font-variant-numeric: tabular-nums; }
.checkout form { display: grid; gap: 10px; }
.checkout form[hidden] { display: none; }
.checkout .btn { justify-content: center; }
.checkout__who { margin: 0; font-size: 14.5px; color: var(--steel-d); display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.checkout__who b { color: var(--steel); }
.checkout__hint { margin: 0; font-size: 13px; color: var(--steel-f); }
.checkout__msg { margin: 0; font-size: 14px; color: var(--acid); min-height: 1em; }
.checkout__msg:empty { display: none; }
.checkout__msg.is-bad { color: var(--amber); }
.checkout__closed { margin: 0; font-size: 14px; color: var(--amber); }
.checkout__closed[hidden] { display: none; }

/* ---- small support forms ---- */
.minform { max-width: 760px; display: grid; gap: 4px; margin-top: 4px; }
.minform__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 16px; }
select {
  width: 100%; max-width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--rule); border-radius: 5px;
  background: #080b12; color: var(--steel);
  font: 15px/1.4 "Archivo", system-ui, sans-serif;
}
select:focus { outline: none; border-color: rgba(111,168,255,.7); box-shadow: 0 0 0 3px rgba(111,168,255,.15); }

/* ---- the Residency form ---- */
.apply { max-width: 820px; display: grid; gap: 6px; }
.apply__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
@media (max-width: 640px) { .apply__grid { grid-template-columns: 1fr; } }
.apply fieldset.field { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.apply fieldset.field legend { width: 100%; margin-bottom: 6px; }

/* ---- the newsletter ---- */
.news { margin-top: 20px; display: grid; gap: 8px; max-width: 420px; }
.news__row { display: flex; gap: 8px; }
.news__row input[type=email] { flex: 1; min-width: 0; padding: 9px 11px; font-size: 14px; }
.news__row .btn { padding: 9px 14px; font-size: 11px; }
.news__note { margin: 0; font-size: 12.5px; color: var(--steel-f); }
.news--page { max-width: 560px; margin: 0; }
.news--page .check b { color: var(--steel); }

/* ---------- now playing: the site-wide player bar (site D-023) ---------- */
.dock {
  position: fixed;
  left: 22px; bottom: 22px;
  z-index: 36;
  width: min(560px, calc(100vw - 460px));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto 3px;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 16px 12px 12px;
  border: 1px solid rgba(111,168,255,.4);
  border-radius: 8px;
  background: rgba(9,12,20,.96);
  box-shadow: inset 0 1px 0 rgba(198,202,212,.07), 0 24px 48px -20px rgba(0,0,0,.95), 0 0 30px -12px rgba(51,72,154,.8);
}
.dock[hidden] { display: none; }
.dock__ctl { display: flex; gap: 6px; }
.dock__btn {
  width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--rule); border-radius: 50%;
  background: linear-gradient(180deg, #1a2030, #10131c);
  cursor: pointer;
}
.dock__btn:hover { border-color: rgba(75,227,224,.6); }
.dock__btn--stop { border-color: rgba(111,168,255,.6); background: linear-gradient(180deg, #4a63c6, var(--anodise-d)); }
.dock__ico { display: block; }
.dock__ico--stop { width: 10px; height: 10px; background: #eaf1ff; border-radius: 1px; }
.dock__ico--prev, .dock__ico--next { width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.dock__ico--next { border-left: 9px solid var(--steel); margin-left: 2px; box-shadow: 3px 0 0 -1px var(--steel); }
.dock__ico--prev { border-right: 9px solid var(--steel); margin-right: 2px; box-shadow: -3px 0 0 -1px var(--steel); }
.dock__meta { min-width: 0; display: grid; gap: 1px; }
.dock__line { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.dock__title { font-family: "Syne", sans-serif; font-size: 15px; color: #eef4ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock__tag {
  flex: none; padding: 0 6px; border-radius: 3px;
  border: 1px solid color-mix(in srgb, var(--accent-hi, #6fa8ff) 45%, transparent);
  font-family: "Azeret Mono", monospace; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-hi, #6fa8ff);
}
.dock__tag[hidden], .dock__pass[hidden] { display: none; }
.dock__pass { flex: none; font-family: "Azeret Mono", monospace; font-size: 10px; color: var(--beam); font-variant-numeric: tabular-nums; }
.dock__from { font-family: "Azeret Mono", monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--steel-f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock__from:hover { color: var(--beam); }
.dock__time { font-family: "Azeret Mono", monospace; font-size: 11.5px; color: var(--steel-d); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dock__bar { grid-column: 1 / -1; height: 3px; border-radius: 2px; background: var(--rule); overflow: hidden; }
.dock__bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--anodise), var(--acid)); }
/* room at the foot of the page so the bar never covers the footer's last line */
body.has-dock .foot { padding-bottom: 130px; }
@media (max-width: 900px) {
  .dock { left: 12px; right: 12px; bottom: 12px; width: auto; }
  body.has-dock .doc { bottom: 104px; }
}
@media (max-width: 480px) {
  .dock { grid-template-columns: auto minmax(0, 1fr); }
  .dock__time { display: none; }
}

/* a page change in flight: a thin line along the foot of the nav */
.nav { position: sticky; }
.is-loading .nav::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 40%;
  background: linear-gradient(90deg, transparent, var(--acid), transparent);
  animation: navload 0.9s linear infinite;
}
@keyframes navload { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* ---------- Dr. Psy ---------- */
/* A small console pinned bottom-right, under the glass. It is the one
   element allowed to talk to the visitor directly. */
.doc {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 35;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  max-width: min(380px, calc(100vw - 44px));
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.doc.is-hidden { transform: translateY(20px); opacity: 0; pointer-events: none; }
.doc__toggle {
  flex: none;
  width: 56px; height: 56px;
  border-radius: 8px;
  border: 1px solid rgba(111,168,255,.45);
  background: linear-gradient(180deg, #1b2236, #0d1019);
  box-shadow: inset 0 1px 0 rgba(198,202,212,.1), 0 0 28px -6px rgba(111,168,255,.5);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
}
.doc__glyph {
  font-family: "Syne", sans-serif;
  font-weight: 800;
  font-size: 30px;
  color: var(--beam);
  text-shadow: -1px 0 var(--ca-l), 1px 0 var(--ca-r), 0 0 18px rgba(111,168,255,.6);
}
.doc__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.doc__panel {
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: rgba(9,12,20,.9);
  box-shadow: inset 0 1px 0 rgba(198,202,212,.07), 0 24px 48px -24px rgba(0,0,0,.95);
  padding: 10px 14px 12px;
  min-width: 0;
}
.doc__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.doc__close {
  border: 0; background: none; padding: 0 2px;
  color: var(--steel-f); font-size: 18px; line-height: 1; cursor: pointer;
}
.doc__close:hover { color: var(--acid); }
.doc__line {
  margin: 0;
  font-family: "Azeret Mono", ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.55;
  color: var(--steel);
}
.doc__line.is-fresh { animation: docreveal .5s var(--ease); }
@keyframes docreveal {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
.doc.is-collapsed .doc__panel { display: none; }
@media (max-width: 700px) {
  .doc { right: 14px; bottom: 14px; }
  .doc:not(.is-open) .doc__panel { display: none; }     /* phone: avatar only until tapped */
}

/* ---------- motion off ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .001ms !important; }
  .btn:hover, .stage:hover { transform: none; }
  .doc__line.is-fresh { animation: none; }
}