/* ==========================================================================
   Investace Mutual Funds — landing v2 (concise).
   Loaded after mf.css; only shared theme variables, so dark AND light work.
   Motion: transform + opacity only (no blur on reveals), springs from
   --spring, everything interruptible and off under reduced motion.
   ========================================================================== */
:root { --film-bg: #050505; --z-film-ui: 2; }

/* one-shot reveals without blur — compositor-only */
.js [data-in], .js [data-rise], .js [data-stagger] > * { filter: none; transform: translateY(18px); transition: opacity .9s var(--spring), transform 1.1s var(--spring); }
.js .is-in, .js [data-stagger].is-in > * { transform: none; }

.h2 { text-wrap: balance; }
p, dd, small, span { text-wrap: pretty; }

/* ---------- hero ---------- */
.mh { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding: 108px var(--pad) 56px; max-width: 1440px; margin: 0 auto; }
.mh__copy { display: grid; justify-items: start; }
.mh__title { margin-top: 22px; font-size: clamp(44px, 5.6vw, 92px); line-height: .98; letter-spacing: -.055em; font-weight: 400; text-wrap: balance; }
.mh__sub { margin-top: 22px; max-width: 30ch; font-size: clamp(18px, 1.4vw, 20px); line-height: 1.45; color: var(--mute); }
.mh__btns { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px; }
.mh__facts { list-style: none; margin-top: 40px; display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 15px; color: var(--mute); }
.mh__facts li { display: inline-flex; align-items: center; gap: 8px; }
.mh__facts svg, .gets svg, .flow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.gets svg .f, .flow svg .f { fill: currentColor; }

/* the film: always a dark stage, framed like a print in light mode */
.mh__film { position: relative; margin: 0; aspect-ratio: 4 / 5; max-height: calc(100dvh - 160px); width: 100%; justify-self: end; background: var(--film-bg); overflow: hidden; isolation: isolate; box-shadow: 0 0 0 1px var(--line-2), var(--shadow); }
[data-theme="light"] .mh__film { box-shadow: 0 0 0 10px #fff, 0 0 0 11px var(--line), 0 50px 90px -40px rgba(40,38,34,.55); }
.mh__film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; transform: scale(1.02); }
.mh__film::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 80% at 50% 45%, transparent 55%, rgba(0,0,0,.55)), linear-gradient(180deg, rgba(0,0,0,.35), transparent 22%, transparent 70%, rgba(0,0,0,.7)); }
.mh__cap, .mh__note { text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.mh__cap { position: absolute; z-index: var(--z-film-ui); left: 22px; right: 22px; bottom: 20px; color: #fff; display: grid; gap: 12px; }
.mh__year { display: flex; align-items: baseline; gap: 12px; }
.mh__year b { font-size: clamp(22px, 2vw, 28px); font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mh__year em { font-style: normal; font-size: 15px; color: rgba(255,255,255,.82); transition: opacity .35s ease; }
.mh__year em.is-swap { opacity: 0; }
.mh__rail { display: block; height: 2px; background: rgba(255,255,255,.18); overflow: hidden; }
.mh__rail i { display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
.mh__replay { position: absolute; z-index: var(--z-film-ui); top: 16px; right: 16px; height: 36px; padding: 0 14px; font-size: 13px; font-weight: 500; color: #fff; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .15s ease, transform .15s ease; }
.mh__replay:hover { background: rgba(255,255,255,.2); }
.mh__replay:active { transform: scale(.96); }
.mh__note { position: absolute; z-index: var(--z-film-ui); top: 18px; left: 22px; font-size: 12.5px; color: rgba(255,255,255,.78); }

/* ---------- sections ---------- */
.sec { padding: clamp(80px, 9vw, 128px) 0; border-top: 1px solid var(--line); }
.sec__h { max-width: 16ch; }
.sec__row { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }

/* what you get: four scannable tiles */
.gets { list-style: none; margin-top: 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.gets li { background: var(--bg); padding: 28px 24px 30px; display: grid; gap: 10px; align-content: start; min-height: 190px; transition: background .2s ease; }
.gets li:hover { background: var(--surface); }
.gets svg { width: 24px; height: 24px; color: var(--signal); margin-bottom: 26px; }
.gets b { font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
.gets span { font-size: 16px; line-height: 1.5; color: var(--mute); }

/* progressive disclosure */
.more { margin-top: 22px; }
.more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 12px; font-size: 16px; color: var(--mute); padding: 10px 0; min-height: 44px; transition: color .15s ease; }
.more summary::-webkit-details-marker { display: none; }
.more summary::before { content: "+"; display: grid; place-items: center; width: 22px; height: 22px; font-size: 16px; line-height: 1; box-shadow: inset 0 0 0 1px var(--line-2); transition: transform .3s var(--spring); }
.more[open] summary::before { transform: rotate(45deg); }
.more summary:hover { color: var(--text); }
.more dl { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 40px; max-width: 900px; }
.more dt { font-size: 16px; font-weight: 500; }
.more dd { margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--mute); }
.more dd a { text-decoration: underline; text-underline-offset: 3px; }
.more > p { margin-top: 14px; max-width: 900px; font-size: 13px; line-height: 1.6; color: var(--dim); }
.more--inline { margin-top: 14px; }
.more--inline p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--mute); }

/* how it works: four steps on a rail */
.flow { list-style: none; position: relative; margin-top: 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: s; }
.flow::before { content: ""; position: absolute; left: 20px; right: 20px; top: 20px; height: 1px; background: var(--line-2); }
.flow::after { content: ""; position: absolute; left: 20px; right: 20px; top: 20px; height: 1px; background: var(--text); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.6s var(--spring) .3s; }
.flow.is-in::after { transform: scaleX(1); }
.flow li { position: relative; display: grid; gap: 6px; }
.flow__n { width: 40px; height: 40px; display: grid; place-items: center; font-size: 15px; font-weight: 500; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2); margin-bottom: 18px; position: relative; z-index: 1; font-variant-numeric: tabular-nums; }
.flow svg { color: var(--mute); margin-bottom: 4px; }
.flow b { font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
.flow small { font-size: 15px; color: var(--mute); }

/* quick calculator */
.qc { margin-top: 40px; border: 1px solid var(--line); background: var(--surface); }
.qc__tabs { position: relative; display: flex; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.qc__tabs button { position: relative; z-index: 1; min-height: 52px; padding: 14px 24px; font-size: 15px; color: var(--mute); white-space: nowrap; transition: color .15s ease; }
.qc__tabs button[aria-selected="true"] { color: var(--text); }
.qc__tabs button:focus-visible { outline: 2px solid var(--text); outline-offset: -4px; }
.qc__ink { position: absolute; left: 0; bottom: -1px; height: 2px; width: 10px; background: var(--text); transform-origin: 0 50%; transition: transform .45s var(--spring); }
.qc__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.qc__inputs { padding: 32px 32px 24px; display: grid; gap: 28px; align-content: start; border-right: 1px solid var(--line); }
.qf { display: grid; gap: 12px; }
.qf__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.qf label { font-size: 15px; color: var(--mute); }
.qf__val { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .15s ease; font-variant-numeric: tabular-nums; }
.qf__val input { width: 9ch; height: 100%; font: inherit; font-size: 17px; font-weight: 500; color: var(--text); background: none; border: 0; text-align: right; outline: 0; font-variant-numeric: tabular-nums; }
.qf__val:focus-within { box-shadow: inset 0 0 0 1px var(--text); outline: 2px solid var(--text); outline-offset: 3px; }
.qf__u { font-size: 15px; font-weight: 500; color: var(--mute); white-space: nowrap; }
.qf__u--pre { margin-right: -2px; }
.qf input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; touch-action: pan-y; }
.qf input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--text) var(--p, 50%), color-mix(in srgb, var(--text) 16%, transparent) var(--p, 50%)); }
.qf input[type="range"]::-moz-range-track { height: 2px; background: color-mix(in srgb, var(--text) 16%, transparent); }
.qf input[type="range"]::-moz-range-progress { height: 2px; background: var(--text); }
.qf input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -10px; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 5px var(--bg), 0 2px 8px rgba(0,0,0,.3); transition: transform .15s ease; }
.qf input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 5px var(--bg); }
.qf input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.18); }
.qf input[type="range"]:focus { outline: none; }
.qf input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--text); }
.qf input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--text); }
.qf input[type="range"]:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.qc__out { padding: 32px; display: flex; flex-direction: column; }
.qc__label { font-size: 16px; color: var(--mute); }
.qc__big { margin-top: 8px; font-size: clamp(40px, 4.4vw, 64px); line-height: 1; letter-spacing: -.05em; font-weight: 400; font-variant-numeric: tabular-nums; }
.qc__split { margin-top: 26px; display: flex; gap: 3px; height: 10px; }
.qc__split i { display: block; height: 100%; transition: flex-grow .5s var(--spring); flex: 1 1 0; }
.qc__split i:first-child { background: var(--mute); }
.qc__split i:last-child { background: var(--signal); }
.qc__legend { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; }
.qc__legend span { display: inline-flex; align-items: center; gap: 8px; color: var(--mute); }
.qc__legend i { width: 9px; height: 9px; }
.qc__legend i.a { background: var(--mute); } .qc__legend i.b { background: var(--signal); }
.qc__legend b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.qc__legend em { font-style: normal; }
.qc__cta { margin-top: auto; align-self: flex-start; }
.qc__out .qc__cta { margin-top: 34px; }
.qc__fine { padding: 16px 32px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.55; color: var(--dim); }

