/* ==========================================================================
   Leadify SecureMark
   Palette is taken from the logo: navy ink (the L), signal blue (the D) and
   coral (the triangle). In the product, coral is reserved for failures and
   rejections; green and amber carry pass and watch states.
   ========================================================================== */

:root {
  --ink: #131a2b;
  --ink-2: #2b3449;
  --ink-3: #4a5468;
  --muted: #5e6779;

  --signal: #3651c8;
  --signal-deep: #2639a0;
  --signal-tint: #eceffc;
  --signal-line: #b9c4f0;
  --signal-on-dark: #9fb0ff;

  --coral: #e2574c;
  --coral-ink: #a8322a;
  --coral-tint: #fdeeec;
  --coral-line: #f3c2bd;

  --pass: #1d8158;
  --pass-ink: #13603f;
  --pass-tint: #e7f5ee;
  --pass-line: #b5dfc9;

  --watch: #b97b0e;
  --watch-ink: #7a5208;
  --watch-tint: #fbf3e1;
  --watch-line: #ecd29a;

  --paper: #f3f5f9;
  --surface: #ffffff;
  --surface-2: #f8f9fc;
  --line: #dde2eb;
  --line-2: #e9ecf2;
  --line-strong: #c3cad8;

  --sidebar-bg: #131a2b;
  --sidebar-ink: #c5cbd8;
  --sidebar-hover: #1d2539;
  --sidebar-active: #252f48;
  --sidebar-line: #262f45;

  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;

  --shadow-1: 0 1px 2px rgba(19, 26, 43, .05);
  --shadow-2: 0 10px 30px -12px rgba(19, 26, 43, .18);
  --focus-ring: 0 0 0 3px rgba(54, 81, 200, .28);

  --font-sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --sidebar-width: 256px;

  /* Names used by older page-level rules */
  --brand-ink: var(--ink);
  --brand-muted: var(--muted);
  --brand-blue: var(--signal);
  --brand-blue-dark: var(--signal-deep);
  --brand-teal: var(--pass);
  --brand-amber: var(--watch);
  --brand-rose: var(--coral);
  --brand-border: var(--line);
  --brand-primary: var(--signal);
  --surface-page: var(--paper);
  --surface-card: var(--surface);
  --surface-soft: var(--surface-2);
  --line-soft: var(--line);
  --shadow-soft: var(--shadow-2);
  --shadow-tight: var(--shadow-2);

  /* Bootstrap hooks */
  --bs-body-font-family: var(--font-sans);
  --bs-body-color: var(--ink-2);
  --bs-body-bg: var(--paper);
  --bs-border-color: var(--line);
  --bs-link-color-rgb: 54, 81, 200;
  --bs-link-hover-color-rgb: 38, 57, 160;
  --bs-primary-rgb: 54, 81, 200;
  --bs-font-monospace: var(--font-mono);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html {
  min-height: 100%;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink-2);
  background: var(--paper);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.01em;
}

a {
  color: var(--signal);
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
}

a:hover {
  color: var(--signal-deep);
}

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

::selection {
  background: var(--signal-tint);
  color: var(--ink);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 2000;
  border-radius: var(--radius);
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  padding: .55rem .9rem;
}

.skip-link:focus {
  top: 1rem;
  color: #fff;
}

/* Schibsted's tabular figures widen the decimal point, so keep them to integer columns */
.tabular {
  font-variant-numeric: tabular-nums;
}

.app-main h1:not(.page-title),
.app-main h2:not(.accordion-header),
.app-main h3 {
  color: var(--ink);
  font-weight: 700;
}

.app-main h1:not(.page-title) {
  margin-bottom: 1rem;
  font-size: 1.75rem;
}

.app-main h2:not(.accordion-header) {
  font-size: 1.3rem;
}

/* --------------------------------------------------------------------------
   App shell: navy sidebar + content column
   -------------------------------------------------------------------------- */

.app-shell {
  min-height: 100vh;
}

.app-body {
  display: flex;
  min-width: 0;
  min-height: 100vh;
  flex-direction: column;
}

.app-main {
  width: 100%;
  flex: 1 0 auto;
  padding: 1.25rem 1rem 2.5rem;
}

/* Wide enough that tables and charts use a large monitor; text keeps its own line length limits */
.app-main > :where(.row, .card, .table-responsive, .alert, form, h1, h2, h3, p, .page-shell, .container, .container-fluid) {
  max-width: 2000px;
  margin-right: auto;
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 60px;
  background: var(--sidebar-bg);
  padding: .5rem 1rem;
}

.sidebar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--sidebar-line);
  border-radius: var(--radius);
  background: transparent;
  color: #fff;
  font-size: 1.35rem;
}

.sidebar-toggle:hover {
  background: var(--sidebar-hover);
}

.app-sidebar {
  --bs-offcanvas-width: 288px;
  --bs-offcanvas-bg: var(--sidebar-bg);
  --bs-offcanvas-color: var(--sidebar-ink);
  border-right: 0 !important;
}

.sidebar-inner {
  display: flex;
  height: 100%;
  flex-direction: column;
  background: var(--sidebar-bg);
  color: var(--sidebar-ink);
}

.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 1.15rem 1.1rem 1rem;
}

.sidebar-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: .25rem .75rem 1rem;
}

.app-brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-decoration: none;
}

.app-brand img {
  border-radius: 7px;
  background: #fff;
}

.app-brand small {
  display: block;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: 0;
}

.app-brand:hover,
.app-brand:focus {
  color: var(--ink);
}

.app-brand.is-dark,
.app-brand.is-dark:hover,
.app-brand.is-dark:focus {
  color: #fff;
}

.app-brand.is-dark small {
  color: #8d96aa;
}

.app-brand.is-dark img {
  padding: 3px;
}

.sidebar-close {
  filter: invert(1) grayscale(1) brightness(1.6);
}

.sidebar-org {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .25rem .5rem;
  margin: 0 .1rem 1.1rem;
  border: 1px solid var(--sidebar-line);
  border-radius: var(--radius);
  background: var(--sidebar-hover);
  color: #fff;
  padding: .6rem .7rem;
  text-decoration: none;
}

.sidebar-org:hover,
.sidebar-org:focus {
  border-color: #3a4560;
  background: var(--sidebar-active);
  color: #fff;
}

.sidebar-org-label {
  grid-column: 1;
  color: #8d96aa;
  font-size: .74rem;
  font-weight: 500;
  line-height: 1;
}

.sidebar-org-name {
  grid-column: 1;
  overflow: hidden;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-org i {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: #8d96aa;
}

.sidebar-group-label {
  margin: 1.1rem .65rem .35rem;
  color: #7c869b;
  font-size: .76rem;
  font-weight: 600;
}

.sidebar-nav {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: .7rem;
  border-radius: var(--radius);
  color: var(--sidebar-ink);
  font-size: .925rem;
  font-weight: 500;
  padding: .5rem .65rem;
  text-decoration: none;
}

.sidebar-link i {
  width: 1.1rem;
  color: #8d96aa;
  font-size: 1.02rem;
  text-align: center;
}

.sidebar-link:hover,
.sidebar-link:focus-visible {
  background: var(--sidebar-hover);
  color: #fff;
}

.sidebar-link:hover i {
  color: #fff;
}

.sidebar-link.active {
  background: var(--sidebar-active);
  color: #fff;
  font-weight: 600;
}

.sidebar-link.active::before {
  content: "";
  position: absolute;
  top: .45rem;
  bottom: .45rem;
  left: -.75rem;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--signal-on-dark);
}

.sidebar-link.active i {
  color: var(--signal-on-dark);
}

.sidebar-foot {
  border-top: 1px solid var(--sidebar-line);
  padding: .75rem;
}

.sidebar-user {
  display: flex;
  width: 100%;
  align-items: center;
  gap: .65rem;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: #fff;
  padding: .45rem .5rem;
  text-align: left;
}

.sidebar-user:hover,
.sidebar-user:focus-visible,
.sidebar-user[aria-expanded="true"] {
  background: var(--sidebar-hover);
}

.sidebar-user .user-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: .9rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user i {
  color: #8d96aa;
}

.user-avatar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--signal);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
}

.sidebar-foot .dropdown-menu {
  width: calc(var(--sidebar-width) - 1.5rem);
}

@media (min-width: 992px) {
  .app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  }

  .app-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
  }

  .app-main {
    padding: 2rem 2.25rem 3rem;
  }
}

/* --------------------------------------------------------------------------
   Menus
   -------------------------------------------------------------------------- */

.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--signal);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  font-size: .9rem;
  padding: .3rem;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  padding: .45rem .6rem;
}

.dropdown-item i {
  color: var(--muted);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--surface-2);
  color: var(--ink);
}

.dropdown-item:active,
.dropdown-item:active i {
  background: var(--signal);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Page header
   -------------------------------------------------------------------------- */

.page-shell {
  width: 100%;
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 1.5rem;
}

.page-header > div:first-child {
  min-width: 0;
  max-width: 820px;
}

.page-eyebrow {
  margin-bottom: .3rem;
  color: var(--muted);
  font-size: .85rem;
  font-weight: 500;
}

/* Where a page sits under Domains, in place of a back button */
.page-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
}

.page-breadcrumb a {
  color: var(--signal);
  text-decoration: none;
}

.page-breadcrumb a:hover {
  text-decoration: underline;
}

.page-breadcrumb .bi {
  font-size: .7rem;
}

.page-title {
  margin: 0;
  color: var(--ink);
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.12;
}

.page-subtitle {
  max-width: 68ch;
  margin: .45rem 0 0;
  color: var(--muted);
  font-size: .975rem;
}

.page-subtitle + .page-subtitle {
  margin-top: .2rem;
  color: var(--ink-3);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Metrics: one joined instrument strip rather than loose cards
   -------------------------------------------------------------------------- */

.metric-grid,
.summary-metric-grid,
.database-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0;
  overflow: hidden;
  margin-bottom: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.summary-metric-grid {
  margin-bottom: 0;
}

.metric-card,
.summary-kpi {
  --metric-accent: var(--line-strong);
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: 1px 0 0 var(--line-2), 0 1px 0 var(--line-2);
  padding: 1.1rem 1.25rem 1.2rem;
}

/* A figure that opens the list behind it */
a.metric-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

a.metric-card:hover {
  background: var(--surface-2);
}

/* A queued email as it's sent, on the email queue page */
.email-preview {
  display: block;
  width: 100%;
  height: 640px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
}

/* Short lists on the admin overview: plan requests, new people */
.admin-home-list > li + li {
  margin-top: .75rem;
}

/* On customer pages each figure keeps one colour: blue for counts, teal for good news (passing, protected),
   amber for something to act on, rose for unauthorized mail and failures */
.metric-card.is-blue,
.summary-kpi.is-blue { --metric-accent: var(--signal); border-top: 0; }
.metric-card.is-teal,
.summary-kpi.is-teal { --metric-accent: var(--pass); border-top: 0; }
.metric-card.is-amber,
.summary-kpi.is-amber { --metric-accent: var(--watch); border-top: 0; }
.metric-card.is-rose,
.summary-kpi.is-rose { --metric-accent: var(--coral); border-top: 0; }

.metric-label,
.summary-kpi-label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--ink-3);
  font-size: .85rem;
  font-weight: 500;
}

.metric-label::before,
.summary-kpi-label::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--metric-accent);
}

.metric-value {
  display: block;
  margin-top: .45rem;
  color: var(--ink);
  font-size: 2rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1;
}

.metric-value small {
  color: var(--muted);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
}

.metric-hint {
  margin-top: .45rem;
  color: var(--muted);
  font-size: .85rem;
}

/* The summary spaces its panels with a gap; the domain list's stack needs margins */
.page-shell:not(.summary-dashboard) > .trend-panel,
.page-shell:not(.summary-dashboard) > .readiness-card {
  margin-bottom: 1.25rem;
}

/* The domain list's next steps across every domain, most urgent first */
.next-steps-card {
  margin-bottom: 1.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 0 var(--line-2);
}

.next-steps-list {
  display: grid;
  gap: .4rem;
  margin: .85rem 0 .5rem;
  padding: 0;
  list-style: none;
}

.next-steps-list li {
  border: 1px solid var(--line-2);
  border-left: 4px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

.next-steps-list li.is-risk { border-left-color: var(--coral); }
.next-steps-list li.is-watch { border-left-color: var(--watch); }
.next-steps-list li.is-good { border-left-color: var(--pass); }

.next-steps-list a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .15rem .6rem;
  padding: .55rem .8rem;
  color: var(--ink-3);
  text-decoration: none;
}

.next-steps-list a:hover,
.next-steps-list a:focus-visible {
  background: var(--surface-2);
}

.next-steps-list strong {
  color: var(--ink);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Cards, tables
   -------------------------------------------------------------------------- */

.card {
  --bs-card-border-color: var(--line);
  --bs-card-border-radius: var(--radius-lg);
  --bs-card-inner-border-radius: calc(var(--radius-lg) - 1px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.card-header {
  border-bottom: 1px solid var(--line-2);
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0 !important;
  background: var(--surface);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 650;
  padding: .9rem 1.15rem;
}

.card-header.bg-primary,
.card-header.bg-secondary,
.card-header.bg-success,
.card-header.bg-danger,
.card-header.bg-warning,
.card-header.bg-info {
  background: var(--surface) !important;
  color: var(--ink) !important;
}

.card-body {
  padding: 1.15rem;
}

.card-footer {
  border-top: 1px solid var(--line-2);
  background: var(--surface-2);
}

.table-responsive {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.card .table-responsive {
  border: 0;
  border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px);
  box-shadow: none;
}

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ink-2);
  --bs-table-hover-bg: #f4f6fb;
  --bs-table-border-color: var(--line-2);
  margin-bottom: 0;
  color: var(--ink-2);
  font-size: .9rem;
  vertical-align: middle;
}

.table > :not(caption) > * > * {
  padding: .75rem .85rem;
}

.table thead th,
.table tbody > tr:first-child > th {
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}

.table thead th .fa,
.table thead th .bi {
  color: var(--line-strong);
}

.table tfoot td,
.table tfoot th {
  border-top: 1px solid var(--line);
  border-bottom: 0;
  background: var(--surface-2);
  color: var(--ink);
  font-weight: 650;
}

/* Status rows get a left rule instead of a full row wash */
.table-success,
.table-danger,
.table-warning,
.table-secondary,
.table-info {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ink-2);
  --bs-table-border-color: var(--line-2);
  /* Hovering any row gives the same quiet wash, not Bootstrap's pink, green or amber */
  --bs-table-hover-bg: #f4f6fb;
  --bs-table-hover-color: var(--ink-2);
}

/* The rule keeps Bootstrap 5.3's wash too (an inset shadow from the same variables), so the first cell highlights with the rest of the row */
.table tr.table-success > :first-child { box-shadow: inset 3px 0 0 var(--pass), inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg))); }
.table tr.table-danger > :first-child { box-shadow: inset 3px 0 0 var(--coral), inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg))); }
.table tr.table-warning > :first-child { box-shadow: inset 3px 0 0 var(--watch), inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg))); }
.table tr.table-secondary > :first-child { box-shadow: inset 3px 0 0 var(--line-strong), inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg))); }
.table tr.table-info > :first-child { box-shadow: inset 3px 0 0 var(--signal), inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg))); }



/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  --bs-btn-border-radius: var(--radius);
  --bs-btn-font-weight: 600;
  --bs-btn-font-size: .9rem;
  --bs-btn-padding-x: .95rem;
  --bs-btn-focus-box-shadow: var(--focus-ring);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 38px;
  letter-spacing: 0;
}

.btn-sm {
  --bs-btn-font-size: .82rem;
  --bs-btn-padding-x: .65rem;
  --bs-btn-border-radius: var(--radius-sm);
  min-height: 32px;
}

.btn-lg {
  --bs-btn-font-size: 1rem;
  --bs-btn-padding-x: 1.3rem;
  --bs-btn-border-radius: var(--radius);
  min-height: 50px;
}

.btn-primary {
  --bs-btn-bg: var(--signal);
  --bs-btn-border-color: var(--signal);
  --bs-btn-hover-bg: var(--signal-deep);
  --bs-btn-hover-border-color: var(--signal-deep);
  --bs-btn-active-bg: #1d2d82;
  --bs-btn-active-border-color: #1d2d82;
  --bs-btn-disabled-bg: var(--signal);
  --bs-btn-disabled-border-color: var(--signal);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(38, 57, 160, .25);
}

