/* ==========================================================================
   Knowledge pages: the guides, the answer pages and the hubs of a course,
   and the two guide modules of the course page (Keep Reading, Free Guides)
   --------------------------------------------------------------------------
   Loaded with the course page template after landing-page.css and written
   in its language: the tokens of .lp, glass cards, the number badge of the
   Why Choose list, the icon tile of the definition cards, the arrow button
   of the sections, every size on --lp-scale.

   The copy is untouched. front/partials/knowledge-article.blade.php groups
   the paragraphs a guide already prints: one card per heading (.kbChapter),
   a table at the width of its card (.kbChapterWide), the subjects of a hub
   or the chapters of a long guide in a panel of their own (.kbChapter--nav),
   where the headings are printed once more as links to their chapters.

     1. The article section      4. Tables
     2. The chapters of a guide  5. Keep Reading: the guide cards
     3. The hub of a course      6. Free Guides on a course page
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The article section: a centred head, then one column of cards a card
      gap apart: the chapters, the definition cards, the course line
   -------------------------------------------------------------------------- */

.lp .mhDefSection--know {
    --kb-gap: calc(24px * var(--lp-scale));
    --kb-text: calc(17.5px * var(--lp-scale));
    --kb-line: calc(30.5px * var(--lp-scale));
    --kb-step: calc(28px * var(--lp-scale));
}

.lp .mhDefSection--know .mhDefInner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--kb-gap);
}

.lp .mhDefSection--know .mhDefTop {
    grid-template-columns: minmax(0, 1fr);
    row-gap: calc(44px * var(--lp-scale));
    margin: 0;
}

.lp .mhDefSection--know .mhDefIntroCol {
    align-items: center;
    text-align: center;
}

.lp .mhDefSection--know .mhDefTitle {
    max-width: calc(920px * var(--lp-scale));
    text-align: center;
    text-wrap: balance;
}

.lp .mhDefSection--know .mhDefTagline {
    max-width: calc(680px * var(--lp-scale));
    text-align: center;
}

/* The definition cards under the article: the row of the landing on the full measure */
.lp .mhDefSection--know .mhDefGrid {
    gap: var(--kb-gap);
}

.lp .mhDefSection--know .mhDefCardTitle {
    font-size: calc(19px * var(--lp-scale));
}

.lp .mhDefSection--know .mhDefCardText {
    font-size: calc(16.5px * var(--lp-scale));
    line-height: 1.65;
    color: var(--lp-ink-2);
}

/* The course line that closes a guide: the tile of the course beside the sentence */
.lp .mhDefSection--know .mhDefTextBlock--bottom {
    position: relative;
    display: flex;
    align-items: center;
    min-height: calc(112px * var(--lp-scale));
    margin: 0;
    padding: calc(28px * var(--lp-scale)) calc(40px * var(--lp-scale)) calc(28px * var(--lp-scale)) calc(116px * var(--lp-scale));
}

.lp .mhDefSection--know .mhDefTextBlock--bottom::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(40px * var(--lp-scale));
    width: calc(56px * var(--lp-scale));
    height: calc(56px * var(--lp-scale));
    margin-top: calc(-28px * var(--lp-scale));
    border-radius: calc(16px * var(--lp-scale));
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M22 10 12 5 2 10l10 5 10-5z'/><path d='M6 12v5c3.3 2.7 8.7 2.7 12 0v-5'/><path d='M22 10v6'/></svg>") center / calc(26px * var(--lp-scale)) no-repeat,
        linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 12px 24px -12px rgba(37, 99, 235, 0.8);
}

.lp .mhDefSection--know .mhDefTextBlock--bottom p {
    margin: 0;
    font-size: var(--kb-text);
    line-height: var(--kb-line);
    color: var(--lp-ink-2);
}

/* --------------------------------------------------------------------------
   2. The chapters of a guide. Every heading opens a glass card: its number
      and the heading on the left, the text beside it on the right, so the
      article fills the measure and its lines keep a reading length. Under
      900px the heading stands over its text.
   -------------------------------------------------------------------------- */

.lp .mhDefSection--know .kbArticle {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kb-gap);
    min-width: 0;
    counter-reset: kb-chapter;
}

.lp .mhDefSection--know .kbChapter {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: calc(20px * var(--lp-scale));
    min-width: 0;
    padding: calc(36px * var(--lp-scale)) calc(40px * var(--lp-scale));
    background: var(--lp-glass);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: var(--lp-radius);
    box-shadow: var(--lp-shadow), 0 0 0 1px var(--lp-line);
    box-sizing: border-box;
}

.lp .mhDefSection--know .kbChapterHead {
    display: flex;
    align-items: flex-start;
    gap: calc(16px * var(--lp-scale));
    min-width: 0;
    counter-increment: kb-chapter;
}

/* The number of the chapter, in the badge of the Why Choose list */
.lp .mhDefSection--know .kbChapterHead::before {
    content: counter(kb-chapter, decimal-leading-zero);
    content: counter(kb-chapter, decimal-leading-zero) / "";
    flex: none;
    display: grid;
    place-items: center;
    width: calc(42px * var(--lp-scale));
    height: calc(42px * var(--lp-scale));
    border-radius: calc(13px * var(--lp-scale));
    font-family: var(--lp-font-display);
    font-size: calc(15px * var(--lp-scale));
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--lp-blue-deep);
    background: linear-gradient(135deg, rgba(219, 234, 254, 0.9) 0%, rgba(199, 220, 254, 0.9) 100%);
}

