/*
 * Brevily marketing site — partials on top of @tundralibs/ui + the Brevily theme.
 *
 * Three rules hold this file together:
 *   1. No shadows. Elevation belongs to things that actually float — modals,
 *      dropdowns, toasts — and those are the library's. Everything on the page
 *      separates with a hairline or with space.
 *   2. Sections differ from each other. A page is not nine repetitions of
 *      kicker / heading / subhead / grid-of-three.
 *   3. Teal is the only colour that carries meaning here. Coral and sun appear
 *      in the mark and as the second chart series; nowhere else.
 */

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

.brv-s-wrap {
  width: 100%;
  max-width: var(--layout-max-width);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

.brv-s-section {
  padding-block: var(--space-10);
  border-top: var(--border-width) solid var(--color-border-subtle);
}

.brv-s-section--tight {
  padding-block: var(--space-8);
}

/* The first section after a page header continues it; no rule between them. */
.brv-s-phead + .brv-s-section,
.brv-s-phead + .brv-s-section--tight,
.brv-s-hero + .brv-s-strip,
.brv-s-strip + .brv-s-section,
.brv-s-band + .brv-s-section,
.brv-s-section + .brv-s-band,
.brv-s-section + .brv-s-cta {
  border-top: 0;
}

.brv-s-phead + .brv-s-section--tight {
  padding-top: 0;
}

/* ---------- type ---------- */

.brv-s-display {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--brv-display);
  font-weight: var(--font-weight-bold);
  line-height: 1.02;
  letter-spacing: -0.032em;
  color: var(--color-text);
}

.brv-s-h1 {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--brv-display-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  letter-spacing: var(--letter-spacing-tighter);
  color: var(--color-text);
}

.brv-s-h2 {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-semibold);
  line-height: 1.15;
  letter-spacing: var(--letter-spacing-tighter);
  color: var(--color-text);
}

/* A heading that leads a list rather than a block of prose sits tighter. */
.brv-s-h2--lead {
  margin-bottom: var(--space-6);
}

.brv-s-sub {
  margin: var(--space-3) 0 0;
  max-width: var(--brv-measure);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
}

.brv-s-hint {
  margin: var(--space-3) 0 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-text-subtle);
}

.brv-s-after {
  margin: var(--space-6) 0 0;
  font-size: var(--font-size-sm);
}

/* Kept for the page header and the few places a label genuinely helps. Not
   sprinkled on every section any more. */
.brv-s-kicker {
  display: block;
  margin-bottom: var(--space-3);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

/* A heading with its subhead beside it, rather than stacked and centred. */
.brv-s-lede {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4) var(--space-8);
  align-items: baseline;
  margin-bottom: var(--space-6);
}

.brv-s-lede .brv-s-sub {
  margin-top: 0;
}

.brv-s-head {
  margin-bottom: var(--space-6);
}

.brv-s-list {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.brv-s-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  align-items: baseline;
  line-height: var(--line-height-base);
}

.brv-s-list li svg {
  color: var(--color-accent);
}

.brv-s-stack {
  display: grid;
  gap: var(--space-3);
}

.brv-s-legal-name {
  padding: 0 .2em;
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  color: var(--color-text);
}

/* ---------- links ---------- */

/* .brv-link itself is the theme's (mono, accent, underline on hover). These
   are the two variants the site adds. */
a.brv-link--invert {
  color: var(--color-accent-inverse);
}

/* The theme keeps .brv-link on one line because it is usually a short link.
   In running text it has to be allowed to wrap. */
/* .brv-link is mono because it is usually a short link. In running prose it
   has to read as prose and be allowed to wrap. */
.brv-s-band .brv-link,
.brv-s-after .brv-link,
.brv-s-sub .brv-link,
.brv-s-spec__text .brv-link,
.brv-s-legal__p .brv-link,
.brv-s-hint .brv-link,
.brv-s-card__text .brv-link,
.brv-s-band__text .brv-link {
  white-space: normal;
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-normal);
}

.brv-s-after a {
  font-family: var(--font-family-base);
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklab, var(--color-accent) 40%,
    transparent);
}

.brv-s-after a:hover {
  text-decoration-color: currentColor;
}

/* ---------- hero ---------- */

.brv-s-hero {
  padding-block: var(--space-12) var(--space-10);
}

.brv-s-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6) var(--space-10);
  align-items: end;
}

.brv-s-hero__copy {
  grid-column: 1;
}

