/* ═══════════════════════════════════════════════════════════════════════
   Streamline — shared design system
   Linked by every page of the main site and by /pilot, so the two
   surfaces are literally the same system rather than two that resemble
   each other.

   Deliberately NOT under /assets/*, which netlify.toml serves with
   `immutable, max-age=31536000`. This file changes; that header would
   pin an old copy in every browser for a year.
   ═══════════════════════════════════════════════════════════════════════ */

/* Space Grotesk is the face the web3/AI world actually uses for display —
   a grotesque with drawn-in quirks (that single-storey 'a', the clipped
   terminals) that reads engineered rather than corporate. Sora carries the
   body: same technical family feel, built for screen reading. JetBrains
   Mono is kept for anything that should look like machine output. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Sora:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  /* Ground — sampled from the reference: a near-black with a blue cast,
     not neutral black. The whole palette sits on this. */
  --sl-ground:      #000208;
  --sl-ground-2:    #050A16;
  --sl-surface:     #0A1122;
  --sl-surface-2:   #101A2E;
  --sl-line:        rgba(150,180,240,.11);
  --sl-line-strong: rgba(150,180,240,.20);

  --sl-ink:         #F2F6FD;
  --sl-ink-2:       rgba(214,226,246,.86);
  --sl-ink-3:       rgba(186,202,230,.66);

  /* Accent ramp — the arc in the reference runs #1E439D → #2239A8, and
     the highlight word is a light blue. No violet anywhere. */
  --sl-blue:        #5B9BF5;
  --sl-blue-2:      #2D6BE0;
  --sl-blue-deep:   #1E439D;
  --sl-indigo:      #2239A8;
  --sl-cta:         #F7F9FE;
  --sl-cta-ink:     #05070F;

  --sl-font:      "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sl-display:   "Space Grotesk", "Sora", ui-sans-serif, system-ui, sans-serif;
  --sl-mono:      "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Type: one family across both sites ──────────────────────────────── */
:root, .dark{
  --app-font-sans:    var(--sl-font);
  --app-font-heading: var(--sl-display);
}
body, button, input, select, textarea{ font-family: var(--sl-font); }

/* ── Tailwind ramp remap ──────────────────────────────────────────────
   The markup is full of purple-*, violet-*, cyan-* utility classes. Rather
   than rewrite hundreds of class names, the ramps themselves are rotated
   onto the reference's blue. Each step KEEPS ITS LIGHTNESS, so every
   contrast relationship the layout already relied on still holds — only
   hue and saturation move.                                             */
:root{
  --color-purple-300:oklch(82.7% .092 252);
  --color-purple-400:oklch(71.4% .148 254);
  --color-purple-500:oklch(62.7% .186 256);
  --color-purple-600:oklch(55.8% .206 258);
  --color-purple-700:oklch(49.6% .196 260);
  --color-purple-800:oklch(43.8% .166 262);
  --color-purple-900:oklch(38.1% .136 264);
  --color-purple-950:oklch(29.1% .112 266);
  --color-violet-400:oklch(70.2% .146 257);
  --color-violet-500:oklch(60.6% .190 259);
  --color-violet-600:oklch(54.1% .208 261);
  --color-violet-700:oklch(49.1% .200 262);
  --color-violet-800:oklch(43.2% .172 264);
  --color-indigo-400:oklch(67.3% .156 259);
  --color-indigo-500:oklch(58.5% .196 261);
  --color-indigo-800:oklch(39.8% .166 264);
  --color-fuchsia-400:oklch(74% .150 252);
  --color-fuchsia-500:oklch(66.7% .188 254);
  --color-fuchsia-800:oklch(45.2% .156 260);
  --color-pink-400:oklch(71.8% .140 253);
  --color-pink-500:oklch(65.6% .172 255);
  --color-pink-800:oklch(45.9% .142 261);
  --color-cyan-300:oklch(86.5% .112 249);
  --color-cyan-400:oklch(78.9% .142 251);
  --color-cyan-500:oklch(71.5% .168 253);
  --color-cyan-600:oklch(60.9% .190 256);
  --color-cyan-800:oklch(45% .145 259);
  --color-sky-400:oklch(74.6% .155 252);
  --color-sky-500:oklch(68.5% .175 254);
  --color-sky-800:oklch(44.3% .140 259);
  --color-teal-400:oklch(77.7% .145 251);
  --color-teal-500:oklch(70.4% .168 253);
  --color-teal-800:oklch(43.7% .135 259);
}
.dark{
  --primary:220 84% 54%;
  --ring:220 84% 54%;
  --sidebar-primary:220 84% 54%;
  --sidebar-ring:220 84% 54%;
  --chart-1:220 84% 54%;
  --chart-2:212 90% 60%;
  --chart-3:226 66% 44%;
  --accent:226 66% 40%;
  --secondary:217 91% 55%;
  --card:225 42% 5%;
  --popover:225 42% 5%;
  --sidebar:225 42% 5%;
  --muted:225 22% 9%;
  --input:225 22% 11%;
  --border:224 20% 14%;
  --card-border:224 20% 14%;
  --sidebar-border:224 20% 14%;
}

/* ── The arc ───────────────────────────────────────────────────────────
   Measured off the reference rather than guessed. Scanning across the rim
   gives an ASYMMETRIC profile: a long, soft build on the inside (roughly
   35%→69% of the radius), a bright narrow crest, then a fast drop to
   nothing within ~3%. That gradual inner build is what makes it read as a
   lit sphere blending into the ground instead of a drawn circle — the
   earlier thin ring had symmetric edges and looked like a stroke.
   A linear mask fades it along its length, brightest where it enters. */
.sl-arc{
  position:absolute; pointer-events:none; border-radius:50%;
  aspect-ratio:1 / 1; z-index:0;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(18,40,96,0)      0 30%,
      rgba(22,52,120,.05)  42%,
      rgba(30,72,160,.11)  53%,
      rgba(44,100,205,.20) 61%,
      rgba(74,140,238,.30) 67.2%,
      rgba(132,182,252,.56) 69.15%,
      rgba(176,210,255,.78) 69.75%,
      rgba(198,224,255,.86) 69.98%,
      rgba(120,170,246,.40) 70.42%,
      rgba(52,102,198,.12)  71.1%,
      rgba(20,44,104,0)     72.4%);
  -webkit-mask-image:linear-gradient(158deg,#000 0%,rgba(0,0,0,.92) 32%,rgba(0,0,0,.55) 66%,rgba(0,0,0,.28) 100%);
          mask-image:linear-gradient(158deg,#000 0%,rgba(0,0,0,.92) 32%,rgba(0,0,0,.55) 66%,rgba(0,0,0,.28) 100%);
}
/* Wide outer bloom so the crest bleeds into the ground rather than stopping. */
.sl-arc::after{
  content:""; position:absolute; inset:-14%; border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    transparent 0 62%, rgba(52,116,232,.20) 68.5%, rgba(40,88,190,.07) 73%, transparent 82%);
  filter:blur(38px);
}
/* Hero placement: the crest enters top-right and sweeps the right edge. */
.sl-arc-hero{ top:-70%; right:-58%; width:min(1760px,170vw); }
/* The landing page takes the same light from the opposite side, so the two
   pages are recognisably one system without being the same picture. */
