:root { --ink:#202636; --muted:#677085; --line:#e7e9ef; --purple:#6659e8; --purple-dark:#5044cb; --lavender:#f3f1ff; --green:#21796c; --mint:#e9f7f3; --orange:#a9611e; --peach:#fff4e8; --bg:#fbfbfd; }
* { box-sizing:border-box; } body { margin:0; background:radial-gradient(circle at 85% 0%,#f0efff 0,transparent 25rem),var(--bg); color:var(--ink); font-family:"DM Sans",Arial,sans-serif; } button,a { font:inherit; } button { cursor:pointer; } .shell { max-width:1160px; margin:auto; padding:0 36px; min-height:100vh; display:flex; flex-direction:column; }
.topbar { height:92px; display:flex; align-items:center; justify-content:space-between; } .brand { color:var(--ink); text-decoration:none; font-size:23px; font-weight:700; letter-spacing:-.8px; display:flex; align-items:center; gap:8px; } .brand-mark { display:inline-grid; place-items:center; width:28px; height:28px; border-radius:9px; color:white; background:var(--purple); font-family:Fraunces,serif; font-size:18px; } .demo-pill { padding:8px 12px; border:1px solid #dcd8fb; color:#5d55aa; border-radius:99px; background:#f7f6ff; font-size:13px; font-weight:600; } .demo-pill span { display:inline-block; width:7px; height:7px; background:#8d7eff; border-radius:50%; margin-right:6px; }
.hero { display:flex; justify-content:space-between; gap:50px; padding:58px 0 54px; align-items:flex-end; } .eyebrow,.stage-kicker { color:var(--purple); text-transform:uppercase; letter-spacing:1.3px; font-weight:700; font-size:11px; margin:0 0 13px; } h1 { margin:0; font-family:Fraunces,Georgia,serif; font-size:clamp(38px,5vw,62px); line-height:1.04; letter-spacing:-2.3px; max-width:750px; } h1 em { color:var(--purple); font-style:normal; } .lede { color:var(--muted); max-width:580px; line-height:1.6; font-size:17px; margin:22px 0 0; } .trust-note { display:flex; gap:11px; padding:16px 18px; border-radius:15px; background:#fff; border:1px solid var(--line); min-width:246px; box-shadow:0 10px 30px rgba(35,40,60,.05); } .trust-note p { margin:0; font-size:13px; color:var(--muted); line-height:1.45; } .trust-note strong { color:var(--ink); } .lock { color:var(--orange); font-size:23px; }
.workspace { background:#fff; border:1px solid var(--line); border-radius:24px; box-shadow:0 15px 45px rgba(40,44,70,.055); overflow:hidden; margin-bottom:34px; } .stepper { display:flex; align-items:center; padding:22px 36px; border-bottom:1px solid var(--line); } .step { padding:0; background:transparent; border:0; display:flex; align-items:center; gap:8px; color:#99a0b0; font-size:13px; font-weight:600; white-space:nowrap; } .step b { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#f0f1f5; font-size:12px; } .step.active { color:var(--ink); } .step.active b { background:var(--purple); color:#fff; } .stepper i { height:1px; flex:1; background:#e6e7ec; margin:0 11px; }
.stage-wrap { max-width:660px; padding:40px 0 50px; margin:auto; } .demo-banner { margin:0 0 30px; padding:10px 13px; border-radius:9px; background:#faf9ff; color:#625a9e; font-size:12px; text-align:center; } .demo-banner span { padding-right:5px; } .stage { text-align:center; } .stage h2 { font-family:Fraunces,Georgia,serif; font-size:32px; letter-spacing:-1.1px; margin:0; } .stage-copy { color:var(--muted); font-size:15px; max-width:510px; margin:12px auto 27px; line-height:1.55; } .dropzone { width:100%; min-height:228px; padding:26px; border:1.5px dashed #c7c2f5; border-radius:18px; background:linear-gradient(145deg,#fcfbff,#f7f6ff); color:var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; transition:.2s ease; } .dropzone:hover,.dropzone:focus-visible { border-color:var(--purple); transform:translateY(-2px); outline:3px solid #e9e7ff; outline-offset:2px; } .dropzone strong { font-size:16px; margin-top:4px; } .dropzone > span:not(.file-icon) { color:var(--muted); font-size:13px; } .dropzone small { margin-top:10px; color:#848096; font-size:11px; } .file-icon { display:grid; place-items:center; width:43px; height:43px; border-radius:13px; font-weight:700; font-size:21px; } .private-icon { background:var(--peach); color:var(--orange); } .safe-icon { background:var(--mint); color:var(--green); } .privacy-line { font-size:12px; color:var(--orange); margin:16px 0 0; } .privacy-line span { font-size:9px; padding-right:5px; }
.document-card { text-align:left; display:flex; align-items:center; gap:14px; border-radius:17px; padding:17px; border:1px solid; background:#fff; } .safe-card { border-color:#cceae3; } .private-card { border-color:#f0dcc6; } .file-detail { display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; } .file-detail strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:14px; } .file-detail small { color:var(--muted); font-size:12px; } .state-label { width:max-content; font-size:10px; text-transform:uppercase; letter-spacing:.8px; font-weight:700; } .safe-label { color:var(--green); } .private-label { color:var(--orange); } .download { border:0; border-radius:9px; padding:10px 12px; background:var(--mint); color:var(--green); font-size:13px; font-weight:700; white-space:nowrap; } .private-download { background:var(--peach); color:var(--orange); } .download:hover,.download:focus-visible { filter:brightness(.96); outline:2px solid currentColor; outline-offset:2px; }
.report { margin:16px 0 23px; text-align:left; border:1px solid var(--line); border-radius:12px; overflow:hidden; } .report summary { display:flex; gap:8px; align-items:center; padding:13px 15px; cursor:pointer; font-size:13px; font-weight:600; } .report summary span { border-radius:7px; background:var(--lavender); color:var(--purple); padding:3px 6px; font-size:11px; } .report summary b { margin-left:auto; color:var(--purple); font-size:12px; } .report-body { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:14px 15px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; } .report-body span { display:flex; justify-content:space-between; } .report-body b { color:var(--ink); }
.primary,.secondary { border:0; border-radius:11px; padding:13px 18px; font-weight:700; font-size:14px; } .primary { color:#fff; background:var(--purple); box-shadow:0 8px 16px rgba(102,89,232,.2); } .primary:hover,.primary:focus-visible { background:var(--purple-dark); outline:3px solid #dedaff; outline-offset:2px; } .secondary { color:var(--purple); background:var(--lavender); } .secondary:hover,.secondary:focus-visible { outline:3px solid #dedaff; outline-offset:2px; } .quiet-note { color:var(--muted); font-size:12px; margin:15px 0 0; } .return-zone { border-color:#b9ded7; background:linear-gradient(145deg,#fcfffe,#f4fcfa); } .complete-note { display:flex; text-align:left; gap:11px; align-items:flex-start; margin:18px 0 22px; padding:15px; background:#f7fdfb; color:var(--green); border-radius:12px; } .complete-note > span { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#ccefe8; font-size:12px; } .complete-note strong { font-size:13px; } .complete-note p { color:#658178; margin:3px 0 0; font-size:12px; }
footer { display:flex; justify-content:space-between; gap:20px; color:#8a91a0; font-size:11px; line-height:1.5; padding:0 0 24px; } footer span:last-child { white-space:nowrap; }
@media (max-width:720px) { .shell { padding:0 18px; }.topbar { height:70px; }.hero { padding:34px 0 36px; display:block; }.trust-note { margin-top:25px; max-width:310px; }.stepper { padding:16px 14px; overflow-x:auto; }.stepper i { min-width:14px; margin:0 7px; }.step span { display:none; }.stage-wrap { padding:26px 18px 32px; }.stage h2 { font-size:28px; }.document-card { align-items:flex-start; flex-wrap:wrap; }.download { margin-left:57px; }.report-body { grid-template-columns:1fr; }.stage-copy { font-size:14px; }.dropzone { min-height:210px; } footer { display:block; } footer span { display:block; margin-bottom:5px; } }