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

/* Invest FAQ - ported from the repository's shared FAQ grammar
   (src/components/invest/InvestFaq.module.css, itself mirroring BorrowFaq) plus
   AnimatedCampfire.module.css for the illustration.

   What the port fixes in the previous implementation:
     - rows were <div onclick>, so they had no keyboard access and no
       aria-expanded; they are now semantic <button>s inside headings
     - the reveal animated max-height 0 -> 1200px, which eases against a height
       the content never reaches (fast start, visible stall). The repo animates
       grid-template-rows 0fr -> 1fr, which resolves to the real content height
     - open and close ran at the same duration; the repo closes faster than it
       opens (200ms close / 260ms open)
     - collapsed answers stayed in the accessibility tree; they are now inert
     - no reduced-motion handling
   Added from the repo: the travelling orange rule, the plus-to-minus icon
   rotation cross-fade, the question nudge on hover/focus, and the settle on the
   revealed answer.

   All eight questions and answers are the existing Webflow copy, unchanged. */

.splport-inv-faq *{box-sizing:border-box;margin:0;padding:0;}
.splport-inv-faq{font-family:var(--font-sans);color:var(--color-navy);line-height:1.6;-webkit-font-smoothing:antialiased;width:100%;display:block;background:var(--color-paper);}
.splport-inv-faq-sec{padding:clamp(56px,7vw,96px) 0;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:none;}
.splport-inv-faq-inn{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));}

/* Section composition from the repo's .questions stage: intro + illustration on
   the left, the question list on the right. */
.splport-inv-faq-stage{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start;}
.splport-inv-faq-intro{position:sticky;top:96px;}
.splport-inv-faq-ew{font-size:.7rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--color-navy);display:flex;align-items:center;gap:.6rem;}
.splport-inv-faq-ew::before{content:"";display:block;width:20px;height:1px;background:var(--color-orange);}
.splport-inv-faq-cf{margin-top:1.75rem;max-width:300px;}

