/* /sutra/ story page. Builds on styles.css tokens; every colour comes from the
   theme variables, so ember, ivory and duo all work. Motion: transform, opacity
   and stroke-dashoffset only, eased calm (cubic-bezier(.2,.7,.2,1)). */

:root { --ease: cubic-bezier(.2,.7,.2,1); }

/* Scroll progress (top) */
.su-progress { position: fixed; z-index: 55; top: 0; left: 0; right: 0; height: 3px; pointer-events: none; }
.su-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--coral), var(--gold)); transform-origin: left; transform: scaleX(0); }

/* Chapter rail (desktop) */
.su-rail { position: fixed; z-index: 40; left: max(1rem, calc((100vw - 1400px) / 2)); top: 50%; translate: 0 -50%; display: none; }
@media (min-width: 1520px) { .su-rail { display: block; } }
.su-rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; border-left: 1px solid var(--line); }
.su-rail a { display: block; padding: 0.3rem 0 0.3rem 0.9rem; margin-left: -1px; border-left: 2px solid transparent; font: 0.72rem var(--font-mono); color: var(--muted); text-decoration: none; transition: color .3s, border-color .3s; }
.su-rail a b { color: var(--copper); font-weight: 500; margin-right: 0.35rem; }
.su-rail a:hover, .su-rail a.on { color: var(--text); border-left-color: var(--gold); }

.su-label { font: 500 0.74rem var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--copper); margin: 0 0 0.9rem; }
.su-sec { padding-block: clamp(4rem, 10vw, 7rem); border-top: 1px solid var(--line); }
.su-sec h2 { font-size: clamp(2.2rem, 5.4vw, 3.8rem); max-width: 18ch; }
.su-lede { max-width: 44rem; color: var(--muted); font-size: clamp(1.02rem, 2vw, 1.18rem); margin: 1.2rem 0 2.5rem; }
.su-fine { font-size: 0.8rem; color: var(--muted); margin: 0.8rem 0 0; }
.su-hint { color: var(--muted); font-size: 0.9rem; margin: 0.8rem 0 1.6rem; }
code { font-family: var(--font-mono); font-size: 0.86em; }

/* ---------- 00 Hero ---------- */
.su-hero { text-align: center; padding-block: clamp(3rem, 9vw, 6rem) clamp(3.5rem, 9vw, 6rem); position: relative; overflow: hidden;
  background: radial-gradient(60% 55% at 50% 30%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 70%); }
.su-hero h1 { font-size: clamp(4.5rem, 18vw, 12rem); line-height: 0.9; letter-spacing: -0.045em; }
.su-tagline { font: italic 400 clamp(1.3rem, 3.4vw, 2.1rem)/1.2 var(--font-accent); color: var(--gold); margin: 0.6rem auto 0; max-width: 26ch; }
[data-type="a"] .su-tagline, [data-type="c"] .su-tagline { font-style: normal; }
.su-meaning { color: var(--muted); margin: 0.9rem 0 0; font-size: 0.95rem; }
.su-weave { position: relative; max-width: 900px; height: clamp(140px, 22vw, 210px); margin: 2.2rem auto 1.6rem; }
.su-weave-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.su-weave-path { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease); }
.su-weave.drawn .su-weave-path { stroke-dashoffset: 0; }
.doc { position: absolute; display: grid; place-items: center; width: clamp(54px, 9vw, 86px); height: clamp(66px, 11vw, 104px); border-radius: 8px; border: 1px solid var(--line); background: var(--surface);
  font: 600 clamp(0.62rem, 1.4vw, 0.85rem) var(--font-mono); color: var(--text); box-shadow: 0 12px 30px -16px rgba(0,0,0,.5);
  transition: left 0.9s var(--ease), top 0.9s var(--ease), transform 0.9s var(--ease), border-color .9s; }
.doc::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 22%; height: 2px; border-radius: 2px; background: var(--line); box-shadow: 0 -6px 0 var(--line), 0 -12px 0 var(--line); }
.d1 { left: 6%;  top: 6%;  transform: rotate(-14deg); }
.d2 { left: 26%; top: 48%; transform: rotate(9deg); }
.d3 { left: 46%; top: 2%;  transform: rotate(-6deg); }
.d4 { left: 66%; top: 44%; transform: rotate(12deg); }
.d5 { left: 84%; top: 8%;  transform: rotate(-10deg); }
.su-weave.woven .doc { top: 26%; transform: none; border-color: var(--gold); transition-delay: calc(var(--k, 0) * 80ms); }
.su-weave.woven .d1 { left: 4%; --k: 0; } .su-weave.woven .d2 { left: 24%; --k: 1; } .su-weave.woven .d3 { left: 44%; --k: 2; } .su-weave.woven .d4 { left: 64%; --k: 3; } .su-weave.woven .d5 { left: 84%; --k: 4; }
.su-status { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.95rem; border: 1px solid var(--line); border-radius: 999px; font: 0.78rem var(--font-mono); color: var(--muted); background: var(--surface); }
.su-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); animation: ping 1.8s infinite; }
.su-hero-actions { justify-content: center; align-items: center; margin-top: 1.6rem; }
.su-link { font-weight: 600; text-decoration: none; padding-block: 0.35rem; }
.su-link:hover { text-decoration: underline; }

