:root {
  --font-sans: "Avenir Next", Avenir, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;

  --h1: 48px;
  --h2: 28px;
  --h2-inline: 22px;
  --lead: 18px;
  --h3: 17px;
  --body: 16px;
  --small: 14px;
  --tiny: 12px;

  --w-regular: 400;
  --w-medium: 500;
  --w-strong: 600;

  --r-panel: 14px;
  --r-card: 10px;
  --r-control: 6px;

  --s0: 4px;
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 40px;
  --s5: 64px;
  --s6: 96px;
  --s7: 128px;

  --wrap: 1200px;
  --header-h: 64px;
  --win-h: 640px;

  --fog-1: #2c3946;
  --fog-2: #6e7a87;
  --fog-3: #a7b1bb;
  --night: #1e2b38;
  --brand: #274862;
  --brand-wash: #eef3f7;
  --amber: #f5a00f;
  --amber-deep: #c97d05;
  --danger: #b5432f;

  --ink: #15191e;
  --muted: #5c6570;
  --paper: #ffffff;
  --paper-2: #f5f7f9;
  --line: #eaebec;
  --line-strong: rgba(21, 34, 48, 0.18);
  --on-dark: #ffffff;
  --on-dark-muted: rgba(255, 255, 255, 0.74);
  --on-dark-line: rgba(255, 255, 255, 0.18);

  --shadow-win: 0 2px 6px rgba(30, 52, 74, 0.06), 0 32px 64px -24px rgba(30, 52, 74, 0.34);
  --shadow-pop: 0 16px 40px -16px rgba(30, 52, 74, 0.32);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--s3)); }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--body);
  font-weight: var(--w-regular);
  line-height: 1.75;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; }

h1 {
  font-size: var(--h1);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.3;
  letter-spacing: normal;
}
h2 { font-size: var(--h2); font-weight: var(--w-regular); line-height: 1.45; letter-spacing: -0.01em; }
h3 { font-size: var(--h3); font-weight: var(--w-strong); line-height: 1.5; }

.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: var(--s2); top: -48px; z-index: 90; padding: var(--s1) var(--s2); background: var(--paper); color: var(--ink); border-radius: var(--r-control); }
.skip-link:focus { top: var(--s1); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.eyebrow { margin: 0 0 var(--s1); font-size: var(--small); color: var(--muted); }
.chev {
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}

/* header */
.site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); background: var(--fog-1); color: var(--on-dark); }
.header-inner { height: 100%; display: flex; align-items: center; gap: var(--s3); }
.brand { display: inline-flex; align-items: center; gap: var(--s1); color: inherit; font-size: var(--h3); font-weight: var(--w-strong); letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.brand img { width: 28px; height: 28px; }
.site-nav { display: flex; align-items: center; gap: var(--s3); margin-left: auto; }
.site-nav a { color: var(--on-dark-muted); font-size: var(--small); }
.site-nav a:hover { color: var(--on-dark); text-decoration: none; }
.lang { position: relative; }
.lang-trigger {
  display: inline-flex; align-items: center; gap: var(--s1);
  height: 36px; padding: 0 var(--s1);
  background: transparent; border: 0; border-radius: var(--r-control);
  color: var(--on-dark-muted); font-size: var(--small); cursor: pointer;
}
.lang-trigger:hover { color: var(--on-dark); }
.lang-trigger[aria-expanded="true"] .chev { transform: translateY(2px) rotate(225deg); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + var(--s1));
  min-width: 168px; padding: var(--s1); list-style: none;
  background: var(--paper); color: var(--ink);
  border-radius: var(--r-card); box-shadow: var(--shadow-pop);
}
.lang-menu a { display: flex; align-items: center; justify-content: space-between; padding: var(--s1) var(--s2); border-radius: var(--r-control); color: var(--ink); font-size: var(--small); }
.lang-menu a:hover { background: var(--brand-wash); color: var(--ink); text-decoration: none; }
.lang-menu a[aria-current="true"] { font-weight: var(--w-medium); }
.lang-menu a[aria-current="true"]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.menu-btn { display: none; width: 40px; height: 40px; border: 0; background: transparent; color: var(--on-dark); cursor: pointer; border-radius: var(--r-control); }
.menu-btn span, .menu-btn span::before, .menu-btn span::after { display: block; width: 20px; height: 1px; margin: auto; background: currentColor; position: relative; content: ""; }
.menu-btn span::before { position: absolute; top: -6px; }
.menu-btn span::after { position: absolute; top: 6px; }
.nav-drawer { position: fixed; z-index: 49; top: var(--header-h); left: 0; right: 0; padding: var(--s3); background: var(--fog-1); color: var(--on-dark); box-shadow: var(--shadow-pop); }
.nav-drawer a { display: block; padding: var(--s1) 0; color: var(--on-dark); }
.nav-drawer .drawer-langs { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--on-dark-line); }
.nav-drawer .drawer-langs a { color: var(--on-dark-muted); font-size: var(--small); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  height: 40px; padding: 0 var(--s2);
  border: 1px solid transparent; border-radius: var(--r-control);
  font-size: var(--small); font-weight: var(--w-medium); line-height: 1;
  white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { text-decoration: none; }
.btn-ink { background: var(--ink); color: var(--on-dark); }
.btn-ink:hover { background: var(--brand); color: var(--on-dark); }
.btn-line { background: var(--paper); color: var(--ink); border-color: var(--line); }
.btn-line:hover { background: var(--brand-wash); color: var(--ink); border-color: var(--line); }
.btn-quiet { background: transparent; color: var(--brand); padding: 0 var(--s1); }
.btn-quiet:hover { background: var(--brand-wash); color: var(--brand); }
.btn-lg { height: 48px; padding: 0 var(--s3); font-size: var(--body); }
.icon-btn {
  display: inline-grid; place-items: center; flex: none;
  width: 36px; height: 36px; padding: 0;
  background: transparent; color: var(--muted);
  border: 1px solid transparent; border-radius: var(--r-control); cursor: pointer;
}
.icon-btn:hover { background: var(--paper-2); color: var(--ink); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn.is-danger:hover { background: var(--paper-2); color: var(--danger); }

/* hero */
.hero {
  position: relative; overflow: hidden; text-align: center; color: var(--on-dark);
  background: linear-gradient(180deg, var(--fog-1) 0%, var(--fog-2) 100%);
  padding: var(--s5) 0 336px;
}
.hero h1 { color: var(--on-dark); }
.hero-mark { background: linear-gradient(transparent calc(100% - 6px), var(--amber) 0) no-repeat; padding-bottom: var(--s0); }
.hero-sub { margin-top: var(--s2); font-size: var(--body); line-height: 1.8; color: var(--on-dark-muted); }
.seg {
  display: inline-flex; gap: var(--s0); margin-top: var(--s4); padding: var(--s0);
  background: rgba(255, 255, 255, 0.1); border: 1px solid var(--on-dark-line); border-radius: 999px;
}
.seg button {
  height: 36px; padding: 0 var(--s3); border: 0; border-radius: 999px;
  background: transparent; color: var(--on-dark-muted);
  font-size: var(--small); font-weight: var(--w-medium); cursor: pointer;
}
.seg button:hover { background: rgba(255, 255, 255, 0.08); color: var(--on-dark); }
.seg button[aria-selected="true"] { background: var(--paper); color: var(--fog-1); }
.hero-ridge { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 260px; pointer-events: none; }
.hero-float { position: absolute; color: rgba(255, 255, 255, 0.15); pointer-events: none; animation: hush-float 9s ease-in-out infinite; }
.hero-float.f1 { left: 7%; top: 72px; width: 96px; }
.hero-float.f2 { left: 17%; top: 200px; width: 56px; animation-delay: -3s; }
.hero-float.f3 { right: 8%; top: 56px; width: 104px; animation-delay: -5s; }
.hero-float.f4 { right: 19%; top: 208px; width: 64px; animation-delay: -2s; }
@keyframes hush-float { 0%, 100% { transform: translateY(0); }
 50% { transform: translateY(-8px); }
 }

/* stage + mail window */
.stage { position: relative; z-index: 2; margin-top: -296px; padding-bottom: var(--s6); }
.mailwin {
  max-width: 1120px; height: var(--win-h); margin: 0 auto;
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow-win); overflow: hidden;
}

.mailwin-bar { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); }
.addr { display: flex; align-items: center; gap: var(--s2); flex: 1; min-width: 0; }
.addr-text { min-width: 0; display: grid; }
.addr-label { font-size: var(--tiny); color: var(--muted); line-height: 1.5; }
.addr-value {
  font-family: var(--font-mono); font-size: var(--lead); letter-spacing: 0; line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-radius: var(--r-control); transition: background .4s ease;
}
.bar-tools { display: flex; align-items: center; gap: var(--s1); flex: none; }
.timer { display: inline-flex; align-items: center; gap: var(--s1); height: 40px; padding: 0 var(--s2); color: var(--muted); font-size: var(--small); font-variant-numeric: tabular-nums; }
.timer svg { width: 16px; height: 16px; }
.timer.is-low { color: var(--amber-deep); }
.mailwin-body { display: grid; grid-template-columns: 340px minmax(0, 1fr); min-height: 0; }
.mail-list { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; border-right: 1px solid var(--line); }
.list-head { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 var(--s1) 0 var(--s3); border-bottom: 1px solid var(--line); }
.list-title { display: flex; align-items: center; gap: var(--s1); font-size: var(--small); font-weight: var(--w-medium); }
.count-chip { padding: 0 var(--s1); border-radius: 999px; background: var(--brand-wash); color: var(--brand); font-size: var(--tiny); line-height: 1.75; }
.list-rows { overflow-y: auto; align-content: start; display: grid; }
.mail-row {
  position: relative; align-self: start;
  display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: var(--s2);
  height: 76px; padding: 0 var(--s3); text-align: left;
  background: var(--paper); color: var(--ink);
  border: 0; border-bottom: 1px solid var(--line); cursor: pointer;
}
.mail-row:hover { background: var(--paper-2); color: var(--ink); }
.mail-row[aria-current="true"] { background: var(--brand-wash); color: var(--ink); box-shadow: inset 2px 0 0 var(--brand); }
.mail-row.is-unread::before { content: ""; position: absolute; left: var(--s1); top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--amber); }
.row-main { min-width: 0; display: grid; }
.row-top { display: flex; justify-content: space-between; gap: var(--s1); font-size: var(--small); line-height: 1.6; }
.row-from { font-weight: var(--w-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-time { flex: none; color: var(--muted); font-size: var(--tiny); }
.row-subj { font-size: var(--small); color: var(--muted); line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--fog-1); color: var(--on-dark);
  font-size: var(--small); font-weight: var(--w-strong); line-height: 1;
}
.avatar[data-demo-brand="amazon"],
.avatar[data-demo-brand="uber"] {
  background: var(--paper);
  color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.avatar.is-lg { width: 44px; height: 44px; font-size: var(--body); }
.mail-empty { display: grid; place-items: center; padding: var(--s3); }
.mail-empty p { width: min(420px, 100% - 32px); padding: var(--s2) var(--s3); background: var(--paper-2); color: var(--muted); border-radius: var(--r-control); font-size: var(--small); text-align: center; }

.reader { min-height: 0; overflow-y: auto; padding: var(--s4) var(--s4) var(--s3); }
.reader-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s2); }
.reader-subject { font-size: var(--lead); font-weight: var(--w-medium); line-height: 1.5; letter-spacing: 0; }
.reader-actions { display: flex; gap: var(--s0); flex: none; margin-top: calc(var(--s0) * -1); }
.reader-close { display: none; }
.reader-meta { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: var(--s2); margin-top: var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.reader-from { display: flex; align-items: center; gap: var(--s1); font-size: var(--small); font-weight: var(--w-medium); }
.reader-addr { font-family: var(--font-mono); font-size: var(--tiny); color: var(--muted); letter-spacing: 0; }
.reader-time { font-size: var(--tiny); color: var(--muted); }
.demo-pill { padding: 0 var(--s1); border-radius: 999px; background: var(--paper-2); color: var(--muted); font-size: var(--tiny); font-weight: var(--w-regular); line-height: 1.75; }
.mailwin.is-real .demo-pill { display: none; }
.reader-body { padding-top: var(--s3); font-size: var(--small); line-height: 1.8; }
.mail-doc { max-width: 560px; }
.mail-doc p + p { margin-top: var(--s2); }
.doc-brand { display: inline-flex; align-items: center; gap: 8px; width: auto; max-width: 100%; margin-bottom: var(--s3); font-size: var(--lead); font-weight: var(--w-strong); letter-spacing: -0.01em; }
.doc-brand svg { flex: none; width: 22px; height: 22px; color: var(--amber); }
.doc-brand:has(svg[viewBox="0 0 40 12"]) { display: inline-grid; justify-items: center; gap: 2px; }
.doc-brand svg[viewBox="0 0 40 12"] { width: 72px; height: 16px; }
.doc-code { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin: var(--s3) 0; padding: var(--s2) var(--s3); background: var(--paper-2); border-radius: var(--r-control); }
.doc-code strong { font-family: var(--font-mono); font-size: var(--h2); font-weight: var(--w-medium); letter-spacing: 0.08em; color: var(--ink); }
.doc-table { display: grid; grid-template-columns: auto 1fr; gap: var(--s1) var(--s3); margin: var(--s3) 0; padding: var(--s2) var(--s3); background: var(--paper-2); border-radius: var(--r-control); }
.doc-table dt { color: var(--muted); }
.doc-table dd { text-align: right; }
.doc-table .mono { font-family: var(--font-mono); letter-spacing: 0; }
.doc-total { font-size: var(--h2-inline); font-weight: var(--w-medium); margin-top: var(--s1); }
.doc-foot { margin-top: var(--s4); padding-top: var(--s2); border-top: 1px solid var(--line); font-size: var(--tiny); color: var(--muted); }

.alias-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s2); align-items: center; padding: var(--s2) var(--s3); background: var(--paper); border-radius: var(--r-control); box-shadow: 0 1px 2px rgba(30, 52, 74, 0.06); }
.alias-row .mono { font-family: var(--font-mono); font-size: var(--small); letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alias-row small { grid-column: 1 / -1; font-size: var(--tiny); color: var(--muted); }
.status-pill { padding: 0 var(--s1); border-radius: 999px; font-size: var(--tiny); line-height: 1.75; background: var(--brand-wash); color: var(--brand); }
.status-pill.is-off { background: var(--paper-2); color: var(--muted); }

/* sections */
.section { padding: var(--s6) 0; }
.section-center { text-align: center; }
.section-center .actions { justify-content: center; }
.intro-line { max-width: 640px; margin: 0 auto; font-size: var(--body); line-height: 1.8; color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.fine { margin-top: var(--s3); font-size: var(--tiny); color: var(--muted); }
.dot-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--amber); color: var(--on-dark); margin-bottom: var(--s3); }
.dot-icon svg { width: 22px; height: 22px; }
.feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s5); align-items: center; padding: var(--s6) 0; }
.feature.is-flip .feature-copy { order: 2; }
.feature-copy p { margin-top: var(--s2); color: var(--muted); max-width: 460px; }
.feature-copy .btn { margin-top: var(--s3); }
.shot { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-win); overflow: hidden; }
.slice { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: var(--s2); align-items: center; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); }
.slice:last-child { border-bottom: 0; }
.slice b { font-weight: var(--w-medium); font-size: var(--small); display: block; }
.slice span { font-size: var(--tiny); color: var(--muted); }
.slice .mono { font-family: var(--font-mono); letter-spacing: 0; }
.slice-code { padding: var(--s3); background: var(--paper-2); display: flex; align-items: center; justify-content: space-between; }
.slice-code strong { font-family: var(--font-mono); font-size: var(--h2); font-weight: var(--w-medium); letter-spacing: 0.08em; }

.band { background: var(--brand); color: var(--on-dark); padding: var(--s5) 0; }
.band-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); text-align: center; }
.band-grid strong { display: block; font-size: var(--h2); font-weight: var(--w-regular); color: var(--on-dark); }
.band-grid span { font-size: var(--small); color: var(--on-dark-muted); }

.specimen { text-align: center; }
.specimen-aa { font-size: var(--h1); line-height: 1; color: var(--amber); font-weight: var(--w-medium); }
.specimen h2 { margin-top: var(--s3); }
.specimen-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s4); margin-top: var(--s4); }
.glyph { display: grid; gap: var(--s1); }
.glyph b { font-family: var(--font-mono); font-size: var(--h1); font-weight: var(--w-regular); letter-spacing: 0; line-height: 1.2; }
.glyph span { font-size: var(--tiny); color: var(--muted); }
.specimen p { max-width: 560px; margin: var(--s4) auto 0; color: var(--muted); }

/* faq */
.faq { max-width: 800px; margin: var(--s4) auto 0; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) 0; cursor: pointer; list-style: none; font-size: var(--body); font-weight: var(--w-medium); line-height: 1.6; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .chev { margin-right: var(--s1); }
.faq-item[open] summary .chev { transform: translateY(2px) rotate(225deg); }
.faq-item p { padding: 0 var(--s5) var(--s3) 0; color: var(--muted); }

