:root {
  --bg: #090a0d;
  --bg-2: #101217;
  --panel: #111318;
  --panel-2: #16191f;
  --text: #f4f5f7;
  --muted: #a7adb8;
  --faint: #6f7683;
  --line: rgba(255, 255, 255, 0.11);
  --line-strong: rgba(222, 168, 83, 0.62);
  --gold: #dea853;
  --gold-2: #ffca76;
  --orange: #c66d34;
  --green: #7cc7a2;
  --shadow: 0 26px 70px rgba(0, 0, 0, 0.42);
}

* {
  box-sizing: border-box;
}

.hidden {
  display: none !important;
}

.status-banner {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 7px;
  font-size: 0.9rem;
  border: 1px solid var(--line);
  color: var(--muted);
}

.status-banner.status-pending {
  color: var(--muted);
}

.status-banner.status-success {
  color: var(--green);
  border-color: var(--green);
  background: rgba(124, 199, 162, 0.1);
}

.status-banner.status-error {
  color: var(--orange);
  border-color: var(--orange);
  background: rgba(198, 109, 52, 0.1);
}

html {
  scroll-behavior: smooth;
  background: var(--bg);
  color-scheme: dark;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--text);
  background-color: var(--bg);
}

body.auth-transitioning {
  overflow: hidden;
  background: #090a0d !important;
}

.auth-transition-curtain {
  position: fixed;
  inset: 0;
  z-index: 35;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 202, 118, 0.06), transparent 26rem),
    linear-gradient(180deg, rgba(9, 10, 13, 0.96), rgba(9, 10, 13, 1));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity 280ms ease;
}

body.auth-transitioning .auth-transition-curtain {
  opacity: 1;
}

body.auth-transitioning .shell {
  opacity: 0.12;
  transform: translateY(8px) scale(0.995);
  filter: blur(8px) saturate(0.92);
}

.shell {
  transition: opacity 280ms ease, transform 280ms ease, filter 280ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .auth-transition-curtain,
  .shell {
    transition-duration: 0.001ms !important;
  }
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(110deg, transparent 0 24%, rgba(255, 255, 255, 0.05) 34%, transparent 44%),
    url("optimized-images/Debrief Logo transparent.webp");
  background-repeat: no-repeat;
  background-size: min(620px, 86vw) auto;
  background-position: calc(100% + 220px) 108px;
  opacity: 0.08;
}

body::after {
  content: "";
  position: fixed;
  inset: -18%;
  z-index: 0;
  pointer-events: none;
  background-image: url("/icon-192.png");
  background-size: 84px 84px;
  background-position: 0 0;
  opacity: 0.025;
  filter: saturate(0.9);
  transform: rotate(-18deg) scale(1.08);
  animation: logoDrift 48s linear infinite;
}

a {
  color: inherit;
}

h1,
h2,
h3,
p {
  margin: 0;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 3vw, 28px);
  width: 100%;
  padding: 18px clamp(16px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
  background: #090a0d;
  backdrop-filter: blur(18px);
}

.brand,
.site-nav,
.hero-actions,
.preview-topbar,
.workflow-list li {
  display: flex;
  align-items: center;
}

.brand {
  min-width: 0;
  gap: 10px;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.brand img {
  width: 34px;
  height: 34px;
  transition: transform 260ms ease, filter 260ms ease;
}

.brand:hover img {
  filter: drop-shadow(0 0 12px rgba(255, 202, 118, 0.42));
  transform: translateY(-1px) scale(1.06);
}

.site-nav {
  gap: clamp(14px, 2vw, 26px);
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.site-nav a,
.nav-login {
  position: relative;
  text-decoration: none;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-2), transparent);
  opacity: 0;
  transform: scaleX(0.45);
  transition: opacity 220ms ease, transform 220ms ease;
}

.site-nav a:hover {
  color: var(--text);
}

.site-nav a:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

