/*
  Release Tracker — standalone stylesheet
  Independent from /css/styles.css (the main hopmaxmusic.com stylesheet).
  Palette, spacing scale and header/footer treatment are modeled after the
  main site's design tokens so the page reads as part of the same brand,
  but nothing here is shared or imported from the existing file.
*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  /* Color tokens — mirrored from the main site's palette */
  --rt-paper: #f4f0e9;
  --rt-ink: #111216;
  --rt-ink-soft: rgba(17, 18, 22, 0.72);
  --rt-ink-faint: rgba(17, 18, 22, 0.56);
  --rt-line: rgba(17, 18, 22, 0.16);

  /* Accent tokens — pulled from the hero's amber / violet / green glows */
  --rt-amber: rgb(214, 154, 82);
  --rt-violet: rgb(151, 109, 255);
  --rt-green: rgb(94, 196, 150);
  --rt-green-deep: rgb(63, 138, 101);
  --rt-danger: rgb(196, 92, 73);
  --rt-card: #fbf9f5;

  /* Type tokens — same families as the main site */
  --rt-font-display: "Oswald", "IBM Plex Sans", "Segoe UI", sans-serif;
  --rt-font-text: "IBM Plex Sans", "Segoe UI", sans-serif;

  /* Spacing scale */
  --rt-space-1: 8px;
  --rt-space-2: 16px;
  --rt-space-3: 24px;
  --rt-space-4: 32px;
  --rt-space-6: 48px;
  --rt-space-8: 64px;
}

html {
  width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  background: var(--rt-paper);
  color: var(--rt-ink);
  font-family: var(--rt-font-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
}

/* ---------- Header ---------- */

.rt-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rt-space-2);
  padding: clamp(16px, 3vh, 26px) clamp(20px, 5vw, 60px);
  background: rgba(244, 240, 233, 0.86);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border-bottom: 1px solid var(--rt-line);
}

.rt-header-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6em;
  font-family: var(--rt-font-display);
  text-transform: uppercase;
}

.rt-header-wordmark {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 700;
  letter-spacing: 0.025em;
  color: var(--rt-ink);
}

.rt-header-product {
  font-size: clamp(0.7rem, 1.1vw, 0.85rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--rt-ink-soft);
}

.rt-header-product::before {
  content: "/";
  margin-right: 0.6em;
  color: var(--rt-ink-faint);
}

.rt-header-back {
  font-family: var(--rt-font-text);
  font-size: clamp(0.78rem, 1vw, 0.88rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--rt-ink-soft);
  transition: color 0.2s ease;
}

.rt-header-back:hover,
.rt-header-back:focus-visible {
  color: var(--rt-ink);
  outline: 0;
}

/* ---------- Main (empty scaffold) ---------- */

.rt-main {
  min-height: calc(100vh - 200px);
  min-height: calc(100dvh - 200px);
}

/* ---------- Footer ---------- */

.rt-footer {
  padding: clamp(28px, 5vw, 48px) clamp(20px, 5vw, 60px) clamp(32px, 5.5vw, 56px);
  border-top: 1px solid var(--rt-line);
  text-align: center;
}

.rt-footer-copy {
  margin: 0;
  color: var(--rt-ink-faint);
  font-size: clamp(0.78rem, 0.95vw, 0.9rem);
  font-weight: 500;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .rt-header {
    padding: 14px 18px;
  }

  .rt-header-brand {
    gap: 0.4em;
  }
}

@media (max-width: 420px) {
  .rt-header {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  /* "/ Release Tracker" is redundant on the smallest phones — the page
     title already says it — dropping it keeps the header on one line
     instead of wrapping or squeezing the back-link off screen. */
  .rt-header-product {
    display: none;
  }

  .rt-header-back {
    font-size: 0.74rem;
  }
}

/* =====================================================================
   Hero section
   ===================================================================== */

.rt-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(64px, 11vw, 128px) clamp(22px, 5vw, 74px) clamp(72px, 10vw, 120px);
}

/* ---------- Ambient background ---------- */

