/* =========================================================
   HitnReply Design System
   Palette:
     --ink        #12172B  primary text / dark sections
     --ink-soft   #4A5072  secondary text on light bg
     --paper      #FAFAF8  page background
     --paper-dim  #F1F1EC  card / alt-section background
     --line       #E4E3DC  hairline borders
     --signal     #2F5DFF  primary accent (cobalt)
     --signal-2   #5C7CFF  accent, lighter
     --signal-tint#EAEEFF  accent tint background
     --amber      #FFB020  secondary accent
     --good       #1F8A4C  positive metric
     --bad        #D64545  negative metric
   Type:
     --font-display  'Space Grotesk'   headlines
     --font-body     'Inter'            paragraphs, UI
     --font-mono     'IBM Plex Mono'    eyebrows, labels, data
   ========================================================= */

:root {
	--ink: #12172B;
	--ink-soft: #4A5072;
	--paper: #FAFAF8;
	--paper-dim: #F1F1EC;
	--line: #E4E3DC;
	--signal: #2F5DFF;
	--signal-2: #5C7CFF;
	--signal-tint: #EAEEFF;
	--amber: #FFB020;
	--good: #1F8A4C;
	--bad: #D64545;

	--font-display: 'Space Grotesk', 'Arial Narrow', sans-serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

	--radius-s: 8px;
	--radius-m: 14px;
	--radius-l: 24px;
	--container: 1180px;
	--shadow-card: 0 1px 2px rgba(18,23,43,.04), 0 8px 24px rgba(18,23,43,.06);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0 0 .5em;
	color: var(--ink);
}
h1 { font-size: clamp(2.3rem, 4.4vw + 1rem, 3.9rem); }
h2 { font-size: clamp(1.8rem, 2.6vw + 1rem, 2.6rem); }
h3 { font-size: clamp(1.25rem, 1vw + 1rem, 1.5rem); }
p { margin: 0 0 1em; color: var(--ink-soft); }
a { color: var(--signal); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: clamp(48px, 7vw, 104px) 0; }
.section-dark { background: var(--ink); color: #fff; }
.section-dark p { color: #C7CBE0; }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-tint { background: var(--paper-dim); }

.eyebrow {
	font-family: var(--font-mono);
	font-size: .78rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--signal);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
}
.section-dark .eyebrow { color: var(--amber); }
.eyebrow::before {
	content: "";
	width: 18px; height: 2px;
	background: currentColor;
	display: inline-block;
}

.lede { font-size: 1.15rem; max-width: 56ch; }

/* Focus visibility (kept even when using :focus-visible fallback) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
	outline: 3px solid var(--signal);
	outline-offset: 2px;
}

.visually-hidden {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------------- Buttons ---------------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-family: var(--font-body); font-weight: 600; font-size: .95rem;
	padding: 13px 24px; border-radius: 999px; border: 1px solid transparent;
	cursor: pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
	text-decoration: none; line-height: 1;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--signal); color: #fff; }
.btn-primary:hover { background: #2249DB; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-on-dark { background: #fff; color: var(--ink); }
.btn-on-dark:hover { background: var(--amber); }
.btn-ghost-on-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn-ghost-on-dark:hover { border-color: #fff; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------------- Header / Nav ---------------- */
.site-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(250,250,248,.88);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
}
.nav-row { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 20px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand img { width: 34px; height: 34px; flex-shrink: 0; }
.brand .brand-text { white-space: nowrap; } /* keeps "Hitn" + "Reply" as one flex item so .brand's gap only applies between the icon and the text, not inside the wordmark */
.brand .brand-accent { color: var(--signal); }

.nav-links { display: none; align-items: center; gap: 32px; font-weight: 500; font-size: .95rem; }
.nav-links a { color: var(--ink); }
.nav-links a.is-active { color: var(--signal); }
.nav-cta { display: none; align-items: center; gap: 10px; }
.nav-cta .btn { padding: 9px 18px; font-size: .88rem; }

.nav-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; border-radius: var(--radius-s);
	border: 1px solid var(--line); background: #fff; cursor: pointer;
}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after { content: ""; }
.nav-toggle-icon { position: relative; width: 18px; height: 2px; background: var(--ink); display: block; }
.nav-toggle-icon::before, .nav-toggle-icon::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink); transition: transform .2s ease; }
.nav-toggle-icon::before { top: -6px; }
.nav-toggle-icon::after { top: 6px; }
.site-header.is-open .nav-toggle-icon { background: transparent; }
.site-header.is-open .nav-toggle-icon::before { transform: translateY(6px) rotate(45deg); }
.site-header.is-open .nav-toggle-icon::after { transform: translateY(-6px) rotate(-45deg); }

