/* ==========================================================================
   SwingView — styles
   ========================================================================== */

:root {
  --bg: #000;
  --bg-2: #0b0b0b;
  --surface: #141614;
  --surface-2: #1b1e1b;
  --line: rgba(242, 241, 236, 0.08);
  --line-2: rgba(242, 241, 236, 0.14);
  --text: #f2f1ec;
  --muted: #8f948f;
  --dim: #5c615c;
  --accent: #25d366;
  --accent-hover: #46e07f;
  --accent-ink: #04140a;
  --accent-rgb: 37, 211, 102;
  --ink: #111311;

  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --radius: 22px;
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1200px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; }
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
/* <picture> only picks the image format; it adds no box of its own */
picture { display: contents; }
/* Section headings split into even lines, so a word is never left on its own */
h2 { text-wrap: balance; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--accent); color: var(--accent-ink); }

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

.dim { color: var(--dim); }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; }
/* Accent words: same font as the headline, in the brand green. The final
   headline stays all white. */
.serif,
.hero-title em,
.how-title em {
  font-style: normal;
  color: var(--accent);
}
.cta-title em { font-style: normal; }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
}

.section-title {
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 600;
}

.lead {
  font-size: clamp(16px, 1.3vw, 18px);
  color: var(--muted);
  max-width: 34em;
  margin-top: 24px;
}

.section-head { margin-bottom: clamp(48px, 7vw, 88px); }
.section-head.center { text-align: center; }

/* Keeps a name like TY-GA from breaking at its hyphen */
.nowrap { white-space: nowrap; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: 500 15px/1 var(--sans);
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .3s var(--ease), background-color .3s var(--ease), color .3s, border-color .3s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); background: var(--accent-hover); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.btn-small { height: 36px; padding: 0 16px; font-size: 14px; }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-2);
}
.btn-ghost:hover { background: rgba(242, 241, 236, 0.06); }

.btn-outline {
  background: transparent;
  color: var(--text);
  border-color: var(--line-2);
}
.btn-outline:hover { background: var(--text); color: var(--ink); }

/* Nav ---------------------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background-color .4s var(--ease), border-color .4s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom-color: var(--line);
}
.nav-inner {
  padding: 0 20px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.02em;
}
.logo img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.nav-links { display: flex; gap: 4px; }
.nav-links a {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 12px;
  font-size: 14px;
  color: var(--muted);
  transition: color .2s;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text); }

.nav-links { margin-right: auto; margin-left: -8px; }

.nav-actions { position: relative; display: flex; align-items: center; gap: 8px; }
/* Glass App Store badge and a dark Login button, as on fomo.family */
.nav-store {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 14px 0 12px;
  border-radius: 6px;
  background: rgba(242, 241, 236, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #f7f7f7;
  transition: opacity .2s;
}
.nav-store svg { width: 20px; height: 20px; fill: currentColor; }
.nav-play svg { width: 21px; height: 23px; }
.nav-store span { display: flex; flex-direction: column; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.05; }
.nav-store small { font-size: 8.5px; font-weight: 500; letter-spacing: 0.01em; }
.nav-login {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: 8px;
  background: #121412;
  box-shadow: 0 0 0 1px rgba(242, 241, 236, 0.1);
  color: #f7f7f7;
  font: 700 16px/1 var(--sans);
  cursor: pointer;
  transition: opacity .2s;
}
.nav-store:hover, .nav-login:hover { opacity: 0.7; }
.nav-store:focus-visible, .nav-login:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Menu button: only where the nav links are hidden (phones and tablets). Its
   chevron points down, and flips up while the menu is open */
.nav-menu {
  display: none;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: #121412;
  box-shadow: 0 0 0 1px rgba(242, 241, 236, 0.1);
  color: #f7f7f7;
  font: 700 15px/1 var(--sans);
  cursor: pointer;
  transition: opacity .2s;
}
.nav-menu::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s var(--ease), margin .2s;
}
.nav-menu[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 3px; }
.nav-menu:hover { opacity: 0.7; }
.nav-menu:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The menu: a small dark card under the button, as on fomo.family */
.nav-panel {
  position: absolute;
  top: calc(100% - 4px);
  right: 16px;
  width: 210px;
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: #121412;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.9);
  animation: panelIn .2s var(--ease);
}
.nav-panel[hidden] { display: none; }
@keyframes panelIn { from { opacity: 0; transform: translateY(-6px); } }
.nav-panel a {
  padding: 13px 14px;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--muted);
}
.nav-panel a:active { background: rgba(242, 241, 236, 0.06); color: var(--text); }
/* Log in sits under a thin line at the bottom of the menu, on phones only
   (larger screens show the Login button in the top bar) */
.nav-panel .nav-panel-login {
  display: none;
  margin-top: 6px;
  padding-top: 15px;
  border-top: 1px solid var(--line-2);
  border-radius: 0 0 8px 8px;
  color: var(--text);
  font-weight: 600;
}
@media (max-width: 640px) {
  .nav-panel .nav-panel-login { display: block; }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-menu { display: inline-flex; align-items: center; }
}
@media (min-width: 861px) {
  .nav-panel { display: none !important; }
}
/* Phones: just the logo and Menu at the top; the download bar takes over
   from the App Store badge */
@media (max-width: 640px) {
  .nav-store, .nav-login { display: none; }
}

