:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#172444;background:#f8faff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--bg:#f8faff;--card:#fff;--text:#172444;--muted:#68758f;--line:#e2e9f4;--soft:#edf3ff;--blue:#315eea;--blue2:#6b5ce7;--shadow:0 18px 55px rgba(36,63,122,.09)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--text);background:var(--bg)}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.52}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #86a9ff;outline-offset:3px}button,a,input,textarea{transition:border-color .2s,background .2s,box-shadow .2s}h1,h2,h3,p{margin-top:0}p{line-height:1.6;color:var(--muted)}.container{max-width:1160px;margin:0 auto;padding:0 24px}.skip-link{position:absolute;left:12px;top:-60px;padding:12px;background:#fff;z-index:30}.skip-link:focus{top:12px}.site-header{background:color-mix(in srgb,var(--card) 93%,transparent);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:15;backdrop-filter:blur(20px)}.header-inner{height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font-size:22px;font-weight:850;letter-spacing:-1px;display:flex;align-items:center;gap:9px;white-space:nowrap}.brand-symbol{display:grid;place-items:center;background:linear-gradient(135deg,#2b73f5,#775dea);color:white;border-radius:12px;width:39px;height:39px;font-size:23px;box-shadow:0 9px 20px rgba(42,94,228,.2)}.brand-dot{color:var(--blue)}.nav{display:flex;align-items:center;gap:31px;font-size:14px;font-weight:600;color:var(--muted)}.nav a:hover,.footer-links a:hover{color:var(--blue)}.theme-button{border:1px solid var(--line);padding:11px 15px;border-radius:12px;color:var(--text);background:var(--card);white-space:nowrap;font-weight:700}.theme-button:hover,.button.subtle:hover{border-color:var(--blue);background:var(--soft)}.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:65px;padding-top:88px;padding-bottom:92px;position:relative}.hero:before{content:"";position:absolute;z-index:-1;left:-130px;top:0;width:640px;height:500px;background:radial-gradient(circle at center,rgba(82,136,252,.12),transparent 68%);pointer-events:none}.eyebrow{color:var(--blue);font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.hero .eyebrow{letter-spacing:.02em;text-transform:none;background:var(--soft);border:1px solid #dce7ff;padding:9px 13px;border-radius:50px;font-size:12px;display:inline-flex;align-items:center;gap:9px}.status-dot{background:#e3a72e;width:7px;height:7px;border-radius:50%;box-shadow:0 0 0 4px rgba(227,167,46,.12)}h1{font-size:clamp(43px,5.3vw,69px);line-height:1.075;letter-spacing:-.062em;margin:21px 0 22px;font-weight:860}.gradient-text{background:linear-gradient(115deg,#2469f5 0%,#7256e8 80%);color:transparent;background-clip:text}.hero-desc{font-size:17px;line-height:1.8;max-width:480px}.hero-actions,.button-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:27px}.button{border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--card);border-radius:13px;padding:13px 21px;color:var(--text);font-size:14px;font-weight:750;min-height:46px}.button.primary{border-color:var(--blue);background:linear-gradient(120deg,#2c6cf3,#4b58e8);color:white;box-shadow:0 10px 22px rgba(49,94,234,.20)}.button.primary:hover{box-shadow:0 15px 28px rgba(49,94,234,.28);filter:brightness(1.04)}.button.small{padding:10px 15px;min-height:38px}.hero-notes{display:flex;flex-wrap:wrap;gap:18px;font-size:12px;color:var(--muted);margin-top:27px}.hero-panel{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);overflow:hidden;transform:rotate(1deg);transition:transform .3s}.hero-panel:hover{transform:rotate(0)}.window-header{height:55px;display:flex;align-items:center;gap:13px;padding:0 22px;border-bottom:1px solid var(--line);font-size:13px;font-weight:760}.window-dots{display:flex;gap:5px}.window-dots i{display:block;width:9px;height:9px;border-radius:50%;background:#f7b5b5}.window-dots i:nth-child(2){background:#f3d18b}.window-dots i:nth-child(3){background:#a4e0ba}.preview-pill{background:#fff4db;color:#976610;border-radius:50px;padding:5px 10px;font-size:10px;font-weight:800;margin-left:auto}.preview-pill.muted{background:var(--soft);color:var(--muted)}.mail-preview{padding:26px}.field-title{font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--muted)}.preview-address{display:flex;justify-content:space-between;align-items:center;min-height:58px;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:13px 16px;margin-top:10px;color:var(--muted);font-weight:700;gap:8px}.preview-lock{opacity:.6}.preview-actions{display:flex;gap:9px;margin:12px 0 27px}.preview-actions button{border:1px solid var(--line);background:var(--card);border-radius:9px;padding:10px 13px;color:var(--muted)}.inbox-top{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:13px;font-size:14px}.empty-mail{text-align:center;padding:30px 15px}.mail-illustration{display:grid;place-items:center;margin:auto auto 12px;width:61px;height:61px;border-radius:20px;background:var(--soft);color:var(--blue);font-size:31px}.empty-mail strong{display:block;font-size:14px}.empty-mail p{font-size:12px;max-width:290px;margin:8px auto 0}.preview-footnote{font-size:10px;text-align:center;color:var(--muted);background:var(--soft);padding:10px;border-radius:9px}.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:85px}.benefits>div{background:var(--card);border:1px solid var(--line);border-radius:17px;padding:24px;min-height:155px}.benefits strong{font-size:16px;display:block;margin:10px 0 5px}.benefits p{font-size:13px;margin:0}.benefit-icon{font-size:24px}.tools-section{background:color-mix(in srgb,var(--soft) 55%,var(--bg));border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:85px 0}.section-head{text-align:center;max-width:640px;margin:0 auto 35px}.section-head h2{font-size:clamp(31px,3vw,43px);letter-spacing:-.04em;margin:10px 0 8px}.section-head p{font-size:15px}.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.tool-card{text-align:left;position:relative;display:flex;align-items:flex-start;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:23px;min-height:165px;color:var(--text)}.tool-card:hover,.tool-card.is-active{border-color:#729bf8;box-shadow:0 13px 30px rgba(49,94,234,.09)}.tool-card.is-active{outline:2px solid rgba(49,94,234,.12)}.tool-card strong{font-size:16px;margin:13px 0 5px}.tool-card>span:not(.tool-icon):not(.arrow){font-size:12px;color:var(--muted)}.tool-card .tool-icon{font-size:23px;background:var(--soft);color:var(--blue);border-radius:12px;display:grid;place-items:center;width:43px;height:43px}.tool-card .arrow{position:absolute;right:23px;top:27px;color:var(--blue)}.workspace{background:var(--card);border:1px solid var(--line);border-radius:20px;max-width:855px;margin:28px auto 0;padding:34px;box-shadow:var(--shadow)}.tool-panel[hidden]{display:none}.panel-heading{display:flex;align-items:start;justify-content:space-between;gap:15px;margin-bottom:25px}.panel-heading h3{font-size:25px;margin:9px 0 6px;letter-spacing:-.035em}.panel-heading p{font-size:13px;margin:0}.local-badge{color:#20825d;background:#e7f8f0;border-radius:50px;padding:7px 11px;font-size:11px;font-weight:760;white-space:nowrap}.workspace label{display:block;font-weight:700;font-size:13px;margin:18px 0 10px}.workspace input:not([type=checkbox]):not([type=range]),.workspace textarea{width:100%;border:1px solid var(--line);border-radius:11px;padding:13px;color:var(--text);background:var(--bg);outline:none;resize:vertical}.workspace input:focus,.workspace textarea:focus{border-color:#7197f3!important}.result-row{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:13px;padding:12px;background:var(--bg)}.result-text{font:700 16px ui-monospace,SFMono-Regular,Consolas,monospace;word-break:break-all;flex:1;min-width:0}.range-label{display:flex!important;justify-content:space-between}.workspace input[type=range]{width:100%;accent-color:var(--blue)}.option-row{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:26px}.option-row label{font-size:12px;margin:0;display:flex;align-items:center;gap:6px}.option-row input{accent-color:var(--blue)}.input-with-button{display:flex;align-items:stretch;gap:10px}.input-with-button input{flex:1}.strength-track{height:9px;border-radius:20px;background:var(--soft);margin:23px 0 9px;overflow:hidden}.strength-track div{height:100%;width:0;transition:width .2s;background:#da504a}.helper{font-size:12px;margin:14px 0 0}.workspace .button+.helper{margin-top:15px}.qr-result{margin:20px 0;min-height:10px}.qr-result canvas{max-width:100%;height:auto;display:block;border:8px solid white;border-radius:10px}.message{font-size:13px;min-height:18px;margin:18px 0 0;color:var(--blue);font-weight:700}.message.error{color:#c63838}.faq{padding-top:90px;padding-bottom:110px;max-width:850px}.faq details{border:1px solid var(--line);background:var(--card);border-radius:12px;margin-bottom:12px;padding:17px 21px}.faq summary{font-size:15px;font-weight:700;cursor:pointer}.faq details p{font-size:13px;margin:12px 0 0}.footer{background:var(--card);border-top:1px solid var(--line);padding:40px 0}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap}.footer-brand{font-size:20px}.footer-inner p,.footer-inner small{font-size:12px;margin:7px 0 0;color:var(--muted)}.footer-links{display:flex;gap:20px;font-size:13px;font-weight:650;color:var(--muted)}.legal-main{max-width:800px;padding-top:70px;padding-bottom:110px}.legal-main h1{font-size:38px}.legal-main h2{font-size:22px;margin-top:30px}.legal-main p,.legal-main li{font-size:15px;line-height:1.8;color:var(--muted)}
html[data-theme="dark"]{--bg:#0d1425;--card:#141f34;--text:#eef3ff;--muted:#a4b2cd;--line:#283753;--soft:#1c2b48;--blue:#88aaff;--blue2:#a2a3ff;--shadow:0 18px 60px rgba(0,0,0,.16)}
html[data-theme="dark"] .hero .eyebrow{border-color:var(--line)}html[data-theme="dark"] .local-badge{color:#8be0c4;background:#1a3b39}
@media(max-width:850px){.hero{grid-template-columns:1fr;gap:40px;padding-top:61px;padding-bottom:55px}.hero-desc{max-width:650px}.hero-panel{max-width:610px;transform:none}.tool-grid{grid-template-columns:repeat(2,1fr)}.benefits{margin-bottom:58px}}@media(max-width:560px){.container{padding-left:18px;padding-right:18px}.header-inner{height:64px}.brand{font-size:18px}.brand-symbol{width:33px;height:33px;font-size:20px}.nav{display:none}.theme-button{padding:9px}.theme-label{display:none}.hero{padding-top:45px}.hero h1{font-size:46px}.hero-desc{font-size:15px}.hero-notes{gap:9px;font-size:11px}.mail-preview{padding:16px}.benefits{grid-template-columns:1fr;gap:10px}.benefits>div{min-height:unset;padding:17px}.tools-section{padding:57px 0}.tool-grid{grid-template-columns:1fr;gap:11px}.tool-card{min-height:110px;padding:17px 17px 17px 74px;justify-content:center}.tool-card .tool-icon{position:absolute;left:17px;top:21px}.tool-card strong{margin:0 0 4px;font-size:15px}.tool-card .arrow{top:24px;right:15px}.workspace{margin-top:17px;padding:20px 16px}.panel-heading{display:block}.panel-heading h3{font-size:22px}.local-badge{display:inline-block;margin-top:12px}.result-row{flex-wrap:wrap}.result-row .button{margin-left:auto}.section-head h2{font-size:32px}.faq{padding-top:60px;padding-bottom:65px}.footer-inner{display:block}.footer-links{margin:24px 0}.option-row{gap:10px}.option-row label{width:46%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* Private inbox — visible only after the backend health check succeeds. */
[hidden]{display:none!important}
.inbox-lifetime{font-size:11px;margin:9px 0 0;color:var(--muted)}
.inbox-action-buttons{flex-wrap:wrap;margin-top:12px}
.inbox-action-buttons button:not([disabled]){background:var(--soft);border-color:var(--line);color:var(--text);font-weight:700}
.inbox-action-buttons #createInboxButton:not([disabled]){background:var(--blue);color:white;border-color:var(--blue)}
.live-inbox-list{display:flex;flex-direction:column;max-height:270px;overflow:auto;gap:8px;margin:10px 0}
.live-inbox-list .empty-mail{font-size:12px;color:var(--muted);margin:0}
.live-inbox-row{display:flex;flex-direction:column;align-items:stretch;gap:4px;text-align:left;border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:12px;width:100%;color:var(--text)}
.live-inbox-row:hover{border-color:var(--blue)}
.live-inbox-row strong{font-size:13px;overflow-wrap:anywhere}
.live-inbox-row span{font-size:11px;color:var(--muted);overflow-wrap:anywhere}
.live-inbox-row small{font-size:11px;color:var(--muted);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.live-message-viewer{margin-top:15px;padding:14px;background:var(--bg);border:1px solid var(--line);border-radius:12px}
.live-message-viewer h3{font-size:17px;overflow-wrap:anywhere;margin:12px 0 4px}
.live-message-viewer p{font-size:11px;overflow-wrap:anywhere}
.live-message-viewer pre{white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;max-height:250px;overflow:auto;color:var(--text);margin:12px 0}
.live-otp-row{border:1px solid #d3e0fb;background:var(--soft);border-radius:9px;padding:9px;display:flex;align-items:center;justify-content:space-between;gap:7px;font-size:12px}
.inbox-feedback{min-height:18px;font-size:11px;color:var(--blue);margin:10px 0}
#liveInboxAddress{overflow-wrap:anywhere;word-break:break-word;font-size:13px}

/* Temporary inbox controls: compact, accessible on desktop and mobile. */
.inbox-duration{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:12px}
.inbox-duration label{font-size:11px;font-weight:750;color:var(--muted)}
.inbox-duration select{max-width:180px;border:1px solid var(--line);background:var(--soft);color:var(--text);border-radius:9px;padding:8px 10px;font-size:12px;font-weight:700;font-family:inherit;cursor:pointer}
.inbox-duration select:focus-visible,#refreshInboxButton:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.inbox-top-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
#refreshInboxButton{border:1px solid var(--line);border-radius:8px;background:var(--soft);color:var(--text);font-size:11px;font-weight:750;padding:7px 10px;cursor:pointer}
#refreshInboxButton:hover:not(:disabled){border-color:var(--blue);color:var(--blue)}
#refreshInboxButton:disabled{opacity:.5;cursor:not-allowed}
.inbox-top-actions .preview-pill{margin-left:0;white-space:nowrap}
@media(max-width:420px){.inbox-top-actions{gap:5px}#refreshInboxButton{padding:6px 8px}.inbox-duration{justify-content:space-between}}

/* Inbox auto-start, renew controls and in-app mail notification */
#extendInboxButton:not([disabled]){background:var(--blue);border-color:var(--blue);color:#fff}
#retryInboxButton:not([disabled]){background:var(--soft);color:var(--text)}
.new-email-badge{background:#dcfce7;color:#166534;animation:mail-pop .3s ease-out}
@keyframes mail-pop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.new-email-badge{animation:none}}

/* Support pages and mobile layout polish — shared with the homepage */
.header-help-link{display:none;align-items:center;justify-content:center;color:var(--blue);font-size:12px;font-weight:800;padding:7px 10px;border-radius:9px;background:var(--soft);white-space:nowrap}
.faq-support-note{text-align:center;margin:24px 0 0;font-size:13px}
.faq-support-note a,.support-consent a{color:var(--blue);font-weight:800;text-decoration:underline;text-underline-offset:3px}
.support-main{padding-top:62px;padding-bottom:90px}
.support-intro{max-width:760px;margin-bottom:28px}
.support-intro .eyebrow{display:inline-block;margin-bottom:9px}
.support-intro h1{font-size:clamp(35px,4vw,52px);letter-spacing:-.045em;line-height:1.08;margin:0 0 18px}
.support-intro p{max-width:620px;font-size:15px}
.support-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.75fr);gap:22px;align-items:start}
.support-card{border:1px solid var(--line);background:var(--card);border-radius:18px;padding:26px;box-shadow:var(--shadow);min-width:0}
.support-card h2{font-size:20px;letter-spacing:-.025em;margin:0 0 15px}
.support-card-head{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.support-card-head h2{margin:5px 0 0}
.support-icon{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:13px;background:var(--soft);font-size:22px;color:var(--blue)}
.support-help,.support-safety p,.support-notice p{font-size:12px;line-height:1.7;color:var(--muted)}
.support-form-card form{display:block;margin-top:22px}
.support-form-card label{display:block;font-size:12px;font-weight:800;color:var(--text);margin:18px 0 7px}
.support-form-card select,.support-form-card textarea,.support-form-card input{width:100%;min-width:0;border:1px solid var(--line);background:var(--bg);color:var(--text);border-radius:10px;padding:12px;font:inherit;font-size:13px;outline:none}
.support-form-card select:focus-visible,.support-form-card textarea:focus-visible,.support-form-card input:focus-visible{border-color:var(--blue);outline:2px solid #8eacff;outline-offset:1px}
.support-form-card textarea{resize:vertical;min-height:136px}
.support-field-hint{font-size:10px;color:var(--muted)}
.support-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.optional{font-size:10px;color:var(--muted);font-weight:500}
.support-honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.support-consent{font-size:11px;line-height:1.7;margin:21px 0 17px}
.support-submit{display:inline-flex;align-items:center;justify-content:center;min-height:46px}
.support-feedback{font-size:12px;font-weight:700;overflow-wrap:anywhere;margin:14px 0 0;color:#ba3c3c;min-height:20px}
.support-feedback.is-success{color:#138458}
.support-sidebar{display:flex;flex-direction:column;gap:16px}
.support-sidebar details{border-bottom:1px solid var(--line);padding:12px 0}
.support-sidebar details:last-child{border-bottom:0}
.support-sidebar summary{font-size:13px;font-weight:750;cursor:pointer}
.support-sidebar details p{font-size:12px;line-height:1.7;margin:8px 0 0}
.support-safety .support-icon{margin-bottom:12px}
.support-notice{background:var(--soft)}
@media(max-width:850px){
  .support-layout{grid-template-columns:1fr}
  .support-sidebar{display:grid;grid-template-columns:1fr 1fr}
  .support-sidebar>.support-card:first-child{grid-column:1/-1}
}
@media(max-width:560px){
  .header-inner{gap:8px;min-width:0}
  .header-inner .brand{font-size:clamp(15px,4.8vw,18px);letter-spacing:-.75px}
  .header-help-link{display:inline-flex;padding:8px;font-size:11px;margin-left:auto}
  .support-main{padding-top:36px;padding-bottom:60px}
  .support-intro h1{font-size:clamp(33px,9vw,41px)}
  .support-intro p{font-size:13px}
  .support-layout{gap:15px}
  .support-card{padding:19px;border-radius:14px}
  .support-sidebar{display:flex;flex-direction:column}
  .support-form-grid{grid-template-columns:1fr;gap:0}
  .support-submit{width:100%}
  .hero h1{font-size:clamp(34px,10.2vw,46px)}
  .hero-panel{max-width:100%;min-width:0}
  .mail-preview{padding:16px}
  .preview-address{min-width:0;align-items:center;padding:12px}
  .inbox-action-buttons{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px}
  .inbox-action-buttons button{min-width:0;min-height:44px;padding:9px 7px;font-size:12px;text-align:center}
  .inbox-top{flex-wrap:wrap;gap:8px}
  .inbox-top-actions{width:100%;justify-content:space-between;margin-left:0}
  #refreshInboxButton{min-height:38px}
  #inboxCountdown{white-space:nowrap}
  .inbox-duration select{min-height:42px}
  .live-inbox-row{min-height:64px}
  .live-inbox-list{max-height:320px}
  .footer-links{flex-wrap:wrap;gap:12px 18px}
}
@media(max-width:350px){
  .header-inner .brand{font-size:15px}
  .header-help-link{font-size:10px;padding:7px 5px}
  .theme-button{padding:6px}
  .inbox-top-actions{gap:5px}
  .inbox-action-buttons button{font-size:11px}
}

/* SpeedMail learning center & topical guides */
.homepage-learning{padding-top:75px;padding-bottom:74px}
.guide-hub-main,.guide-main{padding-top:48px;padding-bottom:98px}
.guide-breadcrumb{display:flex;gap:9px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:12px;margin-bottom:32px}
.guide-breadcrumb a{font-weight:650;color:var(--blue)}
.guide-hub-head,.guide-intro{max-width:800px;margin-bottom:34px}
.guide-hub-head h1,.guide-intro h1{font-size:clamp(35px,4.4vw,53px);line-height:1.09;letter-spacing:-.046em;margin:12px 0 18px}
.guide-hub-head p,.guide-lead{font-size:clamp(14px,1.65vw,17px);line-height:1.77;max-width:750px}
.guide-updated{font-size:11px;color:var(--muted);margin:13px 0 0}
.guide-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.guide-card{border:1px solid var(--line);background:var(--card);border-radius:17px;min-width:0;padding:24px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
.guide-card-icon{font-size:24px;width:48px;height:48px;background:var(--soft);border-radius:14px;display:grid;place-items:center;margin-bottom:8px}
.guide-card .eyebrow{font-size:10px;margin:0}
.guide-card h2,.guide-card h3{font-size:18px;letter-spacing:-.025em;line-height:1.38;margin:0}
.guide-card p{font-size:13px;line-height:1.7;flex:1;margin:0}
.guide-card a:focus-visible,.guide-related-link:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.guide-card h2 a:hover,.guide-card h3 a:hover{color:var(--blue)}
.guide-card-link{font-size:12px;font-weight:800;color:var(--blue);margin-top:5px;align-self:flex-start}
.guide-card-link:hover{text-decoration:underline}
.guide-body{max-width:840px;background:var(--card);border:1px solid var(--line);border-radius:19px;padding:40px 45px;box-shadow:var(--shadow)}
.guide-body h2{font-size:23px;letter-spacing:-.035em;margin:32px 0 12px;line-height:1.32}
.guide-body h2:first-child{margin-top:0}
.guide-body h3{font-size:17px;margin:23px 0 7px}
.guide-body p,.guide-body li{font-size:14px;line-height:1.88;color:var(--muted)}
.guide-body ul,.guide-body ol{margin:0 0 20px;padding-left:23px}
.guide-body li{margin:0 0 10px;padding-left:3px}
.guide-body a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;font-weight:650}
.guide-body code{font-size:12px;padding:2px 5px;background:var(--soft);border-radius:4px}
.guide-tip{border-left:4px solid var(--blue);background:var(--soft);padding:17px 20px;font-size:13px;line-height:1.8;border-radius:0 11px 11px 0;margin:27px 0}
.guide-related{margin:42px 0 20px}
.guide-related h2{font-size:23px;letter-spacing:-.035em}
.guide-related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:840px}
.guide-related-link{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:14px;background:var(--card);padding:20px}
.guide-related-link strong{font-size:15px}
.guide-related-link span{font-size:12px;line-height:1.55;color:var(--muted)}
.guide-related-link span:last-child{color:var(--blue);font-weight:750}
.guide-safe-cta{border:1px solid var(--line);background:var(--soft);padding:28px 32px;border-radius:17px;display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:34px}
.guide-safe-cta h2{font-size:22px;letter-spacing:-.03em;margin:9px 0}
.guide-safe-cta p{font-size:12px;max-width:550px;margin-bottom:0}
.guide-safe-cta .button{white-space:nowrap}
.guide-howto{display:grid;grid-template-columns:0.95fr 1.05fr;gap:35px;align-items:start;margin:55px 0}
.guide-howto h2{font-size:26px;letter-spacing:-.035em}
.guide-howto p{font-size:13px;line-height:1.7}
.guide-howto ol{margin:0;padding-left:22px}
.guide-howto li{margin:0 0 13px;padding-left:5px}
.guide-howto li strong{font-size:14px}
.guide-howto li p{margin-top:5px}
.guides-more-link{text-align:center;margin:27px 0 0}
.guides-more-link a{font-size:13px;font-weight:800;color:var(--blue)}
@media(max-width:850px){.guide-card-grid{grid-template-columns:1fr 1fr}.guide-card-grid--home .guide-card:last-child{grid-column:1/-1}.guide-hub-main,.guide-main{padding-top:40px}.guide-howto{gap:25px}}
@media(max-width:560px){
 .homepage-learning{padding-top:46px;padding-bottom:38px}
 .guide-hub-main,.guide-main{padding-top:30px;padding-bottom:56px}
 .guide-hub-head h1,.guide-intro h1{font-size:clamp(31px,9vw,41px)}
 .guide-breadcrumb{margin-bottom:22px}
 .guide-card-grid{grid-template-columns:1fr;gap:11px}
 .guide-card-grid--home .guide-card:last-child{grid-column:auto}
 .guide-card{padding:20px;gap:8px}
 .guide-body{padding:24px 20px;border-radius:14px}
 .guide-body h2{font-size:20px;margin-top:26px}
 .guide-body p,.guide-body li{font-size:13px;line-height:1.8}
 .guide-related-grid{grid-template-columns:1fr}
 .guide-safe-cta{padding:22px;flex-direction:column;align-items:stretch}
 .guide-safe-cta .button{text-align:center}
 .guide-howto{display:block;margin:38px 0}
 .guide-howto ol{margin-top:23px}
}

/* Mobile navigation, inbox readability, and accessible touch targets. */
.mobile-menu-button{display:none;align-items:center;justify-content:center;min-height:44px;min-width:82px;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--text);font-size:13px;font-weight:750;white-space:nowrap}
.mobile-menu-button:hover{background:var(--soft);border-color:var(--blue)}
.mobile-menu-button:focus-visible{outline:3px solid #86a9ff;outline-offset:2px}
#liveInboxAddress{display:block;min-width:0;overflow-wrap:anywhere;word-break:break-word;user-select:all;line-height:1.45;color:var(--text);font-size:clamp(11px,2.5vw,13px)}
.live-message-viewer{min-width:0;max-width:100%}
#liveMessageBody{max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.preview-actions button,.inbox-top-actions button{min-height:44px}
@media(max-width:850px){
 .site-header .header-inner{position:relative;gap:10px}
 .site-header .nav{display:none}
 .mobile-menu-button{display:inline-flex;margin-left:auto}
 .site-header .header-help-link{display:none}
 .site-header .nav.is-open{position:absolute;top:calc(100% - 1px);left:0;right:0;z-index:40;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:8px;background:var(--card);border:1px solid var(--line);border-radius:0 0 14px 14px;box-shadow:var(--shadow);max-height:calc(100vh - 84px);overflow-y:auto}
 .site-header .nav.is-open a{display:flex;align-items:center;width:100%;min-height:44px;padding:10px 15px;border-radius:8px;font-size:14px;color:var(--text)}
 .site-header .nav.is-open a:hover,.site-header .nav.is-open a:focus-visible{background:var(--soft);color:var(--blue)}
}
@media(max-width:560px){
 .site-header .header-help-link{display:none}
 .mobile-menu-button{font-size:12px;min-width:77px;padding:8px 9px}
 .site-header .theme-button{margin:0;padding:8px;min-height:44px}
 .site-header .header-inner{gap:6px}
 .preview-address{gap:8px}
 .inbox-duration label{font-size:12px}
 .inbox-lifetime,.inbox-feedback{font-size:12px;line-height:1.55}
}
@media(max-width:350px){
 .site-header .brand{font-size:14px;letter-spacing:-.9px}
 .site-header .brand-symbol{width:30px;height:30px}
 .mobile-menu-button{min-width:72px;padding:7px;font-size:11px}
}

/* Readable microcopy and safer long-message wrapping on narrow devices. */
.preview-footnote{font-size:11px;line-height:1.55}
.live-inbox-row strong,.live-inbox-row span,.live-inbox-row small{min-width:0;overflow-wrap:anywhere}
.preview-pill{flex-shrink:0}
@media(max-width:560px){
 .field-title{font-size:11px}
 .preview-footnote{font-size:11px}
 .hero-panel,.mail-preview{min-width:0}
}

/* Mobile-first home: show the real inbox immediately below the navigation.
   Desktop deliberately retains the original two-column copy-left/mailbox-right layout. */
@media(min-width:851px){
  .hero > .hero-copy{grid-column:1;grid-row:1;min-width:0}
  .hero > .hero-panel{grid-column:2;grid-row:1;min-width:0}
}
@media(max-width:850px){
  .hero{grid-template-columns:minmax(0,1fr);gap:27px;padding-top:19px}
  .hero > .hero-panel{grid-column:1;grid-row:1;max-width:610px;width:100%;min-width:0;margin-inline:auto;transform:none}
  .hero > .hero-copy{grid-column:1;grid-row:2;max-width:610px;width:100%;min-width:0;margin-inline:auto}
  .hero > .hero-panel:hover{transform:none}
}
@media(max-width:560px){
  .hero{padding-top:12px;gap:28px;padding-bottom:38px}
  .hero > .hero-panel{border-radius:17px;box-shadow:0 12px 30px rgba(36,63,122,.09)}
  .hero-panel .window-header{height:48px;padding-inline:14px;gap:9px}
  .hero-panel .window-header .preview-pill{font-size:10px}
  .hero-panel .mail-preview{padding:15px 14px}
  .hero-panel .preview-address{padding:12px;min-height:53px}
  .hero-panel .inbox-action-buttons{margin:12px 0 18px}
  .hero-panel .inbox-top-actions{gap:7px}
  .hero-copy h1{font-size:clamp(34px,10.5vw,44px);line-height:1.08;margin:15px 0 13px}
  .hero-copy .hero-desc{font-size:14px;line-height:1.65}
  .hero-copy .hero-actions{margin-top:18px}
  .hero-copy .hero-notes{margin-top:16px}
}

/* Screen-fit: keep all content within 320–430px mobile viewports.
   Make components shrink naturally, rather than scaling down the entire site. */
html,body{max-width:100%;overflow-x:clip}
@media(max-width:850px){
  .hero::before{left:0;right:0;width:100%;max-width:100%;height:360px}
  .hero,.hero-copy,.hero-panel,.mail-preview,.preview-address,
  .benefits,.tools-section,.tool-grid,.workspace,.faq,.footer-inner,
  .support-layout,.support-card,.guide-card,.guide-body,.guide-safe-cta,
  .guide-related-grid{min-width:0;max-width:100%}
  .hero-panel,.hero-copy{width:100%}
  .tool-grid,.guide-card-grid,.guide-related-grid{min-width:0}
  .tool-card,.workspace [data-panel],.result-row{min-width:0;max-width:100%}
  .preview-address > span,#liveInboxAddress{min-width:0;max-width:100%;overflow-wrap:anywhere}
  .live-inbox-list,.live-inbox-row,.live-message-viewer{min-width:0;max-width:100%}
  #liveMessageBody,.result-text{overflow-wrap:anywhere;word-break:break-word}
  .footer-links{flex-wrap:wrap}
}
@media(max-width:560px){
  .container{width:100%;max-width:100%;padding-inline:clamp(12px,4vw,18px)}
  .hero{width:100%;min-width:0;grid-template-columns:minmax(0,1fr);gap:24px}
  .hero > .hero-panel,.hero > .hero-copy{width:100%;max-width:100%;min-width:0}
  .hero-panel .window-header{min-width:0;gap:7px;padding-inline:12px}
  .hero-panel .window-header > span:nth-child(2){min-width:0;font-size:12px}
  .hero-panel .window-header .preview-pill{margin-left:auto;font-size:10px;padding:5px 8px}
  .hero-panel .window-dots{flex:none;gap:4px}
  .hero-panel .window-dots i{height:7px;width:7px}
  .hero-panel .mail-preview{padding:13px 12px}
  .hero-panel .preview-address{padding:11px;gap:7px}
  #liveInboxAddress{font-size:clamp(11px,3vw,13px);line-height:1.55;user-select:all}
  .inbox-duration{width:100%;justify-content:space-between}
  .inbox-duration label{flex:1;min-width:0}
  .inbox-duration select{flex:0 1 135px;max-width:46%;min-width:0}
  .inbox-action-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%}
  .inbox-action-buttons button{width:100%;max-width:100%;min-width:0;min-height:44px;padding:9px 5px;white-space:normal;overflow-wrap:anywhere}
  .inbox-top{min-width:0}
  .inbox-top-actions{display:flex;flex-wrap:wrap;justify-content:space-between;min-width:0;width:100%}
  .inbox-top-actions #refreshInboxButton{flex:0 1 auto;min-width:0}
  .inbox-top-actions #inboxCountdown{margin-left:auto;max-width:100%;white-space:normal;text-align:right}
  .hero-copy h1{max-width:100%;font-size:clamp(31px,9vw,43px);overflow-wrap:anywhere}
  .hero-copy .hero-actions{min-width:0}
  .hero-copy .hero-actions .button{max-width:100%;white-space:normal}
  .workspace,.support-card,.guide-body{min-width:0}
  .workspace input,.workspace textarea,.support-form-card input,
  .support-form-card textarea,.support-form-card select{min-width:0;max-width:100%}
  .qr-result img,.qr-result canvas{max-width:100%;height:auto}
}
@media(max-width:360px){
  .site-header .header-inner{padding-inline:12px;gap:4px}
  .site-header .brand{min-width:0;font-size:13px;letter-spacing:-.6px;gap:5px}
  .site-header .brand-symbol{width:28px;height:28px;flex:none}
  .mobile-menu-button{font-size:11px;min-width:66px;min-height:42px;padding:6px}
  .site-header .theme-button{padding:7px;min-width:38px;min-height:42px}
  .hero-panel .window-header{padding-inline:10px}
  .hero-panel .mail-preview{padding:12px 10px}
  .inbox-action-buttons{gap:6px}
  .inbox-action-buttons button{font-size:11px;padding:8px 4px}
  .inbox-top-actions{gap:5px}
  .hero .eyebrow{max-width:100%;font-size:11px;line-height:1.4}
}

/* SpeedMail mobile premium motion v20261010-2 */
/* Purposeful mobile-only visuals: transform/opacity animations, no heavy assets. */
@media(max-width:850px){
  .site-header{
    background:color-mix(in srgb,var(--card) 88%,transparent);
    border-bottom:1px solid color-mix(in srgb,var(--blue) 12%,var(--line));
    box-shadow:0 5px 22px rgba(50,79,159,.045);
  }
  .site-header .brand-symbol{
    background:linear-gradient(135deg,#1f76ff 0%,#6454ec 94%);
    box-shadow:0 5px 15px rgba(56,104,239,.23);
  }
  .mobile-menu-button{
    border-radius:12px;
    color:var(--blue);
    border-color:color-mix(in srgb,var(--blue) 23%,var(--line));
    background:color-mix(in srgb,var(--soft) 75%,var(--card));
    transition:transform .22s ease,background-color .22s ease,border-color .22s ease;
  }
  .mobile-menu-button:active,.site-header .theme-button:active{transform:scale(.96)}
  .hero{
    isolation:isolate;
    background:radial-gradient(ellipse 74% 38% at 78% 13%,rgba(107,95,239,.09),transparent 90%);
  }
  .hero::before{
    background:radial-gradient(ellipse at 20% 12%,rgba(48,116,247,.12),transparent 68%);
    opacity:.8;
  }
  .hero>.hero-panel{
    position:relative;
    border-radius:23px;
    border:1px solid color-mix(in srgb,var(--blue) 26%,var(--line));
    background:var(--card);
    box-shadow:0 19px 46px rgba(38,74,167,.13),0 3px 9px rgba(38,74,167,.045);
  }
  .hero>.hero-panel::before{
    content:"";
    position:absolute;
    inset:0 17px auto;
    height:3px;
    z-index:2;
    border-radius:0 0 8px 8px;
    background:linear-gradient(90deg,#55bafd,#4777ff,#9168eb);
    pointer-events:none;
  }
  .hero-panel .window-header{
    background:linear-gradient(115deg,color-mix(in srgb,var(--soft) 75%,var(--card)),var(--card));
    border-bottom-color:color-mix(in srgb,var(--blue) 13%,var(--line));
    letter-spacing:-.01em;
  }
  .hero-panel .window-header .preview-pill.muted{
    display:inline-flex;align-items:center;gap:6px;
    color:#147e65;
    background:#e9faf4;
    border:1px solid #c7ecdf;
    font-weight:800;
  }
  .hero-panel .window-header .preview-pill.muted::before{
    content:"";display:inline-block;flex:none;width:6px;height:6px;
    border-radius:50%;background:#10a47c;box-shadow:0 0 0 3px rgba(16,164,124,.11);
  }
  .hero-panel .mail-preview{
    background:linear-gradient(178deg,color-mix(in srgb,var(--card) 93%,#edf4ff),var(--card) 70%);
  }
  .hero-panel .field-title{
    letter-spacing:.1em;
    color:var(--muted);
    font-weight:850;
  }
  .hero-panel .preview-address{
    position:relative;
    overflow:hidden;
    background:linear-gradient(115deg,color-mix(in srgb,var(--soft) 85%,var(--card)),color-mix(in srgb,var(--soft) 55%,var(--card)));
    border:1px solid color-mix(in srgb,var(--blue) 24%,var(--line));
    border-radius:13px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.23);
  }
  .hero-panel .preview-address>span{position:relative;z-index:1}
  .hero-panel .preview-address>span:last-child{
    flex:none;display:grid;place-items:center;
    min-width:27px;min-height:27px;
    border-radius:9px;
    background:color-mix(in srgb,var(--blue) 11%,var(--card));
    color:var(--blue);
    font-size:14px;
  }
  #liveInboxAddress{
    letter-spacing:-.035em;
    font-weight:800;
    color:var(--text);
    font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  }
  .inbox-duration select{
    border-color:color-mix(in srgb,var(--blue) 18%,var(--line));
    border-radius:11px;
    background:var(--card);
    color:var(--text);
    min-height:40px;
  }
  .inbox-action-buttons button{
    border-radius:11px;
    box-shadow:0 3px 9px rgba(48,78,147,.035);
    font-weight:800;
    transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease;
  }
  .inbox-action-buttons #copyInboxButton:not(:disabled){
    color:#fff;
    border-color:#3d65f0;
    background:linear-gradient(122deg,#2573f5 0%,#5a52ed 100%);
    box-shadow:0 7px 17px rgba(54,103,236,.18);
  }
  .inbox-action-buttons #extendInboxButton:not(:disabled){
    color:var(--blue);
    border-color:color-mix(in srgb,var(--blue) 22%,var(--line));
    background:color-mix(in srgb,var(--soft) 82%,var(--card));
  }
  .inbox-action-buttons #resetInboxButton:not(:disabled){
    border-color:var(--line);
    background:var(--card);
    color:var(--text);
  }
  .inbox-action-buttons button:active:not(:disabled),#refreshInboxButton:active:not(:disabled){
    transform:scale(.965);
  }
  .hero-panel .inbox-top{
    border-bottom:1px solid color-mix(in srgb,var(--blue) 12%,var(--line));
  }
  .hero-panel .inbox-top>strong{font-size:14px;letter-spacing:-.02em}
  .inbox-top-actions #refreshInboxButton{
    border-radius:10px;
    background:color-mix(in srgb,var(--soft) 77%,var(--card));
    font-weight:800;
    transition:transform .18s ease,background-color .18s ease;
  }
  .live-inbox-list{
    border-radius:12px;
    background:color-mix(in srgb,var(--soft) 33%,var(--card));
  }
  .live-inbox-row{
    border-radius:12px;
    border-color:color-mix(in srgb,var(--blue) 12%,var(--line));
    background:var(--card);
    transition:transform .18s ease,border-color .18s ease;
  }
  .live-inbox-row:active{transform:scale(.99)}
  .hero-panel .preview-footnote{border-radius:10px}
  .hero-copy>.eyebrow{border-color:color-mix(in srgb,var(--blue) 19%,var(--line));font-weight:750}
  .hero-copy .hero-actions .button{border-radius:13px}
  .hero-notes>span{
    display:inline-flex;align-items:center;
    padding:7px 11px;
    border-radius:30px;
    border:1px solid color-mix(in srgb,var(--blue) 12%,var(--line));
    background:color-mix(in srgb,var(--card) 82%,var(--soft));
    color:var(--text);
    font-weight:650;
  }
  .benefits>div,.guide-card,.tool-card,.workspace,.faq details{
    border-color:color-mix(in srgb,var(--blue) 11%,var(--line));
  }
  .faq details[open]{
    border-color:color-mix(in srgb,var(--blue) 36%,var(--line));
    box-shadow:0 9px 25px rgba(49,94,234,.06);
  }
  .faq summary{min-height:24px}
}
@media(max-width:560px){
  body{background-image:radial-gradient(circle at 0% 125px,rgba(89,148,255,.055),transparent 320px)}
  .hero{padding-top:13px;gap:29px}
  .hero>.hero-panel{border-radius:20px;box-shadow:0 15px 31px rgba(45,81,168,.13)}
  .hero-panel .window-header{height:51px}
  .hero-panel .mail-preview{padding:17px 14px}
  .hero-panel .preview-address{min-height:57px;padding:12px}
  .inbox-action-buttons{gap:9px}
  .inbox-action-buttons button{min-height:46px;font-size:12px;letter-spacing:-.01em}
  .hero-panel .inbox-lifetime{margin-top:10px}
  .hero-panel .inbox-top{padding-bottom:11px}
  .hero-copy h1{font-size:clamp(32px,9.2vw,43px);margin:13px 0 11px}
  .hero-copy .hero-desc{line-height:1.7}
  .hero-copy .hero-actions{gap:9px}
  .hero-copy .hero-actions .button{min-height:47px}
  .hero-notes{gap:7px;font-size:11px;margin-top:15px}
  .hero-notes>span{padding:7px 9px;font-size:10px}
  .benefits{gap:11px;margin-bottom:42px}
  .benefits>div{
    display:grid;grid-template-columns:41px minmax(0,1fr);
    align-items:center;gap:2px 12px;
    border-radius:17px;
    padding:15px 16px;
    background:linear-gradient(105deg,color-mix(in srgb,var(--soft) 38%,var(--card)),var(--card));
    box-shadow:0 6px 16px rgba(54,95,171,.035);
  }
  .benefits .benefit-icon{
    grid-column:1;grid-row:1 / span 2;
    width:41px;height:41px;
    display:grid;place-items:center;border-radius:12px;
    background:color-mix(in srgb,var(--blue) 9%,var(--soft));
    font-size:23px;
  }
  .benefits strong{grid-column:2;font-size:14px;margin:0}
  .benefits p{grid-column:2;font-size:11px;line-height:1.5;margin:0}
  .tools-section{padding:51px 0}
  .tool-grid{gap:11px}
  .tool-card{
    border-radius:16px;
    background:linear-gradient(115deg,color-mix(in srgb,var(--soft) 30%,var(--card)),var(--card));
    box-shadow:0 5px 16px rgba(49,94,234,.035);
    transition:transform .18s ease,box-shadow .22s ease,border-color .22s ease;
  }
  .tool-card.is-active{background:linear-gradient(115deg,color-mix(in srgb,var(--soft) 65%,var(--card)),var(--card))}
  .tool-card:active{transform:scale(.984)}
  .tool-card .tool-icon{border-radius:14px;background:color-mix(in srgb,var(--blue) 11%,var(--soft))}
  .workspace{border-radius:18px;box-shadow:0 9px 28px rgba(49,94,234,.045)}
  .guide-card{border-radius:17px;background:linear-gradient(135deg,color-mix(in srgb,var(--soft) 28%,var(--card)),var(--card))}
  .faq details{border-radius:14px;margin-bottom:10px;padding:16px 17px}
  .footer{background:color-mix(in srgb,var(--soft) 24%,var(--card))}
}
/* Animate only on mobile and only properties typically composited by GPUs. */
@media(max-width:850px) and (prefers-reduced-motion:no-preference){
  .hero>.hero-panel{animation:sm-premium-enter .72s cubic-bezier(.2,.78,.22,1) both}
  .hero>.hero-copy{animation:sm-premium-enter .65s .14s cubic-bezier(.2,.78,.22,1) both}
  .hero-panel .window-header .preview-pill.muted::before{animation:sm-live-breathe 2.7s ease-in-out infinite}
  .site-header .brand-symbol{animation:sm-logo-float 5.5s ease-in-out infinite}
  .hero .status-dot{animation:sm-live-breathe 3.1s ease-in-out infinite}
  .hero-panel .preview-address::after{
    content:"";position:absolute;z-index:0;top:-20%;left:-54%;
    width:31%;height:140%;pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(149,180,255,.13),transparent);
    transform:skewX(-14deg);animation:sm-soft-sheen 7.5s ease-in-out 1.5s infinite;
  }
  .live-inbox-row{animation:sm-message-appear .3s ease-out both}
}
@keyframes sm-premium-enter{
  from{opacity:0;transform:translateY(17px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes sm-logo-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2px)}
}
@keyframes sm-live-breathe{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.74;transform:scale(.84)}
}
@keyframes sm-soft-sheen{
  0%,24%{transform:translateX(0) skewX(-14deg);opacity:0}
  40%{opacity:1}
  52%,100%{transform:translateX(600%) skewX(-14deg);opacity:0}
}
@keyframes sm-message-appear{
  from{opacity:.75;transform:translateY(5px)}
  to{opacity:1;transform:translateY(0)}
}
/* Motion preferences, focus and dark-mode legibility are first-class. */
@media(prefers-reduced-motion:reduce){
  .hero>.hero-panel,.hero>.hero-copy,.site-header .brand-symbol,
  .hero .status-dot,.hero-panel .window-header .preview-pill.muted::before,
  .hero-panel .preview-address::after,.live-inbox-row{
    animation:none!important;
  }
  .inbox-action-buttons button,.tool-card,.mobile-menu-button{transition:none!important}
}
html[data-theme="dark"] .hero-panel .window-header .preview-pill.muted{
  color:#8ef1cb;background:#183b37;border-color:#275b52;
}
html[data-theme="dark"] .hero-panel .window-header .preview-pill.muted::before{
  background:#46e3ac;box-shadow:0 0 0 3px rgba(70,227,172,.12)
}

/* Inbox control grouping v20261010-1: address/new, copy, timer/extend, received/refresh. */
.hero-panel .inbox-address-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:stretch;gap:9px;min-width:0;margin-top:10px;
}
.hero-panel .inbox-address-row .preview-address{
  margin-top:0;min-width:0;width:100%;max-width:100%;
}
.hero-panel .inbox-new-address,
.hero-panel .inbox-copy-address,
.hero-panel .inbox-retry,
.hero-panel .inbox-extend-time,
.hero-panel .inbox-received-top #refreshInboxButton{
  display:inline-flex;align-items:center;justify-content:center;
  gap:7px;border-radius:11px;border:1px solid var(--line);
  min-height:43px;padding:9px 12px;
  color:var(--text);background:var(--card);
  font-size:12px;line-height:1.3;font-weight:800;
  cursor:pointer;white-space:normal;text-align:center;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.hero-panel .inbox-btn-icon{flex:none;display:block}
.hero-panel .inbox-new-address{
  width:94px;max-width:100%;
  align-self:stretch;
  border-color:color-mix(in srgb,var(--blue) 23%,var(--line));
  background:color-mix(in srgb,var(--soft) 75%,var(--card));
  color:var(--blue);
}
.hero-panel .inbox-new-address:hover:not(:disabled),
.hero-panel .inbox-received-top #refreshInboxButton:hover:not(:disabled){
  border-color:var(--blue);box-shadow:0 4px 12px rgba(49,94,234,.12);
}
.hero-panel .inbox-copy-row{
  display:flex;align-items:stretch;gap:9px;
  min-width:0;margin:9px 0 15px;
}
.hero-panel .inbox-copy-address{
  min-width:0;flex:1 1 auto;
  color:#fff;border-color:#3469ec;
  background:linear-gradient(120deg,#2878f3,#6455e9);
  box-shadow:0 7px 16px rgba(49,94,234,.15);
  min-height:44px;
}
.hero-panel .inbox-copy-address:hover:not(:disabled){
  box-shadow:0 8px 19px rgba(49,94,234,.24);
}
.hero-panel .inbox-retry{min-width:0;flex:1;background:var(--soft)}
.hero-panel .inbox-timer-controls{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) auto;
  gap:9px;align-items:stretch;
  min-width:0;padding:11px;border:1px solid color-mix(in srgb,var(--blue) 17%,var(--line));
  background:linear-gradient(110deg,color-mix(in srgb,var(--soft) 52%,var(--card)),var(--card));
  border-radius:14px;
}
.hero-panel .inbox-timer-display{
  display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;gap:6px;min-width:0;
}
.hero-panel .inbox-timer-label,
.hero-panel .inbox-timer-controls .inbox-duration label{
  display:block;margin:0;font-size:10px;line-height:1.25;
  font-weight:850;color:var(--muted);letter-spacing:.015em;
}
.hero-panel .inbox-timer-value{
  display:inline-block;min-width:0;max-width:100%;
  font-size:12px;font-weight:850;
  color:var(--blue);overflow-wrap:anywhere;line-height:1.4;
  font-variant-numeric:tabular-nums;
}
.hero-panel .inbox-timer-controls .inbox-duration{
  display:flex;flex-direction:column;justify-content:center;
  align-items:stretch;flex-wrap:nowrap;gap:6px;margin:0;
  min-width:0;width:100%;max-width:none;
}
.hero-panel .inbox-timer-controls .inbox-duration select{
  display:block;min-width:0;width:100%;max-width:100%;height:36px;
  min-height:36px;padding:5px 8px;font-size:12px;
}
.hero-panel .inbox-extend-time{
  align-self:stretch;min-width:91px;
  color:var(--blue);border-color:color-mix(in srgb,var(--blue) 25%,var(--line));
  background:color-mix(in srgb,var(--soft) 75%,var(--card));
}
.hero-panel .inbox-extend-time:hover:not(:disabled){
  background:color-mix(in srgb,var(--blue) 13%,var(--card));
}
.hero-panel .inbox-received-top{
  gap:10px;flex-wrap:nowrap;min-width:0;
  align-items:center;padding:15px 0 11px;
}
.hero-panel .inbox-received-title{
  display:flex;align-items:center;flex-wrap:wrap;gap:7px;
  min-width:0;flex:1 1 auto;
}
.hero-panel .inbox-received-title strong{
  font-size:14px;line-height:1.4;letter-spacing:-.02em;
}
.hero-panel .inbox-received-title .new-email-badge{
  margin:0;padding:4px 8px;font-size:10px;
}
.hero-panel .inbox-received-top #refreshInboxButton{
  flex:none;min-width:84px;max-width:115px;min-height:39px;
  padding:8px 10px;background:var(--soft);
}
.hero-panel .inbox-new-address:active:not(:disabled),
.hero-panel .inbox-copy-address:active:not(:disabled),
.hero-panel .inbox-extend-time:active:not(:disabled),
.hero-panel .inbox-received-top #refreshInboxButton:active:not(:disabled){
  transform:scale(.965);
}
.hero-panel button[hidden]{display:none!important}
@media(max-width:560px){
  .hero-panel .inbox-address-row{gap:7px;margin-top:9px}
  .hero-panel .inbox-new-address{width:77px;padding:7px 5px;gap:4px;font-size:11px}
  .hero-panel .inbox-copy-row{margin:8px 0 13px}
  .hero-panel .inbox-copy-address{min-height:43px;padding:9px;font-size:12px}
  .hero-panel .inbox-timer-controls{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto auto;
    column-gap:9px;row-gap:8px;
    padding:10px;
  }
  .hero-panel .inbox-timer-display{
    grid-column:1;grid-row:1/span 2;
    border-right:1px solid color-mix(in srgb,var(--blue) 13%,var(--line));
    padding:4px 10px 4px 0;
  }
  .hero-panel .inbox-timer-label{font-size:11px}
  .hero-panel .inbox-timer-value{font-size:clamp(12px,3.4vw,14px)}
  .hero-panel .inbox-timer-controls .inbox-duration{
    grid-column:2;grid-row:1;justify-content:flex-start;
    gap:5px;min-width:0;
  }
  .hero-panel .inbox-timer-controls .inbox-duration label{
    font-size:10px;flex:none;
  }
  .hero-panel .inbox-timer-controls .inbox-duration select{
    min-width:0;width:100%;max-width:100%;
    min-height:36px;font-size:12px;padding:6px 7px;
  }
  .hero-panel .inbox-extend-time{
    grid-column:2;grid-row:2;width:100%;
    min-width:0;min-height:39px;font-size:11px;padding:8px 5px;
  }
  .hero-panel .inbox-received-top{
    display:flex;flex-direction:row;gap:6px;
    align-items:center;justify-content:space-between;
    padding-top:13px;
  }
  .hero-panel .inbox-received-title strong{font-size:13px}
  .hero-panel .inbox-received-top #refreshInboxButton{
    min-width:79px;max-width:90px;min-height:39px;
    padding:7px 8px;font-size:11px;gap:5px;
  }
}
@media(max-width:350px){
  .hero-panel .inbox-new-address{width:70px;gap:3px;font-size:10px}
  .hero-panel .inbox-new-address .inbox-btn-icon{width:14px;height:14px}
  .hero-panel .inbox-timer-controls{gap:6px;padding:8px}
  .hero-panel .inbox-timer-display{padding-right:6px}
  .hero-panel .inbox-timer-label{font-size:10px}
  .hero-panel .inbox-timer-value{font-size:12px}
  .hero-panel .inbox-received-title strong{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .hero-panel .inbox-new-address,
  .hero-panel .inbox-copy-address,
  .hero-panel .inbox-extend-time,
  .hero-panel .inbox-received-top #refreshInboxButton{transition:none!important}
}

/* Compact phone timer + real inbox refresh indicator v20261010-3 */
.hero-panel .inbox-refresh-side{
  display:flex;align-items:center;justify-content:flex-end;gap:7px;
  flex:none;min-width:0;
}
.hero-panel .inbox-next-refresh{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;min-height:30px;flex:none;
  padding:5px 7px;
  font:850 11px/1.1 ui-monospace,SFMono-Regular,Consolas,monospace;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;border-radius:10px;
  color:var(--blue);
  background:color-mix(in srgb,var(--blue) 8%,var(--card));
  border:1px solid color-mix(in srgb,var(--blue) 14%,var(--line));
}
.hero-panel .inbox-loading-spinner{
  display:inline-block;width:15px;height:15px;flex:none;
  border:2px solid color-mix(in srgb,var(--blue) 22%,transparent);
  border-top-color:var(--blue);border-radius:50%;
  animation:sm-inbox-loading .72s linear infinite;
}
.hero-panel .inbox-loading-spinner[hidden]{display:none!important}
@keyframes sm-inbox-loading{to{transform:rotate(360deg)}}
@media(max-width:560px){
  /* Timer + select + extend in ONE low-height row: no oversized two-row box. */
  .hero-panel .inbox-timer-controls{
    display:grid;
    grid-template-columns:minmax(0,.94fr) minmax(0,1.13fr) minmax(0,.95fr);
    grid-template-rows:minmax(0,auto);
    align-items:center;
    gap:6px;
    width:100%;min-width:0;
    padding:7px 8px;
    border-radius:11px;
  }
  .hero-panel .inbox-timer-display{
    grid-column:1;grid-row:1;
    align-items:flex-start;justify-content:center;
    gap:4px;min-width:0;
    border-right:1px solid color-mix(in srgb,var(--blue) 12%,var(--line));
    padding:2px 3px 2px 0;
  }
  .hero-panel .inbox-timer-label{
    font-size:9px;line-height:1.1;white-space:nowrap;
  }
  .hero-panel .inbox-timer-value{
    font-size:clamp(10px,2.9vw,12px);
    line-height:1.2;letter-spacing:-.025em;
  }
  .hero-panel .inbox-timer-controls .inbox-duration{
    grid-column:2;grid-row:1;
    display:flex;flex-direction:column;align-items:stretch;justify-content:center;
    gap:4px;margin:0;min-width:0;width:100%;
  }
  .hero-panel .inbox-timer-controls .inbox-duration label{
    font-size:9px;line-height:1.1;white-space:nowrap;
  }
  .hero-panel .inbox-timer-controls .inbox-duration select{
    /* Fix: earlier mobile flex-basis:135px was stretching this SELECT vertically. */
    flex:0 0 32px;
    box-sizing:border-box;
    width:100%;max-width:100%;min-width:0;
    height:32px;min-height:32px;max-height:32px;
    align-self:stretch;
    padding:4px 5px;
    font-size:11px;line-height:1.2;border-radius:8px;
  }
  .hero-panel .inbox-extend-time{
    grid-column:3;grid-row:1;
    display:inline-flex;align-items:center;justify-content:center;
    width:100%;min-width:0;max-width:100%;
    height:33px;min-height:33px;
    padding:4px 3px;
    font-size:10px;line-height:1.15;border-radius:8px;
  }
  .hero-panel .inbox-lifetime{
    font-size:10px;
    margin-top:6px;margin-bottom:6px;
    line-height:1.42;
  }
  .hero-panel .inbox-received-top{gap:5px}
  .hero-panel .inbox-received-title{gap:5px}
  .hero-panel .inbox-received-title strong{
    font-size:12px;white-space:nowrap;
  }
  .hero-panel .inbox-refresh-side{gap:5px}
  .hero-panel .inbox-received-top #refreshInboxButton{
    min-width:73px;max-width:86px;
    min-height:36px;padding:6px 6px;
    font-size:10px;gap:4px;
  }
  .hero-panel .inbox-received-top #refreshInboxButton .inbox-btn-icon{width:13px;height:13px}
  .hero-panel .inbox-next-refresh{
    min-width:32px;min-height:30px;
    padding:5px 6px;
    font-size:10px;border-radius:8px;
  }
  .hero-panel .inbox-loading-spinner{width:13px;height:13px;border-width:2px}
}
@media(max-width:350px){
  .hero-panel .inbox-timer-controls{
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) minmax(0,1.02fr);
    gap:4px;padding:6px;
  }
  .hero-panel .inbox-timer-controls .inbox-duration label{font-size:8px}
  .hero-panel .inbox-timer-controls .inbox-duration select{font-size:10px}
  .hero-panel .inbox-timer-value{font-size:10px}
  .hero-panel .inbox-received-title strong{font-size:11px}
  .hero-panel .inbox-received-top #refreshInboxButton{min-width:65px;font-size:10px}
  .hero-panel .inbox-refresh-side{gap:4px}
}
@media(prefers-reduced-motion:reduce){
  .hero-panel .inbox-loading-spinner{animation:none;border-style:dotted}
}