.nav-login,
.primary-button,
.secondary-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 0 18px;
  font-size: 0.94rem;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease, background 220ms ease;
}

.nav-login,
.secondary-button {
  color: var(--text);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #202329, #15171d);
}

.primary-button {
  color: #17110a;
  background: linear-gradient(90deg, var(--gold-2), var(--orange));
  box-shadow: 0 12px 30px rgba(222, 168, 83, 0.22);
}

.primary-button:hover,
.secondary-button:hover,
.nav-login:hover {
  border-color: rgba(255, 202, 118, 0.44);
  box-shadow: 0 16px 42px rgba(222, 168, 83, 0.18);
  transform: translateY(-2px);
}

.primary-button:hover {
  background: linear-gradient(90deg, #ffd48d, #dc7a38);
}

main {
  position: relative;
  z-index: 1;
}

.hero-section,
.training-gallery,
.value-section,
.workflow-band,
.trial-section,
.pricing-section,
.final-cta {
  width: min(1160px, calc(100% - 36px));
  margin: 0 auto;
}

.hero-section {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(280px, 0.78fr);
  gap: clamp(24px, 5vw, 58px);
  align-items: center;
  min-height: min(760px, calc(86vh - 40px));
  padding: clamp(44px, 7vw, 74px) 0 clamp(56px, 8vw, 86px);
}

.hero-section > *,
.hero-content {
  min-width: 0;
}

.eyebrow {
  color: var(--gold-2);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

h1 {
  max-width: 11ch;
  margin-top: 18px;
  font-family: "Outfit", sans-serif;
  font-size: clamp(3.35rem, 8.5vw, 6.85rem);
  font-weight: 700;
  line-height: 0.91;
  letter-spacing: 0;
}

.hero-copy {
  max-width: 64ch;
  margin-top: 24px;
  color: var(--muted);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.78;
}

.hero-actions {
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.support-note {
  margin-top: 14px;
  color: var(--faint);
  font-size: 0.94rem;
}

.trial-banner {
  display: grid;
  gap: 0.3rem;
  max-width: 610px;
  margin-top: 24px;
  border: 1px solid rgba(255, 202, 118, 0.3);
  border-radius: 8px;
  padding: 14px 16px;
  background:
    linear-gradient(135deg, rgba(255, 202, 118, 0.14), rgba(198, 109, 52, 0.08)),
    rgba(255, 255, 255, 0.045);
}

.trial-banner strong {
  color: var(--gold-2);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
}

.trial-banner span {
  color: var(--muted);
  line-height: 1.5;
}

.hero-visual {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vw, 20px);
  width: 100%;
  min-width: 0;
}

.hero-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1.15;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 22%;
}

.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, transparent 40%, rgba(0, 0, 0, 0.78) 100%),
    linear-gradient(120deg, rgba(222, 168, 83, 0.1), transparent 42%);
  pointer-events: none;
}

.hero-photo-caption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 1;
}

.hero-photo-caption span {
  color: var(--gold-2);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero-photo-caption strong {
  display: block;
  margin-top: 7px;
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  line-height: 1.1;
}

.product-preview,
.pricing-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.07), transparent 34%),
    linear-gradient(180deg, #171a20, #0c0d11);
  box-shadow: var(--shadow);
}

.product-preview {
  width: 100%;
  min-width: 0;
  padding: clamp(14px, 2vw, 20px);
  color: var(--text);
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  animation: previewFloat 8s ease-in-out infinite;
  transition: border-color 260ms ease, box-shadow 260ms ease, transform 260ms ease;
}

.product-preview::before {
  content: "";
  position: absolute;
  inset: -35%;
  background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, 0.12) 48%, transparent 62%);
  opacity: 0.25;
  transform: translateX(-42%);
  animation: premiumSheen 7s ease-in-out infinite;
}

.product-preview > * {
  position: relative;
  z-index: 1;
}

.product-preview:hover {
  border-color: rgba(255, 202, 118, 0.34);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.52), 0 0 44px rgba(222, 168, 83, 0.1);
  transform: translateY(-4px);
}

