/* ============================================================
   DataReportCtaSection — Figma 6JdV8D0ZGECx2whzGAnTrs, node 6797:2730.
   Spec: DataReportCtaSection.figma.md.
   ============================================================ */

/* One panel across the CTA and the footer, with a vertical gradient from the
   cream `--secondary` at the top to `--background` at the bottom — Figma:
   `bg-gradient-to-b from-[#faf6f0] to-[#f5f0e7]`. Verified by sampling the
   render: (249,246,239) near the top, (245,240,231) near the bottom.

   Same 16px white border trick as DataReportQuoteSection: it draws the page
   inset, participates in the radius, and cannot margin-collapse. */
.data-report-cta {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  background:     linear-gradient(180deg, var(--secondary) 0%, var(--background) 100%);
  border:         16px solid var(--dr-ground);
  border-radius:  48px;   /* Figma rounded-6xl; no 48px radius token */
  box-sizing:     border-box;
  font-family:    var(--font-family-default);
}


/* ---- CTA (6797:2731) -------------------------------------- */

.data-report-cta__cta {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  width:          100%;
  padding:        8rem 0;   /* 128px — Figma py-128 */
  box-sizing:     border-box;
}

/* Figma: max-w 1024, gap 32, items-center. Both columns are `flex: 1 0 0`, so
   at 1024 they land on 496 each — the same width the form card has in
   DataReportQuoteSection, reached a different way. */
.data-report-cta__row {
  display:     flex;
  align-items: center;
  gap:         var(--spacing-8);   /* 32px */
  width:       100%;
  max-width:   1024px;
  padding:     0 2rem;
  box-sizing:  border-box;
}

.data-report-cta__intro {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  gap:             2.25rem;          /* 36px */
  flex:            1 1 0;
  min-width:       0;
  padding-right:   var(--spacing-8); /* 32px */
}

.data-report-cta__body {
  margin:      0;
  max-width:   800px;
  font-size:   var(--font-size-xl);     /* 20px */
  line-height: var(--line-height-xl);   /* 28px */
  color:       var(--foreground);
}

.data-report-cta__form {
  display:   flex;
  flex:      1 1 0;
  min-width: 0;
}


/* ---- Footer inside the panel (6797:2778) ------------------ */

/* `SiteFooter` paints its own gradient over `--background`, which would sit
   as a visible block on top of this panel's gradient. Inside the panel the
   panel IS the ground, so the footer goes transparent. Scoped here, so the
   shared footer is unchanged everywhere else. */
.data-report-cta .site-footer {
  background: none;
}

/* Figma insets the footer row 64px from the panel edge; `.container-wide`
   centres to 48px inside this 1480-wide panel. The extra 16px closes it. */
.data-report-cta .site-footer__inner {
  padding-inline: calc(3rem + 16px);
}


/* ---- Responsive ------------------------------------------- */

/* Same step as the page's white sections (see ../data-report.css). */
@media (max-width: 1199px) {
  .data-report-cta__cta {
    padding: 6rem 0;   /* 96px */
  }
}

@media (max-width: 991px) {
  .data-report-cta {
    border-radius: 32px;
  }

  .data-report-cta__cta {
    padding: 5rem 0;   /* 80px */
  }

  .data-report-cta__row {
    flex-direction: column;
    align-items:    stretch;
    gap:            3rem;
  }

  /* Same text-vs-card split as the quote panel: stacked, the intro copy is
     inset 16px further than the form card beneath it. */
  .data-report-cta__intro {
    padding: 0 1rem;
  }

  .data-report-cta .site-footer__inner {
    padding-inline: 44px;
  }
}

/* Mobile is MEASURED against Figma CRrdcRif8N6jgEWK28BDb5 node 6853:14957
   — see ../DataReportPage.mobile.figma.md. */
