/* The course page, rebuilt 4 Sep 2026.
   Its own file rather than an append to tutor.css, so any of it can be dropped
   in one move. Everything here exists to put the facts that decide a purchase
   in front of a reader early: on a phone the right-hand rail that carries them
   on a desktop is simply gone. */

/* The purchase card sits BESIDE the title from the first pixel and hangs out
   of the bottom of the dark band. That overhang is the device: it says "this
   is the thing you buy" before anybody has scrolled. */
/* The whole page is one grid: the words and the body in the left column, the
   purchase card in the right, starting level with the title and following the
   reader down. It has to be one container because an element can only stick
   inside its own parent, and a hero band is far too short to travel in.

   The dark band is therefore painted BEHIND the top of the grid rather than
   being a box of its own. Its height is set from the real height of the words
   by a few lines of script, with a sane fallback here so it looks right even
   if that never runs. */
.soma-cp{position:relative;isolation:isolate}
/* White text belongs to the words sitting ON the band, not to the page. Set on
   the wrapper it inherited all the way down and turned the body copy white on a
   light ground. */
.soma-cp--art .soma-coursehero__text{color:var(--soma-white)}
.soma-cp--art .soma-coursehero__text a{color:var(--soma-white)}
.soma-cp--art::before,.soma-cp--art::after{content:"";position:absolute;left:0;right:0;top:0;height:var(--soma-heroh,30rem)}
.soma-cp--art::before{z-index:-2;background-image:var(--soma-art);background-size:cover;background-position:center;background-color:var(--soma-primary)}
.soma-cp--art::after{z-index:-1;background:
    linear-gradient(100deg, rgba(8,10,22,.95), rgba(8,10,22,.86) 50%, rgba(8,10,22,.58)),
    linear-gradient(to bottom right, var(--soma-accent, transparent), transparent 72%)}

.soma-cp__grid{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;
  column-gap:clamp(2rem,1.4rem + 2vw,3.5rem);row-gap:0;
  align-items:start;padding:0 var(--soma-gutter);
}
.soma-cp__grid > .soma-coursehero__text{grid-column:1;grid-row:1}
.soma-cp__grid > .soma-buycard{grid-column:2;grid-row:1 / span 2;align-self:start;position:sticky;top:6rem}
.soma-cp__grid > .soma-coursebody{grid-column:1;grid-row:2}

/* --- Spacing -----------------------------------------------------------
   One rhythm for the whole page. Before this the blocks each carried their
   own margins and the page alternated between cramped and adrift. */
.soma-coursehero__text{
  padding:clamp(2rem,1.4rem + 1.8vw,3.25rem) 0 clamp(2.25rem,1.6rem + 2vw,3.5rem);
  display:flex;flex-direction:column;gap:0;
}
.soma-coursehero__crumb{margin:0}
.soma-coursehero__text h1{margin:.75rem 0 0;color:var(--soma-white);
  font-size:clamp(1.9rem,1.3rem + 2.2vw,3rem);line-height:1.07;text-wrap:balance}
.soma-coursehero__sub{margin:1rem 0 0;font-size:var(--soma-t-lead);line-height:1.6;
  color:rgba(255,255,255,.85);max-width:48ch;font-weight:300}
.soma-chero__proof{margin-top:1.15rem}
.soma-coursehero__by{margin:1rem 0 0;font-size:var(--soma-t-small);line-height:1.7;color:rgba(255,255,255,.7)}

.soma-coursebody{padding:clamp(2.25rem,1.6rem + 2vw,3.25rem) 0 1rem;max-width:none}
.soma-cs{margin:0 0 clamp(2rem,1.5rem + 1.6vw,3rem)}
.soma-cs:last-child{margin-bottom:0}
.soma-cs__h{margin:0 0 1.15rem;font-size:var(--soma-t-h3);line-height:1.15}
.soma-cs__prose > * + *{margin-top:1rem}
.soma-learn{padding:clamp(1.15rem,1rem + .6vw,1.5rem)}
.soma-learn ul{gap:.9rem 1.75rem}
.soma-two{gap:clamp(1.5rem,1rem + 2vw,2.75rem)}
.soma-plain{margin:0;padding-left:1.15rem}
.soma-plain li + li{margin-top:.6rem}
.soma-by{gap:.9rem;align-items:center}

