@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300..700&display=swap");
/* ==========================================================================
   Investace — shared theme layer (v1)
   One design system for every Investace surface: main site, product landing
   pages (AlphaLeap, Investace Research, Investace Mutual Funds) and the
   client dashboards. Dark (Wealthcore) is the default; light is the same
   design in daylight. Switch with <html data-theme="light|dark">.
   Copy this file (and ic-theme.js) verbatim into other projects — do not fork.
   ========================================================================== */
:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg: #08080A;            /* page */
  --bg-2: #0E0E11;          /* raised band */
  --surface: #121215;       /* cards */
  --surface-2: #18181C;
  --line: rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.14);
  --text: #ECECEA;
  --mute: rgba(236,236,234,.72);
  --dim: rgba(236,236,234,.56);
  --signal: #D9E4A6;        /* the one accent: pale moss, "live / growing" */
  --signal-ink: #2E3314;
  --gold: #BE9338;          /* logo only (divider bar) + rare hairlines */
  --positive: #5FBF86;
  --negative: #F07167;
  --metal: linear-gradient(180deg, #FFFFFF 0%, #E6E5E1 40%, #A09E99 80%, #7E7C78 100%);
  --btn-bg: #FFFFFF; --btn-fg: #0A0A0B; --btn-line: rgba(255,255,255,.22);
  --grain-opacity: .045;
  --panel-a: #C9C9C6; --panel-b: #1a1a1c; --panel-c: #8f8f8c; --panel-base: #0E0E10;
  --shadow: 0 30px 60px -24px rgba(0,0,0,.8);
}
[data-theme="light"] {
  color-scheme: light;
  --bg: #F3F2EF;
  --bg-2: #ECEBE7;
  --surface: #FFFFFF;
  --surface-2: #F7F6F3;
  --line: rgba(14,12,10,.09);
  --line-2: rgba(14,12,10,.16);
  --text: #0E0C0A;
  --mute: rgba(14,12,10,.72);
  --dim: rgba(14,12,10,.58);
  --signal: #534C29;
  --signal-ink: #E6EBC4;
  --positive: #1F7A45;
  --negative: #B3261E;
  --metal: linear-gradient(180deg, #2A2926 0%, #0E0C0A 55%, #5A5752 100%);
  --btn-bg: #0E0C0A; --btn-fg: #FFFFFF; --btn-line: rgba(14,12,10,.2);
  --grain-opacity: .06;
  --panel-a: #FFFFFF; --panel-b: #B6B8B2; --panel-c: #E6EBC4; --panel-base: #E3E4E1;
  --shadow: 0 30px 60px -28px rgba(40,38,34,.35);
}
html { background: var(--bg); color: var(--text); transition: background-color .5s ease, color .5s ease; }

/* ---------- logo: the wordmark itself, no container ---------- */
/* Faithful to the brand mark: INVESTACE (bold) · gold rule · CAPITAL (regular,
   widely tracked) — all one colour, optically centred on the rule. The rule
   is a touch taller than the caps, as in the original logo. */
.ic-logo { display: inline-flex; align-items: center; gap: .62em; font-family: "Poppins", "Geist", system-ui, sans-serif; font-size: 17.5px; color: var(--text); line-height: 1; text-decoration: none; -webkit-font-smoothing: antialiased; }
.ic-logo__word { font-weight: 700; font-size: 1em; letter-spacing: .035em; }
.ic-logo__bar { width: 2px; height: 1.05em; background: var(--gold); border-radius: 1px; transform-origin: 50% 50%; animation: ic-bar-in .9s cubic-bezier(.2,.9,.25,1) .15s both; }
.ic-logo__cap { font-weight: 400; font-size: 1em; letter-spacing: .3em; margin-right: -.3em; color: var(--text); opacity: .92; }
.ic-logo__sub { margin-left: .35em; padding-left: .9em; border-left: 1px solid var(--line-2); font-family: "Geist", system-ui, sans-serif; font-weight: 500; font-size: .86em; letter-spacing: -.01em; color: var(--text); opacity: .9; }
.ic-logo:hover .ic-logo__bar { box-shadow: 0 0 10px rgba(190,147,56,.55); }
.ic-logo--xl { font-size: clamp(22px, 2.1vw, 32px); }
.ic-logo--xl .ic-logo__bar { width: 3px; }
@keyframes ic-bar-in { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (max-width: 640px) { .ic-logo { font-size: 13px; gap: .5em; } .ic-logo__cap { letter-spacing: .22em; margin-right: -.22em; } .ic-logo__sub { display: none; } }

/* ---------- theme toggle: a small sun/moon switch ---------- */
.ic-toggle { position: relative; width: 52px; height: 28px; border-radius: 999px; border: 0; cursor: pointer; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); display: inline-flex; align-items: center; padding: 0 4px; flex: none; transition: background .4s; }
.ic-toggle:focus-visible { outline: 1.5px solid var(--text); outline-offset: 3px; }
.ic-toggle__knob { width: 20px; height: 20px; border-radius: 50%; background: var(--text); display: grid; place-items: center; transform: translateX(24px); transition: transform .5s cubic-bezier(.2,.9,.25,1), background .4s; }
[data-theme="light"] .ic-toggle__knob { transform: translateX(0); }
.ic-toggle__knob svg { width: 12px; height: 12px; color: var(--bg); }
.ic-toggle .ic-sun { display: none; } [data-theme="light"] .ic-toggle .ic-sun { display: block; } [data-theme="light"] .ic-toggle .ic-moon { display: none; }
.ic-toggle:active .ic-toggle__knob { width: 24px; }
@media (prefers-reduced-motion: reduce) { .ic-logo__bar { animation: none; } .ic-toggle__knob { transition: none; } }

/* ---------- shared footer ---------- */
.ic-foot { background: var(--bg); color: var(--text); border-top: 1px solid var(--line); padding: 80px 0 28px; font-size: 15.5px; }
.ic-foot__top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: 72px; }
.ic-foot__brand { min-width: 0; }
.ic-foot__brand p { margin-top: 22px; max-width: 340px; color: var(--mute); line-height: 1.6; }
.ic-foot__social { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.ic-foot__social a { font-size: 13px; padding: 7px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--mute); transition: color .2s, background .2s; }
.ic-foot__social a:hover { color: var(--text); background: var(--surface-2); }
.ic-foot__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.ic-foot__cols div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; align-content: start; }
.ic-foot__cols b { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin-bottom: 4px; }
.ic-foot__cols .ic-foot__gap { margin-top: 18px; }
.ic-foot__cols a { color: var(--mute); font-size: 14.5px; line-height: 1.4; transition: color .2s; overflow-wrap: anywhere; } /* long emails wrap instead of pushing the page sideways */
.ic-foot__cols a:hover { color: var(--text); }
.ic-foot__reg { margin-top: 56px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.ic-foot__reg div { background: var(--bg); padding: 14px 16px; }
.ic-foot__reg div:nth-child(9), .ic-foot__reg div:nth-child(10) { grid-column: span 2; }
.ic-foot__reg dt { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); }
.ic-foot__reg dd { margin-top: 4px; font-size: 14.5px; color: var(--text); }
.ic-foot__legal { margin-top: 32px; display: grid; gap: 12px; max-width: 1040px; font-size: 13.5px; line-height: 1.7; color: var(--dim); }
.ic-foot__bar { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--dim); }
@media (max-width: 1180px) { .ic-foot__top { grid-template-columns: 1fr; } }
@media (max-width: 1000px) { .ic-foot__cols, .ic-foot__reg { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ic-foot__cols, .ic-foot__reg { grid-template-columns: 1fr; } .ic-foot__reg div:nth-child(9), .ic-foot__reg div:nth-child(10) { grid-column: auto; } }

/* ---------- scroll performance (applies to every Investace page) ----------
   1. The page-wide grain sat in a fixed layer with a blend mode, which forces
      the whole viewport to recomposite on every scroll frame (worst on Retina).
      Same texture, no blend: a plain translucent layer composites for free.
   2. The drifting light blobs are radial gradients already; the extra 64px
      blur filter re-rasterised them every frame for no visible gain.
   3. Offscreen ambient motion is paused by the page scripts (.is-offscreen). */
body::after { mix-blend-mode: normal !important; opacity: .022 !important; will-change: auto; }
html[data-theme="light"] body::after { opacity: .03 !important; }
.blobs { filter: none !important; }
.blobs i { will-change: transform; }
.is-offscreen .blobs i, .grain.is-offscreen .blobs i { animation-play-state: paused !important; }

/* ---------- footer: the giant faded wordmark (decorative) ---------- */
.ic-foot__legal::before { content: "INVESTACE"; display: block; margin: 8px 0 34px; font-family: "Poppins", "Geist", system-ui, sans-serif; font-weight: 700; font-size: clamp(56px, 13.6vw, 212px); line-height: .8; letter-spacing: .01em; text-align: center; white-space: nowrap; background: linear-gradient(180deg, rgba(var(--on, 255,255,255), .16) 0%, rgba(var(--on, 255,255,255), 0) 88%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; user-select: none; pointer-events: none; speak: never; }
[data-theme="light"] .ic-foot__legal::before { background-image: linear-gradient(180deg, rgba(14,12,10,.12) 0%, rgba(14,12,10,0) 88%); }
.ic-foot__legal { max-width: none; }
.ic-foot__legal p { max-width: 1040px; }

/* Touch devices (phones, iPads): every control ≥44×44 (audit P1). */
@media (pointer: coarse) {
  .ic-logo { min-height: 44px; }
  .ic-toggle::after { content: ""; position: absolute; inset: -8px -4px; }
  .sq--sm { min-height: 44px; }
  .nav__login { min-height: 44px; display: inline-flex; align-items: center; }
  .menu-btn { width: 44px !important; height: 44px !important; }
  .ic-foot__cols a, .ic-foot__social a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; }
  .ic-foot__social a { min-width: 44px; justify-content: center; }
  .ic-foot__cols > div { gap: 0 !important; }
  .rfilter button, .legal__toc a { min-height: 44px; }
}

/* ===== Apple type (site-wide) =====
   SF Pro is served by the OS on Apple devices (it cannot be licensed for web embedding);
   Inter (optical sizes) is the closest open fallback elsewhere. Tracking is size-specific:
   tight for display, neutral for body, slightly open for small labels. */
:root {
  --f-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Geist", system-ui, "Helvetica Neue", sans-serif;
  --f-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Geist", system-ui, "Helvetica Neue", sans-serif;
  --f: var(--f-ui);
}
html body { font-family: var(--f-ui); font-optical-sizing: auto; letter-spacing: -.011em; text-rendering: optimizeLegibility; }
html body :where(button, input, select, textarea) { font-family: inherit; }
html body :where(h1, h2, .h1, .h2, .hero2__h) { font-family: var(--f-display); letter-spacing: -.035em; }
html body :where(h3, .h3) { font-family: var(--f-display); letter-spacing: -.022em; }
html body :where(small, .chip, .fine) { letter-spacing: .005em; }
/* rgb triplet of the text colour, for rgba() tints (used by the shared hero, nav and page CSS) */
:root { --on: 255,255,255; }
[data-theme="light"] { --on: 14,12,10; }
/* dark-only site: the theme switch is retired everywhere */
/* theme toggle is live again (Oct 2026) */

/* ── shared header: Products dropdown (all pages; behaviour in ic-theme.js) ── */
.ic-dd { position: relative; display: inline-flex; }
.ic-dd__btn { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 15px; color: var(--mute); background: none; border: 0; padding: 0; cursor: pointer; transition: color .2s; }
.ic-dd__btn:hover, .ic-dd__btn[aria-expanded="true"], .ic-dd__btn.is-current { color: var(--text); }
.ic-dd__btn:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; border-radius: 4px; }
.ic-dd__btn i { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.ic-dd__btn[aria-expanded="true"] i { transform: translateY(1px) rotate(225deg); }
.ic-dd__panel { position: absolute; left: -18px; top: calc(100% + 18px); width: 340px; padding: 8px; border-radius: 16px; background: var(--dd-bg, rgba(14,14,16,.97)); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 0 0 1px var(--line-2), 0 30px 70px -20px rgba(0,0,0,.55); z-index: 80; text-align: left; }
.ic-dd__panel[hidden] { display: none; }
.ic-dd__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
.ic-dd__panel a { display: grid; gap: 3px; padding: 12px 14px; border-radius: 10px; color: var(--text) !important; font-size: 15px; text-decoration: none; }
.ic-dd__panel a::after { display: none !important; }
.ic-dd__panel a b { font-weight: 500; }
.ic-dd__panel a small { font-size: 13px; color: var(--mute); }
.ic-dd__panel a:hover, .ic-dd__panel a:focus-visible, .ic-dd__panel a[aria-current="page"] { background: var(--dd-hover, rgba(255,255,255,.07)); outline: none; }
.sheet__lab { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin: 4px 0 2px; }
[data-theme="light"] { --dd-bg: rgba(255,255,255,.98); --dd-hover: rgba(14,12,10,.05); }
@media (min-width: 1101px) and (max-width: 1360px) { .ic-dd__btn { font-size: 14px; } }
/* theme toggle: 44px+ hit area on every screen (the visible switch stays 52×28) */
.ic-toggle::after { content: ""; position: absolute; inset: -8px -4px; }

/* Closing "15-minute conversation" panel, in the site's language: a deep rounded panel with the
   hero's dot grid and one soft spotlight, instead of the drifting grey blobs. Light theme: a white card. */
.cta__panel.grain { border-radius: clamp(24px, 3vw, 36px); background: #0B0B0C; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); }
.cta__panel.grain .blobs { display: none; }
.cta__panel.grain::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 70% at 50% 0%, rgba(255,255,255,.10), rgba(255,255,255,0) 70%),
              radial-gradient(circle at 1px 1px, rgba(255,255,255,.16) 1px, transparent 1.4px) 0 0 / 22px 22px;
  -webkit-mask: radial-gradient(75% 85% at 50% 40%, #000 30%, transparent 100%); mask: radial-gradient(75% 85% at 50% 40%, #000 30%, transparent 100%); }
.cta__panel.grain::after { opacity: .18; }
.cta__panel .cta__in h2 { color: #F4F4F2; }
.cta__panel .cta__in p { color: rgba(255,255,255,.7); }
html[data-theme="light"] .cta__panel.grain { background: #fff; border-color: rgba(11,11,12,.08); box-shadow: 0 30px 70px -36px rgba(11,11,12,.28); }
html[data-theme="light"] .cta__panel.grain::before {
  background: radial-gradient(60% 70% at 50% 0%, rgba(11,11,12,.05), rgba(11,11,12,0) 70%),
              radial-gradient(circle at 1px 1px, rgba(11,11,12,.16) 1px, transparent 1.4px) 0 0 / 22px 22px; }
html[data-theme="light"] .cta__panel.grain::after { opacity: 0; }
html[data-theme="light"] .cta__panel .cta__in h2 { color: #0B0B0C; }
html[data-theme="light"] .cta__panel .cta__in p { color: #55534E; }

/* Section labels: plain quiet text above headings, no boxed tag (site-wide, every page that loads this file) */
html body .chip { height: auto; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--on, 255,255,255), .55); }
html body .community .chip { color: rgba(255,255,255,.6); background: none; }

/* Gradient-filled headings: the gradient only paints inside the box, and the tight line-height
   put descenders (y, p, g) below it, so they were clipped. Extend the box, not the layout. */
html body .metal { padding-bottom: .14em; margin-bottom: -.14em; }

/* Product-page closing sections (AlphaLeap, Research, Mutual Funds) were full-bleed bands with a hard edge
   against the section above. Give them the same rounded panel as every other page. */
html body main section.cta:not(:has(.cta__panel)) {
  width: min(1320px, calc(100% - 2 * var(--pad, 24px))); margin: clamp(40px, 6vw, 88px) auto clamp(80px, 10vw, 140px);
  padding: clamp(72px, 12vh, 140px) clamp(20px, 4vw, 48px); border: 1px solid rgba(255,255,255,.08); border-radius: clamp(24px, 3vw, 36px);
  background: #0B0B0C; box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); position: relative; overflow: hidden; isolation: isolate; }
html body main section.cta:not(:has(.cta__panel))::before {
  content: ""; position: absolute; inset: 0; left: 0; top: 0; width: auto; height: auto; aspect-ratio: auto; transform: none; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 70% at 50% 0%, rgba(255,255,255,.10), rgba(255,255,255,0) 70%),
              radial-gradient(circle at 1px 1px, rgba(255,255,255,.16) 1px, transparent 1.4px) 0 0 / 22px 22px;
  -webkit-mask: radial-gradient(75% 85% at 50% 40%, #000 30%, transparent 100%); mask: radial-gradient(75% 85% at 50% 40%, #000 30%, transparent 100%); }
html[data-theme="light"] body main section.cta:not(:has(.cta__panel)):not(.stage) { background: #fff; border-color: rgba(11,11,12,.08); box-shadow: 0 30px 70px -36px rgba(11,11,12,.28); }
html[data-theme="light"] body main section.cta:not(:has(.cta__panel)):not(.stage)::before {
  background: radial-gradient(60% 70% at 50% 0%, rgba(11,11,12,.05), rgba(11,11,12,0) 70%),
              radial-gradient(circle at 1px 1px, rgba(11,11,12,.16) 1px, transparent 1.4px) 0 0 / 22px 22px; }