/* Slim Coach — marketing landing page. Dark premium theme (navy + neon blue),
   self-contained: no external CSS/JS/fonts/CDN. Kept visually consistent with
   the onboarding WebApp theme. */

:root {
  --bg-0: #060912;
  --bg-1: #0a0e1a;
  --bg-2: #0f1830;
  --panel: rgba(255, 255, 255, 0.04);
  --panel-strong: rgba(255, 255, 255, 0.06);
  --panel-border: rgba(90, 140, 255, 0.16);
  --panel-border-strong: rgba(90, 140, 255, 0.32);
  --text: #eaf0ff;
  --text-dim: #8792ad;
  --accent: #2f7bff;
  --accent-2: #22d3ee;
  --accent-glow: rgba(47, 123, 255, 0.55);
  --radius: 18px;
  --radius-sm: 12px;
  --maxw: 1140px;
  --header-h: 66px;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100%;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial,
    sans-serif;
  color: var(--text);
  line-height: 1.6;
  background:
    radial-gradient(1200px 620px at 50% -8%, #14224a 0%, transparent 60%),
    radial-gradient(900px 520px at 100% 0%, #0b2350 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}

/* Accessibility helpers */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--accent);
  color: #fff;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Buttons */
.btn {
  --btn-bg: var(--panel-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: var(--btn-bg);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.btn--primary {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, var(--accent) 0%, #4d63ff 100%);
  box-shadow: 0 10px 30px -12px var(--accent-glow);
}

.btn--ghost {
  background: transparent;
}

.btn--sm {
  padding: 9px 16px;
  font-size: 14px;
}

.btn--lg {
  padding: 15px 28px;
  font-size: 17px;
}

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

.btn:hover {
  transform: translateY(-2px);
  border-color: var(--panel-border-strong);
}

.btn--primary:hover {
  box-shadow: 0 16px 40px -12px var(--accent-glow);
}

.btn:active {
  transform: translateY(0);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Hero primary CTA: a slow shimmer sweep, plus a soft pulsing glow on hover.
   The sweep is a transform-only highlight clipped to the pill. */
.hero__actions .btn--primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hero__actions .btn--primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.38) 50%,
    transparent 100%
  );
  transform: translateX(-200%) skewX(-18deg);
  animation: cta-shimmer 4.5s ease-in-out 1.2s infinite;
  pointer-events: none;
}

@keyframes cta-shimmer {
  0% {
    transform: translateX(-200%) skewX(-18deg);
  }
  55%,
  100% {
    transform: translateX(320%) skewX(-18deg);
  }
}

.hero__actions .btn--primary:hover {
  animation: cta-pulse 1.7s ease-in-out infinite;
}

@keyframes cta-pulse {
  0%,
  100% {
    box-shadow: 0 16px 40px -12px var(--accent-glow);
  }
  50% {
    box-shadow: 0 22px 56px -10px var(--accent-glow);
  }
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(8, 12, 24, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--panel-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.4px;
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
}

.wordmark__mark {
  color: var(--accent-2);
  text-shadow: 0 0 14px var(--accent-glow);
  font-size: 20px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lang-switch {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
}

.lang-switch__btn {
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition:
    color 0.18s ease,
    background 0.18s ease;
}

.lang-switch__btn:hover {
  color: var(--text);
}

.lang-switch__btn[aria-pressed="true"] {
  color: #fff;
  background: linear-gradient(135deg, var(--accent) 0%, #4d63ff 100%);
  box-shadow: 0 6px 18px -8px var(--accent-glow);
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 9vw, 104px) 0 clamp(40px, 7vw, 88px);
}

/* Animated ambient background: blurred colour blobs + a drifting grid.
   Everything animates transform/opacity only and is clipped by the hero. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
  will-change: transform, opacity;
}

.hero__blob--1 {
  width: clamp(280px, 42vw, 520px);
  height: clamp(280px, 42vw, 520px);
  top: -12%;
  left: -8%;
  background: radial-gradient(circle, rgba(47, 123, 255, 0.55), transparent 66%);
  animation: blob-1 18s ease-in-out infinite;
}

.hero__blob--2 {
  width: clamp(240px, 38vw, 460px);
  height: clamp(240px, 38vw, 460px);
  top: -8%;
  right: -6%;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.42), transparent 66%);
  animation: blob-2 22s ease-in-out infinite;
}

.hero__blob--3 {
  width: clamp(220px, 34vw, 420px);
  height: clamp(220px, 34vw, 420px);
  left: 42%;
  bottom: -26%;
  background: radial-gradient(circle, rgba(47, 123, 255, 0.34), transparent 66%);
  animation: blob-3 26s ease-in-out infinite;
}

@keyframes blob-1 {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: translate3d(38px, 30px, 0) scale(1.1);
    opacity: 0.68;
  }
}

@keyframes blob-2 {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.4;
  }
  50% {
    transform: translate3d(-48px, 22px, 0) scale(1.08);
    opacity: 0.6;
  }
}

@keyframes blob-3 {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.32;
  }
  50% {
    transform: translate3d(30px, -40px, 0) scale(1.12);
    opacity: 0.5;
  }
}

/* Subtle CSS-only grid texture, faded at the edges, drifting one tile so the
   loop is seamless. */
.hero__grid {
  position: absolute;
  inset: -44px;
  background-image:
    linear-gradient(rgba(90, 140, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 140, 255, 0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0.6;
  -webkit-mask-image: radial-gradient(
    ellipse 80% 68% at 50% 28%,
    #000 30%,
    transparent 76%
  );
  mask-image: radial-gradient(
    ellipse 80% 68% at 50% 28%,
    #000 30%,
    transparent 76%
  );
  animation: grid-drift 24s linear infinite;
  will-change: transform;
}

@keyframes grid-drift {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(44px);
  }
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}

/* Staggered load-in for the hero copy. Base state is visible; the animation's
   backwards fill hides each line until its turn, so a failed/absent animation
   (e.g. reduced motion) simply shows everything. */
.hero__copy .eyebrow {
  animation: hero-rise 0.7s ease both;
  animation-delay: 0.1s;
}

.hero__title {
  animation: hero-title-in 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: 0.22s;
}

.hero__subtitle {
  animation: hero-rise 0.7s ease both;
  animation-delay: 0.42s;
}

.hero__actions {
  animation: hero-rise 0.7s ease both;
  animation-delay: 0.56s;
}

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-title-in {
  from {
    opacity: 0;
    transform: translateY(26px);
    clip-path: inset(0 0 100% 0);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
  }
}

.eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  color: var(--accent-2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.hero__title {
  margin: 0 0 18px;
  font-size: clamp(32px, 5.4vw, 56px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.hero__subtitle {
  margin: 0 0 28px;
  max-width: 40ch;
  font-size: clamp(16px, 2.2vw, 19px);
  color: var(--text-dim);
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.hero__note {
  font-size: 14px;
  color: var(--text-dim);
}

.hero__media {
  min-width: 0;
  /* JS parallax writes `transform` here; the load-in only touches opacity so
     the two never fight over the same property. */
  animation: hero-fade 0.8s ease both;
  animation-delay: 0.3s;
  will-change: transform;
}

@keyframes hero-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Media slots — degrade gracefully when the image file is missing */
.media {
  position: relative;
  display: block;
  margin: 0;
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(47, 123, 255, 0.1), rgba(34, 211, 238, 0.06));
  border: 1px solid var(--panel-border);
  overflow: hidden;
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media--hero {
  aspect-ratio: 4 / 3;
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.8);
  /* Gentle continuous float (transform only). Parallax lives on the parent
     .hero__media, so this transform composes with it instead of clashing. */
  animation: hero-float 6s ease-in-out infinite;
  will-change: transform;
}

@keyframes hero-float {
  0%,
  100% {
    transform: translateY(-6px);
  }
  50% {
    transform: translateY(6px);
  }
}

/* Icons are real 3D PNGs with their own glass form and glow, so the tile drops
   the panel/box entirely and just floats the artwork over a soft radial glow.
   ~3x the old size, fluid via clamp(), crisp via object-fit: contain. */
.media--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(88px, 12vw, 124px);
  height: clamp(88px, 12vw, 124px);
  flex: 0 0 auto;
  border: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
}

.media--icon::before {
  content: "";
  position: absolute;
  inset: -16%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 52%,
    rgba(47, 123, 255, 0.32) 0%,
    rgba(34, 211, 238, 0.12) 42%,
    transparent 70%
  );
  filter: blur(6px);
  opacity: 0.85;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
  pointer-events: none;
}

.media--icon img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.25s ease;
}

/* Hover: the icon lifts slightly and its glow intensifies. */
.step:hover .media--icon img,
.feature:hover .media--icon img {
  transform: scale(1.06);
}

.step:hover .media--icon::before,
.feature:hover .media--icon::before {
  opacity: 1;
  transform: scale(1.12);
}

.media--hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    380px 240px at 50% 40%,
    rgba(47, 123, 255, 0.14),
    transparent 70%
  );
  pointer-events: none;
}

/* Sections */
.section {
  padding: clamp(48px, 8vw, 92px) 0;
}

.section--muted {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.015),
    rgba(255, 255, 255, 0)
  );
  border-top: 1px solid var(--panel-border);
  border-bottom: 1px solid var(--panel-border);
}

.section__title {
  margin: 0 0 clamp(28px, 5vw, 48px);
  text-align: center;
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Cards (shared) */
.card {
  padding: 30px 28px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  background: var(--panel-strong);
  border-color: var(--panel-border-strong);
  box-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.85);
}

/* Steps */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  counter-reset: step;
}