.btn-outline-primary {
  --bs-btn-color: var(--signal);
  --bs-btn-border-color: var(--signal-line);
  --bs-btn-hover-color: var(--signal-deep);
  --bs-btn-hover-bg: var(--signal-tint);
  --bs-btn-hover-border-color: var(--signal);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--signal);
  --bs-btn-active-border-color: var(--signal);
}

.btn-secondary {
  --bs-btn-color: var(--ink-2);
  --bs-btn-bg: var(--surface);
  --bs-btn-border-color: var(--line-strong);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: var(--surface-2);
  --bs-btn-hover-border-color: #a9b2c4;
  --bs-btn-active-color: var(--ink);
  --bs-btn-active-bg: var(--line-2);
  --bs-btn-active-border-color: #a9b2c4;
}

.btn-outline-secondary {
  --bs-btn-color: var(--ink-3);
  --bs-btn-border-color: var(--line-strong);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: var(--surface-2);
  --bs-btn-hover-border-color: #a9b2c4;
  --bs-btn-disabled-color: #98a0b0;
  --bs-btn-disabled-border-color: var(--line);
}

.btn-success {
  --bs-btn-bg: var(--pass);
  --bs-btn-border-color: var(--pass);
  --bs-btn-hover-bg: var(--pass-ink);
  --bs-btn-hover-border-color: var(--pass-ink);
  --bs-btn-active-bg: var(--pass-ink);
  --bs-btn-active-border-color: var(--pass-ink);
}

.btn-warning {
  --bs-btn-color: #3b2804;
  --bs-btn-bg: #f2c14e;
  --bs-btn-border-color: #e6b33d;
  --bs-btn-hover-color: #2a1c02;
  --bs-btn-hover-bg: #e8b232;
  --bs-btn-hover-border-color: #d9a325;
  --bs-btn-active-bg: #d9a325;
}

.btn-danger {
  --bs-btn-bg: var(--coral);
  --bs-btn-border-color: var(--coral);
  --bs-btn-hover-bg: #c8443a;
  --bs-btn-hover-border-color: #c8443a;
  --bs-btn-active-bg: var(--coral-ink);
  --bs-btn-active-border-color: var(--coral-ink);
}

.btn-outline-danger {
  --bs-btn-color: var(--coral-ink);
  --bs-btn-border-color: var(--coral-line);
  --bs-btn-hover-color: var(--coral-ink);
  --bs-btn-hover-bg: var(--coral-tint);
  --bs-btn-hover-border-color: var(--coral);
}

.btn-light {
  --bs-btn-color: var(--ink);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-bg: var(--signal-tint);
  --bs-btn-hover-border-color: var(--signal-tint);
}

.btn-default {
  --bs-btn-color: var(--ink-2);
  --bs-btn-bg: var(--surface);
  --bs-btn-border-color: var(--line);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: var(--surface-2);
  --bs-btn-hover-border-color: var(--line-strong);
}

.btn-check:checked + .btn-default {
  border-color: var(--signal);
  background: var(--signal-tint);
  color: var(--signal-deep);
  box-shadow: inset 0 0 0 1px var(--signal);
}

.btn-link {
  --bs-btn-color: var(--signal);
  --bs-btn-hover-color: var(--signal-deep);
}

.btn:focus-visible,
.btn-link.nav-link:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--signal);
  box-shadow: var(--focus-ring);
  outline: 0;
}

/* --------------------------------------------------------------------------
   Badges, alerts, forms
   -------------------------------------------------------------------------- */

.badge {
  border-radius: var(--radius-sm);
  font-size: .78em;
  font-weight: 600;
  letter-spacing: 0;
  padding: .32em .55em;
}

.text-bg-info,
.bg-info {
  background-color: var(--signal-tint) !important;
  color: var(--signal-deep) !important;
}

.text-bg-primary,
.bg-primary {
  background-color: var(--signal) !important;
  color: #fff !important;
}

.text-bg-success,
.bg-success {
  background-color: var(--pass-tint) !important;
  color: var(--pass-ink) !important;
}

.text-bg-warning,
.bg-warning {
  background-color: var(--watch-tint) !important;
  color: var(--watch-ink) !important;
}

.text-bg-danger,
.bg-danger {
  background-color: var(--coral-tint) !important;
  color: var(--coral-ink) !important;
}

.text-bg-secondary,
.bg-secondary {
  background-color: var(--line-2) !important;
  color: var(--ink-3) !important;
}

.text-bg-dark,
.bg-dark {
  background-color: var(--ink) !important;
  color: #fff !important;
}

.text-success { color: var(--pass) !important; }
.text-warning { color: var(--watch) !important; }
.text-primary { color: var(--signal) !important; }

.form-control,
.form-select {
  min-height: 42px;
  border-color: var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: .925rem;
}

.form-control::placeholder {
  color: #98a0b0;
}

.form-control-sm,
.form-select-sm {
  min-height: 34px;
  border-radius: var(--radius-sm);
}

.form-label {
  margin-bottom: .35rem;
  color: var(--ink-2);
  font-size: .9rem;
  font-weight: 600;
}

.form-check-input:checked {
  border-color: var(--signal);
  background-color: var(--signal);
}

.form-text,
.text-muted,
.text-body-secondary {
  color: var(--muted) !important;
}

.validation-summary-errors,
.field-validation-error,
.text-danger {
  color: var(--coral-ink) !important;
}

.input-validation-error {
  border-color: var(--coral) !important;
}

.alert {
  border-width: 1px;
  border-radius: var(--radius);
  font-size: .925rem;
}

.alert-success {
  --bs-alert-bg: var(--pass-tint);
  --bs-alert-border-color: var(--pass-line);
  --bs-alert-color: var(--pass-ink);
}

.alert-danger {
  --bs-alert-bg: var(--coral-tint);
  --bs-alert-border-color: var(--coral-line);
  --bs-alert-color: var(--coral-ink);
}

.alert-warning {
  --bs-alert-bg: var(--watch-tint);
  --bs-alert-border-color: var(--watch-line);
  --bs-alert-color: var(--watch-ink);
}

.alert-info,
.alert-primary {
  --bs-alert-bg: var(--signal-tint);
  --bs-alert-border-color: var(--signal-line);
  --bs-alert-color: var(--signal-deep);
}

.alert-secondary {
  --bs-alert-bg: var(--surface-2);
  --bs-alert-border-color: var(--line);
  --bs-alert-color: var(--ink-3);
}

.accordion {
  --bs-accordion-border-color: var(--line);
  --bs-accordion-border-radius: var(--radius-lg);
  --bs-accordion-inner-border-radius: calc(var(--radius-lg) - 1px);
  --bs-accordion-btn-color: var(--ink);
  --bs-accordion-active-color: var(--ink);
  --bs-accordion-active-bg: var(--surface-2);
  --bs-accordion-btn-focus-box-shadow: var(--focus-ring);
}

.accordion-button {
  font-weight: 600;
}

.list-group {
  --bs-list-group-border-color: var(--line-2);
  --bs-list-group-border-radius: var(--radius);
}

.nav-tabs {
  --bs-nav-tabs-border-color: var(--line);
  --bs-nav-tabs-link-active-color: var(--ink);
  --bs-nav-tabs-link-active-border-color: var(--line) var(--line) var(--surface);
}

.nav-tabs .nav-link {
  color: var(--ink-3);
  font-weight: 500;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--signal);
}

.modal-content {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}

.tooltip {
  --bs-tooltip-bg: var(--ink);
  --bs-tooltip-font-size: .8rem;
}

.dns-record,
code {
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: .86em;
  word-break: break-word;
}

.dns-record {
  display: inline-block;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: .28rem .45rem;
}

/* --------------------------------------------------------------------------
   Row actions inside tables: quiet by default
   -------------------------------------------------------------------------- */

.action-stack {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

/* Domain list: one main action per row, everything else in its menu */
.domain-table .domain-name {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

.domain-table .domain-name:hover {
  color: var(--signal);
  text-decoration: underline;
}

/* domain-list.js makes the whole row open the domain */
.domain-table tr.is-clickable {
  cursor: pointer;
}

.domain-table tr.is-clickable:hover .domain-name {
  color: var(--signal);
}

.row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .35rem;
}

.row-actions .dropdown-item {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.row-actions form {
  margin: 0;
}

.table .action-stack {
  align-items: center;
  gap: .3rem;
  min-width: 190px;
}

.table .action-stack .btn {
  min-height: 30px;
  border-radius: var(--radius-sm);
  box-shadow: none;
  font-size: .8rem;
  line-height: 1;
  padding: .36rem .6rem;
}

.table .action-stack .btn-primary,
.table .action-stack .btn-success,
.table .action-stack .btn-warning,
.table .action-stack .btn-secondary,
.table .action-stack .btn-outline-primary,
.table .action-stack .btn-outline-secondary {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink-2);
}

.table .action-stack .btn-primary {
  border-color: var(--signal);
  background: var(--signal);
  color: #fff;
}

.table .action-stack .btn-primary:hover,
.table .action-stack .btn-primary:focus-visible {
  border-color: var(--signal-deep);
  background: var(--signal-deep);
  color: #fff;
}

.table .action-stack .btn-success:hover,
.table .action-stack .btn-warning:hover,
.table .action-stack .btn-secondary:hover,
.table .action-stack .btn-outline-primary:hover,
.table .action-stack .btn-outline-secondary:not(:disabled):hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
  color: var(--ink);
}

.table .action-stack .btn-outline-secondary:disabled {
  color: #a3aab8;
}

.table .action-stack .btn-danger,
.table .action-stack .btn-outline-danger {
  border-color: transparent;
  background: transparent;
  color: var(--coral-ink);
}

.table .action-stack .btn-danger:hover,
.table .action-stack .btn-danger:focus-visible,
.table .action-stack .btn-outline-danger:hover,
.table .action-stack .btn-outline-danger:focus-visible {
  border-color: var(--coral-line);
  background: var(--coral-tint);
  color: var(--coral-ink);
}

/* ==========================================================================
   Page-level components
   ========================================================================== */

.summary-metric {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: .85rem;
  background: var(--surface);
}

.summary-dashboard {
  display: grid;
  gap: 1rem;
}

.summary-hero,
.summary-record-panel,
.summary-filter-panel,
.source-panel,
.server-detail-card {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 0 var(--line-2);
}

.summary-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  border-left: 4px solid var(--brand-blue);
  padding: 1.2rem;
}

.summary-hero-copy {
  min-width: 0;
}

.summary-hero-actions,
.summary-hero-tags,
.summary-filter-actions,
.summary-source-tabs,
.source-status-list,
.policy-pill-stack {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.summary-hero-actions {
  justify-content: flex-end;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: .84rem;
  font-weight: 600;
  padding: .28rem .65rem;
}

.status-chip.is-good {
  border-color: var(--pass-line);
  background: var(--pass-tint);
  color: var(--pass-ink);
}

.status-chip.is-risk {
  border-color: var(--coral-line);
  background: var(--coral-tint);
  color: var(--coral-ink);
}

.status-chip.is-watch {
  border-color: var(--watch-line);
  background: var(--watch-tint);
  color: var(--watch-ink);
}

/* The sender, ISP, country or server a summary is narrowed to; clicking clears it */
.status-chip.is-filter {
  border-color: var(--signal-line);
  background: var(--signal-tint);
  color: var(--signal-deep);
  text-decoration: none;
}

.status-chip.is-filter:hover {
  border-color: var(--signal);
}

/* A domain that usually gets reports most days has gone a week without one */
.last-report-age.is-overdue {
  color: var(--watch-ink);
  font-weight: 600;
}

.summary-kpi-label,
.summary-section-kicker,
.summary-panel-heading span,
.summary-policy-grid span,
.record-outcome-grid span {
  color: var(--brand-muted);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: 0;
}

.summary-kpi strong {
  display: block;
  margin-top: .35rem;
  color: var(--brand-ink);
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1;
}

.summary-kpi-hint {
  display: block;
  margin-top: .48rem;
  color: var(--brand-muted);
  font-size: .88rem;
  line-height: 1.35;
}

.summary-record-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, .95fr);
  gap: 1rem;
  padding: 1rem;
}

.summary-panel-heading h2 {
  margin: .2rem 0 0;
  color: var(--brand-ink);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
}

.dmarc-record-line {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .85rem;
}

.dmarc-record-line code {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: .65rem .75rem;
}

/* One tag per chunk, wrapping between tags rather than mid-way through one */
.dmarc-record-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem .6rem;
}

.dmarc-tag {
  overflow-wrap: anywhere;
}

.dmarc-tag-name {
  color: var(--signal-deep);
  font-weight: 700;
}

.dmarc-tag-end {
  white-space: nowrap;
}

.summary-alert-list {
  display: grid;
  gap: .45rem;
  margin-top: .8rem;
}

.summary-alert-list span {
  display: flex;
  align-items: center;
  gap: .45rem;
  border: 1px solid var(--coral-line);
  border-radius: var(--radius);
  background: var(--coral-tint);
  color: var(--coral-ink);
  font-weight: 600;
  padding: .55rem .65rem;
}

.summary-policy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
}

.summary-policy-grid div,
.record-outcome-grid div {
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: .7rem;
}

.summary-policy-grid strong,
.record-outcome-grid strong {
  display: block;
  margin-top: .18rem;
  color: var(--brand-ink);
  font-size: 1rem;
  font-weight: 600;
}

.summary-filter-panel {
  display: grid;
  gap: .85rem;
  padding: 1rem;
}

.summary-filter-grid {
  display: grid;
  grid-template-columns: minmax(180px, 280px) minmax(180px, 280px) auto;
  justify-content: start;
  align-items: end;
  gap: .7rem;
}

/* Presets and Custom on one row; a custom period's dates sit beside them */
.summary-filter-panel.period-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  padding: .6rem .75rem;
}

.period-custom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
}

.period-custom > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.period-custom > summary::-webkit-details-marker {
  display: none;
}

.period-custom-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
}

.period-custom-form .form-control {
  width: auto;
}

.summary-source-tabs {
  align-items: center;
}

.summary-source-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 38px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-2);
  font-weight: 600;
  padding: .45rem .8rem;
  text-decoration: none;
}

.summary-source-tab:hover,
.summary-source-tab:focus {
  border-color: var(--line-strong);
  background: var(--surface-2);
  color: var(--brand-blue-dark);
}

.summary-source-tab.active {
  border-color: var(--signal-line);
  background: var(--signal-tint);
  color: var(--brand-blue-dark);
}

.summary-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  color: var(--brand-muted);
  font-size: .9rem;
  font-weight: 600;
}

/* Grouping tabs and the drill-down trail, just above the evidence they choose */
.summary-view-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
}

.server-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}

.server-detail-card {
  padding: 1rem;
}

.summary-definition-list {
  display: grid;
  gap: .55rem;
  margin: .85rem 0 0;
}

.summary-definition-list div {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: .7rem;
  border-top: 1px solid var(--line-2);
  padding-top: .55rem;
}

.summary-definition-list dt {
  color: var(--brand-muted);
  font-weight: 600;
}

.summary-definition-list dd {
  margin: 0;
  min-width: 0;
  word-break: break-word;
}

.server-outcome-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  margin-top: .85rem;
}

.server-outcome-grid span {
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink-3);
  padding: .7rem;
}

.server-outcome-grid strong {
  display: block;
  color: var(--brand-ink);
  font-size: 1.15rem;
}

.source-panel {
  overflow: hidden;
}

.source-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line-soft);
  padding: 1rem;
}

.source-panel-header .summary-panel-heading {
  margin-right: auto;
}

.source-panel-header > .btn {
  flex: 0 0 auto;
}

/* Spoofing the policy already stopped, folded under the senders that need attention */
.sender-folded {
  border-top: 1px solid var(--line-soft);
}

.sender-folded > summary {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .85rem 1rem;
  color: var(--ink-3);
  cursor: pointer;
  list-style: none;
}

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

.sender-folded > summary::after {
  content: "Show";
  margin-left: auto;
  color: var(--signal);
  font-weight: 600;
  white-space: nowrap;
}

.sender-folded[open] > summary::after {
  content: "Hide";
}

.sender-folded > summary .bi {
  color: var(--pass);
}

.sender-folded[open] > summary {
  border-bottom: 1px solid var(--line-soft);
}

