/* goaway -- "quiet paper, one accent". See the design mockup this was built
   from for the full rationale: warm paper ground, hairline borders instead
   of Material elevation, one brand accent plus a separate unsubscribe/allow
   pair instead of a generic red/green convention. */

:root {
  --paper: #faf7f1;
  --paper-2: #f1ece0;
  --ink: #1c1b17;
  --ink-2: #5b5748;
  --line: #e1dbca;
  --brand: #2f5d50;
  --brand-tint: #e4ede7;
  --danger: #b34a3c;
  --danger-tint: #f5e4e0;
  --gold: #9c6b1f;
  --gold-tint: #f3e9d6;

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --radius: 10px;
  --radius-pill: 999px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--brand); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}

h1 { font-size: 32px; }
h2 { font-size: 24px; }

/* ---------- layout shell ---------- */

.topbar {
  height: 64px;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 32px;
  border-bottom: 1px solid var(--line);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 21px;
  color: var(--ink);
  text-decoration: none;
}

.wordmark-icon {
  width: 20px;
  height: 20px;
  display: block;
}

.topbar nav { display: flex; gap: 24px; height: 100%; }

.topbar nav a {
  display: flex;
  align-items: center;
  height: 100%;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
}

.topbar nav a.active {
  color: var(--ink);
  border-bottom-color: var(--brand);
}

.topbar .spacer { flex: 1; }

.user-email {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-2);
}

.inline-form { display: inline; }

.link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--ink-2);
  text-decoration: underline;
  cursor: pointer;
}

main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 48px 32px 96px;
}

main.main-bare {
  max-width: none;
  margin: 0;
  padding: 0;
}

.page-head {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
}

.page-head .spacer { flex: 1; }

/* ---------- modals (shared box) ---------- */

.modal {
  border: none;
  border-radius: var(--radius);
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 24px 60px rgba(28, 27, 23, 0.24);
}
.modal::backdrop { background: rgba(28, 27, 23, 0.4); }

.modal-head {
  display: flex;
  align-items: center;
  padding: 20px 20px 4px;
}
.modal-head h2 { font-size: 22px; margin: 0; flex: 1; }

.modal-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-2);
  cursor: pointer;
  padding: 4px;
}
.modal-close:hover { color: var(--ink); }

/* ---------- connect-inbox modal ---------- */

.connect-modal { width: min(380px, calc(100vw - 40px)); }

/* :not([hidden]), not a bare .connect-providers/.connect-fastmail-form/
   .connect-imap-form selector, because "display: flex" here has the same
   specificity as the UA stylesheet's own "[hidden] { display: none }" --
   at equal specificity author styles win regardless of source order, so
   an unconditional rule here would silently defeat the hidden attribute
   goaway._showConnectStep()/_showOnboardingStep() toggle. */
.connect-providers:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px 24px;
}

.connect-option {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  font-family: var(--font-body);
}
.connect-option:hover { border-color: var(--brand); }

.connect-option-logo { width: 28px; height: 28px; flex-shrink: 0; }

/* IMAP/SMTP has no single brand mark like the other providers, so its
   connect option uses a Phosphor glyph (ph-envelope-simple) in the same
   28px slot instead of a static logo image. */
.connect-option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  flex-shrink: 0;
  font-size: 22px;
  color: var(--ink-2);
}

.connect-option-text { display: flex; flex-direction: column; gap: 2px; }
.connect-option-name { font-weight: 600; font-size: 15px; color: var(--ink); }
.connect-option-desc { font-size: 13px; color: var(--ink-2); }

.connect-fastmail-form:not([hidden]),
.connect-imap-form:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 20px 24px;
}

