/* ==========================================================================
   InstaSite homepage v3 - design layer (preview). Loaded AFTER style.css and
   landing.css; everything is scoped to body.v3 so no other page is affected.
   Tokens · type · bento · aurora hero · calm motion · dark mode.
   ========================================================================== */
body.v3{
  --c-bg:#FFFFFF; --c-surface:#F6F8FB; --c-card:#FFFFFF; --c-border:#E3E8EF; --c-border-2:#D5DCE6;
  --c-text:#0F172A; --c-text-2:#475569; --c-text-3:#64748B;
  --c-action:#1D4ED8; --c-action-h:#1E40AF; --c-on-action:#FFFFFF; --c-brand-soft:#EAF0FE;
  --c-success:#047857; --c-success-soft:#E7F6EF; --c-warm:#F59E0B;
  --r-sm:8px; --r-md:14px; --r-lg:24px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(15,23,42,.06); --sh-2:0 4px 16px rgba(15,23,42,.08); --sh-3:0 16px 40px rgba(15,23,42,.12);
  --f-head:'Rubik','Heebo',system-ui,sans-serif; --f-body:'Heebo',system-ui,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  /* re-point the v2 tokens so legacy components follow the new palette */
  --v2-accent:var(--c-action); --v2-accent-2:#3B82F6; --v2-cta:var(--c-action); --v2-cta-2:var(--c-action-h);
  --v2-grad:linear-gradient(90deg,#1D4ED8,#0EA5E9); --v2-grad-cta:var(--c-action);
  --v2-card:var(--c-card); --v2-line:var(--c-border); --v2-line-strong:var(--c-border-2);
  --v2-text-soft:var(--c-text-2); --v2-bg-1:var(--c-bg); --v2-bg-2:var(--c-surface);
  --v2-shadow-sm:var(--sh-1); --v2-shadow:var(--sh-2); --v2-shadow-lg:var(--sh-3);
  font-family:var(--f-body); color:var(--c-text); background:var(--c-bg);
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
@media (prefers-color-scheme: dark){
  body.v3{
    --c-bg:#0B1220; --c-surface:#0F1729; --c-card:#131D33; --c-border:#24314D; --c-border-2:#2E3D5C;
    --c-text:#F1F5F9; --c-text-2:#A7B3C6; --c-text-3:#8592A8;
    --c-action:#5B8CFF; --c-action-h:#7AA2FF; --c-on-action:#0B1220; --c-brand-soft:#1A2A55;
    --c-success:#34D399; --c-success-soft:rgba(52,211,153,.12);
    --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 6px 20px rgba(0,0,0,.35); --sh-3:0 18px 44px rgba(0,0,0,.45);
  }
}
body.v3::before{display:none}
body.v3 h1, body.v3 h2, body.v3 h3{font-family:var(--f-head); color:var(--c-text); letter-spacing:-.01em}
body.v3 :focus-visible{outline:3px solid #93C5FD; outline-offset:2px; border-radius:6px}
body.v3 a{transition:color .15s var(--ease)}

/* hide what moved into the page (CSS only - markup + their scripts stay intact) */
body.v3 #v2StickyCta, body.v3 #instasite-demo-fab, body.v3 #v2FreeChip, body.v3 #v2TrustDetails{display:none !important}
body.v3.v2-has-sticky, body.v3{padding-bottom:0}

/* ---------- buttons ---------- */
body.v3 .v3-btn, body.v3 .v2-cta-primary{display:inline-flex}
body.v3 .v3-btn, body.v3 .v2-cta-primary, body.v3 .nav .btn{
  align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 22px; border-radius:var(--r-md);
  font:700 16px/1 var(--f-body); text-decoration:none; cursor:pointer;
  transition:background .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease);
}
body.v3 .v3-btn-primary, body.v3 .v2-cta-primary, body.v3 .nav .btn-primary{
  background:var(--c-action) !important; color:var(--c-on-action) !important; border:0 !important;
  box-shadow:var(--sh-1) !important; filter:none !important; animation:none !important;
}
body.v3 .v3-btn-primary:hover, body.v3 .v2-cta-primary:hover, body.v3 .nav .btn-primary:hover{
  background:var(--c-action-h) !important; transform:translateY(-1px); box-shadow:var(--sh-2) !important;
}
body.v3 .v3-btn-secondary, body.v3 .nav .btn-ghost{
  background:transparent !important; color:var(--c-text) !important; border:1.5px solid var(--c-border-2) !important; box-shadow:none !important;
}
body.v3 .v3-btn-secondary:hover, body.v3 .nav .btn-ghost:hover{border-color:var(--c-action) !important; color:var(--c-action) !important}
body.v3 .v2-cta-primary [aria-hidden="true"]{display:inline-block}
body.v3[dir="ltr"] .v2-cta-primary [aria-hidden="true"], html[dir="ltr"] body.v3 .v2-cta-primary [aria-hidden="true"]{transform:scaleX(-1)}

/* ---------- nav ---------- */
body.v3 .nav{background:color-mix(in srgb, var(--c-bg) 82%, transparent) !important; backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--c-border) !important; box-shadow:none !important}
body.v3 .nav .logo{font-family:var(--f-head); font-weight:700; color:var(--c-text); letter-spacing:-.01em}
body.v3 .nav .logo-dot{background:var(--c-action) !important; box-shadow:none !important}
body.v3 .nav-links .muted-link{color:var(--c-text-2) !important; font-weight:500; font-size:15px; padding:12px 8px; border-radius:var(--r-sm)}
body.v3 .nav-links .muted-link:hover{color:var(--c-text) !important; background:var(--c-surface)}
body.v3 .nav-more-btn{color:var(--c-text-2); font:500 15px var(--f-body); min-height:44px; padding:0 8px}
body.v3 .nav .btn{min-height:40px; font-size:14.5px; padding:0 16px}
.nav-more-menu a.muted-link{padding:10px 14px !important}

/* ---------- hero ---------- */
body.v3 .v3-hero{position:relative; overflow:hidden; isolation:isolate; padding:72px 0 88px; background:none}
body.v3 .v3-hero::before, body.v3 .v3-hero::after{display:none !important}
body.v3 .v3-aurora{position:absolute; inset:-20% -10% auto; height:120%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(40% 50% at 78% 18%, rgba(59,130,246,.20), transparent 70%),
    radial-gradient(35% 45% at 22% 30%, rgba(99,102,241,.16), transparent 70%),
    radial-gradient(30% 35% at 55% 70%, rgba(14,165,233,.10), transparent 70%);
  filter:blur(8px);
  -webkit-mask-image:linear-gradient(#000 55%, transparent); mask-image:linear-gradient(#000 55%, transparent)}
@media (prefers-color-scheme: dark){
  body.v3 .v3-aurora{background:
    radial-gradient(40% 50% at 78% 18%, rgba(59,130,246,.22), transparent 70%),
    radial-gradient(35% 45% at 22% 30%, rgba(99,102,241,.20), transparent 70%),
    radial-gradient(30% 35% at 55% 70%, rgba(14,165,233,.12), transparent 70%)}
}
body.v3 .v2-hero-grid{max-width:1200px; gap:56px}
body.v3 .v2-eyebrow{background:var(--c-card) !important; border:1px solid var(--c-border) !important; color:var(--c-text-2) !important;
  font:500 14px var(--f-body); letter-spacing:0; padding:6px 14px; box-shadow:var(--sh-1)}
body.v3 .v2-eyebrow .dot{background:var(--c-success) !important; box-shadow:none !important; animation:none !important}
body.v3 h1.v2-headline{font-family:var(--f-head) !important; font-weight:800 !important; font-size:clamp(34px,6.2vw,64px) !important;
  line-height:1.08 !important; letter-spacing:-.02em !important; margin:18px 0 18px}
body.v3 h1.v2-headline .v3-grad{background:none !important; background-image:linear-gradient(90deg,#1D4ED8,#0EA5E9) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent; color:transparent !important}
@media (prefers-color-scheme: dark){ body.v3 h1.v2-headline .v3-grad{background-image:linear-gradient(90deg,#7AA2FF,#38BDF8) !important} }
body.v3 .v2-sub{color:var(--c-text-2) !important; font-size:clamp(17px,2vw,20px) !important; line-height:1.6 !important; max-width:560px}
body.v3 .v2-sub b{color:var(--c-text) !important}

/* AI prompt card */
body.v3 .v2-starter{position:relative; background:var(--c-card) !important; border:1px solid var(--c-border) !important;
  border-radius:var(--r-lg) !important; padding:18px !important; box-shadow:var(--sh-3) !important; backdrop-filter:none !important;
  transition:box-shadow .25s var(--ease), border-color .25s var(--ease); max-width:560px}
body.v3 .v2-starter:focus-within{border-color:color-mix(in srgb, var(--c-action) 55%, var(--c-border)) !important;
  box-shadow:0 0 0 6px color-mix(in srgb, var(--c-action) 14%, transparent), var(--sh-3) !important}
body.v3 .v3-ai-label{display:flex; align-items:center; gap:8px; color:var(--c-text) !important; font:600 15px var(--f-body) !important;
  letter-spacing:0 !important; text-transform:none !important; margin-bottom:12px}
body.v3 .v3-ai-label::before{display:none !important}
body.v3 .v3-ai-label .v3-ico{color:var(--c-action)}
body.v3 .v2-starter input[type="text"], body.v3 .v2-starter select{
  min-height:52px; border-radius:var(--r-md) !important; border:1.5px solid var(--c-border) !important;
  background-color:var(--c-surface) !important; color:var(--c-text) !important; font:500 16.5px var(--f-body) !important;
  padding-inline:16px !important; box-shadow:none !important; margin-bottom:10px}
body.v3 .v2-starter select{background-position:left 16px center !important}
html[dir="ltr"] body.v3 .v2-starter select{background-position:right 16px center !important}
body.v3 .v2-starter input[type="text"]:focus, body.v3 .v2-starter select:focus{border-color:var(--c-action) !important; background-color:var(--c-card) !important; outline:none}
body.v3 .v2-starter .v2-cta-primary{width:100%; min-height:56px; font-size:17px; border-radius:var(--r-md)}
body.v3 .v2-starter-hint{color:var(--c-text-3) !important; font-size:14px !important; margin-top:12px; text-align:center}
body.v3 .v2-starter-hint::before{content:"" !important}

/* live preview card */
body.v3 .v2-preview{display:block; background:var(--c-card) !important; border:1px solid var(--c-border) !important;
  border-radius:var(--r-lg) !important; box-shadow:var(--sh-3) !important; overflow:hidden; animation:none !important; transform:none !important}
body.v3 .v2-preview-bar{background:var(--c-surface) !important; border-bottom:1px solid var(--c-border) !important; display:flex; align-items:center; gap:8px}
body.v3 .v2-preview-url{color:var(--c-text-3) !important}
body.v3 .v3-badge{margin-inline-start:auto; display:inline-flex; align-items:center; gap:6px; font:600 12px var(--f-body); color:var(--c-success);
  background:var(--c-success-soft); border-radius:var(--r-pill); padding:4px 10px}
body.v3 .v3-badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
body.v3 .v2-preview-body{background:var(--c-card) !important; color:var(--c-text) !important}
body.v3 .v2-site-sub{color:var(--c-text-2) !important}
body.v3 .v2-site-feat{background:var(--c-surface) !important; border:1px solid var(--c-border) !important; border-radius:var(--r-md) !important; color:var(--c-text-2)}
body.v3 .v2-site-feat strong{color:var(--c-text)}
body.v3 .v2-site-cta{background:var(--c-action) !important; color:var(--c-on-action) !important; border-radius:var(--r-md) !important; box-shadow:none !important}
@media (max-width:767px){
  body.v3 .v3-hero{padding:28px 0 40px}
  body.v3 .v2-preview{display:block !important; max-width:420px; margin:0 auto}
  body.v3 .v2-preview-body{min-height:0 !important; padding:16px !important}
  body.v3 .v2-site-feats{display:none !important}
  body.v3 .v2-site-sub{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
  body.v3 .v2-starter{padding:14px !important}
}

/* ---------- sections ---------- */
body.v3 .v2-sec{padding:88px 0}
@media (max-width:767px){ body.v3 .v2-sec{padding:56px 0} }
body.v3 .v2-sec-head{max-width:760px; margin:0 auto 44px}
body.v3 .v2-sec-kicker{display:inline-block; background:var(--c-brand-soft) !important; color:var(--c-action) !important;
  font:600 14px var(--f-body) !important; letter-spacing:0 !important; text-transform:none !important;
  padding:5px 12px; border-radius:var(--r-pill); margin-bottom:14px; border:0 !important}
body.v3 .v2-sec-head h2{font-family:var(--f-head) !important; font-weight:700 !important; font-size:clamp(28px,4vw,42px) !important;
  line-height:1.15 !important; letter-spacing:-.015em !important; color:var(--c-text) !important; margin-bottom:12px}
body.v3 .v2-sec-head p{color:var(--c-text-2) !important; font-size:18px !important; line-height:1.6}
body.v3 #how, body.v3 #examples, body.v3 .v3-pricing, body.v3 .v3-final{background:transparent}
body.v3 .v3-proof, body.v3 .v3-why, body.v3 .v3-faq{background:var(--c-surface) !important}

/* proof band */
body.v3 .v3-proof .ls-counters{max-width:960px; margin:0 auto; gap:16px}
body.v3 .v3-proof .ls-counter:has(> [data-stat="total_visits"]),
body.v3 .v3-proof .ls-counter:has(> [data-stat="total_leads"]),
body.v3 .v3-proof .ls-counter:has(> [data-stat="sites_this_week"]){display:none}
@media (min-width:768px){ body.v3 .v3-proof .ls-counters{grid-template-columns:repeat(4,1fr) !important} }
body.v3 .v3-proof .ls-counter{background:var(--c-card) !important; border:1px solid var(--c-border) !important; border-radius:var(--r-md) !important;
  box-shadow:var(--sh-1) !important; padding:22px 16px !important; text-align:center}
body.v3 .v3-proof .ls-counter .num{font:700 clamp(28px,4vw,40px)/1.1 var(--f-head) !important; color:var(--c-text) !important;
  background:none !important; -webkit-text-fill-color:currentColor !important; font-variant-numeric:tabular-nums}
body.v3 .v3-proof .ls-counter .lbl{color:var(--c-text-2) !important; font-size:15px !important; margin-top:6px}
body.v3 .v3-more{max-width:1100px; margin:24px auto 0; padding:0 20px}
body.v3 .v3-more > summary{cursor:pointer; list-style:none; text-align:center; color:var(--c-action); font-weight:600; min-height:44px; display:flex; align-items:center; justify-content:center}
body.v3 .v3-more > summary::-webkit-details-marker{display:none}
body.v3 .v3-more > summary::after{content:"▾"; margin-inline-start:6px; transition:transform .2s var(--ease)}
body.v3 .v3-more[open] > summary::after{transform:rotate(180deg)}
body.v3 .ls-panel{background:var(--c-card) !important; border:1px solid var(--c-border) !important; border-radius:var(--r-md) !important; box-shadow:none !important; color:var(--c-text)}
body.v3 .v3-strip{background:var(--c-surface) !important; padding:8px 0 72px !important; margin:0 !important}
body.v3 .v3-strip .isa-strip-head h2{font:700 22px var(--f-head) !important; color:var(--c-text) !important}
body.v3 .v3-strip .isa-strip-head p{color:var(--c-text-2) !important}
body.v3 .isa-card{background:var(--c-card) !important; border:1px solid var(--c-border) !important; border-radius:var(--r-md) !important; box-shadow:var(--sh-1) !important}
body.v3 .isa-card-name{color:var(--c-text) !important}
body.v3 .isa-card-type{color:var(--c-text-3) !important}
body.v3 .isa-strip-viewport:hover .isa-strip-track{animation-play-state:paused}

/* how it works */
body.v3 .v2-how-card{background:var(--c-card) !important; border:1px solid var(--c-border) !important; border-radius:var(--r-lg) !important;
  box-shadow:var(--sh-1) !important; padding:28px !important; transition:transform .25s var(--ease), box-shadow .25s var(--ease) !important}
body.v3 .v2-how-card:hover{transform:translateY(-3px) !important; box-shadow:var(--sh-2) !important; border-color:var(--c-border) !important}
body.v3 .v2-how-num{background:var(--c-brand-soft) !important; color:var(--c-action) !important; box-shadow:none !important; font-family:var(--f-head) !important}
body.v3 .v2-how-icon{width:48px; height:48px; border-radius:var(--r-md); display:grid; place-items:center; background:var(--c-surface);
  border:1px solid var(--c-border); color:var(--c-action); margin-bottom:16px; font-size:0}
body.v3 .v2-how-card h3{font-size:21px !important; font-weight:700 !important}
body.v3 .v2-how-card p{color:var(--c-text-2) !important; font-size:16px !important; line-height:1.6 !important}

/* icons */
.v3-ico{width:24px; height:24px; flex:none}
.v3-ico-sm{width:18px; height:18px}
.v3-ico-xs{width:16px; height:16px}

/* product tour */
body.v3 .v3-tabs{display:flex; gap:6px; justify-content:center; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
  padding:6px; margin:0 auto 32px; width:max-content; max-width:calc(100% - 32px);
  background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-pill)}
body.v3 .v3-tabs::-webkit-scrollbar{display:none}
body.v3 .v3-tab{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px; border:0; border-radius:var(--r-pill);
  background:transparent; color:var(--c-text-2); font:600 15px var(--f-body); cursor:pointer; white-space:nowrap;
  transition:background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease)}
body.v3 .v3-tab:hover{color:var(--c-text)}
body.v3 .v3-tab.is-on{background:var(--c-card); color:var(--c-text); box-shadow:var(--sh-1)}
body.v3 .v3-tour .v3-tour-panels{display:grid; max-width:1160px; margin:0 auto; padding:0 16px}
body.v3 .v3-tour .v3-tour-panels > section{grid-area:1/1; padding:32px 16px !important; margin:0 !important;
  background:var(--c-surface) !important; border:1px solid var(--c-border); border-radius:var(--r-lg);
  transition:opacity .35s var(--ease), visibility .35s}
body.v3 .v3-tour .v3-tour-panels > section > .v2-sec-head{margin-bottom:24px}
body.v3 .v3-tour .v3-tour-panels > section > .v2-sec-head .v2-sec-kicker{display:none}
body.v3 .v3-tour .v3-tour-panels > section > .v2-sec-head h2{font-size:clamp(22px,3vw,28px) !important}
body.v3 .v3-tour.v3-tabs-on .v3-tour-panels > section{opacity:0; visibility:hidden}
body.v3 .v3-tour.v3-tabs-on .v3-tour-panels > section.is-on{opacity:1; visibility:visible}
body.v3 .v3-tour:not(.v3-tabs-on) .v3-tabs{display:none}
body.v3 .v3-tour:not(.v3-tabs-on) .v3-tour-panels{gap:24px}
body.v3 .v3-tour:not(.v3-tabs-on) .v3-tour-panels > section{grid-area:auto}
body.v3 .v3-tour-cta{text-align:center; margin-top:28px}
body.v3 #dashboard-preview a[data-event-value="try_demo"]{background:var(--c-action) !important; box-shadow:var(--sh-1) !important; border-radius:var(--r-md) !important}

/* examples - native-feeling horizontal snap row on mobile */
body.v3 .v2-ex{background:var(--c-card) !important; border:1px solid var(--c-border) !important; border-radius:var(--r-lg) !important;
  box-shadow:var(--sh-1) !important; overflow:hidden; transition:transform .25s var(--ease), box-shadow .25s var(--ease) !important}
body.v3 .v2-ex:hover{transform:translateY(-3px) !important; box-shadow:var(--sh-2) !important}
body.v3 .v2-ex-meta strong{color:var(--c-text) !important}
body.v3 .v2-ex-meta span{color:var(--c-text-3) !important}
@media (max-width:767px){
  body.v3 .v2-examples{display:flex !important; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px !important;
    padding:4px 20px 12px !important; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  body.v3 .v2-examples::-webkit-scrollbar{display:none}
  body.v3 .v2-examples > *{flex:0 0 82%; scroll-snap-align:center}
}
body.v3 .v3-ad{margin:0 auto 24px !important}

/* why - bento */
body.v3 .v3-why .v2-why{display:grid !important; grid-template-columns:repeat(6,1fr) !important; gap:16px !important; max-width:1160px; margin:0 auto; padding:0 20px}
body.v3 .v3-why .v2-why-card{grid-column:span 6; display:flex !important; flex-direction:column; gap:14px; position:relative; overflow:hidden;
  background:var(--c-card) !important; border:1px solid var(--c-border) !important; border-radius:var(--r-lg) !important;
  padding:26px !important; box-shadow:var(--sh-1) !important; transition:transform .25s var(--ease), box-shadow .25s var(--ease)}
body.v3 .v3-why .v2-why-card:hover{transform:translateY(-3px); box-shadow:var(--sh-2) !important}
@media (min-width:768px){
  body.v3 .v3-why .v2-why-card:nth-child(1){grid-column:span 4}
  body.v3 .v3-why .v2-why-card:nth-child(2){grid-column:span 2; grid-row:span 2}
  body.v3 .v3-why .v2-why-card:nth-child(3){grid-column:span 2}
  body.v3 .v3-why .v2-why-card:nth-child(4){grid-column:span 2}
  body.v3 .v3-why .v2-why-card:nth-child(5){grid-column:span 3}
  body.v3 .v3-why .v2-why-card:nth-child(6){grid-column:span 3}
}
body.v3 .v3-why .v2-why-icon{width:44px; height:44px; border-radius:var(--r-md); display:grid; place-items:center; font-size:0;
  background:var(--c-brand-soft) !important; color:var(--c-action); border:0 !important; box-shadow:none !important; order:-2}
body.v3 .v3-why .v2-why-card h3{font-size:20px !important; font-weight:700 !important; margin-bottom:6px}
body.v3 .v3-why .v2-why-card p{color:var(--c-text-2) !important; font-size:15.5px !important; line-height:1.6 !important}
body.v3 .v3-mini{order:-1; border:1px solid var(--c-border); background:var(--c-surface); border-radius:var(--r-md); padding:14px; font-size:13.5px; color:var(--c-text-2)}
body.v3 .v3-mini-he{display:flex; flex-direction:column; gap:6px}
body.v3 .v3-mini-he span:first-child{font:700 17px var(--f-head); color:var(--c-text)}
body.v3 .v3-mini-phone{align-self:center; width:120px; height:190px; border-radius:22px; border:6px solid var(--c-text); background:var(--c-card);
  display:flex; flex-direction:column; gap:8px; padding:18px 10px}
body.v3 .v3-mini-phone i{display:block; height:10px; border-radius:6px; background:var(--c-border)}
body.v3 .v3-mini-phone i:first-child{width:80%; height:14px; background:var(--c-text-3); opacity:.5}
body.v3 .v3-mini-phone b{display:block; margin-top:auto; height:28px; border-radius:10px; background:var(--c-action)}
body.v3 .v3-mini-lead{display:flex; flex-direction:column; gap:4px; border-inline-start:3px solid var(--c-success)}
body.v3 .v3-mini-lead b{color:var(--c-text); font-weight:700}
body.v3 .v3-mini-cal{display:grid; grid-template-columns:repeat(7,1fr); gap:5px}
body.v3 .v3-mini-cal i{aspect-ratio:1; border-radius:6px; background:var(--c-card); border:1px solid var(--c-border)}
body.v3 .v3-mini-cal i.on{background:var(--c-action); border-color:var(--c-action)}
body.v3 .v3-mini-serp{display:flex; flex-direction:column; gap:3px}
body.v3 .v3-mini-serp small{color:var(--c-success); font-size:12px}
body.v3 .v3-mini-serp b{color:#1a0dab; font-weight:500; font-size:15px}
@media (prefers-color-scheme: dark){ body.v3 .v3-mini-serp b{color:#8AB4F8} }

/* reviews - restyle reviews-main.js output; snap row on mobile */
body.v3 #isi-reviews figure{background:var(--c-card) !important; border:1px solid var(--c-border) !important; border-radius:var(--r-lg) !important; box-shadow:var(--sh-1) !important}
body.v3 #isi-reviews blockquote{color:var(--c-text-2) !important; font-size:15.5px !important}
body.v3 #isi-reviews figcaption{color:var(--c-text) !important}
@media (max-width:767px){
  body.v3 #isi-reviews > div:last-child{display:flex !important; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none}
  body.v3 #isi-reviews > div:last-child > figure{flex:0 0 85%; scroll-snap-align:center}
}

/* pricing teaser */
body.v3 .v3-price-grid{display:grid; gap:16px; max-width:900px; margin:0 auto; padding:0 20px}
@media (min-width:768px){ body.v3 .v3-price-grid{grid-template-columns:1fr 1fr; gap:20px} }
body.v3 .v3-price-card{background:var(--c-card); border:1px solid var(--c-border); border-radius:var(--r-lg); padding:28px; box-shadow:var(--sh-1);
  display:flex; flex-direction:column; gap:16px}
body.v3 .v3-price-main{border-color:color-mix(in srgb, var(--c-action) 45%, var(--c-border)); box-shadow:var(--sh-2)}
body.v3 .v3-price-name{font:600 16px var(--f-body); color:var(--c-text-2)}
body.v3 .v3-price-amount{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; color:var(--c-text-3); font-size:15px}
body.v3 .v3-price-amount b{font:700 40px/1 var(--f-head); color:var(--c-text)}
body.v3 .v3-price-card ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; flex:1}
body.v3 .v3-price-card li{display:flex; gap:10px; align-items:flex-start; color:var(--c-text-2); font-size:16px}
body.v3 .v3-price-card li .v3-ico{color:var(--c-success); margin-top:4px}
body.v3 .v3-price-card .v3-btn{width:100%}

/* faq */
body.v3 .v2-faq{max-width:820px; margin:0 auto; padding:0 20px}
body.v3 .v2-faq details{background:var(--c-card) !important; border:1px solid var(--c-border) !important; border-radius:var(--r-md) !important;
  margin-bottom:10px; box-shadow:none !important}
body.v3 .v2-faq summary{min-height:56px; font:600 17px var(--f-body) !important; color:var(--c-text) !important; padding:16px 20px !important}
body.v3 .v2-faq details p{color:var(--c-text-2) !important; font-size:16px !important; line-height:1.7; padding:0 20px 18px !important}

/* final CTA */
body.v3 .v2-final-cta{background:var(--c-brand-soft) !important; border:1px solid var(--c-border) !important; border-radius:var(--r-lg) !important;
  box-shadow:none !important; color:var(--c-text) !important; max-width:960px}
body.v3 .v2-final-cta::before, body.v3 .v2-final-cta::after{display:none !important}
body.v3 .v2-final-cta h2{color:var(--c-text) !important; font-family:var(--f-head) !important; font-weight:700 !important}
body.v3 .v2-final-cta p{color:var(--c-text-2) !important}

/* footer */
body.v3 .isa-footer{background:var(--c-surface) !important; border-top:1px solid var(--c-border) !important; color:var(--c-text-2)}
body.v3 .isa-footer h3{color:var(--c-text) !important; font:600 15px var(--f-body) !important}
body.v3 .isa-footer a{color:var(--c-text-2) !important; display:inline-block; padding:6px 0}
body.v3 .isa-footer a:hover{color:var(--c-action) !important}

/* dark mode: the remaining light-only legacy surfaces */
@media (prefers-color-scheme: dark){
  body.v3, body.v3 .v2-sec, body.v3 .isa-strip{color:var(--c-text)}
  body.v3 .nav-more-menu{background:var(--c-card) !important; border-color:var(--c-border) !important}
  .nav-more-menu a.muted-link{color:#A7B3C6 !important}
  body.v3 .v2-site-h1, body.v3 .v2-site-h1 *{color:var(--c-text)}
}

/* ---------- motion: scroll-driven reveals, IO fallback, reduced motion ---------- */
@keyframes v3-rise{from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:none}}
@supports (animation-timeline: view()){
  body.v3 .v3-reveal > .v2-sec-head, body.v3 .v3-reveal .v2-how-card, body.v3 .v3-reveal .v2-why-card,
  body.v3 .v3-reveal .v3-price-card, body.v3 .v3-reveal .ls-counter{
    animation:v3-rise both var(--ease); animation-timeline:view(); animation-range:entry 0% cover 22%}
}
@supports not (animation-timeline: view()){
  body.v3.v3-io .v3-reveal:not(.v3-in) > .v2-sec-head,
  body.v3.v3-io .v3-reveal:not(.v3-in) .v2-how-card,
  body.v3.v3-io .v3-reveal:not(.v3-in) .v2-why-card,
  body.v3.v3-io .v3-reveal:not(.v3-in) .v3-price-card{opacity:0; transform:translateY(24px)}
  body.v3.v3-io .v3-reveal > .v2-sec-head, body.v3.v3-io .v3-reveal .v2-how-card,
  body.v3.v3-io .v3-reveal .v2-why-card, body.v3.v3-io .v3-reveal .v3-price-card{transition:opacity .6s var(--ease), transform .6s var(--ease)}
}
@media (prefers-reduced-motion: reduce){
  body.v3 *, body.v3 *::before, body.v3 *::after{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  body.v3.v3-io .v3-reveal *{opacity:1 !important; transform:none !important}
}
/* no infinite pulses anywhere on v3 */
body.v3 .v2-demo-pulse, body.v3 .v2-cta-primary{animation:none !important}

/* bento minis fill their card */
body.v3 .v3-why .v2-why-card{align-items:stretch !important}
body.v3 .v3-mini{align-self:stretch; width:100%; box-sizing:border-box}
body.v3 .v3-mini-cal{max-width:240px}
body.v3 .v3-mini-phone{align-self:center; width:120px}
body.v3 .v3-why .v2-why-card > div:not(.v2-why-icon):not(.v3-mini){width:100%}

/* product-tour demo "screens": readable secondary text + brand action colour */
body.v3 .demo-render-row.demo-r2, body.v3 .demo-feat, body.v3 .demo-phone-sub, body.v3 .demo-phone-stat,
body.v3 .demo-leads-status-time, body.v3 .demo-lead-info span, body.v3 .demo-lead-time,
body.v3 .demo-appt-row .appt-info span, body.v3 .demo-appt-row .appt-day .m, body.v3 .demo-url{color:#A7B3C6 !important}
body.v3 .demo-cta-primary, body.v3 .demo-phone-cta{background:#1D4ED8 !important; box-shadow:none !important}
body.v3 .v3-tour .v3-tour-panels > section{background-image:none !important}
@media (max-width:480px){
  body.v3 .v3-tab{padding:0 12px; font-size:14px; gap:6px}
  body.v3 .v3-tab .v3-ico{display:none}
  body.v3 .v3-tabs{max-width:calc(100% - 24px)}
}
/* nav: win over later legacy !important rules (higher specificity) */
html body.v3 nav.nav{background:color-mix(in srgb, var(--c-bg) 84%, transparent) !important; border-bottom:1px solid var(--c-border) !important}
html body.v3 nav.nav .logo{color:var(--c-text) !important}
html body.v3 nav.nav .nav-links .muted-link{color:var(--c-text-2) !important}
html body.v3 nav.nav .btn-ghost{color:var(--c-text) !important; border-color:var(--c-border-2) !important; background:transparent !important}
html body.v3 nav.nav .nav-more-btn{color:var(--c-text-2) !important; background:transparent !important}
html body.v3 nav.nav::before{background:color-mix(in srgb, var(--c-bg) 84%, transparent) !important}
body.v3 h1.v2-headline{text-wrap:balance} body.v3 h1.v2-headline > span{display:inline-block;text-wrap:balance} @media (min-width:1024px){body.v3 h1.v2-headline{font-size:clamp(40px,4.4vw,58px) !important}}

/* v3 affirmations */
body.v3 .v3-affirm{max-height:0;overflow:hidden;opacity:0;transition:max-height .3s ease,opacity .3s ease,margin .3s ease;margin:0}
body.v3 .v3-affirm.on{max-height:90px;opacity:1;margin:2px 0 12px}
body.v3 .v3-affirm-main{display:block;font-size:14.5px;font-weight:600;color:#047857}
body.v3 .v3-affirm-sub{display:block;font-size:13px;color:#475569;margin-top:2px}
body.v3 .v3-affirm-line{display:inline-block;margin:6px auto 0;padding:6px 14px;border-radius:999px;background:#EAF0FE;color:#1D4ED8;font-size:14px;font-weight:600}
body.v3 .v2-final-cta .v3-affirm-line{margin:0 auto 10px}
@media (prefers-color-scheme: dark){
  body.v3 .v3-affirm-main{color:#34D399}
  body.v3 .v3-affirm-sub{color:#A7B3C6}
  body.v3 .v3-affirm-line{background:#1A2A55;color:#7AA2FF}
}
@media (prefers-reduced-motion: reduce){ body.v3 .v3-affirm{transition:none} }
/* preview card: "AI writing" badge sits in-flow above the title (it overlapped the business name) */
body.v3 .v2-preview-body{position:relative}
body.v3 .v2-typing{position:static !important;display:inline-flex !important;align-items:center;gap:6px;margin:0 0 10px;padding:4px 10px !important;border-radius:999px;background:#EAF0FE !important;color:#1D4ED8 !important;font-size:12px !important;font-weight:600 !important}
body.v3 .v2-typing::before{display:none}
body.v3 .v2-typing span:first-child{width:6px;height:6px;border-radius:50%;background:#1D4ED8 !important;opacity:1 !important;animation:none !important}
@media (prefers-color-scheme: dark){ body.v3 .v2-typing{background:#1A2A55 !important;color:#7AA2FF !important} body.v3 .v2-typing span:first-child{background:#7AA2FF !important} }
body.v3 .v2-typing span:last-child{width:auto !important;height:auto !important;border-radius:0 !important;background:none !important;animation:none !important;opacity:1 !important;transform:none !important;white-space:nowrap}

/* v3 outcomes block (real customer results under the hero) */
body.v3 .v3-outcomes{padding:8px 20px 40px}
body.v3 .v3-out-wrap{max-width:1100px;margin:0 auto}
body.v3 .v3-out-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
body.v3 .v3-out-tile{background:#fff;border:1px solid #E3E8EF;border-radius:14px;padding:20px 22px;box-shadow:0 1px 2px rgba(15,23,42,.06)}
body.v3 .v3-out-n{font-family:var(--f-head,Rubik,Heebo,sans-serif);font-weight:800;font-size:clamp(26px,3vw,34px);color:#1D4ED8;line-height:1.1}
body.v3 .v3-out-t{margin-top:6px;font-size:14.5px;color:#475569;line-height:1.5}
body.v3 .v3-out-tip{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:1px solid #CBD5E1;color:#64748B;font-size:11px;font-weight:700;cursor:help;vertical-align:middle}
body.v3 .v3-recent{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:14px;color:#475569}
body.v3 .v3-recent-h{font-weight:700;color:#0F172A}
body.v3 .v3-recent-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
body.v3 .v3-recent-list li{background:#F6F8FB;border:1px solid #E3E8EF;border-radius:999px;padding:5px 12px}
body.v3 .v3-recent-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#047857;margin-inline-end:6px;vertical-align:middle}
body.v3 .v3-recent-ago{color:#94A3B8;font-size:12.5px}
@media (max-width:760px){
  body.v3 .v3-out-grid{grid-template-columns:1fr;gap:10px}
  body.v3 .v3-out-tile{display:flex;align-items:center;gap:14px;padding:14px 16px}
  body.v3 .v3-out-n{min-width:96px;font-size:24px}
  body.v3 .v3-out-t{margin-top:0;font-size:13.5px}
}
@media (prefers-color-scheme: dark){
  body.v3 .v3-out-tile{background:#16213A;border-color:#24314D}
  body.v3 .v3-out-n{color:#7AA2FF}
  body.v3 .v3-out-t,body.v3 .v3-recent{color:#A7B3C6}
  body.v3 .v3-recent-h{color:#F1F5F9}
  body.v3 .v3-recent-list li{background:#111A2E;border-color:#24314D}
}
body.v3 .v3-out-n{white-space:nowrap} body.v3 .v3-out-n bdi{unicode-bidi:isolate}

body.v3 .v3-out-n{flex:none} body.v3 .v3-out-t{flex:1;min-width:0}

/* examples: static thumbnail instead of a live iframe (perf) */
body.v3 .v2-ex-thumb .v3-ex-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
body.v3 .v2-ex-thumb{position:relative;overflow:hidden}