/* Altagora framing; embedded screens use Finapp's actual dark palette. */
.product-tour,.product-split { --demo-canvas:#101522; --demo-panel:#171d2b; --demo-card:#20263a; --demo-control:#26304a; --demo-border:#303850; --demo-text:#e9eef8; --demo-muted:#a9b6cb; --demo-accent:#a5b4fc; --demo-action:#4f8dff; --demo-positive:#20d99f; background:var(--fin-canvas); color:var(--demo-text); border-block:1px solid var(--demo-border); }
.finapp .product-tour,.finapp .product-split { padding-block:64px; }
.product-preview { width:100%; max-width:1080px; margin-inline:auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px); gap:clamp(32px,6vw,88px); align-items:center; }
.product-preview [hidden] { display:none!important; }
.tour-heading .eyebrow,.finapp .split-copy .eyebrow { margin:0 0 16px; color:var(--demo-accent); font-size:12px; letter-spacing:.1em; }
.tour-heading h2 { font-size:clamp(30px,2.8vw,42px); font-weight:400; letter-spacing:-.04em; line-height:1.15; margin:0; }
.tour-heading h2 em { color:var(--demo-text); font-style:normal; }
.tour-lead { margin:20px 0 0; color:var(--demo-muted); font-size:16px; line-height:1.65; max-width:35em; }
.tour-workspace { min-width:0; width:100%; }
.tour-demo,.split-example { border:1px solid var(--demo-border); border-radius:16px; overflow:hidden; background:var(--demo-panel); box-shadow:0 12px 36px #0002; font-family:'Segoe UI',Arial,sans-serif; }
.finapp-demo-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 18px; border-bottom:1px solid var(--demo-border); background:var(--demo-panel); }
.finapp-demo-brand { display:flex; align-items:center; gap:9px; font-size:15px; font-weight:600; }
.finapp-demo-icon { display:grid; place-items:center; width:29px; height:29px; border-radius:8px; color:var(--demo-action); background:#172b4d; }
.finapp-demo-icon svg { width:18px; height:18px; }
.finapp-demo-note { max-width:150px; font-size:11px; text-align:right; line-height:1.4; color:var(--demo-muted); }
.tour-app-content,.split-app-content { padding:16px; }
.finapp-demo-title { margin:0 0 14px; font-size:17px; font-weight:600; line-height:1.4; letter-spacing:-.02em; }
.tour-budget-name { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.tour-currency-icon { display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:var(--demo-action); color:#101522; font-size:18px; font-weight:600; }
.tour-budget-name strong { display:block; font-size:14px; font-weight:600; }
.tour-budget-name div>span { display:block; font-size:12px; color:var(--demo-muted); margin-top:1px; }
.tour-budget-card { border:1px solid #35405a; border-radius:14px; padding:14px 16px; background:var(--demo-control); }
.tour-field-label { font-size:12px; color:var(--demo-muted); }
.tour-balance { display:block; font-size:38px; font-weight:650; line-height:1.2; letter-spacing:-.035em; color:var(--demo-positive); margin:3px 0 12px; font-variant-numeric:tabular-nums; }
.tour-progress-label { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--demo-muted); font-size:11px; margin:10px 0 5px; }
.tour-progress-label b { font-weight:400; }
.tour-budget-track { height:3px; background:#39445e; border-radius:4px; overflow:hidden; }
.tour-budget-track>span { display:block; width:0; height:100%; background:var(--demo-action); border-radius:inherit; }
.tour-budget-status { display:flex; justify-content:space-between; gap:12px; margin-top:9px; font-size:11px; color:var(--demo-muted); }
.tour-budget-status>span:first-child { color:var(--demo-positive); }
.tour-overview { display:grid; gap:12px; }
.tour-today { padding:12px; border:1px solid var(--demo-border); background:var(--demo-control); border-radius:14px; }
.tour-today h4 { margin:0 0 9px; font-size:13px; font-weight:600; }
.tour-today-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.tour-today-grid>div { padding:10px 11px; border-radius:9px; background:var(--demo-card); min-width:0; }
.tour-today-grid span { display:block; font-size:11px; line-height:1.4; color:var(--demo-muted); }
.tour-today-grid strong { display:block; margin-top:3px; font-size:19px; font-weight:600; line-height:1.3; font-variant-numeric:tabular-nums; }
.tour-today-grid .tour-available { color:var(--demo-positive); }
.tour-purchase { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; }
.tour-purchase>div { display:flex; align-items:center; gap:8px; }
.tour-purchase-icon { display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:#3c2536; color:#ff8fa4; font-size:18px; flex-shrink:0; }
.tour-purchase strong,.tour-purchase>div>div>span { display:block; }
.tour-purchase strong { font-size:13px; font-weight:600; }
.tour-purchase>div>div>span { font-size:11px; color:var(--demo-muted); margin-top:2px; }
.tour-purchase button { display:flex; justify-content:center; align-items:center; gap:8px; min-height:40px; border:1px solid transparent; background:var(--demo-action); color:#071426; border-radius:8px; padding:8px 12px; font-size:12px; font-weight:600; }
.tour-purchase button:hover { background:#76a5ff; }
.tour-purchase button[data-recorded="true"] { background:var(--demo-control); color:var(--demo-text); border-color:#4a5876; }
.tour-purchase button>span:last-child { font-size:17px; line-height:1; }
.product-preview :focus-visible,.product-split :focus-visible { outline:2px solid #8bc1ff; outline-offset:3px; }
.tour-demo-feedback { margin:12px 0 0; min-height:3em; font-size:12px; line-height:1.5; color:var(--demo-muted); }
.tour-gallery-open,.split-how summary { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:48px; padding:12px 15px; color:var(--demo-text); font-size:14px; cursor:pointer; list-style:none; }
.tour-gallery-open { width:100%; margin-top:12px; border:1px solid var(--demo-border); border-radius:10px; background:transparent; text-align:left; }
.split-how summary::-webkit-details-marker { display:none; }
.tour-gallery-open>span,.split-how summary>span { color:var(--demo-accent); font-size:20px; line-height:1; }
.split-how[open]>summary { border-bottom:1px solid var(--demo-border); }
.split-how[open]>summary>span { transform:rotate(45deg); }
.tour-gallery-open:hover,.split-how summary:hover { background:#ffffff05; }
html.preview-modal-open { overflow:hidden; scroll-snap-type:none; scrollbar-gutter:stable; }
.tour-gallery-modal { width:min(1180px,calc(100% - 40px)); max-width:none; max-height:calc(100svh - 40px); margin:auto; padding:0; overflow:auto; overscroll-behavior:contain; border:1px solid var(--demo-border); border-radius:16px; background:var(--demo-canvas); color:var(--demo-text); box-shadow:0 24px 100px #0007; }
.tour-gallery-modal::backdrop { background:#080b13cc; }
.tour-modal-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 20px; border-bottom:1px solid var(--demo-border); }
.tour-modal-header h2 { margin:0; font:500 18px/1.4 'Segoe UI',Arial,sans-serif; letter-spacing:0; }
.tour-modal-close { display:grid; place-items:center; flex-shrink:0; width:44px; height:44px; border:1px solid var(--demo-border); border-radius:9px; background:var(--demo-panel); color:var(--demo-text); font-size:28px; line-height:1; cursor:pointer; }
.tour-modal-close:hover { background:var(--demo-control); }
.tour-evidence { margin:0; padding:20px; min-width:0; }
.tour-evidence-toolbar { display:flex; justify-content:center; margin-bottom:14px; }
.product-preview-tabs { display:inline-flex; padding:3px; gap:3px; border:1px solid var(--demo-border); border-radius:8px; background:var(--demo-canvas); }
.product-preview-tabs button { min-height:40px; padding:7px 15px; border:0; border-radius:5px; background:transparent; color:var(--demo-muted); font-size:13px; }
.product-preview-tabs button[aria-selected="true"] { background:var(--demo-control); color:var(--demo-text); }
.tour-screens { display:grid; place-items:center; }
.tour-screen-panel { width:100%; }
.tour-screen-panel--phone { width:min(100%,calc((100svh - 270px) * 780 / 1688)); }
.tour-screen { display:block; overflow:hidden; border:1px solid var(--demo-border); border-radius:7px; cursor:zoom-in; }
.tour-screen img { display:block; width:100%; height:auto; max-height:calc(100svh - 270px); object-fit:contain; background:var(--demo-panel); }
.tour-expand { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 10px; color:var(--demo-muted); font-size:12px; background:var(--demo-panel); }
.tour-screen:hover .tour-expand { color:var(--demo-text); }
.tour-evidence figcaption { margin-top:12px; color:var(--demo-muted); font-size:12px; line-height:1.5; }
.tour-steps { list-style:none; display:grid; gap:20px; padding:0; margin:30px 0 0; }
.tour-steps li { display:flex; align-items:start; gap:14px; }
.tour-steps li>span { color:var(--demo-accent); font-size:12px; margin-top:3px; }
.tour-steps h3 { margin:0 0 4px; font-size:16px; font-weight:500; }
.tour-steps p { margin:0; color:var(--demo-muted); font-size:14px; line-height:1.55; max-width:30em; }
@media(min-width:1100px) {
 .product-preview { max-width:1160px; grid-template-columns:minmax(0,1fr) minmax(0,560px); gap:56px; }
 .tour-overview { grid-template-columns:1fr 1fr; }
 .tour-budget-card,.tour-today { background:var(--demo-panel); border-radius:12px; }
 .tour-budget-card { padding:14px; }
 .tour-balance { color:var(--demo-text); font-size:32px; }
 .tour-today-grid>div { padding:9px; }
 .tour-today-grid span { min-height:2.8em; }
 .tour-today-grid strong { font-size:17px; }
}
@media(min-width:1100px) and (max-height:850px) {
 .finapp .product-tour,.finapp .product-split { padding-block:32px; }
}
@media(max-width:760px) {
 .tour-gallery-modal { width:calc(100% - 20px); max-height:calc(100svh - 20px); border-radius:12px; }
 .tour-modal-header { padding:10px 14px; }
 .tour-evidence { padding:14px; }
 .finapp .product-tour,.finapp .product-split { padding:36px 20px; }
 .product-preview { grid-template-columns:minmax(0,1fr); gap:28px; max-width:520px; }
 .tour-heading h2 { font-size:30px; } .tour-lead { margin-top:16px; }
 .tour-steps { gap:14px; margin-top:24px; }
 .tour-workspace { max-width:440px; margin-inline:auto; }
}
@media(max-width:380px) {
 .finapp .product-tour,.finapp .product-split { padding-inline:14px; }
 .tour-app-content,.split-app-content { padding:12px; }
 .tour-purchase { flex-wrap:wrap; } .tour-purchase button { flex:1; min-width:130px; }
 .tour-today-grid>div { padding:9px; } .tour-today-grid strong { font-size:18px; }
}