/* The Next Dollar (90 sec) — /animation/shopify. Paper tone, ink, one accent for
 * the platform number (amber) and one for the bank-account number (teal).
 * The stage is a fixed 1920×1080 (or 1080×1920) coordinate box scaled to fit. */
:root{--nd-paper:#f3f5f1;--nd-paper-2:#e9efea;--nd-ink:#10201f;--nd-muted:#3a4a48;--nd-line:#c5d0ce;--nd-teal:#0b6b60;--nd-teal-2:#15373b;--nd-amber:#b7791f;--nd-amber-2:#7a4e00;--nd-sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;--nd-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--nd-serif:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif}
html{scroll-behavior:smooth}
body.nd-page{margin:0;background:var(--nd-paper);color:var(--nd-ink);font:16px/1.6 var(--nd-sans)}
.nd-main{max-width:1200px;margin:0 auto;padding:32px 24px 64px}
.nd-head h1{font-family:var(--nd-serif);font-weight:400;font-size:clamp(28px,3.6vw,44px);line-height:1.1;letter-spacing:-.8px;margin:8px 0 14px;max-width:24ch}
.nd-kicker{margin:0;font-family:var(--nd-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--nd-teal)}
.nd-lede{color:var(--nd-muted);max-width:68ch;margin:0 0 18px}
.nd-lede a,.nd-foot a{color:var(--nd-teal);text-decoration:underline;text-underline-offset:3px}
.nd-controls{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px}
.nd-btn{font:700 13px/1 var(--nd-sans);padding:11px 14px;border:1px solid var(--nd-teal-2);background:var(--nd-teal-2);color:#fff;cursor:pointer;text-decoration:none;border-radius:3px}
.nd-btn-link{background:transparent;color:var(--nd-teal-2)}
.nd-btn[aria-pressed="true"]{background:var(--nd-teal);border-color:var(--nd-teal)}
.nd-stage-wrap{position:relative;width:100%;overflow:hidden;background:var(--nd-ink);border:1px solid var(--nd-line)}
.nd-stage-wrap[data-orient="portrait"]{max-width:540px;margin:0 auto}
.nd-stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;background:var(--nd-paper);color:var(--nd-ink);font-family:var(--nd-sans);overflow:hidden}
.nd-stage-wrap[data-orient="portrait"] .nd-stage{width:1080px;height:1920px}
.nd-scene{position:absolute;inset:0;opacity:0;padding:120px 160px 220px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;transition:opacity .4s}
.nd-stage-wrap[data-orient="portrait"] .nd-scene{padding:160px 90px 320px}
.nd-scene.is-active{opacity:1}
.nd-chip{display:inline-block;font:700 18px/1.2 var(--nd-mono);letter-spacing:.12em;text-transform:uppercase;padding:8px 14px;border:2px solid var(--nd-amber-2);color:var(--nd-amber-2);border-radius:4px;background:#fff3cf}
.nd-chip-fixed{position:absolute;top:44px;right:60px;z-index:5}
.nd-label{font-family:var(--nd-mono);font-size:30px;letter-spacing:.08em;text-transform:uppercase;color:var(--nd-muted);margin:0 0 10px}
.nd-big{font-family:var(--nd-serif);font-size:300px;line-height:1;letter-spacing:-10px;margin:0;font-variant-numeric:tabular-nums;transition:opacity .3s}
.nd-platform{color:var(--nd-amber);transform-origin:0 50%}
.nd-platform.is-outline{color:transparent;-webkit-text-stroke:4px var(--nd-amber)}
.nd-real{color:var(--nd-teal)}
.nd-label-2{margin-top:30px}
.nd-s1{justify-content:flex-start;padding-top:160px}
.nd-stage-wrap[data-orient="portrait"] .nd-big{font-size:220px;letter-spacing:-6px}
/* 2 · waterfall */
.nd-waterfall{position:relative;display:flex;align-items:flex-end;gap:28px;height:560px;margin-top:40px}
.nd-bar{position:relative;flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.nd-bar i{display:block;width:100%;background:var(--nd-teal-2);transform-origin:50% 100%;transform:scaleY(0);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.nd-bar[data-kind="gross"] i{background:var(--nd-amber)}
.nd-bar[data-kind="partition"] i{background:#cfd9d2;border:3px dashed var(--nd-muted);box-sizing:border-box}
.nd-bar[data-kind="cost"] i{background:var(--nd-teal-2)}
.nd-bar[data-kind="net"] i{background:var(--nd-teal)}
.nd-bar.is-in i{transform:scaleY(1)}
.nd-bar[data-kind="partition"].is-in{transform:translateX(18px)}
.nd-bar b{display:block;font:700 26px/1.2 var(--nd-mono);margin-bottom:10px;white-space:nowrap}
.nd-bar small{display:block;font:20px/1.3 var(--nd-sans);color:var(--nd-muted);margin-top:12px;min-height:52px}
.nd-stage-wrap[data-orient="portrait"] .nd-waterfall{flex-direction:column;align-items:stretch;height:auto;gap:14px}
.nd-stage-wrap[data-orient="portrait"] .nd-bar{flex-direction:row;align-items:center;gap:16px;height:84px}
.nd-stage-wrap[data-orient="portrait"] .nd-bar i{height:100%;width:var(--w,50%);transform-origin:0 50%;transform:scaleX(0)}
.nd-stage-wrap[data-orient="portrait"] .nd-bar.is-in i{transform:scaleX(1)}
.nd-stage-wrap[data-orient="portrait"] .nd-bar b,.nd-stage-wrap[data-orient="portrait"] .nd-bar small{margin:0;min-height:0}
.nd-stage-wrap[data-orient="portrait"] .nd-bar[data-kind="partition"].is-in{transform:translateY(0) translateX(24px)}
/* 3 · sense */
.nd-sense{position:relative;display:grid;grid-template-columns:420px 1fr 420px;align-items:center;gap:40px;margin-top:30px;min-height:560px}
.nd-lines{display:none}
.nd-store{text-align:center;font:700 26px/1.2 var(--nd-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--nd-teal-2)}
.nd-store svg{width:100%;height:auto;fill:none;stroke:var(--nd-teal-2);stroke-width:5;stroke-linejoin:round}
.nd-pulses{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px}
.nd-pulses li{position:relative;font:700 30px/1.2 var(--nd-mono);letter-spacing:.06em;color:var(--nd-ink);padding:14px 22px 14px 56px;border:2px solid var(--nd-line);background:#fff;overflow:hidden}
.nd-pulses li::after{content:'';position:absolute;left:14px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:var(--nd-teal);transform:translateX(calc(var(--p,0) * 1100%));opacity:.9}
.nd-pulses li:not([data-reach])::before{content:'';position:absolute;right:0;top:0;bottom:0;width:4px;border-left:4px dotted var(--nd-amber)}
.nd-tiles{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px}
.nd-tiles li{font:700 28px/1.2 var(--nd-sans);padding:40px 22px;border:2px solid var(--nd-line);background:var(--nd-paper-2);color:var(--nd-muted);text-align:center}
.nd-stage-wrap[data-orient="portrait"] .nd-sense{grid-template-columns:1fr;gap:28px}
.nd-stage-wrap[data-orient="portrait"] .nd-tiles{flex-direction:row}
.nd-stage-wrap[data-orient="portrait"] .nd-tiles li{flex:1;padding:16px 10px;font-size:20px}
/* 4 · ring */
.nd-ring{position:relative;width:760px;height:760px;margin:0 auto}
.nd-stage-wrap[data-orient="portrait"] .nd-ring{width:900px;height:900px}
.nd-ring svg{position:absolute;inset:0;width:100%;height:100%}
.nd-ring-track{fill:none;stroke:var(--nd-line);stroke-width:6}
.nd-ring-dot{fill:var(--nd-amber)}
.nd-nodes{list-style:none;margin:0;padding:0}
.nd-nodes li{position:absolute;width:190px;margin:-30px 0 0 -95px;text-align:center;font:700 30px/60px var(--nd-mono);letter-spacing:.1em;text-transform:uppercase;background:#fff;border:3px solid var(--nd-line);color:var(--nd-muted);transition:all .3s}
.nd-nodes li[data-lock]::after{content:' 🔒';font-size:24px}
.nd-nodes li.is-lit{border-color:var(--nd-teal);color:var(--nd-teal-2);box-shadow:0 0 0 8px rgba(11,107,96,.15)}
.nd-ring-caption{position:absolute;left:50%;top:50%;width:360px;transform:translate(-50%,-50%);text-align:center;font-family:var(--nd-serif);font-size:40px;line-height:1.2;margin:0;color:var(--nd-ink)}
/* 5 · trace */
.nd-trace{max-width:1400px;margin:0 auto;width:100%}
.nd-trace-head{display:flex;justify-content:space-between;align-items:center;font:700 30px/1.2 var(--nd-mono);letter-spacing:.1em;margin:0 0 18px}
.nd-trace-rows{list-style:none;margin:0;padding:0;border:3px solid var(--nd-line);background:#fff}
.nd-trace-rows li{display:grid;grid-template-columns:300px 1fr;gap:30px;padding:22px 36px;border-top:2px solid var(--nd-line);font-size:32px;line-height:1.3;opacity:0;transform:translateY(16px);transition:all .35s}
.nd-trace-rows li:first-child{border-top:0}
.nd-trace-rows li.is-in{opacity:1;transform:none}
.nd-trace-rows b{font:700 24px/1.4 var(--nd-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--nd-teal)}
.nd-trace-rows .nd-outcome{background:#e0e9dd}
.nd-checks i{display:inline-block;width:34px;height:34px;margin-right:8px;border:3px solid var(--nd-line);vertical-align:middle;border-radius:4px;position:relative}
.nd-checks i.is-on{border-color:var(--nd-teal);background:var(--nd-teal)}
.nd-checks i.is-on::after{content:'✓';position:absolute;inset:0;color:#fff;font:700 24px/30px var(--nd-sans);text-align:center}
.nd-rollback{display:inline-block;margin-left:18px;font:700 22px/1.2 var(--nd-mono);padding:6px 12px;border:2px solid var(--nd-amber-2);color:var(--nd-amber-2);background:#fff3cf;border-radius:4px;opacity:0;transition:opacity .3s}
.nd-rollback.is-on{opacity:1}
.nd-stage-wrap[data-orient="portrait"] .nd-trace-rows li{grid-template-columns:1fr;gap:6px;font-size:28px}
/* 6 · phases */
.nd-phases{list-style:none;margin:30px 0 0;padding:0;display:flex;gap:24px}
.nd-phases li{position:relative;flex:1;padding:36px 30px;border:3px solid var(--nd-line);background:#fff;overflow:hidden}
.nd-phases li::before{content:'';position:absolute;inset:0;background:var(--nd-teal);transform:scaleX(var(--f,0));transform-origin:0 50%;transition:transform .5s;opacity:.18}
.nd-phases li[data-p="2"].is-outlined{border-color:var(--nd-amber);border-style:dashed}
.nd-phases li[data-p="2"].is-approved{border-color:var(--nd-teal);border-style:solid}
.nd-phases b{display:block;font:700 40px/1.2 var(--nd-mono);letter-spacing:.06em;margin-bottom:10px;position:relative}
.nd-phases span{display:block;font-size:28px;color:var(--nd-muted);position:relative}
.nd-cursor{position:absolute;right:26px;top:14px;font-size:64px;font-style:normal;opacity:0;transition:opacity .3s}
.nd-cursor.is-on{opacity:1}
.nd-stage-wrap[data-orient="portrait"] .nd-phases{flex-direction:column}
/* 7 · status */
.nd-s7{align-items:center;text-align:center}
.nd-wordmark{font:500 120px/1 var(--nd-mono);letter-spacing:.08em;margin:0 0 30px}
.nd-wordmark span{color:var(--nd-teal);font-size:60px;vertical-align:middle}
.nd-status-line{font:700 44px/1.3 var(--nd-mono);letter-spacing:.1em;text-transform:uppercase;margin:0 0 40px}
.nd-status{display:inline-block;padding:6px 20px;border:4px solid var(--nd-teal);color:var(--nd-teal);border-radius:6px}
.nd-cta{font-size:36px;margin:0 0 18px}
.nd-fine{font-size:26px;color:var(--nd-muted);margin:0}
/* captions and progress */
.nd-caption{position:absolute;left:0;right:0;bottom:70px;margin:0 auto;max-width:1500px;text-align:center;font:600 54px/1.25 var(--nd-sans);color:#fff;background:rgba(16,32,31,.92);padding:22px 48px;box-sizing:border-box;border-radius:10px}
.nd-stage-wrap[data-orient="portrait"] .nd-caption{font-size:46px;bottom:140px;max-width:960px}
.nd-progress{position:absolute;left:0;right:0;bottom:0;height:10px;background:var(--nd-line)}
.nd-progress i{display:block;height:100%;width:0;background:var(--nd-teal)}
/* strip (reduced motion / still) */
.nd-strip{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.nd-strip li{background:#fff;border:1px solid var(--nd-line);padding:16px}
.nd-strip b{display:block;font:700 12px/1.4 var(--nd-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--nd-teal);margin-bottom:8px}
.nd-strip span{font-size:14px;line-height:1.5}
.nd-foot{margin-top:36px;color:var(--nd-muted);font-size:14px;border-top:1px solid var(--nd-line);padding-top:16px}
@media (prefers-reduced-motion:reduce){.nd-stage-wrap{display:none}.nd-strip{margin-top:0}}
.nd-page.nd-still-mode .nd-stage-wrap{display:none}
.nd-page.nd-strip-stage .nd-strip{grid-template-columns:repeat(4,1fr);width:1920px;box-sizing:border-box;padding:60px;margin:0;background:var(--nd-paper);height:1080px;align-content:center}
.nd-page.nd-strip-stage .nd-strip li{padding:28px}
.nd-page.nd-strip-stage .nd-strip b{font-size:20px}
.nd-page.nd-strip-stage .nd-strip span{font-size:24px}