/* The heading: its first line shares the centre of the badge */
.lp .mhDefSection--know .kbH3 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: calc(7px * var(--lp-scale)) 0 0;
    font-family: var(--lp-font-display);
    font-size: calc(22px * var(--lp-scale));
    font-weight: 800;
    line-height: calc(28px * var(--lp-scale));
    letter-spacing: -0.02em;
    color: var(--lp-ink);
    text-wrap: balance;
}

.lp .mhDefSection--know .kbChapterBody,
.lp .mhDefSection--know .kbChapterWide {
    min-width: 0;
}

.lp .mhDefSection--know .kbChapterBody {
    font-family: var(--lp-font-body);
    font-size: var(--kb-text);
    font-weight: 500;
    line-height: var(--kb-line);
    color: var(--lp-ink-2);
}

.lp .mhDefSection--know .kbChapterBody > * {
    margin: 0 0 calc(16px * var(--lp-scale));
}

.lp .mhDefSection--know .kbChapterBody > :last-child {
    margin-bottom: 0;
}

.lp .mhDefSection--know .kbChapterBody p {
    font: inherit;
    color: inherit;
    text-wrap: pretty;
}

.lp .mhDefSection--know .kbChapterBody strong {
    color: var(--lp-ink);
}

/* Links in the running text: the accent, underlined, never the browser blue */
.lp .mhDefSection--know .kbChapterBody :is(p, :is(ul, ol):not([class]) > li) a {
    color: var(--lp-blue-deep);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(37, 99, 235, 0.34);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    transition: color 0.2s var(--lp-ease), text-decoration-color 0.2s var(--lp-ease);
}

.lp .mhDefSection--know .kbChapterBody :is(p, :is(ul, ol):not([class]) > li) a:hover {
    color: var(--lp-blue);
    text-decoration-color: currentColor;
}

.lp .mhDefSection--know .kbChapterBody :is(p, :is(ul, ol):not([class]) > li) a:focus-visible {
    outline: 2px solid var(--lp-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Lists in the running text: an emerald dot for a point, a numbered badge for a step.
   Both marks sit on the centre of the first line. */
.lp .mhDefSection--know .kbChapterBody :is(ul, ol):not([class]) {
    display: grid;
    gap: calc(10px * var(--lp-scale));
    padding: 0;
    list-style: none;
}

.lp .mhDefSection--know .kbChapterBody :is(ul, ol):not([class]) > li {
    position: relative;
    margin: 0;
    padding: 0 0 0 calc(34px * var(--lp-scale));
    font: inherit;
    color: inherit;
    text-wrap: pretty;
}

.lp .mhDefSection--know .kbChapterBody li > :is(ul, ol) {
    margin-top: calc(10px * var(--lp-scale));
}

.lp .mhDefSection--know .kbChapterBody ul:not([class]) > li::before {
    content: "";
    position: absolute;
    top: calc((var(--kb-line) - 8px) / 2);
    left: calc(8px * var(--lp-scale));
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lp-green);
    box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.14);
}

.lp .mhDefSection--know .kbChapterBody ol:not([class]) {
    counter-reset: kb-step;
}

/* A list that carries on after a paragraph keeps its numbers (start="4") */
.lp .mhDefSection--know .kbChapterBody ol[start="2"] { counter-reset: kb-step 1; }
.lp .mhDefSection--know .kbChapterBody ol[start="3"] { counter-reset: kb-step 2; }
.lp .mhDefSection--know .kbChapterBody ol[start="4"] { counter-reset: kb-step 3; }
.lp .mhDefSection--know .kbChapterBody ol[start="5"] { counter-reset: kb-step 4; }
.lp .mhDefSection--know .kbChapterBody ol[start="6"] { counter-reset: kb-step 5; }
.lp .mhDefSection--know .kbChapterBody ol[start="7"] { counter-reset: kb-step 6; }
.lp .mhDefSection--know .kbChapterBody ol[start="8"] { counter-reset: kb-step 7; }
.lp .mhDefSection--know .kbChapterBody ol[start="9"] { counter-reset: kb-step 8; }
.lp .mhDefSection--know .kbChapterBody ol[start="10"] { counter-reset: kb-step 9; }

.lp .mhDefSection--know .kbChapterBody ol:not([class]) > li {
    padding-left: calc(42px * var(--lp-scale));
    counter-increment: kb-step;
}

.lp .mhDefSection--know .kbChapterBody ol:not([class]) > li::before {
    content: counter(kb-step);
    position: absolute;
    top: calc((var(--kb-line) - var(--kb-step)) / 2);
    left: 0;
    display: grid;
    place-items: center;
    width: var(--kb-step);
    height: var(--kb-step);
    border-radius: calc(9px * var(--lp-scale));
    font-family: var(--lp-font-display);
    font-size: calc(13.5px * var(--lp-scale));
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--lp-blue-deep);
    background: linear-gradient(135deg, rgba(219, 234, 254, 0.9) 0%, rgba(199, 220, 254, 0.9) 100%);
}

