/* VAVEhub · worked case study: the VH-3600 classroom projector (case-study.html) */
.cs-page{max-width:1240px;margin:0 auto;padding:5.6rem 1.2rem 3rem}
.cs-page:focus{outline:none}
.cs-hero{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:2.4rem;align-items:start;margin-bottom:1.6rem}
.cs-kicker,.cs-sec-k{font:700 .7rem var(--font-m);letter-spacing:.16em;text-transform:uppercase;color:var(--acc1);margin:0 0 .6rem}
.cs-hero h1{font:800 clamp(1.8rem,3.6vw,2.7rem)/1.12 var(--font-d);margin:0 0 .9rem;letter-spacing:-.01em}
.cs-lede{font-size:1.04rem;line-height:1.7;color:var(--muted);margin:0 0 .8rem;max-width:68ch}
.cs-note{font-size:.84rem;line-height:1.6;color:var(--muted);margin:0;padding:.7rem .9rem;border-left:3px solid var(--acc3);background:var(--card);border-radius:0 10px 10px 0;max-width:68ch}
.cs-spec{border:1px solid var(--line);border-radius:18px;background:var(--card);padding:1.1rem 1.2rem}
.cs-spec-k{font:700 .7rem var(--font-m);letter-spacing:.14em;text-transform:uppercase;color:var(--acc3);margin:0 0 .6rem}
.cs-spec dl{margin:0;display:grid;gap:0}
.cs-spec dl div{display:flex;justify-content:space-between;gap:1rem;padding:.42rem 0;border-top:1px solid var(--line-soft);font-size:.86rem}
.cs-spec dl div:first-child{border-top:0}
.cs-spec dt{color:var(--muted)}
.cs-spec dd{margin:0;color:var(--txt);font-weight:600;text-align:right}

