/* ==========================================================================
   sla.css — the written-page set (handover php-push-handover-2026-07-09.md)
   --------------------------------------------------------------------------
   One shared sheet for the 24 written pages, enqueued (after home.css +
   newsletter.css) on: page-glossary.php, page-glossary-term.php,
   page-six-lessons.php, page-six-lessons-lesson.php.

   These are the PAGE-SPECIFIC rules only, sliced from the approved mockups
   (mockups/*.html). Everything the theme already owns is deliberately NOT here
   and is reused verbatim:
     - tokens, reset, .reveal, .visually-hidden ....... style.css
     - .annc, .nav*, .footer* ......................... style.css / header.php / footer.php
     - .card, .card-art, .card-image, .card-play-btn .. home.css (the rail card)
     - .membership, .price-card, .member-list ......... home.css (visitor band)
     - .newsletter band + .thl-nl form skin ........... home.css + newsletter.css

   CORE RULE: the page body is the real WordPress the_content(). This sheet
   styles the native .wp-block-* classes (.wp-block-heading, .wp-block-image,
   .wp-block-list, .wp-block-button__link) to match the mockup .prose, so the
   verbatim entry-content stays in Gutenberg and nothing is re-typed.

   British English, "dentin", no em dashes (THL house style) in all copy.
   ========================================================================== */

:root {
  /* Glossary letter bar height (mockup value). --nav-h / --wrap live in style.css. */
  --lbar-h: 51px;
}

/* ============================================================ */
/* HERO (all four templates)                                    */
/* ============================================================ */
.sla-hero {
  padding: 72px 48px 0;
  background:
    radial-gradient(ellipse 70% 130% at 82% 0%, rgba(122,175,201,0.12) 0%, transparent 60%),
    linear-gradient(180deg, #16202e 0%, var(--bg-deep) 100%);
  border-bottom: 1px solid var(--line);
}
.sla-hero-inner { max-width: 1120px; margin: 0 auto; }
.crumb { font-size: 12.5px; color: var(--t-soft); margin-bottom: 18px; }
.crumb a { color: var(--t-mid); transition: color .2s; }
.crumb a:hover { color: var(--blue-bright); }
.crumb .sep { margin: 0 8px; }
.sla-hero .kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--blue-bright); margin-bottom: 16px; }
.sla-hero .kicker::before { content: ''; width: 26px; height: 1px; background: var(--blue); }
.sla-hero h1 { font-size: clamp(30px, 4.4vw, 52px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.07; margin-bottom: 20px; max-width: 22ch; }
.sla-lede { font-size: clamp(16px, 1.6vw, 18.5px); color: var(--t-mid); line-height: 1.7; max-width: 720px; }
.sla-lede a { color: var(--blue-bright); }
.sla-lede a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--t-mid); background: rgba(255,255,255,0.04); border: 1px solid var(--line-2); border-radius: 999px; padding: 7px 14px; }
.chip svg { width: 13px; height: 13px; color: var(--blue-bright); flex-shrink: 0; }

/* Lesson stepper (page-six-lessons-lesson.php) */
.stepper { display: flex; align-items: stretch; gap: 8px; margin-top: 34px; padding: 18px 0 22px; border-top: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.stepper::-webkit-scrollbar { display: none; }
.step-overview { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--t-mid); border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 15px; white-space: nowrap; transition: 0.2s; flex-shrink: 0; }
.step-overview:hover { color: var(--blue-bright); border-color: var(--blue); }
.step-overview svg { width: 14px; height: 14px; }
.step-item { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px 8px 9px; white-space: nowrap; transition: 0.2s; flex-shrink: 0; }
.step-item .n { width: 26px; height: 26px; border-radius: 8px; background: rgba(255,255,255,0.05); border: 1px solid var(--line-2); color: var(--t-mid); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.step-item .t { font-size: 12.5px; font-weight: 600; color: var(--t-soft); max-width: 150px; overflow: hidden; text-overflow: ellipsis; transition: 0.2s; }
.step-item:hover { border-color: rgba(122,175,201,0.4); }
.step-item:hover .t { color: var(--t-strong); }
.step-item.current { border-color: rgba(122,175,201,0.5); background: rgba(122,175,201,0.08); }
.step-item.current .n { background: var(--blue); border-color: var(--blue); color: var(--navy-deeper); }
.step-item.current .t { color: var(--t-strong); }

/* ============================================================ */
/* LAYOUT                                                       */
/* ============================================================ */
.sla-body { padding: 56px 48px 44px; } /* modest bottom gap so the rail that follows is not missed */
/* Lesson two-column layout (prose + sticky sidebar) */
.sla-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; align-items: start; }
/* Glossary + term single-column wrappers */
.hub-inner { max-width: 1120px; margin: 0 auto; }
.sla-single { max-width: 1120px; margin: 0 auto; }