/* A chapter a reader jumped to (from the list that opens a long guide, or from a link to its anchor) stops
   under the bar of the site (74px on the catalogue platforms, 60px on a phone) and takes a ring */
.lp .mhDefSection--know .kbChapter--rail {
    scroll-margin-top: 92px;
    transition: box-shadow 0.25s var(--lp-ease);
}

.lp .mhDefSection--know .kbChapter--rail:target {
    box-shadow: var(--lp-shadow-hover), 0 0 0 2px rgba(37, 99, 235, 0.34);
}

/* A chapter that opens without a heading keeps a reading measure */
.lp .mhDefSection--know .kbChapter--open > .kbChapterBody {
    max-width: calc(760px * var(--lp-scale));
}

/* From 900px the heading stands beside its text; a table takes both columns */
@media (min-width: 900px) {
    .lp .mhDefSection--know .kbChapter--rail {
        grid-template-columns: clamp(232px, 30%, calc(340px * var(--lp-scale))) minmax(0, 1fr);
        column-gap: clamp(28px, 4vw, calc(52px * var(--lp-scale)));
        align-items: start;
    }

    .lp .mhDefSection--know .kbChapter--rail > .kbChapterHead {
        grid-column: 1;
    }

    /* The first line of the text on the centre of the first line of the heading */
    .lp .mhDefSection--know .kbChapter--rail > .kbChapterBody {
        grid-column: 2;
        padding-top: calc(5.5px * var(--lp-scale));
    }

    .lp .mhDefSection--know .kbChapter--rail > .kbChapterWide {
        grid-column: 1 / -1;
    }
}

/* A narrow rail (small laptops, tablets on their side): the heading a size down so it breaks less */
@media (min-width: 900px) and (max-width: 1099px) {
    .lp .mhDefSection--know .kbChapter--rail .kbH3 {
        padding-top: 8px;
        font-size: 20px;
        line-height: 26px;
    }
}

/* --------------------------------------------------------------------------
   3. The hub of a course: the subjects in a panel of their own, then one
      card per list. One row language for the guides and the answers, the
      row of the Free Guides module: the whole row is the link, its arrow
      slides and the row lifts on hover, a solid ring on keyboard focus.
   -------------------------------------------------------------------------- */

/* A hub holds many long cards: they keep the glass tint and leave the blur out */
.lp .mhDefSection--know .kbChapter--hub {
    row-gap: calc(22px * var(--lp-scale));
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: box-shadow 0.25s var(--lp-ease);
}

/* The heading of a list with the count of its pages: the count is as tall as
   the line of the heading and shares its centre */
.lp .mhDefSection--know .kbHubHead {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(8px * var(--lp-scale)) calc(18px * var(--lp-scale));
    min-width: 0;
    scroll-margin-top: calc(74px + 52px * var(--lp-scale));
}

.lp .mhDefSection--know .kbHubHead .kbH3 {
    flex: 0 1 auto;
}

.lp .mhDefSection--know .kbHubCount {
    flex: none;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    min-height: calc(28px * var(--lp-scale));
    margin-top: calc(7px * var(--lp-scale));
    padding: 0 calc(13px * var(--lp-scale));
    border-radius: 999px;
    font-family: var(--lp-font-body);
    font-size: calc(14px * var(--lp-scale));
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: var(--lp-blue-deep);
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.16);
}

/* The subject a reader jumped to: its count turns solid and its card takes a ring */
.lp .mhDefSection--know .kbHubHead:target .kbHubCount {
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border-color: rgba(29, 78, 216, 0.6);
}

.lp .mhDefSection--know .kbChapter--hub:has(.kbHubHead:target) {
    box-shadow: var(--lp-shadow-hover), 0 0 0 2px rgba(37, 99, 235, 0.34);
}

/* The rows */
.lp .mhDefSection--know .kbHubList {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: calc(12px * var(--lp-scale));
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp .mhDefSection--know .kbHubList li {
    position: relative;
    margin: 0;
    padding: calc(16px * var(--lp-scale)) calc(54px * var(--lp-scale)) calc(16px * var(--lp-scale)) calc(18px * var(--lp-scale));
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--lp-line);
    transition: transform 0.25s var(--lp-ease), box-shadow 0.25s var(--lp-ease), border-color 0.25s var(--lp-ease), background-color 0.25s var(--lp-ease);
}

.lp .mhDefSection--know .kbHubList li:hover,
.lp .mhDefSection--know .kbHubList li:focus-within {
    transform: translateY(-2px);
    background-color: #ffffff;
    border-color: rgba(37, 99, 235, 0.28);
    box-shadow: 0 14px 30px rgba(30, 58, 138, 0.1);
}

.lp .mhDefSection--know .kbHubList a {
    display: block;
    font-family: var(--lp-font-display);
    font-size: calc(17.5px * var(--lp-scale));
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--lp-blue-deep);
    text-decoration: none;
}

/* The anchor keeps its own words; its hit area is the whole row */
.lp .mhDefSection--know .kbHubList a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
}

.lp .mhDefSection--know .kbHubList a:focus-visible {
    outline: none;
}

.lp .mhDefSection--know .kbHubList a:focus-visible::after {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #2563eb;
}

