/* Shared visual system inspired by the JavaScriptConverter product layout. */
:root,html[data-theme="light"]{--accent:#245bca;--accent-hover:#194aaf;--tint:#edf3ff;--ink:#1d2024;--muted:#59616e;--line:#dce0e7;--surface:#fff;--soft:#f5f7fb;--shadow:0 8px 26px rgba(27,42,68,.05)}
body,body.email-app{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:#f8f9fc!important;color:var(--ink)}
.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:32px;box-sizing:border-box}.site-header{background:#fff!important;border-bottom:1px solid #ddd!important;box-shadow:none!important}.header-inner{min-height:66px!important;gap:30px}.brand{color:#245bca!important}.brand strong{font-size:21px!important;letter-spacing:-.5px}.brand small{display:none}.brand-mark{width:32px;height:32px}.brand-mark stop{stop-color:#245bca}.header-nav{margin-left:auto;gap:28px}.header-nav a{color:#353b44;font-weight:500}.icon-button{border-radius:8px}.email-hero{display:grid!important;grid-template-columns:1fr 1fr!important;gap:50px!important;align-items:center;padding:72px 0 58px!important;margin:0!important;background:none!important;border:0!important;box-shadow:none!important}.email-hero-copy{max-width:610px}.email-hero .eyebrow{display:inline-block;background:#e9effb;color:#245bca;border:1px solid #dbe4f7;border-radius:20px;padding:5px 11px;font-size:11px;letter-spacing:.8px;margin-bottom:24px}.email-hero h1{font-size:clamp(38px,4.4vw,64px)!important;line-height:1.13!important;letter-spacing:-2.8px!important;color:#1d2024!important;margin:8px 0 24px!important}.email-hero h1 span{color:#245bca!important}.email-hero .intro{font-size:18px!important;line-height:1.75;max-width:540px;color:#525965}.hero-actions{display:flex;gap:12px;margin:28px 0 22px;flex-wrap:wrap}.button{border-radius:7px!important;box-shadow:none!important;font-weight:600!important}.button.primary{background:#245bca!important;color:white!important;border-color:#245bca!important}.hero-actions .button{padding:14px 22px;font-size:15px}.email-badges{gap:14px!important}.email-badges span{background:none!important;border:0!important;padding:0!important;color:#59616e!important;font-size:12px!important}.email-hero-note{font-size:12px;color:#727984}.mail-preview{display:block!important;background:#fff!important;border:1px solid #d5d9e0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 22px 38px rgba(24,34,54,.16)!important;transform:none!important;margin:0!important;min-width:0}.preview-bar{display:flex;align-items:center;gap:7px;background:#f5f6fa;border-bottom:1px solid #ddd;padding:14px 16px}.preview-bar i{width:10px;height:10px;border-radius:50%;background:#f17572}.preview-bar i:nth-child(2){background:#edc45e}.preview-bar i:nth-child(3){background:#80c486}.preview-bar span{font-size:11px;color:#737984;margin-left:9px}.preview-address{padding:28px 25px;display:grid;gap:9px}.preview-address small{font-size:10px;color:#245bca;letter-spacing:1px}.preview-address strong{font-size:clamp(16px,1.8vw,24px);overflow-wrap:anywhere}.preview-address>span{font-size:11px;color:#818895}.preview-message{display:flex;align-items:center;gap:14px;padding:22px;border-block:1px solid #e6e9ee}.preview-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:9px;background:#edf3ff;color:#245bca;font-size:23px}.preview-message strong{font-size:13px}.preview-message p{font-size:11px;color:#737984;margin:6px 0 0}.preview-message b{margin-left:auto;font-size:10px;font-weight:400;color:#737984;white-space:nowrap}.preview-bottom{display:flex;justify-content:space-between;gap:12px;padding:17px 24px;font-size:11px;color:#667085}.panel{border:1px solid var(--line)!important;border-radius:10px!important;box-shadow:var(--shadow)!important;background:var(--surface)!important}.address-panel{padding:25px!important}.address-field{border-radius:7px!important;background:var(--soft)!important}.workspace{gap:22px!important;grid-template-columns:minmax(280px,.8fr) minmax(0,1.5fr)}.guide{max-width:900px;margin:56px auto!important;padding:32px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-sizing:border-box}.guide h1{font-size:clamp(28px,3vw,42px)!important;line-height:1.2;letter-spacing:-1.2px!important}.guide h2{font-size:25px;margin-top:30px}.guide a{color:var(--accent)}.guide li{line-height:1.8;margin-bottom:12px}.guide-list{padding-left:22px}.guide-updated{font-size:12px!important}.site-footer{background:#fff;border-top:1px solid var(--line);padding-block:28px!important}.feature-strip{padding-block:36px}.renewal{border-radius:9px!important}.table-wrap{overflow-x:auto}a:focus-visible,button:focus-visible{outline:3px solid #84a9ed;outline-offset:3px}
html[data-theme="dark"] body{background:#111827!important;color:#e5e7eb}html[data-theme="dark"]{--ink:#e5e7eb;--muted:#aab4c5;--surface:#1b2434;--soft:#222e42;--line:#354158;--tint:#243c64}html[data-theme="dark"] .site-header,html[data-theme="dark"] .site-footer{background:#1b2434!important}html[data-theme="dark"] .email-hero h1{color:#f2f5fb!important}html[data-theme="dark"] .email-hero .intro,html[data-theme="dark"] .header-nav a{color:#b8c4d8}html[data-theme="dark"] .email-hero h1 span{color:#80aaff!important}
@media(max-width:800px){.wrap{padding-inline:20px}.email-hero{grid-template-columns:1fr!important;gap:30px!important;padding:38px 0!important}.email-hero h1{letter-spacing:-1.6px!important}.mail-preview{max-width:580px;width:100%}.workspace{grid-template-columns:1fr!important}.guide{padding:22px;margin:28px auto!important}.header-inner{gap:14px}.header-nav{gap:15px}.brand strong{font-size:18px!important}.address-panel{padding:18px!important}.preview-message b{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
html[data-theme="dark"] .mail-preview,html[data-theme="dark"] .preview-bar{background:#1b2434!important;border-color:#354158!important}html[data-theme="dark"] .preview-address strong,html[data-theme="dark"] .preview-message strong{color:#f1f5fb!important}html[data-theme="dark"] .preview-message{border-color:#354158!important}html[data-theme="dark"] .preview-address>span,html[data-theme="dark"] .preview-message p,html[data-theme="dark"] .preview-message b,html[data-theme="dark"] .preview-bottom,html[data-theme="dark"] .preview-bar span,html[data-theme="dark"] .email-badges span{color:#b7c4d8!important}.hero-actions a{text-decoration:none!important}