/* Pricing & Examples page. Builds on styles.css + pages.css from the redesign site. */
html{scroll-padding-top:136px;}
[hidden]{display:none !important;}
.page--pricing h4{font-family:var(--display); font-weight:600; letter-spacing:-.02em; margin:0;}

/* ---------- hero ---------- */
.pe-hero{position:relative; min-height:min(100vh, 980px); display:flex; align-items:flex-end; padding:140px 0 clamp(40px, 5vw, 72px); overflow:hidden; background:#05030f;}
.pe-hero__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5; max-width:none;}
.pe-hero::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(5,3,15,.94) 0%, rgba(5,3,15,.6) 50%, rgba(5,3,15,.25) 100%), linear-gradient(0deg, var(--ink) 0%, rgba(11,7,32,0) 55%);}
.pe-hero .wrap{position:relative; z-index:1;}
.pe-hero h1{font-size:clamp(42px, 6.2vw, 100px); line-height:.98; margin:18px 0 22px; max-width:13ch;}
.pe-hero .lead{font-size:clamp(17px, 1.35vw, 21px); line-height:1.55; color:rgba(255,255,255,.82); max-width:640px;}

.paths{display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:12px; margin-top:clamp(36px, 4vw, 56px);}
.path{display:flex; flex-direction:column; gap:4px; padding:18px 18px 16px; border-radius:18px; border:1px solid var(--line); background:rgba(11,7,32,.55); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); transition:border-color .2s ease, transform .2s ease, background .2s ease;}
.path:hover{border-color:rgba(176,56,240,.75); transform:translateY(-3px); background:rgba(36,20,70,.6);}
.path small{font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--lav);}
.path strong{font-family:var(--display); font-size:18px; font-weight:600; letter-spacing:-.02em; line-height:1.2;}
.path__price{margin-top:auto; padding-top:10px; font-family:var(--display); font-size:22px; font-weight:500; color:var(--pb2); letter-spacing:-.03em;}
.path__price em{font-style:normal; font-size:14px; color:rgba(255,255,255,.6);}

