/* CitedLink design system. Product register: one family, fixed rem scale, restrained color.
   The rose primary (hue 357) is for actions and focus; verdict colors carry the data. */

:root {
  color-scheme: light;

  /* Theme (owner's artboard, 2026-09-02): off-white ground, near-black ink, one blue accent,
     white surfaces that lift off the ground, Space Grotesk with IBM Plex Mono for data. */
  --bg: #f7f7f4;
  --surface: #ffffff;
  --surface-2: rgba(22, 23, 27, 0.04);
  --ink: #16171b;
  --ink-2: #3c3f46;
  --muted: #676b75;
  --muted-2: #8b8f98;
  --border: rgba(22, 23, 27, 0.1);
  --border-strong: rgba(22, 23, 27, 0.18);

  --primary: #2456d6;
  --primary-hover: #1a3fa0;
  --primary-soft: rgba(36, 86, 214, 0.1);
  --on-primary: #ffffff;
  --focus: rgba(36, 86, 214, 0.45);

  /* Verdicts: counted (blue), weak (amber), vanity (neutral), dead (red). */
  --counted: #1f4fc4;
  --counted-bg: rgba(36, 86, 214, 0.1);
  --weak: #9c6200;
  --weak-bg: rgba(156, 98, 0, 0.1);
  --vanity: #676b75;
  --vanity-bg: rgba(22, 23, 27, 0.06);
  --dead: #b3261e;
  --dead-bg: rgba(179, 38, 30, 0.08);
  --unchecked: #676b75;
  --unchecked-bg: rgba(22, 23, 27, 0.04);

  /* Dark blocks (nav "Start free", the closing band): ink, with the ground as text. */
  --brand-deep: #16171b;
  --brand-deep-2: #2d2f36;
  --brand-deep-ink: #f7f7f4;
  --brand-deep-muted: #b4b7bf;
  --glow: rgba(36, 86, 214, 0.1);

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

  --radius-s: 6px;
  --radius: 8px;
  --radius-l: 14px;
  --shadow-1: 0 1px 2px rgba(22, 23, 27, 0.06), 0 1px 1px rgba(22, 23, 27, 0.04);
  --shadow-2: 0 10px 30px rgba(22, 23, 27, 0.07);
  --shadow-3: 0 24px 60px rgba(22, 23, 27, 0.08);

  --z-dropdown: 10;
  --z-sticky: 20;
  --z-modal-backdrop: 30;
  --z-modal: 40;
  --z-toast: 50;
  --z-tooltip: 60;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 150ms;
  --t-base: 220ms;

  --measure: 68ch;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--ink);
}

h1 {
  font-size: 1.75rem;
}
h2 {
  font-size: 1.375rem;
}
h3 {
  font-size: 1.125rem;
}
h4 {
  font-size: 1rem;
}

p {
  margin: 0;
}

.prose p + p {
  margin-top: 0.75em;
}
.prose {
  max-width: var(--measure);
  text-wrap: pretty;
}
.prose ul,
.prose ol {
  padding-left: 1.25em;
  margin: 0.5em 0;
}

a {
  color: var(--primary);
  text-decoration: none;
  text-underline-offset: 0.15em;
  transition: color var(--t-fast) var(--ease-out);
}
a:hover {
  text-decoration: underline;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

code,
.mono {
  font-family: var(--mono);
  font-size: 0.875em;
}

small,
.small {
  font-size: 0.8125rem;
}
.muted {
  color: var(--muted);
}
.ink-2 {
  color: var(--ink-2);
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.num {
  font-variant-numeric: tabular-nums;
}
.nowrap {
  white-space: nowrap;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Keyboard users jump past the chrome. Visible only while focused. */
.skip {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: var(--z-toast);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--bg);
  transform: translateY(-200%);
  transition: transform var(--t-fast) var(--ease-out);
}
.skip:focus {
  transform: none;
  text-decoration: none;
}

/* Layout primitives */
.stack > * + * {
  margin-top: var(--gap, 1rem);
}
.stack-s {
  --gap: 0.5rem;
}
.stack-l {
  --gap: 2rem;
}
.row {
  display: flex;
  align-items: center;
  gap: var(--gap, 0.75rem);
  flex-wrap: wrap;
}
.row-between {
  justify-content: space-between;
}
.row-end {
  justify-content: flex-end;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1.5rem;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 1.5rem;
}
/* Grid and flex children default to min-width:auto, which lets a table or a long URL push the
   column past the viewport. Every layout child starts at zero and scrolls inside itself instead. */
.grid-2 > *,
.grid-3 > *,
.row > * {
  min-width: 0;
}
.container {
  width: min(100% - 2.5rem, 72rem);
  margin-inline: auto;
}
.container-narrow {
  width: min(100% - 2.5rem, 44rem);
  margin-inline: auto;
}
.divider {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0;
}

/* App chrome */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  height: 3.25rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.brand:hover {
  text-decoration: none;
}
.brand-mark {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 4px;
  background: var(--primary);
  position: relative;
  flex: none;
}
.brand-mark::after {
  content: '';
  position: absolute;
  inset: 0.3rem 0.35rem 0.3rem 0.35rem;
  border: 2px solid var(--on-primary);
  border-radius: 999px;
  border-right-color: transparent;
  transform: rotate(-45deg);
}
.nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.5rem;
}
.nav a {
  color: var(--ink-2);
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius);
  font-weight: 500;
}
.nav a:hover {
  background: var(--surface);
  text-decoration: none;
  color: var(--ink);
}
.nav a[aria-current='page'] {
  color: var(--ink);
  background: var(--surface-2);
}
.topbar-user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--muted);
  font-size: 0.8125rem;
}
.topbar-user form {
  display: flex;
  align-items: center;
}
.avatar {
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 999px;
  background: var(--surface-2);
  object-fit: cover;
}