.modal-back {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 4px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.modal-back:hover { color: var(--ink); }

.connect-fastmail-form label,
.connect-imap-form label { font-size: 13px; font-weight: 600; color: var(--ink); }

.connect-fastmail-form input,
.connect-imap-form input {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  outline: none;
}
.connect-fastmail-form input:focus,
.connect-imap-form input:focus { border-color: var(--brand); }

.connect-fastmail-hint { font-size: 12px; color: var(--ink-2); margin: 0; }

/* IMAP host + port sit on one line -- the port field is fixed-width since
   it's never more than five digits, the host field takes whatever's
   left. */
.connect-imap-row { display: flex; flex-direction: row; gap: 10px; }
.connect-imap-row > div { display: flex; flex-direction: column; gap: 10px; }
.connect-imap-row > div:first-child { flex: 1; min-width: 0; }
.connect-imap-port { width: 72px; flex-shrink: 0; }

/* ---------- add-to-allow-list modal ---------- */

.add-allow-modal { width: min(380px, calc(100vw - 40px)); }

.add-allow-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 20px 24px;
}

.add-allow-form label { font-size: 13px; font-weight: 600; color: var(--ink); }

.add-allow-form input[type="text"],
.add-allow-form select {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  outline: none;
}
.add-allow-form input[type="text"]:focus,
.add-allow-form select:focus { border-color: var(--brand); }

.add-allow-domain-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400 !important;
  cursor: pointer;
}
.add-allow-domain-toggle input { margin: 0; }

.add-allow-hint { font-size: 12px; color: var(--ink-2); margin: 0; }
.add-allow-hint code { font-family: var(--font-mono); }

/* ---------- inbox settings modal ---------- */

.settings-modal { width: min(420px, calc(100vw - 40px)); }

.settings-modal-email {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-2);
  margin: 0;
  padding: 0 20px 16px;
}

.settings-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-top: 1px solid var(--line);
}

.settings-row-text { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.settings-row-title { font-weight: 600; font-size: 14px; }
.settings-row-desc { font-size: 12px; color: var(--ink-2); line-height: 1.4; }

.settings-row:last-child { padding-bottom: 20px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  border-radius: 8px;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
}

.btn-block { width: 100%; justify-content: center; }

.btn-primary { background: var(--brand); color: #eaf1ec; }
.btn-primary:hover { background: #274e43; }

.btn-ghost {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink);
}

.btn-text {
  background: none;
  border: none;
  padding: 0;
  color: var(--ink);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

.btn-text-danger { color: var(--danger); }
.btn-text-gold { color: var(--gold); }

.btn-pill {
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-size: 13px;
  background: transparent;
}

.btn-danger-outline { border: 1px solid var(--danger); color: var(--danger); background: transparent; }
.btn-gold-outline { border: 1px solid var(--gold); color: var(--gold); background: transparent; }
.btn-neutral-outline { border: 1px solid var(--line); color: var(--ink-2); background: transparent; }
.btn-ink-fill { border: none; color: #eaf1ec; background: var(--ink); }

.btn:disabled { opacity: 0.6; cursor: default; }
.btn-text:disabled, .btn-text[aria-disabled="true"] { opacity: 0.5; cursor: default; }

/* ---------- alerts / toasts ---------- */

.alert {
  border-radius: var(--radius);
  padding: 16px 20px;
  font-size: 14px;
  margin-bottom: 24px;
}

.alert-info { background: var(--paper-2); color: var(--ink); }
.alert-success { background: var(--brand-tint); color: var(--ink); }
.alert-error { background: var(--danger-tint); color: var(--danger); }

#toast-root {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  max-width: calc(100vw - 32px);
}

.toast {
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  opacity: 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
  max-width: 100%;
  overflow-wrap: break-word;
}

.toast.toast-hide { opacity: 0; transform: translateY(6px); }

/* ---------- auth / login ---------- */

.auth-shell {
  min-height: 100vh;
  display: flex;
}

.auth-copy {
  flex: 1 1 60%;
  padding: 96px 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
}

.auth-kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.auth-copy h1 {
  font-size: 56px;
  line-height: 1.08;
  max-width: 560px;
}

.auth-copy > p {
  max-width: 440px;
  font-size: 17px;
  color: var(--ink-2);
  margin: 0;
}

.auth-features { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }

.auth-features li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  list-style: none;
  font-size: 15px;
}

.auth-features li::before {
  content: '';
  width: 7px;
  height: 7px;
  margin-top: 7px;
  background: var(--brand);
  flex: none;
}

.auth-panel {
  flex: 1 1 40%;
  background: var(--ink);
  color: var(--paper);
  padding: 96px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-panel .auth-kicker { color: #b9cfc4; }

.auth-panel h2 { color: var(--paper); margin-bottom: 8px; }

.auth-panel > p {
  color: #c9c6bb;
  font-size: 15px;
  max-width: 360px;
  margin: 0 0 24px;
}

#login-form-wrap .field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: #c9c6bb;
  margin-bottom: 14px;
}

#login-form-wrap input {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--paper);
  background: #2a2822;
  border: 1px solid #3c392f;
  border-radius: 8px;
  padding: 14px 16px;
  outline: none;
}

#login-form-wrap input:focus { border-color: var(--brand); }

.field-error { color: #e8a99c; font-size: 13px; margin: -6px 0 14px; }

.auth-hint { font-size: 13px; color: #948f80; margin: 12px 0 0; }

/* ---------- dashboard ---------- */

.inbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.inbox-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  background: var(--paper);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  width: 100%;
}

.inbox-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.inbox-card.is-selected {
  background: var(--brand-tint);
  border-color: var(--brand);
  border-width: 1.5px;
}

.inbox-card.is-scanning { border-color: var(--gold); }

.inbox-card-all {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--paper-2);
}

.inbox-dot {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand);
}

.inbox-settings-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--ink-2);
  font-size: 16px;
  cursor: pointer;
}
.inbox-settings-btn:hover { background: var(--paper-2); color: var(--ink); }