.brv-s-hero__lead {
  margin: var(--space-5) 0 0;
  max-width: 26rem;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
}

.brv-s-hero__form {
  grid-column: 1;
  max-width: 30rem;
  margin: 0;
}

.brv-s-hero__trust {
  grid-column: 1;
  margin: calc(var(--space-3) * -1) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
}

/* The transformation. This is the hero's only picture, so it gets the
   right-hand column to itself and the largest mono on the site. */
.brv-s-xform {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
}

.brv-s-xform__from {
  margin: 0;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  line-height: 1.7;
  word-break: break-all;
  color: var(--color-text-subtle);
  text-decoration: line-through;
  text-decoration-color: color-mix(in oklab, var(--color-text-subtle) 45%,
    transparent);
}

.brv-s-xform__to {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
}

.brv-s-xform__link {
  font-family: var(--font-family-mono);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
}

.brv-s-xform__host {
  color: var(--color-text-subtle);
}
.brv-s-xform__slug {
  color: var(--color-text);
}

.brv-s-xform__note {
  margin: var(--space-4) 0 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-text-subtle);
}

/* The transformation plays once on arrival: the long URL, then the short
   link a beat later. It demonstrates the product rather than decorating the
   page, which is the only reason it earns the motion. */
.brv-s-xform__from {
  animation: brv-rise var(--brv-dur-slow) var(--brv-ease-out) both;
}

.brv-s-xform__to {
  animation: brv-rise var(--brv-dur-slow) var(--brv-ease-out) 420ms both;
}

.brv-s-xform__link .brv-s-xform__slug {
  animation: brv-rise var(--brv-dur-base) var(--brv-ease-spring) 620ms both;
  display: inline-block;
}

.brv-s-xform__note {
  animation: brv-rise var(--brv-dur-base) var(--brv-ease-out) 760ms both;
}

@media (prefers-reduced-motion: reduce) {
  .brv-s-xform__from,
  .brv-s-xform__to,
  .brv-s-xform__link .brv-s-xform__slug,
  .brv-s-xform__note {
    animation: none;
  }
}

/* ---------- fact strip ---------- */

/* The strip and the ink band break out of the layout's own gutter so they
   run edge to edge; the .brv-s-wrap inside puts the gutter back, so their
   content still lines up with every other section. */
.brv-s-strip,
.brv-s-band {
  margin-inline: calc(var(--layout-gutter) * -1);
}

.brv-s-strip {
  padding-block: var(--space-6);
  border-top: var(--border-width) solid var(--color-border);
  border-bottom: var(--border-width) solid var(--color-border);
}

.brv-s-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}

.brv-s-fact {
  display: grid;
  gap: var(--space-1);
  padding-left: var(--space-4);
  border-left: var(--border-width) solid var(--color-border);
}

.brv-s-fact:first-child {
  padding-left: 0;
  border-left: 0;
}

.brv-s-fact__n {
  font-family: var(--font-family-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text);
}

.brv-s-fact__t {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-text-subtle);
}

/* ---------- capability list ---------- */

.brv-s-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-8);
}

.brv-s-spec {
  padding-block: var(--space-5);
  border-top: var(--border-width) solid var(--color-border);
}

.brv-s-spec:nth-child(1),
.brv-s-spec:nth-child(2) {
  border-top: 0;
  padding-top: 0;
}

.brv-s-spec__name {
  margin: 0 0 var(--space-2);
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.brv-s-spec__text {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
}

/* ---------- inverted band ---------- */

.brv-s-band {
  padding-block: var(--space-10);
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

.brv-s-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-8);
  align-items: center;
}

.brv-s-band .brv-s-h2 {
  color: var(--color-text-inverse);
}

.brv-s-band__copy {
  min-width: 0;
}

.brv-s-band__text {
  margin: var(--space-4) 0 var(--space-5);
  max-width: var(--brv-measure);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: color-mix(in oklab, var(--color-text-inverse) 78%, transparent);
}

.brv-s-band__title {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tighter);
  color: var(--color-text-inverse);
}

/* ---------- code ---------- */

.brv-s-code {
  margin: 0;
  padding: var(--space-4);
  overflow-x: auto;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  line-height: 1.75;
  color: var(--color-text);
  white-space: pre;
}

.brv-s-code b {
  color: var(--color-accent);
  font-weight: var(--font-weight-medium);
}

