/* ============================================================
   BARLO DIGITAL — world.css · the waterworks family layer (2026-10-03)
   Loads LAST on every page: after main.css and after any page <style>,
   so it can retune shared tokens and chrome without touching a single
   byte inside <main>. Black concrete, still water, one volt light.
   Hard edges, hairlines, tabular figures, one accent.

   Three treatments read this file:
     body.home   the homepage flight over the file (see css/home.css)
     body.kit    landers and samples: a world film behind the document
     everything else: chrome only, with a still from the world as a header
   ============================================================ */

:root{
  --ink:#07090F;
  --panel:rgba(11,15,23,.9);
  --panel-2:#101722;
  --plate:rgba(8,11,18,.86);
  --volt:#C6F135; --volt-dim:rgba(198,241,53,.12);
  --text:#F4F2EC;
  /* lifted from #8A93A6: secondary copy now also sits over film, and the
     brightest frame under a line is what the contrast check measures */
  --mut:#A9B1C0;
  --line:rgba(244,242,236,.11); --line-strong:rgba(244,242,236,.22);
  --line-btn:rgba(244,242,236,.42);
  --rad:3px; --rad-sm:2px;
  --cut:-22deg;               /* the incision in the mark, rising left to right */

  /* engine tokens, so scrollcraft.css reads the brand */
  --sc-canvas:#07090F; --sc-surface:#0B0F17; --sc-ink:#F4F2EC; --sc-ink-soft:#A9B1C0;
  --sc-accent:#C6F135; --sc-accent-ink:#07090F;
  --sc-font-display:"Space Grotesk","Space Grotesk Fallback",system-ui,sans-serif;
  --sc-font-text:"Inter","Inter Fallback",system-ui,sans-serif;
}

/* the old ambient layer (starfield, cursor glow, film grain) is retired: the
   world carries its own grain and light */
#stars,#cursor-glow,#particles,#bd-stars,#bd-glow{display:none!important}
body::after{display:none}
body{background:var(--ink)}

/* ---------- type ---------- */
h1,h2,h3,.display{letter-spacing:-.025em}
h3{letter-spacing:-.012em}
.kicker{letter-spacing:.2em;font-weight:600}
.kicker::before{width:26px;height:2px;transform:rotate(var(--cut));transform-origin:50% 50%;flex:none}
.metric b,.stat-card b,.case-nums b,.wedge .price,.cta-panel .price,.price-line,.sw-num b,
.step-day,.ix,.num,.from{font-variant-numeric:tabular-nums}

/* ---------- buttons: cut, not rounded ---------- */
.btn{border-radius:var(--rad-sm);letter-spacing:.005em;font-weight:700}
.btn:focus-visible,.logo:focus-visible{border-radius:var(--rad-sm)}
.btn-ghost{background:rgba(7,9,15,.38)}
.btn-volt{box-shadow:inset 0 -2px 0 rgba(7,9,15,.18)}
.skip{border-radius:var(--rad-sm)}

/* pills become hard tags */
.badge,.credit,.wedge .credit,.step-day,.wedge .flag,.pay-opt-b,.cap-box,.verify,.faq details,
.cta-panel,.answer-capsule,.field-note .answer-capsule{border-radius:var(--rad-sm)}
.badge{border-radius:var(--rad-sm)}
.rail li::before{width:9px;height:3px;border-radius:0;transform:rotate(var(--cut))}
.checklist li::before{border-radius:var(--rad-sm)}

