@font-face { font-family: "Zoho_Puvi_Regular";  src: url("https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.woff2")  format("woff2"); font-display: swap; }
@font-face { font-family: "Zoho_Puvi_Medium";   src: url("https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Medium.woff2")   format("woff2"); font-display: swap; }
@font-face { font-family: "Zoho_Puvi_SemiBold"; src: url("https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Semibold.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Zoho_Puvi_Bold";     src: url("https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Bold.woff2")     format("woff2"); font-display: swap; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fffaf3; color: #0b1526; font: 17px/1.5 "Zoho_Puvi_Regular", Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: rgba(255,122,0,.25); }
@keyframes heroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pulseDot { 0%,100% { box-shadow: 0 0 0 0 rgba(61,220,151,.5); } 60% { box-shadow: 0 0 0 8px rgba(61,220,151,0); } }
@keyframes scanline { 0% { transform: translateX(-100%);} 100% { transform: translateX(340%);} }
@keyframes rankPop { 0% { transform: translateY(3px) scale(.92); opacity:.35; } 60% { transform: translateY(0) scale(1.06); opacity:1; } 100% { transform: none; } }
@keyframes blobFloat { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(24px,-18px) scale(1.08); } }
@keyframes demoIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes demoRowIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes demoPop { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.07); } 100% { opacity: 1; transform: scale(1); } }
@keyframes demoGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes demoDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes demoFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes demoRing { from { stroke-dashoffset: 1; } to { stroke-dashoffset: .16; } }
@keyframes demoProgress { from { width: 0; } to { width: 100%; } }
@keyframes demoFlash { 0%,100% { background: #fff; } 45% { background: #eef3ff; } }
@keyframes demoTarget { 0% { box-shadow: 0 0 0 0 rgba(255,106,0,0); } 25% { box-shadow: 0 0 0 4px rgba(255,106,0,.45); } 100% { box-shadow: 0 0 0 4px rgba(255,106,0,0); } }
@keyframes cursorA { 0%,18% { left: 60%; top: 12%; } 40%,56% { left: 45%; top: 34%; } 78%,100% { left: 7%; top: 14.5%; } }
@keyframes cursorB { 0%,18% { left: 7%; top: 14.5%; } 40%,56% { left: 45%; top: 40%; } 78%,100% { left: 7%; top: 19.5%; } }
@keyframes cursorC { 0%,18% { left: 7%; top: 19.5%; } 40%,56% { left: 58%; top: 24%; } 78%,100% { left: 7%; top: 24.5%; } }
@keyframes cursorD { 0%,18% { left: 7%; top: 24.5%; } 40%,56% { left: 80%; top: 30%; } 78%,100% { left: 7%; top: 9.5%; } }
@keyframes demoClickD { 0%,44% { opacity: 0; transform: scale(.3); } 48% { opacity: .55; transform: scale(.6); } 58% { opacity: 0; transform: scale(2.1); } 59%,86% { opacity: 0; transform: scale(.3); } 90% { opacity: .55; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.1); } }
@keyframes demoClickA { 0%,44% { opacity: 0; transform: scale(.3); } 48% { opacity: .55; transform: scale(.6); } 58% { opacity: 0; transform: scale(2.1); } 59%,86% { opacity: 0; transform: scale(.3); } 90% { opacity: .55; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.1); } }
@keyframes demoClickB { 0%,44% { opacity: 0; transform: scale(.3); } 48% { opacity: .55; transform: scale(.6); } 58% { opacity: 0; transform: scale(2.1); } 59%,86% { opacity: 0; transform: scale(.3); } 90% { opacity: .55; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.1); } }
@keyframes demoClickC { 0%,44% { opacity: 0; transform: scale(.3); } 48% { opacity: .55; transform: scale(.6); } 58% { opacity: 0; transform: scale(2.1); } 59%,86% { opacity: 0; transform: scale(.3); } 90% { opacity: .55; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.1); } }

/* =========================================================================
   Interactive-state CSS (Task 3 / port-reference §4)
   Delta rules only — base/static styles are inlined by the markup tasks
   (4-7) that add the [data-*] hooks. Each block below is the .is-active /
   .is-scrolled / .is-open / .is-pulse state for one hook.
   ========================================================================= */

