/* =========================================================
   Dimplez Golf — mobile-first base styles
   ========================================================= */

:root {
  --vert: #1e5631;
  --vert-deep: #163f24;
  --vert-card: #1a2e1d;
  --light-green: #68a734;
  --light-green-soft: rgba(104, 167, 52, 0.18);
  --sage: #b0c494;
  --blanc: #ffffff;
  --blanc-b: #fafaf9;
  --noir: #000000;
  --ink: #0f1a12;
  --muted: rgba(255, 255, 255, 0.72);
  --muted-dark: rgba(15, 26, 18, 0.68);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --container: 72rem;
  --gutter: 1.25rem;
  --header-h: 3.5rem;
  --header-shell-pad: 1.5rem;
  --header-chrome-pad-x: 0;

  /* Shared pill geometry: header chrome + nav-dock */
  --pill-radius: 999px;
  --pill-pad-y: 0.45rem;
  --pill-pad-x: 0.65rem;
  --nav-dock-height: 3.4rem;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --shadow-phone: 0 28px 60px rgba(0, 0, 0, 0.35);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --bg-image: url("/assets/images/dimplez-background-mobile.png");
}

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

html {
  /* Smooth scroll fights native momentum on touch and makes flings feel buggy. */
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
}

@media (hover: hover) and (pointer: fine) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--blanc);
  background-color: #031f12;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

@media (max-width: 767px) {
  html,
  body {
    overscroll-behavior-y: none;
  }
}

/* Gradient zone: header + hero + phone CTA.
   z-index keeps the opaque gradient above the mobile fixed hex layer. */
.landing-top {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, #031f12 0%, #1e5631 100%);
  overflow: hidden;
}

/* Image background from time section downward.
   Mobile: viewport-fixed ::before with cover (sizes to the screen, not the
   tall scene) so the hex stays visible while scrolling. Avoids iOS bugs
   with background-attachment: fixed.
   Desktop: fixed + cover on the scene itself. */
.landing-scene {
  position: relative;
  isolation: isolate;
  background-color: #0a1810;
  background-image: none;
}

.landing-scene::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: #0a1810;
  background-image: var(--bg-image);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  pointer-events: none;
}

@media (min-width: 768px) {

  .landing-scene {
    isolation: auto;
    background-image: var(--bg-image);
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment: fixed;
    background-size: cover;
  }

  .landing-scene::before {
    content: none;
  }
}

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

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

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.container {
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.section {
  position: relative;
  padding-block: var(--space-8);
  overflow: clip;
}

/* 3D phones extend past sticky cards; do not clip at section bottom */
.section.guided,
.section.focus,
.section.improve {
  overflow: visible;
}

.section-title,
.hero-title {
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-transform: uppercase;
}

.hero-title {
  font-size: clamp(2rem, 7.5vw, 3.5rem);
  font-weight: 700;
  margin-bottom: var(--space-4);
}

.section-title {
  font-size: clamp(1.65rem, 5.5vw, 2.75rem);
  margin-bottom: var(--space-4);
}

.section-lead,
.hero-lead {
  font-size: 1.05rem;
  max-width: 36ch;
  color: var(--muted);
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
}

.text-accent {
  color: var(--light-green);
}

.section-header {
  margin-bottom: var(--space-7);
  max-width: 36rem;
}

.section-header .section-lead + .section-lead {
  margin-top: var(--space-4);
}

/* ---------- Shared bar list ---------- */

.bar-list {
  display: grid;
  gap: 0.65rem;
  text-align: left;
}

.bar-list li {
  position: relative;
  padding-left: 0.85rem;
  font-size: 0.95rem;
  color: var(--blanc);
  line-height: 1.4;
}

.bar-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 2px;
  border-radius: 1px;
  background: var(--light-green);
}

/* ---------- Header + bottom dock ---------- */

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  padding: var(--header-shell-pad);
  background: transparent;
  pointer-events: none;
}

/* Minimal header: logo + desktop langs only (no glass pill) */
.header-chrome {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  pointer-events: auto;
}

.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo img {
  width: auto;
  height: 2.25rem;
}

.logo--footer img {
  height: 1.85rem;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.015em;
}

.lang-switch--desktop {
  display: none;
}

@media (min-width: 768px) {
  .lang-switch--desktop {
    display: inline-flex;
  }
}

.lang-link {
  color: var(--blanc);
  padding: 0.2rem 0;
  transition: color 0.2s var(--ease);
}

.lang-link:hover {
  color: var(--blanc);
}

.lang-link.is-active {
  font-weight: 700;
}

.store-badge img {
  width: auto;
  height: 2.25rem;
}

/* Fixed bottom dock (Flowty-inspired) */
.nav-dock {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: auto;
  max-width: 22rem;
  min-height: var(--nav-dock-height);
  margin-inline: auto;
  padding: var(--pill-pad-y) var(--pill-pad-y) var(--pill-pad-y) var(--pill-pad-x);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--pill-radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  transition:
    opacity 0.32s var(--ease),
    transform 0.32s var(--ease),
    visibility 0.32s var(--ease),
    z-index 0s;
}

/* The dock must clear the guided phone but sit behind the focus cards. */
body.nav-dock-over-guided .nav-dock {
  z-index: 60;
}

body.nav-dock-under-focus .nav-dock {
  z-index: 0;
}