/* ---------- 01 Problem: scroll-scrubbed morph (--p from 0 to 1) ---------- */
.su-morph { --p: 0; display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem; align-items: center; }
@media (max-width: 768px) { .su-morph { grid-template-columns: 1fr; } .su-arrow { transform: rotate(90deg); justify-self: center; } }
.su-morph-tag { font: 500 0.7rem var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.8rem; }
.su-inbox { position: relative; min-height: 230px; padding: 1.2rem; border: 1px dashed var(--line); border-radius: 16px; opacity: calc(1 - var(--p) * 0.55); }
.mess { position: absolute; padding: 0.4rem 0.7rem; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); font: 0.74rem var(--font-mono); color: var(--muted); box-shadow: 0 8px 20px -14px rgba(0,0,0,.5);
  transform: translate(calc(var(--p) * var(--dx, 0px)), calc(var(--p) * var(--dy, 0px))) rotate(calc((1 - var(--p)) * var(--r, 0deg))); }
.m1 { left: 8%; top: 22%; --r: -9deg; --dx: 40px; } .m2 { left: 48%; top: 16%; --r: 7deg; --dx: -20px; } .m3 { left: 18%; top: 48%; --r: 12deg; --dx: 30px; } .m4 { left: 58%; top: 44%; --r: -6deg; }
.m5 { left: 6%; top: 74%; --r: 5deg; --dx: 50px; } .m6 { left: 46%; top: 72%; --r: -12deg; } .m7 { left: 74%; top: 26%; --r: 16deg; --dx: -30px; }
.su-arrow { font: 400 2rem var(--font-head); color: var(--gold); opacity: calc(0.3 + var(--p) * 0.7); }
.su-check { padding: 1.2rem 1.3rem; border: 1px solid var(--gold); border-radius: 16px; background: var(--surface); opacity: calc(0.25 + var(--p) * 0.75); transform: translateY(calc((1 - var(--p)) * 18px)); }
.su-check ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.su-check li { display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; align-items: baseline; font-size: 0.95rem; }
.ok, .warn { font: 600 0.7rem var(--font-mono); padding: 0.15rem 0.5rem; border-radius: 999px; }
.ok { background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--text); }
.warn { background: color-mix(in srgb, var(--coral) 20%, transparent); color: var(--text); }