.subnav {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.subnav-inner {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
  /* The bar fades at both ends when there is more to scroll (see client.js). */
  --fade-left: 0px;
  --fade-right: 0px;
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--fade-left),
    #000 calc(100% - var(--fade-right)),
    transparent 100%
  );
}
.subnav a {
  color: var(--muted);
  padding: 0.7rem 0.6rem 0.6rem;
  border-bottom: 2px solid transparent;
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.subnav a:hover {
  color: var(--ink);
  text-decoration: none;
}
.subnav a[aria-current='page'] {
  color: var(--ink);
  border-bottom-color: var(--primary);
}

.main {
  padding: 2rem 0 4rem;
}
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.page-head p {
  color: var(--muted);
  margin-top: 0.25rem;
  max-width: var(--measure);
}
.crumbs {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.crumbs a {
  color: var(--muted);
  display: inline-block;
  padding: 0.3rem 0.1rem;
  min-height: 1.5rem;
}
.crumbs span {
  margin: 0 0.4em;
}

.section {
  margin-top: 2.5rem;
}
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.section-head p {
  color: var(--muted);
  font-size: 0.875rem;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 2.25rem;
  padding: 0 0.9rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.btn:hover {
  background: var(--surface);
  text-decoration: none;
}
.btn:active {
  transform: translateY(1px);
}
.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
.btn-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}
/* The ink button: the theme's nav call to action. */
.btn-ink {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
  font-weight: 700;
}
.btn-ink:hover {
  background: var(--brand-deep-2);
  border-color: var(--brand-deep-2);
  color: var(--bg);
}
.btn-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--ink-2);
}
.btn-ghost:hover {
  background: var(--surface);
  color: var(--ink);
}
.btn-danger {
  color: var(--dead);
  border-color: var(--border-strong);
}
.btn-danger:hover {
  background: var(--dead-bg);
  border-color: var(--dead);
}
.btn-sm {
  height: 1.875rem;
  padding: 0 0.65rem;
  font-size: 0.8125rem;
}
.btn-lg {
  height: 2.75rem;
  padding: 0 1.25rem;
  font-size: 1rem;
}
.btn.is-loading {
  color: transparent;
  position: relative;
  pointer-events: none;
}
.btn.is-loading::after {
  content: '';
  position: absolute;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 999px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  color: var(--ink);
  animation: spin 700ms linear infinite;
}
.btn-primary.is-loading::after {
  color: var(--on-primary);
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Forms */
.field {
  display: block;
}
.field + .field {
  margin-top: 1rem;
}
.field > .label,
label.field > span:first-child {
  display: block;
  font-weight: 500;
  margin-bottom: 0.3rem;
}
.input,
.select,
.textarea {
  width: 100%;
  height: 2.25rem;
  padding: 0 0.65rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.textarea {
  height: auto;
  min-height: 6rem;
  padding: 0.5rem 0.65rem;
  line-height: 1.45;
  resize: vertical;
}
.input::placeholder,
.textarea::placeholder {
  color: var(--muted);
}
.input:hover,
.select:hover,
.textarea:hover {
  border-color: rgba(22, 23, 27, 0.32);
}
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--focus);
}
.input[aria-invalid='true'],
.textarea[aria-invalid='true'] {
  border-color: var(--dead);
}
.input[disabled],
.select[disabled] {
  background: var(--surface);
  color: var(--muted);
}
.hint {
  display: block;
  color: var(--muted);
  font-size: 0.8125rem;
  margin-top: 0.3rem;
}
.error-text {
  display: block;
  color: var(--dead);
  font-size: 0.8125rem;
  margin-top: 0.3rem;
}
.check {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.check input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--primary);
  margin: 0;
}
.switch {
  position: relative;
  width: 2.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: var(--border-strong);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background var(--t-base) var(--ease-out);
  flex: none;
}
.switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: var(--bg);
  box-shadow: var(--shadow-1);
  transition: transform var(--t-base) var(--ease-out);
}
.switch[aria-checked='true'] {
  background: var(--primary);
}
.switch[aria-checked='true']::after {
  transform: translateX(1rem);
}
.switch[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
/* A 44px hit area around the 36x20 visual. */
.switch::before {
  content: '';
  position: absolute;
  inset: -12px -6px;
}

/* Badges and verdicts */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 1.375rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--ink-2);
}
.badge::before {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: currentColor;
}
.badge-counted {
  background: var(--counted-bg);
  color: var(--counted);
}
.badge-weak {
  background: var(--weak-bg);
  color: var(--weak);
}
.badge-vanity {
  background: var(--vanity-bg);
  color: var(--vanity);
}
.badge-dead {
  background: var(--dead-bg);
  color: var(--dead);
}
.badge-unchecked,
.badge-unverifiable {
  background: var(--unchecked-bg);
  color: var(--unchecked);
}
.badge-plain::before {
  display: none;
}

