/* Case study template v5 (Finestro, Finly) · design system v2.
   Introduction hook → role, goals, methods → full-width image → Stages with Features → results → summary → more works.
   Mori: headings and text. Instrument Sans: labels, chips, controls. Cards use shadows, no outlines. */
.finestro-page{
 --case-max:1120px;--read:720px;
 --t-hook:56px;--t-h2:40px;--t-h3:30px;--t-sub:22px;--t-body:18px;--t-card:16px;
 --gap-section:96px;--gap-feature:72px;--gap-visual:32px;
 background:var(--content-bg);color:var(--text)
}
.finestro-page::before{content:'';position:fixed;inset:0 0 auto;height:106px;background:var(--content-bg);z-index:11;pointer-events:none}
.case-shell{width:calc(100% - 96px);max-width:var(--case-max);margin-inline:auto}
.finestro-case{padding-top:120px;padding-bottom:88px;font-family:var(--font-case)}
:where(.finestro-case) :where(ul,ol){list-style:none;margin:0;padding:0}
.finestro-case h1,.finestro-case h2,.finestro-case h3{font-family:var(--font-case);font-weight:600;color:var(--text);text-wrap:balance;margin:0}
.finestro-case p,.finestro-case li{font-family:var(--font-case);font-weight:400;font-size:var(--t-body);line-height:1.6;color:var(--color-text-secondary);margin:0}
.finestro-case strong,.finestro-case b{font-weight:600;color:var(--text)}
.case-skip{position:fixed;left:20px;top:12px;z-index:1100;padding:12px 18px;background:var(--surface);border-radius:var(--radius-small);transform:translateY(-200%);color:var(--accent-ink)}
.case-skip:focus{transform:none}
.finestro-page a:focus-visible{outline:2px solid var(--color-focus);outline-offset:5px}

/* Labels and chips */
.finestro-case .v5-label{font-family:var(--font-ui);font-size:var(--text-caption);font-weight:600;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted)}
.finestro-case .v5-label--stage{color:var(--color-link)}
.finestro-case .v5-label--gap{margin-top:24px}
.v5-chip{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:var(--radius-pill);background:var(--accent-soft);color:var(--accent-ink);font-family:var(--font-ui);font-size:var(--text-label);font-weight:500}
.v5-list{display:grid;gap:10px;margin-top:12px}
.finestro-case .v5-list li{position:relative;padding-left:20px;color:var(--text)}
.v5-list li::before{content:'';position:absolute;left:3px;top:.66em;width:6px;height:6px;border-radius:50%;background:var(--color-accent)}

/* Introduction */
.case-back{margin-bottom:0}
.finestro-case .v5-hero h1{margin-top:16px;max-width:960px;font-size:var(--t-hook);line-height:1.08;letter-spacing:-.045em}
.finestro-case .v5-sub{margin-top:20px;max-width:780px;font-size:var(--t-sub);line-height:1.5;letter-spacing:-.01em}
.v5-brief{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;margin-top:var(--gap-visual);padding:32px 36px;border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-card)}
.finestro-case .v5-role,.finestro-case .v5-methods{margin-top:12px;color:var(--text)}

/* Media */
.v5-media{margin-top:var(--gap-visual);border-radius:var(--radius-card);overflow:hidden;background:var(--accent-soft)}
.v5-media+.v5-media,.v5-pair+.v5-media,.v5-media+.v5-pair{margin-top:var(--gap-visual)}
.v5-media--cover{margin-top:var(--gap-visual)}
.v5-media--ink{background:#00000a}
.v5-media--paper{background:#f7f7f7}
.v5-media img{display:block;width:100%;height:auto}
.v5-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:var(--gap-visual);align-items:start}
.v5-pair--wide{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.v5-pair .v5-media{margin-top:0}

/* Sections */
.v5-section{margin-top:var(--gap-section);scroll-margin-top:120px}
.finestro-case .v5-section h2{margin-top:16px;max-width:820px;font-size:var(--t-h2);line-height:1.15;letter-spacing:-.035em}
.v5-text{display:grid;gap:16px;max-width:var(--read);margin-top:20px}
.v5-text .v5-list{margin-top:0}
.v5-text .v5-label--gap{margin-top:12px}
.v5-stage3+.v5-feature{margin-top:var(--gap-feature)}
.v5-feature{margin-top:var(--gap-feature)}
.finestro-case .v5-feature h3{margin-top:16px;max-width:820px;font-size:var(--t-h3);line-height:1.2;letter-spacing:-.03em}

/* Cards and steps */
.v5-cards{display:grid;gap:16px;margin-top:32px}
.v5-cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.v5-cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.v5-cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.v5-cards li{display:flex;flex-direction:column;gap:8px;min-width:0;padding:28px;border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-card)}
.finestro-case .v5-cards strong{font-size:20px;line-height:1.3;letter-spacing:-.015em}
.finestro-case .v5-cards p{font-size:var(--t-card);line-height:1.55}
.v5-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:32px}
.v5-steps li{display:flex;flex-direction:column;gap:8px;min-width:0;padding:28px;border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-card)}
.finestro-case .v5-steps span{font-family:var(--font-ui);font-size:var(--text-label);font-weight:500;color:var(--color-link)}
.finestro-case .v5-steps strong{font-size:24px;letter-spacing:-.025em}
.finestro-case .v5-steps p{font-size:var(--t-card);line-height:1.55}
.v5-measures{margin-top:32px;padding:32px;border-radius:var(--radius-card);background:var(--color-surface-alt)}
.v5-measures .v5-cards{margin-top:20px;gap:24px}
.v5-measures .v5-cards li{padding:0;background:none;box-shadow:none}
.finestro-case .v5-measures .v5-cards strong{font-size:var(--t-card)}