.lp .mhDefSection--know .kbHubList span {
    display: block;
    margin-top: calc(6px * var(--lp-scale));
    font-family: var(--lp-font-body);
    font-size: calc(15.5px * var(--lp-scale));
    font-weight: 500;
    line-height: 1.55;
    color: var(--lp-ink-2);
    text-wrap: pretty;
}

.lp .mhDefSection--know .kbHubArrow {
    position: absolute;
    top: 50%;
    right: calc(18px * var(--lp-scale));
    width: calc(18px * var(--lp-scale));
    height: calc(18px * var(--lp-scale));
    transform: translateY(-50%);
    color: var(--lp-blue);
    pointer-events: none;
    transition: transform 0.25s var(--lp-ease);
}

.lp .mhDefSection--know .kbHubList li:hover .kbHubArrow,
.lp .mhDefSection--know .kbHubList li:focus-within .kbHubArrow {
    transform: translate(4px, -50%);
}

/* The answer pages: compact rows */
.lp .mhDefSection--know .kbHubList--answers {
    gap: calc(10px * var(--lp-scale));
}

.lp .mhDefSection--know .kbHubList--answers li {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: calc(56px * var(--lp-scale));
    padding: calc(12px * var(--lp-scale)) calc(50px * var(--lp-scale)) calc(12px * var(--lp-scale)) calc(18px * var(--lp-scale));
}

.lp .mhDefSection--know .kbHubList--answers a {
    font-size: calc(16px * var(--lp-scale));
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.005em;
    text-wrap: balance;
}

/* Two columns from 600px (the guides from 900px), three for the answers on a desktop */
@media (min-width: 600px) {
    .lp .mhDefSection--know .kbHubList--answers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .lp .mhDefSection--know .kbHubList {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .lp .mhDefSection--know .kbHubList--answers {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* On this page: the subjects of a hub, each with the count of its pages, or
   the chapters of a guide with four chapters or more, numbered as their
   cards are. The panel is the card: a soft tint of the two accents over
   the glass. */
.lp .mhDefSection--know .kbChapter--nav {
    padding: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.lp .mhDefSection--know .kbHubNav {
    margin: 0;
    padding: calc(30px * var(--lp-scale)) calc(30px * var(--lp-scale)) calc(24px * var(--lp-scale));
    border-radius: var(--lp-radius);
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.07) 0%, rgba(5, 150, 105, 0.08) 100%),
        var(--lp-glass);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: var(--lp-shadow), 0 0 0 1px var(--lp-line);
}

.lp .mhDefSection--know .kbHubNavTitle {
    display: block;
    margin: 0 0 calc(14px * var(--lp-scale));
    padding: 0 calc(10px * var(--lp-scale));
    font-family: var(--lp-font-display);
    font-size: calc(13.5px * var(--lp-scale));
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lp-green-ink);
}

/* Columns read downwards, 01 to the last, whatever their number */
.lp .mhDefSection--know .kbHubNavList {
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 1;
    column-gap: calc(24px * var(--lp-scale));
    counter-reset: kb-hub-subject;
}

.lp .mhDefSection--know .kbHubNavList li {
    margin: 0 0 calc(4px * var(--lp-scale));
    padding: 0;
    break-inside: avoid;
    counter-increment: kb-hub-subject;
}

.lp .mhDefSection--know .kbHubNavList a {
    display: flex;
    align-items: center;
    gap: calc(12px * var(--lp-scale));
    box-sizing: border-box;
    min-height: calc(48px * var(--lp-scale));
    padding: calc(6px * var(--lp-scale)) calc(10px * var(--lp-scale));
    border-radius: 12px;
    font-family: var(--lp-font-display);
    font-size: calc(16px * var(--lp-scale));
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: var(--lp-ink);
    text-decoration: none;
    transition: background-color 0.2s var(--lp-ease), color 0.2s var(--lp-ease), box-shadow 0.2s var(--lp-ease);
}

.lp .mhDefSection--know .kbHubNavList a::before {
    content: counter(kb-hub-subject, decimal-leading-zero);
    content: counter(kb-hub-subject, decimal-leading-zero) / "";
    flex: none;
    display: grid;
    place-items: center;
    width: calc(34px * var(--lp-scale));
    height: calc(34px * var(--lp-scale));
    border-radius: calc(11px * var(--lp-scale));
    font-family: var(--lp-font-display);
    font-size: calc(14px * var(--lp-scale));
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: 0;
    color: var(--lp-blue-deep);
    background: linear-gradient(135deg, rgba(219, 234, 254, 0.9) 0%, rgba(199, 220, 254, 0.9) 100%);
}

.lp .mhDefSection--know .kbHubNavLabel {
    flex: 1 1 auto;
    min-width: 0;
}

.lp .mhDefSection--know .kbHubNavCount {
    flex: none;
    font-family: var(--lp-font-display);
    font-size: calc(14px * var(--lp-scale));
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--lp-ink-3);
}

.lp .mhDefSection--know .kbHubNavList a:hover,
.lp .mhDefSection--know .kbHubNavList a:focus-visible {
    color: var(--lp-blue-deep);
    background-color: rgba(255, 255, 255, 0.9);
    outline: none;
}

.lp .mhDefSection--know .kbHubNavList a:focus-visible {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #2563eb;
}

@media (min-width: 600px) {
    .lp .mhDefSection--know .kbHubNavList {
        columns: 2;
    }
}

