/* Shared header and footer component styling.
   Page styles should only override page-specific placement and themes. */

[data-site-header],
[data-site-footer] {
  box-sizing: border-box;
  position: absolute;
}

[data-site-header] {
  --site-header-glass: rgba(255, 255, 255, 0.72);
  transition: background-color 180ms ease, box-shadow 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.fg-header,
.acct-header,
.why-header {
  --site-header-glass: rgba(10, 10, 12, 0.68);
}

.why-index-header {
  --site-header-glass: rgba(255, 255, 255, 0.72);
}

[data-site-header].is-scrolled:not(.is-menu-open) {
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
  background-color: var(--site-header-glass);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  [data-site-header] {
    transition-duration: 0ms;
  }
}

.fp-header,
.acct-header {
  height: 70px;
  left: 0;
  top: 0;
  width: 1680px;
  z-index: 20;
}

.fp-header::after,
.acct-header::after {
  background: rgba(0, 0, 0, 0.2);
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  top: 70px;
  width: 1680px;
}

.fp-logo,
.acct-logo {
  display: block;
  height: 25px;
  left: 59px;
  position: absolute;
  top: 23px;
  width: 222px;
}

.fp-logo img,
.acct-logo img {
  max-width: none;
  position: absolute;
}

.fp-logo .logo-mark,
.acct-logo .logo-mark {
  height: 23px;
  left: 0;
  top: 0;
  width: 24px;
}

.fp-logo .logo-word-one,
.acct-logo .logo-word-one {
  height: 22px;
  left: 34px;
  top: 3px;
  width: 85px;
}

.fp-logo .logo-word-two,
.acct-logo .logo-word-two {
  height: 19px;
  left: 127px;
  top: 5px;
  width: 95px;
}

.fp-nav,
.acct-nav {
  align-items: center;
  display: flex;
  gap: 50px;
  height: 70px;
  justify-content: center;
  left: 918px;
  position: absolute;
  top: 0;
  width: 518px;
}

.fp-header .fp-nav a,
.acct-header .acct-nav a,
.fp-login,
.acct-login {
  color: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: normal;
  position: absolute;
  text-decoration: none;
  white-space: nowrap;
}

.fp-header .fp-nav a,
.acct-header .acct-nav a {
  position: static;
  top: auto;
  width: auto;
}

.fp-nav a:nth-child(1),
.acct-nav a:nth-child(1),
.fp-nav a:nth-child(2),
.acct-nav a:nth-child(2),
.fp-nav a:nth-child(3),
.acct-nav a:nth-child(3),
.fp-nav a:nth-child(4),
.acct-nav a:nth-child(4) {
  left: auto;
  top: auto;
  width: auto;
}

.fp-login,
.acct-login {
  align-items: center;
  background: #000;
  border-radius: 20px;
  color: #fff;
  display: flex;
  height: 30px;
  justify-content: center;
  left: 1500px;
  top: 20px;
  width: 120px;
}

.site-menu {
  align-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: none;
  flex-direction: column;
  gap: 6px;
  height: 44px;
  justify-content: center;
  padding: 0;
  position: absolute;
  width: 44px;
  z-index: 30;
}

.site-menu span {
  background: currentColor;
  display: block;
  height: 1px;
  width: 35px;
}

.site-mobile-login {
  display: none;
}

@media (max-width: 1100px) {
  [data-site-header].is-menu-open {
    left: 0;
    position: fixed;
    top: 0;
    transform: none !important;
    width: 100vw;
    z-index: 1000;
  }

  .fp-header,
  .acct-header,
  .fg-header {
    height: 70px;
    width: min(100vw, 768px);
  }

  .fp-header::after,
  .acct-header::after {
    width: min(100vw, 768px);
  }

  .why-canvas .fp-header {
    transform: scale(var(--why-scale-inverse, 1));
    transform-origin: top left;
  }

  [data-site-header] .site-logo {
    left: 15px;
    top: 23px;
    transform: none;
    transform-origin: top left;
  }

  [data-site-header] .site-nav,
  [data-site-header] .fp-login,
  [data-site-header] .acct-login,
  [data-site-header] .fg-login {
    display: none;
  }

  [data-site-header] .site-menu {
    align-items: flex-end;
    display: flex;
    gap: 13px;
    right: 15px;
    top: 13px;
  }

  [data-site-header] .site-menu span {
    position: static;
    transition: transform 180ms ease;
  }

  [data-site-header] .site-menu span:nth-child(2) {
    display: none;
  }

  [data-site-header] .site-menu.site-menu[aria-expanded="true"] {
    color: #fff;
    position: fixed;
    z-index: 40;
  }

  [data-site-header] .site-menu[aria-expanded="true"] span:first-child {
    transform: translateY(7px) rotate(45deg);
  }

  [data-site-header] .site-menu[aria-expanded="true"] span:last-child {
    transform: translateY(-7px) rotate(-45deg);
  }

  [data-site-header] .fp-menu {
    color: #000;
  }

  [data-site-header] .acct-menu,
  [data-site-header] .fg-menu,
  [data-site-header].why-header .fp-menu {
    color: #fff;
  }

  [data-site-header] .site-nav {
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    background: linear-gradient(120deg, rgba(188, 188, 188, 0.84), rgba(146, 146, 146, 0.74));
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 0 0 24px 24px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
    box-sizing: border-box;
    color: #fff;
    display: none;
    flex-direction: column;
    gap: 0;
    height: auto;
    justify-content: flex-start;
    left: 0;
    padding: 99px 0 24px;
    right: 0;
    top: 0;
    width: auto;
    z-index: 35;
  }

  [data-site-header] .site-nav.site-nav.is-open {
    display: flex;
    position: fixed;
    width: auto;
  }

  [data-site-header] .site-nav.site-nav.is-open a {
    align-items: center;
    border: 0;
    box-sizing: border-box;
    color: #fff;
    display: flex;
    flex: 0 0 46px;
    font-size: 20px;
    height: 46px;
    line-height: normal;
    padding: 0 23px;
    position: static;
    text-decoration: none;
    width: 100%;
  }

  [data-site-header] .site-nav.site-nav.is-open a.active {
    background: rgba(92, 92, 92, 0.2);
  }

  [data-site-header] .site-nav .site-mobile-login {
    display: block;
  }

}

[data-site-footer] {
  background: linear-gradient(180deg, #131313 0%, #000 100%);
  color: #fff;
  height: 1360px;
  left: 0;
  width: 1680px;
}

[data-site-footer] .footer-lead {
  font-size: 30px;
  font-weight: 400;
  left: 193px;
  line-height: 36px;
  margin: 0;
  position: absolute;
  top: 229px;
  white-space: nowrap;
  width: 1294px;
}

[data-site-footer] .footer-talk {
  align-items: flex-start;
  color: inherit;
  display: flex;
  font-size: 100px;
  font-weight: 400;
  height: 120px;
  left: 193px;
  line-height: 120px;
  position: absolute;
  text-decoration: none;
  top: 321px;
  width: 620px;
}

[data-site-footer] .footer-talk span {
  position: static;
}

[data-site-footer] .footer-lead span,
[data-site-footer] .footer-lead br,
[data-site-footer] .legal span,
[data-site-footer] .legal br {
  position: static;
}

[data-site-footer] .footer-talk img {
  height: 45px;
  margin-left: 24px;
  margin-top: 38px;
  max-width: none;
  position: static;
  width: 45px;
}

[data-site-footer] .footer-row {
  border: 0;
  display: block;
  height: 70px;
  left: 193px;
  padding: 0;
  position: absolute;
  top: 611px;
  width: 1294px;
}

[data-site-footer] .footer-row > img {
  height: 23px;
  left: 0;
  max-width: none;
  position: absolute;
  top: 0;
  width: 24px;
}

[data-site-footer] .footer-row > span {
  font-size: 14px;
  font-weight: 400;
  left: 44px;
  position: absolute;
  top: 5px;
  width: 256px;
}

[data-site-footer] .footer-row nav {
  display: block;
  height: 16px;
  left: 731px;
  position: absolute;
  top: 4px;
  width: 584px;
}

[data-site-footer] .footer-row nav a {
  color: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 16px;
  position: absolute;
  top: 0;
  text-decoration: none;
  white-space: nowrap;
}

[data-site-footer] .footer-row nav a:nth-child(1) { left: 0; width: 54px; }
[data-site-footer] .footer-row nav a:nth-child(2) { left: 104px; width: 43px; }
[data-site-footer] .footer-row nav a:nth-child(3) { left: 197px; width: 150px; }
[data-site-footer] .footer-row nav a:nth-child(4) { left: 378px; width: 101px; }
[data-site-footer] .footer-row nav a:nth-child(5) { left: 529px; width: 36px; }

[data-site-footer] .footer-row::after {
  background: rgba(255, 255, 255, 0.25);
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  top: 109px;
  width: 1294px;
}

[data-site-footer] .legal {
  color: #686868;
  font-size: 12px;
  font-weight: 400;
  left: 193px;
  line-height: normal;
  margin: 0;
  position: absolute;
  top: 770px;
  white-space: pre-wrap;
  width: 1300px;
}

@media (max-width: 760px) {
  [data-site-footer] {
    height: 1440px;
    width: 440px;
  }

  [data-site-footer] .footer-lead {
    font-size: 20px;
    height: auto;
    left: 15px;
    line-height: normal;
    top: 175px;
    white-space: normal;
    width: 410px;
  }

  [data-site-footer] .footer-talk {
    font-size: 60px;
    height: 72px;
    left: 15px;
    line-height: 72px;
    top: 350px;
    width: 410px;
  }

  [data-site-footer] .footer-talk img {
    height: 28px;
    margin-left: 10px;
    margin-top: 22px;
    width: 28px;
  }

  [data-site-footer] .footer-row {
    height: 80px;
    left: 15px;
    top: 622px;
    width: 410px;
  }

  [data-site-footer] .footer-row > img {
    top: 38px;
  }

  [data-site-footer] .footer-row > span {
    font-size: 12px;
    left: 45px;
    top: 43px;
    width: 260px;
  }

  [data-site-footer] .footer-row nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: auto;
    left: 0;
    row-gap: 28px;
    top: -180px;
    width: 360px;
  }

  [data-site-footer] .footer-row nav a,
  [data-site-footer] .footer-row nav a:nth-child(n) {
    font-size: 13px;
    left: auto;
    line-height: 16px;
    position: relative;
    top: auto;
    width: auto;
  }

  [data-site-footer] .footer-row::after {
    left: 0;
    top: 100px;
    width: 410px;
  }

  [data-site-footer] .legal {
    font-size: 12px;
    height: auto;
    left: 15px;
    line-height: 1.32;
    top: 730px;
    white-space: normal;
    width: 410px;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  :is(.figma-scaled-page, .features-scaled-page, .accountants-scaled-page, .talk-scaled-page, .why-index-canvas) [data-site-header] {
    width: 440px;
  }

  :is(.figma-scaled-page, .features-scaled-page, .accountants-scaled-page, .talk-scaled-page, .why-index-canvas) [data-site-header]::after {
    width: 440px;
  }

  :is(.figma-scaled-page, .features-scaled-page, .accountants-scaled-page, .talk-scaled-page, .why-index-canvas) [data-site-header] .site-nav {
    width: 440px;
  }

  :is(.figma-scaled-page, .features-scaled-page, .accountants-scaled-page, .talk-scaled-page, .why-index-canvas) [data-site-header] .site-nav a {
    width: 400px;
  }

  :is(.figma-scaled-page, .features-scaled-page, .accountants-scaled-page, .talk-scaled-page, .why-index-canvas) [data-site-footer] {
    height: 1440px;
    width: 440px;
  }

  :is(.figma-scaled-page, .features-scaled-page, .accountants-scaled-page, .talk-scaled-page, .why-index-canvas) [data-site-footer] .footer-lead {
    font-size: 20px;
    height: auto;
    left: 15px;
    line-height: normal;
    top: 175px;
    white-space: normal;
    width: 410px;
  }

  :is(.figma-scaled-page, .features-scaled-page, .accountants-scaled-page, .talk-scaled-page, .why-index-canvas) [data-site-footer] .footer-talk {
    font-size: 60px;
    height: 72px;
    left: 15px;
    line-height: 72px;
    top: 350px;
    width: 410px;
  }

  :is(.figma-scaled-page, .features-scaled-page, .accountants-scaled-page, .talk-scaled-page, .why-index-canvas) [data-site-footer] .footer-talk img {
    height: 28px;
    margin-left: 10px;
    margin-top: 22px;
    width: 28px;
  }

  :is(.figma-scaled-page, .features-scaled-page, .accountants-scaled-page, .talk-scaled-page, .why-index-canvas) [data-site-footer] .footer-row {
    height: 80px;
    left: 15px;
    top: 622px;
    width: 410px;
  }

  :is(.figma-scaled-page, .features-scaled-page, .accountants-scaled-page, .talk-scaled-page, .why-index-canvas) [data-site-footer] .footer-row > img {
    top: 38px;
  }

  :is(.figma-scaled-page, .features-scaled-page, .accountants-scaled-page, .talk-scaled-page, .why-index-canvas) [data-site-footer] .footer-row > span {
    font-size: 12px;
    left: 45px;
    top: 43px;
    width: 260px;
  }

  :is(.figma-scaled-page, .features-scaled-page, .accountants-scaled-page, .talk-scaled-page, .why-index-canvas) [data-site-footer] .footer-row nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: auto;
    left: 0;
    row-gap: 28px;
    top: -180px;
    width: 360px;
  }

  :is(.figma-scaled-page, .features-scaled-page, .accountants-scaled-page, .talk-scaled-page, .why-index-canvas) [data-site-footer] .footer-row nav a,
  :is(.figma-scaled-page, .features-scaled-page, .accountants-scaled-page, .talk-scaled-page, .why-index-canvas) [data-site-footer] .footer-row nav a:nth-child(n) {
    font-size: 13px;
    left: auto;
    line-height: 16px;
    position: relative;
    top: auto;
    width: auto;
  }

  :is(.figma-scaled-page, .features-scaled-page, .accountants-scaled-page, .talk-scaled-page, .why-index-canvas) [data-site-footer] .footer-row::after {
    left: 0;
    top: 100px;
    width: 410px;
  }

  :is(.figma-scaled-page, .features-scaled-page, .accountants-scaled-page, .talk-scaled-page, .why-index-canvas) [data-site-footer] .legal {
    font-size: 12px;
    height: auto;
    left: 15px;
    line-height: 1.32;
    top: 730px;
    white-space: normal;
    width: 410px;
  }
}