/* Hypha · Invitation · Variation C · THE NOTIFICATION STORM (hero-c, 2026-10-26)
   The visitor's own laptop (on a phone: their phone) in the arrival's own paper room. Real OS chrome, real app
   marks, a lit screen under glass. Everything is placed by js/storm.js and moves by scroll position only. */

/* ---------- section: pinned like every .scene; the arrival slides in under it for the last screens ---------- */
#storm {
  position: relative;
  z-index: 4;
  margin-bottom: -130vh;
  pointer-events: none;
}
.storm-stage {
  /* (2026-11-01) dark under the void until the open (js/storm.js --vd), so the room is dark even where the void is not drawn */
  background: color-mix(in srgb, #020605 calc(var(--vd, 0) * 100%), var(--paper));
  color: var(--ink);
  --v: 0;
}
.storm-bg {
  position: absolute; inset: 0; z-index: 0;
  /* the arrival's own room (css/sections.css .arrival-bg), so the hand-off happens in the same light */
  background:
    radial-gradient(60% 70% at 74% 46%, #ffffff 0%, rgb(255 255 255 / 0) 70%),
    linear-gradient(180deg, #f8faf7 0%, #f0f3ef 100%);
}
.storm-void {
  position: absolute; inset: 0; z-index: 1;
  opacity: 0;
  /* on the open the paper is not faded in through grey: light spreads from the invitation card (js/storm.js sets
     --ox/--oy at the card, --or grows from -180px past the far corner) and the void gives way behind a soft edge */
  --oe: 520px; --or: calc(var(--oe) * -1); --ox: 50%; --oy: 50%;
  -webkit-mask-image: radial-gradient(circle at var(--ox) var(--oy), transparent var(--or), #000 calc(var(--or) + var(--oe)));
  mask-image: radial-gradient(circle at var(--ox) var(--oy), transparent var(--or), #000 calc(var(--or) + var(--oe)));
  background:
    radial-gradient(70% 70% at 64% 50%, #07291c 0%, rgb(7 41 28 / 0) 70%),
    radial-gradient(120% 100% at 50% 50%, #04140e 0%, #020605 62%, #010302 100%);
}
/* (2026-11-01) before the open the mask is fully opaque anyway; dropping it then spares the GPU a masked layer */
.storm-void:not(.is-open) { -webkit-mask-image: none; mask-image: none; }
.storm-glow {
  position: absolute; z-index: 2;
  left: 0; top: 0;
  width: 1400px; height: 1000px;
  margin: -500px 0 0 -700px;
  background: radial-gradient(closest-side, rgb(57 241 100 / 0.22), rgb(29 130 82 / 0.10) 46%, rgb(4 33 23 / 0) 100%);
  opacity: 0;
}
.storm-stage .topbar .mark { color: color-mix(in srgb, var(--core) calc(var(--v) * 100%), var(--ink)); }

/* ---------- the rig: one device, placed in px by js/storm.js ---------- */
.storm-rig {
  position: absolute; z-index: 5;
  left: 0; top: 0;
  transform-origin: 50% 62%;
}
.storm-spill { position: absolute; inset: 0; z-index: 8; }

/* laptop (dark anodised, black glass bezel) */
.lap { position: absolute; inset: 0; }
/* the contact shadow: short and soft, right under the base. The lid's long drop shadow (0 70px 120px) and the 52px blob
   here read as a grey haze under a floating bar (V 10-27 19:38); the lid keeps its short one, which now falls behind the base */
.lap-floor {
  position: absolute;
  left: 2.5%; right: 2.5%;
  top: calc(115.8% - 6px); /* the 3D base's front edge (js/storm-device.js ALPHA 104, SQ 0.5): 1.158 rig heights */
  height: 8px;
  border-radius: 50%;
  background: rgb(8 22 15 / 0.6);
  box-shadow: 0 6px 18px 4px rgb(8 22 15 / 0.2);
  filter: blur(3px);
}
.lap-screen {
  position: absolute;
  top: 0;
  left: calc((var(--rig-w) - var(--lid-w)) / 2);
  width: var(--lid-w);
  height: var(--lid-h);
  border-radius: 17px 17px 5px 5px;
}
.lap-screen .scr {
  left: var(--bz); top: var(--bz);
  width: var(--sw); height: var(--sh);
  border-radius: 7px 7px 2px 2px;
}
.lap-sheen {
  position: absolute; inset: 0; z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(122deg, rgb(255 255 255 / 0.10) 0%, rgb(255 255 255 / 0.02) 26%, rgb(255 255 255 / 0) 40%);
}
/* the still: this same MacBook Pro 14 rendered by js/storm-device.js in the rest pose (RM.storm3d.still, margins
   l .08 r .08 t .04 b .5 of the rig), standing in until the 3D canvas has drawn, and for reduced motion / no WebGL.
   The founder, 2026-10-29 21:38: "wtf is this LAPTOP KEYBOARD" (the CSS slab base this replaced) */
.lap-still {
  position: absolute; z-index: 0; pointer-events: none;
  background: 0 0 / 100% 100% no-repeat;
}
.lap-still { left: -8%; top: -4%; width: 116%; height: 154%; background-image: url(../assets/storm-laptop.png); }
.dk-on .lap-still { visibility: hidden; }

/* phone (titanium rim, black bezel, the island) */
.ph { position: absolute; inset: 0; }
.ph-body {
  position: absolute; inset: 0;
  border-radius: var(--ph-r);
  background: #030404;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.07),
    0 0 0 1.5px #62676c,
    0 0 0 3px #26292c,
    0 0 0 3.7px #a1a7ad,
    0 34px 60px -18px rgb(8 22 15 / 0.48),
    0 80px 140px -34px rgb(8 22 15 / 0.42);
}
.ph .scr {
  left: var(--bz); top: var(--bz);
  width: var(--sw); height: var(--sh);
  border-radius: calc(var(--ph-r) - var(--bz));
}
.ph-island {
  position: absolute; z-index: 40;
  top: calc(var(--bz) + 10px); left: 50%;
  width: 33%; height: 31px;
  transform: translateX(-50%);
  border-radius: 18px;
  background: #000;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.04);
}
.ph-btn {
  position: absolute; width: 4px; border-radius: 2px;
  background: linear-gradient(90deg, #2b2e32 0%, #969ca3 45%, #3a3e43 100%);
}
.ph-btn--a { left: -6px; top: 16%; height: 4.6%; }
.ph-btn--u { left: -6px; top: 24%; height: 8.4%; }
.ph-btn--d { left: -6px; top: 34.5%; height: 8.4%; }
.ph-btn--p { right: -6px; top: 27%; height: 13%; }

/* ---------- the lit screen (shared by both devices) ---------- */
.scr {
  position: absolute;
  overflow: hidden;
  isolation: isolate;
  background: #000;
  font-family: var(--f-app);
  -webkit-font-smoothing: antialiased;
}
.scr-wall {
  position: absolute; inset: 0; z-index: 0;
  /* a morning wallpaper: layered hills under a sunrise, in the brand's greens */
  background:
    radial-gradient(130% 62% at 12% 104%, #06261f 49.6%, rgb(6 38 31 / 0) 50%),
    radial-gradient(120% 58% at 92% 108%, #0a3a2f 49.6%, rgb(10 58 47 / 0) 50%),
    radial-gradient(150% 66% at 58% 114%, #145245 49.6%, rgb(20 82 69 / 0) 50%),
    radial-gradient(170% 74% at 26% 122%, #2a6f62 49.6%, rgb(42 111 98 / 0) 50%),
    radial-gradient(56% 44% at 70% 66%, rgb(255 214 160 / 0.95) 0%, rgb(255 190 140 / 0.35) 40%, rgb(255 190 140 / 0) 72%),
    linear-gradient(180deg, #10263a 0%, #2c5872 40%, #8fa6a0 66%, #e9c49a 86%, #f3d2a8 100%);
}
.scr-stack, .scr-marks, .scr-inv { position: absolute; inset: 0; }
.scr-stack { z-index: 5; }
.scr-empty {
  position: absolute; z-index: 6;
  left: 0; right: 0; top: 0;
  text-align: center;
  font-size: 15px; font-weight: 500;
  color: rgb(255 255 255 / 0.86);
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.3);
  opacity: 0;
}
.scr-empty small { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; color: rgb(255 255 255 / 0.6); }
.scr-off {
  position: absolute; inset: 0; z-index: 10;
  opacity: 0;
  background: radial-gradient(120% 90% at 50% 42%, #04130d 0%, #020605 58%, #010302 100%);
}
.scr-marks { z-index: 12; opacity: 0; }
.scr-point {
  position: absolute; z-index: 13;
  left: 0; top: 0;
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--core);
  box-shadow:
    0 0 8px 3px var(--neon),
    0 0 36px 12px rgb(57 241 100 / 0.55),
    0 0 120px 44px rgb(57 241 100 / 0.24);
  opacity: 0;
}
.scr-inv { z-index: 14; }
.scr-glass {
  position: absolute; inset: 0; z-index: 30;
  pointer-events: none;
  background: linear-gradient(116deg, rgb(255 255 255 / 0.15) 0%, rgb(255 255 255 / 0.05) 20%, rgb(255 255 255 / 0) 36%, rgb(255 255 255 / 0) 74%, rgb(255 255 255 / 0.035) 100%);
}

/* macOS: menu bar and notch */
.mac-bar {
  position: absolute; z-index: 3;
  left: 0; right: 0; top: 0;
  height: var(--mb);
  padding: 0 12px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; line-height: 1;
  color: #fff;
  background: rgb(8 20 30 / 0.30);
  text-shadow: 0 0 1px rgb(0 0 0 / 0.25);
  white-space: nowrap;
}
.mac-l, .mac-r { display: flex; align-items: center; gap: 13px; }
.mac-l b { font-weight: 700; }
.mac-r { gap: 11px; }
.mac-bar svg { width: 15px; height: 15px; flex: none; }
.mac-bar .ic-apple { width: 13px; height: 15px; }
.mac-bar .ic-batt { width: 24px; height: 12px; }
.mac-clock { font-variant-numeric: tabular-nums; }
.mac-notch {
  position: absolute; z-index: 4;
  top: 0; left: 50%;
  width: 13%; height: var(--mb);
  transform: translateX(-50%);
  border-radius: 0 0 9px 9px;
  background: #000;
}

/* iOS: status bar, lock screen date and clock */
.ios-status {
  position: absolute; z-index: 3;
  top: 0; right: 0;
  height: 54px;
  padding: 0 28px 0 0;
  display: flex; align-items: center; gap: 6px;
  color: #fff;
}
.ios-status svg { width: 17px; height: 12px; }
.ios-status .ic-batt { width: 25px; height: 12px; }
.ios-lock {
  position: absolute; z-index: 2;
  left: 0; right: 0; top: 64px;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 24px rgb(0 0 0 / 0.16);
}
.ios-date { font-size: 17px; font-weight: 600; letter-spacing: 0.01em; opacity: 0.9; }
.ios-time {
  font-size: 84px; font-weight: 700; line-height: 1;
  letter-spacing: -0.025em;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  color: rgb(255 255 255 / 0.96);
}

/* ---------- a notification, as the OS draws it ---------- */
.nc {
  position: absolute; left: 0; top: 0;
  width: var(--cw);
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px 11px 10px;
  border-radius: 16px;
  font-family: var(--f-app);
  color: #1d1d1f;
  text-align: left;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.95) 0%, rgb(243 244 246 / 0.93) 100%);
  box-shadow:
    inset 0 0.5px 0 rgb(255 255 255 / 0.95),
    0 0 0 0.5px rgb(0 0 0 / 0.16),
    0 2px 5px rgb(0 0 0 / 0.10),
    0 12px 30px rgb(0 0 0 / 0.22);
  opacity: 0;
  visibility: hidden;
  transform-origin: 50% 0;
  will-change: transform, opacity;
}
.nc-ico {
  flex: none;
  width: 36px; height: 36px;
  margin-top: 1px;
  border-radius: 9px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.14), 0 1px 2px rgb(0 0 0 / 0.14);
}
.nc-ico img, .nc-ico svg { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.nc-ico--pad { padding: 6px; }
.nc-ico--pad img, .nc-ico--pad svg { object-fit: contain; }
.nc-ico--hypha { background: radial-gradient(circle at 50% 40%, #0b2a1d, #020605 80%); padding: 5px; box-shadow: 0 0 0 1px rgb(101 219 174 / 0.45), 0 0 14px rgb(57 241 100 / 0.35); }
.nc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.nc-app { font-size: 13px; font-weight: 700; line-height: 1.28; letter-spacing: -0.003em; }
.nc-time { flex: none; font-size: 11.5px; color: #86868b; }
.nc-t { font-size: 13px; font-weight: 500; line-height: 1.3; }
.nc-b { font-size: 13px; line-height: 1.3; color: #3c3c43; }
.nc-mark {
  font-weight: 700;
  padding: 0 2px;
  margin: 0 -2px;
  border-radius: 3px;
  background: linear-gradient(var(--neon), var(--neon)) no-repeat 0 50% / calc(var(--w, 0) * 100%) 100%;
}
.storm-stage.is-phone .nc { border-radius: 20px; padding: 11px 13px 12px 11px; gap: 11px; }
.storm-stage.is-phone .nc-ico { width: 38px; height: 38px; }
.storm-stage.is-phone .nc-app, .storm-stage.is-phone .nc-t, .storm-stage.is-phone .nc-b { font-size: 14px; }
.storm-stage.is-phone .nc-time { font-size: 12px; }
/* the spill sits at depths (--z: 0 far .. 1 near, set by js/storm.js): the near ones throw a long soft shadow */
.storm-spill .nc {
  --z: 0.5;
  box-shadow:
    inset 0 0.5px 0 rgb(255 255 255 / 0.95),
    0 0 0 0.5px rgb(0 0 0 / 0.16),
    0 calc(2px + 6px * var(--z)) calc(5px + 10px * var(--z)) rgb(8 22 15 / 0.14),
    0 calc(10px + 36px * var(--z)) calc(24px + 56px * var(--z)) rgb(8 22 15 / calc(0.14 + 0.2 * var(--z)));
}
/* the #wins card lifts off the glass toward the viewer for the sting (--lift set by js/storm.js) */
.scr-stack .nc--slack {
  box-shadow:
    inset 0 0.5px 0 rgb(255 255 255 / 0.95),
    0 0 0 0.5px rgb(0 0 0 / 0.16),
    0 calc(2px + 6px * var(--lift, 0)) calc(5px + 12px * var(--lift, 0)) rgb(0 0 0 / 0.10),
    0 calc(12px + 26px * var(--lift, 0)) calc(30px + 44px * var(--lift, 0)) rgb(0 0 0 / calc(0.22 + 0.2 * var(--lift, 0)));
}

/* the one that is different: dark glass, green light, the Hypha mark */
.nc--inv {
  width: var(--iw);
  padding: 14px 16px 15px 14px;
  gap: 13px;
  border-radius: 20px;
  color: var(--core);
  background: linear-gradient(180deg, rgb(20 34 28 / 0.97) 0%, rgb(6 14 11 / 0.98) 100%);
  box-shadow:
    0 0 0 1px rgb(101 219 174 / 0.42),
    inset 0 1px 0 rgb(189 246 199 / 0.20),
    0 0 34px rgb(57 241 100 / 0.24),
    0 0 110px rgb(57 241 100 / 0.14),
    0 26px 60px rgb(0 0 0 / 0.55);
}
.nc--inv .nc-ico { width: 46px; height: 46px; border-radius: 11px; }
.nc--inv .nc-app { font-family: var(--f-display); font-size: 14px; letter-spacing: 0.22em; }
.nc--inv .nc-time { color: rgb(189 246 199 / 0.62); }
.nc--inv .nc-t { font-size: 15px; font-weight: 600; margin-top: 2px; }
.nc--inv .nc-b { font-size: 14px; color: var(--mint); }
.storm-stage.is-phone .nc--inv .nc-app { font-size: 14px; }
.storm-stage.is-phone .nc--inv .nc-t { font-size: 15.5px; }
.storm-stage.is-phone .nc--inv .nc-b { font-size: 14.5px; }

/* ---------- four worlds of light on the dark screen (eye pass 4: big tiles in the world colours, with depth;
   js/storm.js sets --mkw/--mkh/--mks/--mkf on .scr-marks from the screen size) ---------- */
.mk {
  position: absolute; left: 0; top: 0;
  width: var(--mkw, 150px); height: var(--mkh, 196px);
  margin: calc(var(--mkh, 196px) / -2) 0 0 calc(var(--mkw, 150px) / -2);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--mkw, 150px) * 0.13);
  color: var(--c);
  border-radius: calc(var(--mkw, 150px) * 0.12);
  opacity: calc(0.2 + 0.8 * var(--lit, 0));
  background:
    radial-gradient(85% 62% at 50% 40%, color-mix(in srgb, var(--c) calc(var(--lit, 0) * 32%), transparent) 0%, transparent 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--c) calc(5% + var(--lit, 0) * 9%), #07120e) 0%, #030806 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--c) calc(8% + var(--lit, 0) * 52%), transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--c) calc(14% + var(--lit, 0) * 30%), transparent),
    0 calc(8px + var(--lit, 0) * 22px) calc(20px + var(--lit, 0) * 36px) rgb(0 0 0 / 0.6),
    0 0 calc(var(--lit, 0) * 64px) color-mix(in srgb, var(--c) calc(var(--lit, 0) * 36%), transparent);
}
/* the light each world throws on the glass around it */
.mk::before {
  content: ""; position: absolute; inset: -34%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 24%, transparent), transparent);
  opacity: var(--lit, 0);
}
.mk svg {
  width: var(--mks, 70px); height: var(--mks, 70px); overflow: visible;
  filter: drop-shadow(0 0 calc(2px + 14px * var(--lit, 0)) var(--c)) drop-shadow(0 6px 10px rgb(0 0 0 / 0.55));
}
.mk span {
  font-family: var(--f-mono); font-size: var(--mkf, 13px); font-weight: 600;
  letter-spacing: 0.26em; line-height: 1; margin-right: -0.26em;
  text-shadow: 0 0 calc(12px * var(--lit, 0)) var(--c);
}

/* ---------- the open: pointer, tap, and the window the screen becomes ---------- */
.storm-pointer {
  position: absolute; z-index: 40;
  left: 0; top: 0;
  width: 22px; height: 33px;
  opacity: 0;
  transform-origin: 3px 3px;
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.4));
}
.storm-tap {
  position: absolute; z-index: 40;
  left: 0; top: 0;
  width: 58px; height: 58px; margin: -29px 0 0 -29px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.2);
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.6), 0 0 24px rgb(57 241 100 / 0.4);
  opacity: 0;
}
.storm-win {
  /* above the hero clone: the card's words slide out from under the opening window, never across it */
  position: absolute; z-index: 22;
  left: 0; top: 0;
  width: 10px; height: 10px;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  --g: 0;
  --fc: 1;
  /* opens from the lit invitation card (eye pass 4): it starts as the card's dark glass with its green rim, which
     gives way to the arrival's own sheet (.sw-sheet, a clone) while it grows; once the glass is gone it carries the
     arrival window's own paper shadow, so it lands as that window and not as a white box */
  box-shadow:
    0 0 0 1px rgb(101 219 174 / calc(0.5 * var(--fc))),
    0 0 30px rgb(57 241 100 / calc(0.22 * var(--fc))),
    0 0 0 1px rgb(16 24 20 / calc(0.07 * (1 - var(--fc)))),
    0 2px 4px rgb(16 24 20 / calc(0.05 * (1 - var(--fc)))),
    0 18px 48px rgb(16 24 20 / calc(0.13 * (1 - var(--fc)))),
    0 48px 120px rgb(16 24 20 / calc(0.10 * (1 - var(--fc))));
}
.sw-sheet { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.sw-sheet .win { position: absolute; inset: 0; border-radius: 0; box-shadow: none; }
.sw-face {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgb(20 34 28 / 0.97) 0%, rgb(6 14 11 / 0.98) 100%);
  box-shadow: inset 0 1px 0 rgb(189 246 199 / 0.20);
  opacity: var(--fc);
}

/* ---------- copy ---------- */
.storm-caps .cap { will-change: opacity, transform; }
/* no one-word last lines ("POST.", "HOURS.", "GIGS."): every caption line is balanced */
.storm-caps .display, .storm-caps .say, .st-titles li { text-wrap: balance; }
.storm-stage .st-micro { color: var(--ink-3); margin: 0 0 14px; }
.storm-stage .st-not { font-size: clamp(44px, 6.5vw, 106px); color: var(--ink); }
.st-titles { list-style: none; margin: 18px 0 0; padding: 0; }
.st-titles li {
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(24px, 2.5vw, 38px);
  line-height: 1.1;
  margin: 0 0 3px;
}
.st-titles .tt {
  --k: 0;
  color: rgb(7 16 14 / calc(1 - 0.58 * var(--k)));
  background: linear-gradient(var(--ink), var(--ink)) no-repeat 0 56% / calc(var(--k) * 100%) 0.1em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.storm-stage .st-big { font-size: clamp(36px, 4.6vw, 74px); color: var(--ink); }
.storm-stage .st-huge { font-size: clamp(44px, 6.5vw, 106px); color: var(--ink); }
.st-big [data-line] { display: block; }
.storm-stage .hl.st-wipe {
  background: linear-gradient(var(--neon), var(--neon)) no-repeat 0 0 / calc(var(--w, 0) * 100%) 100%;
}
/* the dark-room lines follow the room (--v, set by js/storm.js): light ink while the room is dark, the paper's own dark
   ink as the room opens back to paper (the founder, 2026-10-29 21:44, "THIS ISN'T A JOB POST." near-white on near-white) */
.st-cap--dark .display { color: color-mix(in srgb, var(--core) calc(var(--v) * 100%), var(--ink)); }
.storm-stage .st-cap--dark .sig { color: color-mix(in srgb, var(--neon) calc(var(--v) * 100%), #0b7a3a); }
.st-four [data-line] {
  display: block;
  color: color-mix(in srgb, var(--c) calc(var(--v) * 100%), var(--ink));
  text-shadow: 0 0 26px color-mix(in srgb, var(--c) 42%, transparent);
}
.storm-stage .st-say { color: color-mix(in srgb, var(--silver) calc(var(--v) * 100%), var(--ink-3)); font-size: clamp(20px, 1.9vw, 30px); margin: 20px 0; }
.st-invite [data-line] { display: block; }

/* the arrival's own hero, cloned in its exact place for the last frame (css/sections.css .arrival-stage rules) */
.storm-hero { position: absolute; z-index: 21; left: 0; top: 0; visibility: hidden; }
.storm-hero .eyebrow { color: var(--ink-3); margin: 0 0 22px; transform-origin: 0 50%; }
.storm-hero .h1 { color: var(--ink); font-size: clamp(44px, 6.5vw, 106px); }

/* scroll pill: dark, green ring, mono */
.storm-pill {
  position: absolute; z-index: 25;
  left: 50%; bottom: max(24px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px 11px 19px;
  border-radius: 999px;
  background: #07100e;
  color: var(--core);
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: 0.26em;
  line-height: 1;
  box-shadow: 0 0 0 1.5px rgb(57 241 100 / 0.8), 0 0 20px rgb(57 241 100 / 0.32), 0 12px 30px rgb(7 16 14 / 0.3);
}
.storm-pill svg { width: 14px; height: 14px; color: var(--neon); }

@media (max-width: 899.98px) {
  .storm-stage .caps { top: 74px; bottom: auto; height: calc(var(--stage-h) * 0.42 - 86px); }
  .storm-stage .cap { top: 0; }
  .storm-stage .st-micro { font-size: 11px; margin-bottom: 10px; }
  .storm-stage .st-not { font-size: 44px; }
  .st-titles { margin-top: 12px; }
  .st-titles li { font-size: 22px; margin-bottom: 2px; }
  .storm-stage .st-big { font-size: 34px; }
  .storm-stage .st-huge { font-size: 46px; }
  .storm-stage .st-say { font-size: 18px; margin: 12px 0; }
  .storm-hero .eyebrow { margin-bottom: 16px; font-size: 11px; }
}

/* ---------- reduced motion: no pin, no overlap; a still device and the lines in reading order ---------- */
#storm.is-still { height: auto; margin-bottom: 0; }
#storm.is-still .storm-stage { position: relative; height: auto; min-height: var(--stage-h); padding: 96px 0 72px; }
#storm.is-still .caps { position: relative; top: auto; bottom: auto; height: auto; left: auto; right: auto; width: auto; margin: 0 var(--gutter); }
#storm.is-still .cap { position: relative; top: auto; translate: none; opacity: 1 !important; visibility: visible !important; transform: none !important; margin: 0 0 36px; }
#storm.is-still [data-line] { opacity: 1 !important; transform: none !important; }
#storm.is-still .st-cap--dark .display, #storm.is-still .st-say { color: var(--ink); }
#storm.is-still .st-four [data-line] { color: var(--ink); text-shadow: none; }
#storm.is-still .storm-void, #storm.is-still .storm-glow, #storm.is-still .storm-pill, #storm.is-still .storm-spill, #storm.is-still .storm-hero { display: none; }
@media (min-width: 900px) {
  #storm.is-still .caps { width: min(36vw, 560px); }
}
@media (max-width: 899.98px) {
  #storm.is-still .storm-rig { display: none; }
}

/* ---------- the deal (ported from Hero A, V 10-27): a CRM window on the screen. You click every step (each stamped YOU and
   logged as yours), then somebody else's name is typed into the owner field. Steps light in the faction colours. ---------- */
.sd {
  position: absolute; left: 14px; top: 40px; z-index: 4; width: 300px;
  transform-origin: 0 0; visibility: hidden; overflow: hidden;
  font-family: var(--f-app); color: #1d2433; background: #fff; border-radius: 10px;
  box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.18), 0 14px 34px rgb(0 0 0 / 0.38);
}
.sd-bar { height: 26px; display: flex; align-items: center; gap: 8px; padding: 0 10px; font-size: 11px; color: #6a7385; white-space: nowrap; background: rgb(29 36 51 / 0.05); border-bottom: 1px solid rgb(29 36 51 / 0.08); }
.sd-tl { display: flex; gap: 4px; }
.sd-tl b { width: 8px; height: 8px; border-radius: 50%; background: rgb(29 36 51 / 0.18); }
.sd-app { font-weight: 650; color: #1d2433; }
.sd-sub { overflow: hidden; text-overflow: ellipsis; }
.sd-body { padding: 12px 14px 10px; }
.sd-head { display: flex; align-items: center; gap: 10px; }
.sd-av { width: 34px; height: 34px; border-radius: 8px; background: var(--forest); color: var(--mint); display: grid; place-items: center; font-weight: 700; font-size: 12.5px; flex: none; }
.sd-who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sd-k { display: block; font: 500 9px/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #8a92a3; }
.sd-name { font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; white-space: nowrap; }
.sd-pill { margin-left: auto; align-self: flex-start; padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 650; background: rgb(29 36 51 / 0.07); color: #6a7385; }
.sd-pill.is-won { background: #e6f4ea; color: #1e8e3e; }
.sd-steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin-top: 16px; }
.sd-step { position: relative; height: 30px; display: grid; place-items: center; font-size: 11px; font-weight: 650; color: #6a7385; }
.sd-chev { position: absolute; inset: 0; background: rgb(29 36 51 / 0.07); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%); }
.sd-step:first-child .sd-chev { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); border-radius: 6px 0 0 6px; }
.sd-lab { position: relative; padding-left: 6px; }
.sd-step.is-on { color: var(--carbon); }
.sd-step.is-on .sd-chev { background: var(--c); }
.sd-you { position: absolute; right: 10px; top: -9px; z-index: 2; padding: 2px 5px 1px; border-radius: 4px; background: var(--neon); color: var(--carbon); font: 600 8px/1 var(--f-mono); letter-spacing: 0.1em; box-shadow: 0 2px 5px rgb(0 0 0 / 0.2); opacity: 0; }
.sd-cur { position: absolute; left: 0; top: 0; z-index: 3; width: 14px; pointer-events: none; opacity: 0; transform-origin: 0 0; }
.sd-cur svg { width: 14px; height: 21px; display: block; }
.sd-cur span { position: absolute; left: 13px; top: 17px; padding: 2px 5px; border-radius: 4px; background: var(--neon); color: var(--carbon); font-size: 9px; font-weight: 700; white-space: nowrap; }
.sd-fields { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 12px; margin-top: 14px; padding: 9px 0; border-top: 1px solid rgb(29 36 51 / 0.08); border-bottom: 1px solid rgb(29 36 51 / 0.08); }
.sd-f .sd-k { margin-bottom: 6px; }
.sd-v { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; min-height: 19px; white-space: nowrap; }
.sd-oav { display: none; width: 19px; height: 19px; border-radius: 50%; background: #8d6e63; color: #fff; font: 700 8px/1 var(--f-app); font-style: normal; place-items: center; flex: none; }
.sd-owner.has-av .sd-oav { display: grid; }
.sd-on.is-empty { color: #8a92a3; font-weight: 500; }
/* the edited field keeps its highlight: the one name on the deal */
.sd-owner.has-av { background: #fef3d6; box-shadow: 0 0 0 4px #fef3d6; border-radius: 2px; }
.sd-act { margin-top: 10px; }
.sd-act > .sd-k { margin-bottom: 4px; }
.sd-row { display: grid; grid-template-columns: 18px 1fr auto auto; align-items: center; gap: 8px; padding: 5px 0; font-size: 11.5px; border-bottom: 1px solid rgb(29 36 51 / 0.05); opacity: 0; }
.sd-row > i { width: 18px; height: 18px; border-radius: 50%; background: var(--c); color: var(--carbon); display: grid; place-items: center; }
.sd-row > i svg { width: 11px; height: 11px; }
.sd-row em { font-style: normal; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 999px; background: var(--neon); color: var(--carbon); }
.sd-row time { font-size: 10.5px; color: #8a92a3; }
/* a phone: the compact card above the stack (no window bar, no activity log) */
.sd--ph .sd-bar, .sd--ph .sd-act { display: none; }
.sd--ph .sd-fields { border-bottom: 0; padding-bottom: 0; }