/* =====================================================================
   Clairvance — blog design system
   Reuses the site tokens (white canvas, ink/gray, signal blue, decisive
   red, Space Grotesk + JetBrains Mono). Adds long-form reading typography
   and the index/card system. Shared by the blog index and every post.
   ===================================================================== */
@font-face{font-family:"Space Grotesk";src:url(/assets/fonts/space-grotesk-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(/assets/fonts/space-grotesk-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(/assets/fonts/space-grotesk-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/assets/fonts/jetbrains-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/assets/fonts/jetbrains-mono-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --paper:#fff;--fog:#f5f7fa;--mist:#eceff4;--line:#e3e7ee;--line-2:#cfd5df;
  --ink:#0c0f17;--ink-2:#20262f;--graphite:#565f6d;--slate:#8b93a1;
  --signal:#2440f0;--signal-deep:#182bb0;--signal-ink:#1b2ca6;--signal-wash:#eaedfe;--signal-line:#c9d0fb;
  --red:#e5231a;--red-strong:#d81b12;--red-ink:#bf160e;--red-wash:#fdecea;--red-line:#f6c9c5;
  --sans:"Space Grotesk","Space Grotesk fallback",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --maxw:1240px;--reading:70ch;--gutter:clamp(20px,5vw,72px);
  --r1:4px;--r2:8px;--r3:12px;--r4:18px;
  --e-out:cubic-bezier(.22,1,.36,1);--d2:220ms;--d3:420ms;
  --sh1:0 1px 2px rgba(12,15,23,.05),0 1px 1px rgba(12,15,23,.03);
  --sh2:0 14px 40px -18px rgba(12,15,23,.22),0 4px 12px -6px rgba(12,15,23,.10);
}
@font-face{font-family:"Space Grotesk fallback";src:local("Arial");ascent-override:92%;descent-override:24%;line-gap-override:0%;size-adjust:99%}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;letter-spacing:-.006em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:none;box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--signal);border-radius:3px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.mono{font-family:var(--mono)}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r1);transition:top var(--d2) var(--e-out)}
.skip:focus{top:12px}

/* ---------- nav (mirrors the main site) ------------------------------ */
.bnav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.bnav__in{display:flex;align-items:center;justify-content:space-between;height:64px;gap:24px}
.brand{display:inline-flex;align-items:center;gap:11px;font-weight:700;letter-spacing:-.03em;font-size:1.16rem}
.brand svg{width:25px;height:25px;flex:none}
.bnav__links{display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.bnav__links a{font-size:.92rem;font-weight:500;color:var(--graphite);transition:color var(--d2)}
.bnav__links a:hover,.bnav__links a[aria-current]{color:var(--ink)}
.bnav__cta{display:inline-flex;align-items:center;gap:9px;font-weight:500;font-size:.86rem;background:var(--red-strong);color:#fff;padding:9px 16px;border-radius:var(--r1);transition:transform var(--d2) var(--e-out)}
.bnav__cta:hover{transform:translateY(-2px)}
@media (max-width:720px){.bnav__links{display:none}}

/* ---------- shared eyebrow ------------------------------------------- */
.eyebrow{font-family:var(--mono);font-size:.72rem;font-weight:500;text-transform:uppercase;letter-spacing:.16em;color:var(--graphite);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:16px;height:2px;background:var(--red)}
.eyebrow--blue::before{background:var(--signal)}

/* ================= BLOG INDEX ================= */
.bhero{padding-block:clamp(48px,7vw,88px) clamp(28px,4vw,52px)}
.bhero h1{font-size:clamp(2.4rem,1.7rem+3vw,4rem);font-weight:700;letter-spacing:-.035em;line-height:1.02;margin:16px 0 0;max-width:20ch}
.bhero p{margin:20px 0 0;font-size:clamp(1.05rem,1rem+.3vw,1.3rem);line-height:1.4;color:var(--ink-2);max-width:56ch}
.bfilters{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.bfilter{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;color:var(--graphite);background:var(--fog);border:1px solid var(--line);padding:7px 13px;border-radius:999px;cursor:pointer;transition:border-color var(--d2),color var(--d2),background var(--d2)}
.bfilter:hover,.bfilter[aria-pressed="true"]{border-color:var(--ink);color:var(--ink)}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,28px);padding-bottom:var(--gutter)}
.card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r4);overflow:hidden;background:var(--paper);transition:transform var(--d3) var(--e-out),box-shadow var(--d3) var(--e-out),border-color var(--d2)}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh2);border-color:var(--line-2)}
.card__top{aspect-ratio:16/9;position:relative;border-bottom:1px solid var(--line);background:var(--fog);overflow:hidden}
.card__top svg{width:100%;height:100%}
.card__cat{position:absolute;left:14px;top:14px;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--ink);padding:5px 9px;border-radius:999px}
.card__body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.card__meta{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--slate);display:flex;gap:10px;align-items:center}
.card__meta i{width:3px;height:3px;border-radius:50%;background:var(--line-2)}
.card h2{font-size:1.28rem;font-weight:700;letter-spacing:-.02em;line-height:1.12;margin:0}
.card p{font-size:.94rem;line-height:1.45;color:var(--graphite);margin:0}
.card__more{margin-top:auto;padding-top:6px;font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--signal-ink);display:inline-flex;align-items:center;gap:7px}
@media (max-width:940px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.cards{grid-template-columns:1fr}}

