/* ======================================================================
   Tokens
   ====================================================================== */

:root {
  --md-ref-typeface-brand: "Saira", system-ui, sans-serif;
  --md-ref-typeface-plain: "Saira", system-ui, sans-serif;
  --md-ref-typeface-weight-regular: 400;
  --md-ref-typeface-weight-medium: 500;
  --md-ref-typeface-weight-semibold: 600;
  --md-ref-typeface-weight-bold: 700;
  --fw-regular: var(--md-ref-typeface-weight-regular);
  --fw-medium: var(--md-ref-typeface-weight-medium);
  --fw-semibold: var(--md-ref-typeface-weight-semibold);
  --fw-bold: var(--md-ref-typeface-weight-bold);
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;
  --md-sys-color-primary: rgb(150 204 248);
  --md-sys-color-surface-tint: rgb(150 204 248);
  --md-sys-color-on-primary: rgb(0 52 79);
  --md-sys-color-primary-container: rgb(0 75 112);
  --md-sys-color-on-primary-container: rgb(202 230 255);
  --md-sys-color-secondary: rgb(183 201 217);
  --md-sys-color-on-secondary: rgb(34 50 63);
  --md-sys-color-secondary-container: rgb(56 73 86);
  --md-sys-color-on-secondary-container: rgb(211 229 246);
  --md-sys-color-tertiary: rgb(207 192 232);
  --md-sys-color-on-tertiary: rgb(54 43 74);
  --md-sys-color-tertiary-container: rgb(77 65 98);
  --md-sys-color-on-tertiary-container: rgb(235 220 255);
  --md-sys-color-error: rgb(255 180 171);
  --md-sys-color-on-error: rgb(105 0 5);
  --md-sys-color-error-container: rgb(147 0 10);
  --md-sys-color-on-error-container: rgb(255 218 214);
  --md-sys-color-background: rgb(16 20 23);
  --md-sys-color-on-background: rgb(224 227 232);
  --md-sys-color-surface: rgb(16 20 23);
  --md-sys-color-on-surface: rgb(224 227 232);
  --md-sys-color-surface-variant: rgb(65 71 77);
  --md-sys-color-on-surface-variant: rgb(193 199 206);
  --md-sys-color-outline: rgb(139 145 152);
  --md-sys-color-outline-variant: rgb(65 71 77);
  --md-sys-color-shadow: rgb(0 0 0);
  --md-sys-color-scrim: rgb(0 0 0);
  --md-sys-color-inverse-surface: rgb(224 227 232);
  --md-sys-color-inverse-on-surface: rgb(45 49 53);
  --md-sys-color-inverse-primary: rgb(40 99 138);
  --md-sys-color-primary-fixed: rgb(202 230 255);
  --md-sys-color-on-primary-fixed: rgb(0 30 48);
  --md-sys-color-primary-fixed-dim: rgb(150 204 248);
  --md-sys-color-on-primary-fixed-variant: rgb(0 75 112);
  --md-sys-color-secondary-fixed: rgb(211 229 246);
  --md-sys-color-on-secondary-fixed: rgb(12 29 41);
  --md-sys-color-secondary-fixed-dim: rgb(183 201 217);
  --md-sys-color-on-secondary-fixed-variant: rgb(56 73 86);
  --md-sys-color-tertiary-fixed: rgb(235 220 255);
  --md-sys-color-on-tertiary-fixed: rgb(32 22 52);
  --md-sys-color-tertiary-fixed-dim: rgb(207 192 232);
  --md-sys-color-on-tertiary-fixed-variant: rgb(77 65 98);
  --md-sys-color-surface-dim: rgb(16 20 23);
  --md-sys-color-surface-bright: rgb(54 58 62);
  --md-sys-color-surface-container-lowest: rgb(11 15 18);
  --md-sys-color-surface-container-low: rgb(24 28 32);
  --md-sys-color-surface-container: rgb(28 32 36);
  --md-sys-color-surface-container-high: rgb(38 42 46);
  --md-sys-color-surface-container-highest: rgb(49 53 57);
  --md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-body-medium-size: 1rem;
  --md-sys-typescale-body-medium-line-height: 1.6;
  --md-sys-typescale-body-medium-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-body-medium-tracking: 0;
  --md-sys-typescale-title-medium-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-title-medium-size: clamp(1.3rem, 2vw, 1.8rem);
  --md-sys-typescale-title-medium-line-height: 1.05;
  --md-sys-typescale-title-medium-weight: var(--md-ref-typeface-weight-semibold);
  --md-sys-typescale-title-medium-tracking: 0.08em;
  --md-sys-typescale-label-small-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-label-small-size: 0.74rem;
  --md-sys-typescale-label-small-line-height: 1.2;
  --md-sys-typescale-label-small-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-label-small-tracking: 0.16em;
  --md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-label-large-size: 0.94rem;
  --md-sys-typescale-label-large-line-height: 1.2;
  --md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-semibold);
  --md-sys-typescale-label-large-tracking: 0.08em;
  --eg-brand-gold: rgb(217 179 92);
  --eg-accent-blue: rgb(150 204 248);
  --eg-accent-blue-soft: color-mix(in srgb, var(--eg-accent-blue) 16%, transparent);
  --eg-accent-blue-text: rgb(207 227 247);
  --eg-elevation-1: 0 8px 20px rgba(0, 0, 0, 0.14);
  --eg-elevation-2: 0 14px 30px rgba(0, 0, 0, 0.18);
  --eg-elevation-3: 0 22px 48px rgba(0, 0, 0, 0.24);
  --eg-gradient-page:
    linear-gradient(180deg, rgba(11, 13, 16, 0.22), rgba(11, 13, 16, 0.7)),
    radial-gradient(circle at top left, color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent), transparent 36%);
  --eg-gradient-surface:
    linear-gradient(180deg, color-mix(in srgb, var(--md-sys-color-surface-bright) 14%, transparent), transparent 34%);
  --eg-gradient-primary:
    linear-gradient(130deg, color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent), transparent 34%),
    linear-gradient(180deg, var(--md-sys-color-surface-container), var(--md-sys-color-surface-container-high));
  --eg-gradient-gold:
    linear-gradient(180deg, color-mix(in srgb, var(--eg-brand-gold) 12%, transparent), transparent 42%),
    linear-gradient(180deg, var(--md-sys-color-surface-container), var(--md-sys-color-surface-container-high));
  --eg-content-width: 1240px;
  --eg-content-width-narrow: 1120px;
  --eg-header-height: 3.4rem;
  --eg-header-height-mobile: 3.2rem;
  --eg-duration-fast: 120ms;
  --eg-duration-normal: 220ms;
  --eg-easing-standard: ease;
  --mobile-edge: clamp(0.85rem, 3.5vw, 1.1rem);
  --mobile-content-gutter: clamp(1.15rem, 5vw, 1.55rem);
  --mobile-content-max: 34rem;
  --mobile-section-gap: clamp(1.35rem, 5vw, 2rem);
  --mobile-card-radius: 18px;
  --mobile-card-padding: clamp(1rem, 4vw, 1.25rem);
  --container: 1240px;
  --content: 1120px;
  --topbar-link-gap: clamp(1rem, 2.1vw, 1.58rem);
  --play-header-rest-offset: clamp(0.24rem, 0.56vh, 0.34rem);
  --play-header-docked-offset: 1px;
  --mobile-top-fade-depth: clamp(3rem, 11vw, 4.5rem);
}

/* ======================================================================
   Reset
   ====================================================================== */

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

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

button {
  font: inherit;
  touch-action: manipulation;
}

/* ======================================================================
   Base
   ====================================================================== */

html {
  box-sizing: border-box;
  color-scheme: dark;
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-sys-typescale-body-medium-font);
  background: var(--md-sys-color-background);
}

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

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--md-sys-color-primary) 95%, transparent);
  outline-offset: 3px;
}

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

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: 0.75rem;
  z-index: 200;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus-visible {
  width: auto;
  height: auto;
  padding: 0.7rem 0.95rem;
  overflow: visible;
  clip-path: none;
  border-radius: var(--md-sys-shape-corner-full);
  background: color-mix(in srgb, var(--md-sys-color-surface-container-high) 96%, transparent);
  border: 1px solid var(--md-sys-color-outline);
  color: var(--md-sys-color-on-surface);
}

/* ======================================================================
   Shell
   ====================================================================== */

.site-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.site-scroll {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.page-main {
  flex: 1;
  padding-bottom: 1rem;
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms;
    animation-iteration-count: 1;
    transition-duration: 0.001ms;
    scroll-behavior: auto;
  }
}

.page-main--overview,
.page-main--register,
.page-main--community,
.page-main--contact {
  flex: 0 0 auto;
}

.site-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    var(--eg-gradient-page),
    url("../img/golf-bg-1024.webp") center center / cover no-repeat;
}

.site-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--eg-gradient-page);
}

@media (min-width: 900px) {
  .site-backdrop {
    background:
      var(--eg-gradient-page),
      url("../img/golf-bg-1536.webp") center center / cover no-repeat;
  }
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  overflow: visible;
  padding: 0.26rem 1rem;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  background: var(--eg-gradient-surface);
  backdrop-filter: blur(22px);
}

@media (min-width: 781px) {
  .topbar {
    padding: 0.34rem 1.1rem;
  }
}

body.overview-nav-state--hero .topbar {
  background: var(--eg-gradient-surface);
}

body.overview-nav-state--docked .topbar {
  background: var(--eg-gradient-primary);
  box-shadow: var(--eg-elevation-1);
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.brand-logo {
  display: block;
  object-fit: contain;
  flex: none;
}

.brand-logo--hero {
  width: min(17rem, 56vw);
  height: auto;
  margin-inline: auto;
  transform: translateY(clamp(-0.45rem, -0.35vw, -0.18rem));
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.38));
}