/* padding-left always reserves room for .inbox-dot (only actually shown
   when selected) so the email text doesn't shift left/right as a card
   gains or loses the "selected" dot. */
.inbox-email { font-weight: 600; font-size: 16px; padding-left: 16px; padding-right: 30px; }

.inbox-provider {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 2px 8px 2px 6px;
  vertical-align: middle;
}

.inbox-provider-logo { width: 12px; height: 12px; flex-shrink: 0; }

/* Same reasoning as .connect-option-icon: IMAP's badge is a Phosphor
   glyph instead of a logo image, sized to sit in the same 12px slot. */
.inbox-provider-icon { font-size: 12px; }

.inbox-meta { font-size: 13px; color: var(--ink-2); margin-top: 6px; }

.new-count { color: var(--gold); font-weight: 600; }

.pill-deep {
  background: var(--gold-tint);
  color: var(--gold);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: middle;
  /* A no-op for the plain badge use (e.g. "Deep scan"); only matters for
     the "Subscribers only" chip, which is also a link to /billing. */
  text-decoration: none;
}

.scan-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--gold);
  font-weight: 500;
}

.spinner {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--gold-tint);
  border-top-color: var(--gold);
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.inbox-actions {
  display: flex;
  align-items: center;
  margin-top: 20px;
  gap: 12px;
}

.inbox-actions .spacer { flex: 1; }

.divider { border-top: 1px solid var(--line); margin: 8px 0 28px; }

.tabs { display: flex; align-items: center; gap: 28px; margin-bottom: 8px; }
.tabs .spacer { flex: 1; }

.tab {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink-2);
  padding: 0 0 10px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.tab.is-active { color: var(--ink); font-weight: 600; border-bottom-color: var(--brand); }

.sender-table { border-top: 1px solid var(--line); }

