/* ============================================================
   LEGAL BRAIN: BLOG
   Article layout, diagram blocks and the end-of-post quiz.
   Pure CSS + inline SVG. No libraries, no external requests, so it
   passes the site CSP in _headers unchanged.

   Diagram types (same markup contract as the generator emits):
     .dg-track   sequence over time
     .dg-ladder  ranked tiers
     .dg-map     A maps to B
     .dg-split   proportional split of one total
     .dg-flow    process steps with arrows
     .dg-phase   phased plan cards
     .dg-funnel  magnitude bars

   Colour encodes MAGNITUDE only, via --heat (0 to 1). Identity is always
   carried by a text label too, so the diagrams stay readable in greyscale
   and for colour-blind readers.
   ============================================================ */

:root {
    --accent-rgb: 74, 158, 255;
    --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---- article shell -------------------------------------------------- */
.article {
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(90px, 11vw, 140px) 24px clamp(60px, 9vw, 110px);
}

.article .kicker {
    font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 18px;
}
.article h1 {
    font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.08; letter-spacing: -.03em;
    color: var(--text-heading); margin: 0 0 22px;
}
.article .byline {
    font-size: .92rem; color: var(--text-muted); margin-bottom: 40px;
    padding-bottom: 26px; border-bottom: 1px solid var(--border);
}
.article h2 {
    font-size: clamp(1.4rem, 2.8vw, 1.95rem); line-height: 1.25; letter-spacing: -.02em;
    color: var(--text-heading); margin: 46px 0 16px;
}
.article h3 { font-size: 1.2rem; color: var(--text-heading); margin: 30px 0 12px; }
.article p { font-size: 1.07rem; line-height: 1.75; color: var(--text); margin: 0 0 20px; }
.article ul, .article ol { margin: 0 0 22px 22px; }
.article li { font-size: 1.05rem; line-height: 1.7; color: var(--text); margin-bottom: 10px; }
.article a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.article a:hover { color: var(--accent-hover); }
.article strong { color: var(--text-heading); font-weight: 600; }

.article-hero {
    border-radius: 18px; overflow: hidden; margin: 0 0 42px; aspect-ratio: 16/9;
    background: var(--bg-card); border: 1px solid var(--border);
}
.article-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* pull quote */
.article blockquote {
    margin: 32px 0; padding: 22px 26px; border-left: 3px solid var(--accent);
    background: var(--bg-card); border-radius: 0 12px 12px 0;
}
.article blockquote p { margin: 0; font-size: 1.1rem; line-height: 1.6; color: var(--text-heading); }

/* ---- diagram frame -------------------------------------------------- */
.article .dg { margin: 40px 0 44px; }
/* the text column is only ~760px, too tight for a five-step diagram, so figures
   break out of it on wide screens and stay inside it everywhere else */
@media (min-width: 1080px) {
    .article .dg { width: 940px; max-width: calc(100vw - 64px); margin-left: 50%; transform: translateX(-50%); }
}
.article .dg-label {
    display: flex; align-items: center; gap: 12px;
    font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: 16px;
}
.article .dg-label::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.article .dg figcaption { font-size: .86rem; line-height: 1.55; color: var(--text-muted); margin-top: 14px; }
.article .dg-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px;
    padding: clamp(20px, 3.4vw, 30px);
}

/* -- TRACK: a sequence across time ------------------------------------ */
/* vertical rail by default, horizontal only where there is room. Each node draws
   its own connector to the next, so the rail brightens step by step and never
   overshoots the final marker. */