.brand-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  min-width: 0;
}

.brand-copy strong {
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: 0.78rem;
}

.brand-copy span {
  font-size: 0.82rem;
  color: var(--md-sys-color-on-surface-variant);
}

.topbar__desktop-shell,
.topbar__mobile-shell {
  width: 100%;
}

.topbar__desktop-shell {
  display: none;
  align-items: center;
  gap: 0;
}

@media (min-width: 781px) {
  .topbar__desktop-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    width: min(100%, 68rem);
    margin-inline: auto;
    align-items: center;
    gap: 0;
  }
}

.topbar__mobile-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

@media (min-width: 781px) {
  .topbar__mobile-shell {
    display: none;
  }
}

.menu-toggle {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  padding: 0;
  color: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  box-shadow: none;
}

.menu-toggle img {
  display: block;
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  filter: brightness(0) saturate(0) invert(0.93);
}

.topbar__mobile-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.topbar__mobile-play-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 9.5rem;
  min-height: 2.3rem;
  flex: 0 0 9.5rem;
}

.topbar__nav {
  display: flex;
  align-items: center;
  gap: var(--topbar-link-gap);
  min-width: 0;
}

.topbar__nav--left {
  justify-content: flex-end;
  padding-right: calc(var(--topbar-link-gap) / 2);
}

@media (min-width: 781px) {
  .topbar__nav--left {
    justify-content: flex-end;
    min-width: 0;
  }
}

.topbar__nav--right {
  justify-content: flex-start;
  padding-left: calc(var(--topbar-link-gap) / 2);
}

@media (min-width: 781px) {
  .topbar__nav--right {
    justify-content: flex-start;
    min-width: 0;
  }
}

.topbar__link {
  display: inline-flex;
  align-items: center;
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-small-size);
  font-weight: var(--fw-regular);
  text-transform: uppercase;
  letter-spacing: var(--md-sys-typescale-label-small-tracking);
  white-space: nowrap;
  transition:
    color var(--eg-duration-fast) var(--eg-easing-standard),
    text-shadow var(--eg-duration-fast) var(--eg-easing-standard);
}

@media (min-width: 781px) {
  .topbar__link {
    font-size: clamp(0.8rem, 0.74rem + 0.18vw, 0.96rem);
  }
}

.topbar__link:hover,
.topbar__link:focus-visible {
  color: var(--md-sys-color-on-surface);
  font-weight: var(--fw-medium);
  text-shadow: 0 0 0.01em currentColor;
}

.topbar__link.is-active {
  color: var(--md-sys-color-primary-fixed);
}

.topbar__play-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0;
  min-width: 0;
  min-height: 2.15rem;
  flex: 0 0 0;
  padding-inline: 0;
  isolation: isolate;
  overflow: visible;
  transition:
    width 420ms cubic-bezier(0.22, 1, 0.36, 1),
    flex-basis 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.topbar__play-slot--dockable {
  width: 0;
  flex-basis: 0;
  gap: 0;
  margin: 0;
}

.topbar__play-slot--static,
body.overview-nav-state--docked .topbar__play-slot--dockable {
  width: 206px;
  flex-basis: 206px;
}

@media (min-width: 781px) {
  .topbar__play-slot {
    justify-self: center;
  }
}

.topbar__play-target {
  width: 206px;
  height: 2.15rem;
  pointer-events: none;
  opacity: 0;
}

.topbar__play-target--mobile {
  width: 100%;
  height: 2.9rem;
}

.overview-play-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.topbar__play-button {
  width: 100%;
}

.topbar__play-button {
  white-space: nowrap;
}

.overview-play-button--header {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  min-width: 0;
  height: 2.15rem;
  z-index: 1;
  opacity: 0;
  transform: translate(-50%, calc(-50% + var(--play-header-rest-offset) - 28px)) scale(0.94);
  pointer-events: none;
}

body.overview-play-ready .overview-play-button--header {
  transition:
    opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.overview-nav-state--docked .overview-play-button--header {
  opacity: 1;
  transform: translate(-50%, calc(-50% + var(--play-header-docked-offset))) scale(1);
  pointer-events: auto;
}

.overview-nav-state--hero .overview-play-button--header {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .overview-play-button--header,
  .topbar__play-slot {
    transition: none !important;
  }
}

.drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  width: auto;
  max-width: none;
  max-height: none;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}

.drawer[open] {
  display: grid;
  align-items: stretch;
  justify-items: start;
}

.drawer::backdrop {
  background: rgba(0, 0, 0, 0.56);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity var(--eg-duration-normal) var(--eg-easing-standard);
}

.drawer[data-state="open"]::backdrop {
  opacity: 1;
}

.drawer[data-state="closing"]::backdrop {
  opacity: 0;
}

.drawer__panel {
  width: min(380px, calc(100vw - 2rem));
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--md-sys-color-primary) 7%, transparent), transparent 24%),
    linear-gradient(180deg, color-mix(in srgb, var(--md-sys-color-surface-container) 98%, transparent), color-mix(in srgb, var(--md-sys-color-surface-container-low) 98%, transparent));
  border-right: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 26%, var(--md-sys-color-outline-variant) 74%);
  box-shadow: var(--eg-elevation-3);
  overscroll-behavior: contain;
  transform: translateX(-102%);
  transition: transform var(--eg-duration-normal) var(--eg-easing-standard);
}

.drawer[data-state="open"] .drawer__panel {
  transform: translateX(0);
}

.drawer__header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 86%, transparent);
}

.drawer__close {
  min-height: 2.25rem;
  color: var(--md-sys-color-on-surface);
  box-shadow: var(--eg-elevation-1);
  text-transform: uppercase;
}

.drawer__eyebrow {
  margin: 0 0 0.35rem;
  color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 64%, transparent);
  font-size: 0.72rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  text-transform: uppercase;
}

.drawer__body {
  padding: 1rem;
  overflow: auto;
}

.drawer__group {
  display: grid;
  gap: 0.55rem;
}

.drawer__group + .drawer__group {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

.drawer__group--minor {
  gap: 0.45rem;
}

.drawer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.84rem 0.95rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--md-sys-color-surface-bright) 16%, transparent), transparent 52%),
    var(--md-sys-color-surface-container-high);
  border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 18%, var(--md-sys-color-outline-variant) 82%);
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-on-surface);
  text-decoration: none;
  transition:
    color var(--eg-duration-fast) var(--eg-easing-standard),
    background-color var(--eg-duration-fast) var(--eg-easing-standard),
    border-color var(--eg-duration-fast) var(--eg-easing-standard),
    text-shadow var(--eg-duration-fast) var(--eg-easing-standard),
    transform var(--eg-duration-fast) var(--eg-easing-standard),
    box-shadow var(--eg-duration-fast) var(--eg-easing-standard);
}

.drawer-link:hover,
.drawer-link:focus-visible {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent), transparent 62%),
    color-mix(in srgb, var(--md-sys-color-surface-container-highest) 84%, var(--md-sys-color-surface-container-high) 16%);
  transform: translateY(-1px) scale(1.015);
  box-shadow: var(--eg-elevation-1);
  text-shadow: 0 0 0.02em currentColor, 0 0 0.02em currentColor;
}

.drawer-link:active {
  transform: translateY(0);
  box-shadow: var(--eg-elevation-1);
}

.drawer-link.is-active {
  background: color-mix(in srgb, var(--md-sys-color-primary) 26%, var(--md-sys-color-surface-container-high) 74%);
  border-color: color-mix(in srgb, var(--md-sys-color-primary) 32%, var(--md-sys-color-outline-variant) 68%);
}

.drawer__group--minor .drawer-link {
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface-variant);
}

.drawer__footer {
  margin-top: auto;
  padding: 1rem;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

.drawer__footer md-filled-button {
  width: 100%;
}

.footer {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  margin-top: 1.75rem;
  padding: 1.25rem 0 2.25rem;
  border-top: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 74%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--md-sys-color-surface-container-low) 62%, transparent), transparent 100%);
  color: var(--md-sys-color-on-surface);
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem 1.25rem;
  padding: 0.95rem 0 0.15rem;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem 0.8rem;
}

.footer__nav a {
  color: var(--md-sys-color-on-surface-variant);
  line-height: 1.35;
  padding: 0.15rem 0;
  transition:
    color 120ms ease,
    opacity 120ms ease;
}

.footer__nav a:hover,
.footer__nav a:focus-visible {
  color: var(--md-sys-color-primary-fixed);
  opacity: 1;
}

.footer__copy {
  margin: 0;
  flex: 1 1 12rem;
  min-width: 0;
  color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 64%, transparent);
  font-size: 0.88rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  text-transform: uppercase;
}

.footer__brand {
  display: inline-block;
  width: 6.4rem;
  height: auto;
  margin-right: 0.55rem;
  vertical-align: middle;
}

.menu-toggle:hover,
.menu-toggle:active {
  transform: none;
}

