/*
 * Billee global shell
 *
 * The landing page and all nested pages load this after their local styles.
 * Keep the navigation and footer rules here so the shared components cannot
 * drift between routes.
 */

/* ─── Main navigation ─── */
.site-nav {
  --grey-300: #3E3E3E;
  --grey-200: #828282;
  --brand-orange: #FF6200;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 32px;
  background: #FFFFFF;
}

.site-nav-inner {
  display: grid;
  grid-template-columns: minmax(150px, 1.18fr) repeat(4, minmax(132px, 1fr));
  gap: clamp(20px, 4vw, 56px);
  width: min(1336px, 100%);
}

.site-nav-toggle,
.site-nav-mobile-menu-clip { display: none; }

.site-nav-brand,
.site-nav-group { min-width: 0; }

.site-nav-brand {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.site-nav-brand a {
  width: fit-content;
  color: var(--grey-300);
  font-size: 40px;
  font-weight: 500;
  line-height: .92;
  letter-spacing: -.06em;
  text-decoration: none;
}

.site-nav-brand p {
  max-width: 142px;
  margin: 0;
  color: var(--grey-200);
  font-size: 11px;
  line-height: 13px;
  letter-spacing: -.035em;
}

.site-nav-group {
  --nav-icon-width: 64px;
  display: grid;
  grid-template-columns: var(--nav-icon-width) minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  height: 88px;
}

.site-nav-icon {
  display: block;
  width: var(--nav-icon-width);
  height: 88px;
  color: #CDC4B9;
}

.site-nav-group--phone { --nav-icon-width: 48px; }
.site-nav-group--smile { --nav-icon-width: 88px; }
.site-nav-group--question { --nav-icon-width: 51px; }
.site-nav-group--drawer { --nav-icon-width: 101px; }

.site-nav-icon svg,
.site-nav-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-nav-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 134px;
  height: 88px;
}

.site-nav-label,
.site-nav-links a {
  color: var(--grey-300);
  letter-spacing: -.045em;
}

.site-nav-label {
  margin-bottom: 8px;
  font-size: 22px;
  font-weight: 500;
  line-height: 22px;
}

.site-nav-links a {
  font-size: 16px;
  line-height: 17px;
  text-decoration: none;
  transition: color .2s ease, transform .2s ease;
}

.site-nav-group--phone .site-nav-links a:first-of-type { margin-top: auto; }
.site-nav-links a:hover,
.site-nav-links a:focus-visible { color: var(--brand-orange); }

.site-nav-group--phone:hover .site-nav-icon img,
.site-nav-group--phone:focus-within .site-nav-icon img { animation: nav-phone-jiggle .48s ease-in-out; }
.site-nav-group--question:hover .site-nav-icon img,
.site-nav-group--question:focus-within .site-nav-icon img { animation: nav-question-bounce 1.1s ease-in-out infinite; }

@keyframes nav-phone-jiggle {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-5deg) translateX(-1px); }
  45% { transform: rotate(4deg) translateX(1px); }
  70% { transform: rotate(-2deg); }
}

@keyframes nav-smile-spin {
  0% { transform: rotate(0) translateY(0) scale(1); }
  76% { transform: rotate(360deg) translateY(0) scale(1); }
  86% { transform: rotate(360deg) translateY(-4px) scale(1.035, .965); }
  94% { transform: rotate(360deg) translateY(1px) scale(.985, 1.015); }
  100% { transform: rotate(360deg) translateY(0) scale(1); }
}

@keyframes nav-question-bounce {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(-5px); }
  65% { transform: translateY(-2px); }
  82% { transform: translateY(-3px); }
}

@keyframes nav-drawer-wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-4deg) translateX(-2px); }
  55% { transform: rotate(4deg) translateX(2px); }
  78% { transform: rotate(-1deg); }
}

@keyframes nav-drawer-hop {
  0%, 100% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-7px) scale(1.03, .97); }
  62% { transform: translateY(1px) scale(.98, 1.02); }
}

@keyframes nav-drawer-tilt {
  0%, 100% { transform: rotate(0) scale(1); }
  35% { transform: rotate(7deg) scale(1.02); }
  68% { transform: rotate(-5deg); }
}

