/* Beautiful work, remarkably little hassle. Midnight world, one cobalt plane, acid punctuation, real websites in drawn devices. */
:root{
  --midnight:#080E21;--raised:#121B33;--cobalt:#3155F5;--cobalt-deep:#2036AC;--acid:#DCFA5A;--paper:#F7F8F2;--mist:#B7C4D8;--ink2:#4A5468;
  --display:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --text:"Manrope","Helvetica Neue",Arial,sans-serif;
  --gutter:20px;--gap:24px;--section:64px;--head:60px;
  --ease:cubic-bezier(.22,1,.36,1);
  --line-d:rgba(247,248,242,.14);
  --line-l:rgba(8,14,33,.14);
  --line-c:rgba(247,248,242,.3);
}
@media (min-width:720px){:root{--gutter:32px;--section:104px;--head:68px}}
@media (min-width:1200px){:root{--gutter:48px;--section:120px}}
@media (min-width:1440px){:root{--gutter:60px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--midnight)}
body{margin:0;background:var(--midnight);color:var(--paper);font:400 1rem/1.6 var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:600}
p,dl,dd{margin:0}
a{color:inherit}
ul,ol{margin:0;padding:0}
strong,b{font-weight:800}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.ic{width:24px;height:24px;flex:none;display:inline-block;vertical-align:middle}

/* focus */
:focus-visible{outline:3px solid var(--acid);outline-offset:3px;border-radius:4px}
.how :focus-visible,.pricing :focus-visible,.answers :focus-visible,.legal-doc :focus-visible{outline-color:var(--cobalt)}
.cures :focus-visible{outline-color:var(--paper)}
.skip{position:absolute;left:16px;top:-80px;z-index:100;background:var(--acid);color:var(--midnight);padding:12px 18px;border-radius:8px;font-weight:800;text-decoration:none}
.skip:focus{top:14px}

/* layout */
.container{width:min(100% - 2*var(--gutter),1320px);margin-inline:auto}
section{padding-block:var(--section)}
section[id]{scroll-margin-top:24px}
@media (prefers-reduced-motion:no-preference){html.js{scroll-behavior:smooth}}

/* type */
.h1{font-size:clamp(2.75rem,2rem + 4.4vw,5.5rem);font-weight:700;line-height:.98;letter-spacing:-.045em;text-wrap:balance}
.h2{font-size:clamp(1.875rem,1.25rem + 2.6vw,3.5rem);font-weight:600;line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
.h3{font-size:clamp(1.25rem,1.05rem + .8vw,1.75rem);font-weight:600;line-height:1.15;letter-spacing:-.025em}
.lead{font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);line-height:1.5;font-weight:500}
.acid{color:var(--acid)}
.kicker{display:flex;align-items:center;gap:10px;font:800 .8125rem/1.4 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--mist);margin-bottom:20px}
.kicker .ic{width:20px;height:20px;color:var(--acid)}
.kicker-n{font-weight:600;letter-spacing:.02em;text-transform:none;padding-left:10px;border-left:1px solid var(--line-d)}
.mark{display:inline-block;width:9px;height:9px;background:var(--acid);flex:none}
.sec-head{max-width:760px;margin-bottom:48px}
.sec-head .lead{margin-top:16px;color:var(--mist)}
.sec-actions{margin-top:48px}
@media (min-width:720px){.sec-head{margin-bottom:64px}.sec-actions{margin-top:64px}}

/* buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 24px;border-radius:9px;border:1.5px solid transparent;font:800 .9375rem/1.2 var(--text);text-decoration:none;white-space:nowrap}
.btn .ic{width:22px;height:22px}
.btn-acid{background:var(--acid);color:var(--midnight);border-color:var(--acid)}
.btn-acid:hover{background:#E8FF83;border-color:#E8FF83}
.btn-line{color:var(--paper);border-color:rgba(247,248,242,.34)}
.btn-line:hover{border-color:rgba(247,248,242,.7)}
.btn-ink{background:var(--midnight);color:var(--paper);border-color:var(--midnight)}
.btn-ink:hover{background:#1A2545;border-color:#1A2545}
.btn-paper{background:var(--paper);color:var(--midnight);border-color:var(--paper)}
.btn-paper:hover{background:#fff;border-color:#fff}
.btn-sm{min-height:44px;padding:0 16px;font-size:.875rem}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.u{background:linear-gradient(var(--acid),var(--acid)) no-repeat 0 100%/100% 2px;padding-bottom:3px}
.link-arrow{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:800 1rem/1.2 var(--text);text-decoration:none;color:inherit}
.link-arrow .ic{width:22px;height:22px}
.link{font-weight:700;color:var(--cobalt-deep);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;padding:10px 0}

/* price object, shared by the hero, the plan and the close */
.price{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;row-gap:2px;font-family:var(--display)}
.price .amount{font:700 clamp(2.75rem,2.25rem + 2.2vw,4rem)/1 var(--display);letter-spacing:-.05em;font-variant-numeric:tabular-nums;white-space:nowrap}
.price .per{font:700 1.0625rem/1.2 var(--text);letter-spacing:0}

