/* ============================================================
   LLOS — Common Stylesheet
   Single source of truth for tokens, reset, layout, shell,
   and shared components.

   Drop-in components (tutor, no-copy, moderation) keep their
   own files and are loaded only where needed.
   ============================================================ */


/* ── 1. Design Tokens ──────────────────────────────────────── */

:root {
  /* Core palette — light */
  --llos-hero-band-min-height: 220px;
  --bg:             #f8fafc;
  --surface:        #ffffff;
  --surface-strong: #f1f5f9;
  --text:           #0f172a;
  --muted:          #64748b;
  --accent:         #ea580c;
  --accent-strong:  #c2410c;
  --accent-soft:    #fff7ed;
  --border:         #e2e8f0;
  --border-strong:  #cbd5e1;
  --green:          #16a34a;
  --pink:           #e11d48;

  /* Shell aliases (same palette) */
  --shell-bg:         rgba(255, 255, 255, 0.94);
  --shell-panel:      #ffffff;
  --shell-text:       #0f172a;
  --shell-muted:      #475569;
  --shell-border:     #dbe4f0;
  --shell-accent:     #ea580c;
  --shell-accent-soft:#fff7ed;

  /* [2026-05-13/14] 4-block layout system — single source of truth.
     Block 1 = pattern (body bg, full-bleed).
     Blocks 2/3/4 (menu, breadcrumb, body) all share --llos-content-max so
     vertical edges line up perfectly on every page, every viewport.

     2026-05-14: token is now fluid. Old fixed 1200px felt cramped on
     1920px+ monitors (kids_dictionary cards looked stranded in empty
     whitespace). New value scales with viewport up to 1440px:
       - At 1920px viewport → 1440px content column (4% gutter on each side ≈ 240px combined)
       - At 1440px viewport → 1368px content column (95%)
       - At 1024px viewport →  972px content column (95%)
       - At  375px viewport →  356px content column (95%)
     Symmetric on shrink AND expand. */
  --llos-content-max:    min(95vw, 1440px);
  --llos-content-gutter: clamp(1rem, 4vw, 2rem);

  /* Fluid type scale — premium feel without exploding on 27" monitors
     or pinching on 320px phones. */
  --llos-type-h1:    clamp(1.875rem, 1rem + 3vw, 3rem);
  --llos-type-h2:    clamp(1.5rem,   0.8rem + 2.2vw, 2.25rem);
  --llos-type-h3:    clamp(1.25rem,  0.8rem + 1.5vw, 1.625rem);
  --llos-type-body:  clamp(1rem,     0.95rem + 0.15vw, 1.0625rem);
  --llos-space-section: clamp(2rem,  6vw, 4rem);
  --llos-space-block:   clamp(1rem,  3vw, 1.5rem);

  /* Premium soft shadows + radius scale */
  --llos-radius-sm: 8px;
  --llos-radius:    12px;
  --llos-radius-lg: 18px;
  --llos-shadow-1:  0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --llos-shadow-2:  0 4px 12px rgba(15, 23, 42, 0.05), 0 2px 4px rgba(15, 23, 42, 0.05);
  --llos-shadow-3:  0 14px 32px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.05);
}


/* ── 2. Reset ──────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  /* [2026-05-04] Sticky-footer scaffolding: flex column + min-height:100vh
     lets the footer-wrap below absorb extra vertical space (margin-top:auto)
     so on sparse pages the footer no longer kisses the header. */
  display: flex;
  flex-direction: column;
}

/* [2026-05-10] Mobile-app baseline — site-wide polish so LLOS feels
   native-app-like on phones. All zero-specificity / additive; pages can
   still override. */
:where(html) {
  -webkit-tap-highlight-color: transparent;     /* kill iOS gray flash on tap */
  -webkit-text-size-adjust: 100%;                /* don't auto-grow text on rotate */
  scroll-behavior: smooth;                       /* anchor jumps glide */
  text-rendering: optimizeLegibility;
}
:where(body) {
  overscroll-behavior-y: contain;                /* no rubber-band off page edges */
}
/* iOS Safari zooms in when an input has font-size < 16px on focus. Floor it. */
@media (max-width: 640px) {
  :where(input, select, textarea) { font-size: max(16px, 1em); }
}
/* Safe-area utility classes — opt-in. Add .llos-safe-bottom to any fixed
   bottom bar so it sits above the iPhone home indicator. */
.llos-safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }
.llos-safe-top    { padding-top:    env(safe-area-inset-top,    0); }

/* [2026-05-08] Visual baseline (font / colour / background) wrapped in
   :where(body) so it has ZERO specificity. Pages with their own dark
   themes, custom fonts (Comic Sans, etc.), or gradient backgrounds
   override these effortlessly with a simple `body { ... }` rule.
   Without this trick, llos.css loads after the page's inline <style>
   and wins on equal specificity — turning custom-themed kids games
   into white-on-white invisible text. Closes the Animated Dictionary
   contrast bug. */
