/* ─────────────────────────────────────────────────────────────────────────────
   Components — reusable blocks used inside Markdown pages (via md_in_html):
     .lx-hero         home page header
     .lx-pro-grid     Pro Tracks topic cards (number, title, description, chips)
     .lx-signup       "get new notes by email" form
     .lx-difficulty   beginner / intermediate / advanced badge
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Hero ─────────────────────────────────────────────── */
.lx-hero { text-align: center; padding: 1.6rem 0 0.8rem; }
.lx-hero .lx-eyebrow {
  display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--md-typeset-a-color); border: 1px solid var(--lx-card-border); border-radius: 999px; padding: 0.25rem 0.8rem;
}
.md-typeset .lx-hero h1 { font-size: clamp(1.9rem, 5vw, 2.9rem); margin: 0.8rem 0 0.6rem; line-height: 1.15; }
.lx-hero p { color: var(--lx-muted); font-size: 0.9rem; max-width: 36rem; margin: 0 auto 1.2rem; }
.lx-hero .md-button { margin: 0.25rem; }

/* Material's buttons, brand-tinted */
.md-typeset .md-button--primary { background: var(--lx-sky); border-color: var(--lx-sky); color: var(--lx-ink); }
.md-typeset .md-button--primary:hover { background: var(--lx-sky-light); border-color: var(--lx-sky-light); color: var(--lx-ink); }

/* Grid cards (Material's built-in .grid.cards) — brand colours */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  background: var(--lx-card-bg); border: 1px solid var(--lx-card-border); border-radius: var(--lx-radius);
  transition: border-color 0.2s, transform 0.2s;
}
.md-typeset .grid.cards > ul > li:hover { border-color: var(--lx-sky); transform: translateY(-2px); }