.preview-topbar {
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  padding-bottom: 16px;
  color: #e8eaee;
  font-size: 0.9rem;
}

.preview-topbar strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.preview-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 50%;
  background: #e86b48;
}

.preview-dot.amber {
  background: var(--gold);
}

.preview-dot.green {
  background: var(--green);
}

.preview-note,
.preview-search {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #15181e;
  transition: border-color 220ms ease, background 220ms ease, transform 220ms ease;
}

.preview-note:hover,
.preview-search:hover {
  border-color: rgba(255, 202, 118, 0.34);
  background: #1a1e25;
  transform: translateX(3px);
}

.preview-note {
  display: grid;
  gap: 9px;
  margin-top: 12px;
  padding: clamp(16px, 3vw, 20px);
}

.preview-note.active {
  border-color: rgba(222, 168, 83, 0.5);
  background:
    linear-gradient(145deg, rgba(222, 168, 83, 0.11), transparent 56%),
    #191b21;
}

.preview-note span,
.preview-search span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.preview-note strong {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.15rem, 2.5vw, 1.38rem);
  line-height: 1.14;
}

.preview-note p {
  color: var(--muted);
  line-height: 1.55;
}

.preview-search {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding: 14px 16px;
}

.training-gallery {
  display: grid;
  grid-template-columns: minmax(190px, 0.34fr) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 26px);
  align-items: stretch;
  padding: clamp(8px, 2vw, 18px) 0 clamp(44px, 7vw, 68px);
}

.gallery-heading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 18px 0;
}

.gallery-heading h2 {
  max-width: 11ch;
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.85rem, 3.2vw, 3rem);
  line-height: 0.96;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.gallery-card {
  position: relative;
  min-height: 0;
  aspect-ratio: 1.34;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #111318;
  box-shadow: var(--shadow);
  transition: border-color 260ms ease, box-shadow 260ms ease, transform 260ms ease;
}

.gallery-card-wide {
  grid-row: auto;
}

.gallery-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(1.02) contrast(1.06) brightness(0.96);
  transform: scale(1.01);
  transition: filter 320ms ease, transform 460ms ease;
}

.gallery-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, transparent 32%, rgba(0, 0, 0, 0.78) 100%),
    linear-gradient(120deg, rgba(222, 168, 83, 0.1), transparent 42%);
  pointer-events: none;
}

.gallery-card div {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 1;
}

.gallery-card span {
  color: var(--gold-2);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.gallery-card strong {
  display: block;
  margin-top: 7px;
  max-width: 16ch;
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.08rem, 1.8vw, 1.42rem);
  line-height: 1.04;
}

.gallery-card:hover {
  border-color: rgba(255, 202, 118, 0.38);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.48), 0 0 44px rgba(222, 168, 83, 0.08);
  transform: translateY(-5px);
}

.gallery-card:hover img {
  filter: saturate(1.1) contrast(1.08) brightness(1.02);
  transform: scale(1.045);
}

.value-section,
.pricing-section {
  padding: clamp(58px, 8vw, 88px) 0;
}

.section-heading {
  max-width: 760px;
}

.pricing-section .section-heading {
  margin: 0 auto;
  text-align: center;
}

.section-heading h2,
.workflow-band h2,
.final-cta h2 {
  margin-top: 12px;
  font-family: "Outfit", sans-serif;
  font-size: clamp(2.05rem, 4.4vw, 3.7rem);
  line-height: 1;
  letter-spacing: 0;
}

.section-heading p:not(.eyebrow),
.final-cta p {
  margin-top: 14px;
  color: var(--muted);
  line-height: 1.7;
}

.value-grid,
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 38px;
}

.value-grid article,
.pricing-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.065), transparent 45%),
    #121419;
  transition: border-color 260ms ease, box-shadow 260ms ease, transform 260ms ease, background 260ms ease;
}

