/* Dispatch: a paper-and-ink mailroom design system. */
:root {
  color-scheme: light;
  --font-heading: var(--font-sans);
  --primary: #b83c22; --primary-hover: #922a16; --accent: #b83c22; --accent-2: #b83c22;
  --bg: #f1eee5; --bg-elevated: #fff; --bg-muted: #e9e9de; --bg-accented: #f5e5d7;
  --border: #cccdbf; --border-muted: #ddded2;
  --text: #262a26; --text-muted: #62655b; --text-dimmed: #696d62;
  --success: #087653; --danger: #be2945; --warning: #8a5706;
  --radius: 14px; --radius-control: 10px;
  --shadow: 0 2px 4px #262a2603, 0 8px 24px #262a2605;
  --shadow-glow: 0 0 0 3px #b83c2212, 0 8px 24px #262a2608;
}
body { background: var(--bg); font-size: 14px; line-height: 1.65; }
a { color: var(--primary); }
a:hover { color: var(--primary-hover); }
h1,h2,h3,h4,.metric-card strong,.stat-value,.feature-card h3,.endpoint-card h3 { color: var(--text); text-shadow: none; }
h1 { font-size: clamp(27px, 3.2vw, 38px); letter-spacing: -.045em; }
h2 { letter-spacing: -.025em; }
h3 { letter-spacing: -.015em; }
.eyebrow { color: var(--primary); letter-spacing: .12em; font-size: 11px; margin-bottom: 8px; }
.eyebrow::before,.page-head h1::before,.auth-panel h1::before,.msg-subject::before { content: none; }
main { max-width: 1240px; padding: 38px 28px 64px; min-width: 0; }
main:focus { outline: none; }
main > *, .page-head > *, .feature-grid > *, .meta-grid > *, .settings-grid > *, .dashboard-grid > * { min-width: 0; }
p,td,dd,.msg-sender-info,.attachment-chip,.address-suffix { overflow-wrap: anywhere; }
::selection { background: #efd5b9; color: #522511; }
:focus-visible { outline: 3px solid #b83c22; outline-offset: 3px; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 12px 20px; background: white; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.topbar { height: 72px; padding: 0 max(28px, calc((100vw - 1184px)/2)); background: #ffffffed; backdrop-filter: blur(12px); border-color: var(--border); gap: 24px; }
.brand { color: var(--text); font-size: 17px; letter-spacing: -.04em; text-shadow: none; min-width: 0; }
.brand > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-mark { width: 34px; height: 34px; flex-shrink: 0; background: var(--primary); border: 0; box-shadow: 0 4px 10px #b83c2225; border-radius: 10px; }
.brand-mark::before { background: white; }
.nav { display: flex; align-items: center; flex: 1; gap: 16px; }
.nav-links,.nav-actions { display: flex; align-items: center; gap: 4px; }
.nav-links { flex: 1; justify-content: center; }
.nav-link { font-size: 13px; padding: 10px 12px; min-height: 44px; display: inline-flex; align-items: center; }
.nav-link.active { background: var(--bg-accented); color: var(--primary); box-shadow: none; text-shadow: none; }
.mobile-cta,.nav-toggle { display: none; }
.button,button,.btn,a.button-ghost,a.button-danger,.button-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 1px solid transparent; border-radius: 9px; padding: 10px 16px; background: var(--primary); color: white; font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: 0; line-height: 1.4; text-align: center; text-shadow: none; }
.button:hover,button:hover:not(:disabled),.btn:hover { background: var(--primary-hover); color: white; box-shadow: 0 3px 9px #b83c221a; transform: none; }
.button-ghost,a.button-ghost { background: white; border-color: var(--border); color: var(--text); }
.button-ghost:hover,a.button-ghost:hover { background: var(--bg-muted); border-color: #a6ad99; color: var(--text); box-shadow: none; }
.button-danger,a.button-danger { background: #fff1f3; border-color: #f5ccd4; color: var(--danger); }
.button-danger:hover,a.button-danger:hover { background: #ffe1e7; border-color: var(--danger); color: var(--danger); box-shadow: none; }
button:disabled,.button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; }
input,select,textarea { background-color: white; color: var(--text); border-color: #bfc3b3; min-height: 44px; min-width: 0; max-width: 100%; }
input:focus,select:focus,textarea:focus { box-shadow: 0 0 0 3px #b83c2218; }
input[type=checkbox],input[type=radio] { accent-color: var(--primary); }
input[type=checkbox]:not(.switch) { width: 18px; height: 18px; flex-shrink: 0; }
label { font-size: 13px; letter-spacing: 0; }
.card,.auth-panel,.feature-card,.metric-card,.pricing-card,.stat-card,.msg-card,.table-wrap,.inline-form,.settings-section,.account-form,.endpoint-card { border-radius: 14px; background: white; box-shadow: var(--shadow); backdrop-filter: none; }
.page-head { margin-bottom: 28px; align-items: center; flex-wrap: wrap; }
.page-head p:last-child { margin-bottom: 0; }
.page-head > .tabs { flex-basis: 100%; }
.panel-pad,.feature-card,.pricing-card { padding: 24px; }
.metric-card { padding: 22px; gap: 10px; }
.metric-card strong,.stat-value { font-size: 32px; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.metric-card span { text-transform: none; font-size: 13px; }
.metric-card a { font-size: 12px; font-weight: 500; }
.stat-card::before { content: none; }
.quick-actions { margin: 24px 0; }
.auth-panel { margin: 36px auto; max-width: 460px; padding: 36px; }
.auth-panel h1 { font-size: 28px; }
.auth-panel form { gap: 20px; }
.inline-form { padding: 20px; gap: 16px; }
.inline-form label { flex: 1 1 180px; }
.address-suffix { min-height: 44px; max-width: 55%; background: var(--bg-muted); }
.address-input .button-ghost { min-height: 44px; }
.switch { flex-shrink: 0; background: #8591a7; }
.switch:checked { background: var(--primary); box-shadow: none; }
.table-wrap { overflow-x: auto; max-width: 100%; }
table { background: white; }
th { background: #eeeee4; font-size: 10px; letter-spacing: .08em; color: var(--text-muted); }
th,td { padding: 16px 18px; border-color: var(--border-muted); }
tbody tr:hover { background: #f5f2e9; }
td code,code { color: #884124; }
.action-row button { min-height: 44px; }
.badge,.pill-planned { background: #e9e9de; border-color: var(--border); color: var(--text-muted); letter-spacing: 0; }
.badge-success { background: #eaf8f1; color: var(--success); border-color: #bce6d2; }
.badge-danger { background: #fff1f3; color: var(--danger); border-color: #f5ccd4; }
.badge-warning { background: #fff6df; color: var(--warning); border-color: #f1d99d; }
.flash { padding: 14px 18px; }
.flash.success { background: #eaf8f1; color: var(--success); }
.flash.error { background: #fff1f3; color: var(--danger); }
.flash.warning { background: #fff6df; color: var(--warning); }
.token-once { color: var(--success); background: #f0fbf5; box-shadow: none; }
.token-once code { color: var(--success); }
.empty-state { padding: 40px 24px; background: #f9f7ef; border-color: #bfc3b3; }
.empty-state h3 { margin-bottom: 8px; }
.tabs a,.view-pills a { min-height: 44px; display: inline-flex; align-items: center; border-radius: 8px; }
.tabs a.active,.tabs a:hover,.view-pills a.active,.view-pills a:hover { background: var(--bg-accented); color: var(--primary); border-color: #d9ad91; }
.pagination,.mail-pagination { flex-wrap: wrap; }
.pagination a { padding: 10px 14px; min-height: 44px; border-radius: 8px; }
.hero { min-height: auto; padding: 64px 0 80px; gap: 56px; }
.hero h1 { font-size: clamp(42px, 5.4vw, 68px); line-height: 1.08; letter-spacing: -.065em; }
.hero-subcopy { font-size: 17px; line-height: 1.8; }
.hero-eyebrow { display: inline-flex; border: 1px solid #dfbca4; border-radius: 30px; background: #f5e5d7; padding: 6px 12px; margin-bottom: 22px; letter-spacing: .06em; }
.hero-terminal { border-radius: 18px; background: #252c27; border-color: #434b40; box-shadow: 0 24px 50px #262a2620; transform: rotate(1deg); }
.terminal-bar { background: #303831; border-color: #434b40; height: 46px; }
.terminal-bar span { background: #7a879c; width: 8px; height: 8px; }
.terminal-bar span:first-child { background: #f68d93; }
.terminal-bar span:nth-child(2) { background: #ebc476; }
.terminal-bar span:nth-child(3) { background: #78c7ab; }
.terminal-bar small { color: #c6cbbd; margin-left: auto; font: 10px var(--font-mono); letter-spacing: .08em; }
pre,.code-block { background: #252c27; color: #e4e7d9; border-color: #434b40; font-family: var(--font-mono); line-height: 1.8; max-width: 100%; }
pre code { color: inherit; font-family: var(--font-mono); }
.hero-terminal pre { border: 0; padding: 24px; font-size: 12px; }
.section-block { padding: 48px 0; border-top: 1px solid var(--border); }
.section-head { margin-bottom: 28px; }
.feature-grid { gap: 18px; }
.feature-card h3 { margin-bottom: 12px; }
.feature-card::before { content: ''; display: block; width: 26px; height: 4px; background: #d66b42; border-radius: 4px; margin-bottom: 22px; }
.local-first,.start-testing { padding: 36px; margin: 24px 0; border-radius: 16px; background: #f5e5d7; border: 1px solid #dfbca4; }
.pricing-card-featured::before { content: none; }
.pricing-card-featured { border: 2px solid var(--primary); }
.code-tabs { position: relative; }
.code-tabs input { display: block; position: absolute; width: 1px; height: 1px; opacity: 0; min-height: 0; }
#tab-curl:focus-visible ~ .tab-buttons label[for=tab-curl],#tab-python:focus-visible ~ .tab-buttons label[for=tab-python] { outline: 3px solid var(--primary); outline-offset: 3px; }
.tab-buttons label { min-height: 44px; align-items: center; }
.docs-sidebar { top: 96px; max-height: calc(100dvh - 120px); overflow-y: auto; }
.docs-nav a { font-weight: 500; min-height: 44px; }
.docs-nav a.active { background: var(--bg-accented); color: var(--primary); }
.docs-note,.section-links a { background: white; }
.docs-content { line-height: 1.8; }
.docs-content .docs-lead { font-size: 17px; }
.site-footer { width: 100%; padding: 28px; gap: 24px; }
.site-footer a { min-height: 44px; display: inline-flex; align-items: center; }
.footer-muted { margin-left: auto; align-self: center; color: var(--text-muted); font-size: 12px; }
.error-code { text-shadow: none; }
.msg-main { margin: auto; }
.msg-body .message-pane { color: var(--text); }
.msg-body .html-preview { max-width: 100%; overflow: auto; }
.msg-meta-grid code { overflow-wrap: anywhere; }
.msg-audit summary { min-height: 44px; align-content: center; }
.swal2-popup { background: white !important; color: var(--text) !important; width: min(32em, calc(100vw - 32px)) !important; }
.swal2-confirm { background: var(--primary) !important; color: white !important; }
.swal2-cancel { background: var(--bg-muted) !important; color: var(--text) !important; }
@media (max-width: 1040px) {
  .topbar { gap: 12px; padding-inline: 20px; }
  .nav-link { padding-inline: 8px; }
  .hero { gap: 28px; }
  .account-form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .topbar { height: 64px; padding: 0 16px; backdrop-filter: none; }
  .mobile-cta { display: inline-flex; margin-left: auto; white-space: nowrap; padding-inline: 12px; }
  .nav-toggle { display: inline-flex; width: 44px; height: 44px; min-width: 44px; padding: 0; background: white; color: var(--text); border-color: var(--border); margin: 0; }
  .nav { display: none; position: absolute; top: 63px; left: 0; right: 0; bottom: auto; width: auto; padding: 16px; max-height: calc(100dvh - 64px); overflow-y: auto; background: white; border: 0; border-bottom: 1px solid var(--border); box-shadow: 0 16px 30px #262a2618; transform: none; }
  body.nav-open .nav { display: flex; transform: none; }
  body.nav-open::after { content: none; }
  .nav,.nav-links,.nav-actions { flex-direction: column; align-items: stretch; }
  .nav-links { flex: none; }
  .nav-actions { border-top: 1px solid var(--border); padding-top: 12px; }
  .nav .nav-link { justify-content: flex-start; padding: 12px 16px; }
  .nav-actions button,.nav-actions .button { width: 100%; }
  .hero,.two-column { grid-template-columns: minmax(0,1fr); }
  .hero { padding: 32px 0 48px; }
  .hero-copy { max-width: 640px; }
  .hero-terminal { transform: none; }
  .docs-layout { grid-template-columns: 200px minmax(0,1fr); gap: 24px; }
  .pricing-grid { gap: 12px; }
}
@media (max-width: 640px) {
  main { padding: 24px 16px 40px; }
  .brand { font-size: 15px; gap: 8px; }
  .brand-mark { width: 30px; height: 30px; }
  .topbar { gap: 8px; }
  input,select,textarea { font-size: 16px; }
  .hero h1 { font-size: clamp(38px, 10vw, 54px); }
  .hero-subcopy { font-size: 16px; }
  .hero-actions > * { flex: 1 1 auto; }
  .section-block { padding: 32px 0; }
  .feature-grid,.pricing-grid,.guide-grid,.dashboard-grid,.settings-grid,.account-form-grid,.meta-grid,.docs-layout { grid-template-columns: minmax(0,1fr); }
  .metric-grid,.stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .metric-card,.stat-card { padding: 16px; }
  .metric-card strong,.stat-value { font-size: 26px; }
  .panel-pad,.form-card,.feature-card,.pricing-card { padding: 20px; }
  .page-head { align-items: stretch; gap: 16px; margin-bottom: 24px; }
  .page-head > .button { align-self: flex-start; }
  .quick-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .auth-panel { padding: 24px; margin: 16px auto; }
  .inline-form { display: grid; }
  .inline-form label { min-width: 0; }
  .setting-row:not(.toggle-row) { flex-direction: column; align-items: stretch; }
  .local-first,.start-testing { padding: 24px; }
  .docs-sidebar { position: static; max-height: none; }
  .docs-sidebar-inner { padding: 0 0 20px; border-right: 0; }
  .docs-nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .docs-nav-group { grid-column: 1/-1; }
  .docs-note { display: none; }
  .table-wrap table { min-width: 540px; }
  .table-wrap table.mobile-cards { min-width: 0; }
  .mobile-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mobile-cards tbody,.mobile-cards tr { display: block; }
  .mobile-cards tr { padding: 12px 16px; border-bottom: 1px solid var(--border); }
  .mobile-cards tr:last-child { border-bottom: 0; }
  .mobile-cards td { display: grid; grid-template-columns: minmax(70px, .65fr) minmax(0,1.35fr); gap: 12px; padding: 8px 0; border: 0; }
  .mobile-cards td::before { content: attr(data-label); font-size: 11px; font-weight: 600; color: var(--text-muted); }
  .mobile-cards td > * { min-width: 0; }
  .quota-cell { min-width: 0; }
  .msg-header,.msg-body,.msg-attachments,.msg-audit,.msg-meta-grid,.view-pills { padding: 16px; }
  .msg-body .html-preview { padding: 8px; }
  .site-footer { padding: 24px 16px; gap: 16px; }
  .footer-muted { width: 100%; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print { body { background: white; } .topbar,.site-footer,.skip-link { display: none !important; } main { padding: 0; } }
/* Technical content keeps its fixed-width type; chrome uses Inter. */
code,pre,.mono,td code,.token-once code { font-family: var(--font-mono); }
.auth-panel form + p { margin-top: 24px; margin-bottom: 0; }
.progress-bar span { background: var(--primary); }
.spark-bar { background: linear-gradient(180deg, #d66b42, #b83c22); }
.sparkline { background: var(--bg-muted); }
@media (min-width: 901px) { .nav { position: static; transform: none; width: auto; } }
/* Long endpoint paths and compound form fields must shrink within their grids. */
.endpoint-list { grid-template-columns: minmax(0, 1fr); }
.endpoint-card,.endpoint-card h3 code,.field > span,.address-input { min-width: 0; }
.endpoint-card h3 code { overflow-wrap: anywhere; }
.address-input input { width: 0; }
.address-input button { flex-shrink: 0; }

/* Dispatch identity: editorial type, ruled paper, stamps, and sorting labels. */
:root { --bg-elevated: #fffdf6; --radius: 3px; --radius-control: 4px; --shadow: 0 3px 0 #262a260b; }
body { background-image: radial-gradient(#777d6514 .65px, transparent .65px); background-size: 6px 6px; }
h1,h2,.auth-panel h1 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -.045em; }
h1 { font-size: clamp(36px,4vw,52px); }
h2 { font-size: 28px; }
.eyebrow,.nav-link,.metric-card span,th,.badge,.terminal-bar small { font-family: var(--font-mono); }
.eyebrow { letter-spacing: .09em; color: #686f5c; }
.topbar { background: #262d27; border-bottom: 4px solid #bd4829; }
.brand,.brand:hover { color: #fffdf2; letter-spacing: -.04em; }
.brand-mark { background: #f1e9cf; border-radius: 2px; box-shadow: none; }
.brand-mark::before { background: #a43a22; clip-path: polygon(0 20%,50% 55%,100% 20%,100% 85%,0 85%); }
.nav-link { color: #cbd0bd; font-size: 12px; border-radius: 2px; }
.nav-link.active,.nav-link:hover { color: #fff5dd; background: #414b3e; box-shadow: inset 0 -2px #d9a56d; }
.nav-actions .button-ghost { background: transparent; color: #e8ecdb; border-color: #626c58; }
.button,button,.btn,a.button-ghost,a.button-danger,.tabs a,.view-pills a { border-radius: 3px; }
.button,button,.btn { box-shadow: 0 2px 0 #63291b; }
.button-ghost,a.button-ghost { background: transparent; box-shadow: none; border-color: #aeb5a0; }
.button-ghost:hover,a.button-ghost:hover { background: #e8e9db; }
.card,.auth-panel,.feature-card,.metric-card,.pricing-card,.stat-card,.msg-card,.table-wrap,.inline-form,.settings-section,.account-form,.endpoint-card { border-radius: 3px; background: #fffdf6; }
.page-head { padding-bottom: 24px; border-bottom: 1px solid #a7ad98; }
.metric-grid { gap: 0; border: 1px solid #b8beaa; background: #fffdf6; }
.metric-card { border: 0; border-right: 1px dashed #b8beaa; box-shadow: none; background: transparent; }
.metric-card:last-child { border-right: 0; }
.metric-card strong { font-family: var(--font-mono); font-weight: 500; font-size: 34px; }
.metric-card span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
table { background: #fffdf6; }
th { background: #e9ebde; }
.empty-state { background: repeating-linear-gradient(0deg,#f9f7ef,#f9f7ef 31px,#e5e6d9 32px); border-radius: 2px; }
.empty-state h3 { font-family: Georgia,serif; font-size: 25px; font-weight: 400; }
.auth-panel { border-top: 5px solid #3e4939; position: relative; box-shadow: 8px 8px 0 #dce0cf; }
.auth-panel h1 { font-size: 38px; }
.auth-panel::after { content: ''; display: block; height: 10px; margin-top: 28px; background: repeating-linear-gradient(90deg,#3a4435 0 2px,transparent 2px 5px,#3a4435 5px 6px,transparent 6px 10px); width: 100px; }
.hero { grid-template-columns: 1.05fr 1fr; padding: 58px 0 62px; gap: 50px; }
.hero-eyebrow { background: none; border: 0; border-radius: 0; padding: 0; margin-bottom: 24px; font-size: 10px; }
.hero h1 { font-family: Georgia,serif; font-size: clamp(54px,6.8vw,88px); font-weight: 400; line-height: .99; letter-spacing: -.065em; margin-bottom: 26px; }
.hero h1 span { font-style: italic; color: #a43822; }
.hero-subcopy { font-size: 15px; max-width: 470px; line-height: 1.8; }
.hero-actions { margin-top: 24px; }
.hero-actions .button { padding: 14px 20px; }
.dispatch-visual { padding: 26px; background: #dfe3d1; background-image: linear-gradient(#87937120 1px,transparent 1px),linear-gradient(90deg,#87937120 1px,transparent 1px); background-size: 24px 24px; border: 1px solid #bac2a9; min-width: 0; }
.dispatch-ruler { display: flex; justify-content: space-between; font: 10px var(--font-mono); letter-spacing: .08em; color: #47513c; margin-bottom: 30px; }
.dispatch-ruler > span:last-child { font-size: 24px; line-height: 12px; }
.mail-piece { background: #fff9e9; border: 1px solid #c9c7ae; padding: 24px; transform: rotate(-4deg); position: relative; box-shadow: 8px 12px 0 #5963451c; }
.mail-piece-top { display: flex; justify-content: space-between; font: 13px var(--font-mono); font-weight: 700; }
.mail-piece-top small { font-size: 8px; letter-spacing: .07em; font-weight: 400; }
.postage { width: 65px; height: 72px; background: #b83c22; color: #fff5df; outline: 2px dashed #b83c22; outline-offset: 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; font: 38px Georgia,serif; }
.postage small { font: 8px var(--font-mono); }
.postmark { position: absolute; top: 60px; right: 70px; transform: rotate(16deg); width: 90px; height: 90px; border: 3px double #6d7759; border-radius: 50%; text-align: center; align-content: center; font: 10px var(--font-mono); color: #63704f; letter-spacing: .05em; opacity: .85; }
.postmark strong { font-size: 16px; }
.mail-piece-label { font: 9px var(--font-mono); letter-spacing: .1em; margin: 58px 0 12px; color: #69715a; }
.mail-piece-subject { font: 30px/1.15 Georgia,serif; letter-spacing: -.04em; color: #343a2c; margin-bottom: 28px; }
.mail-piece-subject em { color: #a43a22; }
.mail-piece-bottom { display: flex; justify-content: space-between; gap: 8px; padding-top: 14px; border-top: 1px solid #c6c8b4; font: 8px var(--font-mono); letter-spacing: .05em; }
.dispatch-receipt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 0 0; margin-top: 26px; font: 10px var(--font-mono); color: #3d4931; }
.receipt-dot { width: 7px; height: 7px; border-radius: 50%; background: #677d45; }
.dispatch-strip { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 0; border-top: 1px solid #a6ad97; border-bottom: 1px solid #a6ad97; font: 10px var(--font-mono); letter-spacing: .12em; color: #535e44; }
.section-block { border-top: 0; }
.section-head h2 { font-size: clamp(30px,3.5vw,42px); }
.feature-grid { counter-reset: mail-feature; gap: 0; border-top: 1px solid #b4bba5; border-left: 1px solid #b4bba5; }
.feature-card { counter-increment: mail-feature; border: 0; border-right: 1px solid #b4bba5; border-bottom: 1px solid #b4bba5; box-shadow: none; background: transparent; padding: 26px; }
.feature-card::before { content: counter(mail-feature, decimal-leading-zero); width: auto; height: auto; font: 11px var(--font-mono); background: none; color: #a34328; margin-bottom: 24px; }
.feature-card h3 { font-size: 16px; }
.feature-card:hover { background: #fffdf64d; }
.quickstart-layout { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 24px; align-items: start; }
.hero-terminal { border-radius: 3px; transform: none; box-shadow: 5px 5px 0 #c2c7b5; }
.hero-terminal pre { font-size: 11px; }
.terminal-bar { border-radius: 0; }
.code-block { border-radius: 3px; }
.code-tabs pre { max-height: 450px; }
.start-testing { background: #293127; border: 0; border-radius: 2px; padding: 40px; position: relative; }
.start-testing h2 { color: #f4efdc; font-size: clamp(34px,4vw,52px); max-width: 660px; }
.start-testing .eyebrow { color: #c9d1b9; }
.start-testing .button-ghost { color: #f4efdc; border-color: #69755d; }
.start-testing .button-ghost:hover { background: #46513e; }
.local-first { background: transparent; border: 0; border-top: 1px dashed #959e86; border-radius: 0; box-shadow: none; padding: 30px 0; }
.docs-sidebar-inner { border-right-style: dashed; }
.docs-nav a { border-radius: 2px; }
.docs-nav a.active { background: #e2e6d5; color: #39482c; border-left: 3px solid #6b7b50; }
.docs-note { background: #e9ecdf; border-radius: 2px; box-shadow: none; }
.account-form-grid { border: 0; gap: 20px; }
.site-footer { border-top: 2px solid #46513c; font-family: var(--font-mono); font-size: 11px; }
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0,1fr); gap: 32px; padding-top: 30px; }
  .hero-copy { max-width: 620px; }
  .dispatch-visual { max-width: 560px; width: 100%; }
  .nav { background: #262d27; }
  .nav-toggle { color: #e9ecd9; background: transparent; border-color: #68705c; box-shadow: none; }
  .nav-actions { border-color: #68705c; }
  .nav-toggle:hover { background: #46513c !important; }
  .quickstart-layout { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 640px) {
  .hero h1 { font-size: clamp(49px,12vw,70px); }
  .hero-subcopy { font-size: 14px; }
  .hero-eyebrow { font-size: 9px; }
  .dispatch-visual { padding: 20px; }
  .mail-piece { padding: 18px; }
  .mail-piece-subject { font-size: 27px; }
  .dispatch-strip { font-size: 8px; letter-spacing: .01em; }
  .metric-grid { gap: 0; }
  .metric-card { border-bottom: 1px dashed #b8beaa; }
  .metric-card:nth-child(2n) { border-right: 0; }
  .metric-card strong { font-size: 28px; }
  .feature-card { padding: 22px; }
  .start-testing { padding: 26px; }
  .page-head h1 { font-size: 36px; }
  .docs-sidebar-inner { border-right: 0; }
}
@media (min-width: 901px) { .topbar .mobile-cta { display: none; } }

/* Address creation is a single, focused task. */
.account-create { margin-bottom: 28px; padding: 26px; border-top: 3px solid #526044; }
.account-create-heading { display: flex; gap: 14px; align-items: center; margin-bottom: 24px; }
.account-create-heading h2 { font-size: 26px; margin: 0 0 2px; }
.account-create-heading p { margin: 0; font-size: 13px; }
.account-create-mark { width: 44px; height: 44px; display: grid; place-items: center; flex-shrink: 0; background: #e9ecdf; color: #526044; font: 30px Georgia, serif; border: 1px solid #c3cab5; }
.account-address-fields { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); align-items: end; gap: 12px; }
.account-address-fields input,.account-address-fields select { width: 100%; }
.address-join { height: 44px; display: grid; place-items: center; color: #727c62; font: 24px Georgia, serif; }
.field-help { margin: 10px 0 24px; font-size: 12px; color: var(--text-muted); }
.account-create-footer { border-top: 1px dashed #c3cab5; padding-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.account-create-footer p { margin: 0; max-width: 430px; font-size: 12px; color: var(--text-muted); }
.account-create-footer p > span { color: var(--primary); margin-right: 6px; }
.account-create-footer button { flex-shrink: 0; }
.domain-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px; }
.domain-actions form,.row-more-actions form { margin: 0; }
button.row-action,.row-more summary { background: transparent; color: var(--text); border: 1px solid transparent; box-shadow: none; border-radius: 3px; min-height: 36px; padding: 7px 9px; font: 500 12px/1.4 var(--font-sans); white-space: nowrap; cursor: pointer; }
button.row-action:hover,.row-more summary:hover { background: #e9ecdf; border-color: #c3cab5; color: var(--text); box-shadow: none; }
button.row-action-danger { color: var(--danger); }
button.row-action-danger:hover { color: var(--danger); background: #f8e8e0; border-color: #e0b9a6; }
.row-more summary { display: flex; align-items: center; gap: 6px; list-style: none; }
.row-more summary::-webkit-details-marker { display: none; }
.row-more[open] summary { background: #e9ecdf; }
.row-more-actions { border-left: 2px solid #c3cab5; padding-left: 4px; margin-top: 4px; }
@media (max-width: 640px) {
  .account-create { padding: 20px; }
  .account-address-fields { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .address-join { display: none; }
  .account-create-footer { flex-direction: column; align-items: stretch; gap: 16px; }
  button.row-action,.row-more summary { min-height: 44px; }
}

/* Compact scale: keep the mailroom character without oversized page chrome. */
:root {
  --title-size: 26px;
  --section-title-size: 19px;
  --subtitle-size: 13px;
}
main { padding-top: 22px; padding-bottom: 36px; }
h1,.page-head h1,.auth-panel h1 { font-size: var(--title-size); line-height: 1.2; letter-spacing: -.035em; margin-bottom: 6px; }
h2,.section-head h2,.docs-section h2,.pricing-card h2,.account-create-heading h2 { font-size: var(--section-title-size); line-height: 1.3; margin-bottom: 8px; }
h3,.feature-card h3,.endpoint-card h3 { font-size: 15px; line-height: 1.4; }
.eyebrow { font-size: 10px; margin-bottom: 4px; letter-spacing: .07em; }
.page-head { padding-bottom: 14px; margin-bottom: 16px; gap: 12px; }
.page-head .muted,.auth-panel > .muted,.section-head > p:not(.eyebrow),.docs-content .docs-lead { font-size: var(--subtitle-size); line-height: 1.55; }
.section-head { margin-bottom: 16px; }
.section-head > p:last-child { margin-bottom: 0; }
.section-block { padding: 28px 0; }
.docs-lead { margin-bottom: 20px; }
.docs-section { padding: 20px 0; }
.panel-pad,.form-card,.inline-form,.pricing-card { padding: 16px; }
.inline-form { margin-bottom: 16px; gap: 12px; }
.quick-actions { margin: 14px 0; gap: 8px; }
.dashboard-grid { margin-top: 14px; gap: 12px; }
.metric-grid,.stat-grid { margin-bottom: 14px; }
.metric-card { grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 4px 10px; padding: 12px 16px; }
.metric-card span { font-size: 10px; line-height: 1.4; }
.metric-card strong { grid-column: 2; grid-row: 1; font-size: 22px; line-height: 1.2; letter-spacing: -.04em; }
.metric-card a,.metric-card small { grid-column: 1 / -1; font-size: 12px; line-height: 1.5; }
.metric-card a { min-height: 30px; display: inline-flex; align-items: center; justify-self: start; }
.stat-card { padding: 12px 16px; gap: 4px; }
.stat-value { font-size: 22px; line-height: 1.2; }
.stat-label { font-size: 11px; }
.auth-panel { padding: 24px; margin: 24px auto; }
.auth-panel::after { margin-top: 20px; }
.feature-card { padding: 18px; }
.feature-card::before { margin-bottom: 12px; }
.feature-card h3 { margin-bottom: 8px; }
.empty-state { padding: 24px 18px; }
.empty-state h3,.mail-empty h2 { font-size: 18px; }
.account-create { padding: 18px; margin-bottom: 18px; }
.account-create-heading { gap: 10px; margin-bottom: 16px; }
.account-create-heading h2 { margin-bottom: 2px; }
.account-create-mark { width: 36px; height: 36px; font-size: 24px; }
.field-help { margin-bottom: 16px; }
.account-create-footer { padding-top: 14px; gap: 16px; }
.msg-header { padding: 14px 18px; }
.msg-subject { font-size: 20px; }
.msg-title-row { margin-bottom: 10px; }
.hero { padding: 28px 0 36px; gap: 32px; }
.hero h1 { font-size: clamp(32px,3.6vw,46px); line-height: 1.06; letter-spacing: -.045em; margin-bottom: 16px; }
.hero-eyebrow { margin-bottom: 14px; }
.hero-subcopy { font-size: 14px; line-height: 1.65; }
.hero-actions { margin-top: 16px; gap: 10px; }
.hero-actions .button { padding: 10px 16px; }
.dispatch-visual { padding: 20px; }
.dispatch-ruler { margin-bottom: 18px; }
.mail-piece-label { margin-top: 34px; }
.mail-piece-subject { font-size: 24px; margin-bottom: 18px; }
.dispatch-receipt { margin-top: 18px; }
.dispatch-strip { padding: 12px 0; }
.start-testing { padding: 24px; margin: 16px 0; }
.start-testing h2 { font-size: 26px; line-height: 1.2; }
.local-first { padding: 22px 0; margin: 16px 0; }
.site-footer { padding-top: 16px; padding-bottom: 16px; }
@media (max-width: 640px) {
  :root { --title-size: 23px; --section-title-size: 18px; }
  main { padding-top: 16px; }
  .page-head { padding-bottom: 12px; margin-bottom: 14px; gap: 10px; }
  .metric-card { padding: 10px 12px; gap: 4px 6px; }
  .metric-card strong { font-size: 20px; }
  .metric-card a { min-height: 44px; }
  .metric-card small { min-height: 44px; display: flex; align-items: center; }
  .stat-card { padding: 12px; }
  .stat-value { font-size: 20px; }
  .section-block { padding: 22px 0; }
  .hero { padding: 16px 0 24px; gap: 24px; }
  .hero h1 { font-size: 34px; }
  .hero-subcopy { font-size: 13px; }
  .account-create,.feature-card,.pricing-card { padding: 16px; }
  .account-create-heading { margin-bottom: 14px; }
  .start-testing { padding: 20px; }
  .start-testing h2 { font-size: 23px; }
}

/* Small, shared workspace utilities. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.list-search { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 16px 0 12px; }
.list-search input { flex: 1 1 220px; max-width: 440px; }
.copy-action { margin-left: 6px; }
.activity-time { display: block; font-size: 11px; line-height: 1.5; margin-top: 4px; color: var(--text-muted); }
.connection-settings { margin: 0 0 16px; border: 1px solid var(--border); background: #f9f7ef; padding: 0 14px; }
.connection-settings summary { min-height: 44px; align-content: center; cursor: pointer; font-size: 12px; font-weight: 600; }
.connection-values { display: flex; flex-wrap: wrap; gap: 12px 28px; padding-bottom: 10px; }
.connection-values > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.connection-values code { overflow-wrap: anywhere; }
.credential-panel { border: 1px solid #bac6a6; border-left: 3px solid #526044; background: #f1f5e9; padding: 16px; margin-bottom: 18px; }
.credential-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.credential-heading h2 { font-size: 18px; margin-bottom: 4px; }
.credential-heading p { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
.credential-values { display: grid; gap: 8px; }
.credential-values > div { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.credential-values > div > span { min-width: 135px; font-size: 12px; }
.credential-values code { overflow-wrap: anywhere; user-select: all; }
.selection-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; background: #e9ecdf; border: 1px solid var(--border); padding: 6px 12px; margin-bottom: 8px; }
[data-selection-count] { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
@media (max-width: 640px) {
 .list-search input { max-width: none; min-width: 0; }
 .credential-values > div > span { width: 100%; }
 .credential-values code { min-width: 0; flex: 1; }
 .mobile-cards td:has(> input[type="checkbox"]) { display: flex; justify-content: flex-end; }
 .mobile-cards td:has(> input[type="checkbox"])::before { content: 'Select address'; margin-right: auto; }
 .mobile-cards thead:has([data-select-all]) { position: static; width: auto; height: auto; clip-path: none; display: block; }
 .mobile-cards thead:has([data-select-all]) tr { padding: 8px 16px; }
 .mobile-cards thead:has([data-select-all]) th { display: none; }
 .mobile-cards thead:has([data-select-all]) th:has([data-select-all]) { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; border: 0; }
 .mobile-cards th:has([data-select-all])::before { content: 'Select all listed addresses'; }
}