@charset "UTF-8";
/*
 * landing.scss — public marketing landing page (/submissions), rendered in _MarketingLayout.
 * Layout and spacing come from Bootstrap utility classes in the view; this file only holds
 * the themed brand colours and the pieces Bootstrap cannot express.
 * Compiled landing.css is checked in next to it (see compilerconfig.json).
 */
/*
 * Theming: one page, one brand (DealVault). Every accent colour on this page comes from the
 * design-system variables, so it follows light and dark mode (data-bs-theme) by itself.
 * Component classes below only ever say "brand" — never a colour name.
 *   brand        main accent (buttons, ticks, highlights)
 *   brand-dark   accent text, hover state
 *   brand-deep   dark band / CTA background
 *   on-brand     text colour that sits on top of `brand`
 */
.landing-layout {
  --brand: var(--primary-fill);
  --brand-dark: var(--primary);
  --brand-hover: var(--primary-hover);
  --brand-soft: color-mix(in srgb, var(--primary-fill) 16%, transparent);
  --brand-deep: #002532;
  --on-brand: #ffffff;
  --link-blue: #0077b3;
  --blue: #0077b3;
  --blue-soft: rgba(0, 119, 179, 0.16);
}
[data-bs-theme=dark] .landing-layout {
  --link-blue: #4db3e6;
}
.landing-layout [data-brand=proximo] {
  display: none !important;
}

.btn-brand {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}
.btn-brand:hover, .btn-brand:focus {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  color: var(--on-brand);
}

.link-brand {
  color: var(--link-blue);
}

.bg-brand {
  background: var(--brand);
}

.bg-brand-dark {
  background: var(--brand-dark);
}

.bg-brand-deep {
  background: var(--brand-deep);
}

/* Page rhythm — values are the mock's px sizes on this project's 10px root (Bootstrap rem spacing is 0.625x here) */
.section-pad {
  padding: 7.2rem 0;
  font-size: 1.6rem;
  line-height: 1.55;
}

.card-box {
  padding: 2.2rem;
  border: 0.1rem solid var(--border);
  border-radius: 1.8rem;
}

.section-intro {
  font-size: 1.6rem;
  line-height: 1.55;
}

/* Type scale */
.page-lead {
  font-size: 1.73rem;
  line-height: 1.55;
  max-width: 60.8rem;
}

.section-title {
  font-size: clamp(2.56rem, 3vw, 3.52rem);
  font-weight: 800;
  letter-spacing: -0.035em;
}

.item-title-lg {
  font-size: 1.76rem;
  letter-spacing: -0.02em;
}

.item-title {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
}

.quote-text {
  font-size: 2.4rem;
  line-height: 1.4;
  margin-bottom: 2rem;
}

.text-sm {
  font-size: 1.4rem;
}

/* Big headline size shared by the hero and the "What can you submit?" section */
.hover-gray {
  display: inline-block;
  padding: 0.8rem 1.4rem;
  border-radius: 10rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.hover-gray:hover, .hover-gray:focus-visible {
  background: var(--surface-alt);
  color: var(--text) !important;
}

.landing-header .navbar {
  position: static;
  flex-wrap: nowrap;
}
.landing-header .navbar-toggler {
  padding: 0.8rem 1rem;
  border: 0;
}

.nav-menu {
  gap: 2rem;
}
.nav-menu .section-links {
  gap: 0.2rem;
  margin: 0;
}
.nav-menu .section-links .section-link {
  display: block;
  padding: 0.9rem 1.2rem;
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  text-decoration: none;
  border-radius: 10rem;
  transition: background-color 0.2s ease;
}
.nav-menu .section-links .section-link:hover, .nav-menu .section-links .section-link:focus-visible {
  background: var(--surface-alt);
}
.nav-menu .section-links .section-link.active {
  background: var(--border);
}
@media (max-width: 1199.98px) {
  .nav-menu {
    position: absolute;
    top: calc(100% + 0.8rem);
    left: 0;
    right: 0;
    padding: 1.6rem 2rem;
    background: var(--surface);
    border: 0.1rem solid var(--border);
    border-radius: 2.4rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.12);
  }
  .nav-menu .section-links {
    gap: 0.2rem;
  }
}

[data-bs-theme=dark] .navbar-toggler-icon {
  filter: invert(1);
}

[data-bs-theme=dark] .btn-outline-brand-deep {
  --bs-btn-color: var(--text);
  --bs-btn-border-color: var(--text);
  --bs-btn-hover-color: var(--surface);
  --bs-btn-hover-bg: var(--text);
  --bs-btn-hover-border-color: var(--text);
  --bs-btn-active-color: var(--surface);
  --bs-btn-active-bg: var(--text);
  --bs-btn-active-border-color: var(--text);
  --bs-btn-focus-shadow-rgb: 241, 245, 249;
}

.hover-underline {
  transition: color 0.2s ease;
}
.hover-underline:hover, .hover-underline:focus-visible {
  color: var(--text) !important;
  text-decoration: underline !important;
  text-underline-offset: 0.5rem;
}

