/* ==========================================================================
   nivio-v3-compat.css — Nivio Brand Standards v3.2 applied to D4-era markup

   Some pages on this site were authored against an older internal design
   ("D4"): light SaaS ground, cobalt accent, soft shadows, 8-12px radii. This
   file brings them onto v3.2 WITHOUT touching their HTML or a word of their
   copy. It works in two moves:

     1. Redefine the D4 custom properties (--bg, --ink, --cobalt …) so each one
        resolves to a token in nivio-v3.css. Everything on the page that already
        reads those variables follows automatically.
     2. Override the handful of D4 devices that are not expressible as a token —
        gradients, radii, decorative shadows, heavy display weights.

   ONE PALETTE. This file authors no hex of its own: every colour is
   var(--nv-*, <fallback>) against nivio-v3.css :root, which is the single
   source for the v3.2 palette. If a value needs to change, it changes there.
   A literal hex added here is a bug — see the audit note at the foot of the
   file for how to check.

   Load order matters. This must come AFTER the page's own style block:
       1. the page's existing D4 CSS  (its own inline style element)
       2. shared/nivio-v3-compat.css
       3. shared/nivio-v3.css        (defines the --nv-* tokens)
   Custom properties resolve against the final cascade, so v3 may load last.
   NOTE: keep literal markup tags out of these comments. A closing style tag
   inside this file would terminate the element early if the CSS is ever inlined.

   New pages should be built against nivio-v3.css directly and never need this.
   Voice and copy are untouched by this file — it contains no text content.

   Formerly d9-skin.css. The "D9" name was an internal working title for what
   shipped as Brand Standards v3; it is retired and should not appear in new
   work.
   ========================================================================== */

/* ---------------------------------------------------------------
   1. TOKEN REMAP  (v3.2 palette)
   --------------------------------------------------------------- */
