@import url("/static/css/brand-palette.css?v=20261017");

/* Beauty Bee site footer
   ---------------------------------------------------------------------------
   One shared pane of warm frosted glass across every public and app surface.
   The three modifiers only tune how opaque the cream tint needs to be over
   each page background; the material, ink, spacing, and interactions match. */

.site-footer {
  --footer-glass: rgba(var(--bb-pearl-rgb), 0.62);
  position: relative;
  z-index: 10;
  margin-top: clamp(18px, 3vw, 34px);
  display: grid;
  gap: 32px;
  padding: 40px max(20px, env(safe-area-inset-left)) calc(24px + env(safe-area-inset-bottom));
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  border-top: 1px solid rgba(255, 255, 255, .78);
  border-radius: 28px 28px 0 0;
  color: rgba(var(--bb-ink-rgb), 0.82);
  background: var(--bb-pearl);
  box-shadow: 0 -16px 42px rgba(var(--bb-ink-rgb), 0.12), inset 0 1px rgba(255, 255, 255, .52);
}

/* -------------------------------------------------------------- the grounds */

.site-footer--sky {
  --footer-glass: rgba(var(--bb-pearl-rgb), 0.38);
}

.site-footer--dark {
  --footer-glass: rgba(var(--bb-pearl-rgb), 0.78);
}

.site-footer--light {
  --footer-glass: rgba(var(--bb-pearl-rgb), 0.62);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-footer {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(var(--bb-pearl-rgb), 0.08) 34%),
      var(--footer-glass);
    -webkit-backdrop-filter: blur(20px) saturate(1.18);
    backdrop-filter: blur(20px) saturate(1.18);
  }
}

/* ---------------------------------------------------------------- top block */

.site-footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.15fr;
  gap: 32px 26px;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
}

.site-footer__mark {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 11px;
}

/* The emblem: a winged badge holding two B's back to back.
   The B's are live text in the page's own typeface, not drawn letterforms, so
   they always match the wordmark beside them. */
.site-footer__emblem {
  position: relative;
  display: grid;
  flex: none;
  width: 23px;
  height: 23px;
  place-items: center;
}

/* Wide and shallow, sweeping out from the shoulders of the badge. Wings that
   sit narrow and steep on top of the circle read as ears, not wings. Their
   inner ends run behind the badge, so they appear to emerge from under it. */
.site-footer__wings {
  position: absolute;
  top: 2%;
  left: 50%;
  z-index: 0;
  width: 215%;
  height: auto;
  transform: translateX(-50%);
  fill: none;
  stroke: currentColor;
  stroke-width: 6;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* The veins inside each wing, finer than its outline. */
.site-footer__vein {
  stroke-width: 3;
  opacity: .8;
}

.site-footer__badge {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: none;
  box-shadow: inset 0 0 0 1.5px currentColor;
  color: inherit;
  font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: .68rem;
  font-weight: 800;
  line-height: 1;
}

/* Mirrored, and pulled in so the two stems meet with no gap between them.
   Nunito carries a side bearing on each B; without the negative margin the
   letters sit apart even at zero letter-spacing. */
.site-footer__badge span:first-child {
  margin-right: -.13em;
  transform: scaleX(-1);
}

/* Set to match the landing page's own BEAUTY BEE label exactly: same family,
   weight 800, .16em tracking, uppercase, and the ground's own colour rather
   than a brand tint. See beauty-bee.css line 255. */
.site-footer__word {
  font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.site-footer__tag {
  margin: 0 0 18px;
  max-width: 30ch;
  font-size: 13px;
  line-height: 1.5;
  opacity: .88;
}

/* ------------------------------------------------------------------ socials */

.site-footer__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.site-footer__social {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: inherit;
  opacity: .62;
}

.site-footer--sky .site-footer__social { opacity: .68; }

/* Live links now, so they should feel like links. */
a.site-footer__social { transition: opacity .16s ease, transform .16s ease; }
a.site-footer__social:hover { transform: translateY(-1px); }

a.site-footer__social:hover,
a.site-footer__social:focus-visible { opacity: 1; }

.site-footer__social svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------------------------------------ link columns */

.site-footer__col h2 {
  margin: 0 0 13px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: .68;
}

.site-footer__col ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__col li {
  font-size: 13.5px;
  line-height: 1.35;
}

.site-footer__col a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}

.site-footer--sky .site-footer__col a { color: rgba(var(--bb-ink-rgb), 0.82); }

.site-footer__col a:hover,
.site-footer__col a:focus-visible { text-decoration: underline; }

/* A page that does not exist yet: visible, greyed, not clickable. */
.is-soon {
  font-weight: 600;
  opacity: .42;
  cursor: default;
}

.site-footer--sky .is-soon {
  color: rgba(var(--bb-ink-rgb), 0.44);
  opacity: 1;
}

/* ----------------------------------------------------------- contact strip */

.site-footer__contact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 26px;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid currentColor;
}

.site-footer__contact dt {
  margin-bottom: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .68;
}

.site-footer__contact dd {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
}

.site-footer__contact a {
  color: inherit;
  text-decoration: none;
}