:where(body) {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: var(--llos-type-body, 1rem);
  line-height: 1.6;
  /* [2026-05-13] Block 1 of the 4-block layout — full-bleed pattern.
     Two ultra-subtle radial tints (warm amber → cool slate) over the
     bg color. Premium, unobtrusive, never competes with content. */
  background:
    radial-gradient(ellipse 90% 60% at 15% -10%, rgba(234, 88, 12, 0.05), transparent 60%),
    radial-gradient(ellipse 80% 50% at 90% 110%, rgba(15, 23, 42, 0.035), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
}

a {
  color: inherit;
  text-decoration: none;
}

/* [2026-05-07 — row 165] Default hover: NO underline on UI links (nav,
   cards, buttons). Underline still appears on prose links (inside <p>
   and .prose) so body text accessibility is preserved. */
a:hover {
  text-decoration: none;
}

p a,
.prose a,
article a {
  text-decoration: underline;
  text-decoration-color: var(--shell-border, #dbe4f0);
  text-underline-offset: 2px;
}

p a:hover,
.prose a:hover,
article a:hover {
  text-decoration-color: currentColor;
}

img, svg, video, iframe {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Tables: keep them from overflowing narrow viewports */
table {
  max-width: 100%;
  border-collapse: collapse;
}

/* [2026-05-07] iOS Safari zooms on input focus when font-size < 16px.
   Forcing 16px on form controls prevents the unwanted zoom and lets us
   safely drop `user-scalable=no` on the viewport meta (a11y SC 1.4.4). */
input,
select,
textarea {
  font-size: max(16px, 1rem);
}

/* [2026-05-07 — responsive viewport sweep] Defensive defaults that catch
   the most common narrow-screen breakage across LLOS pages: */

/* Long unbroken strings (URLs, code, Hindi/Devanagari words without
   conventional break points) should wrap rather than overflow. */
body, .llos-shell-header, .llos-shell-footer-wrap {
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

/* Flex children default to min-width:auto, which causes overflow when
   content exceeds parent. Force min-width:0 so children honor the parent
   width. Targeted to flex containers we control. */
.llos-shell-inner > *,
.llos-shell-footer-inner > *,
.llos-shell-footer-grid > * {
  min-width: 0;
}

/* Pre/code blocks should scroll horizontally rather than blow out the
   viewport. */
pre, code {
  max-width: 100%;
  overflow-x: auto;
}

/* Hero sections often hard-code padding that pinches narrow viewports.
   This default lets pages opt-in to breathing-room scaling. Pages keep
   their own padding; this only kicks in when they reach for the helper. */
.llos-hero-pad {
  padding-inline: clamp(1rem, 4vw, 3rem);
  padding-block: clamp(1.5rem, 6vw, 4rem);
}

/* [2026-05-13] Single canonical .llos-container — Blocks 2/3/4 of the
   4-block layout (menu, breadcrumb, body) all use this. One source of
   truth. The duplicate definition that lived under "Layout" has been
   removed; everything resolves to --llos-content-max (1200px). */
.llos-container {
  width: 100%;
  max-width: var(--llos-content-max);
  margin-inline: auto;
  padding-inline: var(--llos-content-gutter);
}

/* [2026-05-14 v2] Rule 0 STRICT — universal hero framing.
   The hero ITSELF must stay inside the header column, not just its
   children. Previously the gradient bled full-viewport while only the
   inner content was constrained — that violated Rule 0 (nothing in body
   exceeds the header frame). Now .hero is a contained card-like shell
   matching the menu + body column exactly. */
.hero,
html body .hero {
  max-width: var(--llos-content-max, 1440px) !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
  border-radius: 24px !important;
  overflow: hidden !important;
}

.hero > *,
html body .hero > * {
  max-width: 100% !important;
  margin-inline: auto !important;
  padding-inline: 1rem !important;
  box-sizing: border-box !important;
  /* DO NOT add `width: 100%` here — that stretches small fixed-width
     children (mascots, badges, icons) to fill the container. Block-level
     children naturally fill to max-width; small fixed-width children
     keep their authored size. */
}

/* [2026-05-14] Bulletproof: known hero "media" elements (mascots, journey
   cards, side panels) must NEVER exceed their authored size, regardless of
   any other CSS that might try to stretch them. Caps applied per class and
   also globally to any direct hero child that has the visual signature of a
   small media element. */
.hero .hero-mascot,
.hero .hero-icon,
.hero .hero-illustration,
.hero .hero-avatar,
html body .hero > .hero-mascot {
  width: clamp(80px, 14vw, 140px) !important;
  height: clamp(80px, 14vw, 140px) !important;
  max-width: 140px !important;
  max-height: 140px !important;
  flex: 0 0 auto !important;
}

.hero .star-gallery-hero,
.hero .hero-journey,
.hero .hero-stats-card,
.hero .hero-side-card {
  max-width: min(420px, 100%) !important;
  flex: 0 1 auto !important;
}

/* Catch-all: any direct .hero child that's an <img>, <svg>, <video>, or has
   a media-marker class shouldn't be stretched by any inherited rule. */
.hero > img,
.hero > svg,
.hero > video,
.hero > picture,
.hero > figure {
  max-width: min(100%, var(--llos-content-max, 1440px)) !important;
  height: auto !important;
}

/* [2026-05-14] Cap Tailwind's `.container` utility to --llos-content-max.
   Reason: Tailwind CDN (cdn.tailwindcss.com) JIT-compiles `.container` with
   responsive max-widths up to 1536px and injects its <style> AFTER any
   inline page CSS — so the page's own `.container { max-width: var(...) }`
   loses the cascade and body content overflows the 1200px shell header.
   Locking with !important here (in llos.css, which loads last via the
   shell-injected <link>) defeats Tailwind's later-loaded rule and enforces
   Rule 0: header is the widest frame. */
.container,
html body .container {
  max-width: var(--llos-content-max) !important;
  margin-inline: auto !important;
}

/* [2026-05-13] Premium mobile-first defaults. Zero-specificity via :where()
   so any page can override without !important.
   - 44×44 tap targets (Apple HIG / WCAG 2.5.5 AAA)
   - Comfortable line-length (60-75ch) on prose
   - Media never escapes its container (defense-in-depth on top of the
     img/svg max-width rule above) */
:where(a, button, [role="button"], input[type="checkbox"], input[type="radio"]) {
  min-height: 44px;
  min-width: 44px;
}
/* Tap-target rule should NOT apply to nav links/icons that need to be inline
   in a flow (otherwise every breadcrumb chevron would stretch to 44px), nor to
   the small home-hero capsule pills — [2026-05-16] quick-links + audience
   filters are deliberately compact pills, not 44px touch targets. */
:where(nav a, .llos-shell-nav a, .breadcrumbs a, p a, li a, .llos-shell-footer a,
       #homeQuickLinks a, .audience-pill) {
  min-height: 0;
  min-width: 0;
}

:where(p, li, blockquote, .prose) {
  max-width: 75ch;
}

/* Defense-in-depth — anything that could carry an image escapes its column
   on overflow. img/svg/video/iframe already have max-width:100%; this catches
   inline-style background-image divs that can blow out a row on phones. */
:where([style*="background-image"]) {
  background-size: cover;
  background-position: center;
}

/* [2026-05-13] Optional helper for sections that want to *break out* of the
   1200 column to full viewport width (e.g. a hero banner with edge-to-edge
   image). Use sparingly. */
.llos-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* Vertical rhythm utility — children get consistent gap, eliminates the
   "stack of mismatched margin-tops" inconsistency between pages. */
.llos-stack > * + * {
  margin-top: var(--llos-space-block);
}

/* [2026-05-07] Sub-400px narrow-phone safeguard. Catches the most common
   320–375px breakage patterns: oversized hero text, edge-pinching padding,
   and grid items that don't reflow to single-column. Pages can still
   override per-element via inline styles or specific selectors. */
@media (max-width: 399px) {
  /* Hero h1 / h2 should never exceed ~2rem on phones */
  h1 { font-size: clamp(1.5rem, 7vw, 2rem); line-height: 1.2; }
  h2 { font-size: clamp(1.25rem, 6vw, 1.625rem); line-height: 1.25; }
  /* Default body padding for sections (only applies to elements that
     don't have their own padding explicitly set via Tailwind / inline) */
  section:not([class*="p-"]):not([style*="padding"]) {
    padding-inline: 1rem;
  }
}

/* [2026-05-07] Mid-phone (400–640px) safeguard for hero h1 — prevents
   the 8xl/7xl/6xl Tailwind classes from blowing through the viewport. */
@media (min-width: 400px) and (max-width: 640px) {
  h1.text-8xl, h1.text-7xl, h1.text-6xl {
    font-size: clamp(2rem, 10vw, 3rem);
    line-height: 1.15;
  }
}


/* ── 3. Layout ─────────────────────────────────────────────── */

/* [2026-05-13] Duplicate .llos-container removed — canonical definition
   lives above at the design-tokens layer (1200px). Section padding now
   uses the unified gutter token so vertical edges align across pages. */

.llos-section {
  padding-block: var(--llos-space-section);
  padding-inline: var(--llos-content-gutter);
}

.llos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}


/* ── 4. Buttons ────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 0.75rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
  transform: translateY(-1px);
  text-decoration: none;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}

.btn-link {
  background: none;
  padding: 0;
  color: var(--accent);
  align-self: flex-start;
}

.btn-dark {
  background: var(--shell-text);
  color: #fff;
  border-color: var(--shell-text);
}

.btn-dark:hover {
  background: #1e293b;
  border-color: #1e293b;
  color: #fff;
}


/* ── 5. Chips ──────────────────────────────────────────────── */

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  background: var(--surface-strong);
  border: 1px solid var(--border);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  color: var(--text);
  font-size: 0.875rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.chip.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
}


/* ── 6. Cards ──────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.5rem;
}

.card h3 {
  margin: 0 0 0.35rem;
}

.card p {
  margin: 0;
  color: var(--muted);
}

.panel-label {
  color: var(--muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}


/* ── 7. Hero Section ───────────────────────────────────────── */

.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  min-height: var(--llos-hero-band-min-height);
  align-items: center;
  padding: 3rem clamp(1.5rem, 4vw, 4rem);
  background: linear-gradient(180deg, #fff7ed 0%, #f8fafc 60%, #f1f5f9 100%);
  border-bottom: 1px solid var(--border);
}

.hero__content h1 {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  margin: 0 0 0.5rem;
  line-height: 1.1;
}

.hero__content p {
  margin-bottom: 1rem;
  color: var(--muted);
}

.hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
  color: var(--accent);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero__panel {
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.5rem;
  display: grid;
  gap: 1rem;
}


/* ── 8. Search / Connector ─────────────────────────────────── */

.connector {
  display: grid;
  gap: 1rem;
  padding: 2rem clamp(1.5rem, 4vw, 4rem);
  border-bottom: 1px solid var(--border);
}

.connector__search label {
  font-size: 0.85rem;
  margin-bottom: 0.3rem;
  display: block;
  color: var(--muted);
}

.connector__search-input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.25rem;
  display: flex;
  align-items: center;
}

.connector__search-input input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  padding: 0.75rem 1rem;
  font: inherit;
}

.connector__search-input input:focus {
  outline: none;
}

.connector__search-input button {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.2rem;
  padding: 0 0.75rem;
  cursor: pointer;
}

.connector__filters {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1rem 1.25rem;
  display: grid;
  gap: 0.8rem;
}

.connector__label {
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.2em;
}

.connector__filters select {
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  padding: 0.5rem 1rem;
  color: var(--text);
  font: inherit;
}


/* ── 9. Age / Artifact Grid ────────────────────────────────── */

.age-gravity .age-grid {
  margin-top: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
  padding: 1rem;
}

.age-grid div {
  padding: 0.75rem 1rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.03);
}

.section-heading h2 {
  margin-bottom: 0.4rem;
}

.section-heading p {
  margin-top: 0;
  color: var(--muted);
}

.artifact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}

.artifact-card {
  background: var(--surface);
  border-radius: 18px;
  border: 1px solid var(--border);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.artifact-card h3 { margin: 0; }
.artifact-card p  { margin: 0; color: var(--muted); }

.artifact-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.8rem;
}

.artifact-tag {
  font-size: 0.75rem;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  color: var(--muted);
}

.games__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}

.games__list article {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.5rem;
  min-height: 150px;
}

.games__cta {
  margin-top: 2rem;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.5rem;
}


/* ── 10. Shell — Header ────────────────────────────────────── */

body > .llos-shell-header:first-child {
  position: sticky;
  top: 0;
  z-index: 1200;
}

