/* ERA installation UI showcase. Page-local and intentionally isolated. */
.product-page .install-showcase {
  --ic:#087ca7; --ic-deep:#075e80; --ic-bright:#19a8d1; --ic-soft:#eaf8fc;
  --ip:#f12682; --ip-soft:#fff0f7;
  --product-accent:#f12682; --product-deep:#c21868; --product-bright:#ff5aaa;
  --product-soft:#fff0f7; --product-rgb:241,38,130;
  --success-accent:#087ca7; --success-deep:#075e80; --success-bright:#19a8d1;
  --success-soft:#eaf8fc; --success-rgb:8,124,167;
  --ink:#0e1b22; --copy:#50616a; --line:rgba(8,124,167,.18);
}
.product-page .install-showcase[data-product="aura"] {
  --product-accent:#009a5b; --product-deep:#007a47; --product-bright:#19b977;
  --product-soft:#ecfbf2; --product-rgb:0,154,91;
  --success-accent:#009a5b; --success-deep:#007a47; --success-bright:#19b977;
  --success-soft:#ecfbf2; --success-rgb:0,154,91;
}
body.product-page .pnp.install-showcase { border-color:transparent!important; background:transparent!important; box-shadow:none!important; }
.product-page .install-showcase { content-visibility:auto; contain-intrinsic-size:720px; }
.product-page .install-showcase .pnp-hero {
  position:relative; overflow:hidden; padding:30px 32px 26px; border:1px solid rgba(8,124,167,.22)!important;
  border-top:2px solid var(--product-accent)!important; border-radius:15px;
  background:radial-gradient(circle at 84% 0,rgba(144,221,243,.2),transparent 32%),linear-gradient(145deg,#fff 0%,#f7fcfe 58%,#edf8fb 100%)!important;
  box-shadow:inset 0 1px 0 #fff,0 22px 56px rgba(8,91,122,.11)!important;
}
.product-page .install-showcase .pnp-hero::before {
  position:absolute; inset:0; pointer-events:none; content:""; opacity:.35;
  background-image:linear-gradient(rgba(8,124,167,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(8,124,167,.035) 1px,transparent 1px);
  background-size:30px 30px; mask-image:linear-gradient(to bottom,#000,transparent 76%);
}
.install-showcase__head,.install-app,.install-showcase__foot { position:relative; z-index:1; }
.install-showcase__head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:20px; }
.install-showcase__intro { min-width:0; max-width:760px; }
.product-page .install-showcase .pnp-badge { width:max-content; margin-bottom:10px; color:var(--ic-deep)!important; border-color:rgba(8,124,167,.2)!important; background:linear-gradient(145deg,#fff,#eefaff)!important; box-shadow:inset 0 1px 0 #fff,0 8px 20px rgba(8,124,167,.08)!important; }
.product-page .install-showcase .pnp-badge-dot { background:var(--product-accent)!important; box-shadow:0 0 0 4px rgba(var(--product-rgb),.12),0 0 13px rgba(var(--product-rgb),.28)!important; }
.product-page .install-showcase .pnp-title { margin:0; max-width:760px; color:var(--ink)!important; font-size:clamp(1.55rem,2.4vw,2.18rem); line-height:1.08; letter-spacing:-.04em; }
.product-page .install-showcase .pnp-title span { color:transparent!important; background:linear-gradient(100deg,var(--product-deep),var(--product-bright)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.product-page .install-showcase .pnp-sub { max-width:730px; margin:7px 0 0; color:var(--copy)!important; font-size:.86rem; line-height:1.5; }
.install-showcase__live { flex:0 0 auto; min-width:152px; padding:10px 12px; border:1px solid rgba(8,124,167,.18); border-radius:10px; background:rgba(255,255,255,.83); box-shadow:inset 0 1px 0 #fff,0 8px 22px rgba(8,124,167,.07); }
.install-showcase__live span,.install-showcase__live small { display:flex; align-items:center; }
.install-showcase__live span { gap:7px; color:var(--ic-deep); font-size:.66rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.install-showcase__live span i { width:7px; height:7px; border-radius:50%; background:var(--success-accent); box-shadow:0 0 0 4px rgba(var(--success-rgb),.1),0 0 12px rgba(var(--success-rgb),.33); animation:installLivePulse 1.8s ease-in-out infinite; }
.install-showcase__live small { margin:4px 0 0 14px; color:#74848c; font-size:.66rem; }

/* Mini My Ozark window */
.install-app { overflow:hidden; border:1px solid rgba(8,124,167,.24); border-radius:13px; background:#f7fbfd; box-shadow:inset 0 1px 0 #fff,0 18px 42px rgba(7,71,96,.12); }
.install-app__chrome { display:grid; grid-template-columns:minmax(170px,.7fr) minmax(310px,1.4fr) minmax(128px,.6fr); align-items:center; gap:18px; min-height:56px; padding:8px 12px; border-bottom:1px solid rgba(8,124,167,.15); background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(242,250,253,.96)); }
.install-app__brand { display:flex; align-items:center; gap:9px; min-width:0; }
.install-app__brand img { flex:0 0 auto; width:30px; height:30px; object-fit:contain; filter:drop-shadow(0 4px 8px rgba(8,124,167,.16)); }
.install-app__brand span,.install-app__brand strong,.install-app__brand small { display:block; min-width:0; }
.install-app__brand strong { color:var(--ink); font-size:.82rem; line-height:1.05; }
.install-app__brand small { margin-top:3px; color:#75858d; font-size:.6rem; letter-spacing:.04em; }
.install-app__phases { display:grid; grid-template-columns:auto minmax(28px,1fr) auto minmax(28px,1fr) auto; align-items:center; min-width:0; }
.install-app__phases button { appearance:none; display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:4px 8px; color:#71818a; border:1px solid transparent; border-radius:9px; background:transparent; cursor:pointer; transition:.25s ease; }
.install-app__phases button b { display:grid; width:23px; height:23px; place-items:center; color:#70818a; border:1px solid rgba(8,124,167,.17); border-radius:7px; background:#fff; font-size:.63rem; line-height:1; transition:inherit; }
.install-app__phases button span { font-size:.66rem; font-weight:800; }
.install-app__phases button.is-active { color:var(--ic-deep); border-color:rgba(8,124,167,.22); background:var(--ic-soft); box-shadow:inset 0 1px 0 #fff; }
.install-app__phases button.is-active b { color:#fff; border-color:var(--ic); background:linear-gradient(145deg,var(--ic-bright),var(--ic)); box-shadow:0 5px 12px rgba(8,124,167,.18); }
.install-app__phases button.is-complete b { color:#fff; border-color:var(--success-accent); background:var(--success-accent); }
.install-app__phases>i { position:relative; overflow:hidden; height:2px; margin:0 6px; border-radius:99px; background:#dbe7eb; }
.install-app__phases>i::after { position:absolute; inset:0; content:""; background:linear-gradient(90deg,var(--ic),var(--success-bright)); transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.16,1,.3,1); }
.install-app__phases>i.is-done::after { transform:scaleX(1); }
.install-app__controls { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.install-app__demo-pill { padding:5px 7px; color:var(--ic-deep); border:1px solid rgba(8,124,167,.16); border-radius:7px; background:#eef9fc; font-size:.56rem; font-weight:900; letter-spacing:.08em; }
.install-app__toggle { appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:68px; min-height:34px; padding:6px 9px; color:#42565f; border:1px solid rgba(8,124,167,.18); border-radius:8px; background:#fff; box-shadow:0 5px 14px rgba(8,124,167,.07); cursor:pointer; }
.install-app__toggle i { display:block; width:9px; height:11px; border-right:3px solid currentColor; border-left:3px solid currentColor; }
.install-showcase.is-paused .install-app__toggle i { width:0; height:0; border-top:6px solid transparent; border-right:0; border-bottom:6px solid transparent; border-left:9px solid currentColor; }
.install-app__toggle span { font-size:.62rem; font-weight:850; }
.install-app__phases button:focus-visible,.install-app__toggle:focus-visible,.install-showcase__cta:focus-visible { outline:3px solid rgba(144,221,243,.9)!important; outline-offset:3px; }

.install-app__body { display:grid; grid-template-columns:164px minmax(0,1fr); min-height:326px; }
.install-app__rail { display:flex; min-width:0; flex-direction:column; padding:16px 12px; border-right:1px solid rgba(8,124,167,.14); background:radial-gradient(circle at 30% 0,rgba(144,221,243,.17),transparent 42%),linear-gradient(180deg,#f8fcfe,#eef7fa); }
.install-app__rail-title { color:#73848c; font-size:.54rem; font-weight:900; letter-spacing:.09em; }
.install-app__script-card { display:grid; grid-template-columns:32px minmax(0,1fr); align-items:center; gap:8px; margin-top:8px; padding:10px 9px; border:1px solid rgba(var(--product-rgb),.24); border-radius:9px; background:linear-gradient(145deg,#fff,var(--product-soft)); box-shadow:inset 0 1px 0 #fff,0 7px 16px rgba(var(--product-rgb),.06); }
.install-app__script-card>span { display:grid; grid-row:1/span 2; width:32px; height:32px; place-items:center; color:var(--product-deep); border:1px solid rgba(var(--product-rgb),.25); border-radius:8px; background:#fff; font-size:.56rem; font-weight:950; }
.install-app__script-card strong,.install-app__script-card small { display:block; min-width:0; }
.install-app__script-card strong { align-self:end; overflow:hidden; color:#26343b; font-size:.68rem; text-overflow:ellipsis; white-space:nowrap; }
.install-app__script-card small { align-self:start; color:#7a8991; font-size:.55rem; }
.install-app__rail nav { display:grid; gap:5px; margin-top:14px; }
.install-app__rail nav span { display:flex; align-items:center; gap:8px; min-height:35px; padding:7px 8px; color:#718089; border:1px solid transparent; border-radius:8px; font-size:.62rem; font-weight:780; transition:.3s ease; }
.install-app__rail nav span i { position:relative; display:block; width:18px; height:18px; border:1px solid rgba(8,124,167,.19); border-radius:6px; background:#fff; }
.install-app__rail nav span i::after { position:absolute; inset:5px; content:""; border-radius:2px; background:currentColor; opacity:.55; }
.install-app__rail nav span.is-active { color:var(--ic-deep); border-color:rgba(8,124,167,.17); background:rgba(255,255,255,.8); }
.install-app__rail nav span.is-active i { color:#fff; border-color:var(--ic); background:var(--ic); }
.install-app__rail-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding:8px 9px; border:1px solid rgba(8,124,167,.13); border-radius:8px; background:rgba(255,255,255,.76); }
.install-app__rail-meta small { color:#798991; font-size:.56rem; }
.install-app__rail-meta strong { color:var(--ic-deep); font-size:.65rem; }

/* Animated screens */
.install-app__viewport { position:relative; min-width:0; min-height:326px; overflow:hidden; background:radial-gradient(circle at 92% 0,rgba(144,221,243,.16),transparent 30%),#fff; }
.install-app__screen { position:absolute; inset:0; z-index:0; min-width:0; padding:18px 20px; visibility:hidden; opacity:0; transform:translateY(10px) scale(.992); transition:opacity .42s ease,transform .52s cubic-bezier(.16,1,.3,1),visibility 0s linear .52s; }
.install-app__screen.is-active { z-index:1; visibility:visible; opacity:1; transform:none; transition-delay:0s; }
.install-screen__head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; }
.install-screen__head>div>span,.install-screen__head h3 { display:block; margin:0; }
.install-screen__head>div>span { color:#72828a; font-size:.52rem; font-weight:900; letter-spacing:.09em; }
.install-screen__head h3 { margin-top:3px; color:var(--ink); font-size:1rem; line-height:1.1; }
.install-screen__state { display:inline-flex; align-items:center; gap:6px; padding:6px 8px; color:var(--ic-deep); border:1px solid rgba(8,124,167,.16); border-radius:7px; background:#eef9fc; font-size:.53rem; letter-spacing:.06em; }
.install-screen__state i { width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px rgba(8,124,167,.09); }
.install-screen__state.is-ready { color:var(--success-deep); border-color:rgba(var(--success-rgb),.19); background:var(--success-soft); }
.install-app__screen.is-active .install-screen__state.is-linking i,.install-app__screen.is-active .install-screen__state.is-flashing:not(.is-verified) i { animation:installStatusPulse 1.2s ease-in-out infinite; }
.install-screen__state.is-flashing.is-verified { color:var(--success-deep); border-color:rgba(var(--success-rgb),.19); background:var(--success-soft); }

.install-programmer { display:grid; gap:11px; }
.install-programmer__summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:hidden; border:1px solid rgba(8,124,167,.14); border-radius:9px; background:#f8fcfd; }
.install-programmer__summary>span { min-width:0; padding:9px 10px; border-right:1px solid rgba(8,124,167,.11); }
.install-programmer__summary>span:last-child { border-right:0; }
.install-programmer__summary small,.install-programmer__summary strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.install-programmer__summary small { color:#7a8a92; font-size:.53rem; }
.install-programmer__summary strong { margin-top:2px; color:#33444c; font-size:.63rem; }
.install-programmer__controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.install-control { padding:10px; border:1px solid rgba(8,124,167,.13); border-radius:9px; background:linear-gradient(145deg,#fff,#f8fbfc); box-shadow:inset 0 1px 0 #fff,0 6px 15px rgba(8,91,122,.045); }
.install-control>span { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.install-control>span strong { overflow:hidden; color:#40515a; font-size:.59rem; text-overflow:ellipsis; white-space:nowrap; }
.install-control>span>b { color:var(--product-deep); font-size:.62rem; white-space:nowrap; }
.install-control>span>b small { font-size:.46rem; }
.install-control>i { position:relative; display:block; height:4px; margin-top:13px; border-radius:99px; background:#e2e9ec; }
.install-control>i em { position:absolute; inset:0 auto 0 0; width:var(--fill,55%); border-radius:inherit; background:linear-gradient(90deg,var(--ic-bright),var(--product-accent)); transform:scaleX(0); transform-origin:left; }
.install-control>i b { position:absolute; top:50%; left:var(--fill,55%); width:10px; height:10px; border:2px solid #fff; border-radius:50%; background:var(--product-accent); box-shadow:0 1px 5px rgba(var(--product-rgb),.3); opacity:0; transform:translate(-50%,-50%); }
.install-control--release { --fill:62%; } .install-control--tempo { --fill:47%; } .install-control--button { --fill:38%; }
.install-app__screen.is-active .install-control>i em { animation:installSliderLoad 1.25s .22s cubic-bezier(.16,1,.3,1) forwards; }
.install-app__screen.is-active .install-control:nth-child(2)>i em { animation-delay:.38s; } .install-app__screen.is-active .install-control:nth-child(3)>i em { animation-delay:.54s; }
.install-app__screen.is-active .install-control>i b { animation:installThumbIn .32s 1.2s ease forwards; }
.install-programmer__handoff { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:42px; padding:7px 10px; color:#fff; border-radius:9px; background:linear-gradient(110deg,var(--ic-deep),var(--ic-bright)); box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 8px 19px rgba(8,124,167,.18); }
.install-programmer__handoff>span,.install-programmer__handoff>strong { display:flex; align-items:center; gap:6px; }
.install-programmer__handoff>span { font-size:.56rem; opacity:.9; } .install-programmer__handoff>strong { font-size:.63rem; }
.install-programmer__handoff>span i { display:grid; width:16px; height:16px; place-items:center; border-radius:50%; background:rgba(255,255,255,.18); font-style:normal; }
.install-app__screen.is-active .install-programmer__handoff>strong b { font-size:.88rem; animation:installArrowNudge 1.4s ease-in-out infinite; }

/* Connection screen */
.install-connect { display:grid; grid-template-columns:minmax(180px,1fr) 90px minmax(140px,.72fr); grid-template-rows:minmax(150px,1fr) auto; align-items:center; gap:12px; min-height:244px; }
.install-connect__browser,.install-connect__zen { position:relative; overflow:hidden; border:1px solid rgba(8,124,167,.17); background:#fff; box-shadow:0 11px 28px rgba(8,91,122,.09); }
.install-connect__browser { min-height:124px; border-radius:10px; }
.install-connect__browser>span { display:flex; align-items:center; gap:4px; min-height:30px; padding:6px 8px; border-bottom:1px solid rgba(8,124,167,.12); background:#f1f8fa; }
.install-connect__browser>span>i { width:5px; height:5px; border-radius:50%; background:#afc2ca; }
.install-connect__browser>span small { overflow:hidden; margin-left:5px; padding:3px 7px; color:#71828a; border-radius:5px; background:#fff; font-size:.48rem; text-overflow:ellipsis; white-space:nowrap; }
.install-connect__browser>div { display:grid; grid-template-columns:36px minmax(0,1fr); align-items:center; gap:10px; padding:18px 14px; }
.install-connect__browser img { grid-row:1/span 2; width:30px; height:30px; object-fit:contain; }
.install-connect__browser strong,.install-connect__browser small { display:block; }
.install-connect__browser strong { color:#273940; font-size:.68rem; } .install-connect__browser small { margin-top:2px; color:var(--success-deep); font-size:.55rem; }
.install-connect__link { position:relative; display:flex; align-items:center; justify-content:center; min-width:0; height:24px; }
.install-connect__link::before { display:block; width:100%; height:4px; border-radius:99px; background:#d6e6eb; content:""; }
.install-connect__link::after { position:absolute; left:0; display:block; width:28%; height:4px; border-radius:99px; background:linear-gradient(90deg,transparent,var(--ic-bright),#fff,var(--ic)); box-shadow:0 0 10px rgba(25,168,209,.38); content:""; }
.install-app__screen.is-active .install-connect__link::after { animation:installCableTravel 1.15s linear infinite; }
.install-connect__link>i { position:absolute; z-index:1; left:50%; width:11px; height:15px; border:2px solid var(--ic); border-radius:4px; background:#fff; transform:translateX(-50%); }
.install-connect__link>span { position:absolute; top:16px; color:#73848c; font-size:.47rem; font-weight:900; letter-spacing:.08em; }
.install-connect__zen { min-height:128px; padding:10px; border-radius:10px; background:linear-gradient(145deg,#1a1920,#0e0d12); }
.install-connect__zen>span { display:flex; align-items:center; justify-content:space-between; color:#dcd8e4; }
.install-connect__zen>span small { font-size:.5rem; font-weight:900; } .install-connect__zen>span i { width:6px; height:6px; border-radius:50%; background:var(--success-bright); box-shadow:0 0 10px rgba(var(--success-rgb),.78); }
.install-app__screen.is-active .install-connect__zen>span i { animation:installZenLed 1.4s ease-in-out infinite; }
.install-connect__zen>div { display:grid; min-height:70px; margin-top:8px; place-items:center; align-content:center; border:1px solid #3c3545; border-radius:7px; background:#0b0910; box-shadow:inset 0 0 16px rgba(var(--product-rgb),.08); }
.install-connect__zen>div small,.install-connect__zen>div strong,.install-connect__zen>div em { display:block; }
.install-connect__zen>div small { color:#746c7b; font-size:.43rem; } .install-connect__zen>div strong { margin:2px 0; color:#fff; font-size:.78rem; } .install-connect__zen>div em { color:var(--success-bright); font-size:.48rem; font-style:normal; font-weight:900; }
.install-connect__zen>b { display:flex; justify-content:center; gap:6px; margin-top:7px; } .install-connect__zen>b i { width:4px; height:4px; border:1px solid #605a67; border-radius:50%; }
.install-connect__checks { display:grid; grid-column:1/-1; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.install-connect__checks>span { display:flex; align-items:center; gap:6px; min-width:0; min-height:36px; padding:7px 9px; color:#75868e; border:1px solid rgba(8,124,167,.12); border-radius:8px; background:#f8fbfc; font-size:.56rem; opacity:.58; transform:translateY(5px); }
.install-connect__checks>span i { display:grid; flex:0 0 auto; width:17px; height:17px; place-items:center; color:#fff; border-radius:50%; background:var(--success-accent); font-size:.52rem; font-style:normal; }
.install-app__screen.is-active .install-connect__checks>span { animation:installCheckIn .42s .45s ease forwards; }
.install-app__screen.is-active .install-connect__checks>span:nth-child(2) { animation-delay:.82s; } .install-app__screen.is-active .install-connect__checks>span:nth-child(3) { animation-delay:1.18s; }

/* Flash screen */
.install-flash { display:grid; gap:12px; }
.install-flash__slots { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.install-flash__slots>span { display:grid; min-height:64px; align-content:center; padding:9px 10px; border:1px solid rgba(8,124,167,.13); border-radius:9px; background:#f8fbfc; }
.install-flash__slots>span.is-selected { border-color:rgba(var(--product-rgb),.3); background:linear-gradient(145deg,#fff,var(--product-soft)); box-shadow:inset 0 1px 0 #fff,0 7px 18px rgba(var(--product-rgb),.07); }
.install-flash__slots small,.install-flash__slots strong,.install-flash__slots em { display:block; }
.install-flash__slots small { color:#7b8a91; font-size:.48rem; } .install-flash__slots strong { margin:2px 0; color:#35464e; font-size:.7rem; } .install-flash__slots em { color:#8c9aa1; font-size:.46rem; font-style:normal; }
.install-flash__slots .is-selected strong { color:var(--product-deep); } .install-flash__slots .is-selected em { color:var(--product-deep); font-weight:900; }
.install-flash__progress { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:6px 12px; padding:9px 10px; border:1px solid rgba(8,124,167,.13); border-radius:9px; background:#fff; }
.install-flash__progress>span { position:relative; display:block; grid-column:1/-1; overflow:hidden; height:6px; border-radius:99px; background:#e4edf0; }
.install-flash__progress>span i { position:absolute; inset:0 auto 0 0; width:100%; border-radius:inherit; background:linear-gradient(90deg,var(--ic-deep),var(--ic-bright),var(--product-accent)); transform:scaleX(0); transform-origin:left; }
.install-app__screen.is-active .install-flash__progress>span i { animation:installFlashFill 2.5s .2s cubic-bezier(.22,.76,.2,1) forwards; }
.install-flash__progress>strong { color:#4c5f68; font-size:.56rem; } .install-flash__progress>b { display:none; }
.install-flash__timeline { display:grid; grid-template-columns:auto minmax(20px,1fr) auto minmax(20px,1fr) auto; align-items:center; padding:0 4px; }
.install-flash__timeline>span { display:grid; grid-template-columns:22px auto; align-items:center; gap:6px; color:#788890; }
.install-flash__timeline>span i { display:grid; width:22px; height:22px; place-items:center; color:#fff; border-radius:50%; background:#b3c1c7; font-size:.55rem; font-style:normal; }
.install-flash__timeline>span small { font-size:.5rem; white-space:nowrap; }
.install-flash__timeline>span.is-done i,.install-flash__timeline>span.is-current i { background:var(--success-accent); }
.install-flash__timeline>span.is-current i { box-shadow:0 0 0 4px rgba(var(--success-rgb),.1); }
.install-app__screen.is-active .install-flash__timeline>span.is-current i { animation:installStatusPulse 1.2s ease-in-out infinite; }
.install-flash__timeline>b { height:2px; margin:0 7px; border-radius:99px; background:linear-gradient(90deg,var(--success-accent),rgba(var(--success-rgb),.18)); }
.install-flash__receipt { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; padding:8px 10px; color:var(--success-deep); border:1px solid rgba(var(--success-rgb),.22); border-radius:9px; background:linear-gradient(145deg,#fff,var(--success-soft)); opacity:0; transform:translateY(6px); }
.install-flash__receipt>span { display:flex; align-items:center; gap:7px; } .install-flash__receipt>span i { display:grid; width:20px; height:20px; place-items:center; color:#fff; border-radius:50%; background:var(--success-accent); font-size:.55rem; font-style:normal; }
.install-flash__receipt b { font-size:.57rem; letter-spacing:.05em; } .install-flash__receipt small { color:#53666f; font-size:.51rem; }
.install-app__screen.is-active .install-flash__receipt { animation:installReceiptIn .5s 2.55s ease forwards; }

/* Footer */
.install-showcase__foot { display:grid; grid-template-columns:minmax(0,1fr) minmax(250px,.55fr); align-items:center; gap:14px; margin-top:14px; }
.install-showcase__benefits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0; padding:0; list-style:none; }
.install-showcase__benefits li { display:flex; align-items:center; gap:7px; min-width:0; min-height:42px; padding:8px 10px; color:#50636c; border:1px solid rgba(8,124,167,.13); border-radius:9px; background:rgba(255,255,255,.78); font-size:.59rem; font-weight:720; }
.install-showcase__benefits li span { display:grid; flex:0 0 auto; width:18px; height:18px; place-items:center; color:#fff; border-radius:50%; background:var(--success-accent); font-size:.5rem; }
.install-showcase__cta { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:54px; padding:8px 11px; color:var(--ic-deep)!important; border:1px solid rgba(8,124,167,.22); border-radius:10px; background:linear-gradient(145deg,#fff,#eaf8fc); box-shadow:inset 0 1px 0 #fff,0 8px 22px rgba(8,124,167,.1); text-decoration:none!important; transition:.24s ease; }
.install-showcase__cta img { width:34px; height:34px; object-fit:contain; filter:drop-shadow(0 4px 8px rgba(8,124,167,.15)); }
.install-showcase__cta span,.install-showcase__cta small,.install-showcase__cta strong { display:block; }
.install-showcase__cta small { color:#70828a; font-size:.53rem; } .install-showcase__cta strong { margin-top:2px; color:var(--ic-deep); font-size:.7rem; } .install-showcase__cta>b { font-size:1rem; transition:transform .24s ease; }
.install-showcase__cta:hover,.install-showcase__cta:focus-visible { transform:translateY(-2px); box-shadow:inset 0 1px 0 #fff,0 12px 28px rgba(8,124,167,.15); }
.install-showcase__cta:hover>b,.install-showcase__cta:focus-visible>b { transform:translateX(3px); }

@keyframes installLivePulse { 0%,100%{opacity:.64;transform:scale(.86)} 50%{opacity:1;transform:scale(1)} }
@keyframes installStatusPulse { 0%,100%{opacity:.62;transform:scale(.8)} 50%{opacity:1;transform:scale(1)} }
@keyframes installSliderLoad { from{transform:scaleX(.06)} to{transform:scaleX(1)} }
@keyframes installThumbIn { from{opacity:0;transform:translate(-50%,-50%) scale(.6)} to{opacity:1;transform:translate(-50%,-50%) scale(1)} }
@keyframes installArrowNudge { 0%,100%{transform:translateX(0)} 50%{transform:translateX(3px)} }
@keyframes installCableTravel { from{transform:translateX(-30%)} to{transform:translateX(360%)} }
@keyframes installZenLed { 0%,100%{opacity:.5;transform:scale(.86)} 50%{opacity:1;transform:scale(1)} }
@keyframes installCheckIn { from{opacity:.4;transform:translateY(5px)} to{opacity:1;transform:translateY(0);color:var(--success-deep);border-color:rgba(var(--success-rgb),.18);background:var(--success-soft)} }
@keyframes installFlashFill { from{transform:scaleX(.02)} to{transform:scaleX(1)} }
@keyframes installReceiptIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

/* Keep compositor work off when paused, offscreen, or in a background tab. */
.install-showcase :is(.install-showcase__live span i,.install-screen__state i,.install-programmer__handoff>strong b,.install-connect__link::after,.install-connect__zen>span i,.install-connect__checks>span,.install-control>i em,.install-control>i b,.install-flash__progress>span i,.install-flash__timeline>span.is-current i,.install-flash__receipt) { animation-play-state:paused!important; }
.install-showcase.is-running:not(.is-paused) :is(.install-showcase__live span i,.install-app__screen.is-active .install-screen__state i,.install-app__screen.is-active .install-programmer__handoff>strong b,.install-app__screen.is-active .install-connect__link::after,.install-app__screen.is-active .install-connect__zen>span i,.install-app__screen.is-active .install-connect__checks>span,.install-app__screen.is-active .install-control>i em,.install-app__screen.is-active .install-control>i b,.install-app__screen.is-active .install-flash__progress>span i,.install-app__screen.is-active .install-flash__timeline>span.is-current i,.install-app__screen.is-active .install-flash__receipt) { animation-play-state:running!important; }

@media (max-width:900px) {
  .install-app__chrome { grid-template-columns:minmax(145px,.7fr) minmax(280px,1.35fr) auto; gap:10px; }
  .install-app__body { grid-template-columns:142px minmax(0,1fr); }
  .install-app__screen { padding:16px; }
  .install-showcase__foot { grid-template-columns:1fr; }
}
@media (max-width:720px) {
  .product-page .install-showcase .pnp-hero { padding:26px 20px 22px; }
  .install-showcase__head { align-items:flex-start; } .install-showcase__live { display:none; }
  .install-app__chrome { grid-template-columns:auto 1fr auto; } .install-app__brand span { display:none; } .install-app__demo-pill { display:none; }
  .install-app__body { grid-template-columns:1fr; min-height:356px; } .install-app__rail { display:none; } .install-app__viewport { min-height:356px; }
}
@media (max-width:560px) {
  .install-showcase__head { margin-bottom:15px; }
  .product-page .install-showcase .pnp-title { font-size:1.42rem; } .product-page .install-showcase .pnp-sub { font-size:.78rem; }
  .install-app__chrome { gap:6px; padding:7px; } .install-app__brand img { width:27px; height:27px; }
  .install-app__phases { grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; } .install-app__phases>i { display:none; }
  .install-app__phases button { justify-content:center; min-width:0; min-height:38px; padding:4px; } .install-app__phases button span { display:none; }
  .install-app__toggle { min-width:40px; min-height:40px; padding:6px; } .install-app__toggle span { display:none; }
  .install-app__body,.install-app__viewport { min-height:414px; } .install-app__screen { padding:14px 12px; } .install-screen__head { margin-bottom:11px; }
  .install-programmer__summary>span { padding:8px 6px; } .install-programmer__controls { grid-template-columns:1fr; gap:6px; }
  .install-control { padding:8px 9px; } .install-control>i { margin-top:8px; }
  .install-programmer__handoff { align-items:flex-start; flex-direction:column; gap:5px; }
  .install-connect { grid-template-columns:minmax(140px,1fr) 54px minmax(108px,.72fr); grid-template-rows:minmax(150px,1fr) auto; gap:8px; }
  .install-connect__browser>div { grid-template-columns:28px minmax(0,1fr); gap:6px; padding:16px 9px; }
  .install-connect__browser img { width:26px; height:26px; } .install-connect__browser strong { font-size:.58rem; }
  .install-connect__link>span { display:none; } .install-connect__zen { padding:8px; }
  .install-connect__checks { grid-template-columns:1fr; gap:5px; } .install-connect__checks>span { min-height:31px; padding:5px 7px; }
  .install-flash__timeline>span { grid-template-columns:22px; justify-items:center; } .install-flash__timeline>span small { margin-top:4px; text-align:center; white-space:normal; }
  .install-flash__receipt { align-items:flex-start; flex-direction:column; gap:4px; }
  .install-showcase__benefits { grid-template-columns:1fr; gap:6px; }
}
@media (max-width:390px) {
  .product-page .install-showcase .pnp-hero { padding:22px 13px 18px; }
  .install-app__body,.install-app__viewport { min-height:430px; }
  .install-screen__state { padding:5px 6px; font-size:.46rem; }
  .install-connect { grid-template-columns:minmax(126px,1fr) 34px minmax(96px,.68fr); }
  .install-flash__slots>span { min-height:58px; padding:7px; }
}
@media (prefers-reduced-motion:reduce) {
  .install-showcase__live span i,.install-screen__state i,.install-programmer__handoff>strong b,.install-connect__link::after,.install-connect__zen>span i,.install-flash__timeline>span.is-current i { animation:none!important; }
  .install-app__screen { transform:none!important; transition:opacity .12s linear,visibility 0s linear .12s!important; }
  .install-app__screen.is-active { transition-delay:0s!important; }
  .install-control>i em,.install-control>i b,.install-connect__checks>span,.install-flash__progress>span i,.install-flash__receipt { animation-duration:.01ms!important; animation-delay:0s!important; }
}
@media (prefers-reduced-transparency:reduce) {
  .product-page .install-showcase .pnp-hero,.install-app__chrome,.install-app__rail,.install-showcase__benefits li { background-color:#fff!important; background-image:none!important; }
}