/* Keep the original desktop choreography. Compact screens get their own space
   for artwork, not another layer covering the heading or interactive controls. */
:root { --global-font-size: 10px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 110px; }
body { overflow-x: clip; }
canvas { display: block; }
.homepage-motion-toggle {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 100;
  min-height: 44px; padding: 10px 16px; border: 1px solid #b9a4e8; border-radius: 24px;
  background: #37158e; color: #fff; box-shadow: 0 2px 12px #2a116526;
  font: 600 14px/1.2 Arial, sans-serif; cursor: pointer;
}
.homepage-motion-toggle[hidden] { display: none; }
.homepage-motion-toggle:hover { background: #5919c1; }
.homepage-motion-toggle:focus-visible { outline: 3px solid #37158e; outline-offset: 3px; box-shadow: 0 0 0 3px #fff; }
.intro-logo .finaccru-wordmark { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-family: var(--font-helvetica-bold, "Helvetica Neue", Arial, sans-serif); font-size: 3rem; font-weight: 700; line-height: 1; letter-spacing: -.04em; }
.hero-artwork, .about-artwork { pointer-events: none; }
#hero .headline-el { z-index: 1; }
#hero .calculator-control button, .slider-thumb, .btn-increase, .btn-decrease { min-height: 44px; }
.slider-thumb { touch-action: pan-y; }
.finaccru-site-nav { max-height: calc(100dvh - 40px); }
.lottie-animation-container { aspect-ratio: 1306 / 720; }
.lottie-animation-container svg { width: 100%; height: 100%; }
/* The trail ends outside its artboard. Let the whole plane cross the section
   edge, above the following section's overlapping background (not its text). */
#features { overflow: visible; z-index: 1; }
.founders { position: relative; margin: 0 auto; padding: clamp(64px, 7vw, 112px) clamp(16px, 3vw, 48px) 0; color: white; text-align: center; scroll-margin-top: 110px; }
.founders-header { max-width: 680px; margin: 0 auto; }
.founders-header .invoice-eyebrow { color: #c1e7d9; margin-bottom: 18px; }
.founders-header .h2 { font-size: clamp(30px, 3.4vw, 52px); line-height: 1.12; letter-spacing: -.035em; margin-bottom: 20px; }
.founders-header > p:last-child { font-size: clamp(16px, 1.4vw, 20px); line-height: 1.5; color: #d2d9d5; }
.founder-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 6vw, 96px); max-width: 980px; margin: 56px auto 0; }
.founder-card { min-width: 0; padding: 32px 24px; border: 1px solid #ffffff24; border-radius: 20px; background: linear-gradient(155deg, #ffffff0a, #ffffff00); }
.founder-label { position: relative; display: inline-block; padding: 9px 20px; border: 1px solid #ffffff9e; border-radius: 10px; font-size: 12px; line-height: 1.4; letter-spacing: .08em; }
.founder-arrow { position: absolute; top: calc(100% + 3px); left: 50%; width: 44px; height: 36px; transform: translateX(-50%); }
.founder-portrait { display: grid; place-items: center; align-content: center; gap: 20px; width: min(100%, 200px); aspect-ratio: 1; margin: 64px auto 28px; border: 1px solid #d2e4dc40; border-radius: 16px; color: #acc8b9; background: radial-gradient(circle at 50% 15%, #59746860, #12251c90); }
.founder-portrait svg { width: 90px; height: 90px; }
.founder-portrait span { font-size: 9px; letter-spacing: .08em; }
.founder-details h3 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.2; letter-spacing: -.02em; }
.founder-brand { margin-top: 8px; color: #c1e7d9; font-size: 15px; }
.founder-pending { margin-top: 18px; color: #a7b2ab; font-size: 14px; line-height: 1.5; }
@media (max-width: 600px) {
  .founders { padding-inline: 0; }
  .founder-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 36px; }
}
/* Content owns its natural width; only the desktop timeline may narrow the card. */
.invoice-callout { padding: clamp(24px, 5vw, 80px) clamp(16px, 2vw, 40px); }
.invoice-callout .callout-bg { position: relative; width: 100%; min-height: 520px; padding: clamp(32px, 7vw, 120px); overflow: hidden; border-radius: 20px; background: #1b2421; color: white; }
.invoice-callout .image-el { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 60% center; }
.invoice-callout .callout-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9, 20, 16, .92), rgba(9, 20, 16, .72) 40%, rgba(9, 20, 16, .08)); pointer-events: none; }
.invoice-callout .header-el { position: relative; z-index: 1; width: min(100%, 600px); }
.invoice-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .12em; line-height: 1.5; }
.invoice-callout .invoice-eyebrow { color: #b9ead9; margin: 0 0 20px; }
.invoice-callout .h2 { margin: 0; font-size: clamp(32px, 3.5vw, 62px); line-height: 1.08; letter-spacing: -.035em; overflow-wrap: normal; }
.invoice-callout .callout-description { max-width: 47ch; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.6; margin: 24px 0 0; color: #e8eeeb; }
.invoice-callout .cta-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; margin-top: 32px; }
.invoice-callout .cta-btn { display: inline-flex; justify-content: center; align-items: center; gap: 20px; min-height: 48px; padding: 14px 22px; border: 1px solid #4eb99b; border-radius: 10px; background: #36aa8b; color: #fff; font-size: 16px; line-height: 1.35; text-align: center; }
.invoice-callout .cta-btn:hover { background: #26866d; }
.invoice-callout .callout-secondary, .invoice-demo-link { font-size: 16px; line-height: 1.5; text-decoration: underline; text-underline-offset: 5px; }
.invoice-callout a:focus-visible, #about a:focus-visible { outline: 3px solid #98b9ff; outline-offset: 5px; }
#about .headline-text .line { display: inline; }
#about .cta-group { gap: 20px 28px; }
.invoice-demo { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr); align-items: center; gap: clamp(28px, 5vw, 80px); margin: clamp(64px, 8vw, 128px) auto 0; padding: clamp(24px, 4vw, 56px); border: 1px solid #dce3df; border-radius: 24px; background: #f9fbfa; text-align: left; scroll-margin-top: 110px; }
.invoice-demo .invoice-eyebrow { color: #24755f; margin-bottom: 16px; }
.invoice-demo h3 { font-size: clamp(28px, 2.8vw, 42px); line-height: 1.12; letter-spacing: -.035em; margin: 0 0 16px; }
.invoice-demo-copy > p:not(.invoice-eyebrow) { color: #53625c; font-size: 16px; line-height: 1.6; }
.invoice-demo-steps { list-style: none; display: grid; gap: 22px; padding: 0; margin: 28px 0 0; }
.invoice-demo-steps li { display: flex; gap: 14px; }
.invoice-demo-steps li > span { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border-radius: 50%; background: #e2eee8; color: #24755f; font-size: 12px; font-weight: 700; }
.invoice-demo-steps strong { display: block; font-size: 16px; line-height: 1.4; }
.invoice-demo-steps p { color: #53625c; font-size: 14px; line-height: 1.5; margin-top: 4px; }
.invoice-demo-media { min-width: 0; overflow: hidden; border: 1px solid #d2ddd7; border-radius: 14px; background: #fff; box-shadow: 0 16px 40px #163e2a12; }
.invoice-demo-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; font-size: 12px; line-height: 1.5; color: #53625c; border-bottom: 1px solid #e1e7e3; }
.invoice-demo-bar span:first-child { color: #182c23; font-size: 18px; font-weight: 700; letter-spacing: -.04em; }
.invoice-demo-preview { margin: 0; }
.invoice-demo-preview img, .invoice-demo-media video { display: block; width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: contain; background: #eef1ef; }
.invoice-demo-preview figcaption { display: grid; gap: 8px; padding: 22px; color: #59675f; font-size: 14px; line-height: 1.5; }
.invoice-demo-preview strong { font-size: 20px; line-height: 1.2; color: #17291f; }
.invoice-demo-status { width: fit-content; border-radius: 100px; padding: 4px 9px; background: #edeaff; color: #55458a; font-size: 10px; font-weight: 700; letter-spacing: .07em; }
@media (max-width: 900px) {
  .invoice-demo { grid-template-columns: minmax(0, 1fr); }
  .invoice-callout .callout-bg { min-height: 0; padding: clamp(28px, 6vw, 56px); }
  .invoice-callout .image-el { object-position: 65% center; }
  .invoice-callout .callout-bg::after { background: linear-gradient(90deg, rgba(9, 20, 16, .94), rgba(9, 20, 16, .64)); }
}
@media (max-width: 480px) {
  .invoice-callout .callout-bg { border-radius: 16px; }
  .invoice-callout .cta-wrap { align-items: stretch; flex-direction: column; }
  .invoice-callout .callout-secondary { text-align: center; padding: 6px 0; }
  .invoice-demo { padding: 24px 18px; border-radius: 18px; }
  .invoice-demo-bar { padding: 12px; }
}
@media (min-width: 1200px) {
  :root { --global-font-size: clamp(7.5px, .556vw, 12px); }
  /* Keep copy height stable while the original reveal animates the card width. */
  .invoice-callout .header-el { width: 600px; }
  /* Equal clearance around the centered badge, including its 2x pulse.
     Keep word widths natural so the existing scroll-to-center motion works. */
  #meet-angie .words-el { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 42rem; align-items: center; min-height: calc(20rem / 1.1); position: relative; top: -1rem; font-size: clamp(72px, 6.8vw, 156px); line-height: 1; }
  #meet-angie .word-left { justify-self: end; }
  #meet-angie .word-right { justify-self: start; }
}
@media (max-width: 1199px) {
  #meet-angie .words-el { display: flex; justify-content: center; align-items: baseline; gap: .25em; max-width: none; margin-top: 0; margin-bottom: 24px; font-size: clamp(32px, 8vw, 64px); line-height: 1.1; }
  /* Reserve room for the badge's 1.65x pulse before the next heading. */
  #meet-angie .angie-wrap { margin-bottom: 64px; }
  #meet-angie .angie-wrap > .pointer-events-none { position: relative; top: auto; left: auto; margin: 0 auto; }
  #meet-angie .angie-photo.top { width: clamp(120px, 28vw, 180px); margin-top: 16px; }
  #hero .content-el { padding-top: 132px; min-height: auto; }
  #hero .headline-wrap { max-width: 680px; }
  #hero h1 { font-size: clamp(30px, 7.8vw, 52px); line-height: 1.08; }
  #hero h1 .line { display: inline !important; }
  #hero h1 .line::after { content: ' '; }
  #hero .headline-el > p { max-width: 520px; font-size: clamp(16px, 3.3vw, 20px); line-height: 1.45; white-space: normal; }
  #hero .cta-group { flex-wrap: wrap; gap: 16px 24px; }
  #hero .cta-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  #hero .hero-artwork {
    display: block; position: relative; inset: auto; translate: none; transform: none;
    width: min(100%, 540px); aspect-ratio: 1.285; margin: 24px auto 0;
  }
  #hero .calculator-wrap { margin-top: 24px; gap: 16px; align-items: stretch; }
  #hero .calculator-control-item { gap: 12px; flex-wrap: wrap; }
  #hero .calculator-control ul { flex: 1; justify-content: flex-end; }
  #hero .calculator-control button { width: auto; min-width: 58px; }
  #hero .calculator-graph { margin-top: 0; }
  #about .about-artwork {
    position: relative !important; inset: auto; translate: none; transform: none;
    width: 100%; aspect-ratio: 3.21; margin: 0 auto 32px;
  }
  #about .headline { font-size: clamp(28px, 5.5vw, 44px); line-height: 1.2; }
  #about .headline-text .line { display: inline !important; }
  #about .headline-text .line::after { content: ' '; }
  #benefits .slider-el > div > div:first-child { aspect-ratio: 1.15; }
  #benefits .slide-text, #benefits .slide-text-holder { position: relative; inset: auto; height: auto !important; }
  #benefits .expand-text, #transformation .expand-text { height: auto !important; }
  #benefits .slide-desc, #benefits .expand-text { opacity: 1 !important; visibility: visible !important; }
  #transformation .top-el { height: auto !important; padding: 24px; }
  #transformation .bottom-el { height: auto !important; min-height: 220px; padding: 32px 20px 0; }
  #transformation .slide-content { opacity: 1 !important; transform: none !important; }
  #features .features-wrap > .fill-screen { width: min(100%, 560px); left: auto; margin: 24px auto 0; }
  .section-wrap .h2 { overflow-wrap: break-word; }
  .cta-group { flex-wrap: wrap; }
  .footer-container .inner-wrap { opacity: 1 !important; position: relative; z-index: 1; }
  .footer-container .bg-image { mask: none !important; -webkit-mask: none !important; }
}
@media (min-width: 600px) and (max-width: 1199px) {
  #benefits .slider-el, #transformation .slides-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  #benefits .slider-el > div, #transformation .slide-el { min-width: 0; width: 100%; }
  #features .features-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 24px; }
  #features .features-list { min-width: 0; margin: 0; }
  #features .features-wrap > .fill-screen { grid-column: 1 / -1; }
}
@media (max-width: 359px) {
  #hero .calculator-control-item { justify-content: center; }
  #hero .calculator-control ul { justify-content: center; }
}
/* Keep the section's original pulse and scroll motion around an invoice symbol. */
.finaccru-invoice-badge { position: relative; z-index: 2; display: grid; place-items: center; width: 100%; aspect-ratio: 1.1; overflow: hidden; border: 1px solid #37158e; border-radius: 10px; background: #f8f5ff; box-shadow: 0 8px 24px #2a116526; font: 700 11px/1.2 Arial, sans-serif; }
.finaccru-invoice-brand { position: absolute; top: 9%; left: 11%; color: #5919c1; font-size: 1.1em; letter-spacing: -.04em; }
.finaccru-invoice-paper { display: flex; flex-direction: column; gap: 8%; width: 48%; height: 58%; padding: 13% 9%; border: 2px solid #5919c1; border-radius: 6px; background: #fff; box-shadow: 0 4px 12px #5919c120; color: #5919c1; font-size: .8em; text-align: left; }
.finaccru-invoice-paper i { display: block; width: 100%; height: 2px; background: #b9a4e8; }
.finaccru-invoice-paper i:last-child { width: 60%; }
.finaccru-invoice-check { position: absolute; right: 12%; bottom: 14%; display: grid; place-items: center; width: 23%; aspect-ratio: 1; border-radius: 50%; background: #3aaf89; color: #fff; font-size: 1.6em; }