.hero {
  background: #fff url('/assets/hero-pattern.svg') center center / cover no-repeat;
  height: 420px;
  overflow: hidden;
  position: relative;
  text-align: center;
}
.hero-copy { margin: auto; max-width: 820px; padding: 58px 24px 0; position: relative; z-index: 2; }
.pill { background: rgba(255, 255, 255, .86); border: 1px solid #c8d7ed; border-radius: 24px; color: var(--blue); display: inline-flex; font-size: 12px; font-weight: 700; letter-spacing: .06em; padding: 8px 18px; }
.hero h1 { font: 400 70px/.93 var(--serif); letter-spacing: -.015em; margin: 28px 0 24px; }
.hero h1 em { color: var(--amber); font-weight: 400; }
.hero p { color: var(--ink); font-size: 16px; line-height: 1.65; margin: 0 auto; max-width: 680px; }
.hero-art { display: none; }

.process { background: linear-gradient(90deg, #fff, #fffefc, #fff); padding: 40px 24px 48px; }
.section-heading { text-align: center; }
.section-heading span { color: var(--amber); font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.section-heading h2 { font: 400 36px/1.3 var(--serif); letter-spacing: -.02em; margin: 10px 0 8px; }
.section-heading p { color: var(--muted); font-size: 16px; margin: 0; }
.journey { margin: 44px auto 0; max-width: 1120px; }
.process-step { display: grid; grid-template-columns: 76px 1fr; min-height: 228px; position: relative; }
.process-step:not(:last-child)::before { background: #ead8bd; content: ''; height: calc(100% - 56px); left: 27px; position: absolute; top: 56px; width: 1px; }
.step-number { align-items: center; background: #f2f7ff; border-radius: 50%; color: #1254ac; display: flex; font-size: 14px; font-weight: 600; height: 54px; justify-content: center; width: 54px; }
.process-step:nth-child(even) .step-number { background: #fff5e6; color: #df8700; }
.step-card { align-items: center; background: #fff; border: 1px solid #e6e8ec; border-radius: 14px; box-shadow: 0 8px 24px rgba(16, 42, 88, .055); display: grid; grid-template-columns: 210px 1fr; min-height: 204px; margin-bottom: 24px; overflow: hidden; padding: 22px 28px; }
.process-step.reverse .step-card { grid-template-columns: 1fr 210px; }
.process-step.reverse .step-visual { grid-column: 2; grid-row: 1; }
.process-step.reverse .step-copy { grid-column: 1; grid-row: 1; }
.step-visual { align-items: center; background: linear-gradient(135deg, #f2f7ff, #f8f9fa); border-radius: 12px; color: #2363bc; display: flex; height: 160px; justify-content: center; margin-right: 32px; overflow: hidden; position: relative; }
.reverse .step-visual { background: linear-gradient(135deg, #fff8ed, #fffaf3); color: var(--amber); margin-left: 32px; margin-right: 0; }
.step-copy h3 { font: 400 27px/1.25 var(--serif); letter-spacing: -.015em; margin: 0 0 10px; }
.step-copy p { color: #43536a; font-size: 14px; line-height: 1.65; margin: 0; max-width: 680px; }
.step-copy ul { display: flex; flex-wrap: wrap; gap: 10px 28px; list-style: none; margin: 16px 0 0; padding: 0; }
.step-copy li { color: #47566c; font-size: 13px; white-space: nowrap; }
.step-copy li::before { background: #e4f0ff; border-radius: 50%; color: #1870e9; content: '✓'; display: inline-grid; font-size: 9px; height: 16px; margin-right: 7px; place-items: center; width: 16px; }
.reverse .step-copy li::before { background: #fff0d9; color: #e9950d; }

.person { border: 2px solid currentColor; border-radius: 50% 50% 35% 35%; font-size: 48px; padding: 3px 10px; }
.checks { font-size: 20px; line-height: 1.7; margin-left: 18px; }
.document, .report { background: #fff; border: 1px solid #efc681; border-radius: 5px; box-shadow: -7px 0 #f6ddb7; height: 112px; padding: 15px; position: relative; width: 135px; }
.document small { color: #746b5e; font-size: 9px; }
.document i, .report i { background: #d8cfbf; display: block; height: 2px; margin-top: 10px; width: 84px; }
.document b, .report b { background: var(--amber); border-radius: 50%; bottom: -9px; color: white; display: grid; height: 32px; place-items: center; position: absolute; right: -12px; width: 32px; }
.donut { background: conic-gradient(#123f83 0 22%, #3678d2 22% 43%, #6aa8f1 43% 63%, #bedaff 63% 100%); border-radius: 50%; height: 104px; position: relative; width: 104px; }
.donut::after { background: #f4f8fd; border-radius: 50%; content: ''; inset: 28px; position: absolute; }
.bank { border: 2px solid currentColor; border-radius: 50%; font-size: 42px; height: 70px; text-align: center; width: 70px; }
.mini-cards { bottom: 18px; display: flex; gap: 12px; position: absolute; }
.mini-cards i { background: #fff; border: 1px solid #e8dfd1; border-radius: 6px; box-shadow: 0 2px 6px #3331; display: grid; font-style: normal; height: 40px; place-items: center; width: 40px; }
.screen { background: #fff; border: 5px solid #dce8f7; border-radius: 4px; height: 92px; position: relative; width: 136px; }
.screen::after { background: #b5c9e4; bottom: -14px; content: ''; height: 10px; left: 58px; position: absolute; width: 10px; }
.screen i { border-bottom: 2px solid #3279dc; display: block; height: 42px; transform: skewY(-15deg); width: 108px; }
.screen span { color: #3279dc; left: 32px; position: absolute; top: 26px; }
.report { border-color: #edae4d; box-shadow: 8px 0 #f4dec0; width: 145px; }
.report i { width: 90px; }

.closing-callout { align-items: center; background: linear-gradient(90deg, #fff8ed, #fff); border-radius: 14px; display: grid; gap: 24px; grid-template-columns: 88px 1fr auto; margin: 0 auto 64px; max-width: 1120px; min-height: 132px; padding: 22px 32px; }
.values-icon { background: #fff7ea; border-radius: 50%; color: var(--amber); font-size: 12px; height: 68px; position: relative; text-align: center; width: 68px; }
.values-icon span { display: block; font-size: 32px; }
.closing-callout h2 { font: 400 26px var(--serif); margin: 0 0 6px; }
.closing-callout p { color: #59677a; font-size: 14px; line-height: 1.6; margin: 0; }
.closing-callout .primary-button { min-width: 140px; }
.closing-callout button span { margin-left: 8px; }
/* Which of the two pages this document carries the reader gets. The boot
   script in index.html sets `data-audience` on <html> from storage before the
   first paint, and app.js re-states it once the session is really known — so
   the switch has to key on the element the boot script can reach, not on a
   class a script at the bottom of the body adds after the page is on screen. */
.authenticated-how-it-works { display: none; }
html[data-audience="investor"] .guest-how-it-works { display: none; }
html[data-audience="investor"] .authenticated-how-it-works { display: block; }

/* Signed-in journey */
.logged-hero { --logged-hero-progress: 0; background: #d8effb; color: #071958; height: clamp(520px,54vw,720px); overflow: hidden; position: relative; width: 100%; }
/*
 * The signed-in hero. Served through `image-set()` for the same reason the
 * guest one is: a CSS background has no `srcset`, so without this the 799 KB
 * master goes to every returning investor at every viewport. The plain `url()`
 * is the fallback a browser that does not understand `image-set` keeps, so the
 * order of the two declarations is load-bearing.
 */
.logged-hero::after { background: #d8effb url('/images/generated/howItWorksBannerLight-1920.webp') center / cover no-repeat;
  background-image: image-set(
    url('/images/generated/howItWorksBannerLight-1920.avif') type('image/avif'),
    url('/images/generated/howItWorksBannerLight-1920.webp') type('image/webp'));
  content: ''; inset: 0; opacity: 0; position: absolute; transform: translate3d(0,calc(var(--logged-hero-progress) * -16px),0); transform-origin: center; will-change: clip-path,filter,transform; z-index: 0; }
.logged-hero::before { background: radial-gradient(ellipse 52% 66% at 17% 36%,rgba(250,253,255,.72) 0%,rgba(247,252,255,.5) 48%,rgba(245,251,255,.2) 72%,transparent 100%); content: ''; inset: 0; pointer-events: none; position: absolute; z-index: 1; }
.logged-hero.is-ready::after { animation: logged-artwork-in 1.25s cubic-bezier(.16,1,.3,1) .08s both; }
@keyframes logged-artwork-in { 0% { clip-path: inset(22% 0); filter: brightness(1.12) saturate(.75); opacity: 0; } 100% { clip-path: inset(0); filter: brightness(1) saturate(1); opacity: 1; } }
.logged-hero-inner { left: clamp(38px,4.5vw,78px); max-width: 610px; padding: clamp(54px,6vw,88px) 0 40px; position: relative; transform: translate3d(0,calc(var(--logged-hero-progress) * -18px),0); width: min(52%,610px); z-index: 2; }
.logged-hero-inner > * { clip-path: inset(0 100% 0 0); filter: blur(5px); opacity: 0; transform: translateY(16px); }
.logged-hero.is-ready .logged-hero-inner > * { animation: logged-copy-in .8s cubic-bezier(.16,1,.3,1) both; }
.logged-hero.is-ready .logged-hero-inner > :nth-child(1) { animation-delay: .38s; }
.logged-hero.is-ready .logged-hero-inner > :nth-child(2) { animation-delay: .52s; }
.logged-hero.is-ready .logged-hero-inner > :nth-child(3) { animation-delay: .66s; }
@keyframes logged-copy-in { to { clip-path: inset(0); filter: blur(0); opacity: 1; transform: translateY(0); } }
/* Mirror the landing banner's rendered type, including the Core theme's 500
   headline and 600 body weights; the important values keep the post-login
   typography layer from replacing the landing banner's tighter tracking. */
.logged-hero h1 { color: #080b1a; font: 500 clamp(42px,4.2vw,64px)/.98 var(--font-display) !important; letter-spacing: -.045em !important; margin: 0 0 16px; text-shadow: none; }
.logged-hero h1 em { color: inherit; font-style: normal; font-weight: inherit !important; letter-spacing: inherit !important; }
.logged-hero-inner > p { color: #111827; font-size: 13px; font-weight: 600; line-height: 1.55; margin: 0; max-width: 420px; text-shadow: 0 1px 5px rgba(255,255,255,.95), 0 0 12px rgba(255,255,255,.72); }
.logged-products { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; margin-top: 40px; max-width: 570px; width: 100%; }
.logged-products > a { align-items: center; backdrop-filter: blur(9px); background: rgba(255,255,255,.72); border: 1px solid rgba(23,52,91,.2); border-radius: 11px; box-shadow: 0 10px 28px rgba(20,61,97,.1); display: flex; gap: 14px; min-height: 92px; padding: 12px 14px; transition: background-color .2s ease,border-color .2s ease,transform .2s ease; }
.logged-products > a:hover,.logged-products > a:focus-visible { background: rgba(255,255,255,.92); border-color: rgba(23,52,91,.38); outline: none; transform: translateY(-2px); }
.line-icon { align-items: center; background: #4d2bd4; border-radius: 50%; color: #fff; display: flex; flex: 0 0 45px; font-size: 23px; height: 45px; justify-content: center; }
.line-icon.call-icon { background: #245caa; }
.line-icon.folio-icon { background: #15766f; }
.line-icon.amber-icon { background: #dc850d; }
.logged-products strong { color: #071958; display: block; font-size: 13px; font-weight: 650; }
.logged-products > a:nth-child(2) strong { color: #12675f; }
.logged-products > a:last-child strong { color: #80510b; }
.logged-products small { color: #29486b; display: block; font-size: 10px; line-height: 1.55; margin-top: 5px; }
.logged-products > a > b { color: #4d2bd4; font-size: 25px; font-weight: 400; margin-left: auto; }
.logged-products > a:nth-child(2) > b { color: #12675f; }
.logged-products > a:last-child > b { color: #a96206; }

@media (prefers-reduced-motion: reduce) {
  .logged-hero::after, .logged-hero.is-ready::after { animation: none; clip-path: none; filter: none; opacity: 1; transform: none; }
  .logged-hero-inner, .logged-hero-inner > *, .logged-hero.is-ready .logged-hero-inner > * { animation: none; clip-path: none; filter: none; opacity: 1; transform: none; }
}

.logged-process { background: #fff; padding: 26px 24px 14px; }
.logged-section-heading { align-items: center; display: flex; gap: 70px; margin: 0 auto 18px; max-width: 1140px; }
.logged-section-heading h2 { color: #061958; font: 400 43px var(--serif); margin: 0; }
.logged-section-heading p { color: #172653; font-size: 12px; line-height: 1.6; margin: 0; }
.logged-layout { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr) 260px; margin: auto; max-width: 1140px; }
.logged-steps { counter-reset: steps; }
.logged-step { display: grid; grid-template-columns: 60px 1fr; min-height: 250px; position: relative; }
.logged-step::before { background: #6b4cff; content: ''; height: 100%; left: 21px; position: absolute; top: 0; width: 1px; }
.logged-step:first-child::before { top: 24px; }
.logged-step:last-child::before { height: 24px; }
.step-index { align-items: center; background: white; border: 1px solid #775cff; border-radius: 50%; color: #4628dc; display: flex; font-size: 15px; height: 44px; justify-content: center; position: relative; width: 44px; z-index: 1; }
.logged-step-card { border: 1px solid #ece5df; border-radius: 13px; display: grid; grid-template-columns: 88px 1fr; margin-bottom: 8px; min-height: 240px; padding: 17px 18px 11px 10px; position: relative; }
.step-symbol { align-items: center; background: #f7f4ff; border-radius: 50%; color: #4424dc; display: flex; font-size: 32px; height: 68px; justify-content: center; width: 68px; }
.step-content h3 { color: #071958; font: 400 19px/1.25 var(--serif); margin: 1px 0 3px; }
.step-content > p { color: #26365f; font-size: 11px; line-height: 1.5; margin: 0 0 8px; }
.step-content ul { color: #27376a; font-size: 10px; line-height: 1.55; margin: 0; padding-left: 14px; }
.step-content li::marker { color: #4927e5; }
.two-columns { column-gap: 42px; columns: 2; }
.step-content aside { align-items: flex-start; background: linear-gradient(90deg,#f6f2ff,#fbf9ff); border-radius: 8px; color: #3f20cc; display: flex; font-size: 15px; gap: 10px; line-height: 1.35; margin-top: 8px; padding: 7px 15px; }
.step-content aside span { font-size: 10px; }
.card-arrow { color: #4725e1; font-size: 28px; font-weight: 400; position: absolute; right: 27px; top: 46%; }
.guardrail-grid { display: grid; gap: 8px 22px; grid-template-columns: repeat(4,1fr); }
.guardrail-grid > span { align-items: center; color: #4828df; display: flex; font-size: 21px; gap: 9px; }
.guardrail-grid small { color: #26365f; font-size: 9px; line-height: 1.35; }
.compact-list { line-height: 1.8 !important; }
.short-step { min-height: 145px; }
.short-step .logged-step-card { min-height: 135px; }
.short-step .step-symbol { height: 62px; width: 62px; }
.outcome-grid { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 5px; }
.outcome-grid > span { color: #4927e5; font-size: 21px; text-align: center; }
.outcome-grid > span + span { border-left: 1px solid #eee7e1; }
.outcome-grid small { color: #1d2e5c; display: block; font-size: 8px; line-height: 1.35; }
.outcome-grid.five { grid-template-columns: repeat(5,1fr); }

.journey-summary { background: linear-gradient(180deg,#fffaf4,#fff); border: 1px solid #eee5db; border-radius: 14px; padding: 32px 16px 0; text-align: center; }
.journey-summary > h2 { color: #071958; font: 400 22px/1.25 var(--serif); margin: 0 0 24px; }
.summary-stage > span { align-items: center; background: #fff; border: 1px solid #e9dfd4; border-radius: 50%; color: #4b26e0; display: flex; font-size: 29px; height: 70px; justify-content: center; margin: 0 auto 10px; width: 70px; }
.summary-stage strong { color: #4224d5; display: block; font-size: 13px; }
.summary-stage p { color: #1e2e5b; font-size: 11px; line-height: 1.55; margin: 5px 0; }
.journey-summary > i { border-left: 2px dotted #7e64ed; display: block; height: 34px; margin: 13px auto; width: 0; }
.monitor-stage > span { color: #dd7c00; }
.monitor-stage strong { color: #c66b00; }
.summary-decision { align-items: start; border-top: 1px solid #eadfd3; display: grid; gap: 4px 10px; grid-template-columns: 50px 1fr; margin-top: 34px; padding: 27px 8px; text-align: left; }
.summary-decision > span { align-items: center; background: #f8f5ff; border-radius: 50%; color: #4424dc; display: flex; font-size: 26px; height: 48px; justify-content: center; width: 48px; }
.summary-decision h3 { color: #071958; font: 400 18px/1.2 var(--serif); margin: 2px 0 0; }
.summary-decision p { color: #26365f; font-size: 11px; grid-column: 1 / -1; line-height: 1.65; margin: 12px 0 0; }
.logged-bottom-note { align-items: center; background: linear-gradient(90deg,#f6f3fb,#fbf9fb); border-radius: 9px; display: flex; gap: 11px; margin: 8px auto 0; max-width: 1140px; min-height: 47px; padding: 8px 18px; }
.logged-bottom-note > span { color: #4524df; font-size: 25px; }
.logged-bottom-note strong { color: #071958; font: 400 17px var(--serif); }
.logged-bottom-note p { font: 400 16px var(--serif); margin: 0; }
.logged-bottom-note em { color: #4322d8; }

/* Signed-in six-step journey. The mountain artwork is intentionally kept as a
   standalone public asset so it can be replaced without rebuilding the page. */
.six-step-journey {
  background: linear-gradient(105deg,#f7fcff 0%,#f4faff 47%,#fffaf3 100%);
  font-family: var(--font-body);
  min-height: clamp(900px,66.667vw,1024px);
  overflow: hidden;
  padding: 30px 0 22px 4vw;
  position: relative;
}
.six-step-journey::before {
  background: radial-gradient(circle at 10% 13%,rgba(170,220,255,.2),transparent 28%),radial-gradient(circle at 84% 18%,rgba(255,232,190,.25),transparent 24%);
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
}
.six-step-journey::after {
  background:
    radial-gradient(ellipse 520px 430px at 70% -7%,transparent 99.3%,rgba(255,255,255,.82) 99.6%,transparent 100%),
    radial-gradient(ellipse 710px 610px at 72% 2%,transparent 99.35%,rgba(241,206,139,.48) 99.6%,transparent 100%);
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
}
/*
 * The journey artwork.
 *
 * A CSS background has no `srcset`, which is how a 2560x3840, 1.4 MB master
 * ended up being downloaded whole to be painted into a column about 570 px
 * wide behind a mask. `image-set()` is the background equivalent: the browser
 * picks AVIF where it can and the right rung for its pixel density, and the
 * plain `url()` above it is what a browser that does not understand
 * `image-set` keeps — so the declaration order here is load-bearing, not
 * stylistic.
 */
.journey-art {
  background: url('/images/generated/howItWorksMainContent-768.webp') center / 100% 100% no-repeat;
  background-image: image-set(
    url('/images/generated/howItWorksMainContent-768.avif') type('image/avif') 1x,
    url('/images/generated/howItWorksMainContent-1600.avif') type('image/avif') 2x,
    url('/images/generated/howItWorksMainContent-768.webp') type('image/webp') 1x,
    url('/images/generated/howItWorksMainContent-1600.webp') type('image/webp') 2x);
  inset: 0 0 0 54%;
  -webkit-mask-image: linear-gradient(90deg,transparent 0%,rgba(0,0,0,.14) 8%,rgba(0,0,0,.72) 19%,#000 31%);
  mask-image: linear-gradient(90deg,transparent 0%,rgba(0,0,0,.14) 8%,rgba(0,0,0,.72) 19%,#000 31%);
  position: absolute;
}
.journey-art::before {
  background: linear-gradient(90deg,rgba(245,251,255,.76),rgba(245,251,255,.32) 21%,transparent 36%);
  content: '';
  inset: 0;
  position: absolute;
}
.six-step-content { position: relative; width: 55vw; z-index: 1; }
.six-step-heading { margin: 0 0 44px 18px; }
.six-step-heading > span { align-items: center; color: #bf7100; display: flex; font-size: 13px; font-weight: 700; gap: 16px; letter-spacing: .16em; }
.six-step-heading > span::after { background: #e89a1c; content: ''; height: 2px; width: 64px; }
.six-step-heading h2 { color: #071b68; font: 500 clamp(34px,3vw,49px)/1.1 var(--font-display); letter-spacing: -.05em; margin: 7px 0 8px; white-space: nowrap; }
.six-step-heading h2 em { color: #bc6b00; font-style: normal; font-weight: 500; }
.six-step-heading p { color: #536995; font-size: 15px; line-height: 1.55; margin: 0; }
.six-step-list { list-style: none; margin: 0; padding: 0; }
.journey-step { --accent:#3479ef; display: grid; grid-template-columns: 66px 1fr; min-height: 120px; position: relative; }
.journey-step::before { background: var(--accent); content: ''; left: 20px; position: absolute; top: 44px; bottom: -1px; width: 1px; }
.journey-step:last-child::before { display: none; }
.journey-number { align-items: center; background: rgba(255,255,255,.8); border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); display: flex; font-size: 16px; font-weight: 700; height: 42px; justify-content: center; position: relative; width: 42px; z-index: 1; }
.journey-step article { align-items: center; align-self: start; background: rgba(248,252,255,.73); border: 1px solid color-mix(in srgb,var(--accent) 24%,white); border-radius: 13px; display: grid; grid-template-columns: 90px minmax(280px,1fr) 180px; min-height: 102px; padding: 9px 13px; }
.journey-step i { background: radial-gradient(circle at 40% 42%,var(--accent) 0 18%,color-mix(in srgb,var(--accent) 50%,white) 19% 31%,color-mix(in srgb,var(--accent) 12%,white) 32% 62%,transparent 63%); border-radius: 50%; height: 64px; width: 64px; }
.journey-step h3 { color: #061866; font-size: 18px; font-weight: 600; letter-spacing: -.035em; line-height: 1.2; margin: 0 0 4px; }
.journey-step p { color: #405989; font-size: 12px; line-height: 1.5; margin: 0; }
.journey-step article > strong { border-left: 1px solid color-mix(in srgb,var(--accent) 22%,white); color: #395687; font-size: 12px; line-height: 1.45; min-height: 47px; padding: 7px 0 0 21px; }
.step-purple { --accent:#7447ed; }
.step-gold { --accent:#e59a19; }
.step-teal { --accent:#38a895; }
.is-featured article { background: rgba(255,251,243,.86); }
.is-featured h3,.is-featured article > strong { color: #ad6100; }
.is-featured h3 { font-size: 20px; font-weight: 700; }
.connected-note { align-items: center; background: rgba(248,252,255,.75); border: 1px solid #bdd5f7; border-radius: 11px; display: flex; gap: 18px; margin-left: 2px; margin-top: 4px; min-height: 61px; padding: 9px 20px; }
.connected-note > span { align-self: stretch; background: #e69a00; width: 3px; }
.connected-note p { color: #425989; font-size: 11px; line-height: 1.45; margin: 0; }
.connected-note strong { color: #071866; display: block; font-size: 14px; }

@media (max-width: 1100px) {
  .six-step-journey { padding-inline: 28px; }
  .six-step-content { width: 73%; }
  .journey-art { opacity: .72; }
  .journey-step article { grid-template-columns: 74px minmax(260px,1fr) 165px; }
  .journey-step i { height: 62px; width: 62px; }
  .six-step-heading h2 { white-space: normal; }
}

@media (max-width: 760px) {
  .six-step-journey { padding: 35px 18px 28px; }
  /* Full-width here, but at 16% opacity behind the copy: a watermark, and one
     rung lower than the masked desktop treatment needs. */
  .journey-art {
    background-image: url('/images/generated/howItWorksMainContent-480.webp');
    background-image: image-set(
      url('/images/generated/howItWorksMainContent-480.avif') type('image/avif') 1x,
      url('/images/generated/howItWorksMainContent-768.avif') type('image/avif') 2x,
      url('/images/generated/howItWorksMainContent-480.webp') type('image/webp') 1x,
      url('/images/generated/howItWorksMainContent-768.webp') type('image/webp') 2x);
    inset: 0; mask-image: none; opacity: .16; -webkit-mask-image: none;
  }
  .journey-art::before { background: rgba(247,252,255,.55); }
  .six-step-content { width: 100%; }
  .six-step-heading { margin-left: 0; }
  .six-step-heading h2 { font-size: 36px; }
  .six-step-heading p { font-size: 13px; }
  .six-step-heading p br,.journey-step p br { display: none; }
  .journey-step { grid-template-columns: 44px 1fr; min-height: 0; padding-bottom: 12px; }
  .journey-step::before { left: 17px; top: 38px; }
  .journey-number { font-size: 14px; height: 36px; width: 36px; }
  .journey-step article { grid-template-columns: 52px 1fr; min-height: 120px; padding: 12px; }
  .journey-step i { height: 44px; width: 44px; }
  .journey-step article > strong { border-left: 0; border-top: 1px solid color-mix(in srgb,var(--accent) 22%,white); grid-column: 2; margin-top: 9px; min-height: 0; padding: 8px 0 0; }
  .journey-step h3 { font-size: 16px; }
  .journey-step p { font-size: 11px; }
  .connected-note { margin-left: 44px; }
}

.guest-how-it-works {
  --serif: var(--font-display);
  background: #fffdfb;
  font-family: var(--font-body);
  padding: 0 24px;
}
.guest-how-it-works strong { font-weight: 600; }
html:not([data-audience="investor"]) > body > primary-menu {
  margin-bottom: -88px;
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* The pre-login banner. Its master is in assets-original/ with the others;
   replacing it means replacing that file and running `npm run images`.
   `image-set()` is the background equivalent of `srcset`, and the plain
   `url()` before it is what a browser that does not understand it keeps, so
   the order of the two is load-bearing. The wide-viewport rungs are in the
   media query at the end of the signed-in hero's. */

.round-icon { border: 1px solid #7658b8; border-radius: 50%; color: #805512; display: grid; flex: 0 0 58px; font-size: 27px; height: 58px; place-items: center; }.round-icon.bars { border-color: #a56816; }

.guest-explainer { display: grid; grid-template-columns: .9fr 1.1fr; margin: 28px auto 24px; max-width: 1120px; }
.explainer-intro { border-right: 1px solid #ebe7ed; padding: 0 45px 0 18px; }.explainer-intro h2 { font: 400 51px var(--serif); margin: 0; }.explainer-intro h3 { font: 400 19px var(--serif); margin: 2px 0 24px; }.explainer-intro h3 em { color: #b56820; font-weight: 400; }.explainer-intro p { font-size: 13px; line-height: 1.75; margin: 0 0 10px; }
.explainer-points { list-style: none; margin: 57px 0 0; padding: 0 0 0 46px; }.explainer-points li { align-items: center; display: flex; gap: 22px; margin-bottom: 21px; }.explainer-points li > span { color: #5936e2; font-size: 31px; width: 34px; }.explainer-points p { font-size: 13px; margin: 0; }.explainer-points em { color: #b56820; font-style: normal; }
.product-flow { display: grid; gap: 40px 20px; grid-template-columns: 1fr 56px 1fr; margin: 30px auto 24px; max-width: 1120px; position: relative; }.flow-card { border: 1px solid; border-radius: 14px; display: flex; flex-direction: column; min-height: 365px; padding: 25px 24px 22px; }.studio-card { background: linear-gradient(135deg,#fcfaff,#f8f5ff); border-color: #ddd4f2; }.monitor-card { background: linear-gradient(135deg,#fffdf9,#fffaf4); border-color: #eed9bd; }.flow-card header { align-items: center; display: flex; gap: 16px; }.flow-card header span { background: #4f27d7; border-radius: 50%; color: white; display: grid; height: 34px; place-items: center; width: 34px; }.monitor-card header span { background: #d99538; }.flow-card h2 { font: 400 22px var(--serif); margin: 0; }.monitor-card h2 { color: #9a5119; }.flow-copy { margin: 12px 0 18px 58px; }.flow-copy strong,.flow-copy p { font-size: 12px; }.flow-copy p { line-height: 1.7; margin: 8px 0 0; max-width: 360px; }.studio-inputs { display: flex; justify-content: space-around; margin-bottom: 24px; margin-top: 29px; }.studio-inputs > span { color: #5632db; font-size: 24px; text-align: center; }.studio-inputs small { color: var(--navy); display: block; font-size: 10px; line-height: 1.5; margin-top: 6px; }.studio-output { background: #f3edfc; border: 1px solid #e1d6f6; border-radius: 10px; color: #4e2bc7; display: flex; font-size: 12px; gap: 16px; margin-top: auto; padding: 12px 18px; }.monitor-card .studio-output { background: #fdf4e8; border-color: #f0dcc0; color: #96551a; }.flow-arrow { align-self: center; background: #fff; border: 1px solid #ddd6ec; border-radius: 50%; color: #4f2be0; display: grid; font-size: 26px; height: 56px; place-items: center; width: 56px; z-index: 2; }.monitor-card + .flow-arrow { border-color: #eed9bd; color: #b9701c; }.monitor-tiles { display: grid; gap: 8px; grid-template-columns: repeat(3,1fr); margin-bottom: 24px; margin-top: 25px; }.monitor-tiles div { background: #fffdfa; border: 1px solid #eee4d9; border-radius: 10px; min-height: 185px; padding: 18px 8px; text-align: center; }.monitor-tiles b { color: #5530d8; display: block; font-size: 27px; }.monitor-tiles strong { display: block; font-size: 12px; margin: 8px 0; }.monitor-tiles p { font-size: 10px; line-height: 1.6; margin: 0; }

/* Guest journey — measured to the supplied desktop composition. */
.guest-explainer { gap: 0; grid-template-columns: 47% 53%; margin-bottom: 32px; margin-top: 36px; width: min(92vw,1120px); }
.explainer-intro { padding: 0 48px 0 20px; }
.explainer-intro h2 { font-size: 54px; letter-spacing: -.025em; line-height: 1; }
.explainer-intro h3 { font-size: 20px; margin: 14px 0 28px; }
.explainer-intro p { font-size: 14px; line-height: 1.75; }
.explainer-points { margin-top: 46px; padding: 0 22px 0 48px; }
.explainer-points li { gap: 24px; margin-bottom: 22px; }
.explainer-points p { font-size: 14px; line-height: 1.65; }
.product-flow { gap: 44px 22px; margin-bottom: 28px; margin-top: 20px; width: min(92vw,1120px); }
.flow-card { min-height: 405px; padding: 28px 25px 24px; }
.flow-card h2 { font-size: 24px; }
.flow-copy { margin: 14px 0 20px 59px; }
.flow-copy strong,.flow-copy p { font-size: 13px; }
.studio-inputs { border-top: 1px solid #eee8f5; margin-top: 34px; padding-top: 23px; }
.studio-inputs > span { font-size: 27px; }
.studio-inputs small { font-size: 11px; }
.studio-output { align-items: center; font-size: 13px; min-height: 63px; }
.monitor-tiles { margin-top: 28px; }
.monitor-tiles div { min-height: 205px; padding-top: 21px; }
.monitor-tiles b { font-size: 31px; }
.monitor-tiles strong { font-size: 13px; }
.monitor-tiles p { font-size: 11px; }
/* The closing promise, set as one last scene of the product story rather
   than a section of its own: it stands on the story's ground with no panel or
   frame, its photograph fades in from the right behind the copy the way the
   story's scenes do, and the copy uses the story's type, amber emphasis,
   the banner strips' spaced-capital labels and the banner's buttons. */
.decision-banner {
  --decision-ink: var(--pb-ink, #080b1a);
  --decision-text: var(--pb-text, #344260);
  background: #f7f9fc;
  color: var(--decision-ink);
  display: flex;
  align-items: center;
  margin: 0 calc(50% - 50vw);
  min-height: clamp(520px, 46vw, 720px);
  overflow: hidden;
  padding: clamp(40px, 5vw, 72px) max(24px, var(--public-hero-copy-left, 7vw));
  position: relative;
}
.decision-scene { bottom: 0; position: absolute; right: 0; top: 0; width: min(62%, 1040px); }
.decision-scene picture,.decision-scene img { display: block; height: 100%; width: 100%; }
/* Faded in from the copy's side, and softened into the story above and the
   footer below, so the photograph has no edge of its own. */
.decision-scene img {
  filter: saturate(.85);
  object-fit: cover;
  object-position: 50% 35%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 22%, #000 52%), linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 22%, #000 52%), linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-composite: intersect;
}
.decision-copy { max-width: 520px; position: relative; z-index: 1; }
.decision-banner h2 {
  color: var(--decision-ink);
  font: 600 clamp(38px, 4vw, 60px)/1.04 var(--font-display);
  letter-spacing: -.045em;
  margin: 0;
}
.decision-banner h2 em { color: var(--pb-amber-text, #e0a13a); display: block; font-style: normal; }
.decision-lede { color: var(--decision-text); font-size: clamp(16px, 1.4vw, 20px); line-height: 1.5; margin: 18px 0 0; }

/* Who does what, set off like the banner strips' "In your universe": a short
   rule and a spaced capital label — amber for the investor, sky for VestMind,
   so the two colours interlock here as they do along the banner. */
.decision-roles { display: grid; gap: 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 36px 0 0; }
.decision-role { border-top: 2px solid var(--pb-band, #e9a23b); padding-top: 14px; }
.decision-role--vestmind { border-top-color: var(--pb-sky, #a9dcf6); }
.decision-role dt { color: var(--decision-ink); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; margin: 0 0 6px; text-transform: uppercase; }
.decision-role dd { color: var(--decision-text); font-size: 14.5px; line-height: 1.5; margin: 0; }
.decision-actions { margin-top: 36px; }
.decision-actions .pb-cta { border: 0; cursor: pointer; }

/* Narrow screens: the photograph moves under the copy and fades in from its
   top edge instead. */
@media (max-width: 900px) {
  .decision-banner { align-items: stretch; flex-direction: column; min-height: 0; padding: 40px 16px 0; }
  .decision-scene { order: 1; position: relative; width: auto; height: clamp(300px, 80vw, 460px); margin: 8px -16px 0; }
  .decision-scene img {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 86%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 86%, transparent 100%);
  }
}
@media (max-width: 520px) {
  .decision-banner h2 { font-size: 34px; }
  .decision-roles { gap: 20px; grid-template-columns: minmax(0, 1fr); }
}

/* Guest product journey */
.guest-explainer { margin: 0 -24px; padding: 46px max(5vw, calc((100vw - 1180px) / 2)) 48px; position: relative; }
.guest-explainer::before { background: radial-gradient(circle at 36% 12%, rgba(118,196,255,.16), transparent 29%), radial-gradient(circle at 88% 1%, rgba(129,204,255,.15), transparent 25%); content: ''; inset: 0; pointer-events: none; position: absolute; }
.journey-intro { display: grid; grid-template-columns: 47% 40% 13%; min-height: 225px; position: relative; }
.journey-heading { border-right: 1px solid #dbe5f1; padding-right: 42px; }
.journey-kicker { color: #e88300; display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; margin-bottom: 10px; }
.journey-heading h2 { color: #061c65; font: 500 clamp(37px,3.3vw,51px)/1.02 var(--sans); letter-spacing: -.045em; margin: 0; }
.journey-heading h2 em { color: #e65c00; font-style: normal; }
.journey-heading p { color: #425b87; font-size: 15px; line-height: 1.55; margin: 14px 0 0; }
.journey-principles { list-style: none; margin: 0; padding: 0 16px 0 34px; position: relative; }
.journey-principles::before { background: #cbd2dd; content: ''; left: 60px; position: absolute; top: 25px; bottom: 25px; width: 1px; }
.journey-principles li { align-items: center; display: flex; gap: 22px; margin: 0 0 18px; position: relative; }
.principle-icon { background: radial-gradient(circle, #7197ff 0 19%, rgba(224,235,255,.72) 21%, rgba(244,249,255,.5) 66%, rgba(193,211,239,.55) 68%, rgba(255,255,255,.74) 70%); border-radius: 50%; display: block; flex: 0 0 52px; height: 52px; position: relative; }
.journey-principles li:nth-child(2) .principle-icon { background: radial-gradient(circle, #7668eb 0 19%, rgba(232,228,255,.74) 21%, rgba(249,247,255,.5) 66%, rgba(210,204,242,.55) 68%, rgba(255,255,255,.74) 70%); }
.journey-principles li:nth-child(3) .principle-icon { background: radial-gradient(circle, #cf8420 0 19%, rgba(250,232,205,.76) 21%, rgba(255,250,242,.5) 66%, rgba(232,214,187,.55) 68%, rgba(255,255,255,.74) 70%); }
.journey-principles li:nth-child(4) .principle-icon { background: radial-gradient(circle, #3ea895 0 19%, rgba(215,241,235,.76) 21%, rgba(247,253,251,.5) 66%, rgba(197,225,220,.55) 68%, rgba(255,255,255,.74) 70%); }
.journey-principles p { margin: 0; }
.journey-principles strong,.journey-principles small { display: block; }
.journey-principles strong { color: #081d61; font-size: 15px; letter-spacing: -.025em; margin-bottom: 4px; }
.journey-principles small { color: #536b97; font-size: 10.5px; line-height: 1.45; }
.journey-note { align-self: center; color: #153a96; font: italic 26px/1.15 var(--serif); margin: 0; transform: rotate(-8deg); }
.journey-note b { font-weight: 400; }
.journey-note::after { background: #ec7b00; border-radius: 50%; content: ''; display: block; height: 2px; margin: 12px 0 0 2px; transform: rotate(-10deg); width: 100px; }
.guest-explainer .product-flow { display: grid; gap: 22px 30px; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 22px 0 0; max-width: none; position: relative; width: auto; }
.guest-explainer .flow-card { background: rgba(250,253,255,.7); border-color: #bdd5ff; border-radius: 15px; box-sizing: border-box; min-height: 425px; padding: 24px 18px 16px; }
.guest-explainer .flow-card:nth-child(n+3) { background: rgba(255,252,246,.72); border-color: #f1d6ad; }
.guest-explainer .flow-card header { align-items: flex-start; gap: 16px; }
.guest-explainer .flow-card header > span { background: #3175ef; flex: 0 0 38px; height: 38px; width: 38px; }
.guest-explainer .call-card header > span { background: #6036e4; }
.guest-explainer .flow-card:nth-child(n+3) header > span { background: #f29b21; }
.guest-explainer .flow-card h3 { color: #071d64; font: 500 26px/1 var(--sans); letter-spacing: -.04em; margin: 2px 0 7px; }
.guest-explainer .flow-card:nth-child(n+3) h3 { color: #df5a00; }
.guest-explainer .flow-card header strong { color: #071d64; font-size: 12px; }
.product-card-body { display: grid; flex: 1; gap: 16px; grid-template-columns: 55% 45%; margin-top: 20px; min-height: 145px; }
.product-card-body > p { color: #425b87; font-size: 11.5px; line-height: 1.65; margin: 0; }
.folio-preview,.stock-preview,.blueprint-preview,.monitor-preview { align-self: start; background: rgba(255,255,255,.86); border: 1px solid #e6edf8; border-radius: 10px; box-shadow: 0 8px 24px rgba(40,68,120,.07); box-sizing: border-box; padding: 10px; }
.folio-preview > span,.monitor-preview > span { display: grid; font-size: 10px; grid-template-columns: 25px 1fr; margin-bottom: 6px; }
.folio-preview small,.monitor-preview small { color: #607398; font-size: 8px; grid-column: 2; }
.donut { align-items: center; background: conic-gradient(#334dea 0 45%,#2cbe7b 45% 73%,#76a8ef 73% 88%,#f5a623 88% 95%,#bbb3eb 95%); border-radius: 50%; display: flex; flex-direction: column; font-size: 7px; height: 78px; justify-content: center; margin: 7px auto 0; width: 78px; }
.allocation-preview .donut::after { content: none; }
.allocation-preview .donut::before { background: #fff; border-radius: 50%; content: ''; inset: 28%; position: absolute; }
.allocation-preview .donut span,.allocation-preview .donut b { position: relative; z-index: 1; }
.stock-preview small { color: #8290aa; display: block; font-size: 8px; }
.stock-preview > strong { color: #163170; display: flex; font-size: 10px; justify-content: space-between; margin: 12px 0; }
.stock-preview i { border-bottom: 2px solid #45bc79; display: block; height: 35px; transform: skewY(-7deg); }
.stock-preview span { color: #53668e; display: block; font-size: 7px; margin-top: 10px; }
.blueprint-preview strong,.blueprint-preview span { display: block; font-size: 9px; margin-bottom: 9px; }
.blueprint-preview span { color: #3c567e; }
.monitor-preview > span { grid-template-columns: 27px 1fr; padding: 3px 0 6px; }
.product-features { border-top: 1px solid rgba(90,111,161,.14); display: flex; justify-content: space-around; margin: 12px 0 15px; padding-top: 15px; }
.product-features > span { color: #3476f1; font-size: 21px; text-align: center; width: 19%; }
.flow-card:nth-child(n+3) .product-features > span { color: #e98300; }
.product-features small { color: #17336f; display: block; font-size: 10px; line-height: 1.4; margin-top: 5px; }
.folio-features svg { fill: none; height: 24px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 24px; }
.product-output { background: rgba(239,246,255,.75); border: 1px solid #d4e2fb; border-radius: 10px; color: #2964db; display: flex; font-size: 12px; gap: 18px; margin-top: auto; padding: 12px 18px; }
.flow-card:nth-child(n+3) .product-output { background: rgba(255,247,234,.75); border-color: #f0d9b8; color: #d96600; }
@media (max-width: 900px) { .journey-intro { grid-template-columns: 1fr 1fr; } .journey-note { display:none; } .guest-explainer .product-flow { grid-template-columns:1fr; } }
@media (max-width: 640px) { .guest-explainer { margin: 0 -12px; padding: 34px 18px; } .journey-intro { display:block; } .journey-heading { border:0; padding:0; } .journey-heading h2 { font-size:38px; } .journey-heading p br { display:none; } .journey-principles { margin-top:30px; padding:0; } .product-card-body { grid-template-columns:1fr; } .folio-preview,.stock-preview,.blueprint-preview,.monitor-preview { display:none; } .guest-explainer .flow-card { min-height:400px; } }
.guest-explainer { display: block; max-width: none; width: auto; }
.access-guidance { height: 1px; margin: -1px; overflow: hidden; position: absolute; width: 1px; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Reference calibration: preserve the compact 1228px composition rather than
   allowing the journey cards to expand with wide browser windows. */
.guest-explainer {
  padding: 30px max(3.1vw, calc((100vw - 1152px) / 2)) 44px;
}
.journey-intro {
  grid-template-columns: 49% 39% 12%;
  min-height: 246px;
}
.journey-heading { padding-left: 16px; padding-right: 38px; }
.journey-heading h2 { font-size: clamp(40px, 3.35vw, 50px); line-height: 1.01; }
.journey-heading p { font-size: 15px; margin-top: 15px; }
.journey-principles { padding-left: 32px; padding-right: 10px; }
.journey-principles::before { left: 58px; }
.journey-principles li { gap: 20px; margin-bottom: 13px; }
.principle-icon { flex-basis: 52px; height: 52px; }
.journey-principles strong { font-size: 15px; }
.journey-principles small { font-size: 10.5px; line-height: 1.4; }
.journey-note { font-size: 25px; }
.guest-explainer .product-flow { gap: 22px 30px; margin-top: 0; }
.guest-explainer .flow-card { min-height: 440px; padding: 24px 18px 16px; }
.guest-explainer .flow-card h3 { font-size: 27px; }
.guest-explainer .flow-card header strong { font-size: 13px; }
.product-card-body { gap: 15px; grid-template-columns: 55% 45%; margin-top: 21px; min-height: 160px; }
.product-card-body > p { font-size: 13px; line-height: 1.7; padding-left: 1px; }
.folio-preview,.stock-preview,.blueprint-preview,.monitor-preview { min-height: 142px; }
.product-features { margin-bottom: 14px; margin-top: 12px; padding-top: 16px; }
.product-output { min-height: 45px; box-sizing: border-box; align-items: center; }
@media (max-width: 900px) {
  .guest-explainer { padding-left: 28px; padding-right: 28px; }
  .journey-heading { padding-left: 0; }
}
@media (max-width: 640px) {
  .guest-explainer { padding: 34px 18px; }
  .guest-explainer .flow-card { min-height: 400px; }
}

/* The banner's product key follows the supplied composition: slim colour
   rules, rather than symbols, make the four entries easy to scan. */

/* A restrained editorial treatment keeps the copy together over the banner's
   changing blue-and-gold wash without turning the left side into a card. */

/* Product preview artwork — lightweight interface illustrations modelled on
   the supplied cards, with enough detail to read at their compact size. */
.folio-preview,.stock-preview,.blueprint-preview,.monitor-preview {
  background: rgba(255,255,255,.94);
  border-color: rgba(51,94,174,.1);
  box-shadow: 0 10px 28px rgba(32,74,142,.09);
}
.folio-preview { background: transparent; border: 0; box-shadow: none; padding: 0; }
.preview-action {
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(67,108,181,.1);
  border-radius: 9px;
  box-shadow: 0 6px 16px rgba(42,75,134,.06);
  display: grid;
  grid-template-columns: 28px 1fr;
  margin-bottom: 5px;
  min-height: 44px;
  padding: 7px 9px;
  box-sizing: border-box;
}
.preview-action i { align-self: center; color: #377cf5; font-size: 18px; font-style: normal; grid-row: 1 / 3; }
.preview-action i svg { fill: none; height: 19px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 19px; }
.preview-action b { color: #102966; font-size: 9px; }
.preview-action small { color: #536b97; font-size: 7px; }
.allocation-preview { align-items: center; background: rgba(255,255,255,.95); border: 1px solid rgba(67,108,181,.1); border-radius: 9px; display: flex; min-height: 91px; padding: 7px 10px; }
.allocation-preview .donut { flex: 0 0 72px; height: 72px; margin: 0 10px 0 0; width: 72px; }
.allocation-preview .donut span { color: #17316e; font-size: 6px; }
.allocation-preview .donut b { color: #17316e; font-size: 6px; }
.allocation-preview ul { list-style: none; margin: 0; padding: 0; width: 100%; }
.allocation-preview li { color: #314d80; font-size: 6px; line-height: 1.7; padding-left: 8px; position: relative; }
.allocation-preview li::before { background: #3669ee; border-radius: 2px; content: ''; height: 4px; left: 0; position: absolute; top: 4px; width: 4px; }
.allocation-preview li:nth-child(2)::before { background:#29b878; }.allocation-preview li:nth-child(3)::before { background:#79a8ee; }.allocation-preview li:nth-child(4)::before { background:#f4a321; }.allocation-preview li:nth-child(5)::before { background:#bdb4ec; }
.allocation-preview li b { float: right; }
.stock-preview { min-height: 176px; padding: 8px 9px; }
.stock-search { border: 1px solid #e5eaf4; border-radius: 6px; color: #7790bc; font-size: 8px; padding: 6px; }
.stock-search span { margin-left: 5px; }
.stock-heading { align-items: flex-start; display: flex; justify-content: space-between; margin: 10px 1px 3px; }
.stock-heading > span,.stock-heading > strong { color: #17336f; display: flex; flex-direction: column; font-size: 9px; }
.stock-heading small { color: #60789e; font-size: 6px; font-weight: 400; margin-top: 2px; }
.stock-heading > strong { align-items: flex-end; font-size: 10px; }
.stock-heading > strong small { color: #35a96e; }
.stock-preview svg { display: block; height: 46px; overflow: visible; width: 100%; }
.stock-area { fill: url(#stock-fill); }.stock-line { fill: none; stroke: #41bc79; stroke-width: 1.5; }
.stock-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.stock-tags span { background: #f8faff; border: 1px solid #e5ebf7; border-radius: 99px; color: #425d8c; flex: 1 0 27%; font-size: 5.5px; padding: 4px 2px; text-align: center; }
.blueprint-wrap { align-self: start; min-height: 176px; position: relative; }
.blueprint-sheet { background: #edf6ff; border: 1px solid #d8e8fb; border-radius: 10px; height: 144px; left: 0; position: absolute; top: 18px; transform: rotate(-5deg); width: 88%; }
.blueprint-sheet.sheet-two { left: 7px; top: 12px; transform: rotate(-2deg); }
.blueprint-preview { box-sizing: border-box; left: 17px; min-height: 161px; padding: 16px 12px; position: absolute; top: 7px; width: calc(100% - 17px); }
.blueprint-preview > b { color: #112b68; display: block; font-size: 8px; margin-bottom: 13px; }
.blueprint-preview span { align-items: center; color: #36527f; display: flex; font-size: 7px; gap: 5px; margin-bottom: 9px; }
.blueprint-preview span i { align-items: center; background: #e9fbf5; border-radius: 50%; color: #25b67c; display: inline-flex; font-style: normal; height: 14px; justify-content: center; width: 14px; }
.blueprint-target { align-items: center; background: white; border-radius: 50%; box-shadow: 0 6px 15px rgba(54,82,144,.12); color: #6b43ed; display: flex; font-size: 23px; height: 42px; justify-content: center; position: absolute; right: -5px; top: -2px; width: 42px; }
.monitor-preview { background: transparent; border: 0; box-shadow: none; padding: 0; }
.monitor-preview > div { align-items: center; background: rgba(255,255,255,.96); border: 1px solid rgba(201,142,65,.11); border-radius: 10px; box-shadow: 0 7px 17px rgba(105,76,39,.05); display: grid; grid-template-columns: 37px 1fr; margin-bottom: 7px; min-height: 52px; padding: 7px 9px; box-sizing: border-box; }
.monitor-preview i { align-items: center; background: #fff8e9; border-radius: 50%; color: #ed8900; display: flex; font-size: 17px; font-style: normal; height: 30px; justify-content: center; width: 30px; }
.monitor-preview > div:nth-child(2) i { color: #6a40e8; }.monitor-preview > div:nth-child(3) i { color: #7750e9; }
.monitor-preview b,.monitor-preview small { display: block; }
.monitor-preview b { color: #132c67; font-size: 8px; margin-bottom: 2px; }
.monitor-preview small { color: #58709a; font-size: 6px; line-height: 1.3; }

/* Pull each descriptive preview closer to its supporting copy, as in the
   reference composition, while leaving the text column unchanged. */
.product-card-body > .folio-preview,
.product-card-body > .stock-preview,
.product-card-body > .blueprint-wrap,
.product-card-body > .monitor-preview {
  transform: translateX(-10px);
}
@media (max-width: 640px) {
  .product-card-body > .folio-preview,
  .product-card-body > .stock-preview,
  .product-card-body > .blueprint-wrap,
  .product-card-body > .monitor-preview { transform: none; }
}

/*
 * Signed-in hero rungs by viewport, kept apart from the rule above so the
 * properties that animate it state themselves once and only the source
 * changes here. The `background` shorthand is not repeated: re-stating it
 * would reset `center / cover` along with the image.
 */
@media (max-width: 760px) {
  .logged-hero::after {
    background-image: url('/images/generated/howItWorksBannerLight-768.webp');
    background-image: image-set(
      url('/images/generated/howItWorksBannerLight-768.avif') type('image/avif'),
      url('/images/generated/howItWorksBannerLight-768.webp') type('image/webp'));
  }
}

@media (min-width: 761px) and (max-width: 1280px) {
  .logged-hero::after {
    background-image: url('/images/generated/howItWorksBannerLight-1280.webp');
    background-image: image-set(
      url('/images/generated/howItWorksBannerLight-1280.avif') type('image/avif'),
      url('/images/generated/howItWorksBannerLight-1280.webp') type('image/webp'));
  }
}

@media (min-width: 1921px) {
  .logged-hero::after {
    background-image: url('/images/generated/howItWorksBannerLight-2560.webp');
    background-image: image-set(
      url('/images/generated/howItWorksBannerLight-2560.avif') type('image/avif'),
      url('/images/generated/howItWorksBannerLight-2560.webp') type('image/webp'));
  }
}

/*
 * Guest hero rungs above 1600 px, where the scaled artwork is painted wider
 * than the 1920 rung. Below that the base rule's ladder already fits.
 */

/* Keep the copy and product cards as accessible HTML over the supplied scene.
   Its phone is already part of the artwork, so the former CSS-built device is
   hidden rather than doubled over it. */

/* Final desktop calibration against the supplied 1672 × 942 reference. */

/* Faithful product marks and phone details from the supplied composition. */

/* Premium depth pass: polished device, dimensional badges and the exact
   two-tone product wordmarks from the approved hero comp. */

/* Right-hand badge dimensions are taken directly from the 1672px reference:
   330 × 110 cards, 72px dimensional marks and a measured 15px rhythm. */

/* Left-hand copy uses the homepage opening-banner type system and the measured
   spacing from the approved 1672px composition. */

/* Match the computed VestMind Core treatment of `.advance-flight-copy h2` on
   the homepage rather than restyling the How It Works headline independently. */

/* The homepage aliases come from tokens.css, which this standalone page does
   not load. Resolve them to VestMind Core directly so the shared display
   treatment cannot collapse to the browser's small default heading size. */

/* Keep every part of this standalone hero on VestMind Core's two-family type
   system. The page does not load tokens.css, so expose its aliases locally;
   body/UI copy uses Core's primary face and headings use its display face. */
.guest-how-it-works { --font-serif:var(--font-display); --font-sans:var(--font-body); }

/* The homepage `.ways .pill` treatment, reproduced here because landing.css is
   intentionally not loaded by this standalone route. */

/* Reserve clear air above the lower signoff on shorter laptop viewports. */

/* Scrolling product story
   One sticky screen per product: the heading, the product selector and the
   product's panel, over that product's protagonist photograph. The screen is
   laid out on the reference artboard (1672 x 941) and scaled by `--u` — one
   artboard pixel — which is whichever of the viewport's width and height is
   the tighter fit, so a laptop and a 4K desktop see the same composition.
   The floating menu covers the top 82 px of the window, so the screen sticks
   56 px down, under the menu's lower edge, and pads only the rest. That keeps
   the heading clear of the menu once stuck while leaving just that padding
   between the banner and the heading on the way in. */
.product-story {
  --u: clamp(.62px, min(calc(100vw / 1672), calc((100vh - 136px) / 880)), 1.32px);
  --story-ink: #080b1a;
  --story-muted: #344260;
  --story-amber: #e9a23b;
  --story-sky: #d3ecfb;
  --story-gold: #c58c35;
  --story-blue: #0758e8;
  background: #f7f9fc;
  color: var(--story-ink);
  margin: 0 -24px;
  overflow: clip;
}
.product-story-scroll { height: 408vh; position: relative; }
.product-story-sticky {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 56px);
  justify-content: flex-start;
  min-height: 544px;
  overflow: hidden;
  padding: 28px max(24px, calc(33 * var(--u))) calc(24 * var(--u));
  position: sticky;
  top: 56px;
}

/* Each product wears its strip's colour from the banner above — amber for
   Lens, VestFolio and VestMonitor, sky for VestCall, VestStudio and VestFire —
   on its selected tab and its icons. The emphasised half of its name takes
   the other colour where it sits on its own: white on amber, gold on sky. */
.story-tab,.story-panel { --accent: var(--story-amber); --accent-name: #fff; }
.story-tab-call,.story-call,
.story-tab-studio,.story-studio,
.story-tab-fire,.story-fire { --accent: var(--story-sky); --accent-name: var(--story-gold); }

/* Each product's photograph is a 16:9 "scene" box, and its cards sit in a
   second box with exactly the same geometry above the panel. Cards are placed
   in the scene's own percentages, so they stay pinned to the same spot beside
   each person's face at every viewport instead of drifting with the layout.

   The scene is as tall as the screen (cover), and is slid sideways so that
   the image's `--fx` line lands on the right edge of the panel's copy column
   — `--copy-end`, worked out from the same `--u` the stage is laid out with —
   or further right if that would leave the window's right edge uncovered.
   On a screen wider than the reference the photograph therefore still runs
   to the edge, and its cards only move further from the copy, never onto
   it. `--dy` lowers a scene whose subject sits high in the frame. */
.story-backdrops,.story-overlays { container-type: size; inset: 0; pointer-events: none; position: absolute; }
.story-overlays { z-index: 3; }
/* The scenes fade out under the heading, and into the ground along the foot,
   so the last one runs straight into the closing scene below with no seam. */
.story-backdrops::after { background: linear-gradient(180deg, rgba(247,249,252,.9) 0, rgba(247,249,252,.62) 18%, rgba(247,249,252,.18) 30%, rgba(247,249,252,0) 38%, rgba(247,249,252,0) 88%, #f7f9fc 100%); content: ''; inset: 0; position: absolute; transition: opacity .7s ease; }
.story-backdrop,.story-overlay { inset: 0; opacity: 0; position: absolute; transition: opacity .7s ease; }
.story-overlay { transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.story-backdrop.is-active,.story-overlay.is-active { opacity: 1; transform: none; }
.story-scene {
  --copy-end: calc(max(24px, 33 * var(--u)) + 495 * var(--u) + 489 * var(--u));
  --sw: calc(100cqh * 16 / 9);
  aspect-ratio: 16 / 9;
  font-size: calc(var(--sw) * .0074);
  left: max(var(--copy-end) - var(--fx) * var(--sw), 100cqw - var(--sw));
  position: absolute;
  top: calc(var(--dy) * 100cqh);
  width: var(--sw);
}
.story-scene picture,.story-scene img { display: block; height: 100%; width: 100%; }
/* The photographs set the scene and stay behind it: faded and a little
   desaturated, so the selector, the panel's copy and the cards stay what the
   eye goes to first. */
.story-backdrop .story-scene img { filter: saturate(.75); opacity: .5; }
/* The scene fades in from behind the copy column, and in from its own top
   edge for the ones lowered below the heading. */
.story-scene img { -webkit-mask-image: linear-gradient(90deg, transparent calc((var(--fx) - .36) * 100%), rgba(0,0,0,.3) calc((var(--fx) - .18) * 100%), rgba(0,0,0,.88) calc(var(--fx) * 100%), #000 calc((var(--fx) + .07) * 100%)), linear-gradient(180deg, transparent 0, #000 14%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent calc((var(--fx) - .36) * 100%), rgba(0,0,0,.3) calc((var(--fx) - .18) * 100%), rgba(0,0,0,.88) calc(var(--fx) * 100%), #000 calc((var(--fx) + .07) * 100%)), linear-gradient(180deg, transparent 0, #000 14%); mask-composite: intersect; }

/* Per-scene anchors and card positions, set on the reference artboard so
   every card sits clear of the face it accompanies. */
.scene-studio { --fx: .5242; --dy: .2997; }
.scene-studio .goals-card { left: 72.68%; top: -2.13%; width: 13.45%; }
.scene-studio .blueprint-card { left: 52.78%; top: 14.66%; width: 15.66%; }
.scene-studio .steps-card { left: 54.15%; top: 49.2%; width: 13.75%; }
.scene-monitor { --fx: .5595; --dy: .0776; }
.scene-monitor .health-card { left: 70.83%; top: 18.81%; width: 19.73%; }
.scene-monitor .progress-card { left: 73.52%; top: 38.79%; width: 16.86%; }
.scene-monitor .alerts-card { left: 74.24%; top: 58.13%; width: 16.26%; }
.scene-folio { --fx: .6455; --dy: .1243; }
.scene-folio .overview-card { left: 80.22%; top: 14.66%; width: 18.41%; }
.scene-call { --fx: .4901; --dy: .0574; }
.scene-call .question-card { left: 63.72%; top: 20.83%; width: 19.31%; }
.scene-call .quote-card { left: 49.37%; top: 28.05%; width: 17.45%; }
.scene-call .why-card { left: 49.37%; top: 47.39%; width: 14.11%; }
.scene-fire { --fx: .4943; --dy: .0595; }
/* Lens's scene is its cover. Its cards sit above and below the magnifying
   glass, so the eye behind it stays clear. */
.scene-lens { --fx: .54; --dy: .17; }
.scene-lens .article-card { left: 55%; top: 9%; width: 27%; }
.scene-lens .lens-card { left: 54.5%; top: 58%; width: 20%; }

.product-story-intro { flex: none; margin: 0 0 calc(40 * var(--u)); position: relative; text-align: center; z-index: 2; }
/* The banner's pill (styles/product-banner.css), centred over the heading. */
.product-story-intro .product-story-kicker { margin: 0; }
.product-story-intro h2 { color: var(--story-ink); font: 600 max(28px, calc(52 * var(--u)))/1.1 var(--font-display); letter-spacing: -.045em; margin: calc(26 * var(--u)) 0 calc(14 * var(--u)); }
.product-story-intro h2 em { color: var(--pb-amber-text, #e0a13a); font-style: normal; }
.product-story-intro p { color: var(--story-muted); font-size: max(14px, calc(23 * var(--u))); line-height: 1.3; margin: 0; }

/* The stage spans the screen, as in the reference: the selector sits at the
   left margin and the panel runs on to the right one. */
.product-story-stage { display: grid; flex: none; gap: calc(18 * var(--u)); grid-template-columns: calc(477 * var(--u)) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: calc(672 * var(--u)); position: relative; width: 100%; z-index: 2; }

/* Selector */
.product-story-nav { background: #fff; border: 1px solid #e3e8ee; border-radius: calc(12 * var(--u)); box-shadow: 0 calc(10 * var(--u)) calc(34 * var(--u)) rgba(23,38,66,.06); display: flex; flex-direction: column; overflow: hidden; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.story-tab { align-items: center; background: transparent; border: 0; color: var(--story-ink); cursor: pointer; display: grid; flex: 1; font: inherit; gap: calc(20 * var(--u)); grid-template-columns: calc(30 * var(--u)) calc(66 * var(--u)) minmax(0, 1fr) calc(22 * var(--u)); min-height: 0; padding: 0 calc(26 * var(--u)) 0 calc(22 * var(--u)); position: relative; text-align: left; transition: background-color .35s ease; }
.story-tab + .story-tab::before { background: #e6eaef; content: ''; height: 1px; left: calc(22 * var(--u)); position: absolute; right: calc(22 * var(--u)); top: 0; }
/* The selected tab is filled with its strip's colour, like the strip itself. */
.story-tab.is-active { background: var(--accent); }
.story-tab.is-active::before,.story-tab.is-active + .story-tab::before { opacity: 0; }
.story-tab:hover:not(.is-active) { background: #f4f8fc; }
.story-tab:focus-visible { outline: 2px solid var(--story-ink); outline-offset: -4px; }
.story-number { color: var(--story-ink); font-size: max(12px, calc(17 * var(--u))); font-weight: 600; }
.story-icon { align-items: center; background: var(--accent); border-radius: 50%; color: var(--story-ink); display: flex; height: calc(60 * var(--u)); justify-content: center; width: calc(60 * var(--u)); }
.story-tab.is-active .story-icon { background: #fff; }
.story-icon svg { fill: none; height: 46%; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 46%; }
.story-name { min-width: 0; }
.story-name strong { display: block; font: 600 max(18px, calc(29 * var(--u)))/1.1 var(--font-display); letter-spacing: -.045em; white-space: nowrap; }
.story-name strong em { color: var(--story-gold); font-style: normal; }
.story-tab.is-active .story-name strong em { color: var(--accent-name); }
.story-name small { color: var(--story-muted); display: block; font-size: max(11px, calc(17 * var(--u))); line-height: 1.38; margin-top: calc(6 * var(--u)); }
.story-tab > b { color: var(--story-ink); display: flex; }
.story-tab > b svg { fill: none; height: calc(24 * var(--u)); stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: calc(24 * var(--u)); }

/* Panels */
.product-story-panels { display: grid; min-width: 0; position: relative; }
.story-panel { border-radius: calc(14 * var(--u)); display: grid; grid-area: 1 / 1; grid-template-columns: calc(489 * var(--u)) minmax(0, 1fr); min-height: 0; opacity: 0; pointer-events: none; position: relative; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease, visibility 0s .5s; visibility: hidden; }
.story-panel.is-active { opacity: 1; pointer-events: auto; transform: none; transition: opacity .5s ease, transform .5s ease; visibility: visible; z-index: 2; }
/* The copy stands on a flat white card the width of its column; the
   photograph runs on from the card's edge. */
.story-panel::before { background: #fff; border: 1px solid #e3e8ee; border-radius: inherit; bottom: 0; content: ''; left: 0; pointer-events: none; position: absolute; top: 0; width: calc(489 * var(--u)); }
.story-copy { align-self: center; padding: 0 0 0 calc(34 * var(--u)); position: relative; z-index: 2; }
/* The product's name, written as the selector writes it: Vest in ink, the
   product's own half in amber. */
.story-label { color: var(--story-ink); display: block; font: 600 max(18px, calc(26 * var(--u)))/1 var(--font-display); letter-spacing: -.035em; }
.story-label em { color: var(--story-gold); font-style: normal; }
.story-copy h3 { color: var(--story-ink); font: 600 max(28px, calc(47 * var(--u)))/1 var(--font-display); letter-spacing: -.035em; margin: calc(16 * var(--u)) 0 calc(20 * var(--u)); }
.story-copy > p { color: var(--story-muted); font-size: max(13px, calc(17 * var(--u))); line-height: 1.46; margin: 0 0 calc(12 * var(--u)); max-width: calc(420 * var(--u)); }
.story-copy ul { list-style: none; margin: 0 0 calc(20 * var(--u)); padding: 0; }
.story-copy li { align-items: center; display: flex; gap: calc(22 * var(--u)); margin: calc(5 * var(--u)) 0; }
.story-copy li > .benefit-icon { align-items: center; background: var(--accent); border-radius: 50%; color: var(--story-ink); display: flex; flex: 0 0 calc(54 * var(--u)); height: calc(54 * var(--u)); justify-content: center; }
.story-copy li > .benefit-icon svg { fill: none; height: 48%; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; width: 48%; }
.story-copy li strong,.story-copy li small { display: block; }
.story-copy li strong { color: var(--story-ink); font-size: max(12px, calc(17 * var(--u))); font-weight: 500; line-height: 1.3; }
.story-copy li small { color: var(--story-muted); font-size: max(11px, calc(14.5 * var(--u))); line-height: 1.35; margin-top: calc(3 * var(--u)); }
/* Every product's way in is the page's one blue button. */
.story-cta { align-items: center; background: var(--story-blue); border-radius: calc(14 * var(--u)); box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(7, 88, 238, .28); color: #fff; display: inline-flex; font-size: max(13px, calc(19 * var(--u))); font-weight: 500; gap: calc(12 * var(--u)); height: calc(56 * var(--u)); min-height: 40px; padding: 0 calc(46 * var(--u)); text-decoration: none; transition: filter .2s ease, transform .2s ease; }
.story-cta:hover,.story-cta:focus-visible { background: #0547c2; transform: translateY(-1px); }
.story-cta svg { fill: none; height: 1.05em; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 1.05em; }

/* Product cards floating over the photograph. Everything inside them is in
   `em` of the scene's font size, which follows the scene's width, so they
   keep their proportions against the photograph at every viewport. */
.visual-card { background: rgba(255,255,255,.96); border: 1px solid rgba(226,231,238,.9); border-radius: .95em; box-shadow: 0 .9em 2.6em rgba(22,34,58,.13); box-sizing: border-box; color: #16223d; font-size: max(9px, 1em); line-height: 1.3; padding: 1.25em 1.35em; position: absolute; }
.visual-card b { color: #0f1b36; display: block; font-size: 1.06em; font-weight: 600; }
.visual-card header { align-items: center; display: flex; justify-content: space-between; }
.visual-card ul { list-style: none; margin: 0; padding: 0; }
.visual-card li strong { color: #16223d; display: block; font-size: .9em; font-weight: 500; }
.visual-card li small { color: #7a879b; display: block; font-size: .76em; margin-top: .15em; }
.visual-card i { align-items: center; border-radius: 50%; color: var(--story-gold); display: inline-flex; flex: none; font-style: normal; justify-content: center; }
.visual-card i svg { fill: none; height: 100%; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; width: 100%; }
.visual-card .card-link { color: var(--story-blue); font-size: .82em; }
.visual-card .tone-violet { color: var(--story-blue); }
.visual-card .tone-teal { color: var(--story-blue); }
.visual-card .tone-amber { color: var(--story-gold); }
.visual-card .tone-blue { color: var(--story-blue); }
.visual-card .tone-red { color: #e2453c; }
.visual-card .tone-green { color: #19a46b; }
.check-list li { align-items: center; display: flex; font-size: .9em; gap: .75em; }
.check-list li::before { border: solid #18a36f; border-width: 0 .16em .16em 0; content: ''; flex: none; height: .62em; margin: 0 .2em 0 .25em; transform: translateY(-.15em) rotate(45deg); width: .32em; }
.legend-list li,.overview-legend li { align-items: center; display: flex; }
.legend-list li::before,.overview-legend li::before { background: var(--dot); border-radius: 50%; content: ''; flex: none; height: .62em; width: .62em; }

/* VestStudio */
.goals-card ul { margin-top: .5em; }
.goals-card li { align-items: center; border-top: 1px solid #edf0f4; display: flex; gap: 1em; padding: .8em 0; }
.goals-card li:first-child { border-top: 0; }
.goals-card li:last-child { padding-bottom: 0; }
.goals-card li i { height: 1.7em; width: 1.7em; }
.blueprint-body { align-items: center; display: flex; gap: 1.1em; margin-top: 1em; }
.blueprint-donut { background: conic-gradient(#1572e8 0 52%, #4aa3f0 52% 74%, #f5b525 74% 82%, #e9a23b 82% 94%, #14968a 94%); border-radius: 50%; display: grid; flex: none; height: 8em; place-items: center; width: 8em; }
.blueprint-donut span { align-items: center; background: #fff; border-radius: 50%; display: flex; flex-direction: column; height: 72%; justify-content: center; width: 72%; }
.blueprint-donut strong { font-size: 1.3em; font-weight: 600; letter-spacing: -.02em; }
.blueprint-donut small { color: #7a879b; font-size: .66em; }
.legend-list { flex: 1; }
.legend-list li { font-size: .84em; gap: .6em; padding: .42em 0; }
.legend-list em { color: #16223d; font-style: normal; margin-left: auto; padding-left: .6em; }
.steps-card .check-list { margin-top: .8em; }
.steps-card .check-list li { padding: .45em 0; }

/* VestMonitor */
.health-card { display: grid; gap: 1.1em; grid-template-columns: 34% 1fr; }
.health-gauge { margin-top: 1em; position: relative; text-align: center; }
.health-gauge svg { display: block; fill: none; stroke-linecap: round; stroke-width: 10; width: 100%; }
.health-gauge .gauge-track { stroke: #e7ecf0; }
.health-gauge .gauge-value { stroke: var(--story-blue); stroke-dasharray: 78 100; }
.health-gauge strong { bottom: .75em; font-size: 2.1em; font-weight: 600; left: 0; letter-spacing: -.03em; line-height: 1; position: absolute; right: 0; }
.health-gauge small { color: #4a586e; display: block; font-size: .82em; margin-top: -.2em; }
.health-card ul { align-self: center; }
.health-card li { align-items: center; display: flex; font-size: .78em; gap: .7em; padding: .42em 0; white-space: nowrap; }
.health-card li i { background: #f2f6f9; height: 2em; padding: .42em; width: 2em; }
.health-card li em { color: #3b4960; font-style: normal; margin-left: auto; padding-left: 1em; }
.progress-card ul { margin-top: .7em; }
.progress-card li { align-items: center; display: grid; gap: .8em; grid-template-columns: 2em minmax(0, 1fr) 21% 2.3em; padding: .55em 0; }
.progress-card li strong { font-size: .86em; white-space: nowrap; }
.progress-card li i { background: var(--story-sky); color: var(--story-ink); height: 2em; padding: .4em; width: 2em; }
.progress-card li em { font-size: .82em; font-style: normal; font-weight: 600; text-align: right; }
.progress-bar { background: #e8edf1; border-radius: 99px; height: .42em; overflow: hidden; }
.progress-bar::before { background: var(--story-blue); border-radius: inherit; content: ''; display: block; height: 100%; width: var(--progress); }
.alerts-card ul { margin-top: .7em; }
.alerts-card li { align-items: center; display: flex; gap: .9em; padding: .55em 0; }
.alerts-card li i { background: #f6f7f9; height: 2.1em; padding: .45em; width: 2.1em; }
.alerts-card li .tone-red { background: #fdeeee; }
.alerts-card li .tone-green { background: #e9f8f1; }
.alerts-card li .tone-amber { background: #fdf1da; }

/* VestFolio */
.card-pill { align-items: center; background: #f1f4f8; border-radius: 99px; display: inline-flex; font-size: .78em; gap: .2em; padding: .35em .8em; }
.card-pill svg { fill: none; height: 1em; stroke: currentColor; stroke-width: 2; width: 1em; }
.overview-figures { align-items: flex-end; display: flex; gap: 1em; margin-top: 1em; }
.overview-figures > span { flex: none; }
.overview-figures strong,.quote-figures strong { display: block; font-size: 1.75em; font-weight: 600; letter-spacing: -.02em; }
.overview-figures small,.quote-figures small { color: #12a067; display: block; font-size: .9em; margin-top: .45em; }
.sparkline { flex: 1; height: 3.6em; min-width: 0; overflow: visible; }
.spark-line { fill: none; stroke: var(--story-blue); stroke-linecap: round; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.overview-legend { display: grid; gap: .5em; grid-template-columns: repeat(4, auto); justify-content: space-between; margin-top: 1.6em; }
.overview-legend li { color: #5b6880; display: grid; font-size: .72em; white-space: nowrap; gap: .1em .55em; grid-template-columns: .62em 1fr; }
.overview-legend li::before { grid-row: span 2; margin-top: .2em; }
.overview-legend em { color: #16223d; font-size: 1.3em; font-style: normal; font-weight: 600; grid-column: 2; }

/* VestCall */
.question-card { align-items: center; border-radius: 1.1em; display: flex; gap: 1em; padding: 1.2em 1.4em; }
.question-card::after { background: inherit; border: inherit; border-width: 0 1px 1px 0; bottom: -.5em; content: ''; height: 1em; position: absolute; right: 34%; transform: rotate(45deg); width: 1em; }
.question-card > i { background: var(--story-sky); color: var(--story-ink); height: 3.1em; padding: .8em; width: 3.1em; }
.question-card b { font-size: 1.15em; font-weight: 500; line-height: 1.35; }
.quote-card header b { font-size: 1em; font-weight: 600; letter-spacing: .1em; }
.quote-badge { background: #e3f7ec; border-radius: .4em; color: #12a067; font-size: .72em; font-weight: 700; letter-spacing: .06em; padding: .3em .7em; }
.quote-figures { align-items: flex-end; display: flex; gap: .8em; margin-top: .4em; }
.quote-figures > span { flex: none; }
.quote-card dl { border-top: 1px solid #edf0f4; display: grid; grid-template-columns: repeat(3, 1fr); margin: 1em 0 0; padding-top: .9em; text-align: center; }
.quote-card dt { color: #7a879b; font-size: .76em; }
.quote-card dd { font-size: .92em; font-weight: 600; margin: .3em 0 0; }
.quote-card dd.is-up { color: #12a067; }
.why-card > b { align-items: center; display: flex; gap: .6em; }
.why-card > b i { color: var(--story-amber); height: 1.4em; width: 1.4em; }
.why-card > b i svg { fill: currentColor; stroke: none; }
.why-card .check-list { margin-top: .8em; }
.why-card .check-list li { color: #3b4960; padding: .38em 0; }

/* Vestmind Lens */
.article-card small { color: #5c6e88; display: block; font-size: .7em; letter-spacing: .14em; }
.article-card > b { font-size: 1.35em; letter-spacing: -.01em; line-height: 1.25; margin: .5em 0 .6em; }
.lens-circled { border: .14em solid var(--story-amber); border-radius: 999px; padding: 0 .3em; }
.article-card p { color: #344260; font-size: .9em; line-height: 1.6; margin: 0; }
.article-card mark { background: #fde3b5; color: inherit; }
.lens-card header b { font-size: 1em; }
.lens-card-title { font-size: 1.05em; font-weight: 600; margin: .6em 0 .7em; }
.lens-flow { align-items: center; display: flex; flex-wrap: wrap; gap: .4em; }
.lens-flow span { background: var(--story-sky); border-radius: .5em; font-size: .82em; font-weight: 600; padding: .3em .6em; }
.lens-flow i { color: var(--story-amber); font-weight: 700; }
.lens-math { border: 1px dashed #ebd3a6; border-radius: .7em; display: grid; font-size: .85em; gap: .2em; margin-top: .8em; padding: .6em .8em; }
.lens-math span { color: #5c6e88; }
.lens-math em { color: #b42318; font-style: normal; margin-left: .3em; }

.story-scroll-steps { inset: 0; pointer-events: none; position: absolute; }
.story-scroll-steps span { display: block; height: 68vh; }

/* Short, wide screens: the composition is height-bound, so let the panel's
   copy breathe a little less rather than clip its CTA. */
@media (min-width: 901px) and (max-height: 760px) {
  .story-copy > p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
}

/* Below 900 px the story stops being a scroll-driven screen. The selector
   becomes a row of numbered chips, the photograph a banner above the copy,
   and the floating cards — which need the scene to sit on — step aside. */
@media (max-width: 900px) {
  .product-story { --u: 1px; margin: 0 -24px; padding: 40px 16px 32px; }
  .product-story-scroll { height: auto; }
  .product-story-sticky { display: flex; height: auto; min-height: 0; overflow: visible; padding: 0; position: relative; }
  .product-story-intro { margin-bottom: 24px; order: 0; }
  .product-story-intro h2 { font-size: clamp(30px, 7vw, 44px); margin: 16px 0 10px; }
  .product-story-intro h2 em { display: block; }
  .product-story-intro p { font-size: 15px; }
  .product-story-stage { display: contents; }
  .product-story-nav { display: grid; grid-template-columns: repeat(6, 1fr); margin-bottom: 14px; order: 1; width: 100%; }
  .story-tab { display: flex; flex-direction: column; gap: 6px; justify-content: center; padding: 10px 4px; }
  .story-tab + .story-tab::before { bottom: 12px; height: auto; left: 0; right: auto; top: 12px; width: 1px; }
  .story-icon { height: 40px; width: 40px; }
  .story-tab > b { display: none; }
  /* Visually hidden, not removed: the name is the chip's accessible label. */
  .story-name { clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
  .story-number { font-size: 12px; }
  .story-backdrops { border-radius: 14px; height: clamp(220px, 52vw, 340px); inset: auto; margin-bottom: -40px; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent); mask-image: linear-gradient(180deg, #000 62%, transparent); order: 2; overflow: hidden; position: relative; width: 100%; }
  .story-backdrops::after { content: none; }
  .story-overlays { display: none; }
  .story-backdrops { container-type: normal; }
  .story-scene { aspect-ratio: auto; height: 100%; inset: 0; width: 100%; }
  .story-scene img { -webkit-mask-image: none; mask-image: none; object-fit: cover; object-position: 74% 30%; }
  .product-story-panels { order: 3; width: 100%; z-index: 2; }
  .story-panel { background: rgba(255,255,255,.95); border: 1px solid #e3e8ee; border-radius: 14px; box-shadow: 0 10px 30px rgba(23,38,66,.06); display: block; transform: translateY(12px); }
  .story-panel::before { display: none; }
  .story-copy { padding: 26px 22px 28px; }
  .story-copy h3 { font-size: clamp(28px, 6.4vw, 38px); }
  .story-copy > p { max-width: 640px; }
  .story-copy li { gap: 14px; margin: 12px 0; }
  .story-copy li > .benefit-icon { flex-basis: 44px; height: 44px; }
  .story-cta { height: 50px; padding: 0 26px; }
  .story-scroll-steps { display: none; }
}
@media (max-width: 640px) {
  .product-story { margin: 0 -12px; padding: 32px 12px 24px; }
  .story-copy { padding: 22px 18px 24px; }
}

/* Isolate the replacement story from the former explainer layout rules. */
.guest-explainer:has(> .product-story) { display:block; margin:0; max-width:none; padding:0; width:auto; }
.guest-explainer:has(> .product-story)::before { display:none; }

/* The closing decision panel and shared footer intentionally remain in the
   normal document flow immediately after the scroll story. */
html:not([data-audience="investor"]) body > site-footer { display: block; }