/* Nexform AI - shared stylesheet (extracted from the approved v5 template).
   Fonts are self-hosted from /assets/fonts/ - no third-party requests. */
/* Self-hosted fonts — no third-party requests. Files in /assets/fonts/ */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600 900;font-display:swap;src:url('/assets/fonts/montserrat.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/inter.woff2') format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/spacemono-400.woff2') format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/spacemono-700.woff2') format('woff2')}

:root{
  --bg:#FCFBFE; --card:#FFFFFF; --tint:#F5EDFF; --ink:#190826; --dim:#5F5573;
  --line:rgba(25,8,38,.09); --pur:#BC13FE; --pur2:#6C1BD6;
  --aurora:linear-gradient(92deg,#BC13FE 0%,#6C1BD6 100%);
  --mono:'Space Mono',monospace; --disp:'Montserrat',sans-serif; --body:'Inter',sans-serif;
  --sh:0 16px 44px -20px rgba(108,27,214,.18);
  /* radius scale — every surface picks one of these, nothing bespoke */
  --r-sm:14px; --r-md:20px; --r-lg:26px; --r-xl:40px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px;font-size:120%}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1rem;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--pur);color:#fff}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;background:none;border:none;color:inherit;cursor:pointer}
a,button,.sw,.opt,.tab,input[type=range]{cursor:pointer}

#progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:300}
#progress i{display:block;height:100%;background:var(--aurora);transform:scaleX(0);transform-origin:left}

.cur-dot,.cur-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;display:none}
@media(pointer:fine){
  .cur-dot,.cur-ring{display:block}
  .cur-dot{width:7px;height:7px;background:var(--pur)}
  .cur-ring{width:32px;height:32px;border:1px solid rgba(188,19,254,.45);transition:width .25s,height .25s,border-color .25s}
  .cur-ring.on{width:52px;height:52px;border-color:var(--pur2)}
}

#loader{position:fixed;inset:0;background:var(--bg);z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px}
#loader .px-logo{display:grid;grid-template-columns:repeat(4,14px);gap:5px}
#loader .px-logo i{width:14px;height:14px;background:var(--pur);opacity:0;transform:scale(.3)}
#loader .pct{font-family:var(--mono);font-weight:700;font-size:.8rem;letter-spacing:.35em;color:var(--dim)}

/* canvas: full-page scroll-driven 3D scene, sits behind content */
#gl{position:fixed;inset:0;z-index:0;opacity:0;pointer-events:none}
.wash{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(800px 440px at 88% -6%,rgba(188,19,254,.06),transparent 60%),linear-gradient(180deg,rgba(252,251,254,0) 60%,rgba(252,251,254,.4) 100%)}
/* readability: content sections that sit over the canvas get a soft backing */
section{position:relative}

/* section rail */
#rail{position:fixed;left:22px;top:50%;transform:translateY(-50%);z-index:90;display:flex;flex-direction:column;gap:14px}
#rail a{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;color:var(--dim);opacity:.45;display:flex;align-items:center;gap:8px;transition:.3s;min-height:24px}
#rail a i{width:14px;height:2px;background:var(--dim);transition:.3s}
#rail a.act{opacity:1;color:var(--pur2)}
#rail a.act i{width:28px;background:var(--aurora)}
@media(max-width:1160px){#rail{display:none}}

#nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:18px clamp(20px,4vw,56px);transition:all .4s;border-bottom:1px solid transparent}
#nav.solid{background:rgba(252,251,254,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:var(--line);padding-top:12px;padding-bottom:12px}
.logo img{height:36px;width:auto}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{font-size:.85rem;font-weight:600;color:var(--dim);transition:color .25s;position:relative;padding:8px 0}
.nav-links a:hover{color:var(--pur2)}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--aurora);transition:width .3s}
.nav-links a:hover::after{width:100%}
.btn{display:inline-flex;align-items:center;gap:12px;font-weight:700;font-size:.9rem;padding:15px 28px;border-radius:999px;position:relative;overflow:hidden;transition:box-shadow .3s,color .35s;will-change:transform;isolation:isolate;min-height:48px}
.btn::before{content:'';position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:transform .45s cubic-bezier(.65,0,.35,1);z-index:-1;border-radius:999px}
.btn:hover::before{transform:translateY(0)}
.btn-fill{background:var(--aurora);color:#fff;box-shadow:0 10px 30px -12px rgba(188,19,254,.5)}
.btn-ghost{border:2px solid var(--ink);color:var(--ink)}
.btn-ghost:hover{color:#fff}
.btn .arc{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.22);display:inline-flex;align-items:center;justify-content:center;transition:transform .3s}
.btn-ghost .arc{background:var(--tint);color:var(--pur2)}
.btn:hover .arc{transform:translateX(4px) rotate(-45deg)}
.burger{display:none;flex-direction:column;gap:6px;padding:10px;z-index:210}
.burger span{width:26px;height:2px;background:var(--ink);transition:.3s}
.burger.x span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.x span:nth-child(2){opacity:0}
.burger.x span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media(max-width:960px){.nav-links,.nav-cta{display:none}.burger{display:flex}}

#menu{position:fixed;inset:0;background:rgba(252,251,254,.98);backdrop-filter:blur(18px);z-index:200;display:flex;flex-direction:column;justify-content:center;padding:0 clamp(24px,7vw,64px);clip-path:inset(0 0 100% 0);pointer-events:none}
#menu.open{pointer-events:auto}
#menu a.big{font-family:var(--disp);font-weight:800;font-size:clamp(1.8rem,7vw,3rem);padding:12px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;opacity:0;transform:translateY(30px)}
#menu a.big i{font-family:var(--mono);font-style:normal;font-size:.7rem;color:var(--pur)}
#menu .m-cta{margin-top:30px;opacity:0;transform:translateY(30px)}

main{position:relative;z-index:2}
section{position:relative;padding:clamp(90px,12vh,150px) clamp(20px,4vw,56px)}
.wrap{max-width:1240px;margin:0 auto;position:relative}
.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.38em;text-transform:uppercase;color:var(--pur2);display:flex;align-items:center;gap:12px;margin-bottom:24px;font-weight:700}
.eyebrow .px{display:inline-grid;grid-template-columns:repeat(2,6px);gap:3px}
.eyebrow .px i{width:6px;height:6px;background:var(--pur)}
.eyebrow .px i:nth-child(2){opacity:.6}.eyebrow .px i:nth-child(3){opacity:.35}.eyebrow .px i:nth-child(4){opacity:.8}
.h2{font-family:var(--disp);font-weight:800;font-size:clamp(1.8rem,4.4vw,3.1rem);line-height:1.14;letter-spacing:-.015em;max-width:24ch}
.h2 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.h2 .wi{display:inline-block;transform:translateY(115%)}
.grad{background:var(--aurora);-webkit-background-clip:text;background-clip:text;color:transparent}
.gradl{background:linear-gradient(92deg,#E39BFF,#BC13FE);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--dim);max-width:58ch;margin-top:18px;font-size:1rem}
[data-reveal]{opacity:0;transform:translateY(40px)}
[data-mask]{clip-path:inset(0 0 100% 0);transform:translateY(30px)}
[data-slide-l]{opacity:0;transform:translateX(-60px)}
[data-slide-r]{opacity:0;transform:translateX(60px)}

/* HERO */
#hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:120px;padding-bottom:0;overflow:hidden}
.big247{position:absolute;top:9%;right:-2%;font-family:var(--disp);font-weight:900;font-size:clamp(9rem,26vw,24rem);line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(188,19,254,.09);pointer-events:none;user-select:none;z-index:0}
#heroCopy{position:relative;z-index:2}
#heroCopy::before{content:'';position:absolute;left:-6vw;right:-6vw;top:-4vh;bottom:-6vh;z-index:-1;background:radial-gradient(60% 60% at 30% 45%,rgba(252,251,254,.92) 0%,rgba(252,251,254,.75) 45%,rgba(252,251,254,0) 80%);pointer-events:none}
.hero-sub{text-shadow:0 1px 10px rgba(252,251,254,.9)}
#hero h1{font-family:var(--disp);font-weight:900;font-size:clamp(2.7rem,8.6vw,7rem);line-height:.98;letter-spacing:-.025em;text-transform:uppercase}
#hero h1 .ln{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.06em}
#hero h1 .ln:nth-child(2){padding-left:clamp(20px,7vw,120px)}
#hero h1 .ln:nth-child(3){padding-left:clamp(40px,14vw,240px)}
#hero h1 .ch{display:inline-block;transform:translateY(115%)}
.hero-row{display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:end;margin-top:34px}
.hero-sub{color:#2E2440;font-size:1.02rem;max-width:48ch;opacity:0;transform:translateY(24px)}
.hero-cta{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap;opacity:0;transform:translateY(24px)}
.feed{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);overflow:hidden;opacity:0;transform:translateY(30px);will-change:transform;justify-self:end;width:min(100%,400px)}
.feed-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fff,#FBF7FF)}
.feed-head b{font-family:var(--disp);font-weight:800;font-size:.9rem}
.live{font-family:var(--mono);font-size:.6rem;letter-spacing:.25em;color:var(--pur2);display:flex;align-items:center;gap:8px;font-weight:700}
.live i{width:8px;height:8px;background:var(--pur);animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}
.feed-body{height:300px;overflow:hidden;position:relative}
.feed-body::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#fff 0%,transparent 14%,transparent 80%,#fff 100%);pointer-events:none}
.feed-track{display:flex;flex-direction:column}
.call{padding:14px 20px;border-bottom:1px dashed var(--line)}
.call .top{display:flex;justify-content:space-between;font-weight:700;font-size:.85rem}
.call .top time{font-family:var(--mono);font-weight:400;font-size:.7rem;color:var(--dim)}
.call .tag{display:inline-block;font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;background:var(--tint);color:var(--pur2);padding:4px 9px;margin:7px 0 5px;font-weight:700}
.call .tag.hot{background:var(--aurora);color:#fff}
.call p{font-size:.78rem;color:var(--dim)}
@media(max-width:940px){.hero-row{grid-template-columns:1fr}.feed{justify-self:start;transform:translateY(30px)}}

.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:64px}
.stat{padding:34px 22px;border-right:1px solid var(--line);opacity:0;transform:translateY(24px)}
.stat:last-child{border-right:none}
.stat .n{font-family:var(--disp);font-weight:900;font-size:clamp(2rem,3.5vw,2.9rem);background:var(--aurora);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.05;margin-bottom:12px}
.stat > span{font-size:.9rem;color:var(--dim);display:block;line-height:1.45}
/* the animated counter lives in a <span> inside .n — it must inherit the
   number's size and gradient, never the description styling above. */
.stat .n span{display:inline;font:inherit;color:inherit;line-height:inherit;letter-spacing:inherit}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr}.stat:nth-child(2){border-right:none}.stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line)}}