.llos-shell-header {
  background: var(--shell-bg);
  color: var(--shell-text);
  border-bottom: 1px solid rgba(148, 163, 184, 0.24);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.llos-shell-inner {
  /* [2026-04-29] Horizontal padding aligned with .container so the header
     logo / nav / login sit at the same left/right edges as the page body. */
  max-width: var(--llos-content-max);
  margin: 0 auto;
  padding: 13px 1rem 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  position: relative;   /* anchor for absolute drawer */
}
@media (max-width: 1023px) {
  .llos-shell-inner { flex-wrap: nowrap; }   /* keep brand + burger on one row */
}
@media (min-width: 640px) {
  .llos-shell-inner { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
  .llos-shell-inner { padding-left: 2rem; padding-right: 2rem; }
}

.llos-shell-brand-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* [2026-05-14] Shell brand styles HARD-LOCKED with !important on the
   visual properties (color, background, gradient-text overrides).
   Reason: legacy per-page CSS on some hubs (calculators/auto, education,
   role landings) ships rules like `.logo { background: var(--primary-gradient);
   -webkit-text-fill-color: transparent; }` that — even after the server-side
   nav strip — could match an element with class "logo" elsewhere on the page,
   or get re-applied if a future edit reintroduces such an element. The
   !important locks ensure the home-page brand look (dark slate text +
   orange-gradient L badge) renders identically on every shell-managed page,
   regardless of what cascades into .llos-shell-brand. See design-rule 4. */
.llos-shell-brand,
html body .llos-shell-brand {
  color: var(--shell-text) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  text-decoration: none !important;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 1.05rem;
  font-family: Inter, system-ui, sans-serif;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.llos-shell-brand::before,
html body .llos-shell-brand::before {
  /* 2026-05-12 (Pawan, row N19): blue/purple mark didn't gel with the
     cream + light-orange site palette. Switched to amber→orange so the
     badge shares hue with the rest of the UI. Locked with !important
     2026-05-14 to survive per-page cascades. */
  content: "L" !important;
  width: 28px !important;
  height: 28px !important;
  margin-right: 9px !important;
  border-radius: 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #f97316 0%, #c2410c 100%) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 900 !important;
  vertical-align: middle !important;
  box-shadow: 0 4px 10px -2px rgba(194, 65, 12, 0.35) !important;
}

.llos-shell-brand:hover,
html body .llos-shell-brand:hover {
  color: var(--shell-text) !important;
  text-decoration: none !important;
}

.llos-shell-brand-tag {
  display: none;
}

/* ── Burger button (mobile only) ───────────────────────────── */
.llos-shell-burger {
  display: none;       /* hidden on desktop */
  flex-direction: column;
  background: none;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  padding: 9px 8px;
  gap: 4px;
  border-radius: 8px;
  margin-left: auto;   /* push to the far right */
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  order: 99;           /* always last in the flex row */
}
.llos-shell-burger:hover { background: #f1f5f9; border-color: #cbd5e1; }
.llos-shell-burger span {
  width: 18px; height: 2px;
  background: #334155;
  border-radius: 2px;
  transition: all 0.25s ease;
  display: block;
}
.llos-shell-header.is-open .llos-shell-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.llos-shell-header.is-open .llos-shell-burger span:nth-child(2) { opacity: 0; }
.llos-shell-header.is-open .llos-shell-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 1023px) {
  .llos-shell-burger { display: flex; }
}

.llos-shell-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 1 1 560px;
}

/* ── Mobile drawer behaviour ─────────────────────────────────
   Below 1024px the nav is HIDDEN by default. Burger toggles
   .is-open on .llos-shell-header which reveals it as a drawer
   that ABSOLUTELY positions below the header (overlaying content). */
@media (max-width: 1023px) {
  .llos-shell-nav { display: none; }
  .llos-shell-header.is-open .llos-shell-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: #ffffff;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--shell-border, #dbe4f0);
    box-shadow: 0 12px 24px -8px rgba(0,0,0,0.12);
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    z-index: 1100;
  }
  /* Stack nav items vertically when drawer is open */
  .llos-shell-header.is-open .llos-shell-nav-item {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  /* Hide auth Login button (drawer has its own footer) on mobile */
  .llos-shell-header .llos-shell-auth-wrap { display: none; }
  .llos-shell-header.is-open .llos-shell-auth-wrap {
    display: flex;
    width: 100%;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--shell-border, #e2e8f0);
    justify-content: stretch;
  }
  .llos-shell-header.is-open .llos-shell-auth-btn {
    width: 100%;
    padding: 12px;
  }
}

.llos-shell-nav a {
  color: #475569;
  text-decoration: none;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 7px 10px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.01em;
  transition: background-color 0.16s ease, color 0.16s ease;
  white-space: nowrap;
}

.llos-shell-nav a:hover {
  color: #0f172a;
  background: rgba(15, 23, 42, 0.04);
  text-decoration: none;
}
.llos-shell-nav a[aria-current="page"] {
  color: #2563eb;
  background: transparent;
  position: relative;
}
.llos-shell-nav a[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 10px; right: 10px;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%);
  border-radius: 2px;
}

.llos-shell-nav-icon {
  font-size: 0.8125rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  opacity: 0.85;
}
.llos-shell-nav a:hover .llos-shell-nav-icon { opacity: 1; }

.llos-shell-auth-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.llos-shell-auth-btn {
  border: none;
  border-radius: 999px;
  background: #0f172a;
  color: #fff;
  padding: 0.65rem 1.1rem;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
}

.llos-shell-auth-user {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.llos-shell-auth-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--shell-accent-soft);
  color: var(--shell-accent);
  font-size: 0.78rem;
  font-weight: 800;
}

.llos-shell-auth-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.llos-shell-auth-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--shell-text);
}

.llos-shell-auth-link {
  border: none;
  background: transparent;
  padding: 0;
  color: var(--shell-muted);
  font-size: 0.76rem;
  text-align: left;
  cursor: pointer;
}

/* [2026-05-14] Premium auth modal v2 — consumer-style: provider-first with
   RECOMMENDED Google CTA + email/SSO fallbacks. */
.llos-auth-modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.llos-auth-hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.llos-auth-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.50);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.llos-auth-panel {
  position: relative;
  width: min(100%, 32rem);
  max-height: min(76vh, 42rem);
  background: #fffdf9;
  border: 1px solid #f1d4bc;
  border-radius: 0.55rem;
  box-shadow: 0 24px 64px rgba(152, 76, 16, 0.12);
  padding: 0;
  overflow: hidden;
}

