/* Every Space, light: the page still changes Space as you scroll, but softly. A warm paper ground and deep navy ink
   (the Arc-like treatment the user preferred); Boppo's real Space colours live in the window frames, a pastel wash
   that crossfades per chapter, the Space chip and the dot rail. */
:root {
  --paper: #FBF8F2;
  --card: #FFFFFF;
  --ink: #15294F;
  --ink-2: #4B5878;
  --accent: #5B3DF5;
  /* happy lights, for washes, swashes and small marks only (never text) */
  --sun: #FFC94D;
  --coral: #FF8A65;
  --bubble: #FF8FC7;
  --sky: #6CC5FF;
  --mint: #5FE3B0;
  --line: rgba(21, 41, 79, .14);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --display: "Unbounded", "Hanken Grotesk", system-ui, sans-serif;
  --body: "Hanken Grotesk", system-ui, sans-serif;
  --nav-h: 64px;
  /* Boppo's Space gradients, sampled from the app's themes */
  --work: linear-gradient(135deg, #88ADAA 0%, #3D57A8 45%, #2412B7 100%);
  --studio: linear-gradient(135deg, #C9FDD3 0%, #8CFBB3 50%, #72F9C4 100%);
  --play: linear-gradient(135deg, #A9A4F0 0%, #5E5BC9 50%, #272D92 100%);
  --night: linear-gradient(135deg, #5A5378 0%, #312E3E 50%, #1B1529 100%);
  --theme: linear-gradient(135deg, #F6DDF8 0%, #DCA8E3 50%, #9B8CDA 100%);
  scrollbar-color: rgba(21, 41, 79, .35) transparent;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); font: 400 18px/1.6 var(--body); caret-color: var(--accent); -webkit-font-smoothing: antialiased; }
::selection { background: var(--ink); color: var(--paper); }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 4px; border-radius: 10px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.035em; margin: 0; text-wrap: balance; }
p { text-wrap: pretty; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; }
.skip:focus { top: 12px; }

/* ---- the light: a soft wash of the current Space, crossfading as chapters change ---- */
.fields { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.field { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease); }
body[data-field="work"] .field[data-space="work"], body[data-field="studio"] .field[data-space="studio"], body[data-field="play"] .field[data-space="play"],
body[data-field="night"] .field[data-space="night"], body[data-field="theme"] .field[data-space="theme"] { opacity: 1; }
/* each wash pairs the Space's own cool light with a warm, happy one */
.field[data-space="work"]  { background: radial-gradient(46% 52% at 84% 30%, rgba(108, 165, 255, .30) 0%, rgba(108, 165, 255, 0) 70%), radial-gradient(42% 46% at 10% 88%, rgba(255, 184, 140, .32) 0%, rgba(255, 184, 140, 0) 70%); }
.field[data-space="studio"] { background: radial-gradient(46% 52% at 84% 30%, rgba(95, 227, 176, .36) 0%, rgba(95, 227, 176, 0) 70%), radial-gradient(42% 46% at 10% 88%, rgba(255, 214, 90, .34) 0%, rgba(255, 214, 90, 0) 70%); }
.field[data-space="play"]  { background: radial-gradient(46% 52% at 84% 30%, rgba(140, 120, 255, .30) 0%, rgba(140, 120, 255, 0) 70%), radial-gradient(42% 46% at 10% 88%, rgba(255, 143, 199, .30) 0%, rgba(255, 143, 199, 0) 70%); }
.field[data-space="night"] { background: radial-gradient(46% 52% at 84% 30%, rgba(110, 92, 200, .22) 0%, rgba(110, 92, 200, 0) 70%), radial-gradient(42% 46% at 10% 88%, rgba(255, 138, 101, .20) 0%, rgba(255, 138, 101, 0) 70%); }
.field[data-space="theme"] { background: radial-gradient(46% 52% at 84% 30%, rgba(255, 143, 199, .30) 0%, rgba(255, 143, 199, 0) 70%), radial-gradient(42% 46% at 10% 88%, rgba(255, 201, 77, .30) 0%, rgba(255, 201, 77, 0) 70%); }

/* ---- nav with Boppo's Space dots ---- */
.top { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 24px;
  background: rgba(251, 248, 242, .82); backdrop-filter: saturate(1.2) blur(16px); -webkit-backdrop-filter: saturate(1.2) blur(16px); border-bottom: 1px solid rgba(21, 41, 79, .06); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 18px/1 var(--display); letter-spacing: -0.03em; }
.brand img { border-radius: 8px; }
.nav-right { display: flex; align-items: center; gap: 14px; }
.dots { position: relative; display: flex; align-items: center; gap: 14px; padding: 8px 12px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.dots a { position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(21, 41, 79, .35); transition: transform .4s var(--ease); }
.dots a[data-space="work"]   { background: var(--work); }
.dots a[data-space="studio"] { background: var(--studio); }
.dots a[data-space="play"]   { background: var(--play); }
.dots a[data-space="night"]  { background: var(--night); }
.dots a[data-space="theme"]  { background: var(--theme); }
.dots a:hover { transform: scale(1.18); }
.dots .pill { position: absolute; top: 4px; left: 0; height: 22px; width: 30px; border-radius: 999px; background: var(--ink); opacity: .12; transition: transform .55s var(--ease); }
.cta-small { font: 650 14px/1 var(--body); text-decoration: none; background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 999px; box-shadow: 0 8px 18px -10px rgba(21, 41, 79, .6); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.cta-small:hover { transform: translateY(-1px); box-shadow: 0 12px 22px -10px rgba(21, 41, 79, .65); }

/* ---- buttons ---- */
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 28px 0 14px; }
.button { display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 26px; border-radius: 999px; font: 650 16px/1 var(--body); text-decoration: none; border: 0; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease); }
.button.primary { background: var(--ink); color: #fff; box-shadow: 0 14px 30px -14px rgba(21, 41, 79, .65); }
.button.primary:hover { transform: translateY(-2px); background: var(--accent); box-shadow: 0 20px 36px -14px rgba(91, 61, 245, .7); }
.button.primary:active { transform: translateY(0); }
.button.ghost { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.button.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }

/* ---- the window frame: a real screenshot set in its Space's gradient, like a Space you're in ---- */
.window-frame { padding: 12px; border-radius: 24px; box-shadow: 0 40px 80px -40px rgba(21, 41, 79, .5), 0 8px 18px -10px rgba(21, 41, 79, .25); }
.window-frame[data-space="work"] { background: var(--work); }
.window-frame img { width: 100%; height: auto; border-radius: 12px; }

/* ---- hero ---- */
.hero { padding: calc(var(--nav-h) + 7vh) 4vw 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero h1 { font-size: clamp(2.4rem, 5.4vw, 5.2rem); line-height: 1.02; letter-spacing: -0.04em; font-weight: 750; }
.hero h1 span { font-weight: 400; color: var(--accent); }
.lede { max-width: 58ch; margin: 22px auto 0; font-size: clamp(18px, 1.4vw, 20px); color: var(--ink-2); }
.fine { margin: 0; font-size: 14px; color: var(--ink-2); text-wrap: balance; }
.hero-window { margin: 44px 0 0; width: min(1120px, 92vw); }
/* the hero film: video and its thumbnail share one 16:9 cell inside the Work frame */
.player { display: grid; }
.player > * { grid-area: 1 / 1; }
.player-video { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 12px; background: #0B1020; object-fit: cover; object-position: 50% 0; }  /* its poster matches the thumbnail; the film itself is exactly 16:9 */
.player-poster { all: unset; grid-area: 1 / 1; position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; cursor: pointer; transition: opacity .45s var(--ease), visibility .45s; }
.player-poster img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; border-radius: 0; }
.player-poster:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 4px; }
.player-pill { position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: 12px; height: 64px; padding: 0 26px 0 10px; border-radius: 999px; background: rgba(21, 41, 79, .9); color: #fff; font: 650 18px/1 var(--body); white-space: nowrap; box-shadow: 0 24px 44px -20px rgba(21, 41, 79, .85); transform: translate(-50%, -50%); transition: transform .3s var(--ease), background-color .3s var(--ease); }
.player-pill .dur { font-weight: 400; opacity: .72; }
.player-dot { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; }
.player-dot svg { width: 20px; height: 20px; fill: var(--ink); margin-left: 2px; }
.player-poster:hover .player-pill { background: var(--accent); transform: translate(-50%, -50%) scale(1.05); }
.player.is-playing .player-poster { opacity: 0; visibility: hidden; }
html:not(.js) .player-poster { display: none; }
/* focus draws inside the picture: violet would vanish against the Work frame */
.player::after { content: ""; grid-area: 1 / 1; z-index: 1; pointer-events: none; border-radius: 12px; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px var(--accent); opacity: 0; }
@supports selector(:has(*)) {
  .player-poster:focus-visible, .player-video:focus-visible { outline: none; }
  .player:has(:focus-visible)::after { opacity: 1; }
}
.js .hero-window { transform: translateY(60px); opacity: 0; }
.js.ready .hero-window { transform: none; opacity: 1; transition: transform 1.2s var(--ease) .1s, opacity .9s var(--ease) .1s; }

/* ---- chapters: text on the left, the pinned framed window on the right ---- */
.chapters { position: relative; display: grid; grid-template-columns: minmax(0, 0.64fr) minmax(0, 1.36fr); gap: 4vw; padding: 6vh 4vw 0; max-width: 1560px; margin: 0 auto; }
.step { min-height: 58vh; display: flex; flex-direction: column; justify-content: center; padding: 3vh 0; }
.step.minor { min-height: 36vh; }
.step h2 { font-size: clamp(1.8rem, 2.8vw, 2.7rem); line-height: 1.08; margin: 0 0 18px; }
.step p { margin: 0; color: var(--ink-2); max-width: 38ch; font-size: clamp(17px, 1.25vw, 19px); }
.step p.big { font: 500 clamp(1.3rem, 1.9vw, 1.8rem)/1.28 var(--display); letter-spacing: -0.03em; color: var(--ink); max-width: 19ch; }
.space-name { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; font: 650 14px/1 var(--body); padding: 9px 14px 9px 10px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); align-self: flex-start; }
.space-name i { width: 14px; height: 14px; border-radius: 50%; }
.step[data-field="work"] .space-name i { background: var(--work); }
.step[data-field="studio"] .space-name i { background: var(--studio); }
.step[data-field="play"] .space-name i { background: var(--play); }
.step[data-field="night"] .space-name i { background: var(--night); }
.step-shot { display: none; }
.stage { position: relative; }
/* centred in the space under the nav: the frame is about 38.9vw tall below 1560px, about 606px above */
.frame { position: sticky; top: max(calc(var(--nav-h) + 2vh), calc(var(--nav-h) + (100vh - var(--nav-h) - 38.9vw) / 2)); aspect-ratio: 16 / 10.4; margin: 10vh 0; border-radius: 26px; box-shadow: 0 50px 90px -46px rgba(21, 41, 79, .55), 0 10px 22px -12px rgba(21, 41, 79, .25); }
.frame .glow { position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .9s var(--ease); }
.frame .glow[data-space="work"] { background: var(--work); }
.frame .glow[data-space="studio"] { background: var(--studio); }
.frame .glow[data-space="play"] { background: var(--play); }
.frame .glow[data-space="night"] { background: var(--night); }
.frame .glow[data-space="theme"] { background: var(--theme); }
/* the frame takes the Space the visible still was captured in (app.js sets it), so it can never wrap the wrong one */
.frame[data-space="work"] .glow[data-space="work"], .frame[data-space="studio"] .glow[data-space="studio"], .frame[data-space="play"] .glow[data-space="play"],
.frame[data-space="night"] .glow[data-space="night"], .frame[data-space="theme"] .glow[data-space="theme"] { opacity: 1; }
.frame .shot { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); object-fit: contain; opacity: 0; transform: scale(.98); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.frame .shot.is-on { opacity: 1; transform: none; }
.float-combo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.float-combo .pip { inset: auto -3% -7% auto; width: 40%; height: auto; border-radius: 10px; box-shadow: 0 24px 40px -20px rgba(21, 41, 79, .6); }

/* ---- sections ---- */
.yours, .proof, .questions, .request { position: relative; max-width: 1280px; margin: 0 auto; padding: 9vh 4vw; }
.yours h2, .questions h2 { font-size: clamp(2rem, 3.8vw, 3.4rem); line-height: 1.04; margin-bottom: 32px; }
.claims { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 48px; border-top: 1px solid var(--line); }
.claims li::before { content: ""; display: block; width: 12px; height: 12px; border-radius: 50%; margin-bottom: 14px; background: var(--c, var(--sun)); }
.claims li:nth-child(2) { --c: var(--bubble); }
.claims li:nth-child(3) { --c: var(--sky); }
.claims li:nth-child(4) { --c: var(--mint); }
.claims li:nth-child(5) { --c: var(--coral); }
.claims li:nth-child(6) { --c: var(--accent); }
.claims li { padding: 22px 0 24px; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 16.5px; line-height: 1.55; text-wrap: pretty; }
.claims strong { display: block; font: 650 clamp(1.15rem, 1.6vw, 1.45rem)/1.2 var(--display); letter-spacing: -0.03em; color: var(--ink); margin-bottom: 6px; }

/* ---- proof ---- */
.proof h2 { font-size: clamp(2rem, 4.2vw, 3.8rem); line-height: 1.04; margin-bottom: 36px; }
.proof h2 span { font-weight: 400; color: var(--accent); }
.proof h3 { font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.12; }
.tally { margin: 0 0 48px; max-width: 34ch; font: 300 clamp(1.5rem, 2.6vw, 2.4rem)/1.3 var(--display); letter-spacing: -0.035em; color: var(--ink-2); }
.tally b { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; padding: 0 .06em; background: linear-gradient(transparent 56%, var(--hl, rgba(255, 201, 77, .7)) 56%, var(--hl, rgba(255, 201, 77, .7)) 90%, transparent 90%); }
.tally b:nth-of-type(2) { --hl: rgba(255, 143, 199, .6); }
.tally b:nth-of-type(3) { --hl: rgba(108, 197, 255, .6); }
.tally b:nth-of-type(4) { --hl: rgba(95, 227, 176, .65); }
.tally b:nth-of-type(5) { --hl: rgba(255, 138, 101, .55); }
.inventory { margin-top: 64px; padding: 30px; border-radius: 26px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -44px rgba(21, 41, 79, .45); }
.inv-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; }
.inv-head h3 { margin: 0; }
.inv-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.inv-filters button { font: 600 13px/1 var(--body); padding: 10px 13px; border-radius: 999px; border: 0; cursor: pointer; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); transition: background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease); }
.inv-filters button:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.inv-filters button[aria-selected="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.inv-filters .count { opacity: .7; margin-left: 5px; font-weight: 400; }
.inv-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); column-gap: 32px; }
.inv-list.clipped { max-height: 470px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.inv-list li { padding: 10px 0 11px; border-bottom: 1px solid var(--line); }
.inv-more { margin: 14px auto 0; display: flex; }
.inv-more[hidden] { display: none; }
.inv-list strong { display: block; font: 650 15px/1.35 var(--body); }
.inv-list span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.inv-hint { margin: 8px 0 0; font-size: 14px; color: var(--ink-2); }
.hint-tap { display: none; }
.play { display: inline-block; width: 15px; height: 15px; vertical-align: -2px; fill: var(--accent); }
.play path { fill: #fff; }
.inv-filters .play { margin-right: 6px; }
.inv-list .feat { all: unset; display: block; width: 100%; cursor: pointer; border-radius: 8px; }
.inv-list .feat:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 4px; }
.inv-list .feat .play { margin-right: 7px; transition: transform .25s var(--ease); }
.inv-list .feat:hover strong, .inv-list .open strong { color: var(--accent); }
.inv-list .feat:hover .play { transform: scale(1.15); }
/* the quick demo: a Boppo-style hover card on desktop, an inline loop on touch */
.demo-card { position: fixed; z-index: 70; left: 0; top: 0; width: 400px; padding: 8px 8px 10px; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -28px rgba(21, 41, 79, .5), 0 8px 18px -10px rgba(21, 41, 79, .25); opacity: 0; transform: translateY(6px) scale(.97); transition: opacity .18s var(--ease), transform .25s var(--ease); pointer-events: none; }
.demo-card.is-on { opacity: 1; transform: none; }
.demo-card p { margin: 8px 4px 0; font: 650 14px/1.3 var(--body); }
.demo-media, .demo-inline { aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--theme); }
.demo-media video, .demo-media img, .demo-inline video, .demo-inline img { width: 100%; height: 100%; object-fit: cover; }
.demo-inline { margin-top: 10px; }
/* ---- questions ---- */
.questions { display: grid; grid-template-columns: .64fr 1.36fr; gap: 56px; align-items: start; }
.questions h2 { margin-bottom: 0; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; font: 600 18px/1.35 var(--body); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink); background: linear-gradient(var(--ink), var(--ink)) center / 10px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.5px 10px no-repeat; transition: transform .35s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 16px; color: var(--ink-2); max-width: 56ch; }

