:root {
color-scheme: light dark;
--bg: #f7f8fa;
--card-bg: #ffffff;
--text: #1a1d23;
--muted: #6b7280;
--accent: #2563eb;
--accent-2: #7c3aed;
--border: #e5e7eb;
--hero-grad-1: #eaf1ff;
--hero-grad-2: #f2ecff;
--trust-color: #15803d;
}

@media (prefers-color-scheme: dark) {
:root {
--bg: #0f1115;
--card-bg: #171a21;
--text: #e7e9ee;
--muted: #9aa1ac;
--border: #2a2e37;
--hero-grad-1: #17203a;
--hero-grad-2: #201a34;
--trust-color: #4ade80;
}
}

* { box-sizing: border-box; }

body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: var(--bg);
color: var(--text);
}

.site-header {
text-align: center;
padding: 2.5rem 1rem 1.5rem;
background: linear-gradient(135deg, var(--hero-grad-1), var(--hero-grad-2));
border-bottom: 1px solid var(--border);
}

.brand {
font-size: 1.75rem;
font-weight: 700;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: inline-flex;
align-items: center;
gap: 0.4rem;
text-decoration: none;
cursor: pointer;
}

.brand-icon {
flex-shrink: 0;
}

.tagline {
color: var(--muted);
margin-top: 0.25rem;
font-size: 1rem;
}

.premium-badge {
display: block;
font-weight: 800;
color: var(--accent-2);
font-size: 1.1rem;
margin-top: 0.6rem;
}

.trust-badge {
display: block;
font-weight: 700;
color: var(--trust-color);
font-size: 0.95rem;
margin-top: 0.3rem;
}

.domain-badge {
display: block;
color: var(--muted);
font-size: 0.9rem;
margin-top: 0.3rem;
}

/* Normalize heading sizes site-wide so the homepage's section headings
(Inbox / FAQ) render at the same size as the Email Tools page's
per-tool headings, instead of relying on divergent browser defaults. */
h1, .card h2 {
font-size: 1.7rem;
margin-top: 0;
}

h3 {
font-size: 1.2rem;
}

.card p,
.card label,
.muted {
font-size: 1rem;
line-height: 1.6;
}

main {
max-width: 640px;
margin: 0 auto;
padding: 0 1rem 3rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}

.card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 12px;
padding: 1.5rem;
}

.generator.card {
border-top: 4px solid var(--accent);
}

.generator label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
}

.generator select {
width: 100%;
padding: 0.6rem;
border-radius: 8px;
border: 1px solid var(--border);
margin-bottom: 1rem;
font-size: 1rem;
}

.generator input[type="text"] {
width: 100%;
padding: 0.6rem;
border-radius: 8px;
border: 1px solid var(--border);
margin-bottom: 1rem;
font-size: 1rem;
background: var(--bg);
color: var(--text);
font-family: inherit;
box-sizing: border-box;
}

.generator .custom-name-label {
font-size: 0.9rem;
font-weight: 500;
color: var(--muted, inherit);
}

button {
cursor: pointer;
font-size: 1rem;
border: none;
border-radius: 8px;
padding: 0.7rem 1rem;
background: var(--accent);
color: white;
font-weight: 600;
}

button:hover { opacity: 0.9; }

.link-btn {
background: none;
color: var(--accent);
padding: 0;
font-weight: 500;
}

.btn {
display: inline-block;
text-decoration: none;
cursor: pointer;
font-size: 1rem;
border: none;
border-radius: 8px;
padding: 0.7rem 1.25rem;
background: var(--accent);
color: white !important;
font-weight: 600;
}

.btn:hover { opacity: 0.9; }

.related-links {
margin-top: 0.5rem;
}

.related-links a {
color: var(--accent);
}

.top-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem 0.4rem;
margin-top: 0.75rem;
}

.top-nav.top-nav-row2 {
margin-top: 0.5rem;
}

/* A second, smaller pill row for jumping between the individual email
tools — same visual language as .top-nav, sized down to comfortably fit
seven items. */
.tools-subnav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem 0.4rem;
margin: 0 0 1.25rem;
}

.tools-subnav a {
display: inline-flex;
align-items: center;
text-decoration: none;
font-size: 0.78rem;
font-weight: 700;
color: white;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
border-radius: 999px;
padding: 0.35rem 0.85rem;
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}

.tools-subnav a:hover { opacity: 0.9; }

.tools-subnav a.current {
background: var(--muted);
box-shadow: none;
opacity: 0.7;
cursor: default;
}

.top-nav a {
display: inline-flex;
align-items: center;
gap: 0.35rem;
text-decoration: none;
font-size: 0.85rem;
font-weight: 700;
color: white;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
border-radius: 999px;
padding: 0.4rem 1rem;
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}

.top-nav a:hover { opacity: 0.9; }