.step {
  position: relative;
  padding: 32px 26px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.step:hover {
  transform: translateY(-4px);
  border-color: var(--panel-border-strong);
  box-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.85);
}

.step__num {
  position: absolute;
  top: 22px;
  right: 24px;
  font-size: clamp(46px, 6vw, 58px);
  font-weight: 800;
  line-height: 1;
  color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 0.7;
}

.step .media--icon,
.feature .media--icon {
  margin-bottom: clamp(18px, 3vw, 26px);
}

.step__title,
.feature__title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
}

.step__text,
.feature__text {
  margin: 0;
  color: var(--text-dim);
  font-size: 15px;
}

/* Features */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Pricing */
.pricing {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  max-width: 780px;
  margin: 0 auto;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
}

.plan--featured {
  border-color: var(--panel-border-strong);
  background: linear-gradient(
    180deg,
    rgba(47, 123, 255, 0.1),
    rgba(47, 123, 255, 0.02)
  );
  box-shadow: 0 30px 70px -40px var(--accent-glow);
}

.plan__badge {
  position: absolute;
  top: -12px;
  left: 28px;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 20px -8px var(--accent-glow);
}

.plan__name {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 800;
}

.plan__price {
  margin: 0 0 20px;
  font-size: 17px;
  color: var(--text-dim);
}

