/* DreamDeep - dreamdeepcr.com
   Design tokens taken from the Claude Design direction "B - long read":
   near-black #04050A, magenta #FF2D8F, cyan #00D8E4, amber #FFB023, violet #A77BFF,
   Saira (display, wide-tracked capitals), Karla (body), Space Mono (labels). */
:root {
  --bg: #04050A; --ink: #EDEDF2; --dim: rgba(237,237,242,.82); --faint: rgba(237,237,242,.72);   /* v1.0.15: body grey .82 is about 11.6:1 and small-print grey .72 about 9:1 on the page, both above WCAG AAA 7:1 (they were .62 at 6.8:1 and .55 at 5.5:1) */
  --magenta: #FF2D8F; --cyan: #00D8E4; --amber: #FFB023; --violet: #A77BFF; --blue: #4A9BFF;
  --line: rgba(255,255,255,.10); --card: rgba(255,255,255,.035);
  --display: 'Saira', sans-serif; --body: 'Karla', system-ui, sans-serif; --mono: 'Space Mono', monospace;
  --wrap: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-weight: 400; font-size: 17px; line-height: 1.65; }   /* v1.0.15: Regular weight (was Light) and no Mac thinning, so grey text on black stays legible */
a { color: var(--ink); text-decoration: none; } a:hover { color: var(--magenta); }
/* WCAG 1.4.1: a link inside a sentence must not be marked by colour alone */
p a:not(.btn), li a:not(.btn), figcaption a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
main { min-height: 70vh; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }

/* header / footer */
.top { display: flex; align-items: center; justify-content: space-between; padding: 22px 36px; position: sticky; top: 0; z-index: 20;
       background: rgba(4,5,10,.80); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }   /* v1.0.23: 15% more see-through (was .94), at Chris's request */
/* WCAG: the sticky header passes over bright content such as the plugin screenshot; a near-solid
   backdrop keeps its text above 4.5:1 wherever the page is scrolled (it was 1.9:1 with the old fade). */
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 300; letter-spacing: .22em; text-transform: uppercase; font-size: 14px; }
.top nav, .foot nav { display: flex; gap: 32px; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.top nav a, .foot nav a { color: var(--dim); } .top nav a:hover, .foot nav a:hover { color: var(--ink); }
.foot { padding: 80px 0 44px; border-top: 1px solid var(--line); margin-top: 120px; }   /* v1.0.19: four columns and the Join the list form (see "footer" below) */

/* type */
.eyebrow { max-width: none; font-family: var(--mono); font-size: 14px; letter-spacing: .28em; text-transform: uppercase; color: var(--cyan); margin: 0 0 18px; }
h1, h2, h3 { font-family: var(--display); font-weight: 200; letter-spacing: .12em; text-transform: uppercase; line-height: 1.02; margin: 0; }
h1 { font-size: clamp(56px, 9vw, 104px); text-shadow: 0 0 70px rgba(4,5,10,.9); }
h2 { font-size: clamp(30px, 4.6vw, 52px); margin-bottom: 26px; color: var(--magenta); }   /* v1.0.16: the big section headings are brand magenta, like the manual; h1 and smaller headings stay white */
h3 { font-size: 20px; letter-spacing: .14em; font-weight: 300; }
.lede { font-size: 21px; line-height: 1.55; color: var(--ink); font-weight: 300; }   /* the large intro paragraphs keep their Light weight; they are near-white and read well */
p { color: var(--dim); }   /* text runs the full content width, like the screenshots (Chris, 23 Sep) */
p strong { color: var(--ink); font-weight: 600; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }

/* hero */
/* v1.0.12: the space BELOW the title, text and buttons is 51% smaller than in v1.0.8 (30% twice), so the big
   screenshot starts close to the buttons. The space above is unchanged from v1.0.8. The two invisible spacers
   share the spare height 1 : 0.49, and the height is reduced by the same amount so the top stays where it was. */
.hero { position: relative; overflow: hidden; padding: 72px 0 26px; min-height: calc(62.58vh + 103px); display: flex; flex-direction: column; }
.hero::before { content: ""; flex: 1 1 0; }
.hero::after  { content: ""; flex: .49 1 0; }
.hero .wrap { width: 100%; }
.hero .bgv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; pointer-events: none; }
.hero .veil { position: absolute; inset: 0; background: linear-gradient(to right, rgba(4,5,10,.55), rgba(4,5,10,.1) 60%), linear-gradient(to bottom, rgba(4,5,10,0) 70%, var(--bg)); }   /* v1.0.8: light shading so the motion reaches every edge; darker only behind the words on the left and the fade into the page */
.hero .wrap { position: relative; }
.hero form, .actions form { display: contents; }   /* a Buy button posts straight to Stripe but sits in its button row like a link (v1.0.19: in every button row) */
[id] { scroll-margin-top: 96px; }   /* v1.0.19: every jump to a part of a page lands below the sticky header (was #trial and #music only) */

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
       padding: 16px 28px; border: 1px solid var(--ink); color: var(--ink); background: transparent; cursor: pointer; transition: all .2s; min-width: 220px; }
