/* ==========================================================================
   SPRYQ Landing Page — Production CSS
   Apple × Stripe × Premium B2B × AI-Native
   Mobile-first responsive design
   ========================================================================== */

/* ===== CUSTOM PROPERTIES ===== */
:root {
  --spryq-orange: #FF5A1F;
  --bg: #F5F5F7;
  --white: #FFFFFF;
  --ink: #1D1D1F;
  --muted: #6E6E73;
  --light-orange: #FFF0E8;
  --dark-bg: #111111;
  --dark-text: #F5F5F7;
  --border: rgba(0,0,0,0.06);
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
  --nav-height: 56px;
  --container: 1200px;
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-family: var(--font);
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
}

body { overflow-x: hidden; line-height: 1.6; width: 100%; }
body.mobile-menu-open { overflow: hidden; }

img, picture, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { background: none; border: none; font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

/* ===== LAYOUT ===== */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 768px) { .container { padding: 0 40px; } }
@media (min-width: 1200px) { .container { padding: 0 24px; } }

/* ===== ANIMATION KEYFRAMES ===== */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes checkDraw {
  to { stroke-dashoffset: 0; }
}
@keyframes progressBar {
  from { width: 0; }
  to { width: 100%; }
}

/* ===== SCROLL REVEAL ===== */
.reveal {
  opacity: 0;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.visible { opacity: 1; }
.reveal-up { transform: translateY(32px); }
.reveal-up.visible { transform: translateY(0); }
.reveal-fade { transform: none; }
.reveal-scale { transform: scale(0.96); }
.reveal-scale.visible { transform: scale(1); }
.reveal-left { transform: translateX(-32px); }
.reveal-left.visible { transform: translateX(0); }
.reveal-right { transform: translateX(32px); }
.reveal-right.visible { transform: translateX(0); }

.stagger-1 { transition-delay: 80ms; }
.stagger-2 { transition-delay: 160ms; }
.stagger-3 { transition-delay: 240ms; }
.stagger-4 { transition-delay: 320ms; }
.stagger-5 { transition-delay: 400ms; }
.stagger-6 { transition-delay: 480ms; }
.stagger-7 { transition-delay: 560ms; }
.stagger-8 { transition-delay: 640ms; }

/* Page load animation elements */
.load-animate { opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.load-animate.visible { opacity: 1; transform: translateY(0); }

/* ===== SECTION LABELS ===== */
.section-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 32px;
}
.section-label--dark { color: rgba(255,255,255,0.4); }

.section-headline {
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin-bottom: 24px;
}
.section-headline--large {
  font-size: clamp(40px, 6vw, 80px);
}
.section-headline em, .form-headline em {
  font-style: normal;
  color: var(--muted);
}
.section-subtitle {
  font-size: clamp(16px, 2.5vw, 20px);
  color: var(--muted);
  max-width: 600px;
}
.required { color: var(--spryq-orange); }


/* ==========================================================================
   1. NAVIGATION
   ========================================================================== */
.nav-wrapper {
  position: fixed;
  top: 16px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 1000;
  padding: 0 12px;
  pointer-events: none;
}
@media (min-width: 768px) { .nav-wrapper { top: 28px; padding: 0 24px; } }

.nav-glass {
  width: 100%;
  max-width: 1180px;
  height: var(--nav-height);
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 1px 8px rgba(0,0,0,0.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  pointer-events: auto;
  transition: height 0.35s var(--ease), background 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
@media (min-width: 768px) { .nav-glass { height: 60px; padding: 0 28px; } }

.nav-glass.nav-scrolled {
  background: rgba(255,255,255,0.92);
  height: 48px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}
@media (min-width: 768px) { .nav-glass.nav-scrolled { height: 52px; } }

.nav-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  min-height: 44px;
}
.nav-logo-icon { width: 22px; height: 22px; flex-shrink: 0; }
.nav-logo-text { position: relative; top: 1px; }

.nav-links { display: none; }
.nav-cta { display: none; }

.nav-mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--ink);
  position: relative;
  z-index: 1002;
}
.menu-icon-close { display: none; }
body.mobile-menu-open .menu-icon-open { display: none; }
body.mobile-menu-open .menu-icon-close { display: block; }

@media (min-width: 768px) {
  .nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
  }
  .nav-link {
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
    transition: color 0.2s;
    white-space: nowrap;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .nav-link:hover { color: var(--ink); }

  .nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ink);
    color: var(--white);
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.2s, transform 0.2s;
    min-height: 44px;
  }
  .nav-cta:hover { background: var(--spryq-orange); transform: translateY(-1px); }
  .nav-cta:active { transform: scale(0.97); }
  .nav-cta svg { transition: transform 0.2s; }
  .nav-cta:hover svg { transform: translateX(3px); }

  .nav-mobile-toggle { display: none; }
}

/* Mobile Menu */
.mobile-menu-overlay { display: none; }
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.mobile-menu.active { opacity: 1; pointer-events: auto; }

.mobile-menu-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.mobile-menu-link {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), color 0.2s;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.mobile-menu-link.visible { opacity: 1; transform: translateY(0); }
.mobile-menu-link:hover { color: var(--spryq-orange); }

.mobile-menu-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  background: var(--spryq-orange);
  color: var(--white);
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease) 0.3s, transform 0.5s var(--ease) 0.3s;
}
.mobile-menu.active .mobile-menu-cta { opacity: 1; transform: translateY(0); }


/* ==========================================================================
   2. HERO
   ========================================================================== */
.hero {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--nav-height) + 80px) 20px 0;
  background: var(--bg);
  overflow: hidden;
}
@media (min-width: 768px) { .hero { padding-top: calc(60px + 100px); } }

.hero-content {
  text-align: left;
  max-width: 900px;
  width: 100%;
}

.hero-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--spryq-orange);
  margin-bottom: 20px;
}
@media (min-width: 768px) { .hero-eyebrow { font-size: 13px; margin-bottom: 28px; } }

.hero-headline {
  font-size: clamp(40px, 8vw, 96px);
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin-bottom: 20px;
}
@media (min-width: 1200px) { .hero-headline { font-size: clamp(72px, 7vw, 108px); } }

.hero-body {
  font-size: clamp(16px, 2.5vw, 20px);
  color: var(--muted);
  max-width: 560px;
  margin: 0 0 32px;
  line-height: 1.55;
}

.hero-ctas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
@media (min-width: 480px) { .hero-ctas { flex-direction: row; justify-content: flex-start; gap: 20px; } }

