/* Postern Mail — shared chrome and prose components for the public site's
   subpages. Tokens come from tokens.css; the homepage keeps its own inline
   styles for the explainer film. Dark only, per brandkit/apply-to-public-website.md. */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--pm-bg);
  color: var(--pm-text);
  font-family: var(--pm-font-body);
  font-size: var(--pm-text-body);
  line-height: 1.65;
  text-wrap: pretty;
}
a { color: var(--pm-accent-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mono, code, pre, kbd { font-family: var(--pm-font-mono); }
code { font-size: 0.92em; color: var(--pm-accent-text); }

section, footer { padding: var(--pm-space-8) var(--pm-space-7); border-bottom: 1px solid var(--pm-border); }
.inner { max-width: 1160px; margin: 0 auto; }
.split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--pm-space-7); align-items: start; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  section, footer, .nav { padding-left: var(--pm-space-5); padding-right: var(--pm-space-5); }
}

.eyebrow {
  font-size: var(--pm-text-eyebrow);
  letter-spacing: var(--pm-track-eyebrow);
  text-transform: uppercase;
  color: var(--pm-text-eyebrow-color);
  font-weight: 500;
  margin-bottom: var(--pm-space-4);
}
h1, h2, h3 { font-weight: 300; letter-spacing: var(--pm-track-display); }
h1 { font-size: clamp(30px, 3.7vw, 46px); line-height: 1.1; margin-bottom: var(--pm-space-3); }
h2 { font-size: var(--pm-text-h2); margin-bottom: var(--pm-space-4); }
h3 { font-size: var(--pm-text-h3); font-weight: 400; margin-bottom: var(--pm-space-2); }
p.lead { font-size: var(--pm-text-body-lg); color: var(--pm-text-muted); max-width: 720px; }
p.muted, .muted { color: var(--pm-text-muted); }
.dim { color: var(--pm-text-dim); }

.btn {
  display: inline-block; padding: 13px 26px; border-radius: var(--pm-radius);
  font-size: 14px; font-weight: 500; background: transparent; cursor: pointer;
  white-space: nowrap; text-decoration: none;
  border: 1px solid var(--pm-accent); color: var(--pm-accent-text);
  transition: background 180ms ease, color 180ms ease;
}
.btn:hover { background: var(--pm-accent-tint); color: var(--pm-accent-text); text-decoration: none; }
.btn.secondary { border-color: var(--pm-border-strong); color: var(--pm-text-muted); }
.btn.secondary:hover { color: var(--pm-text); background: transparent; }

.wordmark { display: inline-flex; align-items: baseline; gap: 0.45em; font-size: 14px; letter-spacing: var(--pm-track-wordmark); font-weight: 400; color: var(--pm-logo-word); }
.wordmark .mail { color: var(--pm-logo-word-mail); }

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--pm-space-4) var(--pm-space-7);
  background: rgba(6, 8, 15, 0.82); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--pm-border);
}
.nav .brand { display: flex; align-items: center; gap: 14px; color: var(--pm-text); text-decoration: none; }
.nav-links { display: flex; align-items: center; gap: var(--pm-space-5); }
.nav-links a:not(.btn) { color: var(--pm-text-muted); font-size: 14px; text-decoration: none; }
.nav-links a:not(.btn):hover, .nav-links a[aria-current="page"] { color: var(--pm-text); }
.nav .btn { padding: 9px 18px; }
@media (max-width: 860px) { .nav-links a:not(.btn) { display: none; } }

/* Page head */
.page-head { padding-top: var(--pm-space-7); }
.page-head .head { max-width: 760px; }

/* Prose */
.prose { max-width: 720px; }
.prose p + p, .prose ul + p, .prose p + ul { margin-top: var(--pm-space-3); }
.prose ul, .prose ol { padding-left: 1.2em; color: var(--pm-text-muted); }
.prose li + li { margin-top: 6px; }
.prose strong { font-weight: 500; color: var(--pm-text); }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--pm-space-5); }
.cards.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) { .cards, .cards.three { grid-template-columns: 1fr; } }
.card { background: var(--pm-bg-raised); border: 1px solid var(--pm-border); border-radius: var(--pm-radius-lg); padding: var(--pm-space-5) var(--pm-space-6); }
.card .eyebrow { color: var(--pm-accent-text); margin-bottom: var(--pm-space-2); }
.card p { color: var(--pm-text-muted); }
.card p + p { margin-top: var(--pm-space-2); }

/* Numbered steps (grid with hairlines) */
.steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--pm-border); border: 1px solid var(--pm-border); border-radius: var(--pm-radius-lg); overflow: hidden; }
.steps.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 880px) { .steps, .steps.four { grid-template-columns: 1fr; } }
.step { background: var(--pm-bg-raised); padding: var(--pm-space-6); }
.step .num { font-family: var(--pm-font-mono); color: var(--pm-accent-text); font-size: 13px; margin-bottom: var(--pm-space-3); }
.step p { color: var(--pm-text-muted); }
.step p + p { margin-top: var(--pm-space-2); }

/* Ordered instructions */
.instructions { list-style: none; display: flex; flex-direction: column; gap: var(--pm-space-3); color: var(--pm-text-muted); max-width: 720px; }
.instructions li { display: flex; gap: var(--pm-space-3); }
.instructions .n { flex: none; font-family: var(--pm-font-mono); font-size: 13px; color: var(--pm-accent-text); padding-top: 3px; min-width: 22px; }
.instructions b { font-weight: 500; color: var(--pm-text); }

