/* EmailMarketingAgency.com inner pages. Cream paper, deep ink, green accents, butter and mint highlights. */
:root {
  --paper: #FFFAF1;
  --paper-2: #F4EEE2;
  --ink: #13201B;
  --ink-soft: #4E5B55;
  --green: #0E7A55;
  --green-deep: #0A5C40;
  --mint: #D6EFE2;
  --butter: #FFE8A3;
  --white: #FFFFFF;
  --line: #E8E2D6;
  --f-display: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --f-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --f-mono: "DM Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-display); font-size: 1.0625rem; line-height: 1.7; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; text-wrap: balance; margin: 0; }
.it { font-family: var(--f-serif); font-style: normal; font-weight: 700; letter-spacing: -0.02em; color: var(--green); font-variant-numeric: lining-nums; }
.wrap { max-width: 1200px; margin-inline: auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
@media (min-width: 760px) { .wrap { padding-left: max(36px, env(safe-area-inset-left, 0px)); padding-right: max(36px, env(safe-area-inset-right, 0px)); } }
.label { font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 14px; z-index: 60; }
.skip:focus { left: 16px; }

/* Header */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1.5px solid var(--ink); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 72px; }
.logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 800; font-size: 1.08rem; letter-spacing: -0.02em; white-space: nowrap; }
.logo b { color: var(--green); font-weight: 800; }
.logo small { font-size: 1em; font-weight: 800; color: var(--ink-soft); }
.logo svg { width: 26px; height: 26px; flex: none; }
.nav-links { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav-links a { font-family: var(--f-mono); font-size: 0.85rem; text-decoration: none; white-space: nowrap; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--green); }
@media (max-width: 1180px) { .nav-links { gap: 20px; } }
.pill { background: var(--ink); color: var(--paper); border-radius: 999px; padding: 12px 20px; font-weight: 700; font-size: 0.92rem; text-decoration: none; white-space: nowrap; }
.pill:hover { background: var(--green); }
.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; font-family: var(--f-mono); font-size: 0.85rem; padding: 10px 14px; border: 1.5px solid var(--ink); border-radius: 999px; }
.menu summary::-webkit-details-marker { display: none; }
.menu ul { position: absolute; right: 0; top: calc(100% + 10px); background: var(--white); border: 1.5px solid var(--ink); box-shadow: 5px 5px 0 var(--green); list-style: none; margin: 0; padding: 8px; min-width: 210px; z-index: 40; }
.menu a { display: block; padding: 10px 12px; text-decoration: none; font-weight: 500; }
.menu a:hover { background: var(--mint); }
@media (max-width: 960px) { .nav-links { display: none; } .menu { display: block; } }
/* Once the Menu button shows, the header pill hides, so the two never sit side by side */
@media (max-width: 960px) { .nav .pill { display: none; } }
@media (max-width: 520px) { .logo { font-size: 0.98rem; } }

/* Breadcrumbs and page hero */
.crumbs { padding-top: 28px; font-family: var(--f-mono); font-size: 0.78rem; color: var(--ink-soft); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 8px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--green); }
.page-hero { padding-block: 36px 56px; border-bottom: 1.5px solid var(--ink); position: relative; overflow: hidden; isolation: isolate; }
.page-hero::after { content: ""; position: absolute; width: 360px; height: 360px; border-radius: 50%; background: var(--mint); right: -120px; top: -140px; z-index: -1; }
.page-hero h1 { font-size: clamp(2.5rem, 1.4rem + 4.6vw, 4.8rem); margin-top: 18px; max-width: 16ch; }
.page-hero h1 .it { display: block; }
@media (max-width: 1180px) { .page-hero::after { width: 280px; height: 280px; right: -110px; top: -150px; } }
@media (max-width: 960px) { .page-hero::after { width: 220px; height: 220px; right: -100px; top: -130px; } }
@media (max-width: 760px) { .page-hero::after { width: 200px; height: 200px; right: -100px; top: -130px; } }
/* The about page headline holds the long brand name as one word: scale it to fit narrow screens */
@media (max-width: 680px) { html:has(link[rel="canonical"][href$="/about/"]) .page-hero h1 { font-size: calc((100vw - 40px) / 13.4); max-width: none; } }
.answer { margin-top: 28px; max-width: 44rem; font-size: 1.2rem; line-height: 1.6; background: var(--white); border: 1.5px solid var(--ink); box-shadow: 8px 8px 0 var(--green); padding: 22px 24px; margin-right: 8px; overflow-wrap: anywhere; }
.answer strong { color: var(--green-deep); }
/* Phones keep the 1.2rem answer box; only screens under 360px step down so the brand name never splits */
@media (max-width: 359px) { .answer { font-size: 1.1rem; padding: 18px; } }
/* The thanks answer holds the bold email address as one word: a smaller size keeps it on one line on phones */
@media (max-width: 420px) { html:has(link[rel="canonical"][href$="/thanks/"]) .answer { font-size: min(1rem, calc((100vw - 87px) / 17)); padding: 18px; } }
.meta { margin-top: 22px; font-family: var(--f-mono); font-size: 0.78rem; color: var(--ink-soft); }

