/* HVO internal pages — compact extension of the homepage system.
   Marketing color is contained inside useful modules instead of becoming the page. */
:root {
  --hvo-v6-ink: #151515;
  --hvo-v6-muted: #686864;
  --hvo-v6-line: #dfdfda;
  --hvo-v6-soft: #f4f4f0;
  --hvo-v6-blue: #55b9f4;
  --hvo-v6-lime: #d6fd70;
  --hvo-v6-white: #fff;
}

.hvo-page {
  background: var(--hvo-v6-white);
}

.hvo-page-shell {
  width: min(calc(100% - 3rem), 78rem);
}

.hvo-text-link {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding-bottom: .28rem;
  border-bottom: 1px solid currentColor;
  color: inherit;
  font-size: .86rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
}

.hvo-text-link span {
  transition: transform 180ms ease;
}

.hvo-text-link:hover span {
  transform: translate(.18rem, -.18rem);
}

/* The shared internal masthead. */
.hvo-subhead {
  padding: 9.75rem 0 2.75rem;
  background: var(--hvo-v6-white);
}

.hvo-subhead__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(18rem, .62fr);
  align-items: end;
  gap: clamp(2rem, 7vw, 7rem);
  padding-bottom: 2.75rem;
  border-bottom: 1px solid var(--hvo-v6-line);
}

.hvo-subhead .hvo-kicker,
.hvo-blog-masthead .hvo-kicker,
.hvo-info-hero .hvo-kicker,
.hvo-calculator-intro .hvo-kicker {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.25rem;
  color: var(--hvo-v6-muted);
}

.hvo-subhead .hvo-kicker::before,
.hvo-blog-masthead .hvo-kicker::before,
.hvo-info-hero .hvo-kicker::before,
.hvo-calculator-intro .hvo-kicker::before {
  content: "";
  width: .55rem;
  height: .55rem;
  border-radius: .1rem;
  background: var(--hvo-v6-blue);
}

.hvo-subhead h1 {
  max-width: 13ch;
  margin: 0;
  font-size: clamp(3.15rem, 5vw, 5rem);
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.06em;
  text-wrap: balance;
}

.hvo-subhead__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  padding-bottom: .2rem;
}

.hvo-subhead__aside p {
  max-width: 31rem;
  margin: 0;
  color: var(--hvo-v6-muted);
  font-size: .96rem;
  line-height: 1.58;
}

/* Generic utility pages no longer open with a campaign-size slab. */
.hvo-stage-hero {
  min-height: auto;
  align-items: flex-end;
  margin: 0;
  padding: 9.75rem 0 3rem;
  border-radius: 0;
  background: var(--hvo-v6-white);
  background-image: none;
}

.hvo-stage-hero::before {
  content: none;
}

.hvo-stage-hero .hvo-page-shell {
  align-items: flex-start;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(18rem, .55fr);
  gap: 1rem 5rem;
  padding-bottom: 2.75rem;
  border-bottom: 1px solid var(--hvo-v6-line);
  text-align: left;
}

.hvo-stage-hero .hvo-kicker {
  grid-column: 1 / -1;
  margin-bottom: .25rem;
}

.hvo-stage-hero .hvo-page-title {
  max-width: 13ch;
  font-size: clamp(3rem, 5vw, 5rem);
  line-height: .96;
}

.hvo-stage-hero .hvo-page-lede {
  align-self: end;
  margin: 0;
  color: var(--hvo-v6-muted);
  font-size: .96rem;
  text-align: left;
}

.hvo-stage-hero .hvo-creator-ribbon,
.hvo-stage-hero .hvo-hero-index {
  display: none;
}

.hvo-stage-hero .hvo-action-row {
  grid-column: 2;
  justify-content: flex-start;
  margin-top: 1rem;
}

.hvo-page > .hvo-stage-hero + .hvo-section {
  padding-top: 2.75rem;
}

/* Services: one useful image and three operational facts before the ledger. */
.hvo-service-proof {
  padding: 0 0 4.5rem;
}

.hvo-service-proof .hvo-page-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(16rem, .58fr);
  gap: .75rem;
}

.hvo-service-proof__media {
  position: relative;
  min-height: 31rem;
  margin: 0;
  overflow: hidden;
  border-radius: 1.25rem;
}

.hvo-service-proof__media::after {
  content: "";
  position: absolute;
  inset: 50% 0 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, .72));
}

.hvo-service-proof__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.hvo-service-proof__media figcaption {
  position: absolute;
  z-index: 1;
  right: 1.25rem;
  bottom: 1.2rem;
  left: 1.25rem;
  color: #fff;
  font-size: .9rem;
  font-weight: 550;
}

