/* landing.css — the home page (index.html), on top of main.css. Design handoff v2, 2026-10-06.
   Motion lives in assets/js/landing.js; everything here is the resting state, so the page reads
   correctly with no script and with reduced motion. */

/* ---------- shared bits ---------- */
.sec { max-width: var(--measure); margin: 0 auto; padding: clamp(80px, 10vw, 150px) var(--gutter) 0; }
.sec-index { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
.sec-index__no { font-family: var(--mono); font-weight: 600; font-size: 13px; color: var(--accent-text); }
.sec-index__k { font-variation-settings: 'wdth' 118; font-weight: 600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.mega {
  font-variation-settings: 'wdth' 125; font-weight: 600; text-transform: uppercase;
  line-height: .94; letter-spacing: .035em;
}
.sec-h { margin: clamp(28px, 3vw, 44px) 0 clamp(32px, 4vw, 56px); font-size: clamp(36px, 6vw, 96px); }
.lead { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: var(--ink-3); text-wrap: pretty; }
.cap-t { font-variation-settings: 'wdth' 125; font-weight: 600; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; }
.cap-p { font-size: 15px; line-height: 1.55; color: var(--ink-3); text-wrap: pretty; }
.frame {
  position: relative; background: var(--bezel);
  border-radius: clamp(14px, 2vw, 28px); padding: clamp(5px, .7vw, 10px);
  box-shadow: 0 0 0 1px var(--ring), 0 -30px 90px -40px var(--halo), 0 50px 120px -50px rgba(0, 0, 0, .95);
}
.screen { position: relative; overflow: hidden; background: var(--glass); border-radius: clamp(9px, 1.4vw, 20px); }
.screen--pad { aspect-ratio: 2752 / 2064; }   /* the 13-inch iPad, 4:3 (site images v3, 2026-10-13) */
.screen--phone { aspect-ratio: 2868 / 1320; }
.screen > img, .stack > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
[data-sx] { will-change: transform, opacity; }
/* The one-shot reveals (main.css) at half the travel and half the stagger on this page only (2026-10-26). */
.motion [data-rv] { --rv-y: 18px; }
.motion [data-rv].is-in { transition: opacity .8s var(--out) var(--rv-d, 0s), transform .8s var(--out) var(--rv-d, 0s); }
[data-rv="1"] { --rv-d: .045s; }
[data-rv="2"] { --rv-d: .09s; }
[data-rv="3"] { --rv-d: .135s; }
[data-rv="4"] { --rv-d: .18s; }
[data-rv="5"] { --rv-d: .225s; }

/* ---------- hero: pinned scroll stage (§3) ---------- */
.hero { position: relative; height: 400vh; background: var(--bg); }
.hero__pin {
  position: sticky; top: 60px; overflow: hidden; min-height: 520px;
  height: calc(100vh - 60px); height: calc(100svh - 60px);
}
.hero__dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--hair) 1.1px, transparent 1.6px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(75% 65% at 50% 52%, #000 0%, transparent 78%);
  mask-image: radial-gradient(75% 65% at 50% 52%, #000 0%, transparent 78%);
}
.hero__beam { position: absolute; inset: 0; pointer-events: none; opacity: .55; }
.hero__beam i { position: absolute; left: 50%; transform: translateX(-50%); }
.hero__beam i:nth-child(1) {
  top: -12%; width: min(1500px, 150vw); height: 95%;
  background: radial-gradient(38% 60% at 50% 0%, var(--glow));
}
.hero__beam i:nth-child(2) {
  top: -4%; width: min(1100px, 110vw); height: 90%;
  clip-path: polygon(43% 0, 57% 0, 86% 100%, 14% 100%);
  background: linear-gradient(to bottom, rgba(var(--glow-rgb), .22), rgba(var(--glow-rgb), 0) 80%); filter: blur(28px);
}
.hero__beam i:nth-child(3) {
  bottom: 4%; width: min(1200px, 90vw); height: 26%;
  background: radial-gradient(50% 50% at 50% 50%, var(--glow)); filter: blur(10px);
}
.hero__intro {
  position: absolute; left: 0; right: 0; top: clamp(18px, 5vh, 56px); z-index: 3;
  padding-inline: var(--gutter); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 2vh, 22px);
  will-change: transform, opacity;
}
.hero__intro .eyebrow { justify-content: center; }
.hero h1 {
  font-variation-settings: 'wdth' 125; font-weight: 600;
  font-size: clamp(28px, min(5.6vw, 8vh), 108px); line-height: .94; letter-spacing: .035em;
  text-transform: uppercase; text-wrap: balance; max-width: 20ch;
}
.hero__stage {
  position: absolute; left: 50%; top: calc(50% - 34px); z-index: 2;
  width: min(1120px, 88vw, calc((100vh - 290px) * 1.31));
  width: min(1120px, 88vw, calc((100svh - 290px) * 1.31));
  transform: translate(-50%, -50%); perspective: 1800px;
}
.hero__tilt {
  position: relative; transform-origin: 50% 100%;
  transform: translateY(48%) rotateX(13deg) scale(.9); will-change: transform;
}
.hero__frame {
  position: relative; background: var(--bezel);
  border-radius: clamp(14px, 2.2vw, 30px); padding: clamp(6px, .9vw, 12px);
  box-shadow: 0 0 0 1px var(--ring), inset 0 1px 0 rgba(255, 255, 255, .07), 0 -30px 90px -40px var(--halo), 0 60px 140px -50px rgba(0, 0, 0, .95);
}
.hero__frame .screen { border-radius: clamp(8px, 1.3vw, 18px); }
.hero__scr + .hero__scr { clip-path: inset(0 0 0 100%); will-change: clip-path, transform; }
.hero__sweep {
  position: absolute; top: 0; bottom: 0; left: 100%; width: 3px; margin-left: -1.5px; pointer-events: none;
  background: var(--accent); box-shadow: 0 0 28px 6px rgba(var(--accent-rgb), .55), 0 0 2px var(--white); opacity: 0;
}
.hero__co { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.co { position: absolute; left: var(--x); top: -10%; height: var(--h); width: 0; }
.co i:first-child {
  position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--accent);
  transform: scaleY(var(--g, 0)); transform-origin: 50% 100%;
}
.co i:nth-child(2) {
  position: absolute; left: -4.5px; bottom: -4.5px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .22); transform: scale(var(--g, 0));
}
.co span {
  position: absolute; left: 10px; top: -5px; white-space: nowrap;
  opacity: clamp(0, calc((var(--g, 0) - .7) * 3.4), 1);
  font-variation-settings: 'wdth' 118; font-weight: 600; font-size: 11px; letter-spacing: .16em; color: var(--accent-text);
}
.hero__phone { position: absolute; width: 54%; right: -9%; bottom: -16%; will-change: transform, opacity; }
.hero__phone .frame { border-radius: clamp(14px, 2.4vw, 34px); padding: clamp(5px, .7vw, 10px); box-shadow: 0 0 0 1px var(--ring), inset 0 1px 0 rgba(255, 255, 255, .08), 0 50px 120px -30px rgba(0, 0, 0, .95), 0 -20px 70px -30px var(--halo); }
.hero__phone img { width: 100%; height: auto; aspect-ratio: 2868 / 1320; object-fit: cover; border-radius: clamp(10px, 1.8vw, 26px); }

