/* ============================================================
   NVC Learning Community — page-scoped styles
   ------------------------------------------------------------
   A self-contained design system for the standalone Learning
   Community landing + registration pages. EVERYTHING here is
   scoped under `.lc` so it never leaks into the global site
   (css/site.css) and the two token sets never collide.

   Ported from the commissioned design's _ds token set + the
   inline styles in Landing.html / Registration.html / nvc/*.jsx.
   Design tokens are prefixed --lc-* for the same isolation reason.
   The three font families (Cormorant Garamond, Inter, JetBrains
   Mono) are already loaded globally by Layout.astro.
   ============================================================ */

/* The [hidden] attribute must win. Several components here carry display:flex/
   grid from a class, which OUTRANKS the UA's `[hidden]{display:none}` — so an
   element the JS hides via `.hidden = true` would still show (e.g. the group
   "others' emails" field on a solo registration, the success box on load).
   This guard makes `hidden` authoritative across the whole LC page. */
.lc [hidden] { display: none !important; }
.lc {
  /* Paper / cream surfaces */
  --lc-paper-50:  #FDF7EC;
  --lc-paper-100: #FBF1DE;
  --lc-paper-200: #F6E8CB;
  --lc-paper-300: #EFDBB4;
  --lc-paper-400: #E6CB9A;

  /* Ink (warm browns) */
  --lc-ink-900: #3A2C1E;
  --lc-ink-800: #4A3826;
  --lc-ink-700: #5C4632;
  --lc-ink-600: #6F5640;
  --lc-ink-500: #876B50;
  --lc-ink-400: #A6896C;
  --lc-ink-300: #C4AB8E;

  /* Earth pigments */
  --lc-terracotta-700: #A84E2C;
  --lc-terracotta-600: #C4623A;
  --lc-terracotta-500: #D2774C;
  --lc-terracotta-400: #DD9069;
  --lc-ember-600: #DB6A26;
  --lc-ember-500: #E8823A;
  --lc-ember-400: #F09B53;
  --lc-amber-600: #D89A3C;
  --lc-amber-500: #E3AC57;
  --lc-amber-400: #EDC079;
  --lc-clay-600: #BD6F62;
  --lc-clay-500: #C98679;
  --lc-clay-400: #D89E92;
  --lc-sage-700: #5F6C42;
  --lc-sage-600: #788455;
  --lc-sage-500: #909A6E;
  --lc-sage-400: #AAB28C;
  --lc-water-500: #8FA9A6;
  --lc-water-400: #A9C0BC;

  --lc-ember-gradient: linear-gradient(135deg, var(--lc-amber-500) 0%, var(--lc-ember-500) 52%, var(--lc-terracotta-600) 100%);

  /* Semantic surfaces */
  --lc-surface-page:   var(--lc-paper-100);
  --lc-surface-sunk:   var(--lc-paper-200);
  --lc-surface-card:   #FFFDF8;

  /* Text */
  --lc-text-accent:  var(--lc-terracotta-600);
  --lc-text-muted:   var(--lc-ink-400);
  --lc-text-inverse: var(--lc-paper-50);

  /* Borders */
  --lc-border-soft:   rgba(92, 70, 50, 0.14);
  --lc-border-medium: rgba(92, 70, 50, 0.24);
  --lc-border-strong: rgba(92, 70, 50, 0.40);

  /* Accent */
  --lc-accent:       var(--lc-terracotta-600);
  --lc-accent-hover: var(--lc-terracotta-700);
  --lc-accent-soft:  rgba(196, 98, 58, 0.10);

  /* Fonts */
  --lc-font-display: 'Cormorant Garamond', 'Garamond', 'Times New Roman', serif;
  --lc-font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --lc-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale used by ported components */
  --lc-title-2: 2.75rem;
  --lc-mono-xs: 0.6875rem;
  --lc-mono-sm: 0.75rem;
  --lc-mono-md: 0.8125rem;
  --lc-body-base: 1rem;

  /* Radii */
  --lc-radius-sm:  10px;
  --lc-radius-md:  16px;
  --lc-radius-lg:  24px;
  --lc-radius-xl:  32px;
  --lc-radius-2xl: 44px;
  --lc-radius-pill: 999px;

  /* Layout */
  --lc-content-max:  1200px;
  --lc-content-prose: 680px;
  --lc-content-wide: 1440px;

  /* Elevation (warm, diffuse) */
  --lc-shadow-xs:  0 1px 2px rgba(58, 44, 30, 0.06);
  --lc-shadow-sm:  0 2px 8px rgba(58, 44, 30, 0.07);
  --lc-shadow-md:  0 8px 24px rgba(58, 44, 30, 0.09);
  --lc-shadow-lg:  0 18px 48px rgba(58, 44, 30, 0.12);
  --lc-shadow-card: 0 4px 18px rgba(92, 70, 50, 0.08), 0 1px 3px rgba(92, 70, 50, 0.06);
  --lc-glow-ember:  0 0 0 1px rgba(219, 106, 38, 0.20), 0 8px 40px rgba(232, 130, 58, 0.30);

  /* Glass */
  --lc-glass-bg:   rgba(255, 253, 248, 0.72);
  --lc-glass-blur: blur(14px) saturate(1.1);

  /* Motion */
  --lc-ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --lc-ease-glide: cubic-bezier(0.16, 1, 0.30, 1);
  --lc-dur-fast:   140ms;
  --lc-dur-base:   260ms;

  /* Fluid display tokens (collapse on mobile, mirroring the design) */
  --lc-display-3: 4rem;
}

/* ---------- Base / reset (scoped) ---------- */
.lc {
  background: var(--lc-surface-page);
  color: var(--lc-ink-900);
  font-family: var(--lc-font-body);
  font-size: var(--lc-body-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.lc *, .lc *::before, .lc *::after { box-sizing: border-box; }
.lc a { color: inherit; }
/* Buttons aren't text — stop mobile double-tap/long-press from selecting their
   label (the blue selection highlight) and remove the grey tap-flash overlay. */
.lc button { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.lc img, .lc video { max-width: 100%; }
.lc ::selection { background: rgba(219, 106, 38, 0.18); }
html:has(.lc) { scroll-behavior: smooth; }

/* Section paddings (from the design's .sec-pad / .sec-pad-y) */
.lc .lc-sec-pad { padding-left: 40px; padding-right: 40px; }
.lc .lc-sec-pad-y { padding-top: 112px; padding-bottom: 112px; }
.lc .lc-wrap { max-width: var(--lc-content-max); margin: 0 auto; }
.lc .lc-wrap-wide { max-width: var(--lc-content-wide); margin: 0 auto; }
.lc .lc-wrap-prose { max-width: var(--lc-content-prose); margin: 0 auto; }
.lc section { position: relative; }

/* ---------- Type helpers ---------- */
.lc .lc-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--lc-font-mono); font-size: 12.5px;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--lc-text-accent);
}
.lc .lc-eyebrow--sage { color: var(--lc-sage-700); }
.lc .lc-eyebrow::before,
.lc .lc-eyebrow--rule::after {
  content: ""; width: 48px; height: 1px; background: currentColor; opacity: 0.6;
}
.lc .lc-eyebrow--plain { display: inline-block; }
.lc .lc-eyebrow--plain::before { content: none; }

.lc h1, .lc h2, .lc h3 { margin: 0; overflow-wrap: break-word; }
.lc .lc-display {
  font-family: var(--lc-font-display); font-weight: 300;
  letter-spacing: -0.025em; line-height: 1.04; color: var(--lc-ink-800);
  text-wrap: balance;
}
.lc .lc-display em, .lc .lc-h2 em, .lc .lc-h3 em { font-style: italic; font-weight: 300; }
.lc em.lc-clay { color: var(--lc-clay-600); }
.lc em.lc-terra { color: var(--lc-terracotta-600); }

/* Italic emphasis inside section titles — each section takes a different hue
   from the earth palette so the page reads as a spectrum from top to bottom.
   The titles render via set:html with plain <em>, so we colour them by section
   here rather than per-word in the data (keeps every copy-variant inheriting it). */
.lc .lc-invitation h2 em            { color: var(--lc-amber-600); }      /* invitation */
.lc .lc-band-sunk:not(.lc-practical) .lc-h2 em { color: var(--lc-ember-600); }  /* five movements */
.lc #special .lc-display em         { color: var(--lc-terracotta-600); } /* special */
.lc #faculty .lc-h2 em              { color: var(--lc-clay-600); }        /* faculty */
.lc #holders .lc-h2 em              { color: var(--lc-sage-700); }        /* holders */
.lc #topics .lc-h2 em               { color: var(--lc-water-500); }       /* topics */
.lc .lc-stories .lc-h2 em           { color: var(--lc-amber-600); }       /* stories */
.lc #practical .lc-h2 em            { color: var(--lc-water-500); }       /* practical info */
.lc .lc-practical .lc-join-title em { color: var(--lc-ember-600); }       /* how to join */
.lc .lc-groups .lc-h2 em            { color: var(--lc-terracotta-600); }  /* don't come alone */
.lc #faq .lc-h2 em                  { color: var(--lc-clay-600); }        /* faq */
.lc .lc-signup h2 em                { color: var(--lc-sage-700); }        /* signup */

.lc .lc-h2 {
  font-family: var(--lc-font-display); font-weight: 300;
  font-size: clamp(34px, 4.6vw, 56px); line-height: 1.05;
  letter-spacing: -0.022em; color: var(--lc-ink-800); text-wrap: balance;
}
.lc .lc-h3 {
  font-family: var(--lc-font-display); font-weight: 300;
  font-size: 30px; line-height: 1.12; letter-spacing: -0.018em; color: var(--lc-ink-700);
}
.lc .lc-lead {
  font-family: var(--lc-font-body); font-weight: 300;
  font-size: 19px; line-height: 1.55; color: var(--lc-ink-600);
}
.lc .lc-prose { font-size: 18.5px; line-height: 1.62; color: var(--lc-ink-600); }

/* SectionHeading composite */
.lc .lc-section-head { max-width: 760px; margin-bottom: 48px; }
.lc .lc-section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.lc .lc-section-head .lc-h2 { margin: 18px 0 0; }
.lc .lc-section-head .lc-lead { margin: 18px 0 0; max-width: 62ch; }
.lc .lc-section-head.center .lc-lead { margin-left: auto; margin-right: auto; }

/* ---------- Buttons (ported from DS Button) ---------- */
.lc .lc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--lc-font-mono); font-weight: 500; font-size: var(--lc-mono-md);
  letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none;
  text-align: center; line-height: 1.25; padding: 14px 26px; border: 1px solid transparent;
  border-radius: var(--lc-radius-pill); cursor: pointer;
  transition: transform var(--lc-dur-fast) var(--lc-ease-out),
              box-shadow var(--lc-dur-base) var(--lc-ease-out),
              background var(--lc-dur-base) var(--lc-ease-out),
              border-color var(--lc-dur-base) var(--lc-ease-out);
}
.lc .lc-btn:active { transform: translateY(1px) scale(0.985); }
.lc .lc-btn--sm { padding: 10px 18px; font-size: var(--lc-mono-xs); gap: 8px; }
.lc .lc-btn--lg { padding: 18px 34px; gap: 12px; }
.lc .lc-btn--block { display: flex; width: 100%; }

