/* © TechNext Pte. Ltd. (technext.asia). All rights reserved. */
/* The eight industry pages (22 Oct 2026 redesign): futuristic glass on the light TechNext system. The cartoon world heroes,
   Nexi poses and vignette flow are gone. Builds on home-fx.css (glass tokens, .fx-hero, .fx-proof, .fx-close, .fx-tag).
   Markup: _src/industry_fx.py (hero panel, intro, workflow chain) + _src/build.py industry_html; behaviour: assets/js/pages/industry-fx.js.
   Motion is transform/opacity, paused off-screen, with a full prefers-reduced-motion fallback. */

.ind-fx { --spring: cubic-bezier(.16,1,.3,1); --ease-expo: cubic-bezier(.16,1,.3,1); --amber: #8F5A00; }
.ind-fx .m-short { display: none; }

/* ---------------------------------------------------------------- hero */
.ind-fx .fx-hero { padding: 44px 0 68px; }
.ind-fx .fx-hero h1 { max-width: 22ch; font-size: clamp(2rem, 1.2rem + 2.2vw, 3rem); }
.ind-fx .fx-hero .crumbs { margin-bottom: 18px; }
.ind-fx .fx-hero-in { align-items: center; }
.ind-fx .fx-lead { max-width: 54ch; margin-bottom: 28px; }
.ixf-act { display: flex; flex-wrap: wrap; gap: 12px; }
.ixf-apps { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; }
.ixf-apps a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; background: rgba(255,255,255,.8); border: 1px solid var(--line);
  color: var(--ink); font: 600 14.5px/1 var(--font-body); text-decoration: none; transition: border-color .25s var(--fx-ease), transform .25s var(--fx-ease); }
.ixf-apps a:hover { border-color: var(--blue-300); transform: translateY(-1px); text-decoration: none; }
.ixf-apps .oi { width: 20px; height: 20px; }

