/* Shared site styles (variables + header/navigation) extracted from home page */
:root{
  --accent:#2f7d5b;
  --accent-tint: color-mix(in oklab, var(--accent) 12%, transparent);
  --accent-tint-2: color-mix(in oklab, var(--accent) 6%, transparent);
  --bg:#f7f4ee;
  --bg-2:#fbfaf6;
  --ink:#161513;
  --ink-2:#2d2a25;
  --ink-3:#5b564d;
  --ink-4:#8a847a;
  --rule: color-mix(in oklab, var(--ink) 10%, transparent);
  --rule-2: color-mix(in oklab, var(--ink) 6%, transparent);
  --card:#ffffff;
  --radius:10px;
}

*{box-sizing:border-box}

/* Nav */
.qn-nav{
  position:sticky;top:0;z-index:50;
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom:1px solid var(--rule-2);
}
.qn-nav-inner{ max-width:1320px;margin:0 auto;padding:14px 32px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:32px; }
.qn-logo{ display:inline-flex;align-items:center;gap:8px;font-family:"Inter Tight",system-ui,sans-serif;font-weight:560;font-size:16px;letter-spacing:-.02em;color:var(--ink); }
.qn-logo-mark{ width:22px;height:22px;display:inline-grid;place-items:center;position:relative; }
.qn-logo-mark svg{ display:block; }
.qn-logo-slash{ opacity:.55; margin:0 1px; }

.qn-nav-links{ display:flex;align-items:center;gap:4px;justify-self:center; }
.qn-nav-links a{ font-size:14px;font-weight:480;color:var(--ink-2);padding:8px 12px;border-radius:6px; }
.qn-nav-links a:hover{ background: color-mix(in oklab, var(--ink) 5%, transparent); color:var(--ink); }

.qn-nav-cta{ display:flex;align-items:center;gap:8px; }

/* Buttons (small subset) */
.qn-btn{ display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:calc(var(--radius) - 2px);font-family:inherit;font-size:14.5px;font-weight:520;letter-spacing:-.005em;border:1px solid transparent;background:transparent;color:var(--ink);cursor:pointer;white-space:nowrap;transition:transform .08s ease, background .15s, border-color .15s, color .15s; }
.qn-btn:active{ transform:translateY(1px); }
.qn-btn-sm{ padding:8px 14px;font-size:13.5px; }
.qn-btn-primary{ background:var(--ink);color:var(--bg-2);border-color:var(--ink); }
.qn-btn-primary:hover{ background:color-mix(in oklab, var(--ink) 88%, var(--accent)); }

/* Mobile menu */
.qn-hamburger{ display:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;border:1px solid var(--rule);background:var(--card);cursor:pointer;color:var(--ink); }
.qn-hamburger span{ display:block;width:18px;height:2px;background:currentColor;border-radius:2px;position:relative; }
.qn-hamburger span::before,.qn-hamburger span::after{ content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;border-radius:2px; }
.qn-hamburger span::before{ top:-6px; } .qn-hamburger span::after{ top:6px; }

.qn-mobile-nav{ display:none; }

@media (max-width: 980px){
  .qn-nav-links.qn-primary-links{ display:none; }
  .qn-hamburger{ display:inline-flex; }
  .qn-mobile-nav{ position:absolute;top:64px;right:16px;left:16px;display:none;flex-direction:column;gap:4px;border:1px solid var(--rule);background:var(--card);border-radius:12px;box-shadow:0 8px 28px -18px rgba(0,0,0,.25);padding:10px;z-index:60; }
  .qn-mobile-nav a{ padding:10px 12px;border-radius:8px;font-size:14.5px;color:var(--ink); }
  .qn-mobile-nav a:hover{ background:var(--bg-2); }
  .qn-mobile-nav.open{ display:flex; }
}
