/* Explainer animations – scale with the frame width so they work on phones and inside the deck. */
.ex { max-width: 1400px; margin: 0 auto; padding: 20px 16px 32px; display: flex; flex-direction: column; gap: 18px; }
html.embed .ex { max-width: none; padding: 2.2vw 2.6vw; gap: 1.6vw; font-size: clamp(16px, 2vw, 40px); }
html.embed .ex h3 { font-size: 1.15em; }
.replay { align-self: flex-start; }
html.embed .replay { display: none; }

/* Decision engine */
.pipe { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2.2%; }
@media (max-width: 640px) { .pipe { grid-template-columns: 1fr; gap: 10px; } }
.st { background: var(--surface-alt); border: 3px solid transparent; border-radius: var(--r-xl); padding: 1em; display: flex; flex-direction: column; gap: .35em; min-height: 6.5em; transition: border-color .3s, background .3s, transform .3s; }
.st b { font-family: var(--font-display); color: var(--blue); font-size: 1.1em; line-height: 1.2; }
.st span { font-size: .85em; color: var(--ink-700); }
.st .n { font-family: var(--font-display); font-weight: 900; color: var(--orange); font-size: .9em; }
.st.on { border-color: var(--orange); background: #FFF6EC; transform: translateY(-4px); }
.st.last { background: var(--blue); }
.st.last b, .st.last span { color: #fff; }
.st.last.on { background: var(--blue); border-color: var(--orange); }
.token { position: absolute; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 .4em rgba(239,123,16,.25); transition: left .8s cubic-bezier(.5,0,.2,1), top .8s cubic-bezier(.5,0,.2,1), opacity .3s; opacity: 0; z-index: 2; pointer-events: none; }
.caption { display: flex; gap: 1em; align-items: center; background: #fff; border: 2px solid var(--ink-100); border-radius: var(--r-xl); padding: .9em 1.2em; min-height: 3.6em; }
.caption .who { font-family: var(--font-display); font-weight: 700; color: var(--blue); white-space: nowrap; }
.caption .what { color: var(--ink-900); font-size: 1.05em; }
.results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; }
@media (max-width: 640px) { .results { grid-template-columns: 1fr; } }
.res { border-radius: var(--r-lg); padding: .8em 1em; color: #fff; font-weight: 700; opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .4s; }
.res small { display: block; font-weight: 400; opacity: .9; }
.res.show { opacity: 1; transform: none; }
.res.g { background: var(--green); } .res.y { background: var(--honey); color: var(--blue); } .res.r { background: var(--ink-700); }

/* Score dots */
.score-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5em; align-items: center; }
@media (min-width: 700px) { .score-wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.dots { display: grid; grid-template-columns: repeat(10, 1fr); gap: .5em; max-width: 26em; width: 100%; }
.dot { aspect-ratio: 1; border-radius: 50%; background: var(--light-blue); transform: scale(0); transition: transform .35s cubic-bezier(.2,1.6,.4,1), background .5s; }
.dot.in { transform: scale(1); }
.dot.bad { background: var(--orange); transform: scale(1.15); }
.quote { font-family: var(--font-display); font-weight: 700; color: var(--blue); font-size: 1.6em; line-height: 1.2; opacity: 0; transition: opacity .5s; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2em; opacity: 0; transition: opacity .5s; }
.cols2 ul { margin: .4em 0 0; padding-left: 1.1em; line-height: 1.45; }
.show-it { opacity: 1 !important; }

/* Process timeline */
.tl { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%; padding-top: 2.4em; }
.tl .rail { position: absolute; left: 0; right: 0; top: .9em; height: .4em; background: var(--ink-100); border-radius: 1em; overflow: hidden; }
.tl .rail i { display: block; height: 100%; width: 0; background: var(--orange); transition: width 1.2s ease; }
.tl .stn { position: relative; background: #fff; border: 2px solid var(--ink-100); border-radius: var(--r-xl); padding: 1.1em; display: flex; flex-direction: column; gap: .5em; opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .5s; }
.tl .stn::before { content: ""; position: absolute; top: -2.15em; left: 1.1em; width: 1.2em; height: 1.2em; border-radius: 50%; background: var(--blue); border: .25em solid #fff; box-shadow: 0 0 0 2px var(--blue); }
.tl .stn.show { opacity: 1; transform: none; }
.tl .stn .when { font-size: .8em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
.tl .stn h3 { font-size: 1.35em; }
.tl .stn .case { align-self: flex-start; background: var(--blue); color: #fff; border-radius: 999px; padding: .3em .9em; font-size: .85em; font-weight: 600; }
@media (max-width: 640px) {
  .tl { grid-template-columns: 1fr; padding-top: 0; padding-left: 2em; }
  .tl .rail { left: .55em; right: auto; top: 0; bottom: 0; width: .4em; height: auto; }
  .tl .rail i { width: 100% !important; height: 0; transition: height 1.2s ease; }
  .tl .stn::before { top: 1.1em; left: -2.05em; }
}