.mobile-panel {
	display: none;
	border-top: 1px solid var(--line);
	background: var(--paper);
}
.site-header.is-open .mobile-panel { display: block; }
.mobile-panel .container { padding-top: 18px; padding-bottom: 22px; display: flex; flex-direction: column; gap: 4px; }
.mobile-panel a {
	color: var(--ink); font-weight: 600; padding: 12px 4px; border-bottom: 1px solid var(--line);
}
.mobile-panel .btn { margin-top: 14px; }

@media (min-width: 900px) {
	.nav-links { display: flex; }
	.nav-cta { display: inline-flex; }
	.nav-toggle { display: none; }
	.mobile-panel { display: none !important; }
}

/* ---------------- Hero / Cadence chart (signature element) ---------------- */
.hero { padding: clamp(48px, 8vw, 96px) 0 clamp(32px, 6vw, 72px); }
.hero-grid { display: grid; gap: 48px; align-items: center; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero-note { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-family: var(--font-mono); font-size: .8rem; color: var(--ink-soft); }
.hero-note .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); }

.cadence-card {
	background: var(--ink); color: #fff; border-radius: var(--radius-l);
	padding: 28px 26px 22px; box-shadow: var(--shadow-card);
}
.cadence-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 22px; }
.cadence-card-head .label { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #9AA2C7; }
.cadence-card-head .total { font-family: var(--font-mono); font-size: .85rem; color: var(--amber); }
.cadence-bars { display: flex; align-items: flex-end; gap: 14px; height: 150px; }
.cadence-bars .col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; height: 100%; }
.cadence-bars .bar {
	width: 100%; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, var(--signal-2), var(--signal));
	transform: scaleY(0); transform-origin: bottom; animation: op-grow .7s ease forwards;
}
.cadence-bars .col:nth-child(1) .bar { animation-delay: .05s; }
.cadence-bars .col:nth-child(2) .bar { animation-delay: .15s; }
.cadence-bars .col:nth-child(3) .bar { animation-delay: .25s; }
.cadence-bars .col:nth-child(4) .bar { animation-delay: .35s; }
.cadence-bars .col:nth-child(5) .bar { animation-delay: .45s; }
.cadence-bars .col .bar.is-peak { background: linear-gradient(180deg, #FFC24D, var(--amber)); }
@keyframes op-grow { to { transform: scaleY(1); } }
.cadence-bars .day { font-family: var(--font-mono); font-size: .68rem; color: #9AA2C7; }
.cadence-foot { display: flex; justify-content: space-between; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); font-family: var(--font-mono); font-size: .78rem; color: #C7CBE0; }
.cadence-foot strong { color: #fff; }

@media (min-width: 960px) {
	.hero-grid { grid-template-columns: 1.05fr .95fr; }
}

/* ---------------- Divider ---------------- */
.pulse-divider { height: 1px; background: var(--line); position: relative; margin: 0; }
.pulse-divider::after {
	content: ""; position: absolute; top: -3px; left: 50%; transform: translateX(-50%);
	width: 40px; height: 7px;
	background: repeating-linear-gradient(90deg, var(--signal) 0 4px, transparent 4px 10px);
	border-radius: 4px;
}

/* ---------------- Audience chips ---------------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
	font-family: var(--font-mono); font-size: .78rem; letter-spacing: .02em;
	padding: 8px 14px; border-radius: 999px; background: var(--signal-tint); color: var(--signal);
	border: 1px solid transparent;
}

/* ---------------- Feature grid ---------------- */
.feature-grid { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 44px; }
.feature-card {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-m);
	padding: 26px; display: flex; flex-direction: column; gap: 14px;
	transition: border-color .15s ease, transform .15s ease;
}
.feature-card:hover { border-color: var(--signal); transform: translateY(-2px); }
.feature-icon {
	width: 44px; height: 44px; border-radius: var(--radius-s); background: var(--signal-tint);
	display: flex; align-items: center; justify-content: center; color: var(--signal);
}
.feature-card h3 { margin-bottom: 4px; }
.feature-card p { margin-bottom: 0; font-size: .95rem; }
.feature-card .link-more { font-family: var(--font-mono); font-size: .82rem; margin-top: auto; }

@media (min-width: 640px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------------- Numbered steps (real sequence: 1 connect, 2 import, 3 launch) ---------------- */
.steps { display: grid; gap: 28px; margin-top: 44px; grid-template-columns: 1fr; }
.step { display: flex; gap: 18px; }
.step-num {
	font-family: var(--font-mono); font-size: .85rem; color: var(--signal);
	width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--signal);
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } }

/* ---------------- Pricing ---------------- */
.pricing-grid { display: grid; gap: 24px; grid-template-columns: 1fr; margin-top: 44px; align-items: stretch; }
.price-card {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l);
	padding: 32px 28px; display: flex; flex-direction: column; gap: 22px; position: relative;
}
.price-card.is-featured { border-color: var(--signal); box-shadow: 0 10px 34px rgba(47,93,255,.16); }
.price-badge {
	position: absolute; top: -14px; left: 28px; background: var(--signal); color: #fff;
	font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
	padding: 6px 13px; border-radius: 999px;
}
.price-head { display: flex; flex-direction: column; gap: 6px; }
.price-name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; }
.price-tagline { color: var(--ink-soft); font-size: .9rem; margin: 0; }
.price-amount-row { display: flex; align-items: baseline; gap: 6px; }
.price-amount { font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; letter-spacing: -0.02em; }
.price-period { color: var(--ink-soft); font-family: var(--font-mono); font-size: .82rem; }

