:root {
  /* Darkened from #d97706 -> #b45309 so white text on filled
     brand-amber surfaces (btn-warning, .btn-amber, membership CTA) clears
     WCAG AA 4.5:1 -- the old amber sat at ~3.2:1 against #fff. */
  --brand-amber: #b45309;
  --brand-amber-hover: #92400e;
  --brand-amber-rgb: 180, 83, 9;
  /* Foreground (text/icon) color used on filled brand-amber surfaces. */
  --brand-amber-fg: #ffffff;
  /* Disabled .btn-warning / .btn-amber palette. Inverted from the active
     scheme: a pale amber cream behind a deep-amber label. Earlier this was
     a desaturated tan (#b8a48a) with white text and opacity 0.75 on top,
     which crushed the effective ratio to ~1.9:1 against the page. The new
     pair clears WCAG AAA (7.54:1) at full opacity and still reads as
     clearly "off" next to the saturated active CTA. */
  --brand-amber-disabled-bg: #efe5d4;
  --brand-amber-disabled-fg: #6b3a06;
  --brand-heading-font: "Fraunces", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --brand-body-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Surfaces & borders. Use these for all panel/card backgrounds and hairline
     borders so the neutral "off-white" / "near-dark" tones stay consistent. */
  --color-bg-subtle: #f8fafc;
  --color-surface: rgba(255, 255, 255, 0.92);
  --color-surface-strong: rgba(255, 255, 255, 0.96);
  --color-surface-dark: rgba(23, 30, 41, 0.92);
  /* Soft blue-tinted highlight layered on top of light surfaces (e.g. the
     followit-card gradient). Not a base surface -- it's only legible when
     stacked over --color-surface-strong or similar. */
  --color-surface-highlight-soft: rgba(248, 251, 255, 0.94);
  --color-border-subtle: rgba(53, 65, 79, 0.08);
  --color-border-soft: rgba(53, 65, 79, 0.12);
  --color-border-dark: rgba(148, 177, 215, 0.22);
  /* Body text on light surfaces. --color-text-rgb mirrors the channels so
     borders and overlays that need a tinted-text-color alpha can stay in
     lockstep with the solid form. (The existing --color-border-subtle /
     --color-border-soft already use these same RGB triplets manually;
     future declarations should route through this token.) */
  --color-text: #35414f;
  --color-text-rgb: 53, 65, 79;
  --color-text-on-dark: #f8fafc;

  /* Nav-search pill tokens. The pill sits on the dark navbar, so its text
     and chrome are tinted-white at varying alpha. Two rungs (resting/hover)
     are tokenised so callers don't reach for raw rgba whites. */
  --nav-on-dark-text: rgba(255, 255, 255, 0.88);
  --nav-on-dark-border-hover: rgba(255, 255, 255, 0.35);

  /* Type scale. Static rungs for body / UI; fluid clamps reserved for
     display-sized headings only. Forum-specific aliases live in
     forum-theme.css and should converge onto this scale over time. */
  --font-size-xs: 0.8125rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.0625rem;
  --font-size-lg: 1.15rem;
  --font-size-xl: 1.3rem;
  --font-size-2xl: 1.45rem;
  --font-size-3xl: 1.75rem;
  --font-size-4xl: 2rem;
  --font-size-h3: clamp(1.25rem, 0.8vw + 1.05rem, 1.65rem);
  --font-size-h2: clamp(1.5rem, 1.5vw + 1.1rem, 2.1rem);
  --font-size-h1: clamp(1.85rem, 2.5vw + 1.25rem, 2.75rem);

  --leading-tight: 1.15;
  --leading-snug: 1.25;
  --leading-normal: 1.45;
  --leading-relaxed: 1.62;

  --tracking-tight: -0.005em;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;
  --tracking-widest: 0.14em;

  /* Spacing scale (the forum theme aliases through --forum-space-*).
     Bootstrap utilities still cover most layout, but components that need
     a single-source-of-truth ladder route through these. */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 2.5rem;

  /* Elevation. Use the semantic aliases (--shadow-card, --shadow-panel,
     --shadow-card-hover) for component styling; the numeric --shadow-sm..xl
     rungs back them and are available for one-off elevation needs.
     Values match the dominant existing card shadow so previously-empty
     references now render in keeping with the rest of the surface. */
  --shadow-sm: 0 1px 2px rgba(18, 48, 74, 0.04);
  --shadow-md: 0 0.75rem 1.5rem rgba(63, 64, 58, 0.07);
  --shadow-lg: 0 1rem 2rem rgba(63, 64, 58, 0.06);
  --shadow-xl: 0 1.25rem 2.5rem rgba(63, 64, 58, 0.12);
  --shadow-card: var(--shadow-lg);
  --shadow-card-hover: var(--shadow-xl);
  --shadow-panel: var(--shadow-lg);

  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 0.85rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --radius-3xl: 1.5rem;

  /* Button radii. Tighter than panel/card radii so buttons read as
     enterprise/editorial rather than consumer/casual. Override Bootstrap's
     --bs-btn-border-radius family. */
  --radius-btn: 0.5rem;
  --radius-btn-lg: 0.625rem;
  --radius-btn-sm: 0.375rem;

  /* Default stroke-width for inline SVG .icon elements. Keeps icon weight
     uniform regardless of whatever stroke-width an author inlined. */
  --icon-stroke-width: 1.5;

  /* Vertical rhythm. Use `.section` or `.section--lg` on top-level
     children of `<main>` for consistent block spacing instead of ad-hoc
     `mb-5` / padding utilities. Clamps scale with viewport. */
  --section-gap: clamp(2.5rem, 4vw, 4rem);
  --section-gap-lg: clamp(3.5rem, 6vw, 6rem);

  /* Brand the global focus-ring colour so keyboard focus reads as
     intentional/branded rather than the default Bootstrap blue halo. */
  --bs-focus-ring-color: rgba(var(--brand-amber-rgb), 0.45);
  --bs-focus-ring-width: 0.2rem;

  /* Z-index scale. Names describe the layer, not the file the rule lives in.
     Migrated from previously ad-hoc literals (1080, 1200, 2999, 3000, 4000,
     9000, 9100) so future additions land on a known rung. */
  --z-sticky: 1080;
  --z-overlay-page: 1200;
  --z-modal: 2999;
  --z-modal-backdrop: 3000;
  --z-loading: 4000;
  --z-floating: 9000;
  --z-banner: 9100;
}

