/* Layout: the Studio concept with the Slim Gateway logo. A particle sculpture sits in the middle of the screen. It opens by assembling the logo, hands the logo to the nav, then reshapes for every section: the gateway standing in a glass globe, a voice wave, an open playbook, rising steps, a team, scattered calls, a play button, and the gateway again at the end. Cinzel appears only inside the logo; every other word is Manrope, light with bold for emphasis. The page scrolls normally the whole time. One look per version on purpose: dark navy studio, light blue dots. */
:root{
  --bg:#0A1030; --bg-lit:#18245E; --floor:rgba(4,7,22,.88); --footer-bg:#080D28;
  --ink:#F2F5FF; --text:#C9D1EA; --slate:#8E99BC; --accent:#9EB9FF; --hi:#9EB9FF; --num:#9EB9FF;
  --line:rgba(214,224,255,.14);
  --card-bg:rgba(16,24,64,.55); --card-border:rgba(214,224,255,.12); --card-shadow:rgba(0,0,0,.6);
  --pill-bg:rgba(14,21,58,.72); --pill-border:rgba(158,185,255,.3);
  --btn-bg:#F2F5FF; --btn-fg:#0E1630; --btn-em:rgba(14,22,48,.5); --btn-hover-bg:#9EB9FF; --btn-hover-fg:#0A1030;
  --glow:rgba(96,128,255,.26); --glow-mid:rgba(96,128,255,.09); --floor-glow:rgba(158,185,255,.16);
  --note-bg:rgba(14,21,58,.8); --word-dim:rgba(242,245,255,.12); --tick:rgba(214,224,255,.3); --ping:rgba(158,185,255,.5);
  --logo-ink:#FFFFFF; --logo-tag:#B9C1D6;
  --nav-fade:rgba(10,16,48,.92); --nav-fade-0:rgba(10,16,48,0);
  --hot:#FF4D5E; --hot-ping:rgba(255,77,94,.55);
  color-scheme:dark;
  --logo:"Cinzel","Trajan Pro",Georgia,serif;
  --sans:"Manrope","Helvetica Neue",Arial,sans-serif;
}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
*{box-sizing:border-box}
html,body{background:var(--bg);color:var(--text)}
body{font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.mono{font-family:var(--sans);font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.wrap{max-width:1360px;margin:0 auto;padding-inline:clamp(16px,3.5vw,44px)}
b,strong{font-weight:700}

/* studio backdrop */
.stage{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(120% 70% at 50% 0%,var(--bg-lit) 0%,var(--bg) 60%),var(--bg)}
.stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,rgba(0,0,0,0),var(--floor))}
.glow{position:absolute;left:50%;top:46%;width:min(56vw,640px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,var(--glow) 0%,var(--glow-mid) 32%,rgba(0,0,0,0) 68%);opacity:var(--go,1);transition:opacity .9s}
.shadow{position:absolute;left:50%;top:79%;width:min(34vw,380px);height:28px;transform:translateX(-50%) scaleX(var(--ss,1));border-radius:50%;background:radial-gradient(closest-side,var(--floor-glow),rgba(0,0,0,0));transition:transform 1.2s cubic-bezier(.6,0,.2,1),opacity .9s}
#sculpt{position:absolute;inset:0;width:100%;height:100%;display:block}
.sky{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.sky i{position:absolute;left:0;top:0;height:1.5px;border-radius:2px;transform-origin:0 50%;background:linear-gradient(90deg,rgba(255,77,94,0),rgba(255,77,94,.8) 72%,#FFE4E7);box-shadow:0 0 8px rgba(255,77,94,.5);opacity:0}
/* button flare: a red streak circles the button while hovered */
.btn{position:relative}
.orbitflare{position:absolute;left:-3px;top:-3px;pointer-events:none;overflow:visible;filter:drop-shadow(0 0 4px var(--hot-ping));transition:opacity .35s}
/* arrows on the buttons and the Book a call link: while hovered the arrow turns into a flare. A bright head runs up the shaft
   from the bottom, forks at the tip and runs back down both sides; its contrail redraws the arrow on every lap, so it pulses */
.btn em,nav .talk em,.reel-link .go em{display:inline-flex;align-items:center}
.arr{width:.64em;height:.64em;overflow:visible;transition:filter .2s}
.arr path{fill:none;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.arr .bs{stroke:currentColor;transition:opacity .25s}
.arr .t0,.arr .t1,.arr .t2{stroke:var(--hot);opacity:0}
.arr .h0,.arr .h1,.arr .h2{stroke:#FFE4E7;stroke-width:1.8;opacity:0}
.arr .t0{stroke-dasharray:12.73 40}.arr .t1,.arr .t2{stroke-dasharray:6.5 40}
.arr .h0{stroke-dasharray:3.4 40}.arr .h1,.arr .h2{stroke-dasharray:2.4 40}
:is(.btn,nav .talk,.reel-link,.alt,.inlink):is(:hover,:focus-visible) .arr{filter:drop-shadow(0 0 2px var(--hot))}
:is(.btn,nav .talk,.reel-link,.alt,.inlink):is(:hover,:focus-visible) .arr .bs{opacity:0;transition:opacity .09s}
:is(.btn,nav .talk,.reel-link,.alt,.inlink):is(:hover,:focus-visible) .arr .t0{animation:arrT0 1.15s linear infinite}
:is(.btn,nav .talk,.reel-link,.alt,.inlink):is(:hover,:focus-visible) .arr .h0{animation:arrH0 1.15s linear infinite}
:is(.btn,nav .talk,.reel-link,.alt,.inlink):is(:hover,:focus-visible) .arr .t1,:is(.btn,nav .talk,.reel-link,.alt,.inlink):is(:hover,:focus-visible) .arr .t2{animation:arrT1 1.15s linear infinite}
:is(.btn,nav .talk,.reel-link,.alt,.inlink):is(:hover,:focus-visible) .arr .h1,:is(.btn,nav .talk,.reel-link,.alt,.inlink):is(:hover,:focus-visible) .arr .h2{animation:arrH1 1.15s linear infinite}
@keyframes arrT0{0%{stroke-dashoffset:12.73;opacity:.95}34%{stroke-dashoffset:0;opacity:.95}100%{stroke-dashoffset:0;opacity:0}}
@keyframes arrH0{0%{stroke-dashoffset:3.4;opacity:1}32%{opacity:1}34%{stroke-dashoffset:-9.33;opacity:0}100%{stroke-dashoffset:-9.33;opacity:0}}
@keyframes arrT1{0%,34%{stroke-dashoffset:6.5;opacity:.95}56%{stroke-dashoffset:0;opacity:.95}100%{stroke-dashoffset:0;opacity:0}}
@keyframes arrH1{0%,33%{stroke-dashoffset:2.4;opacity:0}35%{opacity:1}54%{opacity:1}56%{stroke-dashoffset:-4.1;opacity:0}100%{stroke-dashoffset:-4.1;opacity:0}}
@media (prefers-reduced-motion:reduce){:is(.btn,nav .talk,.reel-link,.alt,.inlink):is(:hover,:focus-visible) .arr :is(.t0,.t1,.t2){opacity:1;stroke-dashoffset:0}}
/* the red thread between the steps */
.thread{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;will-change:transform}
.thread path{fill:none;stroke:var(--hot);stroke-width:1.25px;opacity:.6;filter:drop-shadow(0 0 3px var(--hot-ping))}
.thread circle{fill:var(--hot);opacity:.16;transition:opacity .5s}
.thread circle.on{opacity:.95}
/* the slow flare that keeps circling each step card */
.card{position:relative}
.cardflare{position:absolute;pointer-events:none;overflow:visible;filter:drop-shadow(0 0 2px var(--hot-ping))}
/* constellations in the night sky above the logo */
.constel{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible;transition:opacity .4s}
html.intro .constel{visibility:hidden}
.constel circle{fill:#E6EDFF;filter:drop-shadow(0 0 2.5px rgba(158,185,255,.7));opacity:var(--o,.7);animation:twinkle 5s ease-in-out infinite}
.constel circle.red{fill:#FFC4B4;filter:drop-shadow(0 0 3px rgba(255,130,110,.6))}
@keyframes twinkle{0%,100%{opacity:var(--o,.7)}50%{opacity:calc(var(--o,.7)*.45)}}
.orbit{position:fixed;inset:0;z-index:1;pointer-events:none}
.orbit span{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;border:1px solid var(--pill-border);background:var(--pill-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:12.5px;font-weight:500;color:var(--ink);white-space:nowrap;will-change:transform,opacity}
.orbit span i{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.hint{position:fixed;z-index:2;left:0;top:0;pointer-events:none;display:flex;align-items:center;gap:8px;transition:opacity .6s}
.hint i{width:8px;height:8px;border-radius:50%;background:var(--hot);box-shadow:0 0 0 0 var(--hot-ping);animation:ping 1.8s infinite}
@keyframes ping{70%{box-shadow:0 0 0 12px rgba(0,0,0,0)}100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}}

/* intro: the logo itself, so this is the one place Cinzel is used besides the nav and footer logos */
#intro{position:fixed;inset:0;z-index:60;pointer-events:none;display:none}
html.intro #intro{display:block}
html.intro main,html.intro footer,html.intro .ticks,html.intro .orbit,html.intro .hint,html.intro .note{opacity:0}
html.intro nav.top .fade{opacity:0}
html.intro nav.top .brand{opacity:0}
.imark{position:absolute;left:0;top:0;opacity:0;will-change:transform,opacity,filter;transform-origin:50% 50%}
.imark svg{width:100%;height:100%;display:block}
.iword{position:absolute;left:0;top:0;display:grid;justify-items:center;gap:14px;transform-origin:50% 50%;will-change:transform}
.iword .w{display:inline-block;transform-origin:50% 50%;will-change:transform;font-family:var(--logo);font-weight:700;font-size:clamp(30px,4.4vw,58px);letter-spacing:.06em;line-height:1;white-space:nowrap;padding-left:.06em;color:var(--logo-ink)}
.iword .w span{display:inline-block}
.iword .t{opacity:0;display:flex;align-items:center;gap:.7em;font-family:var(--sans);font-weight:600;font-size:clamp(8px,.85vw,11px);letter-spacing:.42em;text-transform:uppercase;color:var(--logo-tag);white-space:nowrap}
.iword .t i{width:2.6em;height:1px;background:currentColor;flex:none}
.icount{position:absolute;left:clamp(16px,3.5vw,44px);bottom:clamp(20px,4vh,40px);display:grid;gap:6px}
.icount b{font-family:var(--sans);font-weight:200;font-size:clamp(52px,7vw,104px);line-height:.9;letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--ink)}
.iskip{position:absolute;right:clamp(16px,3.5vw,44px);bottom:clamp(24px,4vh,44px);pointer-events:auto;background:none;border:1px solid var(--line);border-radius:999px;padding:9px 15px;cursor:pointer;color:var(--ink)}
.iskip:hover{border-color:var(--ink)}

main,nav.top,footer{position:relative;z-index:3}
main,footer{transition:opacity .8s}
nav.top{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:40}
nav.top .wrap{display:flex;align-items:center;gap:16px;padding-block:16px}
nav.top::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(100% + 28px);background:linear-gradient(180deg,var(--nav-fade) 0%,var(--nav-fade) 45%,var(--nav-fade-0) 100%);pointer-events:none;z-index:-1}   /* keeps the logo readable when cards scroll under it */
.brand{display:flex;align-items:center;gap:12px}
.brand .nm{height:28px;aspect-ratio:300/153;display:block}
.brand .nm svg{width:100%;height:100%;display:block}
.brand .bw{font-family:var(--logo);font-weight:700;font-size:16px;letter-spacing:.06em;line-height:1;padding-left:.06em;white-space:nowrap;color:var(--logo-ink)}
.sep{width:1px;height:16px;background:var(--line)}
nav .talk{position:relative;margin-left:auto;font-size:14px;font-weight:500;color:var(--ink);padding-bottom:2px}
/* the underline; on hover it dims and a red flare, like the ones in the sky, streaks along it */
nav .talk::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transition:opacity .35s}
nav .talk::before{content:"";position:absolute;left:0;right:0;bottom:-.25px;height:1.5px;border-radius:2px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,var(--hot) 72%,#FFE4E7) no-repeat;background-size:55% 100%;background-position:-120% 0;filter:drop-shadow(0 0 4px var(--hot-ping))}
nav .talk:hover::after,nav .talk:focus-visible::after{opacity:.22}
nav .talk:hover::before,nav .talk:focus-visible::before{animation:talkflare 1.5s linear infinite}
@keyframes talkflare{0%{background-position:-120% 0;opacity:0}12%{opacity:.95}85%{opacity:.95}100%{background-position:220% 0;opacity:0}}
@media (prefers-reduced-motion:reduce){nav .talk:hover::before{animation:none;opacity:.9;background-position:100% 0}}
nav .talk em{font-style:normal;color:var(--accent)}
.burger{width:34px;display:grid;gap:5px}
.burger i{height:1.5px;background:var(--ink)}.burger i:last-child{width:60%;justify-self:end}
.fade{transition:opacity .8s}

.panel{min-height:100vh;display:flex;align-items:flex-end;padding-block:120px 54px}
.panel .wrap{width:100%}
.hero .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
h1,h2{margin:0;font-family:var(--sans);font-weight:300;color:var(--ink);letter-spacing:-.04em;line-height:1.02;text-wrap:balance}
h1 b,h2 b{font-weight:700}
h1{font-size:clamp(38px,4.9vw,74px)}
h1 .ln{display:block;overflow:hidden;padding-bottom:.08em}
h1 .ln>span{display:block;will-change:transform}
h2{font-size:clamp(34px,4.4vw,64px)}
.lede{max-width:30em;color:var(--slate);margin:18px 0 26px;font-size:15.5px}
.btn{display:inline-flex;align-items:center;gap:12px;padding:14px 22px;border-radius:999px;background:var(--btn-bg);color:var(--btn-fg);font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;transition:background .3s,color .3s;will-change:transform}
.btn em{font-style:normal;color:var(--btn-em);transition:color .3s}
.btn{isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;transition:opacity .35s;pointer-events:none;
  background:radial-gradient(130% 170% at 50% 0%,var(--bg-lit) 0%,var(--bg) 72%);box-shadow:inset 0 0 0 1px var(--pill-border)}
.btn:hover{color:var(--ink)}
.btn:hover::before{opacity:1}
.btn.ghost::before{display:none}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn.ghost em{color:var(--accent)}
.btn.ghost:hover{background:transparent;color:var(--ink)}
.aside{max-width:300px;font-size:14.5px;line-height:1.5}
.aside p{margin:0 0 14px;color:var(--text)}
.aside p span{color:var(--slate)}
.pills{display:flex;gap:6px;flex-wrap:wrap}
.pills span{font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:5px 10px;background:var(--pill-bg)}
.ticks{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:4;display:flex;gap:12px;align-items:flex-end;transition:opacity .8s}
.ticks i{width:1px;height:12px;background:var(--tick);transition:height .4s,background .4s}
.ticks i.on{height:24px;background:var(--accent)}

.step .wrap{display:flex}
.panel.step{min-height:64vh;padding-block:56px 36px}   /* steps sit closer together than full-screen panels */
.step.right .wrap{justify-content:flex-end}
.card{width:100%;max-width:400px;display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:20px;background:var(--card-bg);border:1px solid var(--card-border);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 30px 60px -40px var(--card-shadow)}
.card .num{display:flex;justify-content:space-between;align-items:center;gap:12px}
.card .num b{font-weight:700;font-size:11px;letter-spacing:.1em;color:var(--num)}
.card h2{font-size:clamp(30px,3.1vw,44px);letter-spacing:-.035em}
.card p{margin:0;color:var(--slate);font-size:15px}
.card dl{margin:auto 0 0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;border-top:1px solid var(--line);padding-top:12px}
.card dt{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);padding-top:2px}
.card dd{margin:0;font-size:13.5px;font-weight:500;color:var(--text)}

.statement{min-height:130vh;display:flex;align-items:center;padding-block:20vh}
.statement p{margin:0;font-size:clamp(30px,4.6vw,70px);font-weight:300;letter-spacing:-.04em;line-height:1.08;max-width:17em;text-wrap:balance}
.statement .wd{color:var(--word-dim);transition:color .35s}
.statement .wd.on{color:var(--ink)}
.statement .wd.hi.on{color:var(--hi);font-weight:700}

.reel{display:flex;align-items:flex-end;padding-block:clamp(150px,24vh,260px) 13vh}
.reel .wrap{width:100%}
.reel-link{display:inline-grid;gap:12px}
.reel-link .big{font-size:clamp(36px,5.4vw,84px);font-weight:300;letter-spacing:-.045em;line-height:1;color:var(--ink)}
.reel-link .big b{transition:color .4s}
.reel-link .go{color:var(--ink);display:inline-flex;gap:8px;align-items:center}
.reel-link .go em{font-style:normal;color:var(--accent);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.reel-link:hover .big b{color:var(--hi)}

.final .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.final h2{font-size:clamp(36px,4.8vw,74px);max-width:11em}
.final .row{display:flex;gap:12px;flex-wrap:wrap}

footer{padding-block:44px 96px;background:var(--footer-bg)}
footer .wrap{display:grid;gap:32px;border-top:1px solid var(--line);padding-top:40px}
footer .wrap{position:relative}
/* the divider above the footer: a slow red flare drifts along it, far slower than the ones in the sky */
footer .wrap::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1.5px;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--hot) 74%,#FFE4E7) no-repeat;background-size:18% 100%;background-position:-30% 0;
  filter:drop-shadow(0 0 4px var(--hot-ping));opacity:0}
footer .wrap.flaring::before{animation:footflare 26s linear infinite}
@keyframes footflare{0%{background-position:-22% 0;opacity:0}3%{opacity:.85}92%{opacity:.85}100%{background-position:130% 0;opacity:0}}
.flock svg{width:clamp(210px,22vw,320px);max-width:100%;height:auto;display:block}
footer .meta{display:flex;justify-content:flex-start;gap:8px 32px;flex-wrap:wrap;color:var(--slate);font-size:13px}
.note{position:fixed;right:14px;bottom:14px;z-index:20;padding:6px 11px;border-radius:999px;background:var(--note-bg);border:1px solid var(--line);transition:opacity .8s}

/* the selling sections: the hero's call to action and proof strip, "Sound familiar?", the proof, how it works and the questions */
.eyebrow{display:block;margin-bottom:16px}
.cta{display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap}
.micro{font-size:10px;color:var(--slate)}
.alt{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-top:22px;font-family:var(--sans);font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
/* "Score your sales process in 2 minutes": while hovered, the same red flare as the nav's Book a call streaks along its underline */
.alt .u{position:relative;color:var(--ink);padding-bottom:3px}
.alt .u::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);transition:background .35s}
.alt .u::before{content:"";position:absolute;left:0;right:0;bottom:-.25px;height:1.5px;border-radius:2px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,var(--hot) 72%,#FFE4E7) no-repeat;background-size:55% 100%;background-position:-120% 0;filter:drop-shadow(0 0 4px var(--hot-ping))}
.alt:is(:hover,:focus-visible) .u::before{animation:talkflare 1.5s linear infinite}
@media (prefers-reduced-motion:reduce){.alt:is(:hover,:focus-visible) .u::before{animation:none;opacity:.9;background-position:100% 0}}
.alt em,.inlink em{font-style:normal;color:var(--accent);display:inline-flex;align-items:center}
.hero .aside{max-width:420px}
.stats{display:flex;gap:18px clamp(22px,2.6vw,38px);flex-wrap:wrap}
.stat b{display:block;font-weight:200;font-size:clamp(30px,2.7vw,42px);letter-spacing:-.04em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
/* a red shimmer, like the flare, sweeps left to right across each hero number every few seconds (the second just after the first) */
.stat b{width:fit-content;background:linear-gradient(90deg,var(--ink) 0 30%,var(--hot) 44%,#FFE4E7 48%,var(--ink) 53% 100%) no-repeat;background-size:300% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;caret-color:var(--ink);animation:statshine 6.5s 1.2s cubic-bezier(.45,0,.25,1) infinite}
.stat+.stat b{animation-delay:1.65s}
@keyframes statshine{0%{background-position:100% 0;filter:none}11%{filter:drop-shadow(0 0 5px var(--hot-ping))}24%{background-position:0% 0;filter:none}100%{background-position:0% 0;filter:none}}
@media (prefers-reduced-motion:reduce){.stat b{animation:none;background-position:100% 0}}
.stat span{display:block;margin-top:9px;max-width:11em;line-height:1.5}

.block{position:relative;padding-block:clamp(84px,14vh,150px)}
.block h2{font-size:clamp(32px,3.8vw,56px)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,88px);align-items:start}

.signs{list-style:none;margin:0;padding:0;counter-reset:sign;border-top:1px solid var(--line)}
.signs li{counter-increment:sign;display:grid;grid-template-columns:44px minmax(0,1fr);align-items:baseline;padding:17px 0;border-bottom:1px solid var(--line);font-size:clamp(17px,1.45vw,20px);font-weight:300;line-height:1.4;color:var(--ink)}
.signs li::before{content:counter(sign,decimal-leading-zero);font-weight:600;font-size:11px;letter-spacing:.1em;color:var(--num)}
.fitline{margin:22px 0 0;color:var(--slate);font-size:15px;max-width:36em}
.inlink{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:15px;font-weight:500;color:var(--ink);padding-bottom:3px;border-bottom:1px solid var(--ink)}

.big4{margin:0;display:grid;gap:20px;align-content:start}
.big4 b{font-weight:200;font-size:clamp(120px,15vw,220px);line-height:.82;letter-spacing:-.06em;color:var(--ink)}
.big4 figcaption{max-width:22em;color:var(--text);font-size:clamp(16px,1.35vw,19px);font-weight:300;line-height:1.5}
/* zero to scale: "$0 -> $12M" set smaller than the old 4x so it fits the column; the arrow is drawn (Manrope has no arrow glyph) */
.big4.range b{font-size:clamp(64px,8.2vw,124px);line-height:.9;letter-spacing:-.05em;white-space:nowrap;display:flex;align-items:center}
.big4.range .to{display:inline-block;width:.6em;margin:0 .1em 0 .06em;flex:none}
.big4.range .to svg{display:block;width:100%;height:auto;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.face{margin:22px 0 0}
.face img{width:88px;height:88px;border-radius:50%;object-fit:cover;display:block;border:1px solid var(--line)}
.fnote{margin:18px 0 0;max-width:34em;color:var(--text);font-size:16px}
.sig{margin:18px 0 26px;color:var(--slate)}

.how .head{max-width:780px;margin-bottom:clamp(30px,4vw,52px)}
.stages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.stages li{display:grid;gap:10px;align-content:start;padding:22px 20px 24px;border-radius:18px;background:var(--card-bg);border:1px solid var(--card-border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.stages .n{color:var(--num)}
.stages h3{margin:0;font-size:20px;font-weight:500;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.stages p{margin:0;color:var(--slate);font-size:14.5px}
@media (max-width:1100px){ .stages{grid-template-columns:repeat(2,minmax(0,1fr))} }

.qa{border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 0;font-size:clamp(17px,1.4vw,20px);line-height:1.35;color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{flex:none;position:relative;width:14px;height:14px}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:0;top:6.25px;width:14px;height:1.5px;border-radius:1px;background:var(--accent);transition:transform .3s}
.qa summary i::after{transform:rotate(90deg)}
.qa details[open] summary i::after{transform:rotate(0deg)}
.qa details p{margin:0 0 22px;max-width:40em;color:var(--slate);font-size:15.5px}

.flinks{display:flex;flex-wrap:wrap;gap:10px 26px;font-size:14px}
.flinks a{color:var(--text);transition:color .3s}
.flinks a:hover{color:var(--ink)}
@media (max-width:820px) and (min-height:501px),(max-width:820px) and (orientation:portrait){
  .split{grid-template-columns:1fr}
  .stages{grid-template-columns:1fr}
  .block{padding-block:72px}
  .big4 b{font-size:120px}
  .big4.range b{font-size:clamp(60px,20vw,86px)}
  .hero .aside{max-width:none}
  .stats{display:grid;grid-template-columns:repeat(3,minmax(0,auto));justify-content:start;gap:14px 22px}
  .stat b{font-size:30px}
  .stat span{font-size:9.5px;letter-spacing:.12em}
}


/* the statement's highlighted phrases stay blank (not greyed) until the page reaches them; then they build themselves out of
   white dots (main.js draws the dots on the canvas below), land as bold white words, and a flare draws a line under them.
   The line is the same red flare as the nav's Book a call: it runs in with the line, rests at the end, then laps every 7s */
.statement .wd.hi,.statement .wd.hi.on{color:transparent;font-weight:700}
.statement .wd.hi.made{color:#fff;transition:color .6s}
.synth{position:fixed;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
#stmt{position:relative}
#stmt .ul{position:absolute;height:max(1.5px,.03em);pointer-events:none;transition:opacity .35s}
#stmt .ul::after{content:"";position:absolute;inset:0;border-radius:2px;background:rgba(255,255,255,.45);transform:scaleX(0);transform-origin:0 50%}
#stmt .ul::before{content:"";position:absolute;left:0;right:0;top:-.25px;bottom:-.25px;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--hot) 72%,#FFE4E7) no-repeat;background-size:45% 100%;background-position:-82% 0;
  filter:drop-shadow(0 0 4px var(--hot-ping))}
#stmt .ul.on::after{transform:scaleX(1);transition:transform 1.2s cubic-bezier(.55,0,.25,1)}
#stmt .ul.on::before{animation:ulin 1.2s cubic-bezier(.55,0,.25,1) both,ulpass 7s 3.2s linear infinite}
#stmt .ul.still::after{transition:none}
#stmt .ul.still::before{animation:ulpass 7s linear infinite;background-position:100% 0}
#stmt .ul.out{opacity:0}
@keyframes ulin{from{background-position:-82% 0}to{background-position:100% 0}}
@keyframes ulpass{0%{background-position:100% 0}14%{background-position:182% 0}14.01%{background-position:-82% 0}45%,100%{background-position:100% 0}}
@media (prefers-reduced-motion:reduce){
  #stmt .ul::after{transform:none}
  #stmt .ul::before,#stmt .ul.on::before,#stmt .ul.still::before{animation:none;background-position:100% 0}
}

/* the menu: the two lines in the nav open a full-screen list of the site's pages; the lines turn into a close mark */
.burger{width:34px;height:22px;display:grid;align-content:center;gap:5px;padding:0;margin:0;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.burger i{display:block;height:1.5px;background:var(--ink);transition:transform .4s cubic-bezier(.6,0,.2,1),width .4s cubic-bezier(.6,0,.2,1)}
.burger i:last-child{width:60%;justify-self:end}
.burger:hover i:last-child{width:100%}
html.menu-open .burger i:first-child{transform:translateY(3.25px) rotate(45deg)}
html.menu-open .burger i:last-child{width:100%;transform:translateY(-3.25px) rotate(-45deg)}
html.intro .burger{pointer-events:none}
.menu{position:fixed;inset:0;z-index:35;display:flex;align-items:center;overflow-y:auto;overscroll-behavior:contain;
  background:radial-gradient(120% 80% at 50% 0%,rgba(24,36,94,.97) 0%,rgba(8,13,40,.97) 62%);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s linear .4s}
html.menu-open .menu{opacity:1;visibility:visible;transition:opacity .4s}
.menu .wrap{width:100%;display:grid;gap:clamp(20px,3.6vh,36px);padding-block:96px 48px}
.menu ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.menu li{border-bottom:1px solid var(--line)}
.menu li a{display:flex;align-items:baseline;gap:clamp(14px,2vw,26px);padding:clamp(10px,1.6vh,16px) 0;font-weight:300;font-size:clamp(28px,3.8vw,52px);letter-spacing:-.04em;line-height:1.08;color:var(--ink);transition:color .3s,transform .45s cubic-bezier(.2,.8,.2,1)}
.menu li a span{font-weight:600;font-size:11px;letter-spacing:.14em;color:var(--num);transform:translateY(-.5em)}
.menu li a:hover,.menu li a:focus-visible{color:var(--hi);transform:translateX(8px)}
.menu .mrow{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.menu .mmail{color:var(--slate)}
.menu .mmail:hover{color:var(--ink)}
html.menu-open .menu li{animation:menuIn .6s cubic-bezier(.2,.8,.2,1) both}
html.menu-open .menu li:nth-child(2){animation-delay:.04s}html.menu-open .menu li:nth-child(3){animation-delay:.08s}
html.menu-open .menu li:nth-child(4){animation-delay:.12s}html.menu-open .menu li:nth-child(5){animation-delay:.16s}html.menu-open .menu li:nth-child(6){animation-delay:.2s}
@keyframes menuIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* the phone layout: narrow screens, except a phone turned on its side, which keeps the wide layout (main.js uses the same test) */
@media (max-width:820px) and (min-height:501px),(max-width:820px) and (orientation:portrait){
  .hero{padding-top:calc(72px + min(62.5vw,46vh))}   /* room above the headline for the picture */
  footer{padding-bottom:calc(44px + env(safe-area-inset-bottom,0px))}
  nav .talk{padding:12px 0 14px;margin-block:-12px}   /* a bigger tap area; the link looks and sits the same */
  nav .talk::after{bottom:12px}
  nav .talk::before{bottom:11.75px}
  .brand{padding-block:8px;margin-block:-8px}
  .panel{padding-bottom:70px}
  .panel.step{min-height:78vh;padding-bottom:44px}
  .step .wrap,.step.right .wrap{justify-content:center}
  .card{max-width:none}
  .aside{max-width:none}
  .hint{display:none}
  .orbit span{padding:5px 10px;gap:6px;font-size:11px;backdrop-filter:none;-webkit-backdrop-filter:none}
  .orbit span i{width:5px;height:5px}
  .reel{padding-block:clamp(210px,30vh,260px) 64px}
  .ticks,.note{display:none}
  .sep{display:none}
  .statement{min-height:110vh}
  .brand .bw{font-size:14px}
}
@media (max-height:500px) and (orientation:landscape){ .orbit,.hint,.ticks,.note{display:none} }   /* a phone on its side */
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ===== every page except the home page: the same studio, without the sculpture =====
   The home page's styles (tokens, nav, menu, buttons, flares, questions, footer) come first in site.css; these rules add the
   page layouts: a page heading, reading text, a side card, links to related pages, the closing call to action, the blog list,
   a blog post, the Sales Process Score and the small pages (thanks, privacy, not found). */
body.sub{min-height:100vh}
body.sub .stage::after{height:22%}
#stars{position:absolute;inset:0;width:100%;height:100%;display:block}
body.sub main{padding-bottom:20px}
.skip{position:absolute;left:12px;top:-60px;z-index:80;padding:10px 14px;border-radius:999px;background:var(--btn-bg);color:var(--btn-fg);font-size:13px;font-weight:600}
.skip:focus{top:12px}

/* page heading */
.phero{padding-block:clamp(128px,21vh,200px) clamp(30px,5vh,56px)}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 24px}
.crumb a{color:var(--slate);transition:color .3s}
.crumb a:hover{color:var(--ink)}
.crumb i{width:14px;height:1px;background:var(--line);display:inline-block}
.crumb [aria-current]{color:var(--accent)}
.phero h1{font-size:clamp(40px,5.4vw,82px);max-width:13.5em;line-height:1.02}
.phero .lede{font-size:clamp(17px,1.45vw,20px);line-height:1.6;max-width:33em;color:var(--text);margin:24px 0 0}
.phero .cta{margin-top:32px}
.phero .alt{margin-top:20px}
.byline{display:flex;align-items:center;gap:14px;margin:28px 0 0;color:var(--slate);font-size:14px}
.byline img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.byline b{color:var(--ink);font-weight:600}

/* reading text, with a side card on wide screens */
.sect{position:relative;padding-block:clamp(36px,6vh,72px)}
.duo{display:grid;grid-template-columns:minmax(0,720px) minmax(260px,330px);justify-content:space-between;gap:clamp(36px,6vw,96px);align-items:start}
.prose{max-width:720px;font-size:clamp(17px,1.2vw,19px);line-height:1.75;color:var(--text)}
.prose>*:first-child{margin-top:0}
.prose p{margin:0 0 1.2em}
.prose strong,.prose b{color:var(--ink);font-weight:600}
.prose h2{font-size:clamp(28px,2.9vw,42px);margin:1.7em 0 .55em;line-height:1.08}
.prose h3{font-size:clamp(21px,1.7vw,25px);font-weight:500;letter-spacing:-.02em;color:var(--ink);margin:1.8em 0 .7em;line-height:1.25}
.prose ul,.prose ol{list-style:none;margin:0 0 1.5em;padding:0;border-top:1px solid var(--line)}
.prose li{position:relative;padding:15px 0 15px 40px;border-bottom:1px solid var(--line)}
.prose ul>li::before{content:"";position:absolute;left:2px;top:calc(15px + .86em);width:16px;height:1.5px;border-radius:1px;background:var(--accent)}
.prose ol{counter-reset:item}
.prose ol>li{counter-increment:item}
.prose ol>li::before{content:counter(item,decimal-leading-zero);position:absolute;left:0;top:calc(15px + .3em);font-weight:600;font-size:11px;letter-spacing:.1em;color:var(--num)}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color .3s}
.prose a:hover{text-decoration-color:var(--ink)}
.prose .cta{margin-top:34px}
.prose .alt{margin-top:18px}
.prose .note-line{color:var(--slate);font-size:15px}
.side{position:sticky;top:104px;display:grid;gap:14px;padding:24px 22px 26px;border-radius:20px;background:var(--card-bg);border:1px solid var(--card-border);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 30px 60px -40px var(--card-shadow)}
.side h2{font-size:clamp(24px,2vw,30px);letter-spacing:-.035em;line-height:1.1}
.side p{margin:0;color:var(--slate);font-size:14.5px;line-height:1.55}
.side .btn{justify-self:start;margin-top:4px}
.side .alt{margin-top:2px}
.side ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.side li{padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--text)}

/* questions on inner pages: the home page's open-and-close list */
.faqsect .split{align-items:start}
.faqsect h2{font-size:clamp(30px,3.4vw,50px)}

/* related pages */
.xlinks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px);margin-top:clamp(24px,3vw,40px)}
.xlink{position:relative;display:grid;gap:10px;align-content:start;padding:22px 22px 24px;border-radius:18px;background:var(--card-bg);border:1px solid var(--card-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:border-color .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.xlink:hover{border-color:rgba(214,224,255,.32);transform:translateY(-3px)}
.xlink h3{margin:0;font-size:21px;font-weight:500;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.xlink p{margin:0;color:var(--slate);font-size:14.5px;line-height:1.55}
.xlink .go{display:inline-flex;align-items:center;gap:8px;margin-top:4px;color:var(--ink)}
.xlink .go em{font-style:normal;color:var(--accent);display:inline-flex}
.xlink:hover .arr{filter:drop-shadow(0 0 2px var(--hot))}
.xlink:hover .arr .bs{opacity:0;transition:opacity .09s}
.xlink:hover .arr .t0{animation:arrT0 1.15s linear infinite}
.xlink:hover .arr .h0{animation:arrH0 1.15s linear infinite}
.xlink:hover .arr .t1,.xlink:hover .arr .t2{animation:arrT1 1.15s linear infinite}
.xlink:hover .arr .h1,.xlink:hover .arr .h2{animation:arrH1 1.15s linear infinite}
.sect>.wrap>h2,.sect .head h2{font-size:clamp(30px,3.4vw,50px)}

/* the closing call to action on inner pages */
.closer{padding-block:clamp(90px,15vh,170px) clamp(70px,12vh,130px)}
.closer .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.closer h2{font-size:clamp(36px,4.6vw,72px);max-width:11em;margin-top:14px}
.closer .lede{margin:18px 0 26px}
.closer .aside p{margin:0}

/* blog list */
.posts{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.posts li{border-bottom:1px solid var(--line)}
.posts a{display:grid;grid-template-columns:minmax(150px,200px) minmax(0,1fr) auto;gap:10px clamp(20px,4vw,56px);align-items:baseline;padding:clamp(22px,3.4vh,34px) 0;transition:padding-left .45s cubic-bezier(.2,.8,.2,1)}
.posts a:hover{padding-left:10px}
.posts time{padding-top:6px}
.posts h2{font-size:clamp(24px,2.5vw,36px);letter-spacing:-.035em;line-height:1.1}
.posts p{margin:12px 0 0;color:var(--slate);font-size:15.5px;max-width:42em}
.posts .go{display:inline-flex;align-items:center;gap:8px;color:var(--ink);white-space:nowrap}
.posts .go em{font-style:normal;color:var(--accent);display:inline-flex}
.posts a:hover h2{color:var(--hi)}
.posts h2{transition:color .35s}
.posts a:hover .arr{filter:drop-shadow(0 0 2px var(--hot))}
.posts a:hover .arr .bs{opacity:0;transition:opacity .09s}
.posts a:hover .arr .t0{animation:arrT0 1.15s linear infinite}
.posts a:hover .arr .h0{animation:arrH0 1.15s linear infinite}
.posts a:hover .arr .t1,.posts a:hover .arr .t2{animation:arrT1 1.15s linear infinite}
.posts a:hover .arr .h1,.posts a:hover .arr .h2{animation:arrH1 1.15s linear infinite}
.yt{display:inline-grid;gap:10px;margin-top:clamp(40px,7vh,72px)}
.yt .big{font-size:clamp(30px,3.8vw,56px);font-weight:300;letter-spacing:-.045em;line-height:1;color:var(--ink)}
.yt .big b{transition:color .4s}
.yt:hover .big b{color:var(--hi)}

/* a blog post */
.article .prose{font-size:clamp(17.5px,1.25vw,19.5px)}
.article .prose>p:first-child{font-size:1.12em;color:var(--ink);font-weight:300;line-height:1.6}
.endnote{margin-top:clamp(36px,6vh,60px);padding-top:26px;border-top:1px solid var(--line);display:grid;gap:14px}

/* the Sales Process Score */
.quiz{display:grid;gap:clamp(14px,1.8vw,20px);max-width:880px}
.quiz .hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.quiz .q{margin:0;padding:22px 22px 24px;border-radius:20px;background:var(--card-bg);border:1px solid var(--card-border);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:border-color .35s,box-shadow .35s}
.quiz .q legend{float:left;width:100%;display:grid;grid-template-columns:44px minmax(0,1fr);align-items:baseline;padding:0;margin:0 0 18px;font-size:clamp(18px,1.55vw,21px);font-weight:400;line-height:1.4;letter-spacing:-.01em;color:var(--ink)}
.quiz .q legend span{font-weight:600;font-size:11px;letter-spacing:.1em;color:var(--num)}
.quiz .q.missing{border-color:rgba(255,77,94,.7);box-shadow:0 0 0 1px rgba(255,77,94,.35),0 0 24px -6px var(--hot-ping)}
.quiz .q.done{border-color:rgba(158,185,255,.34)}
.opts{clear:both;display:flex;flex-wrap:wrap;gap:10px;padding-left:44px}
.opts label{position:relative;cursor:pointer}
.opts input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.opts span{display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border-radius:999px;border:1px solid var(--line);background:rgba(10,16,48,.35);font-size:14.5px;font-weight:500;color:var(--text);transition:background .25s,border-color .25s,color .25s}
.opts span::before{content:"";width:9px;height:9px;border-radius:50%;border:1.5px solid var(--slate);transition:background .25s,border-color .25s,box-shadow .25s;flex:none}
.opts label:hover span{border-color:rgba(214,224,255,.4);color:var(--ink)}
.opts input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--btn-fg)}
.opts input:checked+span::before{background:var(--hot);border-color:var(--hot);box-shadow:0 0 8px var(--hot-ping)}
.opts input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}
.quiz-contact{margin-top:clamp(18px,3vh,30px);padding:26px 22px;border-radius:20px;background:var(--card-bg);border:1px solid var(--card-border);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.quiz-contact h2{font-size:clamp(26px,2.6vw,38px);margin:0 0 20px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.field{display:grid;gap:8px}
.field label{font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.field .req{color:var(--hot)}
.field input,.field select{width:100%;font:inherit;font-size:16px;color:var(--ink);background:rgba(8,13,40,.55);border:1px solid var(--line);border-radius:12px;padding:13px 14px;transition:border-color .25s,box-shadow .25s;-webkit-appearance:none;appearance:none}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--slate) 50%),linear-gradient(135deg,var(--slate) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:38px}
.field select option{background:#0E1640;color:var(--ink)}
.field input:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(158,185,255,.18)}
.quiz .send{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:6px}
.quiz button.btn{border:0;cursor:pointer}
.quiz-error{margin:0;color:#FF9AA5;font-size:14.5px}
.qbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;gap:14px;padding:12px clamp(16px,3.5vw,44px) calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(0deg,rgba(8,13,40,.96),rgba(8,13,40,.82));border-top:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transform:translateY(110%);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.qbar.on{transform:none}
.qbar .track{flex:1;height:2px;border-radius:2px;background:var(--line);overflow:hidden}
.qbar .fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--hot));box-shadow:0 0 8px var(--hot-ping);transition:width .4s}
.builder,.result{max-width:720px;padding:clamp(28px,4vw,44px);border-radius:22px;background:var(--card-bg);border:1px solid var(--card-border);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.builder{display:grid;justify-items:start;gap:16px}
.builder p{margin:0;font-size:18px;color:var(--ink)}
.builder .dots::after{content:"";animation:dots 1.4s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.builder .orb{width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 50% 40%,var(--bg-lit),var(--bg) 70%);box-shadow:inset 0 0 0 1px var(--pill-border),0 0 30px -6px rgba(158,185,255,.5);position:relative}
.builder .orb::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid transparent;border-top-color:var(--hot);filter:drop-shadow(0 0 4px var(--hot-ping));animation:spin 1.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.result .result-band{font-size:clamp(28px,3vw,42px);font-weight:300;letter-spacing:-.04em;line-height:1.08;color:var(--ink)}
.result p{color:var(--text);font-size:17px}
.result strong{color:var(--ink)}
.result:focus{outline:none}

/* small pages */
.short .phero{min-height:62vh;display:flex;align-items:flex-end}
.legal .prose h2{font-size:clamp(24px,2.4vw,32px)}

@media (max-width:1100px){ .xlinks{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:900px){
  .duo{grid-template-columns:1fr}
  .side{position:relative;top:auto}
}
@media (max-width:820px) and (min-height:501px),(max-width:820px) and (orientation:portrait){
  .phero{padding-top:118px}
  .xlinks{grid-template-columns:1fr}
  .posts a{grid-template-columns:1fr;gap:8px}
  .posts .go{display:none}
  .grid-2{grid-template-columns:1fr}
  .opts{padding-left:0}
  .quiz .q legend{grid-template-columns:34px minmax(0,1fr)}
  .closer{padding-block:70px 60px}
  .side.desk{display:none}
}

/* the page heading rises in once on load (only when the script runs, so nothing stays hidden without it) */
html.rise .phero :is(.crumb,h1,.lede,.cta,.alt,.byline){opacity:0;transform:translateY(18px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
html.rise.risen .phero :is(.crumb,h1,.lede,.cta,.alt,.byline){opacity:1;transform:none}
html.rise.risen .phero h1{transition-delay:.06s}
html.rise.risen .phero .lede,html.rise.risen .phero .byline{transition-delay:.14s}
html.rise.risen .phero .cta{transition-delay:.22s}
html.rise.risen .phero .alt{transition-delay:.28s}

/* anything the page hides stays hidden, whatever its layout says (the Score's "building" and result panels) */
body.sub [hidden]{display:none!important}

/* quotes in the posts: a line in the voice of a rep or buyer, set off by a thin red flare */
.prose blockquote{position:relative;margin:1.7em 0;padding:6px 0 6px 24px;color:var(--ink);font-size:1.1em;font-weight:300;line-height:1.55;letter-spacing:-.01em}
.prose blockquote::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1.5px;border-radius:2px;background:linear-gradient(180deg,transparent,var(--hot) 30%,#FFE4E7 70%,transparent);filter:drop-shadow(0 0 4px var(--hot-ping))}
.prose blockquote p{margin:0 0 .6em}
.prose blockquote p:last-child{margin:0}