@media (max-width: 780px) {
  :root {
    --mobile-page-gutter: clamp(0.9rem, 4vw, 1.2rem);
    --mobile-header-inline-size: 100vw;
  }

  html,
  body {
    overflow-x: clip;
  }

  body:has(.page-main--overview) {
    background: transparent;
  }

  body:has(.page-main--overview) .site-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      var(--eg-gradient-page),
      url("../img/golf-bg-1024.webp") center bottom / cover no-repeat;
  }

  body:has(.page-main--overview) .site-backdrop::before {
    content: none;
  }

  .site-shell::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    height: var(--mobile-top-fade-depth);
    pointer-events: none;
    background: linear-gradient(180deg, color-mix(in srgb, var(--md-sys-color-surface) 86%, transparent), transparent);
  }

  .page-main {
    padding-bottom: 0;
  }

  .page-main:not(.page-main--overview) {
    padding-top: 4rem;
  }

  .topbar {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    width: auto;
    padding-inline: 0.8rem;
    padding-top: calc(env(safe-area-inset-top) + 0.2rem);
    padding-bottom: 0.5rem;
    align-items: center;
    border-bottom: 0;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
    isolation: isolate;
  }

  body.overview-nav-state--hero .topbar,
  body.overview-nav-state--docked .topbar {
    background: transparent;
    box-shadow: none;
  }

  .topbar__brand {
    display: none;
  }

  .topbar__mobile-shell {
    display: grid;
    grid-template-columns: 2.8rem minmax(0, 1fr) 2.8rem;
    align-items: center;
    min-height: 3.2rem;
  }

  .topbar__mobile-actions {
    display: flex;
    justify-content: center;
    min-width: 0;
    grid-column: 2;
  }

  .topbar__mobile-play-slot {
    width: min(11.4rem, calc(var(--mobile-header-inline-size) - 7.8rem));
    flex-basis: min(11.4rem, calc(var(--mobile-header-inline-size) - 7.8rem));
    min-height: 3.2rem;
    min-width: 0;
  }

  .topbar__mobile-shell .overview-play-button--header {
    width: 100%;
    min-width: 0;
    height: 2.9rem;
    opacity: 1;
    transform: translate(-50%, calc(-50% + var(--play-header-docked-offset))) scale(1);
  }

  .menu-toggle {
    display: inline-flex;
    position: relative;
    top: 0;
    z-index: 1;
    grid-column: 1;
    justify-self: start;
  }

  .site-shell:has(.page-main--overview) .menu-toggle {
    align-self: center;
    width: 2.9rem;
    height: 2.9rem;
  }

  .brand-copy span {
    display: none;
  }

  .brand-copy strong {
    font-size: 0.72rem;
    letter-spacing: 0;
    text-align: center;
  }

  .menu-toggle img {
    width: 2.5rem;
    height: 2.5rem;
    filter: brightness(0) invert(1);
    mix-blend-mode: difference;
  }

  .topbar__desktop-shell {
    display: none;
  }

  .footer {
    padding: 1rem var(--mobile-edge) calc(1rem + env(safe-area-inset-bottom));
  }

  .footer__inner {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    gap: 0.35rem;
  }

  .footer__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 0.75rem;
    line-height: 1.35;
    margin-top: 0.15rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  .footer__nav a {
    flex: 0 0 auto;
    min-width: 0;
  }

  .footer__copy {
    text-align: center;
    flex: 0 0 auto;
  }

  body.overview-nav-state--hero .topbar__mobile-shell .overview-play-button--header {
    opacity: 0;
    pointer-events: none;
  }
}

/* ======================================================================
   Material Components
   ====================================================================== */

md-filled-button,
md-outlined-button,
md-text-button,
md-assist-chip,
md-icon-button {
  vertical-align: middle;
}

md-filled-button {
  --md-filled-button-container-color: var(--md-sys-color-primary);
  --md-filled-button-container-height: 44px;
  --md-filled-button-container-shape: var(--md-sys-shape-corner-full);
  --md-filled-button-label-text-color: var(--md-sys-color-on-primary);
  --md-filled-button-label-text-font: var(--md-sys-typescale-label-large-font);
}

md-outlined-button {
  --md-outlined-button-container-height: 40px;
  --md-outlined-button-container-shape: var(--md-sys-shape-corner-full);
  --md-outlined-button-label-text-color: var(--md-sys-color-on-surface);
  --md-outlined-button-outline-color: var(--md-sys-color-outline-variant);
}

md-text-button {
  --md-text-button-container-height: 40px;
  --md-text-button-container-shape: var(--md-sys-shape-corner-full);
  --md-text-button-label-text-color: var(--md-sys-color-primary);
}

md-assist-chip {
  --md-assist-chip-container-height: 36px;
  --md-assist-chip-container-shape: var(--md-sys-shape-corner-full);
  --md-assist-chip-label-text-font: var(--md-sys-typescale-label-large-font);
}

md-filled-button.md-button--standard,
md-filled-button.md-button--compact,
md-filled-button.md-button--hero,
md-filled-button.md-button--page-hero,
md-filled-button.md-button--page-cta,
md-filled-button.md-button--block {
  --md-filled-button-container-color: var(--md-sys-color-primary);
  --md-filled-button-label-text-color: var(--md-sys-color-on-primary);
  --md-filled-button-hover-label-text-color: var(--md-sys-color-on-primary);
  --md-filled-button-focus-label-text-color: var(--md-sys-color-on-primary);
  --md-filled-button-pressed-label-text-color: var(--md-sys-color-on-primary);
  --md-filled-button-icon-color: var(--md-sys-color-on-primary);
  --md-filled-button-hover-icon-color: var(--md-sys-color-on-primary);
  --md-filled-button-focus-icon-color: var(--md-sys-color-on-primary);
  --md-filled-button-pressed-icon-color: var(--md-sys-color-on-primary);
  --md-filled-button-hover-state-layer-color: var(--md-sys-color-on-primary);
  --md-filled-button-pressed-state-layer-color: var(--md-sys-color-on-primary);
  --md-filled-button-hover-container-elevation: 0;
  --md-filled-button-focus-container-elevation: 0;
  --md-filled-button-pressed-container-elevation: 0;
}

md-filled-button.md-button--standard {
  --md-filled-button-container-height: 44px;
  --md-filled-button-leading-space: 24px;
  --md-filled-button-trailing-space: 24px;
  --md-filled-button-label-text-weight: 600;
}

md-filled-button.md-button--compact {
  --md-filled-button-container-height: 40px;
  --md-filled-button-leading-space: 18px;
  --md-filled-button-trailing-space: 18px;
  --md-filled-button-label-text-weight: 700;
}

md-filled-button.md-button--hero {
  --md-filled-button-container-height: clamp(78px, 6vw, 90px);
  --md-filled-button-label-text-size: clamp(34px, 3.6vw, 51px);
  --md-filled-button-leading-space: clamp(34px, 4vw, 58px);
  --md-filled-button-trailing-space: clamp(34px, 4vw, 58px);
  --md-filled-button-label-text-weight: 700;
}

md-filled-button.md-button--page-hero {
  --md-filled-button-container-height: 80px;
  --md-filled-button-label-text-size: 39.2px;
  --md-filled-button-leading-space: 54px;
  --md-filled-button-trailing-space: 54px;
  --md-filled-button-label-text-weight: 600;
}

md-filled-button.md-button--page-cta {
  --md-filled-button-container-height: 56px;
  --md-filled-button-label-text-size: 18px;
  --md-filled-button-leading-space: 28px;
  --md-filled-button-trailing-space: 28px;
  --md-filled-button-label-text-weight: 700;
}

md-filled-button.md-button--block {
  width: 100%;
  --md-filled-button-container-height: 47px;
  --md-filled-button-leading-space: 20px;
  --md-filled-button-trailing-space: 20px;
  --md-filled-button-label-text-weight: 700;
}

md-assist-chip.md-chip--primary {
  --md-assist-chip-container-shape: var(--md-sys-shape-corner-full);
  --md-assist-chip-elevated-container-color: color-mix(in srgb, var(--md-sys-color-primary) 82%, white 18%);
  --md-assist-chip-label-text-color: var(--md-sys-color-on-primary);
  --md-assist-chip-hover-label-text-color: var(--md-sys-color-on-primary);
  --md-assist-chip-focus-label-text-color: var(--md-sys-color-on-primary);
  --md-assist-chip-pressed-label-text-color: var(--md-sys-color-on-primary);
  --md-assist-chip-outline-color: color-mix(in srgb, var(--md-sys-color-primary) 42%, var(--md-sys-color-outline-variant) 58%);
}

md-outlined-button.md-button--compact {
  --md-outlined-button-container-height: 2.85rem;
  --md-outlined-button-container-shape: var(--md-sys-shape-corner-full);
  --md-outlined-button-label-text-color: var(--md-sys-color-on-surface);
  --md-outlined-button-outline-color: var(--md-sys-color-outline);
}

.drawer__close.md-button--compact {
  --md-outlined-button-container-height: 2.25rem;
  --md-outlined-button-label-text-color: var(--md-sys-color-on-secondary-container);
  --md-outlined-button-outline-color: color-mix(in srgb, var(--md-sys-color-secondary) 26%, var(--md-sys-color-outline-variant) 74%);
}

md-text-button.md-button--compact {
  --md-text-button-container-height: 40px;
  --md-text-button-container-shape: var(--md-sys-shape-corner-full);
}

md-icon-button.md-button--nav {
  --md-icon-button-state-layer-size: 40px;
}

.menu-toggle.md-button--nav {
  --md-icon-button-state-layer-size: 100%;
}

.overview-hero__nav.md-button--nav {
  --md-icon-button-state-layer-size: 56px;
}

.community-social-link.md-button--nav {
  --md-icon-button-state-layer-size: 40px;
  --md-icon-button-hover-state-layer-opacity: 0.08;
  --md-icon-button-focus-state-layer-opacity: 0.1;
  --md-icon-button-pressed-state-layer-opacity: 0.12;
}

.material-dialog {
  --md-dialog-container-color: var(--md-sys-color-surface-container-high);
  --md-dialog-container-shape: var(--md-sys-shape-corner-extra-large);
  --md-dialog-headline-color: var(--md-sys-color-on-surface);
  --md-dialog-headline-font: var(--md-ref-typeface-brand);
  --md-dialog-supporting-text-color: var(--md-sys-color-on-surface-variant);
  --md-dialog-supporting-text-font: var(--md-ref-typeface-plain);
}

.material-dialog--releases {
  width: min(92vw, 84rem);
  max-width: min(92vw, 84rem);
  max-height: min(86vh, 56rem);
}