/* ---------- nav ---------- */
nav{background:rgba(7,9,15,.82);border-bottom:1px solid var(--line)}
.nav-inner{flex-wrap:nowrap;padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
.nav-links{flex-wrap:nowrap}
nav .btn{white-space:nowrap}
.logo{letter-spacing:.04em}
.logo .mark{border-radius:7px}
.logo em{color:var(--volt);font-weight:500}
.nav-links a:not(.btn)::after{height:1px;bottom:-7px}
.nav-sit-panel{border-radius:var(--rad);background:rgba(7,9,15,.97);border-color:var(--line-strong)}
.nav-sit-panel a{border-radius:var(--rad-sm)}
@media(max-width:1160px){.nav-links{gap:16px}.nav-links a:not(.btn){font-size:.85rem}.nav-links .btn{font-size:.82rem;padding:9px 14px}}
@media(max-width:700px){.nav-inner{gap:12px;padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}.nav-links{gap:10px}.nav-links .btn{font-size:.78rem;padding:9px 12px}}
@media(max-width:414px){.logo{font-size:.95rem;gap:7px}.logo .mark{width:25px;height:25px;border-radius:6px}.nav-links .btn{font-size:.72rem;padding:8px 10px}.nav-links{gap:8px}}
@media(max-width:352px){.logo{font-size:.8rem;gap:6px}.logo .mark{width:22px;height:22px}.nav-links .btn{font-size:.66rem;padding:7px 8px}.nav-links{gap:6px}.nav-inner{gap:8px}}
/* Subpage nav between phone and desktop (561-1000px): the static row carried every
   text link and pushed the primary CTA off the right edge (measured on the live site
   2026-10-03: 38-134px over at 580 and 761, "Claim my site for $497" clipped). The text
   links stay in the HTML and in the Menu; the CTA is not optional. main.css already
   drops them at 560 and below; this starts at 1000. */
@media(max-width:1000px){
  .nav-inner:not(:has(#nav-burger)) .nav-links>a:not(.btn){display:none}
}
/* small phones: the longest lander CTAs (competitor-ads) pushed the row a few px wide
   even before the rebuild; tighter tracking, gaps and padding bring every row inside */
@media(max-width:400px){
  .logo{letter-spacing:0;gap:6px}
  .nav-inner{gap:8px;padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
  .nav-links{gap:6px}
  .nav-links .btn{padding:8px 8px;letter-spacing:0}
}
/* main.css sizes the subpage nav buttons with .nav-inner:not(:has(#nav-burger)) .nav-links .btn,
   and :has(#id) carries ID weight, so a plain .nav-links .btn rule (the old ambient.js
   ones included) never reached a subpage. Same selector here, later in the cascade. */
@media(max-width:420px){.nav-inner:not(:has(#nav-burger)) .nav-links .btn{font-size:.78rem;padding:8px 10px;letter-spacing:0}}
@media(max-width:370px){.nav-inner:not(:has(#nav-burger)) .nav-links .btn{font-size:.72rem;padding:8px 8px}.logo .mark{width:23px;height:23px}}

/* ---------- the site map (injected by js/site.js, one tap from any page) ---------- */
#bd-menu-btn{cursor:pointer}
#bd-menu{position:fixed;top:68px;right:16px;z-index:1001;width:min(92vw,660px);
  background:rgba(7,9,15,.97);border:1px solid var(--line-strong);border-top:2px solid var(--volt);border-radius:var(--rad);
  padding:20px 24px 22px;box-shadow:0 24px 80px rgba(0,0,0,.6);display:none;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px}
#bd-menu.open{display:grid}
#bd-menu .bd-menu-mark{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line);
  font-family:var(--font-d);font-weight:700;font-size:.95rem;letter-spacing:.04em;color:var(--text)}
#bd-menu .bd-menu-mark img{width:24px;height:24px;border-radius:6px}
#bd-menu .bd-menu-mark em{font-style:normal;color:var(--volt);font-weight:500}
#bd-menu h4{font-family:var(--font-d);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--volt);margin:0 0 8px;font-weight:600}
#bd-menu a{display:block;color:var(--mut);padding:5px 0;font-size:.92rem;text-decoration:none}
#bd-menu a:hover{color:var(--text)}
@media(max-width:560px){#bd-menu{top:62px;right:8px;left:8px;width:auto}}
@media (pointer:coarse),(max-width:720px){#bd-menu a{min-height:44px;display:flex;align-items:center;padding:0}}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);background:rgba(7,9,15,.9);position:relative;z-index:2}
footer .foot-note{color:var(--mut)}
.logo-lockup img{height:40px}

/* ---------- cards and plates: hairline, hard corner ---------- */
.stat-card,.deliv-card,.step,.story,.case,.wedge,.svc-card,.tsm-card,.cap-box,.verify,.cta-panel,
.faq details,.offer-art,.founder-img,.metrics,.partners-strip,.disclose,.cal-embed.on{border-radius:var(--rad)}
.case-shot .chrome i{border-radius:1px}

/* ---------- receipts: real screenshots, seated in the night (redesign round) ----------
   Dimmed until pointed at, so a white ad-platform table does not glare out of the dark
   page; every one opens at full size (js/site.js adds the button and the viewer). */
.case-shot{background:#05070B}
.case-shot .shot-clip{position:relative}
.case-shot .shot-clip::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,7,11,0),rgba(5,7,11,.5))}
.case-shot img{filter:brightness(.8) contrast(1.04) saturate(.9);transition:filter .35s ease,transform .5s}
.case:hover .case-shot img,.case-shot:focus-within img{filter:none}
.case-nums div:first-child b{color:var(--volt)}
.shot-zoom{position:absolute;right:10px;bottom:10px;z-index:2;display:inline-flex;align-items:center;gap:7px;min-height:34px;
  padding:7px 11px;font:600 .7rem/1 var(--font-d);letter-spacing:.1em;text-transform:uppercase;color:var(--text);
  background:rgba(7,9,15,.88);border:1px solid var(--line-strong);border-radius:var(--rad-sm);cursor:zoom-in}
.shot-zoom svg{width:13px;height:13px;flex:none}
.shot-zoom:hover{border-color:var(--volt);color:var(--volt)}
.shot-zoom:focus-visible{outline:2px solid var(--volt);outline-offset:2px}
@media (pointer:coarse){.shot-zoom{min-height:40px}}
.case-shot img{cursor:zoom-in}
dialog.shot-view{width:min(1400px,96vw);max-width:96vw;max-height:92vh;padding:0;overflow:auto;color:var(--text);
  background:#05070B;border:1px solid var(--line-strong);border-top:2px solid var(--volt);border-radius:var(--rad);
  box-shadow:0 40px 120px rgba(0,0,0,.8)}
dialog.shot-view::backdrop{background:rgba(3,4,8,.86)}
dialog.shot-view .sv-bar{position:sticky;top:0;left:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 12px 10px 16px;background:rgba(7,9,15,.97);border-bottom:1px solid var(--line);font-size:.82rem;color:var(--mut)}
dialog.shot-view .sv-cap{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
dialog.shot-view .sv-x{flex:none;min-height:40px;padding:8px 14px;font:600 .78rem/1 var(--font-d);letter-spacing:.06em;color:var(--text);
  background:none;border:1px solid var(--line-strong);border-radius:var(--rad-sm);cursor:pointer}
dialog.shot-view .sv-x:hover{border-color:var(--volt);color:var(--volt)}
dialog.shot-view img{display:block;width:100%;height:auto}
@media(max-width:720px){dialog.shot-view img{width:auto;max-width:none;min-width:100%}}
html.sv-open{overflow:hidden}

/* ---------- FAQ open state (was injected by ambient.js) ---------- */
.faq details p{animation:none}
@media(prefers-reduced-motion:no-preference){.faq details[open] p{animation:bdfade .45s ease}}
@keyframes bdfade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.bdrv{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}
.bdrv.bdon{opacity:1;transform:none}

/* =============================================================
   THE WORLD (homepage and kit pages)
   One engine worldflight stage, fixed behind the whole document.
   The mode root is a zero-height block at the top of the page; the
   document after it is the track. js/flight.js sizes the legs to it.
   ============================================================= */
.wf{position:relative;z-index:0;height:0}
.wf .sc-world{position:fixed;inset:0;z-index:0;overflow:clip;background:var(--ink)}
.wf .sc-world__seg{position:absolute;inset:0;opacity:0;will-change:opacity}
.wf .sc-world__seg:first-child{opacity:1}           /* the frame before the engine mounts */
.wf .sc-world__seg > picture{position:absolute;inset:0;display:block}
.wf .sc-world__seg > picture > img,
.wf .sc-world__seg > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.wf .sc-world__seg > video{z-index:1;opacity:0;transition:opacity .38s cubic-bezier(.23,1,.32,1)}
.wf .sc-world__seg > video.sc-has-clip{opacity:1}
.wf .sc-world__seg.sc-has-clip > picture > img{opacity:0;transition:opacity .42s cubic-bezier(.23,1,.32,1)}
/* the track is the document itself; the engine still writes the spacer a
   height, so it is taken out of flow and held at zero */
.wf [data-sc-spacer]{position:absolute;top:0;left:0;width:1px;height:0!important;overflow:hidden;visibility:hidden;pointer-events:none}
.wf-scrim{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:rgba(7,9,15,var(--scrim,.5));transition:background-color .45s ease}
.wf-vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 95% at 50% 42%,transparent 38%,rgba(7,9,15,.55) 100%)}
body.home > :not(.wf):not(nav):not(.skip):not(script):not(noscript),
body.kit > :not(.wf):not(nav):not(.skip):not(script):not(noscript):not(.sticky-cta){position:relative;z-index:2}
/* the landers' phone CTA bar keeps its own position:fixed (the rule above outranked it from
   the cutover until 2026-10-04, which left the bar at the bottom of the page instead of on screen) */
@media(prefers-reduced-motion:reduce){.wf .sc-world__poster{transform:none!important}}

/* =============================================================
   KIT: landers and samples. One reading column on the left, the
   world visible on the right, the same on every kit page.
   ============================================================= */
body.kit main{background:transparent}
body.kit section,body.kit .page-head,body.kit .sec-glow,body.kit header{background:transparent!important}
body.kit .sec-glow::before{display:none}
/* the reading column ends at 50% + 184px on a wide screen (centred 1200 wrap, 760px
   column) and at 784px on a narrower one; the scrim stays dark past that edge and only
   then opens onto the film (measured: lines reaching the old 58% stop fell under AA) */
body.kit .wf-scrim{background:
  linear-gradient(90deg,rgba(7,9,15,.95) 0,rgba(7,9,15,.93) max(calc(50% + 250px),850px),rgba(7,9,15,.45) max(calc(50% + 420px),1000px),rgba(7,9,15,.14) max(calc(50% + 620px),1180px),rgba(7,9,15,.12) 100%)}
body.kit .page-head h1{text-shadow:0 2px 30px rgba(0,0,0,.5)}
body.kit .art-band img{border-radius:var(--rad);border-color:var(--line-strong)}
/* cards over film read as plates */
body.kit .cta-panel,body.kit .cap-box,body.kit .verify,body.kit .faq details,
body.kit .scope,body.kit .outcomes{background-color:var(--plate)}
body.kit .outcomes{padding:4px 18px;border:1px solid var(--line);border-radius:var(--rad)}
body.kit .scope{padding:8px 20px 18px;border:1px solid var(--line);border-radius:var(--rad)}
/* ---------- the kit's first screen: the title card (redesign round) ----------
   The hero copy and the page's own art share the first screen over the film. The art is
   light on black with the black made transparent (tools/glow.py), so it floats in the
   world instead of sitting in a box; a soft mask dissolves its edges. Markup unchanged:
   the two .wrap blocks of .page-head become the two columns of one grid. */
body.kit .page-head:has(> .art-band){position:relative}
body.kit .art-band img{border:0;border-radius:0;background:none;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 64%,transparent 100%);
          mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 64%,transparent 100%)}

/* ---------- the hologram projector (js/holo.js) ----------
   A WebGL plane drawn exactly over the art: the art's own loop, its black keyed out,
   turned in perspective toward the pointer. The still underneath is the fallback and
   hands over with a crossfade once the first frame is drawn. */
.holo-host{position:relative}
.holo-cv{position:absolute;display:block;pointer-events:none;opacity:0;transition:opacity .7s cubic-bezier(.23,1,.32,1)}
.holo-host > img{transition:opacity .7s cubic-bezier(.23,1,.32,1)}
.holo-live > .holo-cv{opacity:1}
.holo-live > img{opacity:0!important}
body.kit .page-head h1{font-size:clamp(2.1rem,4.4vw,3.5rem);line-height:1.04;letter-spacing:-.032em}
body.kit .page-head .lead{color:#C9CFDA}
/* a dark pool behind the copy: the scrim opens on the first screen (js/flight.js sets
   --kit-top), and the words keep their contrast over the brighter film */
body.kit .page-head > .wrap:first-child{position:relative}
body.kit .page-head > .wrap:first-child::before{content:"";position:absolute;inset:-32px 0 -24px 0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 74% 76% at 40% 54%,rgba(7,9,15,.9) 0%,rgba(7,9,15,.7) 58%,rgba(7,9,15,0) 100%)}
@media(min-width:1100px){
  body.kit .page-head:has(> .art-band){display:grid;align-items:center;min-height:calc(100svh - 76px);padding:24px 0 48px;
    grid-template-columns:minmax(24px,1fr) minmax(0,600px) minmax(0,560px) minmax(24px,1fr);column-gap:clamp(24px,3vw,48px)}
  body.kit .page-head:has(> .art-band) > .wrap:first-child{grid-column:2;grid-row:1;max-width:none;margin:0;padding:0}
  /* the copy has a gutter column on its left, so the pool may spread there; below 1100px the
     copy spans the screen and the pool must stay inside it (it widened the phone layout 40px) */
  body.kit .page-head:has(> .art-band) > .wrap:first-child::before{inset:-48px -40px -40px -40px}
  body.kit .page-head > .art-band{grid-column:3;grid-row:1;max-width:none;margin:0;padding:0}
  /* anything after the two (three landers carry a stat band in the head) gets its own row
     across both columns, under the title card */
  body.kit .page-head:has(> .art-band) > :nth-child(n+3){grid-column:2 / 4;grid-row:auto;max-width:none;margin:8px 0 0;padding:0}
  /* the art's own frame is mostly dark ground, so it is drawn larger than its column;
     the oval mask keeps the overflow invisible */
  body.kit .page-head > .art-band img{width:132%;max-width:none;margin-left:-16%}
  body.kit .page-head .lead,body.kit .page-head .proof-line{max-width:600px}
  /* two columns: the headline steps down a rung so it keeps to two or three lines */
  body.kit .page-head:has(> .art-band) h1{font-size:clamp(2rem,2.7vw,2.55rem)}
}
@media(max-width:1099px){
  body.kit .art-band{padding-top:18px}
  body.kit .art-band img{width:112%;max-width:none;margin-left:-6%}
}
/* the scrim opens on the first screen and closes over the reading (js/flight.js) */
body.kit .wf-scrim{opacity:calc(1 - var(--kit-top,0) * .28);transition:opacity .2s linear}

/* ---------- kit type and plates ---------- */
body.kit .h-mini{font-size:clamp(1.45rem,2.5vw,2rem);line-height:1.12;letter-spacing:-.025em;margin:64px 0 16px}
body.kit .cta-panel{position:relative;border:1px solid rgba(198,241,53,.32);border-top:2px solid var(--volt);background:rgba(8,11,18,.94);
  box-shadow:0 -1px 0 rgba(198,241,53,.2),0 30px 70px -36px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.04)}
body.kit .cta-panel::before{content:"";position:absolute;left:0;right:0;top:-2px;height:42px;pointer-events:none;
  background:linear-gradient(180deg,rgba(198,241,53,.10),rgba(198,241,53,0))}
body.kit .cta-panel .price{font-size:clamp(1.4rem,2.6vw,1.95rem);letter-spacing:-.025em;line-height:1.15}
body.kit .outcomes li::before,body.kit .scope li::before{font-family:var(--font-d)}
/* the self-test: its steps carry numerals, the way the homepage numbers the deliverables */
body.kit .verify ol{list-style:none;margin:14px 0 0;padding:0;counter-reset:vstep}
body.kit .verify ol li{counter-increment:vstep;position:relative;padding:2px 0 2px 46px;margin-bottom:14px}
body.kit .verify ol li::before{content:counter(vstep,decimal-leading-zero);position:absolute;left:0;top:0;
  font:700 1.4rem/1 var(--font-d);letter-spacing:-.03em;color:var(--volt);font-variant-numeric:tabular-nums}
/* plates take a lit top edge, never a coloured side border */
body.kit .cap-box{border-left:1px solid var(--line);box-shadow:inset 0 2px 0 var(--volt),0 30px 60px -40px rgba(0,0,0,.9)}

/* the waypoint rail: where you are in the world, drawn from --sc-seg */
.kit-route{position:fixed;right:clamp(14px,2.4vw,34px);bottom:clamp(16px,4vh,40px);z-index:3;
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none;
  font-family:var(--font-d);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,242,236,.62)}
.kit-route b{font-weight:600;color:var(--text)}
.kit-route i{display:block;width:64px;height:2px;background:rgba(244,242,236,.18);position:relative;overflow:hidden;transform:skewX(var(--cut))}
.kit-route i::after{content:"";position:absolute;inset:0;background:var(--volt);transform-origin:0 50%;transform:scaleX(var(--route,0))}
@media(max-width:1000px){
  body.kit .wf-scrim{background:linear-gradient(180deg,rgba(7,9,15,.62) 0%,rgba(7,9,15,.84) 30%,rgba(7,9,15,.88) 100%)}
  .kit-route{display:none}
}
@media(max-width:720px){
  /* the sticky CTA bar some landers carry sits where the route would */
  body.kit .wf-scrim{background:rgba(7,9,15,.82)}
}

/* =============================================================
   CHROME ONLY: articles, guides, legal, utility pages.
   A still from the world sits behind the top of the page and
   falls away into ink. No scroll video.
   ============================================================= */
.world-still{position:absolute;top:0;left:0;right:0;height:min(92vh,880px);z-index:0;pointer-events:none;overflow:hidden}
.world-still img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:.5}
.world-still::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,9,15,.55) 0%,rgba(7,9,15,.62) 40%,rgba(7,9,15,.9) 72%,var(--ink) 100%),
             linear-gradient(90deg,rgba(7,9,15,.7) 0%,rgba(7,9,15,.25) 60%,rgba(7,9,15,.4) 100%)}
