/* ===== "What we do" explainer — builds on styles.css tokens ===== */

.explainer { width: min(1080px, 100%); margin: 0 auto; padding: 0 clamp(16px, 5vw, 40px) 60px; }

/* ---------- hero ---------- */
.hero { text-align: center; padding: clamp(40px, 8vh, 90px) 0 30px; }
.hero-eyebrow {
  display: inline-block; font-size: 0.78rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--mint); background: var(--mint-soft); border: 1px solid var(--border-strong);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 22px;
  opacity: 0; animation: reveal .7s var(--ease) .05s forwards;
}
.hero h1 {
  font-size: clamp(1.8rem, 4.4vw, 3.1rem); line-height: 1.1; margin: 0 auto; max-width: 15ch;
  background: linear-gradient(120deg, #fff 30%, var(--mint) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  opacity: 0; animation: reveal .8s var(--ease) .12s forwards;
}
.hero p { color: var(--muted); font-size: 1.02rem; max-width: 56ch; margin: 18px auto 0; line-height: 1.6;
  opacity: 0; animation: reveal .8s var(--ease) .2s forwards; }
.hero-strip { width: 100%; max-width: 760px; margin: 34px auto 0; height: 120px;
  opacity: 0; animation: reveal 1s var(--ease) .3s forwards; }
.scrollcue { margin-top: 30px; color: var(--muted); font-size: 0.8rem; display: flex; flex-direction: column;
  align-items: center; gap: 6px; opacity: 0; animation: reveal 1s var(--ease) .5s forwards; }
.scrollcue span { display: inline-block; animation: bob 1.8s ease-in-out infinite; font-size: 1.3rem; color: var(--mint); }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ---------- journey / spine ---------- */
.journey { position: relative; margin-top: 20px; }
.spine { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; transform: translateX(-50%);
  background: rgba(71,215,172,0.12); border-radius: 3px; overflow: hidden; }
.spine-fill { position: absolute; left: 0; top: 0; width: 100%; height: 0;
  background: linear-gradient(180deg, var(--mint), var(--mint-2)); box-shadow: 0 0 12px var(--mint);
  transition: height .15s linear; }
@media (max-width: 820px) { .spine { left: 22px; } }

/* ---------- stops ---------- */
.stop {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 5vw, 60px);
  align-items: center; padding: clamp(40px, 9vh, 90px) 0; min-height: 40vh;
}
.stop-copy { max-width: 42ch; }
.stop:nth-child(even) { direction: rtl; }
.stop:nth-child(even) > * { direction: ltr; }
.stop-node {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 16px; height: 16px; border-radius: 50%; background: var(--petrol);
  border: 3px solid rgba(71,215,172,0.3); z-index: 3; transition: border-color .5s, box-shadow .5s;
}
.stop.in-view .stop-node { border-color: var(--mint); box-shadow: 0 0 16px var(--mint); }
.stop-num { font-size: 0.9rem; font-weight: 800; color: var(--mint); letter-spacing: 2px; font-variant-numeric: tabular-nums; }
.stop-title { font-size: clamp(1.3rem, 3vw, 1.9rem); margin: 8px 0 12px; display: flex; align-items: center; gap: 12px; }
.stop-ico { font-size: 1.6rem; filter: drop-shadow(0 0 8px rgba(71,215,172,0.4)); }
.stop-text { color: var(--muted); font-size: 1.02rem; line-height: 1.65; }

/* copy + stage reveal */
.stop-copy, .stop-stage { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.stop:nth-child(even) .stop-stage { transform: translateY(26px) translateX(-10px); }
.stop.in-view .stop-copy, .stop.in-view .stop-stage { opacity: 1; transform: none; }

/* ---------- stage shell ---------- */
.stop-stage { position: relative; }
.stage-card {
  position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: 20px;
  padding: 22px; box-shadow: var(--shadow); overflow: hidden; min-height: 240px;
  display: flex; align-items: center; justify-content: center;
}
.stage-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--mint), transparent); opacity: 0.35; }
.count-chip {
  position: absolute; top: 14px; right: 14px; z-index: 4;
  background: var(--mint-soft); border: 1px solid var(--border-strong); color: var(--mint);
  font-size: 0.78rem; font-weight: 700; padding: 6px 12px; border-radius: 999px;
  font-variant-numeric: tabular-nums; opacity: 0; transform: translateY(-6px); transition: all .5s var(--ease) .5s;
}
.stop.in-view .count-chip { opacity: 1; transform: none; }

