/* Imperial Ground — shared styles for sub-pages. Keep in sync with index.html's <style>. */

/* FOUC prevention — pairs with the inline script in every main-site
   page's <head>. When the script detects a non-source locale (anything
   other than English today), it adds .i18n-loading to <html> before
   any body content paints. This rule then hides the body until either
   (a) i18n.js applies the dictionary and removes the class, or
   (b) the 1s safety timeout in the inline script removes it.
   Without this rule, the class would be a no-op and the user would
   see a flash of English text before the dict swap. */
html.i18n-loading body { visibility: hidden; }

:root {
  --bg: #FAFAF7;
  --surface: #FFFFFF;
  --surface-2: #F2F0EA;
  --gold: #C9302C;
  --gold-2: #A62521;
  --red: #1A1A1A;
  --text: #1A1A1A;
  --muted: #6B6B6B;
  --line: #E5E1D6;
  --sage: #7A8B6E;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--text);
  font-family: 'Inter', system-ui, sans-serif; font-weight: 300; line-height: 1.6;
  overflow-x: hidden;
}
h1, h2, h3, h4, .eyebrow, .btn {
  font-family: 'Oswald', sans-serif; font-weight: 600;
  letter-spacing: 0.02em; text-transform: uppercase;
}
h1 { font-size: clamp(2.5rem, 6vw, 5rem); line-height: 0.95; letter-spacing: -0.01em; }
h2 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1; margin-bottom: 1rem; }
h3 { font-size: 1.5rem; letter-spacing: 0.03em; }
h4 { font-size: 1.1rem; letter-spacing: 0.08em; }
p { color: #6B6B6B; margin-bottom: 1rem; }
a { color: inherit; text-decoration: none; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.eyebrow { color: var(--gold); font-size: 0.85rem; letter-spacing: 0.3em; font-weight: 500; margin-bottom: 1rem; display: block; }

/* NAV */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(250,250,247, 0.9); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: 1280px; margin: 0 auto; padding: 18px 32px;
  display: flex; align-items: center; justify-content: space-between;
}
.logo {
  font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: 1.1rem; letter-spacing: 0.15em; text-transform: uppercase;
  display: flex; align-items: center; gap: 12px;
}
.logo-mark {
  width: 36px; height: 36px; border: 2px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-weight: 700; font-size: 1.1rem; transform: rotate(45deg);
}
.logo-mark span { transform: rotate(-45deg); }
.logo small { display: block; font-size: 0.65rem; color: var(--muted); letter-spacing: 0.25em; margin-top: 2px; font-weight: 400; }
.nav-links { display: flex; gap: 26px; align-items: center; list-style: none; }
.nav-links a {
  font-family: 'Oswald', sans-serif; font-size: 0.85rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 500; color: #1A1A1A; transition: color 0.2s; position: relative;
}
.nav-links a:hover { color: var(--gold); }
.lang { display: flex; gap: 8px; font-size: 0.75rem; color: var(--muted); }
.lang span.active { color: var(--gold); }

/* Mobile nav: pre-existing layout pushed past the viewport (logo + 3 links
   + 4 flags + cart icon = ~600px on a 390px screen). With body's overflow-x
   clip, the right half just disappeared. Compact on phones, drop the
   language flags (only EN + PT shipped so far), shrink the logo. */
@media (max-width: 760px) {
  .nav-inner { padding: 12px 16px; gap: 8px; }
  .nav-links { gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
  .nav-links a {
    font-size: 0.7rem; letter-spacing: 0.14em;
  }
  .nav-links .lang { display: none; }
  .logo { font-size: 0.9rem; gap: 8px; letter-spacing: 0.12em; }
  .logo-mark { width: 30px; height: 30px; font-size: 0.9rem; }
  .icon-btn { width: 36px; height: 36px; }
}
@media (max-width: 380px) {
  /* Tiniest devices: drop the wordmark, keep just the IG diamond + cart. */
  .logo span:not(.logo-mark) { display: none; }
}

.btn {
  display: inline-block; padding: 14px 28px; font-size: 0.85rem;
  letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600;
  background: var(--gold); color: #FAFAF7; border: 2px solid var(--gold);
  cursor: pointer; transition: all 0.25s; font-family: 'Oswald', sans-serif;
}
.btn:hover { background: transparent; color: var(--gold); }
.btn.outline { background: transparent; color: var(--text); border-color: var(--text); }
.btn.outline:hover { background: var(--gold); border-color: var(--gold); color: #FAFAF7; }

/* Nav-specific Free Trial CTA — refined gold ghost pill with a pulsing dot. */
.btn-trial-nav {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 18px 9px 16px;
  font-family: 'Oswald', sans-serif; font-weight: 600;
  font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); background: transparent;
  border: 1.5px solid var(--gold);
  cursor: pointer;
  transition: background 0.3s, color 0.3s, box-shadow 0.3s, transform 0.25s;
}
.btn-trial-nav::after { content: '→'; font-size: 0.95rem; letter-spacing: 0; transition: transform 0.25s; }
/* Specificity bump — see matching block in public/index.html. The bare
   .btn-trial-nav:hover loses to .nav-links a:hover (element selector
   pushes it ahead by 1), so we qualify with .nav-links to match + win
   on source order. Otherwise the FREE TRIAL text disappears on hover
   (red on red). */
.nav-links a.btn-trial-nav:hover {
  background: var(--gold); color: #FAFAF7;
  box-shadow: 0 8px 22px rgba(201,48,44, 0.22);
  transform: translateY(-1px);
}
.nav-links a.btn-trial-nav:hover::after { transform: translateX(3px); }
.btn-trial-nav .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: 0 0 auto;
  animation: btnTrialPulse 2.2s ease-in-out infinite;
}
.btn-trial-nav:hover .dot { background: #FAFAF7; animation: none; }
@keyframes btnTrialPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,48,44, 0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(201,48,44, 0); }
}

