/* /invest - inv-calc styles, moved out of the Webflow embed 2026-09-25. */

/* 2026-09-25: only the heading above the calculator; main-heading size. */
html body:not(:has(.lp-hero)) .splport-inv-calc-h2:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e){font-size:clamp(43px,6.94vw,88px)!important;line-height:1.04!important}
html body .splport-inv-calc-intro:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e){max-width:none!important}
/* ===========================================================================
   Investor income calculator.
   Ported declaration-for-declaration from:
     src/components/invest/IncomeCalculator.module.css
     src/app/invest/invest.module.css  (.calculator/.calcInner/.calcIntro/
                                        .calcControl/.calcEyebrow/.calcMeta)
     src/app/globals.css               (.eyebrow)

   This REPLACES an earlier port that substituted the Webflow palette for the
   repository tokens. That is why the navy band was pure white instead of the
   warm-white --color-on-navy #f1e7d5, why the result figures were the wrong
   size, and why the cell spacing was off. Every value below now comes from the
   repository tokens installed at :root on this page.

   Structure is the repository's, not a reinvention: each field is a label, a
   serif echo of the current value, a text input inside a bordered wrap with a
   prefix/suffix, a quick-adjust range beneath it, and a hint. The earlier port
   had dropped the text inputs entirely and invented an orange accent bar and a
   clock row in the result band; neither exists in the repository.
   =========================================================================== */
.splport-inv-calc-sec{background-color:var(--color-paper-warm);padding-block:var(--space-9);width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:none;}
/* Shell width follows this page's existing 1160px rhythm rather than the repo's
   --container-max 1400px, so the section lines up with the not-yet-ported
   sections above and below. Everything inside is repo-exact. */
.splport-inv-calc-inner{width:100%;box-sizing:border-box;max-width:var(--container-max);margin-inline:auto;padding-inline:max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));display:grid;grid-template-columns:1fr;gap:var(--space-7);align-items:start;}
.splport-inv-calc-intro{display:flex;flex-direction:column;gap:var(--space-3);min-width:0;}
@media(min-width:1000px){.splport-inv-calc-inner{row-gap:var(--space-6);}.splport-inv-calc-intro{max-width:46rem;}}
.splport-inv-calc-eyebrow{font-family:var(--font-sans);font-size:var(--text-eyebrow);font-weight:600;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--color-orange);margin:0;}
.splport-inv-calc-h2{font-family:var(--font-serif);font-weight:400;font-size:var(--text-h2);line-height:var(--leading-heading);letter-spacing:var(--tracking-display);color:var(--color-navy);max-width:18ch;margin:0;}
.splport-inv-calc-lede{font-family:var(--font-sans);color:var(--color-ink-soft);font-size:var(--text-body-lg);line-height:var(--leading-body);max-width:44ch;margin:0;}
.splport-inv-calc-meta{font-family:var(--font-sans);font-size:var(--text-meta);color:var(--color-ink-soft);margin-top:var(--space-2);}
.splport-inv-calc-control{min-width:0;padding:var(--space-6);background:var(--color-white);border:1px solid var(--color-paper-deep);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);}