/* ---------- 02 Pipeline ---------- */
.su-flow { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.9rem; position: relative; counter-reset: s; }
.su-flow::before { content: ""; position: absolute; left: 4%; right: 4%; top: 30px; height: 2px; background: linear-gradient(90deg, var(--coral), var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease); }
.su-flow.in::before { transform: scaleX(1); }
.su-flow li { position: relative; padding: 0.2rem 0.4rem 0.6rem; opacity: 0.25; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i) * 180ms + 200ms); }
.su-flow.in li { opacity: 1; transform: none; }
.su-flow .n { position: relative; z-index: 1; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--bg); border: 2px solid var(--gold); font: 500 1.4rem var(--font-head); color: var(--gold); margin-bottom: 0.9rem; }
.su-flow b { display: block; font: 700 1.1rem var(--font-head); margin-bottom: 0.3rem; }
.su-flow p { margin: 0 0 0.6rem; color: var(--muted); font-size: 0.88rem; line-height: 1.5; }
@media (max-width: 900px) {
  .su-flow { grid-template-columns: 1fr; gap: 0; }
  .su-flow::before { left: 29px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; transform: scaleY(0); transform-origin: top; background: linear-gradient(180deg, var(--coral), var(--gold)); }
  .su-flow.in::before { transform: scaleY(1); }
  .su-flow li { display: grid; grid-template-columns: 60px 1fr; column-gap: 1rem; padding-bottom: 1.4rem; }
  .su-flow .n { grid-row: span 3; margin: 0; }
}
.chip-s { display: inline-block; font: 600 0.64rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 0.15rem 0.55rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.chip-s.built { background: var(--gold); border-color: var(--gold); color: var(--bg); }
.chip-s.next { border-color: var(--coral); color: var(--text); }
.chip-s.planned { border-style: dashed; }
[data-theme="ivory"] .chip-s.built, [data-theme="duo"] .duo-light .chip-s.built { color: #fff; }

/* ---------- 03 Journey: thread spine fills with scroll ---------- */
.su-journey { --p: 0; position: relative; margin-top: 2.5rem; padding-left: 2.6rem; }
.su-spine { position: absolute; left: 11px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.su-spine span { display: block; width: 100%; height: 100%; background: linear-gradient(180deg, var(--coral), var(--gold)); transform-origin: top; transform: scaleY(var(--p)); }
.su-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
.su-m { position: relative; padding: 1.3rem 1.4rem; border-radius: 16px; background: var(--surface); border: 1px dashed var(--line); opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.su-m.in { opacity: 1; transform: none; }
.su-m::before { content: ""; position: absolute; left: calc(-2.6rem + 4px); top: 1.55rem; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px dashed var(--muted); }
.su-m.done { border-style: solid; border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.su-m.done::before { background: var(--gold); border: 2px solid var(--gold); }
.su-m.next::before { border: 2px solid var(--coral); animation: ping 1.8s infinite; }
.su-m-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; margin: 0 0 0.8rem; }
.su-m-head b { font: 700 1.2rem var(--font-head); }
.su-m-head time { font: 0.75rem var(--font-mono); color: var(--muted); }
.su-m > p, .su-m > ul:not(.su-grid) { color: var(--muted); margin: 0; }
.su-m > ul:not(.su-grid) { padding-left: 1.1rem; }
.su-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.su-grid li { padding: 0.85rem 0.95rem; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--text) 3%, var(--surface)); color: var(--muted); font-size: 0.9rem; line-height: 1.5;
  opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.su-m.in .su-grid li { opacity: 1; transform: none; }
.su-m.in .su-grid li:nth-child(2) { transition-delay: 70ms; } .su-m.in .su-grid li:nth-child(3) { transition-delay: 140ms; } .su-m.in .su-grid li:nth-child(4) { transition-delay: 210ms; }
.su-m.in .su-grid li:nth-child(5) { transition-delay: 280ms; } .su-m.in .su-grid li:nth-child(6) { transition-delay: 350ms; } .su-m.in .su-grid li:nth-child(7) { transition-delay: 420ms; } .su-m.in .su-grid li:nth-child(8) { transition-delay: 490ms; }
.su-grid i { font-style: normal; margin-right: 0.35rem; }
.su-grid b { display: block; color: var(--text); font-weight: 600; margin-bottom: 0.15rem; }
.su-lesson { margin: 1rem 0 0; padding: 0.9rem 1.1rem; border-left: 3px solid var(--coral); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--coral) 10%, transparent); color: var(--text); font-size: 0.95rem; }
.su-lesson b { display: block; font: 600 0.68rem var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral); margin-bottom: 0.2rem; }