.plan-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; flex: 1; }
.plan-features li { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--ink-soft); }
.plan-features li svg { flex-shrink: 0; margin-top: 3px; }
.plan-features li.is-included svg { color: var(--good); }
.plan-features li.is-excluded { color: #B7BAC9; }
.plan-features li.is-excluded svg { color: #D6D8E2; }
.plan-features .plan-note { font-family: var(--font-mono); font-size: .74rem; color: var(--signal); text-transform: uppercase; letter-spacing: .05em; margin: 4px 0 -2px; }

@media (min-width: 760px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
/* Four tiers now, so go two-up on a tablet and four-up only when there's
   genuinely room. Three-up would orphan the last card on its own row. */
@media (min-width: 1100px) { .pricing-grid { grid-template-columns: repeat(4, 1fr); } .price-card.is-featured { transform: translateY(-10px); } }

/* ---------------- CTA band ---------------- */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 20ch; margin-left: auto; margin-right: auto; }
.cta-band .hero-actions { justify-content: center; }

/* ---------------- Footer ---------------- */
.site-footer { background: var(--ink); color: #C7CBE0; padding: 56px 0 28px; }
.footer-grid { display: grid; gap: 36px; grid-template-columns: 1fr; margin-bottom: 40px; }
.footer-brand .brand { color: #fff; }
.footer-brand p { max-width: 34ch; margin-top: 12px; font-size: .9rem; }
.footer-col h4 { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: #9AA2C7; margin-bottom: 14px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: #C7CBE0; font-size: .92rem; }
.footer-col a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: .82rem; color: #8890B5; }

@media (min-width: 640px) { .footer-grid { grid-template-columns: 1.3fr repeat(3, 1fr); } }

/* ---------------- Cards / mock UI panels (used on App page) ---------------- */
.module-row { display: grid; gap: 36px; align-items: center; grid-template-columns: 1fr; padding: 48px 0; border-bottom: 1px solid var(--line); }
.module-row:last-child { border-bottom: none; }
.module-row.reverse .module-copy { order: 1; }
.module-row.reverse .module-visual { order: 0; }
.module-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.module-tags span { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-soft); background: var(--paper-dim); padding: 5px 10px; border-radius: 6px; }

.mock-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-card); overflow: hidden; }
.mock-panel-head { display: flex; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--paper-dim); }
.mock-panel-head span { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.mock-panel-body { padding: 18px; }
.mock-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: .85rem; }
.mock-row:last-child { border-bottom: none; }
.mock-pill { font-family: var(--font-mono); font-size: .7rem; padding: 3px 9px; border-radius: 999px; background: var(--signal-tint); color: var(--signal); }
.mock-pill.good { background: #E6F5EC; color: var(--good); }
.mock-bar-track { height: 6px; border-radius: 4px; background: var(--paper-dim); overflow: hidden; margin-top: 8px; }
.mock-bar-fill { height: 100%; background: var(--signal); }

@media (min-width: 900px) { .module-row { grid-template-columns: 1fr 1fr; gap: 60px; } }

/* ---------------- Blog ---------------- */
.post-grid { display: grid; gap: 26px; grid-template-columns: 1fr; margin-top: 40px; }
.post-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; display: flex; flex-direction: column; transition: transform .15s ease, border-color .15s ease; }
.post-card:hover { transform: translateY(-2px); border-color: var(--signal); }
.post-thumb { height: 150px; background: linear-gradient(135deg, var(--signal-tint), #fff); position: relative; }
.post-thumb .bars { position: absolute; left: 20px; bottom: 20px; display: flex; gap: 6px; align-items: flex-end; height: 60px; }
.post-thumb .bars i { display: block; width: 10px; border-radius: 3px 3px 0 0; background: var(--signal); opacity: .6; }
.post-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-meta { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-soft); display: flex; gap: 12px; }
.post-body h3 a { color: var(--ink); }
.post-tag { align-self: flex-start; font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--signal); background: var(--signal-tint); padding: 4px 9px; border-radius: 6px; }

@media (min-width: 640px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .post-grid.is-index { grid-template-columns: repeat(3, 1fr); } }

.article-head { max-width: 72ch; margin: 0 auto; text-align: left; }
.article-body { max-width: 72ch; margin: 40px auto 0; }
.article-body h2 { margin-top: 1.6em; }
.article-body p { font-size: 1.02rem; }
.article-body ul { color: var(--ink-soft); padding-left: 1.2em; }
.article-body li { margin-bottom: .5em; }
.back-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: .82rem; margin-bottom: 24px; }