.hero__bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; background: linear-gradient(to bottom, rgba(var(--bg-rgb), 0), var(--bg) 38%); }
.hero__bar-in {
  max-width: var(--measure); margin: 0 auto;
  padding: 30px var(--gutter) clamp(16px, 2.6vh, 28px);
  display: flex; align-items: flex-end; gap: clamp(16px, 3vw, 48px); flex-wrap: wrap;
}
/* All four captions sit in one grid cell, so the block is as tall as the longest at every width and the
   progress bar under it never runs into the text. */
.hero__cap { flex: 1; min-width: min(100%, 300px); position: relative; min-height: 74px; opacity: 0; display: grid; align-items: start; }
.capi { grid-area: 1 / 1; display: flex; gap: 16px; align-items: flex-start; }
.capi + .capi { opacity: 0; }
.capi__no { font-family: var(--mono); font-weight: 600; font-size: 30px; line-height: .9; color: var(--accent-text); }
.capi__body { display: flex; flex-direction: column; gap: 6px; flex: 1; border-left: 1px solid var(--hair); padding-left: 16px; }
.capi__t { font-variation-settings: 'wdth' 118; font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.capi__p { font-size: 14px; line-height: 1.5; color: var(--ink-3); max-width: 60ch; text-wrap: pretty; }
.hero__prog { position: absolute; left: 0; right: 0; bottom: -10px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.hero__prog span { height: 2px; background: var(--hair); position: relative; overflow: hidden; }
/* the four screens' progress in the app's four parameter colours, P1 to P4, as its four sliders wear them */
.hero__prog i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); }
.hero__prog span:nth-child(1) i { background: var(--p1); }
.hero__prog span:nth-child(2) i { background: var(--p2); }
.hero__prog span:nth-child(3) i { background: var(--p3); }
.hero__prog span:nth-child(4) i { background: var(--p4); }
.hero__buy { display: flex; align-items: center; gap: clamp(14px, 2vw, 24px); margin-left: auto; }
.hero__price { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.hero__price b { font-family: var(--mono); font-weight: 600; font-size: clamp(24px, 2.4vw, 32px); line-height: 1; }
.hero__price span { font-variation-settings: 'wdth' 118; font-weight: 600; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }

/* A phone held upright: the bar keeps to one line under a shorter caption, and the callout
   labels shrink so they fit across the narrower frame. */
@media (max-width: 640px) {
  .hero__bar-in { padding-top: 22px; gap: 14px 16px; }
  .hero__cap { min-height: 0; flex-basis: 100%; }
  .capi { gap: 12px; }
  .capi__no { font-size: 22px; }
  .capi__body { padding-left: 12px; }
  .capi__p { font-size: 13px; }
  .hero__buy { width: 100%; flex-direction: column; align-items: stretch; gap: 12px; margin-left: 0; }
  .hero__price { flex-direction: row; align-items: baseline; gap: 12px; }
  .hero__buy .pill { width: 100%; height: 48px; }
  .co span { font-size: 8.5px; letter-spacing: .1em; left: 7px; top: -4px; white-space: normal; width: max-content; max-width: 32vw; line-height: 1.3; }
}
/* A short window (a phone held sideways, a laptop with the toolbars out): the caption note goes, the
   number and title stay. */
@media (max-height: 560px) {
  .capi__p { display: none; }
  .hero__cap { min-height: 0; }
}

/* ---------- ticker ---------- */
.ticker { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); overflow: hidden; white-space: nowrap; background: var(--bg); }
.ticker__track { display: inline-flex; width: max-content; animation: tnt-slide 92s linear infinite; }
.ticker__set {
  display: flex; align-items: center; gap: 30px; padding: 18px 15px; margin: 0; list-style: none;
  font-variation-settings: 'wdth' 125; font-weight: 600; font-size: clamp(14px, 1.4vw, 18px);
  letter-spacing: .14em; text-transform: uppercase;
}
.ticker__set li { display: flex; align-items: center; gap: 30px; }
/* the diamonds between the words take the four parameter colours in turn */
.ticker__set li::after { content: "\25C6"; color: var(--p4); }
.ticker__set li:nth-child(4n+1)::after { color: var(--p1); }
.ticker__set li:nth-child(4n+2)::after { color: var(--p2); }
.ticker__set li:nth-child(4n+3)::after { color: var(--p3); }
@keyframes tnt-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- devices (§4) ---------- */
.devices { position: relative; padding: clamp(80px, 11vw, 160px) 0 clamp(60px, 8vw, 120px); }
.devices::before {
  content: ""; position: absolute; left: 50%; top: 0; width: min(1400px, 140vw); height: 70%;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(40% 50% at 50% 0%, var(--glow));
}
.devices__in { position: relative; max-width: var(--measure); margin: 0 auto; padding-inline: var(--gutter); display: flex; flex-direction: column; gap: clamp(36px, 5vw, 64px); }
.devices__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.devices__head h2 { font-size: clamp(40px, 7.4vw, 124px); line-height: .92; }
.devices__head .lead { max-width: 56ch; }
.devices__head .eyebrow { justify-content: center; }
.tabs { display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); flex-wrap: wrap; justify-content: center; }
.tabs button {
  appearance: none; border: 0; cursor: pointer; height: 44px; padding: 0 22px; border-radius: 999px;
  background: transparent; color: var(--ink-2);
  font-variation-settings: 'wdth' 118; font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  transition: background .3s, color .3s;
}
.tabs button:hover { color: var(--ink); }
@media (max-width: 480px) {
  .tabs { flex-wrap: nowrap; }
  .tabs button { padding: 0 14px; font-size: 11px; letter-spacing: .1em; }
}
.tabs button[aria-selected="true"] { background: var(--on); box-shadow: inset 0 0 0 1px var(--ring); color: var(--ink); }
.dev-stage { position: relative; width: 100%; aspect-ratio: 2.2 / 1; }
.dev-stage::before {
  content: ""; position: absolute; left: 50%; bottom: -4%; width: 70%; height: 20%; transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, var(--glow)); filter: blur(12px); transition: opacity .6s;
}
/* the scroll-in tilt moves only the drawn iPhone and iPad frames; Apple's Duo art (.dev-duo) sits outside it */
.dev-tilt { position: absolute; inset: 0; transform-origin: 50% 0; }
.dev-frame {
  position: absolute; left: 50%; top: 50%; width: 90%; height: 93%; transform: translate(-50%, -50%);
  transition: width .8s cubic-bezier(.65, 0, .2, 1), height .8s cubic-bezier(.65, 0, .2, 1), opacity .6s;
  background: var(--bezel); border-radius: clamp(14px, 2.4vw, 34px);
  box-shadow: 0 0 0 1px var(--ring), inset 0 1px 0 rgba(255, 255, 255, .08), 0 -30px 90px -40px var(--halo), 0 60px 140px -50px rgba(0, 0, 0, .95);
}
[data-dev="1"] .dev-frame { width: 57.5%; height: 96%; }
.dev-screen { position: absolute; inset: clamp(5px, .8vw, 11px); border-radius: clamp(9px, 1.7vw, 24px); overflow: hidden; background: var(--glass); }
.dev-screen > * { opacity: 0; transform: scale(1.05); transition: opacity .6s, transform 1.2s var(--out); }
.dev-screen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
[data-dev="0"] .dev-screen > [data-d="0"],
[data-dev="1"] .dev-screen > [data-d="1"] { opacity: 1; transform: none; }
/* iPhone Duo tab (2026-10-27): Apple's half-folded device art in place of the drawn frame. No background, ring, shadow, glow
   or fold line, never cropped (contain, in a box near its own shape), never tilted or scaled; it only fades. */