/* Three columns on a desktop from five entries: four stand two and two */
@media (min-width: 1100px) {
    .lp .mhDefSection--know .kbHubNavList:has(> li:nth-child(5)) {
        columns: 3;
    }
}

/* Words for a screen reader only */
.lp .mhDefSection--know .kbHubSr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   4. Tables inside a guide (course tiers, role maps, comparisons). A table
      takes the width of its card; on a phone each row becomes a card with
      the column header printed above each value.
   -------------------------------------------------------------------------- */

.lp .mhDefSection--know .kbTableWrap {
    width: 100%;
    margin: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 18px;
    border: 1px solid var(--lp-line);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 14px 34px -24px rgba(30, 58, 138, 0.35);
}

.lp .mhDefSection--know .kbTable {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-family: var(--lp-font-body);
    font-size: calc(16px * var(--lp-scale));
    font-weight: 500;
    line-height: 1.55;
    color: var(--lp-ink-2);
}

.lp .mhDefSection--know .kbTable th,
.lp .mhDefSection--know .kbTable td {
    padding: calc(15px * var(--lp-scale)) calc(18px * var(--lp-scale));
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(30, 58, 138, 0.08);
}

.lp .mhDefSection--know .kbTable th {
    font-family: var(--lp-font-display);
    font-size: calc(13px * var(--lp-scale));
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lp-ink);
    background: rgba(37, 99, 235, 0.06);
}

.lp .mhDefSection--know .kbTable tbody tr:last-child td {
    border-bottom: 0;
}

.lp .mhDefSection--know .kbTable td:first-child,
.lp .mhDefSection--know .kbTable td strong {
    color: var(--lp-ink);
    font-weight: 700;
}

.lp .mhDefSection--know .kbTable a {
    color: var(--lp-blue-deep);
    font-weight: 700;
    text-decoration: none;
}

.lp .mhDefSection--know .kbTable a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 768px) {
    .lp .mhDefSection--know .kbTableWrap {
        overflow: visible;
    }

    .lp .mhDefSection--know .kbTable {
        min-width: 0;
        font-size: 15.5px;
    }

    .lp .mhDefSection--know .kbTable thead {
        display: none;
    }

    .lp .mhDefSection--know .kbTable tbody,
    .lp .mhDefSection--know .kbTable tr,
    .lp .mhDefSection--know .kbTable td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .lp .mhDefSection--know .kbTable tr {
        padding: 16px 16px 12px;
        border-bottom: 1px solid var(--lp-line);
    }

    .lp .mhDefSection--know .kbTable tbody tr:last-child {
        border-bottom: 0;
    }

    .lp .mhDefSection--know .kbTable td {
        padding: 6px 0 8px;
        border-bottom: 0;
    }

    .lp .mhDefSection--know .kbTable td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 3px;
        font-family: var(--lp-font-display);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--lp-blue-deep);
    }

    .lp .mhDefSection--know .kbTable td:first-child {
        padding-top: 0;
        font-family: var(--lp-font-display);
        font-size: 17px;
        font-weight: 800;
        line-height: 1.35;
    }

    .lp .mhDefSection--know .kbTable td:first-child::before {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   5. Keep Reading: the other guides of the course as cards of the landing.
      The tile and the title in one row, the summary, the arrow under a
      hairline; the three parts of the cards of a row share their lines.
   -------------------------------------------------------------------------- */

.lp .kbRelated {
    position: relative;
    padding: var(--lp-sec-pad) 0;
    background:
        radial-gradient(50% 60% at 0% 0%, rgba(191, 219, 254, 0.55) 0%, rgba(191, 219, 254, 0) 70%),
        radial-gradient(50% 60% at 100% 100%, rgba(167, 243, 208, 0.4) 0%, rgba(167, 243, 208, 0) 70%),
        linear-gradient(180deg, #f5f8ff 0%, #eef3fb 100%);
}

.lp .kbRelatedInner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--lp-measure);
    margin: 0 auto;
    padding: 0 var(--lp-pad-x);
    box-sizing: border-box;
}

.lp .kbRelatedHead {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 calc(44px * var(--lp-scale));
    text-align: center;
}

.lp .kbRelatedTitle {
    max-width: calc(920px * var(--lp-scale));
    margin: 0;
    font-family: var(--lp-font-display);
    font-size: clamp(30px, 3.1vw, calc(44px * var(--lp-scale)));
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: var(--lp-ink);
    text-wrap: balance;
}

.lp .kbRelatedIntro {
    max-width: calc(680px * var(--lp-scale));
    margin: calc(20px * var(--lp-scale)) auto 0;
    font-family: var(--lp-font-body);
    font-size: calc(17.5px * var(--lp-scale));
    font-weight: 500;
    line-height: 1.65;
    color: var(--lp-ink-2);
    text-wrap: pretty;
}

.lp .kbRelatedGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(24px * var(--lp-scale));
}

.lp .kbRelatedCard {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: calc(28px * var(--lp-scale));
    background: var(--lp-glass);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: var(--lp-radius);
    box-shadow: var(--lp-shadow), 0 0 0 1px var(--lp-line);
    box-sizing: border-box;
    color: inherit;
    text-decoration: none;
    transition: transform 0.28s var(--lp-ease), box-shadow 0.28s var(--lp-ease);
}