/* ── Difficulty badge ─────────────────────────────────── */
.lx-difficulty {
  display: inline-block; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  border-radius: 6px; padding: 0.1rem 0.5rem; vertical-align: middle;
}
.lx-difficulty.beginner     { background: rgba(16, 185, 129, 0.15); color: var(--lx-green); }
.lx-difficulty.intermediate { background: rgba(251, 191, 36, 0.15); color: #D97706; }
.lx-difficulty.advanced     { background: rgba(244, 114, 182, 0.15); color: #DB2777; }

/* ── Email sign-up ────────────────────────────────────── */
.lx-signup {
  margin: 1.6rem 0; padding: 1.1rem 1.2rem; border-radius: var(--lx-radius);
  background: var(--lx-card-bg); border: 1px dashed var(--lx-card-border);
}
.lx-signup form { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.6rem; }
.lx-signup input {
  flex: 1 1 14rem; min-width: 0; padding: 0.55rem 0.8rem; font: inherit; font-size: 0.8rem;
  border-radius: 8px; border: 1px solid var(--lx-card-border); background: var(--md-default-bg-color); color: var(--md-default-fg-color);
}
.lx-signup input:focus { outline: 2px solid var(--lx-sky); outline-offset: 1px; }
.lx-signup button {
  padding: 0.55rem 1.1rem; border: 0; border-radius: 8px; font: inherit; font-size: 0.8rem; font-weight: 700;
  background: var(--lx-sky); color: var(--lx-ink); cursor: pointer;
}
.lx-signup button:disabled { opacity: 0.6; cursor: default; }
.lx-signup .lx-msg { font-size: 0.72rem; margin: 0.5rem 0 0; color: var(--lx-muted); }
.lx-signup .lx-msg.ok { color: var(--lx-green); }

/* ═════════ Home page (v2) ═════════ */

/* Hero: soft glow behind the heading, gradient words, topic chips */
.lx-hero { position: relative; padding: 3rem 0 1.4rem; isolation: isolate; }
.lx-hero::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: -2rem; width: min(52rem, 100%); height: 22rem;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(56, 189, 248, 0.22), rgba(56, 189, 248, 0) 65%);
}
[data-md-color-scheme="default"] .lx-hero::before { background: radial-gradient(ellipse at center, rgba(56, 189, 248, 0.16), rgba(56, 189, 248, 0) 65%); }
.md-typeset .lx-hero h1 { font-size: clamp(2.1rem, 5.4vw, 3.4rem); margin: 1rem auto 0.8rem; max-width: 18ch; }
.lx-gradient {
  background: linear-gradient(90deg, var(--lx-sky-light), var(--lx-sky) 45%, #A78BFA);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lx-hero p { font-size: 0.95rem; line-height: 1.7; max-width: 40rem; }
.md-typeset .lx-hero .md-button { padding: 0.7em 1.6em; border-radius: 10px; }
.lx-topics { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem; margin-top: 1.6rem; }
.lx-topics span {
  font-size: 0.66rem; font-weight: 600; padding: 0.3rem 0.75rem; border-radius: 999px;
  border: 1px solid var(--lx-card-border); background: var(--lx-card-bg); color: var(--lx-muted);
}

/* Section cards: icon in a tinted tile, lift on hover, arrow nudges */
.md-typeset .lx-cards.grid { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.9rem; }
.md-typeset .lx-cards.grid.cards > ul > li { padding: 1.1rem 1.15rem; }
.md-typeset .lx-cards.grid.cards > ul > li:hover { box-shadow: 0 10px 30px rgba(56, 189, 248, 0.1); }
.md-typeset .lx-cards .twemoji.lg {
  width: 2.2rem; height: 2.2rem; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; background: rgba(56, 189, 248, 0.12); color: var(--lx-sky); margin-right: 0.35rem;
}
.md-typeset .lx-cards .twemoji.lg svg { width: 1.2rem; max-height: 1.2rem; }
.md-typeset .lx-cards hr { margin: 0.7rem 0; border-color: var(--lx-card-border); }
.md-typeset .lx-cards li > p:last-child a .twemoji { transition: transform 0.2s; }
.md-typeset .lx-cards li:hover > p:last-child a .twemoji { transform: translateX(3px); }

/* Learning path: numbered timeline */
.lx-path ol { list-style: none; counter-reset: step; padding: 0; margin: 1rem 0 0 !important; position: relative; }
.lx-path ol::before {
  content: ''; position: absolute; left: 0.95rem; top: 0.8rem; bottom: 0.8rem; width: 2px;
  background: linear-gradient(180deg, var(--lx-sky), rgba(56, 189, 248, 0.1));
}
.md-typeset .lx-path li {
  counter-increment: step; position: relative; margin: 0 0 0.6rem !important; padding: 0.7rem 1rem 0.7rem 3rem;
  border: 1px solid var(--lx-card-border); border-radius: var(--lx-radius); background: var(--lx-card-bg);
  transition: border-color 0.2s, transform 0.2s;
}
.md-typeset .lx-path li:hover { border-color: var(--lx-sky); transform: translateX(3px); }
.md-typeset .lx-path li::before {
  content: counter(step); position: absolute; left: 0.35rem; top: 50%; transform: translateY(-50%);
  width: 1.25rem; height: 1.25rem; border-radius: 50%; display: grid; place-items: center;
  font-size: 0.62rem; font-weight: 800; color: var(--lx-ink); background: var(--lx-sky);
  box-shadow: 0 0 0 4px var(--md-default-bg-color);
}
.md-typeset .lx-path .lx-difficulty { margin-left: 0.3rem; }

/* Free tools: compact link cards */
.lx-tools p { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.8rem; margin: 1rem 0; }
.md-typeset a.lx-tool {
  display: block; padding: 0.9rem 1rem 0.9rem 3.1rem; position: relative; border-radius: var(--lx-radius);
  border: 1px solid var(--lx-card-border); background: var(--lx-card-bg); color: var(--md-default-fg-color);
  line-height: 1.45; transition: border-color 0.2s, transform 0.2s;
}
.md-typeset a.lx-tool:hover { border-color: var(--lx-sky); transform: translateY(-2px); }
.md-typeset a.lx-tool small { color: var(--lx-muted); font-size: 0.68rem; }
.md-typeset a.lx-tool .twemoji {
  position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); width: 1.6rem; height: 1.6rem;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 8px;
  background: rgba(56, 189, 248, 0.12); color: var(--lx-sky);
}

/* Sign-up: icon + solid border */
.lx-signup { border-style: solid; position: relative; padding-left: 3.6rem; }
.lx-signup-icon { position: absolute; left: 1.1rem; top: 1.15rem; color: var(--lx-sky); }
.lx-signup-icon .twemoji svg { width: 1.5rem; height: 1.5rem; }

/* End-of-note call to action (overrides/partials/lx-cta.html) */
.lx-cta {
  margin: 3rem 0 1rem; padding: 1.2rem 1.3rem; border-radius: var(--lx-radius);
  border: 1px solid rgba(56, 189, 248, 0.35);
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.1), rgba(167, 139, 250, 0.06));
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
}
.lx-cta-text { display: flex; flex-direction: column; gap: 0.2rem; flex: 1 1 18rem; font-size: 0.78rem; }
.lx-cta-text strong { font-size: 0.88rem; color: var(--md-default-fg-color); }
.lx-cta-text span { color: var(--lx-muted); }
.lx-cta-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lx-cta .md-button { margin: 0; font-size: 0.72rem; padding: 0.55em 1.1em; border-radius: 8px; }