h1, h2, h3, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6, .navbar-brand {
  font-family: var(--brand-heading-font);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

/* Fraunces optical-size axis: nudge to display weight on larger headings
   so the serif reads with the right contrast/stress for editorial use. */
h1, .display-1, .display-2, .display-3, .display-4, .display-5 {
  font-variation-settings: "opsz" 96;
}
h2, h3 {
  font-variation-settings: "opsz" 32;
}

/* Button hierarchy (site-wide rules).
   Each view picks ONE primary CTA. Apply these tiers consistently:
     1. Primary  → `.btn btn-warning` (or `.btn btn-amber`). The single most
        important action per view (Join, Continue, Submit, Get my number).
     2. Secondary → `.btn btn-outline-primary` on light surfaces,
        `.btn btn-outline-primary` inside `.hero-panel` (already restyled for
        dark backgrounds below), or `.btn btn-outline-secondary` for muted
        alternates that share the same row as a stronger primary.
     3. Tertiary / ghost → `.btn btn-ghost` for low-emphasis side actions
        ("Back", "Cancel", supplementary links rendered as buttons).
   Do not stack two filled brand buttons next to each other; if two CTAs sit
   in the same group, the non-primary one must be outline or ghost so the
   primary action is unambiguous. Pill/shape variants (e.g.
   `.membership-upgrade-cta`) must reuse the same brand-amber tokens as
   `.btn-warning` so the button family stays unified. */
.btn-warning,
.btn-amber {
  --bs-btn-color: var(--brand-amber-fg);
  --bs-btn-bg: var(--brand-amber);
  --bs-btn-border-color: var(--brand-amber);
  --bs-btn-hover-color: var(--brand-amber-fg);
  --bs-btn-hover-bg: var(--brand-amber-hover);
  --bs-btn-hover-border-color: var(--brand-amber-hover);
  --bs-btn-focus-shadow-rgb: var(--brand-amber-rgb);
  --bs-btn-active-color: var(--brand-amber-fg);
  --bs-btn-active-bg: var(--brand-amber-hover);
  --bs-btn-active-border-color: var(--brand-amber-hover);
  --bs-btn-disabled-color: var(--brand-amber-disabled-fg);
  --bs-btn-disabled-bg: var(--brand-amber-disabled-bg);
  --bs-btn-disabled-border-color: var(--brand-amber-disabled-bg);
  /* Full opacity intentionally -- contrast comes from the bg/fg pair, not
     a translucency multiplier that would crush the WCAG ratio. */
  --bs-btn-disabled-opacity: 1;
}

html {
  scroll-padding-top: 72px;
  scrollbar-gutter: stable;
}

body {
  font-family: var(--brand-body-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: var(--leading-normal);
  /* Reduce CLS when Inter swaps in over system-ui by matching the cap-height
     ratio of the fallback to the web font. Headings get their own value
     because Fraunces is taller per em than the serif fallback. */
  font-size-adjust: 0.52;
  /* Defensive horizontal-overflow guard. The known wide elements (hero
     panel, mega-menu) clip their own overflow, but a rogue inline-styled
     image or third-party widget can still poke out at 320px viewports and
     trigger a body-level horizontal scroll. `clip` is stronger than
     `hidden` -- it disallows programmatic scrolling too -- and degrades
     gracefully to `hidden` on older browsers. */
  overflow-x: hidden;
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-size-adjust: 0.47;
}

/* Long-form prose width cap. On 1440px+ displays, body copy inside legal,
   guide, methodology, and blog body containers stretches past 90ch and
   becomes hard to scan. Cap to ~70ch unless the container is intentionally
   wider (cards/grids opt out via direct selectors). The cap is inheritable
   via `max-inline-size` so block-level children stay inside the bounds. */
.legal-copy > p,
.legal-copy > ul,
.legal-copy > ol,
.legal-copy > dl,
.legal-copy > address,
.blog-post-body > p,
.blog-post-body > ul,
.blog-post-body > ol,
.blog-post-body > dl,
.blog-post-body > blockquote,
.prose > p,
.prose > ul,
.prose > ol,
.prose > dl,
.prose > blockquote,
article > p,
.guide-prose p,
.guide-prose ul,
.guide-prose ol {
  max-inline-size: 70ch;
}

.home-section__header {
  border-bottom: 1px solid var(--color-border-dark);
}

/* Vertical-rhythm utility. Apply `.section` to a top-level child of
   <main> to space it from its siblings using --section-gap. Use
   `.section--lg` between editorially "weighty" blocks (hero -> first
   content row, content end -> CTA, etc.). Backwards compatible: existing
   `mb-4` / `mb-5` usage is unaffected; this just gives new layouts a
   single knob to turn. */
.section {
  margin-block-end: var(--section-gap);
}
.section--lg {
  margin-block-end: var(--section-gap-lg);
}
.section:last-child,
.section--lg:last-child {
  margin-block-end: 0;
}

/* Unified inline SVG icon weight. Apply `.icon` to any inline SVG used as
   a UI icon; CSS forces a consistent stroke regardless of the value an
   author may have inlined on the element. */
.icon {
  stroke-width: var(--icon-stroke-width);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Branded focus-visible ring for non-Bootstrap interactive elements
   (plain anchors, summary, etc.). Bootstrap controls already pick up the
   amber tint via --bs-focus-ring-color above; this catches the rest so
   keyboard navigation reads consistently across the platform. */
a:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--brand-amber);
  outline-offset: 2px;
}

/* Button radii. Tightens Bootstrap's defaults a touch and keeps every
   button size on the same scale via --radius-btn tokens. */
.btn {
  --bs-btn-border-radius: var(--radius-btn);
  /* iOS Safari treats the first tap on hover-styled controls as a "hover"
     gesture and requires a second tap to activate. `manipulation` opts the
     element out of double-tap-to-zoom so taps register as direct clicks. */
  touch-action: manipulation;
}
.btn-lg {
  --bs-btn-border-radius: var(--radius-btn-lg);
}
.btn-sm {
  --bs-btn-border-radius: var(--radius-btn-sm);
}

/* iOS Safari "first tap = hover preview" complement to `touch-action:
   manipulation` above. `manipulation` only kills the 300ms double-tap-zoom
   delay; it does not stop Safari from swallowing the first tap on any
   element that has a `:hover` style different from its base state. On
   touch-only devices, neutralize the hover swap so Safari has nothing to
   preview and dispatches `click` on the first tap. Anchors styled as
   buttons (e.g. the "Open Word/Phrase Calculator" CTAs on the learning
   path) were the visible regression — the button painted its amber-hover
   shade on tap one and only navigated on tap two. */
@media (hover: none) {
  .btn:hover {
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
    box-shadow: var(--bs-btn-box-shadow);
  }
}

main > .container > nav[aria-label="Breadcrumb"] .breadcrumb {
  --bs-breadcrumb-divider-color: rgba(53, 65, 79, 0.55);
}
main > .container > nav[aria-label="Breadcrumb"] .breadcrumb-item.active {
  color: #1f2937;
  font-weight: 600;
}
main > .container > nav[aria-label="Breadcrumb"] .breadcrumb-item a {
  color: var(--bs-primary, #0d6efd);
  text-decoration: underline;
  text-decoration-color: rgba(13, 110, 253, 0.35);
  text-underline-offset: 0.15em;
}
main > .container > nav[aria-label="Breadcrumb"] .breadcrumb-item a:hover,
main > .container > nav[aria-label="Breadcrumb"] .breadcrumb-item a:focus-visible {
  color: var(--bs-link-hover-color, #0a58ca);
  text-decoration-color: currentColor;
}

:root[data-bs-theme="dark"] main > .container > nav[aria-label="Breadcrumb"] .breadcrumb {
  --bs-breadcrumb-divider-color: rgba(230, 235, 242, 0.55);
}
:root[data-bs-theme="dark"] main > .container > nav[aria-label="Breadcrumb"] .breadcrumb-item.active {
  color: #f1f5f9;
}
:root[data-bs-theme="dark"] main > .container > nav[aria-label="Breadcrumb"] .breadcrumb-item a {
  color: #8ab4ff;
  text-decoration-color: rgba(138, 180, 255, 0.5);
}
:root[data-bs-theme="dark"] main > .container > nav[aria-label="Breadcrumb"] .breadcrumb-item a:hover,
:root[data-bs-theme="dark"] main > .container > nav[aria-label="Breadcrumb"] .breadcrumb-item a:focus-visible {
  color: #b3ccff;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Warm charcoal navbar -- harmonizes with the amber brand without competing
   with the amber CTA buttons that sit in the nav. Overrides Bootstrap's
   .bg-dark (#212529) only on the navbar so other dark surfaces are unaffected. */
.navbar.bg-dark { background-color: #1f1b16 !important; }
:root[data-bs-theme="dark"] .navbar.bg-dark { background-color: #2a241d !important; }

.navbar-brand { letter-spacing: 0.04em; }

.navbar-nav {
  align-items: stretch;
}

.navbar-nav .nav-item {
  display: flex;
  align-items: stretch;
}

.navbar-nav .nav-link {
  display: flex;
  align-items: center;
  color: var(--nav-on-dark-text);
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus-visible,
.navbar-nav .nav-link.active,
.navbar-nav .nav-link[aria-current="page"] {
  color: #ffffff;
}

/* Orange accent: underline on desktop, left edge bar on mobile. The
   accent appears on hover and on the link representing the current page
   so users always have a clear "you are here" cue. */
@media (min-width: 992px) {
  .navbar-nav .nav-link:not(.nav-search-link):not(.dropdown-toggle):not(.nav-login-link) {
    position: relative;
  }

  /* Dropdown toggles get their caret from Bootstrap's own ::after, and the
     Log in link uses its own text-decoration underline on hover, so the
     amber underline below must skip both of those to avoid overlap. */
  .navbar-nav .nav-link:not(.nav-search-link):not(.dropdown-toggle):not(.nav-login-link)::after {
    content: "";
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.35rem;
    height: 2px;
    background: var(--brand-amber);
    border-radius: 2px;
    opacity: 0;
    transform: scaleX(0.6);
    transform-origin: center;
    transition: opacity 0.15s ease, transform 0.15s ease;
  }

  .navbar-nav .nav-link:not(.nav-search-link):not(.dropdown-toggle):not(.nav-login-link):hover::after,
  .navbar-nav .nav-link:not(.nav-search-link):not(.dropdown-toggle):not(.nav-login-link):focus-visible::after,
  .navbar-nav .nav-link:not(.nav-search-link):not(.dropdown-toggle):not(.nav-login-link).active::after,
  .navbar-nav .nav-link:not(.nav-search-link):not(.dropdown-toggle):not(.nav-login-link)[aria-current="page"]::after {
    opacity: 1;
    transform: scaleX(1);
  }
}

.navbar-nav .nav-item.nav-auth { display: none; }
html.auth-anon     .navbar-nav .nav-item.nav-auth--anon,
html.auth-free     .navbar-nav .nav-item.nav-auth--free,
html.auth-free     .navbar-nav .nav-item.nav-auth--member,
html.auth-premium  .navbar-nav .nav-item.nav-auth--premium,
html.auth-premium  .navbar-nav .nav-item.nav-auth--member,
html.auth-lifetime .navbar-nav .nav-item.nav-auth--premium,
html.auth-lifetime .navbar-nav .nav-item.nav-auth--member { display: flex; }

.auth-only { display: none; }
html.auth-anon     .auth-only.auth-only--anon,
html.auth-free     .auth-only.auth-only--free,
html.auth-free     .auth-only.auth-only--member,
html.auth-premium  .auth-only.auth-only--premium,
html.auth-premium  .auth-only.auth-only--member,
html.auth-lifetime .auth-only.auth-only--lifetime,
html.auth-lifetime .auth-only.auth-only--premium,
html.auth-lifetime .auth-only.auth-only--member { display: revert; }

/* member.html first-paint auth gating. The dashboard/auth sections used
   to be wrapped in a d-none container that JS removed after the server
   confirmed the session, producing a visible auth-state flash. Now the
   wrapper is visible from first paint and these rules use the auth-* tier
   class set synchronously by early-bootstrap.js to show the right
   section. member-1.js adds `.member-page-hydrated` to <html> once the
   server check has finished, after which classList toggles take over. */
html:not(.member-page-hydrated).auth-free #authSection,
html:not(.member-page-hydrated).auth-premium #authSection,
html:not(.member-page-hydrated).auth-lifetime #authSection {
  display: none;
}
html:not(.member-page-hydrated).auth-free #dashboardSection.d-none,
html:not(.member-page-hydrated).auth-premium #dashboardSection.d-none,
html:not(.member-page-hydrated).auth-lifetime #dashboardSection.d-none {
  display: block !important;
}

.navbar-nav .nav-item.nav-cta,
.navbar-nav .nav-item.nav-search { align-items: center; }
.navbar-nav .nav-cta .btn { white-space: nowrap; align-self: center; }
.navbar-nav .nav-search .nav-search-link { align-self: center; }

/* "Log in" plain text link. Sits beside the amber Join CTA so the join
   action stays visually dominant; returning users still scan to the top-
   right corner for sign-in regardless. */
.navbar-nav .nav-login-link {
  color: var(--nav-on-dark-text);
  text-decoration: none;
}
.navbar-nav .nav-login-link:hover,
.navbar-nav .nav-login-link:focus-visible {
  color: #ffffff;
  text-decoration: underline;
}

/* Mobile drawer: hide the desktop trailing "Log in" CTA so the mobile-only
   Log in row sitting under Learn carries the auth link. Selector matches
   the auth-anon enable chain's specificity so it wins without !important. */
@media (max-width: 991.98px) {
  html.auth-anon .navbar-nav .nav-item.nav-auth--anon.nav-cta--login { display: none; }
}

@media (min-width: 992px) {
  /* Search sits between the text dropdowns and the auth CTAs, so add a
     small gap on its left and on the first auth item to set the actions
     cluster apart from the navigation cluster. Log in comes before Join
     free so the amber CTA terminates the bar. */
  .navbar-nav .nav-item.nav-search { margin-left: 0.5rem; }
  .navbar-nav .nav-item.nav-cta--login { margin-left: 0.5rem; }

  /* Match the CTA button's box geometry to the Search pill so the two
     trailing actions share a shape. The yellow btn-warning fill is kept
     so the CTA still reads as the primary action. */
  .navbar-nav .nav-cta .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0.3rem 0.75rem;
    font-size: 0.85rem;
    line-height: 1;
    border-radius: 999px;
  }
}

.nav-search-link {
  font-size: 0.85rem;
  line-height: 1;
  color: var(--nav-on-dark-text);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  min-height: 36px;
  padding: 0.3rem 0.75rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  box-shadow: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.nav-search-link__label {
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.nav-search-link:hover,
.nav-search-link:focus-visible {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--nav-on-dark-border-hover);
}

/* Theme toggle in the navbar. The navbar stays dark in both themes
   (.navbar.bg-dark is forced above), so this pill matches the search
   pill styling. Sun/moon icons swap based on the current data-bs-theme. */
.nav-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--nav-on-dark-text);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.nav-theme-toggle:hover,
.nav-theme-toggle:focus-visible {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--nav-on-dark-border-hover);
  outline: none;
}

.nav-theme-toggle:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(var(--brand-amber-rgb), 0.45);
}

.nav-theme-toggle svg {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
}

.nav-theme-toggle__sun { display: none; }
.nav-theme-toggle__moon { display: block; }
:root[data-bs-theme="dark"] .nav-theme-toggle__sun { display: block; }
:root[data-bs-theme="dark"] .nav-theme-toggle__moon { display: none; }

/* Visual breathing room between the KnowBot search pill and the theme
   toggle. The navbar-nav column-gap is tight; nudge the toggle out. */
.nav-theme-toggle--desktop { margin-left: 0.5rem; }

.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: var(--z-sticky);
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-sm);
  background: #111;
  color: #fff;
  text-decoration: none;
  transform: translateY(-140%);
  transition: transform 0.2s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid var(--brand-amber);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(var(--brand-amber-rgb), 0.35);
}

/* Tertiary ("ghost") button — see button-hierarchy comment near `.btn-warning`.
   No border, brand-tinted text, subtle hover surface. Use for low-emphasis
   side actions that share space with a stronger primary/outline CTA. */
.btn-ghost {
  --bs-btn-color: var(--bs-link-color, #0d6efd);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--bs-link-hover-color, #0a58ca);
  --bs-btn-hover-bg: rgba(13, 110, 253, 0.08);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: var(--bs-link-hover-color, #0a58ca);
  --bs-btn-active-bg: rgba(13, 110, 253, 0.12);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: rgba(53, 65, 79, 0.5);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: transparent;
  font-weight: 600;
}

.hero-panel .btn-ghost {
  --bs-btn-color: #ffffff;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.12);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: rgba(255, 255, 255, 0.18);
  --bs-btn-focus-shadow-rgb: 255, 255, 255;
}

:root[data-bs-theme="dark"] .btn-ghost {
  --bs-btn-color: #9ec5fe;
  --bs-btn-hover-color: #cfe2ff;
  --bs-btn-hover-bg: rgba(158, 197, 254, 0.12);
  --bs-btn-active-color: #cfe2ff;
  --bs-btn-active-bg: rgba(158, 197, 254, 0.18);
}

/* Bootstrap's .btn-outline-dark uses near-black text and border, which
   disappear against dark surfaces (e.g. the member dashboard's Message
   Center / Manage subscription / Admin buttons). Invert to a light
   outline in dark mode so they read like the sibling outline buttons. */
:root[data-bs-theme="dark"] .btn-outline-dark {
  --bs-btn-color: var(--color-text-on-dark);
  --bs-btn-border-color: rgba(248, 250, 252, 0.45);
  --bs-btn-hover-color: #0f172a;
  --bs-btn-hover-bg: var(--color-text-on-dark);
  --bs-btn-hover-border-color: var(--color-text-on-dark);
  --bs-btn-active-color: #0f172a;
  --bs-btn-active-bg: var(--color-text-on-dark);
  --bs-btn-active-border-color: var(--color-text-on-dark);
  --bs-btn-disabled-color: rgba(248, 250, 252, 0.55);
  --bs-btn-disabled-border-color: rgba(248, 250, 252, 0.25);
}

/* Bootstrap's .btn-outline-secondary uses #6c757d for text and border, which
   barely registers against the dark admin / forum / member surfaces (e.g.
   Mark reviewed, Cancel, Set pending, the markdown editor toolbar). Lift the
   tokens to a light grey so they read clearly without competing with primary
   action buttons. */
:root[data-bs-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: #cbd5e1;
  --bs-btn-border-color: rgba(203, 213, 225, 0.55);
  --bs-btn-hover-color: #0f172a;
  --bs-btn-hover-bg: #cbd5e1;
  --bs-btn-hover-border-color: #cbd5e1;
  --bs-btn-active-color: #0f172a;
  --bs-btn-active-bg: #cbd5e1;
  --bs-btn-active-border-color: #cbd5e1;
  --bs-btn-disabled-color: rgba(203, 213, 225, 0.55);
  --bs-btn-disabled-border-color: rgba(203, 213, 225, 0.25);
}

/* .btn-outline-primary / -success render as dark blue/green text on dark
   surfaces, which clears WCAG AA only barely. Use the matching Bootstrap
   "text-emphasis" tokens (the same ones .text-primary swaps to in dark
   mode) so the outline buttons stay on-brand but readable. */
:root[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: #6ea8fe;
  --bs-btn-border-color: rgba(110, 168, 254, 0.65);
  --bs-btn-hover-color: #0f172a;
  --bs-btn-hover-bg: #6ea8fe;
  --bs-btn-hover-border-color: #6ea8fe;
  --bs-btn-active-color: #0f172a;
  --bs-btn-active-bg: #6ea8fe;
  --bs-btn-active-border-color: #6ea8fe;
  --bs-btn-disabled-color: rgba(110, 168, 254, 0.55);
  --bs-btn-disabled-border-color: rgba(110, 168, 254, 0.25);
}

:root[data-bs-theme="dark"] .btn-outline-success {
  --bs-btn-color: #75b798;
  --bs-btn-border-color: rgba(117, 183, 152, 0.65);
  --bs-btn-hover-color: #0f172a;
  --bs-btn-hover-bg: #75b798;
  --bs-btn-hover-border-color: #75b798;
  --bs-btn-active-color: #0f172a;
  --bs-btn-active-bg: #75b798;
  --bs-btn-active-border-color: #75b798;
  --bs-btn-disabled-color: rgba(117, 183, 152, 0.55);
  --bs-btn-disabled-border-color: rgba(117, 183, 152, 0.25);
}

:root[data-bs-theme="dark"] .btn-outline-danger {
  --bs-btn-color: #ea868f;
  --bs-btn-border-color: rgba(234, 134, 143, 0.65);
  --bs-btn-hover-color: #0f172a;
  --bs-btn-hover-bg: #ea868f;
  --bs-btn-hover-border-color: #ea868f;
  --bs-btn-active-color: #0f172a;
  --bs-btn-active-bg: #ea868f;
  --bs-btn-active-border-color: #ea868f;
  --bs-btn-disabled-color: rgba(234, 134, 143, 0.55);
  --bs-btn-disabled-border-color: rgba(234, 134, 143, 0.25);
}

.btn[aria-disabled="true"],
.btn:disabled,
.btn.disabled,
button[aria-disabled="true"],
button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.35);
}

/* aria-disabled doesn't block pointer events the way :disabled does, so the
   Bootstrap .btn:hover rule still fires and swaps in --bs-btn-hover-bg /
   --bs-btn-hover-color. Pin those tokens to the disabled equivalents so the
   background doesn't drift toward the active hover color on aria-disabled
   buttons. */
.btn[aria-disabled="true"] {
  --bs-btn-hover-color: var(--bs-btn-disabled-color);
  --bs-btn-hover-bg: var(--bs-btn-disabled-bg);
  --bs-btn-hover-border-color: var(--bs-btn-disabled-border-color);
}

/* Hover on an aria-disabled control must NOT look like it's becoming
   interactive. Keep the resting opacity/grayscale (no lightening) and add a
   faint inset ring so the user still gets confirmation that the cursor is
   over the control -- in a "blocked" register, not an "active" one. */
.btn[aria-disabled="true"]:not(:disabled):hover,
.btn[aria-disabled="true"]:not(:disabled):focus-visible,
button[aria-disabled="true"]:not(:disabled):hover,
button[aria-disabled="true"]:not(:disabled):focus-visible {
  opacity: 0.55;
  filter: grayscale(0.35);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

:root[data-bs-theme="dark"] .btn[aria-disabled="true"]:not(:disabled):hover,
:root[data-bs-theme="dark"] .btn[aria-disabled="true"]:not(:disabled):focus-visible,
:root[data-bs-theme="dark"] button[aria-disabled="true"]:not(:disabled):hover,
:root[data-bs-theme="dark"] button[aria-disabled="true"]:not(:disabled):focus-visible {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

@media (max-width: 575.98px) {
  .table-stack-sm thead {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  .table-stack-sm tbody,
  .table-stack-sm tr,
  .table-stack-sm td {
    display: block;
    width: 100%;
  }

  .table-stack-sm tr {
    border: 1px solid var(--color-border-soft);
    border-radius: 0.6rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    background: rgba(255, 255, 255, 0.65);
  }

  .table-stack-sm.table-striped tr:nth-of-type(odd) {
    background: rgba(248, 250, 252, 0.85);
  }

  .table-stack-sm td {
    border: 0;
    padding: 0.35rem 0;
    text-align: left;
  }

  .table-stack-sm td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(55, 65, 81, 0.75);
    font-weight: 600;
    margin-bottom: 0.15rem;
  }
}

.form-label {
  font-weight: 600;
}

.footer-home-link {
  color: inherit;
  font-weight: 600;
}

.footer-home-link:hover,
.footer-home-link:focus-visible {
  color: var(--brand-amber);
}

.recovery-alert-icon {
  display: inline-flex;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.share-action-button {
  box-shadow: 0 0.35rem 0.9rem rgba(255, 124, 53, 0.28);
  border-width: 2px;
}

.share-action-button:hover,
.share-action-button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 0.55rem 1.1rem rgba(255, 124, 53, 0.35);
}


.hero-panel,
.content-panel,
.stat-card,
.feature-card,
.faq-card {
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-panel);
}

.hero-panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #0d1a30 0%, #1d3358 100%);
  color: #fff;
  border-radius: var(--radius-2xl);
}

.hero-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 90% -10%, rgba(217, 119, 6, 0.32), transparent 55%);
  pointer-events: none;
}

.hero-panel > * {
  position: relative;
  z-index: 1;
}

/* Bootstrap 5.3 sets headings to var(--bs-heading-color, inherit). When the
   variable resolves to a concrete color, it lands on the heading directly
   and beats the .hero-panel { color: #fff } parent rule via inheritance,
   leaving hero titles rendered dark. Force white explicitly. */
.hero-panel h1,
.hero-panel h2,
.hero-panel h3,
.hero-panel h4,
.hero-panel h5,
.hero-panel h6,
.hero-panel .display-1,
.hero-panel .display-2,
.hero-panel .display-3,
.hero-panel .display-4,
.hero-panel .display-5,
.hero-panel .display-6 {
  color: #fff;
}

/* Bootstrap's .text-muted resolves to a dark gray that disappears against
   the hero's dark navy gradient. The dark-theme override at the bottom of
   this file only kicks in when the document is in dark mode, so light-mode
   visitors lose the byline metadata and any muted helper copy in the hero.
   Lighten muted text (and the address byline, which isn't .text-muted) so
   it stays legible on the gradient. */
.hero-panel .text-muted,
.hero-panel address {
  color: rgba(230, 235, 242, 0.78) !important;
}