.lc .lc-btn--primary { background: var(--lc-accent); color: #fff; box-shadow: var(--lc-shadow-sm); }
.lc .lc-btn--primary:hover { background: var(--lc-accent-hover); box-shadow: var(--lc-shadow-md); }
.lc .lc-btn--secondary { background: var(--lc-surface-card); color: var(--lc-ink-700); border-color: var(--lc-border-medium); box-shadow: var(--lc-shadow-xs); }
.lc .lc-btn--secondary:hover { border-color: var(--lc-border-strong); box-shadow: var(--lc-shadow-md); }
.lc .lc-btn--ghost { background: transparent; color: var(--lc-text-accent); }
.lc .lc-btn--ghost:hover { background: var(--lc-accent-soft); }
.lc .lc-btn--ember { background: var(--lc-ember-gradient); color: #fff; box-shadow: var(--lc-glow-ember); }
.lc .lc-btn--ember:hover { box-shadow: var(--lc-shadow-md), var(--lc-glow-ember); }
.lc .lc-btn--sage { background: var(--lc-sage-600); color: #fff; }
.lc .lc-btn--sage:hover { background: var(--lc-sage-700); box-shadow: var(--lc-shadow-md); }

/* Liquid-glass secondary (from Landing.html <style>) */
.lc .liquid-glass-btn {
  position: relative; isolation: isolate;
  background: linear-gradient(150deg, rgba(48,32,20,0.46), rgba(34,22,14,0.34) 50%, rgba(48,32,20,0.42));
  -webkit-backdrop-filter: blur(16px) saturate(1.5) brightness(0.94);
  backdrop-filter: blur(16px) saturate(1.5) brightness(0.94);
  border: 1px solid rgba(255,250,240,0.28);
  box-shadow:
    inset 0 1.5px 1.5px rgba(255,250,240,0.55),
    inset 0 -3px 5px rgba(0,0,0,0.28),
    inset 1.5px 0 1.5px rgba(255,250,240,0.20),
    inset -1.5px 0 1.5px rgba(0,0,0,0.18),
    0 12px 32px rgba(30,18,8,0.30);
  color: rgba(253,247,236,0.96);
}
.lc .liquid-glass-btn::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background:
    radial-gradient(130% 90% at 28% -25%, rgba(255,252,245,0.45), rgba(255,255,255,0) 52%),
    linear-gradient(180deg, rgba(255,252,245,0.18), rgba(255,255,255,0) 42%);
  pointer-events: none; z-index: -1;
}
.lc .liquid-glass-btn::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(120% 95% at 72% 135%, rgba(232,142,72,0.32), rgba(255,255,255,0) 58%);
  pointer-events: none; z-index: -1;
}
.lc .liquid-glass-btn:hover {
  background: linear-gradient(150deg, rgba(58,40,26,0.52), rgba(40,26,16,0.40) 50%, rgba(58,40,26,0.48));
}

/* ---------- Custom top nav ---------- */
.lc-nav {
  position: sticky; top: 0; z-index: 50; background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--lc-dur-base) var(--lc-ease-out), border-color var(--lc-dur-base) var(--lc-ease-out);
}
.lc-nav.is-scrolled {
  background: var(--lc-glass-bg);
  -webkit-backdrop-filter: var(--lc-glass-blur); backdrop-filter: var(--lc-glass-blur);
  border-bottom-color: var(--lc-border-soft);
}
.lc-nav-inner {
  max-width: var(--lc-content-wide); margin: 0 auto; padding: 16px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.lc-nav-logo { height: 30px; width: auto; display: block; }
.lc-nav-links { display: flex; align-items: center; gap: 30px; }
.lc-nav-links a {
  font-family: var(--lc-font-mono); font-size: 12.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--lc-ink-600); text-decoration: none;
  transition: color var(--lc-dur-fast) var(--lc-ease-out);
}
.lc-nav-links a:hover { color: var(--lc-text-accent); }
.lc-nav-burger {
  display: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--lc-border-medium); background: var(--lc-surface-card);
  cursor: pointer; font-size: 18px; color: var(--lc-ink-700);
  align-items: center; justify-content: center;
}
.lc-nav-mobile {
  display: none; flex-direction: column; gap: 16px;
  padding: 8px 40px 22px; background: var(--lc-glass-bg);
  -webkit-backdrop-filter: var(--lc-glass-blur); backdrop-filter: var(--lc-glass-blur);
  border-bottom: 1px solid var(--lc-border-soft);
}
.lc-nav-mobile.is-open { display: flex; }
.lc-nav-mobile a {
  font-family: var(--lc-font-mono); font-size: 12.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--lc-ink-600); text-decoration: none;
}

/* ---------- Hero ---------- */
.lc-hero { overflow: hidden; }
.lc-hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.lc-hero-scrim-x { position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(251,241,222,0.45) 0%, rgba(251,241,222,0.22) 38%, rgba(251,241,222,0) 70%); }
.lc-hero-scrim-y { position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(251,241,222,0.35) 0%, rgba(251,241,222,0) 30%, rgba(251,241,222,0) 60%, var(--lc-paper-100) 100%); }
.lc-hero-grid {
  position: relative; max-width: var(--lc-content-wide); margin: 0 auto;
  padding: 120px 40px 104px; display: grid; grid-template-columns: minmax(0, 680px);
  gap: 48px; align-items: center; min-height: 78vh;
}
.lc-hero h1 {
  font-family: var(--lc-font-display); font-weight: 300;
  font-size: clamp(46px, 6.4vw, 96px); line-height: 1.0; letter-spacing: -0.025em;
  color: var(--lc-ink-800); text-wrap: balance;
}
.lc-hero h1 em { font-style: italic; }
.lc-hero-badge {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 26px;
  font-family: var(--lc-font-mono); font-size: 15.6px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--lc-ink-500);
}
.lc-hero-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lc-terracotta-500); }
.lc-hero-sub {
  font-family: var(--lc-font-body); font-weight: 300; font-size: 21px;
  line-height: 1.5; color: var(--lc-ink-600); margin: 20px 0 0; max-width: 46ch;
}
.lc-cta-row { display: flex; gap: 16px; margin-top: 36px; flex-wrap: wrap; }
.lc-hero-newnvc { margin-top: 24px; font-family: var(--lc-font-body); font-size: 15px; color: var(--lc-ink-500); }
.lc-hero-newnvc a { color: var(--lc-text-accent); text-decoration: none; font-weight: 500; }

/* Scroll-driven reading quote */
/* Section height must exceed the viewport: the word-by-word reveal is driven
   by scroll progress through it (span = height - 100vh in learning-community.js).
   Too little travel and every word lights at once, reading as "no animation". */
/* Dynamic viewport units (dvh) so the section/sticky heights track the ACTUAL
   visible viewport the JS reads via window.innerHeight. With plain `vh`, mobile
   browsers resolve `vh` against the large (toolbar-hidden) viewport while
   window.innerHeight reports the small (toolbar-shown) one, so the scroll-progress
   math desynced and the word-by-word bolding never advanced on phones. */
.lc-quote-scroll-sec { position: relative; height: 135vh; height: 135dvh; }
.lc-quote-sticky { position: sticky; top: 0; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding-top: 0; }
/* On phones the scroll travel (section height − viewport) is small, so the
   word-by-word reveal saturated within a few pixels of scroll and read as
   "already bold / no animation". Give it more travel so the bolding actually
   plays out as you scroll. */
@media (max-width: 640px) {
  .lc-quote-scroll-sec { height: 200vh; height: 200dvh; }
}
.lc-quote-mark {
  font-family: var(--lc-font-display); font-weight: 300; font-size: 96px; line-height: 0.6;
  color: var(--lc-text-accent); opacity: 0.55; margin-bottom: 18px; user-select: none;
}
.lc-quote-scroll {
  margin: 0 auto; max-width: 760px; font-family: var(--lc-font-display); font-style: italic;
  font-size: var(--lc-display-3); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance;
}
/* Each word is an inline-block sized by a hidden BOLD copy of itself (::after,
   from data-w). Bolding a word then never widens it, so the line breaks stay
   put — without this, every word lighting up re-wrapped the balanced quote
   (worst on Safari, whose synthesized-bold italic is much wider). */
.lc-quote-scroll .w { display: inline-block; text-align: center; color: var(--lc-text-muted); font-weight: 300; transition: font-weight .35s ease, color .35s ease; }
.lc-quote-scroll .w::after { content: attr(data-w); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 700; user-select: none; }
.lc-quote-scroll .w.on { color: var(--lc-ink-700); font-weight: 700; }
.lc-quote-attr {
  margin-top: 24px; font-family: var(--lc-font-mono); font-size: 12px;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--lc-text-muted);
}

/* ---------- Invitation ---------- */
.lc-bg-cover { position: absolute; inset: 0; background-size: cover; background-position: center; pointer-events: none; }
.lc-invitation { overflow: hidden; }
.lc-invitation-inner { position: relative; z-index: 1; max-width: var(--lc-content-prose); margin: 0 auto; padding: 0 40px 200px; }
/* The invitation already carries the full section top pad (lc-sec-pad-y); the
   sticky scroll-quote above it ends on generous whitespace too, so the extra
   top pad here left an oversized empty band before the eyebrow. Pull it in. */
.lc-invitation.lc-sec-pad-y { padding-top: 40px; }
.lc-invitation h2 {
  font-family: var(--lc-font-display); font-weight: 300; font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.08; letter-spacing: -0.022em; color: var(--lc-ink-700); margin: 0 0 28px; text-wrap: balance;
}
.lc-invitation .lc-prose { margin: 0 0 22px; }
.lc-invitation-lead-in { font-family: var(--lc-font-display); font-style: italic; font-weight: 300; font-size: 28px; line-height: 1.2; color: var(--lc-ink-800); margin: 18px 0 26px; }
.lc-foryou { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.lc-foryou li { display: flex; gap: 16px; align-items: flex-start; }
.lc-foryou .bullet { flex-shrink: 0; margin-top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--lc-ember-gradient); }
.lc-foryou span:last-child { font-family: var(--lc-font-body); font-size: 18px; line-height: 1.55; color: var(--lc-ink-600); }
.lc-foryou b { color: var(--lc-ink-900); font-weight: 500; }
.lc-invitation-closing { font-family: var(--lc-font-display); font-style: italic; font-weight: 300; font-size: 26px; color: var(--lc-ink-700); margin: 40px 0 0; }
.lc-invite-divider {
  position: absolute; left: 0; right: 0; bottom: -1px; display: block; width: 100%; height: 340px;
  object-fit: cover; object-position: center top; pointer-events: none;
  /* The wave crest lives in the top ~55% of the art; anchor to the top so the
     wave (not the empty cream bottom) shows, then fade its top edge into the
     invitation for a clean full-width transition. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 34%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 34%);
}

/* Movements */
.lc-band-sunk { background: var(--lc-surface-sunk); border-top: 1px solid var(--lc-border-soft); border-bottom: 1px solid var(--lc-border-soft); }
.lc-movements-list { display: flex; flex-direction: column; gap: 4px; }
.lc-two-col { display: grid; grid-template-columns: 88px 1fr; gap: 28px; align-items: flex-start; padding: 34px 0; border-top: 1px solid var(--lc-border-soft); }
.lc-two-col:first-child { border-top: none; }
.lc-two-col > img { width: 88px; height: 88px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(92,70,50,0.16)); }
.lc-two-col h3 { margin: 0 0 12px; }
.lc-two-col p { font-family: var(--lc-font-body); font-size: 17.5px; line-height: 1.58; color: var(--lc-ink-500); margin: 0; max-width: 62ch; }

/* Pull quote band */
.lc-quote-band { overflow: hidden; }
/* Subtle horizontal drift: the background eases a little to the left, slows,
   eases back to the right, slows — a slow non-linear sway with no vertical
   movement. background-size is oversized well past `cover` (rather than a
   CSS transform: scale on the element, which doesn't touch how `cover` is
   computed) so panning background-position actually has horizontal room to
   move instead of sitting at an already-tight crop. */