body.nav-dock-at-footer .nav-dock,
body.nav-dock-during-guided .nav-dock {
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(100% + 1.25rem));
  pointer-events: none;
}

.burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.55rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}

.burger__line,
.burger__dot {
  transition:
    transform 0.28s var(--ease),
    opacity 0.2s var(--ease),
    background-color 0.2s var(--ease);
  transform-origin: center;
  will-change: transform, opacity;
}

.burger__line {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: var(--ink);
}

.burger__dot {
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ink);
  flex-shrink: 0;
}

/* Burger → X when drawer is open */
body.drawer-open .burger__line:first-child {
  transform: translateY(7.5px) rotate(45deg);
}

body.drawer-open .burger__dot {
  opacity: 0;
  transform: scale(0);
}

body.drawer-open .burger__line:last-child {
  transform: translateY(-7.5px) rotate(-45deg);
}

.nav-dock__icon {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.nav-dock__icon-img {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0;
  object-fit: contain;
}

.nav-dock__download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.65rem;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  background: var(--vert);
  color: var(--blanc);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
  flex-shrink: 0;
}

.nav-dock__download:hover {
  background: color-mix(in srgb, var(--vert) 88%, white);
  transform: translateY(-1px);
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.nav-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 200;
  width: min(80vw, 320px);
  height: 100dvh;
  padding: 1.25rem 1.5rem 2rem;
  background: var(--blanc);
  color: var(--ink);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18);
  transform: translateX(100%);
  transition: transform 0.35s ease;
  overflow-y: auto;
}

.nav-drawer__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--noir);
  font-size: 1.85rem;
  line-height: 1;
  cursor: pointer;
}

.nav-drawer__body {
  display: grid;
  gap: 1.75rem;
  margin-top: 3rem;
}

.nav-drawer__links {
  display: grid;
}

.nav-drawer__links a {
  padding: 0.7rem 0;
  font-size: 1.125rem;
  font-weight: 300;
  color: var(--ink);
  border-bottom: 1px solid rgba(15, 26, 18, 0.08);
}

.nav-drawer__links a:first-child {
  padding-top: 0;
}

.nav-drawer__links a:hover {
  color: var(--vert);
}

.nav-drawer__downloads {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
}

.nav-drawer__downloads .store-badge img {
  height: 2.75rem;
}

.lang-switch--drawer {
  gap: 0.85rem;
  color: var(--ink);
}

.lang-switch--drawer .lang-link {
  color: rgba(15, 26, 18, 0.45);
}

.lang-switch--drawer .lang-link:hover,
.lang-switch--drawer .lang-link.is-active {
  color: var(--ink);
}

.nav-drawer__contact {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--vert);
  word-break: break-all;
}

.nav-drawer__contact:hover {
  color: var(--light-green);
}

body.drawer-open {
  overflow: hidden;
}

body.drawer-open .nav-backdrop {
  opacity: 1;
  pointer-events: auto;
}

body.drawer-open .nav-drawer {
  transform: translateX(0);
}

