/* PRO scenes use the homepage's shared browser/phone shells and lp2 motion.
   Default state is the complete illustration; JS only triggers one reveal. */
.pro-demo { margin:0; min-width:0; color:#0B0D0E; text-align:left; }
.pro-demo *, .pro-demo *::before, .pro-demo *::after { box-sizing:border-box; }
.pro-demo img { max-width:100%; }
.pro-demo-caption { margin:16px 0 0; color:#6b7280; font-size:11.5px; line-height:1.5; text-align:center; }
.pro-demo.is-active .pro-animate { animation:var(--pro-motion,lp2-st-card) 3.8s ease var(--pro-delay,0s) 1 backwards; }
.pro-demo-portfolio { position:relative; max-width:960px; margin:0 auto; }
.pro-demo-portfolio .lp2-browser { background:#fff; }
.pro-demo-portfolio-cover { position:relative; height:172px; overflow:hidden; background:#eef2f8; }
.pro-demo-portfolio-cover > img { width:100%; height:100%; object-fit:cover; object-position:50% 56%; }
.pro-demo-portfolio-cover::after { position:absolute; content:""; inset:0; background:linear-gradient(90deg,rgba(255,255,255,.98) 2%,rgba(255,255,255,.86) 32%,rgba(255,255,255,.08) 72%); }
.pro-demo-portfolio-cover-text { position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; justify-content:center; padding:24px 30px; }
.pro-demo-wordmark { display:flex; align-items:center; gap:8px; font-size:19px; font-weight:750; letter-spacing:-.04em; }
.pro-demo-wordmark > span, .pro-demo-paper-label > span { border-radius:5px; padding:2px 5px; background:#e7efff; color:#1D4ED8; font-size:9px; font-weight:800; letter-spacing:.06em; }
.pro-demo-portfolio-cover-text > p { margin:15px 0 0; max-width:420px; font-size:clamp(22px,3.5vw,30px); font-weight:750; line-height:1.13; letter-spacing:-.03em; }
.pro-demo-portfolio-body { display:grid; grid-template-columns:minmax(0,1fr) 170px; gap:22px; padding:24px; }
.pro-demo-property-list { min-width:0; }
.pro-demo-property-head, .pro-demo-property-row { display:grid; grid-template-columns:minmax(150px,1.5fr) minmax(80px,1fr) minmax(60px,.7fr) minmax(75px,.7fr); gap:12px; align-items:center; }
.pro-demo-property-head { padding:0 0 12px; color:#6b7280; font-size:10px; font-weight:600; }
.pro-demo-property-row { min-height:75px; padding:13px 0; border-top:1px solid rgba(11,13,14,.06); font-size:11.5px; line-height:1.4; }
.pro-demo-property-name { display:flex; align-items:center; gap:10px; min-width:0; }
.pro-demo-property-name > img { width:58px; height:46px; object-fit:cover; flex-shrink:0; border-radius:9px; }
.pro-demo-property-name > strong { overflow-wrap:anywhere; font-weight:650; }
.pro-demo-property-owner { color:#6b7280; overflow-wrap:anywhere; }
.pro-demo-property-rent { font-weight:650; white-space:nowrap; }
.pro-demo-mobile-label { display:none; }
.pro-demo-chip { display:inline-flex; align-items:center; gap:4px; padding:5px 7px; border-radius:999px; background:#ecfdf3; color:#15803d; font-size:10px; font-weight:650; line-height:1.2; }
.pro-demo-chip > .material-symbols-outlined { font-size:12px; flex-shrink:0; }
.pro-demo-chip-pending { background:#fff7e6; color:#92400e; }
.pro-demo-portfolio-summary { display:flex; flex-direction:column; gap:12px; }
.pro-demo-owner-total { display:flex; flex-direction:column; align-items:flex-start; gap:7px; flex:1; padding:18px; border-radius:16px; background:rgba(242,243,255,.85); border:1px solid rgba(37,99,235,.06); font-size:11px; line-height:1.4; color:#6b7280; }
.pro-demo-summary-icon { font-size:21px; color:#2563EB; }
.pro-demo-total-number { color:#0B0D0E; font-size:34px; font-weight:750; line-height:1; letter-spacing:-.04em; }
.pro-demo-ready { display:flex; align-items:center; gap:8px; padding:13px; background:#ecfdf3; border-radius:13px; color:#15803d; font-size:11px; line-height:1.45; font-weight:600; }
.pro-demo-ready > .material-symbols-outlined { font-size:20px; flex-shrink:0; }

.pro-demo-signature { width:100%; }
.pro-demo-phone-wrap { position:relative; width:290px; max-width:100%; margin:0 auto; }
.pro-demo-phone-glow { position:absolute; inset:0 -20px; pointer-events:none; background:radial-gradient(ellipse at 50% 38%,rgba(37,99,235,.2),transparent 70%); filter:blur(36px); }
.pro-demo-signature-screen { background:#F5F6F8; }
.pro-demo-phone-status { display:flex; align-items:center; justify-content:space-between; padding:13px 23px 8px; font-size:11px; font-weight:700; }
.pro-demo-phone-status > .material-symbols-outlined { font-size:16px; }
.pro-demo-signature-header { display:flex; align-items:center; gap:7px; padding:12px 16px; background:#fff; border-bottom:1px solid rgba(11,13,14,.06); font-size:12px; font-weight:650; line-height:1.4; }
.pro-demo-signature-header > img { flex-shrink:0; }
.pro-demo-signature-header > .material-symbols-outlined { margin-left:auto; color:#6b7280; font-size:15px; }
.pro-demo-signature-content { display:flex; flex-direction:column; gap:10px; padding:14px 13px 24px; }
.pro-demo-paper { padding:18px 16px; border-radius:5px; background:#fff; border:1px solid rgba(11,13,14,.07); box-shadow:0 5px 16px -9px rgba(11,13,14,.16); }
.pro-demo-paper-label { display:flex; align-items:center; gap:5px; font-size:11px; font-weight:750; letter-spacing:-.035em; }
.pro-demo-paper-label > span { font-size:7px; }
.pro-demo-document-name { margin:20px 0 5px; font-size:15px; font-weight:750; line-height:1.2; letter-spacing:-.02em; }
.pro-demo-document-property { margin:0 0 15px; font-size:10px; color:#6b7280; }
.pro-demo-paper-lines { display:flex; flex-direction:column; gap:5px; }
.pro-demo-paper-lines > span { display:block; width:100%; height:3px; border-radius:2px; background:#e8eaf0; }
.pro-demo-paper-lines > span:last-child { width:65%; }
.pro-demo-paper-signer { display:flex; flex-direction:column; gap:3px; margin:15px 0 12px; font-size:9px; color:#6b7280; }
.pro-demo-paper-signer > strong { color:#374151; font-size:10px; font-weight:600; }
.pro-demo-paper-lines-short > span { height:2px; }
.pro-demo-verification { padding:12px; border-radius:12px; background:#fff; border:1px solid rgba(11,13,14,.06); }
.pro-demo-verification-top { display:flex; gap:6px; align-items:center; font-size:10.5px; color:#374151; font-weight:600; }
.pro-demo-verification-top > .material-symbols-outlined { color:#2563EB; font-size:17px; }
.pro-demo-code { display:flex; gap:5px; margin:10px 0 8px; }
.pro-demo-code > span { display:flex; justify-content:center; align-items:center; min-width:0; flex:1; height:29px; background:#F5F6F8; border:1px solid #e5e7eb; border-radius:6px; color:#2563EB; font-size:16px; }
.pro-demo-verified { display:flex; align-items:center; gap:4px; color:#15803d; font-size:9px; font-weight:600; }
.pro-demo-verified > .material-symbols-outlined { font-size:12px; }
.pro-demo-signed-name { display:flex; flex-direction:column; gap:5px; padding:12px; background:#fff; border:1px solid rgba(11,13,14,.06); border-radius:12px; }
.pro-demo-signed-name > span { color:#6b7280; font-size:9px; }
.pro-demo-signed-name > strong { color:#1D4ED8; font-size:16px; font-weight:600; line-height:1.4; }
.pro-demo-signed-state { display:flex; align-items:center; justify-content:center; gap:7px; padding:11px; border-radius:10px; background:#ecfdf3; color:#15803d; font-size:11px; font-weight:650; }
.pro-demo-signed-state > .material-symbols-outlined { font-size:17px; }
.pro-demo-phone-home { position:absolute; bottom:7px; left:50%; transform:translateX(-50%); width:100px; height:4px; border-radius:999px; background:#0B0D0E; }
@keyframes pro-demo-type-name { 0%,42% { clip-path:inset(0 100% 0 0); } 65%,100% { clip-path:inset(0 0 0 0); } }

.pro-demo-import-stage { padding:32px; border:1px solid rgba(11,13,14,.06); border-radius:24px; background:radial-gradient(ellipse at 50% 0,rgba(37,99,235,.1),rgba(242,243,255,.8) 75%); }
.pro-demo-file-row { display:flex; justify-content:center; gap:14px; }
.pro-demo-file { display:flex; flex-direction:column; align-items:center; gap:9px; width:89px; padding:17px 13px 13px; border:1px solid rgba(11,13,14,.07); border-radius:12px; background:#fff; box-shadow:0 6px 16px -10px rgba(11,13,14,.22); font-size:11px; font-weight:700; }
.pro-demo-file-symbol { display:flex; align-items:center; justify-content:center; width:58px; max-width:100%; height:44px; border-radius:7px; font-size:28px; }
.pro-demo-file-excel { color:#15803d; background:#ecfdf3; }
.pro-demo-file-pdf { color:#dc2626; background:#fff1f2; }
.pro-demo-file > img { width:58px; height:44px; object-fit:cover; border-radius:7px; }
.pro-demo-file-line { display:block; width:28px; height:3px; border-radius:2px; background:#e5e7eb; }
.pro-demo-import-connector { display:flex; flex-direction:column; align-items:center; padding:8px 0; color:#2563EB; }
.pro-demo-import-connector > span:first-child { height:19px; width:1px; background:linear-gradient(#bfdbfe,#2563EB); }
.pro-demo-import-connector > .material-symbols-outlined { margin-top:-5px; font-size:20px; }
.pro-demo-import-preview { padding:18px; border-radius:16px; background:#fff; border:1px solid rgba(11,13,14,.07); box-shadow:0 8px 22px -16px rgba(11,13,14,.25); }
.pro-demo-import-preview-header { display:flex; align-items:center; gap:8px; margin-bottom:9px; font-size:12.5px; line-height:1.4; }
.pro-demo-small-icon { display:inline-flex; align-items:center; justify-content:center; width:29px; height:29px; border-radius:8px; background:rgba(37,99,235,.08); color:#2563EB; font-size:18px; flex-shrink:0; }
.pro-demo-import-property { display:flex; align-items:center; gap:10px; padding:12px 0; border-top:1px solid rgba(11,13,14,.06); }
.pro-demo-import-property > img { width:56px; height:46px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.pro-demo-import-property > div { display:flex; flex-direction:column; gap:4px; flex:1; min-width:0; font-size:11.5px; line-height:1.3; overflow-wrap:anywhere; }
.pro-demo-import-property > div > span { color:#6b7280; font-size:10.5px; }
.pro-demo-import-property > .material-symbols-outlined { color:#16a34a; font-size:19px; flex-shrink:0; }
.pro-demo-import-complete { display:flex; align-items:center; justify-content:center; gap:7px; margin:16px auto 0; padding:9px 14px; width:fit-content; max-width:100%; background:#ecfdf3; border:1px solid #bbf7d0; color:#15803d; border-radius:999px; font-size:11px; line-height:1.4; font-weight:650; text-align:center; }
.pro-demo-import-complete > .material-symbols-outlined { font-size:17px; flex-shrink:0; }

.pro-demo-assistant-window { overflow:hidden; box-shadow:0 24px 50px -28px rgba(11,13,14,.26); }
.pro-demo-assistant-header { display:flex; align-items:center; gap:11px; padding:21px 24px; border-bottom:1px solid rgba(11,13,14,.06); }
.pro-demo-assistant-header > img { flex-shrink:0; border-radius:13px; }
.pro-demo-assistant-header > div { display:flex; flex-direction:column; gap:3px; min-width:0; }
.pro-demo-assistant-header strong { font-size:15px; }
.pro-demo-assistant-header > div > span { font-size:11px; color:#6b7280; line-height:1.4; }
.pro-demo-assistant-header > .material-symbols-outlined { margin-left:auto; color:#2563EB; font-size:21px; }
.pro-demo-conversation { display:flex; flex-direction:column; gap:20px; padding:26px 22px; background:linear-gradient(145deg,#fff,#F5F6FB); }
.pro-demo-message-question { align-self:flex-end; max-width:88%; padding:13px 17px; background:#e7efff; color:#1e3a8a; border-radius:17px 17px 5px 17px; font-size:13px; line-height:1.55; transform-origin:100% 100%; }
.pro-demo-message-answer { display:flex; align-items:flex-start; gap:9px; font-size:13px; line-height:1.65; color:#374151; transform-origin:0 100%; }
.pro-demo-message-answer > img { flex-shrink:0; border-radius:8px; margin-top:2px; }
.pro-demo-message-answer > div { min-width:0; }
.pro-demo-assistant-property { display:flex; align-items:center; gap:11px; margin-left:34px; padding:11px; border:1px solid rgba(11,13,14,.07); border-radius:13px; background:#fff; box-shadow:0 4px 12px -9px rgba(11,13,14,.2); }
.pro-demo-assistant-property > img { width:64px; height:52px; object-fit:cover; border-radius:8px; flex-shrink:0; }
.pro-demo-assistant-property > div { display:flex; flex-direction:column; gap:5px; min-width:0; font-size:12px; line-height:1.4; }
.pro-demo-assistant-property > div > span { color:#6b7280; font-size:10.5px; }
.pro-demo-assistant-property > .material-symbols-outlined { margin-left:auto; color:#2563EB; font-size:19px; flex-shrink:0; }

@media (max-width:899px) {
  .pro-demo-portfolio-body { grid-template-columns:minmax(0,1fr); gap:16px; }
  .pro-demo-portfolio-summary { display:grid; grid-template-columns:1fr 1fr; }
  .pro-demo-owner-total { flex-direction:row; align-items:center; gap:10px; padding:13px; }
  .pro-demo-total-number { font-size:24px; }
}
@media (max-width:639px) {
  .pro-demo-portfolio-cover { height:142px; }
  .pro-demo-portfolio-cover::after { background:linear-gradient(90deg,rgba(255,255,255,.95),rgba(255,255,255,.65) 60%,rgba(255,255,255,.1)); }
  .pro-demo-portfolio-cover-text { padding:20px; }
  .pro-demo-portfolio-cover-text > p { max-width:240px; }
  .pro-demo-portfolio-body { padding:16px; }
  .pro-demo-property-head { display:none; }
  .pro-demo-property-row { grid-template-columns:minmax(0,1fr) auto; gap:7px 12px; padding:14px 0; }
  .pro-demo-property-row:first-of-type { border-top:0; }
  .pro-demo-property-name { grid-column:1 / -1; font-size:12px; }
  .pro-demo-property-owner { grid-column:1; }
  .pro-demo-property-rent { grid-column:1; }
  .pro-demo-property-status { grid-column:2; grid-row:2 / 4; align-self:center; }
  .pro-demo-mobile-label { display:inline; margin-right:5px; font-size:10px; font-weight:400; color:#6b7280; }
  .pro-demo-portfolio-summary { gap:8px; }
  .pro-demo-owner-total { flex-wrap:wrap; gap:5px 8px; padding:11px; font-size:10px; }
  .pro-demo-owner-total > span:last-child { flex-basis:100%; }
  .pro-demo-ready { padding:10px; gap:6px; font-size:10px; }
  .pro-demo-ready > .material-symbols-outlined { font-size:17px; }
  .pro-demo-import-stage { padding:22px 16px; }
  .pro-demo-file-row { gap:8px; }
  .pro-demo-file { min-width:0; padding:12px 8px 10px; }
  .pro-demo-import-preview { padding:13px; }
  .pro-demo-assistant-header { padding:18px; }
  .pro-demo-conversation { padding:20px 16px; }
  .pro-demo-assistant-property { margin-left:0; gap:8px; }
  .pro-demo-assistant-property > img { width:52px; height:46px; }
}
@media (prefers-reduced-motion:reduce) {
  .pro-demo.is-active .pro-animate { animation:none; }
}