/* Lesson sidebar */
.sla-aside { position: sticky; top: calc(var(--nav-h) + 24px); display: flex; flex-direction: column; gap: 18px; }
.aside-card { background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; }
.aside-card h2 { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-bright); margin-bottom: 12px; }
.toc { list-style: none; }
.toc li { border-left: 2px solid var(--line); }
.toc a { display: block; font-size: 13.5px; color: var(--t-soft); padding: 7px 0 7px 14px; margin-left: -2px; border-left: 2px solid transparent; transition: 0.2s; line-height: 1.45; }
.toc a:hover { color: var(--t-strong); }
.toc li.on a { color: var(--t-strong); border-left-color: var(--blue); }
.lnav { list-style: none; }
.lnav li + li { margin-top: 2px; }
.lnav a { display: flex; align-items: center; gap: 11px; font-size: 13px; color: var(--t-soft); padding: 7px 8px; border-radius: 8px; transition: 0.2s; line-height: 1.4; }
.lnav a:hover { color: var(--t-strong); background: rgba(255,255,255,0.04); }
.lnav .n { flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; background: rgba(255,255,255,0.05); border: 1px solid var(--line); color: var(--t-soft); font-size: 10.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.lnav li.current a { color: var(--t-strong); background: rgba(122,175,201,0.08); }
.lnav li.current .n { background: var(--blue); border-color: var(--blue); color: var(--navy-deeper); }
.lnav .all { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.lnav .all a { color: var(--blue-bright); font-weight: 600; }
.aside-note { font-size: 13px; color: var(--t-mid); line-height: 1.65; }
.aside-cta { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 12.5px; font-weight: 700; color: var(--blue-bright); }
.aside-cta svg { width: 13px; height: 13px; }
.aside-cta:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================ */
/* PROSE — styles the native the_content() block classes         */
/* ============================================================ */
.prose { font-size: 16.5px; color: var(--t-mid); line-height: 1.8; max-width: 720px; }
.prose > * + * { margin-top: 1.15em; }
/* Headings: the_content() emits <h2 class="wp-block-heading">; both the tag and
   the block class are covered. Glossary letter h2s use .letter (below). */
.prose h2,
.prose .wp-block-heading { font-size: clamp(22px, 2.3vw, 28px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; color: var(--t-strong); margin-top: 2em; scroll-margin-top: calc(var(--nav-h) + 24px); }
.prose h3 { font-size: 1.22em; font-weight: 700; color: var(--t-strong); margin-top: 1.6em; }
.prose p { margin: 0; }
.prose a { color: var(--blue-bright); }
.prose a:hover, .prose a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--t-strong); }
.prose ul, .prose ol,
.prose .wp-block-list { padding-left: 1.3em; }
.prose li + li { margin-top: 0.4em; }

/* Figures: the_content() emits <figure class="wp-block-image aligncenter size-*
   is-resized">. The saved width/height are the author-chosen display size, so we
   respect it and cap the figure at 600 (landscape) with a smaller natural width
   for square/portrait, centred. Matches the mockup .fig-mid / .fig-narrow intent
   without chasing pixel-identical widths. .fig-* kept as harmless aliases. */
.prose figure { margin-top: 1.6em; }
.prose .wp-block-image { margin: 1.6em auto 0; max-width: 600px; }
.prose .wp-block-image img,
.prose figure img { display: block; max-width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,0.3); margin: 0 auto; }
.prose figcaption,
.prose .wp-element-caption { font-size: 0.82em; color: var(--t-soft); margin-top: 12px; text-align: center; line-height: 1.6; max-width: 560px; margin-left: auto; margin-right: auto; }
.prose figcaption strong { color: var(--t-mid); }
.prose figcaption em { font-style: italic; }
.fig-narrow img { max-width: 540px; width: 100%; }
.fig-mid img { max-width: 600px; width: 100%; }

