/* v3: Aspekta type, cleaner headings, the cinematic hero, the real Quanta artwork. */
@font-face{font-family:"Aspekta";src:url("../assets/fonts/AspektaVF.woff2") format("woff2");font-weight:50 1000;font-style:normal;font-display:swap}

:root{
  --f-display:"Aspekta",ui-sans-serif,system-ui,sans-serif;
  --f-sans:"Aspekta",ui-sans-serif,system-ui,sans-serif;
  --f-acc:"Aspekta",ui-sans-serif,system-ui,sans-serif;
}
body{font-feature-settings:"ss01","cv01";letter-spacing:.005em}
#grain{opacity:.05}

/* headings: one weight, tight, two tones instead of italic accents */
.display,.h2,.h1like{font-weight:500;font-variation-settings:normal;letter-spacing:-.038em}
.display{font-size:clamp(44px,5.8vw,92px);line-height:.98}
.h2{font-size:clamp(36px,4.4vw,68px);line-height:1}
.h1like{font-size:clamp(42px,5.4vw,86px);line-height:.98}
.acc{font-family:inherit;font-style:normal;font-weight:inherit;letter-spacing:inherit;color:var(--fg-soft);white-space:normal;padding:0;font-variation-settings:normal}
.display .acc{color:var(--fg-soft)}
.kicker,.eyebrow{font-size:11.5px;letter-spacing:.16em}
.lede,.sub{font-size:clamp(16px,1.2vw,18px);line-height:1.6}
.btn{font-weight:500;letter-spacing:.005em}
.nav-links{font-size:14px}
.cap .cap-t{font-family:var(--f-display);font-weight:500;letter-spacing:-.025em}
.clock{font-family:var(--f-display);font-weight:400;letter-spacing:-.05em}
.unread-n,.price b,.pl-price b,.xcard strong{font-family:var(--f-display);font-weight:500}
.pl h3{font-family:var(--f-display);font-weight:500}
.spec-name{font-family:var(--f-display);font-weight:500}
.foot-line{font-family:var(--f-display);font-weight:500}
.quote blockquote::before{font-family:var(--f-display);font-style:normal}