.hero-panel .btn-outline-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-border-color: rgba(255, 255, 255, 0.85);
  --bs-btn-hover-color: #103a60;
  --bs-btn-hover-bg: #ffffff;
  --bs-btn-hover-border-color: #ffffff;
  --bs-btn-focus-shadow-rgb: 255, 255, 255;
  --bs-btn-active-color: #103a60;
  --bs-btn-active-bg: #eef6ff;
  --bs-btn-active-border-color: #ffffff;
  background-color: rgba(16, 58, 96, 0.2);
  backdrop-filter: blur(1px);
}

.content-panel,
.feature-card,
.faq-card,
.stat-card { background: var(--color-surface); border-radius: var(--radius-xl); }

:root[data-bs-theme="dark"] .content-panel,
:root[data-bs-theme="dark"] .feature-card,
:root[data-bs-theme="dark"] .faq-card,
:root[data-bs-theme="dark"] .stat-card {
  background: var(--color-surface-dark);
  border-color: var(--color-border-dark);
  box-shadow: 0 0.5rem 1.25rem rgba(5, 9, 14, 0.25);
}

:root[data-bs-theme="dark"] .text-muted {
  color: rgba(230, 235, 242, 0.72) !important;
}

/* These sit on .content-panel, which goes dark in dark mode while the link text
   stays on the #0f172a fallback -- restore contrast. */
:root[data-bs-theme="dark"] .blog-series-promo__step-link,
:root[data-bs-theme="dark"] .blog-post-toc__link,
:root[data-bs-theme="dark"] .blog-related__title {
  color: #f1f5f9;
}

:root[data-bs-theme="dark"] .blog-related__summary {
  color: rgba(230, 235, 242, 0.72);
}

:root[data-bs-theme="dark"] .admin-item-card,
:root[data-bs-theme="dark"] .border,
:root[data-bs-theme="dark"] .rounded-3 {
  border-color: var(--color-border-dark) !important;
}

:root[data-bs-theme="dark"] .admin-item-card {
  background: rgba(17, 24, 34, 0.94);
  box-shadow: 0 1rem 2rem rgba(3, 7, 12, 0.45);
}

:root[data-bs-theme="dark"] #resultFeedbackPanel.bg-light {
  background-color: var(--color-surface-dark) !important;
  border-color: var(--color-border-dark) !important;
  color: #f1f5f9;
}

:root[data-bs-theme="dark"] #resultFeedbackPanel .text-muted {
  color: rgba(230, 235, 242, 0.78) !important;
}

:root[data-bs-theme="dark"] #resultFeedbackPanel .form-label {
  color: #f1f5f9;
}

.badge-contrast-success {
  background-color: #5a8f13 !important;
  color: #fff !important;
}

.badge-contrast-secondary {
  background-color: #6b665f !important;
  color: #fff !important;
}

.badge-contrast-danger {
  background-color: #b02a37 !important;
  color: #fff !important;
}

.hero-media-panel {
  min-height: 100%;
  padding: 0;
}


.hero-panel--compact {
  padding-top: clamp(1rem, 1.2vw + 0.75rem, 1.75rem) !important;
  padding-bottom: clamp(1rem, 1.2vw + 0.75rem, 1.75rem) !important;
}

.hero-selling-points-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 100%;
  padding: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-xl);
}

.hero-selling-points-image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: clamp(220px, 40vw, 320px);
  max-height: none;
  object-fit: cover;
  object-position: center;
}

@media (min-width: 992px) {
  .hero-selling-points-image {
    min-height: 280px;
  }

  .hero-why-gematria-link {
    min-height: 280px;
  }
}

.hero-why-gematria-link {
  position: relative;
  isolation: isolate;
  min-height: clamp(220px, 40vw, 320px);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-why-gematria-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3, 16, 40, 0.4) 0%, rgba(3, 16, 40, 0.92) 100%),
    radial-gradient(circle at 50% 22%, rgba(4, 14, 34, 0.16), rgba(4, 14, 34, 0.75));
  z-index: 1;
  transition: opacity 0.2s ease;
}

.hero-why-gematria-link:hover,
.hero-why-gematria-link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 0.75rem 2rem rgba(15, 23, 42, 0.5);
}

.hero-why-gematria-link:hover::after,
.hero-why-gematria-link:focus-visible::after {
  opacity: 0.88;
}

@media (prefers-reduced-motion: reduce) {
  .hero-why-gematria-link {
    transition: none;
  }
  .hero-why-gematria-link:hover,
  .hero-why-gematria-link:focus-visible {
    transform: none;
  }
}

.hero-why-gematria-overlay {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  display: grid;
  gap: 0.5rem;
  padding: clamp(0.85rem, 1.1vw + 0.55rem, 1.2rem);
  background: linear-gradient(180deg, rgba(3, 16, 40, 0.06), rgba(3, 16, 40, 0.72));
  backdrop-filter: blur(1px);
  color: rgba(245, 250, 255, 0.95);
}

.hero-why-gematria-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: var(--leading-tight);
}

.hero-why-gematria-excerpt {
  font-size: 0.9rem;
  line-height: 1.45;
  max-width: 52ch;
  color: rgba(235, 245, 255, 0.9);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.word-of-day-spotlight {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: var(--radius-2xl);
  background: linear-gradient(160deg, #14253f 0%, #0b1424 100%);
  color: var(--color-text-on-dark);
  box-shadow: var(--shadow-card);
}

/* Bootstrap 5.3 resolves --bs-heading-color to a concrete dark colour,
   which beats parent `color` via inheritance and leaves headings inside
   the dark WOTD panel rendering almost invisible. Force white the same
   way we do for .hero-panel. */
.word-of-day-spotlight h1,
.word-of-day-spotlight h2,
.word-of-day-spotlight h3,
.word-of-day-spotlight .display-1,
.word-of-day-spotlight .display-2,
.word-of-day-spotlight .display-3,
.word-of-day-spotlight .display-4,
.word-of-day-spotlight .display-5,
.word-of-day-spotlight .display-6 {
  color: #fff;
}

/* Two-up stat grid: Total | Digital root. Hairline divider between rather
   than a card surface so the data sits on the panel directly. */
.wotd-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 1.25rem 0;
  border-block: 1px solid rgba(148, 163, 184, 0.22);
}

.wotd-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.wotd-stat + .wotd-stat {
  border-inline-start: 1px solid rgba(148, 163, 184, 0.18);
  padding-inline-start: 1.25rem;
}

.wotd-stat__label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.68);
  margin: 0;
}

.wotd-stat__value {
  font-family: var(--brand-heading-font);
  font-variation-settings: "opsz" 96;
  font-size: clamp(2rem, 4vw + 1rem, 3rem);
  font-weight: 600;
  line-height: 1;
  color: #fff;
  margin: 0;
}

.wotd-breakdown__label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.68);
}

.wotd-breakdown__values {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--font-size-md);
  color: #93c5fd;
  word-spacing: 0.15em;
}

.wotd-link {
  color: rgba(226, 232, 240, 0.85);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--font-size-md);
  transition: color 0.15s ease;
}

.wotd-link:hover,
.wotd-link:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

@media (max-height: 480px) and (orientation: landscape) {
  .hero-selling-points-image {
    min-height: 170px;
  }

  .hero-why-gematria-link {
    min-height: 170px;
  }

  .hero-why-gematria-excerpt {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .forum-thread-card {
    padding: var(--forum-space-2);
  }

  .forum-thread-card .d-flex {
    flex-wrap: wrap;
  }

  .forum-thread-score {
    margin-left: auto;
  }

  .hero-selling-points-image {
    min-height: 200px;
  }

  .hero-why-gematria-overlay {
    gap: 0.4rem;
    padding: 0.8rem 0.9rem;
  }

  .hero-why-gematria-title {
    font-size: 1.03rem;
  }

  .hero-why-gematria-excerpt {
    font-size: 0.84rem;
    line-height: 1.35;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
}

.faq-hero-image {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  object-position: center;
}

.faq-hero-search__input-wrap {
  position: relative;
}

.faq-hero-search__icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  width: 1.15rem;
  height: 1.15rem;
  transform: translateY(-50%);
  color: rgba(15, 23, 42, 0.55);
  pointer-events: none;
}

.faq-hero-search__input.form-control {
  padding-left: 2.5rem;
  border-radius: var(--radius-xl, 0.85rem);
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 0.5rem 1.5rem rgba(7, 16, 32, 0.25);
}

.faq-hero-search__input.form-control:focus {
  background: #fff;
  border-color: rgba(255, 224, 102, 0.85);
  box-shadow: 0 0 0 0.25rem rgba(255, 224, 102, 0.35);
}

.faq-hero-search__input.form-control:disabled {
  background: rgba(255, 255, 255, 0.75);
  cursor: progress;
}

.faq-hero-search__status {
  color: rgba(255, 255, 255, 0.78);
}

.faq-trust-strip .section-kicker {
  display: inline-block;
}

.faq-toc {
  position: sticky;
  top: 5.25rem;
}

.faq-toc__list {
  border-left: 2px solid var(--color-border-subtle, rgba(15, 23, 42, 0.12));
  padding-left: 0.25rem;
}

.faq-toc__item + .faq-toc__item {
  margin-top: 0.15rem;
}

.faq-toc__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.65rem;
  border-radius: var(--radius-md, 0.5rem);
  color: var(--bs-body-color, inherit);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.3;
  transition: background-color 120ms ease, color 120ms ease;
}

.faq-toc__link:hover,
.faq-toc__link:focus-visible {
  background: rgba(15, 23, 42, 0.06);
  color: var(--bs-body-color, inherit);
  text-decoration: none;
}

.faq-toc__link.is-active {
  background: rgba(217, 119, 6, 0.12);
  color: var(--bs-body-color, inherit);
  font-weight: 600;
}

.faq-toc__count {
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  color: var(--bs-secondary-color, #6b7280);
  background: rgba(15, 23, 42, 0.06);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
}

.faq-toc__link.is-active .faq-toc__count {
  background: rgba(217, 119, 6, 0.2);
}

.faq-category-heading {
  scroll-margin-top: 5.5rem;
}

.faq-category-count {
  font-weight: 400;
  margin-left: 0.25rem;
}

.faq-share__link {
  font-weight: 500;
}

:root[data-bs-theme="dark"] .faq-toc__link:hover,
:root[data-bs-theme="dark"] .faq-toc__link:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}

:root[data-bs-theme="dark"] .faq-toc__count {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(230, 235, 242, 0.78);
}

:root[data-bs-theme="dark"] .faq-toc__link.is-active {
  background: rgba(255, 196, 87, 0.18);
}

@media (max-width: 991.98px) {
  .faq-toc {
    position: static;
  }
  .faq-toc__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    border-left: 0;
    padding-left: 0;
  }
  .faq-toc__item + .faq-toc__item {
    margin-top: 0;
  }
  .faq-toc__link {
    background: rgba(15, 23, 42, 0.06);
  }
}

.hero-media-placeholder {
  display: grid;
  align-content: end;
  gap: 0.25rem;
  width: 100%;
  height: 100%;
  min-height: 280px;
  padding: 1.5rem;
  background:
    radial-gradient(circle at top right, rgba(255, 224, 102, 0.7), transparent 32%),
    linear-gradient(160deg, rgba(255,255,255,0.98), rgba(214, 234, 248, 0.92) 55%, rgba(191, 219, 254, 0.95));
  border-radius: var(--radius-xl);
}


.calculator-hero-figure {
  width: 100%;
  aspect-ratio: 4 / 3;
}

.hero-image-frame {
  background: rgba(7, 28, 69, 0.4);
}

.blog-hero-image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  object-position: center;
}


@media (min-width: 992px) {
  .blog-hero-figure {
    aspect-ratio: 21 / 9;
    min-height: 0;
  }

  .blog-hero-image {
    min-height: 0;
  }
}


.calculator-hero-image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  object-position: center;
}


.membership-comparison-wrap {
  border: 1px solid rgba(53, 95, 140, 0.16);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 2px rgba(18, 48, 74, 0.04);
}

.membership-comparison-table thead th {
  background: linear-gradient(180deg, rgba(53, 95, 140, 0.16), rgba(53, 95, 140, 0.06));
  color: #12304a;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom-width: 0;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.membership-comparison-table thead th.comparison-col--premium {
  background: linear-gradient(180deg, rgba(212, 160, 23, 0.22), rgba(212, 160, 23, 0.08));
  color: #5a3d00;
  font-size: 0.86rem;
  font-weight: 700;
}

.membership-comparison-table tbody th {
  min-width: 270px;
  color: #12304a;
  font-weight: 600;
}

.membership-comparison-table td,
.membership-comparison-table th {
  padding: 0.9rem 0.85rem;
  border-color: rgba(53, 95, 140, 0.08);
}

.membership-comparison-table tbody tr:nth-child(odd) > * {
  background-color: rgba(53, 95, 140, 0.025);
}

.membership-comparison-table .comparison-col--premium {
  background-color: rgba(212, 160, 23, 0.06);
}

.membership-comparison-table tbody tr:nth-child(odd) .comparison-col--premium {
  background-color: rgba(212, 160, 23, 0.09);
}

.membership-comparison-table tbody tr:last-child > * {
  border-bottom-width: 0;
}

.comparison-current-badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(53, 95, 140, 0.5);
  color: #355f8c;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}

.comparison-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.2;
}

.comparison-pill--included {
  background: rgba(25, 135, 84, 0.14);
  color: #115738;
}

.comparison-pill--highlight {
  background: linear-gradient(135deg, rgba(212, 160, 23, 0.28), rgba(212, 160, 23, 0.18));
  color: #5a3d00;
  border: 1px solid rgba(212, 160, 23, 0.6);
  box-shadow: 0 1px 2px rgba(212, 160, 23, 0.18);
}

.comparison-pill--limited {
  background: rgba(255, 193, 7, 0.18);
  color: #6c5200;
  border: 1px solid rgba(255, 193, 7, 0.45);
}

.comparison-pill--muted {
  background: rgba(108, 117, 125, 0.12);
  color: #6c757d;
}

.comparison-pill--unavailable {
  display: inline-block;
  padding: 0.35rem 0.5rem;
  color: #adb5bd;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
}

.comparison-pill--neutral {
  background: rgba(13, 110, 253, 0.1);
  color: #0b4ca4;
}

.comparison-pill--premium {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  background: linear-gradient(135deg, rgba(53, 95, 140, 0.18), rgba(212, 160, 23, 0.32));
  color: #12304a;
  padding: 0.4rem 0.75rem;
  white-space: normal;
  text-align: center;
}

.comparison-pill--premium small {
  font-size: 0.7rem;
  font-weight: 600;
  opacity: 0.75;
}

:root[data-bs-theme="dark"] .membership-comparison-wrap {
  background: rgba(17, 24, 34, 0.6);
  border-color: var(--color-border-dark);
}

:root[data-bs-theme="dark"] .membership-comparison-table thead th {
  background: linear-gradient(180deg, rgba(148, 177, 215, 0.22), rgba(148, 177, 215, 0.08));
  color: #e6ebf2;
}

:root[data-bs-theme="dark"] .membership-comparison-table thead th.comparison-col--premium {
  background: linear-gradient(180deg, rgba(212, 160, 23, 0.32), rgba(212, 160, 23, 0.14));
  color: #f5d97a;
}

:root[data-bs-theme="dark"] .membership-comparison-table tbody th {
  color: #f1f5f9;
}

:root[data-bs-theme="dark"] .membership-comparison-table td,
:root[data-bs-theme="dark"] .membership-comparison-table th {
  border-color: rgba(148, 177, 215, 0.14);
}

:root[data-bs-theme="dark"] .membership-comparison-table tbody tr:nth-child(odd) > * {
  background-color: rgba(148, 177, 215, 0.05);
}

:root[data-bs-theme="dark"] .membership-comparison-table .comparison-col--premium {
  background-color: rgba(212, 160, 23, 0.08);
}

:root[data-bs-theme="dark"] .membership-comparison-table tbody tr:nth-child(odd) .comparison-col--premium {
  background-color: rgba(212, 160, 23, 0.12);
}