.brv-s-code--band {
  border-color: color-mix(in oklab, var(--color-text-inverse) 16%, transparent);
  background: color-mix(in oklab, var(--color-text-inverse) 6%, transparent);
  color: color-mix(in oklab, var(--color-text-inverse) 88%, transparent);
}

.brv-s-code--band b {
  color: var(--color-accent-inverse);
}

.brv-s-code--inline {
  display: block;
  margin: var(--space-1) 0 0;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  line-height: 1.6;
}

/* ---------- figures and chart ---------- */

.brv-s-figs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: var(--border-width) solid var(--color-border);
}

.brv-s-fig {
  display: grid;
  gap: var(--space-1);
}

.brv-s-fig__v {
  font-family: var(--font-family-display);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--letter-spacing-tighter);
  color: var(--color-text);
}

.brv-s-fig__l {
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
}

.brv-s-fig__d {
  margin-left: var(--space-1);
  font-variant-numeric: tabular-nums;
  color: var(--color-success);
}

.brv-s-chart-scroll {
  overflow-x: auto;
  min-width: 0;
  margin-top: var(--space-6);
}

.brv-s-chart {
  display: block;
  width: 100%;
  min-width: 42rem;
  height: auto;
}

.brv-s-chart__axis {
  stroke: var(--color-border-strong);
  stroke-width: 1;
}
.brv-s-chart__grid {
  stroke: var(--color-border-subtle);
  stroke-width: 1;
}
.brv-s-chart__bar {
  fill: var(--brv-series-1);
}
.brv-s-chart__bar--alt {
  fill: var(--brv-series-2);
}

/* The 2px gap between stacked segments is drawn by the surface showing
   through, so the column group must not paint a background. */
.brv-s-chart__col {
  fill-rule: nonzero;
}

.brv-s-chart__label {
  fill: var(--color-text-subtle);
  font-size: 10px;
  font-family: var(--font-family-base);
}

.brv-s-legend {
  display: flex;
  gap: var(--space-5);
  margin-top: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.brv-s-legend__key {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: var(--space-2);
  border-radius: 2px;
  background: var(--brv-series-1);
}

.brv-s-legend__key--alt {
  background: var(--brv-series-2);
}

/* ---------- price table ---------- */

.brv-s-price {
  width: 100%;
  min-width: 42rem;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.brv-s-price th,
.brv-s-price td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: var(--border-width) solid var(--color-border-subtle);
  vertical-align: baseline;
}

.brv-s-price thead th {
  padding-top: 0;
  border-bottom: var(--border-width) solid var(--color-border-strong);
  vertical-align: bottom;
}

.brv-s-price thead td {
  border-bottom: var(--border-width) solid var(--color-border-strong);
}

.brv-s-price__name {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.brv-s-price__amt {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-family-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text);
}

.brv-s-price__per {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-subtle);
}

.brv-s-price tbody th {
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
}

.brv-s-price tbody td {
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* The recommended column is marked by a tint and a rule, not a floating card. */
.brv-s-price__hot {
  background: color-mix(in oklab, var(--color-accent) 6%, transparent);
  box-shadow: inset 1px 0 0 color-mix(in oklab, var(--color-accent) 30%,
    transparent),
    inset -1px 0 0 color-mix(in oklab, var(--color-accent) 30%, transparent);
}

.brv-s-price tfoot td {
  border-bottom: 0;
  padding-top: var(--space-4);
}

/* ---------- FAQ ---------- */

.brv-s-faq {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: var(--space-8);
  align-items: start;
}

.brv-s-faq__aside {
  position: sticky;
  top: var(--space-6);
}

.brv-s-faq__help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
}

.brv-s-faq__list {
  border-top: var(--border-width) solid var(--color-border);
}

/* The accordion is a stack of hairline rows here, not a stack of boxes. */
.brv-s-faq__list .collapsible {
  border: 0;
  border-bottom: var(--border-width) solid var(--color-border);
  border-radius: 0;
  background: transparent;
}

.brv-s-faq__list .collapsible__trigger {
  padding-inline: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.brv-s-faq__list .collapsible__panel {
  padding-inline: 0;
}

.brv-s-faq__list .collapsible__panel p {
  margin: 0;
  max-width: var(--brv-measure);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
}

/* ---------- closing call to action ---------- */

.brv-s-cta {
  padding-block: var(--space-10);
  border-top: var(--border-width) solid var(--color-border);
}

.brv-s-cta__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
}

.brv-s-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ---------- page header (inner pages) ---------- */

