/* Shared product demonstration. Static content remains useful without JavaScript. */
.h2-interactive-preview { width:100%; min-width:0; }
.pd-demo { position:relative; width:100%; max-width:600px; margin-inline:auto; isolation:isolate; font-family:var(--font-ui); color:#f3faf6; text-align:left; }
.pd-demo::before { content:""; position:absolute; inset:12% -8% 18%; z-index:-1; background:radial-gradient(ellipse,rgba(0,201,123,.16),transparent 68%); pointer-events:none; }
.pd-demo button { font-family:inherit; cursor:pointer; }
.pd-demo button:disabled { cursor:default; }
.pd-demo [hidden] { display:none !important; }
.pd-demo[data-enhanced="true"] [data-visible="false"] { visibility:hidden; pointer-events:none; }
.pd-demo-intro { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:0 4px 14px; }
.pd-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:650; letter-spacing:.5px; color:#8bdab0; line-height:1.7; }
.pd-eyebrow .p-status-dot { width:6px; height:6px; }
.pd-example { color:#b4cbbd; font-size:14px; line-height:1.6; white-space:nowrap; }
.pd-workspace { position:relative; overflow:hidden; background:linear-gradient(155deg,rgba(60,124,86,.1),transparent 35%),#0c2118; border:1px solid rgba(156,215,179,.22); border-radius:20px; box-shadow:0 32px 80px rgba(0,0,0,.24),0 1px 0 rgba(255,255,255,.04) inset; }
.pd-appbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 22px; background:#080b0a; color:#f5f7f6; border-bottom:1px solid rgba(255,255,255,.12); }
.pd-brand { display:flex; align-items:center; gap:10px; min-width:0; }
.pd-brand > img { flex-shrink:0; object-fit:cover; border-radius:10px; border:1px solid rgba(255,255,255,.15); }
.pd-brand strong { display:block; font-size:16px; font-weight:700; letter-spacing:-.25px; }
.pd-brand > span { min-width:0; }
.pd-brand .pd-platforms { display:flex; align-items:center; flex-wrap:wrap; gap:6px; color:#b8c2bc; font-size:11px; line-height:14px; margin-top:5px; }
.pd-platforms > span:first-child { display:inline-flex; align-items:center; min-height:14px; white-space:nowrap; }
.pd-platform-logos { display:inline-flex; align-items:center; gap:5px; line-height:0; }
.pd-platform-logos img { display:block; width:14px; height:14px; flex-shrink:0; }
.pd-workspace-badge { display:inline-flex; align-items:center; gap:6px; padding:6px 8px; background:#151a17; border:1px solid rgba(255,255,255,.16); border-radius:7px; color:#d5dbd8; font-size:12px; }
.pd-workspace-badge .p-icon { width:13px; height:13px; }
.pd-scene { position:relative; padding:20px 22px 16px; min-height:357px; background-image:radial-gradient(rgba(159,186,170,.08) .6px,transparent .6px); background-size:14px 14px; touch-action:pan-y pinch-zoom; cursor:grab; user-select:none; }
.pd-scene:active { cursor:grabbing; }
.pd-slide-nav { display:flex; justify-content:center; align-items:center; padding:0 12px 8px; }
.pd-slide-nav button { display:grid; place-items:center; width:28px; height:32px; padding:0; border:0; border-radius:6px; background:transparent; }
.pd-slide-nav button > span { width:6px; height:6px; border-radius:50%; background:#ffffff40; }
.pd-slide-nav button.is-active > span { background:#4de5a5; box-shadow:0 0 10px #4de5a566; transform:scale(1.3); }
.pd-slide-nav button:hover > span { background:#b5ffd9; }
.pd-scene > .pd-slide-arrow { display:none; }
@media (min-width:768px) and (hover:hover) and (pointer:fine) {
  .pd-scene > .pd-slide-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:2; display:grid; place-items:center; width:32px; height:32px; padding:0; border:1px solid #ffffff26; border-radius:50%; color:#d4e7dc; background:#081510df; opacity:0; pointer-events:none; transition:opacity .2s,background .2s; }
  .pd-slide-arrow--previous { left:4px; }
  .pd-slide-arrow--next { right:4px; }
  .pd-demo:hover .pd-slide-arrow,.pd-demo:focus-within .pd-slide-arrow { opacity:.65; pointer-events:auto; }
  .pd-scene > .pd-slide-arrow:hover,.pd-scene > .pd-slide-arrow:focus-visible { opacity:1; background:#1c3829; }
  .pd-slide-arrow .p-icon { width:16px; height:16px; }
  .pd-slide-arrow--previous .p-icon { transform:rotate(90deg); }
  .pd-slide-arrow--next .p-icon { transform:rotate(-90deg); }
}
.pd-thread-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:22px; }
.pd-contact { display:flex; align-items:center; gap:10px; min-width:0; }
.pd-contact > span:last-child { min-width:0; }
.pd-avatar { position:relative; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:34px; height:34px; border-radius:11px; background:linear-gradient(130deg,#326749,#204730); color:#e8f6ed; font-size:11px; font-weight:650; }
.pd-avatar > span { position:absolute; right:-2px; bottom:-2px; width:9px; height:9px; border-radius:50%; background:#32d88c; border:2px solid #0c2118; }
.pd-contact strong { display:block; font-size:14px; font-weight:650; }
.pd-contact > span > span { display:block; margin-top:4px; color:#b5cdbf; font-size:11px; line-height:1.5; }
.pd-status { border-radius:5px; padding:5px 7px; background:rgba(0,201,123,.1); color:#86edb9; font-size:10px; font-weight:700; white-space:nowrap; }
.pd-messages { position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:12px; min-height:370px; }
.pd-bubble { position:relative; max-width:88%; padding:12px 14px 10px; border:1px solid rgba(156,215,179,.12); box-shadow:0 2px 8px rgba(0,0,0,.08); }
.pd-bubble p { margin:8px 0; font-size:14px; line-height:1.65; color:#eef8f1; }
.pd-incoming { background:#172e22; border-radius:0 12px 12px; }
.pd-outgoing { align-self:flex-end; background:#103d29; border-color:rgba(0,201,123,.18); border-radius:12px 0 12px 12px; }
.pd-message-label { display:flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:#c4dfcf; }
.pd-outgoing .pd-message-label { color:#89e8b6; }
.pd-message-label .p-icon { width:12px; height:12px; }
.pd-message-time { display:flex; align-items:center; justify-content:flex-end; gap:3px; font-size:10px; color:#bbd1c4; }
.pd-message-time .p-icon { width:12px; height:12px; color:#79dca9; }
.pd-room-offer { display:grid; gap:8px; padding:12px; margin:10px 0; border:1px solid rgba(113,225,163,.2); border-radius:8px; background:rgba(0,0,0,.1); }
.pd-room-offer > span { display:flex; align-items:center; gap:6px; color:#cce8d6; font-size:12px; }
.pd-room-offer .p-icon { width:14px; height:14px; }
.pd-room-offer strong { color:#a2f3bf; font-size:20px; font-weight:650; }
.pd-room-offer small { font-size:12px; font-weight:500; color:#c2d9cb; }
.pd-checking p { display:flex; align-items:center; gap:8px; }
.pd-check-dot { width:6px; height:6px; border-radius:50%; background:#7ce7a9; box-shadow:0 0 12px rgba(0,201,123,.3); }
.pd-waiting { display:inline-flex; align-self:flex-end; align-items:center; gap:10px; max-width:100%; padding:10px 13px; border:1px solid rgba(91,235,163,.45); border-radius:12px; background:linear-gradient(115deg,#174b32,#102f22); color:#c7ffdf; font-size:12px; font-weight:650; line-height:1.5; box-shadow:0 4px 16px rgba(0,201,123,.1); }
.pd-waiting[data-speaker="customer"] { align-self:flex-start; background:linear-gradient(115deg,#243b2d,#183222); }
.pd-waiting-dots { display:inline-flex; align-items:center; gap:3px; }
.pd-waiting-dots i { display:block; width:6px; height:6px; border-radius:50%; background:#8affbd; animation:pd-waiting-dot 1s ease-in-out infinite; }
.pd-waiting-dots i:nth-child(2) { animation-delay:.15s; }
.pd-waiting-dots i:nth-child(3) { animation-delay:.3s; }
.pd-demo[data-playing="false"] .pd-waiting { visibility:hidden; }
.pd-demo[data-playing="false"] .pd-waiting-dots i { animation-play-state:paused; }
@keyframes pd-waiting-dot { 0%,80%,100% { opacity:.35; transform:translateY(0); } 40% { opacity:1; transform:translateY(-3px); } }
/* Reminder highlight and the finale stay inside the demonstration, not over the page. */
.pd-finale { position:absolute; inset:0; z-index:5; display:grid; place-items:center; padding:24px; background:rgba(3,16,10,.72); backdrop-filter:blur(6px); }
.pd-finale-card { position:relative; width:100%; max-width:370px; padding:34px 26px 28px; overflow:hidden; border-radius:22px; color:#052518; text-align:center; background:radial-gradient(ellipse at top left,#b1ffad 0,transparent 55%),linear-gradient(145deg,#56f3a1,#17d782); border:1px solid #b9ffd0; box-shadow:0 20px 60px rgba(0,0,0,.35),0 0 45px rgba(0,230,133,.15); }
.pd-finale-close { position:absolute; top:8px; right:8px; display:grid; place-items:center; width:44px; height:44px; padding:0; line-height:1; border:0; border-radius:50%; background:transparent; color:#0c5731; }
.pd-finale-close:hover { background:rgba(3,45,23,.08); }
.pd-finale-close .p-icon { display:block; width:18px; height:18px; }
.pd-finale-symbol { display:grid; place-items:center; width:58px; height:58px; margin:0 auto 20px; border-radius:18px; background:#073c24; color:#96ffb2; box-shadow:0 6px 0 rgba(5,62,34,.1); transform:rotate(-7deg); }
.pd-finale-symbol .p-icon { width:29px; height:29px; }
.pd-finale-eyebrow { display:block; font-size:9px; letter-spacing:1px; font-weight:750; color:#165634; }
.pd-finale-card h3 { margin:16px 0; font-size:clamp(34px,3vw,44px); line-height:1.05; letter-spacing:-1.8px; font-weight:800; color:#042e19; }
.pd-finale-card h3 em { font-style:italic; }
.pd-finale-card p { margin:0 0 24px; font-size:12px; line-height:1.9; color:#174b2c; }
.pd-finale-cta { display:flex; justify-content:center; align-items:center; gap:10px; min-height:50px; padding:12px 16px; border-radius:11px; background:#052d1b; color:#f0fff4; font-size:12px; font-weight:650; line-height:1.5; text-decoration:none; box-shadow:0 5px 14px rgba(5,45,27,.12); transition:background .2s,transform .2s; }
.pd-finale-cta:hover { background:#0e472b; transform:translateY(-2px); }
.pd-finale-cta .p-icon { width:18px; height:18px; }
.pd-finale :focus-visible { outline:2px solid #052d1b; outline-offset:3px; }
.pd-finale-footnote { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:12px; font-size:11px; line-height:1.5; color:#225c37; }
.pd-finale-footnote strong { font-weight:700; }
.pd-finale-footnote .p-icon { width:14px; height:14px; }
@media (max-width:540px) { .pd-finale { padding:16px; } .pd-finale-card { padding:30px 20px 24px; } .pd-finale-card h3 { font-size:36px; } }
.pd-qualification { display:flex; align-items:center; gap:9px; border:1px solid rgba(255,210,63,.6); border-radius:9px; padding:15px; margin-top:12px; background:linear-gradient(110deg,rgba(255,210,63,.14),rgba(255,210,63,.07)); }
.pd-qualification { border-color:rgba(255,210,63,.2); background:#262b18; }
.pd-event-icon { display:inline-flex; color:#ffe18a; flex-shrink:0; }
.pd-event-icon .p-icon { width:17px; height:17px; }
.pd-qualification > span:nth-child(2), .pd-followup > span:nth-child(2) { flex:1; min-width:0; }
.pd-qualification strong { display:block; font-size:13px; font-weight:650; line-height:1.6; color:#ffe594; }
.pd-qualification > span > span { display:block; margin-top:4px; font-size:12px; line-height:1.7; color:#e1d8af; }
.pd-tag { font-size:8px; padding:4px 6px; background:rgba(255,210,63,.08); border-radius:5px; color:#ffe18a; white-space:nowrap; }
.pd-followup .pd-event-icon, .pd-followup-check { color:#ffe16d; }
.pd-workspace-bottom { display:flex; align-items:center; gap:7px; padding:12px 22px; border-top:1px solid rgba(156,215,179,.1); background:rgba(0,0,0,.12); color:#b7cdbf; font-size:10px; line-height:1.7; }
.pd-workflow-dot { width:5px; height:5px; background:#4ee6a1; border-radius:50%; flex-shrink:0; }
.pd-workspace-bottom .p-icon { width:13px; height:13px; margin-left:auto; flex-shrink:0; color:#83a992; }
@media (max-width:540px) {
  .pd-demo-intro { flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center; margin-bottom:18px; }
  .pd-eyebrow { font-size:13px; letter-spacing:.5px; }
  .pd-example { font-size:16px; font-weight:650; }
  .pd-appbar { padding:16px; }
  .pd-scene { padding:16px; min-height:357px; }
  .pd-bubble { max-width:92%; }
  .pd-brand strong { font-size:15px; }
  .pd-workspace-bottom { padding:12px 16px; font-size:10px; }
  .pd-tag { display:none; }
}
@media (prefers-reduced-motion:reduce) { .pd-typing { display:none !important; } .pd-demo *, .pd-demo *::before, .pd-demo *::after { animation:none !important; transition:none !important; } }

/* Keep the reminder prominent as the third visible conversation item. */
.pd-followup { display:flex; align-items:center; border-radius:12px; width:100%; margin-top:0; padding:17px; gap:12px; border:1px solid #f4cc4d; border-left:4px solid #ffda57; background:linear-gradient(115deg,#51451a,#302c17); box-shadow:0 6px 24px rgba(255,210,63,.12); }
.pd-followup strong { display:block; color:#ffe68d; font-size:16px; font-weight:750; line-height:1.4; }
.pd-followup > span > span { display:block; color:#f2e5b9; font-size:14px; line-height:1.6; margin-top:6px; }
.pd-followup b { color:#ffdf69; font-weight:750; }
.pd-followup .pd-event-icon .p-icon { width:25px; height:25px; }
.pd-followup-check .p-icon { width:20px; height:20px; }
@media (max-width:400px) {
  .pd-followup { padding:14px 12px; gap:8px; }
  .pd-followup strong { font-size:14px; }
  .pd-followup-check { display:none; }
}