/* Repair oversized mobile Choose time dropdown: explicit flex-basis height */
@media(max-width:560px){
  .hero-panel .inbox-timer-controls{
    grid-template-rows:auto;
    grid-auto-rows:min-content;
    align-content:center;
    min-height:0;
    max-height:none;
    padding-block:7px;
  }
  .hero-panel .inbox-timer-controls .inbox-duration{
    min-height:0;
    align-self:center;
  }
  .hero-panel .inbox-timer-controls .inbox-duration select{
    flex-basis:32px;
    flex-grow:0;
    flex-shrink:0;
  }
  .hero-panel .inbox-extend-time{
    align-self:center;
    min-height:33px;
    max-height:36px;
  }
}

/* Copy Address CTA: gentle traveling highlight and copied success v20261010-1. */
.hero-panel #copyInboxButton.inbox-copy-address{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:1px solid rgba(158,179,255,.55);
  color:#fff;
  background:linear-gradient(105deg,#297cfc 0%,#5366f0 52%,#7952e9 100%);
  box-shadow:0 8px 21px rgba(53,102,239,.23),0 0 18px rgba(102,82,238,.12);
  will-change:auto;
}
.hero-panel #copyInboxButton.inbox-copy-address > svg,
.hero-panel #copyInboxButton.inbox-copy-address > span{
  position:relative;
  z-index:2;
  flex-shrink:0;
}
.hero-panel #copyInboxButton.inbox-copy-address::before{
  content:"";
  position:absolute;
  top:-32%;
  left:0;
  width:31%;
  height:165%;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.07) 20%,
    rgba(255,255,255,.38) 48%,
    rgba(255,255,255,.08) 75%,
    rgba(255,255,255,0) 100%);
  transform:translateX(-120%) skewX(-19deg);
}
.hero-panel #copyInboxButton.inbox-copy-address::after{
  content:"";
  position:absolute;
  inset:1px;
  z-index:1;
  border-radius:inherit;
  pointer-events:none;
  border:1px solid rgba(255,255,255,.2);
  opacity:.65;
}
.hero-panel #copyInboxButton.inbox-copy-address:hover:not(:disabled){
  box-shadow:0 12px 27px rgba(53,102,239,.31),0 0 25px rgba(107,80,244,.18);
  filter:brightness(1.06);
}
.hero-panel #copyInboxButton.inbox-copy-address.is-copied{
  background:linear-gradient(105deg,#0f9b77,#18ab8a);
  border-color:rgba(116,236,195,.6);
  box-shadow:0 7px 20px rgba(15,155,119,.21);
}
.hero-panel #copyInboxButton.inbox-copy-address.is-copied::before{animation:none}
@media(prefers-reduced-motion:no-preference){
  .hero-panel #copyInboxButton.inbox-copy-address:not(.is-copied):not(:disabled){
    animation:sm-copy-soft-glow 3.8s ease-in-out infinite;
  }
  .hero-panel #copyInboxButton.inbox-copy-address:not(.is-copied):not(:disabled)::before{
    animation:sm-copy-light-sweep 4s ease-in-out infinite;
  }
}
@keyframes sm-copy-light-sweep{
  0%,12%{transform:translateX(-125%) skewX(-19deg);opacity:0}
  18%{opacity:1}
  54%{transform:translateX(410%) skewX(-19deg);opacity:1}
  62%,100%{transform:translateX(410%) skewX(-19deg);opacity:0}
}
@keyframes sm-copy-soft-glow{
  0%,100%{box-shadow:0 8px 19px rgba(53,102,239,.19),0 0 14px rgba(102,82,238,.10)}
  45%{box-shadow:0 9px 25px rgba(53,102,239,.26),0 0 23px rgba(102,82,238,.18)}
}
@media(prefers-reduced-motion:reduce){
  .hero-panel #copyInboxButton.inbox-copy-address,
  .hero-panel #copyInboxButton.inbox-copy-address::before{
    animation:none!important;
  }
}