.cta-panel { padding: var(--s6) var(--s4); background: var(--brand-wash); color: var(--ink); border-radius: var(--r-panel); text-align: center; }
.cta-panel p { margin-top: var(--s2); color: var(--muted); }
.cta-panel .actions { justify-content: center; }

.prose h2 { font-size: var(--h2-inline); font-weight: var(--w-medium); margin: var(--s4) 0 var(--s2); }
.prose h3 { font-size: var(--h3); margin: var(--s3) 0 var(--s1); }
.prose p + p { margin-top: var(--s2); }
.modal h2 { font-size: var(--h2-inline); font-weight: var(--w-medium); }

/* footer */
.site-footer { margin-top: var(--s6); background: var(--night); color: var(--on-dark); padding: var(--s6) 0 var(--s4); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.footer-brand p { margin-top: var(--s2); max-width: 340px; color: var(--on-dark-muted); font-size: var(--small); }
.support-card { margin-top: var(--s3); padding: var(--s2) var(--s3); background: rgba(255, 255, 255, 0.06); color: var(--on-dark); border-radius: var(--r-card); font-size: var(--small); max-width: 360px; }
.support-card p { margin: 0 0 var(--s2); color: var(--on-dark-muted); }
.support-card .btn { background: var(--paper); color: var(--ink); }
.support-card .btn:hover { background: var(--amber); color: var(--ink); }
.footer-col { display: grid; align-content: start; gap: var(--s1); }
.footer-col > span { font-size: var(--tiny); color: var(--on-dark-muted); letter-spacing: 0.04em; margin-bottom: var(--s1); }
.footer-col a { color: var(--on-dark); font-size: var(--small); }
.footer-tail { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--on-dark-line); font-size: var(--tiny); color: var(--on-dark-muted); }
.footer-tail nav { display: flex; gap: var(--s3); }
.footer-tail a { color: var(--on-dark-muted); }

/* toast + reveal */
.toast { position: fixed; z-index: 95; left: 50%; bottom: var(--s4); transform: translate(-50%, var(--s2)); padding: var(--s1) var(--s3); background: var(--ink); color: var(--on-dark); border-radius: 999px; font-size: var(--small); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-float { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* responsive */
@media (max-width: 1080px) {
  .hero-float.f2, .hero-float.f4 { display: none; }
  .mailwin-bar { flex-wrap: wrap; }
  .addr { flex-basis: 100%; }
  .bar-tools { width: 100%; }
}
@media (max-width: 860px) {
  :root { --h1: 34px; --h2: 24px; --header-h: 56px; }
  .site-nav, .lang { display: none; }
  .menu-btn { display: block; margin-left: auto; }
  .hero { padding: var(--s4) 0 168px; }
  .hero-float { display: none; }
  .hero-ridge { height: 140px; }
  .stage { margin-top: -128px; padding-bottom: var(--s5); }
  .mailwin { height: auto; min-height: 0; }
  .mailwin-body { grid-template-columns: minmax(0, 1fr); }
  .mail-list { border-right: 0; }
  .list-rows { overflow: visible; }
  .reader { display: none; }
  .mailwin.is-reading .reader {
    display: block; position: fixed; z-index: 60;
    top: var(--header-h); left: 0; right: 0; bottom: 0;
    padding: 0 var(--s3) var(--s4); background: var(--paper); color: var(--ink);
  }
  .mailwin.is-reading .reader-top { position: sticky; top: 0; z-index: 1; margin: 0 calc(var(--s3) * -1); padding: var(--s2) var(--s3); background: var(--paper); border-bottom: 1px solid var(--line); flex-direction: row-reverse; align-items: center; }
  .reader-close { display: inline-grid; }
  .reader-subject { flex: 1; font-size: var(--body); }
  .stage, .stage * { animation: none; }
  .mailwin { transform: none; }
  .bar-tools { flex-wrap: wrap; }
  .bar-tools .btn { flex: 1; }
  .feature { grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding: var(--s5) 0; }
  .feature.is-flip .feature-copy { order: 0; }
  .band-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .section { padding: var(--s5) 0; }
  .cta-panel { padding: var(--s5) var(--s3); }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); }
  .footer-brand { grid-column: 1 / -1; }
  .faq-item p { padding-right: 0; }
}


/* Shared component completion */
[hidden] { display: none !important; }
input, textarea, button { font-family: var(--font-sans); }
button:disabled, input:disabled { cursor: not-allowed; opacity: .55; }
input, textarea { min-width: 0; font-size: var(--small); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
h1 em { font-style: normal; font-weight: inherit; }
.eyebrow { margin-bottom: var(--s3); }
.section-intro { margin-top: var(--s3); color: var(--muted); font-size: var(--body); font-weight: var(--w-regular); line-height: 1.8; }
.section-center .section-intro { max-width: 640px; margin-inline: auto; }
.actions > .btn { max-width: 100%; }
.brand { min-width: 0; white-space: nowrap; }
.brand img { padding: var(--s0); background: var(--paper); border-radius: var(--r-control); }
.header-inner > .lang { flex: none; }
.site-nav { gap: var(--s2); }
.site-nav a { display: inline-flex; align-items: center; min-height: 40px; padding-inline: var(--s1); }
.site-nav a[aria-current="page"] { color: var(--on-dark); }
.lang-trigger { position: relative; padding-right: var(--s3); }
.lang-trigger > .chev {
  position: absolute;
  right: var(--s1);
  top: 50%;
  transform: translateY(calc(-50% - 1px)) rotate(45deg);
}
.lang-trigger[aria-expanded="true"] > .chev { transform: translateY(calc(-50% + 2px)) rotate(225deg); }
.lang-globe { display: none; width: 18px; height: 18px; }
.lang-menu { z-index: 75; max-height: min(400px, 70dvh); overflow-y: auto; }
.nav-drawer {
  z-index: 70;
  right: auto;
  width: min(340px, calc(100% - 16px));
  max-height: calc(100dvh - var(--header-h) - 16px);
  overflow-y: auto;
  text-align: left;
  border-radius: 0 0 var(--r-card) 0;
}
.nav-drawer a { padding: var(--s1) var(--s2); }
.seg [role="tab"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 var(--s3);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--on-dark-muted);
  font-size: var(--small);
  font-weight: var(--w-medium);
  line-height: 1.4;
  cursor: pointer;
}
.seg [role="tab"]:hover { background: var(--on-dark-line); color: var(--on-dark); text-decoration: none; }
.seg [role="tab"][aria-selected="true"] { background: var(--paper); color: var(--fog-1); }
.seg > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 var(--s3);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--on-dark-muted);
  font-size: var(--small);
  font-weight: var(--w-medium);
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
}
.seg > a:hover { background: var(--on-dark-line); color: var(--on-dark); text-decoration: none; }
.seg > a:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 2px; }
.row-top { align-items: center; }
.avatar.is-lg { width: 36px; height: 36px; font-size: var(--small); }
.reader-meta { grid-template-columns: 36px minmax(0, 1fr) auto; }
.reader-letterhead { color: var(--ink); }
.reader.is-real .demo-pill, .reader.is-real .demo-letterhead { display: none; }
.reader-frame, .archive-frame { display: block; width: 100%; min-height: 360px; border: 0; background: var(--paper); color: var(--ink); }
.reader-text { white-space: pre-wrap; overflow-wrap: anywhere; font: var(--small)/1.8 var(--font-mono); }
.reader .mail-empty { min-height: 100%; }
.list-rows:has(> .mail-empty:only-child) { align-content: stretch; }
.mail-empty { min-height: 0; height: auto; place-items: center; }
.mail-empty > .empty-state { width: min(420px, 100%); }
.mail-empty p { min-height: 0; height: auto; padding: var(--s2); }
.empty-state {
  padding: var(--s2);
  background: var(--paper-2);
  color: var(--muted);
  border-radius: var(--r-control);
  text-align: center;
}
.empty-state h3 { margin-bottom: var(--s1); color: var(--ink); font-size: var(--body); font-weight: var(--w-medium); }
.empty-state p { font-size: var(--small); line-height: 1.7; }
.empty-state > svg { width: 40px; height: 40px; margin: 0 auto var(--s2); color: var(--brand); }
.addr-value { max-width: 100%; }
.timer { justify-content: flex-start; }
.slice > .avatar { display: grid; color: var(--on-dark); font-size: var(--small); }
.slice > .avatar[data-demo-brand="amazon"],
.slice > .avatar[data-demo-brand="uber"] { color: var(--brand); }
.slice > .status-pill { color: var(--brand); }
.slice > .status-pill.is-off { color: var(--muted); }
.footer-brand p { max-width: none; }
.support-card .btn { max-width: 100%; height: auto; min-height: 40px; padding-block: var(--s1); white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
.footer-col a { min-width: 0; overflow-wrap: anywhere; }
.footer-col .legal-pair { display: grid; gap: var(--s1); }
.footer-tail { border-top: 0; }
.toast {
  z-index: 110;
  width: max-content;
  max-width: min(430px, calc(100% - 32px));
  text-align: center;
  line-height: 1.6;
  border-radius: var(--r-control);
  visibility: hidden;
}
.toast.show { visibility: visible; opacity: 1; transform: translate(-50%, 0); }
.toast.is-on { visibility: visible; }

/* Forms and action families */
.field { display: grid; gap: var(--s1); min-width: 0; }
.field > label, .field-label { color: var(--ink); font-size: var(--small); font-weight: var(--w-medium); }
.field-hint { color: var(--muted); font-size: var(--tiny); line-height: 1.7; }
.input, .textarea, .field input:not([type="checkbox"]):not([type="radio"]), .field textarea {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: var(--s1) var(--s2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--small);
  font-weight: var(--w-regular);
  line-height: 1.6;
  box-shadow: none;
}
.textarea, .field textarea { min-height: 128px; resize: vertical; }
.input:focus, .textarea:focus, .field input:focus, .field textarea:focus {
  border-color: var(--ink);
  outline: none;
  box-shadow: none;
}
.input[aria-invalid="true"], .field input[aria-invalid="true"] { border-color: var(--danger); }
.form-stack { display: grid; gap: var(--s3); min-width: 0; }
.form-error { color: var(--danger); font-size: var(--small); line-height: 1.7; }
.form-notice { padding: var(--s2); background: var(--brand-wash); color: var(--brand); border-radius: var(--r-control); font-size: var(--small); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); margin-top: var(--s3); }
.form-actions .btn { min-height: 40px; height: auto; padding-block: var(--s1); line-height: 1.4; }
.check-field { display: flex; align-items: flex-start; gap: var(--s1); font-size: var(--small); }
.check-field input { flex: none; margin-top: 6px; accent-color: var(--ink); }
.code-input { font-family: var(--font-mono); letter-spacing: .16em; font-variant-numeric: tabular-nums; }
.btn-danger {
  background: var(--paper);
  color: var(--danger);
  border-color: var(--line);
}
.btn-danger:hover { background: var(--danger); color: var(--on-dark); border-color: var(--danger); }
.btn:focus-visible, .icon-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.btn-wrap { white-space: normal; height: auto; min-height: 40px; padding-block: var(--s1); line-height: 1.4; }
.text-link { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }

/* Page surfaces */
.page-main { padding-block: var(--s5) var(--s6); }
.page-hero { padding-block: var(--s5); }
.page-hero.is-centered { text-align: center; }
.page-hero.is-centered .eyebrow { margin-inline: auto; }
.page-hero.is-centered .section-intro { max-width: 720px; margin-inline: auto; }
.page-hero.is-centered .actions { justify-content: center; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: var(--s1); margin-bottom: var(--s3); color: var(--muted); font-size: var(--tiny); }
.breadcrumbs a { color: var(--muted); }
.card { min-width: 0; padding: var(--s3); border-radius: var(--r-card); background: var(--paper-2); color: var(--ink); }
.card h3 + p { margin-top: var(--s1); }
.card p { color: var(--muted); font-weight: var(--w-regular); }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s4); }
.card-grid.two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: var(--s2); border-radius: 50%; background: var(--amber); color: var(--ink); }
.card-icon svg { width: 20px; height: 20px; }
.card .actions { margin-top: var(--s3); }
.wash-surface { background: var(--brand-wash); color: var(--ink); }
.night-surface { background: var(--brand); color: var(--on-dark); }
.night-surface .section-intro, .night-surface > p { color: var(--on-dark-muted); }
.night-surface .card { background: var(--paper); color: var(--ink); }
.night-surface .card p { color: var(--muted); }
.status-pill { display: inline-flex; align-items: center; justify-content: center; width: fit-content; max-width: 100%; margin: 0; white-space: normal; }
.status-pill.is-waiting { background: var(--brand-wash); color: var(--brand); }
.status-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-size: var(--small); }
.count-stack { display: block; width: fit-content; margin-top: var(--s2); }

/* Tables, comparison and source tracking */
.table-scroll { width: 100%; max-width: 100%; margin-block: var(--s3) var(--s4); overflow-x: auto; border-radius: var(--r-card); background: var(--paper-2); color: var(--ink); }
.data-table { width: 100%; border-collapse: collapse; text-align: left; font-size: var(--small); }
.data-table th { font-weight: var(--w-medium); color: var(--ink); background: var(--brand-wash); }
.data-table th, .data-table td { padding: var(--s2) var(--s3); vertical-align: top; overflow-wrap: break-word; }
.data-table tbody tr + tr { border-top: 1px solid var(--line); }
.data-table td { color: var(--muted); }
.tracker-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: var(--s2); margin-top: var(--s3); }
.tracker-results { margin-top: var(--s4); }
.glossary-list { display: grid; gap: var(--s3); margin-top: var(--s4); }
.glossary-entry { padding: var(--s3); background: var(--paper-2); color: var(--ink); border-radius: var(--r-card); }
.glossary-entry dt { margin-bottom: var(--s1); font-size: var(--h3); font-weight: var(--w-strong); }
.glossary-entry dd { color: var(--muted); }
.use-case-card { padding: var(--s3); background: var(--paper-2); color: var(--ink); border-radius: var(--r-card); }
.choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s3); }
.choice-card { padding: var(--s3); background: var(--brand-wash); color: var(--ink); border-radius: var(--r-card); }
.choice-card p { margin-top: var(--s1); color: var(--muted); }
.stat-card { padding: var(--s3); background: var(--brand-wash); color: var(--ink); border-radius: var(--r-card); }
.stat-card strong { display: block; margin-bottom: var(--s1); font-size: var(--h2); font-weight: var(--w-regular); }

/* Passwordless access */
.access-main { width: min(var(--wrap), 100% - 48px); margin-inline: auto; padding-block: var(--s5) var(--s6); }
.auth-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: var(--s5); }
.auth-story { min-width: 0; padding: var(--s4) 0; }
.auth-story h1 { line-height: 1.3; }
.auth-story .section-intro { max-width: 460px; }
.auth-story .access-facts { display: grid; gap: var(--s3); margin-top: var(--s4); list-style: none; }
.access-facts li { display: flex; gap: var(--s2); align-items: flex-start; color: var(--muted); font-size: var(--small); }
.access-facts svg { flex: none; width: 20px; height: 20px; margin-top: var(--s0); color: var(--brand); }
.hush-access-card { min-width: 0; padding: var(--s4); border-radius: var(--r-card); background: var(--paper-2); color: var(--ink); }
.hush-access-card h2 { margin-bottom: var(--s3); font-size: var(--h2-inline); }
.login-pane { display: grid; gap: var(--s3); }
.hush-access-card .input { background: var(--paper); color: var(--ink); border-color: var(--line-strong); }
.login-pane .form-actions { margin-top: 0; }
.login-pane .form-notice { margin-block: var(--s2); background: var(--brand-wash); color: var(--brand); overflow-wrap: anywhere; }
.login-pane [data-resend-code], .login-pane [data-change-email] { background: var(--paper); color: var(--ink); border-color: var(--line); }
.login-pane [data-resend-code]:hover, .login-pane [data-change-email]:hover { background: var(--brand-wash); color: var(--ink); }
.auth-hint { margin-top: var(--s3); color: var(--muted); font-size: var(--small); }
.auth-email { overflow-wrap: anywhere; font-family: var(--font-mono); letter-spacing: 0; }