.btn:hover { background: var(--ink); color: var(--bg); }
.btn.primary { font-size: 18px; border-color: var(--magenta); color: var(--bg); background: var(--magenta); box-shadow: 0 0 40px rgba(255,45,143,.35); }
.btn.primary:hover { background: #ff58a6; border-color: #ff58a6; color: var(--bg); box-shadow: 0 0 56px rgba(255,45,143,.5); }
.btn.ghost { border-color: rgba(255,255,255,.28); color: var(--dim); } .btn.ghost:hover { border-color: var(--ink); color: var(--ink); background: transparent; }
.actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 40px; }
.actions .btn { width: 264px; min-width: 0; height: 58px; padding-top: 0; padding-bottom: 0; }   /* v1.0.17: every button in a row is the same width and height, whatever its label. v1.0.38: 264 px (was 240) so DOWNLOAD FOR WINDOWS fits on one line */

/* sections */
section { padding: 96px 0; border-top: 1px solid var(--line); }
section.flush { border-top: 0; padding-top: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card { background: var(--card); border: 1px solid var(--line); padding: 28px; border-radius: 6px; }
.card h3 { margin-bottom: 12px; } .card p { font-size: 15.5px; margin: 0; }
.glow { box-shadow: 0 0 0 1px rgba(255,45,143,.25), 0 0 60px rgba(255,45,143,.12); }
.shot.tall { width: 100%; max-width: 100%; margin: 0; }   /* v1.0.10: exactly the same column as the hero title, text and buttons - same left and right edges */
.fig { margin: 48px 0 0; }
.fig figcaption { margin-top: 16px; font-size: 15.5px; color: var(--dim); }
.shot { border-radius: 8px; border: 1px solid var(--line); box-shadow: 0 30px 90px rgba(0,0,0,.6), 0 0 80px rgba(0,216,228,.08); }
/* v1.0.9: product screenshots breathe a magenta brand glow, once every 4 seconds. The glow size (--gs)
   is set by a small script in _Layout.cshtml from each image's on-screen size, so a narrow strip
   gets a smaller glow than the big Instrument window. 40px is the fallback if the script has not run. */
.shot.breathe { --gs: 40px; border-color: rgba(255,45,143,.35); animation: dd-glow 4s ease-in-out infinite;
                position: relative; z-index: 1; }   /* v1.0.13: drawn above the hero, which otherwise covered the glow along the top edge. The glow is listed
                before the dark drop shadow so the shadow no longer paints over it above the image. */
@keyframes dd-glow {
  0%, 100% { box-shadow: 0 0 calc(var(--gs) * .5) rgba(255,45,143,.18), 0 30px 90px rgba(0,0,0,.6); }
  50%      { box-shadow: 0 0 var(--gs) calc(var(--gs) * .12) rgba(255,45,143,.6), 0 30px 90px rgba(0,0,0,.6); }
}
@media (prefers-reduced-motion: reduce) {
  .shot.breathe { animation: none; box-shadow: 0 0 calc(var(--gs) * .75) rgba(255,45,143,.32), 0 30px 90px rgba(0,0,0,.6); }
}

/* feature list */
.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 40px; margin-top: 40px; }
.feature { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; }
.feature .dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 9px; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }
.feature .dot.m { background: var(--magenta); box-shadow: 0 0 14px var(--magenta); }
.feature .dot.a { background: var(--amber); box-shadow: 0 0 14px var(--amber); }
.feature .dot.v { background: var(--violet); box-shadow: 0 0 14px var(--violet); }
.feature h3 { font-size: 15px; font-family: var(--body); font-weight: 600; letter-spacing: .02em; text-transform: none; margin-bottom: 4px; }
.feature p { font-size: 15.5px; margin: 0; }

/* engine catalogue */
.legend { display: flex; gap: 22px; flex-wrap: wrap; margin: 0 0 28px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 10px; background: var(--c); box-shadow: 0 0 10px var(--c); }
.engines { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 0; }
.engines li { border: 1px solid var(--line); border-left: 2px solid var(--c); padding: 14px 16px; background: var(--card); border-radius: 4px; }
.engines .n { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--faint); }
.engines .name { font-weight: 600; margin: 4px 0 4px; }
.engines .d { font-size: 15px; color: var(--dim); line-height: 1.5; }   /* v1.0.15: was 14px */

/* buy block */
.buy { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; }
.price { font-family: var(--display); font-weight: 200; font-size: 84px; letter-spacing: .04em; line-height: 1; }
.price small { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; color: var(--dim); margin-left: 12px; vertical-align: middle; }
.buycard { border: 1px solid rgba(255,45,143,.35); box-shadow: 0 0 80px rgba(255,45,143,.10); padding: 36px; border-radius: 8px; background: rgba(255,255,255,.03); }
.buycard .terms { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin: 14px 0 26px; }
.buycard form .btn { width: 100%; margin-bottom: 12px; }
.promo { font-size: 14px; color: var(--faint); margin-top: 10px; }
.launch { font-size: 18px; color: var(--dim); margin-top: 22px; }
.launch strong, .promo strong { font-family: inherit; color: var(--magenta); font-weight: 600; font-size: 1.12em; }   /* the after-launch price, pink to match the Buy button */
.sys { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px 32px; margin-top: 12px; }
.sys div { font-size: 15px; color: var(--dim); } .sys b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; }

/* success page */
.keybox { font-family: var(--mono); font-size: clamp(26px, 5vw, 44px); letter-spacing: .18em; text-align: center; padding: 32px; border: 1px solid rgba(0,216,228,.45); box-shadow: 0 0 80px rgba(0,216,228,.14); border-radius: 8px; margin: 36px 0; user-select: all; }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 28px 0; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); color: var(--dim); }
.steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--mono); color: var(--cyan); letter-spacing: .1em; }
.notice { border: 1px solid rgba(255,176,35,.4); padding: 20px 24px; border-radius: 6px; color: var(--ink); background: rgba(255,176,35,.06); }