.brv-s-phead {
  padding-block: var(--space-10) var(--space-8);
}

.brv-s-phead__inner {
  max-width: 46rem;
}

/* ---------- generic layout helpers ---------- */

.brv-s-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6) var(--space-8);
}

.brv-s-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.brv-s-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.brv-s-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

.brv-s-scroll {
  overflow-x: auto;
  max-width: 100%;
}
.brv-s-scroll > table {
  width: 100%;
}

/* A bordered region, used where content genuinely needs enclosing: a form
   aside, a specimen, a set of records. Never nested inside another one. */
.brv-s-panel {
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.brv-s-card {
  padding-block: var(--space-5);
  border-top: var(--border-width) solid var(--color-border);
}

.brv-s-card--sunken {
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}

.brv-s-card__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.brv-s-card__text {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
}

.brv-s-aside {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

/* ---------- features page ---------- */

.brv-s-features {
  display: grid;
  gap: var(--space-10);
}

.brv-s-feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}

.brv-s-feature-row--flip > *:first-child {
  order: 2;
}

.brv-s-feature-media {
  display: grid;
  gap: var(--space-3);
  align-content: center;
  min-width: 0;
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}

.brv-s-feature-media > * {
  min-width: 0;
}
.brv-s-feature-media .brv-s-code {
  overflow-x: auto;
}

.brv-s-feature__title {
  margin: var(--space-3) 0 var(--space-2);
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.brv-s-feature__text {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
}

.brv-s-fstep {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding-block: var(--space-3);
  border-bottom: var(--border-width) solid var(--color-border);
}

.brv-s-fstep:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}
.brv-s-fstep:first-of-type {
  padding-top: 0;
}
.brv-s-fstep .brv-s-hint {
  margin: var(--space-1) 0 0;
}

.brv-s-fstep__title {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

/* Tab containers only carry an id; they still need to be allowed to shrink. */
.tabs {
  min-width: 0;
}

/* The one icon treatment left on the site: a specimen marker, not decoration
   beside a heading. */
.brv-s-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-sm);
  border: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
}

.brv-s-icon--info {
  color: var(--color-info);
}

.brv-s-qr {
  display: block;
  width: 10rem;
  height: 10rem;
  margin-inline: auto;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: #fff;
}

.brv-s-role {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
  padding-block: var(--space-2);
}