/* ---------- city (steps 1 & 2) ---------- */
.city { width: 100%; height: auto; }
.building { transition: opacity .6s var(--ease), fill .6s; }
.building rect { fill: rgba(71,215,172,0.10); stroke: rgba(71,215,172,0.35); stroke-width: 1; }
.building .win { fill: var(--mint); opacity: 0.5; animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 0%,100% { opacity: 0.3; } 50% { opacity: 0.85; } }
.city.breathe { animation: breathe 7s ease-in-out infinite; transform-origin: center bottom; }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.015); } }
/* change step: dim all but the lit one */
.city.dimmed .building { opacity: 0.22; }
.city.dimmed .building.lit { opacity: 1; }
.building.lit rect { fill: rgba(71,215,172,0.85); stroke: var(--mint-2); filter: drop-shadow(0 0 10px var(--mint)); }
.building.lit .win { fill: #04231a; opacity: 0.9; animation: none; }
.glow-ring { fill: none; stroke: var(--mint); stroke-width: 2; opacity: 0; }
.stop.in-view .glow-ring { animation: ring 2.2s ease-out infinite; }
@keyframes ring { 0% { r: 6px; opacity: 0.8; } 100% { r: 46px; opacity: 0; } }
.cursor-tap { opacity: 0; }
.stop.in-view .cursor-tap { animation: tap 2.2s var(--ease) .3s; }
@keyframes tap { 0% { opacity: 0; transform: translate(6px,-6px) scale(1.3); } 20% { opacity: 1; } 40% { transform: translate(0,0) scale(0.8); } 60%,100% { opacity: 0; } }

/* ---------- wires (steps 3 & 4) ---------- */
.map { width: 100%; height: auto; }
.wire { fill: none; stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 1s var(--ease); }
.wire.coral { stroke: var(--code); }
.wire.indigo { stroke: var(--req); }
.stop.in-view .wire { stroke-dashoffset: 0; }
.node-box { fill: var(--panel-2); stroke: var(--border); stroke-width: 1; }
.node-box.src { fill: rgba(71,215,172,0.85); stroke: var(--mint-2); }
.node-label { fill: var(--muted); font-size: 11px; font-family: inherit; }
.test-pill-svg rect { fill: var(--panel-2); stroke: var(--border); stroke-width: 1; transition: fill .5s .8s, stroke .5s .8s; }
.test-pill-svg.hit rect { fill: var(--mint-soft); stroke: var(--border-strong); }
.test-pill-svg text { fill: var(--muted); font-size: 11px; transition: fill .5s .8s; }
.test-pill-svg.hit text { fill: var(--mint); }
.spark { fill: var(--code); opacity: 0; transition: opacity .4s .8s; filter: drop-shadow(0 0 4px var(--code)); }
.stop.in-view .spark { opacity: 1; }

/* ---------- rulebook (step 4) ---------- */
.rulebook { display: flex; flex-direction: column; gap: 9px; width: 100%; }
.rule-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--border); transition: all .5s var(--ease); }
.rule-check { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--muted); flex: none;
  display: grid; place-items: center; color: transparent; font-size: 12px; font-weight: 900; transition: all .4s; }