@media (min-width: 768px) {

  .nav-dock {
    max-width: 24rem;
    bottom: calc(1.35rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.85rem;
  padding: 0.7rem 1.25rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}

.btn:hover {
  transform: translateY(-1px);
}

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

.btn-primary {
  background: var(--light-green);
  color: var(--blanc);
}

.btn-primary:hover {
  background: color-mix(in srgb, var(--light-green) 85%, white);
}

.btn-download {
  width: 100%;
  min-height: 3.25rem;
  background: var(--blanc);
  color: var(--noir);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.btn-download:hover {
  background: color-mix(in srgb, var(--blanc) 92%, var(--vert));
}

.btn-ghost {
  background: transparent;
  color: var(--blanc);
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
}

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

.hero {
  --hero-dock-clearance: calc(
    1rem + env(safe-area-inset-bottom, 0px) + var(--nav-dock-height) + 0.5rem
  );
  --hero-scroll-extra: 40vh;
  --hero-drop: 0;
  --hero-phone-lift: 0rem;
  position: relative;
  min-height: calc(100svh + var(--hero-scroll-extra));
  padding: 0;
  background: transparent;
  overflow: hidden;
}

.hero-pin {
  position: sticky;
  top: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100svh;
  max-height: 100svh;
  /* Visible so the large phone can bleed below the dock band; section still clips */
  overflow: visible;
  padding-top: calc(var(--header-h) + var(--space-4));
  padding-bottom: calc(var(--nav-dock-height) * 0.35);
  isolation: isolate;
}

.hero-layout {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  flex: 1;
  min-height: 0;
  width: 100%;
}

.hero-head {
  flex-shrink: 0;
  padding-inline: var(--header-shell-pad);
}

.hero-head__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--header-chrome-pad-x);
}

.hero-head .hero-title {
  max-width: min(60%, 22rem);
  padding-top: var(--space-3);
  margin-bottom: var(--space-2);
  line-height: 1.08;
  text-wrap: balance;
}

/* Desktop-only break from lang `hero_title_2` pipe marker (balanced line lengths). */
.hero-title__break {
  display: none;
}

.hero-head .hero-lead {
  font-size: 0.875rem;
  max-width: clamp(200px, 36ch, 100%);
  margin-bottom: var(--space-3);
}

.hero-lead--mobile {
  display: none;
}

@media (max-width: 767px) {
  :root {
    --header-shell-pad: 1.25rem;
    --header-chrome-pad-x: 0;
    --header-h: 3rem;
  }

  .hero-head__inner {
    margin-top: 48px;
  }

  .header-chrome {
    justify-content: flex-start;
  }

  .header-chrome .logo img {
    height: 2.25rem;
  }

  .hero-head .hero-title {
    max-width: 100%;
    margin-top: var(--space-4);
    padding-top: 0;
    font-size: clamp(2.15rem, calc(6.2vw + 0.5rem), 2.35rem);
    letter-spacing: -0.025em;
  }

  .hero-lead--desktop {
    display: none;
  }

  .hero-lead--mobile {
    display: block;
  }

  /* Kickstart sits on the green line; stage cluster above nav-dock */
  .hero-stage {
    margin-top: auto;
    gap: 0;
  }

  .hero-stage > p.hero-kickstart {
    margin-top: 48px;
  }

  .hero-media-line {
    height: calc(2.5rem * (1 - var(--hero-drop)));
  }

  .hero-stage__well {
    --hero-well-h: clamp(9rem, 22svh, 13rem);
  }

  /* Guided: longer sticky track so twists read slower on fling */
  .guided-stage {
    --guided-track-height: 520vh;
  }

  /* Guided: phone under copy */
  .guided-phone {
    flex: 0 0 auto;
    align-items: flex-start;
    margin-top: var(--space-4);
  }

  .guided-pin {
    height: calc(100svh - var(--header-h) - var(--space-6));
  }

  /* Focus → improve: keep the tail short, but leave enough for the last card to pin */
  .focus-stack {
    min-height: 150vh;
    padding-bottom: 0;
  }

  .focus-stack-card--with-media,
  .focus-stack-card--last {
    min-height: calc(min(70vh, 32rem) + var(--stack-pad, 0rem));
  }

  .section.improve {
    padding-block-start: var(--space-6);
  }

  .improve-lead,
  .improve-subhead {
    /* Figma: 16px, line-height 140% */
    font-size: 1rem;
    line-height: 1.4;
  }

  /* Figma: title 24px, steps 16px on mobile */
  .improve-title {
    font-size: 1.5rem;
  }

  .improve-body .bar-list li {
    font-size: 1rem;
  }
}

.hero-kickstart {
  position: relative;
  z-index: 4;
  width: 100%;
  margin: 0 0 var(--space-2);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--blanc);
  line-height: 1.45;
}

/* isolation scopes the glitch slices' mix-blend-mode to this box (instead
   of compositing against the whole scene); contain stops the per-frame
   text repaints from invalidating anything outside. Keeps the morph
   effect from flickering the fixed background/dock on mobile GPUs. */
.hero-kickstart__phrase {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35em;
  isolation: isolate;
  contain: layout paint;
}

.hero-kickstart__swap {
  position: relative;
  display: inline-block;
  min-width: 4.5ch;
  text-align: center;
  will-change: transform, filter, opacity;
}

.hero-kickstart__swap.is-morphing {
  animation: kickstartDistort 0.55s steps(3, end) both;
}

