/* Barometer XP — discover.barometerxp.com
   Shared across every theme page and the home page. Nothing here is
   theme-specific; a page's identity lives entirely in its themes/*.js file. */

:root {
  --pink: #E91E8C;
  --pink-hot: #ff8fc7;
  --pink-hover: #ff3fa4;
  --pink-light: rgba(233, 30, 140, 0.12);
  --pink-glow: rgba(233, 30, 140, 0.25);
  --bg-page: #0d0d0d;
  --bg-card: #161616;
  --bg-raised: #1f1f1f;
  --text-1: #f5f5f5;
  --text-2: #a3a0a6;
  --border-1: #2a2a2a;
  --border-2: #444444;
  --radius-md: 8px;
  --radius-lg: 12px;
  --font: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--bg-page); color: var(--text-1); font-family: var(--font); font-size: 16px; line-height: 1.6; margin: 0; }
.wrap { max-width: 1060px; margin: 0 auto; padding: 0 24px; }

header.site { position: sticky; top: 0; z-index: 40; background: rgba(13,13,13,0.85); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(42,42,42,0.6); }
.site-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 56px; }
.wordmark { font-weight: 900; font-size: 18px; flex: 1; text-decoration: none; color: var(--text-1); }
.wordmark .xp { color: var(--pink); }
.purpose { font-weight: 800; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pink-hot); white-space: nowrap; }
.nav-cta { flex: 1; text-align: right; }
.btn { display: inline-block; background: var(--pink); color: #fff; font-family: inherit; font-weight: 800; font-size: 15px; border: none; border-radius: var(--radius-md); padding: 11px 24px; cursor: pointer; text-decoration: none; transition: background 0.15s ease; }
.btn:hover { background: var(--pink-hover); }
.btn:focus-visible { outline: 2px solid var(--pink-hot); outline-offset: 3px; }
.btn.small { font-size: 14px; padding: 8px 16px; }

/* ═══════ STAGE ═══════ */
.hero-section { position: relative; }
.stage-wrap { display: flex; justify-content: center;
  background: linear-gradient(180deg, #04040e 0%, #080612 32%, #100b19 62%, #221426 74.4%, #2e1832 75.2%, #0b0813 78%, #020205 90%, #010104 100%); }
.stage { position: relative; width: 100%; max-width: 1520px; aspect-ratio: 16 / 9;
  overflow: hidden; isolation: isolate; container-type: inline-size; }
.stage > div { position: absolute; }

#lay-bg { inset: 0; background: url(bg.webp) center / cover no-repeat, linear-gradient(180deg, #0b0b10 0%, #181020 62%, #261326 75.2%, #14131b 100%); }

#lay-stars { inset: 0 0 26% 0; }
.star { position: absolute; border-radius: 50%; background: #fff;
  opacity: calc(var(--o) * var(--sm, 1)); transition: opacity 1.6s ease; transition-delay: var(--d); }

/* the sky itself sours before anything arrives in it */
#lay-sour { inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s ease;
  background: linear-gradient(180deg, rgba(30,4,22,0.75) 0%, rgba(46,6,30,0.5) 45%, rgba(60,8,34,0.28) 70%, transparent 88%); }

/* Danger reads as HEAT, not darkness. This sits UNDER the hazards on purpose:
   the ground glows, and the crack is the light's source, not its victim. Over
   the top, it screen-blends the fissure into a flat smear. */
#lay-bloom { inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen; transition: opacity 1.4s ease;
  background: radial-gradient(ellipse 55% 30% at 62% 98%, rgba(255,60,170,0.6), transparent 70%),
              radial-gradient(ellipse 20% 22% at 90% 80%, rgba(255,90,185,0.55), transparent 70%),
              radial-gradient(ellipse 72% 10% at 50% 77%, rgba(233,30,140,0.22), transparent 75%); }
/* From Severe (6+ checks) up, the ground glow breathes — deeper and faster as it
   worsens through Chaotic into Dystopian, rather than snapping on at the top. */
.stage.motion[data-zone="4"] #lay-bloom { animation: bloompulse 4s ease-in-out infinite; --pulse: 1.10; }
.stage.motion[data-zone="5"] #lay-bloom { animation: bloompulse 3.6s ease-in-out infinite; --pulse: 1.22; }
.stage.motion[data-zone="6"] #lay-bloom { animation: bloompulse 3.2s ease-in-out infinite; --pulse: 1.36; }
@keyframes bloompulse { 50% { filter: brightness(var(--pulse, 1.3)); } }

/* Hazards GROW rather than un-hide. transform-origin is the point each thing
   grows FROM — the waterline, the ground, the horizon. */
.hz { position: absolute; transition: transform 1.5s var(--ease-out), opacity 1.1s ease; }
#lay-clouds, #lay-fissures { inset: 0; }
#lay-wave { left: -4%; bottom: 15%; width: 30%; aspect-ratio: 900 / 953; transform-origin: left bottom;
  background: url(wave.webp) center / 100% 100% no-repeat; }