.source-panel-count {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: .84rem;
  font-weight: 600;
  padding: .28rem .68rem;
}

.summary-table-wrap {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.summary-source-table {
  min-width: 980px;
  table-layout: fixed;
}

.summary-source-table th:nth-child(1),
.summary-source-table td:nth-child(1) {
  width: 24%;
}

.summary-source-table th:nth-child(2),
.summary-source-table td:nth-child(2) {
  width: 10%;
}

.summary-source-table th:nth-child(3),
.summary-source-table td:nth-child(3) {
  width: 26%;
}

.summary-source-table th:nth-child(4),
.summary-source-table td:nth-child(4) {
  width: 16%;
}

.summary-source-table th:nth-child(5),
.summary-source-table td:nth-child(5) {
  width: 14%;
}

.summary-source-table th:nth-child(6),
.summary-source-table td:nth-child(6) {
  width: 10%;
}

/* The senders list has five columns, not the servers table's six, so it shares the width its own way */
.summary-source-table.sender-groups th:nth-child(1),
.summary-source-table.sender-groups td:nth-child(1) {
  width: 32%;
}

.summary-source-table.sender-groups th:nth-child(2),
.summary-source-table.sender-groups td:nth-child(2) {
  width: 11%;
}

.summary-source-table.sender-groups th:nth-child(3),
.summary-source-table.sender-groups td:nth-child(3) {
  width: 10%;
}

.summary-source-table.sender-groups th:nth-child(4),
.summary-source-table.sender-groups td:nth-child(4) {
  width: 24%;
}

.summary-source-table.sender-groups th:nth-child(5),
.summary-source-table.sender-groups td:nth-child(5) {
  width: 23%;
}

/* Numbers line up on their last digit */
.table th.num,
.table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.summary-source-table tbody tr > td:first-child {
  border-left: 4px solid transparent;
}

.summary-source-table tbody tr.is-good > td:first-child {
  border-left-color: var(--brand-teal);
}

.summary-source-table tbody tr.is-watch > td:first-child {
  border-left-color: var(--brand-amber);
}

.summary-source-table tbody tr.is-risk > td:first-child {
  border-left-color: var(--brand-rose);
}

.summary-source-table tbody tr.is-neutral > td:first-child {
  border-left-color: var(--line-strong);
}

/* Enforcement readiness: what the domain's policy can safely become */
.readiness-card {
  border: 1px solid var(--line-soft);
  border-left: 4px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 0 var(--line-2);
  padding: 1rem 1.1rem;
}

.readiness-card.is-good { border-left-color: var(--pass); }
.readiness-card.is-risk { border-left-color: var(--coral); background: var(--coral-tint); }
.readiness-card.is-watch { border-left-color: var(--watch); background: var(--watch-tint); }

/* Before the first report: where the domain is on the way to its first verdict */
.waiting-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: .75rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: waiting-step;
}

.waiting-timeline li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .7rem .8rem .7rem 2.6rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--muted);
  font-size: .86rem;
  counter-increment: waiting-step;
}

.waiting-timeline li::before {
  content: counter(waiting-step);
  position: absolute;
  top: .7rem;
  left: .75rem;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-3);
  font-size: .75rem;
  font-weight: 600;
}

.waiting-timeline strong {
  color: var(--ink);
  font-weight: 600;
}

.waiting-timeline li.is-done::before {
  content: "\2713";
  border-color: var(--pass);
  background: var(--pass);
  color: #fff;
}

.waiting-timeline li.is-current {
  border-color: var(--signal-line);
  background: var(--signal-tint);
}

.waiting-timeline li.is-current::before {
  border-color: var(--signal);
  color: var(--signal-deep);
}

.waiting-checks {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 0 var(--line-2);
  padding: 1rem 1.1rem;
}

.waiting-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: .75rem;
  margin-top: .85rem;
}

.waiting-check {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .85rem .9rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  font-size: .9rem;
}

.waiting-check header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
}

.waiting-check h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
}

.waiting-check p {
  margin: 0;
  color: var(--ink-3);
}

.waiting-check > a {
  margin-top: auto;
  font-weight: 600;
}

.waiting-chip-list {
  display: grid;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.waiting-chip-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  color: var(--ink-3);
}

/* "Is this sender yours?" sits under a sender, in the readiness card and the senders table */
.sender-decision {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .5rem;
  margin-top: .45rem;
  font-size: .86rem;
}

.sender-decision-question {
  color: var(--ink);
  font-weight: 600;
}

.sender-decision-answer {
  color: var(--ink-3);
}

.readiness-review {
  list-style: none;
  padding-left: 0;
}

.readiness-review li + li {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--watch-line);
}

/* Mail over time: two stacked-column charts drawn by trend-chart.js, with a table twin */
.trend-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 1px 0 var(--line-2);
  padding: 1rem 1.1rem;
}

.trend-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 1.5rem;
  margin-top: .85rem;
}

.trend-figure {
  margin: 0;
  min-width: 0;
}

.trend-figure figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .25rem 1rem;
  margin-bottom: .4rem;
  color: var(--ink);
  font-size: .9rem;
}

.trend-legend {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .25rem .9rem;
  color: var(--ink-3);
  font-size: .82rem;
}

.trend-legend span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.trend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.trend-swatch.is-pass { background: var(--signal); }
.trend-swatch.is-fail { background: var(--coral); }

.trend-note {
  color: var(--ink-3);
  font-size: .82rem;
}

.trend-chart {
  position: relative;
  min-height: 202px;
}

/* In place of a chart with nothing to plot, the same height so the pair stays level */
.trend-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 202px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--ink-3);
  font-size: .88rem;
  text-align: center;
  padding: 1rem;
}

.trend-svg {
  display: block;
  overflow: visible;
}

.trend-svg .trend-gridline {
  stroke: var(--line-2);
  stroke-width: 1;
}

.trend-svg .trend-baseline {
  stroke: var(--line-strong);
  stroke-width: 1;
}

.trend-svg .trend-tick {
  fill: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.trend-svg .trend-hit {
  fill: transparent;
}

.trend-svg .trend-hit:hover {
  fill: rgba(19, 26, 43, .04);
}

.trend-tooltip {
  position: absolute;
  top: 0;
  z-index: 5;
  transform: translateX(-50%);
  min-width: 150px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-2);
  padding: .45rem .6rem;
  font-size: .8rem;
  pointer-events: none;
}

.trend-tooltip-title {
  margin-bottom: .2rem;
  color: var(--ink-3);
}

.trend-tooltip-row {
  display: flex;
  align-items: center;
  gap: .4rem;
  color: var(--ink-3);
}

.trend-tooltip-row strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.trend-tooltip-key {
  display: inline-block;
  width: 10px;
  height: 2px;
  border-radius: 1px;
}

.trend-table {
  margin-top: .75rem;
  font-size: .86rem;
}

.trend-table summary {
  color: var(--muted);
  cursor: pointer;
}

.trend-table table {
  margin: .5rem 0 0;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 991.98px) {
  .trend-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.readiness-detail {
  margin: .45rem 0 0;
  max-width: 72ch;
  color: var(--ink-2);
}

.readiness-senders {
  margin: .6rem 0 0;
  padding-left: 1.1rem;
  max-width: 72ch;
  color: var(--ink-2);
}

.readiness-senders li + li {
  margin-top: .4rem;
}

.readiness-evidence {
  margin: .6rem 0 0;
  font-size: .8rem;
  color: var(--ink-3);
}

/* What the next policy would have done to the last 90 days of mail */
.policy-impact {
  margin: .9rem 0 .2rem;
  padding: .75rem .9rem;
  max-width: 72ch;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.policy-impact h3 {
  margin: 0;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
}

.policy-impact ul {
  margin: .5rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-2);
}

.policy-impact li {
  display: flex;
  gap: .5rem;
  align-items: baseline;
}

.policy-impact li + li {
  margin-top: .35rem;
}

.policy-impact li > i { flex: none; }
.policy-impact li.is-good > i { color: var(--pass); }
.policy-impact li.is-risk > i { color: var(--coral); }
.policy-impact li.is-neutral > i { color: var(--ink-3); }

.status-chip.is-neutral {
  color: var(--ink-3);
}

.sender-servers {
  margin-top: .3rem;
  font-size: .82rem;
}

.sender-servers summary {
  color: var(--muted);
  cursor: pointer;
}

.sender-servers ul {
  margin: .35rem 0 0;
  padding-left: 1rem;
}

.sender-servers li {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.sender-table .status-chip {
  white-space: nowrap;
}

/* The sender row and its explanation row read as one item */
.sender-table tbody tr:has(+ .sender-detail-row) > td {
  border-bottom: 0;
}

.sender-detail-row > td.sender-explanation {
  padding-top: 0;
  font-size: .86rem;
  color: var(--ink-2);
}

.sender-explanation span {
  max-width: 90ch;
}

.sender-explanation span {
  display: block;
}

.sender-fix {
  margin-top: .35rem;
  color: var(--ink);
}

/* Mail by From domain, under the senders list, when subdomains were used */
.sent-as-panel {
  margin-top: 1rem;
  padding: 1rem 1.1rem 0;
  border-top: 1px solid var(--line-2);
}

.sent-as-note {
  max-width: 90ch;
  margin: .5rem 0 .75rem;
  color: var(--ink-2);
  font-size: .9rem;
}

/* How the same sender passes for another of the organization's domains */
.sender-hint {
  margin-top: .35rem;
  padding: .4rem .6rem;
  border-radius: var(--radius-sm);
  background: var(--signal-tint);
  color: var(--ink);
}

.sender-hint .bi {
  color: var(--signal-deep);
}

.source-identity-cell {
  min-width: 260px;
}

.source-name {
  display: inline-flex;
  align-items: center;
  color: var(--brand-blue-dark);
  font-size: .98rem;
  font-weight: 600;
  text-decoration: none;
}

.source-name:visited {
  color: var(--brand-blue-dark);
}

.source-name:hover,
.source-name:focus {
  color: var(--signal-deep);
  text-decoration: underline;
}

.source-meta {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-top: .2rem;
  color: var(--brand-muted);
  font-size: .86rem;
}

.country-code-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.05rem;
  min-height: 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--signal-tint);
  color: var(--ink-2);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1;
  padding: .1rem .35rem;
}

.summary-number {
  color: var(--brand-ink);
  font-size: 1.05rem;
  font-weight: 600;
}

.policy-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  padding: .22rem .55rem;
}

.policy-pill.is-monitor {
  background: var(--pass-tint);
  color: var(--pass-ink);
}

.policy-pill.is-quarantine {
  background: var(--watch-tint);
  color: var(--watch-ink);
}

.policy-pill.is-reject {
  background: var(--coral-tint);
  color: var(--coral-ink);
}

/* Spoofing: what got through is the problem, what was stopped is good news */
.policy-pill.is-unstopped {
  background: var(--coral-tint);
  color: var(--coral-ink);
}

.policy-pill.is-stopped {
  background: var(--pass-tint);
  color: var(--pass-ink);
}

.source-health {
  display: grid;
  gap: .4rem;
  min-width: 170px;
}

.source-health strong {
  color: var(--brand-ink);
  font-size: 1.05rem;
  font-weight: 600;
}

.source-health span {
  display: block;
  color: var(--brand-muted);
  font-size: .82rem;
}

.compliance-meter {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line-2);
}

.compliance-meter span {
  display: block;
  width: var(--meter-value, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-teal), var(--pass));
}

.auth-mini-grid {
  display: grid;
  gap: .35rem;
  min-width: 150px;
}

.auth-mini-grid span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .7rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: .84rem;
  padding: .45rem .55rem;
}

.source-status-list {
  align-items: center;
}

.auth-mini-grid strong {
  color: var(--brand-ink);
}

.source-record-list {
  display: grid;
  gap: .85rem;
  padding: 1rem;
}

.source-record-card {
  border: 1px solid var(--line-soft);
  border-left: 4px solid var(--brand-amber);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1rem;
}

.source-record-card.is-good {
  border-left-color: var(--brand-teal);
}

.source-record-card.is-risk {
  border-left-color: var(--brand-rose);
}

.source-record-card.is-neutral {
  border-left-color: var(--line-strong);
}

.source-record-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .8rem;
}

.source-record-head h3 {
  margin: .2rem 0 0;
  color: var(--brand-ink);
  font-size: 1.18rem;
  font-weight: 600;
}

.record-volume {
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--signal-tint);
  color: var(--brand-blue-dark);
  font-weight: 600;
  padding: .35rem .68rem;
}

.record-outcome-grid,
.record-detail-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
  margin-top: .85rem;
}

.record-outcome-grid p {
  margin: .25rem 0 0;
  color: var(--brand-muted);
  font-size: .86rem;
}

.record-detail-columns {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.record-detail-columns > div {
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface);
  padding: .75rem;
}

.record-detail-columns h4,
.summary-reason-list h4 {
  margin: 0 0 .55rem;
  color: var(--ink-2);
  font-size: .9rem;
  font-weight: 600;
}

.summary-detail-list {
  display: grid;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.summary-detail-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .5rem;
  color: var(--ink-3);
  font-size: .86rem;
}

.summary-detail-list strong {
  color: var(--brand-ink);
}

.summary-reason-list {
  display: grid;
  gap: .4rem;
  margin-top: .85rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: .75rem;
}

.summary-reason-list span {
  color: var(--ink-3);
}

/* Says what the raw reports list is narrowed to when opened from a summary */
.report-filter-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  margin-bottom: 1rem;
  border: 1px solid var(--signal-line);
  border-radius: var(--radius);
  background: var(--signal-tint);
  padding: .7rem 1rem;
  color: var(--ink-2);
}

.report-filter-banner a {
  margin-left: auto;
  font-weight: 600;
}

/* Short primer at the foot of the domain summary */
.dmarc-primer > summary {
  padding: .95rem 1.1rem;
  color: var(--brand-ink);
  font-weight: 600;
  cursor: pointer;
}

.dmarc-primer[open] > summary {
  border-bottom: 1px solid var(--line-soft);
}

.dmarc-primer-terms {
  margin: 0;
  padding: 0 1.1rem;
}

.dmarc-primer-terms div {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 1rem;
  border-bottom: 1px solid var(--line-soft);
  padding: .75rem 0;
}

.dmarc-primer-terms dt {
  color: var(--brand-ink);
  font-weight: 600;
}

.dmarc-primer-terms dd {
  max-width: 64ch;
  margin: 0;
  color: var(--brand-muted);
}

.dmarc-primer-note {
  margin: 0;
  padding: .85rem 1.1rem 1rem;
  color: var(--brand-muted);
  font-size: .9rem;
}

.settings-dashboard {
  display: grid;
  gap: 1rem;
}

.settings-hero,
.settings-dns-card,
.settings-record-panel {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 0 var(--line-2);
}

.settings-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  border-left: 4px solid var(--brand-blue);
  padding: 1.2rem;
}

.settings-hero-tags,
.settings-hero-actions,
.settings-card-header {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.settings-hero-actions {
  justify-content: flex-end;
}

.settings-status-grid,
.settings-dns-grid {
  display: grid;
  gap: .85rem;
}

.settings-status-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.settings-dns-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-status-card {
  min-height: 132px;
  border: 1px solid var(--line-soft);
  border-top: 4px solid var(--brand-amber);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1rem;
}

.settings-status-card.is-good {
  border-top-color: var(--brand-teal);
}

.settings-status-card.is-risk {
  border-top-color: var(--brand-rose);
}

.settings-status-card span,
.dns-record-details dt {
  color: var(--brand-muted);
  font-size: .76rem;
  font-weight: 600;
}

.settings-status-card strong {
  display: block;
  margin-top: .28rem;
  color: var(--brand-ink);
  font-size: 1.35rem;
  font-weight: 600;
}

.settings-status-card p,
.settings-dns-card p {
  margin: .45rem 0 0;
  color: var(--brand-muted);
}

.settings-dns-card,
.settings-record-panel {
  padding: 1rem;
}

.settings-card-header {
  align-items: flex-start;
  justify-content: space-between;
}

.settings-card-header h2 {
  margin: .2rem 0 0;
  color: var(--brand-ink);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
}

/* Settings tabs: shown once the script runs, until then every section shows in turn */

.settings-tabs {
  display: flex;
  gap: .15rem;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid var(--line);
  scrollbar-width: thin;
}

.settings-tab {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: .4rem;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-weight: 500;
  padding: .6rem .8rem;
  text-decoration: none;
  white-space: nowrap;
}

.settings-tab:hover {
  color: var(--ink);
}

.settings-tab:focus-visible {
  border-radius: var(--radius-sm);
  box-shadow: var(--focus-ring);
  outline: 0;
}

.settings-tab[aria-selected="true"] {
  border-bottom-color: var(--signal);
  color: var(--ink);
  font-weight: 600;
}

.settings-tab-dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--watch);
}