/* Language switcher with flags */
.lang a {
  font-size: 1.1rem; line-height: 1; filter: grayscale(0.5); opacity: 0.65;
  transition: filter 0.2s, opacity 0.2s;
}
.lang a:hover { filter: grayscale(0); opacity: 1; }
.lang a.active { filter: grayscale(0); opacity: 1; }

.icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; color: #1A1A1A;
  border: 1px solid var(--line); transition: all 0.2s;
}
.icon-btn:hover { color: var(--gold); border-color: var(--gold); background: rgba(201,48,44,0.08); }

/* Sign In — labeled nav pill. Secondary CTA sibling to .btn-trial-nav: kept
   visually quieter (neutral outline, no pulse, no directional arrow) so Free
   Trial remains the dominant call-to-action for new visitors while returning
   members have an unmistakable labeled entry point. Promoted from a tiny
   person-silhouette icon that testers couldn't find. */
.btn-signin-nav {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px 9px 14px;
  font-family: 'Oswald', sans-serif; font-weight: 600;
  font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text); background: transparent;
  border: 1.5px solid var(--line);
  cursor: pointer; white-space: nowrap;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.btn-signin-nav svg { width: 16px; height: 16px; flex: 0 0 auto; }
.btn-signin-nav:hover { color: var(--gold); border-color: var(--gold); background: rgba(201,168,76,0.08); }

/* Logged-in modifier: same .btn-signin-nav pill geometry, just flipped to
   red-fill so the state is visually distinct without changing dimensions
   (rebuilt 2026-04-26 — was a separate .btn-member-chip 40x40 square that
   reflowed the nav on signin). All responsive rules on .btn-signin-nav
   carry through automatically because the base class is preserved. The
   label text (.signin-label) is replaced with the member's initials by
   member-nav.js. Status-colour overrides (pending/blocked) are applied
   inline by member-nav.js on top of this. */
.btn-signin-nav--member {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}
.btn-signin-nav--member:hover {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
  filter: brightness(0.92);
}

/* Legacy .btn-member-chip rules — kept as no-op fallback in case a
   cached older member-nav.js is briefly served alongside fresh CSS. Can
   be removed in a future sweep once the cache window has elapsed. */
.btn-member-chip {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold); color: #fff;
  border: 1.5px solid var(--gold);
  padding: 9px 16px 9px 14px;
  font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.2s;
}
.btn-member-chip:hover { filter: brightness(0.92); }

/* On narrow phones the label gets in the way of Free Trial. Drop it and keep
   the icon — at this point the user already knows it's the account button
   because Free Trial is right next to it and clearly distinct. */
@media (max-width: 480px) {
  .btn-signin-nav .signin-label { display: none; }
  .btn-signin-nav { padding: 9px 11px; gap: 0; }
}
.cart-badge {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px;
  background: var(--red); color: #fff; border-radius: 50%;
  font-family: 'Oswald', sans-serif; font-size: 0.7rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
  border: 2px solid var(--bg);
}
.cart-badge.hide { display: none; }

