/* The Invest page's head code (design tokens, button, port corrections), verbatim, then its Simple palette. Loaded at the top of /marketing-funnel-investors. */

:root{
  --color-paper:#f7f4ef;
  --color-paper-warm:#fbf2e9;
  --color-paper-deep:#ebe4da;
  --color-white:#fffdfa;

  --color-navy:#142b4d;
  --color-navy-strong:#0e2038;
  --color-navy-hairline:#24354f;

  --color-orange:#e0561d;
  --color-orange-strong:#cf4d16;
  --color-orange-press:#b9440f;
  --color-orange-action:#bd430d;
  --color-orange-action-hover:#ad3908;
  --color-orange-action-press:#943006;

  --color-eucalyptus:#e2ebe0;
  --color-eucalyptus-deep:#d4dfd1;
  --color-eucalyptus-strong:#2f4a35;
  --color-eucalyptus-ink:#24422b;
  --color-on-eucalyptus-strong:#eef3ea;
  --color-orange-eucalyptus:#a5390a;

  --color-jadig-green:#245036;
  --color-jadig-green-deep:#1d4029;
  --color-on-jadig:#eef3ea;
  --color-on-jadig-muted:#c4d3c2;

  --color-ink:#16233a;
  --color-ink-soft:#3a4658;
  --color-ink-muted:#59657a;
  --color-on-navy:#f1e7d5;        /* warm-white on navy */
  --color-on-navy-muted:#b9c2d2;
  --color-on-orange:#fbf4ea;

  --color-focus-ring:#e0561d;

  /* Both bound to Reckless - see the header note. */
  --font-serif:"Reckless",Georgia,"Times New Roman",serif;
  --font-sans:"Reckless",Georgia,"Times New Roman",serif;

  --text-eyebrow:0.78rem;
  --text-meta:0.85rem;
  --text-body:1rem;
  --text-body-lg:1.125rem;
  --text-h4:clamp(1.15rem,1.05rem + 0.5vw,1.4rem);
  --text-h3:clamp(1.4rem,1.2rem + 1vw,1.9rem);
  --text-h2:clamp(2rem,1.5rem + 2.4vw,3.25rem);
  --text-display:clamp(2.6rem,1.6rem + 4.4vw,5.5rem);

  --leading-tight:1.04;
  --leading-heading:1.12;
  --leading-body:1.6;
  --tracking-eyebrow:0.16em;
  --tracking-display:-0.02em;
  --measure:65ch;

  --space-1:0.25rem;
  --space-2:0.5rem;
  --space-3:0.75rem;
  --space-4:1rem;
  --space-5:1.5rem;
  --space-6:2rem;
  --space-7:3rem;
  --space-8:4rem;
  --space-9:6rem;
  --space-10:8rem;

  --radius-xs:2px;
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:14px;

  --shadow-sm:0 1px 2px rgba(20,43,77,.08),0 2px 6px rgba(20,43,77,.06);
  --shadow-md:0 6px 18px rgba(20,43,77,.1),0 2px 6px rgba(20,43,77,.06);
  --shadow-lg:0 18px 46px rgba(20,43,77,.14);

  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-standard:cubic-bezier(0.4,0,0.2,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  --dur-fast:120ms;
  --dur-base:200ms;
  --dur-slow:360ms;
  --dur-entrance:620ms;
  --dur-reveal:560ms;

  /* --- Layout (tokens.css lines 125-132) --- */
  --container-max:1400px;
  --gutter:clamp(1.25rem,0.5rem + 3vw,4rem);
  --header-height:76px;
  --z-header:100;
  --z-menu:200;
  --z-skip:300;
  --z-modal:400;

  --route-string-color:var(--color-orange);
  --route-string-cross-color:var(--color-navy);
  --route-string-width:2px;
}

/* globals.css helper, needed by every ported component. */
.spl-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---------------------------------------------------------------------------
   Shared Action control, ported from src/components/Action.module.css.
   The SPL button is a slab: a label block plus a contrasting arrow slab, with a
   tactile lift on hover and shadow compression on press. It is not a pill.
   --------------------------------------------------------------------------- */
.spl-action{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-sans);font-weight:600;font-size:var(--text-body);line-height:1.1;text-decoration:none;cursor:pointer;border:none;background:none;transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard);}
.spl-action-arrow{width:1.15em;height:1.15em;flex:none;transition:transform var(--dur-base) var(--ease-spring);}
.spl-action:hover .spl-action-arrow,.spl-action:focus-visible .spl-action-arrow{transform:translateX(4px);}
.spl-action:active .spl-action-arrow{transform:translateX(1px);transition-duration:var(--dur-fast);}
.spl-action-primary,.spl-action-onnavy{gap:0;overflow:hidden;border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-standard),background-color var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard);}
.spl-action-primary:hover,.spl-action-onnavy:hover,.spl-action-primary:focus-visible,.spl-action-onnavy:focus-visible{box-shadow:var(--shadow-md);transform:translateY(-1px);}
.spl-action-primary:active,.spl-action-onnavy:active{box-shadow:none;}
.spl-action-label{padding:var(--space-3) var(--space-5);}
.spl-action-arrowbox{align-self:stretch;display:inline-flex;align-items:center;padding-inline:var(--space-4);}
.spl-action-primary{background-color:var(--color-orange-action);color:var(--color-on-orange);}
.spl-action-primary .spl-action-arrowbox{background-color:var(--color-navy);color:var(--color-on-navy);}
.spl-action-primary:hover{background-color:var(--color-orange-action-hover);}
.spl-action-primary:active{background-color:var(--color-orange-action-press);transform:translateY(1px);}
.spl-action-onnavy{background-color:var(--color-navy);color:var(--color-on-navy);}
.spl-action-onnavy .spl-action-arrowbox{background-color:var(--color-orange);color:var(--color-on-orange);}
.spl-action-onnavy:hover{background-color:var(--color-navy-strong);}
.spl-action-onnavy:active{transform:translateY(1px);}
.spl-action-quiet{color:var(--color-ink);padding:var(--space-2) 0;gap:var(--space-2);}
.spl-action-quiet .spl-action-label{padding:0;text-decoration:underline;text-decoration-color:var(--color-orange);text-decoration-thickness:2px;text-underline-offset:4px;}
.spl-action-quiet:hover{color:var(--color-orange);}
.spl-action:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:3px;}
@media(prefers-reduced-motion:reduce){
  .spl-action,.spl-action-arrow{transition:none!important;}
  .spl-action:hover,.spl-action:active,.spl-action-primary:hover,.spl-action-onnavy:hover{transform:none;}
}


