/* ============================================================
   MIDNIGHT — the hero
   The sky is one fixed WebGL surface behind the entire document;
   this file owns the first screen of it — the orbit — and the
   chapters that follow travel through the same sky.
   ============================================================ */

html{scroll-behavior:auto;background:#050508;}
body{background:#050508;overflow-x:clip;}
body.is-locked{overflow:hidden;}   /* while a capability panel is open */

:root{--accent:#6FB8FF;--ring:#6FB8FF;}
.mn{
  position:relative;z-index:3;height:100svh;min-height:560px;
  display:grid;grid-template-rows:auto 1fr auto;
}
/* One canvas, fixed, for the whole page. No chapter has a background of
   its own — everything below is type over this same sky. */
.mn__gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;
  transition:filter .5s var(--ease),opacity .5s var(--ease);}
/* If WebGL is unavailable at all, a DOM moon takes its place — the page
   is about one object, so that object is never allowed to be missing. */
/* ---------- the brand mark, which is the hero's subject ------
   The real artwork, placed by JS at the orbit's centre. Its glow is a
   drop-shadow on the mark itself, so the light is the shape of the M,
   the crescent and the arrow rather than a disc of bloom thrown across
   the page. That is the whole reason the copy beside it stays readable
   while the brand still lights up: the light has an outline.

   The two shadows are one tight and one wide, and both scale with
   --moonlum, which the journey writes every frame — so the mark wakes,
   peaks and leaves exactly as the story says, without any of it landing
   on the headline. */
.mn__brand{
  position:fixed;left:0;top:0;width:0;height:0;z-index:2;
  pointer-events:none;object-fit:contain;
  opacity:0;
  filter:
    drop-shadow(0 0 calc(8px + var(--moonlum,.66) * 12px)
      rgba(150,196,255,calc(.24 + var(--moonlum,.66) * .20)))
    drop-shadow(0 10px calc(26px + var(--moonlum,.66) * 24px)
      rgba(4,8,20,.7));
}
/* With scripting off nothing drives the journey, so both layers are shown
   at their opening state rather than left at the zero the journey starts
   them from. The same rule is what kept the mark visible when WebGL
   failed — which was luck, not design, and the journey now writes these
   regardless of whether a shader ever came up. */
html:not(.js) .mn__brand,
html:not(.js) .mn__moon{opacity:1;}
@media (prefers-reduced-motion: reduce){
  .mn__brand{filter:drop-shadow(0 0 14px rgba(150,196,255,.28));}
}

/* ---------- the moon, as something felt rather than drawn ----
   Not a second graphic. A disc of very soft silver light behind the
   mark, with a shadow underneath it and a barely-there speckle so the
   surface is not perfectly smooth. There is no rim, no terminator and
   no crater field, because the moment any of those appear the viewer
   stops completing the idea and starts looking at an illustration.

   Everything here is under 15% alpha on purpose: the mark has to stay
   the brightest thing inside its own silhouette. */
.mn__moon{
  position:fixed;left:0;top:0;width:0;height:0;z-index:1;
  pointer-events:none;opacity:0;
  /* No border-radius, no rim, no drop shadow. The first attempt had all
     three and the result was a heavy grey disc with a visible edge —
     which is a moon graphic, which is the thing to avoid. The circle now
     exists only because the gradient reaches nothing before the element
     does, so there is no edge anywhere to find. */
  /* Two gradients, not one. The first is the body of light, lifted enough
     that the disc is plainly there; the second is a shadow gathered on
     the opposite side, and it is the shadow that makes the eye read a
     sphere rather than a smudge. Still no edge anywhere — both reach
     nothing well before the element does. */
  /* Every radius here is STATED, and stated small enough that the
     gradient has reached nothing before it reaches any edge of the box.
     Left to size themselves, an off-centre radial gradient defaults to
     farthest-corner and is still painting at the nearer edges — which
     draws the element's own rectangle across the sky. That is the same
     trap that put a hard line down the hero, and it is worth stating
     plainly: an off-centre radial gradient must be given its size. */
  /* The dimension is made out of LIGHT, not out of shade.
     The previous attempt put a dark gradient on the lower-right to act
     as a terminator, and the result was a disc that was darker than the
     sky it sat in — a dark blob with a bright patch on it, not a moon.
     A real moon is lighter than the sky everywhere on its face; what
     changes across it is how much lighter.

     So there are three lights and no shadow:
       1. the far side — a dim, even wash across the whole disc, so the
          silhouette is round and complete rather than a crescent;
       2. the lit side — bright, off-centre to the upper-left, falling
          away toward the lower-right. The fall-off IS the dimension;
       3. the limb — a very wide, very soft lift where a sphere's
          surface turns away from the viewer. It peaks at 4% alpha and
          is at nothing by 80%, so there is no rim to find at any
          radius. This is the layer that changed the read from "a glow
          behind the mark" to "the mark is in front of something round".
     Every radius is stated. Left to size itself, an off-centre radial
     gradient defaults to farthest-corner and is still painting at the
     nearer edges, which draws the element's own rectangle across the
     sky — the same trap that once put a hard line down the hero. */
  background:
    /* 3. the limb */
    radial-gradient(ellipse 47% 47% at 46% 43%,
      transparent 48%,
      rgba(226,240,255,calc(.018 + var(--moonlum,.7) * .028)) 60%,
      rgba(186,214,250,calc(.011 + var(--moonlum,.7) * .017)) 70%,
      transparent 80%),
    /* 2. the lit side */
    radial-gradient(ellipse 42% 42% at 41% 37%,
      rgba(244,250,255,calc(.30 + var(--moonlum,.7) * .19)) 0%,
      rgba(223,238,255,calc(.205 + var(--moonlum,.7) * .118)) 26%,
      rgba(178,208,247,calc(.098 + var(--moonlum,.7) * .042)) 48%,
      rgba(110,146,206,.034) 66%,
      transparent 82%),
    /* 1. the far side */
    radial-gradient(ellipse 46% 46% at 50% 49%,
      rgba(196,218,250,calc(.070 + var(--moonlum,.7) * .046)) 0%,
      rgba(150,182,232,calc(.048 + var(--moonlum,.7) * .028)) 46%,
      rgba(96,130,192,.022) 66%,
      transparent 80%);
  transition:opacity .5s var(--ease);
}
/* The atmosphere. A wider, much fainter field of blue-silver light that
   reaches past the disc, plus two very soft off-centre washes that give
   the space behind the mark some drift rather than a flat sky. It sits
   OUTSIDE the disc's box (negative inset) so the halo can extend without
   enlarging the moon itself — and, like everything else here, every
   radius is stated so no gradient is still painting at an edge. */
.mn__moon::before{
  content:"";position:absolute;inset:-38%;z-index:-1;
  background:
    /* two off-centre washes: the drift of space behind the disc */
    radial-gradient(ellipse 27% 27% at 31% 27%,
      rgba(154,190,250,.070) 0%, rgba(98,134,210,.028) 46%, transparent 74%),
    radial-gradient(ellipse 31% 31% at 69% 71%,
      rgba(120,158,228,.054) 0%, rgba(68,98,170,.021) 48%, transparent 76%),
    /* the halo proper — blue-silver, reaching well past the disc */
    radial-gradient(ellipse 37% 37% at 47% 44%,
      rgba(210,232,255,calc(.082 + var(--moonlum,.7) * .062)) 0%,
      rgba(154,194,248,calc(.044 + var(--moonlum,.7) * .032)) 34%,
      rgba(88,128,200,.021) 56%,
      transparent 76%);
}
/* The texture is a separate layer so it can be faded out by a mask well
   before the element's corners — a speckle with a circular edge would
   put the rim straight back. */
.mn__moon::after{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 21% 29%, rgba(240,248,255,.062) 0 .8px, transparent 1.6px),
    radial-gradient(circle at 63% 71%, rgba(220,238,255,.046) 0 .8px, transparent 1.9px),
    radial-gradient(circle at 44% 58%, rgba(200,224,255,.034) 0 1.0px, transparent 2.3px),
    /* a fourth, much finer pass so the surface reads as grain rather
       than as three repeating dot grids */
    radial-gradient(circle at 77% 18%, rgba(186,212,250,.022) 0 .6px, transparent 1.4px);
  /* prime-ish sizes so the four grids never line up into one pattern */
  background-size:11px 11px, 17px 17px, 29px 29px, 7px 7px;
  -webkit-mask-image:radial-gradient(ellipse 44% 44% at 45% 42%,#000 0%,rgba(0,0,0,.6) 40%,transparent 68%);
  mask-image:radial-gradient(ellipse 44% 44% at 45% 42%,#000 0%,rgba(0,0,0,.6) 40%,transparent 68%);
}
@media (prefers-reduced-motion: reduce){ .mn__moon{transition:none;} }

/* if WebGL is unavailable the page still has a sky, just a still one */
.no-gl .mn__gl{
  background:
    radial-gradient(60rem 40rem at 72% 26%,rgba(124,168,232,.15),transparent 62%),
    radial-gradient(48rem 34rem at 18% 70%,rgba(16,26,64,.52),transparent 66%),
    radial-gradient(90rem 70rem at 50% 45%,rgba(33,45,74,.30),transparent 78%),
    #050508;
}

/* ---------- HUD --------------------------------------------- */
.mn__hud{
  position:relative;z-index:12;display:flex;align-items:center;gap:clamp(16px,3vw,44px);
  padding:clamp(20px,2.6vw,34px) clamp(20px,3.6vw,58px);
}
.mn__hud--btm{justify-content:space-between;}
.mn__logo img{height:clamp(44px,3.7vw,60px);width:auto;}
.mn__nav{display:flex;gap:clamp(16px,2vw,34px);margin-left:auto;}
.mn__nav a{
  position:relative;padding-block:6px;
  font-family:var(--font-display);font-size:.72rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(167,178,198,.85);
  transition:color .45s var(--ease);
}
.mn__nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--accent);box-shadow:0 0 12px var(--accent);
  transition:width .55s var(--ease);
}
.mn__nav a:hover{color:#fff;}
.mn__nav a:hover::after{width:100%;}

.mn__cta{
  position:relative;overflow:hidden;
  font-family:var(--font-display);font-size:.76rem;font-weight:800;letter-spacing:.12em;
  padding:14px 26px;border-radius:999px;color:#fff;white-space:nowrap;
  background:linear-gradient(135deg,#062CC7,#0563E8 46%,#3B9DFF);
  box-shadow:0 0 30px -8px rgba(3,129,251,.95);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.mn__cta::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.4) 50%,transparent 68%);
  transform:translateX(-130%);
}
.mn__cta:hover{transform:translateY(-2px);box-shadow:0 0 46px -8px rgba(3,129,251,1);}
.mn__cta:hover::after{animation:mn-sweep 1.05s var(--ease);}
@keyframes mn-sweep{to{transform:translateX(130%);}}

.mn__mark,.mn__meta{
  font-family:var(--font-display);font-size:.72rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(120,132,155,.9);font-variant-numeric:tabular-nums;
}
.mn__mark i{
  display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:10px;
  background:var(--accent);box-shadow:0 0 12px var(--accent);
  animation:mn-blink 2.6s ease-in-out infinite;
}
@keyframes mn-blink{0%,100%{opacity:.35;}50%{opacity:1;}}

/* ---------- stage ------------------------------------------- */
.mn__stage{position:relative;z-index:3;min-height:0;
  /* The hero's light spill reaches well past the copy on purpose, and
     an absolutely positioned glow that wide made the document itself
     wider than the phone. clip contains it without creating a scroll
     container, and the fixed ring is not a descendant for clipping
     purposes, so the orbit still escapes. */
  overflow-x:clip;
}
.mn__hud--btm{position:relative;z-index:6;}

/* the type lockup, left */
.lock{
  position:absolute;left:clamp(20px,3.6vw,58px);top:50%;translate:0 -50%;
  z-index:4;max-width:min(40vw,560px);
}
/* There was a light-spill layer here — a wide radial gradient meant to
   read as the moon's light falling across the hero copy. Two things were
   wrong with it, and they were the same thing.

   Its gradient was still bright where its own box ended, so the box edge
   was painted: a hard vertical line down the hero at the right-hand edge
   of the pseudo-element, and a matching horizontal one along the top. A
   gradient only ends cleanly if it has reached zero before the element
   does, and with the light source placed at 96% of the box width it
   never could.

   And the spill it was there to produce is exactly the thing that made
   the copy hard to read. Light on the hero now comes from the mark's own
   glow, which stays inside the artwork's silhouette. */
.lock__kick{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font-display);font-size:.72rem;font-weight:800;letter-spacing:.32em;
  text-transform:uppercase;color:#DCEEFF;
  text-shadow:0 0 14px rgba(111,184,255,.9),0 0 40px rgba(3,129,251,.5);
  margin-bottom:clamp(16px,2.4vh,26px);
}
.lock__kick::before{content:"";width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--accent));}