/* Alias workspace */
.desk-main { padding-block: var(--s5) var(--s6); }
.desk-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s5); }
.desk-header h1 { font-size: var(--h2); line-height: 1.45; }
.session-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s2); color: var(--muted); font-size: var(--small); }
[data-session-email] { overflow-wrap: anywhere; font-family: var(--font-mono); letter-spacing: 0; }
.desk-section { min-width: 0; margin-top: var(--s5); }
.desk-section:first-child { margin-top: 0; }
.desk-section > h2 { margin-bottom: var(--s2); }
.desk-section > .section-intro { margin-top: var(--s3); }
.alias-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: var(--s1); margin-top: var(--s3); }
.alias-input-group { display: flex; min-width: 0; align-items: center; gap: var(--s1); }
.alias-input-group .input { border-radius: 999px; }
.alias-suffix { flex: none; font-family: var(--font-mono); font-size: var(--small); color: var(--muted); letter-spacing: 0; }
.alias-compose .btn, .alias-compose .input { height: 48px; font-size: var(--small); }
.alias-compose > .btn { white-space: nowrap; }
.alias-compose [data-random-prefix] { background: var(--paper); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 999px; }
.alias-compose [data-random-prefix]:hover { background: var(--brand-wash); color: var(--ink); }
.alias-results { margin-top: var(--s3); }
.alias-results > .empty-state { margin-top: var(--s3); }
.alias-list { display: grid; gap: var(--s1); }
.alias-list .alias-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; background: var(--paper-2); color: var(--ink); box-shadow: none; }
.alias-address { min-width: 0; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: var(--small); letter-spacing: 0; }
.alias-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }
.alias-actions .btn { height: 36px; padding-inline: var(--s1); }
.alias-detail { margin-top: var(--s2); padding: var(--s3); border-radius: var(--r-control); background: var(--brand-wash); color: var(--ink); }
.alias-detail dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s2); font-size: var(--small); }
.alias-detail dt { color: var(--muted); }

/* Custom listbox */
.filter { position: relative; display: inline-flex; align-self: start; }
.filter-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 40px;
  padding: var(--s1) var(--s2);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: var(--small);
  line-height: 1.5;
  cursor: pointer;
}
.filter-trigger:hover { background: var(--brand-wash); color: var(--ink); }
.filter-trigger[aria-expanded="true"] .chev { transform: translateY(2px) rotate(225deg); }
.filter-menu {
  position: absolute;
  left: 0;
  top: calc(100% + var(--s1));
  z-index: 25;
  width: max-content;
  min-width: 168px;
  max-width: min(280px, calc(100vw - 48px));
  padding: var(--s1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-pop);
  list-style: none;
}
.filter-menu [role="option"], .filter-menu [data-filter-value] {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: var(--s1) var(--s2);
  border: 0;
  border-radius: var(--r-control);
  background: var(--paper);
  color: var(--ink);
  text-align: left;
  font-size: var(--small);
  line-height: 1.5;
  cursor: pointer;
}
.filter-menu [role="option"]:hover, .filter-menu [aria-selected="true"] { background: var(--brand-wash); color: var(--brand); }

/* Thirty-day archive */
.archive-surface { padding: var(--s4); background: var(--paper-2); color: var(--ink); border-radius: var(--r-panel); }
.archive-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); margin-top: var(--s3); }
.archive-list { display: grid; gap: var(--s1); margin-top: var(--s3); border-top: 0; }
.archive-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  padding: var(--s2);
  border: 0;
  border-radius: var(--r-control);
  background: var(--paper);
  color: var(--ink);
  text-align: left;
  font-size: var(--small);
  line-height: 1.6;
  cursor: pointer;
}
.archive-row:hover { background: var(--brand-wash); color: var(--ink); }
.archive-row-main { min-width: 0; }
.archive-subject { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--w-medium); }
.archive-sender { display: block; overflow-wrap: anywhere; color: var(--muted); font-size: var(--tiny); }
.archive-row-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s2); }
.archive-row time { color: var(--muted); font-size: var(--tiny); white-space: nowrap; }
.archive-surface > .empty-state, [data-archive-empty] { margin-top: var(--s3); background: var(--paper); color: var(--muted); }
.archive-detail { min-width: 0; margin-top: var(--s3); padding: var(--s3); background: var(--paper); color: var(--ink); border-radius: var(--r-card); }
.archive-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.archive-detail-head h3 { font-size: var(--lead); font-weight: var(--w-medium); overflow-wrap: anywhere; }
.archive-detail-head .btn { align-self: flex-start; flex: none; }
.archive-detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s2); color: var(--muted); font-size: var(--small); }
.archive-detail-body { margin-top: var(--s3); overflow-wrap: anywhere; }
.archive-detail .status-pill { margin: 0; }

/* Authenticator setup */
.surface-safety { padding: var(--s4); background: var(--brand-wash); color: var(--ink); border-radius: var(--r-panel); }
.twofa-idle { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.twofa-idle-copy { min-width: 0; }
.twofa-idle-copy p { max-width: 720px; margin-top: var(--s2); color: var(--muted); font-size: var(--small); }
.twofa-idle [data-twofa-start] { align-self: center; flex: none; height: 40px; width: auto; }
.twofa-status { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); color: var(--muted); font-size: var(--small); }
[data-2fa-badge] { display: inline-flex; align-items: center; width: fit-content; margin: 0; padding: var(--s0) var(--s1); border-radius: 999px; background: var(--paper); color: var(--brand); font-size: var(--tiny); line-height: 1.5; }
.twofa-setup { margin-top: var(--s3); margin-bottom: var(--s3); color: var(--ink); }
.setup-grid { display: grid; grid-template-columns: 192px minmax(0, 1fr); align-items: start; gap: var(--s4); }
.twofa-qr { display: grid; place-items: center; width: 192px; aspect-ratio: 1; padding: var(--s2); background: var(--paper); color: var(--ink); border-radius: var(--r-control); }
.twofa-qr img, img[data-twofa-qr] { width: 100%; height: 100%; aspect-ratio: 1; object-fit: contain; }
.setup-steps { display: grid; gap: var(--s3); list-style: none; counter-reset: setup; }
.setup-steps > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s2); align-items: start; counter-increment: setup; }
.setup-steps > li::before { content: counter(setup); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--amber); color: var(--ink); font-size: var(--small); }
.setup-steps h3 { font-size: var(--body); font-weight: var(--w-medium); }
.setup-steps p { margin-top: var(--s1); color: var(--muted); font-size: var(--small); }
.secret-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); margin-top: var(--s2); }
.twofa-secret { min-width: 0; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: var(--small); letter-spacing: 0; color: var(--ink); }
.secret-row .btn { width: auto; flex: none; }
.twofa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); margin-top: var(--s3); }
.twofa-actions .input { flex: 0 1 192px; width: 192px; height: 40px; min-height: 40px; background: var(--paper); color: var(--ink); }
.twofa-actions .btn { align-self: center; height: 40px; margin: 0; }
.twofa-actions [data-twofa-confirm] { background: var(--ink); color: var(--on-dark); }
.twofa-actions [data-twofa-confirm]:hover { background: var(--brand); color: var(--on-dark); }
.twofa-actions [data-2fa-disable] { background: var(--paper); color: var(--ink); border-color: var(--line-strong); }

/* Reading, journal and legal */
.reading-wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
.article-layout {
  display: grid;
  width: min(1200px, 100%);
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr) 256px;
  align-items: start;
  gap: var(--s5);
}
.article-body { min-width: 0; max-width: 800px; }
.prose { color: var(--ink); font-size: var(--body); font-weight: var(--w-regular); line-height: 1.9; overflow-wrap: anywhere; }
.prose h2 { margin-top: var(--s5); margin-bottom: var(--s3); }
.prose h3 { margin-top: var(--s4); margin-bottom: var(--s2); }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { margin-block: var(--s3); padding-left: var(--s3); }
.prose li + li { margin-top: var(--s1); }
.prose blockquote { margin: var(--s4) 0; padding: var(--s3); border: 0; border-radius: var(--r-card); background: var(--brand-wash); color: var(--brand); }
.prose .card, .prose .table-scroll, .prose .choice-grid { margin-top: var(--s3); margin-bottom: var(--s4); }
.prose pre { max-width: 100%; overflow-x: auto; margin-block: var(--s3); padding: var(--s3); border-radius: var(--r-control); background: var(--paper-2); color: var(--ink); font: var(--small)/1.8 var(--font-mono); }
.prose code { font-family: var(--font-mono); font-size: var(--small); letter-spacing: 0; }
.prose .btn { color: var(--on-dark); }
.prose .btn-line { color: var(--ink); }
.prose .btn-quiet { color: var(--brand); }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s3); color: var(--muted); font-size: var(--small); }
.article-toc { position: sticky; top: calc(var(--header-h) + var(--s2)); padding: var(--s3); background: var(--paper-2); color: var(--ink); border-radius: var(--r-card); font-size: var(--small); }
.article-toc h2, .article-toc summary { font-size: var(--body); font-weight: var(--w-medium); }
.article-toc ol { display: grid; gap: var(--s1); margin-top: var(--s2); padding-left: var(--s2); }
.article-toc .count-chip { display: inline-flex; margin-top: var(--s2); }
.article-toc details:not([open]) { padding: 0; }
.article-toc summary { cursor: pointer; }
.article-end { margin-top: var(--s5); padding: var(--s4); border-radius: var(--r-panel); background: var(--brand-wash); color: var(--ink); text-align: center; }
.article-end p { margin-top: var(--s3); color: var(--muted); }
.article-end .actions { justify-content: center; margin-top: var(--s4); }
.article-end .btn-ink { background: var(--ink); color: var(--on-dark); }
.article-end .btn-ink:hover { background: var(--brand); color: var(--on-dark); }
.journal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s4); }
.post-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: var(--s4); border-radius: var(--r-card); background: var(--paper-2); color: var(--ink); }
.post-card:hover { background: var(--brand-wash); color: var(--ink); text-decoration: none; }
.post-card h2 { margin-top: var(--s3); font-size: var(--h2-inline); font-weight: var(--w-medium); }
.post-card p { margin-top: var(--s2); margin-bottom: var(--s3); color: var(--muted); }
.post-card .article-meta { margin-top: auto; padding-top: var(--s2); }
.post-card time { color: var(--muted); font-size: var(--tiny); }
.post-card .status-pill { background: var(--paper); color: var(--brand); }
.recommend-float { position: fixed; z-index: 45; right: var(--s3); bottom: var(--s3); width: min(320px, calc(100% - 32px)); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-pop); overflow: hidden; }
.recommend-art { padding: var(--s3); background: var(--brand-wash); color: var(--brand); }
.recommend-art img { width: 100%; height: auto; }
.recommend-copy { padding: var(--s3); }
.recommend-copy h3 { padding-right: var(--s3); }
.recommend-copy p { margin-top: var(--s1); color: var(--muted); font-size: var(--small); }
.recommend-copy .actions { margin-top: var(--s2); }
.recommend-copy .btn { height: auto; min-height: 40px; padding-block: var(--s1); max-width: 100%; white-space: normal; line-height: 1.35; }
.float-close { position: absolute; right: var(--s1); top: var(--s1); background: var(--paper); color: var(--ink); border: 1px solid var(--line-strong); }
.float-close:hover { background: var(--ink); color: var(--on-dark); }
.legal-copy { max-width: 880px; margin-inline: auto; }
.legal-updated { margin-top: var(--s3); color: var(--muted); font-size: var(--small); }

/* Dialogs */
.modal-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: var(--s2); background: color-mix(in srgb, var(--night) 60%, transparent); }
.modal, dialog.modal { width: min(420px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; margin: auto; padding: var(--s3); border: 0; border-radius: var(--r-panel); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-win); }
dialog.modal::backdrop { background: color-mix(in srgb, var(--night) 60%, transparent); }
.modal-icon { width: 40px; height: 40px; margin-bottom: var(--s2); color: var(--brand); }
.modal p { margin-top: var(--s2); color: var(--muted); font-size: var(--small); }
.modal .actions { justify-content: flex-end; margin-top: var(--s3); }
.modal .actions .btn { max-width: 100%; white-space: normal; height: auto; min-height: 40px; padding-block: var(--s1); line-height: 1.4; }

@media (max-width: 1100px) {
  .header-inner { gap: var(--s2); }
  .site-nav { gap: var(--s1); }
  .site-nav a { padding-inline: var(--s0); }
  .mailwin-bar { flex-wrap: wrap; }
  .addr { flex-basis: 100%; }
  .bar-tools { width: 100%; justify-content: flex-start; }
  .auth-layout { gap: var(--s4); }
  .hush-access-card { padding: var(--s3); }
  .article-layout { grid-template-columns: minmax(0, 1fr) 224px; gap: var(--s4); }
  .footer-grid { gap: var(--s4); }
}

@media (max-width: 960px) {
  .auth-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s3); max-width: 720px; margin-inline: auto; }
  .auth-story { padding: 0; }
  .auth-story .section-intro { max-width: none; }
}