.rt-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.rt-hero-glow {
  position: absolute;
  width: min(56vw, 620px);
  height: min(56vw, 620px);
  border-radius: 50%;
  filter: blur(96px);
  opacity: 0.32;
  will-change: transform;
}

.rt-hero-glow-amber {
  top: -14%;
  right: -8%;
  background: radial-gradient(circle, rgba(214, 154, 82, 0.55) 0%, rgba(214, 154, 82, 0) 68%);
  animation: rt-drift-a 22s ease-in-out infinite;
}

.rt-hero-glow-violet {
  bottom: -18%;
  left: -10%;
  width: min(50vw, 560px);
  height: min(50vw, 560px);
  background: radial-gradient(circle, rgba(151, 109, 255, 0.4) 0%, rgba(151, 109, 255, 0) 68%);
  animation: rt-drift-b 26s ease-in-out infinite;
}

.rt-hero-glow-green {
  top: 28%;
  left: 38%;
  width: min(38vw, 460px);
  height: min(38vw, 460px);
  opacity: 0.28;
  background: radial-gradient(circle, rgba(94, 196, 150, 0.42) 0%, rgba(94, 196, 150, 0) 70%);
  animation: rt-drift-c 30s ease-in-out infinite;
}

@keyframes rt-drift-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-4%, 3%, 0) scale(1.05); }
}

@keyframes rt-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-3%, 4%, 0) scale(1.06); }
}

@keyframes rt-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(4%, -3%, 0) scale(1.08); }
}

.rt-hero-grain {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ---------- Layout ---------- */

.rt-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(36px, 5vw, 64px);
  width: min(1180px, 100%);
  margin: 0 auto;
}

.rt-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 2vw, 22px);
}

/* ---------- Badge ---------- */

.rt-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 7px 12px;
  border: 1px solid var(--rt-line);
  border-radius: 999px;
  background: rgba(244, 240, 233, 0.5);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  color: var(--rt-ink-soft);
  font-family: var(--rt-font-text);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rt-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(214, 154, 82);
  box-shadow: 0 0 0 3px rgba(214, 154, 82, 0.22);
}

/* ---------- Title ---------- */

.rt-hero-title {
  margin: 0;
  max-width: 13ch;
  color: var(--rt-ink);
  font-family: var(--rt-font-display);
  font-weight: 700;
  font-size: clamp(2.05rem, 3.9vw, 3.3rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.rt-hero-title-accent {
  display: inline-block;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
  line-height: 1.25;
  background: linear-gradient(100deg, rgb(214, 154, 82) 0%, rgb(151, 109, 255) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Subtitle ---------- */

.rt-hero-subtitle {
  max-width: 46ch;
  margin: 0;
  color: var(--rt-ink-soft);
  font-family: var(--rt-font-text);
  font-size: clamp(1rem, 1.35vw, 1.16rem);
  font-weight: 500;
  line-height: 1.62;
}

/* ---------- CTAs ---------- */

.rt-hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}

.rt-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 26px;
  border-radius: 999px;
  font-family: var(--rt-font-text);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.19, 1, 0.22, 1),
              box-shadow 0.22s ease,
              background 0.22s ease,
              border-color 0.22s ease;
}

.rt-btn:focus-visible {
  outline: 2px solid rgba(17, 18, 22, 0.5);
  outline-offset: 3px;
}

.rt-btn-primary {
  border: 1px solid var(--rt-ink);
  background: var(--rt-ink);
  color: var(--rt-paper);
  box-shadow: 0 10px 26px rgba(17, 18, 22, 0.22);
}

.rt-btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(100deg, rgba(214, 154, 82, 0.9) 0%, rgba(151, 109, 255, 0.9) 100%);
  opacity: 0;
  transition: opacity 0.28s ease;
}

.rt-btn-primary:hover,
.rt-btn-primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(17, 18, 22, 0.3);
}

.rt-btn-primary:hover::after,
.rt-btn-primary:focus-visible::after {
  opacity: 1;
}

.rt-btn-secondary {
  border: 1px solid var(--rt-line);
  background: rgba(244, 240, 233, 0.35);
  color: var(--rt-ink);
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
}