.lock__type{display:block;}
/* The reveal needs a clipping box; the glow needs to escape one. The clip
   is released once the line has landed, so neither has to give. */
.lock__line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em;}
.mn.is-done .lock__line{overflow:visible;}
.lock__line > span{
  display:block;white-space:nowrap;
  font-family:var(--font-display);font-weight:800;line-height:.86;letter-spacing:-.055em;
  font-size:clamp(3rem,7.4vw,7.2rem);
  color:#F4F9FF;
  text-shadow:
    0 0 calc(34px + var(--moonlum,.6) * 46px) rgba(120,178,255,calc(.16 + var(--moonlum,.6) * .22)),
    0 0 12px rgba(6,12,28,.55);
  transition:text-shadow 1.1s var(--ease);
  transform:translateY(102%);
  transition:transform 1.15s cubic-bezier(.16,1,.3,1);
}
.lock__line--2 .gro{
  position:relative;display:inline-block;
  color:transparent;
  -webkit-text-stroke:1.2px rgba(168,210,236,calc(.42 + var(--moonlum,.6) * .26));
  transition-delay:.1s;
}
.is-in .lock__line > span{transform:none;}

/* ---------- GROWTH: the colour splash -------------------------
   The word's resting state is pure outline, so colour only ever
   touches it while the splash is on it. A body of light leaves the
   moon, floods the letterforms, and drains back — the moon is
   visibly where the colour comes from and where it returns.

   The fill is masked by the splash canvas rather than wiped by a
   clip: a straight edge is what makes an effect look built instead
   of alive, so the front is metaballs and it pools in the counters
   of O and R on its way through.                                 */
