/* =====================================================================
   NOIR — dark-first premium theme.
   Loaded last. Re-points the tokens and rebuilds the components that
   assumed a light canvas. Restraint is the rule: orange means action
   or state, never decoration.
   ===================================================================== */

:root{
  /* canvas */
  --bg:#0A0B0D;
  --s1:#121417;
  --s2:#191C21;
  --s3:#20242A;

  /* ink */
  --fg:#F4F5F6;
  --muted:#9BA1A8;
  --dim:#7E858D;

  /* lines */
  --hair:rgba(255,255,255,.07);
  --hair-2:rgba(255,255,255,.12);
  --hair-3:rgba(255,255,255,.2);

  /* signal */
  --accent:#EE452D;
  --accent-2:#FF6A4D;
  --accent-soft:rgba(238,69,45,.12);
  --accent-line:rgba(238,69,45,.3);

  /* remap the base theme's names so existing components inherit */
  --white:var(--bg);
  --chalk:var(--s1);
  --chalk-2:var(--s2);
  --navy:#FFFFFF;
  --navy-2:var(--s2);
  --navy-3:var(--s3);
  --body:#B9BFC6;
  --line:var(--hair);
  --line-2:var(--hair-2);
  --orange:var(--accent);
  --orange-ink:var(--accent-2);
  --orange-soft:var(--accent-soft);
  --on-navy:#B9BFC6;
  --on-navy-2:var(--dim);
  --navy-line:var(--hair);

  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --wrap:1560px;
  --gut:clamp(20px,3.2vw,48px);
  --lift:0 1px 0 rgba(255,255,255,.04) inset,0 18px 40px -26px rgba(0,0,0,.9);
  --float:0 1px 0 rgba(255,255,255,.05) inset,0 40px 80px -36px rgba(0,0,0,1);
}