/* ================= POST PAGE ================= */
.post{padding-block:clamp(32px,5vw,56px) 0}
.crumb{font-family:var(--mono);font-size:.74rem;letter-spacing:.05em;color:var(--slate);display:flex;align-items:center;gap:8px;margin-bottom:22px}
.crumb a{color:var(--graphite)}.crumb a:hover{color:var(--ink)}
.crumb svg{width:13px;height:13px}
.post__cat{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;display:inline-flex;align-items:center;gap:9px;color:var(--graphite)}
.post__cat::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--signal)}
.post__cat.is-hos::before{background:var(--red)}
.post h1{font-size:clamp(2.1rem,1.5rem+2.6vw,3.5rem);font-weight:700;letter-spacing:-.032em;line-height:1.04;margin:16px 0 0;max-width:24ch}
.post__lede{margin:20px 0 0;font-size:clamp(1.12rem,1rem+.5vw,1.4rem);line-height:1.4;color:var(--ink-2);max-width:var(--reading)}
.post__meta{margin-top:26px;padding-block:18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:.78rem;color:var(--graphite)}
.post__meta .who{font-weight:500;color:var(--ink)}
.post__meta i{width:3px;height:3px;border-radius:50%;background:var(--line-2)}
.post__share{margin-left:auto;display:flex;gap:8px}
.post__share button{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:var(--r1);color:var(--graphite);background:none;cursor:pointer;transition:border-color var(--d2),color var(--d2)}
.post__share button:hover{border-color:var(--ink);color:var(--ink)}
.post__share svg{width:16px;height:16px}