/* Key-fact cards (lessons, editor-wrapped) */
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 1.3em; }
.fact { background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; display: flex; gap: 13px; align-items: flex-start; }
.fact svg { width: 17px; height: 17px; color: var(--blue-bright); flex-shrink: 0; margin-top: 3px; }
.fact p { font-size: 14px; line-height: 1.65; margin: 0; }

/* Measurement cards (lessons) */
.measures { list-style: none; padding: 0 !important; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 1.3em; }
.measures li { display: block; background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; margin: 0 !important; }
.measures .mnum { display: block; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--blue-bright); line-height: 1; margin-bottom: 8px; }
.measures .mlabel { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t-strong); margin-bottom: 6px; }
.measures p { font-size: 13.5px; line-height: 1.6; margin: 0; }

/* Protocol steps (lessons) */
.protocol { list-style: none; padding: 0 !important; margin-top: 1.4em; counter-reset: step; }
.protocol li { counter-increment: step; position: relative; padding: 0 0 22px 52px; margin: 0 !important; }
.protocol li::before { content: counter(step); position: absolute; left: 0; top: -3px; width: 32px; height: 32px; border-radius: 10px; background: rgba(122,175,201,0.12); border: 1px solid rgba(122,175,201,0.3); color: var(--blue-bright); font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.protocol li::after { content: ''; position: absolute; left: 15.5px; top: 33px; bottom: 4px; width: 1px; background: var(--line); }
.protocol li:last-child { padding-bottom: 0; }
.protocol li:last-child::after { display: none; }

/* Red-flags grid (lesson 2) */
.redflags { list-style: none; padding: 0 !important; counter-reset: rf; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 1.3em; }
.redflags li { counter-increment: rf; display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; margin: 0 !important; font-size: 15px; font-weight: 600; color: var(--t-strong); line-height: 1.4; }
.redflags li::before { content: counter(rf); flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; background: rgba(122,175,201,0.12); border: 1px solid rgba(122,175,201,0.25); color: var(--blue-bright); font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

/* Literature accordion (lessons: a <details class="lit"> block) */
.lit { margin-top: 2.2em; padding: 2px 20px; border: 1px solid var(--line-2); border-radius: 12px; background: rgba(255,255,255,0.02); }
.lit summary { padding: 15px 0; cursor: pointer; font-weight: 700; color: var(--t-strong); font-size: 15px; }
.lit[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.lit ul { padding: 0 0 16px 1.2em; font-size: 13.5px; color: var(--t-soft); }
.lit li + li { margin-top: 0.55em; }

/* ============================================================ */
/* TERM PAGE — centred single-column (glossary term template)   */
/* ============================================================ */
/* Lesson heroes get their bottom space from the stepper; term heroes have no
   stepper, so the modifier carries the padding, and everything is centred. */
.sla-hero--term { padding-bottom: 52px; }
.sla-hero--term .sla-hero-inner { text-align: center; }
.sla-hero--term h1 { margin-left: auto; margin-right: auto; }
.sla-hero--term .sla-lede { margin-left: auto; margin-right: auto; }
.sla-hero--term .hero-chips { justify-content: center; }
.sla-single .prose { margin-left: auto; margin-right: auto; }

/* Lesson CTA buttons in the body are native the_content() wp-block-buttons.
   Restyle the outline buttons as the solid navy-on-blue mockup .term-cta. The
   is-style-outline scoped selector out-specifics WP core's outline style. */
.prose .wp-block-buttons { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 1.6em; }
.prose .wp-block-buttons + .wp-block-buttons { margin-top: 12px; }
.prose .wp-block-button { margin: 0; }
.prose .wp-block-button .wp-block-button__link,
.prose .wp-block-button.is-style-outline .wp-block-button__link {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--blue); color: var(--navy-deeper);
  font-size: 14px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4;
  padding: 14px 24px; border: 0; border-radius: 10px; text-decoration: none;
  transition: background .2s, transform .15s;
}
.prose .wp-block-button .wp-block-button__link:hover,
.prose .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--blue-bright); color: var(--navy-deeper); transform: translateY(-1px); text-decoration: none; }
.prose a.wp-block-button__link:focus-visible { text-decoration: none; }
/* Optional polish: the mockup .term-cta arrow, masked so it inherits the navy text colour. */
.prose .wp-block-button__link::after {
  content: ""; width: 14px; height: 14px; flex-shrink: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* .term-cta kept for any hand-authored use (parity with the mockup component) */
.term-cta-row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 1.6em; }
.term-cta { display: inline-flex; align-items: center; gap: 10px; background: var(--blue); color: var(--navy-deeper); font-size: 14px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; padding: 14px 24px; border-radius: 10px; transition: background .2s, transform .15s; }
.term-cta:hover { background: var(--blue-bright); transform: translateY(-1px); }
.prose a.term-cta, .prose a.term-cta:hover, .prose a.term-cta:focus-visible { color: var(--navy-deeper); text-decoration: none; }
.term-cta svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Term rail: the go-deeper band, head + note centred (BioDome/BioRim keep 2 cards) */
.deeper--term .deeper-head { text-align: center; }
.deeper--term .deeper-head p { margin-left: auto; margin-right: auto; }
.deeper--term .deeper-note { justify-content: center; }
/* Scoped under .deeper--term so it out-cascades the base .deeper-grid rule
   (equal specificity, defined later): 2-card grids would otherwise left-align. */
