/* Route-local adaptations; the approved partner stylesheet stays unchanged. */
.demo-opening{position:relative;isolation:isolate;background:#fff}
/* The landing page's scenic asset and single blue-to-white overlay, spanning
   the logo, introduction, and upper demo instead of a separate header bar. */
.demo-opening::before{
  content:"";position:absolute;inset:0 0 auto;height:min(100%,1100px);z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(28,154,230,.98) 0%,rgba(35,160,232,.92) 19%,
    rgba(49,169,235,.58) 40%,rgba(116,201,244,.31) 58%,
    rgba(189,228,249,.24) 70%,rgba(230,245,253,.48) 80%,
    rgba(248,252,255,.78) 91%,#fff 100%),
    url('/hero-background.png') center 35% / cover,#249fe8;
  background:linear-gradient(to bottom,
    rgba(28,154,230,.98) 0%,rgba(35,160,232,.92) 19%,
    rgba(49,169,235,.58) 40%,rgba(116,201,244,.31) 58%,
    rgba(189,228,249,.24) 70%,rgba(230,245,253,.48) 80%,
    rgba(248,252,255,.78) 91%,#fff 100%),
    image-set(url('/hero-background.webp') type('image/webp'),url('/hero-background.png') type('image/png')) center 35% / cover,#249fe8;
}
.demo-header{color:#fff}
.demo-opening .section-heading h2{color:#fff;text-wrap:balance}
.demo-opening .experience .section-heading p{color:rgba(255,255,255,.96)}
.demo-opening .experience .section-heading p strong{color:#fff;margin-top:18px}
/* Close the copy-to-demo gap by 28px after removing the top button. */
.demo-opening .section-heading{margin-bottom:112px}
#live-demo,main section{scroll-margin-top:24px}
.opportunity-section{padding:88px 24px}
.opportunity-inner h2{text-wrap:balance}
.opportunity-inner p strong{display:block;margin-top:12px;color:#d7e8f4;font-weight:600}
@media(max-width:640px){
  .demo-opening .section-heading{margin-bottom:86px}
  .opportunity-section{padding:70px 18px}
}
.demo-booking{margin:44px auto 0;text-align:center}
/* Scoped copy of /apply's approved primary CTA, including its final sizing. */
.demo-build-cta{
  position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;width:min(310px,100%);min-height:76px;
  margin:0 auto;padding:0 30px;gap:12px;border-radius:12px;
  background:linear-gradient(135deg,#35aff1,#147ee8);border:1px solid rgba(255,255,255,.35);
  box-shadow:0 18px 44px rgba(36,159,232,.30);color:#fff;text-decoration:none;
  font-size:18px;font-weight:700;letter-spacing:.03em;
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}
.demo-build-cta::before{content:"";position:absolute;inset:-7px;border-radius:inherit;background:rgba(78,192,255,.34);filter:blur(16px);opacity:0;z-index:-1;pointer-events:none;transition:opacity .2s ease}
.demo-build-cta:focus-visible{outline:3px solid #147ee8;outline-offset:5px}
@media(hover:hover) and (pointer:fine){
  .demo-build-cta:hover::before{opacity:1}
  .demo-build-cta:hover{transform:translateY(-2px) scale(1.015);filter:saturate(1.08);box-shadow:0 17px 40px rgba(36,159,232,.34),0 0 0 6px rgba(36,159,232,.07)}
}
@media(max-width:700px){
  .demo-build-cta{width:min(280px,100%);min-height:64px;padding:0 24px;font-size:16px}
  .demo-booking{margin-top:36px}
}
@media(prefers-reduced-motion:reduce){
  .demo-build-cta,.demo-build-cta::before{transition:none}
  .demo-build-cta:hover{transform:none}
}
/* Contain the existing mobile card rail's negative margins at the page edge. */
.proof-section{overflow-x:clip}
.hosted-demo-frame{aspect-ratio:auto;min-height:0}
.hosted-demo{display:block;width:100%;height:clamp(680px,80svh,960px);border:0;background:#0b0f15}
@media(max-width:900px){
  .hosted-demo{height:clamp(680px,85svh,900px)}
}
@media(max-width:640px){
  .hosted-demo{height:clamp(640px,85svh,800px)}
}

/* One restrained rhythm below the opening; shared route styles stay untouched. */
.demo-section{
  --demo-width:1160px;--demo-border:#e7ebf0;--demo-radius:18px;
  --demo-muted:#657183;--demo-dark-muted:#a7b3c2;
  padding:88px 24px;
}
.demo-section .section-heading,
.opportunity-inner,.final-inner{width:min(850px,100%)}
.demo-section .section-heading{margin-bottom:40px}
.demo-section h2{font-size:clamp(40px,4.6vw,64px);line-height:1.04;letter-spacing:-.045em;text-wrap:balance;margin-top:0}
.demo-section .kicker{font-size:11px;letter-spacing:.14em;margin-bottom:18px}
.demo-section .section-heading p,
.opportunity-inner p,.final-inner p{width:min(650px,100%);max-width:650px;font-size:16px;line-height:1.6;margin:20px auto 0;text-wrap:pretty}
.demo-section .section-heading p{color:var(--demo-muted)}
.proof-section,.partnership-system{background:#fff}
.proof-section{border-top:1px solid var(--demo-border)}
.opportunity-section,.final-section{background:#0b0f15}
.opportunity-inner p,.final-inner p{color:var(--demo-dark-muted)}
.opportunity-glow{opacity:.35}
.final-section::before{opacity:.35}
.case-grid,.partnership-system .system-grid{width:min(var(--demo-width),100%);margin:0 auto;padding:0;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;scroll-snap-type:none}
.case-card,.partnership-system .system-card{border:1px solid var(--demo-border);border-radius:var(--demo-radius);padding:24px;min-height:0;height:100%;background:#fff;box-shadow:0 6px 20px rgba(17,31,45,.035)}
.case-card{scroll-snap-align:none}
.case-result{margin-top:24px}
.case-copy{color:var(--demo-muted);margin-top:16px}
.case-card blockquote{margin-top:auto;padding-top:18px;padding-bottom:0}
.case-copy{margin-bottom:22px}
.partnership-system .system-card h3{margin-top:24px;font-size:22px;line-height:1.15;text-wrap:balance}
.partnership-system .system-card p{font-size:14px;line-height:1.6;color:var(--demo-muted);margin-top:12px}
.system-no{font-size:11px;letter-spacing:.08em}
.partnership-system .partnership-loop{width:min(var(--demo-width),100%);margin:24px auto 0;padding:20px 24px;border:1px solid var(--demo-border);border-radius:var(--demo-radius);background:#f8fafc;box-shadow:none;font-size:12px;gap:16px}
.final-section{min-height:0;padding-bottom:28px}
.final-section .final-cta{margin-top:28px}
.final-section footer{width:min(var(--demo-width),100%);margin-top:64px}
.floating-cta-shell{
  position:fixed;right:28px;bottom:calc(56px + env(safe-area-inset-bottom,0px));z-index:50;
  max-width:calc(100% - 32px);pointer-events:none;opacity:0;transform:translateY(10px);
  transition:opacity .24s cubic-bezier(.22,1,.36,1),transform .24s cubic-bezier(.22,1,.36,1);
}
.floating-cta-shell.is-visible{opacity:1;transform:none}
.floating-build-cta.demo-build-cta{width:auto;min-height:66px;padding:4px 28px;margin:0;border-radius:12px;font-size:15px;pointer-events:none}
.floating-cta-shell.is-visible .floating-build-cta{pointer-events:auto}
@media(max-width:900px){
  .demo-section{padding:72px 20px}
  .case-grid,.partnership-system .system-grid{grid-template-columns:1fr;overflow:visible}
  .case-card blockquote{margin-top:0}
  .partnership-system .partnership-loop{flex-wrap:wrap}
}
@media(max-width:640px){
  .demo-section{padding:64px 18px}
  .demo-section h2{font-size:38px}
  .demo-section .section-heading{margin-bottom:32px}
  .demo-section .section-heading p,.opportunity-inner p,.final-inner p{font-size:15px}
  .case-card,.partnership-system .system-card{padding:22px}
  .partnership-system .partnership-loop{display:flex;flex-direction:column;gap:10px;padding:20px}
  .partnership-system .partnership-loop i{display:block;transform:rotate(90deg)}
  .partnership-system .partnership-loop i:nth-of-type(2){display:block}
  .final-section{padding-bottom:24px}
  .final-section footer{margin-top:48px}
  .floating-cta-shell{right:16px;bottom:calc(44px + env(safe-area-inset-bottom,0px))}
  .floating-build-cta.demo-build-cta{min-height:59px;padding:4px 24px;font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  .floating-cta-shell{transition:none;transform:none}
}

/* Homepage entry curves and observer cadence, with a restrained 16px distance.
   Only wrappers receive entry transforms; button hover and iframe input stay independent. */
.demo-hero-support{display:inline-block;vertical-align:top}
.demo-entry{
  opacity:0;transform:translateY(16px);
  transition:opacity .72s cubic-bezier(.22,1,.36,1),transform .82s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--entry-delay,0s);
}
.demo-entry.demo-hero-entry{transition-timing-function:cubic-bezier(.16,1,.3,1)}
.demo-entry.demo-entry-visible{opacity:1;transform:none}
.hosted-demo-frame.demo-entry{transform:none}
.demo-action-reveal{display:flow-root}
.final-section .final-cta{margin-top:24px}
@media(prefers-reduced-motion:reduce){
  .demo-entry{opacity:1;transform:none;transition:none}
}