/* --- article body typography --- */
.body{max-width:var(--reading);margin:40px 0 0;font-size:1.16rem;line-height:1.72;color:var(--ink-2);letter-spacing:-.008em}
.body>*+*{margin-top:1.15em}
.body h2{font-family:var(--sans);font-weight:700;font-size:clamp(1.5rem,1.2rem+1vw,2rem);letter-spacing:-.02em;line-height:1.12;color:var(--ink);margin-top:2em;scroll-margin-top:80px}
.body h3{font-weight:700;font-size:1.3rem;letter-spacing:-.015em;color:var(--ink);margin-top:1.6em}
.body p{margin-top:1.15em}
.body a{color:var(--signal-ink);border-bottom:1.5px solid var(--signal-line);transition:border-color var(--d2),color var(--d2)}
.body a:hover{color:var(--red-ink);border-color:var(--red)}
.body strong{font-weight:700;color:var(--ink)}
.body em{font-style:italic}
.body ul,.body ol{margin-top:1.1em;padding-left:1.3em}
.body li{margin-top:.5em}
.body li::marker{color:var(--slate)}
.tldr{background:var(--fog);border:1px solid var(--line);border-left:3px solid var(--signal);border-radius:var(--r2);padding:18px 20px;margin-top:1.4em;font-size:1.05rem;line-height:1.5}
.tldr p{margin:0}
.tldr::before{content:"The short version";display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite);margin-bottom:8px}
.body blockquote{margin-top:1.4em;padding:4px 0 4px 22px;border-left:3px solid var(--line-2);color:var(--graphite);font-size:1.08rem}
.body blockquote.pullquote{border:0;padding:0;margin-block:1.6em;font-family:var(--sans);font-weight:700;font-size:clamp(1.5rem,1.2rem+1vw,2.1rem);line-height:1.18;letter-spacing:-.02em;color:var(--ink);max-width:none}
.body blockquote.pullquote::before{content:"";display:block;width:40px;height:3px;background:var(--red);margin-bottom:18px}
.body table{width:100%;border-collapse:collapse;margin-top:1.4em;font-size:.96rem}
.body th,.body td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.body thead th{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite);border-bottom:1px solid var(--line-2)}
.body tbody tr:hover{background:var(--fog)}
.body code{font-family:var(--mono);font-size:.88em;background:var(--mist);padding:2px 6px;border-radius:4px}
.body .stat{font-family:var(--mono);color:var(--signal-ink)}

/* figures + bars (mirror the Skinve component names so the pipeline is portable) */
.sv-figure{margin:1.6em 0;border:1px solid var(--line);border-radius:var(--r3);overflow:hidden;background:var(--paper)}
.sv-figure img{width:100%;height:auto;display:block}
.sv-figure figcaption{padding:12px 16px;font-size:.86rem;line-height:1.45;color:var(--graphite);border-top:1px solid var(--line)}
.sv-source{display:block;margin-top:6px;font-family:var(--mono);font-size:.72rem;color:var(--slate)}
.sv-bars{padding:20px}
.sv-bars-title{font-weight:700;letter-spacing:-.01em;color:var(--ink);margin-bottom:16px;font-size:1.02rem}
.sv-bar{margin-bottom:13px}
.sv-bar-head{display:flex;justify-content:space-between;gap:12px;font-size:.86rem;margin-bottom:6px}
.sv-bar-label{color:var(--ink-2)}.sv-bar-note{color:var(--slate)}
.sv-bar-value{font-family:var(--mono);color:var(--graphite)}
.sv-bar-track{height:9px;background:var(--mist);border-radius:999px;overflow:hidden}
.sv-bar-fill{height:100%;background:var(--signal);border-radius:999px}
.sv-bar.is-full .sv-bar-fill{background:var(--red)}

/* FAQ */
.faq{margin-top:2em}
.faq h2{margin-top:0}
.faq details{border-bottom:1px solid var(--line);padding:14px 0}
.faq summary{font-weight:500;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--slate)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:10px 0 0;color:var(--graphite);font-size:1rem}

/* sources */
.sources{max-width:var(--reading);margin-top:2.4em;padding-top:1.6em;border-top:1px solid var(--line)}
.sources h2{font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite);margin:0 0 14px}
.sources ol{margin:0;padding-left:1.4em;font-size:.9rem;line-height:1.5}
.sources li{margin-top:8px;color:var(--graphite)}
.sources a{color:var(--signal-ink);word-break:break-word}

