/* ============================================================
   MIDNIGHT — the chapters
   Everything below the orbit. There is no second background:
   the WebGL sky from the hero runs the full height of the
   document, and each chapter is type and hairlines over it.
   That is the whole structural idea — one continuous
   environment, never a stack of boxes.
   ============================================================ */

.chapters{position:relative;z-index:2;}
/* chapter text passes under the ring's hairline — the content moving
   through the system, rather than the system being covered up */

/* ============================================================
   SMOKED GLASS — one section, not the whole page

   This material was applied everywhere for a while and the page paid
   for it: seven sections made of the same panel reads as a component
   library rather than as a designed thing, however good the panel is.

   It now belongs to the Five Capabilities and nothing else, where it
   earns its place — five translucent layers stacked in one column is
   the section's own argument about parts held in one system, and it is
   the one place where the mark's light is still behind the copy.

   Everywhere else the page uses solid surfaces, editorial layout,
   hairlines, shadow and type. That is the variety.
   ============================================================ */
:root{
  --glass-top:rgba(15,22,42,.74);
  --glass-btm:rgba(9,13,26,.62);
  --glass-brd:rgba(168,210,236,.14);
  --glass-blur:18px;
  --glass-r:16px;
  /* the shared dark surface the rest of the page is built from */
  --panel:#0A0F1E;
  --panel-2:#0D1426;
  --hair:rgba(168,210,236,.13);
}
.glass,
.cap{
  position:relative;
  background:linear-gradient(168deg,var(--glass-top),var(--glass-btm));
  backdrop-filter:blur(var(--glass-blur)) saturate(118%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(118%);
  border:1px solid var(--glass-brd);
  border-radius:var(--glass-r);
  box-shadow:
    0 20px 54px -26px rgba(0,0,0,.92),
    inset 0 1px 0 rgba(214,232,255,calc(.05 + var(--moonlum,.7) * .045)),
    inset 0 0 40px -28px rgba(140,190,255,.7);
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .glass,.cap{--glass-top:rgba(15,22,42,.94);--glass-btm:rgba(9,13,26,.90);}
}
html[data-gl-frozen] :is(.glass,.cap){
  backdrop-filter:none;-webkit-backdrop-filter:none;
  --glass-top:rgba(15,22,42,.95);--glass-btm:rgba(9,13,26,.92);
}
@media (max-width:900px){
  :root{--glass-blur:14px;--glass-top:rgba(15,22,42,.86);--glass-btm:rgba(9,13,26,.78);}
}

.ch{
  position:relative;
  padding-block:clamp(96px,15vh,190px);
  padding-inline:clamp(20px,5vw,72px);
}
.ch__in{max-width:1240px;margin-inline:auto;}

/* ---------- chapter furniture ------------------------------- */
.ch__no{
  display:flex;align-items:center;gap:14px;
  font-family:var(--font-display);font-size:.72rem;font-weight:800;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(120,132,155,.95);font-variant-numeric:tabular-nums;
}
.ch__no::after{content:"";flex:1;max-width:120px;height:1px;
  background:linear-gradient(90deg,rgba(168,210,236,.4),transparent);}

.ch__h{
  font-family:var(--font-display);font-weight:800;line-height:1.02;letter-spacing:-.045em;
  font-size:clamp(2.1rem,4.6vw,3.9rem);color:#F1F6FF;text-wrap:balance;
  margin:18px 0 0;max-width:20ch;
}
.ch__h em{font-style:normal;color:transparent;-webkit-text-stroke:1.1px rgba(168,210,236,.6);}
.ch__lead{
  margin-top:20px;max-width:58ch;
  font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.65;color:rgba(167,178,198,.92);
}
.ch__note{
  margin-top:26px;display:inline-flex;align-items:center;gap:10px;
  font-size:.74rem;letter-spacing:.06em;color:rgba(120,132,155,.9);
  border:1px dashed rgba(168,210,236,.25);border-radius:999px;padding:7px 15px;
}
.ch__note::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--accent,#6FB8FF);box-shadow:0 0 10px var(--accent,#6FB8FF);flex:none;}

/* ---------- reveal ------------------------------------------ */
[data-r]{opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ease),transform 1.05s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--rd,0) * 90ms);}
[data-r].in{opacity:1;transform:none;}

/* ============================================================
   01 — THE GATHERING
   Six loose things becoming one system. The words arrive
   scattered and at odd angles and are pulled into line — the
   argument is made by watching it happen, which is why this
   chapter has no table and no list.
   ============================================================ */
.gather{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(12px,1.8vh,20px) clamp(22px,3.4vw,52px);
  margin:clamp(44px,7vh,80px) 0 clamp(36px,5vh,60px);
}
.gword{
  display:inline-flex;align-items:center;gap:13px;
  font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;
  font-size:clamp(1.5rem,3.4vw,2.7rem);color:#EDF3FF;white-space:nowrap;
  transform:translate(var(--sx,0),var(--sy,0)) rotate(var(--sr,0deg));
  opacity:0;
  transition:transform 1.25s cubic-bezier(.16,1,.3,1),opacity .8s var(--ease);
  transition-delay:calc(var(--i,0) * 95ms);
}
.gather.in .gword{transform:none;opacity:1;}
.gword::before{
  content:"";flex:none;width:10px;height:10px;border-radius:50%;
  background:var(--nc);box-shadow:0 0 14px var(--nc),0 0 34px color-mix(in srgb,var(--nc) 45%,transparent);
}
.ch__lead--tight{max-width:54ch;color:rgba(190,202,222,.95);}
/* the words arrive from off to the sides; clip that entry horizontally
   without clipping the vertical travel */
#ledger .ch__in{overflow-x:clip;}

/* ============================================================
   02 — THE PATH (process)
   STAR is a real sequence, so it is numbered and it is a line.
   The line fills as the chapter enters — the fill is the only
   thing on the page that reports scroll position.
   ============================================================ */
.path{margin-top:clamp(52px,8vh,96px);position:relative;}
.path__rail{
  position:absolute;left:0;right:0;top:9px;height:1px;
  background:rgba(255,255,255,.1);
}
.path__rail i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,#062CC7,#3B9DFF 45%,#A8D2EC);
  box-shadow:0 0 14px rgba(59,157,255,.8);
  transition:width 1.6s cubic-bezier(.16,1,.3,1);
}
.path__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,44px);}
.path__st{position:relative;padding-top:34px;}
.path__st::before{
  content:"";position:absolute;left:0;top:4px;width:11px;height:11px;border-radius:50%;
  background:#050508;border:1px solid rgba(168,210,236,.5);
  transition:background .6s var(--ease),border-color .6s var(--ease),box-shadow .6s var(--ease);
}
.path__st.lit::before{background:var(--accent);border-color:transparent;
  box-shadow:0 0 0 4px rgba(111,184,255,.14),0 0 18px var(--accent);}
.path__k{
  font-family:var(--font-display);font-size:.72rem;font-weight:800;letter-spacing:.28em;
  text-transform:uppercase;color:rgba(120,132,155,.9);font-variant-numeric:tabular-nums;
}
.path__t{
  font-family:var(--font-display);font-weight:800;font-size:clamp(1.3rem,2.2vw,1.9rem);
  letter-spacing:-.03em;color:#F1F6FF;margin:8px 0 10px;
}
.path__d{font-size:.94rem;line-height:1.6;color:rgba(167,178,198,.9);max-width:30ch;}