.hvo-service-proof__facts {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.hvo-service-proof__facts article,
.hvo-about-facts article {
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.25rem;
  border-radius: 1.25rem;
  background: var(--hvo-v6-soft);
}

.hvo-service-proof__facts article.is-blue,
.hvo-about-facts article.is-blue {
  background: var(--hvo-v6-blue);
}

.hvo-service-proof__facts article.is-lime,
.hvo-about-facts article.is-lime {
  background: var(--hvo-v6-lime);
}

.hvo-service-proof__facts article.is-dark {
  background: var(--hvo-v6-ink);
  color: #fff;
}

.hvo-service-proof__facts strong,
.hvo-about-facts strong {
  font-size: clamp(1.65rem, 2.5vw, 2.55rem);
  font-weight: 520;
  line-height: .95;
  letter-spacing: -.055em;
}

.hvo-service-proof__facts span,
.hvo-about-facts span {
  color: currentColor;
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.3;
}

.hvo-service-ledger {
  padding: 4.5rem 0;
  background: var(--hvo-v6-soft);
}

.hvo-service-ledger header,
.hvo-about-principles header {
  grid-template-columns: minmax(9rem, .35fr) minmax(0, 1fr);
  margin-bottom: 2.5rem;
}

.hvo-service-ledger header h2,
.hvo-about-principles header h2 {
  max-width: 16ch;
  font-size: clamp(2.25rem, 3.7vw, 3.7rem);
  line-height: 1;
}

.hvo-service-rows article {
  grid-template-columns: 3.25rem minmax(12rem, .62fr) minmax(18rem, 1fr);
  padding: 1.15rem 0;
}

.hvo-service-rows h3 {
  font-size: 1.05rem;
}

.hvo-service-rows p {
  font-size: .88rem;
}

.hvo-service-close {
  margin: 0;
  padding: 3rem 0;
  border-radius: 0;
  background: var(--hvo-v6-white);
}

.hvo-service-close .hvo-page-shell {
  display: grid;
  grid-template-columns: minmax(15rem, .8fr) minmax(18rem, 1fr) auto;
  align-items: end;
  gap: 2rem;
}

.hvo-service-close .hvo-eyebrow {
  grid-column: auto;
}

.hvo-service-close h2 {
  max-width: none;
  margin: .65rem 0 0;
  font-size: 1.8rem;
  line-height: 1.05;
  letter-spacing: -.04em;
}

.hvo-service-close > .hvo-page-shell > p:not(.hvo-eyebrow) {
  margin: 0;
  color: var(--hvo-v6-muted);
  font-size: .9rem;
}

/* About: the opening frame is an information bento, not another hero. */
.hvo-about-image {
  padding: 0 0 4.5rem;
}

.hvo-about-bento {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(16rem, .6fr);
  gap: .75rem;
}

.hvo-about-bento figure {
  position: relative;
  min-height: 31rem;
  overflow: hidden;
  border-radius: 1.25rem;
}

.hvo-about-bento figure::after {
  content: "";
  position: absolute;
  inset: 55% 0 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, .78));
}

.hvo-about-image .hvo-about-bento img {
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}

.hvo-about-bento figcaption {
  position: absolute;
  z-index: 1;
  right: 1.25rem;
  bottom: 1.2rem;
  left: 1.25rem;
  margin: 0;
  color: #fff;
  font-size: .9rem;
}

.hvo-about-facts {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.hvo-about-principles {
  padding: 4.5rem 0;
}

.hvo-principle-grid article {
  min-height: 15rem;
  padding: 1.25rem;
}

.hvo-principle-grid h3 {
  font-size: 1.35rem;
}

.hvo-about-network {
  margin: 0;
  padding: 3.25rem 0;
  border-radius: 0;
  background: var(--hvo-v6-blue);
}

.hvo-about-network .hvo-page-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.hvo-about-network h2 {
  max-width: none;
  margin: .6rem 0 0;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1;
}

.hvo-about-portraits {
  flex: 0 0 auto;
}

.hvo-about-portraits img {
  width: clamp(3.75rem, 6vw, 5.75rem);
  border-width: 4px;
}

/* Pricing: rates are the first visual payload and stay on a light surface. */
.hvo-pricing-sheet {
  padding: 0 0 5.5rem;
  background: var(--hvo-v6-white);
  color: var(--hvo-v6-ink);
}

.hvo-pricing-sheet .hvo-page-shell {
  padding: 1.25rem;
  border: 1px solid var(--hvo-v6-line);
  border-radius: 1.35rem;
  background: var(--hvo-v6-soft);
}

.hvo-pricing-sheet header {
  margin: 0;
  padding: .2rem 0 1.15rem;
  color: var(--hvo-v6-muted);
}

.hvo-rate-table {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .7rem;
  border: 0;
}

.hvo-rate-table > div {
  min-height: 11.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.15rem;
  border: 0;
  border-radius: 1rem;
  background: var(--hvo-v6-white);
}

.hvo-rate-table > div.is-head {
  grid-column: 1 / -1;
  min-height: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: .1rem .35rem .55rem;
  background: transparent;
  color: var(--hvo-v6-muted);
}

.hvo-rate-table > div:not(.is-head):nth-child(3) {
  background: var(--hvo-v6-blue);
}

.hvo-rate-table > div:not(.is-head):nth-child(4) {
  background: var(--hvo-v6-lime);
}

.hvo-rate-table > div strong {
  font-size: clamp(1.5rem, 2.5vw, 2.45rem);
  line-height: 1;
}

.hvo-rate-table > div strong:last-child {
  text-align: left;
}

.hvo-pricing-notes {
  gap: .7rem;
  margin-top: .7rem;
}

.hvo-pricing-notes article {
  min-height: 10rem;
  display: flex;
  flex-direction: column;
  padding: 1.15rem;
  border: 0;
  border-radius: 1rem;
  background: var(--hvo-v6-white);
}

.hvo-pricing-notes article.is-blue {
  background: rgba(85, 185, 244, .22);
}

.hvo-pricing-notes article.is-lime {
  background: rgba(214, 253, 112, .45);
}

.hvo-pricing-notes h3 {
  margin: auto 0 .45rem;
  font-size: 1.05rem;
}

.hvo-pricing-notes p {
  color: var(--hvo-v6-muted);
  font-size: .82rem;
}

.hvo-pricing-disclaimer {
  margin: 1.25rem .2rem 0;
  color: var(--hvo-v6-muted);
}

/* Contact: two primary choices and a slim preparation route. */
.hvo-contact-options {
  padding: 0 0 5.5rem;
}

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

.hvo-contact-option {
  min-height: 19rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem;
  border: 0;
  border-radius: 1.25rem;
  background: var(--hvo-v6-soft);
}

.hvo-contact-option.is-primary {
  background: var(--hvo-v6-blue);
}

.hvo-contact-option.is-wide {
  grid-column: 1 / -1;
  min-height: auto;
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr) 2rem;
  align-items: center;
  padding-block: 1.25rem;
  background: var(--hvo-v6-lime);
}

.hvo-contact-option > div {
  margin-top: auto;
}

