/* Landing v2 "Daylight Mission Control" — all new classes are lp- prefixed.
   Reuses from landing.css: .l-fr*, l-float-1..4, l-bob. From styles.css: .brand*.
   Spec: docs/superpowers/specs/2026-07-02-landing-v2-daylight-control-design.md */
/* `hidden` means hidden. The UA sheet's own [hidden]{display:none} is only
   specificity (0,1,0), so ANY two-class author rule silently defeats it --
   `.lp-globe-wrap .lp-rot{display:flex}` (0,2,0) below did exactly that, and
   three controls this page's JS had explicitly hidden went on rendering:
   the rotate toggle and the Day/Space pair, all of them wired to the retired
   Mapbox hero and therefore inert. Measured live before this fix:
   #lpRotToggle and .lp-atmo both hiddenAttr:true, display:flex.
   Declared FIRST so it reads as the page-wide rule it is. */
[hidden]{display:none !important}

:root{
  --lp-sky:#EDF3FB; --lp-bg:#F6F9FD; --lp-ink:#10213F; --lp-dim:#54658A; --lp-faint:#8B99B8;
  --lp-line:rgba(16,43,84,.13); --lp-green:#0E8A55; --lp-green-bright:#12A968;
}
.lp-hero{--h-bg:var(--lp-sky);--h-ink:var(--lp-ink);--h-dim:var(--lp-dim);--h-faint:var(--lp-faint);
  --h-card:rgba(255,255,255,.92);--h-line:rgba(16,43,84,.14);--h-accent:var(--ag-color-logo-blue)}