/* ---------- 04 Guardrails: cards stack in ---------- */
.su-guards { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.su-guards li { padding: 1.3rem; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(160deg, color-mix(in srgb, var(--text) 6%, var(--surface)), var(--surface));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent); opacity: 0; transform: translateY(30px) rotate(-2deg) scale(.97); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.su-guards.in li { opacity: 1; transform: none; }
.su-guards.in li:nth-child(2) { transition-delay: 80ms; } .su-guards.in li:nth-child(3) { transition-delay: 160ms; } .su-guards.in li:nth-child(4) { transition-delay: 240ms; } .su-guards.in li:nth-child(5) { transition-delay: 320ms; }
.su-guards i { font-style: normal; font-size: 1.5rem; }
.su-guards b { display: block; font: 700 1.1rem var(--font-head); margin: 0.6rem 0 0.3rem; }
.su-guards p { margin: 0 0 0.6rem; color: var(--muted); font-size: 0.9rem; }
.su-guards small { display: block; color: var(--copper); font-size: 0.8rem; }
.su-bottomline { margin: 2rem 0 0; padding: 1rem 1.2rem; border: 1px solid var(--gold); border-radius: 12px; font-weight: 600; text-align: center; }

/* ---------- 05 Architecture ---------- */
.su-arch { display: flex; align-items: center; gap: 0; flex-wrap: nowrap; }
.node { position: relative; flex: 0 1 auto; min-width: 0; padding: 0.8rem 0.9rem; border-radius: 12px; background: var(--surface); border: 1.5px solid var(--gold); color: var(--text); font: 600 0.86rem var(--font-body); text-align: center; cursor: pointer; line-height: 1.3;
  opacity: 0; transform: scale(.94); transition: opacity .6s var(--ease), transform .6s var(--ease), border-color .3s; }
.node small { display: block; font: 0.62rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 0.2rem; }
.node.planned { border-style: dashed; border-color: var(--muted); color: color-mix(in srgb, var(--text) 78%, transparent); }
.node.human { border-color: var(--coral); }
.su-arch.in .node { opacity: 1; transform: none; }
.wire { flex: 1 1 16px; min-width: 12px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.su-arch.in .wire { transform: scaleX(1); }
.su-arch.in > :nth-child(2), .su-arch.in .azure-row > :nth-child(2) { transition-delay: .15s; }
.su-arch.in .azure-row > :nth-child(3) { transition-delay: .3s; } .su-arch.in .azure-row > :nth-child(4) { transition-delay: .45s; } .su-arch.in .azure-row > :nth-child(5) { transition-delay: .6s; }
.su-arch.in .azure-row > :nth-child(6) { transition-delay: .75s; } .su-arch.in .azure-row > :nth-child(7) { transition-delay: .9s; }
.su-arch.in > :nth-child(4), .su-arch.in > :nth-child(5) { transition-delay: 1.05s; } .su-arch.in > :nth-child(6), .su-arch.in > :nth-child(7) { transition-delay: 1.2s; }
.azure { flex: 4 1 auto; padding: 1.6rem 0.7rem 0.8rem; border: 1.5px dashed var(--copper); border-radius: 16px; position: relative; }
.azure-label { position: absolute; top: -0.7rem; left: 0.9rem; margin: 0; padding: 0 0.5rem; background: var(--bg); font: 600 0.68rem var(--font-mono); letter-spacing: 0.08em; color: var(--copper); }
.su-sec.duo-light .azure-label, [data-theme="ivory"] .azure-label { background: var(--bg); }
.azure-row { display: flex; align-items: center; }
.tip { position: absolute; z-index: 5; left: 50%; bottom: calc(100% + 10px); width: max-content; max-width: 240px; translate: -50% 6px; padding: 0.6rem 0.75rem; border-radius: 10px; background: var(--text); color: var(--bg);
  font: 400 0.8rem/1.45 var(--font-body); text-align: left; opacity: 0; pointer-events: none; transition: opacity .2s, translate .2s; }
.node:hover .tip, .node:focus-visible .tip, .node.open .tip { opacity: 1; translate: -50% 0; }
@media (max-width: 1000px) {
  .su-arch, .azure-row { flex-direction: column; align-items: stretch; }
  .wire { flex: 0 0 22px; width: 2px; height: 22px; align-self: center; transform: scaleY(0); transform-origin: top; }
  .su-arch.in .wire { transform: scaleY(1); }
  .tip { left: 50%; bottom: auto; top: calc(100% + 8px); }
}
.su-platform { margin-top: 2rem; }
.su-platform ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.su-platform li { padding: 0.8rem 1rem; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font: 0.78rem var(--font-mono); color: var(--muted); }
.su-platform b { display: block; font: 700 1rem var(--font-head); color: var(--text); margin-bottom: 0.2rem; }

/* ---------- 06 Star schema ---------- */
.su-star { position: relative; max-width: 760px; margin: 2.2rem auto 0; height: 340px; }
.su-star-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.su-star-lines line { stroke: var(--gold); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 1s var(--ease) .5s; }
.su-star.in .su-star-lines line { stroke-dashoffset: 0; }
.tbl { position: absolute; translate: -50% -50%; padding: 0.75rem 1rem; border-radius: 10px; border: 1.5px solid var(--gold); background: var(--surface); color: var(--text); font: 600 clamp(0.66rem, 1.6vw, 0.86rem) var(--font-mono); cursor: pointer;
  opacity: 0; transition: opacity .7s var(--ease), transform .7s var(--ease), box-shadow .3s; }
.tbl.fact { background: color-mix(in srgb, var(--gold) 16%, var(--surface)); border-width: 2px; }
.tbl:hover, .tbl:focus-visible { box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 25%, transparent); }
.t0 { left: 50%; top: 40%; } .t1 { left: 16%; top: 12%; transform: translate(-60px, -40px); } .t2 { left: 84%; top: 12%; transform: translate(60px, -40px); }
.t3 { left: 16%; top: 68%; transform: translate(-60px, 40px); } .t4 { left: 84%; top: 68%; transform: translate(60px, 40px); } .t5 { left: 50%; top: 90%; transform: translateY(40px); }
.su-star.in .tbl { opacity: 1; transform: none; }
.su-star.in .t1 { transition-delay: .1s; } .su-star.in .t2 { transition-delay: .2s; } .su-star.in .t3 { transition-delay: .3s; } .su-star.in .t4 { transition-delay: .4s; } .su-star.in .t5 { transition-delay: .6s; }
.su-grain { text-align: center; min-height: 1.6em; margin: 1.2rem 0 0.8rem; color: var(--text); }
.su-json { display: block; width: max-content; max-width: 100%; margin: 0 auto; padding: 0.7rem 1rem; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--gold); overflow-x: auto; }
.su-star + .su-grain + .su-json + .su-fine { text-align: center; }
@media (max-width: 600px) { .su-star { height: 300px; } .tbl { padding: 0.55rem 0.6rem; } }

