/* Interactive, accessible product preview. Scoped to avoid changing existing pages. */
.page-demo{background:#fff}
.page-demo [hidden]{display:none!important}
.page-demo .header nav a[aria-current="page"]{color:#b83826;font-weight:700}
.header nav a[href="demo.html"]{color:#b83826;font-weight:700}
@media(min-width:1200px){.header nav{gap:clamp(10px,1.5vw,22px);font-size:.76rem}}
.demo-hero{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(310px,.78fr);align-items:center;gap:6%;padding-block:95px 110px;min-height:670px}
.demo-hero-copy{position:relative;z-index:1;max-width:820px}
.demo-hero .section-label{color:#b83826}
.demo-hero h1{font-size:clamp(48px,5.1vw,78px);line-height:1.09;letter-spacing:-2.8px;margin-bottom:27px}
.demo-hero h1 em{color:#ed654c}
.demo-hero .demo-hero-lead{color:#0b1c38;font-weight:700;font-size:1.18rem!important;line-height:1.35!important;margin:0 0 15px}
.demo-hero-copy>p:not(.demo-hero-lead){max-width:700px;color:#4d5667;line-height:1.6!important;margin-bottom:30px}
.demo-hero-foot{margin-top:21px;font-size:.72rem;color:#576071;display:flex;gap:10px;align-items:center}
.demo-dot{width:9px;height:9px;flex-shrink:0;border-radius:50%;background:#e86f55}
.demo-hero-art{height:490px;max-width:530px;width:100%;position:relative;display:flex;align-items:center;justify-content:center}
.demo-art-circle{height:360px;width:360px;border-radius:50%;display:grid;place-items:center;background:#ffe5db;color:#fa624d;font-size:185px;transform:rotate(-15deg);line-height:1}
.demo-art-message{position:absolute;max-width:300px;padding:16px 22px;background:#fff;box-shadow:0 12px 30px #0b1c3814;border:1px solid #efded7;border-radius:15px;font-weight:650;font-size:.85rem;line-height:1.3}
.demo-art-one{top:72px;left:-14px;color:#0b1c38;transform:rotate(-4deg)}
.demo-art-two{right:-18px;bottom:105px;background:#0b1c38;color:#fff;transform:rotate(4deg)}
.demo-art-caption{position:absolute;bottom:0;left:50%;transform:translateX(-50%);font-size:.68rem;letter-spacing:1.3px;text-transform:uppercase;font-weight:700;white-space:nowrap;color:#68707d}
.demo-playground{background:#f5f5f7;padding:100px 0 75px;scroll-margin-top:100px}
.demo-playground-head{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:55px}
.demo-playground-head h2{font-size:clamp(38px,3.8vw,60px)}
.demo-playground-head h2 em{color:#ee624a}
.demo-playground-head>p{max-width:450px;color:#556171;font-size:.86rem!important}
.demo-grid{display:grid;grid-template-columns:minmax(270px,400px) minmax(0,1fr);gap:clamp(28px,6vw,110px);align-items:start}
.demo-journeys{padding-top:45px}
.demo-journeys-heading{font-size:.75rem;letter-spacing:.6px;font-weight:750;text-transform:uppercase;color:#6c7380;margin-bottom:20px}
.demo-journey{width:100%;text-align:left;display:flex;align-items:center;gap:17px;border:1.5px solid #e1e4e9;background:#fff;border-radius:12px;padding:19px 18px;margin-bottom:13px;min-height:105px;color:#12233d;box-shadow:0 5px 18px #14244305;transition:border-color .2s,transform .2s,background .2s}
.demo-journey:hover{border-color:#ffc8b9;transform:translateY(-2px)}
.demo-journey.selected{border-color:#ef735b;background:#fff5f1;box-shadow:0 5px 18px #f05c3720}
.demo-journey>span:nth-child(2){display:flex;flex-direction:column;flex:1;gap:4px}
.demo-journey strong{font-size:.9rem;line-height:1.2}
.demo-journey small{color:#68717c;font-size:.68rem!important}
.demo-journey>span:last-child{font-size:1.15rem;color:#ed664d}
.demo-journey-icon{height:54px;width:54px;border-radius:13px;display:grid;place-items:center;font-size:1.4rem;flex-shrink:0}
.icon-sun{background:#ffe7c4;color:#b55d21}.icon-memory{background:#e4e3fb;color:#756baf}.icon-circle{background:#dfeee3;color:#336a52}.icon-plans{background:#ffe0dc;color:#de5946}
.demo-aside-hint{display:flex;gap:14px;align-items:start;padding:25px 4px 0;color:#6a7180}
.demo-aside-hint>span{font-size:1.2rem;color:#ef624b}
.demo-aside-hint p{font-size:.76rem!important;line-height:1.5!important}
.demo-device-zone{display:flex;align-items:center;justify-content:center;min-height:850px;position:relative;padding:0 45px 50px}
.demo-halo{height:650px;width:650px;max-width:100%;border-radius:50%;background:#ffe3d9;position:absolute;inset:120px auto auto 50%;transform:translateX(-50%);z-index:0}
.demo-device{width:445px;max-width:100%;background:#fff;border:8px solid #0b1c38;box-shadow:0 28px 70px #15264223;border-radius:42px;overflow:hidden;position:relative;z-index:1;min-height:770px;display:flex;flex-direction:column}
.demo-device-status{display:flex;align-items:center;justify-content:space-between;background:#fff;padding:15px 27px 7px;font-size:.54rem;font-weight:750;color:#0b1c38;line-height:1}
.demo-device-brand{display:flex;align-items:center;gap:11px;padding:12px 24px 19px;border-bottom:1px solid #f0f0f2}
.demo-app-mark{background:#0b1c38;color:#fb866a;height:48px;width:48px;border-radius:14px;display:grid;place-items:center;font-size:1.55rem}
.demo-device-brand>span:nth-child(2){display:flex;flex-direction:column;gap:0;flex:1}
.demo-device-brand strong{font-size:1.03rem;letter-spacing:-.6px;color:#0b1c38;line-height:1.35}
.demo-device-brand small{font-size:.57rem!important;color:#6f7783}
.demo-app-weather{font-size:1.15rem;color:#d9853a}
.demo-screen{padding:23px 23px 20px;flex:1;min-height:515px;color:#0b1c38}
.demo-screen-eyebrow{font-size:.56rem;letter-spacing:1.4px;font-weight:800;color:#bd503c}
.demo-screen h2{font-size:1.43rem;line-height:1.13;letter-spacing:-1px;font-weight:750;margin:9px 0 8px;color:#0b1c38}
.page-demo .demo-screen .demo-screen-subtitle{font-size:.7rem!important;line-height:1.4!important;color:#69727d;margin-bottom:18px}
.demo-dialogue{display:flex;flex-direction:column;gap:10px}
.demo-speech-user,.demo-speech-assistant{border-radius:12px;padding:12px 15px}
.demo-speech-user{background:#f2f3f6;margin-left:35px;border-bottom-right-radius:3px}
.demo-speech-assistant{background:#fff0e9;border-bottom-left-radius:3px;margin-right:20px}
.demo-bubble-label{display:block;font-size:.49rem;letter-spacing:1px;font-weight:800;color:#827f83;margin-bottom:5px}
.page-demo .demo-dialogue p{font-size:.7rem!important;line-height:1.42!important;color:#26354a}
.demo-listen-button{border:0;background:transparent;color:#b44b36;font-weight:650;font-size:.66rem;padding:13px 0 10px;display:inline-flex;gap:7px;align-items:center;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.demo-listen-button:hover{color:#ed644a}
.demo-action-area{margin-top:6px}
.demo-panel{background:#fff;border:1px solid #e6e8eb;border-radius:13px;padding:15px}
.demo-panel-title{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-bottom:10px;border-bottom:1px solid #f0f0f2}
.demo-panel-title strong{font-size:.73rem;line-height:1.2;color:#10233c}
.demo-panel-title span{font-size:.52rem;font-weight:800;color:#b64f39;letter-spacing:.5px;text-transform:uppercase}
.demo-grocery-row{display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid #f2f2f2;padding:9px 0;font-size:.68rem}
.demo-grocery-row label{display:flex;align-items:center;gap:8px;cursor:pointer;line-height:1.25}
.demo-grocery-row input{accent-color:#d75d46;width:19px;height:19px;flex-shrink:0}
.demo-grocery-row b{font-size:.68rem;white-space:nowrap}
.demo-panel-total{display:flex;align-items:center;justify-content:space-between;margin-top:11px;font-size:.76rem;font-weight:750}
.demo-budget-note{padding:9px 10px;background:#e8f4eb;border-radius:7px;color:#285941;font-size:.6rem;line-height:1.4;margin-top:10px}
.demo-budget-note.warning{background:#fff0e7;color:#a3402e}
.demo-primary-action{display:block;width:100%;border:0;border-radius:8px;padding:13px 10px;color:#fff;background:#0b1c38;font-size:.68rem;font-weight:750;margin-top:12px;min-height:46px}
.demo-primary-action:hover{background:#27415e}
.demo-outline-action{display:block;width:100%;border:1px solid #bfc4cb;background:#fff;border-radius:8px;padding:10px;color:#0b1c38;font-size:.63rem;font-weight:650;margin-top:9px}
.demo-feedback{font-size:.62rem!important;line-height:1.35!important;color:#36674b;min-height:0;margin-top:9px}
.demo-confirmed{background:#eaf5ed;border:1px solid #c1ddc9;border-radius:10px;padding:13px;color:#1f5f3c;font-size:.71rem;line-height:1.45}
.demo-confirmed strong{display:block;margin-bottom:5px}
.demo-memory-card{background:#fff8ed;border-radius:11px;padding:16px 13px;display:flex;flex-direction:column;gap:7px;margin-top:11px}
.demo-memory-card small{font-size:.55rem!important;color:#866c54}
.demo-memory-card strong{font-size:.8rem;line-height:1.3}
.page-demo .demo-memory-card p{font-size:.67rem!important;line-height:1.45!important;color:#514f50}
.demo-memory-source{border-top:1px solid #eedec8;padding-top:9px;margin-top:4px;font-size:.58rem;line-height:1.35;color:#6a6c68}
.demo-memory-form label{font-size:.61rem;font-weight:700;display:block;margin:12px 0 5px}
.page-demo .demo-memory-form small{display:block;font-size:.56rem!important;line-height:1.35!important;color:#737c88;margin-top:6px}
.demo-memory-form textarea{font:inherit;font-size:.67rem;line-height:1.4;width:100%;min-height:75px;border:1px solid #cfd2d7;border-radius:8px;padding:10px;resize:vertical;color:#14243b;background:white}
.demo-memory-form textarea:focus-visible{outline:3px solid #ef937d;outline-offset:2px}
.demo-permission{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid #eff0f2;cursor:pointer}
.demo-permission span{display:flex;flex-direction:column;gap:2px}
.demo-permission strong{font-size:.68rem;line-height:1.2}
.demo-permission small{color:#6b7480;font-size:.56rem!important}
.demo-permission input{accent-color:#d95d45;width:22px;height:22px;flex-shrink:0}
.demo-perm-summary{font-size:.63rem;line-height:1.5;background:#f2f4f8;border-radius:8px;padding:10px;margin-top:13px;color:#33445b}
.demo-plan-choice{display:flex;align-items:center;gap:11px;width:100%;background:#fff;border:1px solid #e5e6ea;text-align:left;padding:11px;border-radius:9px;margin-top:8px;color:#0b1c38}
.demo-plan-choice:hover,.demo-plan-choice.chosen{border-color:#e86c55;background:#fff5f1}
.demo-plan-choice>span:first-child{height:43px;width:43px;border-radius:9px;background:#fce7df;display:grid;place-items:center;flex-shrink:0;font-size:1.05rem}
.demo-plan-choice>span:nth-child(2){display:flex;flex-direction:column;gap:2px}
.demo-plan-choice strong{font-size:.68rem;line-height:1.2}
.demo-plan-choice small{font-size:.56rem!important;color:#6a737e}
.demo-device-tabs{display:grid;grid-template-columns:repeat(4,1fr);padding:10px 8px 8px;border-top:1px solid #e9e9eb;gap:2px;background:#fff}
.demo-device-tabs button{display:flex;flex-direction:column;align-items:center;gap:4px;background:transparent;border:0;color:#87909b;font-size:.48rem;font-weight:700;line-height:1.2;padding:6px 0;min-height:50px}
.demo-device-tabs button span{font-size:1.1rem;line-height:1}
.demo-device-tabs button.active{color:#bc4b35}
.demo-device-home{width:110px;height:5px;border-radius:9px;background:#18273d;margin:5px auto 11px}
.demo-device-note{display:flex;align-items:center;gap:12px;position:absolute;z-index:2;right:0;bottom:110px;background:#fff;border:1px solid #ecedf0;border-radius:11px;padding:13px 18px;box-shadow:0 10px 24px #0b1c3815;transform:rotate(3deg)}
.demo-device-note>span{font-size:1.2rem;color:#31916e}
.demo-device-note div{display:flex;flex-direction:column;gap:2px}
.demo-device-note strong{font-size:.65rem;line-height:1.3}
.demo-device-note small{font-size:.53rem!important;color:#67707d}
.demo-legal{margin:28px auto 0;max-width:850px;color:#697180;font-size:.65rem!important;line-height:1.55!important;text-align:center}
.demo-next-section{padding-block:110px;display:flex;justify-content:space-between;gap:60px;align-items:center}
.demo-next-section h2{max-width:760px;font-size:clamp(38px,3.9vw,61px)}
.demo-next-section h2 em{color:#ec614a}
.demo-next-section>div>p{max-width:650px;margin-top:24px;color:#4d5667}
.demo-next-actions{display:flex;flex-direction:column;gap:22px;align-items:start;min-width:300px}
.demo-secondary-link{font-size:.8rem;color:#b94431;font-weight:650;text-decoration:underline;text-underline-offset:4px}
@media(max-width:1180px){.demo-hero{grid-template-columns:1fr .65fr}.demo-art-circle{height:300px;width:300px;font-size:155px}.demo-hero-art{height:415px}.demo-art-message{font-size:.72rem;max-width:240px}.demo-device-zone{padding:0 0 60px}.demo-device-note{right:-12px;bottom:90px}}
@media(max-width:900px){.demo-hero{grid-template-columns:1fr;gap:5px;padding-block:60px}.demo-hero-art{max-width:470px;margin-inline:auto}.demo-playground-head{flex-direction:column;align-items:start;gap:12px}.demo-grid{grid-template-columns:1fr;gap:45px}.demo-journeys{padding-top:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.demo-journeys-heading,.demo-aside-hint{grid-column:1/-1}.demo-journey{margin:0}.demo-device-zone{min-height:auto}.demo-device-note{right:calc(50% - 320px)}.demo-next-section{flex-direction:column;align-items:start}.demo-next-actions{min-width:0}}
@media(max-width:620px){.demo-hero{padding-block:48px 68px;min-height:0}.demo-hero h1{font-size:clamp(43px,9vw,58px);letter-spacing:-2px}.demo-hero-art{height:285px;margin-top:12px}.demo-art-circle{width:235px;height:235px;font-size:115px}.demo-art-one{top:14px;left:0}.demo-art-two{right:0;bottom:45px}.demo-art-message{font-size:.59rem;max-width:200px;padding:11px 14px}.demo-art-caption{bottom:-6px;font-size:.52rem}.demo-playground{padding:65px 0}.demo-playground-head{margin-bottom:30px}.demo-journeys{grid-template-columns:1fr 1fr;gap:9px}.demo-journeys-heading{margin-bottom:0}.demo-journey{padding:12px;min-height:98px;gap:10px}.demo-journey-icon{width:42px;height:42px;font-size:1.15rem}.demo-journey strong{font-size:.66rem}.demo-journey small{font-size:.56rem!important}.demo-journey>span:last-child{display:none}.demo-aside-hint{padding-top:8px}.demo-device-zone{padding:0 0 25px}.demo-halo{width:420px;height:480px;top:90px}.demo-device{width:100%;max-width:425px;min-height:0;border-width:6px;border-radius:34px}.demo-device-status{padding:13px 22px 5px}.demo-screen{padding:21px 17px}.demo-device-note{display:none}.demo-legal{text-align:left}.demo-next-section{padding-block:70px}.demo-next-actions .button{min-height:59px}.demo-hero-foot{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.demo-journey,.demo-plan-choice{transition:none}}