/* ════════════════════════════════════════════════════════════════════
   LAGOS LIGHT — Shared design system for Owo Planner marketing surfaces.
   Specifically Nigerian without ethnographic clichés. Warm white ground,
   deep-navy ink, jollof-red + okra-orange accents, palm-green for growth.
   Tabular figures on by default so Naira amounts always align.
   Used by: index.html, /features, /how-it-works, /about, /academy (body).
   Dashboard stays on shared.css (dark mode is the working-tool aesthetic).
   ════════════════════════════════════════════════════════════════════ */
:root,
html[data-theme="light"] {
  /* ── PALETTE (raw colour values — not used directly in components) ── */
  --color-ground:        #FAFAF7;
  --color-ground-deep:   #F1EFE6;
  --color-ground-paper:  #FFFFFF;
  --color-ink-100:       #0E1B3A;
  --color-ink-200:       rgba(14,27,58,0.78);
  --color-ink-400:       rgba(14,27,58,0.55);
  --color-ink-700:       rgba(14,27,58,0.25);
  --color-ink-900:       rgba(14,27,58,0.10);
  --color-brand-yellow:  #FDE047;       /* product yellow — hero highlight, badge fill */
  /* Per the brand decision: yellow replaces red everywhere. --color-jollof
     and --color-jollof-hover stay named for back-compat, but now resolve to
     amber/yellow values. Every selector previously referencing var(--jollof),
     var(--text-link), or var(--state-danger) now reads as yellow without
     needing per-site sweeps. */
  --color-jollof:        #F2A93B;       /* was red #F2A93B — now amber */
  --color-jollof-hover:  #D89730;       /* was red #D89730 — now darker amber */
  --color-okra:          #F2A93B;       /* secondary — marker underline */
  --color-palm:          #0E4A38;       /* growth — savings, success states */

  /* ── SEMANTIC TOKENS (the layer components consume) ── */
  --surface-bg:          var(--color-ground);          /* page background */
  --surface-elev:        var(--color-ground-deep);     /* recessed sections */
  --surface-card:        var(--color-ground-paper);    /* cards, panels */
  --text-default:        var(--color-ink-100);
  --text-soft:           rgba(14,27,58,0.72);
  --text-muted:          var(--color-ink-400);
  --text-faint:          var(--color-ink-700);
  --text-onBrand:        var(--color-ground);          /* text on jollof or ink */
  --text-on-yellow:      var(--color-ink-100);          /* text on okra / brand-yellow — NEVER flips, yellow always needs dark ink */
  --text-link:           var(--color-jollof);
  --border-subtle:       var(--color-ink-900);
  --border-strong:       rgba(14,27,58,0.20);
  --focus-ring:          var(--color-jollof);
  --state-success:       var(--color-palm);
  --state-warning:       var(--color-okra);
  --state-danger:        var(--color-jollof);
  /* BRAND IDENTITY — yellow (okra) is the primary brand colour, matching the
     dashboard. Jollof red is demoted to the accent role (links, alerts,
     urgency feedback). The semantic layer flips here in one place so every
     downstream component picks up the new identity automatically. */
  --brand-primary:       var(--color-okra);             /* was jollof */
  --brand-accent:        var(--color-jollof);           /* was okra */
  --brand-yellow:        var(--color-brand-yellow);    /* product highlight only */

  /* ── BACK-COMPAT aliases (older selectors still reference these) ── */
  --ground:         var(--surface-bg);
  --ground-deep:    var(--surface-elev);
  --ground-paper:   var(--surface-card);
  --ink:            var(--text-default);
  --ink-soft:       var(--text-soft);
  --ink-quiet:      var(--text-muted);
  --ink-faint:      var(--text-faint);
  --jollof:         var(--brand-primary);
  --jollof-hover:   var(--color-jollof-hover);
  --okra:           var(--brand-accent);
  --palm:           var(--state-success);
  --hairline:       var(--border-subtle);
  --hairline-strong:var(--border-strong);

  /* ── ELEVATION ── two-step shadow scale, navy-tinted ── */
  --shadow-card:    0 1px 2px rgba(14,27,58,0.04), 0 24px 60px -20px rgba(14,27,58,0.18);
  --shadow-card-xl: 0 1px 2px rgba(14,27,58,0.06), 0 40px 80px -30px rgba(14,27,58,0.45);

  /* ── MOTION ── fast, base, slow + the two project eases ── */
  --motion-fast:    150ms;
  --motion-base:    250ms;
  --motion-slow:    400ms;
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);    /* editorial */
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);/* pop-in overshoot */

  /* ── RADII ── two values, max ── */
  --radius-card:    20px;    /* containers, panels */
  --radius-inner:   12px;    /* form fields, inner pills */
  --radius-pill:    100px;   /* buttons, badges */

  /* ── SPACING — base-4, used semantically not literally in this audit ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
}

/* DARK MODE — token flip. Lagos Light becomes "Lagos Midnight":
   deep navy ground, warm-white ink, jollof + okra + palm hold their
   chroma (slightly brightened for AA contrast on dark backgrounds).
   Semantic tokens flip; back-compat aliases remap automatically. */