@media (max-width: 767px) {
  /* Panel at x=12, w=378 — the same 12px white gutter as the quote panel. */
  .data-report-cta {
    border-width:  12px;
    border-radius: 24px;
  }

  /* 16px panel padding, not 64 — and the same inset split as the quote panel:
     the form card takes that padding as-is (x=28, w=346) while the intro copy
     is inset a further 16px (heading x=44, w=314). */
  .data-report-cta__cta {
    padding: 1rem 0;
  }

  .data-report-cta__row {
    gap:     1.5rem;   /* 24px — Figma intro ends y=5495, form starts 5519 */
    padding: 0 1rem;
  }

  .data-report-cta__intro {
    padding: 1rem;
  }

  /* 18px/28px — see ../data-report.css. */
  .data-report-cta__body {
    font-size:   var(--font-size-lg);
    line-height: var(--line-height-lg);
  }

  /* Figma insets the footer row 32px inside the panel (logo x=44 overall). */
  .data-report-cta .site-footer__inner {
    padding-inline: 2rem;
  }

  /* `SiteFooter` carries its own 48px/32px block padding, which is right when
     it is the last thing on a page but not when it is a row INSIDE this panel:
     it ran 32px past the panel's 16px bottom inset. Scoped here, so the shared
     footer is untouched everywhere else — same reasoning as the
     `background: none` override above.

     Figma (6853:14957) stacks the gap out of TWO values, which is why 24px
     looked cramped when only the first was counted: the Form ends at y=784 and
     the Footer frame starts at 808 (24px), and that frame then carries its own
     24px top padding before the logo (6853:15068 at y=24). So the card-to-logo
     distance is 48, not 24.

     32px here + `__cta`'s own 16px bottom padding = that 48. The 16px bottom
     is the panel's own inset: Figma's terms row ends at 1016 in a 1033-tall
     panel. */
  .data-report-cta .site-footer {
    padding-block: 2rem 1rem;   /* 32px (+ __cta's 16px = Figma's 48) / 16px */
  }
}

/* ============================================================
   SiteFooter — Site footer with 6-col sitemap and bottom bar
   Design tokens from src/styles/tokens.css.

   Layout (Figma 832:12962):
     96px top padding, 48px bottom padding, 64px side padding
     80px gap between sitemap and bottom bar
     Sitemap: 6 equal columns, gap 32px
     Bottom bar: logo+copyright left | legal links center | social right
   ============================================================ */

.site-footer {
  /* Bottom 764px of a 1464px Figma gradient (continues from CtaSection).
     Picks up at 47.8% = rgba(222,215,204,0.5) → full end colour. */
  background:     linear-gradient(
                    180deg,
                    rgba(222, 215, 204, 0.5) 0%,
                    rgba(214, 207, 194, 0.5) 100%
                  ),
                  var(--background);
  font-family:    var(--font-family-default);
  width:          100%;
  box-sizing:     border-box;
  padding:        6rem 0 3rem;      /* 96px top, 48px bottom — sides via container-wide */
}

.site-footer__inner {
  display:        flex;
  flex-direction: column;
  gap:            5rem;             /* 80px */
}


/* ============================================================
   Sitemap — 6 equal columns
   ============================================================ */

.site-footer__sitemap {
  display:         flex;
  justify-content: space-between;
  gap:             2rem;    /* 32px */
  width:           100%;
  list-style:      none;
  margin:          0;
  padding:         0;
}

.site-footer__col {
  display:        flex;
  flex-direction: column;
  gap:            1.5rem;    /* 24px */
}

.site-footer__col-heading {
  margin:      0;
  font-size:   1rem;         /* 16px */
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  color:       var(--foreground);
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}

/* Toggle button — inherits heading styles, no button chrome */
.site-footer__col-toggle {
  background:  none;
  border:      none;
  padding:     0;
  cursor:      default;
  font-family: var(--font-family-default);
  text-align:  left;
  display:     flex;
  align-items: center;
  justify-content: space-between;
  width:       100%;
}

/* Chevron — hidden on desktop */
.site-footer__col-chevron {
  display: none;
}

.site-footer__col-links {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    flex;
  flex-direction: column;
  gap:        1.5rem;   /* 24px */
}

.site-footer__link {
  font-size:       0.875rem;   /* 14px */
  font-weight:     var(--font-weight-regular);
  line-height:     1.5;
  color:           var(--foreground);
  text-decoration: none;
  display:         block;
  transition:      opacity 150ms ease;
}

.site-footer__link:hover {
  opacity: 0.7;
}

.site-footer__link--bold {
  font-weight: var(--font-weight-bold);
}


/* ---- "Now hiring" standalone tablet/mobile link ----------- */
.site-footer__now-hiring {
  display: none;   /* hidden on desktop */
}