.dg-track { display: grid; gap: 0; padding-left: 28px; }
.dg-node { position: relative; padding: 0 0 20px; }
.dg-node:last-child { padding-bottom: 0; }
.dg-node::after {
    content: ""; position: absolute; left: -28px; top: 3px; width: 14px; height: 14px;
    border-radius: 50%; background: rgba(var(--accent-rgb), var(--heat, .35));
    box-shadow: 0 0 0 3px var(--bg-card);
}
.dg-node::before {
    content: ""; position: absolute; left: -22px; top: 19px; bottom: -2px; width: 2px;
    background: rgba(var(--accent-rgb), var(--heat, .35));
}
.dg-node:last-child::before { display: none; }
.dg-node .t-when { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.dg-node .t-what { font-size: .95rem; line-height: 1.5; color: var(--text); margin-top: 5px; }
@media (min-width: 1080px) {
    .dg-track { grid-auto-flow: column; grid-auto-columns: 1fr; padding-left: 0; }
    .dg-node { padding: 30px 18px 0 0; }
    .dg-node::after { left: 0; top: 2px; }
    /* right:0 lands exactly on the next node's marker, so the line never pokes past it */
    .dg-node::before { left: 14px; right: 0; top: 8px; bottom: auto; width: auto; height: 2px; }
}

/* -- LADDER: ranked tiers --------------------------------------------- */
.dg-ladder { display: grid; gap: 9px; }
.dg-rung {
    display: grid; grid-template-columns: 5px 1fr auto; gap: 16px; align-items: center;
    padding: 15px 18px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border);
}
.dg-rung .r-heat { align-self: stretch; border-radius: 100px; background: rgba(var(--accent-rgb), var(--heat, .4)); }
.dg-rung .r-name { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; color: var(--text-heading); line-height: 1.3; }
.dg-rung .r-why { font-size: .9rem; line-height: 1.5; color: var(--text-muted); margin-top: 4px; }
.dg-rung .r-tag {
    font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--accent); background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 100px; padding: 6px 12px; white-space: nowrap;
}
@media (max-width: 560px) {
    .dg-rung { grid-template-columns: 5px 1fr; gap: 12px; }
    .dg-rung .r-tag { grid-column: 2; justify-self: start; margin-top: 8px; }
}

/* -- MAP: A maps to B -------------------------------------------------- */
.dg-map { display: grid; gap: 0; }
.dg-pair {
    display: grid; grid-template-columns: 1fr 26px 1.15fr; gap: 14px; align-items: center;
    padding: 16px 2px; border-top: 1px solid var(--border);
}
.dg-pair:first-child { border-top: 0; padding-top: 2px; }
.dg-pair .m-from { font-size: .96rem; font-weight: 700; line-height: 1.4; color: var(--text-heading); }
.dg-pair .m-to { font-size: .94rem; line-height: 1.5; color: var(--text); }
.dg-arrow { width: 22px; height: 22px; color: rgba(var(--accent-rgb), .55); flex: 0 0 auto; }
@media (max-width: 620px) {
    .dg-pair { grid-template-columns: 1fr; gap: 8px; }
    .dg-arrow { transform: rotate(90deg); margin-left: 2px; }
}

/* -- SPLIT: proportional split of one total ---------------------------- */
.dg-split { display: grid; gap: 14px; }
.dg-bar { display: flex; height: 46px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.s-seg {
    display: flex; align-items: center; justify-content: center; padding: 0 10px;
    font-size: .8rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden;
    background: rgba(var(--accent-rgb), var(--heat, .5));
}
/* pale segments need an edge or they vanish against the card */
.s-seg.is-light { color: var(--text-heading); box-shadow: inset 0 0 0 1px var(--border); }
.dg-key { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.dg-key div { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--text-muted); }
.dg-key i { width: 12px; height: 12px; border-radius: 3px; background: rgba(var(--accent-rgb), var(--heat, .5)); flex: 0 0 auto; }

/* -- FLOW: process steps with arrows ----------------------------------- */
.dg-flow { display: grid; gap: 10px; }
.dg-step {
    display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
    padding: 15px 18px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border);
}
.dg-step .f-n {
    width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    font-size: .78rem; font-weight: 800; color: #fff;
    background: rgba(var(--accent-rgb), var(--heat, .6));
}
.dg-step .f-title { font-size: .98rem; font-weight: 700; color: var(--text-heading); line-height: 1.35; }
.dg-step .f-body { font-size: .9rem; line-height: 1.5; color: var(--text-muted); margin-top: 4px; }
.dg-chev { display: grid; place-items: center; color: rgba(var(--accent-rgb), .4); }
.dg-chev svg { width: 18px; height: 18px; transform: rotate(90deg); }
@media (min-width: 1080px) {
    /* Five steps across 940px leaves ~188px per column. The stacked mobile layout puts the
       number BESIDE the text, which ate ~40px, and the card border and padding ate another
       ~36px, leaving ~112px of text width: every word wrapped onto its own line and the cards
       grew to 640px tall. The chevrons made it worse by taking a further ~112px of the row.
       So on desktop the step drops its card chrome and stacks the number ABOVE the text,
       exactly like .dg-track does, which restores ~180px of text width. */
    .dg-flow { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 24px; }
    .dg-flow .dg-chev { display: none; } /* the numbers already carry the sequence */
    .dg-flow .dg-step {
        display: block; min-width: 0;
        background: none; border: 0; border-radius: 0;
        border-top: 2px solid rgba(var(--accent-rgb), var(--heat, .6));
        padding: 16px 0 0;
    }
    .dg-flow .dg-step .f-n { margin-bottom: 11px; }
    .dg-flow .dg-step .f-title { font-size: .95rem; }
}

