.reference-page {
  --bg: #0a090a;
  --panel: #121012;
  --line: #353035;
  --mut: #bab2b8;
  --red: #ff4b57;
  --display: "Barlow Condensed", "Arial Narrow", "Segoe UI", sans-serif;
}
.reference-page::before, .reference-page::after { content: none; }
.reference-nav { background-color: #0a090af2; min-height: 65px; }
.reference-nav .logo { font-size: 20px; font-weight: 850; }
.reference-nav ul { gap: clamp(12px, 2.5vw, 34px); }
.reference-page .btn, .reference-page .gold { border-radius: 3px; font-weight: 800; }
.reference-page .btn.solid, .reference-page .gold {
  background: var(--red);
  border-color: var(--red);
  color: #130708;
}
.reference-page .btn.solid:hover, .reference-page .gold:hover {
  background: #fff;
  border-color: #fff;
  color: #130708;
}
.reference-page .hero {
  min-height: 82svh;
  position: relative;
  display: grid;
  align-items: center;
  justify-content: start;
  padding: 116px max(24px, calc((100% - 1210px) / 2)) 70px;
  text-align: left;
  background: linear-gradient(90deg, #0a090a 0%, #0a090a55 50%, transparent 80%),
              #100a0c url("/hdquality-hero.webp") center right / cover no-repeat;
  border-bottom: 1px solid var(--line);
}
.reference-page .hero-content { opacity: 1; transform: none; animation: none; position: relative; }
.reference-page .hero .big {
  font-family: var(--display);
  font-size: clamp(48px, 11.4vw, 170px);
  font-style: italic;
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: .85;
  text-transform: uppercase;
  color: #f8f5f6;
  background: none;
  animation: none;
}
.reference-page .big span { color: var(--red); }
.reference-page .hero h2 { font-size: clamp(20px, 3vw, 32px); margin-top: 22px; }
.reference-page .hero p { color: #d1c7cc; }
.reference-page .cta { justify-content: flex-start; margin: 28px 0 0; }
.reference-page .cta .btn span { padding-left: 12px; }
.reference-page main > section {
  max-width: 1260px;
  padding: clamp(54px, 8vw, 112px) clamp(16px, 4vw, 40px) 0;
  margin: 0 auto;
}
.reference-page .t {
  font: italic 900 clamp(44px, 7vw, 86px)/.92 var(--display);
  text-transform: uppercase;
  letter-spacing: -.02em;
  margin-bottom: 16px;
}
.reference-page .sub { margin-bottom: 26px; }
.reference-page .plans { gap: 12px; }
.reference-page .plan {
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 3vw, 34px);
}
.reference-page .plan:hover { transform: none; box-shadow: none; border-color: var(--red); }
.reference-page .plan.hot { border-color: var(--red); background: #191014; }
.reference-page .plan h3 { font: italic 900 48px/.9 var(--display); }
.reference-page .plan .price { margin: 9px 0 16px; }
.reference-page .plan .btn { margin-top: auto; align-self: flex-start; }
.reference-page .plan em { border-radius: 2px; }
.reference-page #optimizer .card { border-radius: 4px; background: var(--panel); }
.reference-page .step { border-top-color: var(--red); }
.reference-page summary:focus-visible, .reference-page :focus-visible { outline-color: var(--red); }
@media (max-width: 760px) {
  .reference-page .hero {
    min-height: 675px;
    align-items: end;
    padding: 95px 20px 35px;
    background-image: linear-gradient(0deg, #0a090a 12%, #0a090a55 54%, transparent 75%), url("/hdquality-hero.webp");
    background-size: cover, auto 78%;
    background-position: center, 68% 0;
  }
  .reference-page .hero .big { font-size: clamp(44px, 13vw, 92px); }
  .reference-page .cta { justify-content: flex-start; gap: 8px; }
  .reference-page .cta .btn { padding-inline: 13px; }
  .reference-nav .logo { font-size: 16px; }
  .reference-nav .logo img { width: 28px; height: 28px; }
}

.reference-page .hero {
  isolation: isolate;
  overflow: clip;
  background: #100a0c;
}
.reference-page .hero::before {
  content: "";
  position: absolute;
  inset: -5%;
  z-index: -1;
  background: linear-gradient(90deg, #0a090a 0%, #0a090a55 50%, transparent 80%),
              url("/hdquality-hero.webp") center right / cover no-repeat;
}
.reference-page .hero-content { z-index: 1; }

@media (max-width: 760px) {
  .reference-page .hero::before {
    inset: 0;
    background-image: linear-gradient(0deg, #0a090a 12%, #0a090a55 54%, transparent 75%), url("/hdquality-hero.webp");
    background-size: cover, auto 78%;
    background-position: center, 68% 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .reference-page .hero::before {
    animation: camera-entry 1250ms cubic-bezier(.18,.68,.22,1) both;
  }
  .reference-page .hero .big {
    animation: title-entry 850ms cubic-bezier(.16,.82,.25,1) 60ms both;
  }
  .reference-page .hero h2,
  .reference-page .hero p {
    animation: copy-entry 580ms cubic-bezier(.2,.7,.25,1) 240ms both;
  }
  .reference-page .hero::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 19%;
    background: linear-gradient(90deg, transparent, #ff495859, #fff8, transparent);
    opacity: 0;
    pointer-events: none;
    animation: light-sweep 850ms cubic-bezier(.3,.2,.35,1) both;
  }
  .reference-page .motion-heading {
    animation: section-entry 670ms cubic-bezier(.16,.8,.23,1) both;
  }
  .reference-page .motion-plans .plan {
    animation: plan-entry 620ms cubic-bezier(.16,.8,.23,1) both;
  }
  .reference-page .motion-plans .plan:nth-child(2) { animation-delay: 95ms; }
  .reference-page .motion-plans .plan:nth-child(3) { animation-delay: 190ms; }
  .reference-page .plan:focus-within,
  .reference-page section:focus-within > .motion-heading { animation: none; }

  @supports (animation-timeline: scroll()) {
    .reference-nav::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 2px;
      background: var(--red);
      transform-origin: left;
      animation: reading-progress linear both;
      animation-timeline: scroll(root);
    }
    .reference-page .hero-content {
      animation: hero-scroll linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 88%;
    }
  }
}

@keyframes camera-entry {
  from { opacity: .32; transform: scale(1.13) translateX(4%); }
  to { opacity: 1; transform: none; }
}
@keyframes title-entry {
  from { clip-path: inset(0 100% 0 0); transform: translateX(-36px) skewX(-9deg); }
  to { clip-path: inset(-24% -12% -45% -12%); transform: none; }
}
@keyframes copy-entry {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes light-sweep {
  0% { transform: translateX(-130%) skewX(-19deg); opacity: 0; }
  35% { opacity: .6; }
  100% { transform: translateX(630%) skewX(-19deg); opacity: 0; }
}
@keyframes section-entry {
  from { clip-path: inset(0 100% 0 0); transform: translateX(-19px); }
  to { clip-path: inset(-20% -20% -20% -20%); transform: none; }
}
@keyframes plan-entry {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: none; }
}
@keyframes reading-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes hero-scroll {
  from { transform: none; opacity: 1; }
  to { transform: translateY(55px); opacity: .48; }
}