/* Raul feature pages: additions on top of base.css (the homepage's own CSS). Devices, stages, steps, related. */
body.pg h1{font-size:clamp(2.3rem,5.4vw,4.5rem);line-height:.98;letter-spacing:-.05em;max-width:20ch;margin-inline:auto;text-wrap:balance}
body.pg h1 .hl2{background:linear-gradient(var(--hl),var(--hl)) 0 88%/0% .46em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;animation:mk .8s .5s var(--ease) forwards;padding:0 .04em}
@keyframes mk{to{background-size:100% .46em}}
:root[data-theme="dark"] body.pg h1 .hl2{background-image:none;color:var(--hl);text-shadow:0 0 40px rgba(255,225,77,.35)}
body.pg .hero{padding-bottom:20px}
body.pg .hero .kick{animation:up .9s .05s var(--ease) both}
body.pg .hero h1{animation:up .9s .15s var(--ease) both}
body.pg section{padding-block:clamp(56px,8vw,104px)}
body.pg .hero+section{padding-top:0}
.hv{position:relative;max-width:1040px;margin:clamp(40px,6vw,72px) auto 0;padding-bottom:clamp(10px,4vw,48px);animation:up 1.1s .55s var(--ease) both}
.hv .lap{transform:perspective(1600px) rotateX(var(--rx,0deg));transform-origin:50% 100%;transition:transform .2s linear}
.hv .phn{position:absolute;right:-1.5%;bottom:0;width:clamp(120px,22%,240px)}
.hv .float{position:absolute;z-index:3;width:clamp(180px,34%,360px);left:-2%;bottom:2%}
.hv .float img{border-radius:18px}
.fchip{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:8px;padding:.55em .95em;border-radius:999px;font:600 .82rem var(--f-b);color:var(--ink);white-space:nowrap;animation:bob 6s ease-in-out infinite}
.fchip i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.fchip.a{left:2%;top:-14px}.fchip.b{right:4%;top:18%;animation-delay:-2s}.fchip.c{left:40%;bottom:-6px;animation-delay:-4s}
@keyframes bob{50%{transform:translateY(-8px)}}
@media (max-width:700px){.fchip{font-size:.7rem;padding:.4em .7em}.fchip.c{display:none}.hv .phn{right:-3%}}
/* laptop frame */
.lap{position:relative;border-radius:20px;padding:10px 10px 12px;background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(255,255,255,.58));box-shadow:var(--edge),0 34px 80px rgba(70,45,30,.18),0 2px 6px rgba(17,19,24,.06)}
.lap .lbar{display:flex;align-items:center;gap:6px;padding:2px 6px 10px}
.lap .lbar i{width:10px;height:10px;border-radius:50%;background:rgba(17,19,24,.14)}
.lap .lbar i:nth-child(1){background:#FF6B5F}.lap .lbar i:nth-child(2){background:#FFC23D}.lap .lbar i:nth-child(3){background:#2BC48A}
.lap .lbar span{margin-left:10px;flex:1;max-width:320px;padding:.2em .9em;border-radius:99px;background:rgba(17,19,24,.06);font:500 .74rem var(--f-b);color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lap img{display:block;width:100%;height:auto;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line)}
/* phone frame */
.phn{position:relative;width:min(270px,72vw);padding:9px;border-radius:44px;background:#14161C;box-shadow:0 0 0 1.5px #3a3d46 inset,0 40px 80px rgba(17,19,24,.30),0 3px 8px rgba(17,19,24,.12)}
.phn::before{content:"";position:absolute;z-index:3;top:16px;left:50%;width:30%;height:16px;margin-left:-15%;border-radius:99px;background:#14161C}
.phn .scr{position:relative;overflow:hidden;border-radius:36px;aspect-ratio:9/18.4;background:#ECE6E0}
.phn .scr img{display:block;width:100%;height:auto;will-change:transform}
.phn.go .scr img{animation:pscroll 14s ease-in-out 1s infinite alternate}
@keyframes pscroll{0%,8%{transform:translateY(0)}92%,100%{transform:translateY(var(--d,0px))}}
/* stage: glass backing for visuals */
.stage{position:relative;border-radius:28px;padding:clamp(18px,3.4vw,40px);overflow:hidden;background:linear-gradient(150deg,rgba(255,225,77,.22),rgba(255,91,31,.08) 55%,rgba(15,157,138,.10));box-shadow:var(--edge),var(--shadow);display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,34px);flex-wrap:wrap}
.stage::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 30% 20%,rgba(255,255,255,.7),transparent 70%);pointer-events:none}
.stage>*{position:relative}
.stage .lap{width:100%}
.stage.two{flex-wrap:nowrap;align-items:flex-start;gap:clamp(10px,2vw,24px)}.stage.two .phn{width:min(236px,44%);flex:0 1 auto;padding:7px;border-radius:36px}.stage.two .phn .scr{border-radius:30px}.stage.two .phn::before{top:12px;height:12px}.stage.two .phn+.phn{margin-top:clamp(24px,5vw,64px)}
.stage .shot{width:100%}
.shot{margin:0;border-radius:20px;overflow:hidden;background:#fff;box-shadow:var(--edge),0 24px 60px rgba(70,45,30,.16)}
.shot img{display:block;width:100%;height:auto}
.shot.bare{background:none;box-shadow:none;overflow:visible}
.shot.bare img{filter:drop-shadow(0 22px 40px rgba(70,45,30,.22));border-radius:18px}
.feather{-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
.cap{margin:14px 4px 0;font:500 .86rem var(--f-b);color:var(--sub);text-align:center}
.row.wide{grid-template-columns:1fr;gap:clamp(26px,4vw,48px)}
.row.wide .txt{max-width:760px}
.row.wide .cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,56px)}
@media (max-width:820px){.row.wide .cols{grid-template-columns:1fr}}
.txt h2{font-size:clamp(1.9rem,3.8vw,3rem)}
.txt p+p{margin-top:12px}
.txt .lede{margin-top:0}
.txt ul{margin-top:20px}
.txt li{grid-template-columns:22px 1fr}
.txt li a,.prose a,.faq a{text-decoration:underline;text-decoration-color:var(--hl-2);text-underline-offset:3px;text-decoration-thickness:2px}
.say.small{font-size:clamp(1.5rem,3.6vw,2.6rem);max-width:24ch}
/* tone timeline & outs */
.tones{display:grid;gap:10px}
.tone{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:center;padding:14px 16px;border-radius:16px;background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--c)}
.tone b{font:700 1rem var(--f-h);color:var(--ink)}.tone span{color:var(--sub);font-size:.9rem}
.tone i{font:700 .72rem var(--f-m);color:#fff;background:var(--c);padding:.35em .7em;border-radius:99px;font-style:normal}
/* steps cards */
.stp{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:44px;counter-reset:s}
.stp li{list-style:none;counter-increment:s;padding:26px;position:relative}
.stp{padding:0;margin-bottom:0}
.stp li::before{content:"0" counter(s);display:block;font:700 .95rem var(--f-m);color:var(--acc);margin-bottom:12px}
.stp li b{display:block;font:700 1.18rem var(--f-h);color:var(--ink);margin-bottom:6px;letter-spacing:-.015em}
.stp li span{color:var(--sub);font-size:.96rem;display:block}
.prose{max-width:760px;margin:0 auto}
.prose p+p{margin-top:16px}
.prose p{font-size:1.06rem}
.center .lede{margin-inline:auto}
/* related */
.rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:40px;text-align:left}
.rel a{display:block;padding:24px;text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s}
.rel a:hover{transform:translateY(-4px)}
.rel b{display:block;font:700 1.15rem var(--f-h);color:var(--ink);margin-bottom:6px}
.rel span{color:var(--sub);font-size:.94rem;line-height:1.55;display:block}
.rel em{display:inline-block;margin-top:14px;font:600 .9rem var(--f-b);font-style:normal;color:var(--ink);background:linear-gradient(transparent 58%,var(--hl) 58%)}
footer .fg{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--line)}
footer .fg b{color:var(--ink);font:700 .76rem var(--f-b);letter-spacing:.14em;text-transform:uppercase}
/* pricing (static) */
.plan .pr{font:700 2.6rem/1 var(--f-h);color:var(--ink);letter-spacing:-.03em}.plan .pr small{font:500 .95rem var(--f-b);color:var(--sub);letter-spacing:0;margin-left:4px}
.plan .yr{color:var(--sub);font-size:.88rem}
.plan .fo{padding:12px 14px;border-radius:14px;background:var(--ink);color:#fff;font-size:.86rem;font-weight:600;line-height:1.4}
:root[data-theme="dark"] .plan .fo{background:rgba(255,225,77,.1);box-shadow:inset 0 0 0 1px rgba(255,225,77,.4);color:var(--hl)}
/* dark */
:root[data-theme="dark"] .stage{background:linear-gradient(150deg,rgba(255,225,77,.08),rgba(255,255,255,.02));box-shadow:var(--edge)}
:root[data-theme="dark"] .stage::before{display:none}
:root[data-theme="dark"] .lap{background:rgba(255,255,255,.06)}
:root[data-theme="dark"] .lap .lbar span{background:rgba(255,255,255,.08)}
:root[data-theme="dark"] .tone,:root[data-theme="dark"] .shot{background:rgba(255,255,255,.04)}
:root[data-theme="dark"] .fchip{background:rgba(255,255,255,.08)}
@media (prefers-reduced-motion:reduce){.hv,.fchip,body.pg .hero .kick,body.pg .hero h1{animation:none!important}.phn.go .scr img{animation:none!important}body.pg h1 .hl2{animation:none!important;background-size:100% .46em}}

@media (min-width:900px){.stp[data-n="6"]{grid-template-columns:repeat(3,1fr)}.stp[data-n="5"]{grid-template-columns:repeat(6,1fr)}.stp[data-n="5"] li{grid-column:span 2}.stp[data-n="5"] li:nth-child(4){grid-column:2/span 2}.stp[data-n="5"] li:nth-child(5){grid-column:span 2}.stp[data-n="3"]{grid-template-columns:repeat(3,1fr)}}
.hv .float{width:clamp(150px,27%,300px);bottom:5%;left:-3%}
.hv .float img{display:block;width:100%;height:auto}.hv .float{padding:6px;border-radius:22px}body.pg .shot img,body.pg .stage img{max-width:100%;height:auto}