.settings-tab-count {
  min-width: 1.3rem;
  border-radius: 999px;
  background: var(--watch);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.3rem;
  padding: 0 .4rem;
  text-align: center;
}

.settings-tab-dot.is-risk,
.settings-tab-count.is-risk {
  background: var(--coral);
}

.settings-tab-panel {
  display: grid;
  gap: 1rem;
}

.settings-dashboard.has-tabs .settings-tab-panel:not(.is-active) {
  display: none;
}

/* Pinned at the top, under the phone header, so another tab is a click away from anywhere on a long one */
.settings-dashboard.has-tabs .settings-tabs {
  position: sticky;
  top: 60px;
  z-index: 20;
  background: var(--paper);
}

.settings-dashboard.has-tabs .settings-tab-panel,
.settings-dashboard.has-tabs .settings-tab-panel > section,
.settings-dashboard.has-tabs .settings-tab-panel .mail-security-item {
  scroll-margin-top: calc(60px + 4rem);
}

@media (min-width: 992px) {
  .settings-dashboard.has-tabs .settings-tabs {
    top: 0;
  }

  .settings-dashboard.has-tabs .settings-tab-panel,
  .settings-dashboard.has-tabs .settings-tab-panel > section,
  .settings-dashboard.has-tabs .settings-tab-panel .mail-security-item {
    scroll-margin-top: 4rem;
  }
}

/* Hosted SPF: the senders it covers, adding one, and stopping */

.spf-hosted-add {
  margin-top: .75rem;
}

.spf-hosted-add .form-control {
  max-width: 320px;
}

.spf-hosted-stop summary {
  color: var(--muted);
  cursor: pointer;
  font-size: .9rem;
}

/* Settings overview: one line per check */

.settings-overview-group {
  margin: 1.4rem 0 .5rem;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 600;
}

.settings-overview-note {
  margin: -.25rem 0 .6rem;
  color: var(--muted);
  font-size: .9rem;
}

.settings-checklist {
  margin: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 0;
  list-style: none;
}

.settings-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .4rem .8rem;
  border-top: 1px solid var(--line-2);
  padding: .75rem .9rem;
}

.settings-check:first-child {
  border-top: 0;
}

.settings-check > i {
  color: var(--muted);
  font-size: 1.1rem;
}

.settings-check.is-risk > i { color: var(--coral); }
.settings-check.is-watch > i { color: var(--watch); }
.settings-check.is-good > i { color: var(--pass); }

.settings-check strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
}

.settings-check span {
  display: block;
  color: var(--ink-3);
  font-size: .9rem;
}

.settings-check .btn {
  white-space: nowrap;
}

.settings-overview-emails {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin: 1.4rem 0 0;
  border-top: 1px solid var(--line-2);
  color: var(--ink-3);
  font-size: .92rem;
  padding-top: 1rem;
}

.settings-overview-emails i {
  color: var(--muted);
}

@media (max-width: 575.98px) {
  .settings-check {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .settings-check .btn {
    grid-column: 2;
    justify-self: start;
  }
}

.settings-toggle-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}

.settings-toggle-form .form-check {
  min-width: min(100%, 320px);
}

.settings-toggle-form .form-check-label {
  color: var(--brand-ink);
  font-weight: 650;
}

/* Digest and alerts choices, one under the other */
.settings-email-form {
  margin-top: 1rem;
  max-width: 72ch;
}

/* Beside the policy badge: where the DMARC record lives */
.record-host {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-3);
  font-size: .78em;
  font-weight: 600;
  line-height: 1;
  padding: .26em .5em;
  text-decoration: none;
  white-space: nowrap;
}

a.record-host:hover,
a.record-host:focus-visible {
  border-color: var(--line-strong);
  color: var(--ink);
}

.record-host.is-hosted {
  border-color: var(--signal-line);
  background: var(--signal-tint);
  color: var(--signal-deep);
}

.record-host.is-pending {
  border-color: var(--watch-line);
  background: var(--watch-tint);
  color: var(--watch-ink);
}

/* Beside the policy badge: this person gets the domain's digest */
.domain-digest-on {
  color: var(--ink-3);
  font-size: .85rem;
  line-height: 1;
  align-self: center;
}

.digest-admin-scroll {
  max-height: 70vh;
}

.digest-admin-table {
  min-width: 760px;
}

.digest-admin-table th,
.digest-admin-table td {
  vertical-align: middle;
}

.digest-user-column {
  min-width: 260px;
}

.digest-domain-heading {
  display: grid;
  gap: 0.15rem;
  min-width: 150px;
}

.digest-domain-heading span {
  color: var(--brand-ink);
  font-weight: 600;
}

.digest-domain-heading small {
  color: var(--brand-muted);
  font-size: 0.76rem;
  font-weight: 650;
}

.digest-admin-cell {
  display: grid;
  gap: 0.35rem;
  min-width: 130px;
}

.digest-switch {
  align-items: center;
  display: flex;
  gap: 0.45rem;
  min-height: 1.75rem;
}

.digest-switch .form-check-input {
  float: none;
  margin: 0;
}

.digest-switch .form-check-label {
  color: var(--brand-ink);
  font-size: 0.86rem;
  font-weight: 600;
}

.digest-state-note {
  color: var(--brand-muted);
  font-size: 0.76rem;
  font-weight: 650;
  line-height: 1.25;
}

.digest-state-note.is-explicit {
  color: var(--brand-primary);
}

.digest-admin-actions {
  align-items: center;
  border-top: 1px solid var(--brand-border);
  display: flex;
  justify-content: flex-end;
  padding: 1rem;
}

.settings-dns-card {
  border-left: 4px solid var(--brand-rose);
}

.settings-dns-card.is-good {
  border-left-color: var(--brand-teal);
}

.dns-record-details {
  display: grid;
  gap: .65rem;
  margin: .95rem 0;
}

.dns-record-details div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: .75rem;
  border-top: 1px solid var(--line-2);
  padding-top: .65rem;
}

.dns-record-details dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  margin: 0;
}

.dns-record-details .dns-record {
  flex: 1 1 320px;
}

.published-record-line {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .95rem;
}

.published-record-line code {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: .65rem .75rem;
}

/* Hosted DMARC: the two DNS steps, and the policy choice */
.hosted-steps {
  display: grid;
  gap: .9rem;
  margin: 1rem 0;
  padding-left: 1.25rem;
}

.hosted-steps .setup-record-card,
.hosted-steps .dns-record-block {
  margin-top: .5rem;
}

.hosted-policy fieldset {
  display: grid;
  gap: .35rem;
}

.hosted-policy legend {
  margin-bottom: .5rem;
}

.hosted-address-input {
  max-width: 22rem;
}

.hosted-more summary {
  cursor: pointer;
  font-weight: 600;
}

.hosted-settings-grid {
  display: grid;
  grid-template-columns: max-content minmax(0, 26rem);
  gap: .5rem 1rem;
  align-items: center;
}

.hosted-settings-grid .form-label {
  margin: 0;
}

@media (max-width: 575.98px) {
  .hosted-settings-grid {
    grid-template-columns: 1fr;
  }
}

.settings-empty-record {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: .95rem;
  border: 1px dashed var(--coral-line);
  border-radius: var(--radius);
  background: var(--coral-tint);
  color: var(--coral-ink);
  padding: .9rem;
}

.settings-empty-record i {
  font-size: 1.45rem;
}

.settings-empty-record strong,
.settings-empty-record span {
  display: block;
}

.settings-empty-record span {
  color: var(--coral-ink);
  font-size: .9rem;
}

.settings-error-list {
  display: grid;
  gap: .45rem;
  margin-top: .85rem;
}

.settings-error-list span {
  display: flex;
  align-items: center;
  gap: .45rem;
  border: 1px solid var(--coral-line);
  border-radius: var(--radius);
  background: var(--coral-tint);
  color: var(--coral-ink);
  font-weight: 600;
  padding: .55rem .65rem;
}

.settings-tag-table-wrap {
  margin-top: 1rem;
}

.settings-tag-table {
  min-width: 880px;
}

.settings-tag-table code {
  display: inline-block;
  max-width: 360px;
}

.section-card {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 0 var(--line-2);
}

.section-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  border-bottom: 1px solid var(--line-soft);
  padding: .95rem 1.1rem;
}

.section-card-header h2,
.section-card-header h3 {
  margin: 0;
  color: var(--brand-ink);
  font-size: 1.15rem;
  font-weight: 600;
}

.section-card-body {
  padding: 1.1rem;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
}

.detail-grid.is-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-item {
  min-width: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: .75rem;
}

.detail-item span {
  display: block;
  color: var(--brand-muted);
  font-size: .76rem;
  font-weight: 600;
}

.detail-item strong {
  display: block;
  margin-top: .2rem;
  color: var(--brand-ink);
  font-weight: 600;
  word-break: break-word;
}

.admin-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 1px solid var(--coral-line);
  border-radius: 999px;
  background: var(--coral-tint);
  color: var(--coral-ink);
  font-size: .78rem;
  font-weight: 600;
  padding: .24rem .58rem;
}

.form-shell {
  width: min(100%, 920px);
}

.form-shell.is-narrow {
  width: min(100%, 680px);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.form-grid .span-2 {
  grid-column: 1 / -1;
}

.check-panel {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  min-height: 72px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: .8rem;
}

.check-panel .form-check-input {
  margin-top: .22rem;
}

.check-panel label {
  color: var(--brand-ink);
  font-weight: 600;
}

.check-panel span {
  display: block;
  color: var(--brand-muted);
  font-size: .88rem;
}

.inline-chip-list,
.plain-stack-list {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.plain-stack-list {
  display: grid;
  gap: .35rem;
}

.inline-chip-list li,
.plain-stack-list li {
  min-width: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: .84rem;
  font-weight: 600;
  padding: .28rem .5rem;
  word-break: break-word;
}

.id-pill {
  display: inline-flex;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: .78rem;
  padding: .22rem .42rem;
  word-break: break-all;
}

.table-compact {
  font-size: .9rem;
}

.table-compact .btn {
  white-space: nowrap;
}

.table-note {
  color: var(--brand-muted);
  font-size: .86rem;
}

.log-message {
  max-width: 560px;
  color: var(--ink-2);
  line-height: 1.4;
  word-break: break-word;
}

.log-exception {
  max-height: 220px;
  overflow: auto;
  margin: 0;
  border: 1px solid var(--coral-line);
  border-radius: var(--radius);
  background: var(--coral-tint);
  color: var(--coral-ink);
  font-size: .82rem;
  padding: .75rem;
  white-space: pre-wrap;
}

.pagination-shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}

.pagination {
  margin-bottom: 0;
}

.page-link {
  border-color: var(--line-soft);
  color: var(--brand-blue-dark);
  font-weight: 600;
}

.page-item.active .page-link {
  border-color: var(--brand-blue);
  background: var(--brand-blue);
}

.settings-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.settings-form-grid .span-3 {
  grid-column: 1 / -1;
}

.empty-state {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 2rem;
  text-align: center;
}

.copy-button.copied {
  border-color: var(--pass);
  background: var(--pass-tint);
  color: var(--pass-ink);
}

/* Domain setup: live-preview chip on Create */
.domain-preview {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: .86rem;
  font-weight: 600;
  padding: .3rem .6rem;
}

.domain-preview i {
  color: var(--brand-blue);
}

.domain-preview code {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--brand-blue-dark);
  font-weight: 600;
}

.domain-precheck {
  display: grid;
  gap: .45rem;
}

.domain-precheck-row {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: .9rem;
  padding: .65rem .75rem;
}

.domain-precheck-row i {
  font-size: 1.1rem;
  line-height: 1.2;
}

/* Domain setup: combined Setup screen */
.setup-existing-banner {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  margin-bottom: 1rem;
  border: 1px solid var(--signal-line);
  border-left: 4px solid var(--brand-blue);
  border-radius: var(--radius);
  background: var(--signal-tint);
  color: var(--signal-deep);
  padding: .85rem 1rem;
}

.setup-existing-banner i {
  font-size: 1.3rem;
  line-height: 1.1;
  color: var(--brand-blue);
}

.setup-existing-banner strong {
  display: block;
  color: var(--brand-ink);
  font-weight: 600;
}

.setup-existing-banner span {
  display: block;
  margin-top: .15rem;
  color: var(--ink-3);
  font-size: .92rem;
}

/* The DNS provider makes the change itself (Domain Connect), offered before the records to add by hand */
.domain-connect-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  margin: .5rem 0;
}

.domain-connect-note {
  color: var(--ink-3);
  font-size: .88rem;
}

.domain-connect-offer.is-small .domain-connect-note {
  font-size: .82rem;
}

.domain-connect-or {
  margin: .75rem 0 .25rem;
  color: var(--ink-3);
  font-size: .88rem;
  font-weight: 600;
}

.setup-record-card {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 1rem;
  margin-top: .85rem;
}

.setup-record-grid {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: .85rem 1rem;
  align-items: start;
}

.setup-record-label {
  display: block;
  margin-top: .15rem;
  color: var(--brand-muted);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: 0;
}

.setup-record-value {
  min-width: 0;
  color: var(--ink-2);
  font-size: .95rem;
}

.setup-record-value code.dns-record {
  display: inline-block;
  word-break: break-all;
}

.setup-record-value code.dns-record-block {
  display: block;
  width: 100%;
  padding: .65rem .75rem;
  font-size: .86rem;
  line-height: 1.45;
}

.setup-record-value .form-text code {
  background: transparent;
  border: 0;
  padding: 0 .15rem;
  font-weight: 600;
  color: var(--ink-2);
}

.setup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.setup-status-row {
  display: flex;
  align-items: center;
  gap: .85rem;
  border: 1px solid var(--signal-line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--brand-ink);
  padding: .75rem .9rem;
}

.setup-status-row strong {
  display: block;
}

.setup-status-row .text-muted {
  font-size: .86rem;
}

.setup-status-timer {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .9rem;
  color: var(--brand-muted);
}

/* Explainer rows on Setup */
.explainer-list {
  display: grid;
  gap: .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.explainer-row {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: .85rem;
  align-items: flex-start;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: .7rem .85rem;
}

.explainer-row.is-preserved {
  border-left: 4px solid var(--brand-teal);
}

.explainer-row.is-added {
  border-left: 4px solid var(--brand-blue);
}

.explainer-row.is-replaced {
  border-left: 4px solid var(--brand-amber);
}

.explainer-row.is-removed {
  border-left: 4px solid var(--line-strong);
}

.explainer-row.is-removed .explainer-tag code {
  text-decoration: line-through;
}

.explainer-row.is-default {
  border-left: 4px solid var(--line);
}

.explainer-tag code {
  display: inline-block;
  margin: 0;
  padding: .25rem .4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--brand-ink);
  font-size: .82rem;
  word-break: break-all;
}

.explainer-source-pill {
  display: inline-block;
  margin-top: .35rem;
  border-radius: 999px;
  background: var(--signal-tint);
  color: var(--brand-blue-dark);
  font-size: .7rem;
  font-weight: 600;
  padding: .14rem .5rem;
}

.explainer-row.is-preserved .explainer-source-pill {
  background: var(--pass-tint);
  color: var(--pass-ink);
}

.explainer-row.is-replaced .explainer-source-pill {
  background: var(--watch-tint);
  color: var(--watch-ink);
}

.explainer-body strong {
  display: block;
  color: var(--brand-ink);
  font-size: .95rem;
  font-weight: 600;
}

.explainer-body span {
  display: block;
  margin-top: .15rem;
  color: var(--ink-3);
  font-size: .88rem;
  line-height: 1.45;
}

/* Provider walkthrough accordion content */
.walkthrough {
  display: grid;
  gap: .65rem;
}

.walkthrough-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
}

.walkthrough-steps {
  display: grid;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.walkthrough-steps li {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: .9rem;
  line-height: 1.5;
  padding: .65rem .8rem;
}

.walkthrough-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--brand-blue);
  color: var(--surface);
  font-size: .82rem;
  font-weight: 600;
}

