.mailto-generator-page{background:#f6f1e8;min-height:100vh}.mailto-generator-main{padding-top:0}.mailto-hero{text-align:center;background:linear-gradient(135deg,#86b49b1a 0%,#f6f1e81a 100%);padding:80px 0 60px}.mailto-hero-content{max-width:800px;margin:0 auto}.mailto-hero-title{color:#2b2b2b;margin-bottom:24px;font-size:clamp(36px,5vw,56px);font-weight:800;line-height:1.1}.mailto-hero-description{color:#2b2b2b;opacity:.7;max-width:600px;margin:0 auto 32px;font-size:clamp(16px,2vw,20px);line-height:1.6}.hero-cta-button{color:#fff;cursor:pointer;background:#2b2b2b;border:none;border-radius:12px;padding:16px 32px;font-family:inherit;font-size:16px;font-weight:600;transition:all .3s;box-shadow:0 4px 20px #2b2b2b33}.hero-cta-button:hover{background:#86b49b;transform:translateY(-2px);box-shadow:0 8px 30px #86b49b4d}.hero-cta-button:active{transform:translateY(0)}.mailto-generator-section{padding:60px 0}.generator-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#fff9;border:1px solid #f6f1e880;border-radius:24px;max-width:700px;margin:0 auto;padding:48px;box-shadow:0 8px 32px #2b2b2b14}.generator-title{color:#2b2b2b;text-align:center;margin-bottom:12px;font-size:clamp(28px,3vw,36px);font-weight:700}.generator-subtitle{color:#2b2b2b;opacity:.6;text-align:center;margin-bottom:40px;font-size:16px}.generator-form{flex-direction:column;gap:24px;display:flex}.form-group{flex-direction:column;gap:8px;display:flex}.form-group label{color:#2b2b2b;font-size:14px;font-weight:600}.form-group label .required{color:#e74c3c;margin-left:4px}.form-input,.form-textarea{color:#2b2b2b;box-sizing:border-box;background:#fffc;border:2px solid #2b2b2b1a;border-radius:12px;width:100%;padding:14px 16px;font-family:inherit;font-size:16px;transition:all .3s}.form-input:focus,.form-textarea:focus{background:#fff;border-color:#86b49b;outline:none;box-shadow:0 0 0 4px #86b49b1a}.form-input.error,.form-textarea.error{background:#e74c3c0d;border-color:#e74c3c}.form-input.error:focus,.form-textarea.error:focus{border-color:#e74c3c;box-shadow:0 0 0 4px #e74c3c1a}.form-hint{color:#2b2b2b;opacity:.5;font-size:12px}.error-message{color:#e74c3c;margin-top:-4px;font-size:13px;font-weight:500}.form-textarea{resize:vertical;min-height:120px;font-family:inherit}.generate-button{color:#fff;cursor:pointer;background:#2b2b2b;border:none;border-radius:12px;margin-top:8px;padding:16px 32px;font-size:16px;font-weight:600;transition:all .3s;box-shadow:0 4px 20px #2b2b2b33}.generate-button:hover{background:#86b49b;transform:translateY(-2px);box-shadow:0 8px 30px #86b49b4d}.generate-button:active{transform:translateY(0)}.mailto-benefits-section{background:#ffffff4d;padding:80px 0}.benefits-title{color:#2b2b2b;text-align:center;margin-bottom:48px;font-size:clamp(32px,4vw,42px);font-weight:700}.benefits-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px;max-width:1200px;margin:0 auto;display:grid}.benefit-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);text-align:center;background:#fff9;border:1px solid #f6f1e880;border-radius:20px;padding:32px;transition:all .3s;box-shadow:0 4px 20px #2b2b2b0d}.benefit-card:hover{border-color:#86b49b4d;transform:translateY(-4px);box-shadow:0 8px 30px #2b2b2b1a}.benefit-icon{margin-bottom:16px;font-size:48px;line-height:1}.benefit-card-title{color:#2b2b2b;margin-bottom:12px;font-size:20px;font-weight:600}.benefit-card-description{color:#2b2b2b;opacity:.7;font-size:15px;line-height:1.6}.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10000;background:#2b2b2b99;justify-content:center;align-items:center;padding:20px;animation:.3s fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#fffffff2;border:1px solid #f6f1e880;border-radius:24px;width:100%;max-width:600px;padding:32px;animation:.3s slideUp;position:relative;box-shadow:0 20px 60px #2b2b2b4d}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-close{cursor:pointer;color:#2b2b2b;opacity:.6;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;padding:8px;transition:all .2s;display:flex;position:absolute;top:16px;right:16px}.modal-close:hover{opacity:1;background:#2b2b2b0d}.modal-title{color:#2b2b2b;text-align:center;margin-bottom:24px;font-size:24px;font-weight:700}.modal-link-container{flex-flow:row;align-items:stretch;gap:8px;margin-bottom:24px;display:flex}.modal-link-input{color:#2b2b2b;word-break:break-all;box-sizing:border-box;background:#f6f1e880;border:2px solid #2b2b2b1a;border-radius:12px;flex:1;padding:14px 16px;font-family:Monaco,Courier New,monospace;font-size:14px}.modal-link-open-button{color:#2b2b2b;cursor:pointer;background:#2b2b2b0d;border:2px solid #2b2b2b1a;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;gap:8px;min-width:48px;height:auto;padding:14px;font-family:inherit;font-size:13px;font-weight:600;text-decoration:none;transition:all .2s;display:flex;position:relative}.desktop-only{display:block}.mobile-only,.button-text{display:none}.modal-link-open-button:hover{background:#2b2b2b1a;border-color:#2b2b2b33}.modal-link-open-button:active{background:#2b2b2b26}.modal-link-open-button .tooltip-text{color:#fff;white-space:nowrap;opacity:0;pointer-events:none;background:#2b2b2be6;border-radius:6px;margin-bottom:8px;padding:6px 12px;font-size:12px;font-weight:500;transition:opacity .2s;position:absolute;bottom:100%;left:50%;transform:translate(-50%)}.modal-link-open-button .tooltip-text:after{content:"";border:5px solid #0000;border-top-color:#2b2b2be6;position:absolute;top:100%;left:50%;transform:translate(-50%)}.modal-link-open-button:hover .tooltip-text{opacity:1}.modal-actions{gap:12px;display:flex}.modal-button{cursor:pointer;color:#fff;background:#2b2b2b;border:none;border-radius:12px;flex:1;justify-content:center;align-items:center;gap:8px;padding:14px 24px;font-family:inherit;font-size:15px;font-weight:600;transition:all .3s;display:flex}.modal-button:hover{background:#86b49b;transform:translateY(-1px)}.modal-button.secondary{color:#2b2b2b;background:#2b2b2b0d}.modal-button.secondary:hover{background:#2b2b2b1a}.modal-button.copied{background:#86b49b}@media (max-width:768px){.mailto-generator-main{padding-top:0}.mailto-hero{padding:60px 0 40px}.generator-card{border-radius:20px;padding:32px 24px}.benefits-grid{grid-template-columns:1fr;gap:24px}.benefit-card{padding:24px}.modal-content{margin:20px;padding:24px}.modal-link-container{flex-direction:column;gap:12px;margin-bottom:12px}.modal-link-input{width:100%;font-size:12px}.modal-link-open-button{width:100%;min-width:auto;padding:14px 24px;font-size:15px;font-weight:600}.button-text{display:inline}.desktop-only{display:none}.mobile-only{display:inline}.modal-actions{flex-direction:column;gap:12px;margin-top:0}.modal-button{width:100%}}@media (max-width:480px){.mailto-hero-title{font-size:32px}.mailto-hero-description{font-size:16px}.generator-card{padding:24px 20px}.generator-title{font-size:24px}.benefits-title{font-size:28px}.form-input,.form-textarea{font-size:16px}}