/* The nav/footer link matching the page you're already on — grayed out and
non-clickable, so it reads as "you are here" instead of a live link. */
.top-nav a.current {
background: var(--muted);
box-shadow: none;
opacity: 0.7;
cursor: default;
}

.top-nav a.current:hover { opacity: 0.7; }

footer a.current {
color: var(--text);
opacity: 0.5;
cursor: default;
text-decoration: none;
}

.tools-list {
text-align: center;
color: var(--muted);
font-size: 0.78rem;
margin: 0.5rem auto 0;
max-width: 520px;
line-height: 1.4;
}

.lang-switch {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
position: fixed;
top: 0.75rem;
right: 0.75rem;
z-index: 40;
margin-top: 0;
}

[dir="rtl"] .lang-switch {
right: auto;
left: 0.75rem;
}

.lang-switch .lang-icon {
font-size: 1rem;
}

.lang-switch select {
font-size: 0.85rem;
font-weight: 600;
color: var(--text);
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 999px;
padding: 0.35rem 1.6rem 0.35rem 0.9rem;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
background-position: calc(100% - 14px) calc(50% - 2px), calc(100% - 9px) calc(50% - 2px);
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
}

.lang-switch select:hover {
border-color: var(--accent);
}

@media (max-width: 480px) {
.lang-switch {
top: 0.4rem;
right: 0.4rem;
}
[dir="rtl"] .lang-switch {
right: auto;
left: 0.4rem;
}
.lang-switch .lang-icon {
display: none;
}
.lang-switch select {
font-size: 0.75rem;
padding: 0.3rem 1.3rem 0.3rem 0.7rem;
}
}

[dir="rtl"] .lang-switch select {
padding: 0.35rem 0.9rem 0.35rem 1.6rem;
background-position: 14px calc(50% - 2px), 9px calc(50% - 2px);
}

.share-row {
display: flex;
justify-content: center;
gap: 0.75rem;
flex-wrap: wrap;
margin-top: 1rem;
}

.share-btn {
display: inline-block;
text-decoration: none;
cursor: pointer;
font-size: 0.85rem;
font-weight: 600;
border: 1px solid var(--border);
border-radius: 999px;
padding: 0.4rem 0.9rem;
background: var(--card-bg);
color: var(--text);
}

.share-btn:hover { opacity: 0.85; }

.address-row {
display: flex;
gap: 0.5rem;
}

#address-field {
flex: 1;
padding: 0.6rem;
border-radius: 8px;
border: 1px solid var(--border);
font-size: 1rem;
background: var(--bg);
color: var(--text);
}

.meta-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 0.75rem;
}

.countdown {
font-variant-numeric: tabular-nums;
font-weight: 700;
}

.forward-row {
display: flex;
gap: 0.5rem;
margin-top: 0.75rem;
}

.forward-row input {
flex: 1;
padding: 0.55rem 0.7rem;
border-radius: 8px;
border: 1px solid var(--border);
font-size: 0.9rem;
background: var(--bg);
color: var(--text);
}

.forward-row input:disabled {
opacity: 0.7;
}

.forward-row button {
font-size: 0.85rem;
padding: 0.55rem 0.9rem;
white-space: nowrap;
}

.forward-status {
margin-top: 0.4rem;
font-size: 0.85rem;
}

/* Address switcher for accounts with more than one permanent address —
same pill language as .tools-subnav, plus a distinct "current" state and
a small remove (x) control on each pill. */
.addr-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 0.4rem;
margin-bottom: 1rem;
}

.addr-tab {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.82rem;
font-weight: 700;
color: white;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
border: none;
border-radius: 999px;
padding: 0.4rem 0.5rem 0.4rem 0.9rem;
cursor: pointer;
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}

.addr-tab:hover { opacity: 0.9; }

.addr-tab.current {
background: var(--muted);
box-shadow: none;
}

.addr-tab .addr-tab-remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.1rem;
height: 1.1rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.25);
font-size: 0.7rem;
line-height: 1;
}

.addr-tab .addr-tab-remove:hover { background: rgba(255, 255, 255, 0.45); }

.at-domain {
color: var(--muted);
font-size: 0.9rem;
white-space: nowrap;
}

.field-error {
color: #dc2626;
font-size: 0.85rem;
margin: 0.25rem 0 0.75rem;
min-height: 1.1em;
}

.add-addr-row {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
flex-wrap: wrap;
}

.add-addr-row input {
flex: 1;
min-width: 140px;
margin-bottom: 0;
padding: 0.55rem 0.7rem;
border-radius: 8px;
border: 1px solid var(--border);
font-size: 0.9rem;
background: var(--bg);
color: var(--text);
}

.add-addr-row button {
font-size: 0.85rem;
padding: 0.55rem 0.9rem;
white-space: nowrap;
}

.danger-zone {
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid var(--border);
font-size: 0.82rem;
}