.deeper--term .deeper-grid--two { max-width: 742px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .deeper--term .deeper-grid--two { grid-template-columns: 1fr; } }

/* ============================================================ */
/* PAGER + BACK CARD                                            */
/* ============================================================ */
.pager { max-width: 1120px; margin: 64px auto 0; display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; }
.pg { display: flex; align-items: center; gap: 16px; border-radius: 16px; padding: 22px 24px; border: 1px solid var(--line); background: rgba(255,255,255,0.02); transition: border-color .25s, background .25s, transform .25s; }
.pg:hover { transform: translateY(-2px); }
.pg .pg-arrow { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; color: var(--t-mid); transition: 0.25s; }
.pg .pg-arrow svg { width: 16px; height: 16px; }
.pg-label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-soft); margin-bottom: 5px; }
.pg-title { display: block; font-size: 15px; font-weight: 700; color: var(--t-strong); line-height: 1.35; }
.pg--prev:hover { border-color: var(--line-2); background: rgba(255,255,255,0.04); }
.pg--next { border-color: rgba(122,175,201,0.3); background: rgba(122,175,201,0.05); flex-direction: row; justify-content: space-between; }
.pg--next:hover { border-color: rgba(122,175,201,0.55); background: rgba(122,175,201,0.09); }
.pg--next .pg-arrow { border-color: rgba(122,175,201,0.4); color: var(--blue-bright); }
.pg--next:hover .pg-arrow { background: var(--blue); border-color: var(--blue); color: var(--navy-deeper); }
/* Term "back to the glossary" single card (centred to the 720 reading column).
   .sla-back gives it side gutters now that it sits below the full-width rail. */
.pg--back { max-width: 720px; margin-top: 56px; margin-left: auto; margin-right: auto; }
.sla-back { padding: 0 24px 64px; }

/* All-lessons grid (lessons). A standalone section (it sits after the Keep going
   rail), so it carries its own gutters: max-width 1216 + 48 padding = 1120 content. */
.alllessons { max-width: 1216px; margin: 56px auto 0; padding: 0 48px 72px; }
.alllessons h2 { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-soft); margin-bottom: 14px; }
.al-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.al-item { display: flex; align-items: center; gap: 14px; padding: 15px 18px; background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 12px; transition: border-color .25s var(--ease-out), background .25s var(--ease-out), transform .25s var(--ease-out); }
.al-item:hover { border-color: rgba(122,175,201,0.4); background: rgba(122,175,201,0.06); transform: translateY(-2px); }
.al-item .num { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; background: rgba(122,175,201,0.12); border: 1px solid rgba(122,175,201,0.25); color: var(--blue-bright); font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.al-item .ltxt { font-size: 14px; color: var(--t-mid); line-height: 1.4; font-weight: 500; }
.al-item:hover .ltxt { color: var(--t-strong); }
.al-item.here { border-color: rgba(122,175,201,0.45); background: rgba(122,175,201,0.07); }
.al-item.here .num { background: var(--blue); color: var(--navy-deeper); }
.al-item .you { margin-left: auto; flex-shrink: 0; font-size: 9.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-bright); background: rgba(122,175,201,0.12); border: 1px solid rgba(122,175,201,0.25); padding: 4px 9px; border-radius: 999px; }

