/* ───────────── shared site styles ───────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg-1); color: var(--fg-1); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; }
::selection { background: var(--color-brand-mint); color: var(--color-brand-deep); }

/* Subtle reveal on scroll */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

/* Button base reset for cleaner JSX */
button { font: inherit; cursor: pointer; }
a { color: inherit; }

/* Tiny shimmer for "live" dots */
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.55; }
}
.pulse-dot { animation: pulse-dot 1.6s var(--ease-out) infinite; }

/* Marquee for trust strip */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { animation: marquee 38s linear infinite; }

/* Phone bobbing */
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.bob { animation: bob 5s var(--ease-out) infinite; }

/* Modal pop-in */
@keyframes pop-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* Burger button only visible on small screens */
.nav-burger { display: none !important; }

/* ───────────── RESPONSIVE — tablet (≤980) ───────────── */
@media (max-width: 980px) {
  :root { --container-pad: 20px; }

  /* Two-column grids stack */
  .two-col-grid,
  .hero-grid,
  .download-grid,
  .faq-grid {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
  .partner-card {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 40px 36px !important;
  }

  /* Three-column grids to 2-up */
  .stats-grid,
  .steps-grid,
  .salons-grid,
  .testimonials-grid,
  .fs-promises {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Footer to 2-up; brand col spans full width */
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 40px 32px !important;
  }
  .footer-grid > :first-child { grid-column: 1 / -1; }

  /* Big display type scales down */
  .hero-h1 { font-size: 56px !important; letter-spacing: -1px !important; }
  .section-h2,
  .section-h2-mid { font-size: 40px !important; letter-spacing: -0.6px !important; }
  .section-h2-big { font-size: 48px !important; letter-spacing: -1px !important; }
  .stat-num { font-size: 52px !important; letter-spacing: -1.4px !important; }

  /* Hero phone shrinks */
  .hero-phone { min-height: 540px !important; }
  .hero-phone-img { width: 280px !important; }
  .step-img { width: 220px !important; }
  .side-visual { min-height: 520px !important; }

  /* Section padding */
  .sec-pad { padding: 72px 0 !important; }
  .sec-hero { padding: 40px 0 64px !important; }
}

/* ───────────── RESPONSIVE — mobile (≤720) ───────────── */
@media (max-width: 720px) {
  :root { --container-pad: 18px; }

  /* Nav collapses */
  .nav-links { display: none !important; }
  .nav-list-salon { display: none !important; }
  .nav-get-app { display: none !important; }
  .nav-burger { display: inline-flex !important; background: #fff !important; }
  .nav-sheet { display: flex !important; }

  /* Single column everywhere */
  .stats-grid,
  .steps-grid,
  .salons-grid,
  .testimonials-grid,
  .fs-promises,
  .fs-list {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .stats-grid { gap: 14px !important; }

  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  /* Display type for phone */
  .hero-h1 { font-size: 42px !important; letter-spacing: -0.8px !important; line-height: 1.05 !important; }
  .hero-sub { font-size: 17px !important; margin-top: 16px !important; }
  .section-h2 { font-size: 30px !important; letter-spacing: -0.4px !important; }
  .section-h2-mid { font-size: 28px !important; letter-spacing: -0.4px !important; }
  .section-h2-big { font-size: 36px !important; letter-spacing: -0.8px !important; }
  .stat-num { font-size: 44px !important; letter-spacing: -1px !important; }
  .tanglish-headline { font-size: 32px !important; line-height: 1.25 !important; }
  .tanglish-sub { font-size: 17px !important; }
  .tanglish-bg { font-size: 120px !important; }

  /* Hide non-essential floating chrome on tiny viewports */
  .hero-float { display: none !important; }

  /* Phone scaling */
  .hero-phone { min-height: 460px !important; }
  .hero-phone-img { width: 240px !important; }
  .step-img { width: 220px !important; }
  .side-visual { min-height: 460px !important; }

  /* Section rhythm */
  .sec-pad { padding: 56px 0 !important; }
  .sec-hero { padding: 24px 0 48px !important; }

  /* Partner card */
  .partner-card { padding: 32px 22px !important; }

  /* Section header row stacks; "See all" button left-aligns under heading */
  .section-header-row { align-items: flex-start !important; }
}

/* Tiny screens (≤380) — squeeze type a notch more */
@media (max-width: 380px) {
  .hero-h1 { font-size: 36px !important; }
  .section-h2 { font-size: 26px !important; }
  .section-h2-big { font-size: 30px !important; }
  .stat-num { font-size: 40px !important; }
}

/* Salons map — chip + legend + ribbon mobile tweaks */
@media (max-width: 720px) {
}

/* ───────────── Legal pages ───────────── */
.legal-body a {
  color: var(--color-brand-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}
.legal-body a:hover { color: var(--color-brand-green); }
.legal-body b, .legal-body strong { color: var(--color-ink); font-weight: 700; }
.legal-body p > b:first-child { color: var(--color-brand-deep); }
.legal-body ul li b:first-child,
.legal-body ul li strong:first-child { color: var(--color-brand-deep); }