.lc-quote-band-bg { position: absolute; inset: 0; background-size: 160% auto; background-position: center; animation: lc-quote-drift 21.6s infinite; will-change: background-position; }
@keyframes lc-quote-drift {
  /* left … slow … right … slow. Each half uses an ease-in-out cubic so the pan
     decelerates at each extreme, giving the non-linear sway. Wide swing (75/25)
     so the motion actually reads at a glance. */
  0%   { background-position: 75% 50%; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  50%  { background-position: 25% 50%; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  100% { background-position: 75% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .lc-quote-band-bg { animation: none; }
}
.lc-quote-band-inner { position: relative; max-width: 900px; margin: 0 auto; padding: 110px 40px; text-align: center; }
.lc-quote-lg { margin: 0 auto; max-width: 860px; font-family: var(--lc-font-display); font-style: italic; font-weight: 300; font-size: clamp(30px, 4vw, 52px); line-height: 1.1; letter-spacing: -0.02em; color: var(--lc-ink-700); }

/* ---------- Special (features + ecosystem) ---------- */
.lc-special-intro { max-width: 760px; margin-inline: auto; text-align: center; margin-bottom: 16px; }
.lc-special-intro .lc-eyebrow { margin-bottom: 20px; }
.lc-special-intro h2 { font-size: clamp(40px, 5.6vw, 76px); line-height: 1.02; margin: 0; }
.lc-special-intro p { font-family: var(--lc-font-body); font-weight: 300; font-size: 19px; line-height: 1.55; color: var(--lc-ink-600); margin: 24px auto 0; max-width: 56ch; }
/* Walking turtle: it slides across a track while bobbing + waddling, so the
   static illustration reads as "walking" without needing a video/alpha clip.
   Two nested elements each own ONE transform animation (CSS can't compose two
   transform animations on one element): the .lc-turtle-walker travels across,
   the inner .lc-turtle img bobs + tilts in place. The section already sets
   overflow:hidden, so the track clips the turtle at the edges. */
.lc-turtle-track { position: relative; width: 100%; height: min(200px, 44vw); margin: 34px 0 0; --lc-turtle-w: min(260px, 58%); }
.lc-turtle-walker {
  position: absolute; top: 0; left: 0;
  width: var(--lc-turtle-w);
  /* Animate `left` (resolved against the track's width) so travel is exactly
     "track width − turtle width" at every viewport — no viewport-unit guessing.
     The facing flip lives on this element via scaleX in the keyframes.
     Paused by default; JS adds .is-walking to the track only once the section
     scrolls into view (and never on slow/low-power devices — see .lc-no-anim). */
  animation: lc-turtle-walk 34s linear infinite;
  animation-play-state: paused;
}
.lc-turtle {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 12px 22px rgba(92,70,50,0.18));
  transform-origin: 50% 90%;
  animation: lc-turtle-waddle 1.43s ease-in-out infinite;
  animation-play-state: paused;
  will-change: transform;
}
/* Play both animations only while the section is in view. */
.lc-turtle-track.is-walking .lc-turtle-walker,
.lc-turtle-track.is-walking .lc-turtle { animation-play-state: running; }

@keyframes lc-turtle-walk {
  /* Constant-speed (linear) loop that STARTS CENTERED, so the turtle first
     appears mid-track when the section scrolls in. Path: center → right edge →
     (quick flip) → left edge → (quick flip) → back to center. `left` is
     resolved against the track; center = 50% − half the turtle's own width.
     Time is allotted ∝ distance so speed stays constant: the two half-legs
     (center↔edge) take ~23% each and the full crossing ~46.5%. The two flips
     each occupy a short ~3.5% window (30% quicker than the old ~5% turns) and
     land at an edge, so the turn snaps and never mirrors mid-stride.
     Source image faces LEFT → scaleX(-1) faces right, scaleX(1) faces left. */
  0%       { left: calc(50% - var(--lc-turtle-w) / 2); transform: scaleX(-1); } /* center, face right */
  23%      { left: calc(100% - var(--lc-turtle-w));     transform: scaleX(-1); } /* reach right edge */
  26.5%    { left: calc(100% - var(--lc-turtle-w));     transform: scaleX(1);  } /* quick flip → face left */
  73%      { left: 0;                                   transform: scaleX(1);  } /* cross to left edge */
  76.5%    { left: 0;                                   transform: scaleX(-1); } /* quick flip → face right */
  100%     { left: calc(50% - var(--lc-turtle-w) / 2); transform: scaleX(-1); } /* back to center */
}
@keyframes lc-turtle-waddle {
  /* the "steps": small vertical bob paired with an alternating tilt */
  0%,100% { transform: translateY(0)    rotate(-1.4deg); }
  50%     { transform: translateY(-6px) rotate(1.4deg);  }
}
/* Slow / low-power devices, or reduced-motion: no walk at all — the turtle just
   sits centered as it did before, crisp and cost-free. .lc-no-anim is set by JS
   from a hardware check; the media query covers the OS accessibility setting. */
.lc-turtle-track.lc-no-anim .lc-turtle-walker,
.lc-turtle-track.lc-no-anim .lc-turtle { animation: none; }
.lc-turtle-track.lc-no-anim .lc-turtle-walker { position: static; margin-inline: auto; transform: none; }
.lc-turtle-track.lc-no-anim { height: auto; }
@media (prefers-reduced-motion: reduce) {
  .lc-turtle-walker { animation: none; position: static; margin-inline: auto; transform: none; }
  .lc-turtle { animation: none; }
  .lc-turtle-track { height: auto; }
}

.lc-special-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 56px; }
.lc-feature-card { background: var(--lc-surface-card); border: 1px solid var(--lc-border-soft); border-radius: var(--lc-radius-lg); padding: 32px; box-shadow: var(--lc-shadow-card); }
.lc-feature-card > img { width: 72px; height: 72px; object-fit: contain; margin-bottom: 18px; filter: drop-shadow(0 6px 14px rgba(92,70,50,0.16)); }
.lc-feature-card .eb { font-family: var(--lc-font-mono); font-size: var(--lc-mono-xs); letter-spacing: 0.26em; text-transform: uppercase; color: var(--lc-text-accent); display: block; margin-bottom: 8px; }
.lc-feature-card h4 { font-family: var(--lc-font-display); font-weight: 300; font-size: 27px; line-height: 1.1; color: var(--lc-ink-700); margin: 0 0 10px; }
.lc-feature-card p { font-family: var(--lc-font-body); font-size: var(--lc-body-base); line-height: 1.6; color: var(--lc-ink-500); margin: 0; }

.lc-ecosystem-card { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(150px, 190px) 1fr; gap: 40px; align-items: start; background: var(--lc-surface-card); border: 1px solid var(--lc-border-soft); border-radius: var(--lc-radius-lg); padding: 40px; box-shadow: var(--lc-shadow-card); }
.lc-ecosystem-card > img { width: 100%; height: auto; filter: drop-shadow(0 10px 20px rgba(92,70,50,0.16)); }
.lc-ecosystem-card .eb { font-family: var(--lc-font-mono); font-size: var(--lc-mono-xs); letter-spacing: 0.3em; text-transform: uppercase; color: var(--lc-text-accent); margin-bottom: 8px; }
.lc-ecosystem-card h3 { font-size: var(--lc-title-2); }
.lc-ecosystem-card > div > p { font-size: var(--lc-body-base); line-height: 1.6; color: var(--lc-ink-500); margin: 12px 0 0; max-width: 60ch; }
.lc-ecosystem-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.lc-ecosystem-list li { position: relative; padding-left: 22px; font-size: var(--lc-body-base); line-height: 1.6; color: var(--lc-ink-500); }
.lc-ecosystem-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--lc-sage-700); }
.lc-ecosystem-list b { color: var(--lc-ink-700); font-weight: 500; }

/* ---------- Faculty (teachers) ---------- */
.lc-faculty { position: relative; overflow: hidden; background: var(--lc-surface-sunk); border-top: 1px solid var(--lc-border-soft); border-bottom: 1px solid var(--lc-border-soft); }
.lc-faculty .lc-wrap { position: relative; z-index: 1; }
.lc-faculty-creature {
  position: absolute; left: -36px; bottom: -26px; width: min(320px, 30vw); height: auto;
  opacity: 0.16; pointer-events: none; z-index: 0;
  filter: drop-shadow(0 10px 24px rgba(92,70,50,0.18));
}
.lc-teacher-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 28px; }
.lc-teacher-card { display: flex; flex-direction: column; align-items: center; text-align: center; background: none; border: none; padding: 0; cursor: pointer; transition: transform var(--lc-dur-base) var(--lc-ease-glide); }
.lc-teacher-card:hover { transform: translateY(-5px); }
.lc-teacher-photo { position: relative; width: 100%; max-width: 188px; aspect-ratio: 1 / 1; margin-bottom: 20px; border-radius: 50%; overflow: hidden; box-shadow: 0 22px 44px rgba(92,70,50,0.32); transition: box-shadow var(--lc-dur-base) var(--lc-ease-glide); }
.lc-teacher-card:hover .lc-teacher-photo { box-shadow: 0 30px 56px rgba(92,70,50,0.42); }
.lc-teacher-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.lc-teacher-name { font-family: var(--lc-font-display); font-weight: 300; font-style: italic; font-size: 24px; line-height: 1.12; color: var(--lc-ink-700); }
.lc-teacher-country { font-family: var(--lc-font-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lc-text-accent); line-height: 1.5; margin-top: 7px; }
.lc-teacher-short { font-family: var(--lc-font-body); font-size: 14.5px; line-height: 1.45; color: var(--lc-ink-500); margin-top: 6px; max-width: 26ch; }

/* Trainers focus gallery — a JS enhancement layered over the grid above. The
   grid markup stays untouched; js/learning-community.js adds .is-gallery and
   drives each card's transform/opacity per frame along a "tossed ball" arc.
   Removing the class (the "show all" toggle, reduced motion, no JS) reverts to
   the plain grid with zero extra styles. */
.lc-tg-toggle {
  display: inline-flex; align-items: center; margin-top: 24px; padding: 10px 20px;
  border-radius: 999px; border: 1px solid var(--lc-border-medium); background: var(--lc-surface-card);
  cursor: pointer; font-family: var(--lc-font-mono); font-size: var(--lc-mono-xs);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--lc-ink-600);
  transition: color var(--lc-dur-base) var(--lc-ease-out), border-color var(--lc-dur-base) var(--lc-ease-out);
}
.lc-tg-toggle:hover { color: var(--lc-text-accent); border-color: var(--lc-text-accent); }

/* Full-bleed band: breaks out of the centered .lc-wrap to the window edges. */
.lc-teacher-grid.is-gallery {
  display: block; position: relative;
  width: 100vw; margin-left: calc(50% - 50vw);
  overflow: hidden;                 /* cards enter/exit at the window edges */
  touch-action: pan-y;              /* keep vertical page scroll on touch */
  min-height: 400px;                /* pre-layout fallback; JS sets the height */
}
.lc-teacher-grid.is-gallery .lc-teacher-card {
  position: absolute; left: 50%; top: 0;
  transform-origin: top center;     /* anchor by the photo top → no top clipping */
  transform: translate(-50%, 0) scale(0.5);
  opacity: 0;                       /* first frame fades them in */
  will-change: transform, opacity;
  transition: none;                 /* the grid's hover-lift transition would fight the per-frame transform */
}
.lc-teacher-grid.is-gallery .lc-teacher-card:hover { transform: translate(-50%, 0) scale(0.5); } /* JS owns it (inline style wins) */
/* Photo size is set by JS to the focus diameter; drop the grid's fluid sizing.
   The hover lift moves here (the card's transform is taken by the arc). */