/* ============================================================ */
/* LECTURE LINK (inline .lx preview, lessons)                   */
/* ============================================================ */
.lx { margin: 2.4em 0 0; background: linear-gradient(165deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.02) 100%); border: 1px solid rgba(122,175,201,0.26); border-radius: 18px; overflow: hidden; position: relative; }
.lx::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(122,175,201,0.6), transparent); }
.lx-inner { display: grid; grid-template-columns: 300px 1fr; gap: 0; align-items: center; }
.lx-media { position: relative; background: var(--navy-deep); aspect-ratio: 4 / 3; margin: 20px 0 20px 20px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 8px 22px rgba(0,0,0,0.35); }
.lx-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lx-play { position: absolute; inset: 0; width: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(10,13,21,0.05), rgba(10,13,21,0.35)); transition: background .25s; }
.lx-play:hover { background: linear-gradient(180deg, rgba(10,13,21,0.0), rgba(10,13,21,0.25)); }
.lx-play .pb { width: 54px; height: 54px; border-radius: 50%; background: var(--blue); color: var(--navy-deeper); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(0,0,0,0.5), 0 0 0 5px rgba(122,175,201,0.25); transition: transform .25s var(--ease-out), background .2s; }
.lx-play:hover .pb { transform: scale(1.1); background: var(--blue-bright); }
.lx-play .pb svg { width: 18px; height: 18px; fill: currentColor; transform: translateX(1.5px); }
.lx-body { padding: 24px 28px 22px; min-width: 0; }
.lx-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue-bright); margin-bottom: 10px; }
.lx-kicker svg { width: 13px; height: 13px; }
.lx-title { font-size: 18.5px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; margin-bottom: 4px; }
.lx-title a { color: var(--t-strong); }
.lx-title a:hover { color: var(--blue-bright); }
.lx-speaker { font-size: 13.5px; color: var(--t-soft); margin-bottom: 12px; }
.lx-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.lx-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--t-mid); background: rgba(255,255,255,0.05); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; }
.lx-chip svg { width: 12px; height: 12px; color: var(--blue-bright); }
.lx-line { font-size: 14px; color: var(--t-mid); line-height: 1.65; margin-bottom: 16px; }
.lx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.lx-watch { display: inline-flex; align-items: center; gap: 8px; background: var(--blue); color: var(--navy-deeper); font-size: 12.5px; font-weight: 700; letter-spacing: 0.03em; padding: 10px 18px; border-radius: 9px; transition: background .2s, transform .15s; }
.lx-watch:hover { background: var(--blue-bright); transform: translateY(-1px); }
.lx-watch svg { width: 13px; height: 13px; fill: currentColor; }
.lx-view { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--blue-bright); }
.lx-view svg { width: 14px; height: 14px; }
.lx-view:hover { text-decoration: underline; text-underline-offset: 3px; }
.lx-foot { font-size: 11.5px; color: var(--t-soft); margin-top: 14px; display: flex; align-items: center; gap: 7px; }
.lx-foot svg { width: 12px; height: 12px; color: var(--blue-bright); flex-shrink: 0; }
.lx.playing .lx-inner { grid-template-columns: 1fr; }
.lx.playing .lx-media { aspect-ratio: 16 / 9; margin: 20px 20px 0; }
.lx.playing .lx-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lx-close { display: none; position: absolute; top: 12px; right: 12px; z-index: 4; width: 34px; height: 34px; border-radius: 9px; background: rgba(10,13,21,0.72); border: 1px solid var(--line-2); color: var(--t-mid); align-items: center; justify-content: center; transition: 0.2s; }
.lx-close:hover { color: var(--t-strong); background: rgba(10,13,21,0.9); }
.lx-close svg { width: 16px; height: 16px; }
.lx.playing .lx-close { display: flex; }