[data-dev="2"] .dev-frame { width: 56%; height: 92%; opacity: 0; }
[data-dev="2"] .dev-stage::before { opacity: 0; }
.dev-duo {
  position: absolute; left: 22%; top: 4%; width: 56%; height: 92%; object-fit: contain;
  opacity: 0; transition: opacity .6s; pointer-events: none;
}
[data-dev="2"] .dev-duo { opacity: 1; }
.dev-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(14px, 2vw, 28px); }
.dev-spec { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 2px solid var(--rule); transition: border-color .4s; }
[data-dev="0"] .dev-spec[data-d="0"], [data-dev="1"] .dev-spec[data-d="1"], [data-dev="2"] .dev-spec[data-d="2"] { border-top-color: var(--accent); }
.dev-spec__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dev-spec h3 { font-variation-settings: 'wdth' 125; font-weight: 600; font-size: clamp(20px, 1.8vw, 26px); letter-spacing: .04em; text-transform: uppercase; }
.dev-spec__stat { font-family: var(--mono); font-weight: 600; font-size: 13px; color: var(--accent-text); text-align: right; }
.dev-spec p { font-size: 15px; line-height: 1.55; color: var(--ink-3); text-wrap: pretty; }

/* ---------- 01 detail ---------- */
.trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(16px, 2vw, 28px); }
.trio figure { display: flex; flex-direction: column; gap: 18px; }
.trio figcaption { display: flex; flex-direction: column; gap: 8px; }
.crop {
  position: relative; overflow: hidden; background: var(--glass); border-radius: 22px; aspect-ratio: 2.6 / 1;
  box-shadow: 0 0 0 1px var(--rule); transform-origin: 50% 0; transition: box-shadow .3s;
}
.crop img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--out); }
.crop:hover { box-shadow: 0 0 0 1px var(--accent); }
.crop:hover img { transform: scale(1.03); }

/* ---------- housings + the wipe (§5) ---------- */
.housings {
  position: relative; margin-top: clamp(80px, 10vw, 150px); padding: clamp(70px, 9vw, 130px) 0;
  background: var(--raise); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); overflow: hidden;
  --surface: var(--surface-2);   /* a card inside the raised band: a step above the band, so it still lifts off */
}
.housings__in { position: relative; max-width: var(--measure); margin: 0 auto; padding-inline: var(--gutter); display: flex; flex-direction: column; gap: clamp(36px, 4.5vw, 60px); }
.split { display: flex; gap: clamp(24px, 4vw, 64px); align-items: flex-end; flex-wrap: wrap; }
.housings h2 { flex: 1 1 520px; font-size: clamp(34px, 5.2vw, 84px); text-wrap: balance; }
.housings__side { flex: 0 1 420px; display: flex; flex-direction: column; gap: 20px; }
.housings__side p { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; color: var(--ink-3); text-wrap: pretty; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-3);
  font-variation-settings: 'wdth' 118; font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
}
.chip--light { background: var(--ink); color: var(--bg); box-shadow: none; }
.chip--dark { background: var(--glass); color: var(--ink); }
.wipe { position: relative; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; transform-origin: 50% 0; }
.wipe .frame { border-radius: clamp(14px, 2.6vw, 38px); padding: clamp(5px, .8vw, 12px); box-shadow: 0 0 0 1px var(--ring), 0 60px 140px -50px rgba(0, 0, 0, .95); }
.wipe .screen { border-radius: clamp(10px, 2vw, 30px); }
.wipe__light { clip-path: inset(0 50% 0 0); }
.wipe__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; }
.wipe__handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--accent); box-shadow: 0 0 18px rgba(var(--accent-rgb), .6); }
.wipe__knob {
  position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); height: 44px; padding: 0 6px;
  border-radius: 999px; background: var(--button); display: flex; align-items: center; box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
}
.wipe__knob span { width: 34px; text-align: center; font-family: var(--mono); font-weight: 600; font-size: 14px; color: var(--accent-ink); }
.wipe__l, .wipe__r { position: absolute; top: calc(100% + 14px); }
.wipe__l { left: clamp(16px, 2.4vw, 34px); }
.wipe__r { right: clamp(16px, 2.4vw, 34px); }
.fig-line { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; justify-content: center; padding-top: 22px; text-align: center; }
.fig-line .mono { font-weight: 600; font-size: 11px; color: var(--accent-text); }
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(16px, 2vw, 28px); }
.pair figure { display: flex; flex-direction: column; gap: 14px; }
.pair .shot { border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 1px var(--ring); }
.pair .shot img { width: 100%; height: auto; aspect-ratio: 2752 / 2064; object-fit: cover; }
.pair figcaption { display: flex; justify-content: space-between; gap: 12px; }
.pair figcaption span:first-child { color: var(--ink); }