.brv-s-role__text {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.brv-s-plan__price {
  font-family: var(--font-family-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.brv-s-plan__per {
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
}

/* ---------- steps (deep links page) ---------- */

.brv-s-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.brv-s-steps > * {
  padding: 0 var(--space-5);
  border-left: var(--border-width) solid var(--color-border);
}

.brv-s-steps > *:first-child {
  padding-left: 0;
  border-left: 0;
}

.brv-s-step__num {
  display: block;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  color: var(--color-accent);
}

.brv-s-step__title {
  margin: var(--space-2) 0 var(--space-2);
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.brv-s-step__text {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
}

/* ---------- docs index ---------- */

.brv-s-doc-head {
  margin-bottom: var(--space-4);
  font-size: var(--font-size-2xl);
}

.brv-s-doc {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
  text-decoration: none;
  transition: border-color var(--transition-fast);
}

.brv-s-doc:hover {
  border-top-color: var(--color-accent);
}

.brv-s-doc__name {
  font-family: var(--font-family-display);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.brv-s-doc__blurb {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-text-muted);
}

/* ---------- badges page ---------- */

.brv-s-badge {
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.brv-s-badge__stage {
  display: grid;
  place-items: center;
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
}

.brv-s-badge__stage--dark {
  background: #121a1f;
  border-color: #23303a;
}

.brv-s-badge__name {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.brv-s-badge__note {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.brv-s-badge__code {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-2xs);
  line-height: 1.6;
}

/* ---------- status page ---------- */

.brv-s-status-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-3);
  align-items: center;
  padding-block: var(--space-3);
  border-bottom: var(--border-width) solid var(--color-border-subtle);
}

.brv-s-status-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.brv-s-status-row:first-child {
  padding-top: 0;
}

.brv-s-status-row__name {
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.brv-s-up-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
}

.brv-s-up-head .brv-s-hint {
  margin: 0;
}
.brv-s-up-head + .brv-s-up {
  margin-top: var(--space-3);
}

.brv-s-up__bars {
  display: flex;
  gap: 2px;
  height: 2.25rem;
  overflow: hidden;
}

.brv-s-up__bar {
  flex: 1 1 0;
  min-width: 2px;
  border-radius: 1px;
  background: color-mix(in oklab, var(--color-success) 62%, transparent);
}

.brv-s-up__bar--ok {
  background: color-mix(in oklab, var(--color-success) 62%, transparent);
}
.brv-s-up__bar--warn {
  background: var(--color-warning);
}
.brv-s-up__bar--down {
  background: var(--color-danger);
}

.brv-s-up__scale {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
}

/* ---------- contact and abuse forms ---------- */

.brv-s-channels {
  display: grid;
}

.brv-s-channel {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-3);
  border-bottom: var(--border-width) solid var(--color-border-subtle);
}

.brv-s-channel:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.brv-s-channel:first-child {
  padding-top: 0;
}

.brv-s-channel__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.brv-s-channel__mail {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  color: var(--color-accent);
  text-decoration: none;
}

.brv-s-channel__mail:hover {
  text-decoration: underline;
}

.brv-s-channel__note {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-text-subtle);
}

/* Multi-line choice labels: the control aligns to the first line. */
.brv-s-choices .choice {
  align-items: flex-start;
}
.brv-s-choices .choice__input {
  margin-top: 2px;
}

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

.brv-s-legal {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

.brv-s-legal__toc {
  position: sticky;
  top: var(--space-6);
  display: grid;
  gap: var(--space-3);
  padding-left: var(--space-4);
  border-left: var(--border-width) solid var(--color-border);
}

.brv-s-legal__toc .brv-s-footer__links {
  gap: var(--space-1);
}

.brv-s-legal__body {
  display: grid;
  gap: var(--space-6);
  max-width: 42rem;
}

.brv-s-legal__section {
  scroll-margin-top: 4rem;
}

.brv-s-legal__section .brv-s-h2 {
  margin-bottom: var(--space-3);
  font-size: var(--font-size-xl);
}

.brv-s-legal__p {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
}

.brv-s-legal__p:last-child {
  margin-bottom: 0;
}

.brv-s-legal__list {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-5);
  list-style: disc outside;
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
}

.brv-s-legal__list li {
  margin-bottom: var(--space-2);
}
.brv-s-legal__list li:last-child {
  margin-bottom: 0;
}
.brv-s-legal__list li::marker {
  color: var(--color-accent);
}

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

.brv-s-footer {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
  padding-block: var(--space-8) var(--space-6);
  border-top: var(--border-width) solid var(--color-border);
}

.brv-s-footer__tag {
  margin: var(--space-3) 0 0;
  max-width: 17rem;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-text-subtle);
}

.brv-s-footer__title {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.brv-s-footer__links {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-sm);
}

.brv-s-footer__links a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.brv-s-footer__links a:hover {
  color: var(--color-accent);
}

.brv-s-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0;
  padding-block: var(--space-4);
  border-top: var(--border-width) solid var(--color-border-subtle);
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
}

/* ---------- narrow ---------- */

@media screen and (max-width: 1099px) {
  .brv-s-legal {
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: var(--space-6);
  }
}

@media screen and (max-width: 991px) {
  .brv-s-hero {
    padding-block: var(--space-8);
  }

  .brv-s-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .brv-s-hero__copy,
  .brv-s-hero__form,
  .brv-s-hero__trust,
  .brv-s-xform {
    grid-column: 1;
  }

  .brv-s-xform {
    grid-row: auto;
  }

  .brv-s-lede,
  .brv-s-split,
  .brv-s-band__inner,
  .brv-s-faq,
  .brv-s-feature-row,
  .brv-s-grid--three {
    grid-template-columns: minmax(0, 1fr);
  }

  .brv-s-feature-row--flip > *:first-child {
    order: 0;
  }

  .brv-s-faq__aside {
    position: static;
  }

  .brv-s-features {
    gap: var(--space-8);
  }

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

  .brv-s-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brv-s-fact:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .brv-s-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brv-s-legal {
    grid-template-columns: minmax(0, 1fr);
  }

  .brv-s-legal__toc {
    position: static;
    padding: var(--space-4) 0 0;
    border-left: 0;
    border-top: var(--border-width) solid var(--color-border);
  }
}