.plan--featured .plan__price {
  font-size: 30px;
  font-weight: 800;
  color: var(--text);
}

/* "/ month" next to the price: readable, but never as loud as the amount. */
.plan__period {
  margin-left: 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dim);
}

.plan__list {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 12px;
  flex: 1 1 auto;
}

.plan__list li {
  position: relative;
  padding-left: 28px;
  color: var(--text);
  font-size: 15px;
}

.plan__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  color: var(--accent-2);
  background: rgba(34, 211, 238, 0.12);
}

/* Billing terms under the pricing cards (Stripe, renewal, cancellation). */
.pricing__note {
  margin: 26px auto 0;
  max-width: 720px;
  text-align: center;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-dim);
}

.pricing__note a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pricing__note a:hover {
  color: var(--accent-2);
}

/* Legal pages (/terms, /privacy, /refund) */
.legal {
  padding: calc(var(--header-h) + 48px) 0 72px;
}

.legal__inner {
  max-width: 820px;
}

.legal__back {
  display: inline-block;
  margin-bottom: 20px;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.18s ease;
}

.legal__back::before {
  content: "←";
  margin-right: 8px;
}

.legal__back:hover {
  color: var(--text);
}

.legal__title {
  margin: 0 0 10px;
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.legal__updated {
  margin: 0 0 22px;
  font-size: 13px;
  color: var(--text-dim);
}

.legal__lead {
  margin: 0 0 40px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--text);
}

.legal__section {
  margin-bottom: 36px;
}

.legal__section h2 {
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.legal__section p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-dim);
}

.legal__section p:last-child {
  margin-bottom: 0;
}

