/* SVJ Talent — custom overrides on Tailwind CDN */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01"; }

.font-display { letter-spacing: -0.01em; line-height: 0.9; }
.font-script { font-family: 'Satisfy', cursive; line-height: 0.9; letter-spacing: -0.02em; }

details summary::-webkit-details-marker { display: none; }
details summary::marker { display: none; }
details > *:not(summary) { animation: detail-open 0.2s ease-out; }
@keyframes detail-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

::selection { background: #D4FF3C; color: #0A0A0B; }

section[id] { scroll-margin-top: 8rem; }

.font-display.text-5xl, .font-display.text-6xl, .font-display.text-7xl, .font-display.text-8xl { font-feature-settings: "lnum"; }

@media (max-width: 640px) {
  .font-display.text-8xl { font-size: 3.5rem; line-height: 0.92; }
  .font-display.text-7xl { font-size: 2.85rem; line-height: 0.92; }
  .font-display.text-6xl { font-size: 2.4rem; line-height: 0.95; }
  .font-display.text-5xl { font-size: 1.95rem; line-height: 1; }
  .font-display.text-4xl { font-size: 1.65rem; line-height: 1.05; }

  /* Section rhythm — breathing room, not cramped */
  section.py-24 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  section.py-16 { padding-top: 3rem; padding-bottom: 3rem; }
  section.py-32 { padding-top: 4rem; padding-bottom: 4rem; }
  article.pt-40 { padding-top: 6rem; }

  /* Horizontal breathing */
  .px-6 { padding-left: 1.25rem; padding-right: 1.25rem; }

  /* iOS-standard 44px tap target */
  a, button { min-height: 44px; }

  /* Inline CTAs more refined — not full-width scream */
  section a.bg-accent.px-10, section a.bg-accent.px-8 {
    width: auto;
    display: inline-block;
    padding: 1rem 2rem;
    font-size: 1.05rem;
  }

  /* Hero primary CTA stays prominent but centered */
  section:first-of-type .flex.flex-wrap a.bg-accent { width: 100%; max-width: 420px; text-align: center; }

  /* Prevent overflow */
  body { overflow-x: hidden; }

  /* Bottom padding for floating CTA clearance */
  body { padding-bottom: 5.5rem; }

  /* Premium refinement: tighter letter-spacing on labels */
  .uppercase.tracking-widest { letter-spacing: 0.15em; }
  .uppercase.tracking-\[0\.2em\] { letter-spacing: 0.18em; }
}

/* iPhone notch / safe-area handling */
@supports (padding: max(0px)) {
  .floating-cta {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    margin-bottom: max(0px, env(safe-area-inset-bottom));
  }
}

/* Prevent accidental zoom on iOS form focus */
@media (max-width: 640px) {
  input, textarea, select { font-size: 16px !important; }
}

/* Mobile nav Apply button — right-sized for the header */
@media (max-width: 768px) {
  nav a.bg-accent {
    font-size: 0.8rem;
    padding: 0.45rem 0.9rem;
    min-height: 36px;
  }
  /* Wordmark scale on mobile — slightly tighter to balance */
  .wordmark .w-svj { font-size: 1.5rem; }
  .wordmark .w-talent { font-size: 1.35rem; }
}
@media (max-width: 480px) {
  nav a.bg-accent {
    font-size: 0.78rem;
    padding: 0.4rem 0.85rem;
  }
  .wordmark .w-svj { font-size: 1.35rem; }
  .wordmark .w-talent { font-size: 1.2rem; }
}

/* Banner — make it readable on mobile, not just a thin strip */
@media (max-width: 640px) {
  .banner-pulse { font-size: 0.72rem; padding: 0.5rem 0.75rem; }
}

/* Ensure buttons don't wrap awkwardly */
a.rounded-full { white-space: nowrap; }

a:focus-visible, button:focus-visible { outline: 2px solid #D4FF3C; outline-offset: 2px; border-radius: 4px; }
.font-display { font-display: swap; }

/* Mobile tap feedback — subtle scale + brightness dip on press (premium-feeling alternative to hover) */
@media (hover: none) and (pointer: coarse) {
  a.bg-accent:active, button.bg-accent:active {
    transform: scale(0.97);
    filter: brightness(0.92);
    transition: transform 0.1s ease, filter 0.1s ease;
  }
  a:not(.bg-accent):active {
    opacity: 0.7;
    transition: opacity 0.1s ease;
  }
  details summary:active { opacity: 0.7; }
}

/* Premium active states on all devices — small, tactile */
a.bg-accent, button.bg-accent { transition: transform 0.15s ease, background-color 0.2s ease, filter 0.15s ease; }
a.bg-accent:active, button.bg-accent:active { transform: scale(0.98); }

/* Top announcement banner — static, premium. Research: premium audiences dislike flashing UI */
.banner-pulse { animation: none; }
@media (max-width: 640px) {
  .banner-pulse { font-size: 0.68rem; padding: 0.45rem 0.75rem; letter-spacing: 0.01em; }
  .banner-pulse a { font-weight: 700; }
}

/* Floating mobile CTA — refined premium shadow, centered narrow */
.floating-cta {
  box-shadow: 0 10px 32px rgba(10, 10, 11, 0.4), 0 0 0 1px rgba(212, 255, 60, 0.15);
  backdrop-filter: blur(8px);
  letter-spacing: 0.01em;
}
@media (max-width: 640px) {
  .floating-cta {
    left: 1rem !important;
    right: 1rem !important;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0.9rem !important;
    padding-bottom: 0.9rem !important;
    font-size: 1rem !important;
    box-shadow: 0 8px 24px rgba(10, 10, 11, 0.6);
  }
}

/* Wordmark layout */
.wordmark { display: flex; align-items: baseline; gap: 0.25rem; line-height: 1; }
.wordmark .w-svj { font-family: 'Anton', sans-serif; font-size: 1.75rem; letter-spacing: 0.02em; }
.wordmark .w-talent { font-family: 'Satisfy', cursive; font-size: 1.5rem; color: #D4FF3C; line-height: 0.8; }

/* Mobile only: visual-center wordmark with Apply button. Font metrics (Anton + Satisfy)
   put wordmark baseline higher than button center — transform shifts without affecting layout. */
@media (max-width: 768px) {
  nav .wordmark { transform: translateY(8px); }
}

/* Breathing room beneath fixed nav+banner — tuned to banner(~30px) + nav(64px) + small buffer */
.nav-offset { padding-top: 6.5rem; }
@media (min-width: 768px) { .nav-offset { padding-top: 7rem; } }

/* ========================================================================
   Premium scroll-reveal (only applied by JS to below-fold elements).
   Reference: the Linear.app / Vercel / Stripe pattern — gentle 12px lift
   with a 600ms ease-out. Not "info-product" glow/bounce — restrained.
   - Only below-fold on load, so hero stays instant
   - Fires once per element (unobserve after reveal)
   - Respects prefers-reduced-motion (accessibility baseline)
   - No-JS users see everything normally (class is only added at runtime)
   ======================================================================== */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ========================================================================
   MOBILE CONVERSION POLISH (≤ 640px)
   Tuned for iPhone SE (375×667) → iPhone 15 Pro Max (430×932).
   Target: #1 in niche mobile feel — editorial, tactile, conversion-optimized.
   Priorities, in order:
     1. Legibility in sunlight
     2. Hero CTA visible within first 1.2 screens
     3. Tap-friendly interactive hierarchy (primary ≫ secondary)
     4. Card content breathes without wasting viewport
     5. Typography that feels editorial, not marketing-template
   ======================================================================== */
@media (max-width: 640px) {

  /* -- HARD overflow containment: no child may ever exceed viewport width.
     Belt-and-suspenders since any stray class could break layout on
     small phones. `100vw` on iOS Safari excludes the scrollbar.            */
  html, body { max-width: 100vw; overflow-x: hidden; }

  /* -- Text overflow safety: any paragraph must wrap at word boundaries
     and never push its parent wider. Also handles long URLs/emails/handles. */
  main p, main li, main h1, main h2, main h3 {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: none;
  }

  /* -- CRITICAL: Any .grid using only `md:grid-cols-*` has no mobile column
     definition, so CSS grid auto-sizes tracks to content (→ overflow).
     Force single-column fallback unless an explicit mobile grid-cols-* is
     present. Tailwind's own grid-cols-N classes win via :not() exclusion. */
  .grid:not(.grid-cols-1):not(.grid-cols-2):not(.grid-cols-3):not(.grid-cols-4):not(.grid-cols-5):not(.grid-cols-6):not(.grid-cols-12) {
    grid-template-columns: minmax(0, 1fr);
  }

  /* -- Display typography: commanding but not shouty. Fixed sizes (clamps
     don't help in the narrow 375-430px range). Tighter letter-spacing
     reads as editorial/premium, not marketing-template.                    */
  .font-display.text-8xl { font-size: 3.75rem; line-height: 0.93; letter-spacing: -0.018em; }
  .font-display.text-7xl { font-size: 3rem;    line-height: 0.93; letter-spacing: -0.015em; }
  .font-display.text-6xl { font-size: 2.55rem; line-height: 0.95; letter-spacing: -0.012em; }
  .font-display.text-5xl { font-size: 2.05rem; line-height: 1;    letter-spacing: -0.005em; }
  .font-display.text-4xl { font-size: 1.75rem; line-height: 1.05; }
  .font-display.text-3xl { font-size: 1.45rem; line-height: 1.1; }

  /* -- Body reading: bump contrast for sunlight legibility + tighter rhythm  */
  main p.text-xl { font-size: 1.0625rem; line-height: 1.55; }
  main p.text-lg { font-size: 1rem; line-height: 1.55; }
  main p.text-cream\/70, main p.text-cream\/60 { color: rgba(245, 243, 238, 0.82); }

  /* -- Card interior padding: 32px (p-8) wastes viewport on mobile. 22px
     feels generous but not cramped. Applies to all informational cards.    */
  .rounded-2xl.p-8 { padding: 1.375rem; }
  .rounded-2xl.p-10 { padding: 1.625rem; }
  .rounded-2xl.p-6 { padding: 1.125rem; }

  /* -- Grid rhythm: default Tailwind gaps are fine when cards stack
     vertically on mobile — leave alone to preserve breathing room.
     Only tighten the very large desktop gaps (gap-10) where they'd
     feel like disconnected islands when stacked.                           */
  .grid.gap-10 { gap: 1.5rem; }

  /* -- Hero ergonomics: small micro-copy below the CTA eats vertical real
     estate on iPhone SE. Slightly tighter so CTA sits in the thumb zone.   */
  section:first-of-type .mb-8 { margin-bottom: 1.25rem; }
  section:first-of-type h1.font-display { margin-bottom: 1.125rem; }

  /* -- Primary CTA: larger, more tactile, clearer dominance over secondary.
     max-width clamped so it can never exceed viewport content area even if
     parent is unexpectedly wider (iPhone SE = 375 - px-6 = 327px content). */
  section:first-of-type .flex.flex-wrap a.bg-accent {
    width: 100%;
    max-width: min(420px, calc(100vw - 2.5rem));
    text-align: center;
    padding: 1.1rem 2rem;
    font-size: 1.1rem;
    letter-spacing: 0.005em;
    border-radius: 999px;
  }

  /* -- Eyebrow labels: premium tighter tracking + slight uppercase polish   */
  p.uppercase.text-xs { font-size: 0.7rem; }
  p.uppercase.text-accent { letter-spacing: 0.18em; }

  /* -- Details/accordion (FAQ + objections): larger tap target + smoother
     reveal interior padding matches card padding for consistency          */
  details.rounded-2xl { padding: 1.125rem 1rem; }
  details.rounded-2xl > summary { padding: 0.25rem 0; }
  details[open].rounded-2xl { padding-bottom: 1.25rem; }

  /* -- Dividers: thinner hairlines read more editorial on small screens    */
  .border-t, .border-b { border-color: rgba(31, 31, 33, 0.85); }

  /* -- Section headline: slight extra breathing under eyebrow for rhythm   */
  section h2.font-display { margin-top: 0.125rem; }

  /* -- Footer: stack tighter, keep legal text legible                      */
  footer .grid-cols-2 { gap: 0.75rem 1.5rem; }
  footer p.text-xs { font-size: 0.7rem; line-height: 1.5; }

  /* -- Inline strong tag in paragraphs should read as emphasized, not as
     shouting — tiny weight bump with color tight to cream                  */
  main p strong.text-cream { font-weight: 600; }
}

/* ========================================================================
   Very small phones (iPhone SE gen 1/2 and similar at 320-360px)
   Drop one more notch so layout never feels cramped.
   ======================================================================== */
@media (max-width: 380px) {
  .font-display.text-8xl { font-size: 3.1rem;  line-height: 0.95; }
  .font-display.text-7xl { font-size: 2.55rem; line-height: 0.95; }
  .font-display.text-6xl { font-size: 2.2rem;  line-height: 0.98; }
  .font-display.text-5xl { font-size: 1.85rem; }
  section.py-24, section.py-32 { padding-top: 3rem; padding-bottom: 3rem; }
  .rounded-2xl.p-8 { padding: 1.125rem; }
  section:first-of-type .flex.flex-wrap a.bg-accent { font-size: 1rem; padding: 1rem 1.75rem; }
}

/* ========================================================================
   Tap ergonomics across all mobile: every interactive element gets
   subtle pressed-state to feel tactile (native-app feel, not web-form).
   ======================================================================== */
@media (hover: none) and (pointer: coarse) {
  details.rounded-2xl summary {
    transition: opacity 120ms ease;
  }
  details.rounded-2xl summary:active { opacity: 0.65; }

  /* Card links: subtle press feedback */
  a.rounded-2xl:active { transform: scale(0.985); transition: transform 100ms ease; }
}