.lc-teacher-grid.is-gallery .lc-teacher-photo {
  width: auto; max-width: none; aspect-ratio: auto; margin-bottom: 16px;
  transition: transform var(--lc-dur-base) var(--lc-ease-glide), box-shadow var(--lc-dur-base) var(--lc-ease-glide);
}
.lc-teacher-grid.is-gallery .lc-teacher-card:hover .lc-teacher-photo {
  transform: translateY(-8px);
  box-shadow: 0 34px 60px rgba(92,70,50,0.46);
}
.lc-teacher-grid.is-gallery .lc-teacher-card:active .lc-teacher-photo { transform: translateY(1px) scale(0.985); }
@media (prefers-reduced-motion: reduce) {
  .lc-teacher-grid.is-gallery .lc-teacher-photo { transition: none; }
}

/* Teacher modal */
.lc-modal { position: fixed; inset: 0; z-index: 200; background: rgba(40,28,18,0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: 24px; }
.lc-modal.is-open { display: flex; }
.lc-modal-dialog { position: relative; max-width: 680px; width: 100%; max-height: 88vh; overflow-y: auto; background: var(--lc-surface-card); border: 1px solid var(--lc-border-soft); border-radius: var(--lc-radius-xl); box-shadow: var(--lc-shadow-lg); padding: 40px; }
.lc-modal-close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--lc-border-medium); background: var(--lc-surface-page); cursor: pointer; font-size: 20px; color: var(--lc-ink-600); line-height: 1; }
.lc-modal-head { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
.lc-modal-photo { position: relative; width: 150px; flex-shrink: 0; aspect-ratio: 1024 / 1280; }
.lc-modal-photo .mask { position: absolute; inset: 0; -webkit-mask-image: var(--lc-frame-mask); mask-image: var(--lc-frame-mask); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.lc-modal-photo .mask img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lc-modal-photo .frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 20px rgba(92,70,50,0.16)); pointer-events: none; }
.lc-modal-country { font-family: var(--lc-font-mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--lc-text-accent); margin-bottom: 10px; }
.lc-modal-name { font-family: var(--lc-font-display); font-weight: 300; font-size: 38px; line-height: 1.08; letter-spacing: -0.02em; color: var(--lc-ink-800); margin: 0 0 14px; }
.lc-modal-topic { font-family: var(--lc-font-display); font-style: italic; font-weight: 300; font-size: 20px; line-height: 1.3; color: var(--lc-ink-600); margin: 0; }
.lc-modal-rule { height: 1px; background: var(--lc-border-soft); margin: 28px 0; }
.lc-modal-bio { font-family: var(--lc-font-body); font-size: 16.5px; line-height: 1.7; color: var(--lc-ink-600); margin: 0; }

/* Small notice modal — reuses .lc-modal's overlay/open behaviour with a
   compact centred dialog for one-line "not live yet" style messages. */
.lc-modal-dialog--notice { max-width: 420px; padding: 44px 36px 36px; text-align: center; }
.lc-notice-text { font-family: var(--lc-font-display); font-weight: 300; font-style: italic; font-size: 24px; line-height: 1.35; color: var(--lc-ink-700); margin: 0; }

/* Modal emoji medallion (for the photo-less "holders") */
.lc-modal-medallion {
  width: 150px; height: 150px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 38%, var(--lc-surface-page), var(--holder-tint, rgba(196,98,58,0.12)));
  border: 1px solid var(--lc-border-soft);
  box-shadow: 0 18px 40px rgba(92,70,50,0.20), inset 0 0 0 6px var(--lc-surface-card);
}
.lc-modal-medallion[hidden] { display: none; }
.lc-modal-medallion span { font-size: 62px; line-height: 1; filter: drop-shadow(0 4px 8px rgba(92,70,50,0.18)); }

/* ---------- Holders (the three who hold the year) ---------- */
/* Distinct textured band: a warm "still water + holding stones" backdrop, set
   apart from the plain-paper Topics section that follows with a soft edge. The
   image sits under a paper scrim so the cards and copy stay legible. */
.lc-holders {
  position: relative; overflow: hidden;
  background-image: url("/assets/learning-community/bg-stillwater.webp");
  background-size: cover; background-position: center; background-repeat: no-repeat;
  border-top: 1px solid var(--lc-border-soft);
}
.lc-holders::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(251,243,226,0.86) 0%, rgba(251,243,226,0.78) 50%, rgba(251,243,226,0.88) 100%);
}
.lc-holders .lc-wrap { position: relative; z-index: 1; }
/* Reduce the doubled section padding where Holders meets Topics and mark the
   seam with a clear divider (desktop only — on mobile the stacked rhythm reads
   fine and the background change already separates the two). */
@media (min-width: 901px) {
  .lc-holders.lc-sec-pad-y { padding-bottom: 72px; }
  .lc-topics.lc-sec-pad-y { padding-top: 72px; }
  .lc-topics { border-top: 1px solid var(--lc-border-soft); }
}
.lc-holders-leaf {
  position: absolute; right: -50px; top: -30px; width: min(300px, 32vw); height: auto;
  opacity: 0.12; pointer-events: none; z-index: 0; transform: rotate(8deg);
}
.lc-holders-intro { font-family: var(--lc-font-body); font-size: 17px; line-height: 1.66; color: var(--lc-ink-600); margin: 14px auto 0; max-width: 62ch; }
.lc-holder-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; gap: 26px;
  margin-top: 52px; align-items: stretch;
}
.lc-holder-card {
  /* extends .lc-teacher-card, but framed as a warm card rather than a bare avatar */
  justify-content: flex-start; gap: 4px; padding: 40px 30px 34px;
  background: var(--lc-surface-card); border: 1px solid var(--lc-border-soft);
  border-radius: var(--lc-radius-xl); box-shadow: var(--lc-shadow-card);
  border-top: 3px solid var(--holder-accent, var(--lc-terracotta-600));
  transition: transform var(--lc-dur-base) var(--lc-ease-glide), box-shadow var(--lc-dur-base) var(--lc-ease-glide);
}
.lc-holder-card:hover { transform: translateY(-6px); box-shadow: var(--lc-shadow-lg); }
.lc-holder-medallion {
  width: 185px; height: 185px; border-radius: 50%; margin-bottom: 22px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 38%, var(--lc-surface-page), var(--holder-tint));
  box-shadow: inset 0 0 0 5px var(--lc-surface-card), 0 10px 24px rgba(92,70,50,0.16);
  transition: transform var(--lc-dur-base) var(--lc-ease-glide);
}
.lc-holder-card:hover .lc-holder-medallion { transform: scale(1.06); }
.lc-holder-emoji { font-size: 75px; line-height: 1; filter: drop-shadow(0 3px 6px rgba(92,70,50,0.16)); }
/* A holder with a real photo (e.g. Mareidi, Racheli soon) reuses
   .lc-teacher-photo's circular frame instead of the emoji medallion, matched
   in size to the medallion above. */
.lc-holder-photo { width: 185px; max-width: 185px; margin-bottom: 22px; box-shadow: inset 0 0 0 5px var(--lc-surface-card), 0 10px 24px rgba(92,70,50,0.16); }
.lc-holder-card:hover .lc-holder-photo { box-shadow: inset 0 0 0 5px var(--lc-surface-card), 0 14px 30px rgba(92,70,50,0.22); }
.lc-holder-role {
  font-family: var(--lc-font-mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--holder-accent, var(--lc-text-accent));
  line-height: 1.5; margin-top: 9px; max-width: 30ch;
}
.lc-holder-short {
  font-family: var(--lc-font-body); font-size: 15px; line-height: 1.6;
  color: var(--lc-ink-500); margin-top: 16px; max-width: 34ch;
}
.lc-holder-tap {
  font-family: var(--lc-font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--holder-accent, var(--lc-text-accent));
  margin-top: auto; padding-top: 20px; opacity: 0.72;
  transition: opacity var(--lc-dur-base) var(--lc-ease-glide);
}
.lc-holder-card:hover .lc-holder-tap { opacity: 1; }
.lc-holders-hint {
  text-align: center; margin-top: 30px;
  font-family: var(--lc-font-display); font-style: italic; font-weight: 300;
  font-size: 17px; color: var(--lc-ink-500);
}

/* ---------- Topics ---------- */
.lc-topics { overflow: hidden; }
.lc-topics-list { display: flex; flex-direction: column; gap: 20px; }
.lc-topic-row { position: relative; overflow: hidden; display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; padding: 26px 30px; border-radius: var(--lc-radius-lg); border: 1px solid var(--lc-border-soft); box-shadow: var(--lc-shadow-card); transition: transform 520ms var(--lc-ease-glide), box-shadow 520ms var(--lc-ease-glide); }
/* Focus lift: JS (initTopicsFocus) marks the row crossing the viewport centre.
   The bevel lives on ::after so only its opacity animates, not the inset shadows. */
.lc-topic-row::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255, 252, 244, 0.9), inset 0 -2px 4px rgba(58, 44, 30, 0.10); opacity: 0; transition: opacity 520ms var(--lc-ease-glide); }
.lc-topic-row.is-forward { transform: scale(1.024); z-index: 2; box-shadow: 0 24px 52px -18px rgba(58, 44, 30, 0.30), 0 6px 16px rgba(58, 44, 30, 0.10); }
.lc-topic-row.is-forward::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .lc-topic-row, .lc-topic-row::after { transition: none; }
}
.lc-topic-bg { position: absolute; inset: 0; background-size: cover; pointer-events: none; }
.lc-topic-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(251,243,226,0.86) 0%, rgba(251,243,226,0.62) 42%, rgba(251,243,226,0.5) 100%); pointer-events: none; }
.lc-topic-label { position: relative; display: flex; align-items: center; gap: 12px; padding-top: 6px; }
.lc-topic-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dot-accent); flex-shrink: 0; }
.lc-topic-label span:last-child { font-family: var(--lc-font-mono); font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dot-accent); line-height: 1.4; }
.lc-topic-chips { position: relative; display: flex; flex-wrap: wrap; gap: 11px; }
.lc-topic-chip { font-family: var(--lc-font-body); font-size: 15px; line-height: 1.2; color: var(--lc-ink-700); background: var(--lc-surface-card); border: 1px solid var(--chip-edge); border-radius: var(--lc-radius-pill); padding: 9px 16px; box-shadow: 0 1px 3px rgba(58,44,30,0.08); transition: transform var(--lc-dur-fast) var(--lc-ease-glide), background var(--lc-dur-fast), box-shadow var(--lc-dur-fast); }
.lc-topic-chip:hover { transform: translateY(-2px); background: var(--chip-tint); border-color: var(--chip-accent); box-shadow: 0 6px 14px -6px var(--chip-edge); }
.lc-topics-footnote { font-family: var(--lc-font-body); font-size: 16px; color: var(--lc-ink-500); margin: 44px 0 0; font-style: italic; }

/* ---------- Stories (testimonials) ---------- */
.lc-stories { position: relative; overflow: hidden; background: var(--lc-surface-sunk); border-top: 1px solid var(--lc-border-soft); border-bottom: 1px solid var(--lc-border-soft); }
/* Soft photographic backdrop behind the testimonial cards. A warm cream wash
   (::after) keeps the ink text + white cards readable over it on any device,
   and it uses cover positioning so it fills tall mobile and wide desktop alike. */
.lc-stories::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url(/assets/learning-community/bg-gathering.webp);
  background-size: cover; background-position: center;
}
.lc-stories::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(246,232,203,0.62) 0%, rgba(246,232,203,0.48) 45%, rgba(246,232,203,0.62) 100%);
}
.lc-stories .lc-wrap { position: relative; z-index: 2; }
/* Decorative whale/dolphin drifting through the stories — anchored bottom-right.
   Sits at z-index 1: above the cream scrim (::after, z-index 0) so it reads
   clearly, but below the video cards (.lc-wrap, z-index 2) so it never covers
   them. If it lived at z-index 0 the 90%-opaque scrim would wash it out. */