/* responsive */
@media (max-width: 900px) {
  .grid2, .grid3, .buy, .features { grid-template-columns: 1fr; }
  .top { padding: 18px 20px; }
  .hero { padding: 56px 0 18px; min-height: calc(52.15vh + 130px); }
  section { padding: 64px 0; }
  .price { font-size: 64px; }
}
@media (max-width: 600px) {
  h1 { font-size: 8.5vw; }
  .actions .btn { width: 100%; }   /* v1.0.17: on a phone the stacked buttons all run the full width of the column */   /* NEURALDREAM fits the width of a phone instead of being cut off */
}


/* ============================================================================
   v1.0.19 - the wider site: menu and Plugins panel, phone menu, footer, Join the list,
   headline numbers, sound demo player, videos, section tabs, product cards, questions.
   Everything below uses the same colours, type and spacing as the pages above.
   ============================================================================ */
.skip { position: absolute; left: -9999px; top: 12px; z-index: 60; background: var(--ink); color: var(--bg); padding: 10px 16px; font-family: var(--mono); font-size: 12px; }
.skip:focus { left: 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* menu */
.top nav { align-items: center; }
.top nav a.nav-a { padding: 6px 0; border-bottom: 1px solid transparent; }
.top nav a.nav-a.on { color: var(--ink); border-bottom-color: var(--magenta); }
.top nav .join-btn { min-width: 0; padding: 11px 18px; font-size: 11px; letter-spacing: .2em; border-color: var(--magenta); color: var(--ink); }
.top nav .join-btn:hover { background: var(--magenta); color: var(--bg); }
.menu-btn { display: none; }
/* the Plugins panel hangs from the bottom of the header, right-aligned with the page edge */
.panel { position: absolute; top: 100%; right: 36px; width: min(900px, calc(100vw - 72px)); padding: 30px 32px;
         background: rgba(8,9,16,.98); border: 1px solid var(--line); border-top-color: rgba(255,45,143,.35); border-radius: 0 0 8px 8px;
         box-shadow: 0 40px 80px rgba(0,0,0,.6); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility .18s; }
.panel::before { content: ""; position: absolute; left: 0; right: 0; top: -44px; height: 44px; }   /* a bridge, so the panel stays open while the pointer moves down to it */
.has-panel:hover .panel, .has-panel:focus-within .panel { opacity: 1; visibility: visible; transform: none; }
.panel-grid { display: grid; grid-template-columns: 1fr 1fr 190px; gap: 32px; }
.panel-item { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: start; font-family: var(--body); font-size: 14.5px; line-height: 1.55; letter-spacing: 0; text-transform: none; color: var(--dim); }
.top nav .panel-item { color: var(--dim); }
.panel-item img, .panel-mark { width: 96px; height: 118px; object-fit: cover; object-position: top left; border-radius: 6px; border: 1px solid rgba(255,45,143,.35); }
.panel-mark { display: block; background: radial-gradient(circle at 30% 30%, rgba(0,216,228,.45), transparent 60%), radial-gradient(circle at 70% 75%, rgba(167,123,255,.5), transparent 60%), #0b0c16; border-color: rgba(0,216,228,.35); }
.panel-item b { display: block; font-family: var(--display); font-weight: 300; font-size: 16px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); margin-bottom: 6px; }
.panel-item em { display: block; font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--magenta); margin-top: 10px; }
.top nav .panel-item:hover b { color: var(--magenta); }
.panel-links { display: flex; flex-direction: column; gap: 14px; padding-left: 28px; border-left: 1px solid var(--line); }

/* footer */
.foot-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 56px; align-items: start; }
.foot h3 { color: var(--magenta); font-size: 22px; margin-bottom: 14px; }
.foot h4 { font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--cyan); margin: 6px 0 20px; }
.foot-col a { display: block; font-size: 16px; color: var(--dim); margin-bottom: 12px; }
.foot-col a:hover { color: var(--magenta); }
.foot-join p { font-size: 15.5px; margin: 0 0 22px; }
.foot-line { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 64px; padding-top: 28px;
             font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--faint); }
.foot-line::before { content: ""; position: absolute; top: 0; left: 28px; right: 28px; border-top: 1px solid var(--line); }   /* the rule runs exactly as wide as the text columns above it */
.foot-line nav { display: flex; gap: 32px; align-items: center; }
.foot-line nav span { color: var(--faint); }

/* Join the list form */
.join-row { display: flex; gap: 12px; }
.join-email { flex: 1; min-width: 0; height: 58px; padding: 0 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.28); color: var(--ink);
              font-family: var(--body); font-size: 16px; border-radius: 0; }
.join-email::placeholder { color: var(--faint); }
.join-email:focus { outline: none; border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(255,45,143,.25); }
.join .join-go { width: 150px; min-width: 0; height: 58px; padding: 0; font-size: 16px; }
.consent { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--faint); cursor: pointer; }
.consent input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--magenta); }
.consent a { color: var(--faint); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.join-band { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; border: 1px solid rgba(255,45,143,.35); box-shadow: 0 0 80px rgba(255,45,143,.10);
             background: rgba(255,255,255,.03); border-radius: 8px; padding: 48px; }
.join-band h2 { margin-bottom: 18px; }
.join-band p { margin: 0; }

/* the short hero used at the top of the Plugins, Music, About and Support pages: the same moving light, less height */
.hero.short { min-height: calc(34vh + 150px); }
.hero.short h1 { font-size: clamp(40px, 5.4vw, 64px); }
.hero.short + section.flush { padding-top: 64px; }

/* headline numbers */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 26px 16px 22px; text-align: center; }
.stat .n { display: block; font-family: var(--display); font-weight: 200; font-size: 56px; line-height: 1; letter-spacing: .04em; color: var(--magenta); }
.stat .l { display: block; margin-top: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }

