/* Product demos */
.product-demo {
  position: relative; min-height: 610px; padding: 30px; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  box-shadow: 0 26px 74px rgba(20,22,28,.08);
}
.demo-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 22px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.demo-toolbar span:first-child { color: var(--text); font-weight: 700; font-size: 14px; }
.demo-finance { display: flex; flex-direction: column; justify-content: space-between; background: #f9f9f7; color: #17181b; }
.finance-topline { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 40px 0 28px; }
.finance-topline small { display: block; color: #8a8d94; font-size: 9px; font-weight: 740; letter-spacing: .13em; }
.finance-topline strong { display: block; margin-top: 5px; font-size: clamp(38px, 5vw, 64px); letter-spacing: -.07em; line-height: 1; }
.finance-topline span { display: block; margin-top: 9px; color: #4f8c65; font-size: 12px; }
.mini-ring { width: 78px; height: 78px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--orvia) 0 68%, #e2e3e8 68%); }
.mini-ring::before { content: ""; position: absolute; width: 60px; height: 60px; border-radius: 50%; background: #f9f9f7; }
.mini-ring span { position: relative; z-index: 2; margin: 0; color: #15161a; font-size: 13px; font-weight: 720; }
.finance-strip { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid #dedfe3; border-bottom: 1px solid #dedfe3; }
.finance-strip article { padding: 17px 10px 17px 0; }
.finance-strip article + article { padding-left: 18px; border-left: 1px solid #dedfe3; }
.finance-strip small { display: block; color: #90939a; font-size: 9px; }
.finance-strip strong { display: block; margin-top: 4px; font-size: 18px; letter-spacing: -.04em; }
.finance-chart { height: 112px; margin: 28px 0 22px; display: flex; align-items: end; gap: 10px; border-bottom: 1px solid #dedfe3; }
.finance-chart i { flex: 1; display: block; min-height: 12px; background: #c5c8d1; border-radius: 4px 4px 0 0; }
.finance-chart i:nth-child(4n+1) { background: #9da5f6; }
.finance-chart i:nth-child(4n+2) { background: #747ff2; }
.demo-list { border-top: 1px solid #dedfe3; }
.demo-list > div { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 11px; padding: 13px 0; border-bottom: 1px solid #e2e3e6; }
.demo-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: white; font-size: 15px; box-shadow: 0 5px 14px rgba(30,32,38,.06); }
.demo-list p { margin: 0; }
.demo-list p strong, .demo-list p small { display: block; }
.demo-list p strong { font-size: 12px; }
.demo-list p small { color: #92959c; font-size: 9px; }
.demo-list b { font-size: 11px; }
.demo-list b.positive { color: #4f8c65; }

.demo-capture { display: flex; flex-direction: column; justify-content: center; background: #111318; color: #f5f6f7; }
.capture-flow { display: grid; grid-template-columns: 1fr 34px 1fr 34px 1fr; gap: 8px; align-items: center; }
.capture-step { min-height: 290px; padding: 20px; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.10); border-radius: 20px; background: #17191f; }
.capture-step.active { background: #1e212a; border-color: rgba(135,145,255,.42); box-shadow: inset 0 0 0 1px rgba(135,145,255,.12); }
.capture-step small { color: #70747f; font-size: 9px; font-weight: 760; }
.capture-glyph { width: 48px; height: 48px; margin: 46px 0 22px; display: grid; place-items: center; border-radius: 15px; background: #252832; color: #cbd0ff; font-size: 22px; }
.capture-step strong { font-size: 15px; }
.capture-step p { margin: 7px 0 0; color: #8f949f; font-size: 12px; }
.flow-arrow { color: #60646f; text-align: center; }
.capture-footer { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.capture-footer > div { padding: 16px 18px; border-radius: 15px; background: #17191f; border: 1px solid rgba(255,255,255,.08); }
.capture-footer span { display: block; color: #7c818d; font-size: 9px; }
.capture-footer strong { display: block; margin-top: 3px; font-size: 13px; }

.demo-privacy { background: linear-gradient(180deg, #fbfbf9, #f1f2ee); color: #17181b; }
.privacy-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 46px; padding-bottom: 18px; border-bottom: 1px solid #dfe0dc; color: #6f727a; font-size: 12px; }
.privacy-header b { color: #18191c; font-size: 14px; }
.privacy-panel { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 17px 0; border-bottom: 1px solid #dedfdb; }
.privacy-panel span { display: block; font-size: 15px; font-weight: 650; }
.privacy-panel small { display: block; margin-top: 3px; color: #8a8e96; font-size: 11px; }
.switch { position: relative; width: 44px; height: 25px; border-radius: 99px; background: #d5d7db; }
.switch::after { content: ""; position: absolute; width: 19px; height: 19px; top: 3px; left: 3px; border-radius: 50%; background: white; box-shadow: 0 2px 6px rgba(0,0,0,.16); }
.switch.on { background: #6d78f1; }
.switch.on::after { left: 22px; }
.privacy-state { padding: 7px 10px; border-radius: 99px; background: #e8e9e5; color: #6e7279; font-size: 10px; font-weight: 650; }
.privacy-quote { margin-top: 42px; padding: 26px 0 0; border-top: 1px solid #dfe0dc; display: grid; grid-template-columns: 34px 1fr; gap: 15px; }
.privacy-quote > span { color: #a6a8ae; font-size: 42px; line-height: .8; }
.privacy-quote p { margin: 0; max-width: 520px; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.3; letter-spacing: -.04em; font-weight: 560; }

.product-divider { padding: 84px 0 70px; border-bottom: 1px solid var(--line); }
.product-divider-inner { display: flex; align-items: center; gap: 22px; }
.product-divider .section-eyebrow { margin-bottom: 3px; }
.product-divider h2 { margin: 0; font-size: 54px; line-height: 1; }

.demo-schedule { background: #f8fafc; color: #17191d; }
.schedule-header { display: flex; align-items: end; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid #e0e3e8; }
.schedule-header div { display: flex; align-items: baseline; gap: 9px; }
.schedule-header small { color: #8b9098; font-size: 9px; letter-spacing: .13em; }
.schedule-header strong { font-size: 42px; letter-spacing: -.07em; }
.schedule-header > span { color: #7d828b; font-size: 12px; }
.weather-line { display: flex; align-items: center; gap: 8px; width: fit-content; margin: 20px 0 30px; padding: 8px 12px; border: 1px solid #e0e3e8; border-radius: 99px; color: #777d86; font-size: 10px; }
.weather-line strong { color: #15171b; font-size: 14px; }
.schedule-caption { margin-bottom: 14px; color: #9a9fa8; font-size: 9px; letter-spacing: .15em; }
.schedule-row { display: grid; grid-template-columns: 48px 12px 1fr; gap: 8px; min-height: 88px; }
.schedule-row time { color: #828892; font-size: 10px; }
.schedule-row i { position: relative; display: block; width: 1px; height: 100%; margin-left: 5px; background: #dbe0e7; }
.schedule-row i::before { content: ""; position: absolute; top: 3px; left: 50%; transform: translateX(-50%); width: 8px; height: 8px; border-radius: 50%; background: #bdc4ce; box-shadow: 0 0 0 4px #f8fafc; }
.schedule-row.active i::before { background: var(--solyra); }
.schedule-row div { padding-bottom: 20px; }
.schedule-row strong, .schedule-row span, .schedule-row small { display: block; }
.schedule-row strong { font-size: 14px; }
.schedule-row span { margin-top: 2px; color: #7f858e; font-size: 10px; }
.schedule-row small { margin-top: 6px; color: #a1a6af; font-size: 9px; }
.next-class { margin-top: 10px; padding: 18px 20px; border-radius: 18px; background: #18202b; color: white; }
.next-class small, .next-class strong, .next-class span { display: block; }
.next-class small { color: #8490a0; font-size: 9px; letter-spacing: .13em; }
.next-class strong { margin-top: 5px; font-size: 17px; letter-spacing: -.02em; }
.next-class span { margin-top: 2px; color: #aab1bd; font-size: 10px; }

.demo-system { background: #0f1115; color: #f7f8fa; }
.island-demo { min-height: 86px; padding: 16px 19px; display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 12px; border-radius: 24px; background: #050607; }
.island-dot { width: 7px; height: 7px; border-radius: 50%; background: #61a8d7; box-shadow: 0 0 0 5px rgba(97,168,215,.11); }
.island-demo small, .island-demo strong { display: block; }
.island-demo small { color: #777e89; font-size: 9px; }
.island-demo strong { margin-top: 2px; font-size: 14px; }
.island-demo b { font-size: 15px; }
.system-grid { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.system-grid > article { min-height: 285px; padding: 18px; border: 1px solid rgba(255,255,255,.08); border-radius: 22px; background: #17191e; }
.system-grid > article > small { color: #666c76; font-size: 8px; font-weight: 760; letter-spacing: .14em; }
.lock-widget, .home-widget { margin-top: 55px; padding: 17px; border-radius: 18px; background: #252831; }
.lock-widget span { display: block; color: #7faed1; font-size: 12px; }
.lock-widget strong, .home-widget strong { display: block; margin-top: 5px; font-size: 15px; }
.lock-widget p, .home-widget p { margin: 2px 0 0; color: #8e949f; font-size: 10px; }
.home-widget { position: relative; background: #e9edf3; color: #15171b; }
.home-widget p { color: #707780; }
.weather-mini { position: absolute; right: 15px; top: 14px; color: #5e90b2; font-size: 13px; }
.system-note { margin-top: 16px; padding: 18px 2px 0; border-top: 1px solid rgba(255,255,255,.09); }
.system-note span { color: #68707b; font-size: 9px; }
.system-note strong { display: block; margin-top: 4px; font-size: 14px; }