/* ---------- 07 Honest results ---------- */
.su-honest { text-align: center; }
.su-honest h2 { margin-inline: auto; }
.su-dots { display: grid; grid-template-columns: repeat(20, 1fr); gap: 6px; max-width: 520px; margin: 2rem auto 0; }
.su-dots i { aspect-ratio: 1; border-radius: 50%; background: var(--line); transition: background .35s, transform .35s var(--ease); }
.su-dots i.flag { background: var(--coral); transform: scale(1.15); }
.su-dots i.grey { background: color-mix(in srgb, var(--muted) 45%, transparent); transform: scale(.85); }
.su-num { font-size: clamp(4rem, 14vw, 9rem); margin: 0.8rem 0 0.3rem; }

/* ---------- 08 Terminal + tiles ---------- */
.su-term { margin: 2rem 0 0; padding: 1.2rem 1.3rem; border-radius: 14px; background: #0f0b09; color: #e9dfcf; border: 1px solid #3a2c24; font: 0.84rem/1.7 var(--font-mono); overflow-x: auto; min-height: 9.5em; white-space: pre; box-shadow: 0 30px 60px -40px rgba(0,0,0,.8); }
.su-tiles { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); }
.su-tiles li { padding: 1.1rem; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.su-tiles.in li { opacity: 1; transform: none; }
.su-tiles.in li:nth-child(2) { transition-delay: 70ms; } .su-tiles.in li:nth-child(3) { transition-delay: 140ms; } .su-tiles.in li:nth-child(4) { transition-delay: 210ms; } .su-tiles.in li:nth-child(5) { transition-delay: 280ms; } .su-tiles.in li:nth-child(6) { transition-delay: 350ms; }
.su-tiles b { display: block; font: 500 2.2rem/1 var(--font-head); font-variant-numeric: tabular-nums; background: linear-gradient(120deg, var(--coral), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.su-tiles span { display: block; margin-top: 0.4rem; color: var(--muted); font-size: 0.86rem; }

/* ---------- 09 Stack ---------- */
.su-stack { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.55rem; }
.su-stack li { padding: 0.5rem 0.9rem; border-radius: 999px; border: 1.5px dashed var(--line); font: 500 0.82rem var(--font-mono); color: var(--muted); opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.su-stack li small { font-size: 0.66rem; opacity: .85; }
.su-stack li.built { border: 1.5px solid var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--surface)); color: var(--text); }
.su-stack.in li { opacity: 1; transform: none; }

/* ---------- 10 Business ---------- */
.su-core { margin: 2.2rem 0 0; display: grid; justify-items: center; gap: 1rem; opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.su-core.in { opacity: 1; transform: none; }
.core { padding: 1rem 2rem; border-radius: 14px; border: 2px solid var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--surface)); font: 600 1.1rem var(--font-mono); text-align: center; }
.core small, .packs small, .su-ladder small { display: block; font: 0.7rem var(--font-mono); color: var(--muted); margin-top: 0.2rem; }
.packs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; width: min(100%, 720px); position: relative; }
.packs li { padding: 0.8rem; border-radius: 12px; border: 1.5px dashed var(--line); text-align: center; font-weight: 600; background: var(--surface); }
.packs li.building { border: 1.5px solid var(--coral); }
@media (max-width: 600px) { .packs { grid-template-columns: repeat(2, 1fr); } }
.su-ladder { list-style: none; margin: 2.2rem auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; max-width: 720px; counter-reset: l; opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease) .2s, transform .7s var(--ease) .2s; }
.su-ladder.in { opacity: 1; transform: none; }
.su-ladder li { counter-increment: l; padding: 1rem; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); text-align: center; }
.su-ladder li::before { content: counter(l); display: block; font: 500 1.6rem var(--font-head); color: var(--gold); }
.su-ladder b { font: 700 1.02rem var(--font-head); }
@media (max-width: 600px) { .su-ladder { grid-template-columns: 1fr; } }
.su-coming { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin: 1.6rem 0 0; }