.provider-picker .form-select {
  max-width: 360px;
}

/* Setup layout sidebar stacks two help cards */
.setup-aside {
  display: grid;
  gap: 1rem;
  align-content: start;
}

@media (max-width: 991.98px) {
  .setup-record-grid {
    grid-template-columns: 1fr;
  }

  .setup-record-label {
    margin-top: .5rem;
  }

  .explainer-row {
    grid-template-columns: 1fr;
  }
}

.database-overview {
  display: grid;
  gap: 1.05rem;
}

.database-page-header {
  align-items: flex-start;
}

.database-header-actions,
.database-jumpbar,
.schema-pill-row,
.schema-table-meta,
.schema-table-stats {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.database-header-actions {
  justify-content: flex-end;
}

.schema-chip,
.schema-count,
.schema-note {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: .84rem;
  font-weight: 600;
  padding: .28rem .68rem;
}

.database-warning ul {
  margin: .45rem 0 0;
  padding-left: 1.1rem;
}

.database-metric-grid .metric-value {
  font-size: 1.55rem;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.database-jumpbar {
  position: sticky;
  top: 86px;
  z-index: 5;
  align-items: center;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .96);
  padding: .55rem;
  box-shadow: 0 10px 24px rgba(19, 26, 43, .06);
  backdrop-filter: blur(14px);
}

.database-jumpbar a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--ink-2);
  font-size: .88rem;
  font-weight: 600;
  padding: .34rem .65rem;
  text-decoration: none;
}

.database-jumpbar a:hover,
.database-jumpbar a:focus {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--brand-blue-dark);
}

.database-context-grid,
.schema-table-split,
.schema-migration-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .95rem;
}

.detail-item.span-2 {
  grid-column: 1 / -1;
}

.schema-section {
  scroll-margin-top: 144px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 0 var(--line-2);
}

.schema-section-header,
.schema-table-card-header,
.schema-subsection-title,
.schema-stack-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}

.schema-section-header {
  border-bottom: 1px solid var(--line-soft);
  padding: 1rem 1.1rem;
}

.schema-section-header h2 {
  margin: .15rem 0 0;
  color: var(--brand-ink);
  font-size: 1.24rem;
  font-weight: 600;
}

.schema-table-summary {
  border-width: 0 0 1px;
  border-radius: 0;
  box-shadow: none;
}

.schema-table-summary .table {
  min-width: 1060px;
}

.schema-table-link {
  display: grid;
  gap: .12rem;
  color: var(--brand-ink);
  text-decoration: none;
}

.schema-table-link span,
.schema-table-name span,
.schema-inline-note,
.schema-stack-head span,
.schema-facts-grid span,
.schema-subsection-title span {
  color: var(--brand-muted);
  font-size: .8rem;
  font-weight: 600;
}

.schema-table-link:hover strong,
.schema-table-link:focus strong {
  color: var(--brand-blue-dark);
}

.schema-table-list {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

.schema-table-card {
  scroll-margin-top: 144px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.schema-table-card-header {
  align-items: center;
  border-left: 4px solid var(--brand-blue);
  border-bottom: 1px solid var(--line-2);
  background: var(--surface-2);
  padding: 1rem;
}

.schema-table-name {
  display: grid;
  gap: .1rem;
}

.schema-table-name strong {
  color: var(--brand-ink);
  font-size: 1.2rem;
  font-weight: 600;
}

.schema-table-meta {
  margin-top: .45rem;
}

.schema-table-meta span {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: var(--ink-3);
  font-size: .85rem;
  font-weight: 600;
}

.schema-table-stats {
  justify-content: flex-end;
}

.schema-table-stats span {
  min-width: 92px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-3);
  font-size: .8rem;
  font-weight: 600;
  padding: .45rem .55rem;
  text-align: right;
}

.schema-table-stats strong {
  display: block;
  color: var(--brand-ink);
  font-size: 1rem;
  font-weight: 600;
}

.schema-facts-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
  border-bottom: 1px solid var(--line-2);
  padding: .9rem 1rem;
}

.schema-facts-grid div {
  min-width: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: .65rem;
}

.schema-facts-grid strong {
  display: block;
  margin-top: .16rem;
  color: var(--brand-ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.schema-subsection {
  display: grid;
  gap: .65rem;
  padding: 1rem;
}

.schema-subsection + .schema-subsection,
.schema-table-split + .schema-subsection {
  border-top: 1px solid var(--line-2);
}

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

.schema-table-split .schema-subsection + .schema-subsection {
  border-top: 0;
  border-left: 1px solid var(--line-2);
}

.schema-subsection-title {
  align-items: center;
}

.schema-subsection-title h3 {
  margin: 0;
  color: var(--brand-ink);
  font-size: 1rem;
  font-weight: 600;
}

.schema-detail-table-wrap {
  border-radius: var(--radius);
}

.schema-columns-table {
  min-width: 1120px;
}

.schema-index-table {
  min-width: 1180px;
}

.schema-inline-note {
  display: block;
  margin-top: .18rem;
  line-height: 1.35;
}

.schema-pill-row {
  align-items: center;
}

.schema-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: .74rem;
  font-weight: 600;
  line-height: 1;
  padding: .18rem .48rem;
  white-space: nowrap;
}

.schema-status-pill.is-required,
.schema-status-pill.is-index {
  border-color: var(--pass-line);
  background: var(--pass-tint);
  color: var(--pass-ink);
}

.schema-status-pill.is-key {
  border-color: var(--signal-line);
  background: var(--signal-tint);
  color: var(--signal-deep);
}

.schema-status-pill.is-fk {
  border-color: var(--watch-line);
  background: var(--watch-tint);
  color: var(--watch-ink);
}

.schema-stack-list {
  display: grid;
  gap: .65rem;
}

.schema-stack-item {
  min-width: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface);
  padding: .75rem;
}

.schema-stack-head {
  align-items: center;
  margin-bottom: .45rem;
}

.schema-stack-head strong {
  min-width: 0;
  color: var(--brand-ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.schema-sql {
  display: block;
  max-height: 122px;
  overflow: auto;
  margin-top: .5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: .55rem;
  white-space: pre-wrap;
}

.schema-relation-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
}

.schema-empty {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--brand-muted);
  font-weight: 600;
  padding: .85rem;
}

.schema-migration-grid {
  padding: 1rem;
}

.schema-migration-panel {
  min-width: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1rem;
}

.schema-migration-list {
  display: grid;
  gap: .35rem;
  max-height: 360px;
  overflow: auto;
  margin: .75rem 0 0;
  padding-left: 1.2rem;
}

.schema-migration-list li {
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: .86rem;
  word-break: break-word;
}

/* --------------------------------------------------------------------------
   Page-level alignment with the new system
   -------------------------------------------------------------------------- */

.summary-hero,
.summary-record-panel,
.summary-filter-panel,
.source-panel,
.server-detail-card,
.settings-hero,
.settings-dns-card,
.settings-record-panel,
.settings-status-card,
.section-card,
.schema-section,
.empty-state {
  border-radius: var(--radius-lg);
}

.summary-hero,
.settings-hero {
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-1), inset 3px 0 0 var(--signal);
}

.summary-filter-panel {
  margin-bottom: 1.25rem;
}

.summary-kpi strong {
  margin-top: .45rem;
  font-size: 2rem;
  font-weight: 650;
  letter-spacing: -0.03em;
}

.summary-section-kicker,
.summary-panel-heading span,
.summary-policy-grid span,
.record-outcome-grid span,
.settings-status-card span,
.dns-record-details dt,
.detail-item span,
.setup-record-label {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: 0;
}

.country-code-chip {
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-weight: 500;
}

.empty-state {
  border-color: var(--line-strong);
  background: var(--surface);
  padding: 2.5rem 1.5rem;
}

.empty-state h2 {
  margin-bottom: .35rem;
}

.empty-state p {
  max-width: 48ch;
  margin-left: auto;
  margin-right: auto;
}

.page-link {
  border-color: var(--line);
  color: var(--ink-2);
  font-weight: 500;
}

.page-link:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.page-item.active .page-link {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.walkthrough-step-num {
  background: var(--ink);
}

.compliance-meter span {
  background: var(--pass);
}

.copy-button.copied {
  border-color: var(--pass);
  background: var(--pass-tint);
  color: var(--pass-ink);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--line);
  padding: 1rem 0;
}

.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  padding: 0 1rem;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--ink-2);
  font-size: .9rem;
  font-weight: 600;
}

.footer-brand img {
  border-radius: 5px;
  background: #fff;
}

.footer-meta {
  margin: 0;
  color: var(--muted);
  font-size: .85rem;
}

.footer-links {
  display: inline-flex;
  gap: 1.25rem;
  font-size: .85rem;
}

.footer-links a {
  color: var(--ink-3);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--signal);
  text-decoration: underline;
}

/* Privacy policy and terms of service */
.legal-public {
  padding-top: 2.5rem;
  padding-bottom: 3rem;
}

.legal-doc {
  max-width: 820px;
  color: var(--ink-2);
  line-height: 1.65;
}

.legal-doc h2 {
  margin: 2rem 0 .6rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
}

.legal-doc h2:first-child {
  margin-top: 0;
}

.legal-doc h3 {
  margin: 1.25rem 0 .35rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}

.legal-doc ul {
  padding-left: 1.25rem;
}

.legal-doc li + li {
  margin-top: .3rem;
}

/* Details still to be supplied before the legal pages are final */

/* Plan choice */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

/* One plan, while everything is free */
.plan-grid.is-single {
  grid-template-columns: minmax(0, 440px);
}

.plan-card {
  display: flex;
  flex-direction: column;
  padding: 1.1rem;
}

.plan-card.is-current {
  border-color: var(--signal-line);
  box-shadow: inset 0 3px 0 var(--signal);
}

.plan-card h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
}

.plan-price {
  margin: .35rem 0 .5rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
}

.plan-price small {
  font-size: .85rem;
  font-weight: 500;
  color: var(--muted);
}

.plan-card ul {
  flex: 1 0 auto;
  margin: .75rem 0 1rem;
  padding-left: 1.1rem;
  color: var(--ink-2);
}

.plan-card li + li {
  margin-top: .25rem;
}

.footer-version {
  margin-left: .5rem;
  color: #98a0b0;
  font-family: var(--font-mono);
  font-size: .8rem;
}

@media (min-width: 992px) {
  .app-body .site-footer-inner {
    padding: 0 2.25rem;
  }
}

/* --------------------------------------------------------------------------
   Public pages
   -------------------------------------------------------------------------- */

.marketing-shell {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background: var(--paper);
}

.marketing-shell > main {
  flex: 1 0 auto;
}

.lp-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.marketing-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  border-bottom: 1px solid var(--line);
  background: rgba(243, 245, 249, .88);
  backdrop-filter: saturate(1.4) blur(12px);
}

.marketing-header .navbar {
  padding: .7rem 0;
}

.marketing-header .lp-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.marketing-header .nav-link {
  border-radius: var(--radius);
  color: var(--ink-2);
  font-size: .925rem;
  font-weight: 500;
  padding: .45rem .7rem;
}

.marketing-header .nav-link:hover,
.marketing-header .nav-link:focus-visible {
  background: rgba(19, 26, 43, .05);
  color: var(--ink);
}

.marketing-header .navbar-toggler {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 1.3rem;
  padding: .2rem .55rem;
}

.marketing-header .navbar-toggler:focus {
  box-shadow: var(--focus-ring);
}

/* Hero */

.lp-hero {
  padding: 3.5rem 0 4rem;
}

.lp-hero-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}

.lp-eyebrow {
  margin: 0 0 1rem;
  color: var(--signal);
  font-size: .95rem;
  font-weight: 600;
}

.lp-title {
  max-width: 13ch;
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.5rem, 6vw, 4.4rem);
  font-weight: 750;
  letter-spacing: -0.04em;
  line-height: 1;
  text-wrap: balance;
}

.lp-lede {
  max-width: 54ch;
  margin: 1.5rem 0 0;
  color: var(--ink-3);
  font-size: 1.125rem;
  line-height: 1.6;
}

.lp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}

.lp-hero-note {
  margin: 1.1rem 0 0;
  color: var(--muted);
  font-size: .9rem;
}

/* Policy simulator: the one loud element on the page */

.sim {
  --sim-line: #283149;
  --sim-soft: #1a2236;
  --sim-text: #c5cbd8;
  --sim-dim: #8d96aa;
  border-radius: 16px;
  background: var(--ink);
  color: var(--sim-text);
  padding: 1.5rem;
  box-shadow: 0 40px 80px -40px rgba(19, 26, 43, .55), 0 2px 6px rgba(19, 26, 43, .12);
}

.sim-title {
  margin: 0;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.sim-intro {
  margin: .35rem 0 0;
  color: var(--sim-dim);
  font-size: .9rem;
}

.sim-message {
  margin-top: 1.25rem;
  border: 1px solid var(--sim-line);
  border-radius: 10px;
  background: var(--sim-soft);
}

.sim-envelope {
  display: grid;
  gap: .35rem;
  margin: 0;
  padding: .9rem 1rem;
}

.sim-envelope div {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  gap: .75rem;
}

.sim-envelope dt {
  color: var(--sim-dim);
  font-size: .85rem;
  font-weight: 500;
}

.sim-envelope dd {
  min-width: 0;
  margin: 0;
  color: #eef0f5;
  font-size: .9rem;
  overflow-wrap: anywhere;
}

.sim-checks {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin: 0;
  border-top: 1px solid var(--sim-line);
  padding: .7rem 1rem;
  list-style: none;
}

.sim-checks li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
}

.sim-check-name {
  color: var(--sim-text);
  font-weight: 600;
}

.sim-fail {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: #ff9287;
}

.sim-policy {
  margin: 1.4rem 0 0;
  border: 0;
  padding: 0;
}

.sim-policy legend {
  float: none;
  margin-bottom: .5rem;
  color: var(--sim-dim);
  font-size: .85rem;
  font-weight: 500;
}

.sim-policy-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  border: 1px solid var(--sim-line);
  border-radius: 10px;
  background: #0c1120;
  padding: 4px;
}

.sim-policy-options label {
  position: relative;
  margin: 0;
}

.sim-policy-options input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.sim-policy-options span {
  display: block;
  border-radius: 7px;
  color: var(--sim-text);
  font-size: .925rem;
  font-weight: 600;
  padding: .6rem .5rem;
  text-align: center;
  transition: background-color .15s ease, color .15s ease;
}

.sim-policy-options label:hover span {
  background: rgba(255, 255, 255, .06);
  color: #fff;
}

.sim-policy-options input:checked + span {
  background: #fff;
  color: var(--ink);
}

.sim-policy-options input:focus-visible + span {
  outline: 2px solid var(--signal-on-dark);
  outline-offset: 2px;
}

.sim-record {
  display: block;
  margin-top: .85rem;
  color: var(--sim-text);
  font-size: .82rem;
  line-height: 1.6;
  word-break: break-all;
}

.sim-record-host {
  display: block;
  color: var(--sim-dim);
}

.sim-p {
  display: none;
  border-radius: 3px;
  background: rgba(159, 176, 255, .18);
  color: #fff;
  font-weight: 500;
  padding: 0 .2em;
}

.sim-outcome {
  margin-top: 1.4rem;
  border-top: 1px solid var(--sim-line);
  padding-top: 1.25rem;
}