/* --- Sticky nav (header) --- */
[data-landing-nav].is-scrolled {
  background: rgba(255,250,243,.82) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 1px 0 rgba(11,21,38,.07), 0 10px 28px -16px rgba(11,21,38,.28) !important;
}

/* --- Mobile menu (header) --- */
[data-nav-menu].is-open {
  display: flex !important;
}

/* --- Hero rank counter (hero scorecard) --- */
[data-google-rank].is-pulse {
  transform: scale(1.14) !important;
}

/* --- Self-cycling demo (demo section) --- */
[data-demo-scene].is-active {
  display: flex !important;
}

[data-demo-chip].is-active {
  border-color: rgba(255,106,0,.55) !important;
  box-shadow: 0 10px 26px -10px rgba(255,102,0,.35) !important;
  color: #0b1526 !important; /* chip label text — cascades to label (base #5a6577) */
}

[data-demo-chip].is-active [data-demo-progress] {
  height: 100% !important;
  border-radius: 2px !important;
  background: linear-gradient(90deg,#ff8b1f,#ff5d00) !important;
  animation: demoProgress 6s linear both !important;
}

[data-demo-nav].is-active {
  background: #eef3ff !important;
  color: #2f5fe0 !important;
  font-family: 'Zoho_Puvi_SemiBold' !important;
}

[data-demo-nav].is-disabled {
  opacity: .5 !important;
  cursor: default !important;
}

/* --- How-it-works (verdict section) --- */
[data-how-panel].is-active {
  display: flex !important;
}

[data-how-btn].is-active {
  border-color: rgba(255,106,0,.55) !important;
  box-shadow: 0 12px 30px -14px rgba(255,102,0,.35) !important;
  color: #ff6a00 !important; /* step number text — cascades to num (base #b6bdc9) */
}

[data-how-btn].is-active [data-how-progress] {
  animation: demoProgress 5.5s linear both !important;
}

/* --- Persona tabs (personas section) --- */
[data-persona-tab].is-active {
  border-color: rgba(255,106,0,.55) !important;
  background: linear-gradient(160deg,#fff7ef,#fff) !important;
  box-shadow: 0 12px 30px -14px rgba(255,102,0,.35) !important;
  color: #c25100 !important; /* blurb text — cascades to blurb (base #8a93a5) */
}

[data-persona-vis].is-active {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* =========================================================================
   Trust strip base styles (Task 5 — port-reference §3 wires this via
   classes, not the mockup's inline styles; values below mirror the
   mockup's inline trust-strip so the visual stays consistent).
   ========================================================================= */
.trust-strip {
  position: relative;
  max-width: 1080px;
  margin: 26px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(11,21,38,.07);
  text-align: center;
}
.trust-strip p {
  margin: 0 0 14px;
  font: 11.5px/1 'Zoho_Puvi_Bold', Arial, sans-serif;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #b6bdc9;
}
.trust-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
}
.trust-logos picture {
  display: inline-flex;
  align-items: center;
}
.trust-logos img {
  display: block;
  height: 28px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .55;
  transition: opacity .15s, filter .15s;
}
.trust-logos img:hover {
  opacity: .95;
  filter: grayscale(0);
}

/* =========================================================================
   FAQ base styles (Task 9). The `marketing.partials.faq` component is
   shared with other marketing pages (styled there via public/css/style.css),
   but layouts.landing only loads home-v2.css — so its classes need a home
   here to match this page's visual language.
   ========================================================================= */
.faq-section {
  background: #f7f8fb;
  padding: 110px 28px;
}
.faq-section .section-inner {
  margin: 0 auto 56px;
}
.faq-section .section-inner.centered {
  text-align: center;
}
.faq-section .section-inner.narrow {
  max-width: 640px;
}
.faq-section .eyebrow {
  margin: 0 0 14px;
  font: 12px/1 'Zoho_Puvi_Bold', Arial, sans-serif;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #8a93a5;
}
.faq-section .eyebrow.orange {
  color: #ff6a00;
}
.faq-section .section-inner h2 {
  margin: 0;
  font: 46px/1.08 'Zoho_Puvi_SemiBold', Arial, sans-serif;
  letter-spacing: -1.6px;
  color: #0b1526;
}
.faq-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start; /* collapsed cards size to their own height (no blank stretch next to an open one) */
  gap: 16px;
  max-width: 980px;
  margin: 0 auto;
}
.faq-list details {
  border: 1px solid #e6e9f0;
  border-radius: 16px;
  background: #fff;
  padding: 22px 24px;
}
.faq-list summary {
  margin: 0;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 26px;
  font: 16.5px/1.35 'Zoho_Puvi_SemiBold', Arial, sans-serif;
  color: #0b1526;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: -2px;
  font: 22px/1 'Zoho_Puvi_Regular', Arial, sans-serif;
  color: #8a93a5;
}
.faq-list details[open] summary::after {
  content: '\2212';
}
.faq-list details p {
  margin: 14px 0 0;
  font: 14.5px/1.6 'Zoho_Puvi_Regular', Arial, sans-serif;
  color: #5a6577;
}

/* =========================================================================
   Responsive safety net (Task 5 / port-reference §6)
   Global reset + light mobile rules — not pixel-perfect mobile, just
   usable and non-embarrassing on a phone. Section-specific stacking/type
   rules are appended here by each section's port task (5-9).
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
img, picture, svg, video { max-width: 100%; height: auto; }

@media (max-width: 820px) {
  /* --- Hero (Task 5) --- */
  .lp-hero-h1 {
    font-size: 32px !important;
    line-height: 1.15 !important;
    max-width: 100% !important;
    letter-spacing: -1px !important;
  }
  .hero-cta-form {
    flex-direction: column !important;
    max-width: 100% !important;
  }
  .hero-cta-form button {
    width: 100% !important;
  }
  .hero-scorecard-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .trust-strip {
    gap: 18px !important;
  }
  .trust-logos {
    gap: 20px !important;
  }

  /* --- Demo (Task 6) --- */
  .demo-h2 {
    font-size: 26px !important;
    line-height: 1.2 !important;
  }
  .demo-chips-row {
    flex-direction: column !important;
  }
  .demo-device-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .demo-device {
    min-width: 720px !important;
  }

  /* --- Personas (Task 7) --- */
  .persona-h2 {
    font-size: 26px !important;
    line-height: 1.2 !important;
  }
  .persona-grid {
    grid-template-columns: 1fr !important;
  }

  /* --- AI citations (Task 7) --- */
  .ai-h2 {
    font-size: 26px !important;
    line-height: 1.2 !important;
  }
  .ai-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* --- Verdict / how-it-works (Task 7) --- */
  .how-h2 {
    font-size: 26px !important;
    line-height: 1.2 !important;
  }
  .how-grid {
    grid-template-columns: 1fr !important;
  }

  /* --- SEO stack (Task 7) --- */
  .stack-h2 {
    font-size: 26px !important;
    line-height: 1.2 !important;
  }
  .stack-header {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .stack-grid {
    grid-template-columns: 1fr !important;
  }
  .stack-grid article {
    grid-column: span 1 !important;
  }

  /* --- Pricing math (Task 8) --- */
  .pricing-math-h2 {
    font-size: 26px !important;
    line-height: 1.2 !important;
  }
  .pricing-math-grid {
    grid-template-columns: 1fr !important;
  }

  /* --- Pricing tiers (Task 8) --- */
  .tiers-h2 {
    font-size: 26px !important;
    line-height: 1.2 !important;
  }
  .tier-cards-grid {
    grid-template-columns: 1fr !important;
  }

  /* --- Testimonials (Task 9) --- */
  .tm-h2 {
    font-size: 26px !important;
    line-height: 1.2 !important;
  }
  .testimonials-grid {
    grid-template-columns: 1fr !important;
  }

  /* --- FAQ (Task 9) --- */
  .faq-section {
    padding: 64px 20px !important;
  }
  .faq-section .section-inner h2 {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }
  .faq-list {
    grid-template-columns: 1fr !important;
  }

  /* --- Final CTA (Task 9) --- */
  .cta-band-h2 {
    font-size: 28px !important;
    line-height: 1.15 !important;
  }
}

/* Landing has no IntersectionObserver (script.js not loaded); reveal-on-scroll
   elements must never stay hidden here. */
.reveal { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}