/* Maxwell & Partners launch page: the conversation, scroll-driven. The dot is the page's one material.
   Default styles are the complete static page (no JS, reduced motion, light-variant scenes).
   html.anim-sN classes switch on scene N's animated states. */
:root {
  --gutter: clamp(20px, 5vw, 72px);
  --on-ink: #c9d0de;
  --ink-2: #1e2940;
  --dot-ink: radial-gradient(circle, var(--ink) 0.95px, transparent 1.15px);
  --dot-white: radial-gradient(circle, #fff 0.95px, transparent 1.15px);
  --pitch: 3px;
  --bar-h: 76px;
  scroll-padding-top: var(--bar-h);
  scrollbar-color: #8a93a6 var(--paper);
}
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: #8a93a6; border-radius: 10px; border: 2px solid var(--paper); }

.notice { margin: 0; padding: 10px var(--gutter); background: var(--paper); color: var(--ink); font-size: 0.875rem; text-align: center; border-bottom: 1px solid var(--line); }
.notice strong { font-weight: 600; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; font: 600 1rem/1 var(--font); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), border-color 160ms var(--ease-out); }
.btn svg { transition: transform 200ms var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }
.btn-blue { background: var(--blue); color: var(--white); }
.btn-blue:hover { background: #2453e6; }
.btn-light { background: var(--white); color: var(--ink); }
.btn-light:hover { background: #e9eefc; }
.btn-ghost { color: var(--white); border-color: rgba(255,255,255,0.45); }
.btn-ghost:hover { border-color: var(--white); background: rgba(255,255,255,0.06); }
.masthead :focus-visible, .areas :focus-visible, .joins :focus-visible, .side-firm :focus-visible, .firm :focus-visible, .form-firm :focus-visible, .foot :focus-visible { outline-color: var(--white); }

/* The menu bar stays at the top of every page. Pinned scenes keep their content clear of it. */
.site-top { position: sticky; top: 0; z-index: 60; }
.anim-s3 .areas-pin, .anim-s6 .side-pin, .anim-s8 .split-pin { padding-top: var(--bar-h); }

/* Back to the choice that led here. */
.back-bar { background: var(--ink); padding: 0 var(--gutter) 18px; }
.back-link { display: inline-flex; align-items: center; gap: 8px; color: var(--on-ink); font-size: 0.9375rem; text-decoration: none; }
.back-link:hover { color: var(--white); }
.back-link svg { transition: transform 200ms var(--ease-out); }
.back-link:hover svg { transform: translateX(-3px); }
.back-bar :focus-visible { outline-color: var(--white); }

/* Masthead (kept from v1) */
.masthead { background: var(--ink); color: var(--white); }
.bar { display: flex; align-items: center; gap: 32px; padding: 18px var(--gutter); }
.bar > ul { display: flex; align-items: center; gap: 28px; margin: 0 0 0 auto; padding: 0; list-style: none; font-size: 0.9375rem; }
.bar ul a { color: var(--on-ink); text-decoration: none; }
.bar ul a:hover { color: var(--white); }
/* Products: a disclosure menu. Without JavaScript the two links show in place. */
.has-sub { position: relative; }
.sub-btn { display: none; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--on-ink); font: inherit; cursor: pointer; }
.sub-btn:hover, .sub-btn[aria-expanded="true"] { color: var(--white); }
.sub-btn svg { transition: transform 200ms var(--ease-out); }
.sub-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.sub { display: flex; gap: 28px; margin: 0; padding: 0; list-style: none; }
.has-subs .sub-btn { display: inline-flex; }
.has-subs .sub { display: none; position: absolute; top: calc(100% + 14px); left: -14px; z-index: 70; flex-direction: column; gap: 2px; min-width: 300px; padding: 8px; background: var(--ink); border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; box-shadow: 0 24px 40px -20px rgba(0,0,0,0.5); }
.has-subs .sub.is-open { display: flex; }
.has-subs .sub a { display: block; padding: 10px 12px; border-radius: 8px; white-space: nowrap; }
.has-subs .sub a:hover { background: rgba(255,255,255,0.06); }
.bar .btn { min-height: 40px; padding: 0 18px; font-size: 0.9375rem; }
/* Mobile menu: nav.js adds .has-menu; without JavaScript the links show as a wrapped row. */
.bar { position: relative; z-index: 60; }
.menu-btn { display: none; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.45); background: transparent; color: var(--white); font: 600 0.9375rem/1 var(--font); cursor: pointer; }
.menu-btn:hover { border-color: var(--white); background: rgba(255,255,255,0.06); }
.mast { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; gap: 24px clamp(32px, 6vw, 96px); padding: clamp(40px, 8vh, 96px) var(--gutter) 40px; min-height: calc(100svh - 120px); }
.hero { position: relative; }
.mast-mark { margin: 0; align-self: center; }
.mast-dots { width: 100%; aspect-ratio: 575 / 239; --dot: #ffffff; }
.mast-fallback { width: 100%; height: auto; }
.js-ready .mast-fallback { display: none; }
html:not(.js-ready) .mast-dots { display: none; }
.mast-copy { padding-bottom: 8px; }
.mast-line { margin: 0 0 20px; font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1.1; font-weight: 600; letter-spacing: -0.025em; }
.mast-lede { margin: 0 0 32px; max-width: 44ch; color: var(--on-ink); font-size: 1.125rem; }
.mast-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.mast-cue { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 10px; justify-self: start; margin-top: 24px; color: var(--on-ink); text-decoration: none; font-size: 0.9375rem; }
.mast-cue:hover { color: var(--white); }

/* Home: the wordmark alone, centred, with a quiet cue below. */
.mast-centre { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; justify-items: center; align-items: center; }
.mast-centre .mast-mark { width: min(100%, 900px); }
.mast-centre .mast-cue { justify-self: center; justify-content: center; width: 48px; height: 48px; margin-top: 16px; border: 1px solid rgba(255,255,255,0.3); border-radius: 50%; }
.mast-centre .mast-cue:hover { border-color: var(--white); }
.talk.talk-centre { display: block; text-align: center; }
.talk-centre .q { max-width: 15ch; margin: 0 auto; }

/* Scene 1 overlay: the masthead's dots streaming down into the first question. */
.stream { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; display: none; --dot: var(--ink); }

/* The conversation: big questions, offset answers. No speaker labels: type does the talking. */
.talk { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding: clamp(96px, 14vw, 200px) var(--gutter) 0; max-width: 1440px; margin: 0 auto; }
.talk-open { padding-top: clamp(120px, 16vw, 220px); }
.q { grid-column: 1 / span 10; margin: 0; font-size: clamp(2.6rem, 7.4vw, 6rem); line-height: 0.98; font-weight: 600; letter-spacing: -0.04em; text-wrap: balance; }
.q-small { grid-column: 1 / span 9; margin-top: clamp(56px, 7vw, 96px); font-size: clamp(1.9rem, 4.2vw, 3.5rem); line-height: 1.04; letter-spacing: -0.035em; }
.a { grid-column: 6 / span 6; margin: clamp(32px, 4vw, 56px) 0 0; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.45; letter-spacing: -0.01em; max-width: 40ch; color: #2b3650; }
.a-said { font-size: clamp(1.3rem, 2.2vw, 1.875rem); line-height: 1.3; letter-spacing: -0.02em; color: var(--ink); font-weight: 500; }
.talk-turn { padding-bottom: clamp(96px, 12vw, 160px); }

/* Fog: words drawn in dots, sharpening as they arrive (anim-s2). */
.anim-s2 .fog .w { color: rgb(23 32 51 / var(--solid, 0)); background-image: var(--dot-ink); background-size: var(--pitch) var(--pitch); -webkit-background-clip: text; background-clip: text; filter: blur(calc((1 - var(--solid, 0)) * 1.4px)); }
.anim-s2 .fog-light .w, .anim-s2 .fog-head.on-dark .w { color: rgb(255 255 255 / var(--solid, 0)); background-image: var(--dot-white); }
.anim-s2 .a.fog .w { color: rgb(43 54 80 / var(--solid, 0)); }

/* Scene 3: four areas. Static: an editorial two-column list. */
.areas { background: var(--ink); color: var(--white); margin-top: clamp(96px, 12vw, 180px); }
.areas-track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(48px, 6vw, 96px) clamp(32px, 5vw, 80px); padding: clamp(80px, 10vw, 140px) var(--gutter); max-width: 1440px; margin: 0 auto; }
.areas-head { grid-column: 1 / -1; }
.areas-head h1, .areas-head h2 { margin: 0; max-width: 14ch; font-size: clamp(2.4rem, 5.6vw, 5rem); line-height: 1; letter-spacing: -0.04em; font-weight: 600; text-wrap: balance; }
.area { position: relative; }
.area-art { width: 100%; aspect-ratio: 13 / 8; --dot: #fff; margin-bottom: 28px; }
.area h3 { margin: 0 0 10px; font-size: clamp(1.6rem, 2.6vw, 2.25rem); letter-spacing: -0.03em; line-height: 1.05; display: flex; align-items: center; gap: 14px; }
.area h3::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); flex: none; }
.area-line { margin: 0 0 8px; font-size: 1.15rem; font-weight: 500; color: var(--white); }
.area p { margin: 0 0 8px; color: var(--on-ink); max-width: 46ch; }
.area .fine, .fine { font-size: 0.8125rem; color: #9aa3b5; max-width: 52ch; }
.anim-s3 .area-art { visibility: hidden; }
.anim-s3 .area-art.lit { visibility: visible; }

/* Scene 3 animated, desktop: a short horizontal run while the section is pinned. */
@media (min-width: 900px) {
  .anim-s3 .areas-pin { height: 100vh; overflow: hidden; display: flex; align-items: center; }
  .anim-s3 .areas-track { display: flex; flex-wrap: nowrap; align-items: center; gap: clamp(48px, 5vw, 96px); padding: 0 var(--gutter); max-width: none; margin: 0; will-change: transform; }
  .anim-s3 .areas-head { flex: 0 0 min(34vw, 460px); }
  .anim-s3 .area { flex: 0 0 min(46vw, 640px); }
  .anim-s3 .area-art { aspect-ratio: 13 / 7.4; }
}

/* Scene 4: one picture adds up. */
.sum { padding: clamp(56px, 7vw, 96px) var(--gutter) 0; }
.sum-pin { max-width: 1296px; margin: 0 auto; }
.sum-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px clamp(40px, 6vw, 112px); align-items: end; }
.sum-accounts { margin: 0; padding: 0; border: 0; display: grid; gap: 0; }
.acct { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 4px 18px; padding: 22px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.acct:first-of-type { border-top: 1px solid var(--line); }
.acct input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.track { position: relative; width: 44px; height: 26px; border-radius: 13px; background: #c5ccda; transition: background-color 200ms var(--ease-out); }
.track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 2px rgba(23,32,51,0.25); transition: transform 220ms var(--ease-out); }
.acct input:checked + .track { background: var(--blue); }
.acct input:checked + .track::after { transform: translateX(18px); }
.acct input:focus-visible + .track { outline: 2px solid var(--blue); outline-offset: 3px; }
.acct-name { font-weight: 600; font-size: 1.125rem; letter-spacing: -0.01em; display: flex; flex-direction: column; }
.acct-name small { font-weight: 400; font-size: 0.875rem; color: var(--muted); }
.acct-val { font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 600; letter-spacing: -0.02em; transition: color 200ms var(--ease-out); }
.acct input:not(:checked) ~ .acct-val, .acct input:not(:checked) ~ .acct-name { color: var(--muted); }
.acct-line { position: absolute; left: 62px; right: 0; bottom: -1px; height: 3px; background-image: radial-gradient(circle, var(--accent) 1.2px, transparent 1.4px); background-size: 6px 3px; transform-origin: left; transform: scaleX(0); transition: transform 600ms var(--ease-out); }
.acct input:checked ~ .acct-line { transform: scaleX(1); }
.sum-total { padding-bottom: 6px; }
.sum-label { margin: 0 0 6px; color: var(--muted); font-weight: 500; }
.sum-figure { margin: 0 0 14px; font-size: clamp(3.4rem, 9.5vw, 6rem); line-height: 0.95; font-weight: 600; letter-spacing: -0.04em; }
.anim-s4 .sum { min-height: 0; }

/* Pots in dots */
.pots { grid-column: 6 / span 7; margin-top: clamp(40px, 5vw, 64px); }
.pots-total { margin: 0 0 18px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; font-weight: 600; font-size: 1.125rem; }
.pots-total .num { font-size: 1.5rem; letter-spacing: -0.02em; }
.tag { font-size: 0.8125rem; font-weight: 500; color: var(--muted); }
.tag-dark { color: #aab3c5; }
.pots ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pots li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.pot-name { font-weight: 500; }
.pot-val { font-weight: 600; }
.pot-bar { grid-column: 1 / -1; height: 9px; background-image: radial-gradient(circle, #d3d9e5 1.6px, transparent 1.9px); background-size: 7px 9px; position: relative; }
.pot-bar::after { content: ""; position: absolute; inset: 0; width: calc(var(--p) * 100%); background-image: radial-gradient(circle, var(--green) 1.6px, transparent 1.9px); background-size: 7px 9px; }
.pot-note { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 500; color: #0b7a55; }
.pots + .a-said { grid-column: 6 / span 6; }

/* Scene 5: the adviser joins. */
.joins { background: var(--blue); color: var(--white); padding: clamp(96px, 12vw, 180px) var(--gutter); }
.anim-s5 .joins { background: var(--ink); }
.joins-inner { max-width: 1296px; margin: 0 auto; }
.joins-thread { position: relative; margin-bottom: clamp(48px, 6vw, 88px); }
.joins-thread svg { width: 100%; height: clamp(70px, 9vw, 120px); overflow: visible; }
.thread-dots { stroke: var(--white); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 0 16; }
.node { fill: var(--white); }
.node-label { position: absolute; top: 100%; margin: 6px 0 0; font-size: 0.9375rem; font-weight: 600; }
.node-label-you { left: 0; }
.node-label-adviser { right: 0; }
.joins-title { position: relative; margin: 0 0 clamp(40px, 5vw, 64px); font-size: clamp(2.6rem, 7.4vw, 6rem); line-height: 1; letter-spacing: -0.04em; font-weight: 700; }
.joins-text, .joins-human { display: block; }
.joins-dots { display: none; max-width: 100%; margin-top: 0.06em; --dot: #fff; }
.js-ready .joins-dots { display: block; }
.js-ready .joins-human { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.joins-copy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 48px; max-width: 980px; margin-left: auto; font-size: 1.125rem; }
.joins-copy p { margin: 0; }
.control { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 10px; font-weight: 600; margin-top: 12px !important; }

/* Scene 6: the same moment, from both sides. Static: stacked. */
.side { position: relative; }
.side-pin { position: relative; }
.side-layer { padding: clamp(80px, 10vw, 140px) var(--gutter); }
.side-you { background: var(--paper); }
.side-firm { background: var(--ink); color: var(--white); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 48px clamp(40px, 6vw, 112px); align-items: center; }
.moment { list-style: none; margin: 0 auto; padding: 0; max-width: 1296px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px clamp(40px, 6vw, 112px); }
.moment h3 { margin: 0; font-size: clamp(2rem, 4.4vw, 3.75rem); letter-spacing: -0.04em; line-height: 1; }
.moment-sub { margin: 10px 0 24px; color: var(--muted); font-weight: 500; }
.moment-said { margin: 0; font-size: clamp(1.3rem, 2.2vw, 1.875rem); line-height: 1.3; letter-spacing: -0.02em; font-weight: 500; max-width: 24ch; }
.firm-open { max-width: 620px; justify-self: end; }
.firm-open h2 { margin: 0 0 24px; font-size: clamp(2.4rem, 5.6vw, 5rem); line-height: 1; letter-spacing: -0.04em; font-weight: 600; }
.firm-step { margin: 0 0 32px; font-size: 1.125rem; color: var(--on-ink); max-width: 44ch; }
.firm-step strong { color: var(--white); }
.side-edge { display: none; }
.side-solo { padding: clamp(80px, 10vw, 140px) var(--gutter); }

/* Drawn adviser desk: flat, ruled, no card shadow. */
.desk { max-width: 460px; padding: 28px 0 0; border-top: 2px solid var(--white); }
.desk p { margin: 0; }
.desk-firm { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; margin-bottom: 28px !important; }
.desk-new { display: flex; align-items: center; gap: 8px; color: #9fb7ff; font-weight: 600; font-size: 0.9375rem; }
.desk-new::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #9fb7ff; }
.desk-name { margin-top: 10px !important; font-size: 2.25rem; font-weight: 600; letter-spacing: -0.03em; }
.desk-signal { color: var(--on-ink); margin-top: 4px !important; }
.desk-quote { margin: 20px 0 !important; padding-left: 16px; border-left: 2px dotted rgba(255,255,255,0.6); font-size: 1.125rem; }
.desk-shared-label { font-size: 0.875rem; color: #aab3c5; margin-bottom: 8px !important; }
.desk-shared { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.desk-shared li { padding: 6px 12px; border: 1px solid rgba(255,255,255,0.35); border-radius: 999px; font-size: 0.875rem; }

/* Scene 6 animated, desktop: the firm's view wipes across the person's. */
@media (min-width: 900px) {
  .anim-s6 .side-pin { height: 100vh; overflow: hidden; }
  .anim-s6 .side-layer { position: absolute; inset: 0; display: grid; align-content: center; }
  .anim-s6 .side-firm { display: grid; clip-path: inset(0 0 0 100%); }
  .anim-s6 .side-edge { display: block; position: absolute; top: 0; bottom: 0; left: 100%; width: 4px; background-image: radial-gradient(circle, var(--blue) 1.8px, transparent 2.1px); background-size: 4px 8px; }
}

/* Firm continued */
.firm { background: var(--ink); color: var(--white); padding: 0 var(--gutter) clamp(96px, 12vw, 160px); }
.firm-inner { max-width: 1296px; margin: 0 auto; padding-top: clamp(40px, 5vw, 72px); border-top: 1px solid rgba(255,255,255,0.14); }
.firm-lede { margin: 0 0 clamp(48px, 6vw, 80px); max-width: 30ch; font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.2; letter-spacing: -0.025em; font-weight: 500; }
.firm-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(32px, 4vw, 64px); }
.firm-cols h3 { margin: 0 0 12px; font-size: 1.375rem; letter-spacing: -0.02em; }
.firm-cols p { margin: 0; color: var(--on-ink); }

/* Scene 8: split cards. Static: a row of cards (a column on phones).
   anim-s8: one dotted panel that splits, parts and flips to show them. */
.split { --split-face: #02040b; padding: clamp(80px, 10vw, 150px) var(--gutter); }
.split-pin { max-width: 1120px; margin: 0 auto; }
.split-title { margin: 0 auto clamp(32px, 4vw, 52px); max-width: 22ch; font-size: clamp(1.9rem, 4.2vw, 3.5rem); line-height: 1.04; letter-spacing: -0.035em; font-weight: 600; text-align: center; text-wrap: balance; }
.split-cards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; }
.split-slice { position: relative; min-width: 0; }
.split-front { display: none; }
.split-back { display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 340px; padding: clamp(24px, 2.6vw, 34px); border: 1px solid transparent; border-radius: 16px; text-decoration: none; }
.split-back h3 { margin: 0; font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.12; letter-spacing: -0.025em; font-weight: 600; text-wrap: balance; }
.split-eyebrow { margin-bottom: auto; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.split-desc { margin: 0; line-height: 1.5; max-width: 40ch; }
.split-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-weight: 600; text-decoration: none; color: inherit; }
.split-go svg { transition: transform 200ms var(--ease-out); }
a.split-back:hover .split-go svg, a.split-go:hover svg { transform: translateX(3px); }
.split-paper { background: var(--white); color: var(--ink); border-color: var(--line); }
.split-paper .split-eyebrow { color: var(--blue); }
.split-paper .split-desc { color: #4c566b; }
.split-ink { background: var(--ink); color: var(--white); }
.split-ink .split-eyebrow { color: #9fb7ff; }
.split-ink .split-desc { color: var(--on-ink); }
.split-blue { background: var(--blue); color: var(--white); }
.split-blue .split-eyebrow, .split-blue .split-desc { color: #e6ecff; }
.split-ink :focus-visible, .split-blue :focus-visible { outline-color: var(--white); }
a.split-back:focus-visible { outline-offset: 4px; }

.anim-s8 .split { padding-block: 0; }
.anim-s8 .split-pin { height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; max-width: none; perspective: 1200px; }
.anim-s8 .split-cards { display: flex; align-items: stretch; gap: 0; width: min(100%, 1120px); margin: 0 auto; transform-style: preserve-3d; }
.anim-s8 .split-slice { flex: 1 1 0; z-index: var(--i); transform-style: preserve-3d; }
.anim-s8 .split-front, .anim-s8 .split-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.anim-s8 .split-front { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; background-color: var(--split-face); }
.anim-s8 .split-slice:not(:last-child) .split-front { right: -2px; }
.split-liquid { display: block; width: 100%; height: 100%; max-width: none; }
.anim-s8 .split-back { position: relative; min-height: clamp(340px, 48vh, 430px); transform: rotateY(180deg); }
/* Phones: the panel splits into rows that flip upwards. */
.anim-s8 .split-rows .split-cards { flex-direction: column; }
.anim-s8 .split-rows .split-slice:not(:last-child) .split-front { right: 0; bottom: -2px; }
.anim-s8 .split-rows .split-back { min-height: 0; padding: 18px 20px; gap: 6px; transform: rotateX(180deg); }
.anim-s8 .split-rows .split-back h3 { font-size: 1.125rem; }
.anim-s8 .split-rows .split-desc { font-size: 0.875rem; line-height: 1.4; }
.anim-s8 .split-rows .split-eyebrow { margin-bottom: 4px; font-size: 0.75rem; }
.anim-s8 .split-rows .split-go { margin-top: 2px; font-size: 0.9375rem; }
.anim-s8 .split-rows .split-title { margin-bottom: 20px; font-size: clamp(1.6rem, 7vw, 2.2rem); }

/* Journey pages (your money, advisers): they open straight into a section. */
.journey .areas { margin-top: 0; }
.journey > .firm:first-child { padding-top: clamp(72px, 10vw, 140px); }
.journey > .firm:first-child .firm-inner { border-top: 0; padding-top: 0; }
.join.join-one { grid-template-columns: minmax(0, 1fr); }
.cta-band { background: var(--white); padding: clamp(64px, 8vw, 112px) var(--gutter); border-top: 1px solid var(--line); }
.cta-firm { background: var(--blue); color: var(--white); border-top: 0; }
.cta-firm :focus-visible { outline-color: var(--white); }
.cta-inner { max-width: 1296px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
.cta-inner h2 { margin: 0 0 12px; font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: -0.035em; line-height: 1.02; }
.cta-inner p { margin: 0; max-width: 46ch; color: #4c566b; }
.cta-firm .cta-inner p { color: #e6ecff; }

/* Your money: app screens through the page. */
.ym-hero { background: var(--ink); color: var(--white); padding: clamp(48px, 7vw, 104px) var(--gutter) clamp(64px, 8vw, 120px); }
.ym-hero-inner { max-width: 1296px; margin: 0 auto; }
.ym-hero h1 { margin: 0 0 20px; max-width: 14ch; font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1; letter-spacing: -0.04em; font-weight: 600; }
.ym-hero p { margin: 0; max-width: 46ch; color: var(--on-ink); font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.45; }
.phone { aspect-ratio: 600 / 1298; border: 7px solid #0d1322; border-radius: 34px; overflow: hidden; background: #0d1322; box-shadow: 0 34px 60px -30px rgba(23,32,51,0.45); }
.phone img { width: 100%; height: 100%; object-fit: cover; }
.app-kicker { margin: 0 0 14px; color: var(--blue); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; }
.app-row { padding: clamp(72px, 9vw, 140px) var(--gutter) 0; }
.app-row-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 40px clamp(40px, 8vw, 140px); align-items: center; }
.app-row.flip .app-row-inner { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
.app-row.flip .phone { order: -1; }
.app-row-text h2 { margin: 0 0 16px; font-size: clamp(2rem, 4.4vw, 3.5rem); line-height: 1.02; letter-spacing: -0.04em; font-weight: 600; text-wrap: balance; }
.app-row-text p { margin: 0; max-width: 40ch; color: #2b3650; font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.5; }
.app-row-text .proto-note { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.875rem; }
.invest-show { margin-top: clamp(72px, 9vw, 140px); background: linear-gradient(160deg, #eef2fb 0%, #dfe6f5 100%); overflow: hidden; }
.invest-show-inner { max-width: 1296px; margin: 0 auto; padding: clamp(72px, 9vw, 120px) var(--gutter); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px clamp(40px, 6vw, 96px); align-items: center; }
.invest-show-text h2 { margin: 0 0 28px; font-size: clamp(2.4rem, 5vw, 4.25rem); line-height: 0.98; letter-spacing: -0.045em; font-weight: 650; }
.invest-show-text ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.invest-show-text li { position: relative; padding-left: 30px; color: #2b3650; max-width: 40ch; }
.invest-show-text li::before { content: ""; position: absolute; left: 0; top: 0.25em; width: 18px; height: 18px; border-radius: 50%; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.invest-show-text strong { color: var(--ink); }
.invest-show-phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.invest-show-phones .phone:nth-child(2), .invest-show-phones .phone:nth-child(5) { margin-top: 64px; }
.invest-show-phones .phone:nth-child(4) { grid-column: 1; margin-top: -40px; }
.invest-show-phones .phone:nth-child(5) { grid-column: 2; margin-top: 24px; }

/* Retention: the adviser portal. */
.mi-head { max-width: 1296px; margin: 0 auto; padding: clamp(80px, 10vw, 140px) var(--gutter) 0; }
.mi-head h2 { margin: 0 0 12px; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1; letter-spacing: -0.04em; font-weight: 600; }
.mi-head p { margin: 0; color: var(--muted); }
.mi .ws-features { padding-top: clamp(48px, 6vw, 80px); }

/* AI workflow automation: product screens with what each one does. */
.ws-hero { background: var(--ink); color: var(--white); padding: clamp(64px, 9vw, 128px) var(--gutter) clamp(72px, 9vw, 120px); }
.ws-hero-inner { max-width: 1296px; margin: 0 auto; }
.ws-eyebrow { margin: 0 0 18px; color: #9fb7ff; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.04em; }
.ws-hero h1 { margin: 0 0 24px; max-width: 14ch; font-size: clamp(2.6rem, 7vw, 5.5rem); line-height: 0.98; letter-spacing: -0.04em; font-weight: 600; }
.ws-lede { margin: 0 0 32px; max-width: 46ch; color: var(--on-ink); font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.45; letter-spacing: -0.01em; }
.ws-note { margin: 20px 0 0; font-size: 0.875rem; color: #9aa3b5; }
.ws-features { max-width: 1296px; margin: 0 auto; padding: clamp(72px, 9vw, 140px) var(--gutter); display: grid; gap: clamp(72px, 9vw, 140px); }
.ws-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 32px clamp(32px, 5vw, 80px); align-items: center; }
.ws-row:nth-child(even) { grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); }
.ws-row:nth-child(even) .ws-text { order: 2; }
.ws-text h2, .ws-text h3 { margin: 0 0 16px; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.05; letter-spacing: -0.03em; font-weight: 600; text-wrap: balance; }
.ws-text p { margin: 0; color: #2b3650; font-size: 1.0625rem; line-height: 1.6; max-width: 46ch; }
.ws-text ul { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; max-width: 46ch; }
.ws-text li { position: relative; padding-left: 22px; color: #2b3650; }
.ws-text li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.ws-shot { margin: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--white); box-shadow: 0 30px 60px -30px rgba(23,32,51,0.35); }
.ws-shot img { width: 100%; height: auto; }
.ws-control { background: var(--ink); color: var(--white); padding: clamp(72px, 9vw, 128px) var(--gutter); }
.ws-control-inner { max-width: 1296px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px clamp(40px, 6vw, 112px); }
.ws-control h2 { margin: 0; max-width: 12ch; font-size: clamp(2.2rem, 4.6vw, 4rem); line-height: 1; letter-spacing: -0.04em; font-weight: 600; }
.ws-control dl { margin: 0; }
.ws-control dl div { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr); gap: 8px 32px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,0.14); }
.ws-control dt { font-weight: 600; font-size: 1.125rem; }
.ws-control dd { margin: 0; color: var(--on-ink); }
.join-one .form { padding-inline: max(var(--gutter), calc(50% - 300px)); }

/* Finance, without the fog */
.fog-morph { position: absolute; max-width: none; pointer-events: none; }
.anim-s7 .fogless { overflow-x: clip; }
.fogless { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 40px clamp(40px, 6vw, 112px); max-width: 1440px; margin: 0 auto; padding: clamp(96px, 12vw, 180px) var(--gutter); }
.fog-head { position: relative; margin: 0; font-size: clamp(2.6rem, 6.4vw, 5.5rem); line-height: 0.98; letter-spacing: -0.04em; font-weight: 600; max-width: 9ch; }
.fogless dl { margin: 0; }
.fogless dl div { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: 8px 32px; padding: 24px 0; border-top: 1px solid var(--line); }
.fogless dt { font-weight: 600; font-size: 1.125rem; }
.fogless dd { margin: 0; color: #4c566b; }

/* Forms */
.join { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form { display: flex; flex-direction: column; padding: clamp(56px, 7vw, 112px) var(--gutter); background: var(--white); }
.form-firm { background: var(--blue); color: var(--white); }
.form h2 { margin: 0 0 12px; font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: -0.035em; line-height: 1.02; }
.form > p { margin: 0 0 28px; color: #4c566b; max-width: 46ch; }
.form-firm > p { color: #e6ecff; }
.form label { font-weight: 500; font-size: 0.9375rem; margin-bottom: 6px; }
.form .opt { color: var(--muted); font-weight: 400; }
.form-firm .opt { color: #dbe3ff; }
.form input:not([type=checkbox]):not([type=radio]), .form textarea, .form select { width: 100%; max-width: 560px; margin-bottom: 18px; padding: 12px 14px; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid #b9c1d1; border-radius: 10px; }
.form-firm input:not([type=checkbox]):not([type=radio]), .form-firm textarea { border-color: transparent; background: var(--white); }
.form input:focus-visible, .form textarea:focus-visible, .form select:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.form-firm input:focus-visible, .form-firm textarea:focus-visible { outline-color: var(--white); outline-offset: 2px; }
.form textarea { resize: vertical; }
/* The one form: who's asking comes first. */
.roles { margin: 0 0 22px; padding: 0; border: 0; display: grid; gap: 10px; max-width: 560px; }
.roles legend { margin-bottom: 10px; padding: 0; font-weight: 600; font-size: 0.9375rem; }
.role-opt { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid #b9c1d1; border-radius: 12px; background: var(--paper); cursor: pointer; transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out); }
.role-opt:hover { border-color: var(--ink); }
.role-opt:has(input:checked) { border-color: var(--blue); background: #f1f4ff; box-shadow: 0 0 0 1px var(--blue) inset; }
.role-opt input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--blue); flex: none; }
.role-opt > span { min-width: 0; overflow-wrap: anywhere; }
.role-opt strong { display: block; font-weight: 600; }
.role-opt small { display: block; color: #4c566b; font-size: 0.875rem; }
.roles .field-error { margin: 0; }
.role-fields { display: flex; flex-direction: column; }
.role-fields > div { display: flex; flex-direction: column; }
.form-risk { margin: 0 0 18px; padding: 12px 14px; border-radius: 10px; background: #fff5df; color: #6b4600; font-size: 0.9375rem; max-width: 560px; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; max-width: 560px; }
.pair > div { display: flex; flex-direction: column; }
.form > label:not(.check) { display: block; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400 !important; color: #4c566b; margin: 4px 0 24px !important; max-width: 560px; }
.form-firm .check { color: #e6ecff; }
.check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--blue); flex: none; }
.form-firm .check input { accent-color: var(--white); }
.form .btn { align-self: flex-start; }
.form-note { margin: 16px 0 0; min-height: 1.5em; font-size: 0.9375rem; font-weight: 500; max-width: 560px; }
.form-note:empty { margin: 0; min-height: 0; }
.form-note a { color: inherit; font-weight: 600; }
.form .check a { color: inherit; font-weight: 500; }

/* Live sign-up: spam check, field errors and the confirmation state */
.turnstile { min-height: 0; margin: 0 0 16px; }
.turnstile:empty { margin: 0; }
.field-error { display: block; margin: -12px 0 16px; font-size: 0.875rem; font-weight: 500; color: #b4232f; max-width: 560px; }
.form-firm .field-error { color: #ffffff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.check + .field-error { margin-top: -18px; }
.form [aria-invalid="true"] { border-color: #b4232f !important; box-shadow: 0 0 0 1px #b4232f; }
.form-firm [aria-invalid="true"] { border-color: #ffffff !important; box-shadow: 0 0 0 2px #ffffff; }
.form .btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.form-done { display: flex; flex-direction: column; justify-content: center; }
.form-done h2:focus { outline: none; }
.form-done p { margin: 0; max-width: 46ch; font-size: 1.125rem; }
.form:not(.form-firm) .form-done p, .form-done.on-light p { color: #2b3650; }

/* Footer */
.foot { background: var(--ink); color: var(--white); padding: 64px var(--gutter) 48px; }
.foot-top { display: flex; align-items: center; gap: 24px 40px; flex-wrap: wrap; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,0.14); }
.foot-top img { width: 140px; height: auto; }
.foot-top p { margin: 0 auto 0 0; color: var(--on-ink); }
.foot-top a { color: var(--white); font-weight: 500; }
.foot-legal { max-width: 80ch; padding-top: 28px; font-size: 0.875rem; color: var(--on-ink); }
.foot-legal h2 { font-size: 0.9375rem; margin: 0 0 8px; color: var(--white); }
.foot-legal p { margin: 0 0 10px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }

/* Mobile */
@media (max-width: 899px) {
  .bar { flex-wrap: wrap; gap: 12px 16px; }
  .bar > ul { order: 3; width: 100%; margin: 0; flex-wrap: wrap; gap: 8px 20px; }
  .bar .btn, .bar .menu-btn { margin-left: auto; }
  .bar .btn + .menu-btn { margin-left: 0; }
  .bar.has-menu > ul { display: none; }
  .bar.has-menu .menu-btn { display: inline-flex; }
  .bar.has-menu.is-open > ul { display: flex; flex-direction: column; align-items: stretch; position: absolute; top: 100%; left: 0; right: 0; gap: 0; padding: 4px var(--gutter) 20px; background: var(--ink); border-top: 1px solid rgba(255,255,255,0.12); box-shadow: 0 24px 40px -20px rgba(0,0,0,0.5); }
  .bar.has-menu.is-open ul a { display: block; padding: 14px 0; font-size: 1.125rem; color: var(--white); border-bottom: 1px solid rgba(255,255,255,0.1); }
  .bar.has-menu.is-open > ul > li:last-child a { border-bottom: 0; }
  .bar.has-menu.is-open .sub-btn { width: 100%; justify-content: space-between; padding: 14px 0; font-size: 1.125rem; color: var(--white); border-bottom: 1px solid rgba(255,255,255,0.1); }
  .has-subs .sub { position: static; min-width: 0; padding: 0 0 0 16px; background: none; border: 0; border-radius: 0; box-shadow: none; }
  .has-subs .sub a { padding: 14px 0; border-radius: 0; white-space: normal; }
  .has-subs .sub a:hover { background: none; }
  .bar ul a[aria-current="page"] { text-underline-offset: 6px; }
  .mast { grid-template-columns: 1fr; align-items: start; min-height: 0; padding-top: 24px; }
  .mast-cue { margin-top: 8px; }
  .mast.mast-centre { min-height: calc(100svh - 170px); align-items: center; padding-bottom: 32px; }
  .talk { grid-template-columns: 1fr; }
  .q, .q-small, .a, .pots, .pots + .a-said { grid-column: 1; }
  .a { margin-top: 24px; }
  .areas-track { grid-template-columns: 1fr; }
  .sum-grid { grid-template-columns: 1fr; }
  .sum-total { order: -1; }
  .joins-copy { grid-template-columns: 1fr; }
  .side-firm { grid-template-columns: 1fr; }
  .firm-open { justify-self: start; }
  .moment { grid-template-columns: 1fr; }
  .firm-cols { grid-template-columns: 1fr; }
  .split-cards { grid-auto-flow: row; }
  .ws-row, .ws-row:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .app-row-inner, .app-row.flip .app-row-inner { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .app-row .phone, .app-row.flip .phone { order: 0; width: min(78%, 300px); justify-self: center; }
  .invest-show-inner { grid-template-columns: minmax(0, 1fr); }
  .invest-show-phones { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 8px var(--gutter) 24px; }
  .invest-show-phones .phone { flex: 0 0 62%; scroll-snap-align: start; margin-top: 0 !important; }
  .ws-row:nth-child(even) .ws-text { order: 0; }
  .ws-control-inner, .ws-control dl div { grid-template-columns: minmax(0, 1fr); }
  .split-back { min-height: 0; }
  .fogless { grid-template-columns: 1fr; }
  .fogless dl div { grid-template-columns: 1fr; }
  .join { grid-template-columns: 1fr; }
  .form .btn { align-self: stretch; justify-content: center; }
  .pair { grid-template-columns: 1fr; }
  .foot-top p { margin: 0; width: 100%; }
}
@media (max-width: 480px) {
  .bar.has-menu .menu-btn { width: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bar .btn { padding: 0 16px; }
  .mast-actions .btn { flex: 1 1 100%; justify-content: center; }
  .node-label { font-size: 0.8125rem; }
}

/* Message box word count */
.form .msg-field textarea { margin-bottom: 6px; }
.word-count { margin: 0 0 18px; font-size: 0.875rem; color: var(--muted); }
.word-count.is-over { color: #c2341b; font-weight: 600; }