/* header: slim, static, one fine rule */
.site-head{background:var(--midnight);border-bottom:1px solid var(--line-d);height:var(--head)}
.site-head .container{display:flex;align-items:center;justify-content:space-between;gap:24px;height:100%}
.wordmark{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:700 26px/1 var(--display);letter-spacing:-.05em;color:var(--paper);text-decoration:none}
.wordmark .mark{margin-top:3px}
.wordmark .logo{display:block;width:129.81px;height:20.75px}
.site-nav{display:none;gap:30px;margin-left:auto;margin-right:28px}
.site-nav a{color:var(--paper);font:700 .9375rem/1 var(--text);text-decoration:none;padding:15px 0;background:linear-gradient(var(--acid),var(--acid)) no-repeat 0 calc(100% - 9px)/0 2px}
@media (min-width:720px){.site-nav{display:flex}}

/* hero */
.hero{padding-block:32px 24px}
.hero-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.hero-copy{grid-column:1/-1;position:relative;z-index:2}
.hero .h1{max-width:9ch}
.hero-lead{margin-top:14px;font-size:clamp(1.125rem,1rem + .5vw,1.375rem);font-weight:500}
.hero-price{margin-top:22px}
.hero-price .per{color:var(--mist)}
.hero-sure{margin-top:6px;font-weight:700;font-size:1.0625rem}
.hero-actions{margin-top:24px}
.hero-actions .btn-acid{flex:1 1 auto}
.hero-incl{grid-column:1/-1;list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px;font:600 .9375rem/1.35 var(--text);color:var(--paper)}
.hero-incl li{display:flex;align-items:center;gap:10px;min-height:24px}
.hero-incl .is-main{flex:0 0 100%;font-weight:800;font-size:1.0625rem}
.hero-incl .ic{width:22px;height:22px;color:var(--acid)}
.hero-incl .mark{width:7px;height:7px;margin-right:2px}
@media (max-width:719px){
  .hero-actions .btn-line{display:none}
  .hero-incl{margin-top:30px;padding-top:22px;border-top:1px solid var(--line-d)}
  .hero-incl .is-main{font-size:1.125rem}
}

.stage{position:relative;grid-column:1/-1;width:calc(100% + var(--gutter));aspect-ratio:340/300;margin-top:34px;overflow:clip}
.plane{display:none}
.dev{position:absolute}
.dev-a{left:3%;top:5%;width:79%;transform:rotate(-2deg);z-index:2}
.dev-b{display:none}
.dev-c{right:var(--gutter);top:19%;width:30%;transform:rotate(2deg);z-index:3}
@media (min-width:720px) and (max-width:1023px){
  .stage{aspect-ratio:680/440;width:100%}
  .plane{left:12%;top:16%;width:88%;height:84%}
  .dev-a{left:2%;top:4%;width:71%}
  .dev-c{right:2%;top:8%;width:21%}
}
@media (min-width:1024px){
  .hero{padding-block:40px 36px}
  .hero-grid{grid-template-rows:1fr auto auto 1fr}
  .hero-copy{grid-column:1/span 5;grid-row:2}
  .hero-incl{grid-column:1/span 5;grid-row:3}
  .hero .h1{max-width:none;margin-right:-40px}
  .hero-lead{margin-top:18px}
  .hero-price{margin-top:24px}
  .hero-actions{margin-top:26px}
  .hero-actions .btn-acid{flex:0 0 auto}
  .hero-incl{margin-top:28px;gap:10px 22px}
  .stage{grid-column:6/span 7;grid-row:1/span 4;width:calc(100% + var(--gutter));aspect-ratio:820/720;margin-top:0}
  .plane{left:8%;top:16%;width:92%;height:84%}
  .dev-a{left:4%;top:4%;width:74%;transform:rotate(-2deg)}
  .dev-b{display:block;left:46%;top:56%;width:52%;transform:rotate(2deg);z-index:4}
  .dev-c{left:2.5%;right:auto;top:50%;width:18.5%;transform:rotate(-3deg);z-index:3}
}