.rule-line { height: 8px; border-radius: 6px; background: linear-gradient(90deg, var(--muted), transparent); flex: 1; opacity: 0.4; }
.rule-row.on { border-color: var(--req); box-shadow: 0 0 16px -6px var(--req); }
.rule-row.on .rule-check { border-color: var(--req); background: var(--req); color: #06041F; }
.rule-row.on .rule-line { background: linear-gradient(90deg, var(--req), transparent); opacity: 0.8; }
.stop.in-view .rule-row.on { animation: rulepulse 2.4s ease-in-out infinite; }
@keyframes rulepulse { 0%,100% { box-shadow: 0 0 16px -8px var(--req); } 50% { box-shadow: 0 0 20px -2px var(--req); } }

/* ---------- memory cards (step 5) ---------- */
.mem-stack { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.mem-card { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--border);
  opacity: 0; transform: translateX(-14px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.stop.in-view .mem-card { opacity: 1; transform: none; }
.mem-name { font-weight: 600; font-size: 0.86rem; color: var(--text); font-variant-numeric: tabular-nums; }
.mem-clock { display: flex; align-items: center; gap: 6px; color: var(--code); font-size: 0.8rem; font-weight: 700; }
.mem-hist { display: flex; gap: 4px; }
.mem-dot { width: 12px; height: 12px; border-radius: 4px; }
.mem-dot.pass { background: var(--mint); }
.mem-dot.fail { background: var(--code); }
.mem-shimmer { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(71,215,172,0.16) 50%, transparent 60%);
  transform: translateX(-100%); pointer-events: none; }
.stop.in-view .mem-shimmer { animation: shimmer 2.2s ease-in-out .3s; }
@keyframes shimmer { to { transform: translateX(100%); } }

/* ---------- scoreboard (step 6) ---------- */
.scoreboard { display: flex; flex-direction: column; gap: 11px; width: 100%; }
.score-row { display: grid; grid-template-columns: 74px 1fr 34px; align-items: center; gap: 10px; }
.score-name { font-size: 0.8rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.score-track { height: 15px; border-radius: 8px; background: #08061c; border: 1px solid var(--border); overflow: hidden; }
.score-fill { height: 100%; width: 0; border-radius: 8px; transition: width 1s var(--ease); box-shadow: 0 0 10px -2px currentColor; }
.stop.in-view .score-fill { width: var(--w); }
.score-fill.mint { background: var(--mint); color: var(--mint); }
.score-fill.coral { background: var(--code); color: var(--code); }
.score-fill.indigo { background: var(--req); color: var(--req); }
.score-val { font-size: 0.76rem; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.score-star { color: var(--mint); opacity: 0; transition: opacity .4s 1s; }
.stop.in-view .score-star { opacity: 1; }
.score-legend { display: flex; gap: 14px; margin-top: 14px; flex-wrap: wrap; font-size: 0.74rem; color: var(--muted); }
.score-legend span { display: inline-flex; align-items: center; gap: 6px; }
.score-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* ---------- time jar (step 7) ---------- */
.jar-wrap { display: flex; align-items: center; gap: 22px; }
.jar { width: 130px; height: 200px; }
.jar-body { fill: rgba(255,255,255,0.02); stroke: var(--border-strong); stroke-width: 2; }
.jar-liquid { fill: url(#jargrad); transition: y 1.4s var(--ease), height 1.4s var(--ease); }
.budget-line { stroke: var(--code); stroke-width: 2; stroke-dasharray: 5 4; }
.budget-tag { fill: var(--code); font-size: 11px; font-weight: 700; }
.jar-note { color: var(--muted); font-size: 0.9rem; line-height: 1.6; max-width: 24ch; }
.jar-note b { color: var(--mint); }
.drop { fill: var(--mint); opacity: 0; }
.stop.in-view .drop { animation: dropIn .8s var(--ease) forwards; }
@keyframes dropIn { 0% { opacity: 0; transform: translateY(-60px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(0); } }
.drop.reject { fill: var(--muted); }
.stop.in-view .drop.reject { animation: dropReject 1.4s var(--ease) 1.2s forwards; }
@keyframes dropReject { 0% { opacity: 0; transform: translateY(-50px); } 30% { opacity: 0.9; transform: translateY(-6px); } 55% { transform: translateY(-26px) translateX(16px); } 100% { opacity: 0; transform: translateY(-60px) translateX(30px); } }

/* ---------- clock (step 8) ---------- */
.finale { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.clock-holder { position: relative; width: 200px; height: 200px; }
.clock { width: 200px; height: 200px; }
.clock-center { position: absolute; inset: 0; display: grid; place-items: center; }
.clock-track { fill: none; stroke: #08061c; stroke-width: 14; }
.clock-full, .clock-saved { --c: 502.65; }
.clock-full { fill: none; stroke: rgba(124,131,255,0.4); stroke-width: 14; stroke-linecap: round;
  stroke-dasharray: var(--c); stroke-dashoffset: var(--c); transition: stroke-dashoffset 1.4s var(--ease); }
.stop.in-view .clock-full { stroke-dashoffset: 0; }
.clock-saved { fill: none; stroke: var(--mint); stroke-width: 14; stroke-linecap: round;
  stroke-dasharray: var(--c); stroke-dashoffset: var(--c); transition: stroke-dashoffset 1.5s var(--ease) 1.4s; }
.stop.in-view .clock-saved { stroke-dashoffset: calc(var(--c) * 0.11); }
.clock-center { text-align: center; }
.clock-big { font-size: 1.5rem; font-weight: 800; color: var(--mint); font-variant-numeric: tabular-nums; }
.clock-small { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.finale-line { font-size: 1.05rem; color: var(--text); text-align: center; }
.finale-line b { color: var(--mint); }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.mini-chip { padding: 5px 11px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); transition: all .4s; }
.stop.in-view .mini-chip.keep { background: var(--mint-soft); border-color: var(--border-strong); color: var(--mint); }

/* ---------- closing CTA ---------- */
.cta { text-align: center; padding: 40px 0 10px; }
.cta a { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 14px;
  background: linear-gradient(120deg, var(--mint), var(--mint-2)); color: #04231a; font-weight: 800;
  text-decoration: none; box-shadow: 0 12px 34px -14px var(--mint); transition: transform .2s var(--ease); }
.cta a:hover { transform: translateY(-3px); }

/* ---------- responsive ---------- */
@media (max-width: 820px) {
  .stop { grid-template-columns: 1fr; gap: 22px; padding-left: 46px; }
  .stop:nth-child(even) { direction: ltr; }
  .stop-node { left: 22px; }
  .jar-wrap { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001s !important; }
  .stop-copy, .stop-stage { opacity: 1 !important; transform: none !important; }
}