/* sound demo player */
.player { border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: 28px 32px; margin-top: 36px; }
.player-head { display: grid; grid-template-columns: 64px 1fr auto; gap: 22px; align-items: center; }
.play { width: 64px; height: 64px; border-radius: 50%; border: 0; background: var(--magenta); cursor: pointer; display: grid; place-items: center;
        box-shadow: 0 0 36px rgba(255,45,143,.45); transition: box-shadow .2s, background .2s; }
.play:hover { background: #ff58a6; box-shadow: 0 0 52px rgba(255,45,143,.6); }
.play:focus-visible, .track:focus-visible, .wave:focus-visible, .yt:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.ico-play { width: 0; height: 0; border-left: 18px solid var(--bg); border-top: 11px solid transparent; border-bottom: 11px solid transparent; margin-left: 5px; }
.ico-pause { display: none; width: 18px; height: 22px; border-left: 6px solid var(--bg); border-right: 6px solid var(--bg); }
.player.playing .ico-play { display: none; } .player.playing .ico-pause { display: block; }
.player .pt { font-size: 22px; }
.player .ps { margin: 6px 0 0; font-size: 15.5px; }
.player-time { white-space: nowrap; }
/* v1.0.34: the volume control on the right of the player head. The slider fills magenta up to the level,
   like the played part of the waveform. The speaker uses the same grey as the time beside it. */
.player.has-vol .player-head { grid-template-columns: 64px 1fr auto auto; }
.player-vol { display: flex; align-items: center; gap: 10px; }
.player-vol[hidden] { display: none; }
.vol-btn { width: 36px; height: 36px; padding: 6px; border: 0; border-radius: 50%; background: none; color: var(--dim); cursor: pointer; display: grid; place-items: center; }
.vol-btn:hover { color: var(--ink); }
.vol-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vol-btn .spk { fill: currentColor; }
.vol-btn .x { display: none; }
.player-vol.quiet .w2, .player-vol.silent .w1, .player-vol.silent .w2 { display: none; }
.player-vol.silent .x { display: inline; }
.vol { -webkit-appearance: none; appearance: none; width: 120px; height: 20px; margin: 0; background: transparent; cursor: pointer; --p: 75%; }
.vol::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--magenta) var(--p), rgba(237,237,242,.32) var(--p)); }
.vol::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--magenta) var(--p), rgba(237,237,242,.32) var(--p)); }
.vol::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; border: 0; background: var(--ink); }
.vol::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; border: 0; background: var(--ink); }
.vol-btn:focus-visible, .vol:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.wave { position: relative; height: 104px; margin-top: 24px; cursor: pointer; touch-action: none; }
.wave canvas { display: block; width: 100%; height: 100%; }
/* v1.0.36: the spectrum waterfall and the spectrogram bar. They show only once the script has checked the browser
   can draw them (the player then carries the class "fancy"); otherwise the player is the plain one above.
   A thin line separates the two pictures, with the same space above and below it. */
.scope { position: relative; margin-top: 26px; height: clamp(190px, 25vw, 290px); border-radius: 6px; background: #020308; border: 1px solid rgba(255,255,255,.06); overflow: hidden; }
.scope[hidden], .scope-rule[hidden], .hover-t[hidden], .scope-note[hidden] { display: none; }
.scope canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scope .hud { position: absolute; top: 12px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); pointer-events: none; }
.scope .hud.l { left: 16px; }
.scope-note { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--faint); pointer-events: none; }
.scope-rule { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
.player.fancy .wave { height: 96px; margin-top: 0; border-radius: 4px; overflow: hidden; }
.hover-t { position: absolute; top: 6px; transform: translateX(-50%); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--ink); background: rgba(4,5,10,.82); padding: 2px 6px; border-radius: 3px; pointer-events: none; }
.tracks { list-style: none; padding: 0; margin: 24px 0 0; border-top: 1px solid var(--line); }
.track { width: 100%; display: grid; grid-template-columns: 44px 1fr auto 56px; gap: 18px; align-items: baseline; padding: 15px 0; background: none; border: 0;
         border-bottom: 1px solid var(--line); color: var(--dim); font-family: var(--body); font-size: 16px; text-align: left; cursor: pointer; }
.track .tn { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--cyan); }
.track .tt { color: var(--ink); font-weight: 600; }
.track .ts { color: var(--faint); font-size: 14.5px; }
.track .td { font-family: var(--mono); font-size: 12px; color: var(--faint); text-align: right; }
.track:hover .tt, .track.on .tt { color: var(--magenta); }