/* drawn devices */
.browser{display:block;border-radius:10px;background:var(--raised);overflow:hidden;box-shadow:0 0 0 1px rgba(247,248,242,.16),inset 0 1px 0 rgba(255,255,255,.07),0 2px 6px rgba(0,0,0,.35),0 30px 56px -18px rgba(0,0,0,.65)}
.bar{position:relative;display:flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-bottom:1px solid rgba(247,248,242,.08)}
.bar i{width:7px;height:7px;border-radius:50%;background:rgba(247,248,242,.2)}
.bar b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:600 11px/1 var(--text);letter-spacing:.01em;color:var(--mist);padding:4px 10px;border-radius:5px;background:rgba(8,14,33,.55);max-width:56%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.browser img{display:block;width:100%;height:auto}
.phone{display:block;padding:6px;border-radius:28px;background:#0B1226;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 0 0 1px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.4),0 26px 48px -14px rgba(0,0,0,.7)}
.phone img{display:block;width:100%;height:auto;border-radius:22px}
@media (max-width:719px){
  .bar{height:22px;padding:0 9px;gap:5px}
  .bar i{width:5px;height:5px}
  .bar b{display:none}
  .phone{padding:4px;border-radius:18px}
  .phone img{border-radius:14px}
}
.dev-a .browser{box-shadow:0 0 0 1px rgba(247,248,242,.16),inset 0 1px 0 rgba(255,255,255,.07),0 1px 0 rgba(220,250,90,.45),0 2px 6px rgba(0,0,0,.35),0 30px 56px -18px rgba(0,0,0,.65)}
html.js .stage.is-idle .dev,html.js .stage.is-hidden .dev{animation-play-state:paused}

/* gallery: five equal exhibits */
.gallery{padding-top:calc(var(--section) - 8px);border-top:1px solid var(--line-d)}
.works{--oh:70px;list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:56px var(--gap)}
.work-link{display:block;color:inherit;text-decoration:none}
.work-devices{display:block;position:relative}
.work .browser{position:relative;z-index:1}
.work .phone{position:absolute;right:0;bottom:calc(-1*var(--oh));width:25%;z-index:2}
.work-cap{display:grid;align-content:start;gap:4px;padding:18px calc(25% + 20px) 0 0;min-height:calc(var(--oh) + 24px)}
.work-name{font:600 clamp(1.375rem,1.15rem + 1vw,1.875rem)/1.15 var(--display);letter-spacing:-.025em}
.work-trade{display:block;color:var(--mist);font-size:.9375rem;font-weight:500}
.work-trade::first-letter{text-transform:uppercase}
.work-visit{display:inline-flex;align-items:center;gap:6px;margin-top:10px;min-height:32px;font:800 .9375rem/1.2 var(--text);color:var(--paper)}
.work-visit .ic{width:20px;height:20px;color:var(--acid)}
@media (min-width:720px){
  .works{--oh:110px;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:72px}
  .work-cap{padding-top:22px;gap:6px}
}
@media (min-width:1024px){.works{--oh:126px;row-gap:96px}.work-cap{padding-top:24px}}

/* pains and cures: cobalt passage */
.cures{background:var(--cobalt);color:var(--paper)}
.cures .kicker,.cures .sec-head .lead{color:var(--paper)}
.cure-grid{display:grid;gap:40px}
.cure-main{padding:28px 24px 30px;border-radius:16px;background:rgba(8,14,33,.3);box-shadow:inset 0 0 0 1px var(--line-c)}
.hassle{font:700 .8125rem/1.4 var(--text);letter-spacing:.06em;text-transform:uppercase;color:rgba(247,248,242,.92)}
.cure-title{display:flex;align-items:center;gap:12px;margin-top:10px}
.cure-title .ic{color:var(--acid)}
.bigfact{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:.18em;font-family:var(--display);line-height:1;letter-spacing:-.04em;margin-top:26px}
.bigfact .upto{font:700 clamp(1.25rem,1rem + 1vw,1.875rem)/1 var(--display);letter-spacing:-.02em;color:var(--acid)}
.bigfact .n{font:700 clamp(5.5rem,4rem + 6vw,9.5rem)/.9 var(--display);letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.bigfact .unit{font:700 clamp(1.75rem,1.4rem + 1.6vw,3rem)/1 var(--display);letter-spacing:-.03em}
.cures .sub{font-size:1.0625rem;font-weight:600;color:var(--paper)}
.cure-main .sub{margin-top:14px}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chips li{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-c);font:700 .875rem/1 var(--text);white-space:nowrap}
.cure-list{list-style:none;display:grid}
.cure-list li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;row-gap:6px;padding:26px 0;border-top:1px solid var(--line-c)}
.cure-list li:last-child{border-bottom:1px solid var(--line-c)}
.cure-list .ic{grid-row:1/4;width:44px;height:44px;padding:10px;border-radius:12px;background:rgba(8,14,33,.3);color:var(--acid)}
.cure-list .h3{margin-top:2px}
.cure-list .sub{font-weight:500}
.cures .btn-paper .ic{color:var(--cobalt)}
@media (min-width:1024px){
  .cure-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:calc(var(--gap)*2);align-items:start}
  .cure-main{padding:40px 40px 44px}
  .cure-list li{padding:30px 0}
  .cure-list li:first-child{padding-top:0;border-top:0}
}

