/* Scoped navigation and supporting-page polish. Product scenes stay unchanged. */
.skip-link{position:fixed;top:12px;left:12px;z-index:10000;padding:12px 20px;border:2px solid currentColor;border-radius:8px;background:var(--paper,#f5f0e8);color:var(--ink,#272623);transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}
.info-actions{display:flex;align-items:center;gap:20px}
.info-actions button{min-width:44px;min-height:44px;background:transparent;color:inherit;border:1px solid var(--line);border-radius:50%;cursor:pointer;font-size:20px}
.page-contents{display:block;margin:28px 0 36px;padding:20px 0;border-block:1px solid var(--line)}
.page-contents strong{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}
.page-contents div{display:flex;flex-wrap:wrap;gap:8px 20px}
.page-contents a{font-size:14px;text-underline-offset:4px;padding:5px 0}
.restored-info section{scroll-margin-top:110px}
.restored-info p,.restored-info li{overflow-wrap:anywhere}
.partner-policy-details{margin-top:28px;padding:20px 0;border-top:1px solid var(--line);scroll-margin-top:110px}
.partner-policy-details summary{cursor:pointer;font-weight:600;padding:8px 0}
.partner-policy-details p{max-width:78ch;font-size:14px;line-height:1.7;margin-top:16px}
.partner-policy-details a{text-decoration:underline;text-underline-offset:3px}
.info-actions a:focus-visible,.info-actions button:focus-visible,.page-contents a:focus-visible,.partner-policy-details summary:focus-visible{outline:2px solid currentColor;outline-offset:5px}
@media(max-width:650px){.info-actions{gap:10px}.info-actions a{font-size:13px}.page-contents div{display:grid;gap:4px}.page-contents a{padding:8px 0}.partner-policy-details{margin-top:20px}.restored-info-footer a{padding:8px 0}}

/* Actual storefront demo: the supplied renderer stays inside its own document. */
.live-demo-store{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(360px,460px);gap:24px;padding:32px!important;align-items:center;min-height:0!important}
.demo-editorial{padding:24px 12px;max-width:480px;color:var(--ink)}
.demo-eyebrow{font-size:11px;font-weight:600;letter-spacing:.13em}
.demo-editorial h3{font-family:var(--serif,Georgia,serif);font-size:clamp(36px,4vw,64px);line-height:1.08;letter-spacing:-.04em;margin:22px 0}
.demo-editorial>p{font-size:18px;line-height:1.7;max-width:30ch}
.demo-instructions{margin:40px 0 24px;padding-top:24px;border-top:1px solid var(--line)}
.demo-instructions p{font-size:16px;line-height:1.7;max-width:30ch;margin:12px 0}
.demo-instructions blockquote{margin:20px 0;padding:16px 20px;border-left:3px solid var(--store-accent,#51368b);background:var(--paper,#f5f0e8);border-radius:0 12px 12px 0;font-size:16px}
.demo-instructions small{display:block;font-size:12px;line-height:1.7;max-width:42ch;opacity:.75}
.embedded-demo{min-width:0;border-radius:24px;background:var(--store-surface,#edf0e5);overflow:hidden}
.embedded-demo iframe{width:100%;height:780px;display:block;border:0}
.storefront-demo-dialog{box-sizing:border-box;position:fixed;inset:auto 20px 20px auto;margin:0;padding:0;width:min(500px,calc(100vw - 32px));height:min(880px,calc(100dvh - 40px));max-width:none;max-height:none;border:1px solid var(--line,#ddd);border-radius:24px;background:var(--paper,#f5f0e8);color:var(--ink,#272623);overflow:hidden;box-shadow:0 24px 100px #0003}
.storefront-demo-dialog[open]{display:flex;flex-direction:column}
.storefront-demo-dialog::backdrop{background:#17111f66;backdrop-filter:blur(3px)}
.demo-dialog-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line,#ddd);flex-shrink:0}
.demo-dialog-bar strong,.demo-dialog-bar small{display:block}.demo-dialog-bar small{font-size:11px;opacity:.75;margin-top:3px}
.demo-dialog-bar button{border:1px solid var(--line,#ddd);border-radius:50%;background:transparent;color:inherit;font-size:25px;width:44px;height:44px;flex-shrink:0;cursor:pointer}
.storefront-demo-dialog iframe{border:0;width:100%;flex:1;min-height:0;display:block}
.floating-kinder{bottom:max(20px,env(safe-area-inset-bottom))!important}
.partner-benefits-detail{margin-top:28px;border-top:1px solid var(--line);padding:20px 0}
.partner-benefits-detail>summary{cursor:pointer;font-weight:600;padding:8px 0}
.partner-benefits-detail .partner-reasons{margin-top:24px}
.partner-section .partner-copy h2{font-size:clamp(40px,4.7vw,68px);line-height:1.08}
.partner-section .partner-copy>p{max-width:38ch;line-height:1.7}
.platform-heading>p{max-width:44ch;line-height:1.7}
#pricing .currency-picks{display:none}
.pricing-section .pricing-currency.sr-only{position:static!important;width:auto!important;height:auto!important;overflow:visible!important;clip:auto!important;clip-path:none!important;white-space:normal!important;margin:0!important}
.pricing-currency select{font:inherit;border:1px solid var(--line);border-radius:10px;padding:10px 14px;background:var(--paper);color:var(--ink);min-height:44px}
@media(max-width:900px){.live-demo-store{grid-template-columns:1fr!important;padding:20px!important;gap:12px}.demo-editorial{max-width:none;padding:12px}.demo-editorial h3{margin:16px 0;font-size:40px}.demo-instructions{margin:24px 0 16px}.embedded-demo{width:min(100%,480px);justify-self:center}.brand-controls{gap:12px;flex-wrap:wrap}.brand-presets{flex-wrap:wrap}}
@media(max-width:540px){.live-demo-store{padding:8px!important}.embedded-demo iframe{height:740px}.brand-presets button{min-height:44px}.brand-custom{min-height:44px}.demo-dialog-bar{padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top))}.floating-kinder{right:14px!important}.pricing-controls{align-items:stretch;gap:16px;flex-wrap:wrap}.pricing-currency{display:flex;align-items:center;gap:12px}.partner-benefits-detail .partner-reasons{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.storefront-demo-dialog,.floating-kinder{animation:none!important;transition:none!important}}
/* Compact corner chat expands with the widget's own control into a full-height sidebar. */
.storefront-demo-dialog{width:min(420px,calc(100vw - 24px));height:min(740px,calc(100dvh - 32px));inset:auto 12px 12px auto;border:0;background:transparent;box-shadow:0 20px 70px #0002;z-index:10000}
.storefront-demo-dialog.is-expanded{inset:0 0 0 auto;width:min(480px,100vw);height:100dvh;border-radius:0}
.storefront-demo-dialog iframe{height:100%;background:var(--paper,#f5f0e8)}
.floating-kinder[hidden]{display:none!important}
@media(max-width:540px){
 .storefront-demo-dialog{width:calc(100vw - 24px);height:min(640px,76svh);inset:auto 12px max(12px,env(safe-area-inset-bottom)) auto;border-radius:24px}
 .storefront-demo-dialog.is-expanded{width:100vw;height:100dvh;inset:0;border-radius:0}
 .embedded-demo iframe{height:min(700px,76svh)}
}
/* Fullscreen is opt-in; the original iframe stays alive and restores in place. */
#storefront-demo-frame.is-expanded{position:fixed!important;inset:0 0 0 auto!important;width:min(480px,100vw)!important;height:100dvh!important;max-width:none!important;max-height:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;z-index:10001;background:var(--paper,#f5f0e8)}
.demo-fullscreen-ancestor{transform:none!important;filter:none!important;perspective:none!important;contain:none!important;overflow:visible!important}


.storefront-demo-dialog.is-expanded{top:var(--demo-viewport-top,0px);bottom:auto;height:var(--demo-viewport-height,100dvh)}
#storefront-demo-frame.is-expanded{top:var(--demo-viewport-top,0px)!important;bottom:auto!important;height:var(--demo-viewport-height,100dvh)!important}

/* Keep hero actions clear of the illustration at every breakpoint. */
#story .hero-scene{margin-top:clamp(36px,4vw,64px)}
#story .hero-cta{flex-wrap:wrap;row-gap:16px}
#story .two-sides{margin-top:28px}
#pricing .pricing-controls{margin-top:24px}
#pricing .pricing-status{margin-bottom:8px;min-height:0}
#pricing .currency-reference{margin-top:8px}
#partners .calculator-details{margin-top:20px;border-top:1px solid var(--line);padding-top:12px}
#partners .calculator-details summary{cursor:pointer;font-size:12px;font-weight:600;padding:8px 0}
#partners .calculator-details summary:focus-visible{outline:2px solid currentColor;outline-offset:4px}
#partners .calculator-details #ref-formula{border-top:0;padding-top:0}
@media(max-width:650px){#story .hero-scene{margin-top:36px}#story .two-sides{margin-top:20px}}

/* Pricing lives on a light lilac surface in both themes. */
#pricing .billing-toggle{background:#fffdf8;border-color:#513695}
#pricing .billing-toggle button{color:#272623;background:transparent}
#pricing .billing-toggle button[aria-pressed="true"]{background:#513695;color:#fffdf8;box-shadow:0 2px 5px #27262325}
#pricing .billing-toggle button>span{opacity:1}
#pricing .billing-toggle button:focus-visible{outline:3px solid #513695;outline-offset:4px}
#pricing .plan-savings{color:#272623;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;line-height:1.5}
#pricing .plan-regular-price{color:#62586a;text-decoration-thickness:1.5px}
#pricing .plan-discount{display:inline-block;border-radius:8px;padding:4px 8px;background:#e8ef79;color:#272623;font-weight:700}
#pricing .plan-price{animation:none!important;transition:none!important}
/* Light product scenes retain their own palette when the surrounding page is dark.
   Keep this scoped: the approved #whisper scene owns its presentation. */
#your-look .brand-window,
#demo .demo-stage,
#rescue.quick-rescue,
#store-analytics,
#analytics .miniature-store,
#support .support-demo,
#pricing,
#partners .partner-note,
#shopify,
#plan-dialog {
  --paper: #f5f0e8;
  --ink: #272623;
  --white: #fffdf8;
  --line: #27262330;
  color: #272623;
  color-scheme: light;
}

/* Theme controls must follow the page ink, including native button rendering. */
body > header #theme {
  color: var(--ink);
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
}
body > header #mobile-menu { min-height: 44px; }

/* Complete keyboard focus coverage without changing the locked scene. */
main > section:not(#whisper) :is(select, textarea, summary):focus-visible,
.restored-info :is(select, textarea, summary):focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 4px;
}
body.dark > header :is(a, button):focus-visible,
body.dark .restored-info a:focus-visible,
body.dark > footer a:focus-visible {
  outline-color: #c79aef;
}

/* Let narrow screens wrap copy and controls instead of clipping them. */
#your-look .demo-editorial,
#partners .partner-copy { min-width: 0; }
#your-look .brand-browser > span:nth-child(2),
.restored-info a { overflow-wrap: anywhere; }
#plan-dialog { box-sizing: border-box; }
@media (max-width: 550px) {
  #your-look .brand-controls { flex-wrap: wrap; }
  #partners .partner-actions { flex-wrap: wrap; }
  #partners .partner-actions .button { white-space: normal; text-align: center; }
}



/* Keep complete billing disclosures available without crowding plan cards. */
#pricing .pricing-disclosures {max-width:1100px;margin:24px auto;padding:16px 0;border-block:1px solid var(--line);font-size:14px;line-height:1.65;}
#pricing .pricing-disclosures summary {cursor:pointer;font-weight:600;}
#pricing .pricing-disclosures p {max-width:85ch;margin:14px 0 0;}

/* Larger hero illustration; scoped away from the locked story section. */
#story .hero-scene{max-width:1200px;height:550px}
#story .hero-scene > img{width:980px;height:550px;object-fit:contain}
@media(max-width:1000px){#story .hero-scene{height:470px}#story .hero-scene > img{width:900px;height:470px}}
@media(max-width:650px){#story .hero-scene{height:390px}#story .hero-scene > img{width:calc(100% + 36px);max-width:none;margin-left:-18px;height:360px;object-fit:contain}}