@media (max-width: 860px) {
  .header-inner > .lang { display: block; margin-left: auto; }
  .header-inner > .menu-btn { display: block; order: -1; margin-left: 0; flex: none; }
  .site-nav { display: none; }
  .brand { font-size: var(--body); }
  .header-inner { gap: var(--s1); }
  .lang-menu { position: fixed; right: var(--s2); top: calc(var(--header-h) + var(--s1)); }
  .stage, .stage .wrap, .mailwin, .reader { transform: none; animation: none; }
  .mailwin { min-height: 600px; height: auto; }
  .mailwin-body { min-height: 420px; }
  .mail-list { min-height: 420px; grid-template-rows: 48px minmax(0, 1fr); }
  .list-rows { overflow-y: auto; }
  .mobile-reader {
    display: block;
    position: fixed;
    z-index: 85;
    inset: 0;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: auto;
    padding: calc(var(--header-h) + var(--s2)) var(--s3) var(--s4);
    background: var(--paper);
    color: var(--ink);
    transform: none;
    animation: none;
  }
  .mobile-reader .reader-top {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin-inline: calc(-1 * var(--s3));
    padding: var(--s2) var(--s3);
    background: var(--paper);
    color: var(--ink);
    border-bottom: 1px solid var(--line);
  }
  .mobile-reader .reader-close { display: inline-grid; }
  .mobile-reader .reader-actions { align-items: center; }
  .mobile-reader .reader-subject { min-width: 0; font-size: var(--body); }
  .mobile-reader .reader-meta { grid-template-columns: 36px minmax(0, 1fr); }
  .mobile-reader .reader-time { grid-column: 2; }
  .mobile-reader .reader-body { overflow-wrap: anywhere; }
  body.is-locked .hero-float, body.is-locked .hero-ridge { visibility: hidden; }
  .mailwin.is-reading .reader { z-index: 85; height: calc(100dvh - var(--header-h)); }
  .card-grid, .choice-grid { grid-template-columns: minmax(0, 1fr); }
  .card-grid.two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tracker-form { grid-template-columns: minmax(0, 1fr); }
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .article-toc { position: static; grid-row: 1; }
  .journal-grid { grid-template-columns: minmax(0, 1fr); }
  .desk-header { align-items: flex-start; }
  .archive-surface, .surface-safety { padding: var(--s3); }
  .setup-grid { grid-template-columns: 160px minmax(0, 1fr); gap: var(--s3); }
  .twofa-qr { width: 160px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .alias-compose { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .alias-input-group { flex-wrap: wrap; }
  .alias-input-group .input { flex-basis: 100%; }
  .alias-compose .btn { width: 100%; }
  .alias-list .alias-row { grid-template-columns: minmax(0, 1fr) auto; }
  .alias-address { grid-column: 1 / -1; }
  .alias-list .alias-actions { grid-column: 1 / -1; }
  .twofa-idle { flex-direction: column; align-items: flex-start; }
  .twofa-idle [data-twofa-start] { align-self: flex-start; }
}

@media (max-width: 560px) {
  .wrap, .access-main, .reading-wrap { width: min(var(--wrap), 100% - 32px); }
  .lang-trigger { width: 48px; height: 40px; padding: 0 20px 0 var(--s0); justify-content: center; background: transparent; color: var(--on-dark); border: 0; }
  .lang-trigger .lang-name { display: none; }
  .lang-globe { display: block; }
  .hero-sub { max-width: 320px; margin-inline: auto; }
  .seg { max-width: 100%; }
  .seg [role="tab"], .seg > a { min-width: 0; padding-inline: var(--s2); white-space: normal; }
  .addr { gap: var(--s1); }
  .addr-value { font-size: var(--small); }
  .mailwin-bar { padding: var(--s2); gap: var(--s1); }
  .addr-text { flex: 1; min-width: 0; }
  .addr .btn { padding-inline: var(--s1); flex: none; }
  .bar-tools { gap: var(--s1); }
  .bar-tools .timer { width: 100%; height: 32px; padding: 0; }
  .bar-tools .btn { min-width: 0; padding-inline: var(--s1); }
  .mail-row { padding-inline: var(--s2); gap: var(--s1); }
  .mail-row.is-unread::before { left: var(--s0); width: 4px; height: 4px; margin-top: -2px; }
  .list-head { padding-left: var(--s2); }
  .slice { padding-inline: var(--s2); gap: var(--s1); }
  .slice > .status-pill { max-width: 88px; }
  .slice .mono { overflow-wrap: anywhere; }
  .card-grid.two-up { grid-template-columns: minmax(0, 1fr); }
  .page-main, .page-hero, .access-main, .desk-main { padding-top: var(--s4); }
  .page-hero .breadcrumbs { margin-top: var(--s1); }
  .desk-header { flex-direction: column; }
  .desk-header [data-logout] { max-width: 100%; white-space: normal; height: auto; min-height: 40px; padding-block: var(--s1); line-height: 1.4; }
  .archive-row { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  .archive-row-meta { justify-content: flex-start; }
  .archive-detail-head { flex-wrap: wrap; gap: var(--s2); }
  .archive-detail-head .btn { align-self: flex-start; }
  .setup-grid { grid-template-columns: minmax(0, 1fr); }
  .twofa-qr { width: 192px; max-width: 100%; }
  .twofa-actions { align-items: center; }
  .twofa-actions .input { flex: 1 1 136px; width: 136px; }
  .twofa-actions .btn { max-width: 100%; white-space: normal; height: auto; min-height: 40px; padding-block: var(--s1); line-height: 1.4; }
  .post-card { padding: var(--s3); }
  .article-end { padding: var(--s4) var(--s3); }
  .article-end .btn, .cta-panel .btn { height: auto; min-height: 48px; max-width: 100%; white-space: normal; padding-block: var(--s1); line-height: 1.4; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s3); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-tail { flex-direction: column; align-items: flex-start; }
  .recommend-float { right: var(--s2); bottom: var(--s2); }
  .toast { bottom: var(--s3); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto; }
  .toast, .btn, .chev { transition: none; }
}


/* Live mail and account surfaces */
.mail-row.is-active { background: var(--brand-wash); color: var(--ink); box-shadow: inset 2px 0 0 var(--brand); }
.mail-row .row-top { align-items: center; }
.mail-row .row-time { align-self: center; }
.reader .avatar, .mobile-reader .avatar { width: 36px; height: 36px; font-size: var(--small); }
.reader-text { margin: 0; color: var(--ink); }
.mail-image-note { margin-bottom: var(--s3); padding: var(--s2); border-radius: var(--r-control); background: var(--brand-wash); color: var(--brand); font-size: var(--small); }
.addr-value.is-unavailable { font-family: var(--font-sans); font-size: var(--small); white-space: normal; }
.mail-empty > .empty-state { width: min(420px, 100%); min-height: 0; height: auto; padding: var(--s2); }
.mail-empty .empty-state p { width: auto; margin: 0; padding: 0; background: transparent; color: var(--muted); }
.reader:has(> .reader-body > .mail-empty:only-child) { display: grid; }
.reader:has(> .reader-body > .mail-empty:only-child) > .reader-body { display: grid; min-height: 100%; padding-top: 0; }
.reader.is-real .reader-letterhead .demo-pill { display: none; }
.reader-frame { min-width: 0; }
.mobile-reader .reader-letterhead { color: var(--ink); }

.hush-access-card { box-shadow: var(--shadow-win); background: var(--paper-2); color: var(--ink); }
.hush-access-card .access-card-lead { margin-bottom: var(--s3); color: var(--muted); font-size: var(--small); }
.hush-access-card .login-pane { min-width: 0; }
.hush-access-card .form-stack > .btn { width: 100%; }
.access-postmark { max-width: 400px; margin-block: var(--s4); color: var(--brand); }
.access-postmark svg { width: 100%; height: auto; }
.access-code-notice { display: grid; gap: var(--s1); }
.access-code-notice .auth-email { font-size: var(--small); font-weight: var(--w-medium); }
.access-privacy-note { margin-top: var(--s4); color: var(--muted); font-size: var(--tiny); line-height: 1.8; }
.access-privacy-note p + p { margin-top: var(--s2); }
.access-privacy-note a { text-decoration: underline; text-underline-offset: 3px; }
.hush-access-card > .form-notice { margin-bottom: var(--s3); }
.auth-layout > * { min-width: 0; }

.hush-workspace { min-width: 0; }
.hush-session-header { align-items: center; margin-bottom: var(--s5); }
.session-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }
.hush-address-yard { padding-bottom: var(--s6); min-width: 0; }
.yard-heading { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s3); align-items: start; }
.yard-heading .dot-icon { margin: 0; }
.yard-heading .section-intro { max-width: 800px; }
.yard-hint { margin-top: var(--s2); }
.hush-address-yard > .form-error { margin-top: var(--s2); }
.hush-address-yard .alias-results { display: grid; gap: var(--s2); margin-top: var(--s4); }
.hush-address-yard .alias-results > * { margin-top: 0; }
.hush-address-yard .alias-list { gap: var(--s1); }
.hush-address-yard .alias-row { padding: var(--s2); }
.hush-address-yard .alias-detail { grid-column: 1 / -1; margin-top: 0; font-size: var(--small); }
.yard-retry { justify-self: start; }
.hush-records { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s5); align-items: start; min-width: 0; margin-bottom: var(--s6); }
.records-caption { min-width: 0; padding-top: var(--s3); }
.records-caption .section-intro { margin-top: var(--s3); }
.records-note { margin-top: var(--s3); font-size: var(--small); color: var(--muted); }
.hush-records > .archive-surface { min-width: 0; padding: var(--s3); }
.hush-records .archive-toolbar { margin-top: 0; }
.hush-records .archive-list { margin-top: var(--s3); }
.hush-records [data-archive-loading] { margin-top: var(--s3); }
.hush-records .archive-detail-head { align-items: flex-start; }
.archive-detail-head h3 { flex: 1; min-width: 0; }
.archive-detail-head .status-pill { flex: none; max-width: 144px; }
.archive-detail-meta > span { min-width: 0; overflow-wrap: anywhere; }
.archive-sheet-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1); margin-bottom: var(--s3); }
.archive-sheet-bar .btn { flex: none; align-self: center; height: 40px; }
.archive-attachments { margin-top: var(--s3); }
.attachment-heading { margin: 0 0 var(--s2); color: var(--ink); font-size: var(--small); font-weight: var(--w-medium); }
.attachment-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding-block: var(--s1); }
.attachment-name { min-width: 0; font-size: var(--small); overflow-wrap: anywhere; }
.attachment-row .btn { flex: none; }
.hush-safety { margin-top: 0; padding: var(--s4); }
.hush-safety .twofa-idle { align-items: center; }
.hush-safety .twofa-status { display: flex; align-items: center; margin-top: var(--s2); }
.hush-safety [data-2fa-badge] { margin: 0; background: var(--paper); color: var(--brand); }
.hush-safety .twofa-setup { margin-block: var(--s4) var(--s3); }
.hush-safety .setup-grid { grid-template-columns: 192px minmax(0, 1fr); }
.hush-safety .twofa-actions { margin-top: var(--s2); }
.hush-safety .twofa-actions .input, .hush-safety .twofa-actions .btn { min-height: 40px; height: 40px; }
.hush-safety > .form-error { margin-top: var(--s3); }
.twofa-disable-panel { margin-top: var(--s3); }
.twofa-disable-panel > p { max-width: 720px; color: var(--muted); font-size: var(--small); }
.desk-quiet-note { max-width: 800px; margin: var(--s4) auto 0; text-align: center; color: var(--muted); font-size: var(--small); }
.archive-mobile-sheet { border-radius: 0; }
.hush-workspace > .form-error { margin-bottom: var(--s3); }

@media (max-width: 1100px) {
  .hush-records { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .records-caption { max-width: 720px; padding-top: 0; }
  .hush-records > .archive-surface { padding: var(--s4); }
}

@media (max-width: 860px) {
  .mobile-reader { border-radius: 0; }
  .reader.mobile-reader { display: block; min-height: 100dvh; }
  .mobile-reader .reader-top { top: var(--header-h); }
  .mobile-reader .reader-body { min-height: 0; }
  .mobile-reader .reader-close { display: inline-grid; }
  .mobile-reader .reader-actions { margin: 0; }
  .mobile-reader:has(> .reader-body > .mail-empty:only-child) { display: block; }
  .archive-mobile-sheet {
    position: fixed;
    z-index: 85;
    inset: 0;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: var(--header-h) var(--s3) var(--s4);
    overflow-y: auto;
    overscroll-behavior: auto;
    border-radius: 0;
    background: var(--paper);
    color: var(--ink);
    transform: none;
    animation: none;
  }
  .archive-mobile-sheet .archive-sheet-bar {
    position: sticky;
    top: 0;
    z-index: 2;
    margin-inline: calc(-1 * var(--s3));
    padding: var(--s2) var(--s3);
    background: var(--paper);
    color: var(--ink);
    border-bottom: 1px solid var(--line);
  }
  .archive-mobile-sheet .archive-detail-head { display: flex; align-items: flex-start; gap: var(--s2); }
  .archive-mobile-sheet .archive-detail-meta { margin-top: var(--s2); }
  .archive-mobile-sheet .archive-frame { min-height: 360px; }
  .hush-address-yard { padding-bottom: var(--s5); }
  .hush-records { margin-bottom: var(--s5); }
  .hush-safety .setup-grid { grid-template-columns: 160px minmax(0, 1fr); gap: var(--s3); }
}

@media (max-width: 720px) {
  .hush-session-header { align-items: flex-start; }
  .hush-address-yard .alias-list .alias-row { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .hush-address-yard .alias-address { grid-column: 1; }
  .hush-address-yard .alias-actions { grid-column: 1; }
  .hush-address-yard .alias-list .status-pill { justify-self: start; }
}

@media (max-width: 560px) {
  .hush-access-card { padding: var(--s3); }
  .access-postmark { margin-block: var(--s3); }
  .auth-story h1 { font-size: 34px; }
  .hush-session-header { gap: var(--s3); }
  .session-actions { width: 100%; }
  .session-actions .btn { height: auto; min-height: 40px; padding-block: var(--s1); max-width: 100%; white-space: normal; line-height: 1.4; }
  .yard-heading { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .hush-records > .archive-surface { padding: var(--s2); }
  .hush-safety { padding: var(--s3); }
  .hush-safety .setup-grid { grid-template-columns: minmax(0, 1fr); }
  .hush-safety .twofa-qr { width: 192px; }
  .hush-safety .twofa-actions .btn { max-width: 100%; height: auto; min-height: 40px; padding-block: var(--s1); white-space: normal; line-height: 1.4; }
  .addr { flex-wrap: wrap; }
  .addr-text { flex: 1 1 100%; width: 100%; }
  .addr-value {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    letter-spacing: 0;
  }
  .addr .btn { margin-top: var(--s1); }
  .mailwin-bar .bar-tools { width: 100%; }
  .attachment-row { flex-wrap: wrap; }
}


.reader .demo-pill {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-bottom: 0;
}

.prose .btn {
  background: var(--brand);
  color: var(--paper);
  border-color: var(--brand);
}

.prose .btn:hover {
  background: var(--fog-1);
  color: var(--paper);
  border-color: var(--fog-1);
}

.btn.btn-line,
.prose .btn.btn-line {
  background: transparent;
  color: var(--brand);
  border: 1px solid var(--line);
}

.btn.btn-line:hover,
.prose .btn.btn-line:hover {
  background: var(--brand-wash);
  color: var(--brand);
  border-color: var(--line);
}

.brand .brand-name {
  display: inline;
  width: auto;
  max-width: none;
  overflow: visible;
  white-space: nowrap;
  font-size: var(--lead, 18px);
  line-height: 1.4;
}

.site-footer .brand img {
  background: var(--paper);
  border-radius: 6px;
}

.site-footer .footer-heading {
  display: block;
  margin: 0 0 16px;
  font-size: var(--small, 14px);
  font-weight: 500;
  line-height: 1.6;
}

.alias-row .status-pill.is-active {
  background: var(--brand-wash);
  color: var(--brand);
}

.alias-row .status-pill.is-paused,
.alias-row .status-pill.is-off {
  background: var(--paper-2);
  color: var(--muted);
}

.identity-suffix {
  border-radius: 0 6px 6px 0;
}

.reader:not(.mobile-reader) [data-reader-close] {
  display: none;
}

[data-site-nav] a {
  white-space: nowrap;
}

[data-site-nav] a[aria-current="page"],
[data-nav-drawer] a[aria-current="page"] {
  background: var(--brand-wash);
  color: var(--brand);
  border-radius: 6px;
}

[data-login] label {
  display: block;
  margin-bottom: 8px;
}

[data-login] label + input {
  margin-top: 8px;
}

html[lang="zh"] h1,
html[lang="zh"] h2 {
  text-wrap: balance;
}

[data-alias-prefix] {
  padding-left: 16px;
  font-size: var(--small, 14px);
}

.hush-access-card h2,
[data-login] [data-code-pane] h2,
[data-login] [data-login-pane="code"] h2,
.cta-panel h2 {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.4;
}

.list-rows:has(> .mail-empty),
.reader-body:has(> .mail-empty) {
  display: grid;
  place-items: center;
}

.mail-empty {
  box-sizing: border-box;
  width: min(420px, calc(100% - 32px));
  height: auto;
  min-height: 0;
  margin: 16px auto;
  padding: 16px;
  background: var(--paper-2);
  color: var(--ink);
  border-radius: 10px;
}

.mail-empty .empty-state {
  width: min(420px, 100%);
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 16px;
  background: var(--paper-2);
  color: var(--ink);
}

.mail-empty .empty-state p {
  color: var(--muted);
}

[data-twofa-confirm] {
  margin-top: 24px;
}

[data-twofa-confirm-form] .actions {
  margin-top: 24px;
  align-items: center;
  gap: 16px;
}

[data-twofa-confirm-form] .actions [data-twofa-confirm] {
  margin-top: 0;
}

[data-2fa-badge] {
  margin: 0;
}

.twofa-status {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.twofa-status [data-2fa-badge] {
  margin: 0;
}

.custom-select {
  margin-block: 16px;
}

.filter-trigger,
[data-filter-trigger] {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  min-height: 40px;
  margin-block: 16px;
  padding: 8px 40px 8px 16px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-size: var(--small, 14px);
  cursor: pointer;
}

.custom-select .filter-trigger,
.custom-select [data-filter-trigger] {
  margin-block: 0;
}

[data-filter-trigger]::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

[data-filter-trigger] > .chev,
[data-filter-trigger] > .chevron {
  display: none;
}

[data-filter-menu] {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.avatar > svg {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
}

@media (max-width: 560px) {
  .lang .lang-trigger {
    width: 48px;
    min-width: 48px;
    overflow: hidden;
    font-size: 0;
  }

  .lang .lang-trigger .lang-name {
    display: none;
  }

  .lang .lang-trigger .lang-globe {
    flex: none;
    width: 18px;
    height: 18px;
  }
}


.mail-empty {
  box-sizing: border-box;
  width: min(420px, calc(100% - 32px));
  max-width: 100%;
  height: auto;
  min-height: 0;
  margin: 16px auto;
  padding: 16px;
  background: var(--paper-2, #f5f7f9);
  color: var(--ink, #15191e);
  border-radius: 10px;
}

.mail-empty > .empty-state {
  width: min(420px, 100%);
  max-width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 16px;
  background: var(--paper-2);
  color: var(--ink);
}

[data-rows]:has(> .mail-empty),
[data-reader-body]:has(> .mail-empty) {
  display: grid;
  place-items: center;
}

.twofa-status {
  display: flex;
  align-items: center;
  gap: 16px;
}

.twofa-status [data-2fa-badge] {
  flex: none;
  margin: 0;
}

.btn-line {
  border-color: var(--line, rgba(21, 34, 48, .09));
}


/* Privacy policy */
.privacy-hero { padding-bottom: var(--s5); }
.legal-glance.privacy-glance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3);
  margin-top: var(--s5);
}
.privacy-glance-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--s3);
  background: var(--paper-2);
  color: var(--ink);
}
.privacy-card-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--s3);
  border-radius: 50%;
  background: var(--amber);
  color: var(--ink);
}
.privacy-card-mark svg { width: 22px; height: 22px; }
.privacy-glance-card h2 {
  font-size: var(--h3);
  font-weight: var(--w-strong);
  line-height: 1.5;
}
.privacy-glance-card p {
  margin-top: var(--s2);
  margin-bottom: var(--s3);
  color: var(--muted);
  font-size: var(--small);
  line-height: 1.8;
}
.privacy-glance-card > a {
  margin-top: auto;
  color: var(--brand);
  font-size: var(--small);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.privacy-copy > section { scroll-margin-top: calc(var(--header-h) + var(--s3)); }
.privacy-copy > section + section { margin-top: var(--s5); }
.privacy-copy.prose h2 {
  margin-top: 0;
  margin-bottom: var(--s3);
  font-size: var(--h2-inline);
  font-weight: var(--w-medium);
  line-height: 1.5;
}
.privacy-copy.prose h3 {
  margin-top: var(--s3);
  margin-bottom: var(--s1);
  font-size: var(--h3);
  font-weight: var(--w-strong);
  line-height: 1.5;
}
.privacy-periods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s2);
  margin-block: var(--s3) var(--s4);
}
.privacy-periods .stat-card { padding: var(--s3); }
.privacy-periods .stat-card h3 {
  margin-top: var(--s2);
  margin-bottom: var(--s1);
  font-size: var(--body);
  font-weight: var(--w-medium);
}
.privacy-periods .stat-card p { color: var(--muted); font-size: var(--small); line-height: 1.8; }
.privacy-table-caption {
  padding: var(--s2) var(--s3);
  background: var(--paper-2);
  color: var(--muted);
  text-align: left;
  font-size: var(--small);
}
.privacy-copy .data-table thead th { white-space: nowrap; }
.privacy-copy .data-table tbody th {
  width: 24%;
  background: var(--paper-2);
  color: var(--ink);
  font-weight: var(--w-medium);
}
.privacy-controls { display: grid; gap: var(--s3); margin-block: var(--s3) var(--s4); }
.privacy-controls > div { padding: var(--s3); border-radius: var(--r-card); background: var(--paper-2); color: var(--ink); }
.privacy-controls dt { margin-bottom: var(--s1); font-size: var(--body); font-weight: var(--w-medium); }
.privacy-controls dd { color: var(--muted); font-size: var(--body); line-height: 1.9; }
.privacy-contact {
  margin-top: var(--s4);
  padding: var(--s4);
  border-radius: var(--r-panel);
  background: var(--brand-wash);
  color: var(--ink);
}
.privacy-copy .privacy-contact h3 { margin-top: 0; margin-bottom: var(--s2); }
.privacy-contact > p { color: var(--muted); }
.privacy-contact .actions { align-items: center; margin-top: var(--s3); }
.privacy-contact .btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.privacy-contact .text-link { font-size: var(--small); }