/* Sticky download bar (phones only) */
.get-bar { display: none; }
@media (max-width: 640px) {
  .get-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: #0a0c0a;
    border-top: 1px solid var(--line);
    transform: translateY(110%);
    transition: transform .3s var(--ease);
  }
  .get-bar.show { transform: none; }
  .get-bar-brand { display: flex; align-items: center; gap: 10px; }
  .get-bar-brand img { width: 32px; height: 32px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }
  .get-bar-brand span { display: flex; flex-direction: column; line-height: 1.2; }
  .get-bar-brand b { font-size: 15px; font-weight: 600; }
  .get-bar-brand small { font-size: 12px; color: var(--muted); }
  .get-bar-btn {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 20px;
    border-radius: 10px;
    background: #f2f1ec;
    color: #000;
    font: 700 15px/1 var(--sans);
    transition: opacity .2s;
  }
  .get-bar-btn:active { opacity: 0.8; }
}
@media (max-width: 640px) {
  .nav-inner { padding: 0 16px; }
  /* Only room for one store badge next to Login on phones */
  .nav-play { display: none; }
}
@media (max-width: 400px) {
  .logo span { font-size: 16px; }
  .nav-actions { gap: 8px; }
  .nav-store { padding: 0 10px 0 9px; }
  .nav-login { padding: 0 14px; font-size: 15px; }
}

/* Reveal ------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease), transform 1.1s var(--ease);
  transition-delay: var(--d, 0s);
}
[data-reveal].in { opacity: 1; transform: none; }

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

.hero {
  position: relative;
  padding-top: clamp(120px, 15vh, 160px);
  text-align: center;
}

.hero-copy { padding: 0 var(--gutter); }

.hero-title {
  font-size: clamp(40px, 6vw, 84px);
  line-height: 0.96;
  letter-spacing: -0.05em;
  font-weight: 600;
  max-width: 11.5em;
  margin: 0 auto;
}
.cta-title em { white-space: nowrap; }

.hero-sub {
  margin: 28px auto 0;
  max-width: 33em;
  font-size: clamp(16px, 1.3vw, 18px);
  color: var(--muted);
}

/* Keep each sentence together so narrow screens break between them */
.hero-sub span { display: inline-block; }

.hero-ctas {
  margin-top: 36px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
/* Translucent glass buttons, as on fomo.family */
.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  height: 54px;
  padding: 0 28px;
  border-radius: 12px;
  border: 1px solid rgba(242, 241, 236, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #f7f7f7;
  font: 700 18px/1 var(--sans);
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity .2s, transform .3s var(--ease);
}
.hero-btn:hover { opacity: 0.75; }
.hero-btn:active { transform: scale(.98); }
.hero-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.hero-btn-primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.hero-btn-glass { background: rgba(242, 241, 236, 0.1); }
/* Phones: just one button (Download app), centred, so the top feels less crowded */
@media (max-width: 640px) {
  .hero-btn-primary { display: none; }
  .hero-btn { min-width: 220px; height: 52px; padding: 0 24px; font-size: 16px; }
}
.hero-meta {
  margin-top: 18px;
  font-size: 13px;
  color: var(--muted);
}

/* The hero image is the 3:2 photo with its sunset sky extended upward and
   faded into black (the top third of the image). The photo is pulled up so
   that sky sits behind the headline, with the text drawn over it */
.hero-copy { position: relative; z-index: 2; }
.hero-media-wrap {
  position: relative;
  z-index: 1;
  margin-top: calc(-33.333vw + 30px);
}
.hero-media {
  position: relative;
  /* The whole square image on tablets; laptops crop a little off the bottom */
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
/* Full width and still: it fades up once when it first comes into view */
.hero-media.photo-wait { opacity: 0; translate: 0 40px; }
.hero-media.photo-wait.photo-in {
  opacity: 1;
  translate: 0 0;
  transition: opacity 1s var(--ease), translate 1.2s var(--ease);
}
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}
/* Laptops and up: trim the bottom so the hero is no taller than before */
@media (min-width: 1025px) {
  .hero-media { aspect-ratio: 1440 / 1290; }
}
.hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.7) 100%);
  pointer-events: none;
}

.float-card {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
  padding: 16px 18px;
  text-align: left;
  border-radius: 18px;
  background: rgba(16, 18, 16, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
  will-change: transform;
}
/* Phones: the cards stay put on the photo and use a plain tinted backing
   instead of a live blur, which is costly to redraw while scrolling */
@media (max-width: 640px) {
  .float-card {
    background: rgba(16, 18, 16, 0.88);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    will-change: auto;
  }
}
.fc-label { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(242, 241, 236, 0.66); }
.fc-value { font-size: 34px; font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; }
.fc-value small { font-size: 18px; color: rgba(242, 241, 236, 0.6); font-weight: 500; margin-left: 2px; }
.fc-note { font-size: 13px; color: rgba(242, 241, 236, 0.66); }
.fc-note.good { color: var(--accent); }

/* Entrance: once the script is ready the cards wait, then fade up in story order
   (tempo, shoulder turn, TY-GA). Without the script they simply show. */
.hero-media.cards-ready .float-card {
  opacity: 0;
  translate: 0 14px;
  transition: opacity .7s var(--ease), translate .9s var(--ease);
}
.hero-media.cards-ready.cards-in .float-card { opacity: 1; translate: 0 0; }
.hero-media.cards-in .fc-1 { transition-delay: .1s; }
.hero-media.cards-in .fc-2 { transition-delay: .55s; }
.hero-media.cards-in .fc-voice { transition-delay: 1s; }

/* Callout lines from each card to what it measures, in the tracking green */
.callouts {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.callout { opacity: 0; transition: opacity .6s var(--ease); }
.hero-media.cards-in .callout { opacity: 1; }
.hero-media.cards-in .callout-tempo { transition-delay: .4s; }
.hero-media.cards-in .callout-shoulder { transition-delay: .85s; }
.callout line { stroke: rgba(var(--accent-rgb), 0.85); stroke-width: 1.5; }
.callout .dot,
.callout .end { fill: var(--accent); }
.callout .ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: calloutPing 2.2s ease-out infinite;
}
@keyframes calloutPing {
  0%   { opacity: .7; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.6); }
}

