/* Zyora demo: one visual system across the editorial shell and six app views. */
body.demo-page{
  --demo-bg:#f7f6fb;--demo-surface:#fff;--demo-surface-2:#f1eef7;
  --demo-text:#17141d;--demo-muted:#615d6c;--demo-line:#e1dce9;
  --demo-accent:#6552e8;--demo-accent-deep:#4f3bce;--demo-accent-soft:#eeeaff;
  --demo-lime:#a99afa;--demo-lime-2:#f1edff;
  background:var(--demo-bg);color:var(--demo-text);
}
html[data-theme="dark"] body.demo-page{
  --demo-bg:#0e0c13;--demo-surface:#191620;--demo-surface-2:#231f2b;
  --demo-text:#f7f5fb;--demo-muted:#b8b1c2;--demo-line:#39323f;
  --demo-accent:#a698ff;--demo-accent-deep:#b9adff;--demo-accent-soft:#302747;
  --demo-lime:#a698ff;--demo-lime-2:#29233a;
  background:var(--demo-bg);color:var(--demo-text);
}
.demo-page .container{width:min(1200px,calc(100% - 48px))}
.demo-page a:focus-visible,.demo-page button:focus-visible,.demo-page input:focus-visible,.demo-page summary:focus-visible,.demo-page [role="button"]:focus-visible{outline:3px solid var(--demo-accent);outline-offset:3px}
.demo-page button,.demo-page a,.demo-page [role="button"]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.demo-page button,.demo-page [role="button"]{user-select:none;-webkit-user-select:none}
.demo-page input{font-size:16px}
.demo-page .skip-link{position:fixed;left:12px;top:-80px;z-index:100;background:var(--demo-text);color:var(--demo-bg);padding:10px 14px;border-radius:9px}
.demo-page .skip-link:focus{top:12px}