/* ---------- 02 modes ---------- */
.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: clamp(24px, 4vw, 72px); align-items: start; }
.modes__pin { position: sticky; top: 84px; z-index: 2; background: var(--bg); padding-bottom: 12px; }
.modes__pin .frame { transform-origin: 50% 0; box-shadow: 0 0 0 1px var(--ring), 0 -30px 80px -40px var(--halo), 0 50px 120px -50px rgba(0, 0, 0, .95); }
.modes__pin .screen > img { opacity: 0; transform: scale(1.04); transition: opacity .55s, transform 1.1s var(--out); }
.modes__pin .screen > img.is-on { opacity: 1; transform: none; }
.modes__now { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; }
.modes__dots { display: flex; gap: 5px; }
.modes__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); transition: background .3s; }
.modes__dots i.is-on { background: var(--accent); }
.mode {
  min-height: min(62vh, 560px); display: flex; flex-direction: column; justify-content: center; gap: 14px;
  border-top: 1px solid var(--rule); padding: 36px 0;
}
.mode__h { display: flex; align-items: baseline; gap: 16px; }
.mode__h span { font-family: var(--mono); font-weight: 600; font-size: 14px; color: var(--accent-text); }
.mode h3 { font-variation-settings: 'wdth' 125; font-weight: 600; font-size: clamp(30px, 3.6vw, 56px); letter-spacing: .04em; text-transform: uppercase; line-height: 1; }
.mode p { max-width: 44ch; }
/* Upright phones: the frame rides at the top, so each mode needs less height to come into view. */
@media (max-width: 760px) { .mode { min-height: min(52vh, 460px); } .modes__pin { top: 68px; } }

.duo-card {
  margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 2px; border-radius: 28px; overflow: hidden; background: var(--rule);
}
.duo-card > div { background: var(--surface); padding: clamp(24px, 3vw, 44px); display: flex; flex-direction: column; gap: 16px; }
.duo-card > div:last-child { justify-content: flex-end; }
.duo-card h3 { font-variation-settings: 'wdth' 125; font-weight: 600; font-size: clamp(20px, 2vw, 28px); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); }
.duo-card .big { font-family: var(--mono); font-weight: 600; font-size: clamp(38px, 4.4vw, 64px); line-height: 1; color: var(--ink); }
.duo-card p { font-size: 16px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }

/* ---------- 03 engines ---------- */
.eng-head { display: flex; align-items: flex-end; gap: clamp(18px, 3vw, 48px); flex-wrap: wrap; margin: clamp(28px, 3vw, 44px) 0 clamp(32px, 4vw, 56px); }
.eng-head .nine {
  transform-origin: 0 100%; display: inline-block; font-variation-settings: 'wdth' 125; font-weight: 600;
  font-size: clamp(120px, 22vw, 340px); line-height: .78; letter-spacing: .02em; color: var(--accent);
}
.eng-head h2 { font-size: clamp(36px, 6vw, 96px); }
.eng { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: clamp(20px, 3vw, 48px); align-items: start; }
.eng__show { display: flex; flex-direction: column; gap: 22px; }
.eng__disp {
  position: relative; border-radius: 24px; overflow: hidden; background: var(--glass); aspect-ratio: 431 / 161; transform-origin: 50% 0;
  box-shadow: 0 0 0 1px var(--ring), 0 -30px 90px -40px var(--halo);
}
/* The engine screen is drawn live (eng-live.js): a canvas, with the app's header in HTML over it. Sizes follow the
   app's points on a 410-point iPhone screen, as a share of the screen's width (1pt = 0.244cqw). */
.eng__disp { container-type: inline-size; background: var(--glass); }
.eng__disp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.eng__cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.eng__cv.is-in { animation: eng-in .7s var(--out) both; }
/* 2.3: KINK, MOUTH and CHIP show a capture of the app's screen in place of the canvas (eng-live.js) */
.eng__disp .eng__still[hidden] { display: none; } /* main.css makes every img a block */
.eng__still.is-in { animation: eng-in .7s var(--out) both; }
.eng__disp::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px);
}
.eng__hud {
  position: absolute; top: 0; left: 0; right: 0; z-index: 1; height: 21.5%; padding: 0 2.4cqw 0 2.5cqw;
  display: flex; align-items: center; justify-content: space-between; gap: 2cqw; color: var(--glass-ink); pointer-events: none;
}
.eng__hud-l, .eng__hud-r { display: flex; align-items: center; white-space: nowrap; }
.eng__hud-l {
  gap: 1.3cqw; font-family: var(--sans); font-weight: 600; font-variation-settings: 'wdth' 118;
  font-size: 15px; font-size: 2.68cqw; line-height: 1; letter-spacing: .16em; text-transform: uppercase;
}
.eng__hud-l i {
  flex: none; position: relative; width: 2.1cqw; height: 2.1cqw; min-width: 7px; min-height: 7px; margin-right: -.5cqw;
  border: 1px solid currentColor; border-radius: 50%;
}
.eng__hud-l i::after { content: ""; position: absolute; inset: 27%; border-radius: 50%; background: currentColor; }
.eng__hud-sep { letter-spacing: 0; }
.eng__hud-time { font-family: var(--mono); font-weight: 600; letter-spacing: 0; font-variation-settings: normal; font-size: 16px; font-size: 2.9cqw; }
.eng__hud-r { gap: 2.2cqw; font-family: var(--sans); font-weight: 600; font-variation-settings: 'wdth' 115;
  font-size: 12px; font-size: 2.2cqw; line-height: 1; letter-spacing: .14em; text-transform: uppercase; }