.btn-outline-brand-deep {
  --bs-btn-color: var(--brand-deep);
  --bs-btn-border-color: var(--brand-deep);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-deep);
  --bs-btn-hover-border-color: var(--brand-deep);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-deep);
  --bs-btn-active-border-color: var(--brand-deep);
  --bs-btn-focus-shadow-rgb: 0, 37, 50;
}
.btn-outline-brand-deep:hover, .btn-outline-brand-deep:focus-visible, .btn-outline-brand-deep:active {
  color: var(--bs-btn-hover-color);
}

/* ----- Hero ----- */
.hero {
  --glow: clamp(14rem, calc(34vw - 23rem), 42rem);
  position: relative;
  overflow: clip;
  padding: 12rem 0 3rem;
}
.hero .container {
  position: relative;
  z-index: 1;
}
.hero::before, .hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(calc(var(--glow) * 0.14));
}
.hero::before {
  top: calc(var(--glow) * -0.29);
  left: calc(var(--glow) * -0.24);
  width: var(--glow);
  height: var(--glow);
  background: var(--brand-soft);
}
.hero::after {
  right: calc(var(--glow) * -0.19);
  bottom: calc(var(--glow) * -0.29);
  width: calc(var(--glow) * 0.86);
  height: calc(var(--glow) * 0.86);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
}
@media (max-width: 1024px) {
  .hero {
    --glow: clamp(28rem, 80vw, 52rem);
  }
  .hero::before {
    top: calc(var(--glow) * -0.2);
    left: calc(var(--glow) * -0.8);
  }
  .hero::after {
    right: calc(var(--glow) * -0.8);
    bottom: calc(var(--glow) * -0.2);
  }
}
@media (max-width: 991.98px) {
  .hero::before, .hero::after {
    display: none;
  }
}
.hero .page-title {
  font-size: clamp(3.2rem, 4.4vw, 5.28rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.045em;
  color: var(--brand-deep);
}
.hero .eyebrow {
  font-size: var(--font-size-base);
  line-height: 1.55;
}
.hero .eyebrow .rotator {
  position: relative;
  display: inline-block;
  min-width: 29ch;
  color: var(--brand-dark);
}
.hero .eyebrow .rotator b {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0.7em);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hero .eyebrow .rotator b.on {
  position: relative;
  opacity: 1;
  transform: none;
}
.hero .btn-lg {
  padding: 1.4rem 2.4rem;
  font-size: var(--font-size-base);
}
.hero .hero-art * {
  transform-box: fill-box;
  transform-origin: center;
}
.hero .hero-art .art-panel {
  fill: var(--surface-alt);
  stroke: var(--border);
}
.hero .hero-art .art-bar {
  fill: var(--border-strong);
}
.hero .hero-art .art-bar-light {
  fill: var(--border);
}
.hero .hero-art .art-divider {
  fill: var(--border);
}
.hero .hero-art .art-row {
  fill: var(--surface);
  stroke: var(--border);
}
.hero .hero-art .art-dot {
  fill: var(--border-strong);
  transition: fill 0.4s ease;
}
.hero .hero-art .art-tag {
  fill: var(--border);
  transition: opacity 0.3s ease;
}
.hero .hero-art .art-row-outline {
  fill: none;
  stroke: var(--art-accent);
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: opacity 0.3s ease, stroke-dashoffset 0s linear 0.3s;
}
.hero .hero-art .art-check {
  fill: none;
  stroke: var(--on-brand);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0s linear 0.3s;
}
.hero .hero-art .art-ring {
  fill: none;
  stroke: var(--art-accent);
  stroke-width: 2;
  opacity: 0;
}
.hero .hero-art .art-pill {
  transform: scale(0);
  transition: transform 0.25s ease;
}
.hero .hero-art .art-pill-bg {
  fill: var(--art-accent);
}
.hero .hero-art .art-live-label {
  fill: var(--on-brand);
  font-family: inherit;
}
.hero .hero-art .art-deal,
.hero .hero-art .art-line {
  font-family: inherit;
}
.hero .hero-art .art-logo-dark {
  display: none;
}
.hero .hero-art .art-deal {
  fill: var(--text);
}
.hero .hero-art .art-sector,
.hero .hero-art .art-meta {
  fill: var(--text-muted);
  transition: fill 0.4s ease;
}
.hero .hero-art .art-item.is-live .art-row-outline {
  opacity: 1;
  stroke-dashoffset: 0;
  transition: opacity 0.1s ease, stroke-dashoffset 0.9s linear;
}
.hero .hero-art .art-item.is-live .art-dot {
  fill: var(--art-accent);
}
.hero .hero-art .art-item.is-live .art-check {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.45s ease-out 0.45s;
}
.hero .hero-art .art-item.is-live .art-ring-1 {
  animation: art-ring 1s ease-out 0.35s both;
}
.hero .hero-art .art-item.is-live .art-ring-2 {
  animation: art-ring 1s ease-out 0.7s both;
}
.hero .hero-art .art-item.is-live .art-tag {
  opacity: 0;
}
.hero .hero-art .art-item.is-live .art-pill {
  transform: scale(1);
  transition: transform 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) 0.7s;
}
.hero .hero-art .art-item.is-live .art-amount {
  fill: var(--art-accent);
}

