@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;
}

/* =========================================================================
   Demo — mobile tool cards (Semrush-style). Hidden by default (desktop/tablet
   use the interactive device); shown < 820px, where that device is too dense
   to read. Each card is a <details>: the summary holds an animated mini-visual
   of that tool's screen; tapping expands two real detail rows from the scene.
   In-view animations fire when home-v2.js adds .is-inview (IntersectionObserver);
   without JS the cards simply render static — nothing stays hidden.
   ========================================================================= */
.demo-mobile-cards { display: none; }
.demo-m-card {
  border: 1px solid #e6e9f0;
  border-radius: 16px;
  background: #fff;
  padding: 18px 18px 16px;
  box-shadow: 0 1px 2px rgba(11,21,38,.04), 0 18px 40px -24px rgba(11,21,38,.16);
}
.demo-m-card summary { list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.demo-m-card summary::-webkit-details-marker { display: none; }
.demo-m-card summary:focus-visible { outline: 2px solid #2f5fe0; outline-offset: 4px; border-radius: 8px; }
.demo-m-head { display: flex; align-items: center; gap: 9px; }
.demo-m-dot { flex: none; width: 20px; height: 20px; border-radius: 6px; }
.demo-m-tool { font: 11.5px/1 'Zoho_Puvi_Bold', Arial, sans-serif; letter-spacing: 1.6px; text-transform: uppercase; color: #8a93a5; }
.demo-m-more { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font: 12px/1 'Zoho_Puvi_SemiBold', Arial, sans-serif; color: #2f5fe0; }
.demo-m-more::after { content: '▾'; font-size: 13px; line-height: 1; transition: transform .2s ease; }
.demo-m-card[open] .demo-m-more::after { transform: rotate(180deg); }
.demo-m-title { margin: 12px 0 0; font: 19px/1.25 'Zoho_Puvi_SemiBold', Arial, sans-serif; letter-spacing: -.4px; color: #0b1526; }

/* mini-visual shell (a simplified screen of the tool) */
.demo-m-vis { margin-top: 14px; border: 1px solid #eceef4; border-radius: 12px; background: #f7f8fc; padding: 12px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }

/* engine chips (AI Visibility) */
.demo-m-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.demo-m-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; border: 1px solid #e6e9f0; background: #fff; font: 11px/1 'Zoho_Puvi_SemiBold', Arial, sans-serif; color: #3c4657; }
.demo-m-chip i { width: 6px; height: 6px; border-radius: 50%; }

/* gradient hero-stat card (AI Visibility / Rank Tracker) */
.demo-m-stat { border-radius: 12px; padding: 12px 14px; color: #fff; }
.demo-m-stat--ai { background: linear-gradient(135deg,#41277d,#6a3fd0); }
.demo-m-stat--rt { background: linear-gradient(135deg,#1c2857,#3346b8); }
.demo-m-stat-lbl { font: 9.5px/1 'Zoho_Puvi_Bold', Arial, sans-serif; letter-spacing: 1.3px; text-transform: uppercase; color: rgba(255,255,255,.75); }
.demo-m-stat-row { margin-top: 8px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.demo-m-num { font: 30px/1 'Zoho_Puvi_Bold', Arial, sans-serif; letter-spacing: -.5px; }
.demo-m-delta { padding: 3px 8px; border-radius: 999px; background: rgba(126,226,176,.18); font: 10.5px/1 'Zoho_Puvi_SemiBold', Arial, sans-serif; color: #8ee7b8; }

/* trend sparkline (Rank Tracker) */
.demo-m-trend { display: block; width: 100%; height: 56px; }

/* health ring + counters (Site Audit) */
.demo-m-vis--audit { flex-direction: row; align-items: center; gap: 14px; background: #fff; }
.demo-m-ringsvg { flex: none; }
.demo-m-ringsvg text { font: 26px 'Zoho_Puvi_Bold', Arial, sans-serif; fill: #0b1526; }
.demo-m-audit-side { display: flex; gap: 8px; flex: 1; min-width: 0; }
.demo-m-mini { flex: 1; text-align: center; border: 1px solid #f0f2f7; border-radius: 10px; padding: 10px 6px; background: #fff; }
.demo-m-mini b { display: block; font: 18px/1 'Zoho_Puvi_Bold', Arial, sans-serif; }
.demo-m-mini span { display: block; margin-top: 6px; font: 9px/1 'Zoho_Puvi_Bold', Arial, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: #8a93a5; }

/* mini position map (Local Rank) — defined after .demo-m-vis so it overrides */
.demo-m-map { position: relative; height: 160px; padding: 0; background: linear-gradient(115deg,#edf1ec 0%,#e9eef3 55%,#eef0ea 100%); }
.demo-m-road { position: absolute; background: #fff; opacity: .85; }
.demo-m-road--a { left: -5%; top: 44%; width: 112%; height: 6px; transform: rotate(-4deg); }
.demo-m-road--b { left: -5%; top: 74%; width: 112%; height: 4px; transform: rotate(2.5deg); }
.demo-m-road--c { left: 32%; top: -6%; width: 4px; height: 114%; transform: rotate(6deg); }
.demo-m-pin { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: #1e9e5a; border: 2px solid #fff; box-shadow: 0 4px 10px rgba(11,21,38,.28); display: grid; place-items: center; font: 12px/1 'Zoho_Puvi_Bold', Arial, sans-serif; color: #fff; }
.demo-m-pin--you { width: 36px; height: 36px; margin: -18px 0 0 -18px; background: #2f5fe0; border-width: 3px; box-shadow: 0 0 0 4px rgba(47,95,224,.25), 0 6px 14px rgba(11,21,38,.3); font-size: 8.5px; letter-spacing: .5px; }
.demo-m-pin--mid { background: #e8890c; }
.demo-m-maptag { position: absolute; left: 10px; top: 10px; padding: 6px 10px; border-radius: 8px; background: #fff; box-shadow: 0 4px 14px rgba(11,21,38,.12); font: 10.5px/1 'Zoho_Puvi_SemiBold', Arial, sans-serif; color: #232f42; }

/* expanded detail rows */
.demo-m-body { margin-top: 14px; border-top: 1px solid #f0f2f7; padding-top: 12px; }
.demo-m-desc { margin: 0 0 10px; font: 14px/1.55 'Zoho_Puvi_Regular', Arial, sans-serif; color: #5a6577; }
.demo-m-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid #f6f7fa; }
.demo-m-row:last-child { border-bottom: none; padding-bottom: 0; }
.demo-m-q { font: 13px/1.35 'Zoho_Puvi_Medium', Arial, sans-serif; color: #232f42; min-width: 0; }
.demo-m-val { flex: none; font: 12px/1 'Zoho_Puvi_SemiBold', Arial, sans-serif; }
.demo-m-val--ok { color: #19b66a; }
.demo-m-val--opp { color: #ff6a00; }
.demo-m-val--pos { display: inline-flex; align-items: center; gap: 6px; color: #19b66a; }
.demo-m-val--pos b { display: inline-block; padding: 3px 8px; border-radius: 7px; background: #0b1526; font: 11.5px/1 'Zoho_Puvi_SemiBold', Arial, sans-serif; color: #fff; }

/* CTA */
.demo-m-cta { display: flex; align-items: center; justify-content: center; min-height: 50px; border-radius: 12px; text-decoration: none; font: 15px/1 'Zoho_Puvi_SemiBold', Arial, sans-serif; color: #fff; background: linear-gradient(135deg,#ff8b1f,#ff5d00); box-shadow: 0 12px 26px -10px rgba(255,102,0,.4); }

/* in-view animations (reuse the scene keyframes; pins get per-pin inline delays) */
.demo-m-card.is-inview .demo-m-chip { animation: demoIn .4s ease both; }
.demo-m-card.is-inview .demo-m-chip:nth-child(2) { animation-delay: .12s; }
.demo-m-card.is-inview .demo-m-chip:nth-child(3) { animation-delay: .24s; }
.demo-m-card.is-inview .demo-m-chip:nth-child(4) { animation-delay: .36s; }
.demo-m-card.is-inview .demo-m-stat { animation: demoIn .5s ease .15s both; }
.demo-m-card.is-inview .demo-m-num { display: inline-block; animation: demoPop .5s ease .45s both; }
.demo-m-card.is-inview .demo-m-line { animation: demoDraw 1.8s ease .5s both; }
.demo-m-card.is-inview .demo-m-linedot { animation: demoFadeIn .3s ease 2.1s both; }
.demo-m-card.is-inview .demo-m-ring { animation: demoRing 1.6s ease .3s both; }
.demo-m-card.is-inview .demo-m-mini { animation: demoIn .4s ease 1.1s both; }
.demo-m-card.is-inview .demo-m-mini + .demo-m-mini { animation-delay: 1.25s; }
.demo-m-card.is-inview .demo-m-pin { animation: demoPop .4s ease both; }
.demo-m-card.is-inview .demo-m-maptag { animation: demoIn .4s ease 1.3s both; }

/* =========================================================================
   Personas — mobile swipe carousel · How-it-works — mobile numbered timeline.
   Two deliberately different patterns from the demo cards so the mobile page
   doesn't read as one long card stack. Hidden by default (desktop keeps the
   tab grids); shown < 820px.
   ========================================================================= */
.persona-m-hint, .persona-m-cards { display: none; }
.persona-m-card { flex: 0 0 84%; scroll-snap-align: center; border: 1px solid #e6e9f0; border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 1px 2px rgba(11,21,38,.04), 0 18px 40px -24px rgba(11,21,38,.16); }
.persona-m-band { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; color: #fff; }
.persona-m-band strong { font: 14.5px/1.2 'Zoho_Puvi_SemiBold', Arial, sans-serif; }
.persona-m-band span { font: 11px/1.2 'Zoho_Puvi_Medium', Arial, sans-serif; color: rgba(255,255,255,.85); text-align: right; }
.persona-m-inner { padding: 16px; }
.persona-m-inner h3 { margin: 0 0 8px; font: 18px/1.3 'Zoho_Puvi_SemiBold', Arial, sans-serif; letter-spacing: -.3px; color: #0b1526; }
.persona-m-inner p { margin: 0 0 14px; font: 13.5px/1.55 'Zoho_Puvi_Regular', Arial, sans-serif; color: #5a6577; }
.persona-m-inner ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.persona-m-inner li { display: flex; align-items: flex-start; gap: 9px; font: 13px/1.45 'Zoho_Puvi_Medium', Arial, sans-serif; color: #232f42; }
.persona-m-inner li i { flex: none; width: 18px; height: 18px; border-radius: 50%; background: #eafaf1; display: grid; place-items: center; font: 10px/1 'Zoho_Puvi_Bold', Arial, sans-serif; font-style: normal; color: #19b66a; }

.how-m-steps { display: none; }
.how-m-step { position: relative; padding: 0 0 26px 52px; }
.how-m-step:last-child { padding-bottom: 0; }
.how-m-step::before { content: ''; position: absolute; left: 17px; top: 40px; bottom: 4px; width: 2px; border-radius: 1px; background: #e9ecf2; }
.how-m-step:last-child::before { display: none; }
.how-m-num { position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg,#ff8b1f,#ff5d00); color: #fff; display: grid; place-items: center; font: 12.5px/1 'Zoho_Puvi_Bold', Arial, sans-serif; box-shadow: 0 8px 18px -6px rgba(255,102,0,.5); }
.how-m-title { margin: 0; padding-top: 8px; font: 17px/1.3 'Zoho_Puvi_SemiBold', Arial, sans-serif; letter-spacing: -.3px; color: #0b1526; }
.how-m-desc { margin: 6px 0 0; font: 14px/1.55 'Zoho_Puvi_Regular', Arial, sans-serif; color: #5a6577; }
.how-m-steps.is-inview .how-m-step { animation: demoRowIn .45s ease both; }
.how-m-steps.is-inview .how-m-step:nth-child(2) { animation-delay: .3s; }
.how-m-steps.is-inview .how-m-step:nth-child(3) { animation-delay: .6s; }

/* =========================================================================
   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): on phones the interactive desktop app-mockup is too
     dense to read, so hide it (+ its tabs and swapping caption) and show the
     legible stacked tool cards instead. --- */
  .demo-h2 {
    font-size: 26px !important;
    line-height: 1.2 !important;
  }
  .demo-chips-row,
  .demo-device-scroll,
  .demo-caption-row {
    display: none !important;
  }
  .demo-mobile-cards {
    display: flex !important;
    flex-direction: column;
    gap: 14px;
    margin-top: 28px;
  }

  /* --- Personas (Task 7): tab grid is unusable on phones — swap it for the
     swipe carousel (next card peeks in from the right to invite the swipe). --- */
  .persona-h2 {
    font-size: 26px !important;
    line-height: 1.2 !important;
  }
  .persona-grid {
    display: none !important;
  }
  .persona-m-hint {
    display: block !important;
    margin: 0 0 12px;
    text-align: right;
    font: 12px/1 'Zoho_Puvi_SemiBold', Arial, sans-serif;
    color: #8a93a5;
  }
  .persona-m-cards {
    display: flex !important;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 0 -28px;
    padding: 4px 28px 18px;
    scrollbar-width: none;
  }
  .persona-m-cards::-webkit-scrollbar { display: none; }

  /* --- 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): tab grid → vertical numbered
     timeline (it's a real 3-step sequence; the stepper encodes that). --- */
  .how-h2 {
    font-size: 26px !important;
    line-height: 1.2 !important;
  }
  .how-grid {
    display: none !important;
  }
  .how-m-steps {
    display: block !important;
    max-width: 460px;
    margin: 0 auto;
  }

  /* --- 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; }
}