.course-preview { --course-colour: #1E40AF; }
.course-breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px 12px; font-size: 12px; color: var(--muted); padding-block: 25px 12px; }
.course-breadcrumbs a:hover { color: var(--focus); }
.course-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px,5vw,80px); padding-block: 30px 64px; align-items: stretch; }
.course-hero > div { min-width: 0; }
.course-hero h1 { font-size: clamp(42px,4.3vw,66px); line-height: 1.08; max-width: 18ch; margin: 21px 0 0; text-wrap: initial; }
.course-hero h1 span { color: var(--focus); display: block; }
.course-partner-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
/* Official artwork stays red on white in both themes. Its visible mark is
   over 40px high; padding plus SVG whitespace exceeds half its height. */
.course-partner-logo { display: inline-flex; flex: 0 0 auto; align-items: center; padding: 16px; background: #ffffff; }
.course-partner-logo img { display: block; width: 172px; height: auto; aspect-ratio: 196.87 / 69.14; max-width: none; object-fit: contain; }
.course-partner-logo:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.course-partner-logo .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.course-partner-brand .course-subject { flex: 0 1 auto; max-width: 100%; margin: 0; }
.course-subject { color: #b91c1c; font-size: 12px; letter-spacing: .055em; }
.dark .course-subject { color: #ff8585; }
.course-lead { font-size: 17px; line-height: 1.7; color: var(--muted); margin-top: 25px; max-width: 58ch; }
.course-hero-price-box { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; max-width: 600px; margin-top: 25px; padding: 20px; border: 1px solid var(--line); background: var(--panel); }
.course-hero-price { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin: 0; font-size: 12px; line-height: 1.5; }
.course-hero-price strong { max-width: 100%; overflow-wrap: anywhere; font-size: 32px; font-weight: 550; line-height: 1.1; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.course-hero-price span { color: var(--muted); font-size: 12px; }
.course-hero-price-box > .button { flex: 1 1 208px; min-width: 0; min-height: 48px; padding-inline: 16px; font-size: 13px; text-align: center; }
.course-preview .course-primary { background: var(--blue); border-color: var(--blue); color: oklch(98% .005 260); }
.course-preview .course-primary:hover { background: var(--blue-hover); }
.course-hero .actions { gap: 15px 24px; }
.course-hero .actions a { font-size: 13px; }
.course-proof { font-size: 12px; margin-top: 25px; text-underline-offset: 4px; text-decoration: underline; }
.course-fine { font-size: 12px; color: var(--muted); line-height: 1.75; margin-top: 16px; max-width: 70ch; }
.course-hero-photo { display: block; position: relative; min-width: 0; overflow: hidden; margin-right: calc(-1 * var(--gutter)); background: var(--panel); }
.course-hero-photo img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; object-position: 57% center; }
.course-hero-illustration { background: #f1f1ef; }
.course-hero-illustration img { object-fit: contain; object-position: center; }
.course-content { width: min(calc(100% - 2 * var(--gutter)),1120px); margin-inline: auto; }
.course-section { padding-block: 65px; border-top: 1px solid var(--line); scroll-margin-top: 110px; }
.course-section-heading { max-width: 760px; margin-bottom: 32px; }
.course-section-heading .eyebrow { color: var(--muted); margin-bottom: 17px; }
.course-section h2 { font-size: clamp(31px,3.3vw,44px); line-height: 1.12; max-width: 26ch; }
.course-section h3 { font-size: 23px; line-height: 1.25; }
.course-section p { line-height: 1.8; margin-top: 18px; max-width: 72ch; color: var(--muted); }
.course-section a:not(.button) { text-decoration: underline; text-underline-offset: 4px; }
.course-section a:hover { color: var(--focus); }
.course-section .course-source-note { font-size: 12px; max-width: none; }
.course-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0; gap: 0 40px; }
.course-facts > div { display: grid; grid-template-columns: 145px 1fr; gap: 18px; padding-block: 17px; border-bottom: 1px solid var(--line); }
.course-facts dt { font-size: 13px; font-weight: 600; }
.course-facts dd { margin: 0; color: var(--muted); font-size: 14px; }
.course-price-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
/* Product cards retain their black/white palette in either page theme. Tokens
   are local so prices, compact Labs options and notes all stay readable. */
.course-price-options article { --ink: #ffffff; --muted: #d6d6d6; --line: #484848; --panel: #1c1c1c; --focus: #a8c6ff; --course-card-padding: clamp(20px,2vw,28px); color-scheme: dark; display: flex; flex-direction: column; padding: var(--course-card-padding); border: 1px solid var(--line); background: #101010; color: var(--ink); min-width: 0; }
/* The learning format belongs to the product card, not a separate banner. */
.course-price-options article > h3 { margin: 0; padding: 0 0 18px; border-bottom: 1px solid #383838; background: transparent; color: #f7f7f7; font-size: clamp(21px,1.8vw,26px); font-weight: 550; letter-spacing: -.025em; line-height: 1.25; }
.course-package-summary { display: block; color: var(--ink); font-weight: 550; margin-bottom: 12px; }
.course-price-options article > p:not(.course-option-price) { font-size: 14px; flex: 1; }
.course-price-options #consultancy > p { flex: 0 1 auto; }
.course-price-options .course-option-price { font-size: 32px; color: var(--ink); font-weight: 550; line-height: 1.2; margin-top: 28px; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.course-option-price span { display: block; font-size: 11px; color: var(--muted); font-weight: 400; letter-spacing: normal; line-height: 1.7; margin-top: 10px; }
.course-price-options .course-price-pending { font-size: 22px; }
.course-price-options button { margin-top: 20px; min-height: 48px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 12px; cursor: not-allowed; }
.course-price-options .text-link { align-self: flex-start; min-height: 48px; margin-top: 20px; font-size: 13px; }
.course-price-options #consultancy > .text-link { align-self: stretch; justify-content: center; margin-top: auto; padding: 13px 16px; background: var(--blue); color: #ffffff; border: 1px solid var(--blue); text-decoration: none; }
.course-price-options #consultancy > .text-link:hover { background: var(--blue-hover); border-color: var(--blue-hover); }
.course-price-options #consultancy > .text-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.course-price-options #consultancy > .course-price-pending { margin-bottom: 28px; }
/* Keep the optional Labs purchase distinct from its dark course card. */
.course-labs-addon { --ink: #161616; --muted: #525252; --line: #d6d6d6; --focus: #215de9; color-scheme: light; margin-top: 16px; padding: 12px; border: 1px solid var(--line); background: #ffffff; color: var(--ink); }
.course-labs-addon .course-addon-kicker { margin: 0 0 7px; font-size: 11px; line-height: 1.3; }
.course-addon-choice { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 9px; min-height: 44px; cursor: pointer; }
.course-addon-choice input { margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--blue); }
.course-addon-choice input:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.course-addon-choice input:disabled { cursor: not-allowed; }
.course-addon-choice strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.4; }
.course-addon-choice span span { display: block; font-size: 13px; margin-top: 3px; line-height: 1.4; }
.course-addon-choice .course-addon-tax { font-size: 11px; color: var(--muted); margin-top: 0; }
.course-labs-addon .course-addon-guarantee { font-size: 12px; line-height: 1.5; margin: 9px 0 0; }
.course-addon-guarantee strong { color: var(--ink); font-weight: 550; }
.course-addon-total-slot { padding-top: 6px; }
.course-addon-total-slot:has(> .course-addon-total[hidden]) { display: none; }
.course-addon-total { display: block; font-size: 12px; line-height: 1.45; color: var(--ink); }
.course-addon-total[hidden] { display: none; }
.course-addon-total strong { white-space: nowrap; }
.course-addon-total span { display: block; color: var(--muted); font-size: 11px; }
.course-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.course-readable-list { list-style: none; padding: 0; margin: 0; }
.course-readable-list li { padding-bottom: 19px; color: var(--muted); line-height: 1.75; }
.course-readable-list strong { color: var(--ink); }
.course-module-list { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 50px; }
.course-module-list article { border-top: 1px solid var(--line); padding-top: 24px; }
.course-domain-block { margin-top: 35px; padding: 28px; background: var(--panel); }
.course-domain-block ul { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 30px; padding-left: 18px; margin-top: 25px; color: var(--muted); font-size: 14px; }
.course-domain-block li::marker { color: var(--focus); }
.course-table-scroll { overflow-x: auto; margin-block: 30px 15px; scrollbar-width: thin; }
.course-table-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.course-preview table { border-collapse: collapse; width: 100%; min-width: 560px; text-align: left; font-size: 14px; }
.course-preview caption { text-align: left; font-size: 16px; font-weight: 600; padding-bottom: 18px; }
.course-preview th, .course-preview td { padding: 17px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
.course-preview thead { background: var(--panel); }
.course-preview thead th { color: var(--ink); font-size: 12px; }
.course-preview td { color: var(--muted); }
.course-preview th[scope="row"] { width: 26%; font-weight: 500; }
.course-context-list article { display: grid; grid-template-columns: 230px 1fr; gap: 12px 35px; padding-block: 26px; border-top: 1px solid var(--line); }
.course-context-list article p { margin: 0; }
.course-context-list article > a { grid-column: 2; font-size: 13px; justify-self: start; }
.course-callout { padding-top: 32px; margin-top: 12px; border-top: 1px solid var(--line); }
.course-callout p { max-width: 75ch; }
.course-worked { --example-paper: oklch(96% .006 255); }
.dark .course-worked { --example-paper: oklch(24% .006 255); }
.course-example-controls { padding: 0; margin: 0 0 24px; border: 0; }
.course-example-controls:not([hidden]) { display: flex; flex-wrap: wrap; gap: 9px; }
.course-example-controls legend { margin-bottom: 12px; font-size: 12px; }
.course-example-controls label { position: relative; cursor: pointer; }
.course-example-controls input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; cursor: pointer; }
.course-example-controls span { display: block; padding: 11px 20px; border: 1px solid var(--line); font-size: 14px; }
.course-example-controls input:checked + span { background: var(--blue); color: oklch(98% .005 260); border-color: var(--blue); }
.course-example-controls input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.course-example-panels article { padding: clamp(24px,4vw,42px); background: var(--example-paper); margin-bottom: 20px; }
.course-example-panels article[hidden] { display: none; }
.course-example-panels dl { margin: 25px 0 0; }
.course-example-panels dl > div { display: grid; grid-template-columns: 190px 1fr; gap: 20px; border-top: 1px solid var(--line); padding-block: 15px; font-size: 14px; }
.course-example-panels dt { font-weight: 550; }
.course-example-panels dd { margin: 0; color: var(--muted); }
.course-example-panels .course-example-takeaway { font-size: 13px; max-width: none; }
.course-labs { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; border-top: 1px solid var(--line); margin-top: 40px; padding-top: 35px; }
.course-labs .eyebrow { font-size: 11px; margin: 0 0 10px; }
.course-labs p { font-size: 14px; }
.course-labs-feature { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(30px,4vw,56px); align-items: center; }
.course-labs-art { display: block; min-width: 0; aspect-ratio: 3 / 2; background: #f1f1ef; }
.course-labs-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.course-labs-copy { min-width: 0; }
.course-labs-copy .course-section-heading { margin-bottom: 24px; }
.course-labs-details { border-top: 1px solid var(--line); padding-top: 24px; }
.course-labs-details h3 { font-size: 21px; }
.course-labs-details .course-readable-list { margin-top: 20px; }
.course-labs-details .course-readable-list li { padding-bottom: 8px; font-size: 14px; }
.course-labs-details p { font-size: 14px; }
.course-labs-details > .button { margin-top: 24px; }
@media (max-width:900px) { .course-labs-feature { grid-template-columns: 1fr; gap: 30px; } }
.course-sources { padding-bottom: 70px; }
.course-sources h2 { font-size: 30px; }
.course-sources p,.course-sources li { font-size: 13px; }
.course-sources li { margin-block: 9px; }
.course-mobile-nav { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.course-mobile-nav summary { display: flex; justify-content: space-between; padding-block: 18px; list-style: none; font-size: 13px; }
.course-mobile-nav nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; padding-bottom: 15px; }
.course-mobile-nav a { font-size: 13px; min-height: 44px; display: flex; align-items: center; }
.course-edge-nav { position: fixed; left: 0; top: 155px; width: 142px; z-index: 20; padding: 17px 12px; background: var(--paper); border: 1px solid var(--line); border-left: 0; max-height: calc(100vh - 190px); overflow-y: auto; }
.course-edge-nav .eyebrow { font-size: 9px; margin-bottom: 10px; color: var(--muted); }
.course-edge-nav a { display: block; font-size: 11px; padding-block: 9px; color: var(--muted); }
.course-edge-nav a:hover { color: var(--focus); }
.course-edge-nav[hidden] { display: none; }
.course-sticky-bar { position: fixed; inset: auto 0 0; z-index: 25; padding: 16px 0 calc(16px + env(safe-area-inset-bottom,0px)); background: var(--paper); color: var(--ink); border-top: 1px solid var(--line); box-shadow: 0 -5px 22px #0000000a; }
.course-sticky-bar[hidden] { display: none; }
.course-sticky-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.course-sticky-name { font-size: 18px; font-weight: 550; line-height: 1.3; }
.course-sticky-actions { display: flex; align-items: center; gap: 28px; }
.course-sticky-price { line-height: 1.4; font-size: 12px; }
.course-sticky-price > span { display: block; white-space: nowrap; }
.course-sticky-price strong { font-size: 24px; font-weight: 550; letter-spacing: -.025em; }
.course-sticky-price small { display: block; font-size: 11px; color: var(--muted); }
.course-sticky-actions .button { min-width: 108px; min-height: 48px; }
.course-enrol-visible .course-edge-nav { max-height: calc(100vh - 270px - env(safe-area-inset-bottom,0px)); }
html:has(.course-enrol-visible) { scroll-padding-bottom: calc(150px + env(safe-area-inset-bottom,0px)); }
#formats-title:focus-visible { outline: 2px solid var(--focus); outline-offset: 7px; }
@media (max-width:650px) {
  .course-sticky-bar { padding-top: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom,0px)); }
  .course-sticky-inner { flex-direction: column; align-items: stretch; gap: 9px; }
  .course-sticky-name { font-size: 13px; }
  .course-sticky-actions { justify-content: space-between; gap: 12px; }
  .course-sticky-price strong { font-size: 21px; }
  .course-sticky-price small { font-size: 10px; }
  .course-sticky-actions .button { min-width: 82px; padding: 12px 18px; }
}
@media (min-width:1440px) { .course-preview.course-enhanced .course-mobile-nav { display: none; } }
@media (max-width:1439px) { .course-edge-nav { display: none; } }
@media (max-width:1100px) { .course-hero { grid-template-columns: 1.15fr .85fr; gap: 30px; } .course-facts > div { grid-template-columns: 115px 1fr; } .course-split { gap: 30px; } }
@media (max-width:900px) { .course-hero { grid-template-columns: 1fr; padding-bottom: 42px; } .course-hero h1 { max-width: 21ch; font-size: clamp(40px,6vw,56px); } .course-hero-photo { aspect-ratio: 3 / 2; margin-inline: calc(-1 * var(--gutter)); } .course-hero-photo img { object-position: center; } .course-price-options { grid-template-columns: 1fr 1fr; gap: 32px; } .course-price-options article:last-child { grid-column: 1/-1; } .course-price-options article:last-child > p { max-width: 65ch; } .course-context-list article { grid-template-columns: 180px 1fr; gap: 12px 25px; } }
@media (max-width:650px) { .course-breadcrumbs { font-size: 11px; gap: 7px; } .course-hero { padding-top: 20px; } .course-hero h1 { font-size: clamp(37px,10vw,49px); } .course-lead { font-size: 16px; } .course-section { padding-block: 44px; scroll-margin-top: 90px; } .course-section-heading { margin-bottom: 25px; } .course-section h2 { font-size: 32px; } .course-section h3 { font-size: 22px; } .course-facts { grid-template-columns: 1fr; } .course-facts > div { grid-template-columns: 110px 1fr; gap: 15px; } .course-price-options,.course-split,.course-module-list { grid-template-columns: 1fr; gap: 30px; } .course-price-options article:last-child { grid-column: auto; } .course-context-list article { grid-template-columns: 1fr; gap: 16px; } .course-context-list article > a { grid-column: auto; } .course-domain-block { padding: 23px; } .course-domain-block ul { grid-template-columns: 1fr; } .course-example-panels dl > div { grid-template-columns: 1fr; gap: 8px; } .course-labs { grid-template-columns: 1fr; gap: 22px; } .course-labs .button { justify-self: start; } .course-sources h2 { font-size: 28px; } }
@media (prefers-reduced-motion:reduce) { .course-preview *, .course-preview *::before, .course-preview *::after { scroll-behavior: auto !important; transition: none !important; } }
/* Foundation learning aids; purchase styling remains shared across courses. */
.foundation-preview .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.foundation-distinction { margin-top: 38px; }
.foundation-knowledge-checks { display: grid; gap: 22px; }
.foundation-knowledge-checks > article { padding: clamp(20px,3vw,32px); background: var(--example-paper); }
.foundation-knowledge-checks ul { padding-left: 21px; color: var(--muted); line-height: 1.8; }
.foundation-answer { border-top: 1px solid var(--line); margin-top: 22px; }
.foundation-answer summary { display: flex; justify-content: space-between; gap: 12px; padding: 16px 0; list-style: none; color: var(--focus); font-size: 14px; font-weight: 550; cursor: pointer; }
.foundation-answer summary::-webkit-details-marker { display: none; }
.foundation-answer summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.foundation-answer p { margin-bottom: 0; }
.foundation-domains { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.foundation-domains article { border-top: 6px solid var(--blue); padding: 23px; background: var(--panel); min-width: 0; }
.foundation-domains .foundation-domain-share { color: var(--ink); font-size: 38px; line-height: 1.15; font-weight: 550; margin: 0 0 22px; }
.foundation-domain-share span { display: block; font-size: 13px; font-weight: 400; margin-top: 7px; color: var(--muted); }
@media (max-width:650px) { .foundation-domains { grid-template-columns: 1fr; } }