/* Article layout */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; padding-block: 64px 96px; align-items: start; }
@media (max-width: 960px) { .layout { grid-template-columns: minmax(0, 1fr); } }
.prose { max-width: 44rem; min-width: 0; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.5rem); margin-top: 2.2em; scroll-margin-top: 90px; }
/* Headings that hold the long brand name as one word scale down on phones so it fits */
.prose h2[id*="emailmarketingagency-com"] { font-size: min(clamp(1.8rem, 1.3rem + 1.6vw, 2.5rem), calc(7.2vw - 3px)); }
.prose h3 { font-size: 1.35rem; letter-spacing: -0.025em; margin-top: 1.8em; scroll-margin-top: 90px; }
.prose p, .prose li, .prose dd { color: #26332E; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.45em; }
.prose a { color: var(--green-deep); text-underline-offset: 3px; }
.prose a:hover { color: var(--green); }
.prose strong { color: var(--ink); }
.prose dl { margin-top: 1em; }
.prose dt { font-weight: 800; margin-top: 1.1em; letter-spacing: -0.01em; }
.prose dd { margin: 0.25em 0 0 0; }
.prose blockquote { margin: 1.4em 0; padding: 20px 22px; border: 1.5px solid var(--ink); border-left: 6px solid var(--green); background: var(--white); }
.prose blockquote > * { margin: 0; }
.prose blockquote > * + * { margin-top: 0.6em; }
.callout { background: var(--mint); padding: 20px 22px; }
.callout > * + * { margin-top: 0.6em; }
.callout > :last-child { margin-bottom: 0; }
.callout strong:first-child { display: block; font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-deep); font-weight: 500; }
.toc { background: var(--white); border: 1.5px solid var(--ink); padding: 20px 22px; }
.toc p { margin: 0; font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); }
.toc ol { margin: 10px 0 0 0; }

.table-wrap { overflow-x: auto; border: 1.5px solid var(--ink); background: var(--white); margin-top: 1.4em; }
table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 0.95rem; }
th, td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; background: var(--paper-2); border-bottom: 1.5px solid var(--ink); }
tbody th { font-weight: 700; }
td.us, th.us { background: var(--mint); font-weight: 700; }
thead th.us { background: var(--green); color: var(--white); }
tr:last-child th, tr:last-child td { border-bottom: 0; }
/* When the frame is narrower than the table (phones): two column tables fit the frame. Wider tables pin the first column and size the others from the frame, so the frame edge cuts through the next column and shows there is more to swipe */
.prose .table-wrap { container-type: inline-size; }
@container (width < 560px) {
  .prose .table-wrap table { min-width: 0; border-collapse: separate; border-spacing: 0; }
  .prose .table-wrap :is(th, td) { padding-inline: 12px; overflow-wrap: break-word; }
  .prose .table-wrap thead th.us { font-size: 0.64rem; letter-spacing: 0; }
  .prose .table-wrap table:not(:has(thead th:nth-child(3))) thead th:first-child { width: 30cqw; }
  .prose .table-wrap table:not(:has(thead th:nth-child(3))) tr > :not(:first-child) { overflow-wrap: anywhere; }
  .prose .table-wrap table:has(thead th:nth-child(3)) { width: max-content; }
  .prose .table-wrap table:has(thead th:nth-child(3)) thead th { width: 44cqw; }
  .prose .table-wrap table:has(thead th:nth-child(3)) thead th:first-child { width: 34cqw; }
  /* The pinned column; a table whose first column holds the long brand name scrolls whole instead */
  .prose .table-wrap table:has(thead th:nth-child(3)):not(:has(tbody .us:first-child)) tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--white); box-shadow: 1.5px 0 0 var(--ink); }
  .prose .table-wrap table:has(thead th:nth-child(3)):not(:has(tbody .us:first-child)) thead tr > :first-child { z-index: 2; background: var(--paper-2); }
}