/* --- The purchase card, one surface -------------------------------------
   Tutor's entry box arrives wearing its own card: 1px border, 24px radius,
   32px of body padding. Nested inside ours it drew a second box with a gap
   all round it, so the card read as a border inside a border with the
   thumbnail floating loose above it. The surface is ours; Tutor's is
   flattened into it and the padding is set once, here. */
.soma-buycard{
  background:var(--soma-white);color:var(--soma-primary);
  border-radius:var(--soma-r-lg,14px);overflow:hidden;
  position:relative;z-index:2;
  box-shadow:0 2px 6px rgba(19,21,39,.07), 0 28px 56px -30px rgba(19,21,39,.5);
}
.soma-buycard .tutor-card,
.soma-buycard .tutor-sidebar-card{border:0;border-radius:0;background:transparent;box-shadow:none}
.soma-buycard .tutor-card-body{padding:0}
/* The last survivor of "this Deep Dive includes": one row repeating the tier
   name the breadcrumb above already says. */
.soma-buycard .tutor-card-footer{display:none}
/* The play overlay is positioned against the picture, not the card. Without
   this it took its offsets from .soma-buycard and laid its dark wash over the
   price and the buttons as well. */
.soma-buycard__media{position:relative;line-height:0}

/* Save and share at the foot of the card, where Udemy puts its gift and share
   icons. They were in the hero before and disappeared among the words. The
   rule above them is gone: it was one more line in a card that had too many. */
.soma-buycard__actions{margin-top:1.1rem;padding-top:0;border-top:0}
.soma-buycard__actions > *{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;margin:0}

/* The sample control sits in the middle of the picture, the way a play button
   does on a video thumbnail. The whole image is the link; the disc is what
   makes it read as pressable, and a soft wash behind it keeps the label legible
   whatever the photograph is doing underneath. */
.soma-buycard__preview{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  color:var(--soma-white);text-decoration:none;
  background:radial-gradient(60% 60% at 50% 50%, rgba(10,11,24,.55), rgba(10,11,24,.12));
  transition:background var(--soma-dur-btn,.18s) ease;
}
.soma-buycard__disc{
  width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.94);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.6);
  transition:transform var(--soma-dur-btn,.18s) ease;
}
/* The triangle is drawn from borders rather than set as a glyph: a text arrow
   sits on the baseline and looks off-centre inside a circle. */
.soma-buycard__disc::after{
  content:"";width:0;height:0;margin-left:4px;
  border-left:13px solid var(--soma-primary);
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
}
/* The pill behind the word is gone; the radial wash on the picture carries the
   disappeared. It gets its own dark pill so it is legible whatever is behind
   the photograph. */
/* The colour has to be claimed with two classes. The theme colours every link
   inside a page sage, at a higher specificity than a single class, so the label
   was rendering dark green on a near-black pill and reading as nothing at all. */
.soma-buycard a.soma-buycard__preview,
.soma-buycard .soma-buycard__previewlabel{color:var(--soma-white)}
.soma-buycard .soma-buycard__previewlabel{
  font-size:var(--soma-t-small);font-weight:600;letter-spacing:.01em;
  text-shadow:0 1px 12px rgba(8,10,22,.9), 0 1px 3px rgba(8,10,22,.75);
}
.soma-buycard__preview:hover{background:radial-gradient(70% 70% at 50% 50%, rgba(10,11,24,.62), rgba(10,11,24,.2));color:var(--soma-white)}
.soma-buycard__preview:hover .soma-buycard__disc{transform:scale(1.06)}
.soma-buycard__in{padding:18px 19px 20px}
/* Layout for the body now comes from the grid above; this block only sets the
   things the grid does not. */
