/* Gapify /websites/ page. The page is itself the demo of our work. Base state = final state, so nothing is hidden if motion is off. */
.web-pg{overflow-x:clip}
#web-prog{position:fixed;left:0;top:0;height:4px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#5BEB15,#FF2257);z-index:9999;pointer-events:none}
.web-pg .bar{transition:background .25s,box-shadow .25s}
.web-pg .bar.sc{background:rgba(0,0,0,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 34px rgba(0,0,0,.4)}

/* ---------- hero ---------- */
.web-pg .web-hero{position:relative;overflow:hidden;background:#000}
.blob{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;will-change:transform}
.b1{width:560px;height:560px;background:#5BEB15;left:-160px;top:-120px;opacity:.26;animation:drift1 14s ease-in-out infinite alternate}
.b2{width:500px;height:500px;background:#FF2257;right:-140px;top:90px;opacity:.28;animation:drift2 16s ease-in-out infinite alternate}
.b3{width:420px;height:420px;background:#5BEB15;right:22%;bottom:-200px;opacity:.14;animation:drift1 19s ease-in-out infinite alternate-reverse}
@keyframes drift1{to{transform:translate(140px,90px) scale(1.18)}}
@keyframes drift2{to{transform:translate(-120px,-70px) scale(1.22)}}
.web-hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:56px;align-items:center}
@media(min-width:900px){.web-hero-in{grid-template-columns:1.08fr .92fr}}
.web-hero-text{min-width:0}
.web-pg .web-hero h1{display:block;font-size:clamp(44px,7vw,96px);line-height:.98;letter-spacing:-.035em;margin:0 0 24px}
.kl{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em}
.kw{display:inline-block;animation:kwup .95s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * .07s + .15s)}
@keyframes kwup{from{transform:translateY(112%) rotate(5deg)}to{transform:none}}
.kw.hl{color:#5BEB15}.kw.hl2{color:#FF2257}
.web-hero-text .lede,.web-hero-text .cta-row,.web-hero-text .hnote,.web-hero-text .crumbs,.web-hero-text .eyebrow{animation:fup .9s cubic-bezier(.2,.8,.2,1) both}
.web-hero-text .crumbs{animation-delay:.05s}.web-hero-text .eyebrow{animation-delay:.1s}.web-hero-text .lede{animation-delay:.85s}.web-hero-text .cta-row{animation-delay:1s}.web-hero-text .hnote{animation-delay:1.1s}
@keyframes fup{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.web-pg .web-hero .lede{max-width:560px}

.web-fig{min-width:0}
.tilt{position:relative;transition:transform .25s ease-out;transform-style:preserve-3d;will-change:transform}
.bw{border:1px solid #2f3a28;border-radius:22px;background:#0a0b09;overflow:hidden;box-shadow:0 30px 120px rgba(91,235,21,.22)}
.bw-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid #20241c;background:#0f120c}
.bw-bar i{width:10px;height:10px;border-radius:50%;background:#2f3a28}.bw-bar i:first-child{background:#FF2257}.bw-bar i:nth-child(2){background:#5BEB15}
.bw-bar span{margin-left:10px;font-size:13px;color:#aab0a6;background:#000;border-radius:99px;padding:4px 14px}
.bw-body{position:relative;padding:22px;min-height:330px}
.bw-sk{position:absolute;inset:22px;display:grid;gap:12px;align-content:start;animation:skout .45s ease 1.7s forwards}
@keyframes skout{to{opacity:0;visibility:hidden}}
.sk{border-radius:10px;background:linear-gradient(90deg,#1a1e15 25%,#2f4420 50%,#1a1e15 75%);background-size:220% 100%;animation:skim 1.6s ease-in-out infinite}
.sk-h{height:38px;width:70%}.sk-p{height:14px;width:92%}.sk-p2{height:14px;width:64%}
.sk-row{display:flex;gap:10px}.sk-b{height:38px;width:120px;border-radius:99px}
.sk-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.sk-cards .sk{height:90px;border-radius:14px}
@keyframes skim{0%{background-position:120% 0}100%{background-position:-120% 0}}
.bw-live{display:grid;gap:14px;align-content:start}
.bl{animation:blin .75s cubic-bezier(.2,.9,.3,1.25) both;animation-delay:calc(1.75s + var(--n) * .16s)}
@keyframes blin{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
.bw-live h4{margin:0;font-size:clamp(28px,3.2vw,46px);font-weight:900;line-height:1;color:#fff}
.bw-live p{margin:0;color:#c8cdc2;font-size:17px}
.bl-btns{display:flex;gap:10px}.bl-btns s{display:block;width:124px;height:40px;border-radius:99px;background:#5BEB15}.bl-btns s+s{background:#FF2257}
.bl-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bl-cards div{height:92px;border-radius:14px;background:#12150f;border:1px solid #20241c;position:relative;overflow:hidden}
.bl-cards div::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(91,235,21,.28) 50%,transparent 70%);transform:translateX(-100%);animation:sheen 3.4s ease-in-out 3s infinite}
.bl-cards div:nth-child(2)::after{animation-delay:3.4s}.bl-cards div:nth-child(3)::after{animation-delay:3.8s}
@keyframes sheen{to{transform:translateX(100%)}}
.chip{position:absolute;padding:10px 16px;border-radius:99px;font-weight:900;font-size:14px;white-space:nowrap;box-shadow:0 12px 30px rgba(0,0,0,.4);animation:chipin .7s cubic-bezier(.2,.9,.3,1.35) both,bob 5s ease-in-out infinite;animation-delay:2.7s,3.4s}
.chip.c1{left:-20px;top:16%;background:#5BEB15;color:#000}
.chip.c2{right:-16px;top:44%;background:#FF2257;color:#fff;animation-delay:3s,4s}
.chip.c3{left:8%;bottom:-20px;background:#fff;color:#000;animation-delay:3.3s,4.5s}
@keyframes chipin{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -10px}}
@media(max-width:560px){.chip.c1,.chip.c2{display:none}}

/* ---------- marquee ---------- */
.web-marq{position:relative;z-index:2;background:#5BEB15;color:#000;overflow:hidden;border-block:3px solid #000;transform:rotate(-1.3deg);margin:-18px -3% 0}
.mq-track{display:flex;width:max-content;padding:16px 0;animation:mq 30s linear infinite}
.mq-track span{padding:0 24px;font-weight:900;font-size:clamp(22px,3vw,38px);text-transform:uppercase;letter-spacing:-.01em;white-space:nowrap}
.mq-track i{align-self:center;width:14px;height:14px;border-radius:50%;background:#FF2257;flex:none}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- reveal ---------- */
html.wm .rv{opacity:0;transform:translateY(32px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
html.wm .rv.in{opacity:1;transform:none}
.web-sec{padding-block:clamp(60px,8vw,104px)}
.web-sec h2,.web-story h2{font-size:clamp(36px,5vw,64px);line-height:1.02;font-weight:900;letter-spacing:-.025em;margin:0}

/* ---------- three readers ---------- */
.web-read{background:#f4f4ef;color:#000;padding-top:calc(clamp(60px,8vw,104px) + 24px)}
.web-read .eyebrow{color:#000}
.wtabs{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.rtab{font:900 16px Lato,sans-serif;min-height:50px;padding:0 26px;border-radius:99px;border:2px solid #000;background:transparent;color:#000;cursor:pointer;transition:background .25s,color .25s,transform .2s}
.rtab:hover{transform:translateY(-2px)}
.rtab[aria-selected=true]{background:#000;color:#5BEB15}
.rtab:focus-visible,.wtab:focus-visible,.dbtn:focus-visible{outline:3px solid #FF2257;outline-offset:3px}
.rpanes{margin-top:24px;background:#000;color:#fff;border-radius:32px;padding:clamp(22px,4vw,48px);min-height:420px}
.rpane{animation:panein .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes panein{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.rpane[hidden]{display:none!important}
.rp-k{margin:0 0 18px;color:#5BEB15;font-weight:900;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.rp-t{margin:22px 0 0;font-size:19px;line-height:1.55;color:#eceee8;max-width:720px}
.serp{background:#fff;color:#202124;border-radius:18px;padding:22px 24px;max-width:700px;font-family:Arial,Helvetica,sans-serif}
.serp p{margin:0;animation:clipin 1s steps(34) both}
.s-u{font-size:14px;color:#4d5156}.s-t{font-size:22px;line-height:1.3;color:#1a0dab;margin:4px 0 6px!important;animation-delay:.35s!important}.s-d{font-size:14px;line-height:1.58;color:#4d5156;animation-delay:.9s!important}
@keyframes clipin{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.codes{display:grid;grid-template-columns:1fr;gap:14px}@media(min-width:900px){.codes{grid-template-columns:1fr 1fr}}
.codes pre{margin:0;background:#0b0d09;border:1px solid #20241c;border-radius:16px;padding:18px;overflow-x:auto;min-width:0;animation:panein .6s .15s both}.codes pre+pre{animation-delay:.4s}
.codes code{font:600 13px/1.6 ui-monospace,Menlo,monospace;color:#5BEB15;white-space:pre-wrap;word-break:break-word}
.mock-wrap{container-type:inline-size;width:100%}
.mock{background:#0b0d09;border:1px solid #2f3a28;border-radius:18px;overflow:hidden;color:#fff;font-family:Lato,sans-serif}
.m-bar{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid #20241c}
.m-bar i{width:34px;height:14px;border-radius:5px;background:#5BEB15}.m-bar b{font-size:16px}.m-nav{margin-left:auto;display:flex;gap:10px}.m-nav u{display:block;width:44px;height:8px;border-radius:4px;background:#2f3a28}.m-cta{display:block;width:70px;height:24px;border-radius:99px;background:#5BEB15}
.m-hero{padding:30px 18px 22px}.m-hero h4{margin:0;font-size:clamp(22px,7cqw,44px);font-weight:900;line-height:1}.m-hero p{margin:8px 0 14px;color:#c8cdc2;font-size:clamp(11px,2.4cqw,16px)}
.m-btns{display:flex;gap:8px}.m-btns s{display:block;width:90px;height:28px;border-radius:99px;background:#5BEB15}.m-btns s+s{background:#FF2257}
.m-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 18px 22px}.m-cards div{height:64px;border-radius:12px;background:#12150f;border:1px solid #20241c}
@container (max-width:520px){.m-nav{display:none}.m-cards{grid-template-columns:1fr}.m-cta{margin-left:auto}.m-btns s{width:70px}}

/* ---------- scroll story ---------- */
.web-story{background:#000;color:#fff;padding-block:clamp(60px,8vw,104px)}
.web-story .eyebrow{color:#fff}
.story-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:36px}
@media(min-width:900px){.story-grid{grid-template-columns:1fr 1.1fr;gap:56px}}
.story-steps{display:grid}
.st{min-height:62vh;display:flex;flex-direction:column;justify-content:center;transition:opacity .45s,transform .45s}
html.wm .st{opacity:.25;transform:translateX(-12px)}
html.wm .st.on{opacity:1;transform:none}
.st-n{font-size:clamp(72px,9vw,128px);font-weight:900;line-height:.9;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:2px #5BEB15;transition:color .4s}
.st.on .st-n{color:#5BEB15}
.st h3{margin:14px 0 12px;font-size:clamp(30px,3.6vw,48px);font-weight:900;letter-spacing:-.02em}
.st p{margin:0;font-size:20px;line-height:1.6;color:#d6dad2;max-width:520px}
.story-stage{align-self:start;position:sticky;top:84px;z-index:3}
@media(max-width:899px){.story-stage{order:-1;top:60px}.st{min-height:44vh}}
.stage{position:relative;aspect-ratio:1/1;min-height:320px;max-height:640px;width:100%;border-radius:32px;background:#0b0d09;border:1px solid #20241c;display:grid;place-items:center;overflow:hidden;padding:clamp(14px,3vw,34px);background-image:linear-gradient(rgba(91,235,21,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(91,235,21,.05) 1px,transparent 1px);background-size:30px 30px}
.sm{position:relative;width:100%;max-width:500px;border:2px dashed #4a5042;border-radius:18px;padding:14px;display:grid;gap:12px;transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .6s,background .5s,border-color .5s}
.sm *{transition:background .6s,border-color .6s,color .6s,opacity .5s}
.sm-bar,.sm-hero,.sm-cards div{border:2px dashed #4a5042;border-radius:14px}
.sm-bar{display:flex;align-items:center;gap:12px;padding:12px 14px}
.sm-bar i{width:32px;height:12px;border-radius:5px;border:2px dashed #4a5042}
.sm-bar b{color:transparent;font-size:16px}
.sm-bar span{margin-left:auto;display:flex;gap:8px}.sm-bar u{display:block;width:38px;height:8px;border-radius:4px;border:2px dashed #4a5042}
.sm-bar s{display:block;width:60px;height:22px;border-radius:99px;border:2px dashed #4a5042}
.sm-hero{position:relative;padding:26px 18px 20px}
.sm-hero h4{margin:0;font-size:clamp(24px,3.2vw,40px);font-weight:900;line-height:1;color:transparent}
.sm-hero p{margin:8px 0 14px;color:transparent;font-size:15px}
.sm-btns{display:flex;gap:8px}.sm-btns s{display:block;width:94px;height:30px;border-radius:99px;border:2px dashed #4a5042}
.sm-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.sm-cards div{position:relative;height:76px}
.tag{position:absolute;left:10px;top:8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8a9381;font-weight:800}
.t-bar{display:none}
.stage:not([data-st="0"]) .sm{border-style:solid;border-color:#20241c;background:#0b0d09}
.stage:not([data-st="0"]) .sm-bar,.stage:not([data-st="0"]) .sm-hero,.stage:not([data-st="0"]) .sm-cards div{border:2px solid #20241c;background:#12150f}
.stage:not([data-st="0"]) .sm-bar i{border:0;background:#5BEB15}.stage:not([data-st="0"]) .sm-bar b{color:#fff}
.stage:not([data-st="0"]) .sm-bar u{border:0;background:#2f3a28}.stage:not([data-st="0"]) .sm-bar s{border:0;background:#5BEB15}
.stage:not([data-st="0"]) .sm-hero h4{color:#fff}.stage:not([data-st="0"]) .sm-hero p{color:#c8cdc2}
.stage:not([data-st="0"]) .sm-btns s{border:0;background:#5BEB15}.stage:not([data-st="0"]) .sm-btns s+s{background:#FF2257}
.stage:not([data-st="0"]) .tag{opacity:0}
.code-panel{position:absolute;right:5%;top:11%;width:64%;background:#050605;border:1px solid #2f3a28;border-radius:14px;padding:16px 18px;opacity:0;transform:translateX(50px);transition:opacity .6s,transform .7s cubic-bezier(.2,.8,.2,1);pointer-events:none;font:600 12px/1.75 ui-monospace,Menlo,monospace;color:#5BEB15;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.code-panel p{margin:0;opacity:0;transform:translateX(12px);transition:opacity .4s,transform .4s;transition-delay:calc(var(--i) * .11s + .35s);white-space:pre-wrap;word-break:break-all}
.code-panel .cp-h{color:#aab0a6;opacity:1;transform:none;margin-bottom:6px;transition:none}
.stage[data-st="2"] .code-panel{opacity:1;transform:none}.stage[data-st="2"] .code-panel p{opacity:1;transform:none}
.stage[data-st="2"] .sm{transform:translateX(-26%) scale(.74);filter:brightness(.5)}
.radar{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .7s;pointer-events:none}
.radar i{position:absolute;border:2px solid #5BEB15;border-radius:50%;width:140px;height:140px;opacity:0;animation:ping 3.6s ease-out infinite}
.radar i:nth-child(2){animation-delay:1.2s}.radar i:nth-child(3){animation-delay:2.4s}
@keyframes ping{0%{transform:scale(.4);opacity:.7}100%{transform:scale(3.4);opacity:0}}
.radar b{position:absolute;left:50%;top:50%;width:46%;height:3px;background:linear-gradient(90deg,#FF2257,transparent);transform-origin:0 50%;animation:sweep 4s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.stage[data-st="3"] .radar{opacity:1}
.stage[data-st="3"] .sm{transform:scale(.86)}
.lives{position:absolute;inset:0;pointer-events:none}
.lv{position:absolute;padding:9px 15px;border-radius:99px;background:#5BEB15;color:#000;font-weight:900;font-size:13px;opacity:0;transform:scale(.4);transition:opacity .45s,transform .55s cubic-bezier(.2,.9,.3,1.4);transition-delay:calc(var(--i) * .13s + .35s)}
.lv:nth-child(1){left:6%;top:9%}.lv:nth-child(2){right:6%;top:17%;background:#FF2257;color:#fff}.lv:nth-child(3){left:4%;bottom:21%;background:#fff}.lv:nth-child(4){right:5%;bottom:12%}.lv:nth-child(5){left:34%;bottom:4%;background:#FF2257;color:#fff}
.stage[data-st="3"] .lv{opacity:1;transform:none}
.st-badge{position:absolute;left:50%;top:14px;translate:-50% 0;padding:7px 18px 7px 30px;border-radius:99px;background:#FF2257;color:#fff;font-weight:900;font-size:14px;opacity:0;transform:translateY(-12px);transition:opacity .5s,transform .5s .2s}
.st-badge::before{content:"";position:absolute;left:12px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#fff;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(.5);opacity:.5}}
.stage[data-st="3"] .st-badge{opacity:1;transform:none}

/* ---------- measured stats ---------- */
.web-stats{background:#5BEB15;color:#000}.web-stats .eyebrow,.web-stats h2{color:#000}
.rings{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px}
.rg{position:relative;display:grid;justify-items:center;text-align:center;gap:6px}
.rg svg{width:170px;height:170px;transform:rotate(-90deg)}
.rg-bg{fill:none;stroke:rgba(0,0,0,.16);stroke-width:10}
.rg-fg{fill:none;stroke:#000;stroke-width:10;stroke-linecap:round;stroke-dasharray:326.7;transition:stroke-dashoffset 1.7s cubic-bezier(.2,.8,.2,1)}
.rg b{position:absolute;top:58px;font-size:32px;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rg-l{margin-top:8px;font-weight:900;font-size:19px}.rg-s{font-size:15px;font-weight:700;opacity:.8}
.big{list-style:none;margin:54px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:24px 64px;border-top:5px solid #000;padding-top:30px}
.big b{display:block;font-size:clamp(48px,6vw,84px);font-weight:900;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.big span{display:block;margin-top:8px;font-weight:800;font-size:17px}

/* ---------- devices ---------- */
.web-dev{background:#f4f4ef;color:#000}.web-dev .eyebrow{color:#000}
.dev-ctl{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.dbtn{font:900 16px Lato,sans-serif;min-height:50px;padding:0 26px;border-radius:99px;border:2px solid #000;background:transparent;color:#000;cursor:pointer;transition:background .25s,color .25s}
.dbtn[aria-pressed=true]{background:#000;color:#5BEB15}
.dev-stage{margin-top:24px;background:#000;border-radius:32px;padding:clamp(18px,4vw,48px);display:flex;justify-content:center;background-image:linear-gradient(rgba(91,235,21,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(91,235,21,.05) 1px,transparent 1px);background-size:30px 30px}
.dev-frame{min-width:0;transition:width .9s cubic-bezier(.2,.8,.2,1)}
.dev-note{margin:14px 0 0;color:#2b2f29;font-size:16px}

/* ---------- built-in tiles ---------- */
.web-checks{background:#fff;color:#000}.web-checks .eyebrow{color:#000}
.wchecks{list-style:none;margin:38px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;perspective:900px}
@media(min-width:900px){.wchecks{grid-template-columns:repeat(3,1fr)}}
.tl{position:relative;overflow:hidden;border-radius:28px;padding:30px;background:#000;color:#fff;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out,box-shadow .25s;will-change:transform}
.tl:nth-child(3n+1){background:#5BEB15;color:#000}.tl:nth-child(3n+2){background:#FF2257;color:#fff}
.tl::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.35),transparent 70%);mix-blend-mode:soft-light}
.tl:hover::after{opacity:1}.tl:hover{box-shadow:0 24px 60px rgba(0,0,0,.28)}
.tl b{display:block;font-size:26px;font-weight:900;line-height:1.1;margin-bottom:10px}.tl span{font-size:17px;line-height:1.5;font-weight:600}

/* ---------- closing ---------- */
.web-cta{background:linear-gradient(120deg,#FF2257,#ff4a4a,#FF2257);background-size:220% 100%;animation:gshift 9s ease-in-out infinite alternate;color:#fff}
@keyframes gshift{to{background-position:100% 0}}

@media(prefers-reduced-motion:reduce){
  .web-pg *,.web-pg *::before,.web-pg *::after{animation:none!important;transition:none!important}
  .bw-sk{display:none}.mq-track{transform:none}.tilt,.tl{transform:none!important}
}