.rt-btn-secondary:hover,
.rt-btn-secondary:focus-visible {
  border-color: rgba(17, 18, 22, 0.4);
  background: rgba(244, 240, 233, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(17, 18, 22, 0.12);
}

.rt-btn-play {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: -2px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid currentColor;
  transition: transform 0.22s ease;
}

.rt-btn-secondary:hover .rt-btn-play,
.rt-btn-secondary:focus-visible .rt-btn-play {
  transform: scale(1.15);
}

/* ---------- Mockup ---------- */

.rt-hero-mockup-wrap {
  position: relative;
  display: flex;
  justify-content: center;
}

.rt-mockup-glow {
  position: absolute;
  inset: -4% -8% -10%;
  z-index: -1;
  border-radius: 40px;
  background: radial-gradient(60% 60% at 50% 46%, rgba(94, 196, 150, 0.3) 0%, rgba(94, 196, 150, 0) 72%);
  filter: blur(42px);
  opacity: 0.85;
  pointer-events: none;
}

.rt-mockup-device {
  position: relative;
  display: block;
  width: min(100%, 720px);
  height: auto;
  object-fit: contain;
  transform: translate3d(0, 0, 0);
  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1),
              filter 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  filter: drop-shadow(0 24px 40px rgba(17, 18, 22, 0.16))
          drop-shadow(0 46px 90px rgba(17, 18, 22, 0.12));
  will-change: transform;
}

/* Fullscreen playback: without this, a video with object-fit: cover
   (or a browser's default fullscreen scaling) crops the edges instead
   of letterboxing. Forces the whole frame to stay visible, centered
   on black, with no leftover rounded corners/shadow from the card
   styling above. */
video.rt-mockup-device:fullscreen,
video.rt-mockup-device:-webkit-full-screen {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
  border-radius: 0;
  background: #000;
}

.rt-hero-mockup-wrap:hover .rt-mockup-device {
  filter: drop-shadow(0 30px 52px rgba(17, 18, 22, 0.2))
          drop-shadow(0 54px 104px rgba(17, 18, 22, 0.14));
}

/* Lift + parallax translate is applied inline by js/app.js on
   mousemove/mouseleave (translate-only — no rotation). */

/* ---------- Reveal-on-load / reveal-on-scroll ---------- */

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 0.7s cubic-bezier(0.19, 1, 0.22, 1),
              transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: calc(var(--reveal-order, 0) * 0.09s);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.rt-hero-mockup-wrap[data-reveal] {
  transform: translate3d(0, 22px, 0) scale(0.98);
}

.rt-hero-mockup-wrap[data-reveal].is-visible {
  transform: translate3d(0, 0, 0) scale(1);
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .rt-hero-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .rt-hero-copy {
    align-items: center;
  }

  .rt-hero-title {
    max-width: 14ch;
  }

  .rt-hero-subtitle {
    max-width: 52ch;
  }

  .rt-hero-mockup-wrap {
    margin-top: clamp(28px, 5vw, 44px);
  }
}

@media (max-width: 640px) {
  .rt-hero {
    padding-top: 48px;
  }

  .rt-hero-cta {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .rt-btn {
    width: 100%;
  }
}

@media (max-width: 400px) {
  .rt-hero-title {
    font-size: 2.35rem;
    max-width: 12ch;
  }
}

@media (hover: none), (pointer: coarse) {
  .rt-hero-mockup-wrap:hover .rt-mockup-device {
    transform: none;
    filter: drop-shadow(0 24px 40px rgba(17, 18, 22, 0.16))
            drop-shadow(0 46px 90px rgba(17, 18, 22, 0.12));
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .rt-hero-glow {
    animation: none;
  }

  .rt-mockup-device {
    transition: none;
  }

  .rt-hero-mockup-wrap:hover .rt-mockup-device {
    transform: none;
  }
}

/* =====================================================================
   Product Showcase section
   ===================================================================== */

.rt-showcase {
  position: relative;
  padding: clamp(48px, 6vw, 72px) clamp(22px, 5vw, 74px) clamp(56px, 7vw, 88px);
}

.rt-showcase-inner {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.rt-showcase-header {
  text-align: center;
  margin: 0 auto clamp(28px, 4vw, 40px);
}

.rt-showcase-title {
  margin: 0;
  color: var(--rt-ink);
  font-family: var(--rt-font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

/* ---------- Row of blocks (left to right) ---------- */

.rt-showcase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.6vw, 20px);
}

.rt-showcase-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 10px 18px;
  border-radius: 18px;
  background: var(--rt-card);
  border: 1px solid var(--rt-line);
  box-shadow: 0 14px 30px rgba(17, 18, 22, 0.05);
  transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1),
              box-shadow 0.35s cubic-bezier(0.19, 1, 0.22, 1),
              border-color 0.35s ease;
}

.rt-showcase-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(17, 18, 22, 0.1);
  border-color: rgba(17, 18, 22, 0.22);
}