.soma-learn{border:1px solid var(--soma-line);border-radius:var(--soma-r-md,10px);padding:20px 21px}
.soma-learn ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.soma-learn li{display:flex;gap:11px;align-items:flex-start;font-size:var(--soma-t-small);line-height:1.55}
.soma-learn i{color:var(--soma-secondary);font-style:normal;font-weight:700;flex:none}
.soma-two{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.soma-plain{margin:0;padding-left:18px}
.soma-plain li{font-size:var(--soma-t-small);line-height:1.6;color:var(--soma-text);margin-bottom:6px}
.soma-by{display:flex;gap:14px;align-items:flex-start}

/* --- The facts strip ---------------------------------------------------
   The row of tags this replaces said the same things in a form you had to read
   left to right. Cells you take in at a glance are what somebody scanning a
   phone actually uses. */
.soma-facts {
  display: flex; flex-wrap: wrap;
  border: 1px solid rgba(255,255,255,.001);
  border-radius: var(--soma-r-md, 10px);
  overflow: hidden; margin: 4px 0 0;
  background: rgba(19,21,39,.06);
}
.soma-course-band--art .soma-facts { background: rgba(255,255,255,.1); }
.soma-facts__cell {
  flex: 1 1 88px; padding: 11px 14px; text-align: center;
  border-right: 1px solid rgba(19,21,39,.1);
}
.soma-course-band--art .soma-facts__cell { border-right-color: rgba(255,255,255,.18); }
.soma-facts__cell:last-child { border-right: 0; }
.soma-facts__n {
  display: block; font-family: var(--soma-font-display);
  font-size: 1.45rem; font-weight: 500; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.soma-facts__l {
  display: block; margin-top: 4px;
  font-size: .66rem; letter-spacing: .13em; text-transform: uppercase;
  opacity: .66;
}

/* --- The parts ---------------------------------------------------------
   An open numbered list for somebody who has not bought. Tutor's accordion is
   navigation, which is right for a person who owns the course and wrong for a
   person deciding whether to: it answers "what is in this?" by hiding it.
   Hairlines rather than cards, because the shelf and the journal rows are
   hairlines and this is the same kind of object seen closer up. */
.soma-parts { list-style: none; margin: 0; padding: 0; }
.soma-parts__item {
  display: grid; grid-template-columns: 34px 1fr; gap: 4px 14px;
  padding: 15px 0; border-bottom: 1px solid var(--soma-line);
  align-items: start;
}
.soma-parts__item:first-child { border-top: 1px solid var(--soma-line); }
.soma-parts__n {
  font-family: var(--soma-font-display); font-size: 1.4rem; font-weight: 500;
  line-height: 1.05; color: var(--soma-accent, var(--soma-secondary));
  font-variant-numeric: tabular-nums;
}
.soma-parts__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.soma-parts__kind {
  font-size: .66rem; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 600; color: var(--soma-secondary);
}
.soma-parts__title {
  font-family: var(--soma-font-display); font-size: 1.2rem; font-weight: 500;
  line-height: 1.25;
}
.soma-parts__line {
  font-size: var(--soma-t-small); line-height: 1.6; color: var(--soma-text);
  max-width: 62ch;
}
/* At programme scale the list shows modules instead of every part, and states
   the real total underneath so the size stays honest. */
.soma-parts__total {
  margin: 14px 0 0; font-size: var(--soma-t-small); color: var(--soma-text);
}

/* --- The one ending ----------------------------------------------------
   Three real destinations chosen for this page. The page used to finish on
   four bands in a row, which is the same as none: a reader scrolling past all
   of them learns only that the page is over, and that is exactly when somebody
   gives up and reaches for the search box. */
.soma-next__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
}
.soma-next__h { margin: 0; font-family: var(--soma-font-display); font-weight: 500; }
.soma-next__sub { font-size: var(--soma-t-small); color: var(--soma-text); }
.soma-next__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.soma-next__card {
  display: flex; flex-direction: column; gap: 7px;
  background: var(--soma-white); border: 1px solid var(--soma-line);
  border-radius: var(--soma-r-md, 10px); padding: 18px 19px;
  text-decoration: none;
  transition: transform var(--soma-dur-btn, .18s) ease, box-shadow var(--soma-dur-btn, .18s) ease;
}
.soma-next__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(19,21,39,.05), 0 18px 34px -22px rgba(19,21,39,.4);
}
.soma-next__label {
  font-size: .66rem; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 600; color: var(--soma-secondary);
}
.soma-next__title {
  font-family: var(--soma-font-display); font-size: 1.28rem; font-weight: 500;
  line-height: 1.24;
}
.soma-next__note { font-size: var(--soma-t-small); line-height: 1.55; color: var(--soma-text); }

