@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap";@import "https://fonts.googleapis.com/css2?family=Almarai:wght@400;500;600;700;800&display=swap";:root{color:#18231f;font-synthesis:none;--ink:#18231f;--muted:#75817b;--line:#dfe6df;--card:#fff;--soft:#eef2ed;--lime:#c8e86b;--lime-dark:#9ab742;background:#f5f7f3;font-family:DM Sans,Arial,sans-serif;line-height:1.4}*{box-sizing:border-box}body{min-width:320px;margin:0}button,input{font:inherit}button{cursor:pointer;border:0}a{color:inherit}.app-shell{background:radial-gradient(circle at 90% 2%,#edf7d8 0,transparent 23%),var(--bg,#f5f7f3);min-height:100vh;padding:0 5vw}header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;max-width:1440px;height:88px;margin:auto;display:flex}.brand-lockup,.header-actions,.section-heading>div:first-child,.preview-top>div:first-child{align-items:center;display:flex}.ejara-mark{letter-spacing:-5px;margin-right:18px;font:700 36px/1 Space Grotesk}.ejara-mark span{color:var(--lime-dark)}.eyebrow,.kicker,.group-label,.step{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-size:10px;font-weight:700}.eyebrow{margin-bottom:4px}h1{letter-spacing:-.02em;margin:0;font:600 16px Space Grotesk}h2,h3,p{margin:0}h2{letter-spacing:-.07em;margin-top:20px;font:600 clamp(2.6rem,5vw,4.6rem)/.98 Space Grotesk}h2 em{color:#8ca53d;font-style:normal}.intro{justify-content:space-between;align-items:end;max-width:1440px;margin:0 auto;padding:74px 0 55px;display:flex}.kicker{color:#8ba338;align-items:center;gap:7px;display:flex}.intro-copy{max-width:285px;color:var(--muted);font-size:14px;line-height:1.7}.status-pill{color:var(--muted);margin-right:14px;font-size:11px}.status-pill i{background:#82b049;border-radius:50%;width:6px;height:6px;margin-right:6px;display:inline-block}.icon-button{border:1px solid var(--line);background:var(--card);width:44px;height:44px;color:var(--ink);border-radius:50%;place-items:center;display:grid}.workspace{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:start;gap:clamp(28px,5vw,80px);max-width:1440px;margin:auto;display:grid}.editor,.preview-column{background:var(--card);border:1px solid var(--line);border-radius:20px}.editor{padding:28px clamp(20px,3vw,40px)}.preview-column{padding:28px clamp(16px,3vw,34px);position:sticky;top:22px}.section-heading,.preview-top{justify-content:space-between;align-items:start;gap:20px;margin-bottom:28px;display:flex}.section-heading h3,.preview-top h3{letter-spacing:-.03em;font:600 18px Space Grotesk}.section-heading p,.preview-top p{color:var(--muted);margin-top:4px;font-size:12px}.step{color:var(--lime-dark);margin-right:14px;padding-top:3px}.reset{color:var(--muted);background:0 0;align-items:center;gap:6px;padding:8px;font-size:12px;display:flex}.form-group{border-top:1px solid var(--line);padding:22px 0}.group-label{margin-bottom:14px}.field-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}label{color:var(--muted);font-size:12px}input{border:1px solid var(--line);background:var(--soft);width:100%;color:var(--ink);border-radius:9px;outline:none;margin-top:7px;padding:12px 13px;transition:all .2s;display:block}.wide{grid-column:1/-1}.settings-head{margin-bottom:16px;padding-top:28px}.toggle-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.toggle{border:1px solid var(--line);min-height:44px;color:var(--muted);text-align:left;background:0 0;border-radius:9px;justify-content:space-between;align-items:center;padding:0 12px;font-size:12px;display:flex}.toggle.on{color:var(--ink);background:#f3f8e6;border-color:#d7e6ab}.switch{background:#d4dbd4;border-radius:10px;width:27px;height:16px;padding:2px;transition:all .2s}.switch i{background:#fff;border-radius:50%;width:12px;height:12px;transition:all .2s;display:block}.toggle.on .switch{background:var(--lime-dark)}.view-switch{background:var(--soft);border-radius:8px;padding:3px;display:flex}.view-switch button{color:var(--muted);background:0 0;border-radius:6px;padding:6px 9px;font-size:11px}.view-switch button.active{background:var(--card);color:var(--ink);box-shadow:0 1px 4px #ccd4ca}.email-canvas{background:#fff;border:1px solid #e7ebe6;border-radius:12px;min-height:300px;margin-top:28px;transition:all .25s;overflow:hidden;box-shadow:0 10px 30px #19241b0b}.email-canvas.mobile{max-width:380px}.mail-meta{color:#9aa39e;justify-content:space-between;gap:10px;padding:15px 19px;font-size:11px;display:flex}.mail-divider{background:#eef1ee;height:1px}.signature-render{padding:48px 30px;overflow:auto}.actions{align-items:center;gap:14px;margin-top:22px;display:flex}.menu-wrap{position:relative}.primary-action{background:var(--ink);color:#fff;border-radius:9px;align-items:center;gap:8px;min-height:46px;padding:0 16px;font-size:12px;transition:all .2s;display:flex}.primary-action:hover{background:#30443b;transform:translateY(-1px)}.hint{color:var(--muted);font-size:11px}.dropdown{z-index:5;background:var(--card);border:1px solid var(--line);border-radius:11px;min-width:210px;padding:7px;position:absolute;bottom:54px;left:0;box-shadow:0 14px 30px #0d1f151c}.dropdown button{text-align:left;width:100%;color:var(--ink);background:0 0;border-radius:6px;justify-content:space-between;gap:8px;padding:10px;font-size:12px;display:flex}.dropdown button:hover{background:var(--soft)}.menu-separator{background:var(--line);height:1px;margin:5px 0}.client-note{color:var(--muted);background:#f7f9f4;border-radius:10px;gap:12px;margin-top:28px;padding:16px;font-size:11px;line-height:1.5;display:flex}.client-note strong{color:var(--ink)}.note-icon{color:#8ea944;border:1px solid #bacc87;border-radius:50%;flex:none;place-items:center;width:20px;height:20px;font-size:12px;display:grid}footer{border-top:1px solid var(--line);max-width:1440px;color:var(--muted);justify-content:space-between;margin:42px auto 0;padding:22px 0 34px;font-size:11px;display:flex}.toast{background:var(--ink);color:#fff;border-radius:9px;align-items:center;gap:8px;padding:13px 17px;font-size:12px;animation:.25s rise;display:flex;position:fixed;bottom:24px;right:24px;box-shadow:0 10px 30px #0002}@keyframes rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}[data-theme=dark]{--ink:#eef5ec;--muted:#a6b1a8;--line:#34433a;--card:#1d2923;--soft:#27352d;--bg:#152019}@media (width<=900px){.app-shell{padding:0 20px}.workspace{grid-template-columns:1fr}.preview-column{position:static}.intro{padding:55px 0 38px}}@media (width<=600px){header{height:74px}.eyebrow,.status-pill{display:none}.intro{padding:44px 0 34px;display:block}.intro-copy{margin-top:22px}.field-grid,.toggle-grid{grid-template-columns:1fr}.editor,.preview-column{border-radius:14px}.email-canvas{min-height:260px}.signature-render{padding:32px 18px}.mail-meta{line-height:1.8;display:block}.actions{flex-direction:column;align-items:start}.hint{line-height:1.5}.dropdown{top:53px;bottom:auto}.preview-top{align-items:start}footer{line-height:2.2;display:block}}:root{--ink:#00113d;--lime:#00113d;--lime-dark:#00113d;font-family:Almarai,Arial,sans-serif}body,button,input,.ejara-mark,h1,h2,.section-heading h3,.preview-top h3{font-family:Almarai,Arial,sans-serif}.field-help{color:var(--muted);margin:-6px 0 16px;font-size:12px}.ejara-mark span,h2 em,.kicker,.step{color:#00113d}.status-pill i,.toggle.on .switch{background:#00113d}.toggle.on .switch i{transform:translate(11px)}input:focus{border-color:#00113d;box-shadow:0 0 0 3px #dfe4ef}.primary-action{background:#00113d}.primary-action:hover{background:#152856}.toast svg{color:#fff}.note-icon{color:#00113d;border-color:#9da9c3}.toggle-grid .toggle:nth-child(2),.toggle-grid .toggle:nth-child(7){display:none}label:has(input[placeholder="https://.../logo.png"]){display:none}.kicker{display:none}.intro h2{margin-top:0}.app-shell{--bg:#f5f7fb;background:radial-gradient(circle at 90% 2%,#e9edf7 0,transparent 23%),var(--bg,#f5f7fb)}.editor,.preview-column{background:#fff}.toggle.on{background:#eef1f7;border-color:#c7cfdf}.client-note{background:#f2f4f8}.view-switch,input{background:#f1f3f8}.email-canvas{box-shadow:0 10px 30px #00113d0d}[data-theme=dark]{--bg:#111a2f;--card:#18233d;--soft:#202d4a;--line:#344463}.dark body{background:#111a2f}footer,.status-pill{display:none}.ejara-mark{letter-spacing:0;background:url(/ejara-logo.svg) 50%/contain no-repeat;width:58px;height:48px;margin-right:18px;font-size:0}.ejara-mark span,.brand-lockup>div:last-child,.icon-button{display:none}.brand-lockup{justify-content:center;width:100%}.ejara-mark{width:190px;height:72px;margin:0}.intro h2{letter-spacing:0;font-size:0}.intro h2:after{content:"Email Signature for Ejara Team";letter-spacing:-.07em;color:var(--ink);font:600 clamp(2.6rem,5vw,4.6rem)/.98 Almarai,Arial,sans-serif;display:block}.dropdown{border-radius:14px;min-width:280px;padding:8px;top:54px;bottom:auto;box-shadow:0 18px 40px #00113d1c}.dropdown button{border-radius:8px;align-items:center;min-height:42px;padding:9px 12px;font-size:13px;line-height:1.25;transition:background .18s,color .18s}.dropdown button:hover{color:#00113d;background:#eef1f7}.dropdown button svg:last-child{margin-left:auto}.dropdown button svg:first-child{margin-right:8px}.dropdown button:has(svg:first-child:last-child) svg{order:2;margin-left:auto;margin-right:0}.menu-separator{background:#d8deea;margin:7px 4px}.primary-action{border-radius:12px;padding-inline:18px;box-shadow:0 8px 18px #00113d18}.signature-render [dir=rtl]{display:none!important}