html,body{background:var(--bg);color:var(--fg)}
body{
  background-image:
    radial-gradient(900px 540px at 78% -6%,rgba(238,69,45,.10),transparent 62%),
    radial-gradient(760px 480px at 6% 12%,rgba(90,120,255,.05),transparent 64%);
  background-attachment:fixed;
}
::selection{background:var(--accent);color:#fff}

/* hairline grid, Linear's quiet signature */
.gridlines{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);
  background-size:84px 84px;
  -webkit-mask-image:radial-gradient(1100px 760px at 50% 0%,#000 0%,transparent 76%);
  mask-image:radial-gradient(1100px 760px at 50% 0%,#000 0%,transparent 76%);
  opacity:.5}
main,.foot{position:relative;z-index:2}
.nav{z-index:100}
.mmenu{z-index:95}
.mbar{z-index:90}
.grain{opacity:.05;mix-blend-mode:overlay}

/* ---------------------------------------------------------------- type */
.h-display,.h-1,.h-2,.h-3{color:var(--fg)}
.lede{color:var(--muted)}
.fine,.small{color:var(--dim)}

/* mono eyebrow, the technical-credibility tell */
.eyebrow{background:transparent;color:var(--accent-2);
  box-shadow:inset 0 0 0 1px var(--accent-line);
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.badge{background:var(--s1);color:var(--muted);box-shadow:inset 0 0 0 1px var(--hair);
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase}
.section-head::before{background:var(--accent)}

/* ---------------------------------------------------------------- nav */
.nav.scrolled{background:rgba(10,11,13,.72);box-shadow:0 1px 0 var(--hair)}
.nav-links{background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--hair)}
.nav.scrolled .nav-links{background:rgba(255,255,255,.05)}
.nav-links>a,.nav-drop-btn{color:var(--muted)}
.nav-links>a:hover,.nav-drop-btn:hover{color:var(--fg);background:rgba(255,255,255,.06)}
.nav-links>a[aria-current],.nav-drop-btn[aria-current]{background:var(--fg);color:var(--bg)}
.nav-tel{color:var(--fg)}
.nav-tel:hover{color:var(--accent-2)}
.nav-panel{background:var(--s2);box-shadow:0 40px 80px -30px #000,inset 0 0 0 1px var(--hair-2)}
.nav-panel-item:hover{background:rgba(255,255,255,.05)}
.nav-panel-item b{color:var(--fg)}
.nav-panel-item em,.nav-panel-note{color:var(--dim)}
.burger{background:var(--s1);box-shadow:inset 0 0 0 1px var(--hair)}
.burger i{background:var(--fg)}
.mmenu{background:var(--bg)}
.mmenu nav a{color:var(--fg)}
.mmenu-foot a.row{color:var(--fg)}

/* ---------------------------------------------------------------- buttons */
.btn-primary{background:var(--accent);color:#0A0B0D;box-shadow:0 0 0 1px rgba(238,69,45,.5),0 14px 36px -14px rgba(238,69,45,.65)}
.btn-primary::before{background:var(--fg)}
.btn-primary:hover{color:var(--bg)}
.btn-line,.btn-ghost{color:var(--fg);box-shadow:inset 0 0 0 1px var(--hair-2)}
.btn-line:hover,.btn-ghost:hover{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--hair-3)}
.btn-navy{background:var(--fg);color:var(--bg)}
.btn-navy:hover{background:#fff}
.btn-white,.btn-light{background:var(--fg);color:var(--bg)}
.btn-white:hover,.btn-light:hover{background:#fff}
.btn-ghost-light{color:var(--fg);box-shadow:inset 0 0 0 1px var(--hair-2)}
.link{color:var(--fg)}
.link .ic{color:var(--accent-2)}
.tlink{color:var(--accent-2)}

/* ---------------------------------------------------------------- surfaces */
/* one card recipe, used everywhere: tinted panel + hairline + hover lift */
.stat-card,.leaks,.half,.svc-card,.plan,.case,.fig,.val,.fact,.check,.trust,
.flex-row,.pain,.solve,.value-card,.crosslink,.bn,.layer,.vs-col,.stack-card,.formcard,.closer-form{
  background:var(--s1);
  box-shadow:inset 0 0 0 1px var(--hair);
  color:var(--fg);
}
.stat-card p,.leak p,.svc-card p,.plan>p,.case-body,.fig span,.val p,.fact span,.check p,
.trust p,.flex-row p,.pain p,.solve p,.value-card p,.bn p,.layer p,.stack-card p{color:var(--muted)}
.leak h3,.svc-card h3,.check h3,.trust b,.flex-row b,.pain h3,.solve h3,.value-card b,.bn b,.crosslink b{color:var(--fg)}

/* hover: the border lights up rather than the card moving much */
.svc-card:hover,.plan:hover,.val:hover,.trust:hover,.solve:hover,.bn:hover,.crosslink:hover,.flex-row:hover{
  box-shadow:inset 0 0 0 1px var(--hair-3),0 24px 50px -30px #000}

.ibox{background:rgba(255,255,255,.05);color:var(--accent-2);box-shadow:inset 0 0 0 1px var(--hair);display:inline-grid;place-items:center;line-height:0;font-size:0}
.ibox .ic,.ibox svg{display:block;margin:0 auto;width:20px;height:20px}
.ibox.navy,.ibox.ghost{background:rgba(255,255,255,.05);color:var(--accent-2)}
.pill{background:rgba(255,255,255,.04);color:var(--muted);box-shadow:inset 0 0 0 1px var(--hair)}
.pill .ic{color:var(--accent-2)}

/* section backgrounds collapse to one canvas; separation by hairline only */
.sec.chalk,.sec.navy,.svc,.halves-sec,#websites{background:transparent}
.sec.chalk,.sec.navy{border-top:1px solid var(--hair)}
.proof::after,.proof-bg{display:none}

/* ---------------------------------------------------------------- hero */
.hero .stage-photo,.phero .stage-photo,.bleed,.imgband,.shot{
  box-shadow:inset 0 0 0 1px var(--hair-2),0 50px 100px -50px #000}
.hero .stage-photo img,.phero .stage-photo img,.bleed img{filter:saturate(.78) contrast(1.06) brightness(.82)}
.chip{background:rgba(18,20,23,.9);box-shadow:inset 0 0 0 1px var(--hair-2),0 30px 60px -30px #000;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.chip b{color:var(--fg)}
.chip span,.chip .t{color:var(--dim)}
.chip .dot{background:rgba(238,69,45,.14);color:var(--accent-2);box-shadow:inset 0 0 0 1px var(--accent-line)}
.chip.win{background:var(--accent);box-shadow:0 30px 60px -24px rgba(238,69,45,.6)}
.chip.win b{color:#0A0B0D}
.chip.win span,.chip.win .t{color:rgba(10,11,13,.72)}
.chip.win .dot{background:rgba(10,11,13,.18);color:#0A0B0D;box-shadow:none}
.chip::after{background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.12) 50%,transparent 70%)}

/* ---------------------------------------------------------------- platforms */
.platforms{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.platforms p{color:var(--dim);font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase}
.plat{color:var(--muted)}
.plat-logo{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--hair)}
.plat-glyph{background:rgba(255,255,255,.05)}
.plat-glyph .ic{color:var(--fg)}

/* ---------------------------------------------------------------- leak */
.dots i{background:rgba(255,255,255,.07)}
.dots i.on{background:var(--accent);box-shadow:0 0 10px rgba(238,69,45,.5)}
.stat b{color:var(--fg)}
.stat-card cite{color:var(--dim);font-family:var(--mono);font-size:11.5px}
.leak{border-bottom:1px solid var(--hair)}
.leaks{padding-inline:clamp(20px,2.6vw,34px)}

/* ---------------------------------------------------------------- halves */
.half.light,.half.dark{background:var(--s1)}
.half.dark{background:linear-gradient(165deg,rgba(238,69,45,.09),var(--s1) 52%)}
.half.light::after,.half.dark::after{background:radial-gradient(circle,rgba(238,69,45,.1),transparent 70%)}
.half-kicker{color:var(--dim);font-family:var(--mono)}
.ticks li{border-top-color:var(--hair)}
.ticks .ic{color:var(--accent-2)}
.half-foot{border-top-color:var(--hair);color:var(--dim)}
.join{background:var(--accent);color:#0A0B0D;box-shadow:0 0 0 10px var(--bg),0 20px 40px -14px rgba(238,69,45,.7)}
.equals{background:linear-gradient(100deg,rgba(238,69,45,.14),rgba(255,255,255,.03));
  box-shadow:inset 0 0 0 1px var(--accent-line)}
.equals-copy b{color:var(--fg)}
.equals-copy span{color:var(--muted)}
.equals .ibox{background:var(--accent);color:#0A0B0D;box-shadow:none}

/* ---------------------------------------------------------------- steps */
.track{background:var(--hair-2)}
.step{border-bottom-color:var(--hair)}
.step::before{background:var(--bg);box-shadow:inset 0 0 0 2px var(--hair-2)}
.step.on::before,html:not(.motion) .step::before{background:var(--accent);box-shadow:0 0 0 5px rgba(238,69,45,.16)}
.step-n{color:var(--accent-2);font-family:var(--mono)}
.stack-n{background:rgba(255,255,255,.05);color:var(--muted);font-family:var(--mono);box-shadow:inset 0 0 0 1px var(--hair)}
.stack-card.on .stack-n{background:var(--accent);color:#0A0B0D;box-shadow:none}
html.pro .stack-card{box-shadow:inset 0 0 0 1px var(--hair-2),0 40px 80px -40px #000}

/* ---------------------------------------------------------------- doors */
.door::after{background:linear-gradient(180deg,rgba(10,11,13,.3) 0%,rgba(10,11,13,.78) 48%,rgba(10,11,13,.98) 100%)}
.door-media img{filter:saturate(.72) contrast(1.08) brightness(.76)}
.door{box-shadow:inset 0 0 0 1px var(--hair-2)}
.door-tag{background:rgba(10,11,13,.6);box-shadow:inset 0 0 0 1px var(--hair-2);color:var(--fg)}
.door-pain{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--hair);color:var(--muted)}
.door li{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--hair)}
.doors-note{background:var(--s1);box-shadow:inset 0 0 0 1px var(--hair);color:var(--muted)}
.doors-note .ic{color:var(--accent-2)}

/* ---------------------------------------------------------------- proof */
.case-head b{color:var(--fg)}
.case-head span{color:var(--dim)}
.case-head .ibox{background:var(--accent);color:#0A0B0D;box-shadow:none;display:inline-flex;align-items:center;justify-content:center}
.case-head .ibox .ic{stroke:#0A0B0D;display:block;margin:auto}
.case-tag{background:rgba(255,255,255,.05);color:var(--dim);box-shadow:inset 0 0 0 1px var(--hair);font-family:var(--mono);font-size:11.5px}
.case-out{border-top-color:var(--hair)}
.case-metric{background:rgba(238,69,45,.12);box-shadow:inset 0 0 0 1px var(--accent-line);display:inline-flex;align-items:center;justify-content:center}
.case-metric b{color:var(--fg)}
.case-metric .ic{color:var(--accent);stroke:var(--accent);display:block;margin:0}
.killed{background:linear-gradient(100deg,rgba(238,69,45,.12),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px var(--accent-line)}
.killed-mark{background:var(--accent);color:#0A0B0D;display:inline-flex;align-items:center;justify-content:center}
.killed-mark .ic{stroke:#0A0B0D;display:block;margin:auto}
.killed h3{color:var(--fg)}
.killed p{color:var(--muted)}
.figures{border-top-color:var(--hair)}
.figures-head h3{color:var(--fg)}
.figures-head p{color:var(--dim)}
.fig b{color:var(--fg)}
.fig-n{color:var(--accent);opacity:.9}
.fig-n::after{background:var(--accent)}

/* ---------------------------------------------------------------- faq */
.faq,.qa{border-color:var(--hair)}
.q{color:var(--fg)}
.q .pm{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--hair)}
.q .pm::before,.q .pm::after{background:var(--fg)}
.q:hover .pm{background:var(--accent-soft)}
.qa.open .pm{background:var(--accent);box-shadow:none}
.qa.open .pm::before{background:#0A0B0D}
.a>div{color:var(--muted)}

/* ---------------------------------------------------------------- forms */
.formcard,.closer-form{background:var(--s1);box-shadow:inset 0 0 0 1px var(--hair-2)}
.formcard .h-2,.closer-form .h-3{color:var(--fg)}
.field input,.field textarea{background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px var(--hair-2);color:var(--fg)}
.field input:focus,.field textarea:focus{box-shadow:inset 0 0 0 1px var(--accent),0 0 0 4px rgba(238,69,45,.14);background:rgba(255,255,255,.05)}
.field label{color:var(--dim)}
.consent{color:var(--dim)}
.consent input{box-shadow:inset 0 0 0 1px var(--hair-3)}
.consent input:checked{background:var(--accent)}
.consent input:checked::after{border-color:#0A0B0D}
.consent a{color:var(--accent-2)}
.formfoot{color:var(--dim)}
.formmsg{background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--hair);color:var(--fg)}
.formmsg a{color:var(--accent-2)}
.rail{box-shadow:inset 0 0 0 1px var(--hair);background:rgba(255,255,255,.02)}
.rail:hover{box-shadow:inset 0 0 0 1px rgba(238,69,45,.35);background:rgba(255,255,255,.04)}
.rail .ibox{background:rgba(238,69,45,.12);color:var(--accent);border:1px solid rgba(238,69,45,.25);display:grid;place-items:center;line-height:0;font-size:0}
.rail .ibox .ic{stroke:var(--accent);display:block;margin:0 auto}
.rail b{color:var(--dim)}
.rail span{color:var(--fg)}
.rail .ic.go{color:var(--dim)}
.rail:hover .ic.go{color:var(--accent)}

/* ---------------------------------------------------------------- cta / closer */
.cta,.closer{background:linear-gradient(150deg,var(--s2),var(--s1));box-shadow:inset 0 0 0 1px var(--hair-2)}
.cta::before,.closer::before{background:radial-gradient(640px 340px at 50% 100%,rgba(238,69,45,.22),transparent 70%)}
.cta-copy .h-1,.closer .h-1{color:var(--fg)}
.cta-copy .lede,.closer .lede{color:var(--muted)}
.cta-media img{filter:saturate(.7) brightness(.6)}
.cta-media::before{background:linear-gradient(90deg,var(--s1) 0%,rgba(18,20,23,.3) 60%,transparent 100%)}
.closer-list b{color:var(--fg)}
.closer-list span{color:var(--dim)}
.closer-list .ibox{background:rgba(255,255,255,.05)}
.closer-contact{border-top-color:var(--hair)}
.closer-contact a{color:var(--fg)}

/* ---------------------------------------------------------------- timeline / process cards */
.tl-sec{background:transparent}
.tl-head-row .eyebrow{margin-bottom:12px}
.tl-card{background:var(--s1);box-shadow:inset 0 0 0 1px var(--hair-2)}
.tl-card:hover{background:var(--s2);box-shadow:inset 0 0 0 1px rgba(238,69,45,.4),0 16px 40px rgba(0,0,0,.45)}
.tl-title{color:var(--fg)}
.tl-desc{color:var(--muted)}
.tl-dot{background:rgba(238,69,45,.12);color:var(--accent);border-color:rgba(238,69,45,.28);box-shadow:0 0 18px rgba(238,69,45,.16);display:grid;place-items:center;line-height:0;font-size:0}
.tl-dot .ic{stroke:var(--accent);display:block;margin:0 auto}
.tl-badge{background:rgba(238,69,45,.14);color:var(--accent);box-shadow:inset 0 0 0 1px rgba(238,69,45,.3)}
.tl-step-label{color:var(--dim)}
.tl-pill{color:var(--dim)}
.tl-pill .ic{color:var(--accent)}
.tl-pill-row{border-top-color:var(--hair)}
.tl-pipeline-node{background:var(--s2);border-color:var(--accent);box-shadow:0 0 14px rgba(238,69,45,.35)}
.node-num{color:var(--accent)}
.tl-pipeline-line{background:linear-gradient(90deg,var(--accent),rgba(238,69,45,.3) 50%,var(--accent))}
.fun{background:linear-gradient(150deg,var(--s2),var(--s1));box-shadow:inset 0 0 0 1px var(--hair-2)}
.fun h2{color:var(--fg)}
.fun p{color:var(--muted)}
.fun-ticker{border-top-color:var(--hair)}
.fun-track span{color:var(--dim)}

/* ---------------------------------------------------------------- about bits */
.letter p{color:var(--muted)}
.letter p:first-child{color:var(--fg)}
.sign{border-top-color:var(--hair)}
.sign b{color:var(--fg)}
.sign span{color:var(--dim)}
.mono-mark{background:var(--accent);color:#0A0B0D}
.flex-core{background:linear-gradient(165deg,rgba(238,69,45,.1),var(--s1) 55%);box-shadow:inset 0 0 0 1px var(--hair)}
.flex-core::before{background:radial-gradient(ellipse at 50% 30%,rgba(238,69,45,.1),transparent 65%)}
.flex-core p{color:var(--muted)}
.flex-label{color:var(--accent-2);font-family:var(--mono);background:rgba(238,69,45,.1);border-color:rgba(238,69,45,.18)}
.fr{background:rgba(255,255,255,.05);color:var(--fg);box-shadow:inset 0 0 0 1px var(--hair);display:inline-flex;align-items:center;justify-content:center}
.fr .ic{stroke:var(--fg);display:block;margin:auto}
.fr-mid{background:var(--accent);color:#0A0B0D;display:inline-flex;align-items:center;justify-content:center}
.fr-mid .ic{stroke:#0A0B0D;display:block;margin:auto}
.layer,.layer.l2,.layer.l3{background:var(--s1)}
.layer:hover{box-shadow:inset 0 0 0 1px var(--hair-3),0 28px 56px -30px #000}
.layer.l3{background:linear-gradient(165deg,rgba(238,69,45,.1),var(--s1) 55%)}
.layer.l3:hover{box-shadow:inset 0 0 0 1px var(--accent-line),0 28px 56px -24px rgba(238,69,45,.25)}
.layer::after{background:radial-gradient(circle,rgba(238,69,45,.09),transparent 70%)}
.layer-n{color:var(--accent-2);font-family:var(--mono)}
.layer .ibox,.layer.l3 .ibox{background:rgba(238,69,45,.14);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;box-shadow:none}
.layer .ibox .ic,.layer.l3 .ibox .ic{stroke:var(--accent);display:block;margin:auto}
.layers-line path{stroke:var(--accent-line)}
.vs-col.old{background:rgba(255,255,255,.02);box-shadow:inset 0 0 0 1px var(--hair)}
.vs-col.new{background:linear-gradient(160deg,rgba(238,69,45,.1),var(--s1) 55%);box-shadow:inset 0 0 0 1px var(--accent-line);color:var(--fg)}
.sec.navy .vs-col.new .h-3,.old .h-3{color:var(--fg)}
.vs-label{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.old .vs-label{background:rgba(255,255,255,.05);color:var(--dim)}
.new .vs-label{background:rgba(238,69,45,.16);color:var(--accent-2)}
.vs-row{border-top-color:var(--hair)}
.old .vs-row b{color:var(--muted)}
.new .vs-row b{color:var(--fg)}
.old .vs-row p,.new .vs-row p{color:var(--dim)}
.old .vs-row .ic{color:var(--dim)}
.new .vs-row .ic{color:var(--accent-2)}
.vs-badge{background:var(--s3);color:var(--fg);box-shadow:0 0 0 6px var(--bg),inset 0 0 0 1px var(--hair-2);font-family:var(--mono)}
.vs-foot{color:var(--dim)}

/* ---------------------------------------------------------------- websites page art */
.plan-art{background:linear-gradient(165deg,var(--s2),var(--s1));box-shadow:inset 0 0 0 1px var(--hair)}
.art-phone{background:var(--s3);box-shadow:0 0 0 4px rgba(255,255,255,.1),0 30px 50px -22px #000}
.art-phone .bar{background:rgba(255,255,255,.1)}
.art-side{background:var(--s2);color:var(--fg);box-shadow:inset 0 0 0 1px var(--hair-2),0 20px 36px -20px #000}
.art-map{background:
  linear-gradient(0deg,transparent 48%,rgba(255,255,255,.07) 48%,rgba(255,255,255,.07) 52%,transparent 52%),
  linear-gradient(90deg,transparent 30%,rgba(255,255,255,.07) 30%,rgba(255,255,255,.07) 33%,transparent 33%),
  linear-gradient(90deg,transparent 72%,rgba(255,255,255,.07) 72%,rgba(255,255,255,.07) 74.5%,transparent 74.5%),
  var(--s2)}
.pin{background:rgba(255,255,255,.18)}
.pin::after{background:var(--s1)}
.pin.you{background:var(--accent)}
.you-label{background:var(--fg);color:var(--bg)}
.you-label .ic{color:var(--accent)}
.promise{background:rgba(238,69,45,.09);box-shadow:inset 0 0 0 1px var(--accent-line);color:var(--muted)}
.promise b{color:var(--fg)}
.plan.pick{box-shadow:inset 0 0 0 1px var(--accent),0 40px 80px -40px rgba(238,69,45,.4)}
.plan-flag{background:rgba(238,69,45,.14);color:var(--accent-2);box-shadow:inset 0 0 0 1px var(--accent-line)}
.plan.pick .plan-flag{background:var(--accent);color:#0A0B0D;box-shadow:none}
.plan-kicker{color:var(--dim);font-family:var(--mono)}
.pain::before{background:var(--accent);opacity:.7}
.crumbs,.crumbs a{color:var(--dim)}
.crumbs a:hover,.crumbs span{color:var(--fg)}

/* bento */
.bn{background:var(--s1);box-shadow:inset 0 0 0 1px var(--hair)}
.bn-dark{background:var(--s1)}
.bn-accent{background:var(--s1);box-shadow:inset 0 0 0 1px var(--hair)}
.bn-accent b{color:var(--fg)}
.bn-accent p{color:var(--muted)}
.bn-accent .bn-num{color:var(--fg);font-family:var(--mono);font-size:clamp(32px,3.5vw,46px);font-weight:700;line-height:1;margin:12px 0 6px}
.bn .ibox,.bn-dark .ibox,.bn-accent .ibox{background:rgba(238,69,45,.14);color:var(--accent);box-shadow:none;display:inline-flex;align-items:center;justify-content:center}
.bn .ibox .ic,.bn-dark .ibox .ic,.bn-accent .ibox .ic{stroke:var(--accent);display:block;margin:auto}
.bn-num{color:var(--fg);font-family:var(--mono);letter-spacing:-.02em}
.sec.navy .bn{background:var(--s1);box-shadow:inset 0 0 0 1px var(--hair)}
.sec.navy .bn b{color:var(--fg)}
.sec.navy .bn p{color:var(--muted)}

/* ---------------------------------------------------------------- 404 */
.nf-track{stroke:var(--hair-2)}
.nf-hole{fill:var(--bg)}
.nf-label{background:var(--s2);color:var(--fg);box-shadow:inset 0 0 0 1px var(--hair-2)}
.nf-404{color:var(--fg);opacity:.05}
.nf-links a{background:var(--s1);color:var(--muted);box-shadow:inset 0 0 0 1px var(--hair)}
.nf-links a:hover{background:var(--fg);color:var(--bg)}
.nf-links{border-top-color:var(--hair)}

/* ---------------------------------------------------------------- marquee / rails */
.mq{background:transparent;border-color:var(--hair)}
.mq-track span{color:var(--fg)}
.mq-track .ghost{color:transparent;-webkit-text-stroke:1.4px rgba(185,191,198,.45)}
.rail-idx a{background:rgba(255,255,255,.16)}
.rail-idx a.on,.rail-idx a:hover{background:var(--accent)}
.rail-idx a::after{background:var(--s3);color:var(--fg);box-shadow:inset 0 0 0 1px var(--hair-2)}
.sprog{background:linear-gradient(90deg,var(--accent),var(--accent-2))}

/* ---------------------------------------------------------------- footer */
.foot{background:transparent;border-top:1px solid var(--hair);color:var(--muted)}
.foot .foot-h{color:var(--fg)}
.foot a:hover{color:var(--accent-2)}
.foot-bottom{border-top-color:var(--hair);color:var(--dim)}
.mbar{background:rgba(18,20,23,.92);box-shadow:inset 0 0 0 1px var(--hair-2),0 20px 40px -16px #000}
.mbar .btn-call{color:var(--fg);box-shadow:inset 0 0 0 1px var(--hair-2)}

/* ---------------------------------------------------------------- loader / cursor */
.loader{background:var(--bg)}
.loader-bar{background:rgba(255,255,255,.1)}
.loader-pct{color:var(--dim);font-family:var(--mono)}
.cur{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
html.cur-dark .cur{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
html.cur-hot .cur{background:rgba(238,69,45,.14);box-shadow:inset 0 0 0 1px var(--accent-line)}
.cur-label{color:var(--fg)}

/* ---------------------------------------------------------------- misc */
.skip{background:var(--fg);color:var(--bg)}
.ba{background:var(--s1);box-shadow:inset 0 0 0 1px var(--hair)}
.ba thead th{background:rgba(255,255,255,.03);border-bottom-color:var(--hair-2);color:var(--fg)}
.ba th,.ba td{border-bottom-color:var(--hair)}
.ba td:first-child{color:var(--dim)}
.ba td:last-child{color:var(--fg)}
.pull{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line);color:var(--fg)}
.svc-bar{background:var(--hair-2)}
.svc-bar i{background:var(--accent)}
.svc-legend{color:var(--dim)}
.svc-legend i{background:var(--hair-3)}
.svc-legend i.n{background:var(--accent)}
.svc-card .tag{background:rgba(255,255,255,.05);color:var(--dim);box-shadow:inset 0 0 0 1px var(--hair);
  font-family:var(--mono);font-size:10.5px}
.svc-card.sys .tag{background:rgba(238,69,45,.12);color:var(--accent-2);box-shadow:inset 0 0 0 1px var(--accent-line)}
.svc-card .ibox,.svc-card.sys .ibox{background:rgba(255,255,255,.05);color:var(--accent-2)}
.svc-edge{background:var(--accent)}
.svc-card.sys .svc-edge{background:var(--accent-2)}
.svc-hint{color:var(--dim)}
.flex-row:hover{transform:none}
.flex-row .ibox{background:rgba(238,69,45,.14);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;box-shadow:none}
.flex-row .ibox .ic{stroke:var(--accent);display:block;margin:auto}
.crosslink .ibox{background:rgba(238,69,45,.14);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;box-shadow:none}
.crosslink .ibox .ic{stroke:var(--accent);display:block;margin:auto}
.crosslink:hover{box-shadow:inset 0 0 0 1px var(--hair-3),0 12px 32px rgba(0,0,0,.3)}
.crosslink .go{color:var(--dim)}
.crosslink:hover .go{color:var(--accent)}
.pill{background:rgba(255,255,255,.05);color:var(--muted);box-shadow:inset 0 0 0 1px var(--hair);display:inline-flex;align-items:center;justify-content:center}
.pill .ic{color:var(--accent);stroke:var(--accent);display:block;margin:0}

/* specificity fixes against site.css/pro.css light assumptions */
.svc-card,.svc-card.sys,.svc-card.dem{background:var(--s1);color:var(--fg);
  box-shadow:inset 0 0 0 1px var(--hair)}
.svc-card h3,.svc-card.sys h3{color:var(--fg)}
.svc-card p,.svc-card.sys p{color:var(--muted)}
.svc-card:hover,.svc-card.sys:hover{box-shadow:inset 0 0 0 1px var(--hair-3),0 24px 50px -30px #000}
.plan,.plan.pick{background:var(--s1)}
.leak{background:transparent}
.leaks{background:var(--s1)}
.half.light,.half.dark,.vs-col.new,.flex-core,.layer.l3{color:var(--fg)}
.flex-row,.trust,.val,.fact,.check,.crosslink,.pain,.solve,.bn,.value-card{color:var(--fg)}
.ba thead th:last-child{color:var(--accent-2)}
.stat-card{background:var(--s1)}
html.pro .stack-card,.stack-card{background:var(--s1);color:var(--fg);
  box-shadow:inset 0 0 0 1px var(--hair-2),0 40px 80px -40px #000}
.stack-card h3{color:var(--fg)}
.stack-card p{color:var(--muted)}
@media (max-width:640px){
  .h-display .ln{display:inline}
  .h-display .ln > span{display:inline}
}