/* videos */
.videos { margin-top: 36px; }
.video { margin: 0; }
.video video { object-fit: cover; }   /* a video that is not exactly 16:9 fills the frame instead of showing thin black bars */
.video video, .yt, .yt-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; border: 1px solid rgba(255,45,143,.35); background: #000; box-shadow: 0 30px 90px rgba(0,0,0,.6); }
.yt { position: relative; padding: 0; cursor: pointer; background-size: cover; background-position: center; }
.yt-play { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; background: var(--magenta); box-shadow: 0 0 50px rgba(255,45,143,.55); }
.yt-play::after { content: ""; position: absolute; left: 34px; top: 29px; border-left: 26px solid var(--bg); border-top: 15px solid transparent; border-bottom: 15px solid transparent; }
.video figcaption { margin-top: 16px; font-size: 15.5px; color: var(--dim); }
.video figcaption b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; }

/* NeuralDream section tabs: stay under the menu while the page scrolls */
.tabs { position: sticky; top: var(--head, 86px); z-index: 15; background: rgba(4,5,10,.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
        border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tabs .wrap { display: flex; align-items: center; gap: 30px; height: 54px; overflow-x: auto; scrollbar-width: none; }
.tabs .wrap::-webkit-scrollbar { display: none; }
.tabs a { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); white-space: nowrap; padding: 17px 0 15px; border-bottom: 2px solid transparent; }
.tabs a:hover { color: var(--ink); }
.tabs a.on { color: var(--ink); border-bottom-color: var(--magenta); }
.tabs a.tab-buy { margin-left: auto; color: var(--magenta); }
.tabbed [id] { scroll-margin-top: 150px; }

/* product cards (Plugins page and Home) */
.pcards { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 40px; }
.pcard { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.pcard.lead { border-color: rgba(255,45,143,.35); box-shadow: 0 0 80px rgba(255,45,143,.10); }
.pcard-img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border-bottom: 1px solid var(--line); }
.pcard-art { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 10; border-bottom: 1px solid var(--line);
             background: radial-gradient(circle at 28% 30%, rgba(0,216,228,.35), transparent 55%), radial-gradient(circle at 72% 72%, rgba(167,123,255,.42), transparent 55%), #080912; }
.pcard-art span { font-family: var(--display); font-weight: 200; font-size: clamp(28px, 3.4vw, 44px); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); text-shadow: 0 0 40px rgba(0,216,228,.6); }
.pcard-body { display: flex; flex-direction: column; flex: 1; padding: 30px 32px 32px; }
.pcard-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.pcard h3 { font-size: 24px; }
.pcard .kind { white-space: nowrap; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--cyan); text-align: right; }
.pcard p { margin: 16px 0 0; font-size: 16px; }
.pcard-foot { margin-top: auto; padding-top: 26px; }
.pcard .pprice { font-family: var(--display); font-weight: 200; font-size: 44px; line-height: 1; letter-spacing: .04em; }
.pcard .pprice small { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--dim); margin-left: 10px; vertical-align: middle; text-transform: uppercase; }
.pcard .actions { margin-top: 22px; }
.pcard .actions .btn { width: calc(50% - 8px); }

/* questions and answers */
.faq { border-top: 1px solid var(--line); margin-top: 36px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; font-size: 18px; font-weight: 600; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--display); font-weight: 200; font-size: 30px; line-height: 1; color: var(--magenta); transition: transform .2s; flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--magenta); }
.faq summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.faq details p { margin: 0 0 24px; max-width: 900px; }

