.site-nav {
  position: sticky;
  top: 14px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(1180px, 100% - 32px);
  min-height: 66px;
  margin: 18px auto 0;
  padding: 10px 12px 10px 16px;
  border: 1px solid rgba(23, 23, 23, 0.08);
  border-radius: 18px;
  background: rgba(255, 253, 249, 0.88);
  box-shadow: 0 14px 42px rgba(32, 26, 19, 0.1);
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  font-family: Manrope, Inter, ui-sans-serif, system-ui, sans-serif;
}

.site-nav a {
  text-decoration: none;
}

.site-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: #1a1a1a;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.025em;
}

.site-nav-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid rgba(23, 23, 23, 0.08);
  border-radius: 11px;
  background: linear-gradient(145deg, #ffe9a3, #ffcc33 60%, #d6a100);
  color: #3f0010;
  font-size: 14px;
  font-weight: 900;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.7), 0 7px 15px rgba(214, 161, 0, 0.18);
}

.site-nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.site-nav-links > a, .site-nav-account > summary {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 11px;
  border-radius: 10px;
  color: #65615d;
  font-size: 13px;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.site-nav-account > summary::-webkit-details-marker {
  display: none;
}

.site-nav-links > a:hover, .site-nav-links > a:focus-visible, .site-nav-account > summary:hover, .site-nav-account > summary:focus-visible {
  color: #171717;
  background: rgba(23, 23, 23, 0.055);
  outline: none;
}

.site-nav-login {
  border: 1px solid rgba(23, 23, 23, 0.1);
}

.site-nav-cta {
  margin-left: 4px;
  background: #171717 !important;
  color: #fff !important;
  box-shadow: 0 7px 16px rgba(23, 23, 23, 0.14);
}

.site-nav-cta:hover, .site-nav-cta:focus-visible {
  transform: translateY(-1px);
  background: #353535 !important;
}

.site-nav-account {
  position: relative;
  margin-left: 4px;
}

.site-nav-account > summary {
  border: 1px solid rgba(23, 23, 23, 0.1);
  background: #fff;
  color: #252525;
}

.site-nav-account-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  display: grid;
  min-width: 132px;
  padding: 6px;
  border: 1px solid rgba(23, 23, 23, 0.1);
  border-radius: 12px;
  background: #fffdf9;
  box-shadow: 0 16px 34px rgba(23, 23, 23, 0.14);
}

.site-nav-account-menu a {
  padding: 9px 10px;
  border-radius: 8px;
  color: #4f4b46;
  font-size: 13px;
  font-weight: 800;
}

.site-nav-account-menu a:hover, .site-nav-account-menu a:focus-visible {
  background: #f2efea;
  color: #171717;
  outline: none;
}

.site-nav-logout { margin: 0; }

.site-nav-logout button {
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #4f4b46;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
}

.site-nav-logout button:hover,
.site-nav-logout button:focus-visible {
  background: #f2efea;
  color: #171717;
  outline: none;
}