.sim-route {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.sim-route li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  border: 1px dashed #36405a;
  border-radius: 10px;
  color: #6f7a90;
  font-size: .85rem;
  font-weight: 600;
  padding: .75rem .5rem;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.sim-route i {
  font-size: 1.35rem;
  line-height: 1;
}

.sim-result {
  display: none;
  margin: 0;
  color: var(--sim-text);
  font-size: .925rem;
  line-height: 1.55;
  animation: sim-in .28s ease-out both;
}

.sim-result strong {
  display: block;
  margin-bottom: .15rem;
  color: #fff;
  font-size: 1.02rem;
  font-weight: 650;
}

/* Inbox is the bad outcome for a spoof, blocked is the good one */
.sim:has(input[value="none"]:checked) .sim-p.is-none,
.sim:has(input[value="quarantine"]:checked) .sim-p.is-quarantine,
.sim:has(input[value="reject"]:checked) .sim-p.is-reject {
  display: inline;
}

.sim:has(input[value="none"]:checked) .sim-result.is-none,
.sim:has(input[value="quarantine"]:checked) .sim-result.is-quarantine,
.sim:has(input[value="reject"]:checked) .sim-result.is-reject {
  display: block;
}

.sim:has(input[value="none"]:checked) .sim-route .is-inbox {
  border: 1px solid var(--coral);
  background: rgba(226, 87, 76, .16);
  color: #ffb3ab;
}

.sim:has(input[value="quarantine"]:checked) .sim-route .is-junk {
  border: 1px solid #e6b33d;
  background: rgba(242, 193, 78, .14);
  color: #f6d68a;
}

.sim:has(input[value="reject"]:checked) .sim-route .is-blocked {
  border: 1px solid #3fbf8a;
  background: rgba(63, 191, 138, .15);
  color: #8fe0bd;
}

@keyframes sim-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Sections */

/* Free tools strip under the hero */
.lp-tools {
  border-top: 1px solid var(--line);
  padding: 2.5rem 0 3rem;
  scroll-margin-top: 64px;
}

.lp-tools-title {
  margin: 0 0 1.25rem;
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 650;
}

.lp-tools-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-tools-list a {
  display: grid;
  align-content: start;
  gap: .35rem;
  height: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  color: inherit;
  padding: 1.1rem 1.2rem;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.lp-tools-list a:hover,
.lp-tools-list a:focus-visible {
  border-color: var(--signal-line);
  box-shadow: var(--shadow-2);
}

.lp-tools-list .bi {
  color: var(--signal);
  font-size: 1.35rem;
}

.lp-tools-list strong {
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 650;
}

.lp-tools-list span {
  color: var(--ink-3);
  font-size: .925rem;
  line-height: 1.5;
}

.lp-section {
  border-top: 1px solid var(--line);
  padding: 4.5rem 0;
  scroll-margin-top: 64px;
}

.lp-heading {
  margin: 0 0 1rem;
  color: var(--ink);
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-wrap: balance;
}

.lp-section-copy p {
  max-width: 50ch;
  color: var(--ink-3);
  font-size: 1.05rem;
  line-height: 1.65;
}

.lp-split {
  display: grid;
  gap: 2.5rem;
}

/* Sample report */

.lp-sample {
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}

.lp-sample-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  border-bottom: 1px solid var(--line-2);
  padding: .9rem 1.1rem;
  font-size: .9rem;
}

.lp-sample-head strong {
  color: var(--ink);
  font-weight: 600;
}

.lp-sample-tag {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: .78rem;
  padding: .1rem .6rem;
}

.lp-sample-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}

.lp-sample-table th {
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  font-size: .8rem;
  font-weight: 600;
  padding: .6rem 1.1rem;
  text-align: left;
}

.lp-sample-table td {
  border-bottom: 1px solid var(--line-2);
  color: var(--ink-2);
  padding: .85rem 1.1rem;
  vertical-align: middle;
}

.lp-sample-table tr:last-child td {
  border-bottom: 0;
}

.lp-sample-table .num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.lp-sample-table td:first-child strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
}

.lp-sample-table td:first-child span {
  display: block;
  color: var(--muted);
  font-size: .82rem;
}

.lp-sample-table tr.is-good td:first-child { box-shadow: inset 3px 0 0 var(--pass); }
.lp-sample-table tr.is-watch td:first-child { box-shadow: inset 3px 0 0 var(--watch); }
.lp-sample-table tr.is-risk td:first-child { box-shadow: inset 3px 0 0 var(--coral); }

.lp-meter {
  display: inline-block;
  overflow: hidden;
  width: 88px;
  height: 6px;
  margin-right: .6rem;
  border-radius: 999px;
  background: var(--line-2);
  vertical-align: middle;
}

.lp-meter span {
  display: block;
  width: var(--v);
  height: 100%;
  border-radius: inherit;
  background: var(--pass);
}

.is-watch .lp-meter span { background: var(--watch); }
.is-risk .lp-meter span { background: var(--coral); }

.lp-rate {
  color: var(--ink);
  font-weight: 600;
}

.is-risk .lp-rate { color: var(--coral-ink); }

.lp-section-alt {
  background: var(--surface);
}

/* Readiness sample */

.lp-ready {
  padding: 1.1rem 1.1rem 1.25rem;
}

.lp-ready-status {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  color: var(--pass-ink);
  font-size: 1.05rem;
  font-weight: 650;
}

.lp-ready-status i {
  color: var(--pass);
}

.lp-ready-evidence {
  margin: .9rem 0 0;
  border-top: 1px solid var(--line-2);
  padding: 0;
  list-style: none;
}

.lp-ready-evidence li {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  border-bottom: 1px solid var(--line-2);
  color: var(--ink-2);
  font-size: .9rem;
  padding: .6rem 0;
}

.lp-ready-evidence i {
  color: var(--pass);
}

.lp-ready-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  margin-top: 1.1rem;
}

.lp-ready-button {
  border-radius: var(--radius);
  background: var(--signal);
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  padding: .5rem .9rem;
}

.lp-ready-note {
  color: var(--muted);
  font-size: .82rem;
}

.lp-ready-record {
  display: block;
  margin-top: 1.1rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink);
  font-size: .82rem;
  padding: .6rem .75rem;
  word-break: break-all;
}

.lp-ready-record b {
  border-radius: 3px;
  background: var(--pass-tint);
  color: var(--pass-ink);
  font-weight: 600;
  padding: 0 .2rem;
}

/* Feature grid */

.lp-section-intro {
  max-width: 60ch;
  margin: 0;
  color: var(--ink-3);
  font-size: 1.05rem;
  line-height: 1.65;
}

.lp-features {
  display: grid;
  gap: 2rem 2.5rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}

.lp-features li {
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
}

.lp-features i {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: .85rem;
  place-items: center;
  border-radius: var(--radius);
  background: var(--signal-tint);
  color: var(--signal);
  font-size: 1.1rem;
}

.lp-features h3 {
  margin: 0 0 .4rem;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 650;
}

.lp-features p {
  max-width: 40ch;
  margin: 0;
  color: var(--ink-3);
  font-size: .95rem;
  line-height: 1.55;
}

/* Gmail sample: a month of spam rates against Gmail's two lines */

.lp-gmail {
  padding: 1.1rem 1.1rem 1.25rem;
}

.lp-gmail-rate {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .6rem;
  margin: 0;
}

.lp-gmail-rate strong {
  color: var(--pass-ink);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.lp-gmail-rate span {
  color: var(--muted);
  font-size: .9rem;
}

.lp-gmail-chart {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 120px;
  margin: 1.1rem 0 .35rem;
  border-bottom: 1px solid var(--line);
}

.lp-gmail-bar {
  flex: 1;
  height: var(--h);
  min-height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--pass);
}

.lp-gmail-bar.is-watch {
  background: var(--watch);
}

.lp-gmail-line {
  position: absolute;
  right: 0;
  bottom: var(--at);
  left: 0;
  border-top: 1px dashed var(--watch);
}

.lp-gmail-line.is-limit {
  border-top-color: var(--coral);
}

.lp-gmail-line span {
  position: absolute;
  right: 0;
  bottom: 2px;
  border-radius: 3px;
  background: var(--surface);
  color: var(--watch-ink);
  font-size: .72rem;
  font-weight: 600;
  padding: 0 .3rem;
}

.lp-gmail-line.is-limit span {
  color: var(--coral-ink);
}

.lp-gmail-axis {
  display: flex;
  justify-content: space-between;
  margin: 0;
  color: var(--muted);
  font-size: .75rem;
}

/* Setup sequence: a real ordered process, drawn as a timeline */

/* Sits on the page's own background, between the white features and glossary */
.lp-section-steps {
  background: var(--paper);
}

.lp-steps {
  display: grid;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: lp-step;
}

.lp-steps li {
  position: relative;
  border-left: 2px solid var(--line);
  padding: 0 0 2rem 2rem;
  counter-increment: lp-step;
}

.lp-steps li:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

.lp-steps li::before {
  content: counter(lp-step);
  position: absolute;
  top: -.15rem;
  left: -1.05rem;
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  box-shadow: 0 0 0 5px var(--paper);
}

.lp-steps h3 {
  margin: 0 0 .4rem;
  font-size: 1.1rem;
  font-weight: 650;
}

.lp-steps p {
  max-width: 36ch;
  margin: 0;
  color: var(--ink-3);
  font-size: .95rem;
}

/* Glossary */

.lp-glossary {
  margin: 0;
  border-top: 1px solid var(--line);
}

.lp-glossary div {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 1.25rem;
  border-bottom: 1px solid var(--line);
  padding: 1.15rem 0;
}

.lp-glossary dt {
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 700;
}

.lp-glossary dd {
  max-width: 56ch;
  margin: 0;
  color: var(--ink-3);
  font-size: 1rem;
}

/* Questions, open one at a time as the reader likes */

.lp-faq {
  border-top: 1px solid var(--line);
}

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

.lp-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
}

.lp-faq summary::-webkit-details-marker {
  display: none;
}

.lp-faq summary h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
}

.lp-faq summary i {
  flex: none;
  color: var(--muted);
  transition: transform .15s ease;
}

.lp-faq details[open] summary i {
  transform: rotate(45deg);
}

.lp-faq details p {
  max-width: 60ch;
  margin: 0 0 1rem;
  color: var(--ink-3);
  font-size: 1rem;
  line-height: 1.65;
}

.lp-faq details p:last-child {
  margin-bottom: 1.25rem;
}

/* Closing call to action, continues into the footer */

.lp-cta {
  background: var(--ink);
  padding: 3.5rem 0;
}

.lp-cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
}

.lp-cta h2 {
  margin: 0 0 .35rem;
  color: #fff;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.lp-cta p {
  margin: 0;
  color: #9aa3b6;
  font-size: 1.05rem;
}

.marketing-shell .site-footer {
  border-top: 1px solid #262f45;
  background: var(--ink);
  padding: 1.25rem 0;
}

.marketing-shell .site-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.marketing-shell .footer-brand {
  color: #e6e9f0;
}

.marketing-shell .footer-meta,
.marketing-shell .footer-version {
  color: #8d96aa;
}

.marketing-shell .footer-links a {
  color: #c5cbd8;
}

.marketing-shell .footer-links a:hover {
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   Sign-up and account screens
   -------------------------------------------------------------------------- */

.auth-wrap {
  width: min(100%, 520px);
  margin: 3.5rem auto 4rem;
}

.auth-panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 2rem 1.5rem;
  box-shadow: var(--shadow-2);
}

/* Icon above the heading on single-message pages: access denied, not found, errors */
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--signal-tint);
  color: var(--signal);
  font-size: 1.35rem;
}

.auth-panel h1,
.auth-panel h2 {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.auth-panel h1 {
  font-size: 1.65rem;
}

.step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 1.25rem 0 1.75rem;
}

.step-indicator .step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: .875rem;
  font-weight: 700;
}

.step-indicator .step + .step {
  margin-left: 2.75rem;
  position: relative;
}

.step-indicator .step + .step::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% + 2px);
  width: 2.75rem;
  height: 2px;
  background: var(--line);
}

.step-indicator .step.active {
  border-color: var(--signal);
  background: var(--signal);
  color: #fff;
}

.step-indicator .step.completed {
  border-color: var(--pass);
  background: var(--pass);
  color: #fff;
}

.step-indicator .step.completed + .step::before {
  background: var(--pass);
}

.setup-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
  gap: 1.25rem;
}

.record-table td,
.record-table th {
  vertical-align: top;
}

.soft-list {
  display: grid;
  gap: .65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.soft-list li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: .8rem;
}

.feature-card,
.workflow-step {
  height: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 1.25rem;
}

.flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.15rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface-2);
  vertical-align: -.15rem;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .lp-container {
    padding: 0 2rem;
  }

  .marketing-shell .site-footer-inner {
    padding: 0 2rem;
  }

  .auth-panel {
    padding: 2.25rem 2.25rem 2rem;
  }

  .lp-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 2.5rem;
  }

  .lp-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lp-steps li,
  .lp-steps li:last-child {
    border-top: 2px solid var(--line);
    border-left: 0;
    padding: 2rem 2rem 0 0;
  }

  .lp-steps li::before {
    top: -1.05rem;
    left: 0;
  }
}

@media (min-width: 992px) {
  .lp-hero {
    padding: 5rem 0 6rem;
  }

  .lp-hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 4.5rem;
  }

  .lp-section {
    padding: 6rem 0;
  }

  .lp-split {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 4.5rem;
    align-items: start;
  }

  .lp-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lp-features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sim {
    padding: 1.75rem;
  }
}

@media (max-width: 1199.98px) {
  .setup-layout,
  .summary-record-panel,
  .server-detail-grid,
  .settings-dns-grid,
  .database-context-grid,
  .schema-table-split,
  .schema-migration-grid {
    grid-template-columns: 1fr;
  }

  .schema-table-split .schema-subsection + .schema-subsection {
    border-top: 1px solid var(--line-2);
    border-left: 0;
  }

  .record-outcome-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .record-detail-columns {
    grid-template-columns: 1fr;
  }

  .detail-grid,
  .settings-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .table-responsive > .table {
    min-width: 820px;
  }

  .summary-filter-grid {
    grid-template-columns: 1fr;
  }

  .form-grid,
  .detail-grid,
  .detail-grid.is-two,
  .settings-form-grid {
    grid-template-columns: 1fr;
  }

  .settings-form-grid .span-3 {
    grid-column: auto;
  }

  .settings-status-grid {
    grid-template-columns: 1fr;
  }

  .dmarc-record-line,
  .published-record-line {
    align-items: stretch;
    flex-direction: column;
  }

  .summary-source-table {
    min-width: 940px;
  }

  .database-jumpbar {
    position: static;
  }

  .database-header-actions {
    justify-content: flex-start;
  }

  .schema-facts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .marketing-header .navbar-collapse {
    padding: .75rem 0 .25rem;
  }
}