.material-dialog--guide {
  width: min(92vw, 42rem);
  max-width: min(92vw, 42rem);
}

.material-dialog__headline[slot="headline"] {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1rem 0.95rem 1.1rem;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  background: var(--eg-gradient-primary);
}

.material-dialog__headline--stack[slot="headline"] {
  flex-direction: column;
}

.material-dialog__actions[slot="actions"] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  width: 100%;
  padding: 0.95rem 1rem 1rem;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  background: var(--eg-gradient-surface);
}

.material-dialog__actions--spread[slot="actions"] {
  justify-content: space-between;
}

.material-dialog .releases-modal__frame-wrap[slot="content"] {
  min-height: 0;
  padding: 0;
  background: var(--eg-gradient-surface);
}

.material-dialog--releases .releases-modal__frame-wrap[slot="content"] {
  width: min(92vw, 80rem);
}

.material-dialog--guide .releases-modal__content[slot="content"] {
  padding: 1.35rem 1.4rem 1.1rem;
}

.material-dialog .releases-modal__frame {
  width: 100%;
  height: min(70vh, 46rem);
  border: 0;
  background: var(--md-sys-color-surface-container-lowest);
  display: block;
}

.releases-modal__heading {
  min-width: 0;
}

.releases-modal__eyebrow {
  margin: 0 0 0.2rem;
  color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 64%, transparent);
  font-size: 0.74rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  text-transform: uppercase;
}

.releases-modal__heading h2 {
  margin: 0;
  font-size: var(--md-sys-typescale-title-medium-size);
  line-height: var(--md-sys-typescale-title-medium-line-height);
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
}

.releases-modal__frame-wrap {
  min-height: 0;
  background: var(--eg-gradient-surface);
}

.releases-modal__frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--md-sys-color-surface-container-lowest);
}

.image-modal {
  width: min(100vw, 80rem);
  max-width: min(100vw, 80rem);
  max-height: 100vh;
  --md-dialog-container-color: transparent;
  --md-dialog-container-shape: 0px;
}

.image-modal__content[slot="content"] {
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 2.2vw, 1.5rem);
  background: transparent;
  overflow: visible;
}

.image-modal__title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.image-modal__viewport {
  position: relative;
  display: grid;
  place-items: center;
  width: min(94vw, 76rem);
  max-width: min(94vw, 76rem);
  max-height: min(90dvh, 62rem);
}

.image-modal__image {
  display: block;
  max-width: 100%;
  max-height: min(90dvh, 62rem);
  width: auto;
  height: auto;
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: var(--eg-elevation-3);
}

.image-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 48px;
  height: 48px;
  color: var(--md-sys-color-on-surface);
}

.image-modal__close.md-button--nav {
  --md-icon-button-state-layer-size: 40px;
}

.image-modal__close-icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.25;
}

.releases-modal__content {
  display: grid;
  gap: 1rem;
  padding: 1.35rem 1.4rem 1.1rem;
}

.releases-modal__lead,
.releases-modal__copy {
  margin: 0;
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: 1.7;
}

.releases-modal__lead {
  color: var(--md-sys-color-on-surface);
  font-size: 1.06rem;
  font-weight: var(--fw-semibold);
}

.releases-modal__steps {
  margin: 0;
  padding-left: 1.35rem;
  color: var(--md-sys-color-on-surface-variant);
  display: grid;
  gap: 0.7rem;
  line-height: 1.65;
}

@media (max-width: 780px) {
  .material-dialog--releases,
  .material-dialog--guide {
    max-width: 100vw;
  }

  .material-dialog--releases {
    width: 100vw;
    max-height: 100vh;
  }

  .material-dialog__headline[slot="headline"] {
    align-items: flex-start;
    flex-direction: column;
    padding: 0.95rem 0.95rem 0.9rem;
  }

  .material-dialog__actions[slot="actions"] {
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .material-dialog--releases .releases-modal__frame-wrap[slot="content"] {
    width: 100vw;
  }

  .material-dialog--guide .material-dialog__actions[slot="actions"] md-filled-button {
    width: 100%;
  }

  .image-modal__viewport {
    width: 100%;
    max-height: min(84dvh, 40rem);
  }

  .image-modal__close {
    top: 0.5rem;
    right: 0.5rem;
  }

  .releases-modal__content {
    padding: 1.15rem 1rem 1rem;
  }

  md-filled-button.md-button--compact {
    --md-filled-button-container-height: 48px;
    --md-filled-button-leading-space: 20px;
    --md-filled-button-trailing-space: 20px;
  }

  md-filled-button.md-button--hero {
    --md-filled-button-container-height: 63px;
    --md-filled-button-label-text-size: clamp(19px, 6vw, 26px);
    --md-filled-button-leading-space: 28px;
    --md-filled-button-trailing-space: 28px;
  }

  md-filled-button.md-button--page-hero {
    --md-filled-button-container-height: 72px;
    --md-filled-button-label-text-size: 29.6px;
    --md-filled-button-leading-space: 43px;
    --md-filled-button-trailing-space: 43px;
  }

  md-filled-button.md-button--page-cta {
    --md-filled-button-container-height: 52px;
  }

  md-filled-button.md-button--block {
    --md-filled-button-leading-space: 16px;
    --md-filled-button-trailing-space: 16px;
  }
}

@media (max-width: 780px) {
  .community-social-link.md-button--nav {
    --md-icon-button-state-layer-size: 40px;
  }

  .overview-hero__nav.md-button--nav {
    --md-icon-button-state-layer-size: 48px;
  }
}

/* ======================================================================
   Components
   ====================================================================== */

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

.content {
  width: min(var(--content), 100%);
  margin-inline: auto;
}

.hero {
  position: relative;
  padding: 2rem 0 1rem;
}

.hero__panel {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 30%, var(--md-sys-color-outline-variant) 70%);
  border-radius: var(--md-sys-shape-corner-large);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--md-sys-color-primary) 9%, transparent), transparent 34%),
    linear-gradient(180deg, var(--md-sys-color-surface-container-low), var(--md-sys-color-surface-container-high));
  color: var(--md-sys-color-on-surface);
  box-shadow: var(--eg-elevation-2);
  backdrop-filter: blur(18px);
}

.hero__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--eg-gradient-primary);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
  align-items: start;
  gap: 1.25rem;
  padding: 1.35rem;
}

@media (max-width: 1080px) {
  .hero__inner {
    grid-template-columns: 1fr 1fr;
  }
}

.hero h1,
.section-title,
.aside-panel--press h2 {
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-wrap: balance;
}

.hero h1,
.section-title {
  margin: 0;
}

.hero h1 {
  font-size: clamp(2.45rem, 4vw, 4.5rem);
  line-height: 0.93;
  margin-top: 0.75rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1rem;
}

.section {
  padding: 1rem 0 0;
}

.section__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.section__header > div {
  display: grid;
  gap: 1.15rem;
}

.section__header > div .subpage-divider {
  margin: 0;
}

.section__header p {
  margin: 0;
  color: var(--md-sys-color-on-surface-variant);
  line-height: 1.6;
}

.section-title {
  font-size: clamp(1.25rem, 1.8vw, 2rem);
}

.newsletter-cta {
  flex: 0 0 auto;
  margin-block: clamp(1.6rem, 3.2vw, 2.4rem) clamp(0.35rem, 1vw, 0.75rem);
  padding: 0;
}

.newsletter-cta__inner {
  width: min(100%, 36rem);
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

.newsletter-cta__title {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--md-sys-color-on-surface);
  font-size: clamp(1.4rem, 2.1vw, 2rem);
  line-height: 1.04;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-wrap: balance;
}

.newsletter-cta__button {
  min-width: min(100%, 13rem);
  margin-top: 1rem;
}

.newsletter-cta__fallback-link {
  display: inline-flex;
  margin-top: 0.85rem;
  color: var(--md-sys-color-primary);
}

.grid {
  display: grid;
  gap: 1rem;
}

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

.card {
  position: relative;
  overflow: hidden;
}

.panel {
  position: relative;
}

.panel--standard,
.card--standard {
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
  background:
    var(--eg-gradient-surface),
    var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  box-shadow: var(--eg-elevation-1);
}

.media-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
}

.media-card__media {
  grid-area: media;
  min-width: 0;
  min-height: 0;
}

.media-card__media picture,
.media-card__media img {
  display: block;
  width: 100%;
  height: 100%;
}

.media-card__media img {
  object-fit: cover;
}

.media-card__body {
  grid-area: body;
  position: relative;
  z-index: 1;
  padding: 1rem;
}

.media-card--overlay {
  display: grid;
  isolation: isolate;
}

.media-card--overlay > .media-card__media,
.media-card--overlay > .media-card__body {
  grid-area: 1 / 1;
}

.media-card--overlay > .media-card__media {
  position: relative;
  z-index: 0;
}

.media-card--overlay > .media-card__body {
  z-index: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: color-mix(in srgb, var(--md-sys-color-scrim) 58%, transparent);
  color: #fff;
}

.media-card--split {
  --media-card-media-column: minmax(0, 1fr);
  --media-card-body-column: minmax(0, 1fr);

  display: grid;
  grid-template-columns:
    var(--media-card-media-column)
    var(--media-card-body-column);
  grid-template-areas: "media body";
  align-items: stretch;
}

.media-card--split .media-card__body {
  padding: clamp(1.2rem, 2.4vw, 2rem);
}

.media-card--media-end .media-card__media {
  grid-area: media;
}

.media-card--media-end .media-card__body {
  grid-area: body;
}

.media-card--media-end {
  grid-template-columns:
    var(--media-card-body-column)
    var(--media-card-media-column);
  grid-template-areas: "body media";
}