/* Tempo sits between the phone and the golfer; shoulder turn beside his shoulders */
.fc-1 { left: 34%; top: 62%; }
.fc-2 { left: 77%; top: 54%; }
.fc-voice {
  left: 50%;
  bottom: 40px;
  width: min(420px, calc(100% - 2 * var(--gutter)));
  margin-left: calc(min(420px, calc(100% - 2 * var(--gutter))) / -2);
  gap: 10px;
}
.fc-voice p { font-size: 17px; line-height: 1.4; letter-spacing: -0.01em; }
.fc-voice-head { display: flex; align-items: center; gap: 10px; }
.fc-voice-head .wave { margin-left: auto; height: 18px; }

.orb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.6), transparent 40%),
    radial-gradient(circle, var(--accent) 0 1.2px, transparent 1.6px) 0 0 / 4px 4px,
    radial-gradient(circle, rgba(var(--accent-rgb), 0.5), rgba(var(--accent-rgb), 0.15));
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.55);
  flex-shrink: 0;
  animation: orb 2.4s ease-in-out infinite;
}
@keyframes orb { 50% { box-shadow: 0 0 22px rgba(var(--accent-rgb), 0.85); transform: scale(1.06); } }

/* Tablets and small laptops: the whole image, smaller stat cards */
@media (max-width: 1024px) {
  .float-card { min-width: 0; padding: 12px 14px; }
  .fc-value { font-size: 26px; }
  .fc-1 { left: 33%; top: 57%; }
  .fc-2 { left: 77%; top: 50%; }
  .fc-voice { bottom: 24px; }
  .fc-voice p { font-size: 15px; }
}

/* Phones: a taller crop centred on the golfer, one stat card */
@media (max-width: 640px) {
  .hero-media-wrap { margin-top: -150px; }
  .hero-media { aspect-ratio: 390 / 620; }
  .hero-media img { object-position: 62% 0; }
  /* Where the cards used to settle with the scroll drift, which phones skip */
  .fc-1 { right: auto; left: var(--gutter); top: auto; bottom: 205px; }
  .fc-voice { bottom: 52px; }
  .fc-2 { display: none; }
  .callouts { display: none; }
}

/* TY-GA planet + voice demo (matches swingview.ai) ------------------------- */