:root[data-bs-theme="dark"] .comparison-current-badge {
  border-color: rgba(148, 177, 215, 0.55);
  color: #b6cfee;
}

:root[data-bs-theme="dark"] .comparison-pill--included {
  background: rgba(45, 196, 130, 0.22);
  color: #8af0bc;
}

:root[data-bs-theme="dark"] .comparison-pill--highlight {
  background: linear-gradient(135deg, rgba(212, 160, 23, 0.4), rgba(212, 160, 23, 0.22));
  color: #fce19a;
  border-color: rgba(212, 160, 23, 0.7);
}

:root[data-bs-theme="dark"] .comparison-pill--limited {
  background: rgba(255, 193, 7, 0.22);
  color: #ffdf80;
  border-color: rgba(255, 193, 7, 0.5);
}

:root[data-bs-theme="dark"] .comparison-pill--muted {
  background: rgba(148, 177, 215, 0.14);
  color: rgba(230, 235, 242, 0.78);
}

:root[data-bs-theme="dark"] .comparison-pill--unavailable {
  color: rgba(230, 235, 242, 0.55);
}

:root[data-bs-theme="dark"] .comparison-pill--neutral {
  background: rgba(99, 162, 255, 0.18);
  color: #9ec5ff;
}

:root[data-bs-theme="dark"] .comparison-pill--premium {
  background: linear-gradient(135deg, rgba(99, 162, 255, 0.28), rgba(212, 160, 23, 0.42));
  color: #fce19a;
}

@media (max-width: 991.98px) {
  .membership-comparison-wrap {
    border: none;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .membership-comparison-table {
    border-collapse: separate;
    border-spacing: 0;
  }

  .membership-comparison-table thead {
    display: none;
  }

  .membership-comparison-table,
  .membership-comparison-table tbody,
  .membership-comparison-table tbody tr,
  .membership-comparison-table tbody td,
  .membership-comparison-table tbody th {
    display: block;
    width: 100%;
  }

  .membership-comparison-table tbody tr {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(53, 95, 140, 0.16);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(18, 48, 74, 0.04);
    margin-bottom: 0.85rem;
    padding: 0.4rem 0.85rem 0.6rem;
  }

  .membership-comparison-table tbody tr:nth-child(odd) > *,
  .membership-comparison-table tbody tr:nth-child(odd) .comparison-col--premium,
  .membership-comparison-table .comparison-col--premium {
    background-color: transparent;
  }

  .membership-comparison-table tbody th {
    min-width: 0;
    padding: 0.65rem 0 0.55rem;
    font-size: 0.95rem;
    line-height: 1.3;
    border-bottom: 1px solid rgba(53, 95, 140, 0.12);
    margin-bottom: 0.4rem;
  }

  .membership-comparison-table tbody td {
    padding: 0.4rem 0;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.85rem;
    text-align: right;
  }

  .membership-comparison-table tbody td::before {
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #355f8c;
    text-align: left;
  }

  .membership-comparison-table tbody td.comparison-col--visitor::before {
    content: "Visitor";
  }

  .membership-comparison-table tbody td.comparison-col--member::before {
    content: "Member";
  }

  .membership-comparison-table tbody td.comparison-col--premium::before {
    content: "Premium";
    color: #5a3d00;
  }

  .comparison-pill {
    font-size: 0.78rem;
    white-space: normal;
    text-align: center;
  }

  .comparison-pill--premium {
    padding: 0.35rem 0.65rem;
  }

  :root[data-bs-theme="dark"] .membership-comparison-table tbody tr {
    background: rgba(17, 24, 34, 0.7);
    border-color: var(--color-border-dark);
  }

  :root[data-bs-theme="dark"] .membership-comparison-table tbody th {
    border-bottom-color: rgba(148, 177, 215, 0.18);
  }

  :root[data-bs-theme="dark"] .membership-comparison-table tbody td::before {
    color: #b6cfee;
  }

  :root[data-bs-theme="dark"] .membership-comparison-table tbody td.comparison-col--premium::before {
    color: #f5d97a;
  }
}

.hero-media-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(53, 95, 140, 0.9);
}

.section-kicker {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 700;
  /* Brighter amber than --bs-warning so the kicker reads as a vivid
     eyebrow against dark hero / WOTD panel backgrounds. */
  color: #fbbf24;
}

.metric-value {
  font-size: var(--font-size-4xl);
  font-weight: 700;
}

.word-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: rgba(var(--bs-primary-rgb), 0.08);
  color: var(--bs-primary);
  font-weight: 600;
  margin: 0.25rem 0.35rem 0.25rem 0;
}

.result-list .list-group-item,
.table-shell,
.form-shell { background: var(--color-surface); }

footer.site-footer {
  border-top: 1px solid var(--color-border-dark);
  background: rgba(15, 23, 42, 0.92);
  color: #cbd5e1;
}

footer.site-footer .text-muted {
  color: #94a3b8 !important;
}

footer.site-footer a {
  color: #93c5fd;
}

footer.site-footer a:hover,
footer.site-footer a:focus-visible {
  color: #bfdbfe;
}

:root[data-bs-theme="light"] footer.site-footer {
  border-top: 1px solid var(--color-border-subtle);
  background: rgba(255, 255, 255, 0.65);
  color: inherit;
}

:root[data-bs-theme="light"] footer.site-footer .text-muted {
  color: var(--bs-secondary-color) !important;
}

:root[data-bs-theme="light"] footer.site-footer a {
  color: var(--bs-primary);
}

:root[data-bs-theme="light"] footer.site-footer a:hover,
:root[data-bs-theme="light"] footer.site-footer a:focus-visible {
  color: var(--bs-link-hover-color, var(--bs-primary));
}

/* 3-column wayfinding grid prepended to every site footer (audit Pol14).
   Each column lists in-area destinations so a deep-search arrival has
   one-click pathways out without having to scroll back to the navbar. */
.site-footer-grid {
  padding-bottom: 0.5rem;
}
.site-footer-heading {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 0.55rem;
  color: inherit;
}
.site-footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
}
.site-footer-list a {
  text-decoration: none;
}
.site-footer-list a:hover,
.site-footer-list a:focus-visible {
  text-decoration: underline;
}
@media print {
  .site-footer-grid { display: none; }
}

.gematria-result:not(:empty) {
  padding: 1.25rem 1.4rem;
  border: 1px solid rgba(53,65,79,.12);
  border-radius: var(--radius-xl, 14px);
  background: var(--color-surface, rgba(255,255,255,.98));
  box-shadow: var(--shadow-card, 0 2px 10px rgba(15,23,42,.06));
}
:root[data-bs-theme="dark"] .gematria-result:not(:empty) {
  background: var(--color-surface-dark, rgba(17,24,34,.94));
  border-color: var(--color-border-dark, rgba(255,255,255,.08));
}
.gematria-result .gematria-prompt { margin-bottom: .5rem; }
.gematria-result .gematria-total { font-size: 3rem; font-weight: 800; line-height: 1.05; margin-bottom: .65rem; letter-spacing: -.01em; }
.gematria-result .gematria-total .inline-button { font-size: inherit; font-weight: inherit; padding: 0; }
.gematria-result .gematria-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin-bottom: .35rem; }
.gematria-result .gematria-meta .meta-highlight { padding: .15rem .6rem; }

.definition-pill {
  display: inline-block;
  padding: .1rem .55rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  background: rgba(var(--bs-primary-rgb), .1);
  color: var(--bs-primary);
  text-decoration: none;
  vertical-align: middle;
  margin-left: .25rem;
}
.definition-pill:hover,
.definition-pill:focus-visible {
  background: rgba(var(--bs-primary-rgb), .18);
  text-decoration: none;
}

.related-words-teaser-preview {
  margin: .5rem 0 .25rem;
  padding: .65rem .85rem;
  border-radius: 8px;
  background: rgba(255,255,255,.55);
}
.related-words-teaser-group { display: block; font-size: .95rem; }
.related-words-teaser-group + .related-words-teaser-group { margin-top: .15rem; }
.related-words-teaser-heading { font-weight: 600; }
.related-words-teaser-words {
  filter: blur(4px);
  user-select: none;
  pointer-events: none;
  color: #475467;
}
.per-letter-details { margin-top: .85rem; }
.per-letter-details > summary { cursor: pointer; list-style: revert; }
.per-letter-details[open] > summary { margin-bottom: .25rem; }
#related-words-result .panel, #results-shell .result-card { margin-top: 1rem; }
#related-words-result .matching-word, .meta-highlight { display: inline-block; padding: .2rem .55rem; border-radius: 999px; background: rgba(var(--bs-warning-rgb), .18); color: #7a4e00; font-weight: 600; }
#related-words-result .matching-word { text-decoration: none; }
#related-words-result .matching-word:hover,
#related-words-result .matching-word:focus-visible { text-decoration: underline; }
:root[data-bs-theme="dark"] #related-words-result .matching-word,
:root[data-bs-theme="dark"] .meta-highlight {
  background: rgba(var(--bs-warning-rgb), .28);
  color: #ffd591;
}
.meta-highlight a { color: inherit; font-weight: inherit; text-decoration: underline; }
.meta-highlight a:hover, .meta-highlight a:focus-visible { text-decoration: underline; }
#related-words-result .word-link, #related-words-result .definition-link, #related-words-result .inline-button, #results-shell .inline-button, #results-shell .word-button, #word-list a { color: var(--bs-primary); }
button.inline-button,
button.word-link,
button.word-button,
button.definition-link {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
  text-decoration: underline;
}
button.inline-button:hover,
button.word-link:hover,
button.word-button:hover,
button.definition-link:hover,
button.inline-button:focus-visible,
button.word-link:focus-visible,
button.word-button:focus-visible,
button.definition-link:focus-visible {
  text-decoration: underline;
}
:root[data-bs-theme="dark"] #related-words-result .word-link,
:root[data-bs-theme="dark"] #related-words-result .definition-link,
:root[data-bs-theme="dark"] #related-words-result .inline-button,
:root[data-bs-theme="dark"] #results-shell .inline-button,
:root[data-bs-theme="dark"] #results-shell .word-button,
:root[data-bs-theme="dark"] #word-list a {
  color: #6ea8fe;
}
:root[data-bs-theme="dark"] #related-words-result .related-word-card-meta.text-muted,
:root[data-bs-theme="dark"] #related-words-result .text-muted {
  color: rgba(255, 255, 255, 0.72) !important;
}
#related-words-result .related-word { word-spacing: 6px; }
#related-words-result li { padding-bottom: 12px; }
#related-words-result ul, #results-shell .word-list { padding-left: 1.2rem; }
#related-words-result .word-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .55rem; }
#related-words-result .gematria-detail { margin-top: .25rem; }
#related-words-result .gematria-detail .inline-button { margin: 0 .15rem; }
#related-words-result .gematria-detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; margin-top: .15rem; }
#related-words-result .related-words-grid { margin-top: .5rem; margin-bottom: 1rem; }
#related-words-result .related-word-group { margin-top: 1rem; }
#related-words-result .related-word-group:first-of-type { margin-top: .25rem; }
#related-words-result .related-word-group-heading {
  font-size: 1rem;
  font-weight: 600;
  margin: .5rem 0 .5rem;
  padding-bottom: .35rem;
  border-bottom: 1px dashed rgba(53,65,79,.18);
  color: var(--color-text-secondary, #475467);
}
:root[data-bs-theme="dark"] #related-words-result .related-word-group-heading {
  border-bottom-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.78);
}
#related-words-result .related-word-card {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(53,65,79,.12);
  border-radius: var(--radius-xl, 12px);
  background: var(--color-surface, rgba(255,255,255,.96));
  box-shadow: var(--shadow-card, 0 2px 8px rgba(15,23,42,.06));
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#related-words-result .related-word-card:hover,
#related-words-result .related-word-card:focus-within {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(15,23,42,.10);
  border-color: rgba(var(--bs-primary-rgb), .35);
}
#related-words-result .related-word-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .65rem;
}
#related-words-result .related-word-card-header .related-word {
  font-size: 1.1rem;
  font-weight: 600;
}
#related-words-result .related-word-card-gematria { font-size: .95rem; }
#related-words-result .related-word-card-gematria .inline-button {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 .15rem;
}
#related-words-result .related-word-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .5rem;
}
#related-words-result .related-word-card .per-letter-details { margin-top: .25rem; }
:root[data-bs-theme="dark"] #related-words-result .related-word-card {
  background: var(--color-surface-dark, rgba(17,24,34,.94));
  border-color: var(--color-border-dark, rgba(255,255,255,.08));
  box-shadow: 0 0.5rem 1.25rem rgba(5, 9, 14, 0.25);
}
#results-shell .result-card { border: 1px solid rgba(53,65,79,.08); border-radius: var(--radius-xl); background: rgba(255,255,255,.92); box-shadow: var(--shadow-card); padding: 1rem; }
:root[data-bs-theme="dark"] #results-shell .result-card {
  background: var(--color-surface-dark, rgba(17,24,34,.94));
  border-color: var(--color-border-dark, rgba(255,255,255,.08));
  box-shadow: 0 0.5rem 1.25rem rgba(5, 9, 14, 0.25);
}
#word-list.word-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  column-width: 12rem;
  column-gap: 1.5rem;
}
#word-list .word-item {
  list-style: none;
  break-inside: avoid;
  padding: .2rem 0;
  display: flex;
  align-items: baseline;
  gap: .4rem;
}
#word-list .word-item .definition-link {
  font-size: .85rem;
  color: var(--bs-secondary-color, #6c757d);
  text-decoration: none;
}
#word-list .word-item .definition-link:hover,
#word-list .word-item .definition-link:focus-visible {
  text-decoration: underline;
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 991.98px) {
  .results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
  .results-grid { grid-template-columns: 1fr; }
}

.blog-carousel .carousel-control-prev,
.blog-carousel .carousel-control-next {
  width: 3rem;
}

#homeHeroCarousel .carousel-control-prev,
#homeHeroCarousel .carousel-control-next {
  width: 3rem;
  height: 3rem;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

#homeHeroCarousel .carousel-control-prev-icon,
#homeHeroCarousel .carousel-control-next-icon {
  background-color: rgba(15, 23, 42, 0.45);
  border-radius: 50%;
  background-size: 55% 55%;
}

.blog-carousel .carousel-control-prev-icon,
.blog-carousel .carousel-control-next-icon {
  background-color: rgba(var(--bs-primary-rgb), 0.9);
  border-radius: 50%;
  background-size: 55% 55%;
}

.blog-carousel-indicators [data-bs-target] {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background-color: rgba(var(--bs-primary-rgb), 0.35);
}

.blog-slide-card,
.blog-post-card,
.blog-mini-link {
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
}

.blog-slide-card {
  margin: 0 clamp(0rem, 2vw, 1.5rem);
  box-shadow: 0 1rem 2rem rgba(63,64,58,.08);
}

.blog-slide-image-frame {
  margin: 0 auto;
  width: min(100%, 960px);
  aspect-ratio: 16 / 9;
  position: relative;
  border-radius: 0.9rem;
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-card-hover);
  background: rgba(15, 23, 42, 0.96);
}

.blog-slide-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.blog-slide-cta {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
}

.blog-slide-cta .btn {
  pointer-events: none;
}

.blog-post-card {
  box-shadow: var(--shadow-card);
}


.blog-home-featured-card {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.94);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: 0 0.8rem 1.6rem rgba(63,64,58,.07);
}

:root[data-bs-theme="dark"] .blog-home-featured-card {
  background: var(--color-surface-dark);
  border-color: var(--color-border-dark);
  box-shadow: 0 0.5rem 1.25rem rgba(5, 9, 14, 0.25);
}

:root[data-bs-theme="dark"] .blog-slide-card,
:root[data-bs-theme="dark"] .blog-post-card,
:root[data-bs-theme="dark"] .blog-mini-link,
:root[data-bs-theme="dark"] .news-placeholder-panel,
:root[data-bs-theme="dark"] .async-shell-card {
  background: var(--color-surface-dark);
  border-color: var(--color-border-dark);
  box-shadow: 0 0.5rem 1.25rem rgba(5, 9, 14, 0.25);
}