[data-bs-theme=dark] .hero .hero-art .art-logo-light {
  display: none;
}
[data-bs-theme=dark] .hero .hero-art .art-logo-dark {
  display: inline;
}

/* ----- Logo marquee ----- */
.logo-strip {
  padding: 5rem 0;
}
.logo-strip .logo-strip-label {
  font-size: 1.25rem;
  letter-spacing: 0.08em;
}
.logo-strip .logo-track-wrap {
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-strip .logo-track-wrap .logo-track {
  gap: 7rem;
  width: max-content;
  animation: scroll-logos 80s linear infinite;
}
.logo-strip .logo-track-wrap .logo-track.paused {
  animation-play-state: paused;
}
.logo-strip .logo-track-wrap .logo-track .company-logo {
  height: 4.4rem;
  width: auto;
  max-width: 22rem;
  object-fit: contain;
}

@keyframes scroll-logos {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
@media (max-width: 767.98px) {
  .logo-strip .logo-track-wrap .logo-track {
    animation-duration: 56s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .logo-strip .logo-track-wrap .logo-track {
    animation: none;
  }
}
/* ----- Stats ----- */
.stat {
  padding: 3.2rem 2.6rem;
  background: var(--surface-alt);
  border: 0.1rem solid var(--border);
  border-radius: 1.8rem;
}
.stat .stat-value {
  font-size: 4.8rem;
  line-height: 1;
  color: var(--brand-deep);
  margin-bottom: 1rem;
}
.stat p {
  font-size: 1.6rem;
  line-height: 1.3;
}

/* ----- How it works ----- */
.flip-card {
  min-height: 22rem;
  perspective: 100rem;
  outline: none;
}
.flip-card .flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 22rem;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.flip-card:hover .flip-inner, .flip-card:focus .flip-inner, .flip-card:focus-within .flip-inner {
  transform: rotateY(180deg);
}
.flip-card:focus-visible {
  outline: 0.2rem solid var(--brand);
  outline-offset: 0.4rem;
  border-radius: 1.8rem;
}
.flip-card .flip-front,
.flip-card .flip-back {
  position: absolute;
  inset: 0;
  padding: 2.8rem 3rem;
  border-radius: 1.8rem;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flip-card .flip-front {
  gap: 1.2rem;
  background: var(--surface-alt);
  border: 0.1rem solid var(--border);
}
.flip-card .step-num {
  font-size: 4.8rem;
  line-height: 1;
  color: var(--brand-dark);
}
.flip-card .flip-back {
  background: var(--brand);
  color: var(--on-brand);
  transform: rotateY(180deg);
}
.flip-card .flip-back p {
  font-size: 1.6rem;
  line-height: 1.55;
}
.flip-card .flip-back a {
  color: inherit;
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .flip-card .flip-inner {
    transition: none;
  }
}
/* ----- Dark bands ----- */
.band-dark,
.cta-final {
  background: var(--brand-deep);
  color: #fff;
}
.band-dark h2,
.band-dark h3,
.cta-final h2,
.cta-final h3 {
  color: #fff;
}
.band-dark .band-intro,
.band-dark .band-text,
.cta-final .band-intro,
.cta-final .band-text {
  color: rgba(255, 255, 255, 0.68);
}

.cta-final {
  padding: 5.6rem 2.4rem;
  border-radius: 2.4rem;
}
.cta-final .band-intro {
  max-width: 70.4rem;
  font-size: 1.6rem;
}

.landing-footer {
  padding: 2.4rem 0 3rem;
  background: var(--surface-alt);
}
.landing-footer .footer-logo img {
  height: 4.8rem;
  width: auto;
}
.landing-footer .footer-logo-dark {
  display: none;
}
.landing-footer .footer-rule {
  margin: 2rem 0 2.4rem;
  color: var(--border-strong);
  opacity: 1;
}
.landing-footer .footer-brand {
  min-height: 8rem;
  background: #fff;
  border: 0;
  border-radius: 1.8rem;
  box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.landing-footer .footer-brand:hover, .landing-footer .footer-brand:focus-visible {
  transform: translateY(-0.6rem);
  box-shadow: 0 1.2rem 2.4rem rgba(0, 0, 0, 0.12);
}
.landing-footer .footer-brand .footer-brand-logo {
  max-height: 5.6rem;
  height: auto;
}
.landing-footer .footer-banner {
  display: block;
  margin: 2rem 0 1.6rem;
}
.landing-footer .footer-copy p {
  margin: 0 auto 0.5rem;
  font-size: 1.3rem;
}

[data-bs-theme=dark] .landing-footer .footer-logo-light {
  display: none;
}
[data-bs-theme=dark] .landing-footer .footer-logo-dark {
  display: inline-block;
}
[data-bs-theme=dark] .landing-footer .footer-banner {
  filter: invert(1);
  opacity: 0.85;
}
[data-bs-theme=dark] .landing-footer .footer-brand {
  background: var(--surface);
  border: 0.1rem solid var(--border);
}
[data-bs-theme=dark] .landing-footer .footer-brand .footer-brand-logo {
  filter: brightness(0) invert(1);
}

.band-dark .types-intro {
  margin-bottom: 4.8rem;
  text-align: center;
}
.band-dark .types-intro .page-lead {
  max-width: none;
}
.band-dark .type-panel {
  padding: 2.4rem 3.2rem 3.2rem;
  background: rgba(255, 255, 255, 0.04);
  border: 0.1rem solid rgba(255, 255, 255, 0.16);
  border-radius: 2rem;
}
.band-dark .type-tabs-wrap {
  margin-bottom: 4rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.band-dark .type-tabs-wrap::-webkit-scrollbar {
  display: none;
}
.band-dark .type-tabs {
  display: inline-flex;
  gap: 0.4rem;
  padding: 0.4rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10rem;
}
.band-dark .type-tabs .nav-item {
  flex-shrink: 0;
}
.band-dark .type-tabs .nav-link {
  padding: 1rem 1.6rem;
  font-size: 1.5rem;
  font-weight: 600;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.68);
  background: transparent;
  border: 0;
  border-radius: 10rem;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.band-dark .type-tabs .nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.band-dark .type-tabs .nav-link.active {
  color: var(--on-brand);
  background: var(--blue);
}
.band-dark .type-tabs .nav-link:focus-visible {
  outline: 0.2rem solid var(--blue);
  outline-offset: 0.2rem;
}
.band-dark .type-lead {
  margin-bottom: 4rem;
  font-size: 1.8rem;
  line-height: 1.55;
}
.band-dark .page-title {
  font-size: clamp(3.2rem, 4.4vw, 5.28rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.045em;
}
.band-dark .dash {
  width: 2.6rem;
  height: 0.3rem;
  background: var(--brand);
  margin-bottom: 1.5rem;
}
.band-dark .type-panel .dash {
  background: var(--blue);
}
.band-dark .item-title-lg {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: #fff;
}
.band-dark .type-core {
  padding: 3.6rem 0;
  border-color: rgba(255, 255, 255, 0.16) !important;
}
.band-dark .type-core .band-text {
  font-size: 1.8rem;
  line-height: 1.55;
}
.band-dark .type-core-title {
  font-size: 2.8rem;
}
.band-dark .type-extended-label {
  margin: 3.6rem 0 3rem;
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.05em;
}
.band-dark .type-list .type-item .band-text {
  font-size: 1.5rem;
  line-height: 1.55;
}
.band-dark .section-pill {
  padding: 0.6rem 1.4rem;
  font-size: 1.25rem;
  background: var(--blue-soft);
  color: var(--blue);
  letter-spacing: 0.02em;
}
.band-dark .tick {
  width: 2rem;
  height: 2rem;
  margin-top: 0.4rem;
  background: var(--blue);
  color: var(--on-brand);
}
.band-dark .tick .material-symbols-outlined {
  font-size: 1.4rem;
  font-weight: 700;
}
.band-dark .quote-bubble {
  max-width: 56rem;
  padding: 2.6rem 2.8rem;
  border-radius: 2rem;
  box-shadow: 0 1.6rem 3.6rem rgba(0, 0, 0, 0.28);
}
.band-dark .quote-bubble::after {
  content: "";
  position: absolute;
  left: 4rem;
  bottom: -2.4rem;
  border-style: solid;
  border-width: 2.4rem 2.4rem 0 0;
  border-color: #fff transparent transparent transparent;
}
.band-dark .quote-bubble .quote-author {
  gap: 1.6rem;
}
.band-dark .quote-bubble .quote-avatar {
  width: 7rem;
  height: 7rem;
}
.band-dark .quote-bubble .quote-avatar .quote-avatar-logo {
  width: 4.2rem;
  height: auto;
}
.band-dark .quote-bubble .quote-name {
  font-size: 1.8rem;
}
.band-dark .quote-bubble .quote-name span {
  font-size: 1.4rem;
}

/* ----- Team ----- */
.team-carousel {
  --team-gap: 2.4rem;
}
.team-carousel .team-track {
  gap: var(--team-gap);
  padding: 1rem 0 2rem;
  margin: -1rem 0 -2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.team-carousel .team-track::-webkit-scrollbar {
  display: none;
}
.team-carousel .team-track.moving {
  scroll-snap-type: none;
}
.team-carousel .member {
  flex: 0 0 calc((100% - 2 * var(--team-gap)) / 3);
  scroll-snap-align: start;
}
.team-carousel .team-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  color: var(--text);
  background: var(--surface);
  border: 0.1rem solid var(--border);
  box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.12);
  transform: translateY(-50%);
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.team-carousel .team-arrow:hover:not(:disabled), .team-carousel .team-arrow:focus-visible {
  color: var(--on-brand);
  background: var(--brand);
  border-color: var(--brand);
}
.team-carousel .team-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}
.team-carousel .team-prev {
  left: -2.2rem;
}
.team-carousel .team-next {
  right: -2.2rem;
}

.member .member-photo {
  display: block;
  width: 8rem;
  height: 8rem;
  object-fit: cover;
  background: var(--surface-alt);
  border: 0.1rem solid var(--border);
}
.member h3 {
  font-size: 1.6rem;
  margin-bottom: 0.2rem;
}
.member p {
  font-size: 1.4rem;
}

/* ----- FAQ search ----- */
.faq .faq-search {
  width: 100%;
  max-width: 32rem;
}
.faq .faq-search .faq-search-icon {
  position: absolute;
  top: 50%;
  left: 1.4rem;
  font-size: 2rem;
  color: var(--text-muted);
  pointer-events: none;
  transform: translateY(-50%);
}
.faq .faq-search .form-control {
  padding: 1.1rem 1.6rem 1.1rem 4.4rem;
  font-size: 1.5rem;
  background: var(--surface);
  border-color: var(--border);
}
.faq .faq-empty {
  padding: 2.4rem 0;
  font-size: 1.6rem;
}

/* ----- What can you submit: CTA ----- */
.band-dark .types-cta {
  margin-top: 4.8rem;
  text-align: center;
}

/* ----- FAQ methodology links ----- */
.faq .faq-links a {
  width: fit-content;
}

/* ----- Why submit ----- */
#why-submit {
  background: var(--surface-alt);
}
#why-submit .why-card {
  background: var(--surface);
}
#why-submit .why-card p {
  font-size: 1.5rem;
  margin-top: 0.8rem;
}

/* ----- FAQ ----- */
#faq {
  background: var(--surface-alt);
}

.faq details {
  padding: 2.8rem 3.2rem;
}
.faq details summary {
  position: relative;
  align-items: center;
  padding-right: 6rem;
  font-size: var(--font-size-xl);
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}
.faq details summary::-webkit-details-marker {
  display: none;
}
.faq details summary .faq-question {
  font: inherit;
  letter-spacing: inherit;
}
.faq details summary::before, .faq details summary::after {
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -1.8rem;
  width: auto;
  height: auto;
  background: none;
  font-family: "Material Symbols Outlined";
  font-size: 3.6rem;
  font-weight: 400;
  line-height: 1;
  color: var(--text-muted);
  font-feature-settings: "liga";
}
.faq details summary::after {
  content: "add";
  transform: none;
}
.faq details summary::before {
  content: "remove";
  opacity: 0;
  transform: rotate(-90deg);
}
.faq details > p,
.faq details > div {
  padding-right: 6rem;
  font-size: var(--font-size-base);
}
.faq:not(.js-faq) details[open] summary::after {
  opacity: 0;
  transform: rotate(90deg);
}
.faq:not(.js-faq) details[open] summary::before {
  opacity: 1;
  transform: none;
}
.faq.js-faq details.is-open summary::after {
  opacity: 0;
  transform: rotate(90deg);
}
.faq.js-faq details.is-open summary::before {
  opacity: 1;
  transform: none;
}

/* ----- Submit modal ----- */
#submitModal .modal-dialog {
  --bs-modal-width: 96rem;
}
#submitModal .modal-content {
  background: var(--surface-alt);
  border: 0;
  border-radius: 2.4rem;
}
#submitModal .modal-body {
  padding: 4.8rem;
}
@media (max-width: 767.98px) {
  #submitModal .modal-body {
    padding: 3.2rem 2rem 2.4rem;
  }
}
#submitModal h3 {
  font-size: var(--font-size-3xl);
  letter-spacing: -0.03em;
}
#submitModal .elig-tabs {
  gap: 2.4rem;
  margin: 1.6rem 0 1.2rem;
  overflow-x: auto;
  border-bottom: 0.1rem solid var(--border);
  scrollbar-width: none;
}
#submitModal .elig-tabs::-webkit-scrollbar {
  display: none;
}
#submitModal .elig-tabs .nav-link {
  padding: 0.8rem 0;
  margin-bottom: -0.1rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--text-muted);
  background: none;
  border: 0;
  border-bottom: 0.3rem solid transparent;
  border-radius: 0;
}
#submitModal .elig-tabs .nav-link:hover {
  color: var(--text);
}
#submitModal .elig-tabs .nav-link.active {
  color: var(--text);
  border-bottom-color: var(--brand);
}
#submitModal .elig-lead {
  margin-bottom: 0.4rem;
}
#submitModal .elig-list {
  margin: 0;
}
#submitModal .elig-list .elig-row {
  display: grid;
  grid-template-columns: 19rem 1fr;
  gap: 2rem;
  padding: 1.2rem 0;
}
#submitModal .elig-list .elig-row dt {
  font-weight: 700;
  color: var(--text);
}
#submitModal .elig-list .elig-row dd {
  margin: 0;
}
@media (max-width: 575.98px) {
  #submitModal .elig-list .elig-row {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
}
#submitModal .elig-list.elig-sub {
  padding: 0.4rem 1.6rem;
  background: var(--surface-alt);
  border-radius: 1.2rem;
}
#submitModal .accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-border-width: 0;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-active-bg: transparent;
  --bs-accordion-active-color: var(--text);
}
#submitModal .accordion .accordion-item {
  margin-bottom: 1.2rem;
  border: 0;
  border-radius: var(--bs-border-radius-xl) !important;
  background: var(--bs-body-bg);
  overflow: hidden;
}
#submitModal .accordion .accordion-item .accordion-button {
  padding: 2.8rem 7.6rem 2.8rem 3.2rem;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: var(--font-size-xl);
  font-weight: 650;
  color: var(--text);
}
#submitModal .accordion .accordion-item .accordion-button::before, #submitModal .accordion .accordion-item .accordion-button::after {
  position: absolute;
  top: 50%;
  right: 3.2rem;
  margin-top: -1.8rem;
  width: auto;
  height: auto;
  background: none;
  font-family: "Material Symbols Outlined";
  font-size: 3.6rem;
  font-weight: 400;
  line-height: 1;
  color: var(--text-muted);
  font-feature-settings: "liga";
}
#submitModal .accordion .accordion-item .accordion-button::after {
  content: "add";
  transform: none;
}
#submitModal .accordion .accordion-item .accordion-button::before {
  content: "remove";
  opacity: 0;
  transform: rotate(-90deg);
}
#submitModal .accordion .accordion-item .accordion-button:not(.collapsed) {
  box-shadow: none;
  background: transparent;
  color: var(--text);
}
#submitModal .accordion .accordion-item .accordion-button:not(.collapsed)::after {
  opacity: 0;
  transform: rotate(90deg);
}
#submitModal .accordion .accordion-item .accordion-button:not(.collapsed)::before {
  opacity: 1;
  transform: none;
}
#submitModal .accordion .accordion-item .accordion-button:not(.collapsed) .acc-num {
  background: var(--brand);
  color: #fff;
}
#submitModal .accordion .accordion-item .accordion-button:focus {
  box-shadow: none;
}
#submitModal .accordion .accordion-item .accordion-body {
  padding: 0 7.6rem 2.8rem 3.2rem;
  font-size: var(--font-size-base);
  line-height: 1.55;
}
#submitModal .accordion .accordion-item .accordion-body b {
  font-size: var(--font-size-base);
}
#submitModal .acc-num {
  width: 3.2rem;
  height: 3.2rem;
  flex: 0 0 auto;
  background: var(--surface-alt);
  color: var(--brand-dark);
  font-size: var(--font-size-sm);
  font-weight: 800;
}
#submitModal .field-label {
  font-size: var(--font-size-sm);
  letter-spacing: 0.05em;
  color: var(--brand-dark);
}
#submitModal #modalStepChecklist > p,
#submitModal #modalStepDone > p {
  font-size: var(--font-size-lg);
}

