:root{--ink:#14233b;--green:#1457b8;--mint:#78b7ff;--cream:#f4f8ff;--paper:#fff;--coral:#20a4f3;--line:#d7e2f0;--muted:#5f7088;--serif:Georgia,'Times New Roman',serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:'DM Sans',sans-serif;background:var(--cream);line-height:1.5}
button,a{font:inherit}
button{cursor:pointer}
.site-header{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 max(5vw,24px);position:relative;z-index:20;background:rgba(247,245,239,.9);backdrop-filter:blur(16px);border-bottom:1px solid rgba(24,51,46,.08)}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font:800 20px 'Manrope';text-decoration:none;letter-spacing:-.7px}
.brand-mark{width:30px;height:30px;background:var(--green);border-radius:9px;display:grid;place-items:center}
.brand-mark svg{width:22px;fill:none;stroke:var(--mint);stroke-width:2}
.brand-amp{color:#64a149}
.desktop-nav{display:flex;gap:34px}
.desktop-nav a,.text-button{color:#40554f;text-decoration:none;background:none;border:0;font-size:14px;font-weight:600}
.desktop-nav a:hover{color:var(--green)}
.header-actions{display:flex;align-items:center;gap:18px}
.button{border:0;border-radius:8px;background:var(--green);color:white;padding:13px 20px;font-weight:700;box-shadow:0 2px 0 rgba(0,0,0,.1);transition:.2s transform,.2s background}
.button:hover{transform:translateY(-2px);background:#114c3f}
.button-small{font-size:14px}
.button-large{padding:16px 24px}
.button span{margin-left:8px}
.menu-button{display:none;background:transparent;border:0}
.hero{min-height:700px;padding:100px max(5vw,24px) 110px;display:grid;grid-template-columns:.82fr 1.18fr;align-items:center;gap:55px;overflow:hidden;position:relative}
.hero-glow{position:absolute;width:700px;height:700px;right:-150px;top:-80px;background:radial-gradient(circle,#d9efc3 0,rgba(217,239,195,0) 67%);pointer-events:none}
.hero-copy{position:relative;z-index:2;max-width:600px}
.eyebrow{text-transform:uppercase;font:700 12px 'Manrope';letter-spacing:1.6px;color:#507067;display:flex;align-items:center;gap:10px;margin-bottom:25px}
.eyebrow>span{width:22px;height:2px;background:var(--coral)}
h1,h2{font-family:'Manrope';letter-spacing:-3px;line-height:1.04;margin:0}
h1{font-size:clamp(54px,6vw,86px);font-weight:700}
h1 em,h2 em{font-family:var(--serif);font-weight:400;color:#3f7464}
.hero-copy>p{font-size:18px;color:var(--muted);max-width:510px;margin:28px 0}
.hero-actions{display:flex;gap:12px}
.button-secondary{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px #b9c0ba}
.button-secondary:hover{background:white}
.play{font-size:10px;margin:0 8px 0 0!important}
.hero-copy .fine-print{font-size:12px;margin:16px 0;color:#76847f}
.fine-print span{margin:0 8px}
.hero-product{position:relative;z-index:2}
.app-window{height:520px;background:#fdfdfb;border-radius:16px;display:flex;box-shadow:0 32px 80px rgba(28,61,51,.18),0 0 0 1px rgba(24,51,46,.08);overflow:hidden;transform:perspective(1200px) rotateY(-2deg)}
.app-sidebar{width:62px;background:#153d34;display:flex;flex-direction:column;align-items:center;gap:18px;padding-top:18px}
.mini-logo{width:34px;height:34px;border-radius:9px;background:var(--mint);display:grid;place-items:center;color:var(--green);font:800 13px 'Manrope'}
.mini-logo span{color:#73a342}
.side-icon{width:34px;height:34px;border-radius:8px;display:grid;place-items:center}
.side-icon.active{background:rgba(255,255,255,.13)}
.side-icon svg{width:17px;fill:none;stroke:#b5c8c1;stroke-width:1.7}
.app-main{flex:1;display:flex;flex-direction:column;min-width:0}
.app-topbar{height:56px;background:white;border-bottom:1px solid #e5e7e2;display:flex;align-items:center;justify-content:space-between;padding:0 20px;font-size:13px;font-weight:700}
.dots{letter-spacing:2px;color:#90a09a}
.editor{display:flex;flex:1;min-height:0}
.tool-panel{width:138px;background:#f5f6f3;padding:22px 13px;border-right:1px solid #e3e5df}
.tool-label{font-size:8px;letter-spacing:1px;color:#87938f;font-weight:700}
.field-tool{width:100%;background:white;border:1px solid #e1e4de;border-radius:6px;padding:9px 7px;margin-top:9px;text-align:left;font-size:10px;color:#4b5e58;display:flex;align-items:center;gap:7px;box-shadow:0 2px 4px rgba(0,0,0,.03)}
.tool-glyph{color:#2d6b5b;font:700 11px Georgia}
.signature-glyph{font-size:17px}
.document-area{flex:1;background:#e9ebe7;padding:22px;overflow:hidden}
.document-page{background:white;width:72%;min-width:285px;height:430px;margin:auto;box-shadow:0 3px 10px rgba(0,0,0,.09);padding:28px 34px;position:relative;color:#2b3431}
.doc-brand{font:700 7px 'Manrope';letter-spacing:1px}
.doc-brand span{font-weight:400;color:#89918e}
.document-page h3{font:700 21px 'Manrope';margin:34px 0 8px}
.doc-intro{font-size:6px;color:#7d8582;width:75%}
.doc-lines i,.doc-section i{display:block;height:3px;background:#e4e7e3;margin:5px 0;width:100%}
.doc-lines .short{width:65%}
.doc-section{display:flex;gap:12px;margin-top:22px}
.doc-section>b{font:500 8px 'Manrope';color:#84a398}
.doc-section>span{flex:1}
.doc-section strong{font-size:8px}
.signature-field,.date-field{position:absolute;bottom:48px;border:1.5px solid #53a184;background:#effcf4;border-radius:4px;width:130px;height:45px;padding:5px 8px}
.signature-field{left:34px}
.date-field{right:34px}
.signature-field small,.date-field small{display:block;color:#4d7a6c;font-size:6px}
.signature-field strong{font:italic 14px Georgia}
.date-field strong{font-size:8px}
.signature-field span{position:absolute;right:5px;top:4px;background:#4f9a7f;color:white;width:12px;height:12px;border-radius:50%;font-size:8px;text-align:center}
.app-footer{height:62px;background:white;border-top:1px solid #e5e7e2;display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-size:9px;color:#73817c}
.app-footer button{background:var(--green);color:white;border:0;border-radius:6px;padding:10px 13px;font-size:10px;font-weight:700}
.floating-pill{position:absolute;z-index:3;background:white;border:1px solid #e4e6e0;box-shadow:0 15px 35px rgba(24,51,46,.14);border-radius:12px;padding:11px 13px;display:flex;align-items:center;gap:9px;font-size:10px}
.floating-pill strong,.floating-pill small{display:block}
.floating-pill small{color:#84908c}
.pill-top{right:-20px;top:-30px}
.pill-bottom{left:-30px;bottom:-28px}
.avatar{width:28px;height:28px;background:#daf0ff;color:#30617d;border-radius:50%;display:grid;place-items:center;font-size:9px;font-weight:700;flex:none}
.avatar-green{background:#d9f2da;color:#38744a}
.check{margin-left:14px;color:#3d8d68;background:#e0f5e9;border-radius:50%;width:20px;height:20px;display:grid;place-items:center}
.status-icon{width:30px;height:30px;background:#ecf5ca;color:#397158;display:grid;place-items:center;border-radius:8px;font-size:16px}
.trust-strip{border-top:1px solid #dcdfd9;border-bottom:1px solid #dcdfd9;padding:30px max(5vw,24px);display:flex;align-items:center;justify-content:space-between;color:#7c8883}
.trust-strip p{font-size:11px;text-transform:uppercase;letter-spacing:1.2px}
.logos{display:flex;align-items:center;justify-content:space-between;gap:4vw;width:65%;font:700 15px 'Manrope';color:#71807a}
.logos span:nth-child(3){font-size:20px}
.workflow{padding:130px max(5vw,24px)}
.section-heading{text-align:center;max-width:660px;margin:0 auto 60px}
.section-heading .eyebrow{justify-content:center}
.section-heading h2,.feature-copy h2,.security h2{font-size:clamp(42px,5vw,65px)}
.section-heading>p,.feature-copy>p{color:var(--muted);font-size:17px;max-width:580px;margin:22px auto}
.step-grid{display:grid;grid-template-columns:repeat(3,1fr);max-width:1160px;margin:auto;gap:20px}
.step-card{background:#eeece5;border-radius:14px;padding:28px;position:relative;min-height:420px}
.step-card.featured{background:#e4f0d4}
.step-number{font:700 11px 'Manrope';color:#829089}
.step-visual{height:210px;display:flex;flex-direction:column;justify-content:center;gap:9px;margin-top:8px}
.step-card h3{font:700 21px 'Manrope';margin:16px 0 7px}
.step-card>p{font-size:13px;color:#6a7873;margin:0}
.upload-visual{align-items:center;position:relative}
.upload-sheet{width:130px;height:156px;background:white;border-radius:5px;box-shadow:0 12px 25px rgba(31,55,46,.1);padding:22px 18px;transform:rotate(-4deg)}
.pdf-tag{background:#ffe1da;color:#c35843;font-size:7px;font-weight:700;padding:4px}
.upload-sheet i{display:block;height:4px;background:#e7e9e5;margin-top:15px}
.upload-sheet i+ i{margin-top:8px}
.upload-arrow{position:absolute;background:var(--green);color:white;border-radius:50%;width:40px;height:40px;display:grid;place-items:center;bottom:20px;right:25%;font-size:20px}
.recipient-card{background:white;border-radius:9px;padding:13px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 7px 17px rgba(31,55,46,.07)}
.recipient-card>div{display:flex;align-items:center;gap:9px}
.recipient-card p,.recipient-card strong,.recipient-card small{margin:0;display:block;font-size:9px}
.recipient-card small{color:#8a9591}
.role-tag{font-size:7px;background:#edf6d5;color:#4f6e28;padding:4px 6px;border-radius:10px}
.faded{opacity:.72;transform:scale(.95)}
.avatar-coral{background:#ffe2dd;color:#a94f40}
.send-visual{align-items:center}
.sent-ring{width:82px;height:82px;border-radius:50%;background:#dff2aa;display:grid;place-items:center;box-shadow:0 0 0 13px rgba(215,237,160,.3)}
.sent-ring svg{width:38px;fill:none;stroke:var(--green);stroke-width:3}
.send-visual>span{font-weight:700;margin-top:14px}
.send-visual>small{color:#84908c}
.features{padding:120px max(5vw,24px);background:white;display:grid;grid-template-columns:1fr 1fr;gap:10vw;align-items:center}
.feature-visual{background:#e8f1dd;border-radius:18px;min-height:500px;display:grid;place-items:center;position:relative;padding:50px}
.activity-card{background:white;width:min(400px,95%);border-radius:13px;box-shadow:0 25px 50px rgba(31,74,59,.13);padding:23px}
.activity-header{display:flex;justify-content:space-between;font-size:12px;font-weight:700;border-bottom:1px solid #edf0eb;padding-bottom:15px}
.activity-header small{color:#8c9793;font-weight:500}
.pulse{width:7px;height:7px;background:#61a87f;display:inline-block;border-radius:50%;margin-right:6px}
.timeline{padding:8px 0 0 13px}
.timeline-row{display:flex;gap:13px;padding:13px 0;border-left:1px solid #d9dfda}
.timeline-row>span{width:26px;height:26px;border-radius:50%;background:#edf0ec;display:grid;place-items:center;margin-left:-13px;font-size:10px}
.timeline-row.done>span{background:#dff2cc;color:#3b7654}
.timeline-row p,.timeline-row strong,.timeline-row small{margin:0;display:block;font-size:10px}
.timeline-row small{color:#9aa39f}
.completion-card{position:absolute;right:10px;bottom:35px;background:var(--green);color:white;border-radius:11px;padding:16px 20px;box-shadow:0 12px 30px rgba(25,93,77,.24)}
.completion-card span{display:block;font:700 25px 'Manrope'}
.completion-card small{opacity:.7}
.completion-card div{width:90px;height:4px;background:rgba(255,255,255,.2);margin-top:10px;border-radius:3px}
.completion-card i{display:block;width:100%;height:100%;background:var(--mint)}
.feature-copy{max-width:560px}
.feature-copy ul{list-style:none;padding:0;margin-top:30px}
.feature-copy li{margin:15px 0;font-weight:600}
.feature-copy li span{width:23px;height:23px;background:#e1f0c0;border-radius:50%;display:inline-grid;place-items:center;margin-right:10px;font-size:11px}
.security{background:var(--green);color:white;padding:100px max(5vw,24px);display:grid;grid-template-columns:1.15fr .85fr;gap:10vw;align-items:end}
.eyebrow.light{color:#b6d2c8}
.security h2 em{color:#d6efa7}
.security-copy>p{color:#c2d5ce;max-width:500px}
.security-badges{display:flex;gap:12px;margin-top:30px}
.security-badges span{border:1px solid rgba(255,255,255,.25);border-radius:7px;padding:12px 15px;font-size:11px;font-weight:700}
.pricing{padding:120px max(5vw,24px)}
.section-heading.compact{margin-bottom:40px}
.price-card{max-width:970px;margin:auto;background:white;border-radius:16px;padding:40px 46px;box-shadow:0 12px 45px rgba(24,51,46,.07);display:grid;grid-template-columns:1.2fr 1fr auto;gap:55px;align-items:center;border-top:4px solid var(--mint)}
.plan-label{font-size:10px;font-weight:700;letter-spacing:1px;color:#638177}
.price-card h3{font:700 43px 'Manrope';margin:8px 0}
.price-card h3 small{font:500 13px 'DM Sans';color:#7b8984}
.price-card p{font-size:12px;color:#73817c}
.price-card ul{list-style:none;padding:0;font-size:13px;line-height:2;color:#536660}
.final-cta{text-align:center;background:#c9ed6f;padding:100px 24px;color:#173e34}
.final-cta h2{font-size:clamp(43px,5vw,64px)}
.final-cta p{font-size:17px}
.final-cta small{display:block;margin-top:13px;color:#557164}
.button-light{background:white;color:var(--green);box-shadow:none}
.button-light:hover{background:#f8fff0}
.cta-scribble{font:50px Georgia;margin-bottom:12px}
footer{background:#112f28;color:#c0d0cb;padding:55px max(5vw,24px);display:grid;grid-template-columns:1fr 1fr auto;gap:20px;align-items:center;font-size:12px}
.footer-brand{color:white}
.footer-brand .brand-mark{background:var(--mint)}
footer div a{color:#c0d0cb;text-decoration:none;margin-left:20px}
footer>small{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.1);padding-top:25px;color:#718a82}
.modal-backdrop{position:fixed;inset:0;background:rgba(9,28,23,.72);z-index:100;display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;transition:.25s}
.modal-backdrop.open{opacity:1;visibility:visible}
.modal{background:#fbfaf6;border-radius:17px;width:min(460px,100%);padding:35px;text-align:center;position:relative;transform:translateY(15px);transition:.25s}
.open .modal{transform:none}
.modal-close{position:absolute;right:15px;top:12px;border:0;background:transparent;font-size:25px;color:#73817c}
.modal-icon{width:48px;height:48px;background:#e5f3be;color:var(--green);border-radius:12px;display:grid;place-items:center;margin:auto;font-size:25px}
.modal h2{font-size:28px;letter-spacing:-1.3px;margin-top:16px}
.modal>p{color:#71807b;font-size:14px}
.dropzone{border:1.5px dashed #adc0b8;border-radius:11px;padding:28px;display:flex;flex-direction:column;align-items:center;background:white;margin-top:22px;cursor:pointer}
.dropzone:hover{border-color:var(--green);background:#fafff5}
.dropzone input{display:none}
.dropzone strong{font-size:14px}
.dropzone small{font-size:11px;color:#899590}
.drop-icon{font-size:22px;color:var(--green)}
.modal-divider{display:flex;align-items:center;color:#a0a8a5;font-size:10px;margin:15px 0}
.modal-divider:before,.modal-divider:after{content:"";height:1px;background:#e0e3de;flex:1}
.modal-divider span{padding:0 9px}
.template-button{background:transparent;border:0;color:var(--green);font-weight:700}
.modal-note{font-size:9px!important;margin:22px 0 0!important}
.toast{position:fixed;right:25px;bottom:25px;z-index:120;background:#173f35;color:white;padding:15px 18px;border-radius:11px;display:flex;gap:12px;align-items:center;box-shadow:0 15px 35px rgba(0,0,0,.2);transform:translateY(100px);opacity:0;transition:.3s}
.toast.show{transform:none;opacity:1}
.toast>span{background:var(--mint);color:var(--green);border-radius:50%;width:25px;height:25px;display:grid;place-items:center}
.toast strong,.toast small{display:block;font-size:11px}
.toast small{color:#a9beb7}

@media(max-width:950px){.desktop-nav{display:none}
.hero{grid-template-columns:1fr;padding-top:70px}
.hero-copy{text-align:center;margin:auto}
.hero-copy .eyebrow,.hero-actions{justify-content:center}
.hero-product{max-width:720px;margin:40px auto 0;width:100%}
.step-grid{grid-template-columns:1fr;max-width:560px}
.step-card{min-height:380px}
.features{grid-template-columns:1fr}
.feature-copy{grid-row:1}
.security{grid-template-columns:1fr}
.price-card{grid-template-columns:1fr;gap:15px;max-width:600px}
.logos span:nth-child(even){display:none}
}

@media(max-width:620px){.site-header{height:70px}
.header-actions .text-button{display:block}
.menu-button{display:block}
.menu-button span{display:block;width:20px;height:2px;background:var(--ink);margin:5px}
.desktop-nav.open{display:flex;position:absolute;top:70px;left:0;right:0;background:var(--cream);padding:25px;flex-direction:column;border-bottom:1px solid #ddd;gap:18px}
.hero{padding-top:55px}
.hero-copy{text-align:left}
.hero-copy .eyebrow,.hero-actions{justify-content:flex-start}
.hero-actions{flex-direction:column}
.hero-actions .button{width:100%}
.app-window{height:420px}
.tool-panel{display:none}
.document-area{padding:13px}
.document-page{width:90%;min-width:250px;height:340px;padding:22px}
.signature-field,.date-field{bottom:30px;width:105px}
.pill-top{right:0}
.pill-bottom{left:0}
.trust-strip{display:block;text-align:center}
.logos{width:100%;margin-top:18px}
.workflow,.features,.pricing{padding-top:85px;padding-bottom:85px}
.feature-visual{min-height:420px;padding:25px}
.security{padding-top:75px;padding-bottom:75px}
.security-badges{flex-wrap:wrap}
footer{grid-template-columns:1fr;text-align:center}
.footer-brand{justify-content:center}
footer>small{grid-column:auto}
footer div a{margin:0 10px}
}

/* Blue palette refinements */
.site-header{background:rgba(244,248,255,.92);border-bottom-color:rgba(20,35,59,.08)}
.brand-amp,.mini-logo span{color:#337fda}
.button:hover{background:#0d4698}
.hero-glow{background:radial-gradient(circle,#d9eaff 0,rgba(217,234,255,0) 67%)}
h1 em,h2 em{color:#3978c5}
.app-window{box-shadow:0 32px 80px rgba(20,70,140,.18),0 0 0 1px rgba(20,35,59,.08)}
.app-sidebar,footer{background:#102f5a}
.tool-glyph{color:#226ac5}
.signature-field,.date-field{border-color:#5597e6;background:#edf6ff}
.signature-field small,.date-field small{color:#356ba8}
.signature-field span{background:#397fcf}
.step-card.featured,.feature-visual{background:#e4f0ff}
.upload-arrow,.completion-card{background:#1457b8}
.role-tag{background:#e6f1ff;color:#2e65a8}
.sent-ring{background:#dcecff;box-shadow:0 0 0 13px rgba(165,205,255,.3)}
.pulse{background:#4a91df}
.timeline-row.done>span{background:#ddebff;color:#286bb8}
.feature-copy li span{background:#dcecff}
.security-copy>p,.eyebrow.light{color:#c7dcf5}
.security h2 em{color:#9fcbff}
.final-cta{background:#7dbaff;color:#102f5a}
.final-cta small{color:#315e91}
.button-light:hover{background:#f2f8ff}
.modal-backdrop{background:rgba(8,28,55,.72)}
.modal-icon{background:#dcecff}
.dropzone:hover{background:#f5faff}
.toast{background:#123d72}


@media(max-width:620px){.header-actions .button-small{padding:9px 12px;font-size:12px;line-height:1;white-space:nowrap}}

@media(min-width:621px) and (max-width:950px){.menu-button{display:block}.menu-button span{display:block;width:20px;height:2px;background:var(--ink);margin:5px}.desktop-nav.open{display:flex;position:absolute;top:82px;left:0;right:0;background:var(--cream);padding:25px;flex-direction:column;border-bottom:1px solid #ddd;gap:18px}}