/* tags */
.post__tags{max-width:var(--reading);margin-top:2em;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.post__tags .lbl{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin-right:4px}
.post__tags .tag{font-family:var(--mono);font-size:.74rem;color:var(--graphite);background:var(--fog);border:1px solid var(--line);padding:5px 11px;border-radius:999px}

/* CTA */
.post__cta{max-width:var(--reading);margin-top:2.6em;background:var(--ink);color:#fff;border-radius:var(--r4);padding:clamp(24px,3vw,36px)}
.post__cta .eyebrow{color:#9aa3b2}
.post__cta h3{font-size:clamp(1.5rem,1.2rem+1vw,2rem);font-weight:700;letter-spacing:-.02em;line-height:1.06;margin:14px 0 0;color:#fff}
.post__cta p{margin:12px 0 0;color:#aab2c0;font-size:1rem;line-height:1.45}
.post__cta .btn{margin-top:22px;display:inline-flex;align-items:center;gap:10px;font-weight:500;font-size:.92rem;background:var(--red-strong);color:#fff;padding:13px 20px;border-radius:var(--r1);transition:transform var(--d2) var(--e-out)}
.post__cta .btn:hover{transform:translateY(-2px)}
.post__cta .btn svg{width:15px;height:15px}

/* related */
.related{margin-top:3em;padding-top:2em;border-top:1px solid var(--line)}
.related h2{font-size:1.4rem;font-weight:700;letter-spacing:-.02em;margin:0 0 20px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.related-card{border:1px solid var(--line);border-radius:var(--r3);padding:18px;transition:border-color var(--d2),transform var(--d3) var(--e-out),box-shadow var(--d3) var(--e-out);display:flex;flex-direction:column;gap:8px}
.related-card:hover{transform:translateY(-3px);box-shadow:var(--sh2);border-color:var(--line-2)}
.related-card .rc-cat{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.related-card .rc-title{font-weight:700;font-size:1.02rem;letter-spacing:-.01em;line-height:1.14;color:var(--ink)}
.related-card .rc-meta{margin-top:auto;font-family:var(--mono);font-size:.72rem;color:var(--slate)}
@media (max-width:820px){.related-grid{grid-template-columns:1fr}}

/* footer (mirror main site) */
.bfoot{margin-top:4em;background:var(--paper);border-top:1px solid var(--line)}
.bfoot__in{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-block:40px 24px}
.bfoot__tag{margin-top:14px;color:var(--graphite);font-size:.9rem;max-width:34ch}
.bfoot__cols{display:flex;gap:clamp(28px,6vw,72px);flex-wrap:wrap}
.bfoot__col h4{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);font-weight:500;margin:0 0 14px}
.bfoot__col a{display:block;color:var(--graphite);font-size:.9rem;padding:5px 0;transition:color var(--d2)}
.bfoot__col a:hover{color:var(--ink)}
.bfoot__bar{border-top:1px solid var(--line);padding-block:22px;font-family:var(--mono);font-size:.72rem;letter-spacing:.03em;color:var(--slate);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media (max-width:600px){.body{font-size:1.08rem}.post__share{margin-left:0;width:100%}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* =====================================================================
   EXPLAINER DIAGRAMS — a reusable component library for post bodies.
   Editorial, minimal, native to Clairvance. Muted canvas, ink and gray
   for the work, blue for the resolved system, red for the intervention.
   Used only when a post describes a process, sequence, before/after,
   decision, operating model, loop, or stack of impact.
   ===================================================================== */
figure.cvx{margin:1.9em 0;border:1px solid var(--line);border-radius:var(--r4);background:var(--fog);overflow:hidden}
figure.cvx figcaption{padding:12px 18px;background:var(--paper);border-top:1px solid var(--line);font-size:.86rem;line-height:1.45;color:var(--graphite)}
figure.cvx figcaption strong{color:var(--ink);font-weight:500}

/* ProcessFlow — a sequence of steps, outcomes accented */
.cvx-flow .cvx-steps{display:flex;align-items:center;flex-wrap:wrap;gap:16px 30px;padding:clamp(18px,2.5vw,28px)}
.cvx-flow .cvx-step{position:relative;flex:1 1 0;min-width:112px;text-align:center;background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r2);padding:13px 12px;font-weight:500;font-size:.92rem;letter-spacing:-.01em;color:var(--ink);line-height:1.2}
.cvx-flow .cvx-step:not(:last-child)::after{content:"";position:absolute;right:-22px;top:50%;width:8px;height:8px;border-top:1.7px solid var(--line-2);border-right:1.7px solid var(--line-2);transform:translateY(-50%) rotate(45deg)}
.cvx-flow .cvx-step--out{border-color:var(--signal-line);background:var(--signal-wash);color:var(--signal-ink)}
@media (max-width:600px){
  .cvx-flow .cvx-steps{flex-direction:column;gap:24px 0}
  .cvx-flow .cvx-step{width:100%;flex:none}
  .cvx-flow .cvx-step:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-16px;transform:translateX(-50%) rotate(135deg)}
}

/* BeforeAfterWorkflow — two columns with a conversion badge */
.cvx-ba .cvx-ba-in{display:grid;grid-template-columns:1fr 40px 1fr;align-items:stretch}
.cvx-ba-col{padding:clamp(18px,2.3vw,26px)}
.cvx-ba-before{background:var(--fog)}
.cvx-ba-after{background:var(--paper);border-left:1px solid var(--line)}
.cvx-ba-head{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:15px;display:flex;align-items:center;gap:9px}
.cvx-ba-before .cvx-ba-head{color:var(--graphite)}
.cvx-ba-before .cvx-ba-head::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--slate)}
.cvx-ba-after .cvx-ba-head{color:var(--signal-ink)}
.cvx-ba-after .cvx-ba-head::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--signal)}
.cvx-ba ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.cvx-ba li{position:relative;padding-left:25px;font-size:.94rem;line-height:1.38}
.cvx-ba-before li{color:var(--graphite)}
.cvx-ba-after li{color:var(--ink-2)}
.cvx-ba li::before{content:"";position:absolute;left:0;top:3px;width:15px;height:15px;border-radius:50%;border:1.5px solid var(--line-2)}
.cvx-ba-before li::after{content:"";position:absolute;left:4px;top:10px;width:7px;border-top:1.6px solid var(--slate)}
.cvx-ba-after li::before{border-color:var(--signal)}
.cvx-ba-after li::after{content:"";position:absolute;left:4.5px;top:6.5px;width:5px;height:2.5px;border-left:1.6px solid var(--signal);border-bottom:1.6px solid var(--signal);transform:rotate(-45deg)}
.cvx-ba-arrow{align-self:center;justify-self:center;width:40px;height:40px;background:var(--red-strong);border-radius:50%;display:grid;place-items:center;box-shadow:0 8px 20px -8px rgba(216,27,18,.5)}
.cvx-ba-arrow svg{width:18px;height:18px}
@media (max-width:620px){
  .cvx-ba .cvx-ba-in{grid-template-columns:1fr}
  .cvx-ba-after{border-left:0;border-top:1px solid var(--line)}
  .cvx-ba-arrow{transform:rotate(90deg);margin:-20px auto;position:relative;z-index:2}
}

/* DecisionTree — a decision read as condition to outcome */
.cvx-tree .cvx-tree-in{padding:clamp(18px,2.5vw,26px)}
.cvx-tree-q{font-weight:500;font-size:.98rem;color:var(--ink);margin-bottom:6px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.cvx-branch{display:flex;align-items:center;gap:14px;padding:12px 0;flex-wrap:wrap}
.cvx-branch+.cvx-branch{border-top:1px solid var(--line)}
.cvx-cond{flex:1 1 150px;font-size:.94rem;color:var(--ink-2)}
.cvx-branch .cvx-arw{color:var(--slate);flex:none}
.cvx-out{font-family:var(--mono);font-size:.78rem;letter-spacing:.02em;padding:7px 13px;border-radius:999px;border:1px solid var(--line-2);color:var(--graphite);flex:none;text-align:center;background:var(--paper)}
.cvx-out--blue{border-color:var(--signal-line);color:var(--signal-ink);background:var(--signal-wash)}
.cvx-out--red{border-color:var(--red-line);color:var(--red-ink);background:var(--red-wash)}

/* OperatingModelMap — the rooms the work moves through */
.cvx-map .cvx-map-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;padding:clamp(18px,2.4vw,26px)}
.cvx-node{background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r2);padding:15px}
.cvx-node-k{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite);margin-bottom:8px;display:flex;align-items:center;gap:7px}
.cvx-node-k::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--signal)}
.cvx-node p{margin:0;font-size:.88rem;line-height:1.4;color:var(--ink-2)}
.cvx-node--flag{border-color:var(--red-line)}
.cvx-node--flag .cvx-node-k{color:var(--red-ink)}
.cvx-node--flag .cvx-node-k::before{background:var(--red)}

