/* Harborline IPTV component styles (D35 futuristic layer on the D24 brief).
   Tokens live in style.css (stages hl-tokens, hl-tokens-depth, hl-tokens-paper-scope); this file holds no raw hex.
   Enqueued after the child style.css, which is enqueued after Astra, so equal-specificity rules here win.
   Scoping: header, footer, float and hl- utilities are site-wide components with an hl- prefix; home sections sit
   under body.hl-home, long reads under body.hl-paper-page, the product page under body.single-product.
   No !important outside the reduced-motion block (scripts/check_theme_css.py). */

/* ===== STAGE hl-astra-frame BEGIN ===== */
/* Astra frame: dark page, full-bleed home, no Astra title or boxed background on our templates. */
body.hl-home,
body.hl-product,
body.hl-paper-page {
  background: var(--hl-bg);
  color: var(--hl-text);
  margin: 0;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

html {
  scroll-padding-top: calc(var(--hl-header-h) + 16px);
  scrollbar-color: var(--hl-surface-2) var(--hl-bg);
}

body.hl-home .site-content > .ast-container {
  display: block;
  max-width: none;
  padding-inline: 0;
  width: 100%;
}

body.hl-home #primary,
body.hl-home .site-main,
body.hl-home .site-main > article,
body.hl-home .entry-content {
  background: transparent;
  border: 0;
  margin: 0;
  max-width: none;
  padding: 0;
  width: 100%;
}

body.hl-home .entry-content > section {
  margin: 0;
  max-width: none;
}

body.hl-home .entry-header,
body.hl-home .entry-footer,
body.hl-home .ast-breadcrumbs-wrapper {
  display: none;
}

body.hl-paper-page .ast-separate-container .ast-article-single,
body.hl-paper-page .ast-separate-container .ast-article-post,
body.hl-product .ast-separate-container .ast-article-single {
  background: transparent;
}
/* ===== STAGE hl-astra-frame END ===== */

/* ===== STAGE hl-shared BEGIN ===== */
.hl-wrap {
  margin-inline: auto;
  width: min(100% - 2 * var(--hl-gutter), 1200px);
}

.hl-icon {
  display: block;
  fill: none;
  flex: none;
  height: 24px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  width: 24px;
}

.hl-sprite {
  height: 0;
  overflow: hidden;
  position: absolute;
  width: 0;
}

.hl-glass {
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  background: var(--hl-glass);
  border: 1px solid var(--hl-hair);
  box-shadow: inset 0 1px 0 var(--hl-glass-hi), var(--hl-deep);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hl-glass,
  .hl-header {
    background: var(--hl-surface);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .hl-glass,
  .hl-header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--hl-surface);
  }
}

.hl-eyebrow {
  align-items: center;
  color: var(--hl-accent);
  display: inline-flex;
  font: 600 0.875rem/1.3 var(--hl-font-body);
  gap: 12px;
  letter-spacing: 0.04em;
}

.hl-eyebrow::before {
  background: var(--hl-accent);
  content: "";
  height: 1px;
  width: 28px;
}

/* Buttons: refines the hl-buttons stage of style.css with the lit states of the addendum. */
.hl-btn {
  border: 1.5px solid transparent;
  font: 600 1rem/1.2 var(--hl-font-body);
  gap: 0.5rem;
  padding: 0 1.5rem;
  text-decoration: none;
  transition:
    background-color 0.2s var(--hl-ease-out),
    border-color 0.2s,
    box-shadow 0.2s var(--hl-ease-out),
    color 0.2s,
    transform 0.2s var(--hl-ease-out);
  white-space: nowrap;
}

.hl-btn .hl-icon {
  height: 20px;
  width: 20px;
}

.hl-btn.hl-btn--primary,
.hl-btn.hl-btn--primary:visited {
  background: var(--hl-accent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--hl-text) 45%, transparent);
  color: var(--hl-on-accent);
}

.hl-btn.hl-btn--primary:hover,
.hl-btn.hl-btn--primary:focus-visible {
  background: var(--hl-accent-hover);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--hl-text) 45%, transparent), var(--hl-lift);
  color: var(--hl-on-accent);
  text-decoration: none;
  transform: translateY(-2px);
}

.hl-btn.hl-btn--ghost,
.hl-btn.hl-btn--ghost:visited {
  background: transparent;
  border-color: var(--hl-text-muted);
  color: var(--hl-text);
}

.hl-btn.hl-btn--ghost:hover,
.hl-btn.hl-btn--ghost:focus-visible {
  background: var(--hl-surface-2);
  border-color: var(--hl-text);
  color: var(--hl-text);
  text-decoration: none;
  transform: translateY(-2px);
}

.hl-btn.hl-btn--primary:active,
.hl-btn.hl-btn--ghost:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 0.14s;
}

.hl-btn.hl-btn--sm {
  font-size: 0.9375rem;
  min-height: 44px;
  padding: 0 1rem;
}

.hl-btn.hl-btn--block {
  width: 100%;
}