@media screen and (max-width: 44.9375em) {
  .lx-hero { padding-top: 1.6rem; }
  .lx-cta-actions { width: 100%; }
  .lx-cta .md-button { flex: 1; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .md-typeset .lx-path li, .md-typeset a.lx-tool, .md-typeset .lx-cards li, .md-typeset .lx-cards .twemoji { transition: none; }
}

/* Section cards: an even 3 × 2 grid on desktop, 2 columns on tablets, 1 on phones */
.md-typeset .lx-cards.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media screen and (max-width: 76.1875em) { .md-typeset .lx-cards.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media screen and (max-width: 44.9375em) { .md-typeset .lx-cards.grid { grid-template-columns: 1fr; } }

/* Sign-up icon: a touch larger and aligned with the first line */
.lx-signup-icon { top: 1.05rem; }
.lx-signup-icon .twemoji, .lx-signup-icon .twemoji svg { width: 1.7rem; height: 1.7rem; }

/* Notes overview: the two track cards side by side (one column on phones) */
.md-typeset .lx-track.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media screen and (max-width: 44.9375em) { .md-typeset .lx-track.grid { grid-template-columns: 1fr; } }

/* ═════════ Pro Tracks (docs/pro/) ═════════ */
.md-typeset .lx-pro-tracks.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.lx-pro-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; margin: 1rem 0 0.4rem; }
.lx-pro-grid--dense { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lx-pro-item {
  position: relative; padding: 1rem 1.1rem 0.9rem 3.3rem; border-radius: var(--lx-radius);
  background: var(--lx-card-bg); border: 1px solid var(--lx-card-border); transition: border-color 0.2s, transform 0.2s;
}
.lx-pro-item:hover { border-color: var(--lx-sky); transform: translateY(-2px); }
.lx-pro-num {
  position: absolute; left: 1rem; top: 1rem; font-size: 0.7rem; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--md-typeset-a-color); background: rgba(56, 189, 248, 0.12); border-radius: 7px; padding: 0.15rem 0.4rem;
}
.md-typeset .lx-pro-item h3 { margin: 0 0 0.3rem; font-size: 0.86rem; line-height: 1.35; }
.md-typeset .lx-pro-item p { margin: 0; font-size: 0.74rem; line-height: 1.55; }
.md-typeset .lx-pro-item p.lx-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.6rem; }
.lx-chips span {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.02em; padding: 0.15rem 0.55rem; border-radius: 999px;
  color: var(--lx-muted); border: 1px solid var(--lx-card-border); background: var(--md-default-bg-color);
}
.md-typeset h1 .lx-difficulty { font-family: var(--md-text-font-family); font-size: 0.32em; vertical-align: middle; margin-left: 0.4rem; }

