/* Launch fixes on top of the original Hark design. */
:root { --size-cta: 16px; --size-buy-cta: 20px; --focus-ring: #d8aa65; }
body { overflow-x: visible; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 50; padding: 12px 16px; background: var(--fill-primary); color: var(--text-primary-on); }
.skip-link:focus { top: 12px; }
.btn { min-height: var(--tap); padding: 12px 20px; font-size: var(--size-cta); font-weight: var(--weight-bold); text-align: center; justify-content: center; white-space: normal; background: linear-gradient(170deg, #fafafa, #d6d6da 55%, #f4f4f5); color: #202024; border: 1px solid #a3a3aa; box-shadow: 0 2px 6px #0002, inset 0 1px #fff; transition: transform var(--dur-quick) ease; }
.btn:hover { transform: translateY(-1px); }
.btn--buy { min-height: 64px; min-width: min(280px, 100%); padding: 18px 32px; font-size: var(--size-buy-cta); line-height: 1.3; }
.hero :focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 4px; }
.hero::after { background: linear-gradient(90deg, rgb(12 17 27 / 90%), rgb(12 17 27 / 65%) 65%, rgb(12 17 27 / 25%)); }
.hero__copy { max-width: 43rem; }
.hero__sub { max-width: 40ch; }
.hero__price-note { font: var(--type-small); color: var(--hero-text); }
.hero__eyebrow { backdrop-filter: none; -webkit-backdrop-filter: none; }
.theme-btn { width: var(--tap); height: var(--tap); border: 1px solid currentColor; }
.foot a { display: inline-flex; align-items: center; min-height: var(--tap); }
.x-faq summary { padding-inline: 8px; border-radius: 8px; }
.x-faq summary:hover { background: var(--hover-wash); }
.x-faq a { overflow-wrap: anywhere; }
.cards > *, .pair > * { min-width: 0; }
@media (max-width: 760px) {
  .page { padding-top: max(8px, env(safe-area-inset-top)); }
  .hero__copy { padding: 36px 22px 28px; gap: 16px; }
  .hero__img { object-position: 55% 50%; }
  .hero::after { background: rgb(12 17 27 / 82%); }
  .hero .links, .hero .btn { width: 100%; }
  .btn--buy { width: 100%; }
  .hero h1 { text-wrap: balance; }
  .hero__sub { font: var(--type-body); line-height: 1.5; }
  .hero__eyebrow { font: var(--type-small); }
  .nav { width: 100%; }
  .seg { min-width: 0; }
  .x-faq details > p { line-height: 1.6; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  .btn:hover { transform: none; }
}