/* ═══════════════════════════════════════════════════════════════════════
   install-skin.css

   A layer over styles.css and install.css that brings the install page into
   the same visual language as the home page: pure black, one blue accent, zero
   radius, Barlow Condensed for headings.

   Neither the HTML nor the original two files is touched, deliberately. This is
   the last stylesheet in the chain, so everything comes down to overriding
   variables and a handful of rules. If anything misbehaves, delete one line in
   <head> and the page returns to its old state.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* Backgrounds: they were violet blue, now they are our blacks. */
  --bg-0:#000; --bg-1:#050505; --bg-2:#0a0a0a; --bg-3:#0e0e0e;

  /* the whole neon spectrum reduced to a single blue */
  --cyan:#1f6feb; --cyan-2:#4a8ff5; --blue:#1f6feb;
  --indigo:#1f6feb; --violet:#1f6feb; --magenta:#1f6feb; --pink:#1f6feb;

  /* Glass becomes a panel with a border, as everywhere else in our design. */
  --glass:#050505; --glass-2:#0a0a0a;
  --glass-brd:#1e1e1e; --glass-brd2:#2a2a2a;

  --text-hi:#fff; --text:#b8b8b8; --text-mid:#7a7a7a; --text-dim:#7a7a7a;

  /* gradients flattened to a solid colour */
  --grad-neon:linear-gradient(90deg,#1f6feb,#1f6feb);
  --grad-neon-soft:linear-gradient(90deg,#1f6feb,#1f6feb);
  --grad-line:linear-gradient(90deg,transparent,#1f6feb,transparent);

  /* glows and shadows switched off, we do not use them */
  --glow-cyan:0 0 0 1px #16305c;
  --glow-violet:0 0 0 1px #16305c;
  --shadow-lg:none; --shadow-md:none; --shadow-sm:none;

  --radius-lg:0; --radius-md:0; --radius-sm:0;

  /* Content width. The home page has .wrap at 1280px with padding
     clamp(1.5rem,4vw,3rem), giving 1184px of content starting at 80px. Here it
     was 1200px with 24px of padding, so 1152px starting at 120px, and the left
     edges of the two pages did not line up. */
  --container:1280px;

  /* Bar height. The home page uses --nav:62px for the content with a 1px rule
     below it, 63 in total. Here the variable holds the whole box including the
     border, because box-sizing is border-box, so 63 makes the overall height
     match. */
  --nav-h:63px;
}

/* Zero radius, except for the round dots and the switches. */
*:not(.dot):not(.pill-dot){ border-radius:0 !important; }

/* starfield, fog and vignette removed.
   The gradient does not sit on body but on .bg-gradient::before, so it is
   switched off there. */
.fx-particles,
.bg-gradient, .bg-gradient::before, .bg-gradient::after,
body::before, body::after{ display:none !important; }
body{
  background:#000 !important;
  font-family:Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* Headings in the condensed face, uppercase, as on the home page. */
h1,h2,h3,.h1,.h2{
  font-family:"Barlow Condensed",sans-serif !important;
  font-weight:700 !important;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:.98;
}
h1{ font-size:clamp(2.4rem,5vw,3.9rem) !important; }
h2{ font-size:clamp(1.8rem,3.4vw,2.6rem) !important; }
h3{ font-size:1.22rem !important; }

/* The table of contents heading is a label, not a section title.
   It became an h2 on 2026-09-10, because it sits right after the h1 and a jump
   from h1 to h4 is what Lighthouse flags as a broken heading order. The rules
   above paint every h2 as a section title in the condensed face at up to
   2.6rem, which would turn a sidebar label into the loudest thing on the page,
   so it keeps the size it always had. */
.doc-toc h2{
  font-family:"JetBrains Mono",monospace !important;
  font-size:.72rem !important;
  font-weight:700 !important;
  line-height:1.3;
  letter-spacing:.22em;
}

/* Buttons: the solid one is blue with black type, the secondary one is outlined. */
.btn{ border-radius:0 !important; font-family:"Barlow Condensed",sans-serif;
  font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.btn-primary{ background:#1f6feb !important; color:#000 !important;
  border:0 !important; box-shadow:none !important; }
.btn-ghost{ background:transparent !important; color:#fff !important;
  border:1px solid #2a2a2a !important; }
.btn-ghost:hover{ border-color:#1f6feb !important; color:#1f6feb !important; }

/* panels, code, tables: a border instead of glass and glow */
pre,.code,.card,.panel,.note,.callout,.box,table{
  background:#050505 !important;
  border:1px solid #1e1e1e !important;
  box-shadow:none !important;
}
code,pre,kbd,.mono{ font-family:"JetBrains Mono",monospace !important; }
code.inline{ background:#0a0a0a !important; border:1px solid #1e1e1e !important;
  color:#fff !important; }

/* The top bar, following the same logic as our own navigation. */
header,.site-header,.nav,.topbar{
  background:rgba(0,0,0,.8) !important;
  border-bottom:1px solid #1e1e1e !important;
  box-shadow:none !important;
  backdrop-filter:blur(10px);
}

/* Links inside the content. */
a{ color:#1f6feb; }
a:hover{ color:#4a8ff5; }

/* side list: the active item gets a blue rule instead of a fill */
.doc-toc a{ border-left:1px solid transparent !important; }
.doc-toc a:hover{ background:transparent !important; color:#fff !important;
  border-left-color:#2a2a2a !important; }
.doc-toc a.active{
  background:transparent !important;
  border-left:1px solid #1f6feb !important;
  color:#fff !important;
}

/* ── leftovers of someone else's palette, found by going through the whole
   page ──
   Decorative layers under the content: auroras, orbs, grid and floor. All of
   them carry cyan, purple and pink in gradients, so they are switched off. */
.aurora, .orb, .grid-pattern, .grid-floor,
[class*="aurora"], [class*="orb-"]{ display:none !important; }

/* The label above the heading was a pill with a pulsing dot inside it, and the
   skin only repainted it: black fill, blue border, square corners. A framed
   badge is a shape the rest of the site does not use anywhere, so it read as a
   piece of another design that had been recoloured.
   On the home page this label is one mono line of small letterspaced capitals
   with a hairline running off to the right and fading out, and there is no box
   and no dot. That is what it is here now, so both pages open the same way. */
.eyebrow{
  display:flex !important;
  align-items:center !important;
  gap:.7rem !important;
  padding:0 !important;
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  backdrop-filter:none !important;
  font-family:"JetBrains Mono",monospace !important;
  font-size:.7rem !important;
  font-weight:400 !important;
  letter-spacing:.2em !important;
  color:#1f6feb !important;
}
.eyebrow::after{
  content:"";
  height:1px;
  flex:1;
  background:linear-gradient(90deg,#1f6feb,transparent);
}
/* The dot pulsed, which is an animation that says something is live. Nothing
   on this page is live. */
.eyebrow-dot{ display:none !important; }

/* The menu panel was the template's glass: a violet three per cent short of
   opaque, with a blur meant to hide whatever it let through. The blur does
   nothing here, because the bar above it carries one of its own and becomes the
   backdrop root, so what was actually left was the page reading through the
   menu. Everywhere else on this site a panel is solid black with a hairline,
   and so is this one now. */
.nav.menu-open .nav-links{
  background:#000 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-bottom:1px solid #1e1e1e !important;
  box-shadow:none !important;
}

/* The copy button had a bluish glass fill. */
.copy-btn{
  background:#0a0a0a !important;
  border:1px solid #2a2a2a !important;
  color:var(--text) !important;
}
.copy-btn:hover{ border-color:#1f6feb !important; color:#1f6feb !important; }

/* Text in the code blocks was a blueish white, now it is plain white. */
pre, pre code, code{ color:#fff !important; }

/* The switches between the per framework examples had a glass fill. */
.tab-btn{
  background:transparent !important;
  border:1px solid #1e1e1e !important;
  color:var(--text) !important;
  font-family:"Barlow Condensed",sans-serif;
  font-weight:600; text-transform:uppercase; letter-spacing:.06em;
}
.tab-btn:hover{ color:#fff !important; border-color:#2a2a2a !important; }
.tab-btn.active, .tab-btn[aria-selected="true"]{
  background:#07132a !important;
  border-color:#16305c !important;
  color:#fff !important;
}

/* ═══════ SCROLLBAR ═══════
   The default Windows scrollbar is light grey and reads as a strip of light
   down the right edge of a black page. Here it is reduced to a thin line: the
   track is black with a single rule as its border, the thumb is grey and
   lightens on hover, and turns our blue while being dragged. Zero radius, like
   everything else.

   The first block covers Chrome and Edge, the second covers Firefox, which has
   its own two properties and does not know ::-webkit-scrollbar. */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:#000; border-left:1px solid #1e1e1e; }
::-webkit-scrollbar-thumb{ background:#2a2a2a; border:0; }
::-webkit-scrollbar-thumb:hover{ background:#3d3d3d; }
::-webkit-scrollbar-thumb:active{ background:#1f6feb; }
::-webkit-scrollbar-corner{ background:#000; }
/* Firefox has no ::-webkit-scrollbar, so it gets the standard properties.
   The block is deliberately fenced to browsers that do NOT know that selector:
   Chrome does know it and skips this, because the standard properties would
   switch off every rule above, losing the hover state and the blue drag. */
@supports not selector(::-webkit-scrollbar){
  html{ scrollbar-width:thin; scrollbar-color:#2a2a2a #000; }
}

/* ── WORDMARK ──
   The old icon is removed and only the typographic mark remains, the same as in
   the home page header: Barlow Condensed, uppercase, Scan in white and Bridge
   in blue. The <img> itself is not deleted from the HTML, only hidden, so
   reverting comes down to deleting this block. */
.brand-logo{ display:none !important; }
.brand{ gap:0 !important; }
.brand-name{
  font-family:"Barlow Condensed",sans-serif !important;
  font-weight:700 !important;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size:1.15rem !important;
  color:#fff !important;
  line-height:1;
}
.brand-accent{ color:#1f6feb !important; }

/* Navigation: smaller type and our grey, as on the home page. */
.nav-links a{ color:var(--text) !important; font-size:.86rem !important; }
.nav-links a:hover{ color:#fff !important; }

/* ── HOVER ──
   On the home page hover changes only colour and border. There is no movement,
   no scaling and no glow anywhere. Here the primary button jumped by 2px and
   picked up a cyan glow, so that is switched off and reduced to the same
   behaviour: a solid button lightens, an outlined one gains a blue border, a
   link lightens.

   Verified by measurement: of the ten rules with movement in the old CSS, only
   .btn-primary actually applied on this page. The rest are classes from the old
   marketing site and do not exist here, but they are switched off anyway. */
.btn-primary:hover,
.btn-outline:hover,
.problem-card:hover,
.arch-node:hover,
.feature-card:hover,
.step:hover,
.usecase:hover,
.plan:hover,
.plan-featured:hover{
  transform:none !important;
  box-shadow:none !important;
}

/* Solid button: the same as .btn on the home page. */
.btn-primary{ transition:filter .15s !important; }
.btn-primary:hover{ filter:brightness(1.12); background:#1f6feb !important; color:#000 !important; }

/* Outline button: the same as .talk in the navigation. */
.btn-ghost{ transition:border-color .15s, color .15s !important; }

/* Links in text lighten; they never change size. */
a{ transition:color .18s, border-color .18s; }

/* ── HEADER, matched to the home page down to the last pixel ──
   Measured before the fix: bar 76px against 63px, links weight 500 against 400,
   buttons 15.2px/700/11px 20px against 13.76px/600/9px 18px. On top of that
   there was a solid blue button here, which the home page navigation does not
   have at all. */
/* The bar height goes through the variable the old stylesheet already uses,
   rather than a hardcoded pixel value. The home page has --nav:62px, here it
   was 76px, and the same variable also holds the position of the mobile menu,
   so everything moves together. */
.nav-links{ gap:2.4rem !important; }
.nav-links a{ font-weight:400 !important; padding:0 !important; }
.nav-cta{ gap:.9rem !important; }

/* Both header buttons look like our own "Talk to us". */
header .btn, .nav .btn{
  font-size:.86rem !important;
  font-weight:600 !important;
  padding:9px 18px !important;
  letter-spacing:.08em !important;
}
header .btn-primary, .nav .btn-primary{
  background:transparent !important;
  color:#fff !important;
  border:1px solid #2a2a2a !important;
}
header .btn-primary:hover, .nav .btn-primary:hover{
  filter:none !important;
  border-color:#1f6feb !important;
  color:#1f6feb !important;
  background:transparent !important;
}

/* the same distance from the edge as .wrap on the home page */
.container{ padding-left:clamp(1.5rem,4vw,3rem) !important;
  padding-right:clamp(1.5rem,4vw,3rem) !important; }