/* ============================================================ */
/* GLOSSARY HUB (page-glossary.php)                             */
/* ============================================================ */
/* Sticky "Jump to" letter bar (nav chrome, sits under the site nav) */
.letterbar { position: sticky; top: var(--nav-h); z-index: 40; height: var(--lbar-h); background: rgba(12,16,24,0.94); backdrop-filter: blur(10px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.letterbar-inner { max-width: 1120px; margin: 0 auto; height: 100%; display: flex; align-items: center; gap: 14px; padding: 0 48px; }
.lb-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-soft); white-space: nowrap; flex-shrink: 0; }
.letterbar-track { display: flex; align-items: center; gap: 3px; overflow-x: auto; scrollbar-width: none; height: 100%; }
.letterbar-track::-webkit-scrollbar { display: none; }
.letterbar-track a { flex-shrink: 0; min-width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; padding: 0 8px; border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--t-mid); transition: background .15s, color .15s; }
.letterbar-track a:hover { background: rgba(255,255,255,0.06); color: var(--t-strong); }
.letterbar-track a.on { background: var(--blue); color: var(--navy-deeper); }
/* Only the glossary hub carries a second sticky bar, so scope the extra anchor
   offset to pages that contain a .letterbar (keeps term/lesson jumps correct).
   Set on html here (not stacked with a target scroll-margin) per the handover. */
html:has(.letterbar) { scroll-padding-top: calc(var(--nav-h) + var(--lbar-h) + 16px); }

/* Glossary intro prose sits a touch wider than the term/lesson reading column */
.hub-inner .prose { max-width: 760px; }
.hint { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--t-soft); }
.hint svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--blue-bright); }

/* Dictionary list: a the_content filter reshapes each letter section
   (<h2 id> + <ul class="wp-block-list">) into .lsec > .letter + ul.terms. */
.glist { margin-top: 40px; }
.lsec { display: grid; grid-template-columns: 88px 1fr; gap: 12px 32px; padding: 28px 0; border-top: 1px solid var(--line); }
.letter { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--blue-bright); position: sticky; top: calc(var(--nav-h) + var(--lbar-h) + 22px); align-self: start; }
.terms { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; }
.term { border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; background: rgba(255,255,255,0.015); font-size: 14.5px; line-height: 1.5; color: var(--t-soft); }
.term .row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.term .tx { min-width: 0; }
.term .acr { color: var(--t-mid); font-weight: 700; }
.term .d { color: var(--t-soft); }
.term-link { border-color: var(--line-2); background: rgba(255,255,255,0.035); transition: border-color .25s var(--ease-out), background .25s var(--ease-out), transform .25s var(--ease-out); }
.term-link a { color: var(--t-mid); }
.term-link .acr { color: var(--t-strong); }
.term-link .go { width: 14px; height: 14px; margin-left: auto; flex-shrink: 0; color: var(--t-soft); transition: color .2s, transform .2s; }
.term-link:hover { border-color: rgba(122,175,201,0.45); background: rgba(122,175,201,0.07); transform: translateY(-1px); }
.term-link:hover .go { color: var(--blue-bright); transform: translateX(2px); }