.media-card--compact {
  --media-card-media-column: minmax(13.5rem, 13.5rem);

  min-height: 13.5rem;
}

.media-card--dense {
  --media-card-media-column: minmax(16.5rem, 18rem);

  min-height: 15.5rem;
}

.media-card--compact .media-card__body {
  padding: 1.35rem 1.5rem;
}

.media-card--dense .media-card__body {
  padding: 1.6rem 1.75rem;
}

.panel--raised,
.instruction-flow {
  border: 1px solid color-mix(
    in srgb,
    var(--md-sys-color-primary) 24%,
    var(--md-sys-color-outline-variant)
  );
  border-radius: var(--md-sys-shape-corner-extra-large);
  background:
    var(--eg-gradient-primary),
    var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  box-shadow: var(--eg-elevation-2);
}

.panel--gold {
  border: 1px solid color-mix(
    in srgb,
    var(--eg-brand-gold) 46%,
    var(--md-sys-color-outline-variant)
  );
  border-radius: var(--md-sys-shape-corner-extra-large);
  background:
    var(--eg-gradient-gold),
    var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  box-shadow: var(--eg-elevation-2);
}

.card__body {
  padding: 1rem;
}

.card__title {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.15;
}

.card__copy {
  margin: 0.75rem 0 0;
  color: var(--md-sys-color-on-surface-variant);
  line-height: 1.6;
}

.card__copy--lead {
  color: var(--md-sys-color-on-surface);
  font-size: clamp(1.02rem, 1.35vw, 1.12rem);
  line-height: 1.68;
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.video-embed {
  margin-top: 1rem;
  overflow: hidden;
  border-radius: var(--md-sys-shape-corner-medium);
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-low);
  aspect-ratio: 16 / 9;
}

.video-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.feature-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.35rem);
  padding: clamp(1.35rem, 3.6vw, 2.35rem);
  backdrop-filter: blur(18px);
}

.feature-panel > * {
  position: relative;
}

.feature-panel__copy {
  max-width: 58rem;
}

:where(.feature-panel__copy, .aside-panel) p {
  margin: 0.95rem 0 0;
  color: var(--md-sys-color-on-surface-variant);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.78;
}

.lead-copy {
  max-width: 48rem;
  margin: 0;
  color: var(--md-sys-color-on-surface);
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  font-weight: 500;
  line-height: 1.78;
}

.lead-copy--centered {
  margin-inline: auto;
  text-align: center;
}

.feature-panel--split {
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
  align-items: stretch;
}

.reason-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.95rem, 1.5vw, 1.25rem);
}

.reason-card {
  min-height: 10.25rem;
  padding: 1.2rem;
}

.reason-card span {
  display: inline-grid;
  width: 2.15rem;
  height: 2.15rem;
  place-items: center;
  margin-bottom: 1rem;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--eg-accent-blue-soft);
  color: #cfe3f7;
  font-weight: var(--fw-bold);
}

.reason-card strong {
  display: block;
  font-size: 1.05rem;
}

.reason-card p {
  margin: 0.58rem 0 0;
  color: var(--md-sys-color-on-surface-variant);
  line-height: 1.62;
}

.steps {
  display: grid;
  align-content: start;
  gap: 0.95rem;
  margin: 1.35rem 0 0;
  padding: 0;
  list-style: none;
}

.step {
  display: grid;
  grid-template-columns: 2.3rem minmax(0, 1fr);
  column-gap: 1rem;
  align-items: start;
  padding: 1.05rem 1.05rem 1rem;
}

.step__index {
  display: inline-grid;
  grid-row: 1 / 3;
  align-self: center;
  width: 2.15rem;
  height: 2.15rem;
  margin: 0;
  place-items: center;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--eg-accent-blue-soft);
  color: var(--eg-accent-blue-text);
  font-size: 1rem;
  font-weight: var(--fw-bold);
}

.step__title {
  grid-column: 2;
  font-size: 1.02rem;
  font-weight: var(--fw-semibold);
  line-height: 1.22;
  text-wrap: balance;
}

.step__copy {
  grid-column: 2;
  display: block;
  margin-top: 0.28rem;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.94rem;
  line-height: 1.52;
}

.instruction-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(3rem, 5vw, 4.5rem);
  margin: 0;
  padding: clamp(1.25rem, 2.5vw, 1.8rem);
  list-style: none;
}

.instruction-flow__item {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.55rem;
  min-width: 0;
}

.instruction-flow__item:not(:last-child)::after {
  position: absolute;
  top: 50%;
  right: calc(clamp(3rem, 5vw, 4.5rem) * -0.67);
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  background: url("/assets/img/icons/arrow-right.png") center / contain no-repeat;
  content: "";
}

.instruction-flow__title {
  font-size: 1.04rem;
  font-weight: var(--fw-semibold);
  line-height: 1.22;
  text-wrap: balance;
}

.instruction-flow__copy {
  display: block;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.96rem;
  font-weight: var(--fw-regular);
  line-height: 1.58;
}

@media (min-width: 781px) {
  .instruction-flow {
    min-height: 13.5rem;
    align-items: stretch;
    padding: clamp(1.6rem, 2.8vw, 2rem);
  }

  .instruction-flow__item {
    align-content: center;
    padding-inline: clamp(0.6rem, 1.2vw, 1rem);
  }
}

.aside-panel {
  display: grid;
  align-content: center;
  gap: 0.85rem;
  padding: 1.25rem 1.2rem;
}

.aside-panel__label {
  color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 64%, transparent);
  font-size: 0.78rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  text-transform: uppercase;
}

.aside-panel h3 {
  margin: 0;
  font-size: clamp(1.3rem, 2vw, 1.72rem);
  line-height: 1.12;
  font-weight: var(--fw-bold);
  text-wrap: balance;
}

.aside-panel--account {
  width: min(100%, 29rem);
  gap: 0.95rem;
  padding: 1.45rem 1.35rem;
}

.aside-panel--account p {
  margin-top: 0;
  color: var(--md-sys-color-on-surface-variant);
  font-size: clamp(0.97rem, 1.24vw, 1.03rem);
  line-height: 1.63;
}

.aside-panel--account md-filled-button {
  width: 100%;
  margin-top: 0.15rem;
}

.aside-panel--press {
  min-height: 0;
  align-self: stretch;
  width: 100%;
  gap: 0.85rem;
  padding: 1.35rem 1.3rem 1.25rem;
}

.aside-panel--press h2 {
  margin: 0;
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  line-height: 1.06;
}

.aside-panel--press p {
  margin: 0;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.98rem;
  font-weight: var(--fw-regular);
  line-height: 1.62;
}

@media (max-width: 780px) {
  .aside-panel--press {
    padding: 1.1rem 1rem 1rem;
  }

  .aside-panel--press h2 {
    font-size: 1.15rem;
    line-height: 1.08;
  }

  .aside-panel--press p {
    font-size: 0.95rem;
    line-height: 1.55;
  }
}

.aside-panel--press .hero__actions {
  margin-top: 0.35rem;
}

.faq-accordion {
  display: grid;
  gap: 0.75rem;
}

.faq-item {
  overflow: clip;
  padding: 0;
}

.faq-accordion .faq-item > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  margin: 0;
  padding: 1.5rem 1.7rem;
  cursor: pointer;
  list-style: none;
  font-size: 1.05rem;
  font-weight: var(--fw-bold);
}

.faq-accordion .faq-item > summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  align-self: center;
  margin: 0;
  color: var(--md-sys-color-primary-fixed-dim);
  font-size: 1.1rem;
  line-height: 1;
}

.faq-item[open] summary::after {
  content: "–";
}

.faq-item p {
  margin: 0.4rem 0 0;
  color: var(--md-sys-color-on-surface-variant);
  line-height: 1.6;
}

.faq-item__title {
  margin: 0;
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: 1.35;
}

.faq-answer {
  padding: 0 1.7rem 1.5rem;
  transform-origin: top;
}

.faq-answer p {
  max-width: 72ch;
  margin: 0;
  line-height: 1.62;
}

.faq-answer p + p {
  margin-top: 0.85rem;
}

.hidden {
  display: none;
}

.hero__inner--single {
  grid-template-columns: minmax(0, 1fr);
}

.hero--subpage {
  padding: clamp(2.3rem, 4vw, 3.1rem) 0 1.2rem;
}

.hero--subpage .hero__panel {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.hero--subpage .hero__inner--single {
  justify-items: center;
  text-align: center;
  padding: 0;
}

.hero--subpage h1 {
  width: 100%;
  max-width: none;
  margin: 0;
  font-size: clamp(2.925rem, 4.8vw, 4.35rem);
  line-height: 0.93;
  letter-spacing: 0.16em;
}

.section__header p {
  max-width: 42rem;
  color: var(--md-sys-color-on-surface-variant);
  font-size: clamp(1rem, 1.4vw, 1.08rem);
  font-weight: var(--fw-regular);
  line-height: 1.68;
}

.hero--subpage::after {
  content: "";
  display: block;
  width: min(100%, 58rem);
  height: 1px;
  margin: 1.8rem auto 0;
  background: color-mix(
    in srgb,
    var(--md-sys-color-on-surface) 42%,
    transparent
  );
}

.hero--subpage .hero__panel::before {
  display: none;
}

@media (min-width: 781px) {
  .hero--subpage {
    padding: clamp(4rem, 5.6vw, 5rem) 0 clamp(1.9rem, 2.8vw, 2.3rem);
  }

  .hero--subpage h1 {
    white-space: nowrap;
  }
}

.subpage-divider {
  width: min(100%, 18rem);
  height: 1px;
  margin: 0.45rem 0 0.4rem;
  background: rgba(255, 255, 255, 0.42);
}

.hero .card {
  background-clip: padding-box;
}

.subpage-panel {
  gap: clamp(1.25rem, 3vw, 2rem);
}

.subpage-section-header {
  margin-bottom: 0;
}

.subpage-kicker {
  margin: 0 0 0.55rem;
  color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 64%, transparent);
  font-size: 0.76rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  text-transform: uppercase;
}

