/* =========================================================
   Personal Injury industry page — scoped components.
   Built on the existing site tokens (color-scheme-1 + Inter).
   No new design language: neutrals, blue→purple accent,
   16px radii, 1px #efefef borders, subtle shadows.
   ========================================================= */
:root{
  --pi-border: var(--color-scheme-1--grey-border-color);   /* #efefef */
  --pi-surface: #fff;
  --pi-surface-2: var(--color-scheme-1--neutral-50);        /* #fcfcfc */
  --pi-surface-3: var(--color-scheme-1--neutral-100);       /* #f6f6f6 */
  --pi-ink: var(--color-scheme-1--neutral-950);             /* #09090b */
  --pi-ink-2: var(--color-scheme-1--neutral-600);           /* #565860 */
  --pi-ink-3: var(--color-scheme-1--neutral-400);           /* #a1a1aa */
  --pi-blue: var(--color-scheme-1--blue);                   /* #1d4ed8 */
  --pi-purple: var(--color-scheme-1--second-purple);        /* #8b5cf6 */
  --pi-grad: linear-gradient(131deg, var(--color-scheme-1--second-purple), var(--color-scheme-1--blue));
  --pi-live: #1f9d57;                                       /* success / live / signed */
  --pi-shadow: 0 4px 24px -10px rgba(9,9,11,.16), 0 1px 0 rgba(255,255,255,.6) inset;
  --pi-shadow-sm: 0 2px 10px -6px rgba(9,9,11,.18);
  --pi-mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
}

/* ---------- shared bits ---------- */
/* Horizontal-overflow guard: prevents any element from creating page-level horizontal scroll
   at any breakpoint. `clip` (not `hidden`) is used so it does NOT establish a scroll container,
   leaving the sticky scroll-fill section and the video reel's own scroller working. No-op on
   desktop, where there is no overflow to clip. */
