/* styles/landing.css — welcome/hero/features + top nav + brand + hover dropdown
   Part of the former single style.css, split by source order so the cascade is
   unchanged (loaded in sequence: tokens→base→landing→auth→portfolio→research→pages). */
/* ---------- Welcome page ---------- */
/* The landing column can breathe a little wider than the tracker. */
.landing { max-width: 680px; }

/* Hero: enso, promise, the way in */
.hero {
  text-align: center;
  margin-bottom: 96px;
}
/* The brand name over the promise — quiet, spaced, sage. */
.hero__eyebrow {
  margin: 18px 0 2px;
  font-size: 28px;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
}
.hero__title {
  font-size: 44px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0.01em;
  margin: 8px 0 24px;
}
.hero__lede {
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto 36px;
}
.hero__trust {
  margin-top: 20px;
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}

/* The possibilities: a calm vertical list */
.features {
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin-bottom: 96px;
}
.feature {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  text-align: left;
}
.feature__icon {
  flex: none;
  width: 30px;
  height: 30px;
  color: var(--accent);
  opacity: 0.9;
  margin-top: 4px;
}
.feature__title {
  font-size: 19px;
  font-weight: 400;
  margin-bottom: 6px;
}
.feature__desc {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.7;
}

/* The closing invitation */
.closing {
  text-align: center;
  margin-bottom: 24px;
}
.closing__line {
  font-size: 20px;
  font-weight: 300;
  color: var(--ink);
  margin-bottom: 24px;
}

/* ══════════════════════════════════════════════════════════════════
   LANDING PAGE (index.html) — the modern, confident welcome.
   A bold sage hero field (Alpaca-style), an overlapping product-mockup
   placeholder, getquin-style alternating feature sections, a dark stats
   band, and a closing call. All ".lp-*" so it never collides with the
   tracker's own styles. Colours on the sage field / stats band are
   deliberately LITERAL (not theme tokens) so the branded bands stay
   constant in both light and dark; everything on the paper background
   uses the normal tokens and re-themes automatically.
   ══════════════════════════════════════════════════════════════════ */