/* Rows */
.splport-inv-faq-list{list-style:none;display:flex;flex-direction:column;}
.splport-inv-faq-item{border-bottom:1px solid var(--color-paper-deep);}
.splport-inv-faq-item:first-child{border-top:1px solid var(--color-paper-deep);}
.splport-inv-faq-h{margin:0;font-family:var(--font-sans);font-weight:400;}
.splport-inv-faq-btn{position:relative;width:100%;display:grid;grid-template-columns:1fr auto;align-items:center;gap:1rem;padding:1.5rem 0;background:none;border:none;cursor:pointer;text-align:left;font-family:inherit;color:inherit;}
.splport-inv-faq-btn:focus-visible{outline:3px solid var(--color-orange);outline-offset:3px;}
.splport-inv-faq-q{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--color-ink);line-height:1.25;transition:transform 200ms cubic-bezier(.16,1,.3,1),color 200ms cubic-bezier(.4,0,.2,1);}
.splport-inv-faq-btn:hover .splport-inv-faq-q,.splport-inv-faq-btn:focus-visible .splport-inv-faq-q{transform:translateX(4px);color:var(--color-navy);}
.splport-inv-faq-item.is-open .splport-inv-faq-q{color:var(--color-orange);}
/* Travelling rule */
.splport-inv-faq-rule{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--color-orange);transform:scaleX(0);transform-origin:left center;transition:transform 200ms cubic-bezier(.16,1,.3,1);}
.splport-inv-faq-btn:hover .splport-inv-faq-rule,.splport-inv-faq-btn:focus-visible .splport-inv-faq-rule,.splport-inv-faq-item.is-open .splport-inv-faq-rule{transform:scaleX(1);}
/* Phosphor CaretDown (regular), rotated for the expanded state. */
.splport-inv-faq-ico{position:relative;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1.5px solid var(--color-ink-muted);border-radius:50%;color:var(--color-ink-soft);flex:none;transition:border-color 200ms cubic-bezier(.4,0,.2,1),color 200ms cubic-bezier(.4,0,.2,1),transform 120ms cubic-bezier(.16,1,.3,1);}
.splport-inv-faq-btn:active .splport-inv-faq-ico{transform:scale(.9);}
.splport-inv-faq-item.is-open .splport-inv-faq-ico{border-color:var(--color-orange);color:var(--color-orange);}
.splport-inv-faq-caret{position:absolute;width:.95em;height:.95em;transform:rotate(0);transition:transform 200ms cubic-bezier(.16,1,.3,1);}
.splport-inv-faq-item.is-open .splport-inv-faq-caret{transform:rotate(180deg);transition-duration:260ms;}
/* Height reveal that resolves to real content height, close faster than open */
.splport-inv-faq-col{display:grid;grid-template-rows:0fr;transition:grid-template-rows 200ms cubic-bezier(.16,1,.3,1);}
.splport-inv-faq-item.is-open .splport-inv-faq-col{grid-template-rows:1fr;transition-duration:260ms;}
.splport-inv-faq-col-in{overflow:hidden;min-height:0;}
.splport-inv-faq-a{padding:0 0 2rem;color:var(--color-ink);font-size:1.125rem;line-height:1.7;max-width:66ch;}
.splport-inv-faq-a p+p{margin-top:.75rem;}
.splport-inv-faq-item.is-open .splport-inv-faq-a{animation:splport-inv-faq-settle 200ms cubic-bezier(.16,1,.3,1) 80ms both;}
@keyframes splport-inv-faq-settle{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.splport-inv-faq-foot{margin-top:1.75rem;}
.splport-inv-faq-link{font-size:.82rem;font-weight:600;color:var(--color-navy);text-decoration:none;border-bottom:2px solid var(--color-orange);padding-bottom:2px;transition:color .2s;}
.splport-inv-faq-link:hover{color:var(--color-orange);}
.splport-inv-faq-link:focus-visible{outline:3px solid var(--color-orange);outline-offset:3px;}

/* Campfire - AnimatedCampfire.module.css, invest variant. The same image is
   layered three times: base, a radial glow, and two clip-path isolated flame
   copies. The base image is always visible, so the illustration still reads if
   the observer never fires. */
.splport-inv-cf{position:relative;isolation:isolate;}
.splport-inv-cf-base,.splport-inv-cf-flame{display:block;width:100%;height:auto;}
.splport-inv-cf-glow,.splport-inv-cf-flame{position:absolute;inset:0;pointer-events:none;}
.splport-inv-cf-glow{z-index:1;opacity:0;transition:opacity 500ms cubic-bezier(.16,1,.3,1);background:radial-gradient(ellipse 18% 22% at 75% 66%,rgba(238,89,25,.32),transparent 76%);}
.splport-inv-cf-flame{z-index:2;opacity:0;object-fit:contain;}
.splport-inv-cf-outer{clip-path:polygon(64% 34%,88% 34%,88% 80%,63% 80%);transform-origin:75% 80%;}
.splport-inv-cf-inner{clip-path:polygon(69% 43%,84% 43%,85% 78%,67% 78%);transform-origin:75% 78%;}
@media(prefers-reduced-motion:no-preference){
  .splport-inv-cf[data-active] .splport-inv-cf-glow{opacity:1;animation:splport-inv-cf-glow 2.4s ease-in-out infinite;}
  .splport-inv-cf[data-active] .splport-inv-cf-outer{will-change:transform,opacity;animation:splport-inv-cf-outer 2.15s ease-in-out infinite;}
  .splport-inv-cf[data-active] .splport-inv-cf-inner{will-change:transform,opacity;animation:splport-inv-cf-inner 1.55s ease-in-out infinite alternate;}
}
@keyframes splport-inv-cf-outer{0%,100%{opacity:.6;transform:scaleY(.955) skewX(1.6deg);}34%{opacity:1;transform:scaleY(1.09) skewX(-2.2deg);}68%{opacity:.76;transform:scaleY(1.02) skewX(1.15deg);}}
@keyframes splport-inv-cf-inner{from{opacity:.52;transform:scaleY(.925) skewX(-2.4deg);}to{opacity:1;transform:scaleY(1.13) skewX(2.2deg);}}
@keyframes splport-inv-cf-glow{0%,100%{opacity:.48;transform:scale(.955);}48%{opacity:1;transform:scale(1.06);}}

@media(max-width:900px){
  .splport-inv-faq-stage{grid-template-columns:1fr;gap:2rem;}
  .splport-inv-faq-intro{position:static;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;}
  .splport-inv-faq-cf{margin-top:0;width:150px;flex:none;}
}
@media(max-width:560px){
  .splport-inv-faq-cf{width:112px;}
}
@media(prefers-reduced-motion:reduce){
  .splport-inv-faq-q,.splport-inv-faq-rule,.splport-inv-faq-ico,.splport-inv-faq-caret,.splport-inv-faq-col{transition:none!important;}
  .splport-inv-faq-btn:hover .splport-inv-faq-q,.splport-inv-faq-btn:focus-visible .splport-inv-faq-q{transform:none;}
  .splport-inv-faq-item.is-open .splport-inv-faq-a{animation:none;}
  .splport-inv-cf-glow,.splport-inv-cf-flame{display:none;}
}