.lc-stories-creature {
  position: absolute; right: -40px; bottom: -30px; width: min(460px, 42vw); height: auto;
  opacity: 0.32; pointer-events: none; z-index: 1;
  filter: drop-shadow(0 10px 24px rgba(92,70,50,0.18));
}
/* Whale breach (JS: initWhale). .lc-whale-anim is only added when the JS
   animation actually runs, so without JS/IO the whale stays visible above.
   On entering view it surfaces: rises from below the section edge while
   fading past its resting opacity, sinks back, then keeps a slow drift. */
.lc-stories-creature.lc-whale-anim { opacity: 0; }
.lc-stories-creature.is-surfacing {
  animation: lc-whale-breach 4.5s var(--lc-ease-glide) forwards,
             lc-whale-drift 8s ease-in-out 4.5s infinite;
}
@keyframes lc-whale-breach {
  0%   { opacity: 0;    transform: translateY(58%) rotate(6deg); }
  50%  { opacity: 0.65; transform: translateY(-8%) rotate(-4deg); }
  100% { opacity: 0.32; transform: translateY(0) rotate(0deg); }
}
@keyframes lc-whale-drift {
  0%, 100% { opacity: 0.32; transform: translateY(0) rotate(0deg); }
  50%      { opacity: 0.4; transform: translateY(-14px) rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .lc-stories-creature { animation: none !important; opacity: 0.32 !important; transform: none !important; }
}
.lc-stories-promo { margin: 0 auto 56px; max-width: 860px; }
.lc-video-frame.lc-promo-frame { aspect-ratio: 16 / 9; border-radius: var(--lc-radius-lg); border: 1px solid var(--lc-border-soft); box-shadow: var(--lc-shadow-lg); }
.lc-promo-frame .scrim { background: linear-gradient(180deg, rgba(20,12,6,0) 55%, rgba(20,12,6,0.30) 100%); }
.lc-vid-play-ring--lg { width: 72px; height: 72px; }
.lc-vid-play-ring--lg .tri { margin-left: 5px; border-top-width: 12px; border-bottom-width: 12px; border-left-width: 21px; }
.lc-promo-duration { position: absolute; right: 14px; bottom: 12px; font-family: var(--lc-font-mono); font-size: 11px; letter-spacing: 0.14em; color: rgba(255,253,248,0.92); background: rgba(20,12,6,0.45); -webkit-backdrop-filter: var(--lc-glass-blur); backdrop-filter: var(--lc-glass-blur); border: 1px solid rgba(255,255,255,0.22); border-radius: var(--lc-radius-pill); padding: 4px 11px; }
.lc-promo-kicker { text-align: center; margin-top: 14px; }
.lc-video-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lc-video-card { margin: 0; background: var(--lc-surface-card); border: 1px solid var(--lc-border-soft); border-radius: var(--lc-radius-lg); overflow: hidden; box-shadow: var(--lc-shadow-card); transition: transform var(--lc-dur-base) var(--lc-ease-glide), box-shadow var(--lc-dur-base) var(--lc-ease-out); }
.lc-video-card:hover { transform: translateY(-5px); box-shadow: var(--lc-shadow-lg); }
.lc-video-frame { position: relative; aspect-ratio: 3 / 4; background: var(--lc-ink-900); overflow: hidden; }
.lc-video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--lc-ink-900); }
.lc-vid-play-btn { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: none; cursor: pointer; background: transparent; display: flex; align-items: center; justify-content: center; }
.lc-vid-play-btn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lc-vid-play-btn .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,12,6,0) 38%, rgba(20,12,6,0.42) 100%); }
.lc-vid-play-ring { position: relative; width: 46px; height: 46px; border-radius: 50%; background: var(--lc-glass-bg); -webkit-backdrop-filter: var(--lc-glass-blur); backdrop-filter: var(--lc-glass-blur); border: 1px solid rgba(255,255,255,0.55); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(20,12,6,0.34); transition: transform var(--lc-dur-base) var(--lc-ease-glide), background var(--lc-dur-base); }
.lc-vid-play-btn:hover .lc-vid-play-ring { transform: scale(1.08); background: rgba(255,253,248,0.95); }
.lc-vid-play-btn:active .lc-vid-play-ring { transform: scale(0.97); }
.lc-vid-play-ring .tri { margin-left: 3px; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 14px solid var(--lc-ink-800); }
.lc-vid-cap { padding: 14px 16px 18px; }
.lc-vid-quote { margin: 0; font-family: var(--lc-font-display); font-style: italic; font-weight: 300; font-size: 16px; line-height: 1.3; color: var(--lc-ink-700); }
.lc-vid-name { margin-top: 10px; font-family: var(--lc-font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lc-text-accent); }
.lc-story-more-wrap { display: flex; justify-content: center; margin-top: 36px; }
.lc-story-more-btn { font-family: var(--lc-font-mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; padding: 14px 28px; border-radius: var(--lc-radius-pill); cursor: pointer; background: var(--lc-surface-card); border: 1px solid var(--lc-border-medium); color: var(--lc-ink-700); box-shadow: var(--lc-shadow-card); transition: transform var(--lc-dur-base) var(--lc-ease-glide), box-shadow var(--lc-dur-base) var(--lc-ease-out), border-color var(--lc-dur-base), color var(--lc-dur-base); }
.lc-story-more-btn:hover { transform: translateY(-2px); border-color: var(--lc-text-accent); color: var(--lc-text-accent); box-shadow: var(--lc-shadow-md); }
.lc-stories-footer { text-align: center; font-family: var(--lc-font-body); font-size: 18px; line-height: 1.6; color: var(--lc-ink-600); margin: 40px auto 0; max-width: 60ch; }
.lc-hidden { display: none !important; }

/* ---------- Practical ---------- */
.lc-practical { overflow: hidden; }
/* Small stone-tower cairn behind the "Practical information" heading — a
   quiet echo of the one on the final CTA. z-index -1 keeps it BEHIND the
   title text, and isolation scopes that -1 to the head itself so the image
   still paints above the section's sunk background. The low opacity makes it
   a watermark-style accent rather than a sticker on the words. */
.lc-practical-head { position: relative; isolation: isolate; }
.lc-practical-head .lc-h2 { font-size: clamp(40px, 5.6vw, 68px); }
.lc-practical-cairn {
  position: absolute; top: -24px; right: 12px; z-index: -1;
  width: clamp(120px, 13vw, 180px); height: auto; pointer-events: none;
  opacity: 0.3; filter: drop-shadow(0 8px 16px rgba(92,70,50,0.12));
}
@media (max-width: 760px) {
  .lc-practical-cairn { top: -30px; right: -6px; width: 104px; opacity: 0.26; }
}
.lc-practical-panels { display: flex; flex-direction: column; gap: 22px; }
.lc-practical-card { background: var(--lc-surface-card); border: 1px solid var(--lc-border-soft); border-radius: var(--lc-radius-lg); padding: 32px; box-shadow: var(--lc-shadow-card); }
.lc-panel-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--lc-border-soft); }
.lc-panel-icon { width: 58px; height: 58px; flex-shrink: 0; border-radius: var(--lc-radius-md); background: var(--lc-surface-sunk); border: 1px solid var(--lc-border-soft); display: flex; align-items: center; justify-content: center; }
.lc-panel-icon img { width: 36px; height: 36px; object-fit: contain; }
.lc-panel-head > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lc-panel-step { display: block; font-family: var(--lc-font-mono); font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--lc-text-accent); }
.lc-panel-title { display: block; font-family: var(--lc-font-display); font-weight: 300; font-size: 27px; line-height: 1.05; color: var(--lc-ink-700); }
.lc-when-range { font-family: var(--lc-font-display); font-weight: 300; font-size: 32px; line-height: 1.12; color: var(--lc-ink-700); }
.lc-when-rhythm { font-family: var(--lc-font-body); font-size: 16.5px; line-height: 1.55; color: var(--lc-ink-600); margin-top: 12px; }
.lc-zones-note { font-family: var(--lc-font-body); font-size: 15px; font-style: italic; color: var(--lc-ink-500); margin-bottom: 16px; }
.lc-zones-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); column-gap: 40px; }
.lc-zone-local { grid-column: 1 / -1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 6px; padding: 11px 14px; margin: 0 -14px 4px; border-radius: var(--lc-radius-sm); background: var(--lc-surface-sunk); }
.lc-zone-local > span { align-items: center !important; }
.lc-zone-local .lbl { font-family: var(--lc-font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lc-text-accent); display: block; text-align: center; }
.lc-zone-local .tz { font-family: var(--lc-font-body); font-size: 13px; color: var(--lc-ink-500); text-align: center; }
.lc-zone-local .val { font-family: var(--lc-font-body); font-size: 16px; font-weight: 500; color: var(--lc-ink-700); text-align: center; }
.lc-zone-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-top: 1px solid var(--lc-border-soft); }
.lc-zone-row .z { font-family: var(--lc-font-mono); font-size: 13px; letter-spacing: 0.14em; color: var(--lc-ink-700); }
.lc-zone-row .city { font-family: var(--lc-font-body); font-size: 15px; color: var(--lc-ink-500); margin-left: 10px; }
.lc-zone-row .t { font-family: var(--lc-font-body); font-size: 16px; color: var(--lc-ink-600); }
.lc-sched-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 40px; }
.lc-sched-feb { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 4px 0 18px; }
.lc-sched-feb-head { display: flex; align-items: baseline; gap: 12px; }
.lc-sched-feb-head .m { font-family: var(--lc-font-display); font-weight: 300; font-size: 21px; color: var(--lc-ink-700); }
.lc-sched-feb-head .tag { font-family: var(--lc-font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--lc-text-accent); }
.lc-sched-feb-blocks { display: flex; flex-wrap: wrap; justify-content: center; }
.lc-sched-feb-block { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 2px 22px; border-left: 1px solid var(--lc-border-soft); }
.lc-sched-feb-block:first-child { border-left: none; }
.lc-sched-feb-block .d { font-family: var(--lc-font-display); font-weight: 300; font-size: 19px; color: var(--lc-ink-700); white-space: nowrap; }
.lc-sched-feb-block .dur { font-family: var(--lc-font-body); font-size: 13.5px; color: var(--lc-ink-500); white-space: nowrap; }
.lc-sched-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-top: 1px solid var(--lc-border-soft); }
.lc-sched-row .m { font-family: var(--lc-font-display); font-weight: 300; font-size: 21px; color: var(--lc-ink-700); flex-shrink: 0; }
.lc-sched-row .days { font-family: var(--lc-font-body); font-size: 15.5px; line-height: 1.45; color: var(--lc-ink-600); text-align: right; }
.lc-sched-toggle-wrap { margin-top: 20px; }
.lc-sched-toggle { font-family: var(--lc-font-body); font-size: 16px; font-style: italic; color: var(--lc-text-accent); background: none; border: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.lc-sched-toggle .ar { display: inline-block; transition: transform var(--lc-dur-base) var(--lc-ease-out); }
.lc-sched-toggle[aria-expanded="true"] .ar { transform: rotate(90deg); }
.lc-sched-tz { margin-top: 22px; }
.lc-sched-tz-note { font-family: var(--lc-font-mono); font-size: 12px; color: var(--lc-ink-500); margin-bottom: 16px; }
.lc-sched-cal { font-family: var(--lc-font-mono); font-size: 12px; color: var(--lc-ink-500); margin: -10px 0 16px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.lc-sched-cal a { color: var(--lc-text-accent); text-decoration: underline; text-underline-offset: 2px; }
.lc-sched-cal a:hover { color: var(--lc-accent-hover); }
.lc-sched-tz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); grid-auto-rows: 1fr; gap: 14px; }
/* February (immersion) card: twice as wide so its many chips lie flat; the
   1fr auto-rows keep every month card the same height. */
