/* stylelint-disable no-descending-specificity -- BEM-by-component ordering; see ./footer.md */

/* See ./footer.md for design notes and rationale. */

/* ============================================================
   1. Page-level chrome (the <footer> element wrapping the block)
   ============================================================ */

footer {
  --footer-surface-color: var(--ll-color-bg-inverse);
  --footer-text-color: var(--ll-color-text-inverse);
  --footer-muted-color: var(--ll-color-text-muted);
  --footer-divider-color: var(--ll-color-border-inverse);
  --footer-accent-color: var(--ds-color-brand-tint); /* #d9e9ee misty-blue / Color/Highlight/brand-light */
  --footer-tagline-opacity: 0.7;
  --footer-divider-opacity: 0.5;
  --footer-separator-opacity: 0.3;

  background-color: var(--footer-surface-color);
  color: var(--footer-text-color);
}

footer:has(.footer--theme-light),
.footer--theme-light {
  --footer-surface-color: var(--ll-color-bg-default);
  --footer-text-color: var(--ll-color-text-primary);
  --footer-divider-color: var(--ll-color-border-default);
  --footer-accent-color: var(--ll-color-text-primary); /* brand-dark #00445a matches Figma Color/Content/primary on light */
}

/* ============================================================
   2. Block root + inner container
   ============================================================ */

.footer {
  font-family: var(--ll-text-body-base-family);
  font-size: var(--ll-text-body-base-size);
  line-height: var(--ll-text-body-base-line-height);
  letter-spacing: var(--ll-text-body-base-letter-spacing);
  font-weight: var(--ll-text-body-base-weight);
  color: var(--footer-text-color);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--ll-space-9);
  padding-block: var(--ll-space-9);
}

@media (width >= 768px) {
  .footer__inner {
    gap: var(--ll-space-12);
    padding-block: var(--ll-space-15);
  }
}

@media (width >= 1024px) {
  .footer__inner {
    gap: var(--ll-space-13);
  }
}

/* ============================================================
   3. Primary row - signup + mega-menu
   ============================================================ */

.footer__primary,
.footer__inner > .grid {
  row-gap: var(--ll-space-9);
}

/* Authored Signup & Links gap — blank falls back to --ll-grid-gutter. */
.footer .grid.footer__primary-grid {
  gap: var(--footer-primary-gap-sm, var(--ll-grid-gutter)); /* matches global rhythm when unset */
}

.footer__primary {
  display: flex;
  flex-direction: column;
  gap: var(--ll-space-9);
}

@media (width >= 768px) {
  .footer .grid.footer__primary-grid {
    gap: var(
      --footer-primary-gap-md,
      var(--footer-primary-gap-sm, var(--ll-grid-gutter))
    );
  }
}

@media (width >= 768px) and (width < 1024px) {
  .footer__primary,
  .footer__inner > .grid {
    row-gap: var(--ll-space-12);
  }
}

@media (width >= 1024px) {
  .footer__primary {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--ll-space-8);
  }

  .footer .grid.footer__primary-grid {
    gap: var(
      --footer-primary-gap-lg,
      var(--footer-primary-gap-md, var(--footer-primary-gap-sm, var(--ll-grid-gutter)))
    );
  }
}

@media (width >= 1440px) {
  .footer .grid.footer__primary-grid {
    gap: var(
      --footer-primary-gap-xl,
      var(
        --footer-primary-gap-lg,
        var(--footer-primary-gap-md, var(--footer-primary-gap-sm, var(--ll-grid-gutter)))
      )
    );
  }
}

/* ============================================================
   4. Signup form
   ============================================================ */

.footer__signup {
  display: flex;
  flex-direction: column;
  gap: var(--ll-space-7);
  text-align: center;
}

@media (width >= 768px) {
  .footer__signup {
    gap: var(--ll-space-8);
  }
}

@media (width >= 1024px) {
  .footer__signup {
    flex: 1 1 0;
    max-width: 560px;
    padding-right: var(--ll-space-15);
    text-align: left;
  }
}

.footer__signup-copy {
  display: flex;
  flex-direction: column;
  gap: var(--ll-space-4);
}

@media (width >= 768px) {
  .footer__signup-copy {
    gap: var(--ll-space-5);
  }
}

