/* slicetext: hero thread + scroll scene (texts stack up, become orders on a graph, then money) */

/* ---------- hero ---------- */
.hero-slicetext{position:relative;max-width:520px;margin:0 auto;padding:16px 0 30px;font-size:clamp(11px,3.4vw,13.5px)}
.hs-noise{position:absolute;inset:-6% -4%;pointer-events:none}
.hs-noise span{position:absolute;left:var(--x);top:var(--y);padding:.6em 1em;border-radius:1em;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.42);font-size:.9em;font-weight:600;white-space:nowrap;filter:blur(1.6px)}
.hs-phone{position:relative;z-index:1;width:min(22em,74%);margin:0 auto 0 6%;border-radius:3em;padding:.6em;background:linear-gradient(145deg,#3a3d3c,#111312 35%,#050606 70%,#2a2d2c);box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 40px 80px -20px rgba(0,0,0,.8),0 0 60px -10px rgba(122,199,12,.35)}
.hs-screen{position:relative;border-radius:2.45em;overflow:hidden;background:#0f1211;height:36em;display:flex;flex-direction:column}
.hs-head{position:relative;z-index:1;background:#161a18!important;display:grid;justify-items:center;gap:.15em;padding:3.2em 1em .9em;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.06);color:#e9ece8}
.hs-av{display:grid;place-items:center;width:2.9em;height:2.9em;border-radius:50%;background:#7ac70c;color:#122100;margin-bottom:.2em}
.hs-head b{font-size:.95em}
.hs-head small{font-size:.72em;color:#7f8682}
.hs-thread{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:.5em;padding:.8em .9em;overflow:hidden}
.hs-b{margin:0;max-width:82%;padding:.65em .95em;border-radius:1.25em 1.25em 1.25em .35em;background:#262b29;color:#eef0ec;line-height:1.35;font-size:.98em;align-self:flex-start;transform-origin:0 100%}
.hs-b b{color:#a8e84a}
.hs-b.me{align-self:flex-end;border-radius:1.25em 1.25em .35em 1.25em;background:#7ac70c;color:#122100;font-weight:600;transform-origin:100% 100%}
.hs-typing{display:none;align-self:flex-start;margin:0;padding:.75em .9em;border-radius:1.25em;background:#262b29;gap:.3em}
.hs-typing i{width:.5em;height:.5em;border-radius:50%;background:#8b928e}
.hs-input{display:flex;align-items:center;justify-content:space-between;margin:.2em .8em 1.2em;padding:.55em .6em .55em 1em;border-radius:99px;border:1px solid rgba(255,255,255,.12);color:#6d736f;font-size:.85em}
.hs-input i{width:1.9em;height:1.9em;border-radius:50%;background:#7ac70c}
.hs-streak{position:absolute;z-index:2;right:0;bottom:6%;width:min(16em,52%);padding:1.1em;border-radius:1.4em;background:#f6f4ef;color:#122100;box-shadow:0 30px 60px -20px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.05)}
.hs-sk-h{font:800 1.35em/1 var(--display);text-transform:uppercase;margin-bottom:.7em}
.hs-weeks{display:grid;grid-template-columns:repeat(3,1fr);gap:.4em}
.hs-weeks span{display:grid;justify-items:center;gap:.3em;font-size:.78em;font-weight:700;color:#6b706d}
.hs-weeks i{width:2.6em;height:2.6em;border-radius:50%;border:2px dashed #c9c6bc;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6 11.5l3.2 3.2L16 8' fill='none' stroke='%23122100' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/0 no-repeat}
.hs-weeks .w1 i,.hs-weeks .w2 i{border:0;background:#7ac70c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6 11.5l3.2 3.2L16 8' fill='none' stroke='%23122100' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat}
.hs-free{margin-top:.8em;padding:.5em .7em;border-radius:.7em;background:#122100;color:#a8e84a;text-align:center;font-size:.9em;opacity:.25}
@media(min-width:900px){.hero-slicetext{font-size:14px}.hs-phone{margin-left:10%}}

@media(prefers-reduced-motion:no-preference){
  .hs-noise span{animation:hs-drift 14s ease-in-out var(--d) infinite alternate}
  .hs-phone{animation:hs-bob 8s ease-in-out infinite}
  .hs-b{animation:12s cubic-bezier(.2,.9,.3,1.2) infinite}
  .hs-b.b1{animation-name:hs-in1}.hs-b.b2{animation-name:hs-in2}.hs-b.b3{animation-name:hs-in3}.hs-b.b4{animation-name:hs-in4}.hs-b.b5{animation-name:hs-in5}
  .hs-typing{display:flex;animation:hs-type 12s ease infinite}
  .hs-typing i{animation:hs-dot 1s ease-in-out infinite}.hs-typing i:nth-child(2){animation-delay:.15s}.hs-typing i:nth-child(3){animation-delay:.3s}
  .hs-weeks .w3 i{animation:hs-w3 12s ease infinite}
  .hs-free{animation:hs-free 12s ease infinite}
  .hs-streak{animation:hs-pop 12s cubic-bezier(.2,.9,.3,1.3) infinite}
}
@media(prefers-reduced-motion:reduce){
  .hs-weeks .w3 i{border-color:#7ac70c;background-color:#7ac70c;background-size:70%}
  .hs-free{opacity:1}
}
@keyframes hs-drift{from{transform:translate(0,0)}to{transform:translate(1.4em,-1em)}}
@keyframes hs-bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(.5deg)}}
/* each bubble: hidden (collapsed) until its moment, then grows in; all fade before the loop restarts */
@keyframes hs-in1{0%,3%{max-height:0;opacity:0;transform:scale(.6);margin-bottom:-.5em;padding-top:0;padding-bottom:0}7%,92%{max-height:8em;opacity:1;transform:none;margin-bottom:0}97%,100%{max-height:8em;opacity:0}}
@keyframes hs-in2{0%,13%{max-height:0;opacity:0;transform:scale(.6);margin-bottom:-.5em;padding-top:0;padding-bottom:0}17%,92%{max-height:8em;opacity:1;transform:none;margin-bottom:0}97%,100%{max-height:8em;opacity:0}}
@keyframes hs-in3{0%,25%{max-height:0;opacity:0;transform:scale(.6);margin-bottom:-.5em;padding-top:0;padding-bottom:0}29%,92%{max-height:8em;opacity:1;transform:none;margin-bottom:0}97%,100%{max-height:8em;opacity:0}}
@keyframes hs-in4{0%,39%{max-height:0;opacity:0;transform:scale(.6);margin-bottom:-.5em;padding-top:0;padding-bottom:0}43%,92%{max-height:8em;opacity:1;transform:none;margin-bottom:0}97%,100%{max-height:8em;opacity:0}}
@keyframes hs-in5{0%,57%{max-height:0;opacity:0;transform:scale(.6);margin-bottom:-.5em;padding-top:0;padding-bottom:0}61%,92%{max-height:8em;opacity:1;transform:none;margin-bottom:0}97%,100%{max-height:8em;opacity:0}}
@keyframes hs-type{0%,48%{max-height:0;opacity:0;padding-top:0;padding-bottom:0;margin-bottom:-.5em}50%,56%{max-height:3em;opacity:1;padding-top:.75em;padding-bottom:.75em;margin-bottom:0}58%,100%{max-height:0;opacity:0;padding-top:0;padding-bottom:0;margin-bottom:-.5em}}
@keyframes hs-dot{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-.25em);opacity:1}}
@keyframes hs-w3{0%,69%{border-color:#c9c6bc;background-color:#fff;background-size:0;transform:scale(1)}72%{transform:scale(1.25)}74%,92%{border-color:#7ac70c;background-color:#7ac70c;background-size:70%;transform:none}97%,100%{border-color:#c9c6bc;background-color:#fff;background-size:0}}
@keyframes hs-free{0%,72%{opacity:.25;transform:none}75%{opacity:1;transform:scale(1.06)}77%,92%{opacity:1;transform:none}97%,100%{opacity:.25}}
@keyframes hs-pop{0%,68%{transform:none}71%{transform:translateY(-6px) rotate(-1.5deg)}75%,100%{transform:none}}

/* ---------- scene ---------- */
.scene-slicetext{background:
  radial-gradient(55% 45% at 72% 50%,rgba(122,199,12,.16),transparent 70%),#080a09;color:var(--chalk);overflow-x:clip}
.st-track{height:340vh}
.st-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-rows:auto 1fr;padding:84px 16px 16px;max-width:1180px;margin:0 auto}
.st-copy{position:relative;z-index:3}
.st-copy .kicker{color:#a8e84a;margin-bottom:10px}
.st-beats{list-style:none;margin:0;padding:0;display:grid}
.st-beats li{grid-area:1/1;opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.st-beats li.on{opacity:1;transform:none}
.st-beats h3{font:800 clamp(2.3rem,9vw,4.6rem)/.92 var(--display);text-transform:uppercase;margin-bottom:10px}
.st-beats h3 em{font-style:normal;color:#7ac70c}
.st-beats p{color:#c6cbc7;font-size:1.05rem;max-width:36ch}
.st-beats .st-stat{margin-top:10px;color:#a8e84a;font-weight:700}
.st-dots{display:flex;gap:6px;margin-top:16px}
.st-dots i{width:22px;height:4px;border-radius:2px;background:rgba(255,255,255,.18);transition:background .3s,width .3s}
.st-dots i.on{background:#7ac70c;width:40px}
.st-vis{position:relative;min-height:0}
.st-layer{position:absolute;inset:0}
/* noise */
.st-noise span{position:absolute;padding:.55em .95em;border-radius:1em;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.07);color:rgba(255,255,255,.36);font-size:.82rem;font-weight:600;white-space:nowrap;filter:blur(1.4px);will-change:transform,opacity}
/* phone */
.st-phone{position:absolute;left:0;top:0;border-radius:3em;padding:.6em;background:linear-gradient(145deg,#3a3d3c,#111312 35%,#050606 70%,#2a2d2c);box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 40px 80px -20px rgba(0,0,0,.8),0 0 80px -20px rgba(122,199,12,.4);will-change:transform,opacity}
.st-pscreen{height:100%;border-radius:2.45em;overflow:hidden;background:radial-gradient(120% 70% at 50% 0%,#203a10,#0c120a 60%,#070908);color:#eef0ec;text-align:center;padding-top:4.4em}
.st-time{font:300 5.2em/1 var(--sans);letter-spacing:-.02em}
.st-date{font-size:.95em;color:#b9c2b5;margin-top:.3em}
/* dashboard card */
.st-dash{position:absolute;left:0;top:0;border-radius:22px;background:linear-gradient(180deg,#141816,#0e1110);border:1px solid rgba(255,255,255,.08);box-shadow:0 40px 90px -30px rgba(0,0,0,.9);opacity:0;will-change:transform,opacity}
.st-dash-h{position:absolute;left:20px;right:20px;top:16px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.st-dash-h small{display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8b928e}
.st-dash-h b{display:block;font:800 clamp(2rem,6vw,2.8rem)/1 var(--display);color:#fff;margin-top:4px}
.st-dash-h .r{text-align:right}
.st-dash-h .r b{color:#a8e84a}
.st-days{position:absolute;left:0;right:0;bottom:10px;height:16px}
.st-days span{position:absolute;transform:translateX(-50%);font-size:.7rem;font-weight:700;color:#6f7672;text-transform:uppercase;letter-spacing:.06em}
.st-grid{position:absolute;left:20px;right:20px;border-top:1px dashed rgba(255,255,255,.07)}
.st-line{position:absolute;inset:0;overflow:visible;pointer-events:none}
.st-line path{fill:none;stroke:#c4f56f;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(168,232,74,.7))}
.st-cost{position:absolute;left:20px;right:20px;font-size:.78rem;color:#8b928e;display:flex;justify-content:space-between;opacity:0}
.st-cost b{color:#dfe3de}
/* the texts that travel */
.st-msg{position:absolute;left:0;top:0;border-radius:16px;overflow:hidden;will-change:transform,width,height;transform-origin:50% 50%}
.st-msg>div{position:absolute;inset:0}
.st-n{display:flex;gap:.6em;align-items:flex-start;padding:.65em .75em;text-align:left;background:rgba(40,46,43,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);border-radius:inherit;color:#eef0ec;line-height:1.28}
.st-n i{flex:none;width:2.1em;height:2.1em;border-radius:.55em;background:#7ac70c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4c-5 0-9 3.1-9 7 0 2.1 1.2 4 3.1 5.3L5.5 20l4.1-2.3c.8.2 1.6.3 2.4.3 5 0 9-3.1 9-7s-4-7-9-7z' fill='%23122100'/%3E%3C/svg%3E") center/62% no-repeat}
.st-n p{min-width:0;font-size:.92em}
.st-n b{display:flex;justify-content:space-between;font-size:.92em}
.st-n b small{font-weight:500;color:#8b928e}
.st-n span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#cdd3cb}
.st-c{background:linear-gradient(180deg,#a8e84a,#7ac70c);border-radius:inherit;box-shadow:0 0 0 1px rgba(18,33,0,.2) inset,0 6px 16px -6px rgba(122,199,12,.7);opacity:0}
.st-m{opacity:0;border-radius:3px;background:
  radial-gradient(circle at 50% 50%,#b8ef62 0 22%,transparent 23%),
  repeating-linear-gradient(90deg,rgba(18,33,0,.08) 0 2px,transparent 2px 6px),
  linear-gradient(180deg,#9fe03f,#6aae0a);box-shadow:0 0 0 2px rgba(18,33,0,.35) inset,0 0 0 4px rgba(184,239,98,.5) inset,0 8px 14px -6px rgba(0,0,0,.6)}
.st-m::after{content:"$";position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);font:800 1em/1 var(--display);color:#1f3a00}
/* streak card */
.st-streak{position:absolute;left:0;top:0;padding:18px 18px 16px;border-radius:20px;background:#f6f4ef;color:#122100;box-shadow:0 40px 80px -24px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.05);opacity:0;will-change:transform,opacity}
.st-sk-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:12px}
.st-sk-h b{font:800 1.6rem/1 var(--display);text-transform:uppercase}
.st-sk-h small{font-size:.78rem;font-weight:700;color:#3d7300}
.st-weeks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.st-weeks span{display:grid;justify-items:center;gap:6px;padding:10px 4px;border-radius:14px;background:#fff;font-size:.78rem;font-weight:700;color:#6b706d;transition:background .3s,color .3s,transform .3s}
.st-weeks span i{width:34px;height:34px;border-radius:50%;border:2px dashed #c9c6bc;transition:all .3s}
.st-weeks span.on{background:#122100;color:#a8e84a}
.st-weeks span.on i{border:0;background:#7ac70c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6 11.5l3.2 3.2L16 8' fill='none' stroke='%23122100' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat}
.st-reward{margin-top:12px;padding:10px 12px;border-radius:12px;background:#7ac70c;color:#122100;font-weight:800;text-align:center;opacity:.2;transition:opacity .4s,transform .4s}
.st-reward.on{opacity:1;transform:scale(1.03)}

@media(min-width:900px){
  .st-track{height:420vh}
  .st-stage{grid-template-rows:1fr;grid-template-columns:.85fr 1.15fr;align-items:center;gap:40px;padding:80px 16px 16px}
  .st-vis{height:calc(100% - 20px)}
  .st-beats p{font-size:1.2rem}
}
/* reduced motion: one static final frame, no pinning */
.scene-slicetext.rm .st-track{height:auto}
.scene-slicetext.rm .st-stage{position:relative;height:auto;padding-top:56px;padding-bottom:56px;gap:28px}
.scene-slicetext.rm .st-vis{height:600px}
.scene-slicetext.rm .st-beats{gap:22px}
.scene-slicetext.rm .st-beats li{grid-area:auto;opacity:1;transform:none}
.scene-slicetext.rm .st-beats h3{font-size:clamp(2rem,7vw,3rem)}
.scene-slicetext.rm .st-dots{display:none}
.hs-island{position:absolute;z-index:3;left:50%;top:.9em;width:6.4em;height:1.8em;margin-left:-3.2em;border-radius:1em;background:#050606}