.site-footer__now-hiring-link {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  width:           100%;
  padding:         0.625rem 0.75rem 0.625rem 1rem;
  font-size:       var(--font-size-base);
  font-weight:     var(--font-weight-bold);
  line-height:     var(--line-height-base);
  color:           var(--info, #59b7d9);
  text-decoration: none;
  border-radius:   12px;
  transition:      opacity 150ms ease;
}

.site-footer__now-hiring-link:hover {
  opacity: 0.8;
}

.site-footer__now-hiring-link svg {
  flex-shrink: 0;
  width:       18px;
  height:      18px;
}

.site-footer__now-hiring-link svg path {
  stroke: currentColor;
}


/* ============================================================
   Bottom bar
   ============================================================ */

.site-footer__bar {
  display:     flex;
  align-items: flex-end;
  flex-wrap:   wrap;
  gap:         0.9375rem 0;   /* 15px row gap */
  justify-content: space-between;
  padding:     1px 0;
}

/* Brand: logo + copyright */
.site-footer__brand {
  display:        flex;
  flex-direction: column;
  gap:            1rem;    /* 16px */
  justify-content: flex-end;
}


.site-footer__copyright {
  margin:      0;
  font-size:   var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-xs);
  color:       var(--muted-foreground);
  white-space: pre;
}

/* Legal links */
.site-footer__legal {
  display:     flex;
  gap:         2rem;    /* 32px */
  align-items: flex-start;
  flex-wrap:   wrap;
}

.site-footer__legal-link {
  font-size:       var(--font-size-xs);
  font-weight:     var(--font-weight-bold);
  line-height:     var(--line-height-xs);
  color:           var(--foreground);
  text-decoration: none;
  white-space:     nowrap;
  transition:      opacity 150ms ease;
}

.site-footer__legal-link:hover {
  opacity: 0.7;
}

/* Social icons */
.site-footer__social {
  display:     flex;
  align-items: center;
  gap:         2rem;    /* 32px */
  height:      32px;
}

.site-footer__social-link {
  display:    flex;
  align-items: center;
  color:       var(--foreground);
  width:       24px;
  height:      24px;
  flex-shrink: 0;
  transition:  opacity 150ms ease;
}

.site-footer__social-link:hover {
  opacity: 0.7;
}

.site-footer__social-link svg {
  width:  24px;
  height: 24px;
}


/* ============================================================
   Tablet (≤991px) — accordion nav
   ============================================================ */

@media (max-width: 991px) {
  .site-footer {
    padding: 5rem 0 2.5rem;   /* 80px top */
  }

  .site-footer__inner {
    gap: 5rem;   /* 80px */
  }

  .site-footer__sitemap {
    display:        flex;
    flex-direction: column;
    gap:            0.625rem;   /* 10px */
  }

  .site-footer__col {
    gap:           0;
    border-radius: 12px;
    overflow:      hidden;
  }

  .site-footer__col-toggle {
    cursor:  pointer;
    padding: 0.625rem 0.75rem 0.625rem 1rem;   /* 10px 12px 10px 16px */
  }

  .site-footer__col-chevron {
    display:     block;
    flex-shrink: 0;
    width:       18px;
    height:      18px;
    color:       var(--muted-foreground);
    transition:  transform 200ms ease;
  }

  .site-footer__now-hiring-link .site-footer__col-chevron {
    color: inherit;
  }

  .site-footer__col--open {
    background: var(--accent);
  }

  .site-footer__col--open .site-footer__col-chevron {
    transform: rotate(180deg);
  }

  /* Smooth open/close via grid row animation */
  .site-footer__col-body {
    display:            grid;
    grid-template-rows: 0fr;
    transition:         grid-template-rows 220ms ease;
  }

  .site-footer__col--open .site-footer__col-body {
    grid-template-rows: 1fr;
  }

  .site-footer__col-links-wrap {
    overflow: hidden;   /* clips without padding — allows full collapse to 0 */
  }

  .site-footer__col-links {
    padding: 0.5rem 1rem 1rem;   /* 8px 16px 16px */
  }

  .site-footer__col-links {
    gap: 1.25rem;
  }

  .site-footer__link {
    font-size:   var(--font-size-base);
    line-height: var(--line-height-base);
  }

  /* "Now hiring" standalone link — tablet only */
  .site-footer__now-hiring {
    display: flex;
  }

  .site-footer__link--tablet-hidden {
    display: none;
  }

  .site-footer__bar {
    gap:            2rem;
    flex-direction: column;
    align-items:    flex-start;
  }

  .site-footer__legal {
    gap:   1rem;
    order: 1;
  }
}


/* ============================================================
   Mobile (≤479px)
   ============================================================ */

@media (max-width: 479px) {
  .site-footer {
    padding: 3rem 0 2rem;
  }

  .site-footer__bar {
    gap: 2.25rem;   /* 36px */
  }
}