/* Playfair Display + medium (Figma SECONDARY/H5|H6/Medium); size downshifts at SM in Section 11. */
.footer__signup-title {
  margin: 0;
  font-family: var(--ds-font-family-secondary);
  font-size: var(--ll-text-h5-size);
  line-height: var(--ll-text-h5-line-height);
  letter-spacing: var(--ll-text-h5-letter-spacing);
  font-weight: var(--ds-font-weight-medium);
  color: var(--footer-text-color);
  text-wrap: balance;
}

.footer__signup-description {
  margin: 0;
  font-family: var(--ll-text-body-base-family);
  font-size: var(--ll-text-body-base-size);
  line-height: var(--ll-text-body-base-line-height);
  letter-spacing: var(--ll-text-body-base-letter-spacing);
  font-weight: var(--ll-text-body-base-weight);
  color: var(--footer-text-color);
}

.footer__signup-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--ll-space-5);
}

@media (width >= 768px) {
  .footer__signup-form-group {
    gap: var(--ll-space-7);
  }
}

.footer__signup-form {
  --footer-signup-bg: var(--ll-color-bg-default);

  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  gap: var(--ll-space-3);
}

.footer__signup-form .footer__signup-input {
  flex: 1 1 auto;
  min-width: 0;
}

.footer__signup-form .footer__signup-cta {
  flex: 0 0 auto;
}

/* Forced onto its own row via flex-basis; the form's gap handles vertical spacing. */
.footer__signup-form .footer__signup-feedback {
  flex: 1 0 100%;
}

.footer__signup-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.footer__signup-input {
  appearance: none;
  background: var(--footer-signup-bg);
  color: var(--ll-color-text-primary);
  border: var(--ll-border-width-hairline) solid var(--footer-divider-color);
  border-radius: var(--ll-radius-pill);
  padding: var(--ll-space-4) var(--ll-space-7);
  font-family: var(--ll-text-body-lg-family);
  font-size: var(--ll-text-body-lg-size);
  line-height: var(--ll-text-body-lg-line-height);
  letter-spacing: var(--ll-text-body-lg-letter-spacing);
  font-weight: var(--ll-text-body-lg-weight);
}

.footer__signup-input::placeholder {
  color: var(--ll-color-text-muted);
}

.footer__signup-input:focus-visible {
  outline: var(--ll-border-width-strong) solid var(--ll-color-focus-ring);
  outline-offset: 2px;
}

.footer__signup-cta {
  appearance: none;
  cursor: pointer;
  background: transparent;
  color: var(--footer-text-color);
  border: var(--ll-border-width-hairline) solid var(--footer-divider-color);
  border-radius: var(--ll-radius-pill);
  padding: var(--ll-space-5) var(--ll-space-7);
  font-family: var(--ll-text-button-lg-family);
  font-size: var(--ll-text-button-lg-size);
  line-height: var(--ll-text-button-lg-line-height);
  letter-spacing: var(--ll-text-button-lg-letter-spacing);
  font-weight: var(--ll-text-button-lg-weight);
  transition:
    background-color var(--ll-motion-hover-duration) var(--ll-motion-hover-easing),
    color var(--ll-motion-hover-duration) var(--ll-motion-hover-easing);
}

.footer__signup-cta:hover,
.footer__signup-cta:focus-visible {
  background: var(--footer-text-color);
  color: var(--footer-surface-color);
}

@media (width >= 768px) {
  .footer__signup-form {
    gap: var(--ll-space-5); /* Figma MD+ widens from SM 8px to 16px */
  }
}

.footer__signup-privacy {
  margin: 0;
  font-family: var(--ll-text-body-xs-family);
  font-size: var(--ll-text-body-xs-size);
  line-height: var(--ll-text-body-xs-line-height);
  letter-spacing: var(--ll-text-body-xs-letter-spacing);
  font-weight: var(--ll-text-body-xs-weight);
  color: var(--footer-text-color);
}

.footer__signup-privacy a {
  color: var(--footer-accent-color);
  font-weight: var(--ll-text-tagline-sm-weight);
  transition: opacity var(--ll-motion-hover-duration) var(--ll-motion-hover-easing);
}

.footer__signup-privacy a:hover,
.footer__signup-privacy a:focus-visible {
  opacity: 0.7;
}

/* Disabled while a submission is in flight (footer.js wire()). */
.footer__signup-cta[disabled] {
  opacity: var(--ll-opacity-secondary-text);
  cursor: not-allowed;
}