.blog-home-featured-readmore {
  margin-top: auto;
  align-self: flex-start;
}

.seo-offscreen-text {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

.blog-home-featured-image-frame {
  margin: 0;
  width: 100%;
  height: clamp(8rem, 20vw, 11rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
  background: rgba(15, 23, 42, 0.95);
}

.blog-home-featured-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.blog-post-image-frame {
  margin: 0;
  border-radius: 0.9rem;
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-card-hover);
  background: rgba(237, 243, 249, 0.9);
}

.blog-post-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center top;
}

.post-image-dropzone {
  border: 1px dashed rgba(53, 95, 140, 0.35);
  border-radius: 0.9rem;
  background: rgba(226, 241, 252, 0.35);
  padding: 0.9rem 1rem;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.post-image-dropzone:hover,
.post-image-dropzone:focus-visible,
.post-image-dropzone.is-dragover {
  border-color: rgba(var(--bs-primary-rgb), 0.85);
  background: rgba(226, 241, 252, 0.65);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15);
  outline: none;
}

.post-image-preview {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
  background: rgba(237, 243, 249, 0.9);
}

.post-image-preview__img {
  display: block;
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  object-position: center;
}

.blog-mini-link {
  display: block;
  padding: 1rem;
  color: var(--app-ink);
}

.blog-mini-link:hover {
  border-color: rgba(var(--bs-primary-rgb), 0.35);
  box-shadow: 0 0.75rem 1.5rem rgba(63,64,58,.08);
}

.blog-sidebar {
  top: 5.5rem;
  display: flex;
  flex-direction: column;
}

#blogSidebarLinks {
  max-height: none;
  overflow-y: hidden;
  min-height: 0;
}

#blogSidebarLinks.blog-sidebar-links--scrollable {
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.25rem;
  scrollbar-width: thin;
}

.blog-tag-filters {
  max-height: none;
  overflow: hidden;
  padding-right: 0;
}

.blog-tag-filters.blog-tag-filters--collapsed {
  max-height: 9rem;
  overflow: hidden;
}