/* how it works: near-white, huge numbers, cobalt rules */
.how{background:var(--paper);color:var(--midnight)}
.how .kicker,.pricing .kicker{color:var(--ink2)}
.how .kicker .mark,.pricing .kicker .mark,.answers .kicker .mark{background:var(--cobalt)}
.how .sec-head .lead,.pricing .sec-head .lead,.answers .sec-head .lead{color:var(--ink2)}
.steps{list-style:none;display:grid;border-top:2px solid var(--cobalt)}
.step{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:22px;align-items:start;padding:26px 0 30px;border-bottom:1px solid var(--line-l)}
.step-n{font:700 clamp(3.75rem,3rem + 3.5vw,7.5rem)/.85 var(--display);letter-spacing:-.06em;color:var(--midnight);min-width:1.1ch}
.step-body{padding-top:6px}
.step p{margin-top:8px;font-size:1.0625rem;font-weight:500;color:var(--ink2);max-width:30ch}
@media (min-width:720px){
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap);border-top:0}
  .step{display:block;padding:24px 0 0;border-top:2px solid var(--cobalt);border-bottom:0}
  .step-n{display:block;margin-bottom:22px;margin-left:-.04em}
}

/* pricing: the clearest section */
.pricing{background:var(--paper);color:var(--midnight);border-top:1px solid var(--line-l);padding-top:calc(var(--section) - 16px)}
.plan{border:1px solid var(--line-l);border-radius:20px;background:rgba(255,255,255,.55);box-shadow:0 30px 60px -40px rgba(8,14,33,.35)}
.plan-row,.plan-choices{padding:28px 20px}
.plan-row{border-top:1px solid var(--line-l)}
.plan-choices{display:grid;gap:14px}
.plan-card{padding:26px 24px 28px;border-radius:14px}
.plan-card.is-month{background:#fff;box-shadow:inset 0 0 0 1px var(--line-l)}
.plan-card.is-year{background:var(--midnight);color:var(--paper)}
.plan-label{display:flex;align-items:center;gap:12px;font:800 .8125rem/1.4 var(--text);letter-spacing:.08em;text-transform:uppercase}
.is-month .plan-label{color:var(--ink2)}
.is-year .plan-label{color:var(--mist)}
.capsule{display:inline-block;padding:5px 10px;border-radius:999px;background:var(--acid);color:var(--midnight);font:800 .8125rem/1 var(--text);letter-spacing:.01em;text-transform:none}
.plan-card .price{margin-top:16px}
.is-month .price .per{color:var(--ink2)}
.is-year .price .per{color:var(--mist)}
.plan-line{margin-top:12px;font-size:1rem;font-weight:500}
.is-month .plan-line{color:var(--ink2)}
.is-year .plan-line{color:var(--mist)}
.plan-line.is-strong{font-weight:800;color:inherit}
.is-year .plan-line.is-strong{color:var(--paper)}
.plan-line+.plan-line{margin-top:6px}
.plan-same{grid-column:1/-1;margin-top:6px;font:700 1rem/1.4 var(--text);color:var(--midnight);display:flex;align-items:center;gap:10px}
.plan-same::before{content:"";width:8px;height:8px;background:var(--cobalt);flex:none}

.plan-changes{display:grid;gap:22px}
.pricing .bigfact{margin-top:0;color:var(--midnight)}
.pricing .bigfact .upto{color:var(--cobalt)}
.pc-fact .sub{margin-top:10px;font-size:1.0625rem;font-weight:700}
.pc-text .h3{display:flex;align-items:center;gap:12px}
.pc-text .ic,.plan-benefits .ic,.pd-title .ic{color:var(--cobalt)}
.pc-line{margin-top:10px;font-size:1.0625rem;font-weight:500;color:var(--ink2)}
.pricing .chips li{box-shadow:inset 0 0 0 1px var(--line-l);background:#fff}

.plan-benefits{list-style:none;display:grid;gap:22px}
.plan-benefits li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:3px;align-items:start}
.plan-benefits .ic{grid-row:1/3;width:44px;height:44px;padding:10px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-l)}
.plan-benefits b{font:800 1.0625rem/1.3 var(--text)}
.plan-benefits span{font-size:.9375rem;color:var(--ink2);font-weight:500}

.pd-title{display:flex;align-items:center;gap:12px}
.dom-grid{display:grid;gap:14px;margin-top:22px}
.dom{padding:24px 22px 26px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-l)}
.dom-q{font:800 .8125rem/1.4 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--cobalt-deep)}
.dom-a{margin-top:8px;font:600 clamp(1.25rem,1.1rem + .7vw,1.625rem)/1.15 var(--display);letter-spacing:-.025em}
.ticks{list-style:none;display:grid;gap:8px;margin-top:16px}
.ticks li{display:flex;align-items:flex-start;gap:10px;font-size:1rem;font-weight:500;color:var(--ink2)}
.ticks .ic{width:22px;height:22px;color:var(--cobalt);margin-top:1px}
.dom-note{margin-top:16px;font-size:.9375rem;font-weight:600;color:var(--ink2)}