/* The head, the summary and the arrow of every card of a row on the same lines */
@supports (grid-template-rows: subgrid) {
    .lp .kbRelatedCard {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
        row-gap: 0;
    }
}

.lp .kbRelatedCard:hover {
    color: inherit;
    text-decoration: none;
    transform: translateY(-4px);
    box-shadow: var(--lp-shadow-hover), 0 0 0 1px rgba(37, 99, 235, 0.26);
}

.lp .kbRelatedCard:focus-visible {
    outline: none;
    box-shadow: var(--lp-shadow-hover), 0 0 0 2px #ffffff, 0 0 0 4px #2563eb;
}

.lp .kbRelatedCardHead {
    display: flex;
    align-items: flex-start;
    gap: calc(14px * var(--lp-scale));
    min-width: 0;
}

.lp .kbRelatedCardIcon {
    flex: none;
    display: grid;
    place-items: center;
    width: calc(46px * var(--lp-scale));
    height: calc(46px * var(--lp-scale));
    border-radius: calc(14px * var(--lp-scale));
    color: #ffffff;
    background: linear-gradient(135deg, var(--lp-blue) 0%, var(--lp-blue-deep) 100%);
    box-shadow: 0 10px 20px -12px rgba(37, 99, 235, 0.8);
}

.lp .kbRelatedCardIcon svg {
    width: calc(22px * var(--lp-scale));
    height: calc(22px * var(--lp-scale));
}

/* One line sits on the centre of the tile, two lines are as tall as it, three start level with it */
.lp .kbRelatedCardTitle {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: calc(46px * var(--lp-scale));
    font-family: var(--lp-font-display);
    font-size: calc(19px * var(--lp-scale));
    font-weight: 800;
    line-height: 1.26;
    letter-spacing: -0.015em;
    color: var(--lp-ink);
    text-wrap: balance;
}

.lp .kbRelatedCardSub {
    display: block;
    margin: calc(16px * var(--lp-scale)) 0 calc(22px * var(--lp-scale));
    font-family: var(--lp-font-body);
    font-size: calc(16px * var(--lp-scale));
    font-weight: 500;
    line-height: 1.62;
    color: var(--lp-ink-2);
    text-wrap: pretty;
}

.lp .kbRelatedCardMore {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: calc(16px * var(--lp-scale));
    border-top: 1px solid var(--lp-line);
    font-family: var(--lp-font-display);
    font-size: calc(15px * var(--lp-scale));
    font-weight: 800;
    letter-spacing: -0.005em;
    color: var(--lp-blue-deep);
}

/* The arrow: a soft disc that fills when the card is pointed at */
.lp .kbRelatedCardMore svg {
    flex: none;
    box-sizing: border-box;
    width: calc(38px * var(--lp-scale));
    height: calc(38px * var(--lp-scale));
    padding: calc(10px * var(--lp-scale));
    border-radius: 50%;
    color: var(--lp-blue-deep);
    background-color: rgba(37, 99, 235, 0.1);
    transition: transform 0.25s var(--lp-ease), background-color 0.25s var(--lp-ease), color 0.25s var(--lp-ease);
}

.lp .kbRelatedCard:hover .kbRelatedCardMore svg,
.lp .kbRelatedCard:focus-visible .kbRelatedCardMore svg {
    transform: translateX(3px);
    color: #ffffff;
    background-color: var(--lp-blue);
}

/* The two buttons under the cards: every guide, then the course (the arrow button of the sections) */
.lp .kbRelatedFoot {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(14px * var(--lp-scale));
    margin-top: calc(40px * var(--lp-scale));
}

.lp .kbRelatedHub,
.lp .kbRelatedCourse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-sizing: border-box;
    min-height: 56px;
    padding: 0 calc(28px * var(--lp-scale));
    border-radius: 999px;
    font-family: var(--lp-font-display);
    font-size: calc(16px * var(--lp-scale));
    font-weight: 800;
    letter-spacing: -0.005em;
    text-decoration: none;
    transition: transform 0.2s var(--lp-ease), box-shadow 0.2s var(--lp-ease), background-position 0.45s var(--lp-ease), background-color 0.2s var(--lp-ease), border-color 0.2s var(--lp-ease);
}

.lp .kbRelatedHub svg,
.lp .kbRelatedCourse svg {
    flex: none;
    width: 18px;
    height: 18px;
    transition: transform 0.25s var(--lp-ease);
}

.lp .kbRelatedHub:hover svg,
.lp .kbRelatedCourse:hover svg {
    transform: translateX(4px);
}

.lp .kbRelatedHub {
    color: var(--lp-blue-deep);
    background-color: var(--lp-glass-strong);
    border: 1px solid var(--lp-line-strong);
    box-shadow: 0 10px 24px -18px rgba(30, 58, 138, 0.5);
}

.lp .kbRelatedHub:hover {
    color: var(--lp-blue-deep);
    text-decoration: none;
    transform: translateY(-3px);
    background-color: #ffffff;
    border-color: rgba(37, 99, 235, 0.4);
    box-shadow: 0 18px 34px -18px rgba(30, 58, 138, 0.45);
}