/* Anything the blog editor can produce needs a style here, or a post with
   an image, a quote or a numbered list renders unstyled next to the rest
   of the site. Images are capped to the column and never overflow it. */
.article-body img, .article-cover { display: block; max-width: 100%; height: auto; border-radius: var(--radius-m); margin: 28px auto; }
.article-cover { margin-top: 0; }
.article-body ol { color: var(--ink-soft); padding-left: 1.3em; }
.article-body ol li { margin-bottom: .5em; }
.article-body h3 { margin-top: 1.4em; }
.article-body blockquote {
	margin: 28px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--signal);
	color: var(--ink); font-size: 1.06rem; font-style: italic;
}
.article-body blockquote p:last-child { margin-bottom: 0; }
.article-body figure { margin: 28px 0; }
.article-body figcaption { font-family: var(--font-mono); font-size: .76rem; color: var(--ink-soft); text-align: center; margin-top: 10px; }
.article-body code { font-family: var(--font-mono); font-size: .88em; background: var(--signal-tint); padding: 2px 6px; border-radius: 5px; }
.article-body pre { background: var(--ink); color: #fff; padding: 18px 20px; border-radius: var(--radius-m); overflow-x: auto; overflow-y: hidden; margin: 24px 0; }
.article-body pre code { background: none; color: inherit; padding: 0; font-size: .84rem; }
.article-body hr { border: 0; border-top: 1px solid var(--line); margin: 36px 0; }
.article-body a { text-decoration: underline; text-underline-offset: 2px; }
.article-body table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: .92rem; }
.article-body th, .article-body td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.article-body th { background: var(--paper); font-weight: 600; }
/* Below this width a table cannot fit the column, and a clipped table is
   worse than a scrollable one. Both overflow axes are set deliberately:
   setting only one turns the other into auto per spec, which has caused
   real bugs in this codebase before. */