.plan-sure{list-style:none;display:grid;grid-template-columns:1fr;gap:12px}
.plan-sure li{display:flex;align-items:center;gap:10px;font:800 .9375rem/1.25 var(--text)}
.plan-sure .ic{width:26px;height:26px;padding:4px;border-radius:50%;background:var(--midnight);color:var(--acid)}

.scope-line{font-size:.9375rem;font-weight:500;color:var(--ink2);max-width:72ch}
.scope-line .link{display:inline-block;margin-left:2px}
.scope-quote{margin-top:12px;font:700 1.0625rem/1.4 var(--text);color:var(--midnight)}

.plan-cta{display:grid;gap:20px;align-items:center}
.plan-cta .pc-line{margin-top:6px}
.plan-notes{list-style:none;display:grid;gap:6px 32px;margin-top:28px;padding-left:2px;font-size:.875rem;font-weight:500;color:var(--ink2)}
.plan-notes li{display:flex;align-items:baseline;gap:10px}
.plan-notes li::before{content:"";width:6px;height:6px;background:var(--cobalt);flex:none;transform:translateY(-2px)}
@media (min-width:720px){
  .plan-row,.plan-choices{padding:36px 36px}
  .plan-choices{grid-template-columns:1fr 1fr;gap:var(--gap)}
  .plan-card{padding:32px 32px 34px}
  .plan-same{margin-top:4px}
  .plan-changes{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:48px;align-items:center}
  .plan-benefits{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap)}
  .dom-grid{grid-template-columns:1fr 1fr;gap:var(--gap)}
  .plan-sure{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
  .plan-sure li{padding:4px 0 4px 20px;border-left:1px solid var(--line-l)}
  .plan-sure li:first-child{padding-left:0;border-left:0}
  .plan-cta{grid-template-columns:minmax(0,1fr) auto;gap:32px}
  .plan-notes{grid-template-columns:1fr 1fr;margin-top:32px}
}
@media (min-width:1024px){
  .plan-row,.plan-choices{padding:44px 48px}
  .plan-card{padding:36px 40px 38px}
  .plan-notes{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ownership: quiet midnight band */
.own{border-top:1px solid var(--line-d);padding-bottom:calc(var(--section) - 16px)}
.own-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.own .sec-head{grid-column:1/-1;margin-bottom:24px}
.own-cta{margin-top:24px}
.own-list{grid-column:1/-1;list-style:none;display:grid;border-top:1px solid var(--line-d)}
.own-list li{padding:26px 0;border-bottom:1px solid var(--line-d);display:grid;gap:8px}
.own-list p{color:var(--mist);font-size:1.0625rem;font-weight:500}
@media (min-width:1024px){
  .own .sec-head{grid-column:1/span 5;margin-bottom:0}
  .own-cta{margin-top:36px}
  .own-list{grid-column:7/span 6}
  .own-list li{padding:30px 0}
  .own-list li:first-child{padding-top:0;border-top:0}
  .own-list{border-top:0}
}

/* Shawn: large left-aligned type and an open contact area */
.person{background:var(--cobalt);color:var(--paper)}
.person .kicker,.person .kicker .ic{color:var(--paper)}
.person .glance{border-top-color:rgba(247,248,242,.28)}
.person-grid{display:grid;gap:40px}
.person .sec-head,.person-copy .lead{margin-top:16px;color:rgba(247,248,242,.88)}
.promise{font:600 clamp(1.5rem,1.2rem + 1.3vw,2.25rem)/1.1 var(--display);letter-spacing:-.03em}
.email-big{display:inline-flex;align-items:center;gap:12px;margin-top:18px;padding:10px 0;font:600 clamp(1.25rem,.9rem + 1.6vw,2.375rem)/1.2 var(--display);letter-spacing:-.03em;color:var(--paper);text-decoration:none;border-bottom:2px solid var(--acid);max-width:100%;overflow-wrap:anywhere}
.email-big .ic{color:var(--acid);width:1em;height:1em}
.person-contact .actions{margin-top:28px}
.glance{margin-top:56px;padding-top:28px;border-top:1px solid var(--line-d)}
.glance-title{font:800 .8125rem/1.4 var(--text);letter-spacing:.08em;text-transform:uppercase;color:rgba(247,248,242,.88)}
.glance-list{display:grid;gap:18px;margin-top:22px}
.glance-list dt{display:flex;align-items:center;gap:8px;font:800 .8125rem/1.4 var(--text);letter-spacing:.06em;text-transform:uppercase;color:var(--acid)}
.glance-list dt::before{content:"";width:7px;height:7px;background:var(--acid)}
.glance-list dd{margin-top:6px;font-size:1.0625rem;font-weight:600}
@media (min-width:1024px){
  .person-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:calc(var(--gap)*2);align-items:start}
  .person-contact{padding-top:6px}
  .glance{margin-top:72px;padding-top:32px}
  .glance-list{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gap)}
  .glance-list>div{padding-right:16px}
}

