/* Piets Site v3 — nav restructure, hub band, standalone-site shells.
   Loads LAST on every page, after theme-ncp.css. Navy · Cyan · Purple (palette B).
   Piets Technology Solutions Inc · 631-871-5957 · pietstechsolutions.com
   Much of this was prepared with AI. Tell the owner about any mistake so it gets fixed. */

/* ---------- FONT_STANDARD.md rule 1 ----------
   Every rule in this file that sets font-family now also sets font-weight. A family
   with no weight inherits whatever the element defaults to (400 on a div/span, 700 on
   an h3, and the keyword `bolder` on a <b>, which computes to 900 from a 700 parent —
   a weight no family here has). Each weight below is PINNED TO THE VALUE THE PAGE
   ALREADY COMPUTED, measured on the live DOM before it was written in, so nothing on
   any page moves:
     .famcard .dom / .go / .soon  400  (index.html, JetBrains Mono)
     .sitebar                     400  (piet-box.html, websites.html — see below)
     .kicker                      400  (coverage.html, design-studio.html)
     .bigq                        700  (payments.html, products.html — h3's UA bold)
     .statline b / span      800 / 500  house values: no element in the artifact carries
                                        class="statline", so these two rules match
                                        nothing today and the house value is what a
                                        future .statline should get.
   KNOWN, NOT FIXED HERE: .sitebar's own family cannot resolve. piet-box.html and
   websites.html wear their own shells and do not load main.css, which is the only file
   that defines --font-mono / --font-display / --font-body, so on both of those pages
   var(--font-mono) is invalid at computed-value time and the "part of Piets" rail
   inherits Inter 400 instead of painting a mono label. Giving the var a fallback would
   change how that rail looks on two pages, so it is logged for a run of its own rather
   than slipped in here. Do not "fix" it by changing the weight alone. */