.cloud { aspect-ratio: 1100 / 407; transform-origin: center center; background: url(cloud.webp) center / 100% 100% no-repeat; }
.cloud.c1 { left: 16%; top: 30%; width: 56%; }
.cloud.c2 { left: -6%; top: 19%; width: 44%; }
.cloud.c3 { left: 52%; top: 15%; width: 50%; }
.fis { aspect-ratio: 1000 / 248; transform-origin: center bottom; background: url(fissure.webp) center / 100% 100% no-repeat; }
.fis.f1 { left: 50%; bottom: 2%; width: 38%; }
.fis.f2 { left: 30%; bottom: 12%; width: 22%; }
/* centred at 85% so that at its full 1.75x it reaches 99% and its flank is never clipped */
#lay-volcano { left: 77%; bottom: 22%; width: 16%; aspect-ratio: 700 / 602; transform-origin: center bottom;
  background: url(volcano.webp) center / 100% 100% no-repeat; }
#lay-astro { left: 74%; top: 7%; width: 12%; aspect-ratio: 900 / 684; z-index: 5;
  background: url(astro.webp) center / 100% 100% no-repeat;
  transform-origin: center center; transition: transform 1.8s var(--ease-out), opacity 1.8s ease; }

#bolt-box { left: 18%; top: 44%; width: 56%; height: 34%; pointer-events: none; }
#bolt-box svg { width: 100%; height: 100%; }
#bolt-box polyline { stroke: #ffd9ec; stroke-width: 2; fill: none; stroke-linejoin: round; opacity: 0; filter: drop-shadow(0 0 6px var(--pink)); }
#bolt-box polyline.strike { opacity: 1; }
#flash { inset: 0; background: radial-gradient(circle at 46% 38%, rgba(255,190,225,0.55), rgba(233,30,140,0.14) 45%, transparent 75%); opacity: 0; pointer-events: none; }
#flash.on { animation: flashfade 0.5s ease-out; }
@keyframes flashfade { 0% { opacity: 0; } 10% { opacity: 1; } 30% { opacity: 0.3; } 45% { opacity: 0.85; } 100% { opacity: 0; } }

#embers { left: 77%; bottom: 38%; width: 16%; height: 1px; }
.ember { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--pink-hot); animation: rise 3s linear forwards; pointer-events: none; }
@keyframes rise { 0% { opacity: 0.9; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-150px) translateX(14px); } }

.fog { left: -30%; width: 160%; height: 20%; border-radius: 50%; filter: blur(7px); opacity: 0; pointer-events: none; transition: opacity 1.4s ease; }
#fog-a { bottom: 18%; background: linear-gradient(90deg, transparent, rgba(158,140,168,0.3) 30%, rgba(158,140,168,0.36) 60%, transparent); }
#fog-b { bottom: 8%; background: linear-gradient(90deg, transparent, rgba(126,110,140,0.34) 40%, rgba(126,110,140,0.28) 70%, transparent); }
.stage.motion #fog-a { animation: drift 26s ease-in-out infinite; }
.stage.motion #fog-b { animation: drift 34s ease-in-out infinite reverse; }
@keyframes drift { 50% { transform: translateX(9%); } }

