/* ── Canvas site mockup (2026-10-17) ───────────────────────────────────────
   Helvetica Thin throughout: change --weight to step the whole site. The
   Canvas wordmark is the one exception (Helvetica Bold, as in the plugin). */
:root {
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --weight: 300;          /* body: Helvetica Light, as in the plugin */
  --weight-display: 200;  /* big headings: UltraLight */
  --text-hi: #eef3f9;
  --text-mid: rgba(226, 235, 246, 0.80);
  --text-lo: rgba(200, 215, 232, 0.5);
  --line: rgba(170, 200, 230, 0.14);
  --glass: rgba(4, 9, 19, 0.82);
  --page: #0f1725;   /* #060d19 with the dark lift applied */
  --dark-lift: 10;     /* plugin DarkLift.css */
  color-scheme: dark;
}
* { box-sizing: border-box; }
/* Keep the scrollbar's space even while a modal locks scrolling, so the page
   never changes width when a modal opens or closes (that resized the canvas
   and made everything behind the modal jump). */
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--page);
  color: var(--text-hi);
  font-family: var(--font);
  font-weight: var(--weight);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, strong, b, button { font-weight: var(--weight); }
.closing h2 { font-weight: var(--weight-display); }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }

/* The fixed backdrop: plugin field (refinement.css .app::before, which
   overrides App.css's steeper gradient) + the .space-grid backdrop gradient,
   the room canvas, and the plugin's dark-mode lift (DarkLift.css) as a
   screen-blended veil on top. The lift covers the backdrop only, so the page
   text in front never goes through a blend layer. */
