:root{--crimson:#A0001E;--rose:#B5122B;--wine:#4E0613;--sage:#7A9A5A;--sage-d:#4F6B37;--ink:#0B0B0C;--paper:#FFFFFF;--cream:#FBF7F4;--mute:#5D5A5B;--line:#E9E1DD;--r:18px;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:"Barlow",system-ui,sans-serif;color:var(--ink);background:var(--paper);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}a{color:var(--crimson)}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.preview-bar{background:var(--ink);color:#fff;font:500 13px/1.4 var(--mono);text-align:center;padding:8px 14px;letter-spacing:.02em}
.preview-bar b{color:#ff8a9b}
header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:74px;gap:18px}
.nav .logo img{height:46px;width:auto}
.nav nav{display:flex;gap:26px;align-items:center}
.nav nav a{color:var(--ink);text-decoration:none;font-weight:500;font-size:16px}
.nav nav a:hover{color:var(--crimson)}
.nav nav a.btn,.nav nav a.btn:hover{color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;padding:14px 26px;font:700 16px/1 "Barlow",sans-serif;text-decoration:none;border:2px solid var(--wine);cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}
.btn-primary{background:var(--crimson);color:#fff;box-shadow:0 6px 0 var(--wine)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--wine);background:var(--rose)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-sm{padding:10px 18px;font-size:15px;box-shadow:0 4px 0 var(--wine)}
.eyebrow{font:600 13px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--crimson);display:inline-flex;gap:8px;align-items:center}
.eyebrow::before{content:"<";color:var(--ink)}.eyebrow::after{content:"/>";color:var(--ink)}
h1,h2,h3{line-height:1.04;margin:0 0 .4em;letter-spacing:-.02em}
h1{font-size:clamp(44px,6.4vw,84px);font-weight:200}
h1 strong,h2 strong{font-weight:800}
h1 em,h2 em{font-style:normal;color:var(--crimson);font-weight:800}
h2{font-size:clamp(34px,4.4vw,56px);font-weight:200}
h3{font-size:24px;font-weight:700}
.lede{font-size:21px;color:var(--mute);max-width:640px}
section{padding:96px 0;position:relative}
.stipple{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(var(--crimson) .9px,transparent 1.3px);background-size:9px 9px;opacity:.16;-webkit-mask-image:radial-gradient(ellipse at 85% 20%,#000 0,transparent 55%);mask-image:radial-gradient(ellipse at 85% 20%,#000 0,transparent 55%)}
.stipple.sage{background-image:radial-gradient(var(--sage) .9px,transparent 1.3px);-webkit-mask-image:radial-gradient(ellipse at 10% 90%,#000 0,transparent 50%);mask-image:radial-gradient(ellipse at 10% 90%,#000 0,transparent 50%);opacity:.28}
/* hero */
.hero{padding:64px 0 90px;overflow:hidden}
.hero .grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.hero .cta-row{display:flex;gap:16px;flex-wrap:wrap;margin:30px 0 18px}
.hero .fine{font:500 14px/1.5 var(--mono);color:var(--mute)}
.hero .fine span{color:var(--sage-d)}
.ticks{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:8px}
.ticks li{padding-left:30px;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:50%;background:var(--sage);box-shadow:inset 0 0 0 4px #fff,0 0 0 1.5px var(--sage-d)}
/* before/after */
.ba{position:relative;border-radius:var(--r);overflow:hidden;border:2px solid var(--ink);box-shadow:10px 10px 0 var(--crimson);aspect-ratio:1/1;background:#eee;user-select:none;touch-action:pan-y}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .before{clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:#fff;transform:translateX(-1px);box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.ba .handle::after{content:"< >";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--crimson);color:#fff;font:700 15px/1 var(--mono);padding:12px 12px;border-radius:999px;border:2px solid #fff;white-space:nowrap}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba .tag{position:absolute;top:14px;font:600 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;padding:8px 10px;border-radius:6px;background:rgba(11,11,12,.78);color:#fff;pointer-events:none}
.ba .tag.l{left:14px}.ba .tag.r{right:14px;background:var(--crimson)}
/* strip */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--cream);padding:22px 0}
.strip .wrap{display:flex;gap:30px;justify-content:space-between;flex-wrap:wrap;font:500 14px/1.4 var(--mono);color:var(--mute)}
.strip b{color:var(--ink)}
/* story */
.story .grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.story .mark{max-width:360px;margin:auto}
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
.split div{border:1.5px solid var(--ink);border-radius:14px;padding:18px}
.split h4{margin:0 0 6px;font:700 15px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em}
.split .art h4{color:var(--crimson)}.split .code h4{color:var(--sage-d)}
.split p{margin:0;font-size:16px;color:var(--mute)}
/* gallery */
.gallery{background:var(--cream)}
.gal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px;margin-top:44px}
.gal-item figcaption{margin-top:18px;display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.gal-item figcaption b{font-size:20px}.gal-item figcaption span{font:500 13px/1.3 var(--mono);color:var(--mute);text-align:right}
.gal-item .ba{box-shadow:8px 8px 0 var(--wine)}
.gal-item:nth-child(2n) .ba{box-shadow:8px 8px 0 var(--sage)}
figure{margin:0}
.disclose{margin-top:32px;font:500 13px/1.5 var(--mono);color:var(--mute)}
/* ads */
.ads-row{display:grid;grid-template-columns:1fr 0.62fr 1fr;gap:28px;margin-top:44px;align-items:end}
.ad{background:#fff;border:1.5px solid var(--ink);border-radius:16px;overflow:hidden;box-shadow:0 18px 40px -22px rgba(78,6,19,.45)}
.ad .hd{display:flex;align-items:center;gap:10px;padding:12px 14px;font-size:14px;font-weight:600}
.ad .av{width:30px;height:30px;border-radius:50%;background:var(--crimson);color:#fff;display:grid;place-items:center;font:700 12px var(--mono)}
.ad .hd small{display:block;font-weight:400;color:var(--mute);font-size:12px}
.ad .img{position:relative;aspect-ratio:1/1;overflow:hidden}.ad .img img{width:100%;height:100%;object-fit:cover}
.ad .img .badge{position:absolute;left:14px;bottom:14px;background:#fff;color:var(--ink);font:800 20px/1.05 "Barlow";padding:10px 14px;border-radius:10px;border:2px solid var(--ink);max-width:70%}
.ad .img .badge em{font-style:normal;color:var(--crimson)}
.ad .ft{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;font-size:14px;border-top:1px solid var(--line)}
.ad .ft b{background:var(--ink);color:#fff;padding:7px 12px;border-radius:6px;font-size:13px}
.ad.story{aspect-ratio:9/16;position:relative;border-radius:26px;border-width:6px;border-color:var(--ink)}
.ad.story img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ad.story .ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 26%,transparent 55%,rgba(0,0,0,.78));color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:18px}
.ad.story .bars{display:flex;gap:4px}.ad.story .bars i{flex:1;height:3px;background:rgba(255,255,255,.5);border-radius:2px}.ad.story .bars i:first-child{background:#fff}
.ad.story h5{margin:0;font:200 30px/1 "Barlow"}.ad.story h5 strong{font-weight:800;display:block}
.ad.story .swipe{margin-top:12px;align-self:center;background:#fff;color:var(--ink);font:700 13px var(--mono);padding:9px 16px;border-radius:999px}
.ad .mk{padding:14px}.ad .mk .price{font:800 24px "Barlow"}.ad .mk .stars{color:#C98A00;font-size:14px}.ad .mk p{margin:4px 0 0;font-size:15px}
.ad .mk .prime{display:inline-block;margin-top:8px;font:600 12px var(--mono);color:var(--sage-d);border:1px solid var(--sage);padding:4px 8px;border-radius:4px}
.ad-cap{text-align:center;font:600 13px var(--mono);color:var(--mute);margin-top:12px;text-transform:uppercase;letter-spacing:.06em}
/* how */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px;counter-reset:s}
.step{border:1.5px solid var(--ink);border-radius:var(--r);padding:30px;background:#fff;position:relative}
.step::before{counter-increment:s;content:"0" counter(s);font:700 15px var(--mono);color:#fff;background:var(--crimson);border:2px solid var(--wine);border-radius:8px;padding:6px 10px;display:inline-block;margin-bottom:18px}
.step p{color:var(--mute);margin:0}
.step code{font:500 13px var(--mono);background:var(--cream);padding:2px 6px;border-radius:4px;color:var(--wine)}
/* pricing */
.pricing{background:var(--ink);color:#fff}
.pricing .lede{color:#cfc8c9}.pricing .eyebrow::before,.pricing .eyebrow::after{color:#fff}.pricing .eyebrow{color:#ff8a9b}
.toggle{display:inline-flex;margin-top:22px;border:1.5px solid #fff;border-radius:999px;padding:4px}
.toggle button{background:none;border:0;color:#fff;font:600 15px "Barlow";padding:9px 18px;border-radius:999px;cursor:pointer}
.toggle button.on{background:#fff;color:var(--ink)}
.toggle small{color:var(--sage);font-weight:700}
.toggle button.on small{color:var(--sage-d)}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.tier{background:#151314;border:1.5px solid #3a3335;border-radius:22px;padding:32px;display:flex;flex-direction:column}
.tier.hot{background:#fff;color:var(--ink);border:2px solid var(--crimson);box-shadow:0 0 0 6px rgba(160,0,30,.35);position:relative}
.tier.hot::before{content:"most picked for launches";position:absolute;top:-14px;left:28px;background:var(--crimson);color:#fff;font:700 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:6px 10px;border-radius:6px}
.tier h3{font-size:26px;margin-bottom:4px}
.tier .for{font-size:15px;opacity:.75;margin:0 0 18px}
.tier .amt{font:200 60px/1 "Barlow";letter-spacing:-.03em}.tier .amt b{font-weight:800}
.tier .amt small{font-size:17px;font-weight:500;opacity:.7;letter-spacing:0}
.tier .sub{font:500 13px var(--mono);opacity:.7;min-height:20px;margin:8px 0 18px}
.tier ul{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:9px;font-size:16px}
.tier li{padding-left:24px;position:relative}.tier li::before{content:"›";position:absolute;left:4px;color:var(--sage);font-weight:800}
.tier.hot li::before{color:var(--crimson)}
.tier .btn{margin-top:auto;width:100%}
.ph{display:block;text-align:center;margin-top:10px;font:600 11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:#ffb3bf;border:1px dashed #ff8a9b;border-radius:6px;padding:6px}
.tier.hot .ph{color:var(--crimson);border-color:var(--crimson)}
.addons{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}
.addon{border:1.5px dashed #4a4244;border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:6px}
.addon .top{display:flex;justify-content:space-between;align-items:baseline}.addon .top b{font-size:19px}.addon .top span{font:800 22px "Barlow"}
.addon p{margin:0 0 10px;font-size:15px;opacity:.75}
.addon .btn{margin-top:auto;background:transparent;color:#fff;border-color:#fff;box-shadow:none;padding:10px 16px;font-size:14px}
.addon .btn:hover{background:#fff;color:var(--ink)}
.promo{margin-top:30px;font:500 14px var(--mono);color:#cfc8c9;text-align:center}.promo code{color:#fff;background:var(--crimson);padding:3px 8px;border-radius:4px}
/* compare */
table.cmp{width:100%;border-collapse:separate;border-spacing:0;margin-top:40px;border:1.5px solid var(--ink);border-radius:var(--r);overflow:hidden;font-size:16px}
.cmp th,.cmp td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line)}
.cmp thead th{background:var(--cream);font:700 13px var(--mono);text-transform:uppercase;letter-spacing:.05em}
.cmp thead th.us{background:var(--crimson);color:#fff}
.cmp td.us{background:#fff5f6;font-weight:700}
.cmp tr:last-child td{border-bottom:0}
.cmp .y{color:var(--sage-d);font-weight:700}.cmp .n{color:#9a9395}
/* guarantee */
.guar{background:var(--cream)}
.guar .box{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;border:2px solid var(--wine);border-radius:28px;padding:44px;background:#fff;position:relative;overflow:hidden}
.seal{width:150px;height:150px;border-radius:50%;background:var(--crimson);color:#fff;display:grid;place-items:center;text-align:center;font:800 18px/1.1 "Barlow";border:3px solid var(--wine);box-shadow:0 0 0 8px #fff,0 0 0 10px var(--sage);text-transform:uppercase}
.seal small{display:block;font:500 11px var(--mono);letter-spacing:.06em;margin-top:6px}
/* faq */
.faq-list{margin-top:36px;border-top:1.5px solid var(--ink)}
details{border-bottom:1.5px solid var(--ink);padding:20px 4px}
summary{cursor:pointer;list-style:none;font:700 20px/1.3 "Barlow";display:flex;justify-content:space-between;gap:20px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:400 26px/1 var(--mono);color:var(--crimson);transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--mute);margin:12px 0 0;max-width:820px}
/* final */
.final{background:var(--crimson);color:#fff;text-align:center;overflow:hidden}
.final .stipple{background-image:radial-gradient(#fff .9px,transparent 1.3px);opacity:.18;-webkit-mask-image:none;mask-image:none}
.final h2{color:#fff}.final h2 em{color:#fff;text-decoration:underline;text-decoration-color:var(--sage);text-decoration-thickness:4px;text-underline-offset:8px}
.final .btn-primary{background:#fff;color:var(--crimson);box-shadow:0 6px 0 var(--wine)}
.final p{color:#ffe1e6}
footer{background:var(--ink);color:#bdb6b7;padding:56px 0 40px;font-size:15px}
footer .wrap{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
footer img{height:54px;background:#fff;border-radius:10px;padding:8px 12px}
footer a{color:#fff}
footer .legal{font:500 13px var(--mono);margin-top:16px}
/* order page */
.order-hero{padding:56px 0 20px}
.form{display:grid;grid-template-columns:1.4fr .8fr;gap:40px;padding-bottom:90px;align-items:start}
.card{border:1.5px solid var(--ink);border-radius:22px;padding:32px;background:#fff}
fieldset{border:0;padding:0;margin:0 0 30px}
legend{font:700 13px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--crimson);margin-bottom:14px}
label{display:block;font-weight:600;font-size:16px;margin-bottom:6px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
input[type=text],input[type=email],input[type=url],select,textarea{width:100%;font:400 17px "Barlow";padding:13px 14px;border:1.5px solid #cfc6c3;border-radius:12px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--crimson);box-shadow:0 0 0 4px rgba(160,0,30,.12)}
textarea{min-height:110px;resize:vertical}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips label{font-weight:500;display:inline-flex;align-items:center;gap:8px;border:1.5px solid #cfc6c3;border-radius:999px;padding:9px 14px;cursor:pointer;margin:0;font-size:15px}
.chips input{accent-color:var(--crimson)}
.chips label:has(input:checked){border-color:var(--crimson);background:#fff5f6;color:var(--wine)}
.tierpick{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.tierpick label{border:1.5px solid #cfc6c3;border-radius:14px;padding:14px;cursor:pointer;margin:0;font-weight:500}
.tierpick label b{display:block;font-size:17px}.tierpick label span{font:500 13px var(--mono);color:var(--mute)}
.tierpick input{accent-color:var(--crimson);float:right}
.tierpick label:has(input:checked){border-color:var(--crimson);box-shadow:0 0 0 3px rgba(160,0,30,.15)}
.drop{border:2px dashed var(--sage);border-radius:16px;padding:30px;text-align:center;background:#f7faf3;cursor:pointer;position:relative}
.drop.over{background:#eef5e6;border-color:var(--sage-d)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop b{font-size:18px}.drop small{display:block;color:var(--mute);font:500 13px var(--mono);margin-top:6px}
.thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:12px}
.thumbs div{aspect-ratio:1;border-radius:10px;overflow:hidden;border:1.5px solid var(--ink);position:relative}
.thumbs img{width:100%;height:100%;object-fit:cover}
.hp{position:absolute;left:-9999px}
.side{position:sticky;top:100px}
.side .sum{font-size:16px}.side .sum div{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line)}
.side .tot{font:800 28px "Barlow"}
.note{font:500 13px/1.5 var(--mono);color:var(--mute);background:var(--cream);border-radius:12px;padding:14px;margin-top:16px}
.note b{color:var(--crimson)}
.err{color:var(--crimson);font-weight:600;margin-top:10px;min-height:22px}
.done{text-align:center;padding:50px 30px}
.done .ref{font:700 26px var(--mono);color:var(--crimson);border:2px dashed var(--crimson);border-radius:12px;padding:12px 18px;display:inline-block;margin:14px 0}
.prose{max-width:760px;padding:60px 22px 90px;margin:0 auto}.prose h1{font-size:54px}
@media(max-width:920px){
 .hero .grid,.story .grid,.form{grid-template-columns:1fr}
 .tiers,.addons,.steps{grid-template-columns:1fr}
 .gal-grid{grid-template-columns:1fr}
 .ads-row{grid-template-columns:1fr}
 .ad.story{max-width:320px;margin:auto}
 .nav nav a:not(.btn){display:none}
 .guar .box{grid-template-columns:1fr;text-align:center}.seal{margin:auto}
 .cmp{font-size:14px}.cmp th,.cmp td{padding:10px}
 .row,.tierpick,.split{grid-template-columns:1fr}
 .side{position:static}
 section{padding:70px 0}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.paid-banner{background:#f1f7ea;border:2px solid var(--sage);color:var(--sage-d);border-radius:14px;padding:16px 20px;margin:10px 0 20px;font-size:17px}
.paid-banner b{color:var(--ink)}
.ph a{color:inherit}
