: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;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --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 homepage's, down to the pill it becomes on scroll */
#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}
/* the homepage's flask, drawn by logo-film.ts and sized off the wordmark */
.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}

/* the pill: green glossy for the action, white glossy beside it */
@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}
.pill.big{width:100%;padding:14px 20px;font-size:16px}

/* the green panel the homepage opens on, carrying the promise */
.hero{padding:clamp(8px,1.2vw,14px) clamp(8px,1.2vw,14px) 0}
.panel{border-radius:clamp(14px,1.8vw,22px);text-align:center;color:var(--leaf);
  padding:clamp(56px,6vw,92px) var(--gut) 210px;
  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;margin-inline:auto;text-wrap:balance}
.panel h1 em{display:block;font-style:normal;color:#fff;text-shadow:0 .06em 0 #2C4A07;text-wrap:balance}
.panel .sub{margin:18px auto 0;max-width:54ch;font-size:19px;color:rgba(23,38,12,.78)}
.promise{display:inline-flex;align-items:center;gap:10px;margin-top:24px;padding:10px 14px 10px 20px;border-radius:999px;font-size:17px;font-weight:600;color:var(--leaf);
  background:rgba(255,255,255,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 0 0 1px rgba(23,38,12,.12),0 4px 18px rgba(23,38,12,.10)}
.panel .i{background:rgba(255,255,255,.6);border-color:rgba(23,38,12,.35);color:var(--leaf)}
.panel ::selection{background:#fff;color:var(--leaf)}

/* two plans, standing on the panel */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:960px;margin:-150px auto 0;align-items:stretch}
.plan{background:#fff;border-radius:20px;padding:30px 32px 26px;display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(19,35,56,.06),0 12px 40px rgba(19,35,56,.10),0 0 0 1px rgba(19,35,56,.08)}
.plan.pick{box-shadow:0 0 0 6px rgba(118,185,0,.18),0 12px 40px rgba(19,35,56,.12),0 0 0 2px var(--nv)}
.plan h2{font-size:22px;font-weight:600;letter-spacing:-.02em}
.price{display:flex;align-items:baseline;gap:6px;margin:14px 0 0}
.price b{font-size:52px;font-weight:650;letter-spacing:-.045em;line-height:1}
.price span{color:var(--ink-3);font-size:15px}
.sec{margin:22px 0 10px;font-size:14.5px;font-weight:600;color:var(--ink)}
.kv{margin-top:8px;font-size:15px;color:var(--ink-2)}
.kv .i{margin-left:2px;vertical-align:-3px}
.kv b{color:var(--ink);font-weight:600}
.inc.use{margin-top:16px}
.inc{list-style:none;display:grid;gap:8px;font-size:15px;line-height:1.4;color:var(--ink)}
.inc li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start}
.inc li::before{content:'';width:18px;height:18px;margin-top:1px;background:var(--nv-d);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.5l3.2 3.2L14 5.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.5l3.2 3.2L14 5.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.inc li.off{color:var(--ink-3)}
.inc li.off::before{-webkit-mask:none;mask:none;width:10px;height:2px;margin:9px 0 0 4px;border-radius:1px;background:var(--line-2)}
.plan .pill.big{margin-top:26px}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.run-def{max-width:960px;margin:26px auto 0;padding:0 4px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.run-def b{color:var(--ink);font-weight:600;margin-right:4px}
.ent{max-width:960px;margin:20px auto 0;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px 22px 18px 28px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.ent p{font-size:15.5px;color:var(--ink-2)}
.ent b{color:var(--ink);font-weight:600;margin-right:8px}

/* compare plans */
.compare{max-width:960px;margin:72px auto 0}
.compare h2{font-size:30px;font-weight:650;letter-spacing:-.025em;margin-bottom:18px;padding-left:28px}
.tbl{background:#fff;padding:4px 28px 8px}
table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:16px}
th,td{padding:15px 16px 15px 0;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle;font-weight:400;color:var(--ink)}
thead th{font-weight:600;border-bottom:1.5px solid var(--line-2)}
thead th:first-child{width:39%}
thead th:nth-child(2){width:28%}
tr.g th,tr.price-row th,tr.price-row td,tr.usage-row th{font-weight:600}
tr.go th,tr.go td{border-bottom:0;padding-top:18px;padding-bottom:18px}
tr.go a{font-weight:600}
tr.go a:hover{color:var(--nv-d)}
th .i{margin-left:4px;vertical-align:-3px}

.said{margin-top:8px;font-size:13.5px;line-height:1.4;color:var(--ink-2)}
.said:empty{display:none}

/* the eye: one sentence behind one line; hover or focus opens it, a click pins it */
.i{position:relative;display:inline-block;width:16px;height:16px;padding:0;border:1.5px solid var(--line-2);border-radius:50%;
  background:#fff;color:var(--ink-3);cursor:pointer;flex:none;vertical-align:middle;transition:border-color .15s,color .15s}
.i::before,.i::after{content:'';position:absolute;left:50%;width:2px;margin-left:-1px;border-radius:1px;background:currentColor}
.i::before{top:2.5px;height:2px}
.i::after{top:5.5px;height:5.5px}
button.i:hover,.i:focus-visible,.i.on{border-color:var(--ink-2);color:var(--ink)}
/* Hidden is display:none, not visibility:hidden, because an invisible box still widens the page
   on a phone. --dx is set by the script when an open tip would cross the screen edge. */
.i .say{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(calc(-50% + var(--dx, 0px)));
  width:min(280px, calc(100vw - 24px));max-width:calc(100vw - 24px);padding:11px 14px;border-radius:10px;
  background:var(--ink);color:#fff;font:400 13.5px/1.45 var(--disp);text-align:left;box-shadow:0 8px 24px rgba(19,35,56,.22);
  display:none;z-index:30;pointer-events:none}
.i .say::after{content:'';position:absolute;top:100%;left:50%;margin-left:calc(-6px - var(--dx, 0px));border:6px solid transparent;border-top-color:var(--ink)}
.i:hover .say,.i:focus-visible .say,.i.on .say{display:block}



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){.plans{grid-template-columns:1fr;max-width:520px}.nav-inc{display:none}}
@media(max-width:560px){
  .promise{font-size:15px;padding:10px 12px 10px 16px;border-radius:16px;text-align:left;text-wrap:balance}
  .nav-in{gap:12px}.logo{font-size:24px}.nav-l{gap:4px;font-size:14px}.nav-l a[href="/#research"]{display:none}
  .f-in{flex-wrap:wrap}.f-l{margin-left:0;flex-wrap:wrap;gap:10px 16px}
}