.subpage-intro,
.subpage-note {
  margin: 0;
  max-width: 62ch;
  color: var(--md-sys-color-on-surface-variant);
  line-height: 1.7;
}

.subpage-pill-row {
  margin-top: 0.95rem;
}

.subpage-reasons {
  max-width: none;
}

.subpage-reason {
  min-height: 11rem;
}

.page-main:not(.page-main--overview) .subpage-reason span {
  display: none;
}

.overview-section-action--faq {
  display: inline-flex;
  align-self: center;
  width: fit-content;
  max-width: 100%;
  margin-top: 0;
  color: var(--md-sys-color-on-surface);
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: 0.86rem;
  font-weight: var(--fw-bold);
}

.overview-section-action--faq:hover,
.overview-section-action--faq:focus-visible {
  color: var(--md-sys-color-on-surface);
  transform: translateY(-1px);
}

.overview-section-action--faq span {
  position: static;
}

.overview-section-action__mark {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--md-sys-shape-corner-full);
  border: 1px solid var(--md-sys-color-outline);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.82rem;
  line-height: 1;
  transition:
    transform var(--eg-duration-fast) var(--eg-easing-standard),
    border-color var(--eg-duration-fast) var(--eg-easing-standard),
    background-color var(--eg-duration-fast) var(--eg-easing-standard);
}

.overview-section-action--faq:hover .overview-section-action__mark,
.overview-section-action--faq:focus-visible .overview-section-action__mark {
  transform: translate(1px, -1px);
  border-color: rgba(255, 255, 255, 0.24);
  background: var(--md-sys-color-outline-variant);
}

@media (max-width: 780px) {
  .faq-accordion .faq-item > summary {
    padding: 1.25rem 1.15rem;
  }

  .faq-answer {
    padding: 0 1.15rem 1.25rem;
  }

  .container {
    width: 100%;
  }

  .page-main .container {
    width: min(100%, calc(var(--mobile-content-max) + (var(--mobile-content-gutter) * 2)));
    max-width: none;
    margin-inline: auto;
    padding-inline: var(--mobile-content-gutter);
  }

  .footer .container {
    width: min(100%, calc(var(--mobile-content-max) + (var(--mobile-content-gutter) * 2)));
    margin-inline: auto;
    padding-inline: var(--mobile-content-gutter);
  }

  .grid--two,
  .feature-panel--split,
  .media-card--split,
  .reason-grid {
    grid-template-columns: 1fr;
  }

  .media-card--split,
  .media-card--media-end {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "media"
      "body";
  }

  .hero {
    padding-top: 1rem;
  }

  .hero--subpage {
    padding-top: 2.3rem;
    padding-bottom: 1.2rem;
  }

  .hero--subpage::after {
    margin-top: 1.2rem;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    padding: 1rem;
  }

  .section__header {
    align-items: start;
    flex-direction: column;
    gap: 0.75rem;
  }

  .section__header > div {
    gap: 1rem;
  }

  .overview-section-action {
    width: 100%;
    justify-content: center;
  }

  .section-title {
    font-size: clamp(1.15rem, 6vw, 1.45rem);
    line-height: 1.08;
  }

  :where(.feature-panel__copy, .aside-panel) p,
  .reason-card p,
  .faq-item p,
  .faq-item summary {
    overflow-wrap: anywhere;
  }

  .lead-copy {
    margin-block-end: 1.55rem;
    font-size: clamp(1.04rem, 4.6vw, 1.22rem);
    line-height: 1.62;
  }

  .section__header > *,
  .faq-item summary > * {
    max-width: 100%;
    min-width: 0;
  }

  .feature-panel {
    border-radius: var(--mobile-card-radius);
    gap: 1rem;
    padding: var(--mobile-card-padding);
  }

  .subpage-panel {
    gap: 1rem;
    padding: var(--mobile-card-padding);
  }

  .video-embed,
  .community-video-embed {
    border-radius: var(--mobile-card-radius);
  }

  .card__body {
    padding: 1rem;
  }

  .media-card--compact,
  .media-card--dense {
    min-height: 0;
  }

  .media-card--compact .media-card__body,
  .media-card--dense .media-card__body {
    padding: 1.2rem;
  }

  .instruction-flow {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .instruction-flow__item {
    grid-template-columns: 1.1rem minmax(0, 1fr);
    column-gap: 0.8rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
  }

  .instruction-flow__item::before {
    width: 1rem;
    height: 1rem;
    margin-top: 0.2rem;
    background: url("/assets/img/icons/arrow-right.png") center / contain no-repeat;
    content: "";
  }

  .instruction-flow__item::after {
    display: none;
  }

  .instruction-flow__title,
  .instruction-flow__copy {
    grid-column: 2;
  }

  .aside-panel--account {
    width: 100%;
    padding: 1.2rem 1.05rem;
  }

  .steps--overview {
    gap: 0.9rem;
  }

  .steps--overview .step {
    padding: 1rem 0.95rem;
    border-radius: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-accordion .faq-item {
    overflow: visible;
  }
}

/* ======================================================================
   Overview Page
   ====================================================================== */

.overview-hero {
  position: relative;
  padding: clamp(4.8rem, 7vw, 6.75rem) 0 0;
}

.hero--overview {
  padding-bottom: 0;
}

.overview-hero__stage {
  position: relative;
  overflow: visible;
  min-height: clamp(30rem, 56vh, 39rem);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-extra-large);
  background: var(--md-sys-color-surface-container-low);
  box-shadow: var(--eg-elevation-3);
  isolation: isolate;
}

@media (min-width: 781px) {
  .overview-hero__stage {
    width: min(84vw, 1380px);
    margin-top: 16px;
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

.overview-hero__slides {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.overview-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 360ms var(--eg-easing-standard);
}

.overview-hero__slide.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .overview-hero__slide {
    opacity: 0;
  }

  .overview-hero__slide.is-active,
  .overview-hero__slide:first-child {
    opacity: 1;
  }
}

.overview-hero__media {
  position: absolute;
  inset: 0;
}

.overview-hero__media img,
.overview-hero__media video,
.overview-hero__media iframe {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.overview-hero__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 8, 10, 0.1), rgba(7, 8, 10, 0.3)),
    radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.08), transparent 28%),
    radial-gradient(circle at 82% 76%, color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent), transparent 24%);
  pointer-events: none;
}

.overview-hero__veil {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(7, 9, 11, 0.14), rgba(7, 9, 11, 0.16)),
    linear-gradient(180deg, rgba(7, 9, 11, 0.1), rgba(7, 9, 11, 0.3));
  pointer-events: none;
}

.overview-hero__badge {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 3;
  width: fit-content;
  transform: translate(-50%, -36%);
}

@media (min-width: 781px) {
  .overview-hero__badge {
    transform: translate(-50%, -28%);
  }
}

.overview-hero__badge img {
  width: min(18rem, 48vw);
  height: auto;
}

@media (min-width: 781px) {
  .overview-hero__badge img {
    width: min(17rem, 44vw);
  }
}

.overview-hero__nav {
  position: absolute;
  top: 50%;
  bottom: auto;
  z-index: 4;
  width: 56px;
  height: 56px;
  color: color-mix(in srgb, var(--md-sys-color-on-surface) 68%, transparent);
  transform: translateY(-50%);
  opacity: 0.88;
}

.overview-hero__nav-icon {
  display: block;
  width: 34px;
  height: 34px;
  background-color: currentColor;
  -webkit-mask: url("/assets/img/icons/arrow-right.svg") center / contain no-repeat;
  mask: url("/assets/img/icons/arrow-right.svg") center / contain no-repeat;
}

.overview-hero__nav:hover,
.overview-hero__nav:focus-visible {
  color: var(--md-sys-color-on-surface);
  opacity: 1;
}

.overview-hero__nav--prev {
  left: clamp(-1.9rem, -1.7vw, -1.2rem);
}

.overview-hero__nav--prev .overview-hero__nav-icon {
  transform: scaleX(-1);
}

.overview-hero__nav--next {
  right: clamp(-1.9rem, -1.7vw, -1.2rem);
}

.overview-hero__play-wrap {
  display: flex;
  justify-content: center;
  position: absolute;
  left: 50%;
  z-index: 4;
  bottom: 0;
  z-index: 8;
  width: fit-content;
  min-height: clamp(5rem, 6vw, 5.8rem);
  transform: translate(-50%, 50%);
}

.overview-play-button--hero {
  width: clamp(21rem, 30vw, 29rem);
  max-width: 100%;
  opacity: 1;
  transform: translateY(0);
}

.overview-play-button--hero .md-button--hero {
  width: 100%;
}