.delta {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.delta-up {
  color: var(--counted);
}
.delta-down {
  color: var(--dead);
}
.delta-flat {
  color: var(--muted);
}

/* Tables */
.table-wrap {
  overflow-x: auto;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--bg);
  -webkit-overflow-scrolling: touch;
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.table th,
.table td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.table th {
  font-weight: 600;
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  background: var(--surface);
  white-space: nowrap;
}
.table tbody tr:last-child td {
  border-bottom: 0;
}
.table tbody tr:hover td {
  background: rgba(36, 86, 214, 0.04);
}
.table td.num,
.table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.table .cell-url {
  max-width: 28rem;
}

/* Stacked rows on phones. Give the table `table-stack`, put the row's title cell first with
   `stack-title`, and label the other cells with data-label. Cells without a label render bare. */
@media (max-width: 720px) {
  .table-stack thead {
    display: none;
  }
  .table-stack,
  .table-stack tbody,
  .table-stack tr,
  .table-stack td {
    display: block;
  }
  .table-stack tr {
    padding: 0.8rem 0.9rem;
    border-bottom: 1px solid var(--border);
  }
  .table-stack tbody tr:last-child {
    border-bottom: 0;
  }
  .table-stack td {
    padding: 0.15rem 0;
    border: 0;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    max-width: none;
  }
  .table-stack td.num {
    text-align: left;
  }
  .table-stack td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 6.5rem;
    color: var(--muted);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
  }
  .table-stack td.stack-title {
    display: block;
    font-weight: 500;
    margin-bottom: 0.3rem;
  }
  .table-stack td.stack-hide {
    display: none;
  }
  .table tbody tr:hover td {
    background: transparent;
  }
}

/* Lists */
.list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--bg);
}
.list > li {
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.list > li + li {
  border-top: 1px solid var(--border);
}
.list-main {
  min-width: 0;
  flex: 1;
}
.list-title {
  font-weight: 500;
}
.list-sub {
  color: var(--muted);
  font-size: 0.8125rem;
  margin-top: 0.1rem;
}

/* Panels: used where a group needs a boundary. Never nest them. */
.panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--bg);
  padding: 1.25rem;
}
.panel-tinted {
  background: var(--surface);
}
.panel h3 {
  margin-bottom: 0.5rem;
}

/* Key/value facts */
.kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1.25rem;
  margin: 0;
  font-size: 0.875rem;
}
.kv dt {
  color: var(--muted);
}
.kv dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Notices */
.notice {
  display: flex;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--surface);
  font-size: 0.875rem;
}
.notice-error {
  border-color: rgba(179, 38, 30, 0.35);
  background: var(--dead-bg);
  color: var(--dead);
}
.notice-success {
  border-color: rgba(36, 86, 214, 0.35);
  background: var(--counted-bg);
  color: var(--counted);
}
.notice-warn {
  border-color: rgba(156, 98, 0, 0.35);
  background: var(--weak-bg);
  color: var(--weak);
}

/* Empty states teach the next action. */
.empty {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-l);
  padding: 2.5rem 1.5rem;
  text-align: center;
}
.empty h3 {
  margin-bottom: 0.4rem;
}
.empty p {
  color: var(--muted);
  max-width: 40ch;
  margin-inline: auto;
}
.empty .btn {
  margin-top: 1rem;
}

/* Inline stats: a number with its label, sized like text, never a hero. */
.stat {
  display: inline-flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 6rem;
}
.stat b {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stat span {
  color: var(--muted);
  font-size: 0.8125rem;
}
.stat-row {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Sparklines are inline SVG rendered on the server. */
.sparkline {
  display: block;
  width: 100%;
  height: 2.5rem;
  overflow: visible;
}
.sparkline path {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.sparkline .marker {
  stroke: var(--primary);
  stroke-width: 1;
  stroke-dasharray: 2 2;
}
.sparkline .after {
  stroke: var(--primary);
}

/* The receipt: a link's verdict with its reasons. Used on link detail, the checker, the landing. */
.receipt {
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--bg);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  max-width: min(34rem, 100%);
}
.receipt-head {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.receipt-head .from {
  min-width: 0;
}
.receipt-head .from small {
  display: block;
  color: var(--muted);
}
.receipt-body {
  padding: 1rem 1.25rem;
}
.receipt-body ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.receipt-body li {
  display: flex;
  gap: 0.6rem;
  padding: 0.35rem 0;
  font-size: 0.875rem;
}
.receipt-body li::before {
  content: '';
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  margin-top: 0.45rem;
  background: var(--border-strong);
}
.receipt-body li.ok::before {
  background: var(--counted);
}
.receipt-body li.bad::before {
  background: var(--dead);
}
.receipt-body li.warn::before {
  background: var(--weak);
}
.receipt-foot {
  padding: 0.75rem 1.25rem;
  background: var(--surface);
  font-size: 0.8125rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
}

/* Tabs used inside a page (not the site subnav) */
.tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}
.tabs a {
  padding: 0.5rem 0.6rem;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-weight: 500;
}
.tabs a[aria-current='page'] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.tabs a:hover {
  text-decoration: none;
  color: var(--ink);
}

/* Skeletons for loading rows */
.skeleton {
  display: block;
  height: 0.9em;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, 0);
  z-index: var(--z-toast);
  background: var(--ink);
  color: var(--bg);
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  box-shadow: var(--shadow-2);
  animation: rise var(--t-base) var(--ease-out);
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translate(-50%, 0.5rem);
  }
}