.hero-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--spryq-orange);
  color: var(--white);
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  min-height: 44px;
}
.hero-cta-primary:hover { background: #e64f17; transform: translateY(-2px); box-shadow: 0 4px 16px rgba(255,90,31,0.25); }
.hero-cta-primary:active { transform: scale(0.97); }
.hero-cta-primary svg { transition: transform 0.2s; }
.hero-cta-primary:hover svg { transform: translateX(3px); }

.hero-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.2s;
  min-height: 44px;
}
.hero-cta-secondary:hover { color: var(--ink); }
.hero-cta-secondary svg { transition: transform 0.2s; }
.hero-cta-secondary:hover svg { transform: translateY(3px); }


/* ===== HERO VISUAL ===== */
.hero-visual {
  width: 100%;
  max-width: 720px;
  margin: 48px auto 0;
}
@media (min-width: 768px) { .hero-visual { margin-top: 64px; } }


/* ==========================================================================
   3. CHATGPT MOCKUP
   ========================================================================== */
.chatgpt-mockup {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  overflow: hidden;
  text-align: left;
  position: relative;
}

.chatgpt-illustrative-label {
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 12px 20px 0;
  opacity: 0.6;
}

.chatgpt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.chatgpt-header svg { flex-shrink: 0; display: inline-block; }
.chatgpt-header-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
  text-align: center;
}

.chatgpt-messages {
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (min-width: 768px) { .chatgpt-messages { padding: 28px 24px; gap: 24px; } }

.chatgpt-user-msg {
  align-self: flex-end;
  background: #F4F4F5;
  padding: 12px 16px;
  border-radius: 18px 18px 4px 18px;
  max-width: 80%;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}

.chatgpt-ai-msg {
  align-self: flex-start;
  max-width: 95%;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}
.chatgpt-ai-msg p { margin-bottom: 12px; }
.chatgpt-ai-msg p:last-child { margin-bottom: 0; }
.chatgpt-ai-msg ul { padding-left: 20px; margin-bottom: 12px; }
.chatgpt-ai-msg li { list-style: disc; margin-bottom: 6px; }
.chatgpt-ai-msg strong { font-weight: 600; }

/* Sponsored Card */
.chatgpt-sponsored-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  background: var(--white);
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.chatgpt-sponsored-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.chatgpt-sponsored-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--spryq-orange);
}
.chatgpt-sponsored-headline {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--ink);
}
.chatgpt-sponsored-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 12px;
}
.chatgpt-sponsored-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.chatgpt-sponsored-domain {
  font-size: 12px;
  color: var(--muted);
}
.chatgpt-sponsored-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--spryq-orange);
}

.chatgpt-input-bar {
  margin: 0 16px 16px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.chatgpt-input-placeholder {
  font-size: 14px;
  color: #A1A1AA;
}
.chatgpt-input-bar svg { display: inline-block; }


/* ==========================================================================
   4. THE SHIFT
   ========================================================================== */
.section-shift {
  background: var(--white);
  padding: 100px 0 80px;
  text-align: center;
}
@media (min-width: 768px) { .section-shift { padding: 140px 0 120px; } }

.shift-headline {
  font-size: clamp(32px, 5vw, 56px);
  margin-bottom: 48px;
}
.shift-headline em { font-style: italic; color: var(--spryq-orange); }

.shift-words-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 0;
}
.shift-word {
  font-size: clamp(40px, 8vw, 96px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: rgba(0,0,0,0.08);
  transition: color 0.5s var(--ease), transform 0.5s var(--ease), opacity 0.5s var(--ease);
  cursor: default;
}
.shift-word.active {
  color: var(--ink);
  transform: scale(1.05);
}

.shift-body-content {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
.shift-body {
  font-size: clamp(18px, 3vw, 22px);
  color: var(--muted);
  max-width: 600px;
}


/* ==========================================================================
   5. WHAT IS CHANGING
   ========================================================================== */
.section-comparison {
  background: var(--bg);
  padding: 100px 0;
}
@media (min-width: 768px) { .section-comparison { padding: 140px 0; } }

.comparison-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 48px;
}
@media (min-width: 768px) {
  .comparison-grid { grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: start; }
}

.comparison-col {
  background: var(--white);
  padding: 32px;
  border-radius: 20px;
  border: 1px solid var(--border);
}
.comparison-col--new {
  border-color: rgba(255,90,31,0.2);
  box-shadow: 0 8px 32px rgba(255,90,31,0.06);
}

.comparison-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 28px;
  color: var(--muted);
}
.comparison-title--accent { color: var(--spryq-orange); }

.comparison-steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.comparison-step {
  padding: 14px 20px;
  background: var(--bg);
  border-radius: 12px;
  font-weight: 500;
  font-size: 15px;
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.step-marker {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}
.step-marker--accent { background: var(--spryq-orange); }

.comparison-arrow {
  display: flex;
  justify-content: center;
  padding: 4px 0;
}
.comparison-arrow svg { display: inline-block; }

.comparison-divider {
  display: none;
}
@media (min-width: 768px) {
  .comparison-divider { display: flex; align-items: center; padding: 0 8px; }
  .comparison-divider svg { display: inline-block; }
}


/* ==========================================================================
   6. ADVERTISE IN CHATGPT
   ========================================================================== */
.section-moments {
  background: var(--white);
  padding: 100px 0;
}
@media (min-width: 768px) { .section-moments { padding: 140px 0; } }

.moments-grid {
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin-top: 64px;
}
@media (min-width: 768px) {
  .moments-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px 48px;
  }
}

.moment-item { display: flex; flex-direction: column; gap: 12px; }

.moment-number {
  font-size: clamp(56px, 10vw, 100px);
  font-weight: 700;
  color: var(--bg);
  line-height: 0.85;
  letter-spacing: -0.05em;
}

.moment-title {
  font-size: clamp(24px, 3.5vw, 32px);
  letter-spacing: -0.02em;
}

.moment-desc {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
  max-width: 380px;
}


/* ==========================================================================
   7. BEYOND THE KEYWORD
   ========================================================================== */
.section-beyond {
  background: var(--dark-bg);
  color: var(--white);
  padding: 100px 0;
  overflow: hidden;
}
@media (min-width: 768px) { .section-beyond { padding: 160px 0; } }

.beyond-headline {
  font-size: clamp(44px, 7vw, 88px);
  letter-spacing: -0.04em;
  text-align: center;
  margin-bottom: 56px;
}