.cs-chapters{position:sticky;top:60px;z-index:20;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:.55rem 0;margin:0 0 1.6rem}
.cs-chapters ol{list-style:none;margin:0;padding:0;display:flex;gap:.4rem;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
.cs-chapters a,.cs-chapters .is-soon{display:inline-flex;align-items:center;gap:.4rem;min-height:38px;white-space:nowrap;padding:.3rem .75rem .3rem .35rem;border:1px solid var(--line);border-radius:99px;background:var(--card);font:600 .84rem var(--font-b);color:var(--txt)}
.cs-chapters a:hover{border-color:var(--acc1)}
.cs-chapters span{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 .35rem;border-radius:99px;background:var(--acc2);color:#fff;font:700 .72rem var(--font-m)}
.cs-chapters .is-soon{color:var(--muted);border-style:dashed}
.cs-chapters .is-soon span{background:var(--card-hi);color:var(--muted)}

.cs-sec{margin:0 0 3rem;scroll-margin-top:120px}
.cs-sec h2{font:800 clamp(1.45rem,2.6vw,1.95rem)/1.2 var(--font-d);margin:0 0 .6rem}
.cs-sec-lede{max-width:78ch;color:var(--muted);line-height:1.7;margin:0 0 1.2rem}
.cs-soon{padding:1.4rem 1.5rem;border:1px dashed var(--line);border-radius:18px;background:var(--card)}
.cs-soon .cs-sec-lede{margin:0}

/* ── the 3D viewer ── */
.pj{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--bg2)}
.pj-tools{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;padding:.7rem .8rem;border-bottom:1px solid var(--line);background:var(--card)}
.pj-seg{display:inline-flex;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.pj-seg button,.pj-btn{min-height:40px;padding:.45rem .9rem;border:0;background:transparent;color:var(--muted);font:600 .85rem var(--font-b);cursor:pointer}
.pj-seg button+button{border-left:1px solid var(--line)}
.pj-seg button[aria-pressed="true"]{background:var(--acc2);color:#fff}
.pj-btn{border:1px solid var(--line);border-radius:12px;display:inline-flex;align-items:center;gap:.45rem}
.pj-btn:hover,.pj-seg button:hover{color:var(--txt)}
.pj-btn[aria-pressed="true"]{border-color:var(--acc1);color:var(--txt);background:color-mix(in srgb,var(--acc1) 14%,transparent)}
.pj-btn-light i{width:12px;height:12px;border-radius:50%;background:conic-gradient(#ff4a4a,#ffd84a,#22e07a,#3d7bff,#ff4a4a);box-shadow:0 0 10px rgba(255,216,74,.6)}
.pj-sl{display:inline-flex;align-items:center;gap:.5rem;font:600 .78rem var(--font-b);color:var(--muted)}
.pj-sl input{width:150px;accent-color:var(--acc1)}
.pj-body{display:grid;grid-template-columns:minmax(0,1fr) 300px}
.pj-stage{position:relative;height:640px;overflow:hidden;background:radial-gradient(80% 70% at 50% 40%,#16203a 0%,#0a0f1d 60%,#060912 100%)}
html[data-theme="light"] .pj-stage{background:radial-gradient(80% 70% at 50% 40%,#f7f9fd 0%,#e4e9f2 65%,#d6dce7 100%)}
.pj-canvas{position:absolute;inset:0}
.pj-canvas canvas{display:block;width:100%!important;height:100%!important;touch-action:none}
.pj-balloons{position:absolute;inset:0;pointer-events:none}
.pj-leaders{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pj-leaders line{stroke:rgba(140,180,255,.75);stroke-width:1.2}
.pj-leaders circle{fill:#8fb4ff}
html[data-theme="light"] .pj-leaders line{stroke:rgba(29,78,216,.6)}
html[data-theme="light"] .pj-leaders circle{fill:#1d4ed8}
.pj-balloon{position:absolute;left:0;top:0;margin:-12px 0 0 -12px;transition:opacity .2s;display:flex;align-items:center;gap:.3rem;padding:0;border:0;background:none;cursor:pointer;opacity:0;transition:opacity .2s}
.pj-balloon span{display:grid;place-items:center;min-width:24px;height:24px;padding:0 .3rem;border-radius:99px;background:#2e6fe8;color:#fff;font:700 .7rem var(--font-m);box-shadow:0 2px 8px rgba(0,0,0,.35),0 0 0 2px rgba(255,255,255,.85)}
.pj-balloon em{display:none;max-width:150px;overflow:hidden;text-overflow:ellipsis;font:600 .72rem var(--font-b);font-style:normal;color:#fff;background:rgba(10,15,29,.82);padding:.15rem .45rem;border-radius:6px;white-space:nowrap}
.pj-balloons.is-named .pj-balloon em{display:inline}
html[data-theme="light"] .pj-balloon em{background:rgba(255,255,255,.92);color:#131c30;box-shadow:0 1px 4px rgba(20,30,60,.2)}
.pj-balloon:hover span,.pj-balloon:focus-visible span{background:#ffb020;color:#1a1205}
.pj-tip{position:absolute;left:0;top:0;pointer-events:none;padding:.3rem .55rem;border-radius:8px;background:rgba(10,15,29,.9);color:#fff;font:600 .78rem var(--font-b);white-space:nowrap;z-index:3}
.pj-card{position:absolute;left:14px;bottom:14px;width:min(330px,calc(100% - 28px));padding:1rem 1.1rem;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(10,15,29,.88);backdrop-filter:blur(8px);color:#e9eefb;z-index:4;box-shadow:0 14px 40px rgba(0,0,0,.35)}
html[data-theme="light"] .pj-card{background:rgba(255,255,255,.95);color:#131c30;border-color:rgba(15,23,42,.12)}
.pj-card h3{font:700 1.05rem var(--font-d);margin:.15rem 0 .6rem}
.pj-card-k{font:700 .66rem var(--font-m);letter-spacing:.12em;text-transform:uppercase;color:#7fb0ff;margin:0}
html[data-theme="light"] .pj-card-k{color:var(--acc1)}
.pj-card dl{margin:0;display:grid;gap:.35rem}
.pj-card dl div{display:grid;grid-template-columns:110px 1fr;gap:.6rem;font-size:.82rem}
.pj-card dt{opacity:.7}
.pj-card dd{margin:0}
.pj-card-x{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;border:0;background:transparent;color:inherit;opacity:.7;cursor:pointer}
.pj-hint{position:absolute;right:14px;bottom:10px;margin:0;font:500 .74rem var(--font-b);color:rgba(220,228,245,.6);pointer-events:none}
html[data-theme="light"] .pj-hint{color:rgba(30,40,60,.55)}
.pj-fallback{display:none}
.pj.pj-nogl .pj-fallback{display:block;position:absolute;inset:auto 1.4rem 45%;text-align:center;color:#cfd8ea}
.pj.pj-nogl .pj-tools,.pj.pj-nogl .pj-hint{display:none}
.pj-side{border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0;height:640px;background:var(--card)}
.pj-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.pj-tab{min-height:44px;border:0;background:transparent;color:var(--muted);font:600 .86rem var(--font-b);cursor:pointer;border-bottom:2px solid transparent}
.pj-tab[aria-selected="true"]{color:var(--txt);border-bottom-color:var(--acc1)}
.pj-list{list-style:none;margin:0;padding:.4rem .5rem 1rem;overflow:auto;flex:1}
.pj-grp>p{font:700 .66rem var(--font-m);letter-spacing:.12em;text-transform:uppercase;color:var(--acc3);margin:.8rem .4rem .3rem}
.pj-grp ul{list-style:none;margin:0;padding:0}
.pj-part{display:flex;align-items:center;gap:.55rem;width:100%;min-height:34px;padding:.3rem .45rem;border:0;border-radius:8px;background:transparent;color:var(--txt);font:500 .84rem var(--font-b);text-align:left;cursor:pointer}
.pj-part span{flex:none;display:grid;place-items:center;width:24px;height:22px;border-radius:6px;background:var(--card-hi);color:var(--muted);font:700 .68rem var(--font-m)}
.pj-part:hover{background:var(--card-hi)}
.pj-part.is-on{background:color-mix(in srgb,var(--acc1) 16%,transparent)}
.pj-part.is-on span{background:#2e6fe8;color:#fff}
.pj-howto{padding:.8rem .8rem 1rem;overflow:auto;flex:1}
.pj-howto>p{font-size:.84rem;color:var(--muted);margin:0 0 .6rem}
.pj-steps{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.pj-step{display:grid;grid-template-columns:28px 1fr;column-gap:.6rem;width:100%;padding:.6rem .65rem;border:1px solid var(--line);border-radius:12px;background:var(--bg2);color:var(--txt);text-align:left;cursor:pointer}
.pj-step span{grid-row:1/span 2;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--card-hi);font:700 .74rem var(--font-m)}
.pj-step b{font:700 .88rem var(--font-d)}
.pj-step em{font-style:normal;font-size:.78rem;line-height:1.45;color:var(--muted);display:none;margin-top:.2rem}
.pj-step.is-on{border-color:var(--acc1)}
.pj-step.is-on span{background:#2e6fe8;color:#fff}
.pj-step.is-on em{display:block}

/* ── bill of materials ── */
.cs-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--line);margin:0 0 1.2rem}
.cs-kpis div{background:var(--bg2);padding:.9rem 1rem}
.cs-kpis b{display:block;font:800 1.2rem var(--font-d);color:var(--acc1)}
.cs-kpis span{font-size:.78rem;color:var(--muted);line-height:1.4}
.cs-two{display:grid;grid-template-columns:1.15fr 1fr;gap:1.2rem;margin:0 0 1.2rem}
.cs-panel{border:1px solid var(--line);border-radius:16px;background:var(--card);padding:1.1rem 1.2rem}
.cs-panel h3{font:700 .72rem var(--font-m);letter-spacing:.14em;text-transform:uppercase;color:var(--acc3);margin:0 0 .5rem}
.cs-small{font-size:.8rem;line-height:1.55;color:var(--muted);margin:0 0 .8rem}
.cs-pareto{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.cs-pareto li{display:grid;grid-template-columns:170px 1fr 120px;gap:.7rem;align-items:center;font-size:.82rem}
.par-name{color:var(--txt);font-weight:600}
.par-bar{height:12px;border-radius:99px;background:var(--card-hi);overflow:hidden}
.par-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#2e6fe8,#5aa2ff)}
.cs-pareto li:nth-child(n+5) .par-bar i{background:linear-gradient(90deg,#6b7a96,#8d9ab3)}
.par-val{font:700 .82rem var(--font-m);color:var(--txt)}
.par-val small{display:block;font:500 .68rem var(--font-b);color:var(--muted)}
.cs-list{margin:0 0 1rem 1.1rem;padding:0;display:grid;gap:.45rem;font-size:.84rem;line-height:1.55;color:var(--muted)}
.cs-list b{color:var(--txt)}
.cs-dl{font-size:.88rem;padding:.75rem 1.2rem}
.cs-price{margin:0 0 1.2rem}
.pr-bar{display:flex;height:46px;border-radius:12px;overflow:hidden;margin:.4rem 0 .9rem;gap:2px}
.pr-bar i{display:flex;align-items:center;justify-content:center;min-width:0;color:#fff;font:700 .82rem var(--font-m)}
.pr-bar i span{white-space:nowrap;overflow:hidden}
.pr-parts{background:#2e6fe8}.pr-conv{background:#5aa2ff}.pr-maker{background:#d9a44a}.pr-chan{background:#8b6fd6}.pr-vat{background:#6b7a96}
.pr-key{list-style:none;margin:0 0 .6rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;font-size:.84rem}
.pr-key li{display:flex;align-items:center;gap:.4rem;color:var(--txt)}
.pr-key li i{width:12px;height:12px;border-radius:3px}
.pr-key li span{color:var(--muted)}
.cs-tablewrap{overflow:auto;border:1px solid var(--line);border-radius:16px;max-height:720px}
.cs-bom{width:100%;border-collapse:collapse;font-size:.82rem;min-width:860px}
.cs-bom caption{text-align:left;padding:.8rem 1rem;font:700 .72rem var(--font-m);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cs-bom thead th{position:sticky;top:0;z-index:1;background:var(--bg2);text-align:left;font:700 .7rem var(--font-m);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:.6rem .7rem;border-bottom:1px solid var(--line)}
.cs-bom td,.cs-bom tbody th{padding:.45rem .7rem;border-bottom:1px solid var(--line-soft);vertical-align:top;text-align:left;font-weight:500;color:var(--txt)}
.cs-bom .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.cs-bom thead th:nth-child(4),.cs-bom thead th:nth-child(6),.cs-bom thead th:nth-child(7),.cs-bom thead th:first-child{text-align:right}
.cs-bom .fn{color:var(--acc1);font-weight:600;white-space:nowrap}
.cs-bom .mat{color:var(--muted)}
.bom-grp th,.bom-grp td{background:var(--card-hi);font:700 .84rem var(--font-d)!important;color:var(--txt);padding-top:.6rem!important}
.bom-grp small{margin-left:.7rem;font:500 .76rem var(--font-b);color:var(--muted)}
.cs-bom tfoot th,.cs-bom tfoot td{padding:.5rem .7rem;text-align:right;border-top:1px solid var(--line-soft);font-weight:500;color:var(--muted)}
.cs-bom tfoot .bom-sum th,.cs-bom tfoot .bom-sum td{color:var(--txt);font-weight:700}
.cs-bom tfoot .bom-big th,.cs-bom tfoot .bom-big td{font-size:.95rem;color:var(--acc1)}
.cs-sources{margin-top:1rem;border:1px solid var(--line);border-radius:14px;background:var(--card);padding:.8rem 1rem}
.cs-sources summary{cursor:pointer;font:700 .9rem var(--font-d)}
.cs-sources ul{margin:.7rem 0 .6rem 1.1rem;padding:0;display:grid;gap:.3rem;font-size:.82rem}
.cs-sources a{color:var(--acc1);text-decoration:underline;text-underline-offset:2px}

@media (max-width:1000px){
  .cs-hero{grid-template-columns:1fr;gap:1.2rem}
  .pj-body{grid-template-columns:1fr}
  .pj-stage{height:440px}
  .pj-side{border-left:0;border-top:1px solid var(--line);height:auto;max-height:420px}
  .cs-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-kpis div:last-child{grid-column:1/-1}
  .cs-two{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cs-page{padding-top:4.8rem}
  .pj-stage{height:380px}
  .pj-sl{display:none}
  .pj-tools{gap:.4rem}
  .pj-btn,.pj-seg button{padding:.4rem .65rem;font-size:.8rem}
  .cs-pareto li{grid-template-columns:1fr 90px;row-gap:.2rem}
  .par-bar{grid-column:1/-1;grid-row:2}
  .pj-hint{display:none}
  .cs-chapters{position:static}
  .cs-chapters ol{flex-wrap:nowrap;overflow-x:auto}
  .cs-chapters a,.cs-chapters .is-soon{white-space:nowrap}
  .pj-balloon span{min-width:21px;height:21px;font-size:.64rem}
}

/* ── the six phases ── */
.st-phase{padding-top:.4rem;border-top:1px solid var(--line)}
.st-n{display:inline-grid;place-items:center;min-width:26px;height:26px;margin-right:.55rem;border-radius:99px;background:var(--acc2);color:#fff;font:700 .74rem var(--font-m);vertical-align:middle;letter-spacing:0}
.st-phase .cs-panel,.st-learnt .cs-panel{margin:0 0 1.1rem}
.st-brief{margin:0;display:grid;gap:0}
.st-brief div{display:grid;grid-template-columns:90px 1fr;gap:.8rem;padding:.5rem 0;border-top:1px solid var(--line-soft);font-size:.88rem;line-height:1.5}
.st-brief div:first-child{border-top:0}
.st-brief dt{color:var(--muted);font-weight:600}
.st-brief dd{margin:0;color:var(--txt)}
.kano-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}
.kano-grid>div{border:1px solid var(--line);border-radius:12px;padding:.8rem .9rem;background:var(--bg2)}
.kano-grid b{font:700 .9rem var(--font-d)}
.kano-grid p{margin:.35rem 0;font-size:.84rem;line-height:1.5;color:var(--txt)}
.kano-grid small{font-size:.76rem;color:var(--muted)}
.kano-grid>div:nth-child(1){border-top:3px solid #ef4444}.kano-grid>div:nth-child(2){border-top:3px solid #2e6fe8}
.kano-grid>div:nth-child(3){border-top:3px solid #22c55e}.kano-grid>div:nth-child(4){border-top:3px solid #94a3b8}
.cs-tbl{width:100%;border-collapse:collapse;font-size:.84rem}
.cs-tbl caption{text-align:left;padding:.7rem .9rem;font:700 .7rem var(--font-m);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cs-tbl th,.cs-tbl td{padding:.55rem .75rem;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top;font-weight:500;color:var(--txt)}
.cs-tbl thead th{font:700 .68rem var(--font-m);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);background:var(--bg2);border-bottom:1px solid var(--line)}
.cs-tbl thead th small{display:block;font:700 .72rem var(--font-m);color:var(--acc3);letter-spacing:0;text-transform:none}
.cs-tbl .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.cs-tbl tfoot th,.cs-tbl tfoot td{font-weight:700;border-top:1px solid var(--line);border-bottom:0}
.cs-tbl small{display:block;color:var(--muted);font-size:.76rem;margin-top:.15rem}
.st-life .cs-tbl th{font-weight:500}
.st-life .cs-tbl td{font-weight:700}
.sr{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cs-tablewrap,.st-wscroll{position:relative}
.st-tw{max-height:none;margin:0 0 1.1rem}
.st-fn{min-width:880px}
.st-fn .why{color:var(--muted);font-size:.8rem;line-height:1.45;min-width:260px}
.vi-bar{display:inline-block;width:110px;height:9px;border-radius:99px;background:var(--card-hi);overflow:hidden;vertical-align:middle;margin-right:.5rem}
.vi-bar i{display:block;height:100%;border-radius:99px;background:#22c55e}
.vi-warm .vi-bar i{background:#f5b942}.vi-hot .vi-bar i{background:#f0703a}
.vi-n{font:700 .82rem var(--font-m)}
.vi-hot .vi-n{color:#f0703a}.vi-warm .vi-n{color:#d99a1a}
.st-3d{min-height:32px;padding:.2rem .6rem;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--acc1);font:700 .74rem var(--font-m);cursor:pointer}
.st-3d:hover{border-color:var(--acc1)}
.fx-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.fx-scroll svg{display:block;width:100%;min-width:900px;height:auto}
.fx rect{fill:var(--bg2);stroke:var(--line);stroke-width:1.5}
.fx text{fill:var(--txt);font:600 12.5px var(--font-b);text-anchor:middle}
.fx .fx-sub{fill:var(--muted);font:500 10.5px var(--font-m)}
.fx.vi-ok rect{stroke:#22c55e;fill:color-mix(in srgb,#22c55e 10%,var(--bg2))}
.fx.vi-warm rect{stroke:#f5b942;fill:color-mix(in srgb,#f5b942 12%,var(--bg2))}
.fx.vi-hot rect{stroke:#f0703a;fill:color-mix(in srgb,#f0703a 14%,var(--bg2));stroke-width:2.2}
.fx.fx-basic rect{stroke:#2e6fe8;stroke-width:2.6;fill:color-mix(in srgb,#2e6fe8 16%,var(--bg2))}
.fx.fx-out rect{stroke-dasharray:5 4;fill:transparent}
.fx[data-parts]{cursor:pointer}
.fx[data-parts]:hover rect,.fx[data-parts]:focus rect{stroke:#2e6fe8;stroke-width:2.6}
.fx[data-parts]:focus{outline:none}
.fx-link{stroke:var(--muted);stroke-width:1.6}
.fx-dash{stroke-dasharray:5 4}
.fx-scope{stroke:var(--acc3);stroke-width:1.6;stroke-dasharray:7 5}
.fx-lbl{fill:var(--muted);font:600 11px var(--font-m);text-anchor:middle;letter-spacing:.06em;text-transform:uppercase}
.fx-left{text-anchor:start}
.fx-axis line{stroke:var(--acc1);stroke-width:1.6}
.fx-axis path{fill:var(--acc1)}
.fx-axis text{fill:var(--acc1);font:700 12px var(--font-m)}
.fx-key{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin:.6rem 0 0;font-size:.78rem;color:var(--muted)}
.fx-key span{display:inline-flex;align-items:center;gap:.4rem}
.fx-key span::before{content:"";width:12px;height:12px;border-radius:3px;border:2px solid}
.fx-key .vi-ok::before{border-color:#22c55e}.fx-key .vi-warm::before{border-color:#f5b942}.fx-key .vi-hot::before{border-color:#f0703a}
.fx-key .fx-hint::before{display:none}
.st-ideas{min-width:860px}
.st-ideas .fn{color:var(--acc1);font-weight:600;white-space:nowrap}
.st-ideas tr.is-out td{color:var(--muted)}
.st-ideas tr.is-out td:nth-child(2){text-decoration:line-through;text-decoration-color:var(--muted)}
.st-eval{min-width:900px}
.st-eval tbody th{font-weight:500;min-width:280px}
.st-eval tbody th b{color:var(--acc1);margin-right:.3rem}
.st-eval td.dec{white-space:nowrap}
.st-eval tr.w1 td:last-child{color:#22c55e;font-weight:700}
.st-eval tr.w2 td:last-child{color:#d99a1a;font-weight:700}
.st-eval tr.w0 td:last-child{color:var(--muted)}
.dot{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;font:700 .72rem var(--font-m);color:#fff}
.d1{background:#ef4444}.d2{background:#f0703a}.d3{background:#d99a1a}.d4{background:#5aa2ff}.d5{background:#22c55e}
.st-cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:0 0 1.1rem}
.st-case{border:1px solid var(--line);border-radius:16px;background:var(--card);padding:1rem 1.1rem}
.st-case-k{font:700 .68rem var(--font-m);letter-spacing:.12em;text-transform:uppercase;color:var(--acc3);margin:0}
.st-case h4{font:700 1rem var(--font-d);margin:.3rem 0 .7rem}
.st-case p{font-size:.83rem;line-height:1.55;color:var(--muted);margin:.5rem 0 0}
.st-case p b{color:var(--txt)}
.st-nums{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--line)}
.st-nums div{background:var(--bg2);padding:.5rem .6rem}
.st-nums dt{font-size:.7rem;color:var(--muted)}
.st-nums dd{margin:0;font:800 1rem var(--font-d);color:var(--acc1)}
.st-waves{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:0 0 1.1rem;align-items:start}
.st-wscroll{overflow-x:auto;border:1px solid var(--line);border-radius:14px}
.st-wave{min-width:520px}
.st-wave tbody th,.st-wave tfoot th{min-width:220px}
.st-wave tbody th{font-weight:500}
.st-wave tbody th b{color:var(--acc1);margin-right:.3rem}
.st-tco{min-width:640px}
.st-kpis{grid-template-columns:repeat(5,minmax(0,1fr))}
.st-asks{margin:0 0 1.2rem 1.2rem;padding:0;display:grid;gap:.5rem;font-size:.92rem;line-height:1.6;color:var(--muted)}
.st-asks b{color:var(--txt)}
.st-gantt{font-size:.82rem;overflow-x:auto}
.g-row{display:grid;grid-template-columns:minmax(220px,1.4fr) 130px minmax(300px,2fr);gap:.8rem;align-items:center;padding:.35rem 0;border-top:1px solid var(--line-soft);min-width:680px}
.g-head{border-top:0;font:700 .68rem var(--font-m);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.g-row>span:nth-child(2){color:var(--muted)}
.g-weeks,.g-track{position:relative;height:20px}
.g-weeks i{position:absolute;top:0;font-style:normal;transform:translateX(-50%)}
.g-weeks i:first-child{transform:none}
.g-track{background:repeating-linear-gradient(90deg,transparent 0 calc(100%/6.5 - 1px),var(--line-soft) calc(100%/6.5 - 1px) calc(100%/6.5))}
.g-track b{position:absolute;top:3px;height:14px;border-radius:99px;background:linear-gradient(90deg,#2e6fe8,#5aa2ff)}
.st-funnel{list-style:none;margin:.3rem 0 .8rem;padding:0;display:grid;gap:.4rem;justify-items:center}
.st-funnel li{width:var(--w);min-width:220px;padding:.55rem .8rem;border-radius:10px;background:linear-gradient(90deg,#2e6fe8,#5aa2ff);color:#fff;text-align:center;font-size:.86rem}
.st-funnel li b{font:800 1.05rem var(--font-d);margin-right:.3rem}
.st-gate{margin:.2rem 0 0;padding:.8rem 1rem;border:1px dashed var(--acc3);border-radius:12px;background:color-mix(in srgb,var(--acc3) 6%,transparent);font-size:.84rem}
.st-gate b{font:700 .72rem var(--font-m);letter-spacing:.1em;text-transform:uppercase;color:var(--acc3)}
.st-gate ul{list-style:none;margin:.45rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;color:var(--txt)}
.st-gate li::before{content:"✓ ";color:#22c55e;font-weight:700}
.learnt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}
.learnt-grid>div{border:1px solid var(--line);border-radius:16px;background:var(--card);padding:1rem 1.1rem;display:flex;flex-direction:column}
.learnt-grid b{font:700 1rem var(--font-d)}
.learnt-grid p{font-size:.86rem;line-height:1.55;color:var(--muted);margin:.4rem 0 .7rem;flex:1}
.learnt-grid a{font:600 .8rem var(--font-b);color:var(--acc1);text-decoration:underline;text-underline-offset:2px}
@media (max-width:1000px){
  .kano-grid{grid-template-columns:1fr 1fr}
  .st-cases{grid-template-columns:1fr}
  .st-waves{grid-template-columns:1fr}
  .st-kpis{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .kano-grid{grid-template-columns:1fr}
  .st-brief div{grid-template-columns:1fr;gap:.1rem}
}

/* bill of materials by report line */
.cs-bom{min-width:900px}
.cs-bom th small,.cs-bom td small{display:block;font:500 .74rem var(--font-b);color:var(--muted);margin-top:.1rem}
.cs-bom .bom-line th,.cs-bom .bom-line td{background:color-mix(in srgb,var(--card-hi) 55%,transparent);font-weight:600}
.cs-bom .bom-line.is-added th,.cs-bom .bom-line.is-added td{background:color-mix(in srgb,var(--acc3) 10%,transparent)}
.cs-bom .bom-kid td{color:var(--muted);font-size:.8rem}
.cs-bom .bom-kid td:nth-child(2){color:var(--txt);padding-left:1.4rem}
.cs-bom thead th:nth-child(4),.cs-bom thead th:nth-child(5),.cs-bom thead th:nth-child(6),.cs-bom thead th:first-child{text-align:right}
.cb-gate th,.cb-gate td{font-weight:700!important;color:var(--acc1)!important;border-top:1px solid var(--line)}
#pjChain .cs-tbl td:nth-child(2){color:var(--muted)}
.par-rest .par-bar i{background:linear-gradient(90deg,#6b7a96,#8d9ab3)}
@media (min-width:641px){.cs-pareto li{grid-template-columns:230px 1fr 120px}}
.pr-ship{background:#7cc4ff}

/* ── study rebuilt on the should-cost report ── */
.st-jp{list-style:none;margin:0 0 1.2rem;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.st-jp li{display:flex;align-items:center;gap:.4rem;padding:.35rem .7rem;border:1px solid var(--line);border-radius:999px;font-size:.8rem;color:var(--muted);background:var(--bg2)}
.st-jp li b{font:700 .68rem var(--font-m);color:var(--acc1);text-transform:uppercase;letter-spacing:.06em}
.st-jp li.on{border-color:var(--acc1);color:var(--txt);background:color-mix(in srgb,var(--acc1) 10%,var(--bg2))}
.st-proc{min-width:820px}
.st-proc td:nth-child(2){color:var(--muted);font-size:.82rem}
.cs-tbl tr.st-flag th,.cs-tbl tr.st-flag td{color:#d97706}
.cs-tbl tr.st-base th,.cs-tbl tr.st-base td{font-weight:700;background:color-mix(in srgb,var(--acc1) 8%,transparent)}
.st-checks{border-left:3px solid #f5b942}
.st-checks ol.cs-list{list-style:decimal;padding-left:1.2rem}
.st-fn th small,.st-ideas td small,.st-eval th small{display:block;font-weight:400;font-size:.76rem;color:var(--muted);line-height:1.45;margin-top:.2rem}
.st-ideas{min-width:980px}
.st-ideas td:nth-child(2){min-width:300px}
.st-ideas .st-parts{white-space:nowrap;font:500 .8rem var(--font-m)}
.st-ideas .st-parts .st-3d{margin-left:.3rem}
.st-eval tr.w-go td:last-child{color:#22c55e;font-weight:700}
.st-eval tr.w-check td:last-child{color:#d99a1a;font-weight:700}
.st-eval tr.w-hold td:last-child{color:var(--muted)}
.st-case-k .st-3d{margin-left:.4rem;vertical-align:middle}
.st-bridge svg{width:100%;height:auto;display:block}
.st-bridge .wf-grid{stroke:var(--line);stroke-width:1}
.st-bridge .wf-ax{font:500 11px var(--font-m);fill:var(--muted);text-anchor:end}
.st-bridge .wf-target{stroke:#22c55e;stroke-width:1.5;stroke-dasharray:6 4}
.st-bridge .wf-tl{font:600 11px var(--font-b);fill:#22c55e;text-anchor:end}
.st-bridge .wf-total rect{fill:#2e6fe8}
.st-bridge .wf-end rect{fill:#22c55e}
.st-bridge .wf-sub rect{fill:color-mix(in srgb,#2e6fe8 55%,var(--bg2))}
.st-bridge .wf-step rect{fill:#f0703a}
.st-bridge .wf-v{font:700 12px var(--font-m);fill:var(--txt);text-anchor:middle}
.st-bridge .wf-n{font:500 11px var(--font-b);fill:var(--muted);text-anchor:middle}
@media (max-width:720px){.st-bridge{overflow-x:auto}.st-bridge svg{min-width:640px}}
.cs-two>*{min-width:0}
.st-stack{display:grid;gap:1.2rem;margin:0 0 1.2rem}.st-stack>*{min-width:0}

/* case study videos */
.cs-vid{margin:0 0 1.6rem;max-width:880px}
.cs-vid video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:16px;border:1px solid var(--line);background:#0b1220}
.cs-vid figcaption{margin-top:.6rem;font-size:.86rem;line-height:1.55;color:var(--muted)}
.cs-vid figcaption b{color:var(--txt)}
.cs-vid details{margin-top:.5rem;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.cs-vid summary{cursor:pointer;padding:.6rem .9rem;font-size:.86rem;font-weight:600;color:var(--txt);min-height:40px;display:flex;align-items:center}
.cs-vid details[open] summary{border-bottom:1px solid var(--line)}
.cs-vid details p{margin:.6rem .9rem;font-size:.86rem;line-height:1.6;color:var(--muted)}

/* function analysis in depth */
.fa-steps{list-style:none;margin:0 0 1.4rem;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.fa-steps a{display:flex;align-items:center;gap:.45rem;padding:.4rem .75rem;border:1px solid var(--line);border-radius:999px;background:var(--bg2);font-size:.82rem;color:var(--txt);text-decoration:none}
.fa-steps a:hover{border-color:var(--acc1)}
.fa-steps b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--acc2);color:#fff;font:700 .72rem var(--font-m)}
.fa-step{margin:0 0 2.2rem;padding-top:.4rem}
.fa-step>h3{display:flex;align-items:center;gap:.6rem;font:700 1.3rem var(--font-d);margin:0 0 .6rem}
.fa-step>h3 span{font:700 .8rem var(--font-m);color:var(--acc1);padding:.2rem .5rem;border:1px solid var(--acc1);border-radius:8px}
.fa-step h4,.fa-sub{font:700 1rem var(--font-d);margin:0 0 .6rem}
.fa-sub{margin-top:1.2rem}
.fa-why{margin:0 0 1rem;padding:.7rem 1rem;border-left:3px solid var(--acc1);background:color-mix(in srgb,var(--acc1) 7%,transparent);border-radius:0 10px 10px 0;font-size:.9rem;line-height:1.6}
.fa-miss{margin:.6rem 0 0;padding:.6rem 1rem;border-left:3px solid #f5b942;background:color-mix(in srgb,#f5b942 8%,transparent);border-radius:0 10px 10px 0;font-size:.86rem;line-height:1.55;color:var(--muted)}
.fa-miss b{color:var(--txt)}
.fa-wr td:nth-child(2){color:var(--muted);text-decoration:line-through;text-decoration-color:#f0703a}
.fa-types{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;margin:0 0 1rem}
.fa-types>div{border:1px solid var(--line);border-radius:12px;padding:.8rem .9rem;background:var(--bg2)}
.fa-types b{font:700 .92rem var(--font-d)}.fa-types p{margin:.35rem 0 0;font-size:.84rem;line-height:1.5;color:var(--muted)}
.fa-types .t-basic{border-top:3px solid #2e6fe8}.fa-types .t-sec{border-top:3px solid #7c8db5}.fa-types .t-unw{border-top:3px solid #ef4444}.fa-types .t-est{border-top:3px solid #e06aa8}
.st-pf{min-width:900px}.st-pf tr.pf-grp th{background:var(--card);font:700 .74rem var(--font-m);letter-spacing:.08em;text-transform:uppercase;color:var(--acc3)}
.st-pf td.fn2{color:var(--muted);font-size:.84rem}.st-pf td.fnu{color:#ef6b5b;font-size:.84rem}
.fx-tools{display:flex;justify-content:flex-end;margin:0 0 .5rem}
.st-fast .fx-scroll svg{min-width:1100px}
.fx text{font:600 12.5px var(--font-b)}
.fx .fx-sub{font:500 10.5px var(--font-m)}
.fx-higher rect,.fx-assumed rect{stroke-dasharray:5 4;fill:transparent}
.fx-basic rect{stroke:#2e6fe8;stroke-width:2.4;fill:color-mix(in srgb,#2e6fe8 22%,var(--bg2))}
.fx-unwanted rect{stroke:#ef4444;stroke-dasharray:5 3;fill:color-mix(in srgb,#ef4444 12%,var(--bg2))}.fx-unwanted text{fill:#f87171}
.fx-all rect{stroke:#22a39a}.fx-one rect{stroke:#9b6cf0}.fx-user rect{stroke:#7b8db0}.fx-esteem rect{stroke:#e06aa8}.fx-second rect{stroke:#d9a44a}.fx-when rect{stroke:#7c8db5}
.fx-link.fx-cause{stroke:#ef4444;stroke-dasharray:5 4}.fx-link.fx-when{stroke-dasharray:3 3}
.fx-obj rect{fill:color-mix(in srgb,var(--acc3) 8%,transparent);stroke:var(--acc3)}.fx-obj text{font:500 12px var(--font-b);fill:var(--txt)}.fx-obj .fx-crit-h{font:700 10.5px var(--font-m);fill:var(--acc3);letter-spacing:.06em}
.fx-crit rect{fill:transparent;stroke:var(--muted);stroke-dasharray:6 4}.fx-crit text{font:500 11.5px var(--font-b);fill:var(--muted)}.fx-crit .fx-crit-h{font:700 10.5px var(--font-m);fill:var(--acc3);letter-spacing:.06em}
.fx-legend{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1rem;font-size:.78rem;color:var(--muted)}
.fx-legend li::before{content:"";display:inline-block;width:14px;height:10px;margin-right:.35rem;border-radius:3px;border:2px solid var(--line);vertical-align:-1px}
.fx-legend .fl-basic::before{border-color:#2e6fe8;background:color-mix(in srgb,#2e6fe8 30%,transparent)}.fx-legend .fl-when::before{border-color:#7c8db5}.fx-legend .fl-unwanted::before{border-color:#ef4444;border-style:dashed}
.fx-legend .fl-all::before{border-color:#22a39a}.fx-legend .fl-one::before{border-color:#9b6cf0}.fx-legend .fl-user::before{border-color:#7b8db0}.fx-legend .fl-esteem::before{border-color:#e06aa8}.fx-legend .fl-out::before{border-style:dashed}
.st-mx{min-width:1000px;font-size:.8rem}.st-mx .mx-h{vertical-align:bottom;height:120px}.st-mx .mx-h span{display:inline-block;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
.st-mx td.mx-on{background:color-mix(in srgb,var(--acc1) 16%,transparent);color:var(--txt)}
.sp-bar{display:flex;height:34px;border-radius:10px;overflow:hidden;margin:.2rem 0 .7rem}
.sp-key{list-style:none;margin:0 0 .6rem;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.3rem 1rem;font-size:.84rem}
.sp-key s{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:.4rem;vertical-align:-1px}.sp-key b{font-family:var(--font-m)}.sp-key span{color:var(--muted)}
.fp-scroll{overflow-x:auto;max-width:100%}.fp-scroll svg{width:100%;min-width:760px;height:auto;display:block}
.fp-grid{stroke:var(--line)}.fp-ax{font:500 11px var(--font-m);fill:var(--muted);text-anchor:end}
.fp-zone{fill:color-mix(in srgb,#f0703a 9%,transparent)}.fp-zt{font:700 13px var(--font-b);fill:#f0703a}
.fp-b rect{fill:#5a7fc4;transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);transition:transform .7s cubic-bezier(.2,.7,.2,1) var(--d)}
.fp-b.top rect{fill:#f0703a}.is-on .fp-b rect{transform:scaleY(1)}
.fp-n{font:500 11px var(--font-b);fill:var(--muted);text-anchor:end}
.fp-cum{fill:none;stroke:var(--txt);stroke-width:2;opacity:0;transition:opacity .6s 1.2s}.fp-dot{fill:var(--txt);opacity:0;transition:opacity .6s 1.2s}.is-on .fp-cum,.is-on .fp-dot{opacity:1}
@media (prefers-reduced-motion:reduce){.fp-b rect{transition:none}.fp-cum,.fp-dot{transition:none}}
.st-fn td.ty{font-size:.78rem;color:var(--muted);white-space:nowrap}
.st-pc{min-width:880px}.st-pc td.pc-x{background:var(--card)}.st-pc td.pc-c{font-family:var(--font-m);font-size:.82rem}
.fvg{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.fvg li{display:grid;grid-template-columns:190px 1fr 56px;gap:.8rem;align-items:center;font-size:.86rem}
.fvg-bars{display:grid;gap:3px}.fvg-bars i{display:block;height:14px;border-radius:99px;position:relative;min-width:2px}
.fvg-imp{background:#22c55e}.fvg-cost{background:#5a7fc4}.fvg-bars em{position:absolute;left:calc(100% + 6px);top:-2px;font:600 .7rem var(--font-m);font-style:normal;color:var(--muted)}
.fvg-r{font:700 .84rem var(--font-m);text-align:right}.fvg li.fvg-hot .fvg-r{color:#f0703a}.fvg li.fvg-warm .fvg-r{color:#d99a1a}
.fvg-key{display:flex;flex-wrap:wrap;gap:1rem;font-size:.78rem;color:var(--muted);margin:.7rem 0 .4rem}
.fvg-key .k-imp::before,.fvg-key .k-cost::before{content:"";display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:.35rem;vertical-align:-1px;background:#22c55e}.fvg-key .k-cost::before{background:#5a7fc4}
.fa-clues{min-width:760px}
@media (max-width:900px){.fa-types{grid-template-columns:1fr 1fr}.fvg li{grid-template-columns:130px 1fr 46px}}
.pj-unw{color:#f87171}
.fp-axr{text-anchor:start}.fp-v{font:600 10px var(--font-m);fill:var(--txt);text-anchor:middle;opacity:0;transition:opacity .4s 1s}.is-on .fp-v{opacity:1}
.fp-axl{text-anchor:start}

/* link to the YouTube version of the function analysis films */
.cs-yt{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:1.2rem;align-items:center;margin:1.2rem 0 1.4rem;padding:.8rem;border:1px solid var(--line);border-radius:18px;background:var(--card);color:var(--txt);text-decoration:none;max-width:880px;transition:border-color .2s,transform .2s}
.cs-yt:hover,.cs-yt:focus-visible{border-color:var(--acc3);transform:translateY(-2px)}
.cs-yt img{width:100%;height:auto;border-radius:12px;display:block}
.cs-yt-t{display:flex;flex-direction:column;gap:.35rem}
.cs-yt-t small{font:700 .72rem var(--font-m);letter-spacing:.1em;text-transform:uppercase;color:var(--acc3)}
.cs-yt-t b{font:700 1.15rem var(--font-b);line-height:1.3}
.cs-yt-t>span{font-size:.92rem;line-height:1.5;color:var(--muted)}
.cs-yt-t em{font-style:normal;font-weight:700;color:var(--acc1)}
@media (max-width:640px){.cs-yt{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.cs-yt{transition:none}.cs-yt:hover{transform:none}}
/* windscreen wiper study (case study 2) */
.st-voc{margin:0;padding:0 0 0 1.1rem;display:grid;gap:.5rem;font-size:.88rem;line-height:1.55;color:var(--muted)}
.st-voc b{color:var(--txt)}
.st-voc a{font-size:.78rem;color:var(--acc1);margin-left:.15rem}
#wsIdeas .st-parts{white-space:normal;min-width:7.5rem;max-width:10rem}
#wsIdeas .st-parts .st-3d{margin:.25rem 0 0;display:inline-flex}
#wsBom .st-bom{min-width:760px}
#wsBom .st-bom td:nth-child(2),#wsBom .st-bom th:nth-child(2){min-width:280px}