/* popsoda polish layer: loaded last on every page.
   One place for the premium finish: type, surfaces, edges, buttons, grain. */

:root{
  --edge:rgba(34,30,27,.07);
  --edge-strong:rgba(34,30,27,.12);
  --sh-card:0 0 0 1px var(--edge),0 1px 0 rgba(255,255,255,.8) inset,0 1px 2px rgba(34,30,27,.05),0 18px 40px -22px rgba(34,30,27,.28);
  --sh-card-hover:0 0 0 1px var(--edge-strong),0 1px 0 rgba(255,255,255,.8) inset,0 2px 4px rgba(34,30,27,.06),0 30px 60px -28px rgba(34,30,27,.38);
  --r-card:28px;
  --sec-y:clamp(5.5rem,11vw,9.5rem);
}

/* ── Type ── */
html{text-rendering:optimizeLegibility;font-kerning:normal}
body{font-feature-settings:"ss01","kern";letter-spacing:-.003em}
h1,h2,h3,.sec-head h2,.phero h1,.ohero h1{text-wrap:balance}
p,li{text-wrap:pretty}
.sec-head{margin-bottom:clamp(2.5rem,5vw,4rem);align-items:flex-end}
.sec-head h2,.lineup h2{font-size:clamp(2.5rem,1.5rem + 3.4vw,4.6rem);line-height:.98;letter-spacing:-.03em;max-width:15ch}
.sec-head p,.lineup .sec-head p{font-size:var(--t-base);line-height:1.6;color:#6f6255;max-width:24rem}
.phero h1,.ohero h1{letter-spacing:-.035em}
.phero .lede,.ohero p{color:#5b4f44;line-height:1.55}
::selection{background:var(--c-ink);color:var(--c-yellow)}
a{text-underline-offset:.22em;text-decoration-thickness:1px}

/* Eyebrows: one style everywhere */
.kicker,.scard .who,.chapter .kicker,.crumbs{letter-spacing:.16em}
.kicker,.scard .who{display:inline-flex;align-items:center;gap:.5rem}
.kicker::before,.scard .who::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.crumbs .kicker::before{display:none}

/* ── Surfaces: one radius, fine edges, layered shadows ── */
.card,.stat,.scard,.lu,.incl li,.demo,.lib-col,.dcard,.monthly,.audit-out,.podium{
  border-radius:var(--r-card);box-shadow:var(--sh-card)}
.card,.scard,.lu,.incl li,.dcard{transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.card:hover,.scard:hover,.lu:hover,.incl li:hover,.dcard:hover{transform:translateY(-4px);box-shadow:var(--sh-card-hover)}
.dcard.on{box-shadow:0 0 0 2px var(--accent),var(--sh-card)}
.board{border-radius:20px;box-shadow:inset 0 0 0 1px var(--edge)}
.incl li{padding:clamp(1.4rem,2.5vw,2rem)}
.incl li b{font-size:1.65rem;letter-spacing:-.015em}

/* ── Buttons ── */
.btn{letter-spacing:-.005em;font-weight:600;transition:transform .35s var(--ease-spring),box-shadow .35s var(--ease-out),background-color .2s}
.btn.ink,.nav-scan,.audit-form .btn{background:linear-gradient(180deg,#2f2a26,#191614);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 2px rgba(0,0,0,.2),0 8px 20px -8px rgba(0,0,0,.45)}
.btn.ink:hover,.nav-scan:hover,.audit-form .btn:hover{background:linear-gradient(180deg,#26221f,#0f0d0c);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 4px rgba(0,0,0,.2),0 14px 28px -10px rgba(0,0,0,.5)}
.btn.light{box-shadow:inset 0 0 0 1px var(--edge-strong),0 1px 2px rgba(34,30,27,.06)}
.btn:active{transform:translateY(1px) scale(.99)}

/* ── Grain: a quiet tactile layer over everything ── */
body::after{content:"";position:fixed;inset:0;z-index:58;pointer-events:none;opacity:.045;mix-blend-mode:multiply;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── Homepage sections ── */
.intro{padding:var(--sec-y) 0 clamp(4rem,8vw,6rem)}
.intro .intro-duo{display:flex;justify-content:center;align-items:flex-end;gap:4px;margin-bottom:var(--s-6)}
.intro .intro-duo img{height:58px;width:auto;filter:drop-shadow(0 10px 10px rgba(40,20,0,.2))}
.intro .intro-duo img:first-child{height:46px}
.intro h2{font-size:clamp(3rem,1.6rem + 5vw,6.4rem);line-height:.95;letter-spacing:-.035em;max-width:13ch}
.intro p{font-size:clamp(1.1rem,1rem + .4vw,1.35rem);line-height:1.6;color:#6f6255;max-width:34rem}
.intro .margin-note{display:none}

.moves{padding:var(--sec-y) 0}
.cards{gap:clamp(1rem,2vw,1.5rem)}
.card{overflow:hidden;background:var(--c-surface)}
.card .pic{background:radial-gradient(120% 90% at 50% 20%,#fffaf5,#f3e9df)!important;display:grid;place-items:center;aspect-ratio:4/3}
.card .pic img{width:100%!important;height:100%!important;max-width:none;object-fit:cover!important;object-position:50% 35%;transition:transform 1s var(--ease-out)}
.card:hover .pic img{transform:scale(1.04)}
.card .body{padding:clamp(1.4rem,2.5vw,2rem)}
.card h3{font-size:2rem;letter-spacing:-.02em}
.tag{border-radius:999px;padding:.42rem .7rem;font-size:.66rem;letter-spacing:.14em}

.results{padding-bottom:var(--sec-y)}
.stat{background:var(--c-surface);color:var(--c-ink);min-height:210px;padding:clamp(1.4rem,2.5vw,2rem)}
.stat b{font-size:clamp(3rem,2rem + 3vw,4.6rem);letter-spacing:-.04em}
.stat.cherry{background:var(--c-surface);color:var(--c-ink)}
.stat.cherry b{color:var(--c-cherry-deep)}
.stat.cherry p{color:var(--c-muted)}
.stat.cherry .placeholder-flag{color:var(--c-faint)}
.stat.dark{background:linear-gradient(160deg,#1f3a2b,#10261b)}
.stat.dark b{color:var(--c-yellow)}
.podium{overflow:hidden;background:radial-gradient(110% 90% at 50% 25%,#fbf8f4,#ece6de)}

.lineup{padding:var(--sec-y) 0}
.lu-grid{gap:clamp(.8rem,1.6vw,1.25rem)}
.lu{min-height:300px;padding:clamp(1.3rem,2vw,1.6rem)}
.lu b{font-size:1.7rem;letter-spacing:-.02em}
.lu .nm{font-size:1.3rem}

.mega{padding:clamp(4rem,9vw,7.5rem) 0}

/* Footer */
.foot h2{letter-spacing:-.035em}
.foot form{box-shadow:0 20px 50px -20px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.4)}
.foot-links{border-top:1px solid rgba(255,255,255,.1);padding-top:var(--s-6)}
.foot-links nav{gap:var(--s-6)}

/* ── Inner pages ── */
.sec{padding:var(--sec-y) 0}
.phero{padding-bottom:clamp(5rem,9vw,7.5rem)}
.phero::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:var(--edge)}
.scard{min-height:400px;padding:clamp(1.5rem,2.5vw,2rem)}
.scard h3{font-size:2.3rem;letter-spacing:-.025em}
.demo{padding:clamp(1.5rem,3.5vw,3rem)}
.demo h3{letter-spacing:-.025em}
.steps li{border-radius:22px;box-shadow:inset 0 0 0 1px var(--edge);min-height:200px}
.steps li .num{font-size:2.8rem;letter-spacing:-.03em}
.faq summary{font-size:1.6rem;letter-spacing:-.015em}
.faq details{border-color:var(--edge-strong)}
.needs button{box-shadow:inset 0 0 0 1px var(--edge-strong)}
.tl-card .ic svg{width:26px;height:26px}

/* Nav bar edge */
.nav-bar{box-shadow:0 12px 40px -12px rgba(20,14,8,.25),0 1px 2px rgba(20,14,8,.06),inset 0 0 0 1px rgba(255,255,255,.8)}

@media (max-width:640px){
  .card:hover,.scard:hover,.lu:hover,.incl li:hover,.dcard:hover{transform:none}
  .intro h2{font-size:clamp(2.6rem,10vw,3.4rem)}
  .scard{min-height:340px}
  .lu{min-height:230px}
}
.card:focus-visible,.scard:focus-visible,.lu:focus-visible,.dcard:focus-visible{outline:2.5px solid var(--c-cherry);outline-offset:3px}

/* Related services: two wide cards instead of two-of-three */
.svc-grid:not(#svcGrid){grid-template-columns:repeat(2,minmax(0,1fr))}
.svc-grid:not(#svcGrid) .scard{min-height:340px}
.svc-grid:not(#svcGrid) .scard img{height:62%}
/* FAQ: heading left, questions right */
section:has(> .faq){display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(2rem,6vw,5rem);align-items:start}
section:has(> .faq) .sec-head{margin:0;position:sticky;top:110px}
.faq{max-width:none}
.faq summary{min-height:72px}
.faq p{font-size:var(--t-base);line-height:1.6}
@media (max-width:900px){
  .svc-grid:not(#svcGrid){grid-template-columns:minmax(0,1fr)}
  section:has(> .faq){grid-template-columns:minmax(0,1fr)}
  section:has(> .faq) .sec-head{position:static}
}

/* ── Homepage: one bespoke section per service ── */
.lineup{padding:var(--sec-y) 0 clamp(2rem,4vw,3rem)}
.lineup .sec-head{margin-bottom:0}
.svx{position:relative;padding:clamp(4.5rem,9vw,8rem) 0;background:linear-gradient(180deg,var(--c-bg) 0%,var(--tint) 18%,var(--tint) 82%,var(--c-bg) 100%);overflow:hidden}
.svx-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.svx.flip .svx-copy{order:2}
.svx-k{font:600 var(--t-xs)/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:.5rem}
.svx-k::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.svx-name{display:block;margin-top:.9rem;font:600 var(--t-sm)/1 var(--f-body);color:var(--c-muted)}
.svx h3{font:400 clamp(2.6rem,1.4rem + 3.6vw,4.8rem)/.94 var(--f-display);letter-spacing:-.035em;margin:.6rem 0 1.1rem;max-width:12ch}
.svx h3 .script{color:var(--accent);font-size:1.06em}
.svx-copy p{margin:0 0 1.4rem;max-width:32rem;font-size:var(--t-lg);line-height:1.55;color:#5b4f44}
.svx-copy ul{list-style:none;margin:0 0 1.8rem;padding:0;display:flex;flex-wrap:wrap;gap:8px;max-width:34rem}
.svx-copy li{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .85rem;border-radius:999px;background:rgba(255,255,255,.75);font-size:var(--t-sm);font-weight:600;box-shadow:inset 0 0 0 1px rgba(34,30,27,.06)}
.svx-copy li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.svx-acts{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.svx-link{font-weight:600;font-size:var(--t-sm);color:var(--c-ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px}
.svx-vis{position:relative;min-height:440px;display:grid;place-items:center}
.svx-char{position:absolute;width:auto;height:150px;right:-2%;bottom:-4%;z-index:5;filter:drop-shadow(0 18px 18px rgba(40,20,0,.25));transform:translateY(30px) rotate(8deg) scale(.8);opacity:0;transition:transform .9s var(--ease-spring) .5s,opacity .5s .5s}
.svx.flip .svx-char{right:auto;left:-2%;transform:translateY(30px) rotate(-8deg) scale(.8)}
.svx.is-on .svx-char{opacity:1;transform:none}
.sc{position:relative;width:min(100%,500px)}
.sc *{box-sizing:border-box}
/* every scene eases in */
.sc>*{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease-out),transform .9s var(--ease-out)}
.svx.is-on .sc>*{opacity:1;transform:none}
.svx.is-on .sc>*:nth-child(2){transition-delay:.1s}.svx.is-on .sc>*:nth-child(3){transition-delay:.2s}.svx.is-on .sc>*:nth-child(4){transition-delay:.3s}.svx.is-on .sc>*:nth-child(5){transition-delay:.4s}.svx.is-on .sc>*:nth-child(6){transition-delay:.5s}

/* 01 Branding: brand board */
.sc-brand{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:120px;gap:12px}
.bt{border-radius:20px;background:#fff;box-shadow:var(--sh-card);display:grid;place-items:center;overflow:hidden}
.bt-mark{background:#1a3d2b}.m-dot{width:34px;height:34px;border-radius:50%;background:#d9531c;margin-right:-10px}.m-dot.b{background:#f6c945;margin:0}
.bt-mark{display:flex;justify-content:center;align-items:center}
.bt-word{grid-column:span 2;background:#fff0e6;text-align:center}.bt-word b{font:400 3rem/.9 var(--f-display);color:#d9531c;letter-spacing:-.03em}.bt-word small{display:block;font:500 1.3rem var(--f-hand);color:#1a3d2b}
.bt-sw{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:12px;background:#fff}.bt-sw i{border-radius:10px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.bt-type{grid-template-columns:auto auto;gap:10px;justify-content:center}.bt-type b{font:400 3.2rem/1 var(--f-display)}.bt-type span{font-size:11px;color:var(--c-muted);line-height:1.4}
.bt-card{background:#1a3d2b;color:#fff;text-align:left;place-items:start;padding:18px;align-content:end}.bt-card b{font:400 1.2rem var(--f-display);color:#f6c945}.bt-card small{font-size:11px;opacity:.7}
.bt-post{grid-column:span 3;height:auto;background:linear-gradient(120deg,#d9531c,#f6c945);color:#fff;place-items:center start;padding:0 26px}.bt-post span{font:400 2rem/1 var(--f-display)}

/* 02 UX/UI: wireframe to design */
.sc-ux{display:grid;place-items:center;height:440px}
.phone{width:230px;height:430px;border-radius:38px;background:#1d1a18;padding:10px;box-shadow:0 30px 60px -24px rgba(40,20,80,.45)}
.ph-screen{height:100%;border-radius:30px;background:#fbf8f3;padding:16px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.ux-img{height:170px;border-radius:18px;background:#e7e2f6;transition:background 1s 1s}
.ux-t,.ux-s{height:14px;border-radius:7px;background:#ddd6ee;transition:background .8s 1.2s,width .8s 1.2s}.ux-t{width:80%;height:20px}.ux-s{width:50%}
.ux-sizes{display:flex;gap:6px}.ux-sizes i{flex:1;height:30px;border-radius:9px;box-shadow:inset 0 0 0 1.5px #d4cce8}
.ux-btn{margin-top:auto;height:46px;border-radius:999px;background:#d4cce8;display:grid;place-items:center;font-size:13px;font-weight:600;color:transparent;transition:background .8s 1.4s,color .8s 1.4s,transform .2s}
.svx.is-on .ux-img{background:url(/assets/biz/skincare.webp) center/cover}
.svx.is-on .ux-t{background:#221e1b}.svx.is-on .ux-s{background:#b6abd8}
.svx.is-on .ux-btn{background:var(--accent);color:#fff;animation:tap 3.2s 2.4s infinite}
@keyframes tap{0%,70%,100%{transform:none}76%{transform:scale(.94)}}
.ux-note{position:absolute;font:500 1.25rem/1 var(--f-hand);color:var(--accent);background:#fff;padding:.45rem .75rem;border-radius:12px;box-shadow:var(--sh-card)}
.ux-note.n1{left:0;top:26%;rotate:-5deg}.ux-note.n2{right:0;bottom:24%;rotate:4deg}
.cursor{position:absolute;left:60%;top:40%;width:22px;height:22px;background:#fff;clip-path:polygon(0 0,0 100%,30% 72%,52% 100%,66% 92%,46% 64%,84% 64%);filter:drop-shadow(0 2px 2px rgba(0,0,0,.4))}
.svx.is-on .cursor{animation:cur 3.2s 2s infinite}
@keyframes cur{0%{left:68%;top:30%}55%,80%{left:52%;top:79%}100%{left:68%;top:30%}}

/* 03 AI integration: automation flow */
.sc-ai{display:grid;gap:18px}
.flow{position:relative;display:grid;gap:14px;padding-left:26px}
.flow::before{content:"";position:absolute;left:8px;top:20px;bottom:20px;width:2px;background:linear-gradient(var(--accent),rgba(44,123,212,.2))}
.node{position:relative;background:#fff;border-radius:16px;padding:14px 18px;box-shadow:var(--sh-card)}
.node::before{content:"";position:absolute;left:-24px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--accent)}
.node small{display:block;font:600 10px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted);margin-bottom:4px}
.node b{font:400 1.25rem/1.1 var(--f-display)}
.node.bot{background:linear-gradient(135deg,#2c7bd4,#5aa3ee);color:#fff}.node.bot small{color:rgba(255,255,255,.75)}
.pulse{position:absolute;left:3px;top:20px;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px rgba(44,123,212,.2)}
.svx.is-on .pulse{animation:travel 2.6s ease-in-out infinite}
@keyframes travel{0%{top:20px}100%{top:calc(100% - 32px)}}
.ai-chip{justify-self:start;margin-left:26px;padding:.7rem 1rem;border-radius:999px;background:#fff;box-shadow:var(--sh-card);font-size:var(--t-sm);color:var(--c-muted)}
.ai-chip b{font:400 1.4rem var(--f-display);color:var(--c-ink);margin-right:.2rem}
.ai-chip small{display:inline-block;margin-right:.5rem;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-faint)}

/* 04 SEO & AEO: results page */
.serp{background:#fff;border-radius:24px;padding:20px;box-shadow:var(--sh-card);display:grid;gap:12px}
.q{display:flex;align-items:center;gap:10px;height:46px;padding:0 16px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(34,30,27,.12);font-size:var(--t-sm)}
.q i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--c-muted)}
.typed{display:inline-block;overflow:hidden;white-space:nowrap;width:0;border-right:2px solid var(--c-ink)}
.svx.is-on .typed{animation:type 1.6s steps(26) .4s forwards,caret .8s step-end 6}
@keyframes type{to{width:26ch}}@keyframes caret{50%{border-color:transparent}}
.ov{border-radius:16px;padding:14px 16px;background:linear-gradient(135deg,#e4f7f2,#f2fbf8);box-shadow:inset 0 0 0 1px rgba(15,143,134,.2)}
.ov small{font:600 10px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.ov p{margin:.4rem 0;font-size:var(--t-sm);line-height:1.5}.ov p b{background:linear-gradient(transparent 55%,rgba(47,211,199,.5) 0)}
.cite{font-size:11px;color:var(--accent);font-weight:600}
.res{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:14px}
.res.win{background:#f4faf8;box-shadow:inset 0 0 0 2px var(--accent)}
.rk{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:#f1ede7}.res.win .rk{background:var(--accent);color:#fff}
.res b{display:block;font-size:var(--t-sm)}.res small{font-size:11px;color:#2a7f3b}
.res .ghost{display:block;height:10px;border-radius:5px;background:#eee8e0;width:200px}.res small.ghost{width:120px;margin-top:6px}

/* 05 App engineering: dark console */
.svx-app-platform-engineering{background:linear-gradient(180deg,var(--c-bg) 0%,#1c2436 16%,#1c2436 84%,var(--c-bg) 100%);color:#e9ecf3}
.svx-app-platform-engineering .svx-name,.svx-app-platform-engineering .svx-copy p{color:rgba(233,236,243,.75)}
.svx-app-platform-engineering .svx-k,.svx-app-platform-engineering h3 .script{color:#8fb0ff}
.svx-app-platform-engineering .svx-copy li{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.svx-app-platform-engineering .svx-copy li::before{background:#8fb0ff}
.svx-app-platform-engineering .btn.ink{background:#fff;color:#1c2436}
.svx-app-platform-engineering .svx-link{color:#fff;text-decoration-color:#8fb0ff}
.sc-app{display:grid;gap:14px}
.term{border-radius:18px;background:#0f1422;box-shadow:0 30px 60px -20px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.08);overflow:hidden}
.tb{display:flex;align-items:center;gap:6px;padding:12px 14px;background:#171e30}.tb i{width:10px;height:10px;border-radius:50%;background:#ff5f57}.tb i:nth-child(2){background:#febc2e}.tb i:nth-child(3){background:#28c840}
.tb span{margin-left:10px;font:500 11px ui-monospace,Menlo,monospace;color:#7d8aa8}
.term pre{margin:0;padding:18px 20px 22px;font:500 13px/1.9 ui-monospace,Menlo,monospace;color:#cfd8ef;white-space:pre-wrap}
.term em{font-style:normal;color:#8fb0ff}.term .ok{color:#5be3a4}
.ln{opacity:0}
.svx.is-on .ln{animation:lnIn .3s forwards}
.svx.is-on .ln:nth-child(1){animation-delay:.5s}.svx.is-on .ln:nth-child(2){animation-delay:1s}.svx.is-on .ln:nth-child(3){animation-delay:1.5s}.svx.is-on .ln:nth-child(4){animation-delay:2.1s}.svx.is-on .ln:nth-child(5){animation-delay:2.6s}.svx.is-on .ln:nth-child(6){animation-delay:3.1s}
@keyframes lnIn{to{opacity:1}}
.stack{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.stack b{padding:.7rem .4rem;border-radius:12px;text-align:center;font-size:11px;font-weight:600;color:#cfd8ef;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}

/* 06 Shopify: product page + add to cart */
.sc-shop{height:440px}
.pdp{position:absolute;left:0;top:0;width:74%;background:#fff;border-radius:24px;box-shadow:var(--sh-card);overflow:hidden}
.pdp-img{height:230px;background-size:cover;background-position:center}
.pdp-info{padding:16px 18px 20px;display:grid;gap:6px}.pdp-info small{color:var(--c-muted);font-size:12px}.pdp-info b{font:400 1.8rem/1 var(--f-display)}
.pdp-sz{display:flex;gap:6px}.pdp-sz i{font-style:normal;font-size:11px;font-weight:600;padding:.35rem .7rem;border-radius:8px;box-shadow:inset 0 0 0 1.5px #ddd}.pdp-sz i.on{box-shadow:inset 0 0 0 2px var(--c-ink)}
.pdp-btn{margin-top:6px;height:44px;border-radius:999px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:600}
.toast{position:absolute;right:0;top:44%;display:flex;gap:10px;align-items:center;padding:12px 16px;border-radius:16px;background:#1d1a18;color:#fff;box-shadow:0 20px 40px -16px rgba(0,0,0,.5)}
.toast i{font-style:normal;width:26px;height:26px;border-radius:50%;background:var(--accent);display:grid;place-items:center;font-size:13px}
.toast b{display:block;font-size:13px}.toast small{font-size:11px;opacity:.65}
.svx.is-on .toast{transition-delay:1.2s}
.spark{position:absolute;right:4%;bottom:6%;width:46%;padding:12px 14px;border-radius:16px;background:#fff;box-shadow:var(--sh-card)}
.spark small{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted)}
.spark svg{display:block;width:100%;height:44px;margin-top:4px}
.spark path{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:200;stroke-dashoffset:200}
.svx.is-on .spark path{animation:draw 1.4s 1.4s var(--ease-out) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* 07 Growth: A/B test */
.sc-grow{display:grid;gap:14px}
.ab{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.var{position:relative;padding:18px;border-radius:20px;background:#fff;box-shadow:var(--sh-card);display:grid;gap:8px;align-content:start;min-height:190px}
.var small{font:600 10px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted)}
.var b{font:400 1.35rem/1.1 var(--f-display)}
.var .bar{height:10px;border-radius:5px;background:#f1ede7;overflow:hidden;margin-top:auto}
.var .bar i{display:block;height:100%;width:0;border-radius:5px;background:#cfc6b8;transition:width 1.2s var(--ease-out) .6s}
.var.b .bar i{background:var(--accent)}
.svx.is-on .var .bar i{width:var(--v)}
.var span{font:400 1.6rem/1 var(--f-display)}
.var em{position:absolute;top:14px;right:14px;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .55rem;border-radius:999px;background:var(--accent);color:#fff;opacity:0;transform:scale(.6);transition:all .5s var(--ease-spring) 1.6s}
.svx.is-on .var em{opacity:1;transform:none}
.var.b{box-shadow:0 0 0 2px var(--accent),var(--sh-card)}
.budget{padding:16px 18px;border-radius:20px;background:#fff;box-shadow:var(--sh-card)}
.budget small{font-size:11px;color:var(--c-muted)}
.bud{display:flex;height:16px;border-radius:8px;overflow:hidden;margin-top:10px;background:#f1ede7}
.bud i{height:100%;transition:width 1.2s var(--ease-out) 2s}.ba{width:50%;background:#cfc6b8}.bb{width:50%;background:var(--accent)}
.svx.is-on .ba{width:20%}.svx.is-on .bb{width:80%}

/* 08 Social: a post that pops */
.sc-social{display:grid;place-items:center;height:460px}
.post{width:280px;background:#fff;border-radius:22px;box-shadow:var(--sh-card);overflow:hidden;font-size:12px}
.post .ph{display:grid;grid-template-columns:auto 1fr;column-gap:8px;padding:12px 14px;align-items:center}
.post .ph i{grid-row:span 2;width:30px;height:30px;border-radius:50%;background:conic-gradient(var(--accent),#f6c945,var(--accent));box-shadow:inset 0 0 0 3px #fff}
.post .ph small{color:var(--c-muted);font-size:10px}
.pimg{height:250px;background-size:cover;background-position:center 20%}
.pact{display:flex;align-items:center;gap:8px;padding:10px 14px 4px}
.heart{font-size:20px;color:#c9c0b5;transition:color .3s 1s,transform .4s var(--ease-spring) 1s}
.svx.is-on .heart{color:var(--accent);transform:scale(1.2)}
.post p{margin:0;padding:2px 14px 14px;line-height:1.4}
.bubble{position:absolute;padding:.55rem .85rem;border-radius:16px 16px 16px 4px;background:#fff;box-shadow:var(--sh-card);font-size:12px;font-weight:600}
.bubble.c1{left:2%;top:30%}.bubble.c2{right:4%;top:58%;border-radius:16px 16px 4px 16px}
.hearts{position:absolute;inset:0;pointer-events:none}
.hearts i{position:absolute;bottom:20%;left:60%;width:14px;height:14px;background:var(--accent);clip-path:path('M7 13 L1.5 7.5 A3.2 3.2 0 0 1 7 3 A3.2 3.2 0 0 1 12.5 7.5 Z');opacity:0}
.svx.is-on .hearts i{animation:float 3s ease-out infinite}
.hearts i:nth-child(2){left:66%;animation-delay:.6s!important}.hearts i:nth-child(3){left:56%;animation-delay:1.2s!important}.hearts i:nth-child(4){left:70%;animation-delay:1.8s!important}.hearts i:nth-child(5){left:62%;animation-delay:2.4s!important}
@keyframes float{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translateY(-180px) translateX(20px) scale(1.2)}}

@media (max-width:900px){
  .svx-grid{grid-template-columns:minmax(0,1fr)}
  .svx.flip .svx-copy{order:0}
  .svx-vis{min-height:0;padding:1rem 0 2rem}
  .svx-char{height:110px;right:0;bottom:-6%}
  .svx.flip .svx-char{left:auto;right:0}
}
@media (max-width:520px){
  .sc-brand{grid-auto-rows:92px;gap:8px}.bt-word b{font-size:2.2rem}.bt-type b{font-size:2.4rem}.bt-post span{font-size:1.5rem}
  .sc-shop{height:400px}.pdp{width:82%}.pdp-img{height:190px}.spark{width:52%}
  .ab{grid-template-columns:minmax(0,1fr)}.var{min-height:0}
  .ux-note{display:none}
}
@media (prefers-reduced-motion:reduce){.svx .sc>*,.svx-char,.ln{opacity:1!important;transform:none!important;animation:none!important}.typed{width:26ch}}
.svx-shopify .svx-char{bottom:-10%;height:130px}