/* ============================================================
   TaskLogix360 — v2 home redesign: Problem + Fork
   Added 2026-07-28. VARIANT STYLESHEET — loaded only by v2-*.html.
   index.html does not reference this file until a winner is promoted.

   Scope: the stretch Sam called out — "a different presentation format
   for the 'problem' section and 'fork' section directly underneath it."
   They are designed as a PAIR: Problem sets the gap up on a lit ground,
   the fork answers it on a dark one. That single inversion is the first
   real value break on the page; today the two differ by 1.5% luminance.

   Depends on depth.css for .ground-lit / .ground-dark / .lift / .horizon
   and the .tlx-in-* motion grammar.
   ============================================================ */

/* ============================================================
   PART 1 — PROBLEM (shared by all three fork variants)
   Today: 3 DOM elements, 1 line of CSS, no eyebrow, no green, no
   visual — the page's strongest line of copy on its emptiest canvas.
   The redesign dramatizes the gap the headline asks about: work
   COMPLETED in the field vs work that reached an INVOICE.
   Deliberately carries NO statistics. The customer numbers are not
   cleared for public use yet, and an invented one would be a claim.
   The visual makes you feel the gap; it does not assert its size.
   ============================================================ */

.v2-problem{padding:clamp(80px,9vw,132px) 0}
.v2-problem-inner{max-width:var(--max-content);margin:0 auto;padding:0 clamp(20px,5vw,64px);
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(44px,5vw,72px);align-items:center}
@media (min-width:1000px){.v2-problem-inner{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(48px,5vw,88px)}}

.v2-problem .eyebrow{color:var(--green-aa)}
.v2-problem h2{margin:var(--sp-4) 0 var(--sp-5);font-size:clamp(32px,4.4vw,48px);font-weight:800;
  letter-spacing:var(--ls-heading);line-height:1.12;color:var(--navy-deep);text-wrap:balance}
.v2-problem p{margin:0 0 var(--sp-4);font-size:clamp(17px,1.8vw,21px);line-height:1.62;color:var(--slate);max-width:56ch}
.v2-problem p:last-child{margin-bottom:0}

/* ---- the chain-break figure ----------------------------------------
   REPLACES the reconciliation table (Sam, 2026-07-29). That version was two
   columns of five rows plus a header, an arrow, a flag and a two-line
   caption: about sixteen elements, and his note was exactly right - "someone
   will have to take a good look to be able to understand the message."
   The message is one sentence: work gets finished, and then the chain to the
   invoice breaks. So the figure is now one chain with one broken link.
   Five elements, readable at a glance, and it makes NO quantitative claim,
   which also lets the "illustrative example" disclaimer disappear - there is
   no longer any implied ratio to disclaim.
   ------------------------------------------------------------------- */
/* CONTAINED 2026-08-07 (Sam: "it looks out of place just floating in open
   space"). It was padding:0/border:0/background:none — a diagram sitting
   directly on the section ground with nothing holding it. Card treatment is
   deliberately the SAME one the outcomes cards and security tiles already use
   on this page (white, #E3E9F0 hairline, one soft drop) rather than a new
   variant, so the light grounds keep one card language. */
.v2-chain{margin:0;background:#fff;border:1px solid #E3E9F0;border-radius:16px;
  padding:clamp(32px,3.6vw,48px) clamp(24px,3vw,40px);
  box-shadow:0 1px 2px rgba(8,54,93,.05), 0 18px 44px -30px rgba(8,54,93,.42)}
.v2-chain-row{display:flex;align-items:center;gap:0;flex-wrap:nowrap}

.ch-node{display:flex;flex-direction:column;align-items:center;gap:12px;flex:0 0 auto;text-align:center}
.ch-dot{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;
  background:#fff;border:1.5px solid rgba(21,128,61,.32);color:var(--green-aa);
  box-shadow:0 10px 26px -14px rgba(8,54,93,.30)}
.ch-dot svg{width:24px;height:24px}
.ch-label{font-size:var(--fs-sm);font-weight:700;line-height:1.25;color:var(--navy-deep);white-space:nowrap}