.lp .kbRelatedCourse {
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: linear-gradient(135deg, var(--lp-navy) 0%, var(--lp-blue) 55%, var(--lp-blue-deep) 100%);
    background-size: 160% 100%;
    background-position: 0% 50%;
    box-shadow: 0 18px 34px -16px rgba(37, 99, 235, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.lp .kbRelatedCourse:hover {
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-3px);
    background-position: 100% 50%;
    box-shadow: 0 26px 44px -16px rgba(37, 99, 235, 0.85), 0 0 0 6px rgba(37, 99, 235, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.lp .kbRelatedHub:focus-visible,
.lp .kbRelatedCourse:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.28);
}

/* --------------------------------------------------------------------------
   6. Free Guides on a course page (inside Essential Knowledge): the words
      on the left, up to four guides as row links on the right
   -------------------------------------------------------------------------- */

.lp .kbGuides {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    column-gap: clamp(32px, 4vw, calc(56px * var(--lp-scale)));
    row-gap: calc(24px * var(--lp-scale));
    align-items: start;
    margin: calc(22px * var(--lp-scale)) 0 0;
    padding: calc(32px * var(--lp-scale)) calc(36px * var(--lp-scale));
    background: var(--lp-glass);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: var(--lp-radius);
    box-shadow: var(--lp-shadow), 0 0 0 1px var(--lp-line);
    box-sizing: border-box;
}

.lp .kbGuidesIntro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.lp .kbGuidesIntro .mhDefEyebrow {
    margin-bottom: 0;
}

.lp .kbGuidesTitle {
    margin: calc(20px * var(--lp-scale)) 0 0;
    font-family: var(--lp-font-display);
    font-size: clamp(23px, 2.1vw, calc(29px * var(--lp-scale)));
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--lp-ink);
    text-wrap: balance;
}

.lp .kbGuidesText {
    margin: calc(14px * var(--lp-scale)) 0 0;
    font-family: var(--lp-font-body);
    font-size: calc(17px * var(--lp-scale));
    font-weight: 500;
    line-height: 1.65;
    color: var(--lp-ink-2);
    text-wrap: pretty;
}

.lp .kbGuidesHub {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-sizing: border-box;
    min-height: 52px;
    margin-top: calc(24px * var(--lp-scale));
    padding: 0 calc(26px * var(--lp-scale));
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    font-family: var(--lp-font-display);
    font-size: calc(15.5px * var(--lp-scale));
    font-weight: 800;
    letter-spacing: -0.005em;
    color: #ffffff;
    text-decoration: none;
    background: linear-gradient(135deg, var(--lp-navy) 0%, var(--lp-blue) 55%, var(--lp-blue-deep) 100%);
    background-size: 160% 100%;
    background-position: 0% 50%;
    box-shadow: 0 18px 34px -16px rgba(37, 99, 235, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.24);
    transition: transform 0.2s var(--lp-ease), box-shadow 0.2s var(--lp-ease), background-position 0.45s var(--lp-ease);
}

.lp .kbGuidesHub svg {
    flex: none;
    transition: transform 0.25s var(--lp-ease);
}

.lp .kbGuidesHub:hover {
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-3px);
    background-position: 100% 50%;
    box-shadow: 0 26px 44px -16px rgba(37, 99, 235, 0.85), 0 0 0 6px rgba(37, 99, 235, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.lp .kbGuidesHub:hover svg {
    transform: translateX(4px);
}

.lp .kbGuidesHub:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.28);
}

.lp .kbGuidesList {
    display: grid;
    gap: calc(12px * var(--lp-scale));
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp .kbGuidesList li {
    margin: 0;
}

.lp .kbGuidesList a {
    position: relative;
    display: block;
    padding: calc(16px * var(--lp-scale)) calc(54px * var(--lp-scale)) calc(16px * var(--lp-scale)) calc(18px * var(--lp-scale));
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--lp-line);
    color: inherit;
    text-decoration: none;
    transition: transform 0.25s var(--lp-ease), box-shadow 0.25s var(--lp-ease), border-color 0.25s var(--lp-ease), background-color 0.25s var(--lp-ease);
}

.lp .kbGuidesList a:hover,
.lp .kbGuidesList a:focus-visible {
    transform: translateY(-2px);
    background-color: #ffffff;
    border-color: rgba(37, 99, 235, 0.28);
    box-shadow: 0 14px 30px rgba(30, 58, 138, 0.1);
    outline: none;
}

.lp .kbGuidesList a:focus-visible {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #2563eb;
}

.lp .kbGuidesItemTitle {
    display: block;
    font-family: var(--lp-font-display);
    font-size: calc(17.5px * var(--lp-scale));
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--lp-blue-deep);
}

.lp .kbGuidesItemSub {
    display: block;
    margin-top: calc(6px * var(--lp-scale));
    font-family: var(--lp-font-body);
    font-size: calc(15.5px * var(--lp-scale));
    font-weight: 500;
    line-height: 1.55;
    color: var(--lp-ink-2);
    text-wrap: pretty;
}

.lp .kbGuidesItemArrow {
    position: absolute;
    top: 50%;
    right: calc(18px * var(--lp-scale));
    transform: translateY(-50%);
    color: var(--lp-blue);
    transition: transform 0.25s var(--lp-ease);
}

.lp .kbGuidesList a:hover .kbGuidesItemArrow {
    transform: translate(4px, -50%);
}