.rt-showcase-card:hover .rt-showcase-card-media img {
  transform: scale(1.04);
}

.rt-showcase-card-media {
  border-radius: 12px;
  overflow: hidden;
  background: rgba(17, 18, 22, 0.03);
  border: 1px solid var(--rt-line);
}

.rt-showcase-mockup-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--rt-line);
  background: rgba(244, 240, 233, 0.92);
  position: relative;
  z-index: 1;
}

.rt-showcase-mockup-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.rt-showcase-mockup-dot-red { background: #ff5f57; }
.rt-showcase-mockup-dot-yellow { background: #febc2e; }
.rt-showcase-mockup-dot-green { background: #28c840; }

.rt-showcase-card-media img {
  display: block;
  width: 100%;
  height: clamp(150px, 15vw, 190px);
  object-fit: cover;
  object-position: top center;
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.rt-showcase-card-title {
  margin: 0;
  padding: 0 4px;
  color: var(--rt-ink);
  font-family: var(--rt-font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.005em;
  line-height: 1.25;
}

.rt-showcase-card-desc {
  margin: 0;
  padding: 0 4px;
  color: var(--rt-ink-soft);
  font-family: var(--rt-font-text);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.5;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .rt-showcase-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .rt-showcase-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rt-showcase-card,
  .rt-showcase-card-media img {
    transition: none;
  }

  .rt-showcase-card:hover {
    transform: none;
  }

  .rt-showcase-card:hover .rt-showcase-card-media img {
    transform: none;
  }
}

/* =====================================================================
   Feature presentation — one screenshot per section, Apple-style.
   Label, title, then the image itself. No body copy: the description
   already lives inside every presentation screenshot.
   ===================================================================== */

.rt-feature {
  padding: clamp(44px, 5.5vw, 64px) clamp(22px, 5vw, 74px);
  text-align: center;
  background: var(--rt-paper);
}

/* Alternates with the base --rt-paper tone for gentle rhythm on long
   scrolls — both colors already belong to the page's palette. */
.rt-feature-tint {
  background: var(--rt-card);
}

.rt-feature-eyebrow {
  margin: 0 0 10px;
  color: var(--rt-ink-faint);
  font-family: var(--rt-font-text);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.rt-feature-title {
  margin: 0 0 clamp(22px, 3vw, 34px);
  color: var(--rt-ink);
  font-family: var(--rt-font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 1.9vw, 1.7rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.rt-feature-media {
  display: flex;
  justify-content: center;
}

.rt-feature-media img {
  display: block;
  width: 88%;
  max-width: 1180px;
  height: auto;
  border-radius: 0;
}

/* Reveal timing for feature sections: a quieter 600ms fade-up, distinct
   from the hero's 700ms entrance. */
.rt-feature[data-reveal],
.rt-final-cta[data-reveal] {
  transition-duration: 0.6s;
}

@media (max-width: 900px) {
  .rt-feature {
    padding: clamp(36px, 8vw, 52px) 20px;
  }

  .rt-feature-media img {
    width: 95%;
  }
}

/* =====================================================================
   Final CTA — closing call to action before the footer.
   ===================================================================== */

.rt-final-cta {
  padding: clamp(56px, 7vw, 88px) clamp(22px, 5vw, 74px);
  text-align: center;
  background: var(--rt-paper);
  border-top: 1px solid var(--rt-line);
}

.rt-final-cta-title {
  margin: 0 0 10px;
  color: var(--rt-ink);
  font-family: var(--rt-font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  letter-spacing: -0.01em;
}

.rt-final-cta-subtitle {
  margin: 0 0 clamp(22px, 2.6vw, 28px);
  color: var(--rt-ink-soft);
  font-family: var(--rt-font-text);
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  font-weight: 500;
}

.rt-final-cta .rt-btn {
  min-width: 220px;
}

/* =====================================================================
   Download page (download.html)
   Card-picker page opened from the presentation page's Buy Now button.
   Reuses the same tokens, header, footer and reveal system as the rest
   of the site — nothing here touches the presentation page itself.
   ===================================================================== */

.rt-dl-main {
  display: flex;
  flex-direction: column;
}

/* ---------- Hero ---------- */

.rt-dl-hero {
  padding: clamp(64px, 10vw, 108px) clamp(22px, 5vw, 74px) clamp(40px, 6vw, 64px);
  text-align: center;
}

.rt-dl-title {
  margin: 0 0 14px;
  color: var(--rt-ink);
  font-family: var(--rt-font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.8vw, 2.45rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.rt-dl-subtitle {
  margin: 0 auto;
  max-width: 46ch;
  color: var(--rt-ink-soft);
  font-family: var(--rt-font-text);
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  font-weight: 500;
  line-height: 1.6;
}

/* ---------- Cards ---------- */

.rt-dl-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: clamp(18px, 2.6vw, 28px);
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 0 clamp(22px, 5vw, 74px) clamp(56px, 7vw, 88px);
}

.rt-dl-card {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 34px) clamp(22px, 2.6vw, 28px) clamp(24px, 2.8vw, 28px);
  border-radius: 22px;
  background: var(--rt-card);
  border: 1px solid var(--rt-line);
  box-shadow: 0 16px 36px rgba(17, 18, 22, 0.06);
  transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1),
              box-shadow 0.35s cubic-bezier(0.19, 1, 0.22, 1),
              border-color 0.35s ease;
}

.rt-dl-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 56px rgba(17, 18, 22, 0.12);
  border-color: rgba(17, 18, 22, 0.22);
}

.rt-dl-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  color: var(--rt-ink);
  font-family: var(--rt-font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.005em;
}

.rt-dl-card-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.rt-dl-card-supports {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.rt-dl-card-supports li {
  position: relative;
  padding-left: 18px;
  color: var(--rt-ink-soft);
  font-family: var(--rt-font-text);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.5;
}

.rt-dl-card-supports li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rt-green-deep);
}

.rt-dl-card-desc {
  margin: 0 0 14px;
  color: var(--rt-ink-soft);
  font-family: var(--rt-font-text);
  font-size: 0.94rem;
  font-weight: 500;
  line-height: 1.55;
}

/* Pushes version/size + button to the bottom so all three cards line
   up evenly regardless of how much copy each one has. */
.rt-dl-card-spacer {
  flex: 1;
}

.rt-dl-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  color: var(--rt-ink-faint);
  font-family: var(--rt-font-text);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.rt-dl-card-meta-dot {
  opacity: 0.6;
}

.rt-dl-card-btn {
  width: 100%;
}

/* ---------- Notes ---------- */

.rt-dl-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(20px, 3vw, 32px);
  width: min(920px, 100%);
  margin: 0 auto;
  padding: clamp(32px, 5vw, 52px) clamp(22px, 5vw, 74px) clamp(72px, 9vw, 112px);
  border-top: 1px solid var(--rt-line);
}

.rt-dl-note-title {
  margin: 0 0 8px;
  color: var(--rt-ink);
  font-family: var(--rt-font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.rt-dl-note-text {
  margin: 0 0 8px;
  color: var(--rt-ink-soft);
  font-family: var(--rt-font-text);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.6;
}

.rt-dl-note-link {
  display: inline-block;
  color: var(--rt-ink);
  font-family: var(--rt-font-text);
  font-size: 0.86rem;
  font-weight: 600;
  border-bottom: 1px solid var(--rt-ink-faint);
  transition: border-color 0.2s ease, opacity 0.2s ease;
}

.rt-dl-note-link:hover,
.rt-dl-note-link:focus-visible {
  border-color: var(--rt-ink);
  opacity: 0.8;
}

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
  .rt-dl-cards {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rt-dl-card {
    transition: none;
  }

  .rt-dl-card:hover {
    transform: none;
  }
}

/* =====================================================================
   Premium refinement additions
   Everything below extends the existing tokens/system above — no new
   colors, fonts, or spacing scale introduced. Only usability and
   conversion refinements: dual hero CTAs, tighter hero→screenshot gap,
   feature icons, a lightbox, a trust strip, and a matching final CTA.
   ===================================================================== */

/* ---------- Hero: dual CTA + caption ---------- */

.rt-hero-caption {
  margin: 2px 0 0;
  color: var(--rt-ink-faint);
  font-family: var(--rt-font-text);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.005em;
}

/* Tighten the gap between the hero and the first screenshot section so
   the app is visible almost immediately after the headline. Same
   selector, later in the cascade, so it overrides the base padding
   without touching the shared token. */
.rt-hero.rt-hero-compact {
  padding-bottom: clamp(28px, 4vw, 44px);
}

.rt-feature.rt-feature-first {
  padding-top: clamp(20px, 3vw, 32px);
}

@media (max-width: 1080px) {
  .rt-hero-caption {
    text-align: center;
  }
}

@media (max-width: 640px) {
  .rt-hero-caption {
    margin-top: 4px;
  }
}

/* ---------- Feature icons ---------- */

.rt-feature-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 clamp(22px, 3vw, 34px);
}

.rt-feature-heading .rt-feature-title {
  margin: 0;
}

.rt-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--rt-ink-soft);
  flex-shrink: 0;
}

.rt-feature-icon svg {
  width: 100%;
  height: 100%;
}

@media (max-width: 640px) {
  .rt-feature-icon {
    width: 24px;
    height: 24px;
  }
}

/* ---------- Screenshot lightbox ---------- */

.rt-feature-media img {
  cursor: zoom-in;
}

.rt-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5vw, 56px);
  background: rgba(17, 18, 22, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.rt-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.rt-lightbox-img {
  display: block;
  max-width: 92vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.rt-lightbox.is-open .rt-lightbox-img {
  opacity: 1;
  transform: scale(1);
}

.rt-lightbox-close {
  position: absolute;
  top: clamp(14px, 3vw, 26px);
  right: clamp(14px, 3vw, 26px);
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(244, 240, 233, 0.3);
  background: rgba(244, 240, 233, 0.08);
  color: var(--rt-paper);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.rt-lightbox-close:hover,
.rt-lightbox-close:focus-visible {
  background: rgba(244, 240, 233, 0.18);
  transform: scale(1.06);
  outline: 0;
}

@media (prefers-reduced-motion: reduce) {
  .rt-lightbox,
  .rt-lightbox-img,
  .rt-lightbox-close {
    transition: none;
  }
}

/* ---------- Trust strip ---------- */

.rt-trust {
  padding: clamp(28px, 4vw, 40px) clamp(22px, 5vw, 74px);
  text-align: center;
  background: var(--rt-paper);
}

.rt-trust-text {
  margin: 0 auto;
  max-width: 52ch;
  color: var(--rt-ink-faint);
  font-family: var(--rt-font-text);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.015em;
  line-height: 1.6;
}

/* ---------- Final CTA: dual buttons + caption ---------- */

.rt-final-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.rt-final-cta-buttons .rt-btn {
  min-width: 200px;
}

.rt-final-cta-caption {
  margin: 16px 0 0;
  text-align: center;
}

@media (max-width: 480px) {
  .rt-final-cta-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .rt-final-cta-buttons .rt-btn {
    width: 100%;
  }
}