@media screen and (max-width: 59.9375em) { .lx-pro-grid--dense { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media screen and (max-width: 44.9375em) {
  .lx-pro-grid, .lx-pro-grid--dense, .md-typeset .lx-pro-tracks.grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .lx-pro-item { transition: none; } }

/* Dense (3-column) topic grid: number sits above the title so the text gets the full card width */
.lx-pro-grid--dense .lx-pro-item { padding: 0.9rem 1rem; }
.lx-pro-grid--dense .lx-pro-num { position: static; display: inline-block; margin-bottom: 0.45rem; }

/* ═════════ Site footer (overrides/partials/lx-footer-links.html) ═════════ */
.lx-footer { background: var(--lx-card-bg); border-top: 1px solid var(--lx-card-border); }
[data-md-color-scheme="slate"] .lx-footer { background: #0D0D10; }
.lx-footer__inner {
  display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2rem;
  padding: 2.4rem 0.8rem 2rem;
}
.lx-footer__logo { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--md-default-fg-color); font-weight: 800; font-size: 0.85rem; }
.lx-footer__logo img { width: 1.6rem; height: 1.6rem; border-radius: 6px; }
.lx-footer__brand p { font-size: 0.72rem; line-height: 1.65; color: var(--lx-muted); margin: 0.8rem 0; max-width: 22rem; }
.lx-footer__subscribe { font-size: 0.72rem; font-weight: 700; color: var(--md-typeset-a-color); }
.lx-footer__subscribe:hover { text-decoration: underline; }
.lx-footer__social { display: flex; gap: 0.5rem; margin-top: 1.1rem; }
.lx-footer__social a {
  width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px;
  border: 1px solid var(--lx-card-border); color: var(--lx-muted); transition: color 0.2s, border-color 0.2s;
}
.lx-footer__social a:hover { color: var(--lx-sky); border-color: var(--lx-sky); }
.lx-footer__social svg { width: 0.9rem; height: 0.9rem; fill: currentColor; }
.lx-footer__col h2 {
  margin: 0.2rem 0 0.8rem; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--md-default-fg-color);
}
.lx-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.lx-footer__col a { font-size: 0.72rem; color: var(--lx-muted); transition: color 0.15s; }
.lx-footer__col a:hover { color: var(--lx-sky); }
.lx-ext { font-size: 0.6rem; margin-left: 0.2rem; opacity: 0.6; }
.lx-footer a:focus-visible { outline: 2px solid var(--lx-sky); outline-offset: 2px; border-radius: 4px; }

/* Copyright bar under the columns */
.md-footer-meta__inner { justify-content: center; }
.md-footer-meta .md-copyright { font-size: 0.64rem; color: var(--lx-muted); text-align: center; width: auto; margin: 0 auto; }

@media screen and (max-width: 59.9375em) {
  .lx-footer__inner { grid-template-columns: repeat(3, 1fr); }
  .lx-footer__brand { grid-column: 1 / -1; }
}
@media screen and (max-width: 29.9375em) {
  .lx-footer__inner { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1rem; }
}

/* ═════════ Free vs Pro comparison (home page) ═════════ */
.lx-compare-wrap { overflow-x: auto; margin: 1.2rem 0 0.5rem; -webkit-overflow-scrolling: touch; }
.md-typeset table.lx-compare {
  display: table; width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.74rem;
  border: 1px solid var(--lx-card-border); border-radius: var(--lx-radius); background: var(--lx-card-bg);
}
.md-typeset table.lx-compare th, .md-typeset table.lx-compare td {
  padding: 0.85rem 1rem; border-top: 1px solid var(--lx-card-border); vertical-align: middle; text-align: left;
}
.md-typeset table.lx-compare thead th { border-top: 0; vertical-align: bottom; background: transparent; }
.md-typeset table.lx-compare tbody th { font-weight: 600; color: var(--md-default-fg-color); width: 34%; }
.md-typeset table.lx-compare td { color: var(--lx-muted); width: 33%; }

/* Highlighted Pro column */
.md-typeset table.lx-compare .lx-pro-col {
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.09), rgba(167, 139, 250, 0.05));
  border-left: 1px solid rgba(56, 189, 248, 0.35); border-right: 1px solid rgba(56, 189, 248, 0.35);
  color: var(--md-default-fg-color);
}
.md-typeset table.lx-compare thead .lx-pro-col { border-top: 2px solid var(--lx-sky); border-top-right-radius: var(--lx-radius); }
.md-typeset table.lx-compare tfoot .lx-pro-col { border-bottom: 1px solid rgba(56, 189, 248, 0.35); border-bottom-right-radius: var(--lx-radius); }

