/* ClovrDealr enhancement layer — additive styles that match the template's clean iMessage look. */
:root { --clovr-blue: #007aff; --clovr-ink: #121212; }

/* Hero top glow: swap the template's pink (rgba(255,168,207)) for Clovr blue */
body { background-image: radial-gradient(928px 544px at 50% -112px, rgba(56, 120, 255, 0.34), rgba(0, 0, 0, 0) 72%) !important; }

/* Brand page 4-cloves grid + What's New rows (responsive) */
.clovr-cloves-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 2.4rem; }
@media (max-width: 640px) { .clovr-cloves-grid { grid-template-columns: 1fr; } .clovr-log-row { grid-template-columns: 1fr !important; gap: 4px !important; } }

/* Sign in pill (nav) */
.clovr-cta-group { display: inline-flex; align-items: center; gap: 10px; }
.clovr-signin { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 999px; border: 1px solid rgba(0,0,0,.14); background: #fff; color: var(--clovr-ink); font-weight: 500; font-size: 14px; line-height: 1; text-decoration: none; white-space: nowrap; transition: border-color .2s, transform .15s; }
.clovr-signin:hover { border-color: rgba(0,0,0,.32); transform: translateY(-1px); }
@media (max-width: 640px) { .clovr-signin { padding: 8px 13px; margin-right: 6px; } }

/* Scattered-lead bubbles: app labels -> painpoint category pills */
.chip.clovr-cat {
  background: rgba(0,122,255,.10); color: var(--clovr-blue);
  border: 1px solid rgba(0,122,255,.20); font-weight: 600; text-transform: none;
}

/* FAQ smooth blur open/close */
.clovr-faq-body {
  overflow: hidden; opacity: 0; filter: blur(10px); transform: translateY(-4px);
  transition: max-height .34s cubic-bezier(.4,0,.2,1), opacity .34s ease, filter .34s ease, transform .34s ease;
}
details[open] .clovr-faq-body { opacity: 1; filter: blur(0); transform: none; }
@media (prefers-reduced-motion: reduce) { .clovr-faq-body { transition: none; filter: none; } }

/* Book-a-demo form (replaces pricing) */
.clovr-demo { max-width: 780px; margin: 0 auto; padding: 0 20px; }
.clovr-demo-head { text-align: center; margin-bottom: 30px; }
.clovr-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--clovr-blue); margin-bottom: 14px; }
.clovr-demo h2 { font-size: clamp(44px, 6.4vw, 72px); line-height: 0.96; font-weight: 500; letter-spacing: -.02em; margin: 0 0 14px; color: var(--clovr-ink); }
.clovr-demo-sub { font-size: 18px; color: #666; max-width: 560px; margin: 0 auto; line-height: 1.5; }
.clovr-demo-card { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 26px; padding: 34px; box-shadow: 0 24px 70px -34px rgba(0,0,0,.28); }
.clovr-field { display: flex; flex-direction: column; gap: 6px; }
.clovr-field label { font-size: 13px; font-weight: 600; color: #555; }
.clovr-field input, .clovr-field textarea, .clovr-field select {
  border: 1px solid rgba(0,0,0,.12); border-radius: 12px; padding: 12px 14px; font: inherit; font-size: 15px;
  background: #fafafa; outline: none; transition: border-color .2s, box-shadow .2s, background .2s; color: var(--clovr-ink);
}
.clovr-field input:focus, .clovr-field textarea:focus, .clovr-field select:focus {
  border-color: var(--clovr-blue); box-shadow: 0 0 0 3px rgba(0,122,255,.15); background: #fff;
}
.clovr-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.clovr-row { margin-bottom: 16px; }
.clovr-submit {
  width: 100%; background: var(--clovr-blue); color: #fff; border: none; border-radius: 999px; padding: 15px;
  font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; transition: transform .15s ease, filter .2s ease;
}
.clovr-submit:hover { filter: brightness(1.06); transform: translateY(-1px); }
.clovr-fineprint { text-align: center; font-size: 12.5px; color: #9a9a9a; margin: 14px 0 0; }
.clovr-success { text-align: center; padding: 34px 16px; }
.clovr-success h3 { font-size: 26px; font-weight: 600; margin: 0 0 8px; color: var(--clovr-ink); }
.clovr-success p { color: #666; max-width: 420px; margin: 0 auto; line-height: 1.5; }

@media (max-width: 640px) {
  .clovr-grid2 { grid-template-columns: 1fr; }
  .clovr-demo-card { padding: 22px; border-radius: 20px; }
}

/* ---- ROI calculator ---- */
.clovr-roi { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.clovr-roi-head { text-align: center; margin-bottom: 34px; }
.clovr-roi-head h2 { font-size: clamp(44px, 6.4vw, 72px); line-height: 0.96; font-weight: 500; letter-spacing: -.02em; margin: 0 0 14px; color: var(--clovr-ink); }
.clovr-roi-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 22px; align-items: stretch; }
.clovr-roi-inputs { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 22px; box-shadow: 0 20px 60px -34px rgba(0,0,0,.22); }
.clovr-slider { display: flex; flex-direction: column; gap: 10px; }
.clovr-slabel { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: #555; }
.clovr-slabel b { font-size: 17px; color: var(--clovr-ink); font-variant-numeric: tabular-nums; }
.clovr-slider input[type=range] { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px; background: rgba(0,0,0,.10); outline: none; }
.clovr-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--clovr-blue); cursor: pointer; box-shadow: 0 2px 8px rgba(0,122,255,.4); border: 3px solid #fff; }
.clovr-slider input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--clovr-blue); cursor: pointer; border: 3px solid #fff; }
.clovr-roi-out { background: linear-gradient(160deg,#0b57d0,#0a84ff); color: #fff; border-radius: 24px; padding: 30px; display: flex; flex-direction: column; gap: 14px; justify-content: center; box-shadow: 0 24px 70px -30px rgba(10,132,255,.6); }
.clovr-roi-stat { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.18); }
.clovr-roi-stat span { font-size: 15px; opacity: .85; }
.clovr-roi-stat b { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.clovr-roi-hero b { font-size: 42px; line-height: 1; }
.clovr-roi-hero span { font-size: 16px; }
.clovr-roi-note { font-size: 12.5px; opacity: .78; margin: 6px 0 0; line-height: 1.45; border: none; padding: 0; }
@media (max-width: 820px) { .clovr-roi-grid { grid-template-columns: 1fr; } }

/* ---- Dark 'Everything Taylor does' ---- */
/* Sit above the template's full-page .thread-spine (z-index:0) so its blue line
   passes BEHIND this section's opaque background instead of over the text. */
#clovr-dark-sec { position: relative; z-index: 1; }
.clovr-darkwrap { background: #0c0c0f; color: #fff; padding: 88px 20px; }
.clovr-dark-inner { max-width: 1080px; margin: 0 auto; text-align: center; }
.clovr-dark-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8ba7ff; margin-bottom: 16px; }
.clovr-dark-h { font-size: clamp(30px,5vw,50px); line-height: 1.05; font-weight: 600; letter-spacing: -.02em; margin: 0 0 16px; }
.clovr-dark-sub { font-size: 18px; color: rgba(255,255,255,.62); max-width: 640px; margin: 0 auto 44px; line-height: 1.5; }
.clovr-dark-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; text-align: left; }
.clovr-dcard { background: #141418; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 26px; transition: border-color .25s, transform .25s; }
.clovr-dcard:hover { border-color: rgba(139,167,255,.5); transform: translateY(-3px); }
.clovr-dcard svg { width: 26px; height: 26px; stroke: #9db6ff; fill: none; stroke-width: 1.7; margin-bottom: 16px; }
.clovr-dcard h3 { font-size: 18px; font-weight: 600; margin: 0 0 8px; }
.clovr-dcard p { font-size: 14.5px; color: rgba(255,255,255,.6); line-height: 1.5; margin: 0; }
.clovr-dcard-cta { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; padding: 8px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: #cdd9ff; background: rgba(120,150,255,.12); border: 1px solid rgba(139,167,255,.28); transition: background .2s, border-color .2s, color .2s; }
.clovr-dcard-cta:hover { background: rgba(120,150,255,.22); border-color: rgba(139,167,255,.55); color: #e6ecff; }
.clovr-dcard-cta span { transition: transform .2s; }
.clovr-dcard-cta:hover span { transform: translateX(3px); }
@media (max-width: 820px) { .clovr-dark-grid { grid-template-columns: 1fr; } .clovr-darkwrap { padding: 64px 18px; } }

/* ---- Parallax dashboard section ---- */
#clovr-dash-sec { position: relative; padding: 78px 0 0; overflow: hidden; }
.clovr-dash-connector { position: absolute; top: 0; left: 50%; width: 2px; height: 78px; transform: translateX(-50%); background: linear-gradient(#0a84ff, rgba(10,132,255,0)); }
.clovr-dash-connector::after { content: ""; position: absolute; top: 0; left: 50%; width: 8px; height: 8px; border-radius: 50%; transform: translateX(-50%); background: #0a84ff; box-shadow: 0 0 12px 2px rgba(10,132,255,.7); animation: cdrop 2.6s ease-in-out infinite; }
@keyframes cdrop { 0% { top: 0; opacity: 0 } 12% { opacity: 1 } 85% { opacity: 1 } 100% { top: 70px; opacity: 0 } }
.clovr-dash-head { max-width: 760px; margin: 0 auto 40px; text-align: center; padding: 0 20px; }
.clovr-dash-head h2 { font-size: clamp(44px, 6.4vw, 72px); line-height: 0.96; font-weight: 500; letter-spacing: -.02em; margin: 0 0 14px; color: var(--clovr-ink); }
.clovr-dash-cta { display: flex; gap: 12px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.clovr-btn-primary { background: var(--clovr-blue); color: #fff; border-radius: 999px; padding: 13px 26px; font-weight: 600; font-size: 15px; text-decoration: none; transition: transform .15s, filter .2s; }
.clovr-btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.clovr-btn-ghost { background: #fff; color: var(--clovr-ink); border: 1px solid rgba(0,0,0,.14); border-radius: 999px; padding: 13px 24px; font-weight: 600; font-size: 15px; text-decoration: none; transition: transform .15s, border-color .2s; }
.clovr-btn-ghost:hover { border-color: rgba(0,0,0,.3); transform: translateY(-1px); }
.clovr-dash-stage { position: relative; padding: 70px 20px 110px; margin-top: 8px; overflow: hidden;
  background: #e9f0fb url('/dealr/brand/dealr-hero-bg.png?v=1') center top / cover no-repeat; }
.clovr-dash-persp { max-width: 1060px; margin: 0 auto; }
/* scroll-controlled: JS sets transform (rotateX tilt -> flat) + opacity as you scroll */
.clovr-dash-img { width: 100%; height: auto; display: block; border-radius: 14px;
  box-shadow: 0 50px 110px -44px rgba(15,30,80,.55); opacity: 0; will-change: transform, opacity;
  transform-origin: center 42%; transition: transform .08s linear; }
.clovr-dash-img.flat { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) { .clovr-dash-img { opacity: 1 !important; transform: none !important; transition: none; } }

/* scroll-into-view reveal (fade + blur + rise, staggered) for the dark feature section */
.clovr-reveal { opacity: 0; filter: blur(10px); transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), filter .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.clovr-reveal.in { opacity: 1; filter: blur(0); transform: none; }
.clovr-reveal-icon { opacity: 0; transition: opacity .5s ease; }
.clovr-reveal-icon.in { opacity: 1; }
/* line-icon self-draw on scroll-in */
.clovr-reveal-icon path, .clovr-reveal-icon circle, .clovr-reveal-icon rect, .clovr-reveal-icon line { stroke-dasharray: 260; stroke-dashoffset: 260; transition: stroke-dashoffset 1.1s cubic-bezier(.6,0,.2,1) .12s; }
.clovr-reveal-icon.in path, .clovr-reveal-icon.in circle, .clovr-reveal-icon.in rect, .clovr-reveal-icon.in line { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .clovr-reveal-icon path, .clovr-reveal-icon circle, .clovr-reveal-icon rect, .clovr-reveal-icon line { stroke-dashoffset: 0 !important; transition: none; } }
/* nav wordmark (real Neue Montreal instead of the SVG-baked text) */
.clovr-wordmark { font-size: 21px; font-weight: 600; letter-spacing: -.02em; color: var(--clovr-ink, #111); line-height: 1; white-space: nowrap; display: inline-flex; align-items: baseline; }
.clovr-wordmark .cw-dealr { color: #2563eb; }
@media (prefers-reduced-motion: reduce) { .clovr-reveal, .clovr-reveal-icon { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; } }
.clovr-dash-frame { max-width: 1080px; margin: 0 auto; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 16px; box-shadow: 0 40px 90px -40px rgba(20,50,120,.5); overflow: hidden; will-change: transform; }
.cd-topbar { height: 34px; background: #f4f5f7; border-bottom: 1px solid rgba(0,0,0,.06); display: flex; align-items: center; gap: 7px; padding: 0 14px; }
.cd-dot { width: 11px; height: 11px; border-radius: 50%; } .cd-dot.r { background: #ff5f57 } .cd-dot.y { background: #febc2e } .cd-dot.g { background: #28c840 }
.cd-body { display: grid; grid-template-columns: 190px 1fr; position: relative; min-height: 430px; font-size: 13px; color: #1c1c1e; }
.cd-side { border-right: 1px solid rgba(0,0,0,.06); padding: 16px 12px; background: #fbfbfd; }
.cd-logo { font-weight: 700; font-size: 15px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.cd-logo span { font-size: 9px; background: var(--clovr-blue); color: #fff; padding: 2px 5px; border-radius: 5px; letter-spacing: .05em; }
.cd-navgrp { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #9a9aa2; margin: 14px 6px 6px; }
.cd-nav { display: block; padding: 7px 10px; border-radius: 8px; color: #3a3a40; text-decoration: none; margin-bottom: 2px; }
.cd-nav.active { background: var(--clovr-blue); color: #fff; font-weight: 600; }
.cd-main { padding: 20px 22px; }
.cd-greet { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.cd-greetsub { color: #8a8a90; font-size: 12px; margin: 6px 0 18px; }
.cd-attn { border: 1px solid rgba(0,0,0,.08); border-radius: 12px; padding: 14px; margin-bottom: 16px; }
.cd-attn-h { font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.cd-attn-h span { font-weight: 400; color: #8a8a90; font-size: 12px; }
.cd-leadrow { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.cd-lead { border: 1px solid rgba(0,0,0,.07); border-radius: 10px; padding: 10px 12px; position: relative; }
.cd-lead b { display: block; font-size: 12.5px; } .cd-lead span { color: #9a9aa2; font-size: 11px; }
.cd-lead em { position: absolute; top: 10px; right: 10px; font-style: normal; font-size: 10px; background: #eef0f3; color: #6a6a72; padding: 2px 7px; border-radius: 6px; }
.cd-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cd-card { border: 1px solid rgba(0,0,0,.08); border-radius: 12px; padding: 16px; }
.cd-card h4 { margin: 0 0 12px; font-size: 13px; font-weight: 600; }
.cd-donutwrap { display: flex; align-items: center; gap: 16px; }
.cd-donut { width: 88px; height: 88px; border-radius: 50%; background: conic-gradient(#0a84ff 0 7%, #ff9f0a 7% 28%, #7d5cff 28% 57%, #c9ccd3 57% 100%); display: grid; place-items: center; position: relative; flex: 0 0 auto; }
.cd-donut::before { content: ""; position: absolute; inset: 14px; background: #fff; border-radius: 50%; }
.cd-donut b { position: relative; font-size: 20px; font-weight: 700; }
.cd-legend { font-size: 11.5px; color: #5a5a62; line-height: 1.85; }
.cd-legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 6px; }
.cd-respbar { height: 8px; border-radius: 99px; background: #e6e8ec; overflow: hidden; margin: 8px 0; }
.cd-respbar i { display: block; height: 100%; width: 100%; background: var(--clovr-blue); }
.cd-chat { position: absolute; left: 150px; bottom: 22px; width: 288px; background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 16px; box-shadow: 0 24px 50px -20px rgba(20,40,90,.4); padding: 16px; }
.cd-chat-h { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid rgba(0,0,0,.07); margin-bottom: 12px; }
.cd-av { width: 34px; height: 34px; border-radius: 50%; background: var(--clovr-blue); color: #fff; display: grid; place-items: center; font-weight: 700; position: relative; flex: 0 0 auto; }
.cd-av::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: #28c840; border: 2px solid #fff; }
.cd-chat-h b { font-size: 13px; } .cd-chat-h span { display: block; color: #9a9aa2; font-size: 11px; }
.cd-msg { font-size: 12.5px; padding: 8px 12px; border-radius: 14px; margin-bottom: 8px; max-width: 86%; line-height: 1.35; }
.cd-msg.them { background: #ececed; color: #1c1c1e; border-bottom-left-radius: 5px; }
.cd-msg.me { background: var(--clovr-blue); color: #fff; margin-left: auto; border-bottom-right-radius: 5px; }
.cd-booked { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #137a3a; background: #e5f7ec; padding: 6px 12px; border-radius: 999px; margin-top: 4px; }
@media (max-width: 900px) {
  .cd-body { grid-template-columns: 1fr; } .cd-side { display: none; }
  .cd-chat { position: static; width: auto; margin: 14px 0 0; box-shadow: none; }
  .cd-leadrow { grid-template-columns: 1fr; } .cd-grid2 { grid-template-columns: 1fr; }
  .clovr-dash-frame { transform: none !important; }
}

/* Mobile-only back-to-top button (Dealr blue, appears on scroll) */
#clovr-totop {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 60; width: 44px; height: 44px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  background: #2563eb; color: #fff; border: none; cursor: pointer;
  box-shadow: 0 8px 22px -8px rgba(37, 99, 235, .65), 0 2px 6px rgba(15, 23, 42, .12);
  opacity: 0; transform: translateY(10px) scale(.92); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background .15s;
  -webkit-tap-highlight-color: transparent;
}
#clovr-totop:active { background: #1d4ed8; }
#clovr-totop.show { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 767px) { #clovr-totop { display: flex; } }

/* ---- Thread-spine: fade to white under injected-section headers + ROI above the line ----
   The template's full-page blue .thread-spine (z-index:0) is a positioned element, so it
   paints OVER our injected sections (which are static). Matching the theme's own .thread-veil:
   put a white radial behind each section header (fades the line to white there, line still
   shows elsewhere), and lift the ROI calculator card above the spine so the blue line passes
   BEHIND it instead of over it. The #fafafa veil is invisible except where it covers the line. */
.clovr-roi-head, .clovr-dash-head, .clovr-demo-head { position: relative; z-index: 1; }
.clovr-roi-head::before, .clovr-dash-head::before, .clovr-demo-head::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 172%; height: 300%;
  background: radial-gradient(58% 60% at 50% 50%, #fafafaf7 0%, #fafafabf 44%, #fafafa00 76%);
}
.clovr-roi-grid { position: relative; z-index: 1; }

/* Phone-mockup contact avatar: white circle + centered mark (was black bg, cover-cropped) */
.pl-avatar { background: #fff !important; }
.pl-avatar-img { object-fit: contain !important; }