.lc-sched-month--wide { grid-column: span 2; }
@media (max-width: 520px) {
  /* Single column: no wide span, and no 1fr rows (they'd stretch every month
     to February's height). */
  .lc-sched-tz-grid { grid-auto-rows: auto; }
  .lc-sched-month--wide { grid-column: auto; }
}
.lc-sched-month { background: var(--lc-surface-card); border: 1px solid var(--lc-border-soft); border-radius: var(--lc-radius-md); padding: 16px 18px; box-shadow: var(--lc-shadow-card); }
.lc-sched-month-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.lc-sched-month-head .m { font-family: var(--lc-font-display); font-weight: 300; font-size: 19px; color: var(--lc-ink-700); }
.lc-sched-month-head .tm { font-family: var(--lc-font-mono); font-size: 13px; font-weight: 500; color: var(--lc-text-accent); }
.lc-sched-note { font-family: var(--lc-font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lc-ink-400); margin: -6px 0 12px; }
.lc-sched-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.lc-sched-run { display: flex; flex-wrap: wrap; gap: 6px; }
.lc-sched-chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 9px; border-radius: var(--lc-radius-pill); background: var(--lc-surface-sunk); border: 1px solid var(--lc-border-soft); white-space: nowrap; }
.lc-sched-chip .wd { font-family: var(--lc-font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--lc-ink-400); text-transform: uppercase; }
.lc-sched-chip .dn { font-family: var(--lc-font-body); font-size: 14px; color: var(--lc-ink-700); }
.lc-sched-chip .du { font-family: var(--lc-font-mono); font-size: 10px; color: var(--lc-text-accent); }
.lc-sched-chip--break { font-family: var(--lc-font-body); font-size: 14px; font-style: italic; color: var(--lc-ink-500); }

.lc h3.lc-join-title { font-family: var(--lc-font-display); font-weight: 300; font-size: 30px; color: var(--lc-ink-700); margin: 70px 0 28px; }
.lc-join-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.lc-join-card { display: flex; gap: 16px; align-items: flex-start; background: var(--lc-surface-card); border: 1px solid var(--lc-border-soft); border-radius: var(--lc-radius-lg); padding: 22px 24px; box-shadow: var(--lc-shadow-card); }
.lc-join-card img { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.lc-join-card .t { font-family: var(--lc-font-body); font-size: 17.5px; font-weight: 500; color: var(--lc-ink-700); }
.lc-join-card .d { font-family: var(--lc-font-body); font-size: 15.5px; line-height: 1.5; color: var(--lc-ink-500); margin-top: 5px; }

/* ---------- Groups (don't come alone) ---------- */
.lc-groups { overflow: hidden; }
.lc-groups-intro { max-width: 720px; }
.lc-groups-intro p { font-family: var(--lc-font-body); font-size: 18.5px; line-height: 1.6; color: var(--lc-ink-600); margin: 28px 0 0; }
.lc-group-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; }
.lc-group-card { background: var(--lc-surface-card); border: 1px solid var(--lc-border-soft); border-radius: var(--lc-radius-lg); padding: 28px; box-shadow: var(--lc-shadow-card); text-align: center; }
/* margin-inline auto: imgs are display:block globally (site.css), so the card's
   text-align:center doesn't center them. */
.lc-group-card img { width: 84px; height: 84px; object-fit: contain; margin: 0 auto 16px; filter: drop-shadow(0 6px 14px rgba(92,70,50,0.16)); }
.lc-group-card .t { font-family: var(--lc-font-display); font-weight: 300; font-size: 24px; color: var(--lc-ink-700); margin-bottom: 8px; }
.lc-group-card .d { font-family: var(--lc-font-body); font-size: 16px; line-height: 1.5; color: var(--lc-ink-500); }
.lc-groups-cta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 40px; }
.lc-groups-cta-note { font-family: var(--lc-font-body); font-style: italic; font-size: 17px; color: var(--lc-ink-500); }

/* ---------- FAQ ---------- */
.lc-faq { position: relative; background: var(--lc-surface-sunk); border-top: 1px solid var(--lc-border-soft); border-bottom: 1px solid var(--lc-border-soft); overflow: hidden; }
.lc-faq-inner { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; }
/* Decorative snail resting at the bottom of the FAQ — a small, slow closing note
   to the section. Soft and low-contrast so it never competes with the questions. */
.lc-faq-creature {
  position: absolute; right: -12px; bottom: -18px; width: min(240px, 32vw); height: auto;
  opacity: 0.2; pointer-events: none; z-index: 0;
  filter: drop-shadow(0 10px 24px rgba(92,70,50,0.18));
}
.lc-faq-item { border-bottom: 1px solid var(--lc-border-soft); }
.lc-faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; background: none; border: none; cursor: pointer; text-align: left; }
.lc-faq-q .q { font-family: var(--lc-font-display); font-weight: 300; font-size: 25px; line-height: 1.15; color: var(--lc-ink-700); }
.lc-faq-q .plus { flex-shrink: 0; font-family: var(--lc-font-mono); font-size: 22px; color: var(--lc-text-accent); transition: transform var(--lc-dur-base) var(--lc-ease-glide); }
.lc-faq-item.is-open .lc-faq-q .plus { transform: rotate(45deg); }
.lc-faq-a { font-family: var(--lc-font-body); font-size: 17px; line-height: 1.6; color: var(--lc-ink-600); margin: 0 0 26px; max-width: 70ch; display: none; }
.lc-faq-item.is-open .lc-faq-a { display: block; }

/* ---------- Final CTA ---------- */
/* The wave art is the section background (top-anchored, full-width). Below the
   wave the image's own cream continues, so the section melts into the page. */
.lc-final-cta { overflow: hidden; background-color: var(--lc-surface-page); background-repeat: no-repeat; background-position: center; background-size: cover; }
/* Soft cream fade at the very bottom so the section blends into whatever follows. */
.lc-final-cta-wash { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(251,241,222,0) 60%, rgba(251,241,222,0.55) 100%); pointer-events: none; }
/* Stone-tower cairn floating freely on the wave below the button row — not
   aligned with the buttons, just resting further down in the water art.
   Faded like the wave itself (the .lc-final-cta-wash cream overlay), so it
   reads as part of the background rather than a floating sticker. */
.lc-final-cta-cairn {
  position: absolute; left: 50%; bottom: -2%; z-index: 1;
  transform: translateX(-160%);
  width: clamp(96px, 11vw, 150px); height: auto; pointer-events: none;
  opacity: 0.55; filter: drop-shadow(0 6px 14px rgba(92,70,50,0.18));
}
.lc-final-cta-inner { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; padding: 88px 40px; text-align: center; }
.lc-final-cta-inner h2 { font-family: var(--lc-font-display); font-weight: 300; font-size: clamp(40px, 5.4vw, 72px); line-height: 1.04; letter-spacing: -0.025em; color: var(--lc-ink-800); margin: 0; }
.lc-final-cta-inner p { font-family: var(--lc-font-body); font-weight: 300; font-size: 20px; line-height: 1.55; color: var(--lc-ink-600); margin: 26px auto 0; max-width: 50ch; }
.lc-final-cta-inner .lc-cta-row { justify-content: center; }

/* ---------- Connect (book call / live Q&A) ---------- */
.lc-connect { background: var(--lc-surface-sunk); border-top: 1px solid var(--lc-border-soft); }
.lc-connect-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.lc-connect-card { background: var(--lc-surface-card); border: 1px solid var(--lc-border-soft); border-radius: var(--lc-radius-xl); padding: 40px; box-shadow: var(--lc-shadow-card); display: flex; flex-direction: column; }
.lc-connect-card > img { width: 56px; height: 56px; object-fit: contain; margin-bottom: 20px; }
.lc-connect-card h3 { font-family: var(--lc-font-display); font-weight: 300; font-size: 34px; line-height: 1.1; color: var(--lc-ink-700); margin: 0; }
.lc-connect-card p { font-family: var(--lc-font-body); font-size: 17.5px; line-height: 1.6; color: var(--lc-ink-600); margin: 18px 0 24px; }
.lc-qa-list { display: flex; flex-direction: column; margin-bottom: 24px; }
.lc-qa-item { display: flex; flex-direction: column; gap: 3px; padding: 13px 0; border-top: 1px solid var(--lc-border-soft); }
.lc-qa-item .d { font-family: var(--lc-font-body); font-size: 16.5px; font-weight: 500; color: var(--lc-ink-700); }
.lc-qa-item .t { font-family: var(--lc-font-mono); font-size: 11.5px; letter-spacing: 0.12em; color: var(--lc-ink-500); }
.lc-qa-item .event-localtime { font-family: var(--lc-font-body); font-size: 13px; color: var(--lc-text-accent); font-weight: 500; }
.lc-qa-foot { margin-top: auto; }
.lc-qa-note { font-family: var(--lc-font-body); font-size: 15px; font-style: italic; color: var(--lc-ink-500); margin-bottom: 16px; }
.lc-connect-card .lc-btn { align-self: flex-start; }

/* ---------- Bottom signup ---------- */
.lc-signup { background: var(--lc-surface-page); border-top: 1px solid var(--lc-border-soft); }
.lc-signup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.lc-signup h2 { font-family: var(--lc-font-display); font-weight: 300; font-size: clamp(34px, 4.4vw, 52px); line-height: 1.06; letter-spacing: -0.02em; color: var(--lc-ink-800); margin: 0; }
.lc-signup h2 em { font-style: italic; }
.lc-signup p { font-family: var(--lc-font-body); font-size: 18px; line-height: 1.6; color: var(--lc-ink-600); margin: 22px 0 0; max-width: 50ch; }
.lc-signup-card { background: var(--lc-surface-card); border: 1px solid var(--lc-border-soft); border-radius: var(--lc-radius-xl); padding: 36px; box-shadow: var(--lc-shadow-card); }
.lc-signup-card .fh { font-family: var(--lc-font-display); font-weight: 300; font-size: 28px; color: var(--lc-ink-700); }
.lc-signup-card .fb { font-family: var(--lc-font-body); font-size: 15px; color: var(--lc-ink-500); margin: 6px 0 20px; }
.lc-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.lc-field label { font-family: var(--lc-font-mono); font-size: var(--lc-mono-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--lc-ink-500); }
.lc-input { font-family: var(--lc-font-body); font-size: 16px; color: var(--lc-ink-800); background: var(--lc-surface-page); border: 1px solid var(--lc-border-medium); border-radius: var(--lc-radius-sm); padding: 12px 14px; width: 100%; transition: border-color var(--lc-dur-base) var(--lc-ease-out), box-shadow var(--lc-dur-base) var(--lc-ease-out); }
.lc-input:focus { outline: none; border-color: var(--lc-accent); box-shadow: 0 0 0 3px rgba(219,106,38,0.18); }
.lc-input::placeholder { color: var(--lc-ink-300); }
.lc-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lc-check { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0 16px; font-family: var(--lc-font-body); font-size: 15px; color: var(--lc-ink-600); cursor: pointer; }
.lc-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.lc-check .box { flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--lc-border-medium); background: var(--lc-surface-page); display: inline-flex; align-items: center; justify-content: center; color: transparent; transition: background var(--lc-dur-fast), border-color var(--lc-dur-fast); }
.lc-check .box svg { width: 13px; height: 13px; }
.lc-check input:checked + .box { background: var(--lc-accent); border-color: var(--lc-accent); color: #fff; }
.lc-form-note { font-family: var(--lc-font-body); font-size: 13px; color: var(--lc-ink-400); margin: 12px 0 0; }
/* success message rendered by site.js replaces the form */
.lc-signup-card .form-success { font-family: var(--lc-font-body); font-size: 16px; line-height: 1.6; color: var(--lc-sage-700); }

/* ---------- Registration page ---------- */
.lc-reg-topbar { position: sticky; top: 0; z-index: 50; background: var(--lc-glass-bg); -webkit-backdrop-filter: var(--lc-glass-blur); backdrop-filter: var(--lc-glass-blur); border-bottom: 1px solid var(--lc-border-soft); }
.lc-reg-topbar-inner { max-width: var(--lc-content-wide); margin: 0 auto; padding: 16px 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lc-reg-topbar-inner > a:first-child { flex: none; line-height: 0; }
.lc-reg-topbar img { height: 30px; width: auto; flex: none; }
.lc-reg-back { font-family: var(--lc-font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lc-ink-600); text-decoration: none; }
@media (max-width: 620px) {
  .lc-reg-back-rest { display: none; }
}
.lc-reg-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--lc-border-soft); }
/* Cover the FULL hero at any aspect ratio (mobile is tall+narrow, so height:auto
   left bands of bare background above/below the video). inset:0 + object-fit:cover
   keeps it filled; a soft scrim keeps the ink text readable over the footage. */