.site-nav-toggle {
  display: none;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(23, 23, 23, 0.1);
  border-radius: 10px;
  background: #fff;
  color: #252525;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

@media (max-width: 1100px) {
  .site-nav {
    top: 8px;
    margin-top: 10px;
  }
  .site-nav-toggle {
    display: inline-flex;
    align-items: center;
  }
  .site-nav-links {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    display: grid;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    opacity: 0;
    border: 1px solid transparent;
    border-radius: 14px;
    background: #fffdf9;
    box-shadow: 0 16px 34px rgba(23, 23, 23, 0.12);
    transition: max-height 0.24s ease, opacity 0.18s ease, padding 0.18s ease;
  }
  .site-nav-open .site-nav-links {
    max-height: 520px;
    padding: 7px;
    opacity: 1;
    border-color: rgba(23, 23, 23, 0.1);
  }
  .site-nav-links > a, .site-nav-account > summary {
    width: 100%;
    justify-content: flex-start;
    padding: 0 12px;
  }
  .site-nav-cta {
    margin: 0;
  }
  .site-nav-account {
    margin: 0;
  }
  .site-nav-account-menu {
    position: static;
    margin: 4px 0 0;
    box-shadow: none;
    border: 0;
    background: #f5f2ed;
  }
}
@media (max-width: 460px) {
  .site-nav {
    width: min(100% - 20px, 1180px);
    padding-left: 10px;
  }
  .site-nav-brand {
    font-size: 13px;
  }
  .site-nav-brand > span:last-child {
    max-width: 195px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
:root {
  --gdt-maroon: #7a0019;
  --gdt-gold: #ffcc33;
  --gdt-ink: #1d1b19;
  --gdt-muted: #706a64;
  --gdt-paper: #fbf8f4;
  --gdt-line: rgba(24, 21, 18, 0.09);
  --gdt-success: #187a4d;
  --gdt-warning: #855b00;
  --gdt-danger: #a22936;
  --gdt-radius-sm: 12px;
  --gdt-radius-md: 16px;
  --gdt-radius-lg: 22px;
  --gdt-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

body .site-nav {
  top: 24px;
  width: min(1360px, 100% - 64px);
  min-height: 74px;
  padding: 12px 16px 12px 20px;
  border-radius: 22px;
  transition: width 0.48s cubic-bezier(0.16, 1, 0.3, 1), min-height 0.48s cubic-bezier(0.16, 1, 0.3, 1), padding 0.48s cubic-bezier(0.16, 1, 0.3, 1), top 0.48s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.48s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.48s cubic-bezier(0.16, 1, 0.3, 1), background 0.48s cubic-bezier(0.16, 1, 0.3, 1);
}
body .site-nav.site-nav-scrolled {
  top: 12px;
  width: min(1120px, 100% - 32px);
  min-height: 62px;
  padding: 8px 12px 8px 16px;
  border-radius: 17px;
  background: rgba(255, 253, 249, 0.94);
  box-shadow: 0 16px 42px rgba(32, 26, 19, 0.14);
}

.site-nav .site-nav-links > a:active,
.site-nav .site-nav-account > summary:active {
  transform: scale(0.98);
}
.site-nav .site-nav-links > a.is-active {
  background: rgba(122, 0, 25, 0.08);
  color: #7a0019;
  position: relative;
}
.site-nav .site-nav-links > a.is-active::after {
  background: #7a0019;
  border-radius: 999px;
  bottom: 5px;
  content: "";
  height: 2px;
  left: 12px;
  position: absolute;
  right: 12px;
}

@media (max-width: 860px) {
  body .site-nav,
body .site-nav.site-nav-scrolled {
    top: 8px;
    width: min(100% - 20px, 680px);
    min-height: 64px;
    padding: 10px 12px;
    border-radius: 18px;
  }
  .site-nav .site-nav-links > a.is-active::after {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  body .site-nav {
    transition: none;
  }
}

/* Shared small-screen guardrails for organization workspaces. */
@media (max-width: 620px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  .organization-layout,
  .org-layout {
    width: calc(100% - 24px) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    margin-top: 20px !important;
  }

  .organization-layout > *,
  .org-layout > *,
  .organization-layout .org-shell,
  .organization-layout .page {
    min-width: 0;
  }

  .organization-sidebar,
  .workspace-side {
    position: static !important;
    min-width: 0;
    padding: 8px !important;
    overflow: visible !important;
  }

  .workspace-nav {
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    padding: 2px 0 6px !important;
    scroll-padding-inline: 2px;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
  }

  .workspace-nav::-webkit-scrollbar { display: none; }

  .workspace-nav a {
    flex: 0 0 auto !important;
    min-height: 42px;
    padding: 10px 12px !important;
    scroll-snap-align: start;
  }

  .workspace-nav a:focus-visible {
    outline: 3px solid rgba(122, 0, 25, 0.28);
    outline-offset: 2px;
  }

  .workspace-nav em { display: none; }

  .page-head,
  .head {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 16px !important;
  }

  .page-head h1,
  .head h1 { overflow-wrap: anywhere; }

  .head-actions {
    width: 100%;
    justify-content: stretch !important;
  }

  .head-actions .button {
    flex: 1 1 140px;
    min-height: 44px;
  }
}

@media (max-width: 380px) {
  .site-nav-brand > span:last-child { max-width: 150px; }
}

/* Phone navigation is deliberately separate from the desktop menu: five
   task-level destinations stay in thumb reach, while Explore carries the
   related discovery routes without duplicating the desktop navigation. */
.mobile-tab-bar,
.mobile-explore-tray,
.mobile-app-header,
.mobile-profile-scrim,
.mobile-profile-drawer { display: none; }
@media (max-width: 760px) {
  .site-footer { display: none !important; }
  /* One source of truth for the fixed dock: a 64px control row, followed by
     the device-provided safe area. The dock itself paints that safe area, so
     iOS never exposes a separate strip behind the Home Indicator. */
  :root {
    --gdt-mobile-nav-content-height: 64px;
    --gdt-dock-height: calc(var(--gdt-mobile-nav-content-height) + env(safe-area-inset-bottom));
  }
  /* Keep native touch scrolling, but remove browser scrollbar chrome and its
     gutter so the app canvas remains centered edge-to-edge. */
  html,
  body,
  body * {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  body *::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
  /* The desktop header never becomes a second mobile navigation system. */
  body {
    padding-top: 0;
    padding-bottom: var(--gdt-dock-height);
  }
  body .site-nav,
  body .site-nav.site-nav-scrolled {
    display: none;
  }
  .mobile-app-header {
    position: sticky;
    top: 0;
    z-index: 170;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: calc(60px + env(safe-area-inset-top));
    padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
    border-bottom: 1px solid rgba(23, 23, 23, .07);
    background: rgba(248, 246, 241, .94);
    backdrop-filter: blur(16px) saturate(1.08);
    -webkit-backdrop-filter: blur(16px) saturate(1.08);
  }
  .mobile-app-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: #211b17;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: -.03em;
    text-decoration: none;
  }
  .mobile-app-brand span {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 10px;
    background: linear-gradient(145deg, #ffe9a3, #ffcc33 60%, #d6a100);
    color: #4b0714;
    font-size: 14px;
    box-shadow: inset 0 1px rgba(255,255,255,.7);
  }
  .mobile-app-profile {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(32, 26, 19, .11);
    border-radius: 50%;
    background: #fffdfa;
    color: #7a0019;
    text-decoration: none;
    transition: transform 160ms ease, background 160ms ease;
  }
  .mobile-app-profile svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }
  .mobile-app-profile:active { transform: scale(.96); background: #fbeef0; }
  .mobile-app-profile { cursor: pointer; font: inherit; }
  .mobile-profile-scrim {
    position: fixed;
    inset: 0;
    z-index: 205;
    display: block;
    background: rgba(28, 20, 13, .48);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease, visibility 200ms ease;
    visibility: hidden;
  }
  .mobile-profile-scrim.is-open { opacity: 1; pointer-events: auto; visibility: visible; }
  .mobile-profile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    /* The tab bar is fixed above this drawer in the stacking order. Reserve
       its full height so the persistent Log out action can never sit behind
       the mobile navigation. */
    bottom: var(--gdt-dock-height);
    z-index: 210;
    display: flex;
    width: min(344px, calc(100% - 36px));
    flex-direction: column;
    overflow: hidden;
    padding: calc(18px + env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
    border-left: 1px solid rgba(32, 26, 19, .10);
    background: #fffdfa;
    box-shadow: -16px 0 42px rgba(32, 26, 19, .18);
    opacity: 0;
    pointer-events: none;
    scrollbar-width: none;
    transform: translateX(100%);
    transition: transform 220ms cubic-bezier(.2,.8,.2,1), opacity 180ms ease, visibility 180ms ease;
    visibility: hidden;
  }
  .mobile-profile-drawer::-webkit-scrollbar { display: none; }
  .mobile-profile-drawer.is-open { opacity: 1; pointer-events: auto; transform: translateX(0); visibility: visible; }
  .mobile-profile-drawer__head,
  .mobile-profile-drawer__head > div,
  .mobile-profile-drawer__nav a {
    display: flex;
    align-items: center;
  }
  .mobile-profile-drawer__head { justify-content: space-between; gap: 12px; padding: 0 2px 18px; border-bottom: 1px solid rgba(32, 26, 19, .10); }
  .mobile-profile-drawer__head > div { min-width: 0; gap: 10px; }
  .mobile-profile-drawer__avatar {
    display: grid;
    width: 42px;
    height: 42px;
    flex: none;
    place-items: center;
    border-radius: 13px;
    background: linear-gradient(145deg, #ffe9a3, #ffcc33 60%, #d6a100);
    color: #4b0714;
    font-size: 16px;
    font-weight: 900;
  }
  .mobile-profile-drawer__head strong,
  .mobile-profile-drawer__head small,
  .mobile-profile-drawer__nav span,
  .mobile-profile-drawer__nav small { display: block; }
  .mobile-profile-drawer__head strong { overflow: hidden; color: #211b17; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-profile-drawer__head small,
  .mobile-profile-drawer__nav small { margin-top: 2px; color: #766d64; font-size: 11px; font-weight: 650; }
  .mobile-profile-drawer__head button {
    display: grid;
    width: 44px;
    height: 44px;
    flex: none;
    place-items: center;
    border: 1px solid rgba(32, 26, 19, .11);
    border-radius: 50%;
    background: #fff;
    color: #7a0019;
  }
  .mobile-profile-drawer__head button svg,
  .mobile-profile-drawer__nav a > svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }
  .mobile-profile-drawer__head button svg { width: 20px; height: 20px; }
  .mobile-profile-drawer__nav {
    display: grid;
    flex: 1;
    gap: 4px;
    align-content: start;
    min-height: 0;
    overflow-y: auto;
    padding-top: 16px;
    scrollbar-width: none;
  }
  .mobile-profile-drawer__nav::-webkit-scrollbar { display: none; }
  .mobile-profile-drawer__nav a {
    min-height: 56px;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 13px;
    color: #2a211c;
    text-decoration: none;
    transition: background 160ms ease, color 160ms ease;
  }
  .mobile-profile-drawer__nav a:active { background: rgba(122, 0, 25, .08); color: #7a0019; }
  .mobile-profile-drawer__nav a > svg { width: 20px; height: 20px; flex: none; color: #7a0019; }
  .mobile-profile-drawer__nav a > span:not(.mobile-profile-drawer__emoji) { min-width: 0; overflow: hidden; font-size: 14px; font-weight: 850; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-profile-drawer__label { margin: 17px 10px 5px; color: #8b172c; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
  .mobile-profile-drawer__logout {
    display: grid;
    min-height: 44px;
    margin-top: 12px;
    flex: none;
    place-items: center;
    border: 1px solid rgba(122, 0, 25, .18);
    border-radius: 12px;
    background: #fff8f8;
    overflow: hidden;
  }
  .mobile-profile-drawer__logout button {
    width: 100%;
    min-height: 44px;
    border: 0;
    background: transparent;
    color: #7a0019;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 850;
  }
  .mobile-profile-drawer__logout:active { background: #fbeef0; }
  .mobile-profile-drawer__logout button::before { content: '↪'; margin-right: 8px; font-size: 16px; }
  body.mobile-profile-open { overflow: hidden; }
  body:has(.mobile-home) .mobile-app-header { display: none; }
  body.site-nav-menu-open {
    overflow-y: auto;
  }
  .mobile-explore-tray {
    position: fixed;
    right: 12px;
    bottom: calc(var(--gdt-dock-height) + 6px);
    left: 12px;
    z-index: 175;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 14px 6px 6px;
    border: 1px solid rgba(23, 23, 23, .1);
    border-radius: 18px;
    background: rgba(255, 253, 249, .98);
    box-shadow: 0 -12px 30px rgba(32, 26, 19, .14);
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
    visibility: hidden;
  }
  .mobile-explore-tray::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    width: 34px;
    height: 3px;
    border-radius: 999px;
    background: rgba(53, 39, 28, .2);
    transform: translateX(-50%);
  }
  .mobile-explore-tray.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
  }
  .mobile-explore-tray a {
    display: grid;
    min-width: 0;
    /* 44px tap minimum (WCAG 2.5.5 / HIG); these were 40px. */
    min-height: 44px;
    place-items: center;
    padding: 0 4px;
    border-radius: 10px;
    color: #71685e;
    font-size: 10px;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
    transition: color .18s ease, background .18s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-explore-tray a.is-active {
    background: rgba(122, 0, 25, .09);
    color: #7a0019;
  }
  .mobile-explore-tray a:active { opacity: .7; }
  .mobile-tab-bar {
    --gdt-tab-to: 0%;
    /* This is app chrome, never document content. Keep it pinned even on
       long catalog and organization pages with their own navigation styles. */
    position: fixed !important;
    inset: auto 0 0 !important;
    z-index: 180;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    box-sizing: border-box;
    height: var(--gdt-dock-height);
    min-height: var(--gdt-dock-height);
    padding: 0 8px env(safe-area-inset-bottom);
    border-top: 1px solid rgba(23, 23, 23, .1);
    background: #fffdfa;
    box-shadow: 0 -10px 30px rgba(32, 26, 19, .10);
    backdrop-filter: blur(18px) saturate(1.1);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
    isolation: isolate;
  }
  .mobile-tab-bar:has(> :nth-child(2).is-active) { --gdt-tab-to: 100%; }
  .mobile-tab-bar:has(> :nth-child(3).is-active) { --gdt-tab-to: 200%; }
  .mobile-tab-bar:has(> :nth-child(4).is-active) { --gdt-tab-to: 300%; }
  .mobile-tab-bar:has(> :nth-child(5).is-active) { --gdt-tab-to: 400%; }
  /* Keep the active surface on its actual grid item. The former translated
     pseudo-element could drift from its icon in scaled browser viewports. */
  .mobile-tab-bar::before { display: none; }
  .mobile-tab-bar > a,
  .mobile-tab-bar > button { position: relative; z-index: 1; }
  .mobile-tab-bar > a::after,
  .mobile-tab-bar > button::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 50%;
    width: 16px;
    height: 3px;
    border-radius: 999px;
    background: #ffcc33;
    box-shadow: 0 1px 5px rgba(87, 51, 4, .26);
    opacity: 0;
    transform: translateX(-50%) scaleX(.45);
    transition: opacity 150ms ease, transform 180ms cubic-bezier(.2,.8,.2,1);
  }
  .mobile-tab-bar > a.is-active::after,
  .mobile-tab-bar > button.is-active::after {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
  }
  .mobile-tab-bar > a > svg,
  .mobile-tab-bar > button > svg,
  .mobile-tab-bar > a > span,
  .mobile-tab-bar > button > span { transition: transform 170ms ease, color 170ms ease, opacity 170ms ease; }
  .mobile-tab-bar > a.is-active > svg,
  .mobile-tab-bar > button.is-active > svg { transform: translateY(-1px) scale(1.1); }
  .mobile-tab-bar > a.is-active > span,
  .mobile-tab-bar > button.is-active > span { opacity: 1; }
  .mobile-tab-bar > a:not(.is-active) > span,
  .mobile-tab-bar > button:not(.is-active) > span { opacity: .68; }
  .mobile-tab-bar a,
  .mobile-tab-bar button {
    display: grid;
    min-width: 0;
    min-height: 44px;
    height: auto;
    place-content: center;
    justify-items: center;
    gap: 2px;
    border-radius: 12px;
    color: #71685e;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 10px;
    font-weight: 850;
    line-height: 1.2;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-tab-bar svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-tab-bar > a.is-active,
  .mobile-tab-bar > button.is-active {
    margin: 6px 0;
    border: 1px solid rgba(191, 139, 29, .20);
    border-radius: 18px;
    background: #fff5dc;
    box-shadow: inset 0 1px rgba(255, 255, 255, .72), 0 3px 10px rgba(82, 31, 19, .05);
    color: #7a0019;
    font-weight: 900;
  }
  .mobile-tab-bar .mobile-tab-smart:not(.is-active) { color: #71685e; }
  .mobile-tab-bar a:active,
  .mobile-tab-bar button:active { transform: scale(.96); }
  .mobile-tab-bar a:focus-visible,
  .mobile-tab-bar button:focus-visible,
  .mobile-explore-tray a:focus-visible { outline: 2px solid #7a0019; outline-offset: 2px; }

  /* A shared app canvas for every public page. Individual views retain their
     content styles, but cannot spill wider than a phone or hide under tabs. */
  /* When a browser reports a zero safe-area inset, its viewport background is
     the final fallback behind the Home Indicator. Match it to the dock rather
     than exposing the browser's dark canvas below the app chrome. */
  html { min-width: 0; background: #fffdfa; overflow-x: clip; }
  body { min-width: 0; overflow-x: clip; background: #f8f6f1; }
  body:has(.mobile-tab-bar) > main,
  body:has(.mobile-tab-bar) > .page,
  body:has(.mobile-tab-bar) .page,
  body:has(.mobile-tab-bar) .shell,
  body:has(.mobile-tab-bar) .content {
    min-width: 0;
    max-width: 100%;
  }
  body:has(.mobile-tab-bar) main.page:not(.page-shell),
  body:has(.mobile-tab-bar) main.shell,
  body:has(.mobile-tab-bar) .content {
    /* A stable 16px gutter on each side prevents full-width sections from
       feeling left-heavy, while auto margins keep the whole app panel true
       center regardless of page-specific desktop rules. */
    width: min(calc(100% - 32px), 680px);
    margin-inline: auto !important;
  }
  body:has(.mobile-tab-bar) main.page:not(.page-shell),
  body:has(.mobile-tab-bar) main.shell {
    padding-bottom: 32px;
  }
  body:has(.mobile-tab-bar) .layout,
  body:has(.mobile-tab-bar) .page-head,
  body:has(.mobile-tab-bar) .head {
    min-width: 0;
    max-width: 100%;
  }
  body:has(.mobile-tab-bar) :where(img, video, canvas, svg) { max-width: 100%; }
  body:has(.mobile-tab-bar) a,
  body:has(.mobile-tab-bar) button { touch-action: manipulation; }
  /* Each document is a route in Django. A small entry motion makes the new
     route feel connected without delaying any link or blocking interaction. */
  /* Do not animate <body>: a transformed body becomes the containing block
     for fixed children and pushes the persistent tab bar down the document.
     The same trap applies to these route wrappers, which is why the fill mode
     is "backwards" rather than "both". "both" keeps the final keyframe applied
     forever, so main held an identity transform: translateY(0) long after the
     220ms ended — and a transform of any kind, even one that moves nothing,
     makes the element the containing block for its position: fixed
     descendants. That left the restaurant detail sheet resolving bottom: 0
     against a 10,700px-tall main instead of the viewport, so tapping a card
     did nothing visible: the sheet opened ~10,000px down the page.
     "backwards" still prevents the pre-animation flash and leaves no residue. */
  body.gdt-mobile-route-enter > main,
  body.gdt-mobile-route-enter > .page,
  body.gdt-mobile-route-enter > .shell,
  body.gdt-mobile-route-enter > .content { animation: gdt-mobile-route-in 220ms cubic-bezier(.2,.8,.2,1) backwards; }
  @keyframes gdt-mobile-route-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
  /* Interactive cards and controls receive the same immediate, quiet press
     response; layout dimensions never change. */
  body:has(.mobile-tab-bar) :is(.restaurant-list .card, .restaurant-card, .deal, .result-card, .catalog-item, .card-action, .button, .chip, .toggle, .filter-text, .select):active {
    transform: scale(.98);
  }
  body:has(.mobile-tab-bar) :is(.restaurant-list .card, .restaurant-card, .deal, .result-card, .catalog-item, .card-action, .button, .chip, .toggle, .filter-text, .select) {
    transition: transform 130ms ease, opacity 130ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease;
  }
  @media (prefers-reduced-motion: reduce) {
    body.gdt-mobile-route-enter > main,
    body.gdt-mobile-route-enter > .page,
    body.gdt-mobile-route-enter > .shell,
    body.gdt-mobile-route-enter > .content,
    .mobile-tab-bar::before,
    .mobile-tab-bar > a > svg,
    .mobile-tab-bar > button > svg,
    .mobile-tab-bar > a > span,
    .mobile-tab-bar > button > span,
    .mobile-tab-bar > a::after,
    .mobile-tab-bar > button::after,
    body:has(.mobile-tab-bar) :is(.restaurant-list .card, .restaurant-card, .deal, .result-card, .catalog-item, .card-action, .button, .chip, .toggle, .filter-text, .select) {
      animation: none !important;
      transition: none !important;
    }
  }
}