/* ============================================================
   03 — THE READOUT (results)
   An instrument panel, not big-number cards: one baseline,
   tabular figures, hairlines between. Every figure here is
   structural and checkable against the site itself — there are
   no performance claims in this section.
   ============================================================ */
.readout{
  margin-top:clamp(46px,7vh,84px);
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(168,210,236,.2);
}
.readout__c{
  padding:clamp(24px,3.4vh,38px) clamp(14px,2vw,28px) clamp(24px,3.4vh,38px) 0;
  border-right:1px solid rgba(255,255,255,.07);
}
.readout__c:last-child{border-right:0;}
.readout__n{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.05em;
  font-size:clamp(2.4rem,5vw,4.1rem);line-height:1;color:#F4F9FF;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 50px rgba(59,157,255,.3);
}
.readout__n small{font-size:.42em;letter-spacing:-.02em;color:var(--accent);margin-left:2px;}
.readout__l{
  margin-top:12px;font-size:.84rem;line-height:1.5;color:rgba(167,178,198,.88);max-width:22ch;
}

/* ============================================================
   04 — THE SECTORS (industries)
   A wrapped list set large. Hovering one dims the rest, which
   is the only interaction the content actually wants.
   ============================================================ */
.sectors{
  margin-top:clamp(40px,6vh,72px);
  display:flex;flex-wrap:wrap;gap:12px 0;align-items:baseline;
}
.sectors span{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.15rem,2.5vw,2.05rem);color:rgba(232,238,249,.92);
  transition:color .45s var(--ease),opacity .45s var(--ease);
}
.sectors span::after{
  content:"·";margin:0 .55em;color:var(--accent);opacity:.55;font-weight:400;
}
.sectors span:last-child::after{display:none;}
.sectors:hover span{opacity:.32;}
.sectors span:hover{opacity:1;color:#fff;}

/* ============================================================
   THE LEAK — a decision, drawn as one

   This was a paragraph with three links in it. The three conditions
   are the most useful sentence on the page — they are how a reader
   works out which of the three solutions is theirs — and a link in
   running text is the weakest possible way to present a decision.

   Each row now states the symptom at the size of a subheading, points
   at the answer, and names it. The symptom is the thing that is
   scanned; the arrow does the connecting; the solution is the target.
   ============================================================ */
.leak__k{
  margin-top:clamp(34px,5vh,58px);
  font-family:var(--font-display);font-weight:800;letter-spacing:.24em;
  text-transform:uppercase;font-size:.72rem;color:rgba(140,156,184,.95);
}
.leak{
  list-style:none;margin:clamp(18px,2.6vh,26px) 0 0;padding:0;
  display:grid;gap:10px;max-width:1000px;
  counter-reset:leak;
}
.leak__s{
  display:grid;align-items:center;
  grid-template-columns:minmax(0,.9fr) auto minmax(0,1.1fr);
  gap:clamp(14px,2.2vw,30px);
  padding:clamp(16px,2.2vh,22px) clamp(18px,2.4vw,26px);
  border-radius:12px;
  border:1px solid var(--hair);
  background:linear-gradient(110deg,rgba(11,17,32,.94),rgba(7,11,22,.9));
  transition:border-color .45s var(--ease),background .45s var(--ease);
}
.leak__s:hover,.leak__s:focus-within{
  border-color:rgba(156,203,255,.34);
  background:linear-gradient(110deg,rgba(14,24,48,.96),rgba(8,13,26,.94));
}
.leak__if{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.05rem,2vw,1.5rem);line-height:1.15;
  color:#EEF4FF;text-wrap:balance;
}
/* the connector: a line that grows into an arrowhead on hover */
.leak__arrow{
  position:relative;display:block;width:clamp(26px,4vw,58px);height:1px;
  background:linear-gradient(90deg,rgba(168,200,240,.22),rgba(168,200,240,.6));
  transition:background .45s var(--ease);
}
.leak__arrow::after{
  content:"";position:absolute;right:0;top:50%;width:6px;height:6px;
  border-top:1.4px solid rgba(168,200,240,.7);
  border-right:1.4px solid rgba(168,200,240,.7);
  transform:translate(1px,-50%) rotate(45deg);
  transition:border-color .45s var(--ease),transform .45s var(--ease);
}
.leak__s:hover .leak__arrow{background:linear-gradient(90deg,rgba(111,184,255,.3),#6FB8FF);}
.leak__s:hover .leak__arrow::after{border-color:#9CCBFF;transform:translate(4px,-50%) rotate(45deg);}
.leak__go{display:block;}
.leak__go b{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1rem,1.7vw,1.24rem);letter-spacing:-.025em;color:#9CCBFF;
  transition:color .4s var(--ease);
}
.leak__s:hover .leak__go b,.leak__go:focus-visible b{color:#DCEEFF;}
.leak__go i{
  display:block;margin-top:5px;font-style:normal;
  font-size:.86rem;line-height:1.5;color:rgba(150,164,190,.95);
}
@media (max-width:760px){
  .leak__s{grid-template-columns:1fr;gap:10px;}
  /* stacked, the connector turns to point down the column */
  .leak__arrow{width:1px;height:20px;justify-self:start;margin-left:2px;
    background:linear-gradient(180deg,rgba(168,200,240,.22),rgba(168,200,240,.6));}
  .leak__arrow::after{right:auto;left:50%;top:auto;bottom:0;
    transform:translate(-50%,1px) rotate(135deg);}
  .leak__s:hover .leak__arrow{background:linear-gradient(180deg,rgba(111,184,255,.3),#6FB8FF);}
  .leak__s:hover .leak__arrow::after{transform:translate(-50%,4px) rotate(135deg);}
}
@media (prefers-reduced-motion: reduce){
  .leak__s:hover .leak__arrow::after{transform:translate(1px,-50%) rotate(45deg);}
}

/* ============================================================
   05 — THE OFFERS (solutions & pricing)
   Three columns on one baseline grid, separated by hairlines
   rather than boxed as cards. Only the one that carries the
   most weight is lifted.
   ============================================================ */
.offers{
  margin-top:clamp(44px,7vh,80px);
  display:grid;gap:clamp(14px,2vh,20px);
}
/* Three solid cards, not three panes of the same glass. All three rest
   in the site's own midnight — that is the page the visitor is already
   reading, so a card standing still belongs to it — and every colour
   inside a card is read from the card rather than set on the element,
   which is what lets one hover state repaint all three without a second
   set of rules per card.

   Hover is a real change of state, and it goes the other way: the card
   turns white, the type inverts to near-black, the edge lights and the
   whole thing lifts off the page. Dark at rest, white under the hand.
   The sweep is kept — it was the one bit of movement worth keeping —
   but it now travels the card's full edge and is coloured for the white
   it arrives on. */
.offer{
  --o-bg:linear-gradient(168deg,#111A31,#080D1B);
  --o-fg:#F1F6FF;
  --o-mut:rgba(186,200,224,.92);
  --o-kick:#7FC0FF;
  --o-brd:rgba(168,210,236,.16);
  --o-dot:#6FB8FF;
  --o-shadow:0 22px 56px -30px rgba(0,0,0,.95);

  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  grid-template-areas:"k l" "t l" "p l" "s g";
  gap:6px clamp(18px,3vw,48px);align-items:start;
  padding:clamp(26px,3.6vh,42px) clamp(22px,3vw,38px);
  position:relative;overflow:hidden;border-radius:16px;
  background:var(--o-bg);
  border:1px solid var(--o-brd);
  box-shadow:var(--o-shadow);
  color:var(--o-fg);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),
             border-color .45s var(--ease),background .5s var(--ease),
             color .45s var(--ease);
}
/* The middle card carries a fractionally deeper well, so the row still
   has a centre standing still without any card breaking the rule that
   all three rest in the same midnight. */
.offer--lift{
  --o-brd:rgba(180,218,244,.22);
  --o-shadow:0 26px 64px -30px rgba(0,0,0,.98);
}
.offer::before{
  content:"";position:absolute;left:0;top:0;width:0;height:1px;
  /* coloured for the white the card becomes, not the midnight it leaves:
     the sweep only ever runs while the card is lit. */
  background:linear-gradient(90deg,rgba(11,57,168,.92),rgba(30,107,224,.55),transparent);
  transition:width .7s var(--ease);
}
.offer:hover::before,.offer:focus-within::before{width:100%;}
.offer:hover,.offer:focus-within{
  --o-bg:linear-gradient(152deg,#FFFFFF,#F1F7FF 56%,#DEEAFA);
  --o-fg:#060B16;
  --o-mut:rgba(24,38,64,.84);
  --o-kick:#0E3F96;
  --o-brd:rgba(18,38,74,.22);
  --o-dot:#1E5FD0;
  transform:translateY(-4px);
  box-shadow:0 34px 76px -34px rgba(2,8,22,.78),
             0 0 0 1px rgba(255,255,255,.58),
             inset 0 1px 0 rgba(255,255,255,.92);
}
@media (prefers-reduced-motion: reduce){
  .offer,.offer:hover,.offer:focus-within{transform:none;}
}
.offer--lift .offer__k{font-weight:800;}
.offer__k{grid-area:k;
  font-family:var(--font-display);font-size:.72rem;font-weight:800;letter-spacing:.26em;
  text-transform:uppercase;color:var(--o-kick);font-variant-numeric:tabular-nums;
  transition:color .45s var(--ease);
}
.offer__t{grid-area:t;
  font-family:var(--font-display);font-weight:800;letter-spacing:-.04em;line-height:1.06;
  font-size:clamp(1.5rem,3.1vw,2.4rem);color:var(--o-fg);margin:12px 0 0;text-wrap:balance;
  transition:color .45s var(--ease);
}
.offer__p{grid-area:p;
  margin-top:16px;font-family:var(--font-display);font-weight:800;letter-spacing:-.045em;
  font-size:clamp(1.9rem,3.2vw,2.6rem);color:var(--o-fg);font-variant-numeric:tabular-nums;
  line-height:1;white-space:nowrap;transition:color .45s var(--ease);
}
.offer__p small{font-size:.32em;font-weight:700;letter-spacing:.02em;color:var(--o-mut);
  margin-left:8px;font-variant-numeric:normal;}
.offer__s{grid-area:s;margin-top:10px;font-size:.88rem;color:var(--o-mut);
  transition:color .45s var(--ease);}
.offer__ul{grid-area:l;margin:0;display:grid;gap:11px;align-content:start;padding-top:6px;}
.offer__ul li{
  display:flex;gap:11px;align-items:flex-start;font-size:.92rem;line-height:1.5;
  color:var(--o-mut);transition:color .45s var(--ease);
}
.offer__ul li::before{
  content:"";flex:none;width:5px;height:5px;margin-top:8px;border-radius:50%;
  background:var(--o-dot);transition:background .45s var(--ease);
}
.offer__go{grid-area:g;margin-top:18px;align-self:end;justify-self:start;
  display:inline-flex;align-items:center;gap:10px;min-height:26px;
  font-family:var(--font-display);font-weight:800;font-size:.86rem;color:var(--o-kick);
  transition:gap .4s var(--ease),color .4s var(--ease);
}
.offer__go:hover{gap:16px;color:var(--o-fg);}
.offer__go svg{width:15px;height:15px;}

/* ============================================================
   06 — THE SCALE (partners)
   Three tiers is a scale, not three cards, so it is drawn as
   one axis with three stops.
   ============================================================ */
.scale{margin-top:clamp(52px,8vh,96px);position:relative;padding-top:52px;}
.scale__axis{
  position:absolute;left:0;right:0;top:15px;height:1px;
  background:linear-gradient(90deg,rgba(6,44,199,.7),#3B9DFF 55%,#A8D2EC);
}
.scale__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,60px);}
.scale__st{position:relative;}
.scale__st::before{
  content:"";position:absolute;left:0;top:-44px;width:9px;height:9px;border-radius:50%;
  background:#DCEEFF;box-shadow:0 0 0 4px rgba(5,5,8,1),0 0 20px var(--accent);
}
.scale__n{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.05em;
  font-size:clamp(2.6rem,5.2vw,4.2rem);line-height:1;color:#F4F9FF;
  font-variant-numeric:tabular-nums;
}
.scale__t{
  font-family:var(--font-display);font-weight:800;font-size:1.02rem;letter-spacing:.02em;
  color:var(--accent);margin-top:12px;
}
.scale__d{margin-top:10px;font-size:.9rem;line-height:1.6;color:rgba(167,178,198,.9);max-width:32ch;}
.credits{
  margin-top:clamp(40px,6vh,72px);padding-top:clamp(26px,3.4vh,40px);
  border-top:1px solid rgba(255,255,255,.08);
  display:grid;grid-template-columns:auto repeat(4,1fr);gap:clamp(16px,3vw,40px);align-items:start;
}
.credits__h{
  font-family:var(--font-display);font-size:.72rem;font-weight:800;letter-spacing:.26em;
  text-transform:uppercase;color:rgba(120,132,155,.95);max-width:14ch;line-height:1.7;
}
.credits__s b{display:block;font-family:var(--font-display);font-size:.95rem;color:#EAF2FF;}
.credits__s span{display:block;margin-top:6px;font-size:.84rem;color:rgba(140,151,172,.95);line-height:1.5;}

/* ============================================================
   07 — VOICES
   ============================================================ */
.voices{
  margin-top:clamp(46px,7vh,86px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,48px);
}
.voice{border-top:1px solid rgba(168,210,236,.2);padding-top:clamp(22px,3vh,32px);}
.voice__q{font-size:1rem;line-height:1.68;color:rgba(224,232,245,.95);}
.voice__w{margin-top:20px;display:flex;align-items:center;gap:12px;}
.voice__av{
  flex:none;width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,#062CC7,#3B9DFF);
  display:grid;place-items:center;
  font-family:var(--font-display);font-size:.72rem;font-weight:800;color:#fff;
}
.voice__n b{display:block;font-family:var(--font-display);font-size:.86rem;color:#EAF2FF;}
.voice__n span{display:block;font-size:.76rem;color:rgba(140,151,172,.95);margin-top:2px;}

/* ============================================================
   08 — QUESTIONS
   ============================================================ */
/* No panel. Each question is its own card on a solid surface, with a
   rule down the left that lights on hover and stays lit while the answer
   is open — so the section reads as a list of things you can open rather
   than as one more sheet of glass. The plus that used to sit here became
   a chevron: a plus says "add", a chevron says "there is more below". */
.qs{
  margin-top:clamp(40px,6vh,74px);max-width:900px;
  display:grid;gap:10px;
}
.q{
  position:relative;overflow:hidden;border-radius:12px;
  background:linear-gradient(168deg,rgba(12,18,34,.96),rgba(7,11,22,.96));
  border:1px solid var(--hair);
  transition:border-color .45s var(--ease),background .45s var(--ease),
             transform .45s var(--ease);
}
.q::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,#3B9DFF,#0B39A8);
  transform:scaleY(0);transform-origin:50% 0;
  transition:transform .5s var(--ease);
}
.q:hover,.q:focus-within{
  border-color:rgba(156,203,255,.34);
  background:linear-gradient(168deg,rgba(17,26,49,.98),rgba(9,14,28,.98));
}
.q:hover::before,.q:focus-within::before,.q.on::before{transform:none;}
.q.on{border-color:rgba(156,203,255,.3);}
.q__b{
  width:100%;display:flex;align-items:center;gap:20px;text-align:left;
  padding:clamp(18px,2.4vh,26px) clamp(18px,2.4vw,28px);
  background:none;border:0;cursor:pointer;
  font-family:var(--font-display);font-weight:700;font-size:clamp(1rem,1.5vw,1.15rem);
  letter-spacing:-.015em;color:#E4ECFA;
  transition:color .4s var(--ease);
}
.q:hover .q__b,.q.on .q__b{color:#FFFFFF;}
/* the chevron */
.q__i{
  flex:none;margin-left:auto;width:26px;height:26px;position:relative;
  transition:transform .45s var(--ease),color .45s var(--ease);
  color:rgba(168,200,240,.8);
}
.q__i::before{
  content:"";position:absolute;left:50%;top:48%;width:9px;height:9px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translate(-50%,-60%) rotate(45deg);
}
.q__i::after{display:none;}
.q:hover .q__i{color:#CFE4FF;}
.q.on .q__i{transform:rotate(180deg);color:#9CCBFF;}
/* height:0 alone still leaves the answer in the accessibility tree and its
   links in the tab order, so a closed panel is taken out with visibility
   too — delayed on close so the height transition is still seen. */
.q__p{height:0;overflow:hidden;visibility:hidden;
  transition:height .45s var(--ease),visibility 0s linear .45s;}
.q.on .q__p{visibility:visible;
  transition:height .45s var(--ease),visibility 0s linear 0s;}
.q__p p{padding:0 clamp(18px,2.4vw,28px) clamp(20px,2.8vh,28px) clamp(18px,2.4vw,28px);font-size:.97rem;line-height:1.68;color:rgba(167,178,198,.94);max-width:66ch;}

/* ============================================================
   09 — THE CALL
   The moon comes back close for this one, so the type sits
   centred over it and nothing else competes.
   ============================================================ */
.call{padding-block:clamp(120px,22vh,240px);}

.call__h{
  font-family:var(--font-display);font-weight:800;line-height:.98;letter-spacing:-.05em;
  font-size:clamp(2.5rem,7vw,6rem);color:#F7FAFF;margin:20px auto 0;max-width:16ch;
  text-wrap:balance;text-shadow:0 0 80px rgba(59,157,255,.35);
}
.call__s{margin:22px 0 0;max-width:48ch;font-size:1.05rem;line-height:1.65;color:rgba(190,202,222,.95);}
.call__a{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px;}
/* The address is a real contact route, not an eyebrow, so it holds the
   12px floor rather than the 0.7rem the label style would give it. */
.call__m a{display:inline-block;padding-block:5px;}
.call__m{
  margin-top:34px;font-family:var(--font-display);font-size:.78rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(130,143,167,.95);
}
.call__m a{color:#DCEEFF;}
.call__m a:hover{color:#fff;}

/* ============================================================
   FOOTER
   ============================================================ */
.ft{
  position:relative;z-index:2;
  padding:clamp(46px,7vh,80px) clamp(20px,5vw,72px) clamp(30px,4vh,46px);
  border-top:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(5,5,8,.2),rgba(5,5,8,.75));
}
.ft__in{max-width:1240px;margin-inline:auto;
  display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:clamp(26px,4vw,60px);}
.ft__logo img{height:42px;width:auto;}
/* The footer sits over the embossed MIDNIGHT and a blue wash, so its
   text is not on flat black and the arithmetic contrast against
   #050508 flatters it. Measured on the rendered pixels it was 3.9:1;
   these values clear 4.5:1 against the lit parts of that ground. */
.ft__say{margin-top:18px;font-size:.9rem;line-height:1.6;color:rgba(176,188,209,.97);max-width:34ch;}
.ft h2{
  font-family:var(--font-display);font-size:.72rem;font-weight:800;letter-spacing:.26em;
  text-transform:uppercase;color:rgba(120,132,155,.95);margin:0 0 16px;
}
.ft ul{display:grid;gap:11px;}
.ft ul a{font-size:.9rem;color:rgba(200,210,226,.9);transition:color .35s var(--ease);}
.ft ul a:hover{color:#fff;}
.ft__legal{display:inline-flex;flex-wrap:wrap;align-items:center;gap:9px;}
.ft__legal i{font-style:normal;opacity:.45;}
.ft__legal a{transition:color .4s var(--ease);}
.ft__legal a:hover{color:#EAF2FF;}
/* Footer links measured 14–16px tall on desktop. The list gap already
   leaves the room, so vertical padding lifts every one of them over the
   24px pointer-target floor without changing the layout. */
.ft__in ul li a,.ft__in > div > h2 a{
  /* min-width is for "AI", which is two characters wide and was the one
     target left under the 24px floor. It changes nothing for the longer
     labels, and nothing visible for this one. */
  display:inline-block;padding-block:6px;min-width:24px;
}
/* breadcrumbs sit at 19px; the same treatment, same reason */
.pg-crumb a,.sv-crumb a,.pg-crumb span,.sv-crumb span{
  display:inline-block;padding-block:4px;
}
.ft__btm{
  max-width:1240px;margin:clamp(34px,5vh,58px) auto 0;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.07);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  /* Measured at 4.3:1 against the footer once MIDNIGHT was pressed in
     behind it — close, and close is a fail. Lifted to clear AA with room
     to spare, since this row carries the legal links. */
  font-size:.78rem;color:rgba(182,194,214,.97);
}

/* ============================================================
   THE BAR — a compact header, once the orbit is behind you
   ============================================================ */
/* ============================================================
   THE HEADER — one line, a dropdown, and a menu on small screens

   Everything sits on a single horizontal rule at desktop: mark,
   navigation, one call to action. Solutions opens a panel rather
   than a list, because three named products deserve their names
   and a line of value each. Below the breakpoint the same items
   become a full sheet, which is what was missing before — the
   navigation simply vanished on every tablet and phone.
   ============================================================ */
.bar{
  position:fixed;left:0;right:0;top:0;z-index:40;
  display:flex;align-items:center;gap:clamp(14px,2.2vw,32px);
  padding:13px clamp(18px,3.4vw,58px);
  /* No border under the bar and no rule under each nav item. A premium
     header is a surface and some type; the hairlines were doing the work
     a soft shadow does better, and four of them stacked read as chrome. */
  background:linear-gradient(180deg,rgba(5,6,11,.92),rgba(5,6,11,.74));
  box-shadow:0 18px 40px -34px rgba(0,0,0,.95);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  transform:translateY(-101%);
  transition:transform .6s var(--ease);
}
.bar.on{transform:none;}
.bar__logo{flex:none;display:block;}
.bar__logo img{height:clamp(46px,3.6vw,58px);width:auto;display:block;}

.bar__nav{display:flex;align-items:center;gap:clamp(12px,1.7vw,26px);margin-left:auto;}
.bar__nav > a,.bar__top{
  position:relative;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;
  padding:6px 0;border:0;background:none;cursor:pointer;
  font-family:var(--font-display);font-size:.7rem;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:rgba(167,178,198,.88);
  transition:color .4s var(--ease);
}
.bar__nav > a::after,.bar__top::after{
  content:"";position:absolute;left:50%;bottom:0;width:14px;height:2px;
  margin-left:-7px;border-radius:2px;
  background:var(--accent,#6FB8FF);box-shadow:0 0 10px var(--accent,#6FB8FF);
  transform:scaleX(0);
  transition:transform .45s var(--ease);
}
.bar__nav > a:hover,.bar__top:hover,
.bar__nav > a[aria-current="page"],
.bar__has.is-open .bar__top{color:#fff;}
.bar__nav > a:hover::after,.bar__top:hover::after,
.bar__nav > a[aria-current="page"]::after,
.bar__has.is-open .bar__top::after{transform:scaleX(1);}

/* ---- the Solutions panel ---- */
.bar__has{position:relative;display:inline-flex;}
.bar__chev{width:13px;height:13px;transition:transform .45s var(--ease);}
.bar__has.is-open .bar__chev{transform:rotate(180deg);}
.bar__drop{
  position:absolute;top:calc(100% + 14px);left:50%;translate:-50% 0;
  display:grid;gap:2px;min-width:min(352px,84vw);padding:7px;
  border:1px solid rgba(168,210,236,.15);
  background:rgba(7,10,18,.96);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 34px 70px -34px rgba(0,0,0,.95);
  opacity:0;visibility:hidden;transform:translateY(-7px);
  /* visibility is stepped, not eased: the panel becomes reachable the
     moment it opens and is only taken out once the close has finished,
     instead of sitting invisible for the first third of the opening. */
  transition:opacity .35s var(--ease), transform .35s var(--ease),
             visibility 0s linear .35s;
}
.bar__has.is-open .bar__drop{opacity:1;visibility:visible;transform:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease),
             visibility 0s linear 0s;}
.bar__drop a{
  display:block;padding:12px 14px;
  border-left:2px solid transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease);
}
.bar__drop a:hover,.bar__drop a:focus-visible{
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent,#6FB8FF) 13%,transparent),transparent 82%);
  border-left-color:var(--accent,#6FB8FF);
}
.bar__drop b{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:.92rem;letter-spacing:-.022em;color:#EFF4FE;
}
/* The panel lists three names and nothing else. A line of value under
   each one was there to fill the panel out, and "Be found where buyers
   already search" was the clearest example of a subheading written for
   the layout rather than for the reader. */
.bar__drop{min-width:min(300px,82vw);}

.bar__cta{
  flex:none;
  font-family:var(--font-display);font-size:.7rem;font-weight:800;letter-spacing:.09em;
  padding:11px 21px;border-radius:999px;color:#fff;white-space:nowrap;
  background:linear-gradient(135deg,#062CC7,#0563E8 46%,#3B9DFF);
  box-shadow:0 0 26px -10px rgba(3,129,251,.95);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.bar__cta:hover{transform:translateY(-1px);box-shadow:0 0 34px -8px rgba(3,129,251,1);}

/* ---- the small-screen menu ---- */
.bar__burger{
  display:none;flex:none;width:42px;height:42px;margin-left:auto;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);
  cursor:pointer;position:relative;
}
.bar__burger span{
  position:absolute;left:11px;right:11px;height:1.5px;background:#E8EEF9;
  transition:transform .4s var(--ease), opacity .3s var(--ease);
}
.bar__burger span:nth-child(1){top:16px;}
.bar__burger span:nth-child(2){bottom:16px;}
.bar__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.bar__burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-6px) rotate(-45deg);}

.mnav{
  position:fixed;inset:0;z-index:39;
  padding:calc(64px + env(safe-area-inset-top,0px)) clamp(20px,6vw,40px) 40px;
  background:rgba(4,5,9,.98);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  overflow-y:auto;
  opacity:0;transition:opacity .38s var(--ease);
}
.mnav.is-on{opacity:1;}
.mnav__in{display:flex;flex-direction:column;max-width:520px;margin-inline:auto;}
.mnav__in > a{
  padding:15px 0;border-bottom:1px solid rgba(255,255,255,.08);
  font-family:var(--font-display);font-weight:700;
  font-size:1.22rem;letter-spacing:-.028em;color:#E8EEF9;
  transition:color .3s var(--ease), padding-left .35s var(--ease);
}
.mnav__in > a:hover,.mnav__in > a[aria-current="page"]{color:#fff;padding-left:8px;}
.mnav__k{
  margin:22px 0 2px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(120,132,155,.9);
}
.mnav__s{font-size:1.04rem !important;color:rgba(190,204,226,.94) !important;padding-left:14px !important;}
.mnav__s:hover{padding-left:20px !important;}
.mnav__cta{
  margin-top:26px;border-bottom:0 !important;text-align:center;
  padding:15px 22px !important;border-radius:999px;
  color:#fff !important;font-size:.82rem !important;letter-spacing:.08em;
  text-transform:uppercase;
  background:linear-gradient(135deg,#062CC7,#0563E8 46%,#3B9DFF);
  box-shadow:0 0 30px -12px rgba(3,129,251,.95);
}
.mnav__cta:hover{padding-left:22px !important;}
body.mnav-on{overflow:hidden;}

@media (max-width:1180px){
  .bar__nav,.bar__cta{display:none;}
  .bar__burger{display:block;}
}
@media (min-width:1181px){
  .mnav{display:none !important;}
}
@media (prefers-reduced-motion:reduce){
  .bar__drop,.mnav,.bar__burger span,.bar__chev{transition-duration:.01ms;}
}

/* ---------- responsive -------------------------------------- */
/* On desktop the orbit owns the right of the frame for the whole page,
   so chapter text keeps to the left of it — the two-column composition
   the hero establishes never breaks. */
@media (min-width:1100px){
  /* the reserve is measured from the orbit itself, in JS */
  .ch__in{padding-right:var(--reserve,0px);}
  .ch--wide .ch__in{padding-right:0;}
  .ch--wide .ch__lead{max-width:64ch;}
}

@media (max-width:1080px){
  .path__grid{grid-template-columns:repeat(2,1fr);row-gap:clamp(30px,5vh,52px);}
  .path__rail{display:none;}
  .path__st{padding-left:26px;padding-top:0;}
  .path__st::before{top:6px;}
  .readout{grid-template-columns:repeat(2,1fr);border-top:0;}
  .readout__c{border-top:1px solid rgba(168,210,236,.2);border-right:0;padding-right:0;}
  .readout__c:nth-child(odd){padding-right:clamp(14px,3vw,28px);}
  .offer{grid-template-columns:1fr;grid-template-areas:"k" "t" "p" "s" "l" "g";gap:10px;}
  .voices{grid-template-columns:1fr;gap:0;}
  .voice{margin-top:clamp(22px,3vh,32px);}
  .credits{grid-template-columns:repeat(2,1fr);}
  .credits__h{grid-column:1 / -1;max-width:none;}
  .ft__in{grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
  .path__grid,.scale__grid{grid-template-columns:1fr;}
  .scale__axis{display:none;}
  .scale{padding-top:0;}
  .scale__st{padding-left:26px;padding-top:clamp(24px,4vh,36px);}
  .scale__st::before{top:34px;left:0;}
  .scale__st:first-child{padding-top:0;}
  .scale__st:first-child::before{top:10px;}
  .ft__in{grid-template-columns:1fr;}
  .q__p p{padding-right:0;}
}

@media (prefers-reduced-motion:reduce){
  [data-r]{opacity:1;transform:none;transition:none;}
  .path__rail i{transition:none;}
}

/* ============================================================
   02 — THE CAPABILITIES
   Six rows, not six cards. Each carries its own colour as a
   rail that grows on approach, and the index sits large and
   quiet on the left so the set reads as one numbered system
   rather than as a grid of tiles.
   ============================================================ */
.caps{
  margin-top:clamp(44px,7vh,80px);
  display:grid;gap:clamp(14px,2vh,20px);
}
/* These were rows divided by hairlines, over whatever the sky was doing
   behind them. They are panels now — the same grid, the same content, on
   a surface that guarantees the copy its own contrast. */
.cap{
  /* The first column used to hold the 01–05 numeral. With the numbering
     gone the column goes with it, and the body simply starts where the
     number used to — nothing else about the card changes. */
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(14px,2.4vw,34px);
  padding:clamp(26px,3.6vh,42px) clamp(22px,3vw,38px)
          clamp(26px,3.6vh,42px) clamp(22px,3vw,34px);
  overflow:hidden;               /* so the accent rail keeps the corner radius */
}
.cap::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--nc);box-shadow:0 0 18px var(--nc);
  transform:scaleY(0);transform-origin:50% 0;
  transition:transform .8s cubic-bezier(.16,1,.3,1);
}
.cap__t{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.04em;
  font-size:clamp(1.5rem,3vw,2.3rem);color:#F2F7FF;margin:0;line-height:1;
}
.cap__s{
  margin-top:9px;font-family:var(--font-display);font-weight:700;font-size:.8rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--nc);
}
.cap__d{margin-top:16px;max-width:62ch;font-size:.98rem;line-height:1.68;color:rgba(178,190,210,.95);}
.cap__l{
  margin-top:20px;display:flex;flex-wrap:wrap;gap:8px 10px;
}
.cap__l li{
  font-size:.78rem;letter-spacing:.02em;color:rgba(200,212,230,.9);
  border:1px solid rgba(255,255,255,.11);border-radius:999px;padding:6px 13px;
  transition:border-color .45s var(--ease),background .45s var(--ease),color .45s var(--ease);
}
@media (max-width:620px){
  .cap{grid-template-columns:1fr;gap:6px;}
}

/* ============================================================
   THE LOWER HALF
   Once the moon has gone the page has the whole frame, so it
   stops hugging the left. The heading takes one column and the
   gate takes the other, which is what stops seven sections in a
   row reading as the same left-aligned block.
   ============================================================ */
.ch__head{margin-top:20px;}
@media (min-width:900px){
  .ch--wide .ch__head{
    display:grid;grid-template-columns:1.05fr .95fr;
    gap:clamp(28px,5vw,90px);align-items:end;
  }
  .ch--wide .ch__head .ch__h{margin:0;max-width:19ch;font-size:clamp(1.9rem,3.6vw,3.1rem);}
  .ch--wide .ch__head .ch__lead{margin:0 0 .35em;max-width:46ch;}
}

/* ---------- the sectors, edge to edge ------------------------
   A full-bleed marquee in two opposed rows. It breaks the
   container deliberately: after six sections inside the same
   measure, the page needs one moment that touches both edges. */
.mq{
  margin:clamp(40px,6vh,72px) 0 0;
  /* Full bleed out of a max-width container. 100vw includes the scrollbar,
     so the real viewport width is measured in JS and subtracted — otherwise
     the page gains a horizontal scrollbar exactly one scrollbar wide. */
  width:var(--vw,100vw);margin-left:calc(50% - var(--vw,100vw) / 2);
  position:relative;overflow:clip;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.mq__row{overflow:hidden;padding:clamp(6px,1vh,12px) 0;}
.mq__track{
  display:flex;width:max-content;gap:clamp(28px,3.4vw,58px);
  animation:mq-run 46s linear infinite;
}
.mq__row--rev .mq__track{animation-direction:reverse;animation-duration:58s;}
.mq:hover .mq__track{animation-play-state:paused;}
@keyframes mq-run{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.mq__track span{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;
  font-size:clamp(1.5rem,4.2vw,3.1rem);white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(168,210,236,.42);
  transition:color .4s var(--ease),-webkit-text-stroke-color .4s var(--ease);
}
.mq__row--rev .mq__track span{
  color:rgba(232,238,249,.9);-webkit-text-stroke:0;
}
.mq__track span:hover{color:#fff;-webkit-text-stroke-color:transparent;}

/* ---------- questions: the heading holds while they scroll --- */
@media (min-width:1000px){
  #questions .ch__in{
    display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    gap:clamp(30px,5vw,80px);align-items:start;
  }
  #questions .ch__no{grid-column:1;}
  /* The wide-chapter rule turns .ch__head into its own two-column grid.
     That is right where a head carries a heading and a lead side by
     side; here it carries only the heading, and splitting a 570px
     sticky column in two was setting it one word per line. */
  #questions .ch__head{grid-column:1;position:sticky;top:120px;margin-top:16px;
    display:block;}
  #questions .ch__head .ch__h{max-width:none;}
  #questions .qs{grid-column:2;grid-row:1 / span 2;margin-top:0;max-width:none;}
}

/* ---------- the close, centred ------------------------------- */
.call--mid{text-align:center;}
.call--mid .ch__in{position:relative;z-index:2;}
.call--mid .ch__no{justify-content:center;}
.call--mid .ch__no::after{display:none;}
.call--mid .call__h{margin-inline:auto;max-width:14ch;}
.call--mid .call__s{margin-inline:auto;}
.call--mid .call__a{justify-content:center;}

/* the figures use the whole width now */
.ch--wide .readout{grid-template-columns:repeat(3,1fr);}
@media (max-width:900px){
  /* three figures in two columns would leave one stranded, so the last
     one takes the full width and reads as the closing line it is */
  .ch--wide .readout{grid-template-columns:repeat(2,1fr);}
  .ch--wide .readout__c:last-child{grid-column:1 / -1;}
}

/* ============================================================
   THE PRICE GATE + LEAD CAPTURE
   The price is the thing people came for, so it is what the form
   is exchanged for. The gate states plainly what happens next —
   an unexplained form converts far worse than a promised one.
   ============================================================ */
.offer__gate{grid-area:p;margin-top:16px;}
.offer__btn{
  display:inline-flex;align-items:center;gap:11px;cursor:pointer;
  padding:14px 26px;border-radius:999px;border:0;
  font-family:var(--font-display);font-weight:800;font-size:.94rem;
  color:#050B18;background:linear-gradient(135deg,#E4F0FF,#9CCBFF);
  box-shadow:0 0 44px -14px rgba(168,210,236,.95);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),
             background .45s var(--ease),color .45s var(--ease);
}
/* The pill is always the card's strongest contrast, so it moves with
   the card: pale while the card rests in midnight, brand blue once the
   card turns white. */
.offer:hover .offer__btn,
.offer:focus-within .offer__btn{
  /* the pale end of this gradient used to reach #3B9DFF, which puts
     white type at 2.8:1 in the corner it lands in. It stops at a blue
     that still carries white at better than 4.5:1 all the way across. */
  color:#FFFFFF;background:linear-gradient(135deg,#0B39A8,#1552C4 54%,#1A5FD0);
  box-shadow:0 12px 32px -14px rgba(11,57,168,.85);
}
.offer__btn:hover{transform:translateY(-2px);}
.offer__btn svg{width:15px;height:15px;}
.offer__gate-n{
  display:block;margin-top:11px;font-size:.76rem;letter-spacing:.02em;
  color:var(--o-mut);transition:color .45s var(--ease);
}

.gate{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px;}
.gate[hidden]{display:none;}
.gate__veil{position:absolute;inset:0;background:rgba(3,4,7,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.gate__box{
  position:relative;width:min(560px,100%);max-height:92vh;overflow:auto;
  background:linear-gradient(165deg,#0D1018,#07090E);
  border:1px solid rgba(168,210,236,.16);border-radius:14px;
  padding:clamp(26px,4vw,44px);
  box-shadow:0 40px 120px -40px rgba(3,129,251,.5);
  animation:gate-in .5s cubic-bezier(.16,1,.3,1);
}
@keyframes gate-in{from{opacity:0;transform:translateY(18px) scale(.98);}to{opacity:1;transform:none;}}
.gate__x{
  position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.14);background:none;color:rgba(200,210,226,.9);
  display:grid;place-items:center;cursor:pointer;transition:.35s var(--ease);
}
.gate__x:hover{color:#fff;border-color:rgba(111,184,255,.7);transform:rotate(90deg);}
.gate__x svg{width:15px;height:15px;}
.gate__k{
  font-family:var(--font-display);font-size:.72rem;font-weight:800;letter-spacing:.26em;
  text-transform:uppercase;color:var(--accent);margin:0;
}
.gate__h{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.04em;line-height:1.05;
  font-size:clamp(1.6rem,3.4vw,2.2rem);color:#F4F9FF;margin:12px 0 0;
}
.gate__s{margin:12px 0 0;font-size:.94rem;line-height:1.6;color:rgba(178,190,210,.95);}
.gate__f{display:block;margin-top:18px;}
.gate__f span{
  display:block;font-family:var(--font-display);font-size:.74rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(150,163,184,.95);margin-bottom:7px;
}
.gate__f span i{font-style:normal;letter-spacing:.04em;text-transform:none;color:rgba(120,132,155,.9);}
.gate__f input{
  width:100%;padding:13px 15px;border-radius:8px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.12);
  color:#EAF2FF;font-family:inherit;font-size:.95rem;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.gate__f input::placeholder{color:rgba(120,132,155,.7);}
.gate__f input:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,.06);}
.gate__f input[aria-invalid="true"]{border-color:#FF7A6B;}
/* A honeypot has to be in the form and must never be reachable: off
   screen, zero size, no pointer, and out of the tab order. */
.gate__hp{position:absolute;left:-9999px;width:0;height:0;opacity:0;
  pointer-events:none;border:0;padding:0;}
.gate__err{margin:16px 0 0;color:#FF9E92;font-size:.88rem;}
.gate__go{
  margin-top:24px;width:100%;justify-content:center;
  display:inline-flex;align-items:center;gap:11px;cursor:pointer;
  padding:16px 28px;border-radius:999px;border:0;
  font-family:var(--font-display);font-weight:800;font-size:.96rem;color:#050508;
  background:linear-gradient(135deg,#DCEEFF,#8FC6FF);
  transition:transform .4s var(--ease),opacity .3s;
}
.gate__go:hover{transform:translateY(-2px);}
.gate__go[disabled]{opacity:.55;cursor:default;transform:none;}
.gate__go svg{width:16px;height:16px;}
.gate__fine{margin:16px 0 0;font-size:.76rem;line-height:1.55;color:rgba(120,132,155,.95);}
.gate__done{text-align:center;padding:12px 0;}
.gate__tick{
  display:grid;place-items:center;width:56px;height:56px;margin:0 auto 18px;border-radius:50%;
  background:linear-gradient(135deg,#062CC7,#3B9DFF);color:#fff;
  box-shadow:0 0 44px -10px rgba(59,157,255,.9);
}
.gate__tick svg{width:24px;height:24px;}
.gate__ghost{
  margin-top:24px;padding:13px 26px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,255,255,.18);background:none;color:#E8EEF9;
  font-family:var(--font-display);font-weight:700;font-size:.88rem;
}
.gate__ghost:hover{border-color:rgba(111,184,255,.7);}

/* ---------- markets ------------------------------------------
   Named countries as data, not as a sentence: an AI answer can
   lift one row and still be correct about where we operate. */
.mk{margin-top:clamp(40px,6vh,72px);border-top:1px solid rgba(168,210,236,.2);padding-top:clamp(22px,3vh,32px);}
.mk__h{
  font-family:var(--font-display);font-size:.72rem;font-weight:800;letter-spacing:.26em;
  text-transform:uppercase;color:rgba(120,132,155,.95);margin:0 0 20px;
}
.mk__l{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:rgba(255,255,255,.07);}
.mk__l li{background:#07080C;padding:18px 18px 20px;transition:background .5s var(--ease);}
.mk__l li:hover{background:color-mix(in srgb,var(--accent) 7%,#07080C);}
.mk__l b{
  display:block;font-family:var(--font-display);font-weight:800;font-size:1.02rem;
  letter-spacing:-.02em;color:#EDF3FF;
}
.mk__l span{display:block;margin-top:7px;font-size:.82rem;line-height:1.5;color:rgba(150,163,184,.95);}

/* Moved here from interact.css: the homepage is hand built and does
   not load that sheet, so its header logo and CTAs were the only
   controls on the site still under 44px on a phone. chapters.css is
   the one stylesheet every page loads. */
/* ============================================================
   TOUCH TARGETS

   Below the tablet breakpoint every link and control has to be
   reachable with a thumb. The rule enlarges the hit area with a
   pseudo-element rather than padding, so nothing in the layout
   moves and the design is unchanged — only the part of the
   screen that responds to a finger grows.
   ============================================================ */
@media (max-width:900px){
  .cx-ch__i,.sv-crumb a,.sv-crumb span,.pg-crumb a,.fq-jump a,
  .ft__links a,.ft a,.cx-pan__i,.bar__drop a,.mnav__in a,
  .gb-act a,.capdex a,.bar__logo,.mn__logo,.offer__go,.bs__d,
  .fq-xr a,.sv-end a,.wb-xp a,.mk a{
    position:relative;
  }

  /* One hit area, one pseudo-element. ::after is the one kept free for
     this across the sheets, so every target below uses ::after and the
     design's own ::before decorations are left untouched. */
  .fq-jump a::after,.ft__links a::after,.ft a::after,
  .bar__drop a::after,.mnav__in a::after,.gb-act a::after,
  .cx-pan__p a::after,.fq-say a::after,.capdex a::after,
  .sv-crumb a::after,.pg-crumb a::after,.cx-pan__i::after,
  .pg-p a::after,.pg-facts a::after,.pg-list a::after,.pg-end p a::after,
  .pg-ans a::after,.pg-say a::after,.ch__leak a::after,
  .call__m a::after,.sv-sell__note a::after,
  .bar__logo::after,.mn__logo::after,.offer__go::after,
  .fq-xr a::after,.sv-end a::after,.wb-xp a::after,.mk a::after{
    content:"";position:absolute;left:-8px;right:-8px;
    top:50%;translate:0 -50%;height:44px;min-width:44px;
    pointer-events:auto;
  }

  /* the carousel dots are 2px of ink each, so their target is drawn
     square around them rather than stretched across the rail */
  .bs__d::after{
    content:"";position:absolute;left:50%;top:50%;
    translate:-50% -50%;width:44px;height:44px;
  }
  .bs__rail{gap:2px;}

  /* the channel line's own gradient sweep sits on ::before and its
     items sit side by side, so those get real vertical padding */
  .cx-ch{gap:6px 18px;flex-wrap:wrap;}
  .cx-ch__i{padding-block:9px;}

  /* anything that is genuinely a button keeps a comfortable minimum */
  .btn,.gst,.gate__go,.bar__cta,.mnav__cta,.bs__b,.gb-act__b,
  .q__b,.wb-tab,.wa-step,.mn__cta,.bar__burger,.bar__top{min-height:44px;}

  /* inline links inside a paragraph cannot grow without moving the
     text, so they are made inline-block first */
  .cx-pan__p a,.fq-say a,.cx-lay__p a,.pg-p a,.cx-bd a,
  .capdex a,.sv-crumb a,.pg-crumb a,.ft a,
  .call__m a,.sv-sell__note a,.pg-facts a,.pg-list a,.pg-end p a,
  .pg-ans a,.pg-say a,.ch__leak a{
    display:inline-block;position:relative;
  }
}

/* ============================================================
   THE PARTNER BAND
   The programme speaks to introducers, not to buyers, so on the
   homepage it is one line and a door rather than a chapter. The
   detail lives at /partners/.
   ============================================================ */
.ch--band{padding-block:clamp(56px,8vh,96px);}
.band{
  display:grid;gap:clamp(24px,3vw,56px);align-items:center;
  grid-template-columns:1fr;
  padding:clamp(28px,4vh,44px) clamp(24px,3.4vw,48px);
  /* Solid, not glass — and deliberately the one violet surface on the
     page, because the programme speaks to a different audience and a
     different colour is the cheapest way to say so. */
  position:relative;overflow:hidden;border-radius:16px;
  border:1px solid rgba(178,156,255,.20);
  background:
    linear-gradient(100deg,rgba(150,120,255,.16),rgba(120,96,220,.04) 58%,transparent 80%),
    linear-gradient(168deg,#141130,#0A0A1C);
  box-shadow:0 22px 56px -32px rgba(0,0,0,.95),
             inset 0 1px 0 rgba(214,224,255,.07);
}
.band::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(178,156,255,.6),transparent);
}
@media (min-width:900px){
  .band{grid-template-columns:minmax(0,1fr) auto;}
}
.ch__h--sm{font-size:clamp(1.5rem,2.6vw,2.2rem);max-width:22ch;margin-top:14px;}
.band .ch__lead{margin-top:14px;max-width:54ch;font-size:.99rem;}
.band__act{margin:0;}

/* ============================================================
   THE ENTITY DEFINITION, THE "BEST FOR" LINE, AND THE
   HEADING THAT NOW HOLDS EACH QUESTION
   ============================================================ */

/* The paragraph that says plainly what this company is. It is the block
   an answer engine should lift, so it is set apart from the argument
   around it rather than buried in it — a rule down the left, slightly
   larger type, and nothing else competing inside it. */
.ch__def{
  margin:22px 0 0;max-width:62ch;padding:4px 0 4px 22px;
  border-left:2px solid color-mix(in srgb,var(--accent,#6FB8FF) 70%,transparent);
  font-size:clamp(1.02rem,1.25vw,1.18rem);line-height:1.64;
  color:rgba(206,218,238,.96);
}

/* One line per solution so a visitor can rule themselves in or out
   without opening anything. */
.offer__for{
  margin:12px 0 0;font-size:.88rem;line-height:1.55;
  color:var(--o-mut);max-width:42ch;
  transition:color .45s var(--ease);
}
.offer__for b{
  color:var(--o-fg);font-weight:700;
  transition:color .45s var(--ease);
}

/* The question is a heading wrapping a button: the heading gives it a
   place in the outline, the button keeps the expanded state. The heading
   must contribute no typography of its own or it fights the button. */
.q__h{margin:0;font:inherit;color:inherit;letter-spacing:inherit;}



/* ============================================================
   THE LEAK LINE
   One sentence that turns "who this is for" into "which one do
   I buy", set larger than body copy because it is the hinge of
   the page — and carrying three descriptive internal links to
   the three solution pages, which is the other job it does.
   ============================================================ */
.ch__leak{
  margin:clamp(40px,6vh,72px) 0 0;max-width:62ch;
  font-size:clamp(1.08rem,1.45vw,1.36rem);line-height:1.6;
  color:rgba(198,212,236,.96);text-wrap:pretty;
}
.ch__leak a{
  /* No nowrap: "local and organic visibility" is wider than a 390px
     column, and one unbreakable phrase was enough to widen the whole
     document and drag the full-bleed marquee out with it. */
  color:#EAF3FF;
  background-image:linear-gradient(var(--accent,#6FB8FF),var(--accent,#6FB8FF));
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;
  padding-bottom:2px;
  transition:background-size .45s var(--ease),color .4s var(--ease);
}
.ch__leak a:hover{background-size:100% 2px;color:#fff;}

/* ============================================================
   THE CLOSING SIGNATURE
   The page opens on a word flooded with the capability colours
   and closes on the same word, once, small. It is a signature
   rather than a heading: the story coming round, not another
   thing to read.
   ============================================================ */
/* ---------- the end frame -----------------------------------
   MIDNIGHT is not a heading at the bottom of the footer. It is pressed
   into the footer's own surface, behind the columns, and the content
   sits on top of it.

   The emboss is done the way letterpress is faked in type: the glyph is
   filled with almost exactly the surface colour, then given a dark edge
   above and a light edge below, so the eye reads a depression rather
   than a shape. The value contrast is tiny on purpose — anything you can
   comfortably READ at this size stops being a texture and starts
   competing with the address and the legal line.
   ============================================================ */
.ft{position:relative;overflow:hidden;}
.ft__in,.ft__btm{position:relative;z-index:1;}
.ft__sig{
  position:absolute;z-index:0;left:0;right:0;bottom:clamp(58px,8.5vh,104px);
  margin:0;padding:0;border:0;
  pointer-events:none;user-select:none;
  display:flex;flex-direction:column;align-items:center;
}
.ft__sig-m{
  display:block;white-space:nowrap;
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(3.4rem,15.5vw,13.5rem);
  line-height:.8;letter-spacing:-.055em;
  /* the fill is the surface, a shade lighter, so the letterform is
     present as tone before either edge is read */
  color:#0C1120;
  text-shadow:
    0 -1px 0 rgba(0,0,0,.88),
    0 -2px 3px rgba(0,0,0,.55),
    0 1px 0 rgba(150,186,240,.16),
    0 2px 5px rgba(120,160,225,.09);
}
/* a very slight tonal lift across the pressed area, so the surface it is
   pressed into is not perfectly even either */
.ft__sig::after{
  content:"";position:absolute;z-index:-1;left:50%;top:50%;
  width:min(128%,1500px);height:210%;translate:-50% -50%;
  background:radial-gradient(52% 54% at 50% 46%,
    rgba(72,116,196,.070),rgba(24,44,96,.028) 54%,transparent 76%);
}
.ft__sig-r{
  display:block;margin-top:.24em;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(.75rem,1.1vw,.82rem);letter-spacing:.42em;
  text-transform:uppercase;
  color:#0E1426;
  text-shadow:0 -1px 0 rgba(0,0,0,.8), 0 1px 0 rgba(150,186,240,.14);
}
/* Below the breakpoint the footer columns stack and there is no room to
   sit a word this size behind them, so it returns to its own band under
   the content rather than overlapping it. */
@media (max-width:900px){
  /* .ft keeps its clip here too. Letting it go visible so the stacked
     word could breathe also let the tonal wash behind it — 210% of its
     own height — push past the footer and add six hundred pixels of
     empty document below the legal line. */
  .ft__sig{position:static;margin-top:clamp(30px,5vh,48px);}
}