.gro__fill{
  position:absolute;left:0;top:0;white-space:pre;pointer-events:none;
  -webkit-text-stroke:0;--mf:100%;
}
/* The coloured copy of the word is drawn by a pseudo-element reading
   data-t, not by a second text node. A text node here would put the
   headline in the DOM twice, and a renderer that executes JavaScript
   reads the H1 as "AI POWERED GROWTH GROWTH". */
.gro__fill::before{
  content:attr(data-t);
  /* the capability colours held as bands, not blended: a smooth
     rainbow is the gradient every AI site already has */
  background:linear-gradient(94deg,
    #054AE0 0%,#054AE0 12%, #0381FB 19%,#0381FB 31%,
    #8FD0FF 38%,#8FD0FF 49%, #5FD8FF 56%,#5FD8FF 67%,
    #3B9DFF 74%,#3B9DFF 85%, #6FB8FF 92%,#6FB8FF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  /* a solid front plus three metaballs riding it: the linear layer
     guarantees coverage, the radials make the edge irregular */
  --msk:
    radial-gradient(2.2em 3.4em at var(--mf) 42%,#000 46%,transparent 100%),
    radial-gradient(1.5em 2.6em at var(--mf) 74%,#000 46%,transparent 100%),
    radial-gradient(1.1em 3.0em at var(--mf) 18%,#000 46%,transparent 100%),
    linear-gradient(90deg,transparent 0 var(--mf),#000 var(--mf) 100%);
  -webkit-mask-image:var(--msk);mask-image:var(--msk);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  opacity:0;
}
.mn.is-fill .gro__fill{opacity:1;}
/* full-viewport so the body of light can actually travel from the moon
   to the word and back; only alive during the sequence */
.gro__cv{
  position:fixed;inset:0;width:100%;height:100%;z-index:4;
  pointer-events:none;opacity:0;mix-blend-mode:screen;
  transition:opacity .45s var(--ease);
}
body.is-fill .gro__cv{opacity:1;}

.lock__say{
  margin-top:clamp(18px,2.6vh,30px);max-width:34ch;
  font-size:clamp(1rem,1.2vw,1.18rem);line-height:1.62;
  color:rgba(206,219,240,.96);
  opacity:0;transform:translateY(16px);
  transition:opacity .9s var(--ease) .5s,transform .9s var(--ease) .5s;
}
.lock__act{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:clamp(22px,3vh,36px);
  opacity:0;transform:translateY(16px);
  transition:opacity .9s var(--ease) .62s,transform .9s var(--ease) .62s;
}
.is-in .lock__say,.is-in .lock__act{opacity:1;transform:none;}

.lock__btn{
  display:inline-flex;align-items:center;gap:11px;padding:16px 30px;border-radius:999px;
  font-family:var(--font-display);font-weight:800;font-size:.92rem;color:#050508;
  background:linear-gradient(135deg,#DCEEFF,#8FC6FF);
  box-shadow:0 0 44px -12px rgba(168,210,236,.9);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.lock__btn:hover{transform:translateY(-2px);box-shadow:0 0 60px -10px rgba(168,210,236,1);}
.lock__btn svg{width:16px;height:16px;flex:none;}
.lock__ghost{
  display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);color:#E8EEF9;
  font-family:var(--font-display);font-weight:700;font-size:.88rem;
  transition:border-color .45s var(--ease),background .45s var(--ease);
}
.lock__ghost:hover{border-color:rgba(111,184,255,.7);background:rgba(255,255,255,.05);}

/* ---------- the orbit, locked to the moon ------------------- */
.ring{
  position:fixed;z-index:5;pointer-events:none;
  left:0;top:0;width:0;height:0;                 /* JS positions and sizes this */
  opacity:0;
}
/* The ring belongs to the moon, so it leaves with it. --sky is written
   by the journey every frame and only ever falls, so it is the single
   source of the ring's presence — and it carries no transition of its
   own, because a transition on a value that is rewritten every frame
   never arrives anywhere. A ring of capability labels still orbiting an
   empty patch of sky over body copy is what made the chapters read as
   cluttered rather than layered. */
.is-in .ring{opacity:var(--sky,1);}
.moon-hit{opacity:var(--sky,1);}
html:not(.js) .ring,html:not(.js) .moon-hit{opacity:1;}
.mn.gone .ring{pointer-events:none;}
.mn.gone .rn__btn{pointer-events:none;}
.mn.gone .moon-hit{visibility:hidden;}
.ring{--close:1;}
.rn__btn{transition:opacity .6s var(--ease);}
.mn.past .rn__label{opacity:0;transition:opacity .5s var(--ease);}
.mn.past .rn__btn:hover .rn__label,.mn.past .rn__btn.is-near .rn__label{opacity:1;}
.mn.past .moon-hit{opacity:0;visibility:hidden;}
.rn__btn.is-near .rn__label{color:#fff;}
/* ---------- the connections ---------------------------------
   The ring is back, drawn as thinly as it can be and still read:
   silver, a whisper of luminance on the outer path, and a second
   path inside it at a third of the weight so the space between the
   mark and the words has some depth to it. The beads are not back —
   it was the glowing dots that made this read as decoration, not the
   line that made it read as a system. */
.ring__path{
  position:absolute;left:50%;top:50%;translate:-50% -50%;border-radius:50%;
  width:100%;height:100%;
  border:1px solid rgba(202,224,252,calc(.10 + var(--moonlum,.7) * .055));
  box-shadow:0 0 40px -26px rgba(190,220,255,.55);
  transition:border-color .8s var(--ease);
}
.ring__path--in{
  width:71%;height:71%;
  border-color:rgba(202,224,252,calc(.04 + var(--moonlum,.7) * .025));
  box-shadow:none;
}
.mn.past .ring__path{border-color:rgba(202,224,252,.07);box-shadow:none;}
.mn.past .ring__path--in{opacity:.5;}
.ring__rot{position:absolute;inset:0;}

/* Each word is joined to the centre by one short line pointing at the
   mark. The node hands CSS the angle it is sitting at, so the line
   always aims inward while the word stays upright. */
.rn__btn::before{
  content:"";position:absolute;left:50%;top:50%;
  width:clamp(16px,2.2vw,30px);height:1px;
  transform-origin:0 50%;
  transform:rotate(var(--ang,0deg)) translateX(14px);
  background:linear-gradient(90deg,
    rgba(206,226,252,calc(.28 + var(--moonlum,.7) * .18)),
    rgba(206,226,252,0));
  opacity:.75;pointer-events:none;
  transition:opacity .45s var(--ease);
}
.rn__btn:hover::before,.rn__btn.is-near::before{opacity:1;}
.mn.past .rn__btn::before{opacity:.35;}

/* Each node is placed by JS at an absolute x/y on the ring — the ring
   itself never rotates, so a label can never end up upside down or
   sheared. Upright by construction rather than by counter-rotation. */
.rn{position:absolute;left:50%;top:50%;width:0;height:0;will-change:transform;}
.rn__btn{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;
  pointer-events:auto;background:none;border:0;padding:0;cursor:pointer;
}
/* The word is the node now, so it carries the whole target. The accent
   is kept as a thin underline that only appears on hover, focus and at
   the read position — a line under a word, not a bead beside it. */
/* The bead used to carry the node's weight and its hit area; the word has
   to do both now. 12px is the floor — the scale factor may shrink the
   ring's type to fit a phone, but not below something readable — and the
   button gets an invisible target around it so a five-word orbit is still
   comfortably tappable. */
.rn__btn::after{
  content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:max(100%,52px);height:max(100%,44px);
}
.rn__label{
  position:relative;display:block;padding:8px 4px 9px;white-space:nowrap;
  font-family:var(--font-display);font-size:max(12px,calc(.72rem * var(--lfs,1)));
  font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(232,238,249,.9);
  text-shadow:0 1px 3px rgba(2,5,14,.95),0 2px 18px rgba(2,5,14,.9);
  transition:color .45s var(--ease),letter-spacing .45s var(--ease);
}
.rn__label::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--nc,#3B9DFF),transparent);
  opacity:0;transform:scaleX(.5);transform-origin:50% 50%;
  transition:opacity .4s var(--ease),transform .5s var(--ease);
}
.rn__btn:hover .rn__label::after,
.rn__btn:focus-visible .rn__label::after,
.rn__btn.is-near .rn__label::after{opacity:.85;transform:none;}
.rn__btn:hover .rn__label,.rn__btn:focus-visible .rn__label{color:#fff;letter-spacing:.26em;}

/* ---------- focus mode -------------------------------------- */
.mn.is-focus .lock{opacity:0;transform:translate(-40px,-50%);pointer-events:none;
  transition:opacity .6s var(--ease),transform .8s var(--ease);}
.lock{transition:opacity .7s var(--ease) .1s,transform .9s var(--ease);}
.mn.is-focus .rn__btn{opacity:.24;}
.mn.is-focus .rn__btn.is-on{opacity:1;}
.mn.is-focus .rn__btn.is-on .rn__label{color:#fff;}
.mn.is-focus .mn__mark{opacity:0;}
.rn__btn{transition:opacity .6s var(--ease);}

/* ---------- region panel ------------------------------------ */
.region{
  position:absolute;z-index:7;left:clamp(20px,3.6vw,58px);top:50%;translate:0 -50%;
  width:min(44vw,540px);max-height:76vh;overflow:auto;
  opacity:0;pointer-events:none;transform:translateX(-36px);
  transition:opacity .6s var(--ease),transform .85s var(--ease);
  scrollbar-width:none;
}
.region::-webkit-scrollbar{display:none;}
/* The panel opens directly over the brand mark at its brightest, which
   is the single worst place on the page to put body copy. It gets the
   same smoked glass the chapters use — declared here rather than shared,
   because this one is absolutely positioned and a later shared rule
   would quietly take that away from it. */
.region{
  padding:clamp(22px,3vh,32px) clamp(22px,2.6vw,34px);
  border-radius:var(--glass-r,16px);
  border:1px solid var(--glass-brd,rgba(168,210,236,.14));
  background:linear-gradient(168deg,var(--glass-top,rgba(15,22,42,.74)),var(--glass-btm,rgba(9,13,26,.62)));
  backdrop-filter:blur(var(--glass-blur,18px)) saturate(118%);
  -webkit-backdrop-filter:blur(var(--glass-blur,18px)) saturate(118%);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.94),
             inset 0 1px 0 rgba(214,232,255,calc(.05 + var(--moonlum,.7) * .045));
}
html[data-gl-frozen] .region{backdrop-filter:none;-webkit-backdrop-filter:none;
  background:linear-gradient(168deg,rgba(15,22,42,.96),rgba(9,13,26,.93));}
.mn.is-focus .region{opacity:1;pointer-events:auto;transform:none;}
.region__no{
  font-family:var(--font-display);font-size:.7rem;font-weight:800;letter-spacing:.3em;
  text-transform:uppercase;color:var(--accent);
  text-shadow:0 0 20px color-mix(in srgb,var(--accent) 70%,transparent);
}
/* Gradient type carries its own glow: a filter on the same element as
   background-clip:text makes Chromium paint the whole background box, so
   the halo lives on a blurred copy behind instead. */
.region__t{
  position:relative;
  font-family:var(--font-display);font-weight:800;letter-spacing:-.055em;line-height:.9;
  font-size:clamp(2.6rem,6.4vw,5.4rem);margin:12px 0 20px;padding-bottom:.1em;
  background:linear-gradient(96deg,#FFFFFF,#E4F0FF 38%,var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.region__t::before{
  content:"";position:absolute;z-index:-1;left:-6%;top:14%;width:72%;height:70%;
  border-radius:50%;background:var(--accent);opacity:.20;filter:blur(46px);
}
.region__lead{font-size:clamp(.95rem,1.1vw,1.08rem);line-height:1.62;color:rgba(167,178,198,.95);max-width:44ch;}
.region__list{display:grid;grid-template-columns:1fr 1fr;gap:11px 22px;margin-top:26px;}
.region__list li{display:flex;gap:11px;align-items:flex-start;font-size:.88rem;color:rgba(200,210,226,.92);}
.region__list li::before{
  content:"";flex:none;width:5px;height:5px;margin-top:8px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 10px var(--accent);
}
.region__foot{display:flex;align-items:center;gap:18px;margin-top:30px;flex-wrap:wrap;}
.region__go{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-weight:800;font-size:.88rem;color:var(--accent);
  transition:gap .45s var(--ease);
}
.region__go:hover{gap:16px;}
.region__x{
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.16);
  display:grid;place-items:center;color:rgba(200,210,226,.9);
  transition:.4s var(--ease);
}
.region__x:hover{color:#fff;background:linear-gradient(135deg,#062CC7,#3B9DFF);border-color:transparent;transform:rotate(90deg);}
.region__x svg{width:15px;height:15px;}
.mn.is-focus .region > *{animation:region-in .85s cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(var(--i,0) * 85ms + 200ms);}
@keyframes region-in{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}

/* ---------- intro veil -------------------------------------- */
.veil{
  position:fixed;inset:0;z-index:70;background:#050508;
  display:grid;place-items:center;
  transition:opacity .9s var(--ease),visibility .9s;
}
.veil.is-gone{opacity:0;visibility:hidden;}
.veil__bar{width:min(220px,40vw);height:1px;background:rgba(255,255,255,.12);overflow:hidden;}
.veil__bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#062CC7,#6FB8FF);
  box-shadow:0 0 14px #3B9DFF;transition:width .6s var(--ease);}

/* ---------- the moon itself is the way back ------------------ */
.moon-hit{
  position:fixed;z-index:5;left:0;top:0;width:0;height:0;   /* JS sizes it */
  border-radius:50%;border:0;background:none;padding:0;
  cursor:pointer;opacity:0;transition:opacity .5s var(--ease);
}
.mn.is-focus .moon-hit{opacity:1;}
.moon-hit::after{
  content:"Back to the system";position:absolute;left:50%;bottom:-34px;translate:-50% 0;
  font-family:var(--font-display);font-size:.72rem;font-weight:800;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(232,238,249,.7);white-space:nowrap;
  opacity:0;transition:opacity .45s var(--ease);
}
.moon-hit:hover::after,.moon-hit:focus-visible::after{opacity:1;}

/* ---------- cursor -------------------------------------------
   The homepage used to carry a reduced version of this: a ring that
   changed size, with the system arrow still on screen next to it. Two
   pointers at once is why it read as a circle following the mouse
   rather than as the cursor. The arrow is hidden and the ring now
   carries the same three states the rest of the site has — filled and
   named over a card, glossed over a link, a caret over a field. */
@media (hover:hover) and (pointer:fine){
  html.has-cursor,html.has-cursor *{cursor:none !important;}
  html.has-cursor a,html.has-cursor button,
  html.has-cursor input,html.has-cursor textarea,
  html.has-cursor label,html.has-cursor summary{cursor:none !important;}
}
.cur{
  position:fixed;left:0;top:0;z-index:80;pointer-events:none;
  width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  /* This used to be mix-blend-mode:difference. Difference is why a white
     cursor turned tan the moment it crossed the blue of the page —
     difference(white, deep blue) is a warm cream, and it read as a gold
     hover treatment nobody had asked for. The cursor is now its own
     colour: cool silver, translucent, blended with nothing. */
  /* The ring mixes from --cur-tint, which JS grades continuously from
     silver (over the dark of the page) to brand blue (over a light
     card). Because the ramp holds only white, silver and blue, there
     is no value it can pass through that reads as warm. */
  border:1px solid color-mix(in srgb, var(--cur-tint) 66%, transparent);
  box-shadow:0 0 18px -6px color-mix(in srgb, var(--cur-tint) 55%, transparent);
  opacity:0;
  transition:opacity .4s var(--ease),width .35s var(--ease),height .35s var(--ease),
             margin .35s var(--ease),background .35s var(--ease),
             border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.cur.is-on{opacity:1;}
/* Glossy silver: a bright sweep across the top-left falling to nothing at
   the bottom-right, which is how a polished surface catches a light. The
   ring keeps a hard white edge so it reads as machined rather than as a
   soft blob. Cool the whole way through — there is no warm stop in it. */
.cur.is-hot{
  width:60px;height:60px;margin:-30px 0 0 -30px;
  /* The gloss sweep is built from the tint too, so the whole ring
     travels together instead of the fill and the edge disagreeing
     halfway across a card. */
  background:
    linear-gradient(138deg,
      color-mix(in srgb, var(--cur-white) 30%, transparent) 0%,
      color-mix(in srgb, var(--cur-tint) 18%, transparent) 32%,
      color-mix(in srgb, var(--cur-tint) 7%, transparent) 58%,
      color-mix(in srgb, var(--cur-tint) 15%, transparent) 84%,
      color-mix(in srgb, var(--cur-white) 6%, transparent) 100%);
  border-color:color-mix(in srgb, var(--cur-tint) 88%, var(--cur-white));
  box-shadow:
    0 0 24px -4px color-mix(in srgb, var(--cur-tint) 70%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--cur-white) 55%, transparent),
    inset 0 -8px 14px -10px color-mix(in srgb, var(--cur-deep) 70%, transparent);
}
/* Over a card the ring fills, carries a word and the dot retreats into
   it. This is the state that makes the cursor read as an interaction:
   the pointer stops being a marker and starts answering the thing it is
   over. Same ramp — silver on the dark of the page, brand blue on a lit
   card — so it never leaves the white/silver/blue language. */
.cur__l{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--font-display);font-size:.52rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:#03060E;
  opacity:0;transition:opacity .3s var(--ease);pointer-events:none;
}
.cur.is-card{
  width:78px;height:78px;margin:-39px 0 0 -39px;
  background:color-mix(in srgb, var(--cur-tint) 92%, transparent);
  border-color:transparent;
  box-shadow:0 14px 38px -16px color-mix(in srgb, var(--cur-deep) 85%, transparent),
             0 0 30px -6px color-mix(in srgb, var(--cur-tint) 45%, transparent);
}
.cur.is-card .cur__l{opacity:1;}
.cur.is-card ~ .cur__i{transform:scale(0) !important;}
/* the dot retreats under a link too, so the ring is the only mark */
.cur.is-hot ~ .cur__i{transform:scale(.4);}
/* Over a text field it collapses to a caret rather than sitting on the
   input as a circle. */
.cur.is-text{
  width:2px;height:26px;margin:-13px 0 0 -1px;border-radius:1px;
  background:var(--cur-tint);border-color:transparent;box-shadow:none;
}
/* Pressed: the ring tightens. A cursor that does not acknowledge a
   click reads as a decoration painted on top of the page. */
.cur.is-down{width:22px;height:22px;margin:-11px 0 0 -11px;}
.cur__i{
  position:fixed;left:0;top:0;z-index:81;pointer-events:none;
  width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;
  background:var(--cur-tint);
  box-shadow:0 0 12px color-mix(in srgb, var(--cur-tint) 80%, transparent);
  opacity:0;
  transition:opacity .4s var(--ease),transform .3s var(--ease),background .3s var(--ease);
}
.cur__i.is-on{opacity:1;}
@media (hover:none),(pointer:coarse){.cur,.cur__i{display:none;}}

/* ---------- responsive -------------------------------------- */
@media (max-width:1100px){
  .lock{max-width:42vw;}
  .region{width:min(56vw,500px);}
}
@media (max-width:899.98px){
  .mn__nav{display:none;}
  .lock{
    position:absolute;left:clamp(18px,5vw,30px);right:clamp(18px,5vw,30px);
    top:auto;bottom:clamp(18px,4vh,40px);translate:0 0;max-width:none;
  }
  .lock__line > span{font-size:clamp(2.1rem,10.5vw,3.4rem);}
  /* Three lines, not two: at two the sentence was being cut mid-clause
     and the reader lost the claim rather than the tail of it. */
  .lock__say{max-width:none;font-size:.92rem;line-height:1.52;margin-top:14px;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
  .lock__act{margin-top:18px;gap:10px;}
  .lock__btn{padding:13px 22px;font-size:.85rem;}
  .lock__ghost{padding:13px 18px;font-size:.82rem;}
  .region{
    left:0;right:0;top:auto;bottom:0;translate:0 0;width:auto;max-height:70vh;
    padding:54px clamp(22px,6vw,34px) clamp(22px,6vw,34px);transform:translateY(40px);
    background:linear-gradient(180deg,
      rgba(5,5,8,0) 0%,rgba(5,5,8,.55) 16%,rgba(5,5,8,.9) 34%,rgba(5,5,8,.985) 52%);
  }
  .region__list{grid-template-columns:1fr;}
  .mn.is-focus .lock{transform:translate(0,40px);}
  .moon-hit::after{bottom:-28px;font-size:.55rem;}
}
/* phone HUD: the header has to hold a logo and one CTA on 360px */
@media (max-width:899.98px){
  .mn__cta{margin-left:auto;}
}
@media (max-width:560px){
  .mn__hud{padding:14px 16px;gap:10px;}
  .mn__logo img{height:24px;}
  .mn__cta{padding:10px 15px;font-size:.72rem;letter-spacing:.08em;}
  .mn__hud--btm{justify-content:flex-start;}
  .mn__meta{display:none;}
  /* 0.6rem is 9.6px, which is below the 12px floor this site holds
     itself to for anything a person actually reads. The tracking comes
     down with the size so the label still fits its row. */
  .mn__mark{font-size:.75rem;letter-spacing:.12em;}
}

@media (max-height:620px){
  .lock__line > span{font-size:clamp(2.2rem,7vh,3.6rem);}
}
/* short phone: the orbit is the point, so the type gives way to it */
@media (max-width:899.98px) and (max-height:720px){
  .lock__say{display:none;}
  .lock__kick{margin-bottom:12px;}
  .lock__line > span{font-size:clamp(1.8rem,8vw,2.5rem);}
  .lock__act{margin-top:16px;}
  .lock__btn{padding:12px 20px;}
  .lock__ghost{display:none;}
  /* the HUD gives its padding back to the stage before the orbit shrinks */
  .mn__hud{padding:12px clamp(16px,4vw,24px);}
  .mn__mark{display:none;}
  .mn__hud--btm{justify-content:flex-end;}
  .mn__logo img{height:32px;}
  .mn__cta{padding:11px 18px;font-size:.7rem;}
}

@media (prefers-reduced-motion:reduce){
  .lock__line > span{transform:none;}
  .gro__fill{opacity:1;-webkit-mask-image:none;mask-image:none;}
  .gro__cv{display:none;}
  .lock__say,.lock__act,.ring{opacity:1;transform:none;}
  .mn__mark i{animation:none;}
  .mn.is-focus .region > *{animation:none;}
}