.backdrop { position: fixed; inset: 0; z-index: 0; isolation: isolate; pointer-events: none; }
.backdrop::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.077) 0%, rgba(0,0,0,0) 42%, rgba(0,0,0,.14) 100%),
    linear-gradient(180deg, #030810 0%, #060d19 100%);
}
.backdrop::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  mix-blend-mode: screen;
  background: rgb(calc(var(--dark-lift) * .85) calc(var(--dark-lift) * .95) calc(var(--dark-lift) * 1.15));
}
.space-grid { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Background video. Shows only the left ~65% of the recording (the plugin's
   canvas with the blobs, not the track list): the video is drawn 1/0.65 of
   the window wide, pinned left. The blur needs room to bleed past the edges,
   hence the inset and scale. Opacity is driven by the scroll (spacegrid.js). */
.bg-video { position: absolute; inset: -8%; overflow: hidden; z-index: -1; opacity: 0; transition: opacity .2s linear; }
.bg-video video {
  position: absolute; left: 0; top: 50%; translate: 0 -50%;
  width: calc(100% / 0.65); min-height: 100%; object-fit: cover; object-position: left center;
  filter: blur(var(--bg-blur, 70px)) brightness(var(--bg-dim, .38)) saturate(1.35);
}
main, .site-footer { position: relative; z-index: 1; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header {
  /* Content capped at the page width (like the footer) and centred, so on wide
     screens Art DSP / the nav sit in from the corners instead of at them. */
  position: fixed; top: 0; left: 0; right: 0; margin: 0 auto; max-width: 1216px; z-index: 50;
  height: 64px; padding: 0 28px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom: 1px solid transparent;
}
/* Progressive backdrop blur behind the header. Stacked layers, each blurring
   harder and masked to end sooner, so the blur eases off smoothly from the top
   of the window down past the header's bottom edge — no hard line. Adjust the
   reach with --blur-reach and the strength by the blur() values. */
.header-blur { position: absolute; left: 50%; width: 100vw; translate: -50% 0; top: 0; height: var(--blur-reach, 104px); z-index: -1; pointer-events: none; }   /* still full-width behind the capped header */
.header-blur i { position: absolute; inset: 0; }
.header-blur i:nth-child(1) { -webkit-backdrop-filter: blur(1px);  backdrop-filter: blur(1px);  -webkit-mask: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%); mask: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%); }
.header-blur i:nth-child(2) { -webkit-backdrop-filter: blur(2px);  backdrop-filter: blur(2px);  -webkit-mask: linear-gradient(to bottom, #000 0%, #000 45%, transparent 85%);  mask: linear-gradient(to bottom, #000 0%, #000 45%, transparent 85%); }
.header-blur i:nth-child(3) { -webkit-backdrop-filter: blur(4px);  backdrop-filter: blur(4px);  -webkit-mask: linear-gradient(to bottom, #000 0%, #000 35%, transparent 70%);  mask: linear-gradient(to bottom, #000 0%, #000 35%, transparent 70%); }
.header-blur i:nth-child(4) { -webkit-backdrop-filter: blur(8px);  backdrop-filter: blur(8px);  -webkit-mask: linear-gradient(to bottom, #000 0%, #000 25%, transparent 55%);  mask: linear-gradient(to bottom, #000 0%, #000 25%, transparent 55%); }
.header-blur i:nth-child(5) { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); -webkit-mask: linear-gradient(to bottom, #000 0%, #000 15%, transparent 42%);  mask: linear-gradient(to bottom, #000 0%, #000 15%, transparent 42%); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; letter-spacing: .02em; justify-self: start; }
.brand img { width: 24px; height: 24px; }
.header-logo-slot { justify-self: center; display: block; height: 30px; }   /* width set from the logo */

/* The flying logo. It renders at its BIG hero size and is only ever scaled
   down, so it stays crisp in the header. Position/scale are set per frame. */
.flying-logo { position: fixed; left: 0; top: 0; z-index: 51; display: block; transform-origin: 0 0; will-change: transform; }
.flying-logo .gw-ss { font-size: 236px; }   /* 2× of the 118px hero logo */
.hero-logo-slot { height: 118px; }
.nav { justify-self: end; display: flex; align-items: center; gap: 28px; font-size: 15px; }
.nav a { color: var(--text-mid); transition: color .15s; }
.nav a:hover { color: var(--text-hi); }
.nav .buy {
  /* Highlighted as a filled pill (same as the page's primary buttons) rather than a glow. */
  color: #061224; background: #eef3f9; padding: 4px 14px; line-height: 1.3; border-radius: 999px;
  border: 1px solid #eef3f9; font-weight: 400;
  transition: background .15s, border-color .15s, transform .15s;
}
.nav .buy:hover { color: #061224; background: #fff; border-color: #fff; transform: translateY(-1px); }

/* ── Goo wordmark (plugin Simple.css .gw-*) ─────────────────────────────── */
.gw-wrap {
  position: relative; display: inline-block; line-height: 1; white-space: nowrap; color: #fff;   /* no drop shadow */
}
.gw-ss {
  position: absolute; top: 0; left: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 60px;        /* rendered at 2× and scaled by ½ → 30px logo */
  font-weight: 700; line-height: 1;
  transform: scale(.5); transform-origin: 0 0;
}
.gw-layer { display: flex; letter-spacing: -0.025em; }
.gw-P { position: absolute; inset: 0; }
.gw-layer > span, .gw-g { display: inline-block; }
.gw-color .gw-W > span,
.gw-color .gw-g {
  background-image: var(--gw-bg);
  background-size: var(--gw-w) var(--gw-h);
  background-position: calc(var(--ox) * -1) 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ── Ember layer (card, keyboard targets, step dots) ────────────────────── */
.ember-layer { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.ember-hotspots { position: absolute; inset: 0; }
.ember-hotspot {
  position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px;
  border: 0; padding: 0; background: none; border-radius: 50%; opacity: 0;
}
.ember-hotspot:focus-visible { opacity: 1; outline: 1px solid rgba(220,235,250,.6); outline-offset: 6px; }

/* The story: one step per scroll beat, in the column left of the cube. The
   steps share one grid cell, so the box is as tall as the longest and the
   text doesn't jump; the current one fades and drifts in. */
.story {
  position: absolute; left: max(28px, 6vw); top: 50%; translate: 0 -50%;
  width: min(400px, 26vw); display: grid;
  opacity: 0; transition: opacity .5s ease;
}
.story.show { opacity: 1; }
.story-step {
  grid-area: 1 / 1; opacity: 0; translate: 0 14px;
  transition: opacity .35s ease, translate .5s cubic-bezier(.2,.8,.2,1);
}
.story-step.on { opacity: 1; translate: 0 0; transition-delay: .12s; }
.story-step h2 { margin: 0 0 14px; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.06; letter-spacing: -.015em; font-weight: var(--weight-display); }
.story-step p { margin: 0; font-size: 18px; line-height: 1.5; color: var(--text-mid); }
.story-dots { grid-area: 2 / 1; display: flex; gap: 7px; margin-top: 30px; }
.story-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(220,235,250,.18); transition: background .3s, width .3s; }
.story-dots i.past { background: rgba(220,235,250,.45); }
.story-dots i.on { width: 20px; border-radius: 3px; background: var(--text-hi); }
.hint-touch { display: none; }
@media (hover: none) { .hint-mouse { display: none; } .hint-touch { display: block; } }

/* Readout chip beside a sound: pan · frequency · level. */
.readout {
  position: absolute; left: 0; top: 0; display: flex; white-space: nowrap;
  padding: 6px 4px; border-radius: 9px; background: rgba(4, 9, 19, .72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 12px; color: var(--text-lo); font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity .25s ease;
}
.readout.show { opacity: 1; }
.readout span { padding: 0 8px; }
.readout span + span { border-left: 1px solid var(--line); }
.readout .lit { color: var(--text-hi); }
body.over-ember { cursor: grab; }
body.dragging, body.dragging * { cursor: grabbing !important; }

/* Demo cursor: glides between embers and "hovers" each. */
.hover-demo {
  position: absolute; left: 0; top: 0; width: 22px; height: 22px;
  opacity: 0; transition: opacity .35s ease;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .55));
}
.hover-demo.show { opacity: 1; }
.hover-demo svg { position: absolute; left: -2px; top: -1.5px; display: block; }
.hover-demo .ring {
  position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .75); opacity: 0;
}
.hover-demo.press .ring { animation: demo-ring .75s ease-out; }
.hover-demo svg { transition: scale .15s ease; transform-origin: 2px 1.5px; }
.hover-demo.down svg { scale: .88; }   /* holding the sound */
@keyframes demo-ring { 0% { opacity: .85; transform: scale(.35); } 100% { opacity: 0; transform: scale(1.9); } }
@media (hover: none) { .hover-demo svg { display: none; } .hover-demo .ring { border-width: 1.5px; } }


/* ── Hero (scrolls in front of the room) ────────────────────────────────── */
/* Centred in the whole window, header included (it has no background, so
   that's the centre the eye reads). Equal padding top and bottom keeps it
   exact; taller content (short windows) just grows the hero. */
.hero {
  text-align: center; min-height: 100vh; min-height: 100svh; padding: 24px 28px;
  display: flex; flex-direction: column; justify-content: center;
}
.hero > * { width: 100%; margin-left: auto; margin-right: auto; margin-bottom: 0; }
.hero-title { max-width: 900px; }
.hero-sub { max-width: 550px; font-size: 19px; color: var(--text-mid); }
.product {
  max-width: 680px;   /* hero video width */
  border-radius: 12px; overflow: hidden; border: 1px solid rgba(170,200,230,.22);
  background: #020610;
  box-shadow: 0 0 0 6px rgba(140,165,190,.04), 0 40px 120px rgba(0,0,0,.6);
}
.product video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* Order: logo · tagline · video · sentence · buttons. Gaps above each item:
   the tagline hangs off the logo like a subtitle, then logo→video 40,
   video→text 34, text→buttons 36. */
.hero-title   { margin-top: 18px; font-size: clamp(22px, 2.1vw, 28px); line-height: 1.3; letter-spacing: .01em; font-weight: var(--weight); color: var(--text-mid); }
.product      { margin-top: 40px; }
.hero-sub     { margin-top: 34px; }
.hero .hero-actions { margin-top: 36px; }

/* "On sale now!" — a hand-drawn arrow curling up into the hero's Buy now
   from its lower left. It draws itself in once, then bobs gently. */
.buy-wrap { position: relative; display: inline-flex; }
.sale-note { position: absolute; left: 0; top: 0; width: 0; height: 0; color: rgba(238, 243, 249, 0.9); pointer-events: none; }
.sale-note svg { position: absolute; left: -110px; top: 0; overflow: visible; animation: sale-bob 2.6s ease-in-out 1.6s infinite; }
/* The words hang off the arrow's tail point, rotated around it: "On sale"
   ends just left of it, "now!" starts just right, both sitting a touch above. */
.sale-note-text {
  position: absolute; left: -74px; top: 58px; width: 0; height: 0;
  transform: rotate(-7deg); transform-origin: 0 0;
  font-family: "Caveat", "Bradley Hand", cursive; font-weight: 500; font-size: 24px; line-height: 1; white-space: nowrap;
  opacity: 0; animation: sale-in .5s ease-out 1.05s forwards;
}
.sale-note-text span { position: absolute; bottom: 3px; }
.sale-note-text .w1 { right: 3px; }
.sale-note-text .w2 { left: 3px; }
.sale-arrow { stroke-dasharray: 110; stroke-dashoffset: 110; animation: sale-draw .7s ease-out .35s forwards; }
.sale-arrow-head { stroke-dasharray: 30; stroke-dashoffset: 30; animation: sale-draw .25s ease-out 1s forwards; }
@keyframes sale-draw { to { stroke-dashoffset: 0; } }
@keyframes sale-in { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }
@keyframes sale-bob { 0%, 100% { translate: 0 0; } 50% { translate: -2px -3px; } }
@media (prefers-reduced-motion: reduce) {
  .sale-arrow, .sale-arrow-head { stroke-dashoffset: 0; animation: none; }
  .sale-note-text { opacity: 1; animation: none; }
  .sale-note svg { animation: none; }
}

/* ── Journey: empty scroll space, the embers land behind it ─────────────── */
.journey { height: 260vh; }   /* the cube's stay: entrance, hover around, then it leaves */

/* ── Page sections ─────────────────────────────────────────────────────── */
main:not(.page) > section:not(.hero):not(.journey) { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; margin-top: 36px; }
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 24px; border-radius: 999px; font-size: 16px;
  border: 1px solid rgba(220,235,250,.34); color: var(--text-hi);
  transition: background .15s, border-color .15s, color .15s;
}
.button:hover { background: rgba(220,235,250,.08); border-color: rgba(220,235,250,.6); }
.button.primary { background: #eef3f9; color: #061224; border-color: #eef3f9; }
.button.primary:hover { background: #fff; }
.text-link { color: var(--text-mid); font-size: 15px; border-bottom: 1px solid rgba(220,235,250,.25); padding-bottom: 1px; }
.text-link:hover { color: var(--text-hi); }

.kicker { display: block; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-lo); margin-bottom: 14px; }
.media { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: #020610; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.media video { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }




.closing h2 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -.015em; margin: 0 0 18px; }
.closing { text-align: center; padding-top: 120px !important; padding-bottom: 140px !important; }

.closing p { max-width: 600px; margin: 0 auto; font-size: 19px; color: var(--text-mid); }
.price { margin-top: 30px; font-size: 22px; color: var(--text-mid); }
.price strong { color: var(--text-hi); font-size: 30px; }

/* ── Features (under the story): the tools, laid out plainly ──────────── */
.section-head { text-align: center; margin-bottom: 48px; }
.section-head h2, .feature-row h2 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -.015em; margin: 0 0 18px; font-weight: var(--weight-display); }
.section-head p { margin: 0 auto; max-width: 680px; font-size: 19px; color: var(--text-mid); }
.features-intro { padding-top: 120px !important; margin-bottom: 0; }
.feature-row { display: grid; grid-template-columns: 1.35fr 1fr; gap: 72px; align-items: center; padding-top: 64px !important; padding-bottom: 64px !important; }
.feature-row.flip .media { order: 2; }
.feature-row p { margin: 0; font-size: 18px; color: var(--text-mid); }
.presets, .more { padding-top: 100px !important; }
.preset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 32px; }   /* (the "more" section makes it a swipe card, below) */
.preset-grid h3, .tile-grid h3 { font-weight: var(--weight-display); margin: 22px 0 6px; }
.preset-grid h3 { font-size: 28px; }
.tile-grid h3 { font-size: 23px; margin-top: 18px; }
.preset-grid p, .tile-grid p { margin: 0; color: var(--text-mid); font-size: 16px; line-height: 1.5; }
.tile-grid .media { border-radius: 14px; }
.specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding-top: 110px !important; }
.specs > div { border-top: 1px solid var(--line); padding-top: 20px; }
.specs h3 { margin: 0 0 6px; font-size: 13px; font-weight: var(--weight); color: var(--text-lo); }
.specs p { margin: 0; font-size: 17px; color: var(--text-mid); }
@media (max-width: 860px) {
  .feature-row { grid-template-columns: 1fr; gap: 28px; }
  .feature-row.flip .media { order: 0; }
  .preset-grid, .specs { grid-template-columns: 1fr; }
}
/* "Everything else" is one card you swipe through, one item at a time
   (scroll snapping: swipe, trackpad, or the arrows and dots spacegrid.js
   adds). Wide screens lay each item out video-left, words-right. */
.more .tile-grid {
  position: relative; display: flex; gap: 0; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  border: 1px solid var(--line); border-radius: 22px; background: rgba(220, 235, 250, .035);
}
.more .tile-grid::-webkit-scrollbar { display: none; }
.more .tile-grid > article {
  flex: 0 0 100%; box-sizing: border-box; scroll-snap-align: center; scroll-snap-stop: always;
  display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr 1fr; column-gap: 48px; row-gap: 0; align-items: center; padding: 28px 64px 28px 28px;   /* heading and text meet in the middle beside the video */
}
.more .tile-grid .media { border-radius: 14px; grid-row: 1 / 3; }   /* video left, spanning the heading and text */
.more .tile-grid h3 { grid-column: 2; align-self: end; }
.more .tile-grid p { grid-column: 2; align-self: start; }
.more .tile-grid h3 { font-size: clamp(26px, 2.6vw, 36px); margin: 0 0 12px; }
.more .tile-grid p { font-size: 17px; }
.tile-wrap { position: relative; }
.tile-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.tile-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 4px; background: rgba(220, 235, 250, .25); cursor: pointer; transition: width .25s ease, background .25s ease; }
.tile-dots button[aria-current="true"] { width: 22px; background: var(--text-hi); }
.tile-arrow {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 1; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
  border: 1px solid var(--line); background: rgba(8, 15, 27, .82); color: var(--text-hi);
  transition: opacity .2s ease, background .15s ease;
}
.tile-arrow:hover { background: rgba(30, 42, 60, .95); }
.tile-arrow[disabled] { opacity: 0; pointer-events: none; }
.tile-arrow.prev { left: -22px; } .tile-arrow.next { right: -22px; }
@media (max-width: 860px) {
  .more .tile-grid > article { display: block; padding: 14px 14px 22px; }
  .more .tile-grid .media { grid-row: auto; }
  .more .tile-grid h3 { font-size: 23px; margin-top: 16px; }
  .more .tile-grid p { font-size: 16px; }
  .tile-arrow { display: none; }   /* swipe on phones; the dots show where you are */
}

/* Footer (layout after the 2.0_site_v3 branch): brand left, link columns
   right, then a ruled bottom bar with the copyright and social icons. */
.site-footer { border-top: 1px solid var(--line); padding: 64px 40px 36px; font-size: 14px; color: var(--text-lo); }   /* full page width */
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 32px 40px; }
.footer-brand { display: inline-flex; align-items: center; gap: 12px; font-size: 22px; color: var(--text-hi); }
.footer-brand img { width: 28px; height: 28px; }
.footer-cols { display: flex; flex-wrap: wrap; gap: 36px 64px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; min-width: 130px; }
.footer-col h4 { margin: 0 0 4px; font-size: 13px; font-weight: var(--weight); color: var(--text-lo); }
.footer-col a { font-size: 15px; color: var(--text-mid); transition: color .15s; }
.footer-col a:hover { color: var(--text-hi); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-lo); }
.footer-social { display: flex; gap: 6px; }
.footer-social a {
  display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 9px;
  transition: background-color .2s, transform .2s;
}
.footer-social a:hover { background: rgba(160, 185, 215, .12); transform: translateY(-2px); }
.footer-social img { width: 16px; height: 16px; filter: invert(1); opacity: .75; transition: opacity .2s; }
.footer-social a:hover img { opacity: 1; }

/* ── Small screens ──────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .site-header { padding: 0 16px; height: 58px; grid-template-columns: auto 1fr auto; }
  .brand { font-size: 0; gap: 0; }
  .nav { gap: 14px; font-size: 14px; }
  .nav a:not(.buy) { display: none; }
  .sale-note { display: none; }   /* no room beside the buttons on phones */
  .site-footer { padding-left: 16px; padding-right: 16px; }
  .flying-logo .gw-ss { font-size: 150px; }
  .hero-logo-slot { height: 75px; }
  .story { left: 16px; right: 16px; top: auto; bottom: 28px; translate: none; width: auto; }
  .story-step h2 { font-size: 28px; margin-bottom: 8px; }
  .story-step p { font-size: 16px; }
  .story-dots { margin-top: 16px; }
  main:not(.page) > section:not(.hero):not(.journey) { padding-left: 16px; padding-right: 16px; }
  .hero { padding-left: 16px; padding-right: 16px; }
  .product { border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ── Purchase modals ─────────────────────────────────────────────────────────
   Styled after the plugin's modals (Modals.css): the whole page behind is
   blurred under a light tint, and the panel is the plugin's dark navy, a
   little more see-through here so the page reads faintly through it. */
.modal {
  width: min(880px, calc(100% - 32px)); max-height: calc(100dvh - 48px); overflow: auto;
  padding: 34px 34px 26px; border: 0; border-radius: 14px; color: var(--text-hi);
  background: rgba(8, 15, 27, .88);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .3);
  font-weight: var(--weight); scrollbar-width: thin;
}
.modal::backdrop {
  background: rgba(2, 6, 12, .42);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
}
.modal[open] { animation: modal-in .22s cubic-bezier(.2, .9, .3, 1); }
.modal[open]::backdrop { animation: backdrop-in .22s ease; }
/* (Not ".closing": that's the page's closing section, and its padding was
   stretching the modal to full height for the length of the fade.) */
.modal.is-closing { animation: modal-out .2s cubic-bezier(.4, 0, 1, 1) forwards; }
.modal.is-closing::backdrop { animation: backdrop-out .2s ease forwards; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }
@keyframes modal-out { to { opacity: 0; transform: translateY(6px) scale(.985); } }
@keyframes backdrop-in { from { opacity: 0; } }
@keyframes backdrop-out { to { opacity: 0; } }
body:has(.modal[open]) { overflow: hidden; }

.modal-close, .modal-back {
  position: absolute; top: 14px; height: 30px; border: 0; border-radius: 6px; background: none;
  color: var(--text-mid); font: inherit; cursor: pointer; transition: background-color .15s, color .15s;
}
.modal-close { right: 14px; width: 30px; padding: 0; display: grid; place-items: center; }   /* drawn ×, so it's truly centred */
.modal-close svg { display: block; }
.modal-back { left: 14px; padding: 0 10px; font-size: 13px; }
.modal-close:hover, .modal-back:hover { background: rgba(160, 185, 215, .14); color: var(--text-hi); }

.modal-head { text-align: center; margin-bottom: 26px; }
.modal-kicker { display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-lo); margin-bottom: 8px; }
.modal-head h2 { margin: 0 0 8px; font-size: 34px; line-height: 1.1; letter-spacing: -.01em; font-weight: var(--weight-display); }
.modal-head p { margin: 0; font-size: 15px; color: var(--text-mid); }