.nav-drawer-wiggle { animation: nav-drawer-wiggle .56s ease-in-out; }
.nav-drawer-hop { animation: nav-drawer-hop .52s cubic-bezier(.22, 1, .36, 1); }
.nav-drawer-tilt { animation: nav-drawer-tilt .62s ease-in-out; }
.nav-smile-spin { animation: nav-smile-spin .9s ease-in; }

/* ─── Footer ─── */
.site-footer {
  --grey-300: #3E3E3E;
  --grey-200: #828282;
  --brand-orange: #FF6200;
  position: sticky;
  bottom: 0;
  z-index: 0;
  display: flex;
  width: 100%;
  overflow: hidden;
  flex-direction: column;
  gap: 32px;
  font-family: Inter, Arial, sans-serif;
}

.site-footer[data-variant="editorial"] { background: #68605B; color: #FFFFFF; }
.site-footer--flow { position: relative; bottom: auto; z-index: auto; overflow: visible; gap: 0; }

.footer-inner {
  box-sizing: border-box;
  width: 100%;
  max-width: 1400px;
  height: 472px;
  margin: 0 auto;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 48px;
}

.footer-top {
  display: flex;
  width: 100%;
  height: 320px;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
}

.footer-brand-col {
  display: flex;
  width: 500px;
  height: 120px;
  min-height: 120px;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}

.footer-brand-name {
  display: inline-flex;
  width: fit-content;
  align-items: flex-start;
  gap: 0;
  font-size: 40px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: -.04em;
  text-decoration: none;
}

.footer-brand-word,
.footer-brand-trademark { color: #3E3E3E; }
.footer-brand-trademark { display: inline-block; margin-top: 2px; font-size: 30px; line-height: 1; letter-spacing: 0; }

.footer-brand-copy { display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 16px; }
.footer-tagline,
.footer-app-availability { max-width: 500px; margin: 0; font-size: 16px; font-weight: 400; line-height: 20px; letter-spacing: -.04em; }

.footer-nav-groups { display: grid; width: 520px; height: 120px; grid-template-columns: repeat(3, 120px); gap: 80px; }
.footer-col { display: flex; height: 120px; min-width: 0; flex-direction: column; justify-content: space-between; }
.footer-col-title { margin: 0; font-size: 16px; font-weight: 300; line-height: 16px; letter-spacing: -.04em; }
.footer-col ul { display: flex; margin: 0; padding: 0; flex-direction: column; gap: 3px; list-style: none; }
.footer-col li { display: flex; line-height: 16px; }
.footer-col a { display: inline-flex; color: inherit; font-size: 16px; font-weight: 500; line-height: 16px; letter-spacing: -.04em; text-decoration: none; white-space: nowrap; transition: opacity .15s ease; }
.footer-col a:hover { opacity: .5; }

.footer-baseline { display: flex; min-height: 40px; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 32px; }
.footer-baseline-left { display: flex; min-width: 0; flex: 1 1 auto; }
.footer-meta { display: flex; max-width: 856px; flex-direction: column; align-items: flex-start; gap: 6px; }
.footer-meta-primary { display: flex; flex-wrap: wrap; gap: 16px; }
.footer-meta-location { color: #C3C2BF !important; }
.footer-meta span,
.footer-meta a { color: inherit; font-size: 14px; font-weight: 300; line-height: 14px; letter-spacing: -.02em; text-decoration: none; }
.footer-baseline-right { display: flex; flex: 0 0 auto; flex-direction: row; align-items: center; gap: 16px; }

.footer-badges { display: flex; flex-wrap: wrap; gap: 16px; }
.site-footer .footer-badge,
.site-footer .footer-social {
  position: relative;
  display: inline-flex;
  box-sizing: border-box;
  overflow: hidden;
  isolation: isolate;
  align-items: center;
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(255,255,255,.018), rgba(255,255,255,.018)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.48) 0%, rgba(255,255,255,.24) 18%, rgba(255,255,255,.025) 55%, rgba(255,255,255,.36) 100%) border-box;
  box-shadow: 0 3px 7px rgba(25,20,17,.12), 0 1px 1px rgba(25,20,17,.06), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.05);
  color: #FFFFFF;
  opacity: 1;
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
}
.site-footer .footer-badge { height: 40px; padding: 0 12px; gap: 8px; border-radius: 32px; font-size: 16px; font-weight: 400; line-height: 20px; letter-spacing: -.04em; text-decoration: none; transition: transform 180ms cubic-bezier(.22, 1, .36, 1), box-shadow 180ms ease, background 180ms ease; }
.site-footer .footer-badge:first-child { width: 120px; }
.site-footer .footer-badge:nth-child(2) { width: 134px; }
.site-footer .footer-badge:hover,
.site-footer .footer-social:hover { transform: translateY(-2px) scale(1.025); background: linear-gradient(rgba(255,255,255,.07), rgba(255,255,255,.07)) padding-box, linear-gradient(135deg, rgba(255,255,255,.64) 0%, rgba(255,255,255,.32) 18%, rgba(255,255,255,.05) 55%, rgba(255,255,255,.5) 100%) border-box; box-shadow: 0 8px 16px rgba(25,20,17,.22), 0 2px 3px rgba(25,20,17,.08), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.04); }
.site-footer .footer-badge:active,
.site-footer .footer-social:active { transform: translateY(1px) scale(.96); box-shadow: 0 2px 5px rgba(25,20,17,.18), inset 0 2px 5px rgba(0,0,0,.12); }
.site-footer .footer-badge svg { width: 16px; height: 16px; flex-shrink: 0; fill: currentColor; }
.footer-socials { display: flex; gap: 16px; }
.site-footer .footer-social { width: 40px; height: 40px; justify-content: center; border-radius: 50%; transition: transform 180ms cubic-bezier(.22, 1, .36, 1), box-shadow 180ms ease, background 180ms ease; }
.site-footer .footer-social svg { width: 16px; height: 16px; fill: currentColor; }

