:root{
  --ink:#132338; --ink-2:#3F5570; --ink-3:#77899E;
  --line:#D6E0EB; --line-2:#C2D1E0;
  --nv:#76B900; --nv-d:#639B00; --leaf:#17260C;
  --disp:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --wrap:1220px; --gut:clamp(20px,5vw,64px);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:#fff;color:var(--ink);font-family:var(--disp);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;position:relative}
body::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(19,35,56,.13) 1px,transparent 1.4px);background-size:12px 12px}
body>*{position:relative;z-index:1}
a{color:inherit;text-decoration:none}
::selection{background:var(--nv);color:#fff}
:focus-visible{outline:2px solid var(--nv);outline-offset:3px}
.w{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}

/* nav: the pricing page's, which is the homepage's */
#nav{position:sticky;top:0;z-index:60;height:64px;transition:padding .5s cubic-bezier(.25,.46,.45,.94)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);height:64px;display:flex;align-items:center;gap:34px;
  transition:max-width .5s cubic-bezier(.25,.46,.45,.94),height .5s,border-radius .5s,background-color .3s,box-shadow .3s}
#nav.s{padding:8px 16px 0}
#nav.s .nav-in{max-width:1040px;height:52px;padding:0 8px 0 14px;border-radius:16px;background:rgba(255,255,255,.74);
  backdrop-filter:blur(16px) saturate(1.6);-webkit-backdrop-filter:blur(16px) saturate(1.6);
  box-shadow:0 2px 20px rgba(19,35,56,.08),0 1px 2px rgba(19,35,56,.08),0 0 0 1px rgba(19,35,56,.08)}
.logo{display:flex;align-items:center;gap:6px;font-size:30px;line-height:1}
.logo img{width:1em;height:1em;image-rendering:pixelated}
.logo .wn{font-family:'Jersey 10',var(--disp);font-size:1.33em;letter-spacing:.01em}
.fslot{position:relative;display:inline-block;width:1em;height:1em;flex:0 0 auto}
#logofx{position:absolute;left:-.1em;top:50%;margin-top:-.7em;pointer-events:none;z-index:2;image-rendering:pixelated}
.nav-inc{display:flex;margin-left:-22px}
.nav-inc img{height:38px;opacity:.85}
.nav-l{display:flex;gap:14px;margin-left:auto;font-size:15px;color:var(--ink-2)}
.nav-l a{padding:8px 10px;border-radius:8px;transition:background-color .2s,color .2s}
.nav-l a:hover,.nav-l a[aria-current]{background:rgba(118,185,0,.1);color:var(--ink)}
#nav.s .nav-inc{opacity:0;pointer-events:none}

@property --g1{syntax:'<color>';inherits:false;initial-value:#8FCC1F}
@property --g2{syntax:'<color>';inherits:false;initial-value:#76B900}
.pill{--g1:#8FCC1F;--g2:#76B900;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;
  padding:9px 18px;font:600 14.5px/1.2 var(--disp);color:#fff;cursor:pointer;background:linear-gradient(180deg,var(--g1),var(--g2));
  box-shadow:0 0 0 5px rgba(118,185,0,.18),0 1px 2px rgba(19,35,56,.1),0 0 0 1px rgba(79,118,12,.45);
  transition:--g1 .2s,--g2 .2s,transform .16s cubic-bezier(.25,.46,.45,.94)}
.pill:hover{--g2:#639B00}
.pill:active{--g1:#76B900;--g2:#4F7A00;transform:translateY(1px) scale(.98)}
.pill.white{--g1:#FFFFFF;--g2:#EEF2E7;color:var(--ink);box-shadow:0 0 0 5px rgba(19,35,56,.05),0 1px 2px rgba(19,35,56,.1),0 0 0 1px rgba(19,35,56,.16)}
.pill.white:hover{--g2:#E0E8D2}

.hero{padding:clamp(8px,1.2vw,14px) clamp(8px,1.2vw,14px) 0}
.panel{min-height:min(640px,calc(100svh - 150px));display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  border-radius:clamp(14px,1.8vw,22px);text-align:center;color:var(--leaf);padding:clamp(64px,7vw,110px) var(--gut) 190px;
  background:url('/assets/hero-ground-pixel.png') center/cover no-repeat,#6AA210;image-rendering:pixelated}
.panel h1{font-size:clamp(34px,4.4vw,58px);font-weight:650;letter-spacing:-.03em;line-height:1.06;max-width:20ch;text-wrap:balance}
.panel h1 em{display:block;font-style:normal;color:#fff;text-shadow:0 .06em 0 #2C4A07}
.panel .sub{margin:18px auto 0;max-width:46ch;font-size:19px;color:rgba(23,38,12,.78);text-wrap:balance}
.panel ::selection{background:#fff;color:var(--leaf)}
/* on the green, the action wears the homepage hero's white plate and hard bottom edge */
.ways{display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:34px}
.go{display:inline-flex;align-items:center;justify-content:center;padding:16px 30px;font:600 17px/1.2 var(--disp);color:#112006;
  background:#fff;border:1px solid #D6DECB;border-radius:8px;box-shadow:0 2px 0 #C3CDB5;transition:background .28s ease,transform .12s,box-shadow .28s ease}
.go:hover{background:#F4F7EE;transform:translateY(-1px)}
.go:active{transform:translateY(1px);box-shadow:0 1px 0 #C3CDB5}
.mail{font-size:17px;font-weight:500;color:var(--leaf);text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:5px;text-decoration-color:rgba(23,38,12,.35);transition:text-decoration-color .2s}
.mail:hover{text-decoration-color:var(--leaf)}

footer{margin-top:40px;border-top:1px solid var(--line);padding:26px 0 40px;font-size:14px;color:var(--ink-3)}
.f-in{display:flex;align-items:center;gap:18px}
.f-in .logo{font-size:20px;color:var(--ink)}
.f-l{margin-left:auto;display:flex;gap:18px}
.f-l a:hover{color:var(--ink)}

@media(max-width:940px){.nav-l{display:none}.nav-in>.pill{margin-left:auto}}
@media(max-width:900px){.nav-inc{display:none}}
@media(max-width:560px){
  .nav-in{gap:12px}.logo{font-size:24px}
  .panel{text-align:left;align-items:stretch;padding-bottom:150px}
  .panel .sub{margin-left:0;font-size:17px}
  .ways{align-items:stretch;gap:18px}.go{padding:14px 18px;font-size:16px}.mail{align-self:flex-start;font-size:16px}
  .f-in{flex-wrap:wrap}.f-l{margin-left:0;flex-wrap:wrap;gap:10px 16px}
}