.blog-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--color-border-soft, rgba(15, 23, 42, 0.15));
  background: var(--color-surface-strong, #fff);
  color: var(--color-text-strong, #0f172a);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.blog-tag-chip:hover,
.blog-tag-chip:focus-visible {
  border-color: rgba(var(--bs-primary-rgb), 0.55);
  box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.15);
  outline: none;
}

.blog-tag-chip__count {
  display: inline-block;
  min-width: 1.4rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  color: inherit;
  font-size: 0.7rem;
  text-align: center;
}

.blog-tag-chip--active {
  background: var(--bs-primary, #0d6efd);
  border-color: var(--bs-primary, #0d6efd);
  color: #fff;
}

.blog-tag-chip--active .blog-tag-chip__count {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

:root[data-bs-theme="dark"] .blog-tag-chip {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--color-text-on-dark, #f8fafc);
}

:root[data-bs-theme="dark"] .blog-tag-chip:hover,
:root[data-bs-theme="dark"] .blog-tag-chip:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(var(--bs-primary-rgb), 0.7);
  box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.25);
}

:root[data-bs-theme="dark"] .blog-tag-chip__count {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(230, 235, 242, 0.85);
}

:root[data-bs-theme="dark"] .blog-tag-chip--active {
  background: var(--bs-primary, #0d6efd);
  border-color: var(--bs-primary, #0d6efd);
  color: #fff;
}

:root[data-bs-theme="dark"] .blog-tag-chip--active .blog-tag-chip__count {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.blog-post-toc {
  border-left: 3px solid rgba(var(--bs-primary-rgb), 0.45);
  background: var(--color-surface-highlight-soft, rgba(15, 23, 42, 0.03));
}

html.blog-detail-view .blog-post-image-frame {
  max-height: 22rem;
  overflow: hidden;
}

html.blog-detail-view .blog-post-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html.blog-detail-view .blog-post-body h2,
html.blog-detail-view .blog-post-body h3 {
  position: relative;
  scroll-margin-top: calc(var(--blog-reading-progress-top, 4rem) + 1rem);
}

html.blog-detail-view .blog-post-body h2[id]:focus-within .blog-heading-anchor,
html.blog-detail-view .blog-post-body h3[id]:focus-within .blog-heading-anchor {
  opacity: 1;
}

@media (hover: hover) {
  html.blog-detail-view .blog-post-body h2[id]:hover .blog-heading-anchor,
  html.blog-detail-view .blog-post-body h3[id]:hover .blog-heading-anchor {
    opacity: 1;
  }
}

.blog-heading-anchor {
  margin-left: 0.4rem;
  font-size: 0.7em;
  color: var(--bs-primary, #0d6efd);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* On touch-only devices the heading anchor cannot be "hover-revealed", and
   the hover-driven opacity transition causes iOS to consume the first tap as
   a hover preview, so always show the anchor instead. */
@media (hover: none) {
  .blog-heading-anchor {
    opacity: 1;
  }
}

.blog-heading-anchor:focus-visible {
  outline: 2px solid var(--bs-primary, #0d6efd);
  outline-offset: 2px;
  opacity: 1;
}

@media print {
  html.blog-detail-view nav.sticky-top,
  html.blog-detail-view .blog-reading-progress,
  html.blog-detail-view #blogBreadcrumb,
  html.blog-detail-view #blogListToolbar,
  html.blog-detail-view .blog-sidebar,
  html.blog-detail-view .blog-series-strip,
  html.blog-detail-view .blog-post-toc,
  html.blog-detail-view .blog-related,
  html.blog-detail-view .blog-copy-link-button,
  html.blog-detail-view .share-action-button,
  html.blog-detail-view .site-footer,
  html.blog-detail-view .blog-heading-anchor,
  html.blog-detail-view #learningPathCompletionBanner {
    display: none !important;
  }
  html.blog-detail-view body {
    background: #fff;
    color: #000;
  }
  html.blog-detail-view main {
    padding: 0 !important;
  }
  html.blog-detail-view .col-lg-8,
  html.blog-detail-view .col-lg-4 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  html.blog-detail-view .blog-post-card {
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
  }
  html.blog-detail-view .blog-post-image-frame {
    max-height: none;
    page-break-inside: avoid;
  }
  html.blog-detail-view .blog-post-body a {
    color: #000;
    text-decoration: underline;
  }
  html.blog-detail-view .blog-post-body a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }
}

.blog-post-toc__item + .blog-post-toc__item {
  margin-top: 0.35rem;
}

.blog-post-toc__link {
  text-decoration: none;
  color: var(--color-text-strong, #0f172a);
  border-bottom: 1px dotted rgba(var(--bs-primary-rgb), 0.4);
}

.blog-post-toc__link:hover,
.blog-post-toc__link:focus-visible {
  color: var(--bs-primary, #0d6efd);
  border-bottom-color: var(--bs-primary, #0d6efd);
  outline: none;
}

.blog-post-toc__link--active {
  color: var(--bs-primary, #0d6efd);
  font-weight: 600;
  border-bottom-color: var(--bs-primary, #0d6efd);
}


.blog-reading-progress {
  position: fixed;
  top: var(--blog-reading-progress-top, 0);
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  z-index: 1010;
  pointer-events: none;
}

.blog-reading-progress__bar {
  height: 100%;
  width: 0%;
  background: var(--bs-primary, #0d6efd);
  transition: width 80ms linear;
}

.blog-related__item + .blog-related__item {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-border-soft, rgba(15, 23, 42, 0.08));
}

.blog-related__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.blog-related__title {
  display: block;
  font-weight: 600;
  color: var(--color-text-strong, #0f172a);
}

.blog-related__summary {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.85rem;
  color: var(--color-text-muted, #64748b);
}

.blog-related__link:hover .blog-related__title,
.blog-related__link:focus-visible .blog-related__title {
  color: var(--bs-primary, #0d6efd);
}

.blog-series-promo {
  border-left: 4px solid var(--bs-primary, #0d6efd);
  background: var(--color-surface-highlight-soft, rgba(15, 23, 42, 0.03));
}

.blog-series-promo__list {
  display: grid;
  gap: 0.5rem;
}

.blog-series-promo__step {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.blog-series-promo__step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--bs-primary, #0d6efd);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}

.blog-series-promo__step-link {
  text-decoration: none;
  color: var(--color-text-strong, #0f172a);
  font-weight: 500;
  border-bottom: 1px dotted rgba(var(--bs-primary-rgb), 0.4);
}

.blog-series-promo__step-link:hover,
.blog-series-promo__step-link:focus-visible {
  color: var(--bs-primary, #0d6efd);
  border-bottom-color: var(--bs-primary, #0d6efd);
  outline: none;
}

.blog-series-strip__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.blog-series-strip__cell {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-md, 0.5rem);
  border: 1px solid var(--color-border-soft, rgba(15, 23, 42, 0.1));
  background: var(--color-surface-strong, #fff);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.blog-series-strip__cell:hover,
.blog-series-strip__cell:focus-visible {
  border-color: rgba(var(--bs-primary-rgb), 0.55);
  box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.15);
  outline: none;
}

.blog-series-strip__cell--end {
  text-align: right;
  align-items: flex-end;
}

.blog-series-strip__cell--empty {
  border-style: dashed;
  background: transparent;
  pointer-events: none;
}

.blog-series-strip__direction {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted, #64748b);
}

.blog-series-strip__title {
  font-weight: 600;
  color: var(--color-text-strong, #0f172a);
}

@media (max-width: 576px) {
  .blog-series-strip__grid {
    grid-template-columns: 1fr;
  }
  .blog-series-strip__cell--end {
    text-align: left;
    align-items: flex-start;
  }
}

.followit-card {
  padding: clamp(0.9rem, 2vw, 1.15rem);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-soft);
  background: linear-gradient(155deg, var(--color-surface-strong), var(--color-surface-highlight-soft));
  box-shadow: 0 0.9rem 2rem rgba(63, 64, 58, 0.08);
}

.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 0;
  padding: clamp(0.9rem, 2vw, 1.25rem);
  max-width: none;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(var(--bs-primary-rgb), 0.2);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview,
.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview * {
  box-sizing: border-box;
}

.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-heading {
  width: 100%;
}

.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-heading h5 {
  margin: 0;
  color: var(--app-ink);
  font-size: 1.35rem;
  font-weight: 700;
  text-align: left;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-input-field {
  margin-top: 0;
  width: 100%;
}

.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-input-field input {
  width: 100%;
  min-height: 46px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(53, 65, 79, 0.22);
  background: rgba(255, 255, 255, 0.98);
  color: var(--app-ink);
  outline: none;
  font-size: 0.95rem;
  line-height: 1.25;
  text-align: left;
  padding: 0.6rem 0.85rem;
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-input-field input::placeholder {
  color: var(--app-muted);
  opacity: 1;
}

.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-input-field input:focus {
  border-color: rgba(var(--bs-primary-rgb), 0.45);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.14);
  background: #fff;
}

.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-submit-button {
  margin-top: 0.1rem;
  width: 100%;
}

.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-submit-button button {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #ffd44d, #ffbd05);
  color: var(--bs-dark);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  box-shadow: 0 0.45rem 0.9rem rgba(255, 193, 7, 0.3);
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-submit-button button:hover {
  cursor: pointer;
  filter: brightness(1.02);
  transform: translateY(-1px);
  box-shadow: 0 0.6rem 1rem rgba(255, 193, 7, 0.32);
}

.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .powered-by-line {
  color: var(--app-muted);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin-top: 0.65rem;
}

.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .powered-by-line img {
  margin-left: 0.45rem;
  height: 1.1em;
  max-height: 1.1em;
}

.followit-card--sidebar {
  padding: 0.85rem;
}

.followit-card--sidebar .preview-heading h5 {
  font-size: 1.05rem;
}

:root[data-bs-theme="dark"] .followit-card {
  background: var(--color-surface-dark);
  border-color: var(--color-border-dark);
  box-shadow: 0 0.5rem 1.25rem rgba(5, 9, 14, 0.25);
}

:root[data-bs-theme="dark"] .followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview {
  background: rgba(15, 21, 30, 0.6);
  border-color: var(--color-border-dark);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

:root[data-bs-theme="dark"] .followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-heading h5 {
  color: var(--color-text-on-dark);
}

:root[data-bs-theme="dark"] .followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-input-field input {
  background: rgba(9, 14, 21, 0.7);
  border-color: var(--color-border-dark);
  color: var(--color-text-on-dark);
}

:root[data-bs-theme="dark"] .followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-input-field input::placeholder {
  color: rgba(230, 235, 242, 0.55);
}

:root[data-bs-theme="dark"] .followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-input-field input:focus {
  background: rgba(9, 14, 21, 0.85);
  border-color: rgba(var(--bs-primary-rgb), 0.55);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.22);
}

@media (max-width: 991px) {
  .blog-slide-card {
    margin: 0;
  }

  .blog-sidebar {
    position: static !important;
    max-height: none;
    overflow: visible;
  }
}


.news-placeholder-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card);
}

.news-inline-link {
  color: var(--bs-primary);
  font-weight: 600;
  text-decoration-line: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
  text-decoration-color: rgba(var(--bs-primary-rgb), 0.45);
  transition: color 0.2s ease, text-decoration-color 0.2s ease, background-color 0.2s ease;
}

.news-inline-link:hover {
  color: var(--bs-warning);
  text-decoration-color: rgba(var(--bs-warning-rgb), 0.85);
}

.blog-post-body .news-inline-link,
.text-muted .news-inline-link {
  border-radius: 0.2rem;
  padding: 0 0.12rem;
}

.blog-post-body .news-inline-link:hover,
.text-muted .news-inline-link:hover {
  background-color: rgba(var(--bs-warning-rgb), 0.15);
}

.news-placeholder-panel {
  padding: 1.25rem;
}


.async-content-shell {
  position: relative;
  min-height: 14rem;
}

.async-content-shell--md {
  min-height: 18rem;
}

.async-content-shell--lg {
  min-height: 24rem;
}

.async-shell-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.async-shell-line {
  display: block;
  height: 0.85rem;
  border-radius: 999px;
}

.async-shell-line--lg {
  height: 1.35rem;
}

#blogPosts,
#blogSidebarLinks,
#faqAccordion,
#word-list {
  min-height: 14rem;
}

#blogPostsCarouselInner {
  min-height: 20rem;
}


.admin-auth-card {
  max-width: 38rem;
  margin: 0 auto;
}

.admin-container {
  max-width: 980px;
}

body.page-render-pending nav,
body.page-render-pending main,
body.page-render-pending footer {
  visibility: hidden;
}

.page-render-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay-page);
  display: grid;
  place-items: center;
  background: rgba(248, 250, 252, 0.9);
  backdrop-filter: blur(3px);
}

.page-render-overlay__card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  border-radius: var(--radius-xl);
  padding: 0.9rem 1.1rem;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid var(--color-border-soft);
  box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.14);
}

.admin-list {
  display: grid;
  gap: 1rem;
}

.admin-item-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.editorial-proposal-card {
  background: var(--color-surface-strong);
}

.editorial-proposal-card__meta-badge {
  background-color: rgba(15, 23, 42, 0.1);
  color: #0f172a;
  border: 1px solid rgba(15, 23, 42, 0.12);
}

:root[data-bs-theme="dark"] .editorial-proposal-card {
  background: rgba(11, 17, 28, 0.96);
}

:root[data-bs-theme="dark"] .editorial-proposal-card__meta-badge {
  background-color: rgba(148, 163, 184, 0.22);
  color: #e6edf5;
  border-color: rgba(148, 163, 184, 0.35);
}

:root[data-bs-theme="dark"] .editorial-proposal-card .btn-outline-secondary {
  --bs-btn-color: #d6e0ed;
  --bs-btn-border-color: rgba(148, 163, 184, 0.55);
  --bs-btn-hover-color: #0e1623;
  --bs-btn-hover-bg: #d6e0ed;
  --bs-btn-hover-border-color: #d6e0ed;
}



.admin-dashboard-section {
  overflow: hidden;
}

.admin-section-toggle {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
}

.admin-section-toggle:focus-visible {
  outline: 3px solid rgba(var(--bs-primary-rgb), 0.28);
  outline-offset: 0.35rem;
  border-radius: var(--radius-md);
}

.admin-section-toggle-icon {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--bs-primary);
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}

.admin-section-toggle.collapsed .admin-section-toggle-icon {
  transform: rotate(0deg);
}

[data-bs-toggle="collapse"]:not(.navbar-toggler):not(.admin-section-toggle) {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

[data-bs-toggle="collapse"]:not(.navbar-toggler):not(.admin-section-toggle)::after {
  content: "⌄";
  color: var(--bs-primary);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  background-image: none;
  width: auto;
  height: auto;
  transform: rotate(0deg);
  transition: transform 0.2s ease;
}

[data-bs-toggle="collapse"]:not(.navbar-toggler):not(.admin-section-toggle)[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

[data-bs-toggle="collapse"] [id$="ToggleArrow"] {
  display: none;
}


.admin-danger-zone {
  border: 1px solid rgba(176, 34, 34, 0.25);
  background: linear-gradient(180deg, rgba(255, 245, 245, 0.92), var(--color-surface-strong));
}

.admin-danger-zone .section-kicker {
  color: #8b1f1f;
}

.admin-section-body {
  border-top: 1px solid var(--color-border-subtle);
  padding-top: 1.25rem;
}

.member-history-card {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.member-history-card.is-favorited {
  border-color: rgba(234, 179, 8, 0.65);
  box-shadow: 0 0.8rem 1.6rem rgba(234, 179, 8, 0.14);
}

.history-favorite-button {
  border: none;
  background: transparent;
  color: #cbd5e1;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.15rem;
  transition: color 0.2s ease, transform 0.2s ease;
}

.history-favorite-button:hover,
.history-favorite-button:focus-visible {
  color: #eab308;
  transform: scale(1.08);
}

.history-favorite-button.is-favorited {
  color: #eab308;
}

.site-legal-links a {
  color: var(--bs-primary);
  text-decoration: none;
}

.site-legal-links a:hover,
.site-legal-links a:focus {
  color: #21496f;
  text-decoration: underline;
}

.legal-copy h2 {
  margin-bottom: 0.9rem;
}

/* Sticky table-of-contents panel for long-form guides (e.g. gematria-guide).
   Matches the pattern in definitions.html's glossary TOC — stays anchored
   below the navbar on wide viewports so step-jump links stay reachable
   while the reader scrolls. */
@media (min-width: 992px) {
  .guide-toc-panel {
    position: sticky;
    top: 84px;
    z-index: 5;
    backdrop-filter: saturate(160%) blur(6px);
    -webkit-backdrop-filter: saturate(160%) blur(6px);
  }
}

/* English Ordinal letter-value chart shown on why-english-gematria.html.
   Auto-fits a responsive grid of 26 letter/value cells. Each cell pairs a
   bold serif letter with its numeric value. */
.letter-value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(2.6rem, 1fr));
  gap: 0.45rem;
}

.letter-value-grid__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.25rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-align: center;
}

.letter-value-grid__letter {
  font-family: var(--brand-heading-font);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--bs-primary, #0d6efd);
}

.letter-value-grid__value {
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  color: var(--bs-secondary, #64748b);
  margin-top: 0.25rem;
}

:root[data-bs-theme="dark"] .letter-value-grid__cell {
  background: rgba(148, 163, 184, 0.06);
  border-color: var(--color-border-dark);
}

:root[data-bs-theme="dark"] .letter-value-grid__letter {
  color: #fbbf24;
}

:root[data-bs-theme="dark"] .letter-value-grid__value {
  color: rgba(226, 232, 240, 0.7);
}

.legal-copy p:last-child,
.legal-copy ul:last-child {
  margin-bottom: 0;
}

/* Sibling-page cross-link strip for legal/policy pages. Sits between the
   hero and the on-page TOC so readers can hop between Privacy, Terms,
   Disclaimer, and Accessibility without scrolling to the footer. */
.legal-related-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.1rem;
  padding: 0.65rem 1rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.legal-related-strip__label {
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
}

.legal-related-strip a {
  text-decoration: none;
  color: var(--bs-primary, #0d6efd);
  border-bottom: 1px dotted rgba(var(--bs-primary-rgb), 0.4);
}

.legal-related-strip a:hover,
.legal-related-strip a:focus-visible {
  border-bottom-style: solid;
}

:root[data-bs-theme="dark"] .legal-related-strip {
  background: rgba(148, 163, 184, 0.06);
  border-color: var(--color-border-dark);
}

/* Premium Membership pricing callout (terms.html §premium). Lifts the
   headline price out of the dense terms list so users see what they're
   paying for at a glance before reading the line-by-line obligations. */
.premium-pricing-callout {
  border-left: 4px solid var(--brand-amber);
  background: rgba(var(--brand-amber-rgb), 0.06);
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-md);
}

.premium-pricing-callout__kicker {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--brand-amber);
}

:root[data-bs-theme="dark"] .premium-pricing-callout {
  background: rgba(var(--brand-amber-rgb), 0.12);
}

/* Stacked definition list used for legal/terms sections that previously
   relied on bullet lists with bold term-style prefixes. Each <dt> sits as
   a small subhead above its <dd> body so scanning is faster than a wall
   of bullets. */
.premium-terms-dl {
  margin-bottom: 1rem;
}

.premium-terms-dl dt {
  font-weight: 700;
  margin-top: 0.85rem;
  margin-bottom: 0.25rem;
  color: var(--color-text-strong, #0f172a);
}

.premium-terms-dl dt:first-child {
  margin-top: 0;
}

.premium-terms-dl dd {
  margin-left: 0;
  margin-bottom: 0;
}

:root[data-bs-theme="dark"] .premium-terms-dl dt {
  color: #f1f5f9;
}

/* Privacy "at a glance" summary card. Sits between the privacy hero and
   the TOC so users see the short answer (we don't sell data, payments go
   through Stripe, EU/UK consent, etc.) before scrolling into the legal
   detail. Visually distinguished from regular content-panels by an amber
   accent stripe so it reads as orientation, not as part of the body copy. */
.privacy-tldr {
  border-left: 4px solid var(--brand-amber);
  background: rgba(var(--brand-amber-rgb), 0.06);
}

:root[data-bs-theme="dark"] .privacy-tldr {
  background: rgba(var(--brand-amber-rgb), 0.12);
}

.membership-payment-form {
  background: linear-gradient(180deg, rgba(53, 95, 140, 0.06), rgba(51, 161, 214, 0.02));
  border: 1px solid rgba(var(--bs-primary-rgb), 0.12);
  border-radius: var(--radius-xl);
  padding: 1rem;
}

.membership-upgrade-panel--compact {
  border: 1px solid rgba(var(--bs-warning-rgb), 0.35);
  box-shadow: 0 10px 22px rgba(240, 171, 0, 0.12);
}

.membership-upgrade-cta {
  background: var(--brand-amber);
  border: 1px solid var(--brand-amber);
  color: #ffffff;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.55rem 1rem;
}

.membership-upgrade-cta:hover,
.membership-upgrade-cta:focus-visible {
  background: var(--brand-amber-hover);
  border-color: var(--brand-amber-hover);
  color: #ffffff;
}

.membership-price-badge {
  align-self: flex-start;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  background: rgba(var(--bs-warning-rgb), 0.16);
  color: #7a4e00;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.membership-upgrade-note {
  color: var(--app-muted);
  font-size: 0.95rem;
}

.register-perk-strip {
  border-left: 3px solid var(--brand-amber, #fbbf24);
  background: rgba(var(--bs-warning-rgb), 0.08);
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
}

.register-perk-strip .badge {
  font-weight: 500;
  padding: 0.4rem 0.6rem;
}

:root[data-bs-theme="dark"] .register-perk-strip {
  background: rgba(var(--bs-warning-rgb), 0.14);
}

.global-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-loading);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(9, 12, 22, 0.45);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.global-loading-overlay--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.global-loading-overlay__card {
  min-width: min(90vw, 19rem);
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  border-radius: 14px;
  padding: 0.875rem 1.1rem;
  background: rgba(16, 22, 39, 0.92);
  color: #f5f7ff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 12px 28px rgba(5, 8, 16, 0.35);
}

.global-loading-overlay__spinner {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.32);
  border-top-color: #7ac2ff;
  animation: globalLoadingSpin 0.85s linear infinite;
}

.global-loading-overlay__text {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

@keyframes globalLoadingSpin {
  to {
    transform: rotate(360deg);
  }
}


.admin-post-details summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  position: relative;
  padding-right: 1.4rem;
}

.admin-post-details summary::-webkit-details-marker {
  display: none;
}

.admin-post-summary-title {
  flex: 1;
  min-width: 0;
}

.admin-post-summary-meta {
  flex-shrink: 0;
  text-align: right;
}

.admin-post-summary-trailing {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-width: 0;
}

.admin-post-summary-status {
  flex-shrink: 0;
}

.admin-post-summary::after {
  content: '⌄';
  color: var(--app-primary);
  font-weight: 700;
  position: absolute;
  right: 0;
  top: 0.1rem;
}

.admin-post-details[open] .admin-post-summary::after {
  transform: rotate(180deg);
}

@media (max-width: 640px) {
  .admin-post-details summary {
    display: block;
    padding-right: 1.6rem;
  }

  .admin-post-summary-title {
    display: block;
    width: 100%;
    margin-right: 0;
    overflow-wrap: anywhere;
  }

  .admin-post-summary-trailing {
    display: flex;
    width: 100%;
    margin-top: 0.35rem;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.4rem 0.65rem;
  }

  .admin-post-summary-meta {
    text-align: left;
    width: 100%;
  }

  .admin-post-summary-status {
    flex-shrink: 0;
  }
}

@media (min-width: 768px) {
  .admin-dashboard-masonry {
    display: block;
    column-count: 2;
    column-gap: 1.5rem;
  }

  .admin-dashboard-masonry-item {
    width: 100%;
    break-inside: avoid;
    display: inline-block;
    margin-bottom: 1.5rem;
  }
}


.navbar-brand {
  display: inline-flex;
  align-items: center;
}

.site-logo {
  height: 40px;
  width: auto;
  max-width: 100%;
  display: block;
}

/* On mobile widths the SVG must be able to scale below its intrinsic width
   so the navbar header (brand + search/theme/menu actions) stays on one row
   instead of wrapping to two lines on iPhones. Using max-height + auto sizing
   lets the logo shrink proportionally when horizontal space runs out. */
@media (max-width: 991.98px) {
  .site-logo {
    height: auto;
    max-height: 34px;
  }
}

.pwa-install-cta {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: min(92vw, 26rem);
  padding: 0.75rem 0.85rem;
  border-radius: 0.9rem;
  background: rgba(63, 64, 58, 0.94);
  color: #fff;
  box-shadow: 0 0.8rem 1.6rem rgba(24, 25, 22, 0.3);
}

.pwa-install-cta__text {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.3;
}

.pwa-install-cta__button {
  white-space: nowrap;
}

/* Make save-to-dashboard actions stand out in AI agent responses. */
.agent-save-history-button.btn.btn-sm {
  background-color: #198754;
  border-color: #146c43;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(25, 135, 84, 0.15), 0 8px 16px rgba(20, 108, 67, 0.25);
}

.agent-save-history-button.btn.btn-sm:hover,
.agent-save-history-button.btn.btn-sm:focus-visible {
  background-color: #157347;
  border-color: #0f5132;
  color: #fff;
  box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.3), 0 10px 20px rgba(15, 81, 50, 0.3);
}

.pwa-install-cta__dismiss {
  border: 0;
  padding: 0;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: inherit;
  font-size: 1rem;
  line-height: 1;
}

.pwa-install-cta__dismiss:hover,
.pwa-install-cta__dismiss:focus-visible {
  background: rgba(255, 255, 255, 0.28);
}

@media (max-width: 576px) {
  .pwa-install-cta {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    flex-wrap: wrap;
  }

  .pwa-install-cta__button {
    margin-left: auto;
  }
}

/* SW update toast: same visual family as .pwa-install-cta but sits slightly
   higher so the two don't collide when both appear (rare, but possible on
   a returning visitor's first install). */
.pwa-update-toast {
  position: fixed;
  right: 1rem;
  bottom: 5rem;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: min(92vw, 26rem);
  padding: 0.75rem 0.85rem;
  border-radius: 0.9rem;
  background: rgba(63, 64, 58, 0.94);
  color: #fff;
  box-shadow: 0 0.8rem 1.6rem rgba(24, 25, 22, 0.3);
}

.pwa-update-toast__text {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.3;
}

.pwa-update-toast__button {
  white-space: nowrap;
}

.pwa-update-toast__dismiss {
  border: 0;
  padding: 0;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: inherit;
  font-size: 1rem;
  line-height: 1;
}

.pwa-update-toast__dismiss:hover,
.pwa-update-toast__dismiss:focus-visible {
  background: rgba(255, 255, 255, 0.28);
}

@media (max-width: 576px) {
  .pwa-update-toast {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 4.5rem;
    flex-wrap: wrap;
  }

  .pwa-update-toast__button {
    margin-left: auto;
  }
}


.pwa-launch-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(15, 23, 42, 0.68);
  backdrop-filter: blur(2px);
}

.pwa-launch-overlay__content {
  display: grid;
  justify-items: center;
  gap: 0.8rem;
  min-width: min(90vw, 16rem);
  padding: 1.2rem 1.4rem;
  border-radius: var(--radius-xl);
  background: var(--color-surface-strong);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.24);
}

.pwa-launch-overlay__logo {
  display: block;
  width: min(11rem, 100%);
  height: auto;
}

.pwa-launch-overlay__spinner {
  width: 2.25rem;
  height: 2.25rem;
  border: 0.24rem solid rgba(53, 95, 140, 0.25);
  border-top-color: #355f8c;
  border-radius: 50%;
  animation: pwaLaunchSpin 0.85s linear infinite;
}

.pwa-launch-overlay__message {
  margin: 0;
  color: #1f2937;
  font-weight: 700;
  text-align: center;
}

@keyframes pwaLaunchSpin {
  to {
    transform: rotate(360deg);
  }
}

.calculator-loading-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(2px);
  z-index: var(--z-modal-backdrop);
}

.calculator-loading-overlay[hidden] {
  display: none;
}

.calculator-loading-overlay__message {
  margin: 0;
  padding: 1rem 1.5rem;
  border-radius: 999px;
  background: #ffffff;
  color: #1f2937;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.2);
}

/* ── Touch target utility (WCAG 2.5.5: 44x44 CSS pixels) ────────────────── */
/* Applied uniformly to icon-only and otherwise small interactive controls.
   Use .touch-target on any clickable element that would otherwise render
   below 44x44 (modal close buttons, icon links, tag chips, etc.). */
.touch-target,
.btn-close,
a.badge,
.badge[href] {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-close {
  background-position: center;
  background-size: 0.875rem;
}

.touch-target-lg {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}

/* On touch devices, grow .btn-sm to the WCAG 44px tap target. Bootstrap's
   default sm height is ~31px which is fine for mouse precision but tight
   for fingers, especially in the dense admin action rows. Scoped to
   pointer: coarse so desktop density is unchanged, and only the vertical
   axis is enlarged so tag-pill rows don't stretch. */
@media (pointer: coarse) {
  .btn-sm,
  .btn-group-sm > .btn {
    min-height: 44px;
  }

  /* When min-height pushes a btn-sm taller than its natural line-box,
     <button> centers text via user-agent middle alignment while
     <a class="btn"> aligns to the top — making the two elements look
     like different sizes when sat side-by-side. Force flex centering so
     mixed button/anchor rows in stat cards render at the same height. */
  .btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

.nav-search-link svg {
  width: 1rem;
  height: 1rem;
  display: block;
  flex-shrink: 0;
}

.feature-card-icon {
  background: var(--color-surface-dark);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.feature-card-icon:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--brand-amber-rgb), 0.55);
}

.feature-card-icon__icon {
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--brand-amber-rgb), 0.22);
  border: 1px solid rgba(var(--brand-amber-rgb), 0.4);
  color: var(--brand-amber);
  box-shadow: 0 0 0 4px rgba(var(--brand-amber-rgb), 0.06);
}

.feature-card-icon__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.feature-card-icon__title {
  font-family: var(--brand-heading-font);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
  color: var(--color-text-on-dark);
}

.feature-card-icon__body {
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(226, 232, 240, 0.78);
  margin: 0;
}

@media (max-width: 1199.98px) {
  .hero-panel h1.display-5,
  .hero-panel .display-5 {
    font-size: clamp(1.85rem, 2.2vw + 1rem, 2.4rem);
  }
}

@media (max-width: 575.98px) {
  .hero-panel h1.display-5,
  .hero-panel .display-5 {
    font-size: 1.6rem;
    line-height: 1.2;
  }

  .hero-panel .lead {
    font-size: 1rem;
  }
}

.content-panel--soft {
  background: rgba(255, 255, 255, 0.78);
}

:root[data-bs-theme="dark"] .content-panel--soft {
  background: rgba(17, 24, 34, 0.72);
}

.learning-path-completion-banner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #dcfce7 0%, #fef3c7 100%);
  border: 1px solid #22c55e;
  box-shadow: 0 1rem 2rem -1rem rgba(22, 163, 74, 0.45);
}

.learning-path-completion-banner::before {
  content: "🎉";
  position: absolute;
  bottom: -0.75rem;
  right: 0.75rem;
  font-size: 5rem;
  line-height: 1;
  opacity: 0.35;
  pointer-events: none;
  transform: rotate(15deg);
}

.learning-path-completion-banner .btn-close.learning-path-completion-banner__dismiss {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 2;
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  padding: 0.6rem;
}

.learning-path-completion-banner .section-kicker {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: #15803d;
}

.learning-path-completion-banner h2,
.learning-path-completion-banner h3,
.learning-path-completion-banner p,
.learning-path-completion-banner ol {
  color: #0f172a;
}

:root[data-bs-theme="dark"] .learning-path-completion-banner {
  background: linear-gradient(135deg, #064e3b 0%, #78350f 100%);
  border-color: #22c55e;
  box-shadow: 0 1rem 2rem -1rem rgba(34, 197, 94, 0.55);
}

:root[data-bs-theme="dark"] .learning-path-completion-banner::before {
  opacity: 0.55;
}

:root[data-bs-theme="dark"] .learning-path-completion-banner .section-kicker {
  color: #bbf7d0;
}

:root[data-bs-theme="dark"] .learning-path-completion-banner h2,
:root[data-bs-theme="dark"] .learning-path-completion-banner h3,
:root[data-bs-theme="dark"] .learning-path-completion-banner p,
:root[data-bs-theme="dark"] .learning-path-completion-banner ol {
  color: #f8fafc;
}

:root[data-bs-theme="dark"] .learning-path-completion-banner .btn-close.learning-path-completion-banner__dismiss {
  background-color: rgba(15, 23, 42, 0.85);
  filter: invert(1) grayscale(100%) brightness(200%);
}

.learning-path-complete-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: rgba(34, 197, 94, 0.15);
  color: #166534;
  border: 1px solid rgba(34, 197, 94, 0.4);
}

:root[data-bs-theme="dark"] .learning-path-complete-badge {
  background: rgba(34, 197, 94, 0.2);
  color: #bbf7d0;
  border-color: rgba(34, 197, 94, 0.55);
}

.learning-path-achievement-badge {
  flex: 0 0 auto;
  width: 72px;
  height: 90px;
  display: inline-block;
  filter: drop-shadow(0 0.5rem 0.75rem rgba(146, 64, 14, 0.35));
}

.learning-path-achievement-badge svg {
  width: 100%;
  height: 100%;
  display: block;
}

.learning-path-achievement-badge--lg {
  width: 120px;
  height: 150px;
}

.learning-path-achievement-badge--sm {
  width: 56px;
  height: 70px;
}

.learning-path-achievement-badge--muted {
  filter: grayscale(0.85) drop-shadow(0 0.25rem 0.5rem rgba(15, 23, 42, 0.2));
  opacity: 0.75;
}

/* Homepage promo strip advertising the 4-level beginner path and the
   badge graduates earn. Replaces the old "Why English Gematria"
   methodology card directly below the hero. */
.learning-path-promo {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0d1a30 0%, #1d3358 60%, #b45309 100%);
  color: #fff;
  border: 1px solid rgba(251, 191, 36, 0.35);
  box-shadow: 0 1rem 2rem -1rem rgba(13, 26, 48, 0.45);
}

.learning-path-promo .section-kicker {
  color: #fde68a;
  letter-spacing: 0.08em;
}

.learning-path-promo h2 {
  font-family: "Fraunces", "Source Serif Pro", Georgia, serif;
  color: #fff;
}

.learning-path-promo p {
  color: rgba(255, 255, 255, 0.92);
}

.learning-path-promo__steps {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
  display: grid;
  gap: 0.6rem;
  counter-reset: lp-step;
}

.learning-path-promo__steps li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 600;
  counter-increment: lp-step;
}

.learning-path-promo__steps li::before {
  content: counter(lp-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.95);
  color: #1d1306;
  font-weight: 800;
  flex: 0 0 auto;
}

.learning-path-promo .btn-warning {
  color: #1d1306;
}

.learning-path-promo .btn-outline-light:hover,
.learning-path-promo .btn-outline-light:focus-visible {
  color: #0d1a30;
}

/* Slim variant: keeps the gradient identity but compresses the panel
   into a single-line banner so it stops competing with the hero. */
.learning-path-promo--slim h2 {
  font-size: 1rem;
  line-height: 1.35;
}

.learning-path-promo--slim p {
  color: rgba(255, 255, 255, 0.8);
}

/* On phones the column stack leaves the badge floating alone above the
   text and orphans the CTA. Pull the badge inline with the title, shrink
   it, and let the CTA span the full row for a comfortable tap target. */
@media (max-width: 767.98px) {
  .learning-path-promo--slim > .d-flex {
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center !important;
    gap: 0.75rem !important;
  }

  .learning-path-promo--slim .learning-path-achievement-badge {
    width: 44px;
    height: 55px;
  }

  .learning-path-promo--slim .flex-grow-1 {
    flex: 1 1 0;
    min-width: 0;
  }

  .learning-path-promo--slim h2 {
    font-size: 0.95rem;
  }

  .learning-path-promo--slim p {
    font-size: 0.8rem;
    line-height: 1.4;
  }

  .learning-path-promo--slim > .d-flex > .flex-shrink-0:last-child {
    flex-basis: 100%;
    flex-shrink: 1;
  }

  .learning-path-promo--slim #learningPathPromoCta {
    width: 100%;
    text-align: center;
    padding-block: 0.55rem;
    font-size: 0.95rem;
  }
}

/* Inline "earn a badge" nudge added to the calculator + results pages so a
   user who just ran a search sees the structured-learning offer at a
   warm moment. */
.learning-path-nudge {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.85) 0%, rgba(220, 252, 231, 0.85) 100%);
  border: 1px solid rgba(217, 119, 6, 0.35);
  color: #1f2937;
}

.learning-path-nudge__icon {
  flex: 0 0 auto;
  width: 40px;
  height: 50px;
  display: inline-block;
}

.learning-path-nudge__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.learning-path-nudge__body {
  flex: 1 1 auto;
  min-width: 0;
}

.learning-path-nudge__title {
  font-weight: 700;
  font-size: 0.95rem;
  margin: 0;
}

.learning-path-nudge__lead {
  margin: 0;
  font-size: 0.85rem;
  color: #475569;
}

.learning-path-nudge .btn-close {
  flex: 0 0 auto;
}

:root[data-bs-theme="dark"] .learning-path-nudge {
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.55) 0%, rgba(6, 78, 59, 0.55) 100%);
  border-color: rgba(251, 191, 36, 0.45);
  color: #f8fafc;
}

