.email-hero { padding:78px max(24px,calc((100vw - 1120px)/2)) 110px; display:grid; grid-template-columns:1fr .9fr; gap:90px; align-items:center; overflow:hidden; background:radial-gradient(circle at 78% 28%,#d9eee9 0,transparent 32%),linear-gradient(180deg,#f7fcfa,#fff); }
.pro-pill { display:inline-block; margin-bottom:16px; padding:5px 13px; color:#fff; border-radius:99px; background:var(--green); font-size:10px; font-weight:800; }
.email-hero-visual { min-height:520px; position:relative; display:grid; place-items:center; }
.email-status { padding:10px 15px; position:absolute; top:22px; right:0; z-index:3; border:1px solid #b8dfd2; border-radius:99px; background:#fff; box-shadow:0 12px 28px rgba(13,69,51,.12); font-size:10px; font-weight:700; }
.email-status i { width:7px; height:7px; margin-right:7px; display:inline-block; border-radius:50%; background:#e7a727; }
.mail-window { width:100%; max-width:460px; padding:0 28px 30px; position:relative; z-index:2; border:1px solid #d5e5df; border-radius:20px; background:#fff; box-shadow:0 30px 70px rgba(13,69,51,.16); }
.mail-toolbar { height:54px; margin:0 -28px 24px; padding:0 18px; display:flex; align-items:center; gap:7px; border-bottom:1px solid var(--line); color:#7c8a86; font-size:10px; font-weight:700; }
.mail-toolbar i { width:8px; height:8px; border-radius:50%; background:#cfd9d5; }
.mail-toolbar span { margin-left:auto; }
.mail-meta { display:flex; align-items:center; gap:12px; }
.sender-avatar { width:40px; height:40px; display:grid; place-items:center; flex:0 0 auto; color:#fff; border-radius:50%; background:var(--green); font-size:13px; font-weight:800; }
.mail-meta strong,.mail-meta small { display:block; }
.mail-meta strong { font-size:12px; }
.mail-meta small { color:var(--muted); font-size:8px; }
.mail-window h2 { margin:24px 0 12px; font-size:20px; letter-spacing:-.02em; }
.mail-window p { color:var(--muted); font-size:11px; line-height:1.8; }
.mail-window>a { padding:12px 14px; display:block; color:var(--green); border:1px solid #add8ca; border-radius:9px; background:var(--soft); font:700 12px "DM Sans"; overflow-wrap:anywhere; }
.mail-note { margin-top:20px; display:block; color:#8b9692; font-size:8px; }
.email-secure-card { padding:13px 17px; position:absolute; left:-18px; bottom:25px; z-index:3; display:flex; align-items:center; gap:11px; border:1px solid #b8dfd2; border-radius:12px; background:#fff; box-shadow:0 15px 35px rgba(13,69,51,.14); }
.email-secure-card>b { width:30px; height:30px; display:grid; place-items:center; color:#fff; border-radius:50%; background:var(--green); }
.email-secure-card strong,.email-secure-card small { display:block; }
.email-secure-card strong { font-size:11px; }
.email-secure-card small { color:var(--muted); font-size:8px; }
.email-summary { max-width:1080px; margin:-38px auto 0; position:relative; z-index:4; display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 15px 40px rgba(23,63,51,.08); }
.email-summary div { padding:24px 16px; text-align:center; }
.email-summary div+div { border-left:1px solid var(--line); }
.email-summary strong,.email-summary span { display:block; }
.email-summary strong { color:var(--green); font:700 24px "DM Sans"; }
.email-summary span { color:var(--muted); font-size:10px; }
.email-benefit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.email-benefit-grid article { padding:32px; border:1px solid var(--line); border-radius:18px; box-shadow:0 10px 30px rgba(22,65,51,.05); }
.email-benefit-grid span { color:var(--green); font:700 12px "DM Sans"; }
.email-benefit-grid h3 { margin:20px 0 10px; font-size:18px; }
.email-benefit-grid p { margin:0; color:var(--muted); font-size:12px; }
.email-automation-section { padding:115px max(24px,calc((100vw - 1060px)/2)); color:#fff; background:var(--navy); }
.email-flow { margin:0; padding:0; list-style:none; }
.email-flow li { padding:0 0 28px 70px; position:relative; }
.email-flow li:not(:last-child)::before { content:""; width:1px; position:absolute; top:46px; bottom:0; left:22px; background:#38544b; }
.email-flow li>span { width:46px; height:46px; position:absolute; left:0; top:0; display:grid; place-items:center; color:#71ddba; border:1px solid #416159; border-radius:50%; background:#17342b; font:700 13px "DM Sans"; }
.email-flow li:last-child>span { color:#fff; border-color:var(--green); background:var(--green); }
.email-flow small,.email-flow strong { display:block; }
.email-flow small { color:#71ddba; font-size:9px; font-weight:700; }
.email-flow strong { margin:2px 0 3px; font-size:16px; }
.email-flow p { margin:0; color:#9fb3ad; font-size:11px; }
.email-cancel-callout { margin:25px 0 0 70px; padding:24px 28px; border:1px solid #315047; border-radius:14px; background:#17342b; }
.email-cancel-callout span { display:inline-block; margin-bottom:10px; padding:3px 10px; color:#86e4c5; border-radius:99px; background:#204b3d; font-size:9px; font-weight:700; }
.email-cancel-callout strong { display:block; }
.email-cancel-callout p { margin:3px 0 0; color:#9fb3ad; font-size:11px; }
.email-message-section { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.email-message-copy>p { color:var(--muted); }
.email-message-copy code,.faq-list code { padding:2px 5px; color:var(--green); border-radius:4px; background:var(--soft); }
.email-template-card { min-width:0; padding:28px; border:1px solid var(--line); border-radius:20px; background:var(--soft); }
.email-template-head { display:flex; justify-content:space-between; font-size:11px; }
.email-template-head span { color:var(--green); }
.email-preview-subject { margin-top:18px; padding:14px 16px; border:1px solid var(--line); border-radius:9px 9px 0 0; background:#fff; font-size:13px; font-weight:800; }
.email-preview-body { min-height:160px; padding:18px 16px; border:1px solid var(--line); border-top:0; border-radius:0 0 9px 9px; background:#fff; color:var(--muted); font-size:12px; line-height:1.9; overflow-wrap:anywhere; }
.email-preview-body mark { color:var(--green); background:#e0f4ed; }
.email-preview-from { margin-top:14px; padding:12px 14px; border-radius:9px; background:#fff; overflow-wrap:anywhere; }
.email-preview-from small,.email-preview-from strong { display:block; }
.email-preview-from small { color:var(--muted); font-size:8px; }
.email-preview-from strong { font-size:11px; }
.email-link-section { padding:95px max(24px,calc((100vw - 1040px)/2)); background:var(--soft); }
.email-link-card { padding:45px; display:grid; grid-template-columns:1fr 420px; gap:70px; align-items:center; border:1px solid var(--line); border-radius:22px; background:#fff; }
.email-link-card h2 span { color:var(--green); }
.email-link-card p:last-child { margin:0; color:var(--muted); font-size:13px; }
.short-url-preview { padding:30px; border:1px solid #add8ca; border-radius:16px; background:#f3faf7; text-align:center; }
.short-url-preview small,.short-url-preview strong,.short-url-preview span { display:block; }
.short-url-preview small { color:var(--muted); font-size:9px; }
.short-url-preview strong { margin:10px 0; color:var(--green); font:700 19px "DM Sans"; overflow-wrap:anywhere; }
.short-url-preview span { color:var(--muted); font-size:9px; }
.email-settings-section { padding:115px max(24px,calc((100vw - 1100px)/2)); }
.email-settings-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.email-settings-grid article { padding:25px 20px; border:1px solid var(--line); border-radius:16px; background:#fff; }
.email-settings-grid b { width:42px; height:42px; margin-bottom:24px; display:grid; place-items:center; color:var(--green); border-radius:11px; background:var(--mint); font-size:10px; }
.email-settings-grid strong { display:block; margin-bottom:7px; font-size:13px; }
.email-settings-grid p { margin:0; color:var(--muted); font-size:10px; }
.email-settings-note { max-width:820px; margin:25px auto 0; padding:16px 20px; color:var(--muted); border-radius:12px; background:var(--soft); text-align:center; font-size:10px; }
.email-pricing-section { padding:115px 24px; background:var(--soft); }
.email-pricing-card { max-width:850px; margin:auto; padding:38px; display:grid; grid-template-columns:270px 1fr; gap:55px; align-items:center; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:0 14px 38px rgba(22,65,51,.06); }
.email-price-main { text-align:center; }
.email-price-main small { display:block; color:var(--muted); font-size:10px; }
.email-price-main strong { color:var(--green); font:700 62px/1.2 "DM Sans"; }
.email-price-main strong span { font-size:24px; }
.email-price-copy h3 { margin-bottom:12px; font-size:17px; }
.email-price-copy ul { margin:0; padding-left:18px; font-size:11px; font-weight:700; }
.email-price-copy li { margin:8px 0; }
.email-notes-section { padding:115px max(24px,calc((100vw - 1060px)/2)); }
.email-notes-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.email-notes-grid article { padding:25px 27px; border:1px solid var(--line); border-radius:14px; }
.email-notes-grid strong { font-size:13px; }
.email-notes-grid p { margin:5px 0 0; color:var(--muted); font-size:11px; }
.email-faq-section { padding:115px max(24px,calc((100vw - 900px)/2)); background:var(--soft); }
.email-final .hero-actions { justify-content:center; }
@media(max-width:900px){
  .email-hero { grid-template-columns:1fr; gap:45px; }
  .email-hero-copy { text-align:center; }
  .email-hero-copy .hero-actions,.email-hero-copy .hero-points { justify-content:center; }
  .email-hero-visual { width:100%; max-width:600px; margin:auto; }
  .email-benefit-grid { grid-template-columns:1fr; }
  .email-message-section,.email-link-card { grid-template-columns:1fr; }
  .email-link-card { gap:35px; }
  .email-settings-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:620px){
  .email-hero { padding:48px 18px 80px; }
  .email-hero h1 { font-size:clamp(27px,8.2vw,34px); letter-spacing:-.055em; white-space:nowrap; }
  .email-hero-visual { min-height:470px; padding:20px 0; }
  .mail-window { padding-right:20px; padding-left:20px; }
  .mail-toolbar { margin-right:-20px; margin-left:-20px; }
  .email-status { top:0; right:0; max-width:90%; }
  .email-secure-card { left:0; bottom:0; max-width:94%; }
  .email-summary { margin:0; grid-template-columns:1fr 1fr; border-radius:0; }
  .email-summary div+div { border-left:0; }
  .email-summary div:nth-child(even) { border-left:1px solid var(--line); }
  .email-summary div:nth-child(n+3) { border-top:1px solid var(--line); }
  .email-intro,.email-message-section,.email-settings-section,.email-notes-section,.email-faq-section { padding:80px 18px; }
  .email-automation-section,.email-link-section,.email-pricing-section { padding:80px 18px; }
  .email-flow li { padding-left:58px; }
  .email-cancel-callout { margin-left:0; }
  .email-message-section { gap:42px; }
  .email-template-card { padding:22px 18px; }
  .email-link-card { padding:28px 22px; }
  .email-settings-grid { grid-template-columns:1fr; }
  .email-pricing-card { padding:28px 22px; grid-template-columns:1fr; gap:25px; }
  .email-notes-grid { grid-template-columns:1fr; }
  .email-final .hero-actions { width:100%; max-width:420px; margin-right:auto; margin-left:auto; display:grid; }
  .email-final .hero-actions .button { width:100%; }
}
@media(max-width:420px){
  .email-hero { padding-top:38px; }
  .email-hero-visual { min-height:440px; }
  .mail-window { padding-bottom:24px; }
  .mail-window h2 { font-size:18px; }
  .email-status { font-size:9px; }
  .email-secure-card { padding:10px 12px; }
  .email-summary div { padding:20px 10px; }
  .email-summary strong { font-size:20px; }
  .email-flow li { padding-left:52px; }
  .email-flow li>span { width:40px; height:40px; }
  .email-flow li:not(:last-child)::before { top:40px; left:19px; }
  .short-url-preview { padding:24px 14px; }
  .short-url-preview strong { font-size:16px; }
  .email-price-main strong { font-size:52px; }
}