/* support topics and other card rows */
.topics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.topics a.card { display: block; transition: border-color .2s, box-shadow .2s; }
.topics a.card:hover { border-color: rgba(255,45,143,.45); box-shadow: 0 0 40px rgba(255,45,143,.12); color: var(--ink); }
.topics a.card h3 { font-size: 17px; }
.topic { padding-top: 12px; }
.topic + .topic { margin-top: 48px; }
.topic h3 { margin-bottom: 16px; }
.topic > p:first-child { margin-top: 0; }   /* v1.0.44: a topic that starts with words rather than a sub-heading sits the same distance below the big heading */
.release { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
.release + .release { margin-top: 72px; }
.release .status { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--magenta); margin: 0 0 18px; }
.release h3 { font-size: clamp(24px, 3vw, 34px); margin-bottom: 8px; }
.release .by { font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); margin: 0 0 24px; }
.cta-band { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.cta-band h2 { margin-bottom: 14px; }
.cta-band p { margin: 0; }
.cta-band .actions { margin-top: 0; flex-wrap: nowrap; }

@media (max-width: 1100px) {
  .top nav { gap: 22px; }
  .panel-grid { grid-template-columns: 1fr 1fr; }
  .panel-links { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--line); gap: 28px; }
}
@media (max-width: 900px) {
  /* phone and small tablet: the menu folds behind the Menu button and opens as a full-height panel under the header */
  .menu-btn { display: inline-flex; align-items: center; gap: 12px; background: none; border: 1px solid rgba(255,255,255,.28); color: var(--ink); height: 40px; padding: 0 14px;
              font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
  .menu-btn .bars { width: 16px; height: 10px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); position: relative; }
  .menu-btn .bars::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; border-top: 1px solid var(--ink); }
  .top nav#site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - 76px); overflow-y: auto; flex-direction: column; align-items: stretch; gap: 0;
                      padding: 12px 20px 40px; background: var(--bg); border-top: 1px solid var(--line); font-size: 13px; }
  body.menu-open .top nav#site-nav { display: flex; }
  body.menu-open { overflow: hidden; }
  .top nav a.nav-a { display: block; padding: 20px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
  .top nav a.nav-a.on { border-bottom-color: var(--line); color: var(--magenta); }
  .panel { position: static; width: auto; padding: 4px 0 8px 0; background: none; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
  .panel::before { display: none; }
  .panel-grid { grid-template-columns: 1fr; gap: 0; }
  .panel-item { grid-template-columns: 1fr; padding: 14px 0 14px 18px; border-bottom: 1px solid var(--line); }
  .panel-item img, .panel-mark, .panel-item > span > span { display: none; }
  .panel-item b { font-size: 14px; margin: 0; }
  .panel-item em { margin-top: 4px; }
  .panel-links { display: none; }
  .top nav .join-btn { margin-top: 28px; height: 58px; font-size: 12px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  .foot-join { grid-column: 1 / -1; }
  .foot-line { flex-direction: column; align-items: flex-start; }
  .join-band { grid-template-columns: 1fr; gap: 32px; padding: 32px 24px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .tabs { top: var(--head, 76px); }
  .tabbed [id] { scroll-margin-top: 150px; }
  .pcards, .topics, .release { grid-template-columns: 1fr; }
  .hero + section.flush { padding-top: 40px; }   /* on a phone the hero is as tall as its words, so the first section needs its own space above it */
  .cta-band { flex-direction: column; align-items: flex-start; }
  .cta-band .actions { flex-wrap: wrap; }
  .player { padding: 22px 20px; }
  .track { grid-template-columns: 36px 1fr 48px; }
  .track .ts { display: none; }
}
@media (max-width: 600px) {
  .player-head { grid-template-columns: 56px 1fr; }
  .play { width: 56px; height: 56px; }
  .player-time { grid-column: 1 / -1; }
  /* v1.0.34: on a phone the time and the volume share the line under the title: time on the left, volume on the right */
  .player.has-vol .player-head { grid-template-columns: 56px 1fr auto; }
  .player.has-vol .player-head .player-now { grid-column: 2 / -1; }
  .player.has-vol .player-head .player-time { grid-column: 1 / 3; }
  .vol { width: 104px; }
  .wave { height: 80px; }
  .scope { height: 200px; }
  .stat .n { font-size: 44px; }
  .join-row { flex-direction: column; }
  .join-email { flex: none; width: 100%; }
  .join .join-go { width: 100%; }
  .pcard .actions .btn { width: 100%; }
  .foot-line nav { flex-wrap: wrap; gap: 18px 28px; }
}

/* v1.0.23: enlarged screenshots. Any product screenshot can be clicked to see it enlarged; the page behind
   is dimmed and stays where it was. The cross sits in the top right corner of the window at all times. */
img.zoomable { cursor: zoom-in; }
img.zoomable:focus-visible { outline: 2px solid var(--cyan); outline-offset: 6px; }
.zoom { position: fixed; inset: 0; z-index: 100; overflow: auto; background: rgba(4,5,10,.94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
        cursor: zoom-out; padding: 72px 24px 40px; }
.zoom[hidden] { display: none; }
.zoom-fig { margin: 0 auto; width: fit-content; max-width: 100%; }
.zoom-img { display: block; width: 100%; height: auto; margin: 0 auto; border-radius: 8px; border: 1px solid rgba(255,45,143,.45);
            box-shadow: 0 0 60px rgba(255,45,143,.25), 0 40px 120px rgba(0,0,0,.7); cursor: default; }
.zoom-cap { max-width: 900px; margin: 18px auto 0; font-size: 15.5px; line-height: 1.55; color: var(--dim); text-align: center; cursor: default; }
.zoom-x { position: fixed; top: 16px; right: 16px; z-index: 101; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35);
          background: rgba(4,5,10,.85); cursor: pointer; transition: background .2s, border-color .2s; }
.zoom-x span, .zoom-x span::after { position: absolute; left: 50%; top: 50%; width: 20px; height: 2px; margin: -1px 0 0 -10px; background: var(--ink); transform: rotate(45deg); content: ""; }
.zoom-x span::after { transform: rotate(90deg); margin: 0; left: 0; top: 0; }
.zoom-x:hover { background: var(--magenta); border-color: var(--magenta); }
.zoom-x:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
@media (max-width: 600px) { .zoom { padding: 68px 8px 32px; } .zoom-x { top: 10px; right: 10px; } }

/* v1.0.26 (critique of 28 Sep 2026) */
/* Words Chris marks in bold magenta in his copy: the same brand magenta as the section headings */
.hl { color: var(--magenta); font-weight: 700; }
/* The second and third opening paragraphs on the NeuralDream page: smaller than the first. This keeps the
   Buy and trial buttons close (Chris will judge the size on the live page) */
.lede-sub { font-size: 17px; line-height: 1.6; color: var(--dim); margin: 12px 0 0; }
/* The price the launch offer rises to: larger and magenta, as in Chris's copy */
.launch strong.rise, .promo strong.rise { font-size: 1.6em; line-height: 1; font-weight: 400; }
/* Product logos (Starling, Particles) on the cards that describe them. The logo sits at the card's top
   right, level with the card title at the top left and the same distance from the edge. The titles
   in a row of cards therefore still line up whether or not a card has a logo. */
.card img.mark { float: right; width: 64px; height: 64px; margin: -6px -6px 8px 16px; }
/* A web address written out in a sentence (such as the YouTube channel) may break at any point on a
   phone. It then never pushes the page wider than the screen */
p a[href^="http"] { overflow-wrap: anywhere; }

/* v1.0.27: the studio carousel on the About page. The frame keeps one fixed shape and every photograph is
   shown at the frame's full height, centred. A wide photograph fills the column and a narrower one sits in
   the middle of it. The photographs fade from one to the next without anything moving up or down. */
.carousel-stage { position: relative; width: 100%; aspect-ratio: 1.79 / 1; }   /* v1.0.40: a taller frame (was 2.33 : 1), so the photographs show about 30% bigger. Every photograph up to 1.79 : 1 fills the frame's height; the panoramic one (2.32 : 1) fills its width at the size it had before */
/* v1.0.40: the photograph's own box is exactly the size of the picture, so the magenta edge and glow always hug
   the picture itself. Each one starts at the top of the frame, level with the first white paragraph */
.carousel .slide { position: absolute; top: 0; left: 50%; width: auto; height: auto; max-width: 100%; max-height: 100%;
  transform: translateX(-50%); opacity: 0; visibility: hidden; transition: opacity 1.2s ease, visibility 0s linear 1.2s; }
.carousel .slide.on { opacity: 1; visibility: visible; transition: opacity 1.2s ease, visibility 0s; }
.carousel .slide:not(.on) { animation: none; }
.carousel-controls { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 28px; }
.carousel-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.04);
  color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.carousel-btn:hover, .carousel-btn:focus-visible { border-color: var(--magenta); color: var(--magenta); box-shadow: 0 0 24px rgba(255,45,143,.3); outline: none; }
.carousel-btn span { width: 10px; height: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; }
.carousel-btn.prev span { transform: translateX(2px) rotate(-135deg); }
.carousel-btn.next span { transform: translateX(-2px) rotate(45deg); }
.carousel-count { min-width: 8ch; text-align: center; color: var(--dim); font-size: 13px; letter-spacing: .2em; }
@media (prefers-reduced-motion: reduce) { .carousel .slide, .carousel .slide.on { transition: none; } }

/* v1.0.27: the bottom line of the footer. Middle dots separate Licence, Privacy, the copyright line and
   the website version, the same dots as in the small labels above the headings. The copyright sign is
   drawn at the same height as the capitals beside it (Space Mono draws it small) with a normal gap after
   it. The version sits at the very bottom right. On a phone the line breaks after Privacy. */
.foot-line nav { gap: 0; }
.foot-line nav .sep { margin: 0 1.1em; color: var(--faint); }
.foot-line nav .copy { color: var(--faint); white-space: nowrap; }
.foot-line nav .copy-sym { font-family: var(--body); font-size: 1.5em; line-height: 0; letter-spacing: 0; margin-right: .3em; position: relative; top: .08em; }
.foot-line nav .ver { color: var(--faint); text-transform: none; white-space: nowrap; }
@media (max-width: 720px) {
  .foot-line nav { flex-wrap: wrap; gap: 14px 0; }
  /* on a phone: Licence and Privacy on one line, the copyright and the version on the next */
  .foot-line nav .copy-sep { flex-basis: 100%; height: 0; margin: 0; overflow: hidden; }
}

/* v1.0.28: the About page story section. The small label and the heading take the first two rows of the left
   column; the text and the studio carousel share the third row. The top of the carousel therefore lines up
   with the top of the first white paragraph whatever the width of the screen. On a phone everything stacks. */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; align-items: start; }
.story > .eyebrow, .story > h2, .story-text { grid-column: 1; }
.story-media { grid-column: 2; grid-row: 3; margin-top: 9px; }   /* the tops of the letters sit 9px below the top of the paragraph (21px text, 1.55 line height). The photograph starts level with them */
/* in a grid the heading's space below and the paragraph's space above no longer overlap. The paragraph's own
   space above is therefore removed to keep the same gap under the heading as before */
.story-text > :first-child { margin-top: 0; }
@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; }
  .story-media { grid-column: 1; grid-row: auto; margin-top: 56px; }
}