.sender-head {
  display: grid;
  grid-template-columns: 1fr 90px 120px 260px 24px;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

/* The "All Inboxes" view adds an Inbox column identifying which inbox
   each sender came from, both here and on details.sender-row summary
   below. */
.sender-head.has-inbox {
  grid-template-columns: 1fr 160px 90px 120px 260px 24px;
}

/* The Allowed tab drops the Emails column -- a hit count isn't meaningful
   for an allowlist entry, only for the pending/unsubscribed tabs. */
.sender-head.no-count {
  grid-template-columns: 1fr 120px 260px 24px;
}
.sender-head.no-count.has-inbox {
  grid-template-columns: 1fr 160px 120px 260px 24px;
}

.sender-head span {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

details.sender-row { border-bottom: 1px solid var(--line); }

details.sender-row summary {
  display: grid;
  grid-template-columns: 1fr 90px 120px 260px 24px;
  gap: 20px;
  align-items: center;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
}

details.sender-row.has-inbox summary {
  grid-template-columns: 1fr 160px 90px 120px 260px 24px;
}

details.sender-row.no-count summary {
  grid-template-columns: 1fr 120px 260px 24px;
}
details.sender-row.no-count.has-inbox summary {
  grid-template-columns: 1fr 160px 120px 260px 24px;
}

details.sender-row summary::-webkit-details-marker { display: none; }

details.sender-row[data-no-detail] summary { cursor: default; }

/* Grid items default to a min-width based on their content ("min-width:
   auto"), so an unbroken long sender name/address/email would otherwise
   force that one row's column wider than the same column on every other
   row, throwing off alignment down the table. Letting them shrink below
   their content size and ellipsis-truncating the text instead keeps every
   row's columns lined up. */
.sender-head > *,
details.sender-row summary > * {
  min-width: 0;
}

.s-from { overflow: hidden; }

.s-name, .s-addr {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.s-name { display: block; font-weight: 600; font-size: 15px; }
.s-addr { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); margin-top: 2px; }

.pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  border-radius: var(--radius-pill);
  padding: 4px 10px;
}

.pill-gold { background: var(--gold-tint); color: var(--ink); }

.s-date { font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); }

.s-inbox {
  font-size: 13px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.s-action-cell { display: block; }

.s-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.s-actions[hidden] { display: none; }

.s-confirm { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.s-confirm[hidden] { display: none; }
.s-confirm-text { color: var(--ink-2); }

.chevron {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--ink-2);
  border-bottom: 1.5px solid var(--ink-2);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
  justify-self: end;
}

details[open] .chevron { transform: rotate(-135deg); }
details[data-no-detail] .chevron { visibility: hidden; }

.sender-detail {
  background: var(--paper-2);
  border-radius: 10px;
  padding: 18px 20px;
  margin: 0 0 20px;
}

.sender-detail-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.sender-detail-name { font-weight: 700; }

.sender-detail-addr {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  color: var(--ink-2);
  margin-top: 2px;
}

.sender-detail-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  padding: 6px 0;
}

.sender-detail-row > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sender-detail-row .s-date { flex-shrink: 0; }

.empty-note { color: var(--ink-2); font-size: 14px; padding: 20px 0; }

/* ---------- billing ---------- */

h1 + .alert,
h1 + .plan-grid {
  margin-top: 28px;
}

.alert + .plan-grid {
  margin-top: 0;
}

.plan-card .sub { font-size: 14px; color: var(--ink-2); margin-top: 8px; }
.plan-card .sub.mono { font-family: var(--font-mono); }

.plan-card form { margin-top: 12px; }

.plan-current-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  margin-top: 8px;
}

/* ---------- onboarding ---------- */

.onboarding { max-width: 760px; margin: 0 auto; }

.onboarding-steps {
  display: flex;
  gap: 28px;
  margin-bottom: 40px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}

.onboarding-step { display: flex; align-items: center; gap: 8px; }

.onboarding-step i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--line);
  font-style: normal;
  font-size: 12px;
}

.onboarding-step.is-active { color: var(--ink); }
.onboarding-step.is-active i { background: var(--brand); border-color: var(--brand); color: #eaf1ec; }
.onboarding-step.is-done i { background: var(--paper-2); border-color: var(--line); }

.onboarding-head { margin-bottom: 32px; }
.onboarding-head h1 { margin-bottom: 10px; }
.onboarding-head p { max-width: 520px; color: var(--ink-2); font-size: 15px; margin: 0; }

.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.plan-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px;
  display: flex;
  flex-direction: column;
}

.plan-card-gold { border-color: var(--gold); background: var(--gold-tint); }

.plan-name { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; font-size: 22px; }