@media (max-width: 860px) {
  .privacy-hero { padding-bottom: var(--s4); }
  .legal-glance.privacy-glance { grid-template-columns: minmax(0, 1fr); gap: var(--s2); margin-top: var(--s4); }
  .privacy-glance-card p { margin-bottom: var(--s2); }
  .privacy-card-mark { margin-bottom: var(--s2); }
  .privacy-periods { grid-template-columns: minmax(0, 1fr); }
  .privacy-copy > section + section { margin-top: var(--s4); }
  .privacy-copy .data-table { min-width: 640px; }
  .privacy-contact { padding: var(--s3); }
}


/* Terms: quiet overview and readable agreements */
.terms-hero { padding-bottom: var(--s5); }
.terms-hero h1 { max-width: 960px; }
.terms-hero .section-intro { max-width: 720px; }
.terms-glance.legal-glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s5); }
.terms-overview-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: var(--s3); border-radius: var(--r-card); background: var(--paper-2); color: var(--ink); }
.terms-overview-mark { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: var(--s3); border-radius: 50%; background: var(--amber); color: var(--ink); font: var(--small)/1 var(--font-mono); }
.terms-overview-card h2 { font-size: var(--h3); font-weight: var(--w-medium); line-height: 1.5; }
.terms-overview-card p { margin-top: var(--s2); margin-bottom: var(--s3); color: var(--muted); font-size: var(--small); }
.terms-overview-card > a { margin-top: auto; font-size: var(--small); text-decoration: underline; text-underline-offset: 3px; }
.terms-document { display: grid; grid-template-columns: 224px minmax(0, 1fr); align-items: start; gap: var(--s5); padding-block: var(--s3) var(--s5); }
.terms-index { position: sticky; top: calc(var(--header-h) + var(--s3)); min-width: 0; padding-top: var(--s1); font-size: var(--small); }
.terms-index-label { display: block; margin-bottom: var(--s3); color: var(--muted); font-size: var(--tiny); }
.terms-index ol { display: grid; gap: var(--s2); padding-left: var(--s3); color: var(--muted); }
.terms-index a { color: var(--brand); }
.terms-index p { margin-top: var(--s4); max-width: 192px; color: var(--muted); font-size: var(--tiny); }
.terms-prose { min-width: 0; max-width: 880px; }
.terms-prose h2 { margin: 0 0 var(--s3); font-size: var(--h2-inline); font-weight: var(--w-medium); line-height: 1.5; }
.terms-prose h3 { margin: 0 0 var(--s2); font-size: var(--h3); font-weight: var(--w-medium); line-height: 1.5; }
.terms-section { scroll-margin-top: calc(var(--header-h) + var(--s3)); }
.terms-section + .terms-section { margin-top: var(--s5); }
.terms-prose .terms-section-number { margin: 0 0 var(--s3); color: var(--muted); font-size: var(--tiny); }
.terms-section > p + p { margin-top: var(--s2); }
.terms-table-caption { padding: var(--s2) var(--s3); background: var(--paper-2); color: var(--ink); text-align: left; font-size: var(--small); font-weight: var(--w-medium); }
.terms-prose .data-table tbody th { min-width: 128px; background: transparent; color: var(--ink); }
.terms-prose .data-table td { min-width: 192px; }
.terms-use-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: var(--s2); margin-block: var(--s3) var(--s4); }
.terms-use-card { min-width: 0; padding: var(--s3); border-radius: var(--r-card); background: var(--paper-2); color: var(--ink); }
.terms-use-symbol { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: var(--s2); border-radius: 50%; background: var(--brand-wash); color: var(--brand); }
.terms-use-symbol svg { width: 24px; height: 24px; }
.terms-use-card ul { margin: var(--s2) 0 0; padding-left: var(--s2); color: var(--muted); font-size: var(--small); line-height: 1.8; }
.terms-use-card li + li { margin-top: var(--s2); }
.terms-contact { margin-top: var(--s4); padding: var(--s4); border-radius: var(--r-panel); background: var(--brand-wash); color: var(--ink); }
.terms-contact p { color: var(--muted); }
.terms-contact .actions { align-items: center; }
.terms-prose .terms-contact .btn { background: var(--ink); color: var(--on-dark); border-color: transparent; }
.terms-prose .terms-contact .btn:hover { background: var(--brand); color: var(--on-dark); border-color: transparent; }

@media (max-width: 860px) {
  .terms-glance.legal-glance { grid-template-columns: minmax(0, 1fr); gap: var(--s2); margin-top: var(--s4); }
  .terms-overview-card { padding: var(--s3); }
  .terms-overview-mark { margin-bottom: var(--s2); }
  .terms-document { grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding-top: 0; }
  .terms-index { position: static; padding: var(--s3); border-radius: var(--r-card); background: var(--brand-wash); color: var(--ink); }
  .terms-index ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) var(--s3); }
  .terms-index p { max-width: none; margin-top: var(--s3); }
  .terms-use-grid { grid-template-columns: minmax(0, 1fr); }
  .terms-contact { padding: var(--s3); }
}

@media (max-width: 560px) {
  .terms-hero h1 { font-size: var(--h1); }
  .terms-index ol { grid-template-columns: minmax(0, 1fr); }
  .terms-prose .data-table th, .terms-prose .data-table td { padding: var(--s2); }
}


/* Subscription comparison */
.burner-hero { background: var(--paper-2); color: var(--ink); padding-bottom: var(--s5); }
.burner-hero h1 { max-width: 960px; margin-inline: auto; font-size: var(--h1); font-weight: var(--w-regular); line-height: 1.3; }
.burner-hero .section-intro { max-width: 640px; }
.burner-crumbs { justify-content: center; margin-bottom: var(--s4); }
.burner-answer { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: start; gap: var(--s3); max-width: 880px; margin: var(--s4) auto 0; padding: var(--s4); border-radius: var(--r-card); background: var(--paper); color: var(--ink); text-align: left; }
.burner-answer > .dot-icon { margin: 0; color: var(--ink); }
.burner-answer h2 { font-size: var(--h2-inline); font-weight: var(--w-medium); }
.burner-answer p { margin-top: var(--s2); color: var(--muted); font-size: var(--body); line-height: 1.8; }
.burner-section-heading { max-width: 720px; }
.burner-section-heading .section-intro { margin-top: var(--s3); }
.burner-scroll-hint { margin-top: var(--s4); color: var(--muted); font-size: var(--tiny); }
.burner-table-scroll { margin-top: var(--s2); margin-bottom: var(--s4); }
.burner-table { min-width: 880px; table-layout: fixed; }
.burner-table th:first-child { width: 16%; }
.burner-table thead th { padding-block: var(--s3); font-size: var(--body); }
.burner-table tbody th { background: var(--paper-2); color: var(--ink); font-size: var(--small); font-weight: var(--w-medium); }
.burner-table td { line-height: 1.8; }
.burner-note { max-width: 800px; margin-top: var(--s3); color: var(--muted); font-size: var(--small); line-height: 1.8; }
.burner-decision-section { background: var(--paper-2); color: var(--ink); }
.burner-choice { background: var(--paper); color: var(--ink); padding: var(--s3); }
.burner-choice .card-icon { margin-bottom: var(--s3); }
.burner-choice p { margin-top: var(--s2); font-size: var(--body); line-height: 1.8; }
.burner-choice strong { font-weight: var(--w-medium); color: var(--ink); }
.burner-choice > .text-link { display: inline-block; margin-top: var(--s3); font-size: var(--small); }
.burner-existing-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s5); align-items: start; }
.burner-steps { display: grid; gap: var(--s4); margin: 0; padding: 0; list-style: none; }
.burner-steps > li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s3); align-items: start; }
.burner-step-number { display: grid; place-items: center; width: 40px; height: 40px; background: var(--brand-wash); color: var(--brand); border-radius: 50%; font-family: var(--font-mono); font-size: var(--body); }
.burner-steps h3 { padding-top: var(--s0); font-size: var(--h3); font-weight: var(--w-strong); }
.burner-steps p { margin-top: var(--s2); color: var(--muted); font-size: var(--body); line-height: 1.8; }
.burner-mail-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s4); }
.burner-mail-choice { min-width: 0; }
.burner-mail-choice .shot { box-shadow: var(--shadow-pop); }
.burner-mail-copy { padding-top: var(--s4); }
.burner-mail-copy p { margin-top: var(--s2); color: var(--muted); font-size: var(--body); line-height: 1.8; }
.burner-mail-copy > .text-link { display: inline-block; margin-top: var(--s3); font-size: var(--small); }
.burner-receipt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s3); background: var(--paper-2); color: var(--ink); }
.burner-receipt > span { font-family: var(--font-mono); font-size: var(--small); overflow-wrap: anywhere; letter-spacing: 0; }
.burner-receipt > strong { font-family: var(--font-mono); font-size: var(--h2); font-weight: var(--w-medium); line-height: 1.75; letter-spacing: 0; }

@media (max-width: 860px) {
  .burner-hero { padding-block: var(--s4) var(--s5); }
  .burner-hero h1 { max-width: 640px; }
  .burner-crumbs { margin-top: 0; margin-bottom: var(--s3); }
  .burner-answer { padding: var(--s3); gap: var(--s2); }
  .burner-existing-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .burner-mail-choices { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .burner-mail-copy { padding-top: var(--s3); }
  .burner-table { min-width: 800px; }
  .burner-table th, .burner-table td { padding: var(--s2); }
}

@media (max-width: 560px) {
  .burner-answer { grid-template-columns: minmax(0, 1fr); }
  .burner-answer h2 { font-size: var(--h2-inline); }
  .burner-hero .actions > .btn { white-space: normal; min-height: 40px; height: auto; padding-block: var(--s1); line-height: 1.4; }
  .burner-choice { padding: var(--s3); }
  .burner-steps > li { grid-template-columns: 40px minmax(0, 1fr); gap: var(--s2); }
  .burner-mail-choice .slice { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .burner-mail-choice .slice-code { flex-wrap: wrap; gap: var(--s2); }
}


/* Source trace: local planning register */
.trace-hero { padding-bottom: var(--s5); }
.trace-hero .section-intro { max-width: 720px; }
.trace-hero .fine { max-width: 640px; margin-inline: auto; }
.trace-boundary { padding-block: var(--s5); background: var(--paper-2); color: var(--ink); }
.trace-boundary-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; gap: var(--s5); }
.trace-boundary-copy { color: var(--muted); }
.trace-boundary-copy > p + p { margin-top: var(--s2); }
.trace-evidence-note { margin-top: var(--s3); padding: var(--s3); border-radius: var(--r-card); background: var(--paper); color: var(--ink); }
.trace-evidence-note strong { font-size: var(--body); font-weight: var(--w-medium); }
.trace-evidence-note p { margin-top: var(--s1); color: var(--muted); font-size: var(--small); }
.trace-work-section { scroll-margin-top: var(--s3); }
.trace-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); }
.trace-heading-note { flex: 0 1 320px; color: var(--muted); font-size: var(--small); line-height: 1.8; }
.trace-workbench { min-width: 0; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-win); }
.trace-compose { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--s2); align-items: end; }
.trace-compose .input { height: 48px; }
.trace-type-field { min-width: 0; }
.trace-type-picker { position: relative; min-width: 0; }
.trace-type-trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--s2); width: 100%; min-height: 48px; padding: var(--s1) var(--s2); border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--paper); color: var(--ink); text-align: left; font-size: var(--small); line-height: 1.6; cursor: pointer; }
.trace-type-trigger:hover { background: var(--brand-wash); color: var(--ink); }
.trace-type-trigger[aria-expanded="true"] .chev { transform: translateY(2px) rotate(225deg); }
.trace-type-menu { position: absolute; top: calc(100% + var(--s1)); left: 0; z-index: 30; width: 100%; min-width: 192px; margin: 0; padding: var(--s1); border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-pop); list-style: none; }
.trace-type-menu button { display: block; width: 100%; min-height: 40px; padding: var(--s1); border: 0; border-radius: var(--r-control); background: var(--paper); color: var(--ink); text-align: left; font-size: var(--small); line-height: 1.6; cursor: pointer; }
.trace-type-menu button:hover, .trace-type-menu button[aria-selected="true"] { background: var(--brand-wash); color: var(--brand); }
.trace-add { height: 48px; }
.trace-type-hint { max-width: 880px; margin-top: var(--s2); color: var(--muted); font-size: var(--small); }
.trace-tool-error { margin-top: var(--s2); }
.trace-register-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s4); }
.trace-register-help { max-width: 880px; margin-top: var(--s2); color: var(--muted); font-size: var(--small); }
.trace-register-empty { margin-top: var(--s3); padding: var(--s4) var(--s3); }
.trace-register-empty > p { max-width: 480px; margin-inline: auto; }
.trace-table-scroll { width: 100%; max-width: 100%; margin-top: var(--s3); overflow-x: auto; border-radius: var(--r-control); background: var(--paper-2); color: var(--ink); }
.trace-register-table { width: 100%; min-width: 960px; border-collapse: collapse; table-layout: fixed; text-align: left; font-size: var(--small); }
.trace-register-table th { padding: var(--s2); background: var(--brand-wash); color: var(--ink); font-weight: var(--w-medium); vertical-align: top; }
.trace-register-table th:nth-child(1) { width: 22%; }
.trace-register-table th:nth-child(2) { width: 16%; }
.trace-register-table th:nth-child(3) { width: 25%; }
.trace-register-table th:nth-child(4) { width: 25%; }
.trace-register-table th:nth-child(5) { width: 12%; }
.trace-register-table td { padding: var(--s2); vertical-align: top; }
.trace-register-table tbody tr + tr { border-top: 1px solid var(--line); }
.trace-row-field { display: grid; min-width: 0; }
.trace-row-field + .trace-row-field { margin-top: var(--s1); }
.trace-row-input { display: block; width: 100%; min-width: 0; min-height: 40px; padding: var(--s1); border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: var(--small); line-height: 1.6; }
textarea.trace-row-input { min-height: 96px; resize: vertical; }
.trace-row-type { display: inline-block; margin-bottom: var(--s1); color: var(--muted); font-size: var(--tiny); }
.trace-remove { max-width: 100%; min-height: 40px; height: auto; padding: var(--s1); white-space: normal; line-height: 1.4; }
.trace-local-note { display: flex; align-items: flex-start; gap: var(--s2); margin-top: var(--s3); }
.trace-local-note > svg { flex: none; width: 20px; height: 20px; margin-top: var(--s0); color: var(--brand); }
.trace-local-note p { color: var(--muted); font-size: var(--tiny); line-height: 1.8; }
.trace-route-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: var(--s5); }
.trace-route-copy { min-width: 0; }
.trace-route-paragraph { margin-top: var(--s2); color: var(--muted); }
.trace-route-window { min-width: 0; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-win); overflow: hidden; }
.trace-diagram-label { padding: var(--s2) var(--s3); color: var(--muted); font-size: var(--tiny); }
.trace-route-line { display: grid; grid-template-columns: 36px minmax(0, 1fr) 24px; align-items: center; gap: var(--s1) var(--s2); padding: var(--s3); }
.trace-source-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--brand-wash); color: var(--brand); font-size: var(--small); font-weight: var(--w-medium); }
.trace-route-line strong { display: block; font-size: var(--small); font-weight: var(--w-medium); }
.trace-route-line div > span { display: block; color: var(--muted); font-size: var(--tiny); }
.trace-route-arrow { position: relative; display: block; width: 24px; height: 1px; background: var(--amber); }
.trace-route-arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid var(--amber); border-right: 1px solid var(--amber); transform: rotate(45deg); }
.trace-route-line code { grid-column: 2 / -1; font-family: var(--font-mono); color: var(--brand); font-size: var(--small); letter-spacing: 0; overflow-wrap: anywhere; }
.trace-route-destination { display: flex; align-items: flex-start; gap: var(--s2); padding: var(--s3); background: var(--paper-2); color: var(--ink); }
.trace-route-destination > svg { flex: none; width: 24px; height: 24px; margin-top: var(--s0); color: var(--brand); }
.trace-route-destination strong { font-size: var(--small); font-weight: var(--w-medium); }
.trace-route-destination p { margin-top: var(--s1); color: var(--muted); font-size: var(--small); }
.trace-lifetime-note { margin-top: var(--s5); padding: var(--s3) var(--s4); border-radius: var(--r-card); background: var(--brand-wash); color: var(--ink); }
.trace-lifetime-note p { margin-top: var(--s2); color: var(--muted); }
.trace-check-section { background: var(--paper-2); color: var(--ink); }
.trace-check-intro { max-width: 800px; color: var(--muted); }
.trace-check-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s4); list-style: none; }
.trace-check-steps > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; gap: var(--s2); }
.trace-step-number { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--amber); color: var(--ink); font-size: var(--small); }
.trace-check-steps p { margin-top: var(--s2); color: var(--muted); }
.trace-explanations { margin-top: var(--s4); background: var(--paper); color: var(--ink); }
.trace-explanations .data-table { min-width: 720px; }
.trace-explanations tbody th { width: 18%; background: var(--paper); color: var(--ink); }
.trace-explanations tbody td { width: 41%; }
.trace-check-after { max-width: 880px; margin-top: var(--s4); color: var(--muted); }
.trace-stop-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s5); align-items: start; }
.trace-stop-list { display: grid; gap: var(--s4); padding-left: var(--s3); color: var(--brand); }
.trace-stop-list li { padding-left: var(--s1); }
.trace-stop-list h3 { color: var(--ink); }
.trace-stop-list p { margin-top: var(--s1); color: var(--muted); }
.trace-next .trace-next-links { margin-top: var(--s3); font-size: var(--small); }
.trace-toast { max-width: min(480px, calc(100% - 32px)); }