:root[data-bs-theme="dark"] .learning-path-nudge__lead {
  color: #cbd5e1;
}

/* Aspirational card shown to free members who haven't yet completed the
   learning path — same shape as the completion banner but greyed badge
   and "earn this" copy. */
.learning-path-aspire {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(241, 245, 249, 0.95) 0%, rgba(254, 243, 199, 0.55) 100%);
  border: 1px dashed rgba(180, 83, 9, 0.55);
}

:root[data-bs-theme="dark"] .learning-path-aspire {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(69, 39, 16, 0.55) 100%);
  border-color: rgba(251, 191, 36, 0.45);
  color: #f8fafc;
}

.learning-path-share {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.learning-path-share__label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #15803d;
  margin-right: 0.25rem;
}

:root[data-bs-theme="dark"] .learning-path-share__label {
  color: #bbf7d0;
}

/* Sticky "Back to lesson" bar shown on the calculator while a learner is
   inside a learning-path lesson. Stays visible while scrolling a large
   results cluster so the return path is always one tap away. The `top`
   value clears the sticky navbar (66px on desktop, ~56px on mobile). */
.learning-path-return-sticky {
  position: sticky;
  top: 56px;
  z-index: 5;
  background: var(--bs-body-bg);
  padding: 0.5rem 0;
}

@media (min-width: 992px) {
  .learning-path-return-sticky {
    top: 66px;
  }
}

/* ----- Form controls: focus, validation, touch targets ------------------- */
/* Gives every Bootstrap form-control a consistent brand-amber focus ring,
   a real .is-invalid state, and a 44px touch target on mobile. The disabled
   visual treatment for buttons lives near the .btn-ghost rule above. */
.form-control,
.form-select {
  min-height: 2.75rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--brand-amber);
  box-shadow: 0 0 0 0.2rem rgba(var(--brand-amber-rgb), 0.18);
  outline: none;
}

/* SiteSeeker example-question chips. Distinct visual from .btn so users
   read them as "click to prefill the textarea" rather than form submits.
   No primary-blue fill, no .btn shadow -- chip pill geometry with a
   subtle pencil glyph to hint at "this drops into the input". */
.example-question-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--color-text, #35414f);
  background: rgba(var(--color-text-rgb, 53, 65, 79), 0.04);
  border: 1px solid rgba(var(--color-text-rgb, 53, 65, 79), 0.18);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  min-height: 32px;
}
.example-question-chip::before {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4z"/></svg>') no-repeat center / contain;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4z"/></svg>') no-repeat center / contain;
  opacity: 0.7;
}
.example-question-chip:hover,
.example-question-chip:focus-visible {
  background: rgba(var(--brand-amber-rgb), 0.10);
  border-color: rgba(var(--brand-amber-rgb), 0.55);
  color: var(--brand-amber);
}
:root[data-bs-theme="dark"] .example-question-chip {
  color: var(--color-text-on-dark);
  background: rgba(230, 235, 242, 0.06);
  border-color: rgba(230, 235, 242, 0.22);
}
:root[data-bs-theme="dark"] .example-question-chip:hover,
:root[data-bs-theme="dark"] .example-question-chip:focus-visible {
  background: rgba(var(--brand-amber-rgb), 0.18);
  border-color: rgba(251, 191, 36, 0.55);
  color: #fde68a;
}

/* Defensive coverage for inputs that escape the .form-control / .form-select /
   .form-check-input classes (third-party widgets, late-added markup). Without
   this, the native :focus ring or Bootstrap blue can leak through and break
   the amber focus identity. */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.form-control):not(.form-check-input):focus-visible,
textarea:not(.form-control):focus-visible,
select:not(.form-select):focus-visible {
  border-color: var(--brand-amber);
  box-shadow: 0 0 0 0.2rem rgba(var(--brand-amber-rgb), 0.18);
  outline: 2px solid var(--brand-amber);
  outline-offset: 1px;
}

.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
  border-color: #dc3545;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus,
.was-validated .form-control:invalid:focus,
.was-validated .form-select:invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.18);
}

.invalid-feedback {
  display: block;
  color: #b02a37;
  font-size: var(--font-size-sm);
  margin-top: 0.25rem;
}

:root[data-bs-theme="dark"] .invalid-feedback {
  color: #f5b1b8;
}

/* Password visibility toggles are injected by ui-feedback.js as plain
   .btn.btn-outline-secondary inside an .input-group; give them a brand
   focus ring so keyboard users can see where focus landed. */
[data-password-toggle]:focus-visible {
  outline: 2px solid var(--brand-amber);
  outline-offset: 2px;
  z-index: 1;
}

/* Legal-page section anchors. The sticky navbar would otherwise obscure
   the heading when users click a TOC link. */
.legal-copy h2[id] {
  scroll-margin-top: 5rem;
}

/* ----- Mobile navbar polish --------------------------------------------- */
/* The default Bootstrap toggler has no visible label and a faint focus ring.
   Below the lg breakpoint we (1) attach a "Menu" label to the toggler via a
   ::after pseudo-element so the affordance is obvious without editing 29
   pages of markup, (2) give it a real focus ring, (3) animate the collapse,
   and (4) lay the menu out as full-width text links followed by a divider
   and a paired CTA + Search row -- two visual zones (browse vs. act) instead
   of a top-heavy stack of mismatched shapes. */