body.still > main,body.still > footer{position:relative;z-index:1}
/* the booking confirmation is its own small page: the control room behind its one plate */
body.booked main{position:relative;z-index:1;border-radius:var(--rad);background:rgba(11,15,23,.92);border-color:var(--line-strong)}
body.booked .world-still{height:100vh}
body.booked .world-still img{opacity:.62}
@media(max-width:720px){.world-still{height:70vh}.world-still img{opacity:.42}}

/* ---------- article tables on a phone ----------
   29 articles carry tables; on a phone the wider ones pushed the whole page sideways
   (measured on the live site 2026-10-03: +83px at 390 on the lead-response article).
   The table scrolls sideways inside its own box at its natural width (the way GitHub
   renders markdown tables), so words never break and the page itself never scrolls
   sideways. Article bytes untouched. */
@media(max-width:720px){
  main table{display:block;width:max-content;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  main th,main td{min-width:96px}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .bdrv{opacity:1;transform:none}
}

/* ---------- utility pages with a band of art (access checklist, audit scope; body.holo-band) ----------
   The band is a photograph with its near-black made transparent (tools/glow.py) and, where
   the projector runs, its own loop (js/holo.js); the edges dissolve into the page. */
body.holo-band .art-band img{border:0;border-radius:0;background:none;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 64%,transparent 100%);
          mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 64%,transparent 100%)}