/* ---------- section nav ---------- */
.pnav{position:sticky; top:72px; z-index:40; background:rgba(11,7,32,.82); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--line);}
.pnav__in{display:flex; gap:6px; align-items:center; max-width:var(--max); margin:0 auto; padding:10px var(--pad); overflow-x:auto; scrollbar-width:none;}
.pnav__in::-webkit-scrollbar{display:none;}
.pnav a{flex:0 0 auto; padding:8px 14px; border-radius:999px; font-size:13.5px; font-weight:500; color:rgba(255,255,255,.72); transition:background .2s ease, color .2s ease;}
.pnav a:hover{color:#fff; background:rgba(255,255,255,.06);}
.pnav a.is-on{color:#fff; background:rgba(0,180,248,.16); box-shadow:inset 0 0 0 1px rgba(95,208,255,.45);}
.pnav a.pnav__cta{margin-left:auto; background:var(--pp); color:#fff; font-weight:600;}

/* ---------- shared section bits ---------- */
.pe-sec{position:relative;}
.pe-sec--alt{background:linear-gradient(180deg, #0d0826 0%, #0b0720 100%); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.page--pricing .plan h3{font-size:22px; letter-spacing:-.02em;}
.page--pricing .plans{padding-top:0;}
/* three plans (Starter $39 removed 2026-11-06): one even row on desktop */
.page--pricing .plans{grid-template-columns:repeat(3, minmax(0, 1fr));}

.chips{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px;}
.chips li{font-size:12.5px; line-height:1.3; padding:7px 11px; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid var(--line); color:rgba(255,255,255,.66);}
.chips li b{display:block; font-weight:600; color:#fff; font-size:13px;}
.chips--flat li{border-radius:999px; padding:6px 12px;}

/* ---------- templates ---------- */
.tpl-head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 24px; margin:8px 0 18px;}
.tpl-head h3{font-size:clamp(22px, 2vw, 28px);}
.tpl-head p{color:rgba(255,255,255,.65); font-size:15px;}
.tpls{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:12px;}
.tpl-card{position:relative; border-radius:16px; overflow:hidden; aspect-ratio:4/5; border:1px solid var(--line);}
.tpl-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s ease;}
.tpl-card:hover img{transform:scale(1.06);}
.tpl-card::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(5,3,15,.88) 0%, rgba(5,3,15,0) 55%);}
.tpl-card div{position:absolute; left:14px; right:14px; bottom:12px; z-index:1;}
.tpl-card small{display:block; font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--pb2);}
.tpl-card strong{font-family:var(--display); font-size:16px; font-weight:600; letter-spacing:-.01em;}

/* ---------- tiers ---------- */
.tiers{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; align-items:stretch;}
.tier{display:flex; flex-direction:column; border-radius:22px; border:1px solid var(--line); background:linear-gradient(170deg, rgba(255,255,255,.07), rgba(255,255,255,.015)); overflow:hidden;}
.tier--feat{border-color:var(--pp); box-shadow:0 24px 70px rgba(176,56,240,.22);}
.tier__top{padding:26px 24px 22px; border-bottom:1px solid var(--line);}
.tier__n{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--pb2);}
.tier h3{font-size:24px; margin-top:8px;}
.tier__price{font-family:var(--display); font-size:clamp(28px, 2.5vw, 38px); font-weight:500; letter-spacing:-.04em; margin-top:14px; line-height:1.05;}
.tier__top p{margin-top:12px; font-size:14.5px; color:rgba(255,255,255,.72); min-height:3em;}
.tier__rows{margin:0; padding:6px 24px 8px;}
.tier__rows > div{padding:14px 0; border-bottom:1px solid rgba(226,188,255,.08);}
.tier__rows > div:last-child{border-bottom:0;}
.tier__rows dt{font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5);}
.tier__rows dd{margin:4px 0 0; font-size:16px; font-weight:500;}
.tier__rows .ticks{margin-top:6px; gap:6px;}
.tier__ex{margin-top:auto; display:block; padding:16px 24px; font-size:14px; font-weight:500; color:var(--pb2); border-top:1px solid var(--line); background:rgba(0,180,248,.05); transition:background .2s ease;}
.tier__ex::after{content:" \2193";}
.tier__ex:hover{background:rgba(0,180,248,.12);}

