.dhero, .dhero *, .dhero *::before, .dhero *::after{box-sizing:border-box;margin:0;padding:0}
  .dhero a{color:inherit;text-decoration:none}
  .dhero button{font:inherit;border:0;background:none;cursor:pointer}
  .dhero{
    font-family:var(--font);
    color:var(--white);
    -webkit-font-smoothing:antialiased;

    --night:#0b1018;
    --night-2:#10161f;
    --night-3:#141b25;
    --water:#070b11;
    --white:#eef2f6;
    --grey:#9aa3ad;
    --mute:#6b7480;
    --emerald:#15b87f;
    --emerald-deep:#0f9e6c;
    --brand-red:#e23b34;
    /* CTA emerald (2026-08-21, mirrors --pg-cta in core.css): booking is
       "go / it's live"; red stays with the logo and error states. */
    --brand-cta:#0d8659;
    --brand-cta-hover:#0f9160;
    --marker:rgba(255,216,77,.55);
    --glass:rgba(13,17,23,.6);
    --hairline:rgba(255,255,255,.08);
    --ease-spring:cubic-bezier(.16,1,.3,1);
    --font:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;

    /* map palette (dark) */
    --map-borough:#0e141d;
    --map-land:#131a24;
    --map-grid-far:rgba(255,255,255,.035);
    --map-street:rgba(255,255,255,.06);
    --map-ave:rgba(255,255,255,.08);
    --map-road:rgba(255,255,255,.13);
    --map-broadway:rgba(255,255,255,.15);
    --map-bridge:rgba(255,255,255,.16);
    --map-pier:rgba(255,255,255,.05);
    --map-park:#12211d;
    --map-park-line:rgba(21,184,127,.16);
    --map-pond:rgba(21,184,127,.10);
    --map-label:rgba(223,231,238,.15);
    --mini-bg:#080d14;
    --mini-land:#151d28;
    --mini-park:rgba(21,184,127,.22);
  }

  /* DAYLIGHT remap — production final/index.html light hero, adapted to the
     v2 pure-white day palette (--night:#ffffff). The warm map surfaces are
     production's, tuned against near-white; they sit unchanged on #ffffff. */
  html[data-theme="light"] .dhero{
    --night:#ffffff;
    --night-2:#f5f6f8;
    --night-3:#ffffff;
    --water:#dbe4eb;
    --white:#101016;
    --grey:#565d68;
    --mute:#8b9099;
    --glass:rgba(255,255,255,.74);
    --hairline:rgba(16,16,22,.1);

    --map-borough:#edebe4;
    --map-land:#f6f4ed;
    --map-grid-far:rgba(20,26,36,.05);
    --map-street:rgba(20,26,36,.08);
    --map-ave:rgba(20,26,36,.11);
    --map-road:rgba(20,26,36,.17);
    --map-broadway:rgba(20,26,36,.19);
    --map-bridge:rgba(20,26,36,.2);
    --map-pier:rgba(20,26,36,.1);
    --map-park:#d7e8d8;
    --map-park-line:rgba(15,158,108,.3);
    --map-pond:rgba(15,158,108,.2);
    --map-label:rgba(20,26,36,.26);
    --mini-bg:#eae8e1;
    --mini-land:#dcd9cf;
    --mini-park:rgba(15,158,108,.35);
  }

  /* ---------------------------------------------------------------- nav */

  /* --------------------------------------------------------------- hero */
  .dhero{
    position:relative;
    /* own stacking context: keeps the vignette/veil/minimap (z4-7) beneath
       the page-body (z1), whose whatsnew card peeks over the hero's bottom */
    z-index:0;
    height:100svh;
    min-height:640px;
    overflow:hidden;
    /* the resting frame keeps a whisper of city light: a faint high glow so
       the upper half never reads as dead black, plus the venue's emerald cast */
    background:
      radial-gradient(56% 40% at 72% 6%, rgba(21,184,127,.045) 0%, rgba(21,184,127,0) 72%),
      radial-gradient(110% 80% at 64% 53%, rgba(21,184,127,.07) 0%, rgba(21,184,127,0) 58%),
      var(--night);
  }

  /* the camera-driven world (city map) */
  .world{
    position:absolute;inset:0;z-index:1;
    transform-origin:0 0;
    will-change:transform;
  }
  .world svg{
    position:absolute;inset:0;
    width:100%;height:100%;display:block;
  }
  .map__label{
    font-family:var(--font);
    font-size:16px;font-weight:600;
    letter-spacing:5px;
    fill:var(--map-label);
  }
  .mp-water{fill:var(--water)}
  .mp-borough{fill:var(--map-borough)}
  .mp-grid-far{stroke:var(--map-grid-far)}
  .mp-land{fill:var(--map-land)}
  .mp-street{stroke:var(--map-street)}
  .mp-ave{stroke:var(--map-ave)}
  .mp-road{fill:none;stroke:var(--map-road)}
  .mp-broadway{fill:none;stroke:var(--map-broadway);stroke-linecap:round}
  .mp-bridge{stroke:var(--map-bridge);stroke-linecap:round}
  .mp-pier{fill:var(--map-pier)}
  .mp-park{fill:var(--map-park);stroke:var(--map-park-line)}
  .mp-pond{fill:var(--map-pond)}
  .mp-river{fill:none;stroke:var(--water);stroke-linejoin:round;stroke-linecap:round}
  .mini-river{fill:none;stroke:var(--mini-bg);stroke-linejoin:round;stroke-linecap:round}
  .mini-water{fill:var(--mini-bg)}
  .mini-bg{fill:var(--mini-bg)}
  .mini-land{fill:var(--mini-land)}
  .mini-park{fill:var(--mini-park)}
  .pin__halo{
    fill:none;stroke:var(--emerald);stroke-width:1.4;
    transform-box:fill-box;transform-origin:center;
    animation:pin-halo 3.2s ease-out infinite;
  }
  .pin__halo--2{animation-delay:1.6s}
  @keyframes pin-halo{
    0%{transform:scale(.35);opacity:.75}
    100%{transform:scale(1.75);opacity:0}
  }
  .pin__core{
    fill:rgba(21,184,127,.18);stroke:rgba(21,184,127,.65);stroke-width:1.2;
  }
  .pin__dot{
    fill:var(--emerald);
  }
  .pin{cursor:default}

  /* venue floor plan layer */
  .venue{position:absolute;inset:0;z-index:2;pointer-events:none}
  .venue__plan{
    position:absolute;
    left:var(--fx,64%);top:var(--fy,53%);
    width:min(74vw,1020px);
    opacity:0;
    will-change:transform;
  }
  .venue__plan svg{display:block;width:100%;height:auto;overflow:visible}
  .plan__tilt{transform-origin:50% 50%;will-change:transform}
  .plan__lift{fill:none;stroke:rgba(238,242,246,.10);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  /* the architect's plate: slab + glow + grid under a light-masked ink layer.
     Ink opacities are boosted vs. the pre-mask values — the radial light mask
     (#plan-lm, centred on the router) dims them back down at the perimeter. */
  .plan__slab{fill:#10161f;filter:drop-shadow(0 34px 70px rgba(0,0,0,.55))}
  .plan__cglow{fill:url(#plan-glowgrad)}
  .plan__grid line{stroke:rgba(255,255,255,.028);stroke-width:1}
  .plan__poche{fill:none;stroke:rgba(238,242,246,.05);stroke-width:11;stroke-linecap:round;stroke-linejoin:round}
  .plan__wall{fill:none;stroke:rgba(238,242,246,.32);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  .plan__inner{fill:none;stroke:rgba(238,242,246,.13);stroke-width:1.6;stroke-linecap:round}
  .plan__room{fill:rgba(238,242,246,.03)}
  .plan__label{
    font-family:var(--font);
    font-size:15px;font-weight:600;
    letter-spacing:4px;
    fill:rgba(223,231,238,.3);
  }
  .plan__dim line{stroke:rgba(238,242,246,.14);stroke-width:1}
  .plan__dim text{font-size:11px;letter-spacing:2.5px}
  /* wall poche second line (thin inner offset of the shell) */
  .plan__wall2{stroke:rgba(238,242,246,.09);stroke-width:1}
  /* the one warm touch per plan (hearth, oven, stage wash, pastry case…) */
  .plan__accent{fill:rgba(255,186,110,.07);stroke:rgba(255,186,110,.26);stroke-width:1}
  .plan__dot{fill:#2ed49a;opacity:0;filter:drop-shadow(0 0 8px rgba(46,212,154,.75))}
  .plan__dot.is-on{opacity:1}
  .plan__ripple{fill:none;stroke:#2ed49a;stroke-width:46;opacity:0}
  .plan__glow{opacity:0}

  /* focus layer: router + analytics */
  .focus{position:absolute;inset:0;z-index:3;pointer-events:none}
  .focus__anchor{
    position:absolute;
    left:var(--fx,64%);top:var(--fy,53%);
    width:0;height:0;
  }
  .frouter{
    position:absolute;
    left:-165px;top:-175px;
    width:330px;height:330px;
    opacity:0;
    will-change:transform;
  }
  .frouter::before{
    content:"";
    position:absolute;inset:6%;
    border-radius:50%;
    background:radial-gradient(50% 50% at 50% 50%, rgba(21,184,127,.16) 0%, rgba(21,184,127,0) 70%);
  }
  .frouter img{
    position:relative;
    display:block;width:100%;height:100%;
    object-fit:contain;
    filter:drop-shadow(0 36px 50px rgba(0,0,0,.55));
  }
  .ring{
    position:absolute;inset:8%;
    border:1.5px solid rgba(21,184,127,.65);
    border-radius:50%;
    opacity:0;
    pointer-events:none;
  }
  /* one-shot anamorphic lens streak over the router at landing (JS sweeps
     x/skew and flashes opacity; resolved pose is invisible) */
  .streak{
    position:absolute;left:50%;top:42%;
    width:150%;height:4px;margin-left:-75%;
    border-radius:3px;
    background:linear-gradient(90deg, rgba(190,255,232,0) 0%, rgba(190,255,232,.75) 42%, #fff 50%, rgba(190,255,232,.75) 58%, rgba(190,255,232,0) 100%);
    box-shadow:0 0 18px 2px rgba(120,240,190,.35);
    opacity:0;
    pointer-events:none;
  }

  .acard{
    position:absolute;
    display:flex;flex-direction:column;gap:4px;
    padding:14px 18px;
    background:var(--glass);
    border:1px solid var(--hairline);
    border-radius:16px;
    backdrop-filter:blur(14px) saturate(1.3);
    -webkit-backdrop-filter:blur(14px) saturate(1.3);
    box-shadow:0 22px 44px -18px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.08);
    white-space:nowrap;
    opacity:0;
    will-change:transform;
  }
  .acard__label{
    display:flex;align-items:center;gap:7px;
    font-size:11px;font-weight:600;color:var(--grey);
    letter-spacing:.14em;text-transform:uppercase;
  }
  .acard__label .dot{
    width:5px;height:5px;border-radius:50%;background:var(--emerald);
    box-shadow:0 0 8px rgba(21,184,127,.8);
  }
  .acard__value{
    font-size:21px;font-weight:700;letter-spacing:-.02em;color:var(--white);
    font-variant-numeric:tabular-nums;
    transform-origin:left center;
  }
  .acard__value small{font-size:12px;font-weight:500;color:var(--grey);margin-left:6px;letter-spacing:0}
  .acard--guests{right:200px;bottom:118px}
  .acard--captures{left:196px;bottom:140px}
  .acard--views{left:204px;top:48px}
  .acard--uptime{right:236px;top:150px}

  /* live chart — hourly bars under a gradient line; the live end gets a halo.
     Everything is static after the intro: no SVG filters, no loops. */
  .chart{display:block;margin-top:6px}
  #chart-line{fill:none;stroke:url(#cstroke);stroke-width:2;stroke-linecap:round}
  #chart-dot{fill:#2ed49a;transform-box:fill-box;transform-origin:center}
  #chart-halo{fill:rgba(46,212,154,.16);transform-box:fill-box;transform-origin:center}
  .chart__bars rect{fill:rgba(21,184,127,.13);transform-box:fill-box;transform-origin:center bottom}
  .chart__grid line{stroke:rgba(255,255,255,.06);stroke-width:1;stroke-dasharray:3 4}

  /* "new guest" toast */
  .toast{
    position:absolute;
    left:50%;top:-12px;
    display:flex;align-items:center;gap:8px;
    padding:8px 14px;
    font-size:12px;font-weight:600;color:var(--white);
    background:rgba(13,17,23,.82);
    border:1px solid rgba(21,184,127,.35);
    border-radius:999px;
    white-space:nowrap;
    opacity:0;pointer-events:none;
    box-shadow:0 12px 30px -12px rgba(0,0,0,.6),0 0 18px -6px rgba(21,184,127,.35);
  }
  .toast small{font-weight:500;color:var(--grey)}
  .toast__dot{
    width:6px;height:6px;border-radius:50%;background:var(--emerald);
    box-shadow:0 0 10px rgba(21,184,127,.9);
  }

  .focus__caption{
    position:absolute;
    left:-220px;top:168px;width:440px;
    text-align:center;
    opacity:0;
  }
  .focus__caption strong{
    display:block;
    font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--white);
  }
  .focus__caption span{
    display:block;margin-top:3px;
    font-size:10.5px;font-weight:600;letter-spacing:.22em;
    color:var(--mute);text-transform:uppercase;
  }

  /* atmosphere */
  .dhero__vignette{
    position:absolute;inset:0;pointer-events:none;z-index:4;
    background:radial-gradient(120% 104% at 50% 54%, rgba(7,10,15,0) 55%, rgba(7,10,15,.52) 100%);
  }
  /* rack focus: a soft iris that dims everything but the target pin during
     the pin-highlight beat. JS centres it once per fly (transform only) and
     fades it in/out; the resolved pose is released (fully transparent).
     Skipped on Firefox and under reduced motion. */
  .dhero__focusveil{
    position:absolute;left:0;top:0;z-index:1;
    width:260vmax;height:260vmax;
    margin:-130vmax 0 0 -130vmax;
    background:radial-gradient(circle, rgba(7,10,15,0) 110px, rgba(7,10,15,.5) 300px, rgba(7,10,15,.62) 700px);
    opacity:0;
    pointer-events:none;
    will-change:transform,opacity;
  }
  .is-ff .dhero__focusveil{display:none}
  .dhero__grain{
    position:absolute;inset:0;pointer-events:none;z-index:4;
    opacity:.5;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .dhero__veil{
    position:absolute;inset:0;pointer-events:none;z-index:5;
    background:linear-gradient(90deg, rgba(8,11,16,.9) 0%, rgba(8,11,16,.62) 30%, rgba(8,11,16,0) 58%);
  }

  /* ---- performance shedding ----------------------------------------
     mix-blend-mode (grain) and backdrop-filter (cards) are nearly free on
     Chrome's compositor but force full re-composites / repaints on Firefox —
     brutal while the camera scales the .world SVG beneath them.
     · .is-ff  (Firefox, set pre-paint): drop the grain blend and swap the
       card backdrop-blur for opaque-ish glass, permanently.
     · .is-moving (any browser, set by JS only while the camera animates):
       shed the grain + card blur for the duration of the move, restored at
       rest — so the resting look is untouched everywhere. */
  .is-ff .dhero__grain{mix-blend-mode:normal;opacity:.18}
  .is-ff .acard{
    backdrop-filter:none;-webkit-backdrop-filter:none;
    background:rgba(13,17,23,.85);
  }
  /* The router's drop-shadow is the last per-frame filter in the hero, and the
     hero transforms that element throughout the intro — Firefox re-rasterises
     the filtered layer on every one of those frames. Measured as compositor
     stalls (the main thread stays free), so it is invisible to JS profiling.
     Shed the filter and paint the ground shadow into the existing ::before
     glow instead: same grounded read, no filter in the frame loop. Same
     treatment the relay router already gets above. */
  .is-ff .frouter img{filter:none}
  .is-ff .frouter::before{
    background:
      radial-gradient(50% 50% at 50% 50%, rgba(21,184,127,.16) 0%, rgba(21,184,127,0) 70%),
      radial-gradient(34% 10% at 50% 90%, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 100%);
  }
  .dhero.is-moving .dhero__grain{display:none}
  .dhero.is-moving .acard{backdrop-filter:none;-webkit-backdrop-filter:none}

  /* ------------------------------------------------ light theme
     Hero-scoped daylight companions (production-ported; emerald elements
     deepen to #0f9e6c so they read on white). */
  html[data-theme="light"] .dhero{
    background:
      radial-gradient(56% 40% at 72% 6%, rgba(15,158,108,.05) 0%, rgba(15,158,108,0) 72%),
      radial-gradient(110% 80% at 64% 53%, rgba(15,158,108,.07) 0%, rgba(15,158,108,0) 58%),
      var(--night);
  }
  html[data-theme="light"] .dhero__vignette{
    background:radial-gradient(120% 100% at 50% 50%, rgba(20,24,32,0) 60%, rgba(20,24,32,.14) 100%);
  }
  html[data-theme="light"] .dhero__grain{opacity:.28}
  html[data-theme="light"] .dhero__veil{
    background:linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.66) 30%, rgba(255,255,255,0) 58%);
  }
  html[data-theme="light"] .dhero__focusveil{
    background:radial-gradient(circle, rgba(255,255,255,0) 110px, rgba(255,255,255,.5) 300px, rgba(255,255,255,.62) 700px);
  }
  html[data-theme="light"] .acard,
  html[data-theme="light"] .minimap{
    box-shadow:0 22px 44px -20px rgba(16,16,22,.22),inset 0 1px 0 rgba(255,255,255,.7);
  }
  html[data-theme="light"].is-ff .acard{background:rgba(255,255,255,.9)}
  html[data-theme="light"] .toast{
    background:rgba(255,255,255,.92);
    border-color:rgba(15,158,108,.4);
    box-shadow:0 12px 30px -12px rgba(16,16,22,.25),0 0 18px -6px rgba(15,158,108,.3);
  }
  html[data-theme="light"] .chart__grid line{stroke:rgba(16,16,22,.09)}
  html[data-theme="light"] #chart-dot{fill:var(--emerald-deep)}
  html[data-theme="light"] #chart-line{stroke:var(--emerald-deep)}
  html[data-theme="light"] #chart-halo{fill:rgba(15,158,108,.12)}
  html[data-theme="light"] .chart__bars rect{fill:rgba(15,158,108,.12)}
  html[data-theme="light"] .plan__slab{fill:#fffdf9;filter:drop-shadow(0 34px 80px rgba(16,16,22,.18))}
  html[data-theme="light"] .plan__cglow{opacity:.55}
  html[data-theme="light"] .plan__grid line{stroke:rgba(20,26,36,.05)}
  html[data-theme="light"] .plan__poche{stroke:rgba(16,20,28,.07)}
  html[data-theme="light"] .plan__lift{stroke:rgba(16,20,28,.14)}
  html[data-theme="light"] .plan__wall{stroke:rgba(16,20,28,.5)}
  html[data-theme="light"] .plan__wall2{stroke:rgba(16,20,28,.1)}
  html[data-theme="light"] .plan__inner{stroke:rgba(16,20,28,.22)}
  html[data-theme="light"] .plan__room{fill:rgba(16,20,28,.045)}
  html[data-theme="light"] .plan__label{fill:rgba(16,20,28,.42)}
  html[data-theme="light"] .plan__dim line{stroke:rgba(16,20,28,.22)}
  html[data-theme="light"] .plan__dot{fill:#0f9e6c;filter:drop-shadow(0 0 6px rgba(15,158,108,.45))}
  html[data-theme="light"] .plan__ripple{stroke:#0f9e6c}
  html[data-theme="light"] .frouter img{filter:drop-shadow(0 30px 44px rgba(16,16,22,.28))}
  html[data-theme="light"] .dhero__ghost{border-color:rgba(16,16,22,.25)}
  html[data-theme="light"] .dhero__ghost:hover{border-color:rgba(16,16,22,.5)}
  /* Firefox keeps its filter sheds in the light theme too */
  html[data-theme="light"].is-ff .plan__slab{filter:none}
  /* the light rule above re-specifies .frouter img, so restate the shed here */
  html[data-theme="light"].is-ff .frouter img{filter:none}
  html[data-theme="light"].is-ff .frouter::before{
    background:
      radial-gradient(50% 50% at 50% 50%, rgba(21,184,127,.14) 0%, rgba(21,184,127,0) 70%),
      radial-gradient(34% 10% at 50% 90%, rgba(16,16,22,.26) 0%, rgba(16,16,22,0) 100%);
  }

  /* copy column */
  .dhero__inner{
    position:absolute;inset:0;z-index:6;
    display:grid;align-content:center;justify-content:start;
    padding-left:max(48px,6vw);
    pointer-events:none;
  }
  .dhero__copy{max-width:530px;pointer-events:auto}
  /* LCP: hero copy paints at full opacity in the first frame. It used to rest
     at opacity:0 waiting for the GSAP entrance — Chrome never counts a
     zero-opacity element as painted, so the recorded LCP was the clock running
     until JS booted (4.3s on mobile), and if JS never arrived the copy stayed
     invisible though present in the DOM. The entrance now animates transform
     and filter only; nothing here may reintroduce a zero opacity. */
  .dhero__eyebrow{
    display:inline-flex;align-items:center;gap:10px;
    font-size:12px;font-weight:600;
    letter-spacing:.24em;text-transform:uppercase;
    color:var(--grey);
    margin-bottom:26px;
  }
  .dhero__eyebrow .dot{
    width:7px;height:7px;border-radius:50%;
    background:var(--emerald);
    box-shadow:0 0 12px rgba(21,184,127,.9);
  }
  .dhero__title{
    font-family:var(--pg-display);
    font-size:clamp(42px,4.8vw,68px);
    line-height:1.04;
    font-weight:700;
    letter-spacing:-.025em;
    color:var(--white);
  }
  .dhero__title .mask{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
  .dhero__title .mask>span{display:block;will-change:transform}
  .dhero__title strong{
    font-weight:700;
    background-image:linear-gradient(transparent 68%, var(--marker) 68%, var(--marker) 94%, transparent 94%);
    background-size:0% 100%;
    background-repeat:no-repeat;
    transition:background-size .7s var(--ease-spring) .1s;
  }
  .dhero__title strong.is-marked{background-size:100% 100%}
  .dhero__sub{
    margin-top:24px;
    font-size:17.5px;line-height:1.65;
    color:var(--grey);
    max-width:min(30rem,100%);
  }
  .dhero__actions{
    display:flex;align-items:center;flex-wrap:wrap;gap:22px;
    margin-top:36px;
  }
  .dhero__cta{
    display:inline-flex;align-items:center;gap:10px;
    padding:16px 30px;
    font-size:16px;font-weight:700;color:#fff;
    background:var(--brand-cta);
    border-radius:999px;
    box-shadow:0 18px 40px -14px rgba(13,134,89,.55);
    transition:transform .3s var(--ease-spring),box-shadow .3s,background-color .3s;
  }
  .dhero__cta:hover{
    transform:translateY(-2px);
    background:var(--brand-cta-hover);
    box-shadow:0 24px 50px -14px rgba(13,134,89,.65);
  }
  .dhero__cta svg{width:16px;height:16px;stroke:#fff;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .dhero__ghost{
    font-size:15.5px;font-weight:600;color:var(--grey);
    border-bottom:1px solid rgba(238,242,246,.22);
    padding-bottom:3px;
    transition:color .25s,border-color .25s;
  }
  /* 44px hit area, underline baseline untouched (touch-target note in core.css) */
  .dhero__ghost{position:relative;display:inline-block}
  .dhero__ghost::before{
    content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
    min-height:44px;height:100%;
  }
  .dhero__ghost:hover{color:var(--white);border-color:rgba(238,242,246,.55)}

  /* minimap */
  .minimap{
    position:absolute;right:30px;bottom:28px;z-index:7;
    width:224px;
    padding:12px 12px 10px;
    background:var(--glass);
    border:1px solid var(--hairline);
    border-radius:16px;
    backdrop-filter:blur(14px) saturate(1.3);
    -webkit-backdrop-filter:blur(14px) saturate(1.3);
    box-shadow:0 22px 44px -18px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.08);
    opacity:0;
  }
  .minimap svg{display:block;width:100%;height:auto;border-radius:8px}
  .minimap__hint{
    margin-top:8px;
    font-size:9.5px;font-weight:600;letter-spacing:.2em;
    color:var(--mute);text-transform:uppercase;
    text-align:center;
  }
  .mpin{cursor:pointer}
  .mpin circle{transition:fill .3s,r .3s}
  .mpin .mpin__ring{
    fill:none;stroke:rgba(21,184,127,0);stroke-width:5;
    transition:stroke .3s;
  }
  .mpin.is-active .mpin__ring{stroke:rgba(21,184,127,.5)}
  .mpin.is-active .mpin__dot{fill:var(--emerald)}

  /* -------------------------------------------------- responsive */
  @media (max-width:1280px) and (min-width:981px){
    .acard--uptime{display:none}
    .acard--guests{right:auto;bottom:auto;left:64px;top:78px}
  }
  @media (max-width:980px){
    .dhero{min-height:880px}
    .dhero__inner{align-content:start;justify-content:center;padding:118px 24px 0}
    .dhero__copy{max-width:560px}
    .dhero__title{font-size:clamp(36px,9vw,52px)}
    /* phone H1 sizing lives in styles/pages/home-v2.css (≤560px block,
       2026-09-08): the page rule out-specifies this one on the only page
       that ships this hero. */
    .dhero__sub{font-size:16px}
    .dhero__veil{
      background:linear-gradient(180deg, rgba(8,11,16,.92) 0%, rgba(8,11,16,.55) 38%, rgba(8,11,16,0) 60%);
    }
    html[data-theme="light"] .dhero__veil{
      background:linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.62) 38%, rgba(255,255,255,0) 60%);
    }
    .venue__plan{width:min(140vw,760px)}
    .frouter{width:230px;height:230px;left:-115px;top:-125px}
    .acard--views,.acard--uptime,.acard--captures{display:none}
    .acard--guests{right:auto;bottom:auto;left:36px;top:64px}
    .focus__caption{top:150px}
    .minimap{display:none}
  }
  @media (max-width:480px){
    /* phone: the canvas focal point (JS puts it at 50%/70% of the hero) rides
       lower so the copy column, wrapped actions and trust line resolve above
       the venue plan and router instead of over them */
    .dhero{min-height:1120px}
    .dhero__inner{padding-top:104px}
    .dhero__actions{gap:16px 22px}
  }

  /* -------------------------------------- static / reduced motion */
  .no-anim .pin__halo{animation:none;opacity:0}
  /* JS fully off: show the copy, hide the JS-built visual layers */
  html.no-js .dhero__eyebrow,html.no-js .dhero__sub,html.no-js .dhero__actions,
  html.no-js .dhero__trust,html.no-js .dhero__veil{opacity:1}
  html.no-js .world,html.no-js .venue,html.no-js .focus,html.no-js .minimap{display:none}
  .no-gsap .world{display:none}
  .no-gsap .venue__plan{opacity:1;transform:translate(-50%,-50%)}
  .no-gsap .plan__glow{opacity:1}
  .no-gsap .frouter,.no-gsap .acard,.no-gsap .focus__caption,.no-gsap .minimap,
  .no-gsap .dhero__eyebrow,.no-gsap .dhero__sub,.no-gsap .dhero__actions{opacity:1}
  @media (prefers-reduced-motion: reduce){
    .pin__halo{animation:none;opacity:0}
  }

  /* shield: halowifi-brand.css paints page-home h1 black with !important —
     out-specify it inside the dive hero. (The hero anchors dodge the site's
     red-anchor rule via the dh-button-new marker class, which matches its
     [class*="button-new"] exclusion without inheriting .button-new styles.) */
  .halowifi-brand .page.page-home .dhero h1.dhero__title{color:var(--white) !important}

  /* ── hero-v4's floating white pill nav. It lives outside .dhero, so the
     token vars are inlined as literals. ── */
  .nav{
    position:fixed;
    top:18px;left:50%;
    width:min(1320px,calc(100% - 36px));
    height:55px;box-sizing:border-box;   /* the 1px border sits inside the 55 */
    display:flex;align-items:center;justify-content:space-between;
    padding:0 14px 0 22px;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(18px) saturate(1.4);
    -webkit-backdrop-filter:blur(18px) saturate(1.4);
    border:1px solid rgba(16,16,22,.06);
    border-radius:15px;   /* a long bar with crisp corners (2026-09-07: 62/24 → 55/15) */
    /* rest: a quiet lift. Content scrolling behind the pill deepens it via
       .is-scrolled (page.js / sub.js toggle it past 12px) so the bar
       separates from whatever passes underneath. */
    box-shadow:0 8px 24px -14px rgba(16,16,22,.28),0 1px 2px rgba(16,16,22,.06);
    transition:box-shadow .35s cubic-bezier(.16,1,.3,1);
    z-index:120;
    opacity:0;
    transform:translateX(-50%) translateY(-14px);
    animation:rise-in 1s cubic-bezier(.16,1,.3,1) .1s forwards;
    font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  }
  @keyframes rise-in{to{opacity:1;transform:translateX(-50%) translateY(0)}}
  .nav.is-scrolled{box-shadow:0 18px 50px -20px rgba(0,0,0,.55),0 1px 2px rgba(16,16,22,.08)}
  /* wordmark only, 22px (2026-09-07: 27 → 24 with the 55px pill, then 22 on Kumar's call; mirrors core.css); the hairline "WiFi" strokes still read */
  .nav__logo img{display:block;height:22px;width:auto}
  .nav__links{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0}
  .nav__links a{
    display:block;padding:9px 15px;
    font-size:15px;font-weight:500;color:#3c3f49;
    border-radius:999px;text-decoration:none;
    transition:color .25s,background-color .25s;
  }
  .nav__links a:hover{color:#101016;background:rgba(16,16,22,.05)}
  .nav__right{display:flex;align-items:center;gap:10px}
  .nav__cloud{
    display:inline-flex;align-items:center;gap:8px;
    padding:9px 18px;
    font-size:14.5px;font-weight:600;color:#101016;
    border:1px solid rgba(16,16,22,.14);
    border-radius:999px;text-decoration:none;
    transition:border-color .25s,background-color .25s,transform .25s cubic-bezier(.16,1,.3,1);
  }
  .nav__cloud:hover{border-color:rgba(16,16,22,.32);background:#fff;transform:translateY(-1px)}
  .nav__cloud svg{width:17px;height:17px;stroke:#101016;fill:none}   /* mono: the demo CTA is the nav's one colour */
  .nav__cloud[hidden]{display:none}
  .nav__burger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:42px;height:42px;align-items:center;border-radius:999px;
    border:0;background:none;cursor:pointer;padding:0;
    transition:background-color .25s;
  }
  .nav__burger:hover{background:rgba(16,16,22,.05)}
  .nav__burger span{display:block;width:18px;height:1.6px;background:#101016;border-radius:2px;transition:transform .25s cubic-bezier(.16,1,.3,1)}
  .nav__theme{
    width:42px;height:42px;
    display:flex;align-items:center;justify-content:center;
    border-radius:999px;color:#101016;
    border:0;background:none;cursor:pointer;padding:0;
    transition:background-color .25s;
  }
  .nav__theme:hover{background:rgba(16,16,22,.06)}
  .nav__theme svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .nav__theme .moon{display:none}
  .no-anim .nav{animation:none;opacity:1;transform:translateX(-50%)}
  /* burger sheet: same glass pill language, floats just below the nav */
  /* premium panel — MIRROR of core.css's .nav__menu block (this copy wins
     on index by load order; edit both). Literals, not --brand vars: the nav
     lives outside .dhero, where those tokens don't reach. */
  .nav__menu{
    position:absolute;top:calc(100% + 10px);left:10px;right:10px;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(18px) saturate(1.4);
    -webkit-backdrop-filter:blur(18px) saturate(1.4);
    border:1px solid rgba(16,16,22,.06);
    border-radius:15px;   /* follows the pill */
    box-shadow:0 30px 70px -28px rgba(0,0,0,.55);
    padding:14px 12px 12px;
    opacity:0;transform:translateY(-12px) scale(.98);transform-origin:top center;
    pointer-events:none;
    transition:opacity .3s cubic-bezier(.16,1,.3,1),transform .42s cubic-bezier(.16,1,.3,1);
  }
  .nav__menu.is-open{opacity:1;transform:none;pointer-events:auto}
  .nav__menu ul{list-style:none;margin:0;padding:0}
  .nav__menu ul a{
    display:flex;align-items:center;justify-content:space-between;
    padding:15px 18px;border-radius:18px;
    font-size:19px;font-weight:600;letter-spacing:-.01em;color:#101016;text-decoration:none;
    transition:background-color .25s;
  }
  .nav__menu ul a::after{
    content:"→";font-size:15px;color:rgba(16,16,22,.3);
    transform:translateX(-4px);opacity:0;
    transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .3s;
  }
  .nav__menu ul a:hover,.nav__menu ul a[aria-current="page"]{background:rgba(16,16,22,.05)}
  .nav__menu ul a:hover::after,.nav__menu ul a[aria-current="page"]::after{transform:none;opacity:1}
  .nav__menu li{
    opacity:0;transform:translateY(10px);
    transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1);
  }
  .nav__menu.is-open li{opacity:1;transform:none}
  .nav__menu.is-open li:nth-child(1){transition-delay:.06s}
  .nav__menu.is-open li:nth-child(2){transition-delay:.11s}
  .nav__menu.is-open li:nth-child(3){transition-delay:.16s}
  .nav__menu.is-open li:nth-child(4){transition-delay:.21s}
  .nav__menu.is-open li:nth-child(5){transition-delay:.26s}
  .nav__burger.is-open span:first-child{transform:translateY(3.3px) rotate(45deg)}
  .nav__burger.is-open span:last-child{transform:translateY(-3.3px) rotate(-45deg)}
  @media (min-width:901px){.nav__burger,.nav__menu{display:none}}
  @media (max-width:900px){.nav__links{display:none}}
  @media (max-width:560px){.nav__cloud span{display:none}.nav__cloud{padding:9px 12px}}
  /* phone: the pill keeps logo + demo + burger inside its own bounds */
  @media (max-width:480px){
    .nav{padding:0 10px 0 14px}
    .nav__logo img{height:21px}
    .nav__right{gap:8px}
    .nav__demo{height:34px;padding:0 14px;font-size:13.5px}
    .nav__logo,.nav__demo,.nav__burger{flex:none}
  }
  @media (max-width:360px){
    .nav__logo img{height:21px}
    .nav__demo{padding:0 12px;font-size:13px}
  }
  @media (prefers-reduced-motion: reduce){
    .nav{animation:none;opacity:1;transform:translateX(-50%)}
    .nav__menu,.nav__menu li,.nav__menu ul a::after{transition:none}
  }