/* Summary */
.v5-summary{margin-top:var(--gap-section);padding:44px;border-radius:var(--radius-card);background:var(--color-action)}
.finestro-case .v5-summary .v5-label{color:var(--neutral-300)}
.finestro-case .v5-statement{margin-top:16px;max-width:860px;font-size:36px;line-height:1.2;font-weight:600;letter-spacing:-.035em;color:#fff}
.v5-summary .v5-list{margin-top:var(--gap-visual)}
.finestro-case .v5-summary .v5-list li{color:var(--neutral-200)}

/* More works */
.v5-more{margin-top:var(--gap-section)}
.v5-more .v5-card{margin-top:var(--gap-visual)}
.v5-more-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px}
.finestro-case .v5-more h2{font-size:var(--t-h2);letter-spacing:-.035em}
.v5-card{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;gap:40px;margin-top:28px;padding:12px;border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-card);color:var(--text);transition:transform var(--motion-base) var(--ease-ui),box-shadow var(--motion-base) var(--ease-ui)}
.v5-card-media{border-radius:16px;overflow:hidden;background:var(--accent-soft)}
.v5-card-media img{display:block;width:100%;height:auto}
.v5-card-body{padding:16px 24px 16px 0}
.finestro-case .v5-card h3{font-size:32px;letter-spacing:-.03em;transition:color var(--motion-fast) var(--ease-ui)}
.finestro-case .v5-card p{margin-top:10px;font-size:var(--t-card)}
@media(hover:hover) and (pointer:fine){.v5-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)}.v5-card:hover h3{color:var(--neutral-600)}}
.case-all-work{display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-ui);font-size:var(--text-ui);font-weight:500;color:var(--accent-ink)}
.case-all-work:hover{text-decoration:underline;text-underline-offset:5px}

@media(max-width:1099px){
 .finestro-page{--t-hook:48px}
 .v5-cards--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:809px){
 .finestro-page{--t-hook:34px;--t-h2:28px;--t-h3:23px;--t-sub:18px;--t-body:16px;--gap-section:64px;--gap-feature:52px;--gap-visual:28px}
 .finestro-page::before{height:88px}
 .case-shell{width:calc(100% - 40px)}
 .finestro-case{padding-top:108px;padding-bottom:72px}
 .case-back{margin-bottom:28px}
 .v5-brief{grid-template-columns:1fr;gap:24px;margin-top:36px;padding:24px}
 .v5-media{border-radius:var(--radius-media)}
 .v5-media--cover{margin-top:28px}
 .v5-pair,.v5-pair--wide{grid-template-columns:1fr;gap:20px}
 .v5-cards--2,.v5-cards--3,.v5-cards--4,.v5-steps{grid-template-columns:1fr;gap:12px;margin-top:28px}
 .v5-cards li,.v5-steps li{padding:22px}
 .v5-measures{padding:22px}
 .v5-summary{padding:32px 24px}
 .finestro-case .v5-statement{font-size:24px}
 .v5-card{grid-template-columns:1fr;gap:0;padding:10px}
 .v5-card-body{padding:20px 12px 12px}
 .finestro-case .v5-card h3{font-size:24px}
}
@media(prefers-reduced-motion:reduce){.v5-card{transition:none}.v5-card:hover{transform:none}}