/* Footer */
.footer {
  border-top: 1px solid var(--border);
  padding: 2rem 0;
  color: var(--muted);
  font-size: 0.8125rem;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer a {
  color: var(--muted);
}

/* Marketing shell: same family, more weight and air. Sections are art-directed in landing.css. */
.mk-header {
  min-height: 3.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem 1.5rem;
  flex-wrap: wrap;
  padding-block: 0.6rem;
}
.mk-header .nav {
  margin-left: auto;
  gap: 0.15rem;
}
.mk-header .brand {
  font-size: 1.0625rem;
}
@media (max-width: 480px) {
  .mk-header {
    gap: 0.5rem;
  }
  .mk-header .nav a {
    padding-inline: 0.5rem;
    font-size: 0.875rem;
  }
  /* The checker link stays reachable from the hero and the footer; the bar keeps to one row. */
  .mk-header .nav-optional:not([aria-current='page']) {
    display: none;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 0.9375rem;
  }
  h1 {
    font-size: 1.5rem;
  }
  .main {
    padding-top: 1.25rem;
  }
  /* Phone top bar: brand, three nav words, avatar. Sign out lives on the Account page. */
  .topbar-inner {
    gap: 0.5rem;
  }
  .topbar-user .email,
  .topbar-user form {
    display: none;
  }
  .topbar-user {
    min-width: 0;
  }
  .nav {
    margin-left: 0;
    gap: 0;
  }
  .nav a {
    padding: 0.35rem 0.45rem;
    font-size: 0.875rem;
  }
  .list > li {
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
  }
  .page-head .row {
    width: 100%;
  }
  .page-head .btn {
    min-height: 2.75rem;
    flex: 1 1 auto;
  }
  /* A page action wrapped in a form (Pull now) stretches like a bare button. */
  .page-head .row > form {
    display: flex;
    flex: 1 1 auto;
  }
  /* 16px inputs keep iOS Safari from zooming the page on focus. */
  .input,
  .select,
  .textarea {
    font-size: 1rem;
  }
  .prose code,
  .kv code {
    white-space: nowrap;
  }
  .kv {
    grid-template-columns: 1fr;
    gap: 0.15rem 0;
  }
  .kv dt {
    margin-top: 0.5rem;
  }
  .stat-row {
    gap: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Data points on a sparkline with gaps. The dot takes the color of its side of the marker. */
.sparkline .point {
  fill: var(--ink-2);
  stroke: none;
}
.sparkline .point.after {
  fill: var(--primary);
}


/* Auth: the sign-in screen, the not-configured page and the account screen. The sign-in screen
   is the brand register (see styles.landing.css): the masthead under the glow, then one white
   card the width of the landing page's domain form. */

.auth-hero {
  padding-bottom: 0;
}
.auth-hero .pr-lede {
  max-width: 48ch;
}

.auth-card {
  display: grid;
  gap: 1rem;
  width: min(100% - 2.5rem, 27rem);
  margin: 1.875rem auto 0;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: var(--shadow-3);
}
.auth-card .notice {
  width: 100%;
}
.auth-hint {
  text-align: center;
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
}

/* Google's sign-in button: their mark, on white, at the landing page's button height. */
.auth-google,
.auth-card .btn-lg {
  width: 100%;
  gap: 0.65rem;
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--ink);
  font-weight: 700;
}
.auth-google:hover,
.auth-card .btn-lg:hover {
  border-color: var(--ink);
}
.google-mark {
  flex: none;
  display: block;
}

.auth-reads {
  margin-top: 0.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink);
}
.auth-scopes {
  list-style: none;
  margin: -0.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  font-size: 0.875rem;
  color: var(--ink-2);
}
.auth-scopes li {
  display: flex;
  gap: 0.6rem;
}
.auth-scopes li::before {
  content: '';
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  margin-top: 0.5rem;
  border-radius: 999px;
  background: var(--border-strong);
}

.auth-stack {
  margin-top: 1.5rem;
}
.auth-actions {
  margin-top: 1rem;
}
.auth-name-form {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  max-width: 26rem;
}

/* The delete panel earns its own border colour: it is the one place data leaves for good. */
.danger-zone {
  border-color: rgba(179, 38, 30, 0.35);
}
.danger-zone .field {
  max-width: 26rem;
}

.auth-inline-form {
  display: inline-block;
  margin-left: 0.5rem;
  vertical-align: baseline;
}

/* The account rows hold one line each, so the label sits level with its value even when the value
   carries a small button. */
.auth-stack .kv {
  align-items: center;
}


/* Sites: the list rows, the add form and the overview sections. */

.plan-line {
  margin-top: 1rem;
}

.site-counts {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--muted);
  white-space: nowrap;
}
.site-dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: var(--border-strong);
  margin: 0 0.15rem;
}

.site-form {
  max-width: 34rem;
}
.site-form .kv {
  margin-bottom: 1rem;
}
.site-form .notice {
  margin-bottom: 1rem;
}

.site-actions {
  margin-top: 1.25rem;
}
.site-actions form {
  display: inline;
}

/* Settings sections: no panels, one width, a hairline between them. */
.site-section {
  max-width: 34rem;
  margin-top: 2rem;
}
.site-section + .site-section {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

/* A stat with nothing to report says so at body size, so it never reads as a headline number. */
.stat-none {
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--muted);
}

/* Overview: the line that closes the arithmetic under the stats, then the line naming the source. */
.site-breakdown {
  margin-top: 0.75rem;
}
.site-source {
  margin-top: 0.35rem;
}
.site-breakdown + .site-source {
  margin-top: 0.25rem;
}

.site-engines-off {
  margin-top: 0.75rem;
}