.hvo-contact-option h2 {
  margin-bottom: .65rem;
  font-size: clamp(1.5rem, 2.5vw, 2.45rem);
}

.hvo-contact-option p {
  max-width: 31rem;
  font-size: .88rem;
}

.hvo-contact-option > strong {
  align-self: flex-end;
}

/* Info: a compact operation overview with a structured creator module. */
.hvo-info-hero {
  min-height: auto;
  margin: 0;
  padding: 9.75rem 0 3.25rem;
  border-radius: 0;
  background: var(--hvo-v6-white);
}

.hvo-info-hero::before {
  content: none;
}

.hvo-info-hero .hvo-page-shell {
  grid-template-columns: minmax(0, .9fr) minmax(28rem, 1.1fr);
  gap: clamp(2rem, 6vw, 6rem);
}

.hvo-info-hero__copy h1 {
  max-width: 12ch;
  font-size: clamp(3.2rem, 5vw, 5rem);
  line-height: .96;
  letter-spacing: -.06em;
}

.hvo-info-hero__copy > p:not(.hvo-kicker) {
  max-width: 30rem;
  margin-top: 1.35rem;
  color: var(--hvo-v6-muted);
  font-size: .94rem;
}

.hvo-info-hero__copy .hvo-action-row {
  justify-content: flex-start;
  margin-top: 1.45rem;
}

.hvo-info-cast {
  min-height: 25rem;
  overflow: hidden;
  border-radius: 1.25rem;
  background: var(--hvo-v6-soft);
}

.hvo-info-cast::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(85, 185, 244, .18), transparent 55%);
}

.hvo-info-cast__label {
  position: absolute;
  z-index: 2;
  top: 1.1rem;
  left: 1.1rem;
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .68rem;
}

.hvo-info-cast__label span {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: #45b659;
  box-shadow: 0 0 0 .25rem rgba(69, 182, 89, .14);
}

.hvo-info-cast__portrait {
  width: 9.25rem;
}

.hvo-info-cast__portrait img {
  border-width: 4px;
  border-radius: 50%;
  box-shadow: 0 .8rem 2.5rem rgba(21, 21, 21, .12);
}

.hvo-info-cast__portrait figcaption {
  margin-top: .35rem;
  background: transparent;
  font-size: .56rem;
}

.hvo-info-cast__portrait.is-cleo {
  top: 5rem;
  left: 6%;
  transform: none;
}

.hvo-info-cast__portrait.is-jesser {
  top: 7.25rem;
  right: 7%;
  transform: none;
}

.hvo-info-cast__portrait.is-ryan {
  right: 35%;
  bottom: 1.5rem;
  transform: none;
}

.hvo-info-cast__mark {
  left: 1.1rem;
  bottom: 1.1rem;
  width: 4.6rem;
  height: 4.6rem;
  box-shadow: none;
}

.hvo-info-cast__mark img {
  width: 2.6rem;
  height: 2.6rem;
}

.hvo-info-cast__note {
  top: 4.9rem;
  left: 42%;
  padding: .7rem .8rem;
  transform: none;
}

.hvo-info-cast__note strong {
  font-size: 1.35rem;
}

.hvo-info-page .hvo-section {
  padding-block: 4rem;
}

.hvo-info-page .hvo-section-head {
  grid-template-columns: minmax(0, 1fr) minmax(18rem, .55fr);
  margin-bottom: 2.25rem;
}

.hvo-info-page .hvo-section-head h2 {
  max-width: 16ch;
  font-size: clamp(2.2rem, 3.7vw, 3.7rem);
  line-height: 1;
}

.hvo-process-step,
.hvo-process-step:nth-child(1),
.hvo-process-step:nth-child(6) {
  min-height: 12rem;
  padding: 1.15rem;
}

.hvo-process-step h3 {
  margin-top: 1.45rem;
  font-size: 1.05rem;
}

.hvo-process-step p,
.hvo-process-step:nth-child(1) p,
.hvo-process-step:nth-child(6) p {
  font-size: .8rem;
}

.hvo-mla-main,
.hvo-mla-proof {
  min-height: 20rem;
  padding: 1.5rem;
}

.hvo-spec-panel {
  min-height: 0;
  padding: 1.5rem;
}

/* Calculator: the tool itself is visible immediately. */
.hvo-calculator-hero {
  min-height: auto;
  margin: 0;
  padding: 9.75rem 0 4.5rem;
  border-radius: 0;
  background: var(--hvo-v6-white);
}

.hvo-calculator-intro {
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .65fr);
  gap: 2rem 5rem;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--hvo-v6-line);
}

.hvo-calculator-intro h1 {
  max-width: 13ch;
  font-size: clamp(3.1rem, 4.8vw, 4.8rem);
  line-height: .96;
}

.hvo-calculator-intro > div:last-child p {
  color: var(--hvo-v6-muted);
  font-size: .92rem;
}

.hvo-calculator-page .hvo-tool-shell {
  border-color: var(--hvo-v6-line);
  border-radius: 1.2rem;
  box-shadow: none;
}

.hvo-calculator-page .hvo-tool-topbar {
  background: var(--hvo-v6-soft);
  border-color: var(--hvo-v6-line);
}

/* Blog index: same three-up image rhythm as the homepage teaser. */
.hvo-blog-lead {
  padding: 9.75rem 0 4.5rem;
}

.hvo-blog-masthead {
  grid-template-columns: minmax(0, 1.45fr) minmax(18rem, .55fr);
  gap: 1rem 5rem;
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
}

.hvo-blog-masthead .hvo-kicker {
  grid-column: 1 / -1;
  margin-bottom: .15rem;
}

.hvo-blog-masthead h1 {
  grid-column: 1;
  max-width: 13ch;
  font-size: clamp(3.15rem, 5vw, 5rem);
  line-height: .96;
}

.hvo-blog-masthead > p:last-child {
  grid-column: 2;
  align-self: end;
  font-size: .92rem;
}