/* 1. Serif clipping. Reckless carries taller glyphs than the provisional Libre
      Caslon the repository's leading was measured against, so serif text
      overflows its line box here. value-in then settles on
      clip-path: inset(0 0 0 0), which cuts that overflow off at the box edge -
      the flat-bottomed figures. Give the serif elements real leading, and let
      the animation finish outside the box rather than exactly on it. */
.splport-inv-calc .splport-inv-calc-echo,
.splport-inv-calc .splport-inv-calc-qvalue,
.splport-inv-calc .splport-inv-calc-rvalue,
.splport-inv-calc .splport-inv-calc-rvalue-sm,
.splport-inv-calc .splport-inv-calc-schedtitle,
.splport-inv-calc .splport-inv-calc-input{line-height:1.35;}
.splport-inv-calc-inner .splport-inv-calc-h2{line-height:1.18;}
.splport-inv-calc .splport-inv-calc-qvalue,
.splport-inv-calc .splport-inv-calc-rvalue{animation-name:splport-inv-calc-value-in-unclipped;}
@keyframes splport-inv-calc-value-in-unclipped{
  from{opacity:0;transform:translateY(.4em);clip-path:inset(0 0 100% -20%);}
  to{opacity:1;transform:none;clip-path:inset(-40% -20% -40% -20%);}
}
@media(prefers-reduced-motion:reduce){
  .splport-inv-calc .splport-inv-calc-qvalue,
  .splport-inv-calc .splport-inv-calc-rvalue{animation:none;}
}

/* 2. The three control heads were min-height:1.6em, so the single label that
      wraps ("Illustrative annual rate") made its column taller and pushed its
      input below the other two. Equalise the heads and stop the value echo
      breaking across lines. Baseline alignment is kept, as in the repo. */