/* Site navigation */
.demo-site-nav{background:color-mix(in srgb,var(--demo-bg) 94%,transparent);border-bottom:1px solid var(--demo-line);box-shadow:none;backdrop-filter:blur(14px)}
.demo-site-nav .nav{min-height:76px;height:auto;gap:30px}
.demo-site-nav .brand{gap:6px;color:var(--demo-text)}
.demo-site-nav .brand img{display:block}
.demo-site-nav .brand span{font:800 1.5rem Manrope,sans-serif;letter-spacing:-.06em}
.demo-site-nav .nav-links a{color:var(--demo-muted);font-weight:700}
.demo-site-nav .btn-ghost{border-radius:11px;background:#5c48dc;color:#fff;border-color:#5c48dc}
.demo-site-nav .btn-ghost:active,.demo-page .demo-guide-actions button:active,.demo-page .pro-cta:active{transform:scale(.97)}
.demo-site-nav .theme-label{color:var(--demo-muted)}
.demo-site-nav .ios-switch{background:var(--demo-surface-2);border:1px solid var(--demo-line);transition:background-color .18s ease}
.demo-site-nav .ios-switch.on{background:#6552e8}
.demo-site-nav .ios-switch span{transition:transform .18s cubic-bezier(.23,1,.32,1)}
.demo-page .language-current{min-height:42px;border-radius:9px;background:var(--demo-surface);color:var(--demo-text);border-color:var(--demo-line)}
.demo-page .language-menu{z-index:50;border-color:var(--demo-line)}
.demo-mobile-menu{display:none}
.demo-mobile-menu summary{list-style:none;border:1px solid var(--demo-line);background:var(--demo-surface);color:var(--demo-text);border-radius:10px;width:44px;height:44px;display:grid;place-items:center;font-size:18px}
.demo-mobile-menu summary::-webkit-details-marker{display:none}
.demo-mobile-menu>div{position:absolute;right:0;top:calc(100% + 8px);width:210px;padding:8px;display:grid;background:var(--demo-surface);border:1px solid var(--demo-line);border-radius:12px;box-shadow:0 15px 35px #1a122029;z-index:90}
.demo-mobile-menu a{padding:11px;text-decoration:none;color:var(--demo-text);font-size:13px;font-weight:700}

/* Introduction and interactive guide */
.demo-intro{text-align:left;padding:92px 0 52px;display:grid;grid-template-columns:1.1fr .9fr;gap:18px 80px;align-items:end}
.demo-kicker{font-size:11px;color:var(--demo-accent-deep);font-weight:800;letter-spacing:.13em}
.demo-intro .demo-kicker{grid-column:1/-1}
.demo-intro h1{font:800 clamp(3.1rem,5.3vw,5.35rem)/1.04 Manrope,sans-serif;letter-spacing:-.065em;max-width:790px;margin:0}
.demo-intro h1 span{color:var(--demo-accent-deep)}
.demo-intro>p{font-size:1.08rem;line-height:1.65;color:var(--demo-muted);max-width:430px;margin:0 0 6px}
.demo-start-link{grid-column:1/-1;justify-self:start;min-height:44px;display:inline-flex;align-items:center;gap:12px;color:var(--demo-accent-deep);border-bottom:1px solid var(--demo-accent);font-size:.88rem;font-weight:800;text-decoration:none}
.phone-demo-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,390px);justify-content:space-between;gap:clamp(40px,7vw,115px);align-items:start;padding:24px 0 115px;max-width:1200px}
#demo-app{scroll-margin-top:82px}
.demo-guide{position:sticky;top:110px;align-self:start;padding-top:40px}
.demo-guide h2{font:800 clamp(2.2rem,3.5vw,3.75rem)/1.08 Manrope,sans-serif;letter-spacing:-.055em;max-width:650px;margin:18px 0}
.demo-guide>p{color:var(--demo-muted);font-size:1rem;max-width:460px}
.demo-guide-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:28px 0}
.demo-guide-actions button{position:relative;display:grid;grid-template-columns:25px 1fr auto;column-gap:9px;align-items:center;min-height:77px;padding:13px 14px;text-align:left;border:1px solid var(--demo-line);border-radius:13px;background:var(--demo-surface);color:var(--demo-text);transition:transform .14s cubic-bezier(.23,1,.32,1),border-color .18s ease,background-color .18s ease}
.demo-guide-actions button[aria-current="true"]{border-color:var(--demo-accent);background:var(--demo-accent-soft)}
.demo-guide-actions button>span{grid-row:1/3;color:var(--demo-accent-deep);font-size:11px;font-weight:800}
.demo-guide-actions strong{font-size:13px;line-height:1.2}
.demo-guide-actions small{grid-column:2;color:var(--demo-muted);font-size:11px}
.demo-guide-actions b{grid-row:1/3;grid-column:3;color:var(--demo-accent-deep);font-size:14px}
.demo-guide .guide-disclaimer{font-size:.8rem;line-height:1.5;color:var(--demo-muted);margin-top:22px}
.phone-shell-wrap{width:min(100%,390px);justify-self:end}
.phone-shell{box-shadow:0 30px 72px rgba(32,22,56,.18);border-radius:54px}
.phone-screen{background:var(--demo-surface);color:var(--demo-text);border-radius:45px}
html[data-theme="dark"] body.demo-page .phone-screen,html[data-theme="dark"] body.demo-page .pro-view{background:var(--demo-surface)}
html:not([data-theme="dark"]) body.demo-page .phone-screen{background:var(--demo-surface)}
.app-statusbar{color:var(--demo-text)}
.demo-watermark{font:800 8px DM Sans,sans-serif;color:var(--demo-accent-deep);letter-spacing:.13em;align-self:flex-start;margin-left:auto;margin-right:15px}