/* -- PHASE: grouped plan cards ----------------------------------------- */
.dg-phase { display: grid; gap: 12px; }
@media (min-width: 760px) { .dg-phase { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.dg-ph {
    padding: 18px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border);
    border-top: 3px solid rgba(var(--accent-rgb), var(--heat, .6));
}
.dg-ph .p-when { font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.dg-ph .p-title { font-size: 1rem; font-weight: 700; color: var(--text-heading); margin: 6px 0 8px; line-height: 1.3; }
.dg-ph ul { margin: 0 0 0 16px; padding: 0; }
.dg-ph li { font-size: .88rem; line-height: 1.5; color: var(--text-muted); margin-bottom: 6px; }

/* -- FUNNEL: magnitude bars -------------------------------------------- */
.dg-funnel { display: grid; gap: 10px; }
.dg-fr { display: grid; grid-template-columns: minmax(110px, 1fr) 2.2fr auto; gap: 14px; align-items: center; }
.dg-fr .n-label { font-size: .92rem; font-weight: 600; color: var(--text-heading); line-height: 1.35; }
.dg-fr .n-track { height: 30px; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); overflow: hidden; }
.dg-fr .n-fill { height: 100%; background: rgba(var(--accent-rgb), var(--heat, .6)); border-radius: 7px 0 0 7px; }
.dg-fr .n-val { font-size: .9rem; font-weight: 700; color: var(--text-heading); white-space: nowrap; }
@media (max-width: 560px) {
    .dg-fr { grid-template-columns: 1fr auto; }
    .dg-fr .n-track { grid-column: 1 / -1; order: 3; }
}

/* ---- end-of-post quiz ------------------------------------------------ */
.article .quiz {
    margin-top: 56px; padding: clamp(24px, 3.6vw, 34px);
    border: 1px solid var(--border); border-radius: 18px; background: var(--bg-card);
}
.article .quiz-eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); }
.article .quiz h3 { font-size: 1.35rem; margin: 9px 0 0; }
.article .quiz-intro { font-size: .95rem; color: var(--text-muted); margin: 8px 0 0; }
.article .quiz-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 24px; }
.article .quiz-q { margin: 0; padding-top: 22px; border-top: 1px solid var(--border); }
.article .quiz-q:first-child { padding-top: 0; border-top: 0; }
.article .q-text { font-size: 1.02rem; font-weight: 700; line-height: 1.45; color: var(--text-heading); margin: 0 0 14px; }
.article .q-text b { color: var(--accent); font-weight: 800; margin-right: 7px; }
.q-opts { display: grid; gap: 8px; }
/* appearance:none is REQUIRED: without it Chrome repaints the disabled button with
   the native control background and wipes the accent fill off the revealed answer. */