/* ----- Dark mode ----- */
[data-bs-theme=dark] .link-brand {
  color: var(--link-blue);
}
[data-bs-theme=dark] .stat b,
[data-bs-theme=dark] .hero .eyebrow .rotator {
  color: var(--brand-dark);
}
[data-bs-theme=dark] .hero .page-title {
  color: var(--text);
}
[data-bs-theme=dark] .landing-layout {
  --bs-body-bg: var(--surface);
  --bs-body-bg-rgb: 23, 32, 51;
  background: var(--bg);
}
[data-bs-theme=dark] .band-dark,
[data-bs-theme=dark] .cta-final {
  background: var(--surface);
}
[data-bs-theme=dark] #submitModal .acc-num {
  color: var(--brand-dark);
}

/* ----- Very large screens -----
 * Everything is sized in rem, so raising the root size scales the whole page; the Bootstrap container (and with it the
 * floating header, which is a .container too) grows by the same factor (the 132rem below is the usual 1320px at the old 10px root) so the content keeps its proportion of the screen. */
@media (min-width: 2200px) {
  html {
    font-size: 75%;
  }
  .container {
    max-width: 132rem;
  }
}
@media (min-width: 3000px) {
  html {
    font-size: 100%;
  }
  .container {
    max-width: 132rem;
  }
}
/* ----- Motion -----
 * Everything below is progressive: the hidden "before" states only exist while landing.js has added
 * .reveal / .reveal-chart (it skips both when the visitor prefers reduced motion), so nothing can
 * get stuck invisible. The hero artwork is deliberately not animated. */