/* --------------------------------------------------------------------------
   Tablets and phones
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    /* The definition cards stack on the width of the chapters */
    .lp .mhDefSection--know .mhDefGrid {
        max-width: none;
    }

    .lp .kbRelatedGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lp .kbGuides {
        grid-template-columns: minmax(0, 1fr);
        padding: 30px;
    }
}

@media (max-width: 899px) {
    .lp .mhDefSection--know .kbChapter {
        padding: 30px;
    }

    .lp .mhDefSection--know .mhDefTextBlock--bottom {
        padding-right: 30px;
    }
}

@media (max-width: 768px) {
    .lp .mhDefSection--know {
        --kb-gap: 18px;
        --kb-text: 16.5px;
        --kb-line: 28px;
        --kb-step: 26px;
    }

    .lp .mhDefSection--know .mhDefTop {
        row-gap: 32px;
    }

    .lp .mhDefSection--know .kbChapter {
        row-gap: 16px;
        padding: 24px 22px;
    }

    .lp .mhDefSection--know .kbChapterHead {
        gap: 12px;
    }

    .lp .mhDefSection--know .kbChapterHead::before {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        font-size: 14px;
    }

    .lp .mhDefSection--know .kbH3 {
        padding-top: 6px;
        font-size: 20px;
        line-height: 26px;
    }

    .lp .mhDefSection--know .kbChapterBody > * {
        margin-bottom: 14px;
    }

    .lp .mhDefSection--know .kbChapterBody :is(ul, ol):not([class]) > li {
        padding-left: 28px;
    }

    .lp .mhDefSection--know .kbChapterBody ul:not([class]) > li::before {
        left: 6px;
    }

    .lp .mhDefSection--know .kbChapterBody ol:not([class]) > li {
        padding-left: 38px;
    }

    .lp .mhDefSection--know .kbChapterBody ol:not([class]) > li::before {
        border-radius: 8px;
        font-size: 13px;
    }

    .lp .mhDefSection--know .mhDefTextBlock--bottom {
        min-height: 92px;
        padding: 22px 22px 22px 82px;
    }

    .lp .mhDefSection--know .mhDefTextBlock--bottom::before {
        left: 22px;
        width: 46px;
        height: 46px;
        margin-top: -23px;
        border-radius: 14px;
        background-size: 22px, auto;
    }

    .lp .mhDefSection--know .kbChapter--rail {
        scroll-margin-top: 76px;
    }

    .lp .mhDefSection--know .kbHubHead {
        scroll-margin-top: 110px;
    }

    .lp .mhDefSection--know .kbHubCount {
        min-height: 26px;
        margin-top: 6px;
    }

    .lp .mhDefSection--know .kbHubList li {
        padding: 14px 48px 14px 16px;
    }

    .lp .mhDefSection--know .kbHubList--answers li {
        min-height: 54px;
        padding: 12px 46px 12px 16px;
    }

    .lp .mhDefSection--know .kbHubArrow {
        right: 16px;
        width: 18px;
        height: 18px;
    }

    .lp .mhDefSection--know .kbHubNav {
        padding: 22px 12px 16px;
    }

    .lp .mhDefSection--know .kbHubNavTitle {
        padding: 0 8px;
    }

    .lp .mhDefSection--know .kbHubNavList a {
        padding: 6px 8px;
    }

    .lp .kbRelatedHead {
        margin-bottom: 32px;
    }

    .lp .kbRelatedGrid {
        gap: 18px;
    }

    .lp .kbRelatedFoot {
        flex-direction: column;
        align-items: stretch;
        margin-top: 28px;
    }

    .lp .kbGuides {
        margin-top: 18px;
        padding: 24px 22px;
        row-gap: 22px;
    }

    .lp .kbGuidesTitle {
        font-size: clamp(22px, 5.8vw, 26px);
    }

    .lp .kbGuidesText {
        font-size: 16.5px;
    }

    .lp .kbGuidesItemTitle {
        font-size: 17px;
    }

    .lp .kbGuidesItemSub {
        font-size: 15px;
    }

    .lp .kbGuidesHub {
        width: 100%;
    }

    .lp .kbGuidesList a {
        padding: 14px 46px 14px 16px;
    }
}

@media (max-width: 640px) {
    .lp .mhDefSection--know .kbChapter {
        padding: 22px 18px;
    }

    .lp .kbRelatedGrid {
        grid-template-columns: minmax(0, 1fr);
    }

    .lp .kbRelatedCard {
        padding: 22px 18px;
    }

    .lp .kbGuides {
        padding: 22px 18px;
    }
}

/* On a small phone a long course name cannot stay on one line: the buttons
   become rounded rectangles there (16px corners) and their label may wrap;
   the pill returns from 481px up. */
@media (max-width: 480px) {
    .lp .kbRelatedHub,
    .lp .kbRelatedCourse,
    .lp .kbGuidesHub {
        min-height: 52px;
        padding: 12px 18px;
        border-radius: 16px;
        line-height: 1.3;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lp .kbRelatedCard,
    .lp .kbRelatedCard:hover,
    .lp .kbRelatedHub:hover,
    .lp .kbRelatedCourse:hover,
    .lp .kbGuidesHub:hover,
    .lp .kbGuidesList a:hover,
    .lp .mhDefSection--know .kbHubList li:hover,
    .lp .mhDefSection--know .kbHubList li:focus-within {
        transform: none;
    }
}