/* LeasePace homepage PREVIEW (noindex page /preview). New file: nothing on the live site loads this.
   Every selector is scoped under .pv- (sections: .pv-sec*, tagline: .pv-tag*, faq: .pv-faq*, floating buttons: .pv-fab*).
   NOTE: voice-call.js owns .pv-btn .pv-back .pv-end .pv-call .pv-cap .pv-hint .pv-mid .pv-name .pv-orb .pv-ring
   .pv-stage .pv-status. None of those names are used here.
   Look = the live site's own: Antonio condensed uppercase headlines, blue JetBrains Mono eyebrows, hairline blue rules,
   paper background, square blue primary button. Desktop scales with the live --u unit; phone is px (switch at 820px, as live). */

.pv-sec{
  --pv-ease:cubic-bezier(0.22,1,0.36,1);
  position:relative;z-index:2;background:var(--paper);width:calc(100*var(--u));margin:0 auto;
  border-top:1px solid var(--accent);font-size:calc(1*var(--u));color:var(--ink);
}
.pv-sec--tint{background:#F3F6FC}
.pv-in{padding:calc(5*var(--u)) calc(3.4*var(--u)) calc(5*var(--u))}
.pv-head{text-align:center;max-width:calc(60*var(--u));margin:0 auto}
.pv-eyebrow{font-family:'JetBrains Mono',monospace;font-size:calc(.85*var(--u));letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.pv-h2{margin:calc(.5*var(--u)) 0 0;font-family:Antonio,sans-serif;font-weight:700;font-size:calc(3.6*var(--u));line-height:1.02;text-transform:uppercase;color:var(--ink);text-wrap:balance}
.pv-h2 em{text-transform:none;font-family:'Source Serif 4',serif;font-style:italic;font-weight:400;color:var(--accent)}
.pv-lead{margin:calc(1.2*var(--u)) auto 0;max-width:calc(46*var(--u));font-size:calc(1.05*var(--u));line-height:1.45;font-weight:500;color:#3B4152}

/* ---------- Tagline: words light up one by one ---------- */
.pv-tag{padding:calc(7*var(--u)) calc(3.4*var(--u))}
.pv-tag p{margin:0 auto;max-width:calc(84*var(--u));text-align:center;font-family:Antonio,sans-serif;font-weight:700;font-size:calc(5.6*var(--u));line-height:1.04;text-transform:uppercase;color:var(--ink);text-wrap:balance}
.pv-w{color:#C9D0DE;transition:color 500ms var(--pv-ease)}
.pv-w.pv-on{color:var(--ink)}
.pv-w.pv-on.pv-hi{color:var(--accent)}
.pv-tag{padding:calc(8*var(--u)) calc(3.4*var(--u))}

/* ---------- Benefits ---------- */
.pv-benefits{margin:calc(3.6*var(--u)) 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;border:1px solid var(--accent);background:var(--paper)}
.pv-ben{grid-column:span 2;padding:calc(2.2*var(--u)) calc(2.2*var(--u)) calc(2.4*var(--u));border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);position:relative}
.pv-ben:nth-child(3){border-right:0}
.pv-ben:nth-child(n+4){grid-column:span 3;border-bottom:0}
.pv-ben:nth-child(5){border-right:0}
.pv-num{display:block;font-family:'JetBrains Mono',monospace;font-size:calc(.8*var(--u));letter-spacing:.14em;color:var(--accent)}
.pv-ben h3{margin:calc(.9*var(--u)) 0 0;font-family:Antonio,sans-serif;font-weight:700;font-size:calc(2*var(--u));line-height:1.05;text-transform:uppercase;color:var(--ink)}
.pv-ben p{margin:calc(.8*var(--u)) 0 0;font-size:calc(.98*var(--u));line-height:1.5;font-weight:500;color:#3B4152}
.pv-soon{display:inline-block;margin-left:.4em;padding:.1em .5em;border:1px solid var(--accent);font-family:'JetBrains Mono',monospace;font-size:.78em;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);white-space:nowrap}

/* ---------- How it works ---------- */
.pv-steps{margin:calc(3.6*var(--u)) 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(2.4*var(--u));counter-reset:pvstep}
.pv-step{position:relative;padding-top:calc(1.4*var(--u));border-top:1px solid var(--ink)}
.pv-step b{display:block;font-family:Antonio,sans-serif;font-weight:700;font-size:calc(6.4*var(--u));line-height:.9;color:var(--accent)}
.pv-step h3{margin:calc(1*var(--u)) 0 0;font-family:Antonio,sans-serif;font-weight:700;font-size:calc(2.1*var(--u));line-height:1.05;text-transform:uppercase;color:var(--ink)}
.pv-step p{margin:calc(.8*var(--u)) 0 0;font-size:calc(1*var(--u));line-height:1.5;font-weight:500;color:#3B4152}
.pv-fine{margin:calc(2.4*var(--u)) 0 0;text-align:center;font-family:'JetBrains Mono',monospace;font-size:calc(.78*var(--u));letter-spacing:.08em;color:#5B6172}

/* ---------- FAQ ---------- */
.pv-faq{margin:calc(3.4*var(--u)) auto 0;max-width:calc(62*var(--u));border-top:1px solid var(--ink)}
.pv-q{border-bottom:1px solid var(--hair)}
.pv-q summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:calc(1.6*var(--u));min-height:44px;padding:calc(1.4*var(--u)) 0;cursor:pointer;font-family:Antonio,sans-serif;font-weight:700;font-size:calc(1.7*var(--u));line-height:1.12;text-transform:uppercase;color:var(--ink)}
.pv-q summary::-webkit-details-marker{display:none}
.pv-q summary::marker{content:""}
.pv-q summary:hover{color:var(--accent)}
.pv-q summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pv-plus{flex:none;position:relative;width:calc(1.6*var(--u));height:calc(1.6*var(--u));min-width:16px;min-height:16px;transition:transform 400ms var(--pv-ease)}
.pv-plus::before,.pv-plus::after{content:"";position:absolute;left:0;top:50%;width:100%;height:2px;margin-top:-1px;background:var(--accent)}
.pv-plus::after{transform:rotate(90deg)}
.pv-q[open] .pv-plus{transform:rotate(45deg)}
.pv-a{overflow:hidden}
.pv-a p{margin:0;padding:0 calc(3.4*var(--u)) calc(1.6*var(--u)) 0;font-size:calc(1.05*var(--u));line-height:1.55;font-weight:500;color:#3B4152;max-width:calc(54*var(--u))}
.pv-q[open] .pv-a p{animation:pvFade 400ms var(--pv-ease) both}
@keyframes pvFade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- Scroll reveal (opacity + transform only; sections stay visible without JS) ---------- */
.pv-js .pv-rv{opacity:0;transform:translateY(24px);transition:opacity 500ms var(--pv-ease),transform 500ms var(--pv-ease)}
.pv-js .pv-rv.pv-in-view{opacity:1;transform:none}


@media (max-width:820px){
  .pv-sec{width:100%}
  .pv-in{padding:40px 20px 44px}
  .pv-head{max-width:none}
  .pv-eyebrow{font-size:11px}
  .pv-h2{margin-top:6px;font-size:36px;line-height:1.04}
  .pv-lead{margin-top:12px;max-width:340px;font-size:15px;line-height:1.45}
  .pv-tag{padding:56px 20px}
  .pv-tag p{font-size:min(10.4vw,44px);line-height:1.1;max-width:none}
  .pv-benefits{margin-top:28px;grid-template-columns:1fr}
  .pv-benefits{grid-template-columns:1fr}
  .pv-ben,.pv-ben:nth-child(n+4){grid-column:auto;padding:20px 18px 22px;border-right:0;border-bottom:1px solid var(--hair)}
  .pv-ben:last-child{border-bottom:0}
  .pv-num{font-size:11px}
  .pv-ben h3{margin-top:8px;font-size:26px}
  .pv-ben p{margin-top:8px;font-size:15px}
  .pv-steps{margin-top:28px;grid-template-columns:1fr;gap:22px}
  .pv-step{padding-top:14px}
  .pv-step b{font-size:64px}
  .pv-step h3{margin-top:8px;font-size:26px}
  .pv-step p{margin-top:8px;font-size:15px}
  .pv-fine{margin-top:22px;font-size:11px}
  .pv-faq{margin-top:26px;max-width:none}
  .pv-q summary{padding:16px 0;gap:16px;font-size:20px}
  .pv-plus{width:18px;height:18px}
  .pv-a p{padding:0 0 18px;font-size:15px;max-width:none}
}
/* ---------- Floating buttons (preview page only) ----------
   .pv-dock is a fixed, click-through strip in the bottom corner (desktop: right) or bottom centre (phone).
   The two buttons sit in it, stacked in the same spot; only one is shown at a time. They animate with
   opacity + transform only, on the site's ease curve, 400 ms. */
.pv-dock{
  position:fixed;z-index:900;pointer-events:none;display:flex;justify-content:flex-end;align-items:flex-end;
  right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));
}
.pv-fab{
  grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:44px;min-height:44px;height:48px;padding:0 20px;margin:0;border:0;border-radius:0;
  background:var(--accent);color:#fff;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;cursor:pointer;
  -webkit-tap-highlight-color:transparent;box-shadow:0 14px 32px -12px rgba(11,18,32,.55);
  opacity:0;transform:translateY(16px);visibility:hidden;pointer-events:none;
  transition:opacity 400ms cubic-bezier(0.22,1,0.36,1),transform 400ms cubic-bezier(0.22,1,0.36,1),visibility 0s linear 400ms;
}
.pv-dock{display:grid}
.pv-fab.pv-show{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition:opacity 400ms cubic-bezier(0.22,1,0.36,1),transform 400ms cubic-bezier(0.22,1,0.36,1),visibility 0s}
.pv-fab:hover{background:#3b76f6}
.pv-fab.pv-show:active{transform:scale(.97)}
.pv-fab:focus-visible{outline:2px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 5px #fff,0 14px 32px -12px rgba(11,18,32,.55)}
.pv-fab svg{flex:none;width:16px;height:16px}
/* round "Back to top": a 48px circle (44px is the minimum tap target) */
.pv-fab--top{width:48px;padding:0;border-radius:50%;justify-self:end}
.pv-fab--top svg{width:20px;height:20px}
.pv-fab--book{justify-self:end}

/* Phone: bottom-centre, above safe areas; hidden while the form is being typed in and while the chat card is open */
@media (max-width:820px){
  .pv-dock{left:0;right:0;justify-content:center;padding:0 16px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .pv-fab--top,.pv-fab--book{justify-self:center}
  /* round button's second resting place: top-right under the sticky 64px header, used when a form field sits at the bottom */
  .pv-dock.pv-dock--top{bottom:auto;top:calc(64px + 12px);left:auto;right:calc(16px + env(safe-area-inset-right,0px));padding:0}
  html.pv-typing .pv-dock,html.pace-open .pv-dock,html.pace-kb .pv-dock{opacity:0;visibility:hidden}
}

/* Reduced motion: no movement, opacity only, nothing animates */
@media (prefers-reduced-motion:reduce){
  .pv-js .pv-rv{transform:none;transition:opacity 300ms linear}
  .pv-w{transition:none}
  .pv-q[open] .pv-a p{animation:none}
  .pv-plus{transition:none}
  .pv-fab,.pv-fab.pv-show,.pv-fab.pv-show:active{transform:none}
  .pv-fab{transition:opacity 300ms linear,visibility 0s linear 300ms}
  .pv-fab.pv-show{transition:opacity 300ms linear,visibility 0s}
}