/* ---------- nav: five groups, products carry the gradient dot ---------- */
.site-nav__links .nav-more[data-navdot]>summary::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:2px;
  background:var(--ncp-grad,linear-gradient(100deg,#02D7F5,#016FD6 55%,#7A3DFF));flex:0 0 auto}
.site-nav__links .nav-more>summary[data-on]{color:#fff;background:rgba(122,61,255,.2)}
.nav-more__panel li a[aria-current]{background:rgba(122,61,255,.3);color:#fff}
/* the panels sit under a 6-item bar now — keep the wide ones from running off screen */
.nav-more__panel{min-width:250px;max-width:min(300px,90vw)}
.site-nav__links>li>details>summary{user-select:none}
@media(min-width:1021px){
  .site-nav__links{gap:2px}
  /* the first dropdown opens leftwards so it never clips off the viewport */
  .site-nav__links>li:first-child .nav-more__panel{right:auto;left:0}
}

/* ---------- home: the family / network band ---------- */
.fam{background:#050A1F;position:relative;overflow:hidden;color:#fff;padding:84px 0}
.fam::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(48% 42% at 78% 14%,rgba(122,61,255,.3),transparent 70%),
  radial-gradient(38% 34% at 8% 88%,rgba(2,215,245,.16),transparent 70%)}
.fam>.wrap{position:relative;z-index:1}
.fam h2,.fam h3{color:#fff}
.fam p{color:#AFBED8}
.famgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
@media(max-width:980px){.famgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.famgrid{grid-template-columns:1fr}}
.famcard{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:20px;color:#fff;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);transition:.2s}
a.famcard:hover{text-decoration:none;transform:translateY(-3px);
  background:rgba(122,61,255,.17);border-color:rgba(167,139,250,.7)}
.famcard .dom{font-family:var(--font-mono);font-weight:400;font-size:.68rem;letter-spacing:.06em;color:#8FE9FB;
  display:flex;align-items:center;gap:7px}
.famcard .dom::before{content:"";width:6px;height:6px;border-radius:50%;
  background:linear-gradient(100deg,#02D7F5,#7A3DFF)}
.famcard h3{font-size:1.14rem;margin:0}
.famcard p{font-size:.89rem;color:#A9B8D4;margin:0;flex:1}
.famcard .go{font-family:var(--font-mono);font-weight:400;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:#CDB4FF}
.famcard.hub{background:linear-gradient(140deg,rgba(2,215,245,.14),rgba(122,61,255,.2));
  border-color:rgba(167,139,250,.55)}
.famcard .soon{font-family:var(--font-mono);font-weight:400;font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;align-self:flex-start;background:rgba(255,176,32,.14);
  border:1px solid rgba(255,176,32,.4);color:#FFD88A}

/* ---------- standalone product-site shell ---------- */
/* Any product page that will later move to its own domain wears this. It keeps the Piets
   identity but reads as its own site, with a thin "part of Piets" rail back to the hub. */
.sitebar{background:#010E30;border-bottom:1px solid rgba(255,255,255,.08);
  font-family:var(--font-mono);font-weight:400;font-size:.68rem;letter-spacing:.05em;color:#8EA3C9}
.sitebar .wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:7px;padding-bottom:7px}
.sitebar a{color:#9FB1D0}
.sitebar a:hover{color:#fff}
.sitebar .me{color:#fff;display:inline-flex;align-items:center;gap:7px}
.sitebar .me::before{content:"";width:6px;height:6px;border-radius:50%;
  background:linear-gradient(100deg,#02D7F5,#7A3DFF)}
.sitebar .sep{margin-left:auto;display:flex;gap:14px;flex-wrap:wrap}
@media(max-width:620px){.sitebar .sep{margin-left:0;width:100%}}

/* ---------- small shared bits used by the new pages ---------- */
.kicker{font-family:var(--font-mono);font-weight:400;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:#02D7F5;margin-bottom:10px;display:block}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
@media(max-width:860px){.twocol{grid-template-columns:1fr}}
.bigq{font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.2;color:#fff;
  margin:0 0 14px;letter-spacing:-.02em}
.statline{display:flex;flex-wrap:wrap;gap:26px;margin-top:26px}
.statline b{display:block;font-family:var(--font-display);font-weight:800;font-size:1.75rem;line-height:1;color:#fff}
.statline span{font-family:var(--font-mono);font-weight:500;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:#9FB1D0}
.check-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.check-list li{position:relative;padding-left:26px;font-size:.95rem}
.check-list li::before{content:"";position:absolute;left:0;top:.42em;width:15px;height:8px;
  border-left:2.5px solid #16A765;border-bottom:2.5px solid #16A765;transform:rotate(-45deg)}
.darkwrap .check-list li::before{border-color:#2EE59D}
.darkwrap .check-list li{color:#C6D4EA}

/* keep long consoles from forcing the page sideways on a phone */
.mcon,.appstage,.crm{max-width:100%}
img,svg,canvas{max-width:100%}

/* ---------- home hero: the Design Studio CTA (purple accent, palette B) ---------- */
body.home-page .hero .btn-studio{background:rgba(122,61,255,.22);color:#fff;
  border-color:rgba(167,139,250,.75);box-shadow:0 8px 26px rgba(122,61,255,.3)}
body.home-page .hero .btn-studio:hover{background:rgba(122,61,255,.34);
  border-color:#9B6BFF;box-shadow:0 12px 34px rgba(122,61,255,.45)}
body.home-page .hero .btn-studio svg{color:#02D7F5}
body.home-page .hero .btn-studio:focus-visible{outline:2px solid #02D7F5;outline-offset:3px}
body.home-page .hero__studio-note{margin:-8px 0 18px;font-size:.86rem;color:#B9C6E0;max-width:48ch}
body.home-page .hero__studio-note::before{content:"";display:inline-block;width:6px;height:6px;
  border-radius:50%;margin-right:8px;vertical-align:middle;
  background:linear-gradient(100deg,#02D7F5,#7A3DFF)}
@media(max-width:430px){
  body.home-page .hero .btn-row{flex-direction:column;align-items:stretch}
  body.home-page .hero .btn-row .btn{width:100%}
}

/* ---------- header: ONE "Log in" control, all three roles under Field HQ ----------
   Roadmap item 20 (the owner, Oct 10 2026): "I just want a login thing that is labeled
   correctly" + "can we just run it all under the field hq I created." Palette B only:
   purple #7A3DFF is the accent on the open state, cyan #02D7F5 on the icon and rule. */
.site-header__actions .login-menu{position:relative}
.site-header__actions .login-menu>summary{list-style:none;cursor:pointer}
.site-header__actions .login-menu>summary::-webkit-details-marker{display:none}
.site-header__actions .login-menu>summary::marker{content:""}
.site-header__actions .login-menu>summary>svg:first-child{color:#02D7F5}
.site-header__actions .login-menu[open]>summary{background:rgba(122,61,255,.28);
  border-color:rgba(167,139,250,.75);color:#fff;transform:none}
.site-header__actions .login-menu>summary:hover{transform:none}
.login-menu__chev{transition:transform .2s}
.site-header__actions .login-menu[open]>summary .login-menu__chev{transform:rotate(180deg)}
.login-menu__panel{min-width:286px;max-width:min(320px,92vw)}
.login-menu__panel li a{display:block;padding:10px 12px;border-radius:12px;color:#C9D4E8;
  text-decoration:none!important}
.login-menu__panel li a b{display:block;font-size:.95rem;font-weight:600;color:#fff}
.login-menu__panel li a span{display:block;font-size:.78rem;line-height:1.35;color:#9FB1D0;margin-top:3px}
.login-menu__panel li a:hover{background:rgba(122,61,255,.26)}
.login-menu__panel li a:hover span{color:#DBCCFF}
.login-menu__panel li a:focus-visible{outline:2px solid #02D7F5;outline-offset:-2px}
.login-menu__foot{margin:7px 6px 2px;padding-top:9px;border-top:1px solid rgba(2,215,245,.3);
  font-family:var(--font-mono);font-weight:500;font-size:.6rem;letter-spacing:.07em;text-transform:uppercase;color:#8FE9FB}
.site-header__actions .login-menu>summary:focus-visible{outline:3px solid #02D7F5;outline-offset:3px}

/* ---------- header nav: every top-level item is the same box ----------
   the owner, Oct 10 2026 (artifact comment): "THE MORE AND PLANS DOES NOT ALIGN PROPERLY".
   The bar mixes <a> items (Design Studio, Plans) with <details><summary> items
   (Services, Payments, Products, More). A block <a> and a flex <summary> place their
   text differently inside the same box, so the two kinds drifted a pixel apart — and
   under 1320px they also had different padding and font-size, which made it obvious.
   Padding and size are fixed in main.css; this makes both kinds the same kind of box
   so they cannot drift again. Desktop only — under 1021px the nav is the phone menu. */
@media (min-width:1021px){
  /* NB: do not set display on the <li> here — it would beat the .site-nav__mobile-only
     display:none guard and spill the phone-only rows into the desktop bar. */
  .site-nav__links>li>a,
  .site-nav__links>li>details>summary{
    display:flex;align-items:center;gap:7px;line-height:1.25;
    min-height:38px;box-sizing:border-box}
  /* both dots are flex items now, so they space the same way */
  .site-nav__links a[data-pillar]::before{margin-right:0}
  .site-nav__links .nav-more[data-navdot]>summary::before{margin-right:0}
}

/* The same shrink steps main.css applies to the nav under 1320px / 1100px, repeated here
   because theme-ncp.css loads after main.css and re-sets the summary's font-size at equal
   specificity — so the <a> items shrank and the <summary> items did not. v3.css loads last,
   so this is the layer that can keep the whole bar on one size. */
@media (max-width:1320px) and (min-width:1021px){
  .site-nav__links>li>a,
  .site-nav__links .nav-more>summary{padding:8px 9px}
}
@media (max-width:1100px) and (min-width:1021px){
  .site-nav__links>li>a,
  .site-nav__links .nav-more>summary{font-size:.88rem;padding:8px 7px}
}
/* the two controls on the right sit on the same line as the nav — keep them in step */
@media (max-width:1100px) and (min-width:1021px){
  .site-header__actions .btn,
  .site-header__actions .login-menu>summary{font-size:.88rem}
}

/* ---------- header nav: one single look, link or dropdown ----------
   the owner, Oct 10 2026 (artifact comment): "CAN YOU MAKE ALL THE LINKS LOOK THE SAME
   EVEN IF THEY ARE LINKSS OR DROPDOWNS".

   The block above already made the six boxes the same size. Three things still told a
   link apart from a dropdown, and this is all of them:

   1. HOVER AND CURRENT-PAGE COLOUR. main.css washed the plain <a> items white
      (rgba(255,255,255,.08)) while theme-ncp.css washed the <summary> items purple
      (rgba(122,61,255,.28)). Everything is purple now — that is the brand accent and
      it was already the majority behaviour (4 of the 6 items).
   2. THE PILLAR DOTS. A small gradient dot sat on Design Studio, Payments and Products
      and not on Services, Plans or More, so three of six items carried an extra mark.
      Removed. (To put them back: delete this block's two ::before rules.)
   3. THE GAP between the text and whatever follows it: 7px on links, 6px on summaries.

   The chevron stays on the four items that open a menu. It is the only honest signal
   that something opens rather than navigates, so it is dimmed instead of dropped —
   the words now read as one row and the chevron is a quiet hint, not a second style. */

/* 1 · hover and open — identical on both kinds */
.site-nav__links>li>a:hover,
.site-nav__links>li>.nav-more>summary:hover,
.site-nav__links>li>.nav-more[open]>summary{
  color:#fff;background:rgba(122,61,255,.28)}

/* 1b · current page (links) and current section (dropdowns) — identical on both kinds */
.site-nav__links>li>a[aria-current="page"],
.site-nav__links>li>.nav-more>summary[data-on]{
  color:#fff;background:rgba(122,61,255,.2)}

/* 1c · keyboard focus ring — identical on both kinds */
.site-nav__links>li>a:focus-visible,
.site-nav__links>li>.nav-more>summary:focus-visible{
  outline:2px solid #02D7F5;outline-offset:2px}

/* 2 · the pillar dots come off, so no item carries a mark another one lacks */
.site-nav__links a[data-pillar]::before,
.site-nav__links .nav-more[data-navdot]>summary::before{content:none;display:none}

/* 3 · one gap value, and a chevron that hints instead of competing */
.site-nav__links>li>a,
.site-nav__links>li>.nav-more>summary{gap:6px}
.site-nav__links>li>.nav-more>summary>svg{opacity:.6;transition:transform .2s,opacity .2s}
.site-nav__links>li>.nav-more>summary:hover>svg,
.site-nav__links>li>.nav-more[open]>summary>svg{opacity:1}

/* ---------- the top bar (announcement ticker), every page ----------
   the owner, Oct 11 2026: the top bar looked broken — the scrolling text was cut in
   half at the left edge and ran under the close button on the right. Both ends
   now fade, and the close button sits on its own solid backing. Moved here from
   the home page so all 34 pages match. */
.announcement{position:relative}
.announcement::before,.announcement::after{content:"";position:absolute;top:0;bottom:0;width:110px;z-index:2;pointer-events:none}
.announcement::before{left:0;background:linear-gradient(90deg,var(--ink,#050A1F) 30%,rgba(5,10,31,0))}
.announcement::after{right:0;background:linear-gradient(270deg,var(--ink,#050A1F) 48%,rgba(5,10,31,0))}
.announcement__close{z-index:3;background:var(--ink,#050A1F);border:1px solid rgba(122,61,255,.55);box-shadow:none}
.announcement__run i{background:#7A3DFF;opacity:.9}
@media(max-width:620px){.announcement::before,.announcement::after{width:56px}}

/* ---------- top nav: bigger and easier to see (owner, Oct 10 2026, item B) ----------
   "The top bar next to Piets Technology Solutions (Services, Design Studio, Payments...)
   should be bigger and stick out more." Was 14.9px / 500 in a grey-blue. Now 16px / 600
   in near-white, a clear purple hover, and the current page also gets a cyan underline.
   Every rule sets the <a> items AND the <summary> dropdowns together (lesson 8).
   Room for it: the phone becomes a round icon button (it was hidden under 1441px), and the PIETS wordmark steps aside under 1180px (the logo mark stays).
   Swept 1px by 1px, 1021-1600px: one row, nothing touching. Under 1021px = phone menu.
   1021-1180px items carry 5px side padding: in real Chrome on Windows (17px scrollbar) 6px
   left only 4-7px between the bar and the logo at 1021-1028px (Oct 12 2026 sweep). */
@media (min-width:1021px){
  .site-nav__links{gap:2px}
  .site-nav__links>li>a,
  .site-nav__links>li>.nav-more>summary{
    font-family:var(--font-body);font-size:1rem;font-weight:600;letter-spacing:0;
    color:#EEF3FB;padding:9px 10px;min-height:42px;border-radius:999px}
  .site-nav__links>li>a:hover,
  .site-nav__links>li>.nav-more>summary:hover,
  .site-nav__links>li>.nav-more[open]>summary{color:#fff;background:rgba(122,61,255,.34)}
  .site-nav__links>li>a[aria-current="page"],
  .site-nav__links>li>.nav-more>summary[data-on]{
    color:#fff;background:rgba(122,61,255,.26);box-shadow:inset 0 -2px 0 #02D7F5}
  .site-nav__links>li>.nav-more>summary>svg{opacity:.75}
  /* the phone: a round icon button on every desktop width (the bar is capped at 1400px, so the
     number itself never fits beside a bigger nav; it is in the top bar, the footer and the button's name) */
  .site-header__actions .header-phone{display:inline-flex;justify-content:center;width:42px;height:42px;padding:0;
    border-radius:999px;border:1px solid rgba(2,215,245,.45);font-size:0;gap:0;flex:none}
  .site-header__actions .header-phone svg{width:18px;height:18px}
  .site-header__actions .header-phone:hover{background:rgba(122,61,255,.3)}
}

@media (max-width:1320px) and (min-width:1021px){
  .site-nav__links>li>a,
  .site-nav__links>li>.nav-more>summary{font-size:.95rem;padding:9px 8px}
}
/* the small "Technology Solutions" line under PIETS waits until the bar has room for it */
@media (max-width:1400px) and (min-width:1321px){
  .site-header .brand__text small{display:none}
}
@media (max-width:1180px) and (min-width:1021px){
  .site-header .brand__text{display:none}
  .site-nav__links>li>a,
  .site-nav__links>li>.nav-more>summary{font-size:.94rem;padding:8px 5px;gap:4px}
  .site-header__inner{gap:12px}
  .site-header__actions{gap:8px}
}

/* =====================================================================
   BRAIN SKIN — Oct 15 2026. The "Piet's Brain" look on every shared-shell page.
   Dark obsidian base, wire + port motif, cyan/blue/purple glow, fiber-orange
   on data lines only. Scoped to body.brain so the two tool pages that wear
   their own shells (piet-box.html, websites.html) are not touched by accident.
   Loads last (main.css -> theme-ncp.css -> v3.css). Pure CSS: every page is
   complete and readable with JS off; /assets/js/brain.js only adds motion.
   Piets Technology Solutions Inc · 631-871-5957 · pietstechsolutions.com
   Much of this was prepared with AI. Tell the owner about any mistake.
   Font rule: every rule here that sets font-family also sets font-weight.
   ===================================================================== */
body.brain{
  --void:#03060D; --obs:#050B18; --deep:#011442; --navy:#011F5D;
  --b-cyan:#00E1FF; --b-blue:#1E8BFF; --b-blue-deep:#016FD6; --b-orange:#FF8A2B; --b-purple:#7B5CFF; --b-good:#38F2A0;
  --b-ink:#EAF5FF; --b-muted:#A9BCD6; --b-dim:#6F86A6;
  --b-line:rgba(0,225,255,.16); --b-line2:rgba(151,173,201,.20);
  --b-panel:linear-gradient(160deg,rgba(14,34,74,.78),rgba(5,14,34,.88));
  --b-panel-solid:#0A1A38;
  /* re-point the site tokens so main.css rules flip to dark */
  --paper:#03060D; --mist:#060E1F; --line:rgba(151,173,201,.20); --text:#C9D7EA; --muted:#A9BCD6;
  --ink:#03060D; --pill-wash:rgba(0,225,255,.10); --blue-deep:#4CC3FF;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 18px 40px -18px rgba(0,0,0,.7);
  --shadow-lg:0 30px 70px -20px rgba(0,0,0,.8);
  background:var(--void); color:var(--text);
}
body.brain::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(1100px 700px at 78% -5%,rgba(1,111,214,.20),transparent 60%),radial-gradient(900px 600px at 0% 105%,rgba(123,92,255,.12),transparent 60%),var(--void)}
body.brain::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(0,225,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,225,255,.04) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 25%,transparent 80%);mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 25%,transparent 80%)}
:where(body.brain) :is(h1,h2,h3,h4){color:var(--b-ink)}
:where(body.brain) a{color:#5FD8FF}
:where(body.brain) a:hover{color:#fff}
body.brain ::selection{background:var(--b-cyan);color:var(--void)}
body.brain :focus-visible{outline:2px solid var(--b-cyan);outline-offset:3px}
body.brain .skip{background:var(--b-cyan);color:var(--void)}
:where(body.brain) :is(strong,b){color:inherit}
body.brain hr{border-color:var(--b-line2)}

/* ---------- header: obsidian glass, thin cyan rule ---------- */
body.brain .announcement{background:linear-gradient(90deg,var(--navy),var(--deep));border-bottom:1px solid var(--b-line);color:#B9C9E2}
body.brain .site-header{background:rgba(3,6,13,.72);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--b-line)}
body.brain .site-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(0,225,255,.65) 30%,rgba(123,92,255,.65) 70%,transparent)}
body.brain .nav-more__panel{background:linear-gradient(180deg,#081430,#0B0A2C);border-color:rgba(0,225,255,.22)}
body.brain .site-nav__links a,body.brain .site-nav__links .nav-more>summary{color:#C9D4E8}
body.brain .site-nav__links a:hover{color:#fff}

/* ---------- page head: dark band + the drawn wire + a port ---------- */
body.brain .page-head{background:transparent;padding:76px 0 64px;border-bottom:1px solid var(--b-line)}
body.brain .page-head::before{background:radial-gradient(560px 340px at 86% 20%,rgba(0,225,255,.20),transparent 70%),radial-gradient(640px 420px at 0% 110%,rgba(123,92,255,.22),transparent 70%)}
body.brain .page-head h1{color:#fff;font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;line-height:.98}
body.brain .page-head p{color:var(--b-muted)}
body.brain .page-head .crumbs,body.brain .page-head .crumbs a{color:var(--b-dim)}
body.brain .page-head .crumbs strong{color:var(--b-cyan)}
body.brain .page-head .wrap{position:relative;z-index:1}
.bw-head{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bw-head svg{position:absolute;inset:0;width:100%;height:100%}
.bw-head path{fill:none;stroke-linecap:round}
.bw-head .bw-bg{stroke:rgba(151,173,201,.12);stroke-width:2}
.bw-head .bw-fg{stroke:var(--b-cyan,#00E1FF);stroke-width:2.2;filter:drop-shadow(0 0 6px rgba(0,225,255,.6));stroke-dasharray:1;stroke-dashoffset:1}
.bw-head .bw-fg.p{stroke:var(--b-purple,#7B5CFF);filter:drop-shadow(0 0 6px rgba(123,92,255,.6))}
.bw-head .bw-fg.o{stroke:var(--b-orange,#FF8A2B);filter:drop-shadow(0 0 6px rgba(255,138,43,.6))}
.bw-head.on .bw-fg{animation:bwDraw 1.6s cubic-bezier(.22,1,.36,1) forwards}
.bw-head.on .bw-fg:nth-of-type(2){animation-delay:.25s}.bw-head.on .bw-fg:nth-of-type(3){animation-delay:.5s}
@keyframes bwDraw{to{stroke-dashoffset:0}}
.bw-head .bw-port{fill:#0A1A38;stroke:var(--b-cyan,#00E1FF);stroke-width:2}
.bw-head .bw-pk{fill:#fff}
@media (prefers-reduced-motion:reduce){.bw-head .bw-fg{stroke-dashoffset:0!important;animation:none!important}}
html:not(.js) .bw-head .bw-fg{stroke-dashoffset:0}

/* ---------- live mini-visual (one per service page, top right of the head) ---------- */
.bmv{position:relative;margin-top:28px;width:min(420px,100%);aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#050D1E;border:1px solid var(--b-line);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 24px 60px -20px rgba(0,0,0,.8)}
@media (min-width:1100px){
  body.brain .page-head.has-bmv .page-head__content,body.brain .page-head.has-bmv>.wrap>*:not(.bmv){max-width:calc(100% - 470px)}
  body.brain .page-head.has-bmv .bmv{position:absolute;right:16px;top:50%;transform:translateY(-50%);margin:0;width:420px;z-index:1}
  body.brain .page-head.has-bmv{min-height:400px;display:flex;align-items:center}
  body.brain .page-head.has-bmv>.wrap{width:100%}
}
.bmv svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.bmv .lbl{position:absolute;font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:500;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#CFE6FF;z-index:2;display:flex;align-items:center;gap:6px}
.bmv .tl{top:10px;left:12px}.bmv .tr{top:10px;right:12px}.bmv .bl{bottom:10px;left:12px}.bmv .br{bottom:10px;right:12px;color:#7F95B5}
.bmv .tl i{width:7px;height:7px;border-radius:50%;background:#FF3B5C;box-shadow:0 0 8px #FF3B5C;animation:bmvBlink 1.4s infinite}
@keyframes bmvBlink{50%{opacity:.25}}
.bmv text{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:500;font-size:9px;letter-spacing:.08em;fill:#7F95B5}
.bmv .ln{fill:none;stroke:#2B4A78;stroke-width:1.3}
.bmv .cy{stroke:#00E1FF}.bmv .bl2{stroke:#1E8BFF}.bmv .or{stroke:#FF8A2B}.bmv .pu{stroke:#7B5CFF}
.bmv .flow{fill:none;stroke-width:2.2;stroke-dasharray:6 14;animation:bmvFlow 1.1s linear infinite;filter:drop-shadow(0 0 4px currentColor)}
@keyframes bmvFlow{to{stroke-dashoffset:-40}}
.bmv .scan{position:absolute;left:0;right:0;height:30%;top:-30%;background:linear-gradient(transparent,rgba(0,225,255,.10),transparent);animation:bmvScan 3.6s linear infinite}
@keyframes bmvScan{to{top:100%}}
.bmv .noise{position:absolute;inset:0;opacity:.08;background-image:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 3px)}
.bmv .box{position:absolute;border:1.5px solid #38F2A0;border-radius:3px;box-shadow:0 0 10px rgba(56,242,160,.5);animation:bmvBox 5s ease-in-out infinite}
@keyframes bmvBox{0%,100%{transform:translate(0,0)}50%{transform:translate(38px,6px)}}
.bmv .ring{fill:none;stroke:#00E1FF;stroke-width:1.4;transform-box:fill-box;transform-origin:center;animation:bmvRing 2.4s ease-out infinite}
.bmv .ring:nth-of-type(2){animation-delay:.8s}.bmv .ring:nth-of-type(3){animation-delay:1.6s}
@keyframes bmvRing{from{transform:scale(.6);opacity:.9}to{transform:scale(3.2);opacity:0}}
.bmv .led{animation:bmvLed 3s steps(1) infinite}
@keyframes bmvLed{0%,60%{fill:#FF3B5C}61%,100%{fill:#38F2A0}}
.bmv .fob{animation:bmvFob 3s ease-in-out infinite}
@keyframes bmvFob{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(46px)}100%{transform:translateX(0)}}
.bmv .msg{animation:bmvMsg 3s steps(1) infinite}
@keyframes bmvMsg{0%,60%{opacity:1}61%,100%{opacity:0}}
.bmv .msg2{opacity:0;animation:bmvMsg2 3s steps(1) infinite}
@keyframes bmvMsg2{0%,60%{opacity:0}61%,100%{opacity:1}}
.bmv .eq rect{fill:#00E1FF;transform-box:fill-box;transform-origin:center;animation:bmvEq 1s ease-in-out infinite alternate}
@keyframes bmvEq{from{transform:scaleY(.15)}to{transform:scaleY(1)}}
.bmv .tick{animation:bmvTick 4s steps(1) infinite}
@keyframes bmvTick{0%,30%{opacity:0}31%,100%{opacity:1}}
.bmv .print{animation:bmvPrint 4s ease-out infinite}
@keyframes bmvPrint{0%,30%{transform:translateY(-40px);opacity:0}45%,100%{transform:translateY(0);opacity:1}}
.bmv .glow{animation:bmvGlow 2.6s ease-in-out infinite alternate}
@keyframes bmvGlow{from{opacity:.35}to{opacity:1}}
.bmv.paused *,.bmv.paused{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.bmv *,.bmv{animation:none!important}}

/* ---------- trust strip ---------- */
body.brain main>.trust{background:rgba(5,12,28,.85);border-bottom:1px solid var(--b-line)}
body.brain .trust li{background:rgba(1,20,66,.55);border-color:var(--b-line);color:var(--b-ink);box-shadow:none}

/* ---------- sections: obsidian, mist becomes a deeper band ---------- */
body.brain .section{background:transparent}
body.brain .section--mist,body.brain .section-soft,body.brain .quote-section{background:linear-gradient(180deg,rgba(6,16,36,.85),rgba(4,10,24,.85));border-top:1px solid var(--b-line);border-bottom:1px solid var(--b-line)}
body.brain .section-navy,body.brain .band,body.brain .stats{background:linear-gradient(180deg,#020815,#0B0930)}
body.brain .eyebrow,body.brain .kicker,body.brain .hm-k{color:var(--b-cyan)}
:where(body.brain) .section-head h2{color:var(--b-ink)}
body.brain .section-head p,body.brain .lead{color:var(--b-muted)}
body.brain .grad-text,body.brain .hm-grad{background:linear-gradient(90deg,#00E1FF,#1E8BFF 55%,#7B5CFF);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- cards = node panels with a port ---------- */
body.brain .card,body.brain .area,body.brain .area-card,body.brain .post-card,body.brain .fcard,body.brain .plan-card,body.brain .serve-card,body.brain .scope-item,
body.brain .flow-step,body.brain .tier,body.brain .support-card,body.brain .step,body.brain .steps .step,body.brain .tab-panel,body.brain .reco-card,
body.brain .faq-item,body.brain .planner-container,body.brain .callout,body.brain .callout.lightout,body.brain .partner-who,body.brain .cta-box,body.brain .author,
body.brain form.form,body.brain .quote-form,body.brain .gate,body.brain .gate__form,body.brain .hm-svc,body.brain .hm-famc,body.brain .hm-ind,body.brain .hm-vs__col,
body.brain .hm-plan,body.brain .hm-area,body.brain .service,body.brain .mcard,body.brain .scard,body.brain .tcard,body.brain .panel,body.brain .div-card{
  background:var(--b-panel);border:1px solid rgba(151,173,201,.16);color:var(--text);box-shadow:var(--shadow)}
body.brain .card,body.brain .area,body.brain .post-card,body.brain .fcard,body.brain .plan-card,body.brain .serve-card,body.brain .hm-svc,body.brain .hm-famc{position:relative;transition:border-color .3s,box-shadow .3s,transform .3s}
body.brain .card:hover,body.brain a.area:hover,body.brain .post-card:hover,body.brain .hm-svc:hover,body.brain .hm-famc:hover,body.brain .serve-card:hover,body.brain .plan-card:hover{
  border-color:rgba(0,225,255,.45);box-shadow:0 0 0 1px rgba(0,225,255,.25),0 0 28px -6px rgba(0,225,255,.45),0 24px 50px -24px rgba(0,0,0,.9);text-decoration:none}
body.brain .card::after,body.brain .post-card::after,body.brain .plan-card::after,body.brain .serve-card::after,body.brain .hm-svc::after{
  content:"";position:absolute;top:26px;left:-6px;width:10px;height:10px;border-radius:50%;background:#0A1A38;border:2px solid var(--b-dim);transition:border-color .3s,box-shadow .3s}
body.brain .card:hover::after,body.brain .post-card:hover::after,body.brain .plan-card:hover::after,body.brain .serve-card:hover::after,body.brain .hm-svc:hover::after,
body.brain .card.bw-live::after,body.brain .post-card.bw-live::after,body.brain .plan-card.bw-live::after,body.brain .serve-card.bw-live::after,body.brain .hm-svc.bw-live::after{
  border-color:var(--b-cyan);box-shadow:0 0 10px var(--b-cyan),0 0 0 4px rgba(0,225,255,.12)}
body.brain .card h3,body.brain .card h4,body.brain .post-card h3,body.brain .area h3,body.brain .area h4,body.brain .area strong{color:var(--b-ink)}
body.brain .card p,body.brain .area p,body.brain .area span,body.brain .post-card p,body.brain .post-card time{color:var(--b-muted)}
body.brain .post-card span{color:var(--b-cyan)}
body.brain .plan-card.popular,body.brain .tier.pop,body.brain .hm-plan--pop{border-color:rgba(123,92,255,.55);box-shadow:0 0 0 1px rgba(123,92,255,.35),0 0 40px -10px rgba(123,92,255,.5)}
body.brain .icon,body.brain .service-icon,body.brain .scope-icon,body.brain .hm-svc__icon,body.brain span.it{background:rgba(0,225,255,.10);color:var(--b-cyan);border:1px solid rgba(0,225,255,.25)}
body.brain .chips li,body.brain .tags li a,body.brain .hm-chips span{background:rgba(0,225,255,.08);border-color:rgba(0,225,255,.22);color:#CFE6FF}
body.brain .check-list li::before{filter:drop-shadow(0 0 4px rgba(0,225,255,.6))}
body.brain table{color:var(--text)}
body.brain th,body.brain td{border-color:var(--b-line2)}
body.brain th{color:var(--b-ink);background:rgba(1,20,66,.5)}
body.brain code,body.brain pre{background:#050D1E;color:#CFE6FF;border:1px solid var(--b-line2)}
body.brain blockquote{border-left-color:var(--b-cyan);color:var(--b-muted)}
body.brain .note,body.brain .areas-note{color:var(--b-muted)}

/* ---------- buttons ---------- */
body.brain .btn-primary{background:linear-gradient(100deg,#00E1FF,#1E8BFF 60%,#7B5CFF);color:#02122B;border-color:transparent;box-shadow:0 0 0 1px rgba(0,225,255,.4),0 10px 40px -10px rgba(0,225,255,.55)}
body.brain .btn-primary:hover{box-shadow:0 0 0 1px rgba(0,225,255,.8),0 14px 50px -8px rgba(0,225,255,.75);color:#02122B}
body.brain .btn-navy{background:linear-gradient(100deg,#00E1FF,#1E8BFF);color:#02122B;border-color:transparent}
body.brain .btn-navy:hover{background:linear-gradient(100deg,#5FEBFF,#3E9BFF);color:#02122B}
body.brain .btn-outline,body.brain .btn-light,body.brain .btn-ghost{background:rgba(1,20,66,.45);color:var(--b-ink);border-color:var(--b-line2)}
body.brain .btn-outline:hover,body.brain .btn-light:hover,body.brain .btn-ghost:hover{border-color:var(--b-cyan);color:#fff}
body.brain .tab-btn{background:rgba(1,20,66,.45);color:var(--b-ink);border-color:var(--b-line2)}
body.brain .tab-btn.active,body.brain .tab-btn[aria-selected="true"]{background:linear-gradient(100deg,#00E1FF,#1E8BFF);color:#02122B;border-color:transparent}

/* ---------- forms ---------- */
body.brain input:not([type=checkbox]):not([type=radio]):not([type=range]),body.brain select,body.brain textarea{
  background:#050D1E;color:var(--b-ink);border:1px solid rgba(151,173,201,.28);border-radius:12px}
body.brain input::placeholder,body.brain textarea::placeholder{color:#6F86A6;opacity:1}
body.brain input:focus,body.brain select:focus,body.brain textarea:focus{border-color:var(--b-cyan);box-shadow:0 0 0 3px rgba(0,225,255,.18);outline:none}
:where(body.brain) :is(label,legend){color:var(--b-ink)}
body.brain select option{background:#0A1A38;color:var(--b-ink)}
body.brain .service-option{background:rgba(5,13,30,.8);border-color:rgba(151,173,201,.22);color:var(--b-ink)}
body.brain .service-option:has(input:checked){border-color:var(--b-cyan);box-shadow:0 0 0 1px var(--b-cyan),0 0 18px -6px var(--b-cyan)}
body.brain .progress-bar{background:rgba(151,173,201,.15)}
body.brain .progress-fill{background:linear-gradient(90deg,#00E1FF,#FF8A2B)}
body.brain .step-number,body.brain .progress-steps .step{background:rgba(1,20,66,.6);color:var(--b-muted);border-color:var(--b-line2)}
body.brain .form-msg{color:var(--b-ink)}
body.brain .faq-item summary{color:var(--b-ink)}
body.brain .faq-icon{background:rgba(0,225,255,.10)}
body.brain .faq-icon::before,body.brain .faq-icon::after{background:var(--b-cyan)}
body.brain .faq-body,body.brain .faq-body p{color:var(--b-muted)}
body.brain .subnav{background:rgba(3,6,13,.88);border-color:var(--b-line)}
body.brain .subnav a{color:var(--b-muted)}

/* ---------- footer ---------- */
body.brain .site-footer{background:linear-gradient(180deg,#03060D,#08082A);border-top:1px solid var(--b-line);position:relative}
body.brain .site-footer::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(0,225,255,.6),rgba(255,138,43,.5),rgba(123,92,255,.6),transparent)}
body.brain .site-footer h4{color:var(--b-cyan)}
body.brain .site-footer a{color:#B9C9E2}
body.brain .site-footer a:hover{color:#fff}
body.brain .site-footer__legal{border-top-color:var(--b-line2);color:var(--b-dim)}
body.brain .site-footer__ai{color:var(--b-dim)}

/* ---------- phone call bar (phones): solid, no blur over the page ---------- */
@media (max-width:760px){
  body.brain .mobile-bar{background:#03060D;-webkit-backdrop-filter:none;backdrop-filter:none;border-top:1px solid var(--b-line)}
  body.brain .mobile-bar .mobile-bar__quote{background:linear-gradient(100deg,#00E1FF,#1E8BFF 60%,#7B5CFF);color:#02122B}
  body.brain .site-footer{padding-bottom:84px}
}
/* never wider than the window */
body.brain{overflow-x:clip}
body.brain .site-header,body.brain .site-footer,body.brain main{max-width:100vw}
@media (min-width:1180px){
  body.brain .phero.has-bmv>.wrap{position:relative}
  body.brain .phero.has-bmv h1,body.brain .phero.has-bmv .lead,body.brain .phero.has-bmv .ptag,body.brain .phero.has-bmv>.wrap>.btn-row,body.brain .phero.has-bmv .phero__stats{max-width:calc(100% - 470px)}
  body.brain .phero.has-bmv .bmv{position:absolute;right:16px;top:64px;margin:0;width:420px;z-index:1}
  body.brain .phero.has-bmv .lead{margin-left:0;margin-right:0}
}
body.brain .phero{position:relative}
body.brain .phero>.wrap{position:relative;z-index:1}
/* ---------- contrast fixes found by the QA contrast gate ---------- */
body.brain .site-footer a.btn-primary,body.brain .site-footer a.btn-primary:hover{color:#02122B}
body.brain .rail>div{background:var(--b-panel);border:1px solid rgba(151,173,201,.16);color:var(--text)}
body.brain .callout b,body.brain .callout strong,body.brain .callout h3,body.brain .callout h4{color:var(--b-ink)}
body.brain .callout p,body.brain .callout li{color:var(--b-muted)}
body.brain .tier .nm{color:var(--b-ink)}
body.brain .step__num{box-shadow:0 0 0 6px #03060D,0 0 20px rgba(0,225,255,.45)}
body.brain .quick__h{color:#B79BFF}
body.brain figcaption{color:var(--b-muted)}
body.brain span.kicker,body.brain div.eyebrow,body.brain .eyebrow{color:var(--b-cyan)}
body.brain .card a:not(.btn),body.brain .step a:not(.btn),body.brain .callout a:not(.btn),body.brain .faq-body a,body.brain .article a:not(.btn){color:#5FD8FF}
html.tab-hidden .bmv,html.tab-hidden .bmv *,html.tab-hidden .bw-head *{animation-play-state:paused!important}
body.brain .partner-form label{color:var(--b-ink)}
body.brain .article figcaption,body.brain figure figcaption{color:var(--b-muted)}
body.brain .n{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45)}
body.brain legend{color:var(--b-ink)}
/* head wire stays behind the words: quieter, and only the bottom run on phones */
body.brain .page-head .bw-head,body.brain .phero .bw-head{opacity:.75}
@media (max-width:760px){
  .bw-head .bw-fg.p,.bw-head .bw-bg:nth-of-type(2),.bw-head .bw-port{display:none}
  .bw-head{opacity:.55}
}
/* 320-400px: long buttons wrap, long words break — no sideways scroll on the narrowest phones */
@media (max-width:420px){
  body.brain .btn{white-space:normal;max-width:100%;height:auto;text-align:center;justify-content:center}
  body.brain .btn span{white-space:normal}
  body.brain .check-list li,body.brain .fcard li,body.brain .fcard{overflow-wrap:anywhere;min-width:0}
}
@media (max-width:420px){body.brain main p,body.brain main li,body.brain main a{overflow-wrap:anywhere}}