.q-opt {
    appearance: none; -webkit-appearance: none;
    display: flex; align-items: flex-start; gap: 11px; width: 100%; text-align: left;
    font: inherit; font-size: .97rem; line-height: 1.45; color: var(--text);
    background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
    padding: 13px 15px; cursor: pointer;
    transition: border-color .2s var(--ease), background .2s var(--ease);
}
.q-opt::before {
    content: ""; flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px;
    border: 2px solid rgba(var(--accent-rgb), .4); border-radius: 50%;
    font-size: .72rem; font-weight: 800; line-height: 15px; text-align: center;
}
.q-opt:hover:not(:disabled) { border-color: rgba(var(--accent-rgb), .55); background: var(--bg-card-hover); }
.q-opt:disabled { cursor: default; }
.q-opt.is-right { border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 600; }
.q-opt.is-right::before { content: "\2713"; border-color: #fff; color: #fff; }
.q-opt.is-wrong { opacity: .6; border-color: var(--border); }
.q-opt.is-wrong::before { content: "\2715"; border-color: rgba(var(--accent-rgb), .35); color: var(--text-muted); }
.q-opt .q-mark {
    margin-left: auto; padding-left: 12px; font-size: .64rem; font-weight: 800;
    letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; align-self: center;
}
.q-why {
    font-size: .95rem; line-height: 1.6; color: var(--text-muted); margin: 13px 0 0;
    padding-left: 15px; border-left: 2px solid rgba(var(--accent-rgb), .35);
}

/* ---- article CTA ----------------------------------------------------- */
.article .cta-box {
    margin-top: 50px; padding: 32px; border: 1px solid var(--border); border-radius: 16px;
    background: linear-gradient(160deg, var(--bg-card) 0%, var(--bg) 100%);
}
.article .cta-box h3 { margin-top: 0; }
.article .cta-box p { color: var(--text-muted); }

/* ---- blog listing ---------------------------------------------------- */
.blog-head { max-width: 900px; margin: 0 auto; padding: clamp(110px, 13vw, 160px) 24px 0; text-align: center; }
.blog-head h1 { font-size: clamp(2.2rem, 5.5vw, 3.4rem); line-height: 1.06; letter-spacing: -.03em; color: var(--text-heading); margin: 0 0 16px; }
.blog-head p { font-size: 1.1rem; line-height: 1.6; color: var(--text-muted); max-width: 620px; margin: 0 auto; }

.blog-grid {
    max-width: 1100px; margin: 0 auto; padding: clamp(40px, 6vw, 64px) 24px clamp(70px, 10vw, 120px);
    display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.blog-card {
    display: flex; flex-direction: column; text-decoration: none;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
    overflow: hidden; transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.blog-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.blog-card .bc-img { aspect-ratio: 16/9; background: var(--bg); overflow: hidden; }
.blog-card .bc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card .bc-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.blog-card .bc-meta { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.blog-card .bc-title { font-size: 1.14rem; font-weight: 700; line-height: 1.35; letter-spacing: -.015em; color: var(--text-heading); margin: 0 0 10px; }
.blog-card .bc-excerpt { font-size: .93rem; line-height: 1.55; color: var(--text-muted); margin: 0 0 16px; flex: 1; }
.blog-card .bc-more { font-size: .86rem; font-weight: 600; color: var(--accent); }

/* ---- comparison table ------------------------------------------------ */
.cmp-wrap { overflow-x: auto; margin: 32px 0 40px; border: 1px solid var(--border); border-radius: 14px; }
table.cmp { width: 100%; border-collapse: collapse; min-width: 720px; background: var(--bg-card); }
table.cmp th, table.cmp td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--border); font-size: .93rem; line-height: 1.5; }
table.cmp thead th { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); background: var(--bg); white-space: nowrap; }
table.cmp thead th:first-child { width: 210px; }
table.cmp tbody th { font-weight: 600; color: var(--text-heading); }
table.cmp td { color: var(--text); }
table.cmp tr:last-child th, table.cmp tr:last-child td { border-bottom: 0; }
table.cmp .yes { color: #22c55e; font-weight: 700; }
table.cmp .no { color: #ef4444; font-weight: 700; }
table.cmp .part { color: #f59e0b; font-weight: 700; }
table.cmp .col-us { background: rgba(var(--accent-rgb), .07); }
table.cmp thead th.col-us { background: rgba(var(--accent-rgb), .13); color: var(--accent); }