/* ---------- hero: pinned, drawn on one canvas */
[data-bg=hero]{--fg:var(--ink);--fg-soft:#7A7166;--fg-line:rgba(22,17,14,.12);color:var(--fg)}
html:not(.gl) [data-bg=hero]{background:#EEE8D9}
.hero{height:330vh;min-height:0;display:block;padding:0;overflow:visible}
.hero>.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
#qcv{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-copy{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;gap:24px;padding-top:40px;pointer-events:none}
.hero-copy>*{max-width:560px;pointer-events:auto}
.hero .lede{max-width:44ch}
.hero .call{position:absolute;right:max(var(--gut),calc((100vw - 1320px)/2 + var(--gut)));left:auto;bottom:9vh;width:320px;z-index:3;background:rgba(18,14,12,.8)}
.hero .call-log{display:none}
.hero .trust{position:static;display:flex;flex-direction:column;align-items:flex-start;gap:12px;border-top:1px solid rgba(22,17,14,.1);padding:20px 0 0;margin-top:10px;max-width:520px}
.hero .trust-row{gap:22px;flex-wrap:nowrap}
.hero .trust-row img{height:18px}.hero .trust-row img[alt=doplac]{height:22px}.hero .trust-row img[alt=Queue]{height:15px}
.hero .trust p{color:#7A7166}
.hero .trust-row img{filter:brightness(0) saturate(0);opacity:.6;height:21px}
.hero .trust-row img[alt=doplac]{height:25px}.hero .trust-row img[alt=Queue]{height:18px}
.inside{position:absolute;left:0;right:0;top:clamp(96px,16vh,150px);color:var(--cream);display:flex;flex-direction:column;gap:14px;visibility:hidden;--fg-soft:rgba(243,239,230,.55)}
.inside .h2{max-width:12ch}
.inside .sub{color:rgba(243,239,230,.62);max-width:40ch}
.inside .kicker{color:rgba(243,239,230,.6)}
.inside-count{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.06em;color:rgba(243,239,230,.55);margin-top:6px}
.inside-count b{color:#FF7A5C;font-weight:500;font-size:15px}
.stream{position:absolute;inset:0;pointer-events:none}
.ev{position:absolute;left:0;top:0;display:flex;flex-direction:column;gap:4px;padding:10px 13px 11px;min-width:200px;max-width:260px;border-radius:12px;background:rgba(10,12,22,.62);border:1px solid rgba(243,239,230,.1);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--cream);opacity:0;will-change:transform}
.ev::after{content:"";position:absolute;left:13px;width:1px;background:linear-gradient(rgba(245,54,44,.0),rgba(245,54,44,.7))}
.ev.up::after{top:100%;height:46px}
.ev:not(.up)::after{bottom:100%;height:30px;background:linear-gradient(rgba(245,54,44,.7),rgba(245,54,44,0))}
.ev b{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#FF7A5C;font-weight:500}
.ev span{font-size:14px;line-height:1.35}
.ev time{font-family:var(--f-mono);font-size:11px;color:rgba(243,239,230,.45)}
@media (max-width:900px){
  .hero-copy{justify-content:flex-start;padding-top:96px;gap:16px}
  .hero .call{right:16px;left:16px;width:auto;bottom:4vh}
  .hero .trust{display:none}
  .ev{min-width:170px;max-width:200px;padding:8px 10px}.ev span{font-size:12.5px}
  .inside{top:92px}
}

/* ---------- the real Quanta artwork in light sections */
.qp-wrap{overflow:visible}
.qp{position:absolute;left:50%;bottom:0;height:100%;width:auto;max-width:none;transform-origin:50% 100%;translate:-50% 0;-webkit-mask-image:radial-gradient(ellipse 58% 64% at 50% 42%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 58% 64% at 50% 42%,#000 62%,transparent 100%);opacity:0}
.ops .qp{height:118%;bottom:-10%}
.close .qp{height:118%;bottom:-8%}
/* the closing portrait: the clean cut-out, fading softly into the page instead of ending in an edge */
.close .qp-cut{-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 52%,rgba(0,0,0,.55) 70%,transparent 90%);mask-image:linear-gradient(to bottom,#000 0,#000 52%,rgba(0,0,0,.55) 70%,transparent 90%)}
.close .close-stage::before{content:"";position:absolute;left:50%;top:6%;width:min(520px,90%);aspect-ratio:1;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(245,120,70,.22),rgba(245,120,70,.08) 55%,transparent);pointer-events:none}
@media (max-width:1199px),(orientation:portrait) and (max-width:1300px){.ops .qp-wrap{display:none}}
.sig{white-space:nowrap}

/* ---------- everything you get */
.features{padding-block:clamp(110px,15vh,160px) clamp(90px,12vh,140px)}
.fx-wrap{max-width:1440px;margin-inline:auto;padding-inline:clamp(16px,3.4vw,48px)}
.fx-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:end}
.fx-head>div{display:flex;flex-direction:column;gap:16px}
.fx-head .h2{max-width:16ch}
.fx-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:44px;padding-bottom:18px;border-bottom:1px solid rgba(243,239,230,.1)}
.fx-tabs button{all:unset;cursor:pointer;display:flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:999px;border:1px solid rgba(243,239,230,.12);color:rgba(243,239,230,.7);font-size:14px;font-weight:500;transition:all .3s}
.fx-tabs button i{font-style:normal;font-family:var(--f-mono);font-size:11px;color:rgba(243,239,230,.4)}
.fx-tabs button:hover{border-color:rgba(243,239,230,.3);color:var(--cream)}
.fx-tabs button.on{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.fx-tabs button.on i{color:rgba(22,17,14,.5)}
.fx-body{display:grid;grid-template-columns:300px minmax(0,1fr);gap:36px;margin-top:28px;align-items:start}
.fx-list{display:flex;flex-direction:column;gap:4px}
.fx-it{all:unset;cursor:pointer;position:relative;display:grid;grid-template-columns:30px 1fr;gap:12px;padding:12px 14px;border-radius:14px;color:rgba(243,239,230,.6);transition:background .3s,color .3s;overflow:hidden}
.fx-it:hover{background:rgba(243,239,230,.04);color:var(--cream)}
.fx-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(243,239,230,.06);color:rgba(243,239,230,.7)}
.fx-ic svg{width:16px;height:16px}
.fx-tx b{display:block;font-size:16px;font-weight:500;line-height:30px;color:inherit}
.fx-tx em{font-style:normal;font-size:14px;line-height:1.5;color:rgba(243,239,230,.55);display:none}
.fx-it.on{background:rgba(243,239,230,.06);color:var(--cream)}
.fx-it.on .fx-ic{background:var(--signal);color:#fff}
.fx-it.on .fx-tx em{display:block;margin-bottom:4px}
.fx-bar{position:absolute;left:14px;right:14px;bottom:0;height:2px;background:rgba(243,239,230,.08);display:none}
.fx-bar b{display:block;height:100%;background:var(--signal);transform-origin:0 50%;transform:scaleX(0)}
.fx-it.on .fx-bar{display:block}
.fx-win{position:relative;width:100%;border-radius:16px;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 60px 120px -50px rgba(0,0,0,.9)}
.fx-zoom{position:relative;width:900px;height:580px}
.fx-scr{position:absolute;inset:0;display:none}
.fx-scr.on{display:block}
@media (max-width:1000px){
  .fx-head{grid-template-columns:1fr}
  .fx-body{grid-template-columns:1fr;gap:16px}
  .fx-list{flex-direction:row;overflow-x:auto;gap:6px;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
  .fx-it{grid-template-columns:24px auto;padding:8px 12px;flex:none}
  .fx-ic{width:24px;height:24px}
  .fx-tx b{line-height:24px;font-size:14px}
  .fx-it.on .fx-tx em{display:none}
  .fx-tabs{flex-wrap:wrap;gap:6px;margin-top:28px;padding-bottom:14px}
  .fx-tabs button{flex:none;height:34px;padding:0 13px;font-size:13px}
  .fx-list{-webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 28px),transparent)}
  .fx-list{position:relative}
  .fx-list::-webkit-scrollbar{display:none}
  .fx-desc{display:block!important}
}

/* ---------- a day on the job: real app windows over a real sky */
.day{height:520vh}
.day .stage{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.win3{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;visibility:hidden;will-change:opacity}
.win3-in{position:relative;width:1000px;height:620px;flex:none;border-radius:14px;box-shadow:0 50px 100px -40px rgba(0,0,0,.55),0 20px 40px -24px rgba(0,0,0,.4)}
.brief3{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:"Poppins",sans-serif;color:#1A1A1E}
.brief3 .b2-card{opacity:1;width:560px;padding:26px 28px;border-radius:22px;font-size:15px}
.brief3 .b2-top b{font-size:19px}.brief3 .b2-list li{font-size:15px;padding:12px 0;opacity:0}
.day .clock{font-weight:300}
.day .cap .cap-t{font-size:clamp(22px,1.9vw,30px)}
.r-head b{background:var(--signal)}
@media (max-width:900px){.day{height:460vh}}
.win3.bare .win3-in{box-shadow:none}
.brief3 .b2-card{box-shadow:0 50px 100px -40px rgba(0,0,0,.55)}

/* app windows fitted with zoom (sharp text) */
.setup-win,.ask-win{display:flex;align-items:center;justify-content:center}
.setup-in{position:relative;left:auto;top:auto;transform:none;flex:none}
.ask-z{position:relative;width:960px;height:580px;flex:none;border-radius:14px;box-shadow:0 50px 100px -40px rgba(22,17,14,.55)}
.ask-z .k-main{padding:0}
.ag{font-family:"Poppins",sans-serif}
/* shorter scroll */
.ops{height:330vh}.ask-sec{height:240vh}.anywhere{height:240vh}.setup{height:240vh}.job{height:auto}.job-pin{height:200vh}
@media (max-width:900px){
  .day .stage{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);padding:80px 16px 96px;gap:10px}
  .day .clock{font-size:56px}
  .day .caps{min-height:96px}
  .day .cap .cap-d{display:none}
  .day .cap .cap-t{font-size:19px}
  .win3-in{width:760px;height:600px}
  .ask-reqs li{white-space:normal;align-items:flex-start;font-size:13.5px}
  .ask-reqs li span{min-width:0}
  .you{white-space:normal;max-width:calc(100vw - 32px)}
  .you span{font-size:11.5px}
}
/* the full-size app windows must never widen the page on phones */
.fx-win{overflow:hidden}
.features,.stack,.pricing,.founders{overflow-x:clip}

/* ---------- hero v4: Quanta in front of a live Earth */
.hero3{position:relative;height:100vh;height:100svh;min-height:680px;overflow:hidden;color:var(--cream);--fg:var(--cream);--fg-soft:rgba(243,239,230,.62);--fg-line:rgba(243,239,230,.14)}
html:not(.gl) [data-bg=hero]{background:#0B0A0F}
.hero3 #dusk{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:1}
.q-fig{position:absolute;z-index:3;left:63.5%;bottom:-2%;height:min(98%,1000px);aspect-ratio:896/1200;pointer-events:none;will-change:transform;-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 99%);mask-image:linear-gradient(to bottom,#000 70%,transparent 99%)}
.q-fig img{display:block;width:100%;height:100%;filter:drop-shadow(0 40px 60px rgba(0,0,0,.5))}
.q-win{position:absolute;left:38.28%;top:16.75%;width:27.01%;height:auto;aspect-ratio:1;border-radius:50%}
.hero3 .hero-copy{position:absolute;inset:0;z-index:5;display:flex;align-items:center;pointer-events:none;padding-top:40px}
.hero-inner{display:flex;flex-direction:column;gap:22px;max-width:540px;pointer-events:auto}
.hero3 .eyebrow{color:rgba(243,239,230,.6)}
.hero3 .eyebrow b{color:var(--cream);font-weight:500}
.hero3 .display .acc{color:rgba(243,239,230,.5)}
.hero3 .lede{color:rgba(243,239,230,.66)}
.hero3 .btn-ghost{border-color:rgba(243,239,230,.18);color:var(--cream)}
.hero3 .trust{position:static;display:flex;flex-direction:column;gap:12px;border-top:1px solid rgba(243,239,230,.1);padding-top:20px;margin-top:6px}
.hero3 .trust p{color:rgba(243,239,230,.45)}
.hero3 .trust-row{display:block;width:100%;max-width:540px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.hero3 .trust-track{display:flex;align-items:center;width:max-content;will-change:transform}
.hero3 .trust-track img{margin-right:34px;flex:none}
.hero3 .trust-row.still{-webkit-mask-image:none;mask-image:none}
.hero3 .trust-row.still .trust-track{flex-wrap:wrap;width:auto;row-gap:14px}
.hero3 .trust-row img{filter:brightness(0) invert(1);opacity:.55;height:18px}
.hero3 .trust-row img[alt=doplac]{height:22px}.hero3 .trust-row img[alt=Queue]{height:15px}
.hero3 .call{position:absolute;z-index:6;right:max(var(--gut),calc((100vw - 1320px)/2 + var(--gut)));left:auto;bottom:7vh;width:310px;background:rgba(14,12,16,.78)}
@media (max-width:900px){
  .hero3{height:auto;min-height:0;padding:92px 0 0}
  .hero3 .hero-copy{position:relative;inset:auto;padding-top:0}
  .hero-inner{gap:16px}
  .hero3 .trust{display:none}
  .q-fig{position:relative;left:50%;bottom:auto;height:auto;width:min(92vw,440px);margin-top:24px}
  .hero3 .call{right:16px;left:16px;width:auto;bottom:16px}
}
.hero3 .hero-copy{flex-direction:row;justify-content:flex-start;align-items:center}

/* ---------- Ask it and Setup: headline on top, a big sharp window below */
.ask-sec .stage,.setup .stage{display:block}
.ask-grid,.setup-grid{display:flex;flex-direction:column;height:100%;padding-top:clamp(92px,11vh,112px);padding-bottom:24px;gap:18px}
.ask-copy,.setup-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 48px;align-items:end;flex:none}
.ask-copy .kicker,.setup-copy .kicker{grid-column:1/-1}
.ask-copy .h2,.setup-copy .h2{font-size:clamp(34px,3.6vw,56px)}
.ask-copy .sub,.setup-copy .sub{justify-self:end;max-width:52ch;font-size:15.5px}
.ask-reqs{grid-column:1/-1;flex-direction:row;gap:10px;border:0;margin:10px 0 0;flex-wrap:wrap}
.ask-reqs li{border:1px solid var(--line);border-radius:999px;padding:9px 16px 9px 12px;font-size:14px;background:var(--panel)}
.ask-reqs li.on{border-color:var(--ink)}
.setup-steps{grid-column:1/-1;display:flex;flex-direction:row;gap:10px;border:0;margin:10px 0 0;flex-wrap:wrap}
.setup-steps li{border:1px solid var(--fg-line);border-radius:999px;padding:7px 16px 7px 8px;font-size:14px}
.setup-copy .stopwatch{grid-column:1/-1}
.ask-win,.setup-win{flex:1;min-height:0;height:auto;position:relative;display:flex;align-items:center;justify-content:center}
.ask-z{box-shadow:0 40px 90px -40px rgba(22,17,14,.6)}
.setup-in{box-shadow:0 40px 90px -40px rgba(0,0,0,.8);border-radius:14px}
@media (max-width:900px){
  .ask-copy,.setup-copy{grid-template-columns:1fr}
  .ask-copy .sub,.setup-copy .sub{display:none}
  .ask-reqs li{font-size:12.5px;padding:6px 12px 6px 9px}
  .setup-steps li{font-size:12.5px}
}
.ask-grid,.setup-grid{align-items:stretch}
.day-art{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.day .day-left,.day .day-right,.day .ruler{position:relative;z-index:1}
.day .ruler{position:absolute}
/* sun and moon dial above the clock */
.sky-dial{position:relative;width:min(300px,100%);aspect-ratio:300/160;margin-top:auto;margin-bottom:-6px}
.sky-dial svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sd-arc{fill:none;stroke:var(--fg-soft);stroke-width:1.2;stroke-dasharray:3 6;opacity:.6}
.sd-hz{stroke:var(--fg);stroke-width:1.2;opacity:.35}
.sd-sun,.sd-moon{position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;opacity:0}
.sd-sun{background:radial-gradient(circle at 40% 38%,#FFE3A6,#FFB45C 55%,#FF8A3D);box-shadow:0 0 0 6px rgba(255,170,80,.18),0 0 40px 12px rgba(255,150,60,.45)}
.sd-moon{width:30px;height:30px;background:radial-gradient(circle at 34% 34%,#FBF6EA,#E4DCCB 60%,#C9BFA9);box-shadow:inset -6px -4px 0 rgba(0,0,0,.08),0 0 30px 8px rgba(200,210,255,.25)}
.day .clock{margin-top:0}
@media (max-width:900px){.sky-dial{display:none}}

/* ---------- prompt card in the logo drop */
.drop-wrap{position:relative}
.drop-wrap .drop{margin-top:28px;width:100%;padding:0;border-bottom:0}   /* no floor line: the logos still land on the invisible floor */
.pc{position:absolute;z-index:3;left:var(--gut);bottom:0;width:min(470px,calc(100% - 2 * var(--gut)));padding:18px 20px 18px;border-radius:20px 20px 0 0;background:#111013;color:var(--cream);border:1px solid #2A2724;border-bottom:0;box-shadow:0 40px 80px -40px rgba(22,17,14,.7);font-size:14px}
.pc-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:12px;border-bottom:1px solid rgba(243,239,230,.1)}
.pc-tools{display:flex;align-items:center;gap:12px}
.pc-tools img{height:15px;width:auto;filter:invert(1) grayscale(1) brightness(1.7)}
.pc-tools img[alt=Lovable]{filter:none;height:18px;background:#fff;border-radius:5px;padding:2px 5px}
.pc-tools img[alt=Bolt]{filter:none;height:18px;border-radius:4px}
.pc-rp{font-size:12.5px;font-weight:600;color:#F26207}
.pc-copy{all:unset;cursor:pointer;height:30px;padding:0 12px;border-radius:8px;border:1px solid rgba(243,239,230,.18);font-size:12.5px;font-weight:500;display:inline-flex;align-items:center;transition:background .3s,border-color .3s}
.pc-copy:hover{border-color:rgba(243,239,230,.4)}
.pc-copy.done{background:var(--signal);border-color:var(--signal)}
.pc-label{margin-top:12px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(243,239,230,.45)}
.pc-prompt{margin-top:6px;min-height:6.6em;font-size:14.5px;line-height:1.55;color:#EDE8DF}
.pc-prompt.typing::after{content:"";display:inline-block;width:1.5px;height:1em;background:var(--signal);margin-left:2px;vertical-align:-.15em}
.pc-run{margin-top:12px;padding-top:12px;border-top:1px dashed rgba(243,239,230,.12);display:flex;flex-direction:column;gap:8px}
.pc-run p{display:flex;align-items:center;gap:9px;font-size:13.5px;color:rgba(243,239,230,.8);opacity:0}
.pc-run i{width:16px;height:16px;border-radius:50%;border:1.5px solid rgba(243,239,230,.3);position:relative;flex:none}
.pc-run p.ok i{background:var(--signal);border-color:var(--signal)}
.pc-run p.ok i::after{content:"";position:absolute;left:4.5px;top:1.5px;width:3.5px;height:7px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
@media (max-width:900px){.pc{position:relative;left:auto;bottom:auto;width:100%;border-radius:20px;border-bottom:1px solid #2A2724;margin-top:24px}}
.spin-stage{cursor:default}
.spin-stage.grab{cursor:grab}
.spin-stage.grabbing{cursor:grabbing}
@media (max-width:900px){
  .hero3{display:flex;flex-direction:column;padding-bottom:150px}
  .hero3 .hero-copy{order:1}
  .hero3 .q-fig{order:2;margin-top:70px}
  .pc-copy{white-space:nowrap;height:28px;padding:0 10px;font-size:12px}
  .pc-tools{gap:9px}
  .pc-tools img[alt=Cursor]{display:none}
  .pc-prompt{min-height:0}
}

/* ---------- onboarding: the brand kit Rectify pulls from your site */
.ob2-read{gap:10px}
.ob2-read .rd2-site{height:108px;flex:none}
.bk{border:1px solid #EDEDF0;border-radius:12px;padding:12px 14px 12px;display:flex;flex-direction:column;gap:10px;background:#fff;opacity:0}
.bk-h{display:flex;justify-content:space-between;align-items:center;font-size:12.5px}.bk-h b{font-weight:500}
.bk-h code{font-family:var(--f-mono);font-size:11px;color:#9B9BA4}
.bk-row{display:flex;align-items:flex-start;gap:14px}
.bk-logo{height:40px;padding:0 12px;border-radius:9px;border:1px solid #EDEDF0;display:flex;align-items:center;background:#FBFAF7;flex:none;opacity:0}
.bk-logo svg{height:17px;width:auto;display:block}
.bk-sw{display:flex;gap:13px;padding-top:2px}
.bk-sw i{position:relative;display:block;width:26px;height:26px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);opacity:0}
.bk-sw em{position:absolute;top:30px;left:50%;transform:translateX(-50%);font-style:normal;font-family:var(--f-mono);font-size:8px;letter-spacing:-.01em;color:#9B9BA4}
.bk-desc{margin-top:4px;font-size:12.5px;line-height:1.5;color:#3F3F46;min-height:37px}
.bk-type{display:flex;gap:6px}
.bk-type span{height:22px;padding:0 9px;border-radius:999px;background:#F4F4F6;font-size:11px;color:#62626B;display:inline-flex;align-items:center;opacity:0}
.ob2-read .rd2-found{flex-direction:row;flex-wrap:wrap;gap:6px}
.ob2-read .rd2-found li{border:0;padding:0 10px;height:24px;border-radius:999px;background:#FEF1F0;color:#B42318;font-size:11.5px;display:inline-flex;align-items:center}

/* the intro canvas covers the page from the very first paint, before the script has drawn
   anything, so the hero never flashes up early (with a safety release if scripts fail) */
body.is-intro:not(.intro-live) #intro{background:#0E0A08;animation:introCover 0s 8s forwards}
@keyframes introCover{to{background:transparent}}
@media (max-width:760px){.ob2-cols{grid-template-columns:1fr}.ob2-built{display:none}}

/* footer: every feature as a colourful block in a pile the mouse pushes around (featpile.js) */
.hired-pile{position:relative;padding:clamp(24px,4vh,48px) 0 clamp(40px,6vh,72px)}
.hp-head{display:flex;flex-direction:column;gap:14px;max-width:760px}
.hp-head .h2{font-size:clamp(34px,4.2vw,64px)}
.feat-pile{position:relative;height:clamp(300px,28vw,400px);margin:10px 0 0;overflow:hidden;touch-action:pan-y}
.fp-chip{position:absolute;left:0;top:0;visibility:hidden;display:inline-flex;align-items:center;gap:9px;height:50px;padding:0 20px 0 16px;border-radius:999px;font-size:15.5px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;user-select:none;will-change:transform;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 24px -14px rgba(0,0,0,.7)}
.fp-chip svg{width:18px;height:18px;flex:none}
.feat-pile.static{display:flex;flex-wrap:wrap;gap:10px;align-content:flex-end;height:auto;padding:20px 0}
.feat-pile.static .fp-chip{position:static;visibility:visible}
@media (max-width:760px){.feat-pile{height:400px}.fp-chip{height:42px;font-size:14px;padding:0 15px 0 12px}.fp-chip svg{width:16px;height:16px}}

/* pricing motion: the featured plan's running border light, glow, button sheen; pointer spotlight */
.plans2{perspective:1400px}
.pl.hi{box-shadow:0 40px 70px -40px rgba(22,17,14,.7),0 34px 90px -34px rgba(245,54,44,var(--glow,.5))}
.pl>*:not(i){position:relative;z-index:1}
.pl-spot{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;z-index:0}
.pl-ring{position:absolute;inset:-1.5px;border-radius:23.5px;padding:1.5px;pointer-events:none;z-index:2;background:conic-gradient(from var(--ang,0deg),transparent 0 62%,rgba(255,106,61,.0) 66%,#FF6A3D 84%,#FFD2B8 90%,#F5362C 94%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.pl.hi .pl-cta{position:relative;overflow:hidden}
.pl-sheen{position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);pointer-events:none;transform:translateX(-120%)}
.pl-gets li i{transform-origin:center}

.fx-desc{display:none;font-size:14px;line-height:1.5;color:rgba(243,239,230,.6);margin:-6px 0 2px;min-height:3em}

/* ---- the film inside Quanta's head (js/scenes/film.js) ---- */
.q-film{position:absolute;left:38.28%;top:16.75%;width:27.01%;height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;object-position:56% 50%;opacity:0;background:#0B0A0F;transform-origin:50% 50%}
.q-edge{position:absolute;left:38.28%;top:16.75%;width:27.01%;aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,92,64,.9),0 0 26px 4px rgba(245,54,44,.45),inset 0 0 30px rgba(245,54,44,.35);opacity:0;pointer-events:none}
.q-win{transform-origin:50% 50%}
.q-ring{position:absolute;left:18.03%;top:1.63%;width:67.5%;aspect-ratio:1;overflow:visible;opacity:0;pointer-events:none}
.q-ring text{font-family:"Geist Mono",ui-monospace,monospace;font-size:4.5px;font-weight:500;letter-spacing:.12em;fill:rgba(255,240,230,.82)}
.q-portal{position:absolute;z-index:8;border:0;padding:0;margin:0;border-radius:50%;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.q-portal:focus-visible{outline:2px solid #FF6A4D;outline-offset:6px}
.q-tag{position:absolute;left:0;top:0;z-index:8;border:0;margin:0;font:inherit;cursor:pointer;display:flex;align-items:center;gap:9px;height:38px;padding:0 16px 0 6px;border-radius:999px;background:rgba(14,12,16,.72);color:#F3EFE6;box-shadow:inset 0 0 0 1px rgba(255,240,230,.16);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:14px;letter-spacing:-.005em;white-space:nowrap;pointer-events:none;opacity:0}
.q-tag:hover{background:rgba(24,20,24,.85)}
.q-tag i{width:28px;height:28px;border-radius:50%;background:#F5362C;display:grid;place-items:center;color:#fff}.q-tag i svg{width:13px;height:13px;margin-left:2px}
.q-tag em{font-style:normal;font-family:"Geist Mono",monospace;font-size:12px;color:rgba(243,239,230,.55);margin-left:2px}

/* the full-screen film */
html.fp-lock,html.fp-lock body{overflow:hidden}
.fp{position:fixed;inset:0;z-index:200;color:#F3EFE6}
.fp-bg{position:absolute;inset:0;background:radial-gradient(1200px 800px at 50% 45%,#2a110e 0%,#120c0d 55%,#08070a 100%)}
.fp-stage{position:absolute;left:0;top:0;border-radius:18px;overflow:hidden;background:#000;transform-origin:50% 50%;box-shadow:0 60px 140px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,240,230,.08)}
.fp-v{display:block;width:100%;height:100%;object-fit:cover;cursor:pointer}
.fp-end{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:radial-gradient(900px 500px at 50% 50%,#2a110e,#08070a);opacity:0;text-align:center}
.fp-end .fp-k{font-family:"Geist Mono",monospace;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:rgba(243,239,230,.55);margin:0}
.fp-end h3{margin:0;font-size:clamp(30px,4.4vw,64px);font-weight:500;letter-spacing:-.04em;line-height:1}.fp-end h3 span{color:#FF4A33}
.fp-end div{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.fp-end .fp-again{display:inline-flex;align-items:center;gap:8px;color:#F3EFE6;background:rgba(255,240,230,.06);box-shadow:inset 0 0 0 1px rgba(255,240,230,.22);border:0}.fp-end .fp-again:hover{background:rgba(255,240,230,.12)}.fp-again svg{width:17px;height:17px}
.fp-x{position:absolute;top:22px;right:22px;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,240,230,.08);color:#F3EFE6;display:grid;place-items:center;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,240,230,.14);opacity:0}
.fp-x svg{width:20px;height:20px}.fp-x:hover{background:rgba(255,240,230,.16)}
.fp-x:focus-visible,.fp-bar button:focus-visible,.fp-track:focus-visible{outline:2px solid #FF6A4D;outline-offset:3px}
.fp-lab{position:absolute;top:34px;left:28px;margin:0;display:flex;align-items:center;gap:12px;font-family:"Geist Mono",monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(243,239,230,.6);opacity:0}
.fp-lab b{display:block;width:34px;height:2px;background:#F5362C;transform-origin:0 50%}
.fp-bar{position:absolute;left:50%;bottom:28px;width:min(640px,calc(100vw - 32px));margin-left:max(-320px,calc(-50vw + 16px));display:flex;align-items:center;gap:14px;height:52px;padding:0 10px;box-sizing:border-box;border-radius:999px;background:rgba(20,17,20,.7);box-shadow:inset 0 0 0 1px rgba(255,240,230,.12);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0}
.fp-bar button{width:36px;height:36px;border-radius:50%;border:0;background:transparent;color:#F3EFE6;display:grid;place-items:center;cursor:pointer;flex:none}
.fp-bar .fp-pp{background:#F5362C;color:#fff}.fp-bar button svg{width:17px;height:17px}
.fp-track{flex:1;height:24px;display:flex;align-items:center;cursor:pointer}
.fp-track i{display:block;width:100%;height:3px;border-radius:2px;background:rgba(255,240,230,.18);overflow:hidden}
.fp-track b{display:block;height:100%;background:#F5362C;transform-origin:0 50%;transform:scaleX(0)}
.fp-time{font-family:"Geist Mono",monospace;font-size:12px;color:rgba(243,239,230,.7);white-space:nowrap}
@media (max-width:760px){.fp-x{top:14px;right:14px;width:42px;height:42px}.fp-lab{top:26px;left:18px}.fp-bar{bottom:18px}.fp-time{display:none}}

/* ---------- hero: G2 rating badge above the headline, and the call card's play button */
@property --g2f{syntax:"<percentage>";inherits:false;initial-value:0%}
.g2{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 14px 0 6px;border-radius:999px;border:1px solid rgba(243,239,230,.14);background:rgba(243,239,230,.04);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--cream);font-size:14px;line-height:1;white-space:nowrap;transition:opacity 1s var(--ease),transform 1.1s var(--ease),border-color .3s,background .3s}
.g2:hover{border-color:rgba(243,239,230,.32);background:rgba(243,239,230,.08)}
.g2-mark{width:28px;height:28px;flex:none;display:block}
.g2-stars{--g2f:0%;width:70px;height:13px;flex:none;background:linear-gradient(90deg,var(--signal) var(--g2f),rgba(243,239,230,.2) var(--g2f));-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 13'%3E%3Cpath d='M7 .6l1.85 3.9 4.25.55-3.1 2.95.8 4.25L7 10.15 3.2 12.25l.8-4.25L.9 5.05l4.25-.55z'/%3E%3C/svg%3E") 0 0/14px 13px repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 13'%3E%3Cpath d='M7 .6l1.85 3.9 4.25.55-3.1 2.95.8 4.25L7 10.15 3.2 12.25l.8-4.25L.9 5.05l4.25-.55z'/%3E%3C/svg%3E") 0 0/14px 13px repeat-x;transition:--g2f 1.4s var(--ease) .9s}
.ready .g2-stars{--g2f:96%}
.g2-score{color:rgba(243,239,230,.6)}.g2-score b{font-weight:500;color:var(--cream)}
.g2-lab{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(243,239,230,.45);padding-left:10px;border-left:1px solid rgba(243,239,230,.14)}
.g2-go{width:12px;height:12px;flex:none;color:rgba(243,239,230,.45);transition:transform .35s var(--ease),color .3s}
.g2:hover .g2-go{transform:translate(2px,-2px);color:var(--cream)}
@media (prefers-reduced-motion:reduce){.g2-stars{transition:none}}
.call-bar{display:flex;align-items:center;gap:12px;margin-top:10px}
.call-bar .call-wave{flex:1;margin-top:0;min-width:0}
.call-wave i{height:100%;transform:scaleY(.1)}
.call-play{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px 0 12px;border-radius:999px;border:1px solid var(--signal);background:var(--signal);color:#fff;font-family:inherit;font-weight:500;font-size:13px;line-height:1;cursor:pointer;flex:none;box-shadow:0 8px 20px -10px rgba(245,54,44,.9);transition:background .3s,border-color .3s,box-shadow .3s}
.call-play:hover{background:#FF4A3E;border-color:#FF4A3E}
.call-play .pp{border-left-width:7px;border-top-width:4.5px;border-bottom-width:4.5px;margin-left:1px}
.call-play.is-playing{background:rgba(245,54,44,.12);border-color:rgba(245,54,44,.6);box-shadow:none}
.call-play.is-playing .pp{width:9px;height:9px;border:0;background:var(--signal);border-radius:2px;margin-left:0}

/* the Quanta portraits sit in <picture> (AVIF with a WebP fallback); it must not add a box of its own */
.q-fig picture,.qp-wrap picture{display:contents}
@media (max-width:639px){.ops .unread-l{margin-top:12px}}

/* ---------- audit part 2 (round 27) */
/* labels: only Everything you get, Agentic by default, Pricing and Start date keep one; the 2am clock keeps its time, no dot */
.kicker-time::before{display:none}
/* section headers: the paragraph sits under the headline, not beside it */
.fx-head{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.fx-head .sub{max-width:62ch}
.ask-copy,.setup-copy{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.ask-copy .sub,.setup-copy .sub{justify-self:auto;max-width:76ch}
.ask-reqs,.setup-steps{margin-top:4px}
/* "Built with Lovable?" closes the setup chapter on the same dark band */
.stack{padding-block:clamp(8px,2vh,28px) clamp(60px,8vh,100px)}
.stack-head{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.stack-head .h2{font-size:clamp(30px,3vw,46px)}
.stack-head .sub{max-width:62ch}
.stack .pc{background:#1C1816;border-color:#3A3430;box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.stack .chip2{border-color:transparent;box-shadow:0 1px 0 #fff inset,0 14px 28px -16px rgba(0,0,0,.85)}
/* the feature pile is the ending of the job description */
.hired-pile{padding-top:0}
/* testimonials on paper: Kuration leads, Armano and Earlybird beside it */
.founders{padding-block:clamp(96px,13vh,150px) clamp(80px,11vh,130px)}
.quotes{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto auto;gap:16px;margin-top:48px}
.quote{background:var(--panel);border-color:var(--line);box-shadow:0 24px 50px -36px rgba(40,25,15,.45)}
.quote blockquote{color:var(--ink);font-size:clamp(16.5px,1.2vw,19px)}
.quote figcaption b{color:var(--ink)}
.quote-lead{grid-row:1/3;padding:clamp(28px,3vw,44px);gap:32px}
.quote-lead blockquote{font-size:clamp(26px,2.5vw,38px);line-height:1.22;letter-spacing:-.02em}
.quote-lead .q-logo{height:30px}
@media (max-width:900px){.quotes{grid-template-columns:1fr;grid-template-rows:none}.quote-lead{grid-row:auto}.quote-lead blockquote{font-size:24px}}
/* five quotes: Kuration leads on the left, the other four in a two-by-two grid beside it */
@media (min-width:901px){.quotes{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr)}}
@media (min-width:901px) and (max-width:1180px){.quotes{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.quote-lead{grid-row:auto;grid-column:1/-1}}
.quotes .quote:not(.quote-lead) blockquote{font-size:clamp(15.5px,1.1vw,17px)}
/* KNWN's mark fills its full height, so its wordmark needs a little more size to match the others */
.hero3 .trust-row img[alt=KNWN]{height:22px}
.q-logo[alt=KNWN]{height:30px}
/* the call card's waveform in "Talk to it anywhere" scales instead of changing height */
.c-wave i{height:100%;transform:scaleY(.1)}
/* /lifetime/: the Believer plan page, and where Stripe sends buyers back (?success=true, ?canceled=true) */
.lt .fe-hero{min-height:calc(100vh - 120px);display:flex;align-items:center}
.lt .fe-hero[hidden]{display:none}
.lt .fe-hero-t{width:100%}
.lt-fine{margin-top:16px;font-size:14px;color:var(--soft)}
.lt-fine a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(245,54,44,.5);text-underline-offset:4px}
.lt .fe-lede a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(245,54,44,.5);text-underline-offset:4px}
[data-believer][aria-busy=true]{opacity:.7;pointer-events:none}
/* the film button in the nav: it comes in (main.js) once the hero has scrolled away, left of Log in.
   Absolutely placed, so Log in and the CTA never move when it appears; on phones it sits left of the menu button */
.nav-right{position:relative}
.nav-film{position:absolute;right:calc(100% + 16px);top:calc(50% - 18px);display:inline-flex;align-items:center;gap:9px;height:36px;padding:0 14px 0 5px;border-radius:999px;border:1px solid color-mix(in srgb,currentColor 20%,transparent);background:none;color:inherit;font:inherit;white-space:nowrap;cursor:pointer;opacity:0;pointer-events:none;will-change:transform,opacity}
.nav-film:hover{border-color:color-mix(in srgb,currentColor 42%,transparent)}
.nav-film:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.nav-film i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--signal);color:#fff;box-shadow:0 6px 16px -6px rgba(245,54,44,.8)}
.nav-film i svg{width:12px;height:12px;margin-left:1.5px}
.nav-film em{font-style:normal;font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;opacity:.55}
@media (max-width:900px){
  .nav-film{right:calc(100% + 4px);top:calc(50% - 17px);height:34px;padding:0;gap:0;border:0}
  .nav-film i{width:34px;height:34px}
  .nav-film i svg{width:13px;height:13px}
  .nav-film span,.nav-film em{display:none}
}