.plan-price { font-size: 15px; color: var(--ink-2); margin: 6px 0 20px; }
.plan-price span { font-size: 13px; }

.plan-features { display: flex; flex-direction: column; gap: 12px; margin: 0 0 24px; padding: 0; flex: 1; }

.plan-features li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  list-style: none;
  font-size: 14px;
  line-height: 1.4;
}

.plan-features li::before {
  content: '';
  width: 6px;
  height: 6px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--brand);
  flex: none;
}

.plan-card-gold .plan-features li::before { background: var(--gold); }

.onboarding-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 4px 28px;
  max-width: 420px;
}

.onboarding-card h2 { font-size: 20px; padding: 20px 24px 0; }
.onboarding-card .plan-features { padding: 0 24px; margin-top: 18px; }
.onboarding-card > .btn { margin: 4px 24px 0; width: calc(100% - 48px); }

.onboarding-actions { margin-top: 20px; }

/* ---------- site footer ---------- */

.site-footer {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 20px 32px 40px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-2);
}

.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- public homepage ---------- */

.home-header {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 24px 32px;
  border-bottom: 1px solid var(--line);
}

.home-nav { display: flex; gap: 24px; flex: 1; }

.home-nav a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}
.home-nav a:hover { color: var(--ink); }

.home-hero {
  max-width: 720px;
  margin: 0 auto;
  padding: 96px 32px 72px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.home-hero h1 { font-size: 52px; line-height: 1.1; }

.home-hero-sub { max-width: 560px; font-size: 17px; color: var(--ink-2); margin: 0; }

.home-hero-actions { display: flex; gap: 14px; margin-top: 12px; flex-wrap: wrap; justify-content: center; }

.home-section {
  padding: 64px 32px;
}

.home-section > h2, .home-section > .home-fineprint {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

.home-section-alt { background: var(--paper-2); }

.home-section h2 { text-align: center; margin-bottom: 40px; }

.home-steps {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.home-step { display: flex; flex-direction: column; gap: 8px; }

.home-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--brand);
  color: var(--brand);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 8px;
}

.home-step h3 { font-family: var(--font-body); font-style: normal; font-size: 15px; font-weight: 600; }
.home-step p { font-size: 14px; color: var(--ink-2); margin: 0; }

.home-grid-2 {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.home-grid-2 h3 { font-family: var(--font-body); font-style: normal; font-size: 15px; font-weight: 600; margin-bottom: 12px; }

.home-fineprint { text-align: center; font-size: 13px; color: var(--ink-2); margin: 32px auto 0; }

.home-pricing-card { max-width: 1080px; margin: 0 auto; }

#pricing .plan-grid { max-width: 720px; margin: 0 auto; }

.home-contact { text-align: center; }
.home-contact p { color: var(--ink-2); }

/* ---------- privacy / legal pages ---------- */

.legal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
  border-bottom: 1px solid var(--line);
}

.legal-copy {
  max-width: 680px;
  margin: 0 auto;
  padding: 56px 32px 96px;
}

.legal-updated { color: var(--ink-2); font-size: 13px; margin: 8px 0 32px; }

.legal-copy h2 { font-size: 20px; margin: 40px 0 12px; }
.legal-copy h2:first-of-type { margin-top: 32px; }
.legal-copy p { color: var(--ink); font-size: 15px; line-height: 1.65; margin: 0 0 16px; }
.legal-copy ul { margin: 0 0 16px; padding-left: 20px; }
.legal-copy li { font-size: 15px; line-height: 1.6; margin-bottom: 8px; }
.legal-copy code { font-family: var(--font-mono); font-size: 0.9em; background: var(--paper-2); padding: 1px 5px; border-radius: 4px; }

/* ---------- responsive ---------- */

@media (max-width: 860px) {
  .auth-shell { flex-direction: column; }
  .auth-copy, .auth-panel { padding: 56px 32px; }
  .auth-copy h1 { font-size: 40px; }

  main { padding: 32px 16px 72px; }

  .topbar {
    flex-wrap: wrap;
    height: auto;
    min-height: 64px;
    padding: 14px 16px;
    row-gap: 10px;
  }
  .topbar nav {
    order: 3;
    flex-basis: 100%;
    height: auto;
    gap: 20px;
  }
  .topbar nav a { height: auto; padding-bottom: 4px; }
  .user-email {
    max-width: 38vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .page-head { flex-wrap: wrap; row-gap: 12px; }
  .tabs { flex-wrap: wrap; row-gap: 12px; }

  .home-header { flex-wrap: wrap; gap: 16px; padding: 20px; }
  .home-nav { order: 3; flex-basis: 100%; gap: 18px; }
  .home-hero { padding: 56px 20px 48px; }
  .home-hero h1 { font-size: 34px; }
  .home-section { padding: 48px 20px; }
  .home-steps { grid-template-columns: 1fr; gap: 24px; }
  .home-grid-2 { grid-template-columns: 1fr; gap: 28px; }
  .legal-header { padding: 20px; }
  .legal-copy { padding: 40px 20px 72px; }

  .plan-grid { grid-template-columns: 1fr; }
  .onboarding-steps { gap: 16px; flex-wrap: wrap; }

  .sender-head { display: none; }

  details.sender-row summary {
    grid-template-columns: 1fr auto;
    grid-template-areas: "from chevron" "count count" "actions actions";
    row-gap: 10px;
  }
  details.sender-row summary > :nth-child(1) { grid-area: from; }
  details.sender-row summary > :nth-child(2) { grid-area: count; justify-self: start; }
  details.sender-row summary > :nth-child(3) { display: none; }
  details.sender-row summary > :nth-child(4) { grid-area: actions; }
  details.sender-row summary > :nth-child(5) { grid-area: chevron; }

  /* has-inbox rows carry an extra leading Inbox cell (from, inbox, count,
     date, actions, chevron), shifting every position above by one. */
  details.sender-row.has-inbox summary {
    grid-template-columns: 1fr auto;
    grid-template-areas: "from chevron" "inbox inbox" "count count" "actions actions";
    row-gap: 10px;
  }
  details.sender-row.has-inbox summary > :nth-child(1) { grid-area: from; }
  details.sender-row.has-inbox summary > :nth-child(2) { grid-area: inbox; justify-self: start; }
  details.sender-row.has-inbox summary > :nth-child(3) { grid-area: count; justify-self: start; }
  details.sender-row.has-inbox summary > :nth-child(4) { display: none; }
  details.sender-row.has-inbox summary > :nth-child(5) { grid-area: actions; }
  details.sender-row.has-inbox summary > :nth-child(6) { grid-area: chevron; }

  /* no-count rows (the Allowed tab) have no count cell at all, shifting
     every remaining position down by one from the base rules above. */
  details.sender-row.no-count summary {
    grid-template-columns: 1fr auto;
    grid-template-areas: "from chevron" "date date" "actions actions";
    row-gap: 10px;
  }
  details.sender-row.no-count summary > :nth-child(1) { grid-area: from; }
  details.sender-row.no-count summary > :nth-child(2) { grid-area: date; justify-self: start; }
  details.sender-row.no-count summary > :nth-child(3) { grid-area: actions; }
  details.sender-row.no-count summary > :nth-child(4) { grid-area: chevron; }

  details.sender-row.no-count.has-inbox summary {
    grid-template-columns: 1fr auto;
    grid-template-areas: "from chevron" "inbox inbox" "date date" "actions actions";
    row-gap: 10px;
  }
  details.sender-row.no-count.has-inbox summary > :nth-child(1) { grid-area: from; }
  details.sender-row.no-count.has-inbox summary > :nth-child(2) { grid-area: inbox; justify-self: start; }
  details.sender-row.no-count.has-inbox summary > :nth-child(3) { grid-area: date; justify-self: start; }
  details.sender-row.no-count.has-inbox summary > :nth-child(4) { grid-area: actions; }
  details.sender-row.no-count.has-inbox summary > :nth-child(5) { grid-area: chevron; }
}