.footer-divider { display: none; }
.footer-wordmark { position: relative; width: 100%; height: auto; min-height: 0; margin: 0; padding: 0; overflow: hidden; flex: 0 0 auto; font-size: 0; line-height: 0; pointer-events: none; user-select: none; }
.footer-wordmark svg.wordmark-svg { display: block; width: 100%; height: auto; }
.footer-wordmark .bubble-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.footer-wordmark .wordmark-base path { fill: #3E3E3E; }
.footer-wordmark .wordmark-sweep { display: none; }
.site-footer[data-variant="editorial"] .wordmark-base path { fill: #828282; }
.site-footer--flow .footer-wordmark { height: auto; min-height: 0; margin-bottom: 0; padding-bottom: 0; }

.footer-col a:focus-visible,
.footer-brand-name:focus-visible,
.footer-badge:focus-visible,
.footer-social:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

@media (min-width: 721px) {
  .site-footer.is-undocked { position: relative; bottom: auto; z-index: auto; overflow: visible; }
}

/* Undo the former nested-page tablet variant: desktop matches the landing page. */
@media (min-width: 721px) and (max-width: 1050px) {
  .site-nav-inner { grid-template-columns: minmax(150px, 1.18fr) repeat(4, minmax(132px, 1fr)); gap: clamp(20px, 4vw, 56px); }
  .site-nav-group { grid-template-columns: var(--nav-icon-width) minmax(0, 1fr); height: 88px; }
  .site-nav-icon { display: block; }
}

@media (max-width: 1050px) {
  .footer-inner { height: auto; }
  .footer-top { height: auto; gap: 48px; }
  .footer-brand-col { min-height: 0; max-width: 500px; gap: 16px; }
  .footer-nav-groups { width: 100%; gap: clamp(24px, 8vw, 80px); }
}

@media (max-width: 720px) {
  .site-nav { padding: 32px; }
  .site-nav-inner { position: relative; width: 100%; grid-template-columns: minmax(0, 160px) 76px; align-items: start; justify-content: space-between; gap: 0; }
  .site-nav-brand { grid-column: 1; grid-row: 1; gap: 16px; }
  .site-nav-brand a { font-size: 40px; line-height: 29px; letter-spacing: -.04em; }
  .site-nav-brand p { max-width: 160px; font-size: 10px; line-height: 12px; letter-spacing: -.04em; }
  .site-nav-group { display: none; }
  .site-nav-toggle { position: relative; display: grid; grid-column: 2; grid-row: 1; width: 76px; height: 76px; padding: 0; place-items: center; border: 0; background: transparent; color: #CDC4B9; cursor: pointer; }
  .site-nav-toggle:focus-visible { outline: 2px solid #3F8A51; outline-offset: 3px; border-radius: 999px; }
  .site-nav-toggle-dots { position: relative; display: block; width: 76px; height: 76px; transform: rotate(0deg); transition: transform 440ms cubic-bezier(.22, 1, .36, 1); }
  .site-nav-toggle-dots span { position: absolute; left: 30px; width: 16px; height: 16px; border-radius: 50%; background: currentColor; transform-origin: 50% 50%; transition: left 440ms cubic-bezier(.22, 1, .36, 1), top 440ms cubic-bezier(.22, 1, .36, 1), width 440ms cubic-bezier(.22, 1, .36, 1), height 240ms cubic-bezier(.22, 1, .36, 1), border-radius 240ms ease, opacity 150ms ease, transform 440ms cubic-bezier(.22, 1, .36, 1); }
  .site-nav-toggle-dots span:nth-child(1) { top: 0; }
  .site-nav-toggle-dots span:nth-child(2) { top: 30px; }
  .site-nav-toggle-dots span:nth-child(3) { top: 60px; }
  .site-nav-toggle-close { display: none; }
  .site-nav.is-mobile-menu-open .site-nav-toggle-dots { transform: rotate(45deg); }
  .site-nav.is-mobile-menu-open .site-nav-toggle-dots span:nth-child(1),
  .site-nav.is-mobile-menu-open .site-nav-toggle-dots span:nth-child(3) { left: -10px; top: 32px; width: 96px; height: 12px; border-radius: 999px; }
  .site-nav.is-mobile-menu-open .site-nav-toggle-dots span:nth-child(2) { opacity: 0; transform: scale(.2); }
  .site-nav.is-mobile-menu-open .site-nav-toggle-dots span:nth-child(3) { transform: rotate(-90deg); }
  .site-nav-mobile-menu-clip { display: block; width: 100%; max-height: 0; margin-top: 0; overflow: hidden; grid-column: 1 / -1; grid-row: 2; opacity: 0; transform: translateY(-10px); pointer-events: none; transition: max-height 440ms cubic-bezier(.22, 1, .36, 1), margin-top 440ms cubic-bezier(.22, 1, .36, 1), opacity 180ms ease, transform 360ms cubic-bezier(.22, 1, .36, 1); }
  .site-nav.is-mobile-menu-open .site-nav-mobile-menu-clip { max-height: 520px; margin-top: 56px; opacity: 1; transform: translateY(0); pointer-events: auto; }
  .site-nav-mobile-menu { display: flex; height: auto; padding-bottom: 2px; flex-direction: column; gap: 31px; }
  .site-nav-mobile-group { display: flex; flex-direction: column; gap: 16px; }
  .site-nav-mobile-label,
  .site-nav-mobile-links a { color: #828282; font-size: 16px; line-height: 12px; letter-spacing: -.04em; }
  .site-nav-mobile-label { font-weight: 300; }
  .site-nav-mobile-links { display: flex; flex-direction: column; gap: 8px; }
  .site-nav-mobile-links a { display: block; margin: -2px 0; padding: 2px 0; font-weight: 500; text-decoration: none; }
  .site-nav-mobile-links a:focus-visible { outline: 2px solid #3F8A51; outline-offset: 3px; border-radius: 2px; }

  .footer-inner { height: auto; padding: 32px; gap: 40px; }
  .footer-top { height: auto; gap: 32px; }
  .footer-brand-col { width: 100%; height: auto; min-height: 0; gap: 24px; }
  .footer-brand-name { font-size: 32px; line-height: 32px; }
  .footer-brand-trademark { margin-top: 2px; font-size: 18px; }
  .footer-nav-groups { width: 100%; height: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .footer-col { height: auto; justify-content: flex-start; gap: 16px; }
  .footer-col-title,
  .footer-col a { font-size: 14px; line-height: 18px; }
  .footer-col a { white-space: normal; }
  .footer-baseline { flex-direction: column; align-items: flex-start; gap: 24px; }
  .footer-baseline-left,
  .footer-baseline-right { width: 100%; }
  .footer-meta { gap: 12px; }
  .footer-meta-primary { gap: 8px 12px; }
  .footer-baseline-right { flex-wrap: wrap; justify-content: flex-start; }
  .footer-badges,
  .footer-socials { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav-icon img,
  .site-nav-group:hover .site-nav-icon img,
  .site-nav-group:focus-within .site-nav-icon img { animation: none; transform: none; }
  .site-nav-toggle-dots,
  .site-nav-toggle-dots span,
  .site-nav-toggle-close,
  .site-nav-mobile-menu-clip,
  .footer-badge,
  .footer-social { transition: none; }
}