/* brevily website — the app's OWN additions on top of the design's
   files. Everything in assets/{brevily,site}.css is copied verbatim
   from design/demo and must never be hand-edited here: a rule that
   belongs to the design goes into the design and comes back on the next
   export. This file is for what only the app knows.

   Keep it small. Breakpoints are the console's set, and only these:
   768px / 767.98px (phone below), 1024px / 1023.98px, 1280px /
   1279.98px. Tokens only, no shadows on anything that does not float.
   Mirrored byte for byte to design/v3/site-v2.css. */

/* Reveal-on-scroll. site-app.js marks an element `data-brv-revealed`
   as it enters the viewport; until then it waits below its place,
   invisible. The theme's own `.brv-reveal` is a 6px, 260ms rise made
   for list rows — too small to register on a section, so this is the
   same idea at section scale: 24px over the theme's slow duration and
   its ease. Anything not yet marked stays hidden ONLY while scripting
   is available: without JS `[data-brv-revealed]` never appears, so the
   `:not()` here would hide the page. The `.js` class is set by the
   same script. Reduced motion: everything simply shows. */
@keyframes brv-s-rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.js [data-brv-reveal]:not([data-brv-revealed]) {
  opacity: 0;
}

.js [data-brv-revealed] {
  animation: brv-s-rise var(--brv-dur-slow) var(--brv-ease-out) both;
}

/* Marked as already past — scrolled by before the script looked — so it
   shows at once with no motion. */
.js [data-brv-revealed='seen'] {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-brv-reveal]:not([data-brv-revealed]) {
    opacity: 1;
  }
  .js [data-brv-revealed] {
    animation: none;
  }
}

/* The hero card drifts up a little slower than the page (site-app.js
   sets the transform); the hint lets the compositor own it. */
[data-brv-parallax] {
  will-change: transform;
}

/* ================================================================
   W1 — the shared shell (design/v3 WebHome, WebHomePhone, Web404,
   WebDark). Every page, the error pages included, draws the same nav
   and footer (views/layout.ts).
   ================================================================ */

/* ---------- theme switch ---------- */

/* A moon in light mode, a sun in dark: the one that fits shows. The ui
   bundle's [data-theme-toggle] flips the theme and remembers it. */
.brv-s-theme__sun {
  display: none;
}

:root[data-theme='dark'] .brv-s-theme__moon {
  display: none;
}

:root[data-theme='dark'] .brv-s-theme__sun {
  display: inline;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .brv-s-theme__moon {
    display: none;
  }
  :root:not([data-theme='light']) .brv-s-theme__sun {
    display: inline;
  }
}

/* ---------- the phone menu ---------- */

/* A <details>: it opens without script and from the keyboard. Hidden
   from 768px up, where the bar carries the links itself. */
.brv-s-menu {
  display: none;
}

.brv-s-menu > summary {
  list-style: none;
}

.brv-s-menu > summary::-webkit-details-marker {
  display: none;
}

.brv-s-menu__close,
.brv-s-menu[open] .brv-s-menu__open {
  display: none;
}

.brv-s-menu[open] .brv-s-menu__close {
  display: inline;
}

@media screen and (max-width: 767.98px) {
  /* The bar: logo, the CTA and the menu button; the links, "Sign in"
     and the theme switch move into the sheet. */
  .layout__header .navbar {
    gap: var(--space-2);
    padding: calc(var(--space-1) * 1.5) var(--space-2)
      calc(var(--space-1) * 1.5) var(--space-4);
  }

  .layout__header .navbar__nav,
  .layout__header .brv-s-nav__wide {
    display: none;
  }

  .layout__header .navbar__actions {
    gap: var(--space-1);
  }

  .layout__header .navbar__brand .brv-logo {
    width: 6rem;
    height: 1.375rem;
  }

  .brv-s-menu {
    display: block;
  }

  .brv-s-menu__toggle {
    display: inline-flex;
    min-width: var(--control-height-lg);
    min-height: var(--control-height-lg);
  }

  /* The sheet hangs under the sticky header, full width, and scrolls
     inside itself on a short screen. Nothing floats over the page with
     a shadow: a hairline closes it, as the board draws it. */
  .brv-s-menu__sheet {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    display: grid;
    max-height: calc(100svh - 3.5rem);
    overflow-y: auto;
    padding: var(--space-1) var(--space-4) var(--space-4);
    background: var(--color-surface);
    border-bottom: var(--border-width) solid var(--color-border);
  }

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

  .brv-s-menu__links .navbar__link {
    display: flex;
    align-items: center;
    min-height: calc(var(--control-height-lg) + var(--space-1));
    padding-block: 0;
    border-bottom: var(--border-width) solid var(--color-border-subtle);
    font-size: var(--font-size-base);
  }

  .brv-s-menu__foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2);
    margin-top: var(--space-4);
  }

  .brv-s-menu__foot .btn {
    justify-content: center;
    min-height: var(--control-height-lg);
  }

  .brv-s-menu__foot .btn--icon {
    min-width: var(--control-height-lg);
  }

  /* Targets are 44px on a phone. */
  .btn {
    min-height: var(--control-height-lg);
  }

  /* A page's call-to-action pair stacks, full width. */
  .brv-s-cta__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .brv-s-cta__actions .btn {
    justify-content: center;
  }
}

/* ---------- the phone gutter ---------- */

/* The layout pads its content AND every .brv-s-wrap pads again, which
   left 32px at phone width. Below 768px the wrap is the one gutter
   (16px from the token), so the layout's own goes. Every page section
   sits in a .brv-s-wrap; the footer's content does too. */
@media screen and (max-width: 767.98px) {
  .layout--stacked .layout__content,
  .layout--stacked .layout__footer {
    padding-inline: 0;
  }
}

/* The nav already ends in a rule: a page's first section draws none. */
.layout__content > .brv-s-section:first-child {
  border-top: 0;
}

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

/* .layout__footer already draws the rule above the footer: one line,
   not two (the boards'). */
.layout__footer .brv-s-footer {
  border-top: 0;
  padding-top: var(--space-4);
}

.brv-s-footer__base {
  align-items: center;
}

.brv-s-footer__end {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

@media screen and (max-width: 767.98px) {
  .brv-s-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .brv-s-footer > :first-child {
    grid-column: 1 / -1;
  }

  .brv-s-footer__links {
    gap: 0;
  }

  .brv-s-footer__links a {
    display: flex;
    align-items: center;
    min-height: var(--control-height-lg);
  }
}

/* ---------- the dark band ---------- */

/* .brv-s-band is painted with --color-surface-inverse, which dark mode
   turns into a light #eef3f2 slab: the one dark moment of the light
   page became the one bright one of the dark page. In dark mode it is a
   dark, teal-tinted band instead, its text and links the page's own
   (WebDark's proposed fix, kept here since site.css is the design's). */
:root[data-theme='dark'] .brv-s-band {
  background: color-mix(in oklab, var(--color-accent) 7%, var(--color-canvas));
  border-block: var(--border-width) solid var(--color-border);
  --color-text-inverse: var(--color-text);
  --color-accent-inverse: var(--color-accent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .brv-s-band {
    background: color-mix(
      in oklab,
      var(--color-accent) 7%,
      var(--color-canvas)
    );
    border-block: var(--border-width) solid var(--color-border);
    --color-text-inverse: var(--color-text);
    --color-accent-inverse: var(--color-accent);
  }
}

/* ---------- error pages (inside the shell) ---------- */

.brv-s-error {
  border-top: 0;
  padding-block: var(--space-12) var(--space-10);
}

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

.brv-s-error__actions {
  margin-top: var(--space-6);
}

.brv-s-error__card {
  margin-top: var(--space-8);
}

.brv-s-error__host {
  color: var(--color-text);
}

.brv-s-error__preview {
  margin: var(--space-4) 0 0;
  background: var(--color-surface);
}

.brv-s-error__struck {
  color: var(--color-text-subtle);
  text-decoration: line-through;
}

.brv-s-error__id {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
}

/* "Where to go instead": a page per row, its line under it. */
.brv-s-go {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-width) solid var(--color-border);
}

.brv-s-go a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-4);
  align-items: center;
  padding-block: var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
  text-decoration: none;
  color: var(--color-text);
}

.brv-s-go a:hover b,
.brv-s-go a:focus-visible b {
  color: var(--color-accent);
}

.brv-s-go b {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-semibold);
}

.brv-s-go small {
  grid-column: 1;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.brv-s-go svg {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--color-text-subtle);
}

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

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

/* ================================================================
   W2 — home, features and pricing (design/v3 WebHome, WebHomePhone,
   WebDark, WebFeatures, WebPricing, WebPricingPhone). The boards'
   own `wx-*` pieces, under the site's `brv-s-*` names.
   ================================================================ */

/* A domain, a path or a header in running copy. */
.brv-s-mono {
  font-family: var(--font-family-mono);
}

/* A link inside a list or a fact's source reads as prose: the theme's
   `.brv-link` is a one-line mono short link otherwise. */
