@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap');

:root { --ink:#17211c; --muted:#667069; --paper:#f5f2ea; --cream:#ebe5d8; --green:#2e6953; --green-dark:#173f33; --lime:#dbe9a7; --orange:#e9834e; --line:rgba(23,33,28,.13); --serif:Georgia,'Times New Roman',serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'DM Sans',Arial,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
button { font:inherit; }
.skip-link { position:fixed; top:-5rem; left:1rem; z-index:99; padding:.8rem 1rem; background:white; }
.skip-link:focus { top:1rem; }
.site-header { height:78px; max-width:1440px; margin:auto; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:20; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; text-decoration:none; letter-spacing:-.02em; }
.brand-mark { width:34px; height:34px; display:grid; place-items:center; border-radius:50% 50% 46% 54%; background:var(--green); color:white; font-family:var(--serif); font-size:15px; transform:rotate(-5deg); }
.brand-mark span { color:var(--lime); }
.main-nav { display:flex; align-items:center; gap:2.2rem; }
.main-nav a { color:#4a554e; font-size:.88rem; font-weight:600; text-decoration:none; }
.main-nav a:hover { color:var(--green); }
.main-nav .nav-github { border:1px solid var(--line); border-radius:99px; padding:.7rem 1.05rem; color:var(--ink); }
.menu-toggle { display:none; }
.hero { min-height:690px; max-width:1440px; margin:auto; padding:4.7rem 5vw 6.5rem; display:grid; grid-template-columns:.88fr 1.12fr; gap:3vw; align-items:center; overflow:hidden; }
.hero-copy { position:relative; z-index:3; }
.eyebrow { display:flex; align-items:center; gap:9px; color:var(--green); text-transform:uppercase; letter-spacing:.13em; font-size:.69rem; font-weight:700; }
.eyebrow span { width:21px; height:1px; background:currentColor; }
h1,h2 { margin:.8rem 0 1.35rem; font-family:var(--serif); font-weight:400; letter-spacing:-.055em; line-height:.95; }
h1 { font-size:clamp(3.5rem,6.2vw,6.5rem); }
h1 em,h2 em { color:var(--green); font-weight:400; }
.hero-lead { max-width:560px; margin:0; color:var(--muted); font-size:1.08rem; line-height:1.72; }
.hero-actions { margin-top:2.1rem; display:flex; align-items:center; gap:1.7rem; }
.button { display:inline-flex; align-items:center; gap:13px; padding:.88rem 1.15rem; border-radius:9px; text-decoration:none; }
.button-primary { color:white; background:var(--green); box-shadow:0 9px 25px rgba(46,105,83,.19); }
.button-primary:hover { background:var(--green-dark); transform:translateY(-2px); }
.button .os-icon { width:30px; height:30px; display:grid; place-items:center; font-size:1.25rem; }
.button small,.button strong { display:block; line-height:1.2; }
.button small { opacity:.72; font-size:.67rem; }
.button strong { margin-top:2px; font-size:.86rem; }
.text-link { font-size:.86rem; font-weight:700; text-decoration:none; }
.text-link span { color:var(--orange); margin-left:5px; }
.hero-note { margin:1rem 0 0; color:#838a85; font-size:.7rem; }
.hero-visual { position:relative; min-width:680px; perspective:1200px; }
.app-window { position:relative; z-index:2; overflow:hidden; border:1px solid rgba(30,50,40,.16); border-radius:13px; background:#fbfbf8; box-shadow:0 35px 70px rgba(34,49,41,.2); transform:rotateY(-5deg) rotateX(1.5deg); }
.window-bar { height:39px; display:flex; align-items:center; gap:6px; padding:0 14px; color:#7d8580; background:#e9e9e5; font-size:.62rem; }
.window-bar span { width:8px; height:8px; border-radius:50%; background:#c1c2bd; }.window-bar span:first-child{background:#e37b67}.window-bar span:nth-child(2){background:#e5bb62}.window-bar span:nth-child(3){background:#79b77e}.window-bar b { margin:auto; padding-right:40px; font-weight:500; }
.window-body { min-height:390px; display:flex; }
.window-body aside { width:54px; display:flex; flex-direction:column; align-items:center; gap:25px; padding-top:27px; background:#204b3e; }
.window-body aside i { width:14px; height:14px; opacity:.5; border:1px solid white; border-radius:3px; }.window-body aside .active{opacity:1;background:var(--lime);border-color:var(--lime)}
.mock-content { flex:1; padding:25px 25px 18px; }.mock-heading{display:flex;justify-content:space-between;align-items:center}.mock-heading small,.mock-heading strong{display:block}.mock-heading small{color:#929994;font-size:.55rem}.mock-heading strong{font-family:var(--serif);font-size:1.2rem;margin-top:2px}.mock-heading button,.mock-footer button{border:0;border-radius:6px;background:var(--green);color:white;padding:8px 12px;font-size:.62rem}.pattern-box{margin:20px 0 14px;padding:11px 13px;border:1px solid #dedfd9;border-radius:6px;background:white}.pattern-box small{color:#979c98;font-size:.48rem;letter-spacing:.08em}.pattern-box div{margin-top:7px;font-family:monospace;font-size:.66rem}.pattern-box span{padding:3px 5px;border-radius:3px;background:#e3eed8;color:#42674f}.file-row{min-height:58px;display:grid;grid-template-columns:37px 1.1fr 1.4fr 18px;align-items:center;gap:9px;border-bottom:1px solid #e6e5df;font-size:.56rem}.file-row small,.file-row strong{display:block}.file-row small{color:#9aa09c;margin-top:3px}.file-row>b{font-weight:500;color:#4c5750}.file-row em{width:15px;height:15px;display:grid;place-items:center;border-radius:50%;background:#e0edd7;color:var(--green);font-style:normal}.thumb{width:34px;height:34px;border-radius:4px;background:linear-gradient(145deg,#adc2a6,#577261)}.thumb-b{background:linear-gradient(145deg,#d3a071,#625e51)}.thumb-c{background:linear-gradient(145deg,#9ab4c9,#4e5d69)}.mock-footer{display:flex;align-items:center;justify-content:space-between;margin-top:17px;color:#858c87;font-size:.55rem}.floating-card{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;padding:12px 16px;border:1px solid rgba(20,40,30,.1);border-radius:8px;background:rgba(255,255,252,.94);box-shadow:0 14px 35px rgba(30,45,38,.15);font-size:.62rem}.floating-card>span{width:29px;height:29px;display:grid;place-items:center;border-radius:7px;background:#e6efd2;color:var(--green);font-size:1rem}.floating-card small,.floating-card strong{display:block}.floating-card small{color:#89918c}.floating-card strong{margin-top:3px}.card-meta{left:-32px;bottom:43px}.card-done{right:1px;top:-28px}.card-done>span{background:#fae2d3;color:var(--orange)}.orbit{position:absolute;border:1px solid rgba(46,105,83,.12);border-radius:50%;z-index:0}.orbit-one{width:620px;height:620px;left:90px;top:-130px}.orbit-two{width:470px;height:470px;left:170px;top:-50px}
.trust-strip { padding:1.35rem 5vw; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#efebe2; }
.trust-strip p { display:grid; grid-template-columns:40px 1fr; margin:0; padding:0 2.5vw; border-right:1px solid var(--line); }.trust-strip p:last-child{border:0}.trust-strip p>span{grid-row:1/3;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#dfe8cc;color:var(--green)}.trust-strip b{font-size:.78rem}.trust-strip small{color:#8b928d;font-size:.65rem;margin-top:3px}
.section-shell{max-width:1220px;margin:auto;padding-left:5vw;padding-right:5vw}.features{padding-top:8rem;padding-bottom:8rem}.section-heading{max-width:660px;margin-bottom:3.5rem}.section-heading h2{font-size:clamp(2.8rem,5vw,5rem)}.section-heading>p:last-child{max-width:490px;color:var(--muted);line-height:1.7}.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:17px}.feature-card{position:relative;min-height:325px;padding:2.2rem;border:1px solid var(--line);border-radius:11px;background:#faf8f2;overflow:hidden}.feature-main{display:grid;grid-template-columns:1fr 1.9fr;gap:1.3rem;background:var(--green-dark);color:white}.feature-icon{width:49px;height:49px;display:grid;place-items:center;border-radius:10px;background:var(--lime);color:var(--green-dark);font-size:1.3rem}.feature-icon.warm{background:#f7dfcb;color:#b45b31}.feature-icon.green{background:#dfeacf;color:var(--green)}.feature-icon.blue{background:#dae7ed;color:#406779}.card-number{position:absolute;right:2rem;top:1.2rem;color:#a3aaa5;font-family:var(--serif);font-style:italic;font-size:.8rem}.feature-card h3{margin:1.3rem 0 .8rem;font-family:var(--serif);font-size:1.8rem;font-weight:400}.feature-card>div>h3{margin-top:.2rem}.feature-card p:not(.card-number){color:#7b837e;font-size:.86rem;line-height:1.7}.feature-main p:not(.card-number){color:#b9c7c0}.token-line{position:absolute;right:-7px;bottom:42px;display:flex;align-items:center;gap:5px;transform:rotate(-3deg)}.token-line span{padding:10px 11px;border-radius:5px;background:#f1f0e9;color:#355448;font-size:.55rem;font-weight:700}.token-line i{font-style:normal;color:#81928a}.before-after{position:absolute;left:2.2rem;right:2.2rem;bottom:2.2rem;display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding:15px;border-radius:7px;background:#efede6;font-family:monospace;font-size:.68rem}.before-after del{color:#999}.before-after span{color:var(--orange)}.before-after ins{text-decoration:none;color:var(--green);font-weight:700}.feature-card dl{position:absolute;left:2.2rem;right:2.2rem;bottom:1.5rem;margin:0}.feature-card dl div{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line);font-size:.66rem}.feature-card dt{color:#949a96}.feature-card dd{margin:0;font-weight:600}.feature-wide{grid-column:1/-1;min-height:245px;display:grid;grid-template-columns:1fr 1fr}.media-stack{display:flex;align-items:center;justify-content:center;gap:0}.media-stack span{width:80px;height:105px;display:grid;place-items:end center;padding-bottom:14px;margin-left:-14px;border:1px solid rgba(23,33,28,.12);border-radius:7px;background:#e9eee5;color:var(--green);font-size:.64rem;font-weight:700;box-shadow:-7px 8px 20px rgba(24,40,32,.06);transform:rotate(-5deg)}.media-stack span:nth-child(even){background:#f1dfd1;color:#a65e39;transform:translateY(13px) rotate(4deg)}
.showcase{padding-top:7rem;padding-bottom:8rem}.centered{text-align:center;margin-left:auto;margin-right:auto}.centered .eyebrow{justify-content:center}.centered>p:last-child{margin-left:auto;margin-right:auto}.showcase-tabs{display:flex;justify-content:center;gap:5px;margin-bottom:1.5rem}.showcase-tabs button{border:0;border-radius:99px;padding:.65rem 1.1rem;background:transparent;color:#7a827d;font-size:.75rem;cursor:pointer}.showcase-tabs button[aria-selected=true]{background:var(--green);color:white}.screenshot-frame{margin:0;padding:14px 14px 9px;border:1px solid var(--line);border-radius:14px;background:#e8e4da;box-shadow:0 30px 65px rgba(40,50,44,.12)}.screenshot-frame img{display:block;width:100%;border-radius:7px;transition:opacity .16s,transform .16s}.screenshot-frame img.switching{opacity:0;transform:scale(.99)}.screenshot-frame figcaption{text-align:center;color:#929893;font-size:.62rem;padding:10px 0 3px}.screenshot-frame figcaption span{color:var(--orange);font-weight:700}
.download-section{background:var(--green-dark);color:white}.download-inner{padding-top:6.5rem;padding-bottom:6.5rem;display:grid;grid-template-columns:.9fr 1.1fr;gap:8vw;align-items:center}.eyebrow.light{color:var(--lime)}.download-inner h2{font-size:clamp(3rem,5vw,5rem)}.download-inner>div>p:last-child{max-width:480px;color:#b9c6c0;line-height:1.7}.download-panel{padding:12px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(255,255,255,.06)}.download-choice{display:grid;grid-template-columns:44px 1fr 25px;align-items:center;gap:13px;padding:15px;margin-bottom:7px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:rgba(255,255,255,.04);text-decoration:none}.download-choice:hover,.download-choice.recommended{background:var(--lime);color:var(--green-dark)}.platform-icon{width:39px;height:39px;display:grid;place-items:center;border-radius:8px;background:rgba(255,255,255,.1);font-size:1.2rem}.download-choice.recommended .platform-icon{background:rgba(23,63,51,.1)}.download-choice small,.download-choice strong{display:block}.download-choice small{opacity:.62;font-size:.6rem}.download-choice strong{margin-top:3px;font-size:.8rem}.download-panel>p{margin:14px 6px 3px;color:#97aaa1;font-size:.57rem;line-height:1.6}.download-panel>p a{color:#cbd8d1}
footer{max-width:1220px;margin:auto;padding:3.5rem 5vw 2rem;display:grid;grid-template-columns:1fr 1.5fr 1fr auto;align-items:start;gap:3rem;color:#778079;font-size:.72rem}footer p{margin:0;line-height:1.6}footer nav{display:flex;gap:1.4rem}footer nav a{text-decoration:none}footer>small{font-size:.65rem}.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}
@media (max-width:1000px){.hero{grid-template-columns:1fr;padding-top:3rem}.hero-copy{max-width:730px}.hero-visual{margin-top:3rem;min-width:0}.download-inner{grid-template-columns:1fr}.feature-main{grid-template-columns:1fr}.token-line{position:static;margin-top:3rem}.trust-strip{grid-template-columns:repeat(2,1fr);gap:1rem}.trust-strip p:nth-child(2){border-right:0}footer{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.site-header{height:68px}.menu-toggle{display:flex;width:42px;height:42px;flex-direction:column;justify-content:center;gap:6px;border:0;background:transparent}.menu-toggle span{display:block;width:22px;height:1px;background:var(--ink)}.main-nav{display:none;position:absolute;left:4vw;right:4vw;top:62px;align-items:stretch;flex-direction:column;gap:0;padding:10px;border:1px solid var(--line);border-radius:10px;background:#faf8f2;box-shadow:0 16px 30px rgba(20,35,27,.12)}.main-nav.open{display:flex}.main-nav a{padding:13px}.main-nav .nav-github{border:0;padding:13px}.hero{padding:3rem 5vw 5rem}.hero-actions{align-items:flex-start;flex-direction:column}.hero-visual{margin-left:-12vw;margin-right:-35vw}.app-window{transform:none}.floating-card{display:none}.window-body{min-height:320px}.file-row{grid-template-columns:37px 1fr 1.3fr}.file-row em{display:none}.trust-strip{grid-template-columns:1fr}.trust-strip p{border-right:0;padding:4px}.features,.showcase{padding-top:5rem;padding-bottom:5rem}.feature-grid{grid-template-columns:1fr}.feature-wide{grid-column:auto;grid-template-columns:1fr}.media-stack{margin-top:2rem}.media-stack span{width:62px;height:83px}.showcase-tabs{overflow:auto;justify-content:flex-start}.showcase-tabs button{white-space:nowrap}.download-inner{padding-top:5rem;padding-bottom:5rem}.download-choice{padding:11px}footer{grid-template-columns:1fr;gap:1.7rem}footer nav{flex-wrap:wrap}}
.feature-card code{font-size:.78rem;color:var(--green-dark);background:#e8eee3;padding:.1rem .3rem;border-radius:3px}
.guide{padding-top:7rem;padding-bottom:8rem}.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.guide-card{padding:2rem;border:1px solid var(--line);border-radius:11px;background:#faf8f2}.guide-card>span{color:var(--orange);font-family:var(--serif);font-style:italic;font-size:.8rem}.guide-card h3{margin:.8rem 0 1rem;font-family:var(--serif);font-size:1.8rem;font-weight:400}.guide-card ol{margin:0;padding-left:1.15rem;color:var(--muted);font-size:.82rem;line-height:1.65}.guide-card li+li{margin-top:.45rem}.requirements{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:18px;overflow:hidden;border:1px solid var(--line);border-radius:11px;background:var(--line)}.requirements div{padding:1.3rem;background:#efebe2}.requirements strong,.requirements span{display:block}.requirements strong{font-size:.78rem;color:var(--green)}.requirements span{margin-top:.35rem;color:var(--muted);font-size:.7rem;line-height:1.5}
@media (max-width:1000px){.guide-grid,.requirements{grid-template-columns:1fr}}
@media (max-width:700px){.guide{padding-top:5rem;padding-bottom:5rem}.feature-card{min-height:340px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}*{transition:none!important}}