/* ---------- case cards ---------- */
.exgroup{margin-top:clamp(56px, 6vw, 88px);}
.exgroup__h{display:flex; align-items:center; gap:14px; font-size:clamp(20px, 1.8vw, 26px); margin-bottom:20px;}
.exgroup__h span{font-family:"Inter", sans-serif; font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; padding:6px 10px; border-radius:999px; background:var(--pp); color:#fff;}
.cases{display:grid; gap:16px;}
.cases--3{grid-template-columns:repeat(3, minmax(0, 1fr));}
.cases--2{grid-template-columns:repeat(2, minmax(0, 1fr));}
.case{display:flex; flex-direction:column; border-radius:20px; overflow:hidden; border:1px solid var(--line); background:rgba(255,255,255,.03);}
.case__media{position:relative; aspect-ratio:16/9; background:#05030f; overflow:hidden;}
.case__media video{width:100%; height:100%; object-fit:cover; max-width:none;}
.case__tag{position:absolute; top:12px; left:12px; padding:6px 12px; border-radius:999px; background:rgba(11,7,32,.75); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font-family:var(--display); font-weight:600; font-size:15px; border:1px solid rgba(95,208,255,.4);}
.case__body{padding:20px 22px 22px; display:flex; flex-direction:column; flex:1;}
.case__body > small{font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--lav);}
.case__body h4{font-size:22px; margin-top:6px;}
.case__body > p{margin-top:8px; font-size:15px; color:rgba(255,255,255,.72);}
.case--big .case__body h4{font-size:clamp(22px, 2vw, 30px);}
.case__live{margin-top:auto; padding-top:16px; align-self:flex-start; font-size:14px; font-weight:600; color:var(--pb2);}
.case__live:hover{color:#fff;}
.stats{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:18px;}
.stats div{padding:12px 14px; border-radius:14px; background:rgba(176,56,240,.1); border:1px solid rgba(176,56,240,.3);}
.stats b{display:block; font-family:var(--display); font-size:clamp(24px, 2.2vw, 34px); font-weight:500; letter-spacing:-.04em; color:var(--pp2); line-height:1.1;}
.stats span{font-size:12.5px; color:rgba(255,255,255,.7);}

/* ---------- web products ---------- */
.webx{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.55fr); gap:20px; align-items:start;}
.webx__list{display:grid; gap:10px;}
.webx__item{display:block; width:100%; text-align:left; font:inherit; color:#fff; cursor:pointer; padding:18px 20px; border-radius:18px; border:1px solid var(--line); background:rgba(255,255,255,.03); transition:border-color .2s ease, background .2s ease;}
.webx__item:hover{border-color:rgba(255,255,255,.3);}
.webx__item.is-on{border-color:var(--pb); background:rgba(0,180,248,.08);}
.webx__top{display:flex; justify-content:space-between; gap:12px; align-items:baseline;}
.webx__top small{font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--lav);}
.webx__top b{font-family:var(--display); font-size:17px; font-weight:600; color:var(--pb2); white-space:nowrap;}
.webx__item strong{display:block; font-family:var(--display); font-size:21px; font-weight:600; letter-spacing:-.02em; margin-top:4px;}
.webx__desc{display:none; margin-top:8px; font-size:14.5px; line-height:1.55; color:rgba(255,255,255,.72);}
.webx__item.is-on .webx__desc{display:block;}
.browser{border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.14); background:#08051a; box-shadow:0 30px 80px rgba(0,0,0,.45);}
.browser__bar{display:flex; align-items:center; gap:7px; padding:10px 14px; background:rgba(255,255,255,.05); border-bottom:1px solid var(--line); font-size:12.5px;}
.browser__bar i{width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.2);}
.browser__bar span{flex:1; margin:0 8px; padding:5px 12px; border-radius:999px; background:rgba(255,255,255,.06); color:rgba(255,255,255,.7); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.browser__bar a{color:var(--pb2); font-weight:600; white-space:nowrap;}
.browser__screen{position:relative; aspect-ratio:16/10; background:radial-gradient(circle at 50% 40%, rgba(176,56,240,.25), transparent 60%), #08051a;}
.browser__screen iframe, .game__screen iframe, .yt iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}

.loadcover{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; width:100%; border:0; cursor:pointer; color:#fff; font:600 15px "Inter", sans-serif; background:rgba(5,3,15,.35); transition:background .2s ease;}
.loadcover:hover{background:rgba(5,3,15,.15);}
.loadcover__play{width:64px; height:64px; border-radius:50%; background:var(--pp); box-shadow:0 0 34px rgba(176,56,240,.7); position:relative;}
.loadcover__play::after{content:""; position:absolute; left:26px; top:21px; border-left:16px solid #fff; border-top:11px solid transparent; border-bottom:11px solid transparent;}

/* ---------- JADE ---------- */
.jade{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(24px, 4vw, 64px); align-items:center; margin-top:clamp(56px, 7vw, 100px); padding:clamp(24px, 4vw, 56px); border-radius:28px; border:1px solid var(--line); background:radial-gradient(circle at 80% 50%, rgba(176,56,240,.18), transparent 60%), rgba(255,255,255,.025);}
.jade h3{font-size:clamp(32px, 3.6vw, 54px); margin:14px 0 16px; line-height:1.02;}
.jade__copy p{color:rgba(255,255,255,.76); margin-bottom:14px; max-width:540px;}
.jade__copy .btn{margin-top:10px;}
.jade__demo{display:flex; flex-direction:column; align-items:center; text-align:center;}
.orb{--a:#ff4fd8; --b:#33e1ff; position:relative; width:min(300px, 70vw); aspect-ratio:1;}
.orb canvas{position:absolute; inset:-12%; width:124%; height:124%;}
.orb__core{position:absolute; inset:22%; border-radius:50%; background:radial-gradient(circle at 35% 30%, #fff 0%, var(--a) 28%, var(--b) 70%, rgba(0,0,0,0) 72%); box-shadow:0 0 60px var(--a), 0 0 120px var(--b); animation:breathe 3.6s ease-in-out infinite; transition:background .5s ease, box-shadow .5s ease;}
@keyframes breathe{0%,100%{transform:scale(.94);} 50%{transform:scale(1.04);}}
.orb__hi{margin-top:6px; font-family:var(--display); font-size:19px; font-weight:500; min-height:1.5em;}
.jade__ctl{width:100%; max-width:420px; margin-top:22px; display:grid; gap:10px; text-align:left;}
.jade__ctl label, .jade__lbl{font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55);}
.jade__ctl input{font:500 16px "Inter", sans-serif; color:#fff; background:rgba(255,255,255,.06); border:1px solid var(--line); border-radius:12px; padding:12px 14px; outline:none;}
.jade__ctl input:focus{border-color:var(--pb);}
.swatches{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px;}
.swatches button{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.03); color:rgba(255,255,255,.8); font:500 13px "Inter", sans-serif; cursor:pointer;}
.swatches button::before{content:""; width:16px; height:16px; flex:0 0 auto; border-radius:50%; background:linear-gradient(135deg, var(--a), var(--b));}
.swatches button.is-on{border-color:#fff; color:#fff; background:rgba(255,255,255,.08);}

/* ---------- AR ---------- */
.argroup{display:flex; align-items:baseline; gap:12px; font-size:clamp(20px, 1.8vw, 26px); margin:8px 0 18px;}
.argroup span{font-family:"Inter", sans-serif; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--lav);}
.arx{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; margin-bottom:clamp(36px, 4vw, 56px);}
.arx:last-child{margin-bottom:0;}
.arcard{display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1fr); border-radius:20px; overflow:hidden; border:1px solid var(--line); background:rgba(255,255,255,.03);}
.arcard__media{position:relative; aspect-ratio:9/16; background:#05030f;}
.arcard__media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; max-width:none;}
.arcard__body{padding:20px 18px; display:flex; flex-direction:column; justify-content:flex-end;}
.arcard__price{font-family:var(--display); font-size:clamp(28px, 2.6vw, 40px); font-weight:500; letter-spacing:-.04em; color:var(--pb2); line-height:1;}
.arcard h4{font-size:19px; margin-top:12px;}
.arcard p{margin-top:8px; font-size:14px; color:rgba(255,255,255,.7);}

/* ---------- activations ---------- */
.perks{list-style:none; margin:0 0 24px; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px;}
.perks li{padding:16px 18px; border-radius:16px; border:1px solid var(--line); background:rgba(255,255,255,.03);}
.perks b{display:block; font-family:var(--display); font-size:19px; font-weight:600;}
.perks span{font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--lav);}
.games{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px;}
.game{display:flex; flex-direction:column; border-radius:20px; overflow:hidden; border:1px solid var(--line); background:rgba(255,255,255,.03);}
.game__screen{position:relative; aspect-ratio:4/5; background:radial-gradient(circle at 50% 40%, rgba(0,180,248,.22), transparent 62%), #08051a;}
.game__body{padding:18px 20px 20px; display:flex; flex-direction:column; flex:1;}
.game__top{display:flex; justify-content:space-between; align-items:baseline;}
.game__top small{font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--lav);}
.game__top span{font-family:var(--display); font-weight:600; color:var(--pb2); font-size:17px;}
.game h4{font-size:22px; margin-top:6px;}
.game p{margin-top:6px; font-size:15px; color:rgba(255,255,255,.72);}

/* ---------- portal ---------- */
.portal{display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.3fr); gap:clamp(20px, 3vw, 48px); align-items:start; margin-bottom:24px;}
.portal__steps{list-style:none; margin:0; padding:0; display:grid; gap:12px;}
.portal__steps li{padding:20px 22px; border-radius:18px; border:1px solid var(--line); background:rgba(255,255,255,.03);}
.portal__steps span{font-family:var(--display); font-size:13px; font-weight:600; color:var(--pb2); letter-spacing:.1em;}
.portal__steps h4{font-size:20px; margin-top:4px;}
.portal__steps p{margin-top:6px; font-size:15px; color:rgba(255,255,255,.72);}
.yt{position:relative; aspect-ratio:16/9; border-radius:18px; overflow:hidden; border:1px solid var(--line); background:#05030f;}
.yt img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.75;}
.flow{display:grid; grid-template-columns:1fr 60px 1fr 60px 1fr; align-items:center; margin-top:14px; padding:18px; border-radius:18px; border:1px solid var(--line); background:rgba(255,255,255,.03);}
.flow__node{text-align:center; padding:12px 8px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid var(--line);}
.flow__node small{display:block; font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5);}
.flow__node b{display:block; font-family:var(--display); font-size:16px; font-weight:600;}
.flow__node span{font-size:12.5px; color:rgba(255,255,255,.65);}
.flow__node--hub{background:rgba(176,56,240,.18); border-color:var(--pp); box-shadow:0 0 30px rgba(176,56,240,.35);}
.flow__line{position:relative; height:2px; margin:0 6px; background:rgba(95,208,255,.25); overflow:hidden;}
.flow__line i{position:absolute; top:-2px; left:-20%; width:20%; height:6px; border-radius:3px; background:var(--pb); box-shadow:0 0 10px var(--pb); animation:flow 1.8s linear infinite;}
@keyframes flow{to{left:100%;}}
.portal__cases{margin-top:16px;}

/* ---------- FAQ ---------- */
.faq{display:grid; grid-template-columns:minmax(0, .7fr) minmax(0, 1.3fr); gap:clamp(24px, 4vw, 64px); align-items:start;}
.faq__list details{border-bottom:1px solid var(--line);}
.faq__list details:first-child{border-top:1px solid var(--line);}
.faq__list summary{list-style:none; cursor:pointer; padding:20px 44px 20px 0; position:relative; font-family:var(--display); font-size:clamp(17px, 1.4vw, 21px); font-weight:500; letter-spacing:-.01em;}
.faq__list summary::-webkit-details-marker{display:none;}
.faq__list summary::after{content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:26px; font-weight:300; color:var(--pb2); transition:transform .2s ease;}
.faq__list details[open] summary::after{transform:translateY(-50%) rotate(45deg);}
.faq__list details p{padding:0 0 22px; color:rgba(255,255,255,.74); max-width:680px;}

/* ---------- brief ---------- */
.brief{position:relative; overflow:hidden; padding:clamp(80px, 10vw, 150px) 0; border-top:1px solid var(--line); background:#07041a;}
.brief .wrap{position:relative; z-index:1;}
.brief__head{text-align:center; max-width:720px; margin:0 auto 34px;}
.brief__head h2{font-size:clamp(34px, 5vw, 72px); line-height:1.02; margin:16px 0 18px;}
.brief__head p{color:rgba(255,255,255,.76);}
.bform{max-width:880px; margin:0 auto; padding:clamp(22px, 3vw, 40px); border-radius:26px; border:1px solid rgba(255,255,255,.12); background:rgba(11,7,32,.7); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);}
.bsteps{list-style:none; display:flex; justify-content:center; gap:10px; margin:0 0 22px; padding:0;}
.bsteps li{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:600; font-size:14px; border:1px solid var(--line); color:rgba(255,255,255,.5);}
.bsteps li.is-on{background:var(--pp); border-color:var(--pp); color:#fff;}
.bsteps li.is-done{border-color:var(--pb); color:var(--pb2);}
.bstep{display:none; border:0; margin:0; padding:0; min-width:0;}
.bstep.is-on{display:block;}
.bstep legend, .blegend2{display:block; width:100%; text-align:center; font-family:var(--display); font-size:clamp(20px, 2vw, 26px); font-weight:600; letter-spacing:-.02em; margin:0 0 6px; padding:0;}
.blegend2{margin-top:28px; margin-bottom:14px;}
.bhint{text-align:center; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--lav); margin-bottom:18px;}
.bopts{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px;}
.bopts label, .bpills label{position:relative; cursor:pointer;}
.bopts input, .bpills input{position:absolute; opacity:0; pointer-events:none;}
.bopts span{display:flex; flex-direction:column; gap:4px; height:100%; padding:14px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.03); transition:border-color .15s ease, background .15s ease;}
.bopts b{font-size:14.5px; font-weight:600; line-height:1.3;}
.bopts em{font-style:normal; font-size:13px; color:var(--pb2);}
.bopts input:checked + span{border-color:var(--pp); background:rgba(176,56,240,.16); box-shadow:0 0 0 1px var(--pp) inset;}
.bopts input:focus-visible + span, .bpills input:focus-visible + span{outline:2px solid var(--pb); outline-offset:2px;}
.bpills{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:16px;}
.bpills span{display:inline-block; padding:11px 18px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.03); font-size:14.5px; font-weight:500;}
.bpills input:checked + span{border-color:var(--pp); background:rgba(176,56,240,.2);}
.bfields{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px;}
.bfields label{display:grid; gap:6px; font-size:13px; font-weight:600; color:rgba(255,255,255,.75);}
.bfields label i{font-style:normal; font-weight:400; color:rgba(255,255,255,.5);}
.bfields .bfull{grid-column:1 / -1;}
.bfields input, .bfields textarea{font:400 16px "Inter", sans-serif; color:#fff; background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:12px; padding:12px 14px; outline:none; resize:vertical;}
.bfields input:focus, .bfields textarea:focus{border-color:var(--pb);}
.bnav{display:flex; justify-content:center; gap:10px; margin-top:26px;}
.berr{min-height:1.4em; text-align:center; color:#ff8fb1; font-size:14px; margin-top:12px;}
.bnote{text-align:center; font-size:12.5px; color:rgba(255,255,255,.5); margin-top:14px;}
.bdone{text-align:center; padding:20px 0;}
.bdone h3{font-size:clamp(24px, 2.6vw, 34px); margin-bottom:10px;}
.bdone p{color:rgba(255,255,255,.75);}
.bdone a, .brief__contact a{color:var(--pb2); text-decoration:underline; text-underline-offset:3px;}
.brief__contact{text-align:center; margin-top:26px; font-size:14px; color:rgba(255,255,255,.6);}

/* floating quote button */
.quote-fab{position:fixed; right:20px; bottom:20px; z-index:45; padding:14px 22px; border-radius:999px; background:var(--pp); color:#fff; font-weight:600; font-size:15px; box-shadow:0 10px 30px rgba(176,56,240,.55); opacity:0; transform:translateY(16px); pointer-events:none; transition:opacity .3s ease, transform .3s ease;}
.quote-fab.is-on{opacity:1; transform:none; pointer-events:auto;}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .paths{grid-template-columns:repeat(3, minmax(0, 1fr));}
  .page--pricing .plans{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .tpls{grid-template-columns:repeat(3, minmax(0, 1fr));}
  .arcard{grid-template-columns:1fr;}
  .arcard__media{aspect-ratio:4/5;}
  .bopts{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width:900px){
  .tiers, .cases--3, .cases--2, .games, .arx{grid-template-columns:1fr;}
  .webx, .jade, .portal, .faq{grid-template-columns:1fr;}
  .perks{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .tier__top p{min-height:0;}
  .arcard{grid-template-columns:minmax(0, .75fr) minmax(0, 1fr);}
  .arcard__media{aspect-ratio:9/16;}
  .game__screen{aspect-ratio:1/1;}
}
@media (max-width:640px){
  html{scroll-padding-top:120px;}
  .pe-hero{min-height:0; padding-top:112px;}
  .paths{grid-template-columns:1fr 1fr; gap:8px;}
  .path{padding:14px;}
  .path strong{font-size:15.5px;}
  .path__price{font-size:18px;}
  .page--pricing .plans{grid-template-columns:1fr;}
  .tpls{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 calc(-1 * var(--pad)); padding:0 var(--pad) 6px; scrollbar-width:none;}
  .tpls::-webkit-scrollbar{display:none;}
  .tpl-card{flex:0 0 62%; scroll-snap-align:start;}
  .stats{gap:6px;}
  .stats div{padding:10px;}
  .bfields{grid-template-columns:1fr;}
  .bopts b{font-size:13.5px;}
  .swatches{grid-template-columns:repeat(2, 1fr);}
  .flow{grid-template-columns:1fr 24px 1fr 24px 1fr; padding:12px;}
  .flow__node b{font-size:13.5px;}
  .flow__node span{font-size:11px;}
  .quote-fab{right:14px; bottom:14px; padding:12px 18px;}
  .browser__screen{aspect-ratio:4/5;}
}
@media (prefers-reduced-motion: reduce){
  .orb__core, .flow__line i{animation:none;}
}

/* recent websites */
.webprices{list-style:none; margin:0 0 20px; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px;}
.webprices li{padding:14px 16px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.03);}
.webprices small{display:block; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--lav);}
.webprices b{font-family:var(--display); font-size:20px; font-weight:600; color:var(--pb2); letter-spacing:-.02em;}
.webx__top b{font-family:"Inter", sans-serif; font-size:12.5px; font-weight:600; color:var(--pb2);}
.browser__poster{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; max-width:none;}
.browser__screen .loadcover{background:linear-gradient(0deg, rgba(5,3,15,.75), rgba(5,3,15,.2));}
.browser__screen iframe{z-index:1; background:#fff;}
@media (max-width:900px){ .webprices{grid-template-columns:repeat(2, minmax(0, 1fr));} }
@media (max-width:640px){ .webprices b{font-size:17px;} .browser__screen{aspect-ratio:16/11;} }

/* old Pricing-page hero, then straight into the plans */
.phero--short{min-height:min(56vh, 560px);}
.pe-sec--plans{padding-top:clamp(28px, 4vw, 56px);}
.pe-sec--plans .tpl-head{margin-top:clamp(24px, 3vw, 40px);}
.webrange{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px; margin:0 0 20px; padding:16px 20px; border-radius:16px; border:1px solid rgba(95,208,255,.35); background:rgba(0,180,248,.06);}
.webrange b{font-family:var(--display); font-size:clamp(26px, 2.6vw, 36px); font-weight:500; letter-spacing:-.04em; color:var(--pb2); line-height:1.1;}
.webrange span{font-size:15px; color:rgba(255,255,255,.72);}

/* ---------- plan extras: template library + PixAI ---------- */
.extras{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; margin-top:16px;}
.extra{display:flex; flex-direction:column; border-radius:22px; border:1px solid var(--line); background:linear-gradient(170deg, rgba(255,255,255,.07), rgba(255,255,255,.015)); overflow:hidden;}
.extra__head{padding:24px 24px 18px;}
.extra__tag{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--pb2);}
.extra h3{font-size:22px; letter-spacing:-.02em; margin-top:8px;}
.extra__head p{margin-top:8px; font-size:14.5px; color:rgba(255,255,255,.72); max-width:520px;}
.extra__tpls{list-style:none; margin:auto 0 0; padding:0 16px 16px; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px;}
.extra__tpls li{position:relative; border-radius:12px; overflow:hidden; aspect-ratio:16/10; border:1px solid var(--line);}
.extra__tpls img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.extra__tpls li::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(5,3,15,.85), rgba(5,3,15,0) 60%);}
.extra__tpls span{position:absolute; left:10px; bottom:7px; z-index:1; font-family:var(--display); font-size:13px; font-weight:600;}
.extra__img{margin:auto 16px 16px; border-radius:14px; overflow:hidden; border:1px solid var(--line); aspect-ratio:16/9;}
.extra__img img{width:100%; height:100%; object-fit:cover;}
@media (max-width:900px){ .extras{grid-template-columns:1fr;} }
@media (max-width:640px){ .extra__tpls{grid-template-columns:repeat(2, minmax(0, 1fr));} }

/* ---------- one price style everywhere ---------- */
.page--pricing .plan .price, .page--pricing .tier__price, .page--pricing .webrange b, .page--pricing .amt{font-family:var(--display); font-weight:500; letter-spacing:-.04em; line-height:1.05; color:#fff; font-size:clamp(30px, 2.8vw, 40px);}
.page--pricing .tier__price{margin-top:12px;}
.page--pricing .amt{margin-top:8px;}
.page--pricing .arcard h4{margin-top:0;}
.page--pricing .arcard .amt{margin-top:6px;}
.page--pricing .case__body .amt{margin:6px 0 2px;}
.page--pricing .webrange{border-color:var(--line); background:rgba(255,255,255,.03);}
.extra__tpls{flex:1; margin-top:0; grid-auto-rows:minmax(96px, 1fr);}
.extra__tpls li{aspect-ratio:auto;}

/* example groups: tier, name and price side by side */
.exhead{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--line);}
.exhead__tier{font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; padding:6px 10px; border-radius:999px; background:var(--pp); color:#fff;}
.exhead h3{font-size:clamp(20px, 1.8vw, 26px);}
.page--pricing .exhead .amt{margin:0 0 0 auto;}
.exhead__wk{flex-basis:100%; order:5; font-size:14px; color:rgba(255,255,255,.6);}
@media (min-width:641px){ .exhead__wk{flex-basis:auto; order:1;} .page--pricing .exhead .amt{order:2;} }
@media (max-width:640px){ .page--pricing .exhead .amt{margin-left:0; flex-basis:100%;} }
.yt__cap{position:absolute; left:12px; bottom:12px; z-index:0; padding:6px 12px; border-radius:999px; background:rgba(11,7,32,.75); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font-size:12.5px; font-weight:600; pointer-events:none;}
.yt iframe{z-index:1;}
.extra__img--logo{display:grid; place-items:center; background:radial-gradient(circle at 50% 50%, rgba(176,56,240,.22), transparent 65%), #07041a;}
.extra__img--logo img{width:100%; height:100%; object-fit:cover; border-radius:0;}

/* one wide example card (Pixel Portal section, London 2025 removed 2026-11-06): video left, details right */
.cases--1{grid-template-columns:1fr;}
.cases--1 .case{display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr); align-items:stretch;}
.cases--1 .case__media{aspect-ratio:16/9; height:100%;}
.cases--1 .case__body{justify-content:center; padding:clamp(22px, 2.6vw, 40px);}
@media (max-width: 900px){ .cases--1 .case{grid-template-columns:1fr;} .cases--1 .case__media{height:auto;} }

/* price ranges ("$5,000 – $10,000") never wrap; tier-card prices scale to fit three columns */
.page--pricing .plan .price, .page--pricing .tier__price, .page--pricing .webrange b, .page--pricing .amt, .bopts em{white-space:nowrap;}
.page--pricing .tier__price{font-size:clamp(24px, 2.5vw, 40px);}
@media (max-width:900px){ .page--pricing .tier__price{font-size:clamp(30px, 7vw, 40px);} }