/* The Invest page's footer code, verbatim. Loaded at the END of /marketing-funnel-investors so it follows the sections it corrects, as on /invest. */

:root{
  --color-navy:#111437;
  --color-orange:#E46021;
  --color-paper:#FEF3EC;
  --color-paper-warm:#FEF3EC;
  --color-white:#FEF3EC;
  --color-eucalyptus:#FEF3EC;
  --color-paper-deep:rgba(17,20,55,.10);
  --color-eucalyptus-deep:rgba(17,20,55,.10);
  --color-navy-hairline:rgba(254,243,236,.16);
  --color-navy-strong:#0A0C26;
  --color-orange-strong:#CF5218;
  --color-orange-press:#B84711;
  --color-orange-action:#E46021;
  --color-orange-action-hover:#CF5218;
  --color-orange-action-press:#B84711;
  --color-orange-eucalyptus:#E46021;
  --color-focus-ring:#E46021;
  --color-ink:#111437;
  --color-ink-soft:rgba(17,20,55,.76);
  --color-ink-muted:rgba(17,20,55,.56);
  --color-on-navy:#FEF3EC;
  --color-on-navy-muted:rgba(254,243,236,.72);
  --color-on-orange:#111437;
  --color-eucalyptus-strong:#2f4a35;
  --color-eucalyptus-ink:#24422b;
  --color-on-eucalyptus-strong:#eef3ea;
  --color-jadig-green:#111437;
  --color-jadig-green-deep:#0A0C26;
  --color-on-jadig:#FEF3EC;
  --color-on-jadig-muted:rgba(254,243,236,.72);
  --route-string-color:#E46021;
  --route-string-cross-color:#111437;
}

.splport-inv-ir .splport-inv-ir-card,
.splport-inv-ir .splport-inv-ir-panel,
.splport-inv-ir .splport-inv-ir-close,
.splport-inv-op .splport-inv-op-folio,
.splport-inv-op .splport-inv-op-annotation,
.splport-inv-jn .splport-inv-jn-detail{
  border:1px solid var(--color-paper-deep);
}
.splport-inv-ir .splport-inv-ir-card-active{ border-top:3px solid var(--color-navy); }
.splport-inv-ir .splport-inv-ir-sheen{
  background:linear-gradient(115deg,transparent 30%,color-mix(in srgb, var(--color-navy) 8%, transparent) 50%,transparent 70%);
}


/* ---------------------------------------------------------------------------
   1. "Read important information" was unreadable - navy text on the navy result
      band.

   Not a port bug. The site-wide layer carries a broad force-navy rule:
     html body :is( ...40-odd selectors... ):not(#a):not(#b):not(#c)
       { color: var(--spl-color-navy,#111437) !important; }
   and `.splport-inv-calc-rlink` is in that list. It is the right colour for the
   light surfaces the list was written for, and exactly wrong for this one,
   which sits inside the navy band.

   That rule computes to (4,1,2) - one ID from the `:is()` list's
   `#spl-nav .nb-overlay-head`, plus three `:not(#id)` hooks. Five hooks here
   reach (5,2,2) and win outright rather than relying on source order.

   The real repair is to narrow that list at source; this restores legibility
   now and is flagged back to its owner.
   --------------------------------------------------------------------------- */
html body .splport-inv-calc .splport-inv-calc-rlink:not(#__spl_never_1):not(#__spl_never_2):not(#__spl_never_3):not(#__spl_never_4):not(#__spl_never_5){
  color:var(--color-on-navy)!important;
}
html body .splport-inv-calc .splport-inv-calc-rlink:hover:not(#__spl_never_1):not(#__spl_never_2):not(#__spl_never_3):not(#__spl_never_4):not(#__spl_never_5){
  color:var(--color-orange)!important;
}