body.overview-play-ready .overview-play-button--hero {
  transition:
    opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.overview-nav-state--docked .overview-play-button--hero {
  opacity: 0;
  transform: translateY(-54px);
}

@media (prefers-reduced-motion: reduce) {
  .overview-play-button--hero {
    transition: none !important;
  }
}

.overview-about,
.overview-how-to {
  padding-top: clamp(1.35rem, 3vw, 2.25rem);
}

.overview-about {
  padding-top: clamp(3.4rem, 5vw, 4.9rem);
}

.overview-how-to .feature-panel {
  gap: clamp(1.7rem, 3vw, 2.45rem);
  padding: clamp(1.4rem, 3vw, 2rem);
  align-items: start;
}

.overview-about .feature-panel {
  gap: clamp(1.9rem, 3.6vw, 2.8rem);
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.overview-about .feature-panel::before,
.overview-about {
  background: none;
}

.overview-about .feature-panel__copy {
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
}

.overview-about .reason-card {
  height: 13rem;
  padding: 0;
}

.overview-about .reason-card strong {
  font-size: 1.4rem;
  line-height: 1.05;
}

.overview-about .reason-card p {
  margin-top: 0.3rem;
  font-size: 0.98rem;
  line-height: 1.62;
  color: color-mix(in srgb, #fff 82%, transparent);
}

.overview-about .reason-card .media-card__body {
  padding: 1.15rem 2rem 1.2rem;
}

.overview-how-to .section-title {
  margin-bottom: 0.2rem;
}

.overview-how-to .aside-panel--account {
  align-self: center;
  min-height: 0;
}

.overview-mini-faq .overview-mini-faq__panel {
  gap: clamp(1rem, 2vw, 1.35rem);
}

.overview-mini-faq .faq-accordion {
  width: 100%;
}

@media (min-width: 781px) {
  .overview-play-button--hero {
    width: clamp(21rem, 30vw, 29rem);
  }

  .overview-about {
    padding-top: clamp(4.15rem, 6vw, 5.8rem);
  }

  .overview-about .section-title {
    font-weight: 800;
  }
}

@media (max-width: 780px) {
  .overview-hero__badge {
    top: clamp(1rem, 3vw, 1.4rem);
    transform: translateX(-50%);
  }

  .overview-hero__badge img {
    width: min(18rem, 68vw);
    max-width: calc(100% - (var(--mobile-page-gutter) * 2));
  }

  .overview-hero__nav {
    top: calc(50% + 0.75rem);
    bottom: auto;
    width: 48px;
    height: 48px;
    transform: translateY(-50%);
  }

  .overview-hero__nav-icon {
    width: 30px;
    height: 30px;
  }

  .overview-hero__nav--prev {
    left: 0.35rem;
  }

  .overview-hero__nav--next {
    right: 0.35rem;
  }

  .overview-hero {
    padding-top: calc(4.2rem + env(safe-area-inset-top));
    padding-inline: 0;
    padding-bottom: 1.15rem;
    margin-top: 0;
  }

  .overview-hero__stage {
    width: 100vw;
    max-width: none;
    aspect-ratio: auto;
    height: min(58svh, 100vw);
    left: 50%;
    margin-left: -50vw;
    margin-right: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .overview-hero__slides,
  .overview-hero__veil {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.58) 12%, rgba(0, 0, 0, 0.92) 22%, #000 32%, #000 68%, rgba(0, 0, 0, 0.92) 78%, rgba(0, 0, 0, 0.58) 88%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.58) 12%, rgba(0, 0, 0, 0.92) 22%, #000 32%, #000 68%, rgba(0, 0, 0, 0.92) 78%, rgba(0, 0, 0, 0.58) 88%, transparent 100%);
  }

  .overview-hero__slide::after {
    background: none;
  }

  .brand-logo--hero {
    transform: translateY(clamp(-0.65rem, -2vw, -0.4rem));
  }

  .overview-hero__play-wrap {
    min-height: 4.4rem;
    bottom: 0.2rem;
    width: 100%;
    padding-inline: 1rem;
    transform: translate(-50%, 50%);
    z-index: 8;
  }

  .overview-hero__veil {
    background:
      linear-gradient(180deg, rgba(7, 9, 11, 0.14), rgba(7, 9, 11, 0.16)),
      linear-gradient(180deg, rgba(7, 9, 11, 0.1), rgba(7, 9, 11, 0.3));
  }

  .overview-section-action--faq {
    align-self: flex-start;
    margin-top: 0.1rem;
    font-size: 0.84rem;
    letter-spacing: 0.1em;
  }

  .overview-section-action__mark {
    width: 1.45rem;
    height: 1.45rem;
  }

  .overview-play-button--hero {
    min-width: 0;
    width: min(17.5rem, calc(100vw - 4rem));
    max-width: 100%;
  }

  .overview-about,
  .overview-how-to,
  #faq {
    width: 100%;
  }

  .overview-about {
    margin-top: 5svh;
    padding-top: 5svh;
  }

  .section {
    padding-block: var(--mobile-section-gap);
  }

  .section + .section {
    margin-top: 0;
  }

  .overview-about .feature-panel {
    gap: 1.35rem;
  }

  .overview-about .feature-panel__copy {
    display: grid;
    gap: 0.8rem;
  }

  .overview-about .section-title {
    margin-bottom: 0.15rem;
  }

  .overview-about .reason-card {
    height: 9.75rem;
  }

  .overview-about .reason-card strong {
    font-size: 1.2rem;
    line-height: 1.05;
  }

  .overview-about .reason-card .media-card__body {
    padding: 1rem 1.05rem 1.05rem;
  }

  .overview-how-to .feature-panel {
    gap: 1.35rem;
    padding: 1.2rem;
  }
}

/* ======================================================================
   How to Play Page
   ====================================================================== */

.page-main--how-to-play {
  --how-to-section-gap: clamp(1.25rem, 3vw, 2rem);
}

.how-to-start,
.how-to-shotflow {
  scroll-margin-top: 5.5rem;
}

.shotflow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.95rem, 1.6vw, 1.25rem);
}

.shotflow-card {
  min-height: 100%;
}

.shotflow-card .card__body {
  display: grid;
  align-content: start;
  gap: 0.65rem;
  height: 100%;
  padding: clamp(1rem, 1.8vw, 1.25rem);
  text-align: left;
}

.shotflow-card__step {
  display: inline-grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--eg-accent-blue-soft);
  color: var(--eg-accent-blue-text);
  font-size: 0.85rem;
  font-weight: var(--fw-bold);
}

.how-to-shotflow__note {
  max-width: 48rem;
  margin-top: clamp(1.15rem, 2.2vw, 1.6rem);
  text-align: left;
}

@media (max-width: 1050px) {
  .shotflow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .shotflow-grid {
    grid-template-columns: 1fr;
  }
}

/* ======================================================================
   Press Page
   ====================================================================== */

.page-main--press {
  --press-section-gap: clamp(1.25rem, 3vw, 2rem);
}

.press-overview-copy {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  min-width: 0;
}

.press-overview-aside-stack {
  display: grid;
  align-content: start;
  gap: clamp(1.25rem, 2vw, 2rem);
  min-width: 0;
}

.press-studio {
  display: grid;
  grid-template-columns:
    minmax(15rem, 0.74fr)
    minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.press-studio__media {
  width: 100%;
  max-width: 26.5rem;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin: 0;
  justify-self: center;
}

.press-studio__media-button {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  color: inherit;
  cursor: zoom-in;
  background: transparent;
  border: 0;
}

.press-studio__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.press-studio__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.press-studio__copy {
  max-width: 48rem;
  text-align: left;
}

.press-studio__copy .subpage-divider {
  margin-inline: 0;
}

.press-studio__copy .hero__actions {
  justify-content: flex-start;
}

.press-studio__action {
  align-self: flex-start;
}

@media (max-width: 780px) {
  .press-studio,
  .press-overview-panel {
    grid-template-columns: 1fr;
  }

  .press-studio__media {
    order: 0;
    justify-self: start;
    max-width: min(100%, 19.6rem);
  }

  .press-studio__copy {
    order: 1;
  }
}

/* ======================================================================
   Register Page
   ====================================================================== */

.register-cta .section-title,
.subpage-panel .section-title {
  margin: 0;
  font-size: clamp(2rem, 3.3vw, 2.9rem);
  line-height: 0.98;
}

.register-cta {
  position: relative;
  isolation: isolate;
  gap: clamp(1.9rem, 3.4vw, 2.5rem);
  padding-block: clamp(2.15rem, 4.4vw, 3rem);
  margin-bottom: clamp(1.6rem, 3.6vw, 2.6rem);
  text-align: center;
  border: none;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.register-cta .feature-panel__copy {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
  display: grid;
  gap: 1.2rem;
}

.register-cta::before {
  display: none;
}

.register-cta .feature-panel__copy p {
  margin: 0;
}

.register-cta .hero__actions {
  justify-content: center;
  margin-top: 0.45rem;
}

.register-cta__action {
  width: min(100%, 24rem);
}

.register-cta__action md-filled-button {
  width: 100%;
}

#why-pwa {
  scroll-margin-top: 5.5rem;
}

.register-pwa {
  gap: clamp(1.55rem, 3vw, 2.15rem);
  justify-items: start;
  padding: clamp(1.45rem, 3.4vw, 2.35rem);
}

.register-pwa .feature-panel__copy {
  max-width: 42rem;
  margin: 0;
  justify-self: start;
  display: grid;
  gap: 1.15rem;
  text-align: left;
}

.register-pwa .section-title,
.register-pwa .feature-panel__copy p {
  text-align: left;
}

.register-pwa .subpage-divider {
  margin-left: 0;
  margin-right: auto;
}

.register-pwa .feature-panel__copy p {
  margin: 0;
}

@media (max-width: 780px) {

  .register-cta {
    gap: 1.45rem;
    padding-block: 1.55rem 1.8rem;
    margin-bottom: 1.35rem;
  }

  .register-cta .feature-panel__copy,
  .register-pwa .feature-panel__copy {
    gap: 1rem;
  }

  .register-cta .hero__actions md-filled-button {
    width: 100%;
  }
}

/* ======================================================================
   Community Page
   ====================================================================== */

.community-video-section,
.community-social-section {
  display: grid;
  justify-items: center;
}

.community-play-section,
.community-societies-section,
.community-conduct-section,
.community-cta-section {
  scroll-margin-top: 5.5rem;
}

.community-video-embed {
  width: min(100%, 58rem);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  padding: 0;
}

.community-video-embed iframe,
.community-video-embed video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.community-socials {
  display: grid;
  grid-template-columns: repeat(4, 48px);
  justify-content: space-between;
  width: min(100%, 54rem);
  margin-inline: auto;
}

.community-social-link {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-on-surface);
  background: transparent;
  transition:
    background-color var(--eg-duration-fast) var(--eg-easing-standard),
    color var(--eg-duration-fast) var(--eg-easing-standard);
}

