:root{--ink:#14251f;--muted:#64736d;--paper:#f7f6f0;--card:#fffef9;--line:#dce3dc;--mint:#bcebd4;--teal:#14856b;--gold:#eeae4f;--night:#102c28;--shadow:0 18px 45px rgba(20,37,31,.09)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{color:inherit;text-decoration:none}a:hover{color:var(--teal)}.wrap{margin:auto;max-width:1180px;padding:0 26px}.topbar{align-items:center;display:flex;justify-content:space-between;padding:24px 0}.brand{align-items:center;display:flex;font-weight:850;gap:10px;letter-spacing:-.04em}.brand-mark{background:var(--night);border-radius:11px;color:var(--mint);display:grid;font-size:14px;height:34px;place-items:center;width:34px}.nav{align-items:center;display:flex;gap:24px}.nav a{color:var(--muted);font-size:14px;font-weight:650}.nav .button{color:#fff}.button{background:var(--teal);border:0;border-radius:999px;color:#fff;cursor:pointer;display:inline-block;font-size:14px;font-weight:750;padding:10px 17px}.button:hover{background:#0d7059;color:#fff}.button.alt{background:transparent;border:1px solid var(--line);color:var(--ink)}.hero{display:grid;gap:54px;grid-template-columns:1.05fr .95fr;padding:86px 0 104px}.eyebrow{color:var(--teal);font-size:12px;font-weight:850;letter-spacing:.14em;text-transform:uppercase}.hero h1{font-size:clamp(44px,7vw,79px);letter-spacing:-.075em;line-height:.98;margin:18px 0 25px;max-width:700px}.hero h1 em{color:var(--teal);font-style:normal}.lede{color:var(--muted);font-size:19px;max-width:590px}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.hero-art{background:var(--night);border-radius:25px;box-shadow:var(--shadow);color:#d8eee3;min-height:385px;overflow:hidden;padding:25px;position:relative}.hero-art:before{background:var(--gold);border-radius:50%;content:"";height:180px;opacity:.85;position:absolute;right:-42px;top:-52px;width:180px}.window-bar{align-items:center;border-bottom:1px solid rgba(220,239,227,.17);display:flex;gap:7px;padding-bottom:18px}.window-bar i{background:#f37966;border-radius:50%;height:8px;width:8px}.window-bar i:nth-child(2){background:#f0c15a}.window-bar i:nth-child(3){background:#72d39b}.flow{display:grid;gap:18px;grid-template-columns:1fr 1fr;margin-top:52px;position:relative}.flow:before{background:var(--mint);content:"";height:2px;left:21%;position:absolute;right:21%;top:50%}.node{background:#1b453e;border:1px solid rgba(188,235,212,.36);border-radius:14px;padding:18px;position:relative;z-index:1}.node strong{display:block;color:#fff;font-size:15px}.node small{color:#a5c7b7}.node.accent{background:var(--teal);transform:translateY(55px)}.node.gold{background:#9a6828;transform:translateY(-20px)}.section{padding:90px 0}.section.tint{background:#eaf1e9}.section h2{font-size:clamp(30px,4vw,49px);letter-spacing:-.06em;line-height:1.04;margin:12px 0 16px}.section-intro{color:var(--muted);max-width:620px}.grid{display:grid;gap:18px;grid-template-columns:repeat(3,1fr);margin-top:38px}.card{background:var(--card);border:1px solid var(--line);border-radius:17px;padding:25px}.card h3{font-size:19px;letter-spacing:-.03em;margin:10px 0 6px}.card p{color:var(--muted);font-size:14px;margin:0}.number{color:var(--teal);font-size:13px;font-weight:850}.split{align-items:center;display:grid;gap:70px;grid-template-columns:.8fr 1.2fr}.checklist{display:grid;gap:12px;margin:26px 0 0;padding:0}.checklist li{list-style:none}.checklist li:before{color:var(--teal);content:"✓";font-weight:900;margin-right:10px}.code{background:var(--night);border-radius:16px;color:#d8eee3;font:13px/1.7 "SFMono-Regular",Consolas,monospace;overflow:auto;padding:22px}.code .green{color:var(--mint)}.code .gold{color:#f4c776}.cta{background:var(--night);border-radius:22px;color:#fff;padding:44px}.cta p{color:#bed5ca}.footer{border-top:1px solid var(--line);color:var(--muted);font-size:13px;padding:26px 0}.footer .wrap{align-items:center;display:flex;justify-content:space-between}.doc{max-width:830px;padding:70px 0 100px}.doc h1{font-size:clamp(38px,6vw,64px);letter-spacing:-.07em;line-height:1.02;margin:15px 0}.doc h2{font-size:29px;letter-spacing:-.04em;margin-top:52px}.doc h3{font-size:19px;margin-top:32px}.doc p,.doc li{color:#53645c}.doc code{background:#e9eee8;border-radius:5px;font:13px "SFMono-Regular",Consolas,monospace;padding:3px 6px}.doc pre{background:var(--night);border-radius:13px;color:#d8eee3;overflow:auto;padding:20px}.doc-nav{border-bottom:1px solid var(--line)}.doc-nav .topbar{padding-bottom:17px}@media(max-width:800px){.nav a:not(.button){display:none}.hero,.split{grid-template-columns:1fr}.hero{padding:55px 0 70px}.hero-art{min-height:310px}.grid{grid-template-columns:1fr}.section{padding:65px 0}.footer .wrap{align-items:flex-start;flex-direction:column;gap:10px}}
@media(max-width:800px){.nav.open{background:var(--card);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;gap:12px;padding:14px;position:absolute;right:26px;top:70px;z-index:5}.nav.open a:not(.button){display:block}}
/* Shared AppyHP brand mark, reused by the header and browser tab icon. */
.brand-mark{background:var(--night);border-radius:11px;color:var(--mint);display:block;height:34px;padding:7px;width:34px}
/* Module directory */
.module-directory{background:var(--night);color:#fff}.module-directory .section-intro{color:#bed5ca}.module-grid{display:grid;gap:12px;grid-template-columns:repeat(4,1fr);margin-top:34px}.module-card{background:rgba(255,255,255,.06);border:1px solid rgba(188,235,212,.18);border-radius:14px;display:flex;flex-direction:column;min-height:136px;padding:18px;position:relative}.module-card:hover{border-color:var(--mint);color:#fff;transform:translateY(-2px);transition:transform .15s ease}.module-card.active{background:var(--teal);border-color:var(--mint)}.module-card strong{font-size:17px;margin:8px 0 4px}.module-card small{color:#bed5ca;font-size:13px;line-height:1.45}.module-card.active small{color:#e5fff1}.module-soon{color:var(--gold);font-size:11px;font-weight:750;margin-top:auto;padding-top:12px}@media(max-width:800px){.module-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){.module-grid{grid-template-columns:1fr}}