.hero-kickstart__swap.is-morphing::before,
.hero-kickstart__swap.is-morphing::after {
  content: attr(data-glitch);
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-kickstart__swap.is-morphing::before {
  color: #7dffb3;
  transform: translate(-2px, -1px);
  clip-path: inset(0 0 55% 0);
  mix-blend-mode: screen;
  opacity: 0.85;
  animation: kickstartSliceA 0.55s steps(2, end) both;
}

.hero-kickstart__swap.is-morphing::after {
  color: #c8ff68;
  transform: translate(2px, 1px);
  clip-path: inset(45% 0 0 0);
  mix-blend-mode: screen;
  opacity: 0.75;
  animation: kickstartSliceB 0.55s steps(2, end) both;
}

/* letter-spacing deliberately not animated here: it forces text layout
   every frame; skew/scale give the same wobble on the compositor. */
@keyframes kickstartDistort {
  0% {
    transform: skewX(0deg) scaleX(1);
    filter: blur(0) contrast(1);
  }
  20% {
    transform: skewX(-12deg) scaleX(1.08);
    filter: blur(1.2px) contrast(1.4);
  }
  45% {
    transform: skewX(10deg) scaleX(0.92);
    filter: blur(0.6px) contrast(1.6);
  }
  70% {
    transform: skewX(-6deg) scaleX(1.04);
    filter: blur(0.35px) contrast(1.25);
  }
  100% {
    transform: skewX(0deg) scaleX(1);
    filter: blur(0) contrast(1);
  }
}

@keyframes kickstartSliceA {
  0%,
  100% {
    clip-path: inset(0 0 60% 0);
    transform: translate(-2px, 0);
  }
  33% {
    clip-path: inset(15% 0 40% 0);
    transform: translate(3px, -2px);
  }
  66% {
    clip-path: inset(0 0 25% 0);
    transform: translate(-4px, 1px);
  }
}

@keyframes kickstartSliceB {
  0%,
  100% {
    clip-path: inset(55% 0 0 0);
    transform: translate(2px, 0);
  }
  40% {
    clip-path: inset(30% 0 10% 0);
    transform: translate(-3px, 2px);
  }
  75% {
    clip-path: inset(70% 0 0 0);
    transform: translate(4px, -1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-kickstart__swap.is-morphing,
  .hero-kickstart__swap.is-morphing::before,
  .hero-kickstart__swap.is-morphing::after,
  .guided-step-morph.is-morphing,
  .guided-step-morph.is-morphing::before,
  .guided-step-morph.is-morphing::after {
    animation: none;
  }
}

/* Hero stage: ball → hole, then large phone above the hole */
.hero-stage {
  position: relative;
  width: 100%;
  margin-top: auto;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.hero-media-line {
  position: relative;
  z-index: 4;
  width: 2px;
  height: calc(3.5rem * (1 - var(--hero-drop)));
  opacity: calc(1 - var(--hero-drop));
  border-radius: 1px;
  background: var(--light-green);
  transform-origin: top center;
  will-change: height, opacity;
}

.hero-stage__well {
  position: relative;
  z-index: 3;
  width: min(14rem, 70vw);
  --hero-well-h: clamp(11rem, 26svh, 16rem);
  height: var(--hero-well-h);
  margin-top: var(--space-1);
}

/* Clip window for the sinking ball. Sized to the hole (5.5rem) with an
   elliptical bottom edge that traces the hole's front rim (half-height
   1.075rem, bottom tangent 1.25rem above the well), so the ball is
   occluded along the curved rim as it sinks - no straight cut line. */
.hero-stage__ball-clip {
  position: absolute;
  top: 0;
  bottom: 1.25rem;
  left: 50%;
  width: 5.5rem;
  transform: translateX(-50%);
  overflow: hidden;
  border-bottom-left-radius: 50% 1.075rem;
  border-bottom-right-radius: 50% 1.075rem;
  z-index: 2;
  pointer-events: none;
}

.hero-stage__ball {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  transform: translate(
      -50%,
      calc(var(--hero-drop) * (var(--hero-well-h) - 2.3rem))
    )
    scale(calc(1 - var(--hero-drop) * 0.35));
  opacity: calc(1 - max(0, var(--hero-drop) - 0.7) * 1.2);
  will-change: transform, opacity;
}

.hero-stage__ball .ball-3d {
  width: 5.5rem;
}

.hero-stage__hole {
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  /* Behind ball-clip so overflow mask sells the sink (not a black plate cut). */
  z-index: 1;
  transform: translateX(-50%);
}

.hero-hole {
  display: block;
  width: 5.5rem;
  height: 2.15rem;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 70% 55% at 50% 35%, #2a2a2a 0%, #0c0c0c 48%, #000 100%);
  box-shadow:
    inset 0 6px 10px rgba(0, 0, 0, 0.85),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1.5px rgba(255, 255, 255, 0.14);
}

/* Flowty-scale phone: above hole with ~14px overlap, bleeds toward dock.
   Scroll lift uses the separate `translate` property so it never fights the
   entrance `transform` animation (avoids a teleport when floating starts). */
.hero-stage__phone {
  --hero-phone-max-h: min(76svh, 44rem);
  position: relative;
  z-index: 4;
  width: min(94vw, 28rem);
  max-height: var(--hero-phone-max-h);
  margin-top: -0.875rem;
  margin-inline: auto;
  translate: 0 var(--hero-phone-lift);
  transform: translateY(80px) rotate(-4deg) scale(0.96);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform-origin: center top;
  will-change: transform, opacity, translate;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.35));
}

.hero.is-hero-phone-visible .hero-stage__phone {
  visibility: visible;
}

.hero.is-hero-phone-entered .hero-stage__phone {
  animation: heroPhoneEnter 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero.is-hero-phone-floating .hero-stage__phone {
  animation: none;
  transform: translateY(0) rotate(2deg) scale(1);
  opacity: 1;
}

.hero.is-hero-phone-ready .hero-stage__phone {
  pointer-events: auto;
}

.hero-stage__phone .phone-3d {
  width: 100%;
  max-height: var(--hero-phone-max-h);
  height: auto;
  aspect-ratio: 220 / 448;
}

.phone-3d--hero {
  width: 100%;
  max-width: none;
}

@keyframes heroPhoneEnter {
  from {
    opacity: 0;
    transform: translateY(80px) rotate(-4deg) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(2deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero.is-hero-phone-entered .hero-stage__phone,
  .hero.is-hero-phone-floating .hero-stage__phone {
    animation: none;
    opacity: 1;
    transform: translateY(0) rotate(2deg) scale(1);
  }
}

/* 3D phone mounts (Three.js) + remaining ball/hole placeholders */
.phone-3d {
  position: relative;
  width: min(11.5rem, 46vw);
  aspect-ratio: 220 / 448;
  margin-inline: auto;
  --phone-twist: 0;
}

.phone-3d__mount {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.phone-3d__mount canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.phone-3d--guided {
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.28));
}

/* 3D golf ball mount (hero) */
.ball-3d {
  position: relative;
  width: 5.5rem;
  aspect-ratio: 1;
  margin-inline: auto;
}

.ball-3d__mount {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.ball-3d__mount canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.ball-3d--guided {
  width: 100%;
  height: 100%;
}

/* Static PNG replacements: hero phone + guided timeline ball. The wrappers
   keep their CSS-driven movement; the imgs only add the ambient float that
   used to live in the WebGL tick. */
.phone-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 220 / 448;
  object-fit: contain;
  margin-inline: auto;
}

.phone-img--hero {
  max-height: var(--hero-phone-max-h);
}

.hero.is-hero-phone-floating .phone-img--hero {
  animation: heroPhoneFloatImg 5s ease-in-out infinite;
}

@keyframes heroPhoneFloatImg {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-0.6rem) rotate(0.7deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero.is-hero-phone-floating .phone-img--hero {
    animation: none;
  }
}

.ball-img--guided {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Animated hex-wall background canvas (bg-hex.js). Sits behind everything;
   the body --bg-image stays as the no-WebGL fallback underneath. */
.bg-hex {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.bg-hex canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* When the shader background is running, bg-hex.js sets .bg-hex-on on <html>:
   the static image layers (dimplez-background-mobile/desktop.png) are removed
   so the canvas shows through. Without WebGL the class is absent and the
   image fallback below stays exactly as before. */
html.bg-hex-on .landing-scene {
  background-color: transparent;
  background-image: none;
}

html.bg-hex-on .landing-scene::before {
  display: none;
}

.media-placeholder {
  display: grid;
  place-items: center;
  border: 1px dashed rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.22);
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}

.media-placeholder__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.75rem;
  line-height: 1.35;
}

.media-placeholder--hole {
  width: 5rem;
  aspect-ratio: 1.6 / 1;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border-color: rgba(255, 255, 255, 0.16);
}

.media-placeholder--hole .media-placeholder__label {
  font-size: 0.58rem;
}

/* ---------- Time gauge ---------- */

.time-inner {
  text-align: left;
  display: grid;
  gap: 3.125rem;
}

/* Full-circle gauge, bottom clipped (330x218.1 per spec) */
.time-gauge {
  position: relative;
  width: min(100%, 20.625rem);
  aspect-ratio: 330 / 218.1;
  overflow: hidden;
  margin-inline: auto;
}

.time-gauge-svg {
  display: block;
  width: 100%;
  height: auto;
}

.time-gauge-readout {
  position: absolute;
  left: 50%;
  top: 75.6%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.time-value,
.time-unit {
  font-size: 1.9rem;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--blanc);
  line-height: 1.4;
}

.time-cta {
  justify-self: center;
  min-width: min(100%, 16rem);
  background: var(--blanc);
  color: var(--vert);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.time-cta:hover {
  background: color-mix(in srgb, var(--blanc) 92%, var(--vert));
  color: var(--vert);
}

/* ---------- Guided practice ---------- */

.guided {
  background: transparent;
}

.guided-stage {
  --guided-track-height: 375vh;
  position: relative;
  min-height: var(--guided-track-height);
}

.guided-pin {
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
  z-index: 2;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0 var(--space-5);
  align-items: stretch;
  height: calc(100svh - var(--header-h) - var(--space-8));
}

.guided-timeline {
  position: relative;
  height: 100%;
  min-height: 0;
}

.guided-line {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  min-height: 0;
}

.guided-line-track {
  position: relative;
  flex: 1;
  width: 2px;
  min-height: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.22) 0px,
    rgba(255, 255, 255, 0.22) 6px,
    transparent 6px,
    transparent 14px
  );
  border-radius: 1px;
  overflow: visible;
}

.guided-line-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(to bottom, var(--vert), var(--light-green));
  border-radius: 1px;
  will-change: height;
}

.guided-ball {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  width: 1.175rem;
  height: 1.175rem;
  margin-left: -0.5875rem;
  transform: translateY(-50%);
  opacity: 1;
  will-change: top, opacity, transform;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  pointer-events: none;
}

.guided-ball.is-sunk {
  opacity: 0;
  transform: translateY(-50%) scale(0.35);
}

.guided-hole-marker {
  width: 1.15rem;
  height: 0.55rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.55);
  margin-top: var(--space-2);
  flex-shrink: 0;
}

.guided-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

/* Same containment as .hero-kickstart__phrase: scope blend modes and
   morph repaints to this box so step changes cannot flicker the fixed
   background or the dock on mobile. */
.guided-step-display {
  flex-shrink: 0;
  padding-top: 0.25rem;
  isolation: isolate;
  contain: layout paint;
}

.step-num {
  display: inline-block;
  margin-bottom: var(--space-2);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--light-green);
}