/* ---------- the Services menu (2026-10-04): plain service names in groups ----------
   Replaces the situation list. The panel anchors to the nav row rather than to its
   summary, so a three-column panel never runs off the right edge. No <div> inside the
   panel (the capture-chain gate and publish_learn read it up to its first </div>). */
.nav-inner{position:relative}
.nav-sit{position:static}
.nav-sit-panel{left:auto;right:max(24px,env(safe-area-inset-right));transform:none;width:min(980px,calc(100vw - 48px));min-width:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 18px;padding:14px 14px 12px;max-height:min(78vh,680px)}
.nav-col{list-style:none;margin:0;padding:0;display:grid;gap:1px;align-content:start}
.nav-gh{font:600 .66rem/1.2 var(--font-d);letter-spacing:.18em;text-transform:uppercase;color:var(--volt);padding:12px 12px 6px}
.nav-col .nav-gh:first-child{padding-top:6px}
.nav-sit-panel a{display:grid;gap:2px;white-space:normal;padding:7px 12px;font:600 .9rem/1.25 var(--font-d);color:var(--text)}
.nav-sit-panel a small{font:500 .76rem/1.35 var(--font-b);color:var(--mut)}
.nav-sit-panel a:hover small,.nav-sit-panel a[aria-current="page"] small{color:#C3CAD6}
.nav-sit-panel a[aria-current="page"]{color:var(--volt)}
.nav-sit-panel .nav-start{grid-column:1/-1;margin-top:6px;padding:12px;border-top:1px solid var(--line);color:var(--volt);font-size:.86rem}
/* main.css gives every .nav-links link nowrap, a muted colour and .93rem, and it outranks the rules
   above: the descriptions stayed on one line and ran into the next column. Win it back here. */
.nav-col{grid-template-columns:minmax(0,1fr)}
.nav-links .nav-sit-panel a:not(.btn){white-space:normal;overflow-wrap:break-word;min-width:0;font-size:.9rem;color:var(--text)}
.nav-links .nav-sit-panel a[aria-current="page"]{color:var(--volt)}
.nav-links .nav-sit-panel a.nav-start{color:var(--volt);font-size:.86rem}
.nav-sit-panel a small{text-wrap:pretty}
/* Short laptop screens (Carlos's is about 1330x610 CSS px): with every description the panel
   scrolled inside itself and hid its last rows. Names only there, so it all fits at once. */
@media (min-width:861px) and (max-height:800px){
  .nav-sit-panel a small{display:none}
  .nav-links .nav-sit-panel a:not(.btn){padding:5px 12px}
  .nav-gh{padding:10px 12px 4px}
}
.nav-sit-panel{overflow-x:hidden}
@media(max-width:1100px){.nav-sit-panel{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){.nav-sit-panel{grid-template-columns:minmax(0,1fr);width:min(440px,calc(100vw - 32px))}}
@media (pointer:coarse),(max-width:720px){.nav-sit-panel a{display:grid;align-content:center;min-height:48px}}
/* inside the homepage's burger drawer the panel lies in the flow, one column */
.nav-links.open .nav-sit-panel{display:block;width:auto;max-height:52vh;padding:0 0 0 2px}
.nav-links.open .nav-col{margin-bottom:6px}
.nav-links.open .nav-sit-panel a{padding:6px 0}
#bd-menu{width:min(94vw,880px);max-height:calc(100vh - 84px);overflow-y:auto;overscroll-behavior:contain;background:#07090F}
/* opaque: at 97% the hero headline behind read through both panels on a phone */
.nav-sit-panel{background:#07090F}

/* ---------- footer: every service, by group ---------- */
.foot-services{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:18px 26px;margin:30px 0 6px;padding-top:26px;border-top:1px solid var(--line)}
.foot-services .foot-gh{font:600 .66rem/1.2 var(--font-d);letter-spacing:.18em;text-transform:uppercase;color:var(--volt);margin:0 0 8px}
.foot-services ul{list-style:none;margin:0;padding:0;display:grid}
.foot-services a{display:inline-block;padding:5px 0;font-size:.86rem;line-height:1.35;color:var(--mut);text-decoration:none}
.foot-services a:hover{color:var(--text)}
.foot-services .foot-start{grid-column:1/-1;margin:4px 0 0;font-size:.86rem}
.foot-services .foot-start a{color:var(--volt)}
@media(max-width:1000px){.foot-services{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.foot-services{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}.foot-services a{padding:11px 0}}

/* ---------- the phone bar (2026-10-04): one shared rule for every lander ----------
   Each lander used to carry these lines in its own <style>, and nine pages had no bar at
   all. Same values as before; the padding only applies where a bar exists. */
.sticky-cta{display:none}
@media(max-width:720px){
  body .sticky-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1500;gap:10px;padding:12px 14px calc(12px + env(safe-area-inset-bottom));
    background:rgba(7,9,15,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line-strong)}
  body .sticky-cta .btn{flex:1;justify-content:center;min-height:48px;padding-left:10px;padding-right:10px}
  body:has(.sticky-cta) main{padding-bottom:84px}
}

/* ---------- related services: the last thing in every service page's <main> ---------- */
.related{position:relative;padding:clamp(48px,6vw,80px) 0 clamp(40px,5vw,64px)}
.related .h-mini{margin:0 0 16px}
.rel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.rel{position:relative;display:grid;gap:4px;align-content:start;padding:18px 44px 18px 18px;background:rgba(8,11,18,.92);border:1px solid var(--line);
  border-radius:var(--rad);text-decoration:none;transition:border-color .2s ease,transform .2s ease}
.rel::after{content:"\2192";position:absolute;right:18px;top:50%;translate:0 -50%;color:var(--volt);font:600 1.1rem/1 var(--font-d);transition:translate .2s ease}
.rel:hover{border-color:rgba(198,241,53,.45);transform:translateY(-2px)}
.rel:hover::after{translate:4px -50%}
.rel:focus-visible{outline:2px solid var(--volt);outline-offset:3px}
.rel .rel-k{font:600 .64rem/1.2 var(--font-d);letter-spacing:.18em;text-transform:uppercase;color:var(--volt)}
.rel b{font:700 1.05rem/1.25 var(--font-d);color:var(--text)}
.rel span:last-child{font-size:.86rem;line-height:1.45;color:#C3CAD6}
@media(max-width:860px){.rel-grid{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.rel,.rel::after{transition:none}.rel:hover{transform:none}}

/* ---------- the subline under every lander's H1 (audit round, 2026-10-04; label dropped in the copy pass) ----------
   Answer engines lift a 40 to 80 word block from the first screen; a skimming visitor reads it
   as the whole offer in one breath: what it is, what it costs, what arrives and when. */
.answer{max-width:640px;margin:16px 0 4px;padding:0;color:#E4E8EF;font-size:1.16rem;line-height:1.55;background:none;border:0}
@media (max-width:720px){.answer{font-size:1.04rem;margin:12px 0 2px}}
/* the hero's buttons now sit under the answer (above the fold on a 1366x768 laptop); the story
   paragraph and the founder line follow them, set apart from the risk line */
body.kit .page-head .cta-row + .proof-line + .lead{margin-top:30px}
@media (max-width:720px){body.kit .page-head .cta-row + .proof-line + .lead{margin-top:24px}}
/* the hero art is drawn at 132% of its column (its edges are masked to nothing); between 1100 and
   about 1400px wide that invisible edge passed the screen by a few pixels and widened the page.
   clip, not hidden: no scroll container, and the vertical spill of the glow stays visible */
body.kit .page-head:has(> .art-band){overflow-x:clip}