/* ---------------- IncomeCalculator.module.css ---------------- */
.splport-inv-calc{display:flex;flex-direction:column;gap:var(--space-6);min-width:0;max-width:100%;font-family:var(--font-sans);}
.splport-inv-calc *{box-sizing:border-box;}
.splport-inv-calc-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);min-width:0;}
.splport-inv-calc-field{display:flex;flex-direction:column;gap:var(--space-2);min-width:0;}
.splport-inv-calc-fieldhead{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);min-height:1.6em;}
.splport-inv-calc-label{font-family:var(--font-sans);font-size:var(--text-body);font-weight:500;color:var(--color-ink);}
.splport-inv-calc-echo{font-family:var(--font-serif);font-size:var(--text-h4);color:var(--color-navy);font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-display);}
.splport-inv-calc-inputwrap{display:flex;align-items:center;gap:var(--space-2);background-color:var(--color-white);border:1.5px solid var(--color-paper-deep);border-radius:var(--radius-sm);padding-inline:var(--space-4);transition:border-color var(--dur-fast) var(--ease-out);min-width:0;}
.splport-inv-calc-inputwrap:focus-within{border-color:var(--color-orange);outline:2px solid var(--color-focus-ring);outline-offset:2px;}
.splport-inv-calc-prefix,.splport-inv-calc-suffix{font-family:var(--font-sans);font-size:var(--text-body-lg);color:var(--color-ink-soft);flex:none;}
.splport-inv-calc-input{flex:1;min-width:0;height:52px;border:none;background:transparent;outline:none;font-family:var(--font-serif);font-size:var(--text-h4);color:var(--color-ink);font-variant-numeric:tabular-nums;}
.splport-inv-calc-input:focus,.splport-inv-calc-input:focus-visible{outline:none;box-shadow:none;}
.splport-inv-calc-input::placeholder{font-family:var(--font-sans);font-size:var(--text-body);color:var(--color-ink-muted);}
.splport-inv-calc-hint{font-family:var(--font-sans);font-size:var(--text-meta);color:var(--color-ink-soft);max-width:40ch;line-height:1.45;margin:0;}

/* Range: orange selected progress, navy remainder */
.splport-inv-calc-range{--track-h:3px;--thumb:22px;appearance:none;-webkit-appearance:none;width:100%;height:44px;margin:0;background:transparent;cursor:pointer;display:block;}
.splport-inv-calc-range::-webkit-slider-runnable-track{height:var(--track-h);border-radius:999px;background:linear-gradient(to right,var(--color-orange) 0 var(--pct),var(--color-navy) var(--pct) 100%);}
.splport-inv-calc-range::-moz-range-track{height:var(--track-h);border-radius:999px;background:linear-gradient(to right,var(--color-orange) 0 var(--pct),var(--color-navy) var(--pct) 100%);}
.splport-inv-calc-range::-webkit-slider-thumb{-webkit-appearance:none;width:var(--thumb);height:var(--thumb);margin-top:calc((var(--track-h) - var(--thumb)) / 2);border-radius:50%;background:var(--color-orange);border:3px solid var(--color-white);box-shadow:var(--shadow-sm);transition:transform var(--dur-fast) var(--ease-out);}
.splport-inv-calc-range::-moz-range-thumb{width:var(--thumb);height:var(--thumb);border-radius:50%;background:var(--color-orange);border:3px solid var(--color-white);box-shadow:var(--shadow-sm);}
.splport-inv-calc-range:active::-webkit-slider-thumb{transform:scale(1.08);}
.splport-inv-calc-range:focus-visible{outline:none;}
.splport-inv-calc-range:focus-visible::-webkit-slider-thumb{outline:2px solid var(--color-focus-ring);outline-offset:2px;}
.splport-inv-calc-range:focus-visible::-moz-range-thumb{outline:2px solid var(--color-focus-ring);outline-offset:2px;}
.splport-inv-calc-scale{display:flex;justify-content:space-between;font-family:var(--font-sans);font-size:var(--text-meta);color:var(--color-ink-muted);font-variant-numeric:tabular-nums;}