.hvo-blog-feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.hvo-blog-feature-side {
  display: contents;
}

/* hvo-pages.css sizes the ARCHIVE grid by giving every .hvo-blog-card a
   `grid-column: span 4/6/8` against a 12-column track list. That selector is
   not scoped to .hvo-blog-grid, so the three featured cards inherited a span
   their own 3-column grid cannot satisfy: each one claimed the whole row and
   spawned empty implicit columns. The featured row rendered as three
   full-bleed cards stacked vertically at every width, with the third card
   narrower than the other two (span 4 vs span 8) - which is why it stopped
   short of the right margin. On phones the same spans squeezed the two side
   cards to 171px and 147px inside a 351px column while every ordinary card
   below them was full width.
   Letting these cards flow one-per-track restores the intended row: 3 across
   on desktop, and full-width stacked under the 520px rule that collapses
   .hvo-blog-feature-side to a single column. */
.hvo-blog-feature-grid .hvo-blog-card,
.hvo-blog-feature-side .hvo-blog-card {
  grid-column: auto;
}

.hvo-blog-card.is-featured .hvo-blog-card-media,
.hvo-blog-card.is-side .hvo-blog-card-media {
  aspect-ratio: 4 / 3;
  border-radius: 1.05rem;
}

.hvo-blog-card.is-featured h2,
.hvo-blog-card.is-side h2 {
  max-width: 26ch;
  font-size: 1.15rem;
  line-height: 1.22;
  letter-spacing: -.025em;
}

.hvo-blog-archive {
  padding: 4rem 0 5.5rem;
}

.hvo-blog-archive__head {
  margin-bottom: 2rem;
}

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

.hvo-blog-grid .hvo-blog-card,
.hvo-blog-grid .hvo-blog-card:nth-child(8n + 1),
.hvo-blog-grid .hvo-blog-card:nth-child(8n + 6) {
  grid-column: auto;
}

/* The archive grid keeps one uniform 4/3 cover, so two rhythms have to be
   flattened here, not one. v5 cut its wide cards at 8n + 1 / 8n + 6, but
   hvo-pages.css still carries the ORIGINAL 7n + 1 / 7n + 5 pair, and only that
   pair's aspect-ratio survives: its matching `grid-column: span 8` already
   loses to `.hvo-blog-grid .hvo-blog-card` above at equal specificity, while
   `.hvo-blog-card:nth-child(7n + 1) .hvo-blog-card-media` outranks the generic
   `.hvo-blog-card-media` this file inherits. Left alone, nth-child 5, 8, 12,
   15, 19, 26, 29 and 36 render a 228px cover inside a 304px row and drop their
   kicker and title 76px out of line with their row-mates. The page's own 767px
   rules already force 4/3 on these selectors; this holds it at every width. */
.hvo-blog-grid .hvo-blog-card:nth-child(8n + 1) .hvo-blog-card-media,
.hvo-blog-grid .hvo-blog-card:nth-child(8n + 6) .hvo-blog-card-media,
.hvo-blog-grid .hvo-blog-card:nth-child(7n + 1) .hvo-blog-card-media,
.hvo-blog-grid .hvo-blog-card:nth-child(7n + 5) .hvo-blog-card-media {
  aspect-ratio: 4 / 3;
}

.hvo-blog-grid .hvo-blog-card:nth-child(8n + 1) h2,
.hvo-blog-grid .hvo-blog-card:nth-child(8n + 6) h2 {
  max-width: 26ch;
  font-size: 1.1rem;
  line-height: 1.25;
  letter-spacing: -.025em;
}

.hvo-article-hero {
  padding-top: 8.75rem;
}

.hvo-article-title {
  max-width: 17ch;
  font-size: clamp(3rem, 5vw, 5rem);
  line-height: .96;
}

.hvo-article-image {
  max-height: 42rem;
}

/* Onboarding stays product-first and loses the marketing-page scale. */
.hvo-onboarding-page {
  background: var(--hvo-v6-soft);
}

.hvo-onboarding-frame {
  width: min(calc(100% - 2rem), 54rem);
  padding-top: 1.25rem;
}

.hvo-onboarding-header {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--hvo-v6-line);
}

.hvo-onboarding-intro {
  max-width: 40rem;
  margin: 2.6rem auto 0;
  text-align: center;
}

.hvo-onboarding-intro h1 {
  font-size: clamp(2.4rem, 5vw, 3.45rem);
  line-height: 1;
}

.hvo-onboarding-intro p {
  max-width: 34rem;
  margin-inline: auto;
  font-size: .9rem;
}

.hvo-onboarding-shell {
  margin-top: 2rem;
}

.hvo-onboarding-card {
  overflow: hidden;
  border: 1px solid var(--hvo-v6-line);
  border-radius: 1.1rem;
  box-shadow: none;
}

