:root{font-family:Inter,Segoe UI,Arial,Helvetica,sans-serif;color:#17263c;background:#f4f7fb;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh}.header{background:#fff;border-bottom:1px solid #e5ebf2}.header-inner{max-width:1240px;margin:auto;min-height:76px;padding:0 28px;display:flex;justify-content:space-between;align-items:center}.app-identity{display:flex;align-items:center;gap:11px}.app-identity>div:last-child{display:grid;gap:3px}.app-identity strong{font-size:16px;letter-spacing:-.4px}.app-identity span{color:#7b8797;font-size:12px}.app-mark{width:37px;height:37px;border-radius:11px;background:#28473D;color:white;display:flex;align-items:center;justify-content:center;font-size:22px}.status{font-size:12px;border:1px solid #d4e4df;color:#247560;border-radius:99px;padding:7px 12px;background:#f5fbf9}.shell{max-width:1240px;margin:auto;padding:42px 28px 30px}.intro{margin-bottom:28px}.eyebrow{font-size:11px;font-weight:750;letter-spacing:1.9px;color:#45665B}.intro h1{font-size:36px;letter-spacing:-1.4px;margin:10px 0}.intro p{font-size:14px;line-height:1.75;color:#64738a;max-width:670px;margin:0}.workspace{display:grid;grid-template-columns:minmax(320px,420px) minmax(470px,1fr);gap:22px;align-items:start}.panel{background:#fff;border:1px solid #e6ebf2;box-shadow:0 12px 28px rgba(23,52,91,.045);border-radius:17px;padding:26px}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:22px}.panel-head h2{margin:0 0 6px;font-size:18px;letter-spacing:-.35px}.panel-head p{font-size:12px;line-height:1.5;margin:0;color:#8590a1}.step{font-size:12px;font-weight:700;color:#93a5b9;border:1px solid #e9edf1;padding:7px 8px;border-radius:8px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px 13px}.form-grid label{display:flex;flex-direction:column;font-size:12px;font-weight:650;color:#34445c;gap:8px}.form-grid label.wide{grid-column:1/-1}.req{color:#879D8D}.form-grid input{width:100%;outline:none;font-family:inherit;font-size:13px;font-weight:400;color:#18314b;padding:12px 11px;border:1px solid #dce4ec;border-radius:9px;background:#fdfefe;transition:.15s}.form-grid input:focus{border-color:#879D8D;box-shadow:0 0 0 3px rgba(135,157,141,.12)}.form-grid input::placeholder{color:#b3bdc7}.fields-note{border-top:1px solid #eef1f5;display:flex;gap:8px;margin-top:24px;padding-top:19px;font-size:11.5px;color:#8894a3;line-height:1.6}.preview-top{display:flex;align-items:center;gap:8px;margin-bottom:13px;color:#508476;font-size:11px;font-weight:650}.live-dot{width:7px;height:7px;border-radius:50%;background:#879D8D}.preview-hint{font-weight:400;margin-left:auto;color:#9ca6b4}.signature-canvas{border:1px dashed #d4dfe9;border-radius:12px;background:linear-gradient(135deg,#fafcfe,#fff);padding:28px 18px;overflow-x:auto;min-height:250px;display:flex;align-items:center;justify-content:center}.signature-canvas #signature-preview{max-width:100%;min-width:0}.button-row{display:flex;gap:11px;flex-wrap:wrap;margin-top:22px}.btn{cursor:pointer;font:700 13px Inter,Segoe UI,Arial,sans-serif;border-radius:10px;min-height:44px;padding:12px 18px;display:flex;justify-content:center;align-items:center;gap:8px;transition:.15s}.btn-primary{background:#28473D;color:white;border:1px solid #28473D;min-width:184px}.btn-primary:hover{background:#45665B}.btn-outline{background:white;color:#203850;border:1px solid #dce4ec}.btn-outline:hover{background:#f6fafd}.copy-help{color:#8894a3;line-height:1.65;font-size:11.5px;margin:14px 0 20px}.tip{display:flex;flex-direction:column;gap:6px;border-radius:11px;background:#f0f8f8;padding:15px 17px;color:#416879;font-size:11.5px;line-height:1.65}.tip strong{font-size:12px;color:#156475}.footer{padding-top:31px;text-align:center;color:#9ca8b5;font-size:11.5px}.notice{background:#fff5e7;border:1px solid #f8d8a5;color:#8a5b19;padding:13px 15px;border-radius:10px;margin-bottom:20px;font-size:13px;line-height:1.6}.notice[hidden]{display:none}@media(max-width:940px){.workspace{grid-template-columns:1fr}.signature-canvas{justify-content:flex-start}}@media(max-width:600px){.shell{padding:30px 14px}.header-inner{padding:0 15px}.intro h1{font-size:29px}.panel{padding:19px}.form-grid{grid-template-columns:1fr}.signature-canvas{padding:15px 10px}.preview-hint{display:none}.button-row .btn{flex:1}.status{font-size:10px}}
/* Outlook-friendly 430px signature; scrollable on narrow phone screens. */
.signature-canvas{justify-content:flex-start;padding:18px 12px;min-height:230px;background:#fff;}
.signature-canvas #signature-preview{max-width:none;min-width:430px;}
.signature-canvas table{flex-shrink:0;}
.form-grid small{font-weight:400;color:#93a0ad;font-size:10px;}
.form-grid input[type=file]{font-size:12px;padding:10px;background:#fff;}
.help-text{font-size:11px;line-height:1.5;color:#6e7e90;display:block;margin-top:5px;}