:root{
  --forest:#13201A; --forest-2:#1C2D24; --sage:#7A9E7E; --sage-lt:#A8C5AB;
  --mist:#EEF2EC; --cream:#F5F0E6; --ink:#16201B; --ink-soft:#56635B;
  --clay:#C46A4A; --amber:#F2A900; --line:#D7DFD5;
  --display:"Bricolage Grotesque","Inter",system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--mist);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.6}
a{color:inherit;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px}
.wrap{max-width:74rem;margin:0 auto;padding:0 1.5rem}

/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(19,32,26,.72);backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid rgba(168,197,171,.14)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:4.25rem}
.brand{display:flex;align-items:center;gap:.65rem;font-family:var(--display);font-weight:700;font-size:1.15rem;
  letter-spacing:-.01em;color:var(--cream);text-decoration:none}
.brand svg{width:32px;height:32px}
.pill{display:inline-flex;align-items:center;gap:.5rem;font:600 .95rem var(--body);padding:.6rem 1.1rem;border-radius:999px;
  background:var(--cream);color:var(--forest);text-decoration:none;border:0;cursor:pointer}
.pill:hover{background:#fff}

/* hero */
.hero{background:var(--forest);color:var(--cream);position:relative;overflow:hidden;padding:4.5rem 0 5.5rem}
.hero::before{content:"";position:absolute;inset:-30% -10% auto auto;width:70vw;height:70vw;max-width:900px;max-height:900px;
  background:radial-gradient(closest-side,rgba(122,158,126,.35),transparent 70%);pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:3.5rem;align-items:center}
h1{font-family:var(--display);font-weight:800;font-size:clamp(3.4rem,9.5vw,7.25rem);line-height:.9;letter-spacing:-.045em;margin:0 0 1.75rem}
h1 .stop{color:var(--amber)}
.lede{font-size:1.2rem;line-height:1.55;color:#C9D6CB;max-width:31rem;margin:0 0 2.25rem}

/* signup */
form.signup{max-width:32rem}
.field{display:flex;gap:.4rem;padding:.4rem;border-radius:999px;background:rgba(245,240,230,.08);border:1px solid rgba(245,240,230,.18)}
.field:focus-within{border-color:var(--sage-lt)}
.field input{flex:1;min-width:0;font:inherit;padding:.75rem 1rem;border:0;background:transparent;color:var(--cream)}
.field input::placeholder{color:#8FA394}
.field input:focus{outline:none}
.field button{font:600 1rem var(--body);padding:.75rem 1.4rem;border:0;border-radius:999px;background:var(--amber);color:var(--forest);cursor:pointer;white-space:nowrap}
.field button:hover{filter:brightness(1.06)}
.seg{display:flex;gap:.5rem;margin:1rem 0 0;border:0;padding:0}
.seg legend{position:absolute;left:-9999px}
.seg label{cursor:pointer}
.seg input{position:absolute;opacity:0}
.seg span{display:inline-block;font-size:.92rem;padding:.45rem .9rem;border-radius:999px;border:1px solid rgba(245,240,230,.22);color:#C9D6CB}
.seg input:checked+span{background:var(--sage);border-color:var(--sage);color:var(--forest);font-weight:600}
.seg input:focus-visible+span{outline:3px solid var(--amber);outline-offset:2px}
.fine{font-size:.85rem;color:#8FA394;margin:.9rem 0 0}
.fine a{color:#C9D6CB}
.status{font-weight:600;color:var(--sage-lt);margin:.8rem 0 0;min-height:1.2em}
.hidden{position:absolute;left:-9999px}

/* product demo */
.demo{position:relative;justify-self:end;width:100%;max-width:27rem}
.phone{background:var(--cream);color:var(--ink);border-radius:30px;padding:1.4rem 1.25rem 1.5rem;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.6),0 0 0 8px rgba(245,240,230,.06)}
.phone-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1rem}
.phone-top b{font-family:var(--display);font-size:1.35rem;letter-spacing:-.02em}
.phone-top small{color:var(--ink-soft);font-size:.8rem}
.task{display:flex;gap:.8rem;align-items:center;padding:.8rem .9rem;border-radius:14px;background:#fff;margin-bottom:.55rem;font-size:.93rem}
.task i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--sage)}
.task.due i{background:var(--clay)}
.task span{flex:1}
.task em{font-style:normal;font-size:.8rem;color:var(--ink-soft)}
.quote{position:absolute;left:-2.5rem;bottom:-2rem;width:17rem;background:var(--forest-2);color:var(--cream);
  border:1px solid rgba(242,169,0,.45);border-radius:18px;padding:1rem 1.1rem;box-shadow:0 24px 50px -20px rgba(0,0,0,.7)}
.quote .from{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--amber);font-weight:600}
.quote .from::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--amber)}
.quote p{margin:.4rem 0 .7rem;font-size:.95rem;line-height:1.35}
.quote .amt{display:flex;justify-content:space-between;align-items:center;font-family:var(--display);font-weight:700;font-size:1.4rem}
.quote .amt button{font:600 .8rem var(--body);padding:.4rem .8rem;border-radius:999px;border:0;background:var(--sage);color:var(--forest)}
@media (prefers-reduced-motion:no-preference){
  .phone{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
  .quote{animation:land 1s cubic-bezier(.2,.9,.25,1.15) .9s both}
  @keyframes rise{from{opacity:0;transform:translateY(24px)}}
  @keyframes land{from{opacity:0;transform:translate(40px,-60px) rotate(6deg)}}
}

/* sections */
section{padding:6rem 0}
h2{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1;letter-spacing:-.035em;margin:0 0 1rem;max-width:20ch}
.intro{color:var(--ink-soft);font-size:1.15rem;max-width:38rem;margin:0 0 3rem}
.products{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto;gap:1rem}
.prod{border-radius:26px;padding:2rem;display:flex;flex-direction:column;justify-content:space-between;min-height:17rem}
.prod h3{font-family:var(--display);font-weight:700;font-size:1.75rem;letter-spacing:-.025em;margin:0 0 .5rem}
.prod p{margin:0;max-width:30rem}
.tag{align-self:flex-start;font-size:.8rem;font-weight:600;padding:.3rem .75rem;border-radius:999px;margin-bottom:1.5rem}
.p-hub{grid-row:span 2;background:var(--sage);color:var(--forest)}
.p-hub .tag{background:var(--forest);color:var(--cream)}
.p-hub .big{font-family:var(--display);font-weight:800;font-size:clamp(3rem,7vw,5.5rem);line-height:.9;letter-spacing:-.05em;margin:2rem 0 1rem}
.p-tpl{background:var(--cream)}
.p-tpl .tag{background:var(--clay);color:#fff}
.p-pro{background:var(--forest);color:var(--cream)}
.p-pro .tag{background:var(--amber);color:var(--forest)}
.p-pro p{color:#C9D6CB}

.flow{background:var(--cream)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;counter-reset:s}
.steps li{counter-increment:s;border-top:2px solid var(--ink);padding-top:1.25rem}
.steps li::before{content:counter(s);display:block;font-family:var(--display);font-weight:800;font-size:3rem;line-height:1;color:var(--sage);margin-bottom:1rem}
.steps h3{font-family:var(--display);font-size:1.3rem;letter-spacing:-.02em;margin:0 0 .4rem}
.steps p{margin:0;color:var(--ink-soft)}

.cta{background:var(--forest);color:var(--cream);text-align:left}
.cta h2{color:var(--cream)}
.cta .intro{color:#C9D6CB}

footer{background:var(--forest);color:#8FA394;font-size:.9rem;padding:2rem 0 3rem;border-top:1px solid rgba(168,197,171,.14)}
footer .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
footer a{color:#C9D6CB}

.doc{max-width:44rem;padding:4rem 1.5rem 5rem}
.doc h1{font-size:clamp(2.6rem,7vw,4.2rem);color:var(--ink)}
.doc h2{font-size:1.4rem;letter-spacing:-.02em;margin:2.2rem 0 .5rem}
.doc .lede{color:var(--ink-soft)}

@media (max-width:860px){
  .hero{padding:3rem 0 6rem}
  .hero .wrap{grid-template-columns:1fr;gap:3.5rem}
  .demo{justify-self:center;max-width:22rem;margin-right:0}
  .quote{left:auto;right:1rem;width:min(15rem,78%)}
  .products{grid-template-columns:1fr}
  .p-hub{grid-row:auto}
  .steps{grid-template-columns:1fr;gap:2rem}
  section{padding:4.5rem 0}
  .top .pill{padding:.5rem .9rem;font-size:.88rem}
}
@media (max-width:420px){
  .field{flex-direction:column;border-radius:20px}
  .field button{width:100%}
}