.hl-cta {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hl-cta .hl-cta__line {
  color: var(--hl-text-muted);
  font-size: var(--hl-fs-small);
  line-height: 1.5;
  margin: 0;
  max-width: 36ch;
}
/* ===== STAGE hl-shared END ===== */

/* ===== STAGE hl-header BEGIN ===== */
.hl-header {
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  background: color-mix(in srgb, var(--hl-surface) 76%, transparent);
  border-bottom: 1px solid var(--hl-hair);
  color: var(--hl-text);
  height: var(--hl-header-h);
  position: sticky;
  top: 0;
  z-index: 100;
}

body.admin-bar .hl-header {
  top: 32px;
}

body.admin-bar .hl-menu {
  top: calc(var(--hl-header-h) + 32px);
}

@media (max-width: 782px) {
  body.admin-bar .hl-header {
    top: 46px;
  }

  body.admin-bar .hl-menu {
    top: calc(var(--hl-header-h) + 46px);
  }
}

@media (max-width: 600px) {
  body.admin-bar .hl-header {
    top: 0;
  }
}

@supports (animation-timeline: scroll()) {
  .hl-header {
    animation: hl-header linear both;
    animation-range: 0 120px;
    animation-timeline: scroll(root);
  }

  @keyframes hl-header {
    from {
      background: color-mix(in srgb, var(--hl-bg) 18%, transparent);
      border-bottom-color: transparent;
    }
  }
}

.hl-header .hl-header__in {
  align-items: center;
  display: flex;
  gap: 16px;
  height: 100%;
}

.hl-header .hl-logo {
  border-radius: 4px;
  display: block;
  flex: none;
  margin-right: auto;
  padding-block: 9px;
}

.hl-header .hl-logo img {
  display: block;
  height: 26px;
  width: auto;
}

.hl-header .hl-nav {
  display: none;
}

.hl-header .hl-nav ul {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hl-header .hl-nav a {
  align-items: center;
  border-radius: var(--hl-radius-pill);
  color: var(--hl-text-muted);
  display: inline-flex;
  font: 500 0.9375rem/1 var(--hl-font-body);
  min-height: 44px;
  padding: 0 12px;
  text-decoration: none;
  transition: color 0.2s, background-color 0.2s;
}

.hl-header .hl-nav a:hover,
.hl-header .hl-nav a:focus-visible {
  background: var(--hl-hair);
  color: var(--hl-text);
  text-decoration: none;
}

.hl-header .hl-nav a[aria-current="page"] {
  color: var(--hl-text);
  text-decoration: underline;
  text-decoration-color: var(--hl-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

.hl-header .hl-header__actions {
  align-items: center;
  display: flex;
  gap: 8px;
}

.hl-header .hl-header__actions .hl-btn--ghost {
  display: none;
}

.hl-header .hl-menu-btn,
.hl-header .hl-menu-btn:hover,
.hl-header .hl-menu-btn:focus {
  background: transparent;
  border: 1px solid var(--hl-hair);
  border-radius: var(--hl-radius-pill);
  box-shadow: none;
  color: var(--hl-text);
  cursor: pointer;
  display: inline-grid;
  height: 44px;
  margin: 0;
  min-height: 0;
  padding: 0;
  place-items: center;
  width: 44px;
}

.hl-header .hl-menu-btn:hover {
  background: var(--hl-surface-2);
}

.hl-header .hl-menu-btn .hl-icon {
  height: 20px;
  width: 20px;
}

.hl-menu {
  background: var(--hl-surface);
  inset: var(--hl-header-h) 0 0;
  overflow-y: auto;
  padding: 24px var(--hl-gutter);
  position: fixed;
  z-index: 200;
}

.hl-menu[hidden] {
  display: none;
}

.hl-menu ul {
  list-style: none;
  margin: 24px 0;
  padding: 0;
}

.hl-menu li a {
  align-items: center;
  border-bottom: 1px solid var(--hl-hair);
  color: var(--hl-text);
  display: flex;
  font-weight: 600;
  min-height: 48px;
  text-decoration: none;
}

.hl-menu li a:hover,
.hl-menu li a:focus-visible {
  color: var(--hl-accent-hover);
  text-decoration: none;
}

.hl-menu__ctas {
  display: grid;
  gap: 16px;
}

.hl-menu__foot {
  color: var(--hl-text-muted);
  font-size: var(--hl-fs-small);
  margin: 0;
}

@media (min-width: 1024px) {
  .hl-header .hl-nav {
    display: block;
  }

  .hl-header .hl-menu-btn,
  .hl-menu {
    display: none;
  }

  .hl-header .hl-header__actions .hl-btn--ghost {
    display: inline-flex;
  }

  .hl-header .hl-logo img {
    height: 28px;
  }
}
/* ===== STAGE hl-header END ===== */

/* ===== STAGE hl-footer BEGIN ===== */
.hl-footer {
  background: var(--hl-surface);
  border-top: 1px solid var(--hl-hair);
  color: var(--hl-text);
  padding: 56px 0 104px;
}

.hl-footer .hl-footer__statement {
  border-bottom: 1px solid var(--hl-hair);
  margin: 0 0 40px;
  padding-bottom: 32px;
}

.hl-footer .hl-footer__statement-line {
  font: 700 clamp(1.75rem, 1.25rem + 2.1vw, 2.75rem)/1.05 var(--hl-font-head);
  letter-spacing: -0.03em;
  margin: 0;
}

.hl-footer .hl-footer__statement-brand {
  color: var(--hl-text-muted);
  margin: 8px 0 0;
}

.hl-footer .hl-footer__cols {
  display: grid;
  gap: 32px 24px;
  grid-template-columns: 1fr 1fr;
}

.hl-footer .hl-footer__cols h2 {
  color: var(--hl-text-muted);
  font: 600 0.875rem/1.3 var(--hl-font-body);
  letter-spacing: 0.02em;
  margin: 0 0 8px;
}

.hl-footer .hl-footer__cols ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hl-footer .hl-footer__cols a {
  align-items: center;
  color: var(--hl-text);
  display: flex;
  font-size: 0.9375rem;
  min-height: 44px;
  text-decoration: none;
}

.hl-footer .hl-footer__cols a:hover,
.hl-footer .hl-footer__cols a:focus-visible {
  color: var(--hl-accent-hover);
  text-decoration: none;
}

.hl-footer .hl-footer__note {
  color: var(--hl-text-muted);
  font-size: var(--hl-fs-small);
  line-height: 1.5;
  margin: 8px 0 0;
  max-width: 30ch;
}

.hl-footer .hl-footer__email {
  color: var(--hl-text);
  font-size: 0.9375rem;
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}

.hl-footer .hl-footer__bar {
  align-items: center;
  border-top: 1px solid var(--hl-hair);
  color: var(--hl-text-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--hl-fs-small);
  gap: 16px;
  justify-content: space-between;
  margin-top: 40px;
  padding-top: 24px;
}

.hl-footer .hl-footer__bar img {
  display: block;
  height: 22px;
  width: auto;
}

@media (min-width: 1024px) {
  .hl-footer {
    padding-bottom: 48px;
  }

  .hl-footer .hl-footer__cols {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* ===== STAGE hl-footer END ===== */

/* ===== STAGE hl-float BEGIN ===== */
/* The only float on the site (brief 5.15). On the home it waits until the hero has scrolled away (harborline.js adds
   is-shown); without JavaScript the hl-js class is never set, so the button is simply visible. */
.hl-float,
.hl-float:visited {
  align-items: center;
  background: var(--hl-accent);
  border-radius: var(--hl-radius-pill);
  bottom: 16px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--hl-text) 45%, transparent), var(--hl-lift);
  color: var(--hl-on-accent);
  display: inline-flex;
  font: 600 0.9375rem/1 var(--hl-font-body);
  gap: 8px;
  height: 56px;
  justify-content: center;
  position: fixed;
  right: 16px;
  text-decoration: none;
  transition:
    background-color 0.2s,
    opacity 0.24s var(--hl-ease-out),
    transform 0.24s var(--hl-ease-out),
    visibility 0.24s;
  width: 56px;
  z-index: 300;
}

.hl-float:hover,
.hl-float:focus-visible {
  background: var(--hl-accent-hover);
  color: var(--hl-on-accent);
  text-decoration: none;
  transform: translateY(-2px);
}

.hl-float span {
  display: none;
}

html.hl-js body.hl-home .hl-float:not(.is-shown) {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  visibility: hidden;
}

body.hl-menu-open .hl-float {
  display: none;
}

@media (min-width: 768px) {
  .hl-float,
  .hl-float:visited {
    bottom: 24px;
    right: 24px;
  }
}

@media (min-width: 1024px) {
  .hl-float,
  .hl-float:visited {
    height: 52px;
    padding: 0 20px 0 16px;
    width: auto;
  }

  .hl-float span {
    display: inline;
  }
}
/* ===== STAGE hl-float END ===== */

/* ===== STAGE hl-home-base BEGIN ===== */
body.hl-home .entry-content p {
  margin: 0 0 1em;
  max-width: 65ch;
  text-wrap: pretty;
}

body.hl-home .entry-content .hl-cta__line {
  margin: 0;
  max-width: 36ch;
}

body.hl-home .entry-content h1,
body.hl-home .entry-content h2,
body.hl-home .entry-content h3 {
  color: var(--hl-text);
  font-family: var(--hl-font-head);
  margin: 0;
  text-wrap: balance;
}

body.hl-home .entry-content h2 {
  font-size: var(--hl-fs-h2);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
  max-width: 22ch;
}

body.hl-home .entry-content h3 {
  font-size: var(--hl-fs-h3);
  font-weight: 600;
  line-height: 1.3;
}

body.hl-home .entry-content a:not(.hl-btn):not(.chip) {
  color: var(--hl-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

body.hl-home .entry-content a:not(.hl-btn):not(.chip):hover {
  color: var(--hl-accent-hover);
}

body.hl-home .entry-content img,
body.hl-home .entry-content svg {
  display: block;
  max-width: 100%;
}

body.hl-home .entry-content figure {
  margin: 0;
}
/* ===== STAGE hl-home-base END ===== */

/* ===== STAGE hl-home-horizon BEGIN ===== */
body.hl-home .horizon {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

body.hl-home .horizon__sky {
  background:
    radial-gradient(70% 55% at 62% calc(100% - var(--hl-floor-h)), color-mix(in srgb, var(--hl-accent) 13%, transparent), transparent 70%),
    radial-gradient(40% 40% at 8% 0%, color-mix(in srgb, var(--hl-accent) 5%, transparent), transparent 70%);
  inset: 0;
  position: absolute;
}

body.hl-home .horizon__floor {
  bottom: 0;
  height: var(--hl-floor-h);
  left: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, var(--hl-bg) 30%, var(--hl-bg) 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, var(--hl-bg) 30%, var(--hl-bg) 62%, transparent 100%);
  overflow: hidden;
  perspective: 260px;
  perspective-origin: 50% 0%;
  position: absolute;
  right: 0;
}

body.hl-home .horizon__plane {
  height: 520%;
  left: -150%;
  overflow: hidden;
  position: absolute;
  right: -150%;
  top: 0;
  transform: rotateX(74deg);
  transform-origin: 50% 0;
}

body.hl-home .horizon__plane::before {
  background-image:
    linear-gradient(var(--hl-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--hl-grid) 1px, transparent 1px);
  background-position: 50% 0;
  background-size: 56px 56px;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: -56px;
}

body.hl-home .horizon__line {
  background: linear-gradient(90deg, transparent, var(--hl-accent) 16%, var(--hl-accent-hover) 50%, var(--hl-accent) 84%, transparent);
  bottom: var(--hl-floor-h);
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
}

body.hl-home .horizon__bloom {
  background: radial-gradient(50% 50% at 50% 50%, var(--hl-bloom), transparent 72%);
  bottom: calc(var(--hl-floor-h) - 70px);
  height: 140px;
  left: 6%;
  position: absolute;
  right: 6%;
}
/* ===== STAGE hl-home-horizon END ===== */

/* ===== STAGE hl-home-hero BEGIN ===== */
body.hl-home .hero {
  isolation: isolate;
  padding-top: 40px;
  position: relative;
}

body.hl-home .hero .horizon__sky {
  background:
    radial-gradient(70% 45% at 62% 100%, color-mix(in srgb, var(--hl-accent) 12%, transparent), transparent 70%),
    radial-gradient(40% 40% at 8% 0%, color-mix(in srgb, var(--hl-accent) 5%, transparent), transparent 70%);
}

body.hl-home .hero__grid {
  display: grid;
  gap: 40px;
  position: relative;
  z-index: 1;
}

body.hl-home .hero__copy {
  min-width: 0;
}

body.hl-home .entry-content .hero h1 {
  font-size: var(--hl-fs-display);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.02;
  margin: 16px 0 20px;
  max-width: 13em;
}

body.hl-home .entry-content .answer {
  color: var(--hl-text-soft);
  font-size: var(--hl-fs-lead);
  line-height: 1.55;
  margin: 0;
  max-width: 60ch;
}

body.hl-home .honesty {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}

body.hl-home .honesty li {
  align-items: center;
  color: var(--hl-text);
  display: inline-flex;
  font-size: 0.9375rem;
  font-weight: 600;
  gap: 8px;
}

body.hl-home .honesty .hl-icon {
  color: var(--hl-success);
  height: 18px;
  stroke-width: 2;
  width: 18px;
}

body.hl-home .hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 24px;
  margin-top: 28px;
}

/* Order route panel (the hero diagram). */
body.hl-home .route {
  border-radius: var(--hl-radius-panel);
  margin: 0;
  padding: 22px;
  position: relative;
  width: 100%;
}

body.hl-home .route__head {
  align-items: center;
  border-bottom: 1px solid var(--hl-hair);
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 18px;
}

body.hl-home .route__head img {
  border-radius: 8px;
  height: 32px;
  width: 32px;
}

body.hl-home .route__head b {
  font: 600 0.9375rem/1.2 var(--hl-font-body);
}

body.hl-home .route__head span {
  color: var(--hl-text-muted);
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  margin-top: 2px;
}

body.hl-home .route__steps {
  display: grid;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

body.hl-home .route__steps::before,
body.hl-home .route__steps::after {
  background: var(--hl-hair);
  bottom: 20px;
  content: "";
  left: 17.5px;
  position: absolute;
  top: 20px;
  width: 1px;
}

body.hl-home .route__steps::after {
  background: linear-gradient(var(--hl-accent), color-mix(in srgb, var(--hl-accent) 40%, transparent));
  transform-origin: 50% 0;
}

body.hl-home .route__node {
  align-items: center;
  column-gap: 16px;
  display: grid;
  grid-template-columns: 36px 1fr;
  position: relative;
}

body.hl-home .route__dot {
  background: color-mix(in srgb, var(--hl-accent) 16%, var(--hl-surface));
  border: 1px solid var(--hl-accent);
  border-radius: 50%;
  color: var(--hl-accent);
  display: grid;
  grid-row: span 2;
  height: 36px;
  place-items: center;
  position: relative;
  width: 36px;
  z-index: 1;
}

body.hl-home .route__dot .hl-icon {
  height: 18px;
  width: 18px;
}

body.hl-home .route__label {
  color: var(--hl-text);
  font: 600 1.0625rem/1.3 var(--hl-font-body);
}

body.hl-home .route__meta {
  color: var(--hl-text-muted);
  font-size: var(--hl-fs-small);
  line-height: 1.45;
}

body.hl-home .route__foot {
  align-items: center;
  border-top: 1px solid var(--hl-hair);
  color: var(--hl-text-muted);
  display: flex;
  font-size: 0.8125rem;
  gap: 12px;
  justify-content: space-between;
  margin-top: 22px;
  padding-top: 16px;
}

/* Scan strip on the horizon floor. */
body.hl-home .scan {
  border-radius: var(--hl-radius-panel);
  display: grid;
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  z-index: 1;
}

body.hl-home .scan li {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: 24px 1fr;
  padding: 20px;
}

body.hl-home .scan li + li {
  border-top: 1px solid var(--hl-hair);
}

body.hl-home .scan .hl-icon {
  color: var(--hl-accent);
  margin-top: 2px;
}

body.hl-home .entry-content .scan p {
  color: var(--hl-text-muted);
  font-size: 0.9875rem;
  line-height: 1.55;
  margin: 0;
}

body.hl-home .scan strong {
  color: var(--hl-text);
  font-weight: 600;
}

body.hl-home .hero__foot {
  margin-top: 16px;
  padding: 64px 0 40px;
  position: relative;
}

body.hl-home .horizon--ground {
  --hl-floor-h: calc(100% - 28px);
  inset: 0 calc(50% - 50vw);
  overflow: hidden;
}

body.hl-home .horizon--ground .horizon__floor {
  height: var(--hl-floor-h);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, var(--hl-bg) 22%, var(--hl-bg) 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, var(--hl-bg) 22%, var(--hl-bg) 70%, transparent 100%);
}

@media (min-width: 768px) {
  body.hl-home .hero {
    padding-top: 64px;
  }

  body.hl-home .scan {
    grid-template-columns: repeat(3, 1fr);
  }

  body.hl-home .scan li {
    padding: 24px;
  }

  body.hl-home .scan li + li {
    border-left: 1px solid var(--hl-hair);
    border-top: 0;
  }

  body.hl-home .hero__foot {
    padding: 88px 0 56px;
  }
}

@media (min-width: 1024px) {
  body.hl-home .entry-content .hero h1 {
    margin-bottom: 24px;
  }

  body.hl-home .hero__grid {
    align-items: end;
    column-gap: 48px;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }

  body.hl-home .route {
    justify-self: end;
    margin-bottom: 8px;
    max-width: 440px;
    transform: perspective(1400px) rotateY(-9deg) rotateX(3deg);
    transform-origin: 100% 60%;
  }

  body.hl-home .route::after {
    background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--hl-accent) 22%, transparent), transparent 70%);
    border-radius: 50%;
    bottom: -34px;
    content: "";
    height: 24px;
    left: 8%;
    position: absolute;
    right: 8%;
  }

  body.hl-home .hero__foot {
    margin-top: 24px;
    padding: 120px 0 80px;
  }
}
/* ===== STAGE hl-home-hero END ===== */

/* ===== STAGE hl-home-sections BEGIN ===== */
body.hl-home .section {
  padding-block: 72px;
  position: relative;
}

body.hl-home .section--line {
  border-top: 1px solid var(--hl-hair);
}

body.hl-home .section__head {
  display: grid;
  gap: 16px;
  margin-bottom: 40px;
}

body.hl-home .entry-content .section__head p {
  color: var(--hl-text-soft);
  margin: 0;
}

body.hl-home .entry-content .prose p {
  color: var(--hl-text-soft);
}

@media (min-width: 768px) {
  body.hl-home .section {
    padding-block: 88px;
  }
}

@media (min-width: 1024px) {
  body.hl-home .section {
    padding-block: 120px;
  }
}

/* How ordering works: three steps with a connector. */
body.hl-home .steps {
  display: grid;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

body.hl-home .steps::before,
body.hl-home .steps::after {
  background: var(--hl-hair);
  bottom: 12px;
  content: "";
  left: 22px;
  position: absolute;
  top: 12px;
  width: 1px;
}

body.hl-home .steps::after {
  background: var(--hl-accent);
  transform-origin: 50% 0;
}

body.hl-home .step {
  column-gap: 20px;
  display: grid;
  grid-template-columns: 44px 1fr;
  position: relative;
}

body.hl-home .step__num {
  background: var(--hl-bg);
  color: var(--hl-accent);
  font: 700 2.75rem/1 var(--hl-font-head);
  font-variant-numeric: lining-nums;
  grid-row: span 2;
  letter-spacing: -0.04em;
  padding-block: 4px;
  position: relative;
  text-align: center;
  z-index: 1;
}

@supports (-webkit-text-stroke: 1px) {
  body.hl-home .step__num {
    -webkit-text-stroke: 1.25px var(--hl-accent);
    color: transparent;
  }
}

body.hl-home .entry-content .step h3 {
  margin-top: 6px;
}

body.hl-home .entry-content .step p {
  color: var(--hl-text-soft);
  margin: 8px 0 0;
}

body.hl-home .after-steps {
  border-top: 1px solid var(--hl-hair);
  display: grid;
  gap: 24px;
  margin-top: 56px;
  padding-top: 40px;
}

body.hl-home .entry-content .after-steps .statement {
  color: var(--hl-text);
  font-size: var(--hl-fs-lead);
  line-height: 1.55;
  margin: 0;
}

body.hl-home .entry-content .after-steps p:last-child {
  align-self: end;
  color: var(--hl-text-muted);
  margin: 0;
}

@media (min-width: 1024px) {
  body.hl-home .steps {
    gap: 40px;
    grid-template-columns: repeat(3, 1fr);
  }

  body.hl-home .steps::before,
  body.hl-home .steps::after {
    bottom: auto;
    height: 1px;
    left: 0;
    right: 0;
    top: 40px;
    width: auto;
  }

  body.hl-home .steps::after {
    transform-origin: 0 50%;
  }

  body.hl-home .step {
    grid-template-columns: 1fr;
    padding-right: 16px;
  }

  body.hl-home .step__num {
    font-size: 5rem;
    justify-self: start;
    padding: 0 16px 0 0;
    text-align: left;
  }

  body.hl-home .entry-content .step h3 {
    margin-top: 28px;
  }

  body.hl-home .after-steps {
    column-gap: 56px;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}
/* ===== STAGE hl-home-sections END ===== */

/* ===== STAGE hl-home-pricing BEGIN ===== */
body.hl-home .builder {
  border-radius: var(--hl-radius-panel);
  display: grid;
  gap: 20px;
  margin: 0 0 24px;
  padding: 20px;
}

body.hl-home .builder fieldset {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
}

body.hl-home .builder legend {
  color: var(--hl-text-muted);
  font: 600 0.875rem/1.3 var(--hl-font-body);
  letter-spacing: 0.02em;
  margin-bottom: 10px;
  padding: 0;
}

body.hl-home .entry-content .builder__help {
  color: var(--hl-text-muted);
  font-size: var(--hl-fs-small);
  margin: 10px 0 0;
  max-width: 40ch;
}

body.hl-home .seg {
  background: var(--hl-bg);
  border: 1px solid var(--hl-hair);
  border-radius: 26px;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
}

body.hl-home .seg label {
  display: block;
  margin: 0;
  position: relative;
}

body.hl-home .seg input {
  cursor: pointer;
  height: 100%;
  inset: 0;
  margin: 0;
  opacity: 0;
  position: absolute;
  width: 100%;
  z-index: 1;
}

body.hl-home .seg span {
  align-items: center;
  border-radius: var(--hl-radius-pill);
  color: var(--hl-text-soft);
  display: inline-flex;
  font: 600 0.9375rem/1 var(--hl-font-body);
  font-variant-numeric: tabular-nums;
  gap: 6px;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 14px;
  transition: background-color 0.2s var(--hl-ease-out), color 0.2s, box-shadow 0.2s;
}

body.hl-home .seg label:hover span {
  background: var(--hl-surface-2);
  color: var(--hl-text);
}

body.hl-home .seg .tick {
  height: 12px;
  opacity: 0;
  stroke-width: 2.5;
  transform: scale(0.4);
  transition: transform 0.2s var(--hl-ease-out), opacity 0.2s;
  width: 12px;
}

body.hl-home .seg input:checked + span {
  background: var(--hl-accent);
  color: var(--hl-on-accent);
}

body.hl-home .seg input:checked + span .tick {
  opacity: 1;
  transform: none;
}

body.hl-home .seg input:focus-visible + span {
  outline: 2px solid var(--hl-focus);
  outline-offset: 2px;
}

body.hl-home .seg--digits span {
  min-width: 44px;
  padding: 0 10px;
}

@media (min-width: 1024px) {
  body.hl-home .builder {
    align-items: start;
    column-gap: 40px;
    grid-template-columns: auto auto minmax(0, 1fr);
    padding: 24px 28px;
  }

  body.hl-home .builder fieldset:last-child {
    justify-self: end;
  }
}

body.hl-home .plans {
  display: grid;
  gap: 16px;
}

body.hl-home .plan {
  background: var(--hl-surface);
  border: 1px solid var(--hl-border);
  border-radius: var(--hl-radius-card);
  display: flex;
  flex-direction: column;
  isolation: isolate;
  overflow: hidden;
  padding: 24px;
  position: relative;
  transition: border-color 0.2s, box-shadow 0.3s var(--hl-ease-out), transform 0.3s var(--hl-ease-out);
}

body.hl-home .plan::before {
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, -40%), color-mix(in srgb, var(--hl-accent) 14%, transparent), transparent 70%);
  content: "";
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 0.3s;
  z-index: -1;
}

body.hl-home .plan--premium {
  border-color: color-mix(in srgb, var(--hl-accent) 55%, transparent);
}

body.hl-home .plan--premium::after {
  background: linear-gradient(90deg, transparent, var(--hl-accent), transparent);
  content: "";
  height: 1px;
  left: 12%;
  position: absolute;
  right: 12%;
  top: 0;
  z-index: -1;
}

body.hl-home .plan--premium .plan__head::before {
  background: radial-gradient(50% 60% at 50% 0%, color-mix(in srgb, var(--hl-accent) 14%, transparent), transparent 75%);
  content: "";
  height: 120px;
  left: 10%;
  pointer-events: none;
  position: absolute;
  right: 10%;
  top: 0;
  z-index: -1;
}

body.hl-home .pricing:has(#tier-premium:checked) .plan--premium,
body.hl-home .pricing:has(#tier-standard:checked) .plan--standard {
  border-color: var(--hl-accent);
  box-shadow: var(--hl-lift);
}

@media (max-width: 767.98px) {
  body.hl-home .pricing:has(#tier-premium:checked) .plan--standard,
  body.hl-home .pricing:has(#tier-standard:checked) .plan--premium {
    display: none;
  }
}

body.hl-home .plan__head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

body.hl-home .entry-content .plan__head h3 {
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

body.hl-home .badge {
  align-items: center;
  background: var(--hl-accent);
  border-radius: var(--hl-radius-pill);
  color: var(--hl-on-accent);
  display: inline-flex;
  font: 600 0.8125rem/1 var(--hl-font-body);
  min-height: 28px;
  padding: 0 12px;
}

body.hl-home .entry-content .plan__sum {
  color: var(--hl-text-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 10px 0 20px;
  min-height: 3em;
}

body.hl-home .bundle {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

body.hl-home .bundle li {
  display: grid;
  gap: 6px;
  justify-items: center;
}

body.hl-home .bundle i {
  background: var(--hl-surface-2);
  border: 1px solid var(--hl-border);
  border-radius: 50%;
  color: var(--hl-text);
  display: grid;
  height: 36px;
  place-items: center;
  width: 36px;
}

body.hl-home .bundle .hl-icon {
  height: 18px;
  width: 18px;
}

body.hl-home .bundle .is-extra i {
  border-color: color-mix(in srgb, var(--hl-accent) 60%, transparent);
  color: var(--hl-accent);
}

body.hl-home .bundle small {
  color: var(--hl-text-muted);
  font-size: 0.75rem;
  line-height: 1;
}

@media (max-width: 767.98px) {
  body.hl-home .bundle small {
    clip: rect(0 0 0 0);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
}

body.hl-home .price-block {
  border-top: 1px solid var(--hl-hair);
  margin-top: auto;
  padding-top: 20px;
}

body.hl-home .price {
  align-items: flex-start;
  color: var(--hl-text);
  display: flex;
  font-family: var(--hl-font-head);
  font-size: var(--hl-fs-price);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 700;
  gap: 2px;
  letter-spacing: -0.035em;
  line-height: 1;
  min-height: 1em;
}

body.hl-home .price__roll {
  align-items: flex-start;
  display: flex;
}

body.hl-home .price__cur {
  color: var(--hl-text-soft);
  font-size: 0.5em;
  margin-right: 2px;
  margin-top: 0.1em;
}

body.hl-home .price__dec {
  font-size: 0.42em;
  letter-spacing: -0.01em;
  margin-top: 0.12em;
}

body.hl-home .price__per {
  align-self: flex-end;
  color: var(--hl-text-muted);
  font: 400 0.9375rem/1 var(--hl-font-body);
  letter-spacing: 0;
  margin: 0 0 0.35em 10px;
}

body.hl-home .entry-content .price__total {
  color: var(--hl-text);
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
  margin: 12px 0 2px;
}

body.hl-home .entry-content .price__alt {
  color: var(--hl-text-muted);
  font-size: var(--hl-fs-small);
  font-variant-numeric: tabular-nums;
  margin: 0 0 20px;
}

body.hl-home .plan .hl-cta {
  align-items: stretch;
}

body.hl-home .entry-content .plans__caption {
  color: var(--hl-text-muted);
  font-size: var(--hl-fs-small);
  margin: 16px 0 0;
  max-width: none;
}

body.hl-home .pricing__more {
  border-top: 1px solid var(--hl-hair);
  display: grid;
  gap: 32px;
  margin-top: 56px;
  padding-top: 40px;
}

body.hl-home .entry-content .pricing__more p {
  color: var(--hl-text-soft);
}

@media (min-width: 768px) {
  body.hl-home .plans {
    gap: 24px;
    grid-template-columns: 1fr 1fr;
  }

  body.hl-home .plan {
    padding: 32px;
  }
}

@media (min-width: 1024px) {
  body.hl-home .pricing__more {
    column-gap: 56px;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

@media (hover: hover) and (pointer: fine) {
  body.hl-home .plan:hover::before {
    opacity: 1;
  }

  body.hl-home .plan:hover {
    transform: translateY(-2px);
  }
}
/* ===== STAGE hl-home-pricing END ===== */

/* ===== STAGE hl-home-compare BEGIN ===== */
body.hl-home .compare {
  display: grid;
  gap: 40px;
}

body.hl-home .entry-content .compare h2 {
  margin-bottom: 20px;
}

body.hl-home .table-shell {
  background: var(--hl-surface);
  border: 1px solid var(--hl-border);
  border-radius: var(--hl-radius-card);
  overflow: hidden;
}

body.hl-home .cmp {
  border: 0;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  margin: 0;
  width: 100%;
}

body.hl-home .cmp th,
body.hl-home .cmp td {
  border: 0;
  padding: 14px 20px;
  text-align: left;
  vertical-align: top;
}

body.hl-home .cmp caption {
  border-top: 1px solid var(--hl-hair);
  caption-side: bottom;
  color: var(--hl-text-muted);
  font-size: var(--hl-fs-small);
  padding: 14px 20px;
  text-align: left;
}

body.hl-home .cmp thead th {
  border-bottom: 1px solid var(--hl-hair);
  color: var(--hl-text-muted);
  font: 600 0.875rem/1.3 var(--hl-font-body);
}

body.hl-home .cmp thead th.is-premium {
  color: var(--hl-accent);
}

body.hl-home .cmp tbody tr + tr th,
body.hl-home .cmp tbody tr + tr td {
  border-top: 1px solid var(--hl-hair);
}

body.hl-home .cmp tbody th {
  color: var(--hl-text);
  font-weight: 600;
  white-space: nowrap;
}

body.hl-home .cmp td {
  color: var(--hl-text-soft);
}

body.hl-home .cmp .is-premium {
  background: var(--hl-tint);
}

body.hl-home .cmp td.is-premium {
  color: var(--hl-text);
}

@media (max-width: 599.98px) {
  body.hl-home .cmp thead {
    clip: rect(0 0 0 0);
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
  }

  body.hl-home .cmp tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  body.hl-home .cmp tbody th {
    grid-column: 1 / -1;
    padding-bottom: 4px;
  }

  body.hl-home .cmp tbody tr + tr td {
    border-top: 0;
  }

  body.hl-home .cmp td {
    padding-top: 6px;
  }

  body.hl-home .cmp td::before {
    color: var(--hl-text-muted);
    content: attr(data-label);
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 4px;
  }

  body.hl-home .cmp td.is-premium::before {
    color: var(--hl-accent);
  }
}

@media (min-width: 1024px) {
  body.hl-home .compare {
    align-items: start;
    column-gap: 64px;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}
/* ===== STAGE hl-home-compare END ===== */

/* ===== STAGE hl-home-trial BEGIN ===== */
body.hl-home .trial {
  align-items: center;
  display: grid;
  gap: 48px;
}

body.hl-home .entry-content .trial__copy h2 + .prose {
  margin-top: 20px;
}

body.hl-home .entry-content .trial__copy .prose p:last-of-type {
  margin-bottom: 28px;
}

body.hl-home .trial__stage {
  align-items: end;
  background: var(--hl-surface);
  border: 1px solid var(--hl-hair);
  border-radius: 24px;
  display: grid;
  isolation: isolate;
  justify-items: center;
  margin: 0;
  min-height: 420px;
  overflow: hidden;
  padding: 40px 24px 0;
  position: relative;
}

body.hl-home .trial__stage .horizon {
  --hl-floor-h: 120px;
}

body.hl-home .phone {
  background: var(--hl-surface-2);
  border: 1px solid color-mix(in srgb, var(--hl-text) 16%, transparent);
  border-bottom: 0;
  border-radius: 36px 36px 0 0;
  box-shadow: inset 0 1px 0 var(--hl-glass-hi), var(--hl-deep);
  height: 380px;
  margin-bottom: -40px;
  padding: 12px 12px 0;
  position: relative;
  width: 236px;
  z-index: 1;
}

body.hl-home .phone__screen {
  background: var(--hl-bg);
  border-radius: 26px 26px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: 18px 14px;
}

body.hl-home .phone__top {
  align-items: center;
  border-bottom: 1px solid var(--hl-hair);
  display: flex;
  gap: 10px;
  padding-bottom: 12px;
}

body.hl-home .phone__top img {
  border-radius: 7px;
  height: 28px;
  width: 28px;
}

body.hl-home .phone__top span {
  color: var(--hl-text);
  font: 600 0.8125rem/1.2 var(--hl-font-body);
}

body.hl-home .bubble {
  align-self: flex-end;
  background: color-mix(in srgb, var(--hl-accent) 22%, var(--hl-surface));
  border: 1px solid color-mix(in srgb, var(--hl-accent) 35%, transparent);
  border-radius: 14px 14px 4px 14px;
  color: var(--hl-text);
  font-size: 0.8125rem;
  line-height: 1.45;
  max-width: 86%;
  padding: 10px 12px;
}

@media (min-width: 1024px) {
  body.hl-home .trial {
    column-gap: 72px;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  body.hl-home .trial__stage {
    min-height: 520px;
    order: -1;
  }

  body.hl-home .phone {
    height: 440px;
    width: 260px;
  }
}
/* ===== STAGE hl-home-trial END ===== */

/* ===== STAGE hl-home-devices BEGIN ===== */
body.hl-home .band {
  background: var(--hl-surface-2);
  border-radius: 24px;
  display: grid;
  gap: 32px;
  isolation: isolate;
  overflow: hidden;
  padding: 24px;
  position: relative;
}

body.hl-home .band__chips {
  align-content: start;
  display: grid;
  gap: 16px;
}

body.hl-home .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

body.hl-home .entry-content a.chip,
body.hl-home .entry-content a.chip:visited {
  align-items: center;
  background: var(--hl-surface);
  border: 1px solid var(--hl-text-muted);
  border-radius: var(--hl-radius-pill);
  color: var(--hl-text);
  display: inline-flex;
  font: 600 0.9375rem/1 var(--hl-font-body);
  gap: 8px;
  min-height: 44px;
  padding: 0 16px 0 12px;
  text-decoration: none;
  transition: border-color 0.2s, background-color 0.2s, transform 0.2s var(--hl-ease-out), box-shadow 0.2s;
}

body.hl-home .chip .hl-icon {
  color: var(--hl-accent);
  height: 20px;
  width: 20px;
}

body.hl-home .entry-content a.chip:hover,
body.hl-home .entry-content a.chip:focus-visible {
  background: var(--hl-tint);
  border-color: var(--hl-accent);
  color: var(--hl-text);
  text-decoration: none;
  transform: translateY(-2px);
}

body.hl-home .entry-content a.chip:active {
  transform: scale(0.98);
}

body.hl-home .devices-fig {
  margin: 0;
}

body.hl-home .entry-content .devices-art {
  height: auto;
  width: 100%;
}

body.hl-home .dv-body {
  fill: var(--hl-surface);
  stroke: color-mix(in srgb, var(--hl-text) 18%, transparent);
  stroke-width: 1.5;
}

body.hl-home .dv-screen {
  fill: var(--hl-bg);
}

body.hl-home .dv-line {
  opacity: 0.6;
  stroke: var(--hl-accent);
  stroke-width: 1;
}

body.hl-home .devices-after {
  display: grid;
  gap: 8px 56px;
  margin-top: 40px;
}

body.hl-home .entry-content .devices-after p {
  color: var(--hl-text-soft);
}

@media (min-width: 1024px) {
  body.hl-home .band {
    align-items: center;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    padding: 40px;
  }

  body.hl-home .devices-after {
    grid-template-columns: 1fr 1fr;
  }
}
/* ===== STAGE hl-home-devices END ===== */

/* ===== STAGE hl-home-bento BEGIN ===== */
body.hl-home .bento {
  display: grid;
  gap: 16px;
}

body.hl-home .cell {
  background: var(--hl-surface);
  border: 1px solid var(--hl-hair);
  border-radius: var(--hl-radius-panel);
  isolation: isolate;
  overflow: hidden;
  padding: 28px 24px;
  position: relative;
}

body.hl-home .entry-content .cell h2 {
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem);
  margin-bottom: 16px;
}

body.hl-home .entry-content .cell p {
  color: var(--hl-text-soft);
}

body.hl-home .entry-content .cell p:last-child {
  margin-bottom: 0;
}

body.hl-home .cell--legal {
  padding-bottom: 72px;
}

body.hl-home .cell--legal .horizon {
  --hl-floor-h: 56px;
}

body.hl-home .entry-content .cell--lineup .meridians {
  color: color-mix(in srgb, var(--hl-accent) 30%, transparent);
  height: 260px;
  position: absolute;
  right: -60px;
  top: -60px;
  width: 260px;
  z-index: -1;
}

body.hl-home .cell--support {
  background: var(--hl-tint);
  border-color: color-mix(in srgb, var(--hl-accent) 30%, transparent);
}

body.hl-home .cell--support .hl-btn {
  margin-top: 8px;
}

@media (min-width: 768px) {
  body.hl-home .cell {
    padding: 36px;
  }

  body.hl-home .cell--legal {
    padding-bottom: 96px;
  }
}

@media (min-width: 1024px) {
  body.hl-home .bento {
    gap: 20px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  body.hl-home .cell--legal {
    grid-column: 1 / span 7;
  }

  body.hl-home .cell--lineup {
    grid-column: 8 / span 5;
    grid-row: 1 / span 2;
  }

  body.hl-home .cell--support {
    grid-column: 1 / span 7;
  }

  body.hl-home .entry-content .cell--lineup .meridians {
    height: 340px;
    right: -90px;
    top: -90px;
    width: 340px;
  }
}
/* ===== STAGE hl-home-bento END ===== */

/* ===== STAGE hl-home-claims BEGIN ===== */
body.hl-home .claims {
  display: grid;
  gap: 40px;
}

body.hl-home .entry-content .claims__intro h2 + p {
  margin-top: 20px;
}

body.hl-home .entry-content .claims__intro p {
  color: var(--hl-text-soft);
}

body.hl-home .claims__list {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
}

body.hl-home .claims__list li {
  border-top: 1px solid var(--hl-hair);
  display: grid;
  gap: 14px;
  grid-template-columns: 28px 1fr;
  padding: 20px 0;
}

body.hl-home .claims__list .hl-icon {
  color: var(--hl-accent);
  margin-top: 3px;
}

body.hl-home .entry-content .claims__list p {
  color: var(--hl-text-muted);
  font-size: 1rem;
  margin: 0;
}

body.hl-home .claims__list strong {
  color: var(--hl-text);
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: 4px;
}

body.hl-home .entry-content .claims__more {
  color: var(--hl-text-muted);
  margin-top: 24px;
}

@media (min-width: 768px) {
  body.hl-home .claims__list {
    column-gap: 40px;
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  body.hl-home .claims {
    column-gap: 64px;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  }

  body.hl-home .claims__intro {
    align-self: start;
    position: sticky;
    top: calc(var(--hl-header-h) + 32px);
  }
}
/* ===== STAGE hl-home-claims END ===== */

/* ===== STAGE hl-home-faq BEGIN ===== */
body.hl-home .faq {
  display: grid;
  gap: 32px;
}

body.hl-home .entry-content .faq__side p {
  color: var(--hl-text-soft);
  margin: 16px 0 24px;
}

body.hl-home .faq__list {
  border-top: 1px solid var(--hl-hair);
}

body.hl-home .faq details {
  border-bottom: 1px solid var(--hl-hair);
  margin: 0;
}

body.hl-home .faq summary {
  align-items: center;
  border-radius: 8px;
  color: var(--hl-text);
  cursor: pointer;
  display: flex;
  font: 600 1.125rem/1.35 var(--hl-font-body);
  gap: 16px;
  justify-content: space-between;
  list-style: none;
  min-height: 64px;
  padding: 12px 0;
}

body.hl-home .faq summary::-webkit-details-marker {
  display: none;
}

body.hl-home .faq summary:hover {
  color: var(--hl-accent-hover);
}

body.hl-home .chev {
  border: 1px solid var(--hl-border);
  border-radius: 50%;
  color: var(--hl-text);
  display: grid;
  flex: none;
  height: 32px;
  place-items: center;
  transition: transform 0.24s var(--hl-ease-out), background-color 0.2s, color 0.2s, border-color 0.2s;
  width: 32px;
}

body.hl-home .chev .hl-icon {
  height: 16px;
  stroke-width: 2;
  width: 16px;
}

body.hl-home .faq summary:hover .chev,
body.hl-home .faq details[open] .chev {
  background: var(--hl-accent);
  border-color: var(--hl-accent);
  color: var(--hl-on-accent);
}

body.hl-home .faq details[open] .chev {
  transform: rotate(180deg);
}

body.hl-home .entry-content .faq details p {
  color: var(--hl-text-soft);
  margin: 0 0 24px;
  padding-right: 48px;
}

body.hl-home .faq details::details-content {
  block-size: 0;
  overflow: hidden;
}

body.hl-home .faq details[open]::details-content {
  block-size: auto;
}

@media (min-width: 1024px) {
  body.hl-home .faq {
    column-gap: 64px;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  body.hl-home .faq__side {
    align-self: start;
    position: sticky;
    top: calc(var(--hl-header-h) + 24px);
  }
}
/* ===== STAGE hl-home-faq END ===== */

/* ===== STAGE hl-home-final BEGIN ===== */
body.hl-home .final {
  border-top: 1px solid var(--hl-hair);
  isolation: isolate;
  overflow: hidden;
  padding: 96px 0 72px;
  position: relative;
}

body.hl-home .final .horizon {
  --hl-floor-h: 150px;
}

body.hl-home .final__in {
  position: relative;
  z-index: 1;
}

body.hl-home .entry-content .statement-xl {
  color: var(--hl-text);
  font: 700 clamp(3rem, 1.9rem + 5.2vw, 6rem)/0.98 var(--hl-font-head);
  letter-spacing: -0.045em;
  margin: 0 0 36px;
  max-width: 12ch;
}

body.hl-home .final__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 24px;
  padding-bottom: 120px;
}

@media (min-width: 1024px) {
  body.hl-home .final {
    padding-top: 140px;
  }

  body.hl-home .final__ctas {
    padding-bottom: 170px;
  }
}
/* ===== STAGE hl-home-final END ===== */

/* ===== STAGE hl-home-motion BEGIN ===== */
/* Addendum section 4: every moment runs only with prefers-reduced-motion: no-preference. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  body.hl-home .horizon__line {
    animation: hl-line 0.9s 0.15s var(--hl-ease-out) both;
  }

  body.hl-home .horizon__bloom {
    animation: hl-fade 1.2s 0.35s var(--hl-ease-out) both;
  }

  body.hl-home .hero .horizon__plane::before,
  body.hl-home .final .horizon__plane::before {
    animation: hl-drift 14s linear infinite;
  }

  body.hl-home .route__steps::after {
    animation: hl-rail 1.4s 0.9s var(--hl-ease-io) both;
  }

  body.hl-home .route__node .route__dot {
    animation: hl-node 0.26s var(--hl-ease-out) both;
  }

  body.hl-home .route__node:nth-child(1) .route__dot {
    animation-delay: 0.9s;
  }

  body.hl-home .route__node:nth-child(2) .route__dot {
    animation-delay: 1.35s;
  }

  body.hl-home .route__node:nth-child(3) .route__dot {
    animation-delay: 1.8s;
  }

  @supports (animation-timeline: view()) {
    body.hl-home .steps::after {
      animation: hl-fill-y linear both;
      animation-range: entry 30% cover 55%;
      animation-timeline: view();
    }

    @media (min-width: 1024px) {
      body.hl-home .steps::after {
        animation-name: hl-fill-x;
      }
    }
  }

  body.hl-home .faq details::details-content {
    transition: block-size 0.24s var(--hl-ease-out), content-visibility 0.24s allow-discrete;
  }
}

@keyframes hl-line {
  from {
    opacity: 0;
    transform: scaleX(0);
  }
}

@keyframes hl-fade {
  from {
    opacity: 0;
  }
}

@keyframes hl-drift {
  to {
    transform: translateY(56px);
  }
}

@keyframes hl-rail {
  from {
    transform: scaleY(0);
  }
}

@keyframes hl-fill-y {
  from {
    transform: scaleY(0);
  }
}

@keyframes hl-fill-x {
  from {
    transform: scaleX(0);
  }
}

@keyframes hl-node {
  from {
    background: var(--hl-surface-2);
    border-color: var(--hl-border);
    box-shadow: none;
    color: var(--hl-text-muted);
  }
}
/* ===== STAGE hl-home-motion END ===== */

/* ===== STAGE hl-content BEGIN ===== */
/* Shared content components of the page and product drafts (content/pages, content/products). Token driven, so
   the same rules read on paper (long reads) and on dark (product pages). */
body.hl-paper-page .entry-content .harborline-answer,
body.hl-product .harborline-answer {
  background: var(--hl-surface);
  border-left: 4px solid var(--hl-accent);
  border-radius: var(--hl-radius-input);
  color: var(--hl-text);
  font-size: var(--hl-fs-lead);
  line-height: 1.55;
  margin: 0 0 32px;
  padding: 20px 24px;
}

body.hl-paper-page .entry-content .harborline-eyebrow,
body.hl-product .harborline-eyebrow {
  color: var(--hl-accent);
  font: 600 0.875rem/1.3 var(--hl-font-body);
  letter-spacing: 0.04em;
}

body.hl-paper-page .entry-content table,
body.hl-product .woocommerce-Tabs-panel table {
  border: 1px solid var(--hl-border);
  border-collapse: collapse;
  border-radius: var(--hl-radius-card);
  font-size: 0.9375rem;
  margin: 0 0 32px;
  width: 100%;
}

body.hl-paper-page .entry-content th,
body.hl-paper-page .entry-content td,
body.hl-product .woocommerce-Tabs-panel th,
body.hl-product .woocommerce-Tabs-panel td {
  border: 0;
  border-top: 1px solid var(--hl-border);
  color: var(--hl-text);
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
}

body.hl-paper-page .entry-content thead th,
body.hl-product .woocommerce-Tabs-panel thead th {
  background: var(--hl-surface);
  font-weight: 600;
}

body.hl-paper-page .entry-content caption,
body.hl-product .woocommerce-Tabs-panel caption {
  caption-side: bottom;
  color: var(--hl-text-muted);
  font-size: var(--hl-fs-small);
  padding: 10px 0 0;
  text-align: left;
}
/* ===== STAGE hl-content END ===== */

/* ===== STAGE hl-paper BEGIN ===== */
/* Paper variant for long reads (brief 2.2 and 5.13): the content area flips, header and footer stay dark. */
body.hl-paper-page .site-content {
  background: var(--hl-bg);
  color: var(--hl-text);
  color-scheme: light;
  line-height: 1.65;
}

body.hl-paper-page .site-content h1,
body.hl-paper-page .site-content h2,
body.hl-paper-page .site-content h3,
body.hl-paper-page .site-content h4,
body.hl-paper-page .site-content .entry-title {
  color: var(--hl-text);
  font-family: var(--hl-font-head);
  text-wrap: balance;
}

body.hl-paper-page .site-content .entry-title {
  font-size: var(--hl-fs-h1);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.12;
}

body.hl-paper-page .site-content .entry-content a:not(.hl-btn):not(.wp-block-button__link) {
  color: var(--hl-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

body.hl-paper-page .site-content .entry-content a:not(.hl-btn):not(.wp-block-button__link):hover {
  color: var(--hl-accent-hover);
}

body.hl-paper-page .site-content .entry-content p,
body.hl-paper-page .site-content .entry-content li {
  color: var(--hl-text);
}

body.hl-paper-page .site-content .entry-content hr {
  background: var(--hl-border);
  border: 0;
  height: 1px;
  margin: 40px 0;
}

body.hl-paper-page .site-content .entry-content figure img {
  border: 1px solid var(--hl-border);
  border-radius: 12px;
}

body.hl-paper-page .site-content .entry-content figcaption {
  color: var(--hl-text-muted);
  font-size: var(--hl-fs-small);
}

body.hl-paper-page .site-content .entry-content details {
  border-bottom: 1px solid var(--hl-border);
  padding: 12px 0;
}

body.hl-paper-page .site-content .entry-content summary {
  cursor: pointer;
  font-weight: 600;
  min-height: 44px;
}

body.hl-paper-page .site-content :focus-visible {
  outline-color: var(--hl-focus);
}
/* ===== STAGE hl-paper END ===== */

/* ===== STAGE hl-product BEGIN ===== */
/* Single product (the four /plans/ products): variation selects, price and add to cart in the dark harborline look. */
body.single-product div.product .product_title {
  color: var(--hl-text);
  font: 700 var(--hl-fs-h1)/1.12 var(--hl-font-head);
  letter-spacing: -0.02em;
}

body.single-product div.product .summary p.price,
body.single-product div.product .summary span.price,
body.single-product div.product .woocommerce-variation-price .price {
  color: var(--hl-text);
  font: 700 var(--hl-fs-price)/1 var(--hl-font-head);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.03em;
  margin: 8px 0 16px;
}

body.single-product div.product .summary .price .woocommerce-Price-currencySymbol {
  font-size: 0.5em;
  vertical-align: 0.6em;
}

body.single-product div.product form.cart.variations_form {
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  background: var(--hl-glass);
  border: 1px solid var(--hl-hair);
  border-radius: var(--hl-radius-panel);
  box-shadow: inset 0 1px 0 var(--hl-glass-hi), var(--hl-deep);
  margin: 24px 0;
  padding: 20px;
}

body.single-product div.product form.cart table.variations {
  border: 0;
  margin: 0 0 16px;
  width: 100%;
}

body.single-product div.product form.cart table.variations tr {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

body.single-product div.product form.cart table.variations th,
body.single-product div.product form.cart table.variations td {
  background: transparent;
  border: 0;
  display: block;
  padding: 0;
  text-align: left;
}

body.single-product div.product form.cart table.variations th.label label,
body.single-product div.product form.cart table.variations td.label label {
  color: var(--hl-text-muted);
  font: 600 0.875rem/1.3 var(--hl-font-body);
  letter-spacing: 0.02em;
}

body.single-product div.product form.cart table.variations select {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--hl-bg);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--hl-text-muted) 50%),
    linear-gradient(135deg, var(--hl-text-muted) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-repeat: no-repeat;
  background-size: 6px 6px, 6px 6px;
  border: 1px solid var(--hl-border);
  border-radius: var(--hl-radius-input);
  color: var(--hl-text);
  font: 600 1rem/1.2 var(--hl-font-body);
  min-height: 48px;
  padding: 0 44px 0 16px;
  width: 100%;
}

body.single-product div.product form.cart table.variations select:hover {
  border-color: var(--hl-text-muted);
}

body.single-product div.product form.cart table.variations select:focus-visible {
  border-color: var(--hl-accent);
  outline: 2px solid var(--hl-focus);
  outline-offset: 2px;
}

body.single-product div.product form.cart .reset_variations {
  color: var(--hl-text-muted);
  display: inline-block;
  font-size: var(--hl-fs-small);
  margin-top: 8px;
}

body.single-product div.product form.cart .woocommerce-variation-description,
body.single-product div.product form.cart .woocommerce-variation-availability {
  color: var(--hl-text-muted);
  font-size: var(--hl-fs-small);
}

body.single-product div.product form.cart .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

body.single-product div.product form.cart button.single_add_to_cart_button,
body.single-product div.product form.cart button.single_add_to_cart_button.alt {
  background: var(--hl-accent);
  border: 1.5px solid transparent;
  border-radius: var(--hl-radius-pill);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--hl-text) 45%, transparent);
  color: var(--hl-on-accent);
  flex: 1 1 auto;
  font: 600 1.0625rem/1.2 var(--hl-font-body);
  min-height: 52px;
  padding: 0 28px;
  transition: background-color 0.2s var(--hl-ease-out), box-shadow 0.2s var(--hl-ease-out), transform 0.2s var(--hl-ease-out);
}

body.single-product div.product form.cart button.single_add_to_cart_button:hover,
body.single-product div.product form.cart button.single_add_to_cart_button:focus-visible {
  background: var(--hl-accent-hover);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--hl-text) 45%, transparent), var(--hl-lift);
  color: var(--hl-on-accent);
  transform: translateY(-2px);
}

body.single-product div.product form.cart button.single_add_to_cart_button.disabled,
body.single-product div.product form.cart button.single_add_to_cart_button:disabled {
  background: var(--hl-surface-2);
  box-shadow: none;
  color: var(--hl-text-muted);
  cursor: not-allowed;
  transform: none;
}

body.single-product div.product .woocommerce-product-details__short-description,
body.single-product div.product .woocommerce-Tabs-panel {
  color: var(--hl-text-soft);
}

body.single-product div.product .woocommerce-tabs ul.tabs li a {
  color: var(--hl-text-muted);
}

body.single-product div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--hl-text);
}

body.single-product div.product .woocommerce-Tabs-panel h2,
body.single-product div.product .woocommerce-Tabs-panel h3 {
  color: var(--hl-text);
}

@media (min-width: 768px) {
  body.single-product div.product form.cart.variations_form {
    padding: 24px 28px;
  }
}
/* ===== STAGE hl-product END ===== */

/* ===== STAGE hl-reduced-motion BEGIN ===== */
/* style.css (stage hl-base) sets transform: none on every element under reduce. The horizon plane and the route
   panel use transform for their perspective, not for motion, so their resting geometry is restored here. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }

  body.hl-home .horizon__plane {
    transform: rotateX(74deg) !important;
  }

  body.hl-home .route__dot,
  body.hl-home .route__steps::after,
  body.hl-home .horizon__line,
  body.hl-home .horizon__bloom {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 1024px) {
  body.hl-home .route {
    transform: perspective(1400px) rotateY(-9deg) rotateX(3deg) !important;
  }
}
/* ===== STAGE hl-reduced-motion END ===== */

/* ===== STAGE hl-astra-reset BEGIN ===== */
/* Live check 29 Sep: Astra underlines links inside .entry-content on singular views (.ast-single-post .entry-content a)
   and pads the home article 36px 20px, so buttons showed underlines and the hero was not full bleed. */
body .entry-content a.hl-btn,
body .entry-content a.hl-btn:hover,
body .entry-content a.hl-btn:focus-visible,
body .entry-content .wp-block-button__link,
body .entry-content .wp-block-button__link:hover {
  text-decoration: none;
}
body.hl-home .site-content .ast-container,
body.hl-home .site-content #primary,
body.hl-home .site-content article.page,
body.hl-home .site-content .entry-content {
  max-width: none;
  margin: 0;
  padding: 0;
}
/* ===== STAGE hl-astra-reset END ===== */

/* ===== STAGE hl-table-scroll BEGIN ===== */
/* Live check 29 Sep at 390px: the plan grid, device facts and buffering tables overflowed the viewport (152, 65, 9 px).
   Wide content tables scroll inside their own box; the caption stays with the table. */
body .entry-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
body .entry-content table caption {
  text-align: left;
}
/* ===== STAGE hl-table-scroll END ===== */

/* ===== STAGE hl-home-clip BEGIN ===== */
/* Live check 29 Sep at 1440: the horizon ground is 100vw wide, which includes the scrollbar, so the home page
   scrolled 8px sideways on desktop. clip (not hidden) keeps the sticky header working. */
body.hl-home {
  overflow-x: clip;
}
/* ===== STAGE hl-home-clip END ===== */

/* ===== STAGE hl-core-buttons BEGIN ===== */
/* Live check 29 Sep (/blog/ at 1440): core/button blocks from the content converter rendered in WordPress's default
   outline blue. They now take the brand tokens: the accent fill for primary, the accent outline for ghost and soft.
   Tokens resolve per surface (dark storefront or the paper scope), so contrast follows the brief's tables. */
body .entry-content .wp-block-button.hl-btn--primary .wp-block-button__link {
  background: var(--hl-accent);
  border: 2px solid var(--hl-accent);
  border-radius: var(--hl-radius-pill);
  color: var(--hl-on-accent);
  font-family: var(--hl-font-body);
  font-weight: 600;
  min-height: 44px;
  padding: 10px 24px;
}
body .entry-content .wp-block-buttons .wp-block-button.hl-btn--ghost > .wp-block-button__link:not(.has-text-color),
body .entry-content .wp-block-buttons .wp-block-button.hl-btn--soft > .wp-block-button__link:not(.has-text-color) {
  background: transparent;
  border: 2px solid var(--hl-accent);
  border-radius: var(--hl-radius-pill);
  color: var(--hl-accent);
  font-family: var(--hl-font-body);
  font-weight: 600;
  min-height: 44px;
  padding: 10px 24px;
}
body .entry-content .wp-block-button.hl-btn--primary .wp-block-button__link:hover {
  background: var(--hl-accent-hover);
  border-color: var(--hl-accent-hover);
}
body .entry-content .wp-block-button.hl-btn--ghost .wp-block-button__link:hover,
body .entry-content .wp-block-button.hl-btn--soft .wp-block-button__link:hover {
  background: color-mix(in srgb, var(--hl-accent) 10%, transparent);
}
body .entry-content .wp-block-button .wp-block-button__link:focus-visible {
  outline: 2px solid var(--hl-focus);
  outline-offset: 2px;
}
/* ===== STAGE hl-core-buttons END ===== */

/* ===== STAGE hl-blog BEGIN ===== */
/* D40 articles hub (/blog/, content/pages/US/blog.md, built by scripts/build_blog_hub.py). The page is a paper page,
   so every colour below resolves through the hl-tokens-paper-scope values. Cards are a flat surface, never glass.
   --hl-lift is computed on :root with the dark accent, so the grid declares its own lit shadow from the paper accent.
   Motion (addendum section 4, "Card and button lift"): 2 px up with the lit shadow over 200 ms, press sinks to 1 px
   and 0.98 over 140 ms, only with a fine pointer and no reduced-motion preference; otherwise colour change only. */
body.hl-paper-page .site-content .hl-blog-grid {
  --hl-card-lift: 0 18px 40px -18px color-mix(in srgb, var(--hl-accent) 45%, transparent);
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr);
  margin: 40px 0 56px;
}

body.hl-paper-page .site-content .hl-blog-grid .hl-card {
  background: var(--hl-surface);
  border: 1px solid var(--hl-border);
  border-radius: var(--hl-radius-card);
  color: var(--hl-text);
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  transition: border-color 0.2s var(--hl-ease-out), box-shadow 0.2s var(--hl-ease-out), transform 0.2s var(--hl-ease-out);
}

body.hl-paper-page .site-content .hl-blog-grid .hl-card__img {
  aspect-ratio: 16 / 9;
  background: var(--hl-bg);
  border-bottom: 1px solid var(--hl-border);
  display: block;
  height: auto;
  margin: 0;
  max-width: none;
  object-fit: cover;
  width: 100%;
}

body.hl-paper-page .site-content .hl-blog-grid .hl-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  padding: 20px 20px 16px;
}

body.hl-paper-page .site-content .hl-blog-grid .hl-card__cat {
  color: var(--hl-accent);
  font: 600 var(--hl-fs-small)/1.3 var(--hl-font-body);
  letter-spacing: 0.04em;
}

body.hl-paper-page .site-content .entry-content .hl-blog-grid .hl-card .hl-card__title {
  font-family: var(--hl-font-head);
  font-size: var(--hl-fs-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
  text-wrap: balance;
}

body.hl-paper-page .site-content .entry-content .hl-blog-grid .hl-card .hl-card__title a {
  color: var(--hl-text);
  text-decoration: none;
  transition: color 0.2s var(--hl-ease-out);
}

body.hl-paper-page .site-content .entry-content .hl-blog-grid .hl-card .hl-card__summary {
  color: var(--hl-text-muted);
  font-size: var(--hl-fs-body);
  line-height: 1.55;
  margin: 0;
  max-width: none;
}

body.hl-paper-page .site-content .entry-content .hl-blog-grid .hl-card .hl-card__more {
  align-items: center;
  align-self: flex-start;
  color: var(--hl-accent);
  display: inline-flex;
  font: 600 0.9375rem/1.2 var(--hl-font-body);
  margin-top: auto;
  min-height: 44px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

body.hl-paper-page .site-content .entry-content .hl-blog-grid .hl-card .hl-card__more:hover {
  color: var(--hl-accent-hover);
}

body.hl-paper-page .site-content .hl-blog-grid .hl-card:hover,
body.hl-paper-page .site-content .hl-blog-grid .hl-card:focus-within {
  border-color: var(--hl-accent);
}

body.hl-paper-page .site-content .entry-content .hl-blog-grid .hl-card:hover .hl-card__title a {
  color: var(--hl-accent);
}

body.hl-paper-page .site-content .entry-content .hl-blog-grid .hl-card a:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--hl-focus);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  body.hl-paper-page .site-content .hl-blog-grid .hl-card:hover {
    box-shadow: var(--hl-card-lift);
    transform: translateY(-2px);
  }

  body.hl-paper-page .site-content .hl-blog-grid .hl-card:active {
    transform: translateY(-1px) scale(0.98);
    transition-duration: 0.14s;
  }
}

@media (min-width: 768px) {
  body.hl-paper-page .site-content .hl-blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  body.hl-paper-page .site-content .hl-blog-grid {
    gap: 32px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.hl-paper-page .site-content .hl-blog-grid .hl-card__body {
    padding: 24px 24px 18px;
  }
}
/* ===== STAGE hl-blog END ===== */