.beyond-fragments {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 24px 0;
  max-width: 700px;
  margin: 0 auto;
}
.beyond-fragment {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
  animation: float 5s ease-in-out infinite;
  white-space: nowrap;
}
.beyond-fragment:nth-child(odd) { animation-delay: -1.2s; border-color: rgba(255,90,31,0.35); color: var(--spryq-orange); }
.beyond-fragment:nth-child(3n) { animation-delay: -2.8s; }
.beyond-fragment:nth-child(4n) { animation-delay: -0.5s; }
@media (min-width: 768px) { .beyond-fragment { font-size: 16px; padding: 12px 24px; } }

.beyond-body {
  text-align: center;
  font-size: clamp(17px, 2.5vw, 22px);
  color: rgba(255,255,255,0.55);
  max-width: 640px;
  margin: 64px auto 0;
  line-height: 1.6;
}


/* ==========================================================================
   8. INTERACTIVE DEMO
   ========================================================================== */
.section-demo {
  background: var(--bg);
  padding: 100px 0;
}
@media (min-width: 768px) { .section-demo { padding: 140px 0; } }

.demo-tabs {
  display: flex;
  overflow-x: auto;
  gap: 8px;
  margin: 40px 0 32px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
}
.demo-tabs::-webkit-scrollbar { display: none; }

.demo-tab {
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--border);
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  transition: all 0.2s var(--ease);
  min-height: 44px;
  cursor: pointer;
}
.demo-tab:hover { border-color: rgba(0,0,0,0.12); }
.demo-tab.active {
  background: var(--spryq-orange);
  color: var(--white);
  border-color: var(--spryq-orange);
}

.demo-conversation-wrapper {
  position: relative;
}

.demo-mockup {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.06);
  overflow: hidden;
  max-width: 720px;
  margin: 0 auto;
}
.demo-chatgpt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.demo-chatgpt-header span {
  font-size: 15px;
  font-weight: 600;
  flex: 1;
  text-align: center;
}
.demo-chatgpt-header svg { display: inline-block; flex-shrink: 0; }

.demo-messages {
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 260px;
  transition: opacity 0.25s var(--ease);
}
@media (min-width: 768px) { .demo-messages { padding: 28px 24px; } }

.demo-user-msg {
  align-self: flex-end;
  background: var(--ink);
  color: var(--white);
  padding: 12px 16px;
  border-radius: 18px 18px 4px 18px;
  max-width: 80%;
  font-size: 14px;
  line-height: 1.5;
}
.demo-ai-msg {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  min-height: 40px;
}

.demo-sponsored {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  background: var(--white);
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease-out);
}
.demo-sponsored-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.demo-sponsored-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--spryq-orange);
}
.demo-sponsored-headline {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}
.demo-sponsored-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 10px;
}
.demo-sponsored-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.demo-sponsored-domain { font-size: 12px; color: var(--muted); }
.demo-sponsored-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--spryq-orange);
}

.demo-input-bar {
  margin: 0 16px 16px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.demo-input-placeholder { font-size: 14px; color: #A1A1AA; }
.demo-input-bar svg { display: inline-block; }


/* ==========================================================================
   9. WHY CHATGPT ADS
   ========================================================================== */
.section-why {
  background: var(--white);
  padding: 100px 0;
}
@media (min-width: 768px) { .section-why { padding: 140px 0; } }

.why-grid {
  display: flex;
  flex-direction: column;
  gap: 64px;
  margin-top: 64px;
}

.why-item { max-width: 800px; }

.why-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--spryq-orange);
  margin-bottom: 16px;
}

.why-statement {
  font-size: clamp(24px, 4vw, 44px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 600;
}


/* ==========================================================================
   10. SPRYQ APPROACH
   ========================================================================== */
.section-approach {
  background: var(--bg);
  padding: 100px 0;
}
@media (min-width: 768px) { .section-approach { padding: 140px 0; } }

.approach-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 64px;
}

.approach-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 24px;
  background: var(--white);
  border-radius: 16px;
  border: 1px solid var(--border);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.approach-step:hover { border-color: rgba(255,90,31,0.2); box-shadow: 0 4px 20px rgba(255,90,31,0.06); }

@media (min-width: 768px) {
  .approach-step {
    flex-direction: row;
    align-items: center;
    gap: 32px;
    padding: 32px;
  }
}

.approach-step-number {
  font-size: 18px;
  font-weight: 600;
  color: var(--muted);
  min-width: 40px;
  flex-shrink: 0;
}
.approach-step-content { flex: 1; }
.approach-step-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 4px;
}
.approach-step-desc {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.55;
}


/* ==========================================================================
   11. SPRYQ STACK
   ========================================================================== */
.section-stack {
  background: var(--white);
  padding: 100px 0;
  text-align: center;
}
@media (min-width: 768px) { .section-stack { padding: 140px 0; } }

.stack-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 360px;
  margin: 64px auto 0;
}

.stack-node {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  background: var(--bg);
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.stack-node svg { display: inline-block; flex-shrink: 0; }
.stack-node--accent {
  background: var(--spryq-orange);
  color: var(--white);
}

.stack-connector {
  width: 2px;
  height: 28px;
  background: linear-gradient(to bottom, var(--border), var(--spryq-orange), var(--border));
  margin: 6px 0;
  border-radius: 1px;
}


/* ==========================================================================
   12. WHO IS THIS FOR
   ========================================================================== */
.section-audience {
  background: var(--bg);
  padding: 100px 0;
}
@media (min-width: 768px) { .section-audience { padding: 140px 0; } }

.audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 48px;
}
@media (min-width: 768px) { .audience-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1200px) { .audience-grid { grid-template-columns: repeat(4, 1fr); } }

.audience-card {
  background: var(--white);
  padding: 24px;
  border-radius: 16px;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s, background-color 0.3s var(--ease);
  cursor: default;
}
.audience-card:hover {
  transform: translateY(-3px);
  background: var(--spryq-orange);
  border-color: var(--spryq-orange);
  box-shadow: 0 10px 28px rgba(255,90,31,0.22);
}
.audience-card:hover .audience-label { color: var(--white); }
.audience-card:hover .audience-icon { background: rgba(255,255,255,0.2); }
.audience-card:hover .audience-icon svg { stroke: var(--white) !important; }
@media (min-width: 768px) { .audience-card { padding: 32px; gap: 20px; } }

.audience-icon {
  width: 40px;
  height: 40px;
  background: var(--light-orange);
  border-radius: 10px;
  padding: 8px;
}
.audience-icon svg { width: 100%; height: 100%; }

