:root { --ink:#123f55; --cream:#f7fbf8; --paper:#fff; --sage:#dff5ef; --green:#087f79; --blue:#12b8d0; --yellow:#ffc94d; --orange:#f28a45; --muted:#56717b; --shadow:0 24px 70px rgba(18,63,85,.12); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.6; }
.site-header { height:84px; padding:0 clamp(24px,6vw,96px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(23,53,45,.13); background:rgba(248,244,235,.94); position:sticky; top:0; z-index:5; }
.brand { display:inline-flex; align-items:center; flex:0 0 auto; text-decoration:none; }
.brand img { display:block; width:clamp(112px,12vw,150px); height:64px; object-fit:contain; }
nav { display:flex; align-items:center; gap:32px; } nav a { color:var(--ink); text-decoration:none; font-weight:600; }
.nav-button,.primary-button { border-radius:99px; padding:11px 20px; color:white!important; background:var(--green); }
.hero { min-height:650px; padding:110px clamp(24px,9vw,150px); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; position:relative; background:radial-gradient(circle at 82% 45%, rgba(236,123,67,.16) 0 7%, transparent 7.3%), radial-gradient(circle at 82% 45%, transparent 0 15%,rgba(37,92,77,.09) 15.2% 15.5%,transparent 15.7%), var(--cream); }
.eyebrow { color:var(--orange); font-size:.76rem; text-transform:uppercase; letter-spacing:.18em; font-weight:700; }
h1,h2 { font-family:"Playfair Display",serif; line-height:1.08; margin:.2em 0; }
h1 { max-width:850px; font-size:clamp(3.1rem,7vw,6.2rem); letter-spacing:-.04em; }
h2 { font-size:clamp(2.5rem,4.2vw,4rem); letter-spacing:-.025em; }
.hero>p { max-width:650px; font-size:1.16rem; color:var(--muted); margin:20px 0 32px; }
.primary-button { display:inline-flex; gap:28px; text-decoration:none; padding:14px 24px; font-weight:600; }
.about { padding:100px clamp(24px,9vw,150px); display:grid; grid-template-columns:1fr 1fr; gap:8vw; background:var(--paper); }
.about-copy>p { color:var(--muted); font-size:1.1rem; margin-top:0; }
.about ul { list-style:none; padding:15px 0 0; margin:0; }
.about li { display:grid; grid-template-columns:45px 1fr; padding:18px 0; border-top:1px solid #d9ded7; }
.about li span { grid-row:1/3; color:var(--orange); font-size:.8rem; font-weight:700; }.about li strong { font-size:1.05rem; }.about li small { color:var(--muted); }
.send-section { padding:100px clamp(24px,9vw,150px); display:grid; grid-template-columns:.85fr 1.15fr; gap:9vw; background:var(--sage); }
.form-intro>p { color:var(--muted); max-width:430px; }
.privacy-note { display:flex; gap:14px; margin-top:42px; padding-top:25px; border-top:1px solid rgba(23,53,45,.18); color:var(--muted); font-size:.88rem; }.privacy-note span { color:var(--green); font-size:1.5rem; }.privacy-note strong { color:var(--ink); }
.form-card { background:var(--paper); padding:clamp(24px,4vw,50px); box-shadow:0 20px 60px rgba(23,53,45,.08); border-radius:4px; }
form { display:grid; gap:21px; } label { display:grid; gap:7px; font-size:.88rem; font-weight:600; }
input,textarea { width:100%; border:1px solid #cdd5cf; border-radius:3px; padding:13px 14px; background:white; color:var(--ink); font:inherit; resize:vertical; }
input:focus,textarea:focus { outline:3px solid rgba(37,92,77,.15); border-color:var(--green); }
label small,.consent { color:#7a8782; font-weight:400; font-size:.75rem; }.counter { text-align:right; margin-top:-3px; }
button { display:flex; justify-content:space-between; border:0; padding:15px 19px; border-radius:3px; background:var(--green); color:white; font:600 1rem "DM Sans",sans-serif; cursor:pointer; } button:hover { background:#173f34; }
.consent { text-align:center; margin:-8px 0 0; }
.notice { padding:14px 16px; margin-bottom:24px; border-radius:3px; font-size:.9rem; }.notice ul { margin:5px 0 0; }.success { background:#e3f3e4; }.error { color:#852b24; background:#fae8e5; }
footer { padding:36px clamp(24px,6vw,96px); display:flex; align-items:center; justify-content:space-between; background:var(--ink); color:#d7e1dd; } footer .brand img { width:150px; height:78px; border-radius:4px; } footer p { margin:0; }
@media (max-width:760px) { .site-header { height:72px; } nav>a:first-child { display:none; } .hero { min-height:560px; padding-top:75px; padding-bottom:75px; } .about,.send-section { grid-template-columns:1fr; padding-top:75px; padding-bottom:75px; } .send-section { gap:45px; } footer { align-items:flex-start; flex-direction:column; gap:10px; } }

.hero-stat { position:absolute; right:clamp(24px,9vw,150px); bottom:70px; display:grid; color:var(--muted); text-align:right; }
.hero-stat strong { color:var(--orange); font:700 clamp(2rem,4vw,3.4rem) "Playfair Display",serif; line-height:1; }
.hero-stat span { font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; }
.mode-picker { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0; padding:0; border:0; }
.mode-picker legend { margin-bottom:8px; font-size:.88rem; font-weight:600; }
.mode-picker label { position:relative; display:block; cursor:pointer; }
.mode-picker input { position:absolute; opacity:0; pointer-events:none; }
.mode-picker label span { display:grid; min-height:80px; align-content:center; gap:2px; padding:13px; border:1px solid #cdd5cf; border-radius:4px; transition:.15s ease; }
.mode-picker input:checked+span { border-color:var(--green); outline:2px solid rgba(37,92,77,.15); background:#f3f8f1; }
.mode-picker small { color:var(--muted); font-weight:400; }
.email-field.optional { opacity:.65; }
.check-label { grid-template-columns:20px 1fr; align-items:start; padding:13px; background:#f3f8f1; border-radius:4px; }
.check-label input { width:17px; margin-top:3px; accent-color:var(--green); }
.check-label small { grid-column:2; }
.signed-in-note { padding:12px 14px; border-left:3px solid var(--orange); background:#fff8ee; font-size:.9rem; }
.share-panel { margin:0 0 24px; padding:18px; background:#fff6e9; border:1px solid #f0d6b9; }
.share-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.share-actions a,.copy-button { display:inline-flex; padding:8px 12px; border-radius:3px; background:var(--green); color:white; font:600 .8rem "DM Sans",sans-serif; text-decoration:none; }
.copy-button { width:auto; }
.account-section { padding:100px clamp(24px,9vw,150px); display:grid; grid-template-columns:.75fr 1.25fr; gap:9vw; background:var(--cream); }
.account-section>div>p { max-width:420px; color:var(--muted); }
.account-card { padding:clamp(24px,4vw,48px); background:var(--paper); border:1px solid rgba(23,53,45,.12); }
.auth-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.auth-grid form+form { padding-left:40px; border-left:1px solid #d9ded7; align-content:start; }
h3 { margin:0 0 4px; font:700 1.5rem "Playfair Display",serif; }
.stat-grid { display:grid; grid-template-columns:1fr 1fr; margin-bottom:35px; background:var(--ink); color:white; }
.stat-grid div { display:grid; padding:22px; text-align:center; }
.stat-grid div+div { border-left:1px solid rgba(255,255,255,.2); }
.stat-grid strong { color:#ffc29f; font:700 2.5rem "Playfair Display",serif; line-height:1.1; }
.stat-grid span { font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; }
.logout-form { margin-top:18px; }
.text-button { display:block; width:auto; padding:0; color:var(--green); background:transparent; text-decoration:underline; }
.text-button:hover { color:var(--orange); background:transparent; }
.shared-hero { min-height:620px; padding:100px clamp(24px,14vw,230px); display:flex; flex-direction:column; justify-content:center; align-items:flex-start; background:var(--paper); }
.shared-hero h1 { max-width:950px; font-size:clamp(2.4rem,5vw,4.8rem); overflow-wrap:anywhere; }
.shared-hero>p { color:var(--muted); font-size:1.1rem; }
.quote-mark { height:70px; color:var(--orange); font:700 7rem/1 "Playfair Display",serif; }
@media (max-width:900px) { nav { gap:16px; } .account-section { grid-template-columns:1fr; gap:40px; } .hero-stat { position:static; margin-top:40px; text-align:left; } }
@media (max-width:620px) { .site-header { padding-inline:18px; } .site-header .brand img { width:112px; height:54px; } .site-header nav>a:not(.nav-button) { display:none; } .nav-button { padding:9px 13px; } .mode-picker,.auth-grid { grid-template-columns:1fr; } .auth-grid form+form { padding:30px 0 0; border-left:0; border-top:1px solid #d9ded7; } .shared-hero { min-height:520px; padding:70px 24px; } }
.cf-turnstile { min-height: 65px; margin: 1rem 0; }
.muted { color:var(--muted); }
.message-history { margin:0 0 38px; }
.message-history>p { margin:0 0 18px; }
.message-list { display:grid; gap:14px; }
.message-row { padding:20px; border:1px solid #dce8e6; border-radius:14px; background:#fbfefd; }
.message-row-head { display:flex; justify-content:space-between; gap:18px; align-items:start; }
.message-row-head div { display:grid; }
.message-row-head small { color:var(--muted); }
.message-row>p { margin:16px 0; overflow-wrap:anywhere; }
.status { flex:0 0 auto; padding:4px 9px; border-radius:99px; background:#e9f0ef; color:var(--muted); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.status-opened,.status-sent,.status-shared { color:#066b62; background:#dcf4ef; }
.status-failed { color:#8a332c; background:#fae8e5; }
.analytics { display:flex; gap:8px; margin:0 0 12px; }
.analytics div { min-width:90px; padding:9px 12px; border-radius:9px; background:#eef8f5; }
.analytics dt { color:var(--muted); font-size:.68rem; text-transform:uppercase; }
.analytics dd { margin:0; font-size:1.2rem; font-weight:800; }
.history-link { color:var(--green); font-size:.85rem; font-weight:700; }
.message-row blockquote { display:grid; gap:4px; margin:15px 0 0; padding:13px 16px; border-left:3px solid var(--orange); background:#fff8ee; }
.message-row blockquote span { color:var(--muted); font-size:.72rem; font-weight:700; text-transform:uppercase; }
.empty-state { padding:30px; border:1px dashed #b9cfca; border-radius:12px; color:var(--muted); text-align:center; }
.profile-settings { padding-top:24px; border-top:1px solid #d9ded7; }
.profile-settings summary { margin-bottom:20px; color:var(--green); font-weight:800; cursor:pointer; }
.engagement-summary { display:flex; gap:12px; align-items:center; margin:6px 0 25px; color:var(--muted); }
.recipient-actions { display:grid; grid-template-columns:auto minmax(300px,520px); gap:30px; align-items:start; margin:10px 0 30px; }
.recipient-actions>form:first-child { display:block; }
.reply-form { padding:22px; border-radius:16px; background:var(--sage); }
.honeypot { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; overflow:hidden!important; }

/* Bright, brand-led visual refresh */
.site-header { height:88px; border-color:rgba(18,63,85,.09); background:rgba(255,255,255,.9); backdrop-filter:blur(16px); }
.brand img { width:clamp(126px,12vw,164px); height:66px; border-radius:10px; }
.nav-button,.primary-button { background:linear-gradient(135deg,var(--green),#07675f); box-shadow:0 8px 20px rgba(8,127,121,.18); transition:transform .2s ease,box-shadow .2s ease; }
.nav-button:hover,.primary-button:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(8,127,121,.25); }
.hero { min-height:680px; padding:86px clamp(24px,8vw,132px); display:grid; grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr); gap:clamp(44px,7vw,110px); align-items:center; overflow:hidden; background:linear-gradient(135deg,#f9fcf8 0%,#f0fbf7 48%,#edfaff 100%); }
.hero::before { content:""; position:absolute; width:420px; height:420px; left:-210px; bottom:-260px; border-radius:50%; background:rgba(255,201,77,.18); }
.hero-copy { position:relative; z-index:1; }
.hero-logo { position:relative; display:grid; place-items:center; min-height:500px; }
.hero-logo img { position:relative; z-index:1; width:min(100%,590px); border-radius:30px; box-shadow:var(--shadow); transform:rotate(1.5deg); }
.logo-glow { position:absolute; width:82%; aspect-ratio:1; border-radius:50%; background:linear-gradient(135deg,rgba(255,201,77,.48),rgba(18,184,208,.24) 48%,rgba(8,127,121,.22)); filter:blur(10px); }
h1,h2,h3,.hero-stat strong,.stat-grid strong { font-family:Georgia,"Times New Roman",serif; }
.hero-stat { position:static; display:flex; align-items:baseline; gap:10px; margin-top:38px; text-align:left; }
.form-card,.account-card { border-radius:20px; box-shadow:var(--shadow); }
input,textarea { border-color:#c8dadc; border-radius:10px; }
button { border-radius:10px; font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
@media (max-width:900px) { .hero { grid-template-columns:1fr; padding-top:70px; } .hero-logo { min-height:0; } .hero-logo img { width:min(100%,560px); } }
@media (max-width:620px) { .hero { padding:58px 22px 70px; gap:46px; } .hero-logo img { border-radius:20px; transform:none; } }
@media (max-width:620px) { .recipient-actions { grid-template-columns:1fr; } .analytics { flex-wrap:wrap; } }