@media (max-width: 640px) {
	.article-body table { display: block; overflow-x: auto; overflow-y: hidden; white-space: nowrap; }
}

/* ---------------- Contact / Forms ---------------- */
.contact-grid { display: grid; gap: 40px; grid-template-columns: 1fr; }
.contact-info-list { display: flex; flex-direction: column; gap: 22px; margin-top: 28px; }
.contact-info-item { display: flex; gap: 14px; }
.contact-info-item .feature-icon { flex-shrink: 0; }
.contact-info-item h4 { margin: 0 0 4px; font-family: var(--font-body); font-size: 1rem; }
.contact-info-item p { margin: 0; font-size: .92rem; }

.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow-card); }
/* The home page points at /pricing rather than repeating the whole table,
   so the plans live in exactly one place and that page can actually rank. */
.pricing-teaser { text-align: center; }
.pricing-teaser .lede { margin-left: auto; margin-right: auto; }
.pricing-teaser-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }

/* The contact card is one address and one action. The icon sits BESIDE the
   heading rather than stacked above it: an icon on its own line reads as a
   separate thing, and it is part of the heading.

   Laid out as a grid on the card itself, deliberately, so it does not depend
   on the icon and heading being wrapped in a row container. `display:
   contents` makes that wrapper transparent to the grid where it exists, and
   where it does not the icon and heading are already direct children and land
   in the same row anyway. Both shapes of markup render identically, so an
   older copy of contact.html still looks right. */
.contact-email-card {
	padding: clamp(28px, 4vw, 40px);
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: 14px;
}
.contact-email-head { display: contents; }
.contact-email-icon {
	width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 12px; background: var(--signal-tint); color: var(--signal);
}
.contact-email-card h2 { font-size: 1.4rem; margin: 0; line-height: 1.2; }
/* Everything under the heading spans both columns, so the sentence and the
   button start at the card's left edge instead of indenting under the icon. */
.contact-email-card p { grid-column: 1 / -1; margin: 18px 0 26px; color: var(--ink-soft); font-size: .95rem; }
.contact-email-card .btn { grid-column: 1 / -1; margin: 0; }

@media (min-width: 960px) { .contact-grid { grid-template-columns: .9fr 1.1fr; } }

/* ---------------- Legal pages ---------------- */
.legal-meta { font-family: var(--font-mono); font-size: .82rem; color: var(--ink-soft); }
.legal-body { max-width: 72ch; margin-top: 30px; }
.legal-body h2 { margin-top: 1.8em; font-size: 1.3rem; }
.legal-body ul { color: var(--ink-soft); padding-left: 1.2em; }
.legal-callout { background: var(--signal-tint); border-left: 3px solid var(--signal); border-radius: 0 var(--radius-s) var(--radius-s) 0; padding: 16px 20px; font-size: .92rem; margin: 24px 0; }

/* ---------------- Misc utility ---------------- */
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.stack-40 > * + * { margin-top: 40px; }