.llos-auth-hero {
  padding: 1rem 1.1rem 0.8rem;
  background:
    radial-gradient(circle at top right, rgba(251, 191, 36, 0.16), transparent 28%),
    linear-gradient(180deg, #fff6ea 0%, #fffdf8 84%);
  border-bottom: 1px solid #f3dcc7;
}

.llos-auth-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.llos-auth-eyebrow {
  display: block;
  color: var(--shell-accent);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.llos-auth-header h2 {
  margin: 0;
  font-size: 1.28rem;
  line-height: 1.1;
}

.llos-auth-icon-btn {
  border: 1px solid #fb923c;
  background: #ffffff;
  color: #0f172a;
  border-radius: 0.35rem;
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
  cursor: pointer;
}

.llos-auth-subtitle {
  margin: 0.45rem 0 0.65rem;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.llos-auth-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.llos-auth-step {
  display: inline-flex;
  align-items: center;
  border-radius: 0.2rem;
  border: 1px solid #fb923c;
  background: #ffffff;
  color: #0f172a;
  padding: 0.28rem 0.58rem;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.llos-auth-form {
  display: grid;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem 1rem;
  overflow: auto;
}

.llos-auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
  padding: 0.7rem 1.1rem 0;
}

.llos-auth-tab {
  border: 1px solid #fb923c;
  border-radius: 0.25rem;
  background: #ffffff;
  color: #0f172a;
  padding: 0.5rem 0.75rem;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.llos-auth-tab.is-active {
  background: #fb923c;
  border-color: #fb923c;
  color: #0f172a;
  box-shadow: inset 0 -2px 0 #0f172a;
}

.llos-auth-pane {
  display: none;
  gap: 0.75rem;
}

.llos-auth-pane.is-active {
  display: grid;
}

.llos-auth-pane-otp {
  gap: 0.6rem;
}

.llos-auth-field-grid {
  display: grid;
  gap: 0.65rem;
}

.llos-auth-identity-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.95fr);
  align-items: end;
}

.llos-auth-form label {
  display: grid;
  gap: 0.28rem;
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.llos-auth-optional {
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  font-size: 0.72rem;
}

.llos-auth-form input {
  width: 100%;
  border: 1px solid #fb923c;
  border-radius: 0.2rem;
  background: #ffffff;
  padding: 0.68rem 0.82rem;
  font-size: 0.88rem;
  color: var(--text);
}

.llos-auth-form input:focus {
  outline: none;
  border-color: #0f172a;
  box-shadow: 0 0 0 4px #fb923c;
  background: #fff;
}

.llos-auth-actions {
  display: flex;
}

.llos-auth-submit {
  border: none;
  border-radius: 0.22rem;
  background: #0f172a;
  color: #fff;
  padding: 0.72rem 0.9rem;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
}

.llos-auth-submit:hover {
  background: #1e293b;
}

.llos-auth-secondary {
  background: #fb923c;
  color: #0f172a;
  border: 1px solid #fb923c;
}

.llos-auth-secondary:hover {
  background: #f97316;
}

.llos-auth-code-card {
  display: grid;
  gap: 0.5rem;
  padding: 0.7rem;
  border: 1px solid #fb923c;
  border-radius: 0.28rem;
  background: #ffffff;
}

.llos-auth-code-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.75rem;
}

.llos-auth-code-copy {
  display: grid;
  gap: 0.22rem;
}

.llos-auth-code-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.llos-auth-code-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.llos-auth-code-input input {
  letter-spacing: 0.18em;
  text-align: center;
  font-weight: 800;
}

.llos-auth-compact-submit {
  align-self: center;
  white-space: nowrap;
  padding-left: 0.8rem;
  padding-right: 0.8rem;
}

.llos-auth-provider-block {
  display: grid;
  gap: 0.85rem;
}

.llos-auth-provider-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.llos-auth-providers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
}

.llos-auth-providers button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 1px solid #fb923c;
  border-radius: 0.2rem;
  background: #ffffff;
  color: var(--text);
  padding: 0.62rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.llos-auth-providers button i {
  font-size: 0.9rem;
}

.llos-auth-providers button span {
  line-height: 1;
}

.llos-auth-providers button:hover {
  border-color: #f97316;
  background: #fff7ed;
  transform: translateY(-1px);
}

.llos-auth-social-note {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.45;
  padding: 0.7rem 0.8rem;
  border-radius: 0.22rem;
  background: #ffffff;
  border: 1px solid #fb923c;
}

.llos-auth-status {
  min-height: 1.25rem;
  margin: 0 1.1rem 1rem;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

@media (max-width: 640px) {
  .llos-auth-panel {
    width: min(100%, 100%);
    max-height: 82vh;
    border-radius: 0.4rem;
  }

  .llos-auth-hero,
  .llos-auth-form {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .llos-auth-status {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .llos-auth-identity-grid,
  .llos-auth-code-head {
    grid-template-columns: 1fr;
    display: grid;
  }

  .llos-auth-compact-submit {
    width: 100%;
  }

  .llos-auth-providers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .llos-auth-steps {
    display: none;
  }
}


/* ── 11. Shell — Context Row ───────────────────────────────── */

.llos-shell-context-row {
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(248, 250, 252, 0.82);
}

.llos-shell-context-inner {
  max-width: var(--llos-content-max);
  margin: 0 auto;
  padding: 9px 18px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.llos-shell-context-label {
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.llos-shell-context-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.llos-shell-context-career {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex: 1 1 720px;
  flex-wrap: wrap;
  margin-left: auto;
}

.llos-shell-context-nav a,
.llos-shell-context-nav button {
  text-decoration: none;
  color: #475569;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

.llos-shell-context-nav a:hover,
.llos-shell-context-nav button:hover {
  color: var(--shell-accent);
  background: var(--shell-accent-soft);
  border-color: #fdba74;
  text-decoration: none;
}

.llos-shell-context-nav .llos-shell-context-cta,
.llos-shell-context-nav button.llos-shell-context-cta {
  color: #fff;
  background: #0f172a;
  border-color: #0f172a;
}

.llos-shell-context-nav .llos-shell-context-cta:hover,
.llos-shell-context-nav button.llos-shell-context-cta:hover {
  background: #1e293b;
  border-color: #1e293b;
  color: #fff;
}

.llos-shell-context-nav button.llos-shell-context-lang {
  min-width: 42px;
}

.llos-shell-context-nav button.llos-shell-context-lang.active,
.llos-shell-context-toggle.active {
  color: var(--shell-accent);
  background: var(--shell-accent-soft);
  border-color: #fdba74;
}

.llos-shell-context-toggle {
  color: #475569;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.82rem;
  font-weight: 700;
}

.llos-shell-hero-tools {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.llos-shell-hero-search {
  position: relative;
  width: min(680px, 100%);
}

.llos-shell-hero-search svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: #94a3b8;
  pointer-events: none;
}

.llos-shell-hero-search input {
  width: 100%;
  padding: 12px 16px 12px 42px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.llos-shell-hero-search input:focus {
  border-color: #fdba74;
  box-shadow: 0 0 0 4px rgba(234, 122, 39, 0.12);
}

.llos-shell-hero-search input::placeholder {
  color: #9ca3af;
}

.llos-shell-hero-search .search-results {
  text-align: left;
}


/* ── 12. Shell — Breadcrumbs & Section Nav ─────────────────── */

.llos-shell-breadcrumbs,
nav[aria-label="Breadcrumb"],
.breadcrumbs {
  /* [2026-04-29] Flat breadcrumb on its own line, no card design.
     Sits between shell header and page hero, full-width strip. */
  width: 100%;
  margin: 0;
  /* [2026-04-29] Horizontal padding aligned with .container. */
  padding: 8px 1rem;
  color: #94a3b8;
  font-size: 0.78rem;
  background: transparent;
  border: 0;
}
@media (min-width: 640px) {
  .llos-shell-breadcrumbs,
  nav[aria-label="Breadcrumb"],
  .breadcrumbs { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
  .llos-shell-breadcrumbs,
  nav[aria-label="Breadcrumb"],
  .breadcrumbs { padding-left: 2rem; padding-right: 2rem; }
}

.llos-shell-breadcrumbs {
  position: relative;
}

/* [2026-04-27] Removed the "Page Path" label per client feedback — the
   breadcrumb path is self-explanatory. Empty rule retained as anchor in
   case the same selector is referenced from another stylesheet. */
.llos-shell-breadcrumbs::before {
  content: none;
}

.llos-shell-breadcrumbs ol,
nav[aria-label="Breadcrumb"] ol,
.breadcrumbs ol {
  /* [2026-04-29] Flat list, no card, no rounded corners.
     [2026-05-04] Inner horizontal padding matches .llos-shell-inner so the
     first breadcrumb item aligns vertically with the header logo. The outer
     <nav> centers this <ol> within the same min(90vw,1600px) column the
     shell header uses; without inner padding the breadcrumb text sat 1-2rem
     to the left of the logo. */
  max-width: var(--llos-content-max);
  margin: 0 auto;
  padding: 0 1rem;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  background: transparent;
  border: 0;
}
@media (min-width: 640px) {
  .llos-shell-breadcrumbs ol,
  nav[aria-label="Breadcrumb"] ol,
  .breadcrumbs ol { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
  .llos-shell-breadcrumbs ol,
  nav[aria-label="Breadcrumb"] ol,
  .breadcrumbs ol { padding-left: 2rem; padding-right: 2rem; }
}

.llos-shell-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.llos-shell-breadcrumbs li + li::before {
  content: "/";
  color: #94a3b8;
}

/* [2026-05-20] Mobile breadcrumb: at narrow viewports the row was wrapping
   every li onto its own line ("Home" / "/" / "Inner Growth" / "/" / "Gita"
   stacked vertically) because flex-wrap:wrap + the page's font/spacing
   pushed the ol over the viewport width. Force a single line and let the
   row scroll horizontally if the trail is long. Also smaller font for the
   tighter feel mobile users expect. */
@media (max-width: 768px) {
  .llos-shell-breadcrumbs ol,
  nav[aria-label="Breadcrumb"] ol,
  .breadcrumbs ol {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
    padding: 0.4rem 1rem;
    font-size: 0.8125rem;
    /* hide native scrollbar — the trail is short enough that horizontal scroll
       is rarely needed, and a scrollbar under a breadcrumb looks ugly */
    scrollbar-width: none;
  }
  .llos-shell-breadcrumbs ol::-webkit-scrollbar,
  nav[aria-label="Breadcrumb"] ol::-webkit-scrollbar,
  .breadcrumbs ol::-webkit-scrollbar { display: none; }
  .llos-shell-breadcrumbs li,
  nav[aria-label="Breadcrumb"] li,
  .breadcrumbs li {
    white-space: nowrap;
    flex-shrink: 0;
    gap: 4px;
  }
  .llos-shell-breadcrumbs li + li::before { margin: 0 2px; }
}

.llos-shell-breadcrumbs a,
nav[aria-label="Breadcrumb"] a,
.breadcrumbs a {
  color: var(--shell-accent);
  text-decoration: none;
  font-weight: 600;
}

.llos-shell-breadcrumbs a:hover,
nav[aria-label="Breadcrumb"] a:hover,
.breadcrumbs a:hover {
  text-decoration: underline;
}

.llos-shell-breadcrumbs span[aria-current="page"] {
  color: var(--shell-text);
  font-weight: 700;
}

.llos-shell-section-nav {
  max-width: var(--llos-content-max);
  margin: 0 auto;
  padding: 0 18px;
}

.llos-shell-section-nav-inner {
  background: rgba(248, 250, 252, 0.95);
  border: 1px solid #e2e8f0;
  border-radius: 0 0 16px 16px;
  padding: 14px 16px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  justify-content: space-between;
  flex-wrap: wrap;
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.035);
}

.llos-shell-section-nav-label {
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.llos-shell-section-nav-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.llos-shell-section-nav-links a {
  text-decoration: none;
  color: #334155;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 0.84rem;
  font-weight: 700;
}

.llos-shell-section-nav-links a:hover {
  text-decoration: none;
  color: var(--shell-accent);
  background: var(--shell-accent-soft);
  border-color: #fdba74;
}

.llos-shell-breadcrumbs + .llos-shell-section-nav {
  margin-top: 0;
}

.llos-shell-breadcrumbs + .llos-shell-section-nav .llos-shell-section-nav-inner {
  border-top: 1px dashed #dbe4f0;
}


/* ── 13. Shell — Footer ────────────────────────────────────── */

/* ── FOOTER WRAP: single continuous linear gradient, light → dark ──
   ONE gradient covers the whole region. No radial glows, no per-section
   tints — just a clean vertical fade so everything reads as one slab. */
.llos-shell-footer-wrap {
  /* [2026-05-04] margin-top:auto pairs with body{display:flex;flex-direction:column}
     to absorb extra vertical space on sparse pages so the footer sticks to the
     viewport bottom. On tall pages auto resolves to 0 — no visual change. */
  margin-top: auto;
  padding-top: 96px;        /* fade-in buffer so CTA strip sits in colored zone */
  position: relative;
  /* [2026-05-25] Top-fade gradient: starts at page-white so the footer melts
     out of the page above, deepens through warm cream into the brown zone
     where the CTA strip + link grid sit, then bottoms out in deep ash brown.
     Fine SVG noise overlay adds paper-grain texture across the whole slab. */
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.28  0 0 0 0 0.23  0 0 0 0 0.18  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    linear-gradient(180deg,
      #ffffff 0%,        /* page-white at top — merges seamlessly with page above */
      #f3ede2 6%,        /* whisper of warm cream */
      #c7b89f 14%,       /* warm sand (CTA strip sits here) */
      #8a7a64 28%,       /* warm taupe */
      #6c5e4e 50%,       /* brown body where link grid lives */
      #4a3f33 100%);     /* deep ash brown at the bottom */
  color: #e8dfc7;
}

/* [2026-05-25] MILD variant — same gradient, but shorter top buffer because
   the CTA strip is gone. Used on medium-scroll content pages. */
.llos-shell-footer-wrap--mild { padding-top: 24px; }

/* [2026-05-25] MINOR variant — single horizontal bar under 30 px tall, used
   on game pages where the footer should be unobtrusive. Solid brown (skips
   the gradient — no room for the fade), tight padding, small type. */
.llos-shell-footer-wrap--minor {
  margin-top: auto;
  padding-top: 0;
  background: #5e5142;
  color: #d4c8b1;
  position: relative;
}
.llos-shell-footer--minor {
  border-top: 1px solid rgba(253, 230, 138, 0.14);
  font-size: 0.6875rem;
  line-height: 1.2;
  font-weight: 500;
}
.llos-shell-footer-minor-inner {
  max-width: var(--llos-content-max, 1200px);
  margin: 0 auto;
  padding: 3px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
}
.llos-shell-footer-minor-copy { color: #d4c8b1; }
.llos-shell-footer-minor-nav { display: flex; gap: 14px; flex-shrink: 0; }
.llos-shell-footer-minor-nav a {
  color: #d4c8b1;
  text-decoration: none;
  transition: color 0.15s;
}
.llos-shell-footer-minor-nav a:hover { color: #fbbf24; }
/* Defensive: many pages style bare `nav` (sticky white pill). Strip any
   inherited backgrounds/shadows/positioning from anything INSIDE the wrap
   so the single gradient reads cleanly with no random white panels.
   (Section borders are re-applied below by their own selectors.) */
.llos-shell-footer-wrap nav,
.llos-shell-footer-wrap .llos-shell-footer-grid {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  position: static !important;
  z-index: auto !important;
}

/* ── PRE-FOOTER CTA STRIP ──────────────────────────────────── */
.llos-shell-footer-cta-strip {
  background: transparent;
  color: #f8fafc;
  position: relative;
}
.llos-shell-footer-cta-strip-inner {
  position: relative;
  max-width: var(--llos-content-max);
  margin: 0 auto;
  padding: 28px 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
@media (min-width: 640px) { .llos-shell-footer-cta-strip-inner { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .llos-shell-footer-cta-strip-inner { padding: 32px 2rem; } }
.llos-shell-footer-cta-strip-copy { flex: 1 1 auto; min-width: 240px; }
.llos-shell-footer-cta-strip-eyebrow {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.7);
  margin-bottom: 4px;
}
.llos-shell-footer-cta-strip h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: #f8fafc;
}
@media (min-width: 768px) { .llos-shell-footer-cta-strip h3 { font-size: 1.5rem; } }
.llos-shell-footer-cta-strip-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #f8fafc;
  color: #1e3a8a;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  flex-shrink: 0;
  white-space: nowrap;
}
.llos-shell-footer-cta-strip-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.4);
  color: #1e3a8a;
}
.llos-shell-footer-cta-strip-action svg { transition: transform 0.18s ease; }
.llos-shell-footer-cta-strip-action:hover svg { transform: translateX(3px); }

/* ── MAIN FOOTER ───────────────────────────────────────────── */
.llos-shell-footer,
.site-footer {
  background: transparent;
  color: #cbd5e1;
  margin-top: 0;
  position: relative;
}
.llos-shell-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.875rem;
  line-height: 1.55;
}
/* The .site-footer (legacy class) shouldn't have its own border when inside the wrap */
.llos-shell-footer-wrap .site-footer { border-top: none; }

.llos-shell-footer-inner {
  max-width: var(--llos-content-max);
  margin: 0 auto;
  padding: 56px 1rem 32px;
  display: grid;
  grid-template-columns: minmax(260px, 1.1fr) 2.4fr;
  gap: 56px;
  align-items: flex-start;
}
@media (min-width: 640px) {
  .llos-shell-footer-inner { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
  .llos-shell-footer-inner { padding: 64px 2rem 40px; gap: 72px; }
}
@media (max-width: 880px) {
  .llos-shell-footer-inner { grid-template-columns: 1fr; gap: 40px; padding-top: 40px; }
}

.llos-shell-footer a,
.site-footer a {
  color: #e8dfc7;  /* warm cream — matches the brown wrap */
  text-decoration: none;
}

/* Brand rail */
.llos-shell-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.llos-shell-footer-brand-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  width: fit-content;
}

.llos-shell-footer-logo {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* [2026-05-25] Warm orange gradient — matches the brand orange `L` mark on
     the header. The prior indigo→purple gradient clashed against the brown wrap. */
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  box-shadow: 0 6px 16px -4px rgba(234, 88, 12, 0.55);
}

.llos-shell-footer-wordmark {
  color: #fdf3e7;  /* warm cream */
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.llos-shell-footer-wordmark span { color: #fbbf24; }  /* `.ai` in warm amber */

.llos-shell-footer-copy {
  display: block;
  margin: 0;
  color: #d4c8b1;  /* softened cream */
  font-size: 0.875rem;
  line-height: 1.7;
  max-width: 360px;
}
.llos-shell-footer-copy strong {
  color: #fdf3e7;
  font-weight: 700;
}

/* Socials */
.llos-shell-footer-socials {
  display: flex;
  align-items: center;
  gap: 8px;
}
.llos-shell-footer-socials a,
.llos-shell-footer-socials span {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: rgba(253, 230, 138, 0.05);
  border: 1px solid rgba(253, 230, 138, 0.14);
  color: #d4c8b1;
  transition: all 0.2s ease;
}
.llos-shell-footer-socials a:hover {
  color: #fff;
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px -4px rgba(234, 88, 12, 0.45);
}

/* Status indicator — warmer green that doesn't fight the brown wrap. */
.llos-shell-footer-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(132, 168, 96, 0.12);
  border: 1px solid rgba(132, 168, 96, 0.28);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #b6c98c;
  width: fit-content;
}
.llos-shell-footer-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #84a860;
  box-shadow: 0 0 0 0 rgba(132, 168, 96, 0.6);
  animation: llos-shell-pulse 2.4s ease-in-out infinite;
}
@keyframes llos-shell-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(132, 168, 96, 0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(132, 168, 96, 0); }
}

/* Link grid */
.llos-shell-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 32px 24px;
}

.llos-shell-footer-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-content: start;
}

.llos-shell-footer-heading {
  display: block;
  color: #fbbf24;  /* warm amber — section headings as the warm accent */
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.llos-shell-footer-group a {
  display: inline-block;
  color: #e8dfc7;  /* warm cream */
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.55;
  text-decoration: none;
  transition: color 0.15s, transform 0.15s;
  width: fit-content;
}
.llos-shell-footer-group a:hover,
.llos-shell-footer-legal a:hover,
.llos-shell-footer-brand-row:hover .llos-shell-footer-wordmark,
.llos-shell-footer-brand-row:hover .llos-shell-footer-wordmark span {
  color: #fbbf24;  /* hover: warm amber (was light blue) */
}
.llos-shell-footer-group a:hover { transform: translateX(2px); }

/* ── NEWSLETTER BAND (featured section) ───────────────────── */
.llos-shell-footer-newsletter-band {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent;
}
.llos-shell-footer-newsletter-band-inner {
  max-width: var(--llos-content-max);
  margin: 0 auto;
  padding: 36px 1rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: center;
}
@media (min-width: 640px) { .llos-shell-footer-newsletter-band-inner { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .llos-shell-footer-newsletter-band-inner { padding: 44px 2rem; } }
@media (max-width: 768px) { .llos-shell-footer-newsletter-band-inner { grid-template-columns: 1fr; gap: 24px; padding: 28px 1rem; } }

.llos-shell-footer-newsletter-band-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fbbf24;  /* warm amber — was cold light blue */
  margin-bottom: 8px;
}
.llos-shell-footer-newsletter-band-title {
  margin: 0 0 8px;
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fdf3e7;  /* warm off-white */
  line-height: 1.2;
}
@media (min-width: 768px) { .llos-shell-footer-newsletter-band-title { font-size: 1.875rem; } }
.llos-shell-footer-newsletter-band-sub {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #d4c8b1;  /* softened cream — matches body copy */
  max-width: 480px;
}

/* Newsletter form (used inside band) */
.llos-shell-footer-newsletter {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.llos-shell-footer-newsletter-row {
  display: flex;
  gap: 0;
  background: rgba(46, 38, 32, 0.55);  /* deep brown tint, was slate */
  border: 1px solid rgba(253, 230, 138, 0.14);
  border-radius: 10px;
  padding: 5px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.llos-shell-footer-newsletter-row:focus-within {
  border-color: #fbbf24;
  box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.16);
}
.llos-shell-footer-newsletter-row input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: #fdf3e7;
  font-size: 0.875rem;
  padding: 8px 12px;
  font-family: inherit;
}
.llos-shell-footer-newsletter-row input::placeholder { color: #a8997e; }
.llos-shell-footer-newsletter-row button {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);  /* orange */
  color: white;
  border: none;
  border-radius: 7px;
  padding: 8px 18px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  font-family: inherit;
  white-space: nowrap;
}
.llos-shell-footer-newsletter-row button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -4px rgba(234, 88, 12, 0.55);
}
.llos-shell-footer-newsletter-row button:disabled { opacity: 0.6; cursor: progress; transform: none; }
.llos-shell-footer-newsletter-note {
  display: block;
  font-size: 0.6875rem;
  color: #a8997e;
  min-height: 1em;
  margin-left: 4px;
}

/* ── CONTACT STRIP ────────────────────────────────────────── */
.llos-shell-footer-contact {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: transparent;
}
.llos-shell-footer-contact-inner {
  max-width: var(--llos-content-max);
  margin: 0 auto;
  padding: 28px 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
}
@media (min-width: 640px) { .llos-shell-footer-contact-inner { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .llos-shell-footer-contact-inner { padding: 32px 2rem; gap: 36px; } }

.llos-shell-footer-contact-block {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px;
}
.llos-shell-footer-contact-heading {
  display: block !important;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 8px;
}
.llos-shell-footer-contact-line {
  display: block !important;
  font-size: 0.875rem;
  font-weight: 500;
  color: #e2e8f0;
  text-decoration: none;
  line-height: 1.6;
}
a.llos-shell-footer-contact-line { transition: color 0.15s; }
a.llos-shell-footer-contact-line:hover { color: #93c5fd; }
.llos-shell-footer-flag { font-size: 1rem; margin-right: 4px; }

/* ── BOTTOM META BAR ──────────────────────────────────────── */
.llos-shell-footer-meta {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: transparent;
}
.llos-shell-footer-meta-inner {
  max-width: var(--llos-content-max);
  margin: 0 auto;
  padding: 20px 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
@media (min-width: 640px) { .llos-shell-footer-meta-inner { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .llos-shell-footer-meta-inner { padding: 22px 2rem; } }

.llos-shell-footer-legal {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.llos-shell-footer-legal a {
  color: #cbd5e1;
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s;
}
.llos-shell-footer-legal a:hover { color: #ffffff; }

.llos-shell-footer-section,
.llos-shell-footer-year {
  color: #cbd5e1;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.llos-shell-footer-heart { color: #f43f5e; }

.site-header {
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.site-footer {
  border-top: 1px solid var(--border);
}

/* [2026-05-11] Mobile-minimal global footer.
   The desktop footer carries 5 heavy bands (CTA hero, newsletter, multi-column
   section grid, contact block, meta legal). On phones that stack collapses
   into a long scroll of links the user has to swipe past — and on a 404 it
   makes the page feel like a marketing dump under a tiny error message.
   On screens ≤ 768px we keep only: brand row, socials, and meta (©, privacy,
   terms, sitemap). Everything else is hidden — clean and app-like.
   Also reduce the giant 96px fade-in buffer above the footer. */
@media (max-width: 768px) {
  .llos-shell-footer-wrap {
    padding-top: 28px;        /* was 96px — too much white space on phones */
  }
  .llos-shell-footer-cta-strip,
  .llos-shell-footer-newsletter-band,
  .llos-shell-footer-grid,
  .llos-shell-footer-contact {
    display: none !important;
  }
  /* Tighter spacing for the surviving bands */
  .llos-shell-footer-meta-inner,
  .llos-shell-footer-brand-row {
    padding-top: 14px;
    padding-bottom: 14px;
  }
  /* Don't let the floating home pill cover the legal links — give the meta
     band a little extra bottom padding so the © line clears the FAB. */
  .llos-shell-footer-meta {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── 14. Page Footer ───────────────────────────────────────── */

.footer {
  border-top: 1px solid var(--border);
  padding: 2rem clamp(1.5rem, 4vw, 4rem);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.9rem;
}


/* ── 15. Responsive ────────────────────────────────────────── */

@media (max-width: 720px) {
  .llos-shell-inner,
  .llos-shell-footer-inner,
  .llos-shell-breadcrumbs,
  .llos-shell-section-nav,
  nav[aria-label="Breadcrumb"],
  .breadcrumbs {
    padding-left: 14px;
    padding-right: 14px;
  }

  .llos-shell-nav {
    justify-content: flex-start;
    flex: 1 1 100%;
  }

  .llos-shell-nav a {
    font-size: 0.84rem;
    padding: 6px 10px;
  }

  .llos-shell-brand-wrap {
    width: 100%;
  }

  .llos-shell-context-inner {
    padding-left: 14px;
    padding-right: 14px;
    align-items: flex-start;
  }

  .llos-shell-context-career {
    margin-left: 0;
    justify-content: flex-start;
  }

  .llos-shell-section-nav-inner {
    align-items: flex-start;
  }

  .llos-shell-footer-grid {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }

  .llos-shell-footer-inner {
    padding-top: 32px;
  }

  .llos-shell-footer-meta-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .llos-shell-footer-legal {
    gap: 14px;
  }

  .llos-shell-breadcrumbs::before {
    margin-bottom: 8px;
  }

  .llos-shell-breadcrumbs ol {
    padding: 12px 14px 10px;
  }

  .llos-shell-section-nav-inner {
    padding: 12px 14px 14px;
  }
}

@media (max-width: 600px) {
  .hero {
    padding: 2rem 1rem;
  }

  .connector,
  .llos-section {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .hero__actions {
    flex-direction: column;
  }
}

.llos-shell-breadcrumbs { margin-top: 0; }

/* ──────────────────────────────────────────────────────────────────────────
   [2026-04-27] Megamenu — nested top-nav. Each .llos-shell-nav-item with
   .llos-shell-nav-has-menu opens a panel on hover/focus-within. Trigger
   stays a real <a> (clicking goes to section hub). Pure CSS, no JS.
   On mobile (<760px) the panel collapses to a vertical column under the
   trigger and only opens on focus/click.
   ────────────────────────────────────────────────────────────────────────── */
.llos-shell-nav { position: relative; flex-wrap: wrap; align-items: center; }
.llos-shell-nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.llos-shell-nav-item > .llos-shell-nav-trigger {
  display: inline-flex; align-items: center; gap: 4px;
}
.llos-shell-nav-chevron {
  opacity: 0.55;
  transition: transform 0.15s, opacity 0.15s;
}
.llos-shell-nav-item:hover .llos-shell-nav-chevron,
.llos-shell-nav-item:focus-within .llos-shell-nav-chevron {
  opacity: 1;
  transform: rotate(180deg);
}
.llos-shell-nav-menu {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  min-width: 320px;
  width: max-content;
  max-width: min(960px, calc(100vw - 24px));
  padding: 14px 18px;
  margin-top: 6px;
  background: #ffffff;
  border: 1px solid var(--shell-border, #dbe4f0);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 4px 18px;
  /* Above the sticky header (z=1200) and any page content. The shell-header
     creates its own stacking context due to z-index + sticky, so this z is
     relative to that context. Bumping ensures dropdown wins inside it too. */
  z-index: 2000;
  font-family: 'Inter', system-ui, sans-serif;
}
/* Right-align modifier — JS adds .is-right-aligned to dropdowns near the
   right viewport edge so they don't overflow off-screen. Also fallback CSS:
   the last 3 items default to right-aligned even before JS fires. */
.llos-shell-nav-item:nth-last-child(-n+3) > .llos-shell-nav-menu {
  left: auto;
  right: 0;
}
.llos-shell-nav-menu.is-right-aligned {
  left: auto !important;
  right: 0 !important;
}
.llos-shell-nav-menu.is-left-aligned {
  left: 0 !important;
  right: auto !important;
}
.llos-shell-nav-item:hover > .llos-shell-nav-menu,
.llos-shell-nav-item:focus-within > .llos-shell-nav-menu,
.llos-shell-nav-item.is-open > .llos-shell-nav-menu {
  display: grid;
}
/* Restore the auto/right reset after :hover applies — order matters because
   :hover doesn't override the nth-last-child specificity. The combo selector
   below uses both states so the rules win. */
.llos-shell-nav-item:nth-last-child(-n+3):hover > .llos-shell-nav-menu,
.llos-shell-nav-item:nth-last-child(-n+3):focus-within > .llos-shell-nav-menu,
.llos-shell-nav-item:nth-last-child(-n+3).is-open > .llos-shell-nav-menu {
  display: grid;
  left: auto;
  right: 0;
}
/* Hover bridge so the menu doesn't snap shut when crossing the gap. */
.llos-shell-nav-item:hover > .llos-shell-nav-menu::before,
.llos-shell-nav-item:focus-within > .llos-shell-nav-menu::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -10px;
  height: 10px;
}
.llos-shell-nav-menu-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.llos-shell-nav-menu-heading {
  margin: 4px 0 6px;
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #94a3b8;
  padding: 0 8px;
}
.llos-shell-nav-menu a {
  display: block;
  padding: 6px 8px;
  color: #1e293b;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.12s, color 0.12s, transform 0.12s;
  line-height: 1.4;
}
.llos-shell-nav-menu a:hover,
.llos-shell-nav-menu a:focus-visible {
  background: rgba(37, 99, 235, 0.06);
  color: #2563eb;
  transform: translateX(2px);
}
@media (max-width: 760px) {
  .llos-shell-nav-menu {
    position: static;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    margin-top: 0;
    padding: 6px 8px 8px 28px;
    grid-template-columns: 1fr;
    box-shadow: none;
    border: none;
    background: #f8fafc;
    border-radius: 8px;
    gap: 2px;
  }
  .llos-shell-nav-item { width: 100%; flex-direction: column; align-items: stretch; }
  .llos-shell-nav-item > .llos-shell-nav-trigger { justify-content: space-between; }

  /* Mobile drawer: bigger touch targets + dividers */
  .llos-shell-nav > a,
  .llos-shell-nav-trigger {
    padding: 12px 14px !important;
    font-size: 0.875rem !important;
    border-radius: 8px !important;
  }
  .llos-shell-nav-icon { font-size: 1rem !important; }
  .llos-shell-nav-chevron { width: 12px; height: 12px; opacity: 0.5; }
  .llos-shell-nav-menu-heading {
    margin-top: 8px;
    font-size: 0.625rem;
    color: var(--shell-accent, #ea580c);
  }
  .llos-shell-nav-menu a {
    padding: 9px 10px !important;
    font-size: 0.8125rem !important;
    border-radius: 6px !important;
  }
}

/* [2026-04-28] .container — the canonical centered wrapper.
   Pages built with Bootstrap-style <div class="container"> were rendering
   left-aligned because llos.css had no rule for it. Mirror home page
   pattern: max-width 1440px, auto margins, responsive padding.
   Page-specific stylesheets that load AFTER llos.css can still override. */
.container {
    width: 100%;
    max-width: var(--llos-content-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
}
@media (min-width: 640px) {
    .container { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
    .container { padding-left: 2rem; padding-right: 2rem; }
}

/* [2026-04-29] Portal pages opt OUT of the .hero dark-overlay + white-text
   treatment. Detection via the body[data-portal-slug=…] attribute that all
   portal templates set (teacher, student, designer, professional, seeker,
   writer, etc.). The dark overlay + white text was correct for hub pages
   (career, blog, soothing, etc.) but wrong for portals which already have a
   light gradient with dark text from their own page CSS. */
/* [2026-04-29] Hero opt-out: portal pages and compact-mode pages skip BOTH
   the dark overlay (::before) AND the white-text rule across ALL hero
   variant classes — .hero plus .hero-section / .hero-twilight / .hero-warm
   / .hero-banner / .hero-sunrise / .hero-gradient-mesh / .llos-shell-page-hero.
   Pages with their own intentional dark hero use one of those classes too,
   so without this fix any page using a hero variant gets stuck with our
   dark navy gradient. */
body[data-portal-slug] .hero::before,
body[data-portal-slug] .hero-section::before,
body[data-portal-slug] .hero-twilight::before,
body[data-portal-slug] .hero-warm::before,
body[data-portal-slug] .hero-banner::before,
body[data-portal-slug] .hero-sunrise::before,
body[data-portal-slug] .hero-gradient-mesh::before,
body[data-portal-slug] .llos-shell-page-hero::before,
body[data-shell-mode="compact"] .hero::before,
body[data-shell-mode="compact"] .hero-section::before,
body[data-shell-mode="compact"] .hero-twilight::before,
body[data-shell-mode="compact"] .hero-warm::before,
body[data-shell-mode="compact"] .hero-banner::before,
body[data-shell-mode="compact"] .hero-sunrise::before,
body[data-shell-mode="compact"] .hero-gradient-mesh::before,
body[data-shell-mode="compact"] .llos-shell-page-hero::before { display: none !important; }

body[data-portal-slug] :is(.hero, .hero-section, .hero-twilight, .hero-warm, .hero-banner, .hero-sunrise, .hero-gradient-mesh, .llos-shell-page-hero),
body[data-portal-slug] :is(.hero, .hero-section, .hero-twilight, .hero-warm, .hero-banner, .hero-sunrise, .hero-gradient-mesh, .llos-shell-page-hero) :is(h1, h2, h3, p, li, span),
body[data-shell-mode="compact"] :is(.hero, .hero-section, .hero-twilight, .hero-warm, .hero-banner, .hero-sunrise, .hero-gradient-mesh, .llos-shell-page-hero),
body[data-shell-mode="compact"] :is(.hero, .hero-section, .hero-twilight, .hero-warm, .hero-banner, .hero-sunrise, .hero-gradient-mesh, .llos-shell-page-hero) :is(h1, h2, h3, p, li, span) {
    color: inherit;
    text-shadow: none;
}


/* [2026-04-29] Compact shell mode (Option A) — opt in with
   <body data-shell-mode="compact">. Used for canvas-heavy pages
   (kids_dictionary food-words, etc.) that want minimal chrome but
   still need global navigation. Total chrome ~70px (40 + 30). */
.llos-shell-compact-header {
    position: relative;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 18px;
    /* [2026-05-10] Safe-area-aware padding so the bar clears the iPhone notch /
       Dynamic Island when added to home screen / loaded in standalone mode. */
    padding: 6px 18px;
    padding-top: calc(6px + env(safe-area-inset-top, 0px));
    padding-left: calc(18px + env(safe-area-inset-left, 0px));
    padding-right: calc(18px + env(safe-area-inset-right, 0px));
    min-height: 40px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.llos-shell-compact-home {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #0f172a;
    font-weight: 800;
    flex-shrink: 0;
}
.llos-shell-compact-logo {
    width: 22px;
    height: 22px;
    background: #0f172a;
    color: #fff;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 900;
}
.llos-shell-compact-wordmark { font-size: 14px; }
.llos-shell-compact-wordmark span { color: #2563eb; }
.llos-shell-compact-nav {
    display: flex;
    gap: 18px;
    align-items: center;
    flex: 1;
}
.llos-shell-compact-nav a {
    color: #64748b;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}
.llos-shell-compact-nav a:hover { color: #2563eb; }
.llos-shell-compact-auth {
    background: #0f172a;
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.llos-shell-compact-auth:hover { background: #1e293b; }
.llos-shell-compact-footer {
    position: relative;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 18px;
    height: 30px;
    background: #fff;
    border-top: 1px solid #e2e8f0;
    color: #94a3b8;
    font-size: 11px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.llos-shell-compact-foot-nav {
    display: flex;
    gap: 16px;
}
.llos-shell-compact-foot-nav a {
    color: #94a3b8;
    text-decoration: none;
}
.llos-shell-compact-foot-nav a:hover { color: #2563eb; }
@media (max-width: 600px) {
    .llos-shell-compact-nav a:nth-child(n+3) { display: none; }
    .llos-shell-compact-foot-nav a:nth-child(n+3) { display: none; }
}


/* [2026-04-29] Context options merged into the main header row.
   Override the row-style spacing so the context items sit inline
   between nav and auth instead of in their own band below. */
.llos-shell-context-merged {
    max-width: none;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
    gap: 8px;
    flex: 0 0 auto;
}
.llos-shell-context-merged .llos-shell-context-label {
    /* Save space — the row already shows the page name via breadcrumb. */
    display: none;
}
.llos-shell-context-merged .llos-shell-context-career {
    flex: 0 0 auto;
    margin: 0;
    gap: 8px;
}
.llos-shell-context-merged .llos-shell-context-nav {
    gap: 6px;
}
/* [2026-05-13] Was `@media (max-width: min(90vw, 1600px))` — invalid CSS
   (min() is not allowed in media-query values), so this rule was silently
   ignored by every browser. Fixed to a sane breakpoint matching shell.css
   below-desktop logic. */
@media (max-width: 1023px) {
    /* On smaller screens hide the merged context to keep the global nav
       readable. The page's own native chrome will surface those controls. */
    .llos-shell-context-merged { display: none; }
}


/* [2026-04-29] Auth-block hover dropdown — page-context options
   (PORTAL MODE / EN-HI / Take Quiz / Search / etc.) are now a vertical
   menu that opens on hover/focus of the Login button area. Keeps the
   global nav tight; options surface only when the user reaches for them. */
.llos-shell-auth-wrap.llos-shell-auth-has-dropdown {
    position: relative;
}
.llos-shell-auth-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    max-width: 360px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 1500;
}
.llos-shell-auth-wrap.llos-shell-auth-has-dropdown:hover .llos-shell-auth-dropdown,
.llos-shell-auth-wrap.llos-shell-auth-has-dropdown:focus-within .llos-shell-auth-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.llos-shell-auth-wrap.llos-shell-auth-has-dropdown::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 12px;
    pointer-events: auto;
}
.llos-shell-auth-dropdown-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}
.llos-shell-auth-dropdown-inner .llos-shell-context-label {
    display: block;
    color: #94a3b8;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 8px 10px 4px;
    margin: 0;
}
.llos-shell-auth-dropdown-inner .llos-shell-context-nav,
.llos-shell-auth-dropdown-inner .llos-shell-context-career {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    margin: 0;
    width: 100%;
}
.llos-shell-auth-dropdown-inner .llos-shell-context-nav a,
.llos-shell-auth-dropdown-inner .llos-shell-context-nav button,
.llos-shell-auth-dropdown-inner .llos-shell-context-career a,
.llos-shell-auth-dropdown-inner .llos-shell-context-career button {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
}
.llos-shell-auth-dropdown-inner .llos-shell-context-nav a:hover,
.llos-shell-auth-dropdown-inner .llos-shell-context-nav button:hover,
.llos-shell-auth-dropdown-inner .llos-shell-context-career a:hover,
.llos-shell-auth-dropdown-inner .llos-shell-context-career button:hover {
    background: #f1f5f9;
    color: #0f172a;
}
.llos-shell-auth-dropdown-inner .llos-shell-context-cta {
    background: #0f172a !important;
    color: #fff !important;
    margin-top: 6px;
}
.llos-shell-auth-dropdown-inner .llos-shell-context-cta:hover {
    background: #1e293b !important;
    color: #fff !important;
}




/* ============================================================
   [2026-05-14] HOME-PAGE DESIGN LANGUAGE — APPENDED
   Origin: /assets/styles/home.css (was loaded only on home.php)
   Merged here per user directive: 'home page CSS wins, one common
   CSS for all site, excluding aphorist + creative studio.'
   Because these rules come LAST in the cascade, any selector
   defined here automatically wins over earlier llos.css rules at
   equal specificity. The unified design language now propagates
   to every shell-managed page.
   ============================================================ */

        :root {
            --bg: #faf9f7;
            --surface: #ffffff;
            --text: #1a1a1a;
            --text-muted: #4a4a4a;
            --text-subtle: #7a7a7a;
            --border: #e8e6e3;
            --accent: #ea7a27;
            --accent-soft: #fff7ed;
            --accent-dark: #c2410c;
            --dim-language: #3b82f6;
            --dim-education: #059669;
            --dim-career: #d97706;
            --dim-life: #ec4899;
            --dim-growth: #7c3aed;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg);
            color: var(--text);
            overflow-x: hidden;
        }
        [id] { scroll-margin-top: 80px; }
        .serif { font-family: 'Playfair Display', serif; }
        
        /* Hide scrollbar for carousels */
        .hide-scroll::-webkit-scrollbar { display: none; }
        .hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }
        
        /* Card interactions - Reference pattern with enhanced effects */
        .artifact-card {
            transition: all 0.2s ease;
            position: relative;
            overflow: hidden;
        }
        .artifact-card:active { 
            transform: scale(0.97);
            transition-duration: 0.1s;
        }
        
        @media (min-width: 1024px) {
            .artifact-card:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.1);
            }
            .artifact-card:active {
                transform: translateY(0) scale(0.98);
            }
        }

        /* Coming Soon cards */
        .coming-soon { opacity: 0.55; border-style: dashed !important; pointer-events: none; position: relative; }
        .coming-soon::after { content: 'Coming Soon'; position: absolute; top: 12px; right: 12px; font-size: 10px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; background: none; height: auto; width: auto; opacity: 1; }
        .coming-soon::before { display: none; }

        /* ── Autocomplete Dropdown ─────────────────────────── */
        .search-dropdown {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: white;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            margin-top: 8px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.15);
            max-height: 420px;
            overflow-y: auto;
            z-index: 9999;
        }
        .search-dropdown.active { display: block; }

        .search-item {
            padding: 12px 16px;
            cursor: pointer;
            border-bottom: 1px solid #f1f5f9;
            transition: background 0.15s;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .search-item:hover,
        .search-item.selected { background: #f1f5f9; }
        .search-item:last-child { border-bottom: none; }

        .search-item-icon {
            width: 32px; height: 32px;
            border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            font-size: 12px; font-weight: 700;
            flex-shrink: 0;
        }

        .search-dropdown-footer {
            padding: 10px 16px;
            border-top: 1px solid #e2e8f0;
            text-align: center;
            cursor: pointer;
            color: #3b82f6;
            font-size: 13px;
            font-weight: 600;
            transition: background 0.15s;
        }
        .search-dropdown-footer:hover { background: #f8fafc; }

        /* Hide autocomplete when SERP is active */
        .serp-active .search-dropdown { display: none !important; }

        /* ── SERP Mode: Two-State System ────────────────────── */

        /* In SERP mode: hide hero, all landing sections, footer */
        .serp-active header { display: none !important; }
        .serp-active .serp-results { display: block !important; }
        .serp-active #for-you,
        .serp-active #explore,
        .serp-active #faqs,
        .serp-active #dimensions,
        .serp-active footer,
        .serp-active section:not(.serp-results):not(nav) {
            display: none !important;
        }

        /* In SERP mode: transform nav — show search, hide landing links */
        .serp-active .nav-landing { display: none !important; }
        .serp-active .nav-serp { display: flex !important; }

        /* ── SERP Filter Chips ─────────────────────────────── */
        .serp-chip {
            padding: 6px 14px;
            border-radius: 9999px;
            border: 1px solid #e2e8f0;
            background: white;
            color: #64748b;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s;
            white-space: nowrap;
        }
        .serp-chip:hover {
            border-color: #3b82f6;
            color: #3b82f6;
        }
        .serp-chip.active {
            background: #3b82f6;
            color: white;
            border-color: #3b82f6;
            font-weight: 600;
        }

        /* ── SERP Result Cards ─────────────────────────────── */
        .serp-card {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.9);
            border-radius: 12px;
            padding: 16px;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        .serp-card:hover {
            background: rgba(255, 255, 255, 0.95);
            transform: translateY(-3px);
            box-shadow: 0 8px 24px -4px rgba(59, 130, 246, 0.12);
            border-color: rgba(147, 197, 253, 0.5);
        }
        .serp-card::before {
            content: '';
            position: absolute;
            top: 10px; bottom: 10px; left: 0;
            width: 3px;
            border-radius: 0 3px 3px 0;
            opacity: 0;
            transform: scaleY(0.5);
            transition: all 0.25s;
        }
        .serp-card:hover::before {
            opacity: 1;
            transform: scaleY(1);
        }
        .serp-card[data-cat="Education"]::before { background: linear-gradient(180deg, #22c55e, #16a34a); }
        .serp-card[data-cat="Career"]::before { background: linear-gradient(180deg, #f97316, #ea580c); }
        .serp-card[data-cat="Language"]::before { background: linear-gradient(180deg, #3b82f6, #2563eb); }
        .serp-card[data-cat="Growth"]::before { background: linear-gradient(180deg, #8b5cf6, #7c3aed); }
        .serp-card[data-cat="Life"]::before { background: linear-gradient(180deg, #ec4899, #db2777); }
        .serp-card:active {
            transform: translateY(-1px) scale(0.98);
            transition-duration: 0.1s;
        }

        .serp-card-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
        }
        .serp-card-badge[data-cat="Education"] { background: #dcfce7; color: #166534; }
        .serp-card-badge[data-cat="Career"]    { background: #ffedd5; color: #9a3412; }
        .serp-card-badge[data-cat="Language"]   { background: #dbeafe; color: #1e40af; }
        .serp-card-badge[data-cat="Growth"]     { background: #ede9fe; color: #5b21b6; }
        .serp-card-badge[data-cat="Life"]       { background: #fce7f3; color: #9d174d; }

        .serp-card-title {
            font-weight: 700;
            font-size: 14px;
            color: #1e293b;
            line-height: 1.4;
            margin-bottom: 6px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .serp-card-title mark {
            background: #fef08a;
            padding: 0 2px;
            border-radius: 2px;
        }
        .serp-card-meta {
            font-size: 11px;
            color: #94a3b8;
            margin-top: auto;
        }

        /* ── Suggestion Chips (zero results) ───────────────── */
        .serp-suggest-chip {
            padding: 6px 16px;
            border-radius: 9999px;
            border: 1px solid #e2e8f0;
            background: white;
            color: #3b82f6;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s;
        }
        .serp-suggest-chip:hover {
            background: #3b82f6;
            color: white;
            border-color: #3b82f6;
        }
        
        /* FAQ accordion - Smooth effects */
        .faq-item { 
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            background: white;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            overflow: hidden;
        }
        .faq-item:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            border-color: #cbd5e1;
        }
        .faq-item.active {
            border-color: #3b82f6;
            box-shadow: 0 8px 20px rgba(59, 130, 246, 0.15);
        }
        .faq-button {
            width: 100%;
            padding: 14px 20px;
            text-align: left;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            background: none;
            border: none;
            font-family: inherit;
            transition: all 0.3s;
            position: relative;
        }
        .faq-button::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: #3b82f6;
            opacity: 0;
            transition: opacity 0.3s;
        }
        .faq-item.active .faq-button::before {
            opacity: 1;
        }
        .faq-button:hover {
            background: #f8fafc;
        }
        .faq-question {
            font-weight: 600;
            color: #1e293b;
            font-size: 1rem;
            padding-right: 16px;
            line-height: 1.5;
        }
        .faq-icon {
            flex-shrink: 0;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f1f5f9;
            border-radius: 50%;
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            color: #64748b;
        }
        .faq-item.active .faq-icon {
            transform: rotate(180deg);
            background: #dbeafe;
            color: #3b82f6;
        }
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                        opacity 0.4s ease,
                        padding 0.4s ease;
            opacity: 0;
            padding: 0 20px;
        }
        .faq-item.active .faq-answer {
            max-height: 600px;
            opacity: 1;
            padding: 0 20px 16px 24px;
            border-left: 4px solid transparent;
        }
        .faq-answer-content {
            color: #475569;
            font-size: 0.95rem;
            line-height: 1.7;
            padding-top: 4px;
        }
        .login-modal-hidden {
            opacity: 0;
            pointer-events: none;
        }
        .login-panel-hidden {
            transform: translateY(12px) scale(0.98);
            opacity: 0;
        }