html[data-theme="dark"] {
  --surface-bg:     #0E1B3A;
  --surface-elev:   #0A1430;
  --surface-card:   #14213E;
  --text-default:   #FAFAF7;
  --text-soft:      rgba(250,250,247,0.78);
  --text-muted:     rgba(250,250,247,0.55);
  --text-faint:     rgba(250,250,247,0.28);
  --text-onBrand:   #0E1B3A;
  --text-on-yellow: #0E1B3A;    /* yellow always needs dark ink, regardless of theme */
  --border-subtle:  rgba(250,250,247,0.10);
  --border-strong:  rgba(250,250,247,0.20);
  /* Yellow across the board — red removed from the dark-mode palette too.
     --brand-accent, --state-danger, --focus-ring, --text-link all collapse
     onto the yellow scale so the brand identity is consistent in dark mode. */
  --brand-primary:  #F4B554;    /* yellow */
  --brand-accent:   #F4B554;    /* was red #F4B554 — now yellow to match primary */
  --state-success:  #4ADE93;
  --state-warning:  #F4B554;
  --state-danger:   #F4B554;    /* was red #F4B554 */
  --focus-ring:     #F4B554;    /* was red #F4B554 */
  --text-link:      #F4B554;    /* was red #F4B554 */

  /* aliases re-resolve through the semantic layer */
  --ground:         var(--surface-bg);
  --ground-deep:    var(--surface-elev);
  --ground-paper:   var(--surface-card);
  --ink:            var(--text-default);
  --ink-soft:       var(--text-soft);
  --ink-quiet:      var(--text-muted);
  --ink-faint:      var(--text-faint);
  --jollof:         var(--brand-primary);
  --jollof-hover:   #F8C57A;    /* was red #F8C57A — now lighter amber */
  --okra:           var(--brand-accent);
  --palm:           var(--state-success);
  --hairline:       var(--border-subtle);
  --hairline-strong:var(--border-strong);

  --shadow-card:    0 1px 2px rgba(0,0,0,0.30), 0 24px 60px -20px rgba(0,0,0,0.55);
  --shadow-card-xl: 0 1px 2px rgba(0,0,0,0.40), 0 40px 80px -30px rgba(0,0,0,0.75);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body {
  background: var(--ground);
  color: var(--ink);
  font-family: 'Geist', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.005em;
  font-feature-settings: "tnum" 1, "lnum" 1, "ss01" 1, "kern" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}
::selection { background: var(--ink); color: var(--ground); }
:focus-visible { outline: 2px solid var(--jollof); outline-offset: 3px; border-radius: 2px; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
img { display: block; max-width: 100%; height: auto; }

.skip-link {
  position: fixed; left: 8px; top: -100px; z-index: 9999;
  background: var(--ink); color: var(--ground); padding: 14px 22px;
  border-radius: 8px; font-size: 14px; font-weight: 600;
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 8px; }

/* ────────── Type scale ──────────
   display-1 | hero h1
   display-2 | section h2
   body-lg   | hero lede
   body      | default body (17/1.6 — set on html/body above)
   body-sm   | secondary copy / card text
   caption   | eyebrows, captions
   mono-label| stat labels, badges, eyebrows
   .tabular  | apply to any element rendering Naira/percent/score amounts */
.display-1 { font-size: clamp(44px, 7vw, 96px); line-height: 0.96; letter-spacing: -0.038em; font-weight: 700; }
.display-2 { font-size: clamp(32px, 4vw, 56px); line-height: 1.04; letter-spacing: -0.025em; font-weight: 600; }
.body-lg   { font-size: 19px; line-height: 1.6;  letter-spacing: -0.005em; }
.body-sm   { font-size: 14px; line-height: 1.55; letter-spacing: -0.003em; color: var(--text-muted); }
.caption   { font-size: 12px; line-height: 1.4;  letter-spacing: 0;        color: var(--text-muted); }
.mono-label{ font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; }
.tabular   { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; }

/* ────────── Animations (keyframes) ────────── */
@keyframes lg-fade-up    { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lg-fade-down  { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lg-pop-in     { from { opacity: 0; transform: scale(0.72); } to { opacity: 1; transform: scale(1); } }
@keyframes lg-clip-rise  { from { transform: translateY(110%); } to { transform: translateY(0); } }
@keyframes lg-marker     { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lg-pulse-dot  { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ────────── Nav ────────── */
.lg-nav {
  position: relative; z-index: 30;
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 32px 0;
  animation: lg-fade-down 0.6s var(--ease-out) both;
}
.lg-logo {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink);
}
/* Logo — /logo.png is authored as warm-white "OWO" shapes on a transparent
   ground (built for the dashboard's dark nav). To render correctly on the
   cream marketing nav we invert it in LIGHT mode → black logo on cream.
   In DARK mode the page nav is dark navy, so the PNG's native white reads
   without any filter. This mirrors the inversion strategy in shared.css
   for the dashboard's `.nav-logo img`. */
.lg-logo-img {
  height: 32px;
  width: auto;
  max-height: 32px;
  max-width: 220px;
  display: block;
  object-fit: contain;
}
:root .lg-logo-img,
html[data-theme="light"] .lg-logo-img {
  filter: invert(1) hue-rotate(180deg) brightness(0.9);
}
html[data-theme="dark"] .lg-logo-img { filter: none; }
.lg-logo > img { max-height: 32px; max-width: 220px; }

/* Theme toggle — pill button with sun/moon icons. Single source of truth:
   reads + writes the `owo_theme` localStorage key shared with the dashboard,
   so flipping the theme on the landing changes it everywhere. */
.lg-theme-toggle {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 100px;
  background: transparent;
  color: var(--ink-soft);
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
  cursor: pointer;
}
.lg-theme-toggle:hover { background: rgba(14,27,58,0.06); color: var(--ink); }
html[data-theme="dark"] .lg-theme-toggle:hover { background: rgba(250,250,247,0.08); }
.lg-theme-toggle svg { width: 18px; height: 18px; }
.lg-theme-toggle .t-sun, .lg-theme-toggle .t-moon { display: none; }
html[data-theme="dark"] .lg-theme-toggle .t-sun { display: block; }
html[data-theme="light"] .lg-theme-toggle .t-moon { display: block; }
html:not([data-theme]) .lg-theme-toggle .t-moon { display: block; }
.lg-nav-links { display: none; align-items: center; gap: 36px; font-size: 14px; font-weight: 500; }
.lg-nav-links a { color: var(--ink-soft); transition: color 0.18s var(--ease-out), transform 0.18s var(--ease-out); }
.lg-nav-links a:hover, .lg-nav-links a[aria-current="page"] { color: var(--jollof); }
.lg-nav-links a:hover { transform: translateY(-1px); }
.lg-nav-right { display: flex; align-items: center; gap: 12px; }
.lg-nav-signin { display: none; font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.lg-nav-signin:hover { color: var(--jollof); }
.lg-cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ink); color: var(--ground);
  padding: 11px 20px; border-radius: 100px;
  font-size: 13px; font-weight: 600;
  transition: background 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.lg-cta:hover { background: var(--jollof); transform: translateY(-2px); }
.lg-cta:active { transform: scale(0.97); }
.lg-hamburger { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 10px; color: var(--ink); }
.lg-hamburger:hover { background: rgba(14,27,58,0.06); }
.lg-mobile-menu {
  position: fixed; inset: 64px 12px auto 12px; z-index: 25;
  background: var(--ground-paper); border: 1px solid var(--hairline);
  border-radius: 18px; padding: 14px; display: none;
  box-shadow: var(--shadow-card);
}
.lg-mobile-menu.open { display: block; animation: lg-fade-up 0.22s var(--ease-out) both; }
.lg-mobile-menu a, .lg-mobile-menu button {
  display: block; width: 100%; text-align: left;
  padding: 12px 14px; font-size: 14px; font-weight: 500;
  color: var(--ink-soft); border-radius: 10px;
}
.lg-mobile-menu a:hover { background: rgba(14,27,58,0.04); color: var(--ink); }
@media (min-width: 880px) {
  .lg-nav-links { display: flex; }
  .lg-nav-signin { display: inline-block; }
  .lg-hamburger { display: none; }
}

/* ────────── Hero scaffold (extended per-page) ────────── */
.lg-hero { position: relative; overflow: hidden; }
.lg-hero-grid {
  max-width: 1280px; margin: 0 auto;
  padding: 80px 32px 110px;
  display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center;
}
@media (min-width: 1024px) {
  .lg-hero-grid { grid-template-columns: 1.15fr 1fr; gap: 48px; padding: 96px 32px 140px; }
}

.lg-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(242,169,59,0.10); color: var(--jollof);
  padding: 6px 14px; border-radius: 100px;
  font-size: 12px; font-weight: 500;
  animation: lg-fade-up 0.7s var(--ease-out) 0.08s both;
}
.lg-pulse-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--jollof);
  animation: lg-pulse-dot 1.8s ease-in-out infinite;
}
.lg-headline { margin-top: 28px; }
.lg-clip { display: block; overflow: hidden; }
.lg-clip > span { display: inline-block; animation: lg-clip-rise 0.85s var(--ease-out) both; }
.lg-clip-1 > span { animation-delay: 0.15s; }
.lg-clip-2 > span { animation-delay: 0.32s; }
.lg-clip-3 > span { animation-delay: 0.46s; }
.lg-marker { position: relative; display: inline-block; isolation: isolate; }
.lg-marker > span { position: relative; z-index: 1; }
.lg-marker::after {
  content: ''; position: absolute; inset: auto -0.03em 0.06em -0.03em;
  height: 0.32em; background: var(--okra); z-index: 0;
  transform: scaleX(0); transform-origin: 0 50%;
  animation: lg-marker 0.8s var(--ease-out) 0.85s forwards;
  border-radius: 1px;
}
.lg-lede {
  margin-top: 32px; max-width: 540px;
  font-size: 19px; line-height: 1.6;
  color: var(--ink-soft);
  animation: lg-fade-up 0.8s var(--ease-out) 0.72s both;
}
.lg-cta-row {
  margin-top: 40px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
.lg-btn-primary, .lg-btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px; border-radius: 100px;
  font-size: 15px; font-weight: 500;
  transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out), transform 0.2s var(--ease-out), color 0.2s var(--ease-out);
  animation: lg-pop-in 0.5s var(--ease-spring) both;
}
.lg-btn-primary { background: var(--ink); color: var(--ground); box-shadow: 0 4px 14px -4px rgba(14,27,58,0.35); animation-delay: 0.88s; }
.lg-btn-primary:hover { background: var(--jollof); transform: translateY(-3px); }
.lg-btn-primary:active { transform: scale(0.97); }
.lg-btn-ghost { background: var(--ground-paper); color: var(--ink); border: 1px solid var(--hairline-strong); animation-delay: 0.96s; }
.lg-btn-ghost:hover { border-color: var(--ink); transform: translateY(-3px); }
.lg-btn-ghost:active { transform: scale(0.97); }

/* ────────── On-scroll reveal ────────── */
html.js .lg-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
html.js .lg-reveal.is-visible { opacity: 1; transform: translateY(0); }
html.js .lg-reveal.delay-1 { transition-delay: 0.08s; }
html.js .lg-reveal.delay-2 { transition-delay: 0.16s; }
html.js .lg-reveal.delay-3 { transition-delay: 0.24s; }
html.js .lg-reveal.delay-4 { transition-delay: 0.32s; }

/* ────────── Sections ────────── */
.lg-section { max-width: 1280px; margin: 0 auto; padding: 96px 32px; }
.lg-section-narrow { max-width: 880px; }
.lg-section-head { margin-bottom: 56px; max-width: 720px; }
.lg-section-head.centered { margin-left: auto; margin-right: auto; text-align: center; }
.lg-section-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Geist Mono', monospace; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--jollof); font-weight: 500;
  margin-bottom: 18px;
}
.lg-section-eyebrow::before { content: ''; display: block; width: 24px; height: 2px; background: var(--okra); }
.lg-section-h2 { font-size: clamp(32px, 4.5vw, 56px); line-height: 1.04; letter-spacing: -0.028em; font-weight: 700; margin-bottom: 14px; }
.lg-section-h2 em { font-style: normal; color: var(--jollof); }
.lg-section-sub { font-size: 18px; color: var(--ink-soft); line-height: 1.6; max-width: 620px; }
.lg-section-head.centered .lg-section-sub { margin-left: auto; margin-right: auto; }
.lg-section-head.centered .lg-section-eyebrow { justify-content: center; }