/* ---------- 11 Follow ---------- */
.su-follow { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0.6rem; max-width: 720px; }
.su-follow li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; padding: 0.85rem 1.1rem; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.su-follow a { font-weight: 600; text-decoration: none; padding-block: 0.3rem; }
.su-owner { max-width: 720px; margin: 1.6rem 0 0; padding: 1.2rem 1.3rem; border-radius: 14px; border: 1px solid var(--coral); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.8rem;
  background: color-mix(in srgb, var(--coral) 9%, var(--surface)); }
.su-owner p { margin: 0; }
.su-disclaimer { margin: 2.5rem 0 0; font-size: 0.8rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .su-weave-path, .doc, .su-flow li, .su-flow::before, .su-m, .su-grid li, .su-guards li, .node, .wire, .su-star-lines line, .tbl, .su-tiles li, .su-stack li, .su-core, .su-ladder, .su-dots i { transition: none !important; }
  .su-status .dot { animation: none; }
}

/* Phones: the star becomes a tidy grid (fact on top, dimensions 2×2, engagement below) */
.su-star { overflow-x: clip; }
@media (max-width: 680px) {
  .su-star { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .su-star-lines { display: none; }
  .tbl { position: static; translate: none; transform: translateY(14px); width: 100%; overflow-wrap: anywhere; }
  .su-star.in .tbl { transform: none; }
  .t0 { grid-column: 1 / -1; order: -1; } .t5 { grid-column: 1 / -1; }
}

/* =====================================================================
   Explainer "film": six scenes drawn in HTML/CSS so it always matches the
   visitor's theme and fonts. JS adds .on to the active scene.
   ===================================================================== */
.su-film-sec { padding-block: 0 clamp(3.5rem, 8vw, 6rem); }
.su-film { margin: 0; }
.sf-stage { position: relative; aspect-ratio: 16 / 8.2; min-height: 340px; border-radius: 22px; overflow: hidden; border: 1px solid var(--line);
  background: radial-gradient(80% 90% at 50% 0%, color-mix(in srgb, var(--gold) 13%, transparent), transparent 70%), var(--surface);
  box-shadow: 0 40px 80px -50px rgba(0,0,0,.65), inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent); }
@media (max-width: 700px) { .sf-stage { aspect-ratio: 4 / 5; min-height: 0; } }
.sf-glow { position: absolute; width: 50%; aspect-ratio: 1; left: 25%; top: 10%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--coral) 16%, transparent), transparent); filter: blur(20px); }
.sf-step { position: absolute; z-index: 3; top: 1rem; left: 1.2rem; margin: 0; font: 500 0.72rem var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.sf-step b { color: var(--gold); font-weight: 600; }
.sf-scene { position: absolute; inset: 3rem 1.2rem 2.4rem; display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 4vw, 3rem); opacity: 0; transform: scale(.97); transition: opacity .5s var(--ease), transform .7s var(--ease); pointer-events: none; }
.sf-scene.on { opacity: 1; transform: none; }
@media (max-width: 700px) { .sf-scene { flex-direction: column; inset: 2.8rem 1rem 2.2rem; } }

/* shared bits */
.sf-doc { display: grid; place-items: center; width: clamp(56px, 8vw, 84px); height: clamp(70px, 10vw, 104px); border-radius: 9px; background: var(--bg); border: 1.5px solid var(--gold); font: 700 clamp(0.7rem, 1.4vw, 0.9rem) var(--font-mono); color: var(--text); box-shadow: 0 14px 30px -18px rgba(0,0,0,.6); }
@keyframes sf-fly { 0% { opacity: 0; transform: translate(-180px, var(--y, 0)) rotate(-18deg); } 60% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x, 120px), 0) scale(.4); } }
@keyframes sf-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sf-pop { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes sf-scan { from { top: 8%; } to { top: 88%; } }
@keyframes sf-blink { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--coral) 60%, transparent); } 50% { box-shadow: 0 0 0 8px transparent; } }
@keyframes sf-press { 0%, 60% { transform: none; } 70% { transform: scale(.94); } 100% { transform: none; } }