.step-title {
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.step-text {
  color: var(--muted);
  max-width: 34ch;
  margin-bottom: 0;
}

.guided-step-morph {
  position: relative;
  display: inline-block;
  will-change: transform, filter, opacity;
}

.guided-step-morph.step-num,
.guided-step-morph.step-title,
.guided-step-morph.step-text {
  display: block;
  width: 100%;
}

.guided-step-morph.is-morphing {
  animation: kickstartDistort 0.55s steps(3, end) both;
}

.guided-step-morph.is-morphing::before,
.guided-step-morph.is-morphing::after {
  content: attr(data-glitch);
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.guided-step-morph.is-morphing::before {
  color: #7dffb3;
  transform: translate(-2px, -1px);
  clip-path: inset(0 0 55% 0);
  mix-blend-mode: screen;
  opacity: 0.85;
  animation: kickstartSliceA 0.55s steps(2, end) both;
}

.guided-step-morph.is-morphing::after {
  color: #c8ff68;
  transform: translate(2px, 1px);
  clip-path: inset(45% 0 0 0);
  mix-blend-mode: screen;
  opacity: 0.75;
  animation: kickstartSliceB 0.55s steps(2, end) both;
}

.guided-phone {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  min-height: 0;
  pointer-events: none;
}

.guided-phone .phone-3d,
.phone-3d--guided {
  width: min(12.5rem, 52vw);
}

/* ---------- Build Your Focus ---------- */

.focus .section-header {
  margin-bottom: var(--space-6);
}

.focus-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 200vh;
  padding-bottom: 0;
  overflow: visible;
}

/* In-flow spacer after the last card: sticky pins are limited to the parent's
   content box, so this (not padding) is what lets the last card land at its
   stack position before the whole deck scrolls away. */
.focus-stack::after {
  content: "";
  display: block;
  flex: 0 0 auto;
  height: 6rem;
}

.focus-stack-card {
  position: sticky;
  top: var(--stack-top, 1.25rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 18rem;
  margin-bottom: 1.5rem;
  padding: var(--space-5);
  /* Title sits high in the card so the peek strip shows air under the text, not above it. */
  padding-top: var(--space-4);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--vert) 0%, #031f12 100%);
  box-shadow: 0 -14px 30px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: visible;
}

.focus-stack-card__title {
  font-size: clamp(1.15rem, 4vw, 1.45rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--blanc);
}

.focus-stack-card__text {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.5;
  max-width: 34ch;
}

.focus-stack-card--with-media,
.focus-stack-card--last {
  min-height: calc(min(85vh, 40rem) + var(--stack-pad, 0rem));
  padding-bottom: calc(var(--space-6) + var(--stack-pad, 0rem));
}

.focus-stack-card__media {
  display: flex;
  justify-content: center;
  margin-top: auto;
  padding-top: var(--space-4);
}

.focus-stack-card__screen {
  display: block;
  width: min(13rem, 55vw);
  height: auto;
  border-radius: 1.25rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.focus-stack-card__media .phone-3d--desktop-only,
.focus-stack-card__media .phone-img--desktop-only {
  display: none;
}

.focus-stack-card__media .phone-3d,
.focus-stack-card__media .phone-img {
  width: min(13rem, 55vw);
}

/* ---------- Improve ---------- */

/* Figma: each bar has its own green (mid / dark olive / pale).
   Scoped to improve; the CTA bar-list stays uniform. */
.improve .bar-list li:nth-child(1)::before {
  background: #7ba746;
}

.improve .bar-list li:nth-child(2)::before {
  background: #53743e;
}

.improve .bar-list li:nth-child(3)::before {
  background: #cbdfb7;
}

.improve-title {
  max-width: 22ch;
  /* Figma: 50px section gap between title and content */
  margin-bottom: 3.125rem;
}

/* Figma: title full width; body = left ~1/3 (lead + bars) | right ~2/3 phone */
.improve-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  column-gap: var(--space-6);
  align-items: center;
}

.improve-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

/* Figma: 24px between the three bars (mobile; desktop overrides below) */
.improve-body .bar-list {
  gap: var(--space-5);
}

.improve-lead,
.improve-subhead {
  font-size: 1.05rem;
  color: var(--blanc);
  margin-bottom: 0;
  max-width: none;
}

.improve-media {
  display: flex;
  justify-content: center;
  align-self: center;
  min-width: 0;
}

.improve-media .phone-3d,
.improve-media .phone-img {
  width: 100%;
  max-width: min(13rem, 58vw);
}

/* ---------- FAQ ---------- */

.faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.faq-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  max-width: 28rem;
}

