/* ==========================================================================
   mailsocket — V1 "Terminal" stylesheet
   Tokens match docs/design/v1-terminal.html. Fonts are self-hosted OFL 1.1.
   ========================================================================== */

/* --- self-hosted fonts (SIL OFL 1.1) --- */
@font-face{font-family:"JetBrains Mono";src:url("fonts/JetBrainsMono-Regular.4e0581ae831b.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/JetBrainsMono-Medium.ef0a72739771.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/JetBrainsMono-Bold.f3651b6798df.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/JetBrainsMono-ExtraBold.b9bd9ef78534.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/Inter-Regular.3875f8357497.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/Inter-Medium.7b7f3cfa2944.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/Inter-SemiBold.b72fa2728a8e.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* --- tokens --- */
:root{
  color-scheme:dark;
  --bg:#0a0e0d; --panel:#0f1513; --border:#1d2825; --text:#d7e4de;
  --muted:#7d918a; --accent:#4ade80; --accent-dim:#2b6e47; --amber:#e8b84b;
  --danger:#ff7575;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* --- reset / base --- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:#0a0e0d}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:15px;line-height:1.6;
  background-image:radial-gradient(circle at 15% -10%,rgba(74,222,128,.06),transparent 40%);
}
h1,h2,h3,h4,h5,h6{font-family:var(--mono);color:var(--text);line-height:1.2}
a{color:var(--accent)}
a:hover{color:var(--text)}
img{max-width:100%}
code,pre,kbd{font-family:var(--mono)}

/* keyboard focus ring (a11y) — visible on the dark #0a0e0d bg */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ==========================================================================
   Shared brand / nav / footer partials
   ========================================================================== */
.brand{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-weight:800;font-size:17px;
  color:var(--text);text-decoration:none;letter-spacing:-.02em;white-space:nowrap;
}
.brand:hover{color:var(--text)}
.brand-mark{width:22px;height:22px;flex:0 0 auto}

.site-header{position:relative}
.site-nav{
  display:flex;align-items:center;gap:28px;padding:22px 0;
  border-bottom:1px solid var(--border);
}
.site-nav .links{display:flex;gap:22px;margin-left:auto;align-items:center}
.nav-link{color:var(--muted);text-decoration:none;font-size:14px;font-weight:500;font-family:var(--sans)}
.nav-link:hover{color:var(--text)}
.nav-link[aria-current="page"]{color:var(--accent)}
.signin{
  font-family:var(--mono);font-size:13px;font-weight:600;
  border:1px solid var(--border);padding:7px 14px;border-radius:6px;
  color:var(--text);text-decoration:none;
}
.signin:hover{border-color:var(--accent-dim);color:var(--text)}

.site-footer{border-top:1px solid var(--border);padding:36px 0 40px;color:var(--muted);font-size:13px}
code.nowrap{white-space:nowrap}
.footer-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.footer-col{display:flex;flex-direction:column;gap:9px}
.footer-col h2{margin:0 0 4px;color:var(--text);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.site-footer a{color:var(--muted);text-decoration:none}
.site-footer a:hover{color:var(--text)}
.site-footer .copyright{margin:28px 0 0;font-family:var(--mono);font-size:12px}
@media(max-width:640px){.footer-cols{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}}

/* blinking cursor used in the hero H1 */
.cursor{color:var(--accent);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ==========================================================================
   Dashboard app shell (sidebar layout)
   ========================================================================== */
.layout{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:100vh}
/* QA-DASH #1: grid children default to min-width:auto, so a wide table or an
   inline form stretched the column past the viewport. Let them shrink; wide
   tables scroll inside .table-wrap instead of the page. */
.layout>.sidebar,.layout>.content{min-width:0}
/* UI-LAYOUT #2: the sidebar/content divider is drawn on the grid itself so it
   always runs the full page height, even though the sticky rail is 100vh. */
.layout{background:linear-gradient(var(--border),var(--border)) 219px 0/1px 100% no-repeat}
.content code{overflow-wrap:anywhere}
.sidebar{
  border-right:1px solid var(--border);padding:22px 12px 16px;
  display:flex;flex-direction:column;gap:22px;background:var(--bg);
  /* UI-LAYOUT #2: fixed-width, sticky, full-height rail; scrolls on its own
     if the viewport is shorter than the nav. */
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.sidebar .brand{font-size:16px;padding:2px 10px;overflow:hidden;text-overflow:ellipsis}
.sidebar nav{display:grid;gap:2px}
.sidebar nav a,.link-button{
  color:var(--muted);padding:8px 10px;border-radius:7px;text-decoration:none;
  background:none;border:0;cursor:pointer;text-align:left;font-size:14px;font-family:var(--sans);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sidebar nav a:hover{background:var(--panel);color:var(--text)}
.sidebar nav a[aria-current="page"]{background:var(--panel);color:var(--accent);box-shadow:inset 2px 0 0 var(--accent)}
.sidebar form{margin-top:auto}
.sidebar>form:last-child{border-top:1px solid var(--border);padding-top:10px}
.sidebar>form:last-child .link-button{width:100%}
/* UI-LAYOUT #1: fluid content area — no max-width cap, so wide screens use the
   width. Long prose is capped per-element below instead. */
.content{padding:32px 40px 48px;width:100%}
.content:focus{outline:none}
/* QA-DASH #10: skip link — first focusable element, off-screen until focused */
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--accent);color:#052012;padding:8px 12px;border-radius:7px;font-family:var(--mono);font-size:13px;font-weight:700;text-decoration:none}
.skip-link:focus,.skip-link:focus-visible{top:12px}
/* QA-DASH #7: detected OTP, same look in the messages list and on the detail page */
code.otp{display:inline-block;font-family:var(--mono);font-weight:700;font-size:14px;letter-spacing:.06em;color:var(--accent);background:rgba(74,222,128,.10);border:1px solid var(--accent-dim);border-radius:6px;padding:2px 7px;white-space:nowrap}

.page-head,.section-head{display:flex;justify-content:space-between;align-items:center;gap:20px}
.page-head{margin-bottom:22px}
.page-head h1{font-size:26px;margin:0}
.page-head p{color:var(--muted);margin:4px 0 0;font-family:var(--sans)}
.section-head h2,.card h2{font-size:15px;margin:0 0 12px}
.section-head h2{margin:0}

.button,button{
  border:1px solid var(--border);background:var(--panel);color:var(--text);
  border-radius:7px;padding:7px 12px;cursor:pointer;text-decoration:none;
  font-family:var(--mono);font-size:13px;font-weight:600;
}
button:hover,.button:hover{border-color:var(--accent-dim)}
.button{background:var(--accent);border-color:var(--accent);color:#052012}
.button:hover{background:#5ef08e;color:#052012}
.button.secondary{background:var(--panel);border-color:var(--border);color:var(--text)}
.danger{color:var(--danger)}

.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:14px}
.stats.stats-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--panel);border:1px solid var(--border);border-radius:11px;padding:18px;margin-bottom:14px}
.stats .card{display:grid;gap:6px;align-content:start;margin-bottom:0;min-width:0}
.stats span,.stats small{color:var(--muted);font-family:var(--sans)}
.stats strong{font-size:24px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stats strong small{font-size:15px;font-weight:500}
.onboarding{border:1px dashed var(--accent);border-radius:11px;padding:22px}

.table-wrap{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-family:var(--sans)}
th{text-align:left;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-family:var(--mono);font-weight:600}
th,td{padding:11px 9px;border-bottom:1px solid var(--border);vertical-align:middle}
td a{color:var(--accent)}
td a:hover{color:var(--text)}
.empty{text-align:center;color:var(--muted)}
input,select{
  background:#0a0f0d;color:var(--text);border:1px solid var(--border);
  border-radius:7px;padding:8px 10px;font-family:var(--sans);font-size:14px;
}
input:focus,select:focus{outline:none;border-color:var(--accent-dim)}
input:focus-visible,select:focus-visible{box-shadow:0 0 0 2px var(--accent)}
.inline-form,.actions{display:flex;gap:7px;align-items:center}
.actions form{margin:0}
.flash{background:rgba(74,222,128,.08);border:1px solid var(--accent-dim);padding:9px 12px;border-radius:7px;margin-bottom:12px}
.status{display:inline-block;border-radius:99px;background:var(--panel);color:var(--muted);padding:2px 8px;font-size:12px;font-family:var(--mono)}
.status.on{background:var(--accent-dim);color:var(--accent)}
.status.warn{color:var(--amber)}
.status.err{color:var(--danger)}
.filter{margin-bottom:14px;display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.filter label{display:grid;gap:5px;color:var(--muted);font-size:12px;font-family:var(--sans)}
.filter label.checkbox{display:flex;align-items:center;gap:6px}
.filter label.checkbox input{width:auto;margin:0}
.more{display:inline-block}
.back{color:var(--muted);text-decoration:none;font-family:var(--mono);font-size:13px}
.back:hover{color:var(--accent)}
.detail-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:14px}
.metadata dl{display:grid;grid-template-columns:150px 1fr;gap:8px;margin:0}
.metadata dt{color:var(--muted);font-family:var(--mono);font-size:12px}
.metadata dd{margin:0;overflow-wrap:anywhere;font-family:var(--sans)}
pre{white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--mono);font-size:12px;line-height:1.55;margin:0;color:var(--text)}
.preview{width:100%;min-height:280px;background:#fff;border:1px solid var(--border);border-radius:8px}
.copy{font-size:12px;padding:4px 7px}
/* auto-injected copy button on code blocks (app.js addCopyButtons) */
.code-wrap{position:relative}
.code-wrap>.code-copy{position:absolute;top:8px;right:8px;z-index:2;opacity:0;transition:opacity .12s ease;font-family:var(--mono);letter-spacing:.03em;text-transform:uppercase;font-size:10px;font-weight:600;padding:4px 8px;border:1px solid var(--border);border-radius:6px;background:var(--panel);color:var(--muted);cursor:pointer}
.code-wrap:hover>.code-copy,.code-wrap>.code-copy:focus-visible{opacity:1}
.code-wrap>.code-copy:hover{color:var(--text);border-color:var(--accent-dim)}
.code-wrap>.code-copy.is-copied{color:var(--accent);border-color:var(--accent)}
.code-wrap>pre,.docs-code-block .code-wrap>pre,.docs-response-card .code-wrap>pre,.snippet .code-wrap>pre,.landing-code-card .code-wrap>pre{padding-right:64px}
@media (hover:none){.code-wrap>.code-copy{opacity:1}}

/* branded error pages (404 / 403) */
.error-shell{min-height:100vh;display:flex;align-items:center;justify-content:center}
.error-page{max-width:560px;padding:40px 24px;text-align:left}
.error-page .brand{display:inline-flex;align-items:center;gap:9px;margin-bottom:44px}
.error-code{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-family:var(--mono);margin:0 0 10px}
.error-page h1{font-size:30px;line-height:1.2;margin:0 0 14px}
.error-lead{color:var(--muted);line-height:1.6;margin:0 0 28px;font-size:15px}
.error-actions{display:flex;gap:12px;flex-wrap:wrap}

/* ==========================================================================
   UI-LAYOUT pass: app-shell-only polish. Every rule is scoped to .content or
   an app-only class (.data-table, .tabs, .kv-grid, ...) so the public/docs
   pages that share app.css (pricing uses .table-wrap, try.html uses .status,
   auth pages use button) are untouched.
   ========================================================================== */
.content .page-head p,.content .usage-note,.content .usage-warning,.content .hint{max-width:80ch}
.content .muted{color:var(--muted)}
.content .hint{color:var(--muted);font-size:13px;margin:10px 0 0;font-family:var(--sans)}
.content .page-head .usage-count{white-space:nowrap}
/* r2: quota counter sits on the h1 baseline (flex baseline = first line of the title block) */
.content .page-head:has(>.usage-count){align-items:baseline}
.content .page-head>.usage-count{font-size:12.5px}
.content .button,.content button{white-space:nowrap;line-height:1.4}
.content .button{display:inline-flex;align-items:center;justify-content:center}
.content .button.danger{background:transparent;border-color:var(--danger);color:var(--danger)}
.content .button.danger:hover{background:rgba(255,117,117,.10);color:var(--danger)}
.content button.link{padding:4px 9px;font-size:12px;min-width:92px}
.content .status{white-space:nowrap;border:1px solid var(--border);line-height:1.5}
.content .status.on{border-color:var(--accent-dim)}
.content .status.warn{background:rgba(232,184,75,.10);border-color:rgba(232,184,75,.35)}
.content .status.err{background:rgba(255,117,117,.10);border-color:rgba(255,117,117,.35)}
.content .status.public{color:var(--amber);border-color:rgba(232,184,75,.35);cursor:help}
.content label.checkbox{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;font-family:var(--sans);white-space:nowrap}
.content label.checkbox input{margin:0;accent-color:var(--accent);width:16px;height:16px}
.min0{min-width:0}
.nowrap{white-space:nowrap}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.num{font-variant-numeric:tabular-nums}
.content code.addr{font-size:13px;white-space:nowrap}

/* --- data tables (app pages only) ---
   Auto layout + nowrap on short columns (timestamps, ids, pills, buttons) so
   they size to content; long free-text columns (subject, sender, error) use
   the max-width:0 truncate trick so they absorb the remaining width and
   ellipsize (full value in the title tooltip) instead of wrapping to 3-4
   lines. Each table has a min-width so on phones it scrolls inside
   .table-wrap rather than crushing the truncating columns to nothing. */
.data-table{width:100%}
.data-table th{white-space:nowrap}
.data-table td{font-size:14px}
.data-table td.truncate{max-width:0}
.data-table .num-col{text-align:right;width:1%;white-space:nowrap}
.data-table td.actions{display:table-cell;white-space:nowrap;width:1%}
.data-table td.actions form{display:inline-block;margin:0 6px 0 0;vertical-align:middle}
.data-table td.actions form:last-child{margin-right:0}
.data-table tbody tr:last-child td{border-bottom:0}
.data-table tbody tr:hover td{background:rgba(255,255,255,.015)}
.card>.table-wrap:only-child,.card>.table-wrap:last-child{margin:-6px -9px -8px}
.messages-table{min-width:900px}
.messages-table .col-from{width:18%}
.messages-table .col-inbox{width:1%}
.messages-table td.inbox-cell{white-space:normal}
.messages-table .col-otp,.messages-table .col-time,.messages-table .col-action{width:1%}
.messages-table tr:not(.unread) td:first-child{color:var(--muted)}
.messages-table tr.unread td:nth-child(-n+2){font-weight:600}
.groups-table .col-count{width:1%}
.inboxes-table{min-width:900px}
.inboxes-table .col-label{width:230px}
.content .data-table input{text-overflow:ellipsis}
.content td>.status+.status{margin-left:4px}
.inboxes-table .col-date,.inboxes-table .col-status,.inboxes-table .col-actions{width:1%}
.label-form{flex-wrap:nowrap}
.label-form input{flex:1 1 auto;width:100%;min-width:0}
/* r2: two-line address (partials/address.html) — local-part on line 1 wraps
   at -/_ instead of ellipsis, @domain on line 2 muted+smaller, so the domain
   (shared vs custom) is NEVER clipped. Full address stays in title + Copy. */
.addr2{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.addr2-code{display:flex;flex-direction:column;min-width:0;white-space:normal}
.addr2-local{overflow-wrap:anywhere;word-break:normal;color:var(--text)}
/* small-polish: the local-part carries <wbr> after - _ . (wbr_breaks filter);
   with word-break:normal the browser wraps at those boundaries and only falls
   back to overflow-wrap:anywhere when a single segment exceeds the line. */
.addr2-label{color:inherit}
.addr2-local{font-size:13px}
.addr2-domain{color:var(--muted);font-size:11.5px;white-space:nowrap;margin-top:1px}
/* r3: domain line contrast — #93a69f is 7.2:1 on --panel (was --muted 5.5:1, read dim at 11.5px) */
.addr2-domain{color:#93a69f;font-size:12px}
/* label line (messages Inbox col): contributes 0 intrinsic width, so the nowrap
   @domain sizes the column and the label ellipsizes inside it (title = full address) */
.addr2-label{display:block;width:0;min-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.addr2-label+.addr2-domain{font-family:var(--mono)}
.addr-cell{display:flex;align-items:center;gap:10px;min-width:0}
.addr-cell .addr2{flex:1 1 auto}
.addr-cell .copy{flex:0 0 auto}
.inboxes-table td.col-address{min-width:220px}
.inboxes-table td.status-cell .status{vertical-align:middle}
.inboxes-table td.actions{text-align:left}
.inboxes-table td.actions .connect-action{display:inline-block;vertical-align:middle;margin-right:6px}
.inboxes-table td.actions .connect-action>summary{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--accent-dim);border-radius:7px;padding:7px 12px;line-height:1.4;font-size:13px;white-space:nowrap}
.inboxes-table td.actions .connect-action>summary:hover{border-color:var(--accent)}
.inboxes-table td.actions .connect-action[open]{display:block;margin:0 0 8px}
.inboxes-table td.actions .connect-action[open]>summary{display:inline-flex}
.inboxes-table .connect-action .connect-body{width:min(520px,70vw);min-width:0;box-sizing:border-box}
.inboxes-table .connect-action .connect-body pre{overflow-x:auto;max-width:100%}
.inboxes-table .connect-action .connect-body p code{white-space:normal;overflow-wrap:anywhere}
/* >=1280px the inboxes table fits its card (min-width 900), so the wrapper can
   let the Connect body overflow: it opens as a right-aligned popover over the
   rows below instead of stretching the Actions column. Narrower: in-flow
   fallback above (table scrolls inside .table-wrap as everywhere else). */
@media(min-width:1280px){
  #inbox-rows>.table-wrap{overflow:visible}
  .inboxes-table td.actions .connect-action{position:relative}
  .inboxes-table td.actions .connect-action[open]{display:inline-block;margin:0 6px 0 0}
  .inboxes-table .connect-action .connect-body{position:absolute;right:0;top:calc(100% + 6px);z-index:20;width:560px;margin:0;text-align:left;box-shadow:0 18px 40px rgba(0,0,0,.55)}
  .inboxes-table tr:has(.connect-action[open]) td{vertical-align:middle}
}
.inboxes-table td.actions button.toggle{min-width:88px}
.inboxes-table tr:has(.connect-action[open]) td{vertical-align:top}
.connect-body{white-space:normal}
/* r3: column balance at 1280. Label + Address get the width (label input shows
   ~24 chars, address >=280px), taken from Created (nowrap, 96px), Status
   (PUBLIC stacks under the state pill) and a compact Actions group. */
.inboxes-table th,.inboxes-table td{padding-left:6px;padding-right:6px}
.inboxes-table .col-label{width:auto;min-width:243px}
.inboxes-table td.col-label{min-width:243px}
.inboxes-table .label-form{gap:5px;align-items:stretch}
.inboxes-table .label-form input{font-size:13.5px;padding:6px 7px}
.inboxes-table .label-form button.btn-sm{flex:0 0 auto;padding:0 7px;font-size:12px}
.inboxes-table .col-address{min-width:280px}
.inboxes-table td.col-address{min-width:280px}
.inboxes-table .col-date{width:96px;min-width:0;box-sizing:border-box}
.inboxes-table td.col-date{font-size:13px}
.inboxes-table td.status-cell{white-space:normal}
.inboxes-table td.status-cell .status{display:block;width:max-content}
.inboxes-table td.status-cell .status+.status{margin:4px 0 0}
/* local-part: one line when it fits; when it can't, break ONLY at the <wbr>
   the wbr_breaks filter puts after - _ . (small-polish brief; replaces the
   earlier break-all, which split words like "chec|kout"). overflow-wrap:
   anywhere is the last resort for one segment wider than the cell. The @ is the only
   structural split (domain on its own line). */
.inboxes-table .addr2-local{word-break:normal;overflow-wrap:anywhere}
/* Copy sits on the first line of the address, not the block's middle; the
   whole row is baseline-aligned so label/Save, status, date and actions all
   share that first line too (no mixed top/center alignment). */
.inboxes-table tbody td{vertical-align:baseline}
.inboxes-table .addr-cell{align-items:baseline;gap:8px}
/* wide screens: cap the address+Copy group (~52-char local-part fits on one
   line) so Copy stays next to the address instead of drifting to the far
   edge of a 700px+ column; Copy keeps one x per width. */
.inboxes-table .addr-cell{max-width:480px}
/* compact actions */
.inboxes-table td.actions form{margin-right:5px}
.inboxes-table td.actions .connect-action{margin-right:5px}
.inboxes-table td.actions .connect-action>summary,
.inboxes-table td.actions button{padding:5px 9px;font-size:12.5px}
.inboxes-table td.actions button.toggle{min-width:76px}
/* disabled inbox: label + address + date drop to --muted (5.5:1 on --panel,
   still AA; opacity .6 would take the domain line to 3.4:1), Connect secondary */
.inboxes-table tr.is-disabled .label-form input,
.inboxes-table tr.is-disabled .addr2-local,
.inboxes-table tr.is-disabled .addr2-domain,
.inboxes-table tr.is-disabled .col-date{color:var(--muted)}
.inboxes-table tr.is-disabled .label-form button,
.inboxes-table tr.is-disabled .addr-cell .copy{color:var(--muted)}
.inboxes-table td.actions .connect-action.secondary>summary{color:var(--text);border-color:var(--border);font-weight:500}
.inboxes-table td.actions .connect-action.secondary>summary:hover{border-color:var(--accent-dim)}
.keys-table{min-width:860px}
.keys-table .col-time,.keys-table .col-actions{width:1%}
.domains-table{min-width:760px}
.domains-table .col-error{width:45%}
.domains-table td.wrap-error{white-space:normal;overflow-wrap:anywhere;min-width:240px;font-size:13px}
.domains-table .col-time,.domains-table .col-actions{width:1%}
.domains-table tr:has(+ .detail-row) td{border-bottom:0}
.domains-table .detail-row td{padding-top:0}
.content .col-time{width:1%}

/* --- toolbar / segmented tabs (messages) --- */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.tabs{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--border);border-radius:8px;background:var(--panel)}
.tabs a{padding:5px 12px;border-radius:6px;color:var(--muted);text-decoration:none;font-family:var(--mono);font-size:12.5px;font-weight:600;white-space:nowrap}
.tabs a:hover{color:var(--text)}
.tabs a.active{background:var(--bg);color:var(--accent);box-shadow:0 0 0 1px var(--border)}
.content .filter.card{padding:14px;gap:12px}
.content .filter select,.content .filter input[type=text]{min-width:170px;height:36px}
.content .filter .button{height:36px}
.content .filter label.checkbox{height:36px}

/* --- create / inline forms --- */
.content .create-form{flex-wrap:wrap;gap:10px}
.content .create-form input{flex:1 1 220px;min-width:0}
.content .form-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.content .form-row input{flex:1 1 200px;min-width:0}
.content .inline-form input,.content .inline-form .button,.content .form-row .button,.content .webhook-form .button{min-height:36px}

/* --- webhooks: cards tile across wide screens --- */
#webhook-rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,520px),1fr));gap:14px;align-items:stretch}
#webhook-rows>.card{margin:0;min-width:0}
#webhook-rows>.flash{grid-column:1/-1;margin:0}
.webhook-head{align-items:flex-start;margin-bottom:14px}
.webhook-head h2{margin:0 0 3px}
.addr-line{margin:0;min-width:0}
.addr-line .addr2-local{color:var(--muted);font-size:12.5px}
.webhook-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.webhook-form input[type=url]{flex:1 1 280px;min-width:0}
.webhook-meta{display:flex;justify-content:space-between;align-items:center;gap:10px 16px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.webhook-meta p{margin:0;font-size:13px;min-width:0;overflow-wrap:anywhere}
.webhook-meta .actions{flex-wrap:wrap;gap:8px}
.webhook-meta .inline-form{margin:0}

/* --- team rows --- */
.row-list{list-style:none;margin:0;padding:0}
.row-list li{display:flex;align-items:center;gap:16px;padding:10px 0;border-bottom:1px solid var(--border);font-family:var(--sans);min-width:0}
.row-list li:last-child{border-bottom:0}
.row-list li>.truncate{flex:1 1 auto;min-width:0}
.row-list form{margin:0}

/* --- settings key/value tiles (replaces card-in-card stats) --- */
.kv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:0 0 12px}
.kv-grid>div{background:#060a09;border:1px solid var(--border);border-radius:9px;padding:12px 14px;min-width:0}
.kv-grid dt{color:var(--muted);font-size:12px;font-family:var(--sans);margin-bottom:4px}
.kv-grid dd{margin:0;min-width:0;font-family:var(--sans);display:flex;align-items:center;gap:8px}
.kv-grid .addr{overflow:hidden;text-overflow:ellipsis;min-width:0}

/* --- two-up section grid (usage, fleet) --- */
.split-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
.split-2>.card{min-width:0}
.usage-grid.usage-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.usage-grid strong,.usage-count{font-variant-numeric:tabular-nums}

/* --- message detail --- */
.content .msg-title{font-size:21px;line-height:1.3;overflow-wrap:anywhere;text-wrap:balance}
.detail-grid{align-items:start}
.detail-grid>*{min-width:0}
.metadata dl{grid-template-columns:150px minmax(0,1fr);align-items:baseline}
#normalized-json{white-space:pre;overflow:auto;max-height:75vh;overflow-wrap:normal}

@media(max-width:1180px){
  .stats.stats-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .detail-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:1000px){
  .split-2,.usage-grid.usage-grid-3{grid-template-columns:minmax(0,1fr)}
}

@media(max-width:800px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .layout{background:none}
  .sidebar{border-right:0;border-bottom:1px solid var(--border);padding:12px 14px;position:static;height:auto;overflow:visible;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px}
  .sidebar>form:last-child{margin:0 0 0 auto;border-top:0;padding-top:0;order:2}
  .sidebar>form:last-child .link-button{width:auto}
  .sidebar nav{order:3;flex-basis:100%;flex-wrap:nowrap;overflow-x:auto;gap:4px;padding-bottom:2px;scrollbar-width:thin}
  .sidebar nav a{flex:0 0 auto}
  .sidebar nav{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent);padding-right:24px}
  .sidebar nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--accent)}
  .account-switcher{order:4;flex-basis:100%}
  .content>.card>.inline-form,.content>.card>form>.inline-form,.account-switcher .inline-form{flex-wrap:wrap}
  .content>.card>.inline-form input{flex:1 1 160px;min-width:0}
  .page-head,.section-head{flex-wrap:wrap}
  .sidebar nav{display:flex}
  .content{padding:20px 16px 32px}
  .stats,.stats.stats-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .detail-grid{grid-template-columns:1fr}
  .stats strong{font-size:20px}
  .content .page-head .usage-count{white-space:normal}
  .inboxes-table td:first-child{min-width:190px}
  /* r3: phones scroll the table inside .table-wrap; keep the narrower label
     so more of the address is in the first viewport */
  .inboxes-table .col-label,.inboxes-table td.col-label{min-width:190px}
  .inboxes-table .col-address,.inboxes-table td.col-address{min-width:240px}
  .metadata dl{grid-template-columns:1fr}
  .metadata dd{margin-bottom:8px}
}

@media(max-width:520px){
  .stats,.stats.stats-4{grid-template-columns:minmax(0,1fr);gap:8px}
  .stats .card{padding:12px 14px;gap:2px}
  .content .page-head h1{font-size:22px}
}

/* ==========================================================================
   Auth pages (login/register/verify/reset)
   ========================================================================== */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(1200px 600px at 50% -10%,rgba(74,222,128,.08) 0%,var(--bg) 55%)}
.auth-card{width:100%;max-width:400px;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:32px 30px;box-shadow:0 20px 60px -30px rgba(0,0,0,.8)}
.auth-brand{display:flex;justify-content:center;margin-bottom:4px}
.auth-brand .brand{font-size:20px}
.auth-tag{color:var(--muted);text-align:center;font-size:12.5px;margin:0 0 24px;font-family:var(--sans)}
.auth-card h1{font-size:19px;margin:0 0 20px;text-align:center}
.auth-card form p{margin:0 0 15px;font-family:var(--sans)}
.auth-card label{display:block;color:var(--muted);font-size:12.5px;margin-bottom:6px;font-family:var(--sans)}
.auth-card input{width:100%}
.auth-card ul.errorlist{list-style:none;padding:0;margin:0 0 14px;color:var(--danger);font-size:12.5px;font-family:var(--sans)}
.auth-card .field-errors{display:block;margin-top:5px;color:var(--danger);font-size:12.5px;font-family:var(--sans)}
.auth-card .field-error{display:block}
.auth-card .has-error input{border-color:var(--danger)}
.auth-card .helptext{display:block;color:var(--muted);font-size:11.5px;margin-top:5px;font-family:var(--sans)}
.auth-submit{width:100%;margin-top:6px;padding:10px;font-size:14px}
.auth-links{margin-top:20px;text-align:center;font-size:13px;color:var(--muted);display:grid;gap:6px;font-family:var(--sans)}
.auth-links a{color:var(--accent);text-decoration:none}
.auth-links a:hover{text-decoration:underline}
.auth-msg{max-width:400px;text-align:center}
.auth-msg .big{font-size:15px;color:var(--text);margin:0 0 18px;line-height:1.55;font-family:var(--sans)}

/* ==========================================================================
   Public landing page
   ========================================================================== */
.landing-body{min-height:100vh;color:var(--text)}
.landing-shell{width:min(100% - 40px,1000px);margin:0 auto}

.landing-hero{text-align:center;padding:112px 20px 88px}
.landing-eyebrow{
  display:block;margin:0 0 14px;color:var(--accent);
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
}
/* keep H1 as single text node for test_root_renders_landing_...; 2-line break is cosmetic */
.landing-hero h1{max-width:17ch;margin:0 auto;font-size:clamp(38px,6vw,60px);line-height:1.05;letter-spacing:-.04em;font-weight:800}
.landing-lead{max-width:660px;margin:24px auto 0;color:var(--muted);font-size:18px;line-height:1.65;font-family:var(--sans)}
.landing-actions{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:34px;flex-wrap:wrap}
.landing-button{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:12px 20px;border:1px solid var(--border);border-radius:7px;
  font-family:var(--mono);font-size:14px;font-weight:700;text-decoration:none;
  transition:transform .15s ease,filter .15s ease;
}
.landing-button:hover{transform:translateY(-1px);filter:brightness(1.08)}
.landing-button-primary{background:var(--accent);border-color:var(--accent);color:#052012}
.landing-button-primary:hover{background:#5ef08e;color:#052012}
.landing-docs{color:var(--text);font-weight:600;text-decoration:none;font-family:var(--mono);font-size:14px}
.landing-docs:hover{color:var(--accent)}
.landing-docs span{color:var(--accent);margin-left:4px}

.landing-features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:112px}
.landing-feature-card{min-width:0;padding:24px;background:var(--panel);border:1px solid var(--border);border-radius:12px}
.landing-feature-icon{
  display:grid;place-items:center;width:38px;height:38px;margin-bottom:16px;
  border:1px solid var(--accent-dim);border-radius:9px;background:var(--panel);color:var(--accent);
}
.landing-feature-icon .icon{width:20px;height:20px}
.landing-feature-card h2{margin:0 0 8px;font-size:15px}
.landing-feature-card p{margin:0;color:var(--muted);line-height:1.65;font-size:14px;font-family:var(--sans)}

.landing-code-section{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:54px;margin-bottom:112px}
.landing-section-copy h2{margin:0 0 18px;font-size:32px;line-height:1.18;letter-spacing:-.025em}
.landing-section-copy>p:last-child{margin:0;color:var(--muted);font-size:16px;line-height:1.65;font-family:var(--sans)}
.landing-section-copy code{color:var(--text);font-size:13px}
.landing-code-card{min-width:0;overflow:hidden;padding:0;background:#060a09;border:1px solid var(--border);border-radius:14px;box-shadow:0 24px 70px -38px rgba(0,0,0,.9)}
.landing-code-label{
  display:block;padding:0 22px 10px;color:var(--muted);
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
}
/* code-window title bars (traffic lights + filename) */
.landing-code-card>.landing-code-label,
.docs-code-block>.landing-code-label,
.docs-response-card>.landing-code-label,
.snippet-label{
  display:flex;align-items:center;padding:12px 18px;border-bottom:1px solid var(--border);
}
.landing-code-card>.landing-code-label::before,
.docs-code-block>.landing-code-label::before,
.docs-response-card>.landing-code-label::before,
.snippet-label::before{
  content:"";width:11px;height:11px;border-radius:50%;background:#ff5f57;
  box-shadow:14px 0 0 #febc2e,28px 0 0 #28c840;margin-right:40px;flex:0 0 auto;
}
.landing-code-card pre{overflow-x:auto;margin:0;padding:0 22px 20px;color:#c7d4cd;font-size:12px;line-height:1.75;white-space:pre}
.landing-code-divider{height:1px;margin:18px 0;background:var(--border)}
.code-command,.code-key{color:#79b8ff}
.code-string{color:var(--amber)}
.landing-cta{
  display:flex;align-items:center;justify-content:space-between;gap:32px;
  margin-bottom:72px;padding:30px 32px;background:var(--panel);border:1px solid var(--border);border-radius:14px;
}
.landing-cta h2{margin:0 0 4px;font-size:21px}
.landing-cta p{margin:0;color:var(--muted);font-family:var(--sans)}

@media(max-width:800px){
  .landing-hero{padding:84px 8px 64px}
  .landing-features{grid-template-columns:1fr;margin-bottom:84px}
  .landing-code-section{grid-template-columns:1fr;gap:30px;margin-bottom:84px}
  .landing-code-card pre{font-size:11px}
  .landing-cta{align-items:flex-start;flex-direction:column}
}
/* --- mobile nav toggle (pure-CSS checkbox, zero JS, CSP-safe) ---
   QA #15: the checkbox itself is the visible, focusable control (36x36,
   hamburger drawn with gradients — CSP forbids data: images), so keyboard
   and screen-reader focus land on a real-sized "Menu" control. */
.nav-toggle-input{display:none}

@media(max-width:760px){
  .nav-toggle-input{
    display:inline-block;-webkit-appearance:none;appearance:none;flex:none;margin:0 0 0 auto;padding:0;
    width:36px;height:36px;cursor:pointer;border:1px solid var(--border);border-radius:7px;
    background-color:var(--panel);color:var(--text);
    background-image:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);
    background-size:18px 2px;background-repeat:no-repeat;background-position:center 10px,center 16px,center 22px;
  }
  .nav-toggle-input:hover,.nav-toggle-input:checked{border-color:var(--accent-dim)}
  .nav-toggle-input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .site-nav{flex-wrap:wrap}
  .site-nav .links{
    display:none;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;
    margin-top:14px;padding:6px 0;background:var(--panel);border:1px solid var(--border);border-radius:8px;
  }
  .site-nav .links a{display:block;padding:10px 14px;font-size:14px}
  .site-nav .links a:hover{background:rgba(74,222,128,.06)}
  .nav-toggle-input:checked ~ .links{display:flex}
}
@media(max-width:520px){
  .landing-shell{width:min(100% - 28px,1000px)}
  .site-nav{padding:16px 0}
  .landing-hero h1{font-size:40px}
  .landing-lead{font-size:16px}
  .landing-actions{align-items:stretch;flex-direction:column;gap:16px}
  .landing-code-card{margin:0 -4px}
  .landing-cta{padding:24px}
  .landing-cta .landing-button{width:100%}
}

/* ==========================================================================
   Legal pages
   ========================================================================== */
.legal-shell{max-width:820px}
.legal-content{padding:72px 0 90px}
.legal-content h1{margin:0;font-size:clamp(36px,6vw,56px);line-height:1.1;letter-spacing:-.035em}
.legal-effective{margin:14px 0 48px;color:var(--muted);font-family:var(--mono);font-size:13px}
.legal-content section{margin:0 0 34px}
.legal-content h2{margin:0 0 10px;font-size:20px}
.legal-content section p{margin:0;color:var(--muted);font-size:16px;line-height:1.75;font-family:var(--sans)}
.legal-content a{color:var(--accent)}

/* ==========================================================================
   Public docs / reference / pricing / guide pages
   ========================================================================== */
.docs-shell{max-width:900px}
.docs-content{padding:72px 0 90px;min-width:0}
/* #34: docs pages get a left nav; the shell widens to fit it beside the
   900px content column. Pricing keeps its own full-bleed shell. */
.docs-shell:has(.docs-nav){max-width:1120px}
.docs-layout{display:grid;grid-template-columns:180px minmax(0,1fr);gap:48px;align-items:start}
.docs-nav{position:sticky;top:24px;padding:78px 0 24px}
.docs-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.docs-nav a{display:block;padding:6px 10px;border-left:2px solid transparent;color:var(--muted);font-family:var(--mono);font-size:13px;text-decoration:none}
.docs-nav a:hover{color:var(--text)}
.docs-nav a[aria-current="page"]{color:var(--accent);border-left-color:var(--accent)}
.pricing-full-bleed .docs-layout{display:block}
.pricing-full-bleed .docs-nav{display:none}
@media(max-width:900px){
  .docs-layout{display:block}
  .docs-nav{position:static;padding:24px 0 0}
  .docs-nav ul{flex-direction:row;flex-wrap:wrap;gap:6px}
  .docs-nav a{border:1px solid var(--border);border-radius:6px;padding:5px 10px;font-size:12px}
  .docs-nav a[aria-current="page"]{border-color:var(--accent)}
  .docs-content{padding-top:40px}
}
.docs-fastpath{padding:22px 24px;background:var(--panel);border:1px solid var(--accent-dim);border-radius:14px}
@media(max-width:520px){.docs-fastpath{padding:18px 14px}}
.docs-fastpath>h2{margin-top:0}
.docs-fastpath .docs-steps{margin-top:6px}
.docs-guide-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.docs-guide-list li{padding:16px 18px;background:var(--panel);border:1px solid var(--border);border-radius:12px}
.docs-guide-list a{font-family:var(--mono);font-size:15px;font-weight:600}
.docs-guide-list p{margin:6px 0 0}
.changelog-group{margin:56px 0 28px;padding-top:24px;border-top:1px solid var(--border);font-size:16px;color:var(--muted);letter-spacing:.02em}
.docs-content h1{margin:0;font-size:clamp(36px,6vw,56px);line-height:1.1;letter-spacing:-.035em}
.docs-lead{margin:20px 0 48px;max-width:none;color:var(--muted);font-family:var(--sans)}
.docs-section{margin:0 0 56px}
.docs-section>h2{margin:0 0 14px;font-size:24px;letter-spacing:-.02em}
.docs-section>h3{margin:28px 0 10px;font-size:16px}
.docs-section p{color:var(--muted);font-size:15.5px;line-height:1.75;margin:0 0 14px;font-family:var(--sans)}
.docs-section p code,.docs-section li code,.docs-callout code{
  color:var(--text);font-size:12.5px;background:#060a09;border:1px solid var(--border);border-radius:5px;padding:1px 5px;
}
.docs-section a:not(.landing-button){color:var(--accent);text-decoration:none}
.docs-section a:not(.landing-button):hover{text-decoration:underline}
.docs-steps{margin:0;padding:0 0 0 20px;color:var(--muted);font-size:15.5px;line-height:1.75;font-family:var(--sans)}
.docs-steps li{margin:0 0 14px}
.docs-steps strong{color:var(--text)}
.docs-table-wrap{overflow-x:auto;margin:0 0 10px}
.docs-table{width:100%;border-collapse:collapse;margin:0 0 18px}
.docs-table th{color:var(--muted);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.docs-table th,.docs-table td{padding:11px 12px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.docs-table td{color:var(--muted);font-size:14px;line-height:1.6;font-family:var(--sans)}
.docs-table code{color:var(--text);font-size:12px;background:#060a09;border:1px solid var(--border);border-radius:5px;padding:1px 5px;white-space:nowrap}
.docs-response-card,.docs-code-block{
  min-width:0;overflow:hidden;padding:0;background:#060a09;border:1px solid var(--border);border-radius:14px;margin:20px 0;
}
.docs-response-card pre,.docs-code-block pre{overflow-x:auto;margin:0;padding:0 22px 20px;color:#c7d4cd;font-size:12px;line-height:1.75;white-space:pre}
.docs-note{margin:0 0 18px;color:var(--muted);font-family:var(--sans)}
.docs-callout{margin:26px 0 0;padding:20px 22px;background:var(--panel);border:1px solid var(--border);border-radius:14px}
.docs-callout h3{margin:0 0 6px;font-size:16px}
.docs-callout p{margin:0;color:var(--muted);font-family:var(--sans)}

/* --- onboarding snippets --- */
.snippet{background:#060a09;border:1px solid var(--border);border-radius:9px;padding:12px 14px;margin:10px 0}
.snippet-label{color:var(--muted);font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.snippet pre{overflow-x:auto;margin:0 0 8px;color:#c7d4cd;font-size:12px;line-height:1.7;white-space:pre}
.snippet .copy{font-size:12px;padding:4px 9px}

/* --- HTTP method badges --- */
.method-badge{
  display:inline-block;margin-right:6px;padding:2px 8px;border-radius:6px;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#052012;
}
.method-get{background:var(--accent)}
.method-post{background:var(--amber)}
.method-delete{background:var(--danger)}
.method-patch{background:#7dd3fc}
.docs-content .docs-section h3 code{white-space:normal}
/* QA #3: /docs/api/ at 390px — endpoint paths such as
   /api/v1/inboxes/{inbox_id}/messages/{message_id}/reply contain no spaces,
   so white-space:normal alone cannot break them and the page scrolled
   sideways (scrollWidth 552 > 390). Scoped to the API reference wrapper:
   inline code (headings, prose, table cells) may break anywhere; <pre>
   blocks keep their own horizontal scroll. */
.docs-api-ref{min-width:0;max-width:100%}
.docs-api-ref h3 code,.docs-api-ref p code,.docs-api-ref li code,.docs-api-ref .docs-table td code{overflow-wrap:anywhere;word-break:break-word;white-space:normal}
.docs-api-ref .docs-table{table-layout:auto}

/* --- pricing --- */
.pricing-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;line-height:1.6;border:1px solid transparent}
.pricing-badge-available{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}
.pricing-badge-soon{background:transparent;border-color:var(--border);color:var(--muted)}
/* keeps name/price/CTA on one baseline across tiers when a tier has no badge */
.pricing-badge-slot{visibility:hidden}

/* full-bleed shell override for the live pricing page: the shared .docs-shell
   caps at 900px, and .landing-shell's own `width:min(100% - 40px,1000px)`
   also caps below that — too narrow for the 5-col table (~1028px needed).
   This overrides both width and max-width via the shell_modifier block in
   docs_base.html, without touching any other docs page. */
.pricing-full-bleed{width:min(100% - 40px,1240px);max-width:1240px}

/* comparison table (5 tiers as columns, features as rows) */
.pricing-compare-wrap{margin:8px 0 24px;position:relative}
.pricing-compare-table{min-width:1028px;width:100%}
.pricing-compare-feature-col{width:160px;min-width:160px}
.pricing-compare-col{min-width:170px}
.pricing-compare-col-featured{background:var(--accent-dim)}
.pricing-compare-table td.pricing-compare-col-featured,.pricing-compare-table th.pricing-compare-col-featured,.pricing-compare-table .pricing-compare-col-featured *:not(.landing-button){color:var(--text)}
.pricing-compare-head{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 0}
.pricing-compare-name{font-family:var(--mono);font-size:14px;color:var(--text);text-transform:none;letter-spacing:0}
.pricing-compare-price{font-family:var(--mono);font-size:20px;font-weight:800;color:var(--text);white-space:nowrap}
.pricing-compare-cta{width:auto;padding:6px 14px;font-size:12px;margin-top:2px}
.pricing-compare-num{text-align:center;white-space:nowrap;font-family:var(--mono);font-size:13px}
.pricing-compare-table th{vertical-align:middle}
/* small-polish: nowrap on the long Webhooks/Extra cells ("Included (SSRF-pinned,
   HMAC-signed)", "Team seats, catch-all, …") stretched Pro/Business to ~300px and
   pushed Enterprise ~210px past the 1240px shell (clipped at 1440/1280). Fixed
   layout = 160px feature col + 5 equal tier cols (~216px at 1240); cells wrap at
   word boundaries inside their column. min-width 1028 keeps the .table-wrap
   horizontal scroll below ~1070px viewport. */
.pricing-compare-table{table-layout:fixed}
.pricing-compare-table .pricing-compare-num{white-space:normal;overflow-wrap:break-word;vertical-align:middle}
/* mobile: keep .table-wrap's overflow-x scroll, add a visible affordance
   (fade + hint) below ~900px where the table can no longer fit unscrolled */
@media(max-width:900px){
  .pricing-compare-wrap{-webkit-overflow-scrolling:touch}
  .pricing-compare-wrap::after{
    content:"→ scroll for more";display:block;margin-top:6px;
    color:var(--muted);font-family:var(--mono);font-size:11px;text-align:right;
  }
}

/* --- changelog --- */
.changelog-entry{margin:0 0 34px}
.changelog-entry h2{margin:0 0 6px;font-size:20px}
.changelog-date{display:block;margin-bottom:6px;color:var(--accent);font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.changelog-entry p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.75;font-family:var(--sans)}

/* ==========================================================================
   Dashboard usage page + inbox connect snippet
   ========================================================================== */
.usage-count{color:var(--muted);font-family:var(--mono);font-size:12px;font-weight:700}
.usage-bar{display:block;width:100%;height:10px;margin:8px 0 10px;border-radius:99px;overflow:hidden;appearance:none;-webkit-appearance:none;background:var(--panel);border:1px solid var(--border)}
.usage-bar::-webkit-progress-bar{background:var(--panel)}
.usage-bar::-webkit-progress-value{background:var(--accent);border-radius:99px}
.usage-bar::-moz-progress-bar{background:var(--accent);border-radius:99px}
.usage-bar-warn::-webkit-progress-value{background:var(--danger)}
.usage-bar-warn::-moz-progress-bar{background:var(--danger)}
.usage-warning{color:var(--danger);margin:0;font-family:var(--sans)}
.usage-note{color:var(--muted);margin:0;font-family:var(--sans)}
.usage-note a{color:var(--accent);text-decoration:none}
.usage-note a:hover{text-decoration:underline}
.usage-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:0 0 10px}
.usage-grid div{background:#060a09;border:1px solid var(--border);border-radius:9px;padding:14px;display:grid;gap:4px}
.usage-grid span{color:var(--muted);font-family:var(--sans)}
.usage-grid strong{font-size:22px}
.connect summary{cursor:pointer;color:var(--accent);font-weight:600;font-family:var(--mono);font-size:13px}
.connect-body{margin-top:10px;padding:14px;background:#060a09;border:1px solid var(--border);border-radius:9px;min-width:340px}
.connect-body p{margin:0 0 8px;font-family:var(--sans)}
.connect-body p code{color:var(--text);font-size:12px}

/* ==========================================================================
   Try-it-live playground
   ========================================================================== */
.try-card{min-width:0;padding:22px;background:var(--panel);border:1px solid var(--border);border-radius:14px;margin:18px 0}
.try-address{font-size:16px;margin:8px 0 6px;font-family:var(--sans)}
.try-address code{color:var(--text);font-size:13px;background:#060a09;border:1px solid var(--border);border-radius:6px;padding:4px 8px}
.try-error{color:var(--danger);margin:12px 0 0;font-family:var(--sans)}
.try-live{margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}
.try-status{color:var(--muted);font-size:14px;margin:6px 0 14px;font-family:var(--sans)}
.try-result{display:grid;grid-template-columns:120px 1fr;gap:6px 12px;margin:0}
.try-result dt{color:var(--muted);font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;align-self:start;padding-top:3px}
.try-result dd{margin:0;color:var(--text);font-size:14px;line-height:1.55;overflow-wrap:anywhere;font-family:var(--sans)}
.try-otp{font-family:var(--mono);font-weight:700;font-size:22px;line-height:1;color:var(--accent);letter-spacing:.06em}

/* --- API playground (test-token) on /app/api-keys/ --- */
.api-playground h2,#api-playground h2{margin:0 0 4px;font-size:16px}
.pg-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:14px 0 6px}
.pg-field{display:flex;flex-direction:column;gap:5px;flex:1 1 200px;min-width:160px}
.pg-field>span{color:var(--muted);font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.pg-field input,.pg-field select{
  border:1px solid var(--border);background:var(--bg);color:var(--text);
  border-radius:6px;padding:8px 10px;font-family:var(--mono);font-size:13px;width:100%;
}
.pg-field input:focus,.pg-field select:focus{border-color:var(--accent-dim);outline:none}
.pg-key-field{flex:2 1 260px}
#pg-run{flex:0 0 auto;align-self:flex-end}
.pg-out{margin-top:12px}
.pg-out-head{display:flex;align-items:center;gap:10px;margin:12px 0 4px}
.pg-out-label{color:var(--muted);font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.pg-status{font-family:var(--mono);font-size:12px;color:var(--muted)}
.pg-status.pg-ok{color:var(--accent)}
.pg-status.pg-err{color:var(--amber)}
#api-playground pre{min-height:1.2em}
#pg-response{max-height:340px;overflow:auto}