/* ---- request: a soft pastel band, like a Space of its own ---- */
.request { text-align: center; padding: 0 4vw 9vh; }
.request-band { padding: 8vh 4vw 7vh; border-radius: 36px; background: radial-gradient(55% 80% at 10% 0%, #FFE3A3 0%, rgba(255, 227, 163, 0) 70%), radial-gradient(55% 85% at 100% 100%, #FFC6E2 0%, rgba(255, 198, 226, 0) 70%), radial-gradient(40% 60% at 88% 6%, #D8D1FF 0%, rgba(216, 209, 255, 0) 70%), #FFEDE3; box-shadow: inset 0 0 0 1px rgba(21, 41, 79, .06); }
.request h2 { font-size: clamp(2.8rem, 6.4vw, 5.6rem); line-height: .98; letter-spacing: -0.04em; }
.request-band > p { max-width: 44ch; margin: 18px auto 28px; color: var(--ink-2); font-size: 19px; }
.request-form { max-width: 620px; margin: 0 auto; text-align: left; }
.request-form label { display: block; font: 600 14px/1 var(--body); margin: 0 0 10px 18px; }
.field-row { display: flex; flex-wrap: wrap; gap: 10px; }
.field-row input { flex: 1 1 260px; height: 56px; padding: 0 22px; border-radius: 999px; border: 0; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); font: 400 17px/1 var(--body); color: var(--ink); transition: box-shadow .2s var(--ease); }
.field-row input::placeholder { color: #6B7590; }
.field-row input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 5px rgba(91, 61, 245, .18); }
.field-row input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px #B4232A, 0 0 0 5px rgba(180, 35, 42, .14); }
.form-note { min-height: 26px; margin: 12px 0 0 18px; font-size: 15px; color: var(--ink-2); }
.form-note.error { color: #A11D24; font-weight: 600; }
.form-note.ok { color: var(--ink); font-weight: 600; }
.follow { margin: 22px 0 0; font-size: 14px; color: var(--ink-2); }

.foot { background: var(--ink); color: #DCE3F6; }
.foot-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; max-width: 1280px; margin: 0 auto; padding: 36px 4vw 44px; }
.foot img { border-radius: 10px; }
.foot p { margin: 0; font-size: 15px; }
.foot strong { color: #fff; }
.foot .small { flex-basis: 100%; font-size: 13px; color: #B3BEDD; }

/* ---- responsive ---- */
@media (min-width: 1560px) {
  .frame { top: max(calc(var(--nav-h) + 2vh), calc(var(--nav-h) + (100vh - var(--nav-h) - 606px) / 2)); }
}
@media (max-width: 1100px) {
  .claims { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  :root { --nav-h: 58px; }
  .top { padding: 0 14px; }
  .brand span { display: none; }
  .nav-right { gap: 10px; }
  .dots { gap: 11px; padding: 7px 10px; }
  .hero { padding-top: calc(var(--nav-h) + 5vh); }
  .hero-window { margin-top: 32px; width: 100%; }
  .window-frame { padding: 8px; border-radius: 18px; }
  .player-pill { height: 52px; gap: 10px; padding: 0 20px 0 8px; font-size: 16px; }
  .player-dot { width: 36px; height: 36px; }
  .chapters { grid-template-columns: 1fr; padding-top: 4vh; }
  .stage { display: none; }
  .step, .step.minor { min-height: 0; padding: 4vh 0; }
  .step-shot { display: block; width: 100%; height: auto; margin-top: 20px; padding: 8px; border-radius: 18px; box-shadow: 0 30px 50px -34px rgba(21, 41, 79, .55); }
  .step[data-field="work"] .step-shot { background: var(--work); }
  .step[data-field="studio"] .step-shot { background: var(--studio); }
  .step[data-field="play"] .step-shot { background: var(--play); }
  .step[data-field="night"] .step-shot { background: var(--night); }
  .step[data-field="theme"] .step-shot { background: var(--theme); }
  .yours, .proof, .questions { padding: 7vh 5vw; }
  .request { padding: 0 4vw 7vh; }
  .request-band { padding: 7vh 6vw 6vh; border-radius: 28px; }
  .claims { grid-template-columns: 1fr; }
  .inventory { padding: 22px 16px; border-radius: 22px; }
  .questions { grid-template-columns: 1fr; gap: 24px; }
}
@media (hover: none), (pointer: coarse) {
  .hint-hover { display: none; }
  .hint-tap { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js .hero-window { transform: none; opacity: 1; }
}