.muted { color: var(--muted); }

.message-list {
list-style: none;
margin: 0;
padding: 0;
}

.message-list li {
padding: 0.75rem 0;
border-bottom: 1px solid var(--border);
cursor: pointer;
}

.message-list li:last-child { border-bottom: none; }

.message-list .msg-from {
font-weight: 600;
}

.message-list .msg-subject {
color: var(--muted);
}

.message-body {
white-space: pre-wrap;
line-height: 1.5;
margin-top: 1rem;
}

footer {
text-align: center;
padding: 2rem 1rem;
color: var(--muted);
font-size: 0.85rem;
}

footer a {
color: var(--muted);
}

/* Shared by all email-tools pages (the hub and each individual tool). */
.tool-row {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.tool-row input, .tool-row textarea {
flex: 1;
min-width: 200px;
padding: 0.6rem;
border-radius: 8px;
border: 1px solid var(--border);
font-size: 1rem;
background: var(--bg);
color: var(--text);
font-family: inherit;
}
.tool-row textarea {
min-height: 140px;
resize: vertical;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
font-size: 0.85rem;
}
.tool-result {
margin-top: 1rem;
}
.check-list {
list-style: none;
margin: 0;
padding: 0;
}
.check-list li {
padding: 0.4rem 0;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
gap: 1rem;
}
.check-list li:last-child { border-bottom: none; }
.badge {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
padding: 0.1rem 0.5rem;
border-radius: 999px;
}
.badge-good { background: rgba(22, 163, 74, 0.15); color: #16a34a; }
.badge-bad { background: rgba(220, 38, 38, 0.15); color: #dc2626; }
.badge-warn { background: rgba(217, 119, 6, 0.15); color: #d97706; }
.mx-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin-top: 0.75rem; }
.mx-table th, .mx-table td {
border: 1px solid var(--border);
padding: 0.5rem 0.6rem;
text-align: left;
}
.mx-table th { background: var(--bg); }
.hop-list { margin: 0; padding-left: 1.2rem; }
.hop-list li { margin-bottom: 0.75rem; font-size: 0.9rem; }
.hop-raw {
display: block;
white-space: pre-wrap;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 6px;
padding: 0.5rem;
margin-top: 0.3rem;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
font-size: 0.8rem;
}

/* Directory card on the /email-tools.html hub page. */
.tool-directory {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.6rem;
}
.tool-directory a {
display: block;
padding: 0.9rem 1rem;
border: 1px solid var(--border);
border-radius: 10px;
text-decoration: none;
color: var(--text);
background: var(--card-bg);
}
.tool-directory a:hover { border-color: var(--accent); }
.tool-directory .tool-name {
font-weight: 700;
color: var(--accent);
}
.tool-directory .tool-desc {
color: var(--muted);
font-size: 0.88rem;
margin-top: 0.2rem;
}


/* --- Mobile fix (added by fetch-site.js v9): the "Forward to your real
   email" row (input + "Enable forwarding" button) overflowed the viewport
   on phone-width screens because .forward-row never wrapped. This lets it
   wrap onto two lines below 480px instead of pushing the page sideways. --- */
@media (max-width: 480px) {
  .forward-row {
    flex-wrap: wrap;
  }
  .forward-row input {
    flex: 1 1 100%;
  }
  .forward-row button {
    flex: 0 0 auto;
  }
}

/* Business API pages: logo + standalone "Free Tools" corner badge, sitting
   above the main pill nav row. Kept in the shared stylesheet since it's now
   reused across every business page. */
.biz-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1000px;
  margin: 0 auto 14px;
  flex-wrap: wrap;
  gap: 10px;
}
.biz-freetools-corner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  background: #fff;
  color: #2563eb;
  border: 2px solid #2563eb;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
}
.biz-freetools-corner:hover { background: #eff6ff; }

/* Shared by every Business API marketing page (business.html,
   business-pricing.html, …) — a details/summary FAQ accordion and a
   multi-column footer, matching the section shapes used across that part
   of the site so a page doesn't have to redefine these locally. */
.biz-faq{border:1px solid #e3e3e3;border-radius:10px;padding:14px 18px;margin-top:10px}
.biz-faq summary{font-weight:600;cursor:pointer}
.biz-faq p{margin:10px 0 2px;color:var(--muted,#555)}
.biz-footer-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px;max-width:1000px;margin:0 auto 20px;text-align:left}
.biz-footer-cols h4{font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted,#888);margin:0 0 10px}
.biz-footer-cols a{display:block;font-size:.88rem;margin-bottom:8px;color:inherit;text-decoration:none}
.biz-footer-cols a:hover{text-decoration:underline}
.biz-footer-bottom{text-align:center;padding-top:14px;border-top:1px solid #e3e3e3;max-width:1000px;margin:0 auto;font-size:.85rem;color:var(--muted,#888)}