.lp {
  overflow: clip;                       /* contain the mockup's negative-margin overlap */
  /* The landing uses a bold geometric sans (Plus Jakarta Sans) — the closest free
     match to Alpaca's "BR Omega". Only the landing is affected; the tracker + navbar
     keep the system font. Falls back cleanly if the web font can't load. */
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.lp-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---- Hero: bold sage field ---- */
.lp-hero {
  position: relative;
  text-align: center;
  color: #eef3f0;
  /* extra top room so the promise clears the tall fixed navbar it sits under */
  padding: clamp(104px, 13vw, 156px) 0 0;
  background:
    radial-gradient(125% 95% at 50% -6%, rgba(252, 221, 9, 0.18) 0%, rgba(252, 221, 9, 0) 50%),
    radial-gradient(150% 130% at 50% -14%, #6d8579 0%, #4e6157 47%, #384740 100%);
  /* Anchor the gradient to the viewport so the navbar (which wears the SAME
     viewport-anchored gradient over the green) lines up with it pixel-for-pixel
     at every scroll position — a perfect, opaque match, never see-through. */
  background-attachment: fixed;
}
/* K1 "senyera" gold accents on the hero: the "Crypto" headline word + the gold
   CTA + the gold Sign-up in the landing navbar (scoped to .navbar--gold). */
.lp-hl { color: #ffe04a; }
.lp-hero__inner { animation: fadeUp 0.7s ease both; }

/* ── Hero colour variants (mockups — swap the modifier class on .lp-hero) ──
   1. .lp-hero--sage  → the base rule above (Steel-Sage green).
   2. .lp-hero--gold  → bold senyera-gold field, deep-pine ink text, dark CTA.
   3. .lp-hero--pine  → deep near-black pine, cream text, gold accents. */
.lp-hero--gold {
  color: #26332c;
  background:
    radial-gradient(135% 95% at 50% -6%, #ffe64d 0%, #fcdd09 46%, #f1c400 100%);
}
.lp-hero--gold .lp-eyebrow { color: #6a5405; }               /* dark warm gold */
.lp-hero--gold .lp-hero__title { color: #1e271d; }
.lp-hero--gold .lp-hero__lede { color: rgba(30, 39, 28, 0.82); }
.lp-hero--gold .lp-hero__trust { color: rgba(30, 39, 28, 0.58); }
.lp-hero--gold .btn--cream {                                  /* dark pill on yellow (Alpaca move) */
  background: #182220; border-color: #182220; color: #f4f6f7;
  box-shadow: 0 12px 30px -16px rgba(20, 29, 25, 0.6);
}
.lp-hero--gold .btn--cream:hover { background: #0f1714; border-color: #0f1714; color: #ffffff; }

.lp-hero--pine {
  color: #e9efec;
  background:
    radial-gradient(120% 90% at 50% -4%, rgba(252, 221, 9, 0.12) 0%, rgba(252, 221, 9, 0) 46%),
    radial-gradient(150% 130% at 50% -12%, #20302a 0%, #16201c 50%, #0d1512 100%);
}

/* ── Hero LETTER-colour variants (sit on the sage field) ──
   .lp-type--cream → base soft-white (default). .lp-type--gold → senyera-gold
   headline. .lp-type--ink → deep-pine near-black headline (max contrast). */
.lp-type--gold .lp-hero__title { color: #ffe04a; }
.lp-type--ink  .lp-hero__title { color: #16201c; }
.lp-type--ink  .lp-hero__lede  { color: rgba(22, 32, 28, 0.80); }

.lp-eyebrow {
  margin: 0 0 22px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #fcdd09;                       /* senyera gold — the one warm accent */
}
.lp-hero__title {
  /* Sized/weighted to copy Alpaca's hero headline: ~52px at desktop,
     weight 700, line-height ~1.2, letter-spacing normal, sentence case. */
  margin: 0 auto 22px;
  max-width: 18ch;
  font-size: clamp(31px, 4.1vw, 54px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: normal;
  color: #f7faf9;
  text-wrap: balance;
}
.lp-hero__lede {
  margin: 0 auto 32px;
  max-width: 600px;
  font-size: clamp(17px, 2.1vw, 21px);
  line-height: 1.6;
  color: rgba(240, 245, 242, 0.84);
}
.lp-hero__cta { margin-bottom: 18px; }
.lp-hero__trust {
  font-size: 13px;
  letter-spacing: 0.01em;
  color: rgba(240, 245, 242, 0.62);
}

/* A cream pill for the CTA that sits ON the sage field (max contrast) */
.btn--cream {
  display: inline-block;
  text-decoration: none;
  background: #f7faf9;
  border-color: #f7faf9;
  color: #33423b;
  font-weight: 600;
  padding: 14px 32px;
  font-size: 15px;
  box-shadow: 0 12px 30px -14px rgba(20, 29, 25, 0.7);
}
.btn--cream:hover { background: #ffffff; border-color: #ffffff; color: #2a352e; }
/* The gold (senyera) CTA pill that sits ON the sage field — the K1 hero button. */
.btn--gold {
  display: inline-block;
  text-decoration: none;
  background: #fcdd09;
  border-color: #fcdd09;
  color: #17211d;
  font-weight: 700;
  padding: 14px 32px;
  font-size: 15px;
  box-shadow: 0 12px 30px -14px rgba(20, 29, 25, 0.55);
}
.btn--gold:hover { background: #f2cf00; border-color: #f2cf00; color: #101815; }
.btn--lg { padding: 15px 36px; font-size: 16px; }

/* ---- Product-mockup placeholder frame (swap for a real screenshot) ---- */
.lp-hero__shot {
  position: relative;
  z-index: 2;
  margin-top: clamp(44px, 6vw, 64px);
  margin-bottom: clamp(-150px, -13vw, -90px);   /* pull it down so it straddles the colour edge */
}
.lp-shot {
  position: relative;
  margin: 0 auto;
  max-width: 940px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 34px 70px -34px rgba(24, 34, 32, 0.5), 0 3px 10px -5px rgba(24, 34, 32, 0.22);
}
.lp-shot__bar {
  display: flex;
  gap: 7px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(120, 130, 126, 0.06);
}
.lp-shot__bar span { width: 11px; height: 11px; border-radius: 50%; background: rgba(120, 130, 126, 0.32); }
.lp-shot__body {
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 20px;
  background:
    linear-gradient(180deg, rgba(78, 97, 87, 0.06), rgba(78, 97, 87, 0.02)),
    repeating-linear-gradient(45deg, rgba(120, 130, 126, 0.05) 0 13px, transparent 13px 26px);
}
.lp-shot--hero .lp-shot__body { aspect-ratio: 2 / 1; }
.lp-shot__label { font-size: 16px; font-weight: 600; color: var(--ink); }
.lp-shot__hint { font-size: 13px; color: var(--ink-soft); }
/* Real app screenshot filling a .lp-shot browser frame. */
.lp-shot__img { display: block; width: 100%; height: auto; }

/* Hero: two real screenshots, Alpaca-style — a compact main chart with the
   holdings card floating over its bottom-right corner. Kept short on purpose. */
.lp-hero__combo { position: relative; width: min(880px, 92vw); margin: 0 auto 44px; }
.lp-hero__combo .lp-shot { max-width: none; }
.lp-hero__combo .lp-shot--main { width: 74%; margin: 0; }
.lp-hero__combo .lp-shot--float {
  position: absolute;
  right: 0;
  bottom: -12%;
  width: 48%;
  margin: 0;
  z-index: 2;
  box-shadow: 0 44px 90px -30px rgba(24, 34, 32, 0.6), 0 6px 16px -6px rgba(24, 34, 32, 0.3);
}
@media (max-width: 620px) {
  .lp-hero__combo { margin-bottom: 24px; }
  .lp-hero__combo .lp-shot--main { width: 100%; }
  .lp-hero__combo .lp-shot--float {
    position: static; width: 78%; margin: -8% auto 0; right: auto; bottom: auto;
  }
}

/* Give the trust strip room to receive the overlapping hero mockup */
.trust--lp { margin: 0; padding-top: clamp(120px, 16vw, 176px); padding-bottom: 8px; }

/* ---- Alternating feature sections (getquin-style) ---- */
.lp-features {
  padding: clamp(66px, 9vw, 116px) 0 0;
  display: flex;
  flex-direction: column;
  gap: clamp(60px, 9vw, 108px);
}
.lp-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 78px);
  align-items: center;
}
.lp-feature--flip .lp-feature__text { order: 2; }
.lp-feature--flip .lp-feature__shot { order: 1; }
.lp-feature__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}
.lp-feature__ic { flex: none; width: 22px; height: 22px; }
.lp-feature__title {
  margin: 0 0 16px;
  font-size: clamp(25px, 3.3vw, 39px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.lp-feature__desc {
  margin: 0 0 26px;
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* ---- Stats band (dark pine, Alpaca-style contrast) ---- */
.lp-stats {
  margin-top: clamp(80px, 11vw, 128px);
  padding: clamp(48px, 7vw, 72px) 0;
  background: linear-gradient(180deg, #1c2723 0%, #141d1a 100%);
  color: #eef3f0;
}
.lp-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.lp-stat__n {
  display: block;
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #f7faf9;
}
.lp-stat__l {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: rgba(240, 245, 242, 0.66);
}

/* ---- Closing call ---- */
.lp-closing {
  text-align: center;
  padding: clamp(70px, 10vw, 108px) 0 clamp(38px, 6vw, 58px);
}
.lp-closing__title {
  margin: 0 0 14px;
  font-size: clamp(27px, 4vw, 43px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.lp-closing__sub {
  margin: 0 auto 28px;
  max-width: 520px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ---- Landing responsive ---- */
@media (max-width: 860px) {
  .lp-feature { grid-template-columns: 1fr; gap: 28px; }
  .lp-feature--flip .lp-feature__text,
  .lp-feature--flip .lp-feature__shot { order: 0; }   /* text always above its mockup */
  .lp-feature__desc { max-width: none; }
}
@media (max-width: 620px) {
  .lp-hero__title br { display: none; }                /* let it wrap naturally on phones */
  .lp-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 38px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-hero__inner { animation: none; }
}

/* ---------- Top navigation ---------- */
/* A clear, Apple-like bar pinned to the top: a near-solid strip of paper with a
   hairline divider and the faintest shadow, so it reads plainly as a bar. The
   enso (home) and the "Portfolio" link sit together on the left; the Log in /
   Sign up buttons sit on the right. It stays put as you scroll. */
/* Chameleon navbar (Alpaca-style): its colour follows the section behind it.
   --navbg / --navink / --navink-soft default to the theme-aware platinum strip
   (used on every inner page); nav.js overrides them per-section on pages that
   declare data-navbg (the landing hero). Text tone flips with --navink. */
.navbar {
  position: sticky;
  top: 0;
  z-index: 40;
  /* The bar IS the page: it wears the page's own background + sheen, anchored to
     the viewport (background-attachment: fixed) so the bar's slice of the gradient
     lines up pixel-for-pixel with the page directly below it — you can't tell where
     the bar ends and the page begins. The landing hero overrides this to a
     transparent continuation of its green (see .navbar--seamless). */
  background-color: var(--paper);
  background-image: var(--paper-grad);
  background-attachment: fixed;
  color: var(--navink);
  /* Match the landing's typeface (Plus Jakarta Sans) so the bar reads as part
     of the page; falls back to the system sans where that font isn't loaded. */
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  border-bottom: none;               /* no line under the bar, on any page */
  box-shadow: none;                  /* no shadow either — the bar is invisible */
  transition: background-color 0.45s ease, color 0.45s ease;
}
/* is-scrolled no longer changes the look (no line, no shadow); it only drives the
   landing bar's shrink-to-top (see .lp-page rules below). */
.navbar.is-scrolled {
  box-shadow: none;
}
/* Landing hero, at the very top: the bar is a fully transparent continuation of
   the hero — the gradient shows straight through, so there is no seam at all.
   nav.js clears this the moment you scroll, and the bar settles into colour. */
/* Over the green hero, the bar wears the hero's OWN gradient (the exact same
   viewport-anchored background), so it's a perfect, opaque continuation of the
   green — indistinguishable, at landing and at every scroll position. Same trick
   as the grey inner pages, just with the hero's green instead of the page paper.
   The green lives on a ::before LAYER so it can CROSS-FADE into the grey page
   surface as you scroll off the hero (background-image can't be transitioned, but
   a layer's opacity can) — that's what makes green→grey smooth, not abrupt. */
.navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;                 /* behind the links, above the bar's grey base */
  pointer-events: none;
  background-color: #4e6157;   /* solid fallback if fixed-attachment is unsupported */
  background-image:
    radial-gradient(125% 95% at 50% -6%, rgba(252, 221, 9, 0.18) 0%, rgba(252, 221, 9, 0) 50%),
    radial-gradient(150% 130% at 50% -14%, #6d8579 0%, #4e6157 47%, #384740 100%);
  background-attachment: fixed;
  opacity: 0;                  /* hidden over grey; faded in over the green */
  transition: opacity 0.6s ease;
}
.navbar.navbar--onband::before { opacity: 1; }

/* ── Landing page only (body.landing): the Alpaca move ──────────────────────
   The bar is a FIXED overlay that sits tall when you land (so the links read a
   little lower, centred over the hero) and shrinks up to the top as you scroll.
   Fixed (not sticky) means the height change never reflows the page — no jump.
   Scoped to .lp-page so every inner page keeps its normal sticky strip. */
.lp-page .navbar {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
}
.lp-page .navbar__inner { padding: 24px 26px; }              /* tall on landing */
.lp-page .navbar.is-scrolled .navbar__inner { padding: 10px 26px; }  /* compact once scrolled */
/* Three columns so the link cluster sits dead-centre (like Alpaca):
   brand left · links centre · account actions right. */
.navbar__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 15px 26px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  transition: padding 0.35s ease;   /* lets the landing bar shrink on scroll */
}

/* Left: brand (enso + wordmark). */
.navbar__brand {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
}
/* Centre: the link cluster with its hover dropdowns. */
.navbar__nav {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-item { position: relative; }
.navbar__enso {
  width: 31px;
  height: 31px;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.navbar__brand:hover .navbar__enso { opacity: 1; }
/* The wordmark beside the enso — quiet, light, the brand name in ink. */
.navbar__wordmark {
  margin-left: 9px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  color: inherit;
}

/* ---------- Brand wordmark ----------
   "Stock" in a light geometric sans + "Gaudi" in a bold Didone serif, and the
   dot of the i replaced by a senyera-yellow diamond. Fonts come from Google Fonts;
   if they can't load (e.g. the file:// tracker offline) they fall back to the
   system sans/serif and the wordmark still reads. Sizes are in em, so the same
   rule works in the small navbar and the larger hero. */
.wm-stock { font-family: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 300; }
.wm-gaudi {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 800;
  /* The Playfair serif has a smaller x-height than Poppins, so a touch larger
     makes the two words read at the same optical size (matches the mockup). */
  font-size: 1.06em;
}
/* The senyera-yellow hexagon that replaces the dot of the i. Anchored to the
   dotless "ı" (ı) itself and centred over its stem, sitting just on top of
   the letter. In em so it tracks the font-size in both the navbar and the hero. */
.wm-i {
  position: relative;
  display: inline-block;
}
.wm-i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -0.11em;
  width: 0.34em;
  height: 0.30em;
  background: #fcdd09;
  transform: translateX(-50%);
  /* a flat-top hexagon (Gaudí's Barcelona tile), matching the spire finial */
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.navbar__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;              /* Alpaca-style: medium weight, a touch larger */
  letter-spacing: 0.01em;
  color: var(--navink);          /* solid white on the hero / near-black on inner pages — no muddy tone */
  text-decoration: none;
  padding: 8px 15px;
  cursor: pointer;
  transition: color 0.5s ease;   /* fade white↔ink in step with the green↔grey bar */
}
.navbar__link:hover,
.nav-item:hover > .navbar__link,
.nav-item:focus-within > .navbar__link { color: var(--navink); }
/* The link for the page you're on (or whose dropdown you're on) sits firmer. */
.navbar__link[aria-current="page"],
.navbar__link.is-parent-active { color: var(--navink); }
/* Alpaca-style hover underline: a short bar slides in under the text. */
.navbar__link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 3px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.navbar__link:hover::after,
.nav-item:hover > .navbar__link::after,
.nav-item:focus-within > .navbar__link::after { transform: scaleX(1); opacity: 0.9; }

/* ---------- Hover dropdown panel (Alpaca-style, simple list of names) ----------
   Named .navbar__panel so it never collides with auth.js's account menu
   (.navbar__menu / .navbar__dropdown). Opens on hover or keyboard focus. */
.navbar__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 190px;
  padding: 7px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 48px -18px rgba(24, 34, 32, 0.35), 0 2px 8px rgba(24, 34, 32, 0.06);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 41;
}
.nav-item:hover > .navbar__panel,
.nav-item:focus-within > .navbar__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* An invisible bridge so the hover doesn't drop in the gap under the link. */
.navbar__panel::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}
.navbar__panel-link {
  display: block;
  padding: 9px 14px;
  border-radius: 9px;
  font-size: 14.5px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.navbar__panel-link:hover { background: var(--sel-tint); color: var(--accent); }
.navbar__panel-link[aria-current="page"] { color: var(--accent); }

/* Right: the two account buttons. Log in is a quiet outline; Register is gold. */
.navbar__actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Log in — a quiet ghost outline that adapts to the bar's current text tone. */
.navbar__btn {
  font: inherit;
  font-size: 15px;
  padding: 9px 19px;
  border-radius: 999px;
  border: 1px solid var(--line);
  border-color: color-mix(in srgb, var(--navink) 32%, transparent);
  background: transparent;
  color: var(--navink);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.navbar__btn:hover { border-color: var(--navink); }
/* Register — the senyera-gold pill (pops on both the sage hero and platinum). */
.navbar__btn--primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--gold-ink);
  font-weight: 500;
}
.navbar__btn--primary:hover {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  color: var(--gold-ink);
}
/* Tighten the bar on smaller screens (light-touch; full mobile menu is TODO). */
@media (max-width: 880px) {
  .navbar__inner { max-width: 100%; padding: 8px 14px; }
  .navbar__nav { gap: 0; }
  .navbar__link { padding: 8px 9px; font-size: 14px; }
  .navbar__btn { padding: 7px 12px; font-size: 13px; }
}
@media (max-width: 620px) {
  .navbar__wordmark { display: none; }
  .navbar__inner { grid-template-columns: auto 1fr auto; column-gap: 6px; }
  .navbar__nav { justify-self: center; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .navbar__link { white-space: nowrap; }
}

/* When signed in, the navbar shows a round avatar that opens an account menu. */
.navbar__menu { position: relative; }
.navbar__avatar {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--accent);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.navbar__avatar:hover,
.navbar__avatar[aria-expanded="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(78, 97, 87, 0.12);
}

/* The dropdown card — a calm white panel with a hairline and a soft shadow. */
.navbar__dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 224px;
  padding: 6px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
}
.navbar__dropdown[hidden] { display: none; }

.navbar__dropdown-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px 13px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.navbar__dropdown-avatar {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 16px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.navbar__dropdown-email {
  font-size: 13px;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.navbar__dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 9px;
  padding: 10px 12px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.navbar__dropdown-item:hover { background: var(--paper); }
.navbar__dropdown-item--danger:hover { color: var(--neg); }

/* The "Dark mode" row: label on the left, a small pill switch flush right. */
.navbar__dropdown-item--switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.navbar__switch {
  flex: none;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--line);
  transition: background 0.2s ease;
  position: relative;
}
.navbar__switch-dot {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}
.navbar__dropdown-item--switch[aria-checked="true"] .navbar__switch {
  background: var(--accent);
}
.navbar__dropdown-item--switch[aria-checked="true"] .navbar__switch-dot {
  transform: translateX(16px);
}