.brv-s-list .brv-link,
.brv-s-fact__s .brv-link {
  white-space: normal;
  font-family: var(--font-family-base);
}

/* ---------- home: hero and fact strip ---------- */

.brv-s-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* The plans' line sits under the buttons, not pulled up into them. */
.brv-s-hero__copy + .brv-s-hero__trust {
  margin-top: 0;
}

/* The `+` of the strip is the character itself, in the mono face. */
.brv-s-fact__plus {
  font-family: var(--font-family-mono);
  line-height: 1;
}

/* The strip and the band run edge to edge, and their content must line
   up with every other section's. site.css gives the inner .brv-s-wrap a
   max-width and one gutter, which puts it a gutter (or the slack of the
   max-width) left of the sections below 1400px plus two gutters; with no
   max-width and two gutters it lines up at every width (the boards draw
   it so). Below 768px the band and the strip do not bleed, so the wrap's
   one gutter is right there. */
@media screen and (min-width: 768px) {
  .brv-s-strip > .brv-s-wrap,
  .brv-s-band > .brv-s-wrap {
    max-width: none;
    padding-inline: calc(var(--layout-gutter) * 2);
  }
}

/* ---------- plan cards ---------- */

.brv-s-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-5);
}

.brv-s-tier {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

/* The plan a page leads with: a tint and a rule, never raised. */
.brv-s-tier--hot {
  border-color: color-mix(in oklab, var(--color-accent) 45%, transparent);
  background: color-mix(in oklab, var(--color-accent) 4%, var(--color-surface));
}

.brv-s-tier__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}

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

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

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

/* A yearly plan's monthly figure, under its price (the card and the table). */
.brv-s-tier__monthly,
.brv-s-price__monthly {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
}

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

.brv-s-tier .brv-s-list {
  margin: 0;
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-border-subtle);
}

.brv-s-tier__foot {
  display: grid;
  gap: var(--space-2);
  margin-top: auto;
}

.brv-s-tier__foot .btn {
  justify-content: center;
}

/* Free and Enterprise under the paid cards: the way in and the way up,
   side by side on a desktop, stacked on a phone. */
.brv-s-edges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.brv-s-edge {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: var(--border-width) dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken, var(--color-surface));
}

.brv-s-edge__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}

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

.brv-s-edge .brv-s-list {
  margin: 0;
}

/* The comparison's plan picker: drawn on a phone only (below). */
.brv-s-pick {
  display: none;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
}

.brv-s-pick__r {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.brv-s-pick__l {
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-full, 999px);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  cursor: pointer;
}

.brv-s-pick__r:checked + .brv-s-pick__l {
  border-color: var(--color-accent);
  color: var(--color-text);
  background: color-mix(in oklab, var(--color-accent) 8%, var(--color-surface));
}

.brv-s-pick__r:focus-visible + .brv-s-pick__l {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}


/* ---------- the + explained (home, /trust) and the `+` page specimen ----------
   The same link without and with a `+`, then the page the `+` opens
   (views/components.ts `plusExplainer`). Its motion is further down,
   under "Motion". */

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

.brv-s-plusx__ways {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-s-plusx__way {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

/* The row with the `+` is the point: tinted, never raised. */
.brv-s-plusx__way--plus {
  border-color: color-mix(in oklab, var(--color-accent) 45%, transparent);
  background: color-mix(in oklab, var(--color-accent) 5%, var(--color-surface));
}

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

.brv-s-plusx__addr {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  overflow-wrap: anywhere;
}

/* The typed `+`: a little larger than the address, so it is the thing
   the eye lands on. */
.brv-s-plusx__to {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-text-muted);
}

.brv-s-plusx__to svg {
  flex: none;
  margin-top: 0.15em;
  color: var(--color-text-subtle);
}

.brv-s-plusx__to b {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

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

.brv-s-plusx__replay {
  margin-top: var(--space-3);
}

.brv-s-pv__plus {
  display: inline-block;
  color: var(--color-accent);
  font-weight: var(--font-weight-bold);
}

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

.brv-s-points--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--space-10);
}

/* The `+` fact's example, a link to the section that explains it. */
.brv-s-fact__s .brv-s-fact__mono {
  font-family: var(--font-family-mono);
  color: var(--color-text);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.brv-s-fact__s .brv-s-fact__mono:hover {
  color: var(--color-accent);
}

/* ---------- home: "Same job, fewer walls" ----------
   Other shorteners' published plans beside Brevily's (compare.ts). A
   table at desktop width; below 768px each row is a card with its two
   sides labelled (`data-label`). The Brevily column carries the tint. */

.brv-s-vs {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
}

.brv-s-vs thead th {
  padding: 0 var(--space-4) var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  text-align: start;
  color: var(--color-text-subtle);
}

.brv-s-vs thead .brv-s-vs__us {
  color: var(--color-accent);
}

.brv-s-vs tbody th,
.brv-s-vs tbody td {
  padding: var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
  text-align: start;
  vertical-align: top;
}

.brv-s-vs tbody th {
  width: 22%;
  padding-left: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.brv-s-vs__them {
  width: 39%;
  color: var(--color-text-muted);
}

.brv-s-vs .brv-s-vs__us {
  width: 39%;
}

.brv-s-vs tbody .brv-s-vs__us {
  border-left: 2px solid var(--color-accent);
  background: color-mix(in oklab, var(--color-accent) 5%, var(--color-surface));
  color: var(--color-text);
}

.brv-s-vs + .brv-s-hint {
  margin-top: var(--space-4);
}

@media screen and (max-width: 767.98px) {
  .brv-s-vs,
  .brv-s-vs tbody,
  .brv-s-vs tr,
  .brv-s-vs tbody th,
  .brv-s-vs tbody td,
  .brv-s-vs tbody .brv-s-vs__us {
    display: block;
    width: auto;
  }

  .brv-s-vs thead {
    display: none;
  }

  .brv-s-vs tr {
    padding-block: var(--space-4);
    border-top: var(--border-width) solid var(--color-border);
  }

  .brv-s-vs tbody th,
  .brv-s-vs tbody td {
    padding: 0;
    border-top: 0;
  }

  .brv-s-vs tbody td {
    margin-top: var(--space-3);
  }

  .brv-s-vs tbody .brv-s-vs__us {
    padding: var(--space-3) var(--space-4);
  }

  .brv-s-vs tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--font-size-xs);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-text-subtle);
  }

  .brv-s-vs tbody .brv-s-vs__us::before {
    color: var(--color-accent);
  }
}

/* ---------- pricing: "What the price does not hide" ---------- */

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

.brv-s-diff__item {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 2px solid var(--color-accent);
}

.brv-s-diff__item .brv-s-spec__name {
  margin: 0;
  font-size: var(--font-size-base);
}

.brv-s-diff__us,
.brv-s-diff__them {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.brv-s-diff__us {
  color: var(--color-text);
}

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

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

.brv-s-diff + .brv-s-hint {
  margin-top: var(--space-5);
}

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

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

@media screen and (max-width: 767.98px) {
  .brv-s-points--four,
  .brv-s-diff {
    grid-template-columns: minmax(0, 1fr);
  }
}

.brv-s-points .brv-s-spec {
  padding: 0;
  border: 0;
}

.brv-s-points .brv-s-spec__name {
  font-size: var(--font-size-base);
}

/* The edge's `+` page (preview.css's `.brv-p` card), drawn flat under an
   address bar as a specimen: no shadow, no card of its own. */
.brv-s-pv-fig {
  margin: 0;
}

.brv-s-pv {
  overflow: hidden;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  transition: border-color var(--brv-dur-base) var(--brv-ease-out);
}

.brv-s-pv__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
  background: var(--color-surface-alt);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
}

.brv-s-pv__bar b {
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.brv-s-pv .brv-p__card {
  display: grid;
  gap: var(--space-4);
  max-width: none;
  padding: var(--space-5);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: start;
}

.brv-s-pv .brv-p__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}

.brv-s-pv .brv-p__title svg {
  flex: none;
  color: var(--color-accent);
}

.brv-s-pv .brv-p__text {
  margin: 0;
  font-size: var(--font-size-sm);
}

.brv-s-pv .brv-p__facts {
  margin: 0;
  border-top-color: var(--color-border-subtle);
}

.brv-s-pv .brv-p__row {
  padding-block: var(--space-2);
}

.brv-s-pv .brv-p__k {
  font-size: var(--font-size-sm);
  letter-spacing: normal;
  text-transform: none;
}

.brv-s-pv .brv-p__v {
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.brv-s-pv .brv-p__dest {
  font-size: var(--font-size-xs);
}

.brv-s-pv .brv-p__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
}

.brv-s-pv .brv-p__hint {
  margin: 0;
  line-height: var(--line-height-base);
}

.brv-s-pv__caption {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
}

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

/* "On this page": the rows' anchors under the header. */
.brv-s-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-6);
  font-size: var(--font-size-sm);
}

.brv-s-jump a {
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: var(--border-width) solid var(--color-border);
}