/* --- The bar that follows you down -------------------------------------
   Phones only, and only for somebody who has not bought. Three rules keep it
   from being a nag: it appears after the real button has left the screen, it
   always states the price, and it never renders for a learner who is enrolled.
   The button is a link to this page's own enrolment box, not a second
   checkout. */
.soma-buybar { display: none; }
@media (max-width: 900px) {
  .soma-buybar {
    display: flex; align-items: center; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
    background: var(--soma-white);
    border-top: 1px solid var(--soma-line);
    box-shadow: 0 -10px 26px -16px rgba(19,21,39,.4);
  }
  .soma-buybar[hidden] { display: none; }
  .soma-buybar__price {
    font-family: var(--soma-font-display); font-size: 1.35rem; font-weight: 500;
    flex: none; font-variant-numeric: tabular-nums;
  }
  .soma-buybar__note {
    flex: 1; min-width: 0; font-size: .72rem; line-height: 1.3;
    color: var(--soma-text);
  }
  .soma-buybar__btn {
    flex: none; background: var(--soma-secondary); color: var(--soma-white);
    border-radius: var(--soma-r-sm, 8px); padding: 10px 20px;
    font-size: .88rem; font-weight: 600; text-decoration: none;
  }
  /* The page must not end underneath the bar. */
  body.tutor-course-details-page, .soma-course .soma-page { padding-bottom: 64px; }
}

/* Below the two-column point the card stops hanging and simply follows the
   title, which is the right order on a phone: what it is, then what it costs. */
@media (max-width: 1000px){
  /* One column, in the order a phone should read them: what it is, what it
     costs, then the detail. The card stops sticking - there is nothing for it
     to travel alongside. */
  .soma-cp__grid{grid-template-columns:1fr;row-gap:1.5rem}
  .soma-cp__grid > .soma-coursehero__text{grid-column:1;grid-row:auto;padding-bottom:1.75rem}
  .soma-cp__grid > .soma-buycard{grid-column:1;grid-row:auto;position:static;width:100%}
  .soma-cp__grid > .soma-coursebody{grid-column:1;grid-row:auto;padding-top:.5rem}
  .soma-cp--art::before,.soma-cp--art::after{height:var(--soma-heroh,22rem)}
}
@media (max-width: 700px){
  .soma-learn ul{grid-template-columns:1fr}
  .soma-two{grid-template-columns:1fr;gap:20px}
}
@media (max-width: 600px){
  .soma-coursehero__text h1{font-size:clamp(1.55rem,1.2rem + 2.6vw,2rem);line-height:1.14}
  .soma-learn{padding:16px 16px}
}

/* --- Tablet ------------------------------------------------------------
   The hero held two columns down to 1000px and both were too narrow between
   there and 900: prose wrapping every six words beside a squeezed buy card. A
   tablet held upright should get the phone layout at a comfortable size, not a
   cramped desktop. */
@media (max-width: 1000px) {
  .soma-course-hero { flex-direction: column; }
  .soma-course-hero__aside { width: 100%; }
}
@media (max-width: 900px) {
  .soma-facts__cell { flex-basis: 76px; padding: 10px 8px; }
  .soma-facts__n { font-size: 1.25rem; }
}