/* quick answers */
.answers{background:var(--paper);color:var(--midnight)}
.answers .kicker{color:var(--ink2)}
.qa-list{border-top:1px solid var(--line-l);max-width:920px}
.qa{border-bottom:1px solid var(--line-l)}
.qa summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 34px;align-items:center;column-gap:20px;min-height:64px;padding:20px 0;font:600 clamp(1.125rem,1rem + .6vw,1.5rem)/1.25 var(--display);letter-spacing:-.02em}
.qa summary::-webkit-details-marker{display:none}
.qa summary:focus-visible{outline-offset:-3px}
.qa-mark{position:relative;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-l);background:#fff}
.qa-mark::before,.qa-mark::after{content:"";position:absolute;left:50%;top:50%;background:var(--cobalt);transform:translate(-50%,-50%)}
.qa-mark::before{width:14px;height:2px}
.qa-mark::after{width:2px;height:14px}
.qa[open] .qa-mark::after{opacity:0}
.qa-a{padding:0 54px 24px 0}
.qa-a p{font-size:1.0625rem;font-weight:500;color:var(--ink2);max-width:60ch}
.qa-a p:first-child{font-weight:700;color:var(--midnight)}
.qa-a p+p{margin-top:6px}
.answers-more{margin-top:32px}

/* close: midnight, one broad cobalt shape at the edge */
.close{position:relative;border-top:1px solid var(--line-d);padding-block:var(--section);text-align:center}
.close-shape{display:none}
.close .close-body{margin-inline:auto}
.close .price{justify-content:center}
.close .actions{justify-content:center}
.close .container{position:relative;z-index:1}
.close .lead{margin-top:16px;color:var(--mist)}
.close-price{margin-top:28px}
.close-price .per{color:var(--mist)}
.close-sure{margin-top:6px;font-weight:700;font-size:1.0625rem}
.close .actions{margin-top:30px}
@media (min-width:1024px){
  .close{padding-block:var(--section)}
  .close-body{max-width:760px}
}

/* footer */
.site-foot{padding:44px 0 40px;border-top:1px solid var(--line-d)}
.foot-top{display:grid;gap:14px;justify-items:start}
.foot-tag{color:var(--mist);font-size:.9375rem;font-weight:500}
.foot-mail{display:inline-block;color:var(--paper);font-weight:700;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--acid);text-decoration-thickness:2px;padding:10px 0}
.foot-legal{list-style:none;display:flex;flex-wrap:wrap;gap:4px 26px;margin-top:28px}
.foot-legal a{color:var(--paper);text-decoration:none;font-weight:700;font-size:.9375rem;padding:10px 0;display:inline-block;background:linear-gradient(var(--acid),var(--acid)) no-repeat 0 calc(100% - 7px)/0 2px}
.foot-copy{margin-top:22px;color:var(--mist);font-size:.875rem;display:flex;flex-wrap:wrap;gap:6px 24px}
.foot-line:empty{display:none}
@media (min-width:720px){.foot-top{grid-template-columns:auto 1fr auto;align-items:center;gap:28px}}