/* ------------------------------------------------------------
   4a. Signup feedback banner
   ------------------------------------------------------------ */

.footer__signup-feedback {
  margin: 0;
  font-family: var(--ll-text-body-sm-family);
  font-size: var(--ll-text-body-sm-size);
  line-height: var(--ll-text-body-sm-line-height);
  letter-spacing: var(--ll-text-body-sm-letter-spacing);
  font-weight: var(--ll-text-body-sm-weight);
  color: var(--footer-text-color);
}

.footer__signup-feedback--success {
  color: var(--ll-color-status-success);
}

.footer__signup-feedback--error {
  color: var(--ll-color-status-error);
}

.footer__signup-feedback--info {
  color: var(--ll-color-status-info);
}

/* 0x0 anchor for programmatic grecaptcha.render(); the auto-render path bypasses our submit validation. */
.footer__signup-recaptcha-anchor {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ============================================================
   5. Mega-menu (footer columns)
   Layout rules gated behind :not(.subgrid) so the global .subgrid
   utility owns the new @@grid@@/@@subgrid@@ authored shape.
   ============================================================ */

.footer__mega-menu:not(.subgrid) {
  display: grid;
  gap: var(--ll-space-8);
  grid-template-columns: 1fr;
}

@media (width >= 768px) {
  .footer__mega-menu:not(.subgrid) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ll-space-5);
  }
}

@media (width >= 1024px) {
  .footer__mega-menu:not(.subgrid) {
    flex: 1 1 auto;
    gap: var(--ll-space-8);
  }
}

.footer__menu-item-group {
  display: flex;
  flex-direction: column;
  gap: var(--ll-space-7);
}

.footer__menu-item-group-header {
  margin: 0;
  font-family: var(--ll-text-button-sm-family);
  font-size: var(--ll-text-button-sm-size);
  line-height: var(--ll-text-button-sm-line-height);
  letter-spacing: var(--ll-text-button-sm-letter-spacing);
  font-weight: var(--ll-text-button-sm-weight);
  color: var(--footer-text-color);
  opacity: var(--footer-tagline-opacity);
}

button.footer__menu-item-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ll-space-4);
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
}

@media (width >= 768px) {
  button.footer__menu-item-group-header {
    cursor: default;
  }
}

/* Chained with .footer__icon to beat the Section 10 base 16px sizing without !important. */
.footer__icon.footer__menu-item-group-header-chevron {
  width: 24px;
  height: 24px;
  flex: none;
  transition: transform var(--ll-motion-hover-duration) var(--ll-motion-hover-easing);
}

button.footer__menu-item-group-header[aria-expanded="true"]
  .footer__menu-item-group-header-chevron {
  transform: rotate(180deg);
}

@media (width >= 768px) {
  .footer__icon.footer__menu-item-group-header-chevron {
    display: none;
  }
}

.footer__menu-item-group-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ll-space-5);
}

/* SM accordion (Figma 22902:11828) - applied to both .subgrid and :not(.subgrid). */
@media (width < 768px) {
  .footer__mega-menu {
    row-gap: 0;
    border-top: var(--ll-border-width-hairline) solid var(--footer-divider-color);
    border-color: color-mix(in srgb, var(--footer-divider-color) 50%, transparent);
  }

  .footer__menu-item-group {
    border-bottom: var(--ll-border-width-hairline) solid var(--footer-divider-color);
    border-color: color-mix(in srgb, var(--footer-divider-color) 50%, transparent);
    padding-block: var(--ll-space-5);
  }

  button.footer__menu-item-group-header[aria-expanded="false"]
    + .footer__menu-item-group-items {
    display: none;
  }
}

.footer__menu-item-group-items > li {
  margin: 0;
}

.footer__mega-menu-link {
  display: inline-block;
  color: var(--footer-text-color);
  text-decoration: none;
  font-family: var(--ll-text-body-base-family);
  font-size: var(--ll-text-body-base-size);
  line-height: var(--ll-text-body-base-line-height);
  letter-spacing: var(--ll-text-body-base-letter-spacing);
  font-weight: var(--ll-text-body-base-weight);
  transition: opacity var(--ll-motion-hover-duration) var(--ll-motion-hover-easing);
}

.footer__mega-menu-link:hover,
.footer__mega-menu-link:focus-visible {
  opacity: 0.7;
}