/* Player, chat bar and captions fade in together, above the planet canvas */
.tyga-controls {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.tyga-section { text-align: center; padding-bottom: clamp(72px, 7vw, 96px); overflow: hidden; }
.tyga {
  position: relative;
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tyga-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
}
.tyga-lead {
  margin: 14px auto 0;
  max-width: 34em;
  padding: 0 var(--gutter);
  color: var(--muted);
  font-size: clamp(16px, 1.3vw, 18px);
}
/* The live TY-GA demo, centred on its own under the heading */
.tyga-pair {
  width: 100%;
  max-width: 760px;
  margin: clamp(32px, 4vw, 56px) auto 0;
  padding: 0 var(--gutter);
}
.tyga-demo { display: flex; flex-direction: column; align-items: center; }
.tyga-stage {
  position: relative;
  width: 100%;
  height: clamp(300px, 34vw, 440px);
}
@media (max-width: 860px) {
  .tyga-stage { height: clamp(300px, 80vw, 420px); }
}
/* The canvas spans the whole screen width (wider than the stage on phones)
   so the particles fly in from the screen edges; the drawing fades out at
   its edges (in main.js) so there is never a visible box */
.tyga-canvas {
  position: absolute;
  top: -35%;
  left: 50%;
  width: max(100vw, 160%);
  height: 170%;
  transform: translateX(-50%);
  display: block;
  z-index: 0;
  pointer-events: none;
}
/* Text sits above the wide canvas */
.tyga-eyebrow, .tyga-lead { position: relative; z-index: 1; }

.tyga-player {
  position: relative;
  z-index: 2;
  margin-top: -24px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 10px 26px 10px 10px;
  border-radius: 999px;
  background: rgba(10, 12, 11, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font: 600 16px/1 var(--sans);
  letter-spacing: -0.01em;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(var(--accent-rgb), 0.08);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.tyga-player:hover,
.tyga-player.is-playing {
  border-color: rgba(var(--accent-rgb), 0.45);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(var(--accent-rgb), 0.18);
}
.tyga-player:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.tyga-play {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  background: #fff;
  color: #0b0b10;
  display: grid;
  place-items: center;
  transition: transform .3s var(--ease);
}
.tyga-player:active .tyga-play { transform: scale(.94); }
.tyga-play svg {
  grid-area: 1 / 1;
  width: 14px;
  height: 14px;
  fill: currentColor;
  transition: opacity .2s;
}
.tyga-play .i-pause,
.tyga-player.is-playing .i-play { opacity: 0; }
.tyga-player.is-playing .i-pause { opacity: 1; }
.tyga-label { white-space: nowrap; }
.tyga-wave {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 26px;
}
.tyga-wave i {
  display: block;
  width: 3px;
  height: 26px;
  border-radius: 2px;
  background: var(--accent);
  transform-origin: center;
  transform: scaleY(var(--h, .2));
  transition: transform .09s linear;
}
.tyga-player.is-playing.no-analyser .tyga-wave i,
.tyga-bar.is-playing.no-analyser .tyga-wave i { animation: wave 1.1s ease-in-out infinite; }
.tyga-player.is-playing.no-analyser .tyga-wave i:nth-child(2n) { animation-delay: -.2s; }
.tyga-player.is-playing.no-analyser .tyga-wave i:nth-child(3n) { animation-delay: -.45s; }
.tyga-player.is-playing.no-analyser .tyga-wave i:nth-child(5n) { animation-delay: -.7s; }
.tyga-caption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--dim);
}

[hidden] { display: none !important; }

/* Live conversation (after the intro clip) */
.tyga-talk {
  position: relative;
  z-index: 2;
  margin-top: -24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 0 var(--gutter);
}
.tyga-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(560px, 100%);
  padding: 8px 18px 8px 8px;
  border-radius: 999px;
  background: rgba(10, 12, 11, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(var(--accent-rgb), 0.08);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.tyga-bar.listening {
  border-color: rgba(var(--accent-rgb), 0.6);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(var(--accent-rgb), 0.25);
}
.tyga-bar.busy { border-color: rgba(255, 255, 255, 0.2); }
.tyga-mic {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: #0b0b10;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease;
}
.tyga-mic svg { grid-area: 1 / 1; width: 18px; height: 18px; }
.tyga-mic .i-mic { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tyga-mic .i-stop { fill: currentColor; display: none; }
.tyga-bar.listening .tyga-mic .i-mic { display: none; }
.tyga-bar.listening .tyga-mic .i-stop { display: block; }
.tyga-mic:hover:not(:disabled) { transform: scale(1.05); }
.tyga-mic:disabled { opacity: 0.5; cursor: default; }
.tyga-bar.listening .tyga-mic { background: var(--accent); animation: tygaPulse 1.2s ease-in-out infinite; }
@keyframes tygaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.5); }
  50%      { box-shadow: 0 0 0 8px rgba(var(--accent-rgb), 0); }
}
.tyga-form { flex: 1 1 auto; display: flex; align-items: center; gap: 6px; min-width: 0; }
.tyga-form input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 4px;
  background: transparent;
  border: 0;
  outline: none;
  color: #fff;
  font: 400 15px var(--sans);
}
.tyga-form input::placeholder { color: var(--dim); }
.tyga-send {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.tyga-send svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tyga-send:not(:disabled) { background: var(--accent); color: var(--accent-ink); }
.tyga-send:disabled { opacity: 0.4; cursor: default; }
.tyga-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: 640px; }
.tyga-chips button {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #c9c9c4;
  font: 500 13px var(--sans);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.tyga-chips button:hover { border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.tyga-cta { margin-top: 4px; }
.tyga-say {
  margin-top: 16px;
  max-width: 640px;
  min-height: 28px;
  padding: 0 var(--gutter);
  font-size: 18px;
  line-height: 1.4;
  text-align: center;
}
.tyga-say:empty { display: none; }
.tyga-say .you { color: #d6d6d0; font-style: italic; }
.tyga-say .ai { color: #fff; }
.tyga-say .soft { color: var(--dim); font-style: italic; }

@media (max-width: 640px) {
  .tyga-stage { height: 300px; }
  .tyga-player { padding-right: 16px; gap: 10px; }
  .tyga-wave { display: none; }
  .tyga-bar { padding-right: 10px; }
  .tyga-say { font-size: 16px; }
}

/* Wave --------------------------------------------------------------------- */

.wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 22px;
}
.wave i {
  display: block;
  width: 3px;
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
  transform-origin: center;
  animation: wave 1.1s ease-in-out infinite;
}
.wave i:nth-child(2n) { animation-delay: -.2s; }
.wave i:nth-child(3n) { animation-delay: -.45s; }
.wave i:nth-child(5n) { animation-delay: -.7s; }
.wave i:nth-child(7n) { animation-delay: -.9s; }
@keyframes wave {
  0%, 100% { transform: scaleY(.2); }
  50%      { transform: scaleY(1); }
}

/* Phone -------------------------------------------------------------------- */

.phone {
  position: relative;
  z-index: 2;
  width: 320px;
  height: 680px;
  padding: 11px;
  border-radius: 54px;
  background: linear-gradient(145deg, #2c302c, #121412 40%, #202320);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 0 0 3px #000,
    0 60px 120px -40px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}
.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 44px;
  background: #000;
}
.phone-screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .7s var(--ease), transform 1s var(--ease);
}
.phone-screen img.is-active { opacity: 1; transform: none; }

/* Strip -------------------------------------------------------------------- */

.strip {
  padding: 40px var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.strip p { font-size: 13px; color: var(--dim); font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.strip ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 36px;
}
.strip li {
  font-size: 15px;
  color: var(--text);
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Statement ---------------------------------------------------------------- */

/* One short line whose words light up in turn once it scrolls into view */
/* No space below: the statement is the headline for Meet TY-GA right after it */
.statement {
  padding: clamp(110px, 12vw, 170px) 0 0;
}
.statement-inner {
  /* The TY-GA nav link lands here: the statement is TY-GA's headline */
  scroll-margin-top: 84px;
  display: flex;
  justify-content: center;
  padding: 0 var(--gutter);
}
.statement-text {
  max-width: 920px;
  text-align: center;
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 600;
}
.statement-text .w {
  color: var(--text);
  opacity: .14;
  transition: opacity .35s linear, color .35s linear;
}
.statement-text .w.lit { opacity: 1; }
.statement-text .w.accent.lit { color: var(--accent); }

/* How it works (sticky phone + step counter, like nojani.com) -------------- */

.how {
  padding: clamp(96px, 14vh, 150px) 0;
}
.how-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(32px, 6vw, 120px);
}
.how-pin {
  position: sticky;
  top: 112px;
  /* phone height follows the window so the whole column always fits */
  --ph: clamp(320px, calc(100vh - 400px), 600px);
}
.how-title {
  font-size: clamp(32px, 3.2vw, 46px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 600;
}
.how-stage {
  display: flex;
  align-items: flex-end;
  gap: clamp(20px, 2.4vw, 36px);
  margin-top: clamp(28px, 5vh, 56px);
}
.how-phone {
  width: auto;
  height: var(--ph);
  aspect-ratio: 320 / 680;
  padding: calc(var(--ph) * 0.016);
  border-radius: calc(var(--ph) * 0.08);
}
.how-phone .phone-screen { border-radius: calc(var(--ph) * 0.065); }
.how-index {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 6px;
}
.how-num {
  display: inline-block;
  font-size: clamp(60px, 7vw, 100px);
  line-height: 0.8;
  font-weight: 500;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
}
.how-num.flip { animation: howFlip .6s var(--ease); }
@keyframes howFlip {
  from { transform: translateY(18%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.how-rail {
  position: relative;
  display: block;
  height: 2px;
  max-width: 160px;
  border-radius: 2px;
  background: var(--line-2);
  overflow: hidden;
}
.how-rail i {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

.how-steps {
  margin: 0;
  padding: 0 0 32vh;
  list-style: none;
  border-top: 1px solid var(--line);
}
.how-step {
  display: grid;
  grid-template-columns: 60px 1fr;
  column-gap: 24px;
  padding: clamp(40px, 9vh, 88px) 0;
  border-bottom: 1px solid var(--line);
  opacity: 0.3;
  transition: opacity .6s var(--ease);
}
.how-step.is-active { opacity: 1; }
.how-step-k {
  grid-row: span 3;
  padding-top: 12px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
}
.how-step h3 {
  margin-bottom: 18px;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.035em;
}
.how-step p {
  max-width: 46ch;
  color: var(--muted);
  font-size: 18px;
}
.how-step.is-active p { color: #c9cac4; }
.how-step-shot { display: none; }

/* Phones and small tablets: no pinning; each step shows its own screen */
@media (max-width: 860px) {
  .how-grid { grid-template-columns: 1fr; gap: 40px; }
  .how-pin { position: static; }
  .how-stage { display: none; }
  .how-steps { padding-bottom: 0; }
  .how-step { grid-template-columns: 40px 1fr; opacity: 1; }
  .how-step p { font-size: 16px; color: #c9cac4; }
  .how-step-shot {
    display: block;
    width: min(240px, 70%);
    height: auto;
    margin-top: 28px;
    border-radius: 30px;
    border: 6px solid #1f221f;
  }
}
/* Phones: a small screenshot beside each step's text instead of below it */
@media (max-width: 640px) {
  .how { padding: 72px 0; }
  .how-grid { gap: 28px; }
  .how-step {
    grid-template-columns: 28px 1fr 96px;
    column-gap: 12px;
    align-items: center;
    padding: 24px 0;
  }
  .how-step-k { grid-row: 1 / span 2; align-self: start; padding-top: 4px; }
  .how-step h3 { grid-column: 2; margin-bottom: 8px; align-self: end; }
  .how-step p { grid-column: 2; font-size: 15px; align-self: start; }
  .how-step-shot {
    grid-column: 3;
    grid-row: 1 / span 2;
    width: 96px;
    margin-top: 0;
    border-radius: 16px;
    border-width: 3px;
  }
}

/* Laptops and up: smaller headings so the page feels less zoomed in, and a
   tighter How it works. Phones and tablets keep their own sizes */
@media (min-width: 1025px) {
  .hero-title { font-size: min(5vw, 72px); }
  .statement-text { font-size: min(4vw, 56px); }
  /* Just enough room below the steps for the last one to light up */
  .how-steps { padding-bottom: 8vh; }
  .how-step { padding: clamp(32px, 6vh, 60px) 0; }
  .how-step h3 { margin-bottom: 14px; font-size: min(2vw, 28px); }
  /* Section headings share one size; the closing line sits just above them */
  .section-title { font-size: clamp(36px, 3.2vw, 46px); }
  .cta .cta-title { font-size: clamp(40px, 3.65vw, 52px); }
  /* Prices a step below the headings, a little less empty space, and a
     slightly smaller planet */
  .pricing .price b { font-size: 44px; }
  .statement { padding: 120px 0 0; }
  .tyga-section { padding-bottom: 64px; }
  .how { padding: 72px 0 64px; }
  .tyga-stage { height: 400px; }
}

/* Pricing ------------------------------------------------------------------ */

.pricing { padding: clamp(72px, 7vw, 96px) 0; }

/* Monthly / Yearly switch: the track turns green on yearly */
.billing {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: calc(-1 * clamp(16px, 3vw, 40px)) 0 48px;
}
.billing-option {
  background: none;
  border: 0;
  padding: 13px 10px;
  font: 500 17px/1 var(--sans);
  color: var(--muted);
  cursor: pointer;
  transition: color .2s;
}
.billing-option.is-active { color: var(--text); }
.billing-switch {
  position: relative;
  width: 56px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
  cursor: pointer;
  transition: background .2s;
}
.billing-switch span {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s ease;
}
.billing-switch[aria-checked="true"] { background: var(--accent); box-shadow: none; }
/* Larger invisible tap area around the switch */
.billing-switch::after { content: ""; position: absolute; inset: -6px; }
.billing-switch[aria-checked="true"] span { left: 28px; }
.billing-option:focus-visible, .billing-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.badge[hidden] { display: none; }

.plans {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 820px;
  margin: 0 auto;
  align-items: stretch;
}
.plan {
  position: relative;
  padding: 28px 26px 26px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.plan h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.price { margin-top: 14px; display: flex; align-items: baseline; gap: 6px; }
.price b { font-size: 52px; letter-spacing: -0.05em; font-weight: 600; line-height: 1; }
.price span { color: var(--muted); font-size: 15px; }
.plan-desc { margin-top: 10px; color: var(--muted); font-size: 15px; }
.plan ul {
  margin: 22px 0 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.plan li {
  font-size: 15px;
  padding-left: 26px;
  position: relative;
}
.plan li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 11px;
  height: 6px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  opacity: .7;
}
.plan .btn { width: 100%; }

/* Pro: the same panel, marked out by a green edge and a soft green glow */
.plan-featured {
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 40px 80px -40px rgba(var(--accent-rgb), 0.25);
}
.plan-featured li::before { color: var(--accent); opacity: 1; }
.badge {
  position: absolute;
  top: 26px;
  right: 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
}

@media (max-width: 760px) {
  .plans { grid-template-columns: 1fr; max-width: 480px; }
}

/* FAQ page: a list of questions that open in place, like fomo's Answers -- */

.qa-page { padding: 136px 0 clamp(80px, 9vw, 120px); }
.qa-inner { max-width: 880px; margin: 0 auto; padding: 0 var(--gutter); }
.qa-title {
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 600;
}
.qa-sub { margin-top: 12px; font-size: 18px; color: var(--muted); }
.qa-list { margin-top: 40px; display: flex; flex-direction: column; gap: 12px; }
.qa {
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color .2s;
}
.qa:hover, .qa[open] { border-color: var(--line-2); }
.qa summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 24px 64px 24px 24px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.qa summary::-webkit-details-marker { display: none; }
/* Chevron that turns down when the answer is open */
.qa summary::after {
  content: "";
  position: absolute;
  right: 28px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -5px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform .3s var(--ease);
}
.qa[open] summary::after { transform: rotate(45deg); margin-top: -8px; }
.qa summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 14px; }
.qa p {
  padding: 0 64px 24px 24px;
  color: var(--muted);
  font-size: 16.5px;
  max-width: 44em;
}
.qa-more { margin-top: 40px; color: var(--muted); font-size: 15px; }
.qa-more a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 640px) {
  .qa-page { padding-top: 112px; }
  .qa summary { padding: 20px 52px 20px 20px; font-size: 17px; }
  .qa summary::after { right: 22px; }
  .qa p { padding: 0 20px 20px; font-size: 16px; }
}

/* Privacy, Terms and Support: one readable column, numbered sections ----- */

.legal-page { padding: 136px 0 clamp(80px, 9vw, 120px); }
.legal-inner { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); }
.legal-title {
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 600;
}
.legal-date { margin-top: 12px; font-size: 14px; color: var(--dim); }
.legal-section {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.legal-num { font-family: var(--mono); font-size: 13px; color: var(--accent); }
.legal-section h2 {
  margin: 8px 0 14px;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.legal-section p,
.legal-section li { font-size: 16.5px; line-height: 1.7; color: var(--muted); }
.legal-section p + p { margin-top: 14px; }
.legal-section ul { margin: 14px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.legal-section ul + p { margin-top: 14px; }
.legal-section strong { color: var(--text); font-weight: 600; }
.legal-section a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(var(--accent-rgb), 0.6); }
.legal-section a:hover { text-decoration-color: var(--accent); }
.legal-callout {
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  background: rgba(var(--accent-rgb), 0.06);
}

@media (max-width: 640px) {
  .legal-page { padding-top: 112px; }
  .legal-section p, .legal-section li { font-size: 16px; }
}

/* 404: a short centred message with the hero buttons ------------------- */

.notfound { min-height: 72vh; display: grid; place-items: center; padding: 136px 0 96px; text-align: center; }
.notfound-inner { max-width: 680px; padding: 0 var(--gutter); }
.notfound-text { max-width: 30em; margin-left: auto; margin-right: auto; }
.notfound-title { font-size: clamp(34px, 4vw, 48px); line-height: 1.05; letter-spacing: -0.04em; font-weight: 600; }
.notfound-text { margin-top: 16px; font-size: 17px; color: var(--muted); }
.notfound .hero-ctas { margin-top: 32px; }
@media (max-width: 640px) {
  /* Both buttons on phones here: they lead to different places */
  .notfound .hero-btn-primary { display: inline-flex; }
  .notfound .hero-ctas { flex-wrap: wrap; }
}

@keyframes loginFade { from { opacity: 0; } }

/* Slide-out panels (Log in / Sign up, and the Android waitlist): a light
   panel that slides in from the right edge, full height, like taylormade.com:
   tabs with a bold underline, a square black main button and white cards.
   No live blur so it slides smoothly */
.signin {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(400px, 100%);
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0 28px 24px;
  border: 0;
  background: #f5f5f4;
  color: #111;
  overflow-y: auto;
  box-shadow: -30px 0 60px -20px rgba(0, 0, 0, 0.7);
}
.signin[open] { display: flex; flex-direction: column; animation: signinIn .38s var(--ease); }
.signin.closing { animation: signinOut .26s ease-in forwards; }
.signin::backdrop { background: rgba(0, 0, 0, 0.66); }
.signin[open]::backdrop { animation: loginFade .3s ease-out; }
.signin.closing::backdrop { animation: signinFadeOut .26s ease-in forwards; }
@keyframes signinIn { from { transform: translateX(100%); } }
@keyframes signinOut { to { transform: translateX(100%); } }
@keyframes signinFadeOut { to { opacity: 0; } }
.signin-top { display: flex; align-items: center; justify-content: space-between; height: 68px; flex: none; }
.signin-brand { display: inline-flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 700; letter-spacing: -0.03em; }
.signin-brand img { width: 28px; height: 28px; border-radius: 7px; }
.signin-close { display: grid; place-items: center; width: 40px; height: 40px; margin-right: -8px; border: 0; background: none; color: #111; cursor: pointer; transition: opacity .2s; }
.signin-close:hover { opacity: 0.6; }
.signin-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.signin-tabs { display: flex; gap: 28px; margin-top: 4px; }
.signin-tabs button {
  position: relative;
  padding: 6px 0 10px;
  border: 0;
  background: none;
  color: #111;
  font: 700 17px/1 var(--sans);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  cursor: pointer;
}
.signin-heading { position: relative; padding: 6px 0 10px; font: 700 17px/1 var(--sans); letter-spacing: 0.01em; text-transform: uppercase; }
.signin-heading::after,
.signin-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #111; }
.signin-tabs button[aria-selected="false"] { color: #555; }
.signin-tabs button[aria-selected="false"]:hover { color: #111; }
.signin-pane { margin-top: 22px; }
.signin-hint { font-size: 14px; line-height: 1.5; color: #555; text-wrap: pretty; }
.signin-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  margin-top: 18px;
  background: #000;
  color: #fff;
  font: 700 13px/1 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background-color .2s;
}
.signin-main:hover { background: #262626; }
button.signin-main { width: 100%; border: 0; cursor: pointer; }
button.signin-main:disabled { opacity: 0.6; cursor: default; }
.signin-main svg { width: 17px; height: 17px; margin-top: -3px; fill: currentColor; }
.signin-or { margin-top: 24px; font-size: 13px; color: #222; }
.signin-google {
  display: grid;
  place-items: center;
  height: 64px;
  margin-top: 10px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 4px 12px -4px rgba(0, 0, 0, 0.12);
  transition: box-shadow .2s;
}
.signin-google:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 10px 20px -8px rgba(0, 0, 0, 0.2); }
.signin-google svg { width: 30px; height: 30px; }
.signin-card {
  margin-top: 16px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.signin-card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid #d9d9d9;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.signin-card h3 svg { width: 18px; height: 18px; fill: none; stroke: #111; stroke-width: 2; stroke-linecap: round; }
.signin-card h3 circle { fill: #111; stroke: none; }
.signin-card p { padding: 14px 20px 18px; font-size: 14px; line-height: 1.5; color: #222; }
.signin-steps { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 12px; }
.signin-steps li { counter-increment: step; display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.4; }
.signin-steps li::before { content: counter(step); flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #111; color: #fff; font-size: 12px; font-weight: 700; }
.signin-switch { margin-top: 8px; padding: 0; border: 0; background: none; color: #111; font: 700 14px/1.4 var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.signin-legal { margin-top: auto; padding-top: 28px; font-size: 12px; line-height: 1.5; color: #666; }
.signin-legal a { color: #111; text-decoration: underline; text-underline-offset: 2px; }
.signin-close:focus-visible, .signin-tabs button:focus-visible, .signin-main:focus-visible, .signin-google:focus-visible, .signin-switch:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
@media (max-width: 640px) {
  .signin { padding: 0 20px 20px; }
  .signin-top { height: 64px; }
}

/* Android waitlist panel: a square white email field above the black button,
   like the fields on taylormade.com. The trap field is for spam bots and
   never shows */
.waitlist-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.waitlist-form { margin-top: 18px; }
.waitlist-form input[type="email"] {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1px solid #c9c9c9;
  background: #fff;
  color: #111;
  font: 500 15px/1 var(--sans);
  outline: none;
  transition: border-color .2s;
}
.waitlist-form input[type="email"]::placeholder { color: #777; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.waitlist-form input[type="email"]:focus { border-color: #111; }
.waitlist-form .signin-main { margin-top: 12px; }
.waitlist-error { margin-top: 12px; font-size: 13px; line-height: 1.45; color: #c62828; }
.waitlist-done { margin-top: 18px; padding: 14px 16px; border-left: 3px solid #1a9e4f; background: #fff; font-size: 14px; line-height: 1.5; color: #222; }
.waitlist-done b { color: #12803f; font-weight: 700; }
.signin-store {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 64px;
  margin-top: 10px;
  border-radius: 12px;
  background: #fff;
  color: #111;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 4px 12px -4px rgba(0, 0, 0, 0.12);
  transition: box-shadow .2s;
}
.signin-store:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 10px 20px -8px rgba(0, 0, 0, 0.2); }
.signin-store svg { width: 20px; height: 20px; margin-top: -3px; fill: #000; }
.signin-store:focus-visible { outline: 2px solid #111; outline-offset: 3px; }

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

.cta {
  position: relative;
  overflow: hidden;
  padding: clamp(88px, 9vw, 120px) 0;
  text-align: center;
}
.cta-glow {
  position: absolute;
  left: 50%;
  bottom: -40%;
  width: min(1100px, 160vw);
  aspect-ratio: 2;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.2), transparent 70%);
  pointer-events: none;
}
/* Fade the glow into the footer instead of cutting it off at the section edge */
.cta::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg));
  pointer-events: none;
}
.cta-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.cta-title {
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 0.98;
  letter-spacing: -0.05em;
  font-weight: 600;
}
.cta .lead { margin-left: auto; margin-right: auto; }
.cta-actions { margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.store-btn-play svg { width: 26px; height: 28px; }
.store-btn-play small { letter-spacing: 0.04em; }
/* Phones: both store buttons side by side, a little smaller */
@media (max-width: 640px) {
  .cta-actions .store-btn { height: 52px; gap: 9px; padding: 0 16px 0 13px; border-radius: 13px; }
  .cta-actions .store-btn svg { width: 22px; height: 24px; }
  .cta-actions .store-btn span { font-size: 17px; }
  .cta-actions .store-btn small { font-size: 9.5px; }
}

.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding: 0 26px 0 20px;
  border-radius: 16px;
  background: var(--text);
  color: var(--ink);
  transition: transform .3s var(--ease), box-shadow .3s;
}
.store-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -20px rgba(var(--accent-rgb), 0.6); }
.store-btn svg { width: 28px; height: 28px; fill: currentColor; }
.store-btn span { display: flex; flex-direction: column; text-align: left; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }
.store-btn small { font-size: 11px; font-weight: 500; letter-spacing: 0; }
.store-note { margin-top: 16px; font-size: 14px; color: var(--dim); }

/* Footer: edge to edge like fomo.family, wordmark left, link columns right */

.footer {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  padding: 32px 40px 48px;
}
/* The name as plain text (no icon, unlike the nav), with a quiet tagline and copyright */
.footer-logo span { font-size: 17px; }
.footer-tagline {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--muted);
}
.footer-copy { margin-top: 16px; font-size: 13px; color: var(--dim); }
.footer-cols { display: flex; flex-shrink: 0; }
.footer-col { display: flex; flex-direction: column; gap: 8px; width: 168px; }
.footer-col h4 {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-transform: uppercase;
  color: #4a4c4b;
}
.footer-col a { font-size: 14px; line-height: 20px; font-weight: 500; color: #f7f7f7; transition: opacity .2s; }
.footer-col a:hover { opacity: 0.6; }

/* Tablets and phones: everything stacks, the copyright moves to the end */
@media (max-width: 900px) {
  .footer { flex-direction: column; gap: 0; }
  .footer-brand { display: contents; }
  .footer-cols { flex-direction: column; gap: 32px; margin-top: 40px; }
  .footer-copy { order: 3; margin-top: 40px; }
  .footer-col { width: auto; }
}
@media (max-width: 640px) {
  .footer { padding: 32px 24px 48px; }
  /* Taller tap areas for the footer links */
  .footer-col { gap: 0; }
  .footer-col h4 { margin-bottom: 4px; }
  .footer-col a { padding: 10px 0; }
}

/* Touch screens: buttons press in and links dim while tapped ------------ */
@media (hover: none) {
  a, button, summary { -webkit-tap-highlight-color: transparent; }
  .hero-btn, .store-btn, .btn, .get-bar-btn, .nav-menu, .nav-store, .nav-login,
  .tyga-player, .tyga-mic, .billing-switch, .billing-option, .signin-main, .signin-google, .signin-store {
    transition: transform .12s ease, opacity .12s ease;
  }
  .hero-btn:active, .store-btn:active, .btn:active, .get-bar-btn:active, .nav-menu:active,
  .nav-store:active, .nav-login:active, .tyga-player:active, .tyga-mic:active,
  .billing-switch:active, .signin-main:active, .signin-google:active, .signin-store:active {
    transform: scale(.96);
    opacity: .8;
  }
  .nav-panel a:active, .footer-col a:active, .qa summary:active { opacity: .6; }
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero-media.photo-wait { opacity: 1; translate: none; }
  .hero-media.cards-ready .float-card { opacity: 1; translate: none; }
  .callout { opacity: 1; }
}

/* Phones: a tighter layout --------------------------------------------- */
@media (max-width: 640px) {
  /* Statement: less blank space around the line */
  .statement { padding: 72px 0 0; }
  /* Pricing: tighter heading, switch and cards; prices just above the heading size */
  .pricing .section-head { margin-bottom: 32px; }
  .billing { margin: -8px 0 28px; }
  .plan { padding: 28px 22px 24px; }
  .pricing .price b { font-size: 34px; }
  /* Pro first, so it's the plan phone visitors see */
  .plan-featured { order: -1; }
  /* Closing download section */
  .cta { padding: 64px 0; }
}