/* Home v3 layer: stars, wider record screen, premium chart, V1 box in the header, instrument wireframes, label-card result readout. */

/* ---------- S1 column ---------- */
.hv-stars{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.left .hero-copy{padding-bottom:4px}
.left .hero-ctas{margin-top:26px}

/* premium chart */
.rui-chart.v3 .grid line,.rui-chart.v3 > g:first-of-type line{stroke:rgba(255,255,255,.05);stroke-dasharray:2 6}
.rui-chart.v3 .t1{stroke-width:2.4;filter:drop-shadow(0 0 6px rgba(255,51,232,.55))}
.rui-chart.v3 .t2{stroke-width:1.4;stroke-opacity:.85}
.rui-chart.v3 .t3{stroke-width:1.1;stroke-opacity:.55}
.rui-chart.v3 .band{fill:rgba(184,168,255,.07);stroke:rgba(184,168,255,.28);stroke-dasharray:3 4;vector-effect:non-scaling-stroke;transition:y .6s,height .6s}
.rui-chart.v3 .now{fill:#fff;stroke:#ff33e8;stroke-width:2.2;filter:drop-shadow(0 0 6px #ff33e8)}
.rui-chart.v3 .pulse{fill:none;stroke:#ff33e8;stroke-width:1.4;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;animation:hvPulse 1.8s var(--ease) infinite}
@keyframes hvPulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}
.rui-chart.v3 .mk{stroke:rgba(255,255,255,.14);stroke-dasharray:2 4;vector-effect:non-scaling-stroke}
.rui-chart.v3 .pill rect{fill:rgba(23,25,30,.92);stroke:rgba(255,255,255,.14);vector-effect:non-scaling-stroke}
.rui-chart.v3 .pill text{font-size:8px;font-weight:600;letter-spacing:.08em;fill:#c9cfd8}
.rui-chart.v3 .ylab text{font-size:8px;fill:#5d646e;letter-spacing:.04em}
.rui-chart.v3 .ticks rect{fill:rgba(122,130,141,.55)}
.rui-chart.v3 .ticks rect.s{fill:#ff33e8;filter:drop-shadow(0 0 3px rgba(255,51,232,.7))}

/* ---------- V1 header with the box ---------- */
.v1-head{display:grid;grid-template-columns:minmax(0,1fr) clamp(170px,30%,290px);grid-template-areas:"eye box" "title box" "intro box" "perks perks";column-gap:clamp(16px,2.4vw,36px);align-items:start}
.v1-head > .eyebrow{grid-area:eye}
.v1-head > .v1-title{grid-area:title}
.v1-head > .v1-intro{grid-area:intro}
.v1-head > .perks{grid-area:perks}
.v1-box{grid-area:box;align-self:center;margin:8px -8px 0 0;position:relative;isolation:isolate}
.v1-box img{position:relative;width:100%;height:auto;filter:drop-shadow(0 26px 34px rgba(0,0,0,.6)) drop-shadow(0 0 50px rgba(176,68,231,.16))}
@media (max-width:734px){
  .v1-head{grid-template-columns:1fr;grid-template-areas:"box" "eye" "title" "intro" "perks"}
  .v1-box{width:min(320px,74%);justify-self:center;margin:0 0 14px}
}

/* ---------- Instrument wireframes on the stainer cards ---------- */
.inst{min-height:150px;padding-right:44%}
.inst img{right:14px;bottom:10px;top:12px;height:auto;max-height:calc(100% - 22px);max-width:38%;object-fit:contain;object-position:right center;
  filter:invert(1) brightness(1.6);opacity:.5;transition:opacity .3s,filter .3s}
.inst.on img{opacity:.95;filter:invert(1) brightness(1.7) drop-shadow(0 0 10px rgba(234,57,222,.35))}
.inst:hover img{opacity:.8}
.inst .stepper{margin-top:auto}
.inst .ruo{right:auto;left:auto;top:14px;position:static;align-self:flex-start;margin-bottom:6px}

/* ---------- Price ladder (matches the live site) ---------- */
.ladder-l{margin:16px 0 0;font-size:13px;color:var(--text-3);font-weight:500}
.ladder-l + .tiers{margin-top:8px}
.tier.off{opacity:.38}
.ladder-hint{margin-top:10px}

/* ---------- Result readout: label cards ---------- */
.state svg.lbl{width:92px;height:auto;margin:2px auto 12px;display:block;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.state{text-align:center}

/* chart lifted into a frosted card over the lower glass */
.hv-chart{position:absolute;z-index:4;display:grid;grid-template-rows:auto 1fr;gap:8px;padding:12px 16px 12px 14px;border-radius:20px;
  background:linear-gradient(180deg,rgba(18,16,24,.62),rgba(10,10,14,.72));backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 30px 60px -30px rgba(0,0,0,.8),0 0 80px -30px rgba(234,57,222,.35);color:var(--ui-text);font-size:11px;letter-spacing:.02em;pointer-events:none}
.stage .hv-chart{visibility:hidden}.stage.laid .hv-chart{visibility:visible}
.hv-hd{display:flex;align-items:center;gap:10px;min-width:0}
.hv-hd b{font-weight:500;font-size:12px}
.hv-leg{display:inline-flex;align-items:center;gap:5px;color:var(--ui-slate);font-size:10px}
.hv-leg i{width:12px;height:2px;border-radius:2px;margin-left:5px}
.hv-leg .l1{background:#ff33e8;box-shadow:0 0 6px #ff33e8}.hv-leg .l2{background:#b8a8ff}.hv-leg .l3{background:rgba(166,177,190,.75)}
.hv-sp{flex:1}
.hv-ph{font-size:10px;padding:3px 9px;border-radius:999px;background:rgba(255,51,232,.14);color:#f6b0f8;letter-spacing:.06em;text-transform:uppercase}
.hv-val{font-size:15px!important;font-weight:400!important}
.hv-plot{position:relative;min-height:0;padding-left:30px}
.hv-plot .rui-chart{position:static;width:100%;height:100%;display:block;grid-row:auto;grid-column:auto}
.hv-y{position:absolute;left:0;top:0;bottom:0;width:28px;font-size:9px;color:#5d646e}
.hv-y span{position:absolute;left:0;transform:translateY(-50%)}
.hv-pills{position:absolute;left:30px;right:0;top:-2px;height:0}
.hv-pills span{position:absolute;transform:translateX(5px);font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#c9cfd8;padding:2px 8px;border-radius:999px;background:rgba(23,25,30,.92);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);white-space:nowrap}
.hv-now{position:absolute;right:-5px;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #ff33e8,0 0 12px #ff33e8;transition:top .12s linear}
.hv-now b{position:absolute;inset:-2px;border-radius:50%;border:1.5px solid #ff33e8;animation:hvPulse 1.8s var(--ease) infinite}
@media (max-width:734px){.hv-leg{display:none}.hv-plot{padding-left:24px}}

.v1-box::before{content:"";position:absolute;left:-30%;right:-30%;top:-45%;bottom:-55%;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 52%,rgba(196,80,245,.55),rgba(140,48,190,.34) 38%,rgba(80,22,110,.16) 62%,transparent 80%)}

.v1-title .v1-g{font-weight:inherit;display:inline;padding-right:.04em}

/* ---------- The other 89 days ---------- */
.y89{margin-top:64px;padding-top:48px;border-top:1px solid var(--line)}
.y89-eye{margin:0 0 12px;font-size:14px;font-weight:600;color:#e88cf0}
.y89-h{margin:0;font-size:clamp(32px,3.3vw,50px);line-height:1.04;letter-spacing:-.018em;font-weight:500}
.y89-h .grad{display:inline}
.y89-lead{margin:16px 0 0;max-width:34em;font-size:clamp(16px,1.2vw,19px);line-height:1.4;color:var(--text-2)}
.y89-seg{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;margin-top:28px;padding:4px;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);--x:0%}
.y89-seg button{position:relative;z-index:1;border:0;background:none;padding:9px 20px;font-size:14px;font-weight:500;color:var(--text-2);border-radius:999px;cursor:pointer;transition:color .35s;white-space:nowrap}
.y89-seg button[aria-selected="true"]{color:#000}
.y89-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:#f5f5f7;transform:translateX(var(--x));transition:transform .55s cubic-bezier(.2,.8,.2,1),background .4s;box-shadow:0 6px 20px -8px rgba(0,0,0,.6)}
.y89[data-mode="s1"] .y89-thumb{background:linear-gradient(90deg,#ff5cf0,#a35cf5);box-shadow:0 8px 26px -8px rgba(234,57,222,.8)}
.y89[data-mode="s1"] .y89-seg button[aria-selected="true"]{color:#fff}

.y89-card{position:relative;margin:20px 0 0;padding:20px 22px 22px;border-radius:28px;
  background:radial-gradient(90% 120% at 100% 0%,rgba(125,78,239,.10),transparent 60%),linear-gradient(180deg,#121216,#0b0b0e);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 40px 80px -50px rgba(0,0,0,.9);transition:box-shadow .8s}
.y89[data-mode="s1"] .y89-card{box-shadow:inset 0 0 0 1px rgba(234,57,222,.22),0 40px 90px -46px rgba(234,57,222,.45)}
.y89-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.y89-pad{font-size:12px;color:var(--text-3);letter-spacing:.03em}
.y89-legend{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--text-3)}
.y89-legend i{width:9px;height:9px;border-radius:3px;margin-left:8px}
.lg-v1{background:#f5f5f7;box-shadow:0 0 8px rgba(255,255,255,.6)}
.lg-run{background:linear-gradient(135deg,#ff33e8,#9a5cf5)}
.lg-ex{background:#ffb547;box-shadow:0 0 8px rgba(255,181,71,.7)}
.y89:not([data-mode="s1"]) .lg-run,.y89:not([data-mode="s1"]) .lg-ex{opacity:.3}

.y89-months{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:3px;margin-bottom:6px;font-size:10px;color:var(--text-3);height:14px}
.y89-months span{grid-row:1;white-space:nowrap}
.y89-grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);grid-template-rows:repeat(7,auto);gap:3px}
.y-c{display:block;aspect-ratio:1;border-radius:3px;background:#1b1b20;transition:background .5s,box-shadow .5s,transform .5s;transition-delay:calc(var(--c,0) * 14ms)}
.y-x{visibility:hidden}
.y-c[data-i]:hover{transform:scale(1.35);z-index:2;position:relative}
/* V1 mode: four lit days, everything else dark */
.y89 .y-v{background:#f5f5f7;box-shadow:0 0 0 1px rgba(255,255,255,.4),0 0 14px rgba(255,255,255,.55)}
.y89.seen:not([data-mode="s1"]) .y-v{animation:y89beat 2.4s ease-in-out infinite}
@keyframes y89beat{50%{box-shadow:0 0 0 1px rgba(255,255,255,.4),0 0 22px rgba(255,255,255,.85)}}
/* S1 mode: every run day fills in a wave, left to right */
.y89[data-mode="s1"] .y-r.y-l1{background:#7a2c8c}
.y89[data-mode="s1"] .y-r.y-l2{background:#a53bc0}
.y89[data-mode="s1"] .y-r.y-l3{background:#d844e2}
.y89[data-mode="s1"] .y-r.y-l4{background:#ff5cf0;box-shadow:0 0 8px rgba(255,92,240,.35)}
.y89[data-mode="s1"] .y-c.y-v{background:#f5f5f7;box-shadow:0 0 0 1px rgba(255,255,255,.5),0 0 10px rgba(255,255,255,.4)}
.y89[data-mode="s1"] .y-r.y-e{background:#ffb547;box-shadow:0 0 0 1px rgba(255,214,150,.6),0 0 16px rgba(255,181,71,.8);animation:y89ex 1.6s ease-in-out infinite;animation-delay:calc(var(--c,0) * 14ms + .9s)}
@keyframes y89ex{50%{box-shadow:0 0 0 1px rgba(255,214,150,.6),0 0 26px rgba(255,181,71,1)}}

.y89-tip{position:absolute;z-index:5;transform:translate(-50%,calc(-100% - 10px));pointer-events:none;white-space:nowrap;padding:7px 11px;border-radius:10px;font-size:12px;color:var(--text-2);
  background:rgba(28,28,32,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 12px 30px -10px rgba(0,0,0,.8)}
.y89-tip b{display:block;color:#fff;font-weight:500;margin-bottom:1px}
.y89-tip.amb{box-shadow:inset 0 0 0 1px rgba(255,181,71,.55),0 12px 30px -10px rgba(0,0,0,.8)}

.y89-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.07)}
.y89-stats div{padding-right:14px}
.y89-stats div + div{padding-left:18px;border-left:1px solid rgba(255,255,255,.07)}
.y89-stats b{display:block;font-size:clamp(34px,3.2vw,48px);line-height:1;font-weight:300;letter-spacing:-.02em;color:#fff}
.y89-stats span{display:block;margin-top:8px;font-size:13px;line-height:1.35;color:var(--text-3)}
.y89[data-mode="s1"] .y89-stats div:first-child b{background:var(--accent);-webkit-background-clip:text;background-clip:text;color:transparent}
.y89[data-mode="s1"] .y89-stats div:last-child b{color:#ffb547}
.y89-fine{margin-top:14px}
@media (max-width:734px){
  .y89-card{padding:16px 14px 18px;border-radius:22px}
  .y89-grid,.y89-months{gap:2px}.y-c{border-radius:2px}
  .y89-months span:nth-child(even){visibility:hidden}
  .y89-legend{display:none}
  .y89-stats{grid-template-columns:1fr;gap:14px}
  .y89-stats div + div{padding-left:0;border-left:0}
}
@media (prefers-reduced-motion:reduce){.y-c{transition:none}.y89 .y-v,.y89 .y-e{animation:none}}
.hv-pills{height:18px;overflow:hidden}
.right{overflow-x:clip}

/* nav product names in the brand gradient */
.gn-g{font-weight:inherit;background:linear-gradient(90deg,#ff33e8,#8a63ff);-webkit-background-clip:text;background-clip:text;color:transparent}

/* V1 on the stainer: rendered drawer sequence */
.v1-run{margin-top:clamp(32px,4vw,48px)}
.v1-vid{position:relative;margin:18px 0 0;border-radius:22px;overflow:hidden;background:#0c0c0e;aspect-ratio:16/9;border:1px solid rgba(255,255,255,.06)}
.v1-vid video{display:block;width:100%;height:100%;object-fit:cover}
.v1-replay{position:absolute;right:14px;bottom:14px;height:34px;padding:0 16px;border-radius:999px;border:0;background:rgba(245,245,247,.92);color:#000;font:inherit;font-size:13px;font-weight:500;cursor:pointer}