/* ============================================================ */
/* SIX LESSONS HUB (page-six-lessons.php)                       */
/* ============================================================ */
/* Section heading outside the .prose flow */
.sec-h2 { font-size: clamp(22px, 2.3vw, 28px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; color: var(--t-strong); margin-top: 2.4em; scroll-margin-top: calc(var(--nav-h) + 24px); }
.sec-sub { font-size: 15.5px; color: var(--t-soft); line-height: 1.65; margin-top: 12px; max-width: 640px; }
.lp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.lp { position: relative; display: flex; align-items: flex-start; gap: 16px; padding: 22px 24px; background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 16px; transition: border-color .25s var(--ease-out), background .25s var(--ease-out), transform .25s var(--ease-out); }
.lp:hover { border-color: rgba(122,175,201,0.4); background: rgba(122,175,201,0.06); transform: translateY(-2px); }
.lp .num { flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px; background: rgba(122,175,201,0.12); border: 1px solid rgba(122,175,201,0.25); color: var(--blue-bright); font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.lp-txt { min-width: 0; padding-right: 26px; }
.lp-title { display: block; font-size: 16px; font-weight: 700; color: var(--t-strong); line-height: 1.35; }
.lp-sub { display: block; font-size: 13.5px; color: var(--t-soft); line-height: 1.6; margin-top: 6px; }
.lp:hover .lp-sub { color: var(--t-mid); }
.lp-start { position: absolute; top: -10px; right: 16px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy-deeper); background: var(--blue); padding: 4px 10px; border-radius: 999px; box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
.lp-arrow { position: absolute; right: 18px; bottom: 18px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; color: var(--t-soft); transition: 0.25s; }
.lp-arrow svg { width: 13px; height: 13px; }
.lp:hover .lp-arrow { background: var(--blue); border-color: var(--blue); color: var(--navy-deeper); }
.start-row { margin-top: 30px; display: flex; align-items: center; justify-content: center; }
.start-cta { display: inline-flex; align-items: center; gap: 10px; background: var(--blue); color: var(--navy-deeper); padding: 15px 30px; border-radius: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; transition: all 0.3s var(--ease-out); }
.start-cta svg { width: 14px; height: 14px; }
.start-cta:hover { background: var(--blue-bright); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(122,175,201,0.3); }
/* Glossary callout (bd-glossary pattern from the pillar page) */
.gloss { margin-top: 44px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 22px 26px; background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 14px; }
.gloss .gtxt { font-size: 14.5px; color: var(--t-mid); line-height: 1.5; }
.gloss .gtxt strong { color: var(--t-strong); font-weight: 700; display: block; font-size: 16px; margin-bottom: 3px; }
.gloss-btn { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; border-radius: 10px; padding: 12px 22px; background: transparent; color: var(--t-strong); border: 1px solid var(--line-2); transition: border-color .2s, color .2s; flex-shrink: 0; }
.gloss-btn:hover { border-color: var(--blue); color: var(--blue-bright); }
.gloss-btn svg { width: 15px; height: 15px; }

/* ============================================================ */
/* GO DEEPER RAIL (reuses home.css .card; adds the grid + band)  */
/* ============================================================ */
.deeper { padding: 72px 48px; background: var(--bg-deep); border-top: 1px solid var(--line); margin-top: 0; } /* the section above carries the small gap */
.deeper-head { max-width: 1120px; margin: 0 auto 8px; }
.deeper-head .kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--blue-bright); margin-bottom: 14px; }
.deeper-head .kicker::before { content: ''; width: 26px; height: 1px; background: var(--blue); }
.deeper-head h2 { font-size: clamp(23px, 2.5vw, 31px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; }
.deeper-head p { font-size: 15px; color: var(--t-soft); line-height: 1.6; max-width: 620px; }
.deeper-grid { max-width: 1120px; margin: 30px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 18px; }
/* The card component is home.css; inside this grid it fills the cell (grid ignores
   the rail's flex-basis). Re-seat the play-button ring on the darker band bg. */
.deeper-grid .card { flex: initial; width: auto; scroll-snap-align: none; }
.deeper .card-play-btn { box-shadow: 0 6px 18px rgba(0,0,0,0.45), 0 0 0 4px var(--bg-deep); }
.deeper-note { max-width: 1120px; margin: 34px auto 0; font-size: 13px; color: var(--t-soft); display: flex; align-items: center; gap: 8px; }
.deeper-note svg { width: 14px; height: 14px; color: var(--blue-bright); flex-shrink: 0; }
.deeper-note a { color: var(--blue-bright); font-weight: 600; }
.deeper-note a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The glossary hub uses the real homepage rail component (.rail-section) via
   $render_rail(); its ≤480 media rule needs .rail .card:not(.view-all). */
@media (max-width: 480px) {
  .rail .card:not(.view-all) { flex-basis: 82vw; }
}

/* ============================================================ */
/* RESPONSIVE                                                   */
/* ============================================================ */
@media (max-width: 1080px) {
  .sla-grid { grid-template-columns: 1fr; gap: 0; }
  .sla-aside { display: none; }
}
@media (max-width: 860px) {
  .lp-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .lsec { grid-template-columns: 1fr; gap: 10px; }
  .letter { position: static; font-size: 30px; }
  .terms { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sla-hero { padding: 52px 24px 0; }
  .sla-hero--term { padding-bottom: 36px; }
  .sla-body { padding: 44px 24px 56px; }
  .letterbar-inner { padding: 0 18px; }
  .deeper { padding: 56px 24px; }
  .deeper-grid { grid-template-columns: 1fr; gap: 30px; }
  .facts, .measures, .al-grid, .redflags { grid-template-columns: 1fr; }
  .alllessons { padding: 0 24px 56px; }
  .pager { grid-template-columns: 1fr; }
  .lx-inner { grid-template-columns: 1fr; }
  .lx-media { aspect-ratio: 16 / 9; margin: 14px 14px 0; }
  .lx.playing .lx-media { margin: 14px 14px 0; }
  .gloss { flex-direction: column; align-items: flex-start; }
}