@font-face{font-family:"DM Sans";src:url(fonts/DMSans-latin.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Sans";src:url(fonts/DMSans-latin-ext.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";src:url(fonts/Manrope-latin.woff2) format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";src:url(fonts/Manrope-latin-ext.woff2) format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Layout: the app's own palette and type. Dark forest hero, real product screenshots in browser frames, light sections, lime as the only accent. */
:root{
  --bg:#f5f7f5; --panel:#ffffff; --raise:#eaf0ec; --line:#dbe3de;
  --fg:#16231f; --muted:#5d6b66; --forest:#14231f; --forest2:#1f332b; --on-forest:#e9f1ec; --on-forest-muted:#9fb3a9;
  --lime:#c6eb76; --lime-ink:#14231f; --green:#167451; --green-bg:#e3f2ea; --frame:#dfe6e1;
  --display:"Manrope","Segoe UI",system-ui,sans-serif; --body:"DM Sans","Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0f1815; --panel:#16231f; --raise:#14231f; --line:#274036; --fg:#e9f1ec; --muted:#9fb3a9; --forest:#0a110f; --forest2:#14231f; --green:#5fd09c; --green-bg:#173a2c; --frame:#274036; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f1815; --panel:#16231f; --raise:#14231f; --line:#274036; --fg:#e9f1ec; --muted:#9fb3a9; --forest:#0a110f; --forest2:#14231f; --green:#5fd09c; --green-bg:#173a2c; --frame:#274036; color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 var(--body)}
a{color:inherit}
.wrap{max-width:1120px;margin-inline:auto;padding-inline:20px}
h1,h2,h3{font-family:var(--display);line-height:1.1;margin:0;text-wrap:balance;letter-spacing:-.025em}
h2{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:800}
h3{font-size:1.1rem;font-weight:700;letter-spacing:-.01em}
p{margin:0}
.eyebrow{font:700 .75rem var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:8px;font:700 .95rem var(--display);text-decoration:none;border:1.5px solid transparent}
.btn-lime{background:var(--lime);color:var(--lime-ink)}
.btn-ghost{border-color:#ffffff33;color:var(--on-forest)}
a:focus-visible,summary:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
header{background:var(--forest);color:var(--on-forest);position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;line-height:1.1}
.logo img{width:30px;height:30px;border-radius:8px}
.logo b{font:800 1.05rem var(--display);display:block}
.logo small{font:500 .62rem var(--body);letter-spacing:.16em;color:var(--on-forest-muted)}
nav{display:flex;gap:24px;font-size:.9rem;color:var(--on-forest-muted)}
nav a{text-decoration:none}nav a:hover{color:var(--on-forest)}
@media(max-width:760px){nav{display:none}}
.hero{background:var(--forest);color:var(--on-forest);padding-top:56px;overflow:hidden}
.hero .top{max-width:760px;display:grid;gap:20px}
.hero h1{font-size:clamp(2.3rem,5.2vw,3.8rem);font-weight:800}
.hero h1 em{font-style:normal;color:var(--lime)}
.hero .lead{font-size:1.15rem;color:var(--on-forest-muted);max-width:56ch}
.cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.fine{font-size:.82rem;color:var(--on-forest-muted)}
.hero .shot{margin-top:48px;margin-bottom:-1px}
/* browser frame */
.frame{background:var(--frame);border-radius:12px 12px 0 0;padding:10px 10px 0;box-shadow:0 -10px 60px #c6eb7614,0 30px 80px #00000055}
.frame.full{border-radius:12px;padding:10px;box-shadow:0 20px 50px #17251d26}
.frame .dots{display:flex;gap:6px;padding:0 4px 9px}
.frame .dots i{width:9px;height:9px;border-radius:50%;background:#14231f33}
.frame img{display:block;width:100%;height:auto;border-radius:6px 6px 0 0;background:#fff}
.frame.full img{border-radius:6px}
section{padding-block:80px}
.head{max-width:62ch;display:grid;gap:12px;margin-bottom:40px}
.head p{color:var(--muted);font-size:1.05rem}
.alt{background:var(--raise)}
.split{display:grid;grid-template-columns:4fr 8fr;gap:44px;align-items:center}
.split.rev{grid-template-columns:8fr 4fr}
.split.rev>:first-child{order:2}
.split>*{min-width:0}
@media(max-width:900px){.split,.split.rev{grid-template-columns:1fr;gap:32px}.split.rev>:first-child{order:0}}
.split p.t{margin-top:14px;color:var(--muted)}
.checks{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px;color:var(--muted)}
.checks li{display:flex;gap:10px}
.checks li::before{content:"";flex:none;width:18px;height:18px;margin-top:3px;border-radius:5px;background:var(--green-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.5 9.5l3 3 6-7' fill='none' stroke='%23167451' stroke-width='2'/%3E%3C/svg%3E") center/cover}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px;display:grid;gap:8px;align-content:start;min-width:0}
.card p{color:var(--muted);font-size:.95rem}
.card .k{font:700 .7rem var(--body);color:var(--green);letter-spacing:.12em;text-transform:uppercase}
.plans{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:20px}
.plan{flex:0 1 340px}
.center{text-align:center;margin-inline:auto;justify-items:center}
.plan{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:26px;display:grid;gap:14px;align-content:start;min-width:0}
.plan.pro{background:var(--forest);color:var(--on-forest);border-color:var(--forest)}
.plan.pro li{color:var(--on-forest-muted)}
.plan .price{font:800 2rem var(--display)}
.plan .price small{font:400 .85rem var(--body);opacity:.7}
.plan{display:flex;flex-direction:column;gap:16px}
.plan ul{flex:1;list-style:none;padding:0;margin:0;display:grid;gap:8px;color:var(--muted);font-size:.93rem}
.plan li::before{content:"+ ";color:var(--green);font-weight:700}
.plan.pro li::before{color:var(--lime)}
.ph{background:#fff2de;color:#a96915;padding:1px 6px;border-radius:4px;font-size:.9em}
details{border-top:1px solid var(--line);padding-block:16px}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font:700 1rem var(--display);list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::after{content:"+";color:var(--green)}
details[open] summary::after{content:"\2212"}
details p{margin-top:10px;color:var(--muted);max-width:68ch}
.bar{position:sticky;bottom:0;z-index:9;background:#14231f;color:#e9f1ec;font:500 .78rem var(--body);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));text-align:center;border-top:2px solid var(--lime)}

.hbtns{display:flex;gap:10px;align-items:center}
.login{font:700 .88rem var(--display);text-decoration:none;color:var(--on-forest);padding:7px 14px;border:1.5px solid #ffffff33;border-radius:8px}
.dc{display:inline-flex;gap:7px;align-items:center}
@media(max-width:560px){.dc{display:none}}
.login:hover{border-color:var(--lime)}

.stats{background:var(--forest2);color:var(--on-forest)}
.stats .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0}
.stats .s{padding:28px 20px;border-left:1px solid #ffffff1a}
.stats .s:first-child{border-left:0}
.stats b{display:block;font:800 2.2rem var(--display);letter-spacing:-.03em;color:var(--lime);font-variant-numeric:tabular-nums}
.stats span{font-size:.88rem;color:var(--on-forest-muted)}
@media(max-width:700px){.stats .s{border-left:0;border-top:1px solid #ffffff1a;padding:18px 4px}.stats .s:first-child{border-top:0}}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;counter-reset:s}
.step{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px;display:grid;gap:8px;align-content:start;counter-increment:s}
.step::before{content:counter(s);width:32px;height:32px;border-radius:9px;background:var(--lime);color:var(--lime-ink);display:grid;place-items:center;font:800 .95rem var(--display)}
.step p{color:var(--muted);font-size:.95rem}
.cmp{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow-x:auto}
.cmp table{width:100%;border-collapse:collapse;min-width:560px}
.cmp th,.cmp td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);font-size:.93rem;vertical-align:top}
.cmp th{font:700 .75rem var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cmp th.us{color:var(--green)}
.cmp td:first-child{font-weight:700}
.cmp td.us{background:var(--green-bg);color:var(--fg)}
.cmp td.no{color:var(--muted)}
.cmp tr:last-child td{border-bottom:0}

.period{display:inline-flex;gap:4px;padding:4px;background:var(--panel);border:1px solid var(--line);border-radius:10px;margin-bottom:28px}
.period button{border:0;background:none;color:var(--muted);font:700 .88rem var(--display);padding:9px 18px;border-radius:7px;cursor:pointer}
.period button[aria-pressed="true"]{background:var(--forest);color:var(--lime)}
.period button:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.save{display:inline-block;font:700 .72rem var(--body);padding:2px 8px;border-radius:99px;background:var(--green-bg);color:var(--green);margin-left:8px;vertical-align:middle}
.plan.pro .save{background:#c6eb7626;color:var(--lime)}
.pay{margin-top:36px;text-align:center;display:grid;gap:12px;justify-items:center}
.pay p{font:700 .75rem var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pay ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:760px}
.pay li{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:7px 13px;font:700 .82rem var(--display);color:var(--fg)}
.pay small{color:var(--muted);font-size:.8rem}
.ctr{text-align:center}

.trial{font-size:.8rem;color:var(--muted);text-align:center}
.plan.pro .trial{color:var(--on-forest-muted)}
.amt{font:800 2rem var(--display)}

/* hero fills the first screen so the figures below start under the fold */
.hero{min-height:calc(100svh - 66px);display:flex}
.hero>.wrap{display:flex;flex-direction:column;width:100%}
.hero .top{margin-bottom:48px}
.hero .shot{margin-top:auto}


/* interactive hero demo: the real app prototype, scaled to the frame width */
.frame.shot{border-radius:12px;padding:10px;margin-bottom:0}
.hero{padding-bottom:64px}
.frame .dots{align-items:center}
.live-hint{margin-left:auto;font:700 .72rem var(--body);color:#14231f;background:var(--lime);padding:3px 10px;border-radius:99px}
.demo{position:relative;width:100%;aspect-ratio:1600/1000;overflow:hidden;border-radius:6px;background:#fff}
.demo iframe{position:absolute;top:0;left:0;width:1600px;height:1000px;border:0;transform-origin:0 0}
.frame img.static{display:none}
@media(max-width:760px){.demo,.live-hint{display:none}.frame img.static{display:block}}
/* footer */
footer{background:var(--forest);color:var(--on-forest-muted);padding:64px 0 28px;font-size:.92rem;border-top:1px solid #ffffff14}
.fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:40px}
.flogo{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--on-forest)}
.flogo img{width:36px;height:36px;border-radius:10px}
.flogo b{display:block;font:800 1.1rem var(--display);line-height:1.1;letter-spacing:-.02em}
.flogo small{display:block;font:600 .64rem var(--body);letter-spacing:.16em;opacity:.7;margin-top:2px}
.fbrand p{margin:18px 0 22px;max-width:34ch;line-height:1.6}
.fbtns{display:flex;flex-wrap:wrap;gap:10px}
.fbtns .btn{padding:10px 16px;font-size:.88rem}
.fbtns .btn.lime{background:var(--lime);color:var(--lime-ink)}
.fbtns .btn.ghost{color:var(--on-forest);border-color:#ffffff33;background:transparent}
.fbtns .btn.ghost:hover{border-color:var(--lime)}
.fcol{display:flex;flex-direction:column;gap:11px}
.fcol h4{margin:0 0 6px;font:700 .72rem var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.fcol a{color:var(--on-forest-muted);text-decoration:none;width:fit-content;transition:color .15s}
.fcol a:hover{color:var(--on-forest)}
.fbar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:48px;padding-top:22px;border-top:1px solid #ffffff1f;font-size:.8rem}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr;gap:32px}.fbrand{grid-column:1/-1}}
@media(max-width:480px){.fgrid{grid-template-columns:1fr}}
/* legal pages */
.doc{padding:56px 0 80px}
.doc .wrap{max-width:780px}
.doc h1{font-size:clamp(2rem,4.5vw,2.8rem);font-weight:800;margin-top:10px}
.doc .lead{margin-top:14px;font-size:1.1rem;color:var(--muted)}
.doc .upd{margin-top:8px;font-size:.85rem;color:var(--muted)}
.prose{margin-top:32px}
.prose h2{font-size:1.2rem;font-weight:800;margin:32px 0 10px}
.prose p,.prose li{color:var(--fg);line-height:1.7}
.prose p+p{margin-top:12px}
.prose ul{margin:10px 0 0;padding-left:22px}
.prose li{margin-top:8px}
.prose a{color:var(--green);text-underline-offset:3px}
.fill{background:#fff2de;color:#a96915;padding:1px 6px;border-radius:4px}
.doc-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:48px;padding-top:22px;border-top:1px solid var(--line);font-size:.9rem}
.doc-links a{color:var(--green)}
.doc-links span{color:var(--muted)}