/* ---------------------------------------------------------------------------
   2. The quarter markers (Q1, Q2, Q3...) get their green fill back.

   Derick: the green background was wanted on THESE specifically. The global
   "no green backgrounds" rule stands everywhere else, so rather than unpick
   --color-eucalyptus site-wide, the repository's own two surface values are
   restated on this one component. #e2ebe0 / #d4dfd1 are tokens.css's
   --color-eucalyptus and --color-eucalyptus-deep verbatim.
   --------------------------------------------------------------------------- */
.splport-inv-calc .splport-inv-calc-q{
  background-color:#e2ebe0;
  border-color:#d4dfd1;
}

/* ---------------------------------------------------------------------------
   3. Gappy figures - "$4,531" and the reviews "4.9".

   Cause: the repository sets `font-variant-numeric: tabular-nums` so values
   cannot jump width as they change. Tabular figures are a fixed advance, and
   RECKLESS's tabular advance is much wider than the Libre Caslon the repo was
   measured against - so the same declaration that looks tight there reads as
   spaced-out here. It is the typeface, not the tracking.

   These values REPLACE rather than count up, so the anti-jump benefit is small
   and the cost is visible. Switched to proportional figures, which is what the
   reference actually looks like.
   --------------------------------------------------------------------------- */
.splport-inv-calc .splport-inv-calc-rvalue,
.splport-inv-calc .splport-inv-calc-rvalue-sm,
.splport-inv-calc .splport-inv-calc-qvalue,
.splport-inv-ir .splport-inv-ir-rating{
  font-variant-numeric:proportional-nums;
}

/* ---------------------------------------------------------------------------
   4. Diversified portfolio plate: near-white field -> Tan.

   The white is baked into the raster, so CSS could not reach it. The artwork
   was remapped per channel by the exact gains that take its measured background
   rgb(252,246,241) onto Tan rgb(254,243,236) - 1.0079 / 0.9878 / 0.9793 -
   anchored at 0 so the pencil line work is untouched. Same 1200x800 asset,
   re-uploaded as v2. Overriding the custom property avoids editing the embed.
   --------------------------------------------------------------------------- */
.splport-inv-op{
  --splport-inv-op-plate:url("https://cdn.prod.website-files.com/69c1e42db2f14712cb15f6e7/6ab056adc7c79eefb0db6873_invest-portfolio-plate-v2.webp");
}


@media (min-width: 761px){
  .spl-cl-inner .spl-cl-side:not(.spl-cl-side-end)::after{
    content:"";
    display:block;
    height:calc(var(--text-meta) * var(--leading-body));
    flex:none;
    pointer-events:none;
  }
}


.splport-inv-op .splport-inv-op-mode.is-on{
  background-color:color-mix(in srgb, var(--color-orange) 9%, transparent);
  box-shadow:inset 0 0 0 1px var(--color-orange);
  color:var(--color-navy);
}
.splport-inv-op .splport-inv-op-stage[data-mode="diversified"] .splport-inv-op-sheet{
  box-shadow:inset 0 0 0 2px var(--color-orange), var(--shadow-lg);
}
.splport-inv-ir .splport-inv-ir-response{
  background-color:color-mix(in srgb, var(--color-navy) 4%, transparent);
  border:1px solid var(--color-paper-deep);
}


.splport-inv-reader-frame:not([data-motion-active="true"]) .splport-inv-reader-readLine,
.splport-inv-reader-frame:not([data-motion-active="true"]) .splport-inv-reader-cueLine{
  stroke-dashoffset:0;
  opacity:.5;
}


.splport-inv-calc-eyebrow,
.splport-inv-jn-eyebrow,
.splport-inv-ir-eyebrow,
.s5a-ew,
.inv2-eyebrow{display:none!important;}


.splport-inv-faq-ew{
  display:block;
  font-size:var(--text-h2);
  line-height:var(--leading-heading);
  letter-spacing:var(--tracking-display);
  font-weight:400;
  text-transform:none;
  color:var(--color-navy);
  max-width:18ch;
  margin:0;
}
.splport-inv-faq-ew::before{display:none;}