/* App home: larger information hierarchy, fewer competing highlights */
.demo-page .mobile-view{padding-bottom:110px}
.demo-page .app-wordmark{display:flex;align-items:center;justify-content:center;gap:4px;font:800 19px Manrope,sans-serif;letter-spacing:-.06em}
.demo-page .app-wordmark img{width:19px;height:19px}
.demo-page .round-btn{width:40px;height:40px;border:1px solid var(--demo-line);background:var(--demo-surface-2);color:var(--demo-text)}
.demo-page .profile-btn{background:#6552e8;color:#fff;border-color:#6552e8}
.demo-page .notif-btn i{background:#6552e8}
.demo-page .wealth-pull-zone{height:46px;touch-action:pan-x}
.demo-page .wealth-pull-zone.open{height:224px!important}
.demo-page .pull-hint{min-height:44px;font-size:10px;color:var(--demo-muted);cursor:pointer}
.demo-page .wealth-pull-zone.open .wealth-drawer{top:44px}
.demo-page .wealth-drawer{background:#241e32;color:#fff;border:1px solid #443858}
.demo-page .wealth-drawer>small{color:#c9bdff;font-size:10px}
.demo-page .wealth-drawer-head,.demo-page .wealth-breakdown div,.demo-page .wealth-breakdown b{font-size:9px}
.demo-page .spendable-hero{text-align:left;padding:24px 0 20px;border-bottom:1px solid var(--demo-line)}
.demo-page .spendable-hero>small{font-size:12px;font-weight:700;color:var(--demo-muted)}
.demo-page .spendable-hero>strong{font-size:40px;letter-spacing:-.06em;margin:9px 0 13px;color:var(--demo-text)}
.demo-page .saving-delta{gap:4px;white-space:normal;border:0;border-radius:8px;padding:8px 10px;font-size:10px}
.demo-page .saving-delta b,.demo-page .saving-delta-label{font-size:10px}
.demo-page .saving-delta.is-positive{background:var(--demo-accent-soft);color:var(--demo-accent-deep)}
.demo-page .saving-delta.is-positive .saving-delta-arrow{color:var(--demo-accent-deep)}
.demo-page .quick-actions{margin:18px 0 20px;gap:8px}
.demo-page .quick-action>span{min-width:48px;min-height:48px;border:1px solid var(--demo-line);background:var(--demo-surface-2);color:var(--demo-accent-deep);box-shadow:none}
.demo-page .quick-action b{font-size:10px;color:var(--demo-text)}
.demo-page .smart-split-banner{background:#5c48dc;border:0;box-shadow:none;border-radius:16px;color:#fff;padding:15px}
.demo-page .smart-split-banner .split-orb{background:rgba(255,255,255,.17);color:#fff}
.demo-page .smart-split-banner small,.demo-page .smart-split-banner span{color:#e5dfff}
.demo-page .smart-split-banner strong{font-size:12px}
.demo-page .goal-teaser{display:grid;grid-template-columns:37px 1fr auto;align-items:center;gap:11px;width:100%;margin:11px 0 20px;padding:13px;text-align:left;border:1px solid var(--demo-line);border-radius:15px;background:var(--demo-surface-2);color:var(--demo-text)}
.demo-page .goal-teaser-icon{display:grid;place-items:center;width:35px;height:35px;background:var(--demo-accent-soft);border-radius:10px;color:var(--demo-accent-deep);font-size:18px}
.demo-page .goal-teaser small{display:block;color:var(--demo-muted);font-size:8px;letter-spacing:.07em;font-weight:800}
.demo-page .goal-teaser strong{display:block;font-size:11px;line-height:1.4}
.demo-page .goal-teaser-meter{display:block;height:4px;margin-top:7px;background:var(--demo-line);border-radius:99px;overflow:hidden}
.demo-page .goal-teaser-meter i{display:block;width:64%;height:100%;background:var(--demo-accent)}
.demo-page .goal-teaser>b{color:var(--demo-accent-deep);font-size:15px}
.demo-page .section-head strong{font-size:13px}
.demo-page .section-head small,.demo-page .section-head button{font-size:10px}
.demo-page .transaction-list{border:1px solid var(--demo-line);border-radius:15px;background:var(--demo-surface);box-shadow:none}
.demo-page .transaction-row{padding:12px 10px;gap:9px}
.demo-page .merchant-icon{border-radius:11px}
.demo-page .tx-main strong,.demo-page .tx-amount strong{font-size:11px}
.demo-page .tx-main small,.demo-page .tx-amount small{font-size:9px;color:var(--demo-muted)}
.demo-page .level-preview{background:var(--demo-surface-2);border:1px solid var(--demo-line);color:var(--demo-text);border-radius:16px;cursor:pointer;box-shadow:none}
.demo-page .level-preview small,.demo-page .level-preview span,.demo-page .level-preview p{color:var(--demo-muted)}
.demo-page .level-preview strong{color:var(--demo-text)}
.demo-page .level-preview p{font-size:10px;line-height:1.5}
.demo-page .mini-level-ring{background:var(--demo-accent-soft);color:var(--demo-accent-deep);border:1px solid var(--demo-line)}

/* Split and goals */
.demo-page .inside-header{padding-bottom:20px}
.demo-page .inside-header button{width:40px;height:40px;border-color:var(--demo-line);background:var(--demo-surface-2);color:var(--demo-text)}
.demo-page .inside-header small{font-size:9px;color:var(--demo-muted)}
.demo-page .inside-header strong{font-size:12px;color:var(--demo-text)}
.demo-page .split-mobile-intro h2{font-size:25px}
.demo-page .split-mobile-intro p{font-size:11px;line-height:1.5;color:var(--demo-muted)}
.demo-page .salary-mobile-card{background:#241e32;color:#fff;border-radius:17px}
.demo-page .salary-mobile-card>span{font-size:10px;color:#d4cce2}
.demo-page .salary-mobile-card input{color:#fff;font-size:24px}
.demo-page .mobile-mode-selector{gap:7px}
.demo-page .mobile-mode-selector button{min-height:62px;background:var(--demo-surface);border:1px solid var(--demo-line);border-radius:12px;color:var(--demo-text)}
.demo-page .mobile-mode-selector button.active{background:var(--demo-accent-soft);border-color:var(--demo-accent);color:var(--demo-accent-deep);box-shadow:none}
.demo-page .mobile-mode-selector small{font-size:9px}
.demo-page .mobile-mode-selector b{font-size:10px}
.demo-page .split-result-card,.demo-page .allocation-mobile-list article,.demo-page .shield-mobile{background:var(--demo-surface);border:1px solid var(--demo-line);box-shadow:none}
.demo-page .split-result-card>small,.demo-page .split-result-card>span{font-size:10px;color:var(--demo-muted)}
.demo-page .split-result-card>strong{font-size:27px;color:var(--demo-text)}
.demo-page .split-legend span{font-size:8px}
.demo-page .allocation-mobile-list strong,.demo-page .allocation-mobile-list article>b{font-size:10px;color:var(--demo-text)}
.demo-page .allocation-mobile-list small{font-size:9px;color:var(--demo-muted)}
.demo-page .year-impact{background:var(--demo-accent-soft);color:var(--demo-text);border-radius:15px}
.demo-page .year-impact>span{font-size:9px;color:var(--demo-accent-deep)}
.demo-page .year-impact strong{color:var(--demo-accent-deep)}
.demo-page .year-impact p{color:var(--demo-muted);font-size:10px}
.demo-page .shield-mobile strong{font-size:11px}
.demo-page .shield-mobile small,.demo-page .shield-mobile p{font-size:9px;color:var(--demo-muted)}
.demo-page .shield-options button{min-height:34px;font-size:10px}
.demo-page .shield-options button.active{background:var(--demo-accent);color:#fff}
.demo-page .goals-total-card{background:#241e32;color:#fff;border-radius:17px}
.demo-page .goals-total-card small,.demo-page .goals-total-card span{color:#d5cde2;font-size:10px}
.demo-page .goals-total-card strong{font-size:27px}
.demo-page .mobile-goal,.demo-page .mobile-goal.featured{background:var(--demo-surface);color:var(--demo-text);border:1px solid var(--demo-line);border-radius:15px}
.demo-page .mobile-goal.featured{border-color:var(--demo-accent)}
.demo-page .mobile-goal>small,.demo-page .mobile-goal>p,.demo-page .mobile-goal footer{font-size:10px;color:var(--demo-muted)}
.demo-page .mobile-goal>strong{font-size:15px;color:var(--demo-text)}
.demo-page .mobile-goal .goal-progress i{background:var(--demo-accent)}

/* Levels: visible progress, clearly labelled planned rewards */
.demo-page .level-hero-game{background:#241e32;border:1px solid #483b5d;box-shadow:none;border-radius:17px}
.demo-page .level-hero-game:after{display:none}
.demo-page .level-orbit{background:conic-gradient(#a99afa 0 78%,#4b425c 78% 100%)}
.demo-page .level-orbit>i{background:var(--demo-accent);color:#fff;box-shadow:none}
.demo-page .level-hero-copy>small,.demo-page .level-hero-copy p{color:#d0c7df}
.demo-page .level-hero-copy h2{font-size:16px}
.demo-page .level-hero-copy p{font-size:10px}
.demo-page .xp-bar.game i{background:#a99afa}
.demo-page .next-reward-card{background:var(--demo-accent-soft);border:1px solid var(--demo-line);color:var(--demo-text);border-radius:15px}
.demo-page .next-reward-card small,.demo-page .next-reward-card p{color:var(--demo-muted);font-size:9px}
.demo-page .next-reward-card strong{color:var(--demo-text);font-size:11px}
.demo-page .reward-icon{background:var(--demo-accent);box-shadow:none}
.demo-page .streak-strip>div,.demo-page .mission,.demo-page .level-row.major{background:var(--demo-surface);color:var(--demo-text);border:1px solid var(--demo-line);box-shadow:none}
.demo-page .streak-strip small,.demo-page .mission small,.demo-page .level-row p,.demo-page .level-row small{font-size:9px;color:var(--demo-muted)}
.demo-page .streak-strip b,.demo-page .mission strong,.demo-page .level-row strong{font-size:10px}
.demo-page .challenge-head strong,.demo-page .level-roadmap-head strong{font-size:12px}
.demo-page .mission>b,.demo-page .level-roadmap-head button{font-size:10px;color:var(--demo-accent-deep)}
.demo-page .level-row.current .level-dot{background:var(--demo-accent);color:#fff;border-color:var(--demo-accent)}
.demo-page .level-row.major .level-dot{background:var(--demo-accent-soft);color:var(--demo-accent-deep);border-color:var(--demo-line)}

/* Friends and Pro */
.demo-page .friends-search{height:46px;background:var(--demo-surface);border-radius:12px}
.demo-page .friends-search input{font-size:16px;color:var(--demo-text)}
.demo-page .friend-chip{min-width:54px;color:var(--demo-text)}
.demo-page .friend-chip b{font-size:10px}
.demo-page .friend-avatar{box-shadow:none}
.demo-page .a1{background:#6552e8}.demo-page .a2{background:#7b67db}.demo-page .a3{background:#5141a9}.demo-page .a4{background:#8577bd}.demo-page .a5{background:#625881}
.demo-page .friend-list-head strong{font-size:12px}.demo-page .friend-list-head small{font-size:10px}
.demo-page .friend-row{background:var(--demo-surface);border-color:var(--demo-line);border-radius:13px;min-height:59px}
.demo-page .friend-row strong{font-size:11px;color:var(--demo-text)}
.demo-page .friend-row small{font-size:9px;color:var(--demo-muted)}
.demo-page .send-friend{min-width:55px;min-height:36px;padding:8px;color:var(--demo-accent-deep);background:var(--demo-accent-soft);border-color:var(--demo-line);font-size:10px}
.demo-page .pro-view{background:var(--demo-surface)}
.demo-page .pro-coming{background:#241e32;border:1px solid #483b5d;border-radius:17px;box-shadow:none}
.demo-page .pro-coming:after{display:none}
.demo-page .pro-coming h2{font-size:25px}
.demo-page .pro-coming p{font-size:11px;line-height:1.55;color:#ded6e8}
.demo-page .pro-coming small{font-size:9px;color:#d1c8df}
.demo-page .pro-mark{background:#6552e8}
.demo-page .pro-metrics article,.demo-page .pro-feature-list article{background:var(--demo-surface);border:1px solid var(--demo-line);box-shadow:none}
.demo-page .pro-metrics small,.demo-page .pro-metrics span,.demo-page .pro-feature-list p,.demo-page .pro-section-title small{font-size:9px;color:var(--demo-muted)}
.demo-page .pro-feature-list strong,.demo-page .pro-section-title strong{font-size:11px;color:var(--demo-text)}
.demo-page .pro-feature-list article>span{background:var(--demo-accent-soft);color:var(--demo-accent-deep)}
.demo-page .pro-cta{display:flex;align-items:center;justify-content:space-between;text-decoration:none;min-height:48px;padding:12px 15px;border-radius:12px;background:#5c48dc;color:#fff;font-size:11px;font-weight:800;transition:transform .14s cubic-bezier(.23,1,.32,1),background-color .18s ease}
.demo-page .pro-cta span{color:#fff}

/* Bottom navigation and simulated transfer */
.demo-page .mobile-tabbar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));height:76px;left:7px;right:7px;bottom:7px;padding:5px 3px 8px;gap:1px;border:1px solid var(--demo-line);border-radius:18px;background:color-mix(in srgb,var(--demo-surface) 94%,transparent);box-shadow:0 10px 25px rgba(32,20,55,.11);backdrop-filter:blur(14px)}
.demo-page .tab-btn{min-width:0;min-height:54px;gap:3px;color:var(--demo-muted)}
.demo-page .tab-btn>span,.demo-page .friends-tab>span,.demo-page .pro-tab>span{display:grid!important;place-items:center!important;width:28px!important;height:27px!important;margin:0!important;border:0!important;border-radius:8px!important;background:transparent!important;box-shadow:none!important;color:inherit!important;font:700 18px/1 DM Sans,sans-serif!important}
.demo-page .tab-btn>b{color:inherit;font-size:9px;white-space:nowrap}
.demo-page .tab-btn.active{color:var(--demo-accent-deep)}
.demo-page .tab-btn.active>span{background:var(--demo-accent-soft)!important;color:var(--demo-accent-deep)!important}
.demo-page .friends-tab b{color:inherit}
.demo-page .send-sheet.open .sheet-card{animation:none}
.demo-page .sheet-card{border-radius:22px;padding:16px;background:var(--demo-surface);color:var(--demo-text);transition:transform .24s cubic-bezier(.23,1,.32,1)}
.demo-page .sheet-amount input{font-size:27px}
.demo-page .sheet-presets button{min-height:40px;font-size:11px;background:var(--demo-surface-2);color:var(--demo-text)}
.demo-page .sheet-send{min-height:46px;background:#5c48dc;color:#fff;font-size:11px;box-shadow:none}
.demo-page .send-sheet:not(.open){visibility:hidden}
.demo-page .send-sheet.open{visibility:visible}
.demo-page .demo-toast{font-size:13px;max-width:min(360px,calc(100vw - 32px));text-align:center}
html[data-theme="dark"] body.demo-page .saving-delta.is-positive{background:var(--demo-accent-soft);color:var(--demo-accent-deep)}
html[data-theme="dark"] body.demo-page .saving-delta.is-positive b,html[data-theme="dark"] body.demo-page .saving-delta.is-positive .saving-delta-arrow{color:var(--demo-accent-deep)}
html[data-theme="dark"] body.demo-page .smart-split-banner{background:#5c48dc;border:0;box-shadow:none}
html[data-theme="dark"] body.demo-page .split-orb{background:rgba(255,255,255,.17);color:#fff}
html[data-theme="dark"] body.demo-page .mobile-mode-selector button.active{background:var(--demo-accent-soft);color:var(--demo-accent-deep);border-color:var(--demo-accent);box-shadow:none}
html[data-theme="dark"] body.demo-page .mobile-mode-selector button.active small{color:var(--demo-accent-deep)}
html[data-theme="dark"] body.demo-page .year-impact,html[data-theme="dark"] body.demo-page .next-reward-card{background:var(--demo-accent-soft);border-color:var(--demo-line)}
html[data-theme="dark"] body.demo-page .mobile-goal,html[data-theme="dark"] body.demo-page .mobile-goal.featured,html[data-theme="dark"] body.demo-page .level-row.major{background:var(--demo-surface);border-color:var(--demo-line)}
html[data-theme="dark"] body.demo-page .mobile-goal.featured{border-color:var(--demo-accent)}
html[data-theme="dark"] body.demo-page .level-hero-game{background:#241e32;border-color:#483b5d;box-shadow:none}
html[data-theme="dark"] body.demo-page .level-orbit{background:conic-gradient(#a99afa 0 78%,#4b425c 78% 100%)}
html[data-theme="dark"] body.demo-page .level-row.major .level-dot{background:var(--demo-accent-soft);border-color:var(--demo-line);color:var(--demo-accent-deep)}
html[data-theme="dark"] body.demo-page .mobile-tabbar{background:color-mix(in srgb,var(--demo-surface) 94%,transparent);border-color:var(--demo-line)}
html[data-theme="dark"] body.demo-page .tab-btn.active{color:var(--demo-accent-deep)}
html[data-theme="dark"] body.demo-page .tab-btn.active>span{background:var(--demo-accent-soft)!important;color:var(--demo-accent-deep)!important}

/* Conversion after the demo */
.demo-bottom{display:flex;gap:40px;align-items:center;justify-content:space-between;margin-bottom:75px;padding:48px;background:#241e32;border-radius:24px;color:#fff}
.demo-bottom .demo-kicker{color:#c7bcff}
.demo-bottom h2{font:800 clamp(1.65rem,3vw,2.6rem)/1.14 Manrope,sans-serif;letter-spacing:-.045em;margin:15px 0 0}
.demo-bottom .btn-primary{background:#6552e8;color:#fff;flex:none}
.demo-bottom .btn-primary:active{transform:scale(.97)}

@media(hover:hover) and (pointer:fine){
  .demo-site-nav .nav-links a:hover,.demo-mobile-menu a:hover{color:var(--demo-accent-deep)}
  .demo-site-nav .btn-ghost:hover,.demo-bottom .btn-primary:hover,.demo-page .pro-cta:hover{background:#4934ca}
  .demo-guide-actions button:hover{border-color:var(--demo-accent)}
  .demo-page .goal-teaser:hover{border-color:var(--demo-accent)}
}
@media(hover:none){
  .demo-page .smart-split-banner:hover{transform:none;box-shadow:none}
  .demo-page .transaction-row:hover{background:transparent}
  .demo-page .btn-primary:hover{transform:none}
  .demo-page .language-current:hover:not([aria-expanded="true"]){background:var(--demo-surface);border-color:var(--demo-line)}
}
@media(max-width:950px){
  .demo-intro{grid-template-columns:1fr;gap:14px;padding-top:72px}
  .demo-intro .demo-kicker,.demo-start-link{grid-column:auto}
  .demo-intro>p{max-width:640px}
  .phone-demo-stage{gap:28px;grid-template-columns:minmax(0,1fr) minmax(320px,390px)}
  .demo-guide-actions{grid-template-columns:1fr}
}
@media(max-width:720px){
  .demo-page .container{width:calc(100% - 32px)}
  .demo-site-nav .nav{min-height:64px;gap:9px}
  .demo-site-nav .nav-links{display:none}
  .demo-site-nav .nav-right-demo{margin-left:auto;gap:8px}
  .demo-mobile-menu{display:block;position:relative}
  .demo-site-nav .theme-label{display:none}
  .demo-page .theme-control{display:flex!important}
  .demo-page .nav-right-demo>.btn-small{display:none!important}
  .demo-intro{padding:48px 0 25px;text-align:left}
  .demo-intro h1{font-size:clamp(2.5rem,10vw,3.75rem)}
  .demo-intro>p{font-size:15px}
  .demo-start-link{margin-top:2px}
  .phone-demo-stage{display:block;width:100%;max-width:none;padding:12px 0 0}
  .demo-guide{position:static;padding:0 16px 22px}
  .demo-guide h2{font-size:1.65rem;margin:10px 0 6px}
  .demo-guide>p{font-size:13px;margin-bottom:0}
  .demo-guide .guide-disclaimer{font-size:11px;margin:10px 0 0}
  .demo-guide-actions{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;gap:8px;margin:17px -16px 0;padding:0 16px 9px}
  .demo-guide-actions::-webkit-scrollbar{display:none}
  .demo-guide-actions button{flex:0 0 145px;min-height:66px;scroll-snap-align:start;grid-template-columns:22px 1fr;padding:10px;gap:5px}
  .demo-guide-actions button>span{font-size:9px}
  .demo-guide-actions strong{font-size:11px}
  .demo-guide-actions small{font-size:9px}
  .demo-guide-actions b{display:none}
  .phone-shell-wrap{width:100%;max-width:none}
  .demo-page .phone-shell{width:100%;max-width:none;height:auto;min-height:calc(100dvh - 64px);padding:0;margin:0;background:var(--demo-surface);border-radius:0;box-shadow:none}
  .demo-page .phone-hardware,.demo-page .phone-shell:before,.demo-page .phone-shell:after{display:none}
  .demo-page .phone-screen{height:calc(100dvh - 64px);min-height:0;border-radius:0;padding-top:env(safe-area-inset-top,0px)}
  .demo-page .phone-screen{scroll-margin-top:64px}
  .demo-page .mobile-view{height:calc(100% - 48px);padding-left:16px;padding-right:16px;padding-bottom:calc(105px + env(safe-area-inset-bottom,0px))}
  .demo-page .mobile-tabbar{bottom:max(7px,env(safe-area-inset-bottom,0px));padding-bottom:8px}
  .demo-bottom{width:calc(100% - 32px);margin:30px auto;padding:30px;align-items:flex-start;flex-direction:column;gap:22px}
  .demo-bottom .btn{min-height:48px}
}
@media(max-width:480px){
  .demo-site-nav .brand img{width:30px;height:30px}
  .demo-site-nav .brand span{font-size:1.3rem}
  .demo-page .language-current{width:44px;min-height:42px;justify-content:center}
  .demo-page .ios-switch{min-width:44px}
  .demo-page .mobile-view{padding-left:14px;padding-right:14px}
  .demo-page .tx-main strong,.demo-page .tx-amount strong{font-size:10px}
  .demo-page .tx-main small,.demo-page .tx-amount small{font-size:8px}
  .demo-page .mobile-tabbar{left:5px;right:5px}
  .demo-page .tab-btn>b{font-size:9px}
  .demo-page .spendable-hero>strong{font-size:36px}
}
@media(max-width:350px){.demo-page .tab-btn>b{font-size:8px}.demo-page .goal-teaser{gap:7px;padding:10px}}
@media(prefers-reduced-motion:reduce){
  .demo-page .ios-switch,.demo-page .ios-switch span,.demo-page .demo-guide-actions button,.demo-page .pro-cta,.demo-page .sheet-card{transition-duration:.01ms}
}