/* v1.0.33: a demo or video without a description file shows no empty line where the description would be */
.player .ps:empty { display: none; }

/* ---------- v1.0.45: the albums ----------
   The Music page shows the covers in a grid (three across, two on a tablet, one on a phone). Each album page
   has the cover on the left and the title, details and buttons on the right, like the product sections, then
   Bandcamp's player (loaded only when pressed) and the numbered track list in two columns. */
.album-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 40px; margin-top: 48px; }
.album-card { display: block; color: var(--ink); }
.album-card img { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--line);
                  box-shadow: 0 30px 90px rgba(0,0,0,.6); transition: box-shadow .3s, border-color .3s; }
.album-card:hover img, .album-card:focus-visible img { border-color: rgba(255,45,143,.5); box-shadow: 0 0 36px 4px rgba(255,45,143,.45), 0 30px 90px rgba(0,0,0,.6); }
.album-card h3 { font-size: 20px; line-height: 1.25; margin: 22px 0 8px; }
.album-card:hover h3, .album-card:focus-visible h3 { color: var(--magenta); }
.album-meta { font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); margin: 0; }
.album { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: start; }   /* the cover a little narrower than the words beside it */
.album .actions .btn { padding-left: 12px; padding-right: 12px; }   /* BUY ON BANDCAMP fits on one line in the large magenta style too */
.album .shot { display: block; width: 100%; height: auto; }
.album h2 { margin-bottom: 14px; }
.album .album-meta { margin-bottom: 28px; }
.album-note { font-size: 15.5px; color: var(--faint); margin: 16px 0 0; }
.album-fine { font-size: 13.5px; color: var(--faint); margin: 6px 0 0; }   /* v1.0.48: the small line about Bandcamp's stream quality */
.bc-player { margin-top: 64px; padding: 28px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.bc-frame { display: block; width: 100%; height: 120px; border: 0; }
.tracks-head { margin: 64px 0 20px; }
.tracklist { list-style: none; counter-reset: t; margin: 0; padding: 0; columns: 2; column-gap: 56px; }
.tracklist li { counter-increment: t; display: grid; grid-template-columns: 44px 1fr; padding: 12px 0; border-top: 1px solid var(--line); break-inside: avoid; color: var(--ink); }
.tracklist li::before { content: counter(t, decimal-leading-zero); font-family: var(--mono); font-size: 13px; color: var(--cyan); padding-top: 3px; }
/* v1.0.47: each track name is a button that loads that track into Bandcamp's player above the list */
.tracklist .track { display: block; width: 100%; font: inherit; color: var(--ink); background: none; border: 0; padding: 0; margin: 0; text-align: left; cursor: pointer; }
.tracklist .track:hover, .tracklist .track:focus-visible { color: var(--magenta); }
.tracklist .track.on { color: var(--magenta); }
.album-credits { margin-top: 28px; }
@media (max-width: 900px) {
  .album-grid { grid-template-columns: repeat(2, 1fr); }
  .album { grid-template-columns: 1fr; gap: 40px; }
  .tracklist { columns: 1; }
}
@media (max-width: 600px) {
  .album-grid { grid-template-columns: 1fr; }
  .bc-player { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) { .album-card img { transition: none; } }

/* v1.0.46: the six album covers in the Home page's music section, three across and two down. Each one opens
   its album page and glows magenta under the pointer, like the covers on the Music page. */
.album-mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.album-mosaic a { display: block; }
.album-mosaic img { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 6px; border: 1px solid var(--line);
                    box-shadow: 0 20px 60px rgba(0,0,0,.55); transition: box-shadow .3s, border-color .3s; }
.album-mosaic a:hover img, .album-mosaic a:focus-visible img { border-color: rgba(255,45,143,.5); box-shadow: 0 0 28px 3px rgba(255,45,143,.45), 0 20px 60px rgba(0,0,0,.55); }
@media (prefers-reduced-motion: reduce) { .album-mosaic img { transition: none; } }

/* ============================================================================
   v1.0.53 - no button label ever breaks onto two lines.
   The labels stay on one line. Where a button is too narrow for its label, it gets less
   space at its sides (12 px, as on the album pages' BUY ON BANDCAMP since v1.0.47), never
   smaller lettering. On a phone, and on screens 901 to 960 px wide, the two product-card buttons
   stack at full width, like every other row of buttons on a phone, and the buy card leaves a little less room around them.
   ============================================================================ */
.btn { white-space: nowrap; }
@media (max-width: 1150px) and (min-width: 901px) {
  .pcard .actions .btn { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 960px) and (min-width: 901px) {
  .pcard .actions .btn { width: 100%; }   /* the narrowest three-card screens: the two buttons stack, as on a phone */
}
@media (max-width: 600px) {
  .pcard .actions .btn { width: 100%; }
  .buycard { padding: 28px 20px; }
  .buycard .btn, .btn.ghost { padding-left: 12px; padding-right: 12px; }
}

/* ============================================================================
   v1.0.54 - full screen always shows the whole video.
   In the page a video fills its 16:9 box (object-fit: cover, above). That setting also applied in
   full screen, so on a screen of a different shape, such as a very wide monitor, the picture was
   enlarged to fill the width and its top and bottom were cut off. In full screen the whole video is
   now fitted inside the screen, with black at the sides where the shapes differ, and the page's
   frame, rounded corners and glow are left out. Each browser's name for full screen has its own
   rule, because a browser ignores a whole rule that names a state it does not know.
   ============================================================================ */
.video video:fullscreen { object-fit: contain; aspect-ratio: auto; width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; background: #000; }
.video video:-webkit-full-screen { object-fit: contain; aspect-ratio: auto; width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; background: #000; }

/* ============================================================================
   v1.0.56: the play button on a video's cover picture sits high up, in the gap between the
   "DreamDeep NeuralDream" heading and the title on the cover (the gap runs from 24% to 44% of
   the picture's height; the button is centred at 34%). It looks like the browser's own button:
   a see-through grey circle with a white triangle. The whole cover can be clicked, as before.
   ============================================================================ */
.vframe { position: relative; }
.vplay { position: absolute; inset: 0; margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.vplay[hidden] { display: none; }
.vplay svg { position: absolute; left: 50%; top: 34.2%; width: 7.3%; height: auto; transform: translate(-50%, -50%); display: block; transition: transform .15s ease; }
.vplay svg circle { fill: rgba(0, 0, 0, .45); transition: fill .15s ease; }
.vplay svg path { fill: #fff; }
.vplay:hover svg circle { fill: rgba(0, 0, 0, .6); }
.vplay:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; }
.vplay:focus-visible svg circle { fill: rgba(0, 0, 0, .6); }

/* ============================================================================
   v1.0.60: the small note under every NeuralDream "Download for Windows" button (and under the
   Windows link on the thank-you page after buying): the Windows version has no RAVE engine.
   The same size and grey as the other small print under buttons (.promo).
   ============================================================================ */
.winnote { display: block; font-size: 14px; line-height: 1.5; color: var(--faint); margin-top: 10px; }