@media (max-width: 1100px) {
  .trace-compose { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trace-add { width: 100%; }
  .trace-workbench { padding: var(--s3); }
  .trace-check-steps { gap: var(--s3); }
}

@media (max-width: 860px) {
  .trace-hero { padding-top: var(--s4); padding-bottom: var(--s5); }
  .trace-desktop-break { display: none; }
  .trace-hero .actions { justify-content: center; }
  .trace-boundary-grid, .trace-route-layout, .trace-stop-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .trace-boundary { padding-block: var(--s5); }
  .trace-section-heading { flex-direction: column; align-items: flex-start; gap: var(--s3); }
  .trace-heading-note { flex: none; max-width: 640px; }
  .trace-heading-note br { display: none; }
  .trace-check-steps { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .trace-route-window { width: 100%; max-width: 640px; }
  .trace-lifetime-note { margin-top: var(--s4); padding: var(--s3); }
  .trace-register-heading { align-items: flex-start; flex-wrap: wrap; }
  .trace-workbench { padding: var(--s3); }
  .trace-type-menu { min-width: 0; }
}

@media (max-width: 560px) {
  .trace-compose { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .trace-workbench { padding: var(--s2); }
  .trace-hero .actions > .btn { height: auto; min-height: 48px; padding-block: var(--s1); white-space: normal; line-height: 1.4; }
  .trace-route-line { padding: var(--s2); gap: var(--s1); }
  .trace-diagram-label, .trace-route-destination { padding: var(--s2); }
  .trace-route-line code { grid-column: 1 / -1; }
  .trace-route-destination { gap: var(--s1); }
  .trace-register-empty { padding: var(--s3) var(--s2); }
  .trace-local-note { gap: var(--s1); }
  .trace-stop-list { padding-left: var(--s2); }
  .trace-evidence-note { padding: var(--s2); }
}


/* Promotional signup guidance */
.promo-hero { padding-bottom: 0; overflow: hidden; background: var(--paper-2); color: var(--ink); }
.promo-hero h1 { font-size: var(--h1); font-weight: var(--w-regular); line-height: 1.3; font-synthesis: none; }
.promo-hero .section-intro { max-width: 640px; }
.promo-hero .fine { max-width: 640px; margin-inline: auto; }
.promo-crumbs { justify-content: center; margin-bottom: var(--s4); }
.promo-landscape { width: min(960px, 100%); height: auto; margin: var(--s3) auto 0; }
.promo-heading { max-width: none; }
.promo-heading .section-intro { font-size: var(--body); font-weight: var(--w-regular); }
.promo-heading-center { margin-inline: auto; text-align: center; }
.promo-card-label { margin-bottom: var(--s3); color: var(--brand); font-size: var(--tiny); font-weight: var(--w-medium); }
.promo-card-link { display: inline-block; margin-top: var(--s3); font-size: var(--small); }
.promo-flow-section { background: var(--paper-2); color: var(--ink); }
.promo-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s5); align-items: start; }
.promo-steps { display: grid; gap: var(--s4); padding: 0; list-style: none; }
.promo-steps > li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s3); align-items: start; }
.promo-step-number { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--amber); color: var(--ink); font-family: var(--font-mono); font-size: var(--body); line-height: 1; }
.promo-steps h3 { margin-bottom: var(--s1); }
.promo-steps p { color: var(--muted); font-size: var(--body); }
.promo-example-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--s4); margin-top: var(--s5); }
.promo-mail-example { min-width: 0; margin: 0; }
.promo-mail-example .slice { grid-template-columns: 36px minmax(0, 1fr) auto; }
.promo-mail-example .slice > div { min-width: 0; }
.promo-mail-example .slice > div > span { display: block; overflow-wrap: anywhere; }
.promo-letter { padding: var(--s3); color: var(--ink); font-size: var(--small); }
.promo-letter .doc-brand { margin-bottom: var(--s2); }
.promo-letter .doc-code { flex-wrap: wrap; }
.promo-letter .doc-table { grid-template-columns: auto minmax(0, 1fr); padding-inline: var(--s2); gap: var(--s1) var(--s2); }
.promo-letter .doc-table dd { min-width: 0; overflow-wrap: anywhere; }
.promo-letter .doc-foot { margin-top: var(--s3); }
.promo-mail-example figcaption { padding: var(--s4) var(--s3) 0; }
.promo-mail-example figcaption p { margin-top: var(--s2); color: var(--muted); font-size: var(--body); }
.promo-case-copy { margin-top: var(--s2); color: var(--muted); font-size: var(--body); }
.promo-keep-note { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s4); align-items: center; margin-top: var(--s4); padding: var(--s4); border-radius: var(--r-card); background: var(--brand-wash); color: var(--ink); }
.promo-keep-note p { max-width: 800px; margin-top: var(--s2); color: var(--muted); font-size: var(--body); }
.promo-keep-note .btn { align-self: center; }
.promo-lifetime-list { display: grid; gap: var(--s3); }
.promo-lifetime-list > div { padding: var(--s3); border-radius: var(--r-card); background: var(--paper); color: var(--ink); }
.promo-lifetime-list dt { margin-bottom: var(--s1); font-size: var(--h3); font-weight: var(--w-strong); }
.promo-lifetime-list dd { color: var(--muted); font-size: var(--body); }
.promo-after-note { margin-top: var(--s4); color: var(--muted); font-size: var(--small); }
.promo-final .fine { max-width: 640px; margin: var(--s3) auto 0; font-size: var(--tiny); }
.promo-final .actions { margin-top: var(--s4); }

@media (max-width: 860px) {
  .promo-hero { padding-top: var(--s4); }
  .promo-hero .actions { gap: var(--s1); }
  .promo-hero .actions .btn { min-height: 48px; height: auto; max-width: 100%; padding-block: var(--s1); white-space: normal; line-height: 1.4; }
  .promo-landscape { margin-top: var(--s4); min-height: 104px; object-fit: cover; }
  .promo-split { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .promo-example-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s5); margin-top: var(--s4); }
  .promo-mail-example figcaption { padding-inline: 0; }
  .promo-keep-note { grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding: var(--s3); }
  .promo-keep-note .btn { justify-self: start; }
  .promo-steps > li { gap: var(--s2); }
}

@media (max-width: 560px) {
  .promo-hero h1 { font-size: var(--h1); }
  .promo-crumbs { margin-bottom: var(--s3); }
  .promo-letter { padding: var(--s2); }
  .promo-mail-example .slice { padding-inline: var(--s2); gap: var(--s1); }
  .promo-steps > li { grid-template-columns: 40px minmax(0, 1fr); }
  .promo-letter .doc-code { padding-inline: var(--s2); }
}


/* Searchable mail glossary */
.glossary-hero { background: var(--paper-2); color: var(--ink); }
.glossary-hero .section-intro { max-width: 640px; }
.glossary-postmark { width: 240px; margin: var(--s4) auto 0; color: var(--brand); }
.glossary-postmark svg { width: 100%; height: auto; }
.glossary-opening { padding-top: var(--s6); }
.glossary-opening > .wrap > .section-intro { max-width: 800px; }
.glossary-primer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s4); }
.glossary-primer-item { min-width: 0; }
.glossary-index { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-bottom: var(--s2); border-radius: 50%; background: var(--amber); color: var(--ink); font-family: var(--font-mono); font-size: var(--small); }
.glossary-primer-item h3 { font-size: var(--h3); }
.glossary-primer-item p { margin-top: var(--s2); color: var(--muted); font-size: var(--body); }
.glossary-opening-note { max-width: 800px; margin-top: var(--s4); color: var(--muted); font-size: var(--small); }
.glossary-browser-heading { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s3); align-items: start; }
.glossary-browser-heading .dot-icon { margin-bottom: 0; color: var(--ink); }
.glossary-browser-heading .section-intro { max-width: 800px; }
.glossary-controls { margin-top: var(--s4); padding: var(--s3); border-radius: var(--r-card); background: var(--brand-wash); color: var(--ink); }
.glossary-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--s2); }
.glossary-search > .btn { align-self: start; margin-top: var(--s4); height: 48px; background: var(--paper); color: var(--brand); }
.glossary-search > .btn:hover { background: var(--brand); color: var(--on-dark); }
.glossary-groups { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s3); }
.glossary-group-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); min-height: 40px; max-width: 100%; padding: var(--s1) var(--s2); border: 0; border-radius: 999px; background: var(--paper); color: var(--brand); font-size: var(--small); line-height: 1.5; cursor: pointer; }
.glossary-group-button > span { font-family: var(--font-mono); font-size: var(--tiny); }
.glossary-group-button:hover { background: var(--fog-1); color: var(--on-dark); }
.glossary-group-button[aria-pressed="true"] { background: var(--brand); color: var(--on-dark); }
.glossary-result-count { margin-top: var(--s3); color: var(--muted); font-size: var(--small); font-variant-numeric: tabular-nums; }
.glossary-result-section { margin-top: var(--s5); }
.glossary-section-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); margin-bottom: var(--s3); }
.glossary-section-heading h2 { font-size: var(--h2-inline); font-weight: var(--w-medium); }
.glossary-section-heading p { color: var(--muted); font-size: var(--small); }
.glossary-entries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--s3); }
.glossary-entry { min-width: 0; padding: var(--s3); border-radius: var(--r-card); background: var(--paper-2); color: var(--ink); scroll-margin-top: calc(var(--header-h) + var(--s3)); }
.glossary-entry dt { display: grid; gap: var(--s0); margin-bottom: var(--s2); font-size: var(--h3); font-weight: var(--w-strong); line-height: 1.5; }
.glossary-entry dt > span { color: var(--muted); font-size: var(--tiny); font-weight: var(--w-regular); letter-spacing: 0; }
.glossary-entry dd { font-size: var(--body); line-height: 1.8; }
.glossary-entry dd p + p { margin-top: var(--s2); }
.glossary-entry dd strong { display: block; margin-bottom: var(--s0); color: var(--ink); font-size: var(--small); font-weight: var(--w-medium); }
.glossary-entry dd > p:not(:first-child) { color: var(--muted); }
.glossary-entry .glossary-example { padding-left: var(--s2); border-left: 1px solid var(--line-strong); }
.glossary-entry .glossary-entry-action { font-size: var(--small); }
.glossary-entry a { text-decoration: underline; text-underline-offset: 3px; }
.glossary-no-match { max-width: 560px; margin: var(--s4) auto 0; padding: var(--s3); border-radius: var(--r-card); background: var(--paper-2); color: var(--ink); text-align: center; }
.glossary-no-match > svg { width: 48px; height: 48px; margin: 0 auto var(--s2); color: var(--brand); }
.glossary-no-match p { margin-top: var(--s2); color: var(--muted); font-size: var(--small); }
.glossary-browser-note { max-width: 800px; margin-top: var(--s4); color: var(--muted); font-size: var(--small); }
.glossary-contrasts { display: grid; gap: var(--s3); margin-top: var(--s4); }
.glossary-contrast { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s1) var(--s4); padding: var(--s3); background: var(--brand-wash); color: var(--ink); border-radius: var(--r-card); }
.glossary-equation { grid-row: span 2; align-self: center; font-size: var(--body); font-weight: var(--w-medium); }
.glossary-equation > span { padding-inline: var(--s1); color: var(--brand); font-family: var(--font-mono); }
.glossary-contrast h3 { font-size: var(--h3); }
.glossary-contrast > p:last-child { color: var(--muted); font-size: var(--body); }
.glossary-next { background: var(--paper-2); color: var(--ink); }
.glossary-reading-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s4); }
.glossary-reading-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); color: var(--ink); }
.glossary-reading-card:hover { background: var(--brand-wash); color: var(--ink); text-decoration: none; }
.glossary-reading-label { color: var(--muted); font-size: var(--tiny); }
.glossary-reading-card h3 { margin-top: var(--s3); }
.glossary-reading-card p { margin-top: var(--s2); color: var(--muted); font-size: var(--body); }
.glossary-reading-link { display: block; margin-top: auto; padding-top: var(--s4); color: var(--brand); font-size: var(--small); font-weight: var(--w-medium); }
.glossary-immediate { margin-top: var(--s5); }
.glossary-immediate > p { max-width: 720px; margin-inline: auto; }
.glossary-immediate > .fine { font-size: var(--tiny); }
.glossary-support { max-width: 800px; margin: var(--s5) auto 0; padding: var(--s3); border-radius: var(--r-card); background: var(--paper-2); color: var(--ink); }
.glossary-support p { margin-top: var(--s2); color: var(--muted); font-size: var(--body); }
.glossary-support .btn { margin-top: var(--s3); }

@media (max-width: 860px) {
  .glossary-opening { padding-top: var(--s5); }
  .glossary-primer { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .glossary-primer-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--s2); align-items: start; }
  .glossary-index { grid-row: span 2; margin-bottom: 0; }
  .glossary-primer-item p { grid-column: 2; margin-top: var(--s1); }
  .glossary-browser-heading { grid-template-columns: minmax(0, 1fr); }
  .glossary-entries { grid-template-columns: minmax(0, 1fr); }
  .glossary-contrast { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .glossary-equation { grid-row: auto; margin-bottom: var(--s1); }
  .glossary-reading-grid { grid-template-columns: minmax(0, 1fr); }
  .glossary-reading-link { padding-top: var(--s3); }
  .glossary-search { grid-template-columns: minmax(0, 1fr); }
  .glossary-search > .btn { margin-top: 0; justify-self: start; height: 40px; }
}

@media (max-width: 560px) {
  .glossary-hero h1 { font-size: var(--h2); }
  .glossary-controls { padding: var(--s2); }
  .glossary-groups { gap: var(--s1); }
  .glossary-group-button { padding-inline: var(--s2); }
  .glossary-entry, .glossary-contrast, .glossary-reading-card { padding: var(--s2); }
  .glossary-section-heading { display: block; }
  .glossary-section-heading p { margin-top: var(--s1); }
  .glossary-support { padding: var(--s2); }
  .glossary-support .btn { max-width: 100%; overflow-wrap: anywhere; }
}


/* Access page: introduction followed by a single verification surface. */
.hush-access-path {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

.hush-access-intro {
  width: 100%;
  min-width: 0;
  padding-block: var(--s4) var(--s5);
  text-align: center;
}

.hush-access-intro .dot-icon {
  margin-inline: auto;
}

.hush-access-intro .section-intro {
  max-width: 640px;
  margin-inline: auto;
}

.hush-access-intro .access-postmark {
  margin-inline: auto;
}

.hush-access-entry {
  width: min(640px, 100%);
  min-width: 0;
  padding: var(--s4);
  border-radius: var(--r-card);
  background: var(--paper-2);
  color: var(--ink);
  box-shadow: var(--shadow-win);
}

.hush-access-entry h2 {
  margin-bottom: var(--s3);
  font-size: var(--h2-inline);
  font-weight: var(--w-medium);
}

.hush-access-entry .access-card-lead {
  margin-bottom: var(--s3);
  color: var(--muted);
  font-size: var(--small);
}

.hush-access-entry .login-pane {
  min-width: 0;
}

.hush-access-entry .form-stack > .btn {
  width: 100%;
}

.hush-access-entry > .form-notice {
  margin-bottom: var(--s3);
}

.hush-access-entry .input {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line-strong);
}

