/* Team of One — base design tokens & components (from the design mockup) */
body{margin:0;background:#0d0d0b}
a{color:#ff5b1f}a:hover{color:#ff8a5c}
*{box-sizing:border-box}
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
.pg{font-family:"DM Sans",sans-serif;color:#f2efe6;background:#0d0d0b;overflow:hidden;overflow:clip;position:relative}
.in{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,48px);position:relative}
.sg{font-family:'Space Grotesk',sans-serif}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0;position:relative;z-index:3}
.logo{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:22px;letter-spacing:-.04em;color:#f2efe6;display:flex;align-items:center;gap:8px}
.dot{width:10px;height:10px;border-radius:50%;background:#ff5b1f;display:inline-block;box-shadow:0 0 0 0 rgba(255,91,31,.6);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,91,31,.55)}80%,100%{box-shadow:0 0 0 12px rgba(255,91,31,0)}}
.pill{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(242,239,230,.28);color:#f2efe6;text-decoration:none;font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:14px;transition:background .2s,color .2s}
.pill:hover{background:#f2efe6;color:#0d0d0b}

/* hero */
.glow{position:absolute;width:780px;height:780px;border-radius:50%;background:radial-gradient(circle,rgba(255,91,31,.38),rgba(255,91,31,0) 62%);top:-260px;right:-220px;z-index:0;animation:drift 14s ease-in-out infinite alternate;pointer-events:none}
.glow.b{width:560px;height:560px;left:-260px;top:420px;right:auto;background:radial-gradient(circle,rgba(255,91,31,.16),rgba(255,91,31,0) 62%);animation-duration:18s}
@keyframes drift{to{transform:translate(-80px,60px) scale(1.12)}}
.gridbg{position:absolute;inset:0;background-image:linear-gradient(rgba(242,239,230,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(242,239,230,.045) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 60% 20%,#000 20%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 60% 20%,#000 20%,transparent 70%);pointer-events:none;z-index:0}
.hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px;align-items:center;padding:clamp(28px,5vw,72px) 0 clamp(40px,5vw,64px);position:relative;z-index:2}
.badge{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(242,239,230,.18);background:rgba(242,239,230,.05);border-radius:999px;padding:7px 14px 7px 8px;font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:500;color:#d8d4c8}
.badge b{background:#ff5b1f;color:#0d0d0b;border-radius:999px;padding:3px 9px;font-weight:600;font-size:12px}
.h1{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.06em;line-height:.9;font-size:clamp(50px,7.6vw,112px);margin:22px 0 0}
.h1 .o{color:#ff5b1f}
.strike{position:relative;color:#77746b;white-space:nowrap}
.strike::after{content:"";position:absolute;left:-2%;top:54%;height:.09em;width:104%;background:#ff5b1f;transform:rotate(-3deg) scaleX(0);transform-origin:left;animation:draw .7s cubic-bezier(.7,0,.2,1) 1s forwards}
@keyframes draw{to{transform:rotate(-3deg) scaleX(1)}}
.lead{font-size:clamp(17px,1.5vw,21px);line-height:1.45;color:#c9c5b9;max-width:540px;margin:24px 0 0}
.lead b{color:#f2efe6;font-weight:600}
.cta{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:58px;padding:0 30px;border-radius:999px;background:#ff5b1f;color:#0d0d0b;text-decoration:none;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:17px;letter-spacing:-.01em;transition:transform .2s ease,background .2s,box-shadow .3s;box-shadow:0 10px 40px rgba(255,91,31,.35);overflow:hidden}
.cta::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:shine 3.6s ease-in-out infinite}
@keyframes shine{0%,60%{left:-60%}100%{left:130%}}
.cta:hover{background:#ff7a45;color:#0d0d0b;transform:translateY(-2px);box-shadow:0 16px 50px rgba(255,91,31,.5)}
.cta svg{transition:transform .2s}.cta:hover svg{transform:translateX(4px)}
.cta:focus-visible,.pill:focus-visible,summary:focus-visible{outline:3px solid #f2efe6;outline-offset:3px}
.micro{font-size:14px;color:#9a968b;margin:0;line-height:1.5}
.up{opacity:0;transform:translateY(24px);animation:up .8s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes up{to{opacity:1;transform:none}}

/* builder window */
.win{background:#161614;border:1px solid rgba(242,239,230,.12);border-radius:22px;box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 0 1px rgba(255,91,31,.08);overflow:hidden}
.wbar{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid rgba(242,239,230,.08)}
.wd{width:11px;height:11px;border-radius:50%;background:#3a3a35}
.wt{margin-left:8px;font-family:'Space Grotesk',sans-serif;font-size:13px;color:#9a968b}
.wbody{padding:20px;display:flex;flex-direction:column;gap:14px}
.ask{background:#f2efe6;color:#0d0d0b;border-radius:14px 14px 4px 14px;padding:14px 16px;font-size:15px;line-height:1.45;align-self:flex-end;max-width:92%}
.typed{display:inline;overflow:hidden;white-space:normal}
.caret{display:inline-block;width:2px;height:1em;background:#ff5b1f;vertical-align:-2px;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.stp{display:flex;align-items:center;gap:12px;font-size:15px;color:#d8d4c8;opacity:0;transform:translateX(-10px);animation:stepin .45s ease forwards}
@keyframes stepin{to{opacity:1;transform:none}}
.ck{flex:0 0 22px;height:22px;border-radius:50%;border:1.5px solid #ff5b1f;display:flex;align-items:center;justify-content:center;position:relative}
.ck svg{opacity:0;animation:pop .3s ease forwards;animation-delay:inherit}
.ck::after{content:"";position:absolute;inset:-1.5px;border-radius:50%;background:#ff5b1f;transform:scale(0);animation:fill .3s ease forwards;animation-delay:inherit;z-index:0}
.ck svg{position:relative;z-index:1}
@keyframes fill{to{transform:scale(1)}}
@keyframes pop{to{opacity:1}}
.done{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-radius:14px;background:rgba(255,91,31,.1);border:1px solid rgba(255,91,31,.35);padding:14px 16px;opacity:0;animation:up .6s ease forwards}
.tag{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:999px;white-space:nowrap}
.tag.o{background:#ff5b1f;color:#0d0d0b}
.tag.l{background:#f2efe6;color:#0d0d0b}
.tag.d{background:rgba(242,239,230,.1);color:#f2efe6}

/* stat strip */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(242,239,230,.12);border-bottom:1px solid rgba(242,239,230,.12);position:relative;z-index:2}
.stat{padding:26px 22px;border-right:1px solid rgba(242,239,230,.12);display:flex;flex-direction:column;gap:6px}
.stat:last-child{border-right:0}
.sv{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(30px,3.4vw,46px);letter-spacing:-.06em;line-height:1}
.sv .o{color:#ff5b1f}
.sl{font-size:14px;color:#9a968b;line-height:1.35}

/* ticker */
.ticker{background:#ff5b1f;color:#0d0d0b;padding:16px 0;white-space:nowrap;overflow:hidden;transform:rotate(-1.2deg);margin:clamp(48px,6vw,80px) -20px 0;position:relative;z-index:2}
.trk{display:inline-flex;gap:26px;align-items:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(20px,2.2vw,30px);letter-spacing:-.03em;animation:tk 40s linear infinite}
@keyframes tk{to{transform:translateX(-50%)}}

/* sections */
.sec{padding:clamp(80px,10vw,140px) 0;position:relative}
.paper{background:#f2efe6;color:#0d0d0b}
.eyebrow{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#ff5b1f;margin:0}
.h2{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.055em;line-height:.95;font-size:clamp(40px,5.6vw,80px);margin:14px 0 0;max-width:980px}
.h2 .m{color:#77746b}
.paper .h2 .m{color:#9a968b}

/* bento */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;margin-top:56px}
.bx{border-radius:24px;padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.bx:hover{transform:translateY(-6px)}
.bx.dk{background:#0d0d0b;color:#f2efe6}
.bx.dk:hover{box-shadow:0 24px 60px rgba(13,13,11,.35)}
.bx.or{background:#ff5b1f;color:#0d0d0b}
.bx.wh{background:#fff;border:1px solid rgba(13,13,11,.08)}
.bx.wh:hover{box-shadow:0 24px 60px rgba(13,13,11,.12)}
.bt{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(26px,2.6vw,38px);letter-spacing:-.05em;line-height:.98;margin:0}
.bp{font-size:16px;line-height:1.5;margin:0;max-width:520px}
.bx.dk .bp{color:#b8b4a8}
.bx.wh .bp{color:#55524a}
.kicker{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.sys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:auto}
.sy{border-radius:14px;background:rgba(242,239,230,.06);border:1px solid rgba(242,239,230,.1);padding:14px;display:flex;flex-direction:column;gap:6px;transition:background .25s,border-color .25s}
.sy:hover{background:rgba(255,91,31,.12);border-color:rgba(255,91,31,.5)}
.sy b{font-family:'Space Grotesk',sans-serif;font-size:16px;letter-spacing:-.03em;font-weight:600}
.sy span{font-size:13px;color:#9a968b;line-height:1.35}
.sy.new{border-style:dashed;border-color:#ff5b1f}
.sy.new b{color:#ff5b1f}
.bubble{border-radius:14px;padding:12px 14px;font-size:14px;line-height:1.4;max-width:90%}
.bubble.me{background:#0d0d0b;color:#f2efe6;align-self:flex-end;border-radius:14px 14px 4px 14px}
.bubble.it{background:rgba(13,13,11,.12);color:#0d0d0b;border-radius:14px 14px 14px 4px}
.kit{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.kit div{display:flex;align-items:center;gap:10px;font-size:15px;padding:10px 0;border-top:1px dashed rgba(13,13,11,.2)}
.live{display:inline-flex;align-items:center;gap:8px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#ff5b1f}
.live i{width:8px;height:8px;border-radius:50%;background:#ff5b1f;animation:pulse 1.8s ease-out infinite}
.spin{animation:rot 8s linear infinite;transform-origin:center}
@keyframes rot{to{transform:rotate(360deg)}}

/* before after */
.ba{display:flex;flex-direction:column;gap:22px;margin-top:56px}
.job{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;align-items:center;padding-bottom:22px;border-bottom:1px solid rgba(242,239,230,.12)}
.jn{grid-column:span 3;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(18px,1.7vw,22px);letter-spacing:-.03em}
.bars{grid-column:span 9;display:flex;flex-direction:column;gap:8px}
.br{display:flex;align-items:center;gap:12px}
.track{flex:1;height:14px;border-radius:999px;background:rgba(242,239,230,.06);overflow:hidden}
.fillh{height:100%;width:100%;border-radius:999px;background:#3a3a35}
.fillo{height:100%;width:var(--w);border-radius:999px;background:#ff5b1f;box-shadow:0 0 20px rgba(255,91,31,.6)}
.bl{flex:0 0 72px;text-align:right;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px}
.bl.m{color:#77746b}
.bl.o{color:#ff5b1f}

/* compare */
.cmp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:56px}
.cc{border-radius:24px;padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;gap:18px;border:1px solid rgba(13,13,11,.12)}
.cc.us{background:#0d0d0b;color:#f2efe6;border-color:#0d0d0b;transform:translateY(-12px);box-shadow:0 30px 70px rgba(13,13,11,.3)}
.cp{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(34px,3.6vw,52px);letter-spacing:-.06em;line-height:1}
.cr{display:flex;flex-direction:column;gap:4px;padding-top:14px;border-top:1px solid rgba(13,13,11,.12)}
.cc.us .cr{border-color:rgba(242,239,230,.14)}
.crl{font-family:'Space Grotesk',sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#77746b}
.crv{font-size:16px;line-height:1.4}
.cc.them .crv{color:#55524a}

/* price */
.price{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px;align-items:center}
.ring{border-radius:30px;padding:2px;background:conic-gradient(from var(--ang),#ff5b1f,rgba(255,91,31,.05) 25%,rgba(255,91,31,.05) 50%,#ffb38f 62%,rgba(255,91,31,.05) 75%,#ff5b1f);animation:ring 5s linear infinite;box-shadow:0 30px 90px rgba(255,91,31,.18)}
@keyframes ring{to{--ang:360deg}}
.pcard{background:#141412;border-radius:28px;padding:clamp(26px,3.4vw,44px);display:flex;flex-direction:column;gap:18px}
.amt{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(84px,9vw,136px);letter-spacing:-.08em;line-height:.8}
.pl{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.4;margin:0;color:#d8d4c8}
.pl svg{flex:0 0 20px;margin-top:1px}
.pl b{color:#f2efe6;font-weight:600}
.cta.w{width:100%}
.guar{display:flex;gap:18px;align-items:center;border:1px dashed rgba(242,239,230,.25);border-radius:20px;padding:20px;margin-top:22px}
.seal{flex:0 0 86px;height:86px;border-radius:50%;border:2px dashed #ff5b1f;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#ff5b1f;font-family:'Space Grotesk',sans-serif;line-height:1}

/* faq */
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;margin-top:44px}
details{border-top:1.5px solid #0d0d0b}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;min-height:44px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(18px,1.6vw,21px);letter-spacing:-.03em}
summary::-webkit-details-marker{display:none}
summary .pm{flex:0 0 32px;height:32px;border-radius:50%;background:#0d0d0b;color:#f2efe6;display:flex;align-items:center;justify-content:center;transition:transform .3s,background .3s}
details[open] summary .pm{transform:rotate(45deg);background:#ff5b1f;color:#0d0d0b}
details p{margin:0 0 24px;font-size:16px;line-height:1.55;color:#55524a;max-width:520px}

/* final */
.final{text-align:center;display:flex;flex-direction:column;align-items:center;gap:30px}
.mega{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.07em;line-height:.86;font-size:clamp(56px,10vw,168px);margin:0}
.mega .o{color:#ff5b1f}
.foot{border-top:1px solid rgba(242,239,230,.14);padding:26px 0 34px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;font-size:14px;color:#9a968b}
.flinks{display:flex;gap:20px;flex-wrap:wrap}
.flinks a{color:#9a968b;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}.flinks a:hover{color:#f2efe6}

/* scroll reveal (progressive) */

@media (max-width:1000px){
.hero,.price{grid-template-columns:repeat(1,minmax(0,1fr))}.hero>*,.price>*{grid-column:auto!important}
.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat:nth-child(2){border-right:0}.stat:nth-child(-n+2){border-bottom:1px solid rgba(242,239,230,.12)}
.bento>*{grid-column:span 12!important}
.cmp{grid-template-columns:repeat(1,minmax(0,1fr))}.cc.us{transform:none}
.jn,.bars{grid-column:span 12}
}
@media (max-width:640px){.sys{grid-template-columns:repeat(2,minmax(0,1fr))}.faq{grid-template-columns:repeat(1,minmax(0,1fr))}.nav .pill{display:none}.bl{flex-basis:56px;font-size:13px}}
@media (max-width:420px){.stats{grid-template-columns:repeat(1,minmax(0,1fr))}.stat{border-right:0!important;border-bottom:1px solid rgba(242,239,230,.12)}.sys{grid-template-columns:repeat(1,minmax(0,1fr))}}


.player{max-width:1040px;margin:48px auto 0;background:#161614;border:1px solid rgba(242,239,230,.12);border-radius:22px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.6);text-align:left}
.pbody{display:grid;grid-template-columns:260px minmax(0,1fr)}
.pside{border-right:1px solid rgba(242,239,230,.08);padding:16px;display:flex;flex-direction:column;gap:6px}
.les{display:flex;align-items:center;gap:10px;font-size:14px;color:#b8b4a8;padding:9px 10px;border-radius:10px}
.les.on{background:rgba(255,91,31,.12);color:#f2efe6}
.lnum{flex:0 0 22px;height:22px;border-radius:50%;background:rgba(242,239,230,.08);display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:600}
.les.on .lnum{background:#ff5b1f;color:#0d0d0b}
.pvid{position:relative;min-height:340px;background:radial-gradient(circle at 75% 30%,rgba(255,91,31,.45),transparent 55%),linear-gradient(135deg,#1d1c19,#0d0d0b);padding:30px;display:flex;flex-direction:column;justify-content:space-between}
.vtitle{display:flex;flex-direction:column;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(36px,4.6vw,64px);letter-spacing:-.06em;line-height:.9}
.vtitle .o{color:#ff5b1f}
.crew{display:flex;gap:8px;flex-wrap:wrap}
.cm{border:1px solid rgba(242,239,230,.25);border-radius:999px;padding:7px 12px;font-family:'Space Grotesk',sans-serif;font-size:13px;background:rgba(13,13,11,.5)}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;border:0;background:#ff5b1f;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 0 0 12px rgba(255,91,31,.18);animation:pulse 2.4s ease-out infinite}
.vbar{height:4px;border-radius:999px;background:rgba(242,239,230,.15);overflow:hidden}.vbar span{display:block;height:100%;background:#ff5b1f}
.app{display:grid;grid-template-columns:240px minmax(0,1fr);margin-top:52px;border:1px solid rgba(242,239,230,.12);border-radius:22px;overflow:hidden;background:#141412}
.aside{border-right:1px solid rgba(242,239,230,.08);padding:20px 14px;display:flex;flex-direction:column;gap:4px}
.agrp{font-family:'Space Grotesk',sans-serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#77746b;margin:14px 8px 4px}
.ait{font-size:14px;color:#c9c5b9;padding:8px;border-radius:8px}.ait.on{background:#ff5b1f;color:#0d0d0b;font-weight:600}
.amain{padding:clamp(20px,3vw,34px);display:flex;flex-direction:column;gap:12px}
.todo{display:flex;align-items:center;gap:12px;font-size:16px;padding:14px;border:1px solid rgba(242,239,230,.1);border-radius:14px}
.todo i{color:#77746b;font-style:normal}
.tb{flex:0 0 22px;height:22px;border-radius:6px;border:1.5px solid rgba(242,239,230,.35)}
.tb.on{background:#ff5b1f;border-color:#ff5b1f}
.nextcall{margin-top:6px;border-radius:14px;background:rgba(255,91,31,.1);border:1px solid rgba(255,91,31,.35);padding:14px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.tile{border:1px solid rgba(242,239,230,.12);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:6px;transition:border-color .25s,transform .25s}
.tile:hover{border-color:#ff5b1f;transform:translateY(-4px)}
.ti{font-family:'Space Grotesk',sans-serif;font-weight:700;color:#ff5b1f;font-size:14px}
.tile b{font-family:'Space Grotesk',sans-serif;font-size:19px;letter-spacing:-.03em}
.tile span:last-child{font-size:14px;color:#b8b4a8;line-height:1.45}
.tl{position:relative;margin-top:52px;display:flex;flex-direction:column;gap:18px;max-width:860px}
.tl::before{content:"";position:absolute;left:10px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,rgba(13,13,11,.15),#ff5b1f)}
.tli{position:relative;padding-left:44px;display:flex;flex-direction:column;gap:8px}
.tli::before{content:"";position:absolute;left:3px;top:4px;width:16px;height:16px;border-radius:50%;background:#f2efe6;border:2px solid #0d0d0b}
.tli.hot::before{background:#ff5b1f;border-color:#ff5b1f;box-shadow:0 0 0 6px rgba(255,91,31,.2)}
.tld{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#77746b}
.tlc{background:#fff;border:1px solid rgba(13,13,11,.08);border-radius:18px;padding:20px 22px;transition:transform .25s,box-shadow .25s}
.tlc:hover{transform:translateX(6px);box-shadow:0 18px 40px rgba(13,13,11,.08)}
.tli.hot .tlc{background:#0d0d0b;color:#f2efe6}
.tlh{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.tlh b{font-family:'Space Grotesk',sans-serif;font-size:21px;letter-spacing:-.03em}
.tlc p{margin:8px 0 0;font-size:16px;line-height:1.5;color:#55524a}
.tli.hot .tlc p{color:#b8b4a8}
.wf{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;margin-top:48px}
.wc{grid-column:span 4;border-radius:20px;overflow:hidden;background:#141412;border:1px solid rgba(242,239,230,.1);display:flex;flex-direction:column;transition:transform .3s,border-color .3s}
.wc.big{grid-column:span 4}
.wc:hover{transform:translateY(-6px);border-color:rgba(255,91,31,.6)}
.th{position:relative;aspect-ratio:16/9;padding:16px;display:flex;align-items:flex-end;overflow:hidden}
.th::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 2px,transparent 2px 16px)}
.th.o1{background:linear-gradient(135deg,#ff5b1f,#ff8a5c)}
.th.d1{background:linear-gradient(135deg,#1f1e1b,#2e2c27)}
.th.s1{background:linear-gradient(135deg,#f2efe6,#e2dccb)}
.tht{position:relative;z-index:1;font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:-.04em;line-height:.92;font-size:clamp(22px,2.2vw,32px)}
.th.o1 .tht,.th.s1 .tht{color:#0d0d0b}
.th.d1 .tht{color:#f2efe6}
.pl2{position:absolute;right:14px;top:14px;z-index:1;width:44px;height:44px;border-radius:50%;background:#f2efe6;display:flex;align-items:center;justify-content:center;transition:transform .25s}
.th.s1 .pl2{background:#ff5b1f}
.wc:hover .pl2{transform:scale(1.12)}
.wb{padding:16px 18px 20px;display:flex;flex-direction:column;gap:6px}
.io{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:#ff5b1f}
.wb b{font-family:'Space Grotesk',sans-serif;font-size:18px;letter-spacing:-.03em}
.wb p{margin:0;font-size:14px;line-height:1.45;color:#b8b4a8}
.checks{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-top:28px;font-family:'Space Grotesk',sans-serif;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#9a968b}
.pt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:48px}
.ptc{background:#fff;border:1px solid rgba(13,13,11,.08);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:8px;transition:transform .25s,box-shadow .25s}
.ptc:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(13,13,11,.1)}
.io2{font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#a33a10}
.ptc b{font-family:'Space Grotesk',sans-serif;font-size:22px;letter-spacing:-.04em}
.ptc p{margin:0;font-size:15px;line-height:1.5;color:#55524a}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,64px);align-items:center}
.num{display:flex;gap:16px;margin-top:22px}
.num>span{font-family:'Space Grotesk',sans-serif;font-weight:700;color:#ff5b1f;font-size:15px;min-width:24px;padding-top:2px}
.num b{font-family:'Space Grotesk',sans-serif;font-size:19px;letter-spacing:-.03em}
.num p{margin:4px 0 0;font-size:15px;line-height:1.5;color:#b8b4a8}
.lesson{background:#161614;border:1px solid rgba(242,239,230,.12);border-radius:22px;overflow:hidden}
.minivid{position:relative;border-radius:14px;padding:22px;background:radial-gradient(circle at 80% 20%,rgba(255,91,31,.4),transparent 60%),#0d0d0b;display:flex;justify-content:space-between;align-items:flex-end;min-height:150px}
.minivid .o{color:#ff5b1f}
.stepl{display:flex;align-items:center;gap:12px;font-size:15px;color:#d8d4c8;padding:10px 12px;border:1px solid rgba(242,239,230,.08);border-radius:12px}
.stepl b{flex:0 0 24px;height:24px;border-radius:50%;background:#ff5b1f;color:#0d0d0b;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-size:13px}
.keep{max-width:1240px;margin:56px auto 0;padding:0 clamp(20px,4vw,48px)}
.keep b{display:block;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.04em;border-top:1px solid rgba(242,239,230,.14);padding-top:26px}
.keep p{margin:10px 0 0;font-size:17px;line-height:1.55;color:#b8b4a8;max-width:760px}
.chk{position:relative;padding-left:32px;margin-top:16px;font-size:16px;line-height:1.5;color:#2b2a26}
.chk::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;background:#ff5b1f}
.chk::after{content:"";position:absolute;left:6px;top:8px;width:8px;height:5px;border-left:2px solid #0d0d0b;border-bottom:2px solid #0d0d0b;transform:rotate(-45deg)}
.chk.dk{color:#d8d4c8}.chk b{font-family:'Space Grotesk',sans-serif}
.tree{background:#fff;border:1px solid rgba(13,13,11,.1);border-radius:22px;overflow:hidden;box-shadow:0 30px 70px rgba(13,13,11,.1)}
.tree b{color:#ff5b1f}
.help{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:48px auto 0;max-width:900px}
.hc{background:#fff;border:1px solid rgba(13,13,11,.08);border-radius:18px;padding:22px}
.hc b{font-family:'Space Grotesk',sans-serif;font-size:19px;letter-spacing:-.03em}
.hc p{margin:6px 0 0;font-size:15px;color:#55524a;line-height:1.5}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.chip{border:1.5px solid rgba(242,239,230,.22);border-radius:999px;padding:12px 20px;font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:clamp(15px,1.4vw,19px);transition:background .2s,color .2s,border-color .2s}
.chip:hover{background:#ff5b1f;color:#0d0d0b;border-color:#ff5b1f}
.calc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:900px;margin:40px auto 0}
.svc{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:#fff;border:1.5px solid rgba(13,13,11,.1);border-radius:16px;padding:16px;cursor:pointer;font-family:'DM Sans',sans-serif;color:#0d0d0b;min-height:64px;transition:border-color .2s,background .2s}
.svc:hover{border-color:#ff5b1f}
.svc.on{border-color:#ff5b1f;background:#fff4ee}
.svc:focus-visible,.tg:focus-visible{outline:3px solid #ff5b1f;outline-offset:2px}
.cb{flex:0 0 22px;height:22px;border-radius:6px;border:1.5px solid rgba(13,13,11,.35)}
.svc.on .cb{background:#ff5b1f;border-color:#ff5b1f}
.cx{flex:1;display:flex;flex-direction:column;gap:2px}
.cx b{font-family:'Space Grotesk',sans-serif;font-size:16px}
.cx span{font-size:13px;color:#55524a}
.cp2{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px}
.calcres{max-width:900px;margin:16px auto 0;background:#0d0d0b;color:#f2efe6;border-radius:20px;padding:24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.calcres>div{display:flex;flex-direction:column;gap:6px}
.crl{font-family:'Space Grotesk',sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#9a968b}
.cv{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(30px,3.4vw,44px);letter-spacing:-.06em;line-height:1}
.cv i{font-style:normal;font-size:.4em;color:#9a968b;letter-spacing:0}
.cv.o{color:#ff5b1f}
.call{background:#161614;border:1px solid rgba(242,239,230,.12);border-radius:22px;overflow:hidden}
.cgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:16px}
.cgrid span{aspect-ratio:16/10;border-radius:10px;background:linear-gradient(135deg,#24231f,#1a1916);display:flex;align-items:flex-end;padding:8px;font-size:12px;color:#9a968b;font-family:'Space Grotesk',sans-serif}
.cgrid span:first-child{background:linear-gradient(135deg,#ff5b1f,#c9461a);color:#0d0d0b}
.topic{font-size:14px;color:#d8d4c8;padding:9px 0;border-top:1px solid rgba(242,239,230,.08)}
.val{max-width:820px;margin:44px auto 0;background:#fff;border:1px solid rgba(13,13,11,.1);border-radius:22px;overflow:hidden}
.vr{display:flex;gap:14px;align-items:flex-start;padding:18px 22px;border-bottom:1px solid rgba(13,13,11,.08)}
.vr b{font-family:'Space Grotesk',sans-serif;font-size:17px;letter-spacing:-.02em;display:block}
.vr span{font-size:14px;color:#55524a}
.vk{flex:0 0 22px;color:#ff5b1f;font-weight:700}
.vr.tot{background:#0d0d0b;color:#f2efe6;align-items:center;justify-content:space-between;border:0}
.vr.tot>div{flex:1}
.tog{display:flex;justify-content:center;gap:8px;margin:34px auto 0;flex-wrap:wrap}
.tg{min-height:52px;border-radius:999px;border:1.5px solid rgba(242,239,230,.2);background:transparent;color:#f2efe6;padding:0 20px;font-family:'Space Grotesk',sans-serif;font-size:15px;cursor:pointer;display:inline-flex;align-items:center;gap:10px}
.tg.on{background:#f2efe6;color:#0d0d0b;border-color:#f2efe6}
.plans3{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin:34px auto 0;align-items:stretch;max-width:860px}
.side{border-radius:28px;border:1.5px solid rgba(242,239,230,.16);padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:14px;height:100%}
.guar2{margin-top:32px;border:1.5px dashed rgba(13,13,11,.3);border-radius:24px;padding:26px;display:flex;gap:22px;align-items:center}
.rev{columns:3 300px;column-gap:14px;margin-top:48px}
.rq,.rvid{break-inside:avoid;margin-bottom:14px;border:1px dashed rgba(242,239,230,.25);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:14px}
.rvid{padding:0;overflow:hidden}
.rvid p,.rvid .rn{padding:0 22px}.rvid .rn{padding-bottom:20px}
.rth{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,#24231f,#141412);display:flex;align-items:flex-end;padding:14px}
.rlab{font-family:'Space Grotesk',sans-serif;font-size:12px;color:#ff8a5c;font-weight:600}
.qm{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:48px;line-height:.5;color:#ff5b1f}
.rq p,.rvid p{margin:0;font-size:16px;line-height:1.5;color:#c9c5b9}
.rn{font-size:13px;color:#9a968b;font-family:'Space Grotesk',sans-serif}
.ph{background:rgba(255,91,31,.16);color:#ff8a5c;border-radius:6px;padding:2px 7px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px}
@media (max-width:1000px){.two,.app,.pbody{grid-template-columns:repeat(1,minmax(0,1fr))}.aside,.pside{display:none}.tiles,.pt{grid-template-columns:repeat(2,minmax(0,1fr))}.wc,.wc.big{grid-column:span 6}}
@media (max-width:640px){.tiles,.pt,.help,.calc,.calcres{grid-template-columns:repeat(1,minmax(0,1fr))}.wc,.wc.big{grid-column:span 12}.guar2{flex-direction:column;align-items:flex-start}}

.pain{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:clamp(17px,1.7vw,22px);color:#9a968b;margin:22px 0 0;letter-spacing:-.01em}
.outs{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:28px}
.outs span{border:1px solid rgba(242,239,230,.18);background:rgba(242,239,230,.04);border-radius:999px;padding:10px 16px;font-size:15px;color:#d8d4c8}
.outs b{font-family:'Space Grotesk',sans-serif;color:#ff5b1f;margin-right:6px}
.po{margin-top:48px;display:flex;flex-direction:column;gap:10px}
.poh{display:grid;grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);gap:12px;font-family:'Space Grotesk',sans-serif;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#77746b;padding:0 4px}
.poh span:last-child{color:#a33a10}
.por{display:grid;grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);gap:12px;align-items:stretch}
.por p{margin:0;border-radius:16px;padding:20px 22px;font-size:clamp(16px,1.5vw,19px);line-height:1.4}
.pb{background:#fff;border:1px solid rgba(13,13,11,.08);color:#55524a;text-decoration:line-through;text-decoration-color:rgba(255,91,31,.55);text-decoration-thickness:2px}
.pg2{background:#0d0d0b;color:#f2efe6;font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:-.02em}
.pa{display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:26px;color:#ff5b1f}
.ev{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:48px}
.evc{background:#fff;border:1px solid rgba(13,13,11,.08);border-radius:22px;padding:26px;display:flex;flex-direction:column;gap:10px;transition:transform .25s,box-shadow .25s}
.evc:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(13,13,11,.1)}
.evn{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:44px;letter-spacing:-.07em;line-height:.9;color:#ff5b1f}
.evc b{font-family:'Space Grotesk',sans-serif;font-size:23px;letter-spacing:-.04em}
.evc p{margin:0;font-size:16px;line-height:1.5;color:#55524a}
.chips.light .chip{border-color:rgba(13,13,11,.2);color:#0d0d0b}
@media (max-width:760px){.poh{display:none}.por{grid-template-columns:minmax(0,1fr)}.pa{transform:rotate(90deg);height:28px}.ev{grid-template-columns:repeat(1,minmax(0,1fr))}}

.mbar{display:none}
@media (max-width:760px){.mbar{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:50;min-height:56px;align-items:center;justify-content:space-between;padding:0 20px;border-radius:999px;background:#ff5b1f;color:#0d0d0b;text-decoration:none;font-family:'Space Grotesk',sans-serif;font-weight:600;box-shadow:0 12px 40px rgba(0,0,0,.45)}.mbar:hover{color:#0d0d0b}.foot{padding-bottom:90px}}

.rq,.rvid{border-style:solid;border-color:rgba(242,239,230,.12);background:#141412;transition:transform .25s,border-color .25s}
.rq:hover,.rvid:hover{transform:translateY(-4px);border-color:rgba(255,91,31,.5)}
.rmet{align-self:flex-start;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13px;background:rgba(255,91,31,.14);color:#ff8a5c;border-radius:999px;padding:6px 12px}
.rp{display:flex;align-items:center;gap:12px;font-size:13px;color:#9a968b;line-height:1.35}
.rp b{color:#f2efe6;font-family:'Space Grotesk',sans-serif;font-size:15px}
.av{flex:0 0 40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#ff5b1f,#ffb38f);color:#0d0d0b;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px}
.rvid .rp{padding:0 22px 20px}
.rth{background:radial-gradient(circle at 70% 30%,rgba(255,91,31,.35),transparent 60%),linear-gradient(135deg,#24231f,#141412)}
.rth .pl2{left:50%;top:50%;right:auto;transform:translate(-50%,-50%);width:58px;height:58px;background:#ff5b1f}
.sample{margin:26px auto 0;max-width:max-content;border:1.5px dashed #ff5b1f;color:#ff8a5c;border-radius:999px;padding:8px 16px;font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:600}

/* =========================================================
   Enhancement layer: motion, CX and conversion
   ========================================================= */
:root{interpolate-size:allow-keywords;--ease:cubic-bezier(.2,.7,.2,1)}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#f2efe6}
::selection{background:#ff5b1f;color:#0d0d0b}
img,svg{display:block}
.cta svg,.pill svg{display:inline-block}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:#ff5b1f;color:#0d0d0b;padding:12px 18px;border-radius:999px;font-family:'Space Grotesk',sans-serif;font-weight:600;text-decoration:none;transition:top .2s}
.skip:focus{top:12px;color:#0d0d0b}

/* scroll progress */
.progress{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:left;transform:scaleX(var(--p,0));background:linear-gradient(90deg,#ff5b1f,#ffb38f);z-index:120;pointer-events:none}

/* sticky glass nav */
.hdr{position:sticky;top:0;z-index:100;transition:background .35s,backdrop-filter .35s,border-color .35s;border-bottom:1px solid transparent}
.hdr.scrolled{background:rgba(13,13,11,.72);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-color:rgba(242,239,230,.08)}
.hdr .nav{padding:18px 0;transition:padding .35s}
.hdr.scrolled .nav{padding:10px 0}
.logo{text-decoration:none}
.logo:hover{color:#f2efe6}
.navlinks{display:flex;gap:4px;align-items:center}
.navlinks a.nl{color:#c9c5b9;text-decoration:none;font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:500;padding:10px 14px;border-radius:999px;transition:color .2s,background .2s}
.navlinks a.nl:hover{color:#f2efe6;background:rgba(242,239,230,.07)}
.pill.solid{background:#ff5b1f;color:#0d0d0b;border-color:#ff5b1f;font-weight:600}
.pill.solid:hover{background:#ff7a45;color:#0d0d0b}
@media (max-width:860px){.navlinks a.nl{display:none}}
@media (max-width:640px){.nav .pill{display:inline-flex}.nav .pill.ghost{display:none}.pill.solid{min-height:40px;padding:0 14px;font-size:13px}}

/* hero word reveal */
.h1 .w{display:inline-block;opacity:0;transform:translateY(.45em) rotate(2deg);filter:blur(8px);animation:word .9s var(--ease) forwards}
@keyframes word{to{opacity:1;transform:none;filter:none}}
.h1 .o .w{background:linear-gradient(100deg,#ff5b1f 0%,#ffb38f 50%,#ff5b1f 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:word .9s var(--ease) forwards,sheen 6s ease-in-out 2s infinite}
@keyframes sheen{0%,100%{background-position:0 0}50%{background-position:100% 0}}

/* trust strip in hero */
.trust{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 22px;margin-top:22px;font-size:14px;color:#9a968b}
.trust span{display:inline-flex;align-items:center;gap:8px}
.trust svg{flex:0 0 16px}

/* live player demo */
.player{transition:transform .6s var(--ease)}
.les{transition:background .35s,color .35s}
.les .lnum{transition:background .35s,color .35s}
.vtitle span{display:block}
.vtitle.swap span{animation:vt .6s var(--ease) both}
.vtitle.swap span+span{animation-delay:.08s}
@keyframes vt{from{opacity:0;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.cm{transition:background .3s,color .3s,border-color .3s}
.cm.hi{background:#ff5b1f;color:#0d0d0b;border-color:#ff5b1f}
.vbar span{transition:width .25s linear}
.play{transition:transform .25s var(--ease)}
.play:hover{transform:translate(-50%,-50%) scale(1.08)}
.vstate{position:absolute;right:30px;top:30px;font-family:'Space Grotesk',sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#d8d4c8;display:flex;align-items:center;gap:8px}
.vstate i{width:8px;height:8px;border-radius:50%;background:#ff5b1f;animation:pulse 1.8s ease-out infinite}

/* reveal (IntersectionObserver driven — works in every browser) */
.js .rv{opacity:0;transform:translateY(42px) scale(.985);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.js .rv.in-view{opacity:1;transform:none}

/* pain → output rows */
.por .pb{text-decoration:none;position:relative}
.por .pb s{text-decoration:none;background:linear-gradient(rgba(255,91,31,.75),rgba(255,91,31,.75)) no-repeat 0 58%/0% 2px;transition:background-size .8s var(--ease) .35s}
.por.in-view .pb s{background-size:100% 2px}
.por .pa{transition:transform .5s var(--ease) .6s,opacity .5s .6s}
.js .por .pa{opacity:0;transform:translateX(-12px)}
.js .por.in-view .pa{opacity:1;transform:none}
.por .pg2{transition:box-shadow .6s .8s,background .6s .8s}
.por.in-view .pg2{box-shadow:inset 3px 0 0 #ff5b1f}
@media (max-width:760px){.js .por .pa{transform:rotate(90deg) translateX(-8px)}.js .por.in-view .pa{transform:rotate(90deg)}}

/* cursor spotlight cards */
.spot{position:relative;isolation:isolate}
.spot::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(255,91,31,.16),transparent 45%);opacity:0;transition:opacity .3s;pointer-events:none;z-index:2}
.spot:hover::before{opacity:1}

/* workflow cards */
.wc{text-decoration:none;color:#f2efe6}
.wc:hover{color:#f2efe6}
.th::after{transition:background-position 1.2s linear}
.wc:hover .th::after{background-position:64px 0}
.tht{transition:transform .5s var(--ease)}
.wc:hover .tht{transform:translateY(-4px)}
.io{display:flex;align-items:center;gap:8px}
.wb p{margin-top:2px}

/* timeline fill */
.tl::before{background:rgba(13,13,11,.12)}
.tl::after{content:"";position:absolute;left:10px;top:8px;width:2px;height:calc((100% - 16px) * var(--tp,0));background:linear-gradient(180deg,#ffb38f,#ff5b1f);border-radius:2px;transition:height .15s linear}
.tli::before{transition:background .4s,border-color .4s,box-shadow .4s;z-index:1}
.tli.lit::before{background:#ff5b1f;border-color:#ff5b1f;box-shadow:0 0 0 6px rgba(255,91,31,.2)}

/* member-area checklist */
.tb{position:relative;transition:background .35s,border-color .35s}
.tb::after{content:"";position:absolute;left:6px;top:3px;width:6px;height:11px;border-right:2px solid #0d0d0b;border-bottom:2px solid #0d0d0b;transform:rotate(45deg) scale(0);transition:transform .3s var(--ease) .1s}
.tb.on::after{transform:rotate(45deg) scale(1)}
.todo{transition:border-color .35s,background .35s}
.todo.done-row{border-color:rgba(255,91,31,.25)}
.todo.done-row>span:last-child{color:#9a968b}
.ait{transition:background .25s,color .25s}
.ait:not(.on):hover{background:rgba(242,239,230,.06)}

/* trust / how-it's-made section (replaces placeholder reviews) */
.made{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:48px}
.mk{background:#141412;border:1px solid rgba(242,239,230,.12);border-radius:22px;padding:28px;display:flex;flex-direction:column;gap:12px;transition:transform .3s var(--ease),border-color .3s}
.mk:hover{transform:translateY(-6px);border-color:rgba(255,91,31,.5)}
.mk .mi{width:48px;height:48px;border-radius:14px;background:rgba(255,91,31,.12);border:1px solid rgba(255,91,31,.35);display:flex;align-items:center;justify-content:center}
.mk b{font-family:'Space Grotesk',sans-serif;font-size:23px;letter-spacing:-.04em}
.mk p{margin:0;font-size:16px;line-height:1.5;color:#b8b4a8}
.mk .step{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:#ff8a5c;letter-spacing:.04em;text-transform:uppercase}
.note{max-width:860px;margin:18px auto 0;border-radius:24px;padding:clamp(24px,3vw,36px);background:linear-gradient(135deg,rgba(255,91,31,.14),rgba(255,91,31,.02));border:1px solid rgba(255,91,31,.3);display:flex;gap:22px;align-items:flex-start}
.note .av{flex:0 0 56px;height:56px;font-size:18px}
.note q{display:block;font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:clamp(19px,1.9vw,24px);letter-spacing:-.025em;line-height:1.35;color:#f2efe6;quotes:none}
.note small{display:block;margin-top:12px;font-size:14px;color:#9a968b}
@media (max-width:1000px){.made{grid-template-columns:repeat(1,minmax(0,1fr))}}
@media (max-width:560px){.note{flex-direction:column}}

/* calculator */
.svc{transition:border-color .2s,background .2s,transform .15s}
.svc:active{transform:scale(.985)}
.cb{position:relative;transition:background .2s,border-color .2s}
.cb::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg) scale(0);transition:transform .25s var(--ease)}
.svc.on .cb::after{transform:rotate(45deg) scale(1)}
.cv{font-variant-numeric:tabular-nums}
.calcres{position:relative;overflow:hidden}
.calcres::after{content:"";position:absolute;inset:auto -20% -120% auto;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(255,91,31,.25),transparent 60%);pointer-events:none}
.calchint{text-align:center;margin:14px 0 0;color:#55524a;font-size:14px}

/* pricing toggle as segmented control */
.tog{position:relative;width:max-content;max-width:100%;padding:6px;border-radius:999px;border:1.5px solid rgba(242,239,230,.14);background:rgba(242,239,230,.03);gap:0}
.tg{border:0;position:relative;z-index:1;transition:color .3s}
.tg.on{background:transparent;color:#0d0d0b}
.tog .thumb{position:absolute;top:6px;bottom:6px;left:0;width:0;border-radius:999px;background:#f2efe6;transition:transform .45s var(--ease),width .45s var(--ease);z-index:0}
.amt{font-variant-numeric:tabular-nums;display:inline-block}
.amt.flip{animation:flip .45s var(--ease)}
@keyframes flip{0%{opacity:0;transform:translateY(-14px)}100%{opacity:1;transform:none}}
.side{transition:border-color .3s,transform .3s var(--ease)}
.side:hover{border-color:rgba(242,239,230,.4);transform:translateY(-4px)}
.ring{transition:transform .4s var(--ease)}
.ring:hover{transform:translateY(-4px)}
.secure{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 20px;margin-top:20px;font-size:13px;color:#9a968b}
.secure span{display:inline-flex;align-items:center;gap:6px}

/* faq — smooth exclusive accordion */
details::details-content{block-size:0;overflow:hidden;transition:block-size .4s var(--ease),content-visibility .4s allow-discrete}
details[open]::details-content{block-size:auto}
summary{transition:color .2s}
summary:hover{color:#a33a10}
summary:hover .pm{background:#ff5b1f;color:#0d0d0b}
.faqmore{margin-top:34px;font-size:16px;color:#55524a}
.faqmore a{color:#a33a10;font-weight:600}

/* final */
.mega .w{display:inline-block}
.final .cta{padding:0 38px;min-height:64px;font-size:18px}

/* magnetic primary CTA */
.cta{will-change:transform}

/* mobile sticky bar: appears after hero, hides at pricing */
@media (max-width:760px){
  .mbar{transform:translateY(140%);transition:transform .45s var(--ease)}
  .mbar.show{transform:none}
}

/* modal (fallback when checkout isn't wired yet) */
.modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(13,13,11,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .3s}
.modal.open{opacity:1;pointer-events:auto}
.mbox{width:100%;max-width:460px;background:#141412;border:1px solid rgba(242,239,230,.14);border-radius:24px;padding:30px;transform:translateY(16px) scale(.98);transition:transform .35s var(--ease);position:relative}
.modal.open .mbox{transform:none}
.mbox h3{font-family:'Space Grotesk',sans-serif;font-size:28px;letter-spacing:-.04em;margin:8px 0 0;line-height:1.05}
.mbox p{color:#b8b4a8;font-size:15px;line-height:1.5;margin:10px 0 0}
.mbox .x{position:absolute;right:14px;top:14px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(242,239,230,.2);background:transparent;color:#f2efe6;font-size:20px;cursor:pointer}
.mbox .cta{width:100%;margin-top:22px}



/* rotating guarantee seal */
.seal{position:relative;border-color:transparent}
.seal::before{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px dashed #ff5b1f;animation:rot 22s linear infinite}

/* simple legal pages */
.legal{max-width:760px;margin:0 auto;padding:clamp(40px,8vw,96px) clamp(20px,4vw,48px)}
.legal h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(40px,6vw,64px);letter-spacing:-.05em;line-height:.95;margin:28px 0 18px}
.legal p{color:#c9c5b9;font-size:17px;line-height:1.6}
.h1 .o .w{padding-bottom:.14em;margin-bottom:-.14em}

/* =========================================================
   v2: roadmap higher up (dark, 2 columns) + systems bento
   ========================================================= */
.road{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,88px);align-items:start}
.road-l{position:sticky;top:110px}
.road .tl{margin-top:8px}
.road-sub{font-size:clamp(17px,1.4vw,19px);line-height:1.5;color:#b8b4a8;margin:22px 0 0;max-width:440px}
.tl.dk::before{background:rgba(242,239,230,.12)}
.tl.dk .tli::before{background:#0d0d0b;border-color:rgba(242,239,230,.35)}
.tl.dk .tli.lit::before{background:#ff5b1f;border-color:#ff5b1f}
.tl.dk .tlc{background:#141412;border:1px solid rgba(242,239,230,.1);color:#f2efe6}
.tl.dk .tlc:hover{box-shadow:0 18px 40px rgba(0,0,0,.35);border-color:rgba(255,91,31,.4)}
.tl.dk .tlc p{color:#b8b4a8}
.tl.dk .tli.hot .tlc{background:#ff5b1f;border-color:#ff5b1f;color:#0d0d0b;box-shadow:0 24px 60px rgba(255,91,31,.25)}
.tl.dk .tli.hot .tlc p{color:#2b1a12}
.tl.dk .tli.hot .tag.o{background:#0d0d0b;color:#ff5b1f}
.tl.dk .tli.hot::before{background:#f2efe6;border-color:#f2efe6;box-shadow:0 0 0 6px rgba(255,91,31,.3)}
@media (max-width:1000px){.road{grid-template-columns:minmax(0,1fr)}.road-l{position:static}}

/* systems: category filter */
.wfil{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:34px auto 0}
.wfil button{min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid rgba(13,13,11,.16);background:transparent;color:#0d0d0b;font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:15px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.wfil button:hover{border-color:#0d0d0b}
.wfil button.on{background:#0d0d0b;color:#f2efe6;border-color:#0d0d0b}
.wfil button:focus-visible{outline:3px solid #ff5b1f;outline-offset:2px}

/* systems: bento (2 rows on desktop, all 6 visible at once) */
.wf{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:268px;margin-top:28px}
.wf .wc{grid-column:auto;transition:transform .35s var(--ease),border-color .3s,opacity .35s,filter .35s,box-shadow .35s}
.wf .wc.wide{grid-column:span 2}
.wf .wc:hover{box-shadow:0 26px 60px rgba(13,13,11,.22)}
.wf .th{aspect-ratio:auto;flex:1;min-height:0}
.wf .wc.wide .tht{font-size:clamp(30px,3.2vw,46px)}
.wf .wc:not(.wide) .wb p{display:none}
.wf .wb{padding:14px 18px 18px}
.wf .wc.dim{opacity:.28;filter:grayscale(1);transform:scale(.97)}
.swipe{display:none}
@media (max-width:1000px){.wf{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:260px}}

/* mobile: one horizontal swipe row instead of a long vertical list */
@media (max-width:640px){
  .wf{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:24px -20px 0;padding:4px 20px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .wf::-webkit-scrollbar{display:none}
  .wf .wc,.wf .wc.wide{flex:0 0 80%;height:320px;scroll-snap-align:center}
  .wf .wc .wb p{display:block}
  .js .wf .rv{opacity:1;transform:none}
  .wf .wc.dim{display:none}
  .swipe{display:block;text-align:center;margin:6px 0 0;font-family:'Space Grotesk',sans-serif;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#77746b}
}

/* v3: single price with cents; one sticky CTA on mobile (bottom bar, header scrolls away) */
.amt .cents{font-size:.4em;letter-spacing:-.03em;margin-left:.04em}
.plans3{margin-top:44px}
@media (max-width:760px){.hdr{position:relative}}