html {
  scroll-padding-top: 11rem;
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(2.4rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes faq-open {
  from {
    opacity: 0;
    transform: translateY(-0.8rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
  .hero .row > div:first-child > * {
    animation: rise-in 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  }
  .hero .row > div:first-child > *:nth-child(2) {
    animation-delay: 0.1s;
  }
  .hero .row > div:first-child > *:nth-child(3) {
    animation-delay: 0.2s;
  }
  .hero .row > div:first-child > *:nth-child(4) {
    animation-delay: 0.3s;
  }
  .reveal {
    opacity: 0;
    transform: translateY(2.4rem);
  }
  .reveal.reveal-pop {
    transform: translateY(1.6rem) scale(0.94);
  }
  .reveal.in {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0ms), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0ms);
  }
  .stat,
  .card-box {
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
  }
  .stat:hover,
  .card-box:hover {
    transform: translateY(-0.5rem);
    box-shadow: 0 1.6rem 3.2rem rgba(0, 0, 0, 0.1);
  }
  .btn-brand {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  }
  .btn-brand:hover {
    transform: translateY(-0.2rem);
    box-shadow: 0 0.8rem 2rem var(--brand-soft);
  }
  .faq details summary::before, .faq details summary::after,
  #submitModal .accordion-button::before,
  #submitModal .accordion-button::after {
    transition: opacity 0.25s ease, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.25s ease;
  }
  .faq details summary:hover::before, .faq details summary:hover::after,
  #submitModal .accordion-button:hover::before,
  #submitModal .accordion-button:hover::after {
    color: var(--brand-dark);
  }
  .faq:not(.js-faq) details[open] > :not(summary) {
    animation: faq-open 0.35s ease;
  }
  .hero::before, .hero::after {
    translate: calc(var(--mx, 0) * var(--glow) * 0.1) calc(var(--my, 0) * var(--glow) * 0.07);
    transition: translate 0.8s ease-out;
  }
  .hero::before {
    animation: drift-a 10s ease-in-out infinite alternate;
  }
  .hero::after {
    animation: drift-b 12s ease-in-out infinite alternate;
  }
  .hero .row > div:first-child > :nth-child(4) {
    position: relative;
  }
  .hero .row > div:first-child > :nth-child(4)::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    animation: cta-pulse 2.8s ease-out 1.6s infinite;
    transition: opacity 0.2s ease;
  }
  .hero .row > div:first-child > :nth-child(4):hover::after {
    opacity: 0;
  }
}
@keyframes drift-a {
  to {
    transform: translate3d(calc(var(--glow) * 0.21), calc(var(--glow) * 0.14), 0) scale(1.18);
  }
}
@keyframes drift-b {
  to {
    transform: translate3d(calc(var(--glow) * -0.19), calc(var(--glow) * -0.12), 0) scale(1.22);
  }
}
@keyframes cta-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 45%, transparent);
  }
  70%, 100% {
    box-shadow: 0 0 0 1.6rem transparent;
  }
}
/* ----- Hero art intro -----
 * Plays once: the panel and header settle in, then the three rows arrive one after another.
 * After that landing.js takes over and rolls the "Live" highlight down the rows (see .is-live above).
 * landing.js adds .paused while the art is off-screen or the tab is hidden, so it never plays unseen. */