@media (max-width: 640px) {
  /* The counts read as their own line under the domain, and wrap instead of running off. */
  .list > li {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .site-counts {
    flex-basis: 100%;
    flex-wrap: wrap;
    white-space: normal;
    font-size: 0.8125rem;
  }
  .site-add,
  .site-add .btn {
    width: 100%;
  }
  .site-form,
  .site-section {
    max-width: none;
  }
}


/* Links, ref links and the public checker. Tokens come from styles.css; nothing new is invented
   here, only the few shapes these pages need. */

/* Verdict filter chips above the links table. */
.chips {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 1.875rem;
  padding: 0 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-weight: 500;
  background: var(--bg);
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.chip:hover {
  background: var(--surface);
  text-decoration: none;
  color: var(--ink);
}
.chip[aria-current='page'] {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--ink);
}
.chip-count {
  color: var(--muted);
  font-size: 0.75rem;
}
.chip[aria-current='page'] .chip-count {
  color: var(--ink-2);
}

.ref-filter {
  margin-bottom: 0.75rem;
}

/* The line that explains the Position change column, and the one that counts the rows. */
.links-hint {
  margin: -0.75rem 0 1rem;
  max-width: var(--measure);
}
.links-summary {
  margin-bottom: 0.5rem;
}

/* Links table: URLs stay on one line and lose their tail rather than wrapping the row. */
.table .cell-url {
  max-width: 26rem;
}
.table .cell-path {
  max-width: 14rem;
}
.link-source {
  display: block;
  max-width: 100%;
  color: var(--ink);
}
.link-source:hover {
  color: var(--primary);
}
.table .cell-spark {
  width: 9rem;
  min-width: 7rem;
}
/* A change reads the same everywhere: the glyph, the number, one weight above the row text. */
.table .delta {
  font-size: 0.9375rem;
}
.stat b .delta {
  font-size: inherit;
}
/* Lines that only make sense once the row has stacked. See .table-stack in styles.css. */
.stack-only {
  display: none;
}

/* Link detail: the receipt next to the facts, then the outcome section below. */
.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.detail-grid .receipt {
  max-width: none;
}
.outcome-chart {
  padding: 1rem 1.25rem;
}
.chart-axis {
  margin-top: 0.5rem;
}
.outcome-note {
  margin-top: 0.75rem;
  max-width: var(--measure);
}

/* Forms on these pages sit in a panel and never run wider than a comfortable measure. */
.form-narrow {
  max-width: 34rem;
}
.form-actions {
  margin-top: 1.25rem;
}
.input.file {
  height: auto;
  padding: 0.45rem 0.65rem;
}
.import-note {
  margin-top: 1rem;
}

/* Public checker: brand register, one column, the receipt as the answer. */
.checker {
  padding: 3rem 0 4rem;
}
.checker h1 {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  margin-bottom: 0.75rem;
}
.checker-form {
  margin-top: 1.5rem;
}
.checker-result {
  margin-top: 2rem;
  display: grid;
  gap: 1.25rem;
}
.checker-result .receipt {
  max-width: none;
}
.checker-cta {
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
  display: grid;
  gap: 0.75rem;
  justify-items: start;
}
.checker-cta p {
  color: var(--muted);
  max-width: var(--measure);
}
.checker-note {
  margin-top: 2rem;
  max-width: var(--measure);
}
/* The example answer under the form: the same receipt the check returns, filled with made-up data. */
.checker-example {
  margin-top: 2.5rem;
  display: grid;
  gap: 0.5rem;
  justify-items: start;
}
.checker-example h2 {
  font-size: 1.125rem;
}
.checker-example .receipt {
  margin-top: 0.5rem;
  width: 100%;
}

@media (max-width: 900px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }
}

/* Phones: the stacked rows show the two lines the table columns cannot, forms take the full width,
   and the button a thumb has to hit is 44px tall. */
@media (max-width: 720px) {
  .table-stack .stack-only {
    display: block;
  }
  .table-stack .cell-url,
  .table-stack .cell-path {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .form-narrow {
    max-width: none;
  }
  .checker {
    padding: 2rem 0 3rem;
  }
  .form-actions .btn,
  .checker-cta .btn {
    width: 100%;
    height: 2.75rem;
    font-size: 1rem;
  }
  .head-actions {
    width: 100%;
  }
  .head-actions > * {
    flex: 1;
  }
  .head-actions .btn {
    width: 100%;
    height: 2.75rem;
  }
  .links-hint {
    margin-top: -0.5rem;
  }
}


/* Citations: engine stats, share of voice, the prompt grid. Tokens only, no new colors. */

/* Answer badges own their class names. A verdict class means a link verdict and nothing else. */
.badge-cited {
  background: var(--counted-bg);
  color: var(--counted);
}
.badge-mentioned {
  background: var(--weak-bg);
  color: var(--weak);
}
.badge-notcited {
  background: var(--vanity-bg);
  color: var(--vanity);
}
.badge-noanswer {
  background: var(--unchecked-bg);
  color: var(--unchecked);
}
/* The user's own host in the share of voice list. The dot repeats the color of its bar. */
.badge-own {
  background: var(--surface-2);
  color: var(--ink-2);
}
.badge-own::before {
  background: var(--primary);
}

.cite-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 9rem;
}
.cite-stat small {
  max-width: 16rem;
  overflow-wrap: anywhere;
}
.cite-note {
  margin-top: 0.75rem;
}

.cite-snapshot {
  margin-top: 1rem;
  text-align: center;
}
.cite-snapshot .hint {
  margin-top: 0.5rem;
}

/* Share of voice: one row per host. Every track starts at the same x and runs the same width, so
   the bars compare. The label column carries the host and the "Your site" badge. */
.sov {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
}
.sov > li {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr) 2.5rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
}
.sov > li + li {
  border-top: 1px solid var(--border);
}
.sov > li.is-own {
  background: var(--surface);
}
.sov-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.sov-host {
  min-width: 0;
}
.sov-bar {
  height: 0.5rem;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.sov-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--border-strong);
}
.sov > li.is-own .sov-bar > span {
  background: var(--primary);
}
.sov-count {
  text-align: right;
  color: var(--ink-2);
}

.cite-spark {
  width: 16rem;
}