/* --- Phones ------------------------------------------------------------
   The title is a full sentence by design, which is a strength on a desktop and
   four or five lines on a 390px screen. Stepped down so the title, the promise,
   the facts and the button share the first view instead of the title taking all
   of it. Same face, smaller: the drama belongs where there is room for it. */
@media (max-width: 600px) {
  .soma-course-band .soma-course-hero__text h1 {
    font-size: clamp(1.55rem, 1.2rem + 2.6vw, 2rem);
    line-height: 1.14;
  }
  .soma-parts__item { grid-template-columns: 26px 1fr; gap: 3px 11px; }
  .soma-parts__title { font-size: 1.08rem; }
  .soma-next__card { padding: 15px 16px; }
}


/* === Section rhythm =====================================================
   Seven sections in one visual language read as one long section: the page
   scrolled and nothing told the reader that anything had ended. Each section
   now sits on its own kind of ground - raised panel, tinted panel, open page,
   quiet footnote - so the change of surface does the work a heading alone
   could not. The order alternates on purpose: raised, open, tinted, open,
   raised, quiet. */
.soma-cs{margin:0 0 clamp(2.5rem,1.8rem + 2.4vw,4rem)}
.soma-cs:last-child{margin-bottom:0}

/* --- Raised panel: what you will be able to do ------------------------- */
.soma-cs--panel .soma-learn{
  background:var(--soma-white);border:0;
  border-radius:var(--soma-r-lg,14px);
  padding:clamp(1.75rem,1.3rem + 1.6vw,2.5rem);
  box-shadow:0 1px 2px rgba(19,21,39,.05), 0 18px 40px -32px rgba(19,21,39,.45);
}
.soma-cs--panel .soma-cs__h{margin:0 0 1.15rem;font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}
.soma-cs--panel ul{gap:1.15rem 2.5rem}
.soma-cs--panel li{align-items:flex-start;gap:.85rem;font-size:var(--soma-t-body);line-height:1.6}
/* A tick in a soft disc rather than a bare glyph: at body size the character
   sat on the baseline and read as part of the sentence. */