/* SystemLoop — a sequence that feeds back */
.cvx-loop .cvx-steps{display:flex;align-items:center;flex-wrap:wrap;gap:16px 30px;padding:clamp(18px,2.5vw,28px) clamp(18px,2.5vw,28px) 16px}
.cvx-loop .cvx-step{position:relative;flex:1 1 0;min-width:110px;text-align:center;background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r2);padding:12px;font-weight:500;font-size:.9rem;color:var(--ink);line-height:1.2}
.cvx-loop .cvx-step:not(:last-child)::after{content:"";position:absolute;right:-22px;top:50%;width:8px;height:8px;border-top:1.7px solid var(--line-2);border-right:1.7px solid var(--line-2);transform:translateY(-50%) rotate(45deg)}
.cvx-loop-note{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px;border-top:1px dashed var(--line-2);font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite);background:var(--paper)}
.cvx-loop-note::before{content:"\21ba";font-size:1.05rem;color:var(--signal)}
@media (max-width:600px){.cvx-loop .cvx-steps{flex-direction:column;gap:24px 0}.cvx-loop .cvx-step{width:100%;flex:none}.cvx-loop .cvx-step:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-16px;transform:translateX(-50%) rotate(135deg)}}

/* ImpactStack — stacked outcomes with the effect */
.cvx-stack .cvx-stack-in{padding:clamp(16px,2.2vw,22px);display:flex;flex-direction:column;gap:8px}
.cvx-stack-row{display:flex;gap:15px;align-items:flex-start;padding:14px 16px;background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--signal);border-radius:var(--r1)}
.cvx-stack-k{font-family:var(--mono);font-size:.78rem;color:var(--signal-ink);flex:none;padding-top:2px}
.cvx-stack-row b{display:block;font-weight:500;color:var(--ink);letter-spacing:-.01em}
.cvx-stack-row span{display:block;margin-top:3px;font-size:.88rem;line-height:1.4;color:var(--graphite)}