.audience-label {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
@media (min-width: 768px) { .audience-label { font-size: 17px; } }


/* ==========================================================================
   13. EARLY ADVERTISERS
   ========================================================================== */
.section-advertisers {
  background: var(--white);
  padding: 100px 0;
  text-align: center;
}
@media (min-width: 768px) { .section-advertisers { padding: 140px 0; } }

.advertiser-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  margin: 48px 0;
}
.advertiser-logo {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.25;
}
@media (min-width: 768px) { .advertiser-logo { font-size: 24px; gap: 48px; } }

.advertiser-testimonial {
  max-width: 720px;
  margin: 48px auto;
}
.advertiser-quote {
  font-size: clamp(20px, 3vw, 32px);
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-bottom: 28px;
}
.advertiser-attribution {
  font-size: 15px;
  color: var(--ink);
}
.advertiser-attribution strong { font-weight: 600; }
.advertiser-attribution span { color: var(--muted); }

.advertiser-disclaimer {
  font-size: 12px;
  color: var(--muted);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.5;
}


/* ==========================================================================
   14. MEASUREMENT
   ========================================================================== */
.section-measurement {
  background: var(--dark-bg);
  color: var(--white);
  padding: 100px 0;
}
@media (min-width: 768px) { .section-measurement { padding: 140px 0; } }

.measurement-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 64px 0;
}
@media (min-width: 768px) { .measurement-metrics { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
@media (min-width: 1200px) { .measurement-metrics { grid-template-columns: repeat(6, 1fr); } }

.measurement-metric {
  padding: 24px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  text-align: center;
}
.metric-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.5);
}

.measurement-visual {
  max-width: 700px;
  margin: 0 auto;
}
.measurement-visual img {
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.3);
}


/* ==========================================================================
   15. CLICK IS NOT CONVERSION
   ========================================================================== */
.section-funnel {
  background: var(--white);
  padding: 100px 0;
  text-align: center;
}
@media (min-width: 768px) { .section-funnel { padding: 140px 0; } }

.funnel-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 48px 0;
}
.funnel-stage { width: 100%; max-width: 320px; }
.funnel-stage-inner {
  padding: 18px 24px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 15px;
  text-align: center;
  transition: transform 0.3s var(--ease);
}
.funnel-stage--1 { background: var(--bg); }
.funnel-stage--2 { background: var(--light-orange); }
.funnel-stage--3 { background: #FFE4D6; }
.funnel-stage--4 { background: #FFCDB2; color: var(--ink); }
.funnel-stage--5 { background: var(--spryq-orange); color: var(--white); }

.funnel-arrow {
  display: flex;
  justify-content: center;
  padding: 4px 0;
}
.funnel-arrow svg { display: inline-block; }

.funnel-body {
  font-size: clamp(16px, 2.5vw, 20px);
  color: var(--muted);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.6;
}


/* ==========================================================================
   16. LEAD FORM
   ========================================================================== */
.section-form {
  background: var(--bg);
  padding: 100px 0;
}
@media (min-width: 768px) { .section-form { padding: 140px 0; } }

.form-layout {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
@media (min-width: 992px) {
  .form-layout {
    flex-direction: row;
    gap: 64px;
    align-items: flex-start;
  }
  .form-editorial { width: 100%; position: sticky; top: 100px; }
  .form-container { width: 100%; }
}

.form-headline {
  font-size: clamp(32px, 5vw, 48px);
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}
.form-body {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 16px;
}
.form-microcopy {
  font-size: 13px;
  color: var(--muted);
  opacity: 0.7;
}

.form-container {
  background: var(--white);
  padding: 32px 24px;
  border-radius: 20px;
  border: 1px solid var(--border);
  box-shadow: 0 4px 24px rgba(0,0,0,0.04);
  position: relative;
}
@media (min-width: 768px) { .form-container { padding: 40px 36px; } }

/* Progress */
.form-progress { display: none; }

/* Steps */
.form-step { display: flex; flex-direction: column; gap: 20px; animation: fadeIn 0.35s var(--ease); }
.form-step-title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 4px;
}
.form-step-subtitle {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 4px;
}

/* Fields */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 14px 16px;
  background: #F8F8FA;
  border: 1.5px solid transparent;
  border-radius: 12px;
  font-size: 16px;
  font-family: var(--font);
  color: var(--ink);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  min-height: 48px;
  -webkit-appearance: none;
  appearance: none;
}
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
.form-textarea { resize: vertical; min-height: 100px; }

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--spryq-orange);
  box-shadow: 0 0 0 3px rgba(255,90,31,0.1);
}