/* ---------------------------------------------------------------- hero panel: a live Odoo record */
.ixf-panel { position: relative; border-radius: 24px; padding: 20px 20px 16px; background: var(--fx-glass); border: 1px solid var(--fx-edge); box-shadow: var(--fx-depth), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
.ixf-panel .fx-result-glow { opacity: 1; }
.ixf-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ixf-t { display: flex; align-items: center; gap: 10px; margin: 0; min-width: 0; }
.ixf-t .oi { width: 24px; height: 24px; flex: none; }
.ixf-t span, .ixf-post-h span { display: grid; gap: 2px; min-width: 0; }
.ixf-t b { font: 800 16px/1.2 var(--font-display); color: var(--ink); }
.ixf-t small, .ixf-post-h small { font: 500 12.5px/1.25 var(--font-body); color: var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the record's status bar */
.ixf-bar { display: flex; list-style: none; margin: 14px 0 14px; padding: 0; }
.ixf-seg { position: relative; flex: 1 1 0; min-width: 0; margin-left: -5px; padding: 9px 6px 9px 16px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 700 12.5px/1 var(--font-body); background: var(--blue); color: #fff;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%, 11px 50%); }
.ixf-seg:first-child { margin-left: 0; padding-left: 10px; border-radius: 9px 0 0 9px; clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%); }
.ixf-seg:last-child { padding-right: 10px; border-radius: 0 9px 9px 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 11px 50%); }
.ixf-panel.is-js .ixf-seg { background: #EAEFF8; color: var(--body); }
.ixf-panel.is-js .ixf-seg.is-done { background: var(--blue); color: #fff; }
.ixf-panel.is-js .ixf-seg.is-cur { background: var(--blue-100); color: var(--blue-700); }
.ixf-panel.is-js .ixf-seg.is-cur::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--blue); }

/* key figures */
.ixf-kpis { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; margin: 0 0 4px; border-top: 1px solid var(--fx-line); }
.ixf-k { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 5px; padding: 13px 14px 12px; transition: opacity .6s var(--fx-ease), transform .6s var(--fx-ease); transition-delay: calc(var(--r, 0) * 90ms); }
.ixf-k + .ixf-k { border-left: 1px solid var(--fx-line); }
.ixf-k dt { font: 600 12px/1.25 var(--font-body); color: var(--body); }
.ixf-k dd { margin: 0; font: 800 22px/1.05 var(--font-display); color: var(--ink); letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* lines or bars */
.ixf-mid { padding: 8px 0 6px; border-top: 1px solid var(--fx-line); }
.ixf-tbl { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.ixf-tbl th { padding: 9px 14px 7px; text-align: left; font: 700 12px/1.2 var(--font-body); color: var(--body); white-space: nowrap; }
.ixf-tbl th.n, .ixf-tbl td.n { text-align: right; }
.ixf-tbl td { padding: 9px 14px; border-top: 1px solid #EEF1F7; color: var(--ink); font-weight: 600; }
.ixf-tbl td:first-child { font-weight: 650; }
.ixf-r { transition: opacity .55s var(--fx-ease), transform .55s var(--fx-ease); transition-delay: calc(var(--r, 0) * 110ms); }
.ixf-bars { list-style: none; margin: 0; padding: 14px 14px 10px; display: grid; gap: 11px; }
.ixf-brow { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px 12px; align-items: baseline; }
.ixf-bl { font: 650 13px/1.3 var(--font-body); color: var(--ink); min-width: 0; }
.ixf-bv { font: 700 13px/1.3 var(--font-body); color: var(--body); text-align: right; font-variant-numeric: tabular-nums; }
.ixf-bt { grid-column: 1 / -1; position: relative; height: 8px; border-radius: 99px; background: rgba(49,103,202,.1); overflow: hidden; }
.ixf-bt i { position: absolute; top: 0; bottom: 0; left: calc(var(--o, 0) * 100%); width: calc(var(--w, 1) * 100%); border-radius: 99px; background: linear-gradient(90deg, #6FA0F5, var(--blue));
  transform-origin: left; transition: transform .9s var(--fx-ease); transition-delay: calc(var(--r, 0) * 120ms + .15s); }
.ixf-brow[data-k="b"] .ixf-bt i { background: linear-gradient(90deg, #8DB2F4, #5A8BE0); }
.ixf-brow[data-k="c"] .ixf-bt i, .ixf-brow[data-k="cost"] .ixf-bt i { background: #A9C2F1; }
.ixf-brow[data-k="gain"] .ixf-bt i { background: linear-gradient(90deg, #35B889, var(--ok)); }
.ixf-brow[data-k="gain"] .ixf-bl, .ixf-brow[data-k="gain"] .ixf-bv { color: var(--ok); font-weight: 800; }
.ixf-brow[data-k="full"] .ixf-bt i { background: linear-gradient(90deg, #E6A23A, var(--fx-amber)); }
.ixf-chip { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: var(--blue-050); color: var(--blue-700); font: 700 12px/1.2 var(--font-body); white-space: nowrap; }
.ixf-chip[data-tone="warn"] { background: #FDF3E1; color: var(--fx-amber); }
.ixf-chip[data-tone="ok"] { background: var(--ok-050); color: var(--ok); }
.ixf-tbl td .ixf-chip { margin-left: 6px; }
.ixf-tbl td.n .ixf-chip { margin-left: 0; }
.ixf-sw { display: inline-grid; }
.ixf-sw > span { grid-area: 1 / 1; text-align: center; transition: opacity .4s var(--fx-ease); }
.ixf-sw .ixf-sb { opacity: 0; }
.ixf-panel:not(.is-js) .ixf-sw .ixf-sa, .ixf-panel.is-s4 .ixf-sw .ixf-sa { opacity: 0; }
.ixf-panel:not(.is-js) .ixf-sw .ixf-sb, .ixf-panel.is-s4 .ixf-sw .ixf-sb { opacity: 1; }
.ixf-sw:has(.ixf-sb) { background: var(--ok-050); color: var(--ok); }
.ixf-panel.is-js:not(.is-s3) .ixf-sw[data-tone="warn"] { background: #FDF3E1; color: var(--fx-amber); }
.ixf-panel.is-js:not(.is-s3) .ixf-sw[data-tone="info"] { background: var(--blue-050); color: var(--blue-700); }

/* the data line from the record to its journal entry */
.ixf-wire { position: relative; height: 24px; margin: 2px 0; }
.ixf-wire::before, .ixf-wire::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; border-radius: 2px; }
.ixf-wire::before { background: var(--fx-line); }
.ixf-wire::after { background: var(--blue); box-shadow: 0 0 10px rgba(49,103,202,.7); transform-origin: top; transition: transform .7s var(--fx-ease); }
.ixf-wire i { position: absolute; left: 50%; top: 0; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); box-shadow: 0 0 12px 2px rgba(49,103,202,.6); opacity: 0; }
.ixf-wire i + i { animation-delay: .6s !important; }
.ixf-panel.is-js .ixf-wire::after { transform: scaleY(0); }
.ixf-panel.is-js.is-s3 .ixf-wire::after { transform: scaleY(1); }
.ixf-panel.is-js.is-s3 .ixf-wire i { animation: ixfDrop 1.2s var(--fx-ease) infinite; }
.ixf-panel.is-js.is-s4 .ixf-wire i { animation: none; opacity: 0; }
@keyframes ixfDrop { from { transform: translateY(-4px); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } to { transform: translateY(18px); opacity: 0; } }

/* the journal entry it posts */
.ixf-post { padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.92); border: 1px solid #E3E9F5; box-shadow: 0 10px 22px -20px rgba(30,70,145,.55); transition: opacity .6s var(--fx-ease), border-color .6s var(--fx-ease), box-shadow .6s var(--fx-ease); }
.ixf-post-h { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.ixf-post-h .oi { width: 20px; height: 20px; flex: none; }
.ixf-post-h b { font: 800 14.5px/1.2 var(--font-display); color: var(--ink); }
.ixf-bal { margin-left: auto; flex: none; padding: 4px 10px; border-radius: 999px; background: var(--ok-050); color: var(--ok); font: 800 12.5px/1 var(--font-body); font-style: normal; transition: opacity .5s var(--fx-ease), transform .5s var(--fx-ease); }
.ixf-led { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; font-variant-numeric: tabular-nums; }
.ixf-led li { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; gap: 8px; align-items: baseline; padding: 5px 0; border-top: 1px solid #EEF1F7; font-size: 13px; color: var(--body); transition: opacity .5s var(--fx-ease), transform .5s var(--fx-ease); transition-delay: calc(var(--r, 0) * 110ms); }
.ixf-led li:first-child { border-top: 0; }
.ixf-led i { font: 800 12px/1 var(--font-body); font-style: normal; color: var(--blue); }
.ixf-led li:nth-child(n+2) i { color: var(--body); }
.ixf-led b { color: var(--ink); font-weight: 700; }
.ixf-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; }
.ixf-chips li { padding: 6px 11px; border-radius: 999px; background: var(--blue-050); color: var(--blue-700); font: 700 12.5px/1 var(--font-body); transition: opacity .5s var(--fx-ease), transform .5s var(--fx-ease); transition-delay: calc(var(--r, 0) * 80ms); }

/* panel stages (JS drives is-s1..is-s4; without JS everything is shown) */
.ixf-panel.is-js .ixf-k { opacity: 0; transform: translateY(8px); }
.ixf-panel.is-js.is-s1 .ixf-k, .ixf-panel.is-js.is-s2 .ixf-k, .ixf-panel.is-js.is-s3 .ixf-k, .ixf-panel.is-js.is-s4 .ixf-k { opacity: 1; transform: none; }
.ixf-panel.is-js .ixf-r { opacity: 0; transform: translateX(-12px); }
.ixf-panel.is-js.is-s2 .ixf-r, .ixf-panel.is-js.is-s3 .ixf-r, .ixf-panel.is-js.is-s4 .ixf-r { opacity: 1; transform: none; }
.ixf-panel.is-js .ixf-bt i { transform: scaleX(0); }
.ixf-panel.is-js.is-s2 .ixf-bt i, .ixf-panel.is-js.is-s3 .ixf-bt i, .ixf-panel.is-js.is-s4 .ixf-bt i { transform: scaleX(1); }
.ixf-panel.is-js .ixf-post { opacity: .5; }
.ixf-panel.is-js.is-s4 .ixf-post { opacity: 1; border-color: var(--blue-300); box-shadow: 0 0 0 3px rgba(49,103,202,.1), 0 16px 30px -20px rgba(49,103,202,.6); }
.ixf-panel.is-js .ixf-led li { opacity: 0; transform: translateX(-10px); }
.ixf-panel.is-js.is-s4 .ixf-led li { opacity: 1; transform: none; }
.ixf-panel.is-js .ixf-bal { opacity: 0; transform: scale(.9); }
.ixf-panel.is-js.is-s4 .ixf-bal { opacity: 1; transform: none; transition-delay: .5s; }
.ixf-panel.is-js .ixf-chips li { opacity: .4; transform: translateY(2px); }
.ixf-panel.is-js.is-s4 .ixf-chips li { opacity: 1; transform: none; }
.ixf-panel.is-js.is-s4 .ixf-seg:last-child { background: var(--ok); }
.ixf-hero.fx-off .ixf-wire i, .ixf-hero.fx-off .ixf-seg::before { animation-play-state: paused !important; }

/* ---------------------------------------------------------------- proof strip + one paragraph */
.ind-fx .fx-proof { padding: 0; }
.ixf-one-sec { padding: 72px 0 0 !important; }
.ixf-one { max-width: 880px; padding: 28px 32px; border-radius: 22px; background: var(--fx-glass); border: 1px solid var(--fx-edge); box-shadow: var(--fx-depth);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.ixf-one h2 { margin: 0 0 10px; font: 800 1.6rem/1.2 var(--font-display); color: var(--ink); letter-spacing: -.015em; }
.ixf-one p { margin: 0; font-size: 1.06rem; line-height: 1.65; color: var(--body); }

/* ---------------------------------------------------------------- the workflow: a chain of glass Odoo records on a glowing data line */
.ixf-chain { --p: 1; position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 44px; }
.ixf-chain::before, .ixf-chain::after { content: ""; position: absolute; left: 50%; top: 24px; bottom: 24px; width: 2px; margin-left: -1px; border-radius: 2px; pointer-events: none; }
.ixf-chain::before { background: var(--fx-line); }
.ixf-chain::after { background: linear-gradient(180deg, rgba(49,103,202,0), var(--blue) 6%, var(--blue)); box-shadow: 0 0 14px rgba(49,103,202,.55); transform-origin: top; transform: scaleY(var(--p)); }
.ixf-step { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 64px minmax(0,1fr); grid-template-areas: "info node rec"; align-items: center; }
.ixf-step:nth-child(even) { grid-template-areas: "rec node info"; }
.ixf-info { grid-area: info; padding-right: 8px; }
.ixf-step:nth-child(even) .ixf-info { padding-right: 0; padding-left: 8px; }
.ixf-no { margin: 0 0 8px; font: 700 13px/1.2 var(--font-body); color: var(--blue-700); }
.ixf-info h3 { margin: 0 0 10px; font: 800 clamp(1.3rem, 1.05rem + 1vw, 1.75rem)/1.15 var(--font-display); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.ixf-info > p:not(.ixf-no) { margin: 0 0 16px; font-size: 1.02rem; line-height: 1.62; color: var(--body); max-width: 46ch; }
.ixf-meta { display: grid; gap: 8px; margin: 0; max-width: 46ch; }
.ixf-meta > div { display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 12px; align-items: start; }
.ixf-meta dt { font: 650 12.5px/1.45 var(--font-body); color: var(--body); padding-top: 1px; }
.ixf-meta dd { margin: 0; display: flex; align-items: flex-start; gap: 8px; font: 600 14px/1.45 var(--font-body); color: var(--ink); }
.ixf-meta dd .oi, .ixf-meta dd .ic { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--blue); }
.ixf-was { font-weight: 500 !important; color: var(--body) !important; text-decoration: line-through; text-decoration-color: rgba(210,67,59,.45); text-decoration-thickness: 1.5px; }
.ixf-node { grid-area: node; position: relative; z-index: 1; display: grid; place-items: center; height: 100%; }
.ixf-node i { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--blue-300); transition: background-color .5s var(--fx-ease), border-color .5s var(--fx-ease), box-shadow .6s var(--fx-ease); }
.ixf-node::after { content: ""; position: absolute; top: 50%; height: 2px; width: 32px; margin-top: -1px; left: 50%; background: linear-gradient(90deg, var(--blue), rgba(49,103,202,.15)); border-radius: 2px; opacity: .5; transition: opacity .6s var(--fx-ease); }
.ixf-step:nth-child(even) .ixf-node::after { left: auto; right: 50%; background: linear-gradient(270deg, var(--blue), rgba(49,103,202,.15)); }
.ixf-step.is-lit .ixf-node i, .ixf-chain:not(.is-js) .ixf-node i { background: var(--blue); border-color: var(--blue); box-shadow: 0 0 0 6px rgba(49,103,202,.14), 0 0 16px rgba(49,103,202,.65); }
.ixf-step.is-lit .ixf-node::after, .ixf-chain:not(.is-js) .ixf-node::after { opacity: 1; }
.ixf-rec { grid-area: rec; border-radius: 20px; padding: 16px 18px 14px; background: var(--fx-glass); border: 1px solid var(--fx-edge); box-shadow: var(--fx-depth), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: box-shadow .5s var(--fx-ease), transform .5s var(--fx-ease); }
.ixf-step.is-lit .ixf-rec { box-shadow: var(--fx-depth-h), inset 0 1px 0 #fff, 0 0 0 1px rgba(49,103,202,.16); }
.ixf-rec header { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; gap: 10px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--fx-line); }
.ixf-rec header .oi, .ixf-rec header .ic { width: 24px; height: 24px; color: var(--blue); }
.ixf-rec header span { display: grid; gap: 2px; min-width: 0; }
.ixf-rec header b { font: 800 15px/1.2 var(--font-display); color: var(--ink); overflow-wrap: anywhere; }
.ixf-rec header small { font: 500 12.5px/1.25 var(--font-body); color: var(--body); }
.ixf-pill { padding: 5px 11px; border-radius: 999px; background: var(--blue-050); color: var(--blue-700); font: 700 12.5px/1 var(--font-body); font-style: normal; white-space: nowrap; }
.ixf-pill[data-tone="ok"] { background: var(--ok-050); color: var(--ok); }
.ixf-pill[data-tone="warn"] { background: #FDF3E1; color: var(--fx-amber); }
.ixf-rec dl { display: grid; margin: 4px 0 0; }
.ixf-rec dl > div { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid #EEF1F7; }
.ixf-rec dt { font: 500 13px/1.4 var(--font-body); color: var(--body); }
.ixf-rec dd { margin: 0; font: 650 14px/1.4 var(--font-body); color: var(--ink); font-variant-numeric: tabular-nums; }
.ixf-rec footer { display: flex; align-items: center; gap: 8px; margin-top: 10px; font: 500 12.5px/1.35 var(--font-body); color: var(--body); }
.ixf-rec footer .ic { width: 14px; height: 14px; flex: none; color: var(--blue); }
.ixf-rec footer small { margin-left: auto; padding-left: 8px; font: 700 12px/1 var(--font-body); color: var(--fx-amber); }
.ixf-chain.is-js .ixf-step { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--fx-ease), transform .8s var(--fx-ease); }
.ixf-chain.is-js .ixf-step.is-on { opacity: 1; transform: none; }
.ixf-chain.is-js .ixf-rec { transform: translateX(26px); transition: transform .9s var(--fx-ease) .12s, box-shadow .5s var(--fx-ease); }
.ixf-chain.is-js .ixf-step:nth-child(even) .ixf-rec { transform: translateX(-26px); }
.ixf-chain.is-js .ixf-step.is-on .ixf-rec { transform: none; }

/* ---------------------------------------------------------------- the industry demo, as glass */
.ind-fx .demo-sec .sec-head { max-width: 820px; margin-bottom: 28px; }
.ixf-browser { display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 16px; border-radius: 20px 20px 0 0; background: rgba(255,255,255,.7); border: 1px solid var(--fx-edge); border-bottom: 1px solid var(--fx-line);
  box-shadow: var(--fx-depth); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); position: relative; z-index: 1; }
.ixf-browser i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #D3DBEC; }
.ixf-browser span { margin-left: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 12.5px/1 var(--font-body); color: var(--body); }
.ixf-browser em { flex: none; margin-left: auto; padding: 5px 10px; border-radius: 999px; background: #FDF3E1; color: var(--fx-amber); font: 700 12px/1 var(--font-body); font-style: normal; }
.ind-fx .ixf-browser + .dm { border-radius: 0 0 24px 24px; border-top: 0; margin-top: -1px; }
.ind-fx .dm { border-radius: 24px; border: 1px solid var(--fx-edge); background: var(--fx-glass); box-shadow: var(--fx-depth), inset 0 1px 0 #fff; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.ind-fx .dm-head { background: rgba(255,255,255,.55); border-bottom: 1px solid var(--fx-line); gap: 10px; }
.ind-fx .dm-title b { font-size: 15px; }
.ind-fx .dm-title small { font-size: 12.5px; color: var(--body); }
.ind-fx .dm-seg { background: rgba(255,255,255,.85); }
.ind-fx .dm-seg button { height: 34px; font-size: 13px; padding: 0 12px; }
.ind-fx .dm-seg button[aria-pressed="true"] { background: var(--blue); }
.ind-fx .dm-btn { height: 36px; font-size: 13px; padding: 0 14px; }
.ind-fx .dm-btn--primary { background: var(--blue); border-color: var(--blue); }
.ind-fx .dm-kpis > div { background: rgba(255,255,255,.88); }
.ind-fx .dm-kpis dt { font-size: 12px; letter-spacing: .02em; text-transform: none; color: var(--body); }
.ind-fx .dm-log li { font-size: 12.5px; background: rgba(255,255,255,.92); }
.ind-fx .dm-legend { font-size: 12px; color: var(--body); }
.ind-fx .dm-note { font-size: 13px; color: var(--body); margin-top: 14px; }
.ind-fx .dm-tip { font-size: 12.5px; }
.ind-fx .dm-tip b { font-size: 12.5px; }

/* ---------------------------------------------------------------- three problems */
.ixf-prob { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 56px; align-items: start; }
.ixf-prob-h { position: sticky; top: calc(var(--header-h) + 24px); margin-bottom: 0; }
.ixf-rows { list-style: none; margin: 0; padding: 0; border-radius: 24px; background: var(--fx-glass); border: 1px solid var(--fx-edge); box-shadow: var(--fx-depth);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.ixf-rows li { display: grid; grid-template-columns: 28px 1fr; gap: 18px; padding: 24px 28px; }
.ixf-rows li + li { border-top: 1px solid var(--fx-line); }
.ixf-rows .ic { width: 26px; height: 26px; color: var(--blue); margin-top: 2px; }
.ixf-rows h3 { margin: 0 0 6px; font: 800 19px/1.25 var(--font-display); color: var(--ink); letter-spacing: -.01em; }
.ixf-rows p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--body); }

/* ---------------------------------------------------------------- the apps we switch on (showcase) */
.ind-fx .sec-head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; max-width: none; }
.ind-fx .showcase { border-radius: 26px; overflow: hidden; gap: 0; background: var(--fx-glass); border: 1px solid var(--fx-edge); box-shadow: var(--fx-depth-h); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.ind-fx .sc-list { align-content: start; gap: 4px; padding: 14px; border-right: 1px solid var(--fx-line); background: rgba(255,255,255,.45); }
.ind-fx .sc-tab { min-height: 64px; padding: 10px 14px; border: 1px solid transparent; border-radius: 16px; background: transparent; box-shadow: none; transition: background-color .3s var(--fx-ease), border-color .3s var(--fx-ease), box-shadow .3s var(--fx-ease); }
.ind-fx .sc-tab b { font-size: 16px; }
.ind-fx .sc-tab small { font-size: 13px; color: var(--body); }
.ind-fx .sc-tab:hover { background: rgba(255,255,255,.7); border-color: transparent; box-shadow: none; }
.ind-fx .sc-tab:hover .oi { transform: none; }
.ind-fx .sc-tab.is-active { background: #fff; border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), 0 16px 30px -22px rgba(49,103,202,.7); }
.ind-fx .sc-tab:focus-visible { outline: 3px solid var(--blue-300); outline-offset: 2px; }
.ind-fx .sc-panel { border: 0; border-radius: 0; box-shadow: none; background: transparent; min-height: 360px; }
.ind-fx .sc-panel-inner { padding: 32px 34px; }
.ind-fx .sc-kicker { display: none; }
.ind-fx .sc-head h3 { font: 800 1.5rem/1.2 var(--font-display); letter-spacing: -.015em; }

/* ---------------------------------------------------------------- generated sections */
.ixf-two { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 56px; align-items: center; }
.ixf-two h2 { font: 800 clamp(1.9rem, 1.2rem + 2vw, 2.85rem)/1.1 var(--font-display); letter-spacing: -.03em; color: var(--ink); margin: 0; text-wrap: balance; }
.ixf-two .lead { margin: 16px 0 0; font-size: 1.08rem; line-height: 1.65; color: var(--body); max-width: 56ch; }
.ixf-two .checks { margin-top: 22px; }
.ixf-two .checks li { font-size: 15.5px; }

.ind-fx .ix-switch { margin-top: 24px; background: rgba(255,255,255,.85); border: 1px solid var(--line); box-shadow: none; }
.ind-fx .ix-switch button { font-size: 14px; }
.ind-fx .ix-switch button[aria-pressed="true"] { background: var(--blue); }
.ind-fx .ix-ba { gap: 10px; }
.ind-fx .ix-row { border-radius: 16px; background: var(--fx-glass); border: 1px solid var(--fx-edge); box-shadow: 0 14px 28px -24px rgba(30,70,145,.5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.ind-fx .ix-task { font-size: 14.5px; }
.ind-fx .ix-face { font-size: 14.5px; }
.ind-fx .ix-ba.is-js[data-state="after"] .ix-row { border-color: rgba(30,158,106,.35); }

.ind-fx .ix-dash { border-radius: 24px; background: var(--fx-glass); border: 1px solid var(--fx-edge); box-shadow: var(--fx-depth-h), inset 0 1px 0 #fff; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.ind-fx .ix-dash .st-bar { height: 44px; padding: 0 16px; background: rgba(255,255,255,.55); border-bottom: 1px solid var(--fx-line); font-size: 13px; }
.ind-fx .ix-sample { padding: 5px 10px; background: #FDF3E1; color: var(--fx-amber); font: 700 12px/1 var(--font-body); letter-spacing: 0; text-transform: none; }
.ind-fx .ix-kpi { background: rgba(255,255,255,.88); border: 1px solid #E3E9F5; }
.ind-fx .ix-kpi small { font-size: 12px; color: var(--body); }
.ind-fx .ix-chart-head b { font-size: 15px; }
.ind-fx .ix-views { background: rgba(255,255,255,.85); }
.ind-fx .ix-views button { font-size: 13px; height: 34px; }
.ind-fx .ix-views button[aria-pressed="true"] { background: var(--blue); color: #fff; box-shadow: none; }
.ind-fx .ix-grid em { font-size: 12px; color: var(--body); }
.ind-fx .ix-col small { font-size: 12px; }
.ind-fx .ix-bar { background: linear-gradient(180deg, #6FA0F5, var(--blue)); box-shadow: 0 0 18px -4px rgba(49,103,202,.5); }
.ind-fx .ix-bar.s1 { background: linear-gradient(180deg, #C9D8F4, #9FB9EA); box-shadow: none; }
.ind-fx .ix-bar i { font-size: 12px; }
.ind-fx .ix-legend { font-size: 12px; }
.ind-fx .ix-dash figcaption { font-size: 13px; color: var(--body); border-top: 1px solid var(--fx-line); }

.ind-fx .ix-video .yt { border-radius: 22px; border: 1px solid var(--fx-edge); box-shadow: var(--fx-depth-h); }
.ind-fx .ix-cap { font-size: 13px; color: var(--body); }
.ind-fx .ix-shot { border-radius: 18px; border: 1px solid var(--fx-edge); background: var(--fx-glass); box-shadow: var(--fx-depth); }
.ind-fx .ix-shot figcaption { font-size: 13px; color: var(--body); }
.ind-fx .ixf-media-sec .small { font-size: 13px; color: var(--body); }

.ind-fx .ix-new { border-radius: 26px; background: var(--fx-glass); border: 1px solid var(--fx-edge); box-shadow: var(--fx-depth-h), inset 0 1px 0 #fff; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.ind-fx .ix-new-head h2 { font: 800 clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem)/1.15 var(--font-display); letter-spacing: -.025em; margin: 0; }
.ind-fx .ix-new .checks li { font-size: 15.5px; }

.ind-fx .ix-phases { gap: 18px; }
.ind-fx .ix-phases::before { left: 24px; right: 24px; top: 30px; height: 2px; border-radius: 2px; opacity: 1; z-index: 0;
  background: linear-gradient(90deg, transparent, var(--blue), transparent) -30% 0 / 24% 100% no-repeat, var(--fx-line); animation: ixfPath 4.2s var(--fx-ease) infinite; }
@keyframes ixfPath { to { background-position: 130% 0, 0 0; } }
.ind-fx .ixf-phases-sec.fx-off .ix-phases::before { animation-play-state: paused; }
.ind-fx .ix-phase { border-radius: 22px; background: var(--fx-glass); border: 1px solid var(--fx-edge); box-shadow: var(--fx-depth); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); z-index: 1; }
.ind-fx .ix-ph-n { box-shadow: 0 0 0 6px rgba(234,240,251,.9), 0 0 16px rgba(49,103,202,.35); }
.ind-fx .ix-phase h3 { font: 800 1.2rem/1.2 var(--font-display); letter-spacing: -.015em; }
.ind-fx .ix-ph-apps .oi { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 0; background: none; }
.ind-fx .ix-int { border-radius: 18px; background: var(--fx-glass); border: 1px solid var(--fx-edge); box-shadow: var(--fx-depth); }
.ind-fx .ix-int > b { font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.ind-fx .ix-chip { background: rgba(255,255,255,.9); font-size: 13px; }

.ind-fx .ix-others > b { font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.ind-fx .ix-others a { min-height: 44px; height: auto; background: rgba(255,255,255,.85); }
.ind-fx .ixf-read-sec .sec-head h2 { margin: 0; }
.ind-fx .post-card { border-radius: 22px; background: var(--fx-glass); border: 1px solid var(--fx-edge); box-shadow: var(--fx-depth); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

/* the BIR block */
.ind-fx .bir-block { padding: 24px 0 72px; }
.ind-fx .bir-block .answer-box { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; max-width: 880px; margin: 0; padding: 28px 32px; border: 1px solid var(--fx-edge); border-radius: 24px; background: var(--fx-glass);
  box-shadow: var(--fx-depth-h), inset 0 1px 0 #fff; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.ind-fx .bir-block .answer-h { justify-self: start; padding: 0; background: none; border-radius: 0; font: 800 1.35rem/1.25 var(--font-display); letter-spacing: -.02em; text-transform: none; color: var(--ink); white-space: normal; }
.ind-fx .bir-block .answer-box p:not(.answer-h) { font-size: 1.04rem; line-height: 1.65; color: var(--body); max-width: 70ch; }
.ind-fx .bir-block .answer-box p.small { font-size: 14.5px; }
.ind-fx .bir-block .answer-box .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* FAQ */
.ind-fx .fx-faq { max-width: 880px; }
.ind-fx .faq { max-width: none; }
.ind-fx .faq details { border-radius: 18px; background: var(--fx-glass); border: 1px solid var(--fx-edge); box-shadow: 0 12px 26px -24px rgba(30,70,145,.5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.ind-fx .faq details[open] { border-color: rgba(49,103,202,.35); box-shadow: var(--fx-depth); }
.ind-fx .faq summary { min-height: 56px; font-size: 1.04rem; }
.ind-fx .faq .faq-a { font-size: 15.5px; }
.ind-fx .fx-close-sec { padding-top: 24px; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .ixf-two { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .ixf-prob { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .ixf-prob-h { position: static; }
  .ind-fx .showcase { grid-template-columns: minmax(0,1fr); }
  .ind-fx .sc-list { border-right: 0; border-bottom: 1px solid var(--fx-line); grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 860px) {
  .ixf-chain { gap: 32px; }
  .ixf-chain::before, .ixf-chain::after { left: 16px; margin-left: -1px; }
  .ixf-step, .ixf-step:nth-child(even) { grid-template-columns: 32px minmax(0,1fr); grid-template-areas: "node info" "node rec"; align-items: start; row-gap: 16px; }
  .ixf-node { height: auto; align-self: start; padding-top: 6px; }
  .ixf-node::after { display: none; }
  .ixf-info, .ixf-step:nth-child(even) .ixf-info { padding: 0; }
  .ixf-chain.is-js .ixf-rec, .ixf-chain.is-js .ixf-step:nth-child(even) .ixf-rec { transform: translateY(14px); }
  .ind-fx .ix-phases::before { display: none; }
}
@media (max-width: 600px) {
  .ind-fx .fx-hero { padding: 28px 0 44px; }
  .ixf-panel { padding: 16px 14px 14px; border-radius: 20px; }
  .ixf-kpis { gap: 6px; }
  .ixf-k { padding: 11px 9px 10px; }
  .ixf-k dd { font-size: 16px; }
  .ixf-seg { font-size: 12px; padding: 9px 2px 9px 13px; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%); }
  .ixf-seg:first-child { padding-left: 8px; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); }
  .ixf-seg:last-child { padding-right: 6px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%); }
  .ixf-tbl th, .ixf-tbl td { padding: 8px 8px; }
  .ixf-tbl { font-size: 12.5px; }
  .ixf-one-sec { padding-top: 48px !important; }
  .ixf-one { padding: 22px 20px; }
  .ixf-rows li { padding: 20px 18px; gap: 14px; }
  .ixf-meta > div { grid-template-columns: minmax(0,1fr); gap: 2px; }
  .ixf-rec { padding: 14px 14px 12px; }
  .ixf-rec dl > div { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); }
  .ind-fx .sc-list { grid-template-columns: minmax(0,1fr); }
  .ind-fx .sc-panel-inner { padding: 22px 18px; }
  .ind-fx .m-full { display: none; }
  .ind-fx .m-short { display: inline; }
  .ind-fx .bir-block .answer-box { padding: 22px 20px; }
  .ixf-browser { padding: 0 12px; }
  .ixf-browser span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ixf-wire i, .ixf-seg::before, .ind-fx .ix-phases::before { animation: none !important; }
  .ixf-chain.is-js .ixf-step, .ixf-chain.is-js .ixf-rec { opacity: 1; transform: none; transition: none; }
  .ixf-panel *, .ixf-step * { transition: none !important; }
}

/* ---------------------------------------------------------------- over the calm layer (calm.css sets section padding, white backgrounds, borders and
   hides section pseudo-elements with !important; the industry pages need their own rhythm, so these match its specificity and win by weight) */
body.ind-fx main > section.fx-hero:not(.ixw-hero) { padding: 36px 0 60px !important; }
body.ind-fx main > section.fx-proof:not(.ixw-hero) { padding: 0 !important; border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important; }
body.ind-fx main > section.ixf-one-sec:not(.ixw-hero) { padding: 72px 0 0 !important; }
body.ind-fx main > section.fx-close-sec:not(.ixw-hero) { padding: 24px 0 96px !important; }
body.ind-fx main > section.bir-block:not(.ixw-hero) { padding: 8px 0 80px !important; }
body.ind-fx main > section.fx-sec--alt:not(.ixw-hero) { position: relative; background: linear-gradient(180deg, #F5F8FE 0%, #FBFCFE 100%) !important; }
body.ind-fx main > section.fx-sec--alt:not(.ixw-hero)::before { content: "" !important; display: block !important; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--fx-grid) 1px, transparent 1px), linear-gradient(90deg, var(--fx-grid) 1px, transparent 1px); background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
body.ind-fx main > section.fx-sec > .container { position: relative; }
body.ind-fx main .faq details { background: var(--fx-glass) !important; border: 1px solid var(--fx-edge) !important; border-radius: 18px !important; box-shadow: 0 12px 26px -24px rgba(30,70,145,.5) !important; }
body.ind-fx main .faq details[open] { border-color: rgba(49,103,202,.35) !important; box-shadow: var(--fx-depth) !important; }
body.ind-fx main .faq summary { background: none !important; }
body.ind-fx main .demo-sec .dm, body.ind-fx main [data-demo].dm { border-radius: 24px; }
body.ind-fx main .demo-sec .ixf-browser + .dm { border-radius: 0 0 24px 24px; }
body.ind-fx main .sec-head h2 { font-size: clamp(1.9rem, 1.2rem + 2vw, 2.85rem) !important; line-height: 1.1 !important; letter-spacing: -.03em; }
body.ind-fx main .demo-sec .sec-head h2 { font-size: clamp(1.7rem, 1.1rem + 1.7vw, 2.4rem) !important; line-height: 1.12 !important; }
.ixf-proof p { margin: 0; }
body.ind-fx main .ixf-two h2 { font-size: clamp(1.9rem, 1.2rem + 2vw, 2.85rem) !important; line-height: 1.1 !important; letter-spacing: -.03em; }
@media (max-width: 767px) {
  body.ind-fx main > section.fx-hero:not(.ixw-hero) { padding: 24px 0 44px !important; }
  body.ind-fx main > section.ixf-one-sec:not(.ixw-hero) { padding: 48px 0 0 !important; }
  body.ind-fx main > section.fx-close-sec:not(.ixw-hero) { padding: 16px 0 56px !important; }
}

/* the kitchen display (F&B demo) as a light glass screen, not a dark one */
body.ind-fx main .ktn-kds { background: rgba(244,247,253,.85); border-left: 1px solid var(--fx-line); }
body.ind-fx main .ktn-kh, body.ind-fx main .ktn-kh b, body.ind-fx main .ktn-ch b { color: var(--ink); }
body.ind-fx main .ktn-kh small, body.ind-fx main .ktn-ch small { color: var(--body); }
body.ind-fx main .ktn-col { background: rgba(255,255,255,.7); border: 1px solid var(--fx-line); }
body.ind-fx main .ktn-tk { border: 1px solid #E3E9F5; border-left: 3px solid var(--c); }
body.ind-fx main .ktn-log li { background: rgba(255,255,255,.92); border-color: var(--line); color: var(--body); }
body.ind-fx main .ktn-log li b { color: var(--ink); }

/* labels that were 9px caps need room at 12px */
body.ind-fx main .srn-nums small, body.ind-fx main .srn-ops th, body.ind-fx main .srn-h { letter-spacing: 0; text-transform: none; }
body.ind-fx main .srn-nums { gap: 4px 6px; }
body.ind-fx main .scv-h { letter-spacing: 0; text-transform: none; }

/* no icon tiles anywhere: the demos' own icon holders become bare icons */
body.ind-fx main .ktn-cl-ic, body.ind-fx main .srn-dic, body.ind-fx main .fefo-ni { background: none !important; border: 0 !important; box-shadow: none !important; }

/* the screenshot zoom affordance: a white round button with a blue icon (was a dark tinted tile) */
body.ind-fx main .zoom > .ic { background: rgba(255,255,255,.94); color: var(--blue); border-radius: 50%; padding: 9px; box-shadow: 0 6px 16px -8px rgba(31,31,61,.5); }

body.ind-fx main .srn-night { background: rgba(31,31,61,.82); }
body.ind-fx main .yt-cap { background: rgba(11,16,32,.78); }

/* the phone audit block in stage.css pins demo small print at 11px with !important; the floor on these pages is 12px */
body.ind-fx main .srn-h small, body.ind-fx main .scv-h small { font-size: 12px !important; }
@media (max-width: 767px) {
  body.ind-fx main [data-demo] small, body.ind-fx main [data-demo] caption, body.ind-fx main [data-demo] th, body.ind-fx main [data-demo] td, body.ind-fx main [data-demo] dt { font-size: max(12px, .85em) !important; }
  body.ind-fx main .dm-kpis dt, body.ind-fx main .dm-ok dt, body.ind-fx main .scv-tbl th, body.ind-fx main .scv-tbl td, body.ind-fx main .snk-tab th, body.ind-fx main .snk-tab td { font-size: 12px !important; }
  body.ind-fx main .bir-block .answer-h { font-size: 1.25rem !important; }
}

/* tap targets: 44px on phones */
@media (max-width: 767px) {
  body.ind-fx main .dm-btn, body.ind-fx main .dm-seg button, body.ind-fx main .srn-sw, body.ind-fx main .ix-switch button, body.ind-fx main .ix-views button,
  body.ind-fx main [data-demo] button, body.ind-fx main .btn-link { min-height: 44px !important; }
  body.ind-fx .fx-hero .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  body.ind-fx .fx-hero .crumbs { margin-bottom: 0; }
  body.ind-fx main .ktn-t, body.ind-fx main .dm-seg button { min-width: 44px; }
  body.ind-fx main .bmt-tog { position: relative; }
  body.ind-fx main .bmt-tog::after { content: ""; position: absolute; inset: -13px; }
  body.ind-fx main input[type="range"] { min-height: 44px; }
  .ixf-proof a { display: inline-flex; align-items: center; min-height: 44px; }
  .ind-fx .bir-block p.small { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; }
  .ind-fx .bir-block p.small a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* >>> min12 (generated by qa/futuro/ind/gen_min12.py; do not edit) */
body.ind-fx main .dm-title small{font-size:12px!important}
body.ind-fx main .dm-kpis dt{font-size:12px!important}
body.ind-fx main .dm-log li{font-size:12px!important}
body.ind-fx main .dm-legend{font-size:12px!important}
body.ind-fx main .dm-note{font-size:12px!important}
body.ind-fx main .dm-tip{font-size:12px!important}
body.ind-fx main .srn-ttag text{font-size:12px!important}
body.ind-fx main .srn-vendor b{font-size:12px!important}
body.ind-fx main .srn-vendor small{font-size:12px!important}
body.ind-fx main .srn-nm b{font-size:12px!important}
body.ind-fx main .srn-flag{font-size:12px!important}
body.ind-fx main .srn-q{font-size:12px!important}
body.ind-fx main .srn-blip{font-size:12px!important}
body.ind-fx main .srn-clock small{font-size:12px!important}
body.ind-fx main .srn-h{font-size:12px!important}
body.ind-fx main .srn-ops table{font-size:12px!important}
body.ind-fx main .srn-ops th{font-size:12px!important}
body.ind-fx main .srn-ops td b{font-size:12px!important}
body.ind-fx main .srn-ops td small{font-size:12px!important}
body.ind-fx main .srn-pill{font-size:12px!important}
body.ind-fx main .srn-dt small{font-size:12px!important}
body.ind-fx main .srn-sw{font-size:12px!important}
body.ind-fx main .srn-nums small{font-size:12px!important}
body.ind-fx main .srn-rule>div{font-size:12px!important}
body.ind-fx main .srn-apply{font-size:12px!important}
body.ind-fx main .srn-dops li{font-size:12px!important}
body.ind-fx main .srn-dops li b{font-size:12px!important}
body.ind-fx main .omr-nh b,body.ind-fx main .omr-rt b,body.ind-fx main .omr-xx b{font-size:12px!important}
body.ind-fx main .omr-nd small{font-size:12px!important}
body.ind-fx main .omr-li{font-size:12px!important}
body.ind-fx main .omr-st{font-size:12px!important}
body.ind-fx main .omr-ch.is-stale::after,body.ind-fx main .dm-router.is-flash .omr-ch:not(.is-off)::before{font-size:12px!important}
body.ind-fx main .omr-av{font-size:12px!important}
body.ind-fx main .omr-s{font-size:12px!important}
body.ind-fx main .omr-inc{font-size:12px!important}
body.ind-fx main .omr-sh b{font-size:12px!important}
body.ind-fx main .omr-sh small{font-size:12px!important}
body.ind-fx main .omr-stm dl div{font-size:12px!important}
body.ind-fx main .omr-last{font-size:12px!important}
body.ind-fx main .omr-cap{font-size:12px!important}
body.ind-fx main .omr-bank li{font-size:12px!important}
body.ind-fx main .omr-bank li small{font-size:12px!important}
body.ind-fx main .omr-bankd{font-size:12px!important}
body.ind-fx main .ktn-zone{font-size:12px!important}
body.ind-fx main .ktn-pass{font-size:12px!important}
body.ind-fx main .ktn-bar{font-size:12px!important}
body.ind-fx main .ktn-door{font-size:12px!important}
body.ind-fx main .ktn-door b{font-size:12px!important}
body.ind-fx main .ktn-clock small{font-size:12px!important}
body.ind-fx main .ktn-tl b{font-size:12px!important}
body.ind-fx main .ktn-tl small{font-size:12px!important}
body.ind-fx main .ktn-kh small{font-size:12px!important}
body.ind-fx main .ktn-ch b{font-size:12px!important}
body.ind-fx main .ktn-ch small{font-size:12px!important}
body.ind-fx main .ktn-tkh b{font-size:12px!important}
body.ind-fx main .ktn-tkh em{font-size:12px!important}
body.ind-fx main .ktn-tk ul li{font-size:12px!important}
body.ind-fx main .ktn-tks{font-size:12px!important}
body.ind-fx main .ktn-ph em{font-size:12px!important}
body.ind-fx main .ktn-osub{font-size:12px!important}
body.ind-fx main .ktn-lines li{font-size:12px!important}
body.ind-fx main .ktn-lst{font-size:12px!important}
body.ind-fx main .ktn-tot>div{font-size:12px!important}
body.ind-fx main .ktn-it{font-size:12px!important}
body.ind-fx main .ktn-in{font-size:12px!important}
body.ind-fx main .ktn-snz{font-size:12px!important}
body.ind-fx main .ktn-dn b{font-size:12px!important}
body.ind-fx main .ktn-dn small{font-size:12px!important}
body.ind-fx main .ktn-dish em{font-size:12px!important}
body.ind-fx main .ktn-dish .ktn-snzd{font-size:12px!important}
body.ind-fx main .ktn-rec li{font-size:12px!important}
body.ind-fx main .ktn-cl-h small{font-size:12px!important}
body.ind-fx main .ktn-cl-sum>div{font-size:12px!important}
body.ind-fx main .ktn-cl-je table{font-size:12px!important}
body.ind-fx main .ktn-cl-je th{font-size:12px!important}
body.ind-fx main .ktn-cl-po li{font-size:12px!important}
body.ind-fx main .ktn-cl-po li b{font-size:12px!important}
body.ind-fx main .ktn-cl-po .ktn-poh{font-size:12px!important}
body.ind-fx main .wsd-cap{font-size:12px!important}
body.ind-fx main .wsd-cap small{font-size:12px!important}
body.ind-fx main .wsd-dh{font-size:12px!important}
body.ind-fx main .wsd-th{font-size:12px!important}
body.ind-fx main .wsd-c b{font-size:12px!important}
body.ind-fx main .wsd-c small{font-size:12px!important}
body.ind-fx main .wsd-c em{font-size:12px!important}
body.ind-fx main .wsd-c.is-me::after,body.ind-fx main .wsd-c.is-mw::after{font-size:12px!important}
body.ind-fx main .wsd-who small{font-size:12px!important}
body.ind-fx main .wsd-bk li{font-size:12px!important}
body.ind-fx main .wsd-bk em{font-size:12px!important}
body.ind-fx main .wsd-slot b,body.ind-fx main .wsd-prod b{font-size:12px!important}
body.ind-fx main .wsd-slot span{font-size:12px!important}
body.ind-fx main .wsd-slot em{font-size:12px!important}
body.ind-fx main .wsd-prod em{font-size:12px!important}
body.ind-fx main .wsd-prod small{font-size:12px!important}
body.ind-fx main .wsd-docs b{font-size:12px!important}
body.ind-fx main .wsd-docs span{font-size:12px!important}
body.ind-fx main .wsd-docs em{font-size:12px!important}
body.ind-fx main .wsd-docs small{font-size:12px!important}
body.ind-fx main .wsd-ax{font-size:12px!important}
body.ind-fx main .wsd-pt{font-size:12px!important}
body.ind-fx main .wsd-lv{font-size:12px!important}
body.ind-fx main .wsd-lg{font-size:12px!important}
body.ind-fx main .bmt-nt b{font-size:12px!important}
body.ind-fx main .bmt-nt small{font-size:12px!important}
body.ind-fx main .bmt-ops span{font-size:12px!important}
body.ind-fx main .bmt-delta{font-size:12px!important}
body.ind-fx main .bmt-mr small{font-size:12px!important}
body.ind-fx main .bmt-chip{font-size:12px!important}
body.ind-fx main .bmt-h{font-size:12px!important}
body.ind-fx main .bmt-sel small{font-size:12px!important}
body.ind-fx main .bmt-sl{font-size:12px!important}
body.ind-fx main .bmt-big em{font-size:12px!important}
body.ind-fx main .bmt-dl>div{font-size:12px!important}
body.ind-fx main .bmt-wt{font-size:12px!important}
body.ind-fx main .bmt-wcs small{font-size:12px!important}
body.ind-fx main .bmt-mcol li{font-size:12px!important}
body.ind-fx main .bmt-mcol li b{font-size:12px!important}
body.ind-fx main .fefo-cap{font-size:12px!important}
body.ind-fx main .fefo-cap small{font-size:12px!important}
body.ind-fx main .fefo-rl b{font-size:12px!important}
body.ind-fx main .fefo-rl small{font-size:12px!important}
body.ind-fx main .fefo-bid{font-size:12px!important}
body.ind-fx main .fefo-le{font-size:12px!important}
body.ind-fx main .fefo-ld{font-size:12px!important}
body.ind-fx main .fefo-nx{font-size:12px!important}
body.ind-fx main .fefo-ghost{font-size:12px!important}
body.ind-fx main .fefo-ghost b{font-size:12px!important}
body.ind-fx main .fefo-ghost small{font-size:12px!important}
body.ind-fx main .fefo-qbins:empty::before{font-size:12px!important}
body.ind-fx main .fefo-key{font-size:12px!important}
body.ind-fx main .fefo-lnl{font-size:12px!important}
body.ind-fx main .fefo-mk b{font-size:12px!important}
body.ind-fx main .fefo-ax span{font-size:12px!important}
body.ind-fx main .fefo-pkh{font-size:12px!important}
body.ind-fx main .fefo-pkh span{font-size:12px!important}
body.ind-fx main .fefo-pkl{font-size:12px!important}
body.ind-fx main .fefo-short{font-size:12px!important}
body.ind-fx main .fefo-tok{font-size:12px!important}
body.ind-fx main .fefo-cmp p{font-size:12px!important}
body.ind-fx main .fefo-cr{font-size:12px!important}
body.ind-fx main .fefo-gt small{font-size:12px!important}
body.ind-fx main .fefo-sum dt{font-size:12px!important}
body.ind-fx main .fefo-nt2 b{font-size:12px!important}
body.ind-fx main .fefo-nt2 small{font-size:12px!important}
body.ind-fx main .fefo-nq{font-size:12px!important}
body.ind-fx main .fefo-nd--lot .fefo-nq{font-size:12px!important}
body.ind-fx main .fefo-tag{font-size:12px!important}
body.ind-fx main .fefo-rt{font-size:12px!important}
body.ind-fx main .itn-cap{font-size:12px!important}
body.ind-fx main .itn-cap small{font-size:12px!important}
body.ind-fx main .itn-pgh{font-size:12px!important}
body.ind-fx main .itn-svc b,body.ind-fx main .itn-ib b{font-size:12px!important}
body.ind-fx main .itn-svc small,body.ind-fx main .itn-ib small{font-size:12px!important}
body.ind-fx main .itn-dh b{font-size:12px!important}
body.ind-fx main .itn-dh small{font-size:12px!important}
body.ind-fx main .itn-ns{font-size:12px!important}
body.ind-fx main .itn-checks li{font-size:12px!important}
body.ind-fx main .itn-checks li b{font-size:12px!important}
body.ind-fx main .itn-sl{font-size:12px!important}
body.ind-fx main .itn-sl output{font-size:12px!important}
body.ind-fx main .itn-rates{font-size:12px!important}
body.ind-fx main .itn-wv{font-size:12px!important}
body.ind-fx main .itn-wl{font-size:12px!important}
body.ind-fx main .itn-lg{font-size:12px!important}
body.ind-fx main .itn-sumd dt{font-size:12px!important}
body.ind-fx main .itn-cur li{font-size:12px!important}
body.ind-fx main .itn-depw{font-size:12px!important}
body.ind-fx main .itn-depw .dm-seg button{font-size:12px!important}
body.ind-fx main .itn-invl b,body.ind-fx main .itn-payl b{font-size:12px!important}
body.ind-fx main .itn-invl span,body.ind-fx main .itn-payl span{font-size:12px!important}
body.ind-fx main .itn-invl em,body.ind-fx main .itn-payl em{font-size:12px!important}
body.ind-fx main .itn-invl small,body.ind-fx main .itn-payl small{font-size:12px!important}
body.ind-fx main .itn-xd{font-size:12px!important}
body.ind-fx main .itn-gt{font-size:12px!important}
body.ind-fx main .itn-cashn{font-size:12px!important}
body.ind-fx main .scv-ax{font-size:12px!important}
body.ind-fx main .scv-ax--vo{font-size:12px!important}
body.ind-fx main .scv-handle b{font-size:12px!important}
body.ind-fx main .scv-h{font-size:12px!important}
body.ind-fx main .scv-evm dt{font-size:12px!important}
body.ind-fx main .scv-evm small{font-size:12px!important}
body.ind-fx main .scv-prog{font-size:12px!important}
body.ind-fx main .scv-costs li{font-size:12px!important}
body.ind-fx main .scv-ph em{font-size:12px!important}
body.ind-fx main .scv-claim>div{font-size:12px!important}
body.ind-fx main .scv-claim .scv-sub{font-size:12px!important}
body.ind-fx main .scv-vos li{font-size:12px!important}
body.ind-fx main .scv-vos b{font-size:12px!important}
body.ind-fx main .scv-tbl{font-size:12px!important}
body.ind-fx main .scv-tbl th{font-size:12px!important}
body.ind-fx main .scv-rel li{font-size:12px!important}
body.ind-fx main .scv-rel b{font-size:12px!important}
@media (max-width:640px){
body.ind-fx main .dm-kpis dt{font-size:12px!important}
body.ind-fx main .srn-vendor small,body.ind-fx main .srn-flag,body.ind-fx main .srn-q,body.ind-fx main .srn-blip,body.ind-fx main .srn-clock small,body.ind-fx main .srn-h,body.ind-fx main .srn-ops th,body.ind-fx main .srn-ops td small,body.ind-fx main .srn-pill,body.ind-fx main .srn-dt small,body.ind-fx main .srn-sw,body.ind-fx main .srn-nums small,body.ind-fx main .srn-apply,body.ind-fx main .srn-dops li,body.ind-fx main .srn-dops li b,body.ind-fx main .srn-nm b,body.ind-fx main .srn-ops table{font-size:12px!important}
body.ind-fx main .omr-nd small,body.ind-fx main .omr-li,body.ind-fx main .omr-st,body.ind-fx main .omr-ch.is-stale::after,body.ind-fx main .dm-router.is-flash .omr-ch:not(.is-off)::before,body.ind-fx main .omr-av,body.ind-fx main .omr-s,body.ind-fx main .omr-inc,body.ind-fx main .omr-sh small,body.ind-fx main .omr-stm dl div,body.ind-fx main .omr-last,body.ind-fx main .omr-cap,body.ind-fx main .omr-bank li small,body.ind-fx main .omr-bankd,body.ind-fx main .omr-stage.is-v .omr-ch .omr-nh b{font-size:12px!important}
body.ind-fx main .ktn-zone,body.ind-fx main .ktn-pass,body.ind-fx main .ktn-bar,body.ind-fx main .ktn-door,body.ind-fx main .ktn-door b,body.ind-fx main .ktn-clock small,body.ind-fx main .ktn-tl small,body.ind-fx main .ktn-kh small,body.ind-fx main .ktn-ch small,body.ind-fx main .ktn-tkh b,body.ind-fx main .ktn-tkh em,body.ind-fx main .ktn-tk ul li,body.ind-fx main .ktn-tks,body.ind-fx main .ktn-ph em,body.ind-fx main .ktn-osub,body.ind-fx main .ktn-lst,body.ind-fx main .ktn-in,body.ind-fx main .ktn-snz,body.ind-fx main .ktn-dn small,body.ind-fx main .ktn-dish .ktn-snzd,body.ind-fx main .ktn-rec li,body.ind-fx main .ktn-cl-je th,body.ind-fx main .ktn-cl-po li,body.ind-fx main .ktn-cl-po li b,body.ind-fx main .ktn-cl-po .ktn-poh,body.ind-fx main .ktn-kpis dt,body.ind-fx main .ktn-tl b{font-size:12px!important}
body.ind-fx main .wsd-cap,body.ind-fx main .wsd-cap small,body.ind-fx main .wsd-dh,body.ind-fx main .wsd-th,body.ind-fx main .wsd-c small,body.ind-fx main .wsd-c em,body.ind-fx main .wsd-c.is-me::after,body.ind-fx main .wsd-c.is-mw::after,body.ind-fx main .wsd-who small,body.ind-fx main .wsd-bk li,body.ind-fx main .wsd-bk em,body.ind-fx main .wsd-slot b,body.ind-fx main .wsd-prod b,body.ind-fx main .wsd-slot span,body.ind-fx main .wsd-prod em,body.ind-fx main .wsd-prod small,body.ind-fx main .wsd-docs b,body.ind-fx main .wsd-docs span,body.ind-fx main .wsd-docs em,body.ind-fx main .wsd-docs small,body.ind-fx main .wsd-lg{font-size:12px!important}
body.ind-fx main .bmt-nt small,body.ind-fx main .bmt-ops span,body.ind-fx main .bmt-delta,body.ind-fx main .bmt-mr small,body.ind-fx main .bmt-chip,body.ind-fx main .bmt-h,body.ind-fx main .bmt-sel small,body.ind-fx main .bmt-big em,body.ind-fx main .bmt-wcs small,body.ind-fx main .bmt-mcol li{font-size:12px!important}
body.ind-fx main .fefo-lt b{font-size:12px!important}
body.ind-fx main .fefo-lt em{font-size:12px!important}
body.ind-fx main .fefo-le{font-size:12px!important}
body.ind-fx main .fefo-cap,body.ind-fx main .fefo-cap small,body.ind-fx main .fefo-rl small,body.ind-fx main .fefo-bid,body.ind-fx main .fefo-le,body.ind-fx main .fefo-ld,body.ind-fx main .fefo-nx,body.ind-fx main .fefo-ghost,body.ind-fx main .fefo-ghost b,body.ind-fx main .fefo-ghost small,body.ind-fx main .fefo-qbins:empty::before,body.ind-fx main .fefo-key,body.ind-fx main .fefo-lnl,body.ind-fx main .fefo-mk b,body.ind-fx main .fefo-ax span,body.ind-fx main .fefo-pkh,body.ind-fx main .fefo-pkh span,body.ind-fx main .fefo-short,body.ind-fx main .fefo-tok,body.ind-fx main .fefo-cr,body.ind-fx main .fefo-sum dt,body.ind-fx main .fefo-nt2 small,body.ind-fx main .fefo-nd--lot .fefo-nq,body.ind-fx main .fefo-tag,body.ind-fx main .fefo-rt{font-size:12px!important}
body.ind-fx main .itn-wv{font-size:12px!important}
body.ind-fx main .itn-wl{font-size:12px!important}
body.ind-fx main .itn-cap,body.ind-fx main .itn-cap small,body.ind-fx main .itn-pgh,body.ind-fx main .itn-svc small,body.ind-fx main .itn-ib small,body.ind-fx main .itn-dh small,body.ind-fx main .itn-ns,body.ind-fx main .itn-checks li b,body.ind-fx main .itn-rates,body.ind-fx main .itn-wv,body.ind-fx main .itn-wl,body.ind-fx main .itn-lg,body.ind-fx main .itn-sumd dt,body.ind-fx main .itn-cur li,body.ind-fx main .itn-invl b,body.ind-fx main .itn-payl b,body.ind-fx main .itn-invl span,body.ind-fx main .itn-payl span,body.ind-fx main .itn-invl small,body.ind-fx main .itn-payl small,body.ind-fx main .itn-xd{font-size:12px!important}
body.ind-fx main .scv-ax--vo,body.ind-fx main .scv-handle b,body.ind-fx main .scv-h,body.ind-fx main .scv-evm dt,body.ind-fx main .scv-evm small,body.ind-fx main .scv-prog,body.ind-fx main .scv-costs li,body.ind-fx main .scv-ph em,body.ind-fx main .scv-claim .scv-sub,body.ind-fx main .scv-vos li,body.ind-fx main .scv-vos b,body.ind-fx main .scv-tbl,body.ind-fx main .scv-tbl th,body.ind-fx main .scv-rel li,body.ind-fx main .scv-rel b{font-size:12px!important}
}
@media (max-width:720px){
body.ind-fx main .srn-nm b{font-size:12px!important}
body.ind-fx main .srn-flag{font-size:12px!important}
body.ind-fx main .srn-q{font-size:12px!important}
body.ind-fx main .srn-clock small{font-size:12px!important}
body.ind-fx main .srn-ops table{font-size:12px!important}
body.ind-fx main .ktn-tl b{font-size:12px!important}
body.ind-fx main .ktn-tl small{font-size:12px!important}
body.ind-fx main .ktn-pass{font-size:12px!important}
body.ind-fx main .ktn-tkh b,body.ind-fx main .ktn-tk ul li{font-size:12px!important}
}
@media (max-width:420px){
body.ind-fx main .omr-stm dl div{font-size:12px!important}
}
@media (max-width:700px){
body.ind-fx main .omr-stage.is-v .omr-ch .omr-nh b{font-size:12px!important}
}
@media (max-width:1080px){
body.ind-fx main .ktn-kpis dt{font-size:12px!important}
}
/* <<< min12 */

/* review fix (22 Oct 2026): the step number lives in the timeline node, not in a label above the heading */
.ixf-node i { width: 30px; height: 30px; display: grid; place-items: center; font: 800 13px/1 var(--font-display); font-style: normal; color: var(--blue-700); font-variant-numeric: tabular-nums; }
.ixf-step.is-lit .ixf-node i, .ixf-chain:not(.is-js) .ixf-node i { color: #fff; }

/* ---------------------------------------------------------------- sample dashboard chart: review fixes (22 Oct 2026)
   - legend sits in normal flow under the chart header (was absolute, top:-30px, on top of the view toggle)
   - paired values are one stacked label above each pair (no side-by-side overlap); on phones the bars go horizontal with the value at the bar end
   - y-axis labels get room (S$1.2M, not S$1200k), x labels wrap instead of truncating */
.ind-fx .ix-chart { padding: 2px 18px 10px; }
.ind-fx .ix-view .ix-legend { position: static; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; font-size: 12.5px; line-height: 1.2; color: var(--body); }
.ind-fx .ix-legend span::before { flex: none; }
.ind-fx .ix-plot { --lab: 38px; height: 246px; margin: 28px 0 6px 60px; }
.ind-fx .ix-view--pair .ix-plot { margin-top: 48px; }
.ind-fx .ix-grid { inset: 0 0 var(--lab) 0; }
.ind-fx .ix-grid em { right: calc(100% + 10px); font-size: 12px; }
.ind-fx .ix-col { grid-template-rows: 1fr var(--lab); }
.ind-fx .ix-col small { align-self: start; padding-top: 8px; max-width: 100%; font-size: 12px; line-height: 1.25; white-space: normal; overflow: visible; text-overflow: clip;
  overflow-wrap: normal; word-break: normal; hyphens: auto; text-wrap: balance; }
.ind-fx .ix-pair { position: relative; gap: 5px; }
.ind-fx .ix-pair .ix-bar { width: min(30px, 40%); }
.ind-fx .ix-pair .ix-bar i { display: none; }
.ind-fx .ix-pv { position: absolute; left: 50%; bottom: calc(var(--hm) * 100% + 7px); display: grid; gap: 1px; transform: translateX(-50%); opacity: 0;
  transition: opacity .3s ease calc(.5s + var(--i) * 60ms); pointer-events: none; }
.ind-fx .ix-pv b { display: flex; align-items: center; gap: 5px; font: 700 12px/15px var(--font-body); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ind-fx .ix-pv b::before { content: ""; width: 8px; height: 8px; border-radius: 2px; flex: none; background: #9FB9EA; }
.ind-fx .ix-pv b.s2::before { background: var(--blue); }
.ind-fx .ix-dash.is-in .ix-pv { opacity: 1; }
.ind-fx .ix-dash .st-bar span { min-width: 0; }

@media (max-width: 640px) {
  .ind-fx .ix-dash .st-bar { height: auto; min-height: 44px; flex-wrap: wrap; gap: 6px 8px; padding: 8px 14px; white-space: normal; }
  .ind-fx .ix-dash .st-bar > i { display: none; }
  .ind-fx .ix-dash .st-bar span { margin-left: 0; overflow: visible; text-overflow: clip; white-space: normal; flex: 1 1 140px; line-height: 1.25; }
  .ind-fx .ix-dash .st-bar .ix-sample { flex: none; margin-left: auto; }
  .ind-fx .ix-chart { padding: 2px 14px 12px; }
  .ind-fx .ix-chart-head { gap: 10px; }
  /* horizontal bars: name left, bar, value at the bar end. Same markup, same animation (width instead of height) */
  .ind-fx .ix-plot, .ind-fx .ix-view--pair .ix-plot { height: auto; margin: 18px 0 0; padding-bottom: 30px; }
  .ind-fx .ix-grid { inset: 0 60px 30px 92px; }
  .ind-fx .ix-grid span { top: 0; bottom: 0; left: calc(var(--y) * 100%); right: auto; width: 0; border-top: 0; border-left: 1px dashed #E3E6EE; }
  .ind-fx .ix-grid em { top: auto; right: auto; left: 0; bottom: -26px; transform: translateX(-50%); font-size: 12px; }
  .ind-fx .ix-cols { position: relative; inset: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 0; align-items: stretch; }
  .ind-fx .ix-col { display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-rows: auto; column-gap: 8px; align-items: center; justify-items: stretch; height: auto; }
  .ind-fx .ix-col small { grid-column: 1; grid-row: 1; align-self: center; padding: 0; text-align: left; font-size: 13px; line-height: 1.25; text-wrap: wrap; }
  .ind-fx .ix-col > .ix-bar, .ind-fx .ix-col > .ix-pair { grid-column: 2; grid-row: 1; }
  .ind-fx .ix-col > .ix-bar { align-self: center; width: calc((100% - 60px) * var(--h)); height: 20px; border-radius: 3px 8px 8px 3px; transform-origin: left center; transform: scaleX(0);
    background: linear-gradient(90deg, #6FA0F5, var(--blue)); }
  .ind-fx .ix-pair { flex-direction: column; align-items: flex-start; justify-content: center; height: auto; gap: 5px; }
  .ind-fx .ix-pair .ix-bar { align-self: flex-start; width: calc((100% - 60px) * var(--h)); height: 16px; border-radius: 3px 8px 8px 3px; transform-origin: left center; transform: scaleX(0); }
  .ind-fx .ix-pair .ix-bar.s1 { background: linear-gradient(90deg, #C9D8F4, #9FB9EA); }
  .ind-fx .ix-pair .ix-bar.s2 { background: linear-gradient(90deg, #6FA0F5, var(--blue)); }
  .ind-fx .ix-bar i, .ind-fx .ix-pair .ix-bar i { display: block; left: calc(100% + 8px); bottom: auto; top: 50%; transform: translateY(-50%); font-size: 13px; line-height: 1;
    transition: opacity .3s ease calc(.9s + var(--i) * 60ms); }
  .ind-fx .ix-pv { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ind-fx .ix-pv, .ind-fx .ix-bar i { transition: none; }
}

/* ---------------------------------------------------------------- demos on phones (<= 640px): whole words, no ellipsis on names
   (22 Oct 2026 review). Segmented controls wrap instead of scrolling out of sight; store map, kitchen display, lots and the
   subcontractor table are re-laid for 390 px. */
@media (max-width: 640px) {
  .ind-fx .dm[data-demo] .dm-seg { flex-wrap: wrap; overflow: visible; max-width: 100%; width: 100%; border-radius: 22px; }
  .ind-fx .dm[data-demo] .dm-seg button { flex: 1 1 auto; justify-content: center; white-space: normal; text-align: center; line-height: 1.2; }
  /* store network */
  .ind-fx .srn-node { width: 140px; }
  .ind-fx .srn-node--wh { width: 154px; }
  .ind-fx .srn-nm b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: normal; word-break: normal; hyphens: auto; }
  .ind-fx .srn-q { grid-column: 1 / -1; white-space: normal; }
  .ind-fx .srn-dops li span:nth-child(2) { white-space: normal; overflow: visible; text-overflow: clip; }
  /* kitchen display: the three station columns become one list */
  .ind-fx .ktn-cols { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ind-fx .ktn-tix { max-height: none; overflow: visible; }
  .ind-fx .ktn-tkh b, .ind-fx .ktn-tk ul li, .ind-fx .ktn-ch small, .ind-fx .ktn-lines b, .ind-fx .ktn-dn b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: normal; word-break: normal; }
  /* lots and expiry */
  .ind-fx .fefo-bin { height: 92px; }
  .ind-fx .fefo-lot { padding-top: 14px; }
  .ind-fx .fefo-bin:has(.fefo-lot) .fefo-bid { visibility: hidden; }
  .ind-fx .fefo-nt2 b, .ind-fx .fefo-nt2 small { white-space: normal; overflow: visible; text-overflow: clip; }
  /* s-curve: the subcontractor table becomes stacked rows (the other columns stay readable at 390) */
  .ind-fx .scv-ph { flex-wrap: wrap; row-gap: 2px; }
  .ind-fx .scv-ph em { white-space: normal; }
  .ind-fx .scv-tbl:not(.scv-ledger), .ind-fx .scv-tbl:not(.scv-ledger) tbody { display: block; }
  .ind-fx .scv-tbl:not(.scv-ledger) thead { display: none; }
  .ind-fx .scv-tbl:not(.scv-ledger) tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
  .ind-fx .scv-tbl:not(.scv-ledger) td { display: block; padding: 0; border: 0; text-align: left; font-size: 13px !important; white-space: nowrap; }
  .ind-fx .scv-tbl:not(.scv-ledger) td:first-child { grid-column: 1 / -1; font-size: 13.5px !important; white-space: normal; }
  .ind-fx .scv-tbl:not(.scv-ledger) td:nth-child(n+2)::before { display: block; font-size: 12px !important; font-weight: 600; color: var(--body); }
  .ind-fx .scv-tbl:not(.scv-ledger) td:nth-child(2)::before { content: "Certified"; }
  .ind-fx .scv-tbl:not(.scv-ledger) td:nth-child(3)::before { content: "Retention"; }
  .ind-fx .scv-tbl:not(.scv-ledger) td:nth-child(4)::before { content: "This month"; }
  .ind-fx .scv-tbl:not(.scv-ledger) .scv-tot { border-bottom: 0; }
}