/* 1 upload: slips fly into the box, bar fills */
.s1 { justify-content: center; }
.sf-box { position: relative; z-index: 2; display: grid; justify-items: center; gap: 0.6rem; padding: 1.6rem 2.2rem 1.4rem; border-radius: 18px; border: 2px dashed var(--gold); background: color-mix(in srgb, var(--bg) 70%, transparent); font-weight: 600; }
.sf-ico { font-size: 1.8rem; color: var(--gold); }
.sf-bar { display: block; width: 180px; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.sf-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--coral), var(--gold)); transform-origin: left; transform: scaleX(0); }
.s1.on .sf-bar i { animation: sf-fill 3.2s var(--ease) .4s forwards; }
.s1 .sf-doc { position: absolute; left: 50%; top: 50%; margin: -52px 0 0 -42px; opacity: 0; }
.s1.on .fd1 { --y: -60px; animation: sf-fly 1.3s var(--ease) .2s both; } .s1.on .fd2 { --y: 40px; animation: sf-fly 1.3s var(--ease) .9s both; }
.s1.on .fd3 { --y: -20px; animation: sf-fly 1.3s var(--ease) 1.6s both; } .s1.on .fd4 { --y: 70px; animation: sf-fly 1.3s var(--ease) 2.3s both; }
@media (max-width: 700px) { .s1 .sf-doc { --x: 40px; } }

/* 2 read: scan line sweeps a slip, fields pop out */
.sf-paper { position: relative; width: clamp(170px, 24vw, 240px); padding: 1.1rem; border-radius: 12px; background: var(--bg); border: 1.5px solid var(--line); overflow: hidden; }
.sf-paper b { display: block; font: 700 1.6rem var(--font-head); color: var(--gold); }
.sf-paper span { display: block; font-size: 0.72rem; color: var(--muted); margin-bottom: 0.8rem; }
.sf-paper .l { display: block; height: 8px; margin: 0.45rem 0; border-radius: 4px; background: var(--line); }
.sf-paper .l.short { width: 60%; }
.sf-scan { position: absolute; left: 0; right: 0; height: 3px; top: 8%; background: var(--coral); box-shadow: 0 0 18px 4px color-mix(in srgb, var(--coral) 50%, transparent); }
.s2.on .sf-scan { animation: sf-scan 1.6s ease-in-out .2s 2 alternate; }
.sf-fields { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.sf-fields li { padding: 0.55rem 0.9rem; border-radius: 10px; border: 1px solid var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--surface)); font: 600 0.92rem var(--font-mono); opacity: 0; }
.sf-fields b { display: inline-block; min-width: 5.5em; color: var(--muted); font-weight: 500; }
.s2.on .sf-fields li { animation: sf-pop .6s var(--ease-out, var(--ease)) both; }
.s2.on .sf-fields li:nth-child(1) { animation-delay: 1s; } .s2.on .sf-fields li:nth-child(2) { animation-delay: 1.5s; } .s2.on .sf-fields li:nth-child(3) { animation-delay: 2s; }

/* 3 store: rows drop into a Canadian table */
.sf-table { width: min(100%, 420px); border-radius: 14px; border: 1.5px solid var(--gold); background: var(--bg); overflow: hidden; }
.sf-flag { margin: 0; padding: 0.55rem 0.9rem; font: 600 0.74rem var(--font-mono); letter-spacing: 0.06em; color: var(--copper); border-bottom: 1px solid var(--line); }
.sf-table .r { display: grid; grid-template-columns: 1.2fr 1fr .7fr; padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--line); font: 0.86rem var(--font-mono); }
.sf-table .r.h { color: var(--muted); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
.sf-table .r:not(.h) { opacity: 0; }
.s3.on .r:not(.h) { animation: sf-pop .5s var(--ease) both; }
.s3.on .r:nth-of-type(3) { animation-delay: .3s; } .s3.on .r:nth-of-type(4) { animation-delay: .8s; } .s3.on .r:nth-of-type(5) { animation-delay: 1.3s; } .s3.on .r:nth-of-type(6) { animation-delay: 1.8s; }

/* 4 compare: two years side by side, the gap blinks */
.sf-col { display: grid; gap: 0.5rem; min-width: 150px; padding: 1rem; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); }
.sf-col p { margin: 0 0 0.2rem; font: 600 0.72rem var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.sf-col span { padding: 0.45rem 0.7rem; border-radius: 8px; border: 1px solid var(--gold); font: 600 0.88rem var(--font-mono); opacity: 0; }
.s4.on .sf-col span { animation: sf-pop .5s var(--ease) both; }
.s4.on .sf-col:last-child span:nth-of-type(1) { animation-delay: .6s; } .s4.on .sf-col:last-child span:nth-of-type(2) { animation-delay: 1.2s; } .s4.on .sf-col:last-child span:nth-of-type(3) { animation-delay: 1s; }
.sf-col .miss { border: 1.5px dashed var(--coral); color: var(--text); background: color-mix(in srgb, var(--coral) 14%, transparent); }
.s4.on .miss { animation: sf-pop .5s var(--ease) 1.2s both, sf-blink 1.2s ease-in-out 1.8s 3 !important; }
.sf-vs { font: italic 400 1.6rem var(--font-accent); color: var(--gold); }

/* 5 ask: question, then Claude's answer */
.sf-chat { display: grid; gap: 0.8rem; width: min(100%, 460px); }
.sf-chat p { margin: 0; padding: 0.9rem 1.1rem; border-radius: 16px; opacity: 0; }
.sf-chat .q { justify-self: end; background: var(--coral); color: var(--on-coral); font-weight: 600; border-bottom-right-radius: 4px; }
.sf-chat .a { justify-self: start; background: var(--bg); border: 1px solid var(--gold); border-bottom-left-radius: 4px; line-height: 1.6; }
.sf-chat .a span { display: block; margin-top: 0.4rem; font: 0.78rem var(--font-mono); color: var(--copper); }
.s5.on .q { animation: sf-pop .5s var(--ease) .3s both; } .s5.on .a { animation: sf-pop .6s var(--ease) 1.4s both; }

/* 6 approve: a person presses approve, it's sent */
.s6 { flex-direction: column; gap: 1rem; }
.sf-mail { position: relative; width: min(100%, 420px); padding: 1.1rem 1.2rem; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); }
.sf-mail .to { margin: 0 0 0.4rem; font: 0.74rem var(--font-mono); color: var(--muted); }
.sf-mail .body { margin: 0 0 1rem; }
.sf-btn { display: inline-block; padding: 0.55rem 1rem; border-radius: 99px; background: var(--coral); color: var(--on-coral); font-weight: 600; font-size: 0.9rem; }
.s6.on .sf-btn { animation: sf-press 1.6s var(--ease) .6s both; }
.sf-sent { position: absolute; right: 1.1rem; bottom: 1.15rem; padding: 0.35rem 0.8rem; border-radius: 99px; background: var(--gold); color: var(--bg); font: 700 0.8rem var(--font-mono); opacity: 0; }
.s6.on .sf-sent { animation: sf-pop .5s var(--ease) 1.7s both; }
.sf-note { margin: 0; font-size: 0.85rem; color: var(--muted); text-align: center; opacity: 0; }
.s6.on .sf-note { animation: sf-pop .6s var(--ease) 2.3s both; }