#rain { inset: -12%; pointer-events: none; opacity: 0; transition: opacity 1s ease;
  background-image: repeating-linear-gradient(101deg, rgba(255,175,215,0) 0 9px, rgba(255,185,220,0.22) 9px 10px);
  background-size: 190px 190px; }
.stage.motion #rain { animation: rainfall 0.5s linear infinite; }
@keyframes rainfall { to { background-position: -36px 190px; } }

#lay-grade { inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s ease;
  background: radial-gradient(ellipse at 50% 45%, transparent 52%, rgba(5,2,8,0.72) 100%); }

.stage.motion #lay-astro { animation: bob 7s ease-in-out infinite; }
@keyframes bob { 50% { translate: 0 -12px; } }
/* The scene trembles from Severe up — a faint tremor at first, harder and more
   frequent through Chaotic into Dystopian (--shake amplitude + shorter cycle). */
.stage.motion[data-zone="4"] { animation: rumble 8s ease-in-out infinite; --shake: 0.5px; }
.stage.motion[data-zone="5"] { animation: rumble 6s ease-in-out infinite; --shake: 1px; }
.stage.motion[data-zone="6"] { animation: rumble 4.5s ease-in-out infinite; --shake: 1.6px; }
@keyframes rumble {
  0%, 84%, 100% { transform: none; }
  86% { transform: translate(var(--shake), calc(var(--shake) * -0.66)); }
  88% { transform: translate(calc(var(--shake) * -1), var(--shake)); }
  90% { transform: translate(calc(var(--shake) * 0.66), var(--shake)); }
  92% { transform: translate(calc(var(--shake) * -0.66), calc(var(--shake) * -1)); }
}

/* ── headline, barometer, opener ── */
.hero-copy { inset: 0 0 auto 0; z-index: 10; padding: clamp(12px, 2.4vw, 34px) 24px 0; text-align: center; pointer-events: none; }
.hero-copy::before { content: ""; position: absolute; inset: -40px -8% -30% -8%; z-index: -1;
  background: radial-gradient(ellipse 46% 100% at 50% 22%, rgba(11,11,16,0.84), rgba(11,11,16,0.36) 58%, transparent 80%); }
h1 { font-size: clamp(21px, 2.3vw, 36px); line-height: 1.08; font-weight: 900; margin: 0 auto clamp(6px, 1.1cqw, 16px); max-width: 15em; text-wrap: balance; text-shadow: 0 2px 26px rgba(11,11,16,0.95); }
.gauge { pointer-events: none; }
.gauge svg { width: clamp(104px, 10.5cqw, 164px); height: auto; display: block; margin: 0 auto; }
#needle { transform-box: view-box; transform-origin: 75px 78px; transform: rotate(-90deg); transition: transform 1s cubic-bezier(0.34, 1.3, 0.64, 1); }
.gauge .zone { font-size: clamp(12px, 1.05cqw, 17px); font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: #cfccd3; transition: color 0.5s ease; text-shadow: 0 1px 12px rgba(11,11,16,0.9); }
.gauge .zone.warm { color: var(--pink-hot); }
.gauge .zone.hot { color: var(--pink-hot); animation: alarm 1.6s ease-in-out infinite; }
@keyframes alarm { 50% { opacity: 0.45; } }

.opener { pointer-events: auto; margin-top: clamp(7px, 0.9cqw, 14px);
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(233, 30, 140, 0.92); color: #fff; border: 1px solid var(--pink-hot);
  font-family: inherit; font-weight: 800; font-size: clamp(13px, 1cqw, 16px);
  border-radius: 999px; padding: 0.55em 1.25em; cursor: pointer;
  box-shadow: 0 0 26px var(--pink-glow); transition: background 0.15s ease, box-shadow 0.15s ease; }
.opener:hover { background: var(--pink-hover); box-shadow: 0 0 34px rgba(233,30,140,0.5); }
.opener:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.opener .chev { transition: transform 0.3s var(--ease-out); font-size: 0.85em; }
.opener.open .chev { transform: rotate(180deg); }

#console { z-index: 9; left: 50%; top: 47%; width: 95%; max-width: 1300px;
  transform: translate(-50%, -12px) scale(0.97); opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease, transform 0.4s var(--ease-out); }