/* the link between two nodes */
.ch-link{flex:1 1 auto;height:2px;min-width:24px;background:rgba(21,128,61,.30);border-radius:2px}

/* the break: a dashed gap with the failure marked on it */
.ch-break{flex:1 1 auto;min-width:52px;position:relative;height:2px;
  background-image:linear-gradient(90deg,rgba(180,83,9,.55) 0 8px,transparent 8px 16px);
  background-size:16px 2px}
.ch-break i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;
  background:#FEF3C7;border:1.5px solid rgba(180,83,9,.45);color:#B45309;font-style:normal}
.ch-break i svg{width:12px;height:12px}

/* the node the work never reaches */
.ch-node.is-lost .ch-dot{border-style:dashed;border-color:rgba(180,83,9,.42);color:#B45309;
  background:rgba(254,243,199,.45);box-shadow:none}
.ch-node.is-lost .ch-label{color:var(--slate-light)}

.v2-problem .v2-chain-cap{margin:clamp(26px,3vw,34px) 0 0;font-size:clamp(17px,1.7vw,20px);line-height:1.5;
  font-weight:700;color:var(--navy-deep);max-width:none;text-align:center}

@media (max-width:560px){
  .v2-chain-row{flex-direction:column;gap:0}
  .ch-link,.ch-break{width:2px;min-width:0;height:36px;min-height:36px;flex:0 0 auto}
  .ch-break{background-image:linear-gradient(180deg,rgba(180,83,9,.55) 0 8px,transparent 8px 16px);
    background-size:2px 16px}
}

/* ============================================================
   PART 2 — FORK, SHARED CARD SHELL (dark ground)
   Co-equal BY CONSTRUCTION, same rule the 07-28 build set: identical
   shell, identical button variant, identical list length, identical
   meta slot. The launch chip is the only intentional asymmetry.
   ============================================================ */