.sources { margin-top: 3em; padding-top: 1.4em; border-top: 1.5px solid var(--ink); font-size: 0.92rem; }
.sources h2 { font-size: 1.2rem; margin-top: 0; }
.sources ol { margin-top: 0.8em; }
.sources a { word-break: break-word; }

/* Sidebar */
.aside { position: sticky; top: 100px; display: grid; gap: 20px; }
.box { border: 1.5px solid var(--ink); background: var(--ink); color: var(--white); padding: 26px; box-shadow: 10px 10px 0 var(--green); margin-right: 10px; display: grid; gap: 12px; }
.box .label { color: var(--mint); }
.box .price { font-size: 3rem; font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.box .price span { font-size: 1rem; letter-spacing: 0; font-weight: 500; color: #D6E2DC; }
.box p { color: #D6E2DC; font-size: 0.95rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 700 0.95rem/1 var(--f-display); padding: 15px 22px; text-decoration: none; background: var(--green); color: var(--white); border: 0; cursor: pointer; box-shadow: 4px 4px 0 var(--ink); transition: transform .15s ease, box-shadow .15s ease; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.box .btn { background: var(--butter); color: var(--ink); box-shadow: none; }
.related { border: 1.5px solid var(--ink); background: var(--white); padding: 22px; display: grid; gap: 10px; margin-right: 10px; }
.related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 0.95rem; }
.related a { color: var(--green-deep); text-underline-offset: 3px; }
.related a:hover { color: var(--green); }

/* FAQ */
.faq { margin-top: 1.4em; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.faq details { background: var(--paper-2); border: 1.5px solid transparent; }
.faq details[open] { background: var(--white); border-color: var(--ink); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 18px 20px; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--green); font-size: 1.4rem; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "\00D7"; }
.faq details p { padding: 0 20px 20px; margin: 0; }
/* Inner pages: block summary so a nowrap span inside a question flows with the text; the sign sits in the right padding */
.prose .faq summary { display: block; position: relative; padding-right: 50px; }
.prose .faq summary::after { position: absolute; right: 20px; top: 18px; }
@media (max-width: 340px) { .prose .faq summary { font-size: 0.95rem; padding: 16px 40px 16px 16px; overflow-wrap: anywhere; } .prose .faq summary::after { right: 16px; top: 16px; } .prose .faq details p { padding: 0 16px 16px; } }

/* Hub cards */
.hub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 1.4em; }
@media (min-width: 641px) { .hub a:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 640px) { .hub { grid-template-columns: minmax(0, 1fr); } }
.hub a { display: grid; gap: 8px; align-content: start; padding: 24px; background: var(--white); border: 1.5px solid var(--ink); text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease; min-width: 0; }
.hub a:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--green); }
.hub .k { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); }
.hub .t { font-weight: 800; font-size: 1.3rem; letter-spacing: -0.03em; line-height: 1.15; }
.hub .d { color: var(--ink-soft); font-size: 0.96rem; }

/* CTA band */
.cta { background: var(--green); color: var(--white); padding-block: 80px; position: relative; overflow: hidden; isolation: isolate; }
.cta::after { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: var(--green-deep); right: -140px; top: -160px; z-index: -1; }
/* Button always sits under the headline on the left, so the green deep circle never runs behind it */
.cta .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.cta h2 { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4rem); max-width: 18ch; }
.cta h2 .it { color: var(--butter); display: block; }
.cta .btn { background: var(--white); color: var(--ink); }
@media (max-width: 1080px) { .cta::after { width: 200px; height: 200px; right: -100px; top: -130px; } }

/* Footer */
footer { padding-block: 34px; border-top: 1.5px solid var(--ink); font-size: 0.92rem; }
footer .cols { display: grid; grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); gap: 24px; padding-bottom: 24px; border-bottom: 1px solid #E2DBCD; }
@media (max-width: 900px) { footer .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } footer .cols .brandcol { grid-column: 1 / -1; } }
footer h2 { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; margin-bottom: 12px; line-height: 1.4; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
footer a { text-decoration: none; }
footer a:hover { color: var(--green); text-decoration: underline; }
footer .logo:hover { color: inherit; text-decoration: none; }
footer .brandcol p { color: var(--ink-soft); margin: 12px 0 0 0; max-width: 28ch; }
footer .base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 22px; color: var(--ink-soft); font-size: 0.85rem; }