/* Dark navy gradient blocks (research insights, Stage 3 opener, summary) */
.finestro-page{--navy:radial-gradient(110% 120% at 88% 0%,#3b4fb8 0%,rgba(59,79,184,0) 52%),radial-gradient(90% 90% at 0% 100%,#1d2a6b 0%,rgba(29,42,107,0) 60%),#0f1428}
.v5-dark{margin-top:var(--gap-visual);padding:44px;border-radius:var(--radius-card);background:var(--navy);color:#fff}
.v5-dark .v5-cards{margin-top:0}
.finestro-case .v5-dark-intro{margin-bottom:32px;font-size:24px;line-height:1.35;letter-spacing:-.02em;color:#fff}
.v5-dark .v5-cards li{background:#ffffff0d;box-shadow:inset 0 0 0 1px #ffffff14}
.finestro-case .v5-dark .v5-cards strong{color:#fff}
.finestro-case .v5-dark .v5-cards p{color:#c3cbe0}
.finestro-case .v5-dark .v5-cards b{color:#fff}
.v5-section.v5-stage3{margin-top:var(--gap-section)}
.finestro-case .v5-stage3 h2{color:#fff}
.finestro-case .v5-stage3 .v5-text p{color:#c3cbe0}
.finestro-case .v5-dark .v5-label--stage{color:#9fb3ff}
.v5-summary{background:var(--navy)}
.finestro-case .v5-summary .v5-label{color:#9fb3ff}
.finestro-case .v5-summary .v5-list li{color:#d5dbec}
@media(max-width:809px){.v5-dark{padding:28px 22px}.finestro-case .v5-dark-intro{font-size:20px;margin-bottom:22px}}

/* Back button: always visible at the top, level with the navigation */
.finestro-case .case-back{position:fixed;z-index:30;top:36px;left:max(48px,calc((100vw - var(--case-max)) / 2));margin:0;gap:8px;box-shadow:var(--shadow-card)}
.v5-hero{padding-top:8px}
@media(max-width:809px){
 .finestro-case .case-back{position:static;display:inline-flex;margin:0 0 24px;min-height:40px;padding:8px 16px;font-size:15px}
 .v5-hero{padding-top:0}
}

/* Connected 2x2 cards (research insights) */
.v5-map-wrap{margin-top:var(--gap-visual)}
.finestro-case .v5-map-intro{margin-bottom:28px;font-size:24px;line-height:1.35;letter-spacing:-.02em;color:var(--text)}
.v5-map{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);grid-template-rows:auto 56px auto;align-items:stretch}
.v5-map-card{display:flex;flex-direction:column;gap:8px;min-width:0;padding:32px;border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-card)}
.v5-map-ico{width:28px;height:28px;margin-bottom:20px;fill:none;stroke:var(--color-accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.finestro-case .v5-map-card strong{font-size:26px;line-height:1.2;letter-spacing:-.025em}
.finestro-case .v5-map-card p{font-size:var(--t-card);line-height:1.55}
.v5-map-card.is-primary{background:var(--color-link);box-shadow:0 16px 40px #4056bd33}
.v5-map-card.is-primary .v5-map-ico{stroke:#fff}
.finestro-case .v5-map-card.is-primary strong{color:#fff}
.finestro-case .v5-map-card.is-primary p{color:#e4e9ff}
.v5-map-arrow{display:flex;align-items:center;justify-content:center}
.v5-map-arrow svg{fill:none;stroke:var(--color-accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:809px){
 .v5-map{grid-template-columns:1fr;grid-template-rows:none;gap:12px}
 .v5-map-arrow,.v5-map>li[aria-hidden]:not(.v5-map-arrow){display:none}
 .v5-map-card{padding:24px}
 .finestro-case .v5-map-card strong{font-size:22px}
 .finestro-case .v5-map-intro{font-size:20px}
}

/* Placeholders for research screenshots */
.v5-slots{display:grid;gap:16px;margin-top:var(--gap-visual)}
.v5-slots--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.v5-slots--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.v5-slot{position:relative;display:flex;align-items:flex-end;justify-content:space-between;aspect-ratio:var(--ratio,16 / 10);min-width:0;padding:20px;border-radius:var(--radius-card);background:var(--color-surface-alt);color:var(--color-text-muted);font-family:var(--font-ui)}
.v5-slot span{font-size:var(--text-label);font-weight:500}
.v5-slot b{font-size:var(--text-caption);font-weight:600;letter-spacing:.08em}
@media(max-width:809px){.v5-slots--2,.v5-slots--3{grid-template-columns:1fr;gap:12px}}

/* Back: plain text link */
body .finestro-case .case-back,body .finestro-case .case-back:hover,body .finestro-case .case-back:active{background:none;border:0;box-shadow:none;filter:none;transform:none;min-height:40px;padding:8px 12px 8px 0;border-radius:0;color:var(--color-text);font-family:var(--font-ui);font-size:var(--text-ui);font-weight:500}
body .finestro-case .case-back:hover{color:var(--neutral-500);text-decoration:underline;text-underline-offset:5px}
body .finestro-case .case-back:focus-visible{outline:2px solid var(--color-focus);outline-offset:4px;border-radius:6px}
.finestro-page .case-back-wrap{display:none}
@media(max-width:809px){body .finestro-case .case-back{padding-left:0;font-size:var(--text-ui)}}

/* Wide panorama (competitor boards): breaks out of the text column */
@media(min-width:1000px){
.v5-media--wide{position:relative;left:50%;width:min(1400px,calc(100vw - 64px));max-width:none;transform:translateX(-50%)}
}
.v5-media video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#EEF2F8}

/* Onboarding impact */
.v5-impact{margin-top:var(--gap-visual);padding:40px;border-radius:var(--radius-card);background:var(--color-surface-alt)}
.finestro-case .v5-impact .v5-map-intro{margin-bottom:32px}
.v5-path{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.v5-path-line{position:absolute;left:12.5%;right:12.5%;top:27px;height:2px;background:var(--border,#D8DEE8);border-radius:2px}
.v5-path-line i{display:block;height:100%;width:0;background:var(--color-link);border-radius:2px;transition:width .5s cubic-bezier(.3,.7,.2,1)}
.v5-path-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;padding:0;border:0;background:none;cursor:pointer;font:inherit;color:var(--color-text-muted)}
.v5-path-dot{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--surface);box-shadow:var(--shadow-card);transition:background .3s,transform .3s,box-shadow .3s}
.v5-path-dot svg{width:24px;height:24px;fill:none;stroke:var(--color-accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.finestro-case .v5-path-name{font-family:var(--font-ui);font-size:var(--t-card);font-weight:600;letter-spacing:-.01em}
.v5-path-step.is-done .v5-path-dot{background:var(--accent-soft)}
.v5-path-step[aria-selected="true"]{color:var(--text)}
.v5-path-step[aria-selected="true"] .v5-path-dot{background:var(--color-link);transform:scale(1.08);box-shadow:0 12px 28px #4056bd44}
.v5-path-step[aria-selected="true"] .v5-path-dot svg{stroke:#fff}
.v5-path-step:focus-visible{outline:2px solid var(--color-link);outline-offset:6px;border-radius:12px}
.v5-path-panels{min-height:3.4em;margin:28px auto 0;max-width:640px;text-align:center}
.finestro-case .v5-path-text{font-size:var(--t-card);line-height:1.55;animation:v5fade .4s ease}
.v5-lift-link{display:block;width:2px;height:28px;margin:12px auto;background:repeating-linear-gradient(to bottom,var(--color-link) 0 5px,transparent 5px 10px);opacity:.5;transition:opacity .4s}
.v5-lift{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.v5-lift-card{display:flex;flex-direction:column;gap:8px;min-width:0;padding:32px;border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-card);opacity:.55;transform:translateY(8px);transition:opacity .6s,transform .6s,background .6s,box-shadow .6s}
.v5-lift-ico{width:28px;height:28px;margin-bottom:12px;fill:none;stroke:var(--color-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.finestro-case .v5-lift-label{font-family:var(--font-ui);font-size:var(--text-caption);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted)}
.finestro-case .v5-lift-card strong{font-size:26px;line-height:1.2;letter-spacing:-.025em}
.finestro-case .v5-lift-card p{font-size:var(--t-card);line-height:1.55}
.v5-impact.is-lifted .v5-lift-link{opacity:1}
.v5-impact.is-lifted .v5-lift-card{opacity:1;transform:none;background:var(--color-link);box-shadow:0 16px 40px #4056bd33}
.v5-impact.is-lifted .v5-lift-ico{stroke:#fff}
.finestro-case .v5-impact.is-lifted .v5-lift-card strong,.finestro-case .v5-impact.is-lifted .v5-lift-card p,.finestro-case .v5-impact.is-lifted .v5-lift-label{color:#fff}
.v5-impact.is-lifted .v5-lift-card:nth-child(2){transition-delay:.15s}
@keyframes v5fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (max-width:720px){
 .v5-impact{padding:24px 18px}
 .v5-path{gap:4px}.v5-path-dot{width:46px;height:46px}.v5-path-line{top:22px}
 .finestro-case .v5-path-name{font-size:13px}
 .v5-lift{grid-template-columns:1fr}.v5-lift-card{padding:24px}
}
@media (prefers-reduced-motion:reduce){.v5-path-line i,.v5-path-dot,.v5-lift-card,.v5-lift-link{transition:none}.finestro-case .v5-path-text{animation:none}}

/* Case tags */
.v5-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}

/* Problem → solution cards (Finly research) */
.v5-ps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.v5-ps li{display:flex;flex-direction:column;min-width:0;padding:32px 28px;border-radius:var(--radius-card);background:#ffffff0d;box-shadow:inset 0 0 0 1px #ffffff14}
.v5-ps-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.finestro-case .v5-ps-label{font-family:var(--font-ui);font-size:var(--text-caption);font-weight:600;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:#8e9bc4}
.finestro-case .v5-ps-num{font-family:var(--font-ui);font-size:var(--text-caption);font-weight:600;letter-spacing:.08em;color:#9fb3ff}
.finestro-case .v5-ps-problem{margin-top:14px;font-size:21px;line-height:1.35;font-weight:600;letter-spacing:-.02em;color:#fff;margin-bottom:28px}
.finestro-case .v5-ps-problem em{font-style:normal;color:#9fb3ff}
.finestro-case .v5-ps-label--sol{margin-top:auto;padding-top:24px;border-top:1px solid #ffffff1f}
.finestro-case .v5-ps-solution{margin-top:10px;font-size:var(--t-card);line-height:1.55;color:#c3cbe0}
@media(max-width:1099px){.v5-ps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:809px){.v5-ps{grid-template-columns:1fr;gap:12px}.v5-ps li{padding:24px 22px}.finestro-case .v5-ps-problem{font-size:19px}}

/* Finly app structure map */
.v5-fm{display:grid;grid-template-columns:minmax(0,.9fr) 40px minmax(0,.7fr) 40px minmax(0,2.2fr);align-items:center;gap:0;margin-top:var(--gap-visual);padding:36px;border-radius:var(--radius-card);background:var(--color-surface-alt)}
.v5-fm-col{min-width:0}
.finestro-case .v5-fm-cap{margin-bottom:12px;font-family:var(--font-ui);font-size:var(--text-caption);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted)}
.finestro-case .v5-fm-node{display:flex;align-items:center;justify-content:center;min-height:48px;padding:8px 14px;border-radius:12px;background:var(--surface);box-shadow:var(--shadow-card);font-family:var(--font-ui);font-size:var(--text-label);font-weight:500;line-height:1.25;text-align:center;color:var(--text)}
.v5-fm-path{display:grid;gap:10px;position:relative}
.v5-fm-path li+li::before{content:'';position:absolute;left:50%;top:-10px;width:2px;height:10px;background:var(--color-link);opacity:.35}
.v5-fm-path li{position:relative}
.finestro-case .v5-fm-or{margin:10px 0;text-align:center;font-family:var(--font-ui);font-size:var(--text-caption);color:var(--color-text-muted)}
.v5-fm-main{display:flex;align-items:center;justify-content:center;min-height:120px;padding:16px;border-radius:16px;background:var(--color-link);box-shadow:0 16px 40px #4056bd33;font-family:var(--font-ui);font-size:18px;font-weight:600;color:#fff;text-align:center}
.v5-fm-link{display:flex;align-items:center;justify-content:center}
.v5-fm-arrow{width:22px;height:22px;flex:none;fill:none;stroke:var(--color-link);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.v5-fm-features{display:grid;gap:20px}
.v5-fm-group{padding:18px;border-radius:16px;background:#ffffff80;box-shadow:inset 0 0 0 1px #4056bd1a}
.v5-fm-rows{display:grid;gap:10px}
.v5-fm-row{display:grid;grid-template-columns:minmax(0,1fr) 22px minmax(0,1.4fr);align-items:center;gap:10px}
.v5-fm-row>.v5-fm-node--parent:only-child{grid-column:1/2}
.finestro-case .v5-fm-node--parent{background:var(--accent-soft);box-shadow:none;color:var(--accent-ink);font-weight:600}
.v5-fm-kids{display:flex;flex-wrap:wrap;gap:8px}
.v5-fm-kids .v5-fm-node{flex:1 1 0;white-space:nowrap}
@media(max-width:1099px){.v5-fm{grid-template-columns:1fr;gap:4px;padding:28px}.v5-fm-link{padding:8px 0}.v5-fm-link .v5-fm-arrow{transform:rotate(90deg)}.v5-fm-entry,.v5-fm-hub{max-width:420px;width:100%;justify-self:center}.v5-fm-main{min-height:64px}}
@media(max-width:560px){.v5-fm{padding:20px 14px}.v5-fm-group{padding:12px}.v5-fm-row{grid-template-columns:minmax(0,1fr) 16px minmax(0,1.15fr);gap:6px}.v5-fm-arrow{width:16px;height:16px}.finestro-case .v5-fm-node{min-height:42px;padding:6px 8px;font-size:13px}.v5-fm-kids{gap:6px}.v5-fm-kids .v5-fm-node{flex:1 1 100%}}

/* Finly structure map: the original flow screen, redrawn in the site style */
.v5-map2{margin-top:var(--gap-visual);padding:clamp(24px,3vw,48px);border-radius:var(--radius-card);background:var(--color-surface-alt)}

.v5-map2-svg{display:block;width:100%;height:auto;overflow:visible}
.v5-map2-lines path{fill:none;stroke:var(--blue-200);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.v5-map2-node{fill:var(--color-surface)}
.v5-map2-node.is-main{fill:var(--color-link)}
.v5-map2-txt{font-family:var(--font-ui);font-size:20px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;fill:var(--neutral-700);text-anchor:middle;dominant-baseline:central}
.v5-map2-txt.is-main{fill:#fff;font-weight:600}
.v5-map2-ico{fill:none;stroke:var(--color-accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.v5-map2-big{font-family:var(--font-display);font-size:84px;font-weight:600;letter-spacing:-.035em;fill:var(--color-text)}
.v5-map2-tag{font-family:var(--font-ui);font-size:22px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;fill:var(--color-link)}
.v5-fm--mobile{display:none}
@media(max-width:809px){.v5-map2{padding:14px 10px}}

/* Problem/solution cards: dividers line up across each row (shared subgrid rows) */
@supports (grid-template-rows:subgrid){
 .v5-ps li{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;align-content:start}
 .finestro-case .v5-ps-label--sol{margin-top:0;align-self:end}
}

/* Finly wireframes */
.v5-wf{margin-top:var(--gap-visual)}
.v5-wf-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;padding:32px;border-radius:var(--radius-card);background:var(--color-surface-alt)}
@media(min-width:1000px){.v5-wf-row{position:relative;left:50%;width:min(1400px,calc(100vw - 64px));transform:translateX(-50%);gap:28px;padding:40px 48px}}
.v5-wf-item{margin:0;min-width:0}
.v5-wf-svg{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 20px #1f25300f)}
.v5-wf-item figcaption{margin-top:14px;text-align:center;font-family:var(--font-ui);font-size:var(--text-label);font-weight:500;color:var(--color-text-secondary)}
.wf-frame{fill:#fff;stroke:var(--neutral-200);stroke-width:2}
.wf-b{fill:var(--neutral-100)}
.wf-s{fill:var(--neutral-25);stroke:var(--neutral-200);stroke-width:1}
.wf-t{fill:var(--neutral-200)}
.wf-d{fill:var(--neutral-300)}
.wf-a{fill:var(--blue-200)}
.wf-as{fill:var(--blue-50);stroke:var(--blue-200);stroke-width:1}
.wf-w{fill:#fff}
.wf-w2{fill:#fff;stroke:var(--neutral-200);stroke-width:1}
@media(max-width:1099px) and (min-width:810px){.v5-wf-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:809px){.v5-wf-row{display:flex;gap:14px;padding:20px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.v5-wf-item{flex:0 0 58%;scroll-snap-align:center}}

/* Finly annotated screens (main page, menu, dashboard, widgets) */
.v5-ann{margin-top:var(--gap-visual);padding:clamp(12px,2.5vw,36px) clamp(8px,1.5vw,20px);border-radius:var(--radius-card);background:var(--color-surface-alt)}
.v5-ann+.v5-ann{margin-top:24px}
@media(min-width:1000px){.v5-ann{position:relative;left:50%;width:min(1400px,calc(100vw - 64px));transform:translateX(-50%)}}
.v5-ann-svg{display:block;width:100%;height:auto}
.ann-t{font-family:var(--font-ui);font-size:21px;font-weight:600;letter-spacing:-.01em;fill:var(--color-text)}
.ann-d{font-family:var(--font-ui);font-size:16px;font-weight:400;fill:var(--color-text-secondary)}
.ann-l{fill:none;stroke:var(--color-link);stroke-width:1.5;opacity:.55}
.ann-c{fill:var(--color-link);stroke:#fff;stroke-width:3}
.ann-frame{fill:none;stroke:var(--neutral-200);stroke-width:1.5}
.ann-img{filter:drop-shadow(0 16px 22px #1f253017)}

/* Finly design system, unfolded (#system) */
.fy-ds{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:var(--gap-visual)}
.fy-ds-card{min-width:0;padding:32px;border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-card)}
.fy-ds-wallets,.fy-ds-comp{grid-column:1/-1}
.finestro-case .fy-ds-note{margin-top:10px;max-width:640px;font-size:var(--t-card);line-height:1.55}
.fy-wallets{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:14px;margin-top:24px}
.fy-wallets li{display:flex;flex-direction:column;gap:10px;min-width:0}
.fy-wallet{display:flex;align-items:flex-start;justify-content:center;aspect-ratio:9/16;padding-top:28%;border-radius:18px;background:linear-gradient(180deg,var(--a),var(--b));box-shadow:inset 0 0 0 1px #0000000a}
.fy-wallet b{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Instrument Sans',sans-serif;font-size:clamp(11px,1.15vw,15px);font-weight:700;color:#fff;letter-spacing:-.01em}
.finestro-case .fy-name{font-family:var(--font-ui);font-size:var(--text-label);font-weight:500;color:var(--text);text-align:center}
.fy-main{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px;margin-top:24px}
.finestro-case .fy-main li{display:grid;grid-template-columns:48px 1fr;column-gap:14px;align-items:center;font-family:var(--font-ui);font-size:var(--t-card);font-weight:600;color:var(--text)}
.fy-main i{grid-row:span 2;width:48px;height:48px;border-radius:50%}
.finestro-case .fy-main span{font-weight:400;font-size:var(--text-label);color:var(--color-text-muted)}
.fy-type-head{display:flex;align-items:center;gap:18px;margin-top:20px}
.fy-aa{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Instrument Sans',sans-serif;font-size:64px;font-weight:600;line-height:1;letter-spacing:-.02em;color:var(--text)}
.finestro-case .fy-type-head strong{font-size:20px}
.finestro-case .fy-type-head p{font-size:var(--text-label);color:var(--color-text-muted);margin-top:2px}
.fy-scale{display:grid;gap:12px;margin-top:22px;padding-top:20px;border-top:1px solid var(--color-border,#e3e7ee)}
.finestro-case .fy-scale li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Instrument Sans',sans-serif;color:var(--text)}
.fy-scale em{font-style:normal;font-family:var(--font-ui);font-size:var(--text-caption);color:var(--color-text-muted);white-space:nowrap}
.fy-s1{font-size:28px;font-weight:700;letter-spacing:-.02em}.fy-s2{font-size:18px;font-weight:500}.fy-s3{font-size:15px;color:var(--color-text-secondary)}.fy-s4{font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--color-text-muted)}
.fy-comp{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;margin-top:24px;align-items:start}
.fy-comp-col{display:grid;gap:16px}
.fy-comp figure{margin:0;padding:20px;border-radius:18px;background:var(--color-surface-alt,#f3f5f9)}
.fy-comp img{display:block;width:100%;height:auto;border-radius:12px}
.finestro-case .fy-comp figcaption{margin-top:12px;font-family:var(--font-ui);font-size:var(--text-caption);font-weight:500;color:var(--color-text-muted)}
@media(max-width:1099px){.fy-wallets{grid-template-columns:repeat(4,minmax(0,1fr))}.fy-wallet b{font-size:15px}}
@media(max-width:809px){.fy-ds{grid-template-columns:1fr;gap:12px}.fy-ds-card{padding:22px}.fy-comp{grid-template-columns:1fr}.fy-wallets{gap:10px}.fy-wallet{border-radius:14px}.fy-wallet b{font-size:12px}.fy-aa{font-size:52px}}

/* Images fit the screen: on laptops (e.g. MacBook 13") a visual never gets taller than the visible area */
@media(min-width:810px){
 .finestro-page{--media-max-h:min(640px,max(380px,calc(100svh - 200px)))}
 .v5-media:not(.v5-media--wide)>img,.v5-media:not(.v5-media--wide)>video{width:auto;max-width:100%;max-height:var(--media-max-h);margin-inline:auto}
 .v5-media--cover>img{width:100%;max-height:none}
 .v5-pair .v5-media>img{width:100%;max-height:none}
 .v5-pair .v5-media{align-self:start}
}

/* Desktop: header scrolls away with the page; a back-to-top arrow appears on the right instead */
.to-top{display:none}
@media(min-width:810px){
 .finestro-page .site-header{position:absolute}
 .finestro-page::before{display:none}
 body .finestro-case .case-back{position:absolute}
 .to-top{position:fixed;right:32px;bottom:32px;z-index:40;display:grid;place-items:center;width:52px;height:52px;padding:0;border:2px solid transparent;border-radius:50%;background:var(--primary-background);color:var(--color-text);box-shadow:var(--shadow-card);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity var(--motion-base) var(--ease-ui),transform var(--motion-base) var(--ease-ui),visibility 0s var(--motion-base),box-shadow var(--motion-fast) var(--ease-ui)}
 .to-top.is-visible{opacity:1;visibility:visible;transform:none;transition-delay:0s}
 .to-top:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-3px)}
 .to-top:focus-visible{outline:2px solid var(--color-focus);outline-offset:4px}
}
@media(prefers-reduced-motion:reduce){.to-top{transition:none}}

/* Two crops of one dark slide read as a single dark card */
.v5-pair--joined{gap:0;border-radius:var(--radius-card);overflow:hidden;background:#04050a}
.v5-pair--joined .v5-media{border-radius:0;background:none;width:auto;margin:0}
.v5-pair--joined .v5-media>img{width:100%;max-height:none}
/* No dark hairline around light images that fill their container */
/* The fill beside a height-capped visual takes that visual's own edge colour, so no band shows */
.v5-media:has(>img),.v5-media--video{background:transparent}
.v5-media:has(>img[src$="main-annotated.webp"]),
.v5-media:has(>img[src$="dashboard-annotated.webp"]),
.v5-media:has(>img[src$="wallets.webp"]),
.v5-media:has(>img[src$="notes.webp"]),
.v5-media:has(>img[src$="search.webp"]),
.v5-media:has(>img[src$="new-transaction.webp"]),
.v5-media:has(>img[src$="analytics.webp"]){background:#f0f4f7}
.v5-media:has(>img[src$="research-competitors.webp"]){background:#e0efff}
.v5-media:has(>img[src$="plan-annotated.webp"]),
.v5-media:has(>img[src$="plan-annotated-2.webp"]),
.v5-media:has(>img[src$="ai-library.webp"]){background:#e2e8f1}
.v5-media:has(>img[src$="academy-screens-combined.webp"]){background:#e3eaf2}
.v5-media:has(>img[src$="finestro/design-system.webp"]){background:#e5ebf2}
.v5-media--video:has(>video[poster$="lesson-flow-poster.webp"]),
.v5-media--video:has(>video[poster$="ai-tools-flow-poster.webp"]){background:#e1e9f2}
.v5-media--video:has(>video[poster$="onboarding-flow-poster.webp"]){background:#e2eaf3}
.v5-media--video video{background:transparent}
/* A visual whose left and right edges differ keeps the full column width instead of a fill */
.v5-media:has(>img[src$="figma-overview.webp"])>img{width:100%;max-height:none}

/* Case covers: always full width of the column, with the same rounded corners as other images */
.finestro-case .v5-hero .v5-media--cover{width:100%;margin-inline:0;border-radius:var(--radius-card);overflow:hidden}
.finestro-case .v5-hero .v5-media--cover>img{display:block;width:100%;height:auto;max-width:none;max-height:none;border-radius:inherit}

/* Three images in one row */
.v5-pair--three{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:809px){.v5-pair--three{grid-template-columns:1fr;gap:12px}}

/* Phone shots in a row with captions */
.v5-shots{align-items:start}
.v5-shot{margin:0;min-width:0}
.v5-shot .v5-media{margin-top:0}
.v5-shot figcaption{margin-top:14px;font-family:var(--font-ui);font-size:var(--text-label);line-height:1.45;color:var(--color-text-muted)}
.v5-shot figcaption b{display:block;margin-bottom:2px;font-size:var(--text-ui);font-weight:600;color:var(--text)}

/* Screens + explanation side by side, on a dark card (Budgets & goals, Security) */
.v5-explain{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:40px;margin-top:24px;padding:28px 44px 28px 28px;border-radius:var(--radius-card);background:radial-gradient(90% 120% at 20% 30%,#1b1840 0%,#07080d 70%);color:#fff;overflow:hidden}
.v5-explain--flip{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);padding:28px 28px 28px 44px;background:radial-gradient(90% 120% at 80% 60%,#0f2e22 0%,#07080d 70%)}
.v5-explain--flip .v5-explain-media{order:2}
.v5-explain-media img{display:block;width:100%;height:auto;border-radius:16px}
.finestro-case .v5-explain .v5-label{color:#9fb3ff}
.finestro-case .v5-explain--flip .v5-label{color:#7fd6a8}
.finestro-case .v5-explain h4{margin-top:10px;font-size:28px;line-height:1.2;font-weight:600;letter-spacing:-.025em;color:#fff}
.finestro-case .v5-explain-text>p:not(.v5-label){margin-top:12px;font-size:var(--t-card);line-height:1.55;color:#c3cbe0}
.v5-explain ul{display:grid;gap:12px;margin-top:20px;padding:0;list-style:none}
.finestro-case .v5-explain li{position:relative;padding-left:18px;font-size:var(--t-card);line-height:1.5;color:#c3cbe0}
.v5-explain li::before{content:'';position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:#9fb3ff}
.v5-explain--flip li::before{background:#7fd6a8}
.finestro-case .v5-explain li b{color:#fff;font-weight:600}
@media(max-width:809px){.v5-explain,.v5-explain--flip{grid-template-columns:1fr;gap:20px;padding:20px}.v5-explain--flip .v5-explain-media{order:0}.finestro-case .v5-explain h4{font-size:22px}}

/* Cut-out phone mockups sit straight on the dark card */
.v5-explain-media img[src*="-cut."]{border-radius:0;filter:drop-shadow(0 24px 40px #0008)}

/* Which research problem a feature answers */
.finestro-case .v5-solves{margin-top:10px;color:var(--color-link)}
/* Result numbers */
.finestro-case .v5-stats strong{font-size:40px;line-height:1;letter-spacing:-.03em}

/* Both cases: one container width (Finestro text width, 1120px) for every block and image */
@media(min-width:810px){
 .finestro-page .v5-media--wide,.finestro-page .v5-wf-row{left:auto;width:100%;max-width:none;transform:none;margin-inline:0}
 .finestro-page .v5-media:not(.v5-media--wide):has(>img),.finestro-page .v5-media--video{width:100%;margin-inline:0}
 .finestro-page .v5-media:not(.v5-media--wide)>img{width:100%;max-height:none}
 .finestro-page .v5-media--video>video{width:100%;max-height:none}
 .finestro-page .v5-media--ink:has(>img[src$="analytics.webp"]){display:flex;justify-content:center;background:#F0F4F7}
 .finestro-page .v5-media--ink>img[src$="analytics.webp"]{width:auto;max-width:100%;max-height:min(760px,calc(100svh - 140px))}
}

/* Fills for the screens added from the Figma exports */
.v5-media:has(>img[src$="signup-flow.webp"]),
.v5-media:has(>img[src$="onboarding-cards.webp"]),
.v5-media:has(>img[src$="security-screens.webp"]),
.v5-media:has(>img[src$="budgets-screens.webp"]),
.v5-explain-media:has(>img[src$="security-screens.webp"]),
.v5-explain-media:has(>img[src$="budgets-screens.webp"]){background:#f0f4f7}
.v5-media:has(>img[src$="figma-flow.webp"]){background:#b3bec2}
/* Summary right after a section that ends with an image: a smaller gap */
.v5-section:has(>.v5-media:last-child)+.v5-summary{margin-top:40px}
@media(max-width:809px){.v5-section:has(>.v5-media:last-child)+.v5-summary{margin-top:28px}}

/* Two problem cards: two columns, no empty third slot */
@media(min-width:810px){.v5-ps:has(>li:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}