@media (max-width: 991.98px) {
  /* Keep the brand and the trailing search/theme/menu pills on a single row
     even on narrow iPhones. Bootstrap's default flex-wrap on .navbar will
     drop the action cluster to a second line once the SVG logo's intrinsic
     width plus the .navbar-brand right margin pushes total content past the
     viewport; pinning nowrap and letting the brand shrink keeps the header
     compact. The SVG logo itself scales via max-width:100% on .site-logo. */
  nav.navbar > .container {
    flex-wrap: nowrap;
    gap: 0.5rem;
    position: relative;
  }
  nav.navbar > .container > .navbar-brand {
    min-width: 0;
    flex: 0 1 auto;
    margin-right: 0;
  }
  nav.navbar > .container > .navbar-toggler {
    flex-shrink: 0;
  }

  /* The collapse is a flex sibling of the brand/toggler, so with the
     nowrap above it would otherwise share their row when opened -- the
     menu items would render inline to the right of the toggle instead of
     dropping below as a drawer. Pull it out of the flex flow and anchor
     it to the navbar so it overlays the page content. */
  nav.navbar > .container > .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1030;
    background: var(--bs-dark, #212529);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    padding: 0.75rem 0;
    max-height: calc(100vh - 100%);
    overflow-y: auto;
  }

  .navbar-toggler {
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

  .navbar-toggler::after {
    content: "Menu";
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    color: rgba(255, 255, 255, 0.92);
  }

  .navbar-toggler[aria-expanded="true"]::after {
    content: "Close";
  }

  .navbar-toggler:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-amber-rgb), 0.45);
    outline: none;
  }

  /* Replace Bootstrap's static SVG icon with CSS-drawn bars so the
     hamburger can animate to an X when the menu opens. The middle bar
     is the .navbar-toggler-icon element itself; the two outer bars are
     drawn as box-shadow clones so we don't need any extra markup. */
  .navbar-toggler .navbar-toggler-icon {
    background-image: none;
    width: 1.25rem;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.92);
    position: relative;
    transition: background-color 0.15s ease;
  }

  .navbar-toggler .navbar-toggler-icon::before,
  .navbar-toggler .navbar-toggler-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.92);
    transition: transform 0.2s ease, top 0.2s ease;
  }

  .navbar-toggler .navbar-toggler-icon::before { top: -6px; }
  .navbar-toggler .navbar-toggler-icon::after  { top: 6px; }

  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background-color: transparent;
  }

  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
    top: 0;
    transform: rotate(45deg);
  }

  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
    top: 0;
    transform: rotate(-45deg);
  }

  .navbar-collapse.collapsing,
  .navbar-collapse.show {
    animation: navbarSlideDown 0.18s ease-out;
  }

  @keyframes navbarSlideDown {
    from { opacity: 0; transform: translateY(-0.5rem); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Wrap the menu items so the trailing CTA + Search pills can share one
     row while plain text links remain stacked above them. Force the ul to
     fill the absolutely-positioned drawer (cancel Bootstrap's ms-auto,
     which on desktop right-aligns the nav inside the navbar but in the
     mobile drawer would otherwise shrink the ul to content-width and pin
     every item to the right edge). */
  .navbar-nav {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 0 1rem;
    column-gap: 0.6rem;
    row-gap: 0;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* Text links (and the Dashboard link when signed in) take a full row. */
  .navbar-nav > .nav-item:not(.nav-cta):not(.nav-search):not(.nav-theme) {
    flex: 0 0 100%;
  }

  /* The ul now supplies the side indent, so links drop their horizontal
     padding -- this also keeps every label flush to the same left edge.
     A transparent left border reserves space for the hover/active accent
     so the label doesn't shift horizontally when the bar appears. */
  .navbar-nav .nav-link:not(.nav-search-link) {
    padding: 0.6rem 0 0.6rem 0.75rem;
    border-left: 3px solid transparent;
    margin-left: -0.75rem;
  }

  .navbar-nav .nav-link:not(.nav-search-link):hover,
  .navbar-nav .nav-link:not(.nav-search-link):focus-visible,
  .navbar-nav .nav-link:not(.nav-search-link).active,
  .navbar-nav .nav-link:not(.nav-search-link)[aria-current="page"] {
    border-left-color: var(--brand-amber);
  }

  /* Hairline rule between the navigation links and the action pills. */
  .navbar-nav > .nav-actions-divider {
    flex: 0 0 100%;
    height: 1px;
    margin: 0.5rem 0;
    background: rgba(255, 255, 255, 0.1);
  }

  /* CTA: shrink to a content-width pill so it matches the Search pill
     shape, and let it sit on the same flex row as Search and the theme
     toggle (which moved out of the header strip on mobile). */
  .navbar-nav > .nav-item.nav-cta,
  .navbar-nav > .nav-item.nav-search,
  .navbar-nav > .nav-item.nav-theme {
    flex: 0 0 auto;
    align-self: center;
  }

  /* The "press /" kbd hint inside the Ask KnowBot pill is desktop-only --
     there's no slash key on touch keyboards, so it's noise on mobile. */
  .navbar-nav .nav-search-link__kbd {
    display: none;
  }

  /* Force identical box geometry on both pills so they share a baseline.
     Without this the .btn inherits Bootstrap's line-height:1.5 while the
     search pill runs at line-height:1 -- the heights end up matching
     (min-height:44px) but the internal content sits at different y, so
     they read as offset. */
  .navbar-nav .nav-cta .btn,
  .navbar-nav .nav-link.nav-search-link {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    min-height: 44px;
    padding: 0 1rem;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1;
    border-radius: 999px;
    width: auto;
  }
}

/* Mobile-narrow (≤400px) tweak: the action row in the open drawer carries
   four pills (Search, Theme, Log in, Join free); on 360px viewports their
   summed width plus gaps brushes against the row edge. Drop the "Ask
   SiteSeeker" text label so the search reads as just an icon pill; the
   aria-label still announces the full intent for screen readers. The
   pill also tightens its horizontal padding so the four-item row clears
   the container with margin to spare. */
@media (max-width: 400px) {
  .navbar-nav .nav-search-link__label {
    display: none;
  }
  .navbar-nav .nav-link.nav-search-link {
    padding: 0 0.65rem;
    gap: 0;
  }
}

/* ── P1 a11y additions ─────────────────────────────────────────────────── */
/* Reduced-motion: cover every animation declared in this file so vestibular-
   sensitive users don't see infinite spinners or slide-ins. */
@media (prefers-reduced-motion: reduce) {
  .global-loading-overlay__spinner,
  .pwa-install-cta__icon-spinner {
    animation: none;
    border-top-color: rgba(255, 255, 255, 0.6);
  }
  .navbar-collapse.show,
  .navbar-collapse.collapsing {
    animation: none;
  }
}

/* Dark-mode form inputs: Bootstrap's default light input chrome is invisible
   on our dark surfaces. Give inputs explicit borders, background, and text. */
:root[data-bs-theme="dark"] .form-control,
:root[data-bs-theme="dark"] .form-select,
:root[data-bs-theme="dark"] .form-control[readonly] {
  background-color: rgba(15, 23, 42, 0.65);
  border-color: rgba(148, 163, 184, 0.35);
  color: #f1f5f9;
}

:root[data-bs-theme="dark"] .form-control::placeholder {
  color: rgba(226, 232, 240, 0.55);
}

:root[data-bs-theme="dark"] .form-control:focus,
:root[data-bs-theme="dark"] .form-select:focus {
  background-color: rgba(15, 23, 42, 0.85);
  color: #f8fafc;
  border-color: var(--brand-amber);
}

:root[data-bs-theme="dark"] .form-check-input {
  background-color: rgba(15, 23, 42, 0.65);
  border-color: rgba(148, 163, 184, 0.45);
}

:root[data-bs-theme="dark"] .form-check-input:checked {
  background-color: var(--brand-amber, #b45309);
  border-color: var(--brand-amber, #b45309);
}

/* Forced-colors (Windows High Contrast): restore system colors and ensure
   borders remain visible where we relied on custom colors for affordances. */
@media (forced-colors: active) {
  .btn,
  .form-control,
  .form-select,
  .nav-link,
  .skip-link,
  .back-to-top-button,
  .cookie-consent-btn--accept,
  .cookie-consent-btn--decline,
  .cookie-consent-btn--customize,
  .cookie-consent-btn--save {
    border: 1px solid CanvasText;
    forced-color-adjust: none;
    background: ButtonFace;
    color: ButtonText;
  }
  .btn:focus-visible,
  .form-control:focus,
  .form-select:focus,
  .nav-link:focus-visible,
  a:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
  .global-loading-overlay__spinner {
    border-color: CanvasText;
    border-top-color: Highlight;
  }
}

/* Narrow-viewport refinements (iPhone SE / ~360-380px wide). Existing
   breakpoints at 575.98px cover phones broadly; this block tightens padding,
   logo size, and headings further so content does not crush at <=380px. */
@media (max-width: 380px) {
  .site-logo {
    max-height: 28px;
  }

  /* On the narrowest phones the "Menu" text label inside the toggle costs
     ~50px that the logo needs more. Drop it to icon-only; the hamburger and
     aria-label still communicate the affordance. */
  .navbar-toggler::after {
    content: none;
  }
  .navbar-toggler {
    padding: 0.5rem 0.6rem;
    gap: 0;
  }

  .hero-panel,
  .hero-panel--compact {
    padding: 1.25rem;
    border-radius: var(--radius-xl);
  }

  .hero-panel h1.display-5,
  .hero-panel .display-5 {
    font-size: 1.45rem;
    line-height: 1.18;
  }

  .hero-panel .lead {
    font-size: 0.95rem;
  }

  .container,
  .container-fluid {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }

  .content-panel,
  .feature-card,
  .faq-card,
  .stat-card {
    padding: 1rem;
  }

  /* Stack adjacent action buttons that share a flex row so they get full
     width and a 44px tap target instead of squeezing side-by-side. */
  .hero-panel .d-flex.flex-sm-row,
  .hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .hero-panel .d-flex.flex-sm-row > .btn,
  .hero-actions > .btn {
    width: 100%;
  }
}

/* ── Desktop nav: dropdowns, mega-menu, sticky-shrink ─────────────────── */
@media (min-width: 992px) {
  /* Sticky-shrink: when the page is scrolled, the nav-scroll.js helper adds
     .is-scrolled to the sticky navbar so the logo scales down. The navbar
     itself is pinned to its full-size min-height — because the navbar is
     position: sticky, animating its height would reflow the document below
     and cause the page content to slide as the user scrolls past the
     threshold. Locking min-height keeps the box stable; only the logo
     telegraphs scroll state. */
  nav.navbar.sticky-top {
    min-height: 66px;
  }
  nav.navbar.sticky-top .site-logo {
    transition: height 0.18s ease;
  }
  nav.navbar.sticky-top.is-scrolled .site-logo {
    height: 32px;
  }

  /* Dark dropdown surface shared by Tools mega-menu and Learn menu. */
  .navbar-dark .navbar-nav .dropdown-menu {
    background: #2a241d;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.35);
    margin-top: 0.25rem;
    padding: 0.5rem;
  }

  /* Learn dropdown: standard vertical list. */
  .nav-learn-menu .dropdown-item {
    color: var(--nav-on-dark-text);
    border-radius: 0.4rem;
    padding: 0.45rem 0.75rem;
  }
  .nav-learn-menu .dropdown-item:hover,
  .nav-learn-menu .dropdown-item:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
  }
  .nav-learn-menu .dropdown-item.active,
  .nav-learn-menu .dropdown-item[aria-current="page"] {
    background: rgba(var(--brand-amber-rgb), 0.18);
    color: #ffffff;
    box-shadow: inset 2px 0 0 var(--brand-amber);
  }

  /* Tools mega-menu: 2-column grid with title + description per item. */
  .nav-mega-menu {
    min-width: 480px;
    padding: 1rem;
  }
  .nav-mega-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem;
  }
  .nav-mega-item {
    display: block;
    padding: 0.65rem 0.75rem;
    border-radius: 0.5rem;
    color: var(--nav-on-dark-text);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  .nav-mega-item:hover,
  .nav-mega-item:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    text-decoration: none;
  }
  .nav-mega-item.active,
  .nav-mega-item[aria-current="page"] {
    background: rgba(var(--brand-amber-rgb), 0.18);
    color: #ffffff;
    box-shadow: inset 2px 0 0 var(--brand-amber);
    text-decoration: none;
  }
  .nav-mega-item__title {
    display: block;
    font-weight: 600;
    color: #ffffff;
  }
  .nav-mega-item__desc {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.62);
  }
  .nav-mega-footer {
    display: block;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem 0.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--brand-amber);
    text-align: right;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
  }
  .nav-mega-footer:hover,
  .nav-mega-footer:focus-visible {
    color: var(--brand-amber);
    text-decoration: underline;
  }

  /* When the active page lives inside a dropdown, tint the toggle so the
     user still gets a "you are here" cue at the top level. Relies on :has()
     which is widely supported in evergreen browsers; non-supporting
     browsers degrade to no parent highlight, which is acceptable. */
  .navbar-nav .nav-item.dropdown:has(.dropdown-item.active) > .nav-link,
  .navbar-nav .nav-item.dropdown:has(.dropdown-item[aria-current="page"]) > .nav-link,
  .navbar-nav .nav-item.dropdown:has(.nav-mega-item.active) > .nav-link,
  .navbar-nav .nav-item.dropdown:has(.nav-mega-item[aria-current="page"]) > .nav-link {
    color: #ffffff;
    background: rgba(var(--brand-amber-rgb), 0.14);
    border-radius: 0.4rem;
  }

  /* Chevron caret — replaces Bootstrap's static border-triangle ::after with
     an inline SVG chevron that rotates 180° when the dropdown is open. */
  .navbar-nav .dropdown-toggle::after {
    border: 0;
    width: 0.7em;
    height: 0.7em;
    margin-left: 0.35em;
    vertical-align: middle;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M3.22 5.97a.75.75 0 0 1 1.06 0L8 9.69l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L3.22 7.03a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.75;
    transition: transform 0.18s ease, opacity 0.15s ease;
    transform-origin: center;
  }
  .navbar-nav .dropdown-toggle:hover::after,
  .navbar-nav .dropdown-toggle:focus-visible::after,
  .navbar-nav .dropdown-toggle[aria-expanded="true"]::after {
    opacity: 1;
  }
  .navbar-nav .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
  }
}

/* Search keyboard-shortcut hint. The kbd badge tells keyboard users they
   can press "/" anywhere on the site to jump into KnowBot search. Hidden
   on touch/mobile via pointer-fine guard since the key prompt is
   meaningless without a hardware keyboard. */
.nav-search-link__kbd {
  display: none;
  margin-left: 0.4rem;
  padding: 0.1rem 0.35rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0.25rem;
}
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .nav-search-link__kbd {
    display: inline-flex;
    align-items: center;
  }
}

/* Hairline separator between the navigation cluster (Tools / Learn) and
   the actions cluster (Ask KnowBot / Log in / Join free). The Search
   item is already desktop-only via .d-none.d-lg-flex, so the divider
   only shows where the two clusters are actually visible side by side. */
@media (min-width: 992px) {
  .navbar-nav .nav-item.nav-search {
    position: relative;
    padding-left: 0.85rem;
  }
  .navbar-nav .nav-item.nav-search::before {
    content: "";
    position: absolute;
    left: 0;
    top: 25%;
    bottom: 25%;
    width: 1px;
    background: rgba(255, 255, 255, 0.14);
  }
}

/* Brand-mark hover: subtle bloom on the celestial seal. The seal group
   gets a transform-origin pinned to its visual center so the scale
   doesn't drift the wordmark sideways. Reduced-motion users opt out. */
.site-logo__seal {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.navbar-brand:hover .site-logo__seal,
.navbar-brand:focus-visible .site-logo__seal {
  transform: scale(1.06);
  filter: drop-shadow(0 0 5px rgba(var(--brand-amber-rgb), 0.55));
}
@media (prefers-reduced-motion: reduce) {
  .site-logo__seal,
  .navbar-brand:hover .site-logo__seal,
  .navbar-brand:focus-visible .site-logo__seal {
    transition: none;
    transform: none;
    filter: none;
  }
}
.nav-search-link:hover .nav-search-link__kbd,
.nav-search-link:focus-visible .nav-search-link__kbd {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

/* ── Mobile nav: collapse dropdowns to inline lists ───────────────────── */
@media (max-width: 991.98px) {
  /* The parent .nav-item is display:flex (so nav links stretch vertically
     in the row-wrapped navbar-nav). For dropdowns that flex makes the
     toggle and its menu sit side-by-side; switch to column so the menu
     drops below the toggle the way a sub-list should. */
  .navbar-nav .nav-item.dropdown {
    flex-direction: column;
    align-items: stretch;
  }

  /* Bootstrap floats dropdown-menus by default. Inside the collapsed
     navbar we want them to render as a plain indented sub-list. */
  .navbar-nav .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin: 0 0 0.25rem 0;
    padding: 0 0 0 1rem;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .navbar-nav .dropdown-item {
    color: var(--nav-on-dark-text);
    padding: 0.4rem 0;
    background: transparent;
  }
  .navbar-nav .dropdown-item:hover,
  .navbar-nav .dropdown-item:focus-visible,
  .navbar-nav .dropdown-item.active {
    color: #ffffff;
    background: transparent;
  }

  /* Mega-menu collapses to a single column with descriptions hidden so the
     mobile menu stays scannable. */
  .nav-mega-grid {
    display: block;
  }
  .nav-mega-item {
    display: block;
    padding: 0.4rem 0;
    color: var(--nav-on-dark-text);
    text-decoration: none;
  }
  .nav-mega-item:hover,
  .nav-mega-item:focus-visible {
    color: #ffffff;
  }
  .nav-mega-item__title {
    display: block;
    font-weight: 500;
  }
  .nav-mega-item__desc {
    display: none;
  }
  .nav-mega-footer {
    display: block;
    margin-top: 0.25rem;
    padding: 0.4rem 0;
    color: var(--brand-amber);
    font-weight: 600;
    text-decoration: none;
  }

  /* Pressed feedback while the next page is loading. The mobile menu
     stays open during navigation so the tap doesn't appear to vanish;
     this rule gives the tapped item a clear "you got it, working on it"
     state that survives until the new page paints. */
  .navbar-nav .nav-link.is-tapping,
  .navbar-nav .dropdown-item.is-tapping,
  .navbar-nav .nav-mega-item.is-tapping,
  .navbar-nav .nav-mega-footer.is-tapping {
    background: rgba(251, 191, 36, 0.18);
    color: #ffffff;
    border-radius: 0.25rem;
  }
  .navbar-nav .nav-link.is-tapping::after {
    content: " · loading…";
    font-weight: 400;
    opacity: 0.75;
    font-size: 0.85em;
  }
  .navbar-nav .dropdown-item.is-tapping::after,
  .navbar-nav .nav-mega-item.is-tapping .nav-mega-item__title::after,
  .navbar-nav .nav-mega-footer.is-tapping::after {
    content: " · loading…";
    font-weight: 400;
    opacity: 0.75;
    font-size: 0.85em;
  }
}