:root{
  /* Every value below resolves to a token defined in nivio-v3.css :root. No
     hex is authored here, so the v3 palette stays the single source of colour.
     v3 documents two dark surfaces (surface / surface-raised), so bg2 and bg3
     both land on Graphite and the strips inside a card are separated by the
     1px rule rather than by a third grey — "line, not shadow" (v3 p34). */
  --bg:  var(--nv-carbon,#171918);     /* was #FFFFFF */
  --bg2: var(--nv-graphite,#222523);   /* was #F7F8FB */
  --bg3: var(--nv-graphite,#222523);   /* was #EEF1F7 */

  /* Type inverts with the ground */
  --ink:  var(--nv-bone,#F2F0E9);   /* was #0A0F1F */
  --ink2: var(--nv-mist,#E4E1D8);   /* was #1F2A44 */
  --ink3: var(--nv-fog,#C8C6BE);    /* was #4A5675 — body copy, 12.0:1 on Carbon */
  --ink4: var(--nv-steel,#9EA29F);  /* was #8994B0 — Steel, captions, 6.83:1 */
  --ink5: var(--nv-ash,#5F6461);    /* was #C7CEDD — 2.93:1: rules and fills only,
                                       never text. Text that landed on ink5 is
                                       lifted to Steel further down. */

  /* The cobalt family becomes NEUTRAL, not Signal.
     D4 used cobalt ~50x per page as a general-purpose accent. Mapping that
     wholesale onto Signal would land at 30%+ and read as a lime brand, which
     v3 calls the failure state. Signal is re-applied deliberately below, only
     to the sanctioned elements. */
  --cobalt:      var(--nv-fog,#C8C6BE);
  --cobalt2:     var(--nv-steel,#9EA29F);
  --cobalt3:     var(--nv-mist,#E4E1D8);
  --cobalt4:     var(--nv-steel,#9EA29F);
  --cobalt-soft: rgba(242,240,233,.08);

  /* No second accent. Semantic colours carry a label, not a hue. */
  --violet: var(--nv-steel,#9EA29F);
  --mint:   var(--nv-signal,#D7E84A);   /* kept as Signal: marks positive/ok only */
  --amber:  var(--nv-steel,#9EA29F);
  --rose:   var(--nv-steel,#9EA29F);

  /* Lines */
  --rule:  var(--nv-border,rgba(242,240,233,.10));
  --rule2: var(--nv-border-strong,rgba(242,240,233,.45));

  /* Line, not shadow */
  --shadow-sm:   none;
  --shadow-md:   none;
  --shadow-lg:   none;
  --shadow-glow: none;

  /* Names the D4 page has no token for. Aliases only — all v3 values. */
  --carbon:var(--nv-carbon,#171918);
  --bone:var(--nv-bone,#F2F0E9);
  --steel:var(--nv-steel,#9EA29F);
  --slate:var(--nv-slate,#3A3D3B);
  --signal:var(--nv-signal,#D7E84A);
  --signal-h:var(--nv-signal-hov,#C3D53C);
  --signal-ink:var(--nv-signal-mid,#8EA31D);       /* graphics on light, never text */
  --signal-ink-bone:var(--nv-signal-moss,#41630F); /* text on light — 6.11:1 on Bone */

  /* The Bone-ground ladder, so no page invents its own light-surface values. */
  --bone-rule:var(--nv-border-alt,#C8C6BE);   /* hairline on Bone */
  --bone-ink:var(--nv-carbon,#171918);        /* headings on Bone   — 15.6:1 */
  --bone-ink2:var(--nv-slate,#3A3D3B);        /* body/dek on Bone   —  9.64:1 */
  --bone-ink3:var(--nv-ash,#5F6461);          /* muted on Bone      —  5.29:1 */
  --bone-fill:var(--nv-mist,#E4E1D8);         /* raised panel on Bone */
}

html,body{background:var(--bg);color:var(--ink)}

/* ---------------------------------------------------------------
   2. GEOMETRY — the v3 radius scale, hairline, no elevation

   This layer used to force border-radius:0 on everything. v3 p34 does not:
   it specifies 0 for imagery, 3px for buttons and inputs, 4px for cards and
   panels, and 999px for status dots only. Forcing zero put the site at odds
   with its own standard and with the blog index, which had to win the radius
   back with per-class !important overrides.

   The blanket zero stays as the DEFAULT so no D4 radius (8/10/12px) can leak
   through; the three families v3 names then take their documented value. An
   element v3 does not name is square, which is the intended fallback.
   --------------------------------------------------------------- */
*{border-radius:var(--nv-radius-0,0) !important;box-shadow:none !important}

/* 3px — controls you click or type into */
.btn,button,input,select,textarea,.ftag,.achip,.role-chip,.ppill,.sso-btn,
.email-input,.sidebar-btn,.tabbtn,.search-wrap input,.pc-btn,.lead-go{
  border-radius:var(--nv-radius-sm,3px) !important}

/* 4px — cards and panels */
.bx,.kpi,.cappanel,.cap-grid,.product-card,.pc-body,.demo-frame,.solverdemo,
.float-card,.tabwrap,.sd-body,.steps,.post-card,.sidebar-card,.cta-card,
.blog-cta,.article-cta,.card,.pc-url{
  border-radius:var(--nv-radius,4px) !important}

/* 0 — imagery is never rounded */
img,svg,video,picture,.post-img,.vis-map{border-radius:var(--nv-radius-0,0) !important}

/* 999px — status dots and genuine pill affordances */
.pill-live,.dot,.bdg-tag,.hero-badge,.cta-badge,.pc-pill,.cap-chip,
.pc-lights span,.pc-lights i,.sd-donut,.sd-node{border-radius:var(--nv-radius-full,999px) !important}

/* ---------------------------------------------------------------
   3. GRADIENTS — removed entirely (§1 Forbidden)
   --------------------------------------------------------------- */
.hero-orb,.o2{display:none !important}          /* soft radial orbs were a D4 device */

/* Gradient text. §3 allows ONE Signal phrase per hero, plus the CTA and the
   single key number. Every other .grad reverts to plain Bone. */
.grad{
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:currentColor !important;
  color:var(--ink) !important;
}
.hero-h .grad,
.cta-h .grad,
.pc-plan-val .grad{color:var(--signal) !important}

/* Gradient fills */
.btn.p,.bdg-tag,.icn,.step .n,.cta-step .n{background:var(--signal) !important;color:var(--carbon) !important}
.cta-card{background:var(--bg2) !important;border:1px solid var(--rule);position:relative}
.cta-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:var(--signal);z-index:5}

/* ---------------------------------------------------------------
   4. TYPE — display weight drops to 500; authority comes from scale (§4)
   --------------------------------------------------------------- */
h1,h2,h3,h4,.hero-h,.sec-h,.cta-h,.bx-h,.cap-h,.kpi .v,.pc-plan-val,.big{
  font-weight:500 !important;
}
.hero-h{letter-spacing:-.032em}
.sec-h,.cta-h{letter-spacing:-.024em}

/* ---------------------------------------------------------------
   5. STRUCTURE — cards defined by hairline instead of shadow + radius
   --------------------------------------------------------------- */
.bx,.kpi,.cap-grid,.cappanel,.product-card,.pc-body,.demo-frame,.solverdemo,
.float-card,.tabwrap,.sd-body,.steps{
  background:var(--bg2) !important;
  border:1px solid var(--rule) !important;
}
.pc-topbar,.pc-bar,.pc-list-hdr,.tabstrip,.sd-head,.sd-foot{
  background:var(--bg3) !important;border-color:var(--rule) !important;
}
.pc-row,.pc-list-hdr,.cta-step,.sd-node{border-color:var(--rule) !important}
.pc-url{background:var(--bg3) !important;border:1px solid var(--rule) !important;color:var(--ink3) !important}

/* Nav + tape */
.nav{background:rgba(23,25,24,.86) !important;border-bottom:1px solid var(--rule) !important}
.nav-a{color:var(--ink4) !important}
.nav-a:hover{color:var(--ink) !important;background:transparent !important}
.nav-a.active{color:var(--ink) !important;background:transparent !important}
.tape{background:var(--bg) !important;border-bottom:1px solid var(--rule) !important}
.tape-run{color:var(--ink4) !important}
/* Ticker: the commodity carries the weight (Bone), the message sits back
   (Steel), and the figure keeps Signal. Swapped from the D4 order. */
.tape-run .s,.ti .s{color:var(--ink) !important}
.ti .v{color:var(--ink4) !important}

/* Buttons */
.btn{border-radius:0 !important;font-weight:500 !important}
.btn.p{font-weight:600 !important}
.btn.p:hover{background:var(--signal-h) !important;transform:none !important}
.btn.s{background:transparent !important;border:1px solid var(--rule2) !important;color:var(--ink) !important}
.btn.s:hover{border-color:var(--ink) !important;color:var(--ink) !important}
.btn.ghost{color:var(--ink4) !important}
.btn.ghost:hover{color:var(--ink) !important;background:transparent !important}

/* Badges + live state — Signal dot is a sanctioned use (§3.2) */
.hero-badge{background:transparent !important;border:1px solid var(--rule) !important;color:var(--ink3) !important}
.pill-live{border:1px solid var(--rule) !important;color:var(--ink4) !important}
.pill-live i,.pill-live .dot,.pc-live .dot{background:var(--signal) !important}
.cta-badge{background:rgba(242,240,233,.08) !important;border:1px solid var(--rule) !important;color:var(--ink) !important}

/* Section kickers — Steel, not Signal. Eyebrow numbers stay the Signal use. */
.sec-kick{color:var(--ink4) !important}
.bx-k,.cap-k{color:var(--ink4) !important}
.bx-meta,.cap-meta,.demo-cap{color:var(--ink4) !important;border-color:var(--rule) !important}

/* Positive / ok markers keep Signal */
.ok,.up,.pc-row .ok,.sd-status{color:var(--signal) !important}

/* Footer + logo strip */
/* scoped to the <footer> element: .foot is also the KPI footnote class on the
   solve plate, and !important was painting a 60px-padded rule into every cell */
footer.foot{background:var(--bg) !important;border-top:1px solid var(--rule) !important}
/* The partner band becomes a Bone break only where the page opts in with
   .logos-bone. On the other five pages the band is followed immediately by a
   Bone #modules, so flipping it globally would merge the two into one slab.
   Index opts in because the section below its band is Carbon. */
.logos{background:var(--bg) !important;border-color:var(--rule) !important}
.logos-lbl{color:var(--ink4) !important}
.logos .logo-mark{color:var(--ink4) !important}  /* ink5 on Carbon is 3.62:1 — below AA */
.logos.logos-bone{background:var(--bone) !important;border-color:var(--bone-rule) !important}
.logos.logos-bone .logos-lbl{color:var(--carbon) !important}
/* Raw Signal is 1.19:1 on Bone — invisible. The Bone-ground substitute is
   Signal Moss (--nv-signal-moss) at 6.11:1, which is what "signal yellow"
   has to mean on this band. */
.logos.logos-bone .logos-lbl .lo-sig{color:var(--signal-ink-bone) !important}
/* Signal is 1.19:1 on Bone — unusable. --signal-ink-bone (v3 Signal Moss) is
   the Bone-ground substitute at 6.11:1, which clears AA for body text as well
   as large. Signal Deep was retired at v3.2. See DECISIONS.md 3. */

.logos.logos-bone .logo-mark{color:var(--bone-ink3) !important}  /* Ash, 5.29:1 on Bone */
.logos .logos-cap{color:var(--ink4) !important}
.logos.logos-bone .logos-cap{color:var(--nv-slate,#3A3D3B) !important}  /* 9.64:1 on Bone */

/* ---------------------------------------------------------------
   6. THE BONE SECTION (§7)
   A page that is Carbon top to bottom is off-system. "What it does" carries
   the Bone 30%. Scoped by id so no other section is affected.
   --------------------------------------------------------------- */
#modules{background:var(--bone) !important;color:var(--carbon) !important}
#modules .sec-h,#modules .bx-h,#modules h2,#modules h3{color:var(--carbon) !important}
#modules .sec-dek,#modules .bx p,#modules p{color:var(--bone-ink2) !important}
#modules .sec-kick,#modules .bx-k,#modules .bx-meta{color:var(--slate) !important}
#modules .bx{background:var(--bone) !important;border-color:var(--bone-rule) !important}
#modules .bento{background:var(--bone-rule)}
#modules .bx-meta{border-top-color:var(--bone-rule) !important}
#modules .grad{color:var(--carbon) !important}
#modules .cnum,#modules .lab{color:var(--signal-ink) !important}
/* Signal fails contrast on Bone (§3 Accessibility) */
#modules .ok,#modules .up{color:var(--signal-ink) !important}

/* ---------------------------------------------------------------
   7. MOTION — restrained (§8)
   --------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none !important;transition:none !important}
}

/* ---------------------------------------------------------------
   8. D4 DEVICES THAT HARD-CODE COLOUR
   These bypass the token layer (literal #fff, rgba(37,99,235,…), SVG stops),
   so they need naming explicitly. Still no markup or copy changes.
   --------------------------------------------------------------- */

/* Floating satellite cards were white panels */
.float-card{background:var(--bg2) !important;border:1px solid var(--rule) !important}
.float-card.fc1 .icn{background:var(--signal) !important;color:var(--carbon) !important}
.float-card.fc1 .t,.float-card.fc2 .v{color:var(--ink) !important}
.float-card.fc1 .s b,.float-card.fc2 .u{color:var(--signal) !important}
.float-card.fc2 .v .grad{color:var(--signal) !important}

/* Live pill: a status pill is one of the few round shapes v3 keeps (p34), and the label must not wrap */
.pill-live{
  background:transparent !important;color:var(--ink4) !important;
  border:1px solid var(--rule) !important;border-radius:0 !important;
  white-space:nowrap;font-weight:500 !important;
}
.pill-live::before{background:var(--signal) !important;border-radius:50% !important}

/* Tabs + chips */
.pc-tabs,.cap-chip{background:var(--bg3) !important;border-color:var(--rule) !important;color:var(--ink3) !important}
.pc-tab{color:var(--ink4) !important}
.pc-tab.active{background:var(--bg) !important;color:var(--ink) !important}
.tabbtn{background:transparent !important;border:1px solid var(--rule2) !important;color:var(--ink3) !important;border-radius:0 !important}
.tabbtn:hover{border-color:var(--ink) !important;color:var(--ink) !important}
.tabbtn.active{background:var(--signal) !important;color:var(--carbon) !important;border-color:transparent !important}
.tabbtn.active .n{color:rgba(23,25,24,.65) !important}

/* Driver avatars were a cobalt→violet gradient */
.av{background:var(--bg3) !important;color:var(--ink3) !important;border:1px solid var(--rule) !important}

/* Solver demo instrument panel */
.sd-go{background:var(--signal) !important;color:var(--carbon) !important;border-radius:0 !important}
.sd-map{background:var(--bg2) !important;border-color:var(--rule) !important}
.sd-map circle{fill:var(--bg3) !important;stroke:var(--ink5) !important}
.sd-map line,.sd-map path{stroke:var(--ink5) !important}
.sd-fill,.sd-arc{stroke:var(--signal) !important;background:var(--signal) !important}
.sd-track{background:rgba(242,240,233,.12) !important}
.take{background:rgba(215,232,74,.06) !important}

/* SVG gradient stops (the sparkline) */
linearGradient stop{stop-color:var(--signal) !important}
.pc-hero-l svg path[stroke],.pc-hero-l svg polyline{stroke:var(--signal) !important}

/* Anything still leaning on the old semantic hues */
.mono{font-variant-numeric:tabular-nums}

/* .pc-pill is a card, not a pill — D4 gave it a white fill and a big radius. */
.pc-pill{
  background:var(--bg2) !important;border:1px solid var(--rule) !important;
  border-radius:0 !important;
}
.pc-pill .l{color:var(--ink4) !important}
.pc-pill .v{color:var(--ink) !important}
.pc-pill .v .up,.pc-pill .up{color:var(--signal) !important}

/* Panels whose cobalt/violet washes are written as literal rgba() */
.pc-hero-l,.pc-cta{
  background:var(--bg3) !important;border:1px solid var(--rule) !important;
}
.pc-cta .txt{color:var(--ink3) !important}
.pc-cta .txt b{color:var(--ink) !important}

/* Route map: red = before, green = optimized. Signal marks the resolved route. */
.mr{stroke:var(--ink5) !important}
.mg{stroke:var(--signal) !important}

/* Bone-ground contrast: Steel is tuned for Carbon and goes muddy on Bone.
   §3 Accessibility — small text on Bone prefers Carbon/Slate. */
#modules .bx-meta,#modules .bx-meta *,
#modules .cap-meta,#modules .cap-meta *{color:var(--slate) !important}
/* Signal-as-ink needs two values: Signal Mid #8EA31D reads on Carbon but only 2.85:1 on
   Bone, and darkening the single token broke .lab on the dark cards. The Bone
   band gets its own darker olive (5.03:1); dark grounds keep the original. */
#modules .bx-k,#modules .cap-k{color:var(--signal-ink-bone) !important}

/* ---------------------------------------------------------------
   9. LOGO — v3 master art in a D4 nav
   The old horizontal logos were sized at 38px tall. The v3 lockups are a
   different aspect (100-unit cap height in a much wider viewBox), so 38px
   would run ~430px wide. 26px puts the NIVIO portion at 97px — clear of the
   88px minimum (§5) — whatever the product name's length.
   --------------------------------------------------------------- */
.brand-logo{height:26px !important;width:auto;display:block;flex-shrink:0}
@media(max-width:640px){.brand-logo{height:24px !important}}

/* ---------------------------------------------------------------
   10. REMAINING HARD-CODED COLOUR ACROSS THE SITE
   Swept from every page's style block. These sit outside :root, so the token
   remap can't reach them.
   --------------------------------------------------------------- */

/* macOS traffic-light dots in the faux window chrome */
.pc-lights span:nth-child(1),.pc-lights span:nth-child(2),.pc-lights span:nth-child(3){
  background:var(--rule2) !important
}

/* Dark CTA panel was a navy gradient (§1 Forbidden) */
.cta-card{background:var(--bg2) !important}
.cta-h .grad{color:var(--signal) !important;background:none !important;-webkit-text-fill-color:var(--signal) !important}

/* Status colour: v3 has no red/amber/green triad. State carries a label and a
   position; Signal marks only the good outcome. (§3, §9 data visualization) */
.pc-row .gauge.a span,.pc-row .gauge.r span{background:var(--steel) !important}
.pc-row .gauge.g span,.float-card.fc1 .icn{background:var(--signal) !important;color:var(--carbon) !important}

/* .sd-comb is a text label, not a bar — it was the tail of the selector list
   above, so background:steel painted its text in its own background colour
   (1.0:1, invisible). .sd-node is an SVG circle and needs fill/stroke rather
   than background. Both are split out; the gauge bars keep their steel fill. */
.sd-comb{color:var(--steel) !important;background:transparent !important}
.sd-node{fill:var(--bg3) !important;stroke:var(--steel) !important}

/* Status marks read as bare glyphs on the row, not pills. The D4 gradient chips
   survived the remap inconsistently: ✓ kept a near-white chip with Signal on it
   (Signal fails on light — §5), ! lost its chip entirely, ? kept a grey one.
   The glyph carries the state; colour only supports it. */
.pc-row .tk .ok,.pc-row .tk .late,.pc-row .tk .idle{
  background:none !important;background-color:transparent !important;
  width:auto !important;height:auto !important;line-height:inherit !important;
  border-radius:0 !important}
.pc-row .tk .ok{color:var(--signal) !important}
.pc-row .tk .late,.pc-row .tk .idle{color:var(--steel) !important}

/* Light instrument panels */
.vis-map,.sd-map,.demo-frame,.sd-head{background:var(--bg2) !important;border-color:var(--rule) !important}

/* Blog article tags — six pastel product palettes become one neutral chip.
   v3 allows no second accent, and pastels are a light-theme device. */
.a-tag,.a-tag.dispatch,.a-tag.marketer,.a-tag.bind,.a-tag.shield,
.a-tag.vet,.a-tag.board-room,.a-tag.role,.a-tag.topic{
  background:transparent !important;color:var(--ink3) !important;
  border-color:var(--rule2) !important;
}

/* Below 640px a product lockup cannot shrink without breaking the 88px wordmark
   minimum (§5), so the nav drops the product name and shows the bare wordmark.
   .brand-mark is injected next to the existing .brand-logo; no copy is added. */
.brand-mark{display:none !important}
@media(max-width:640px){
  .brand-logo:not(.brand-mark){display:none !important}
  .brand-mark{display:block !important;height:24px !important;width:auto}
}

/* The live pill no longer wraps (nowrap), which made an
   already-overflowing mobile nav wider. It is decoration, not navigation. */
@media(max-width:640px){
  .pill-live{display:none !important}
  .nav-r{gap:10px !important}
}

/* Blog in-article CTA was a navy gradient panel */
.article-cta{background:var(--bg2) !important;border:1px solid var(--rule) !important;position:relative}
.article-cta:before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:var(--signal)}
.article-cta h3{color:var(--ink) !important;font-weight:500 !important}
.article-cta p{color:var(--ink3) !important}

/* ---- Panels the token remap could not reach ------------------------------
   Each of these carries a literal #fff in the page's own CSS or in an inline
   style attribute, so no redefinition of --bg or --card reaches it. On the
   Carbon ground they rendered as white plates with Bone text still on them —
   the testimonial card measured 1.14:1, i.e. blank. Same class of bug as the
   hardcoded #0A0F1F demo placeholder on the homepage. */
.q-card{background:var(--bg2) !important;border-color:var(--rule) !important}
.q-mark{background:var(--bg3) !important;color:var(--steel) !important}
.q-avatar{background:var(--bg3) !important;color:var(--ink) !important}
.q-badge{background:var(--bg3) !important;color:var(--ink3) !important}
.step .idx{background:var(--bg3) !important;border-color:var(--rule) !important;
  color:var(--ink) !important}
/* Inline background:#fff — the adviser chips on board-room, and anything else
   that hardcodes it in a style attribute. Author !important outranks a plain
   inline declaration, so this reaches them without editing the markup. */
[style*="background:#fff"]{background:var(--bg3) !important}

/* ---- Bone-ground text tokens ---------------------------------------------
   --ink3 and --ink4 are tuned to read on Carbon. On the Bone band inside
   #modules they fall to 1.42:1 and 2.27:1. The band gets its own darker pair,
   exactly as Signal-as-ink did with --signal-ink-bone above. */
:root{--ink3-bone:var(--bone-ink2); --ink4-bone:var(--bone-ink3)}
#modules .vis-bar{color:var(--ink3-bone) !important}
#modules .vis-bar .v{color:var(--carbon) !important}
#modules .bx-visual span[style*="--ink4"]{color:var(--ink3-bone) !important}

/* ---- Hero solve instrument: --ink5 is not a text colour --------------------
   hero-optimize.css sets every label, footnote and map annotation in --ink5
   (var(--nv-ash,#5F6461)), which is 3.62:1 on Carbon — the same failure already corrected
   on .logo-mark in the contrast pass. --ink5 is a hairline and dot value;
   text on Carbon starts at --ink4 (6.83:1). Dots and city marks keep --ink5,
   since they are not text. */
.ox-runmeta .k,
.ox-kpi .lab,
.ox-kpi .foot,
.ox-phead .ct,
.ox-row .a i,
.ox-row .b,
.ox-legend span,
.ox-note{color:var(--ink4) !important}
.ox-rlabel{fill:var(--ink4) !important}

/* ---- One-Signal rule (v3 p24) --------------------------------------------
   Signal marks one thing per view. The CTA band's Signal is its primary
   button; the headline clause and the step numbers go Bone and Steel.
   Exception: the factors headline keeps its Signal clause alongside the
   active nav state, at the client's direction. */
#cta .cta-h .grad{color:var(--ink) !important;-webkit-text-fill-color:var(--ink) !important}
#cta .cta-step .n,#cta .step .n{background:var(--bg3) !important;
  color:var(--ink) !important;border:1px solid var(--rule) !important}

/* The factors section returned to Carbon at the client's direction, so the
   Bone override block that used to live here is gone. Bone grounds on this
   page are now the partner band and #desks. */

/* ---- #cta on Bone --------------------------------------------------------
   The open-API band arrived on Carbon directly above the CTA, which would have
   put two Carbon grounds together at the foot of the page. The CTA moves to
   Bone and the run stays Bone, Carbon, Bone, Carbon to the footer.

   Scoped to .cta-bone so the same markup still renders on Carbon anywhere else
   it is used. Signal survives here as a button FILL — Carbon on Signal is
   13.07:1 — while every accent that is text becomes Signal Moss. */
.cta-wrap.cta-bone{background:var(--nv-bone,#F2F0E9) !important;color:var(--nv-carbon,#171918) !important}
.cta-wrap.cta-bone::before{display:none}

.cta-bone .cta-card{background:var(--bone-fill) !important;border:1px solid var(--nv-fog,#C8C6BE) !important;
  color:var(--nv-carbon,#171918) !important;box-shadow:none !important}
.cta-bone .cta-card::before,.cta-bone .cta-card::after{display:none}
.cta-bone .cta-card:before{content:"";display:block;position:absolute;top:0;left:0;
  width:100%;height:2px;background:var(--signal-ink-bone) !important;z-index:5}

.cta-bone .cta-h{color:var(--nv-carbon,#171918) !important}
#cta.cta-bone .cta-h .grad{color:var(--signal-ink-bone) !important;
  -webkit-text-fill-color:var(--signal-ink-bone) !important;background:none !important}
.cta-bone .cta-card p{color:var(--bone-ink2) !important}
.cta-bone .cta-card p b{color:var(--nv-carbon,#171918) !important}
.cta-bone .cta-badge{background:rgba(65,99,15,.09) !important;
  border:1px solid rgba(65,99,15,.30) !important;color:var(--signal-ink-bone) !important}

/* the steps panel inverts to Carbon — depth by surface value, as v3 asks */
.cta-bone .cta-side{background:var(--nv-carbon,#171918) !important;
  border:1px solid var(--nv-carbon,#171918) !important}
.cta-bone .cta-side-hdr{color:var(--nv-fog,#C8C6BE) !important}
.cta-bone .cta-side-hdr b{color:var(--nv-signal,#D7E84A) !important}
.cta-bone .cta-step{border-bottom-color:rgba(242,240,233,.10) !important}
#cta.cta-bone .cta-step .n{background:rgba(242,240,233,.06) !important;
  color:var(--nv-bone,#F2F0E9) !important;border:1px solid rgba(242,240,233,.18) !important}
.cta-bone .cta-step .t{color:var(--nv-bone,#F2F0E9) !important}
.cta-bone .cta-step .d{color:var(--nv-steel,#9EA29F) !important}

/* primary keeps the Signal fill; secondary becomes a Carbon outline */
.cta-bone .cta-card .btn.p{background:var(--nv-signal,#D7E84A) !important;color:var(--nv-carbon,#171918) !important;
  border-color:var(--nv-signal,#D7E84A) !important;box-shadow:none !important}
.cta-bone .cta-card .btn.s{background:transparent !important;color:var(--nv-carbon,#171918) !important;
  border:1px solid var(--bone-rule) !important}
.cta-bone .cta-card .btn.s:hover{border-color:var(--nv-carbon,#171918) !important;background:transparent !important}


/* ==========================================================================
   14. THE BLOG INDEX — the product-colour subsystem

   blog/index.html carries its own six-colour product palette (--c-dispatch,
   --cb-dispatch and five siblings) plus hardcoded card-image gradients. None of
   it reads the tokens redefined in §1, so none of it was ever re-skinned: the
   page furniture converted while every post card stayed D4 cobalt.

   Founder decision 2026-09-25: Signal carries Dispatch; the five unlaunched
   products go neutral. That matches the Dispatch-only launch and keeps the page
   inside one accent.

   Signal is never a background wash (§v3 p46), so the card panel is a neutral
   raised surface and the stat figure carries the single Signal mark per card.
   ========================================================================== */

:root{
  /* Dispatch = the live product = Signal. */
  --c-dispatch:var(--nv-signal,#D7E84A);    --cb-dispatch:rgba(215,232,74,.12);
  /* The five unlaunched products read as neutral, not as five more accents. */
  --c-marketer:var(--nv-fog,#C8C6BE);    --cb-marketer:rgba(242,240,233,.08);
  --c-bind:var(--nv-fog,#C8C6BE);        --cb-bind:rgba(242,240,233,.08);
  --c-shield:var(--nv-fog,#C8C6BE);      --cb-shield:rgba(242,240,233,.08);
  --c-vet:var(--nv-fog,#C8C6BE);         --cb-vet:rgba(242,240,233,.08);
  --c-boardroom:var(--nv-fog,#C8C6BE);   --cb-boardroom:rgba(242,240,233,.08);
}

/* Card image panel — a raised neutral surface, never a Signal wash. */
.post-img.dispatch-bg,.post-img.marketer-bg,.post-img.bind-bg,
.post-img.shield-bg,.post-img.vet-bg,.post-img.boardroom-bg{
  background:var(--bg3) !important;border-right:1px solid var(--rule)}
@media(max-width:680px){
  .post-img.dispatch-bg,.post-img.marketer-bg,.post-img.bind-bg,
  .post-img.shield-bg,.post-img.vet-bg,.post-img.boardroom-bg{border-right:none;border-bottom:1px solid var(--rule)}}

/* The stat figure is the one ranked Signal mark on a Dispatch card. */
.post-img-stat .big{font-weight:600 !important;letter-spacing:-.025em !important}
.big.dispatch{color:var(--signal) !important}
.big.marketer,.big.bind,.big.shield,.big.vet,.big.boardroom{color:var(--ink2) !important}
.post-img-stat .label{color:var(--ink4) !important;letter-spacing:.12em !important;font-weight:500 !important}

/* Product pill, role chips, card, link — v3 radii, no 700 weights. */
.ppill{font-weight:500 !important;letter-spacing:var(--nv-track-label,.12em) !important}
.role-chip,.achip,.ftag{font-weight:500 !important}
.post-card{border:1px solid var(--rule) !important;background:var(--bg2) !important}
.post-card:hover{border-color:var(--signal) !important;transform:none !important;box-shadow:none !important}
.post-title{font-weight:600 !important}
.read-more{color:var(--signal) !important;font-weight:600 !important}
.sidebar-card{border:1px solid var(--rule) !important}

/* The blog index's own CTA panel. Section 12 covers .article-cta on the posts
   but this sibling was never added, so it kept its D4 navy gradient
   (#0A0F1F -> #1F2A44) — the last hardcoded D4 colour on the page. Same
   treatment as .article-cta: raised surface, Signal as a 2px top edge rather
   than a fill, v3 radius and display weight. */
.blog-cta{background:var(--bg2) !important;border:1px solid var(--rule) !important;
  position:relative;overflow:hidden}
.blog-cta:before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;
  background:var(--signal)}
.blog-cta h2{color:var(--ink) !important;font-weight:600 !important}
.blog-cta p{color:var(--ink3) !important}

/* ==========================================================================
   15. THE BLOG INDEX — THE BONE FILTER RAIL

   blog/index.html was Carbon from nav to footer, which v3 p7 calls off-system:
   every page owes Bone roughly 30%. The sticky filter rail is the natural Bone
   band — it is furniture, not content, so flipping its ground separates the
   controls from the article grid without interrupting a reading column.

   It had been carrying the D4 literal rgba(255,255,255,.96): a near-white shelf
   on a Carbon page. That value is unreachable from the token remap in §1, which
   is why it survived every earlier pass.

   Everything below reads the --bone-* ladder declared in §1. Signal is 1.19:1
   on Bone, so the active-filter accent is Signal Moss; the six product colours
   the page sets per chip all resolve to Moss here for the same reason.
   ========================================================================== */

.filter-bar{
  background:var(--bone) !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  border-bottom:1px solid var(--bone-rule) !important;
}
.filter-bar .flabel{
  font-family:var(--nv-font-mono,'Geist Mono',ui-monospace,monospace) !important;
  font-size:11px !important;                                  /* small-type floor */
  font-weight:500 !important;
  letter-spacing:var(--nv-track-label,.12em) !important;
  color:var(--bone-ink2) !important;                           /* Slate, 9.64:1 */
}
.filter-bar .fsep{background:var(--bone-rule) !important}
.filter-bar .title-row{border-top:1px solid var(--bone-rule) !important}

/* Filter chips. Resting = Slate outline; hover = Carbon; selected = Moss. */
.filter-bar .ftag,
.filter-bar .achip{
  border:1px solid var(--bone-rule) !important;
  background:transparent !important;
  color:var(--bone-ink2) !important;
  font-weight:500 !important;
}
.filter-bar .ftag:hover,
.filter-bar .achip:hover{
  border-color:var(--bone-ink) !important;
  color:var(--bone-ink) !important;
  background:transparent !important;
}
/* [data-p] keeps this above the page's own .ftag.active[data-p="dispatch"] rules,
   which set color to the raw product hex — 1.19:1 on this ground. */
.filter-bar .ftag.active,
.filter-bar .ftag.active[data-p],
.filter-bar .ftag.active[data-title]{
  color:var(--signal-ink-bone) !important;              /* Moss, 5.58:1 on the tint */
  border-color:rgba(65,99,15,.42) !important;
  background:rgba(65,99,15,.08) !important;
}
.filter-bar .achip .x{opacity:.8}

/* The hero above the rail is Bone too (§16), so the two read as one masthead
   slab and the rail's only job at its foot is the boundary to the Carbon grid. */


/* ==========================================================================
   AUDIT — how to check this file still declares no palette of its own

   Run, from the website root:

       python3 tools/check-palette.py

   It strips comments and var() fallbacks; anything left is a literal hex and
   a bug. A regex for that check cannot live in this comment: the pattern it
   needs contains a comment terminator and would end the block early.
   ========================================================================== */

/* --- blog index sidebar CTAs ---------------------------------------------
   .sidebar-btn was a D4 cobalt gradient with white text. Once --cobalt went
   neutral (§1) the gradient resolved to Mist-over-Fog and the white label
   landed at ~1.2:1 — light on light. Gradients are forbidden anyway (§3).

   Ranked rather than doubled: the newsletter submit is a real conversion and
   takes the one Signal fill in this column; the second CTA is a Bone outline,
   which keeps the Signal budget (1 primary + supporting marks) intact. */
.sidebar-btn{background:transparent !important;font-weight:500 !important}
.sidebar-btn:hover{transform:none !important;box-shadow:none !important}
button.sidebar-btn{
  background:var(--signal) !important;color:var(--carbon) !important;
  border:1px solid var(--signal) !important;font-weight:600 !important}
button.sidebar-btn:hover{background:var(--signal-h) !important}
a.sidebar-btn{
  border:1px solid var(--rule2) !important;color:var(--ink) !important}
a.sidebar-btn:hover{border-color:var(--ink) !important;background:transparent !important}

/* ==========================================================================
   16. THE BLOG INDEX — SECTION RHYTHM

   v3 p7 asks a page to spend roughly 30% of its height on Bone and to
   alternate grounds rather than run three sections deep on one. /blog was
   Carbon from nav to footer; §15 gave it a filter rail, which is ~2%.

   Three Bone blocks, chosen so the rhythm alternates and each one is doing a
   job rather than decorating:

     nav            Carbon   sticky chrome
     hero + rail    BONE     the masthead — one slab, since they touch
     post grid      Carbon   the reading column
     featured card  BONE     the Bone ground IS the featured treatment; no
                             badge, no second accent, no extra device
     blog CTA       BONE     the page's one conversion panel
     footer         Carbon   closes on the brand ground

   Every value reads the --bone-* ladder from §1. Signal is 1.19:1 on Bone,
   so anything that carried Signal on Carbon carries Signal Moss here.
   ========================================================================== */

/* --- the masthead ------------------------------------------------------- */
.blog-hero{
  background:var(--bone) !important;
  border-bottom:none !important;              /* the rail continues the slab */
}
.blog-hero h1{color:var(--bone-ink) !important;font-weight:500 !important}
.blog-hero p{color:var(--bone-ink2) !important}

.hero-kick{
  background:rgba(65,99,15,.08) !important;
  border:1px solid rgba(65,99,15,.28) !important;
  color:var(--signal-ink-bone) !important;
  font-weight:500 !important;
  letter-spacing:var(--nv-track-label,.12em) !important;
  text-transform:uppercase !important;
  font-size:11px !important;                  /* small-type floor */
}
.hero-kick::before{background:var(--signal-ink-bone) !important}

/* Search field on Bone: Mist fill so the input reads as recessed, Fog edge,
   Carbon text, Ash placeholder (5.29:1 — Steel is 2.4:1 here and fails). */
.blog-hero .search-wrap input{
  background:var(--bone-fill) !important;
  border:1px solid var(--bone-rule) !important;
  color:var(--bone-ink) !important;
}
.blog-hero .search-wrap input:focus{
  border-color:var(--bone-ink) !important;
  background:var(--bone-fill) !important;
  box-shadow:none !important;
}
.blog-hero .search-wrap input::placeholder{color:var(--bone-ink3) !important}
.blog-hero .search-ico,.blog-hero .search-x{color:var(--bone-ink3) !important}
.blog-hero .search-x:hover{color:var(--bone-ink) !important}

/* --- the featured card --------------------------------------------------- */
/* Bone is the whole featured treatment. The card keeps the same geometry as
   its Carbon siblings; only the ground changes. */
.post-card.featured{
  background:var(--bone) !important;
  border:1px solid var(--bone-rule) !important;
}
.post-card.featured:hover{border-color:var(--bone-ink) !important}
.post-card.featured .post-img{
  background:var(--bone-fill) !important;
  border-right:1px solid var(--bone-rule) !important;
}
.post-card.featured .post-img-stat .big,
.post-card.featured .big.dispatch{color:var(--signal-ink-bone) !important}
.post-card.featured .post-img-stat .label{color:var(--bone-ink3) !important}
.post-card.featured .post-title{color:var(--bone-ink) !important}
.post-card.featured .post-excerpt,
.post-card.featured .post-body p{color:var(--bone-ink2) !important}
.post-card.featured .post-meta,
.post-card.featured .post-date,
.post-card.featured .read-time{color:var(--bone-ink3) !important}
.post-card.featured .ppill{
  background:rgba(65,99,15,.10) !important;
  color:var(--signal-ink-bone) !important;
  border:1px solid rgba(65,99,15,.28) !important;
}
.post-card.featured .role-chip{
  color:var(--bone-ink2) !important;border-color:var(--bone-rule) !important}
.post-card.featured .read-more{color:var(--signal-ink-bone) !important}
.post-card.featured .post-foot,
.post-card.featured .post-body > *:last-child{border-top-color:var(--bone-rule) !important}
@media(max-width:680px){
  .post-card.featured .post-img{border-right:none !important;
    border-bottom:1px solid var(--bone-rule) !important}}

/* --- the CTA panel ------------------------------------------------------- */
.blog-cta{
  background:var(--bone) !important;
  border:1px solid var(--bone-rule) !important;
}
.blog-cta:before{background:var(--signal-ink-bone) !important}
.blog-cta h2{color:var(--bone-ink) !important}
.blog-cta p{color:var(--bone-ink2) !important}
/* Signal fill is 13:1 against Carbon text and legible on Bone as a BLOCK —
   it is only Signal-as-text on Bone that fails. The label stays Carbon. */
.blog-cta .btn.p{
  background:var(--signal) !important;color:var(--carbon) !important;
  border:1px solid var(--signal-ink-bone) !important}
.blog-cta .btn.p:hover{background:var(--signal-h) !important}

/* nivio-v3.css normalises every input to padding:0 14px and loads after this
   layer, which silently took away the 44px gutter the search field leaves for
   its magnifier — the icon sat on top of the placeholder. Only .search-wrap
   has a leading icon, so the gutter is restored there and nowhere else. */
.search-wrap input{padding-left:44px !important}