/* bold pass: minimal hero, loud CTAs */
.herob{background:radial-gradient(900px 520px at 85% -10%,#c9f5da 0,transparent 60%),radial-gradient(700px 480px at -5% 30%,#d7f3e6 0,transparent 55%),#eefaf2}
.hero{padding:64px 0 0;text-align:center}
.hero .ai-chip{margin-inline:auto}
.hero .eyebrow{display:none}
.hero h1{font-size:clamp(34px,5vw,68px);line-height:1;letter-spacing:-.045em;font-weight:900;max-width:18ch;margin:22px auto 0;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--brand);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.14em;background:#3ecf7c;border-radius:99px;z-index:-1;opacity:.55}
html body .hero .hero-lede{font-size:clamp(19px,2.2vw,26px);color:#0a0a0a;max-width:40ch;margin:26px auto 0;font-weight:500;letter-spacing:-.01em}
.hero-form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:34px auto 0;max-width:560px}
html body .hero-form input{background:#fff!important;box-shadow:none!important;flex:1 1 260px;min-height:62px;border-radius:99px;border:2px solid var(--ink);padding:0 24px;font:500 18px/1 inherit;font-family:inherit;background:#fff;color:var(--ink)}
.hero-form input:focus-visible{outline:3px solid #3ecf7c;outline-offset:2px}
html body .hero-form .button-primary{min-height:62px;padding:0 34px;font-size:19px;font-weight:800;background:#0a0a0a!important;color:#fff!important;box-shadow:0 10px 0 -2px #3ecf7c,0 18px 36px rgba(0,129,70,.3);transition:transform .15s,box-shadow .15s}
.hero-form .button-primary:hover{transform:translateY(-2px);filter:none}
.hero-form .button-primary:active{transform:translateY(3px);box-shadow:0 4px 0 -2px #3ecf7c}
.hero-proof{display:flex;gap:10px 22px;justify-content:center;flex-wrap:wrap;margin:18px 0 0;font-size:15px;font-weight:600;color:#32403a}
.hero-proof span::before{content:"";display:inline-block;width:.6em;height:.6em;border-radius:50%;background:var(--brand);margin-right:8px}
.hero .stage{margin-top:56px}
/* louder CTA everywhere */
html body .topbar .nav-action{background:#0a0a0a!important;color:#fff!important;font-weight:800!important;box-shadow:0 4px 0 #3ecf7c}
.nav-action:hover{transform:translateY(-1px)}
.cta-band{background:var(--ink);color:#fff;border-radius:28px;padding:34px 38px}
.cta-band h3{font-size:clamp(26px,3.4vw,40px);letter-spacing:-.03em}
.cta-band p{color:#b9c9c0}
.cta-band .button-primary{background:#3ecf7c;color:#06180e;font-weight:800}
.cta-band .text-link{color:#fff}
.plan.pick{background:var(--ink);color:#fff;transform:scale(1.04);box-shadow:0 24px 60px rgba(0,129,70,.28);position:relative;border-color:#3ecf7c}
.plan.pick::before{content:"Most chosen";position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:#3ecf7c;color:#06180e;font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:99px;white-space:nowrap}
.plan.pick p{color:#c8d5ce}
/* sticky bottom CTA */
#fcta{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;justify-content:center;padding:12px max(16px,env(safe-area-inset-left,0px)) calc(12px + env(safe-area-inset-bottom,0px));transform:translateY(120%);transition:transform .3s;pointer-events:none}
#fcta.on{transform:none}
#fcta a.go{pointer-events:auto;display:flex;align-items:center;gap:14px;background:var(--ink);color:#fff;text-decoration:none;border-radius:99px;padding:10px 10px 10px 24px;font-weight:700;box-shadow:0 14px 40px rgba(0,0,0,.3)}
#fcta a.go b{background:#3ecf7c;color:#06180e;border-radius:99px;padding:12px 22px;font-weight:800}
@media (prefers-reduced-motion:reduce){#fcta,html body .hero-form .button-primary{transition:none}}
/* gradient plan cards */
html body .plans4w .plan,html body .plans4 .plan{border:1px solid rgba(255,255,255,.7);background-image:linear-gradient(160deg,#ffffff 0%,#eaf7ef 100%)!important}
html body .plans4w .plan:nth-child(2),html body .plans4 .plan:nth-child(2){background-image:linear-gradient(160deg,#f3fbf6 0%,#c4edd5 100%)!important}
html body .plans4w .plan:nth-child(4),html body .plans4 .plan:nth-child(4){background-image:linear-gradient(160deg,#f1f5fb 0%,#cfe0f5 100%)!important}
html body .plans4w .plan.pick,html body .plans4 .plan.pick{background-image:linear-gradient(155deg,#14a35f 0%,#0f6b3e 48%,#0a2a1c 100%)!important;color:#fff;border-color:#3ecf7c!important}
html body .plan.pick h3,html body .plan.pick p,html body .plan.pick li,html body .plan.pick small{color:#fff!important;-webkit-text-fill-color:#fff!important}
html body .plan.pick li::before,html body .plan.pick li svg{color:#3ecf7c!important}
html body .plan.pick .amount,html body .plan.pick .amount small{background-image:none!important;-webkit-text-fill-color:#fff!important;color:#fff!important}
html body .plan.pick .plan-cta{background:#3ecf7c!important;background-image:none!important;border-color:#3ecf7c!important;color:#06180e!important}
html body .plan.pick .pill{display:none!important}
html body .plan.pick li::before{filter:brightness(0) invert(1) opacity(.9)}
html body .cta-band{background:linear-gradient(135deg,#0f2a1f,#0a1d15)!important;color:#fff!important;box-shadow:0 20px 50px rgba(10,29,21,.3)!important}
html body .cta-band h3,html body .cta-band p{color:#fff!important;-webkit-text-fill-color:#fff!important}
html body .cta-band p{color:#b9c9c0!important;-webkit-text-fill-color:#b9c9c0!important}
html body .cta-band .button-primary{background:#3ecf7c!important;color:#06180e!important}
html body .cta-band .text-link{color:#fff!important;border-color:#3ecf7c}
/* footer gutter on phones */
@media (max-width:700px){html body .footer .footer-main,html body .footer .footer-bottom{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}}
/* closing section: the loudest call to act */
html body .closing{background:linear-gradient(135deg,#0f2a1f 0%,#0a1d15 100%)!important;color:#fff;padding-block:72px}
html body .closing h2,html body .closing .price-line,html body .closing .eyebrow,html body .closing .small{color:#fff!important;-webkit-text-fill-color:#fff!important}
html body .closing .eyebrow,html body .closing .price-line,html body .closing .small{color:#b9c9c0!important;-webkit-text-fill-color:#b9c9c0!important}
html body .closing h2 em{color:#3ecf7c!important;-webkit-text-fill-color:#3ecf7c!important}
html body .closing form{background:transparent!important;box-shadow:none!important;border:0!important;display:flex;gap:10px;flex-wrap:wrap;padding:0!important}
html body .closing input{flex:1 1 240px;min-height:58px;border-radius:99px;border:0!important;padding:0 24px;background:#fff!important;color:#0a0a0a;box-shadow:none!important;font:500 17px inherit;font-family:inherit}
html body .closing .button-primary{min-height:58px;padding:0 30px;background:#3ecf7c!important;color:#06180e!important;font-weight:800;box-shadow:0 8px 0 -2px #1f9d58}
#pricing-teaser .button-primary{background:#0a0a0a!important;color:#fff!important;font-weight:800;box-shadow:0 6px 0 #3ecf7c}
/* tables: no boxes, one soft gradient band per row */
html body .tblwrap{border:0!important;box-shadow:none!important;background:transparent!important;border-radius:22px;overflow:hidden}
html body .tbl{border-collapse:separate;border-spacing:0 6px;background:transparent!important}
html body .tbl thead tr{background:linear-gradient(90deg,#0f2a1f 0%,#14804b 100%)}
html body .tbl thead th{background:transparent!important;color:#fff!important;border:0!important;padding:14px 18px;font-size:12px;letter-spacing:.08em}
html body .tbl tbody tr{background:linear-gradient(90deg,#ffffff 0%,#e4f6eb 100%)}
html body .tbl tbody tr:nth-child(even){background:linear-gradient(90deg,#f1fbf5 0%,#cfeedb 100%)}
html body .tbl td,html body .tbl tbody th{background:transparent!important;border:0!important;padding:15px 18px}
html body .tbl tbody td:first-child,html body .tbl tbody th:first-child{font-weight:700}

/* hero mockup: show the whole laptop, phone sits beside it, nothing clipped */
html body .stage{padding-bottom:clamp(40px,6vw,90px)!important;overflow:visible}
html body .stage .mac{width:78%!important;margin:0 auto 0 0!important;contain:none!important}
html body .stage .phone.float{width:19%!important;right:1%!important;bottom:0!important;contain:none!important}
@media (max-width:640px){
 html body .stage .mac{width:90%!important}
 html body .stage .phone.float{width:25%!important;right:0!important;bottom:-4%!important}
 html body .stage{padding-bottom:70px!important}
}

/* ---- tighter rhythm: no big empty gaps between headings, text and sections ---- */
html body section:not(.hero):not(.closing){padding-block:60px!important}
html body section+section{padding-top:0!important}
html body .head2{gap:10px 40px!important;margin-bottom:26px!important;align-items:start!important}
html body .head2 h2,html body section h2{margin:0 0 8px!important;line-height:1.05}
html body .head2 p,html body section>.wrap>p{margin:0!important}
html body .eyebrow{margin:0 0 10px!important}
html body .hero{padding-bottom:0!important}
html body .hero .stage{margin-top:32px!important}
html body .hero-lede{margin:12px auto 18px!important}
html body .hero-proof{margin-top:12px!important}
html body .ticker{margin-block:0!important}
html body .tabs{margin-bottom:16px!important}
html body .cap{margin-top:14px!important}
html body .cta-band{margin-block:28px!important}
html body .closing{padding-block:48px!important}
html body .mods,html body .plans4{gap:12px!important}
@media (max-width:700px){html body section:not(.hero):not(.closing){padding-block:38px!important}html body .head2{margin-bottom:18px!important}}

/* ---- motion (all off for people who ask for less motion) ---- */
@keyframes skUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes skFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes skPop{0%{transform:scale(.96)}60%{transform:scale(1.03)}100%{transform:scale(1)}}
@keyframes skShine{from{background-position:-200% 0}to{background-position:200% 0}}
@keyframes skPulse{0%{box-shadow:0 0 0 0 rgba(46,204,113,.5)}100%{box-shadow:0 0 0 16px rgba(46,204,113,0)}}
@media (prefers-reduced-motion:no-preference){
 .hero h1{animation:skUp .7s cubic-bezier(.2,.7,.2,1) both}
 .hero .hero-lede{animation:skUp .7s .08s cubic-bezier(.2,.7,.2,1) both}
 .hero .hero-form{animation:skUp .7s .16s cubic-bezier(.2,.7,.2,1) both}
 .hero .hero-proof{animation:skUp .7s .24s cubic-bezier(.2,.7,.2,1) both}
 .hero .stage .mac{animation:skUp .9s .3s cubic-bezier(.2,.7,.2,1) both}
 .hero .stage .phone.float{animation:skUp .9s .5s cubic-bezier(.2,.7,.2,1) both,skFloat 6s 1.6s ease-in-out infinite}
 .hero em,.closing em{background:linear-gradient(90deg,#14a35f,#46e27f,#14a35f);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:skShine 6s linear infinite}
 .hero-form button,.cta-band .btn,.closing button,#fcta a{animation:skPulse 2.4s ease-out infinite}
 a,button{transition:transform .18s,box-shadow .18s,background-color .18s}
 .hero-form button:hover,.cta-actions a:hover,.nav-action:hover,#fcta a:hover{transform:translateY(-2px) scale(1.03)}
 .plan,.mod,.tile,.step{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
 .plan:hover,.mod:hover,.tile:hover,.step:hover{transform:translateY(-6px)}
 .ticker-track{will-change:transform}
 .rv{transition-duration:.55s!important}
}
html body section:not(.hero):not(.closing){padding-block:40px!important}
html body section.intro{padding-bottom:12px!important}
html body section.intro .head2{margin-bottom:0!important}
@media (max-width:700px){html body section:not(.hero):not(.closing){padding-block:28px!important}}

/* ---- wrapping: no lonely last words ---- */
html body h1,html body h2,html body h3,html body .cap h3,html body .cap p,html body .hero-lede,html body .cta-band p,html body .closing p{text-wrap:balance}
html body p,html body li,html body summary{text-wrap:pretty}

/* ---- primary buttons on dark bands: clean, no white halo ---- */
html body .cta-band a,html body .cta-band .btn,html body .closing button,html body .closing a,html body #fcta a{box-shadow:none!important;filter:none!important;animation:none!important;outline:0}
html body .cta-band .btn:hover,html body .cta-band a:hover,html body #fcta a:hover{box-shadow:0 8px 22px rgba(46,204,113,.35)!important}

/* ---- laptops: always fit the screen, so you see the whole MacBook ---- */
html body .show .mac{max-width:min(100%,calc((100vh - 220px)*1.55))!important;margin-inline:auto}
html body .cta-band .button-primary,html body .closing .button-primary,html body .button-primary.glow{box-shadow:none!important;filter:none!important;animation:none!important;text-shadow:none!important}
html body .cta-band .button-primary:hover{box-shadow:0 8px 22px rgba(46,204,113,.35)!important}
html body .cta-band .button-primary::before,html body .cta-band .button-primary::after{display:none!important}
html body .show .mac{max-width:min(100%,max(560px,calc((100vh - 340px)*1.5)))!important}

/* features: every laptop the same size, text and laptop side by side */
html body .split2{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)!important;gap:40px!important;align-items:center!important}
html body .split2.rev,html body .split2.flip{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)!important}
html body .split2 .mac{width:100%!important;max-width:none!important;margin:0!important}
@media (max-width:860px){html body .split2,html body .split2.rev,html body .split2.flip{grid-template-columns:1fr!important;gap:22px!important}}

/* ---- laptop: whole machine, screen then base ---- */
html body .mac{filter:drop-shadow(0 22px 20px rgba(30,60,45,.2))!important}

/* laptop must never be wider than its box: lid slightly narrower, base exactly the box width, nothing pokes out or gets clipped */
html body .mac{box-sizing:border-box;max-width:100%;overflow:visible}
html body .mac .lid{width:93%!important;margin-inline:auto!important}
html body .mac .deck{width:100%!important;margin:0!important;border-radius:0 0 18px 18px/0 0 10px 10px}
html body .split2 .mac,html body .show .mac{margin-inline:auto!important}

/* hero: phone overlaps the laptop's corner (intended); laptop is otherwise whole */
html body .stage .mac{margin:0!important;width:86%!important}
html body .stage .phone.float{width:22%!important;right:0!important;bottom:0!important}
@media (max-width:640px){html body .stage .mac{width:100%!important}html body .stage .phone.float{width:32%!important;right:2%!important;bottom:-4%!important}}