.lp-hero.space{--h-bg:#04070F;--h-ink:#E9F0FB;--h-dim:#8CA0BF;--h-faint:#5E6F90;
  --h-card:rgba(10,18,36,.9);--h-line:rgba(93,158,255,.18);--h-accent:#8FBCE8}

body{background:var(--lp-bg);color:var(--lp-ink);font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;margin:0;overflow-x:hidden}

/* nav */
.lp-nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:0 28px;height:58px;background:rgba(255,255,255,.85);backdrop-filter:blur(14px);border-bottom:1px solid var(--lp-line)}
.lp-nav__links{display:flex;gap:26px}
.lp-nav__links a{color:var(--lp-dim);text-decoration:none;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.lp-nav__links a:hover{color:var(--lp-ink)}
.lp-nav__cta{display:flex;gap:10px;align-items:center}

/* buttons — logo palette */
.lp-btn{font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border-radius:8px;cursor:pointer;text-decoration:none;transition:.2s;border:none;background:none;display:inline-flex;align-items:center;white-space:nowrap}
.lp-btn--ghost{color:var(--lp-dim);padding:9px 14px}
.lp-btn--ghost:hover{color:var(--lp-ink)}
.lp-btn--primary{background:var(--ag-gradient-logo);color:#fff;padding:11px 20px;border:1px solid var(--ag-color-logo-navy);box-shadow:0 6px 18px rgba(24,72,144,.28)}
.lp-btn--primary:hover{filter:brightness(1.12);transform:translateY(-1px)}
.lp-btn--line{border:1.5px solid var(--ag-color-logo-blue);color:var(--ag-color-logo-blue);padding:10px 18px;background:rgba(255,255,255,.65)}
.lp-btn--line:hover{background:rgba(24,96,168,.08)}
.lp-btn--big{padding:14px 26px;font-size:13px}

/* hero */
.lp-hero{position:relative;min-height:100vh;background:var(--h-bg);transition:background .8s ease;overflow:hidden}
/* z-index:0 removed deliberately (finding 1, secondary): position:absolute + an
   explicit z-index creates a new stacking context, which pinned .lp-rot's
   z-index:6 to only rank *inside* that context -- so it could never paint
   above the sibling .lp-veil (z:2) / .lp-hero__grid (z:5), which live outside
   it. Dropping z-index leaves position:absolute (still needed for layout) but
   z-index:auto does NOT create a stacking context, so #lpMap/.lp-poster/.lp-rot
   now rank directly against .lp-veil/.lp-hero__grid at the .lp-hero level.
   That is a no-op for #lpMap (implicit 0) and .lp-poster (z:1) -- both still
   land below .lp-veil (z:2), same relative order as before -- and it is the
   fix for .lp-rot (z:6), which now legitimately paints above both. */
.lp-globe-wrap{position:absolute;top:0;bottom:0;left:14%;right:-14%;
  /* Owner 2026-09-14: "double tapping on the globe cover the globe and then
     the page in a select all manner".

     touch-action and user-select are DIFFERENT mechanisms and only the first
     was shipped. touch-action:none on #lpOrbit stops scrolling and
     double-tap-to-ZOOM; it has no bearing on text SELECTION. So the arming
     double tap still ran the browser's native select-word -- and with no text
     under the finger the selection expands outward until the whole page reads
     as selected.

     Scoped to the wrap because that is exactly "within the globe's container",
     and nothing in here is text anyone would want to select: it is the globe,
     the poster and three icon buttons. */
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent}
/* pointer-events:none is LOAD-BEARING, not tidiness. #lpMap is
   position:absolute/inset:0 and sits AFTER #lpGlMap in the DOM, so it covers
   the map edge to edge. The crossfade sets pointer-events:none on the CANVAS
   (#lpOrbit.fade) -- but a transparent absolutely-positioned PARENT still
   hit-tests, so every drag on the dived map was swallowed by this div. Zoom
   kept working because the buttons are siblings at z-index:7 calling
   map.zoomIn() programmatically; spin did not. Reported as "I can only zoom in
   and out, I can't rotate/spin the underneath globe". The canvas re-arms
   itself with pointer-events:auto below, so orbit mode is unaffected. */
#lpMap{position:absolute;inset:0;pointer-events:none}
/* Task 30 (Open Map Stack): the orbit-engine canvas, mounted inside #lpMap on
   the openmaps_landing flag-on path (static/landing/js/globe_hero.js). Its own
   inset:0 mirrors templates/globe/partials/_orbit.html's #ag-orbit rule so it
   fills #lpMap regardless of #lpMap staying the positioned box either way.
   cursor:grab/.dragging match engine.js, which toggles that class itself on
   pointerdown/up -- pointer-drag is the only interaction hero mode allows. */
#lpOrbit{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;
  /* Re-arms what #lpMap's pointer-events:none turns off for the subtree, so
     the marble is draggable in orbit mode and the WHOLE subtree goes
     transparent to pointers the moment .fade lands. */
  pointer-events:auto;
  /* `none`, not `pan-y`. pan-y handed VERTICAL drags to the page, so a finger
     could spin the globe left/right but never TILT it -- half-working, and
     what the fullscreen prompt was papering over. Owner 2026-09-14: "make
     interactions with the marble globe possible on mobile devices inside its
     container instead of that". `none` gives the canvas every gesture inside
     its own box (390x335 at phone width) so drag rotates in both axes and the
     pinch handler in globe_hero.js can zoom; the page still scrolls
     everywhere else, which is what "inside its container" means.
     webviewBoot.js:402 documents the same choice for the same engine: it is
     what stops the host panning/zooming the document out from under the rig. */
  touch-action:none;
  transition:opacity .65s ease}
#lpOrbit.dragging{cursor:grabbing}
/* The hand-off crossfade. handoff.js adds/removes this class itself (it is the
   ONE piece of DOM that module touches), and attachOrbitHandoff reveals the map
   underneath in the same beat. Without the rule the class toggles and nothing
   fades: the marble would simply sit on top of the map it just dived to.
   Mirrors #ag-orbit.fade in templates/globe/partials/_orbit.html, including
   pointer-events -- once faded, nothing in the orbit subtree may swallow the
   drags and wheels that now belong to the map. */
#lpOrbit.fade{opacity:0;pointer-events:none}
/* The MapLibre map the dive lands on. Same box as #lpMap, deliberately BEFORE
   it in the DOM so the marble paints in front until the crossfade. No z-index:
   adding one here would create a stacking context and re-open the .lp-rot bug
   documented above. */
#lpGlMap{position:absolute;inset:0}
/* The fullscreen target. .lp-globe-wrap is left:14%/right:-14% -- deliberately
   overflowing and clipped by .lp-hero{overflow:hidden} -- so fullscreening IT
   would carry that geometry into the fullscreen layer. This stage wraps only
   the map + canvas, so :fullscreen gets a clean inset:0 box. It must NOT take
   pointer-events of its own: #lpMap is already none and #lpOrbit re-arms, and
   a third interactive layer here would re-break the drag chain. */
.lp-globe-stage{position:absolute;inset:0}
.lp-globe-stage:fullscreen{width:100vw;height:100vh;background:#04070F}
.lp-globe-stage:-webkit-full-screen{width:100vw;height:100vh;background:#04070F}

.lp-poster{position:absolute;inset:0;z-index:1;background-size:contain;background-position:center;background-repeat:no-repeat;transition:opacity .9s;pointer-events:none}
.lp-poster.done{opacity:0}
.lp-globe-wrap .lp-rot{
  position:absolute; top:12px; right:12px; z-index:7;
  /* padding:0 14px on a 30px-wide box left a TWO pixel content box for a 16px
     glyph, so the icon was squeezed out of its own button. The box is the
     target here; the glyph centres itself via the flex centring below. */
  width:34px; height:34px; padding:0;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:600; line-height:1;
  /* Circular, like every other icon-only floating control on the site
     (cf. .atl-globe-btn). The 6px radius read as a stray tooltip. */
  border:0; border-radius:50%; cursor:pointer;
  /* Dark glass, not a white puck. This control floats over the globe, which
     is dark in both hero themes, and a solid #fff circle read as a foreign
     object against every other floating control on the product (the globe
     page's instrument rail is the same treatment). Border + blur rather than
     a flat fill so it still separates from bright cloud tops. */
  background:rgba(10,18,36,.72); color:#E9F0FB;
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 6px 18px rgba(0,0,0,.42);
}
.lp-globe-wrap .lp-rot:hover{ background:rgba(20,32,58,.86); border-color:rgba(255,255,255,.28); }
.lp-globe-wrap .lp-rot--active{ color:#fff; }
/* Blocked = the camera is closer than the default view. It was written as
   `cursor:not-allowed` when blocked meant the button could not fire; under
   the 2026-09-14 behaviour it is precisely when clicking DOES something --
   it returns to the default view -- so the cursor must not say otherwise.
   Dimmed rather than disabled: the globe is not spinning, and the control
   is offering the way back. */
.lp-globe-wrap .lp-rot--blocked{ opacity:.72; cursor:pointer; }
.lp-globe-wrap .lp-rot--blocked:hover{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .lp-globe-wrap .lp-rot{ opacity:.7; } }

/* The zoom controls, in .lp-rot's own family and its own column.

   DECLARED HERE, not at the end of the file, and that position is load-bearing:
   @media adds NO specificity, so between two equally-specific
   `.lp-globe-wrap .lp-zoom` rules the LATER one in source order wins. Appending
   these after the @media (min-width:1081px) block below meant the base
   right:12px silently beat that block's right:calc(14% + 28px), and the buttons
   shipped ~207px off the right of the screen (measured on production: rect
   1738..1772 against a 1565 viewport) while .lp-rot -- declared above the block
   -- sat correctly at 1503..1537. Keep them above it. */
.lp-globe-wrap .lp-zoom{
  position:absolute; right:12px; z-index:7;
  width:34px; height:34px; padding:0;
  display:flex; align-items:center; justify-content:center;
  font-family:inherit; font-size:17px; font-weight:600; line-height:1;
  border:1px solid rgba(255,255,255,.18); border-radius:50%; cursor:pointer;
  color:rgba(255,255,255,.82); background:rgba(12,22,44,.72);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:background .2s,border-color .2s,color .2s;
}
.lp-globe-wrap .lp-zoom--in{top:54px}
.lp-globe-wrap .lp-zoom--out{top:96px}
.lp-globe-wrap .lp-zoom--fs{top:138px;font-size:15px}
.lp-globe-wrap .lp-zoom:hover{background:rgba(20,32,58,.86);border-color:rgba(255,255,255,.28);color:#fff}
.lp-globe-wrap .lp-zoom:disabled{opacity:.4;cursor:not-allowed}

/* finding 1 (critical): .lp-globe-wrap sits at left:14%/right:-14%, i.e. its
   right edge lands 14% of the hero's width *past* the viewport (clipped by
   .lp-hero{overflow:hidden}). .lp-rot's right:12px is measured from that
   off-screen edge, so above 1080px the button rendered ~14% width + 12px off
   the right of the screen -- invisible. Pull it back in by the same 14% so it
   sits 12px inside the *visible* right edge instead. Scoped to >1080px only:
   the max-width:1080px block already resets .lp-globe-wrap to right:auto
   (real edge = visible edge there), so the base right:12px is already
   correct at that breakpoint and must not get the 14% added a second time.
   RTL does NOT get "excluded" -- it gets the MIRROR, and getting that wrong
   is what this note used to do. [dir="rtl"] .lp-globe-wrap flips to
   left:-14%/right:14%, so its RIGHT edge IS the on-screen one, and the old
   comment concluded the base right:12px was "already correct there too".
   Visible, yes. Wrong edge. In RTL the globe mirrors to the LEFT, so the
   wrap's on-screen right edge is the one abutting the COPY -- measured live
   at viewport 1651 (dir=rtl): wrap left:-231px/right:231px, and all three
   controls rendered x 1374..1408 inside a copy column spanning 991..1651, a
   box-intersection returning true for zoom-in, zoom-out AND rotate. They sat
   on top of the hero text. The mirror of right:calc(14% + 28px) is
   left:calc(14% + 28px); right:auto goes with it, or the base rule's
   right:12px keeps anchoring the button from both edges at once. */
@media (min-width:1081px){
  /* ...and the VERTICAL axis, which the two earlier fixes never looked at.
     Above 1080px .lp-globe-wrap is absolute with top:0, so top:12px put this
     button inside .lp-nav — a 58px bar with z-index 50 against this button's
     6. document.elementFromPoint() at the button's centre returned NAV, i.e.
     the control could not be clicked AT ALL, and where it peeked out it
     collided with JOIN FREE (nav 1300-1412 vs button 1398-1428).
     Move it to the globe's own control zone instead: .lp-atmo sits at
     right:28px/bottom:56px and is 40px tall, so bottom:104px leaves an 8px
     gap above it, and matching right:28px lines the two up on one edge.
     Below 1081px .lp-globe-wrap is position:relative inside the column and
     the hero grid already clears the header, so the base top:12px stays
     right there and must NOT get this treatment. */
  .lp-globe-wrap .lp-rot{ top:auto; bottom:104px; right:calc(14% + 28px); }
  [dir="rtl"] .lp-globe-wrap .lp-rot{ right:auto; left:calc(14% + 28px); }
  /* The zoom buttons walked into BOTH halves of finding 1 above, verbatim.
     Their base right:12px was measured from the wrap's off-screen right edge
     (measured live: viewport 1565, button x 1738 -> 1772, i.e. ~207px past the
     screen), and their top:54/96px put them in the same .lp-nav band that made
     .lp-rot unclickable. Same cure, same column: pulled back inside the visible
     edge, and stacked UPWARD from .lp-rot's bottom:104px -- 34px tall with 8px
     gaps -> 146 and 188 -- so the three controls read as one instrument stack
     clear of both the nav and .lp-atmo. RTL gets the same MIRROR as .lp-rot --
     left:calc(14% + 28px) -- for the reason spelled out above this block. */
  .lp-globe-wrap .lp-zoom{ top:auto; right:calc(14% + 28px); }
  .lp-globe-wrap .lp-zoom--in{ bottom:146px; }
  .lp-globe-wrap .lp-zoom--out{ bottom:188px; }
  .lp-globe-wrap .lp-zoom--fs{ bottom:230px; }
  [dir="rtl"] .lp-globe-wrap .lp-zoom{ right:auto; left:calc(14% + 28px); }
}
.lp-veil{position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(90deg,var(--h-bg) 0%,var(--h-bg) 24%,transparent 52%)}
.lp-hero__grid{position:relative;z-index:5;min-height:100vh;display:grid;grid-template-columns:minmax(430px,46%) 1fr;align-items:center;padding:100px 0 64px;pointer-events:none}
.lp-hero__copy{padding:0 28px 0 56px;max-width:660px;pointer-events:auto}
.lp-systag{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--lp-green);
  border:1px solid rgba(18,169,104,.35);background:rgba(18,169,104,.08);padding:7px 12px;border-radius:6px;margin-bottom:14px;text-transform:uppercase}
.lp-pulse{width:7px;height:7px;border-radius:50%;background:var(--lp-green-bright);animation:lp-pulse 1.6s infinite}
@keyframes lp-pulse{0%{box-shadow:0 0 0 0 rgba(18,169,104,.5)}70%{box-shadow:0 0 0 9px rgba(18,169,104,0)}100%{box-shadow:0 0 0 0 rgba(18,169,104,0)}}
.lp-h1{font-weight:800;font-size:clamp(32px,4.2vw,56px);line-height:1.08;letter-spacing:-.01em;margin:0 0 14px;color:var(--h-ink);transition:color .8s}
.lp-h1__thin{font-weight:300;color:var(--h-dim);transition:color .8s}
.lp-grad-live{background:linear-gradient(120deg,#1860A8 0%,#4878A8 25%,#A890A8 50%,#184890 75%,#1860A8 100%);background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:lp-gradpan 7s linear infinite}
@keyframes lp-gradpan{to{background-position:300% 0}}
.lp-hero.space .lp-grad-live{background-image:linear-gradient(120deg,#8FBCE8 0%,#F1C9AE 30%,#A890A8 55%,#8FBCE8 100%)}
.lp-liveline{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;letter-spacing:.05em;color:var(--h-dim);min-height:24px;margin-bottom:20px;text-transform:uppercase;transition:color .8s}
.lp-liveline__tag{flex:none;color:#fff;background:var(--ag-gradient-logo);border-radius:5px;padding:3px 8px;font-size:9px;letter-spacing:.14em}
.lp-liveline__caret{flex:none;width:8px;height:15px;background:var(--ag-color-logo-blue);animation:lp-caret 1s step-end infinite}
@keyframes lp-caret{50%{opacity:0}}
.lp-sub{color:var(--h-dim);font-size:15.5px;line-height:1.65;max-width:48ch;margin:0 0 22px;transition:color .8s}
.lp-sub b{color:var(--h-ink);font-weight:600}
.lp-search{display:flex;align-items:center;background:rgba(255,255,255,.96);border:1px solid var(--lp-line);border-radius:12px;
  padding:6px 6px 6px 18px;max-width:520px;box-shadow:0 14px 34px rgba(16,33,63,.14);margin-bottom:20px;color:var(--lp-ink)}
.lp-search svg{flex:none;opacity:.45}
.lp-search input{flex:1;border:none;outline:none;background:none;font-family:inherit;font-size:14.5px;color:var(--lp-ink);padding:9px 12px;min-width:0}
.lp-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px}
.lp-actions--center{justify-content:center;margin-top:26px}
.lp-stats{display:flex;gap:34px;flex-wrap:wrap}
.lp-stat b{display:block;font-weight:800;font-size:24px;color:var(--h-accent);line-height:1.1;transition:color .8s}
.lp-stat span{font-size:10px;font-weight:600;letter-spacing:.12em;color:var(--h-faint);text-transform:uppercase;transition:color .8s}
.lp-hint{margin-top:18px;font-size:10.5px;font-weight:500;letter-spacing:.16em;color:var(--h-faint);text-transform:uppercase;transition:color .8s}
.lp-hint b{color:var(--h-accent)}

/* floating cluster (positions set by landing_v2.js; cards use production .l-fr) */
.lp-stage{position:absolute;right:20px;top:96px;bottom:110px;z-index:6;width:392px;pointer-events:none}
.lp-stage__head{font-size:10.5px;font-weight:600;letter-spacing:.2em;color:var(--h-faint);display:flex;justify-content:space-between;padding:0 6px;margin-bottom:10px;text-transform:uppercase;transition:color .8s}
.lp-stage__body{position:relative;height:calc(100% - 26px)}
.lp-stage .l-fr{pointer-events:auto;border:1px solid rgba(255,255,255,.35)}
.lp-stage .l-fr .lp-swap{transition:opacity .3s}
.lp-stage .l-fr.swapping .lp-swap{opacity:.1}
.lp-chip{position:absolute;pointer-events:auto;display:flex;gap:10px;align-items:center;background:var(--h-card);backdrop-filter:blur(10px);
  border:1px solid var(--h-line);border-left:3px solid var(--ag-color-logo-blue);border-radius:10px;padding:9px 12px;box-shadow:0 10px 26px rgba(16,33,63,.14);
  cursor:pointer;max-width:250px;transition:background .8s,border-color .8s,opacity .3s}
.lp-chip__t{font-size:8.5px;font-weight:700;letter-spacing:.14em;color:var(--h-faint);display:block;margin-bottom:2px;text-transform:uppercase}
.lp-chip__b{font-size:11.5px;line-height:1.35;color:var(--h-ink);display:block}
.lp-chip__b b{color:var(--h-accent)}
.lp-chip__th{flex:none;width:30px;height:40px;border-radius:6px;background-size:cover;background-position:center;border:1px solid var(--h-line)}
.lp-story{position:absolute;pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:5px}
.lp-story__ring{width:58px;height:58px;border-radius:50%;padding:3px;background:conic-gradient(from 210deg,#1860A8,#4878A8,#A890A8,#1860A8)}
.lp-story__ph{width:100%;height:100%;border-radius:50%;border:2.5px solid #fff;background-size:cover;background-position:center}
.lp-story__lb{font-size:8.5px;font-weight:600;letter-spacing:.12em;color:var(--h-faint);background:var(--h-card);border:1px solid var(--h-line);border-radius:5px;padding:3px 7px;text-transform:uppercase}

/* atmosphere toggle + scroll hint + ticker */
.lp-atmo{position:absolute;z-index:7;right:28px;bottom:56px;display:flex;align-items:center;font-size:10.5px;font-weight:600;letter-spacing:.14em;
  border:1px solid var(--h-line);border-radius:8px;overflow:hidden;background:var(--h-card);backdrop-filter:blur(10px);text-transform:uppercase;transition:background .8s}
.lp-atmo span{padding:9px 8px 9px 13px;color:var(--h-faint)}
.lp-atmo button{font-family:inherit;font-size:10.5px;font-weight:600;letter-spacing:.12em;padding:9px 13px;border:none;cursor:pointer;background:transparent;color:var(--h-dim);text-transform:uppercase}
.lp-atmo button.on{background:var(--ag-gradient-logo);color:#fff}
.lp-scrollhint{position:absolute;z-index:7;bottom:52px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:9.5px;font-weight:600;letter-spacing:.22em;color:var(--h-faint);text-transform:uppercase;transition:opacity .4s;animation:l-bob 2.2s ease-in-out infinite;pointer-events:none}
.lp-ticker{position:absolute;bottom:0;left:0;right:0;z-index:6;border-top:1px solid var(--h-line);background:var(--h-card);backdrop-filter:blur(10px);overflow:hidden;height:40px;display:flex;align-items:center;transition:background .8s}
.lp-ticker__inner{display:flex;gap:54px;white-space:nowrap;animation:lp-tick 46s linear infinite;font-size:11px;font-weight:500;letter-spacing:.1em;color:var(--h-dim);text-transform:uppercase;transition:color .8s}
@keyframes lp-tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* map pins + popups */
.lp-pin{position:absolute;width:14px;height:14px;cursor:pointer}
.lp-pin::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ag-color-logo-blue);border:2.5px solid #fff;box-shadow:0 2px 10px rgba(16,40,80,.4)}
.lp-pin::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid rgba(24,96,168,.55);animation:lp-pinring 2.2s ease-out infinite}
@keyframes lp-pinring{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.6);opacity:0}}
.lp-pin__lbl{position:absolute;left:20px;top:-4px;white-space:nowrap;font-size:9.5px;font-weight:600;letter-spacing:.12em;
  background:rgba(255,255,255,.94);color:var(--lp-ink);border:1px solid rgba(16,43,84,.16);border-radius:5px;padding:4px 8px;box-shadow:0 3px 12px rgba(16,33,63,.14);text-transform:uppercase}
.lp-pin--dot .lp-pin__lbl{display:none}
.lp-hero .mapboxgl-popup-content{font-family:inherit;border-radius:12px;box-shadow:0 12px 34px rgba(16,33,63,.22);padding:10px;width:200px}
.lp-pop__img{width:100%;height:96px;border-radius:8px;background-size:cover;background-position:center;margin-bottom:8px}
.lp-pop__t{font-weight:600;font-size:13px;color:var(--lp-ink)}
.lp-pop__s{font-size:11.5px;color:var(--lp-dim);margin-top:2px}
.lp-pop__a{display:inline-block;margin-top:8px;font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--ag-color-logo-blue);text-decoration:none;border-bottom:1.5px solid var(--ag-color-logo-sky);text-transform:uppercase}
.mapboxgl-scroll-zoom-blocker,.mapboxgl-touch-pan-blocker{font-family:inherit!important;font-size:12.5px!important;background:rgba(10,18,36,.72)!important}

/* sections */
/* width:100% is load-bearing: the global styles.css sets body{display:flex;
   flex-direction:column}, under which `margin:0 auto` alone makes a section
   shrink to its content width instead of filling. width:100% forces full
   width, then max-width caps and the auto margins centre it. */
.lp-section{position:relative;padding:104px 56px;width:100%;max-width:1280px;margin:0 auto;box-sizing:border-box}
.lp-label{font-size:11px;font-weight:700;letter-spacing:.24em;color:var(--ag-color-logo-blue);text-transform:uppercase;margin-bottom:16px;display:flex;align-items:center;gap:12px}
.lp-label::before{content:"";width:34px;height:1px;background:var(--ag-color-logo-blue)}
.lp-h2{font-weight:700;font-size:clamp(24px,3vw,40px);line-height:1.2;max-width:24ch;color:var(--lp-ink);letter-spacing:-.01em;margin:0}
.lp-lead{color:var(--lp-dim);font-size:15.5px;line-height:1.7;max-width:58ch;margin-top:16px}
.lp-lead b{color:var(--lp-ink)}
.lp-instruments{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:52px}
.lp-inst{background:#fff;border:1px solid var(--lp-line);border-radius:16px;padding:26px 22px 28px;display:flex;flex-direction:column;transition:.25s;box-shadow:0 4px 18px rgba(16,33,63,.05)}
.lp-inst:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(16,33,63,.12)}
.lp-inst__no{font-size:10px;font-weight:600;color:var(--lp-faint);letter-spacing:.16em;margin-bottom:28px;display:flex;justify-content:space-between;text-transform:uppercase}
.lp-inst__no .lp-live{color:var(--lp-green)}
.lp-inst__viz{height:122px;margin-bottom:22px;position:relative}
.lp-inst h3{font-weight:700;font-size:15.5px;margin:0 0 10px;letter-spacing:.04em}
.lp-inst p{color:var(--lp-dim);font-size:13.5px;line-height:1.65;flex:1;margin:0}
.lp-inst p b{color:var(--lp-ink)}
.lp-inst a{display:inline-block;margin-top:15px;font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--ag-color-logo-blue);text-decoration:none;text-transform:uppercase}
.lp-rings{display:flex;align-items:center;justify-content:center;gap:14px;height:100%}
.lp-ring{width:64px;height:64px;border-radius:50%;padding:3px;background:conic-gradient(from 210deg,#1860A8,#4878A8,#A890A8,#1860A8)}
.lp-ring__ph{width:100%;height:100%;border-radius:50%;border:2.5px solid #fff;background-size:cover;background-position:center}
.lp-ring--empty{width:64px;height:64px;border-radius:50%;border:2px dashed rgba(16,43,84,.25);display:grid;place-items:center;color:var(--lp-faint);font-size:20px;font-weight:300}
.lp-ring--empty.lp-dim{opacity:.55}
.lp-ringwrap{text-align:center}
.lp-ringwrap__nm{font-size:9px;font-weight:600;letter-spacing:.08em;color:var(--lp-faint);margin-top:6px;max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-covers{display:flex;gap:8px;justify-content:center;padding-top:4px}
.lp-cover{width:56px;height:94px;border-radius:10px;position:relative;overflow:hidden;border:1px solid rgba(16,43,84,.14);box-shadow:0 8px 20px rgba(16,33,63,.14);background-size:cover;background-position:center}
.lp-cover:nth-child(1){transform:rotate(-5deg) translateY(6px)}
.lp-cover:nth-child(2){z-index:2;transform:translateY(-2px)}
.lp-cover:nth-child(3){transform:rotate(5deg) translateY(6px)}
.lp-comm{background:#F4F8FD;border:1px solid var(--lp-line);border-radius:12px;padding:12px 13px}
.lp-comm__top{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.lp-comm__av{width:30px;height:30px;border-radius:9px;background:var(--ag-gradient-logo);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px}
.lp-comm__nm{font-weight:600;font-size:13.5px;color:var(--lp-ink);display:block}
.lp-comm__meta{font-size:9.5px;font-weight:600;color:var(--lp-faint);letter-spacing:.06em;text-transform:uppercase;display:block}
.lp-comm__pv{font-size:11.5px;color:var(--lp-dim);font-style:italic;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lp-book{background:#F4F8FD;border:1px solid var(--lp-line);border-radius:12px;padding:11px 14px}
.lp-book__row{display:flex;justify-content:space-between;font-size:10px;font-weight:600;color:var(--lp-dim);letter-spacing:.05em;padding:4.5px 0;border-bottom:1px dashed rgba(16,43,84,.14);text-transform:uppercase}
.lp-book__row:last-child{border:none}
.lp-book__row .ok{color:var(--lp-green);font-weight:700}
.lp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:60px;counter-reset:lpstep}
.lp-step{position:relative;padding-top:26px;border-top:1.5px solid rgba(16,43,84,.16)}
.lp-step::before{counter-increment:lpstep;content:"0" counter(lpstep);position:absolute;top:-13px;left:0;font-size:11px;font-weight:700;color:var(--ag-color-logo-blue);background:var(--lp-bg);padding-right:12px;letter-spacing:.18em}
.lp-step h3{font-size:16.5px;font-weight:700;margin:0 0 10px}
.lp-step p{color:var(--lp-dim);font-size:14px;line-height:1.7;margin:0}
/* Full-bleed section; the dawn glow is a background gradient sized in % so it
   always scales with the viewport (no fixed-px blob that boxes on wide screens). */
.lp-gatecta{text-align:center;padding:130px 56px 150px;max-width:none;position:relative;
  background:radial-gradient(120% 300px at 50% 100%,rgba(72,120,168,.16),rgba(24,96,168,.05) 50%,transparent 76%)}
.lp-gatecta .lp-h2{margin:0 auto 18px;max-width:20ch}
/* the shared .lp-lead has max-width:58ch and no side margins (left-aligned
   section intros elsewhere); centre it inside the centered gate CTA */
.lp-gatecta .lp-lead{margin-left:auto;margin-right:auto}

/* RTL mirroring */
[dir="rtl"] .lp-hero__copy{padding:0 56px 0 28px}
[dir="rtl"] .lp-veil{background:linear-gradient(270deg,var(--h-bg) 0%,var(--h-bg) 24%,transparent 52%)}
[dir="rtl"] .lp-globe-wrap{left:-14%;right:14%}
[dir="rtl"] .lp-stage{right:auto;left:20px}
[dir="rtl"] .lp-atmo{right:auto;left:28px}
[dir="rtl"] .lp-search{padding:6px 18px 6px 6px}
[dir="rtl"] .lp-pin__lbl{left:auto;right:20px}
[dir="rtl"] .lp-step::before{left:auto;right:0;padding-right:0;padding-left:12px}

/* responsive */
/* ≤1080px: single column. The globe stops being a right-half backdrop and
   becomes a real content band under the copy (fixes text-over-globe overlap
   and the right-edge overflow from the desktop `right:-14%` position). */
@media (max-width:1080px){
  .lp-hero{display:flex;flex-direction:column;min-height:auto}
  .lp-hero__grid{order:1;min-height:auto;grid-template-columns:1fr;padding:92px 0 20px;align-items:start}
  .lp-hero__copy{padding:0 24px}
  .lp-globe-wrap{order:2;position:relative;top:auto;bottom:auto;left:auto;right:auto;
    width:100%;max-width:460px;height:min(86vw,400px);min-height:300px;margin:0 auto}
  .lp-veil{display:none}
  .lp-stage{display:none}
  .lp-scrollhint{display:none}
  .lp-atmo{order:3;position:relative;top:auto;bottom:auto;right:auto;left:auto;align-self:center;margin:16px auto 4px}
  .lp-ticker{order:4;position:relative;bottom:auto}
  .lp-instruments{grid-template-columns:1fr 1fr}
  .lp-steps{grid-template-columns:1fr}
  .lp-section{padding:80px 28px}
  .lp-nav__links{display:none}
  [dir="rtl"] .lp-globe-wrap{left:auto;right:auto}
}
@media (max-width:640px){
  .lp-instruments{grid-template-columns:1fr}
  .lp-nav{padding:0 18px}
  .lp-hero__copy{padding:0 18px}
  .lp-section{padding:64px 20px}
  .lp-stats{gap:22px}
  .lp-search{max-width:none}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .lp-grad-live,.lp-pulse,.lp-liveline__caret,.lp-scrollhint,.lp-ticker__inner,.lp-pin::after{animation:none!important}
  .lp-stage .l-fr,.lp-chip,.lp-story{animation:none!important}
}

/* ── Hero globe: guest badge + point-of-use note ─────────────────────────────
   (The zoom controls live beside .lp-rot further up -- they MUST be declared
   before the @media (min-width:1081px) block that repositions them.)

   Guest badge: quiet and permanent, not a nag. Neutral rather than .lp-systag's
   green, which means "live data" on this page and would misread as a status. */
.lp-guest{display:inline-flex;align-items:center;gap:9px;margin-top:14px;
  font-size:11.5px;font-weight:500;letter-spacing:.04em;color:var(--h-dim);
  border:1px solid var(--lp-line);background:rgba(255,255,255,.55);
  padding:6px 8px 6px 12px;border-radius:999px}
.lp-guest__dot{width:6px;height:6px;border-radius:50%;background:var(--h-faint);flex:none}
.lp-guest__cta{font-family:inherit;font-size:11.5px;font-weight:700;letter-spacing:.04em;
  border:0;border-radius:999px;cursor:pointer;padding:4px 11px;
  color:#fff;background:var(--ag-gradient-button,#1860A8)}
.lp-guest__cta:hover{filter:brightness(1.08)}

/* What an account adds. Sits under the guest pill, so it reads as the
   answer to "Guest view - the globe is public".

   Every colour is a --h-* token: all seven are declared twice (.lp-hero and
   .lp-hero.space), so this panel themes with Day/Space instead of pinning a
   literal that would go invisible on the dark globe -- the mistake .lp-rot
   originally made as a white puck.

   Logical properties throughout: the hero is fully RTL and physical
   left/right here would put the marker on the wrong side of the text. */
.lp-unlock{margin-top:16px;max-inline-size:46ch}
.lp-unlock__head{display:block;font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--h-faint);margin-block-end:9px}
.lp-unlock__list{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.lp-unlock__item{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;
  font-size:12.5px;line-height:1.45;color:var(--h-dim)}
.lp-unlock__item b{color:var(--h-ink);font-weight:600}
.lp-unlock__ico{inline-size:5px;block-size:5px;border-radius:50%;flex:none;
  background:var(--h-accent);transform:translateY(-2px)}
.lp-unlock__item--soon .lp-unlock__ico{background:var(--h-faint)}
.lp-unlock__soon{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--h-faint);border:1px solid var(--h-line);border-radius:999px;
  padding:1px 7px;white-space:nowrap}
@media (max-width:1080px){.lp-unlock{max-inline-size:none}}

/* Point-of-use: appears only when a visitor reaches for something gated. */
.lp-gate{margin:10px 0 0;font-size:12px;line-height:1.45;color:var(--h-dim);
  border-inline-start:2px solid var(--lp-line);padding-inline-start:10px;max-width:44ch}
.lp-gate b{color:var(--h-ink)}
.lp-gate a,.lp-gate button{font:inherit;color:var(--h-accent);background:none;border:0;
  padding:0;cursor:pointer;text-decoration:underline}

/* REMOVED 2026-09-12: `@media (max-width:900px){ .lp-globe-wrap .lp-zoom{
   display:none} }`.

   Owner: "on the web version of the mobile device I could not zoom in and out
   or rotate/spin the marble globe itself."

   That rule dates from when the hero was a non-zoomable backdrop. On a touch
   device these buttons are the ONLY zoom that exists: engine.js has no pinch
   path at all (no touches/hypot/gesture handling) and globe_hero.js's other
   route is a Cmd/Ctrl-modified wheel, which a phone cannot produce. So hiding
   them removed the last affordance rather than tidying a crowded corner.
   Measured on production at 390x844: computed display:none, an all-zero
   getBoundingClientRect, while the sibling .lp-rot -- which has no such rule --
   rendered a normal 34x34 box at the same top-right corner.

   Nothing needs repositioning: below 1081px .lp-globe-wrap is a real
   position:relative box (390x335 at that width), so the base
   `top:54px/96px; right:12px` already lands inside the globe, exactly as
   .lp-rot's `top:12px; right:12px` does. */
@media (prefers-reduced-motion:reduce){
  .lp-globe-wrap .lp-zoom{transition:none}
}

/* The reel card that opens on a pin.

   Owner 2026-09-14: "clicking on any of the markers on the globe should zoom
   in/fly in to that marker's location and open its relevant card."

   MapLibre's stock popup is a white box with a white tip -- the same foreign
   object over a dark globe that .lp-rot was before it became dark glass -- so
   the shell, the tip and the close button are all restated.

   The popup is MapLibre's own overlay child, so it sits inside #lpMap, which
   is pointer-events:none with #lpOrbit re-enabling itself. That rule is what
   finally routed drags between the marble and the map, so the card takes
   pointer-events back for ITSELF ONLY -- never for a wrapper, which would put
   a transparent hit-target over the map and re-break it. */
.lp-reelpop-shell .maplibregl-popup-content{
  background:rgba(10,18,36,.92); color:#E9F0FB;
  border:1px solid rgba(255,255,255,.16); border-radius:12px;
  padding:8px; box-shadow:0 10px 28px rgba(0,0,0,.5);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.lp-reelpop-shell .maplibregl-popup-tip{
  border-top-color:rgba(10,18,36,.92);
  border-bottom-color:rgba(10,18,36,.92);
}
.lp-reelpop-shell .maplibregl-popup-close-button{
  color:#E9F0FB; font-size:16px; line-height:1; padding:2px 6px; background:transparent;
}
.lp-reelpop-shell .maplibregl-popup-close-button:hover{ background:rgba(255,255,255,.12); }
.lp-reelpop{
  display:flex; gap:9px; align-items:center;
  max-inline-size:224px; pointer-events:auto;
}
.lp-reelpop__thumb{
  flex:0 0 auto; inline-size:46px; block-size:46px; border-radius:9px;
  background-color:rgba(255,255,255,.08);
  background-size:cover; background-position:center;
}
.lp-reelpop__body{ display:flex; flex-direction:column; gap:2px; min-inline-size:0; }
.lp-reelpop__user{ font-size:13px; font-weight:700; color:#fff; }
.lp-reelpop__place{
  font-size:12px; color:#B9C7DE;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lp-reelpop__link{ font-size:12px; font-weight:600; color:#7FC0FF; text-decoration:none; }
.lp-reelpop__link:hover{ text-decoration:underline; }