:root { --ink:#173245; --paper:#f7f4ed; --mist:#dce8e5; --teal:#0e8179; --coral:#c85446; --gold:#d7a557; --line:#cad5d0; --muted:#5f7075; --night:#132c3b; } * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope,sans-serif; letter-spacing:0; } a { color:inherit; } .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; } .site-header { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; width:min(1240px,calc(100% - 48px)); margin:auto; min-height:80px; border-bottom:1px solid var(--line); } .brand { display:inline-flex; align-items:center; gap:9px; color:var(--ink); font-weight:700; text-decoration:none; } .brand img { width:31px; height:31px; } .site-nav { display:flex; gap:28px; font-size:13px; font-weight:600; } .site-nav a { text-decoration:none; } .site-nav a:hover,.text-link:hover { color:var(--teal); } .menu-button { display:none; } .hero { display:grid; grid-template-columns:minmax(320px,.8fr) minmax(520px,1.2fr); gap:72px; align-items:center; width:min(1240px,calc(100% - 48px)); min-height:650px; margin:auto; padding:60px 0 90px; } .eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 16px; color:var(--teal); font-family:"DM Mono",monospace; font-size:11px; font-weight:500; text-transform:uppercase; } .eyebrow span { width:19px; height:2px; background:currentColor; } h1,h2,h3,p { margin-top:0; } h1,h2 { font-family:Fraunces,serif; font-weight:600; } h1 { max-width:550px; margin-bottom:24px; font-size:clamp(46px,5vw,76px); line-height:1; } .hero-summary { max-width:510px; color:var(--muted); font-size:16px; line-height:1.7; } .hero-actions { display:flex; align-items:center; gap:25px; margin-top:31px; } .button { display:inline-flex; align-items:center; justify-content:center; gap:18px; min-height:46px; padding:0 18px; border:1px solid transparent; border-radius:4px; font-size:13px; font-weight:700; text-decoration:none; } .button.primary { color:#fff; background:var(--teal); box-shadow:6px 6px 0 var(--gold); } .button.primary:hover { background:#096861; transform:translate(-1px,-1px); } .text-link { color:var(--ink); font-size:13px; font-weight:700; text-decoration:none; } .platform-note { margin:34px 0 0; color:#7a8989; font-family:"DM Mono",monospace; font-size:10px; } .product-window { overflow:hidden; border:1px solid #274454; border-radius:7px; background:#f6f8f7; box-shadow:18px 22px 0 #d0ded7,0 25px 50px rgba(18,44,59,.16); animation:rise .75s ease-out both; } .window-bar { display:flex; align-items:center; gap:6px; height:32px; padding:0 12px; color:#d7e3e4; background:#173245; font-family:"DM Mono",monospace; font-size:9px; } .window-dot { width:7px; height:7px; border-radius:50%; } .window-dot.red { background:var(--coral); }.window-dot.gold { background:var(--gold); }.window-dot.green { background:#66bb8f; }.window-title { margin-left:7px; }.window-title small { margin-left:5px; color:#95abb0; }.window-local { margin-left:auto; color:#8cd3aa; }.window-content { display:flex; min-height:400px; }.preview-sidebar { display:flex; flex:0 0 130px; flex-direction:column; gap:15px; padding:16px 10px; color:#b7c9cc; background:#1d3039; font-size:8px; }.preview-brand { display:flex; align-items:center; gap:5px; color:#fff; font-size:10px; font-weight:700; }.preview-brand img { width:20px; height:20px; }.preview-sidebar p { margin:8px 0 0; color:#78919a; font-size:7px; }.preview-sidebar > span { padding:7px 6px; }.preview-sidebar .nav-active { color:#fff; background:#344a54; }.preview-sidebar small { margin-top:auto; color:#91a5aa; line-height:1.5; }.preview-sidebar i { display:inline-block; width:5px; height:5px; border-radius:50%; background:#69c58c; }.preview-workspace { flex:1; min-width:0; background:#eff2f1; }.preview-top { display:flex; align-items:center; gap:8px; height:47px; padding:0 14px; background:#fff; border-bottom:1px solid #dbe2df; font-size:10px; }.file-mark { padding:5px 3px; color:#fff; background:var(--coral); font-size:7px; font-weight:700; }.preview-top button { margin-left:auto; border:0; border-radius:2px; padding:7px 8px; color:#fff; background:#19789c; font-size:8px; }.preview-tools { display:flex; align-items:center; gap:8px; height:38px; padding:0 12px; overflow:hidden; border-bottom:1px solid #d8dfdc; color:#63767b; font-size:7px; white-space:nowrap; }.preview-tools span { margin-left:5px; font-weight:700; }.preview-tools b { color:#53686d; font-size:12px; font-weight:400; }.preview-canvas { display:grid; grid-template-columns:86px minmax(160px,1fr) 116px; min-height:315px; background:#718187; }.preview-rail { padding:12px 10px; overflow:hidden; background:#e4e9e7; }.preview-rail div { height:52px; margin-bottom:10px; border:1px solid #d6d6cd; background:linear-gradient(#fffef9 42%,#eae9df 43% 45%,#fffef9 46%); box-shadow:0 2px 3px rgba(0,0,0,.15); }.preview-rail div:first-child { border-left:3px solid #19789c; }.preview-page { position:relative; align-self:center; justify-self:center; width:58%; min-width:140px; aspect-ratio:.69; padding:16% 13%; text-align:center; color:#263f4d; background:#fffdf5; box-shadow:0 9px 10px rgba(0,0,0,.35); }.preview-page p { margin-bottom:13%; color:#a36e44; font-family:"DM Mono",monospace; font-size:7px; letter-spacing:1px; }.preview-page h2 { margin-bottom:11%; font-size:clamp(15px,2vw,24px); line-height:1.02; }.preview-page em { color:#6f7d7b; font-size:8px; }.preview-page span { position:absolute; bottom:10px; left:0; right:0; font-size:7px; }.preview-inspector { padding:14px 10px; color:#66777a; background:#fff; font-size:7px; }.preview-inspector strong { color:#334d59; font-size:7px; }.preview-inspector dl { margin:12px 0; }.preview-inspector dl div { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid #e1e6e3; }.preview-inspector dt,.preview-inspector dd { margin:0; }.preview-inspector dd { color:#28434f; }.preview-inspector hr { margin:14px 0; border:0; border-top:1px solid #d9e1de; }.preview-inspector p { margin:12px 0 5px; }.preview-inspector select { width:100%; border:1px solid #c6d2cf; padding:4px; color:#536568; font-size:7px; }.workflow { width:min(1240px,calc(100% - 48px)); margin:auto; padding:110px 0 120px; }.section-heading { display:grid; grid-template-columns:.75fr 1.25fr; gap:30px; align-items:start; }.section-heading h2 { max-width:700px; margin:0; font-size:clamp(34px,4vw,54px); line-height:1.08; }.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:70px; }.steps article { padding-top:18px; border-top:2px solid var(--ink); }.step-number { color:var(--coral); font-family:"DM Mono",monospace; font-size:12px; }.steps h3 { margin:20px 0 12px; font-family:Fraunces,serif; font-size:25px; font-weight:600; }.steps p { max-width:340px; color:var(--muted); font-size:14px; line-height:1.65; }.privacy-band { display:grid; grid-template-columns:1fr 1fr; gap:60px; padding:90px max(24px,calc((100% - 1240px)/2)); color:#edf5f0; background:var(--night); }.eyebrow.light { color:#a8d8cb; }.privacy-band h2 { margin:0; font-size:clamp(40px,5vw,66px); line-height:1; }.privacy-band h2 em { color:var(--gold); font-style:italic; }.privacy-copy { align-self:end; max-width:460px; color:#c4d3d2; font-size:15px; line-height:1.7; }.privacy-copy ul { display:flex; gap:23px; padding:0; color:#fff; font-family:"DM Mono",monospace; font-size:10px; list-style:none; }.privacy-copy li::before { content:"•"; margin-right:5px; color:#69c58c; }.download-section { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; width:min(1100px,calc(100% - 48px)); margin:auto; padding:115px 0; }.download-section h2 { margin-bottom:22px; font-size:clamp(38px,4.6vw,62px); line-height:1.04; }.download-copy > p:last-child { max-width:450px; color:var(--muted); font-size:15px; line-height:1.65; }.download-panel { display:grid; grid-template-columns:54px 1fr auto; gap:15px; align-items:center; padding:23px; border:1px solid #a8c4bd; border-radius:6px; background:#e7f0eb; box-shadow:8px 8px 0 var(--gold); }.download-panel img { width:54px; height:54px; }.download-panel strong,.download-panel span { display:block; }.download-panel strong { font-family:Fraunces,serif; font-size:19px; }.download-panel span,.download-panel small { color:#60756f; font-size:10px; }.download-panel small { grid-column:2 / -1; } footer { display:flex; align-items:center; gap:20px; width:min(1240px,calc(100% - 48px)); margin:auto; min-height:90px; border-top:1px solid var(--line); color:#627276; font-size:12px; } footer p { margin:0; } footer > a:last-child { margin-left:auto; color:var(--ink); font-size:12px; text-decoration:none; } @keyframes rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } } @media (max-width:900px) { .hero { grid-template-columns:1fr; gap:52px; padding-top:65px; }.product-window { width:min(720px,100%); }.section-heading,.privacy-band,.download-section { grid-template-columns:1fr; }.steps { gap:40px; }.privacy-band { padding-top:70px; padding-bottom:70px; }.download-section { gap:40px; } } @media (max-width:640px) { .site-header { width:calc(100% - 32px); min-height:68px; }.menu-button { display:grid; gap:4px; width:38px; height:38px; place-content:center; border:1px solid var(--line); border-radius:3px; background:transparent; }.menu-button span:not(.sr-only) { width:16px; height:1px; background:var(--ink); }.site-nav { position:absolute; top:63px; right:0; left:0; display:none; flex-direction:column; gap:15px; padding:18px; border:1px solid var(--line); background:var(--paper); box-shadow:0 8px 20px rgba(18,44,59,.12); }.site-nav.open { display:flex; }.hero,.workflow,.download-section { width:calc(100% - 32px); }.hero { min-height:0; padding:56px 0 72px; }.hero-actions { align-items:flex-start; flex-direction:column; }.product-window { margin-left:0; }.window-content { min-height:290px; }.preview-sidebar { display:none; }.preview-canvas { grid-template-columns:54px minmax(130px,1fr) 90px; min-height:250px; }.preview-inspector { padding:10px 7px; }.preview-page { min-width:105px; }.preview-tools { gap:4px; }.preview-tools span:nth-of-type(n+3),.preview-tools b:nth-of-type(n+7) { display:none; }.workflow { padding:78px 0; }.steps { grid-template-columns:1fr; margin-top:48px; }.privacy-band { padding-right:16px; padding-left:16px; }.privacy-copy ul { flex-wrap:wrap; }.download-section { padding:78px 0; }.download-panel { grid-template-columns:48px 1fr; }.download-panel img { width:48px; height:48px; }.download-panel .button { grid-column:1 / -1; }.download-panel small { grid-column:1 / -1; } footer { width:calc(100% - 32px); flex-wrap:wrap; padding:20px 0; } footer > a:last-child { width:100%; margin-left:0; } }