/* Sections that must not be missed (medical disclaimer, GDPR rights, EU
   withdrawal right) get the panel treatment used by the cards. */
.legal__section--callout {
  padding: 24px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  background: var(--panel);
}

.legal__list,
.legal__contact {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 12px;
}

.legal__list li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-dim);
}

.legal__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
}

/* Legal entity / address / support email block. */
.legal__contact {
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  font-size: 15px;
  color: var(--text);
}

.legal__contact a {
  color: var(--accent-2);
  text-decoration: none;
}

.legal__contact a:hover {
  text-decoration: underline;
}

/* Stripe return pages (/pay/success, /pay/cancel) */
.pay__inner {
  max-width: 620px;
  text-align: center;
}

.pay__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  border-radius: 50%;
  font-size: 30px;
  font-weight: 700;
  color: var(--accent-2);
  background: rgba(34, 211, 238, 0.12);
  border: 1px solid var(--panel-border-strong);
}

.pay__icon--muted {
  color: var(--text-dim);
  background: var(--panel);
  border-color: var(--panel-border);
}

.pay__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.pay .legal__back {
  margin-bottom: 0;
}

/* Footer */
.site-footer {
  padding: 34px 0;
  border-top: 1px solid var(--panel-border);
  background: rgba(6, 9, 18, 0.6);
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.site-footer__copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 600;
  color: var(--text-dim);
}

.site-footer__nav {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.site-footer__nav a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.18s ease;
}

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

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Pause the hero's continuous animations while it is scrolled out of view
   (JS toggles .is-paused via IntersectionObserver so offscreen work stops). */
.hero.is-paused .hero__blob,
.hero.is-paused .hero__grid,
.hero.is-paused .media--hero,
.hero.is-paused .hero__actions .btn--primary::after {
  animation-play-state: paused;
}

/* Responsive */
@media (max-width: 900px) {
  .hero__inner {
    grid-template-columns: 1fr;
  }

  /* Stack text first, then the image (natural DOM order). */
  .hero__media {
    max-width: 460px;
    margin-top: 8px;
  }

  .steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .features {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .site-nav {
    gap: 10px;
  }

  /* The wordmark stays readable on phones: shrink it instead of hiding the
     text, and let it be the part that gives way if the row runs out of room
     (the language switch and CTA keep their size). */
  .wordmark {
    font-size: 16px;
    gap: 7px;
    min-width: 0;
    flex: 0 1 auto;
  }

  .wordmark__mark {
    font-size: 17px;
  }

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

  .hero__actions {
    gap: 12px;
  }
}

/* Keep the header from overflowing on narrow screens: let it grow and wrap the
   nav (language switch + CTA) instead of forcing everything onto one line. */
@media (max-width: 520px) {
  .site-header {
    height: auto;
  }

  .site-header__inner {
    flex-wrap: wrap;
    row-gap: 10px;
    padding: 10px 0;
  }

  .site-nav {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 10px;
  }

  .lang-switch__btn {
    padding: 6px 10px;
    font-size: 12px;
  }
}

@media (max-width: 360px) {
  .container {
    padding: 0 14px;
  }

  /* Narrowest phones: the logo (icon + text) still fits on its own row above
     the wrapped nav, so it never has to be hidden. */
  .wordmark {
    font-size: 15px;
  }

  .wordmark__mark {
    font-size: 16px;
  }

  .btn--sm {
    padding: 8px 12px;
    font-size: 13px;
  }
}

/* Respect reduced motion: disable every animation and transition */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  /* Kill every hero "wow" effect and settle on the static layout. */
  .hero__blob,
  .hero__grid,
  .media--hero,
  .hero__actions .btn--primary:hover {
    animation: none !important;
  }

  .hero__actions .btn--primary::after {
    animation: none !important;
    display: none;
  }

  .hero__copy .eyebrow,
  .hero__title,
  .hero__subtitle,
  .hero__actions {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  /* Drop any parallax/float transform left on the image wrappers. */
  .hero__media,
  .media--hero {
    animation: none !important;
    transform: none !important;
  }

  /* Icons stay put on hover. */
  .step:hover .media--icon img,
  .feature:hover .media--icon img,
  .step:hover .media--icon::before,
  .feature:hover .media--icon::before {
    transform: none;
  }
}