.promo-heading {
  max-width: none;
}

.promo-heading.promo-heading-center {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.section-head,
.content-head {
  margin-bottom: var(--s4);
}

section .eyebrow + h1,
section .eyebrow + h2 {
  margin-top: var(--s3);
}

.mail-empty > .empty-state {
  min-height: 0;
  height: auto;
  padding: var(--s2);
  border-radius: var(--r-control);
  background: var(--paper-2);
  color: var(--ink);
}

.alias-input-group {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper);
  padding-right: var(--s2);
}

.alias-input-group .input {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}

.alias-input-group:focus-within {
  border-color: var(--ink);
  outline: none;
}

.alias-input-group:has(.input[aria-invalid="true"]) {
  border-color: var(--danger);
}

.twofa-status {
  display: flex;
  align-items: center;
}

[data-2fa-badge] {
  margin: 0;
}

.twofa-status [data-2fa-badge] {
  margin: 0;
}

.btn-line {
  border-color: var(--line);
}

@media (max-width: 560px) {
  .hush-access-intro {
    padding-top: 0;
    padding-bottom: var(--s5);
  }

  .hush-access-entry {
    padding: var(--s3);
  }
}


/* Local alignment and grouped address controls */
.promo-heading {
  max-width: none;
}

.alias-compose .alias-input-group input[data-alias-prefix] {
  border: 0;
  background: transparent;
  color: var(--ink);
}

.alias-compose .alias-input-group:focus-within {
  border-color: var(--ink);
  outline: none;
  border-radius: 999px;
}

.alias-compose .alias-input-group .input:focus {
  border: 0;
  outline: none;
  box-shadow: none;
}

.alias-compose [data-alias-prefix] {
  animation: none;
}


/* Journal: open paper, amber anchors and quiet reading surfaces. */
.notes-main {
  padding-bottom: var(--s6);
}

.notes-index-hero {
  padding-block: var(--s6) var(--s5);
  background: var(--paper);
  color: var(--ink);
}

.notes-anchor {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 auto var(--s4);
  border-radius: 50%;
  background: var(--amber);
  color: var(--ink);
}

.notes-anchor svg {
  width: 24px;
  height: 24px;
}

.notes-index-hero .eyebrow {
  margin-bottom: var(--s3);
}

.notes-index-hero h1 {
  max-width: 960px;
  margin-inline: auto;
  font-size: var(--h1);
  font-weight: var(--w-regular);
  font-synthesis: none;
  line-height: 1.3;
}

.notes-post-count {
  display: block;
  width: fit-content;
  margin: var(--s3) auto 0;
  padding: var(--s0) var(--s2);
  background: var(--brand-wash);
  color: var(--brand);
  font-size: var(--tiny);
  line-height: 1.75;
}

.notes-index-hero .section-intro {
  max-width: 720px;
  margin: var(--s3) auto 0;
  color: var(--muted);
  font-size: var(--body);
  line-height: 1.8;
}

.notes-list-section {
  padding-block: 0 var(--s4);
}

.notes-grid {
  align-items: stretch;
  gap: var(--s4);
  margin-top: 0;
}

.notes-post-card {
  min-width: 0;
  padding: var(--s4);
  border: 0;
  border-radius: var(--r-card);
  background: var(--paper-2);
  color: var(--ink);
  transition: background .2s ease, color .2s ease;
}

.notes-post-card:hover {
  background: var(--brand-wash);
  color: var(--ink);
  text-decoration: none;
}

.notes-post-card:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: var(--s0);
}

.notes-post-card > .status-pill {
  margin: 0;
  padding: var(--s0) var(--s1);
  background: var(--paper);
  color: var(--brand);
}

.notes-post-card h2 {
  margin-top: var(--s3);
  font-size: var(--h2-inline);
  font-weight: var(--w-medium);
  line-height: 1.6;
  letter-spacing: normal;
}

.notes-post-card > p {
  margin-top: var(--s2);
  margin-bottom: var(--s4);
  color: var(--muted);
  font-size: var(--body);
  font-weight: var(--w-regular);
  line-height: 1.8;
}

.notes-post-card .article-meta {
  justify-content: flex-start;
  gap: var(--s1) var(--s3);
  margin-top: auto;
  padding-top: 0;
  color: var(--muted);
  font-size: var(--tiny);
  line-height: 1.75;
}

.notes-post-card time {
  font-size: var(--tiny);
}

.notes-card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s3);
  color: var(--brand);
  font-size: var(--small);
  font-weight: var(--w-medium);
}

.notes-link-arrow {
  position: relative;
  display: inline-block;
  flex: none;
  width: 24px;
  height: 1px;
  background: currentColor;
}

.notes-link-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

.notes-index .site-footer {
  margin-top: 0;
}

/* Article shell uses the shared 1200px reading baseline. */
.notes-article .article-hero {
  padding-block: var(--s5);
  background: var(--paper);
  color: var(--ink);
}

.notes-article .article-hero .breadcrumbs {
  margin-top: 0;
  margin-bottom: var(--s4);
  font-size: var(--tiny);
  line-height: 1.8;
}

.notes-article .breadcrumbs a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.notes-article .article-hero .eyebrow {
  margin-bottom: var(--s3);
  color: var(--muted);
  font-size: var(--small);
}

.notes-article .article-hero h1 {
  max-width: 1040px;
  margin-top: 0;
  font-size: var(--h1);
  font-weight: var(--w-regular);
  font-synthesis: none;
  line-height: 1.3;
  letter-spacing: normal;
  overflow-wrap: anywhere;
}

.notes-article .article-hero h1 em {
  font-style: normal;
  font-weight: inherit;
}

.notes-article .article-hero .section-intro {
  max-width: 800px;
  margin-top: var(--s3);
  font-size: var(--body);
  font-weight: var(--w-regular);
  line-height: 1.8;
}

.notes-article .article-meta {
  align-items: center;
  gap: var(--s2) var(--s3);
  margin-top: var(--s3);
  color: var(--muted);
  font-size: var(--small);
  line-height: 1.75;
}

.notes-article .article-meta .status-pill {
  margin: 0;
  padding: var(--s0) var(--s1);
  background: var(--brand-wash);
  color: var(--brand);
  font-size: var(--tiny);
}

.notes-article .article-meta time {
  color: var(--muted);
  font-size: var(--small);
}

.notes-article .article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 256px;
  align-items: start;
  gap: var(--s5);
  padding-bottom: var(--s6);
  overflow: visible;
}

.notes-article .article-body {
  min-width: 0;
  max-width: 800px;
}

.notes-article .prose {
  font-size: var(--body);
  font-weight: var(--w-regular);
  line-height: 1.9;
}

.notes-article .prose h2 {
  margin: var(--s5) 0 var(--s3);
  color: var(--ink);
  font-size: var(--h2);
  font-weight: var(--w-medium);
  line-height: 1.5;
  letter-spacing: normal;
  scroll-margin-top: calc(var(--header-h) + var(--s3));
}

.notes-article .prose h3 {
  margin: var(--s4) 0 var(--s2);
  color: var(--ink);
  font-size: var(--h3);
  font-weight: var(--w-strong);
  line-height: 1.6;
  scroll-margin-top: calc(var(--header-h) + var(--s3));
}

.notes-article .prose > :first-child,
.notes-article .prose > section:first-child > h2:first-child {
  margin-top: 0;
}

.notes-article .prose p + p {
  margin-top: var(--s2);
}

.notes-article .prose strong {
  font-weight: var(--w-strong);
}

.notes-article .prose a:not(.btn) {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.notes-article .prose ul,
.notes-article .prose ol {
  margin-block: var(--s3) var(--s4);
  padding-left: var(--s3);
}

.notes-article .prose li + li {
  margin-top: var(--s1);
}

.notes-article .prose blockquote {
  margin: var(--s4) 0;
  padding: var(--s3);
  border: 0;
  border-radius: var(--r-card);
  background: var(--brand-wash);
  color: var(--brand);
}

.notes-article .prose figure {
  margin: var(--s4) 0;
}

.notes-article .prose figcaption {
  margin-top: var(--s2);
  color: var(--muted);
  font-size: var(--tiny);
  line-height: 1.8;
}

.notes-article .prose .table-scroll {
  max-width: 100%;
  margin-block: var(--s3) var(--s4);
  background: var(--paper-2);
  color: var(--ink);
}

.notes-article .prose .data-table {
  min-width: 640px;
}

.notes-article .prose .data-table caption {
  padding: var(--s2) var(--s3);
  background: var(--paper-2);
  color: var(--muted);
  text-align: left;
  font-size: var(--small);
}

.notes-article .prose .data-table tbody th {
  background: transparent;
  color: var(--ink);
  font-weight: var(--w-medium);
}

.notes-article .prose .card,
.notes-article .prose .choice-grid {
  margin-block: var(--s3) var(--s4);
}

.notes-article .article-note {
  margin-block: var(--s3) var(--s4);
  padding: var(--s3);
  border-radius: var(--r-card);
  background: var(--paper-2);
  color: var(--ink);
}

.notes-article .article-note > p {
  color: var(--muted);
  font-size: var(--small);
  font-weight: var(--w-regular);
}

.notes-article .article-note > p + p {
  margin-top: var(--s2);
}

.notes-article .article-note > h3 {
  margin-top: 0;
  margin-bottom: var(--s2);
}

.notes-article .article-toc {
  position: sticky;
  top: calc(var(--header-h) + var(--s2));
  min-width: 0;
  padding: var(--s3);
  border: 0;
  border-radius: var(--r-card);
  background: var(--paper-2);
  color: var(--ink);
  font-size: var(--small);
  line-height: 1.8;
}

.notes-article .article-toc h2,
.notes-article .article-toc summary {
  margin: 0;
  color: var(--ink);
  font-size: var(--body);
  font-weight: var(--w-medium);
  line-height: 1.6;
}

.notes-article .article-toc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: 0;
  list-style: none;
  cursor: pointer;
}

.notes-article .article-toc summary::-webkit-details-marker {
  display: none;
}

.notes-article .article-toc details[open] > summary .chev {
  transform: translateY(2px) rotate(225deg);
}

.notes-article .article-toc ol {
  display: grid;
  gap: var(--s2);
  margin: var(--s3) 0 0;
  padding-left: var(--s2);
}

.notes-article .article-toc li {
  padding-left: var(--s0);
  color: var(--muted);
}

.notes-article .article-toc a {
  color: var(--brand);
  overflow-wrap: anywhere;
}

.notes-article .article-toc .count-chip,
.notes-article .article-toc [data-post-count] {
  display: inline-flex;
  width: fit-content;
  margin: var(--s2) 0 0;
  padding: var(--s0) var(--s1);
  background: var(--paper);
  color: var(--brand);
  font-size: var(--tiny);
}

.notes-article .article-end {
  margin-top: var(--s5);
  padding: var(--s4);
  border-radius: var(--r-panel);
  background: var(--brand-wash);
  color: var(--ink);
  text-align: center;
}

.notes-article .article-end h2 {
  margin: 0;
  color: var(--ink);
  font-size: var(--h2);
  font-weight: var(--w-regular);
  line-height: 1.5;
}

.notes-article .article-end p {
  max-width: 640px;
  margin: var(--s3) auto 0;
  color: var(--muted);
  font-size: var(--body);
}

.notes-article .article-end .actions {
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  margin-top: var(--s4);
}

.notes-article .article-end .btn {
  max-width: 100%;
  height: auto;
  min-height: 48px;
  padding: var(--s2) var(--s3);
  background: var(--ink);
  color: var(--on-dark);
  border-color: transparent;
  white-space: normal;
  line-height: 1.4;
}

.notes-article .article-end .btn:hover {
  background: var(--brand);
  color: var(--on-dark);
  border-color: transparent;
}

.notes-article .article-end .article-secondary-link {
  max-width: 100%;
  color: var(--brand);
  font-size: var(--small);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.notes-article .recommend-float {
  z-index: 45;
  right: var(--s3);
  bottom: var(--s3);
  width: min(320px, calc(100% - 32px));
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-pop);
}

.notes-article .recommend-art {
  min-height: 96px;
  padding: var(--s3);
  background: var(--brand-wash);
  color: var(--brand);
}

.notes-article .recommend-art > svg {
  width: 100%;
  height: auto;
}

.notes-article .recommend-copy {
  padding: var(--s3);
  background: var(--paper);
  color: var(--ink);
}

.notes-article .recommend-copy h3 {
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-size: var(--h3);
  font-weight: var(--w-medium);
}

.notes-article .recommend-copy p {
  margin-top: var(--s2);
  color: var(--muted);
  font-size: var(--small);
}

.notes-article .recommend-copy .actions {
  justify-content: flex-start;
  margin-top: var(--s3);
}

.notes-article .recommend-copy .btn {
  width: auto;
  max-width: 100%;
  height: auto;
  min-height: 40px;
  padding: var(--s1) var(--s2);
  background: var(--ink);
  color: var(--on-dark);
  border-color: transparent;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.notes-article .recommend-copy .btn:hover {
  background: var(--brand);
  color: var(--on-dark);
}

.notes-article .recommend-float .float-close {
  top: var(--s1);
  right: var(--s1);
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  background: var(--paper);
  color: var(--ink);
}

.notes-article .recommend-float .float-close:hover {
  background: var(--ink);
  color: var(--on-dark);
}

@media (max-width: 1100px) {
  .notes-article .article-layout {
    grid-template-columns: minmax(0, 1fr) 224px;
    gap: var(--s4);
  }

  .notes-grid {
    gap: var(--s3);
  }
}

@media (max-width: 860px) {
  .notes-main {
    padding-bottom: var(--s5);
  }

  .notes-index-hero {
    padding-block: var(--s5) var(--s4);
  }

  .notes-anchor {
    margin-bottom: var(--s3);
  }

  .notes-index-hero h1 {
    max-width: 640px;
    font-size: var(--h1);
  }

  .notes-desktop-break {
    display: none;
  }

  .notes-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s3);
  }

  .notes-list-section {
    padding-bottom: var(--s3);
  }

  .notes-post-card {
    padding: var(--s3);
  }

  .notes-post-card > p {
    margin-bottom: var(--s3);
  }

  .notes-article .article-hero {
    padding-block: var(--s4);
  }

  .notes-article .article-hero .breadcrumbs {
    margin-bottom: var(--s3);
  }

  .notes-article .article-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s4);
    padding-bottom: var(--s5);
  }

  .notes-article .article-toc {
    position: static;
    grid-row: 1;
    padding: var(--s2);
  }

  .notes-article .article-toc details:not([open]) {
    margin: 0;
    padding: 0;
  }

  .notes-article .article-toc ol {
    margin-top: var(--s2);
  }

  .notes-article .prose h2 {
    font-size: var(--h2);
    margin-top: var(--s4);
  }

  .notes-article .article-end {
    padding: var(--s4) var(--s3);
  }

  .notes-article .recommend-float {
    right: var(--s2);
    bottom: var(--s2);
  }
}