/* quiet marquee */
#strip{padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;overflow:hidden}
.mq{padding:16px 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.mq .track{display:flex;width:max-content;animation:mqL 60s linear infinite;will-change:transform}
.mq span{font-family:var(--mono);font-weight:700;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;padding:0 16px;color:var(--dim)}
.mq span::after{content:'✦';margin-left:32px;color:var(--pur);opacity:.5}
@keyframes mqL{to{transform:translateX(-50%)}}

/* MANIFESTO — pinned scene */
#manifesto{padding:0}
#maniStage{min-height:100svh;display:flex;align-items:center;padding:0 clamp(20px,4vw,56px)}
.mani-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center;width:100%;max-width:1240px;margin:0 auto}
#manifesto p{font-family:var(--disp);font-weight:800;font-size:clamp(1.8rem,4.8vw,3.6rem);line-height:1.22;letter-spacing:-.015em;max-width:22ch}
#manifesto .mw{color:var(--ink);opacity:.1;display:inline-block}
#manifesto .mw.pur{color:var(--pur2)}
.ringbox{position:relative;width:min(380px,80vw);margin:0 auto}
.ringbox svg{width:100%;height:auto;transform:rotate(-90deg)}
.ringbox .base{fill:none;stroke:var(--line);stroke-width:5}
.ringbox .draw{fill:none;stroke:url(#ringGrad);stroke-width:5;stroke-linecap:round;stroke-dasharray:565;stroke-dashoffset:565}
.ringbox .mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 20%}
.ringbox .mid b{font-family:var(--disp);font-weight:900;font-size:clamp(1.8rem,5vw,2.6rem);background:var(--aurora);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.ringbox .mid span{font-family:var(--mono);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin-top:10px;font-weight:700;line-height:1.5;max-width:14ch}
@media(max-width:900px){.mani-grid{grid-template-columns:1fr;gap:44px}#maniStage{padding-top:90px;padding-bottom:90px}}

/* demo */
#demo .panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);padding:clamp(26px,4vw,48px);margin-top:48px}
.tabs{display:flex;gap:10px;flex-wrap:wrap}
.tab{font-family:var(--disp);font-weight:700;font-size:.85rem;padding:12px 22px;border-radius:999px;border:1.5px solid var(--line);color:var(--dim);transition:.3s;min-height:44px}
.tab.on{background:var(--aurora);color:#fff;border-color:transparent;box-shadow:0 8px 22px -8px rgba(188,19,254,.5)}
.steps{margin-top:28px}
.steps ol{list-style:none;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:12px 0 12px 52px;color:var(--dim);font-size:.92rem;border-bottom:1px dashed var(--line)}
.steps li b{color:var(--ink)}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:12px;font-family:var(--mono);font-weight:700;font-size:.72rem;color:#fff;background:var(--aurora);width:34px;height:26px;display:flex;align-items:center;justify-content:center}
.demo-cta{display:flex;gap:20px;align-items:center;margin-top:30px;flex-wrap:wrap}
.phone{font-family:var(--disp);font-weight:900;font-size:clamp(1.4rem,3.4vw,2rem);background:var(--aurora);-webkit-background-clip:text;background-clip:text;color:transparent}
.demo-note{font-size:.78rem;color:var(--dim)}
.custom-note{margin-top:26px;padding:16px 20px;background:var(--tint);border-left:3px solid var(--pur);font-size:.85rem;color:var(--dim)}
.custom-note b{color:var(--ink)}

/* LEAK — pinned story */
#leak{padding:0}
#leakCard{background:var(--ink);color:#F6F2FB;min-height:100svh;display:flex;align-items:center;padding:clamp(60px,8vh,100px) clamp(20px,4vw,56px);will-change:transform,border-radius;transform:scale(.92);border-radius:var(--r-xl);margin:0 clamp(10px,2vw,28px);position:relative;overflow:hidden}
#leakCard .bigpound{position:absolute;bottom:-10%;right:-2%;font-family:var(--disp);font-weight:900;font-size:clamp(12rem,30vw,26rem);line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(227,155,255,.08);pointer-events:none}
#leakCard .eyebrow{color:#E39BFF}
#leakCard .eyebrow .px i{background:#E39BFF}
.leak-big{font-family:var(--disp);font-weight:900;font-size:clamp(3.2rem,9vw,6.6rem);line-height:1;background:linear-gradient(92deg,#E39BFF,#BC13FE);-webkit-background-clip:text;background-clip:text;color:transparent;position:relative;z-index:1}
.leak-cap{color:#C4B5D6;max-width:56ch;margin-top:18px;font-size:.98rem;position:relative;z-index:1}
.leak-foot{font-family:var(--mono);font-size:.68rem;color:#9C89B5;margin-top:12px;position:relative;z-index:1}
.pains{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px;position:relative;z-index:1}
.pain{border:1px solid rgba(246,242,251,.14);border-radius:var(--r-md);padding:26px 22px;background:rgba(246,242,251,.04)}
.pain .mark{width:30px;height:30px;background:var(--aurora);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:700;color:#fff;margin-bottom:16px}
.pain b{font-family:var(--disp);font-size:1.02rem;display:block;margin-bottom:10px}
.pain p{font-size:.84rem;color:#C4B5D6}
@media(max-width:860px){.pains{grid-template-columns:1fr}#leakCard{min-height:0}}

/* who — bento */
.bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(180px,auto);gap:16px;margin-top:52px}
.bcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 26px;box-shadow:var(--sh);transition:transform .35s;display:flex;flex-direction:column;justify-content:flex-end}
.bcard:hover{transform:translateY(-8px)}
.bcard.tall{grid-row:span 2}
.bcard.wide{grid-column:span 2}
.bcard.accent{background:linear-gradient(140deg,#F7EEFF,#fff);border-color:rgba(188,19,254,.3)}
.bcard .kpi{font-family:var(--disp);font-weight:900;font-size:clamp(2.2rem,5vw,3.4rem);background:var(--aurora);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.bcard b{font-family:var(--disp);font-size:1.1rem;display:block;margin:12px 0 8px}
.bcard p{font-size:.86rem;color:var(--dim)}
@media(max-width:860px){.bento{grid-template-columns:1fr}.bcard.tall{grid-row:auto}.bcard.wide{grid-column:auto}}

/* jobs horizontal */
#jobs{padding:0;overflow:hidden;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#jobsTrack{display:flex;align-items:stretch;gap:24px;padding:clamp(84px,12vh,150px) clamp(20px,4vw,56px);width:max-content;will-change:transform}
.jpanel{width:min(78vw,420px);flex:none;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);padding:38px 32px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:380px}
.jpanel .num{position:absolute;top:22px;right:26px;font-family:var(--disp);font-weight:900;font-size:4.2rem;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(188,19,254,.3)}
.jpanel .px3{display:flex;gap:4px;margin-bottom:18px}
.jpanel .px3 i{width:9px;height:9px;background:var(--pur)}
.jpanel .px3 i:nth-child(2){opacity:.55}.jpanel .px3 i:nth-child(3){opacity:.3}
.jpanel b{font-family:var(--disp);font-size:1.35rem;display:block;margin-bottom:12px}
.jpanel p{font-size:.9rem;color:var(--dim)}
.jhead{width:min(78vw,460px);flex:none;display:flex;flex-direction:column;justify-content:center}
.jprog{position:absolute;bottom:34px;left:clamp(20px,4vw,56px);right:clamp(20px,4vw,56px);height:2px;background:var(--line)}
.jprog i{display:block;height:100%;background:var(--aurora);transform:scaleX(0);transform-origin:left}
@media(max-width:899px){
  #jobs{padding:clamp(84px,11vh,140px) clamp(20px,4vw,56px)}
  #jobsTrack{flex-direction:column;width:auto;padding:0}
  .jpanel,.jhead{width:100%;min-height:0}
  .jhead{margin-bottom:16px}
  .jprog{display:none}
}

/* quote */
#quote .builder{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);margin-top:52px;display:grid;grid-template-columns:1.15fr .85fr;overflow:hidden}
.b-left{padding:clamp(26px,3.6vw,44px);border-right:1px solid var(--line)}
.b-right{padding:clamp(26px,3.6vw,44px);background:linear-gradient(180deg,#FDFBFF,#F7EFFF)}
.b-lbl{font-family:var(--mono);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--pur2);font-weight:700;margin:30px 0 14px}
.b-lbl:first-child{margin-top:0}
.opts{display:flex;gap:10px;flex-wrap:wrap}
.opt{font-family:var(--disp);font-weight:700;font-size:.82rem;padding:12px 18px;border-radius:999px;border:1.5px solid var(--line);color:var(--dim);transition:.25s;min-height:44px}
.opt.on{background:var(--aurora);color:#fff;border-color:transparent}
.agents .agent{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px dashed var(--line);gap:14px}
.agent .nm{font-weight:600;font-size:.9rem}
.agent .nm small{display:block;font-weight:400;font-size:.74rem;color:var(--dim)}
.sw{width:48px;height:28px;border-radius:999px;background:#E4DCEF;position:relative;transition:.25s;flex:none}
.sw::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:.25s;box-shadow:0 2px 6px rgba(25,8,38,.25)}
.sw.on{background:var(--aurora)}
.sw.on::after{left:23px}
.sw.lock{opacity:.55;pointer-events:none}
input[type=range]{width:100%;accent-color:var(--pur);margin-top:6px;height:28px}
.vol-val{font-family:var(--mono);font-size:.72rem;color:var(--dim);margin-top:6px}
.q-line{display:flex;justify-content:space-between;align-items:baseline;padding:11px 0;border-bottom:1px dashed var(--line);font-size:.88rem}
.q-line .l{color:var(--dim)}
.q-line .v{font-family:var(--mono);font-weight:700}
.q-total{margin-top:18px;padding:20px;border-radius:var(--r-md);border:1.5px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--aurora) border-box}
.q-total .t1{font-family:var(--mono);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--dim)}
.q-total .t2{font-family:var(--disp);font-weight:900;font-size:2rem;background:var(--aurora);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.15}
.q-total .t3{font-size:.78rem;color:var(--dim)}
.vs{margin-top:22px;padding:18px 20px;border-radius:var(--r-md);background:var(--tint)}
.vs .l{font-size:.78rem;color:var(--dim)}
.vs .v{font-family:var(--disp);font-weight:800;font-size:1.25rem}
.vs .sv{color:var(--pur2);font-weight:700;font-size:.85rem;margin-top:4px;display:block}
.b-right .btn{width:100%;justify-content:center;margin-top:22px}
.q-foot{font-family:var(--mono);font-size:.62rem;color:var(--dim);margin-top:14px;text-align:center}
@media(max-width:960px){#quote .builder{grid-template-columns:1fr}.b-left{border-right:none;border-bottom:1px solid var(--line)}}

/* stages */
.stages{margin-top:60px;position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stages::before{content:'';position:absolute;top:17px;left:6%;right:6%;height:2px;background:var(--line)}
.stages .prog{position:absolute;top:17px;left:6%;height:2px;background:var(--aurora);width:0}
.stage{position:relative;padding-top:52px}
.stage .nd{position:absolute;top:6px;left:0;width:24px;height:24px;background:var(--bg);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;transition:border-color .4s}
.stage .nd i{width:8px;height:8px;background:var(--line);transition:background .4s}
.stage.lit .nd{border-color:var(--pur)}
.stage.lit .nd i{background:var(--aurora)}
.stage em{font-family:var(--mono);font-style:normal;font-size:.62rem;letter-spacing:.3em;color:var(--pur2);font-weight:700}
.stage b{font-family:var(--disp);font-size:1.15rem;display:block;margin:8px 0}
.stage p{font-size:.83rem;color:var(--dim)}
.stage .dur{font-family:var(--mono);font-size:.68rem;color:var(--pur2);margin-top:10px;display:inline-block;background:var(--tint);padding:5px 10px;font-weight:700}
@media(max-width:860px){.stages{grid-template-columns:1fr;gap:34px}.stages::before,.stages .prog{display:none}.stage{padding-top:0;padding-left:44px}.stage .nd{top:2px}}

/* faq */
.faq{margin-top:52px;border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line);opacity:0;transform:translateY(24px)}
.qa button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;text-align:left;padding:24px 4px;font-family:var(--disp);font-weight:700;font-size:1.02rem;transition:color .25s;min-height:48px}
.qa button:hover{color:var(--pur2)}
.qa .pm{font-family:var(--mono);font-size:1.1rem;color:var(--pur);transition:transform .35s;flex:none}
.qa.open .pm{transform:rotate(45deg)}
.qa .ans{max-height:0;overflow:hidden;transition:max-height .45s ease}
.qa .ans p{padding:0 4px 24px;color:var(--dim);font-size:.92rem;max-width:70ch}
.rel{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}
.rel a{font-family:var(--disp);font-weight:700;font-size:.88rem;border:1.5px solid var(--line);border-radius:999px;padding:14px 24px;transition:.3s;min-height:44px;display:inline-flex;align-items:center}
.rel a:hover{border-color:var(--pur);color:var(--pur2);transform:translateY(-3px)}

/* cta */
#cta{padding-left:0;padding-right:0}
#ctaCard{background:var(--ink);color:#F6F2FB;text-align:center;padding:clamp(90px,13vh,160px) clamp(20px,4vw,56px);margin:0 clamp(10px,2vw,28px);border-radius:var(--r-xl);transform:scale(.94);will-change:transform;position:relative;overflow:hidden}
#ctaCard .eyebrow{justify-content:center;color:#E39BFF}
#ctaCard .eyebrow .px i{background:#E39BFF}
#ctaCard .h2{margin:0 auto;color:#fff;max-width:100%;text-align:center}
#ctaCard .sub{margin:18px auto 0;color:#C4B5D6}
#ctaCard .btn{margin-top:40px;font-size:1rem;padding:18px 38px}

footer{position:relative;z-index:2;border-top:1px solid var(--line);background:#fff;padding:64px clamp(20px,4vw,56px) 30px;margin-top:clamp(60px,9vh,110px)}
.f-grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:38px}
.f-brand img{height:52px;width:auto}
.f-brand p{color:var(--dim);font-size:.85rem;margin:16px 0 18px;max-width:32ch}
.f-brand .cline{font-size:.82rem;color:var(--dim);margin-bottom:6px}
.f-brand .cline a:hover{color:var(--pur2)}
.socials{display:flex;gap:10px;margin-top:18px}
.socials a{width:44px;height:44px;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.66rem;color:var(--dim);transition:.3s}
.socials a:hover{border-color:var(--pur);color:var(--pur2);transform:translateY(-3px)}
footer .f-head{display:block;font-family:var(--disp);font-size:.9rem;font-weight:800;letter-spacing:.02em;text-transform:none;color:var(--ink);margin-bottom:18px}
footer ul{list-style:none}
footer li{margin-bottom:9px}
footer li a{font-size:.9rem;color:var(--dim);transition:color .25s,padding-left .25s;padding:4px 0;display:inline-block;position:relative}
footer li a:hover{color:var(--pur2);padding-left:14px}
footer li a::before{content:'';position:absolute;left:0;top:50%;width:0;height:1.5px;background:var(--aurora);transform:translateY(-50%);transition:width .25s;border-radius:2px}
footer li a:hover::before{width:9px}
.f-bottom{max-width:1240px;margin:50px auto 0;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.75rem;color:var(--dim)}
.f-bottom .legal{display:flex;gap:20px}
.f-bottom .legal a{transition:color .25s}
.f-bottom .legal a:hover{color:var(--pur2)}
@media(max-width:1000px){.f-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.f-grid{grid-template-columns:1fr}}

/* ---------- mobile hardening (phones) ---------- */
@media(max-width:600px){
  section{padding:clamp(64px,10vh,90px) 20px}
  #hero{padding-top:104px}
  #hero h1{font-size:clamp(2.4rem,12vw,3.6rem)}
  #hero h1 .ln:nth-child(2){padding-left:24px}
  #hero h1 .ln:nth-child(3){padding-left:44px}
  .big247{font-size:38vw;top:6%;right:-4%;-webkit-text-stroke-width:1px}
  .hero-row{gap:28px;margin-top:26px}
  .feed{width:100%}
  .stats{grid-template-columns:1fr 1fr;margin-top:44px}
  .stat{padding:20px 14px}
  .h2{font-size:clamp(1.6rem,7vw,2.2rem)}
  #maniStage{min-height:auto}
  #manifesto p{font-size:clamp(1.5rem,6.5vw,2rem)}
  #leakCard,#ctaCard{margin:0 10px;border-radius:var(--r-lg);padding-left:22px;padding-right:22px}
  #leakCard .bigpound,#ctaCard{overflow:hidden}
  .leak-big{font-size:clamp(2.8rem,15vw,4rem)}
  .b-left,.b-right{padding:26px 20px}
  .btn{padding:14px 22px;font-size:.86rem}
  .demo-cta{gap:14px}
  .phone{font-size:clamp(1.5rem,7vw,1.9rem)}
  footer{padding:52px 20px 28px}
  .f-brand img{height:46px}
  .f-bottom{flex-direction:column;gap:14px}
}
@media(max-width:380px){
  #hero h1{font-size:2.1rem}
  .stats{grid-template-columns:1fr}
  /* stacked: a bottom rule replaces the vertical divider, matching .cols-3/.cols-2 */
  .stat{border-right:none;border-bottom:1px solid var(--line)}
  .stat:last-child{border-bottom:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  [data-reveal],[data-mask],[data-slide-l],[data-slide-r],.hero-sub,.hero-cta,.feed,.stat,.qa,#menu a.big,#menu .m-cta{opacity:1!important;transform:none!important;clip-path:none!important}
  #hero h1 .ch,.h2 .wi{transform:none!important}
  #leakCard,#ctaCard{transform:none!important;border-radius:0!important}
  #manifesto .mw{opacity:1!important}
  .ringbox .draw{stroke-dashoffset:0!important}
}
:focus-visible{outline:2px solid var(--pur);outline-offset:3px}

/* ==========================================================================
   SHARED PAGE COMPONENTS  — added for the full-site build.
   Everything above this line is the approved v5 template, unchanged.
   ========================================================================== */

/* Nav: current-page marker */
.nav-links a.here{color:var(--pur2)}
.nav-links a.here::after{width:100%}
#menu a.big.here i{color:var(--pur2)}

/* --------------------------------------------------------------------------
   LIGHT HERO — static gradient wash, no WebGL, no particles.
   Used on every page except /estate-agents/.
   -------------------------------------------------------------------------- */
#hero.hero-light{min-height:auto;padding-top:clamp(132px,17vh,190px);padding-bottom:clamp(50px,7vh,86px);overflow:hidden}
#hero.hero-light::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 520px at 82% -12%,rgba(188,19,254,.13),transparent 62%),
    radial-gradient(680px 420px at 6% 8%,rgba(108,27,214,.09),transparent 64%),
    linear-gradient(180deg,rgba(245,237,255,.55) 0%,rgba(252,251,254,0) 68%);
}
#hero.hero-light::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(25,8,38,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(25,8,38,.035) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 0%,#000,transparent 75%);
  mask-image:radial-gradient(70% 60% at 50% 0%,#000,transparent 75%);
}
#hero.hero-light .wrap{position:relative;z-index:2}
#hero.hero-light h1{
  font-family:var(--disp);font-weight:900;
  font-size:clamp(2.05rem,4.5vw,3.45rem);line-height:1.06;letter-spacing:-.022em;
  text-transform:none;max-width:20ch;
}
#hero.hero-light #heroEyebrow{opacity:0;transform:translateY(14px)}
#hero.hero-light .hero-sub{max-width:56ch;font-size:1.05rem}
#hero.hero-light .stats{margin-top:52px}

/* hero split layout with a side card */
.hero-split{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(30px,4vw,56px);align-items:center}
@media(max-width:980px){.hero-split{grid-template-columns:1fr;gap:36px}}
.hero-aside{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh);padding:clamp(26px,3vw,36px);opacity:0;transform:translateY(28px);
}
.hero-aside h2,.hero-aside b.t{font-family:var(--disp);font-weight:800;font-size:1.06rem;display:block;margin-bottom:16px}
.hero-aside ul{list-style:none}
.hero-aside li{position:relative;padding:11px 0 11px 30px;font-size:.9rem;color:var(--dim);border-bottom:1px dashed var(--line)}
.hero-aside li:last-child{border-bottom:none}
.hero-aside li::before{content:'';position:absolute;left:0;top:17px;width:11px;height:11px;background:var(--aurora)}
.hero-aside li b{color:var(--ink);font-weight:600}

/* --------------------------------------------------------------------------
   GENERIC SECTION FURNITURE
   -------------------------------------------------------------------------- */
.sec-head{max-width:1240px}
.lead{color:var(--dim);max-width:62ch;margin-top:18px;font-size:1.02rem}

/* card grids */
.grid{display:grid;gap:16px;margin-top:52px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:32px 26px;box-shadow:var(--sh);transition:transform .35s,border-color .35s;
  display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-8px);border-color:rgba(188,19,254,.32)}
.card .px3{display:flex;gap:4px;margin-bottom:18px}
.card .px3 i{width:9px;height:9px;background:var(--pur)}
.card .px3 i:nth-child(2){opacity:.55}
.card .px3 i:nth-child(3){opacity:.3}
.card h3,.card b.t{font-family:var(--disp);font-weight:800;font-size:1.12rem;display:block;margin-bottom:10px;line-height:1.25}
.card p{font-size:.9rem;color:var(--dim)}
.card .kpi{font-family:var(--disp);font-weight:900;font-size:clamp(1.9rem,4vw,2.8rem);line-height:1;background:var(--aurora);-webkit-background-clip:text;background-clip:text;color:transparent}
.card ul{list-style:none;margin-top:14px}
.card li{position:relative;padding:7px 0 7px 26px;font-size:.86rem;color:var(--dim)}
.card li::before{content:'';position:absolute;left:0;top:14px;width:9px;height:9px;background:var(--aurora)}
.card .more{margin-top:auto;padding-top:20px;font-family:var(--disp);font-weight:700;font-size:.86rem;color:var(--pur2);display:inline-flex;align-items:center;gap:9px;min-height:24px}
.card .more span{transition:transform .3s}
.card:hover .more span{transform:translateX(5px)}
a.card{color:inherit}
.card.accent{background:linear-gradient(140deg,#F7EEFF,#fff);border-color:rgba(188,19,254,.3)}
.card .num{
  font-family:var(--disp);font-weight:900;font-size:2.6rem;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(188,19,254,.4);display:block;margin-bottom:12px;
}

/* two-column layouts */
.cols{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,4.5vw,64px);align-items:start;margin-top:52px}
.cols.narrow{grid-template-columns:1.25fr .75fr}
@media(max-width:900px){.cols,.cols.narrow{grid-template-columns:1fr;gap:34px}}
.cols .body p{color:var(--dim);margin-bottom:16px}
.cols .body p:last-child{margin-bottom:0}
.cols .body strong{color:var(--ink)}

/* checklist */
.checks{list-style:none;margin-top:8px}
.checks li{position:relative;padding:12px 0 12px 36px;border-bottom:1px dashed var(--line);font-size:.94rem;color:var(--dim)}
.checks li:last-child{border-bottom:none}
.checks li b{color:var(--ink);font-weight:600}
.checks li::before{
  content:'';position:absolute;left:0;top:16px;width:18px;height:18px;border-radius:50%;
  background:var(--tint);
}
.checks li::after{
  content:'';position:absolute;left:5.5px;top:21px;width:7px;height:4px;
  border-left:2px solid var(--pur2);border-bottom:2px solid var(--pur2);transform:rotate(-45deg);
}

/* pill row */
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.pills span,.pills a{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  border:1.5px solid var(--line);border-radius:999px;padding:10px 16px;color:var(--dim);
  transition:border-color .25s,color .25s;
}
.pills a:hover{border-color:var(--pur);color:var(--pur2)}

/* callout */
.callout{margin-top:30px;padding:22px 26px;background:var(--tint);border-left:3px solid var(--pur);border-radius:0 16px 16px 0;font-size:.94rem;color:var(--dim)}
.callout b{color:var(--ink)}
.callout p+p{margin-top:12px}

/* dark panel */
.panel-dark{background:var(--ink);color:#F6F2FB;border-radius:var(--r-xl);padding:clamp(48px,7vh,84px) clamp(24px,4vw,60px);margin-top:56px}
.panel-dark .h2{color:#fff}
.panel-dark .eyebrow{color:#E39BFF}
.panel-dark .eyebrow .px i{background:#E39BFF}
.panel-dark .sub,.panel-dark p{color:#C4B5D6}
.panel-dark .card{background:rgba(246,242,251,.05);border-color:rgba(246,242,251,.14);box-shadow:none;color:#F6F2FB}
.panel-dark .card:hover{border-color:rgba(227,155,255,.5)}
.panel-dark .card p{color:#C4B5D6}
.panel-dark .checks li{color:#C4B5D6;border-color:rgba(246,242,251,.14)}
.panel-dark .checks li b{color:#fff}
.panel-dark .checks li::before{background:rgba(227,155,255,.18)}
.panel-dark .checks li::after{border-color:#E39BFF}
@media(max-width:600px){.panel-dark{border-radius:var(--r-lg);padding:44px 22px}}

/* --------------------------------------------------------------------------
   PRICING
   -------------------------------------------------------------------------- */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:52px;align-items:stretch}
@media(max-width:1080px){.tiers{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.tiers{grid-template-columns:1fr}}
.tier{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 26px;
  box-shadow:var(--sh);display:flex;flex-direction:column;position:relative;transition:transform .35s;
}
.tier:hover{transform:translateY(-8px)}
.tier.feat{border:1.5px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--aurora) border-box}
.tier .badge{
  position:absolute;top:-11px;left:26px;font-family:var(--mono);font-size:.58rem;letter-spacing:.22em;
  text-transform:uppercase;font-weight:700;background:var(--aurora);color:#fff;padding:6px 12px;border-radius:999px;
}
.tier h3{font-family:var(--disp);font-weight:800;font-size:1.2rem;margin-bottom:8px}
.tier .price{font-family:var(--disp);font-weight:900;font-size:2.1rem;line-height:1.1;margin:14px 0 4px;background:var(--aurora);-webkit-background-clip:text;background-clip:text;color:transparent}
.tier .per{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);font-weight:700}
.tier>p{font-size:.88rem;color:var(--dim);margin-top:14px}
.tier ul{list-style:none;margin:20px 0 24px}
.tier li{position:relative;padding:9px 0 9px 26px;font-size:.86rem;color:var(--dim);border-bottom:1px dashed var(--line)}
.tier li:last-child{border-bottom:none}
.tier li::before{content:'';position:absolute;left:0;top:16px;width:9px;height:9px;background:var(--aurora)}
.tier .btn{margin-top:auto;width:100%;justify-content:center}
.price-note{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--dim);margin-top:26px;text-align:center}

/* comparison table */
.tbl-wrap{margin-top:46px;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
table.tbl{width:100%;border-collapse:collapse;min-width:520px;font-size:.9rem}
table.tbl th,table.tbl td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line)}
table.tbl thead th{font-family:var(--disp);font-weight:800;font-size:.86rem;background:linear-gradient(180deg,#fff,#FBF7FF)}
table.tbl tbody th{font-weight:600;color:var(--ink)}
table.tbl td{color:var(--dim)}
table.tbl tr:last-child th,table.tbl tr:last-child td{border-bottom:none}
table.tbl .yes{color:var(--pur2);font-weight:700}

/* --------------------------------------------------------------------------
   CONTACT
   -------------------------------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4vw,56px);align-items:start;margin-top:48px}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
.form-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);padding:clamp(26px,3.4vw,40px)}
.field{margin-bottom:20px}
.field label{display:block;font-family:var(--disp);font-weight:700;font-size:.84rem;margin-bottom:8px}
.field label .req{color:var(--pur);margin-left:3px}
.field input,.field textarea,.field select{
  width:100%;font-family:var(--body);font-size:.95rem;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:14px 16px;min-height:48px;transition:border-color .25s,box-shadow .25s;
}
.field textarea{min-height:150px;resize:vertical;line-height:1.6}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--pur);box-shadow:0 0 0 3px rgba(188,19,254,.14);
}
.field .hint{font-size:.78rem;color:var(--dim);margin-top:6px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-card .btn{width:100%;justify-content:center;margin-top:6px}
.form-status{
  margin-top:18px;padding:14px 18px;border-radius:var(--r-sm);font-size:.9rem;
  background:var(--tint);color:var(--pur2);border-left:3px solid var(--pur);
}
.form-status.ok{background:#EEFBF3;color:#146C43;border-left-color:#146C43}
.form-status.err{background:#FDF0F0;color:#A32020;border-left-color:#A32020}
.form-legal{font-size:.78rem;color:var(--dim);margin-top:16px}
.form-legal a{color:var(--pur2);text-decoration:underline;text-underline-offset:2px}

.contact-list{list-style:none}
.contact-list li{padding:20px 0;border-bottom:1px solid var(--line)}
.contact-list li:last-child{border-bottom:none}
.contact-list h3{font-family:var(--disp);font-weight:800;font-size:.92rem;margin-bottom:6px}
.contact-list p,.contact-list a{color:var(--dim);font-size:.92rem}
.contact-list a:hover{color:var(--pur2)}

/* --------------------------------------------------------------------------
   LEGAL / LONG-FORM PROSE
   -------------------------------------------------------------------------- */
.prose{max-width:78ch;margin-top:44px}
.prose h2{font-family:var(--disp);font-weight:800;font-size:clamp(1.3rem,2.6vw,1.7rem);line-height:1.2;margin:52px 0 16px;letter-spacing:-.01em}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--disp);font-weight:700;font-size:1.06rem;margin:34px 0 12px}
.prose p{color:var(--dim);margin-bottom:16px;font-size:.96rem}
.prose ul,.prose ol{margin:0 0 18px 0;padding-left:0;list-style:none}
.prose ol{counter-reset:pl}
.prose li{position:relative;padding:7px 0 7px 28px;color:var(--dim);font-size:.94rem}
.prose ul>li::before{content:'';position:absolute;left:2px;top:16px;width:9px;height:9px;background:var(--aurora)}
.prose ol>li{counter-increment:pl}
.prose ol>li::before{content:counter(pl,decimal-leading-zero);position:absolute;left:0;top:7px;font-family:var(--mono);font-size:.72rem;font-weight:700;color:var(--pur2)}
.prose strong{color:var(--ink)}
.prose a{color:var(--pur2);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--pur)}
.prose table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:.9rem}
.prose th,.prose td{padding:12px 14px;border:1px solid var(--line);text-align:left;vertical-align:top}
.prose th{font-family:var(--disp);font-weight:700;background:var(--tint)}
.prose td{color:var(--dim)}
.updated{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);font-weight:700}

/* table of contents */
.toc{background:var(--tint);border-radius:var(--r-md);padding:28px 30px;position:sticky;top:100px}
.toc h2{font-family:var(--disp);font-weight:800;font-size:.92rem;margin:0 0 14px}
.toc ol{list-style:none;counter-reset:t}
.toc li{counter-increment:t;margin-bottom:2px}
.toc a{display:block;font-size:.86rem;color:var(--dim);padding:7px 0 7px 28px;position:relative;transition:color .25s;min-height:24px}
.toc a::before{content:counter(t,decimal-leading-zero);position:absolute;left:0;top:7px;font-family:var(--mono);font-size:.66rem;font-weight:700;color:var(--pur2)}
.toc a:hover{color:var(--pur2)}
@media(max-width:900px){.toc{position:static}}

/* --------------------------------------------------------------------------
   MISC
   -------------------------------------------------------------------------- */
.breadcrumb{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:20px;font-weight:700}
.breadcrumb a{color:var(--dim);transition:color .25s}
.breadcrumb a:hover{color:var(--pur2)}
.breadcrumb span{margin:0 8px;opacity:.5}

.portrait{border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--sh);width:100%;height:auto;background:var(--tint)}

.quote-block{
  border-left:3px solid var(--pur);padding:8px 0 8px 26px;margin:32px 0;
  font-family:var(--disp);font-weight:700;font-size:clamp(1.05rem,2.2vw,1.35rem);line-height:1.45;
}
.quote-block cite{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);font-style:normal;font-weight:700;margin-top:14px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:400;background:var(--ink);color:#fff;
  padding:14px 22px;border-radius:0 0 12px 0;font-weight:700;font-size:.9rem;
}
.skip:focus{left:0}

.mini-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

/* reduced motion for the additions */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #hero.hero-light #heroEyebrow,.hero-aside{opacity:1!important;transform:none!important}
  .card:hover,.tier:hover{transform:none}
}

/* --------------------------------------------------------------------------
   STAT STRIP VARIANTS
   -------------------------------------------------------------------------- */
.stats.cols-3{grid-template-columns:repeat(3,1fr)}
.stats.cols-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){.stats.cols-3,.stats.cols-2{grid-template-columns:1fr}.stats.cols-3 .stat,.stats.cols-2 .stat{border-right:none;border-bottom:1px solid var(--line)}.stats.cols-3 .stat:last-child,.stats.cols-2 .stat:last-child{border-bottom:none}}
/* variants deliberately share the base size so every stat strip matches */
.stats.cols-3 .stat .n,.stats.cols-2 .stat .n{font-size:clamp(2rem,3.5vw,2.9rem)}

/* rotating hero word */
#roll{display:inline-block;min-width:5ch}

/* --------------------------------------------------------------------------
   MANUAL vs NEXFORM COST CALCULATOR
   -------------------------------------------------------------------------- */
.calc{margin-top:52px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);overflow:hidden}
.calc-inputs{
  display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:18px;
  padding:clamp(24px,3vw,34px);border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#FDFBFF,#F7EFFF);
}
@media(max-width:700px){.calc-inputs{grid-template-columns:1fr}}
.calc-inputs .field{margin-bottom:0}

.calc-grid{display:grid;grid-template-columns:1fr 1fr}
@media(max-width:820px){.calc-grid{grid-template-columns:1fr}}
.calc-side{padding:clamp(24px,3vw,36px)}
.calc-side.manual{border-right:1px solid var(--line)}
@media(max-width:820px){.calc-side.manual{border-right:none;border-bottom:1px solid var(--line)}}
.calc-side.auto{background:linear-gradient(180deg,#FDFBFF,#F7EFFF)}
.calc-head{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.calc-head b{font-family:var(--disp);font-weight:900;font-size:1.3rem}
.calc-head span{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:700;color:var(--pur2);background:var(--tint);padding:5px 10px;border-radius:999px;
}
.calc-side.auto .calc-head span{background:var(--aurora);color:#fff}
.calc-note{font-size:.82rem;color:var(--dim);margin-bottom:20px}

.calc .q-line{align-items:flex-start}
.calc .q-line .l{display:flex;flex-direction:column;gap:3px}
.calc .q-line .v{display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right}
.calc .q-line .v b{font-family:var(--mono);font-weight:700;white-space:nowrap}
.calc .q-line small{font-family:var(--body);font-weight:400;font-size:.72rem;color:var(--dim)}

.calc-total{
  margin-top:20px;padding:20px;border-radius:var(--r-md);
  border:1.5px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--aurora) border-box;
  display:flex;flex-direction:column;gap:4px;
}
.calc-total .t1{font-family:var(--mono);font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--dim);font-weight:700}
.calc-total .t2{font-family:var(--disp);font-weight:900;font-size:clamp(1.6rem,3.4vw,2.1rem);background:var(--aurora);-webkit-background-clip:text;background-clip:text;color:transparent}
.calc-total .t3{font-size:.78rem;color:var(--dim)}

.calc-save{
  background:var(--ink);color:#F6F2FB;padding:clamp(26px,3.4vw,40px);
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
}
.calc-save-main{display:flex;flex-direction:column;gap:6px}
.calc-save-main .t1{font-family:var(--mono);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:#C4B5D6;font-weight:700}
.calc-save-main .t2{font-family:var(--disp);font-weight:900;font-size:clamp(2rem,5vw,3.1rem);line-height:1;background:linear-gradient(92deg,#E39BFF,#BC13FE);-webkit-background-clip:text;background-clip:text;color:transparent}
.calc-save-sub{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:.88rem;color:#C4B5D6;max-width:34ch}
.calc-save-sub b{color:#fff;font-family:var(--disp);font-weight:800}
.calc-foot{font-family:var(--mono);font-size:.62rem;line-height:1.7;color:var(--dim);padding:18px clamp(24px,3vw,34px);text-align:center;background:var(--card)}
@media(max-width:600px){.calc{border-radius:var(--r-lg)}.calc-save{flex-direction:column;align-items:flex-start}}

/* --------------------------------------------------------------------------
   ADDITIONAL UTILITIES
   -------------------------------------------------------------------------- */
.grid-5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1180px){.grid-5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.grid-5{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid-5{grid-template-columns:1fr}}

/* pipeline cards read as steps, so tighten them up */
.pipe .card{padding:26px 22px}
.pipe .card .num{font-size:2rem;margin-bottom:8px}
.pipe .card li{font-size:.8rem;padding:6px 0 6px 22px}
.pipe .card li::before{top:12px;width:7px;height:7px}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* dark panel table */
.panel-dark .tbl-wrap{background:rgba(246,242,251,.04);border-color:rgba(246,242,251,.16)}
.panel-dark table.tbl thead th{background:rgba(246,242,251,.07);color:#fff}
.panel-dark table.tbl th,.panel-dark table.tbl td{border-color:rgba(246,242,251,.14)}
.panel-dark table.tbl tbody th{color:#fff}
.panel-dark table.tbl td{color:#C4B5D6}
.panel-dark table.tbl .yes{color:#E39BFF}
.panel-dark .rel a{border-color:rgba(246,242,251,.22);color:#F6F2FB}
.panel-dark .rel a:hover{border-color:#E39BFF;color:#E39BFF}
.panel-dark .quote-block cite{color:#C4B5D6}
.panel-dark .callout{background:rgba(227,155,255,.09);border-left-color:#E39BFF;color:#C4B5D6}
.panel-dark .callout b{color:#fff}
.panel-dark .pills span,.panel-dark .pills a{border-color:rgba(246,242,251,.22);color:#C4B5D6}

/* the eyebrow is used inside cards as a kicker too */
.card .eyebrow{margin-bottom:12px;font-size:.62rem;letter-spacing:.28em}

/* five-stage timeline variant */
.stages-5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1100px){.stages-5{grid-template-columns:repeat(3,1fr);row-gap:34px}.stages-5::before,.stages-5 .prog{display:none}}
@media(max-width:860px){.stages-5{grid-template-columns:1fr;gap:34px}}

/* --------------------------------------------------------------------------
   LEGAL PAGE LAYOUT — contents first in the DOM, on the right on desktop
   -------------------------------------------------------------------------- */
.legal-grid{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:clamp(30px,4vw,56px);align-items:start}
.legal-grid .prose{grid-column:1;grid-row:1;margin-top:0}
.legal-grid .toc{grid-column:2;grid-row:1}
@media(max-width:960px){
  .legal-grid{grid-template-columns:1fr;gap:32px}
  .legal-grid .toc{grid-column:1;grid-row:1;position:static}
  .legal-grid .prose{grid-column:1;grid-row:2}
}
.prose h2{scroll-margin-top:100px}

/* --------------------------------------------------------------------------
   TOUCH TARGETS
   Standalone navigation links get a 44px hit area (inline links inside a
   sentence are exempt, and shrinking the text would hurt the design).
   Padding is added rather than height so the visual rhythm is unchanged.
   -------------------------------------------------------------------------- */
.nav-links a,
footer li a,
.f-brand .cline a,
.f-bottom .legal a,
.breadcrumb a,
.logo{display:inline-flex;align-items:center;min-height:44px}
.nav-links a{padding:0}
footer li{margin-bottom:0}
footer li a{padding:0}
.f-brand .cline{margin-bottom:0}
.toc a{min-height:44px;display:flex;align-items:center}
/* the footer hover rule shifts the link right; keep that working with flex */
footer li a:hover{padding-left:14px}

/* A 60px horizontal slide is a big move on a phone; shorten it so the
   pre-reveal state never pushes content far outside the viewport. */
@media(max-width:768px){
  [data-slide-l]{transform:translateX(-24px)}
  [data-slide-r]{transform:translateX(24px)}
}

/* --------------------------------------------------------------------------
   ACCESSIBILITY CORRECTIONS
   -------------------------------------------------------------------------- */

/* The FAQ +/x indicator is text, so it needs 4.5:1. --pur on white is 4.37:1;
   --pur2 is the same brand purple one step darker, at 7.4:1. */
.qa .pm{color:var(--pur2)}

/* List text inside a card on a dark panel was inheriting the light-background
   body colour (2.75:1 on ink). Match the panel's other muted text. */
.panel-dark .card li{color:#C4B5D6}
.panel-dark .card ul li::before{background:linear-gradient(92deg,#E39BFF,#BC13FE)}
.panel-dark .tier{background:rgba(246,242,251,.05);border-color:rgba(246,242,251,.14);box-shadow:none}
.panel-dark .tier h3{color:#fff}
.panel-dark .tier>p,.panel-dark .tier li{color:#C4B5D6}
.panel-dark .tier li{border-color:rgba(246,242,251,.14)}

/* The quote-builder toggle is 48x28 by design. Keep the visual size and give
   it a 44px-tall invisible hit area so it is comfortable on touch. */
.sw::before{content:'';position:absolute;inset:-8px -6px;border-radius:999px}

/* The volume slider keeps its native appearance and accent colour; the taller
   box just centres it and gives a 44px hit area. */
input[type=range]{height:44px;margin-top:0}

/* ---- Global preloader + animated background (injected site-wide) ---- */
#loader .loader-bar{width:140px;height:2px;background:rgba(188,19,254,.15);overflow:hidden;border-radius:2px}
#loader .loader-bar i{display:block;height:100%;width:40%;background:var(--aurora);border-radius:2px;animation:loadslide 1s ease-in-out infinite}
@keyframes loadslide{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
/* The old canvas-2D background (#glBg) has been replaced by the shared WebGL
   point cloud, so its rules are gone. The blanket
     body>*:not(...){position:relative;z-index:1}
   that used to sit here is removed too: its five :not(#id) clauses gave it a
   higher specificity than #rail, which forced the fixed section rail and the
   fixed .wash into the flow -- the rail then stretched full width and pushed
   the page into horizontal overflow. Everything that needs to sit above the
   canvas already declares its own z-index (main 2, footer 2, #rail 90,
   #nav 100, #menu 200, #progress 300, .skip 400, .cur-dot 9999). */
/* fade page content in once ready to avoid a flash before the loader wipe */
@media (prefers-reduced-motion:no-preference){
  html:not(.ready) body{overflow:hidden}
}
/* safety: never leave content locked if JS fails to set .ready */
html:not(.ready) body{overflow:auto}
@media (prefers-reduced-motion:no-preference){
  /* re-lock only briefly; .ready is set on load/font-ready or after 4s safety */
  html:not(.ready) body{overflow:hidden}
}

/* ---- Hero rotating word ---- */
.rollline{display:inline-flex;align-items:baseline}
.roller{position:relative;display:inline-block;overflow:hidden;vertical-align:bottom;height:1em;line-height:1}
.roller .rw{display:block;height:1em;line-height:1}

/* ==========================================================================
   BACKGROUND SCENE + READABILITY PANELS

   The WebGL point cloud is always on, behind every page. Text therefore needs
   its own light backing so it stays readable over the moving particles. The
   panels are deliberately per-block rather than one big sheet, so the scene
   still shows through the gaps between them.

   Panel tint is rgba(252,251,254,.82) rather than .72: at .72 the muted body
   colour (--dim) drops to ~3.9:1 where a bright magenta point sits directly
   behind it, which misses AA. .82 keeps it above 4.5:1 in the worst case and
   still reads as translucent.
   ========================================================================== */

/* the scene is always visible now — it is no longer faded in by the hero */
#gl{opacity:1}

/* The old wash dimmed the lower half of the page to 40% white, which buried
   the spine. Keep only a soft top-corner tint. */
.wash{
  background:radial-gradient(900px 500px at 88% -8%,rgba(188,19,254,.07),transparent 62%);
}

/* the light hero's own gradient sat on top of the scene — lighten it */
#hero.hero-light::before{opacity:.55}

:root{
  --panel:rgba(252,251,254,.82);
  --panel-soft:rgba(252,251,254,.72);
  /* No blur(): these panels sit over the WebGL point cloud, and a
     backdrop blur smeared the whole scene. Contrast comes from the
     .82 opacity above, not from blurring, so the cloud stays sharp. */
  --panel-blur:saturate(1.05);
  --panel-edge:1px solid rgba(255,255,255,.55);
}

/* ---- the shared frosted treatment ---------------------------------------- */
.h2, .sub, .lead,
.prose, .checks, .quote-block, .callout,
.hero-sub, .hero-aside, .stats,
.card, .bcard, .tier, .jpanel, .pain, .feed, .calc, .form-card,
.toc, .faq, .builder, .stages, .tbl-wrap, .contact-list, .rel a, .pills span, .pills a{
  backdrop-filter:var(--panel-blur);
  -webkit-backdrop-filter:var(--panel-blur);
}

/* blocks that had no background of their own */
.h2, .sub, .lead{
  background:var(--panel);
  border-radius:var(--r-md);
  padding:14px 20px;
  /* pull the panel out to the text's optical edge so it doesn't look inset */
  margin-left:-20px;
  width:fit-content;
  max-width:calc(100% + 20px);
}
.sub, .lead{padding:12px 20px}

.eyebrow{
  background:var(--panel-soft);
  backdrop-filter:var(--panel-blur);
  -webkit-backdrop-filter:var(--panel-blur);
  border-radius:999px;
  padding:8px 16px 8px 14px;
  width:fit-content;
  max-width:100%;
}

/* The hero column is deliberately NOT panelled: a sheet that size would hide
   the scene behind the whole first screen. The headline is 900-weight ink at
   ~120px and reads fine over the particles on its own, so only the paragraph
   gets a backing. The template's soft radial wash stays, at about half
   strength, to lift the headline a little. */
#heroCopy::before{
  background:radial-gradient(58% 58% at 30% 45%,rgba(252,251,254,.60) 0%,rgba(252,251,254,.38) 45%,rgba(252,251,254,0) 80%);
}
.hero-sub{
  text-shadow:none;
  background:var(--panel);
  backdrop-filter:var(--panel-blur);
  -webkit-backdrop-filter:var(--panel-blur);
  border-radius:var(--r-md);
  padding:16px 20px;
  margin-left:-20px;
  width:fit-content;
  max-width:calc(100% + 20px);
}

.prose, .checks, .quote-block{
  background:var(--panel);
  border-radius:var(--r-md);
  padding:clamp(18px,2.4vw,28px);
}
.quote-block{border-radius:0 20px 20px 0}
.checks{margin-top:18px}

.stats{
  background:var(--panel);
  border-radius:var(--r-md);
  overflow:hidden;
}

/* blocks that were solid white become translucent so the scene reads behind */
.card, .tier, .bcard, .calc, .form-card, .feed, .tbl-wrap, .jpanel{
  background:var(--panel);
  border-color:rgba(25,8,38,.10);
}
.card.accent{background:linear-gradient(140deg,rgba(247,238,255,.88),rgba(252,251,254,.86))}
.tier.feat{background:linear-gradient(rgba(252,251,254,.9),rgba(252,251,254,.9)) padding-box,var(--aurora) border-box}
.toc{background:rgba(245,237,255,.82)}
.calc-inputs, .calc-side.auto{background:linear-gradient(180deg,rgba(253,251,255,.72),rgba(247,239,255,.72))}
.calc-foot{background:transparent}
.feed-head{background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(251,247,255,.8))}
.field input, .field textarea, .field select{background:rgba(255,255,255,.88)}

footer{
  background:rgba(252,251,254,.88);
  backdrop-filter:var(--panel-blur);
  -webkit-backdrop-filter:var(--panel-blur);
}

/* ---- exclusions: anything already on a dark ground ----------------------- */
.panel-dark .h2, .panel-dark .sub, .panel-dark .lead,
.panel-dark .eyebrow, .panel-dark .checks, .panel-dark .callout,
#ctaCard .h2, #ctaCard .sub, #ctaCard .eyebrow,
#leakCard .h2, #leakCard .sub, #leakCard .eyebrow,
#leakCard .leak-cap, #leakCard .leak-foot{
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:none;
  padding-left:0;
  padding-right:0;
  margin-left:0;
  width:auto;
  max-width:none;
}
.panel-dark .card, .panel-dark .tier{
  background:rgba(246,242,251,.06);
}
.panel-dark .tbl-wrap{background:rgba(246,242,251,.05)}
/* the dark story cards keep their own solid grounds */
#leakCard, #ctaCard, .panel-dark{backdrop-filter:none;-webkit-backdrop-filter:none}
.pain{background:rgba(246,242,251,.05)}

/* headings that are centred (the closing CTA) must not be pulled left */
#ctaCard .h2{margin-left:auto;margin-right:auto}

/* ---- small screens: tighter panels, no negative offsets ------------------ */
@media(max-width:700px){
  .h2, .sub, .lead{margin-left:0;padding-left:14px;padding-right:14px;max-width:100%}
  .hero-sub{margin-left:0;padding:14px 16px;border-radius:16px;max-width:100%}
  .prose, .checks{padding:16px 14px}
}

/* ---- if the browser cannot blur, lean on opacity instead ----------------- */
@supports not ((backdrop-filter:blur(6px)) or (-webkit-backdrop-filter:blur(6px))){
  :root{--panel:rgba(252,251,254,.94);--panel-soft:rgba(252,251,254,.9)}
  .card, .tier, .bcard, .calc, .form-card, .feed, .tbl-wrap, .jpanel{background:rgba(252,251,254,.95)}
  footer{background:rgba(252,251,254,.97)}
}

/* ---- reduced motion: the scene is drawn once and never animates ---------- */
@media (prefers-reduced-motion:reduce){
  #gl{opacity:.75}
}

/* --------------------------------------------------------------------------
   ROLLING HERO WORD
   background-clip:text only clips to text the element itself renders inline.
   The roller is an inline-block with overflow:hidden and its .rw child is a
   block, so a gradient set on an ancestor never reaches the word — which is
   why it painted transparent. Put the gradient on .rw, the element that
   actually holds the text, and keep one on .roller for the no-JS case where
   the word is still a direct text child.
   -------------------------------------------------------------------------- */
.roller.grad,
.roller .rw{
  background:var(--aurora);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.roller .rw{will-change:transform}
/* the trailing full stop stays in the ink colour */
.rollline{color:var(--ink)}
.rollstop{-webkit-text-fill-color:currentColor;color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  .roller .rw{transform:none!important;opacity:1!important}
}

/* --------------------------------------------------------------------------
   PANEL FIXES found while measuring contrast over the live scene
   -------------------------------------------------------------------------- */

/* A pull-quote sitting inside a dark panel was picking up the light frosted
   background, which left its light cite text at 1.79:1. Dark panels keep
   their own ground. */
.panel-dark .quote-block,
#ctaCard .quote-block,
#leakCard .quote-block{
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  padding-top:8px;
  padding-bottom:8px;
  padding-right:0;
}

/* The required-field asterisk was --pur (4.18:1 over the scene). --pur2 is the
   same brand purple a step darker, and clears AA comfortably. */
.field label .req{color:var(--pur2)}