/* why us */
.why { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.why article { background: var(--bg); padding: 32px 28px 34px; }
.why__k { display: block; font-size: clamp(38px, 4vw, 58px); line-height: 1; letter-spacing: -.05em; font-weight: 400; background: var(--metal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.why h3 { margin-top: 12px; font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
.why p { margin-top: 10px; font-size: 16px; line-height: 1.55; color: var(--mute); }

/* faq */
.faq2 { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.faq2 .qa summary { font-size: 18px; padding: 20px 40px 20px 0; }
.faq2 .qa p { padding-bottom: 20px; }

/* closing CTA */
.cta2 { padding: clamp(88px, 10vw, 136px) 0; border-top: 1px solid var(--line); text-align: center; }
.cta2__in { display: grid; justify-items: center; }
.cta2 p { margin-top: 18px; font-size: 19px; color: var(--mute); }
.cta2 .mh__btns { justify-content: center; }

/* registrations */
.regs2 { border-top: 1px solid var(--line); background: var(--bg-2); padding: 18px 0 22px; }
.regs2 .more { margin-top: 0; }
.regs2__grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; max-width: none !important; }
.regs2 dt { font-size: 12px !important; font-weight: 600 !important; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }

/* ---------- responsive: ≥1181 desktop · 1025–1180 · 700–1024 · ≤699 ---------- */
@media (max-width: 1180px) {
  .mh { padding-top: 96px; gap: 40px; }
  .gets { grid-template-columns: 1fr 1fr; }
  .gets li { min-height: 0; }
  .qc__inputs, .qc__out { padding: 28px; }
  .qc__fine { padding: 16px 28px; }
}
@media (max-width: 1024px) {
  .mh { grid-template-columns: minmax(0, 1fr); min-height: auto; padding-top: 112px; gap: 40px; }
  .mh__title { font-size: clamp(44px, 7vw, 68px); }
  .mh__sub { max-width: 40ch; }
  .mh__film { justify-self: stretch; max-height: none; aspect-ratio: 4 / 3; }
  .flow { grid-template-columns: 1fr 1fr; row-gap: 40px; column-gap: 32px; }
  .flow::before, .flow::after { display: none; }
  .faq2 { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .why { grid-template-columns: minmax(0, 1fr); }
  .why article { display: grid; grid-template-columns: minmax(150px, .5fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .why__k { grid-row: span 4; }
  .why h3 { margin-top: 0; }
  .regs2__grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 860px) and (min-width: 700px) {
  .qc__inputs, .qc__out { padding: 24px 22px; }
  .qf__top { flex-direction: column; align-items: stretch; gap: 8px; }
  .qf__val { justify-content: flex-end; }
  .qf__val input { flex: 1; }
}
@media (max-width: 699px) {
  .mh { padding: 96px 20px 40px; gap: 32px; }
  .mh__title { font-size: 44px; }
  .mh__sub { font-size: 18px; }
  .mh__btns .sq { flex: 1 1 auto; }
  .mh__film { aspect-ratio: 1 / 1.05; }
  .gets, .more dl, .regs2__grid { grid-template-columns: minmax(0, 1fr) !important; }
  .gets li { padding: 24px 20px; }
  .gets svg { margin-bottom: 10px; }
  .flow { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  .flow li { grid-template-columns: 40px 1fr; column-gap: 16px; align-items: center; }
  .flow__n { grid-row: span 2; margin: 0; }
  .flow svg { display: none; }
  .qc__body { grid-template-columns: minmax(0, 1fr); }
  .qc__inputs { border-right: 0; border-bottom: 1px solid var(--line); }
  .qc__inputs, .qc__out { padding: 24px 20px; }
  .qc__fine { padding: 14px 20px; }
  .qc__tabs button { padding: 14px 16px; flex: 1 0 auto; }
  .qc__cta { width: 100%; }
  .why article { display: block; padding: 28px 20px; }
  .why h3 { margin-top: 12px; }
}
@media (max-width: 380px) {
  .mh__title { font-size: 40px; }
  .qf__val input { width: 7.5ch; }
  .qc__tabs button { padding: 14px 12px; }
}
/* touch: 44px targets, ≥28px slider thumbs */
@media (pointer: coarse) {
  .snav__links a { display: inline-flex; align-items: center; min-height: 44px; } /* design-review: 44px touch targets on the in-page nav */
  .qf input[type="range"] { height: 44px; }
  .qf input[type="range"]::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -13px; }
  .qf input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; }
  .mh__replay { height: 44px; padding: 0 18px; }
  .qa summary { min-height: 44px; }
  .more dd a { padding-block: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .flow::after { transform: scaleX(1); }
  .mh__rail i { transform: scaleX(1); }
}
@media (prefers-reduced-transparency: reduce) { .mh__replay { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(0,0,0,.6); } }

.qc__note { margin-top: -6px; font-size: 13px; }