:root{--purple:#1b0128;--panel-purple:#2b0b45;--cream:#faf9f6;--paper:#fff;--mauve:#6e5577;--lavender:#eee7f0;--green:#01bb1c;--orange:#f06b06;--red:#fd0000;--line:#ded6df;--shadow:0 18px 50px rgba(27,1,40,.08)}
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;background:var(--cream);color:var(--purple);font-family:"Open Sans",Arial,sans-serif;line-height:1.6}
img{max-width:100%}
a{color:inherit}
button,input,select{font:inherit}
.skip-link{position:absolute;left:-999px}
.skip-link:focus{left:1rem;top:1rem;background:#fff;padding:.7rem;z-index:10}
.site-header{min-height:80px;padding:1rem clamp(1rem,4vw,4rem);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(250,249,246,.16);background:var(--purple);color:var(--cream)}
.brand{display:flex;gap:.8rem;align-items:center;text-decoration:none;font-weight:800;line-height:1.05}
.brand small{display:block;font-size:.67rem;font-weight:600;color:rgba(250,249,246,.74);margin-top:.22rem}
.brand-logo{width:48px;height:48px;display:block;object-fit:contain;border-radius:12px}
.site-header nav,.site-header nav form{display:flex;gap:1.1rem;align-items:center}
.link-button{border:0;background:none;text-decoration:none;font-weight:700;color:var(--purple);cursor:pointer;padding:0}
.site-header nav a,.site-header .link-button{color:var(--cream);text-decoration:none}
.menu-toggle{display:none;border:1px solid rgba(250,249,246,.4);border-radius:12px;background:transparent;color:var(--cream);padding:.55rem .7rem;font-weight:800;cursor:pointer;align-items:center;gap:.55rem}
.menu-toggle-icon{display:grid;gap:4px;width:20px}
.menu-toggle-icon span{display:block;height:2px;border-radius:2px;background:currentColor}
.install-banner{width:min(1160px,calc(100% - 2rem));margin:1rem auto 0;padding:1rem 1.2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;border:1px solid rgba(27,1,40,.12);border-radius:18px;background:var(--paper);box-shadow:0 8px 28px rgba(27,1,40,.08)}
.install-banner[hidden]{display:none}
.install-brand-icon,.install-dialog-icon{display:block;border-radius:18px;flex:none}
.install-dialog-icon{margin-bottom:1rem}
.install-banner strong,.install-banner span{display:block}
.install-banner span{color:var(--mauve);font-size:.9rem}
.install-banner .button{flex:none}
.inline{display:inline}
.hero,.setup-shell,.section,.page-head,.two-col,.inbox,.narrow,.policy,.stat-grid,.sender-rules-shell{width:min(1160px,calc(100% - 2rem));margin-inline:auto}
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,7vw,7rem);align-items:center;min-height:70vh;padding:6rem 0}
.calm-mail-hero-logo{display:block;width:220px;height:220px;object-fit:contain;margin:0 0 1.25rem;border-radius:24px}
.setup-logo{width:180px;height:180px}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-weight:800;font-size:.75rem;color:var(--mauve)}
h1{font-family:"Open Sans",Arial,sans-serif;font-size:clamp(2.35rem,5vw,4.8rem);font-weight:800;line-height:1.02;letter-spacing:-.04em;margin:.5rem 0 1.3rem}
h2{font-family:"Open Sans",Arial,sans-serif;font-size:clamp(1.4rem,2.2vw,2.2rem);font-weight:800;line-height:1.18}
h3{font-size:1rem}
.lede{font-size:clamp(1.05rem,1.7vw,1.3rem);color:var(--mauve);max-width:42rem}
.actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}
.button{appearance:none;display:inline-block;border:1px solid var(--green);background:var(--green);color:var(--purple);padding:.85rem 1.2rem;border-radius:999px;text-decoration:none;font-weight:800;cursor:pointer}
.button:hover{filter:brightness(.95)}
.button.secondary{background:transparent;border-color:var(--purple);color:var(--purple)}
.button.danger{background:var(--red);border-color:var(--red);color:#fff}
.card{background:var(--paper);border:1px solid rgba(27,1,40,.08);border-radius:24px;padding:clamp(1.25rem,3vw,2rem);box-shadow:var(--shadow)}
.message-preview{transform:rotate(1deg)}
.status-pill{display:inline-block;background:#ddf7e1;color:var(--purple);padding:.35rem .65rem;border-radius:999px;font-size:.76rem;font-weight:800;text-transform:capitalize}
.attention{display:grid;gap:.5rem;background:#fff3e8;border-left:4px solid var(--orange);padding:1rem;border-radius:16px;margin:1.2rem 0}
.original-tease{width:100%;padding:.9rem;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--mauve)}
.section{padding:4rem 0}
.section>h2{text-align:center}
.feature-grid,.promise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.feature-grid article,.promise-grid article{padding:1.5rem;border-top:1px solid var(--line)}
.setup-shell{padding:5rem 0}
.setup-shell>h1{max-width:760px}
.setup-card{max-width:780px;margin:2.5rem 0}
.checks{list-style:none;padding:0}
.checks li{display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:.5rem;padding:.65rem 0;border-bottom:1px solid var(--line)}
.checks li strong{font-size:.78rem;color:var(--mauve)}
.check{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--lavender)}
.check.ok{background:#ddf7e1;color:var(--purple)}
.soft{color:var(--mauve);font-size:.9rem}
.narrow{max-width:620px;padding:5rem 0}
.narrow.wide{max-width:850px}
.form{display:grid;gap:1rem}
.form label{display:grid;gap:.35rem;font-weight:800}
.form label small{font-weight:500;color:var(--mauve)}
input,select,textarea{width:100%;padding:.85rem;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--purple)}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(1,187,28,.25);border-color:var(--green)}
.address-field{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
.address-field:focus-within{outline:3px solid rgba(1,187,28,.25);border-color:var(--green)}
.address-field input{min-width:0;border:0;border-radius:0;outline:0!important}
.address-field span{display:flex;align-items:center;padding:.85rem;background:var(--lavender);color:var(--mauve);font-weight:700;white-space:nowrap}
.bot-trap{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}
.password-toggle{justify-self:start;border:0;background:transparent;color:var(--purple);padding:.25rem 0;text-decoration:underline;font-weight:800;cursor:pointer}
.password-toggle:hover{text-decoration-thickness:2px}
.password-toggle:focus-visible{outline:3px solid rgba(1,187,28,.25);outline-offset:4px}
.alert,.warning{background:#fff3e8;border-left:4px solid var(--orange);padding:1rem;border-radius:8px;margin:1rem 0}
.auth-switch{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.2rem;padding:1.2rem;border:1px solid var(--line);border-radius:18px}
.auth-switch span{display:block;color:var(--mauve);font-size:.88rem}
.auth-switch .button{white-space:nowrap}
.page-head{padding:4rem 0 2rem;display:flex;justify-content:space-between;align-items:end;gap:1rem}
.page-head>*,.sender-slot-grid>*,.message-main,.message-heading>*{min-width:0}
.page-head h1{font-size:clamp(2rem,4vw,3.5rem);overflow-wrap:anywhere;word-break:break-word}
.protected-address-heading{width:min(100%,760px);margin:.6rem 0 .8rem}
.protected-address-copy{display:flex;width:100%;min-width:0;align-items:center;justify-content:space-between;gap:.8rem;padding:.85rem 1rem;border:1px solid var(--line);border-radius:16px;background:var(--paper);color:var(--purple);box-shadow:0 8px 28px rgba(27,1,40,.06);cursor:pointer;text-align:left}
.protected-address-copy:hover{border-color:var(--green)}
.protected-address-copy:focus-visible{outline:3px solid rgba(1,187,28,.3);outline-offset:3px}
.protected-address-value{display:block;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;font-size:clamp(1rem,3vw,1.65rem);font-weight:800;line-height:1.15;letter-spacing:-.03em}
.protected-address-copy small{flex:none;font:700 .76rem/1.2 "Open Sans",Arial,sans-serif;color:var(--mauve);white-space:nowrap}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1rem}
.stat-grid a{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.3rem;text-decoration:none}
.stat-grid strong{font-size:2.3rem;font-weight:800;display:block}
.stat-grid span{color:var(--mauve)}
.app-promotion{width:min(1160px,calc(100% - 2rem));margin:0 auto 1rem;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.2rem;padding:1.25rem 1.4rem;border-radius:22px;background:linear-gradient(135deg,var(--panel-purple),var(--purple));color:var(--cream);box-shadow:var(--shadow)}
.app-promotion img{width:72px;height:72px;object-fit:contain;border-radius:16px;background:#fff;padding:4px}
.app-promotion-copy{min-width:0}
.app-promotion .eyebrow{color:rgba(250,249,246,.72)}
.app-promotion h2{font-size:clamp(1.25rem,2vw,1.7rem);margin:.2rem 0 .35rem}
.app-promotion p{margin:0;color:rgba(250,249,246,.86)}
.app-promotion .button{white-space:nowrap}
.two-col{display:grid;grid-template-columns:1.2fr .8fr;gap:1rem;padding-bottom:4rem}
.compact{border-top:1px solid var(--line);margin-top:1.5rem;padding-top:1.5rem}
.rule{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line);padding:.8rem 0}
.rule span,.rule strong,.rule small{display:block}
.rule small{color:var(--mauve)}
.rule .link-button{color:var(--purple);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.rule .link-button:hover{text-decoration-thickness:2px}
.change-locked{align-self:center;max-width:9rem;text-align:right;font-weight:700}
.warning{font-size:.92rem}
.sender-rules-shell{display:grid;gap:1rem;padding-bottom:4rem}
.sender-rules-heading{display:flex;align-items:start;justify-content:space-between;gap:1rem}
.sender-rules-heading h2{margin:.25rem 0 1.5rem}
.rule-capacity{white-space:nowrap;background:var(--lavender);padding:.4rem .7rem;border-radius:999px;font-weight:800;font-size:.8rem}
.sender-slot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.sender-slot{border:1px solid var(--line);border-radius:18px;padding:1.3rem}
.sender-slot-title{display:flex;align-items:center;gap:.8rem}
.sender-slot-title h3,.sender-slot-title p{margin:0}
.sender-slot-title p{color:var(--mauve);font-size:.85rem}
.slot-number{display:grid;place-items:center;min-width:42px;height:42px;border-radius:50%;background:var(--panel-purple);color:var(--cream);font-weight:800}
.check-option{grid-template-columns:auto 1fr!important;align-items:start}
.check-option input{width:1.15rem;height:1.15rem;margin-top:.2rem;accent-color:var(--green)}
.check-option span,.check-option small{display:block}
.professional-message{background:#f7f5f8;border-left:4px solid var(--panel-purple);border-radius:16px;padding:1.5rem;margin:1.2rem 0}
.professional-rule-choice{display:grid;gap:1rem;margin:0;padding:0;border:0}
.professional-rule-choice legend{margin-bottom:.5rem;font-weight:800}
.professional-choice-option{display:grid;gap:.4rem}
.professional-choice-option>.choice-card{margin:0}
.professional-choice-option>small{color:var(--mauve)}
.choice-card{grid-template-columns:auto 1fr!important;align-items:start;padding:1rem;border:1px solid var(--line);border-radius:14px;background:#f7f5f8}
.choice-card input{width:1.15rem;height:1.15rem;margin-top:.2rem;accent-color:var(--green)}
.choice-card span,.choice-card small{display:block}
.acceptance-card{background:var(--panel-purple);color:var(--cream)}
.acceptance-card .soft{color:rgba(250,249,246,.75)}
.account-settings{padding-top:0}
.notification-settings{padding-top:0}
.account-settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.account-settings-grid .card{box-shadow:none}
.account-settings-grid h3{font-size:1.15rem;margin-top:0}
.page-alert{width:min(850px,calc(100% - 2rem));margin:0 auto 1rem}
.notification-card{scroll-margin-top:1rem}
.notification-status{padding:.75rem;border-radius:12px;background:var(--lavender);font-weight:700}
.notification-actions{display:flex;gap:.7rem;flex-wrap:wrap}
.notification-disable-all{color:var(--purple);text-decoration:underline;margin-top:1rem}
.notification-disable-all:hover{text-decoration-thickness:2px}
.inbox{margin-bottom:5rem;padding:0;overflow:hidden}
.message-row{display:grid;grid-template-columns:48px 1fr auto;gap:1rem;padding:1rem 1.2rem;border-bottom:1px solid var(--line);text-decoration:none;align-items:center}
.message-row:hover{background:var(--cream)}
.message-row.unread{border-left:4px solid var(--green)}
.avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--lavender);font-weight:800}
.message-main{display:grid}
.message-main b{font-weight:600}
.message-main small,.message-meta{color:var(--mauve);font-size:.8rem}
.empty{text-align:center;padding:4rem}
.message-card{width:min(850px,calc(100% - 2rem));margin:0 auto 2rem}
.message-heading{display:flex;justify-content:space-between;color:var(--mauve);font-size:.85rem}
.sent-message{margin-left:auto;border-left:4px solid var(--green);background:#f7fbf5}
.sent-message-body{margin-top:1rem;white-space:normal}
.conversation-history{width:min(850px,calc(100% - 2rem));margin:0 auto 3rem}
.conversation-history>summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;border:1px solid var(--line);border-radius:18px;background:var(--paper);box-shadow:var(--shadow);font-weight:800;cursor:pointer;list-style:none}
.conversation-history>summary::-webkit-details-marker{display:none}
.conversation-history>summary::after{content:"＋";font-size:1.35rem;line-height:1}
.conversation-history[open]>summary::after{content:"−"}
.conversation-history>summary small{margin-left:auto;color:var(--mauve);font-weight:600}
.conversation-history-list{padding-top:1.25rem}
.conversation-history-list .message-card{width:100%}
.neutral{background:linear-gradient(145deg,#f6f0f6,#fff);border-radius:18px;padding:1.5rem;margin:1.2rem 0}
.section-label{text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;font-weight:800}
.neutral-body{font-size:1.1rem;white-space:normal}
.important{border-left:3px solid var(--orange);padding-left:1.2rem}
.original-control{border-top:1px solid var(--line);margin-top:1.5rem;padding-top:1rem}
.original-copy pre{white-space:pre-wrap;font:inherit}
.audit-row{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:.8rem 0}
.policy{max-width:850px;padding:5rem 0}
.prose h2{margin-top:2rem}
footer{padding:2rem clamp(1rem,4vw,4rem);border-top:1px solid rgba(250,249,246,.16);display:flex;justify-content:space-between;background:var(--panel-purple);color:var(--cream)}
footer p{margin:0}
footer p small{display:block;color:rgba(250,249,246,.72)}
footer nav{display:flex;gap:1rem;flex-wrap:wrap}
footer a{font-size:.85rem}
.install-dialog{width:min(520px,calc(100% - 2rem));padding:0;border:0;border-radius:24px;color:var(--purple);box-shadow:var(--shadow)}
.install-dialog::backdrop{background:rgba(27,1,40,.65)}
.install-dialog-content{padding:2rem}
.install-dialog-content h2{margin-top:0}
.install-dialog-content form{margin-top:1.5rem}
@media(max-width:760px){.site-header{position:relative;flex-wrap:wrap}
.menu-toggle{display:flex}
.js .site-header nav{display:none}
.site-header nav,.site-header nav form{width:100%;align-items:stretch}
.site-header nav{flex-direction:column;gap:0;padding:.7rem 0 .2rem}
.site-header nav.is-open{display:flex}
.site-header nav a,.site-header nav .link-button{display:block;width:100%;padding:.8rem .25rem;text-align:left;border-bottom:1px solid rgba(250,249,246,.15)}
.site-header nav form{display:block}
.install-banner{align-items:stretch;flex-direction:column;margin-top:.75rem}
.install-banner .button{width:100%;text-align:center}
.app-promotion{grid-template-columns:auto 1fr}
.app-promotion .button{grid-column:1/-1;width:100%;text-align:center}
.notification-actions{align-items:stretch;flex-direction:column}
.notification-actions .button{width:100%}
.hero,.two-col{grid-template-columns:1fr}
.hero{padding:3rem 0}
.message-preview{transform:none}
.feature-grid,.promise-grid,.stat-grid,.sender-slot-grid,.account-settings-grid{grid-template-columns:1fr}
.page-head{align-items:start;flex-direction:column}
.message-row{grid-template-columns:42px 1fr}
.message-meta{grid-column:2}
.audit-row,footer{display:block}
.audit-row time{display:block}
.site-header{padding:.8rem 1rem}
.site-header nav{gap:.5rem}
footer nav{margin-top:1rem}
.sender-rules-heading{display:block}
.rule-capacity{display:inline-block;margin-bottom:1rem}
.rule{align-items:flex-start;flex-direction:column;overflow-wrap:anywhere}
.rule form,.rule .link-button{width:100%;text-align:left}
.card,.sender-slot,.warning,.neutral,.important{min-width:0;overflow-wrap:anywhere}
.message-heading{gap:.5rem;flex-direction:column}
.auth-switch{align-items:stretch;flex-direction:column}
.address-field{display:block}
.address-field span{border-top:1px solid var(--line);overflow-wrap:anywhere;white-space:normal}
}