/* ────────── Pillar / feature cards (homepage 4-pillars pattern) ────────── */
.lg-pillars-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px) { .lg-pillars-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){ .lg-pillars-grid { grid-template-columns: repeat(3, 1fr); } }
.lg-pillar {
  background: var(--ground-paper);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: 28px;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.lg-pillar:hover {
  transform: translateY(-4px);
  border-color: var(--hairline-strong);
  box-shadow: var(--shadow-card);
}
.lg-pillar-icon {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 14px;
  font-size: 22px;
  margin-bottom: 18px;
}
.lg-pillar-icon.tone-plan { background: rgba(14,27,58,0.06); }
.lg-pillar-icon.tone-save { background: rgba(14,74,56,0.10); }
.lg-pillar-icon.tone-learn { background: rgba(242,169,59,0.14); }
.lg-pillar-icon.tone-grow { background: rgba(242,169,59,0.10); }
.lg-pillar-icon.tone-ai { background: rgba(14,27,58,0.06); }
.lg-pillar-icon.tone-open { background: rgba(14,74,56,0.10); }
.lg-pillar-name { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.lg-pillar-tag {
  font-family: 'Geist Mono', monospace; font-size: 9px;
  letter-spacing: 0.10em; text-transform: uppercase; font-weight: 600;
  padding: 3px 8px; border-radius: 100px;
}
.lg-pillar-tag.live { background: rgba(14,74,56,0.12); color: var(--palm); }
.lg-pillar-tag.soon { background: rgba(242,169,59,0.16); color: #8B5A00; }
.lg-pillar-desc { font-size: 14px; color: var(--ink-soft); line-height: 1.6; }
.lg-pillar-desc a { color: var(--jollof); border-bottom: 1px solid currentColor; }

/* ────────── Inline marker (reusable highlight) ────────── */
.lg-inline-marker {
  position: relative; display: inline-block; isolation: isolate;
}
.lg-inline-marker::after {
  content: ''; position: absolute; inset: auto -0.03em 0.06em -0.03em;
  height: 0.32em; background: var(--okra); z-index: -1;
  border-radius: 1px;
}

/* ────────── FAQ ────────── */
.lg-faq-item {
  border-bottom: 1px solid var(--hairline);
  padding: 22px 0; cursor: pointer;
}
.lg-faq-q {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-size: 16px; font-weight: 600; color: var(--ink);
}
.lg-faq-q::after { content: '+'; font-size: 22px; font-weight: 300; color: var(--jollof); transition: transform 0.3s var(--ease-out); }
.lg-faq-item.open .lg-faq-q::after { transform: rotate(45deg); }
.lg-faq-a {
  max-height: 0; overflow: hidden;
  font-size: 14px; color: var(--ink-soft); line-height: 1.7;
  transition: max-height 0.35s var(--ease-out), padding-top 0.35s var(--ease-out);
}
.lg-faq-item.open .lg-faq-a { max-height: 320px; padding-top: 14px; }

/* ────────── Editorial prose (for /about, blog) ────────── */
.lg-prose { max-width: 720px; margin: 0 auto; padding: 0 32px; }
.lg-prose p { font-size: 18px; line-height: 1.72; color: var(--ink-soft); margin-bottom: 22px; }
.lg-prose p strong { color: var(--ink); font-weight: 600; }
.lg-prose h2 { font-size: clamp(28px, 3.5vw, 40px); line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; color: var(--ink); margin-top: 56px; margin-bottom: 18px; }
.lg-prose h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); margin-top: 36px; margin-bottom: 12px; }
.lg-prose blockquote {
  margin: 36px 0; padding: 20px 28px;
  background: var(--ground-deep); border-left: 3px solid var(--okra); border-radius: 0 14px 14px 0;
  font-size: 19px; line-height: 1.55; color: var(--ink); font-style: italic;
}
.lg-prose blockquote cite { display: block; margin-top: 12px; font-size: 13px; font-style: normal; color: var(--ink-quiet); font-family: 'Geist Mono', monospace; letter-spacing: 0.06em; text-transform: uppercase; }
.lg-prose a { color: var(--jollof); border-bottom: 1px solid currentColor; }

/* ────────── Footer ────────── */
.lg-footer { background: var(--ink); color: var(--ground); padding: 80px 32px 48px; position: relative; overflow: hidden; }
.lg-footer-inner { max-width: 1280px; margin: 0 auto; }
.lg-footer-h { font-size: clamp(36px, 5vw, 60px); font-weight: 700; letter-spacing: -0.028em; line-height: 1; margin-bottom: 12px; }
.lg-footer-h em { font-style: normal; color: var(--okra); }
/* Footer text uses --ground + opacity (not hardcoded cream rgba) so the
   alpha-mixed colours flip cleanly when --ground flips in dark mode. The
   previous `rgba(250,250,247,0.72)` literal stayed cream in dark mode and
   went cream-on-cream-invisible once the footer bg flipped light. */
.lg-footer-sub { font-size: 16px; color: var(--ground); opacity: 0.62; max-width: 460px; margin-bottom: 64px; }
.lg-footer-grid {
  display: grid; grid-template-columns: 1fr; gap: 36px;
  padding-top: 48px;
  /* Hairline uses currentColor blended via opacity, so it flips when the
     footer flips. color-mix() lets us keep a 10% alpha hairline. */
  border-top: 1px solid color-mix(in srgb, var(--ground) 10%, transparent);
}
@media (min-width: 720px) { .lg-footer-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.lg-footer-col-label { font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--okra); margin-bottom: 16px; }
.lg-footer-col a { display: block; padding: 6px 0; font-size: 14px; color: var(--ground); opacity: 0.72; transition: opacity 0.18s var(--ease-out); }
.lg-footer-col a:hover { opacity: 1; }
.lg-footer-disclaimer { font-size: 11px; color: var(--ground); opacity: 0.32; line-height: 1.6; margin-top: 48px; max-width: 700px; }
.lg-footer-copy { margin-top: 16px; font-size: 12px; color: var(--ground); opacity: 0.45; }

/* Hide nav variants conditionally based on signed-in state */
html[data-signed-in='1'] .lg-cta-guest { display: none; }
html:not([data-signed-in='1']) .lg-cta-user { display: none; }

/* Reduced motion — collapse animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .lg-reveal { opacity: 1; transform: none; }
}

/* ── Icons (Phosphor-style sprite via <use>) ──
   Use:  <svg class="icon" width="20" height="20" aria-hidden="true">
           <use href="/img/icons/sprite.svg#house"/>
         </svg>
   All icons inherit `currentColor` so they recolour with surrounding text. */
.icon { display: inline-block; vertical-align: -0.15em; flex-shrink: 0; color: inherit; }
.icon-lg { width: 24px; height: 24px; }
.icon-sm { width: 16px; height: 16px; }