@media (max-width: 560px) {
  .notes-title-break {
    display: none;
  }

  .notes-index-hero h1 {
    max-width: 100%;
    text-wrap: balance;
  }

  .notes-post-card h2 {
    font-size: var(--h2-inline);
  }

  .notes-post-card .article-meta {
    gap: var(--s1) var(--s2);
  }

  .notes-article .article-hero h1 {
    font-size: var(--h1);
    line-height: 1.4;
  }

  .notes-article .article-meta {
    gap: var(--s1) var(--s2);
  }

  .notes-article .article-end .actions {
    flex-direction: column;
    align-items: center;
  }

  .notes-article .prose .data-table th,
  .notes-article .prose .data-table td {
    padding: var(--s2);
  }

  .notes-article .recommend-copy {
    padding: var(--s2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .notes-post-card {
    transition: none;
  }
}


/* Coupon lifecycle article */
.lifecycle-hero {
  padding-top: var(--s6);
  padding-bottom: var(--s5);
}
.lifecycle-hero .breadcrumbs { margin-bottom: var(--s4); }
.lifecycle-hero .eyebrow { margin-bottom: var(--s3); }
.lifecycle-hero h1 {
  max-width: 1040px;
  font-size: var(--h1);
  font-weight: var(--w-regular);
  font-synthesis: none;
  line-height: 1.3;
  letter-spacing: normal;
}
.lifecycle-hero .section-intro { max-width: 720px; margin-top: var(--s3); }
.lifecycle-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s2);
  max-width: 100%;
  margin-top: var(--s3);
  padding: var(--s1) var(--s2);
  border-radius: 999px;
  background: var(--brand-wash);
  color: var(--brand);
  font-size: var(--tiny);
  line-height: 1.6;
}
.lifecycle-meta time { font-variant-numeric: tabular-nums; }
.lifecycle-meta-dot { width: 4px; height: 4px; flex: none; border-radius: 50%; background: currentColor; opacity: .5; }
.lifecycle-layout { padding-bottom: var(--s5); }
.lifecycle-body > section { scroll-margin-top: calc(var(--header-h) + var(--s3)); }
.lifecycle-body > section + section { margin-top: var(--s5); }
.lifecycle-body > section > h2 {
  margin: 0 0 var(--s3);
  font-size: var(--h2-inline);
  font-weight: var(--w-medium);
  line-height: 1.5;
}
.lifecycle-body > section > h3 { margin-top: var(--s3); margin-bottom: var(--s2); }
.lifecycle-body li + li { margin-top: var(--s1); }
.lifecycle-body p a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }
.lifecycle-answer {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--s3);
  margin-top: var(--s3);
  margin-bottom: var(--s4);
  padding: var(--s3);
  border-radius: var(--r-card);
  background: var(--brand-wash);
  color: var(--ink);
}
.lifecycle-answer > svg {
  width: 40px;
  height: 40px;
  padding: var(--s1);
  border-radius: 50%;
  background: var(--amber);
  color: var(--ink);
}
.lifecycle-answer h3 { margin: 0 0 var(--s1); font-size: var(--h3); font-weight: var(--w-medium); }
.lifecycle-answer p { color: var(--muted); font-size: var(--body); }
.lifecycle-table-scroll { margin-top: var(--s3); margin-bottom: var(--s4); }
.lifecycle-table { min-width: 640px; }
.lifecycle-table caption {
  padding: var(--s2) var(--s3);
  background: var(--paper-2);
  color: var(--muted);
  text-align: left;
  font-size: var(--small);
}
.lifecycle-table tbody th { width: 18%; background: transparent; color: var(--ink); }
.lifecycle-table td { width: 41%; line-height: 1.8; }
.lifecycle-mail-slices {
  margin-top: var(--s3);
  margin-bottom: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.lifecycle-mail-slices .slice > div { min-width: 0; }
.lifecycle-mail-slices .slice > div > span { display: block; }
.lifecycle-toc { z-index: 3; }
.lifecycle-toc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  list-style: none;
  color: var(--ink);
}
.lifecycle-toc summary::-webkit-details-marker { display: none; }
.lifecycle-toc details[open] summary .chev { transform: translateY(2px) rotate(225deg); }
.lifecycle-toc ol { margin-top: var(--s3); padding-left: var(--s3); gap: var(--s1); }
.lifecycle-toc li { padding-left: var(--s0); line-height: 1.6; }
.lifecycle-toc li::marker { color: var(--muted); font-size: var(--tiny); }
.lifecycle-toc a { color: var(--brand); }
.lifecycle-toc .lifecycle-count {
  display: inline-flex;
  margin-top: var(--s2);
  padding: var(--s0) var(--s1);
  background: var(--paper);
  color: var(--brand);
}
.lifecycle-final-list {
  padding: var(--s3) var(--s3) var(--s3) var(--s4);
  border-radius: var(--r-card);
  background: var(--paper-2);
  color: var(--ink);
}
.lifecycle-end { margin-top: var(--s5); }
.lifecycle-end-mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--s3);
  border-radius: 50%;
  background: var(--amber);
  color: var(--ink);
}
.lifecycle-end-mark svg { width: 48px; height: 48px; }
.lifecycle-body .lifecycle-end > h2 { margin-bottom: 0; }
.lifecycle-body .lifecycle-end .btn {
  height: auto;
  min-height: 48px;
  max-width: 100%;
  padding-block: var(--s1);
  white-space: normal;
  line-height: 1.4;
}
.lifecycle-body .lifecycle-end .btn-ink { border-color: transparent; background: var(--ink); color: var(--on-dark); }
.lifecycle-body .lifecycle-end .btn-ink:hover { border-color: transparent; background: var(--brand); color: var(--on-dark); }
.lifecycle-relay-button,
.lifecycle-body .lifecycle-end .lifecycle-relay-button {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--on-dark);
}
.lifecycle-relay-button:hover,
.lifecycle-body .lifecycle-end .lifecycle-relay-button:hover {
  border-color: var(--fog-1);
  background: var(--fog-1);
  color: var(--on-dark);
}
.lifecycle-end .lifecycle-end-note { margin-top: var(--s3); font-size: var(--tiny); }
.lifecycle-recommend { z-index: 45; width: min(288px, calc(100% - 32px)); }
.lifecycle-recommend-art { padding: var(--s2) var(--s2) 0; }
.lifecycle-recommend-art svg { width: 100%; height: auto; }
.lifecycle-recommend .float-close { position: absolute; top: var(--s1); right: var(--s1); background: var(--paper); color: var(--ink); }
.lifecycle-recommend .float-close:hover { background: var(--ink); color: var(--on-dark); }
.lifecycle-recommend .recommend-copy { padding: var(--s2) var(--s3) var(--s3); }
.lifecycle-recommend h3 { font-size: var(--body); font-weight: var(--w-medium); padding-right: 0; }
.lifecycle-recommend .actions { gap: var(--s1); }
.lifecycle-recommend .btn { flex: 1 1 auto; max-width: 100%; height: auto; min-height: 40px; white-space: normal; line-height: 1.35; }

@media (max-width: 860px) {
  .lifecycle-hero { padding-top: var(--s6); padding-bottom: var(--s4); }
  .lifecycle-title-break { display: none; }
  .lifecycle-layout { gap: var(--s4); }
  .lifecycle-toc { grid-row: 1; position: static; }
  .lifecycle-toc details:not([open]) { padding: 0; }
  .lifecycle-toc ol { margin-top: var(--s3); }
  .lifecycle-body > section + section { margin-top: var(--s4); }
  .lifecycle-body > .lifecycle-end { margin-top: var(--s5); }
}

@media (max-width: 560px) {
  .lifecycle-hero h1 { font-size: var(--h1); }
  .lifecycle-hero .breadcrumbs { margin-bottom: var(--s3); }
  .lifecycle-meta { gap: var(--s1); }
  .lifecycle-answer { grid-template-columns: minmax(0, 1fr); gap: var(--s2); padding: var(--s2); }
  .lifecycle-mail-slices .slice { padding-inline: var(--s2); }
  .lifecycle-table th, .lifecycle-table td { padding: var(--s2); }
  .lifecycle-recommend { width: min(272px, calc(100% - 32px)); }
  .lifecycle-recommend-art { padding-top: var(--s1); }
  .lifecycle-recommend-art svg { height: auto; }
  .lifecycle-recommend .recommend-copy { padding: var(--s2); }
  .lifecycle-recommend .recommend-copy > p { font-size: var(--tiny); }
  .lifecycle-recommend .actions { margin-top: var(--s1); }
}


/* Evidence article */
.evidence-hero {
  padding-block: var(--s6) var(--s5);
}

.evidence-hero .breadcrumbs {
  margin-bottom: var(--s4);
}

.evidence-hero h1 {
  max-width: 960px;
  font-size: var(--h1);
  font-weight: var(--w-regular);
  font-synthesis: none;
  line-height: 1.3;
}

.evidence-hero .section-intro {
  max-width: 800px;
  margin-top: var(--s3);
  font-size: var(--body);
  font-weight: var(--w-regular);
}

.evidence-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s3);
  max-width: 100%;
  margin-top: var(--s3);
  padding: var(--s1) var(--s2);
  border-radius: 999px;
  background: var(--brand-wash);
  color: var(--brand);
  font-size: var(--tiny);
  line-height: 1.75;
}

.evidence-meta time,
.evidence-meta > span {
  display: inline-flex;
  align-items: center;
}

.evidence-layout {
  padding-bottom: var(--s5);
}

.evidence-prose > section {
  scroll-margin-top: calc(var(--header-h) + var(--s3));
}

.evidence-prose > section + section {
  margin-top: var(--s5);
}

.evidence-prose > section > h2 {
  margin-top: 0;
  margin-bottom: var(--s3);
  font-size: var(--h2-inline);
  font-weight: var(--w-medium);
  line-height: 1.5;
}

.evidence-prose h3 {
  margin-top: var(--s3);
  margin-bottom: var(--s2);
  font-size: var(--h3);
  font-weight: var(--w-strong);
}

.evidence-prose li + li {
  margin-top: var(--s1);
}

.evidence-prose p > a,
.evidence-register a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.evidence-table {
  min-width: 640px;
}

.evidence-table caption {
  padding: var(--s2) var(--s3);
  background: var(--paper-2);
  color: var(--muted);
  text-align: left;
  font-size: var(--small);
}

.evidence-table tbody th {
  width: 20%;
  background: var(--paper-2);
  color: var(--ink);
  font-weight: var(--w-medium);
}

.evidence-table td {
  width: 40%;
  line-height: 1.8;
}

.evidence-table:not(:has(tbody th)) td {
  width: auto;
}

.evidence-register {
  display: grid;
  gap: var(--s2);
  margin-block: var(--s3) var(--s4);
}

.evidence-register > div {
  padding: var(--s3);
  border-radius: var(--r-card);
  background: var(--paper-2);
  color: var(--ink);
}

.evidence-register dt {
  margin-bottom: var(--s1);
  color: var(--brand);
  font-size: var(--small);
  font-weight: var(--w-medium);
}

.evidence-register dd {
  color: var(--muted);
  font-size: var(--body);
  line-height: 1.9;
}

.evidence-toc {
  z-index: 3;
  max-height: calc(100dvh - var(--header-h) - var(--s4));
  overflow-y: auto;
}

.evidence-toc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  list-style: none;
}

.evidence-toc summary::-webkit-details-marker {
  display: none;
}

.evidence-toc details[open] > summary .chev {
  transform: translateY(2px) rotate(225deg);
}

.evidence-toc ol {
  gap: var(--s1);
  margin-top: var(--s3);
  padding-left: var(--s3);
  color: var(--muted);
  line-height: 1.6;
}

.evidence-toc li {
  padding-left: var(--s0);
}

.evidence-toc a {
  color: var(--brand);
}

.evidence-count {
  display: inline-flex;
  align-items: center;
  margin-top: var(--s2);
  padding: var(--s0) var(--s2);
  background: var(--brand-wash);
  color: var(--brand);
  font-size: var(--tiny);
}

.evidence-end-mark {
  width: 80px;
  height: 64px;
  margin: 0 auto var(--s3);
  color: var(--brand);
}

.evidence-flag {
  fill: var(--amber);
  stroke: var(--amber-deep);
}

.evidence-prose .evidence-end > h2 {
  margin-bottom: 0;
}

.evidence-end .actions > .btn {
  max-width: 100%;
  min-height: 48px;
  height: auto;
  padding-block: var(--s1);
  background: var(--ink);
  color: var(--on-dark);
  border-color: transparent;
  white-space: normal;
  line-height: 1.4;
}

.evidence-end .actions > .btn:hover {
  background: var(--brand);
  color: var(--on-dark);
  border-color: transparent;
}

.evidence-recommend {
  z-index: 45;
  width: min(288px, calc(100% - 32px));
}

.evidence-recommend-art {
  padding: var(--s2) var(--s3);
  background: var(--brand-wash);
  color: var(--brand);
}

.evidence-recommend-art svg {
  width: 100%;
  height: auto;
}

.evidence-recommend .float-close {
  position: absolute;
  right: var(--s1);
  top: var(--s1);
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line-strong);
}

.evidence-recommend .float-close:hover {
  background: var(--ink);
  color: var(--on-dark);
}

.evidence-recommend .recommend-copy h3 {
  padding-right: 0;
  font-size: var(--h3);
}

.evidence-recommend .actions {
  align-items: stretch;
  gap: var(--s1);
}

.evidence-recommend .actions > .btn {
  flex: 1 1 auto;
  max-width: 100%;
  min-height: 40px;
  height: auto;
  white-space: normal;
  line-height: 1.35;
}

@media (max-width: 860px) {
  .evidence-hero {
    padding-top: var(--s6);
    padding-bottom: var(--s4);
  }

  .evidence-layout {
    gap: var(--s4);
  }

  .evidence-toc {
    max-height: none;
    overflow: visible;
  }

  .evidence-prose > section + section {
    margin-top: var(--s4);
  }

  .evidence-recommend {
    width: min(288px, calc(100% - 32px));
  }

  .evidence-recommend-art {
    padding-block: var(--s1);
  }

  .evidence-recommend-art svg {
    height: auto;
  }

  .evidence-recommend .recommend-copy {
    padding: var(--s2);
  }
}

@media (max-width: 560px) {
  .evidence-hero .breadcrumbs {
    margin-bottom: var(--s3);
  }

  .evidence-meta {
    gap: var(--s1) var(--s2);
    border-radius: var(--r-card);
  }

  .evidence-prose blockquote,
  .evidence-register > div {
    padding: var(--s2);
  }

  .evidence-table th,
  .evidence-table td,
  .evidence-table caption {
    padding: var(--s2);
  }
}


/* Article reading surfaces */
.evidence-page {
  background: var(--paper);
  color: var(--ink);
}

.lifecycle-page {
  background: var(--paper);
  color: var(--ink);
}

.evidence-article {
  min-width: 0;
}

.article-body h2 {
  margin-block: var(--s5) var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: var(--h2-inline);
  font-weight: var(--w-medium);
  line-height: 1.5;
}

.article-body h3 {
  margin-block: var(--s4) var(--s2);
  color: var(--ink);
  font-size: var(--h3);
  font-weight: var(--w-strong);
  line-height: 1.5;
}

.article-body p {
  color: var(--ink);
  font-size: var(--body);
  font-weight: var(--w-regular);
  line-height: 1.9;
}

.article-body ul,
.article-body ol {
  margin-block: var(--s3);
  padding-left: var(--s3);
  color: var(--ink);
  font-size: var(--body);
  font-weight: var(--w-regular);
  line-height: 1.9;
}

.article-body li + li {
  margin-top: var(--s1);
}

.article-cta {
  min-width: 0;
}

.article-body .article-end h2 {
  margin-top: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.article-body .article-end p {
  color: var(--muted);
}

.mail-empty.empty-state {
  width: min(420px, calc(100% - 32px));
  height: auto;
  min-height: 0;
  margin: var(--s2) auto;
  padding: var(--s2);
  border-radius: var(--r-card);
  background: var(--paper-2);
  color: var(--ink);
}

.mail-empty.empty-state p {
  width: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--muted);
}


/* Article closing headings do not inherit document divider rules. */
.article-cta h2 {
  border-bottom: 0;
}

/* Empty cards are the generated element itself, not an inner wrapper. */
.inbox-empty,
.reader-empty-card,
.mail-empty.empty-state {
  width: min(420px, calc(100% - 32px));
  max-width: 100%;
  height: auto;
  min-height: 0;
  margin: 16px auto;
  padding: 16px;
  border-radius: var(--r-card);
  background: var(--paper-2);
  color: var(--ink);
}

[data-rows]:has(> .mail-empty.empty-state) {
  display: grid;
  place-items: center;
}

[data-reader-body]:has(> .mail-empty.empty-state) {
  display: grid;
  place-items: center;
}

/* Outline actions keep their light stroke on both resting and hover states. */
.btn.btn-line {
  border: 1px solid var(--line);
}

.btn.btn-line:hover {
  border-color: var(--line);
}

.prose .btn.btn-line {
  border: 1px solid var(--line);
}

.prose .btn.btn-line:hover {
  border-color: var(--line);
}

/* Real messages sit in the reader column instead of stretching into an empty pane. */
.reader .reader-frame {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  border: 0;
  border-radius: var(--r-control);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
}
.reader.is-real .reader-body {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  min-width: 0;
}
.feature-copy {
  min-width: 0;
}
a.btn.btn-quiet {
  max-width: 100%;
  height: auto;
  min-height: 40px;
  padding-block: var(--s1);
  white-space: normal;
  justify-content: flex-start;
  line-height: 1.45;
  text-align: start;
}

@media (max-width: 860px) {
  .reader.mobile-reader {
    top: var(--header-h);
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0 0 var(--s4);
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
  }
  .reader.mobile-reader .reader-top {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin: 0;
    padding: var(--s2) var(--s3);
    background: var(--paper);
    color: var(--ink);
    border-bottom: 1px solid var(--line);
  }
  .reader.mobile-reader .reader-subject {
    flex: 1;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .reader.mobile-reader .reader-meta,
  .reader.mobile-reader .reader-body {
    margin-inline: var(--s3);
    min-width: 0;
    max-width: calc(100% - (var(--s3) * 2));
  }
}

@media (max-width: 720px) {
  .alias-compose .alias-input-group {
    flex-wrap: nowrap;
    align-items: center;
    min-width: 0;
    max-width: 100%;
  }
  .alias-compose .alias-input-group .input {
    flex: 1 1 0;
    flex-basis: 0;
    width: auto;
    min-width: 0;
  }
  .alias-compose .alias-suffix {
    flex: none;
    max-width: 48%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}