.value-grid article:hover,
.pricing-card:hover {
  border-color: rgba(255, 202, 118, 0.32);
  background:
    linear-gradient(145deg, rgba(222, 168, 83, 0.12), transparent 48%),
    #171a20;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.3);
  transform: translateY(-5px);
}

.value-grid article {
  padding: 24px;
}

.feature-number {
  color: var(--gold);
  font-weight: 900;
}

.value-grid h3,
.pricing-card h3 {
  margin-top: 18px;
  font-family: "Outfit", sans-serif;
  font-size: 1.48rem;
}

.value-grid p,
.pricing-card p,
.pricing-card li {
  color: var(--muted);
  line-height: 1.65;
}

.value-grid p {
  margin-top: 10px;
}

.workflow-band {
  display: grid;
  grid-template-columns: 0.7fr 1fr;
  gap: 34px;
  align-items: start;
  padding: clamp(26px, 4vw, 38px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(222, 168, 83, 0.11), transparent 35%),
    #111318;
  box-shadow: var(--shadow);
  transition: border-color 260ms ease, box-shadow 260ms ease, transform 260ms ease;
}

.workflow-band:hover {
  border-color: rgba(255, 202, 118, 0.28);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.46);
  transform: translateY(-3px);
}

.workflow-list {
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.workflow-list li {
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #171a20;
  transition: border-color 220ms ease, background 220ms ease, transform 220ms ease;
}

.workflow-list li:hover {
  border-color: rgba(255, 202, 118, 0.28);
  background: #1d2128;
  transform: translateX(4px);
}

.workflow-list span {
  max-width: 42ch;
  color: var(--muted);
  line-height: 1.6;
}

.trial-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.72fr);
  gap: clamp(22px, 4vw, 44px);
  align-items: center;
  margin-bottom: clamp(42px, 7vw, 74px);
  border: 1px solid rgba(255, 202, 118, 0.24);
  border-radius: 8px;
  padding: clamp(24px, 4vw, 38px);
  background:
    linear-gradient(135deg, rgba(255, 202, 118, 0.12), transparent 48%),
    rgba(255, 255, 255, 0.045);
}

.trial-section h2 {
  margin-top: 10px;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.02;
}

.trial-section p:not(.eyebrow) {
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.65;
}

.trial-perks {
  display: grid;
  gap: 10px;
}

.trial-perks span {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--text);
  background: rgba(7, 8, 11, 0.36);
  font-weight: 800;
}

.pricing-section {
  padding-left: clamp(16px, 4vw, 48px);
  padding-right: clamp(16px, 4vw, 48px);
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding: clamp(22px, 3vw, 30px);
}

.pricing-card.featured {
  border-color: var(--line-strong);
  background:
    linear-gradient(145deg, rgba(222, 168, 83, 0.14), transparent 46%),
    #15171d;
  transform: translateY(-18px);
}

.pricing-card.featured:hover {
  transform: translateY(-24px);
}