@media (max-width: 767.98px) {
  .page-title {
    font-size: 1.6rem;
  }

  .metric-value,
  .summary-kpi strong {
    font-size: 1.65rem;
  }

  .summary-policy-grid,
  .record-outcome-grid,
  .server-outcome-grid,
  .schema-facts-grid {
    grid-template-columns: 1fr;
  }

  .summary-hero,
  .settings-hero,
  .source-panel-header,
  .source-record-head,
  .schema-section-header,
  .schema-table-card-header {
    align-items: stretch;
    flex-direction: column;
  }

  .summary-hero-actions,
  .settings-hero-actions,
  .summary-source-tabs,
  .summary-source-tab,
  .source-panel-count {
    width: 100%;
  }

  .summary-hero-actions .btn,
  .settings-hero-actions .btn,
  .summary-source-tab {
    justify-content: center;
  }

  .summary-definition-list div,
  .dns-record-details div {
    grid-template-columns: 1fr;
    gap: .2rem;
  }

  .database-jumpbar a,
  .schema-chip,
  .schema-count,
  .schema-note {
    width: 100%;
    justify-content: center;
  }

  .schema-table-stats span {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .schema-table-list {
    padding: .75rem;
  }

  .lp-actions .btn {
    flex: 1 1 auto;
  }

  .lp-cta-inner .btn {
    width: 100%;
  }
}

@media (max-width: 479.98px) {
  .metric-grid,
  .summary-metric-grid,
  .database-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metric-card,
  .summary-kpi {
    padding: .9rem 1rem 1rem;
  }

  .lp-meter {
    display: none;
  }

  .lp-sample-table th,
  .lp-sample-table td {
    padding-left: .85rem;
    padding-right: .85rem;
  }

  .sim {
    padding: 1.15rem;
  }

  .sim-envelope div {
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: .5rem;
  }

  .sim-envelope dd {
    font-size: .85rem;
    overflow-wrap: break-word;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

.activity-summary {
  cursor: pointer;
}

/* Visually hidden headers are absolutely positioned; without this they escape the scroller and widen the page */
.table-responsive {
  position: relative;
}

/* On a phone the domain list, senders table and other stacked tables become one card per row, labelled from data-label */
@media (max-width: 767.98px) {
  .table-responsive > .domain-table,
  .table-responsive > .sender-table,
  .table-responsive > .stacked-table {
    min-width: 0;
  }

  /* Rows as blocks need their table to be a block too, or each row shrinks to an anonymous cell */
  .domain-table,
  .sender-table,
  .stacked-table,
  .domain-table tbody,
  .sender-table tbody,
  .stacked-table tbody,
  .stacked-table tfoot {
    display: block;
  }

  .domain-table thead,
  .sender-table thead,
  .stacked-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .domain-table tr,
  .sender-table tr,
  .stacked-table tr {
    display: block;
    border-bottom: 1px solid var(--line);
    padding: .75rem 1rem;
  }

  .sender-table tr:has(+ .sender-detail-row) {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .domain-table td,
  .sender-table td,
  .stacked-table td,
  .stacked-table tbody th {
    display: block;
    border: 0;
    padding: .2rem 0;
    background: transparent;
  }

  /* Desktop gives each column a share of the width; a card has one column. The senders list's own shares are more
     specific, so they're undone here too, or a sender's name and its explanation keep a third of the card */
  .summary-source-table.sender-table tbody td,
  .summary-source-table.sender-groups tbody td:nth-child(n) {
    width: auto;
  }

  .domain-table td[data-label],
  .sender-table td[data-label],
  .stacked-table td[data-label] {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    align-items: baseline;
    gap: .75rem;
  }

  .sender-table .policy-pill {
    white-space: nowrap;
  }

  /* A card has one column, so numbers sit with their label */
  .table td.num {
    text-align: left;
  }

  /* Everything in a labelled cell sits in the value column, at its natural width */
  .domain-table td[data-label] > *,
  .sender-table td[data-label] > *,
  .stacked-table td[data-label] > * {
    grid-column: 2;
    justify-self: start;
  }

  .domain-table td[data-label]::before,
  .sender-table td[data-label]::before,
  .stacked-table td[data-label]::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: .8rem;
  }

  .sender-table .source-health,
  .sender-table .policy-pill-stack {
    min-width: 0;
  }

  .sender-table td[data-label] > .source-health {
    justify-self: stretch;
  }

  /* The status bar moves from the first cell to the whole card */
  .summary-source-table.sender-table tbody tr[class] > td:first-child {
    border-left: 0;
  }

  .sender-table tbody tr { border-left: 4px solid transparent; }
  .sender-table tbody tr.is-good { border-left-color: var(--pass); }
  .sender-table tbody tr.is-watch { border-left-color: var(--watch); }
  .sender-table tbody tr.is-risk { border-left-color: var(--coral); }
  .sender-table tbody tr.is-neutral { border-left-color: var(--line-strong); }

  .domain-table .row-actions-cell {
    padding-top: .5rem;
  }

  /* Right-aligned numbers read better next to their label */
  .stacked-table td.text-end {
    text-align: left !important;
  }

  .domain-table .row-actions {
    justify-content: flex-start;
  }

  /* The row's status bar runs down the whole card */
  .table.domain-table tr > :first-child { box-shadow: none; }
  .table.domain-table tr.table-success { box-shadow: inset 3px 0 0 var(--pass); }
  .table.domain-table tr.table-danger { box-shadow: inset 3px 0 0 var(--coral); }
  .table.domain-table tr.table-warning { box-shadow: inset 3px 0 0 var(--watch); }

  .source-identity-cell {
    min-width: 0;
  }
}

/* DKIM keys under a sender: one line per selector its mail is signed with */
.sender-dkim {
  list-style: none;
  margin: .35rem 0 0;
  padding: 0;
  font-size: .8rem;
  color: var(--ink-3);
}

.sender-dkim li {
  display: flex;
  align-items: baseline;
  gap: .3rem;
}

.sender-dkim li.is-good i { color: var(--pass); }
.sender-dkim li.is-watch i { color: var(--watch); }
.sender-dkim li.is-risk { color: var(--coral-ink); }

.sender-explanation .sender-dkim-ready {
  margin-top: .35rem;
  color: var(--pass-ink);
}

/* SPF lookups against the limit of 10 */
.spf-lookups {
  display: grid;
  gap: .4rem;
  margin-top: .9rem;
  max-width: 520px;
}

.spf-lookups-label {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .25rem 1rem;
  font-size: .9rem;
}

.spf-meter.is-near span { background: var(--watch); }
.spf-meter.is-over span { background: var(--coral); }

.settings-error-list span.is-warning {
  border-color: var(--watch-line);
  background: var(--watch-tint);
  color: var(--watch-ink);
}

.spf-includes {
  display: grid;
  gap: .35rem;
  margin: .9rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .9rem;
}

.spf-includes li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .6rem;
}

.spf-includes code {
  overflow-wrap: anywhere;
}

/* A corrected SPF record, with what changed and why */
.spf-fix {
  margin-top: 1rem;
  border: 1px solid var(--pass-line);
  border-radius: var(--radius);
  background: var(--pass-tint);
  padding: .9rem 1rem;
}

.spf-fix h3 {
  margin: 0 0 .35rem;
  color: var(--pass-ink);
  font-size: 1rem;
  font-weight: 600;
}

.spf-fix .published-record-line code {
  background: var(--surface);
  overflow-wrap: anywhere;
}

.spf-fix-changes {
  margin: .75rem 0 0;
  padding-left: 1.1rem;
  font-size: .9rem;
}

.spf-fix-changes li + li {
  margin-top: .25rem;
}

.spf-fix-note {
  margin: .6rem 0 0;
  color: var(--muted);
  font-size: .85rem;
}

.spf-fix-note.is-over {
  color: var(--coral-ink);
  font-weight: 600;
}

/* Organizations overview: each organization with where its domains stand */
.org-card {
  margin-top: 1rem;
}

.org-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem 1rem;
  border-bottom: 1px solid var(--line);
  padding: .9rem 1rem;
}

.org-card-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .5rem;
  min-width: 0;
}

.org-card-title {
  margin: 0;
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.org-card-meta {
  flex-basis: 100%;
  color: var(--muted);
  font-size: .85rem;
}

.org-card-empty {
  color: var(--muted);
  font-size: .9rem;
  padding: .9rem 1rem;
}

.org-domain-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.org-domain-list li {
  display: grid;
  grid-template-columns: minmax(10rem, 16rem) 1fr;
  align-items: center;
  gap: .4rem 1rem;
  border-top: 1px solid var(--line);
  padding: .6rem 1rem;
}

.org-domain-list li:first-child {
  border-top: 0;
}

.org-domain-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.org-domain-link {
  border: 0;
  background: none;
  padding: 0;
  color: var(--ink);
  font-weight: 600;
  text-align: left;
  text-decoration: none;
}

.org-domain-link:hover,
.org-domain-link:focus-visible {
  text-decoration: underline;
}

.org-domain-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .6rem;
}

@media (max-width: 575.98px) {
  .org-domain-list li {
    grid-template-columns: 1fr;
  }
}

.new-org-card {
  max-width: 560px;
}

/* Free domain check */
.check-hero {
  padding: 3rem 0 2rem;
}

.check-title {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 750;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-wrap: balance;
}

.check-lede {
  max-width: 56ch;
  margin: 1rem 0 0;
  color: var(--ink-3);
  font-size: 1.1rem;
  line-height: 1.55;
}

.check-form {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  max-width: 640px;
  margin-top: 1.75rem;
}

.check-form .form-control {
  flex: 1 1 260px;
  font-family: var(--font-mono);
}

.check-error {
  margin: .75rem 0 0;
  color: var(--coral-ink);
  font-weight: 500;
}

.check-results {
  padding: 0 0 4rem;
}

.check-verdict {
  display: grid;
  gap: 1.5rem;
  border: 1px solid var(--line);
  border-left: 5px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  padding: 1.5rem;
}

.check-verdict.is-good { border-left-color: var(--pass); }
.check-verdict.is-watch { border-left-color: var(--watch); }
.check-verdict.is-risk { border-left-color: var(--coral); }

@media (min-width: 900px) {
  .check-verdict {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
  }
}

.check-verdict-title {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.check-verdict-text {
  max-width: 62ch;
  margin: .75rem 0 0;
  color: var(--ink-2);
  font-size: 1.05rem;
  line-height: 1.55;
}

.check-monitor {
  border-radius: var(--radius);
  background: var(--signal-tint);
  padding: 1.1rem;
}

.check-monitor h3 {
  margin: 0 0 .4rem;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 650;
}

.check-monitor p {
  color: var(--ink-2);
  font-size: .925rem;
}

.check-section-title {
  margin: 0 0 .75rem;
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 650;
}

.check-steps {
  margin-top: 2rem;
}

.check-steps ol {
  max-width: 80ch;
  margin: 0;
  padding-left: 1.25rem;
  color: var(--ink-2);
}

.check-steps li + li {
  margin-top: .5rem;
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.check-card {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 1.1rem 1.2rem;
}

.check-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.check-card h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 650;
}

.check-card-what {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
}

.check-card-note {
  margin: 0;
  color: var(--muted);
  font-size: .85rem;
}

/* Cards are narrow, so the record takes the full width with its copy button under it */
.check-card .published-record-line {
  flex-direction: column;
  align-items: flex-start;
  margin-top: 0;
}

.check-card .published-record-line code {
  align-self: stretch;
  overflow-wrap: anywhere;
}

.check-dkim-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: .925rem;
}

.check-footnote {
  max-width: 80ch;
  margin: 1.5rem 0 0;
  color: var(--muted);
  font-size: .875rem;
}

.check-explainer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1.5rem;
  border-top: 1px solid var(--line);
  padding-top: 2rem;
}

.check-explainer h2 {
  margin: 0 0 .35rem;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 650;
}

.check-explainer p {
  margin: 0;
  color: var(--ink-3);
}

/* Inside the app, the page sits in the main column instead of the marketing page */
.app-main .check-hero,
.app-main .check-results {
  padding-left: 0;
  padding-right: 0;
}

.app-main .check-hero {
  padding-top: 0;
}

/* Free tools menu in the public header */
.marketing-header .dropdown-toggle {
  border: 0;
  background: none;
}

.tools-menu {
  min-width: 290px;
  padding: .4rem;
}

.tools-menu .dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  border-radius: var(--radius);
  padding: .55rem .65rem;
  white-space: normal;
}

.tools-menu .dropdown-item > .bi {
  margin-top: .1rem;
  color: var(--signal);
  font-size: 1.05rem;
}

.tools-menu .dropdown-item span {
  display: grid;
  color: var(--muted);
  font-size: .825rem;
}

.tools-menu .dropdown-item strong {
  color: var(--ink);
  font-size: .925rem;
  font-weight: 600;
}

/* "Email me if this changes", under the check's monitor button */
.watch-form {
  scroll-margin-top: 80px;
  margin-top: 1.1rem;
  border-top: 1px solid var(--signal-line);
  padding-top: 1rem;
}

.watch-title {
  margin: 0 0 .25rem;
  color: var(--ink);
  font-size: .95rem;
  font-weight: 650;
}

.watch-text {
  margin: 0 0 .6rem;
  color: var(--ink-2);
  font-size: .875rem;
}

.watch-row {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.watch-row .form-control {
  flex: 1 1 160px;
  min-width: 0;
}

.watch-done {
  display: flex;
  gap: .5rem;
  margin: 0;
  color: var(--pass-ink);
  font-size: .9rem;
  font-weight: 500;
}

/* Beside the verdict, under its explanation, rather than under the monitor button */
.check-verdict-copy .watch-form {
  max-width: 460px;
  margin-top: 1.5rem;
  border-top-color: var(--line);
  padding-top: 1.25rem;
}

.watch-error {
  margin: .5rem 0 0;
  color: var(--coral-ink);
  font-size: .875rem;
  font-weight: 500;
}

/* Gmail, Yahoo and Outlook sender rules */
.req-panel {
  margin-top: 2rem;
}

.req-intro {
  max-width: 80ch;
  margin: 0 0 1rem;
  color: var(--ink-3);
}

.req-layout {
  display: grid;
  gap: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  padding: 1.5rem;
}

@media (min-width: 900px) {
  .req-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
  }
}

.req-layout .req-panel {
  margin-top: 0;
}

.req-layout .check-verdict-text {
  margin-bottom: 1.25rem;
}

.req-list {
  display: grid;
  gap: .5rem;
  max-width: 860px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.req-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: .75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: .8rem 1rem;
}

.req-list li > .bi {
  margin-top: .1rem;
  font-size: 1.1rem;
}

.req-list li.is-good > .bi { color: var(--pass); }
.req-list li.is-risk > .bi { color: var(--coral); }
.req-list li.is-watch > .bi { color: var(--watch); }
.req-list li.is-neutral > .bi { color: var(--signal); }

.req-item strong {
  color: var(--ink);
  font-weight: 650;
}

.req-rule {
  display: block;
  color: var(--muted);
  font-size: .825rem;
}

.req-item p {
  margin: .3rem 0 0;
  color: var(--ink-2);
  font-size: .925rem;
}

@media (max-width: 575.98px) {
  .req-list li {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .req-list li > .status-chip {
    grid-column: 2;
    justify-self: start;
  }
}

.req-more {
  display: inline-block;
  margin-top: .75rem;
  font-size: .925rem;
}

.req-also {
  margin-top: 2rem;
}

.req-also ul {
  max-width: 80ch;
  margin: 0;
  padding-left: 1.25rem;
  color: var(--ink-2);
}

.req-also li + li {
  margin-top: .4rem;
}

/* Free DMARC report viewer */
.rv-form {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: .6rem;
  max-width: 760px;
  margin-top: 1.75rem;
}

.rv-drop {
  position: relative;
  display: grid;
  flex: 1 1 320px;
  justify-items: start;
  gap: .15rem;
  border: 1.5px dashed var(--signal-line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  cursor: pointer;
  padding: .9rem 1.1rem;
}

.rv-drop:hover,
.rv-drop:focus-within {
  border-color: var(--signal);
  background: var(--signal-tint);
}

.rv-drop > .bi {
  color: var(--signal);
  font-size: 1.35rem;
}

.rv-drop-title {
  color: var(--ink);
  font-weight: 600;
}

.rv-drop-note,
.rv-drop-chosen {
  color: var(--muted);
  font-size: .875rem;
}

.rv-drop-chosen {
  color: var(--signal-deep);
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
}

/* The whole area takes the drop; the input itself stays usable by keyboard and screen readers */
.rv-drop input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}

.rv-privacy {
  margin: .75rem 0 0;
  color: var(--muted);
  font-size: .9rem;
}

.rv-problems {
  margin: 0 0 1.5rem;
}

.rv-domain + .rv-domain {
  margin-top: 3rem;
}

.rv-kicker {
  margin: 0 0 .5rem;
  color: var(--muted);
  font-size: .9rem;
}

.rv-stats {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2rem;
  margin: 1.25rem 0 0;
}

.rv-stats dt {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 500;
}

.rv-stats dd {
  margin: .1rem 0 0;
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.rv-stats dd small {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 500;
}

.rv-stats code {
  font-size: .95rem;
}

.rv-check-link {
  display: inline-block;
  margin-top: .75rem;
  font-size: .9rem;
}

.rv-table {
  margin-top: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.rv-reports {
  margin-top: 1rem;
}

.rv-reports summary {
  color: var(--signal);
  cursor: pointer;
  font-weight: 500;
}

.rv-reports table {
  margin: .75rem 0 0;
  font-size: .9rem;
}

/* Domain list filter */
.domain-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1rem;
  border-bottom: 1px solid var(--line);
  padding: .75rem 1rem;
}

.domain-filter input[type="search"] {
  flex: 0 1 260px;
}

.domain-filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.domain-filter-options .btn-check:checked + .btn {
  border-color: var(--signal);
  background: var(--signal-tint);
  color: var(--signal-deep);
}

.domain-filter-count {
  margin-left: .2rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.bulk-add summary {
  color: var(--signal);
  cursor: pointer;
  font-weight: 500;
}

/* Your emails */
.emails-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: .75rem 1.5rem;
  margin: 0 0 1.25rem;
  color: var(--ink-3);
  font-size: .9rem;
}

.emails-legend dt {
  color: var(--ink);
  font-weight: 600;
}

.emails-legend dd {
  margin: .15rem 0 0;
}

.emails-org-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
}

.emails-table .emails-digest {
  min-width: 170px;
  max-width: 220px;
}

/* Organization settings */
.org-settings-form .form-control {
  flex: 1 1 260px;
  max-width: 420px;
}

.org-danger-card {
  border-color: var(--coral-line);
}

.org-danger-card > .card-header {
  color: var(--coral-ink);
  background: var(--coral-tint);
  border-bottom-color: var(--coral-line);
}

/* Monthly report: a document to read on screen and print to PDF */
.report-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.report-month {
  display: flex;
  gap: .4rem;
  margin: 0;
}

.report-month .form-select {
  width: auto;
}

.report-doc {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1.5rem 1.75rem;
}

.report-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 1rem;
}