@media (max-width: 991px) {
  .hvo-page-shell {
    width: min(calc(100% - 2.5rem), 78rem);
  }

  .hvo-subhead__layout,
  .hvo-stage-hero .hvo-page-shell,
  .hvo-info-hero .hvo-page-shell,
  .hvo-calculator-intro,
  .hvo-blog-masthead {
    grid-template-columns: minmax(0, 1.1fr) minmax(17rem, .72fr);
    gap: 2.5rem;
  }

  .hvo-service-proof__media,
  .hvo-about-bento figure {
    min-height: 27rem;
  }

  .hvo-info-cast__portrait {
    width: 8.25rem;
  }

  .hvo-info-cast__portrait.is-ryan {
    right: 33%;
  }

  .hvo-about-network .hvo-page-shell {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .hvo-page-shell {
    width: min(calc(100% - 1.5rem), 78rem);
  }

  .hvo-subhead,
  .hvo-info-hero,
  .hvo-calculator-hero,
  .hvo-blog-lead {
    padding-top: 7.5rem;
  }

  .hvo-subhead {
    padding-bottom: 2rem;
  }

  .hvo-subhead__layout,
  .hvo-stage-hero .hvo-page-shell,
  .hvo-info-hero .hvo-page-shell,
  .hvo-calculator-intro,
  .hvo-blog-masthead {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .hvo-subhead h1,
  .hvo-info-hero__copy h1,
  .hvo-calculator-intro h1,
  .hvo-blog-masthead h1 {
    max-width: 14ch;
    font-size: clamp(2.8rem, 12.5vw, 4.15rem);
  }

  .hvo-stage-hero {
    margin: 0;
    padding: 7.5rem 0 2rem;
    border-radius: 0;
  }

  .hvo-stage-hero .hvo-page-title {
    font-size: clamp(2.8rem, 12.5vw, 4.15rem);
  }

  .hvo-stage-hero .hvo-action-row {
    grid-column: 1;
  }

  .hvo-service-proof .hvo-page-shell,
  .hvo-about-bento {
    grid-template-columns: 1fr;
  }

  .hvo-service-proof__media,
  .hvo-about-bento figure {
    min-height: 23rem;
  }

  .hvo-service-proof__facts,
  .hvo-about-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .hvo-service-proof__facts article,
  .hvo-about-facts article {
    min-height: 9rem;
  }

  .hvo-service-ledger,
  .hvo-about-principles {
    padding: 3.5rem 0;
  }

  .hvo-service-ledger header,
  .hvo-about-principles header {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
  }

  .hvo-service-ledger header h2,
  .hvo-about-principles header h2 {
    font-size: clamp(2.2rem, 10vw, 3.2rem);
  }

  .hvo-service-rows article {
    grid-template-columns: 2.5rem 1fr;
  }

  .hvo-service-rows article p {
    grid-column: 2;
  }

  .hvo-service-close .hvo-page-shell {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1.2rem;
  }

  .hvo-about-network .hvo-page-shell {
    flex-direction: column;
  }

  .hvo-about-portraits {
    width: 100%;
  }

  .hvo-about-portraits img {
    width: min(17vw, 4.75rem);
  }

  .hvo-rate-table {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hvo-rate-table > div {
    min-height: 9.5rem;
  }

  .hvo-pricing-notes {
    grid-template-columns: 1fr;
  }

  .hvo-pricing-notes article {
    min-height: 8.5rem;
  }

  .hvo-contact-grid {
    grid-template-columns: 1fr;
  }

  .hvo-contact-option {
    min-height: 15rem;
  }

  .hvo-contact-option.is-wide {
    grid-column: 1;
    grid-template-columns: 1fr 2rem;
  }

  .hvo-contact-option.is-wide > span {
    grid-column: 1 / -1;
  }

  .hvo-info-hero {
    margin: 0;
    padding-bottom: 2.25rem;
    border-radius: 0;
  }

  .hvo-info-cast {
    min-height: 23rem;
  }

  .hvo-info-page .hvo-section {
    padding-block: 3.25rem;
  }

  .hvo-info-page .hvo-section-head {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .hvo-info-page .hvo-section-head h2 {
    font-size: clamp(2.2rem, 10vw, 3.2rem);
  }

  .hvo-calculator-hero {
    margin: 0;
    padding-bottom: 3.5rem;
    border-radius: 0;
  }

  .hvo-blog-masthead .hvo-kicker,
  .hvo-blog-masthead h1,
  .hvo-blog-masthead > p:last-child {
    grid-column: 1;
  }

  .hvo-blog-feature-grid {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }

  .hvo-blog-feature-side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
  }

  .hvo-blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem .75rem;
  }

  .hvo-article-title {
    font-size: clamp(2.75rem, 12vw, 4rem);
  }

  .hvo-onboarding-frame {
    width: min(calc(100% - 1rem), 54rem);
  }
}

@media (max-width: 520px) {
  .hvo-service-proof__facts,
  .hvo-about-facts,
  .hvo-rate-table,
  .hvo-blog-feature-side,
  .hvo-blog-grid {
    grid-template-columns: 1fr;
  }

  .hvo-service-proof__facts article,
  .hvo-about-facts article {
    min-height: 7.75rem;
  }

  .hvo-contact-option h2 {
    overflow-wrap: anywhere;
  }
}

/* Exact homepage typography hierarchy.
   Plus Jakarta Sans carries all reading and display text.
   Geist Mono is reserved for the same uppercase UI moments used on home. */
.hvo-page,
.hvo-page input,
.hvo-page select,
.hvo-page textarea,
.hvo-page button {
  font-family: "Plus Jakarta Sans", sans-serif;
}

.hvo-subhead h1,
.hvo-stage-hero .hvo-page-title,
.hvo-info-hero__copy h1,
.hvo-calculator-intro h1,
.hvo-blog-masthead h1,
.hvo-article-title,
.hvo-onboarding-intro h1 {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(3rem, 5.4vw, 3.75rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.06em;
}

.hvo-section-head h2,
.hvo-info-page .hvo-section-head h2,
.hvo-service-ledger header h2,
.hvo-about-principles header h2,
.hvo-service-close h2,
.hvo-about-network h2,
.hvo-article-body h2,
.hvo-article-cta h2 {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(2.5rem, 4.35vw, 3rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.06em;
}

.hvo-service-rows h3,
.hvo-process-step h3,
.hvo-principle-grid h3,
.hvo-contact-option h2,
.hvo-blog-card h2,
.hvo-blog-card.is-featured h2,
.hvo-blog-card.is-side h2,
.hvo-blog-grid .hvo-blog-card:nth-child(8n + 1) h2,
.hvo-blog-grid .hvo-blog-card:nth-child(8n + 6) h2,
.hvo-form-section__head h2,
.hvo-form-section h3,
.hvo-article-body h3 {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.33;
  letter-spacing: -.04em;
}

.hvo-subhead__aside p,
.hvo-stage-hero .hvo-page-lede,
.hvo-info-hero__copy > p:not(.hvo-kicker),
.hvo-calculator-intro > div:last-child p,
.hvo-blog-masthead > p:last-child,
.hvo-section-head > p,
.hvo-service-rows p,
.hvo-service-close > .hvo-page-shell > p:not(.hvo-eyebrow),
.hvo-principle-grid p,
.hvo-contact-option p,
.hvo-process-step p,
.hvo-process-step:nth-child(1) p,
.hvo-process-step:nth-child(6) p,
.hvo-faq p,
.hvo-article-body,
.hvo-onboarding-intro p,
.hvo-form-section__head p,
.hvo-speaker-note,
.hvo-onboarding-help,
.hvo-field-note {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.02em;
}

.hvo-kicker,
.hvo-eyebrow,
.hvo-meta,
.hvo-article-meta,
.hvo-step-number,
.hvo-process-number,
.hvo-process-qc,
.hvo-blog-card-meta,
.hvo-rate-table .is-head,
.hvo-service-proof__media figcaption,
.hvo-about-bento figcaption {
  font-family: Geistmono, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hvo-action,
.hvo-action-secondary,
.hvo-button,
.hvo-button-secondary,
.hvo-mini-button,
.hvo-text-link {
  font-family: Geistmono, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hvo-onboarding-brand {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: none;
}

.hvo-progress-item strong,
.hvo-onboarding-page .hvo-field-label,
.hvo-repeat-card__title,
.hvo-language-option__code {
  font-family: Geistmono, Arial, sans-serif;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hvo-onboarding-page .hvo-control,
.hvo-onboarding-page .hvo-select,
.hvo-onboarding-page .hvo-textarea,
.hvo-language-option__name,
.hvo-add-person {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.02em;
}

.hvo-form-actions .hvo-button,
.hvo-form-actions .hvo-button-secondary {
  font-family: Geistmono, Arial, sans-serif;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .hvo-subhead h1,
  .hvo-stage-hero .hvo-page-title,
  .hvo-info-hero__copy h1,
  .hvo-calculator-intro h1,
  .hvo-blog-masthead h1,
  .hvo-article-title,
  .hvo-onboarding-intro h1 {
    font-size: clamp(2.75rem, 12vw, 3.25rem);
    line-height: 1.15;
  }

  .hvo-section-head h2,
  .hvo-info-page .hvo-section-head h2,
  .hvo-service-ledger header h2,
  .hvo-about-principles header h2,
  .hvo-service-close h2,
  .hvo-about-network h2,
  .hvo-article-body h2,
  .hvo-article-cta h2 {
    font-size: clamp(2.25rem, 10vw, 2.75rem);
    line-height: 1.18;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hvo-text-link span {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   BUG FIXES 2026-08-19 — appended; nothing above this line was altered.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── BUG 1: dark mode had no effect on blog index + article pages ──────
   Root cause: dark.css themes the site by re-pointing the template's
   semantic variables, and hvo-pages.css does the same for its own
   --hvo-* tokens (it already ships a correct html[data-theme="dark"]
   .hvo-page block). But hvo-pages-v5.css and hvo-pages-v6.css each
   introduced a SECOND token layer (--hvo-v5-* / --hvo-v6-*) declared on
   :root with light values only and no dark counterpart. v6 also sets
   .hvo-page { background: var(--hvo-v6-white) }, which lands after the
   v1 rule at equal specificity and so wins — pinning every .hvo-page
   surface to white regardless of theme.

   Consequence Mena reported: on a page that stays white, hvo-brand.css's
   html[data-theme="dark"] … .hvo-lockup-mark img { filter: invert(1) }
   turned the solid-black logo mark WHITE — invisible — while the
   wordmark stayed dark. Theming the page correctly makes that invert the
   right answer again, so the logo is fixed by fixing the page.

   The dark values below are not new design: they mirror the palette
   already approved in dark.css and in hvo-pages.css's own dark block
   (page #131313 → section #1a1a1a → card #232323, white ink, #a8a8a8
   muted). Accent tokens (blue / lime / lavender) are deliberately left
   alone, exactly as dark.css leaves --base--green alone.

   Scope: blog index (.hvo-blog-page) and articles (.hvo-article-body)
   only — the surface Mena reported and the surface verified in this
   pass. The other .hvo-page templates share this root cause and still
   need their own dark pass; see the logo guard at the end of this file.
   Light mode is untouched by construction: every rule here is gated on
   html[data-theme="dark"]. */

html[data-theme="dark"]:has(.hvo-page) {
  --hvo-v5-ink: #fff;
  --hvo-v5-muted: #a8a8a8;
  --hvo-v5-line: rgba(255, 255, 255, .09);
  --hvo-v5-soft: #1a1a1a;
  --hvo-v5-white: #131313;

  --hvo-v6-ink: #fff;
  --hvo-v6-muted: #a8a8a8;
  --hvo-v6-line: rgba(255, 255, 255, .09);
  --hvo-v6-soft: #1a1a1a;
  --hvo-v6-white: #131313;
}

/* Surfaces that hardcode #fff and so bypass the token layer. */
html[data-theme="dark"]:has(.hvo-page)
  :is(.hvo-blog-lead, .hvo-article-hero) {
  background: #131313;
}

/* Same root cause on the scheduling page: hvo-pages.css:381 paints
   `#my-cal-inline` a hardcoded #fff. Cal's embed adds its own
   `.cal-inline-container` class to that very element, so in dark theme the
   booking surface stayed pure white - a full-width glaring slab, and the
   largest thing on the page. It shows even when the calendar has loaded,
   because the container is taller than the iframe Cal mounts inside it
   (752px vs 570px measured at 1440), leaving a white band under the
   calendar. Dark keeps the light relationship inverted: in light the inner
   surface is lighter than its frame, in dark it is darker. */
html[data-theme="dark"] .hvo-embed-frame.is-cal #my-cal-inline {
  background: #131313;
}

/* Archive rule hardcodes #d9d9d3. */
html[data-theme="dark"]:has(.hvo-blog-page) .hvo-blog-archive__head {
  border-bottom-color: rgba(255, 255, 255, .09);
}

/* Card image placeholder (shows only while a cover loads / fails). */
html[data-theme="dark"]:has(.hvo-blog-page) .hvo-blog-card-media {
  background: #232323;
}

/* Article body copy hardcodes #343431; this is its light counterpart. */
html[data-theme="dark"]:has(.hvo-article-body) .hvo-article-body {
  color: #d6d6d2;
}

/* The closing CTA panel keeps its light lavender in dark mode — it is an
   accent surface, the same call dark.css makes for lime .bg-green. So its
   text must stay dark. Re-declaring the tokens on the subtree restores
   every inner use in one shot (the pattern dark.css uses for .vcard). */
html[data-theme="dark"]:has(.hvo-article-body) .hvo-article-cta {
  --hvo-v5-ink: #151515;
  --hvo-v5-muted: #686868;
  --hvo-v6-ink: #151515;
  --hvo-v6-muted: #686864;
  color: #151515;
}


/* ── BUG 2: inline links in article prose rendered letter-spaced ──────
   The Aeline template stylesheet (_astro/BaseLayout._i1S-wdM.css) sets a
   bare `a { letter-spacing: .12em }`. That was harmless in the original
   template, where every link was an uppercase nav item or button. HVO
   later added blog articles with links inside running prose, so those
   links computed to 1.92px against a paragraph at -0.32px — rendering as
   "M r B e a s t".

   The template rule is left alone: nav, buttons, footer links and blog
   cards across the site depend on that 0.12em. This override is scoped
   to prose only. Verified against all 39 articles: .hvo-article-body
   contains 237 links and every one is an unclassed inline prose link —
   the table of contents and the closing CTA button are siblings of
   .hvo-article-body, not descendants, so neither is affected. */
.hvo-article-body a {
  letter-spacing: inherit;

  /* Same unscoped `a` rule, second property. It also sets
     `text-decoration: none`, and hvo-pages.css:424 declares only
     `text-decoration-color: var(--hvo-lime)` and
     `text-underline-offset: .18em`, which are both inert without a line.
     So every one of those 237 prose links rendered pixel-identical to body
     copy: same colour, same weight, same letter-spacing after the fix
     above. Measured 1.00:1 against its own paragraph in BOTH themes, so
     this is not a dark-mode correction, it is the same in light. Design
     system 10.18: "Links underline in lime". Only the line is restored;
     the lime colour and the .18em offset were already declared and
     correct. Scope is unchanged from the note above: 237 unclassed prose
     anchors, with the table of contents and the closing CTA sitting
     outside .hvo-article-body. */
  text-decoration-line: underline;
}

/* ── BUG 3: h4 in article prose has no vertical rhythm ────────────────
   The Aeline/Webflow typography layer zeroes heading margins
   (`h4 { margin-top: 0; margin-bottom: 0 }`). hvo-pages.css and v5
   restore that rhythm for .hvo-article-body h2 and h3 but never wrote an
   h4 rule, so on the three articles that use h4 the sub-heading measured
   0px of gap to the paragraph below it and 21.6px above, which is exactly
   the plain paragraph gap. At 20px/400 it is barely distinct from body
   copy to begin with, and with zero gap below it sat tighter to the next
   line than the paragraph's own leading, so it read as a run-on line
   rather than a section start. h3 in the same column measures 40px above
   and 13.6px below; these values sit one step under it. Selector reaches
   only .hvo-article-body h4: 20 elements across
   blog/is-dubbing-youtube-videos-profitable (2),
   blog/why-ai-dubbing-will-never-handle-multiple-speakers (7) and
   blog/youtube-dubbing-why-humans-are-irreplaceable (11). Those are the
   only pages on the site with a rendered h4 at all. Size, weight and
   colour are deliberately left alone. */
.hvo-article-body h4 {
  margin: 1.75rem 0 .6rem;
}

/* ══ Dark mode for the remaining .hvo-page templates (2026-08-19) ══════
   The blog pass widened the v5 and v6 token overrides to every
   .hvo-page, which themes anything token-driven. What remains are places
   where hvo-pages-v5.css HARDCODES a light value instead of using a token,
   so the token layer cannot reach them. Each rule below is the dark
   counterpart of exactly one hardcoded light value in v5. Light mode is
   untouched by construction: every rule is gated on data-theme="dark". */

/* Panels and shells that hardcode #fff. */
html[data-theme="dark"]:has(.hvo-page) :is(
  .hvo-section,
  .hvo-tool-shell,
  .hvo-embed-frame.is-cal
) { background: #1a1a1a; }

/* Translucent-white surfaces become translucent-dark at the same weight. */
html[data-theme="dark"]:has(.hvo-page) :is(
  .hvo-action-secondary,
  .hvo-button-secondary
) { background: rgba(255, 255, 255, .10); }

html[data-theme="dark"]:has(.hvo-page) :is(
  .hvo-control,
  .hvo-select,
  .hvo-textarea
) { background: rgba(255, 255, 255, .06); color: #fff; }

html[data-theme="dark"]:has(.hvo-page) .hvo-info-cast__portrait figcaption {
  background: rgba(19, 19, 19, .78);
  color: #fff;
}

/* Primary pill: v5 paints it var(--hvo-v5-ink) with hardcoded #fff text.
   In dark the token flips the pill to white, so the hardcoded white text
   disappears. Flip the text instead, giving a light pill with dark text.

   EXCEPTION, and it matters: hvo-pages.css:429 paints
   `.hvo-article-cta .hvo-action` with a HARDCODED `background: #131313`, not
   the token. That pill therefore stays dark in dark mode, so forcing dark text
   onto it produced black-on-black at a contrast ratio of 1.0 and made the
   "Talk with HVO" button unreadable on all 39 blog articles. It already has
   correct white text in both themes, so it is excluded here rather than
   patched. Any future button whose background is hardcoded rather than
   tokenised needs the same exclusion. */
html[data-theme="dark"]:has(.hvo-page)
  :is(.hvo-action, .hvo-button):not(.hvo-article-cta .hvo-action):not(.hvo-article-cta .hvo-button) {
  color: #131313;
}

/* Onboarding hardcodes #fff on the page shell, card and fields. */
html[data-theme="dark"]:has(.hvo-onboarding-page) :is(
  .hvo-onboarding-page,
  .hvo-onboarding-page .hvo-control,
  .hvo-onboarding-page .hvo-select
) { background: #131313; }

html[data-theme="dark"]:has(.hvo-onboarding-page) .hvo-onboarding-card {
  background: rgba(255, 255, 255, .04);
}

/* Accent surfaces keep their lime or blue in dark mode, so their INK must
   stay dark. This list is DERIVED, not guessed: it is every selector in
   hvo-pages{,-v5,-v6}.css that sets a SOLID lime or blue background.
   Regenerate it the same way if those stylesheets change. Both the surface
   and its text descendants are covered, because several descendants
   hardcode #fff which a container colour cannot override. */
html[data-theme="dark"]:has(.hvo-page) :is(
  .hvo-about-network,
  .hvo-about-facts article.is-blue,
  .hvo-about-facts article.is-lime,
  .hvo-contact-option.is-primary,
  .hvo-contact-option.is-wide,
  .hvo-language:nth-child(4n + 1),
  .hvo-language:nth-child(4n + 3),
  .hvo-mla-proof,
  .hvo-rate-table > div:not(.is-head):nth-child(3),
  .hvo-rate-table > div:not(.is-head):nth-child(4),
  .hvo-service-proof__facts article.is-blue,
  .hvo-service-proof__facts article.is-lime,
  .hvo-status-hero,
  .hvo-status-mark,
  .hvo-success-panel
),
html[data-theme="dark"]:has(.hvo-page) :is(
  .hvo-about-network,
  .hvo-about-facts article.is-blue,
  .hvo-about-facts article.is-lime,
  .hvo-contact-option.is-primary,
  .hvo-contact-option.is-wide,
  .hvo-language:nth-child(4n + 1),
  .hvo-language:nth-child(4n + 3),
  .hvo-mla-proof,
  .hvo-rate-table > div:not(.is-head):nth-child(3),
  .hvo-rate-table > div:not(.is-head):nth-child(4),
  .hvo-service-proof__facts article.is-blue,
  .hvo-service-proof__facts article.is-lime,
  .hvo-status-hero,
  .hvo-status-mark,
  .hvo-success-panel
) :is(strong, b, em, h1, h2, h3, h4, h5, p, li, span, div, td, th) {
  /* Deliberately does NOT redeclare --hvo-*-ink. Several of these surfaces
     use var(--hvo-*-ink) as their own BACKGROUND, so redeclaring it here
     turned the pill dark and its text dark at the same time. Only the muted
     token and the text colour are safe to set. */
  --hvo-v5-muted: #4a4a4a;
  --hvo-v6-muted: #4a4a4a;
  --hvo-muted: #4a4a4a;
  color: #131313;
}

/* Cards painted with the INK token are deliberately dark with white text.
   The dark-mode token flip turns ink white, so the card and its text both
   go white. Pin them to a raised dark surface instead. */
html[data-theme="dark"]:has(.hvo-page) .hvo-service-proof__facts article.is-dark {
  background: #232323;
  color: #fff;
}

/* v5 repaints .hvo-status-mark translucent-white; restore the lime it has
   in hvo-pages.css so the dark-ink rule above is correct for it. */
html[data-theme="dark"]:has(.hvo-page) .hvo-status-mark {
  background: var(--hvo-lime);
}

/* Spec panels: the plain variant is a soft surface, the .is-dark variant is a
   deliberately dark stage that keeps white text in both themes. Pin both so
   neither can invert into a white-on-white panel. */
html[data-theme="dark"]:has(.hvo-page) .hvo-spec-panel { background: #1a1a1a; }
html[data-theme="dark"]:has(.hvo-page) .hvo-spec-panel.is-dark {
  background: #232323;
  color: #fff;
}

/* The onboarding eyebrow sits on the blue accent block, so it needs dark ink
   rather than the muted grey it inherits. */
html[data-theme="dark"]:has(.hvo-onboarding-page) .hvo-onboarding-eyebrow {
  color: #131313;
}

/* Last three hardcoded light-mode text colours that v5 sets directly, so no
   token can reach them. Each is the dark counterpart of one v5 declaration. */
html[data-theme="dark"]:has(.hvo-page) .hvo-field-label {
  color: #a8a8a8;                      /* v5: #3f3f3b */
}
html[data-theme="dark"]:has(.hvo-page) .hvo-stage-hero .hvo-kicker {
  color: rgba(255, 255, 255, .68);     /* v5: rgba(21,21,21,.68) */
}
html[data-theme="dark"]:has(.hvo-page) .hvo-page-lede {
  color: rgba(255, 255, 255, .72);     /* v5: rgba(21,21,21,.72) */
}

/* Pricing note card .is-lime (2026-08-21). Light mode uses a 45%-alpha lime
   that reads as pale lime over white. Over the dark page the same alpha
   composites to olive rgb(107,125,61), and its muted body text measured
   1.91:1. In dark, paint it solid lime like every other accent surface so
   the dark-ink accent rule above applies cleanly. Dark-gated only. */
html[data-theme="dark"]:has(.hvo-page) .hvo-pricing-notes article.is-lime {
  background: var(--hvo-lime);
}
html[data-theme="dark"]:has(.hvo-page) .hvo-pricing-notes article.is-lime :is(h3, p, span, strong) {
  color: #131313;
}