/* ============================================================
   6. Disclaimers
   ============================================================ */

.footer__disclaimers {
  display: grid;
  gap: var(--ll-space-6);
}

@media (width >= 768px) {
  .footer__disclaimers--multi-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--ll-space-7);
  }
}

@media (width >= 1024px) {
  .footer__disclaimers--multi-column {
    column-gap: var(--ll-space-8);
  }
}

.footer__disclaimer--intro {
  grid-column: 1 / -1;
}

.footer__disclaimer-column {
  display: flex;
  flex-direction: column;
  gap: var(--ll-space-4);
}

.footer__disclaimer-column:has(.footer__disclaimer-group) {
  gap: var(--ll-space-5);
}

.footer__disclaimer-column .footer__disclaimer + .footer__disclaimer {
  margin-block-start: calc(-1 * var(--ll-space-4));
}

.footer__disclaimer-group {
  display: flex;
  flex-direction: column;
  gap: var(--ll-space-2);
}

.footer__disclaimer-label {
  margin: 0;
  font-family: var(--ll-text-button-sm-family);
  font-size: var(--ll-text-button-sm-size);
  line-height: var(--ll-text-button-sm-line-height);
  letter-spacing: var(--ll-text-button-sm-letter-spacing);
  font-weight: var(--ll-text-button-sm-weight);
  color: var(--footer-text-color);
  opacity: var(--footer-tagline-opacity);
}

.footer__disclaimer-heading {
  margin: 0;
  font-family: var(--ll-text-button-base-family);
  font-size: var(--ll-text-button-base-size);
  line-height: var(--ll-text-button-base-line-height);
  letter-spacing: var(--ll-text-button-base-letter-spacing);
  font-weight: var(--ll-text-button-base-weight);
  color: var(--footer-text-color);
  opacity: var(--footer-tagline-opacity);
}

.footer__disclaimer {
  margin: 0;
  color: var(--footer-text-color);
  font-family: var(--ll-text-body-xs-family);
  font-size: var(--ll-text-body-xs-size);
  line-height: var(--ll-text-body-xs-line-height);
  letter-spacing: var(--ll-text-body-xs-letter-spacing);
  font-weight: var(--ll-text-body-xs-weight);
}

.footer__disclaimer a {
  color: var(--footer-accent-color);
  font-weight: var(--ll-text-tagline-sm-weight);
  transition: opacity var(--ll-motion-hover-duration) var(--ll-motion-hover-easing);
}

.footer__disclaimer a:hover,
.footer__disclaimer a:focus-visible {
  opacity: 0.7;
}

.footer__disclaimer strong {
  color: var(--footer-text-color);
  font-weight: var(--ll-text-tagline-sm-weight);
}

/* Superscript footnote markers rendered at ~8px against 12px body per Figma. */
.footer__disclaimer sup,
.footer__disclaimer-collapsible-item sup {
  font-size: 8px;
  line-height: 0;
  vertical-align: super;
  margin-right: 3px;
}

/* ------------------------------------------------------------
   6a. Collapsible disclaimer (native <details>/<summary>)
   ------------------------------------------------------------ */

.footer__disclaimer-collapsible {
  --footer-collapsible-marker-size: 16px;

  display: flex;
  flex-direction: column;
  gap: var(--ll-space-4);
  padding: 0;
  border: 0;
}

.footer__disclaimer-collapsible-summary {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--ll-space-3);
  cursor: pointer;
  list-style: none;
  color: var(--footer-text-color);
  font-family: var(--ll-text-body-sm-family);
  font-size: var(--ll-text-body-sm-size);
  line-height: var(--ll-text-body-sm-line-height);
  letter-spacing: var(--ll-text-body-sm-letter-spacing);
  font-weight: var(--ll-text-tagline-sm-weight);
}

.footer__disclaimer-collapsible-summary::-webkit-details-marker {
  display: none;
}

