/* Finda hero-flow — the "banks → flower → outcomes" illustration.
   Scoped: every selector starts at .hero-flow; tokens (--ink, --bg-1, --serif, …)
   come from the public page stylesheet. Served at /brand/hero-flow/flow.css.

   Layer stack (bottom → top): base scene SVG (output ribbon + outcome words) →
   flower bitmap → .hf-front overlay (six input lanes, readable ACROSS the petals
   and converging through the open aperture) → notice → pause control. */

.hero-flow { position: relative; margin: clamp(24px, 3vw, 42px) auto 0; max-width: none;
  --hf-pad: 0px; }

/* screen-reader-only figcaption (identifies the illustration + example outcomes) */
.hero-flow .hf-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  border: 0;
}

/* pause / play — small, quiet, sits at the scene's top right */
.hero-flow .hf-toggle {
  position: absolute; z-index: 6; top: 0; right: 20px;
  width: 44px; height: 44px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--bg-1, #f8f6f0) 78%, transparent);
  border: 1px solid var(--line-2, #d3cfc0); color: var(--ink-2, #3b403a);
  cursor: pointer; transition: color .2s ease, border-color .2s ease;
}
.hero-flow:not(.hf-nojs) .hf-toggle { display: inline-flex; }
.hero-flow .hf-toggle:hover { color: var(--ink, #1d221e); border-color: var(--faint, #9c9a8c); }
.hero-flow .hf-toggle:focus-visible { outline: 2px solid var(--accent, #557a5f); outline-offset: 2px; }
.hero-flow .hf-toggle svg { width: 15px; height: 15px; fill: none;
  stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hero-flow .hf-toggle .hf-ic-play { display: none; }
.hero-flow .hf-toggle .hf-ic-play path { fill: currentColor; stroke: none; }
.hero-flow.hf-paused .hf-toggle .hf-ic-pause { display: none; }
.hero-flow.hf-paused .hf-toggle .hf-ic-play { display: block; }

/* ------------------------------------------------- the notice (screen-centred) */
/* Plain status line: quiet check + text, no capsule, no border, no shadow —
   nothing that could read as a button. Centred on the figure, which is itself
   centred on the page, so it is centred on the screen at every width. */
.hero-flow .hf-notice {
  position: absolute; z-index: 5; top: 4px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; white-space: normal;
  max-width: calc(100% - 96px); text-align: center;
  pointer-events: none;
  font: 500 16px/1.3 var(--sans, system-ui, sans-serif); color: var(--ink, #1d221e);
  transition: opacity .42s ease;
}
.hero-flow .hf-notice.hf-out { opacity: 0; }
.hero-flow .hf-check {
  width: 19px; height: 19px; flex: 0 0 auto; border-radius: 50%;
  background: var(--accent, #557a5f); padding: 3.5px;
  fill: none; stroke: var(--on-accent, #f8f7f1); stroke-width: 3.4;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------------------------------------------------------------- scene svg */
.hero-flow .hf-svg { display: block; width: 100%; height: auto; }
.hero-flow .hf-wscene .hf-svg { aspect-ratio: 1440 / 440; }

.hero-flow .hf-wscene, .hero-flow .hf-compact { position: relative; z-index: 1; }

/* dotted input streams (front overlay) */
.hero-flow .hf-stream {
  fill: none; stroke: var(--muted, #6b6a5d); stroke-width: 1.15;
  stroke-linecap: round; stroke-dasharray: .5 7;
}
/* ONE broad output ribbon + the advisor outcomes riding it */
.hero-flow .hf-ribbon { fill:var(--ink-2,#3b403a);stroke:none; }
.hero-flow .hf-w, .hero-flow .hf-sep {
  fill: var(--bg-1, #f8f6f0);
  font: 500 21px var(--serif, Georgia, serif);
  letter-spacing: .01em;
}
.hero-flow .hf-sep { opacity: .55; }
/* ------------------------------------------------------------- wide overlays */
.hero-flow .hf-bank { position: absolute; transform: translateY(-50%);
  display: flex; align-items: center; gap: 10px; }
.hero-flow .hf-chip {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; overflow: hidden;
  background: #fff;                       /* logos keep a white tile in both themes */
  box-shadow: 0 0 0 1px var(--line-2, #d3cfc0), 0 5px 12px -6px rgba(20, 18, 10, .35);
  display: inline-flex; align-items: center; justify-content: center;
}
.hero-flow .hf-chip img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-flow .hf-name {
  font: 600 20px/1.1 var(--sans, system-ui, sans-serif); color: var(--ink, #1d221e);
  letter-spacing: -.005em; white-space: nowrap;
}
.hero-flow .hf-doc {fill:var(--ink-2,#3b403a);font:500 19.5px var(--sans,system-ui,sans-serif);letter-spacing:.01em;}

/* ---------------------------------------------------------------- the flower */
.hero-flow .hf-flower { position: absolute; transform: translate(-50%, -50%);
  z-index: 2; }
.hero-flow .hf-float { display: block; width: 100%; height: auto;
  filter:none; }
@keyframes hfFloat {
  from { transform: translateY(-1.5px); }
  to   { transform: translateY(1.5px); }
}
.hero-flow .hf-float { animation: hfFloat 8.5s ease-in-out infinite alternate; }
.hero-flow.hf-noflower .hf-float { display: none; }

/* ------------------------------------------------- front overlay: input lanes */
/* Same viewBox and box as the matching base scene, one SVG per breakpoint,
   stacked ABOVE the flower so words and marks cross the petals and dive
   through the open centre. Overflow stays visible: JS extends each lane to
   the actual left screen edge, outside the canvas box. */
.hero-flow .hf-front { position: absolute; left: 0; right: 0; top: var(--hf-pad);
  z-index: 3; pointer-events: none; }
.hero-flow .hf-fsvg { display: none; width: 100%; height: auto; overflow: visible; }
.hero-flow .hf-fsvg[data-scene="wide"] { aspect-ratio: 1440 / 440; }

/* Compact compositions retain three independent sources at every width. */
.hero-flow .hf-compact{display:none;position:relative;}
@media(min-width:1280px){ .hero-flow .hf-fsvg[data-scene="wide"] { display: block; } }
@media(min-width:700px) and (max-width:1279px){ .hero-flow .hf-fsvg[data-scene="tablet"] { display: block; } }
@media(max-width:699px){ .hero-flow .hf-fsvg[data-scene="phone"] { display: block; } }
@media(max-width:1279px){
 .hero-flow{width:calc(100% - 44px);max-width:960px;margin:28px auto 0;padding:34px 0 0;overflow:visible;--hf-pad:34px;}
 .hero-flow .hf-wscene{display:none;}
 .hero-flow .hf-tablet{display:block;}
 .hero-flow .hf-flower{left:61.945%!important;top:calc(34px + (100% - 34px)*.47603)!important;width:22%!important;}
 .hero-flow .hf-name{font-size:16px;white-space:normal;max-width:112px;}
 .hero-flow .hf-chip{width:34px;height:34px;border-radius:9px;}
 .hero-flow .hf-bank{gap:9px;}
 .hero-flow .hf-doc{font-size:18px;}
 .hero-flow .hf-compact-word{font-size:19px;}
 .hero-flow .hf-notice{font-size:16px;}
 .hero-flow .hf-toggle{top:0;right:0;background:none;border:0;}
}
@media(max-width:699px){
 .hero-flow{width:calc(100% - 24px);max-width:440px;padding-top:30px;margin-top:22px;--hf-pad:30px;}
 .hero-flow .hf-tablet{display:none;}
 .hero-flow .hf-phone{display:block;}
 .hero-flow .hf-flower{left:79.445%!important;top:calc(30px + (100% - 30px)*.48831)!important;width:28%!important;}
 .hero-flow .hf-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
 .hero-flow .hf-notice{font-size:16px;top:10px;gap:7px;}
 .hero-flow .hf-check{width:17px;height:17px;}
 .hero-flow .hf-doc{font-size:17.2px;}
 .hero-flow .hf-compact-word{font-size:19px;}
}

/* ------------------------------------------------------- motion & pause off */
.hero-flow.hf-paused .hf-float, .hero-flow.hf-held .hf-float {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .hero-flow .hf-float { animation: none; }
  .hero-flow .hf-notice { transition: none; }
  .hero-flow .hf-toggle { display: none; }
}

@media (prefers-reduced-motion: reduce) { .hero-flow:not(.hf-nojs) .hf-toggle { display:none; } }

/* Light travels behind the petals and emerges through the open aperture. */
.hero-flow .hf-float { position:relative; z-index:1; filter:none; }
.hero-flow .hf-light { position:absolute; left:50%; top:49.45%; margin-top:-1.5px; pointer-events:none; height:3px; border-radius:50%; transform-origin:0 50%; background:linear-gradient(90deg,transparent,#f8edbd 35%,#fffef1 53%,#e2cb88 70%,transparent); box-shadow:0 0 5px 1px #f5dea055; animation:hfLight 4.8s ease-in-out infinite; }
.hero-flow .hf-light-back { z-index:0; width:80%; transform:rotate(8deg) translateX(-50%); }
.hero-flow .hf-light-front { z-index:2; width:40%; transform:rotate(8deg) translateX(-12%); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 25%,transparent 65%); }
@keyframes hfLight { 0%,100%{opacity:.3;scale:.97 1} 45%{opacity:1;scale:1.03 1} }
.hero-flow.hf-paused .hf-light,.hero-flow.hf-held .hf-light {animation-play-state:paused}
@media(max-width:1279px){
 .hero-flow .hf-light-back {width:80%;transform:rotate(0deg) translateX(-50%);}
 .hero-flow .hf-light-front {width:45%;transform:rotate(20deg);}
}
@media(prefers-reduced-motion:reduce){.hero-flow .hf-light{animation:none;opacity:.75}}



.hero-flow .hf-light::after {content:"";position:absolute;inset:-1px auto -1px 0;width:18%;border-radius:50%;background:linear-gradient(90deg,transparent,#fffbe0,transparent);box-shadow:0 0 5px #ead08e;animation:hfTransit 4.8s ease-in-out infinite;}
@keyframes hfTransit{0%{transform:translateX(0);opacity:0}20%{opacity:.8}80%{opacity:.8}100%{transform:translateX(460%);opacity:0}}
.hero-flow.hf-paused .hf-light::after,.hero-flow.hf-held .hf-light::after{animation-play-state:paused}
@media(max-width:1279px){.hero-flow .hf-light-back::after{animation-direction:reverse}}
@media(prefers-reduced-motion:reduce){.hero-flow .hf-light::after{animation:none;display:none}}


@media(max-width:699px){.hero-flow{padding-top:48px;--hf-pad:48px}.hero-flow .hf-flower{top:calc(48px + (100% - 48px)*.48831)!important;}}

.hero-flow .hf-output-summary{display:none;list-style:none;padding:0;margin:14px 0 0;gap:8px 20px;justify-content:center;flex-wrap:wrap;font:500 16px/1.35 var(--sans);color:var(--ink);}
@media(max-width:1279px){.hero-flow.hf-nojs .hf-output-summary{display:flex;}.hero-flow.hf-nojs .hf-compact-word{display:none;}}
@media(max-width:1279px) and (prefers-reduced-motion:reduce){.hero-flow .hf-output-summary{display:flex}.hero-flow .hf-compact-word{display:none}}

/* Static fallback and animated trains share exactly the same path geometry. */
.hero-flow .hf-flow-copy{display:none;pointer-events:none;}
.hero-flow.hf-moving .hf-flow-copy{display:block;}
.hero-flow.hf-moving .hf-bank,
.hero-flow.hf-moving .hf-doc,
.hero-flow.hf-moving .hf-w,
.hero-flow.hf-moving .hf-sep{visibility:hidden;}
.hero-flow.hf-moving .hf-stream{opacity:.24;stroke-width:.8;}
/* Incoming words cross page background AND sage petals: a thin theme-coloured
   casing keeps them readable over both, in both themes. */
.hero-flow .hf-moving-in{fill:var(--ink-2);font:500 19.5px var(--sans);letter-spacing:.01em;
  paint-order:stroke fill;stroke:var(--bg-1,#f8f6f0);stroke-width:3px;stroke-linejoin:round;}
.hero-flow .hf-moving-out{fill:var(--bg-1);font:500 23px var(--serif);letter-spacing:.01em;}
.hero-flow .hf-svg{overflow:hidden!important;}
@media(max-width:1279px){.hero-flow .hf-moving-in{font-size:18px}.hero-flow .hf-moving-out{font-size:20px}}
@media(max-width:699px){.hero-flow .hf-moving-in{font-size:17.2px}.hero-flow .hf-moving-out{font-size:19px}}

.hero-flow .hf-moving-logo{clip-path:inset(0 round 5px);}
/* Anchor the aperture to scene width, independent of the reduced-motion summary. */
.hero-flow{container-type:inline-size;}
@media(max-width:1279px){.hero-flow .hf-flower{top:calc(34px + 100cqw * 139 / 720)!important;}}
@media(max-width:699px){.hero-flow .hf-flower{top:calc(48px + 100cqw * 167 / 360)!important;}}
@media(max-width:1279px){
 .hero-flow.hf-nojs .hf-ribbon + .hf-compact-word{display:block;}
 .hero-flow.hf-nojs .hf-output-summary li:first-child{display:none;}
}
@media(max-width:1279px) and (prefers-reduced-motion:reduce){
 .hero-flow .hf-ribbon + .hf-compact-word{display:block;}
 .hero-flow .hf-output-summary li:first-child{display:none;}
}

/* A full-width scene keeps the outgoing ribbon connected to the screen edge. */
.hero-flow{width:100%;max-width:none;overflow:clip;--hf-pad:0px;padding:0;}
.hero-flow .hf-flower{top:calc(100cqw * 250 / 1440)!important;}
.hero-flow .hf-notice{max-width:calc(100% - 24px);width:max-content;transition:none;
  text-wrap:balance;transform-origin:center;}
.hero-flow .hf-moving-in{stroke-width:1.2px;}
.hero-flow .hf-stream{opacity:.2;}
.hero-flow .hf-input-summary{display:none;}
@media(max-width:1279px){
 .hero-flow .hf-flower{left:51.389%!important;top:calc(100cqw * 139 / 720)!important;width:22%!important;}
 .hero-flow .hf-notice{max-width:290px;}
}
@media(max-width:699px){
 .hero-flow .hf-flower{left:55.556%!important;top:calc(100cqw * 167 / 360)!important;width:28%!important;}
 .hero-flow .hf-notice{max-width:240px;}
 .hero-flow .hf-light-front{transform:rotate(0deg);}
}
/* A frozen word cannot be read by waiting for the rest of its journey. Keep
   compact static diagrams uncluttered and expose every input in readable type. */
@media(max-width:1279px){
 .hero-flow.hf-nojs .hf-doc{display:none;}
 .hero-flow.hf-nojs .hf-input-summary{display:grid;}
 .hero-flow .hf-input-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px;
  list-style:none;padding:0 22px;margin:12px 0 20px;font:500 16px/1.35 var(--sans);color:var(--ink);}
 .hero-flow .hf-output-summary{padding:0 22px 12px;}
}
@media(max-width:1279px) and (prefers-reduced-motion:reduce){
 .hero-flow .hf-doc{display:none;}
 .hero-flow .hf-input-summary{display:grid;}
}