#console.open { opacity: 1; transform: translate(-50%, 0) scale(1); pointer-events: auto; }
.con-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 1cqw, 18px); }
.con-col h3 { font-size: clamp(10px, 0.76cqw, 12.5px); font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pink-hot); margin: 0 0 7px; text-shadow: 0 1px 10px rgba(11,11,16,0.95); }
.con-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.con-chip { display: flex; align-items: center; gap: 0.6em; width: 100%; text-align: left;
  background: rgba(10, 8, 14, 0.66); backdrop-filter: blur(5px);
  border: 1px solid rgba(245,245,245,0.22); border-radius: 999px; color: #ebe8ee;
  font-family: inherit; font-weight: 700; font-size: clamp(12px, 1.02cqw, 16px); line-height: 1.25;
  padding: 0.5em 1em; cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease; }
.con-chip .dot { flex-shrink: 0; width: 0.6em; height: 0.6em; border-radius: 50%; border: 1.5px solid rgba(245,245,245,0.5); transition: all 0.16s ease; }
.con-chip:hover { border-color: var(--pink-hot); background: rgba(26, 6, 19, 0.85); color: #fff; }
.con-chip:focus-visible { outline: 2px solid var(--pink-hot); outline-offset: 2px; }
.con-chip.on { background: rgba(233,30,140,0.9); border-color: var(--pink-hot); color: #fff; box-shadow: 0 0 18px var(--pink-glow); }
.con-chip.on .dot { background: #fff; border-color: #fff; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ═══════ TRAY ═══════ */
.tray-zone { position: relative; z-index: 11; margin-top: -46px; }
.tray { background: var(--bg-card); border: 1px solid var(--border-1); border-radius: var(--radius-lg); padding: 20px 24px; max-width: 1060px; margin: 0 auto; box-shadow: 0 -10px 80px rgba(13,13,13,0.9), 0 0 50px var(--pink-glow); }
.tray h2 { font-size: 17px; font-weight: 800; margin: 0 0 14px; }
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.col h3 { font-size: 10px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pink); margin: 0 0 7px; }
.col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.chip { display: flex; align-items: flex-start; gap: 8px; width: 100%; text-align: left; background: none; color: var(--text-2); border: none; border-radius: 5px; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.35; padding: 4px 6px; cursor: pointer; transition: color 0.15s ease, background 0.15s ease; }
.chip .box { flex-shrink: 0; width: 13px; height: 13px; margin-top: 3px; border: 1.5px solid var(--border-2); border-radius: 3px; display: grid; place-items: center; font-size: 9px; color: transparent; transition: all 0.15s ease; }
.chip:hover { color: var(--text-1); background: rgba(255,255,255,0.03); }
.chip:focus-visible { outline: 2px solid var(--pink); outline-offset: 1px; }
.chip.on { color: var(--text-1); font-weight: 800; }
.chip.on .box { background: var(--pink); border-color: var(--pink); color: #fff; }

.tray-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-1); }
.cta-side { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sends { font-size: 12.5px; color: var(--text-2); margin: 0; }
.sends strong { color: var(--text-1); }

/* Pressure Matrix — orientation is the app's: rows are the intents
   (why / what / how), columns are the instincts (feel / think / act). */
.mx-tuck { display: flex; align-items: center; gap: 11px; opacity: 0.85; }
.mx-tuck:hover { opacity: 1; }
.mx { display: grid; grid-template-columns: 38px repeat(3, 34px); grid-template-rows: 15px repeat(3, 24px); gap: 4px; }
.mx .lbl { font-size: 9.5px; font-weight: 800; text-transform: uppercase; color: var(--text-2); display: flex; align-items: center; justify-content: center; transition: color 0.4s ease; }
.mx .lbl.on { color: var(--pink-hot); }
/* Do NOT transition background here: Chromium freezes on the start frame when a
   background transition's endpoints resolve through var() (the matrix lit its
   classes but stayed blank). Background snaps; the border + glow still fade. */
.mx .cell { background: #1f1f1f; border: 1px solid #2a2a2a; border-radius: 3px; transition: border-color 0.5s ease, box-shadow 0.5s ease; }
.mx .cell.h1 { background: rgba(233,30,140,0.20); border-color: rgba(233,30,140,0.45); }
.mx .cell.h2 { background: rgba(233,30,140,0.42); border-color: rgba(233,30,140,0.7); }
.mx .cell.h3 { background: rgba(233,30,140,0.66); border-color: var(--pink); }
.mx .cell.h4 { background: var(--pink); border-color: var(--pink); box-shadow: 0 0 10px var(--pink-glow); }
.mx-cap { font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); margin: 0; max-width: 74px; line-height: 1.35; }

/* ═══════ SECTIONS ═══════ */
section { padding: 44px 0; }
section + section { border-top: 1px solid var(--border-1); }
.sect-title { font-size: 22px; font-weight: 900; margin: 0 0 18px; text-wrap: balance; }
.sect-lede { color: var(--text-2); font-size: 14.5px; margin: -8px 0 18px; max-width: 42em; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.step { display: flex; gap: 12px; align-items: flex-start; background: var(--bg-card); border: 1px solid var(--border-1); border-radius: var(--radius-lg); padding: 15px 17px; }
.step .n { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--pink-light); border: 1px solid var(--pink); color: var(--pink-hot); font-weight: 900; font-size: 11px; display: grid; place-items: center; }
.step h4 { font-size: 14.5px; font-weight: 800; margin: 0 0 3px; }
.step p { color: var(--text-2); font-size: 13px; line-height: 1.45; margin: 0; }
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.shot { aspect-ratio: 3/2; border-radius: var(--radius-lg); background-size: cover; background-position: center; }
.shot.s1 { background-image: url(shot1.webp); }
.shot.s2 { background-image: url(shot2.webp); }
.shot.s3 { background-image: url(shot3.webp); }

.book-block h3 { font-size: 21px; font-weight: 900; margin: 0 0 8px; line-height: 1.25; }
.book-block > p { color: var(--text-2); font-size: 14px; margin: 0 0 14px; max-width: 46em; }
.book-block .ctx { color: var(--text-1); font-size: 13.5px; background: var(--bg-raised); border-left: 2px solid var(--pink); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 10px 13px; margin-bottom: 18px; max-width: 46em; }
/* Calendly manages its own scrolling INSIDE this box, so it must be tall enough
   to hold the whole flow (month grid, then times, then the details form) without
   a cramped inner scrollbar. 1080 clears it on desktop; mobile stacks taller. */
#calendly { height: 1080px; border: 1px solid var(--border-1); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-card); }
#calendly iframe { width: 100%; height: 100%; border: 0; }
@media (max-width: 1000px) { #calendly { height: 1180px; } }
.cal-fallback { padding: 40px 24px; text-align: center; color: var(--text-2); font-size: 14px; }

.themes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
/* nowrap keeps each pill's label on one line — no single word breaking onto a
   second row inside the pill, which is what reads as sloppy */
.theme-pill { border: 1px solid var(--border-1); border-radius: 999px; padding: 8px 16px; font-size: 13.5px; font-weight: 600; color: var(--text-2); cursor: pointer; text-decoration: none; white-space: nowrap; transition: border-color 0.15s ease, color 0.15s ease; }
.theme-pill:hover { border-color: var(--pink); color: var(--text-1); }
.theme-pill.active { border-color: var(--pink); color: var(--text-1); background: var(--pink-light); font-weight: 800; cursor: default; }
.theme-pill.soon { border-style: dashed; opacity: 0.65; cursor: default; }
.theme-pill.soon:hover { border-color: var(--border-1); color: var(--text-2); }

footer.site { border-top: 1px solid var(--border-1); padding: 26px 0 40px; color: var(--text-2); font-size: 13.5px; }
footer.site a { color: var(--text-2); }
footer.site a:hover { color: var(--pink-hover); }

/* Home layout lives inline in index.html (it's a one-screen doorway, not a
   scrolling page, so it doesn't share the section grammar below). */

/* ═══════ COMING-SOON PAGES ═══════
   One screen, no scroll, same calm scene as the home. Each theme's page starts
   as one of these and gets swapped for the real experience later. */
body.fill { display: flex; flex-direction: column; min-height: 100dvh; margin: 0; }
.soonpage { position: relative; flex: 1 1 auto; min-height: 480px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: #0a0a10; }
.soonpage .layer { position: absolute; pointer-events: none; }
.soonpage .plate { inset: 0; background: url(bg.webp) center bottom / cover no-repeat; }
.soonpage .stars { inset: 0 0 40% 0; }
.soonpage .star { position: absolute; border-radius: 50%; background: #fff; }
.soonpage .astro { top: 13%; right: 12%; width: clamp(78px, 10vw, 146px); aspect-ratio: 900/684;
  background: url(astro.webp) center / contain no-repeat; animation: bob 7s ease-in-out infinite; }
.soonpage .fade { inset: 0; background: radial-gradient(ellipse 62% 62% at 50% 50%, rgba(10,8,16,0.82), transparent 76%); }
.soon-copy { position: relative; z-index: 3; text-align: center; max-width: 32em; padding: 24px; }
.soon-eyebrow { display: inline-block; font-size: 11px; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pink-hot); border: 1px solid rgba(233,30,140,0.4); border-radius: 999px; padding: 4px 13px; margin-bottom: 18px; }
.soon-copy h1 { font-size: clamp(28px, 4vw, 46px); font-weight: 900; margin: 0 0 12px; text-wrap: balance; text-shadow: 0 2px 26px rgba(10,8,16,0.95); }
.soon-copy > p { color: #d6d3d9; font-size: clamp(15px, 1.4vw, 18px); margin: 0 auto 26px; max-width: 26em; text-shadow: 0 1px 16px rgba(10,8,16,0.95); }
.soon-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn.ghost { background: transparent; border: 1px solid var(--border-2); color: var(--text-1); }
.btn.ghost:hover { background: transparent; border-color: var(--pink); color: var(--pink-hot); }
@media (max-width: 560px) { .soonpage .astro { top: 9%; right: 7%; width: 78px; } }

/* ═══════ PHONE ═══════
   A 4:3 scene + all the checks + the CTA fits one screen on a 390x844 phone, so
   the whole instrument is reachable and the weather reacts under your thumb.
   Hazard widths are multiplied by (16/9)/(4/3) = 1.333 to keep the same share of
   the frame's height in the taller box. */
@media (max-width: 1000px) {
  #console, .opener, .purpose { display: none; }
  .stage { aspect-ratio: 4 / 3; }
  #lay-wave    { left: -8%; width: 40%; }
  .cloud.c1    { left: 7%;  width: 75%; }
  .cloud.c2    { left: -16%; width: 59%; }
  .cloud.c3    { left: 44%; width: 67%; }
  .fis.f1      { left: 44%; width: 51%; }
  .fis.f2      { left: 26%; width: 29%; }
  #lay-volcano { left: 77%; width: 21%; }
  #embers      { left: 77%; width: 21%; }
  /* the headline runs to two lines on a phone: drop him clear of it */
  #lay-astro   { left: 76%; top: 24%; width: 16%; }
  .gauge svg { width: 104px; }
  h1 { font-size: clamp(19px, 4.6vw, 26px); }
  .steps, .shots { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .tray { padding: 16px; }
  .tray h2 { font-size: 15px; margin-bottom: 10px; }
  .cols { grid-template-columns: 1fr; gap: 12px; }
  .col ul { gap: 2px; }
  .chip { font-size: 13px; padding: 3px 4px; }
  .tray-foot { margin-top: 12px; padding-top: 12px; justify-content: center; }
  .mx-tuck { display: none; }
  .steps, .shots { grid-template-columns: 1fr; }
}