/* Product-card evidence line: registers on scroll and scans on pointer hover. */
.trust-strip {
  display: none;
}

.hero-copy > .hero-trial {
  display: none;
}

/* Keep the LCP heading immediately visible; decorative motion remains elsewhere. */
.hero-copy {
  animation: none;
}

/* The component stylesheet sets nav to grid, so explicitly honor hidden state. */
.mobile-menu nav[hidden] {
  display: none;
}

/* Readability corrections for editorial pages. */
.legal-content .primary-cta {
  color: var(--evidence-black, #0c0d0e);
}

.article-meta dt,
.guide-related span {
  color: #5f5a51;
}

.bot-preview-top .bot-avatar {
  color: #15120e;
}

.legal-sheet .breadcrumbs a,
.legal-sheet .breadcrumbs span {
  color: #514c44;
}

.legal-sheet .breadcrumbs [aria-current="page"] {
  color: #4b3a20;
  font-weight: 700;
}

.guide-library {
  margin-top: clamp(2rem, 5vw, 4rem);
}

.guide-library > header > span {
  color: var(--brass-light);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.guide-library > header h2 {
  margin-top: 0.45rem;
}

.guide-library__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.guide-library__card {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-medium, 0.75rem);
  color: var(--bone);
  background: #111314;
  padding: clamp(1.25rem, 3vw, 2rem);
  text-decoration: none;
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms var(--ease-out);
}

.guide-library__card > span,
.guide-library__card > strong {
  color: var(--brass-light);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.guide-library__card h3 {
  margin: 0.7rem 0;
  font-size: clamp(1.25rem, 2.5vw, 1.65rem);
}

.guide-library__card p {
  color: var(--muted);
  margin-bottom: 1.25rem;
}

@media (hover: hover) {
  .guide-library__card:hover {
    border-color: var(--brass);
    background: #151617;
    transform: translateY(-0.15rem);
  }
}

@media (max-width: 64rem) {
  .guide-toc a {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
  }
}

@media (max-width: 47.99rem) {
  .guide-library__grid {
    grid-template-columns: 1fr;
  }

  .brand,
  .mobile-menu > button,
  .price-card > a,
  .breadcrumbs a,
  .legal-related a,
  .guide-related a,
  .footer-brand {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
  }

  .mobile-menu > button {
    min-width: 2.75rem;
  }

}

.hero .secondary-cta {
  background: rgba(216, 168, 87, 0.1);
  border-color: rgba(216, 168, 87, 0.58);
  color: var(--brass-light);
  box-shadow: inset 0 0 0 1px rgba(216, 168, 87, 0.06);
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease,
    transform 180ms var(--ease-out);
}

.hero .secondary-cta svg {
  transition: transform 220ms var(--ease-out);
}

.hero .secondary-cta:hover {
  background: rgba(216, 168, 87, 0.18);
  border-color: var(--brass);
  color: var(--bone);
  box-shadow: inset 0 0 0 1px rgba(237, 199, 121, 0.1);
  transform: translateY(-0.12rem);
}

.hero .secondary-cta:hover svg {
  transform: translateX(0.18rem);
}

.hero .secondary-cta:active {
  transform: translateY(0);
}

@media (min-width: 64.01rem) {
  .rail-photo-stage {
    min-height: clamp(32rem, 72svh, 47rem);
  }

  .rail-hero-image {
    height: min(72svh, 47rem);
    transform: translateX(1.5rem);
  }
}

.product-card {
  transition:
    border-color 220ms ease,
    background-color 220ms ease;
}

.product-card::after {
  width: 100%;
  background: linear-gradient(
    90deg,
    var(--brass) 0%,
    var(--brass-light) 42%,
    var(--bone) 50%,
    var(--brass-light) 58%,
    var(--brass) 100%
  );
  background-position: 100% 50%;
  background-size: 240% 100%;
  transform: scaleX(0.16);
  transform-origin: left center;
  transition:
    transform 520ms var(--ease-out),
    background-position 720ms var(--ease-out),
    opacity 180ms ease;
}

@media (hover: hover) {
  .product-card:hover {
    border-color: #d8a85775;
    background-color: #151617;
  }

  .product-card:hover::after {
    background-position: 0 50%;
    opacity: 1;
    transform: scaleX(1);
  }
}

@supports (animation-timeline: view()) {
  .product-card::after {
    animation: product-line-register linear both;
    animation-range: entry 0% cover 28%;
    animation-timeline: view(block);
  }
}

@keyframes product-line-register {
  from {
    clip-path: inset(0 100% 0 0);
  }

  to {
    clip-path: inset(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-card::after {
    animation: none;
    clip-path: none;
    transition: opacity 150ms ease;
  }

  @media (hover: hover) {
    .product-card:hover::after {
      background-position: 100% 50%;
      transform: scaleX(0.16);
    }
  }
}