.brv-s-jump a:hover,
.brv-s-jump a:focus-visible {
  color: var(--color-accent);
  border-bottom-color: currentColor;
}

/* The plans that have a feature, over its heading. */
.brv-s-ptags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

/* A small records table inside a specimen: DNS records, routing rules. */
.brv-s-rules {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

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

.brv-s-rules thead th {
  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);
  border-bottom-color: var(--color-border-strong);
}

.brv-s-rules .brv-s-rules__m {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.brv-s-rules .brv-s-rules__n {
  color: var(--color-text-subtle);
}

/* A link as the console shows it, drawn as a specimen. */
.brv-s-link {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.brv-s-link--row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.brv-s-link__short {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.brv-s-link__short span {
  color: var(--color-text-subtle);
}

.brv-s-link__dest {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
  overflow-wrap: anywhere;
}

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

.brv-s-kv {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: var(--space-2) var(--space-3);
  margin: 0;
  font-size: var(--font-size-sm);
}

.brv-s-kv dt {
  color: var(--color-text-subtle);
}

.brv-s-kv dd {
  margin: 0;
  color: var(--color-text);
}

/* The analytics specimen fits its panel rather than scrolling in it, so
   it draws smaller than its viewBox: its labels are set larger in the
   chart's own units to stay readable (and dropped on a phone, below). */
.brv-s-feature-media .brv-s-chart {
  min-width: 0;
}

.brv-s-feature-media .brv-s-chart__label {
  font-size: var(--font-size-base);
}

.brv-s-chart-scroll--flush,
.brv-s-legend--flush,
.brv-s-hint--flush {
  margin-top: 0;
}

.brv-s-hint--centre {
  text-align: center;
}

.brv-s-role .badge {
  justify-self: start;
}

/* ---------- pricing: the comparison ---------- */

/* A group's title row ("Links", "Analytics"…), above its rows. */
.brv-s-price .brv-s-price__group th {
  padding-top: var(--space-6);
  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);
  border-bottom: var(--border-width) solid var(--color-border);
}

/* Included: a tick in the accent; not included: a quiet dash. */
.brv-s-yes {
  display: inline-flex;
  vertical-align: -2px;
  color: var(--color-accent);
}

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

/* ---------- pricing: add-ons ---------- */

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

.brv-s-addons {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

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

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

.brv-s-addons td,
.brv-s-addons .brv-s-addons__n {
  padding-left: var(--space-4);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.brv-s-addons thead th {
  padding-top: 0;
  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);
  border-bottom-color: var(--color-border-strong);
}

/* What one pack adds, under the add-on's name. */
.brv-s-addons__what {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
}

/* ---------- W2 below 1024px: one column where two would crowd ---------- */

@media screen and (max-width: 1023.98px) {
  .brv-s-two {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- W2 on a phone (WebHomePhone, WebPricingPhone) ---------- */

@media screen and (max-width: 767.98px) {
  .brv-s-hero__inner {
    gap: var(--space-5);
  }

  /* The hero's buttons stack, full width. */
  .brv-s-hero__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .brv-s-hero__actions .btn {
    justify-content: center;
  }

  /* Four short facts read as two rows of two. */
  .brv-s-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--space-4);
  }

  .brv-s-lede {
    margin-bottom: var(--space-5);
  }

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

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

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

  .brv-s-code {
    font-size: var(--font-size-2xs);
  }

  /* The example chart is a third of its viewBox here: bars and legend
     only, the figures above it carry the numbers. */
  .brv-s-feature-media .brv-s-chart__label {
    display: none;
  }

  /* The comparison shows ONE plan at a time on a phone, picked by the
     chips above it (`:has()`; a browser without it keeps every column,
     fitted as before): the first column is the row's label, the rest
     the plans in the cards' order. */
  .brv-s-pick {
    display: flex;
  }

  @supports selector(:has(a)) {
    .brv-s-price tr > :not(:first-child) {
      display: none;
    }

    .brv-s-scroll:has([data-pick='1']:checked) .brv-s-price tr > :nth-child(2),
    .brv-s-scroll:has([data-pick='2']:checked) .brv-s-price tr > :nth-child(3),
    .brv-s-scroll:has([data-pick='3']:checked) .brv-s-price tr > :nth-child(4),
    .brv-s-scroll:has([data-pick='4']:checked) .brv-s-price tr > :nth-child(5),
    .brv-s-scroll:has([data-pick='5']:checked) .brv-s-price tr > :nth-child(6),
    .brv-s-scroll:has([data-pick='6']:checked) .brv-s-price tr > :nth-child(7) {
      display: table-cell;
    }

    .brv-s-price th[scope='rowgroup'] {
      display: table-cell;
    }
  }

  .brv-s-price {
    min-width: 0;
    font-size: var(--font-size-sm);
  }

  .brv-s-price th,
  .brv-s-price td {
    padding: var(--space-2) calc(var(--space-1) * 1.5);
  }

  .brv-s-price th:first-child,
  .brv-s-price td:first-child {
    padding-left: 0;
  }

  .brv-s-price__name {
    font-size: var(--font-size-sm);
  }

  .brv-s-price__amt {
    font-size: var(--font-size-base);
  }

  .brv-s-price tbody td {
    font-size: var(--font-size-xs);
  }

  .brv-s-price__foot {
    display: none;
  }

  .brv-s-addons th {
    padding-right: var(--space-3);
  }

  /* A plan's cap may take two lines rather than push the page sideways. */
  .brv-s-addons td,
  .brv-s-addons .brv-s-addons__n {
    padding-left: var(--space-2);
    white-space: normal;
  }

  /* A question is a 44px target. */
  .brv-s-faq__list .collapsible__trigger {
    min-height: var(--control-height-lg);
    font-size: var(--font-size-base);
  }
}

/* ================================================================
   W3 — code on the site and the deep links page (design/v3
   WebDeepLinks, WebDeepLinksPhone; the docs moved into the console,
   2026-10-01). The boards' `dl-*` pieces, under the site's `brv-s-*`
   names.
   ================================================================ */

/* Code, everywhere on the site: JetBrains Mono as drawn, never ligated
   (`=>`, `!=` and `://` read as typed). */
.brv-s-code {
  font-variant-ligatures: none;
  font-feature-settings: 'liga' 0, 'calt' 0;
}

.brv-s-code i {
  font-style: normal;
  color: var(--color-text-subtle);
}

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

/* A field, a header or a value in running copy. */
.brv-s-c {
  padding: 1px var(--space-1);
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  font-family: var(--font-family-mono);
  font-size: 0.86em;
  font-variant-ligatures: none;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

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

.brv-s-dl-badge {
  display: inline-flex;
  justify-self: start;
  margin-top: var(--space-4);
}

.brv-s-phead__inner .brv-s-dl-badge {
  width: max-content;
}

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

.brv-s-specs--three .brv-s-spec:nth-child(3) {
  border-top: 0;
  padding-top: 0;
}

/* What a tap does: the steps down the left, the iPhone's page right. */
.brv-s-tap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21.25rem;
  gap: var(--space-10);
  align-items: start;
}

.brv-s-flow {
  display: grid;
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.brv-s-flow li {
  position: relative;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: var(--space-4);
  padding-bottom: var(--space-5);
}

.brv-s-flow li::before {
  content: '';
  position: absolute;
  top: 1.75rem;
  bottom: 0;
  left: calc(0.875rem - 0.75px);
  width: 1.5px;
  background: var(--color-border);
}

.brv-s-flow__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.brv-s-flow__n--on {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

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

.brv-s-flow__x {
  display: block;
  margin-top: 2px;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-text-muted);
}

/* The three ways a counted tap leaves, under the last step. */
.brv-s-branch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-left: calc(1.75rem + var(--space-4));
}

.brv-s-branch__b {
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.brv-s-branch__b h3 {
  margin: 0 0 var(--space-1);
  font-family: var(--font-family-display);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

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

/* The edge's iPhone page as a specimen: its card, flat, in a phone. */
.brv-s-phone-fig {
  margin: 0;
}

.brv-s-phone {
  width: 18.75rem;
  max-width: 100%;
  margin-inline: auto;
  padding: var(--space-3);
  border: 1.5px solid var(--color-border-strong);
  border-radius: calc(var(--radius-lg) * 2.85);
  background: var(--color-surface);
}

.brv-s-phone__screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  min-height: 35rem;
  padding: var(--space-3) var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: calc(var(--radius-lg) * 2.15);
  background: var(--color-canvas);
}

.brv-s-phone__bar {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--control-height-sm);
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.brv-s-phone .brv-p__card {
  margin-block: auto;
  padding: var(--space-5) var(--space-4);
  box-shadow: none;
}

.brv-s-phone .brv-p__title {
  font-size: var(--font-size-xl);
}

.brv-s-phone .brv-p__text {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
}

.brv-s-phone .brv-p__actions .btn {
  justify-content: center;
  pointer-events: none;
}

/* The edge page's accent button, drawn: a specimen, not a control. */
.brv-s-phone__go {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

.brv-s-phone .brv-p__foot {
  justify-content: center;
  text-align: center;
}

.brv-s-phone-fig .brv-s-pv__caption {
  text-align: center;
}

@media screen and (max-width: 1023.98px) {
  .brv-s-tap {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }

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

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

@media screen and (max-width: 767.98px) {
  .brv-s-specs--three {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Stacked steps: each rule sits a step's gap under the text above it. */
  .brv-s-steps {
    row-gap: var(--space-4);
  }

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

  .brv-s-phone {
    width: 17.5rem;
  }

  .brv-s-phone__screen {
    min-height: 31.25rem;
  }
}

/* ================================================================
   W4 — trust, status, questions, contact, report a link, request
   access (design/v3 WebSecurity, WebStatus, WebFaq, WebContact,
   WebReportAbuse, WebRequestAccess and their Phone boards). The
   boards' own `wb-*` / `wq-*` pieces, under the site's `brv-s-*`
   names.
   ================================================================ */

/* ---------- shared pieces ---------- */

/* An inline link in running copy: the accent, underlined (the boards'
   `wb-a`), unlike the theme's mono `.brv-link`. */
.brv-s-inline {
  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);
}

/* A wider stack: a form or a list with a card under it. */
.brv-s-stack--loose {
  gap: var(--space-6);
}

/* An aside's first card sits flush with the column beside it. */
.brv-s-card--first {
  padding-top: 0;
  border-top: 0;
}

/* Facts as label and value (the company panel). */
.brv-s-kv {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  margin: 0;
  font-size: var(--font-size-sm);
}

.brv-s-kv dt {
  padding-top: 2px;
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.brv-s-kv dd {
  margin: 0;
  color: var(--color-text);
}

/* A three-card row with no rule above it (the boards' `wb-three`). */
.brv-s-grid--flat .brv-s-spec {
  padding-top: 0;
  border-top: 0;
}

/* The numbers of a numbered timeline, in the marker. */
.brv-s-numbered .timeline__marker {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
}

/* ---------- trust ---------- */

.brv-s-band__text .brv-s-plus {
  color: var(--color-accent-inverse);
}

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

/* The line over the parts: colour and words, one tone per state. */
.brv-s-state {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
}

.brv-s-state svg {
  flex: none;
}

.brv-s-state small {
  margin-left: auto;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
}

.brv-s-state--ok {
  border-color: color-mix(in oklab, var(--color-success) 35%, transparent);
  background: var(--color-success-soft);
  color: var(--color-success-soft-text);
}

.brv-s-state--warn {
  border-color: color-mix(in oklab, var(--color-warning) 35%, transparent);
  background: var(--color-warning-soft);
  color: var(--color-warning-soft-text);
}

.brv-s-state--down {
  border-color: color-mix(in oklab, var(--color-danger) 35%, transparent);
  background: var(--color-danger-soft);
  color: var(--color-danger-soft-text);
}

/* A part: its row, then its days. */
.brv-s-status__part {
  padding-block: var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border-subtle);
}

.brv-s-status__part:first-child {
  padding-top: 0;
}

.brv-s-status__part .brv-s-status-row {
  padding: 0 0 var(--space-3);
  border: 0;
}

.brv-s-status__what {
  margin-left: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
}

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

.brv-s-status__bars {
  height: 1.75rem;
}

/* A day the console holds no record of: never drawn as working. */
.brv-s-up__bar--none {
  background: var(--color-border);
}

.brv-s-status__scale {
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
}

.brv-s-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-text-muted);
}

.brv-s-legend__key {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-radius: 2px;
  vertical-align: -1px;
}

/* An incident's updates, newest first, under its line. */
.brv-s-incident__updates {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

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

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

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

.brv-s-incidents .timeline__title .badge {
  margin-left: var(--space-2);
}

/* ---------- questions ---------- */

.brv-s-find {
  display: grid;
  gap: var(--space-4);
  max-width: 46rem;
  margin-top: var(--space-6);
}

.brv-s-find__box .input {
  height: var(--space-8);
  padding-inline-start: calc(var(--space-8) - var(--space-1));
  font-size: var(--font-size-lg);
}

.brv-s-find__box .input-icon__glyph {
  inset-inline-start: var(--space-3);
}

/* Shown by site-app.js, which does the filtering; hidden without it. The
   kit's `.input-icon` is a flex box, so `hidden` needs saying here. */
.brv-s-find__box[hidden],
.brv-s-topic[hidden],
[data-brv-faq-q][hidden],
[data-brv-faq-group][hidden],
[data-brv-faq-none][hidden] {
  display: none;
}

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

.brv-s-topic {
  min-height: var(--control-height-md);
  padding: 0 var(--space-3);
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.brv-s-topic__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--color-surface-sunken);
  color: var(--color-text-subtle);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* The header's search and topics end in a rule over the first group,
   which keeps a section's breathing room under it. */
.brv-s-phead + [data-brv-faq-group] {
  padding-top: var(--space-8);
  border-top: var(--border-width) solid var(--color-border-subtle);
}

@media screen and (max-width: 767.98px) {
  .brv-s-phead + [data-brv-faq-group] {
    padding-top: var(--space-6);
  }
}

.brv-s-faq__list .brv-s-q .collapsible__panel {
  padding-bottom: var(--space-5);
}

.brv-s-faq__list .brv-s-q .collapsible__panel p {
  max-width: 40rem;
}

.brv-s-q__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-3);
  color: var(--color-text-subtle);
  font-size: var(--font-size-xs);
  text-decoration: none;
}

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

/* An address in the closing line. */
.brv-s-mail {
  color: var(--color-accent);
  font-family: var(--font-family-mono);
  font-size: 0.94em;
  text-decoration: none;
}

/* ---------- contact ---------- */

.brv-s-inboxes .brv-s-channel {
  gap: var(--space-2);
  padding-block: var(--space-5);
}

.brv-s-inboxes .brv-s-channel:first-child {
  padding-top: 0;
}

.brv-s-inboxes .brv-s-channel__label {
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
}

.brv-s-inboxes .brv-s-channel__mail {
  font-size: var(--font-size-base);
}

/* ---------- report a link ---------- */

.brv-s-start .input {
  font-family: var(--font-family-mono);
}

.brv-s-start__actions {
  justify-content: flex-start;
  margin-top: var(--space-4);
}

.brv-s-hint .brv-s-mono {
  color: var(--color-text-muted);
}

/* The form's reasons: the name left, what it covers right. */
.brv-s-reasons {
  display: grid;
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.brv-s-reasons li {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-top: var(--border-width) solid var(--color-border-subtle);
  font-size: var(--font-size-sm);
}

.brv-s-reasons li:first-child {
  padding-top: 0;
  border-top: 0;
}

.brv-s-reasons b {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.brv-s-reasons span {
  color: var(--color-text-muted);
}

.brv-s-reasons__after {
  margin-top: var(--space-4);
}

/* A report's reference, whole. */
.brv-s-ref {
  white-space: nowrap;
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

/* ---------- request access ---------- */

.brv-s-raform__banner {
  margin-bottom: var(--space-5);
}

.brv-s-raform[aria-busy='true'] {
  opacity: 0.7;
}

/* A fieldset is a form field like any other: no frame of its own. */
.brv-s-raform__set {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.brv-s-raform__set > legend {
  padding: 0;
}

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

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

.brv-s-opt {
  margin-inline-start: var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-subtle);
}

.brv-s-raform__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* The honeypot: out of sight and out of the tab order, there for a bot
   to fill. */
.brv-s-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Once the console took the request: what happens now. */
.brv-s-received {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
}

.brv-s-received:focus {
  outline: none;
}

.brv-s-received__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  margin-bottom: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-success-soft);
  color: var(--color-success-soft-text);
}

.brv-s-received .brv-s-card__title {
  margin: 0;
}

/* What it will cost: a box per plan. */
.brv-s-prices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
}

.brv-s-prices > div {
  display: grid;
  gap: 2px;
  padding: var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.brv-s-prices b {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.brv-s-prices span {
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.brv-s-prices small {
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
}

/* ---------- W4 on a phone (the Phone boards) ---------- */

@media screen and (max-width: 767.98px) {
  /* Three cards stack, a rule between each. */
  .brv-s-grid--flat {
    gap: 0;
  }

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

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

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

  .brv-s-kv dd {
    margin-bottom: var(--space-2);
  }

  .brv-s-state {
    flex-wrap: wrap;
  }

  .brv-s-state small {
    flex-basis: 100%;
    margin-left: 0;
  }

  .brv-s-status__part .brv-s-status-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .brv-s-status__meta {
    grid-column: 1;
    grid-row: 2;
  }

  .brv-s-status__what {
    display: block;
    margin: 0;
  }

  .brv-s-status__part .brv-s-status__bars {
    gap: 1px;
  }

  /* The legend takes its own line under the scale's two ends. */
  .brv-s-status__scale .brv-s-legend {
    order: 3;
    flex-basis: 100%;
    gap: var(--space-2) var(--space-4);
  }

  .brv-s-find {
    margin-top: var(--space-5);
  }

  /* The topics scroll sideways rather than wrap into three rows. */
  .brv-s-topics {
    flex-wrap: nowrap;
    margin-inline: calc(var(--layout-gutter) * -1);
    padding-inline: var(--layout-gutter);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .brv-s-topic {
    flex: none;
    min-height: calc(var(--control-height-lg) + var(--space-1));
  }

  .brv-s-q__link {
    min-height: calc(var(--control-height-lg) + var(--space-1));
    margin-top: 0;
  }

  .brv-s-faq__list .brv-s-q .collapsible__trigger {
    min-height: calc(var(--space-8) + var(--space-2));
    font-size: 1rem;
    line-height: 1.35;
  }

  .brv-s-faq__aside .brv-s-hint {
    margin-top: var(--space-1);
  }

  .brv-s-reasons li {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  /* Forms: one field a row, 44px controls, 16px text so a phone does not
     zoom into a field. */
  .brv-s-raform .form-grid > .form-grid__col-6 {
    grid-column: span 12;
  }

  .brv-s-raform .input,
  .brv-s-raform .select__native,
  .brv-s-raform .combobox__field,
  .brv-s-start .input {
    height: calc(var(--control-height-lg) + var(--space-1));
    font-size: 1rem;
  }

  .brv-s-raform .textarea {
    height: auto;
  }

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

  .brv-s-raform .choice {
    min-height: calc(var(--control-height-lg) + var(--space-1));
  }

  .brv-s-raform__actions .btn,
  .brv-s-start__actions .btn {
    flex: 1 1 100%;
    justify-content: center;
  }

  .brv-s-prices {
    gap: var(--space-2);
  }

  .brv-s-prices span {
    font-size: var(--font-size-lg);
  }
}

/* ── W6 essentials ── */

/* The phone menu's sheet: the viewport's width exactly — pinned to the
   bar's two edges, never wider than the screen whatever sits inside it,
   nothing inside scrolling it sideways — and clear of a notch and the
   home indicator (`env()` is 0 until the page draws under them). Closed,
   it is not laid out at all: a closed <details> contains its content
   (`content-visibility: hidden`), which squeezed the sheet into the 42px
   button and pushed its links and buttons past the screen's edge. */
.brv-s-menu:not([open]) .brv-s-menu__sheet {
  display: none;
}

@media screen and (max-width: 767.98px) {
  .brv-s-menu__sheet {
    inset-inline: 0;
    box-sizing: border-box;
    width: auto;
    max-width: 100%;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding-inline: max(var(--space-4), env(safe-area-inset-left, 0px))
      max(var(--space-4), env(safe-area-inset-right, 0px));
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  }

  .brv-s-menu__links,
  .brv-s-menu__foot {
    min-width: 0;
  }

  .brv-s-menu__links .navbar__link {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* ================================================================
   W5 — the legal pages (design/v3 WebLegal, WebLegalPhone,
   WebLegalRefunds). The boards' `wl-*` pieces, under the site's
   `brv-s-l*` names, over the theme's `brv-s-legal*` (site.css).
   ================================================================ */

/* ---------- the header: the date, the operator, the six pages ---------- */

.brv-s-lmeta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: var(--space-4) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
}

/* The tab row: scrolls inside itself when six names do not fit, never
   the page. */
.brv-s-ltabs {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-8);
  border-bottom: var(--border-width) solid var(--color-border);
  overflow-x: auto;
  scrollbar-width: none;
}

.brv-s-ltabs a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height-lg);
  margin-bottom: calc(var(--border-width) * -1);
  padding: 0 var(--space-3);
  border-bottom: var(--border-width-thick) solid transparent;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
}

.brv-s-ltabs a:hover {
  color: var(--color-text);
}

.brv-s-ltabs a[aria-current='page'] {
  color: var(--color-text);
  border-bottom-color: var(--color-text);
}

.brv-s-ltabs a:focus-visible,
.brv-s-lpick__button:focus-visible,
.brv-s-ltoc__button:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: -2px;
}

/* The phone's "Legal page" picker: a <details>, so it opens without
   script; its list hangs under the button over the page, closed by a
   hairline (nothing floats with a shadow). Shown below 768px. */
.brv-s-lpick {
  display: none;
  margin-top: var(--space-6);
}

.brv-s-lpick__k {
  margin: 0 0 var(--space-2);
  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-lpick__menu {
  position: relative;
}

.brv-s-lpick__menu > summary,
.brv-s-ltoc > summary {
  list-style: none;
}

.brv-s-lpick__menu > summary::-webkit-details-marker,
.brv-s-ltoc > summary::-webkit-details-marker {
  display: none;
}

.brv-s-lpick__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: calc(var(--control-height-lg) + var(--space-1));
  padding: 0 var(--space-4);
  border: var(--border-width) solid var(--color-border-control);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  cursor: pointer;
}

.brv-s-lpick__chev,
.brv-s-ltoc__chev {
  display: inline-flex;
  flex: none;
  color: var(--color-text-subtle);
  transition: transform var(--transition-fast);
}

.brv-s-lpick__menu[open] .brv-s-lpick__chev,
.brv-s-ltoc[open] .brv-s-ltoc__chev {
  transform: rotate(180deg);
}

.brv-s-lpick__sheet {
  position: absolute;
  top: calc(100% + var(--space-1));
  inset-inline: 0;
  z-index: var(--z-dropdown);
  display: grid;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.brv-s-lpick__sheet a {
  display: flex;
  align-items: center;
  min-height: var(--control-height-lg);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  color: var(--color-text);
  text-decoration: none;
}

.brv-s-lpick__sheet a:hover {
  background: var(--color-surface-alt);
}

.brv-s-lpick__sheet a[aria-current='page'] {
  font-weight: var(--font-weight-semibold);
  background: var(--color-surface-alt);
}

/* ---------- "On this page" ---------- */

/* The section in view (site-app.js), as the board marks it: bold, with
   a bar on the list's own rule. */
.brv-s-legal__toc a[aria-current='true'] {
  position: relative;
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

.brv-s-legal__toc a[aria-current='true']::before {
  content: '';
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: calc(var(--space-4) * -1 - var(--border-width));
  width: var(--border-width-thick);
  background: var(--color-text);
}

.brv-s-legal__toc .brv-s-hint a {
  color: var(--color-accent);
  text-decoration: none;
}

/* Below 1024px the contents fold into a closed panel over the text. A
   <details>, so it opens without script. */
.brv-s-ltoc {
  display: none;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}

.brv-s-ltoc__button {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: calc(var(--control-height-lg) + var(--space-1));
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  cursor: pointer;
}

.brv-s-ltoc__n {
  margin-left: auto;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-subtle);
}

.brv-s-ltoc__list {
  display: grid;
  margin: 0;
  padding: var(--space-1) var(--space-4) var(--space-3);
  list-style: none;
  border-top: var(--border-width) solid var(--color-border-subtle);
}

.brv-s-ltoc__list a {
  display: flex;
  align-items: center;
  min-height: var(--control-height-lg);
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  text-decoration: none;
}

/* ---------- the body ---------- */

/* The board's measure for the text. */
.brv-s-lpage .brv-s-legal__body {
  max-width: 44rem;
}

/* The read-with line that opens every page: quieter than the text. */
.brv-s-legal__body > .brv-s-legal__p:first-child > em {
  font-size: var(--font-size-sm);
  font-style: normal;
  color: var(--color-text-subtle);
}

.brv-s-legal__body .brv-s-legal__p a,
.brv-s-legal__body .brv-s-legal__list a,
.brv-s-legal__body .brv-s-table a,
.brv-s-lnote a {
  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-legal__p strong,
.brv-s-legal__list strong {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.brv-s-legal__body .brv-s-mono {
  font-size: 0.92em;
  color: var(--color-text);
}

.brv-s-legal__body .brv-s-scroll {
  margin-bottom: var(--space-3);
}

.brv-s-legal__body .brv-s-table td {
  vertical-align: top;
}

.brv-s-legal__body .brv-s-table td:first-child {
  color: var(--color-text);
}

/* The lead note (Refunds' "The short version") and the operator panel
   take an anchor of their own; the sticky bar must not cover them. */
.brv-s-lnote,
.brv-s-lop {
  scroll-margin-top: 4rem;
}

.brv-s-lnote .alert__text {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
}

.brv-s-lnote .alert__text strong {
  font-weight: var(--font-weight-semibold);
}

/* "Who runs Brevily": the label column of the board. */
.brv-s-lop .brv-s-kv {
  grid-template-columns: 8rem minmax(0, 1fr);
}

.brv-s-lop .brv-s-kv a {
  color: var(--color-accent);
  text-decoration: none;
}

/* ---------- below 1024px: one column, the contents folded ---------- */

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

  .brv-s-lpage .brv-s-ltoc-side {
    display: none;
  }

  .brv-s-ltoc {
    display: block;
  }
}

/* ---------- on a phone (WebLegalPhone) ---------- */

@media screen and (max-width: 767.98px) {
  .brv-s-ltabs {
    display: none;
  }

  .brv-s-lpick {
    display: block;
  }

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

  .brv-s-lmeta {
    font-size: var(--font-size-xs);
  }

  .brv-s-lpage .brv-s-legal__body {
    gap: var(--space-5);
  }

  .brv-s-lop {
    padding: var(--space-4);
  }

  .brv-s-lop .brv-s-kv {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .brv-s-lop .brv-s-kv dd {
    margin-bottom: var(--space-2);
  }

  .brv-s-legal__section .brv-s-h2 {
    font-size: 1.25rem;
  }
}

/* ── Final phone and dark pass ── */

/* Native parts follow the theme: checkboxes, radios, a select's list and
   the scrollbars of the code blocks were drawn light on the dark page
   (the kit sets no color-scheme). */
:root[data-theme='dark'] {
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
  }
}

/* The analytics specimen sits beside its text from 1024px, drawn at
   about half its viewBox: its labels in the chart's units are set so a
   1440px page reads them at 11px or more (they fit under the axis). */
@media screen and (min-width: 1024px) {
  .brv-s-feature-media .brv-s-chart__label {
    font-size: var(--font-size-xl);
  }
}

/* Between 1024 and 1280px that column is narrower (the chart draws at
   about 377px at 1024, 489px at 1279), so the 1440px size would read
   near 9px. The size grows as the page narrows, in a straight line from
   24.4 chart units at 1024 to the 19 above at 1280: on the chart, from
   11.3px at 1024 to 11.4px at 1279, never under 11px between them (the
   line stays above the curve the 11px floor draws, with room for a
   15px scrollbar). The day labels' baseline (Features.views.ts) clears
   the axis at this size. */
@media screen and (min-width: 1024px) and (max-width: 1279.98px) {
  .brv-s-feature-media .brv-s-chart__label {
    font-size: max(var(--font-size-xl), calc(46.5px - 2.157vw));
  }
}

/* A cookie's name and a column's name stay whole where the table has
   room for them. */
.brv-s-legal__body .brv-s-table td:first-child .brv-s-mono,
.brv-s-legal__body .brv-s-table thead th {
  white-space: nowrap;
}

@media screen and (max-width: 767.98px) {
  /* Targets are 44px on a phone: the logo and the footer's theme switch
     take the control height, as every button there does. */
  .layout__header .navbar__brand {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-height-lg);
  }

  .brv-s-footer__end .btn--icon {
    min-width: var(--control-height-lg);
  }

  /* A link drawn small keeps its look and its place; its ::after reaches
     past the text to a finger's size (Chrome hit-tests it as the link). */
  .brv-s-jump a,
  .brv-s-channel__mail {
    position: relative;
  }

  .brv-s-jump a::after,
  .brv-s-channel__mail::after {
    content: '';
    position: absolute;
    inset: calc(var(--space-3) * -1) calc(var(--space-2) * -1);
  }

  /* The jump links' rows sit far enough apart that two reaches never
     overlap. */
  .brv-s-jump {
    row-gap: var(--space-5);
  }

  /* A link alone on its line (an inline box: padding moves no text, it
     only widens what a tap finds). */
  .brv-s-after a:only-child,
  .brv-s-fact__s a:only-child,
  .brv-s-lop .brv-s-kv a {
    padding-block: var(--space-4);
  }

  /* A choice's 46px row (W4) held its words at the top, so a radio sat
     against its question and far from the next one: the words sit in
     the middle of the row, the box still on their first line. */
  .brv-s-raform .choice {
    padding-block: var(--space-3);
  }

  

  /* The cookie tables: a row each, the name first, then what it does and
     how long, each under its column's name (legalDoc.ts writes it on the
     cell), so nothing is squeezed into a narrow column. */
  .brv-s-legal__body .brv-s-table thead {
    display: none;
  }

  .brv-s-legal__body .brv-s-table,
  .brv-s-legal__body .brv-s-table tbody,
  .brv-s-legal__body .brv-s-table tr,
  .brv-s-legal__body .brv-s-table td {
    display: block;
  }

  .brv-s-legal__body .brv-s-table tr {
    display: grid;
    gap: var(--space-2);
    padding-block: var(--space-4);
    border-bottom: var(--border-width) solid var(--color-border-subtle);
  }

  .brv-s-legal__body .brv-s-table tr:first-child {
    border-top: var(--border-width) solid var(--color-border-strong);
  }

  .brv-s-legal__body .brv-s-table td {
    padding: 0;
    border: 0;
  }

  .brv-s-legal__body .brv-s-table td:first-child .brv-s-mono {
    white-space: normal;
  }

  .brv-s-legal__body .brv-s-table td[data-label]:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    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);
  }

  /* The DNS records specimen: the type beside the name, the value under
     the name, so neither breaks inside a word. */
  .brv-s-rules--dns,
  .brv-s-rules--dns thead,
  .brv-s-rules--dns tbody {
    display: block;
  }

  .brv-s-rules--dns tr {
    display: grid;
    grid-template-columns: var(--space-8) minmax(0, 1fr);
    gap: var(--space-1) var(--space-3);
    padding-block: var(--space-2);
    border-bottom: var(--border-width) solid var(--color-border-subtle);
  }

  .brv-s-rules--dns thead tr {
    padding-top: 0;
    border-bottom-color: var(--color-border-strong);
  }

  .brv-s-rules--dns th,
  .brv-s-rules--dns td {
    display: block;
    padding: 0;
    border: 0;
  }

  .brv-s-rules--dns :is(th, td):nth-child(3) {
    grid-column: 2;
  }
}

/* ================================================================
   Motion. Three pieces, each showing the product rather than
   decorating the page:

   1. The hero types the long address piece by piece, strikes it
      through, keeps the back-half, and the short link lands. CSS only,
      so it never waits for a script.
   2. The `+` explained: the two rows rise, the `+` is typed, then the
      preview page fills in. It plays as it scrolls into view, and again
      when the `+` is clicked (site-app.js `initPlus`). It is drawn
      VISIBLE until the script arms it just before it comes into view.
   3. The comparison's rows rise in turn (the page's reveal-on-scroll).

   Every rule sits under `prefers-reduced-motion: no-preference`, and
   nothing is hidden until a script has run: with reduced motion, or
   without script, the page is drawn as it ends. Only opacity, transforms,
   clip-path and colours move, so nothing shifts the layout.
   ================================================================ */

/* The pieces of the hero's address (Home.views.ts `typedUrl`) wrap
   between pieces, never inside one, and each carries its own strike:
   a text decoration does not reach into an inline-block. The kept
   back-half is not struck and takes the accent. */
.brv-s-xform__from {
  word-break: normal;
  text-decoration: none;
}

.brv-s-type,
.brv-s-type__cut {
  display: inline-block;
  text-decoration: line-through;
  text-decoration-color: color-mix(in oklab, var(--color-text-subtle) 45%,
    transparent);
}

.brv-s-type--keep {
  text-decoration: none;
}

.brv-s-type__keep {
  color: var(--color-accent);
  font-weight: var(--font-weight-semibold);
}

@keyframes brv-s-type {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0);
  }
}

@keyframes brv-s-cut {
  from {
    color: var(--color-text);
    text-decoration-color: transparent;
  }
}

@keyframes brv-s-keep {
  from {
    color: var(--color-text);
  }
}

@keyframes brv-s-key {
  0% {
    opacity: 0;
    transform: translateY(-0.35em) scale(0.4);
  }
  60% {
    opacity: 1;
    transform: scale(1.45);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes brv-s-fade {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* 1 · The hero. The copy rises as the page arrives. */
  .brv-s-hero__copy,
  .brv-s-hero__trust {
    animation: brv-s-rise var(--brv-dur-slow) var(--brv-ease-out) backwards;
  }

  .brv-s-hero__trust {
    animation-delay: 120ms;
  }

  /* Each piece of the address is typed, 130ms after the one before. */
  .brv-s-type {
    animation: brv-s-type 120ms steps(7, end) backwards,
      brv-s-cut 420ms var(--brv-ease-out) 1500ms backwards;
  }

  .brv-s-type:nth-child(2) {
    animation-delay: 330ms, 1500ms;
  }
  .brv-s-type:nth-child(3) {
    animation-delay: 460ms, 1500ms;
  }
  .brv-s-type:nth-child(4) {
    animation-delay: 590ms, 1500ms;
  }
  .brv-s-type:nth-child(5) {
    animation-delay: 720ms, 1500ms;
  }
  .brv-s-type:nth-child(6) {
    animation-delay: 850ms, 1500ms;
  }
  .brv-s-type:nth-child(7) {
    animation-delay: 980ms, 1500ms;
  }
  .brv-s-type:nth-child(8) {
    animation-delay: 1110ms, 1500ms;
  }
  .brv-s-type:nth-child(n + 9) {
    animation-delay: 1240ms, 1500ms;
  }
  .brv-s-type:first-child {
    animation-delay: 200ms, 1500ms;
  }

  /* Then the strike, while the back-half turns to the accent... */
  .brv-s-type__cut {
    animation: brv-s-cut 420ms var(--brv-ease-out) 1500ms backwards;
  }

  .brv-s-type__keep {
    animation: brv-s-keep 420ms var(--brv-ease-out) 1500ms backwards;
  }

  /* ...and the short link lands under it (site.css draws these; only
     their moment moves). */
  .brv-s-xform__from {
    animation: none;
  }

  .brv-s-xform__to {
    animation-delay: 1750ms;
  }

  .brv-s-xform__link .brv-s-xform__slug {
    animation-delay: 1950ms;
  }

  .brv-s-xform__note {
    animation-delay: 2150ms;
  }

  /* 2 · The `+` explained. VISIBLE BY DEFAULT: nothing here hides the
     rows or the card until site-app.js has run AND the block is about
     to scroll into view. Then `data-brv-plus="armed"` sets the start
     state (off screen, so no one sees it vanish), and "play" runs the
     animations, whose backwards fill starts from that state and ends on
     the element's own style. A replay goes armed → play again. Without
     script, or with reduced motion, no rule here applies. */
  [data-brv-plus='armed'] :is(
      .brv-s-plusx__way,
      .brv-s-plusx__to,
      .brv-s-plusx__note,
      .brv-s-plusx__hint,
      .brv-p__card > *,
      .brv-s-pv__caption
    ) {
    opacity: 0;
  }

  [data-brv-plus='armed'] :is(.brv-s-plusx__key, .brv-s-pv__plus) {
    opacity: 0;
    transform: scale(0.4);
  }

  [data-brv-plus='play'] .brv-s-plusx__way {
    animation: brv-s-rise var(--brv-dur-slow) var(--brv-ease-out) backwards;
  }

  [data-brv-plus='play'] .brv-s-plusx__way--plus {
    animation-delay: 300ms;
  }

  [data-brv-plus='play'] .brv-s-plusx__to {
    animation: brv-s-fade var(--brv-dur-slow) var(--brv-ease-out) 350ms
      backwards;
  }

  [data-brv-plus='play'] .brv-s-plusx__way--plus .brv-s-plusx__to {
    animation-delay: 1100ms;
  }

  [data-brv-plus='play'] .brv-s-plusx__key {
    animation: brv-s-key 460ms var(--brv-ease-spring) 800ms backwards;
  }

  [data-brv-plus='play'] :is(.brv-s-plusx__note, .brv-s-plusx__hint) {
    animation: brv-s-fade var(--brv-dur-slow) var(--brv-ease-out) 1300ms
      backwards;
  }

  /* The page itself: the `+` arrives in its address bar, then the card
     fills in, top to bottom. */
  [data-brv-plus='play'] .brv-s-pv__plus {
    animation: brv-s-key 460ms var(--brv-ease-spring) 500ms backwards;
  }

  [data-brv-plus='play'] :is(.brv-p__card > *, .brv-s-pv__caption) {
    animation: brv-s-rise var(--brv-dur-slow) var(--brv-ease-out) backwards;
  }

  [data-brv-plus='play'] .brv-p__title {
    animation-delay: 850ms;
  }
  [data-brv-plus='play'] .brv-p__text {
    animation-delay: 1000ms;
  }
  [data-brv-plus='play'] .brv-p__facts {
    animation-name: brv-s-fade;
    animation-delay: 1150ms;
  }
  [data-brv-plus='play'] .brv-p__actions {
    animation-delay: 1500ms;
  }
  [data-brv-plus='play'] .brv-p__hint {
    animation-delay: 1650ms;
  }
  [data-brv-plus='play'] .brv-s-pv__caption {
    animation-delay: 1750ms;
  }

  /* The `+` invites a click: a soft ring goes out from it now and then. */
  .brv-s-plusx__key::after {
    animation: brv-s-ring 3.2s var(--brv-ease-out) 2.4s infinite;
  }
}

@keyframes brv-s-ring {
  0% {
    opacity: 0.55;
    transform: scale(0.6);
  }
  45%,
  100% {
    opacity: 0;
    transform: scale(1.9);
  }
}

/* The `+` as a control: a link to the preview card (it works without
   script); site-app.js makes a click, Enter or Space replay the card.
   Hovering or focusing it, or the row it sits in, lights the row and the
   card: colour only, so it holds with reduced motion too. */
/* Set tight against the address, as a + typed into it is; the hit area
   (::before) reaches 44px around it without moving a character. */
.brv-s-plusx__key {
  position: relative;
  display: inline-block;
  padding: 0 0.08em;
  border-radius: 6px;
  font-size: 1.2em;
  line-height: 1;
  color: var(--color-accent);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--brv-dur-quick) var(--brv-ease-out);
}

.brv-s-plusx__key::before {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.brv-s-plusx__key::after {
  content: '';
  position: absolute;
  inset: -0.12em -0.04em;
  border: 2px solid var(--color-accent);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
}

.brv-s-plusx__key:hover,
.brv-s-plusx__key:focus-visible {
  background: color-mix(in oklab, var(--color-accent) 16%, transparent);
}

.brv-s-plusx__key:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.brv-s-plusx:has(.brv-s-plusx__way--plus:hover, .brv-s-plusx__key:focus-visible)
  .brv-s-plusx__way--plus,
.brv-s-plusx:has(.brv-s-plusx__way--plus:hover, .brv-s-plusx__key:focus-visible)
  .brv-s-pv {
  border-color: var(--color-accent);
}

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

/* ── Takeaways, the three columns, the + in steps (home; the steps on
   /trust too). Tokens only; motion under the theme's durations and off
   with reduced motion, as everything above. ── */

.brv-s-take {
  position: relative;
  padding-top: var(--space-5);
}

.brv-s-take__n {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: var(--space-3);
  border-radius: 999px;
  background: var(--color-accent-soft, var(--color-surface-sunken));
  color: var(--color-accent);
  font: 600 var(--text-sm) / 1 var(--font-sans);
}

.brv-s-take__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

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

.brv-s-cover__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.brv-s-cover__kicker {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.brv-s-cover__title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.2;
}

.brv-s-cover__price {
  margin: 0;
  color: var(--color-accent);
  font-weight: 600;
}

.brv-s-cover__col .brv-s-list {
  flex: 1;
  margin: 0;
}

.brv-s-cover__not {
  margin: 0;
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.brv-s-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
  counter-reset: brv-step;
}

.brv-s-step {
  position: relative;
  padding: var(--space-4) 0 0;
  border-top: 2px solid var(--color-border);
}

.brv-s-step__n {
  position: absolute;
  top: -14px;
  left: 0;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-on-accent, #fff);
  font: 700 var(--text-xs) / 1 var(--font-sans);
}

.brv-s-step__title {
  margin: var(--space-2) 0 var(--space-1);
  font-size: var(--text-md);
  font-weight: 700;
}

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

.brv-s-steps__note {
  margin: 0 0 var(--space-6);
  color: var(--color-text-muted);
}

.brv-s-steps__note strong {
  color: var(--color-text);
}

.brv-s-footer__made {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong, var(--color-border));
  text-underline-offset: 2px;
}

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

@media (max-width: 1023.98px) {
  .brv-s-cover,
  .brv-s-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .brv-s-cover,
  .brv-s-steps {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── A little more motion (feedback, 2026-10-03): cards and columns lift
   a touch on hover, a figure counts up as it is revealed (site-app.js,
   `data-brv-count`), and the step numbers pop in after their row. All of
   it only where motion is welcome. ── */
@media (prefers-reduced-motion: no-preference) {
  .brv-s-spec,
  .brv-s-cover__col,
  .brv-s-tier,
  .brv-s-fact {
    transition:
      transform var(--brv-dur-base) var(--brv-ease-out),
      border-color var(--brv-dur-base) var(--brv-ease-out);
  }

  .brv-s-cover__col:hover,
  .brv-s-tier:hover {
    transform: translateY(-3px);
    border-color: var(--color-border-strong, var(--color-accent));
  }

  .brv-s-spec:hover .brv-s-spec__name,
  .brv-s-fact:hover .brv-s-fact__n {
    color: var(--color-accent);
    transition: color var(--brv-dur-quick) var(--brv-ease-out);
  }

  @keyframes brv-s-pop {
    from {
      transform: scale(0.4);
      opacity: 0;
    }
    to {
      transform: none;
      opacity: 1;
    }
  }

  .js [data-brv-revealed]:not([data-brv-revealed='seen']) .brv-s-step__n,
  .js [data-brv-revealed]:not([data-brv-revealed='seen']) .brv-s-take__n {
    animation: brv-s-pop 420ms var(--brv-ease-spring) 260ms backwards;
  }

  [data-brv-count] {
    font-variant-numeric: tabular-nums;
  }
}

/* An offer to new customers (liveOffers.ts): the list price struck
   through beside the offer's price, and one line saying what it is. */
.brv-s-was {
  font-size: var(--font-size-base);
  color: var(--color-text-subtle);
}

.brv-s-price__was {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
}

.brv-s-offer {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-success-soft-text);
}

/* An offer's ribbon across the plan card's top right corner ("20% off");
   the offer line under the price says it in full, so screen readers skip
   it. */
.brv-s-tier--ribbon {
  position: relative;
  overflow: hidden;
}

.brv-s-ribbon {
  position: absolute;
  top: 18px;
  right: -46px;
  width: 168px;
  padding: var(--space-1) 0;
  transform: rotate(45deg);
  text-align: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
  color: var(--color-success-contrast);
  background: var(--color-success);
  pointer-events: none;
}

/* ══ Content sections: a section's posts and one post (2026-10-18) ════════════ */
.brv-s-posts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.brv-s-post__link {
  display: block;
  padding: 20px 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 12px);
  background: var(--color-surface);
  color: inherit;
  text-decoration: none;
}
.brv-s-post__link:hover,
.brv-s-post__link:focus-visible {
  border-color: var(--color-accent);
}
.brv-s-post__title {
  margin: 0 0 6px;
  font-size: var(--font-size-lg, 20px);
  line-height: 1.3;
}
.brv-s-post__text {
  margin: 0 0 10px;
  color: var(--color-text-subtle);
  line-height: var(--line-height-base);
}
.brv-s-post__meta,
.brv-s-article__meta {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
}
.brv-s-posts__feed { margin-top: 24px; font-size: var(--font-size-sm); }
.brv-s-article {
  max-width: 760px;
  margin: 0 auto;
  padding-top: 48px;
  padding-bottom: 64px;
}
.brv-s-article__head { margin-bottom: 24px; }
.brv-s-article__head .brv-s-article__meta { margin-top: 12px; }
.brv-s-article__section { display: inline-block; margin-bottom: 8px; text-decoration: none; }
.brv-s-article__cover {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 32px;
  border-radius: var(--radius-lg, 12px);
}
.brv-s-prose {
  font-size: 17px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.brv-s-prose > * + * { margin-top: 1em; }
.brv-s-prose h2 { margin-top: 2em; font-size: 26px; line-height: 1.25; scroll-margin-top: 88px; }
.brv-s-prose h3 { margin-top: 1.6em; font-size: 20px; line-height: 1.3; scroll-margin-top: 88px; }
.brv-s-prose h4,
.brv-s-prose h5,
.brv-s-prose h6 { margin-top: 1.4em; font-size: 17px; }
.brv-s-prose a { color: var(--color-accent); text-underline-offset: 3px; }
.brv-s-prose ul,
.brv-s-prose ol { padding-left: 1.4em; }
.brv-s-prose li + li { margin-top: 0.35em; }
.brv-s-prose img { max-width: 100%; height: auto; border-radius: var(--radius-md, 8px); }
.brv-s-prose blockquote {
  margin-left: 0;
  padding-left: 16px;
  border-left: 3px solid var(--color-border);
  color: var(--color-text-subtle);
}
.brv-s-prose code {
  font-family: var(--font-family-mono);
  font-size: 0.88em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--color-surface-sunken, rgba(127, 127, 127, 0.12));
}
.brv-s-prose pre {
  overflow: auto;
  padding: 16px;
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface-sunken, rgba(127, 127, 127, 0.12));
}
.brv-s-prose pre code { padding: 0; background: none; }
.brv-s-prose table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 15px;
}
.brv-s-prose th,
.brv-s-prose td { padding: 8px 12px; border: 1px solid var(--color-border); text-align: left; }
.brv-s-article__more { margin-top: 56px; }
.brv-s-article__more .brv-s-h2 { margin-bottom: 16px; }
.brv-s-article__back { margin-top: 32px; }
@media (max-width: 767.98px) {
  .brv-s-article { padding-top: 32px; }
  .brv-s-post__link { padding: 16px; }
  .brv-s-prose { font-size: 16px; }
}

/* ══ Consent to analytics (2026-10-19): the banner consent.js shows until a
   choice is made, fixed to the foot of the viewport; Accept and Reject are
   the same button. It overlays, so it may carry a shadow. ══════════════ */
/* ── the notices under the nav (2026-10-23) ── */

.brv-s-notices {
  display: grid;
  gap: 8px;
  max-width: 1120px;
  margin: 12px auto 0;
  padding: 0 16px;
}

.brv-s-notices .alert {
  margin: 0;
}

/* With script, a notice shows once the script finds it undismissed. */
.js .brv-s-notice:not([data-shown]) {
  display: none;
}

.brv-consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  background: var(--color-surface);
  color: var(--color-text);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
}
.brv-consent[hidden] {
  display: none;
}
.brv-consent__in {
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}
.brv-consent__text {
  flex: 1 1 420px;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}