/* Callouts */
.callout {
  border: 1px solid var(--pm-border-accent); background: var(--pm-accent-tint);
  border-radius: var(--pm-radius-lg); padding: var(--pm-space-5) var(--pm-space-6);
  max-width: 820px;
}
.callout .eyebrow { color: var(--pm-accent-text); margin-bottom: var(--pm-space-2); }
.callout p { color: var(--pm-text); }
.callout p + p { margin-top: var(--pm-space-2); }
.callout.plain { background: var(--pm-bg-panel); border-color: var(--pm-border-strong); }
.callout.plain p { color: var(--pm-text-muted); }

/* The guarantee: the one block on the site allowed to raise its voice. */
.guarantee {
  border: 1px solid var(--pm-accent); border-radius: var(--pm-radius-lg);
  padding: var(--pm-space-6) var(--pm-space-7); background: var(--pm-bg-panel);
  box-shadow: 0 0 40px rgba(30, 157, 255, 0.12);
}
.guarantee .eyebrow { color: var(--pm-accent-text); }
.guarantee h3 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 300; margin-bottom: var(--pm-space-3); }
.guarantee p { color: var(--pm-text); font-size: var(--pm-text-body-lg); }
.guarantee p + p { margin-top: var(--pm-space-3); }
.guarantee p.muted { color: var(--pm-text-muted); font-size: var(--pm-text-body); }

/* Code */
.endpoint {
  font-family: var(--pm-font-mono); font-size: 13px; color: var(--pm-accent-text);
  background: var(--pm-bg-panel); border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius); padding: var(--pm-space-4) var(--pm-space-5);
  margin: var(--pm-space-4) 0; overflow-x: auto; white-space: nowrap;
}
pre.code {
  font-size: 12.5px; line-height: 1.55; color: var(--pm-text);
  background: var(--pm-bg-panel); border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius); padding: var(--pm-space-4) var(--pm-space-5);
  margin: var(--pm-space-3) 0; overflow-x: auto;
}
pre.code code { color: inherit; font-size: inherit; }

/* Client sections */
.client { padding-top: var(--pm-space-6); }
.client + .client { border-top: 1px solid var(--pm-border); margin-top: var(--pm-space-6); }
.client h3 { font-size: 20px; margin-bottom: var(--pm-space-3); }
.client .note { color: var(--pm-text-dim); font-size: var(--pm-text-small); margin-top: var(--pm-space-3); }
.toc { display: flex; flex-wrap: wrap; gap: var(--pm-space-2) var(--pm-space-4); font-size: 14px; margin-top: var(--pm-space-4); }
.toc a { color: var(--pm-text-muted); }
.toc a:hover { color: var(--pm-text); }

/* Tools */
.tool { border: 1px solid var(--pm-border); border-radius: var(--pm-radius-lg); background: var(--pm-bg-raised); padding: var(--pm-space-5) var(--pm-space-6); }
.tool + .tool { margin-top: var(--pm-space-4); }
.tool .head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--pm-space-4); flex-wrap: wrap; margin-bottom: var(--pm-space-2); }
.tool .name { font-family: var(--pm-font-mono); font-size: 15px; color: var(--pm-text); }
.tool p { color: var(--pm-text-muted); }
.tool p + p { margin-top: var(--pm-space-2); }
.tool .never { color: var(--pm-text-dim); }
.pill { font-size: 12.5px; padding: 4px 12px; border-radius: var(--pm-radius-pill); border: 1px solid var(--pm-border-accent); color: var(--pm-accent-text); background: var(--pm-accent-tint); white-space: nowrap; }
.pill.none { border-color: var(--pm-border); color: var(--pm-text-dim); background: transparent; }
.group { margin-top: var(--pm-space-7); }
.group:first-of-type { margin-top: 0; }
.group > .eyebrow { margin-bottom: var(--pm-space-3); }
.group > p.muted { margin-bottom: var(--pm-space-4); max-width: 720px; }

/* Tables */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--pm-border); border-radius: var(--pm-radius-lg); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tbl th, table.tbl td { text-align: left; padding: var(--pm-space-3) var(--pm-space-4); border-bottom: 1px solid var(--pm-border); vertical-align: top; }
table.tbl th { font-weight: 500; color: var(--pm-text-eyebrow-color); font-size: var(--pm-text-eyebrow); letter-spacing: var(--pm-track-eyebrow); text-transform: uppercase; background: var(--pm-bg-raised); }
table.tbl td { color: var(--pm-text-muted); }
table.tbl tr:last-child td { border-bottom: none; }

/* Footer */
footer { display: flex; align-items: center; justify-content: space-between; border-bottom: none; padding-top: var(--pm-space-6); padding-bottom: var(--pm-space-6); flex-wrap: wrap; gap: var(--pm-space-4); }
footer .brand { display: flex; align-items: center; gap: 12px; }
footer .links { display: flex; gap: var(--pm-space-5); flex-wrap: wrap; }
footer, footer a { color: var(--pm-text-dim); font-size: var(--pm-text-small); text-decoration: none; }
footer a:hover { color: var(--pm-text-muted); }

/* Closing call to action */
.cta { text-align: center; }
.cta h2 { font-size: var(--pm-text-h1); }
.cta p { max-width: 520px; margin: 0 auto var(--pm-space-6); }