.site-footer__contact a:hover,
.site-footer__contact a:focus-visible { text-decoration: underline; }

.honey-line-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  letter-spacing: .035em;
}

.honey-line-link::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bb-muted);
  box-shadow: 0 0 0 3px rgba(95, 158, 75, .15);
  content: "";
}

/* A contact detail Ayanna has not supplied yet. */
.is-pending {
  display: inline-block;
  padding-bottom: 1px;
  border-bottom: 1px dashed currentColor;
  font-weight: 600;
  opacity: .58;
}

/* --------------------------------------------------------------- bottom bar */

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding-top: 18px;
  border-top: 1px solid currentColor;
}

.site-footer__copyright {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  opacity: .72;
}

.site-footer__auth {
  display: flex;
  gap: 18px;
  font-size: 13px;
  font-weight: 700;
}

.site-footer__auth a,
.site-footer__auth button {
  color: inherit;
  text-decoration: none;
}

.site-footer__auth button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.site-footer__auth-status { opacity: .72; }

.site-footer--sky .site-footer__auth a,
.site-footer--sky .site-footer__auth button { color: rgba(var(--bb-ink-rgb), 0.82); }

.site-footer__auth a:hover,
.site-footer__auth a:focus-visible,
.site-footer__auth button:hover,
.site-footer__auth button:focus-visible { text-decoration: underline; }

/* The borders inherit currentColor by default, which is too strong. */
.site-footer--sky   .site-footer__contact,
.site-footer--sky   .site-footer__base   { border-color: rgba(var(--bb-teal-rgb), 0.22); }
.site-footer--dark  .site-footer__contact,
.site-footer--dark  .site-footer__base   { border-color: rgba(var(--bb-teal-rgb), 0.18); }
.site-footer--light .site-footer__contact,
.site-footer--light .site-footer__base   { border-color: rgba(var(--bb-teal-rgb), 0.14); }

/* Keep app footers beside their persistent desktop rails instead of beneath
   them. Hidden shells do not reserve space during authentication checks. */
@media (min-width: 901px) {
  #app-shell:not(.is-hidden) ~ .site-footer { margin-left: var(--sidebar); }
}

@media (min-width: 821px) {
  #studioApp:not(.is-hidden) ~ .site-footer { margin-left: var(--sidebar-width); }
}

/* -------------------------------------------------------------- responsive */

/* ---------------------------------------------------------------- mobile
   Below the desktop layout the footer keeps only what people actually reach
   for on a phone: the legal links, contact, the socials, and the copyright.

   The thirteen marketing links -- Pricing, Features, Templates, What's New,
   About, Blog, Careers, Press, Help, Community, Status -- are hidden rather
   than removed. They stay in the markup and on desktop; on a phone nobody
   navigates a product from its footer, so they are only scroll tax.         */

@media (max-width: 900px) {
  .site-footer {
    gap: 22px;
    padding: 30px 22px 20px;
    text-align: center;
  }

  /* One centred, wrapping row instead of five columns. */
  .site-footer__top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 8px 16px;
  }

  .site-footer__brand {
    flex: 1 0 100%;
    display: grid;
    justify-items: center;
    gap: 14px;
  }

  /* The mark is the anchor of the mobile footer, so it runs larger here. */
  .site-footer__mark {
    gap: 11px;
    margin-bottom: 0;
  }

  .site-footer__emblem {
    width: 23px;
    height: 23px;
  }

  .site-footer__word { font-size: 24px; }

  .site-footer__tag {
    max-width: 34ch;
    margin: 0 auto;
  }

  .site-footer__socials { justify-content: center; }

  /* Marketing navigation is desktop-only. */
  .site-footer__col[aria-label="Product"],
  .site-footer__col[aria-label="Resources"] { display: none; }

  /* Company is desktop-only too. Contact was the one item this column kept on
     a phone, and the contact strip below already carries the address, so the
     column was repeating what the footer says a few rows further down. */
  .site-footer__col[aria-label="Company"] { display: none; }

  /* Legal reads first, then Contact closes the line. The markup order puts
     Company before Legal, which is right on desktop and wrong here. */
  .site-footer__col[aria-label="Legal"] { order: 1; }
  .site-footer__col[aria-label="Company"] { order: 2; }

  /* Headings would be four words of chrome above six links. */
  .site-footer__col h2 { display: none; }

  .site-footer__col ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 14px;
  }

  /* Dots between links, so two of them never read as one phrase. Each dot
     trails its own link rather than leading the next one: as a leading mark
     it gets orphaned to the start of a wrapped line. Contact closes the run
     and so carries none. */
  /* One flowing run across both remaining columns. No separator dots: they
     strand at the end of a wrapped line and read as a mistake. The gap does
     the separating instead. */
  .site-footer__col ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 20px;
  }

  /* Contact strip: keep the real email and the Honey Line within thumb reach. */
  .site-footer__contact {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-top: 18px;
  }

  .site-footer__contact > div:nth-child(n + 3) { display: none; }
  .site-footer__contact dt { margin-bottom: 3px; }

  .site-footer__base {
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-top: 16px;
  }

  .site-footer__auth { justify-content: center; }
}