/* ===== /products page. Loads after site.css + luxe.css; only page-specific layout + the four product stages. ===== */

/* ---------- hero + lineup ---------- */
.phero{overflow:clip;padding-bottom:clamp(2rem,4vw,3.2rem)}
.phero .lede{margin-inline:auto}
.phero .trust{justify-content:center;margin-top:1.4rem}
.lineup{display:grid;gap:.9rem;margin-top:clamp(2rem,4vw,3rem);text-align:left}
@media(min-width:640px){.lineup{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.lineup{grid-template-columns:repeat(4,1fr)}}
.lu{display:grid;gap:.55rem;align-content:start;padding:1.25rem 1.3rem 1.2rem;text-decoration:none;color:var(--fg)}
.lu .ico{margin-bottom:.3rem}
.lu p{color:var(--muted);font-size:.9rem;line-height:1.5}
.lu .go{margin-top:.2rem;display:inline-flex;align-items:center;gap:.3rem;color:var(--gold-text);font:600 .8rem var(--ff-h);letter-spacing:.02em}
.lu .go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--d2) var(--ease)}
@media(hover:hover){.lu:hover{border-color:var(--gold-line)}.lu:hover .go svg{transform:translateX(4px)}}

/* ---------- scene scaffold ---------- */
.pscene{position:relative;padding-block:clamp(4rem,9vw,8rem);border-top:1px solid var(--line);scroll-margin-top:52px;overflow:clip}
.pscene:nth-of-type(odd){background:linear-gradient(180deg,transparent,var(--bg-2) 20%,var(--bg-2) 80%,transparent)}
.pscene>.wrap{position:relative;z-index:1}
/* giant outline numeral behind each scene, drifts with page scroll (motion.js --scroll) */
.bignum{position:absolute;top:clamp(.5rem,3vw,2rem);right:-.04em;font:700 clamp(9rem,24vw,22rem)/1 var(--ff-h);letter-spacing:-.07em;color:transparent;-webkit-text-stroke:1px var(--gold-line);opacity:.5;pointer-events:none;user-select:none;z-index:0}
.pscene.flip .bignum{right:auto;left:-.04em}
:root[data-theme=dark] .bignum{-webkit-text-stroke-color:rgba(245,170,40,.24)}
/* luxe reveal ends with clip-path:inset(0); the stage's floating chips hang outside its box */
.pstage[data-reveal].in{clip-path:none}
.pnum{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.pnum>span:first-child{font:700 .78rem/1 var(--ff-h);letter-spacing:.22em;color:var(--gold-text);padding:.3rem .5rem;border:1px solid var(--gold-line);border-radius:6px;background:var(--gold-dim)}
.pscene h2{margin-top:1.2rem;max-width:17ch}
.pscene .t-lead{margin-top:1rem;max-width:50ch}
.pscene .ticks{margin-top:1.4rem}
.pscene .cta-row{margin-top:1.6rem}
.pscene .dl{margin-top:1.4rem}
.pmobile{margin-top:1.8rem;padding-top:1.4rem;border-top:1px dashed var(--line-2)}
.pmobile .store-b{margin-top:.8rem}

/* stage: the animated product mock. data-tilt on the stage (mocks are pointer-events:none) */
.pstage{position:relative;perspective:1200px;transform-style:flat}
.pstage[data-tilt]:hover{box-shadow:none;border-color:transparent}
.pstage::before{content:"";position:absolute;inset:8% -10% 6% -10%;border-radius:50%;background:radial-gradient(closest-side,var(--gold-glow),transparent 72%);filter:blur(46px);opacity:.5;z-index:-1;pointer-events:none}
.pstage .mock{box-shadow:var(--sh-2),0 0 110px -36px var(--gold-glow)}
.pstage .fchip{animation-duration:6.5s}
.pstage .fchip.c1{top:-14px;left:6%;right:auto}
.pstage .fchip.c2{top:-14px;right:6%;animation-delay:-2s}
.pstage .fchip.c3{bottom:-14px;left:8%;animation-delay:-3s}
.pstage .fchip.c4{top:4%;right:-2%;animation-delay:-1.5s}

/* 01 LIT App: canvas sorter in a browser mock + floating phone */
.pstage.app{padding:0 clamp(60px,12%,110px) 2.4rem 0}
.sorter{display:block;width:100%;aspect-ratio:16/10.5;background:var(--bg)}
.pstage.app .phone{position:absolute;right:0;bottom:0;width:clamp(150px,21vw,205px);z-index:3;transform:rotate(4deg);--rot:4deg;animation:flt 7s var(--io) infinite;box-shadow:var(--sh-2),0 0 70px -20px var(--gold-glow)}
.pstage.app .phone .scr{padding:.7rem}
.pstage.app .phone h4{font-size:.86rem}
.pstage.app .scan{width:84px;height:84px}
.pstage.app .scan svg{width:40px;height:40px}
@media(max-width:600px){.pstage.app{padding-right:48px}.pstage.app .phone{width:138px;right:-6px}}

/* 02 LIT Cull: filmstrip scanner + judged grid + sliders */
.cstrip{position:relative;display:flex;gap:4px;padding:4px;border-radius:10px;background:var(--bg);border:1px solid var(--line)}
.cstrip .tile{flex:1;aspect-ratio:3/2;border-radius:4px;opacity:.55}
.cstrip .tile::after{left:32%;top:18%;width:36%;height:48%}
.cstrip::after{content:"";position:absolute;top:2px;bottom:2px;left:2px;width:calc(10% + 1px);border-radius:6px;border:2px solid var(--g2);box-shadow:0 0 18px var(--gold-glow),inset 0 0 12px var(--gold-dim);animation:cscan 8s steps(10,jump-none) infinite}
@keyframes cscan{to{left:calc(90% - 3px)}}
.anim .cstrip .tile{animation:cseen 8s steps(1) infinite;animation-delay:calc(var(--i,0)*.8s)}
@keyframes cseen{0%{opacity:.55}10%,100%{opacity:1}}
.grid-t.c12{grid-template-columns:repeat(6,1fr)}
@media(max-width:600px){.grid-t.c12{grid-template-columns:repeat(4,1fr)}.grid-t.c12 .tile:nth-child(n+9){display:none}}
.cull .tile.rej.blur{animation-name:judgeBlur}
@keyframes judgeBlur{0%,8%{filter:none}12%,85%{filter:blur(2px) saturate(.3) brightness(.55);transform:scale(.96)}92%,100%{filter:none;transform:none}}
.cullm .m-chip.ok,.cullm .m-chip.bad{backdrop-filter:blur(4px)}
.crow{display:grid;gap:.6rem 1rem}
@media(min-width:480px){.crow{grid-template-columns:1fr 1fr}}
.cullm .m-stat{align-items:center}
.cullm .m-stat .m-chip{margin-left:auto}

/* 03 LIT SUITE: kanban + invoice + WhatsApp thread */
.sbody{display:grid;gap:.8rem}
@media(min-width:560px){.sbody{grid-template-columns:1.35fr 1fr}}
.suitem .kan>div{min-height:170px}
.suitem .kan .slot{border:1px dashed var(--gold-line);background:transparent;min-height:48px;opacity:.6}
.sside{display:grid;gap:.7rem;align-content:start}
.suitem .wa-card{padding:.8rem;font-size:.78rem;gap:.55rem}
.suitem .wa-card .b{max-width:92%}
.anim .suitem .wa-card .b,.anim .suitem .wa-card .link{opacity:0;animation:wapop 9s var(--io) infinite}
.anim .suitem .wa-card .b:nth-child(2){animation-delay:.8s}
.anim .suitem .wa-card .link{animation-delay:1.6s}
@keyframes wapop{0%{opacity:0;transform:translateY(10px) scale(.96)}6%,90%{opacity:1;transform:none}100%{opacity:0}}

/* 04 Standee + brand: standee with drawing QR, watermark card, swatches */
.pstage.brand-st{aspect-ratio:1/1.02;width:min(100%,520px);justify-self:center}
.brand-st .stand{position:absolute;left:0;top:2%;width:58%;max-width:none;margin:0;padding:1.4rem 1rem 1.2rem;gap:.6rem;z-index:1}
.brand-st .stand .slogo{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgba(255,215,0,.1);border:1px solid rgba(255,215,0,.3);position:relative}
.brand-st .stand .slogo img{width:22px;height:22px;filter:drop-shadow(0 0 8px var(--gold-glow))}
.brand-st .stand h4{font-size:clamp(1rem,2.4vw,1.3rem)}
.brand-st .stand p{font-size:.78rem}
.brand-st .stand .qr{width:min(130px,62%);height:auto;aspect-ratio:1}
.brand-st .stand .sfoot{font:600 .62rem/1 var(--ff-h);letter-spacing:.16em;text-transform:uppercase;color:#CDBF9E;position:relative}
.brand-st .stand::after{content:"";position:absolute;left:12%;right:12%;bottom:0;height:3px;background:var(--trif)}
.brand-st .wm-card{position:absolute;right:0;bottom:2%;width:48%;padding:.7rem;z-index:2;animation:flt 8s var(--io) -2s infinite;--rot:0deg}
.brand-st .wm-photo{height:auto;aspect-ratio:4/3}
.brand-st .wm-photo::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 40% 35%,rgba(255,255,255,.25),transparent 70%)}
.brand-st .brow{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:.7rem;flex-wrap:wrap}
.brand-st .sw i{width:22px;height:22px}
.anim .brand-st .stand .qr{-webkit-mask-image:linear-gradient(135deg,#000 var(--q,0%),transparent calc(var(--q,0%) + 12%));mask-image:linear-gradient(135deg,#000 var(--q,0%),transparent calc(var(--q,0%) + 12%));animation:qr 6s steps(16) infinite}
@media(max-width:600px){.brand-st .stand{width:62%}.brand-st .wm-card{width:60%}}

/* ---------- one account band ---------- */
.one{padding-top:0}
.onebox{text-align:center;padding:clamp(2rem,5vw,3.5rem) 1.4rem;display:grid;justify-items:center;gap:.8rem}
.onebox .locks{margin-top:0;gap:clamp(1rem,4vw,2.6rem)}
.onebox h2{font-size:var(--t-h3);margin-top:.4rem}
.onebox p{max-width:52ch}
.oneline{width:min(100%,520px);height:60px;overflow:visible;margin-bottom:-1.2rem}
.oneline path{fill:none;stroke:var(--g2);stroke-width:1.5;stroke-dasharray:600;stroke-dashoffset:600;opacity:.8}
.oneline circle{fill:var(--g3);filter:drop-shadow(0 0 8px var(--gold-glow));opacity:0}
.one.in .oneline path{animation:oneDraw 1.4s var(--ease) .2s forwards}
.one.in .oneline circle{animation:onePop .5s var(--ease) forwards}
.one.in .oneline circle:nth-of-type(2){animation-delay:.6s}.one.in .oneline circle:nth-of-type(3){animation-delay:1.2s}
@keyframes oneDraw{to{stroke-dashoffset:0}}
@keyframes onePop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
html:not(.js) .oneline path{stroke-dashoffset:0}html:not(.js) .oneline circle{opacity:1}
@media(max-width:600px){.oneline{display:none}.onebox .locks{gap:.9rem 1.2rem}}

/* ---------- motion safety ---------- */
@media(prefers-reduced-motion:reduce){
  .cstrip::after,.anim .cstrip .tile,.anim .suitem .wa-card .b,.anim .suitem .wa-card .link,.pstage.app .phone,.brand-st .wm-card,.anim .brand-st .stand .qr,.pstage .fchip{animation:none;opacity:1;-webkit-mask-image:none;mask-image:none}
  .oneline path{stroke-dashoffset:0;animation:none}.oneline circle{opacity:1;animation:none}
}
@media(forced-colors:active){.pnum>span:first-child,.lu .go{color:CanvasText}}