:root{
  --ink:#0b0d0c; --ink-2:#4e5451; --ink-3:#818885;
  --paper:#ffffff; --band:#f4f7f5; --line:#e4eae7; --line-2:#eef2f0;
  --night:#0b100e; --night-2:#141a17; --night-line:#232b27;
  --night-ink:#f4f7f5; --night-ink-2:#9aa39f;
  --brand:#0f5c48; --brand-2:#17886a; --brand-3:#2bbf94;
  --tint:#e7f2ee; --tint-2:#d5e9e2;
  --max:1140px; --ease:cubic-bezier(.22,.7,.2,1);
  --sh-1:0 1px 2px rgba(11,16,14,.05), 0 6px 16px -8px rgba(11,16,14,.10);
  --sh-2:0 1px 2px rgba(11,16,14,.06), 0 14px 34px -14px rgba(11,16,14,.16);
  --sh-3:0 2px 4px rgba(11,16,14,.06), 0 26px 60px -20px rgba(11,16,14,.22);
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#f2f6f4; --ink-2:#9aa39f; --ink-3:#77817d;
    --paper:#0a0e0c; --band:#0f1512; --line:#1f2724; --line-2:#181e1b;
    --tint:#12211c; --tint-2:#162a23;
    --brand:#2bbf94; --brand-2:#43d6ab; --brand-3:#6fe6c4;
    --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 14px 34px -14px rgba(0,0,0,.6);
    --sh-3:0 26px 60px -20px rgba(0,0,0,.7);
  }
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:"Inter",ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
  font-feature-settings:"cv05" 1,"ss03" 1}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}
.narrow{max-width:780px; margin-inline:auto}
a{color:inherit}
img,svg{display:block; max-width:100%}

/* nav: floating pill */
.navbar{position:sticky; top:14px; z-index:60; padding:0 16px; margin-bottom:-68px}
.navpill{max-width:var(--max); margin:0 auto; height:60px; display:flex; align-items:center;
  justify-content:space-between; gap:18px; padding:0 10px 0 18px; border-radius:999px;
  background:color-mix(in srgb,var(--paper) 82%,transparent); border:1px solid var(--line);
  backdrop-filter:saturate(180%) blur(16px); box-shadow:var(--sh-1)}
.mark{display:flex; align-items:center; gap:9px; font-weight:600; font-size:16px;
  letter-spacing:-0.02em; text-decoration:none}