.footer__disclaimer-collapsible-summary:focus-visible {
  outline: var(--ll-border-width-strong) solid var(--ll-color-focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

.footer__disclaimer-collapsible-label {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* +/- marker; vertical bar hides on [open], leaving a minus. */
.footer__disclaimer-collapsible-marker {
  position: relative;
  display: inline-block;
  width: var(--footer-collapsible-marker-size);
  height: var(--footer-collapsible-marker-size);
  flex: 0 0 auto;
}

.footer__disclaimer-collapsible-marker::before,
.footer__disclaimer-collapsible-marker::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background-color: currentcolor;
  transition: opacity var(--ll-motion-hover-duration) var(--ll-motion-hover-easing);
}

.footer__disclaimer-collapsible-marker::before {
  width: 12px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}

.footer__disclaimer-collapsible-marker::after {
  width: 1.5px;
  height: 12px;
  transform: translate(-50%, -50%);
}

.footer__disclaimer-collapsible[open] .footer__disclaimer-collapsible-marker::after {
  opacity: 0;
}

.footer__disclaimer-collapsible-list {
  margin: 0;
  padding-inline-start: var(--ll-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--ll-space-3);
  list-style: disc;
  color: var(--footer-text-color);
  font-family: var(--ll-text-body-xs-family);
  font-size: var(--ll-text-body-xs-size);
  line-height: var(--ll-text-body-xs-line-height);
  letter-spacing: var(--ll-text-body-xs-letter-spacing);
  font-weight: var(--ll-text-body-xs-weight);
}

.footer__disclaimer-collapsible-item {
  margin: 0;
}

.footer__disclaimer-collapsible-item a {
  color: var(--footer-accent-color);
  font-weight: var(--ll-text-tagline-sm-weight);
  transition: opacity var(--ll-motion-hover-duration) var(--ll-motion-hover-easing);
}

.footer__disclaimer-collapsible-item a:hover,
.footer__disclaimer-collapsible-item a:focus-visible {
  opacity: 0.7;
}

/* ============================================================
   7. Copyright bar
   ============================================================ */

.footer__copyright-bar {
  display: flex;
  flex-direction: column;
}

@media (width >= 768px) {
  .footer__copyright-bar {
    padding-top: var(--ll-space-7);
    border-top: var(--ll-border-width-hairline) solid var(--footer-divider-color);
    border-color: color-mix(in srgb, var(--footer-divider-color) 50%, transparent);
  }
}

@media (width >= 1024px) {
  .footer__copyright-bar {
    padding-top: var(--ll-space-8);
  }
}

.footer__copyright-bar-top {
  display: flex;
  flex-direction: column;
  gap: var(--ll-space-7);
}

/* SM (Figma 22902:11809): flip DOM order so socials render above the brand row with a hairline between. */
@media (width < 768px) {
  .footer__copyright-bar-top .footer__social {
    order: -1;
  }

  .footer__copyright-bar-top .footer__copyright-bar-brand {
    padding-top: var(--ll-space-7);
    border-top: var(--ll-border-width-hairline) solid var(--footer-divider-color);
    border-color: color-mix(in srgb, var(--footer-divider-color) 50%, transparent);
  }
}

@media (width >= 768px) {
  .footer__copyright-bar-top {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--ll-space-5);
  }
}

.footer__copyright-bar-brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--ll-space-7);
}

@media (width >= 1024px) {
  .footer__copyright-bar-brand {
    align-items: flex-end;
  }
}

.footer__copyright-bar-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

/* Two theme <img>s; show/hide by .footer--theme-*. Default theme is dark. */
.footer__copyright-bar-logo-image {
  display: block;
  width: 74px;
  height: 29px;
  object-fit: contain;
  object-position: left center;
}

.footer__copyright-bar-logo-image--light {
  display: none;
}

.footer--theme-light .footer__copyright-bar-logo-image--dark {
  display: none;
}

.footer--theme-light .footer__copyright-bar-logo-image--light {
  display: block;
}

.footer__copyright-bar-statement {
  margin: 0;
  color: var(--footer-text-color);
  font-family: var(--ll-text-body-sm-family);
  font-size: var(--ll-text-body-sm-size);
  line-height: var(--ll-text-body-sm-line-height);
  letter-spacing: var(--ll-text-body-sm-letter-spacing);
  font-weight: var(--ll-text-tagline-sm-weight);
}

.footer__copyright-bar-text {
  margin: var(--ll-space-7) 0 0;
  color: var(--footer-text-color);
  font-family: var(--ll-text-body-xs-family);
  font-size: var(--ll-text-body-xs-size);
  line-height: var(--ll-text-body-xs-line-height);
  letter-spacing: var(--ll-text-body-xs-letter-spacing);
  font-weight: var(--ll-text-body-xs-weight);
}