@keyframes art-ring {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  6% {
    opacity: 0.7;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(2.6);
  }
}
@keyframes art-panel {
  0%, 0% {
    opacity: 0;
    transform: translateY(22px) scale(0.94);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  20.5882352941%, 100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes art-bar {
  0%, 11.7647058824% {
    opacity: 0;
    transform: scaleX(0);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  26.4705882353%, 100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes art-bar-light {
  0%, 16.1764705882% {
    opacity: 0;
    transform: scaleX(0);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  30.8823529412%, 100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes art-divider {
  0%, 23.5294117647% {
    opacity: 0;
    transform: scaleX(0);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  35.2941176471%, 100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes art-item-1 {
  0%, 32.3529411765% {
    opacity: 0;
    transform: translateY(26px) scale(0.96);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  52.9411764706%, 100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes art-item-2 {
  0%, 50% {
    opacity: 0;
    transform: translateY(26px) scale(0.96);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  70.5882352941%, 100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes art-item-3 {
  0%, 67.6470588235% {
    opacity: 0;
    transform: translateY(26px) scale(0.96);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  88.2352941176%, 100% {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .hero .hero-art .art-bar,
  .hero .hero-art .art-bar-light,
  .hero .hero-art .art-divider {
    transform-origin: left center;
  }
  .hero .hero-art .art-panel {
    animation: art-panel 3.4s both;
  }
  .hero .hero-art .art-bar {
    animation: art-bar 3.4s both;
  }
  .hero .hero-art .art-bar-light {
    animation: art-bar-light 3.4s both;
  }
  .hero .hero-art .art-divider {
    animation: art-divider 3.4s both;
  }
  .hero .hero-art .art-item-1 {
    animation: art-item-1 3.4s both;
  }
  .hero .hero-art .art-item-2 {
    animation: art-item-2 3.4s both;
  }
  .hero .hero-art .art-item-3 {
    animation: art-item-3 3.4s both;
  }
  .hero .hero-art.paused, .hero .hero-art.paused * {
    animation-play-state: paused;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero .hero-art * {
    transition: none !important;
    animation: none !important;
  }
}
/* ----- Small screens -----
 * Phones (< 768px) and a few tablet tweaks. Kept in one block, after everything else, so each rule
 * simply overrides the desktop value above it. Body copy is 1.3rem; titles are one step smaller. */
@media (max-width: 991.98px) {
  .hero .hero-art {
    display: block;
    max-width: 42rem;
    margin: 0 auto;
  }
}
@media (max-width: 767.98px) {
  .landing-layout .container {
    width: 90%;
  }
  .section-pad {
    padding: 4rem 0;
    font-size: 1.3rem;
  }
  .hero .page-title,
  .band-dark .page-title {
    font-size: 2.8rem;
  }
  .section-title {
    font-size: 2.2rem;
  }
  .item-title {
    margin-bottom: 1rem;
    font-size: 1.6rem;
  }
  .band-dark .item-title-lg {
    margin-bottom: 1rem;
    font-size: 1.6rem;
  }
  .page-lead,
  .section-intro,
  .band-intro,
  .band-text,
  .text-sm {
    font-size: 1.3rem;
  }
  .hero {
    padding: 10rem 0 2.4rem;
  }
  .hero .eyebrow {
    font-size: 1.1rem;
  }
  .hero .hero-art {
    max-width: 30rem;
  }
  .hero .btn-lg {
    padding: 1.1rem 2rem;
    font-size: 1.4rem;
  }
  .logo-strip {
    padding: 3.2rem 0;
  }
  .logo-strip .logo-track-wrap .logo-track {
    gap: 4.4rem;
  }
  .logo-strip .logo-track-wrap .logo-track .company-logo {
    height: 3rem;
    max-width: 15rem;
  }
  #why-submit .why-card p {
    font-size: 1.3rem;
  }
  .stat {
    padding: 1.8rem 2rem;
  }
  .stat .stat-value {
    margin-bottom: 0.6rem;
    font-size: 3.2rem;
  }
  .stat p {
    font-size: 1.3rem;
  }
  .flip-card {
    min-height: 16rem;
  }
  .flip-card .flip-inner {
    min-height: 16rem;
  }
  .flip-card .flip-front,
  .flip-card .flip-back {
    padding: 2rem;
  }
  .flip-card .step-num {
    font-size: 3.2rem;
  }
  .flip-card .flip-back p {
    font-size: 1.3rem;
  }
  .band-dark .types-intro {
    margin-bottom: 3.2rem;
  }
  .band-dark .type-tabs .nav-link {
    padding: 0.8rem 1.2rem;
    font-size: 1.4rem;
  }
  .band-dark .type-panel {
    padding: 1.6rem;
    border-radius: 1.6rem;
  }
  .band-dark .type-tabs-wrap {
    margin-bottom: 2.4rem;
  }
  .band-dark .type-lead {
    margin-bottom: 2.4rem;
    font-size: 1.3rem;
  }
  .band-dark .type-core {
    padding: 2.2rem 0;
  }
  .band-dark .type-core .type-core-title {
    margin-bottom: 1rem !important;
  }
  .band-dark .type-core .band-text {
    font-size: 1.3rem;
  }
  .band-dark .type-core-title {
    font-size: 2rem;
  }
  .band-dark .type-extended-label {
    margin: 2.4rem 0 2rem;
    font-size: 1.15rem;
  }
  .band-dark .type-list {
    --bs-gutter-y: 2.2rem;
  }
  .band-dark .type-list .type-item .band-text {
    font-size: 1.3rem;
  }
  .band-dark .section-pill {
    font-size: 1.15rem;
  }
  .band-dark .quote-bubble {
    padding: 1.8rem;
  }
  .band-dark .quote-bubble .quote-avatar {
    width: 5.2rem;
    height: 5.2rem;
  }
  .band-dark .quote-bubble .quote-avatar .quote-avatar-logo {
    width: 3.2rem;
  }
  .band-dark .quote-bubble .quote-name {
    font-size: 1.4rem;
  }
  .band-dark .quote-bubble .quote-name span {
    font-size: 1.2rem;
  }
  .quote-text {
    margin-bottom: 1.4rem;
    font-size: 1.6rem;
  }
  .team-carousel {
    --team-gap: 1.6rem;
  }
  .team-carousel .member {
    flex-basis: 100%;
  }
  .team-carousel .team-prev {
    left: -1.4rem;
  }
  .team-carousel .team-next {
    right: -1.4rem;
  }
  .member h3 {
    font-size: 1.5rem;
  }
  .member p {
    font-size: 1.2rem;
  }
  .cta-final {
    padding: 3.2rem 1.6rem;
    border-radius: 2rem;
  }
  .cta-final .band-intro {
    font-size: 1.3rem;
  }
  .faq details {
    padding: 1.4rem 1.6rem;
  }
  .faq details summary {
    padding-right: 3.4rem;
    font-size: 1.45rem;
  }
  .faq details summary::before, .faq details summary::after {
    margin-top: -1.1rem;
    font-size: 2.2rem;
  }
  .faq details > p,
  .faq details > div {
    padding-right: 0;
    font-size: 1.3rem;
  }
  #submitModal .modal-content {
    border-radius: 2rem;
  }
  #submitModal .modal-body {
    padding: 3rem 1.2rem 1.8rem;
  }
  #submitModal h3 {
    font-size: 2.2rem;
  }
  #submitModal .accordion .accordion-item {
    margin-bottom: 0.8rem;
  }
  #submitModal .accordion .accordion-item .accordion-button {
    padding: 1.5rem 4.4rem 1.5rem 1.5rem;
    font-size: 1.45rem;
  }
  #submitModal .accordion .accordion-item .accordion-button::before, #submitModal .accordion .accordion-item .accordion-button::after {
    right: 1.4rem;
    margin-top: -1.1rem;
    font-size: 2.2rem;
  }
  #submitModal .accordion .accordion-item .accordion-body {
    padding: 0 1.5rem 1.5rem;
    font-size: 1.3rem;
  }
  #submitModal .accordion .accordion-item .accordion-body b {
    font-size: 1.3rem;
  }
  #submitModal .acc-num {
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1.1rem;
  }
  #submitModal #modalStepChecklist > p,
  #submitModal #modalStepDone > p {
    font-size: 1.3rem;
  }
}