.lc-reg-hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.lc-reg-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to right, rgba(251,241,222,0.82) 0%, rgba(251,241,222,0.55) 50%, rgba(251,241,222,0.32) 100%); }
.lc-reg-hero-inner { position: relative; z-index: 2; max-width: var(--lc-content-max); margin: 0 auto; padding: 64px 40px 56px; }
.lc-reg-hero h1 { font-family: var(--lc-font-display); font-weight: 300; font-size: clamp(40px, 5.2vw, 66px); line-height: 1.1; letter-spacing: -0.025em; color: var(--lc-ink-800); margin: 18px 0 0; max-width: 18ch; }
.lc-reg-hero h1 em { font-style: italic; }
.lc-reg-hero p { font-family: var(--lc-font-body); font-weight: 300; font-size: 19px; line-height: 1.55; color: var(--lc-ink-600); margin: 30px 0 0; max-width: 58ch; }

.lc-reg-grid { display: grid; grid-template-columns: 1.35fr 0.95fr; gap: 40px; align-items: start; }
.lc-reg-col { display: flex; flex-direction: column; gap: 28px; }
.lc-reg-card { background: var(--lc-surface-card); border: 1px solid var(--lc-border-soft); border-radius: var(--lc-radius-xl); padding: 36px; box-shadow: var(--lc-shadow-card); }
.lc-step-label { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.lc-step-n { width: 30px; height: 30px; border-radius: 50%; background: var(--lc-accent-soft); color: var(--lc-text-accent); display: inline-flex; align-items: center; justify-content: center; font-family: var(--lc-font-mono); font-size: 13px; font-weight: 600; flex-shrink: 0; }
.lc-step-label h2 { font-family: var(--lc-font-display); font-weight: 300; font-size: 30px; line-height: 1.1; color: var(--lc-ink-700); margin: 0; }

.lc-group-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.lc-config-btn { text-align: left; cursor: pointer; background: var(--lc-surface-page); border: 1.5px solid var(--lc-border-soft); border-radius: var(--lc-radius-lg); padding: 20px 22px; display: flex; gap: 16px; align-items: center; transition: border-color var(--lc-dur-base) var(--lc-ease-out), background var(--lc-dur-base) var(--lc-ease-out); }
.lc-config-btn.is-active { background: var(--lc-accent-soft); border-color: var(--lc-accent); }
.lc-config-btn img { width: 52px; height: 52px; object-fit: contain; flex-shrink: 0; }
.lc-config-btn .cl { font-family: var(--lc-font-display); font-weight: 300; font-size: 22px; color: var(--lc-ink-700); line-height: 1.1; }
.lc-config-btn .cs { font-family: var(--lc-font-body); font-size: 14px; color: var(--lc-ink-500); margin-top: 3px; }
.lc-badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--lc-font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lc-sage-700); background: rgba(144,154,110,0.16); border-radius: var(--lc-radius-pill); padding: 4px 10px; margin-top: 8px; }
.lc-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lc-sage-600); }
.lc-count-row { margin-top: 22px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.lc-count-row .lbl { font-family: var(--lc-font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lc-ink-500); }
.lc-stepper { display: flex; align-items: center; gap: 12px; }
.lc-step-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--lc-border-medium); background: var(--lc-surface-card); cursor: pointer; font-size: 20px; color: var(--lc-ink-700); display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.lc-count-val { font-family: var(--lc-font-display); font-size: 26px; color: var(--lc-ink-700); min-width: 32px; text-align: center; }