.sl-arc-land{ top:-86%; left:-78%; right:auto; width:min(1760px,172vw);
  /* Pushed further off-frame than the home page's: here the copy sits over
     the middle, so only the crest and a sliver of the lit side should show. */
  -webkit-mask-image:linear-gradient(24deg,#000 0%,rgba(0,0,0,.72) 38%,rgba(0,0,0,.34) 72%,rgba(0,0,0,.14) 100%);
          mask-image:linear-gradient(24deg,#000 0%,rgba(0,0,0,.72) 38%,rgba(0,0,0,.34) 72%,rgba(0,0,0,.14) 100%); }
.sl-arc-soft{ opacity:.55; }
.sl-arc-left{ left:-46%; right:auto; }

/* ── Hero primitives, shared by both sites ───────────────────────────── */
.sl-eyebrow{
  font-size:11px; line-height:1.55; letter-spacing:.24em; text-transform:uppercase;
  color:var(--sl-ink-3); margin:0 0 26px; font-weight:600;
}
.sl-hero-h1{
  font-size:clamp(42px,6.2vw,70px); line-height:1.03; font-weight:800;
  letter-spacing:-.035em; margin:0 0 22px; color:var(--sl-ink); text-wrap:balance;
}
.sl-hero-accent{ color:var(--sl-blue); }
.sl-hero-sub{
  font-size:17px; line-height:1.62; color:var(--sl-ink-2);
  max-width:36ch; margin:0 0 32px;
}
.sl-hero-cta-row{ margin:0 0 40px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.sl-hero-cta{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--sl-cta) !important; color:var(--sl-cta-ink) !important;
  font-weight:700; font-size:15px; padding:14px 26px; border-radius:9999px;
  text-decoration:none; border:0; cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
  box-shadow:0 8px 34px rgba(91,155,245,.16);
}
.sl-hero-cta svg{ width:17px; height:17px; }
.sl-hero-cta:hover{ transform:translateY(-1px); box-shadow:0 10px 42px rgba(91,155,245,.28); }
.sl-hero-cta:focus-visible{ outline:2px solid var(--sl-blue); outline-offset:3px; }

.sl-pillars{ list-style:none; margin:0 0 32px; padding:0; max-width:430px; width:100%; }
.sl-pillar{
  display:flex; align-items:center; gap:16px; padding:14px 0;
  border-top:1px solid var(--sl-line);
}
.sl-pillar:first-child{ border-top:0; }
.sl-pillar-ico{ flex:0 0 auto; color:var(--sl-blue); opacity:.92; }
.sl-pillar-ico svg{ width:19px; height:19px; display:block; }
.sl-pillar-txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.sl-pillar-txt b{
  font-size:11px; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--sl-ink);
}
.sl-pillar-txt em{ font-style:normal; font-size:13px; color:var(--sl-ink-3); }

.sl-hero-rule{ width:54px; height:1px; background:var(--sl-line-strong); margin:0 0 14px; }
.sl-hero-tagline{
  font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--sl-ink-3); margin:0; font-weight:600;
}

@media (max-width:640px){
  .sl-hero-sub, .sl-pillars{ max-width:none; }
  .sl-arc-hero{ top:-18%; right:-80%; width:205vw; }
  .sl-arc-land{ top:-14%; left:-84%; width:205vw; }
}
@media (prefers-reduced-motion:reduce){
  .sl-hero-cta{ transition:none; }
}

/* ── Hero side panel (desktop only) ───────────────────────────────────
   Seven nodes for the seven pillars listed opposite, drawn on the same
   arc the background uses. It fills the dead space under the dashboard
   without adding another box to read. */
.sl-hero-art{
  position:absolute; display:none; pointer-events:none; z-index:1;
  right:5%; top:44%; width:420px; opacity:1;
  transform:translate3d(var(--px,0px),var(--py,0px),0);
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
}
.sl-hero-art svg{ width:100%; height:auto; display:block; }
@media (min-width:1024px){ .sl-hero-art{ display:block; } }
@media (prefers-reduced-motion:no-preference){
  .sl-hero-art circle{ transition:opacity .4s ease; }
}

/* The panel was too faint to register. Brighter strokes, and the nodes
   light in sequence so the eye is drawn along the arc rather than at a
   static diagram. It also drifts a little with the pointer, which is what
   makes it feel like part of the scene instead of a pasted graphic. */
.sl-hero-art .sl-node{ animation:sl-node-pulse 5.6s ease-in-out infinite; transform-origin:center; }
.sl-hero-art .sl-ring{ animation:sl-ring-pulse 5.6s ease-in-out infinite; transform-origin:center; }
@keyframes sl-node-pulse{ 0%,72%,100%{ opacity:.55 } 14%{ opacity:1 } }
@keyframes sl-ring-pulse{ 0%,72%,100%{ opacity:.16 } 14%{ opacity:.60 } }
@media (prefers-reduced-motion:reduce){
  .sl-hero-art{ transition:none; }
  .sl-hero-art .sl-node{ animation:none; opacity:.8 }
  .sl-hero-art .sl-ring{ animation:none; opacity:.3 }
}

/* ── Live gradient border ─────────────────────────────────────────────
   The colours come from the logo artwork itself — cyan-white crest,
   electric blue, indigo, violet highlight — not from a generic neon set.

   Two layers: a masked ring for the border, and a blurred copy behind it
   for the bloom. The angle animates through @property where it is
   supported; where it is not, the gradient simply sits still, which is a
   perfectly good border rather than a broken one.                      */
@property --sl-a{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes sl-sweep{ to{ --sl-a:360deg } }

.sl-glow{
  position:relative; border-radius:9999px; isolation:isolate;
  --sl-ring:conic-gradient(from var(--sl-a),
     #67E8F9 0deg, #5B9BF5 78deg, #2D6BE0 150deg,
     #7C5CFF 222deg, #A78BFA 290deg, #67E8F9 360deg);
}
.sl-glow::before,
.sl-glow::after{
  content:""; position:absolute; inset:-1.5px; border-radius:inherit;
  background:var(--sl-ring);
  animation:sl-sweep 5s linear infinite;
}
.sl-glow::before{                      /* the ring */
  padding:1.5px; z-index:-1;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
}
.sl-glow::after{                       /* the bloom */
  z-index:-2; filter:blur(14px); opacity:.55; transform:scale(1.02);
}
.sl-glow:hover::after{ opacity:.8; }
.sl-glow-soft::after{ opacity:.34; filter:blur(18px); }
@media (prefers-reduced-motion:reduce){
  .sl-glow::before,.sl-glow::after{ animation:none; }
}
/* Wrapping the landing page's whole capture row, not just its button. */
.sl-glow-field{ border-radius:16px; display:block; }

/* Flow lines pulse outward in turn, so the eye reads six → one. */
.sl-hero-art .sl-flow{ stroke-dasharray:5 190; stroke-dashoffset:195;
  animation:sl-flow 4.6s linear infinite; }
@keyframes sl-flow{ to{ stroke-dashoffset:0 } }
.sl-hero-art .sl-core{ animation:sl-core 4.6s ease-in-out infinite; }
@keyframes sl-core{ 0%,100%{ opacity:.88 } 50%{ opacity:1 } }
@media (prefers-reduced-motion:reduce){
  .sl-hero-art .sl-flow{ animation:none; stroke-dasharray:none; stroke-dashoffset:0; opacity:.5 }
  .sl-hero-art .sl-core{ animation:none }
}

/* ── Dither ───────────────────────────────────────────────────────────
   Removed. The noise tile hid gradient banding but WAS the grain Charlie
   kept seeing. Dithering now happens inside the light-stream shader at
   +/- 1/255 — below the eye's threshold, above the quantisation step. */

/* ── Emblem ───────────────────────────────────────────────────────────
   Scaled back, most of all on a phone where it crowded the bar. */
/* The lockup is much wider at Charlie's proportions (≈10:1), so the phone
   size is set by the width the bar can spare, not by the height alone. */
nav img[alt="Streamline Business Systems"]{ height:34px !important; }
@media (max-width:640px){
  nav img[alt="Streamline Business Systems"]{ height:21px !important; }
}
@media (max-width:360px){
  nav img[alt="Streamline Business Systems"]{ height:18px !important; }
}

/* The panel's arbitrary opacity utility was never compiled into the built
   stylesheet, so it rendered translucent over the page behind it. */
nav [class*="top-full"][class*="rounded-2xl"]{ background:#070D1C !important; }

/* ── Aurora ───────────────────────────────────────────────────────────
   Sampled from Charlie's mockup: an electric blue core (#0261FE) fading
   through #03278A, with a violet tail (#6E60FF) at the trailing end, all
   on near-black. Two heavily blurred sweeps rather than an image, so it
   scales to any viewport and weighs nothing.                           */
.sl-aurora{
  position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;
}
.sl-aurora::before{
  content:""; position:absolute; left:-25%; right:-25%; bottom:-34%; height:104%;
  background:radial-gradient(58% 92% at 52% 100%,
    rgba(2,97,254,.42) 0%, rgba(3,52,164,.26) 38%, rgba(3,39,138,.12) 58%, transparent 76%);
  transform:rotate(-7deg); filter:blur(46px);
}
.sl-aurora::after{
  content:""; position:absolute; right:-22%; bottom:-24%; width:72%; height:86%;
  background:radial-gradient(62% 78% at 74% 62%,
    rgba(110,96,255,.30) 0%, rgba(44,14,252,.14) 44%, transparent 72%);
  filter:blur(66px);
}
/* The landing page takes it from the other side, matching its arc. */
.sl-aurora-land::before{ transform:rotate(7deg) scaleX(-1); }
.sl-aurora-land::after{ right:auto; left:-22%; transform:scaleX(-1); }
@media (max-width:640px){
  .sl-aurora::before{ filter:blur(34px); bottom:-28%; }
  .sl-aurora::after{ filter:blur(48px); }
}

/* The restored headline is twice the length of the one it replaces, so it
   takes a lower size step. Same weight, same tracking, three lines. */
/* The page's own stylesheet forces a size and a flat white on hero text,
   so these have to match that weight to land. */
/* index.html carries `section[class*="pt-36"] h1 { font-size: ... !important }`,
   which outranks a plain class. Matching that selector shape is what wins. */
section[class*="pt-36"] h1.sl-hero-h1-long{
  font-size:clamp(34px,4.4vw,52px) !important; line-height:1.07 !important;
  letter-spacing:-.03em !important; max-width:17ch;
}
.sl-hero-h1 .sl-hero-accent{ color:var(--sl-blue) !important; }
@media (max-width:640px){ h1.sl-hero-h1-long{ max-width:none; } }

/* Aurora, pushed closer to Charlie's references: a curtain rather than a
   wash — a brighter, narrower core with the light falling away above it,
   the way the banner mockup and the aurora photos both read. */
.sl-aurora::before{
  background:
    radial-gradient(46% 62% at 48% 100%,
      rgba(2,110,255,.50) 0%, rgba(3,60,190,.30) 34%, rgba(3,39,138,.12) 56%, transparent 74%),
    radial-gradient(90% 46% at 60% 104%,
      rgba(64,150,255,.22) 0%, transparent 70%);
}
.sl-aurora::after{
  background:radial-gradient(56% 70% at 78% 66%,
    rgba(124,108,255,.34) 0%, rgba(44,14,252,.15) 42%, transparent 72%);
}

/* ── Light stream ─────────────────────────────────────────────────────
   The rendered background. Fixed behind everything, never interactive. */
#sl-lightstream{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; display:block;
}
/* Once the shader is up it owns the background — leaving the CSS arc and
   aurora underneath would double the glow and muddy the beam. They stay
   as the fallback for anything without WebGL. */
.sl-has-lightstream .sl-arc,
.sl-has-lightstream .sl-aurora{ display:none !important; }

/* ── Type roles ───────────────────────────────────────────────────────── */
h1,h2,h3,.sl-hero-h1{ font-family:var(--sl-display) !important; }
.sl-eyebrow,.sl-hero-tagline,.sl-pillar-txt b,.sl-band-label,.sl-marq-label{
  font-family:var(--sl-display) !important;
}

/* ── Colour grading on the accent phrase ──────────────────────────────
   Charlie asked for "one touch point" to keep its grading. It is a real
   gradient now — the same cyan/blue/violet the light stream runs on, so
   the type and the background are lit by the same palette. */
.sl-hero-h1 .sl-hero-accent{
  background:linear-gradient(96deg,#9FE0FF 0%,#5B9BF5 34%,#3C6BF0 62%,#8B6BFF 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent !important;
  padding-right:.06em;
}

/* ── Current integrations marquee ─────────────────────────────────────
   Replaces the client-logo row. No official marks are used: generic line
   icons plus the plain product name, which is the safe pattern his note
   describes. Each chip borrows a little of its product's character
   through weight and tracking rather than through anyone's logo. */
.sl-marq{ position:relative; z-index:2; padding:34px 0 8px; }
.sl-marq-label{
  font-size:10.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--sl-ink-3); margin:0 0 16px; font-weight:600;
}
.sl-marq-view{
  position:relative; overflow:hidden; width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.sl-marq-track{ display:flex; width:max-content; gap:10px; animation:sl-marq 34s linear infinite; }
.sl-marq-view:hover .sl-marq-track{ animation-play-state:paused; }
@keyframes sl-marq{ to{ transform:translate3d(-50%,0,0) } }
.sl-chip{
  display:inline-flex; align-items:center; gap:9px; flex:0 0 auto;
  padding:9px 15px; border-radius:11px;
  border:1px solid rgba(150,180,240,.14); background:rgba(10,18,36,.62);
  color:rgba(222,232,250,.9); font-size:13.5px; white-space:nowrap;
}
.sl-chip svg{ width:15px; height:15px; flex:0 0 auto; opacity:.9; }
.sl-chip-ai{   font-family:var(--sl-display); font-weight:600; letter-spacing:-.005em; color:#C9B8FF; }
.sl-chip-x{    font-family:var(--sl-mono); font-weight:700; letter-spacing:-.02em; color:#E6EEFC; }
.sl-chip-field{font-family:var(--sl-display); font-weight:500; letter-spacing:.02em; color:#9FE0FF; }
.sl-chip-g{    font-family:var(--sl-font); font-weight:600; letter-spacing:-.01em; color:#DCE6FA; }
@media (prefers-reduced-motion:reduce){
  .sl-marq-track{ animation:none; transform:none; }
  .sl-marq-view{ overflow-x:auto; }
}

/* ── Hero scrim ───────────────────────────────────────────────────────
   The light stream now runs bright straight through the hero. This keeps
   the copy readable by darkening only the column it sits in, rather than
   dimming the whole scene — which is what made the stream invisible in
   the one place it needed to be seen. */
.sl-hero-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(118% 86% at 6% 38%,
    rgba(0,2,8,.94) 0%, rgba(0,2,8,.80) 30%, rgba(0,2,8,.42) 52%, rgba(0,2,8,0) 72%);
}
@media (max-width:1023px){
  /* Copy runs full width on a phone, so the scrim does too — strongest at
     the top where the headline sits, clearing as the stream comes through. */
  /* Phones: hold the scrim solid the whole way down the reading column,
     then let it go quickly, so the stream is bright and plainly visible
     under the copy instead of being a grey haze behind it. */
  .sl-hero-scrim{
    background:linear-gradient(180deg,
      rgba(0,2,8,.94) 0%, rgba(0,2,8,.92) 42%, rgba(0,2,8,.84) 62%,
      rgba(0,2,8,.56) 74%, rgba(0,2,8,.10) 87%, rgba(0,2,8,0) 95%);
  }
}

/* ── Agentic infrastructure orchestration ─────────────────────────────
   Replaces the dashboard that used to sit directly under the hero. Charlie
   asked for something illustrating capabilities and orchestration instead,
   and for the dashboard imagery to move further down the page.

   A lit core with the seven platform layers around it, joined by filaments
   that carry light outward. The grid is proportional and the filament SVG
   shares its aspect, so the curves meet the cards at every width without
   any JS measuring the layout. */
.sl-orch-sec{
  position:relative; z-index:2;
  padding:128px 20px 104px;
  border-top:1px solid rgba(150,180,240,.07);
}
.sl-orch-inner{ max-width:1180px; margin:0 auto; }

.sl-orch{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1.12fr 1fr;
  grid-template-rows:repeat(4, 1fr);
  gap:24px 34px;
  align-items:center;
  aspect-ratio:1180 / 660;
}
.sl-orch-links{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0; overflow:visible;
}
.sl-orch-links path{ fill:none; stroke-linecap:round; }
.sl-orch-flow{
  stroke-dasharray:3 42; stroke-dashoffset:180;
  animation:sl-orch-flow 3.8s linear infinite;
}
@keyframes sl-orch-flow{ to{ stroke-dashoffset:0 } }

/* ── The core ──────────────────────────────────────────────────────── */
.sl-orch-core{
  grid-column:2; grid-row:1 / span 3;
  position:relative; z-index:2;
  justify-self:center; align-self:center;
  width:min(300px, 26vw); aspect-ratio:1;
  display:grid; place-items:center; border-radius:50%;
  isolation:isolate;
}
.sl-orch-core::before{            /* the body of the sphere */
  content:""; position:absolute; inset:0; border-radius:50%; z-index:2;
  background:
    radial-gradient(circle at 38% 32%, rgba(150,210,255,.42) 0%, rgba(40,90,200,.30) 26%, rgba(8,14,40,.92) 58%, rgba(4,8,22,.98) 74%),
    conic-gradient(from 0deg,
      #67E8F9 0deg, #5B9BF5 70deg, #2D6BE0 150deg,
      #1B3FA8 215deg, #3E8BFF 292deg, #67E8F9 360deg);
  animation:sl-orch-spin 18s linear infinite;
  /* Inner shading only. The outer glow lives on the core itself: on this
     spinning layer the browser clipped its blur to a square that turned
     with it, which showed as a faint rotating box around the sphere. */
  box-shadow:inset 0 0 60px rgba(20,50,140,.34);
}
.sl-orch-core{ box-shadow:0 0 96px rgba(70,130,245,.38); }
.sl-orch-core::after{             /* rim light + outer bloom */
  content:""; position:absolute; inset:-14%; border-radius:50%; z-index:0;
  background:radial-gradient(circle,
    transparent 0 46%, rgba(91,155,245,.34) 52%, rgba(45,107,224,.18) 60%, transparent 74%);
  filter:blur(26px);
}
@keyframes sl-orch-spin{ to{ transform:rotate(360deg) } }
.sl-orch-orbit{ display:none; }
.sl-orch-core span{
  position:relative; z-index:4; text-align:center;
  font-family:var(--sl-display); font-weight:700;
  font-size:clamp(13px, 1.35vw, 17px); letter-spacing:.14em;
  color:#F2F8FF; text-transform:uppercase; line-height:1.34;
  text-shadow:0 2px 18px rgba(6,10,30,.9);
}

/* ── The seven layers ──────────────────────────────────────────────── */
.sl-orch-card{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:13px;
  padding:14px 17px; border-radius:14px;
  border:1px solid rgba(150,180,240,.15);
  background:linear-gradient(180deg, rgba(18,26,48,.86), rgba(10,15,30,.92));
  box-shadow:0 10px 34px rgba(0,2,10,.5);
  backdrop-filter:blur(6px);
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.sl-orch-card:hover{
  border-color:rgba(124,160,255,.42); transform:translateY(-2px);
  box-shadow:0 14px 40px rgba(20,50,140,.34);
}
.sl-orch-ico{
  flex:0 0 auto; display:grid; place-items:center;
  width:36px; height:36px; border-radius:10px;
  background:rgba(45,107,224,.16); color:#9FD0FF;
  border:1px solid rgba(124,160,255,.2);
}
.sl-orch-ico svg{ width:18px; height:18px; }
.sl-orch-txt b{
  display:block; font-family:var(--sl-display); font-weight:700;
  font-size:12.5px; letter-spacing:.11em; text-transform:uppercase;
  color:#EAF1FD; line-height:1.28;
}
.sl-orch-txt em{
  display:block; font-style:normal; font-size:12.5px; margin-top:3px;
  color:rgba(186,202,230,.72);
}
/* Placement mirrors the reference: three down each side, one below centre. */
.sl-o1{ grid-column:1; grid-row:1; }
.sl-o2{ grid-column:1; grid-row:2; }
.sl-o3{ grid-column:1; grid-row:3; }
.sl-o4{ grid-column:3; grid-row:1; }
.sl-o5{ grid-column:3; grid-row:2; }
.sl-o6{ grid-column:3; grid-row:3; }
.sl-o7{ grid-column:2; grid-row:4; justify-self:center; min-width:250px; }

.sl-orch-title{
  margin:58px 0 0; text-align:center;
  font-family:var(--sl-display); font-weight:700;
  font-size:clamp(15px, 1.9vw, 22px); letter-spacing:.22em;
  text-transform:uppercase; color:#EDF3FE;
}
.sl-orch-sub{
  margin:14px auto 0; max-width:62ch; text-align:center;
  font-size:15px; line-height:1.66; color:var(--sl-ink-2);
}

@media (max-width:900px){
  .sl-orch-sec{ padding:64px 20px 72px; }
  .sl-orch{
    grid-template-columns:1fr; grid-template-rows:none;
    aspect-ratio:auto; gap:16px;
  }
  .sl-orch-links{ display:none; }        /* curves have no grid to follow */
  .sl-orch-core{
    grid-column:1; grid-row:1; width:min(188px, 48vw); margin:18px auto 70px;
    perspective:520px;
  }
  .sl-o1,.sl-o2,.sl-o3,.sl-o4,.sl-o5,.sl-o6,.sl-o7{
    grid-column:1; grid-row:auto; justify-self:stretch; min-width:0;
  }
  .sl-orch-title{ margin-top:38px; letter-spacing:.16em; }

  /* ── Phones get their own version of the diagram ───────────────────
     Stacked in one column, the filaments have no geometry to follow and
     the composition loses what makes it read as orchestration. Three
     things put that back without touching the layout: the core is given
     orbits, a spine carries light down the stack, and each layer lights
     in turn as the pulse reaches it. Everything is a pseudo-element or
     absolutely positioned inside a box that already exists, so nothing
     moves and nothing overlaps. */
  .sl-orch-orbit{
    display:block; position:absolute; border-radius:50%;
    border:1px solid rgba(140,185,255,.30);
    transform-style:preserve-3d; pointer-events:none;
  }
  .sl-orch-orbit::after{
    content:""; position:absolute; top:50%; left:-4px;
    width:7px; height:7px; margin-top:-3.5px; border-radius:50%;
    background:#BFE0FF; box-shadow:0 0 14px 4px rgba(110,175,255,.62);
  }
  .sl-ob1{ inset:-12%; animation:sl-orch-orbit-a 14s linear infinite; }
  .sl-ob2{ inset:-3%;  border-color:rgba(120,165,245,.20);
           animation:sl-orch-orbit-b 21s linear infinite; }
  .sl-ob2::after{ width:5px; height:5px; margin-top:-2.5px; left:-3px;
                  box-shadow:0 0 10px 3px rgba(110,175,255,.48); }
  @keyframes sl-orch-orbit-a{
    from{ transform:rotateX(74deg) rotateZ(0deg) }
    to  { transform:rotateX(74deg) rotateZ(360deg) }
  }
  @keyframes sl-orch-orbit-b{
    from{ transform:rotateX(66deg) rotateZ(360deg) }
    to  { transform:rotateX(66deg) rotateZ(0deg) }
  }

  /* The spine runs the full height behind everything; the core and the
     cards cover it, so it shows only in the gaps between them. */
  .sl-orch::after{
    /* Starts below the orbit envelope rather than at the top of the grid.
       Running it up through the rosette put a straight line across the
       one part of the composition that is meant to read as curves.
       The offset is the core's top margin plus half its width plus the
       outermost orbit radius, which is 1.52 of that half. */
    content:""; position:absolute; z-index:0; bottom:0;
    top:calc(18px + 1.30 * min(188px, 48vw));
    left:50%; margin-left:-1px; width:2px; pointer-events:none;
    background-image:
      linear-gradient(180deg, transparent 0%, rgba(175,215,255,.95) 5%, transparent 11%),
      linear-gradient(180deg, rgba(120,170,255,.34), rgba(120,170,255,.07));
    background-size:100% 240%, 100% 100%;
    background-repeat:no-repeat;
    animation:sl-orch-spine 4.2s linear infinite;
  }
  @keyframes sl-orch-spine{
    from{ background-position:0 -150%, 0 0 }
    to  { background-position:0  150%, 0 0 }
  }

  .sl-orch-card::before{
    content:""; position:absolute; left:0; top:13px; bottom:13px; width:2px;
    border-radius:2px; background:linear-gradient(180deg,#67E8F9,#5B9BF5);
    opacity:.16; animation:sl-orch-lit 7.7s ease-in-out infinite;
  }
  .sl-o1::before{ animation-delay:0s }
  .sl-o2::before{ animation-delay:1.1s }
  .sl-o3::before{ animation-delay:2.2s }
  .sl-o4::before{ animation-delay:3.3s }
  .sl-o5::before{ animation-delay:4.4s }
  .sl-o6::before{ animation-delay:5.5s }
  .sl-o7::before{ animation-delay:6.6s }
  @keyframes sl-orch-lit{ 0%,16%,100%{ opacity:.16 } 5%{ opacity:1 } }
}
@media (prefers-reduced-motion:reduce){
  .sl-orch-core::before{ animation:none; }
  .sl-orch-flow{ animation:none; stroke-dasharray:none; stroke-dashoffset:0; opacity:.5; }
  .sl-orch-orbit{ animation:none; }
  .sl-ob1{ transform:rotateX(74deg) }
  .sl-ob2{ transform:rotateX(66deg) }
  .sl-orch::after{ animation:none; background-image:linear-gradient(180deg, rgba(120,170,255,.28), rgba(120,170,255,.06)); }
  .sl-orch-card::before{ animation:none; opacity:.3 }
}

/* ── Command-centre slot ───────────────────────────────────────────────
   The dashboard used to sit in the hero's right column. Charlie asked for
   it further down the page, so the React tree now renders an empty slot
   here and the page script fills it with the same markup. */
.sl-dash-slot{ max-width:980px; margin:0 auto; }
.sl-dash-slot .sl-db-outer{ width:100%; }

/* ── Footer readability over the light stream ─────────────────────────
   The stream is fixed to the viewport, so on a short page (the platform
   placeholders, for instance) the footer can sit inside the hero's
   full-brightness band and the link columns wash out. A scrim of its own
   keeps the stream present behind the footer without costing contrast. */
footer{ position:relative; }
footer::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(0,2,8,.70) 0%, rgba(0,2,8,.88) 38%, rgba(0,2,8,.95) 100%);
}


/* ── Verified mark ────────────────────────────────────────────────────
   Sits inline ahead of the tagline. Optically aligned rather than
   baseline-aligned, because an uppercase letter-spaced line reads from
   its cap height, not its baseline. */
.sl-verified{
  display:inline-block; line-height:0; margin-right:7px;
  vertical-align:-3px;
}
.sl-verified svg{ width:16px; height:16px; display:block; }
@media (max-width:640px){
  .sl-verified svg{ width:15px; height:15px; }
  .sl-verified{ margin-right:6px; vertical-align:-3px; }
}

/* ── Phones: close the gap under the hero ─────────────────────────────
   The hero is a 95vh flex box centred on its content. That was right
   when it carried a dashboard and a seven-item list; with the copy
   alone it leaves a large dead band between the tagline and the section
   below on a tall phone. Let it size to its content there and give the
   next section a tighter lead-in. Desktop keeps the full-height hero. */
@media (max-width:900px){
  section[class*="pt-36"]{
    min-height:0 !important;
    padding-top:118px !important;
    padding-bottom:60px !important;
  }
  .sl-orch-sec{ padding-top:24px; }
}

/* ── The human layer: two figures, and a disclosure ───────────────────
   The "US based" line was formatted as a fourth statistic, which put a
   fact about where we sit in the same visual bracket as a measured
   result. It is a disclosure, so it now reads as one: a bordered strip
   rather than a number on a rule. */
.sl-stat-row{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:32px;
}
.sl-disclosure{
  margin-top:40px; display:flex; align-items:center; gap:14px;
  padding:16px 18px; border-radius:14px;
  border:1px solid rgba(150,180,240,.14);
  background:linear-gradient(180deg, rgba(16,24,44,.55), rgba(9,14,28,.55));
}
.sl-disc-flag{ font-size:20px; line-height:1.15; flex:0 0 auto; }
.sl-disc-txt p{ margin:0; font-size:13.5px; color:var(--sl-ink-2); }
.sl-disc-txt p b{ color:var(--sl-ink); font-weight:700; }
.sl-disc-txt em{
  display:block; font-style:normal; margin-top:5px;
  font-size:12px; line-height:1.6; color:var(--sl-ink-3);
}
@media (max-width:640px){
  /* Charlie's note: the gap above the figures may be larger than the gap
     between them, but it should not read as dead space. 40 against 26. */
  .sl-hl-intro{ margin-bottom:34px; }
  .sl-stat-row{ grid-template-columns:1fr; gap:26px; }
  .sl-disclosure{ margin-top:34px; }
}

/* ── Orbit layers ─────────────────────────────────────────────────────
   Two canvases either side of the sphere. Because the sphere is an
   opaque element between them, the half of every orbit that is behind
   it is hidden with no masking of any kind — a dot crossing the limb
   just goes, and comes back on the other side. Layer order inside the
   core is: bloom (0), behind (1), sphere (2), in front (3), label (4). */
.sl-orb-layer{
  position:absolute; left:-85%; top:-85%; width:270%; height:270%;
  pointer-events:none; display:block;
}
/* The swarm spreads wider than a phone screen, as the reference does;
   the section clips it, so it never makes the page scroll sideways and
   never crosses the line above. */
@media (max-width:900px){ .sl-orch-sec{ overflow:hidden; } }
.sl-orb-back{ z-index:1; }
.sl-orb-front{ z-index:3; }
/* The two CSS rings are the no-JS fallback; the renderer retires them. */
.sl-orch-core.sl-orb-js .sl-orch-orbit{ display:none !important; }

/* ── DAO roadmap ──────────────────────────────────────────────────────
   The platform pages are short, so a section below their hero still sits
   inside the light stream's full-brightness band and the copy washes
   out. Same treatment as the footer: a scrim of its own on a negative
   layer, which keeps the stream visible behind without costing contrast.
   (No rule on the children — positioning them pulls absolute decoration
   back into flow and breaks the layout.) */
#roadmap{ position:relative; }
#roadmap::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(0,2,8,.88) 0%, rgba(0,2,8,.93) 45%, rgba(0,2,8,.95) 100%);
}

/* The walkthrough player drops into a slot the app renders, so it survives
   client-side navigation instead of depending on a one-time swap. */
.sl-vsl-slot{ display:flex; justify-content:center; width:100%; }

/* ── Early access: into the app, and onto the home screen ─────────────
   The hero block navigates rather than captures. The panel below it is
   the install explanation, which has to live on the site because the
   install itself happens inside the app on its own origin. */
.sl-app-entry{ display:flex; flex-direction:column; align-items:flex-start; gap:0; }
.sl-app-primary{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 26px; border-radius:14px;
  font-family:var(--sl-display); font-weight:700; font-size:15.5px;
  letter-spacing:.01em; color:#05080F; text-decoration:none;
  background:linear-gradient(135deg,#9FD0FF 0%,#5B9BF5 52%,#2D6BE0 100%);
  box-shadow:0 10px 32px rgba(45,107,224,.34);
  transition:filter .2s ease, transform .2s ease;
}
.sl-app-primary:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.sl-app-primary:focus-visible{ outline:2px solid #9FD0FF; outline-offset:3px; }
.sl-app-arrow{ transition:transform .2s ease; }
.sl-app-primary:hover .sl-app-arrow{ transform:translateX(3px); }
.sl-app-alt{ margin:14px 0 0; font-size:14px; color:var(--sl-ink-3); }
.sl-app-alt a{ color:var(--sl-ink); font-weight:600; text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:rgba(150,190,250,.5); }
.sl-app-note{ margin:10px 0 0; font-size:12.5px; line-height:1.65; color:var(--sl-ink-3); }
.sl-app-note a{ color:var(--sl-ink-2); text-decoration:underline; text-underline-offset:3px; }

.sl-hs{ padding:8px 20px 72px; }
.sl-hs-inner{
  max-width:760px; margin:0 auto; padding:28px 26px 30px;
  border:1px solid rgba(150,180,240,.16); border-radius:20px;
  background:linear-gradient(180deg, rgba(10,16,31,.94), rgba(6,11,23,.96));
  box-shadow:0 18px 60px rgba(0,2,10,.5);
  backdrop-filter:blur(10px);
}
.sl-hs-eyebrow{
  margin:0 0 10px; font-size:11px; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--sl-ink-3);
}
.sl-hs-title{
  margin:0 0 12px; font-family:var(--sl-display); font-weight:700;
  font-size:clamp(21px,3.2vw,27px); line-height:1.2; color:var(--sl-ink);
}
.sl-hs-lead{ margin:0 0 22px; font-size:14.5px; line-height:1.7; color:var(--sl-ink-2); }
.sl-hs-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px; }
.sl-hs-tab{
  appearance:none; cursor:pointer; padding:9px 15px; border-radius:999px;
  font-size:13px; font-weight:600; color:var(--sl-ink-3);
  border:1px solid rgba(150,180,240,.18); background:rgba(10,16,32,.5);
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.sl-hs-tab:hover{ color:var(--sl-ink-2); border-color:rgba(150,190,250,.34); }
.sl-hs-tab.is-on{
  color:#05080F; border-color:transparent;
  background:linear-gradient(135deg,#9FD0FF,#5B9BF5);
}
.sl-hs-tab:focus-visible{ outline:2px solid #9FD0FF; outline-offset:2px; }
.sl-hs-steps{ list-style:none; margin:0; padding:0; display:grid; gap:13px; }
.sl-hs-step{ display:flex; align-items:flex-start; gap:13px; }
.sl-hs-num{
  flex:0 0 auto; display:grid; place-items:center;
  width:24px; height:24px; border-radius:50%;
  font-size:12px; font-weight:700; color:#BFDCFF;
  background:rgba(45,107,224,.2); border:1px solid rgba(124,160,255,.26);
}
.sl-hs-txt{ font-size:14.5px; line-height:1.62; color:var(--sl-ink-2); }
.sl-hs-note{
  margin:18px 0 0; padding:12px 14px; border-radius:11px;
  font-size:12.5px; line-height:1.65; color:var(--sl-ink-3);
  background:rgba(10,16,32,.5); border:1px solid rgba(150,180,240,.1);
}
.sl-hs-cta{ margin:24px 0 0; }
.sl-hs-after{ margin:11px 0 0; font-size:12.5px; color:var(--sl-ink-3); }
@media (max-width:640px){
  .sl-hs{ padding:4px 20px 56px; }
  .sl-hs-inner{ padding:24px 20px 26px; }
  .sl-app-primary{ width:100%; justify-content:center; }
}

/* ── Page content sits above the light stream ─────────────────────────
   The canvas is fixed and appended after #root, so with #root unpositioned
   it paints over everything on the page. The main site's own CSS happens
   to give #root a stacking context; the early-access app does not, which
   is why panels there were washing out under the beam rather than in front
   of it. Stating it here fixes that page and is a no-op on the other. */
#root{ position:relative; z-index:1; }

/* ── Integrations band ────────────────────────────────────────────────
   Charlie: "let's create symmetry between these two spaces — one is
   currently slightly larger."

   He was right, and the padding was not the culprit: it was 56px on both
   sides already. The label's line box is taller than its letters, so the
   text starts 3.88px below the top of its own box. Measured from the ink
   rather than the box, the gap above read 59.88px against 56px below.
   Padding is therefore deliberately unequal here so that the *visible*
   space is equal: 50 + 3.88 above the letters, 54 below the chips, which
   lands within a fifth of a pixel of each other. */
section.sl-marq-sec{
  position:relative;
  padding-top:50px;
  padding-bottom:54px;
}

/* A light traces each hairline, one border then the other, so the band
   reads as part of the same moving system as the background rather than
   a static rule. The crisp 1px core carries the highlight; the box-shadow
   is the glow around it, which is the part that actually registers at
   this size. Timing is linear on purpose -- an eased sweep spends most of
   its visible life accelerating through the middle, and the light needs
   to be readable the whole way across. */
section.sl-marq-sec::before,
section.sl-marq-sec::after{
  content:""; position:absolute; left:0; width:38%; height:1px;
  pointer-events:none; z-index:1; will-change:transform;
  background:linear-gradient(90deg,
    rgba(130,185,255,0) 0%,
    rgba(160,205,255,.45) 30%,
    rgba(236,247,255,1) 50%,
    rgba(160,205,255,.45) 70%,
    rgba(130,185,255,0) 100%);
  box-shadow:0 0 16px 3px rgba(120,175,255,.42);
  /* Translated rather than background-positioned: a percentage background
     position is a fraction of (container - image), so the highlight never
     clears either end and the sweep looks clipped. */
  animation:sl-marq-trace 8.5s linear infinite;
}
section.sl-marq-sec::before{ top:0; }
section.sl-marq-sec::after{ bottom:0; animation-delay:-4.25s; }
@keyframes sl-marq-trace{
  0%   { transform:translateX(-105%); opacity:0; }
  6%   { opacity:1; }
  58%  { opacity:1; }
  64%  { transform:translateX(268%); opacity:0; }
  100% { transform:translateX(268%); opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  section.sl-marq-sec::before,
  section.sl-marq-sec::after{ animation:none; opacity:.5; transform:translateX(82%); }
}

/* ── Phone rhythm between sections ────────────────────────────────────
   The section padding is written for a wide screen: py-28 and py-36 mean
   112 and 144 either side, so two neighbours put up to 224px of nothing
   between them. On a 390px-wide phone that is well over half a screen of
   empty space at every seam, which is what Charlie circled five times.
   One consistent step on phones instead, so the page keeps its rhythm
   without the holes. */
@media (max-width:640px){
  main section[class*="py-36"],
  main section[class*="py-28"],
  main section[class*="py-24"],
  main section[class*="py-20"],
  main section[class*="py-16"]{
    padding-top:30px;
    padding-bottom:30px;
  }
  /* Charlie: swap the two spacings around the orchestration copy -- it
     was 38px above the heading and 30px below the paragraph, sitting
     closer to the integrations band than to the cards above it. Swapped
     so it's now 30 above (closer to the cards) and 38 below. */
  .sl-orch-title{ margin-top:30px; }
  .sl-orch-sec{ padding-bottom:38px; }
  /* 24, not 34: the logo carries ~11px of its own space above the ink,
     so this puts the footer line 35px from the content on both sides. */
  footer[class*="pt-20"]{ padding-top:24px; }
  /* Charlie: "make these gaps symmetrical". Measured from the visible
     ink at 402px: the orchestration copy sat 43px above the band's top
     line but "The Human Layer" only 32px below its bottom line, and
     inside the band the label was 33px from its line against 35px from
     the chips to theirs. Both pairs now match -- 33 inside, 43 outside --
     keeping the 43 above rather than shrinking it, because an earlier
     round asked for the orchestration copy to sit closer to the cards
     above it than to this band. */
  section.sl-marq-sec{ padding-top:30px; padding-bottom:32px; }
  section.sl-marq-sec + section{ padding-top:41px; }
}

/* ── The hairline between the hero and the orchestration graphic ───────
   Charlie: "keep the gap but move the faint blue line precisely in the
   middle of the lower graphic and the bottom of the subheading."

   The line is that section's top border. It used to sit at the bottom of
   the hero, which is stretched by min-height, so nearly all of the gap
   fell ABOVE the line (303px above, 128px below at 1200×900). The hero no
   longer stretches past its content, and the space below the subheading
   and the space above the graphic are now the same value, so the line is
   centred between them at every width. */
section[class*="pt-36"][class*="min-h-"]{
  min-height:0 !important;
  padding-bottom:clamp(72px,17vw,216px) !important;
}
/* minus the trailing space inside the hero copy block, so the two visible
   gaps (subheading text to line, line to graphic) match. */
.sl-orch-sec{ padding-top:calc(clamp(72px,17vw,216px) - 31px) !important; }

/* ── Phones: the faint blue line, centred on what you actually see ────
   Charlie (DM, marked up): "keep the gap but move the faint blue line
   precisely in the middle of the lower graphic and the bottom of the
   subheading" — with the graphic's edge drawn at the top of the orbiting
   lights, not at the sphere or its box.

   The last pass centred the line between boxes, and the graphic's box is
   not the graphic: the permanent orbit rings reached far outside the
   sphere, so the line sat 75px under the text but only ~25px above them.

   The graphic is now the swarm around the core (orbits.js), and its top
   is where the traffic actually is, not the furthest it could ever reach.
   The swarm now changes shape (loop, vortex, sheet, lattice, burst,
   globe), so its top moves. Measured over a full cycle, the highest
   visible light sits a median of 1.22 radii above the centre, so the
   spacing is set for 0.20 of a radius above the sphere's edge. The line is centred between the subheading's
   baseline and that edge of the swarm: 62px each side. The highest it ever
   reaches (1.56 radii) stays about 28px clear of the line.

   The line is this section's top border; the sphere sits 19px into it
   (its own 18px margin plus the grid's first pixel), and a radius on
   phones is min(94px, 24vw). If the swarm's shape changes, re-measure. */
@media (max-width:900px){
  section[class*="pt-36"][class*="min-h-"]{ padding-bottom:53.5px !important; }
  .sl-orch-sec{ padding-top:calc(43px + 0.20 * min(94px, 24vw)) !important; }
}

/* ── Phones: the same line, a tighter gap (Charlie: "Let's keep the faint
   blue line centered but close this gap a bit") ───────────────────────
   Both gaps are now 46px (they were 60 and 62), measured the same way as
   before: from the baseline of the subheading's last line down to the
   line, and from the line down to where the top of the swarm usually is.
   The swarm was rebuilt (denser, synchronised), and its usual top is now
   1.136 radii above the core's centre (window.SL_ORBITS.typicalTop), so:
     above: hero padding 39px + the 7px from the text's baseline to the
            bottom of its box = 46px.
     below: padding 27px + 0.136 radii, + the core's 19px into the
            section, − the 0.136 radii the swarm's top sits above the
            core = 46px, at every phone width.
   At the very peak of a formation (1.554 radii) the highest lights come
   within ~7px of the line. They must never cross it, and the section's
   crop would cut their glow off with a straight edge, so the light layer
   fades to nothing over the last 14px instead: the line stays clean and
   nothing looks chopped. The line sits 1.564 radii − 46px below the top
   of the light layer (which starts 1.7 radii above the core). If the
   swarm's shape or this spacing changes, re-measure. */
@media (max-width:900px){
  section[class*="pt-36"][class*="min-h-"]{ padding-bottom:39px !important; }
  .sl-orch-sec{ padding-top:calc(27px + 0.136 * min(94px, 24vw)) !important; }
  .sl-orb-layer{
    -webkit-mask-image:linear-gradient(to bottom, transparent calc(1.564 * min(94px, 24vw) - 46px), #000 calc(1.564 * min(94px, 24vw) - 32px));
            mask-image:linear-gradient(to bottom, transparent calc(1.564 * min(94px, 24vw) - 46px), #000 calc(1.564 * min(94px, 24vw) - 32px));
  }
}

/* ── Phones: close the gap between "Built by operators…" and the core ──
   Charlie (marked-up screenshots, twice): "Don't forget to eliminate this
   gap" / "still need to eliminate the extra space". Same method as the
   block above, with both gaps taken from 46px to 24px, the line staying
   centred between the text and the top of the swarm:
     above: hero padding 39px -> 17px (+ the 7px under the text's baseline
            = 24px).
     below: padding 27px -> 5px (+ the same 0.136 radii and the core's 19px
            as before = 24px).
   The light layer's fade moves up by the same 22px so the lights still
   fade out before they reach the line. */
@media (max-width:900px){
  section[class*="pt-36"][class*="min-h-"]{ padding-bottom:17px !important; }
  .sl-orch-sec{ padding-top:calc(5px + 0.136 * min(94px, 24vw)) !important; }
  .sl-orb-layer{
    -webkit-mask-image:linear-gradient(to bottom, transparent calc(1.564 * min(94px, 24vw) - 24px), #000 calc(1.564 * min(94px, 24vw) - 10px));
            mask-image:linear-gradient(to bottom, transparent calc(1.564 * min(94px, 24vw) - 24px), #000 calc(1.564 * min(94px, 24vw) - 10px));
  }
}

/* ── Enterprise OS: industries we serve ───────────────────────────────
   Two open (a short survey, then the roofing landing page), the rest
   shaded and leading only to the waiting list. Shaded, not disabled:
   they still work, they just read as "not yet". */
.sl-ind-sec{ padding-top:24px; padding-bottom:112px; }
/* The background light stream passes behind this block as the page
   scrolls; a soft shadow keeps the copy legible wherever it crosses. */
.sl-ind-sec .sl-eyebrow,.sl-ind-h,.sl-ind-sub{
  text-shadow:0 1px 2px rgba(0,2,8,.55), 0 0 18px rgba(0,2,8,.75);
}
.sl-ind-h{
  margin:14px 0 10px; font-size:clamp(26px,4vw,36px); line-height:1.15;
  letter-spacing:-.02em; font-weight:700; color:var(--sl-ink);
}
.sl-ind-sub{ margin:0 0 28px; font-size:16px; line-height:1.6; color:var(--sl-ink-2); max-width:34em; }
.sl-ind-list{ display:grid; gap:10px; }
.sl-ind-row{
  display:flex; align-items:center; gap:14px; min-height:64px;
  padding:16px 18px; border-radius:16px; text-decoration:none;
  border:1px solid var(--sl-line-strong);
  background:linear-gradient(180deg, rgba(16,24,44,.72), rgba(9,14,28,.72));
  color:var(--sl-ink);
  transition:border-color .2s ease, transform .2s ease, background .2s ease;
}
.sl-ind-row:hover{ border-color:rgba(91,155,245,.55); transform:translateY(-1px); }
.sl-ind-name{ flex:1; min-width:0; font-size:16.5px; font-weight:600; letter-spacing:-.005em; }
.sl-ind-tag{
  flex:0 0 auto; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px;
  color:#9fd0ff; background:rgba(91,155,245,.14); border:1px solid rgba(91,155,245,.35);
}
.sl-ind-go{ flex:0 0 auto; width:18px; height:18px; color:var(--sl-ink-2); }
.sl-ind-go svg{ width:18px; height:18px; display:block; }
.sl-ind-row:not(.is-soon){ border-color:rgba(91,155,245,.34); }
.sl-ind-row.is-soon{ border-color:var(--sl-line); background:rgba(10,17,34,.4); opacity:.62; }
.sl-ind-row.is-soon:hover{ opacity:.85; }
.sl-ind-row.is-soon .sl-ind-name{ color:var(--sl-ink-3); font-weight:500; }
.sl-ind-row.is-soon .sl-ind-tag{ color:var(--sl-ink-3); background:rgba(186,202,230,.06); border-color:var(--sl-line); }
.sl-ind-row.is-soon .sl-ind-go{ color:var(--sl-ink-3); opacity:.7; }
.sl-ind-row.is-soon:hover{ border-color:var(--sl-line-strong); }
@media (max-width:640px){
  .sl-ind-sec{ padding-top:8px; padding-bottom:64px; }
  .sl-ind-sub{ font-size:15px; margin-bottom:22px; }
  .sl-ind-row{ padding:14px 16px; gap:10px; }
  .sl-ind-name{ font-size:15.5px; }
  .sl-ind-tag{ font-size:10px; letter-spacing:.1em; padding:4px 8px; }
}

/* ── Touch behaviour, site-wide ───────────────────────────────────────
   The grey/blue box mobile browsers paint over a tapped element, and the
   focus ring they draw on tap, are both removed; the ring comes back for
   keyboard users through :focus-visible. */
html{overscroll-behavior-y:contain}
body{-webkit-tap-highlight-color:transparent}
a,button,summary,label,[role="button"]{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
a:focus,button:focus,[role="button"]:focus{outline:none}
a:focus-visible,button:focus-visible,[role="button"]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--sl-blue);outline-offset:3px;border-radius:6px}

/* ── Accessibility: "Skip to content" ─────────────────────────────────
   Off screen until a keyboard user presses Tab, then it appears at the
   top left and jumps straight past the header to the page content. */
.sl-skip{position:fixed;left:12px;top:-64px;z-index:10000;padding:10px 16px;border-radius:10px;background:#fff;color:#0a0a0a;font:600 14px/1.2 system-ui,sans-serif;text-decoration:none;box-shadow:0 6px 24px rgba(0,0,0,.4);transition:top .15s ease}
.sl-skip:focus{top:12px;outline:2px solid #3b93e6;outline-offset:2px}
#main:focus{outline:none}