/* The calculation story. The page thread hands off to this diagram on desktop;
   on small screens it runs through the five numbered stations directly. */
.engine { position:relative; background:transparent; }
.engine .sec-head { margin-bottom:clamp(40px,7vw,90px); }
.engine .lead { max-width:660px; }
.engine a { text-underline-offset:4px; }
.engine-journey { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(40px,6vw,90px); position:relative; }
.engine-column { position:relative; min-width:0; }
.engine-port { position:absolute; left:50%; width:1px; height:1px; pointer-events:none; }
.engine-port.inlet { top:0; }
.engine-port.outlet { bottom:0; }
.engine-spine { position:absolute; top:0; bottom:0; left:50%; width:1.5px; background:var(--line); }
.engine-spine::after { content:""; position:absolute; inset:0; background:var(--thread); transform:scaleY(var(--engine-progress,1)); transform-origin:top; }
.engine-instrument { position:sticky; top:max(24px,calc((100svh - 740px)/2)); margin:0; background:var(--bg); padding:24px 0 16px; }
.engine-instrument::before, .engine-instrument::after { content:""; position:absolute; left:50%; width:1.5px; background:var(--thread); }
.engine-instrument::before { top:0; height:24px; }
.engine-instrument::after { bottom:0; height:16px; background:var(--line); }
.engine-instrument.finished::after { background:var(--thread); }
.engine-art { display:block; width:100%; height:auto; max-height:calc(100svh - 115px); overflow:visible; color:var(--fg); }
.engine-art .construction { fill:none; stroke:var(--line); stroke-width:1; }
.engine-art .engraving { fill:none; stroke:var(--fg2); stroke-width:1; opacity:.35; }
.engine-art .wire-bed, .engine-art .wire { fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.engine-art .wire-bed { stroke:var(--line); }
.engine-art .wire { stroke:var(--thread); }
.engine-art .wire[data-wire] { stroke-dasharray:1; stroke-dashoffset:var(--wire-offset,0); }
.engine-art .shell { fill:var(--bg); stroke:var(--line); stroke-width:1.3; }
.engine-art .part { transition:opacity .25s ease; }
.engine-motion .engine-art .part { opacity:.45; }
.engine-motion .engine-art .part.on { opacity:1; }
.engine-art .part.on .shell { stroke:var(--thread); }
.engine-art .ink { fill:var(--fg); }
.engine-art .accent { fill:var(--thread); }
.engine-art text { font-family:var(--font-body); fill:var(--fg2); font-size:12px; text-anchor:middle; }
.engine-art .micro { font-size:10px; letter-spacing:1.7px; }
.engine-art .label { font-size:13px; font-weight:600; fill:var(--fg); }
.engine-art .brand { font-family:var(--font-heading); font-size:20px; letter-spacing:1px; fill:var(--fg); }
.engine-art .core-name { font-family:var(--font-heading); font-size:30px; fill:var(--fg); }
.engine-art .metric { font-family:var(--font-heading); font-size:24px; fill:var(--fg); }
.engine-art .halo { fill:color-mix(in srgb,var(--thread) 5%,var(--bg)); stroke:var(--line); }
.engine-art .return { stroke-dasharray:3 6; }
.engine-art .traveller { fill:var(--thread); }
.engine-instrument figcaption { position:absolute; top:22px; left:0; max-width:42%; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); line-height:1.6; }
.engine-instrument figcaption span { display:block; }
.engine-instrument .instrument-note { letter-spacing:0; text-transform:none; margin-top:4px; }
.engine-illustration-note { font-size:11px; color:var(--fg2); }
.engine-steps { list-style:none; min-width:0; }
.engine-step { position:relative; min-height:47svh; padding:clamp(40px,6vh,70px) 0; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.engine-step + .engine-step { border-top:1px solid var(--line); }
.engine-step-head { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.engine-station { display:grid; place-items:center; width:32px; height:32px; border:1px solid var(--line); background:var(--bg); border-radius:50%; color:var(--fg2); font-size:11px; font-weight:600; flex:none; }
.engine-step .eyebrow { font-size:10px; letter-spacing:.16em; }
.engine-step h3 { font-family:var(--font-heading); font-size:clamp(27px,3vw,40px); line-height:1.18; letter-spacing:-.025em; text-wrap:balance; }
.engine-step > p { margin-top:16px; font-size:17px; line-height:1.65; color:var(--fg2); max-width:430px; }
.engine-step.active .engine-station { border-color:var(--thread); background:var(--btn-bg); color:var(--btn-fg); }
.engine-step.active .eyebrow { color:var(--fg); }
.engine-step.complete .engine-station { border-color:var(--thread); }
.engine-step details { width:100%; margin-top:22px; color:var(--fg2); font-size:14px; line-height:1.7; }
.engine-step summary { cursor:pointer; font-size:13px; font-weight:600; padding:6px 0; color:var(--fg); }
.engine-step details p { margin-top:10px; }
.engine-rule-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.engine-rule-tags span { font-size:12px; border-bottom:1px solid var(--thread); padding:4px 0; margin-right:9px; color:var(--fg2); }
.engine-mini-wrap, .engine-mini { display:none; }
.engine-report { display:inline-flex; align-items:center; min-height:48px; margin-top:22px; padding:11px 18px; border-radius:12px; background:var(--btn-bg); color:var(--btn-fg); font-size:14px; font-weight:600; text-decoration:none; }
.engine-review-link { font-size:13px; margin-top:14px; color:var(--fg2); padding-block:5px; }
.engine-rollout { margin-top:70px; padding:26px 0; border-block:1px solid var(--line); }
.engine-rollout > .eyebrow { font-size:10px; }
.engine-status-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:22px; }
.engine-status-grid h3 { display:flex; align-items:center; gap:10px; font-size:14px; margin-bottom:8px; }
.engine-status-grid h3::before { content:""; width:7px; height:7px; border:1px solid var(--fg2); border-radius:50%; flex:none; }
.engine-status-grid .enabled h3::before { background:var(--thread); border-color:var(--thread); }
.engine-status-grid p, .engine-fallback { color:var(--fg2); font-size:13px; line-height:1.75; }
.engine-fallback { margin-top:16px; }
.engine-review { border-bottom:1px solid var(--line); }
.engine-review summary { cursor:pointer; padding:22px 0; font-size:15px; font-weight:600; }
.engine-review ol { padding:0 8px 24px 24px; color:var(--fg2); line-height:1.7; max-width:850px; font-size:14px; }
.engine-review li + li { margin-top:12px; }
.engine-review strong { color:var(--fg); }
.engine-limits { margin-top:24px; max-width:980px; font-size:12px; line-height:1.75; color:var(--fg2); }
.engine-limits p + p { margin-top:10px; }
html[data-lang="hi"] .engine-step h3 { letter-spacing:0; line-height:1.4; }
html[data-lang="hi"] .engine-art .micro { letter-spacing:0; }
html:not(.engine-motion) .engine-instrument { position:relative; top:0; }
html:not(.engine-motion) .engine-step { min-height:0; padding-block:32px; }
@media (min-width:1001px) and (max-height:680px) {
  .engine-instrument { top:12px; }
  .engine-instrument figcaption { max-width:30%; }
}
@media (max-width:1000px) {
  .engine .wrap { padding-left:52px; }
  .engine .sec-head { text-align:left; align-items:flex-start; margin-bottom:24px; }
  .engine .sec-head .lead { margin:0; }
  .engine .h2 { font-size:clamp(36px,7vw,64px); }
  .engine-journey { display:block; }
  .engine-column { display:none; }
  .engine-step, html:not(.engine-motion) .engine-step { min-height:0; padding:32px 0 42px; }
  .engine-step-head { margin-bottom:14px; min-height:30px; }
  .engine-station { position:absolute; left:-48px; top:32px; width:28px; height:28px; }
  .engine-step h3 { font-size:clamp(27px,5vw,36px); }
  .engine-step > p { font-size:16px; max-width:540px; }
  .engine-mini-wrap { display:block; position:relative; width:100%; max-width:330px; margin-top:22px; }
  .engine-mini-wrap::before { content:""; position:absolute; left:-34px; top:50%; width:34px; height:1.25px; background:var(--thread); transform:scaleX(var(--mini-progress,1)); transform-origin:left; }
  .engine-mini { display:block; width:100%; height:auto; color:var(--thread); overflow:visible; }
  .engine-mini .wire { fill:none; stroke:currentColor; stroke-width:1.25; }
  .engine-motion .engine-mini .wire { stroke-dasharray:1; stroke-dashoffset:var(--wire-offset,0); }
  .engine-mini .faint { fill:none; stroke:var(--line); stroke-width:1; }
  .engine-mini .fill { fill:var(--bg); stroke:currentColor; stroke-width:1.25; }
  .engine-mini text { fill:var(--fg2); font:11px var(--font-body); text-anchor:middle; }
  .engine-mini .strong { font:600 15px var(--font-heading); fill:var(--fg); }
  .engine-mini .accent { fill:currentColor; }
  .engine-status-grid { grid-template-columns:1fr; gap:22px; }
  .engine-rollout { margin-top:18px; }
}
@media (prefers-reduced-motion:reduce) {
  .engine-art .part { transition:none; opacity:1; }
  .engine-art .traveller { display:none; }
  .engine-spine::after { transform:none; }
}