/* nullshape.com — black, the art carries the colour, green from the mark for accents.
   Layout: full-bleed hero piece → big statement → feature rows (artwork panel + floating UI cut-outs, mostly
   in phone frames) alternating sides → gallery → pricing. */
:root {
  --bg: #0a0a09;
  --panel: #131312;
  --line: #262624;
  --ink: #f2f1ec;
  --grey: #8f8d86;
  --dim: #5f5d58;
  --green: #b9d94a;      /* from the logo's olive/yellow, brightened for black */
  --green-deep: #3f8d42; /* the mark's inner triangle */
  --display: 'Inter Tight', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --r: 18px;
  --gutter: clamp(16px, 4vw, 56px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; font-feature-settings: 'cv11', 'ss01'; overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.wrap { width: min(1280px, 100%); margin: 0 auto; padding-inline: var(--gutter); }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; gap: 24px; padding: calc(14px + env(safe-area-inset-top, 0px)) var(--gutter) 14px; transition: background 0.3s; }
/* Over the hero, the bar gets its own dark fade so the links read on bright artwork. */
.nav:not(.solid) { background: linear-gradient(180deg, rgba(10, 10, 9, 0.88) 0%, rgba(10, 10, 9, 0.55) 60%, rgba(10, 10, 9, 0) 100%); padding-bottom: 30px; }
.nav:not(.solid) .nav-links { color: rgba(242, 241, 236, 0.86); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6); }
.nav.solid { background: rgba(10, 10, 9, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 13px/1 var(--sans); letter-spacing: 0.26em; }
.logo img { width: 28px; height: 28px; border-radius: 8px; }
.nav-links { display: flex; gap: 22px; margin-left: auto; margin-right: 8px; font-size: 15px; color: var(--grey); }
.nav-links a { text-decoration: none; white-space: nowrap; transition: color 0.15s; }
.nav-links a:hover { color: var(--ink); }
@media (max-width: 1240px) { .nav-links .wide { display: none; } }
.ctas { display: flex; gap: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; border-radius: 10px; border: 1px solid rgba(242, 241, 236, 0.28); color: var(--ink); text-decoration: none; font: 600 15px/1 var(--sans); letter-spacing: -0.005em; white-space: nowrap; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.btn:hover { border-color: var(--ink); }
.btn.solid { background: var(--ink); color: #0a0a09; border-color: var(--ink); }
.btn.solid:hover { background: var(--green); border-color: var(--green); }
.btn.green { background: var(--green); color: #0a0a09; border-color: var(--green); }
.btn.green:hover { background: var(--ink); border-color: var(--ink); }
@media (max-width: 900px) { .nav-links { display: none; } .nav { justify-content: space-between; } .nav .btn:not(.solid) { display: none; } .nav .btn { height: 38px; padding: 0 16px; } }

/* ---------- hero (the art is the page) ---------- */
.hero { position: relative; height: min(100svh, 980px); min-height: 560px; overflow: hidden; background: #000; }
.hero video, .hero .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,9,0.82) 0%, rgba(10,10,9,0.45) 9%, rgba(10,10,9,0) 20%, rgba(10,10,9,0) 30%, rgba(10,10,9,0.72) 46%, rgba(10,10,9,0.9) 60%, #0a0a09 84%); }
.hero-text { position: absolute; z-index: 1; left: 0; right: 0; bottom: clamp(32px, 7vh, 80px); }
.kicker { font: 500 12px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); display: flex; align-items: center; gap: 10px; }
.kicker::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
h1 { margin: 16px 0 0; font: 600 clamp(46px, 7.6vw, 116px)/0.92 var(--display); letter-spacing: -0.05em; word-spacing: 0.08em; text-wrap: balance; }
.hero p { margin: 18px 0 28px; max-width: 34ch; font-size: clamp(17px, 1.7vw, 22px); color: rgba(242, 241, 236, 0.78); }
.hero .ctas { flex-wrap: wrap; }

/* ---------- statement ---------- */
.statement { padding-block: clamp(80px, 13vw, 170px) clamp(40px, 6vw, 80px); }
.statement p:not(.label):not(.sub) { margin: 0; max-width: 24ch; font: 600 clamp(32px, 4.6vw, 66px)/1.04 var(--display); letter-spacing: -0.04em; text-wrap: balance; }
.statement .sub { margin: 22px 0 0; max-width: 40ch; font-size: clamp(18px, 1.7vw, 22px); color: var(--grey); }
.label { font: 600 13px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 22px; color: var(--ink); }
.label em { font-style: normal; color: var(--green); }

/* ---------- device frames ---------- */
/* A phone screen: just the cropped app UI, with softly rounded corners that scale with its width
   (cqi) and a faint hairline so the dark UI separates from the page. No device edge. */
.phone { position: relative; width: var(--w, 280px); aspect-ratio: 720 / 1207; container-type: inline-size; flex: none; }
.phone::before { content: ''; position: absolute; inset: 0; border-radius: 5cqi; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.phone::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 5cqi; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); }
.phone > img, .phone > video, .phone > .screen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 5cqi; overflow: hidden; background: #111110; }
.laptop { position: relative; width: 100%; container-type: inline-size; }
.laptop .screen { margin: 0 4.5%; border-radius: 1.9cqi 1.9cqi 0 0; padding: 1.4%; background: #1b1b1a; box-shadow: 0 0 0 1px #2e2e2b inset; }
.laptop .screen > img, .laptop .screen > video { width: 100%; aspect-ratio: 1440 / 770; object-fit: cover; object-position: top; border-radius: 0.7cqi; background: #111110; }
.laptop .base { height: 14px; margin: 0; border-radius: 0 0 16px 16px; background: linear-gradient(#2a2a28, #161615); }
.cut { border-radius: 14px; overflow: hidden; background: #111110; box-shadow: 0 0 0 1px #2e2e2b, 0 24px 70px rgba(0, 0, 0, 0.65); }
.cut img { width: 100%; }

/* ---------- feature rows ---------- */
.feature { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 6vw, 96px); align-items: center; padding-block: clamp(70px, 9vw, 130px); }
.feature.flip .stage { order: 2; }
.feature h2 { margin: 0 0 22px; font: 600 clamp(38px, 5vw, 72px)/0.98 var(--display); letter-spacing: -0.045em; text-wrap: balance; }
.feature .lead { margin: 0 0 26px; font-size: clamp(17px, 1.5vw, 20px); color: var(--grey); max-width: 46ch; }
.feature ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; color: rgba(242, 241, 236, 0.86); }
.feature li { position: relative; padding-left: 22px; max-width: 52ch; }
.feature li::before { content: ''; position: absolute; left: 2px; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.feature li b { color: var(--ink); font-weight: 600; }
.stage { position: relative; min-width: 0; }
.panel { border-radius: var(--r); overflow: hidden; background: #000; aspect-ratio: 1; }
.panel > img, .panel > video { width: 100%; height: 100%; object-fit: cover; }
.stage .phone { position: absolute; }
.stage .float { position: absolute; }
@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; }
  .feature.flip .stage { order: 0; }
}

/* specific stages */
.st-stack .panel { width: 80%; margin-left: 12%; }
.st-stack .phone { --w: min(40%, 240px); right: -2%; bottom: -10%; }
.st-stack .float { width: 32%; left: 0; top: 10%; }
/* The stack cut-out is a tall window: show its top (Source and the effects), not the empty list below. */
.st-stack .float img { aspect-ratio: 0.62; object-fit: cover; object-position: top; display: block; }
@media (max-width: 900px) { .st-stack { margin-bottom: 14%; } .st-stack .float { top: 6%; } }
.st-scenes { display: flex; gap: 4%; justify-content: center; align-items: flex-start; }
.st-scenes .phone { position: relative; --w: min(46%, 300px); }
.st-scenes .phone:nth-child(2) { margin-top: 14%; }
.st-sound .panel { aspect-ratio: 1440 / 770; border-radius: 12px; box-shadow: 0 0 0 1px #2e2e2b; }
.st-sound .phone { --w: min(36%, 220px); right: -3%; bottom: -30%; }
.st-sound .float { width: 46%; left: -4%; bottom: -26%; }
.st-sound { margin-bottom: 26%; }
.st-export { display: flex; gap: 4%; justify-content: center; }
.st-export .phone { position: relative; --w: min(46%, 300px); }
.st-export .phone:nth-child(2) { margin-top: 12%; }
.st-export .phone > img { aspect-ratio: auto; }

/* ---------- effects ---------- */
.effects { padding-block: clamp(70px, 9vw, 120px); border-top: 1px solid var(--line); }
.effects .big { margin: 0 0 18px; max-width: 30ch; font: 600 clamp(30px, 4vw, 56px)/1.06 var(--display); letter-spacing: -0.04em; }
.effects .big em { font-style: normal; color: var(--green); }
.effects .note { color: var(--grey); margin: 0 0 40px; }
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 28px 32px; }
.cat h3 { margin: 0 0 8px; font: 600 15px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.cat h3::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.cat p { margin: 0; color: var(--grey); font-size: 15px; }

/* ---------- every screen ---------- */
.screens { padding-block: clamp(70px, 9vw, 130px); }
.screens h2 { margin: 0 0 22px; font: 600 clamp(38px, 5.4vw, 80px)/0.96 var(--display); letter-spacing: -0.05em; max-width: 14ch; text-wrap: balance; }
.screens .lead { color: var(--grey); font-size: clamp(17px, 1.5vw, 20px); max-width: 52ch; margin: 0 0 48px; }
.screens-stage { position: relative; display: flex; gap: 3%; align-items: flex-end; }
.screens-stage .phones { display: flex; gap: 3%; flex: 1.2; min-width: 0; }
.screens-stage .phones .phone { --w: 100%; flex: 1; width: auto; min-width: 0; }
.screens-stage .laptop { flex: 1.4; min-width: 0; }
.screens-stage figcaption { margin-top: 14px; color: var(--grey); font: 500 12px/1.4 var(--mono); letter-spacing: 0.04em; }
@media (max-width: 900px) { .screens-stage { flex-direction: column; align-items: stretch; gap: 40px; } .screens-stage .phones .phone:nth-child(3) { display: none; } }

/* ---------- gallery ---------- */
.gallery { padding-block: clamp(70px, 9vw, 120px); border-top: 1px solid var(--line); }
.gallery-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 32px; }
.gallery-head h2 { margin: 0; font: 600 clamp(38px, 5vw, 72px)/0.98 var(--display); letter-spacing: -0.045em; }
.gallery-head p { margin: 0; color: var(--grey); max-width: 34ch; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; gap: 10px; }
.tile { position: relative; overflow: hidden; border-radius: 12px; background: #000; aspect-ratio: 1; margin: 0; }
.tile.wide { grid-column: span 2; aspect-ratio: 2 / 1; }
.tile.big { grid-column: span 2; grid-row: span 2; }
.tile img, .tile video { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2, 0, 0, 1); }
.tile:hover img, .tile:hover video { transform: scale(1.03); }
.tile figcaption { position: absolute; left: 12px; bottom: 10px; font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); opacity: 0; transition: opacity 0.2s; }
.tile:hover figcaption { opacity: 1; }
@media (max-width: 900px) {
  .gallery-head { flex-direction: column; align-items: start; }
  .grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; }
  .grid::-webkit-scrollbar { display: none; }
  .tile, .tile.wide, .tile.big { flex: none; width: 78vw; aspect-ratio: 1; scroll-snap-align: center; }
  .tile figcaption { opacity: 1; }
}

/* ---------- pricing ---------- */
.pricing { padding-block: clamp(70px, 9vw, 130px); border-top: 1px solid var(--line); }
.pricing h2 { margin: 0 0 14px; font: 600 clamp(38px, 5vw, 72px)/0.98 var(--display); letter-spacing: -0.045em; }
.pricing .lead { color: var(--grey); margin: 0 0 40px; max-width: 54ch; }
.compare { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.crow { display: grid; grid-template-columns: 1.1fr 1fr 1fr; border-top: 1px solid var(--line); }
.crow:first-child { border-top: 0; }
.crow > div { padding: 16px clamp(14px, 2vw, 28px); min-width: 0; color: rgba(242, 241, 236, 0.86); }
.crow > div[role="rowheader"] { color: var(--grey); }
.crow > .pro { background: rgba(185, 217, 74, 0.06); border-left: 1px solid rgba(185, 217, 74, 0.35); }
/* The Free column is its own box, the same size as Pro: a line between it and the row labels. */
.crow > div:nth-child(2) { border-left: 1px solid var(--line); }
.chead > div { padding-block: clamp(20px, 2.6vw, 34px); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.chead h3 { margin: 0; font: 600 clamp(26px, 2.8vw, 36px)/1 var(--display); letter-spacing: -0.03em; }
.chead .price { font: 500 14px/1.4 var(--sans); color: var(--grey); }
.chead .price b { display: block; color: var(--ink); font: 600 30px/1.1 var(--display); letter-spacing: -0.02em; }
.chead .price s { color: var(--dim); font-weight: 500; }
@media (max-width: 700px) {
  .crow { grid-template-columns: 1fr 1fr; }
  .crow > div[role="rowheader"] { grid-column: 1 / -1; padding-bottom: 0; font-size: 14px; }
  .crow > div:nth-child(2) { border-left: 0; }
  .chead > div:first-child { display: none; }
}
.fine { margin-top: 18px; color: var(--dim); font-size: 14px; }
@media (max-width: 900px) { .plans, .plan { grid-template-columns: 1fr; } }

/* ---------- closing ---------- */
.closing { position: relative; overflow: hidden; padding-block: clamp(90px, 12vw, 170px); text-align: center; border-top: 1px solid var(--line); }
.closing video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.32; }
.closing .wrap { position: relative; }
.closing h2 { margin: 0 0 26px; font: 600 clamp(48px, 8vw, 120px)/0.92 var(--display); letter-spacing: -0.055em; }
.closing .ctas { justify-content: center; flex-wrap: wrap; }
footer { border-top: 1px solid var(--line); padding-block: 34px calc(34px + env(safe-area-inset-bottom, 0px)); color: var(--grey); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-left: auto; }
footer a { text-decoration: none; }
footer a:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .tile img, .tile video { transition: none; } }

/* ---------- live demo ---------- */
.demo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2.2fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding-block: clamp(64px, 8vw, 120px) 0; }
.demo h2 { margin: 0 0 18px; font: 600 clamp(32px, 3.2vw, 46px)/1 var(--display); letter-spacing: -0.045em; text-wrap: balance; }
.demo .lead { margin: 0 0 14px; color: var(--grey); font-size: clamp(16px, 1.4vw, 19px); max-width: 34ch; }
.demo-note { margin: 0; color: var(--dim); font: 500 12px/1.4 var(--mono); letter-spacing: 0.04em; }
.demo-device { min-width: 0; position: relative; }
/* "Try it out" splash over the frame until the visitor starts using the app. */
.demo-splash { position: absolute; z-index: 3; left: 50%; top: 0; transform: translate(-50%, -50%) rotate(-2deg); display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; background: var(--green); color: #0a0a09; font: 500 15px/1 var(--sans); white-space: nowrap; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 0 6px rgba(185, 217, 74, 0.18); pointer-events: none; transition: opacity 0.4s, transform 0.4s; animation: splash-bob 2.4s ease-in-out infinite; }
.demo-splash b { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.demo-splash .sep { width: 1px; height: 16px; background: rgba(10, 10, 9, 0.35); }
.demo-splash .dot { width: 9px; height: 9px; border-radius: 50%; background: #0a0a09; animation: splash-dot 1.2s ease-in-out infinite; }
.demo-device.used .demo-splash { opacity: 0; animation: none; transform: translate(-50%, -80%) rotate(-2deg); }
@keyframes splash-bob { 50% { transform: translate(-50%, -62%) rotate(-2deg); } }
@keyframes splash-dot { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .demo-splash, .demo-splash .dot { animation: none; } }
.demo-screen { position: relative; overflow: hidden; background: #0e0e0d; }
.demo-laptop .demo-screen { aspect-ratio: 1440 / 770; border-radius: 0.7cqi; }
.demo-screen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: opacity 0.4s; }
.demo-screen > iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; opacity: 0; transition: opacity 0.4s; background: #0e0e0d; }
.demo-screen.live > iframe { opacity: 1; }
.demo-screen.live > img { opacity: 0; pointer-events: none; }
.demo-phone { display: none; }
@media (max-width: 900px) {
  .demo { grid-template-columns: 1fr; }
  .demo-laptop { display: none; }
  .demo-phone { display: block; --w: min(82vw, 360px); margin: 0 auto; }
  .demo-device { margin-top: 24px; }
  .demo-splash { padding: 11px 16px; font-size: 14px; }
  .demo-splash b { font-size: 16px; }
}
.demo[hidden] { display: none; }
/* Tall screens: the text covers the lower half of the piece, so that half gets a heavy dark fade. */
@media (max-aspect-ratio: 1/1) {
  h1 { letter-spacing: -0.03em; line-height: 0.96; }
  .hero::after { background: linear-gradient(180deg, rgba(10,10,9,0.8) 0%, rgba(10,10,9,0) 14%, rgba(10,10,9,0) 60%, #0a0a09 100%); }
  /* The dark backing follows the text block itself, so it starts just above the green line on any
     phone height (tall phones put the text much higher than a fixed fade would). */
  .hero-text::before { content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: -120px; bottom: calc(-1 * clamp(32px, 7vh, 80px)); background: linear-gradient(180deg, rgba(10, 10, 9, 0) 0, rgba(10, 10, 9, 0.86) 110px, rgba(10, 10, 9, 0.94) 100%); }
}

/* ---------- one piece, step by step ---------- */
.steps { padding-block: clamp(24px, 4vw, 48px) clamp(40px, 6vw, 80px); }
.steps-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.steps-row li { display: flex; flex-direction: column; gap: 4px; }
.steps-row figure { position: relative; margin: 0 0 12px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #000; }
.steps-row figure > img, .steps-row figure > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.steps-row li:not(:last-child) figure::after { content: '→'; position: absolute; right: 10px; bottom: 8px; color: rgba(10, 10, 9, 0.55); font: 600 18px/1 var(--sans); }
.steps-row .n { color: var(--green); font: 500 12px/1 var(--mono); letter-spacing: 0.06em; }
.steps-row b { font: 600 18px/1.2 var(--sans); letter-spacing: -0.01em; }
.steps-row b + span { color: var(--grey); font-size: 14px; line-height: 1.45; }
@media (max-width: 900px) { .steps-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } }

/* "Runs in your browser" facts: a quiet row under the hero buttons, a three-up row in the devices section. */
.hero .anywhere { display: flex; flex-wrap: wrap; gap: 6px 18px; max-width: none; margin: 22px 0 0; font: 500 12px/1.4 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: rgba(242, 241, 236, 0.7); }
.anywhere span { display: inline-flex; align-items: center; gap: 8px; }
.anywhere span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.browser-facts { list-style: none; margin: -20px 0 48px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.browser-facts li { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.browser-facts b { font: 600 16px/1.2 var(--sans); }
.browser-facts b::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: var(--green); vertical-align: 2px; }
.browser-facts span { color: var(--grey); font-size: 14px; line-height: 1.45; }
@media (max-width: 760px) { .browser-facts { grid-template-columns: 1fr; margin-top: -24px; } }

/* ---------- for musicians: a cover and a vertical loop with a player bar ---------- */
.st-music { position: relative; padding: 0 22% 14% 0; }
.st-music figure { margin: 0; }
.st-music .cover { position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.st-music .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-type { position: absolute; inset: auto 0 0 0; padding: 9% 7% 7%; display: flex; flex-direction: column; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, 0.55)); container-type: inline-size; }
.cover-type .artist { font: 600 4.2cqi/1 var(--sans); letter-spacing: 0.32em; text-transform: uppercase; }
.cover-type .title { margin-top: 2.4cqi; font: 800 13cqi/0.9 var(--display); letter-spacing: -0.05em; text-transform: uppercase; }
.cover-type .ep { margin-top: 2.6cqi; font: 500 3.6cqi/1 var(--mono); letter-spacing: 0.2em; }
.st-music .canvas { position: absolute; right: 0; bottom: 0; width: 38%; aspect-ratio: 9 / 16; container-type: inline-size; border-radius: 7% / 3.94%; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 30px 80px rgba(0, 0, 0, 0.7); }
.st-music .canvas video { width: 100%; height: 100%; object-fit: cover; display: block; }
.player { position: absolute; inset: auto 0 0 0; padding: 30cqi 7cqi 8cqi; display: flex; flex-direction: column; gap: 5cqi; background: linear-gradient(transparent, rgba(0, 0, 0, 0.75)); }
.player .np { display: flex; align-items: center; gap: 4.5cqi; color: #fff; }
.player .np img { width: 15cqi; height: 15cqi; border-radius: 1.5cqi; object-fit: cover; }
.player .np > span { display: flex; flex-direction: column; gap: 1cqi; min-width: 0; }
.player b { font: 700 6cqi/1.1 var(--sans); }
.player .np > span > span { font: 500 5cqi/1.1 var(--sans); color: rgba(255, 255, 255, 0.7); }
.player .bar { height: 1cqi; min-height: 2px; border-radius: 1cqi; background: rgba(255, 255, 255, 0.28); overflow: hidden; }
.player .bar i { display: block; width: 38%; height: 100%; background: #fff; animation: np-bar 8s linear infinite; }
@keyframes np-bar { from { width: 4%; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .player .bar i { animation: none; } }

/* ---------- newsletter ---------- */
.news { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: center; padding-block: clamp(60px, 8vw, 110px); }
.news h2 { margin: 0 0 16px; font: 600 clamp(32px, 4vw, 56px)/1 var(--display); letter-spacing: -0.045em; }
.news .lead { margin: 0; color: var(--grey); font-size: clamp(16px, 1.4vw, 19px); max-width: 40ch; }
.news-row { display: flex; gap: 10px; }
.news-row input { flex: 1; min-width: 0; height: 48px; padding: 0 16px; border-radius: 10px; border: 1px solid rgba(242, 241, 236, 0.22); background: var(--panel); color: var(--ink); font: 400 16px var(--sans); }
.news-row input:focus { outline: none; border-color: var(--green); }
.news-row .btn { height: 48px; }
.news-msg { min-height: 1.4em; margin: 10px 0 0; font-size: 14px; color: var(--green); }
.news-msg.err { color: #ff8a7a; }
.news-fine { margin: 2px 0 0; color: var(--dim); font-size: 13px; }
.news-fine a { color: inherit; }
@media (max-width: 760px) { .news { grid-template-columns: 1fr; } .news-row { flex-direction: column; } .news-row input { flex: none; } }

/* Steps: the same idea from photos, as two phone recordings beside a short text. */
.photo-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding-block: clamp(40px, 6vw, 90px); }
.photo-copy h3 { margin: 0 0 14px; font: 600 clamp(28px, 3vw, 42px)/1.02 var(--display); letter-spacing: -0.04em; }
.photo-copy p:not(.label):not(.prints-note) { margin: 0; color: var(--grey); font-size: clamp(16px, 1.3vw, 18px); max-width: 42ch; }
.photo-phones { display: flex; gap: 5%; justify-content: center; align-items: flex-start; }
.photo-phones .phone { --w: min(44%, 280px); margin: 0; }
.photo-phones .phone:nth-child(2) { margin-top: 10%; }
@media (max-width: 900px) { .photo-row { grid-template-columns: 1fr; } }

/* Photo section: exported stills laid like overlapping prints under the text. */
.prints { position: relative; margin-top: clamp(28px, 4vw, 44px); aspect-ratio: 16 / 10; max-width: 560px; }
.prints figure { position: absolute; width: 62%; margin: 0; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 22px 60px rgba(0, 0, 0, 0.65); transition: transform 0.3s; }
.prints img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prints figure:nth-child(1) { left: 0; top: 4%; transform: rotate(-4deg); }
.prints figure:nth-child(2) { left: 19%; top: 18%; transform: rotate(2deg); z-index: 1; }
.prints figure:nth-child(3) { right: 0; top: 0; transform: rotate(5deg); }
.prints figure:hover { transform: rotate(0) scale(1.04); z-index: 2; }
.prints-note { margin: 14px 0 0; color: var(--dim); font: 500 12px/1.4 var(--mono); letter-spacing: 0.04em; }

/* ---------- same project, every screen ---------- */
.devices { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: clamp(20px, 4vw, 60px) clamp(60px, 8vw, 110px); }
.devices-stage { position: relative; padding: 0 9% 9% 0; }
.devices-stage .phone { position: absolute; right: 0; bottom: 0; --w: min(27%, 210px); }
.devices-copy h2 { margin: 0 0 16px; font: 600 clamp(32px, 3.8vw, 54px)/1 var(--display); letter-spacing: -0.045em; text-wrap: balance; }
.devices-copy p:not(.anywhere) { margin: 0; color: var(--grey); font-size: clamp(16px, 1.4vw, 19px); max-width: 40ch; }
.devices-copy .anywhere { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 22px 0 0; font: 500 12px/1.4 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: rgba(242, 241, 236, 0.7); }
.devices-copy .anywhere span { display: inline-flex; align-items: center; gap: 8px; }
.devices-copy .anywhere span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
@media (max-width: 900px) { .devices { grid-template-columns: 1fr; } .devices-stage .phone { --w: 30%; } }

/* Musicians: two alternate covers peek out behind the main one. */
.st-music .cover.back { position: absolute; top: 0; left: 0; width: calc(100% - 22%); opacity: 0.9; }
.st-music .cover.b1 { transform: translate(-6%, -5%) rotate(-6deg); }
.st-music .cover.b2 { transform: translate(5%, -8%) rotate(5deg); }
.st-music .cover:not(.back) { position: relative; z-index: 1; }
.st-music .canvas { z-index: 2; }

/* ---------- words and vectors ---------- */
.type-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding-block: clamp(30px, 5vw, 70px) clamp(50px, 7vw, 100px); }
.type-copy h3 { margin: 0 0 14px; font: 600 clamp(28px, 3vw, 42px)/1.02 var(--display); letter-spacing: -0.04em; }
.type-copy p:not(.label) { margin: 0; color: var(--grey); font-size: clamp(16px, 1.3vw, 18px); max-width: 42ch; }
.type-tiles { display: grid; grid-template-columns: 1fr 0.62fr 1fr; gap: 12px; align-items: center; }
.type-tiles figure { margin: 0; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #000; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55); }
.type-tiles figure.tall { aspect-ratio: 9 / 16; }
.type-tiles img, .type-tiles video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .type-row { grid-template-columns: 1fr; } }

/* ---------- 3D: the render large, two stills beside it; copy on the right ---------- */
.d3-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding-block: 0 clamp(50px, 7vw, 100px); }
.d3-tiles { display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; }
.d3-tiles figure { margin: 0; border-radius: 10px; overflow: hidden; background: #000; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55); aspect-ratio: 1; }
.d3-tiles figure.main { grid-row: span 2; aspect-ratio: auto; }
.d3-tiles img, .d3-tiles video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .d3-row { grid-template-columns: 1fr; } .d3-row .type-copy { order: -1; } }
/* The cover's title sits bottom-right, so the loop overlaps its bottom-left corner instead. */
.st-music { padding: 0 0 14% 22%; }
.st-music .canvas { left: 0; right: auto; }
.st-music .cover.back { left: 22%; width: auto; right: 0; }
#music { overflow-x: clip; }

/* ---------- musicians: how a cover is built, and the covers (straight, no tilt) ---------- */
.st-covers { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(12px, 1.6vw, 20px); align-items: start; }
.st-covers figure { margin: 0; }
.st-covers .build .phone { position: relative; --w: 100%; width: 100%; aspect-ratio: 1080 / 1782; }
.st-covers .covers { display: grid; gap: clamp(12px, 1.6vw, 20px); }
.st-covers .covers img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border-radius: 8px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 20px 60px rgba(0, 0, 0, 0.55); }
.st-covers figcaption { margin-top: 8px; color: var(--dim); font: 500 11px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }

/* The full-screen loop with a now-playing bar, beside the covers. */
.st-covers { grid-template-columns: 1.13fr 1fr; }
.st-covers .canvas { position: relative; margin: 0; aspect-ratio: 9 / 16; container-type: inline-size; border-radius: 7% / 3.94%; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 30px 80px rgba(0, 0, 0, 0.7); }
.st-covers .canvas video { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-covers .player { margin: 0; text-transform: none; letter-spacing: 0; font-family: var(--sans); color: #fff; }
.steps-head { margin-bottom: clamp(20px, 3vw, 36px); }
.screens:has(+ .devices) { padding-bottom: clamp(30px, 4vw, 50px); }
.screens + .devices { padding-top: 0; }

/* Motion & music: one module for scenes and sound. */
.motion { padding-block: clamp(70px, 9vw, 130px); position: relative; }
.motion .anchor { position: absolute; top: 0; }
.motion-head { max-width: 1100px; margin-bottom: clamp(36px, 5vw, 64px); }
.motion-head h2 { margin: 0 0 20px; font: 600 clamp(40px, 5.6vw, 84px)/0.96 var(--display); letter-spacing: -0.05em; text-wrap: balance; }
.motion-head .lead { margin: 0; font-size: clamp(17px, 1.6vw, 22px); color: var(--grey); max-width: 48ch; }
.motion-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 36px); align-items: end; }
.motion-steps li { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.motion-steps .phone { --w: 100%; margin-bottom: 14px; }
.motion-steps figure { margin: 0 0 14px; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: #000; }
.motion-steps figure video { width: 100%; height: 100%; object-fit: cover; display: block; }
.motion-steps .n { color: var(--green); font: 500 12px/1 var(--mono); letter-spacing: 0.06em; }
.motion-steps b { font: 600 19px/1.2 var(--sans); letter-spacing: -0.01em; }
.motion-steps b + span { color: var(--grey); font-size: 15px; line-height: 1.45; max-width: 36ch; }
.motion-details { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid #2a2a27; }
.motion-details h3 { margin: 0 0 16px; font: 600 13px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); }
.motion-details ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; color: rgba(242, 241, 236, 0.86); }
.motion-details li { position: relative; padding-left: 22px; }
.motion-details li::before { content: ''; position: absolute; left: 2px; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.motion-details li b { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) {
  .motion-steps { grid-template-columns: 1fr 1fr; row-gap: 32px; align-items: start; }
  .motion-steps .m-art { grid-column: 1 / -1; order: -1; }
  .motion-details { grid-template-columns: 1fr; }
}
.motion-head h2 span { display: inline-block; }

/* Phone gallery: moving pieces in a swipe row of tall cards, then everything else in a small grid. */
.reel { display: none; }
@media (max-width: 900px) {
  .reel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 calc(-1 * var(--gutter)) 10px; padding-inline: var(--gutter); scrollbar-width: none; }
  .reel::-webkit-scrollbar { display: none; }
  .reel-card { position: relative; flex: none; width: 66vw; aspect-ratio: 4 / 5; margin: 0; border-radius: 14px; overflow: hidden; background: #000; scroll-snap-align: center; }
  .reel-card video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .reel-card figcaption { position: absolute; left: 12px; bottom: 10px; font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); }
  .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .grid .tile, .grid .tile.wide, .grid .tile.big { width: auto; aspect-ratio: 1; grid-column: auto; grid-row: auto; border-radius: 8px; }
  .grid .tile.in-reel { display: none; }
  .grid .tile figcaption { display: none; }
}

/* Two more 3D loops side by side, under the three tiles (phone too). */
.d3-media { display: grid; gap: 12px; min-width: 0; }
.d3-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.d3-pair figure { margin: 0; border-radius: 10px; overflow: hidden; background: #000; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55); aspect-ratio: 1; }
.d3-pair video { width: 100%; height: 100%; object-fit: cover; display: block; }