.splport-inv-calc .splport-inv-calc-echo{white-space:nowrap;}
@media(min-width:861px){
  .splport-inv-calc .splport-inv-calc-fieldhead{min-height:3.4rem;}
}

/* 3. Close section: `.spl-cl-sec a { color: inherit }` is (0,1,1) and was
      beating `.spl-cl-contactlink` and `.spl-cl-portal` at (0,1,0), so the
      phone, email and portal label inherited dark body ink and vanished
      against the navy field. */
.spl-cl-sec{color:var(--color-on-navy);}
.spl-cl-sec .spl-cl-contactlink,
.spl-cl-sec .spl-cl-portal{color:var(--color-on-navy);}
.spl-cl-sec .spl-cl-portal:hover{color:var(--color-navy);}

/* 4. Same Reckless leading safety for the reviews aggregate figure, which the
      repository sets to line-height:1. */
.splport-inv-ir .splport-inv-ir-rating{line-height:1.12;}

/* ===========================================================================
   5. Codex visual review F1, 2026-09-18 - restore the heading SIZE scale
      inside the ported sections.

      The site head carries
        html body h2:not(#__spl_never_1):not(#__spl_never_2):not(#__spl_never_3)
        { font-size:34px!important; line-height:1.06!important; ... }
      at specificity (3,0,2). It was written to match the production site's own
      H2 and is correct for the colleague's sections, but it flattens every
      ported heading to 34px (26px under 768px) - measured by Codex against a
      52px reference, and 75.2px for the reviews headline, which ended up
      SMALLER than the 4.9 figure beside it and inverted the hierarchy.

      These rules add one class, reaching (3,1,2), so they win inside the ported
      surfaces only. Nothing the colleague owns is touched.

      Font-family and font-weight are deliberately NOT restored: Reckless
      site-wide is intended, and only 300/400 are loaded, so a 600 would be
      faux-bold. Size, colour and space carry the hierarchy instead.
      =========================================================================== */
html body h2.splport-inv-op-heading:not(#__spl_never_1):not(#__spl_never_2):not(#__spl_never_3),
html body h2.splport-inv-calc-h2:not(#__spl_never_1):not(#__spl_never_2):not(#__spl_never_3),
html body h2.splport-inv-jn-heading:not(#__spl_never_1):not(#__spl_never_2):not(#__spl_never_3){
  font-size:var(--text-h2)!important;
  line-height:var(--leading-heading)!important;
  letter-spacing:var(--tracking-display)!important;
}

/* InvestorReviews.module.css:53 - clamp(3rem,2.2rem + 3vw,4.7rem), repo
   line-height 1.02 floored to --leading-heading for Reckless' descenders. */
html body h2.splport-inv-ir-heading:not(#__spl_never_1):not(#__spl_never_2):not(#__spl_never_3){
  font-size:clamp(3rem,2.2rem + 3vw,4.7rem)!important;
  line-height:var(--leading-heading)!important;
  letter-spacing:var(--tracking-display)!important;
}

/* ===========================================================================
   6. Codex visual review F3, 2026-09-18 - namespace collision, not a carryover.

      The site-wide stylesheet owns an OLDER calculator built on the same short
      names this port uses. Three of them land on ported elements:
        .splport-inv-calc-field  { margin-bottom:1.25rem }   -> +20px per field
        .splport-inv-calc-label  { ...; margin-bottom:.5rem } -> +8px per label
        .splport-inv-calc-result { padding:1.5rem; margin-top:1.5rem; display:grid;
                           grid-template-columns:1fr 1fr }
      Those rules are the colleague's and are still used by their own embeds
      elsewhere, so they must not be deleted. The port neutralises them on its
      own elements instead. The component classes now use the isolated splport-inv prefix.
      The colleague-owned spl-calc stylesheet remains unchanged.
      =========================================================================== */
.splport-inv-calc .splport-inv-calc-field{margin-bottom:0;}
.splport-inv-calc .splport-inv-calc-label{margin-bottom:0;}
.splport-inv-calc .splport-inv-calc-result{margin-top:0;}



: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;
}