/* ===========================================================================
   Masnaa OS — product page components (on top of redesign.css chrome).
   Vocabulary: technical line drawing, the machine as a file, evidence with
   citations, human review, receipts, the truth boundary.
   =========================================================================== */

.m-k { display: block; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; }
.m-sim { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .06em; color: var(--amber-deep); background: color-mix(in srgb, var(--amber) 16%, transparent); padding: .15rem .45rem; border-radius: 2px; }
.m-caption { font-size: .72rem; color: var(--muted); }
.fx .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.fx .reveal.in { opacity: 1; transform: none; }

/* ---------- hero line drawing ---------- */
.m-hero-visual { position: relative; padding: clamp(20px, 2.4vw, 32px); display: flex; flex-direction: column; gap: .8rem; justify-content: center;
  background-color: var(--paper-2);
  background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 28px 28px; }
.m-line { width: 100%; height: auto; display: block; background: var(--white); border: 1px solid var(--ink); box-shadow: 10px 10px 0 color-mix(in srgb, var(--ink) 7%, transparent); }
.m-line .cons line { stroke: var(--line-soft); stroke-width: 1; stroke-dasharray: 2 6; }
.m-line .ink { fill: #FCFBF7; stroke: #2a2a27; stroke-width: 1.3; }
.m-line .body { fill: #FCFBF7; }
.m-line .thin { fill: none; stroke: #5a5850; stroke-width: 1; }
.m-line .rollers circle { fill: #FCFBF7; stroke: #5a5850; stroke-width: 1; }
.m-line .parts rect { fill: #EEEAE0; stroke: #5a5850; stroke-width: 1; }
.m-line .lbl { font-family: 'JetBrains Mono', monospace; font-size: 15px; fill: #2a2a27; letter-spacing: .04em; }
.m-line .lbl.faint { fill: #9d998e; }
.m-line .station.on .ink { stroke: var(--teal); stroke-width: 1.8; }
.m-line .station.on .lbl { fill: var(--teal-deep); font-weight: 500; }
.m-line .hot { fill: color-mix(in srgb, var(--amber) 35%, #FCFBF7) !important; stroke: var(--amber-deep) !important; }
.m-line .ring { fill: none; stroke: var(--teal); stroke-width: 1.2; stroke-dasharray: 3 4; animation: m-spin 12s linear infinite; transform-origin: 74px 232px; transform-box: view-box; }
.m-line .alarm { fill: var(--amber); stroke: var(--amber-deep); animation: m-blink 1.4s steps(2) infinite; }
.m-line .traces path { fill: none; stroke: #B9B2A3; stroke-width: 1.2; }
.m-line .traces .t-on { stroke: var(--teal); stroke-width: 1.8; }
.m-line .tr-lbl { font-family: 'JetBrains Mono', monospace; font-size: 11px; fill: var(--teal-deep); }
.m-line .link { fill: none; stroke: var(--teal); stroke-width: 1.5; stroke-dasharray: 5 5; animation: m-flow 1.2s linear infinite; }
.m-line .node { fill: var(--teal); }
@keyframes m-flow { to { stroke-dashoffset: -20; } }
@keyframes m-blink { 50% { opacity: .25; } }
@keyframes m-spin { to { transform: rotate(360deg); } }

.m-file { position: absolute; top: clamp(20px, 2.4vw, 32px); right: clamp(28px, 3.4vw, 48px); width: min(300px, 42%);
  background: var(--white); border: 1px solid var(--teal); box-shadow: 8px 8px 0 color-mix(in srgb, var(--teal) 14%, transparent); font-size: .84rem; }
.m-file header { display: flex; justify-content: space-between; align-items: center; padding: .6rem .8rem; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--teal) 7%, var(--white)); }
.m-file header .mono { font-weight: 500; color: var(--teal-deep); }
.m-file dl { padding: .4rem .8rem; }
.m-file dl div { display: flex; justify-content: space-between; gap: .8rem; padding: .28rem 0; border-bottom: 1px dashed var(--line-soft); }
.m-file dl div:last-child { border-bottom: 0; }
.m-file dt { color: var(--muted); }
.m-file dd.warn { color: var(--amber-deep); font-weight: 500; }
.m-file footer { padding: .55rem .8rem; border-top: 1px solid var(--line); font-size: .74rem; color: var(--teal-deep); }

/* ---------- problem: raw vs evidence ---------- */
.m-contrast { display: grid; grid-template-columns: 1fr auto 1.25fr; align-items: stretch; width: 100%; gap: 0; border: 1px solid var(--ink); background: var(--white); box-shadow: 10px 10px 0 color-mix(in srgb, var(--ink) 7%, transparent); }
.m-raw, .m-ev { padding: 1.3rem 1.4rem; }
.m-raw { background: var(--paper); color: var(--muted); }
.m-arrow { display: grid; place-items: center; padding: 0 .6rem; color: var(--teal); font-size: 1.4rem; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.m-val { font-size: 2.4rem; line-height: 1; margin: .2rem 0 .9rem; color: var(--ink); }
.m-raw .m-val { color: #9d998e; }
.m-val small { font-size: .9rem; color: var(--muted); }
.m-raw ul { list-style: none; display: grid; gap: .3rem; font-family: var(--font-mono); font-size: .76rem; }
.m-raw li::before { content: "× "; color: var(--red, #C0473D); }
.m-ev dl div { display: grid; grid-template-columns: 76px 1fr; gap: .6rem; padding: .25rem 0; border-bottom: 1px dashed var(--line-soft); font-size: .84rem; }
.m-ev dt { color: var(--muted); font-family: var(--font-mono); font-size: .74rem; }
.m-ev .cite { color: var(--teal-deep); font-size: .74rem; }

/* ---------- open a machine: workspace view ---------- */
.m-studio { margin: clamp(24px, 3vw, 40px) var(--fx-pad); border: 1px solid var(--ink); background: var(--white); box-shadow: 10px 10px 0 color-mix(in srgb, var(--ink) 7%, transparent); }
.m-studio-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line); font-size: .76rem; color: var(--muted); }
.m-studio-bar .mono { color: var(--ink-soft); }
.m-studio-body { display: grid; grid-template-columns: 220px 1.3fr 1fr; min-height: 320px; }
.m-tree { padding: 1rem; border-right: 1px solid var(--line); background: var(--paper); }
.m-tree ul { list-style: none; display: grid; gap: 2px; font-size: .82rem; }
.m-tree li { padding: .32rem .5rem; color: var(--ink-soft); }
.m-tree .i1 { padding-left: 1.2rem; } .m-tree .i2 { padding-left: 1.9rem; } .m-tree .i3 { padding-left: 2.6rem; }
.m-tree li.on { background: color-mix(in srgb, var(--teal) 11%, transparent); color: var(--ink); box-shadow: inset 2px 0 0 var(--teal); font-weight: 500; }
.m-asset { padding: 1.1rem 1.3rem; border-right: 1px solid var(--line); }
.m-asset h3 { font-size: 1.4rem; margin-bottom: .8rem; }
.m-id { margin-bottom: 1.1rem; }
.m-id div, .m-signals li, .m-health li { display: flex; justify-content: space-between; gap: 1rem; padding: .38rem 0; border-bottom: 1px solid var(--line-soft); font-size: .88rem; }
.m-id dt { color: var(--muted); }
.m-id em { font-style: normal; font-family: var(--font-mono); font-size: .7rem; color: var(--amber-deep); background: color-mix(in srgb, var(--amber) 16%, transparent); padding: .1rem .35rem; margin-left: .3rem; }
.m-signals, .m-health ul { list-style: none; }
.m-health { padding: 1.1rem 1.3rem; }
.m-health .st { font-family: var(--font-mono); font-size: .68rem; font-weight: 500; padding: .12rem .45rem; border-radius: 2px; }
.m-health .st.live { color: var(--teal-deep); background: color-mix(in srgb, var(--teal) 13%, transparent); }
.m-health .st.stale { color: var(--amber-deep); background: color-mix(in srgb, var(--amber) 18%, transparent); }
.m-blocker { margin-top: 1rem; font-size: .82rem; color: var(--ink-soft); border-left: 3px solid var(--amber); padding: .5rem .8rem; background: color-mix(in srgb, var(--amber) 8%, transparent); }

/* ---------- ask: the real answer ---------- */
.m-answer { margin: clamp(24px, 3vw, 40px) var(--fx-pad); display: grid; grid-template-columns: 1.6fr 1fr; border: 1px solid var(--ink); background: var(--white); box-shadow: 10px 10px 0 color-mix(in srgb, var(--ink) 7%, transparent); }
.m-answer-main { padding: 1.5rem 1.6rem; border-right: 1px solid var(--line); }
.m-answer-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.m-badges { display: flex; gap: .4rem; flex-wrap: wrap; }
.m-badges b { font-size: .7rem; font-weight: 500; padding: .18rem .5rem; border: 1px solid var(--line); border-radius: 2px; color: var(--ink-soft); }
.m-badges b:first-child { border-color: var(--teal); color: var(--teal-deep); }
.m-statement { font-family: var(--font-display); font-size: clamp(1.3rem, 2.1vw, 1.75rem); line-height: 1.2; margin: .4rem 0 1.4rem; }
.m-obs { list-style: none; display: grid; gap: .1rem; margin-bottom: 1.3rem; }
.m-obs li { display: grid; grid-template-columns: 1fr; gap: .15rem; padding: .5rem 0; border-bottom: 1px dashed var(--line-soft); font-size: .92rem; }
.m-obs code { font-family: var(--font-mono); font-size: .72rem; color: var(--teal-deep); }
.m-reco { font-size: 1rem; line-height: 1.5; padding: .8rem 1rem; border-left: 3px solid var(--teal); background: color-mix(in srgb, var(--teal) 6%, transparent); margin-bottom: 1rem; }
.m-safety { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .74rem; color: var(--teal-deep); }
.m-answer-side { padding: 1.5rem 1.4rem; background: var(--paper); }
.m-trace { list-style: none; counter-reset: t; display: grid; gap: 0; font-size: .8rem; margin-bottom: 1.2rem; }
.m-trace li { counter-increment: t; padding: .42rem 0; border-bottom: 1px solid var(--line-soft); }
.m-trace li::before { content: counter(t, decimal-leading-zero) "  "; color: var(--muted); }
.m-side-note { font-size: .86rem; color: var(--ink-soft); }

/* ---------- ablation ---------- */
.m-ablation { margin: clamp(24px, 3vw, 40px) var(--fx-pad) clamp(24px, 3vw, 40px); display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ink); background: var(--white); }
.m-abl { padding: 1.5rem 1.6rem; }
.m-abl + .m-abl { border-left: 1px solid var(--line); }
.m-abl strong { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.6rem; margin-bottom: .5rem; }
.m-abl.ok strong { color: var(--teal-deep); }
.m-abl.ko { background: color-mix(in srgb, var(--amber) 7%, var(--white)); }
.m-abl.ko strong { color: var(--amber-deep); }
.m-abl p { color: var(--ink-soft); font-size: .94rem; }

/* ---------- duo: review + receipt ---------- */
.fx-duo { display: grid; grid-template-columns: 1fr 1fr; }
.fx-duo-cell { padding: clamp(48px, 6vw, 80px) var(--fx-pad); }
.fx-duo-cell + .fx-duo-cell { border-left: 1px solid var(--line); }
.fx-duo-cell > p { color: var(--ink-soft); margin: 1.2rem 0 2rem; max-width: 46ch; }
.m-review { border: 1px solid var(--ink); background: var(--white); padding: 1.2rem; box-shadow: 8px 8px 0 color-mix(in srgb, var(--ink) 7%, transparent); }
.m-review-btns { display: flex; gap: 0; border: 1px solid var(--ink); width: max-content; max-width: 100%; }
.m-review-btns button { font-family: var(--font-display); font-size: .95rem; padding: .7rem 1.1rem; border: 0; border-right: 1px solid var(--ink); background: var(--white); cursor: pointer; transition: background .15s, color .15s; }
.m-review-btns button:last-child { border-right: 0; }
.m-review-btns button:hover { background: var(--paper-2); }
.m-review-btns button.on { background: var(--ink); color: var(--white); }
.m-review-out { margin-top: .9rem; font-size: .76rem; color: var(--muted); }
.m-review-out.on { color: var(--teal-deep); }
.m-receipt { border: 1px solid var(--ink); background: var(--white); padding: 1.1rem 1.2rem; box-shadow: 8px 8px 0 color-mix(in srgb, var(--ink) 7%, transparent); font-size: .82rem; }
.m-receipt-head { display: flex; justify-content: space-between; padding-bottom: .6rem; border-bottom: 1px dashed var(--line); font-weight: 500; letter-spacing: .05em; }
.m-receipt dl div { display: grid; grid-template-columns: 96px 1fr; gap: .8rem; padding: .25rem 0; }
.m-receipt dt { color: var(--muted); }
.m-receipt .ok { color: var(--teal-deep); font-weight: 500; }
.m-receipt .warn { color: var(--amber-deep); font-weight: 500; }
.m-receipt .hash { color: var(--ink); word-break: break-all; }

/* ---------- truth ladder ---------- */
.m-ladder { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin: clamp(24px, 3vw, 40px) var(--fx-pad); border: 1px solid var(--ink); background: var(--white); }
.m-ladder li { padding: 1.4rem 1.3rem 1.6rem; display: flex; flex-direction: column; gap: .35rem; border-right: 1px solid var(--line); color: #9d998e; position: relative; }
.m-ladder li:last-child { border-right: 0; }
.m-ladder li strong { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; }
.m-ladder li small { font-size: .84rem; }
.m-ladder li.lit { color: var(--ink); background: color-mix(in srgb, var(--teal) 6%, var(--white)); box-shadow: inset 0 3px 0 var(--teal); }
.m-ladder li.lit small { color: var(--ink-soft); }
.m-ladder li:not(.lit)::after { content: "🔒"; position: absolute; top: 1.2rem; right: 1.2rem; font-size: .8rem; filter: grayscale(1); opacity: .5; }
.m-ladder li.now::after { content: "AUJOURD'HUI"; position: absolute; top: 1.3rem; right: 1.2rem; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em; color: var(--teal-deep); }
html[lang="en"] .m-ladder li.now::after { content: "TODAY"; }

/* ---------- pipeline (dark) ---------- */
.m-pipe { list-style: none; display: grid; gap: 0; border: 1px solid #45433d; }
.m-pipe li { display: grid; grid-template-columns: 40px 1fr; gap: .2rem 1rem; padding: .9rem 1.1rem; border-bottom: 1px solid #34332f; position: relative; }
.m-pipe li:last-child { border-bottom: 0; }
.m-pipe li + li::before { content: "↓"; position: absolute; top: -.72rem; left: 1.35rem; color: #3CC2B1; font-size: .8rem; background: var(--ink); padding: 0 2px; }
.m-pipe .mono { grid-row: span 2; color: #9d998e; font-size: .74rem; padding-top: .2rem; }
.m-pipe strong { font-family: var(--font-display); font-weight: 500; color: var(--white); }
.m-pipe small { color: #9d998e; font-family: var(--font-mono); font-size: .72rem; }
.m-pipe li.hl { background: #16302d; }
.m-pipe li.hl strong { color: #3CC2B1; }
.m-smoke { margin-top: 1rem; font-size: .74rem; color: #9d998e; }

/* ---------- first cases ---------- */
.m-cases { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.m-case { padding: 1.6rem var(--fx-pad) 1.8rem; border-right: 1px solid var(--line); text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: .5rem; transition: background .2s; }
.m-case:last-child { border-right: 0; }
.m-case:hover { background: var(--white); }
.m-case .mono { font-size: .74rem; color: var(--teal-deep); }
.m-case strong { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; }
.m-case p { color: var(--muted); font-size: .92rem; }
.m-sectors { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: center; padding: 1rem var(--fx-pad); font-size: .9rem; }
.m-sectors .mono { font-size: .72rem; color: var(--muted); }
.m-sectors a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--line); }
.m-sectors a:hover { color: var(--teal-deep); border-color: var(--teal); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .m-studio-body { grid-template-columns: 180px 1fr; }
  .m-health { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .m-answer { grid-template-columns: 1fr; }
  .m-answer-main { border-right: 0; border-bottom: 1px solid var(--line); }
  .fx-duo { grid-template-columns: 1fr; }
  .fx-duo-cell + .fx-duo-cell { border-left: 0; border-top: 1px solid var(--line); }
  .m-ladder { grid-template-columns: 1fr 1fr; }
  .m-ladder li:nth-child(2) { border-right: 0; }
  .m-ladder li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .m-file { position: static; width: auto; }
  .m-contrast { grid-template-columns: 1fr; }
  .m-arrow { border: 0 !important; padding: .4rem 0; transform: rotate(90deg); }
  .m-studio-body { grid-template-columns: 1fr; }
  .m-tree, .m-asset { border-right: 0; border-bottom: 1px solid var(--line); }
  .m-ablation { grid-template-columns: 1fr; }
  .m-abl + .m-abl { border-left: 0; border-top: 1px solid var(--line); }
  .m-ladder { grid-template-columns: 1fr; }
  .m-ladder li { border-right: 0 !important; border-top: 1px solid var(--line); }
  .m-ladder li:first-child { border-top: 0; }
  .m-cases { grid-template-columns: 1fr; }
  .m-case { border-right: 0; border-bottom: 1px solid var(--line); }
  .m-review-btns button { padding: .6rem .7rem; font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .m-line .link, .m-line .ring, .m-line .alarm { animation: none; }
  .fx .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- what it does: 4 blocks ---------- */
.m-blocks { display: grid; grid-template-columns: repeat(4, 1fr); }
.m-block { padding: clamp(28px, 3vw, 40px) var(--fx-pad) clamp(32px, 3.4vw, 44px); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: .5rem; }
.m-block:last-child { border-right: 0; }
.m-block .mono { font-size: .72rem; color: var(--teal-deep); }
.m-block strong { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 2vw, 1.8rem); }
.m-block p { color: var(--muted); font-size: .94rem; max-width: 30ch; }

/* ---------- product tour ---------- */
.m-tour { display: grid; grid-template-columns: 290px minmax(0, 1fr); }
.m-tabs { list-style: none; border-right: 1px solid var(--line); padding: 1rem .8rem; display: flex; flex-direction: column; gap: 2px; }
.m-tab { width: 100%; text-align: left; background: none; border: 1px solid transparent; padding: .7rem .8rem; cursor: pointer; display: grid; grid-template-columns: 28px 1fr; gap: 0 .5rem; font: inherit; color: var(--muted); transition: background .15s, color .15s; }
.m-tab .mono { font-size: .7rem; grid-row: span 2; padding-top: .2rem; }
.m-tab strong { font-family: var(--font-display); font-weight: 500; font-size: 1rem; color: var(--ink-soft); }
.m-tab small { display: none; font-size: .8rem; line-height: 1.4; margin-top: .2rem; }
.m-tab:hover { color: var(--ink); }
.m-tab.on { background: var(--white); border-color: var(--line); box-shadow: inset 3px 0 0 var(--teal); }
.m-tab.on strong { color: var(--ink); }
.m-tab.on small { display: block; color: var(--ink-soft); }
.m-shot { margin: clamp(20px, 2.4vw, 32px); display: flex; flex-direction: column; gap: .6rem; }
.m-shot img { width: 100%; height: auto; display: block; border: 1px solid var(--ink); background: var(--white); box-shadow: 10px 10px 0 color-mix(in srgb, var(--ink) 7%, transparent); transition: opacity .2s; }
.m-shot figcaption { font-size: .72rem; color: var(--muted); }

/* ---------- pilots ---------- */
.m-pilots { display: grid; grid-template-columns: 1fr 1fr; }
.m-pilot { display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.m-pilot:last-child { border-right: 0; }
.m-pilot img { width: calc(100% - 2 * var(--fx-pad)); height: auto; margin: clamp(20px, 2.4vw, 32px) var(--fx-pad) 0; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; border: 1px solid var(--ink); background: var(--white); }
.m-pilot img.twin { object-fit: contain; background: #fff; }
.m-pilot-body { padding: 1.4rem var(--fx-pad) 2rem; display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.m-pilot-k { font-size: .72rem; color: var(--teal-deep); }
.m-pilot-body strong { font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; line-height: 1.2; }
.m-pilot-body p { color: var(--muted); font-size: .94rem; }

/* ---------- misc ---------- */
.m-more-link { padding: 1rem var(--fx-pad) 2rem; }
.m-more-link a { color: var(--teal-deep); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--teal) 40%, transparent); }
.m-subhero .fx-crumb a { color: inherit; }

@media (max-width: 1100px) {
  .m-blocks { grid-template-columns: 1fr 1fr; }
  .m-block:nth-child(2) { border-right: 0; }
  .m-block:nth-child(n+3) { border-top: 1px solid var(--line); }
  .m-tour { grid-template-columns: 1fr; }
  .m-tabs { border-right: 0; border-bottom: 1px solid var(--line); flex-direction: row; overflow-x: auto; }
  .m-tab { white-space: nowrap; grid-template-columns: auto auto; }
  .m-tab .mono { grid-row: auto; }
  .m-tab.on small { display: none; }
}
@media (max-width: 760px) {
  .m-blocks, .m-pilots { grid-template-columns: 1fr; }
  .m-block, .m-pilot { border-right: 0; border-top: 1px solid var(--line); }
}
.m-subhero { padding-top: clamp(40px, 6vw, 80px) !important; }
.m-subhero h1 { font-size: clamp(2.2rem, 4.6vw, 4.2rem) !important; }

/* ---------- film ---------- */
.m-film-stage { margin: clamp(24px, 3vw, 40px) var(--fx-pad) 0; background: var(--ink); border: 1px solid var(--ink); box-shadow: 10px 10px 0 var(--paper-2); }
.m-film-stage video { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; background: #0f0f0e; }
.m-film-cap { padding: 1rem var(--fx-pad) clamp(32px, 4vw, 48px); font-size: .74rem; color: var(--muted); }

/* ---------- icons (/assets/icons.svg) ---------- */
.ico { width: 26px; height: 26px; color: var(--ink); flex: 0 0 auto; }
.blk-ico { width: 38px; height: 38px; color: var(--teal-deep); margin-bottom: .3rem; }
.tab-ico { width: 20px; height: 20px; grid-row: span 2; margin-top: .1rem; color: var(--muted); }
.m-tab.on .tab-ico { color: var(--teal-deep); }
.fx-fact .fact-ico { width: 24px; height: 24px; color: var(--teal-deep); margin-bottom: .4rem; display: block; }
.m-pipe li { grid-template-columns: 40px 1fr !important; }
.pipe-ico { grid-row: span 2; width: 24px; height: 24px; color: #D8D3C7; --ico-accent: #3CC2B1; margin-top: .1rem; }