:root{--ink:#18372f;--muted:#60746d;--cream:#f5f0e8;--paper:#fff;--line:#d6e0db;--pink:#e91649;--blue:#1769e8;--green:#2f7b65;--shadow:0 18px 55px rgba(18,48,40,.12)}
[hidden]{display:none!important}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--ink);background:#faf9f6}
a{color:inherit}
.topbar{height:78px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,72px);position:sticky;top:0;z-index:50}
.wordmark{display:flex;align-items:center;gap:18px;text-decoration:none;font-weight:900;font-size:20px}
.wordmark img{width:158px}
.wordmark span{padding-left:18px;border-left:1px solid var(--line)}
nav{display:flex;gap:28px}
nav a{text-decoration:none;font-weight:700;font-size:14px}
.signHero{padding:clamp(50px,8vw,105px) clamp(22px,7vw,110px);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(310px,.65fr);gap:clamp(45px,7vw,100px);align-items:center;background:radial-gradient(circle at 7% 20%,#fff 0,#f9f5ed 44%,#ebf3ef 100%)}
.eyebrow{font-size:13px;letter-spacing:.18em;font-weight:900;color:var(--green)}
h1{font-size:clamp(38px,5.6vw,76px);line-height:1.02;margin:16px 0 24px;letter-spacing:-.045em}
h1 em{font-style:normal;color:var(--pink)}
.lead{font-size:clamp(18px,2vw,24px);line-height:1.55;color:#405c53;max-width:800px}
.heroPoints{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.heroPoints span{background:#fff;border:1px solid var(--line);border-radius:100px;padding:9px 14px;font-size:13px;font-weight:800}
.buyCard{background:#fff;padding:34px;border:1px solid #c9d8d1;box-shadow:var(--shadow)}
.buyCard>p{font-size:12px;letter-spacing:.16em;font-weight:900}
.price{display:flex;align-items:end;gap:10px;margin:8px 0}
.price b{font-size:74px;line-height:1}
.price span{font-weight:900;padding-bottom:10px;color:var(--muted)}
.buyCard ul{padding-left:20px;line-height:2}
.buyCard small{display:block;margin-top:16px;color:var(--muted);line-height:1.5}
.primaryButton,.secondaryButton{display:inline-flex;align-items:center;justify-content:center;border:0;text-decoration:none;font:inherit;font-weight:900;cursor:pointer}
.primaryButton{width:100%;background:var(--pink);color:#fff;padding:16px 22px;box-shadow:0 8px 24px #e9164933}
.primaryButton:hover{background:#c9113d}
.primaryButton:disabled{opacity:.55;cursor:not-allowed}
.secondaryButton{background:#fff;color:var(--ink);border:1px solid var(--line);padding:11px 16px}
.confirming,.sentPanel{min-height:72vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px}
.confirming h1,.sentPanel h1{font-size:clamp(32px,5vw,58px);max-width:850px}
.spinner{width:46px;height:46px;border:5px solid #dce7e2;border-top-color:var(--pink);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}
}
.workspace{padding:36px clamp(15px,3vw,42px) 70px}
.workspaceHead{display:flex;align-items:end;justify-content:space-between;gap:20px}
.workspaceHead h1{font-size:clamp(34px,4vw,52px);margin:8px 0}
.workspaceHead p{margin:0}
.progressSteps{display:flex;gap:8px;margin:30px 0 18px}
.progressSteps span{flex:1;background:#e8eeeb;padding:12px;text-align:center;font-weight:800;font-size:13px}
.progressSteps .active{background:var(--ink);color:#fff}
.workGrid{display:grid;grid-template-columns:300px minmax(480px,1fr) 285px;gap:16px;align-items:start}
.toolPanel,.reviewPanel{background:#fff;border:1px solid var(--line);box-shadow:0 8px 25px #18372f0c}
.toolPanel section,.reviewPanel{padding:20px}
.toolPanel section+section{border-top:1px solid var(--line)}
h2{font-size:22px;margin:0 0 12px}
.sectionTitle{display:flex;align-items:center;justify-content:space-between}
.sectionTitle button{border:0;background:none;color:var(--blue);font-weight:800;cursor:pointer}
.uploadBox{display:flex;flex-direction:column;align-items:center;gap:5px;border:2px dashed #a7bbb2;background:#f5f8f6;padding:22px;text-align:center;cursor:pointer}
.uploadBox input{position:absolute;opacity:0;pointer-events:none}
.uploadBox b{color:var(--blue)}
.uploadBox span,.hint{font-size:12px;color:var(--muted);line-height:1.45}
.recipientCard{border:1px solid var(--line);background:#f9fbfa;padding:12px;margin:10px 0}
.recipientTop{display:flex;gap:8px;align-items:center;margin-bottom:9px}
.recipientColor{width:12px;height:12px;border-radius:50%;flex:none}
.recipientTop b{flex:1}
.recipientTop button{border:0;background:none;color:#a52542;cursor:pointer}
.recipientCard input,.toolPanel select,.toolPanel textarea,.reviewPanel input{width:100%;padding:10px;border:1px solid #b9c9c2;background:#fff;font:inherit;margin-top:7px}
.twoCols{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.fieldTools{display:grid;grid-template-columns:1fr;gap:7px}
.fieldTools button{border:1px solid var(--line);background:#f4f7f5;padding:11px 12px;text-align:left;color:var(--ink);font-weight:750;cursor:pointer}
.fieldTools button:hover,.fieldTools button.active{border-color:var(--blue);background:#eaf2ff;color:#0c56c8}
.toolPanel label{display:block;font-size:13px;font-weight:800;margin:12px 0}
.checkLabel{display:flex!important;align-items:center;gap:8px}
.checkLabel input{width:auto}
.dangerButton{border:1px solid #e7aabd;background:#fff2f5;color:#a0143d;padding:10px 12px;font-weight:800;cursor:pointer}
.documentArea{background:#d9dfdc;min-height:700px;padding:24px;overflow:auto;border:1px solid #c3cec9}
.documentArea #emptyDocument{min-height:640px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#63766f;gap:10px}
.documentArea #emptyDocument b{font-size:24px}
.documentArea #emptyDocument span{max-width:440px;line-height:1.5}
.pdfPage{position:relative;margin:0 auto 24px;background:#fff;box-shadow:0 7px 22px #1d3b3233;line-height:0}
.pdfPage canvas{display:block;width:100%;height:auto}
.placedField{position:absolute;display:flex;align-items:center;padding:3px 6px;border:2px solid;color:#17382f;background:rgba(255,255,255,.78);font-size:11px;font-weight:900;line-height:1.1;cursor:move;overflow:hidden;user-select:none}
.placedField.selected{outline:3px solid #1769e844;z-index:5}
.placedField .removeField{margin-left:auto;border:0;background:rgba(255,255,255,.8);cursor:pointer;font-size:12px}
.reviewPanel{position:sticky;top:96px}
.reviewPanel label{display:block;font-weight:800;font-size:13px}
.summary{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:15px 0}
.summary p{display:flex;justify-content:space-between;gap:10px}
.summary span{color:var(--muted)}
.summary b{text-align:right}
.privacyNote{font-size:12px;line-height:1.5;color:var(--muted)}
#sendStatus{font-size:13px;line-height:1.45;font-weight:700}
.sentPanel .primaryButton{max-width:310px;margin:22px 0 14px}
.secondaryLink{font-weight:800;color:var(--blue)}
.how{padding:90px clamp(22px,7vw,110px);background:#fff}
.how h2{font-size:clamp(30px,4vw,50px);max-width:850px}
.how>div{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.how article{border-top:4px solid var(--green);padding:24px;background:var(--cream)}
.how article>b{font-size:30px;color:var(--pink)}
.how article p{line-height:1.6;color:var(--muted)}
footer{display:flex;justify-content:space-between;gap:30px;padding:30px clamp(22px,7vw,110px);background:#17372f;color:#fff}
footer div{display:flex;gap:22px}
.error{color:#ae143c}
.success{color:#1c755d}
@media(max-width:1100px){.workGrid{grid-template-columns:280px 1fr}
.reviewPanel{grid-column:1/-1;position:static}
.reviewPanel .summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.reviewPanel .primaryButton{max-width:380px}
.signHero{grid-template-columns:1fr .7fr}
}
@media(max-width:760px){.topbar{height:auto;padding:15px 18px}
.wordmark span{display:none}
nav{display:none}
.signHero{grid-template-columns:1fr;padding:45px 20px}
.workGrid{grid-template-columns:1fr}
.toolPanel{order:1}
.documentArea{order:2;min-height:500px;padding:10px}
.reviewPanel{order:3}
.progressSteps{overflow:auto}
.progressSteps span{min-width:120px}
.workspaceHead{align-items:start;flex-direction:column}
.reviewPanel .summary{display:block}
.how>div{grid-template-columns:1fr}
footer{flex-direction:column}
footer div{flex-wrap:wrap}
.twoCols{grid-template-columns:1fr}
}
.accountSection{background:#edf4f0}
.accessCard{max-width:820px;background:#fff;border:1px solid var(--line);padding:24px;box-shadow:var(--shadow)}
.accessCard label{display:block;font-weight:900;margin-bottom:9px}
.accessRow{display:grid;grid-template-columns:1fr auto;gap:10px}
.accessRow input{min-width:0;padding:14px;border:1px solid #9eb4aa;font:inherit}
.accessRow .primaryButton{width:auto}
.accountPanel{margin-top:24px;background:#fff;border:1px solid var(--line);padding:26px;display:grid;grid-template-columns:minmax(250px,.75fr) minmax(360px,1.25fr);gap:30px}
.accountPanel[hidden]{display:none}
.accountPanel h3{font-size:28px;margin:8px 0}
.usageTrack{height:10px;background:#dce8e2;overflow:hidden;margin:16px 0 22px}
.usageTrack i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),#55ae8f)}
.accountActions{display:flex;gap:10px;flex-wrap:wrap}
.historyWrap{overflow:auto}
.historyWrap table{width:100%;border-collapse:collapse}
.historyWrap th,.historyWrap td{text-align:left;padding:10px;border-bottom:1px solid var(--line);font-size:13px}
.pricingSection{background:#fff}
.billingToggle{width:max-content;max-width:100%;margin:28px auto;border:1px solid var(--line);padding:5px;background:#eff5f2;display:flex;border-radius:999px}
.billingToggle button{border:0;background:transparent;padding:12px 18px;border-radius:999px;font:inherit;font-weight:900;color:var(--muted);cursor:pointer}
.billingToggle button.active{background:var(--ink);color:#fff}
.planGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.planCard{position:relative;border:1px solid var(--line);padding:26px;background:#fff;display:flex;flex-direction:column;min-height:460px}
.planCard.featured{border:2px solid var(--pink);box-shadow:0 20px 45px rgba(233,22,73,.13)}
.planCard.paygoPlan{background:var(--cream)}
.planTag{font-size:11px;letter-spacing:.14em;font-weight:900;color:var(--green)}
.planCard h3{font-size:26px;margin:4px 0 14px}
.planPrice{font-size:36px;font-weight:900;letter-spacing:-.03em}
.planPrice small{font-size:14px;color:var(--muted);letter-spacing:0}
.annualSaving{color:#16735c;font-weight:900;margin:8px 0 0}
.planAllowance{font-weight:900;color:var(--pink)}
.planCard ul{padding-left:20px;line-height:1.8;color:var(--muted);flex:1}
.planCard .primaryButton{margin-top:auto}
.pricingFine{color:var(--muted);font-size:13px;line-height:1.6;max-width:950px;margin:24px auto 0;text-align:center}
@media(max-width:1100px){.planGrid{grid-template-columns:repeat(2,1fr)}.accountPanel{grid-template-columns:1fr}}
@media(max-width:760px){.accessRow{grid-template-columns:1fr}.planGrid{grid-template-columns:1fr}.billingToggle{width:100%}.billingToggle button{flex:1;padding:10px}.accountPanel{padding:18px}.historyWrap{margin-top:8px}}