.eng__hud-r b { font-family: var(--mono); font-weight: 600; letter-spacing: 0; font-variation-settings: normal;
  font-size: 36px; font-size: 6.34cqw; line-height: 1; }
@keyframes eng-in { from { opacity: 0; transform: scale(1.04) translateX(1.5%); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
.eng__name { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.eng__name .mono { font-weight: 600; font-size: 14px; color: var(--accent-text); }
.eng__name h3 { font-variation-settings: 'wdth' 125; font-weight: 600; font-size: clamp(28px, 3vw, 44px); letter-spacing: .05em; text-transform: uppercase; line-height: 1; }
.eng__desc { max-width: 52ch; min-height: 3.2em; }
.eng__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 6px; }
.eng__list button {
  appearance: none; border: 0; cursor: pointer; width: 100%; min-height: 58px; padding: 10px 18px; border-radius: 999px;
  display: flex; align-items: center; gap: 14px; text-align: left;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); transition: background .25s, box-shadow .25s;
}
.eng__list button:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
.eng__list .mono { font-weight: 600; font-size: 12px; color: var(--accent-text); }
.eng__list b { display: block; font-variation-settings: 'wdth' 125; font-weight: 600; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.eng__list small { display: block; font-size: 13px; color: var(--ink-4); margin-top: 2px; }
.eng__list button[aria-pressed="true"] { background: var(--on); box-shadow: inset 0 0 0 1px var(--ring); }
.eng__list button[aria-pressed="true"] .mono { color: var(--accent-text); }
.eng__list button[aria-pressed="true"] b { color: var(--ink); }
.eng__list button[aria-pressed="true"] small { color: var(--ink-3); }
.edit-card {
  margin-top: clamp(36px, 4vw, 56px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(20px, 3vw, 48px); align-items: center; padding: clamp(24px, 3vw, 40px);
  border-radius: 28px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule);
}
.edit-card p { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.edit-card .shot { border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px var(--ring); }
.edit-card img { width: 100%; height: auto; aspect-ratio: 2752 / 2064; object-fit: cover; }

/* ---------- 04 drums ---------- */
.drums { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: clamp(20px, 3vw, 48px); align-items: end; }
.drums figure { display: flex; flex-direction: column; gap: 18px; }
.drums .frame { transform-origin: 50% 0; }
.drums figcaption { display: flex; flex-direction: column; gap: 8px; }
.drums figcaption .cap-t { font-size: 16px; }
.drums figcaption .cap-p { font-size: 16px; max-width: 52ch; }
.stats4 { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border-radius: 28px; overflow: hidden; background: var(--rule); }
.stats4 > div { background: var(--surface); padding: clamp(22px, 3vw, 40px); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.stats4 .n { font-variation-settings: 'wdth' 125; font-weight: 600; font-size: clamp(64px, 8vw, 132px); line-height: .85; }
.stats4 .n--accent { color: var(--accent); }
.stats4 .k { font-variation-settings: 'wdth' 118; font-weight: 600; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.stats4 p { font-size: 14px; line-height: 1.55; color: var(--ink-3); text-wrap: pretty; }
.stats4 > .stats4__wide { grid-column: 1 / -1; }
.cards3 { margin-top: clamp(28px, 3vw, 48px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(16px, 2vw, 28px); }
.cards3 figure { display: flex; flex-direction: column; gap: 16px; }
.cards3 figcaption { display: flex; flex-direction: column; gap: 8px; }
.cards3--four { grid-template-columns: 1fr; }
@media (min-width: 640px) { .cards3--four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cards3--four { grid-template-columns: repeat(4, 1fr); } }
/* 2.3 drums: five cards, the three drum synths in a row and the two sampled-kit cards under them */
.cards3--five { grid-template-columns: 1fr; }
@media (min-width: 640px) { .cards3--five { grid-template-columns: repeat(2, 1fr); } .cards3--five > :last-child { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .cards3--five { grid-template-columns: repeat(6, 1fr); } .cards3--five > * { grid-column: span 2; } .cards3--five > :nth-child(n+4) { grid-column: span 3; } }
.card-shot { border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 1px var(--ring); transform-origin: 50% 0; }
.card-shot img { width: 100%; height: auto; aspect-ratio: 2622 / 1206; object-fit: cover; object-position: 50% 0; transition: transform 1.2s var(--out); }
.card-shot:hover img { transform: scale(1.025); }

/* ---------- the limits band ---------- */
.limits {
  position: relative; margin-top: clamp(90px, 11vw, 170px); padding: clamp(80px, 10vw, 150px) 0; overflow: hidden;
  background: var(--bg); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
}
.limits__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 80% at 15% 100%, var(--glow)), radial-gradient(50% 70% at 95% 0%, rgba(var(--mid-rgb), .30), rgba(var(--mid-rgb), 0) 65%);
}
.limits__in { position: relative; max-width: var(--measure); margin: 0 auto; padding-inline: var(--gutter); display: flex; flex-direction: column; gap: clamp(40px, 5vw, 72px); }
.limits h2 { flex: 1 1 560px; font-size: clamp(44px, 8vw, 140px); line-height: .9; letter-spacing: .03em; }
/* the folded iPhone Duo beside the heading, then two paragraphs side by side (2026-10-27, Richard's option 1).
   Apple's device art as is: shown whole, no motion. Phones stack heading, Duo, paragraphs. */
.limits__row { display: flex; align-items: center; justify-content: space-between; gap: clamp(24px, 4vw, 64px); container-type: inline-size; }
/* the heading is sized to its own column (the row less the Duo's 40 % and the gap): "SCREEN." is 5.93 em wide, so it can
   never run into the Duo, at any width (Richard 2026-10-27: the full stop sat on the Duo's edge on a wide screen) */
.limits__row h2 { flex: 1 1 auto; min-width: 0; font-size: min(clamp(44px, 8vw, 140px), calc((60cqi - 64px) / 6.2)); }
.limits__duo { flex: 0 0 40%; margin: 0; display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 1.6vw, 22px); }
.limits__duo img { width: 100%; height: auto; }
.limits__duo figcaption { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); text-align: center; }
.limits__text { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); }
.limits__text p { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: var(--ink-hi); text-wrap: pretty; }
@media (max-width: 760px) {
  .limits__row { flex-direction: column; align-items: stretch; }
  .limits__row h2 { flex: none; font-size: min(clamp(44px, 8vw, 140px), calc(100cqi / 6.2)); }
  .limits__duo { flex: none; width: min(100%, 420px); align-self: center; }
  .limits__text { grid-template-columns: 1fr; gap: 1em; }
}
.limits__nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); border-top: 1px solid var(--line-2); }
.limits__nums > div { padding: clamp(18px, 2.4vw, 30px) 0; border-bottom: 1px solid var(--line-2); display: flex; align-items: flex-end; gap: 16px; }
.limits__nums .n { font-variation-settings: 'wdth' 125; font-weight: 600; font-size: clamp(90px, 11vw, 180px); line-height: .78; }
.limits__nums .n--accent { color: var(--accent); }
/* "~500 Sounds" (2026-10-19): four glyphs where the others have one, so it is set smaller and its label sits under it */
.limits__nums .k { font-variation-settings: 'wdth' 118; font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-hi); padding-bottom: 6px; }

