/* Shared site navigation: same bar on every page. Extracted from the home page styles. */
:root {
  --ink: #4b2a1b; --ink-soft: #7a5a49; --rule: rgba(94, 54, 31, .13);
  --surface: #fbeee8; --accent-dark: #8f4a3a;
}
.nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      background: rgba(255, 251, 244, 0.84);
      backdrop-filter: blur(24px) saturate(1.6);
      -webkit-backdrop-filter: blur(24px) saturate(1.6);
      border-bottom: 1px solid rgba(212, 170, 122, 0.20);
      transition: background 0.3s;
    }
.nav__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 64px;
      gap: 24px;
    }
.nav__logo {
      font-family: var(--ff-serif);
      font-size: 20px;
      font-weight: 400;
      color: var(--brand);
      white-space: nowrap;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 10px;
    }
.nav__links {
      display: flex;
      align-items: center;
      gap: 32px;
    }
.nav__links a {
      font-size: 14px;
      font-weight: 500;
      color: var(--text-body);
      transition: color 0.2s;
    }
.nav__links a:hover { color: var(--accent); }
.nav__links a.btn--nav { color: #fff; font-weight: 700; }
.nav__links a.btn--nav:hover { color: #fff; }
.nav__dropdown { position: relative; }
.nav__dropdown-trigger {
      display: flex; align-items: center; gap: 5px;
      font-family: var(--ff-sans); font-size: 14px; font-weight: 500; color: var(--text-body);
      background: none; border: none; cursor: pointer; padding: 0; transition: color 0.2s;
    }
.nav__dropdown-trigger:hover { color: var(--accent); }
.nav__dropdown-trigger svg { width: 9px; height: 9px; transition: transform 0.2s; flex-shrink: 0; }
.nav__dropdown:hover .nav__dropdown-trigger svg,
    .nav__dropdown:focus-within .nav__dropdown-trigger svg { transform: rotate(180deg); }
.nav__dropdown-menu {
      position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%);
      min-width: 220px; background: #FFFCF8; border: 1px solid rgba(196,134,58,0.16);
      border-radius: 14px; box-shadow: var(--shadow-lg, 0 8px 40px rgba(30,18,9,0.14));
      padding: 10px; display: none; flex-direction: column; gap: 2px; z-index: 50;
    }
.nav__dropdown:hover .nav__dropdown-menu,
    .nav__dropdown:focus-within .nav__dropdown-menu { display: flex; }
.nav__dropdown-menu a {
      display: block; padding: 9px 12px; border-radius: 8px; font-size: 13.5px;
      color: var(--text-body); white-space: nowrap;
    }
.nav__dropdown-menu a:hover { background: rgba(196,134,58,0.08); color: var(--accent); }
.btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-family: var(--ff-sans);
      font-weight: 700;
      font-size: 14px;
      border-radius: var(--radius-pill);
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
      white-space: nowrap;
      border: none;
      text-decoration: none;
      letter-spacing: 0.01em;
    }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary {
      background: linear-gradient(135deg, var(--accent), #E0A058);
      color: #fff;
      padding: 14px 28px;
      box-shadow: 0 4px 20px rgba(196, 134, 58, 0.38);
    }
.btn--primary:hover { box-shadow: 0 8px 32px rgba(196, 134, 58, 0.52); }
.btn--dark {
      background: var(--brand);
      color: #fff;
      padding: 14px 30px;
      box-shadow: 0 4px 20px rgba(30, 18, 9, 0.22);
    }
.btn--dark:hover { background: #2A1A0A; box-shadow: 0 8px 30px rgba(30, 18, 9, 0.32); }
.btn--ghost {
      background: transparent;
      color: var(--brand);
      border: 1.5px solid rgba(30, 18, 9, 0.22);
      padding: 14px 28px;
    }
.btn--ghost:hover { background: rgba(30, 18, 9, 0.04); border-color: rgba(30, 18, 9, 0.38); }
.btn--nav {
      background: linear-gradient(135deg, var(--accent), #E0A058);
      color: #fff;
      padding: 9px 20px;
      box-shadow: 0 2px 12px rgba(196, 134, 58, 0.32);
    }
.btn--nav:hover { box-shadow: 0 4px 20px rgba(196, 134, 58, 0.48); }
.nav__hamburger {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
    }
.nav__mobile-menu {
      display: none;
      flex-direction: column;
      gap: 0;
      padding: 8px 0 16px;
      border-top: 1px solid rgba(212, 170, 122, 0.18);
    }
.nav__mobile-menu.open { display: flex; }
.nav__mobile-menu a {
      font-size: 15px;
      font-weight: 500;
      color: var(--text-body);
      padding: 12px 24px;
      transition: color 0.2s;
    }
.nav__mobile-menu a:hover { color: var(--accent); }
.nav__mobile-menu .btn { margin: 8px 24px 0; width: calc(100% - 48px); }
.btn--sm { padding: 10px 20px; }
@media (max-width: 768px) {
.nav__links { display: none; }
.nav__hamburger { display: flex; align-items: center; }
}

/* polish and system overrides for nav and buttons */
.nav { background: rgba(255, 250, 245, .78); border-bottom-color: var(--line); }
.nav__inner { height: 72px; }
.nav__logo { font-size: 21px; letter-spacing: -.02em; }
.nav__links { gap: 20px; }
.nav__links a, .nav__dropdown-trigger { font-size: 13px; }
.nav__links a:focus-visible, .nav__dropdown-trigger:focus-visible,
.nav__hamburger:focus-visible, .btn:focus-visible, a:focus-visible,
button:focus-visible { outline: 3px solid rgba(189,112,69,.45); outline-offset: 4px; }
@media (max-width: 1050px){
.nav__links { gap: 14px; }
.nav__links a, .nav__dropdown-trigger { font-size: 12px; }
.nav__links .btn--nav { padding-inline: 14px; }
}
@media (max-width: 768px){
.nav__inner { height: 64px; }
}
.nav { background: rgba(247,243,234,.94); border-bottom: 1px solid var(--rule); }
.nav__inner { min-height: 72px; height: auto; }
.nav__links { gap: clamp(10px, 1.6vw, 22px); flex-wrap: nowrap; }
.nav__links a, .nav__dropdown-trigger { color: var(--ink-soft); white-space: nowrap; }
.nav__links .btn--nav { flex: 0 0 auto; min-width: max-content; white-space: nowrap; font-size: 12px; padding: 10px 16px; }
.nav__links a.btn--nav { color: #fff; }
.btn { min-height: 46px; }
.btn--primary, .btn--nav { background: var(--ink); box-shadow: 0 8px 20px rgba(75, 42, 27,.18); }
.btn--primary:hover, .btn--nav:hover { background: #2f1a10; }
.btn--ghost { color: var(--ink); border-color: rgba(75, 42, 27,.28); }
.btn--ghost:hover { background: rgba(75, 42, 27,.06); border-color: var(--ink); }
@media (max-width: 1050px){
.nav__links { gap: 10px; }
.nav__links .btn--nav { padding-inline: 12px; }
}
@media (max-width: 768px){
.nav__inner { min-height: 64px; }
}
.nav__dropdown { position: relative; z-index: 20; }
.nav__dropdown-trigger { position: relative; z-index: 2; }
.nav__dropdown-menu {
  top: 100%;
  z-index: 1000;
  margin-top: 0;
  padding-top: 10px;
}
.nav__dropdown:hover .nav__dropdown-menu,
.nav__dropdown:focus-within .nav__dropdown-menu,
.nav__dropdown.open .nav__dropdown-menu { display: flex; }
.nav__dropdown.open .nav__dropdown-trigger svg { transform: rotate(180deg); }
.nav__dropdown-menu a { position: relative; z-index: 1; }
@media (min-width: 769px) and (max-width: 1100px){
.nav__links { gap: 9px; }
.nav__links > li:nth-child(6), .nav__links > li:nth-child(7) { display: none; }
}
@media (max-width: 768px){
.nav__links { display: none; }
.nav__inner { width: 100%; }
.hero__ctas .btn--ghost { width: max-content; }
}
@media (max-width: 420px){
.hero__ctas .appstore-badge, .hero__ctas .appstore-badge img, .hero__ctas .btn--ghost { max-width: 100%; }
}
.btn--primary, .btn--nav { box-shadow: none; background-image: none; }
.nav { background: rgba(251, 238, 232, .96); }
.nav { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Pages without their own .container rules (legal, community): keep the bar aligned and clean. */
.nav .container { width: min(100% - 48px, 1180px); max-width: none; margin-inline: auto; padding: 0; }
.nav a, .nav a:hover { text-decoration: none; }
.nav__logo { color: var(--ink); }
.nav .nav__links a.btn--nav { background: var(--ink); background-image: none; color: #fff; box-shadow: none; }
.nav .nav__links a.btn--nav:hover { background: #2f1a10; color: #fff; }
.nav__links, .nav__links li, .nav__dropdown-menu, .nav__dropdown-menu li { list-style: none; }
.nav__links li::marker, .nav__links li::before { content: none; }