/* Plan cards */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.plan {
  position: relative; display: flex; flex-direction: column; padding: 22px 22px 20px; border-radius: 10px;
  background: rgba(255, 255, 255, .045);
}
.plan-full { background: rgba(255, 255, 255, .07); }   /* no outline: the lighter fill sets it apart */
.plan-label { font-size: 15px; color: var(--text-mid); }
.plan-price { display: flex; align-items: baseline; gap: 10px; margin: 12px 0 4px; }
.plan-price strong { font-size: 46px; line-height: 1; font-weight: var(--weight-display); letter-spacing: -.02em; }
.plan-price s { font-size: 22px; color: var(--text-lo); text-decoration-thickness: 1px; }
.plan-price .per { font-size: 15px; color: var(--text-mid); }
.sale-chip {
  align-self: center; margin-left: 2px; padding: 3px 9px; border-radius: 999px; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: #061224; background: linear-gradient(90deg, #73dde0, #eb91c1);
}
.plan-terms { margin: 0 0 16px; font-size: 14px; color: var(--text-mid); }
.plan ul, .purchase-details ul { list-style: none; margin: 0; padding: 0; }
.plan li { position: relative; padding-left: 20px; margin: 6px 0; font-size: 14px; color: var(--text-hi); }
.plan li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: rgba(169, 213, 246, .7); }
.plan .modal-btn { margin-top: auto; }
.plan ul { margin-bottom: 22px; }