.form-input::placeholder,
.form-textarea::placeholder { color: #B0B0B8; }

/* Validation */
.form-field.has-error .form-input,
.form-field.has-error .form-select,
.form-field.has-error .form-textarea {
  border-color: #E53935;
  background: #FFF5F5;
}
.form-error-msg {
  font-size: 12px;
  color: #E53935;
  min-height: 0;
  transition: all 0.2s;
}

/* Checkboxes */
.form-field--checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.form-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: #F8F8FA;
  border: 1.5px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  min-height: 44px;
  flex: 0 0 auto;
}
.form-checkbox:hover { border-color: rgba(0,0,0,0.1); }
.form-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.form-checkbox-mark {
  width: 20px;
  height: 20px;
  border: 2px solid #D1D1D6;
  border-radius: 6px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.form-checkbox-mark::after {
  content: '';
  display: none;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: rotate(-45deg) translateY(-1px);
}
.form-checkbox input:checked + .form-checkbox-mark {
  background: var(--spryq-orange);
  border-color: var(--spryq-orange);
}
.form-checkbox input:checked + .form-checkbox-mark::after { display: block; }
.form-checkbox input:checked ~ .form-checkbox-label { color: var(--ink); font-weight: 500; }
.form-checkbox-label { font-size: 14px; color: var(--muted); }

.form-checkbox input:focus-visible + .form-checkbox-mark {
  outline: 2px solid var(--spryq-orange);
  outline-offset: 2px;
}

/* Radio Options */
.form-field--options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.form-option {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  background: #F8F8FA;
  border: 1.5px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  min-height: 44px;
}
.form-option:hover { border-color: rgba(0,0,0,0.1); }
.form-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.form-option-label {
  font-size: 14px;
  color: var(--muted);
  transition: color 0.2s;
}
.form-option input:checked ~ .form-option-label { color: var(--ink); font-weight: 600; }
.form-option:has(input:checked) {
  background: var(--light-orange);
  border-color: var(--spryq-orange);
}
.form-option input:focus-visible ~ .form-option-label { outline: 2px solid var(--spryq-orange); outline-offset: 2px; }

/* Form Buttons */
.form-buttons {
  display: flex;
  align-items: center;
  margin-top: 28px;
  gap: 12px;
}

.form-btn-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: var(--spryq-orange);
  color: var(--white);
  border: none;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  transition: background 0.2s, transform 0.2s;
  min-height: 44px;
  cursor: pointer;
}
.form-btn-submit:hover { background: #e64f17; transform: translateY(-1px); }
.form-btn-submit:active { transform: scale(0.97); }
.form-btn-submit svg { transition: transform 0.2s; }
.form-btn-submit:hover svg { transform: translateX(3px); }

/* Success State */
.form-success {
  text-align: center;
  padding: 48px 20px;
}
.success-checkmark {
  margin: 0 auto 28px;
  width: 48px;
  height: 48px;
}
.success-checkmark svg { display: inline-block; width: 48px; height: 48px; }
.success-check-path {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: checkDraw 0.6s var(--ease-out) 0.3s forwards;
}
.success-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--spryq-orange);
  margin-bottom: 12px;
}
.success-headline {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 12px;
}
.success-body {
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 32px;
  line-height: 1.5;
}
.success-redirect {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 16px;
  animation: fadeIn 0.4s var(--ease);
}
.success-progress {
  width: 200px;
  height: 3px;
  background: var(--bg);
  border-radius: 2px;
  margin: 0 auto 24px;
  overflow: hidden;
}
.success-progress-bar {
  height: 100%;
  background: var(--spryq-orange);
  border-radius: 2px;
  animation: progressBar 2s var(--ease) forwards;
}
.whatsapp-fallback {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--spryq-orange);
  transition: opacity 0.2s;
}
.whatsapp-fallback:hover { opacity: 0.8; }


/* ==========================================================================
   17. FAQ
   ========================================================================== */
.section-faq {
  background: var(--white);
  padding: 100px 0;
}
@media (min-width: 768px) { .section-faq { padding: 120px 0; } }

.faq-list {
  max-width: 720px;
  margin: 48px auto 0;
}
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  padding: 20px 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  min-height: 44px;
  transition: color 0.2s;
}
.faq-question:hover { color: var(--spryq-orange); }
.faq-question span { flex: 1; }

.faq-icon {
  display: inline-block;
  flex-shrink: 0;
  transition: transform 0.3s var(--ease);
}
.faq-item.open .faq-icon { transform: rotate(180deg); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease);
}
.faq-answer p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
  padding-bottom: 20px;
}


/* ==========================================================================
   18. FINAL CTA
   ========================================================================== */
.section-final {
  background: var(--bg);
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 100px 20px;
}

.final-headline {
  font-size: clamp(40px, 7vw, 96px);
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin-bottom: 20px;
}
.final-subheadline {
  font-size: clamp(20px, 3vw, 32px);
  color: var(--muted);
  margin-bottom: 40px;
}
.final-ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}
@media (min-width: 480px) { .final-ctas { flex-direction: row; justify-content: center; gap: 24px; } }

.final-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--spryq-orange);
  color: var(--white);
  padding: 16px 32px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  min-height: 44px;
}
.final-cta-btn:hover { background: #e64f17; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,90,31,0.3); }
.final-cta-btn:active { transform: scale(0.97); }
.final-cta-btn svg { transition: transform 0.2s; }
.final-cta-btn:hover svg { transform: translateX(4px); }

.final-secondary {
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.2s;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.final-secondary:hover { color: var(--ink); }

.final-tagline {
  font-size: 14px;
  color: var(--muted);
}


/* ==========================================================================
   19. FOOTER
   ========================================================================== */
.footer {
  background: var(--dark-bg);
  color: var(--dark-text);
  padding: 56px 0 32px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.footer .container{ max-width: var(--content, 1240px); }

/* Top row: brand left, nav links right, both vertically centered. */
.footer-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}
@media (min-width: 768px) {
  .footer-content {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.footer-logo-row {
  display: flex;
  align-items: center;
  gap: 9px;
}
.footer-logo-image {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex: 0 0 26px;
  border-radius: 6px;
}
.footer-logo {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--white);
}
.footer-tagline {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245,245,247,0.35);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.footer-link {
  font-size: 13px;
  color: rgba(245,245,247,0.45);
  transition: color 0.2s, background 0.2s;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  display: flex;
  align-items: center;
}
.footer-link:hover { color: var(--white); background: rgba(255,255,255,0.08); }

/* Bottom row: legal links left, copyright right — both on one baseline,
   full-width divider above. */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 12px;
  color: rgba(245,245,247,0.35);
}
@media (min-width: 768px) {
  .footer-legal { justify-content: space-between; }
  .footer-legal .footer-copyright { margin-left: auto; }
}
.footer-divider { opacity: 0.25; color: rgba(245,245,247,0.35); }
.footer-copyright { opacity: 0.6; white-space: nowrap; color: rgba(245,245,247,0.35); }

@media (max-width: 767px) {
  .footer { padding: 44px 0 28px; }
  .footer-links { gap: 4px; }
  .footer-link { padding: 0 10px; min-height: 40px; }
  .footer-legal { gap: 6px 10px; }
}


/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--spryq-orange);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-up, .reveal-fade, .reveal-scale, .reveal-left, .reveal-right {
    opacity: 1 !important;
    transform: none !important;
  }
  .load-animate {
    opacity: 1 !important;
    transform: none !important;
  }
  .beyond-fragment {
    animation: none !important;
  }
}

/* =====================================================================
   SPRYQ V2 — alignment + supplied asset art direction
   These overrides intentionally replace the earlier loose compositions.
   ===================================================================== */
:root{
  --content: 1240px;
  --gutter: clamp(20px, 4vw, 56px);
  --section-y: clamp(92px, 11vw, 164px);
  --orange: #ff5a1f;
  --orange-soft: #fff1ea;
  --line: rgba(29,29,31,.10);
  --shadow-soft: 0 24px 70px rgba(29,29,31,.09);
}