/* ---------- 05 share ---------- */
.share { display: grid; grid-template-columns: minmax(0, 1fr) minmax(60px, 140px) minmax(0, 1fr); gap: clamp(10px, 2vw, 24px); align-items: center; }
.share figure { display: flex; flex-direction: column; gap: 12px; }
.share .frame { border-radius: clamp(10px, 1.8vw, 26px); padding: clamp(4px, .6vw, 8px); box-shadow: 0 0 0 1px var(--ring); }
.share .frame img { width: 100%; height: auto; aspect-ratio: 2868 / 1320; object-fit: cover; border-radius: clamp(7px, 1.3vw, 20px); }
.share figcaption { color: var(--ink); }
.share figure:last-child figcaption { text-align: right; }
.wire { position: relative; height: 44px; }
.wire::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 0; border-top: 2px dotted var(--line-2); }
.wire i {
  position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 14px rgba(var(--accent-rgb), .8); animation: tnt-packet 2.6s cubic-bezier(.5, 0, .5, 1) infinite;
}
.wire i + i { animation-delay: 1.3s; }
@keyframes tnt-packet { 0% { left: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.share-text { margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: clamp(28px, 4vw, 72px); }
.share-text > div { display: flex; flex-direction: column; gap: 18px; }
.share-text .say { font-variation-settings: 'wdth' 118; font-weight: 600; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.2; text-wrap: balance; }
.share-text .lead { font-size: 16px; }
.carry { display: grid; grid-template-columns: auto 1fr; column-gap: 24px; }
.carry dt, .carry dd { padding: 12px 0; border-top: 1px solid var(--rule); }
.carry dt { font-variation-settings: 'wdth' 118; font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.carry dd { font-size: 14px; color: var(--ink-3); text-align: right; }
.carry dt:nth-last-of-type(1), .carry dd:last-of-type { border-bottom: 1px solid var(--rule); }

/* ---------- 06 specs ---------- */
/* The cells reveal one by one, so the hairlines are drawn on the cells rather than shown through the gaps:
   a gap would show a grey block while the cells are still fading in. */
.spec-row {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.75fr);
  margin: clamp(28px, 3vw, 44px) 0; border-radius: 28px; overflow: hidden; background: var(--surface);
}
.spec-row > div { background: var(--surface); padding: clamp(12px, 2vw, 28px); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.spec-row > div + div { box-shadow: inset 2px 0 0 var(--rule); }
.spec-row .n { font-variation-settings: 'wdth' 125; font-weight: 600; font-size: clamp(24px, 4.2vw, 68px); line-height: .85; white-space: nowrap; }
.spec-row .n--accent { color: var(--accent); }
.spec-row .k { font-variation-settings: 'wdth' 118; font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.spec-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 40px); }
.spec-cols h3 { margin: 0 0 6px; font-variation-settings: 'wdth' 125; font-weight: 600; font-size: 14px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-text); }
.spec-cols dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.spec-cols dt { font-size: 14px; color: var(--ink-3); }
.spec-cols dd { font-family: var(--mono); font-weight: 500; font-size: 12.5px; text-align: right; }
@media (max-width: 1080px) { .spec-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; } }
@media (max-width: 760px) {
  .spec-row { grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 22px; }
  .spec-row > div:nth-child(4) { box-shadow: inset 0 2px 0 var(--rule); }
  .spec-row > div:nth-child(n+5) { box-shadow: inset 2px 0 0 var(--rule), inset 0 2px 0 var(--rule); }
  .spec-row .n { font-size: clamp(30px, 9vw, 48px); }
  .spec-row .k { font-size: 10px; letter-spacing: .12em; }
}
@media (max-width: 600px) { .spec-cols { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 07 launch alert ---------- */
.launch { position: relative; margin-top: clamp(90px, 11vw, 170px); padding: clamp(80px, 10vw, 150px) 0 clamp(60px, 7vw, 100px); overflow: hidden; border-top: 1px solid var(--hair); }
.launch::before {
  content: ""; position: absolute; left: 50%; top: 0; width: min(1500px, 150vw); height: 100%; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(40% 55% at 50% 0%, var(--glow));
}
.launch__in { position: relative; max-width: var(--measure); margin: 0 auto; padding-inline: var(--gutter); display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(22px, 3vw, 36px); }
.launch .price { transform-origin: 50% 100%; font-variation-settings: 'wdth' 125; font-weight: 600; font-size: clamp(64px, 18vw, 360px); line-height: .8; letter-spacing: .02em; }
.launch h2 { font-size: clamp(28px, 3.6vw, 56px); line-height: 1; letter-spacing: .05em; }
.launch .lead { max-width: 58ch; font-size: clamp(16px, 1.25vw, 18px); }
/* the three iPhone Duo states above the button (2026-10-27): Apple's device art as is, the clear 2.2:1 stage shown whole */
.launch__duo { width: min(100%, 1000px); margin: calc(min(100%, 1000px) * -.05) 0; pointer-events: none; }
.launch__duo img { width: 100%; height: auto; }
.alert { width: 100%; max-width: 620px; display: flex; flex-direction: column; gap: 14px; margin-top: 8px; scroll-margin-top: 120px; }
.alert > p { font-size: 15px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.alert__form { position: relative; display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.alert__form input[type="email"] {
  flex: 1; min-width: 0; height: 52px; padding: 0 22px; border: 0; outline: none; border-radius: 999px;
  background: transparent; color: var(--ink); font-family: var(--sans); font-size: 16px;
}
.alert__form input[type="email"]::placeholder { color: var(--ink-4); }
.alert__form input[type="email"]:focus { box-shadow: inset 0 0 0 1px var(--accent); }
.alert__form .pill:disabled { opacity: .6; cursor: progress; }
.alert__form[hidden] { display: none; }
.alert__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.alert__done {
  height: 64px; display: flex; align-items: center; justify-content: center; gap: 12px; border-radius: 999px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); padding: 0 20px;
  font-variation-settings: 'wdth' 118; font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
}
.alert__done[hidden] { display: none; }
.alert__status { min-height: 1.5em; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.alert__status:empty { display: none; }
.alert__status[data-state="error"] { color: var(--accent-text); }
.alert__status a { border-bottom: 1px solid var(--accent); }
.alert__fine { font-variation-settings: 'wdth' 118; font-weight: 600; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); }
.launch__ask { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--ink-4); }
.launch__ask a { color: var(--ink); border-bottom: 1px solid var(--line-2); }
.launch__ask a:hover { color: var(--accent-text); }
@media (max-width: 480px) {
  .alert__form { flex-direction: column; border-radius: 28px; }
  .alert__form .pill { width: 100%; }
  .alert__done { height: auto; min-height: 64px; border-radius: 28px; padding: 14px 20px; line-height: 1.5; }
}

/* ---------- reduced motion: everything simply at rest ---------- */
@media (prefers-reduced-motion: reduce) {
  .ticker__track, .wire i { animation: none; }
  .wire i + i { display: none; }
  .wire i { left: 50%; }
  .hero { height: auto; }
  .hero__pin { position: relative; top: 0; }
  .dev-frame, .dev-screen > *, .dev-duo, .dev-stage::before, .modes__pin .screen > img { transition: none; }
  .eng__cv.is-in { animation: none; }
  .crop img, .card-shot img { transition: none; }
  .crop:hover img, .card-shot:hover img, .dev-screen > *, .modes__pin .screen > img { transform: none; }
  .demo__btn { transition: none; }
  .demo__play:hover .demo__btn, .demo__play:focus-visible .demo__btn { transform: none; }
}

/* ---------- the demo video under the hero ---------- */
.hero__demo {
  grid-column: 2; grid-row: 2; justify-self: stretch;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; white-space: nowrap; color: var(--ink);
  font-variation-settings: 'wdth' 118; font-weight: 600; font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  margin-right: -.24em; /* the last letter's spacing would leave '1:47' short of the button's right edge */
}
.hero__demo-ic { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink); transition: box-shadow .2s; }
.hero__demo-ic::after { content: ""; position: absolute; left: 39%; top: 31%; width: 30%; height: 38%; background: var(--accent); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.hero__demo:hover { color: var(--accent-text); }
.hero__demo:hover .hero__demo-ic, .hero__demo:focus-visible .hero__demo-ic { box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 14px rgba(var(--accent-rgb), .55); }
.demo__fig { margin: 0; scroll-margin-top: 90px; }
.demo__screen { aspect-ratio: 16 / 9; }
.demo__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--glass); }
.demo__play { position: absolute; inset: 0; display: grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; }
.demo__btn { position: relative; width: clamp(64px, 8vw, 104px); aspect-ratio: 1; border-radius: 50%; background: var(--button); transition: box-shadow .2s, transform .2s; }
.demo__btn::after { content: ""; position: absolute; left: 38%; top: 30%; width: 32%; height: 40%; background: var(--accent-ink); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.demo__play:hover .demo__btn, .demo__play:focus-visible .demo__btn { box-shadow: 0 0 0 8px rgba(var(--accent-rgb), .28); transform: scale(1.04); }
.demo.is-playing .demo__play { display: none; }
/* Two rows that mirror each other: $49 as tall as the App Store button beside it, and "Once · no subscription"
   level with the demo link under the button (play button under its left edge, words to the right). */
.hero__buy { display: grid; grid-template-columns: auto auto; align-items: center; row-gap: 12px; }
/* Sized so the whole group is as tall as the hero captions beside it (74 px): button 42 + gap 8 + demo row 24. */
@media (min-width: 641px) {
  .hero__buy { row-gap: 8px; }
  .hero__buy .pill { height: 42px; }
  .hero__price { display: contents; }
  .hero__price b { grid-column: 1; grid-row: 1; justify-self: end; font-size: 42px; line-height: 42px; }
  .hero__price span { grid-column: 1; grid-row: 2; justify-self: end; }
  .hero__demo-ic { width: 24px; height: 24px; }
}
@media (max-width: 640px) {
  .hero__buy { display: flex; }
  .hero__demo { align-self: stretch; }
}
/* A short phone: the hero bar has no room for a third line over the device picture, and the video is the next
   thing on the page anyway. */
@media (max-width: 640px) and (max-height: 740px) {
  .hero__demo { display: none; }
}

/* Three iPhone screens (build 68; reused for 1.6.1's new section and the looks): one as wide as the wipe above it,
   two side by side under it (one column on a phone), framed like the wipe */
.tn-looks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 48px) clamp(16px, 2vw, 28px); }
.tn-looks__main { grid-column: 1 / -1; }
.tn-looks figure { display: flex; flex-direction: column; gap: 14px; margin: 0; transform-origin: 50% 0; }
.tn-looks .frame { border-radius: clamp(14px, 2.6vw, 38px); padding: clamp(5px, .8vw, 12px); box-shadow: 0 0 0 1px var(--ring), 0 60px 140px -50px rgba(0, 0, 0, .95); }
.tn-looks .screen { border-radius: clamp(10px, 2vw, 30px); }
.tn-looks figure:not(.tn-looks__main) .frame { border-radius: clamp(12px, 1.6vw, 24px); padding: clamp(4px, .55vw, 8px); }
.tn-looks figure:not(.tn-looks__main) .screen { border-radius: clamp(8px, 1.2vw, 18px); }
.tn-looks figcaption { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tn-looks figcaption span:first-child { color: var(--ink); }
@media (max-width: 700px) { .tn-looks { grid-template-columns: minmax(0, 1fr); } }

/* Every effect, in the Effects mode (2026-10-24): name and one line, a rule between rows */
.fxlist { margin: 6px 0 0; max-width: 60ch; }
.fxlist div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 16px; padding: 9px 0; border-top: 1px solid var(--rule); }
.fxlist div:last-child { border-bottom: 1px solid var(--rule); }
.fxlist dt { font-variation-settings: 'wdth' 118; font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); padding-top: 2px; }
.fxlist dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-3); text-wrap: pretty; }
@media (max-width: 480px) { .fxlist div { grid-template-columns: 6.4em minmax(0, 1fr); gap: 12px; } }