/* Buttons (plugin style: soft fill, no outline) */
.modal-btn {
  width: 100%; height: 42px; padding: 0 16px; border: 0; border-radius: 8px; cursor: pointer;
  background: rgba(160, 185, 215, .16); color: var(--text-hi); font: inherit; font-size: 15px;
  transition: background-color .15s ease, transform .15s ease;
}
/* The plan buttons are links (to /api/checkout, Stripe's hosted page) so they still work
   with JS off or on a middle-click; laid out like the buttons. */
a.modal-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.modal-btn:hover { background: rgba(160, 185, 215, .3); }
.modal-btn.primary { background: #eef3f9; color: #061224; }
.modal-btn.primary:hover { background: #fff; transform: translateY(-1px); }

.purchase-details { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(190, 215, 240, .1); }
.purchase-details h3 { margin: 0 0 8px; font-size: 13px; font-weight: var(--weight); color: var(--text-lo); }
.purchase-details li { margin: 5px 0; font-size: 14px; color: var(--text-mid); }
.modal .fine-print { margin: 20px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-lo); text-align: center; }
.modal .fine-print a { color: var(--text-mid); text-decoration: underline; text-underline-offset: 2px; }

/* Stripe checkout: Stripe's embedded form (white) in the same dark panel. */
.stripe-modal { width: min(560px, calc(100% - 32px)); padding: 54px 14px 14px; }
.stripe-loading { margin: 0; padding: 48px 16px 56px; text-align: center; color: var(--text-mid); }
.stripe-loading[hidden] { display: none; }
.stripe-mount { border-radius: 10px; overflow: hidden; background: #fff; }
.stripe-mount:empty { display: none; }

/* Mock checkout: a light, Stripe-like form card inside the same dark panel. */
.checkout-modal { width: min(780px, calc(100% - 32px)); padding-top: 54px; }
.mock-ribbon {
  position: absolute; top: 18px; left: 50%; translate: -50% 0; white-space: nowrap;
  padding: 4px 12px; border-radius: 999px; font-size: 11px; letter-spacing: .06em;
  color: #ffd79a; background: rgba(230, 160, 60, .14); box-shadow: inset 0 0 0 1px rgba(230, 160, 60, .3);
}
.checkout-body { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 26px; align-items: start; }
.checkout-summary { padding: 8px 4px; }
.checkout-summary h2 { margin: 0 0 14px; font-size: 22px; font-weight: var(--weight); color: var(--text-mid); }
.checkout-amount { font-size: 40px; line-height: 1; font-weight: var(--weight-display); letter-spacing: -.02em; }
.checkout-summary > p { margin: 8px 0 22px; font-size: 14px; color: var(--text-mid); }
.checkout-summary dl { margin: 0; font-size: 14px; }
.checkout-summary dl div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(190, 215, 240, .1); color: var(--text-mid); }
.checkout-summary dl .total { color: var(--text-hi); }
.checkout-summary dd { margin: 0; }

.checkout-form, .checkout-done {
  padding: 22px; border-radius: 10px; background: #fff; color: #1a1f36;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; font-weight: 400;
}
.checkout-form label { display: block; margin-bottom: 14px; font-size: 13px; color: #4f566b; }
.checkout-form input, .checkout-form select {
  display: block; width: 100%; height: 40px; margin-top: 6px; padding: 0 12px; font: inherit; font-size: 15px; color: #1a1f36;
  border: 1px solid #e0e0e6; border-radius: 6px; background: #fff; outline: none;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .03);
}
.checkout-form input:focus, .checkout-form select:focus { border-color: #8aa4c4; box-shadow: 0 0 0 3px rgba(80, 130, 200, .18); }
.card-group { display: block; margin-top: 6px; }
.card-group input { margin-top: 0; }
.card-group .card-number { border-radius: 6px 6px 0 0; }
.card-row { display: grid; grid-template-columns: 1fr 1fr; }
.card-row input { border-top: 0; border-radius: 0 0 0 6px; }
.card-row input + input { border-left: 0; border-radius: 0 0 6px 0; }
.pay-btn {
  width: 100%; height: 44px; margin-top: 4px; border: 0; border-radius: 6px; cursor: pointer;
  background: #0b1a33; color: #fff; font: inherit; font-size: 15px; font-weight: 500; transition: background-color .15s;
}
.pay-btn:hover { background: #142a4f; }
.pay-btn:disabled { opacity: .7; cursor: progress; }
.checkout-foot { margin: 12px 0 0; text-align: center; font-size: 12px; color: #8792a2; }
.checkout-done { text-align: center; padding: 34px 22px 24px; }
.checkout-done[hidden], .checkout-form[hidden] { display: none; }
.done-mark { width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; color: #fff; background: linear-gradient(135deg, #73dde0, #8f7cf0); }
.checkout-done h3 { margin: 0 0 6px; font-size: 20px; font-weight: 500; }
.checkout-done p { margin: 0 0 18px; font-size: 14px; color: #4f566b; }
.checkout-done .modal-btn { background: #0b1a33; color: #fff; }
.done-link { display: inline-flex; align-items: center; justify-content: center; }

/* Closing section price with the sale */
.price s { color: var(--text-lo); margin: 0 4px; text-decoration-thickness: 1px; }

@media (max-width: 720px) {
  .modal { padding: 28px 18px 20px; }
  .plans, .purchase-details, .checkout-body { grid-template-columns: 1fr; }
  .modal-head h2 { font-size: 28px; }
  .checkout-modal { padding-top: 58px; }
  .mock-ribbon { font-size: 10px; }
}

/* ── Inner pages (downloads, support, education, about, trial, thank-you, 404)
   Same header, backdrop and footer as the homepage; the content sits in a
   centred column with the components below. */
.subpage .site-header .nav { grid-column: 3; }   /* no centre logo on inner pages: keep the nav on the right */

.page { position: relative; z-index: 1; max-width: 1160px; margin: 0 auto; padding: 150px 28px 110px; }
.page-head { text-align: center; max-width: 720px; margin: 0 auto 64px; }
.page-head h1 { margin: 0 0 16px; font-size: clamp(44px, 6vw, 72px); line-height: 1.04; letter-spacing: -.02em; font-weight: var(--weight-display); }
.page-head .lead { margin: 0; font-size: 19px; color: var(--text-mid); }
.page-head .lead a, .prose a, .faq-copy a { color: var(--text-hi); text-decoration: underline; text-decoration-color: rgba(220, 235, 250, .35); text-underline-offset: 3px; }
.page-head .lead a:hover, .prose a:hover, .faq-copy a:hover { text-decoration-color: currentColor; }
.page-head .actions { margin-top: 30px; }

.section { margin-top: 72px; }
.section > h2 { margin: 0 0 22px; font-size: 30px; line-height: 1.15; font-weight: var(--weight-display); }
.section-note { margin: -12px 0 22px; color: var(--text-lo); font-size: 15px; }

/* Soft cards, like the purchase plans: fill only, no outline. */
.panel { padding: 28px; border-radius: 14px; background: rgba(255, 255, 255, .045); }
.panel h3 { margin: 0 0 10px; font-size: 24px; font-weight: var(--weight-display); }
.panel p { margin: 0; color: var(--text-mid); font-size: 16px; }
.panel .num { display: block; margin-bottom: 18px; font-size: 13px; color: var(--text-lo); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* Requirement chips */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }
.chip { padding: 7px 14px; border-radius: 999px; font-size: 14px; color: var(--text-mid); background: rgba(160, 185, 215, .1); }

/* Installer cards */
.installer { display: flex; align-items: center; gap: 18px; }
.installer img { width: 34px; height: 34px; object-fit: contain; filter: invert(1); opacity: .85; }
.installer .meta { flex: 1; min-width: 0; }
.installer .meta strong { display: block; font-size: 20px; font-weight: var(--weight); }
.installer .meta span { font-size: 14px; color: var(--text-lo); }
.installer .button { min-height: 42px; padding: 0 20px; white-space: nowrap; }

/* Link lists (documentation / legal) */
.link-col h3 { margin: 0 0 12px; font-size: 13px; font-weight: var(--weight); color: var(--text-lo); }
.link-list { display: flex; flex-direction: column; gap: 2px; }
.link-list a {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--text-mid); font-size: 16px; transition: color .15s;
}
.link-list a::after { content: "↗"; color: var(--text-lo); transition: transform .2s, color .15s; }
.link-list a:hover { color: var(--text-hi); }
.link-list a:hover::after { color: var(--text-hi); transform: translate(2px, -2px); }

/* Quick links (support) */
.pill-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }
.pill-nav a { padding: 8px 16px; border-radius: 999px; font-size: 15px; color: var(--text-mid); background: rgba(160, 185, 215, .1); transition: background-color .15s, color .15s; }
.pill-nav a:hover { color: var(--text-hi); background: rgba(160, 185, 215, .2); }

/* Video guides */
.video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.video-grid iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; background: #020610; }

/* FAQ accordion. Opening/closing is animated in subpage.js (height + fade of
   the answer); .is-open flips at the START of each, so the fill and the
   chevron change with the motion rather than after it. */
.faq { display: flex; flex-direction: column; gap: 8px; }
.faq details { border-radius: 12px; background: rgba(255, 255, 255, .022); transition: background-color .3s ease; }
.faq details.is-open { background: rgba(255, 255, 255, .042); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 22px; font-size: 17px; color: var(--text-hi);
}
.faq summary::-webkit-details-marker { display: none; }
/* Chevron: flips over (3D, top to bottom) instead of spinning round. */
.faq summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-top: -4px;
  border-right: 1.5px solid var(--text-lo); border-bottom: 1.5px solid var(--text-lo);
  transform: perspective(60px) rotateX(0deg) rotate(45deg);
  transition: transform .4s cubic-bezier(.3, .7, .2, 1), margin-top .4s cubic-bezier(.3, .7, .2, 1);
}
.faq details.is-open summary::after { transform: perspective(60px) rotateX(180deg) rotate(45deg); margin-top: 4px; }
.faq-copy { overflow: hidden; padding: 0 22px 20px; color: var(--text-mid); font-size: 16px; line-height: 1.6; }

/* Prose (about) */
.prose { max-width: 640px; margin: 0 auto; font-size: 19px; line-height: 1.65; color: var(--text-mid); text-align: center; }
.prose p { margin: 0 0 18px; }

/* Licence code (thank-you): centred, with a copy icon beside the code. */
.license { display: flex; flex-direction: column; align-items: center; text-align: center; width: fit-content; max-width: 100%; margin: 0 auto; padding: 28px 40px 24px; }   /* hugs the code, centred */
.license .label { margin-bottom: 10px; font-size: 13px; color: var(--text-lo); }
.license[hidden] { display: none; }
#license-email-note.solo { max-width: 560px; margin: 0 auto !important; padding: 18px 24px; border-radius: 12px; font-size: 17px; color: var(--text-mid); background: rgba(255, 255, 255, .045); }
.license-row { display: inline-flex; align-items: center; gap: 10px; }
.license.fetching code { font-family: inherit; font-size: 18px; letter-spacing: 0; color: var(--text-mid); animation: fetch-pulse 1.2s ease-in-out infinite; }
.license.fetching .copy-btn { visibility: hidden; }
@keyframes fetch-pulse { 50% { opacity: .45; } }
.license code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 24px; letter-spacing: .06em; color: var(--text-hi); }
.copy-btn {
  position: relative; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; cursor: pointer;
  display: grid; place-items: center; color: var(--text-mid); background: rgba(160, 185, 215, .12);
  transition: background-color .15s, color .15s;
}
.copy-btn:hover { background: rgba(160, 185, 215, .24); color: var(--text-hi); }
.copy-btn svg { grid-area: 1 / 1; transition: opacity .18s, transform .18s; }
.copy-btn .i-done { opacity: 0; transform: scale(.6); color: #7ee0b0; }
.copy-btn.copied .i-copy { opacity: 0; transform: scale(.6); }
.copy-btn.copied .i-done { opacity: 1; transform: none; }
.mock-note { display: inline-block; margin-top: 14px; padding: 3px 10px; border-radius: 999px; font-size: 11px; color: #ffd79a; background: rgba(230, 160, 60, .14); }

/* 404 */
.page-404 { min-height: 100vh; display: grid; place-content: center; padding-top: 64px; padding-bottom: 64px; }
.page-404 .big { font-size: clamp(110px, 18vw, 220px); line-height: .9; font-weight: var(--weight-display); letter-spacing: -.04em; }

@media (max-width: 860px) {
  .grid-2, .grid-3, .video-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .page { padding: 110px 16px 80px; }
  .page-head { margin-bottom: 44px; }
  .section { margin-top: 52px; }
  .panel { padding: 22px; }
  .installer { flex-wrap: wrap; }
  .installer .button { width: 100%; }
  .license code { font-size: 18px; }
}


/* Installers: two white pill buttons, like Buy now but a good deal larger
   (downloads, free trial, thank-you). */
.installer-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.section:has(.installer-btns) > h2 { text-align: center; }   /* the Installers heading centres with them */
.installer-btn {
  display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 26px 0 22px; border-radius: 999px;
  background: #eef3f9; color: #061224; font-size: 17px; white-space: nowrap;
  transition: background-color .15s, transform .15s, box-shadow .15s;
}
.installer-btn:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0, 0, 0, .3); }
.installer-btn img { width: 20px; height: 20px; object-fit: contain; }
.installer-btn .arrow { margin-left: 2px; }   /* moves with the button, no separate nudge */
.installer-note { margin: 14px 0 0; font-size: 14px; color: var(--text-lo); text-align: center; }

/* Hero video on an inner page (free trial): under the heading, above the installers. */
.page-head:has(+ .page-video) { margin-bottom: 40px; }
.page-video { width: 100%; margin: 0 auto 64px; }

/* Downloads, after the live artdsp.net layout: big left-aligned title, then
   one titled row per product — screenshot · installers · documentation · legal. */
.dl-head h1 { margin: 0 0 56px; font-size: clamp(56px, 8vw, 104px); line-height: 1; letter-spacing: -.025em; font-weight: var(--weight-display); }
.dl-name { margin: 0 0 28px; padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 34px; font-weight: var(--weight-display); }
.dl-row { display: grid; grid-template-columns: 1.5fr 1fr .85fr .85fr; gap: 40px; align-items: start; }
.dl-shot { width: 100%; margin: 0; }
.dl-col { display: flex; flex-direction: column; gap: 10px; }
.dl-col h3 { margin: 0 0 6px; font-size: 20px; font-weight: var(--weight); color: var(--text-hi); }
.dl-col > a { width: fit-content; font-size: 15px; color: var(--text-mid); text-decoration: underline; text-decoration-color: rgba(220, 235, 250, .3); text-underline-offset: 3px; transition: color .15s, text-decoration-color .15s; }
.dl-col > a:hover { color: var(--text-hi); text-decoration-color: currentColor; }
.dl-installers .installer-btns { flex-direction: column; align-items: stretch; }
.dl-installers .installer-btn { height: 50px; font-size: 16px; }
.dl-installers .installer-btn .arrow { margin-left: auto; }
.dl-reqs { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; line-height: 1.6; color: var(--text-lo); }
@media (max-width: 1080px) { .dl-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
  .dl-head h1 { margin-bottom: 36px; }
  .dl-row { grid-template-columns: 1fr; gap: 32px; }
}

/* ── Burger menu (below 720px) ─────────────────────────────────────────────
   Two lines that cross into an ×. The menu is a full-screen panel under the
   header (which stays on top, burger included), blurring the page behind;
   items are big centred rows that fade up one after another. */
.burger { display: none; position: relative; width: 44px; height: 44px; margin-right: -8px; padding: 0; border: 0; border-radius: 10px; background: none; cursor: pointer; }
.burger span {
  position: absolute; left: 12px; right: 12px; height: 1.5px; border-radius: 1px; background: var(--text-hi);
  transition: top .3s cubic-bezier(.3, .7, .2, 1), transform .3s cubic-bezier(.3, .7, .2, 1);
}
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 26px; }
.menu-open .burger span:nth-child(1) { top: 21.25px; transform: rotate(45deg); }
.menu-open .burger span:nth-child(2) { top: 21.25px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 49; display: flex; flex-direction: column; overflow-y: auto;
  padding: 58px 0 36px;
  background: rgba(4, 9, 19, .86);
  -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
  opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility 0s linear .28s;
}
.menu-open .mobile-menu { opacity: 1; visibility: visible; transition: opacity .28s ease; }
.menu-open, .menu-open body { overflow: hidden; }
.menu-open .flying-logo { opacity: 0; pointer-events: none; }   /* the big hero logo would sit over the menu */
.flying-logo { transition: opacity .2s ease; }

.mm-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.mm-item, .mm-buy, .mm-social { opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1); }
.menu-open .mm-item, .menu-open .mm-buy, .menu-open .mm-social { opacity: 1; transform: none; transition-delay: calc(60ms + var(--i) * 45ms); }
.mm-item {
  display: flex; align-items: center; justify-content: center; min-height: 104px;
  border-bottom: 1px solid var(--line); font-size: 40px; font-weight: var(--weight-display); color: var(--text-hi);
}
.mm-item:active { background: rgba(160, 185, 215, .08); }
.mm-buy {
  display: flex; align-items: center; justify-content: center; height: 64px; margin: 30px 24px 0; border-radius: 999px;
  background: #eef3f9; color: #061224; font-size: 21px;
}
.mm-social { display: flex; justify-content: center; gap: 6px; margin-top: 30px; }
.mm-social a { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 12px; }
.mm-social img { width: 20px; height: 20px; filter: invert(1); opacity: .8; }

@media (max-width: 720px) {
  .burger { display: block; }
  .nav { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-item, .mm-buy, .mm-social { transform: none; transition: opacity .2s ease; }
}

/* Homepage bottom: the "Before you buy" cards and details on the page. */
.buy-inline { max-width: 880px; margin: 44px auto 0; text-align: left; }
.buy-inline .fine-print { margin: 20px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-lo); text-align: center; }
.buy-inline .fine-print a { color: var(--text-mid); text-decoration: underline; text-underline-offset: 2px; }
.try-first { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 18px; margin-top: 40px; }
.try-first p { margin: 0; font-size: 16px; color: var(--text-mid); }
/* The closing section's big centred paragraph style mustn't reach the cards. */
.closing .buy-inline .plan-terms { max-width: none; margin: 0 0 16px; font-size: 14px; }
.closing .buy-inline .fine-print { max-width: none; margin: 20px 0 0; font-size: 12px; }
.closing .try-first p { max-width: none; margin: 0; font-size: 16px; }

/* ── Logo picture (phones; see spacegrid.js PHONE) ──────────────────────── */
/* The still picture of the wordmark that phones show instead of the live,
   SVG-filtered one. The live layers are hidden and their filters dropped. */
.gw-snap { position: absolute; display: none; pointer-events: none; }
.gw-snapped .gw-snap { display: block; }
.gw-snapped .gw-layer, .gw-snapped .gw-layer * { opacity: 0 !important; filter: none !important; }
/* …or the WebGL-drawn word (goo-gl.js), for browsers that run SVG filters in software. */
.gw-gl { position: absolute; display: none; pointer-events: none; }
.gw-gl-on .gw-gl { display: block; }
.gw-gl-on .gw-layer, .gw-gl-on .gw-layer * { opacity: 0 !important; filter: none !important; }
/* …or, on phones, a cut-out of it over the live colour blend (goo-wordmark.js colorOnly). */
.gw-tint {
  position: absolute; display: none; box-sizing: border-box; pointer-events: none;
  background-image: var(--gw-bg); background-origin: content-box; background-repeat: repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.gw-snapped.gw-tinted .gw-tint { display: block; }
.gw-snapped.gw-tinted .gw-snap { display: none; }

/* ── Phones only: layout ─────────────────────────────────────────────── */
@media (hover: none), (pointer: coarse) {
  /* Sized to the large viewport, so the toolbar coming and going never resizes it. */
  .backdrop { bottom: auto; height: 100vh; height: 100lvh; }
  .vh-probe { position: fixed; left: 0; top: 0; width: 0; height: 100vh; height: 100lvh; visibility: hidden; pointer-events: none; }
  .vh-probe.small { height: 100vh; height: 100svh; }
  /* The story text, readout and cursor layer: also a fixed height, so Safari's
     toolbar coming and going doesn't move what's on it. */
  .ember-layer { bottom: auto; height: 100vh; height: 100lvh; }
}

/* ── Lite: phones and Safari (class set in index.html) ──────────────────── */
/* WebKit can't do filters, blend modes or live backdrop blur on the GPU;
   each one sends the page down a slow software path. Other desktop browsers
   keep them all (nothing here applies to them). */
/* The dark-mode lift: the same faint blue laid over with plain opacity
   (screen blending a colour this dark is, to a fraction of a percent, this). */
.lite .backdrop::after { mix-blend-mode: normal; background: rgba(189, 211, 255, .045); }
/* The background video: https://public.artdsp.net/videos/v2/bg-blur-phone.mp4 (index.html), which has the
   crop, blur and darkening baked in, so no live filter. Made from the same
   clip desktop blurs live (https://public.artdsp.net/videos/v2/placeholder.mp4); re-make it if that changes:
     ffmpeg -i placeholder.mp4 -an -vf "crop=iw*0.65:ih:0:0,scale=480:-2,fps=30,format=gbrp,gblur=sigma=26:steps=3,colorchannelmixer=rr=.36:gg=.36:bb=.36,eq=saturation=1.35,format=yuv420p" -c:v libx264 -preset slow -crf 16 -movflags +faststart bg-blur-phone.mp4 */
.lite .bg-video video { top: 0; translate: none; width: 100%; height: 100%; min-height: 0; filter: none; }
/* (The header's progressive backdrop blur stays: Safari draws backdrop blur
   on the GPU. Measured on an iPhone before keeping it.) */
.lite .readout { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(4, 9, 19, .88); }

/* Phones in portrait: the story text sits along the bottom. Pinned to the
   bottom of the SMALL viewport (toolbar showing), not the window's bottom
   edge, which moves every time the toolbar slides in or out. */
@media (hover: none) and (max-width: 720px), (pointer: coarse) and (max-width: 720px) {
  .story { top: 100vh; top: 100svh; bottom: auto; translate: 0 calc(-100% - 28px); }
}