.popular-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #151414;
  color: var(--gold-2);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.trial-badge {
  width: fit-content;
  border: 1px solid rgba(255, 202, 118, 0.36);
  border-radius: 999px;
  padding: 5px 10px;
  color: var(--gold-2);
  background: rgba(255, 202, 118, 0.1);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.plan-name {
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.featured .plan-name {
  color: var(--gold-2);
}

.pricing-card h3 {
  margin-top: 0;
  font-size: clamp(2rem, 4vw, 3rem);
}

.pricing-card h3 span {
  color: var(--faint);
  font-size: 1rem;
}

.pricing-card ul {
  display: grid;
  gap: 10px;
  margin: 0 0 auto;
  padding-left: 18px;
}

.pricing-card .primary-button,
.pricing-card .secondary-button {
  width: 100%;
}

.final-cta {
  margin-bottom: 46px;
  padding: clamp(30px, 5vw, 48px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(222, 168, 83, 0.12), transparent 42%),
    #111318;
  text-align: center;
  transition: border-color 260ms ease, box-shadow 260ms ease, transform 260ms ease;
}

.final-cta:hover {
  border-color: rgba(255, 202, 118, 0.3);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
  transform: translateY(-3px);
}

.final-cta .primary-button {
  margin-top: 22px;
}

.final-actions {
  justify-content: center;
}

.final-cta .final-actions {
  margin-top: 22px;
}

.final-cta .final-actions .primary-button {
  margin-top: 0;
}

@media (max-width: 1120px) {
  .hero-section,
  .trial-section,
  .workflow-band {
    grid-template-columns: 1fr;
  }

  .hero-section {
    min-height: auto;
  }

  .hero-visual {
    max-width: 640px;
  }

  .training-gallery {
    grid-template-columns: 1fr;
  }

  .gallery-heading {
    display: block;
    max-width: 720px;
    padding: 0;
  }

  .gallery-heading h2 {
    margin-top: 10px;
  }
}

@media (max-width: 980px) {

  .value-grid,
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .pricing-card.featured {
    transform: none;
  }

  .pricing-card.featured:hover {
    transform: translateY(-5px);
  }
}

@media (max-width: 680px) {
  /* The nav used to be `display: none` here, which took Pricing and Sign Up off
     the header entirely on phones -- pricing was unreachable from the header.
     Instead of adding a hamburger (and the JS + focus management that needs),
     keep the two links that carry the funnel and drop only "How it works",
     which the hero already covers. The brand wordmark is hidden below, so the
     three remaining items fit comfortably at 390px. */
  .site-nav {
    gap: 14px;
    font-size: 0.82rem;
  }

  .site-nav a[href="#how-it-works"] {
    display: none;
  }

  .brand span {
    display: none;
  }

  .site-header {
    padding: 14px 16px;
  }

  .hero-section,
  .training-gallery,
  .value-section,
  .trial-section,
  .pricing-section {
    width: min(100% - 28px, 1160px);
    padding-top: 34px;
    padding-bottom: 44px;
  }

  .workflow-band,
  .final-cta {
    width: min(100% - 28px, 1160px);
  }

  h1 {
    max-width: 10ch;
    font-size: clamp(2.45rem, 12vw, 3.8rem);
  }

  .hero-copy {
    font-size: 0.98rem;
  }

  .hero-actions {
    align-items: stretch;
  }

  .preview-search,
  .workflow-list li {
    display: grid;
  }

  .gallery-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(218px, 74%);
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
  }

  .gallery-card,
  .gallery-card img {
    aspect-ratio: 16 / 9;
    scroll-snap-align: start;
  }
}

@media (max-width: 520px) {
  .hero-section,
  .training-gallery,
  .value-section,
  .workflow-band,
  .trial-section,
  .pricing-section,
  .final-cta {
    width: min(100% - 28px, 362px);
    margin-left: 14px;
    margin-right: auto;
  }

  h1 {
    max-width: 9.5ch;
    font-size: clamp(2.32rem, 10vw, 3.05rem);
  }

  .hero-copy,
  .support-note {
    max-width: 34ch;
  }

  .product-preview {
    max-width: 100%;
  }

  .gallery-card,
  .gallery-card img {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 430px) {
  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  h1 {
    max-width: 9.5ch;
    font-size: clamp(2.28rem, 11.5vw, 3.1rem);
  }

  .preview-topbar {
    display: grid;
    gap: 10px;
  }
}

.motion-ready .reveal-on-scroll {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms ease, transform 620ms ease;
  transition-delay: var(--reveal-delay, 0ms);
}

.motion-ready .reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes logoDrift {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 420px 420px;
  }
}

@keyframes premiumSheen {
  0%, 34% {
    transform: translateX(-42%);
  }
  62%, 100% {
    transform: translateX(42%);
  }
}

@keyframes previewFloat {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .reveal-on-scroll {
    opacity: 1;
    transform: none;
  }
}