.faq-title {
  font-size: clamp(1.35rem, 4.5vw, 1.85rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-transform: none;
  margin: 0;
  color: var(--blanc);
}

.faq-lead {
  font-size: 1.05rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.faq-intro a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.faq-intro a:hover {
  color: var(--blanc);
}

.faq-list {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.faq-item {
  padding-block: var(--space-5);
}

.faq-item:first-child {
  padding-block-start: 0;
}

.faq-item + .faq-item {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.faq-item__q {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--blanc);
  margin: 0 0 var(--space-3);
}

.faq-item__a {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
  max-width: 55ch;
}

@media (min-width: 768px) {
  .faq-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: var(--space-7);
    align-items: start;
  }
}

/* ---------- CTA ---------- */

.cta {
  padding-block: var(--space-7);
  background: transparent;
}

.cta-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-7) var(--space-5) var(--space-6);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, #1e5631 0%, #031f12 100%);
  text-align: center;
}

.cta-logo {
  display: block;
  width: 4.5rem;
  height: 4.5rem;
  margin-inline: auto;
  border-radius: 1rem;
  object-fit: contain;
}

.cta-title {
  font-size: clamp(1.65rem, 6vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-transform: uppercase;
  max-width: 16ch;
}

.cta-lead {
  font-size: 1rem;
  color: var(--muted);
  max-width: 28ch;
}

.cta-card .bar-list {
  width: 100%;
  max-width: 18rem;
  margin-inline: auto;
}

.cta-card .bar-list li {
  text-align: left;
}

.cta-actions {
  width: 100%;
  max-width: 18rem;
  margin-top: var(--space-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.cta-note {
  margin: 0;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--muted);
}

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

.site-footer {
  padding: var(--space-7) 0 0;
  overflow: hidden;
  background: transparent;
}

.footer-panel {
  --footer-dome-size: max(170vw, 60rem);

  position: relative;
  width: 100%;
  margin-inline: 0;
  /* Extra bottom padding keeps the copyright clear of the floating dock */
  padding: 5rem var(--gutter) 7.5rem;
  overflow: hidden;
  display: grid;
  place-items: center;
}

/* Circular dome (Figma "Star 8": #FAFAF9 circle, soft inner-shadow rim) */
.footer-dodecagon {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 0;
  width: var(--footer-dome-size);
  aspect-ratio: 1;
  transform: translateX(-50%);
  margin: 0;
  pointer-events: none;
  background: #fafaf9;
  border-radius: 50%;
  box-shadow:
    0 -16px 30px rgba(0, 0, 0, 0.3),
    inset 0 23px 14px rgba(0, 0, 0, 0.06);
}

.footer-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2.3rem;
  justify-items: center;
  text-align: center;
  width: 100%;
  max-width: 23.375rem;
  margin-inline: auto;
  color: #000;
}

.footer-logo {
  width: min(19rem, 82%);
  height: auto;
}

.footer-tagline {
  font-size: 1.125rem;
  font-weight: 300;
  color: #000;
  line-height: 1.4;
}

.footer-legal {
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: #000;
}

.footer-legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.footer-legal a:hover {
  color: var(--vert);
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-social a {
  display: grid;
  place-items: center;
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 8px;
  color: #fff;
  background: var(--vert);
  transition: background 0.2s var(--ease);
}

.footer-social a:hover {
  background: var(--light-green);
}

.footer-social__unavailable {
  display: grid;
  place-items: center;
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(30, 86, 49, 0.35);
}

.footer-copy {
  font-size: 0.875rem;
  font-weight: 400;
  color: #000;
  line-height: 1;
}

.footer-copy__link {
  color: inherit;
  font-weight: 400;
}

.footer-copy__link:hover {
  text-decoration: underline;
}

/* ---------- Desktop / tablet ---------- */

@media (min-width: 768px) {
  :root {
    --gutter: 2rem;
  }

  .hero {
    --hero-scroll-extra: 48vh;
  }

  .hero-pin {
    padding-top: calc(var(--header-h) + var(--space-5));
  }

  .hero-head .hero-title {
    max-width: 22em;
    padding-top: var(--space-2);
  }

  .hero-title__break {
    display: inline;
  }

  .hero-head .hero-lead {
    font-size: 0.875rem;
    max-width: clamp(200px, 42ch, 22rem);
  }

  /* Dock z-index is trapped in .landing-top; raise that context above
     .guided-pin (z-index 2) so the fixed dock paints over the phone. */
  body.nav-dock-over-guided .landing-top {
    z-index: 3;
  }

  .guided-pin {
    top: 6rem;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 0 var(--space-7);
    height: calc(100svh - 7.5rem);
  }

  /* Overlap step copy + phone: phone top aligns with STEP label. */
  .guided-main {
    position: relative;
  }

  /* Keep guided titles left of the large desktop phone; wrap before overlap. */
  .guided-step-display {
    max-width: min(18rem, 40%);
    position: relative;
    z-index: 3;
  }

  .guided-step-display .step-title {
    line-height: 1.12;
  }

  .guided-phone {
    position: absolute;
    inset: 0;
    top: -140px;
    flex: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0.25rem; /* match .guided-step-display */
  }

  .guided-phone .phone-3d,
  .phone-3d--guided {
    width: min(27rem, 42vw);
  }

  .hero-stage__phone {
    --hero-phone-max-h: min(72svh, 48rem);
    width: min(42vw, 32rem);
  }

  .improve-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: var(--space-7);
    align-items: center;
  }

  .improve-subhead {
    font-size: clamp(1.35rem, 2.1vw, 1.85rem);
    line-height: 1.45;
  }

  .improve-body .bar-list {
    gap: 0.85rem;
  }

  .improve-body .bar-list li {
    font-size: clamp(1.2rem, 1.75vw, 1.5rem);
    padding-left: 1rem;
  }

  .improve-media {
    justify-content: flex-end;
  }

  .improve-media .phone-3d,
  .improve-media .phone-img {
    width: 100%;
    max-width: min(25rem, 40vw);
  }

  .cta-card {
    max-width: 28rem;
    margin-inline: auto;
    padding: var(--space-8) var(--space-7) var(--space-7);
  }

  .phone-3d {
    width: min(27rem, 42vw);
  }

  .focus-stack {
    max-width: 36rem;
    margin-inline: auto;
  }

  .focus-stack-card__screen {
    display: none;
  }

  .focus-stack-card__media .phone-3d--desktop-only,
  .focus-stack-card__media .phone-img--desktop-only {
    display: block;
  }

  /* Pull the 3D phone up toward the card copy: the render box carries
     empty headroom, and margin-top:auto pushed it to the card bottom.
     Tune the negative margin to adjust the text-to-phone gap. */
  .focus-stack-card__media {
    margin-top: -4rem;
    padding-top: 0;
  }

  .focus-stack-card__media .phone-3d,
  .focus-stack-card__media .phone-img {
    width: min(26rem, 42vw);
  }

  .footer-panel {
    --footer-dome-size: max(110vw, 80rem);

    padding: var(--space-8) var(--gutter) var(--space-8);
  }

  .footer-inner {
    max-width: 24rem;
  }
}

@media (min-width: 1024px) {
  .section {
    padding-block: 5.5rem;
  }

  .hero-pin {
    padding-top: calc(var(--header-h) + var(--space-3));
  }

  .hero-head .hero-title {
    max-width: 22em;
    margin-bottom: var(--space-2);
  }

  .hero-stage {
    margin-top: auto;
  }

  .hero-kickstart {
    margin-bottom: 0.35rem;
  }

  .hero-stage__well {
    --hero-well-h: clamp(10rem, 22svh, 16rem);
    height: var(--hero-well-h);
  }

  .hero-stage__phone {
    --hero-phone-max-h: min(70svh, 46rem);
    width: min(40vw, 34rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

/* === merged from animations.css === */
/* =========================================================
   Dimplez Golf — animations
   Text: blur + translateY + opacity
   Phones: horizontal rotateY 360°
   Hero: scroll-driven phone reveal (ball is GLB + CSS drop)
   ========================================================= */

:root {
  --reveal-duration: 0.85s;
  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --flip-duration: 0.9s;
}

@media (max-width: 767px) {
  :root {
    --reveal-duration: 0.45s;
  }
}

/* ---------- Text reveal (global) ---------- */

.reveal-text {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(24px);
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    filter var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
  will-change: opacity, filter, transform;
}

.reveal-text.is-revealed,
.revealed .reveal-text {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.reveal-text:nth-child(1) { transition-delay: 0.05s; }
.reveal-text:nth-child(2) { transition-delay: 0.12s; }
.reveal-text:nth-child(3) { transition-delay: 0.2s; }
.reveal-text:nth-child(4) { transition-delay: 0.28s; }
.reveal-text:nth-child(5) { transition-delay: 0.36s; }

.step-copy .reveal-text:nth-child(1) { transition-delay: 0.05s; }
.step-copy .reveal-text:nth-child(2) { transition-delay: 0.14s; }
.step-copy .reveal-text:nth-child(3) { transition-delay: 0.22s; }

/* ---------- Phone 360° Y-spin ---------- */

.phone-flip .phone-inner {
  transform: rotateY(0deg);
}

.phone-flip.is-flipping .phone-inner,
.phone-flip.is-revealed .phone-inner {
  animation: phoneSpinY var(--flip-duration) cubic-bezier(0.45, 0.05, 0.25, 1) forwards;
}

@keyframes phoneSpinY {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

/* Hero phone starts hidden, then spins in */
.phone--hero {
  opacity: 0;
  transform: scale(0.86) translateY(1.5rem);
  transition:
    opacity 0.55s var(--reveal-ease) 0.15s,
    transform 0.55s var(--reveal-ease) 0.15s;
}

.hero.is-ready .phone--hero {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.hero.is-ready .phone--hero.is-flipping .phone-inner,
.hero.is-ready .phone--hero.is-revealed .phone-inner {
  animation: phoneSpinY 1.05s cubic-bezier(0.4, 0.05, 0.2, 1) forwards;
}

/* ---------- Focus section pulse ---------- */

@keyframes focusPulse {
  0%,
  100% {
    transform: scale(0.92);
    opacity: 0.55;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.9;
  }
}

/* ---------- Counter twitch ---------- */

.time-value.is-twitching {
  animation: counterTwitch 0.12s ease-out;
}

@keyframes counterTwitch {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(1.5px, -1px) rotate(-0.6deg);
  }
  50% {
    transform: translate(-1.5px, 1px) rotate(0.6deg);
  }
  75% {
    transform: translate(1px, 0.5px) rotate(-0.3deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .reveal-text {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }

  .hero-stage {
    --hero-drop: 1;
    --hero-phone: 1;
  }

  .hero-stage__ball,
  .hero-stage__phone,
  .hero-media-line {
    transition: none;
  }

  .phone--hero {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .phone-flip.is-flipping .phone-inner,
  .phone-flip.is-revealed .phone-inner,
  .hero.is-ready .phone--hero.is-flipping .phone-inner {
    animation: none;
  }

  .focus-glow {
    animation: none;
  }

  .time-value.is-twitching {
    animation: none;
  }
}

/* ---------- Download chooser (/download) ---------- */

.download-page {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-6) var(--gutter);
  padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  background-color: #0a1810;
  background-image: var(--bg-image);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}

.download-page__main {
  width: 100%;
  max-width: 24rem;
}

.download-card {
  display: grid;
  gap: var(--space-5);
  justify-items: center;
  text-align: center;
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--blanc-b);
  color: var(--ink);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
}

.download-card__brand {
  display: block;
  line-height: 0;
}

.download-card__brand img {
  width: min(9rem, 70%);
  height: auto;
}

.download-card__title {
  margin: 0;
  font-size: clamp(1.5rem, 4vw, 1.85rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.download-card__lede,
.download-card__missing {
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--muted-dark);
}

.download-card__stores {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  width: 100%;
}

.download-card__stores .store-badge img {
  height: 3rem;
}

.download-card__back {
  margin: 0;
  font-size: 0.95rem;
}

.download-card__back a {
  color: var(--vert);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.download-card__back a:hover {
  color: var(--light-green);
}

@media (min-width: 768px) {
  .download-page {
    --bg-image: url("/assets/images/dimplez-background-desktop.png");
  }
}