/* Squee Fit landing — links, buttons, and card hovers */

.landing {
  --squee-matcha: #7f9a53;
  --squee-matcha-dark: #6b8547;
  --squee-gyokuro: #e9f2db;
  --squee-text: #3a3a3a;
  --squee-muted: #6e6e78;
  --squee-orange: #ff6b35;
  --squee-guava: #e27279;
  --squee-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
  scroll-behavior: smooth;
}

/* ── Nav text links ── */
.landing [data-name='Link'].landing-link {
  cursor: pointer;
  text-decoration: none;
  position: relative;
  padding: 4px 0;
  transition: color 0.2s var(--squee-ease);
}

.landing [data-name='Link'].landing-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--squee-matcha), var(--squee-orange));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--squee-ease);
}

.landing [data-name='Link'].landing-link:hover,
.landing [data-name='Link'].landing-link:focus-visible {
  color: var(--squee-matcha);
}

.landing [data-name='Link'].landing-link:hover p,
.landing [data-name='Link'].landing-link:focus-visible p {
  color: var(--squee-matcha) !important;
}

.landing [data-name='Link'].landing-link:hover::after,
.landing [data-name='Link'].landing-link:focus-visible::after {
  transform: scaleX(1);
}

/* ── Footer links ── */
.landing .landing-footer-link {
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  display: inline-block;
  position: relative;
  text-decoration: none;
  transition:
    color 0.2s var(--squee-ease),
    transform 0.2s var(--squee-ease);
}

.landing .landing-footer-link::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 50%;
  width: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--squee-orange);
  transform: translateY(-50%);
  transition: width 0.2s var(--squee-ease);
}

.landing .landing-footer-link:hover,
.landing .landing-footer-link:focus-visible {
  color: #fff;
  transform: translateX(4px);
}

.landing .landing-footer-link:hover::before,
.landing .landing-footer-link:focus-visible::before {
  width: 6px;
}

/* ── Logo ── */
.landing .landing-logo {
  cursor: pointer;
  display: block;
  text-decoration: none;
  transition:
    transform 0.25s var(--squee-ease),
    filter 0.25s var(--squee-ease);
}

.landing .landing-logo:hover,
.landing .landing-logo:focus-visible {
  transform: scale(1.03);
  filter: brightness(1.08);
}

/* ── Green pill CTA ── */
.landing [data-name='Button'].landing-btn-cta {
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color 0.2s var(--squee-ease),
    box-shadow 0.25s var(--squee-ease),
    transform 0.2s var(--squee-ease);
}

.landing [data-name='Button'].landing-btn-cta:hover,
.landing [data-name='Button'].landing-btn-cta:focus-visible {
  background-color: var(--squee-matcha-dark);
  box-shadow: 0 8px 24px rgba(107, 154, 73, 0.35);
  transform: translateY(-2px);
}

.landing [data-name='Button'].landing-btn-cta:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(107, 154, 73, 0.25);
}

/* ── Dark store buttons (hero) ── */
.landing [data-name='Button'].landing-btn-store-dark {
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color 0.2s var(--squee-ease),
    box-shadow 0.25s var(--squee-ease),
    transform 0.2s var(--squee-ease);
}

.landing [data-name='Button'].landing-btn-store-dark:hover,
.landing [data-name='Button'].landing-btn-store-dark:focus-visible {
  background-color: #2a2a2a;
  box-shadow: 0 10px 28px rgba(58, 58, 58, 0.28);
  transform: translateY(-3px);
}

.landing [data-name='Button'].landing-btn-store-dark:active {
  transform: translateY(-1px);
}

/* ── White store buttons (final CTA) ── */
.landing [data-name='Button'].landing-btn-store-light {
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color 0.2s var(--squee-ease),
    box-shadow 0.25s var(--squee-ease),
    transform 0.2s var(--squee-ease);
}

.landing [data-name='Button'].landing-btn-store-light:hover,
.landing [data-name='Button'].landing-btn-store-light:focus-visible {
  background-color: #f8f8f3;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  transform: translateY(-3px);
}

.landing [data-name='Button'].landing-btn-store-light:active {
  transform: translateY(-1px);
}

/* ── Workout category cards ── */
.landing [data-name='Container413'] > [data-name='Container'] {
  cursor: default;
  transition:
    transform 0.25s var(--squee-ease),
    box-shadow 0.25s var(--squee-ease);
}

.landing [data-name='Container413'] > [data-name='Container']:hover {
  box-shadow: 0 12px 28px rgba(58, 58, 58, 0.1);
  transform: translateY(-4px);
}

.landing [data-name='Container413'] > [data-name='Container']:hover > [data-name='Container'] {
  transform: scale(1.06);
  transition: transform 0.25s var(--squee-ease);
}

/* ── Problem / solution cards ── */
.landing [data-name='WhyQuitSection'] .landing-problem-card,
.landing [data-name='WhyQuitSection'] .landing-solution-card {
  transition:
    transform 0.25s var(--squee-ease),
    box-shadow 0.25s var(--squee-ease);
}

.landing [data-name='WhyQuitSection'] .landing-problem-card:hover {
  box-shadow: 0 8px 24px rgba(226, 114, 121, 0.12);
  transform: translateY(-2px);
}

.landing [data-name='WhyQuitSection'] .landing-solution-card:hover {
  box-shadow: 0 8px 24px rgba(107, 154, 73, 0.16);
  transform: translateY(-2px);
}

/* ── Focus ring (keyboard) ── */
.landing a:focus-visible,
.landing [data-name='Button']:focus-visible {
  outline: 2px solid var(--squee-orange);
  outline-offset: 3px;
}