/* legal shell */
.legal-main{padding:28px 0 var(--section)}
.crumbs{display:flex;gap:10px;align-items:center;font-size:.875rem;font-weight:700;color:var(--mist);margin-bottom:22px}
.crumbs a{color:var(--paper);text-decoration:none;padding:11px 0;display:inline-block}
.crumbs .mark{width:6px;height:6px}
.legal-doc{background:var(--paper);color:var(--midnight);padding:36px 22px 52px;border-radius:14px;font:400 1.0625rem/1.75 var(--text)}
.legal-doc>*{max-width:70ch}
.legal-doc h1{font:700 clamp(2.125rem,1.6rem + 2.2vw,3.25rem)/1.02 var(--display);letter-spacing:-.04em;margin:0 0 28px}
.legal-doc h2{font:600 clamp(1.375rem,1.2rem + .8vw,1.75rem)/1.2 var(--display);letter-spacing:-.025em;margin:44px 0 12px}
.legal-doc p{margin:0 0 18px}
.legal-doc ul{padding-left:22px;margin:0 0 18px}
.legal-doc li{margin-bottom:8px}
.legal-doc a{color:var(--cobalt-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.legal-doc strong{font-weight:800}
.legal-doc .flag{display:flow-root;background:#fff;border:1.5px solid var(--cobalt);border-left-width:6px;border-radius:8px;padding:14px 18px;margin:0 0 32px;font-size:.9375rem;line-height:1.55}
.legal-ask{margin-top:32px}
@media (min-width:720px){.legal-doc{padding:64px 72px 80px}}
@media (min-width:1024px){.legal-doc{padding:80px 120px 96px}}

/* 404 */
.notfound{min-height:calc(100vh - var(--head) - 260px);display:grid;align-content:center}
.notfound .lead{margin-top:22px;color:var(--mist)}
.notfound .actions{margin-top:32px}

/* motion: everything gated on html.js and a no-preference for reduced motion; the default is a complete still page */
@media (prefers-reduced-motion:no-preference){
  html.js.arm .hero-copy,html.js.arm .hero-incl{opacity:0;transform:translateY(10px)}
  html.js.arm .stage{opacity:0;transform:translateY(10px)}
  html.js.arm.go .hero-copy,html.js.arm.go .hero-incl{opacity:1;transform:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}
  html.js.arm.go .hero-incl{transition-delay:.08s}
  html.js.arm.go .stage{opacity:1;transform:none;transition:opacity .65s var(--ease) .1s,transform .65s var(--ease) .1s}

  html.js [data-reveal].armed{opacity:0;transform:translateY(12px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
  html.js [data-reveal].armed.in{opacity:1;transform:none}
  html.js .work:nth-child(even)[data-reveal].armed{transition-delay:70ms}
  html.js .cure-list li:nth-child(2)[data-reveal].armed{transition-delay:60ms}
  html.js .cure-list li:nth-child(3)[data-reveal].armed{transition-delay:120ms}
  html.js .step:nth-child(2)[data-reveal].armed{transition-delay:60ms}
  html.js .step:nth-child(3)[data-reveal].armed{transition-delay:120ms}
  html.js .own-list li:nth-child(2)[data-reveal].armed{transition-delay:60ms}
  html.js .own-list li:nth-child(3)[data-reveal].armed{transition-delay:120ms}

  /* ambient drift: desktop pointers only, at most 5px and under half a degree */
  @media (hover:hover) and (pointer:fine) and (min-width:1024px){
    html.js.go .dev-a{animation:drift-a 12s ease-in-out 1.2s infinite}
    html.js.go .dev-b{animation:drift-b 14s ease-in-out 1.6s infinite}
    html.js.go .dev-c{animation:drift-c 10s ease-in-out 2s infinite}
  }
  @keyframes drift-a{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(-1.7deg) translateY(-5px)}}
  @keyframes drift-b{0%,100%{transform:rotate(2deg) translateY(0)}50%{transform:rotate(1.6deg) translateY(-4px)}}
  @keyframes drift-c{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(-3.4deg) translateY(-5px)}}

  .btn{transition:background-color .14s ease,border-color .14s ease,color .14s ease}
  .qa-mark::after{transition:opacity .14s ease}
  html.js .qa[open] .qa-a{animation:qa-in .12s ease-out}
  @keyframes qa-in{from{opacity:0}to{opacity:1}}

  @media (hover:hover) and (pointer:fine){
    .work .browser,.work .phone{transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
    .work-link:hover .browser,.work-link:hover .phone{transform:translateY(-3px)}
    .work-link:hover .browser{box-shadow:0 0 0 1px rgba(247,248,242,.22),inset 0 1px 0 rgba(255,255,255,.07),0 2px 6px rgba(0,0,0,.35),0 36px 60px -18px rgba(0,0,0,.75)}
    .site-nav a,.foot-legal a{transition:background-size .18s var(--ease)}
    .site-nav a:hover,.foot-legal a:hover{background-size:100% 2px}
    .u{background-size:0 2px;transition:background-size .18s var(--ease)}
    .link-arrow:hover .u,.work-link:hover .u{background-size:100% 2px}
    .link-arrow .ic,.btn .ic,.work-visit .ic{transition:transform .18s var(--ease)}
    .link-arrow:hover .ic,.btn:hover .ic,.work-link:hover .work-visit .ic{transform:translateX(3px)}
    .email-big{transition:border-color .18s ease}
    .email-big:hover{border-color:var(--paper)}
  }
}

/* the empty cell next to an odd last site becomes the visitor's own business; hidden when the count is even or on one column */
.work-next{display:none}
.next-link{display:block;height:100%;color:inherit;text-decoration:none}
.next-box{display:grid;align-content:center;justify-items:start;gap:14px;width:100%;min-height:320px;padding:40px;border-radius:10px;background:radial-gradient(120% 90% at 100% 0%,rgba(49,85,245,.35),transparent 60%),var(--raised);box-shadow:inset 0 0 0 1.5px rgba(220,250,90,.35)}
.next-kicker{display:flex;align-items:center;gap:10px;font:800 .75rem/1.4 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--mist)}
.next-title{font:700 clamp(2.25rem,3.6vw,3.5rem)/1 var(--display);letter-spacing:-.05em;color:var(--paper)}
.next-line{font:600 1.125rem/1.4 var(--text);color:var(--mist)}
.next-btn{margin-top:10px}
.plan-fine{margin-top:24px;font-size:.875rem;font-weight:500;color:var(--ink2)}
.plan-fine a{color:inherit;font-weight:800;text-underline-offset:3px}
@media (min-width:720px){.works .work-next:nth-child(even){display:block}.work-next{min-width:0}.work-next .next-box{min-height:0;aspect-ratio:1600/1060;box-sizing:border-box}}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.next-box{transition:box-shadow .2s var(--ease),transform .2s var(--ease)}.next-link:hover .next-box{box-shadow:inset 0 0 0 2px var(--acid);transform:translateY(-4px)}}

/* sticky header (Andrew): stays on screen while scrolling; anchors land below it */
.site-head{position:sticky;top:0;z-index:60}
section[id]{scroll-margin-top:calc(var(--head) + 12px)}
.bigger-jobs{margin-top:14px;font-size:.875rem;font-weight:600;opacity:.82;max-width:48ch}


/* ===== premium pass (Andrew, 2026-09-13): every section on its own surface, light with a source, texture ===== */
/* hero: a soft cobalt light behind the websites, a faint grid that fades out, a glow under the devices */
.hero{position:relative;isolation:isolate;overflow:clip}
.hero::before{content:"";position:absolute;inset:-12% -12% -12% 28%;z-index:-1;pointer-events:none;background:radial-gradient(52% 58% at 58% 52%,rgba(49,85,245,.46),transparent 70%),radial-gradient(26% 28% at 40% 30%,rgba(220,250,90,.12),transparent 72%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(247,248,242,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(247,248,242,.05) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(58% 70% at 74% 46%,#000 18%,transparent 74%);mask-image:radial-gradient(58% 70% at 74% 46%,#000 18%,transparent 74%)}
@media (max-width:1023px){.hero::before{inset:34% -30% -6% -30%}.hero::after{-webkit-mask-image:radial-gradient(80% 45% at 50% 72%,#000 10%,transparent 72%);mask-image:radial-gradient(80% 45% at 50% 72%,#000 10%,transparent 72%)}}
.stage::after{content:"";position:absolute;left:10%;right:4%;bottom:0;height:22%;z-index:0;pointer-events:none;background:radial-gradient(50% 50% at 50% 60%,rgba(49,85,245,.55),transparent 72%);filter:blur(14px)}
/* fine grain over the whole page, the texture premium print has */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}
/* buttons with a little light in them */
.btn-acid{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 12px 32px -12px rgba(220,250,90,.6)}
.btn-acid:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 16px 40px -12px rgba(220,250,90,.75)}
/* the stage leans toward the mouse on desktop */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .stage{transform:perspective(1600px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .7s cubic-bezier(.22,1,.36,1);will-change:transform}
}

/* the gallery becomes a light wall, so it no longer blends into the hero */
.gallery{background:#EEF0EA;color:var(--midnight);border-top:0}
.gallery .kicker,.gallery .kicker-n{color:var(--ink2)}
.gallery .kicker .mark{background:var(--cobalt)}
.gallery .sec-head .lead,.gallery .work-trade{color:var(--ink2)}
.gallery .work-visit{color:var(--midnight)}
.gallery .work-visit .u{background-image:linear-gradient(var(--cobalt),var(--cobalt));border-color:var(--cobalt)}
.gallery .work-visit .ic{color:var(--cobalt)}
.gallery .browser{box-shadow:0 0 0 1px rgba(8,14,33,.1),0 2px 6px rgba(8,14,33,.12),0 30px 60px -24px rgba(8,14,33,.45)}
.gallery .phone{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 2px 6px rgba(8,14,33,.25),0 26px 48px -16px rgba(8,14,33,.5)}

/* how it works goes dark, so it no longer blends into the light price section */
.how{background:var(--midnight);color:var(--paper)}
.how .kicker{color:var(--mist)}
.how .kicker .mark{background:var(--acid)}
.how .sec-head .lead,.how .step p{color:var(--mist)}
.how .step-n{color:var(--paper)}
.how .step{border-color:var(--line-d)}
.how .steps,.how .step{border-top-color:var(--acid)}
.how .btn-ink{background:var(--paper);color:var(--midnight);border-color:var(--paper)}
.how :focus-visible{outline-color:var(--acid)}
.pricing{border-top:0}

/* web address: keeping your own is the main message */
.dom-main{padding:26px 26px 28px;border-radius:14px;background:#fff;box-shadow:0 0 0 1.5px var(--cobalt),0 18px 40px -24px rgba(49,85,245,.45)}
.dom-main .dom-a{font:600 clamp(1.375rem,1.1rem + 1vw,1.875rem)/1.15 var(--display);letter-spacing:-.03em}
.dom-main .ticks{margin-top:14px}
.pricing .dom-note{margin-top:16px}
.plan-domain .dom-main{margin-top:20px}