.community-social-link:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}

.community-social-link:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 3px;
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
}

.community-social-link svg {
  display: block;
  width: 28px;
  height: 28px;
  fill: currentColor;
}

.community-section-heading {
  display: grid;
  gap: 0.75rem;
  max-width: 48rem;
}

.community-section-heading--play {
  margin-inline: 0 auto;
  text-align: left;
}

.community-section-heading--play .subpage-intro {
  margin-inline: 0;
}

.community-section-heading--conduct {
  margin-inline: 0 auto;
  text-align: left;
}

.community-section-heading--conduct .subpage-intro {
  margin-inline: 0;
}

.community-play-panel {
  padding: clamp(1.4rem, 3.4vw, 2.6rem);
}

.community-play-menu {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.community-play-option {
  --media-card-body-column: minmax(0, 1fr);

  gap: 0;
}

.community-play-option__media {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  cursor: zoom-in;
  background: transparent;
}

.community-play-option__content {
  text-align: left;
}

.community-play-cta {
  display: grid;
  justify-items: center;
  gap: 1rem;
  max-width: 48rem;
  margin: clamp(1.5rem, 3vw, 2.3rem) auto 0;
  text-align: center;
}

.community-play-cta__body {
  display: grid;
  gap: 0.35rem;
}

.community-play-cta__eyebrow,
.community-play-cta__title {
  margin: 0;
}

.community-play-cta__eyebrow {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.78rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}

.community-play-cta__title {
  font-size: clamp(1.45rem, 2.4vw, 2.05rem);
  line-height: 1.1;
}

.societies-feature {
  position: relative;
  display: block;
  padding: 0;
  overflow: visible;
  border: 0;
  background: none;
  box-shadow: none;
}

.societies-feature__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(20rem, 0.85fr);
  grid-template-areas: "copy visual";
  align-items: end;
  gap: clamp(1.5rem, 3vw, 3rem);
  min-height: clamp(34rem, 43vw, 39rem);
}

.societies-feature__copy {
  grid-area: copy;
  align-self: center;
  display: grid;
  gap: 1rem;
  max-width: 50rem;
  text-align: left;
}

.societies-feature__eyebrow,
.societies-feature__title,
.societies-feature__intro {
  margin: 0;
}

.societies-feature__eyebrow {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.78rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}

.societies-feature__title {
  font-size: clamp(3rem, 5.2vw, 4.8rem);
  line-height: 0.92;
  font-style: italic;
  font-weight: 600;
  text-transform: none;
}

.societies-feature__intro,
.societies-feature__item {
  color: var(--md-sys-color-on-surface-variant);
  line-height: 1.65;
}

.societies-feature__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block: 1px solid var(--md-sys-color-outline-variant);
}

.societies-feature__item {
  position: relative;
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.societies-feature__item:last-child {
  border-bottom: 0;
}

.societies-feature__arrow {
  width: 1rem;
  max-width: 1rem;
  height: auto;
}

.societies-feature__visual {
  grid-area: visual;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  min-height: 100%;
  margin-bottom: -4rem;
  overflow: visible;
}

.societies-feature__golfer {
  display: block;
  width: clamp(23rem, 31vw, 27rem);
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
  transform: translate(2rem, 4rem);
  filter: drop-shadow(0 0 28px color-mix(in srgb, var(--eg-accent-blue) 45%, transparent));
}

.community-conduct-panel {
  position: relative;
  padding: clamp(1.4rem, 3.4vw, 2.6rem);
}

.community-conduct-shell {
  position: relative;
}

.community-conduct-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.5rem);
}

.community-rule {
  min-height: 100%;
}

.community-rule .card__body {
  display: grid;
  align-content: start;
  gap: 0.6rem;
  height: 100%;
  padding: clamp(1rem, 1.8vw, 1.25rem);
  text-align: left;
}

.community-card-index {
  color: var(--eg-accent-blue-text);
  font-size: 0.82rem;
  font-weight: var(--fw-bold);
}

.community-cta {
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding: clamp(1.5rem, 3.4vw, 2.5rem);
  text-align: center;
}

.community-cta__copy {
  max-width: 44rem;
  text-align: center;
}

.community-cta .hero__actions {
  justify-content: center;
  width: 100%;
  min-width: 0;
}

.community-cta .hero__actions md-filled-button {
  max-width: 100%;
}

@media (max-width: 1050px) {
  .community-conduct-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .societies-feature__title {
    white-space: nowrap;
  }
}

@media (max-width: 780px) {
  .community-play-option {
    min-height: 0;
  }

  .community-play-option__media {
    aspect-ratio: 16 / 10;
    height: auto;
  }

  .community-play-cta {
    justify-items: stretch;
    text-align: left;
  }

  .community-cta {
    justify-items: center;
    text-align: center;
  }

  .societies-feature {
    grid-template-columns: 1fr;
  }

  .community-play-cta__actions md-filled-button,
  .community-cta .hero__actions md-filled-button {
    width: 100%;
  }

  .societies-feature::before {
    position: absolute;
    right: -1rem;
    bottom: 0;
    z-index: 0;
    width: min(54vw, 15rem);
    aspect-ratio: 1088 / 1920;
    background: url("/assets/img/golfer_silhouette_transparent.svg") bottom right / contain no-repeat;
    content: "";
    opacity: 0.12;
    filter: drop-shadow(0 0 20px color-mix(in srgb, var(--eg-accent-blue) 35%, transparent));
    pointer-events: none;
  }

  .societies-feature__layout {
    display: block;
    position: relative;
    z-index: 1;
    min-height: 0;
  }

  .societies-feature__visual {
    display: none;
  }

  .societies-feature__copy {
    padding-right: clamp(4rem, 20vw, 6.5rem);
  }

  .societies-feature__title {
    font-size: clamp(2.2rem, 10vw, 3.2rem);
    line-height: 0.95;
  }

  .community-conduct-grid {
    grid-template-columns: 1fr;
  }

  .community-cta .hero__actions {
    justify-content: center;
  }
}

/* ======================================================================
   FAQ Page
   ====================================================================== */

.page-main--faq {
  --faq-section-gap: clamp(1.75rem, 3vw, 2.5rem);
}

.faq-toc {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem 0.8rem;
  max-width: 58rem;
  margin: 0 auto clamp(1.25rem, 2.8vw, 2rem);
}

.faq-toc a {
  display: inline-flex;
  align-items: center;
  min-height: 2.2rem;
  padding: 0.35rem 0.8rem;
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-on-surface);
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 6%, transparent);
}

.faq-section {
  scroll-margin-top: 5.5rem;
}

.faq-section + .faq-section {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.faq-accordion--full {
  gap: clamp(0.75rem, 1.4vw, 1rem);
}

.faq-accordion--full .faq-item > summary {
  font-size: clamp(1.02rem, 1.3vw, 1.16rem);
  line-height: 1.35;
}

.faq-accordion--full .faq-answer p {
  line-height: 1.62;
}

@media (max-width: 780px) {
  .faq-toc {
    justify-content: flex-start;
  }

}

/* ======================================================================
   Contact Page
   ====================================================================== */

.page-main--contact .subpage-panel {
  padding: clamp(1.25rem, 3vw, 2.2rem);
}

.page-main--contact .grid--two {
  gap: clamp(1rem, 2vw, 1.4rem);
}

.page-main--contact .card__body {
  display: grid;
  align-content: start;
  gap: 0.85rem;
  min-height: 100%;
  padding: clamp(1rem, 1.8vw, 1.25rem);
  text-align: left;
}

.page-main--contact .card__body .section-title,
.page-main--contact .card__copy {
  margin: 0;
}

.page-main--contact .subpage-pill-row {
  align-items: center;
  justify-content: flex-start;
  margin-top: 0.2rem;
}

@media (max-width: 780px) {
  .page-main--contact .grid--two {
    grid-template-columns: 1fr;
  }
}

/* ======================================================================
   Privacy Page
   ====================================================================== */

.page-main--privacy .subpage-panel {
  width: min(100%, 52rem);
  margin-inline: auto;
  padding: clamp(1.35rem, 3vw, 2.25rem);
}

.subpage-copy-stack {
  display: grid;
  gap: 0.65rem;
}

.subpage-copy-stack + .subpage-copy-stack {
  margin-top: clamp(1.1rem, 2.2vw, 1.55rem);
}

.subpage-copy-title {
  margin: 0;
  font-size: clamp(1.12rem, 1.55vw, 1.32rem);
  line-height: 1.2;
  font-weight: var(--fw-semibold);
}

.subpage-copy-paragraph,
.subpage-copy-stack .subpage-note,
.subpage-copy-stack .subpage-intro {
  margin: 0;
  color: var(--md-sys-color-on-surface-variant);
  font-size: clamp(1rem, 1.18vw, 1.04rem);
  line-height: 1.7;
}

.page-main--privacy .subpage-intro {
  font-size: clamp(1.02rem, 1.28vw, 1.1rem);
  line-height: 1.72;
}

.page-main--privacy .subpage-divider {
  margin-block: clamp(0.5rem, 1.2vw, 0.8rem);
}

.subpage-copy-paragraph a {
  color: var(--md-sys-color-primary);
}

.subpage-copy-paragraph a:hover,
.subpage-copy-paragraph a:focus-visible {
  color: var(--md-sys-color-on-surface);
}

@media (max-width: 780px) {
  .page-main--privacy .subpage-panel {
    width: 100%;
    padding: var(--mobile-card-padding);
  }
}