/* 10 articles of 24 Oct 2026 (worker b2339754). Prefix a24. Builds on /blog/fmtc/cr-viz.css (crv). Brand: ink #111111, orange #FF6B00, cream #FFF8F1. */
.a24-fl__l{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:a24}
.a24-fl__i{position:relative;display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;padding:14px 16px;border-radius:16px;background:#fff;border:1px solid #efe4d8;transition:transform .6s cubic-bezier(.2,.7,.2,1) calc(var(--i)*.1s),opacity .6s ease calc(var(--i)*.1s)}
.crv-dark .a24-fl__i{background:#1b1b1d;border-color:#2e2e31}
.crv-js .a24-fl:not(.is-in) .a24-fl__i{opacity:0;transform:translateY(14px)}
.a24-fl__i:not(:last-child)::after{content:"";position:absolute;left:37px;bottom:-13px;width:2px;height:12px;background:#FF6B00}
.a24-fl__n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:2px solid #FF6B00;font:600 1rem/1 var(--sans,system-ui);color:#FF6B00;background:transparent}
.a24-fl__i.is-key .a24-fl__n{background:#FF6B00;color:#111}
.a24-fl__t{display:block;font:600 1.02rem/1.25 var(--sans,system-ui);margin:2px 0 4px}
.a24-fl__w{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;background:rgba(255,107,0,.14);color:#c24f00;font:600 .7rem/1.4 var(--sans,system-ui);letter-spacing:.06em;text-transform:uppercase;vertical-align:2px}
.crv-dark .a24-fl__w{color:#ffb277}
.a24-fl__d{display:block;font-size:.93rem;line-height:1.5;opacity:.85}
@media (min-width:760px){.a24-fl--row .a24-fl__l{grid-template-columns:repeat(var(--n),1fr)}.a24-fl--row .a24-fl__i{grid-template-columns:1fr}.a24-fl--row .a24-fl__i:not(:last-child)::after{left:auto;right:-12px;top:36px;bottom:auto;width:12px;height:2px}}
/* calculator */
.a24-calc .a24-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:16px 0 6px}
.a24-calc .a24-out p{margin:0;padding:12px 14px;border-radius:14px;background:#111;color:#fff}
.a24-calc .a24-out p span{display:block;font-size:.78rem;letter-spacing:.04em;opacity:.75;margin-bottom:4px}
.a24-calc .a24-out output{font:400 1.7rem/1.05 var(--serif,Georgia);color:#FF6B00}
.a24-calc .a24-out p.is-main{background:#FF6B00;color:#111}.a24-calc .a24-out p.is-main output{color:#111}
.a24-calc .a24-i{margin:0 0 12px;font-size:.95rem;line-height:1.5;color:#5d5750}
/* compare table */
.a24-tw{overflow-x:auto;margin:18px 0}
/* scale meter */
.a24-mt__row{display:grid;grid-template-columns:minmax(120px,38%) 1fr auto;gap:10px;align-items:center;margin:10px 0}
.a24-mt__row span{font-size:.92rem;line-height:1.35}
.a24-mt__row i{display:block;height:12px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.crv:not(.crv-dark) .a24-mt__row i{background:#efe4d8}
.a24-mt__row em{display:block;height:100%;width:var(--w);background:#FF6B00;border-radius:999px;transform-origin:left;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.crv-js .a24-mt:not(.is-in) .a24-mt__row em{transform:scaleX(0)}
.a24-mt__row b{font:600 .95rem/1 var(--sans,system-ui);color:#FF6B00;min-width:3.5em;text-align:right}
.a24-ts{display:block;margin-top:4px;font-size:.72rem;opacity:.6}
@media (prefers-reduced-motion:reduce){.a24-fl__i,.a24-mt__row em{transition:none!important;opacity:1!important;transform:none!important}}

/* page mock inside crv phones */
.a24-pg p{margin:6px 0;padding:8px 10px;border-radius:10px;background:#fff;font-size:.82rem;line-height:1.35;color:#111}
.a24-pg p.is-img{height:64px;background:linear-gradient(135deg,#e9e3da,#d8d0c4)}
.a24-pg p.is-o{background:#FF6B00;font-weight:600;text-align:center}
.a24-pg p.is-miss{background:transparent;border:1px dashed #c0392b;color:#a93226}
.a24-pg p.is-ok{background:#fff3e8;border:1px solid #ffc89c}

/* tables: the blog sheet sets td nowrap, which clips cards on phones */
.b-art--a24 .cr-t td,.b-art--a24 .cr-t th{white-space:normal;overflow-wrap:anywhere}