@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&family=Public+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');:root{--primary:#1b3a8a;--primary-2:#2c52b0;--primary-3:#12265c;--primary-soft:#e8edf8;--secondary:#e78224;--secondary-2:#f09a4a;--secondary-soft:#fff3e8;--accent-green:#2f7a32;--accent-green-soft:#e8f4e8;--ink:#1a2744;--ink-2:#4a5870;--ink-3:#7a8699;--muted:#7a8699;--line:#dde3ee;--line-2:#eef1f7;--bg:#f5f7fc;--surface:#ffffff;--ok:#2f7a32;--warn:#e78224;--danger:#d4522a;--shadow-sm:0 1px 2px rgba(27,58,138,0.05),0 4px 10px rgba(27,58,138,0.04);--shadow:0 10px 28px rgba(27,58,138,0.08),0 2px 8px rgba(27,58,138,0.04);--shadow-lg:0 24px 56px rgba(18,38,92,0.16);--radius:20px;--nav-w:268px;--font-display:'Bricolage Grotesque',sans-serif;--font-body:'Public Sans',sans-serif;--font-mono:'JetBrains Mono',monospace;--wave-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 48' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0 22C58 46 102 4 164 16C234 30 282 6 390 26V48H0Z'/%3E%3Cpath fill='none' stroke='%23e78224' stroke-width='5' stroke-linecap='round' d='M0 22C58 46 102 4 164 16C234 30 282 6 390 26'/%3E%3C/svg%3E")}*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--bg);min-height:100vh;line-height:1.55;-webkit-font-smoothing:antialiased}a{color:var(--primary);text-decoration:none}a:hover{color:var(--secondary)}.layout{display:grid;grid-template-columns:var(--nav-w) 1fr;min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--primary);color:#fff;padding:18px 14px 28px;z-index:40}.brand{display:flex;align-items:center;gap:11px;padding:4px 8px 18px;border-bottom:1px solid rgba(255,255,255,0.12);margin-bottom:14px}.brand-mark{width:40px;height:40px;border-radius:14px;background:#fff;display:grid;place-items:center;color:var(--primary);flex:none}.brand-mark svg{width:22px;height:22px}.brand-name{font-family:var(--font-display);font-weight:800;font-size:1.25rem;letter-spacing:-0.03em;line-height:1.1}.c-or{color:var(--secondary)}.c-gn{color:#8ee39a}.brand-sub{font-size:11px;color:rgba(255,255,255,0.7);margin-top:3px;font-weight:600}.nav-group{font-size:10.5px;letter-spacing:0.13em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,0.5);padding:14px 12px 6px}.nav-link{display:flex;align-items:center;gap:10px;padding:9.5px 12px;border-radius:14px;color:rgba(255,255,255,0.78);font-weight:600;font-size:13.5px;transition:0.15s;cursor:pointer;border:none;background:none;width:100%;text-align:left;font-family:inherit;position:relative;margin-bottom:2px}.nav-link:hover{background:rgba(255,255,255,0.1);color:#fff}.nav-link.active{background:rgba(255,255,255,0.16);color:#fff}.nav-link.active::before{content:'';position:absolute;left:-14px;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:var(--secondary)}.main{padding:0;min-width:0}.topbar-mobile{display:none;position:sticky;top:0;z-index:50;background:var(--primary);color:#fff;padding:12px 16px;align-items:center;gap:12px;border-bottom:2px solid var(--secondary)}.topbar-mobile button{background:rgba(255,255,255,0.14);border:none;color:#fff;border-radius:14px;padding:8px 12px;font-family:inherit;font-weight:700;cursor:pointer}.content{max-width:1080px;margin:0 auto;padding:40px 40px 100px}section.doc-section{display:none;animation:fadeIn 0.38s cubic-bezier(0.22,1,0.32,1)}section.doc-section.active{display:block}@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}h1{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,4vw,2.6rem);letter-spacing:-0.04em;line-height:1.1;margin:0 0 12px;color:var(--primary)}h2{font-family:var(--font-display);font-weight:800;font-size:1.5rem;letter-spacing:-0.03em;margin:40px 0 12px;color:var(--primary)}h3{font-family:var(--font-display);font-weight:700;font-size:1.15rem;margin:28px 0 10px;color:var(--ink)}.lead{font-size:1.05rem;color:var(--ink-3);max-width:52ch;margin:0 0 28px}.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--secondary);margin-bottom:10px}.hero{display:grid;grid-template-columns:1.05fr 1fr;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);margin-bottom:36px;min-height:340px}.hero-copy{background:var(--primary);color:#fff;padding:40px 36px 52px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}.hero-copy::after{content:'';position:absolute;left:0;right:0;bottom:0;height:40px;background:var(--wave-img) center / 100% 100% no-repeat;display:none}.hero-copy>*{position:relative;z-index:1}.hero-copy .eyebrow{color:var(--secondary-2)}.hero-copy h1{color:#fff;max-width:16ch}.hero-copy .lead{color:rgba(255,255,255,0.78);margin-bottom:0}.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;margin-bottom:12px}.hero-shot{background:var(--line-2);display:flex;align-items:stretch;min-height:240px}.hero-shot img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:28px;font-weight:700;font-size:14px;border:none;cursor:pointer;font-family:inherit;transition:0.15s}.btn-accent{background:var(--secondary);color:#fff;box-shadow:0 8px 20px rgba(231,130,36,0.28)}.btn-accent:hover{background:var(--secondary-2)}.btn-ghost{background:rgba(255,255,255,0.14);color:#fff;border:1px solid rgba(255,255,255,0.22)}.btn-ghost:hover{background:rgba(255,255,255,0.22)}.btn-soft{background:var(--primary-soft);color:var(--primary)}.btn-primary{background:var(--primary);color:#fff;box-shadow:0 8px 20px rgba(27,58,138,0.22)}.btn-primary:hover{background:var(--primary-2)}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm);transition:0.2s;cursor:pointer}.tile:hover{border-color:var(--primary);background:var(--primary-soft);box-shadow:var(--shadow)}.tile-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;margin-bottom:14px;background:var(--primary);color:#fff}.tile-icon.orange{background:var(--secondary);color:#fff}.tile-icon.green{background:var(--accent-green);color:#fff}.tile h3{margin:0 0 6px;font-size:1.05rem}.tile p{margin:0;color:var(--ink-3);font-size:14px}.steps{counter-reset:step;display:flex;flex-direction:column;gap:20px;margin:24px 0}.step{display:grid;grid-template-columns:40px 1fr;gap:16px;align-items:start}.step::before{counter-increment:step;content:counter(step);width:40px;height:40px;border-radius:14px;background:var(--primary);color:#fff;font-family:var(--font-display);font-weight:800;display:grid;place-items:center;flex:none}.step:nth-child(2)::before{background:var(--secondary)}.step:nth-child(3)::before{background:var(--accent-green)}.step:nth-child(4)::before{background:var(--primary-2)}.step:nth-child(5)::before{background:var(--secondary-2)}.step h3{margin:4px 0 6px}.step p{margin:0;color:var(--ink-3);font-size:14.5px}.shot-block{margin:22px 0 32px}.shot-block figcaption{margin-top:12px;font-size:13.5px;color:var(--ink-3);text-align:center}.shot-label{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--primary);background:var(--primary-soft);padding:4px 10px;border-radius:999px;margin-bottom:10px}.browser-frame{background:var(--primary-3);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}.browser-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--primary)}.browser-bar .dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.28)}.browser-bar .dot:nth-child(1){background:#d4522a}.browser-bar .dot:nth-child(2){background:#e78224}.browser-bar .dot:nth-child(3){background:#2f7a32}.browser-bar .url{flex:1;margin-left:8px;background:rgba(255,255,255,0.12);border-radius:14px;padding:4px 12px;font-family:var(--font-mono);font-size:11px;color:rgba(255,255,255,0.7)}.browser-frame img{display:block;width:100%;height:auto;cursor:zoom-in}.phone-row{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;margin:24px 0}.phone-frame{width:260px;background:var(--primary-3);border-radius:36px;padding:12px;box-shadow:var(--shadow);border:3px solid var(--primary);position:relative}.phone-frame::before{content:'';position:absolute;top:18px;left:50%;transform:translateX(-50%);width:70px;height:6px;border-radius:4px;background:rgba(255,255,255,0.22);z-index:2}.phone-frame img{display:block;width:100%;border-radius:26px;cursor:zoom-in}.phone-cap{text-align:center;font-size:12.5px;color:var(--ink-3);margin-top:10px;font-weight:600}.matrix-wrap{overflow-x:auto;margin:20px 0;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-sm)}table.matrix{width:100%;border-collapse:collapse;font-size:13.5px}table.matrix th,table.matrix td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line-2)}table.matrix th{background:var(--primary-soft);color:var(--primary);font-weight:700;font-size:12px;letter-spacing:0.03em;white-space:nowrap}table.matrix tr:last-child td{border-bottom:none}table.matrix td:first-child{font-weight:600}table.matrix tbody tr:hover td{background:var(--primary-soft)}.badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700}.badge-full{background:var(--accent-green-soft);color:var(--ok)}.badge-read{background:var(--primary-soft);color:var(--primary)}.badge-none{background:var(--line-2);color:var(--ink-3)}.account-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 18px;display:flex;gap:14px;align-items:center;box-shadow:var(--shadow-sm)}.account-card .av{width:44px;height:44px;border-radius:14px;background:var(--secondary);color:#fff;font-weight:800;display:grid;place-items:center;flex:none}.account-card .av.teal{background:var(--primary)}.account-card .av.green{background:var(--accent-green)}.account-card .name{font-weight:700;font-size:14.5px}.account-card .meta{font-size:12.5px;color:var(--ink-3)}.account-card code{font-family:var(--font-mono);font-size:11.5px;background:var(--primary-soft);color:var(--primary);padding:2px 7px;border-radius:8px}.callout{background:var(--secondary-soft);border-left:4px solid var(--secondary);border-radius:0 16px 16px 0;padding:14px 18px;margin:20px 0;font-size:14.5px}.callout strong{color:var(--warn)}.callout.info{background:var(--primary-soft);border-left-color:var(--primary)}.callout.info strong{color:var(--primary)}.kbd{font-family:var(--font-mono);font-size:12px;background:#fff;border:1.5px solid var(--line);border-radius:8px;padding:2px 7px;color:var(--ink)}.flow-diagram{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:20px 0}.flow-node{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 14px;font-weight:700;font-size:13px;color:var(--primary)}.flow-arrow{color:var(--secondary);font-weight:800;font-size:18px}.lightbox{display:none;position:fixed;inset:0;z-index:100;background:rgba(27,58,138,0.55);align-items:center;justify-content:center;padding:24px;cursor:zoom-out}.lightbox.open{display:flex}.lightbox img{max-width:min(96vw,1200px);max-height:92vh;border-radius:16px;box-shadow:var(--shadow-lg)}.footer-note{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-3)}.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(18,38,92,0.45);z-index:35}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#c5d0e8;border-radius:20px;border:3px solid var(--bg)}@media (max-width:960px){.layout{grid-template-columns:1fr}.sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform 0.25s ease;width:min(300px,88vw)}.sidebar.open{transform:none}.sidebar-backdrop.open{display:block}.topbar-mobile{display:flex}.content{padding:24px 18px 80px}.grid-2,.grid-3{grid-template-columns:1fr}.hero{grid-template-columns:1fr;min-height:0}.hero-copy{padding:32px 24px 48px}.hero-copy::after{display:block}.hero-shot{min-height:180px}}