.lc-cur-row { display: flex; gap: 8px; margin-bottom: 22px; }
.lc-cur-btn { font-family: var(--lc-font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; padding: 8px 16px; border-radius: var(--lc-radius-pill); border: 1px solid var(--lc-border-medium); background: transparent; color: var(--lc-ink-500); }
.lc-cur-btn.is-active { border-color: var(--lc-accent); background: var(--lc-accent-soft); color: var(--lc-text-accent); }
.lc-tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lc-tier-btn { position: relative; text-align: center; cursor: pointer; background: var(--lc-surface-page); border: 1.5px solid var(--lc-border-soft); border-radius: var(--lc-radius-lg); padding: 22px; box-shadow: none; transition: border-color var(--lc-dur-base) var(--lc-ease-out), box-shadow var(--lc-dur-base) var(--lc-ease-out), transform var(--lc-dur-base) var(--lc-ease-glide); display: flex; flex-direction: column; align-items: center; }
.lc-tier-btn.is-active { background: var(--lc-surface-card); border-color: var(--lc-accent); box-shadow: var(--lc-shadow-card); }
.lc-tier-icon { width: 72px; height: 72px; object-fit: contain; margin-bottom: 12px; filter: drop-shadow(0 4px 10px rgba(90,60,30,0.14)); }
.lc-tier-btn .tn { font-family: var(--lc-font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--lc-text-accent); }
/* Struck regular price shown above the discounted price during a promo phase. */
.lc-tier-btn .tp-was { font-family: var(--lc-font-display); font-weight: 300; font-size: 20px; color: var(--lc-ink-400); text-decoration: line-through; margin: 10px 0 -4px; opacity: 0.8; }
.lc-tier-btn .tp { font-family: var(--lc-font-display); font-weight: 300; font-size: 38px; color: var(--lc-ink-800); margin: 10px 0 8px; }
.lc-tier-btn .tp-was:not([hidden]) + .tp { margin-top: 2px; }
.lc-tier-btn .td { font-family: var(--lc-font-body); font-size: 14.5px; line-height: 1.5; color: var(--lc-ink-500); }
/* Middle tier ("Most chosen") — accent ring + slight lift to draw the eye. */
.lc-tier-btn.is-featured { border-color: var(--lc-ember-400); box-shadow: var(--lc-glow-ember); }
.lc-tier-btn.is-featured.is-active { border-color: var(--lc-accent); }
.lc-tier-flag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font-family: var(--lc-font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: var(--lc-ember-gradient); border-radius: var(--lc-radius-pill); padding: 4px 12px; box-shadow: var(--lc-glow-ember); white-space: nowrap; }
.lc-custom-row { margin-top: 20px; }
.lc-hint { font-family: var(--lc-font-body); font-size: 13px; color: var(--lc-ink-400); margin-top: 6px; }

.lc-pay-note-row { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.lc-pay-note-row span { font-family: var(--lc-font-body); font-size: 14.5px; color: var(--lc-ink-500); }
.lc-pay-placeholder { background: var(--lc-surface-page); border: 1px dashed var(--lc-border-medium); border-radius: var(--lc-radius-md); padding: 22px 24px; font-family: var(--lc-font-body); font-size: 15px; line-height: 1.55; color: var(--lc-ink-500); }

/* Pay-method chooser (Step 4) */
.lc-pay-methods { display: flex; flex-direction: column; gap: 12px; }
.lc-pay-method { text-align: left; cursor: pointer; background: var(--lc-surface-page); border: 1.5px solid var(--lc-border-soft); border-radius: var(--lc-radius-lg); padding: 18px 20px; transition: border-color var(--lc-dur-base) var(--lc-ease-out), background var(--lc-dur-base) var(--lc-ease-out); display: flex; flex-direction: column; gap: 6px; }
.lc-pay-method.is-active { background: var(--lc-surface-card); border-color: var(--lc-accent); box-shadow: var(--lc-shadow-card); }
.lc-pay-method-label { font-family: var(--lc-font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lc-text-accent); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lc-pay-method-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: 0.12em; color: #fff; background: var(--lc-ember-gradient); border-radius: var(--lc-radius-pill); padding: 3px 10px; box-shadow: var(--lc-glow-ember); text-transform: uppercase; }
.lc-pay-method-chip .dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; opacity: 0.9; }
.lc-pay-method-terms { font-family: var(--lc-font-body); font-size: 14px; line-height: 1.5; color: var(--lc-ink-500); }

/* Who pays? (§9a) — group-only chooser, same selectable-card idiom as pay methods */
.lc-groupmode-row { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.lc-groupmode-btn { text-align: left; cursor: pointer; background: var(--lc-surface-page); border: 1.5px solid var(--lc-border-soft); border-radius: var(--lc-radius-lg); padding: 14px 16px; transition: border-color var(--lc-dur-base) var(--lc-ease-out), background var(--lc-dur-base) var(--lc-ease-out); display: flex; flex-direction: column; gap: 4px; }
.lc-groupmode-btn.is-active { background: var(--lc-surface-card); border-color: var(--lc-accent); box-shadow: var(--lc-shadow-card); }
.lc-groupmode-btn .gl { font-family: var(--lc-font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lc-text-accent); }
.lc-groupmode-btn .gs { font-family: var(--lc-font-body); font-size: 13.5px; line-height: 1.5; color: var(--lc-ink-500); }

/* Group-invite landing (§9a) — banner above the form when opened via ?invite= */
.lc-invite-banner { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; background: rgba(232, 130, 58, 0.10); border: 1px solid rgba(219, 106, 38, 0.22); border-radius: var(--lc-radius-lg); }
.lc-invite-pill { align-self: flex-start; font-family: var(--lc-font-mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: #fff; background: var(--lc-ember-gradient); border-radius: var(--lc-radius-pill); padding: 5px 12px; box-shadow: var(--lc-glow-ember); }
.lc-invite-banner p { margin: 0; font-family: var(--lc-font-body); font-size: 14.5px; line-height: 1.55; color: var(--lc-ink-500); }

/* Invite mode locks the choices the code already made (seat, scale, currency) */
.lc-invite-mode .lc-config-btn, .lc-invite-mode .lc-tier-btn, .lc-invite-mode .lc-cur-btn, .lc-invite-mode .lc-custom-row { opacity: 0.55; pointer-events: none; }
/* …and hides what doesn't apply at all: the join/scale steps (frozen by the
   code — js renumbers the remaining steps) and the scholarship card. */
.lc-invite-mode #lc-step-join,
.lc-invite-mode #lc-step-scale,
.lc-invite-mode .lc-scholarship { display: none; }

/* One-seat note under the summary for "everyone pays their own share" */
.lc-summary-note { font-family: var(--lc-font-body); font-size: 13px; line-height: 1.5; color: var(--lc-ink-500); margin-top: 10px; padding: 10px 12px; background: rgba(232, 130, 58, 0.08); border-radius: var(--lc-radius-md); }

.lc-discount-row { display: flex; gap: 10px; align-items: stretch; }
.lc-discount-row .lc-input { flex: 1 1 auto; }
.lc-discount-apply { flex: 0 0 auto; padding: 0 20px; border-radius: var(--lc-radius-md); background: var(--lc-surface-card); border: 1.5px solid var(--lc-border-medium); color: var(--lc-text-accent); font-family: var(--lc-font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: border-color var(--lc-dur-base) var(--lc-ease-out), background var(--lc-dur-base) var(--lc-ease-out); }
.lc-discount-apply:hover { border-color: var(--lc-accent); background: var(--lc-surface-page); }
.lc-pay-refund { font-family: var(--lc-font-body); font-size: 13px; color: var(--lc-ink-400); margin-top: 16px; }
.lc-pay-refund a { color: var(--lc-text-accent); }
.lc-summary-error { display: none; margin-top: 10px; padding: 12px 14px; background: rgba(219,106,38,0.10); border: 1px solid var(--lc-ember-400); border-radius: var(--lc-radius-md); font-family: var(--lc-font-body); font-size: 14px; color: var(--lc-ember-600); }
.lc-summary-error:not([hidden]) { display: block; }

/* Turnstile: invisible for normal users (interaction-only). When empty it takes
   no space; if a rare challenge appears it's small, centered and low-key. */
.lc-turnstile:empty { display: none; }
.lc-turnstile { display: flex; justify-content: center; margin-top: 12px; opacity: 0.75; transform: scale(0.9); transform-origin: top center; }

/* Sticky sidebar. When the summary card is taller than the viewport (long
   configs, promo banner, scholarship block), cap it to the viewport and let it
   scroll on its own — so the pay button is always reachable without moving the
   whole page. Otherwise it just pins as before. */
.lc-summary { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-gutter: stable; padding: 14px; margin: -14px; }
.lc-summary-inner { background: var(--lc-surface-card); border: 1px solid var(--lc-border-medium); border-radius: var(--lc-radius-xl); box-shadow: var(--lc-shadow-lg); overflow: hidden; }
.lc-summary-head { position: relative; padding: 28px 32px 22px; background: var(--lc-ember-gradient); }
.lc-summary-head .eb { font-family: var(--lc-font-mono); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,0.85); }
.lc-summary-head .ti { font-family: var(--lc-font-display); font-weight: 300; font-style: italic; font-size: 30px; color: #fff; margin-top: 6px; }
.lc-summary-body { padding: 26px 32px 32px; }
.lc-summary-row { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; }
.lc-summary-row .lbl { font-family: var(--lc-font-body); font-size: 15px; color: var(--lc-ink-500); }
.lc-summary-row .val { font-family: var(--lc-font-body); font-size: 16px; font-weight: 500; color: var(--lc-ink-700); }
.lc-summary-row.accent .val { color: var(--lc-sage-700); }
.lc-summary-total { border-top: 1px solid var(--lc-border-soft); margin: 16px 0; padding-top: 16px; display: flex; justify-content: space-between; align-items: baseline; }
.lc-summary-total .lbl { font-family: var(--lc-font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lc-ink-600); }
.lc-summary-total .val { font-family: var(--lc-font-display); font-weight: 300; font-size: 44px; color: var(--lc-ink-800); line-height: 1; }
/* Base is hidden; the class sets flex only when NOT [hidden]. A bare
   `display:flex` would override the [hidden] attribute and show the box on load. */
.lc-summary-success { display: none; align-items: center; gap: 12px; padding: 16px 18px; background: rgba(144,154,110,0.14); border-radius: var(--lc-radius-md); margin-top: 8px; }
.lc-summary-success:not([hidden]) { display: flex; }
.lc-summary-success .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lc-sage-600); flex-shrink: 0; }
.lc-summary-success span:last-child { font-family: var(--lc-font-body); font-size: 15.5px; color: var(--lc-ink-700); line-height: 1.4; }
.lc-summary-foot { font-family: var(--lc-font-body); font-size: 13.5px; line-height: 1.55; color: var(--lc-ink-500); margin: 18px 0 0; text-align: center; }
.lc-summary-foot a { color: var(--lc-text-accent); text-decoration: none; }

/* ---------- Promo banner (§17): savings pill + deadline, no timer ---------- */
.lc-promo { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; padding: 14px 16px; background: rgba(232, 130, 58, 0.10); border: 1px solid rgba(219, 106, 38, 0.22); border-radius: var(--lc-radius-md); }
.lc-promo-pill { align-self: flex-start; font-family: var(--lc-font-mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: #fff; background: var(--lc-ember-gradient); border-radius: var(--lc-radius-pill); padding: 5px 12px; box-shadow: var(--lc-glow-ember); }
.lc-promo-deadline { font-family: var(--lc-font-body); font-size: 14px; font-weight: 600; color: var(--lc-ember-600); }
.lc-promo-next { font-family: var(--lc-font-body); font-size: 13px; color: var(--lc-ink-500); line-height: 1.45; }
/* Struck-through regular price shown next to the live discounted figure. */
.lc-strike { text-decoration: line-through; color: var(--lc-ink-500); font-weight: 400; margin-right: 8px; opacity: 0.75; }

/* ---------- Scholarship option (§14): open → CTA; before 1 Oct 2026 → coming ---------- */
.lc-scholarship { margin-top: 16px; padding: 14px 16px; background: rgba(144,154,110,0.10); border: 1px solid rgba(144,154,110,0.22); border-radius: var(--lc-radius-md); }
.lc-scholarship.is-coming { opacity: 0.82; }
.lc-scholarship-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--lc-font-body); font-size: 15px; font-weight: 600; color: var(--lc-ink-700); }
.lc-scholarship-badge { font-family: var(--lc-font-mono); font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--lc-sage-700); background: rgba(144,154,110,0.18); border-radius: var(--lc-radius-pill); padding: 3px 9px; }
.lc-scholarship-body { font-family: var(--lc-font-body); font-size: 13.5px; line-height: 1.5; color: var(--lc-ink-500); margin: 6px 0 0; }
.lc-scholarship-cta { display: inline-block; margin-top: 10px; font-family: var(--lc-font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--lc-sage-700); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }

/* ---------- Decorative floats ---------- */
.lc-float { position: absolute; pointer-events: none; }

/* ---------- Scroll reveal ---------- */
.lc .reveal-section { opacity: 0; transform: translateY(34px); transition: opacity 900ms var(--lc-ease-glide), transform 900ms var(--lc-ease-glide); will-change: opacity, transform; }
.lc .reveal-section.is-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .lc { --lc-display-3: 2.9rem; }
  .lc-nav-links { display: none; }
  .lc-nav-burger { display: inline-flex; }
  .lc-hero-grid { grid-template-columns: 1fr; gap: 8px; min-height: 0; padding-top: 96px; padding-bottom: 72px; }
  .lc-two-col { grid-template-columns: 1fr; gap: 20px; }
  .lc-special-grid { grid-template-columns: 1fr; }
  .lc-ecosystem-card { grid-template-columns: 1fr; gap: 20px; padding: 26px; }
  .lc-ecosystem-card > img { width: 120px; }
  .lc-video-grid { grid-template-columns: 1fr 1fr; }
  .lc-join-grid { grid-template-columns: 1fr; }
  /* 2 cards side by side, the 3rd spanning full width below them and bigger
     than the top two, instead of collapsing to one card per row. Padding/
     image/type sizes trimmed across all three so the row doesn't run tall
     and eat scroll space on small screens. */
  .lc-group-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .lc-group-card { padding: 18px 14px; }
  .lc-group-card img { width: 56px; height: 56px; margin-bottom: 10px; }
  .lc-group-card .t { font-size: 18px; margin-bottom: 5px; }
  .lc-group-card .d { font-size: 14px; line-height: 1.4; }
  .lc-group-card:last-child { grid-column: 1 / -1; padding: 22px 18px; }
  .lc-group-card:last-child .t { font-size: 20px; }
  .lc-group-card:last-child img { width: 64px; height: 64px; }
  .lc-holder-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
  .lc-connect-grid { grid-template-columns: 1fr; }
  .lc-signup-grid { grid-template-columns: 1fr; gap: 32px; }
  .lc-topic-row { grid-template-columns: 1fr; gap: 14px; }
  .lc-reg-grid { grid-template-columns: 1fr; }
  /* Single column: summary flows with the page, no internal scroll/cap. */
  .lc-summary { position: static; max-height: none; overflow: visible; padding: 0; margin: 0; }
  .lc .lc-sec-pad { padding-left: 22px; padding-right: 22px; }
  .lc .lc-sec-pad-y { padding-top: 64px; padding-bottom: 64px; }
  /* Whale: on narrow screens the desktop -40px/-30px overhang clips ~25% of the
     illustration off the corner, so the whale + its bubbles read as a stray
     sliver. Anchor it flush into the corner and give it a firmer size floor so
     the whole creature (and the circles around it) stays together and visible. */
  .lc-stories-creature { right: 0; bottom: 0; width: min(300px, 68vw); }
  .lc-hero-scrim-x { background: linear-gradient(to bottom, rgba(251,241,222,0.48) 0%, rgba(251,241,222,0.40) 45%, rgba(251,241,222,0.30) 72%, rgba(251,241,222,0.24) 100%); }
  .lc-hero-video { object-position: 85% 50%; }
  /* Pull-quote band: the drifting bg is sized 160% wide with `auto` height, so on
     a narrow viewport the scaled image is shorter than the tall band and leaves
     lighter strips above/below the texture (reads as the quote spilling past the
     background). `cover` fills the whole band height; trim the inner padding so
     the tall italic quote isn't crowded. */
  .lc-quote-band-bg { background-size: cover; animation: none; }
  .lc-quote-band-inner { padding: 72px 26px; }
  /* Practical cards: the zones/schedule grids declared 260–280px min columns, but
     a card on mobile is only ~265px wide inside its padding, so the grid track
     overflowed the card. Collapse to a single flexible column and trim padding. */
  .lc-practical-card { padding: 24px 20px; }
  .lc-zones-grid { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .lc-zone-local { margin-left: 0; margin-right: 0; }
  .lc-sched-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* February immersion: the three blocks are a wrapping flex row with left-border
     dividers on desktop. On a narrow card they wrap into a ragged 2+1 grid with a
     stray dangling divider. Stack them as full-width rows (label left, duration
     right) so they read like the month rows below, and swap vertical dividers for
     horizontal ones. */
  .lc-sched-feb { align-items: stretch; gap: 0; }
  .lc-sched-feb-head { justify-content: center; padding-bottom: 6px; }
  .lc-sched-feb-blocks { flex-direction: column; }
  .lc-sched-feb-block { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-left: none; border-top: 1px solid var(--lc-border-soft); }
  .lc-sched-feb-block:first-child { border-top: none; }
}
@media (max-width: 620px) {
  .lc-stories-promo { margin-bottom: 40px; }
  .lc-vid-play-ring--lg { width: 56px; height: 56px; }
  .lc-vid-play-ring--lg .tri { margin-left: 4px; border-top-width: 9px; border-bottom-width: 9px; border-left-width: 16px; }
  .lc-promo-duration { right: 10px; bottom: 8px; }
  .lc-video-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .lc-vid-quote { display: none; }
  .lc-teacher-grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .lc-teacher-short { display: none; }
  .lc-cta-row { flex-direction: column; align-items: stretch; }
  .lc-cta-row > * { width: 100%; }
  .lc-tier-grid { grid-template-columns: 1fr; }
  .lc-group-row { grid-template-columns: 1fr; }
  .lc-field-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .lc .reveal-section { opacity: 1 !important; transform: none !important; transition: none !important; }
  .lc-quote-band-bg { animation: none; }
  .lc-quote-scroll .w { transition: none; }
  html:has(.lc) { scroll-behavior: auto; }
}