/* ---------------- Schedule ---------------- */
.splport-inv-calc-schedwrap{display:flex;flex-direction:column;gap:var(--space-4);}
.splport-inv-calc-schedhead{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;}
.splport-inv-calc-schedtitle{font-family:var(--font-serif);font-weight:400;font-size:var(--text-h4);color:var(--color-ink);margin:0;}
.splport-inv-calc-schedpaid{font-family:var(--font-sans);font-size:var(--text-meta);color:var(--color-ink-soft);margin:0;}
.splport-inv-calc-sched{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-4);}
.splport-inv-calc-q{position:relative;flex:1 1 130px;min-width:120px;display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-4);background-color:var(--color-eucalyptus);border:1px solid var(--color-eucalyptus-deep);border-radius:var(--radius-md);animation:splport-inv-calc-quarter-in var(--dur-base) var(--ease-out) both;animation-delay:calc(var(--i) * 70ms);}
.splport-inv-calc-q:not(:last-child)::after{content:"";position:absolute;top:50%;right:calc(var(--space-4) * -1);width:var(--space-4);height:2px;background-color:var(--color-eucalyptus-strong);transform:translateY(-50%);}
@keyframes splport-inv-calc-quarter-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.splport-inv-calc-qlabel{font-family:var(--font-sans);font-size:var(--text-meta);font-weight:700;letter-spacing:.06em;color:var(--color-eucalyptus-strong);}
.splport-inv-calc-qvalue{font-family:var(--font-serif);font-size:var(--text-h4);color:var(--color-ink);font-variant-numeric:tabular-nums;animation:splport-inv-calc-value-in var(--dur-base) var(--ease-out) both;}
.splport-inv-calc-qmeta{font-family:var(--font-sans);font-size:.72rem;color:var(--color-eucalyptus-ink);}
.splport-inv-calc-empty{padding:var(--space-6);background-color:var(--color-white);border:1px dashed var(--color-paper-deep);border-radius:var(--radius-md);color:var(--color-ink-soft);font-size:var(--text-body);text-align:center;margin:0;}
@keyframes splport-inv-calc-value-in{from{opacity:0;transform:translateY(.4em);clip-path:inset(0 0 100% 0);}to{opacity:1;transform:none;clip-path:inset(0 0 0 0);}}

/* ---------------- Navy result band ---------------- */
.splport-inv-calc-result{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:var(--space-5);background-color:var(--color-navy);border-radius:var(--radius-lg);padding:var(--space-6);}
.splport-inv-calc-rcell{display:flex;flex-direction:column;gap:var(--space-1);min-width:0;}
.splport-inv-calc-rlabel{font-family:var(--font-sans);font-size:var(--text-meta);font-weight:600;letter-spacing:.03em;color:var(--color-on-navy-muted);}
.splport-inv-calc-rvalue{font-family:var(--font-serif);font-size:var(--text-h3);color:var(--color-on-navy);font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-display);animation:splport-inv-calc-value-in var(--dur-base) var(--ease-out) both;}
.splport-inv-calc-rvalue-sm{font-family:var(--font-serif);font-size:var(--text-h4);color:var(--color-on-navy);}
.splport-inv-calc-rdivider{width:1px;align-self:stretch;background-color:var(--color-navy-hairline);}
.splport-inv-calc-ractions{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-5);margin-top:var(--space-2);padding-top:var(--space-5);border-top:1px solid var(--color-navy-hairline);}
.splport-inv-calc-rlink{font-family:var(--font-sans);color:var(--color-on-navy);font-weight:600;text-underline-offset:3px;text-decoration:underline;text-decoration-color:var(--color-orange);text-decoration-thickness:2px;}
.splport-inv-calc-rlink:hover{color:var(--color-orange);}
.splport-inv-calc-rlink:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:3px;}
.splport-inv-calc-fine{font-family:var(--font-sans);font-size:var(--text-meta);color:var(--color-ink-soft);max-width:72ch;line-height:1.5;margin:0;}
.splport-inv-calc-finelink{color:var(--color-ink);text-underline-offset:2px;}
.splport-inv-calc-finelink:hover{color:var(--color-orange);}

/* ---------------- Responsive ---------------- */
@media(max-width:860px){
  .splport-inv-calc-controls{grid-template-columns:1fr;gap:var(--space-5);}
  .splport-inv-calc-result{grid-template-columns:1fr;gap:var(--space-4);}
  .splport-inv-calc-rdivider{width:100%;height:1px;}
}
@media(prefers-reduced-motion:reduce){
  .splport-inv-calc-q,.splport-inv-calc-qvalue,.splport-inv-calc-rvalue{animation:none;}
  .splport-inv-calc-range::-webkit-slider-thumb{transition:none;}
}
/* invest.module.css mobile calcControl spacing. */
@media(max-width:620px){.splport-inv-calc-control{padding:var(--space-5);}}