.brv-consent__text strong {
  display: block;
  font-size: 15px;
  margin-bottom: 2px;
}
.brv-consent__actions {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
  margin-left: auto;
}
.brv-consent__actions .btn {
  min-width: 120px;
}
@media (max-width: 767.98px) {
  .brv-consent__in {
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  }
  .brv-consent__actions {
    width: 100%;
    margin-left: 0;
  }
  .brv-consent__actions .btn {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* ══ Monthly or yearly (2026-10-19): a monthly plan that also sells the year
   carries both prices and both buttons; the toggle's radios pick which set
   shows, by :has(), with no script. Opens on Monthly. ══════════════════ */
.brv-s-cycletoggle {
  display: flex;
  justify-content: center;
  margin: 0 0 var(--space-6, 24px);
}
.brv-s-cycletoggle__save {
  margin-left: 6px;
  font-size: var(--font-size-xs, 12px);
  color: var(--color-accent-text, var(--color-text-subtle));
}
.brv-s-cycle--y {
  display: none;
}
.brv-s-cycles:has(#brv-cycle-y:checked) .brv-s-cycle--y {
  display: block;
}
.brv-s-cycles:has(#brv-cycle-y:checked) .brv-s-cycle--m {
  display: none;
}
.brv-s-cycles:has(#brv-cycle-y:checked) .brv-s-tier__foot.brv-s-cycle--y {
  display: grid;
}

/* An answer is Markdown paragraphs and lists (2026-10-20), set as one
   paragraph was: the first block flush, the rest spaced. */
.brv-s-answer {
  max-width: 40rem;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
}
.brv-s-answer > * { margin: 0; }
.brv-s-answer > * + * { margin-top: var(--space-3); }
.brv-s-answer ul,
.brv-s-answer ol { padding-left: 1.25rem; }
.brv-s-answer li + li { margin-top: var(--space-1); }
.brv-s-answer strong { color: var(--color-text); }

/* The example QR code in the dark theme (2026-10-21): a code scans only
   dark on light, so it keeps its light ground — softened from the page's
   only pure white, with the panel's border round it, so it reads as a
   printed card on the dark page rather than a hole in it. */
:root[data-theme='dark'] .brv-s-qr {
  background: #dde4e8;
  outline: var(--border-width) solid var(--color-border);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .brv-s-qr {
    background: #dde4e8;
    outline: var(--border-width) solid var(--color-border);
  }
}

/* ══ Badges (/badges, 2026-10-21): each of the kit's badges on a fixed
   light and a fixed dark ground — fixed, not the theme's, because the
   point is how the badge reads on a customer's page, whatever this one's
   theme — and its snippets. One column of cards; the two grounds side by
   side from 768px. ══════════════════════════════════════════════════ */
.brv-s-badges {
  display: grid;
  gap: var(--space-5);
}
.brv-s-badge {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  min-width: 0;
}
.brv-s-badge__head {
  display: grid;
  gap: var(--space-1);
}
.brv-s-badge__title {
  margin: 0;
  font-size: var(--font-size-lg);
  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__grounds {
  display: grid;
  gap: var(--space-3);
}
.brv-s-badge__ground {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-6) var(--space-4) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}
.brv-s-badge__ground img {
  display: block;
  max-width: 100%;
  height: auto;
}
.brv-s-badge__ground figcaption {
  font-size: var(--font-size-xs);
}
.brv-s-badge__ground--light {
  background: #ffffff;
  color: #4b5863;
}
.brv-s-badge__ground--dark {
  background: #0c1216;
  color: #b6c2c8;
}
.brv-s-badge__snippet {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}
.brv-s-badge__snippet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 44px;
}
.brv-s-badge__format {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}
.brv-s-badge__code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* Copying needs script (brevily.js); without it the snippet is plain
   text to select, and no button promises otherwise. */
html:not(.js) .brv-s-badge__copy {
  display: none;
}
@media screen and (max-width: 767.98px) {
  .brv-s-badge__copy {
    min-height: 44px;
  }
}
@media screen and (min-width: 768px) {
  .brv-s-badge__grounds {
    grid-template-columns: 1fr 1fr;
  }
}