@media (width >= 1024px) {
  .footer__copyright-bar-text {
    margin-top: var(--ll-space-8);
  }
}

/* ============================================================
   8. Social links
   ============================================================ */

.footer__social {
  display: inline-flex;
  flex: 0 0 auto;
}

.footer__social-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--ll-space-5);
}

@media (width >= 1024px) {
  .footer__social-list {
    gap: var(--ll-space-6);
  }
}

.footer__social-item {
  margin: 0;
}

.footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ll-radius-full);
  color: var(--footer-text-color);
  background: transparent;
  transition: opacity var(--ll-motion-hover-duration) var(--ll-motion-hover-easing);
}

.footer__social-link:hover,
.footer__social-link:focus-visible {
  opacity: 0.7;
}

/* ============================================================
   9. Legal nav
   ============================================================ */

.footer__legal {
  display: block;
  margin-top: var(--ll-space-8);
}

@media (width >= 1024px) {
  .footer__legal {
    margin-top: var(--ll-space-11);
  }
}

.footer__legal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ll-space-3) 0;
}

.footer__legal-item {
  margin: 0;
  display: inline-flex;
  align-items: center;
}

.footer__legal-item:not(:last-child)::after {
  content: '|';
  display: inline-block;
  padding-inline: var(--ll-space-4);
  color: var(--footer-text-color);
  opacity: var(--footer-separator-opacity);
}

.footer__legal-link {
  color: var(--footer-text-color);
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--ll-text-body-base-family);
  font-size: var(--ll-text-body-base-size);
  line-height: var(--ll-text-body-base-line-height);
  letter-spacing: var(--ll-text-body-base-letter-spacing);
  font-weight: var(--ll-text-body-base-weight);
  transition: opacity var(--ll-motion-hover-duration) var(--ll-motion-hover-easing);
}

.footer__legal-link:hover,
.footer__legal-link:focus-visible {
  opacity: 0.7;
}

/* ============================================================
   10. Inline icon (@@icon=...@@ canonical icon-span)
   ============================================================ */

.footer__icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: currentcolor;
  mask: var(--footer-icon-url) center / contain no-repeat;

  /* stylelint-disable-next-line property-no-vendor-prefix --
     Safari < 15.4 still requires the -webkit-mask shorthand. */
  -webkit-mask: var(--footer-icon-url) center / contain no-repeat;
  vertical-align: middle;
}

.footer__icon > img {
  display: none;
}

.footer__social-icon {
  width: 32px;
  height: 32px;
}

@media (width >= 1024px) {
  .footer__social-icon {
    width: 40px;
    height: 40px;
  }
}

/* ============================================================
   11. SM (< 768px) typography downshift (Figma 22902:11809 / WEBEXP-109812)
   ============================================================ */

@media (width < 768px) {
  .footer__signup-title {
    font-size: var(--ll-text-h7-size);
    line-height: var(--ll-text-h7-line-height);
    letter-spacing: 0.5px; /* Figma font/letter-spacing/h6 */
  }

  .footer__signup-description,
  .footer__mega-menu-link,
  .footer__legal-link {
    font-size: var(--ll-text-body-sm-size);
    line-height: var(--ll-text-body-sm-line-height);
    letter-spacing: var(--ll-text-body-sm-letter-spacing);
  }

  .footer__signup-input {
    font-size: var(--ll-text-body-sm-size);
    line-height: var(--ll-text-body-sm-line-height);
    letter-spacing: var(--ll-text-body-sm-letter-spacing);
    padding: var(--ll-space-4) var(--ll-space-5); /* 12/16 -> Figma SM 46px pill */
  }

  .footer__signup-cta {
    font-size: var(--ll-text-body-sm-size); /* Figma button-base 14 */
    line-height: var(--ll-text-body-sm-line-height);
    letter-spacing: var(--ll-text-body-base-letter-spacing);
    padding: var(--ll-space-4) var(--ll-space-6); /* 12/20 -> Figma SM 46px pill */
  }

  .footer__menu-item-group-header {
    font-size: 16px;
    line-height: 20px;
  }

  .footer__copyright-bar-statement {
    font-size: var(--ll-text-body-xs-size);
    line-height: var(--ll-text-body-xs-line-height);
    letter-spacing: var(--ll-text-body-xs-letter-spacing);

    /* Weight stays medium via --ll-text-tagline-sm-weight on the base rule. */
  }
}