.report-kicker {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.report-title {
  margin: .2rem 0 0;
  color: var(--ink);
  font-size: 1.6rem;
  font-weight: 700;
}

.report-period {
  color: var(--ink);
  font-size: 1.05rem;
}

.report-brand {
  color: var(--muted);
  font-size: .85rem;
  text-align: right;
}

.report-metrics {
  margin-top: 1.25rem;
}

.report-section {
  margin-top: 1.5rem;
}

.report-section h3 {
  margin: 0 0 .6rem;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 700;
}

.report-highlights,
.report-steps {
  display: grid;
  gap: .35rem;
  margin: 0;
  padding-left: 1.2rem;
}

.report-table {
  margin: 0;
}

.report-table .report-domain {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}

/* Who the monthly report is emailed to */
.report-email {
  margin-top: 1.25rem;
}

/* On a wide screen the email panel sits beside the report instead of under it */
@media (min-width: 1500px) {
  .report-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    align-items: start;
    gap: 1.25rem;
  }

  .report-layout > .report-email {
    position: sticky;
    top: 1rem;
    margin-top: 0;
  }
}

.report-recipients {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.report-recipients li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  border-top: 1px solid var(--line-2);
  padding: .6rem 0;
}

.report-recipients form {
  margin: 0;
}

.report-recipient-who {
  display: flex;
  flex: 1 1 16rem;
  flex-direction: column;
  min-width: 0;
}

.report-recipient-email {
  color: var(--ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.report-recipient-add {
  margin-top: 1rem;
}

.report-recipient-row {
  display: flex;
  gap: .5rem;
  max-width: 32rem;
}

/* The page's controls line up with the document and its email panel rather than the full width */
.app-main > .report-shell {
  max-width: 1100px;
}

@media (min-width: 1500px) {
  .app-main > .report-shell {
    max-width: 1520px;
  }
}

.report-foot {
  margin-top: 1.75rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .85rem;
  padding-top: .9rem;
}

@media print {
  @page {
    margin: 14mm;
  }

  .app-sidebar,
  .app-topbar,
  .site-footer,
  .no-print {
    display: none !important;
  }

  .app-shell {
    display: block !important;
  }

  .app-main {
    padding: 0 !important;
  }

  body,
  .app-body {
    background: #fff !important;
  }

  .report-doc {
    max-width: none;
    border: 0;
    padding: 0;
  }

  .report-layout {
    display: block;
  }

  .report-doc,
  .report-doc .status-chip,
  .report-doc .metric-label::before {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .report-section,
  .report-table tr {
    break-inside: avoid;
  }

  .report-doc .table-responsive {
    overflow: visible;
  }
}

/* MTA-STS, TLS reporting and BIMI on the settings page */
.mail-security-grid {
  display: grid;
  gap: .9rem;
  margin-top: 1rem;
}

.mail-security-item {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .9rem 1rem;
}

.mail-security-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.mail-security-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
}

.mail-security-summary {
  margin: .4rem 0 0;
  color: var(--muted);
  font-size: .9rem;
}

.mail-security-item .published-record-line code {
  overflow-wrap: anywhere;
}

.mail-security-steps {
  display: grid;
  gap: .6rem;
  margin: .8rem 0 0;
  padding-left: 1.2rem;
  font-size: .9rem;
}

.mail-security-copy {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-top: .5rem;
}

.mail-security-pre {
  flex: 1 1 auto;
  min-width: 0;
  margin: .5rem 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: .65rem .75rem;
  font-size: .85rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mail-security-copy .mail-security-pre {
  margin-top: 0;
}

.mail-security-more {
  margin-top: .75rem;
  font-size: .9rem;
}

.mail-security-more summary {
  cursor: pointer;
}

/* What TLS reports say about connections to the domain's mail servers */
.tls-report-summary {
  margin-top: .75rem;
  font-size: .9rem;
}

.tls-failure-table {
  margin-bottom: .25rem;
  font-size: .85rem;
}

/* A plain name beside a standard's acronym, and a line on what it's for */
.mail-security-aka {
  margin-left: .35rem;
  color: var(--muted);
  font-size: .85rem;
  font-weight: 400;
}

.mail-security-lede {
  margin: .4rem 0 0;
  color: var(--ink-2);
  font-size: .9rem;
}

/* MTA-STS: what it is, where the domain is on the way to enforce, and what's next */
.mta-sts-explainer {
  margin-top: .5rem;
  font-size: .88rem;
}

.mta-sts-explainer summary {
  color: var(--signal);
  cursor: pointer;
}

.mta-sts-explainer summary i {
  margin-right: .25rem;
}

.mta-sts-explainer-body {
  margin-top: .5rem;
  border-left: 3px solid var(--signal-line);
  padding: .1rem 0 .1rem .85rem;
  color: var(--ink-2);
}

.mta-sts-explainer-body p {
  margin-bottom: .5rem;
}

.mta-sts-glossary {
  display: grid;
  gap: .4rem;
  margin: 0;
}

.mta-sts-glossary div {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: .75rem;
}

.mta-sts-glossary dt {
  color: var(--ink);
  font-weight: 600;
}

.mta-sts-glossary dd {
  margin: 0;
}

.mta-sts-stages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
  margin: .9rem 0 0;
  padding: 0;
  list-style: none;
}

.mta-sts-stages li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  border-top: 3px solid var(--line);
  padding-top: .55rem;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.3;
}

.mta-sts-stages li.is-done {
  border-top-color: var(--pass);
}

.mta-sts-stages li.is-current:not(.is-done) {
  border-top-color: var(--watch);
}

.mta-sts-stage-dot {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
}

.mta-sts-stages li.is-done .mta-sts-stage-dot {
  border-color: var(--pass);
  background: var(--pass);
  color: #fff;
}

.mta-sts-stages li.is-current:not(.is-done) .mta-sts-stage-dot {
  border-color: var(--watch);
  background: var(--watch-tint);
  color: var(--watch-ink);
}

.mta-sts-stage-text strong {
  display: block;
  color: var(--ink);
  font-size: .88rem;
  font-weight: 600;
}

.mta-sts-stages li:not(.is-done):not(.is-current) .mta-sts-stage-text strong {
  color: var(--muted);
}

@media (max-width: 575.98px) {
  .mta-sts-glossary div {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .mta-sts-stages {
    grid-template-columns: 1fr;
    gap: .35rem;
  }

  .mta-sts-stages li {
    border-top: 0;
    border-left: 3px solid var(--line);
    padding: .2rem 0 .2rem .6rem;
  }

  .mta-sts-stages li.is-done { border-left-color: var(--pass); }
  .mta-sts-stages li.is-current:not(.is-done) { border-left-color: var(--watch); }
}

.mta-sts-hosted-by {
  margin: .75rem 0 0;
  color: var(--ink-3);
  font-size: .88rem;
}

.mta-sts-hosted-by i {
  margin-right: .2rem;
  color: var(--signal);
}

.mta-sts-next {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  margin-top: .75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: .75rem .9rem;
  font-size: .9rem;
}

.mta-sts-next > i {
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--ink-3);
}

.mta-sts-next strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
}

.mta-sts-next p {
  margin: .15rem 0 0;
  color: var(--ink-2);
}

.mta-sts-next form,
.mta-sts-next a {
  display: inline-block;
  margin-top: .55rem;
}

.mta-sts-next.is-good { border-color: var(--pass-line); background: var(--pass-tint); }
.mta-sts-next.is-good > i { color: var(--pass); }
.mta-sts-next.is-risk { border-color: var(--coral-line); background: var(--coral-tint); }
.mta-sts-next.is-risk > i { color: var(--coral); }

.mta-sts-anyway {
  margin-top: .65rem;
  font-size: .88rem;
}

.mta-sts-anyway summary {
  color: var(--ink-3);
  cursor: pointer;
}

.mta-sts-anyway p {
  margin: .4rem 0 .5rem;
  color: var(--ink-2);
}

/* Not set up: the hosted option first, doing it yourself beside it */
.mta-sts-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: .75rem;
  margin-top: .9rem;
}

.mta-sts-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  font-size: .9rem;
}

.mta-sts-option.is-recommended {
  border-color: var(--signal-line);
  background: var(--signal-tint);
}

.mta-sts-option > p {
  color: var(--ink-2);
}

.mta-sts-option > p,
.mta-sts-option > .mta-sts-ticks {
  flex: 1 1 auto;
}

.mta-sts-option-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
}

.mta-sts-option-head h4,
.mta-sts-subhead {
  margin: 0;
  color: var(--ink);
  font-size: .95rem;
  font-weight: 600;
}

.mta-sts-subhead {
  margin: 1rem 0 .35rem;
}

.mta-sts-pill {
  border-radius: 999px;
  background: var(--signal);
  padding: .1rem .5rem;
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
}

.mta-sts-ticks {
  margin: 0 0 .75rem;
  padding: 0;
  list-style: none;
}

.mta-sts-ticks li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--ink-2);
}

.mta-sts-ticks li + li {
  margin-top: .25rem;
}

.mta-sts-ticks li::before {
  content: "\F26E";
  position: absolute;
  left: 0;
  color: var(--pass);
  font-family: "bootstrap-icons";
}

/* Setting up hosting: the three records, then how far it's got */
.mta-sts-cnames {
  margin-bottom: .4rem;
  font-size: .85rem;
}

.mta-sts-cnames code {
  overflow-wrap: anywhere;
}

/* On a phone each record is a block of labelled lines rather than a row too wide to see */
@media (max-width: 767.98px) {
  .mta-sts-cnames thead {
    display: none;
  }

  .table-responsive > .mta-sts-cnames,
  .mta-sts-cnames tbody,
  .mta-sts-cnames tr {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .mta-sts-cnames tr {
    border-bottom: 1px solid var(--line-2);
    padding: .5rem 0;
  }

  .mta-sts-cnames td {
    display: block;
    border: 0;
    padding: .2rem 0;
  }

  .mta-sts-cnames td[data-label]::before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font-size: .75rem;
  }
}

.mta-sts-progress {
  display: grid;
  gap: .25rem;
  margin: .75rem 0 .4rem;
  padding: 0;
  list-style: none;
  font-size: .9rem;
}

.mta-sts-progress i {
  margin-right: .3rem;
  color: var(--muted);
}

.mta-sts-progress li.is-good i {
  color: var(--pass);
}

.mta-sts-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .75rem;
}

/* Changing the mode back, or stopping hosting: kept out of the way below the rest */
.mta-sts-manage {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: .5rem 1.25rem;
  margin-top: .9rem;
  border-top: 1px solid var(--line-2);
  padding-top: .75rem;
}

.mta-sts-manage:empty {
  display: none;
}

.mta-sts-manage .mta-sts-anyway {
  margin-top: .25rem;
}

.mta-sts-offer {
  margin-top: .9rem;
  border-top: 1px solid var(--line-2);
  padding-top: .75rem;
  font-size: .9rem;
}

.mta-sts-offer p {
  margin-bottom: .5rem;
  color: var(--ink-2);
}

.mta-sts-technical {
  margin: .5rem 0 0;
}

.mta-sts-technical dt {
  margin-top: .5rem;
  color: var(--ink-3);
  font-weight: 500;
}

.mta-sts-technical dd {
  margin: .2rem 0 0;
}

.mta-sts-technical code {
  overflow-wrap: anywhere;
}

.mta-sts-technical-list {
  margin: 0;
  padding-left: 1.1rem;
}

/* What "check now" found, at the top of its card */
.mail-security-checked {
  display: flex;
  gap: .45rem;
  align-items: baseline;
  margin: .6rem 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .5rem .65rem;
  font-size: .9rem;
}

.mail-security-checked.is-good { border-color: var(--pass-line); background: var(--pass-tint); color: var(--pass-ink); }
.mail-security-checked.is-watch { border-color: var(--watch-line); background: var(--watch-tint); color: var(--watch-ink); }
.mail-security-checked.is-risk { border-color: var(--coral-line); background: var(--coral-tint); color: var(--coral-ink); }

.bimi-logo {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: .6rem;
}

.bimi-logo img {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  object-fit: contain;
}

/* Public pricing: the same plan cards customers see when changing plan */
.pricing-intro {
  max-width: 680px;
  margin-bottom: 2rem;
}

.pricing-next {
  max-width: 680px;
  margin-top: 2rem;
  color: var(--ink-2);
}

/* What every plan does, under the cards that say how plans differ */
.pricing-includes {
  max-width: 680px;
  margin-top: 2rem;
}

/* Column help: a real button so keyboards, screen readers and taps reach the explanation */
.help-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: -.25rem 0 -.25rem .1rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: .85rem;
  vertical-align: middle;
  cursor: help;
}

.help-tip:hover,
.help-tip:focus-visible {
  color: var(--signal);
  background: var(--signal-tint);
}

.readiness-evidence-inline {
  margin-top: .3rem;
  max-width: 34ch;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.35;
}

/* Signal blue is too dark to see against the navy sidebar */
.app-sidebar :focus-visible {
  outline-color: var(--signal-on-dark);
}

/* Onboarding: invites waiting for this address come before creating a workspace */
.onboarding-invites {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.onboarding-invites li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  border: 1px solid var(--signal-line);
  border-radius: var(--radius);
  background: var(--signal-tint);
  padding: .85rem 1rem;
}

.onboarding-invites li + li {
  margin-top: .5rem;
}

.onboarding-or {
  margin: 1.25rem 0 1rem;
  color: var(--muted);
  font-size: .86rem;
  text-align: center;
}

/* Sign-up: the password rules tick themselves off as they're met */
.password-rules {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: .2rem .75rem;
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
  color: var(--muted);
  font-size: .82rem;
}

.password-rules .bi {
  margin-right: .35rem;
}

.password-rules li.is-met {
  color: var(--pass-ink);
}

/* Off screen rather than display:none, which some bots know to skip */
.signup-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Raw report counts: plain numbers, with zeros stepped back so the non-zero ones stand out */
.report-count {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.report-count.is-zero {
  color: var(--muted);
}

.report-share {
  margin-left: .25rem;
  color: var(--muted);
  font-size: .8rem;
}

/* Gmail Postmaster Tools on a domain's summary and settings: the spam rate, a bar a day against Gmail's limits, and its
   sender requirement verdicts */
.gmail-steps {
  margin: .75rem 0;
  padding-left: 1.25rem;
  color: var(--ink-2);
}

.gmail-steps li + li {
  margin-top: .35rem;
}

.gmail-headline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .75rem;
  margin: .5rem 0 .25rem;
  color: var(--ink-3);
}

.gmail-rate {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.gmail-chart {
  margin: .5rem 0 .25rem;
}

.gmail-chart svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 180px;
}

.gmail-bar.is-good { fill: var(--pass); }
.gmail-bar.is-watch { fill: var(--watch); }
.gmail-bar.is-risk { fill: var(--coral); }

.gmail-limit {
  stroke: var(--line-strong);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.gmail-baseline {
  stroke: var(--line);
  stroke-width: 1;
}

.gmail-axis {
  fill: var(--muted);
  font-size: 11px;
  font-family: var(--font-sans);
}

.gmail-subhead {
  margin: 1rem 0 .25rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}

.gmail-requirements {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
}

.gmail-requirements li {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .3rem 0;
  border-top: 1px solid var(--line-2);
  color: var(--ink-2);
}

.gmail-requirements li:first-child {
  border-top: 0;
}

.gmail-requirements .status-chip {
  flex: none;
  min-width: 6.5rem;
  justify-content: center;
}

/* Help and support: questions by topic, with how to reach us alongside */
.support-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 1.25rem;
  align-items: start;
}

.support-topics {
  display: grid;
  gap: 1.25rem;
}

.support-contact {
  display: grid;
  gap: 1rem;
  position: sticky;
  top: 1.25rem;
}

.support-topic .lp-faq {
  border-top: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.support-topic .lp-faq details:last-child {
  border-bottom: 0;
}

.support-topic .lp-faq summary h3 {
  font-size: 1rem;
}

.support-topic .lp-faq details p {
  font-size: .95rem;
}

/* Narrow screens put how to reach us first, rather than after every question */
@media (max-width: 991.98px) {
  .support-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .support-contact {
    position: static;
    order: -1;
  }
}