.cx-root { min-height:100vh; color:#14212a; background:radial-gradient(circle at 50% -10%,rgba(0,159,223,.13),transparent 30%),#edf2f3; font-family:"DM Sans",sans-serif; }
.cx-root button,.cx-root input { font:inherit; }
.cx-demo-bar { position:sticky; top:0; z-index:30; height:72px; padding:0 26px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid #dbe3e6; background:rgba(250,252,252,.92); backdrop-filter:blur(22px); }
.cx-demo-brand { display:flex; align-items:center; gap:10px; font:700 13px "Manrope"; }
.cx-demo-brand img { width:34px; height:34px; object-fit:cover; border-radius:10px; mix-blend-mode:multiply; }
.cx-demo-brand small { display:block; margin-top:2px; color:#7c898f; font:500 8px "DM Sans"; letter-spacing:.08em; text-transform:uppercase; }
.cx-demo-modes { display:flex; align-items:center; gap:12px; }
.cx-demo-modes > span { color:#7d8a91; font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.cx-demo-modes > div { padding:3px; display:flex; border:1px solid #d9e1e4; border-radius:10px; background:#eef2f3; }
.cx-demo-modes button { min-height:32px; padding:0 13px; border:0; border-radius:7px; color:#6d7980; background:transparent; cursor:pointer; font-size:10px; }
.cx-demo-modes button.active { color:#075f81; background:#fff; box-shadow:0 3px 11px rgba(25,50,63,.08); font-weight:700; }
.cx-demo-actions { justify-self:end; display:flex; align-items:center; gap:10px; }
.cx-demo-actions > button { min-height:36px; padding:0 12px; border:1px solid #d5dfe2; border-radius:9px; background:#fff; cursor:pointer; font-size:10px; }
.cx-live { padding:6px 9px; display:inline-flex; align-items:center; gap:6px; border-radius:99px; color:#176f59; background:#e8f6f1; font-size:9px; font-weight:700; }
.cx-live i { width:6px; height:6px; border-radius:50%; background:#168568; }
.cx-stage { min-height:calc(100vh - 72px); padding:36px 40px 60px; display:grid; grid-template-columns:minmax(230px,280px) minmax(390px,460px) minmax(220px,280px); justify-content:center; align-items:start; gap:42px; }
.cx-story-rail,.cx-context-rail { position:sticky; top:108px; }
.cx-story-rail { padding:25px; color:#fff; border-radius:22px; background:linear-gradient(150deg,#17384a,#0b6b91); box-shadow:0 25px 60px rgba(19,57,76,.17); }
.cx-rail-kicker { color:#79d0ef; font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.cx-story-rail h2 { margin:10px 0 9px; font-size:26px; line-height:1.16; }
.cx-story-rail > p { color:rgba(255,255,255,.65); font-size:10px; line-height:1.55; }
.cx-story-steps { margin-top:25px; display:grid; gap:16px; }
.cx-story-step { display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.48); }
.cx-story-step i { width:27px; height:27px; display:grid; place-items:center; flex:0 0 auto; border:1px solid rgba(255,255,255,.22); border-radius:50%; font-size:9px; font-style:normal; }
.cx-story-step b,.cx-story-step small { display:block; }
.cx-story-step span { font-size:10px; font-weight:600; }
.cx-story-step small { margin-top:2px; color:inherit; font-size:7px; font-weight:500; }
.cx-story-step.active { color:#fff; }
.cx-story-step.active i { border-color:#72d3f1; background:#079ed7; box-shadow:0 0 0 5px rgba(66,190,231,.1); }
.cx-story-step.done { color:#9ee1cb; }
.cx-story-step.done i { color:#125d4b; border-color:#9ee1cb; background:#9ee1cb; }
.cx-rail-note { margin-top:25px; padding:12px; display:flex; gap:9px; border:1px solid rgba(255,255,255,.1); border-radius:12px; background:rgba(255,255,255,.07); }
.cx-rail-note > span { color:#85d8f3; }
.cx-rail-note b,.cx-rail-note small { display:block; }
.cx-rail-note b { font-size:9px; }
.cx-rail-note small { margin-top:4px; color:rgba(255,255,255,.57); font-size:7px; line-height:1.4; }
.cx-device { min-height:780px; overflow:hidden; border:9px solid #162e3c; border-radius:42px; background:#fff; box-shadow:0 34px 85px rgba(14,41,56,.2); }
.cx-device-top { height:27px; padding:0 20px; display:flex; align-items:center; justify-content:space-between; color:#fff; background:#162e3c; font-size:8px; }
.cx-device-top i { width:74px; height:18px; margin-top:-8px; border-radius:0 0 13px 13px; background:#162e3c; }
.cx-app { min-height:744px; background:#fff; }
.cx-bank-header { height:62px; padding:0 16px; display:flex; align-items:center; border-bottom:1px solid #e5eaec; background:#fff; }
.cx-icon-btn { width:36px; height:36px; display:grid; place-items:center; border:0; border-radius:10px; color:#52626b; background:#f1f5f6; cursor:pointer; }
.cx-bank-header > .cx-icon-btn:last-child { margin-left:auto; }
.cx-menu-lines,.cx-menu-lines::before,.cx-menu-lines::after { width:15px; height:1.5px; display:block; background:currentColor; content:""; }
.cx-menu-lines::before { transform:translateY(-5px); }
.cx-menu-lines::after { transform:translateY(3.5px); }
.cx-bank-brand { margin-left:10px; display:flex; align-items:center; gap:8px; font-weight:700; font-size:10px; }
.cx-bank-brand small { display:block; margin-top:2px; color:#849096; font-size:7px; font-weight:500; }
.cx-apex-mark,.cx-account-mark { display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,#15394e,#079ed7); font-weight:700; }
.cx-apex-mark { width:29px; height:29px; border-radius:9px; }
.cx-progress { height:3px; background:#edf1f2; }
.cx-progress span { height:100%; display:block; border-radius:0 99px 99px 0; background:#079ed7; transition:width .3s ease; }
.cx-progress-label { padding:8px 17px 0; display:flex; justify-content:space-between; color:#8a969c; font-size:7px; }
.cx-screen { min-height:660px; padding:22px 20px 26px; }
.cx-eyebrow { margin-bottom:8px; color:#0784b3; font-size:8px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }
.cx-eyebrow.light { color:#a5e5fb; }
.cx-screen-intro h1,.cx-empty-offer h1,.cx-offer-hero h1,.cx-verify-hero h1,.cx-identity-hero h1 { margin:0 0 10px; font:600 26px/1.16 "Manrope"; letter-spacing:-.035em; }
.cx-screen-intro p,.cx-empty-offer p,.cx-offer-hero p,.cx-verify-hero p,.cx-identity-hero p { margin:0; color:#708087; font-size:10px; line-height:1.55; }
.cx-screen-intro.centered { text-align:center; }
.cx-bottom-action { margin-top:24px; display:grid; gap:9px; }
.cx-primary,.cx-secondary { min-height:44px; padding:0 15px; border-radius:12px; cursor:pointer; font-weight:700; font-size:11px; }
.cx-primary { display:flex; align-items:center; justify-content:center; gap:9px; color:#fff; border:0; background:linear-gradient(135deg,#0a9ed7,#087ba9); box-shadow:0 9px 22px rgba(0,126,183,.2); }
.cx-secondary { border:1px solid #d5dfe2; color:#42545e; background:#fff; }
.cx-secondary.wide { width:100%; }
.cx-safe-note { color:#879299; font-size:7px; text-align:center; }
.cx-safe-note span { color:#168568; }
.cx-soft-orb { position:absolute; border-radius:50%; background:rgba(255,255,255,.07); }
.cx-soft-orb.one { width:180px; height:180px; right:-60px; top:-70px; }
.cx-soft-orb.two { width:95px; height:95px; left:-40px; bottom:-20px; }
.cx-offer-hero,.cx-final-hero,.cx-success-hero { position:relative; margin:-22px -20px 0; padding:41px 22px 34px; overflow:hidden; color:#fff; background:linear-gradient(150deg,#17394d,#087ba9); text-align:center; }
.cx-offer-hero h1 { color:#fff; }
.cx-offer-hero p,.cx-final-hero p,.cx-success-hero p { color:rgba(255,255,255,.67); }
.cx-up-to { margin-top:25px; color:rgba(255,255,255,.6); font-size:8px; }
.cx-hero-amount,.cx-success-hero > strong { display:block; margin:4px 0 8px; font:700 38px "Manrope"; letter-spacing:-.05em; }
.cx-offer-assurance { margin:16px 0; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cx-offer-assurance > div,.cx-calm-card { padding:12px; display:flex; align-items:flex-start; gap:8px; border:1px solid #e0e7e9; border-radius:12px; background:#fbfcfc; }
.cx-offer-assurance span,.cx-calm-card > span { color:#168568; }
.cx-offer-assurance b,.cx-offer-assurance small,.cx-calm-card b,.cx-calm-card small { display:block; }
.cx-offer-assurance b,.cx-calm-card b { font-size:9px; }
.cx-offer-assurance small,.cx-calm-card small { margin-top:3px; color:#7c898f; font-size:7px; line-height:1.35; }
.cx-gentle-note,.cx-explain-note,.cx-privacy-line { margin-top:15px; padding:12px; border-radius:11px; color:#765f28; background:#fff8e8; font-size:8px; line-height:1.5; }
.cx-explain-note { display:flex; gap:8px; }
.cx-explain-note > span { width:19px; height:19px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:rgba(181,120,17,.1); }
.cx-explain-note p { margin:0; }
.cx-explain-note.calm { color:#24604e; background:#eaf7f2; }
.cx-empty-offer { padding-top:45px; text-align:center; }
.cx-wait-orb,.cx-confirm-icon { width:62px; height:62px; margin:0 auto 22px; display:grid; place-items:center; border-radius:20px; color:#0787b7; background:#e8f7fc; font:700 20px "Manrope"; }
.cx-empty-offer .cx-calm-card { margin:20px 0; text-align:left; }
.cx-control-card,.cx-emi-card,.cx-confirm-card,.cx-cooling-card,.cx-support-card { margin-top:17px; padding:15px; border:1px solid #dde5e7; border-radius:14px; background:#fbfcfc; }
.cx-control-head { display:flex; align-items:center; justify-content:space-between; font-size:10px; }
.cx-control-head strong { font:600 19px "Manrope"; }
.cx-range { width:100%; margin:17px 0 5px; accent-color:#079ed7; }
.cx-range-ends { display:flex; justify-content:space-between; color:#95a0a6; font-size:7px; }
.cx-field-label { margin:20px 0 8px; color:#6f7c83; font-size:8px; font-weight:600; }
.cx-tenure-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; }
.cx-tenure-grid button { min-height:45px; border:1px solid #dce4e6; border-radius:9px; background:#fff; cursor:pointer; font-size:10px; }
.cx-tenure-grid button.active { color:#05769f; border-color:#79c8e3; background:#eaf8fd; font-weight:700; }
.cx-tenure-grid small { display:block; margin-top:2px; color:#89959b; font-size:6px; }
.cx-emi-card { display:flex; align-items:center; justify-content:space-between; color:#fff; border:0; background:linear-gradient(145deg,#183c50,#0b779f); }
.cx-emi-card span,.cx-emi-card small { display:block; color:rgba(255,255,255,.62); font-size:7px; }
.cx-emi-card strong { display:block; margin:4px 0; font:600 23px "Manrope"; }
.cx-apr-pill { padding:6px 8px; border-radius:99px; background:rgba(255,255,255,.12); color:#fff!important; font-weight:700; }
.cx-emi-card.light { color:#16232b; background:#f4f8f9; border:1px solid #dde5e7; }
.cx-emi-card.light span,.cx-emi-card.light small { color:#748188; }
.cx-price-table { margin-top:14px; overflow:hidden; border:1px solid #e0e6e8; border-radius:12px; }
.cx-price-table > div,.cx-context-row,.cx-sheet-summary > div { padding:10px 12px; display:flex; justify-content:space-between; border-bottom:1px solid #e7ecee; font-size:9px; }
.cx-price-table > div:last-child,.cx-context-row:last-child { border:0; }
.cx-price-table span { color:#708087; }
.cx-price-table .total { background:#f4f8f9; font-weight:700; }
.cx-info { width:15px; height:15px; border:0; border-radius:50%; color:#53717f; background:#e8eef0; font-size:7px; cursor:pointer; }
.cx-doc-link { width:100%; margin-top:12px; padding:12px; display:flex; align-items:center; gap:9px; border:1px solid #dce4e6; border-radius:11px; background:#fff; cursor:pointer; text-align:left; }
.cx-doc-link b,.cx-doc-link small { display:block; }
.cx-doc-link b { font-size:9px; }
.cx-doc-link small { margin-top:3px; color:#819097; font-size:7px; }
.cx-doc-link i { margin-left:auto; font-style:normal; }
.cx-reason-list,.cx-verify-list,.cx-aa-steps,.cx-grievance { margin-top:18px; display:grid; gap:9px; }
.cx-reason-list > div,.cx-verify-list > div,.cx-aa-steps > div,.cx-grievance > div { padding:12px; display:flex; gap:10px; border:1px solid #e0e7e9; border-radius:11px; background:#fbfcfc; }
.cx-reason-list i,.cx-verify-list i,.cx-aa-steps i,.cx-grievance > div > span { width:25px; height:25px; display:grid; place-items:center; flex:0 0 auto; border-radius:8px; color:#087fae; background:#e7f6fb; font-style:normal; font-size:9px; }
.cx-reason-list b,.cx-reason-list small,.cx-verify-list b,.cx-verify-list small,.cx-aa-steps b,.cx-aa-steps small { display:block; }
.cx-reason-list b,.cx-verify-list b,.cx-aa-steps b { font-size:9px; }
.cx-reason-list small,.cx-verify-list small,.cx-aa-steps small { margin-top:3px; color:#77868d; font-size:7px; line-height:1.4; }
.cx-prefill-list,.cx-term-grid,.cx-permission-list { margin-top:17px; display:grid; border:1px solid #e0e6e8; border-radius:13px; overflow:hidden; }
.cx-prefill-list > div { padding:11px 12px; display:flex; align-items:center; gap:10px; border-bottom:1px solid #e5eaec; }
.cx-prefill-list > div:last-child { border:0; }
.cx-prefill-list span small,.cx-prefill-list span b { display:block; }
.cx-prefill-list span small { color:#819097; font-size:7px; }
.cx-prefill-list span b { margin-top:3px; font-size:9px; }
.cx-prefill-list i { margin-left:auto; color:#168568; font-style:normal; }
.cx-prefill-list button { margin-left:5px; border:0; color:#087fae; background:transparent; font-size:8px; font-weight:700; cursor:pointer; }
.cx-prefill-list.compact { margin-top:16px; }
.cx-consent-card { margin-top:12px; padding:13px; display:block; border:1px solid #dce4e6; border-radius:13px; cursor:pointer; }
.cx-consent-card.required { border-color:#b6dae6; }
.cx-consent-head { display:flex; align-items:center; gap:9px; }
.cx-consent-icon { width:29px; height:29px; display:grid; place-items:center; border-radius:9px; color:#087ca8; background:#e7f6fb; font-size:7px; font-weight:700; }
.cx-consent-icon.alt { color:#765f28; background:#fff5dd; }
.cx-consent-head b,.cx-consent-head small { display:block; }
.cx-consent-head b { font-size:9px; }
.cx-consent-head small { margin-top:2px; color:#7b888f; font-size:7px; }
.cx-consent-head input { margin-left:auto; width:19px; height:19px; accent-color:#078ab9; }
.cx-consent-card > p { color:#77858c; font-size:8px; line-height:1.45; }
.cx-consent-meta { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cx-consent-meta span { font-size:7px; font-weight:600; }
.cx-consent-meta small { display:block; margin-bottom:2px; color:#8a969c; font-size:6px; font-weight:500; }
.cx-aa-steps > div.active { border-color:#7dcbe5; background:#eef9fc; }
.cx-aa-steps > div.done i { color:#fff; background:#168568; }
.cx-aa-review,.cx-summary-grid,.cx-term-grid { margin-top:15px; display:grid; grid-template-columns:1fr 1fr; gap:1px; overflow:hidden; border:1px solid #e0e6e8; border-radius:12px; background:#e0e6e8; }
.cx-aa-review > div,.cx-summary-grid > div,.cx-term-grid > div { padding:11px; background:#fbfcfc; }
.cx-aa-review span,.cx-aa-review b,.cx-summary-grid span,.cx-summary-grid b,.cx-term-grid span,.cx-term-grid b { display:block; }
.cx-aa-review span,.cx-summary-grid span,.cx-term-grid span { color:#829097; font-size:7px; }
.cx-aa-review b,.cx-summary-grid b,.cx-term-grid b { margin-top:4px; font-size:9px; }
.cx-verify-hero,.cx-identity-hero { padding-top:16px; text-align:center; }
.cx-verify-ring,.cx-identity-check { width:62px; height:62px; margin:0 auto 18px; display:grid; place-items:center; border-radius:50%; color:#168568; background:#e8f6f1; font-size:21px; }
.cx-final-hero { padding-bottom:28px; }
.cx-final-hero h1 { margin:0 0 10px; font:600 24px/1.2 "Manrope"; letter-spacing:-.03em; }
.cx-final-hero > span,.cx-final-hero > strong,.cx-final-hero > small { display:block; }
.cx-final-hero > strong { margin:7px 0; font:700 34px "Manrope"; }
.cx-final-hero > small { color:rgba(255,255,255,.65); font-size:7px; }
.cx-doc-grid { margin-top:13px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cx-doc-grid button { min-height:84px; padding:11px; display:grid; justify-items:start; align-content:center; border:1px solid #dce4e6; border-radius:11px; background:#fff; cursor:pointer; text-align:left; }
.cx-doc-grid button > span { color:#087ea9; }
.cx-doc-grid b,.cx-doc-grid small { display:block; }
.cx-doc-grid b { margin-top:5px; font-size:8px; }
.cx-doc-grid small { margin-top:3px; color:#7c898f; font-size:6px; }
.cx-agree-check { margin-top:14px; padding:12px; display:flex; gap:9px; border:1px solid #dce4e6; border-radius:11px; cursor:pointer; font-size:8px; line-height:1.45; }
.cx-agree-check input { width:18px; height:18px; accent-color:#078ab9; }
.cx-mandate-card { display:flex; align-items:center; gap:10px; }
.cx-account-mark { width:38px; height:38px; border-radius:11px; }
.cx-mandate-card small,.cx-mandate-card b,.cx-mandate-card span { display:block; }
.cx-mandate-card small,.cx-mandate-card span { color:#7d8a91; font-size:7px; }
.cx-mandate-card b { margin:3px 0; font-size:9px; }
.cx-mandate-card > i { margin-left:auto; color:#168568; font-style:normal; }
.cx-confirm-card { overflow:hidden; padding:0; }
.cx-confirm-main { padding:20px!important; display:block!important; color:#fff; background:linear-gradient(145deg,#193b4e,#0b769e); }
.cx-confirm-main span,.cx-confirm-main b,.cx-confirm-main small { display:block; }
.cx-confirm-main b { margin:5px 0; font:700 26px "Manrope"; }
.cx-confirm-main small { color:rgba(255,255,255,.65); font-size:7px; }
.cx-confirm-card > div { padding:9px 12px; display:flex; justify-content:space-between; border-bottom:1px solid #e6ebed; font-size:8px; }
.cx-success-bloom { width:70px; height:70px; margin:0 auto 15px; display:grid; place-items:center; border-radius:50%; color:#0b7258; background:#abecd4; font-size:25px; }
.cx-status-timeline { margin:18px 0; display:flex; align-items:start; justify-content:space-between; }
.cx-status-timeline > div { flex:1; position:relative; display:grid; justify-items:center; gap:5px; color:#8b979d; font-size:6px; }
.cx-status-timeline > div::after { content:""; position:absolute; top:8px; left:60%; width:80%; height:1px; background:#dce4e7; }
.cx-status-timeline > div:last-child::after { display:none; }
.cx-status-timeline i { z-index:1; width:17px; height:17px; display:grid; place-items:center; border-radius:50%; background:#eef2f3; font-style:normal; }
.cx-status-timeline .complete i { color:#fff; background:#168568; }
.cx-status-timeline .current i { color:#fff; background:#079ed7; }
.cx-action-grid { margin-top:14px; display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.cx-action-grid button { min-height:70px; display:grid; place-items:center; align-content:center; gap:5px; border:1px solid #dce4e6; border-radius:11px; background:#fff; cursor:pointer; font-size:8px; }
.cx-home-greeting { display:flex; align-items:center; }
.cx-home-greeting span { color:#77858c; font-size:8px; }
.cx-home-greeting h1 { margin:2px 0 0; font:600 24px "Manrope"; }
.cx-round-avatar { width:39px; height:39px; margin-left:auto; border:0; border-radius:50%; color:#fff; background:#17394c; font-size:9px; }
.cx-loan-card { margin-top:16px; padding:17px; border-radius:16px; color:#fff; background:linear-gradient(145deg,#173a4e,#087ba7); }
.cx-loan-card-top { display:flex; justify-content:space-between; color:rgba(255,255,255,.7); font-size:7px; }
.cx-loan-card-top i { padding:4px 6px; border-radius:99px; color:#c9f4e4; background:rgba(255,255,255,.1); font-style:normal; }
.cx-loan-card > small { display:block; margin-top:20px; color:rgba(255,255,255,.6); font-size:7px; }
.cx-loan-card > strong { display:block; margin:4px 0 18px; font:700 27px "Manrope"; }
.cx-loan-card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.cx-loan-card-grid div { padding:8px; border-radius:8px; background:rgba(255,255,255,.09); }
.cx-loan-card-grid span,.cx-loan-card-grid b { display:block; }
.cx-loan-card-grid span { color:rgba(255,255,255,.58); font-size:6px; }
.cx-loan-card-grid b { margin-top:3px; font-size:8px; }
.cx-loan-card > button,.cx-cooling-card > button { margin-top:14px; border:0; color:#c9effd; background:transparent; font-size:8px; font-weight:700; cursor:pointer; }
.cx-home-section { margin-top:19px; }
.cx-home-section h2 { font-size:14px; }
.cx-home-actions { border:1px solid #dfe6e8; border-radius:12px; overflow:hidden; }
.cx-home-actions button { width:100%; min-height:47px; padding:0 12px; display:flex; align-items:center; gap:9px; border:0; border-bottom:1px solid #e5eaec; background:#fff; cursor:pointer; font-size:9px; text-align:left; }
.cx-home-actions button:last-child { border:0; }
.cx-home-actions i { width:25px; height:25px; display:grid; place-items:center; border-radius:7px; color:#087fae; background:#e8f6fb; font-style:normal; }
.cx-home-actions b { margin-left:auto; }
.cx-cooling-card div { display:flex; justify-content:space-between; font-size:9px; }
.cx-cooling-card p { color:#76848b; font-size:7px; line-height:1.45; }
.cx-support-primary { margin-top:17px; display:grid; gap:8px; }
.cx-support-primary button { padding:12px; display:grid; grid-template-columns:30px 1fr; align-items:center; border:1px solid #dde5e7; border-radius:11px; background:#fff; text-align:left; cursor:pointer; }
.cx-support-primary button span { grid-row:1/3; width:27px; height:27px; display:grid; place-items:center; border-radius:8px; color:#087fae; background:#e8f6fb; }
.cx-support-primary b,.cx-support-primary small { display:block; }
.cx-support-primary b { font-size:9px; }
.cx-support-primary small { color:#7f8c92; font-size:7px; }
.cx-input-row { display:flex; gap:7px; }
.cx-input-row input { flex:1; min-width:0; height:38px; padding:0 9px; border:1px solid #d6e0e3; border-radius:9px; font-size:8px; }
.cx-input-row button { padding:0 12px; border:0; border-radius:9px; color:#fff; background:#087fae; font-size:8px; }
.cx-grievance p { margin:0; font-size:8px; line-height:1.45; }
.cx-grievance b { display:block; }
.cx-permission-list > div { padding:13px; border-bottom:1px solid #e2e8ea; }
.cx-permission-title { display:flex; align-items:center; gap:8px; }
.cx-permission-title i { margin-left:auto; padding:4px 6px; border-radius:99px; color:#6e7b82; background:#edf1f2; font-size:6px; font-style:normal; }
.cx-permission-title i.active { color:#136c56; background:#e8f6f1; }
.cx-permission-list p { display:flex; justify-content:space-between; font-size:7px; }
.cx-permission-list p span { color:#819097; }
.cx-permission-list button { border:0; color:#087fae; background:transparent; font-size:8px; font-weight:700; }
.cx-context-rail { display:grid; gap:12px; }
.cx-context-card { padding:17px; border:1px solid #dce4e6; border-radius:17px; background:rgba(255,255,255,.9); box-shadow:0 12px 35px rgba(24,49,62,.07); }
.cx-person { margin:15px 0; display:flex; align-items:center; gap:9px; }
.cx-person > span { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:#fff; background:#173a4e; font-size:9px; }
.cx-person b,.cx-person small { display:block; }
.cx-person b { font-size:10px; }
.cx-person small { margin-top:2px; color:#839097; font-size:7px; }
.cx-context-row { padding-left:0; padding-right:0; font-size:8px; }
.cx-context-row span { color:#7c898f; }
.cx-context-row b.green { color:#168568; }.cx-context-row b.blue { color:#087fae; }.cx-context-row b.amber { color:#a66b0d; }
.cx-text-button { margin-top:13px; border:0; color:#087fae; background:transparent; font-size:8px; font-weight:700; cursor:pointer; }
.cx-context-card.compact b { font-size:9px; }
.cx-context-card.compact p { margin:6px 0 0; color:#7d8a91; font-size:7px; line-height:1.45; }
.cx-sheet-backdrop { position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:20px; background:rgba(13,29,39,.42); backdrop-filter:blur(6px); }
.cx-sheet { width:min(480px,100%); max-height:85vh; padding:22px; overflow:auto; border-radius:22px; background:#fff; box-shadow:0 30px 90px rgba(12,30,40,.3); }
.cx-sheet-handle { width:42px; height:4px; margin:-10px auto 17px; border-radius:99px; background:#d6dfe2; }
.cx-sheet-head { display:flex; align-items:start; gap:12px; }
.cx-sheet-head h2 { margin:4px 0 0; }
.cx-sheet-head button { margin-left:auto; width:34px; height:34px; border:0; border-radius:9px; background:#eef2f3; }
.cx-sheet-summary { margin:15px 0; border:1px solid #e1e7e9; border-radius:12px; overflow:hidden; }
.cx-sheet h3 { font-size:12px; }
.cx-sheet p { color:#6f7d84; font-size:9px; line-height:1.55; }
.cx-sheet > .cx-primary { width:100%; margin-top:15px; }
.cx-sheet-docs { display:grid; gap:7px; margin:15px 0; }
.cx-sheet-docs button { padding:12px; display:flex; justify-content:space-between; border:1px solid #dce4e6; border-radius:10px; background:#fff; font-size:9px; }

@media (max-width:1100px) {
  .cx-stage { grid-template-columns:minmax(190px,230px) minmax(370px,430px); gap:24px; }
  .cx-context-rail { display:none; }
}
@media (max-width:760px) {
  .cx-demo-bar { grid-template-columns:1fr auto; padding:0 14px; }
  .cx-demo-modes { display:none; }
  .cx-live { display:none; }
  .cx-stage { padding:22px 12px 45px; grid-template-columns:1fr; }
  .cx-story-rail { position:static; padding:16px; }
  .cx-story-rail h2,.cx-story-rail > p,.cx-rail-note { display:none; }
  .cx-story-steps { margin-top:10px; grid-template-columns:repeat(5,1fr); gap:5px; }
  .cx-story-step { justify-content:center; }
  .cx-story-step span { display:none; }
  .cx-device { width:100%; max-width:460px; margin:auto; min-height:0; border-width:6px; border-radius:32px; }
}
@media (max-width:430px) {
  .cx-demo-actions > button { padding:0 8px; }
  .cx-demo-brand small { display:none; }
  .cx-stage { padding-left:0; padding-right:0; }
  .cx-story-rail { margin:0 10px; }
  .cx-device { border-left:0; border-right:0; border-radius:0; }
  .cx-screen { padding-left:16px; padding-right:16px; }
  .cx-offer-hero,.cx-final-hero,.cx-success-hero { margin-left:-16px; margin-right:-16px; }
}