/* SpeedMail focused 4-tool layout + full inbox controls v20261010-1 */
/* Four focused browser tools. */
@media(min-width:851px){
  .tool-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tool-card{min-width:0;padding:19px}
}
.tool-select{
  display:block;max-width:350px;width:100%;min-height:44px;
  border:1px solid var(--line);background:var(--card);color:var(--text);
  border-radius:12px;padding:9px 12px;font-weight:700;font-size:13px;line-height:1.5;font-family:inherit;
  margin-bottom:18px;cursor:pointer;
}
.tool-select:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* Inbox search, opt-in new-mail sound and individual message deletion. */
.inbox-mail-tools{
  display:flex;align-items:center;gap:8px;
  min-width:0;margin:11px 0 8px;
}
.inbox-search-wrap{
  display:flex;align-items:center;min-width:0;flex:1 1 auto;
  gap:8px;border:1px solid color-mix(in srgb,var(--blue) 18%,var(--line));
  background:var(--card);border-radius:11px;padding:0 11px;
  min-height:44px;color:var(--blue);
}
.inbox-search-wrap:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,101,236,.08)}
.inbox-search-wrap > span{font-size:19px;line-height:1;flex:none}
.inbox-search-wrap input{
  flex:1;min-width:0;width:100%;min-height:42px;
  border:0;outline:0;background:transparent;color:var(--text);
  font-weight:500;font-size:12px;line-height:1.5;font-family:inherit;
  text-overflow:ellipsis;
}
.inbox-search-wrap input::placeholder{color:var(--muted);opacity:.85}
#mailSoundToggle{
  flex:none;min-height:44px;min-width:92px;
  border-radius:11px;border:1px solid var(--line);
  padding:9px;background:var(--soft);color:var(--text);
  font-size:11px;font-weight:800;
}
#mailSoundToggle[aria-pressed="true"]{
  background:color-mix(in srgb,var(--blue) 11%,var(--card));
  color:var(--blue);border-color:color-mix(in srgb,var(--blue) 28%,var(--line));
}
#mailSoundToggle:active{transform:scale(.97)}
.inbox-message-entry{
  display:flex;align-items:stretch;gap:6px;
  min-width:0;max-width:100%;
}
.inbox-message-entry .live-inbox-row{
  flex:1 1 auto;width:auto;min-width:0;max-width:100%;
}
.inbox-delete-row{
  flex:none;align-self:stretch;min-height:44px;width:42px;
  border:1px solid color-mix(in srgb,#bc4e59 25%,var(--line));
  border-radius:11px;background:color-mix(in srgb,#bc4e59 5%,var(--card));
  color:#b34c56;font-size:17px;
  transition:transform .18s ease,background-color .18s ease;
}
.inbox-delete-row:hover{background:color-mix(in srgb,#bc4e59 13%,var(--card))}
.inbox-delete-row:active{transform:scale(.95)}
.inbox-viewer-actions{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.inbox-viewer-actions button{min-height:40px}
.inbox-delete-open{
  border-color:color-mix(in srgb,#bc4e59 30%,var(--line));
  color:#b34c56;background:var(--card);
}

/* Private mailbox QR uses the same in-browser QR dependency as the free tool. */
.hero-panel .inbox-email-qr{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  min-width:99px;min-height:44px;padding:8px 11px;
  border:1px solid color-mix(in srgb,var(--blue) 26%,var(--line));
  border-radius:11px;background:var(--soft);color:var(--blue);
  font-size:12px;font-weight:800;white-space:nowrap;
}
.hero-panel .inbox-email-qr:hover,.hero-panel .inbox-email-qr[aria-expanded="true"]{
  border-color:var(--blue);background:color-mix(in srgb,var(--blue) 12%,var(--card));
}
.inbox-qr-panel{
  display:flex;align-items:center;flex-direction:column;
  gap:10px;min-width:0;
  margin:-3px 0 15px;padding:13px;
  border:1px solid color-mix(in srgb,var(--blue) 19%,var(--line));
  background:var(--soft);border-radius:13px;
  text-align:center;
}
.inbox-qr-panel[hidden]{display:none!important}
.inbox-qr-top{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%}
.inbox-qr-top strong{font-size:12px}
.inbox-qr-top button{
  border:1px solid var(--line);background:var(--card);
  border-radius:9px;min-width:37px;min-height:37px;color:var(--text);
}
.inbox-qr-result{
  display:flex;align-items:center;justify-content:center;
  width:196px;max-width:100%;min-height:42px;
  font-size:12px;color:var(--muted);
}
.inbox-qr-result canvas,.inbox-qr-result img{
  display:block;max-width:100%;height:auto;
  border:8px solid white;border-radius:9px;
}
.inbox-qr-panel p{margin:0;font-size:11px}
#downloadEmailQr[hidden]{display:none!important}
@media(max-width:560px){
  .tool-grid{grid-template-columns:minmax(0,1fr)}
  .tool-select{max-width:100%}
  .hero-panel .inbox-copy-row{gap:7px;align-items:stretch}
  .hero-panel .inbox-email-qr{
    min-width:84px;min-height:43px;padding:7px 8px;font-size:11px;
  }
  .hero-panel .inbox-copy-address{flex:1 1 auto;min-width:0}
  .inbox-mail-tools{gap:7px}
  .inbox-search-wrap{min-height:42px;padding-inline:9px;gap:5px}
  .inbox-search-wrap input{min-height:40px;font-size:12px}
  #mailSoundToggle{min-width:86px;min-height:42px;padding:7px;font-size:10px}
  .inbox-delete-row{width:39px}
  .inbox-viewer-actions .button{font-size:11px;padding:9px}
}
@media(max-width:350px){
  .hero-panel .inbox-email-qr{min-width:73px;font-size:10px;padding:7px 5px}
  #mailSoundToggle{min-width:77px;padding:6px 4px}
  .inbox-search-wrap input{font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  #mailSoundToggle,.inbox-delete-row{transition:none}
}