:root { --black:#111715; --ink:#172e29; --green:#1f5d4d; --leaf:#dce9dc; --cream:#f4f1e8; --paper:#fffdf8; --gold:#c58a3f; --gold-soft:#f3e5ca; --muted:#60746e; --line:#d8dfd7; --shadow:0 24px 70px rgba(17,23,21,.14); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.6; }
a { color:inherit; }
.skip-link { position:fixed; z-index:100; top:-60px; left:20px; padding:10px 16px; background:var(--ink); color:white; border-radius:8px; }
.skip-link:focus { top:12px; }
.site-header { position:sticky; z-index:50; top:0; display:flex; align-items:center; justify-content:space-between; min-height:76px; padding:0 clamp(22px,5vw,80px); border-bottom:1px solid rgba(216,223,215,.8); background:rgba(255,253,248,.92); backdrop-filter:blur(14px); }
.brand { display:flex; align-items:center; gap:10px; color:var(--black); font-family:Georgia,serif; font-size:1.3rem; font-weight:700; text-decoration:none; }
.brand-mark { position:relative; display:block; flex:0 0 36px; width:36px; height:36px; overflow:hidden; background:var(--black); border:1px solid var(--gold); border-radius:50%; }
.brand-mark:before { content:""; position:absolute; top:8px; left:10px; width:15px; height:19px; background:linear-gradient(145deg,#d9b16e,var(--gold)); border-radius:90% 8% 90% 8%; transform:rotate(-8deg); }
.brand-mark:after { content:""; position:absolute; top:19px; left:17px; width:1px; height:11px; background:#f6deb3; transform:rotate(32deg); transform-origin:top; }
.brand-mark.compact { flex-basis:30px; width:30px; height:30px; background:#0c1210; }.brand-mark.compact:before { top:6px; left:8px; width:13px; height:17px; }.brand-mark.compact:after { top:16px; left:14px; }
nav { display:flex; align-items:center; gap:28px; }
nav a { color:var(--muted); font-size:.9rem; font-weight:700; text-decoration:none; }
nav a:hover { color:var(--green); }
.nav-login { padding:9px 18px; border:1px solid var(--black); border-radius:999px; color:var(--black); }
.nav-toggle { display:none; }
.hero { position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,.9fr) minmax(520px,1.1fr); align-items:center; gap:clamp(50px,7vw,110px); min-height:750px; padding:90px clamp(22px,7vw,120px) 110px; background:radial-gradient(circle at 85% 20%,#e2eddf 0,transparent 35%),linear-gradient(135deg,#fffdf8 20%,#f3f0e6); }
.hero:after { content:""; position:absolute; right:-8vw; bottom:-20vw; width:42vw; height:42vw; border:1px solid rgba(31,93,77,.12); border-radius:50%; }
.eyebrow { margin:0 0 16px; color:var(--green); font-size:.74rem; font-weight:900; letter-spacing:.17em; text-transform:uppercase; }
.hero .eyebrow { color:#956120; }
h1,h2,h3 { margin-top:0; font-family:Georgia,"Times New Roman",serif; line-height:1.08; }
h1 { margin-bottom:25px; font-size:clamp(3.4rem,6.2vw,6.7rem); letter-spacing:-.055em; }
h1 em { color:var(--green); font-weight:400; }
.hero-lede { max-width:650px; margin-bottom:30px; color:var(--muted); font-size:clamp(1.05rem,1.5vw,1.3rem); }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.button { display:inline-flex; min-height:50px; align-items:center; justify-content:center; padding:13px 23px; border:1px solid var(--green); border-radius:999px; font-weight:800; text-decoration:none; cursor:pointer; }
.button-primary { border-color:var(--black); color:white; background:var(--black); box-shadow:0 10px 25px rgba(197,138,63,.23); }
.button-primary:hover { border-color:#262f2c; background:#262f2c; transform:translateY(-1px); }
.button-secondary { color:var(--green); background:transparent; }
.microcopy { margin-top:18px; color:var(--muted); font-size:.8rem; }
.product-window { position:relative; z-index:2; overflow:hidden; border:1px solid rgba(31,93,77,.15); border-radius:20px; background:white; box-shadow:var(--shadow); transform:rotate(1.5deg); }
.window-bar { display:flex; align-items:center; gap:6px; height:38px; padding:0 13px; color:white; background:var(--black); }
.window-bar span { width:8px; height:8px; border-radius:50%; background:#b9c5ba; }.window-bar small { margin:auto; color:#71827d; font-size:.62rem; }
.product-shell { display:grid; grid-template-columns:62px 1fr; min-height:470px; }.product-shell aside { display:flex; flex-direction:column; align-items:center; gap:26px; padding:20px 0; background:var(--black); }.product-shell aside i { width:18px; height:3px; border-radius:2px; background:#53615d; }.product-shell aside i:first-of-type { background:var(--gold); }.product-main { padding:34px; }.product-main>p { margin:0; color:var(--gold); font-size:.62rem; font-weight:900; letter-spacing:.15em; }.product-main h2 { margin:2px 0 24px; color:var(--black); font-size:2.4rem; }.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.metrics div { display:grid; padding:16px; border:1px solid var(--line); border-radius:12px; }.metrics div:nth-child(2) { border-top:3px solid var(--gold); }.metrics strong { color:var(--black); font-size:1.65rem; }.metrics span { color:var(--muted); font-size:.68rem; font-weight:700; }.activity { display:flex; align-items:center; gap:12px; margin-top:12px; padding:15px; border:1px solid var(--line); border-radius:12px; }.activity i { width:10px; height:10px; border-radius:50%; background:var(--gold); }.activity span { display:grid; flex:1; }.activity b { color:var(--black); font-size:.82rem; }.activity small { color:var(--muted); }.activity em { padding:4px 8px; border-radius:999px; color:#674312; background:var(--gold-soft); font-size:.63rem; font-style:normal; font-weight:800; }
.section-pad { padding:clamp(80px,10vw,145px) clamp(22px,7vw,120px); }
.section-heading { max-width:800px; margin-bottom:55px; }.section-heading h2,.trust h2,.early-access h2 { margin-bottom:18px; font-size:clamp(2.5rem,4.6vw,5rem); letter-spacing:-.04em; }.section-heading>p:last-child { color:var(--muted); font-size:1.08rem; }
.problem { background:var(--black); color:white; }.problem .eyebrow { color:#ddb873; }.problem .section-heading { max-width:930px; }.problem-grid { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:40px; }.patchwork { display:flex; flex-wrap:wrap; gap:10px; }.patchwork span { padding:11px 14px; border:1px solid #4b5753; border-radius:8px; color:#aeb9b5; text-decoration:line-through; }.arrow { color:var(--gold); font-size:2.4rem; }.one-place { display:flex; align-items:center; gap:18px; padding:24px; border:1px solid var(--gold); border-radius:16px; background:#1c332e; }.one-place .brand-mark { flex:0 0 48px; width:48px; height:48px; }.one-place .brand-mark:before { top:10px; left:13px; width:19px; height:24px; }.one-place .brand-mark:after { top:24px; left:22px; height:14px; }.one-place strong { font-family:Georgia,serif; font-size:1.4rem; }.one-place p { margin:4px 0 0; color:#bdd0ca; }
.workflow { background:var(--cream); }.workflow-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:0; padding:0; list-style:none; background:var(--line); border:1px solid var(--line); }.workflow-steps li { position:relative; min-height:315px; padding:30px; background:var(--paper); }.workflow-steps li>span { color:#98aaa4; font-size:.68rem; font-weight:900; }.step-icon { display:grid; width:48px; height:48px; margin:38px 0 25px; place-items:center; border-radius:50%; color:var(--green); background:var(--leaf); font-size:1.4rem; }.workflow-steps h3 { margin-bottom:12px; font-size:1.45rem; }.workflow-steps p { color:var(--muted); font-size:.9rem; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.feature { overflow:hidden; min-height:285px; padding:30px; border:1px solid var(--line); border-radius:18px; background:white; }.feature:nth-child(3n) { border-top:3px solid var(--gold); }.feature-wide { display:grid; grid-column:span 2; grid-template-columns:1fr .85fr; gap:30px; background:#eef4eb; }.feature-icon { display:grid; width:42px; height:42px; margin-bottom:35px; place-items:center; border-radius:12px; color:#6b4718; background:var(--gold-soft); font-size:1.15rem; }.feature h3 { margin-bottom:12px; color:var(--black); font-size:1.65rem; }.feature p { color:var(--muted); }.tag-row { display:flex; flex-wrap:wrap; gap:7px; margin-top:25px; }.tag-row span { padding:5px 10px; border-radius:999px; color:var(--green); background:var(--leaf); font-size:.7rem; font-weight:800; }.email-mini { align-self:center; padding:25px; border-top:4px solid var(--gold); background:white; border-radius:12px; box-shadow:0 15px 40px rgba(17,23,21,.12); }.email-mini header { width:38%; height:12px; border-radius:10px; background:var(--black); }.email-mini h4 { margin:22px 0 16px; color:var(--black); font-family:Georgia,serif; font-size:1.35rem; }.email-mini p { height:6px; margin:8px 0; border-radius:5px; background:#d8dfd7; }.email-mini p:nth-of-type(2) { width:74%; }.email-mini button { margin-top:18px; padding:9px 13px; border:0; border-radius:20px; color:white; background:var(--black); }.sequence-mini { display:grid; gap:8px; margin-top:25px; }.sequence-mini span { padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-size:.72rem; font-weight:800; }.sequence-mini i { width:2px; height:10px; margin:auto; background:var(--gold); }
.audiences { background:var(--cream); }.audience-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }.audience-grid article { padding:38px 38px 38px 0; border-right:1px solid var(--line); }.audience-grid article+article { padding-left:38px; }.audience-grid article:last-child { border:0; }.audience-grid span { color:var(--gold); font-size:.7rem; font-weight:900; }.audience-grid h3 { margin:40px 0 15px; font-size:1.8rem; }.audience-grid p { color:var(--muted); }
.trust { display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:10vw; color:white; background:var(--green); }.trust .eyebrow { color:#c4ddc5; }.trust-copy p:last-child { color:#d5e4df; font-size:1.05rem; }.trust-list { display:grid; gap:15px; margin:0; padding:0; list-style:none; }.trust-list li { padding:18px 20px; border:1px solid rgba(255,255,255,.2); border-radius:10px; background:rgba(255,255,255,.06); font-weight:800; }.trust-list li:before { content:"✓"; margin-right:12px; color:#d1e9cf; }
.early-access { display:grid; grid-template-columns:1fr .8fr; gap:10vw; align-items:start; background:radial-gradient(circle at 90% 90%,#dce9dc,transparent 32%),var(--paper); }.early-copy>p:last-child { color:var(--muted); font-size:1.05rem; }.early-form { padding:30px; border:1px solid var(--line); border-radius:18px; background:white; box-shadow:var(--shadow); }.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.early-form label { display:grid; gap:6px; margin-bottom:14px; color:var(--ink); font-size:.77rem; font-weight:800; }.early-form input:not([type=checkbox]) { width:100%; min-height:48px; padding:10px 12px; border:1px solid #bdc9c3; border-radius:9px; color:var(--ink); background:#fff; font:inherit; }.early-form input:focus { outline:3px solid rgba(31,93,77,.16); border-color:var(--green); }.early-form .consent { display:flex; align-items:flex-start; gap:10px; color:var(--muted); font-weight:500; }.consent input { margin-top:5px; }.early-form .button { width:100%; border:0; font-size:.9rem; }.honeypot { position:absolute; left:-10000px; }.form-status { min-height:24px; margin:12px 0 0; color:var(--green); font-size:.82rem; font-weight:700; }.form-status.error { color:#9d352c; }
.site-footer { display:grid; grid-template-columns:1fr auto; gap:16px 50px; align-items:center; padding:45px clamp(22px,7vw,120px); border-top:1px solid var(--line); }.site-footer p { color:var(--muted); }.site-footer>div { display:flex; gap:20px; }.site-footer>div a { color:var(--green); font-size:.82rem; font-weight:800; }.site-footer small { grid-column:1/-1; color:#84938e; }
.legal-page { max-width:900px; min-height:70vh; margin:auto; padding:clamp(80px,10vw,130px) 24px; }.legal-page h1 { max-width:760px; font-size:clamp(3rem,6vw,5.5rem); }.legal-page section { max-width:750px; margin-top:45px; }.legal-page section h2 { margin-bottom:10px; font-size:1.65rem; }.legal-page section p,.legal-updated { color:var(--muted); }.legal-page a,.consent a { color:var(--green); font-weight:800; }
.js .reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease,transform .6s ease; }.js .reveal.visible { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.reveal { opacity:1; transform:none; transition:none; } }
@media (max-width:980px) { .hero { grid-template-columns:1fr; }.product-window { max-width:760px; }.workflow-steps { grid-template-columns:1fr 1fr; }.feature-grid { grid-template-columns:1fr 1fr; }.trust,.early-access { grid-template-columns:1fr; }.problem-grid { grid-template-columns:1fr; }.arrow { transform:rotate(90deg); text-align:center; } }
@media (max-width:720px) { .site-header { min-height:66px; }.nav-toggle { display:block; padding:8px 12px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:white; font-weight:800; }.site-header nav { position:absolute; top:66px; right:16px; left:16px; display:none; align-items:stretch; padding:18px; border:1px solid var(--line); border-radius:12px; background:white; box-shadow:var(--shadow); }.site-header nav.open { display:grid; }.hero { min-height:0; padding-top:70px; }.product-shell { grid-template-columns:42px 1fr; min-height:360px; }.product-main { padding:20px 15px; }.metrics { grid-template-columns:1fr 1fr; }.metrics div:last-child { display:none; }.activity:nth-of-type(3) { display:none; }.workflow-steps,.feature-grid,.audience-grid { grid-template-columns:1fr; }.feature-wide { grid-column:auto; grid-template-columns:1fr; }.audience-grid article,.audience-grid article+article { padding:30px 0; border-right:0; border-bottom:1px solid var(--line); }.form-row { grid-template-columns:1fr; }.site-footer { grid-template-columns:1fr; }.site-footer small { grid-column:auto; } }
@media (max-width:720px) { .simple-header nav { position:static; display:flex; padding:0; border:0; background:transparent; box-shadow:none; }.simple-header nav a:first-child { display:none; } }