/* Work grid */
.wgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 28px; margin-top: 1.6em; }
@media (max-width: 560px) { .wgrid { grid-template-columns: minmax(0, 1fr); } }
.wcard { display: grid; gap: 6px; align-content: start; text-decoration: none; color: inherit; min-width: 0; }
.wframe { display: block; position: relative; margin: 0 14px 14px 0; isolation: isolate; }
.wframe::after { content: ""; position: absolute; inset: 14px -14px -14px 14px; background: var(--green); z-index: -1; }
.wwin { display: flex; flex-direction: column; background: var(--white); border: 1.5px solid var(--ink); height: 420px; overflow: hidden; }
.wbar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--paper-2); border-bottom: 1.5px solid var(--ink); font-family: var(--f-mono); font-size: 0.68rem; white-space: nowrap; overflow: hidden; }
.wbar i { font-style: normal; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-soft); opacity: .45; flex: none; }
.wbar b { font-weight: 400; margin-left: 6px; overflow: hidden; text-overflow: ellipsis; }
.wshot { flex: 1; position: relative; overflow: hidden; background: #EEF0EA; }
.wshot iframe { position: absolute; top: 0; left: 0; width: 640px; height: 900px; border: 0; transform-origin: 0 0; pointer-events: none; }
.wcard:hover .wwin { border-color: var(--green); }
.wkind { margin-top: 14px; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); }
.wname { font-weight: 800; font-size: 1.25rem; letter-spacing: -0.03em; line-height: 1.15; }
.wbrand { font-size: 0.92rem; color: var(--ink-soft); }

/* Forms */
.lead-form { background: var(--white); border: 1.5px solid var(--ink); box-shadow: 10px 10px 0 var(--green); padding: 26px; display: grid; gap: 16px; margin: 1.6em 10px 0 0; }
.lead-form .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 560px) { .lead-form .row { grid-template-columns: minmax(0, 1fr); } }
.lead-form label { display: grid; gap: 6px; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; min-width: 0; }
.lead-form input, .lead-form select, .lead-form textarea { font: 400 1rem/1.4 var(--f-display); text-transform: none; letter-spacing: 0; color: var(--ink); background: var(--paper); border: 1.5px solid var(--ink); border-radius: 0; padding: 12px 14px; width: 100%; }
.lead-form textarea { min-height: 120px; resize: vertical; }
.lead-form .btn { justify-self: start; }
.fstatus { margin: 0; padding: 12px 14px; background: var(--mint); font-size: 0.92rem; }
/* Text after the form or calculator card: the normal paragraph gap, measured from the 10px shadow edge (a script sits between them) */
.prose > .lead-form + p, .prose > .lead-form + script + p, .prose > .calc + p, .prose > .calc + script + p { margin-top: calc(1.1em + 10px); }

/* Calculator */
.calc { background: var(--white); border: 1.5px solid var(--ink); box-shadow: 10px 10px 0 var(--green); padding: 24px; margin: 1.6em 10px 0 0; display: grid; gap: 22px; }
.calc .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
@media (max-width: 560px) { .calc .grid { grid-template-columns: minmax(0, 1fr); } }
.calc label { display: grid; gap: 6px; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.calc input { font: 500 1.05rem/1.3 var(--f-display); letter-spacing: 0; color: var(--ink); background: var(--paper); border: 1.5px solid var(--ink); border-radius: 0; padding: 11px 13px; width: 100%; font-variant-numeric: tabular-nums; }
.calc .out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .calc .out { grid-template-columns: minmax(0, 1fr); } }
.calc .stat { background: var(--paper-2); border: 1.5px solid transparent; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; }
.calc .stat.main { background: var(--green); color: var(--white); border-color: var(--ink); }
.calc .stat .k { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: .85; }
.calc .stat .v { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.2; margin-top: 4px; }
.calc .note { font-size: 0.85rem; color: var(--ink-soft); margin: 0; }

/* Shared header and footer fixes */
.nw { white-space: nowrap; }
@media (max-width: 960px) { .nav > nav { display: none; } }
@media (max-width: 379px) { .nav { gap: 12px; } .logo { font-size: 0.9rem; gap: 8px; } .logo svg { width: 24px; height: 24px; } }
@media (max-width: 339px) { .logo { font-size: 0.8rem; } .logo svg { width: 22px; height: 22px; } }
@media (min-width: 901px) { footer .cols h2 { min-height: 2.8em; } }