.v2-fork{padding:clamp(84px,9.5vw,140px) 0 clamp(96px,10vw,150px)}
.v2-fork-inner{position:relative;z-index:2;max-width:var(--max-content);margin:0 auto;padding:0 clamp(20px,5vw,64px)}
.v2-fork-copy{text-align:center;max-width:760px;margin:0 auto clamp(40px,4.6vw,64px)}
.v2-fork .eyebrow{color:var(--green-bright)}
.v2-fork h2{margin:var(--sp-4) 0 var(--sp-5);font-size:clamp(32px,4.4vw,48px);font-weight:800;
  letter-spacing:var(--ls-heading);line-height:1.12;color:#fff;text-wrap:balance}
/* base.css scopes .accent to .h1 only, so the fork's H2 highlight needs its
   own rule. Solid --green-bright, which is the AA-safe green on dark. */
.v2-fork h2 .accent{color:var(--green-bright)}
.v2-fork .lede{color:#BCD2E5;max-width:60ch;margin-inline:auto}

/* SOLID card surface, not a 3-stop gradient (Sam 2026-07-28: keep it clean and
   professional, stop making every surface a gradient). Depth now comes from
   the .lift shadow and a hairline border, which is where it belongs - the
   section GROUND stays gradient, the components sitting on it do not. */
.v2-card{position:relative;display:flex;flex-direction:column;border-radius:16px;
  padding:clamp(26px,2.8vw,40px);
  background:#0A2B4C;border:1px solid rgba(151,196,236,.16);
  color:#fff}
.v2-card h3{margin:0 0 var(--sp-4);font-size:clamp(23px,2.5vw,30px);line-height:1.16;font-weight:800;
  letter-spacing:var(--ls-heading);color:#fff;text-wrap:balance}
.v2-card .v2-kicker{display:inline;font-size:var(--fs-sm);font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--green-bright);margin-bottom:var(--sp-2)}
.v2-card .v2-lede{margin:0 0 var(--sp-6);font-size:var(--fs-lg);line-height:1.6;color:#BCD2E5}
.v2-ico{display:inline-flex;align-items:center;justify-content:center;width:var(--sp-12);height:var(--sp-12);
  border-radius:var(--radius);margin-bottom:var(--sp-5);color:var(--green-bright);
  background:rgba(30,154,68,.14);
  border:1px solid rgba(53,193,104,.32)}
.v2-ico svg{width:var(--sp-6);height:var(--sp-6)}
.v2-list{list-style:none;margin:0 0 var(--sp-8);padding:var(--sp-6) 0 0;
  border-top:1px solid rgba(151,196,236,.16);display:flex;flex-direction:column;gap:var(--sp-4)}
.v2-list li{display:flex;align-items:flex-start;gap:var(--sp-3);font-size:var(--fs-base);line-height:1.55;color:#CFE0EE}
.v2-list .ck{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:50%;background:rgba(30,154,68,.22);color:#7FD99A;margin-top:1px}
.v2-list .ck svg{width:16px;height:16px}
.v2-foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-4)}
.v2-meta{font-size:var(--fs-sm);line-height:var(--lh-sm);font-weight:600;color:#8FB0CB}
/* BUG (Sam, 2026-07-29): this chip rendered UNDERNEATH the panel photo. Both
   it and .vb-figure were positioned with z-index:auto, so paint order fell to
   DOM order and the figure - which comes later - won.
   Fixed by not floating it at all: the chip now sits INLINE next to the
   kicker, in the copy column, where it can never collide with the image and
   reads as part of the sentence rather than a sticker over a photo. That is
   also the simpler answer, which is the direction for the whole page. */
/* 2026-08-05: 11px -> 13.5px. With the kicker deleted the chip moved inline into
   the h3, which put it on a printable line of the page, and 10pt/13.33px is the
   floor on everything Sam ships. Height and padding grow with it so the pill
   still wraps the text rather than clipping it. Contrast is unaffected: #A7F3C4
   over 18% green on #0A2B4C composites to 8.89:1. */
.v2-chip{
  display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;
  background:rgba(30,154,68,.18);border:1px solid rgba(53,193,104,.42);color:#A7F3C4;
  font-size:13.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;
  vertical-align:middle;margin-left:12px;position:relative;z-index:3}
/* SOLID button (Sam 2026-07-28), not a translucent glass panel. Solid white on
   the dark ground: maximum contrast, unmistakably a button, and it keeps the
   green primary reserved for "Request a Demo" so neither branch outranks the
   other or the site's real conversion CTA. Both cards use the identical
   variant, which is what keeps them co-equal. */
.v2-card .btn-solid{background:#fff;border:1px solid #fff;color:var(--navy-deep);font-weight:700}
.v2-card .btn-solid:hover{background:var(--navy-50);border-color:var(--navy-50);color:var(--navy-deep)}
.v2-card .btn-solid:focus-visible{outline:2px solid #fff;outline-offset:3px}
.v2-note{margin:clamp(30px,3.2vw,44px) 0 0;text-align:center;font-size:var(--fs-base);color:#8FB0CB}
.v2-note a{color:var(--green-bright);font-weight:700;text-underline-offset:3px}
@media (max-width:560px){.v2-chip{margin:8px 0 0}}

/* ============================================================
   VARIANT A — THE FORKING ROUTE
   A scroll-drawn route enters as ONE line and splits, each branch
   landing on its card. Rationale: product.html draws one route from
   engineering to invoice; the home page's job is "there are two ways
   in". A route that forks is what an infrastructure contractor
   actually draws — a sibling of the blueprint, not a copy.
   ============================================================ */

/* The route must span the full card grid so each branch lands on its own
   card, which means preserveAspectRatio="none" — the viewBox stretches to
   the container. Every stroke therefore carries vector-effect:
   non-scaling-stroke, or the horizontal stretch would fatten the verticals
   and thin the horizontals. That also rules out circles (they would render
   as ellipses), so the travelling pulse is NOT a moving dot: it is the
   dasharray comet from product.html:412-414 riding the path itself. */
.va-route{display:block;width:100%;height:clamp(104px,12vw,170px);margin-bottom:clamp(-6px,-.6vw,-2px);overflow:visible}
.va-route path{vector-effect:non-scaling-stroke}
.va-trunk,.va-branch{fill:none;stroke-width:2;stroke-linecap:round}
.va-trunk{stroke:rgba(151,196,236,.55)}
.va-branch{stroke:rgba(151,196,236,.42)}
/* glow understroke — widened duplicate at low opacity, per product.html */
.va-glow{fill:none;stroke:rgba(53,193,104,.18);stroke-width:9;stroke-linecap:round}
/* the comet: a 5%-long dash on a pathLength="1" path, offset animated to -1 */
.va-comet{fill:none;stroke:#A7F3C4;stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:.05 1.95;filter:drop-shadow(0 0 5px rgba(62,203,110,.75))}
.va-tick{stroke:rgba(151,196,236,.5);stroke-width:1.6;stroke-linecap:round}

/* Station labels are HTML, NOT <text> inside the SVG: preserveAspectRatio
   ="none" stretches the coordinate system, and stretched glyphs look
   broken in a way stretched paths do not. */
.va-stations{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.4vw,32px);
  margin:0 0 clamp(18px,2vw,26px)}
.va-label{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;
  font-family:var(--mono);font-size:13.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:#7FA6C8}
.va-label i{font-style:normal;color:rgba(151,196,236,.45)}

.va-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.4vw,32px);align-items:stretch}
@media (max-width:900px){
  .va-grid,.va-stations{grid-template-columns:1fr}
  .va-stations{display:none}      /* the fork still reads; the stations don't */
  .va-route{height:84px}
}

/* ============================================================
   VARIANT B — SEGMENTED SWITCHER
   "Which one are you?" One panel, swapped by a radio group.
   ZERO new JavaScript: the :has() radio pattern already shipped in
   tier-compare.css:153-207, including its @supports fallback.
   ============================================================ */

.vb-switch{display:flex;justify-content:center;margin-bottom:clamp(32px,3.4vw,48px)}
.vb-seg{display:inline-flex;padding:4px;border-radius:999px;gap:4px;
  background:rgba(4,16,31,.55);border:1px solid rgba(151,196,236,.22)}
.vb-seg input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
/* Single-line pills since the .lb-sub came out (2026-08-07): the 52px height
   existed to seat two stacked lines, so it drops to the 40px control height. */
.vb-seg label{display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--h-btn);padding:var(--sp-2) clamp(20px,2.4vw,32px);
  border-radius:999px;cursor:pointer;color:#BCD2E5;white-space:nowrap;text-align:center;
  transition:background .22s var(--ease),color .22s var(--ease)}
.vb-seg label .lb{font-size:var(--fs-sm);font-weight:700;line-height:1.25}
.vb-seg label .lb-sub{font-size:13.5px;font-weight:600;line-height:1.3;letter-spacing:.02em;
  color:#7FA6C8;transition:color .22s var(--ease)}
.vb-seg label:hover{background:rgba(255,255,255,.07);color:#fff}
.vb-seg input:focus-visible+label{outline:2px solid #fff;outline-offset:2px}
/* SOLID active pill (Sam 2026-07-28), no gradient. Brand green reads as
   "selected" without competing with the white CTA inside the panel.
   --green-aa, NOT --green: white on #1E9A44 measures 3.65:1 and the label is
   14px, which needs 4.5:1. #15803D takes it to 5.01:1. The 11px sub-line has
   to sit at .92 alpha for the same reason (4.51:1); .82 measured 3.92:1. */
.vb-seg input:checked+label{background:var(--green-aa);color:#fff}
.vb-seg input:checked+label .lb-sub{color:rgba(255,255,255,.92)}

/* stacked-grid crossfade (product.html:570-579) — both panels occupy one
   cell so the section height never jumps when you switch */
.vb-stack{display:grid}
.vb-panel{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .34s var(--ease),transform .34s var(--ease),visibility 0s linear .34s}
.vb-wrap:has(#vb-ent:checked) .vb-panel[data-for="ent"],
.vb-wrap:has(#vb-qc:checked)  .vb-panel[data-for="qc"]{opacity:1;visibility:visible;transform:none;transition-delay:0s}
/* Fallback for engines without :has() — show both, stacked vertically.
   Same escape hatch tier-compare.css uses. */
@supports not (selector(:has(*))){
  .vb-switch{display:none}
  .vb-stack{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.4vw,32px)}
  .vb-panel{grid-area:auto;opacity:1;visibility:visible;transform:none}
}
@media (max-width:900px){
  @supports not (selector(:has(*))){.vb-stack{grid-template-columns:1fr}}
}

.vb-panel .v2-card{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,44px)}
@media (min-width:900.02px){.vb-panel .v2-card{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center}}
.vb-figure{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/3;
  border:1px solid rgba(151,196,236,.18)}
/* Duotone: the home page's "photographic" character vs Enterprise's "drawn"
   one. NOT a full grayscale + screen blend - that produced a minty, washed
   cast and threw away the photo. Partial desaturation under a navy scrim
   keeps the image readable and lets green stay an accent rather than a wash. */
.vb-figure img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.4) contrast(1.05) saturate(.95) brightness(.86)}
/* A single-hue navy scrim, not a navy-to-green ramp. A scrim over a photo is
   the one place a gradient still earns its place (it holds text contrast at
   the top edge), but it stays one colour so the photo reads as a photo. */
.vb-figure::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(6,28,50,.42) 0%, rgba(6,28,50,.10) 45%, rgba(6,28,50,.34) 100%)}

/* ============================================================
   VARIANT C — SPLIT-SCREEN HALVES
   Full-bleed two-panel: maximum value contrast inside one section,
   most photo-forward of the three, simplest to build.
   ============================================================ */

.vc-split{display:grid;grid-template-columns:1fr;min-height:min(78vh,760px)}
@media (min-width:940px){.vc-split{grid-template-columns:1fr 1fr}}
.vc-half{position:relative;overflow:hidden;display:flex;align-items:center;
  padding:clamp(52px,6vw,92px) clamp(24px,4.5vw,72px)}
.vc-half>.v2-inner{position:relative;z-index:2;max-width:560px;margin-inline:auto;width:100%}

/* left: drawn — a topology motif, the schematic register */
.vc-half.is-dark{background:
  radial-gradient(110% 80% at 18% -8%, rgba(35,120,196,.42) 0%, rgba(35,120,196,0) 60%),
  linear-gradient(186deg,#051426 0%,#072A4A 58%,#06304F 100%)}
.vc-net{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.9}
.vc-net .lnk{fill:none;stroke:rgba(151,196,236,.20);stroke-width:1.4}
.vc-net .lnk.faint{stroke:rgba(151,196,236,.11)}

/* right: photographic — the same duotone treatment, full bleed */
.vc-half.is-photo{background:#06304F}
.vc-photo{position:absolute;inset:0;z-index:0}
.vc-photo img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.55) contrast(1.05) saturate(.9) brightness(.6)}
.vc-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(148deg, rgba(6,36,65,.80) 0%, rgba(8,54,93,.62) 46%, rgba(30,154,68,.26) 100%)}
.vc-half.is-photo .v2-card,
.vc-half.is-dark  .v2-card{background:none;box-shadow:none;padding:0;border-radius:0}
.vc-half .v2-card h3{font-size:clamp(25px,2.9vw,36px)}

/* the seam: a glowing divider so the two halves read as one section */
.vc-seam{position:absolute;z-index:3;pointer-events:none}
@media (min-width:940px){
  .vc-seam{top:0;bottom:0;left:50%;width:2px;transform:translateX(-1px);
    background:linear-gradient(180deg, rgba(30,154,68,0) 4%, rgba(74,222,128,.75) 50%, rgba(30,154,68,0) 96%);
    box-shadow:0 0 16px 1px rgba(62,201,110,.4)}
}
@media (max-width:939.5px){
  .vc-seam{left:0;right:0;top:50%;height:2px;
    background:linear-gradient(90deg, rgba(30,154,68,0) 4%, rgba(74,222,128,.75) 50%, rgba(30,154,68,0) 96%);
    box-shadow:0 0 16px 1px rgba(62,201,110,.4)}
}

/* ============================================================
   GUARDS
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .va-node-ring{animation:none}
  .vb-panel{transition:none}
  /* SMIL ignores media queries — kill the comets outright */
  .va-comet animateMotion,.va-comet animate,.va-route animate,.va-route animateMotion{display:none}
}

/* ============================================================
   FORK GRAPHIC COLUMN (.vb-viz) — added 2026-08-05
   Sam: the panels go graphic-first. The kicker, the three bullets and the photo
   come out; a small UI mockup shows what the bullets used to describe.

   Reuses the .ocm-* grammar from v2-cards.css rather than inventing a third
   visual language for this page. Two things change for this context:

   1. GROUND. .ocm was drawn for a pale cell tint, where a soft downward shadow
      reads as "lifted". On the card's #0A2B4C that shadow is invisible, so it
      goes darker and wider and the panel hairline flips to a light alpha.
   2. TYPE. The outcomes cells run .ocm at 11px. This column is roughly twice as
      wide, and 10pt/13.33px is a hard floor on everything Sam ships because his
      deliverables get printed. Nothing here is smaller than 13.5px — the panel
      is re-scaled, not shrunk to fit.
   ============================================================ */

/* 🔴 The 48px bottom padding is GONE (2026-08-07). It was written to clear an
   .ocm-float chip that used to hang below the mockup; the column now holds the
   .fr-rail, whose own .fr-note sits inside it, so the 48px was pure dead space
   pinning the 01-04 rail to the top of the card. Sam read it as "biasing toward
   the top", which is exactly what an unbalanced 8/48 pad does. */
.vb-viz{display:flex;align-items:center;justify-content:center;padding:8px 0}
.vb-viz .ocm-stack{width:100%;max-width:392px}

/* 1. dark ground */
.v2p .vb-viz .ocm-panel{
  border-color:rgba(255,255,255,.12);
  box-shadow:0 26px 54px -24px rgba(0,0,0,.72);
}
.v2p .vb-viz .ocm-float{
  border-color:rgba(255,255,255,.14);
  box-shadow:0 16px 34px -16px rgba(0,0,0,.74);
}

/* 2. type re-scale — 13.5px floor */
.v2p .vb-viz .ocm-panel{font-size:13.5px;border-radius:12px}
.v2p .vb-viz .ocm-bar{padding:12px 16px;font-size:14px}
.v2p .vb-viz .ocm-x{width:12px;height:12px}
.v2p .vb-viz .ocm-x::before,.v2p .vb-viz .ocm-x::after{top:4px;width:12px}
.v2p .vb-viz .ocm-step{padding:12px 16px;gap:12px;font-size:13.5px}
.v2p .vb-viz .ocm-step:last-child{border-bottom:0}
.v2p .vb-viz .ocm-ck{width:16px;height:16px}
.v2p .vb-viz .ocm-ck::after{left:4px;top:4px;width:4px;height:8px;border-width:0 1.8px 1.8px 0}
.v2p .vb-viz .ocm-tot{padding:12px 16px;font-size:13.5px}
.v2p .vb-viz .ocm-float{padding:8px 16px;font-size:13.5px;margin-top:12px}
.v2p .vb-viz .ocm-float .dot{width:8px;height:8px}

/* the right-hand value on a checklist row: what the step produced, so the row
   carries a fact instead of just a tick. Tabular so the two panels' values line
   up with each other at the same optical position. */
.v2p .vb-viz .ocm-step .v{
  margin-left:auto;flex:none;font-weight:700;font-size:13.5px;
  color:var(--navy-deep,#08365D);font-variant-numeric:tabular-nums;
}
/* the one pending row. Amber, matching .ocm-float.amber and the sec-pending
   chips on enterprise.html, so "not done yet" is one colour across the site.
   The muted label is #64748B, not #7C8DA0: the lighter grey measured 3.40:1 on
   the white panel and 13.5px body text needs 4.5:1. #64748B takes it to 4.76:1
   and still reads as clearly quieter than the completed rows. */
.v2p .vb-viz .ocm-step.pend{color:#64748B}
.v2p .vb-viz .ocm-step.pend .v{color:#B45309;font-weight:700}

@media (max-width:900px){
  .vb-viz{padding:2px 0}
  .vb-viz .ocm-stack{max-width:340px}
}