body{background:#f7f7f8; color:var(--ink);}
.container{max-width:var(--content); padding-left:var(--gutter); padding-right:var(--gutter);}
section:not(.hero){position:relative; overflow:hidden;}
.section-label{margin-bottom:24px;}
/* Default: headings sit flush with the eyebrow label at the container's
   left edge. Sections that are meant to be centered opt back in below,
   via both text-align (centers the text) AND margin:auto (centers the
   box) so the eyebrow and heading always share one alignment. */
.section-headline{max-width:900px; margin-left:0; margin-right:auto;}
.section-subtitle{margin-left:0; margin-right:auto;}

/* Centered section headers — eyebrow + heading both centered */
.section-shift .container,
.section-comparison .container,
.section-why .container,
.section-stack .container,
.section-advertisers .container,
.section-funnel .container,
.section-faq .container{ text-align:center; }
.section-shift .section-headline,
.section-comparison .section-headline,
.section-why .section-headline,
.section-stack .section-headline,
.section-advertisers .section-headline,
.section-funnel .section-headline,
.section-faq .section-headline,
.section-shift .section-subtitle,
.section-comparison .section-subtitle,
.section-why .section-subtitle,
.section-stack .section-subtitle,
.section-advertisers .section-subtitle,
.section-funnel .section-subtitle,
.section-faq .section-subtitle{ margin-left:auto; margin-right:auto; }

/* Left section headers — eyebrow + heading both left-aligned (default,
   listed here for clarity: moments, demo, approach, audience, measurement) */
.section-moments .container,
.section-demo .container,
.section-approach .container,
.section-audience .container,
.section-measurement .container{ text-align:left; }

/* Header: use the exact supplied logo asset, cropped/transparent in assets/. */
.nav-wrapper{top:18px; padding:0 18px;}
.nav-glass{max-width:1160px; height:62px; padding:0 10px 0 18px; border:1px solid rgba(0,0,0,.08); box-shadow:0 10px 35px rgba(0,0,0,.07);}
.nav-logo{gap:9px; min-height:44px; padding:0 8px 0 0;}
.nav-logo-image{width:30px; height:30px; object-fit:contain; flex:0 0 30px;}
.nav-logo-text{font-size:15px; font-weight:700; letter-spacing:.10em; line-height:1; top:0;}
.nav-links{gap:6px;}
.nav-link{padding:0 12px; border-radius:999px; font-size:13px;}
.nav-link:hover{background:#f4f4f5; color:var(--ink);}
.nav-cta{min-height:42px; padding:0 17px; background:var(--ink);}

/* Hero: strict two-column grid. No arbitrary absolute positioning. */
.hero{min-height:min(920px,100svh); max-width:var(--content); margin:0 auto; padding:150px var(--gutter) 90px; display:grid; grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr); align-items:center; gap:clamp(28px,4.5vw,64px);}
.hero-content{width:100%; max-width:800px; margin:0; text-align:left;}
.hero-eyebrow{margin-bottom:24px; font-size:11px; line-height:1.2; letter-spacing:.16em; color:#77777c; font-weight:650;}
.hero-headline{font-size:clamp(30px,3.1vw,48px); line-height:1.15; letter-spacing:-0.015em; word-spacing:0; max-width:760px; margin-bottom:30px; white-space:normal;}
.hero-body{font-size:clamp(17px,1.8vw,20px); line-height:1.55; color:var(--muted); max-width:540px; margin-bottom:34px; margin-left:0;}
.hero-ctas{display:flex; align-items:center; justify-content:flex-start; gap:10px; flex-wrap:wrap;}
.hero-cta-primary,.hero-cta-secondary{min-height:48px; padding:0 18px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:999px; font-size:14px; font-weight:600;}
.hero-cta-primary{background:var(--orange); color:#fff; box-shadow:0 8px 24px rgba(255,90,31,.20);}
.hero-cta-secondary{background:#fff; border:1px solid var(--line);}
.hero-visual{width:100%; max-width:420px; justify-self:end; margin:0;}
.hero-art-wrap{position:relative; width:min(100%,400px); margin:0 auto;}
.hero-art-image{width:100%; height:auto; border-radius:34px; box-shadow:var(--shadow-soft); background:#d7efe9;}
.hero-art-label{position:absolute; z-index:2; top:16px; left:16px; padding:7px 10px; border-radius:999px; background:rgba(255,255,255,.82); backdrop-filter:blur(12px); font-size:10px; font-weight:600; letter-spacing:.04em; color:#5d5d63; border:1px solid rgba(0,0,0,.06);}
.hero-art-float{position:absolute; z-index:3; display:flex; align-items:center; gap:9px; padding:12px 14px; border-radius:15px; background:rgba(255,255,255,.92); border:1px solid rgba(0,0,0,.07); box-shadow:0 14px 35px rgba(0,0,0,.10); font-size:12px; font-weight:600; white-space:nowrap;}
.hero-art-float--one{left:-24px; bottom:94px;}
.hero-art-float--two{right:-18px; bottom:32px;}
.hero-float-dot{width:8px; height:8px; border-radius:50%; background:var(--orange); display:block;}
.hero-float-dot--dark{background:#1d1d1f;}

/* Shared section rhythm */
.section-shift,.section-comparison,.section-moments,.section-beyond,.section-demo,.section-why,.section-approach,.section-stack,.section-audience,.section-advertisers,.section-measurement,.section-funnel,.section-form,.section-faq{padding-top:var(--section-y); padding-bottom:var(--section-y);}
.section-shift .container,.section-comparison .container,.section-moments .container,.section-demo .container,.section-why .container,.section-approach .container,.section-stack .container,.section-audience .container,.section-advertisers .container,.section-measurement .container,.section-funnel .container,.section-form .container,.section-faq .container{width:100%;}

/* The shift: centered reading column instead of stretched text. */
.section-shift .container{max-width:900px; text-align:center;}
.shift-headline{max-width:800px; margin:0 auto 22px; font-size:clamp(48px,7vw,92px); line-height:.98; letter-spacing:-.06em;}
.shift-body{max-width:620px; margin:0 auto; color:var(--muted); font-size:19px;}

/* Comparison */
.section-comparison{background:#fff;}
.section-comparison .container{text-align:center;}
.comparison-grid{max-width:1040px; margin:56px auto 0; display:grid; grid-template-columns:1fr 1px 1fr; align-items:stretch; gap:clamp(30px,5vw,70px); text-align:left;}
.comparison-divider{background:#e6e6e8; width:1px; min-height:100%;}
.comparison-col{padding:30px 0;}
.comparison-title{font-size:21px; margin-bottom:30px;}
.comparison-steps{display:flex; flex-direction:column; gap:0;}
.comparison-step{min-height:46px; display:flex; align-items:center; gap:12px; font-size:15px; color:#4e4e53;}
.comparison-arrow{height:30px; display:flex; align-items:center; padding-left:4px;}
.step-marker{width:8px; height:8px; border-radius:50%; background:#b8b8bd; flex:none;}
.step-marker--accent{background:var(--orange); box-shadow:0 0 0 5px var(--orange-soft);}

/* Moments / cards */
.moments-grid{max-width:1120px; margin:56px auto 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;}
.moment-card{min-height:240px; padding:28px; border:1px solid var(--line); border-radius:24px; background:#fff; display:flex; flex-direction:column; justify-content:flex-end;}
.moment-number{margin-bottom:auto; font-size:12px; color:#96969b;}
.moment-title{font-size:24px; margin-bottom:10px;}
.moment-desc{font-size:14px; line-height:1.55; color:var(--muted);}

/* Supplied image storytelling */
.story-media{max-width:1120px; margin:58px auto 0; border:1px solid var(--line); border-radius:30px; overflow:hidden; background:#fff; box-shadow:0 18px 60px rgba(0,0,0,.06);}
.story-media--wide{display:grid; grid-template-columns:.78fr 1.22fr; align-items:center;}
.story-media-copy{padding:clamp(28px,5vw,58px);}
.story-media-kicker{display:inline-block; margin-bottom:18px; color:var(--orange); font-size:11px; font-weight:700; letter-spacing:.10em; text-transform:uppercase;}
.story-media-copy h3{font-size:clamp(28px,3.2vw,44px); line-height:1.05; letter-spacing:-.04em; margin-bottom:16px;}
.story-media-copy p{max-width:420px; color:var(--muted); font-size:16px; line-height:1.6;}
.story-media img{width:100%; height:auto; display:block;}

/* Demo */
.section-demo{background:#111; color:#fff;}
.section-demo .section-label{color:rgba(255,255,255,.5);}
.section-demo .section-headline{color:#fff;}
.section-demo .section-subtitle{color:rgba(255,255,255,.62);}

/* Why */
.section-why .container{text-align:center;}
.why-grid{max-width:1120px; margin:58px auto 0;}
.why-item{margin:0 auto;}
.why-visual{max-width:980px; margin:52px auto 0; position:relative; border-radius:28px; overflow:hidden; background:#dcefe9; box-shadow:var(--shadow-soft);}
.why-visual img{width:100%; height:auto; display:block;}
.why-visual span{position:absolute; left:16px; bottom:16px; padding:7px 10px; background:rgba(255,255,255,.88); border-radius:999px; color:#6e6e73; font-size:10px; font-weight:600; border:1px solid rgba(0,0,0,.06);}

/* Audience */
.audience-grid{max-width:1120px; margin:56px auto 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;}
.audience-card{min-height:150px; padding:24px; border-radius:22px; background:#fff; border:1px solid var(--line);}

/* Measurement visual */
.measurement-visual{max-width:1120px; margin:58px auto 0; border-radius:28px; overflow:hidden; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow-soft);}
.measurement-visual img{width:100%; height:auto; display:block;}

/* Asset showcase before form */
.asset-showcase{padding:0 0 var(--section-y); background:#f7f7f8;}
.asset-showcase-grid{max-width:1120px; margin:0 auto; display:grid; grid-template-columns:.9fr 1.1fr; align-items:end; gap:16px;}
.asset-tile{margin:0; overflow:hidden; border-radius:28px; background:#fff; border:1px solid var(--line); box-shadow:0 18px 55px rgba(0,0,0,.07);}
.asset-tile img{width:100%; height:auto; display:block;}
.asset-tile--phone{max-width:540px; justify-self:center;}
.asset-tile--manager{align-self:center;}

/* Form: single aligned content system */
.section-form{background:#fff;}
.form-layout{max-width:1120px; margin:0 auto; display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(38px,7vw,96px); align-items:start;}
.form-editorial{position:sticky; top:120px;}
.form-headline{font-size:clamp(36px,4vw,58px); line-height:1.08; letter-spacing:-0.02em; max-width:480px; margin-bottom:24px;}
.form-body{max-width:440px; color:var(--muted); font-size:17px; line-height:1.6;}
.form-microcopy{margin-top:18px; color:#8a8a90; font-size:12px;}
.form-container{width:100%; max-width:640px; margin:0; justify-self:end;}

/* FAQ */
.section-faq .container{max-width:920px;}
.section-faq .section-headline{text-align:center;}

/* Buttons / inputs */
button,a,input,select,textarea{outline-color:var(--orange);}
.form-input,.form-select,.form-textarea{border:1px solid #d8d8dc; background:#fafafa; border-radius:14px; min-height:50px; padding:12px 14px; transition:border-color .2s, box-shadow .2s, background .2s;}
.form-input:focus,.form-select:focus,.form-textarea:focus{background:#fff; border-color:rgba(255,90,31,.6); box-shadow:0 0 0 4px rgba(255,90,31,.10); outline:none;}
.form-option,.form-checkbox{border:1px solid #dedee2; border-radius:14px; background:#fff; min-height:54px; padding:0 15px; transition:transform .2s, border-color .2s, background .2s;}
.form-option:hover,.form-checkbox:hover{border-color:#bfc0c5; transform:translateY(-1px);}
.form-option input:checked + .form-option-mark,.form-checkbox input:checked + .form-checkbox-mark{background:var(--orange); border-color:var(--orange);}
.form-btn-continue,.form-btn-submit{min-height:52px; border-radius:14px; background:var(--orange); box-shadow:0 10px 25px rgba(255,90,31,.18);}
.form-btn-back{min-height:52px;}

/* Final CTA */
.section-final{padding:clamp(110px,15vw,200px) 0; text-align:center;}
.final-headline{max-width:1000px; margin:0 auto 28px; font-size:clamp(52px,8vw,110px); line-height:.95; letter-spacing:-.065em;}

/* Responsive — no squeezed desktop composition on tablets/mobile. */
@media (max-width: 1000px){
  .nav-links{gap:0;}
  .nav-link{padding:0 8px; font-size:12px;}
  .hero{grid-template-columns:1fr; min-height:auto; padding-top:145px; gap:54px;}
  .hero-content{max-width:760px; margin:0 auto; text-align:left;}
  .hero-headline,.hero-body{margin-left:0; margin-right:auto;}
  .hero-ctas{justify-content:flex-start;}
  .hero-visual{justify-self:center; max-width:620px;}
  .audience-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .moments-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .form-layout{grid-template-columns:1fr;}
  .form-editorial{position:static; text-align:left; width:100%;}
  .form-headline,.form-body{margin-left:0; margin-right:auto;}
  .form-container{max-width:760px; justify-self:center;}
}
@media (max-width: 767px){
  .nav-wrapper{top:12px; padding:0 10px;}
  .nav-glass{height:56px; padding:0 7px 0 13px;}
  .nav-logo-image{width:27px;height:27px;flex-basis:27px;}
  .nav-logo-text{font-size:14px;}
  .hero{padding:118px 20px 72px; gap:38px;}
  .hero-eyebrow{font-size:9px; margin-bottom:18px;}
  .hero-headline{font-size:clamp(44px,13vw,62px); line-height:.97; margin-bottom:22px;}
  .hero-body{font-size:16px; line-height:1.55;}
  .hero-ctas{flex-direction:column; width:100%;}
  .hero-cta-primary,.hero-cta-secondary{width:100%; min-height:50px;}
  .hero-art-image{border-radius:24px;}
  .hero-art-float{font-size:10px; padding:9px 10px;}
  .hero-art-float--one{left:8px; bottom:72px;}
  .hero-art-float--two{right:8px; bottom:18px;}
  .section-shift,.section-comparison,.section-moments,.section-beyond,.section-demo,.section-why,.section-approach,.section-stack,.section-audience,.section-advertisers,.section-measurement,.section-funnel,.section-form,.section-faq{padding-top:84px; padding-bottom:84px;}
  .shift-headline,.section-headline,.form-headline{font-size:clamp(38px,11vw,54px);}
  .comparison-grid{grid-template-columns:1fr; gap:28px; margin-top:40px;}
  .comparison-divider{display:none;}
  .comparison-col{padding:0;}
  .comparison-col--new{padding-top:28px; border-top:1px solid #e6e6e8;}
  .moments-grid{grid-template-columns:1fr; margin-top:38px;}
  .moment-card{min-height:190px;}
  .story-media--wide{grid-template-columns:1fr; margin-top:38px; border-radius:22px;}
  .story-media-copy{padding:26px;}
  .why-visual{margin-top:36px; border-radius:22px;}
  .why-visual span{left:10px; bottom:10px; max-width:calc(100% - 20px);}
  .audience-grid{grid-template-columns:1fr; margin-top:38px;}
  .asset-showcase-grid{grid-template-columns:1fr; gap:12px;}
  .asset-tile{border-radius:22px;}
  .asset-tile--phone{max-width:440px;}
  .form-layout{gap:42px;}
  .form-container{max-width:100%;}
  .form-editorial{text-align:left;}
  .form-headline,.form-body{margin-left:0;}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important;}
}

@media (min-width: 768px){
  .asset-showcase-grid .asset-tile--wide{grid-column:1 / -1; width:min(100%,760px); justify-self:center;}
}
@media (max-width: 767px){
  .asset-showcase-grid .asset-tile--wide{width:100%;}
}

/* FINAL QA PATCH */
html{scroll-padding-top:112px}
section[id]{scroll-margin-top:112px}
.nav-glass{min-width:0;transition:transform .42s cubic-bezier(.16,1,.3,1),opacity .28s ease,height .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease)}
.nav-logo{flex:0 0 auto}
.nav-logo-image{width:30px!important;height:30px!important;object-fit:contain;border-radius:7px;background:#fff;flex:0 0 30px}
.nav-logo-text{flex:0 0 auto}
.nav-glass.nav-hidden{transform:translateY(calc(-100% - 24px));opacity:0;pointer-events:none}
.hero,.hero-content,.hero-visual,.comparison-col,.form-editorial,.form-container{min-width:0}
.section-headline,.shift-headline,.beyond-headline,.form-headline,.final-headline{overflow-wrap:normal;text-wrap:balance}
.comparison-grid,.moments-grid,.audience-grid,.measurement-metrics{align-items:stretch}
.comparison-col,.comparison-step,.moment-card,.audience-card{min-width:0}
.demo-tabs{width:100%;align-items:center}
.demo-tab{color:var(--ink)!important;-webkit-text-fill-color:var(--ink);flex:0 0 auto}
.demo-tab.active{color:#fff!important;-webkit-text-fill-color:#fff}
.story-media img,.asset-tile img,.measurement-visual img,.why-visual img,.hero-art-image{height:auto!important;object-fit:contain}
.form-layout{width:100%;max-width:1120px;grid-template-columns:minmax(330px,.78fr) minmax(0,1.22fr);gap:clamp(48px,6vw,88px)}
.form-editorial{top:112px;width:auto}
.form-headline{max-width:460px;font-size:clamp(36px,3.4vw,54px);line-height:1.08;letter-spacing:-0.02em}
.form-body{max-width:440px}
.form-container{min-width:0;max-width:680px}
.form-field,.form-input,.form-select,.form-textarea,.form-option,.form-checkbox{min-width:0}
.form-input,.form-select,.form-textarea{max-width:100%}
@media(max-width:1000px){
 .hero{grid-template-columns:1fr}
 .hero-visual{max-width:620px;justify-self:center}
 .form-layout{grid-template-columns:1fr}
 .form-editorial{position:static;text-align:left}
 .form-headline,.form-body{margin-left:0;margin-right:0}
 .form-container{width:100%;max-width:760px;justify-self:start}
}
@media(max-width:767px){
 html{scroll-padding-top:88px} section[id]{scroll-margin-top:88px}
 .nav-wrapper{top:10px;padding:0 10px}
 .nav-glass{height:56px;padding:0 8px 0 12px}
 .nav-logo-image{width:27px!important;height:27px!important}
 .nav-logo-text{font-size:14px}
 .hero{width:100%;padding-left:20px;padding-right:20px}
 .hero-art-wrap{width:100%;max-width:520px}
 .hero-art-float{max-width:calc(100% - 16px)}
 .demo-tabs{margin-top:30px;padding-bottom:5px;overflow-x:auto;overscroll-behavior-x:contain}
 .demo-tab{min-height:44px;padding:10px 17px}
 .form-layout{width:100%;grid-template-columns:1fr;gap:40px}
 .form-headline{max-width:620px;font-size:clamp(42px,12vw,56px);line-height:.98}
 .form-container{width:100%;padding:28px 20px;border-radius:20px}
}
@media(max-width:380px){.hero{padding-left:16px;padding-right:16px}.hero-headline{font-size:42px}.form-container{padding-left:16px;padding-right:16px}}