.mark i{width:22px; height:22px; border-radius:7px; flex:none;
  background:linear-gradient(145deg,var(--brand-3),var(--brand)); box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.navlinks{display:flex; align-items:center; gap:24px}
.navlinks a{font-size:14.5px; color:var(--ink-2); text-decoration:none; transition:color .15s}
.navlinks a:hover{color:var(--ink)}
.navlinks a.btn-primary{color:#fff}
@media (prefers-color-scheme: dark){ .navlinks a.btn-primary{color:#04100c} }
.navlinks a.btn-primary:hover{color:#fff}
@media (prefers-color-scheme: dark){ .navlinks a.btn-primary:hover{color:#04100c} }
@media(max-width:760px){ .navlinks a.hide-sm{display:none} }

/* type */
h1{font-size:clamp(38px,5.6vw,66px); line-height:1.04; letter-spacing:-0.036em; font-weight:600; margin:0 0 20px}
h1 .accent{background:linear-gradient(100deg,var(--brand-2),var(--brand-3));
  -webkit-background-clip:text; background-clip:text; color:transparent}
h2{font-size:clamp(27px,3.4vw,44px); line-height:1.08; letter-spacing:-0.03em; font-weight:600; margin:0 0 16px}
h2 .accent{color:var(--brand)}
h3{font-size:18.5px; line-height:1.35; letter-spacing:-0.015em; font-weight:600; margin:0 0 6px}
.eyebrow{font-size:12.5px; font-weight:600; letter-spacing:0.13em; text-transform:uppercase;
  color:var(--brand); margin:0 0 14px}
.lede{font-size:clamp(17px,1.6vw,19.5px); line-height:1.55; color:var(--ink-2); margin:0 0 28px}
p{margin:0 0 15px}
.center{text-align:center}
.center .lede,.center p{margin-inline:auto; max-width:60ch}

/* pills + buttons */
.pill{display:inline-flex; align-items:center; gap:9px; padding:6px 14px 6px 7px; border-radius:999px;
  background:var(--tint); border:1px solid var(--line); font-size:13.5px; color:var(--ink-2); margin-bottom:22px}
.pill b{background:var(--brand); color:#fff; font-size:11px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; padding:3px 9px; border-radius:999px}
@media (prefers-color-scheme: dark){ .pill b{color:#04100c} }
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 24px;
  border-radius:11px; font-size:15.5px; font-weight:600; letter-spacing:-0.01em; text-decoration:none;
  transition:transform .12s var(--ease), box-shadow .2s, background .15s; white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(180deg,var(--brand-2),var(--brand)); color:#fff;
  box-shadow:var(--sh-2), inset 0 1px 0 rgba(255,255,255,.22)}
@media (prefers-color-scheme: dark){ .btn-primary{color:#04100c} }
.btn-primary:hover{box-shadow:var(--sh-3), inset 0 1px 0 rgba(255,255,255,.28)}
.btn-ghost{border:1px solid var(--line); background:var(--paper); box-shadow:var(--sh-1)}
.btn-ghost:hover{background:var(--band)}
.trust{font-size:13.5px; color:var(--ink-3); margin:16px 0 0}
.trust span{margin:0 4px}

/* hero */
.hero{position:relative; padding:104px 0 clamp(52px,6vw,84px); overflow:hidden}
.hero::before{content:""; position:absolute; inset:-220px 0 auto; height:620px; z-index:-1;
  background:
    radial-gradient(760px 340px at 50% 8%, color-mix(in srgb,var(--brand-3) 20%,transparent), transparent 70%),
    radial-gradient(520px 300px at 82% 22%, color-mix(in srgb,var(--brand) 12%,transparent), transparent 70%);
}
.hero .cta-row{display:flex; gap:11px; justify-content:center; flex-wrap:wrap}

/* hero input */
.finder{max-width:620px; margin:0 auto 14px; background:var(--paper); border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--sh-3); padding:9px 9px 9px 18px; display:flex; align-items:center; gap:10px}
.finder input{flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--ink);
  font:400 16px/1.5 inherit; padding:11px 0}
.finder input::placeholder{color:var(--ink-3)}
.finder .btn{padding:12px 18px; font-size:15px}
.chips{display:flex; gap:7px; justify-content:center; flex-wrap:wrap; margin:0 0 4px}
.chips span{font-size:13px; color:var(--ink-2); background:var(--band); border:1px solid var(--line-2);
  padding:6px 12px; border-radius:999px}

/* the stage */
.stage{max-width:960px; margin:clamp(34px,4vw,52px) auto 0; background:var(--band);
  border:1px solid var(--line); border-radius:20px; padding:16px; box-shadow:var(--sh-3)}
.stage-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 8px 13px}
.stage-head b{font-size:14.5px}
.stage-head span{font-size:13px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:11px}
@media(max-width:760px){ .cards{grid-template-columns:1fr 1fr} }
@media(max-width:480px){ .cards{grid-template-columns:1fr} }
.card{background:var(--paper); border:1px solid var(--line); border-radius:13px; padding:14px 15px;
  box-shadow:var(--sh-1), inset 0 1px 0 rgba(255,255,255,.6); text-align:left}
@media (prefers-color-scheme: dark){ .card{box-shadow:var(--sh-1)} }
.js .card{opacity:0; transform:translateY(10px) scale(.985);
  transition:opacity .45s var(--ease), transform .45s var(--ease)}
.js .card.in{opacity:1; transform:none}
.card .k{font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 7px}
.card .v{font-size:13.5px; line-height:1.45; margin:0; color:var(--ink)}
.card.span2{grid-column:span 2}
@media(max-width:480px){ .card.span2{grid-column:span 1} }
.quote{font-family:ui-serif,Georgia,serif; font-size:15px; line-height:1.45}
.sw{display:flex; gap:6px; margin-top:6px}
.sw i{width:22px; height:22px; border-radius:7px; display:block; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.days{display:flex; gap:5px; flex-wrap:wrap; margin-top:6px}
.days span{font-size:11px; padding:3px 8px; border-radius:6px; background:var(--band); color:var(--ink-2)}
.mini{border:1px solid var(--line); border-radius:8px; padding:9px; margin-top:4px; background:var(--band)}
.mini i{display:block; border-radius:3px; background:var(--line)}
.mini i:nth-child(1){height:6px; width:56%; background:var(--ink-3); margin-bottom:5px}
.mini i:nth-child(2){height:4px; width:88%; margin-bottom:4px}
.mini i:nth-child(3){height:4px; width:70%}

/* bands */
section{padding:clamp(60px,7vw,102px) 0}
.band{background:var(--band); border-block:1px solid var(--line)}

/* icon tiles */
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:40px}
@media(max-width:880px){ .tiles{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .tiles{grid-template-columns:1fr} }
.tile{position:relative; background:var(--paper); border:1px solid var(--line); border-radius:17px;
  padding:24px; box-shadow:var(--sh-1); transition:box-shadow .25s var(--ease), transform .25s var(--ease)}
.tile:hover{box-shadow:var(--sh-2); transform:translateY(-2px)}
.tile .ico{width:40px; height:40px; border-radius:11px; background:var(--tint); color:var(--brand);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px}
.tile .ico svg{width:20px; height:20px}
.tile .num{position:absolute; top:22px; right:22px; font-size:12.5px; font-weight:600;
  color:var(--ink-3); font-variant-numeric:tabular-nums}
.tile p{font-size:15px; color:var(--ink-2); margin:0}
.tile.wide{grid-column:span 2}
@media(max-width:560px){ .tile.wide{grid-column:span 1} }

/* dark panel */
.panel{background:linear-gradient(165deg,var(--night-2),var(--night)); color:var(--night-ink);
  border-radius:26px; padding:clamp(32px,4.6vw,60px); box-shadow:var(--sh-3)}
.panel h2{color:var(--night-ink)} .panel .eyebrow{color:var(--brand-3)}
.panel .lede{color:var(--night-ink-2)}
.panel .split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,48px); margin-top:32px}
@media(max-width:860px){ .panel .split{grid-template-columns:1fr; gap:22px} }
.panel .item{border-top:1px solid var(--night-line); padding-top:15px; margin-top:15px}
.panel .item:first-child{border-top:0; margin-top:0; padding-top:0}
.panel .item b{display:block; color:var(--night-ink); font-weight:600; margin-bottom:4px; font-size:16px}
.panel .item span{color:var(--night-ink-2); font-size:15.5px; line-height:1.55}

/* compare */
.vs{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:38px}
@media(max-width:760px){ .vs{grid-template-columns:1fr} }
.vs>div{border:1px solid var(--line); border-radius:17px; padding:24px; background:var(--paper)}
.vs .them{color:var(--ink-2)}
.vs .us{border-color:color-mix(in srgb,var(--brand) 32%,var(--line)); box-shadow:var(--sh-2)}
.vs h3{margin-bottom:12px}
.vs ul{margin:0; padding:0; list-style:none}
.vs li{padding:9px 0 9px 26px; position:relative; font-size:15.5px; border-top:1px solid var(--line-2)}
.vs li:first-child{border-top:0}
.vs li::before{position:absolute; left:0; top:9px; font-size:14px}
.vs .them li::before{content:"\00d7"; color:var(--ink-3)}
.vs .us li::before{content:"\2713"; color:var(--brand); font-weight:600}

/* faq */
details{border-top:1px solid var(--line); padding:17px 0}
details summary{cursor:pointer; list-style:none; font-weight:600; font-size:17.5px;
  letter-spacing:-0.015em; display:flex; justify-content:space-between; gap:20px; align-items:flex-start}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+"; color:var(--ink-3); font-weight:400; font-size:21px; line-height:1; transform:translateY(2px)}
details[open] summary::after{content:"\2212"}
details p{margin:11px 0 0; color:var(--ink-2); font-size:16px; max-width:64ch}

footer{border-top:1px solid var(--line); padding:36px 0 60px; font-size:14.5px; color:var(--ink-3)}
footer .row{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
footer a{color:var(--ink-3); text-decoration:none}
footer a:hover{color:var(--ink-2)}

.js .reveal{opacity:0; transform:translateY(18px);
  transition:opacity .65s var(--ease), transform .65s var(--ease)}
.js .reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js .reveal,.js .card{transition:none; opacity:1; transform:none}
}

/* legal */
.legal{max-width:820px; margin-inline:auto}
.legal h1{font-size:clamp(30px,5vw,44px); margin:34px 0 6px}
.legal .updated{font-size:14px; color:var(--ink-3); margin:0 0 34px}
.legal h2{font-size:14.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--brand); margin:40px 0 14px}
.legal table{width:100%; border-collapse:collapse; margin:0 0 20px; font-size:15px}
.legal th{text-align:left; font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); padding:0 14px 8px 0; border-bottom:1px solid var(--line); vertical-align:bottom}
.legal td{padding:13px 14px 13px 0; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink-2)}
.legal td:first-child{color:var(--ink)}
.legal ul{margin:0 0 16px; padding-left:20px}
.legal li{margin:0 0 9px; color:var(--ink-2)}
.legal a{color:var(--brand)}
.legal section{padding:0}
.legal header{padding:30px 0 0}