/* The sale, 2026-10-30 to 11-06: the sale words in the site's orange, wherever a price shows. (SALE-REVERT 2026-11-07:
   these rules can stay; nothing uses .sale-t once the sale words are gone.) The hero's price line takes two lines then. */
.sale-t { color: var(--accent-text); font-style: normal; font-weight: inherit; }
@media (min-width: 641px) { .hero__price span { text-align: right; line-height: 1.5; } }
@media (max-width: 640px) {
  .hero__price span { line-height: 1.5; }
  .hero__price:has(.sale-t) { flex-direction: column; align-items: flex-start; align-self: stretch; gap: 8px; }
}

/* 1.6.1 (2026-11-02): what's new. The new TN icon beside its paragraph, the six new things as a grid of cards in the
   duo-card's style, and the clip slot at the iPhone preview's own shape (1920 x 886) instead of the film's 16:9. */
.new-icon { display: flex; gap: 18px; align-items: flex-start; }
.new-icon img { flex: none; width: 76px; height: 76px; border-radius: 17px; box-shadow: 0 0 0 1px var(--ring), 0 18px 40px -18px rgba(0, 0, 0, .9); }
.new-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; border-radius: 28px; overflow: hidden; background: var(--rule); }
.new-list > div { background: var(--surface); padding: clamp(22px, 2.6vw, 36px); display: flex; flex-direction: column; gap: 12px; }
.new-list h3 { font-variation-settings: 'wdth' 125; font-weight: 600; font-size: clamp(18px, 1.6vw, 22px); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); }
.new-list p { font-size: 16px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
@media (min-width: 640px) { .new-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .new-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.demo__screen--phone { aspect-ratio: 1920 / 886; }
.demo__more { margin-top: 18px; text-align: center; font-size: 15px; line-height: 1.6; color: var(--ink-3); text-wrap: balance; }
.demo__more a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.demo__more a:hover { color: var(--accent-text); }

/* ---------- 2.0 (2026-11-03): the plug-in, Song Mode, MIDI learn and Ableton Link ----------
   The 2.0 iPad pictures come from the 11-inch iPad (2420 x 1668), a little wider than the 13-inch's 4:3. */
.screen--pad11 { aspect-ratio: 2420 / 1668; }
.hero--20 .hero__stage {
  width: min(1180px, 88vw, calc((100vh - 300px) * 1.42));
  width: min(1180px, 88vw, calc((100svh - 300px) * 1.42));
}
.hero__sub { max-width: 69ch; font-size: clamp(15px, 1.3vw, 19px); line-height: 1.5; color: var(--ink-2); text-wrap: balance; }
/* the plug-in's card windows, side by side at their true relative size (both images are 2x, shadow included) */
.au-wins { display: grid; grid-template-columns: minmax(0, 1520fr) minmax(0, 906fr); gap: clamp(4px, 1vw, 16px); align-items: end; }
.au-win { margin: 0; display: flex; flex-direction: column; gap: 8px; transform-origin: 50% 100%; }
.au-win img { display: block; width: 100%; height: auto; }
.au-win figcaption { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-inline: 4%; }
.au-win figcaption span:first-child { color: var(--ink); }
@media (max-width: 700px) { .au-wins { grid-template-columns: minmax(0, 1fr); } }
/* 2.2: Tonaut as the host, the made-up plug-in in its window (the image carries its own "shown for illustration" line) */
.au-host { margin: clamp(32px, 5vw, 64px) 0 0; }
.au-host img { display: block; width: 100%; height: auto; border-radius: clamp(8px, 1.2vw, 16px); }
.song-text { max-width: 76ch; display: flex; flex-direction: column; gap: 1em; margin-bottom: clamp(28px, 3vw, 48px); }
.song-pair figure .frame { border-radius: clamp(12px, 1.6vw, 24px); padding: clamp(4px, .55vw, 8px); }
.song-pair figure .screen { border-radius: clamp(8px, 1.2vw, 18px); }
.song-duo { margin: clamp(40px, 5vw, 80px) 0 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.song-duo img { width: 100%; height: auto; }
.song-duo figcaption { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; text-align: center; }
.song-duo figcaption span:first-child { color: var(--ink); }
/* Ableton Link: Ableton's black badge alone, with its line, the name never in capitals */
.link-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: clamp(22px, 2.6vw, 36px); }
.link-badge { width: 132px; height: auto; }
.link-say { font-size: clamp(18px, 1.6vw, 22px); font-weight: 500; line-height: 1.3; color: var(--ink); text-transform: none; letter-spacing: 0; }
.link-devs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .62fr); gap: clamp(16px, 2.4vw, 36px); align-items: end; }
.link-devs figure { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.link-devs figcaption { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.link-devs figcaption span:first-child { color: var(--ink); }
@media (max-width: 700px) { .link-devs { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 2026-11-09 (Richard): the words under a section's headline run across the full width ----------
   The plug-in and looks sections stack the headline over their text, and the text runs in two columns,
   so those sections and Song Mode and Link get shorter. Drums: the stats box sits beside the headline. */
.split { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
.split > h2, .split > .housings__side { flex: none; }
@media (min-width: 820px) {
  .housings__side { display: block; columns: 2; column-gap: clamp(32px, 4.5vw, 72px); }
  .housings__side > p { margin: 0 0 20px; break-inside: avoid; }
  .housings__side > .eyebrow { column-span: all; margin-bottom: 20px; }
  .housings__side > .chips { column-span: all; margin-top: 4px; }
  div.song-text { max-width: none; display: block; columns: 2; column-gap: clamp(32px, 4.5vw, 72px); }
  div.song-text > p { margin: 0 0 1em; break-inside: avoid; }
}
@media (min-width: 1180px) { #link div.song-text { columns: 3; } }
.drums { align-items: stretch; margin-top: clamp(28px, 3vw, 44px); }
.drums__lead { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(24px, 3vw, 44px); min-width: 0; }
.drums__lead > .sec-h { margin: 0; }