.soma-cs--panel i{
  flex:none;width:22px;height:22px;margin-top:.15rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;line-height:1;font-weight:700;
  background:color-mix(in srgb, var(--soma-accent,#0D7C68) 18%, transparent);
  color:var(--soma-accent,#0D7C68);
}
/* --- Tinted panel: who it is for / what you need ----------------------- */
.soma-fit__box{
  background:color-mix(in srgb, var(--soma-accent,#0D7C68) 11%, transparent);
  border:1px solid color-mix(in srgb, var(--soma-accent,#0D7C68) 20%, transparent);
  border-radius:var(--soma-r-lg,14px);
  padding:clamp(1.75rem,1.3rem + 1.6vw,2.5rem);
}
.soma-cs--fit .soma-cs__h{margin:0 0 1.15rem;font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}
/* Two classes, because the theme sizes every h3 inside a page at a higher
   specificity than one class and the labels came out at heading scale. */
.soma-cs--fit .soma-fit__h{margin:0 0 1rem;font-family:var(--soma-font-body,inherit);
  font-size:.74rem;font-weight:700;line-height:1.3;
  letter-spacing:.11em;text-transform:uppercase;color:var(--soma-muted,#6b6f7d)}
.soma-cs--fit .soma-plain{list-style:none;padding:0}
.soma-cs--fit .soma-plain li{position:relative;padding-left:1.15rem;margin-bottom:.7rem}
.soma-cs--fit .soma-plain li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--soma-accent,#0D7C68);opacity:.6}

/* --- Open page: what is inside, and about this tier --------------------- */
.soma-cs--parts .soma-cs__h,
.soma-cs--prose .soma-cs__h{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);margin-bottom:1.15rem}
/* The measure belongs on the paragraphs, not on the block: capped at the
   block it also squeezed the two-column list and cut the label rules off
   halfway across a column that had room for them. */
.soma-cs--prose .soma-cs__prose{font-size:var(--soma-t-body);line-height:1.7;max-width:none}

/* --- Author strip ------------------------------------------------------- */
.soma-cs--author{
  background:var(--soma-white);border-radius:var(--soma-r-lg,14px);
  padding:1.15rem 1.5rem;
  display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;
  box-shadow:0 1px 2px rgba(19,21,39,.05);
}
.soma-cs--author .soma-cs__h{
  margin:0;flex:none;font-family:inherit;
  font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--soma-muted,#6b6f7d);
}
.soma-cs--author .soma-by{margin:0}

/* --- Quiet footnote: materials, tags, ratings ---------------------------- */
.soma-cs--quiet{border-top:1px solid var(--soma-line);padding-top:clamp(1.5rem,1.2rem + 1vw,2.25rem)}
.soma-cs--quiet h2,.soma-cs--quiet h3,.soma-cs--quiet .soma-cs__h{font-size:clamp(1.05rem,.95rem + .35vw,1.25rem)}

/* The path strip is a band, not a section: one row of four cards under a
   label. The shared section padding gave it 120px of empty white underneath
   and made the page look like it had stopped. */
.soma-section--path{padding-top:clamp(2.5rem,2rem + 1.6vw,3.5rem);padding-bottom:clamp(2.5rem,2rem + 1.6vw,3.5rem)}

/* --- Inside "About this <tier>" -----------------------------------------
   The description is three blocks - a statement, a list of what is covered,
   and a note on how it is built - and they arrived as one undifferentiated
   run of text. Three textures now: a standfirst, a ruled label over a
   two-column list, and a ruled aside. All of it keyed off the shape of the
   description itself, so a course the scheduler publishes in the same shape
   gets the same treatment with nothing to edit. */
.soma-cs--prose .tutor-course-details-content p:first-of-type{
  font-size:clamp(1.05rem,1rem + .4vw,1.3rem);line-height:1.6;font-weight:300;
  color:var(--soma-primary);max-width:58ch;margin:0;
}
/* A label, not a heading: it sits a level under the serif h2 above it, and the
   rule running off to the right is what actually separates the blocks. */
.soma-cs--prose .tutor-course-details-content h3{
  margin:2.5rem 0 1.15rem;
  font-family:var(--soma-font-body,inherit);
  font-size:.74rem;font-weight:700;line-height:1.3;
  letter-spacing:.11em;text-transform:uppercase;
  color:var(--soma-accent,#0D7C68);
  display:flex;align-items:center;gap:.9rem;
}
.soma-cs--prose .tutor-course-details-content h3::after{
  content:"";flex:1 1 auto;height:1px;
  background:color-mix(in srgb, var(--soma-accent,#0D7C68) 30%, transparent);
}
/* What this covers: hairline dashes on the open page, two columns. Distinct
   from the tick list higher up, which is a white panel with filled discs. */
.soma-cs--prose .tutor-course-details-content ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(26rem,100%),1fr));
  gap:1rem 3rem;
}
.soma-cs--prose .tutor-course-details-content ul > li{
  position:relative;padding-left:1.4rem;margin:0;
  font-size:var(--soma-t-body);line-height:1.6;
}
.soma-cs--prose .tutor-course-details-content ul > li::before{
  content:"";position:absolute;left:0;top:.72em;width:10px;height:1px;
  background:var(--soma-accent,#0D7C68);opacity:.75;
}
/* How it is built: an aside about method rather than about the subject, so it
   is set against a rule instead of running on as more body copy. */
.soma-cs--prose .tutor-course-details-content ul ~ p{
  margin:0;padding:.15rem 0 .15rem 1.35rem;
  border-left:2px solid color-mix(in srgb, var(--soma-accent,#0D7C68) 45%, transparent);
  font-size:var(--soma-t-body);line-height:1.7;max-width:62ch;
}
.soma-cs--prose .tutor-course-details-content ul ~ p + p{margin-top:.9rem}
/* Foundations descriptions are three plain paragraphs with no headings at all.
   The standfirst rule zeroes its own margin, which left the second paragraph
   running straight into it at full page width. Paragraphs keep a measure and a
   gap whatever shape the description arrives in. */
.soma-cs--prose .tutor-course-details-content p{max-width:62ch}
.soma-cs--prose .tutor-course-details-content p + p{margin-top:1.15rem}

/* Reading copy is set at the body size everywhere, whatever surface it sits on.
   Differentiating the sections by shrinking two of them cost about 7% of the
   type on a page whose whole argument is that it takes reading seriously; the
   surfaces, rules and columns already do that work. Only labels stay small. */
.soma-cs--fit .soma-plain li{font-size:var(--soma-t-body);line-height:1.6}
.soma-cs--panel li{font-size:var(--soma-t-body)}

/* The proof line. Its three parts are concatenated with no whitespace between
   them, so they printed as one run: stars, score and count ran together as
   "4.9321 ratings". Flex with a gap spaces them without touching the markup,
   and a dot separates the score from the count so the two numbers cannot be
   misread as one. */
.soma-chero__proof{display:flex;align-items:baseline;flex-wrap:wrap;gap:.1rem .6rem}
.soma-chero__stars{letter-spacing:.12em;color:#E0A33C;font-size:1.05em}
.soma-chero__proof b{font-weight:700}
.soma-chero__proof b + span::before{content:"\00B7";margin-right:.6rem;opacity:.6}

/* === The course bar =====================================================
   Replaces the site header rather than stacking under it: positioned and
   sized from the header at runtime, painted on the same ground, one z-index
   above. Desktop only - below 1000px the bar that matters is the enrolment
   bar at the foot of the screen. */
.soma-coursebar{display:none}
@media (min-width:1001px){
  .soma-coursebar:not([hidden]){
    display:flex;align-items:center;gap:clamp(1rem,.6rem + 1vw,2rem);
    position:fixed;left:0;right:0;z-index:100;
    padding:0 var(--soma-gutter);
    background:var(--soma-white);
    border-bottom:1px solid var(--soma-line);
    box-shadow:0 1px 12px -6px rgba(19,21,39,.35);
    /* No fade. The bar sits exactly on top of the header, so any transparency
       during a fade shows the nav underneath and the two read as one garbled
       row for the length of the animation. It swaps. */
  }
}
/* Two classes on the links: the theme colours every anchor inside a page at a
   higher specificity than one class would beat. */
.soma-coursebar a.soma-coursebar__home{
  flex:none;white-space:nowrap;text-decoration:none;
  font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--soma-primary);
}
.soma-coursebar a.soma-coursebar__home span{opacity:.5;font-weight:500}
.soma-coursebar__title{
  flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.95rem;font-weight:600;color:var(--soma-primary);
}
.soma-coursebar__price{flex:none;white-space:nowrap;font-weight:700;color:var(--soma-primary)}
.soma-coursebar .soma-btn{flex:none}

/* === Hero colour, with and without artwork ==============================
   The hero title, standfirst and byline were set white unconditionally, on
   the assumption that the dark art band is always behind them. A course with
   no field artwork - The Five Ideas is the whole-Academy Foundations course,
   so it belongs to no single field and has no image - drew white type on the
   pale page ground and the title simply vanished. Dark is now the default and
   white is what the artwork buys. */
.soma-coursehero__text h1{color:var(--soma-primary)}
.soma-coursehero__sub{color:var(--soma-text)}
.soma-coursehero__by{color:var(--soma-muted,#6b6f7d)}
.soma-cp--art .soma-coursehero__text h1{color:var(--soma-white)}
.soma-cp--art .soma-coursehero__sub{color:rgba(255,255,255,.85)}
.soma-cp--art .soma-coursehero__by{color:rgba(255,255,255,.7)}