/* timeline + caption + controls */
.sf-progress { position: absolute; z-index: 3; left: 1.2rem; right: 1.2rem; bottom: 1rem; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.sf-progress i { height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; position: relative; }
.sf-progress i::after { content: ""; position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: left; }
.sf-progress i.done::after { transform: scaleX(1); }
.sf-progress i.now::after { animation: sf-fill var(--dur, 4.6s) linear forwards; }
.su-film.paused .sf-progress i.now::after { animation-play-state: paused; }
.sf-cap { margin: 1.2rem 0 0; text-align: center; min-height: 2.6em; font: 500 clamp(1.25rem, 3vw, 1.9rem)/1.25 var(--font-head); letter-spacing: -0.01em; }
.sf-cap-text { display: inline-block; animation: sf-pop .6s var(--ease) both; }
.sf-controls { display: flex; justify-content: center; align-items: center; gap: 0.8rem; margin-top: 0.8rem; }
.sf-play { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--gold); background: none; color: var(--gold); cursor: pointer; font-size: 0.8rem; }
.sf-dots { list-style: none; display: flex; gap: 0.35rem; margin: 0; padding: 0; }
.sf-dots button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--muted); font: 600 0.72rem var(--font-mono); cursor: pointer; }
.sf-dots button[aria-current="true"] { background: var(--gold); border-color: var(--gold); color: var(--bg); }

/* Reduced motion: no autoplay; the six scenes become a static storyboard */
@media (prefers-reduced-motion: reduce) {
  .sf-stage { aspect-ratio: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1rem; padding: 3rem 1rem 1rem; }
  .sf-scene { position: static; opacity: 1; transform: none; flex-direction: column; min-height: 230px; }
  .sf-scene *, .sf-scene *::after { animation: none !important; opacity: 1 !important; }
  .s1 .sf-doc { display: none; } .sf-bar i { transform: none; } .sf-scan { display: none; } .sf-progress, .sf-controls, .sf-cap { display: none; }
}
/* Bigger scene content on wide screens so the film reads from across the room */
@media (min-width: 1000px) { .sf-stage { aspect-ratio: 16 / 7.6; } .sf-scene > * { zoom: 1.32; } }
@media (min-width: 1400px) { .sf-scene > * { zoom: 1.5; } }
@media (prefers-reduced-motion: reduce) { .sf-scene > * { zoom: 1; } }

/* Back to the original Sutra measure so the chapter rail never touches the text */
main.sutra .wrap { max-width: 1160px; }
@media (min-width: 1520px) and (max-width: 1599px) { .su-rail a { font-size: 0.66rem; } }