@charset "UTF-8";
@font-face{font-family:"Albert Sans";font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/albert-sans-latin.woff2) format("woff2")}

:root{
  --bg:#111315;--panel:#1a1d20;--fg:#f2f4f5;--sub:#b0b7bc;--line:#262a2e;--line-strong:#41474c;
  --accent:#2fd0e5;--on-accent:#05181b;--grey:#cad5db;
  --font:"Albert Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --pad:clamp(20px,4vw,44px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.6 var(--font)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
h1,h2,h3{text-wrap:balance}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.wrap{width:min(1240px,100% - 2 * var(--pad));margin-inline:auto}
.skip-link{position:absolute;left:12px;top:-100px;z-index:20;background:var(--accent);color:var(--on-accent);padding:10px 14px;border-radius:8px;font-weight:600}
.skip-link:focus{top:12px}
[hidden]{display:none!important}

.eyebrow{font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.eyebrow-dot{display:flex;align-items:center;gap:10px}
.eyebrow-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(47,208,229,.25)}
.mono{font:500 13px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:var(--on-accent);border-radius:999px;padding:16px 28px;font-size:18px;font-weight:700;transform:translate(var(--mx,0px),calc(var(--my,0px) + var(--lift,0px)));transition:transform .25s cubic-bezier(.2,.8,.2,1),background .2s}
.btn:hover{--lift:-1px;background:#5ddcec}
.btn-ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.btn-ghost:hover{background:rgba(255,255,255,.05)}
.btn-ink{background:var(--on-accent);color:#fff}
.btn-ink:hover{background:#0c2b30}
.text-link{display:inline-flex;gap:8px;font-weight:600;border-bottom:1.5px solid var(--accent);padding-bottom:3px}

/* header */
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);transform:scaleX(var(--progress,0));transform-origin:left;pointer-events:none}
.site-header .brand img{animation:tick-draw .9s cubic-bezier(.6,0,.2,1) .2s both}
@keyframes tick-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.site-header{position:sticky;top:0;z-index:10;background:rgba(17,19,21,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;gap:28px;padding-block:16px}
.brand{display:inline-flex;align-items:center;gap:9px;font-size:22px;font-weight:800;letter-spacing:-.03em;margin-right:auto}
.brand img{width:31px}
.site-header nav{display:flex;gap:26px;font-size:15px}
.site-header nav a{color:var(--sub);transition:color .2s}
.site-header nav a:hover{color:var(--fg)}
.pill{background:var(--fg);color:var(--bg);border-radius:999px;padding:9px 18px;font-weight:600;font-size:15px;display:inline-block;transform:translate(var(--mx,0px),var(--my,0px));transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.lang-switch{color:var(--sub);font-size:13px;font-weight:700;letter-spacing:.08em;border-radius:999px;padding:7px 11px;box-shadow:inset 0 0 0 1.5px var(--line-strong);transition:color .2s}
.lang-switch:hover{color:var(--fg)}

/* hero (constellation) */
.hero{position:relative;overflow:hidden;background:radial-gradient(80% 60% at 70% 0,#0d2a3a,var(--bg) 70%)}
.hero-net{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-inner{position:relative;padding-block:clamp(56px,10vw,128px) clamp(36px,5vw,64px)}
.hero h1{font-weight:800;font-size:clamp(52px,9.4vw,136px);line-height:.9;letter-spacing:-.06em;max-width:13ch;margin:18px 0 28px}
.hero h1 em{font-style:normal;color:var(--accent)}
.lede{font-size:clamp(18px,1.6vw,20px);color:var(--sub);max-width:50ch;margin-bottom:30px}
.draw-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.draw-frame rect{fill:none;stroke:var(--accent);stroke-width:3;opacity:.55;stroke-dasharray:1;stroke-dashoffset:0;animation:draw-path 2.4s cubic-bezier(.6,0,.2,1) .5s both}
.band{position:relative;border-radius:28px;background:radial-gradient(120% 120% at 50% 110%,#1a6b77 0%,#152a2f 45%,var(--panel) 75%);padding:clamp(20px,5vw,64px) clamp(16px,5vw,64px) 0;overflow:hidden}
.band img{width:min(100%,960px);margin:0 auto -2%}

/* process: one example site that evolves as the steps scroll past */
.process{padding-block:clamp(72px,9vw,128px)}
.process h2,.work h2,.about h2,.contact h2,.faq h2{font-weight:800;font-size:clamp(44px,7vw,100px);line-height:.92;letter-spacing:-.055em}
h2 em{font-style:normal;color:var(--accent)}
.process-head{max-width:640px;margin-bottom:clamp(24px,4vw,48px)}
.process-head > p:last-child{color:var(--sub);margin-top:16px}
.process-body{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px)}
.steps{list-style:none;margin:0;padding:0}
.step{min-height:min(60vh,540px);display:flex;flex-direction:column;justify-content:center;gap:12px;border-left:2px solid var(--line);padding-left:clamp(18px,2.5vw,32px);transition:opacity .4s,border-color .4s}
.step-n{font:500 13px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.step h3{font-size:clamp(28px,3.3vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.05}
.step p{color:var(--sub);max-width:40ch}
.is-enhanced .step{opacity:.7}
.is-enhanced .step.is-active{opacity:1}
.step{position:relative}
.step::before{content:"";position:absolute;left:-2px;top:0;bottom:0;width:2px;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform 1s cubic-bezier(.6,0,.2,1)}
.is-enhanced .step.is-active::before,.process:not(.is-enhanced) .step::before{transform:scaleY(1)}
.process-visual{position:sticky;top:96px;align-self:start}

.evo{display:grid;gap:16px}
.evo-phases{display:flex;gap:6px;flex-wrap:wrap}
.evo-phases span{font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;color:var(--sub);box-shadow:inset 0 0 0 1px var(--line-strong);transition:background .3s,color .3s,box-shadow .3s}
.evo[data-state="1"] [data-p="1"],.evo[data-state="2"] [data-p="2"],.evo[data-state="3"] [data-p="3"],.evo[data-state="4"] [data-p="4"]{background:var(--accent);color:var(--on-accent);box-shadow:none}
.evo-stage{position:relative;padding:0 7% 9% 0}
.evo-browser{position:relative;border-radius:14px;background:#0c0e10;box-shadow:0 0 0 1px var(--line-strong),0 40px 80px -40px #000;container-type:inline-size}
.evo-bar{display:flex;align-items:center;gap:6px;padding:10px 12px;font-size:12px;color:var(--sub)}
.evo-bar > i{width:9px;height:9px;border-radius:50%;background:var(--line-strong)}
.evo-url{margin-left:10px;flex:1;min-width:0;display:flex;align-items:center;gap:6px;background:#181b1e;border-radius:6px;padding:3px 10px;color:transparent;white-space:nowrap;overflow:hidden;transition:color .4s}
.evo-url svg{width:11px;height:11px;flex:none}
.evo-live{font-size:11px;font-weight:700;color:#06240f;background:#4ade80;border-radius:999px;padding:2px 9px;opacity:0;transition:opacity .4s}
.evo-site{--paper:#f5f0e8;--ink:#1d2925;--brand:#1f6f5c;--soft:#e2dbcf;background:var(--paper);color:var(--ink);border-radius:0 0 14px 14px;padding:4.5% 5% 5.5%;font-size:max(7px,1.9cqi);line-height:1.35;transition:background-color .5s,color .5s}
.evo-site :is(.es-logo,.es-links i,.es-kicker,.es-h,.es-p,.es-cta,.es-img,.es-cards div){outline:1.5px dashed transparent;outline-offset:2px;border-radius:6px;transition:color .5s,background-color .5s,outline-color .5s,border-color .5s,box-shadow .5s}
.es-nav{display:flex;justify-content:space-between;align-items:center;gap:1em}
.es-logo{font-weight:800;font-size:1.15em}
.es-links{display:flex;gap:1.4em}
.es-links i{font-style:normal}
.es-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:6%;align-items:center;margin-top:5%}
.es-kicker{font-size:.8em;text-transform:uppercase;letter-spacing:.12em;color:var(--brand);font-weight:700}
.es-h{font-weight:800;font-size:2.3em;line-height:1.02;letter-spacing:-.03em;margin:.35em 0}
.es-p{color:#55605b}
.evo-site .es-cta{display:inline-block;margin-top:1.2em;padding:.7em 1.3em;border-radius:999px;font-weight:700;border:2px solid var(--brand);color:var(--brand)}
.es-img{position:relative;aspect-ratio:4/3.4;overflow:hidden;background:linear-gradient(160deg,var(--img1,#f2b880),var(--img2,#e07a4f) 55%,var(--img3,#9c4a3a))}
.es-img i{position:absolute;transition:opacity .5s}
.es-img i:first-child{right:16%;top:16%;width:20%;aspect-ratio:1;border-radius:50%;background:var(--sun,#fde7c8)}
.es-img i:last-child{left:-10%;right:-10%;bottom:-30%;height:60%;border-radius:50%;background:var(--hill,#2f5d50)}
.es-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:4%;margin-top:6%}
.es-cards div{background:#fff;padding:.9em;display:grid;gap:.6em}
.es-cards span{width:1.8em;height:1.8em;border-radius:6px;background:var(--soft);transition:background-color .5s}
.evo[data-state="1"] .evo-browser .evo-site{background:#15181b;color:transparent}
.evo[data-state="1"] .evo-browser .evo-site :is(.es-logo,.es-links i,.es-kicker,.es-h,.es-p,.es-cta,.es-img,.es-cards div){color:transparent;background:transparent;border-color:transparent;outline-color:#4d555b}
.evo[data-state="1"] .evo-browser :is(.es-img i,.es-cards span){opacity:0}
.evo[data-state="3"] .evo-browser .es-cta,.evo[data-state="4"] .evo-browser .es-cta{background:var(--brand);color:#fff}
.evo[data-state="3"] .evo-browser .es-cta{box-shadow:0 0 0 5px rgba(31,111,92,.25)}
.evo-bub{position:absolute;z-index:3;margin:0;max-width:48%;background:#fff;color:#111;font-size:13px;font-weight:600;line-height:1.3;padding:8px 12px;border-radius:12px 12px 12px 4px;box-shadow:0 12px 28px rgba(0,0,0,.45);opacity:0;transform:translateY(8px) scale(.96);transition:opacity .4s,transform .4s}
.evo-bub small{display:block;font-weight:400;color:#555;font-size:11px}
.evo-bub-a{left:31%;top:53%}
.evo-bub-b{left:36%;top:71%;border-radius:12px 12px 4px 12px}
.evo[data-state="3"] .evo-bub{opacity:1;transform:none}
.evo[data-state="3"] .evo-bub-b{transition-delay:.5s}
.evo[data-state="4"] .evo-url{color:var(--sub)}
.evo[data-state="4"] .evo-live{opacity:1}
.evo-phone{position:absolute;right:0;bottom:0;width:25%;border-radius:18px;background:#0c0e10;padding:5px;box-shadow:0 0 0 1px var(--line-strong),0 30px 50px -20px #000;opacity:0;transform:translateY(24px);transition:opacity .5s,transform .5s;container-type:inline-size}
.evo[data-state="4"] .evo-phone{opacity:1;transform:none}
.evo-site-phone{border-radius:14px;padding:9% 8% 12%;font-size:max(6px,6.5cqi);display:grid;gap:.9em}
.evo-site-phone .es-img{aspect-ratio:4/3;border-radius:8px}
.evo-site-phone .es-h{font-size:1.45em;margin:0}
.evo-site-phone .es-cta{margin:0;justify-self:start;background:var(--brand);color:#fff}

/* work */
.work{padding-bottom:clamp(72px,9vw,128px)}
.work h2{margin-bottom:28px}
.feature{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center;background:var(--panel);border-radius:28px;padding:clamp(16px,3vw,28px)}
.feature-pics{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.feature-pics img{width:100%;border-radius:14px;aspect-ratio:4/3;object-fit:cover;object-position:top;background:#0c0d0f}
.feature-pics .pos-mid{object-position:center 48%}
.feature-pics .feature-main{grid-column:1/-1;aspect-ratio:1200/550}
.feature-text{display:grid;gap:14px;justify-items:start;padding-right:clamp(0px,2vw,20px)}
.feature-text .eyebrow{margin:0}
.feature-text h3{font-size:clamp(40px,5vw,68px);font-weight:800;letter-spacing:-.05em;line-height:.95}
.feature-text p{color:var(--sub)}
.feature + .feature{margin-top:20px}
.feature-flip .feature-pics{order:2}

/* preview (for people who received one) */
.preview{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,4vw,56px);padding:clamp(24px,4vw,48px);border-radius:24px;background:var(--panel);border:1px solid var(--line)}
.preview h2{font-weight:800;font-size:clamp(30px,3.8vw,50px);line-height:1.05;letter-spacing:-.03em;margin-bottom:16px}
.preview > div > p{color:var(--sub)}
.note{display:flex;gap:10px;align-items:flex-start;margin:18px 0 24px;font-size:15px}
.note svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--accent)}
.preview-steps{list-style:none;margin:0;padding:0;display:grid;gap:16px;counter-reset:step;align-content:start}
.preview-steps li{display:grid;grid-template-columns:38px 1fr;align-items:center;gap:16px;counter-increment:step;padding-bottom:16px;border-bottom:1px solid var(--line)}
.preview-steps li:last-child{border-bottom:0;padding-bottom:0}
.preview-steps li{position:relative}
.preview-steps li::after{content:"";position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--ring) * 1turn),transparent 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1px));mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1px));pointer-events:none}
.preview-steps li::before{content:counter(step);width:38px;height:38px;border-radius:50%;color:var(--accent);display:grid;place-items:center;font-weight:600;font-size:15px}
.preview-steps h3{font-size:clamp(20px,2vw,24px);font-weight:700;letter-spacing:-.01em}
.preview-steps p{color:var(--sub);font-size:16px}

/* about */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;padding-block:clamp(72px,9vw,128px)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pair figure{margin:0}
.pair img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top;border-radius:20px;background:linear-gradient(#1e2226,#15171a)}
.pair figcaption{padding-top:10px;font-weight:700;font-size:19px}
.pair figcaption span{display:block;color:var(--sub);font-weight:400;font-size:15px}
.about h2{margin-bottom:18px}
.about p:not(.eyebrow){color:var(--sub);max-width:46ch}
.about p + p{margin-top:12px}

/* testimonial */
.testimonial{padding-bottom:clamp(72px,9vw,128px)}
.testimonial figure{margin:0;border-top:1px solid var(--line-strong);padding-top:clamp(24px,3vw,36px)}
.testimonial blockquote{margin:0}
.testimonial blockquote{position:relative}
.testimonial blockquote::before{content:"“";display:block;font-size:clamp(88px,10vw,140px);font-weight:800;line-height:.62;color:var(--accent);margin-bottom:6px}
.testimonial blockquote p{position:relative;font-size:clamp(26px,3.4vw,46px);line-height:1.22;letter-spacing:-.03em;font-weight:700;max-width:30ch}
.testimonial mark{background:none;color:var(--accent)}
.testimonial figcaption{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;margin-top:22px;color:var(--sub);font-size:16px}
.testimonial figcaption b{color:var(--fg);font-weight:700}
.testimonial figcaption small{font-size:14px;opacity:.8}

/* contact */
.contact{border-radius:28px;background:var(--accent);color:var(--on-accent);padding:clamp(28px,5vw,64px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);align-items:start;gap:28px clamp(28px,4vw,56px)}
.contact h2{font-size:clamp(42px,7vw,104px);line-height:.92;letter-spacing:-.055em;max-width:11ch}
.contact h2 em{color:inherit}
.contact-body{display:grid;gap:16px;justify-items:start;font-size:18px;font-weight:500}
.contact-form{display:grid;gap:14px;width:100%}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact-form label{display:grid;gap:6px;font-size:15px;font-weight:700}
.contact-form small{font-weight:500;opacity:.75}
.contact-form input,.contact-form textarea{width:100%;font:500 17px/1.4 var(--font);color:var(--on-accent);background:rgba(255,255,255,.4);border:1.5px solid rgba(5,24,27,.35);border-radius:14px;padding:12px 14px}
.contact-form textarea{resize:vertical;min-height:130px}
.contact-form ::placeholder{color:rgba(5,24,27,.55)}
.contact-form input:focus-visible,.contact-form textarea:focus-visible{outline:2px solid var(--on-accent);outline-offset:2px;background:rgba(255,255,255,.6)}
.contact-form .btn{justify-self:start;border:0;cursor:pointer;font-family:inherit;line-height:inherit}
.contact-form .btn:disabled{opacity:.7;cursor:progress}
.form-note,.contact-alt{font-size:14px}
.contact-mail{display:inline-block;font-weight:800;font-size:clamp(20px,5vw,34px);letter-spacing:-.02em;border-bottom:3px solid currentColor;overflow-wrap:break-word;max-width:100%;margin-top:4px}
.form-note a,.contact-alt a{text-decoration:underline;text-underline-offset:3px}
.form-done,.form-fail{border-radius:14px;padding:14px 18px;background:rgba(255,255,255,.45);font-weight:700}
.form-fail{background:var(--on-accent);color:#fff}
.form-trap{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* footer */
.site-footer{border-top:1px solid var(--line);margin-top:clamp(56px,7vw,96px);overflow:hidden;color:var(--sub);font-size:15px}
.footer-top{position:relative;z-index:1;display:flex;align-items:center;gap:20px 32px;flex-wrap:wrap;padding-block:28px}
.footer-top .brand{font-size:19px;color:var(--fg);margin-right:0}
.footer-top .brand img{width:26px}
.footer-top nav{display:flex;gap:8px 22px;flex-wrap:wrap}
.footer-top nav a:hover{color:var(--fg)}
.footer-top p{margin-left:auto}
.footer-word{font-weight:800;font-size:clamp(90px,27vw,400px);line-height:.72;letter-spacing:-.07em;text-align:center;background:linear-gradient(180deg,var(--accent),rgba(47,208,229,0) 85%);-webkit-background-clip:text;background-clip:text;color:transparent;margin:0 0 -.06em;user-select:none;pointer-events:none;position:relative;z-index:0}

/* statement, trades, faq */
.statement{padding-block:clamp(80px,11vw,160px) clamp(48px,6vw,88px)}
.statement-text{font-weight:800;font-size:clamp(40px,7.2vw,108px);line-height:.98;letter-spacing:-.055em;max-width:18ch;text-wrap:balance}
.statement-text em{font-style:normal;color:var(--accent)}
.statement-text .w{transition:color .3s}
.statement-text .w:not(.on){color:#5c646a}
/* The tilted band is wider than the screen on purpose; clip the page so it never adds a horizontal scroll. clip (not hidden) keeps position: sticky working. */
main{overflow-x:clip}
.trades{overflow:hidden;background:var(--accent);color:var(--on-accent);padding-block:26px;transform:rotate(-1.2deg);margin-inline:-2vw}
.trades-track{display:flex;width:max-content;animation:trades 40s linear infinite}
.trades span{font-weight:800;font-size:clamp(34px,5.4vw,76px);line-height:1;letter-spacing:-.04em;padding-inline:.45em;white-space:nowrap}
.trades span:nth-child(even){color:transparent;-webkit-text-stroke:2px var(--on-accent)}
.trades span::after{content:"✦";color:var(--on-accent);font-size:.4em;vertical-align:.55em;margin-left:.9em;-webkit-text-stroke:0}
.trades:hover .trades-track{animation-play-state:paused}
@keyframes trades{to{transform:translateX(-50%)}}
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);padding-bottom:clamp(72px,9vw,128px);align-items:start}
.faq-list{border-top:1px solid var(--line-strong)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;padding:20px 0;font-weight:700;font-size:clamp(18px,1.8vw,22px);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--line-strong);color:var(--accent);font-weight:500;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--sub);padding:0 48px 22px 0;max-width:60ch}

/* demo teaser */
.styles{padding-bottom:clamp(72px,9vw,128px)}
.styles h2{font-weight:800;font-size:clamp(44px,7vw,100px);line-height:.92;letter-spacing:-.055em}
.styles-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.demo-phone{display:none;justify-items:center;gap:20px}
.phone-frame{margin:0;width:min(300px,82vw);border-radius:44px;padding:10px;background:#0c0e10;box-shadow:0 0 0 1px var(--line-strong),0 40px 70px -30px #000}
.phone-frame img{width:100%;border-radius:34px;display:block;background:#f1e9db}
.demo-phone .demo-tabs{flex-wrap:wrap;justify-content:center;margin:0}
.demo-embed{border-radius:20px;overflow:hidden;background:#0c0e10;box-shadow:0 0 0 1px var(--line-strong),0 50px 90px -50px #000}
.demo-chrome{display:flex;align-items:center;gap:16px;padding:12px 16px;border-bottom:1px solid var(--line)}
.demo-dots{display:flex;gap:6px}
.demo-dots i{width:10px;height:10px;border-radius:50%;background:var(--line-strong)}
.demo-tabs{display:flex;gap:6px;margin-inline:auto}
.demo-tabs a{padding:7px 16px;border-radius:999px;font-weight:600;font-size:15px;color:var(--sub);box-shadow:inset 0 0 0 1px var(--line-strong);transition:background .2s,color .2s}
.demo-tabs a:hover{color:var(--fg)}
.demo-tabs a[aria-current="true"]{background:var(--accent);color:var(--on-accent);box-shadow:none}
.demo-tag{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sub)}
.demo-frame{display:block;width:100%;height:clamp(560px,58vw,760px);border:0;background:#f1e9db}

/* hero perks, pricing */
.hero-perks{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 24px;font-weight:600;font-size:15px;color:var(--sub)}
.hero-perks li{display:flex;align-items:center;gap:8px}
.hero-perks li:first-child{color:var(--fg)}
.price-list li::before{filter:brightness(0)}
.hero-perks li::before,.price-list li::before{content:"";width:16px;height:16px;flex:none;background:url(/assets/img/webup-logo.svg) center/contain no-repeat}
.pricing{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;padding-bottom:clamp(72px,9vw,128px)}
.pricing h2{font-weight:800;font-size:clamp(44px,7vw,100px);line-height:.92;letter-spacing:-.055em;margin-bottom:20px}
.pricing-copy > p:last-child{color:var(--sub);font-size:19px;max-width:44ch}
.price-card{position:relative;border-radius:32px;padding:clamp(26px,4vw,48px);background:var(--accent);color:var(--on-accent);display:grid;gap:10px;justify-items:start;box-shadow:0 40px 80px -40px rgba(47,208,229,.6)}
.price-card .btn{background:var(--on-accent);color:#fff}
.price-card .btn:hover{background:#0c2b30}
.price-label{font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.price{font-weight:800;font-size:clamp(96px,14vw,190px);line-height:.82;letter-spacing:-.07em}
.price span{font-size:.24em;letter-spacing:-.02em;font-weight:700;margin-left:.15em}
.price-offer{background:var(--on-accent);color:#fff;border:0;border-radius:12px;padding:10px 14px;font-weight:600;font-size:15px;margin-bottom:8px}
.price-ask{font-size:clamp(40px,5vw,68px);line-height:.95}
.price-monthly{font-size:19px;font-weight:600;max-width:34ch}
.price-list{list-style:none;margin:14px 0 18px;padding:18px 0 0;border-top:2px solid rgba(5,24,27,.25);font-size:18px;display:grid;gap:10px;width:100%;font-weight:600}
.price-list li{display:flex;align-items:center;gap:12px}

/* legal pages */
.legal{max-width:760px;padding-block:clamp(48px,8vw,96px)}
.legal h1{font-weight:800;font-size:clamp(40px,6vw,72px);letter-spacing:-.05em;line-height:1;margin:14px 0 28px}
.legal h2{font-size:21px;font-weight:700;margin:34px 0 10px;letter-spacing:-.01em}
.legal p{color:var(--sub);margin-bottom:12px}
.legal a{color:var(--fg);border-bottom:1px solid var(--accent)}
.legal-lede{font-size:19px}
.legal-n{color:var(--fg);font-weight:700;margin-right:4px}
.legal-foot{margin-top:40px;padding-top:20px;border-top:1px solid var(--line)}
.missing{background:#ffd54a;color:#1a1400;padding:1px 6px;border-radius:4px;font-weight:600}

/* 404 */
.not-found{min-height:70vh;display:grid;align-content:center;justify-items:start;gap:18px;padding-block:80px}
.not-found h1{font-size:clamp(40px,6vw,76px);font-weight:700;letter-spacing:-.045em;line-height:1}
.not-found p:not(.mono){color:var(--sub)}

@media (max-width:900px){
  .site-header nav{display:none}
  .process-body,.about,.feature,.preview,.faq,.pricing,.contact{grid-template-columns:1fr}
  .demo-embed{display:none}
  .demo-phone{display:grid}
  .demo-open{display:none}
  .feature-flip .feature-pics{order:0}
  .process-visual{order:-1;top:62px;z-index:2;background:var(--bg);padding-block:10px 14px;margin-inline:calc(-1 * var(--pad));padding-inline:var(--pad);box-shadow:0 14px 20px -12px var(--bg)}
  .evo{max-width:560px;margin-inline:auto}
  .step{min-height:46vh}
}
@media (max-width:600px){
  .hero-perks{flex-direction:column}
  .form-row{grid-template-columns:1fr}
  .footer-top p{margin-left:0;width:100%}
  .evo-bub{font-size:12px;padding:6px 10px}
  .evo-phases span{font-size:12px;padding:5px 10px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* Things that draw themselves. The hero underline and frame draw on load (pure CSS); everything below
   the fold draws when it scrolls into view (site.js adds .js-draw to <html> and .is-drawn to each part).
   Without JavaScript, or with reduced motion, everything is simply shown drawn. */
@property --ring{syntax:"<number>";inherits:false;initial-value:1}
@keyframes draw-path{from{stroke-dashoffset:1}}
@keyframes draw-underline{from{background-size:0% .07em}}
h1 em,h2 em{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 94%;background-size:100% .07em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
h1 em{animation:draw-underline 1.2s cubic-bezier(.6,0,.2,1) .35s both}
@keyframes draw-ring{from{--ring:0}}
@keyframes draw-tick-in{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
html.js-draw h2:not(.is-drawn) em{background-size:0% .07em}
html.js-draw h2.is-drawn em{animation:draw-underline 1.1s cubic-bezier(.6,0,.2,1) .15s both}
html.js-draw .preview:not(.is-drawn) .preview-steps li::after{--ring:0}
html.js-draw .preview.is-drawn .preview-steps li::after{animation:draw-ring 1s cubic-bezier(.6,0,.2,1) both}
html.js-draw .preview.is-drawn .preview-steps li:nth-child(2)::after{animation-delay:.2s}
html.js-draw .preview.is-drawn .preview-steps li:nth-child(3)::after{animation-delay:.4s}
html.js-draw .price-card:not(.is-drawn) .price-list li::before{clip-path:inset(0 100% 0 0)}
html.js-draw .price-card.is-drawn .price-list li::before{animation:draw-tick-in .45s cubic-bezier(.6,0,.2,1) both}
html.js-draw .price-card.is-drawn .price-list li:nth-child(2)::before{animation-delay:.15s}
html.js-draw .price-card.is-drawn .price-list li:nth-child(3)::before{animation-delay:.3s}
html.js-draw .price-card.is-drawn .price-list li:nth-child(4)::before{animation-delay:.45s}
.hero-perks li::before{animation:tick-draw .6s cubic-bezier(.6,0,.2,1) both}
.hero-perks li:nth-child(1)::before{animation-delay:.7s}
.hero-perks li:nth-child(2)::before{animation-delay:.85s}
.hero-perks li:nth-child(3)::before{animation-delay:1s}
@media (prefers-reduced-motion:reduce){
  html.js-draw h2:not(.is-drawn) em{background-size:100% .07em}
  html.js-draw .preview:not(.is-drawn) .preview-steps li::after{--ring:1}
  html.js-draw .price-card:not(.is-drawn) .price-list li::before{clip-path:none}
}