@media screen and (max-width: 767px) {
  .brv-s-section {
    padding-block: var(--space-8);
  }
  .brv-s-section--tight {
    padding-block: var(--space-6);
  }
  .brv-s-band,
  .brv-s-cta {
    padding-block: var(--space-8);
  }

  .brv-s-specs,
  .brv-s-figs,
  .brv-s-facts,
  .brv-s-grid,
  .brv-s-grid--two,
  .brv-s-grid--three,
  .brv-s-steps,
  .brv-s-footer {
    grid-template-columns: minmax(0, 1fr);
  }

  .brv-s-fact {
    padding-left: 0;
    border-left: 0;
  }

  /* The full-bleed break-out buys little at phone width and its arithmetic
     depends on the layout's own padding, so it stops here. */
  .brv-s-strip,
  .brv-s-band {
    margin-inline: 0;
  }

  .brv-s-spec:nth-child(2) {
    border-top: var(--border-width) solid var(--color-border);
    padding-top: var(--space-5);
  }

  .brv-s-steps > * {
    padding: var(--space-4) 0 0;
    border-left: 0;
    border-top: var(--border-width) solid var(--color-border);
  }
  .brv-s-steps > *:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .brv-s-up__bars {
    gap: 1px;
    height: 1.75rem;
  }
  .brv-s-up__bar {
    min-width: 1px;
  }

  .brv-s-status-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .brv-s-status-row .brv-c-cell-meta {
    grid-column: 1;
    grid-row: 2;
  }

  .brv-s-role {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }
}

/* ---------- trust: provenance, the link-preview device, the operator ---------- */

.brv-s-fact__s {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-base);
  color: var(--color-text-subtle);
}

.brv-s-fact__s a {
  color: var(--color-text-subtle);
  font-family: var(--font-family-base);
}
.brv-s-fact__s a:hover {
  color: var(--color-accent);
}

/* The + that turns a redirect into a preview. It is a real character in a
   real URL, so it is set in the mono face and never as an icon. */
.brv-s-plus {
  color: var(--color-accent);
  font-weight: var(--font-weight-bold);
}

.brv-s-preview {
  display: grid;
  gap: 0;
  margin-bottom: var(--space-8);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.brv-s-preview__row {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-4) var(--space-5);
  border-top: var(--border-width) solid var(--color-border);
}

.brv-s-preview__row:first-child {
  border-top: 0;
}

.brv-s-preview__label {
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.brv-s-preview__code {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-lg);
  color: var(--color-text);
  word-break: break-all;
}

.brv-s-preview--band {
  margin-bottom: 0;
  border-color: color-mix(in oklab, var(--color-text-inverse) 16%, transparent);
  background: color-mix(in oklab, var(--color-text-inverse) 6%, transparent);
}

.brv-s-preview--band .brv-s-preview__row {
  border-top-color: color-mix(in oklab, var(--color-text-inverse) 16%,
    transparent);
}

.brv-s-preview--band .brv-s-preview__label {
  color: color-mix(in oklab, var(--color-text-inverse) 60%, transparent);
}

.brv-s-preview--band .brv-s-preview__code {
  color: var(--color-text-inverse);
}
.brv-s-preview--band .brv-s-plus {
  color: var(--color-accent-inverse);
}

/* Who runs this service. Sits above the copyright line, on every page. */
.brv-s-op {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-5);
  border-top: var(--border-width) solid var(--color-border-subtle);
}

.brv-s-op__row {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: var(--space-4);
  font-size: var(--font-size-sm);
}

.brv-s-op__k {
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.brv-s-op__v {
  color: var(--color-text-muted);
}
.brv-s-op__v a {
  color: var(--color-accent);
  text-decoration: none;
}
.brv-s-op__v a:hover {
  text-decoration: underline;
}

.brv-s-op__note {
  margin: var(--space-3) 0 0;
  max-width: 44rem;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-subtle);
}

.brv-s-op__note a {
  color: var(--color-accent);
}

/* A plain records table: subprocessors, and anything else with three columns
   of fact per row. */
.brv-s-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.brv-s-table th,
.brv-s-table td {
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  text-align: left;
  vertical-align: baseline;
  border-bottom: var(--border-width) solid var(--color-border-subtle);
}

.brv-s-table thead th {
  padding-top: 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-text-subtle);
  border-bottom-color: var(--color-border-strong);
}

.brv-s-table tbody th {
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.brv-s-table tbody td {
  color: var(--color-text-muted);
}

@media screen and (max-width: 767px) {
  .brv-s-preview__row,
  .brv-s-op__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }
  .brv-s-preview__code {
    font-size: var(--font-size-base);
  }
}