/* Products: problem -> fix picker with motion-graphics stories. Light palette only. */
.sp { padding: clamp(56px, 6vw, 96px) 0 clamp(52px, 5vw, 84px); background: linear-gradient(180deg, #fff 0, #fffaf3 100%); }
.sp .phead { max-width: 780px; margin-inline: auto; text-align: center; display: grid; justify-items: center; }
.sp .sp-lead { max-width: 54ch; margin: 14px auto 0; font-size: var(--fs-lead, 18px); line-height: 1.65; color: var(--mute); }
.sp-wrap { margin-top: clamp(26px, 3vw, 44px); }
.sp-list { display: grid; grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); gap: 10px clamp(20px, 3vw, 44px); margin: 0; padding: 0; list-style: none; align-items: start; }
.sp-i { display: contents; min-width: 0; }
/* problem buttons */
.sp-b { position: relative; grid-column: 1; display: flex; align-items: center; gap: 14px; width: 100%; padding: 15px 18px; border: 1px solid #eadfd0; border-radius: 18px; background: #fff; font: inherit; text-align: left; color: var(--ink); cursor: pointer; overflow: hidden; transition: border-color .25s, background .25s, box-shadow .25s, transform .25s; }
.sp-b:hover { border-color: #f3c999; transform: translateX(3px); }
.sp-b:focus-visible { outline: 2px solid #f7861e; outline-offset: 2px; }
.sp-n { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #fff3e3; font: 800 13px/1 var(--mono, monospace); color: #c25e00; transition: background .25s, color .25s; }
.sp-q { flex: 1; font-size: 16px; line-height: 1.35; font-weight: 700; letter-spacing: -.005em; }
.sp-cv { flex: none; color: #c9b9a3; transition: transform .25s, color .25s; }
.sp-i.on .sp-b { border-color: #f7861e; background: #fff7ec; box-shadow: 0 14px 30px -18px rgba(247,134,30,.7); transform: translateX(6px); }
.sp-i.on .sp-n { background: #f7861e; color: #fff; } .sp-i.on .sp-cv { color: #f7861e; transform: translateX(3px); }
.sp-pg { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, #f7861e, #ffb45c); transform: scaleX(0); transform-origin: left; }
.sp-wrap.auto .sp-i.on .sp-pg { animation: sppg 10.2s linear forwards; }
@keyframes sppg { to { transform: scaleX(1); } }
/* detail card */
.sp-p { grid-column: 2; grid-row: 1 / span 8; align-self: stretch; display: flex; flex-direction: column; min-width: 0; padding: clamp(22px, 2.4vw, 34px); border: 1px solid #eadfd0; border-radius: 28px; background: #fff; box-shadow: 0 40px 70px -46px rgba(247,134,30,.55); animation: spin .55s cubic-bezier(.2,.8,.2,1) both; }
.sp-i:not(.on) .sp-p { display: none; }
@keyframes spin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.sp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sp-tag { padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 800; }
.sp-tag.t-pu { background: #fff0dc; color: #b45309; } .sp-tag.t-tg { background: #e6efff; color: #2457b5; } .sp-tag.t-sb { background: #e5f8ec; color: #15803d; } .sp-tag.t-er { background: #efe9ff; color: #5b3fc4; }
.sp-fx { font: 700 11.5px var(--mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: #9a8a76; }
body .sp .sp-p h3 { margin: 14px 0 0; font-size: clamp(24px, 2.4vw, 34px) !important; line-height: 1.1 !important; font-weight: 800 !important; letter-spacing: -.03em; color: var(--ink); }
.sp-d { margin: 10px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--mute); max-width: 60ch; }
.sp-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; align-self: flex-start; font-weight: 800; font-size: 15.5px; color: #c25e00; }
.sp-go svg { transition: transform .25s; } .sp-go:hover svg { transform: translateX(4px); }

/* ===== the story stage ===== */
.ms { display: flex; flex-direction: column; flex: 1; margin-top: 18px; border-radius: 22px; overflow: hidden; background: #fdf6ec; box-shadow: inset 0 0 0 1px #f1e4d2; }
.ms-sc { position: relative; container-type: inline-size; flex: 1; min-height: 260px; background: radial-gradient(110% 120% at 100% 0, #fff3e2, #fdf6ec 60%); }
.ms-ex { position: absolute; right: 12px; top: 9px; font: 700 10px var(--mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: #b8a58c; z-index: 3; }
.ms-in { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 1.3em; padding: 1.6em 1.4em 1.2em; font-size: clamp(11px, 1.95cqw, 15px); }
.ms em { font-style: normal; }
.sw { display: inline-grid; justify-items: center; } .sw > * { grid-area: 1 / 1; }
/* which beat shows what */
.kx { opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s; pointer-events: none; }
.ms:not(.b2) .k1, .ms.b2:not(.b3) .k2, .ms.b3 .k3, .ms.b2 .k23, .ms:not(.b3) .k12 { opacity: 1; transform: none; }
/* shared bits */
.card { background: #fff; border-radius: 1em; box-shadow: 0 0 0 1px #efe3d2, 0 .7em 1.5em -1em rgba(120,70,10,.35); padding: .85em 1.1em; }
.chip { display: inline-flex; align-items: center; padding: .45em 1em; border-radius: 999px; font-weight: 800; font-size: .95em; white-space: nowrap; }
.chip.rd { background: #fff0ee; color: #b42318; box-shadow: 0 0 0 1px #f6cfcb; } .chip.am { background: #fff4de; color: #b45309; box-shadow: 0 0 0 1px #f3c999; } .chip.gr { background: #e8f8ef; color: #15803d; box-shadow: 0 0 0 1px #bfe8cf; }
.rdt { color: #b42318; } .amt { color: #b45309; } .grt { color: #15803d; } .gyt { color: #8a97a6; }
/* caption strip */
.ms-cap { display: flex; align-items: center; gap: 16px; padding: 14px 18px; background: #fff; border-top: 1px solid #f1e4d2; }
.ms-dots { display: flex; gap: 6px; flex: none; } .ms-dots button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #f4ece0; color: #a89780; font: 800 12px/1 var(--mono, monospace); cursor: pointer; transition: background .3s, color .3s, transform .3s; }
.ms-dots button:hover { transform: scale(1.08); }
.ms:not(.b2) .ms-dots [data-b="1"] { background: #f7861e; color: #fff; } .ms.b2:not(.b3) .ms-dots [data-b="2"] { background: #f7861e; color: #fff; } .ms.b3 .ms-dots [data-b="3"] { background: #22c55e; color: #fff; }
.ms.b2 .ms-dots [data-b="1"] { background: #ffe0bd; color: #c25e00; } .ms.b3 .ms-dots [data-b="2"] { background: #ffe0bd; color: #c25e00; }
.ms-tx { display: grid; flex: 1; min-width: 0; } .ms-tx p { grid-area: 1 / 1; margin: 0; display: grid; gap: 2px; font-size: 15.5px; line-height: 1.4; font-weight: 700; color: #2b3b4a; opacity: 0; transform: translateY(6px); transition: opacity .45s, transform .45s; }
.ms-tx small { font: 800 10.5px var(--mono, monospace); letter-spacing: .1em; text-transform: uppercase; }
.ms-tx [data-b="1"] small { color: #b42318; } .ms-tx [data-b="2"] small { color: #c25e00; } .ms-tx [data-b="3"] small { color: #15803d; }
.ms:not(.b2) .ms-tx [data-b="1"], .ms.b2:not(.b3) .ms-tx [data-b="2"], .ms.b3 .ms-tx [data-b="3"] { opacity: 1; transform: none; }

/* 1 production: three machines */
.s-prod .rowt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8em; width: min(100%, 40em); }
.mt { position: relative; display: grid; gap: .35em; padding: .9em 1em; border-radius: 1em; background: #fff; box-shadow: 0 0 0 1px #efe3d2; opacity: .6; filter: grayscale(1); transition: opacity .6s, filter .6s, box-shadow .6s; }
.mt b { font-size: 1.05em; } .mt .sw { justify-items: start; font-size: .85em; font-weight: 700; color: #6a7a8c; }
.dot { position: absolute; right: .9em; top: .95em; width: .8em; height: .8em; border-radius: 50%; background: #cbd5e1; transition: background .5s, box-shadow .5s; }
.mb { height: .5em; border-radius: 9em; background: #efe5d6; overflow: hidden; } .mb u { display: block; height: 100%; width: 0; border-radius: 9em; background: #22c55e; transition: width 1s .3s, background .5s; }
.b2 .mt { opacity: 1; filter: none; }
.b2 .run .dot { background: #22c55e; box-shadow: 0 0 0 .35em rgba(34,197,94,.2); animation: svpulse 1.6s infinite; } .b2 .run .mb u { width: 86%; }
.b2 .idle .dot { background: #f5a524; box-shadow: 0 0 0 .35em rgba(245,165,36,.22); animation: svpulse 1.6s infinite; } .b2 .idle .mb u { width: 34%; background: #f5a524; }
.b2 .stop { box-shadow: 0 0 0 2px #e5484d; } .b2 .stop .dot { background: #e5484d; box-shadow: 0 0 0 .35em rgba(229,72,77,.22); animation: svpulse .9s infinite; } .b2 .stop .mb u { width: 8%; background: #e5484d; }
.b3 .stop { box-shadow: 0 0 0 2px #22c55e; } .b3 .stop .dot { background: #22c55e; box-shadow: 0 0 0 .35em rgba(34,197,94,.2); animation: none; } .b3 .stop .mb u { width: 82%; background: #22c55e; }
@keyframes svpulse { 50% { transform: scale(.7); opacity: .55; } }

/* 2 health: a rising load line */
.s-hl { grid-template-columns: auto minmax(0, 1fr); gap: 1em; justify-items: stretch; align-items: center; }
.s-hl .mach { display: grid; gap: .5em; min-width: 12em; } .s-hl .mach b { font-size: 1.1em; } .s-hl .mach .sw { justify-items: start; font-weight: 800; font-size: .92em; }
.s-hl .chart { display: grid; gap: .5em; } .s-hl .chart svg { width: 100%; height: auto; display: block; } .s-hl .chart .sw { justify-items: start; }
.s-hl .th { fill: none; stroke: #e5484d; stroke-width: 1.4; stroke-dasharray: 4 4; } .s-hl text { font: 700 9px Inter, sans-serif; fill: #b42318; }
.s-hl .ln { fill: none; stroke: #f7861e; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 260; transition: stroke-dashoffset 2.6s ease-out; } .b2 .s-hl .ln { stroke-dashoffset: 0; }
.s-hl .pt { fill: #f5a524; opacity: 0; transition: opacity .3s 1.7s; } .b2 .s-hl .pt { opacity: 1; animation: svpulse 1.1s 1.7s infinite; } .b3 .s-hl .pt { fill: #22c55e; animation: none; }

/* 3 energy: one bill splits into machines, divided by parts */
.s-en { display: flex; align-items: center; justify-content: center; gap: 1.6em; }
.s-en .bill { position: absolute; inset: 0; margin: auto; width: max-content; height: max-content; display: grid; justify-items: center; gap: .15em; padding: 1.2em 2em; } .s-en .bill small { font: 800 .8em var(--mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: #8a7a66; } .s-en .bill b { font-size: 2em; letter-spacing: -.02em; color: #b42318; } .s-en .bill span { font-size: .9em; font-weight: 700; color: #6a7a8c; }
.meters { display: grid; gap: .7em; width: min(24em, 100%); transition: transform .6s, opacity .5s; } .b3 .meters { transform: translateX(-2em); }
.me { display: grid; grid-template-columns: 5.2em 1fr 4.2em; align-items: center; gap: .7em; } .me b { font-size: .95em; } .me em { font-weight: 800; font-size: .9em; color: #c25e00; text-align: right; }
.me span { height: .75em; border-radius: 9em; background: #efe5d6; overflow: hidden; } .me u { display: block; height: 100%; width: 0; border-radius: 9em; background: linear-gradient(90deg, #f7861e, #ffb45c); transition: width 1.1s .4s; } .b2 .me u { width: var(--w); }
.s-en .res { display: grid; justify-items: center; gap: .1em; padding: 1em 1.4em; box-shadow: 0 0 0 2px #22c55e, 0 .7em 1.5em -1em rgba(34,197,94,.5); } .s-en .res small { font-size: .8em; font-weight: 800; color: #6a7a8c; } .s-en .res b { font-size: 2.3em; line-height: 1; letter-spacing: -.03em; color: #15803d; } .s-en .res span { font-size: .85em; font-weight: 800; color: #15803d; }

/* 4 tool life */
.s-tl { gap: 1.5em; } .tl { display: grid; grid-template-columns: 5em minmax(0, 1fr) 13em; align-items: center; gap: .9em; width: min(100%, 44em); } .tl b { font-size: .98em; }
.tb { position: relative; height: 1em; border-radius: 9em; background: #efe5d6; } .tb u { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 9em; transition: width 1.4s ease, background .6s; } .tb s { position: absolute; left: 90%; top: -.35em; bottom: -.35em; width: 2px; background: #b8a58c; opacity: .7; }
.w1 { width: 60%; background: #cbd5e1; } .b2 .w1 { width: 78%; background: linear-gradient(90deg, #f7861e, #ffb45c); } .b3 .w1 { width: 95%; background: #22c55e; }
.w3 { width: 100%; background: #e5484d; } .b2 .w3 { width: 92%; background: linear-gradient(90deg, #f5a524, #ff8a3d); } .b3 .w3 { width: 14%; background: #22c55e; }
.tl .sw { justify-items: start; font-weight: 800; font-size: .92em; }

/* 5 traceability */
.s-tr { gap: 1.5em; } .chain { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5em; width: min(100%, 46em); position: relative; }
.chain::before { content: ""; position: absolute; left: 6%; right: 6%; top: 1.45em; height: 3px; background: repeating-linear-gradient(90deg, #cbd5e1 0 6px, transparent 6px 10px); } .chain::after { content: ""; position: absolute; left: 6%; right: 6%; top: 1.45em; height: 3px; background: #f7861e; transform: scaleX(0); transform-origin: left; transition: transform 1.8s ease; } .b2 .chain::after { transform: scaleX(1); } .b3 .chain::after { background: #22c55e; }
.nd { position: relative; z-index: 1; display: grid; justify-items: center; gap: .3em; padding: .55em .3em; border-radius: .9em; background: #fff; box-shadow: 0 0 0 1px #efe3d2; text-align: center; transition: box-shadow .5s, transform .5s; } .nd b { font-size: .8em; font-weight: 800; color: #8a7a66; } .nd .sw { font-weight: 800; font-size: .85em; color: #2b3b4a; }
.b3 .nd { box-shadow: 0 0 0 2px #22c55e; } .b3 .nd.cu { box-shadow: 0 0 0 2px #e5484d; }
.b3 .nd { animation: svhop .6s both; } .b3 .nd:nth-child(6) { animation-delay: 0s; } .b3 .nd:nth-child(5) { animation-delay: .15s; } .b3 .nd:nth-child(4) { animation-delay: .3s; } .b3 .nd:nth-child(3) { animation-delay: .45s; } .b3 .nd:nth-child(2) { animation-delay: .6s; } .b3 .nd:nth-child(1) { animation-delay: .75s; }
@keyframes svhop { 40% { transform: translateY(-.5em); } }

/* 6 program vault */
.s-pg { grid-template-columns: auto minmax(2em, 7em) auto; gap: 0; justify-content: center; }
.files { display: grid; gap: .9em; } .fl { display: grid; gap: .25em; min-width: 11em; padding: .8em 1em; border-radius: 1em; background: #fff; box-shadow: 0 0 0 1px #efe3d2; } .fl em { font-size: .85em; font-weight: 800; color: #8a97a6; } .fl .sw { justify-items: start; font-size: .85em; font-weight: 800; color: #8a97a6; }
.fl.f3 em { color: #15803d; } .b3 .fl.f3 { box-shadow: 0 0 0 2px #22c55e; } .fl.f4 { transition: box-shadow .5s; } .b1:not(.b2) .fl.f4 { box-shadow: 0 0 0 2px #e5484d; }
.cn { width: 100%; height: 7.4em; } .cn path { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; transition: opacity .5s; animation: svmarch 1s linear infinite; } .cn .l4 { stroke: #e5484d; opacity: 0; } .cn .l3 { stroke: #22c55e; opacity: 0; } .ms:not(.b2) .cn .l4 { opacity: 1; } .ms.b3 .cn .l3 { opacity: 1; }
@keyframes svmarch { to { stroke-dashoffset: -10; } }
.mc { display: grid; gap: .4em; min-width: 11em; justify-items: start; } .mc b { font-size: 1.1em; } .mc .sw { justify-items: start; font-weight: 800; font-size: .9em; }

/* 7 paperless */
.paper { position: absolute; inset: 0; margin: auto; width: 13em; height: max-content; display: grid; gap: .55em; padding: 1.1em 1.2em 1em; border-radius: .6em; background: #fffdf8; box-shadow: 0 0 0 1px #e6dac5, .5em .6em 0 -.1em #f1e8d6, 0 1em 1.8em -1em rgba(0,0,0,.3); transform: rotate(-2deg); }
.paper i { display: block; height: .5em; border-radius: 9em; background: #e5dcc9; } .paper i:nth-child(2) { width: 70%; } .paper i:nth-child(3) { width: 85%; } .paper i:nth-child(4) { width: 55%; } .paper .chip { justify-self: start; margin-top: .3em; }
.tab { position: absolute; inset: 0; margin: auto; width: min(21em, 86%); height: max-content; display: grid; gap: .55em; padding: 1em 1.2em; border-radius: 1.2em; background: #fff; box-shadow: 0 0 0 1px #efe3d2, 0 1em 2em -1.2em rgba(120,70,10,.5); } .tab b { font-size: .9em; color: #c25e00; }
.tab p { position: relative; margin: 0; padding-left: 1.9em; font-weight: 700; font-size: .98em; color: #3a4a5a; }
.tk { position: absolute; left: 0; top: .1em; width: 1.2em; height: 1.2em; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #d9ccb8; transition: background .3s calc(var(--i) * .55s + .3s), box-shadow .3s calc(var(--i) * .55s + .3s); }
.tk::after { content: ""; position: absolute; left: .4em; top: .2em; width: .28em; height: .55em; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; transition: opacity .3s calc(var(--i) * .55s + .3s); }
.b3 .tk { background: #22c55e; box-shadow: none; } .b3 .tk::after { opacity: 1; }
.stamp { position: absolute; right: 7%; bottom: 14%; font-size: 1em; }
.ms.b3 .stamp { transform: rotate(-4deg); }

/* 8 ERP */
.s-er { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .9em; width: min(100%, 42em); justify-self: center; justify-items: stretch; align-items: center; }
.bx { display: grid; gap: .4em; } .bx b { font-size: .9em; color: #8a7a66; } .bx strong { font-size: 2em; line-height: 1; letter-spacing: -.03em; } .bx small { font-size: .85em; font-weight: 700; color: #6a7a8c; } .bx .sw { justify-items: start; }
.pb { height: .6em; border-radius: 9em; background: #efe5d6; overflow: hidden; } .pb u { display: block; height: 100%; border-radius: 9em; } .pb .pl { width: 100%; background: #c9b9a3; } .pb .ac { width: 0; background: linear-gradient(90deg, #f7861e, #ffb45c); transition: width 1.4s .3s; } .b2 .pb .ac { width: 72%; }
.lk { display: grid; justify-items: center; gap: .3em; font-weight: 800; font-size: .85em; } .lk i { width: 3.2em; height: 3px; border-radius: 2px; background: repeating-linear-gradient(90deg, #cbd5e1 0 5px, transparent 5px 9px); transition: background .4s; } .b2 .lk i { background: repeating-linear-gradient(90deg, #f7861e 0 5px, transparent 5px 9px); animation: svmarchx 1s linear infinite; } @keyframes svmarchx { to { background-position: 9px 0; } }
.gp { position: absolute; left: 0; right: 0; bottom: 8%; margin-inline: auto; width: max-content; }

/* phones and tablets: an accordion, the card sits under its problem */
@media (max-width: 900px) {
  .sp-list { display: flex; flex-direction: column; gap: 10px; }
  .sp-i { display: block; min-width: 0; width: 100%; }
  .sp-b { transform: none !important; padding: 14px 15px; } .sp-q { font-size: 15.5px; }
  .sp-i.on .sp-cv { transform: rotate(90deg); }
  .sp-p { margin-top: 8px; padding: 18px 16px; border-radius: 22px; overflow: hidden; }
  .sp-d { font-size: 15px; }
  .ms { flex: none; } .ms-sc { flex: none; min-height: 340px; }
  .ms-cap { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; } .ms-tx { width: 100%; } .ms-tx p { font-size: 15px; }
}
@container (max-width: 560px) {
  .ms-in { gap: 1em; padding: 2.2em .9em .9em; }
  .s-hl { grid-template-columns: 1fr; } .s-hl .mach { min-width: 0; }
  .s-en { flex-direction: column; } .s-en .res { position: absolute; right: .9em; bottom: .9em; } .b3 .meters { transform: none; opacity: .35; } .meters { width: 100%; }
  .tl { grid-template-columns: 4.2em minmax(0, 1fr); gap: .4em .8em; } .tl .sw { grid-column: 1 / -1; }
  .chain { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6em; } .chain::before, .chain::after { display: none; }
  .s-pg { grid-template-columns: 1fr; gap: .6em; justify-items: center; } .cn { display: none; } .files { grid-template-columns: 1fr 1fr; width: 100%; } .fl { min-width: 0; }
  .s-er { grid-template-columns: 1fr; } .lk { grid-auto-flow: column; gap: .6em; } .lk i { width: 1.6em; } .gp { position: static; margin: 0; }
  .paper { width: 11em; }
  .stamp { right: 4%; bottom: 6%; }
}
@media (prefers-reduced-motion: reduce) { .sp-p, .kx, .mt, .mb u, .me u, .tb u, .pb u, .tk, .nd, .cn path, .dot, .s-hl .ln, .s-hl .pt, .chain::after, .lk i { animation: none !important; transition: none !important; } .s-hl .ln { stroke-dashoffset: 0; } }