html{ overflow-x:clip; }
body{ overflow-x:clip; }
.pi-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:14px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--pi-ink-2);
}
.pi-eyebrow::before{
  content:""; width:22px; height:2px; border-radius:2px; background:var(--pi-grad);
}
.pi-eyebrow.is-center{ justify-content:center; }
.pi-grad-text{
  background-image:var(--pi-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.pi-reveal{ }
/* hidden-to-animate state only applies once JS confirms it can drive it;
   if the animation clock is frozen (embedded/preview iframes) the fallback
   removes .pi-anim and content stays visible instead of stuck blank */
html.pi-anim .pi-reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
html.pi-anim .pi-reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ html.pi-anim .pi-reveal{ opacity:1; transform:none; transition:none; } }

.pi-card{
  background:var(--pi-surface); border:1px solid var(--pi-border);
  border-radius:16px; box-shadow:var(--pi-shadow-sm);
}

/* ============ HERO ============ */
.pi-hero{ background:linear-gradient(180deg,#fff, var(--color-scheme-1--neutral-100)); overflow:hidden; }
.pi-hero-grid{
  display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:center;
}
.pi-hero-copy{ max-width:560px; }
.pi-trust{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.pi-trust-item{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border:1px solid var(--pi-border); border-radius:999px;
  background:var(--pi-surface); font-size:14px; font-weight:500; color:var(--pi-ink);
  box-shadow:var(--pi-shadow-sm);
}
.pi-trust-item svg{ width:15px; height:15px; color:var(--pi-live); flex:none; }

/* hero: webinar chip sits parallel (same row) with the Try Intaker button, with a brand accent.
   column-gap accounts for the button's decorative glow (absolute, right:-25px, 170px wide) so it
   clears the webinar card to the right; row-gap stays tight for when they stack on small screens */
.pi-hero-cta-row{ display:flex; flex-wrap:wrap; align-items:center; column-gap:46px; row-gap:16px; }
.pi-hero-cta-row .button-group{ flex:none; margin:0; }
.pi-hero-cta-row .pi-webinar{ flex:1 1 280px; width:auto; max-width:420px; margin-top:0; }
.pi-webinar.pi-webinar--accent{ border-color:transparent; background:linear-gradient(180deg, rgba(139,92,246,.08), var(--pi-surface)); box-shadow:0 0 0 1.5px var(--pi-purple) inset, 0 16px 34px -16px rgba(139,92,246,.5), 0 0 0 0 rgba(139,92,246,.45); animation:pi-webinar-pulse 2.6s ease-in-out infinite; }
@keyframes pi-webinar-pulse{ 0%,100%{ box-shadow:0 0 0 1.5px var(--pi-purple) inset, 0 16px 34px -16px rgba(139,92,246,.5), 0 0 0 0 rgba(139,92,246,.45); } 50%{ box-shadow:0 0 0 1.5px var(--pi-purple) inset, 0 16px 34px -16px rgba(139,92,246,.5), 0 0 0 7px rgba(139,92,246,0); } }
@media (prefers-reduced-motion: reduce){ .pi-webinar.pi-webinar--accent{ animation:none; } }
.pi-webinar--accent .pi-webinar-link{ background:var(--pi-purple); color:#fff; border-color:transparent; }
.pi-webinar--accent .pi-webinar-link:hover{ background:#7c3aed; }
.pi-webinar{
  display:flex; align-items:center; gap:14px; margin-top:22px;
  padding:12px 14px; border:1px solid var(--pi-border); border-radius:14px;
  background:var(--pi-surface); box-shadow:var(--pi-shadow-sm); width:100%; max-width:360px;
}
.pi-webinar-date{
  flex:none; width:54px; text-align:center; border-radius:10px; overflow:hidden;
  border:1px solid var(--pi-border); line-height:1;
}
.pi-webinar-date .m{ display:block; background:var(--pi-ink); color:#fff; font-size:10px; font-weight:600; letter-spacing:.1em; padding:4px 0; }
.pi-webinar-date .d{ display:block; font-size:18px; font-weight:600; color:var(--pi-ink); padding:5px 0; }
.pi-webinar-body{ min-width:0; }
.pi-webinar-kicker{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--pi-purple); }
.pi-webinar-kicker .dot{ width:6px; height:6px; border-radius:50%; background:#e11d48; box-shadow:0 0 0 0 rgba(225,29,72,.5); animation:pi-pulse 2s infinite; }
.pi-webinar-title{ font-size:15px; font-weight:600; color:var(--pi-ink); letter-spacing:-.01em; margin:2px 0; }
.pi-webinar-meta{ font-size:13px; color:var(--pi-ink-2); }
.pi-webinar-link{
  margin-left:auto; flex:none; align-self:center; font-size:13px; font-weight:600; color:var(--pi-ink);
  display:inline-flex; align-items:center; gap:5px; text-decoration:none; padding:7px 12px;
  border:1px solid var(--pi-border); border-radius:10px; background:var(--pi-surface-2);
}
.pi-webinar-link:hover{ background:var(--pi-surface-3); }

@keyframes pi-pulse{ 0%{ box-shadow:0 0 0 0 rgba(225,29,72,.45);} 70%{ box-shadow:0 0 0 7px rgba(225,29,72,0);} 100%{ box-shadow:0 0 0 0 rgba(225,29,72,0);} }

/* ---------- Live Call Connect device demo ---------- */
.pi-demo{ position:relative; }
.pi-demo-stage{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch; }
.pi-phone{
  position:relative; background:var(--pi-surface); border:1px solid var(--pi-border);
  border-radius:26px; padding:14px; box-shadow:var(--pi-shadow); min-height:392px;
  display:flex; flex-direction:column;
}
/* demo phones get a fixed height so swapping idle/incoming/connected
   (the ring animation) can never reflow the hero or resize the page */
.pi-demo .pi-phone{ height:480px; min-height:0; }
.pi-demo .pi-screen{ overflow:hidden; }
/* connecting / on-call states overlay the lead screen instead of stacking */
.pi-demo .pi-swap{ position:absolute; left:14px; right:14px; top:48px; bottom:14px; background:var(--pi-surface); justify-content:center; z-index:2; }
.pi-phone-label{
  display:flex; align-items:center; gap:7px; font-size:11px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--pi-ink-3); padding:2px 4px 12px;
}
.pi-phone-label .pi-dot{ width:7px; height:7px; border-radius:50%; background:var(--pi-blue); }
.pi-phone--firm .pi-phone-label .pi-dot{ background:var(--pi-live); }
.pi-screen{ flex:1; display:flex; flex-direction:column; gap:10px; }

/* chat bubbles (lead side) */
.pi-bubble{ max-width:84%; padding:11px 13px; border-radius:14px; font-size:14px; line-height:1.4; letter-spacing:-.01em; }
.pi-bubble--bot{ align-self:flex-start; background:var(--pi-surface-3); color:var(--pi-ink); border-bottom-left-radius:5px; }
.pi-bubble--me{ align-self:flex-end; background:var(--pi-ink); color:#fff; border-bottom-right-radius:5px; }
.pi-host{ display:flex; align-items:center; gap:8px; margin-bottom:2px; }
.pi-host-av{ width:24px; height:24px; border-radius:50%; background:var(--pi-grad); color:#fff; font-size:11px; font-weight:600; display:grid; place-items:center; }
.pi-host-name{ font-size:12px; font-weight:600; color:var(--pi-ink-2); }
.pi-options{ display:flex; flex-direction:column; gap:7px; align-self:flex-start; width:84%; }
.pi-opt{
  display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:11px;
  border:1px solid var(--pi-border); background:var(--pi-surface); font-size:13.5px; font-weight:500;
  color:var(--pi-ink); transition:all .25s ease;
}
.pi-opt .pi-opt-ico{ width:18px; height:18px; color:var(--pi-ink-2); flex:none; }
.pi-opt.is-picked{ border-color:transparent; background:rgba(29,78,216,.08); color:var(--pi-blue); box-shadow:0 0 0 1.5px var(--pi-blue) inset; }
.pi-opt.is-picked .pi-opt-ico{ color:var(--pi-blue); }
.pi-numfield{
  display:flex; align-items:center; gap:9px; padding:11px 13px; border-radius:12px;
  border:1px solid var(--pi-border); background:var(--pi-surface); align-self:stretch;
}
.pi-numfield svg{ width:17px; height:17px; color:var(--pi-ink-3); flex:none; }
.pi-numfield .num{ font-size:15px; font-weight:600; letter-spacing:.02em; color:var(--pi-ink); font-variant-numeric:tabular-nums; }
.pi-numfield .caret{ width:1.5px; height:17px; background:var(--pi-blue); animation:pi-blink 1s steps(2) infinite; }
@keyframes pi-blink{ 50%{ opacity:0; } }
.pi-callbtn{
  margin-top:auto; display:flex; align-items:center; justify-content:center; gap:9px;
  padding:13px; border-radius:13px; background:var(--pi-ink); color:#fff;
  font-size:14.5px; font-weight:600; letter-spacing:-.01em;
}
.pi-callbtn svg{ width:17px; height:17px; }
.pi-callbtn.is-live{ background:var(--pi-live); }
.pi-connecting{ margin-top:auto; text-align:center; padding-top:8px; }
.pi-connecting .ring{
  width:74px; height:74px; margin:6px auto 12px; border-radius:50%;
  border:2.5px solid rgba(31,157,87,.18); border-top-color:var(--pi-live);
  animation:pi-spin 1s linear infinite;
  display:grid; place-items:center;
}
.pi-connecting .ring svg{ width:28px; height:28px; color:var(--pi-live); }
.pi-connecting .l1{ font-size:15px; font-weight:600; color:var(--pi-ink); }
.pi-connecting .l2{ font-size:13px; color:var(--pi-ink-2); margin-top:3px; }
@keyframes pi-spin{ to{ transform:rotate(360deg); } }

/* firm incoming-call screen */
.pi-phone--firm{ background:var(--color-scheme-1--neutral-950); border-color:#26262b; color:#fff; }
.pi-phone--firm .pi-phone-label{ color:rgba(255,255,255,.5); }
.pi-incoming{ flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; padding-top:18px; }
.pi-incoming-tag{
  display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px;
  background:rgba(31,157,87,.16); color:#5ce49a; font-size:12px; font-weight:600; letter-spacing:.02em;
}
.pi-incoming-tag .dot{ width:7px; height:7px; border-radius:50%; background:#34d27b; animation:pi-pulse 1.6s infinite; }
.pi-incoming-av{
  width:78px; height:78px; border-radius:50%; margin:24px 0 14px; background:var(--pi-grad);
  display:grid; place-items:center; color:#fff;
  box-shadow:0 0 0 0 rgba(139,92,246,.45); animation:pi-ringpulse 1.5s infinite;
}
.pi-incoming-av svg{ width:34px; height:34px; }
.pi-incoming-name{ font-size:19px; font-weight:600; letter-spacing:-.01em; }
.pi-incoming-sub{ font-size:13px; color:rgba(255,255,255,.55); margin-top:4px; }
.pi-incoming-press{
  margin-top:18px; display:inline-flex; align-items:center; gap:9px; padding:11px 18px;
  border-radius:12px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  font-size:14px; font-weight:600;
}
.pi-incoming-press .key{ width:24px; height:24px; border-radius:7px; background:#fff; color:var(--pi-ink); display:grid; place-items:center; font-size:13px; font-weight:700; }
.pi-incoming-actions{ margin-top:auto; display:flex; gap:34px; padding-top:18px; }
.pi-ic-btn{ display:flex; flex-direction:column; align-items:center; gap:6px; font-size:11px; color:rgba(255,255,255,.6); }
.pi-ic-circle{ width:50px; height:50px; border-radius:50%; display:grid; place-items:center; }
.pi-ic-circle svg{ width:22px; height:22px; color:#fff; }
.pi-ic-circle.red{ background:#e1374e; }
.pi-ic-circle.green{ background:var(--pi-live); }
@keyframes pi-ringpulse{ 0%{ box-shadow:0 0 0 0 rgba(139,92,246,.4);} 70%{ box-shadow:0 0 0 16px rgba(139,92,246,0);} 100%{ box-shadow:0 0 0 0 rgba(139,92,246,0);} }

/* timeline */
.pi-timeline{ display:flex; align-items:flex-start; gap:0; margin-top:22px; }
.pi-tl-step{ flex:1; position:relative; text-align:center; padding-top:24px; }
.pi-tl-step::before{ content:""; position:absolute; top:7px; left:0; right:0; height:2px; background:var(--pi-border); }
.pi-tl-step:first-child::before{ left:50%; }
.pi-tl-step:last-child::before{ right:50%; }
.pi-tl-dot{
  position:absolute; top:1px; left:50%; transform:translateX(-50%); width:15px; height:15px; border-radius:50%;
  background:#fff; border:2px solid var(--pi-border); transition:all .3s ease; z-index:1;
}
.pi-tl-step.is-on .pi-tl-dot{ border-color:transparent; background:var(--pi-grad); box-shadow:0 0 0 4px rgba(29,78,216,.12); }
.pi-tl-t{ font-size:13px; font-weight:700; color:var(--pi-ink); font-variant-numeric:tabular-nums; }
.pi-tl-l{ font-size:12.5px; color:var(--pi-ink-2); margin-top:2px; }

/* ============ generic two-column feature ============ */
.pi-split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
/* video-intake split: top-align so the picture sits parallel with the heading/copy beside it */
.pi-split.pi-split--top{ align-items:start; }
/* inline text link (uses the brand accent) */
.pi-inline-link{ color:var(--pi-blue); font-weight:500; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
.pi-inline-link:hover{ color:var(--pi-purple); }
/* the hero image has ~23% transparent space above the widget; on desktop pull it up so the
   visible widget lines up with the "A video intro that stops the search" heading */
@media (min-width:992px){
  .pi-split--top .pi-webchat-hero{ margin-top:-72px; }
}
/* stretch the framed graphic to match the copy column so it ends level with the feature boxes */
.pi-split.pi-split--stretch{ align-items:stretch; }
.pi-split--stretch .pi-split-media{ display:flex; }
.pi-split--stretch .pi-media-frame{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; background:radial-gradient(115% 85% at 50% 28%, rgba(139,92,246,.16), rgba(29,78,216,.07) 46%, var(--pi-surface-2) 82%); }
.pi-split.rev .pi-split-media{ order:-1; }
.pi-split-copy{ max-width:520px; }
.pi-media-frame{
  border:1px solid var(--pi-border); border-radius:20px; background:var(--pi-surface-2);
  padding:22px; box-shadow:var(--pi-shadow); position:relative; overflow:hidden;
}
.pi-media-video{ display:block; width:100%; height:auto; border-radius:20px; }
.pi-media-video--lg{ clip-path: inset(0 23% 0 23% round 20px); }
@media (min-width:992px){
  .pi-media-video--lg{ width:122%; max-width:none; margin-left:-11%; }
}
.pi-ease-badge{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 12px; border:1px solid var(--pi-border); border-radius:999px;
  background:var(--pi-surface); font-size:13px; font-weight:500; color:var(--pi-ink);
  box-shadow:var(--pi-shadow-sm);
}
.pi-ease-badge svg{ width:14px; height:14px; color:var(--pi-live); flex:none; }
.pi-ease-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:24px; }
.pi-ease-box{ background:var(--pi-surface); border:1px solid var(--pi-border); border-radius:14px; padding:22px; box-shadow:var(--pi-shadow-sm); display:flex; flex-direction:column; justify-content:center; }
.pi-ease-box-ico{ width:40px; height:40px; border-radius:10px; background:var(--pi-surface-3); display:grid; place-items:center; color:var(--pi-ink); margin-bottom:13px; }
.pi-ease-box-ico svg{ width:20px; height:20px; }
.pi-ease-box-ico.pi-ico-rose{ background:rgba(244,63,94,.12); color:#e11d48; }
.pi-ease-box-ico.pi-ico-blue{ background:rgba(29,78,216,.12); color:var(--pi-blue); }
.pi-ease-box-ico.pi-ico-purple{ background:rgba(139,92,246,.14); color:var(--pi-purple); }
.pi-ease-box-ico.pi-ico-green{ background:rgba(31,157,87,.12); color:var(--pi-live); }
.pi-ease-box h4{ font-size:16px; font-weight:600; color:var(--pi-ink); margin:0 0 5px; letter-spacing:-.01em; }
.pi-ease-box p{ font-size:15px; line-height:1.55; color:var(--pi-ink-2); margin:0; }
@media (max-width:560px){ .pi-ease-grid{ grid-template-columns:1fr; } }

/* ===== language-translation animation (own-language box) ===== */
.pi-xlate{ width:100%; margin:0; display:flex; flex-direction:column; align-items:center; }
.pi-xlate-stage{
  height:58px; display:flex; align-items:center; justify-content:center;
  overflow:hidden; width:100%;
}
.pi-xlate-word{
  font-size:30px; font-weight:700; letter-spacing:-.02em; line-height:1.25; white-space:nowrap;
  padding:0 2px;
  background:var(--pi-grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  will-change:transform,opacity,filter;
}
.pi-xlate-word.is-out{ animation:pi-xlate-out .34s cubic-bezier(.55,0,.45,1) forwards; }
.pi-xlate-word.is-in{ animation:pi-xlate-in .42s cubic-bezier(.18,.9,.3,1) forwards; }
@keyframes pi-xlate-out{
  to{ opacity:0; transform:translateY(-65%) scale(.92); filter:blur(7px); }
}
@keyframes pi-xlate-in{
  from{ opacity:0; transform:translateY(70%) scale(.92); filter:blur(7px); }
  to{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}
.pi-xlate-scan{
  width:54px; height:2px; border-radius:2px; margin-top:9px; position:relative; overflow:hidden;
  background:var(--pi-border);
}
.pi-xlate-scan::after{
  content:""; position:absolute; inset:0; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--pi-purple),var(--pi-blue),transparent);
  transform:translateX(-100%);
}
.pi-xlate.is-translating .pi-xlate-scan::after{ animation:pi-xlate-scan .76s ease-in-out; }
@keyframes pi-xlate-scan{ from{ transform:translateX(-100%); } to{ transform:translateX(100%); } }
.pi-xlate-lang{
  display:inline-flex; align-items:center; gap:6px; margin-top:11px;
  font-size:12px; font-weight:600; letter-spacing:.01em; color:var(--pi-ink-3);
}
.pi-xlate-dot{ width:6px; height:6px; border-radius:50%; background:var(--pi-live); flex:none; }
.pi-xlate-lname{ transition:opacity .3s ease; }
.pi-xlate-lname.is-swap{ opacity:0; }
@media (prefers-reduced-motion:reduce){
  .pi-xlate-word.is-out,.pi-xlate-word.is-in{ animation:none; }
  .pi-xlate.is-translating .pi-xlate-scan::after{ animation:none; }
}

/* ===== "warmth of a real person" concept: chat bubble radiating warmth with a beating heart ===== */
.pi-warmth{ position:relative; width:130px; height:122px; margin:0; align-self:center; display:grid; place-items:center; animation:pi-warmth-bob 2.4s ease-in-out infinite; }
.pi-warmth::before{
  content:""; position:absolute; z-index:0; width:96px; height:96px; border-radius:50%;
  background:radial-gradient(circle, rgba(139,92,246,.34), rgba(167,139,250,.18) 45%, transparent 72%);
  animation:pi-warmth-glow 2.4s ease-in-out infinite;
}
.pi-warmth-ring{
  position:absolute; z-index:1; width:74px; height:74px; border-radius:50%;
  border:2px solid rgba(139,92,246,.5); opacity:0; transform:scale(.7);
  animation:pi-warmth-ring 2.8s ease-out infinite;
}
.pi-warmth-ring:nth-child(2){ animation-delay:.93s; }
.pi-warmth-ring:nth-child(3){ animation-delay:1.86s; }
.pi-warmth-bubble{
  position:relative; z-index:2; width:62px; height:60px;
  display:grid; place-items:center;
}
/* the bubble is one single SVG path (body + tail in one continuous outline, no overlapping shapes) */
.pi-warmth-bubble-shape{
  position:absolute; inset:0; width:100%; height:100%;
  filter:drop-shadow(0 10px 16px rgba(9,9,11,.28));
}
.pi-warmth-bubble-shape path{ fill:var(--pi-surface); stroke:var(--pi-border); stroke-width:1; }
.pi-warmth-heart{ position:relative; z-index:1; width:30px; height:30px; display:block; margin-bottom:8px; transform-origin:center; animation:pi-warmth-beat 2.4s ease-in-out infinite; }
@keyframes pi-warmth-glow{ 0%,100%{ transform:scale(.88); opacity:.5; } 13%{ transform:scale(1.08); opacity:.9; } 30%{ transform:scale(.95); opacity:.62; } }
@keyframes pi-warmth-ring{ 0%{ transform:scale(.7); opacity:.6; } 100%{ transform:scale(1.7); opacity:0; } }
@keyframes pi-warmth-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }
@keyframes pi-warmth-beat{ 0%,100%{ transform:scale(1); } 11%{ transform:scale(1.17); } 22%{ transform:scale(1); } 31%{ transform:scale(1.1); } 42%{ transform:scale(1); } }
@media (prefers-reduced-motion:reduce){
  .pi-warmth{ animation:none; }
  .pi-warmth::before{ animation:none; opacity:.7; }
  .pi-warmth-ring{ animation:none; opacity:0; }
  .pi-warmth-bubble{ animation:none; }
  .pi-warmth-heart{ animation:none; }
}

/* ===== practice-area page card that changes per page ===== */
.pi-pages{
  width:100%; max-width:188px; margin:0; align-self:center;
  padding:10px; text-align:left;
  background:var(--pi-surface); border:1px solid var(--pi-border);
  border-radius:14px; box-shadow:var(--pi-shadow-sm);
}
.pi-pg-bar{ display:flex; align-items:center; gap:9px; margin-bottom:8px; }
.pi-pg-lights{ width:30px; height:8px; position:relative; flex:none; }
.pi-pg-lights::before{
  content:""; position:absolute; left:0; top:0; width:8px; height:8px; border-radius:50%;
  background:#ff5f57; box-shadow:11px 0 0 #febc2e, 22px 0 0 #28c840;
}
.pi-pg-url{
  font-size:11px; font-weight:600; color:var(--pi-ink-3); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; transition:opacity .28s ease, transform .28s ease;
}
.pi-pg-video{
  position:relative; height:56px; border-radius:9px; overflow:hidden;
  background:var(--pg); display:flex; align-items:center; justify-content:center;
  transition:opacity .3s ease, transform .3s ease;
}
.pi-pg-play{
  position:relative; width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,.94); display:grid; place-items:center;
  box-shadow:0 5px 12px -3px rgba(0,0,0,.45);
}
.pi-pg-play svg{ width:12px; height:12px; color:#111; margin-left:1.5px; }
.pi-pg-play::after{
  content:""; position:absolute; inset:-5px; border-radius:50%;
  border:2px solid rgba(255,255,255,.6); animation:pi-pg-ring 2.2s ease-out infinite;
}
@keyframes pi-pg-ring{ 0%{ transform:scale(.8); opacity:.7; } 100%{ transform:scale(1.5); opacity:0; } }
.pi-pg-dur{
  position:absolute; right:6px; bottom:5px; font-size:9px; font-weight:600; color:#fff;
  background:rgba(0,0,0,.45); padding:1px 5px; border-radius:5px; letter-spacing:.02em;
}
.pi-pg-chat{ display:flex; align-items:center; gap:7px; margin-top:9px; }
.pi-pg-ava{
  width:18px; height:18px; border-radius:50%; background:var(--pi-grad); color:#fff;
  font-size:10px; font-weight:700; display:grid; place-items:center; flex:none;
}
.pi-pg-msg{
  font-size:11px; line-height:1.32; color:var(--pi-ink-2);
}
.pi-pages.is-flip .pi-pg-url,
.pi-pages.is-flip .pi-pg-video,
.pi-pages.is-flip .pi-pg-msg{ animation:pi-pg-cross .56s ease both; }
@keyframes pi-pg-cross{ 0%{ opacity:1; transform:translateY(0); } 42%{ opacity:0; transform:translateY(6px); } 58%{ opacity:0; transform:translateY(-6px); } 100%{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce){
  .pi-pg-play::after{ animation:none; opacity:0; }
  .pi-pages.is-flip .pi-pg-url,.pi-pages.is-flip .pi-pg-video,.pi-pages.is-flip .pi-pg-msg{ animation:none; }
}

/* ============================================================
   DARK MODE — "We make it easy…" website-chat section (.pi-dark)
   Scoped token overrides cascade into every token-driven widget
   (ease cards, warmth heart, translate, voice/video, page card);
   a few targeted rules fix hardcoded colors. Desktop palette of
   the rest of the page is untouched.
   ============================================================ */
.pi-dark{
  /* token overrides — inherited by all descendants */
  --pi-surface: rgba(255,255,255,.07);
  --pi-surface-2: rgba(255,255,255,.05);
  --pi-surface-3: rgba(255,255,255,.12);
  --pi-border: rgba(255,255,255,.14);
  --pi-ink: #f4f1ff;
  --pi-ink-2: #cdc6ec;
  --pi-ink-3: #9d94c4;
  --pi-blue: #84abff;     /* lifted from #1d4ed8 for contrast on dark */
  --pi-purple: #bca6ff;
  --pi-shadow-sm: 0 12px 30px -16px rgba(0,0,0,.65);
  position:relative;
  background:
    radial-gradient(135% 120% at 50% -15%, #2a1750 0%, #1b0f37 40%, #100926 74%, #0a0518 100%);
  color:var(--pi-ink);
}
/* hairline edges so the dark band reads as an intentional spotlight */
.pi-dark::before,
.pi-dark::after{
  content:""; position:absolute; left:0; right:0; height:1px; pointer-events:none; z-index:1;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
}
.pi-dark::before{ top:0; }
.pi-dark::after{ bottom:0; }
/* heading + eyebrow → light */
.pi-dark .heading-style-h2.text-color-primary,
.pi-dark .text-color-primary{ color:var(--pi-ink); }
.pi-dark .pi-eyebrow{ color:#c6bbf0; }
/* glassy cards: subtle blur + top sheen for depth on the gradient */
.pi-dark .pi-ease-box{
  background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  box-shadow:0 20px 44px -24px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.09);
}
/* inline links lifted for readability on dark */
.pi-dark .pi-inline-link{ color:#a3c0ff; }
.pi-dark .pi-inline-link:hover{ color:#ccbcff; }
/* recorder + translate tracks: brighter so they're visible on dark cards */
.pi-dark .pi-attach-scrub{ background:rgba(255,255,255,.18); }
.pi-dark .pi-xlate-scan{ background:rgba(255,255,255,.18); }
/* audio (default) lens tuned for dark; video lens keeps its blue gradient */
.pi-dark .pi-attach-lens{ background:rgba(251,113,133,.2); color:#fb9aab; }
/* warmth glow a touch stronger so it blooms against the dark */
.pi-dark .pi-warmth::before{
  background:radial-gradient(circle, rgba(167,139,250,.5), rgba(139,92,246,.26) 45%, transparent 72%);
}
/* the chat bubble must be solid so the emitting rings don't show through it (single SVG path) */
.pi-dark .pi-warmth-bubble-shape path{ fill:#2a1c4d; }

/* consistent zones: caption row reserves equal height (aligned across boxes),
   animation row centers each animation (shared centerline). The box is the grid,
   so each <p> stays a normal text block with correct word/link spacing. */
.pi-ease-grid--row .pi-ease-box{ display:grid; grid-template-rows:96px 1fr; justify-items:center; align-items:center; padding-top:32px; padding-bottom:32px; }
.pi-ease-grid--row .pi-ease-box > p{ width:100%; margin:0; text-wrap:balance; }
.pi-ease-grid--row .pi-voicebar{ margin:0; }

/* vertical, centered variant: title → 4 boxes in a row → graphic below */
.pi-stack{ display:flex; flex-direction:column; align-items:center; }
.pi-ease-grid--row{ grid-template-columns:repeat(4,1fr); gap:18px; margin-top:44px; width:100%; }
.pi-ease-grid--row .pi-ease-box{ text-align:center; align-items:center; }
.pi-stack-media{ margin-top:52px; width:100%; display:flex; justify-content:center; }
@media (max-width:880px){ .pi-ease-grid--row{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .pi-ease-grid--row{ grid-template-columns:1fr; } }

/* ============ channels (cards) ============ */
.pi-3col{ display:flex; flex-wrap:wrap; justify-content:center; gap:20px; }
.pi-3col > .pi-feature{ flex:0 1 calc((100% - 40px) / 3); }
.pi-feature{
  background:var(--pi-surface); border:1px solid var(--pi-border); border-radius:16px; padding:32px;
  box-shadow:var(--pi-shadow-sm); display:flex; flex-direction:column; gap:12px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.pi-feature:hover{ transform:translateY(-3px); box-shadow:var(--pi-shadow); }
.pi-feature-ico{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--pi-surface-3); color:var(--pi-ink); }
.pi-feature-ico svg{ width:22px; height:22px; }
.pi-feature-logos{ display:flex; align-items:center; gap:8px; height:44px; }
.pi-flogo{ width:38px; height:38px; border-radius:10px; flex:none; display:grid; place-items:center; color:#fff; box-shadow:var(--pi-shadow-sm); }
.pi-flogo svg{ width:20px; height:20px; }
.pi-feature h3{ font-size:28px; font-weight:400; letter-spacing:-.02em; color:var(--pi-ink); margin:0; line-height:1.25; }
.pi-feature p{ font-size:16px; line-height:1.5; color:var(--pi-ink-2); margin:0; }

/* ============ qualifier rules ============ */
.pi-rules{ display:grid; grid-template-columns:300px 1fr; gap:0; border:1px solid var(--pi-border); border-radius:18px; overflow:hidden; background:var(--pi-surface); box-shadow:var(--pi-shadow); }
.pi-rules-list{ background:var(--pi-surface-2); border-right:1px solid var(--pi-border); padding:10px; display:flex; flex-direction:column; gap:6px; }
.pi-rule-tab{
  text-align:left; padding:14px 15px; border-radius:12px; border:1px solid transparent; background:transparent; cursor:pointer;
  display:flex; gap:12px; align-items:flex-start; transition:all .2s ease; width:100%; font:inherit;
}
.pi-rule-tab:hover{ background:var(--pi-surface-3); }
.pi-rule-tab.is-active{ background:var(--pi-surface); border-color:var(--pi-border); box-shadow:var(--pi-shadow-sm); }
.pi-rule-num{ font-family:var(--pi-mono); font-size:12px; font-weight:600; color:#fff; background:var(--pi-ink); border-radius:7px; width:30px; height:24px; display:grid; place-items:center; flex:none; }
.pi-rule-tab.is-active .pi-rule-num{ background-image:var(--pi-grad); }
.pi-rule-tt{ font-size:16px; font-weight:600; color:var(--pi-ink); letter-spacing:-.01em; line-height:1.3; }
.pi-rule-panel{ padding:30px 34px; display:none; }
.pi-rule-panel.is-active{ display:block; animation:pi-fade .35s ease; }
@keyframes pi-fade{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }
.pi-rule-cond-label{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--pi-ink-3); margin-bottom:10px; }
.pi-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.pi-chip{
  font-family:var(--pi-mono); font-size:13px; padding:7px 11px; border-radius:9px;
  background:var(--pi-surface-3); border:1px solid var(--pi-border); color:var(--pi-ink);
}
.pi-chip b{ color:var(--pi-blue); font-weight:600; }
.pi-rule-arrow{ display:flex; align-items:center; gap:10px; margin:20px 0; color:var(--pi-ink-3); }
.pi-rule-arrow::before,.pi-rule-arrow::after{ content:""; height:1px; background:var(--pi-border); flex:1; }
.pi-rule-arrow span{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.pi-then{
  display:flex; gap:13px; align-items:flex-start; padding:18px 20px; border-radius:14px;
  background:rgba(29,78,216,.05); border:1px solid rgba(29,78,216,.16);
}
.pi-then-ico{ width:38px; height:38px; border-radius:10px; background:var(--pi-grad); display:grid; place-items:center; flex:none; }
.pi-then-ico svg{ width:20px; height:20px; color:#fff; }
.pi-then p{ margin:0; font-size:16px; line-height:1.5; color:var(--pi-ink); font-weight:500; }

/* ============ before / after compare ============ */
.pi-compare{ display:grid; grid-template-columns:1fr auto 1fr; gap:0; align-items:stretch; border:1px solid var(--pi-border); border-radius:20px; overflow:hidden; box-shadow:var(--pi-shadow); }
.pi-compare-side{ padding:32px; }
.pi-compare-side.bad{ background:var(--pi-surface-3); }
.pi-compare-side.good{ background:var(--pi-surface); position:relative; }
.pi-compare-tag{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:18px; }
.pi-compare-side.bad .pi-compare-tag{ color:var(--pi-ink-3); }
.pi-compare-side.good .pi-compare-tag{ color:var(--pi-blue); }
.pi-compare-mid{ width:1px; background:var(--pi-border); position:relative; }
.pi-compare-vs{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:42px; height:42px; border-radius:50%; background:#fff; border:1px solid var(--pi-border); display:grid; place-items:center; font-size:12px; font-weight:700; color:var(--pi-ink-2); box-shadow:var(--pi-shadow-sm); z-index:2; }
/* clunky form */
.pi-form-row{ height:40px; border-radius:9px; background:#fff; border:1px solid var(--pi-border); margin-bottom:10px; display:flex; align-items:center; padding:0 12px; }
.pi-form-row .ph{ height:9px; border-radius:4px; background:var(--color-scheme-1--neutral-300); width:42%; }
.pi-form-row.tall{ height:78px; align-items:flex-start; padding-top:12px; }
.pi-form-note{ font-size:13px; color:var(--pi-ink-3); margin-top:6px; display:flex; align-items:center; gap:7px; }
/* guided experience */
.pi-guided-q{ font-size:14px; font-weight:600; color:var(--pi-ink); margin-bottom:11px; }
.pi-guided-opts{ display:flex; flex-direction:column; gap:9px; }
.pi-guided-opt{ display:flex; align-items:center; gap:11px; padding:12px 14px; border-radius:12px; border:1px solid var(--pi-border); background:var(--pi-surface-2); font-size:14px; font-weight:500; color:var(--pi-ink); }
.pi-guided-opt .gi{ width:30px; height:30px; border-radius:8px; background:#fff; border:1px solid var(--pi-border); display:grid; place-items:center; flex:none; color:var(--pi-blue); }
.pi-guided-opt .gi svg{ width:16px; height:16px; }
.pi-guided-opt.dim{ opacity:.4; }
.pi-guided-opt.pick{ border-color:transparent; box-shadow:0 0 0 1.5px var(--pi-blue) inset; background:rgba(29,78,216,.06); }

/* ============ social DM flow ============ */
.pi-flow{ display:flex; align-items:center; justify-content:center; gap:0; flex-wrap:wrap; }
.pi-flow-sources{ display:flex; flex-direction:column; gap:14px; }
.pi-src{ display:flex; align-items:center; gap:12px; padding:13px 18px 13px 14px; border:1px solid var(--pi-border); border-radius:14px; background:var(--pi-surface); box-shadow:var(--pi-shadow-sm); min-width:210px; }
.pi-src-ico{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; flex:none; color:#fff; }
.pi-src-ico svg{ width:21px; height:21px; }
.pi-src-name{ font-size:16px; font-weight:600; color:var(--pi-ink); }
.pi-src-sub{ font-size:13px; color:var(--pi-ink-2); }
.pi-flow-pipe{ width:90px; height:160px; position:relative; flex:none; }
.pi-flow-pipe svg{ width:100%; height:100%; overflow:visible; }
.pi-flow-pipe path{ fill:none; stroke:var(--pi-border); stroke-width:2; }
.pi-flow-pipe .live{ stroke:url(#piFlowGrad); stroke-width:2.5; stroke-dasharray:7 9; animation:pi-dash 1.1s linear infinite; }
@keyframes pi-dash{ to{ stroke-dashoffset:-32; } }
.pi-flow-hub{ width:128px; height:128px; border-radius:28px; background:var(--pi-ink); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#fff; box-shadow:var(--pi-shadow); flex:none; }
.pi-flow-hub .logo{ position:relative; width:52px; height:52px; border-radius:15px; background:var(--pi-grad); display:grid; place-items:center; box-shadow:0 10px 24px -6px rgba(139,92,246,.75), 0 0 0 1px rgba(255,255,255,.14) inset; }
.pi-flow-hub .logo::after{ content:""; position:absolute; inset:0; border-radius:inherit; animation:pi-logo-pulse 2.1s ease-out infinite; }
@keyframes pi-logo-pulse{ 0%{ box-shadow:0 0 0 0 rgba(139,92,246,.55); } 70%{ box-shadow:0 0 0 15px rgba(139,92,246,0); } 100%{ box-shadow:0 0 0 0 rgba(139,92,246,0); } }
@media (prefers-reduced-motion: reduce){ .pi-flow-hub .logo::after{ animation:none; } }
.pi-flow-hub .logo svg{ width:28px; height:28px; }
.pi-flow-hub .nm{ font-size:14px; font-weight:600; }
.pi-flow-out{ margin-left:0; }
.pi-flow-reply{ display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px; background:rgba(31,157,87,.1); border:1px solid rgba(31,157,87,.22); color:var(--pi-live); font-size:13px; font-weight:600; margin-top:18px; }
.pi-flow-reply .dot{ width:7px; height:7px; border-radius:50%; background:var(--pi-live); }

/* ============ agent intro cards ============ */
.pi-agents{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.pi-agent{ background:var(--pi-surface); border:1px solid var(--pi-border); border-radius:16px; padding:32px; box-shadow:var(--pi-shadow-sm); }
.pi-agent-head{ display:flex; align-items:center; gap:13px; margin-bottom:16px; }
.pi-agent-av{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:20px; font-weight:600; flex:none; }
.pi-agent-name{ font-size:28px; font-weight:400; color:var(--pi-ink); letter-spacing:-.02em; line-height:1.2; }
.pi-agent-role{ font-size:12.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--pi-purple); margin-top:4px; }
.pi-agent p{ font-size:16px; line-height:1.5; color:var(--pi-ink-2); margin:0; }

/* ============ auto-retainer: after-hours e-signature ============ */
.pi-retainer{ max-width:430px; margin:0 auto; }
/* speed timeline */
.pi-rsign-track{ display:flex; align-items:flex-start; gap:0; margin-bottom:18px; }
.pi-rsign-step{ flex:1; position:relative; text-align:center; padding-top:20px; }
.pi-rsign-step::before{ content:""; position:absolute; top:6px; left:0; right:0; height:2px; background:var(--pi-border); }
.pi-rsign-step:first-child::before{ left:50%; }
.pi-rsign-step:last-child::before{ right:50%; }
.pi-rsign-step .d{ position:absolute; top:1px; left:50%; transform:translateX(-50%); width:11px; height:11px; border-radius:50%; background:var(--pi-surface); border:2px solid var(--pi-border); z-index:1; }
.pi-rsign-step.is-done .d{ background:var(--pi-live); border-color:var(--pi-live); box-shadow:0 0 0 4px rgba(31,157,87,.16); }
.pi-rsign-step .t{ display:block; font-size:13px; font-weight:700; color:var(--pi-ink); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.pi-rsign-step .l{ display:block; font-size:11px; color:var(--pi-ink-2); margin-top:1px; }
.pi-rsign-step.is-done .t{ color:var(--pi-live); }
/* the document */
.pi-rsign-doc{ position:relative; background:var(--pi-surface); border:1px solid var(--pi-border); border-radius:18px; padding:22px 22px 26px; box-shadow:0 24px 50px -22px rgba(9,9,11,.28); }
.pi-rsign-doc-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--pi-border); }
.pi-rsign-brand{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; letter-spacing:.01em; color:var(--pi-blue); }
.pi-rsign-brand svg{ width:16px; height:16px; }
.pi-rsign-night{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--pi-ink-2); background:var(--pi-surface-3); padding:4px 9px; border-radius:999px; }
.pi-rsign-night svg{ width:13px; height:13px; color:var(--pi-purple); }
.pi-rsign-title{ font-size:17px; font-weight:600; line-height:1.3; letter-spacing:-.01em; color:var(--pi-ink); margin-top:16px; }
.pi-rsign-meta{ font-size:12.5px; color:var(--pi-ink-2); margin-top:5px; }
.pi-rsign-lines{ display:flex; flex-direction:column; gap:7px; margin:18px 0 20px; }
.pi-rsign-lines span{ height:7px; border-radius:4px; background:var(--pi-surface-3); }
.pi-rsign-lines span:nth-child(2){ width:92%; } .pi-rsign-lines span:nth-child(3){ width:74%; }
/* signature */
.pi-rsign-sig{ position:relative; padding-top:6px; border-top:1px dashed var(--pi-border); }
.pi-rsign-ink{ display:block; width:74%; max-width:230px; height:52px; margin:2px 0 2px -2px; }
.pi-rsign-ink path{ stroke:var(--pi-ink); stroke-width:2.5; fill:none; stroke-linecap:butt; stroke-linejoin:round; }
html.pi-anim .pi-rsign-ink path{ stroke-dasharray:1; stroke-dashoffset:1; }
.pi-rsign-doc.is-signing .pi-rsign-ink path{ animation:pi-sign 1.3s ease .25s forwards; }
@keyframes pi-sign{ to{ stroke-dashoffset:0; } }
.pi-rsign-sigcap{ display:block; font-size:11px; color:var(--pi-ink-3); letter-spacing:.01em; }
/* signed stamp */
.pi-rsign-stamp{ position:absolute; right:18px; bottom:18px; display:inline-flex; align-items:center; gap:8px; padding:9px 13px; border-radius:11px; background:rgba(31,157,87,.12); border:1px solid rgba(31,157,87,.3); color:var(--pi-live); font-size:13px; font-weight:700; letter-spacing:-.01em; transform:rotate(-4deg); }
.pi-rsign-stamp .ic{ width:22px; height:22px; border-radius:50%; background:var(--pi-live); color:#fff; display:grid; place-items:center; }
.pi-rsign-stamp .ic svg{ width:13px; height:13px; }
html.pi-anim .pi-rsign-stamp{ opacity:0; transform:rotate(-4deg) scale(.7); }
.pi-rsign-doc.is-signing .pi-rsign-stamp{ animation:pi-stamp .45s cubic-bezier(.34,1.56,.64,1) 1.55s forwards; }
@keyframes pi-stamp{ to{ opacity:1; transform:rotate(-4deg) scale(1); } }
/* loop: fade the signature + stamp out gracefully before resetting (less abrupt than reversing) */
.pi-rsign-doc.is-clearing .pi-rsign-ink{ opacity:0; transition:opacity .55s ease; }
.pi-rsign-doc .pi-rsign-sigcap{ opacity:0; transition:opacity .5s ease; }
.pi-rsign-doc.is-signing .pi-rsign-sigcap{ opacity:1; }
.pi-rsign-doc.is-clearing .pi-rsign-sigcap{ opacity:0; }
.pi-rsign-doc.is-clearing .pi-rsign-stamp{ transform:rotate(-4deg) scale(1); animation:pi-stamp-out .55s ease forwards; }
@keyframes pi-stamp-out{ from{ opacity:1; } to{ opacity:0; } }

/* ============ reviews workflow ============ */
.pi-reviews{ display:grid; grid-template-columns:1fr; gap:16px; max-width:560px; margin:0 auto; }
.pi-rv-node{ display:flex; align-items:center; gap:14px; padding:16px 18px; border:1px solid var(--pi-border); border-radius:14px; background:var(--pi-surface); box-shadow:var(--pi-shadow-sm); }
.pi-rv-ico{ width:42px; height:42px; border-radius:11px; display:grid; place-items:center; flex:none; }
.pi-rv-ico svg{ width:21px; height:21px; }
.pi-rv-body{ flex:1; min-width:0; }
.pi-rv-t{ font-size:16px; font-weight:600; color:var(--pi-ink); }
.pi-rv-s{ font-size:14px; color:var(--pi-ink-2); }
.pi-stars{ display:flex; gap:2px; color:#f5a623; }
.pi-stars svg{ width:15px; height:15px; }
.pi-rv-split{ display:flex; justify-content:center; gap:16px; position:relative; padding:14px 0; }
.pi-rv-split::before{ content:""; position:absolute; left:50%; top:50%; width:340px; height:200px; transform:translate(-50%,-50%); background:radial-gradient(ellipse at center, rgba(31,157,87,.18), rgba(31,157,87,0) 70%); filter:blur(6px); pointer-events:none; z-index:0; }
.pi-rv-route{ padding:18px 22px; border-radius:14px; border:1px solid var(--pi-border); position:relative; z-index:1; }
.pi-rv-route.good{ max-width:380px; text-align:center; background:#fff; border-color:rgba(31,157,87,.32); box-shadow:0 0 0 4px rgba(31,157,87,.08), 0 18px 40px -16px rgba(31,157,87,.45); }
.pi-rv-route.good .rt{ justify-content:center; }
.pi-rv-route.good .pi-stars{ color:#f5a623; }
/* eye-catching Google review card */
.pi-rv-ghead{ display:flex; align-items:center; justify-content:center; gap:9px; margin-bottom:14px; }
.pi-rv-glogo{ width:24px; height:24px; flex:none; display:grid; place-items:center; }
.pi-rv-glogo svg{ width:22px; height:22px; }
.pi-rv-gname{ font-size:15px; font-weight:600; color:var(--pi-ink); letter-spacing:-.01em; }
.pi-rv-gverified{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; color:var(--pi-live); background:rgba(31,157,87,.1); padding:3px 9px 3px 7px; border-radius:999px; }
.pi-rv-gverified svg{ width:11px; height:11px; }
.pi-rv-rate{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:10px; }
.pi-rv-score{ font-size:32px; font-weight:700; color:var(--pi-ink); letter-spacing:-.02em; line-height:1; }
.pi-rv-route.good .pi-rv-rate .pi-stars svg{ width:22px; height:22px; }
.pi-rv-route.bad{ background:rgba(225,55,78,.05); border-color:rgba(225,55,78,.18); }
.pi-rv-route .rt{ font-size:14px; font-weight:600; color:var(--pi-ink); display:flex; align-items:center; gap:8px; }
.pi-rv-route .rd{ font-size:13px; color:var(--pi-ink-2); margin-top:5px; }

/* ============ mobile app section ============ */
.pi-mobile-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.pi-phone-shot{ display:flex; justify-content:center; }
.pi-phone-shot img{ width:100%; max-width:340px; height:auto; }

/* mirror heading-style-h4 responsive steps for custom card titles */
@media (max-width:991px){ .pi-feature h3, .pi-agent-name{ font-size:26px; } }
@media (max-width:767px){ .pi-feature h3, .pi-agent-name{ font-size:20px; line-height:1.2; } }

/* step reveal inside demo */
.pi-q{ }
html.pi-anim .pi-q{ opacity:0; transform:translateY(8px); transition:opacity .45s ease, transform .45s ease; }
html.pi-anim .pi-q.is-shown{ opacity:1; transform:none; }
.pi-swap{ display:none; }
.pi-swap.is-shown{ display:flex; }

/* ---------- AI intake demo: chat + live case file ---------- */
.pi-chat{ justify-content:flex-start; gap:9px; overflow:hidden; }
.pi-chat .pi-bubble{ animation:none; }
html.pi-anim .pi-chat .pi-q{ display:none; opacity:0; transform:none; transition:none; }
html.pi-anim .pi-chat .pi-q.is-shown{ display:block; opacity:1; animation:pi-msg-in .42s cubic-bezier(.22,1,.36,1); }
@keyframes pi-msg-in{ from{ opacity:0; transform:translateY(10px) scale(.98); } to{ opacity:1; transform:none; } }
.pi-typing{ align-self:flex-start; display:none; gap:4px; padding:12px 14px; background:var(--pi-surface-3); border-radius:14px; border-bottom-left-radius:5px; }
.pi-typing.is-on{ display:inline-flex; }
.pi-typing span{ width:6px; height:6px; border-radius:50%; background:var(--pi-ink-3); animation:pi-typed 1.1s infinite; }
.pi-typing span:nth-child(2){ animation-delay:.16s; }
.pi-typing span:nth-child(3){ animation-delay:.32s; }
@keyframes pi-typed{ 0%,60%,100%{ transform:translateY(0); opacity:.35; } 30%{ transform:translateY(-4px); opacity:.9; } }

.pi-cf{ display:flex; flex-direction:column; }
.pi-cf-head{ display:flex; align-items:center; gap:11px; padding:2px 2px 13px; border-bottom:1px solid rgba(255,255,255,.08); }
.pi-cf-av{ width:36px; height:36px; border-radius:9px; background:var(--pi-grad); color:#fff; font-size:12px; font-weight:700; letter-spacing:.02em; display:grid; place-items:center; flex:none; }
.pi-cf-title{ font-size:14px; font-weight:600; color:#fff; letter-spacing:-.01em; }
.pi-cf-status{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:rgba(255,255,255,.5); margin-top:2px; }
.pi-cf-status .dot{ width:6px; height:6px; border-radius:50%; background:#fbbf24; animation:pi-pulse 1.6s infinite; }
.pi-cf-status.is-done{ color:#5ce49a; }
.pi-cf-status.is-done .dot{ background:#34d27b; animation:none; }
.pi-cf-rows{ display:flex; flex-direction:column; gap:1px; padding:10px 0; flex:1; }
.pi-cf-row{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:11px; padding:8px 4px; }
html.pi-anim .pi-cf-row{ opacity:0; transform:translateY(7px); }
html.pi-anim .pi-cf-row.is-on{ opacity:1; transform:none; transition:opacity .4s ease, transform .4s ease; }
.pi-cf-ico{ width:32px; height:32px; border-radius:9px; background:rgba(255,255,255,.06); display:grid; place-items:center; color:rgba(255,255,255,.7); flex:none; }
.pi-cf-ico svg{ width:16px; height:16px; }
.pi-cf-main{ display:flex; flex-direction:column; min-width:0; }
.pi-cf-k{ font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:rgba(255,255,255,.4); }
.pi-cf-v{ font-size:13.5px; font-weight:600; color:#fff; letter-spacing:-.01em; }
.pi-cf-chk{ width:21px; height:21px; border-radius:50%; background:rgba(31,157,87,.18); color:#34d27b; display:grid; place-items:center; flex:none; }
html.pi-anim .pi-cf-chk{ opacity:0; transform:scale(.5); }
html.pi-anim .pi-cf-row.is-on .pi-cf-chk{ opacity:1; transform:none; transition:opacity .35s ease .12s, transform .4s cubic-bezier(.34,1.56,.64,1) .12s; }
.pi-cf-chk svg{ width:12px; height:12px; }
.pi-cf-foot{ padding-top:12px; border-top:1px solid rgba(255,255,255,.08); }
.pi-cf-stamp{ display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:13px; background:rgba(31,157,87,.12); border:1px solid rgba(31,157,87,.3); }
html.pi-anim .pi-cf-stamp{ opacity:0; transform:translateY(7px); background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08); }
html.pi-anim .pi-cf-stamp.is-on{ opacity:1; transform:none; background:rgba(31,157,87,.12); border-color:rgba(31,157,87,.3); transition:.5s cubic-bezier(.22,1,.36,1); }
.pi-cf-stamp .ic{ width:28px; height:28px; border-radius:50%; background:var(--pi-live); color:#fff; display:grid; place-items:center; flex:none; }
html.pi-anim .pi-cf-stamp .ic{ background:rgba(255,255,255,.12); color:rgba(255,255,255,.5); transition:.4s ease; }
html.pi-anim .pi-cf-stamp.is-on .ic{ background:var(--pi-live); color:#fff; }
.pi-cf-stamp .ic svg{ width:15px; height:15px; }
.pi-cf-stamp-main{ display:flex; flex-direction:column; }
.pi-cf-stamp-t{ font-size:14px; font-weight:600; color:#fff; letter-spacing:-.01em; }
html.pi-anim .pi-cf-stamp-t{ color:rgba(255,255,255,.55); transition:color .4s ease; }
html.pi-anim .pi-cf-stamp.is-on .pi-cf-stamp-t{ color:#fff; }
.pi-cf-stamp-s{ font-size:11.5px; color:rgba(255,255,255,.5); margin-top:1px; }

/* ============ hero demo — premium iPhone device frames (scoped to .pi-demo only) ============ */
.pi-demo-stage{ gap:22px; align-items:stretch; }
.pi-demo .pi-phone{
  height:510px; min-height:0; padding:11px; border:none; border-radius:46px;
  background:linear-gradient(158deg,#26262b 0%,#141417 46%,#0a0a0c 100%);
  box-shadow:0 24px 64px rgba(0,0,0,.12);
}
.pi-demo .pi-phone::after{
  content:""; position:absolute; inset:0; border-radius:46px; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1px 1px rgba(255,255,255,.13);
}
.pi-demo .pi-screen-inner{
  position:relative; flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
  border-radius:35px; overflow:hidden; background:#fff;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
}
.pi-demo .pi-screen-inner--dark{ background:var(--color-scheme-1--neutral-950); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
/* status bar */
.pi-demo .pi-sb{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px 8px; font-size:14px; font-weight:600; color:var(--pi-ink);
  letter-spacing:-.01em; flex:none;
}
.pi-demo .pi-sb--dark{ color:#fff; }
.pi-demo .pi-sb-time{ font-variant-numeric:tabular-nums; }
.pi-demo .pi-sb-icons{ display:inline-flex; align-items:center; gap:6px; }
.pi-demo .pi-sb-signal{ height:11px; width:auto; }
.pi-demo .pi-sb-wifi{ height:12px; width:auto; }
.pi-demo .pi-sb-batt{ height:12px; width:auto; }
/* chat header (lead) */
.pi-demo .pi-chat-head{
  display:flex; align-items:center; justify-content:flex-start; gap:10px; padding:5px 18px 12px;
  border-bottom:1px solid var(--pi-border); flex:none;
}
.pi-demo .pi-chat-head .pi-host-av{ width:34px; height:34px; font-size:13px; border-radius:11px; }
.pi-demo .pi-chat-head-name{ font-size:14px; font-weight:600; color:var(--pi-ink); letter-spacing:-.01em; }
.pi-demo .pi-chat-head-sub{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--pi-ink-2); margin-top:2px; }
.pi-demo .pi-chat-head-sub .pi-dot{ width:6px; height:6px; border-radius:50%; background:var(--pi-live); box-shadow:0 0 0 3px rgba(31,157,87,.14); }
/* chat thread — fixed bounds, messages reveal inside without reflowing the phone; reset the global .pi-chat card styling so bubbles float on the plain screen */
.pi-demo .pi-chat{ padding:14px 16px 16px; gap:9px; flex:1 1 auto; min-height:0; overflow:hidden; justify-content:flex-start; background:transparent; border:none; border-radius:0; box-shadow:none; max-width:none; margin:0; }
/* iMessage alignment: each bubble is wrapped in .pi-q, so align via the wrapper */
.pi-demo .pi-chat .pi-q{ display:flex; flex-direction:column; align-items:flex-start; }
.pi-demo .pi-chat .pi-q:has(.pi-bubble--me){ align-items:flex-end; }
html.pi-anim .pi-demo .pi-chat .pi-q.is-shown{ display:flex; }
/* case file inside dark screen */
.pi-demo .pi-cf-head{ padding:14px 18px 13px; }
.pi-demo .pi-cf-rows{ padding:9px 14px; }
.pi-demo .pi-cf-foot{ padding:12px 16px 16px; }
/* premium easing on the staged reveals (per spec) — gated so frozen-clock/no-anim states show the base instantly */
html.pi-anim .pi-demo .pi-chat .pi-q.is-shown{ animation:pi-msg-in .5s cubic-bezier(.16,1,.3,1); }
html.pi-anim .pi-demo .pi-cf-row.is-on{ transition:opacity .5s ease, transform .55s cubic-bezier(.16,1,.3,1); }
/* timeline fades in after the first sequence */
html.pi-anim .pi-demo .pi-timeline{ opacity:0; transform:translateY(10px); transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
html.pi-anim .pi-demo.is-live .pi-timeline{ opacity:1; transform:none; }
@media (max-width:767px){
  .pi-demo .pi-phone{ height:534px; border-radius:40px; }
  .pi-demo .pi-phone::after{ border-radius:40px; }
}

/* ============ hero: free-floating stacked lead-card deck + "SIGNED" stamp ============ */
.pi-deck{
  position:relative; min-height:480px; overflow:visible;
  display:flex; align-items:center; justify-content:center;
}
.pi-deck-stage{ position:relative; width:448px; max-width:100%; height:248px; }

.pi-lead-card{
  position:absolute; top:0; left:0; width:100%;
  display:flex; align-items:center; gap:18px; padding:24px 26px;
  background:var(--pi-surface); border:1px solid var(--pi-border); border-radius:26px;
  box-shadow:0 26px 50px -24px rgba(9,9,11,.32), 0 3px 8px -3px rgba(9,9,11,.08);
  transform-origin:center top; will-change:transform, opacity;
}
/* transitions only while the clock is live; frozen-clock previews snap to the static depth state */
html.pi-anim .pi-lead-card{ transition:transform .58s cubic-bezier(.22,1,.36,1), opacity .45s ease, box-shadow .4s ease; }
/* stacked depth: active on top, others peek below, smaller + dimmer */
/* stacked depth: z-index + shadow per layer; the resting transform is set inline by JS
   (depth offset/scale + a touch of per-card jitter) so the stack looks hand-placed */
.pi-lead-card[data-depth="0"]{ z-index:40; }
.pi-lead-card[data-depth="1"]{ z-index:30; box-shadow:0 18px 34px -22px rgba(9,9,11,.26); }
.pi-lead-card[data-depth="2"]{ z-index:20; box-shadow:0 14px 26px -20px rgba(9,9,11,.22); }
.pi-lead-card[data-depth="3"]{ z-index:10; box-shadow:0 12px 22px -20px rgba(9,9,11,.2); }
/* dim the cards behind so the active one reads clearly */
.pi-lead-card[data-depth="1"]::after,
.pi-lead-card[data-depth="2"]::after,
.pi-lead-card[data-depth="3"]::after{
  content:""; position:absolute; inset:0; border-radius:26px; pointer-events:none;
  background:rgba(252,252,253,.0);
}
.pi-lead-card[data-depth="1"]::after{ background:rgba(252,252,253,.32); }
.pi-lead-card[data-depth="2"]::after{ background:rgba(252,252,253,.52); }
.pi-lead-card[data-depth="3"]::after{ background:rgba(252,252,253,.66); }
/* incoming card starts deeper + invisible (only animated while clock is live) */
html.pi-anim .pi-lead-card.is-enter{ transform:translateY(120px) scale(.76); opacity:0; }
/* stamped card is thrown away — JS sets the random fling transform inline */
.pi-lead-card.is-toss{ opacity:0; z-index:50; }
html.pi-anim .pi-lead-card.is-toss{ transition:transform .6s cubic-bezier(.45,.05,.6,.3), opacity .5s ease .08s; }

.pi-lead-av{ position:relative; width:104px; height:104px; flex:none; }
.pi-lead-av .tint{ position:absolute; inset:0; border-radius:50%; background:var(--tint, rgba(9,9,11,.05)); }
.pi-lead-av img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  border-radius:50%; box-shadow:0 0 0 1px rgba(9,9,11,.06), 0 4px 10px -4px rgba(9,9,11,.25);
}

.pi-lead-main{ flex:1 1 auto; min-width:0; }
.pi-lead-name{ font-size:20px; font-weight:600; color:var(--pi-ink); letter-spacing:-.01em; }
.pi-lead-chip{
  display:inline-flex; align-items:center; margin-top:11px; padding:6px 13px;
  font-size:14px; font-weight:500; color:var(--pi-ink-2);
  background:rgba(9,9,11,.05); border:1px solid rgba(0,0,0,.08); border-radius:10px; letter-spacing:-.005em;
}
.pi-lead-card.is-signed{ border-color:rgba(124,58,237,.4); }

/* the stamp — hidden until the card is signed; only the reveal is animated under .pi-anim */
.pi-stamp{
  position:absolute; right:24px; bottom:30px; top:auto; z-index:3; pointer-events:none; opacity:0;
  transform:rotate(-13deg) scale(1);
}
.pi-lead-card.is-signed .pi-stamp{ opacity:1; }
.pi-stamp span{
  display:block; font-family:var(--font-family-display, inherit);
  font-size:19px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; line-height:1;
  color:#7C3AED; padding:5px 12px 4px; border:2.5px solid #7C3AED; border-radius:8px;
  box-shadow:inset 0 0 0 1.5px #fff, inset 0 0 0 3px #7C3AED;
  filter:url(#pi-ink-grunge); mix-blend-mode:multiply;
}
.pi-stamp::after{
  content:""; position:absolute; inset:-7px; border-radius:11px;
  border:2px solid rgba(124,58,237,.5); opacity:0;
}
html.pi-anim .pi-lead-card.is-signed .pi-stamp{ animation:pi-stamp-slam .42s cubic-bezier(.2,1.45,.35,1); }
html.pi-anim .pi-lead-card.is-signed .pi-stamp::after{ animation:pi-stamp-halo .54s ease-out; }
@keyframes pi-stamp-slam{
  0%{ opacity:0; transform:rotate(-13deg) scale(1.95); }
  45%{ opacity:1; }
  68%{ transform:rotate(-13deg) scale(.92); }
  100%{ opacity:1; transform:rotate(-13deg) scale(1); }
}
@keyframes pi-stamp-halo{
  0%{ opacity:0; transform:scale(.72); }
  32%{ opacity:.55; }
  100%{ opacity:0; transform:scale(1.55); }
}
@media (max-width:991px){ .pi-deck{ min-height:420px; } }
/* ---- hero deck in "retainer document" mode: each card is a mini agreement that signs itself ---- */
.pi-lead-card.pi-lead-doc{ display:block; padding:18px 18px 20px; }
/* header: tinted document tile + agreement title + secure e-sign badge */
.pi-rcard-head{ display:flex; align-items:center; gap:12px; }
.pi-rcard-ico{ width:40px; height:40px; border-radius:11px; flex:none; display:grid; place-items:center;
  background:rgba(139,92,246,.12); color:var(--pi-purple); }
.pi-rcard-ico svg{ width:21px; height:21px; }
.pi-rcard-htxt{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
.pi-rcard-kicker{ font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--pi-ink-3); }
.pi-lead-doc .pi-rsign-title{ font-size:17px; font-weight:600; line-height:1.2; letter-spacing:-.01em; color:var(--pi-ink); margin:0; }
.pi-rcard-head .pi-rsign-brand{ flex:none; display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
  color:var(--pi-ink-2); background:var(--pi-surface-3); border:1px solid var(--pi-border); padding:4px 9px; border-radius:999px; letter-spacing:.01em; }
.pi-rcard-head .pi-rsign-brand svg{ width:13px; height:13px; color:var(--pi-blue); }
/* client party row */
.pi-rcard-party{ display:flex; align-items:center; gap:11px; margin-top:15px; padding:11px 12px;
  border-radius:12px; background:var(--pi-surface-2); border:1px solid var(--pi-border); }
.pi-rcard-ava{ width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--tint, rgba(9,9,11,.06)); color:var(--pi-ink); font-size:12.5px; font-weight:700; letter-spacing:.02em;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05); }
.pi-rcard-ptxt{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.pi-rcard-name{ font-size:14px; font-weight:600; color:var(--pi-ink); letter-spacing:-.01em; }
.pi-rcard-firm{ font-size:12px; color:var(--pi-ink-3); }
.pi-rcard-status{ flex:none; display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600;
  color:var(--pi-ink-2); transition:color .3s ease; }
.pi-rcard-dot{ width:7px; height:7px; border-radius:50%; background:var(--pi-ink-3); transition:background .3s ease; }
.pi-rcard-status .s-done{ display:none; }
.pi-lead-doc.is-signed .pi-rcard-status .s-pend{ display:none; }
.pi-lead-doc.is-signed .pi-rcard-status .s-done{ display:inline; }
.pi-lead-doc.is-signed .pi-rcard-status{ color:var(--pi-live); }
.pi-lead-doc.is-signed .pi-rcard-dot{ background:var(--pi-live); box-shadow:0 0 0 3px rgba(31,157,87,.16); }
/* signature panel with a DocuSign-style "Sign here" tab */
.pi-rcard-sign{ position:relative; margin-top:13px; padding:15px 14px 11px; border-radius:12px;
  border:1px dashed var(--pi-border); background:var(--pi-surface); }
.pi-rcard-tab{ position:absolute; top:-9px; left:14px; display:inline-flex; align-items:center;
  font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#fff;
  background:var(--pi-blue); padding:3px 8px; border-radius:5px; box-shadow:0 2px 5px -1px rgba(29,78,216,.5); }
.pi-rcard-tab::after{ content:""; position:absolute; left:11px; bottom:-4px; width:8px; height:8px; background:var(--pi-blue); transform:rotate(45deg); border-radius:1px; }
/* handwritten signature: client's name in a script font (Sacramento), writes on left→right */
@property --sig-sweep{ syntax:'<percentage>'; inherits:false; initial-value:0%; }
.pi-rsign-name{
  position:relative; z-index:1; display:block; line-height:1; color:#15151c; white-space:nowrap;
  margin:0 0 0 -1px; padding:2px 2px 4px 0; overflow:visible;
  transform:rotate(var(--sig-rot, -3deg)); transform-origin:left bottom;
  /* a soft pen-edge mask driven by the registered --sig-sweep property, so it interpolates smoothly
     (plain mask-position keyframes don't). The feather sweeps L→R — ink laid down. Resting=revealed. */
  -webkit-mask-image:linear-gradient(96deg, #000 40%, rgba(0,0,0,0) 58%);
          mask-image:linear-gradient(96deg, #000 40%, rgba(0,0,0,0) 58%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:250% 100%;  mask-size:250% 100%;
  -webkit-mask-position:var(--sig-sweep) 0;  mask-position:var(--sig-sweep) 0;
}
.pi-rcard-xline{ display:block; height:1px; background:rgba(9,9,11,.28); margin:0 0 7px; }
/* while the clock is live, start the name hidden, then "write" it on when signing */
html.pi-anim .pi-lead-doc .pi-rsign-name{ --sig-sweep:100%; }
.pi-lead-doc.is-signing .pi-rsign-name{ animation:pi-write 1.05s cubic-bezier(.66,0,.34,1) .18s forwards; }
@keyframes pi-write{ from{ --sig-sweep:100%; } to{ --sig-sweep:0%; } }
.pi-rsign-sigcap{ display:block; font-size:11px; color:var(--pi-ink-3); letter-spacing:.01em; }
/* polish: as a fresh card enters the back of the stack, its rows breathe in with a soft stagger */
html.pi-anim .pi-lead-doc.is-enter .pi-rcard-head,
html.pi-anim .pi-lead-doc.is-enter .pi-rcard-party,
html.pi-anim .pi-lead-doc.is-enter .pi-rcard-sign{ opacity:0; transform:translateY(6px); }
.pi-lead-doc .pi-rcard-head,
.pi-lead-doc .pi-rcard-party,
.pi-lead-doc .pi-rcard-sign{ transition:opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1); }
.pi-lead-doc .pi-rcard-party{ transition-delay:.06s; }
.pi-lead-doc .pi-rcard-sign{ transition-delay:.12s; }
/* the case-type title gets a brief purple emphasis the moment it's signed */
.pi-lead-doc.is-signed .pi-rsign-title{ color:#7c3aed; transition:color .4s ease; }
@media (prefers-reduced-motion:reduce){
  .pi-lead-card,.pi-lead-card.is-enter,.pi-lead-card.is-toss{ transition:none; }
  .pi-lead-doc .pi-rsign-name{ --sig-sweep:0%; }
}

/* ============ full-viewport-ish sections (focus one section per scroll) ============ */
@media (min-width:768px){
  .pi-hero{ min-height:86vh; }
  /* content-driven height (no forced 72vh) so short sections don't balloon with empty space; even, natural rhythm */
  .pi-vh{ display:flex; flex-direction:column; justify-content:center; }
  /* match the Intaker homepage rhythm: .padding-section-large = 100px desktop */
  .pi-vh > .padding-global > .container-large > .padding-section-large{ padding-top:100px; padding-bottom:100px; }
  /* a few short consecutive sections sit on white with no grey to separate them —
     give them extra breathing room so they don't read as cramped */
  .pi-roomy > .padding-global > .container-large > .padding-section-large{ padding-top:120px; padding-bottom:120px; }
  /* logo + integrations strips size to their content instead of a forced screen */
  .main-wrapper > .section_blog33.video-section,
  .main-wrapper > .section_logo3{ min-height:auto; }
}
/* tablet step mirrors the homepage (.padding-section-large = 72px) */
@media (min-width:768px) and (max-width:991px){
  .pi-vh > .padding-global > .container-large > .padding-section-large{ padding-top:72px; padding-bottom:72px; }
  .pi-roomy > .padding-global > .container-large > .padding-section-large{ padding-top:88px; padding-bottom:88px; }
}

/* ============ agent glyph icons (reused from homepage AI agents) ============ */
.pi-agent-ico{ width:56px; height:56px; flex:none; }
.pi-agent-ico svg{ width:100%; height:100%; display:block; }
.pi-lsa-agent{ width:52px; height:52px; }
.pi-wc-hero{ width:100%; height:auto; display:block; }

/* ============ attorney intro-video mock ============ */
.pi-vid{ max-width:440px; margin:0 auto; width:100%; }
.pi-vid-player{
  position:relative; aspect-ratio:16/10; border-radius:18px; overflow:hidden;
  background:var(--pi-grad); box-shadow:var(--pi-shadow); border:1px solid var(--pi-border);
}
.pi-vid-thumb{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.9; }
.pi-vid-player::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(9,9,11,.05), rgba(9,9,11,.35)); }
.pi-vid-badge{
  position:absolute; top:13px; left:13px; z-index:2; display:inline-flex; align-items:center; gap:7px;
  padding:6px 11px; border-radius:999px; background:rgba(9,9,11,.55); color:#fff;
  font-size:12px; font-weight:600; letter-spacing:.01em; backdrop-filter:blur(2px);
}
.pi-vid-badge .dot{ width:7px; height:7px; border-radius:50%; background:#34d27b; animation:pi-pulse 1.8s infinite; }
.pi-vid-time{
  position:absolute; bottom:13px; right:13px; z-index:2; padding:4px 9px; border-radius:7px;
  background:rgba(9,9,11,.6); color:#fff; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums;
}
.pi-vid-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:66px; height:66px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.95); color:var(--pi-ink); display:grid; place-items:center;
  box-shadow:0 8px 24px -6px rgba(9,9,11,.5); transition:transform .2s ease;
}
.pi-vid-play svg{ width:26px; height:26px; margin-left:3px; }
.pi-vid-play:hover{ transform:translate(-50%,-50%) scale(1.06); }
.pi-vid-bar{ position:absolute; left:0; right:0; bottom:0; z-index:2; height:4px; background:rgba(255,255,255,.25); }
.pi-vid-bar span{ display:block; height:100%; width:32%; background:#fff; }
.pi-vid-meta{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:16px; flex-wrap:wrap; }
.pi-vid-name{ font-size:16px; font-weight:600; color:var(--pi-ink); letter-spacing:-.01em; }
.pi-vid-role{ font-size:13px; color:var(--pi-ink-2); margin-top:2px; }
.pi-vid-langs{ display:flex; flex-wrap:wrap; gap:6px; }
.pi-vid-lang{ font-size:12px; font-weight:500; color:var(--pi-ink-2); padding:5px 10px; border-radius:999px; border:1px solid var(--pi-border); background:var(--pi-surface); }
.pi-vid-lang.is-on{ color:#fff; background:var(--pi-grad); border-color:transparent; }
.pi-vid-live{ display:inline-flex; align-items:center; gap:7px; margin-top:12px; font-size:12.5px; font-weight:500; color:var(--pi-ink-2); }
.pi-vid-live-dot{ width:7px; height:7px; border-radius:50%; background:var(--pi-live); box-shadow:0 0 0 0 rgba(31,157,87,.5); animation:pi-pulse 1.8s infinite; }

/* ---- Dudley DeBosier "Powered by Intaker" website-chat widget ---- */
.pi-chat{ --ddb:#0e4f48; --ddb-gold:#e8a31c; max-width:392px; margin:0 auto; width:100%; background:var(--pi-surface); border:1px solid var(--pi-border); border-radius:18px; overflow:hidden; box-shadow:var(--pi-shadow); }
.pi-chat-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; background:var(--ddb); color:#fff; }
.pi-chat-firm{ display:flex; align-items:center; gap:11px; min-width:0; }
.pi-chat-firm-av{ width:38px; height:38px; border-radius:9px; flex:none; display:grid; place-items:center; background:var(--ddb-gold); color:#0e3a35; font-size:14px; font-weight:800; letter-spacing:.02em; }
.pi-chat-firm-name{ font-size:15px; font-weight:600; letter-spacing:-.01em; }
.pi-chat-firm-sub{ display:flex; align-items:center; gap:6px; font-size:12px; color:rgba(255,255,255,.7); margin-top:1px; }
.pi-chat-online{ width:7px; height:7px; border-radius:50%; background:#34d27b; flex:none; box-shadow:0 0 0 0 rgba(52,210,123,.5); animation:pi-pulse 1.8s infinite; }
.pi-chat-head-ico{ opacity:.7; }
.pi-chat-head-ico svg{ width:20px; height:20px; }
.pi-chat-body{ padding:16px; background:var(--pi-surface-3); display:flex; flex-direction:column; gap:12px; }
.pi-chat-video{ position:relative; display:flex; align-items:center; gap:15px; min-height:124px; padding:16px 16px 22px; border-radius:13px; overflow:hidden; background:radial-gradient(130% 130% at 0% 0%, #2b2b33 0%, #161619 55%, #0e0e10 100%); box-shadow:var(--pi-shadow-sm); }
.pi-chat-video::after{ content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); border-radius:13px; }
/* crisp circular attorney-video bubble — shown near native size so a low-res source stays sharp */
.pi-chat-video-bubble{ position:relative; z-index:1; width:116px; height:116px; flex:none; }
.pi-chat-video-bubble::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid #34d27b; opacity:0; animation:pi-ring 2.4s ease-out infinite; pointer-events:none; }
.pi-chat-video:not(.is-playing) .pi-chat-video-bubble::after{ animation:none; }
@keyframes pi-ring{ 0%{ opacity:.5; transform:scale(.98);} 70%{ opacity:0; transform:scale(1.13);} 100%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){ .pi-chat-video-bubble::after{ animation:none; } }
/* info column */
.pi-chat-video-info{ position:relative; z-index:1; flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; color:#fff; }
.pi-chat-video-badge{ align-self:flex-start; display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border-radius:999px; background:rgba(255,255,255,.12); color:#fff; font-size:11px; font-weight:600; }
.pi-chat-video-badge .dot{ width:6px; height:6px; border-radius:50%; background:#34d27b; animation:pi-pulse 1.8s infinite; }
.pi-chat-video-controls{ display:flex; align-items:center; gap:8px; margin-top:2px; }
.pi-chat-pause{ width:30px; height:30px; flex:none; border-radius:50%; border:none; cursor:pointer; background:rgba(255,255,255,.14); color:#fff; display:grid; place-items:center; transition:background .15s ease; }
.pi-chat-pause:hover{ background:rgba(255,255,255,.26); }
.pi-chat-pause svg{ width:15px; height:15px; }
.pi-chat-sound{ display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px; border:none; cursor:pointer; background:rgba(255,255,255,.14); color:#fff; font:inherit; font-size:11px; font-weight:600; line-height:1; transition:background .15s ease; }
.pi-chat-sound:hover{ background:rgba(255,255,255,.26); }
.pi-chat-sound svg{ width:15px; height:15px; flex:none; }
.pi-chat-sound .pi-ico-sound{ display:none; color:#34d27b; }
.pi-chat-video.is-audio .pi-chat-sound .pi-ico-sound{ display:block; }
.pi-chat-video.is-audio .pi-chat-sound .pi-ico-muted{ display:none; }
.pi-chat-video.is-audio .pi-chat-sound-label{ display:none; }
.pi-chat-video-time{ margin-left:auto; font-size:11px; font-weight:600; color:rgba(255,255,255,.7); font-variant-numeric:tabular-nums; }
.pi-chat-progress{ position:absolute; left:0; right:0; bottom:0; z-index:2; height:4px; background:rgba(255,255,255,.16); }
.pi-chat-progress span{ display:block; height:100%; width:0%; background:#fff; transition:width .2s linear; }
.pi-chat-eq{ display:inline-flex; align-items:flex-end; gap:2px; height:11px; }
.pi-chat-eq i{ width:2.5px; background:#34d27b; border-radius:1px; height:40%; animation:pi-eq .9s ease-in-out infinite; }
.pi-chat-eq i:nth-child(2){ animation-delay:.15s; } .pi-chat-eq i:nth-child(3){ animation-delay:.3s; } .pi-chat-eq i:nth-child(4){ animation-delay:.45s; }
@keyframes pi-eq{ 0%,100%{ height:30%; } 50%{ height:100%; } }
@media (prefers-reduced-motion: reduce){ .pi-chat-eq i{ animation:none; height:70%; } }
.pi-chat-msg{ align-self:flex-start; max-width:90%; background:var(--pi-surface); border:1px solid var(--pi-border); border-radius:14px; border-bottom-left-radius:5px; padding:11px 13px; font-size:14px; line-height:1.45; color:var(--pi-ink); }
.pi-chat-replies{ display:flex; flex-wrap:wrap; gap:7px; }
.pi-chat-reply{ font-size:13px; font-weight:500; color:var(--ddb); padding:8px 12px; border-radius:999px; border:1px solid color-mix(in srgb, var(--ddb) 30%, transparent); background:var(--pi-surface); }
.pi-chat-options{ display:flex; flex-direction:column; gap:8px; }
.pi-chat-option{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; font:inherit; cursor:pointer; padding:11px 13px; border-radius:12px; border:1px solid color-mix(in srgb, var(--ddb) 26%, var(--pi-border)); background:var(--pi-surface); color:var(--pi-ink); font-size:14px; font-weight:500; transition:background .15s ease, border-color .15s ease; }
.pi-chat-option:hover{ background:color-mix(in srgb, var(--ddb) 7%, var(--pi-surface)); border-color:var(--ddb); }
.pi-chat-option-ico{ width:26px; height:26px; flex:none; display:grid; place-items:center; color:var(--ddb); }
.pi-chat-option-ico svg{ width:19px; height:19px; }
.pi-chat-option-arr{ width:16px; height:16px; margin-left:auto; flex:none; color:var(--pi-ink-3); }
.pi-chat-input{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-top:1px solid var(--pi-border); background:var(--pi-surface); }
.pi-chat-input-ph{ flex:1; font-size:13.5px; color:var(--pi-ink-3); }
.pi-chat-send{ width:32px; height:32px; border-radius:8px; flex:none; display:grid; place-items:center; background:var(--ddb); color:#fff; }
.pi-chat-send svg{ width:16px; height:16px; }
.pi-chat-foot{ display:flex; align-items:center; justify-content:center; gap:6px; padding:9px; font-size:11.5px; font-weight:600; letter-spacing:.02em; color:var(--pi-ink-3); background:var(--pi-surface); border-top:1px solid var(--pi-border); }
.pi-chat-foot svg{ width:12px; height:12px; color:var(--pi-purple); }

/* attorney video bubble (firm's real intro video, shown near native res for clarity) */
.pi-chat-video-el{ width:116px; height:116px; border-radius:50%; object-fit:cover; background:#0b0b0d; box-shadow:0 0 0 3px rgba(255,255,255,.14), 0 10px 24px -8px rgba(0,0,0,.7); filter:contrast(1.05) saturate(1.06); }
.pi-chat-caption{ font-size:13px; line-height:1.45; color:rgba(255,255,255,.92); }
.pi-chat-video-fallback{ position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:16px; color:#fff; }
.pi-chat-video.has-video .pi-chat-video-fallback{ display:none; }
.pi-chat-video-fallback svg{ width:34px; height:34px; opacity:.92; }
.pi-chat-video-fallback span{ font-size:13px; font-weight:500; max-width:84%; }
.pi-chat-video:not(.has-video) .pi-chat-video-bubble,
.pi-chat-video:not(.has-video) .pi-chat-video-info,
.pi-chat-video:not(.has-video) .pi-chat-progress{ display:none; }
.pi-chat-pause .pi-ico-play{ display:none; }
.pi-chat-video:not(.is-playing) .pi-chat-pause .pi-ico-play{ display:block; }
.pi-chat-video:not(.is-playing) .pi-chat-pause .pi-ico-pause{ display:none; }
/* user reply + qualified confirmation in the intake flow */
.pi-chat-me{ align-self:flex-end; max-width:86%; background:var(--ddb); color:#fff; border-radius:14px; border-bottom-right-radius:5px; padding:11px 13px; font-size:14px; line-height:1.45; }
.pi-chat-confirm{ display:flex; align-items:flex-start; gap:9px; }
.pi-chat-confirm-ico{ width:22px; height:22px; border-radius:50%; flex:none; display:grid; place-items:center; background:rgba(31,157,87,.15); color:#1f9d57; margin-top:1px; }
.pi-chat-confirm-ico svg{ width:13px; height:13px; }
.pi-chat-option.is-picked{ border-color:var(--ddb); background:color-mix(in srgb, var(--ddb) 9%, var(--pi-surface)); box-shadow:0 0 0 1.5px var(--ddb) inset; }
.pi-chat-option.is-picked .pi-chat-option-arr{ color:var(--ddb); }
.pi-vintake-step{ opacity:0; transform:translateY(8px); }
html:not(.pi-anim) .pi-vintake-step{ opacity:1; transform:none; }
.pi-vintake-step.is-revealed{ opacity:1; transform:none; transition:opacity .45s ease, transform .45s cubic-bezier(.22,1,.36,1); }

/* injury-intake illustration (ease section) — accident types, multilingual, voice note */
.pi-intake-langs{ display:flex; gap:5px; align-items:center; }
.pi-lang{ font-size:10px; font-weight:700; letter-spacing:.02em; padding:2px 7px; border-radius:999px; border:1px solid var(--pi-border); color:var(--pi-ink-3); background:var(--pi-surface); }
.pi-lang.is-on{ border-color:transparent; background:rgba(29,78,216,.1); color:var(--pi-blue); box-shadow:0 0 0 1.4px var(--pi-blue) inset; }
.pi-acc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.pi-acc{ display:flex; align-items:center; gap:8px; padding:9px 11px; border-radius:11px; border:1px solid var(--pi-border); background:var(--pi-surface); font:inherit; font-size:13px; font-weight:500; color:var(--pi-ink); cursor:pointer; text-align:left; transition:background .15s ease, border-color .15s ease; }
.pi-acc svg{ width:18px; height:18px; flex:none; color:var(--pi-ink-2); }
.pi-acc:hover{ border-color:var(--pi-ink-3); }
.pi-acc.is-picked{ border-color:transparent; background:rgba(29,78,216,.08); color:var(--pi-blue); box-shadow:0 0 0 1.5px var(--pi-blue) inset; }
.pi-acc.is-picked svg{ color:var(--pi-blue); }
/* ---- "send audio or video to your attorney" micro-animation: one recorder pill that MORPHS
   between a voice note and a video message (lens reshapes, middle morphs waveform ⇄ scrubber) ---- */
.pi-attach{ width:100%; max-width:210px; display:flex; justify-content:center; }
.pi-attach-card{
  width:100%; display:flex; align-items:center; gap:11px; padding:11px 14px;
  border-radius:14px; background:var(--pi-surface); border:1px solid var(--pi-border);
  box-shadow:0 8px 20px -12px rgba(9,9,11,.3);
}
/* the lens: red mic circle ⇄ blue rounded video lens */
.pi-attach-lens{
  position:relative; width:32px; height:30px; flex:none; display:grid; place-items:center; overflow:hidden;
  border-radius:50%; background:rgba(244,63,94,.12); color:#e11d48;
  transition:border-radius .45s cubic-bezier(.6,0,.2,1), background .45s ease, color .45s ease, width .45s cubic-bezier(.6,0,.2,1);
}
.pi-attach[data-mode="video"] .pi-attach-lens{ width:40px; border-radius:9px; background:linear-gradient(135deg,#2563eb,#1e1b4b); color:#fff; }
.pi-attach-lens svg{ grid-area:1 / 1; align-self:center; justify-self:center; transition:opacity .32s ease, transform .38s cubic-bezier(.34,1.4,.5,1); }
.pi-attach-lens .lens-mic{ width:15px; height:15px; }
.pi-attach-lens .lens-vid{ width:13px; height:13px; margin-left:1px; }
.pi-attach[data-mode="audio"] .lens-vid{ opacity:0; transform:scale(.5) rotate(-12deg); }
.pi-attach[data-mode="video"] .lens-mic{ opacity:0; transform:scale(.5) rotate(12deg); }
.pi-attach-lens .lens-rec{ position:absolute; top:5px; left:5px; width:4px; height:4px; border-radius:50%; background:#fb7185; opacity:0; transition:opacity .3s ease; z-index:2; }
.pi-attach[data-mode="video"] .lens-rec{ opacity:1; animation:pi-attach-rec 1.4s ease-in-out infinite; }
/* the middle: waveform ⇄ video scrubber, crossfading in place */
.pi-attach-mid{ position:relative; flex:1; height:22px; }
.pi-voicewave{ position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; gap:0; transition:opacity .5s cubic-bezier(.65,0,.35,1), transform .5s cubic-bezier(.65,0,.35,1); transform-origin:center center; }
.pi-attach-scrub{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:4px; border-radius:2px; background:rgba(9,9,11,.1); transform-origin:center; transition:opacity .5s cubic-bezier(.65,0,.35,1), transform .5s cubic-bezier(.65,0,.35,1); }
.pi-attach-scrub .fill{ position:absolute; left:0; top:0; height:100%; border-radius:2px; background:var(--pi-blue); width:92%; }
.pi-attach-scrub .head{ position:absolute; top:50%; left:92%; width:9px; height:9px; border-radius:50%; background:var(--pi-blue); transform:translate(-50%,-50%); box-shadow:0 0 0 3px rgba(29,78,216,.18); }
.pi-attach-scrub.off{ opacity:0; transform:translateY(-50%) scaleX(.82); }
.pi-voicewave.off{ opacity:0; transform:scaleY(.1); }
.pi-attach[data-mode="video"] .pi-attach-scrub .fill{ animation:pi-scrub-fill 2.4s linear forwards; }
.pi-attach[data-mode="video"] .pi-attach-scrub .head{ animation:pi-scrub-head 2.4s linear forwards; }
.pi-attach-time{ flex:none; font-size:11px; font-weight:600; color:var(--pi-ink-3); font-variant-numeric:tabular-nums; letter-spacing:.01em; min-width:26px; text-align:right; }
@keyframes pi-attach-rec{ 0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(251,113,133,.55); } 50%{ opacity:.5; box-shadow:0 0 0 4px rgba(251,113,133,0); } }
@keyframes pi-scrub-fill{ 0%{ width:8%; } 100%{ width:92%; } }
@keyframes pi-scrub-head{ 0%{ left:8%; } 100%{ left:92%; } }
/* waveform bars: thin bars spread edge-to-edge; per-bar peak height + duration + delay for a
   natural, varied voice envelope (not a uniform equalizer) */
.pi-voicewave i{ width:2.5px; flex:none; border-radius:2px; background:var(--pi-blue); height:16%; animation:pi-wave var(--dur,1s) ease-in-out infinite; }
@keyframes pi-wave{ 0%,100%{ height:14%; } 50%{ height:var(--peak,80%); } }
.pi-voicewave i:nth-child(1){ --peak:60%; --dur:1.05s; animation-delay:0s; }
.pi-voicewave i:nth-child(2){ --peak:95%; --dur:.9s; animation-delay:.12s; }
.pi-voicewave i:nth-child(3){ --peak:44%; --dur:1.15s; animation-delay:.28s; }
.pi-voicewave i:nth-child(4){ --peak:78%; --dur:.95s; animation-delay:.40s; }
.pi-voicewave i:nth-child(5){ --peak:100%; --dur:.85s; animation-delay:.18s; }
.pi-voicewave i:nth-child(6){ --peak:52%; --dur:1.1s; animation-delay:.33s; }
.pi-voicewave i:nth-child(7){ --peak:33%; --dur:1.2s; animation-delay:.06s; }
.pi-voicewave i:nth-child(8){ --peak:84%; --dur:.92s; animation-delay:.22s; }
.pi-voicewave i:nth-child(9){ --peak:66%; --dur:1s; animation-delay:.36s; }
.pi-voicewave i:nth-child(10){ --peak:92%; --dur:.88s; animation-delay:.10s; }
.pi-voicewave i:nth-child(11){ --peak:40%; --dur:1.18s; animation-delay:.26s; }
.pi-voicewave i:nth-child(12){ --peak:72%; --dur:.98s; animation-delay:.42s; }
.pi-voicewave i:nth-child(13){ --peak:100%; --dur:.86s; animation-delay:.14s; }
.pi-voicewave i:nth-child(14){ --peak:48%; --dur:1.12s; animation-delay:.30s; }
.pi-voicewave i:nth-child(15){ --peak:80%; --dur:.94s; animation-delay:.04s; }
.pi-voicewave i:nth-child(16){ --peak:58%; --dur:1.06s; animation-delay:.20s; }
.pi-voicewave i:nth-child(17){ --peak:96%; --dur:.9s; animation-delay:.38s; }
.pi-voicewave i:nth-child(18){ --peak:36%; --dur:1.16s; animation-delay:.08s; }
.pi-voicewave i:nth-child(19){ --peak:70%; --dur:.96s; animation-delay:.24s; }
.pi-voicewave i:nth-child(20){ --peak:88%; --dur:.9s; animation-delay:.34s; }
.pi-voicewave i:nth-child(21){ --peak:50%; --dur:1.08s; animation-delay:.16s; }
.pi-voicewave i:nth-child(22){ --peak:64%; --dur:1s; animation-delay:.02s; }
@media (prefers-reduced-motion: reduce){
  .pi-voicewave i{ animation:none; height:60%; }
  .pi-attach-lens,.pi-attach-lens svg,.pi-voicewave,.pi-attach-scrub{ transition:none; }
  .pi-attach[data-mode="video"] .pi-attach-scrub .fill{ animation:none; width:60%; }
  .pi-attach[data-mode="video"] .pi-attach-scrub .head{ animation:none; left:60%; }
  .pi-attach[data-mode="video"] .lens-rec{ animation:none; }
}

/* ---- floating "Powered by Intaker" badge (hidden; section uses the site's native CTA layout) ---- */
.cta41_card .pi-cta-badge{ display:none; }
.pi-cta-badge-ico{ width:34px; height:34px; flex:none; border-radius:9px; display:grid; place-items:center; background:var(--pi-grad); color:#fff; }
.pi-cta-badge-ico svg{ width:18px; height:18px; }
.pi-cta-badge-txt{ display:flex; flex-direction:column; line-height:1.2; }
.pi-cta-badge-t{ font-size:14px; font-weight:600; color:var(--pi-ink); letter-spacing:-.01em; }
.pi-cta-badge-s{ font-size:12px; color:var(--pi-ink-2); }
@media (max-width:767px){ .cta41_card .pi-cta-badge{ position:static; margin-top:18px; right:auto; bottom:auto; } }

/* ---- website-chat feature trio (reused from product page) ---- */
.pi-vfeats{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:64px; padding-top:48px; border-top:1px solid var(--pi-border); }
/* in the video-intake split, the trio stacks in the left column beside the tall chat card */
.pi-split--top .pi-vfeats{ grid-template-columns:1fr; gap:30px; margin-top:34px; padding-top:30px; }
/* icon beside the title (not on top), description below */
.pi-split--top .pi-vfeat{ display:grid; grid-template-columns:auto 1fr; column-gap:15px; align-items:center; }
.pi-split--top .pi-vfeat-ico{ grid-row:1 / span 2; align-self:center; margin-bottom:0; }
.pi-split--top .pi-vfeat h3{ grid-column:2; grid-row:1; margin:0 0 3px; }
.pi-split--top .pi-vfeat p{ grid-column:2; grid-row:2; margin:0; }
.pi-vfeat-ico{ width:52px; height:52px; margin-bottom:14px; }
.pi-vfeat-ico .w-embed{ width:100%; height:100%; display:block; }
.pi-vfeat-ico svg{ width:100%; height:100%; display:block; }
/* recolor the trio: tinted tile + brand-colored outline */
.pi-vfeat-ico svg > path:first-child{ fill:var(--vf-tint); }
.pi-vfeat-ico svg [stroke]{ stroke:var(--vf-stroke); }
.pi-vfeats .pi-vfeat:nth-child(1) .pi-vfeat-ico{ --vf-tint:#FCE7EC; --vf-stroke:#e11d48; }
.pi-vfeats .pi-vfeat:nth-child(2) .pi-vfeat-ico{ --vf-tint:#E7F0FF; --vf-stroke:#1d4ed8; }
.pi-vfeats .pi-vfeat:nth-child(3) .pi-vfeat-ico{ --vf-tint:#EFE9FD; --vf-stroke:#7c3aed; }
.pi-vfeat h3{ font-size:19px; font-weight:600; line-height:1.3; letter-spacing:-.02em; color:var(--pi-ink); margin:0 0 6px; }
.pi-vfeat p{ font-size:15px; line-height:1.5; color:var(--pi-ink-2); margin:0; }
@media (max-width:767px){ .pi-vfeats{ grid-template-columns:1fr; gap:24px; margin-top:44px; padding-top:36px; } }
.pi-hero-copy .breadcrumbs_holder{ width:fit-content; }

/* ============ Google LSA animated listings ============ */
.pi-lsa-frame{ padding:0; }
.pi-lsa{ display:flex; flex-direction:column; gap:11px; }
.pi-lsa-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 2px 2px; }
.pi-lsa-badge{ font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--pi-ink-3); }
.pi-lsa-brand{ display:flex; align-items:center; gap:7px; }
.pi-lsa-gico{ width:17px; height:17px; display:block; flex:none; }
.pi-lsa-glabel{ font-size:13px; font-weight:600; letter-spacing:-.01em; color:var(--pi-ink-2,var(--pi-ink)); }
.pi-lsa-screened{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; letter-spacing:.01em; color:#1A73E8; background:rgba(26,115,232,.08); border:1px solid rgba(26,115,232,.18); padding:3px 9px 3px 6px; border-radius:999px; white-space:nowrap; }
.pi-lsa-screened svg{ width:14px; height:14px; flex:none; }
.pi-lsa-list{ display:flex; flex-direction:column; gap:9px; }
.pi-lsa-row{ display:flex; align-items:center; gap:13px; padding:13px 14px; border:1px solid var(--pi-border); border-radius:13px; background:var(--pi-surface); box-shadow:var(--pi-shadow-sm); will-change:transform; }
.pi-lsa-row.is-you{ position:relative; z-index:3; border-color:transparent; box-shadow:0 0 0 1.5px var(--pi-blue) inset, var(--pi-shadow); background-color:var(--pi-surface); background-image:linear-gradient(rgba(29,78,216,.05), rgba(29,78,216,.05)); }
.pi-lsa-dim{ opacity:.5; }
.pi-lsa-av{ width:42px; height:42px; border-radius:11px; overflow:hidden; flex:none; }
.pi-lsa-av--brand{ display:grid; place-items:center; background:var(--pi-grad); box-shadow:0 4px 10px -4px rgba(79,70,229,.5); }
.pi-lsa-av--brand svg{ width:23px; height:23px; }
.pi-lsa-rating{ display:flex; align-items:center; gap:6px; margin-top:3px; }
.pi-lsa-stars{ display:inline-flex; gap:1px; color:#f5a623; }
.pi-lsa-stars svg{ width:12px; height:12px; display:block; }
.pi-lsa-rev{ font-size:11.5px; font-weight:500; color:var(--pi-ink-3); letter-spacing:-.01em; }
.pi-lsa-face{ width:100%; height:100%; display:block; }
.pi-lsa-info{ flex:1; min-width:0; }
.pi-lsa-name{ font-size:15px; font-weight:600; color:var(--pi-ink); letter-spacing:-.01em; display:flex; align-items:center; gap:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pi-lsa-you{ flex:none; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--pi-grad); padding:2px 7px; border-radius:999px; }
.pi-lsa-resp{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:500; margin-top:3px; color:var(--pi-ink-3); transition:color .35s ease; }
.pi-lsa-resp .pi-lsa-d{ width:7px; height:7px; border-radius:50%; flex:none; background:var(--color-scheme-1--neutral-300); }
.pi-lsa-resp.is-fast{ color:var(--pi-live); } .pi-lsa-resp.is-fast .pi-lsa-d{ background:var(--pi-live); }
.pi-lsa-actions{ display:flex; gap:8px; flex:none; }
.pi-lsa-act{ width:30px; height:30px; border-radius:50%; border:1px solid var(--pi-border); display:grid; place-items:center; color:var(--pi-blue); }
.pi-lsa-act svg{ width:15px; height:15px; }
@media (max-width:600px){ .pi-lsa-actions{ display:none; } }

/* wireframe (skeleton) rows — every firm except "your firm" */
.pi-lsa-row.pi-lsa-wire{ opacity:1; }
.pi-lsa-wbar{ background:#e5e9f0; border-radius:6px; height:10px; }
.pi-lsa-wbar.is-name{ width:62%; max-width:160px; }
.pi-lsa-wbar.is-sub{ width:40%; max-width:104px; height:8px; margin-top:9px; }
.pi-lsa-wact{ width:30px; height:30px; border-radius:50%; background:#eef1f5; }

/* ============ confetti (fires when your firm climbs to #1) ============ */
.pi-confetti{ position:fixed; inset:0; pointer-events:none; z-index:9998; overflow:hidden; }
.pi-confetti i{ position:absolute; top:-12vh; width:9px; height:14px; border-radius:2px; opacity:.92; }
@keyframes pi-fall{ from{ transform:translateY(0) rotate(0deg); } to{ transform:translateY(132vh) rotate(560deg); } }

/* ============ big statement: GSAP pinned word-wave (rise + de-blur + ink fill) ============ */
.pi-fill-section{ position:relative; background:var(--color-scheme-1--neutral-100); }
.pi-fill-section .pi-grad-text{
  background-image:none;
  -webkit-text-fill-color:inherit;
  color:inherit;
}
.pi-fill-sticky{ display:flex; align-items:center; justify-content:center; min-height:100vh; }
/* SplitText word boxes; per-word transforms/blur are driven by GSAP */
.pi-st-word{ display:inline-block; will-change:transform, filter, opacity; }
/* keep the purple gradient on the accent words ("30 seconds") through the ink fill —
   text-fill-color:transparent here always wins over GSAP's inline color, so the
   gradient renders while the word still rises + de-blurs with the rest. */
.pi-fill-section .pi-st-word.is-grad{
  background-image:var(--pi-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  will-change:transform;
}
@media (max-width:767px){
  .pi-fill-sticky{ padding:48px 0; }
}

/* ============ responsive ============ */
@media (max-width: 991px){
  .pi-hero-grid{ grid-template-columns:1fr; gap:40px; }
  /* allow the single-column grid track to shrink to the viewport: without this, the 448px deck
     gives the track a 448px min-content width, which forced the heading + paragraph off-screen */
  .pi-hero-grid > *{ min-width:0; }
  .pi-deck, .pi-deck-stage{ max-width:100%; }
  .pi-hero-copy{ max-width:none; }
  .pi-split, .pi-mobile-grid{ grid-template-columns:1fr; gap:36px; }
  .pi-split.rev .pi-split-media{ order:0; }
  .pi-3col > .pi-feature{ flex-basis:100%; }
  .pi-agents{ grid-template-columns:1fr; }
  .pi-rules{ grid-template-columns:1fr; }
  .pi-rules-list{ border-right:none; border-bottom:1px solid var(--pi-border); flex-direction:row; overflow-x:auto; }
  .pi-rule-tab{ min-width:230px; }
  .pi-copy-center-mobile{ text-align:center; max-width:600px; margin-left:auto; margin-right:auto; }
  .pi-copy-center-mobile .pi-agent-ico{ margin-left:auto; margin-right:auto; }
  .pi-copy-center-mobile > p{ max-width:610px; margin-left:auto; margin-right:auto; }
  .pi-hero-copy{ text-align:center; }
  .pi-hero-copy .breadcrumbs_holder{ margin-left:auto; margin-right:auto; }
  .pi-hero-copy .max-width-xsmall{ margin-left:auto; margin-right:auto; }
  .pi-hero-copy p{ margin-left:auto; margin-right:auto; }
  .pi-hero-cta-row{ justify-content:center; }
}
@media (max-width: 600px){
  .pi-demo-stage{ grid-template-columns:1fr; }
  .pi-compare{ grid-template-columns:1fr; }
  .pi-compare-mid{ width:auto; height:1px; }
  .pi-compare-vs{ } 
  .pi-rv-split{ grid-template-columns:1fr; }
  .pi-flow{ flex-direction:column; }
  .pi-flow-pipe{ width:160px; height:70px; transform:rotate(90deg); }
  .pi-webinar{ flex-wrap:wrap; }
  .pi-webinar-link{ margin-left:0; width:100%; justify-content:center; }
  /* hero: fluid headline so it never runs off a phone screen, and a slightly smaller deck so the
     animation fits comfortably. Desktop (≥601) is untouched. */
  .pi-hero-copy .heading-style-h1{ font-size:clamp(28px, 8.2vw, 46px); }
  /* center the hero copy + CTA, and pull the deck up close to the button (less dead space) */
  .pi-hero-grid{ gap:8px; }
  .pi-hero-copy{ text-align:center; }
  .pi-hero-copy .breadcrumbs_holder{ margin-left:auto; margin-right:auto; }
  .pi-hero-copy .max-width-xsmall{ margin-left:auto; margin-right:auto; }
  .pi-hero-copy p{ margin-left:auto; margin-right:auto; }
  .pi-hero-cta-row{ justify-content:center; }
  .pi-deck{ min-height:248px; }
  .pi-deck-stage{ transform:scale(.86); transform-origin:top center; }
}

/* mobile-app CTA: the section uses the site's native Webflow mobile-portrait layout (cta-2-mobile,
   cta-background-new, show/hide-mobile-portrait) — no custom overrides, so it behaves like the live site. */
/* tablet/intermediate (≤991): the native side-by-side leaves the text stranded in a narrow left
   column. Stack it instead — center the text/button, hide the side-by-side desktop phones, and drop
   the single phone mockup below, centered (same treatment the site uses on phones). */
@media (max-width:991px){
  .section_cta41 .cta41_card.text-color-white.cta-card{ height:auto; min-height:0; justify-content:flex-start; align-items:center; text-align:center; padding:2.5rem 2rem 0; overflow:hidden; }
  .section_cta41 .cta41_card-content{ width:100%; align-items:center; text-align:center; margin-bottom:28px; }
  .section_cta41 .cta41_card-content .max-width-large._419{ margin-left:auto; margin-right:auto; }
  .section_cta41 .cta-logo-icon{ margin-left:auto !important; margin-right:auto; margin-top:0 !important; }
  .section_cta41 .cta41_card-content h2,
  .section_cta41 .cta41_card-content p { margin-left:auto !important; margin-right:auto; }
  .section_cta41 .cta41_card-content .button-group{ justify-content:center; }
  /* hide only the side-by-side desktop phones; keep the card background vector intact */
  .section_cta41 .cta-phone-abosolute_image,
  .section_cta41 .cta-phone-absolute2_image.hide-mobile-portrait{ display:none !important; }
  /* the stacked phone sits in normal flow, centered below the text; padding-bottom:0 lets it bleed to the card edge */
  .section_cta41 .show-mobile-portrait.div-flex-center{ display:flex !important; position:static !important; justify-content:center; width:100%; }
  .section_cta41 .cta-phone-absolute2_image.show-mobile-portrait.cta-2-mobile{ display:block !important; position:static !important; width:260px; height:auto; }
}

/* ============ responsive: overflow guards + small-phone refinements ============ */
/* Video testimonial reel speed: Webflow's IX2 interaction marquees the holder by writing an
   inline transform each frame (~21px/s — slow). A CSS animation on the same element overrides
   that inline transform (animations outrank non-!important inline styles in the cascade), so we
   take over and run it a bit faster (~35px/s, one identical set every 30s). 3 identical card sets
   make translateX(0 → -33.333%) loop seamlessly. Pauses on hover so a card stays readable. */
/* Testimonial reel — scrolls like the logo strip: a calm, continuous left marquee. Webflow's IX2
   writes an inline transform on the holder each frame; an active CSS animation on the same element
   outranks that inline value, so we drive our own loop. The strip is the 4 unique cards + 4 JS
   clones (8 total) — the clones are what make the loop gapless (same idea as the logo strip's
   repeated lists). translateX(0 → -50%) advances exactly one set; each card carries its gap as
   margin-right so -50% lands on a card boundary (no drift). Pauses on hover. Mobile keeps the
   4-card snap-scroll (clones hidden < 992). */
.blog33_item.is-reel-clone{ display:none; }
/* Card matches the 9:16 thumbnail ratio (was a fixed 420px box that cropped the lower-third
   name/title off the bottom). aspect-ratio + height:auto means object-fit:cover shows the whole
   thumbnail with no crop. */
.videos-section_grid .blog33_item-link.fourth-section-column-wrapper{ height:auto; aspect-ratio:9 / 16; }
/* Hover-pop: the hovered card lifts a bit out of the row to show it's selected. */
.videos-section_grid > .blog33_item.fourth-section-column{
  transition:transform .45s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.videos-section_grid > .blog33_item.fourth-section-column .fourth-section-column-wrapper{ transition:box-shadow .45s ease; }
.videos-section_grid > .blog33_item.fourth-section-column:hover{ transform:translateY(-14px) scale(1.035); z-index:5; }
.videos-section_grid > .blog33_item.fourth-section-column:hover .fourth-section-column-wrapper{ box-shadow:0 26px 44px -18px rgba(0,0,0,.4); }
.blog33_list.fourth-section-grid.videos-section_grid{
  grid-template-columns:repeat(10, minmax(0, 1fr));
  grid-column-gap:24px; column-gap:24px;
  width:100%;
  /* this section has no padding-global/container-large wrapper, so cap + center the row here */
  max-width:1196px;
  margin-inline:auto;
  padding-inline:24px;
  box-sizing:border-box;
}
@media (min-width:992px){
  /* clip horizontally but let the hovered card pop UP without being cut off (so overflow-y visible);
     vertical padding gives the pop + its shadow room. The JS marquee (initReel) drives the scroll
     so it can ease to a smooth stop on hover instead of snapping. */
  .blog33_list-wrapper{ justify-content:flex-start; overflow-x:clip; overflow-y:visible; padding-block:22px; }
  .section_blog33.video-section{ overflow-x:clip; overflow-y:visible; }
  .video-section-animation_holder{ column-gap:0; justify-content:flex-start; width:max-content; }
  /* grid → a single flex strip; each card carries its gap as margin so the -50% loop is exact */
  .blog33_list.fourth-section-grid.videos-section_grid{
    display:flex; width:max-content; max-width:none; margin:0; padding:0;
    grid-column-gap:0; column-gap:0;
  }
  .blog33_list.fourth-section-grid.videos-section_grid > .blog33_item.fourth-section-column{ flex:0 0 240px; margin-right:40px; }
  .blog33_item.is-reel-clone{ display:block; }
}
/* Mobile (≤991): run the same continuous marquee as desktop — clips horizontally, shows clones
   for a gapless loop, and a CSS animation drives the scroll so it matches desktop speed. */
@media (max-width:991px){
  /* overflow-y:clip lets the hover-pop escape; overflow:hidden clips the marquee horizontally */
  .blog33_list-wrapper{
    overflow:hidden; overflow-y:clip;
    padding-top:20px; padding-bottom:56px;
    margin-top:-20px; margin-bottom:-56px;
  }
  .video-section-animation_holder{ width:max-content; justify-content:flex-start; }
  /* flex strip identical to desktop so the -50% translate hits a card boundary */
  .blog33_list.fourth-section-grid.videos-section_grid{
    display:flex; width:max-content; max-width:none;
    margin:0; padding:0;
    grid-column-gap:0; column-gap:0;
  }
  .blog33_list.fourth-section-grid.videos-section_grid > .blog33_item.fourth-section-column{
    flex:0 0 240px; margin-right:20px; scroll-snap-align:none;
  }
  /* clones visible so the gapless loop works on mobile too */
  .blog33_item.is-reel-clone{ display:block; }
}
@media (max-width:991px) and (prefers-reduced-motion: no-preference){
  .video-section-animation_holder{ animation: pi-reel-mobile 60s linear infinite; }
}
@keyframes pi-reel-mobile { to { transform: translateX(-50%); } }
/* Decorative review glow: identical 340px on desktop (min() picks 340px once the viewport is
   wide enough), shrinks on small phones so the absolutely-positioned glow can't overflow. */
.pi-rv-split::before{ width:min(340px, 88vw); }

/* Small phones (≤480): keep the desktop design, just make sure nothing is cramped or off-screen. */
@media (max-width:480px){
  /* every media block stays within its container */
  .pi-vid, .pi-chat, .pi-deck-stage, .pi-retainer, .pi-reviews,
  .pi-attach, .pi-pages, .pi-webinar{ max-width:100%; }
  /* comfortable 44px touch targets for the custom CTAs/links */
  .pi-webinar-link{ min-height:44px; }
  .pi-inline-link{ display:inline; }
  /* tiny phones: shrink the hero deck a touch more so it never crowds the edges */
  .pi-deck{ min-height:224px; }
  .pi-deck-stage{ transform:scale(.78); transform-origin:center; }
}

/* Drive-hosted testimonial lightbox: the Vidzflow cards play inline via their own JS; this one
   embeds the public Google Drive video through its /preview iframe in a centered 9:16 modal. */
.pi-vfm{ position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.62); padding:24px; }
.pi-vfm.is-open{ display:flex; }
.pi-vfm-frame{ position:relative; height:min(86vh, 760px); aspect-ratio:9 / 16; width:auto; max-width:94vw; background:#000; border-radius:16px; box-shadow:0 24px 60px -12px rgba(0,0,0,.55); }
.pi-vfm-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:16px; }
.pi-vfm-close{ position:absolute; top:-14px; right:-14px; width:36px; height:36px; border-radius:50%; border:0; background:#fff; color:#111; font-size:22px; line-height:1; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.3); display:grid; place-items:center; }
@media (max-width:560px){ .pi-vfm-close{ top:8px; right:8px; } }

/* nav: indented sub-category links are styled in intakerweb2.webflow.css (single source) */

/* ============ website-chat hero image (video-intro section) ============ */
.pi-webchat-hero{ display:block; width:100%; max-width:620px; height:auto; aspect-ratio:3402 / 3043; margin:0 auto; }

/* =========================================================
   TWEAKABLE FEEL CONTROLS  (panel in personal-injury.html)
   Three expressive axes — each orchestrates many properties:
   · Brand mood    → recolors the accent identity (inline vars, set by JS)
   · Density       → spatial rhythm: section padding + major gaps
   · Surface       → material character: corner-radius scale + shadow depth
   Defaults below equal the current look, so nothing shifts until tweaked.
   ========================================================= */
:root{ --pi-surf-scale:1; }
:root[data-pi-surface="crisp"]{ --pi-surf-scale:.34; }
:root[data-pi-surface="pillow"]{ --pi-surf-scale:1.7; }

/* card / framed surfaces — preserve each element's own radius via the scale */
.pi-card,
.pi-feature,
.pi-agent{ border-radius:calc(16px * var(--pi-surf-scale)); }
.pi-rsign-doc,
.pi-rules{ border-radius:calc(18px * var(--pi-surf-scale)); }
.pi-ease-box,
.pi-rv-node,
.pi-rv-route,
.pi-src,
.pi-then,
.pi-webinar{ border-radius:calc(14px * var(--pi-surf-scale)); }
/* icon tiles */
.pi-feature-ico,
.pi-rule-tab,
.pi-guided-opt,
.pi-numfield{ border-radius:calc(12px * var(--pi-surf-scale)); }
.pi-callbtn{ border-radius:calc(13px * var(--pi-surf-scale)); }
.pi-rv-ico{ border-radius:calc(11px * var(--pi-surf-scale)); }
.pi-ease-box-ico,
.pi-flogo,
.pi-src-ico,
.pi-then-ico{ border-radius:calc(10px * var(--pi-surf-scale)); }
.pi-chip{ border-radius:calc(9px * var(--pi-surf-scale)); }
/* shadow depth follows the material */
:root[data-pi-surface="crisp"] .pi-card,
:root[data-pi-surface="crisp"] .pi-feature,
:root[data-pi-surface="crisp"] .pi-agent,
:root[data-pi-surface="crisp"] .pi-ease-box{ box-shadow:0 1px 2px rgba(9,9,11,.09), 0 0 0 1px rgba(9,9,11,.03); }
:root[data-pi-surface="pillow"] .pi-card,
:root[data-pi-surface="pillow"] .pi-feature,
:root[data-pi-surface="pillow"] .pi-agent,
:root[data-pi-surface="pillow"] .pi-ease-box{ box-shadow:0 26px 54px -22px rgba(9,9,11,.28), 0 1px 0 rgba(255,255,255,.7) inset; }

/* density: spatial rhythm (desktop, mirrors the .padding-section-large system) */
@media (min-width:768px){
  :root[data-pi-density="compact"] .pi-vh > .padding-global > .container-large > .padding-section-large{ padding-top:54px; padding-bottom:54px; }
  :root[data-pi-density="airy"]    .pi-vh > .padding-global > .container-large > .padding-section-large{ padding-top:156px; padding-bottom:156px; }
  :root[data-pi-density="compact"] .pi-split{ gap:38px; }
  :root[data-pi-density="airy"]    .pi-split{ gap:92px; }
  :root[data-pi-density="compact"] .pi-hero-grid{ gap:40px; }
  :root[data-pi-density="airy"]    .pi-hero-grid{ gap:84px; }
  :root[data-pi-density="compact"] .pi-3col{ gap:16px; }
  :root[data-pi-density="airy"]    .pi-3col{ gap:32px; }
}

/* ============ mobile-only fixes ============ */
@media (max-width:767px){
  /* Body text: webflow reduces text-size-regular to 14px at ≤767px; bring it back to 16px
     to match the card text and other body-weight copy the user considers standard. */
  .text-size-regular{ font-size:16px; }

  /* "A video intro that stops the search" section: the large heading wraps close to
     the screen edges at mobile widths. Extra inner padding gives it breathing room. */
  .pi-split:has(.pi-webchat-hero) .pi-split-copy{ padding-inline:0.75rem; }

}