/* The prompt grid: one row per question, one cell per engine. */
.cite-table .cite-prompt {
  min-width: 18rem;
  max-width: 26rem;
}
.cite-cell {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-start;
}
.cite-cell details {
  font-size: 0.8125rem;
}
.cite-cell summary {
  color: var(--muted);
  cursor: pointer;
}
.cite-excerpt {
  margin-top: 0.35rem;
  max-width: 30rem;
  color: var(--ink-2);
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.cite-caveat {
  margin-top: 0.75rem;
}

.prompt-add {
  max-width: var(--measure);
}
.prompt-add .btn {
  margin-top: 1rem;
}

/* The prompt grid stacks under 720px: the question is the row title, each engine gets a labelled
   line with its badge and the excerpt below it. Nothing may reach past the row. */
@media (max-width: 720px) {
  .cite-table .cite-prompt {
    min-width: 0;
    max-width: none;
    overflow-wrap: anywhere;
  }
  .cite-table .cite-cell {
    flex: 1;
    min-width: 0;
    max-width: 100%;
  }
  .cite-table .cite-cell details {
    max-width: 100%;
  }
  .cite-excerpt {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  /* Four engine stats, two to a line. */
  .cite-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.25rem;
  }
  .cite-stat {
    min-width: 0;
  }
  .cite-stat small {
    max-width: 100%;
  }
  /* Label and count on the first line, the full-width track under them. */
  .sov > li {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'label count' 'bar bar';
    row-gap: 0.4rem;
  }
  .sov-label {
    grid-area: label;
  }
  .sov-count {
    grid-area: count;
  }
  .sov-bar {
    grid-area: bar;
  }
  .cite-spark {
    width: 12rem;
  }
}

@media (max-width: 480px) {
  .cite-spark {
    width: 9rem;
  }
}

/* Sources: one row per page the engines cited or Google ranked. The link-status badges own their
   names, like the answer badges above; a verdict class means a link verdict and nothing else. */
.badge-linked {
  background: var(--counted-bg);
  color: var(--counted);
}
.badge-linked-host {
  background: var(--weak-bg);
  color: var(--weak);
}
.badge-unlinked {
  background: var(--vanity-bg);
  color: var(--vanity);
}
.src-table .src-page {
  min-width: 18rem;
  max-width: 30rem;
}
.src-title {
  overflow-wrap: anywhere;
}
.src-url {
  display: block;
  margin-top: 0.15rem;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.src-more {
  margin-top: 0.75rem;
}

@media (max-width: 720px) {
  .src-table .src-page {
    min-width: 0;
    max-width: none;
  }
}

/* The prompts a page appeared for, folded under the page. */
.src-prompts {
  margin-top: 0.35rem;
  font-size: 0.8125rem;
}
.src-prompts summary {
  color: var(--muted);
  cursor: pointer;
}
.src-prompts ul {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
}
.src-prompts li {
  padding: 0.15rem 0;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.src-prompts .how {
  color: var(--muted);
}


/* Billing and engines. Two screens: a plan table and one switch per engine. Both stack on phones. */

.billing-notices:empty {
  display: none;
}
.billing-notices > * + * {
  margin-top: 0.5rem;
}

.plan-table th[scope='row'],
.billing-sites th[scope='row'] {
  font-weight: 600;
  color: var(--ink);
  background: var(--bg);
  font-size: 0.875rem;
  letter-spacing: 0;
}
.plan-table td {
  vertical-align: middle;
}
.plan-table .plan-action {
  text-align: right;
  white-space: nowrap;
}
/* The plan the workspace is on carries state, so the row is tinted and the cell holds a chip. */
.table.plan-table tbody tr.plan-current th[scope='row'],
.table.plan-table tbody tr.plan-current td {
  background: var(--surface);
}

.billing-totals {
  grid-template-columns: max-content max-content;
  gap: 0.35rem 2rem;
}
.billing-totals .billing-grand {
  font-weight: 600;
  border-top: 1px solid var(--border);
  padding-top: 0.35rem;
}

/* Engines list: name and note on the left, price and switch together on the right. */
.engines > li {
  gap: 1rem;
}
.engines .engine-controls {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex: none;
}
.engines .engine-price {
  color: var(--ink-2);
  min-width: 5rem;
  text-align: right;
}
.engines form {
  display: flex;
  align-items: center;
}

.engine-total {
  margin-top: 1rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.engine-total b {
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
}

/* Phones. The two tables carry `table-stack`, which stacks the td cells; their row headers and the
   action cell have to follow, and the plan button fills the row at 44px. */
@media (max-width: 720px) {
  .plan-table th.stack-title,
  .billing-sites th.stack-title {
    display: block;
    padding: 0 0 0.3rem;
    border: 0;
    background: transparent;
    white-space: normal;
    font-size: 0.9375rem;
  }
  .plan-table tbody tr.plan-current {
    background: var(--surface);
  }
  .plan-table .plan-action {
    display: block;
    text-align: left;
    margin-top: 0.7rem;
  }
  .plan-table .plan-action .btn {
    width: 100%;
    height: 2.75rem;
  }
}

@media (max-width: 640px) {
  .engines > li {
    gap: 0.75rem;
  }
  .engines .engine-price {
    min-width: 0;
  }
  /* The totals stay a two-column list on a phone, so the label keeps its row. */
  .billing-totals dt {
    margin-top: 0;
  }
}


/* Landing and pricing: brand register, the owner's theme. An off-white ground with one blue glow
   under the top of the page, white surfaces that lift off it, Space Grotesk for reading and IBM
   Plex Mono for data. Both pages set body class "mk", so the glow and the light header only apply
   to them; every color comes from the tokens in styles.css. */

body.mk {
  background: radial-gradient(900px 480px at 50% -80px, var(--glow), transparent 70%), var(--bg);
  background-repeat: no-repeat;
}

/* Header: the same hairline rule as the artboard, muted words, one ink button. */
body.mk .mk-band {
  border-bottom: 1px solid var(--border);
}
body.mk .mk-header .nav a {
  color: var(--muted);
  font-weight: 400;
}
body.mk .mk-header .nav a:hover {
  color: var(--ink);
  background: transparent;
}
body.mk .mk-header .nav a[aria-current='page'] {
  color: var(--ink);
  background: transparent;
  font-weight: 500;
}
body.mk .mk-header .nav a.btn {
  color: var(--bg);
}

body.mk .footer {
  padding-block: 1.5rem;
}

/* Page rhythm. Two column widths: the artboard's 1020px band and the 860px reading band. */
.lp-wrap {
  width: min(100% - 2.5rem, 63.75rem);
  margin-inline: auto;
}
.lp-wrap-narrow {
  width: min(100% - 2.5rem, 53.75rem);
  margin-inline: auto;
}
.lp-sec {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.lp-sec-tight {
  padding-block: 1.25rem clamp(2.5rem, 6vw, 4.5rem);
}
.lp-center {
  text-align: center;
  margin-inline: auto;
}
.lp-h2 {
  font-size: clamp(1.625rem, 3vw, 2.125rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.lp-head {
  max-width: 60ch;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.lp-head p {
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-wrap: pretty;
}
.lp-note {
  margin-top: 1.5rem;
  max-width: 72ch;
  color: var(--muted);
  font-size: 0.875rem;
  text-wrap: pretty;
}
.lp-note.lp-center {
  max-width: 68ch;
}
.lp-caption {
  margin-top: 1.125rem;
  color: var(--muted);
  font-size: 0.875rem;
  text-align: center;
  text-wrap: pretty;
}
/* A ref parameter or a domain inside a sentence breaks mid-token on a phone. Keep it whole. */
.lp-sec p .mono,
.lp-sec p code {
  white-space: nowrap;
}

/* Hero: centered, the source line in mono, one display line in ink and one in the accent. */
.lp-hero {
  width: min(100% - 2.5rem, 53.75rem);
  margin-inline: auto;
  padding-block: clamp(3rem, 8vh, 6rem) clamp(1.75rem, 4vw, 2.25rem);
  text-align: center;
}
.lp-eyebrow {
  color: var(--primary);
  font-size: 0.8125rem;
  margin-bottom: 1.25rem;
}
.lp-display {
  font-size: clamp(2.375rem, 5vw, 3.875rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.06;
  text-wrap: balance;
}
.lp-hi {
  color: var(--primary);
}
.lp-lede {
  margin: 1.375rem auto 0;
  max-width: 56ch;
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.65;
  text-wrap: pretty;
}
.lp-hint {
  margin-top: 0.875rem;
  color: var(--muted);
  font-size: 0.8125rem;
}

/* The domain form: one white bar holding a mono input and the primary button. */
.lp-form {
  display: flex;
  gap: 0.5rem;
  max-width: 28.75rem;
  margin: 1.875rem auto 0;
  padding: 0.375rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-2);
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
/* The bar carries the focus ring for the input it holds, so the outline traces the whole control. */
.lp-form:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--focus), var(--shadow-2);
}
.lp-form-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1rem;
  padding: 0.625rem 0.75rem;
}
.lp-form-input::placeholder {
  color: var(--muted);
}
.lp-form-input:focus,
.lp-form-input:focus-visible {
  outline: none;
}
.lp-form .btn {
  height: 2.75rem;
  padding-inline: 1.25rem;
  font-weight: 700;
}
@media (max-width: 480px) {
  .lp-form {
    flex-direction: column;
  }
  .lp-form .btn {
    width: 100%;
  }
}

/* The ledger: the centerpiece. A white surface, a header row, then the graded rows. */
.lp-ledger {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.lp-ledger-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.8rem 1.125rem;
  border-bottom: 1px solid var(--border);
}
.lp-ledger-site {
  font-size: 0.8125rem;
  color: var(--ink);
}
.lp-ledger-meta {
  color: var(--muted);
  font-size: 0.8125rem;
}
.lp-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-left: auto;
  font-size: 0.75rem;
}
.lp-chip-sep {
  color: var(--border-strong);
  white-space: pre;
}
.lp-chip-counted {
  color: var(--counted);
}
.lp-chip-weak {
  color: var(--weak);
}
.lp-chip-vanity {
  color: var(--vanity);
}
.lp-chip-dead {
  color: var(--dead);
}
.lp-ledger-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.lp-ledger .table th {
  background: transparent;
  padding: 0.6rem 1.125rem;
}
.lp-ledger .table td {
  padding: 0.7rem 1.125rem;
  vertical-align: middle;
}
.lp-ledger .table .cell-url {
  max-width: 24rem;
}
@media (min-width: 45.0625rem) {
  .lp-ledger .table {
    min-width: 42rem;
  }
}
@media (max-width: 720px) {
  .lp-ledger .table td {
    padding: 0.15rem 0;
  }
  .lp-ledger .table tr {
    padding: 0.8rem 1.125rem;
  }
}

/* How it works: three white panels, a numbered sequence, one sentence each. */
.lp-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16.25rem, 100%), 1fr));
  gap: 0.875rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.lp-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 1.5rem;
}
.lp-step {
  color: var(--primary);
  font-size: 0.75rem;
  margin-bottom: 0.75rem;
}
.lp-panel h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.lp-panel p {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.6;
  text-wrap: pretty;
}

/* The proof section: the receipt next to the chart of the page it points at. */
.lp-proof {
  display: grid;
  gap: 1.25rem;
  align-items: start;
}
.lp-proof > * {
  min-width: 0;
}
@media (min-width: 58rem) {
  .lp-proof {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.lp-proof .receipt {
  max-width: none;
  background: var(--surface);
  box-shadow: var(--shadow-2);
}
.lp-proof .receipt-foot {
  background: var(--surface-2);
}

.lp-chart {
  margin: 0;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-2);
}
/* Lock the box to the viewBox ratio so the plot always fills the width and the axis rule below it
   lands exactly on the marker. */
.lp-chart .sparkline {
  height: auto;
  aspect-ratio: 240 / 40;
}
.lp-chart .sparkline path {
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.lp-chart .sparkline .marker {
  vector-effect: non-scaling-stroke;
}
.lp-chart-axis {
  display: grid;
  grid-template-columns: 28fr 41fr;
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.75rem;
}
.lp-chart-axis span:first-child {
  text-align: right;
  padding-right: 0.5rem;
  border-right: 1px solid var(--primary);
}
.lp-chart-axis span:last-child {
  padding-left: 0.5rem;
}
.lp-chart figcaption {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.8125rem;
  text-wrap: pretty;
}

/* Closing: centered, one line, two buttons. */
.lp-close {
  text-align: center;
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
}
.lp-close-line {
  margin: 0.875rem auto 0;
  max-width: 52ch;
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-wrap: pretty;
}
.lp-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.lp-actions .btn {
  height: 2.75rem;
  padding-inline: 1.5rem;
  font-weight: 700;
}
.lp-actions .btn:not(.btn-primary) {
  background: var(--surface);
  border-color: var(--border);
  font-weight: 500;
}
.lp-actions .btn:not(.btn-primary):hover {
  border-color: var(--border-strong);
}

/* The "after the link" segment draws itself as the chart scrolls in. Scroll-driven only, so a
   browser without it (and anyone who asked for less motion) gets the finished line. */
@keyframes lp-draw {
  from {
    stroke-dashoffset: 420;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lp-chart .sparkline .after {
      stroke-dasharray: 420;
      animation: lp-draw linear both;
      animation-timeline: view();
      animation-range: entry 25% cover 60%;
    }
  }
}

/* Tables on the brand pages sit on white, with a tinted header row. */
body.mk .table-wrap {
  background: var(--surface);
  box-shadow: var(--shadow-2);
}
body.mk .table-wrap .table th {
  background: var(--surface-2);
}

/* Pricing. A light masthead under the glow, the plan blocks, the engine prices, the questions. */
.pr-hero {
  padding-block: clamp(2.5rem, 7vh, 4.5rem) clamp(1.5rem, 3vw, 2rem);
  text-align: center;
}
.pr-title {
  font-size: clamp(2.25rem, 4.6vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
}
.pr-lede {
  margin: 1rem auto 0;
  max-width: 54ch;
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-wrap: pretty;
}
.pr-sub {
  margin-top: 0.6rem;
  margin-bottom: 1.25rem;
  max-width: 62ch;
  color: var(--muted);
}
.lp-sec .pr-sub + .table-wrap {
  margin-top: 1.25rem;
}

/* Plan blocks: three white surfaces, stacked at every width. The recommended one carries the
   accent border and the filled button; the other two are outlined. */
.pr-plans {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.875rem;
}
.pr-plan-row {
  display: grid;
  gap: 0.9rem;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
}
.pr-plan-row.is-pick {
  border-color: rgba(36, 86, 214, 0.4);
  box-shadow: var(--shadow-2);
}
.pr-plan-id h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-size: 1.0625rem;
  font-weight: 700;
}
.pr-rec {
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 600;
}
.pr-plan-price {
  margin-top: 0.3rem;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.pr-plan-sites {
  font-weight: 500;
}
.pr-plan-covers {
  margin-top: 0.15rem;
  max-width: 46ch;
  color: var(--muted);
  text-wrap: pretty;
}
/* Thumb-sized and full width on a phone, back to the app's button on a laptop. */
.pr-plan-row .btn {
  width: 100%;
  height: 2.75rem;
}
.pr-plan-row .btn:not(.btn-primary) {
  border-color: var(--border-strong);
}
@media (min-width: 52rem) {
  .pr-plan-row {
    grid-template-columns: minmax(11rem, 14rem) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem 2.5rem;
  }
  .pr-plan-row .btn {
    width: auto;
    height: 2.25rem;
    justify-self: end;
  }
}

/* Engine prices. The table stacks under 720px, so the price stays next to its label. */
.pr-table td {
  vertical-align: middle;
}
.pr-plan {
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
}
.pr-table td.num {
  font-size: 1rem;
  font-weight: 500;
}
.table tbody tr.pr-bundle td {
  background: var(--surface-2);
}
@media (max-width: 720px) {
  .table-stack tbody tr.pr-bundle {
    background: var(--surface-2);
  }
}

.pr-faq {
  display: grid;
  margin: 1.25rem 0 0;
  border-top: 1px solid var(--border-strong);
}
.pr-faq dt {
  padding: 1.1rem 0 0.35rem;
  font-weight: 700;
  font-size: 1.0625rem;
}
.pr-faq dd {
  margin: 0;
  padding: 0 0 1.1rem;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  max-width: 70ch;
  text-wrap: pretty;
}
@media (min-width: 54rem) {
  .pr-faq {
    grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr);
    column-gap: 3rem;
  }
  .pr-faq dt {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--border);
  }
  .pr-faq dd {
    padding: 1.25rem 0;
  }
}

/* Phones: nothing wider than the viewport, page buttons at 44px. */
@media (max-width: 640px) {
  body.mk main .btn {
    min-height: 2.75rem;
  }
  .lp-ledger-head {
    gap: 0.5rem 0.75rem;
  }
  /* The summary wraps to its own line, so the dots between the chips become gaps instead. */
  .lp-chips {
    margin-left: 0;
    width: 100%;
    gap: 0.3rem 0.85rem;
  }
  .lp-chip-sep {
    display: none;
  }
}