.lx-plan { display: block; font-size: 0.95rem; font-weight: 800; color: var(--md-default-fg-color); }
.lx-plan-price { display: block; font-size: 0.68rem; font-weight: 600; color: var(--lx-muted); margin-top: 0.15rem; }
.lx-plan-badge {
  display: inline-block; margin-bottom: 0.4rem; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--lx-ink); background: var(--lx-sky); border-radius: 999px; padding: 0.12rem 0.55rem;
}
.lx-yes { color: var(--lx-green); font-weight: 900; font-size: 0.95rem; }
.lx-no { color: var(--lx-muted); opacity: 0.6; }
.md-typeset table.lx-compare tfoot td { border-top: 1px solid var(--lx-card-border); }
.md-typeset table.lx-compare .md-button { margin: 0; padding: 0.55em 1.1em; border-radius: 8px; font-size: 0.72rem; white-space: nowrap; }
.lx-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media screen and (max-width: 44.9375em) {
  /* Fit the phone width (no sideways scroll) so the Pro column is always visible */
  .md-typeset table.lx-compare { font-size: 0.64rem; table-layout: fixed; }
  .md-typeset table.lx-compare th, .md-typeset table.lx-compare td { padding: 0.6rem 0.5rem; word-break: break-word; }
  .md-typeset table.lx-compare tbody th { width: 30%; }
  .lx-plan { font-size: 0.8rem; }
  .lx-plan-badge { font-size: 0.5rem; padding: 0.1rem 0.4rem; }
  .md-typeset table.lx-compare .md-button { white-space: normal; padding: 0.5em 0.6em; font-size: 0.64rem; width: 100%; text-align: center; }
}

/* ── "Launching soon" badge on every Pro Tracks card ──────────────────────────
   Added in CSS so no card markup changes. At launch, delete this block (or set content to "Available"). */
.md-typeset .lx-pro-tracks.grid.cards > ul > li,
.lx-pro-item { position: relative; }
.md-typeset .lx-pro-tracks.grid.cards > ul > li::after,
.lx-pro-item::after {
  content: "Launching soon";
  position: absolute; top: 0.95rem; right: 0.95rem;
  font-size: 0.55rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  color: #FBBF24; background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 999px; padding: 0.15rem 0.55rem; pointer-events: none;
}
[data-md-color-scheme="default"] .md-typeset .lx-pro-tracks.grid.cards > ul > li::after,
[data-md-color-scheme="default"] .lx-pro-item::after { color: #B45309; background: rgba(251, 191, 36, 0.16); }
/* Keep titles full-width: on topic cards the number and the badge share the top row… */
.lx-pro-item { padding: 0.9rem 1rem; }
.lx-pro-num { position: static; display: inline-block; margin-bottom: 0.45rem; }
/* …and on the overview's track cards the badge sits bottom-right, beside "See the track". */
.md-typeset .lx-pro-tracks.grid.cards > ul > li::after { top: auto; bottom: 1.15rem; }

/* Explore has 5 cards: the last one (Pro Tracks) spans two columns so the grid stays even */
@media screen and (min-width: 45em) {
  .md-typeset .lx-cards.grid.cards > ul > li:last-child { grid-column: span 2; }
}