/* ===== Auto-loan PDF + car (shared hero demo asset) ===== */
.al-car{display:block}

/* PDF viewer */
.al-pdf{position:absolute; inset:0; z-index:40; background:#3a3f4a; display:flex; flex-direction:column; animation:alpdfin .45s cubic-bezier(.2,.7,.2,1)}
@keyframes alpdfin{from{opacity:0; transform:translateY(14px) scale(.98)}to{opacity:1; transform:none}}
.al-pdf.embedded{position:absolute; inset:0; border-radius:inherit}
.al-pdf-bar{display:flex; align-items:center; justify-content:space-between; padding:11px 14px; background:#2b2f38; color:rgba(255,255,255,.9); flex-shrink:0}
.al-pdf-doc{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11.5px; letter-spacing:.01em}
.al-pdf-x{width:28px;height:28px;border-radius:50%; border:0; background:rgba(255,255,255,.14); color:#fff; cursor:pointer; display:grid; place-items:center}
.al-pdf-x:hover{background:rgba(255,255,255,.26)}
.al-pdf-sheet{flex:1; overflow-y:auto; margin:12px; padding:20px 18px 22px; background:#fff; border-radius:10px; box-shadow:0 10px 40px rgba(0,0,0,.35)}
.al-pdf-sheet::-webkit-scrollbar{width:0}

.al-pdf-head{display:flex; align-items:flex-start; justify-content:space-between}
.al-pdf-brand{display:flex; align-items:center; gap:10px}
.al-pdf-logo{width:34px;height:34px;border-radius:9px; display:grid; place-items:center; color:#fff; font-weight:800; font-size:17px; background:linear-gradient(150deg,#3a4ea8,#2c3c84); flex-shrink:0}
.al-pdf-brand b{display:block; font-size:14px; font-weight:700; color:#151b29; letter-spacing:-.01em}
.al-pdf-brand span{display:block; font-size:11px; color:#828ca0; margin-top:1px}
.al-pdf-date{font-family:var(--mono); font-size:10.5px; color:#a6aebe}

.al-pdf-hero{display:flex; justify-content:center; padding:14px 0 6px}
.al-photo{display:block; width:100%; max-width:280px; height:auto; object-fit:contain; filter:drop-shadow(0 14px 18px rgba(20,27,41,.18))}
.al-pdf-title{font-size:17px; font-weight:700; letter-spacing:-.02em; color:#151b29; text-align:center; text-wrap:balance}
.al-pdf-rate{text-align:center; margin:8px 0 16px; color:#3a4ea8; display:flex; align-items:baseline; justify-content:center; gap:4px}
.al-pdf-rate .big{font-size:34px; font-weight:800; letter-spacing:-.03em; line-height:1}
.al-pdf-rate .u{font-size:14px; font-weight:600}

.al-pdf-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:#e6e9f0; border:1px solid #e6e9f0; border-radius:12px; overflow:hidden}
.al-cell{background:#fafbfd; padding:11px 13px}
.al-cell .k{display:block; font-size:10.5px; color:#828ca0; font-weight:500}
.al-cell .v{display:block; font-size:14.5px; font-weight:700; color:#151b29; margin-top:3px; font-variant-numeric:tabular-nums}

.al-pdf-pay{display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding:14px 16px; border-radius:13px; background:linear-gradient(150deg,#eef0f8,#e4e8f5); border:1px solid #c7cee8}
.al-pdf-pay .lab{font-size:12.5px; font-weight:600; color:#33458f}
.al-pdf-pay .num{font-size:20px; font-weight:800; color:#2c3c84; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.al-pdf-pay .num .mo{font-size:12px; font-weight:600; color:#5a6fd0}

.al-pdf-rows{margin-top:12px}
.al-r{display:flex; align-items:center; justify-content:space-between; padding:9px 2px; border-bottom:1px solid #eef1f6; font-size:13px; color:#4b5468}
.al-r:last-child{border-bottom:0}
.al-r b{color:#151b29; font-weight:700; font-variant-numeric:tabular-nums}
.al-pdf-foot{display:flex; align-items:center; gap:7px; margin-top:14px; font-size:11px; color:#a6aebe; line-height:1.4}

/* ===== calc beat (during the call) ===== */
.cap-calc{align-self:flex-start; display:inline-flex; align-items:center; gap:8px; padding:10px 14px; background:rgba(255,255,255,.14); border-radius:15px; border-bottom-left-radius:5px; color:#fff; font-size:13px; font-weight:500; backdrop-filter:blur(6px); animation:capin .4s}
.cap-calc .dots{display:inline-flex; gap:3px}
.cap-calc .dots i{width:5px;height:5px;border-radius:50%; background:rgba(255,255,255,.8); animation:typ 1.2s infinite}
.cap-calc .dots i:nth-child(2){animation-delay:.18s} .cap-calc .dots i:nth-child(3){animation-delay:.36s}

/* ===== Light iMessage SMS screen ===== */
.ios-status.on-light{color:#0b0e16}
.ios-msg.light{position:absolute; inset:0; background:#fff; z-index:30; display:flex; flex-direction:column; animation:msgin .45s cubic-bezier(.2,.7,.2,1)}
.ios-msg.light .ios-status{padding-top:13px}
.imsg-foot, .ios-msg.light .ios-msg-top{flex-shrink:0}
.ios-msg.light .ios-msg-top{display:flex; align-items:center; gap:10px; padding:6px 14px 12px; border-bottom:1px solid #e2e5ec; background:#f5f6f8}
.imsg-back{position:relative; border:0; background:none; color:#0a84ff; cursor:pointer; padding:0 4px; display:flex; align-items:center}
.imsg-badge{position:absolute; left:14px; top:-2px; min-width:17px; height:17px; padding:0 4px; border-radius:100px; background:#0a84ff; color:#fff; font-size:11px; font-weight:700; display:grid; place-items:center}
.imsg-peer{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; margin-right:24px}
.imsg-av{width:38px;height:38px;border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:700; font-size:15px; background:linear-gradient(150deg,#9aa2b4,#6b7488)}
.imsg-nm{display:flex; align-items:center; gap:3px; font-size:12px; font-weight:600; color:#0b0e16}
.imsg-nm svg{color:#a6aebe}

.ios-msg-body.imsg{flex:1; padding:16px 16px 10px; display:flex; flex-direction:column; gap:7px; overflow-y:auto; background:#fff}
.imsg-time{text-align:center; font-size:11px; color:#9aa0ac; margin-bottom:6px}
.imsg-time b{font-weight:700; color:#6b7280}
.imsg-b{max-width:84%; align-self:flex-start; background:#e9e9eb; color:#0b0e16; padding:10px 14px; border-radius:18px; border-bottom-left-radius:5px; font-size:14px; line-height:1.4; animation:capin .4s}
.imsg-link{align-self:flex-start; width:74%; text-align:left; border:0; padding:0; cursor:pointer; border-radius:16px; overflow:hidden; background:#e9e9eb; box-shadow:0 1px 2px rgba(0,0,0,.06); animation:capin .45s; transition:.15s}
.imsg-link:hover{filter:brightness(.97)}
.imsg-link-top{display:flex; align-items:center; gap:11px; padding:16px 15px; color:#0a84ff; font-size:13px; font-weight:600; line-height:1.35}
.imsg-link-top svg{flex-shrink:0; opacity:.9}
.imsg-link-foot{display:flex; align-items:center; justify-content:space-between; padding:9px 14px; background:#dededf; color:#6b7280; font-size:12px}
.imsg-link-foot svg{color:#9aa0ac}
.imsg-delivered{align-self:flex-end; font-size:10.5px; color:#9aa0ac; margin-top:2px; font-weight:500}

.ios-msg-foot.imsg-foot{display:flex; align-items:center; gap:10px; padding:9px 14px 16px; border-top:1px solid #e2e5ec; background:#f5f6f8}
.imsg-cam{width:30px;height:30px;border-radius:50%; background:#e2e5ec; color:#6b7280; display:grid; place-items:center; flex-shrink:0}
.imsg-field{flex:1; height:32px; border:1px solid #d2d5dd; border-radius:100px; display:flex; align-items:center; padding:0 13px; font-size:13px; color:#9aa0ac}
.imsg-recall{flex-shrink:0; display:inline-flex; align-items:center; gap:6px; padding:8px 13px; border-radius:100px; border:0; background:#34c759; color:#fff; font-size:12.5px; font-weight:700; cursor:pointer}
.imsg-recall:hover{background:#28a847}

/* widget: calc + typing + positioning for inline PDF */
.widget{position:relative}
.w-calc{align-self:flex-start; display:inline-flex; align-items:center; gap:8px; padding:9px 13px; background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:14px; border-bottom-left-radius:5px; color:var(--accent-700); font-size:12.5px; font-weight:600; animation:capin .35s}
.w-calc .dots{display:inline-flex; gap:3px}
.w-calc .dots i{width:5px;height:5px;border-radius:50%; background:var(--accent); animation:typ 1.2s infinite}
.w-calc .dots i:nth-child(2){animation-delay:.18s} .w-calc .dots i:nth-child(3){animation-delay:.36s}
.w-typing{align-self:flex-start; display:flex; gap:4px; padding:12px 14px; background:var(--surface-3); border:1px solid var(--border); border-radius:14px; border-bottom-left-radius:5px}
.w-typing i{width:6px;height:6px;border-radius:50%; background:var(--ink-4); animation:typ 1.2s infinite}
.w-typing i:nth-child(2){animation-delay:.18s} .w-typing i:nth-child(3){animation-delay:.36s}
/* inside the widget the PDF inherits the rounded card corners */
.widget .al-pdf{border-radius:inherit}
.widget .al-pdf-bar{border-top-left-radius:inherit; border-top-right-radius:inherit}

/* idle call: clearer affordance */
.call-idle.clickable{cursor:pointer}
.cc-btn.call.pulse{position:relative; box-shadow:0 8px 22px rgba(52,199,89,.5)}
.cc-btn.call.pulse::before, .cc-btn.call.pulse::after{content:""; position:absolute; inset:0; border-radius:50%; border:2px solid #34c759; animation:callring 1.9s ease-out infinite}
.cc-btn.call.pulse::after{animation-delay:.95s}
@keyframes callring{0%{transform:scale(1); opacity:.7}100%{transform:scale(1.85); opacity:0}}
.call-lab{font-size:13px !important; font-weight:700 !important; color:#fff !important}
@media(prefers-reduced-motion:reduce){.cc-btn.call.pulse::before,.cc-btn.call.pulse::after{animation:none; opacity:0}}

/* ===== Hero demo v4: phone steps aside, conversation leads ===== */
.ph-solo{display:flex; justify-content:center}
.ph-wrap{display:flex; align-items:center; justify-content:center; gap:22px; width:100%}
.ph-convo{flex:1 1 auto; min-width:0; max-width:460px; display:flex; flex-direction:column; gap:11px; animation:convoIn .5s cubic-bezier(.2,.7,.2,1)}
@keyframes convoIn{from{opacity:0; transform:translateX(18px)}to{opacity:1; transform:none}}
.ph-phone{flex:0 0 auto; width:272px; height:548px; display:flex; align-items:center; justify-content:center}
.ph-phone .iphone{transform:scale(.84); transform-origin:center; transition:transform .5s cubic-bezier(.4,0,.2,1)}
.ph-phone.dim{opacity:.5; animation:phDim .55s cubic-bezier(.2,.7,.2,1) forwards}
.ph-phone.dim .iphone{transform:scale(.66)}
@keyframes phDim{from{opacity:.88}to{opacity:.5}}

/* glass-morphism speech bubbles (bright, glossy 3D) */
.ph-bub{position:relative; width:fit-content; max-width:100%; padding:13px 17px; border-radius:20px; font-size:13px; line-height:1.42; color:#1b2238; font-weight:500; text-wrap:pretty;
  background:linear-gradient(150deg, rgba(255,255,255,.85), rgba(245,248,255,.55));
  -webkit-backdrop-filter:blur(18px) saturate(1.8); backdrop-filter:blur(18px) saturate(1.8);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 16px 36px rgba(40,55,110,.20), inset 0 1px 0 rgba(255,255,255,1), inset 0 -10px 22px rgba(120,140,210,.10);
  animation:phbub .55s cubic-bezier(.2,.7,.2,1)}
.ph-bub::before{content:""; position:absolute; left:7px; right:32%; top:5px; height:40%; border-radius:15px 15px 22px 22px; pointer-events:none; z-index:0;
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0))}
.ph-bub-who{position:relative; z-index:1; display:block; font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:3px}
.ph-bub.jess{align-self:flex-start; border-color:rgba(150,180,255,.9); box-shadow:0 16px 36px rgba(60,90,210,.22), inset 0 1px 0 rgba(255,255,255,1), 0 0 24px rgba(120,160,255,.30); border-bottom-left-radius:7px}
.ph-bub.jess .ph-bub-who{color:#3a5bd0}
.ph-bub.me{align-self:flex-end; border-color:rgba(228,160,238,.9); box-shadow:0 16px 36px rgba(180,80,200,.20), inset 0 1px 0 rgba(255,255,255,1), 0 0 24px rgba(220,140,235,.28); border-bottom-right-radius:7px}
.ph-bub.me .ph-bub-who{color:#b0479e}
/* chat-style glass tails */
.ph-bub.jess::after{content:""; position:absolute; left:-6px; bottom:13px; width:15px; height:15px; background:linear-gradient(225deg, rgba(255,255,255,.75), rgba(245,248,255,.55)); border-left:1px solid rgba(255,255,255,.95); border-bottom:1px solid rgba(255,255,255,.95); border-bottom-left-radius:5px; transform:rotate(45deg); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px)}
.ph-bub.me::after{content:""; position:absolute; right:-6px; bottom:13px; width:15px; height:15px; background:linear-gradient(135deg, rgba(255,255,255,.75), rgba(245,248,255,.55)); border-right:1px solid rgba(255,255,255,.95); border-bottom:1px solid rgba(255,255,255,.95); border-bottom-right-radius:5px; transform:rotate(-45deg); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px)}
@keyframes phbub{from{opacity:0; transform:translateY(12px) scale(.94)}to{opacity:1; transform:none}}
.ph-bub-typing{padding:14px 18px}
.ph-bub-typing .dots{display:inline-flex; gap:4px; position:relative; z-index:1}
.ph-bub-typing .dots i{width:6px;height:6px;border-radius:50%; background:#3a5bd0; opacity:.75; animation:typ 1.2s infinite}
.ph-bub-typing .dots i:nth-child(2){animation-delay:.18s} .ph-bub-typing .dots i:nth-child(3){animation-delay:.36s}

/* === AI particle-sphere orb (white particles on black, glowing core) === */
.call-bg.orb{background:radial-gradient(120% 90% at 50% 32%, #0b0e18 0%, #06070e 60%, #030308 100%)}
.ph-orb-stage{position:relative; z-index:5; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:#fff}
.ph-orb{position:relative; width:166px; height:166px; border-radius:50%; overflow:hidden;
  background:#04050a;
  box-shadow:0 0 72px rgba(130,175,255,.42), 0 0 26px rgba(160,205,255,.32), inset 0 0 32px #000;
  animation:orbbreath 6s ease-in-out infinite}
.ph-orb-glyph{display:none}
.ph-orb::before{content:""; position:absolute; inset:-30%;
  background-image:radial-gradient(rgba(255,255,255,.97) 1px, transparent 1.7px), radial-gradient(rgba(205,225,255,.72) 1px, transparent 1.6px);
  background-size:7px 7px, 9px 9px; background-position:0 0, 3px 4px;
  -webkit-mask:radial-gradient(circle at 50% 50%, #000 14%, rgba(0,0,0,.85) 40%, rgba(0,0,0,.32) 58%, transparent 70%);
  mask:radial-gradient(circle at 50% 50%, #000 14%, rgba(0,0,0,.85) 40%, rgba(0,0,0,.32) 58%, transparent 70%);
  animation:orbrot 18s linear infinite}
.ph-orb::after{content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(225,242,255,.92) 0%, rgba(150,185,255,.5) 16%, rgba(95,125,255,.12) 34%, transparent 56%);
  mix-blend-mode:screen; animation:orbcore 4s ease-in-out infinite}
.ph-orb.on{box-shadow:0 0 104px rgba(150,195,255,.6), 0 0 36px rgba(180,215,255,.46), inset 0 0 32px #000; transform:scale(1.04)}
@keyframes orbrot{to{transform:rotate(360deg)}}
@keyframes orbcore{0%,100%{opacity:.7; transform:scale(.95)}50%{opacity:1; transform:scale(1.07)}}
@keyframes orbbreath{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.ph-orb-name{font-size:18px; font-weight:600; letter-spacing:-.01em; margin-top:8px}
.ph-orb-status{font-size:13px; color:rgba(255,255,255,.7); display:flex; align-items:center; gap:6px}
.ph-orb-status .call-timer{font-variant-numeric:tabular-nums; font-family:var(--mono)}
@media(prefers-reduced-motion:reduce){.ph-orb,.ph-orb::before,.ph-orb::after{animation:none}}

/* single-view modules (no more side-by-side default) */
.ios-modules.v-call, .ios-modules.v-widget{width:100%; justify-content:flex-start}
.ios-modules.v-call .ios-mod.is-widget, .ios-modules.v-widget .ios-mod.is-phone{display:none}
.ios-modules.v-call .ios-mod.is-phone{width:100%; max-width:none; margin:0; animation:iosFocus .42s cubic-bezier(.2,.7,.2,1)}
.ios-modules.v-call .ios-mod.is-phone .ios-mod-inner{width:100%; display:block}
.ios-modules.v-widget .ios-mod.is-widget{width:100%; max-width:none; margin:0; animation:iosFocus .42s cubic-bezier(.2,.7,.2,1)}
.ios-modules.v-widget .ios-mod.is-widget .ios-mod-inner{width:100%; display:block}
/* hero: give the demo column more room than the text (no scaling) + smaller title */
.vhero-grid{grid-template-columns:0.85fr 1.15fr !important; align-items:start}
.vhero .h-display{font-size:40px !important}
@media(max-width:640px){
  .ph-wrap{flex-direction:column; align-items:stretch; gap:14px}
  .ph-convo{max-width:none; order:1}
  .ph-phone{order:2; align-self:center}
}