/* Start here strip: the standing inbound feature above the cards */
.bstart{display:flex;align-items:center;gap:22px;margin:0 0 26px;padding:22px 26px;border:1px solid var(--signal-line);border-left:3px solid var(--signal);border-radius:var(--r3);background:var(--signal-wash);text-decoration:none;color:var(--ink);transition:box-shadow var(--d2) var(--e-out),transform var(--d2) var(--e-out)}
.bstart:hover{box-shadow:var(--sh2);transform:translateY(-2px)}
.bstart__eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal-ink);white-space:nowrap}
.bstart h2{margin:0 0 4px;font-size:19px;line-height:1.3}
.bstart p{margin:0;color:var(--graphite);font-size:14.5px;line-height:1.5}
.bstart__go{margin-left:auto;font-weight:600;color:var(--signal);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
@media (max-width:720px){.bstart{flex-direction:column;align-items:flex-start;gap:10px}.bstart__go{margin-left:0}}

/* Anchor text CTA: the one relevance-matched text link placed after the opening.
   Styled to H3 weight per the mechanic's original spec; blue is the resolved system. */
.body .cta-anchor{margin:26px 0;font-family:var(--sans,inherit)}
.body .cta-anchor a{display:inline-block;font-size:19px;font-weight:700;line-height:1.35;color:#2440f0;text-decoration:none;border-bottom:2px solid #c9d0fb;padding-bottom:2px;transition:border-color .2s ease}
.body .cta-anchor a:hover{border-color:#2440f0}
.body .cta-anchor a::after{content:" \2192"}