/* Additions for the new dashboard: screenshot tour, new tab mockups, "coming soon" grid.
   Uses the v2 design tokens from v2.css. */

/* ─── Screenshot tour ─────────────────────────────────────────────── */
.v2 .tour { padding: 5rem 0; background: var(--v2-bg-alt); }
.v2 .shot { margin: 0; }
.v2 .shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    border: 1px solid var(--v2-line);
    box-shadow: var(--v2-shadow-md);
    background: var(--v2-bg);
}
.v2 .shot figcaption { margin-top: 0.75rem; color: var(--v2-muted); font-size: 0.95rem; }
.v2 .shot-main { max-width: 1040px; margin: 0 auto 2.5rem; }
.v2 .shot-main img { border-radius: 18px; box-shadow: var(--v2-shadow-lg); }
@media (max-width: 600px) { .v2 .shot-main img { max-width: 320px; margin: 0 auto; } }
.v2 .shot-main figcaption { text-align: center; }
.v2 .shot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.v2 .shot-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
.v2 .shot-strip figcaption { font-weight: 600; color: var(--v2-ink-soft); font-size: 0.85rem; }
@media (max-width: 880px) {
    .v2 .shot-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .v2 .shot-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Mockups for the Money, Invest and Assistant tabs ────────────── */
.v2 .dash-preview .kpis.kpis-3 { grid-template-columns: repeat(3, 1fr); }
.v2 .dash-preview .val.pos, .v2 .dash-preview .pos { color: var(--v2-emerald); }
.v2 .dash-preview .neg { color: #a32424; }

.v2 .mbars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; height: 120px; align-items: end; padding: 0 0.5rem; }
.v2 .mbar { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; gap: 4px; height: 100%; align-items: end; }
.v2 .mbar i, .v2 .mbar b { display: block; height: var(--h); border-radius: 4px 4px 0 0; }
.v2 .mbar i { background: var(--v2-emerald); }
.v2 .mbar b { background: #a32424; }
.v2 .mbar span { grid-column: 1 / -1; text-align: center; font-size: 0.7rem; color: var(--v2-muted); }

.v2 .where { display: grid; gap: 0.55rem; }
.v2 .where-row { display: grid; grid-template-columns: 5.5rem 1fr 4rem; gap: 0.75rem; align-items: center; font-size: 0.82rem; }
.v2 .where-row span:last-child { text-align: right; font-weight: 600; }
.v2 .where-bar { height: 6px; border-radius: 99px; background: var(--v2-line-soft); overflow: hidden; }
.v2 .where-bar i { display: block; height: 100%; width: var(--w); min-width: 4px; background: var(--v2-emerald); border-radius: 99px; }

.v2 .alloc { display: flex; height: 12px; border-radius: 99px; overflow: hidden; gap: 2px; }
.v2 .alloc i { display: block; width: var(--w); background: var(--c); }
.v2 .alloc-key { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.75rem; color: var(--v2-muted); }
.v2 .alloc-key em { display: inline-block; width: 8px; height: 8px; border-radius: 99px; background: var(--c); margin-right: 0.35rem; }
.v2 .hold-row { display: grid; grid-template-columns: 1fr auto 4.5rem; gap: 0.75rem; align-items: center; padding: 0.55rem 0; border-top: 1px solid var(--v2-line-soft); font-size: 0.85rem; }
.v2 .hold-row span:last-child { text-align: right; font-weight: 600; }
.v2 .hold-t { font-weight: 600; display: grid; }
.v2 .hold-t small { font-weight: 400; color: var(--v2-muted); font-size: 0.72rem; }
.v2 .biz-strip { display: grid; grid-template-columns: auto 1fr auto; gap: 0.75rem; align-items: center; padding: 0.7rem 0.85rem; border-radius: 12px; background: var(--v2-bg-alt); border: 1px solid var(--v2-line-soft); font-size: 0.8rem; color: var(--v2-muted); }
.v2 .biz-strip strong { color: var(--v2-emerald); font-size: 0.9rem; }

.v2 .chat-preview { gap: 0.7rem; }
.v2 .chat-bubble { max-width: 85%; padding: 0.7rem 0.9rem; border-radius: 14px; font-size: 0.86rem; line-height: 1.45; }
.v2 .chat-bubble.me { justify-self: end; background: var(--v2-emerald); color: #fff; border-bottom-right-radius: 4px; }
.v2 .chat-bubble.bot { justify-self: start; background: var(--v2-bg-alt); border: 1px solid var(--v2-line-soft); color: var(--v2-ink); border-bottom-left-radius: 4px; }

/* ─── Coming soon grid ─────────────────────────────────────────────── */
.v2 .coming { padding: 4rem 0; }
.v2 .coming-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.v2 .coming-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: start;
    align-items: center;
    gap: 0.75rem 1rem;
    min-width: 0;
    padding: 1.5rem;
    border-radius: var(--v2-radius);
    background: #fff;
    border: 1px solid var(--v2-line);
    box-shadow: var(--v2-shadow-sm);
}
.v2 .coming-item strong { grid-column: 1; grid-row: 1; color: var(--v2-ink); line-height: 1.4; }
.v2 .coming-item span { grid-column: 1 / -1; color: var(--v2-muted); font-size: 0.95rem; line-height: 1.65; }
.v2 .coming-item em {
    grid-column: 2; grid-row: 1; justify-self: end; white-space: nowrap;
    font-style: normal; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--v2-emerald-d); background: rgba(29, 107, 74, 0.1); padding: 0.15rem 0.5rem; border-radius: 99px;
}
.v2 .coming-note { max-width: 72ch; text-align: center; color: var(--v2-muted); margin: 2rem auto 0; font-size: 0.95rem; line-height: 1.65; }

/* ─── Notice used on pages that describe the original app's tools ── */
.v2 .legacy-note {
    margin: 0 0 2rem;
    padding: 0.9rem 1.1rem;
    border-radius: 12px;
    background: rgba(232, 185, 72, 0.14);
    border: 1px solid rgba(232, 185, 72, 0.45);
    color: var(--v2-ink-soft);
    font-size: 0.95rem;
}

/* Finstracker product-led finish: the working workspace leads, with quiet interaction. */
:root {--motion-enter:220ms;--motion-exit:176ms;--ease-enter:cubic-bezier(.16,1,.3,1);--product-focus:#168598;}
html,body {overflow-x:clip;}
.v2 .fins-hero-grid {grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:center;}
.v2 .fins-hero h1 {max-width:19ch;font-size:clamp(2.5rem,4.2vw,4rem);line-height:1.08;letter-spacing:-.035em;}
.v2 .fins-hero .lead {max-width:36ch;}
.v2 .workspace-product-preview {display:block;min-width:0;text-decoration:none;outline-offset:6px;transition:transform var(--motion-enter) var(--ease-enter);}
.v2 .workspace-product-preview img {display:block;width:100%;height:auto;border:1px solid var(--v2-line);border-radius:12px;box-shadow:var(--v2-shadow-md);}
.v2 .workspace-product-preview:hover {transform:translateY(-2px);}
.v2 .btn {transition:background-color 150ms ease-out,transform 120ms ease-out;}
.v2 .btn:active {transform:scale(.97);transition-duration:0ms;}
/* Decorative charts and rows wait for their preview, including hidden tabs.
   Content stays readable when JavaScript or motion support is unavailable. */
.v2.has-viewport-motion [data-preview]:not(.is-in-view),
.v2.has-viewport-motion [data-preview]:not(.is-in-view) * { animation-play-state:paused; }
.v2.has-viewport-motion [data-preview] :is(.op-row,.sub-card,.perk-row,.txn-row) {
 animation-delay:calc(var(--preview-row,0) * 30ms);
 animation-duration:300ms;
 animation-timing-function:ease-out;
}
.v2.has-viewport-motion [data-preview] :is(.trips-day,.chat-bubble,.kpi) {
 animation:rowSlide 300ms ease-out backwards;
 animation-delay:calc(var(--preview-row,0) * 30ms);
}
.v2.has-viewport-motion [data-preview] .mbars :is(i,b) {
 transform-origin:bottom;
 animation:preview-bar-grow 700ms ease-out both;
}
.v2.has-viewport-motion [data-preview] :is(.where-bar,.alloc) i {
 transform-origin:left;
 animation:preview-width-grow 700ms ease-out both;
}
@keyframes preview-bar-grow { from { transform:scaleY(0); } to { transform:scaleY(1); } }
@keyframes preview-width-grow { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.v2 .eyebrow {text-transform:none;letter-spacing:normal;font-size:.95rem;}
.v2 :focus-visible {outline:2px solid var(--product-focus);outline-offset:3px;}
.v2 ::selection {background:var(--v2-sand);color:var(--v2-ink);}
.v2 .shot img,.v2 .shot-main img {box-shadow:none;border-radius:12px;}
.v2 .tab-content {animation:product-panel-in 220ms var(--ease-enter);}
@keyframes product-panel-in {from{opacity:.65;clip-path:inset(0 0 4% 0)}to{opacity:1;clip-path:inset(0)}}
@media(max-width:800px) {.v2 .fins-hero-grid {grid-template-columns:minmax(0,1fr);gap:32px;}.v2 .fins-hero h1 {max-width:20ch;}.v2 .workspace-product-preview {width:100%;}}
@media(prefers-reduced-motion:reduce) {.v2 *, .v2 *::before,.v2 *::after {animation:none!important;transition:none!important;scroll-behavior:auto!important;}.v2 .btn:active,.v2 .workspace-product-preview:hover {transform:none;}}

/* Public page hierarchy mirrors the structured breadcrumbs. */
.page-breadcrumbs { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:20px; font-size:13px; line-height:1.5; }
.page-breadcrumbs a { color:var(--muted, #636b60); text-decoration:none; }
.page-breadcrumbs a:hover { text-decoration:underline; }
.page-breadcrumbs [aria-current] { color:var(--ink, #20261d); }

/* Public product pages share the workspace's spacing and quiet controls. */
.v2 .btn { min-height:44px; border-radius:8px; padding:10px 18px; line-height:1.35; text-align:center; }
.v2 .btn-lg { min-height:48px; padding:12px 20px; }
.v2 .hero-cta,.v2 .fins-hero-cta { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.v2 .product-plan-line { max-width:44ch; margin:20px 0 0; color:var(--v2-muted); font-size:.88rem; line-height:1.6; }
.v2 .section,.v2 .product-overview { padding-block:64px; }
.v2 .product-index { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:32px; row-gap:28px; }
.v2 .product-index-item { display:flex; flex-direction:column; min-width:0; border-top:1px solid var(--v2-line); padding-top:20px; }
.v2 .product-index-item h3 { margin:0 0 10px; font-size:1.12rem; line-height:1.35; }
.v2 .product-index-item p { margin:0 0 16px; color:var(--v2-ink-soft); line-height:1.65; }
.v2 .product-index-item a { margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:6px; color:var(--v2-emerald-d); font-weight:600; text-decoration:none; min-height:44px; }
.v2 .section-footnote { margin:32px 0 0; text-align:center; color:var(--v2-muted); line-height:1.7; }
.v2 .product-story { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:40px; }
.v2 .product-story h2 { font:400 clamp(1.9rem,3vw,2.7rem)/1.12 'Fraunces',serif; margin:12px 0 20px; }
.v2 .product-story p { color:var(--v2-ink-soft); line-height:1.65; }
.v2 .feature-list { padding-left:20px; margin:20px 0 28px; display:grid; gap:16px; color:var(--v2-ink-soft); line-height:1.65; }
.v2 .feature-list strong { color:var(--v2-ink); }
.v2 .feature-jump-links { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px; margin:28px auto 0; max-width:900px; }
.v2 .feature-jump-links a { display:inline-flex; align-items:center; min-height:44px; color:var(--v2-emerald-d); text-underline-offset:4px; font-size:.9rem; }
.v2 .tile { min-width:0; border-radius:12px; padding:24px; }
.v2 .tile h2,.v2 .tile h3 { font:600 1.1rem/1.4 'Inter',sans-serif; margin:0 0 12px; color:var(--v2-ink); }
.v2 .tile p { line-height:1.65; }
.v2 .tile>a { display:inline-flex; align-items:center; gap:6px; margin-top:16px; min-height:44px; color:var(--v2-emerald-d); text-underline-offset:4px; }
.v2 .grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; }
.v2 .tab-bar-wrap { overflow-x:auto; padding-bottom:8px; }
.v2 .tab-bar { border-radius:12px; margin-bottom:28px; max-width:none; }
.v2 .tab-btn { border-radius:8px; min-height:44px; white-space:nowrap; padding:10px 14px; }
.v2 .tab-panel { align-items:start; }
.v2 .tab-panel.is-active { animation:product-panel-in 220ms var(--ease-enter); }
.v2 .tab-panel>div { min-width:0; }
.v2 .tab-pro { text-transform:none; }
.v2 .tier-cta { margin-top:auto; }
.v2 .tier h3 { text-transform:none; letter-spacing:normal; }
.v2 .page-hero .lead { max-width:72ch; margin-inline:auto; }
.v2 .page-hero .hero-cta { justify-content:center; margin-top:24px; }
.v2 .page-hero .lead+.lead { margin-top:16px; font-size:1rem; }
.v2 section[id] { scroll-margin-top:100px; }
@media(max-width:980px) {
 .v2 .product-index,.v2 .grid-3 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
 .v2 .product-story { grid-template-columns:minmax(0,1fr); gap:28px; }
 .v2 .nav-cta .btn,.v2 .nav-toggle { min-height:44px; }
}
@media(max-width:600px) {
 .v2 .section,.v2 .product-overview,.v2 .coming { padding-block:40px; }
 .v2 .section-head { margin-bottom:28px; }
 .v2 .product-index,.v2 .grid-3 { grid-template-columns:minmax(0,1fr); gap:20px; }
 .v2 .tile { padding:20px; }
 .v2 .tab-bar-wrap { margin-inline:-4px; }
 .v2 .tab-bar { display:flex; width:max-content; }
 .v2 .coming-grid { grid-template-columns:minmax(0,1fr); }
 .v2 .coming-item { padding:20px; gap:12px; }
 .v2 .biz-strip { grid-template-columns:minmax(0,1fr); gap:4px; }
 .v2 .tier,.v2 .pricing-card { padding:24px 20px; }
 .v2 .hero-cta .btn,.v2 .fins-hero-cta .btn { flex:1 1 160px; }
 .v2 .feature-jump-links { justify-content:flex-start; gap:4px 16px; }
 .v2 .shot-main img { max-width:100%; }
}
.v2 .fins-hero .fins-hero-trust { margin-top:12px; }
.v2 .nav-mobile-only { display:none; }
@media(max-width:980px) {
 .v2 .nav-inner { width:calc(100% - 40px); margin-inline:auto; }
 .v2 .nav-links .nav-mobile-only { display:block; }
 .v2 .nav-toggle { width:44px; min-width:44px; }
}
@media(max-width:600px) {
 .v2 .hero-cta .btn,.v2 .fins-hero-cta .btn { flex-basis:100%; }
}
@media(max-width:380px) { .v2 .nav-cta { display:none; } }
.v2 article[id] { scroll-margin-top:110px; }
.v2 .product-grid-pair { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:600px) { .v2 .product-grid-pair { grid-template-columns:minmax(0,1fr); } }