/* Funding timing estimator. Everything is scoped to .fe-root; brand colours come from CSS variables
   that the HubSpot module sets from its Style fields (defaults = 365 Care). */

.fe-root {
  --fe-primary: #143C75;
  --fe-light: #D5F3F7;
  --fe-cta: #D13F12;
  --fe-accent: #E94A26;
  --fe-highlight: #FEE180;
  --fe-good: #AAD69D;
  --fe-cream: #FBF6DA;
  --fe-text: #1B2B45;
  --fe-muted: #3E5470;
  --fe-surface: #FFFFFF;
  --fe-font-body: inherit;
  --fe-font-heading: inherit;
  --fe-radius: 28px;

  --fe-primary-2: color-mix(in srgb, var(--fe-primary) 86%, #fff);
  --fe-primary-line: color-mix(in srgb, var(--fe-primary) 74%, #fff);
  --fe-on-primary-muted: color-mix(in srgb, #fff 74%, var(--fe-primary));
  --fe-light-line: color-mix(in srgb, var(--fe-light) 78%, var(--fe-primary));
  --fe-input-line: color-mix(in srgb, #fff 55%, var(--fe-primary));

  container: fe / inline-size;
  color: var(--fe-text);
  font-family: var(--fe-font-body);
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
}
.fe-root *, .fe-root *::before, .fe-root *::after { box-sizing: border-box; }
.fe-root h2, .fe-root h3, .fe-root p { margin: 0; }
/* Host themes style every list on the site (custom bullets via ::before, text colour, indents).
   The tool's lists are layout, so neutralise that with higher specificity than a theme's rules. */
.fe-root ul, .fe-root ol, .fe-root li { list-style: none; margin: 0; padding: 0; color: inherit; background: none; }
.fe-root li::before, .fe-root li::after { content: none !important; display: none !important; }
.fe-root strong { color: inherit; font-weight: 600; }
.fe-root a { color: var(--fe-primary); }
.fe-root button { font: inherit; }
.fe-root :focus-visible { outline: 3px solid var(--fe-accent); outline-offset: 3px; }

/* page-level hooks used by theme sections */
html.fe-ready .fe-hidden { display: none !important; }
html:not(.fe-ready) .fe-show-assessed, html:not(.fe-ready) .fe-show-approved,
html:not(.fe-ready) .fe-show-funded, html:not(.fe-ready) .fe-after-calc { display: none !important; }

/* ---------- buttons ---------- */
.fe-root .fe-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 26px; border: 0; border-radius: 999px;
  font-size: 17px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .15s, transform .15s; }
.fe-root .fe-btn:active { transform: translateY(1px); }
.fe-root .fe-btn-primary { background: var(--fe-primary); color: #fff; align-self: flex-start; }
.fe-root .fe-btn-primary:hover { background: color-mix(in srgb, var(--fe-primary) 85%, #000); color: #fff; }
.fe-root .fe-btn-cta, .fe-root .fe-btn-next { background: var(--fe-cta); color: #fff; }
.fe-root .fe-btn-cta:hover, .fe-root .fe-btn-next:hover { background: color-mix(in srgb, var(--fe-cta) 85%, #000); color: #fff; }
.fe-root .fe-btn-next { min-height: 48px; padding: 0 20px 0 24px; font-weight: 700; margin-left: auto; flex-shrink: 0; }
.fe-root .fe-link-btn { flex-shrink: 0; min-height: 44px; padding: 0 4px; border: 0; background: none; color: #fff; font-size: 15px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fe-root .fe-link-dark { color: var(--fe-primary); min-height: 32px; font-size: 14px; }
.fe-root .fe-help-btn, .fe-root .fe-info-link { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0; border: 0; background: none;
  color: var(--fe-primary); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fe-root .fe-info-link { margin-top: auto; align-self: flex-start; gap: 8px; }
.fe-root .fe-info-link svg, .fe-root .fe-help-btn svg { flex-shrink: 0; }

/* ---------- start ---------- */
.fe-start-head { display: flex; flex-direction: column; gap: 12px; padding: 0 0 40px; }
.fe-start-notyou { margin-top: 6px; font-size: 14px; color: var(--fe-muted); display: flex; gap: 6px; align-items: baseline; }
.fe-start-title { font-family: var(--fe-font-heading); font-size: clamp(34px, 5cqi, 56px); line-height: 1.05; font-weight: 500; color: var(--fe-primary); letter-spacing: -0.01em; }
.fe-start-intro { font-size: 19px; color: var(--fe-muted); }
.fe-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 48px 32px; background: var(--fe-light); border-radius: var(--fe-radius); }
.fe-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 0 16px; border-right: 1px solid var(--fe-light-line); }
.fe-card:last-child { border-right: 0; }
.fe-card-title { font-family: var(--fe-font-heading); font-size: 28px; line-height: 1.15; font-weight: 500; color: var(--fe-primary); }
.fe-card-text { max-width: 300px; min-height: 48px; font-size: 16px; color: var(--fe-muted); }
.fe-card .fe-btn { align-self: center; min-height: 48px; padding: 0 24px; font-size: 16px; }
.fe-card-img { display: block; max-width: 220px; width: 70%; height: auto; margin-top: 24px; }

/* ---------- path layout ---------- */
.fe-path { display: flex; flex-direction: column; gap: 28px; }
.fe-root .fe-back { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 44px; font-size: 16px; font-weight: 600; text-decoration: none; }
.fe-head { display: flex; flex-direction: column; gap: 14px; margin-top: -12px; }
.fe-pill { align-self: flex-start; padding: 6px 14px; border-radius: 999px; background: var(--fe-light); color: var(--fe-primary); font-size: 14px; font-weight: 600; }
.fe-title { font-family: var(--fe-font-heading); font-size: clamp(32px, 4.4cqi, 52px); line-height: 1.05; font-weight: 500; color: var(--fe-primary); letter-spacing: -0.01em; }
.fe-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--fe-light); border-radius: var(--fe-radius); }
.fe-left { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 22px; padding: 28px 42px 32px 32px; }
.fe-right, .fe-right h2, .fe-right h3, .fe-right p, .fe-right li, .fe-right strong { color: #fff; }
.fe-right { scroll-margin-top: var(--fe-scroll-offset, 96px); display: flex; flex-direction: column; padding: 36px 32px 32px 48px; background: var(--fe-primary); border-radius: var(--fe-radius); color: #fff; min-height: 460px; }
.fe-right > * { flex-grow: 1; }
.fe-disclaimer { max-width: 620px; margin-left: auto !important; font-size: 13px; line-height: 1.5; color: var(--fe-muted); text-align: right; }

/* ---------- tabs ---------- */
  font-size: 15px; font-weight: 500; text-decoration: none; }

/* ---------- fields ---------- */
.fe-field { display: flex; flex-direction: column; gap: 8px; }
.fe-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fe-label { font-size: 17px; font-weight: 600; color: var(--fe-primary); }
.fe-label-sm { font-size: 14px; }
.fe-label-hint { font-weight: 400; font-size: 14px; color: var(--fe-muted); }
.fe-hint { font-size: 14px; color: var(--fe-muted); }
.fe-hint-lg { font-size: 15px; color: var(--fe-muted); }
.fe-error { font-size: 14px; font-weight: 600; color: #B42318; }
.fe-input-wrap { position: relative; display: flex; flex-direction: column; }
.fe-root .fe-input { width: 100%; height: 52px; padding: 0 16px; border: 1.5px solid var(--fe-input-line); border-radius: 14px; background: #fff;
  font: inherit; font-size: 17px; color: var(--fe-primary); }
.fe-root .fe-input-sm { height: 46px; font-size: 16px; border-radius: 12px; }
.fe-root .fe-input.has-error { border-color: #B42318; }
.fe-arrow { position: absolute; right: -68px; top: 50%; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; background: var(--fe-accent);
  color: #fff; display: flex; align-items: center; justify-content: center; }
.fe-continue-row { flex-direction: row; align-items: center; }
.fe-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.fe-root .fe-chip { min-width: 88px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: #fff; color: var(--fe-primary);
  font-size: 14px; font-weight: 500; cursor: pointer; }
.fe-root .fe-chip.is-on { background: var(--fe-primary); color: #fff; }
.fe-level { gap: 6px; }
.fe-level-value { flex-shrink: 0; font-size: 15px; color: #5B6F88; }
.fe-level.is-set .fe-level-value { color: var(--fe-primary); }
.fe-level input[type=range] { width: 100%; margin: 4px 0 0; accent-color: #8FA6C4; opacity: .45; }
.fe-level.is-set input[type=range] { accent-color: var(--fe-primary); opacity: 1; }
.fe-level-ticks { display: flex; justify-content: space-between; font-size: 13px; color: var(--fe-muted); opacity: .45; }
.fe-level.is-set .fe-level-ticks { opacity: 1; }
.fe-more-time { display: flex; flex-direction: column; gap: 2px; font-size: 15px; color: var(--fe-muted); }
.fe-more-time strong { color: var(--fe-primary); }

/* details step (gated paths) */
.fe-details { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.fe-subtitle { font-family: var(--fe-font-heading); font-size: 26px; line-height: 1.15; font-weight: 500; color: var(--fe-primary); }
.fe-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.fe-small { font-size: 13px; line-height: 1.5; color: var(--fe-muted); }
.fe-small a { font-weight: 600; }
.fe-thanks { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fe-thanks > div { display: flex; flex-direction: column; gap: 4px; }

/* ---------- results ---------- */
.fe-result { display: flex; flex-direction: column; gap: 20px; height: 100%; }
.fe-pop { display: flex; flex-direction: column; animation: fe-pop .3s ease-out; }
.fe-lead { font-size: 16px; color: var(--fe-on-primary-muted); }
.fe-big { font-family: var(--fe-font-heading); font-size: 44px; line-height: 1.05; font-weight: 500; margin-top: -12px; }
.fe-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fe-on-primary-muted); margin-bottom: -10px; }
.fe-outcomes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fe-outcomes li { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: 16px; padding: 14px 20px; background: var(--fe-primary-2); border-radius: 16px; }
.fe-outcomes li > span:first-child { display: flex; flex-direction: column; }
.fe-outcomes strong { font-size: 17px; }
.fe-outcomes li > span:first-child span { font-size: 14px; color: var(--fe-on-primary-muted); }
.fe-outcome-when { font-family: var(--fe-font-heading); font-size: 26px; font-weight: 500; text-align: right; }
.fe-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; }
.fe-split-a, .fe-split-b { display: flex; flex-direction: column; gap: 4px; }
.fe-split-b { padding-left: 24px; border-left: 1px solid var(--fe-primary-line); }
.fe-huge { font-family: var(--fe-font-heading); font-size: 80px; line-height: .95; font-weight: 500; white-space: nowrap; }
.fe-funded .fe-huge { font-size: 96px; }
.fe-huge.is-word { font-size: 30px; line-height: 1.2; }
.fe-unit { font-family: var(--fe-font-heading); font-size: 20px; line-height: 1.2; font-weight: 500; white-space: nowrap; }
.fe-funded .fe-unit { font-size: 26px; }
.fe-date { font-family: var(--fe-font-heading); font-size: 34px; line-height: 1.1; font-weight: 500; }
.fe-date > span { display: block; }
.fe-funded .fe-date { font-size: 40px; }
.fe-sub { margin-top: auto; font-size: 15px; line-height: 1.45; color: color-mix(in srgb, #fff 86%, var(--fe-primary)); }
.fe-timeline { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.fe-wait { font-size: 14px; color: var(--fe-on-primary-muted); }
.fe-wait strong { color: #fff; }
.fe-bar { position: relative; height: 10px; background: var(--fe-primary-line); border-radius: 5px; }
.fe-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--fe-highlight); border-radius: 5px; }
.fe-bar-window { position: absolute; top: 0; bottom: 0; background: var(--fe-good); border-radius: 5px; }
.fe-bar-window.is-overdue { background: var(--fe-accent); }
.fe-bar-today { position: absolute; top: -6px; height: 22px; width: 3px; margin-left: -1px; background: #fff; border-radius: 2px; }
.fe-bar-deadline { height: 12px; border-radius: 6px; }
.fe-bar-used { position: absolute; left: 0; top: 0; bottom: 0; background: #67BEDA; border-radius: 6px; }
.fe-bar-end { position: absolute; right: 0; top: 0; bottom: 0; width: 4%; background: var(--fe-accent); border-radius: 6px; }
.fe-bar-labels { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--fe-on-primary-muted); }
.fe-bar-labels strong { color: #fff; }
.fe-result-foot { margin-top: auto; display: flex; align-items: center; gap: 16px; }
.fe-note { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.5; color: var(--fe-on-primary-muted); }
.fe-past-note, .fe-right .fe-past-note strong { color: var(--fe-primary); }
.fe-past-note { flex: 1 1 auto; min-width: 0; padding: 12px 14px; background: var(--fe-cream); color: var(--fe-primary); border-radius: 12px; font-size: 14px; line-height: 1.4; }
.fe-warning { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: color-mix(in srgb, #fff 86%, var(--fe-primary)); }
.fe-warning svg { flex-shrink: 0; margin-top: 1px; color: #FFB089; }
.fe-warning strong { color: #fff; }
.fe-row { display: flex; align-items: center; gap: 16px; padding-top: 20px; border-top: 1px solid var(--fe-primary-line); }
.fe-row-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--fe-primary-2); color: #67BEDA; display: flex; align-items: center; justify-content: center; }
.fe-row-copy { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.45; color: var(--fe-on-primary-muted); }
.fe-row-copy strong { font-size: 17px; color: #fff; overflow-wrap: anywhere; }

/* ---------- teaser (before calculation) ---------- */
.fe-teaser { position: relative; display: flex; flex-direction: column; min-height: 400px; }
.fe-teaser-preview { display: flex; flex-direction: column; flex-grow: 1; filter: blur(3px); opacity: .7; user-select: none; pointer-events: none; }
.fe-teaser-card { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: #fff;
  border-radius: 18px; color: var(--fe-primary); box-shadow: 0 10px 30px rgba(8, 25, 52, .35); }
.fe-teaser-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--fe-light); display: flex; align-items: center; justify-content: center; }
.fe-teaser-copy { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.45; color: var(--fe-muted); }
.fe-teaser-copy strong { font-family: var(--fe-font-heading); font-size: 20px; line-height: 1.2; font-weight: 500; color: var(--fe-primary); }

/* ---------- calculating ---------- */
.fe-calc { justify-content: center; gap: 26px; min-height: 400px; }
.fe-calc-head { display: flex; align-items: center; gap: 16px; }
.fe-calc-ring { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: 4px solid var(--fe-primary-line); border-top-color: var(--fe-highlight); animation: fe-spin .9s linear infinite; }
.fe-calc-title { font-family: var(--fe-font-heading); font-size: 30px; line-height: 1.15; font-weight: 500; }
.fe-calc-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.fe-calc-steps li { display: flex; align-items: center; gap: 12px; font-size: 16px; color: #8FA6C4; transition: color .2s; }
.fe-calc-steps li.is-active, .fe-calc-steps li.is-done { color: #fff; }
.fe-calc-dot { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--fe-primary-line); display: flex; align-items: center; justify-content: center; color: var(--fe-primary); }
.is-active .fe-calc-dot { border-color: var(--fe-highlight); }
.is-done .fe-calc-dot { border-color: var(--fe-highlight); background: var(--fe-highlight); }
.fe-calc-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--fe-highlight); animation: fe-pulse 1s ease-in-out infinite; }
.fe-calc-bar { height: 8px; background: var(--fe-primary-line); border-radius: 4px; overflow: hidden; }
.fe-calc-bar span { display: block; height: 100%; background: var(--fe-highlight); border-radius: 4px; animation: fe-fill 2.5s cubic-bezier(.4,.1,.3,1) forwards; }

/* ---------- help popup ---------- */
.fe-modal-backdrop { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(8, 25, 52, .55); overflow-y: auto; }
.fe-modal { position: relative; width: min(980px, 100%); display: grid; grid-template-columns: 430px minmax(0, 1fr); gap: 40px; padding: 40px;
  background: #fff; border-radius: var(--fe-radius); box-shadow: 0 30px 80px rgba(8, 25, 52, .4); color: var(--fe-text); margin: auto; }
.fe-root .fe-modal-close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #EEF5F8;
  color: var(--fe-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.fe-letter { display: flex; flex-direction: column; gap: 12px; padding: 26px 26px 26px 30px; border: 1px solid #DCE4EC; border-radius: 14px; box-shadow: 0 8px 24px rgba(20, 60, 117, .12); }
.fe-letter-top { display: flex; justify-content: space-between; align-items: flex-start; }
.fe-letter-lines { display: flex; flex-direction: column; gap: 6px; width: 50%; }
.fe-letter-logo { width: 52px; height: 30px; border-radius: 6px; background: #EEF2F6; }
.fe-letter-bar { display: block; height: 7px; background: #DCE4EC; border-radius: 4px; }
.fe-letter-title { margin-top: 6px; font-family: var(--fe-font-heading); font-size: 18px; font-weight: 500; color: var(--fe-primary); }
.fe-letter-hl { position: relative; display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px 9px 20px; border: 2px solid var(--fe-accent);
  border-radius: 10px; background: color-mix(in srgb, var(--fe-accent) 7%, #fff); font-size: 13px; }
.fe-letter-field { color: #5B6F88; }
.fe-letter-badge, .fe-num { width: 26px; height: 26px; border-radius: 50%; background: var(--fe-accent); color: #fff; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fe-letter-badge { position: absolute; left: -14px; top: 50%; margin-top: -13px; }
.fe-modal-copy { display: flex; flex-direction: column; gap: 18px; }
.fe-modal-title { font-family: var(--fe-font-heading); font-size: 28px; line-height: 1.15; font-weight: 500; color: var(--fe-primary); padding-right: 40px; }
.fe-modal-intro { font-size: 15px; color: var(--fe-muted); margin-top: -10px !important; }
.fe-modal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.fe-modal-list li { display: flex; gap: 14px; align-items: flex-start; }
.fe-modal-list .fe-num { width: 28px; height: 28px; font-size: 14px; }
.fe-modal-list li > span:last-child { display: flex; flex-direction: column; gap: 2px; font-size: 15px; color: var(--fe-muted); }
.fe-modal-list strong { font-size: 17px; color: var(--fe-primary); }
.fe-modal-note { font-size: 13px; color: #5B6F88; }
.fe-modal .fe-btn { margin-top: auto; }

/* ---------- motion ---------- */
/* ---------- motion: subtle reveals and feedback (all disabled under prefers-reduced-motion) ---------- */
.fe-reveal { animation: fe-rise .45s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--fe-delay, 0ms); }
.fe-path { animation: fe-fade .35s ease-out both; }
.fe-panels .fe-left { animation: fe-rise .4s cubic-bezier(.2,.7,.2,1) both; }
.fe-panels .fe-right { animation: fe-rise .4s cubic-bezier(.2,.7,.2,1) .08s both; }
.fe-pop .fe-outcomes li { animation: fe-rise .4s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(120ms + var(--fe-i, 0) * 70ms); }
.fe-pop .fe-split-a { animation: fe-rise .4s cubic-bezier(.2,.7,.2,1) both; }
.fe-pop .fe-split-b { animation: fe-rise .4s cubic-bezier(.2,.7,.2,1) .1s both; }
.fe-pop .fe-timeline, .fe-pop .fe-result-foot, .fe-pop .fe-row { animation: fe-fade .4s ease-out .25s both; }
.fe-pop .fe-bar-fill, .fe-pop .fe-bar-used { transform-origin: left; animation: fe-grow .7s cubic-bezier(.2,.7,.2,1) .3s both; }
.fe-pop .fe-bar-window { animation: fe-fade .4s ease-out .8s both; }
.fe-pop .fe-bar-today { animation: fe-fade .3s ease-out 1s both; }
.fe-root .fe-btn { transition: background-color .15s, transform .15s, box-shadow .15s; }
.fe-root .fe-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(0,0,0,.35); }
.fe-root .fe-btn:active { transform: translateY(0) scale(.98); box-shadow: none; }
.fe-root .fe-btn svg { transition: transform .2s; }
.fe-root .fe-btn:hover svg { transform: translateX(2px); }
.fe-root .fe-chip { transition: background-color .15s, color .15s, transform .15s; }
.fe-root .fe-chip:hover { background: color-mix(in srgb, #fff 70%, var(--fe-primary)); }
.fe-root .fe-chip:active { transform: scale(.96); }
.fe-root .fe-chip.is-on { animation: fe-select .25s ease-out; }
.fe-input-wrap:focus-within .fe-arrow { transform: translateX(3px); }
.fe-arrow { transition: transform .2s, background-color .2s; }
.fe-input { transition: border-color .15s, box-shadow .15s; }
.fe-input:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--fe-primary) 18%, transparent); }
.fe-level input[type=range]::-webkit-slider-thumb { transition: transform .15s; }
.fe-level input[type=range]:hover::-webkit-slider-thumb, .fe-level input[type=range]:active::-webkit-slider-thumb { transform: scale(1.15); }
.fe-error { animation: fe-shake .3s ease-out; }
.fe-level.has-error input[type=range] { outline: 2px solid var(--fe-accent); outline-offset: 6px; border-radius: 4px; }
@keyframes fe-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fe-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fe-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fe-select { 0% { transform: scale(.94); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes fe-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes fe-spin { to { transform: rotate(360deg); } }
@keyframes fe-fill { from { width: 0; } to { width: 100%; } }
@keyframes fe-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes fe-pop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .fe-root *, .fe-root *::before, .fe-root *::after { animation: none !important; transition: none !important; }
  .fe-root .fe-pop, .fe-calc-ring, .fe-calc-pulse { animation: none; }
  .fe-calc-bar span { animation-duration: .8s; }
}

/* ---------- narrow containers (tablet / phone) ---------- */
@container fe (max-width: 860px) {
  .fe-cards { grid-template-columns: 1fr; padding: 8px 24px; }
  .fe-card { border-right: 0; border-bottom: 1px solid var(--fe-light-line); padding: 28px 8px; }
  .fe-card:last-child { border-bottom: 0; }
  .fe-card-img { max-width: 160px; margin-top: 12px; }
  .fe-panels { grid-template-columns: 1fr; }
  .fe-left { padding: 24px 24px 28px; }
  .fe-right { padding: 28px 24px; min-height: 0; }
  .fe-arrow { display: none; }
  .fe-teaser, .fe-calc { min-height: 360px; }
  .fe-disclaimer { text-align: left; margin-left: 0 !important; }
}
@container fe (max-width: 520px) {
  .fe-grid-2 { grid-template-columns: 1fr; }
  .fe-split { grid-template-columns: 1fr; gap: 16px; }
  .fe-split-b { padding-left: 0; border-left: 0; padding-top: 16px; border-top: 1px solid var(--fe-primary-line); }
  .fe-huge { font-size: 64px; }
  .fe-funded .fe-huge { font-size: 72px; }
  .fe-date, .fe-funded .fe-date { font-size: 30px; }
  .fe-big { font-size: 34px; }
  .fe-outcomes li { grid-template-columns: 1fr; gap: 4px; }
  .fe-outcome-when { text-align: left; font-size: 22px; }
  .fe-result-foot, .fe-row { flex-wrap: wrap; }
  .fe-root .fe-btn-next { margin-left: 0; }
  .fe-thanks { flex-direction: column; }
  .fe-modal { grid-template-columns: 1fr; padding: 28px 22px; gap: 24px; }
  .fe-letter { display: none; }
  .fe-calc-title { font-size: 24px; }
  .fe-label-row { flex-wrap: wrap; row-gap: 2px; }
  .fe-root .fe-help-btn { white-space: nowrap; }
}