/* PAGE HERO (shorter than home hero) */
.page-hero {
  position: relative; padding: 180px 0 80px;
  background: linear-gradient(135deg, #FFFFFF 0%, #FAFAF7 70%);
  overflow: hidden; border-bottom: 1px solid var(--line);
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 20% 0%, rgba(201,48,44,0.15), transparent 60%);
}
.page-hero-inner { position: relative; z-index: 2; max-width: 900px; }
.breadcrumbs {
  font-family: 'Oswald', sans-serif; font-size: 0.75rem;
  letter-spacing: 0.25em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem;
}
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--gold); }
.breadcrumbs .sep { margin: 0 10px; color: var(--line); }

section { padding: 80px 0; position: relative; }
.section-head { max-width: 700px; margin-bottom: 50px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-sub { color: var(--muted); font-size: 1.05rem; margin-top: 12px; }

.content-block { max-width: 820px; }
.content-block p { font-size: 1.05rem; color: #6B6B6B; margin-bottom: 1.2rem; }
.content-block h2 { margin-top: 2.5rem; }
.content-block h3 { margin-top: 2rem; margin-bottom: 0.75rem; color: var(--gold); }
.content-block ul, .content-block ol { padding-left: 1.5rem; margin-bottom: 1.2rem; color: #6B6B6B; }
.content-block ul li, .content-block ol li { padding: 6px 0; }
.content-block ul li::marker { color: var(--gold); }

/* Info cards grid */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.info-card {
  background: var(--surface-2); padding: 36px 32px; border: 1px solid var(--line);
  border-top: 3px solid var(--gold); transition: transform 0.3s;
}
.info-card:hover { transform: translateY(-4px); }
.info-card .num {
  font-family: 'Oswald', sans-serif; font-size: 3rem; color: var(--gold);
  font-weight: 700; line-height: 1; margin-bottom: 14px;
}
.info-card h3 { margin-bottom: 12px; }
.info-card p { color: #6B6B6B; font-size: 0.95rem; }

/* Split blocks */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.split.alt { direction: rtl; }
.split.alt > * { direction: ltr; }

.photo-placeholder {
  background: linear-gradient(135deg, #FFFFFF, #FAFAF7);
  aspect-ratio: 4/3; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  background-image:
    repeating-linear-gradient(45deg, transparent 0 40px, rgba(201,48,44,0.03) 40px 41px);
  color: var(--muted); font-family: 'Oswald', sans-serif;
  letter-spacing: 0.2em; font-size: 0.85rem; text-transform: uppercase;
}

/* Table / schedule-style */
.mini-schedule {
  width: 100%; border-collapse: collapse; font-family: 'Oswald', sans-serif;
}
.mini-schedule th, .mini-schedule td {
  padding: 16px 14px; text-align: left; border: 1px solid var(--line);
  font-size: 0.9rem; letter-spacing: 0.05em;
}
.mini-schedule th {
  background: var(--surface); color: var(--gold); text-transform: uppercase;
  letter-spacing: 0.2em; font-size: 0.78rem;
}

/* Belt row */
.belts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 40px 0; }
.belt {
  padding: 30px 16px; text-align: center; border-right: 1px solid var(--line);
  position: relative;
}
.belt:last-child { border-right: 0; }
.belt-bar { height: 8px; margin-bottom: 20px; position: relative; }
.belt-bar::after { content: ''; position: absolute; right: 10%; top: 0; bottom: 0; width: 15%; background: #000; }
.belt.white .belt-bar { background: #ffffff; }
.belt.blue .belt-bar  { background: #1e6bb8; }
.belt.purple .belt-bar{ background: #6a3b9c; }
.belt.brown .belt-bar { background: #6b3e12; }
.belt.black .belt-bar { background: #000; border: 1px solid #333; }
/* Black belt: tip overrides the default #000 with red. Standard tip would
   be invisible on a black bar, and BJJ tradition labels black belts with
   a red tag. Uses the site's hinomaru-red --gold accent. */
.belt.black .belt-bar::after { background: var(--gold); }

/* ─── Multi-select chip pattern (used by /account profile sections) ─────
   Reusable pill UI. Used by:
     - /account → Profile → BJJ profile (account-profile.js)
     - /account → Profile → Health info (account-profile-contacts.js)
   Per-section typography (font-family, letter-spacing, text-transform)
   stays inline at the call site; behavior + accent come from here. Lived
   inside #bjjProfileBody until 2026-05-02 — moved out so the health
   chips actually toggle visually on click. */
.pf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--line, #E5E1D6);
  background: var(--surface, #FFFFFF);
  color: var(--text, #1A1A1A);
  font-size: 13px; cursor: pointer;
  transition: all 0.15s; user-select: none;
}
.pf-chip:hover { border-color: var(--gold, #C9302C); }
.pf-chip.is-on {
  border-color: var(--gold, #C9302C);
  background: var(--gold, #C9302C);
  color: #FFFFFF;
}
.belt h4 { font-family: 'Oswald', sans-serif; letter-spacing: 0.15em; }
.belt p { font-size: 0.8rem; color: var(--muted); margin-top: 8px; }

/* CTA */
.cta-banner {
  padding: 100px 0; background: var(--bg); position: relative; overflow: hidden;
}
.cta-banner::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(250,250,247,0.85), rgba(250,250,247,0.6)),
    radial-gradient(ellipse at center right, rgba(201,48,44,0.18), transparent 60%);
}
.cta-inner { position: relative; z-index: 2; text-align: center; max-width: 800px; margin: 0 auto; }
.cta-inner h2 span { color: var(--gold); }
.cta-inner p { font-size: 1.1rem; margin-bottom: 2rem; color: #6B6B6B; }

/* FOOTER */
footer { background: #FAFAF7; padding: 60px 0 32px; border-top: 1px solid var(--line); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 40px; }
.foot-col h4 { color: var(--gold); margin-bottom: 16px; font-size: 0.9rem; letter-spacing: 0.2em; }
.foot-col ul { list-style: none; }
.foot-col ul li { padding: 5px 0; color: var(--muted); font-size: 0.88rem; }
.foot-col a { color: var(--muted); }
.foot-col a:hover { color: var(--gold); }
.foot-brand p { color: var(--muted); margin-top: 14px; max-width: 320px; font-size: 0.9rem; }
.foot-bottom {
  padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; color: var(--muted); font-size: 0.82rem; flex-wrap: wrap; gap: 16px;
}

/* CHAT + MODAL (identical to index.html) */
.chat-fab {
  position: fixed; bottom: 28px; right: 28px; z-index: 150;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--gold); color: #FAFAF7; border: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  animation: chatPulse 2.6s infinite;
}
@keyframes chatPulse {
  0% { box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 0 0 0 rgba(201,48,44,0.55); }
  70% { box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 0 0 18px rgba(201,48,44,0); }
  100% { box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 0 0 0 rgba(201,48,44,0); }
}
.chat-panel {
  position: fixed; bottom: 110px; right: 28px; z-index: 149;
  width: 360px; max-width: calc(100vw - 56px); max-height: 70vh;
  background: var(--surface-2); border: 1px solid var(--line); border-top: 3px solid var(--gold);
  display: none; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}
.chat-panel.open { display: flex; }
.chat-head { padding: 18px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.chat-head .dot { width: 10px; height: 10px; border-radius: 50%; background: #4CAF50; }
.chat-head strong { font-family: 'Oswald', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.9rem; }
.chat-head small { color: var(--muted); font-size: 0.75rem; display: block; margin-top: 2px; }
.chat-close { margin-left: auto; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 1.4rem; line-height: 1; }
.chat-body { flex: 1; padding: 20px; overflow-y: auto; }
.chat-msg { margin-bottom: 14px; font-size: 0.9rem; max-width: 85%; padding: 10px 14px; line-height: 1.45; }
.chat-msg.bot { background: var(--bg); color: #1A1A1A; border-left: 2px solid var(--gold); }
.chat-msg.user { background: var(--gold); color: #FAFAF7; margin-left: auto; font-weight: 500; }
.chat-input { display: flex; border-top: 1px solid var(--line); }
.chat-input input { flex: 1; background: var(--bg); border: 0; padding: 14px 16px; color: var(--text); font-family: 'Inter', sans-serif; font-size: 0.9rem; }
.chat-input input:focus { outline: none; }
.chat-input button {
  background: var(--gold); color: #FAFAF7; border: 0; padding: 0 20px;
  font-family: 'Oswald', sans-serif; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer;
}

/* Hamburger button (hidden on desktop) */
.hamburger { display: none; background: none; border: none; color: var(--text); cursor: pointer; font-size: 1.5rem; padding: 4px 8px; }
.nav-links li:has(.icon-btn) + li:has(.icon-btn) { margin-left: -24px; }

/* Intermediate desktop widths — between the hamburger breakpoint (≤700px)
   and the width where the full nav fits cleanly (~1280px). Without these
   rules, the rightmost item (the FREE TRIAL CTA, the most conversion-
   critical button on the site) gets clipped on narrower laptop screens
   like ~1280px Safari + system chrome.
   Strategy: progressively drop the lowest-priority clusters (language
   flags first, then social/cart icons, then tighten the page-link spacing)
   so Sign In + Free Trial always survive. */
@media (max-width: 1280px) and (min-width: 701px) {
  /* Language flags are aspirational today — only EN ships, PT is planned.
     The DE/ES flags render disabled. They're the cheapest thing to drop. */
  .nav-links .lang { display: none; }
}
@media (max-width: 1100px) and (min-width: 701px) {
  /* Social + cart icons live in the footer too. The Cart is for a shop
     currently hidden, so it's a no-op visual today anyway. Drop them and
     tighten the page-link spacing. */
  .nav-links li:has(.icon-btn) { display: none; }
  .nav-links { gap: 18px; }
  .nav-links a { font-size: 0.78rem; letter-spacing: 0.14em; }
}
@media (max-width: 900px) and (min-width: 701px) {
  /* Final compaction before hamburger kicks in at ≤700px. */
  .nav-links { gap: 12px; }
  .nav-links a { font-size: 0.72rem; letter-spacing: 0.12em; }
  .btn-trial-nav { padding: 8px 14px; font-size: 0.72rem; letter-spacing: 0.16em; }
  .btn-signin-nav { padding: 8px 12px; font-size: 0.72rem; }
}

@media (max-width: 1024px) {
  .split { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .nav .nav-inner { position: relative; }
  .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-wrap: wrap; align-items: center; gap: 0;
    background: rgba(250,250,247,0.98); border-top: 1px solid var(--line);
    padding: 4px 20px 16px;
    max-height: calc(100vh - 70px); overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links.open { display: flex; }
  .nav-links li { flex: 1 1 100%; border-bottom: 1px solid var(--line); }
  .nav-links li a { display: block; padding: 14px 4px; font-size: 0.95rem; }
  .nav-links li.lang { display: flex; gap: 16px; padding: 14px 4px; border-bottom: 1px solid var(--line); }
  .nav-links li.lang a { display: inline; padding: 0; font-size: 1.2rem; }
  .nav-links a::after { display: none; }

  .nav-links li:has(.icon-btn) {
    flex: 0 0 auto; padding: 14px 0 4px; margin-right: 10px;
    border-bottom: 0;
  }
  .nav-links li:has(.icon-btn) + li:has(.icon-btn) { margin-left: 0; }
  .nav-links li:has(.icon-btn) a {
    padding: 10px 14px; border: 1px solid var(--line);
    display: inline-flex; align-items: center;
  }
  .nav-links li:has(.icon-btn) a:hover { border-color: var(--gold); }

  /* Sign In: full-width outlined pill on its own row, above Free Trial. Undo
     the narrow-phone ≤480px label-collapse — hamburger menu has the room. */
  .nav-links li:has(.btn-signin-nav) {
    flex: 1 1 100%; margin-top: 12px;
    border-bottom: 0;
  }
  .nav-links li:has(.btn-signin-nav) .btn-signin-nav {
    display: flex; justify-content: center; padding: 14px;
    width: 100%; gap: 8px;
  }
  .nav-links li:has(.btn-signin-nav) .signin-label { display: inline; }

  .nav-links li:has(.btn-trial-nav) {
    flex: 1 1 100%; margin-top: 10px;
    border-bottom: 0;
  }
  .nav-links li:has(.btn-trial-nav) a {
    display: flex; justify-content: center; padding: 14px;
  }

  .hamburger { display: block; }
  .hamburger.open { color: var(--gold); }

  .card-grid, .foot-grid { grid-template-columns: 1fr; }
  .belts { grid-template-columns: repeat(5, 1fr); }
  .container { padding: 0 20px; }
  section { padding: 60px 0; }
}
