/*
 * SOMA Academy — dynamic template styles.
 *
 * Everything the child-theme templates and the site plugin's shortcodes draw.
 * Values come from tokens.css; nothing here invents a colour, a font or a
 * radius of its own.
 */

/* --- Astra reset for the template pages ------------------------------- */
.soma-tpl #content .ast-container { max-width: 100%; padding: 0; margin: 0; display: block; }
.soma-tpl #content { background: var(--soma-base); }
.soma-tpl .ast-container > .site-main,
.soma-tpl .entry-content { margin: 0; padding: 0; }

.soma-page { --soma-read: 640px; --soma-wide: 960px; }
.soma-page a { color: var(--soma-secondary); text-decoration: none; }
.soma-page a:hover { color: var(--soma-secondary-deep); }
/* A button is a button before it is a link. The rule above is a class plus an
   element, so it outranks the `.soma-btn` colour in tokens.css and was painting
   the label of every <a class="soma-btn"> teal on a teal pill: invisible. Only
   anchors were affected, which is why the same button drawn as a span or a
   button element always looked right. */
.soma-page a.soma-btn,
.soma-page a.soma-btn:hover,
.soma-page a.soma-btn:focus-visible { color: var(--soma-white); }
.soma-page a.soma-btn--outline,
.soma-page a.soma-btn--outline:hover,
.soma-page a.soma-btn--outline:focus-visible { color: var(--soma-primary); }
.soma-page a.soma-btn--light,
.soma-page a.soma-btn--light:hover,
.soma-page a.soma-btn--light:focus-visible { color: var(--soma-primary); }
.soma-page img { max-width: 100%; }
.soma-i { flex-shrink: 0; }

/* --- Sections --------------------------------------------------------- */
/* Sections stack their own children with a gap. Without it a bare <h2> sat
   flush against the block beneath it, which is what put the topic hub heading
   on top of the programme cover and the course page's headings on their lists.
   Children that lay out their own contents are unaffected: the gap applies
   only between a section's direct children. */
.soma-section {
  display: flex; flex-direction: column; gap: var(--soma-gap);
  padding: var(--soma-section) var(--soma-gutter);
}
.soma-section--white  { background: var(--soma-white); }
.soma-section--base   { background: var(--soma-base); }
.soma-section--beige  { background: var(--soma-beige); }
.soma-section--dark   { background: var(--soma-primary); color: var(--soma-white); }
.soma-section--dark h1, .soma-section--dark h2, .soma-section--dark h3, .soma-section--dark h4 { color: var(--soma-white); }

/* The band at the top of a page: shorter than a full section. */
.soma-band {
  display: flex; flex-direction: column; gap: 20px;
  padding: clamp(2.5rem, 1.6rem + 2.4vw, 4rem) var(--soma-gutter) clamp(2.5rem, 1.6rem + 2.4vw, 3.5rem);
  background: var(--soma-white);
}
.soma-band--dark  { background: var(--soma-primary); color: var(--soma-white); }
.soma-band--beige { background: var(--soma-beige); }
.soma-band--dark h1 { color: var(--soma-white); }
.soma-band__lead { margin: 0; font-size: var(--soma-t-lead); line-height: var(--soma-lh-lead); max-width: 680px; }
.soma-band--dark .soma-band__lead { color: var(--soma-white-70); }
.soma-band h1 { max-width: 1000px; text-wrap: balance; }

/* Section heading block, with an optional link on the right. */
.soma-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; }
.soma-head__text { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }

/* --- Pills, chips, tags ----------------------------------------------- */
.soma-pill {
  display: inline-flex; align-items: center; gap: 10px; width: fit-content;
  padding: 8px 16px; border-radius: var(--soma-r-pill);
  background: var(--soma-base); color: var(--soma-secondary);
  font-size: var(--soma-t-label); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
}
.soma-pill--dark { background: var(--soma-white-12); color: var(--soma-periwinkle); }

.soma-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.soma-chip {
  padding: 9px 15px; border-radius: var(--soma-r-pill);
  background: var(--soma-base); color: var(--soma-primary);
  font-size: var(--soma-t-label); font-weight: 600;
  transition: background var(--soma-dur-btn) ease;
}
.soma-chip:hover { background: var(--soma-periwinkle); color: var(--soma-primary); }
.soma-chip--on { background: var(--soma-primary); color: var(--soma-white); }
.soma-chip--on:hover { background: var(--soma-primary); color: var(--soma-white); }

.soma-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--soma-r-pill);
  background: var(--soma-base); color: var(--soma-primary);
  font-size: var(--soma-t-label); font-weight: 600; white-space: nowrap;
}
.soma-tag--accent { background: var(--soma-periwinkle); }
.soma-tag--dark { background: var(--soma-white-12); color: var(--soma-white); }

/* --- Breadcrumbs ------------------------------------------------------ */
.soma-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--soma-t-label); font-weight: 500; }
.soma-crumb { padding: 7px 12px; border-radius: var(--soma-r-pill); background: var(--soma-base); color: var(--soma-text); }
.soma-crumb:hover { background: var(--soma-periwinkle); color: var(--soma-primary); }
.soma-crumb--here { background: var(--soma-periwinkle); color: var(--soma-primary); }
.soma-crumbs--dark .soma-crumb { background: var(--soma-white-12); color: var(--soma-white-70); }
.soma-crumbs--dark .soma-crumb:hover { background: var(--soma-line-inverse); color: var(--soma-white); }
.soma-crumbs--dark .soma-crumb--here { background: var(--soma-periwinkle); color: var(--soma-primary); }
.soma-crumbs--beige .soma-crumb { background: var(--soma-white); color: var(--soma-text); }
.soma-crumbs--beige .soma-crumb--here { background: var(--soma-periwinkle); color: var(--soma-primary); }

/* --- Row card --------------------------------------------------------- */
.soma-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 20px; padding: 20px 24px;
  border-radius: var(--soma-r-lg); background: var(--soma-white); color: var(--soma-primary);
}
.soma-row--base { background: var(--soma-base); }
.soma-row:hover { color: var(--soma-primary); }
.soma-row__main { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 220px; }
.soma-row__icon {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: var(--soma-r-md); background: var(--soma-base); color: var(--soma-secondary);
}
.soma-row--base .soma-row__icon { background: var(--soma-white); }
.soma-row__text { display: flex; flex-direction: column; gap: 3px; }
.soma-row__kicker {
  font-size: var(--soma-t-label); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--soma-secondary);
}
.soma-row__title {
  font-family: var(--soma-font-display); font-size: var(--soma-t-h4);
  font-weight: 600; line-height: 1.2; color: var(--soma-primary);
}
.soma-row__meta { font-size: var(--soma-t-small); color: var(--soma-text); }
.soma-row__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.soma-row--base .soma-tag { background: var(--soma-white); }

.soma-rows { display: flex; flex-direction: column; gap: 12px; }

/* --- Reading-material callouts ----------------------------------------- */
/* The article pipeline emits <div class="soma-callout soma-callout--x"> with a
   <strong> label line and then content. Quiet boxes on the base ground with a
   hairline and a teal spine, so they read as an aside inside the prose rather
   than as a banner. They appear in journal articles and, unchanged, inside a
   referenced lesson, which renders the same article body. */
.soma-callout {
  margin: 28px 0; padding: 20px 24px;
  background: var(--soma-base); border: 1px solid var(--soma-line);
  border-left: 3px solid var(--soma-secondary);
  border-radius: var(--soma-r-sm);
  font-size: var(--soma-t-small); line-height: 1.7; color: var(--soma-text);
}
.soma-callout > strong:first-child {
  display: block; margin-bottom: 8px;
  font-family: var(--soma-font-body); font-size: var(--soma-t-label); font-weight: 600;
  letter-spacing: var(--soma-ls-tight); text-transform: uppercase; color: var(--soma-secondary);
}
.soma-callout > *:last-child { margin-bottom: 0; }
.soma-callout p { margin: 0 0 10px; font-size: inherit; line-height: inherit; color: inherit; }
.soma-callout ul, .soma-callout ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.soma-callout li { font-size: inherit; line-height: 1.6; color: inherit; }
.soma-callout a { color: var(--soma-secondary); }
/* The variants differ by label, not by loudness. --inline sits tightest to the
   prose; --trap is the one that warns, so it takes the deeper spine. */
.soma-callout--inline { margin: 20px 0; padding: 16px 20px; }
.soma-callout--trap { border-left-color: var(--soma-primary); }
.soma-callout--trap > strong:first-child { color: var(--soma-primary); }
.soma-callout--takeaways { background: var(--soma-white); }
/* --pearl and --evidence are the quietest pair in the family: both keep the
   hairline, the teal spine and the teal label, and differ only in the
   temperature of the ground. --pearl warms it, --evidence cools it toward the
   periwinkle. Neither may go darker than the base ground: the teal label sits
   at 4.51:1 there, which is already the AA floor for 12px, so a heavier tint
   takes it under. These two measure 4.54:1 and 4.55:1.

   The periwinkle is the ground rather than the spine because it cannot be one:
   #CCD5FF reads 1.27:1 against the base ground and 1.45:1 against white, so a
   3px periwinkle spine looks like a rendering fault. Compare --case, which is
   on the beige at 4.04:1 and had to move its label to the ink for the same
   reason. */
.soma-callout--pearl { background: #F5F1E8; }
.soma-callout--evidence { background: #EFF1FB; }
/* --case is a worked example, so it sits on the beige the design already uses
   for reading ground, with the ink spine to separate it from the teal family.
   --practice is the do-this-tomorrow box: teal, but outlined rather than
   filled, so it reads as an instruction and not as another aside. */
.soma-callout--case {
  background: #EAE4D4; border-color: rgba(19, 21, 39, .14);
  border-left-color: var(--soma-primary);
}
.soma-callout--case > strong:first-child { color: var(--soma-primary); }
.soma-callout--practice {
  background: var(--soma-white);
  border: 1px solid var(--soma-secondary);
  border-left-width: 3px;
}
@media (max-width: 767px) {
  .soma-callout { margin: 22px 0; padding: 16px 18px; }
  .soma-callout--inline { padding: 14px 16px; }
}

/* --- A referenced reading ----------------------------------------------- */
/* A lesson that draws a journal article. The body is the article's own markup,
   so it inherits the prose rules; only the link back needs anything. */
.soma-reading__source { margin: 28px 0 0; font-size: var(--soma-t-small); }
.soma-reading__source a { display: inline-flex; align-items: center; gap: 6px; color: var(--soma-secondary); font-weight: 600; }

/* --- This quiz draws on -------------------------------------------------- */
.soma-quiz-sources { margin: 0 0 20px; font-size: var(--soma-t-small); color: var(--soma-text); }
.soma-quiz-sources__label {
  font-size: var(--soma-t-label); font-weight: 600; letter-spacing: var(--soma-ls-tight);
  text-transform: uppercase; color: var(--soma-secondary); margin-right: 8px;
}
.soma-quiz-sources a { color: var(--soma-secondary); font-weight: 600; }

/* --- The closing knowledge-check card on an article --------------------- */
/* The teal treatment Start Here uses for the same invitation. */
.soma-check-cta {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  margin-top: var(--soma-gap-lg); padding: clamp(1.75rem, 1rem + 2.4vw, 2.75rem);
  border-radius: var(--soma-r-lg); background: var(--soma-secondary); color: var(--soma-white);
}
.soma-check-cta__eyebrow {
  font-size: var(--soma-t-label); font-weight: 600; letter-spacing: var(--soma-ls-label);
  text-transform: uppercase; color: var(--soma-white-70);
}
.soma-check-cta__title { font-family: var(--soma-font-display); font-size: var(--soma-t-h3); font-weight: 600; line-height: 1.15; color: var(--soma-white); margin: 0; }
.soma-check-cta__text { margin: 0; font-size: var(--soma-t-small); line-height: 1.65; color: var(--soma-white-70); max-width: 52ch; }
.soma-page .soma-check-cta a.soma-btn--light,
.soma-page .soma-check-cta a.soma-btn--light:hover { color: var(--soma-primary); }

/* --- The field exam's score report -------------------------------------- */
/* Appended to Tutor's own attempt details, on that course's exam only. It is a
   report, not a credential: the last line says where a certificate comes from
   rather than implying this is one. */
.soma-exam-report {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: var(--soma-gap); padding: 26px 28px;
  border-radius: var(--soma-r-lg); background: var(--soma-base);
  border-left: 3px solid var(--soma-secondary);
}
.soma-exam-report__eyebrow {
  font-size: var(--soma-t-label); font-weight: 600; letter-spacing: var(--soma-ls-tight);
  text-transform: uppercase; color: var(--soma-secondary);
}
.soma-exam-report__score { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.soma-exam-report__score strong { font-family: var(--soma-font-display); font-size: var(--soma-t-h2); font-weight: 600; line-height: 1; color: var(--soma-primary); }
.soma-exam-report__verdict {
  font-size: var(--soma-t-label); font-weight: 600; letter-spacing: var(--soma-ls-tight);
  text-transform: uppercase; padding: 5px 12px; border-radius: var(--soma-r-pill);
  background: var(--soma-white); color: var(--soma-text);
}
.soma-exam-report__verdict--pass { color: var(--soma-secondary); }
.soma-exam-report__verdict--distinction { background: var(--soma-secondary); color: var(--soma-white); }
.soma-exam-report__line { margin: 0; font-size: var(--soma-t-body); color: var(--soma-primary); }
.soma-exam-report__marks { margin: 0; font-size: var(--soma-t-small); color: var(--soma-text); }
.soma-exam-report__sections { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.soma-exam-report__sections li { display: flex; justify-content: space-between; gap: 16px; font-size: var(--soma-t-small); color: var(--soma-text); }
.soma-exam-report__section-name { color: var(--soma-primary); }
.soma-exam-report__section-score { font-weight: 600; }
.soma-exam-report__credential { margin: 6px 0 0; font-size: var(--soma-t-small); color: var(--soma-text); }
.soma-exam-report__credential a { color: var(--soma-secondary); font-weight: 600; }

/* --- Foundations: the path view ----------------------------------------- */
.soma-path__lead { margin: 0; font-size: var(--soma-t-small); color: var(--soma-text); }
.soma-path__counts { font-size: var(--soma-t-small); color: var(--soma-text); }
.soma-path__hint { font-size: var(--soma-t-small); color: var(--soma-secondary); }

/* Begin here: the wide opening card. */
.soma-begin { display: flex; border-radius: var(--soma-r-lg); overflow: hidden; background: var(--soma-white); }
.soma-begin__cover { display: flex; align-items: flex-end; width: 380px; min-height: 280px; flex-shrink: 0; background: var(--soma-primary); overflow: hidden; }
.soma-begin__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.soma-begin__body { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; flex: 1; padding: 36px 40px; }
.soma-begin__title { font-family: var(--soma-font-display); font-size: var(--soma-t-h3); font-weight: 600; line-height: 1.1; color: var(--soma-primary); margin: 0; }
.soma-begin__text { margin: 0; font-size: var(--soma-t-small); line-height: 1.65; color: var(--soma-text); max-width: 560px; }
.soma-begin__tags { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 900px) {
  .soma-begin { flex-direction: column; }
  .soma-begin__cover { width: auto; min-height: 200px; }
  .soma-begin__body { padding: 26px 22px; }
}

/* This week's quiz: one slim row. */
.soma-week {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 26px; border-radius: var(--soma-r-lg); background: var(--soma-base);
}
.soma-week__main { display: flex; align-items: center; gap: 16px; min-width: 0; }
.soma-week__icon {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: var(--soma-r-md); background: var(--soma-white); color: var(--soma-secondary);
}
.soma-week__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.soma-week__title { font-family: var(--soma-font-display); font-size: var(--soma-t-h4); font-weight: 600; line-height: 1.2; color: var(--soma-primary); }
.soma-week__reads { font-size: var(--soma-t-small); color: var(--soma-text); }
.soma-week__side { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* A thin progress bar, drawn only for a signed-in enrollee. */
.soma-meter { display: flex; align-items: center; gap: 10px; width: 100%; }
.soma-meter__track { flex: 1; height: 4px; min-width: 80px; border-radius: var(--soma-r-pill); background: var(--soma-line); overflow: hidden; }
.soma-meter__fill { display: block; height: 100%; background: var(--soma-secondary); }
.soma-meter__label { font-size: var(--soma-t-label); font-weight: 600; color: var(--soma-text); white-space: nowrap; }

/* How it works: three steps. */
.soma-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--soma-gap); }
.soma-step { display: flex; flex-direction: column; gap: 10px; padding: 26px 28px; border-radius: var(--soma-r-lg); background: var(--soma-base); }
.soma-step__icon {
  display: flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: var(--soma-r-md); background: var(--soma-white); color: var(--soma-secondary);
}
.soma-step__title { font-family: var(--soma-font-display); font-size: var(--soma-t-h4); font-weight: 600; color: var(--soma-primary); }
.soma-step__text { font-size: var(--soma-t-small); line-height: 1.65; color: var(--soma-text); }

/* The completed state of the opening card. */
.soma-row--done .soma-row__icon { color: var(--soma-secondary); }

/* --- Course rating ----------------------------------------------------- */
/* One line on a course card: five stars filled to the average, the average to
   two decimals, then the count. Rendered by soma_course_rating() in the plugin,
   which returns nothing at all when a course has no ratings — so there is no
   empty-star state and no leftover flex gap to style away here.

   The stars are two copies of the same five-star row, the second clipped to
   avg/5 of the width, which is why the track and the fill are separate groups.
   These colours sit on spans inside the card, not on the card's own <a>, so
   `.soma-page a` never competes with them. */
.soma-rating {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--soma-t-small); line-height: 1;
}
.soma-rating__stars { display: block; width: 74px; height: 15px; flex-shrink: 0; }
.soma-rating__track { fill: var(--soma-line); }
.soma-rating__fill  { fill: var(--soma-secondary); }
.soma-rating__value { font-weight: 600; color: var(--soma-primary); }
.soma-rating__count { color: var(--soma-text); }

/* In the portrait card the rating shares the foot with the chips, and the price
   is pushed to the end by its own margin. Keep it from being the thing that
   wraps awkwardly on a narrow card. */
.soma-card__foot .soma-rating { flex-shrink: 0; }

/* --- Lead card -------------------------------------------------------- */
.soma-lead {
  display: flex; flex-direction: column; flex: 1.2;
  border-radius: var(--soma-r-lg); overflow: hidden;
  background: var(--soma-white); color: var(--soma-primary);
}
.soma-lead:hover { color: var(--soma-primary); }
.soma-lead__media { display: flex; height: 300px; overflow: hidden; }
.soma-lead__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.soma-lead__body { display: flex; flex-direction: column; gap: 10px; padding: 26px 28px 30px; }
.soma-lead__kicker {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--soma-t-label); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--soma-secondary);
}
.soma-lead__title {
  font-family: var(--soma-font-display); font-size: var(--soma-t-h3);
  font-weight: 600; line-height: 1.15; color: var(--soma-primary);
}
.soma-lead__excerpt { font-size: var(--soma-t-small); line-height: 1.65; color: var(--soma-text); }
.soma-lead__meta { font-size: var(--soma-t-small); color: var(--soma-text); }

/* Featured lead beside a column of rows. */
.soma-reading { display: flex; gap: var(--soma-gap); }
.soma-reading__side { display: flex; flex-direction: column; gap: 12px; flex: 1; }
@media (max-width: 900px) { .soma-reading { flex-direction: column; } }

/* --- Two-column section (aside + body) -------------------------------- */
.soma-split { display: flex; gap: var(--soma-gap); }
.soma-split__aside { display: flex; flex-direction: column; gap: 12px; width: 340px; flex-shrink: 0; }
.soma-split__body { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.soma-split__note { font-size: var(--soma-t-small); line-height: 1.7; color: var(--soma-text); }
@media (max-width: 900px) { .soma-split { flex-direction: column; } .soma-split__aside { width: auto; } }

/* --- Panel ------------------------------------------------------------ */
.soma-panel { display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: var(--soma-r-lg); background: var(--soma-base); }
.soma-panel--white { background: var(--soma-white); }
.soma-kv { display: flex; justify-content: space-between; gap: 12px; font-size: var(--soma-t-small); }
.soma-kv span:first-child { color: var(--soma-text); }
.soma-kv span:last-child { font-weight: 600; color: var(--soma-primary); }

/* --- Next steps ------------------------------------------------------- */
.soma-next { display: flex; flex-direction: column; gap: 36px; }
.soma-next__grid { display: flex; flex-wrap: wrap; gap: var(--soma-gap); }
.soma-next__card {
  display: flex; flex-direction: column; gap: 14px;
  flex: 1 1 240px; padding: 28px;
  border-radius: var(--soma-r-lg); background: var(--soma-base); color: var(--soma-primary);
}
.soma-section--base .soma-next__card { background: var(--soma-white); }
.soma-next__card:hover { color: var(--soma-primary); }
.soma-next__icon {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--soma-r-md);
  background: var(--soma-white); color: var(--soma-secondary);
}
.soma-section--base .soma-next__icon { background: var(--soma-base); }
.soma-next__kind {
  font-size: var(--soma-t-label); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--soma-secondary);
}
.soma-next__title { font-family: var(--soma-font-display); font-size: var(--soma-t-h4); font-weight: 600; line-height: 1.15; color: var(--soma-primary); }

/* --- Pagination ------------------------------------------------------- */
.soma-pager { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; }
.soma-pager .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 42px; height: 42px; padding: 0 16px;
  border-radius: var(--soma-r-pill); background: var(--soma-white);
  font-size: var(--soma-t-small); font-weight: 600; color: var(--soma-primary);
  transition: background var(--soma-dur-btn) ease, transform var(--soma-dur-btn) ease;
}
.soma-pager .page-numbers:hover { background: var(--soma-periwinkle); transform: translateY(-2px); }
.soma-pager .page-numbers.current { background: var(--soma-primary); color: var(--soma-white); }
.soma-pager .page-numbers.dots { background: transparent; }

/* --- Empty state ------------------------------------------------------ */
.soma-empty {
  display: flex; flex-direction: column; gap: 8px;
  padding: 32px; border-radius: var(--soma-r-lg);
  background: var(--soma-white); color: var(--soma-text); font-size: var(--soma-t-small);
}
.soma-section--white .soma-empty { background: var(--soma-base); }
.soma-empty strong { font-family: var(--soma-font-display); font-size: var(--soma-t-h4); font-weight: 600; color: var(--soma-primary); }

/* --- Reading column (article, issue) ---------------------------------- */
.soma-read {
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(2.25rem, 1.5rem + 2vw, 3.5rem) var(--soma-gutter) var(--soma-section);
  background: var(--soma-white);
}
.soma-read__inner { display: flex; flex-direction: column; gap: 24px; width: 100%; max-width: var(--soma-read); }
.soma-read--wide .soma-read__inner { max-width: var(--soma-wide); gap: 22px; }
.soma-read__figure { display: flex; border-radius: var(--soma-r-lg); overflow: hidden; box-shadow: 0 22px 48px var(--soma-shadow); }
.soma-read__figure img { width: 100%; height: 340px; object-fit: cover; display: block; }
.soma-read__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.soma-read h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem); line-height: 1.06; text-wrap: balance; }

/* The post body itself. */
.soma-prose { display: flex; flex-direction: column; gap: 20px; }
.soma-prose > * { margin: 0; }
.soma-prose p { font-size: var(--soma-t-body); line-height: 1.8; color: var(--soma-text); }
.soma-prose p:first-of-type { font-size: var(--soma-t-lead); line-height: 1.7; color: var(--soma-primary); }
.soma-prose h2 { font-size: var(--soma-t-h3); line-height: 1.15; margin-top: 12px; }
.soma-prose h3 { font-size: var(--soma-t-h4); line-height: 1.2; margin-top: 8px; }
.soma-prose ul, .soma-prose ol { padding-left: 22px; font-size: var(--soma-t-body); line-height: 1.8; }
.soma-prose li + li { margin-top: 6px; }
.soma-prose img { border-radius: var(--soma-r-md); height: auto; }
.soma-prose figure { display: flex; flex-direction: column; gap: 8px; }
.soma-prose figcaption { font-size: var(--soma-t-small); color: var(--soma-text); }
.soma-prose blockquote {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 26px 28px; border-radius: var(--soma-r-lg); background: var(--soma-periwinkle);
}
.soma-prose blockquote p {
  font-family: var(--soma-font-display); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  font-weight: 600; line-height: 1.3; color: var(--soma-primary);
}
.soma-prose a { text-decoration: underline; text-underline-offset: 3px; }

/* The Thread's anchor: the one piece of teaching above the week's sweep.
   This is the same object as the panel in the mu-plugin's email-endpoint.php,
   drawn in tokens instead of inline hex. The email cannot load Cormorant, so it
   substitutes Georgia; nothing else about the two should differ. Change one and
   change the other in the same pass. */
.soma-anchor {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem) clamp(1.25rem, 1rem + 1vw, 1.625rem);
  border-left: 3px solid var(--soma-secondary);
  background: var(--soma-beige);
}
.soma-anchor > * { margin: 0; }
.soma-anchor__label {
  font-size: var(--soma-t-label); font-weight: 600;
  letter-spacing: var(--soma-ls-label); text-transform: uppercase; color: var(--soma-secondary);
}
.soma-anchor__title {
  font-family: var(--soma-font-display); font-size: var(--soma-t-h4);
  font-weight: 600; line-height: 1.15; color: var(--soma-primary); text-wrap: balance;
}
.soma-anchor__blurb { font-size: var(--soma-t-body); line-height: 1.7; color: var(--soma-text); }
.soma-anchor__go {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--soma-t-small); font-weight: 600; color: var(--soma-secondary);
}
.soma-anchor__go:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Sits between the anchor and the sweep, so it renders only when both exist. */
.soma-anchor-also {
  margin: 0; font-size: var(--soma-t-label); font-weight: 600;
  letter-spacing: var(--soma-ls-label); text-transform: uppercase; color: var(--soma-text);
}

/* Reading progress bar. Width is set by soma-ui.js. */
.soma-progress { display: block; height: 4px; background: var(--soma-line); position: sticky; top: var(--soma-header-h, 0px); z-index: 30; }
.soma-progress__fill { display: block; width: 0; height: 100%; background: var(--soma-secondary); transition: width .12s linear; }

/* Author card under an article. */
.soma-author { display: flex; gap: 18px; align-items: center; padding: 24px; border-radius: var(--soma-r-lg); background: var(--soma-base); }
.soma-author__photo { display: flex; width: 64px; height: 64px; flex-shrink: 0; border-radius: var(--soma-r-pill); overflow: hidden; }
.soma-author__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.soma-author__text { display: flex; flex-direction: column; gap: 4px; }
.soma-author__name { font-size: var(--soma-t-small); font-weight: 600; color: var(--soma-primary); }
.soma-author__bio { font-size: var(--soma-t-small); line-height: 1.6; color: var(--soma-text); }

/* Previous / next issue. */
.soma-adjacent { display: flex; gap: 12px; }
.soma-adjacent__link { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 22px 24px; border-radius: var(--soma-r-lg); background: var(--soma-base); color: var(--soma-primary); }
.soma-adjacent__link--next { align-items: flex-end; text-align: right; }
.soma-adjacent__kind { display: flex; align-items: center; gap: 8px; font-size: var(--soma-t-label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--soma-secondary); }
.soma-adjacent__title { font-family: var(--soma-font-display); font-size: var(--soma-t-h4); font-weight: 600; color: var(--soma-primary); }
@media (max-width: 700px) { .soma-adjacent { flex-direction: column; } .soma-adjacent__link--next { align-items: flex-start; text-align: left; } }

/* Dark prompt strip. */
.soma-prompt {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
  padding: 28px 30px; border-radius: var(--soma-r-lg); background: var(--soma-primary);
}
.soma-prompt__text { display: flex; flex-direction: column; gap: 4px; }
.soma-prompt__title { font-family: var(--soma-font-display); font-size: 1.5rem; font-weight: 600; color: var(--soma-white); }
.soma-prompt__sub { font-size: var(--soma-t-small); color: var(--soma-white-70); }

/* --- Topics index ----------------------------------------------------- */
/* The Explore index. Grid, not wrapping flex: a flex row makes the card left
   alone on the last line stretch to the full width, which is what seven fields
   in a three-up grid produced. auto-fill keeps the empty tracks so the odd card
   stays a normal width whatever the count. */
.soma-topics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: var(--soma-gap);
}
.soma-topic {
  display: flex; flex-direction: column; flex: 1 1 320px;
  border-radius: var(--soma-r-lg); overflow: hidden;
  background: var(--soma-white); color: var(--soma-primary);
}
.soma-topic:hover { color: var(--soma-primary); }
.soma-topic__media { display: flex; height: 210px; overflow: hidden; }
.soma-topic__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.soma-topic__media--empty { background: var(--soma-beige); }
.soma-topic__body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 24px 26px 28px; }
.soma-topic__head { display: flex; gap: 14px; align-items: center; }
.soma-topic__icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: var(--soma-r-md); background: var(--soma-base); color: var(--soma-secondary); }
.soma-topic__name { font-family: var(--soma-font-display); font-size: var(--soma-t-h4); font-weight: 600; line-height: 1.15; color: var(--soma-primary); }
.soma-topic__question { font-family: var(--soma-font-display); font-size: 1.125rem; font-weight: 600; line-height: 1.3; color: var(--soma-secondary); }
.soma-topic__body-text { font-size: var(--soma-t-small); line-height: 1.6; color: var(--soma-text); }
.soma-topic__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }

/* --- Topic hub -------------------------------------------------------- */
.soma-hub__figure { display: flex; height: clamp(15rem, 8rem + 22vw, 26.25rem); border-radius: var(--soma-r-lg); overflow: hidden; box-shadow: 0 30px 60px var(--soma-shadow); }
.soma-hub__figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.soma-hub__brief { display: flex; flex-direction: column; gap: 16px; flex: 1; padding: 36px; border-radius: var(--soma-r-lg); background: var(--soma-white); }
.soma-hub__brief p { margin: 0; }
.soma-hub__brief p:first-child { font-size: var(--soma-t-lead); line-height: 1.65; color: var(--soma-primary); }
.soma-hub__brief p + p { font-size: var(--soma-t-body); line-height: 1.75; color: var(--soma-text); }
.soma-hub__panels { display: flex; gap: var(--soma-gap); }
.soma-hub__panel { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.soma-hub__panel--wide { flex: 1.2; }
@media (max-width: 900px) { .soma-hub__panels { flex-direction: column; } }

/* The Certified Programme card at the foot of a hub. */
.soma-programme { display: flex; border-radius: var(--soma-r-lg); overflow: hidden; background: var(--soma-base); color: var(--soma-primary); }
.soma-programme:hover { color: var(--soma-primary); }
.soma-programme__cover { display: flex; align-items: flex-end; width: 420px; min-height: 320px; flex-shrink: 0; background: var(--soma-primary); overflow: hidden; }
.soma-programme__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.soma-programme__body { display: flex; flex-direction: column; gap: 14px; flex: 1; padding: 36px 40px; }
.soma-programme__title { font-family: var(--soma-font-display); font-size: var(--soma-t-h3); font-weight: 600; line-height: 1.1; color: var(--soma-primary); }
.soma-programme__text { font-size: var(--soma-t-small); line-height: 1.65; color: var(--soma-text); max-width: 560px; }
.soma-programme__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.soma-programme__tags .soma-tag { background: var(--soma-white); }
@media (max-width: 900px) { .soma-programme { flex-direction: column; } .soma-programme__cover { width: auto; min-height: 220px; } }

/* --- Events ----------------------------------------------------------- */
.soma-event-card {
  display: flex; gap: clamp(1.5rem, .5rem + 2.6vw, 3.5rem);
  padding: clamp(1.5rem, .8rem + 2vw, 2.5rem);
  border-radius: var(--soma-r-lg); background: var(--soma-primary); color: var(--soma-white);
}
.soma-event-card:hover { color: var(--soma-white); }
.soma-event-card__when { display: flex; flex-direction: column; gap: 10px; width: 200px; flex-shrink: 0; }
.soma-event-card__date {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 72px; height: 72px; border-radius: var(--soma-r-md);
  background: var(--soma-white); color: var(--soma-primary); font-weight: 600; line-height: 1;
}
.soma-event-card__month { font-size: var(--soma-t-label); letter-spacing: .1em; text-transform: uppercase; }
.soma-event-card__day { font-family: var(--soma-font-display); font-size: 1.875rem; }
.soma-event-card__where { font-size: var(--soma-t-small); color: var(--soma-white-70); }
.soma-event-card__body { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.soma-event-card__title { font-family: var(--soma-font-display); font-size: var(--soma-t-h3); font-weight: 600; line-height: 1.12; color: var(--soma-white); }
.soma-event-card__text { font-size: var(--soma-t-small); line-height: 1.65; color: var(--soma-white-70); max-width: 640px; }
@media (max-width: 800px) { .soma-event-card { flex-direction: column; } .soma-event-card__when { width: auto; } }

/* --- Books ------------------------------------------------------------ */
/* The newest book stands alone in the middle of the shelf; the back
   catalogue sits beneath it under "Further titles". A shelf should say what
   is new before it says what else there is. */
/* Beige, at Dalmitra's direction, and laid out the way Huberman's book page is:
   jacket on the left, copy on the right, text left-aligned so the title, the
   subtitle and the button all share one left edge. The 2:3 cover with
   object-fit: contain is kept from the centred version - it is what stopped
   the crop that was cutting the authors' names off the bottom of the jacket. */
.soma-featured-book {
  display: flex; align-items: center; text-align: left;
  gap: clamp(1.75rem, 1rem + 2.5vw, 3.25rem);
  padding: clamp(1.75rem, 1rem + 2.4vw, 3rem);
  border-radius: var(--soma-r-lg);
  background: var(--soma-beige); color: var(--soma-primary);
}
.soma-featured-book:hover { color: var(--soma-primary); }
.soma-featured-book__cover { display: flex; width: clamp(200px, 24vw, 300px); height: auto; aspect-ratio: 2 / 3; flex-shrink: 0; border-radius: var(--soma-r-md); overflow: hidden; background: transparent; box-shadow: 0 28px 56px rgba(19,21,39,.24); }
.soma-featured-book__cover img { width: 100%; height: 100%; object-fit: contain; display: block; }
.soma-featured-book__body { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; flex: 1 1 auto; min-width: 0; max-width: 68ch; }
.soma-featured-book__title { font-family: var(--soma-font-display); font-size: var(--soma-t-h2); font-weight: 600; line-height: 1.05; color: var(--soma-primary); }
.soma-featured-book__text { font-size: var(--soma-t-small); line-height: 1.65; color: var(--soma-text); max-width: 62ch; }
/* Below 800px there is no room for two columns, so it stacks and centres. */
@media (max-width: 800px) {
  .soma-featured-book { flex-direction: column; align-items: center; text-align: center; }
  .soma-featured-book__body { align-items: center; }
  .soma-featured-book__cover { width: min(220px, 58vw); }
}

.soma-books { display: flex; flex-wrap: wrap; gap: var(--soma-gap); }
.soma-book { display: flex; flex-direction: column; gap: 10px; flex: 1 1 190px; max-width: 23%; color: var(--soma-primary); }
.soma-book:hover { color: var(--soma-primary); }
.soma-book__cover { display: flex; aspect-ratio: 2 / 3; border-radius: var(--soma-r-md); overflow: hidden; background: var(--soma-white); }
.soma-book__cover img { width: 100%; height: 100%; object-fit: contain; display: block; }
.soma-book__cover--empty { background: var(--soma-beige); }
.soma-book__title { font-size: var(--soma-t-small); font-weight: 600; color: var(--soma-primary); }
.soma-book__sub { font-size: var(--soma-t-small); color: var(--soma-text); }
@media (max-width: 900px) { .soma-book { max-width: 48%; } }
@media (max-width: 560px) { .soma-book { max-width: 100%; } }

/* Single book hero. */
.soma-book-hero { display: flex; align-items: center; gap: clamp(1.75rem, .6rem + 3vw, 3.5rem); padding: clamp(2.5rem, 1.6rem + 2.4vw, 4rem) var(--soma-gutter); background: var(--soma-beige); }
.soma-book-hero__cover { display: flex; width: 320px; height: 480px; flex-shrink: 0; border-radius: var(--soma-r-lg); overflow: hidden; background: transparent; box-shadow: 0 30px 60px rgba(19,21,39,.16); }
.soma-book-hero__cover img { width: 100%; height: 100%; object-fit: contain; display: block; }
.soma-book-hero__body { display: flex; flex-direction: column; gap: 16px; flex: 1; }
.soma-book-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 900px) { .soma-book-hero { flex-direction: column; align-items: flex-start; } .soma-book-hero__cover { width: 220px; height: 330px; } }

/* Chapter list. */
.soma-chapters { display: flex; flex-direction: column; gap: 10px; }
.soma-chapter { display: flex; gap: 14px; align-items: center; padding: 16px 20px; border-radius: var(--soma-r-lg); background: var(--soma-base); }
.soma-chapter__n { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--soma-r-md); background: var(--soma-white); color: var(--soma-secondary); font-family: var(--soma-font-display); font-size: 1.125rem; font-weight: 600; }
.soma-chapter__title { font-size: var(--soma-t-small); font-weight: 500; color: var(--soma-primary); }

/* --- Podcast ---------------------------------------------------------- */
.soma-podcast-hero { display: flex; align-items: center; gap: clamp(1.75rem, .4rem + 3.8vw, 4rem); padding: clamp(2.5rem, 1.6rem + 2.4vw, 4rem) var(--soma-gutter); background: var(--soma-primary); color: var(--soma-white); }
.soma-podcast-hero__text { display: flex; flex-direction: column; gap: 18px; flex: 1; }
.soma-podcast-hero h1 { color: var(--soma-white); }
.soma-podcast-hero__lead { margin: 0; font-size: var(--soma-t-lead); line-height: 1.6; color: var(--soma-white-70); max-width: 640px; }
.soma-podcast-hero__art { display: flex; width: 280px; height: 280px; flex-shrink: 0; border-radius: var(--soma-r-lg); overflow: hidden; border: 1px solid var(--soma-line-inverse); }
.soma-podcast-hero__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .soma-podcast-hero { flex-direction: column; align-items: flex-start; } .soma-podcast-hero__art { width: 200px; height: 200px; } }

.soma-embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--soma-r-lg); overflow: hidden; background: var(--soma-primary); }
.soma-embed iframe, .soma-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.soma-embed--empty { display: flex; align-items: center; justify-content: center; }
.soma-embed__note { font-size: var(--soma-t-label); font-weight: 600; color: var(--soma-periwinkle); }

/* --- Year groups (issue archive) -------------------------------------- */
.soma-years { display: flex; flex-direction: column; gap: 40px; }
.soma-year { display: flex; gap: var(--soma-gap); }
.soma-year__label { display: flex; align-items: flex-start; width: 140px; flex-shrink: 0; }
.soma-year__label span { padding: 10px 18px; border-radius: var(--soma-r-pill); background: var(--soma-white); font-family: var(--soma-font-display); font-size: 1.75rem; font-weight: 600; line-height: 1; color: var(--soma-secondary); }
.soma-year__list { display: flex; flex-direction: column; gap: 12px; flex: 1; }
@media (max-width: 700px) { .soma-year { flex-direction: column; gap: 14px; } .soma-year__label { width: auto; } }

/* The latest episode: a plain column beside the episode list, not a card. */
.soma-latest { display: flex; flex-direction: column; gap: 14px; flex: 1.4; }
.soma-latest__title { font-family: var(--soma-font-display); font-size: var(--soma-t-h3); font-weight: 600; line-height: 1.15; color: var(--soma-primary); }
.soma-latest__title:hover { color: var(--soma-secondary); }

/* --- Programmes prospectus -------------------------------------------- */
.soma-progs { display: flex; flex-direction: column; gap: var(--soma-gap); }
.soma-prog { display: flex; border-radius: var(--soma-r-lg); overflow: hidden; background: var(--soma-white); }
.soma-prog__cover {
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  width: 320px; min-height: 320px; flex-shrink: 0;
  background: var(--soma-primary); overflow: hidden;
}
.soma-prog__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.soma-prog__cover--plain { padding: 22px; }
.soma-prog__n { font-family: var(--soma-font-display); font-size: var(--soma-t-h3); font-weight: 600; color: var(--soma-periwinkle); }
.soma-prog__cover-label { font-size: var(--soma-t-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--soma-periwinkle); }
.soma-prog__body { display: flex; flex-direction: column; gap: 14px; flex: 1; padding: clamp(1.5rem, .9rem + 1.8vw, 2.5rem); }
.soma-prog__title { font-size: var(--soma-t-h3); line-height: 1.1; }
.soma-prog__title a { color: var(--soma-primary); }
.soma-prog__title a:hover { color: var(--soma-secondary); }
.soma-prog__text { margin: 0; font-size: var(--soma-t-small); line-height: 1.65; color: var(--soma-text); max-width: 640px; }
.soma-prog__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.soma-prog__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 4px; }
.soma-prog__price { font-size: 1rem; font-weight: 600; color: var(--soma-primary); }
@media (max-width: 900px) { .soma-prog { flex-direction: column; } .soma-prog__cover { width: auto; min-height: 200px; padding: 22px; } }

/* --- References ------------------------------------------------------- */
.soma-refs { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--soma-r-lg); background: var(--soma-base); }
.soma-refs__list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.soma-refs__list li { font-size: var(--soma-t-small); line-height: 1.7; color: var(--soma-text); }
.soma-refs__note { margin: 0; font-size: var(--soma-t-small); line-height: 1.7; color: var(--soma-text); font-style: italic; }

/* The Foundations list reuses the year-group frame, with a Topic chip for a label. */
.soma-foundations .soma-year__label { align-items: center; width: 220px; }
.soma-foundations .soma-year__label .soma-chip { background: var(--soma-white); }

/* A field card on the home page whose photograph has not been supplied yet.
   .topic-media is 220px of nothing on a white card otherwise; the beige is the
   same empty state the Explore card uses (.soma-topic__media--empty). Drop an
   image widget into the slot and this stops applying on its own. */
.card-topic .topic-media:not(:has(img)) { background: var(--soma-beige); }

/* --- Seven fields: 2 + 3 + 2 ------------------------------------------- */
/* Seven does not divide by three, so the default grid leaves one card alone on
   the last row. On six columns the rows become 3+3, 2+2+2, 3+3: two wider
   cards, three standard, two wider, every row full. Scoped to lists that hold
   exactly seven so a sixth or eighth field falls back to the plain grid rather
   than to a layout designed for a count it no longer has. */
@media (min-width: 1025px) {
  .soma-topics:has(> :nth-child(7)):not(:has(> :nth-child(8))),
  .elementor .card-grid:has(> .card-topic):has(> :nth-child(7)):not(:has(> :nth-child(8))) {
    grid-template-columns: repeat(6, 1fr);
  }
  .soma-topics:has(> :nth-child(7)):not(:has(> :nth-child(8))) > .soma-topic,
  .elementor .card-grid:has(> .card-topic):has(> :nth-child(7)):not(:has(> :nth-child(8))) > .card-topic {
    grid-column: span 2;
  }
  .soma-topics:has(> :nth-child(7)):not(:has(> :nth-child(8))) > .soma-topic:nth-child(-n+2),
  .soma-topics:has(> :nth-child(7)):not(:has(> :nth-child(8))) > .soma-topic:nth-child(n+6),
  .elementor .card-grid:has(> .card-topic):has(> :nth-child(7)):not(:has(> :nth-child(8))) > .card-topic:nth-child(-n+2),
  .elementor .card-grid:has(> .card-topic):has(> :nth-child(7)):not(:has(> :nth-child(8))) > .card-topic:nth-child(n+6) {
    grid-column: span 3;
  }
}

/* Tablet: two columns, and the seventh spans both as a horizontal card so no
   row is left holding one. */
@media (min-width: 768px) and (max-width: 1024px) {
  .soma-topics:has(> :nth-child(7)):not(:has(> :nth-child(8))),
  .elementor .card-grid:has(> .card-topic):has(> :nth-child(7)):not(:has(> :nth-child(8))) {
    grid-template-columns: repeat(2, 1fr);
  }
  .soma-topics:has(> :nth-child(7)):not(:has(> :nth-child(8))) > .soma-topic:nth-child(7),
  .elementor .card-grid:has(> .card-topic):has(> :nth-child(7)):not(:has(> :nth-child(8))) > .card-topic:nth-child(7) {
    grid-column: span 2;
    flex-direction: row;
    align-items: stretch;
  }
  .soma-topics:has(> :nth-child(7)):not(:has(> :nth-child(8))) > .soma-topic:nth-child(7) > .soma-topic__media,
  .elementor .card-grid:has(> .card-topic):has(> :nth-child(7)):not(:has(> :nth-child(8))) > .card-topic:nth-child(7) > .topic-media {
    flex: 0 0 38%; width: 38%; height: auto; min-height: 190px;
  }
  .elementor .card-grid:has(> .card-topic):has(> :nth-child(7)):not(:has(> :nth-child(8))) > .card-topic:nth-child(7) > .topic-body-row {
    flex: 1 1 auto; align-self: center;
  }
  .soma-topics:has(> :nth-child(7)):not(:has(> :nth-child(8))) > .soma-topic:nth-child(7) > .soma-topic__body {
    flex: 1 1 auto; align-self: center;
  }
}

/* --- Start Here: the knowledge-check CTA -------------------------------- */
/* .card-idea-cta carries `flex: 1 1 380px` for the home page, where it sits in
   a row grid and 380px is a width. On Start Here the same card is a direct
   child of a column flex band, so that basis becomes a 380px *height* and the
   content sat in the top of a tall block with dead space under it. Sized to its
   content here; the home page's grid usage is untouched. */
.elementor .band-base > .card-idea-cta { flex: 0 0 auto; }

/* --- Start Here: the collapsed essay ------------------------------------ */
/* A native <details>. It collapses without JavaScript, takes focus and responds
   to Enter and Space on its own, and expands downward from the summary so the
   control the reader just used stays exactly where it was. The label swap is
   CSS only, driven by the [open] attribute the browser sets itself. */
.soma-essay { margin-top: 14px; }
.soma-essay__toggle {
  display: inline-flex; align-items: center; gap: 7px; width: fit-content;
  cursor: pointer; list-style: none;
  font-size: var(--soma-t-label); font-weight: 600; color: var(--soma-secondary);
  padding: 7px 0;
}
.soma-essay__toggle::-webkit-details-marker { display: none; }
.soma-essay__toggle:hover { color: var(--soma-secondary-deep); }
.soma-essay__toggle:focus-visible {
  outline: 2px solid var(--soma-secondary); outline-offset: 4px; border-radius: var(--soma-r-sm);
}
.soma-essay__label--less { display: none; }
.soma-essay[open] .soma-essay__label--more { display: none; }
.soma-essay[open] .soma-essay__label--less { display: inline; }
.soma-essay__chev { display: inline-flex; transform: rotate(90deg); transition: transform var(--soma-dur-btn) ease; }
.soma-essay[open] .soma-essay__chev { transform: rotate(-90deg); }

/* The remaining paragraphs. .note-text carries the design's body type; this
   only supplies the rhythm between them, which the Elementor stack used to. */
/* Scoped to [open] on purpose. Author styles beat the UA stylesheet whatever
   the specificity, so a bare `display: flex` here can un-hide the collapsed
   content in engines that hide it with `display: none` rather than
   content-visibility. Chrome happens to survive it; not every engine does. */
.soma-essay[open] .soma-essay__rest { display: flex; flex-direction: column; gap: 14px; padding-top: 12px; }
.soma-essay__p { margin: 0; }

/* --- The field grid ----------------------------------------------------- */
/* Seven fields no longer divide by three, and a wrapping flex row makes the
   card left alone on the last row fill the whole width. Grid keeps the column
   track, so the odd card is the same size as the rest.

   auto-fill, not auto-fit: auto-fit collapses the empty tracks and the lone
   card stretches again. The track minimums are the flex-basis values the
   design already switches between (380 / 300 / one column), so the wrap points
   are exactly where they were; min() stops the floor overflowing a narrow
   container. Scoped with :has() so the idea, stat and next-step grids that
   share .card-grid are left on flex.

   The .elementor prefix is not decoration: Elementor writes the rule as
   `.elementor .card-grid`, which is (0,2,0) — the same as a bare
   `.card-grid:has(...)` — and its stylesheet loads after this one, so an
   unprefixed rule loses the tie on display and silently keeps flex. */
.elementor .card-grid:has(> .card-topic) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr));
}
@media (max-width: 1024px) {
  .elementor .card-grid:has(> .card-topic) {
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  }
}
@media (max-width: 767px) {
  .elementor .card-grid:has(> .card-topic) { grid-template-columns: 1fr; }
}

/* The stat-card row has the same fault the field grid had: four cards in a
   wrapping flex row put one alone on the last line, where it stretched to the
   full 672px against its siblings' 205px. Same treatment, same reasoning about
   auto-fill and the .elementor prefix as above; the track minimums are this
   card's own flex-basis values (150, and 120 below 768). */
.elementor .card-grid:has(> .stat-card) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
}
@media (max-width: 767px) {
  .elementor .card-grid:has(> .stat-card) {
    grid-template-columns: repeat(auto-fill, minmax(min(120px, 100%), 1fr));
  }
}

/* --- Header cart ------------------------------------------------------- */
/* Tutor is monetised through its own cart, so a paid course's Enrol button
   adds to a cart the header had no sign of. The slot wrapper is always in the
   markup — Astra drops its HTML element entirely when the content is an empty
   string, and the live update needs something to write into — so an empty cart
   collapses the Astra wrappers instead of drawing an empty box. */
.ast-header-html-1:has(.soma-cart-slot:empty),
.ast-header-html-2:has(.soma-cart-slot:empty) { display: none; }
.soma-cart-slot:empty { display: none; }

.soma-cart-link {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; color: var(--soma-primary);
}
.soma-cart-link:hover, .soma-cart-link:focus-visible { color: var(--soma-secondary); }
.soma-cart-link:focus-visible {
  outline: 2px solid var(--soma-secondary); outline-offset: 2px; border-radius: var(--soma-r-sm);
}
.soma-cart-link__count {
  position: absolute; top: 5px; right: 3px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--soma-secondary); color: var(--soma-white);
  font-size: 10px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}

/* --- Search filters ---------------------------------------------------- */
/* The "Show only" row on /search/. Drawn by [soma_search_filters] rather than
   as Elementor content, because every pill's href carries the live ?q=. The
   pill itself is .soma-chip, whose values already match the design's chip-lg;
   the active pill is .soma-chip--on and is a span, not a link. */
.soma-search-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%;
}
.soma-search-filters__label { font-size: var(--soma-t-label); font-weight: 500; }
.soma-search-filters .soma-chip { display: flex; align-items: center; width: fit-content; }

/* --- Shortcode blocks -------------------------------------------------- */
/* These render inside Elementor pages, so they take the full width of the
   container they are dropped into and bring their own spacing. */
.soma-sc { display: block; width: 100%; }

/* The featured strip. The id stays on the scroller so the Elementor arrows
   and dots beside it keep driving it. */
.soma-strip {
  display: flex; gap: var(--soma-gap);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: 4px;
}
.soma-strip::-webkit-scrollbar { display: none; }
.soma-feature {
  display: flex; flex-direction: column;
  flex: 0 0 clamp(17rem, 30%, 24rem); scroll-snap-align: start;
  border-radius: var(--soma-r-lg); overflow: hidden;
  background: var(--soma-white); color: var(--soma-primary);
}
.soma-feature:hover { color: var(--soma-primary); }
.soma-feature__media { display: flex; aspect-ratio: 16 / 9; overflow: hidden; background: var(--soma-beige); }
.soma-feature__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.soma-feature__media--empty { background: var(--soma-primary); }
.soma-feature__body { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px 26px; }
.soma-feature__kind {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--soma-t-label); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--soma-secondary);
}
.soma-feature__title { font-family: var(--soma-font-display); font-size: var(--soma-t-h4); font-weight: 600; line-height: 1.2; color: var(--soma-primary); }
.soma-feature__meta { font-size: var(--soma-t-small); color: var(--soma-text); }

/* The strip's own controls.

   The dots are one per scroll position, not one per card. At 1440 three of the
   four cards are in view, so the strip has two places it can rest and shows two
   dots; at 834 three, at 390 four. The shortcode renders one button per card,
   which is the most positions there can ever be, and soma-ui.js hides the
   surplus once it has measured. Values are the design's own `dot` and
   `dot-active` (--c-line and --c-primary are --soma-line and --soma-primary),
   restated here because a global class only survives in a page's CSS while an
   element on that page still refers to it. */
.soma-strip-dots { display: flex; flex-direction: row; justify-content: center; gap: 8px; padding: 0; }
.soma-strip-dot {
  display: block; width: 8px; height: 6px; padding: 0; border: 0;
  border-radius: var(--soma-r-pill); background: var(--soma-line);
  cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: all 200ms;
}
.soma-strip-dot--on { width: 28px; background: var(--soma-primary); }

/* Nothing to scroll: the controls are not drawn at all rather than drawn dead.
   The arrows are Elementor elements, so the rule needs the id to beat
   `.elementor .nav-circle`; a class on its own loses that tie. */
#soma-featured-prev.soma-ctl-off,
#soma-featured-next.soma-ctl-off,
.soma-strip-dots.soma-ctl-off,
.soma-strip-dot.soma-ctl-off { display: none; }

/* At either end, the arrow with nowhere to go says so rather than looking live
   and doing nothing. */
#soma-featured-prev[aria-disabled="true"],
#soma-featured-next[aria-disabled="true"] { opacity: .35; cursor: default; }

/* The strip and its dots come out of one shortcode now, so the space between
   them is set here instead of by the Elementor section's own gap. Same values,
   same breakpoints. */
.soma-sc--featured { display: flex; flex-direction: column; gap: 28px; }
@media (max-width: 1024px) { .soma-sc--featured { gap: 24px; } }
@media (max-width: 767px)  { .soma-sc--featured { gap: 20px; } }

/* Portrait cards, three across. */
.soma-cards { display: flex; flex-wrap: wrap; gap: var(--soma-gap); }
.soma-card {
  display: flex; flex-direction: column; flex: 1 1 clamp(16rem, 30%, 24rem);
  border-radius: var(--soma-r-lg); overflow: hidden;
  background: var(--soma-white); color: var(--soma-primary);
}
.soma-card:hover { color: var(--soma-primary); }
.soma-card__media { display: flex; height: 210px; overflow: hidden; background: var(--soma-primary); }
.soma-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.soma-card__media--empty { background: var(--soma-primary); }
.soma-card__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 24px 26px 28px; }
.soma-card__title { font-family: var(--soma-font-display); font-size: var(--soma-t-h4); font-weight: 600; line-height: 1.2; color: var(--soma-primary); }
.soma-card__text { font-size: var(--soma-t-small); line-height: 1.6; color: var(--soma-text); }
.soma-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; }
.soma-card__price { margin-left: auto; font-size: 1rem; font-weight: 600; color: var(--soma-primary); }

/* The wide latest-issue card. */
.soma-issue { display: flex; border-radius: var(--soma-r-lg); overflow: hidden; background: var(--soma-white); color: var(--soma-primary); }
.soma-issue:hover { color: var(--soma-primary); }
.soma-issue__side { display: flex; align-items: flex-end; width: 220px; min-height: 220px; flex-shrink: 0; background: var(--soma-primary); padding: 22px; }
.soma-issue__body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 32px 36px; }
.soma-issue__title { font-family: var(--soma-font-display); font-size: var(--soma-t-h3); font-weight: 600; line-height: 1.12; color: var(--soma-primary); }
.soma-issue__text { font-size: var(--soma-t-small); line-height: 1.65; color: var(--soma-text); }
.soma-issue__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.soma-issue__go { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; font-size: var(--soma-t-small); font-weight: 600; color: var(--soma-secondary); }
@media (max-width: 800px) { .soma-issue { flex-direction: column; } .soma-issue__side { width: auto; min-height: 120px; } }

/* Search. */
.soma-search { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; }
.soma-search__field {
  flex: 1 1 260px; padding: 16px 20px;
  border: 1.5px solid var(--soma-line); border-radius: var(--soma-r-pill);
  background: var(--soma-white); color: var(--soma-primary);
  font-family: var(--soma-font-body); font-size: 1rem; font-weight: 400; outline: none;
}
.soma-search__field:focus { border-color: var(--soma-secondary); }
.soma-search__count { margin: 0 0 4px; font-size: var(--soma-t-small); color: var(--soma-text); }

/* Practice Library. */
.soma-practices { display: flex; flex-wrap: wrap; gap: var(--soma-gap); }
.soma-practice {
  display: flex; flex-direction: column; gap: 10px;
  flex: 1 1 clamp(17rem, 31%, 26rem); padding: 26px 28px 28px;
  border-radius: var(--soma-r-lg); background: var(--soma-white);
}
.soma-practice__title { font-family: var(--soma-font-display); font-size: var(--soma-t-h4); font-weight: 600; line-height: 1.2; color: var(--soma-primary); }
.soma-practice__why { font-size: var(--soma-t-small); line-height: 1.6; color: var(--soma-text); }
.soma-practice__row { display: flex; flex-direction: column; gap: 2px; font-size: var(--soma-t-small); line-height: 1.6; color: var(--soma-text); }
.soma-practice__label { font-size: var(--soma-t-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--soma-secondary); }
.soma-practice__evidence { margin-top: auto; padding-top: 8px; font-size: var(--soma-t-label); line-height: 1.6; color: var(--soma-text); }

/* Legal pages and the completion screen. */
.soma-prose--legal h2 { font-size: var(--soma-t-h3); }
.soma-outcomes { display: flex; flex-wrap: wrap; gap: var(--soma-gap); }
.soma-outcome {
  display: flex; gap: 14px; align-items: flex-start;
  flex: 1 1 clamp(15rem, 30%, 22rem); padding: 22px 24px;
  border-radius: var(--soma-r-lg); background: var(--soma-white);
  font-size: var(--soma-t-small); line-height: 1.6; color: var(--soma-primary);
}
.soma-outcome .soma-i { color: var(--soma-secondary); }
.soma-completed__line { margin: 0; font-size: var(--soma-t-lead); line-height: 1.5; color: var(--soma-primary); }
.soma-completed__sub { margin: 6px 0 0; font-size: var(--soma-t-small); color: var(--soma-text); }
.soma-completed__title { font-family: var(--soma-font-display); font-size: var(--soma-t-h2); font-weight: 600; line-height: 1.05; color: var(--soma-primary); margin: 0; }
.soma-legal__updated { margin: 0; font-size: var(--soma-t-small); color: var(--soma-text); }

/* --- Astra header and footer, dressed as the design ------------------- */
.ast-primary-header-bar,
.ast-header-break-point .ast-primary-header-bar {
  background: var(--soma-white);
  border-bottom: 1px solid var(--soma-line);
}
/* The sticky has to sit on #masthead itself. .ast-main-header-wrap is inside a
   position:relative parent that is exactly as tall as the bar, so a sticky
   wrapper has no room to travel and never detaches. There are also two
   .ast-main-header-wrap elements in the DOM — desktop and Astra's mobile
   header — so the rule must not target that class at all. */
header#masthead { position: sticky; top: 0; z-index: 99; }
body.admin-bar header#masthead { top: 32px; }
@media (max-width: 782px) { body.admin-bar header#masthead { top: 46px; } }

.site-header .custom-logo-link img { height: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); width: auto; }

/* Primary menu: pill links in Raleway. */
.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link {
  font-family: var(--soma-font-body);
  font-size: .9375rem; font-weight: 500;
  color: var(--soma-primary);
  padding: 10px 14px; border-radius: var(--soma-r-pill);
  transition: background var(--soma-dur-btn) ease;
}
.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link:hover,
.ast-builder-menu-1 .main-header-menu > .menu-item.current-menu-item > .menu-link,
.ast-builder-menu-1 .main-header-menu > .menu-item.current-menu-ancestor > .menu-link { background: var(--soma-base); color: var(--soma-primary); }
.ast-builder-menu-1 .sub-menu {
  border: 0; border-radius: var(--soma-r-md); padding: 10px;
  background: var(--soma-white); box-shadow: 0 22px 48px rgba(19,21,39,.16);
}
.ast-builder-menu-1 .sub-menu .menu-link {
  border-radius: var(--soma-r-sm); padding: 11px 14px;
  font-family: var(--soma-font-body); font-size: .9375rem; font-weight: 500;
  color: var(--soma-primary); border-bottom: 0;
}
.ast-builder-menu-1 .sub-menu .menu-link:hover { background: var(--soma-base); color: var(--soma-secondary); }

/* Search, Sign In and the My Learning button. */
.site-header .ast-search-menu-icon .search-field { border-radius: var(--soma-r-pill); background: var(--soma-base); border: 0; font-family: var(--soma-font-body); }
.site-header .ast-search-menu-icon .slide-search .search-form { border-radius: var(--soma-r-pill); }
.soma-account-link {
  display: inline-flex; align-items: center;
  padding: 11px 18px; border-radius: var(--soma-r-pill);
  font-family: var(--soma-font-body); font-size: .9375rem; font-weight: 500;
  color: var(--soma-primary); white-space: nowrap;
  transition: background var(--soma-dur-btn) ease;
}
.soma-account-link:hover { background: var(--soma-base); color: var(--soma-primary); }
.site-header .ast-builder-button-wrap .ast-custom-button {
  border-radius: var(--soma-r-pill);
  background: var(--soma-primary); color: var(--soma-white);
  font-family: var(--soma-font-body); font-size: .9375rem; font-weight: 600;
  padding: 12px 22px; white-space: nowrap;
}
.site-header .ast-builder-button-wrap .ast-custom-button:hover { background: var(--soma-primary-deep); color: var(--soma-white); }

/* Footer. */
.site-footer, .ast-footer-copyright, .footer-widget-area {
  background: var(--soma-primary);
  color: var(--soma-white-70);
  font-family: var(--soma-font-body);
}
.site-footer a, .ast-footer-copyright a { color: var(--soma-white-70); }
.site-footer a:hover, .ast-footer-copyright a:hover { color: var(--soma-white); }
.site-footer .footer-nav-wrap .menu-link {
  font-size: 1rem; font-weight: 500; color: var(--soma-white-70);
  padding: 8px 14px; border-radius: var(--soma-r-pill);
}
.site-footer .footer-nav-wrap .menu-link:hover { background: var(--soma-white-12); color: var(--soma-white); }
.soma-copyright { font-size: var(--soma-t-small); color: var(--soma-white-50); }

/* The identity block: the wordmark, a hairline and ACADEMY — all inside the
   one anchor, so the whole thing is the link home. */
.site-header .site-branding.ast-site-identity { display: flex; align-items: center; flex-wrap: nowrap; }
.site-header .ast-builder-grid-row > .site-header-primary-section-left { flex-shrink: 0; }
.site-header .site-branding .custom-logo-link { display: inline-flex; align-items: center; gap: 14px; }
.soma-identity__rule { display: block; width: 1px; height: 16px; flex-shrink: 0; background: var(--soma-line); }
.soma-identity__mark {
  font-family: var(--soma-font-body); font-size: var(--soma-t-label); font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--soma-primary); white-space: nowrap;
}
/* The lockup is the identity, so it is never the thing that steps aside
   (15 Sep 2026). The hairline and ACADEMY now show at every width, at their
   full size; the row buys that room from the search field and the menu
   padding instead — see the header row block further down. */

/* Once the mobile header takes over there is no menu competing for the row, so
   the full lockup comes back and sits in the middle of the bar. Astra builds
   that row as a two-column grid, branding left and toggle right; a third empty
   column of matching width is what actually centres the lockup rather than
   just pushing it off-centre by half the toggle. */
.ast-header-break-point .soma-identity__rule { display: block; }
.ast-header-break-point .soma-identity__mark { display: inline; }
.ast-header-break-point .ast-mobile-header-wrap .ast-builder-grid-row-has-sides {
  grid-template-columns: 1fr auto 1fr;
}
.ast-header-break-point .ast-mobile-header-wrap .site-header-primary-section-left {
  grid-column: 2; justify-content: center; min-width: 0;
}
.ast-header-break-point .ast-mobile-header-wrap .site-header-primary-section-right {
  grid-column: 3; justify-content: flex-end;
}
/* The lockup is one link, so it must not break across lines at 390. */
.ast-header-break-point .site-branding .custom-logo-link { flex-wrap: nowrap; gap: 10px; }
.ast-header-break-point .soma-identity__mark { letter-spacing: .18em; }

/* Keep the primary row on one line for as long as possible. */
.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link { padding: 10px 12px; }
.ast-builder-menu-1 .main-navigation { margin-right: 4px; }
.site-header .ast-search-menu-icon.ast-inline-search .search-field { width: clamp(9rem, 14vw, 15rem); padding: 11px 18px; font-size: var(--soma-t-small); }
.site-header .ast-builder-layout-element { padding-left: 6px; padding-right: 6px; }

/* Astra's header search slides open from an icon. The design shows the field
   itself, so it is held open and the icon becomes the submit affordance. */
.site-header .ast-search-menu-icon.slide-search { position: relative; width: auto; }
.site-header .ast-search-menu-icon.slide-search .search-form {
  position: static; opacity: 1; visibility: visible; transform: none;
  width: auto; padding: 0; background: transparent; box-shadow: none; border: 0;
}
.site-header .ast-search-menu-icon.slide-search .search-field {
  width: clamp(9rem, 14vw, 15rem); height: 44px;
  padding: 0 18px;
  border: 0; border-radius: var(--soma-r-pill);
  background: var(--soma-base); color: var(--soma-primary);
  font-family: var(--soma-font-body); font-size: var(--soma-t-small); font-weight: 400;
  transition: background var(--soma-dur-btn) ease;
}
.site-header .ast-search-menu-icon.slide-search .search-field::placeholder { color: var(--soma-text); opacity: 1; }
.site-header .ast-search-menu-icon.slide-search .search-field:focus { background: var(--soma-periwinkle); outline: none; }
.site-header .ast-search-menu-icon.slide-search .search-submit { display: none; }
.site-header .ast-search-menu-icon.slide-search .slide-search.astra-search-icon { display: none; }

/* A block with nothing in it yet says so in one quiet line, not a box. */
.soma-quiet { margin: 0; font-size: var(--soma-t-small); line-height: 1.7; color: var(--soma-text); opacity: .85; }
.soma-section--dark .soma-quiet, .soma-band--dark .soma-quiet { color: var(--soma-white-70); }

/* A shortcode drawing its own section still stacks like a template one. */
.soma-sc-section { display: flex; flex-direction: column; gap: 32px; }
/* A shortcode widget dropped into an Elementor flex container takes the row. */
.elementor-widget-shortcode { width: 100%; }

/* =====================================================================
   Header fixes
   ===================================================================== */

/* `overflow-x: hidden` on <body> makes it the scroll container, which is what
   silently breaks `position: sticky` on the header. `clip` hides the overflow
   without creating a scroller, so the header sticks. */
html { overflow-x: clip; }
body { overflow-x: clip; overflow-y: visible; }

/* The wordmark keeps its own proportions. Astra sizes the logo from the
   customiser and the branding column was letting it squash to a sliver. */
.site-header .site-branding { flex-shrink: 0; }
.site-header .site-logo-img { flex-shrink: 0; padding-right: 0; }
.site-header .custom-logo-link,
.site-footer .custom-logo-link { display: inline-flex; align-items: center; }
.site-header .custom-logo-link img.custom-logo {
  height: 24px !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain;
}

/* Astra's back-to-top button, in SOMA's colours rather than its own blue. */
#ast-scroll-top {
  background: var(--soma-primary);
  color: var(--soma-white);
  border-radius: var(--soma-r-pill);
  width: 40px; height: 40px;
  line-height: 40px;
  font-size: 14px;
  box-shadow: 0 10px 24px var(--soma-shadow);
  transition: background var(--soma-dur-btn) ease, transform var(--soma-dur-btn) ease;
}
#ast-scroll-top:hover { background: var(--soma-secondary); color: var(--soma-white); transform: translateY(-2px); }

/* =====================================================================
   Site footer
   ===================================================================== */
.soma-footer {
  display: flex; flex-direction: column; gap: clamp(2.5rem, 1.6rem + 2.4vw, 4rem);
  /* The sign-up strip is the first thing in the band and is a card in its own
     right, so the footer needs less padding above it than it did when a bare
     heading opened the block. */
  padding: clamp(2rem, 1.4rem + 1.8vw, 3rem) var(--soma-gutter) clamp(2rem, 1.4rem + 1.8vw, 3rem);
  background: var(--soma-primary); color: var(--soma-white);
  font-family: var(--soma-font-body); font-weight: 400;
}
.soma-footer a { color: var(--soma-white-70); }
.soma-footer a:hover { color: var(--soma-white); }

.soma-footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: clamp(2rem, 1rem + 3vw, 4rem); }
.soma-footer__brand { display: flex; flex-direction: column; gap: 18px; max-width: 400px; flex: 1 1 280px; }
.soma-footer__identity { display: flex; align-items: center; gap: 14px; }
.soma-footer__logo { height: 24px !important; width: auto !important; max-width: none !important; display: block; }
.soma-footer__rule { display: block; width: 1px; height: 16px; background: var(--soma-line-inverse); }
.soma-footer__mark { font-size: var(--soma-t-label); letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: var(--soma-white); }
.soma-footer__line { margin: 0; font-family: var(--soma-font-display); font-size: var(--soma-t-h4); font-weight: 600; line-height: 1.25; color: var(--soma-white); }
.soma-footer__blurb { margin: 0; font-size: var(--soma-t-small); line-height: 1.75; color: var(--soma-white-70); }
.soma-footer__social { display: flex; gap: 10px; }
.soma-footer__social-link {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--soma-r-pill);
  border: 1px solid var(--soma-line-inverse); color: var(--soma-white);
  transition: background var(--soma-dur-btn) ease;
}
.soma-footer__social-link:hover { background: var(--soma-white-12); color: var(--soma-white); }

.soma-footer__columns { display: flex; flex-wrap: wrap; gap: clamp(1.75rem, 1rem + 2.4vw, 3.5rem); }
.soma-footer__column { display: flex; flex-direction: column; gap: 12px; font-size: var(--soma-t-small); }
.soma-footer__heading { font-size: var(--soma-t-label); letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--soma-periwinkle); }
.soma-footer__where { display: flex; flex-direction: column; gap: 12px; font-size: var(--soma-t-small); max-width: 260px; }
.soma-footer__where-text { margin: 0; line-height: 1.7; color: var(--soma-white-70); }
.soma-footer__where-text a { color: var(--soma-white); border-bottom: 1px solid var(--soma-line-inverse); }
.soma-footer__where-text a:hover { color: var(--soma-periwinkle); border-bottom-color: var(--soma-periwinkle); }

.soma-footer__signup {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px clamp(1.5rem, 1rem + 2vw, 3rem);
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem) clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  border-radius: var(--soma-r-lg); background: var(--soma-white-12);
}
.soma-footer__signup-text { display: flex; flex-direction: column; gap: 6px; max-width: 520px; }
.soma-footer__signup-title { font-family: var(--soma-font-display); font-size: var(--soma-t-h3); font-weight: 600; line-height: 1.15; color: var(--soma-white); }
.soma-footer__signup-line { font-size: var(--soma-t-small); line-height: 1.7; color: var(--soma-white-70); }
.soma-footer__form { display: flex; flex-wrap: wrap; gap: 12px; flex: 1 1 320px; max-width: 520px; }
.soma-footer__field {
  flex: 1 1 200px; padding: 15px 20px;
  border: 1px solid var(--soma-line-inverse); border-radius: var(--soma-r-pill);
  background: var(--soma-primary-deep); color: var(--soma-white);
  font-family: var(--soma-font-body); font-size: var(--soma-t-body); font-weight: 400; outline: none;
}
.soma-footer__field::placeholder { color: var(--soma-white-50); }
.soma-footer__field:focus { border-color: var(--soma-periwinkle); }
.soma-footer__form .soma-btn { white-space: nowrap; }

.soma-footer__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px;
  padding-top: 24px; border-top: 1px solid var(--soma-line-inverse);
  font-size: var(--soma-t-label); color: var(--soma-white-50);
}
.soma-footer__legal-links { display: flex; flex-wrap: wrap; gap: 14px 24px; list-style: none; margin: 0; padding: 0; }
.soma-footer__legal-links li { list-style: none; }
.soma-footer__legal a { color: var(--soma-white-50); }
.soma-footer__legal a:hover { color: var(--soma-white); }

/* The footer reads in one order at every width: the Thread by SOMA strip,
   then brand, link columns, centres, and the legal bar. That is the order the
   markup is in, so nothing here reorders anything -- no `order`, no
   `display: contents`, no absolute positioning. */
@media (max-width: 860px) {
  .soma-footer { gap: 2.25rem; }
  .soma-footer__top { gap: 2.25rem; }
  .soma-footer__brand   { max-width: none; }
  .soma-footer__where    { max-width: none; }
  .soma-footer__columns { gap: 2rem 3rem; }
}

/* The header spans the page with the SOMA gutter, as designed — Astra's
   1200px container was squeezing the primary menu onto two lines. */
.site-header .ast-primary-header-bar > .ast-container,
.site-header .ast-above-header-bar > .ast-container,
.site-header .ast-below-header-bar > .ast-container {
  max-width: 100%;
  padding-left: var(--soma-gutter);
  padding-right: var(--soma-gutter);
}
.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link { padding: 10px 11px; }


/* Astra styles form fields globally; the footer's sits on indigo. */
.soma-footer input[type="email"].soma-footer__field,
.soma-footer input.soma-footer__field {
  background: var(--soma-primary-deep);
  color: var(--soma-white);
  border: 1px solid var(--soma-line-inverse);
  border-radius: var(--soma-r-pill);
  box-shadow: none;
}
.soma-footer input.soma-footer__field:focus { border-color: var(--soma-periwinkle); background: var(--soma-primary-deep); color: var(--soma-white); }

/* Between Astra's mobile breakpoint and a wide desktop the primary row has to
   give somewhere, or the last menu item drops to a second line. The gutter and
   the search field yield before the navigation does. */
@media (max-width: 1400px) {
  .site-header .ast-primary-header-bar > .ast-container {
    padding-left: clamp(1.25rem, 2.4vw, 2.5rem);
    padding-right: clamp(1.25rem, 2.4vw, 2.5rem);
  }
  .site-header .ast-search-menu-icon.slide-search .search-field { width: clamp(7rem, 11vw, 10.5rem); }
  .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link { padding: 10px 9px; }
  .soma-account-link { padding: 11px 12px; }
  .site-header .ast-builder-layout-element { padding-left: 4px; padding-right: 4px; }
}

/* Placeholders clip cleanly rather than mid-letter. */
.site-header .ast-search-menu-icon.slide-search .search-field,
.soma-search__field { text-overflow: ellipsis; }

/* =====================================================================
   Learn and Programmes: the row is the toggle
   ===================================================================== */

/* Astra opens sub-menus on hover and on its own arrow. Both are switched off
   here so aria-expanded is the only thing that opens a panel. */
.soma-nav-item > .sub-menu { display: none; }
.ast-desktop .ast-builder-menu-1 .soma-nav-item:hover > .sub-menu,
.ast-desktop .ast-builder-menu-1 .soma-nav-item.focus > .sub-menu { display: none; }
.soma-nav-item.soma-nav-open > .sub-menu { display: block; }
.ast-desktop .ast-builder-menu-1 .soma-nav-item.soma-nav-open > .sub-menu { display: block; opacity: 1; visibility: visible; }

/* The button has to sit in the row exactly where the link did. */
.soma-nav-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--soma-font-body); font-size: 1rem; font-weight: 500;
  color: var(--soma-primary); text-align: left;
  border-radius: var(--soma-r-pill);
  transition: background var(--soma-dur-btn) ease;
}
.ast-builder-menu-1 .main-header-menu > .soma-nav-item > .soma-nav-toggle { padding: 10px 11px; }
.soma-nav-toggle:hover,
.soma-nav-item.soma-nav-open > .soma-nav-toggle { background: var(--soma-base); color: var(--soma-primary); }
.soma-nav-toggle:focus-visible { outline: 2px solid var(--soma-secondary); outline-offset: 2px; }
.soma-nav-chevron { flex-shrink: 0; transition: transform var(--soma-dur-btn) ease; }
.soma-nav-item.soma-nav-open > .soma-nav-toggle .soma-nav-chevron { transform: rotate(180deg); }

/* The dropdown panel. */
.ast-desktop .ast-builder-menu-1 .soma-nav-item > .sub-menu {
  border: 0; border-radius: var(--soma-r-md); padding: 10px;
  background: var(--soma-white); box-shadow: 0 22px 48px rgba(19,21,39,.16);
  min-width: 230px;
}
.ast-desktop .ast-builder-menu-1 .soma-nav-item > .sub-menu > li > .menu-link {
  border-radius: var(--soma-r-sm); padding: 12px 14px; border-bottom: 0;
  font-family: var(--soma-font-body); font-size: 1rem; font-weight: 500;
  color: var(--soma-primary);
}
.ast-desktop .ast-builder-menu-1 .soma-nav-item > .sub-menu > li > .menu-link:hover,
.ast-desktop .ast-builder-menu-1 .soma-nav-item > .sub-menu > li > .menu-link:focus-visible {
  background: var(--soma-base); color: var(--soma-secondary);
}

/* Off-canvas: the parents are accordion rows that expand in place. */
.ast-mobile-popup-drawer .soma-nav-item > .soma-nav-toggle,
.ast-header-break-point .soma-nav-item > .soma-nav-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; min-height: 48px; padding: 0 16px;
  font-size: 1rem;
}
.ast-mobile-popup-drawer .soma-nav-item > .sub-menu,
.ast-header-break-point .soma-nav-item > .sub-menu {
  position: static; width: 100%; box-shadow: none; background: transparent;
  padding: 4px 0 8px; min-width: 0;
}
.ast-mobile-popup-drawer .soma-nav-item > .sub-menu > li > .menu-link,
.ast-header-break-point .soma-nav-item > .sub-menu > li > .menu-link {
  display: flex; align-items: center; min-height: 44px;
  padding: 0 16px 0 32px; border-bottom: 0;
  font-family: var(--soma-font-body); font-size: 1rem; font-weight: 500;
  color: var(--soma-primary);
}
.ast-mobile-popup-drawer .soma-nav-item > .sub-menu > li > .menu-link:hover,
.ast-header-break-point .soma-nav-item > .sub-menu > li > .menu-link:hover { color: var(--soma-secondary); }


/* --- The home hero ----------------------------------------------------
   One indigo band. The looping figure sits behind it on the right, the copy
   reads over the empty indigo on the left, and a gradient keeps the text
   legible wherever the video happens to be bright. The video element ships
   with no sources: soma-ui.js attaches them once the page is interactive, so
   first paint costs the poster and nothing else. */
/* The first screen has to carry a way in, not just a claim. At 1440x900 the
   headline alone used to run to 490px and pushed the standfirst, both buttons
   and the three chips below the fold, so the opening offered an assertion and
   nothing to do about it. The min-height, the top padding and the headline
   size are all sized to fit chip, headline, standfirst, buttons and chips
   inside 900px. */
.soma-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  min-height: min(76vh, 680px);
  padding: clamp(2.5rem, 1.75rem + 3vw, 4.25rem) var(--soma-gutter) clamp(3.5rem, 2.5rem + 4vw, 5.5rem);
  background: var(--soma-primary);
  color: var(--soma-white);
}
/* One <picture>: the band's backdrop on desktop and tablet, the rounded card in
   the copy flow below 768. The still's own background is the indigo token, so
   the edges of the image are invisible against the band. */
.soma-hero__still { position: absolute; inset: 0; z-index: -2; display: block; }
/* Astra sets `img { height: auto }` with enough weight to beat a single class,
   so the height here needs the extra specificity or the still letterboxes and
   object-fit never gets a box to cover. */
.soma-hero .soma-hero__still img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 78% center;
}
/* The indigo wash: opaque under the copy, clear over the figure. */
.soma-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, var(--soma-primary) 0%, var(--soma-primary) 30%, rgba(19,21,39,.82) 48%, rgba(19,21,39,.35) 66%, rgba(19,21,39,.15) 100%),
    linear-gradient(0deg, var(--soma-primary) 0%, rgba(19,21,39,0) 28%);
}
.soma-hero__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--soma-gap-lg); align-items: center;
}
.soma-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-width: 640px; }
.soma-hero__chip {
  display: inline-flex; align-items: center; width: fit-content;
  padding: 8px 16px; border-radius: var(--soma-r-pill);
  background: var(--soma-white-12); color: var(--soma-periwinkle);
  font-size: var(--soma-t-label); font-weight: 600;
  letter-spacing: var(--soma-ls-label); text-transform: uppercase;
}
/* Its own clamp rather than --soma-t-hero. That token also sizes `.soma-page h1`
   on every page of the site, so reducing it there would resize every heading
   to fix one hero. Scoped here, the blast radius is the home page. */
.soma-hero__title {
  margin: 0; font-family: var(--soma-font-display); font-weight: 600;
  /* The maximum comes down from 5rem; the minimum is deliberately the original
     2.375rem. Only the desktop end was overflowing, and phones have headroom to
     spare once the figure is ordered below the chips, so shrinking the small
     end would cost presence to fix a problem it does not have. */
  font-size: clamp(2.375rem, 1.05rem + 3.4vw, 3.5rem); line-height: 1.04; letter-spacing: -.01em;
  color: var(--soma-white); max-width: 18ch;
}
.soma-hero__lead {
  margin: 0; max-width: 54ch;
  font-size: var(--soma-t-lead); line-height: var(--soma-lh-lead);
  color: var(--soma-white-70); font-weight: 400;
}
.soma-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.soma-hero__cta { white-space: nowrap; }
.soma-btn--ghost {
  background: transparent; color: var(--soma-white);
  border: 1.5px solid var(--soma-line-inverse);
}
.soma-btn--ghost:hover, .soma-btn--ghost:focus-visible {
  background: var(--soma-white-12); color: var(--soma-white); border-color: var(--soma-periwinkle);
}
.soma-hero__features { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; padding: 0; list-style: none; }
.soma-hero__feature { display: inline-flex; align-items: center; gap: 9px; list-style: none; font-size: var(--soma-t-small); color: var(--soma-white-70); }
.soma-hero__feature .soma-i { color: var(--soma-periwinkle); flex: 0 0 auto; }

/* The figure column is an empty box: it only gives the nodes something to be
   positioned against, since the picture itself is the background video. */
.soma-hero__figure { position: relative; align-self: stretch; min-height: 520px; }
.soma-hero__nodes { position: absolute; inset: 0; }
/* Every label reads inward from its dot, and the coordinate is the dot rather
   than the middle of the node. Labels running outward instead were clipped by
   the band's own overflow once they reached the right edge, which cost the two
   longest field names their last few words. */
.soma-hero__node {
  position: absolute; display: flex; align-items: center; gap: 10px;
  flex-direction: row-reverse; transform: translate(calc(-100% + 5px), -50%);
  color: var(--soma-white);
}
.soma-hero__node-dot {
  width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%;
  background: var(--soma-secondary);
  /* The inner dark ring is not decoration. The dots now sit on the anatomy
     each pillar names, which put most of them on the brightest cyan in the
     picture, and a teal dot on teal glow disappears. This separates them
     from whatever they land on; the soft outer ring is the original halo. */
  box-shadow: 0 0 0 2px rgba(11,16,32,.78), 0 0 0 6px rgba(13,124,104,.28);
  transition: box-shadow var(--soma-dur-btn) ease, background var(--soma-dur-btn) ease;
}
.soma-hero__node-line { width: 34px; height: 1px; flex: 0 0 auto; background: var(--soma-line-inverse); }
/* Wide viewports only, and only when the geometry allows it: soma-ui.js
   gives the node an explicit width - from where the label starts to its
   dot - and the leader line absorbs the slack. That right-aligns every
   label on one edge in the channel beside the figure, so none of them sits
   on the body. The horizontal half of the transform goes with it, since the
   node is now placed by its own left edge rather than pinned by its dot. */
.soma-hero .soma-hero__node--anchored { transform: translateY(-50%); }
.soma-hero .soma-hero__node--anchored .soma-hero__node-line { flex: 1 1 auto; width: auto; min-width: 24px; }
/* One child since the field numbers were removed; the gap and row-reverse are
   kept so a second element can be added back without re-deriving the layout. */
.soma-hero__node-text { display: flex; flex-direction: row-reverse; align-items: baseline; gap: 8px; white-space: nowrap; }
.soma-hero__node-label {
  font-family: var(--soma-font-body); font-size: 13px; font-weight: 600;
  letter-spacing: var(--soma-ls-tight); text-transform: uppercase;
  color: var(--soma-white-70); border-bottom: 1px solid transparent;
}
.soma-hero__node:hover .soma-hero__node-dot,
.soma-hero__node:focus-visible .soma-hero__node-dot { background: var(--soma-periwinkle); box-shadow: 0 0 0 2px rgba(11,16,32,.78), 0 0 0 8px rgba(204,213,255,.3); }
.soma-hero__node:hover .soma-hero__node-label,
.soma-hero__node:focus-visible .soma-hero__node-label { color: var(--soma-white); border-bottom-color: var(--soma-periwinkle); }
.soma-hero__node:focus-visible { outline: 2px solid var(--soma-periwinkle); outline-offset: 6px; border-radius: var(--soma-r-sm); }

/* Scroll cue. */
.soma-hero__scroll {
  position: absolute; left: 50%; bottom: clamp(1.25rem, .5rem + 1.6vw, 2rem); transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: var(--soma-t-label); font-weight: 600;
  letter-spacing: var(--soma-ls-label); text-transform: uppercase; color: var(--soma-white-50);
}
.soma-hero__scroll:hover, .soma-hero__scroll:focus-visible { color: var(--soma-white); }
.soma-hero__scroll-arrow { display: inline-flex; transform: rotate(90deg); animation: soma-nudge 3s var(--soma-ease) infinite; }
@keyframes soma-nudge {
  0%, 82%, 100% { transform: rotate(90deg) translateX(0); }
  88% { transform: rotate(90deg) translateX(5px); }
  94% { transform: rotate(90deg) translateX(0); }
}

/* The mobile-only field chips stay out of the way until the layout stacks. */
.soma-hero__jump { display: none; }

/* Tablet keeps the video and the figure; the panel leaves the corner and sits
   in the flow under the buttons, where there is room for it. */
@media (max-width: 1100px) {
  .soma-hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .soma-hero__figure { min-height: 440px; }
  .soma-hero__node-label { font-size: 12px; }
  .soma-hero__node-line { width: 22px; }
  /* The figure sits in the right column here, beside the copy, so "centred"
     means centred in that column - not in the viewport, which would put the
     body behind the headline. The trunk midline is at 73% of the wide asset;
     cover scales it by height, and 69% lands that midline within 8px of the
     figure column's centre at 768, 834 and 1024. Viewport centring is not
     reachable at all above about 810px: it would need object-position past
     100%, i.e. beyond the right edge of the image.
     Keeping 69% rather than going lower also keeps the outstretched hand,
     which ends at 83.5% of the asset, inside the crop at every width here.
     soma-ui.js reads object-position when it maps the dots, so they follow. */
  .soma-hero .soma-hero__still img { object-position: 69% center; }
}
@media (max-width: 900px) {
  .soma-hero__figure { min-height: 380px; }
  .soma-hero__node-line { width: 14px; }
  .soma-hero__node-label { font-size: 11px; letter-spacing: .08em; }
}
/* The copy column and the figure column get close enough below 1100 that a
   long label, which reads leftward from its dot, lands on the lead paragraph.
   Insetting the node layer moves every dot further right without touching the
   per-node percentages, and the labels follow. */
@media (max-width: 1100px) {
  .soma-hero__nodes { left: 30%; }
}
@media (max-width: 900px) {
  .soma-hero__nodes { left: 42%; }
}

@media (max-width: 767px) {
  .soma-hero { min-height: 0; }
  .soma-hero::before { background: linear-gradient(180deg, var(--soma-primary) 0%, rgba(19,21,39,.92) 100%); }
  .soma-hero__inner { grid-template-columns: 1fr; gap: var(--soma-gap); }
  .soma-hero__figure { display: none; }
  .soma-hero__copy { max-width: none; gap: 16px; }
  .soma-hero__title { max-width: none; }
  /* The band's ::before wash sits at z-index -1 and the still carries z-index -2
     from its desktop role as the backdrop, so on mobile the card was painting
     underneath the wash and reading as a solid dark block. In the phone layout
     the card is content, not backdrop, so it belongs above it. */
  .soma-hero__still {
    position: relative; z-index: 1; display: block; width: 100%;
    border-radius: var(--soma-r-lg); overflow: hidden; background: var(--soma-primary-deep);
    /* Words first on a phone. In source order the card sits between the
       standfirst and the buttons, and at 300px tall it pushed both CTAs and
       the three chips off the first screen, so the opening read as a claim
       with no way in. Ordered after the chips instead, at full size: the
       figure is the first thing met on scroll rather than a smudge above the
       fold. Shrinking it was the alternative and was rejected, because the
       phone crop is already a 5.4x downscale and loses its detail. */
    order: 1;
  }
  /* The field chip row follows the figure, so source order is preserved for
     everything the flex order does not explicitly move. */
  .soma-hero__jump { order: 2; }
  /* Height follows the image, it is not pinned.

     This was height: 300px with object-position 50% 50%, and it cropped the
     head on every phone wider than about 370px. The card's width follows the
     viewport while its height did not, so cover overflowed further the wider
     the phone got - 14px at 390, 47px at 430 - and centring the crop took half
     of that off the top, which is where the head is. It looked fine at 360 and
     failed everywhere above it.

     height: auto lets the image keep its own ratio, so on any real phone there
     is no crop at all. No ratio is written down here: the img sizes itself, so
     replacing the phone asset with one of different proportions needs no edit.
     max-height only bites above a card width of about 425px - a tablet held in
     portrait, not a phone - and object-position pins the crop to the top so
     what goes is the ground beneath the feet, never the head. */
  /* Centred on the body, not on the file.

     The phone asset is 1000x893 and the figure is not in the middle of it:
     head and legs both put the trunk midline at 54.3% of the width. At
     width:100% the whole file is shown, so there is no overflow for
     object-position to pan into and the body sat about 16px right of the
     card's centre on a 390 phone - small, but visible against a rounded
     card with symmetrical padding.

     So the image is widened past the card and pulled left instead. The
     arithmetic, with f = 0.543 the body's fraction of the file:
       width  k  must be >= 0.5 / (1 - f) = 1.094 for the right edge still to
                 reach the card; 1.10 leaves only about 1px of it, which is
                 inside sub-pixel rounding, so 1.12 is used instead
       margin    0.5 - f * k = -0.1082
     which lands the body exactly on the card's centre line and crops 8.8%
     off the left of the file - empty background, the figure starts at 37% -
     and 0.25% off the right. Both are percentages of the card, so this holds
     at every phone width without a breakpoint.

     max-width:none is load-bearing: the theme's global img rule would
     otherwise clamp the 110% straight back to 100%. */
  .soma-hero .soma-hero__still img {
    display: block; width: 112%; max-width: none; margin-left: -10.82%;
    height: auto; max-height: 380px;
    object-fit: cover; object-position: 50% 0;
  }
  .soma-hero__jump { display: flex; flex-wrap: wrap; gap: 8px; }
  .soma-hero__jump-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px; border-radius: var(--soma-r-pill);
    background: var(--soma-white-12); color: var(--soma-white);
    font-size: 12px; font-weight: 600; letter-spacing: var(--soma-ls-tight); text-transform: uppercase;
  }
  .soma-hero__jump-chip:hover, .soma-hero__jump-chip:focus-visible { background: var(--soma-periwinkle); color: var(--soma-primary); }
  .soma-hero__scroll { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .soma-hero__scroll-arrow { animation: none; }
}

/* --- Episodes --------------------------------------------------------- */
.soma-eps { display: flex; flex-wrap: wrap; gap: var(--soma-gap); }
.soma-eps__more { margin-top: 12px; }

.soma-ep {
  display: flex; flex-direction: column; flex: 1 1 clamp(16rem, 30%, 22rem);
  border-radius: var(--soma-r-lg); overflow: hidden;
  background: var(--soma-white); color: var(--soma-primary);
}
.soma-ep:hover { color: var(--soma-primary); }
.soma-ep__still { position: relative; display: flex; aspect-ratio: 16 / 9; overflow: hidden; background: var(--soma-primary); }
.soma-ep__still img { width: 100%; height: 100%; object-fit: cover; display: block; }
.soma-ep__still--empty { background: var(--soma-primary); }
.soma-ep__play {
  position: absolute; inset: 0; margin: auto;
  display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: var(--soma-r-pill);
  background: rgba(19, 21, 39, .62); color: var(--soma-white);
  transition: background var(--soma-dur-btn) ease, transform var(--soma-dur-btn) ease;
}
.soma-ep:hover .soma-ep__play { background: var(--soma-secondary); transform: scale(1.06); }
.soma-ep__body { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px 26px; }
.soma-ep__title { font-family: var(--soma-font-display); font-size: var(--soma-t-h4); font-weight: 600; line-height: 1.2; color: var(--soma-primary); }
.soma-ep__facts { font-size: var(--soma-t-small); color: var(--soma-text); }

/* The newest conversation gets the wide treatment. */
.soma-ep--featured { flex-direction: row; flex-basis: 100%; }
.soma-ep--featured .soma-ep__still { width: 58%; flex-shrink: 0; aspect-ratio: 16 / 9; }
.soma-ep--featured .soma-ep__body { justify-content: center; gap: 12px; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.soma-ep--featured .soma-ep__title { font-size: var(--soma-t-h3); line-height: 1.15; }
.soma-ep--featured .soma-ep__play { width: 68px; height: 68px; }
@media (max-width: 860px) {
  .soma-ep--featured { flex-direction: column; }
  .soma-ep--featured .soma-ep__still { width: 100%; }
}

/* The player facade: the still, with the play control over it. */
.soma-embed--facade { position: relative; cursor: pointer; }
.soma-embed__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.soma-embed__play {
  position: absolute; inset: 0; margin: auto;
  display: flex; align-items: center; justify-content: center;
  width: 76px; height: 76px; padding: 0;
  border: 0; border-radius: var(--soma-r-pill); cursor: pointer;
  background: rgba(19, 21, 39, .62); color: var(--soma-white);
  transition: background var(--soma-dur-btn) ease, transform var(--soma-dur-btn) ease;
}
.soma-embed--facade:hover .soma-embed__play { background: var(--soma-secondary); transform: scale(1.05); }
.soma-embed__play:focus-visible { outline: 2px solid var(--soma-periwinkle); outline-offset: 3px; }
.soma-embed__play-mark { display: flex; margin-left: 4px; }
@media (prefers-reduced-motion: reduce) {
  .soma-ep:hover .soma-ep__play,
  .soma-embed--facade:hover .soma-embed__play { transform: none; }
}

/* --- Show notes and chapters ------------------------------------------ */
.soma-notes .soma-prose { gap: 14px; }
.soma-chapters-list { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 0; padding: 0; list-style: none; counter-reset: none; }
.soma-chapter-row { list-style: none; margin: 0; }
.soma-chapter-seek {
  display: flex; align-items: baseline; gap: 14px; width: 100%;
  padding: 9px 12px; margin: 0;
  border: 0; border-radius: var(--soma-r-sm); background: transparent;
  font-family: var(--soma-font-body); font-size: var(--soma-t-small);
  line-height: 1.6; color: var(--soma-text); text-align: left; cursor: pointer;
  transition: background var(--soma-dur-btn) ease, color var(--soma-dur-btn) ease;
}
.soma-chapter-seek:hover { background: var(--soma-white); color: var(--soma-primary); }
.soma-section--white .soma-chapter-seek:hover { background: var(--soma-base); }
.soma-chapter-seek:focus-visible { outline: 2px solid var(--soma-secondary); outline-offset: 1px; }
.soma-chapter-stamp {
  flex-shrink: 0; min-width: 3.5rem;
  font-variant-numeric: tabular-nums; font-weight: 600;
  color: var(--soma-secondary);
}
.soma-chapter-seek:hover .soma-chapter-stamp { color: var(--soma-secondary-deep); }
.soma-chapter-label { flex: 1; }

/* A YouTube still is 16:9 and its faces and titles run to the edges, so every
   frame that shows one keeps that ratio at every width rather than cropping to
   a fixed height. */
.soma-ep__still,
.soma-feature__media,
.soma-embed { aspect-ratio: 16 / 9; height: auto; }
.soma-ep__still img,
.soma-feature__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* The wide card keeps the still whole beside the text, and the two halves stay
   in step as the card narrows. */
.soma-ep--featured { align-items: stretch; }
.soma-ep--featured .soma-ep__still { width: 58%; align-self: stretch; aspect-ratio: 16 / 9; }
@media (max-width: 860px) {
  .soma-ep--featured .soma-ep__still { width: 100%; aspect-ratio: 16 / 9; }
}

/* The mobile trigger, as the design draws it: a dark pill, not Astra's blue. */
.site-header .menu-toggle.main-header-menu-toggle {
  background: var(--soma-primary);
  color: var(--soma-white);
  border-radius: var(--soma-r-pill);
  padding: 0 14px;
  min-width: 44px; height: 44px;
}
.site-header .menu-toggle.main-header-menu-toggle:hover,
.site-header .menu-toggle.main-header-menu-toggle:focus { background: var(--soma-primary-deep); color: var(--soma-white); }
.site-header .menu-toggle.main-header-menu-toggle svg,
.site-header .menu-toggle.main-header-menu-toggle .ast-mobile-svg { fill: var(--soma-white); color: var(--soma-white); }
.ast-mobile-popup-drawer .menu-toggle-close { color: var(--soma-primary); }

/* =====================================================================
   Nav toggles: no ambient button shadow
   ===================================================================== */

/* Learn and Programmes are real <button>s, so any stylesheet that decorates
   bare buttons reaches them and paints a faint pill-shaped shadow behind a
   closed toggle. The panel itself is display:none when closed and cannot be
   the source. Zero it explicitly and let the open/hover background and the
   focus outline be the only visible states. */
.soma-nav-toggle,
.soma-nav-toggle:hover,
.soma-nav-toggle:focus,
.soma-nav-toggle:active,
.soma-nav-item.soma-nav-open > .soma-nav-toggle { box-shadow: none; }

/* =====================================================================
   Search page
   ===================================================================== */

/* The "Or enter through a field" band is a way back in when a search comes up
   empty, so it only earns its place when there is nothing above it. */
body.soma-search-has-results #soma-search-fallback { display: none; }

/* =====================================================================
   Thread by SOMA sign-up (WPForms)
   ===================================================================== */

/* WPForms' modern markup is driven entirely by custom properties, so the skin
   is mostly a matter of handing it the SOMA tokens. The light values match the
   design's field-box and button-primary; the footer strip overrides them for
   the dark band it sits in. */
.soma-form-slot .wpforms-container { margin: 0; padding: 0; }
.soma-form-slot .wpforms-container-full {
  --wpforms-field-border-radius: var(--soma-r-md);
  --wpforms-field-border-style: solid;
  --wpforms-field-border-size: 1.5px;
  --wpforms-field-border-color: var(--soma-line);
  --wpforms-field-background-color: var(--soma-white);
  --wpforms-field-text-color: var(--soma-primary);
  --wpforms-field-size-input-height: 54px;
  --wpforms-field-size-padding-h: 18px;
  --wpforms-field-size-font-size: 16px;
  --wpforms-field-size-input-spacing: 8px;
  --wpforms-label-color: var(--soma-primary);
  --wpforms-label-size-font-size: 14px;
  --wpforms-label-size-line-height: 1.3;
  --wpforms-label-error-color: #B3261E;
  --wpforms-button-border-radius: var(--soma-r-pill);
  --wpforms-button-border-size: 0;
  --wpforms-button-border-style: none;
  --wpforms-button-background-color: var(--soma-secondary);
  --wpforms-button-text-color: var(--soma-white);
  --wpforms-button-size-height: 54px;
  --wpforms-button-size-padding-h: 30px;
  --wpforms-button-size-font-size: 16px;
  --wpforms-button-size-margin-top: 14px;
}
.soma-form-slot .wpforms-form,
.soma-form-slot .wpforms-form input,
.soma-form-slot .wpforms-form button { font-family: var(--soma-font-body); }
.soma-form-slot .wpforms-form input[type="email"] { font-weight: 400; }
.soma-form-slot .wpforms-container-full .wpforms-field-label { font-weight: 600; }
/* One required field and a required input: the asterisk is noise. On the
   contact form, with three fields, the marker earns its place. */
.soma-signup-slot .wpforms-required-label { display: none; }
.soma-form-slot .wpforms-form input[type="email"]::placeholder { color: rgba(19,21,39,.45); opacity: 1; }
.soma-form-slot .wpforms-form input[type="email"]:focus { border-color: var(--soma-secondary); }
.soma-form-slot .wpforms-container-full button[type="submit"] {
  font-weight: 600; transition: background var(--soma-dur-btn) ease, transform var(--soma-dur-btn) ease;
}
.soma-form-slot .wpforms-container-full button[type="submit"]:hover,
.soma-form-slot .wpforms-container-full button[type="submit"]:active {
  background: var(--soma-secondary-deep); transform: translate3d(0, -2px, 0);
}
.soma-form-slot .wpforms-confirmation-container-full {
  margin: 0; padding: 0; background: none; border: 0;
  font-size: var(--soma-t-body); line-height: var(--soma-lh-body); color: var(--soma-text);
}

/* The footer strip: dark band, label carried by the placeholder, field and
   button side by side the way the hand-built form sat. */
.soma-signup-slot--footer { flex: 1 1 320px; max-width: 520px; }
.soma-signup-slot--footer .wpforms-container-full {
  --wpforms-field-background-color: var(--soma-primary-deep);
  --wpforms-field-border-color: var(--soma-line-inverse);
  --wpforms-field-border-size: 1px;
  --wpforms-field-border-radius: var(--soma-r-pill);
  --wpforms-field-text-color: var(--soma-white);
  --wpforms-button-size-margin-top: 0;
}
/* One row: the field grows, the button keeps its width, and the two are centred
   on each other. The label is visually hidden rather than removed, so the field
   container is taller than the input alone and aligning to the start left the
   button riding high. */
.soma-signup-slot--footer .wpforms-form {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}
.soma-signup-slot--footer .wpforms-field-container { flex: 1 1 200px; display: flex; align-items: center; }
.soma-signup-slot--footer .wpforms-field-container > .wpforms-field { width: 100%; padding: 0; }
.soma-signup-slot--footer .wpforms-submit-container { flex: 0 0 auto; display: flex; align-items: center; padding: 0; }
.soma-signup-slot--footer .wpforms-field-label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.soma-signup-slot--footer .wpforms-form input[type="email"]::placeholder { color: var(--soma-white-50); }
.soma-signup-slot--footer .wpforms-form input[type="email"]:focus { border-color: var(--soma-periwinkle); }
.soma-signup-slot--footer .wpforms-confirmation-container-full { color: var(--soma-white); }
.soma-signup-slot--footer .wpforms-container-full .wpforms-error { color: var(--soma-periwinkle); }

@media (max-width: 560px) {
  .soma-signup-slot--footer .wpforms-form { flex-direction: column; align-items: stretch; }
  /* flex-basis is measured down the column once the form stacks, so the 200px
     that sizes the field beside the button on desktop becomes 200px of empty
     height under it. */
  .soma-signup-slot--footer .wpforms-field-container { flex: 0 0 auto; }
  .soma-signup-slot--footer .wpforms-submit-container button[type="submit"] { width: 100%; }
}

/* On the newsletter page the strip links up to the form rather than repeating
   it, so the link needs to sit where the form would have. */
.soma-signup-slot__jump { white-space: nowrap; }
.soma-signup-slot--footer .soma-signup-slot__jump { align-self: flex-start; }

/* Astra stretches every primary menu link to the full height of the header bar
   and gives it an 80px line-height. With the pill radius on top, any
   background the link takes -- hover, or the current-section state Learn and
   Programmes hold on their own pages -- paints as a tall ellipse behind the
   word rather than a pill around it. That ellipse is the "halo". Centre the
   links at their own height so the background traces the label. */
.ast-desktop .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link {
  height: auto;
  align-self: center;
  line-height: 1.2;
  padding: 11px 12px;
}

/* --- Empty cover slots -------------------------------------------------
   A book goes up before its artwork does. Rather than a blank rectangle, the
   slot names what belongs in it, the same convention as the home page's book
   panel. A featured image on the entry replaces the label with no other
   change, so nothing here needs revisiting when covers arrive. */
.soma-slot-label {
  display: block; padding: 0 1.25rem; text-align: center; text-wrap: balance;
  font-family: var(--soma-font-body); font-size: var(--soma-t-label); font-weight: 600;
  letter-spacing: var(--soma-ls-tight); text-transform: uppercase;
  color: var(--soma-periwinkle);
}
.soma-featured-book__cover--empty,
.soma-book-hero__cover--empty { align-items: center; justify-content: center; }
.soma-book__cover--empty { align-items: center; justify-content: center; background: var(--soma-primary); }
.soma-book__cover--empty .soma-slot-label { color: var(--soma-periwinkle); }

/* --- Contact: the Academy first, the clinic's addresses named ----------
   The Academy has no teaching address. Its email leads, and the clinical
   centres below it are labelled as the practice's, not the Academy's. */
.soma-contact-academy {
  display: flex; flex-direction: column; gap: 6px;
  padding: 24px 26px; border-radius: var(--soma-r-lg);
  background: var(--soma-primary); color: var(--soma-white);
}
.soma-contact-academy__label {
  font-size: var(--soma-t-label); font-weight: 600;
  letter-spacing: var(--soma-ls-label); text-transform: uppercase; color: var(--soma-periwinkle);
}
.soma-contact-academy__email {
  font-family: var(--soma-font-display); font-size: var(--soma-t-h4); font-weight: 600;
  line-height: 1.2; color: var(--soma-white); word-break: break-word;
}
.soma-contact-academy__email:hover { color: var(--soma-periwinkle); }
.soma-contact-academy__note { font-size: var(--soma-t-small); line-height: 1.6; color: var(--soma-white-70); }
.soma-contact-heading {
  display: block; padding-top: 6px;
  font-size: var(--soma-t-label); font-weight: 600;
  letter-spacing: var(--soma-ls-tight); text-transform: uppercase; color: var(--soma-text);
}

/* --- Section heads always leave room for what follows -------------------
   `soma_section_head()` is a bare block, and a section that simply lists it
   above a card gave the two nothing between them: on the topic hubs at phone
   width the heading sat directly on the programme cover. Sections built from
   flex containers space their own children, so this only applies where the
   head has a sibling and its parent is not already handing out a gap. */
.soma-head:not(:last-child) { margin-bottom: var(--soma-gap); }

/* --- Course covers, labelled like the book covers ----------------------
   A course goes up before its artwork. Same convention as the books: the slot
   names what belongs in it, and a featured image replaces the label with no
   other change. */
.soma-programme__cover--empty,
.soma-card__media--empty,
.soma-feature__media--empty,
.soma-prog__cover--empty { align-items: center; justify-content: center; text-align: center; }
.soma-programme__cover--empty,
.soma-card__media--empty,
.soma-feature__media--empty { background: var(--soma-primary); }
.soma-prog__cover--empty { flex-direction: column; }


/* --- Contact form ------------------------------------------------------
   The same skin as the sign-up, stacked, with the message box sized for a
   real question rather than a line. */
.soma-contact-slot .wpforms-field { padding: 0 0 18px; }
.soma-contact-slot .wpforms-field-container { display: flex; flex-direction: column; }
.soma-form-slot .wpforms-form textarea {
  width: 100%; min-height: 150px; resize: vertical;
  padding: 14px var(--wpforms-field-size-padding-h, 18px);
  font-family: var(--soma-font-body); font-size: 16px; font-weight: 400; line-height: 1.6;
  color: var(--soma-primary); background: var(--soma-white);
  border: 1.5px solid var(--soma-line); border-radius: var(--soma-r-md);
}
.soma-form-slot .wpforms-form textarea:focus { border-color: var(--soma-secondary); outline: none; }
.soma-form-slot .wpforms-form textarea::placeholder,
.soma-form-slot .wpforms-form input[type="text"]::placeholder { color: rgba(19,21,39,.45); opacity: 1; }
.soma-form-slot .wpforms-form input[type="text"] { font-weight: 400; }
.soma-contact-slot .wpforms-required-label { color: var(--soma-secondary); }
.soma-contact-slot .wpforms-submit-container { padding-top: 4px; }

/* A hero chip that leads somewhere reads as a link without becoming a button. */
.soma-hero__feature-link { display: inline-flex; align-items: center; gap: 9px; color: inherit; }
.soma-hero__feature-link:hover,
.soma-hero__feature-link:focus-visible { color: var(--soma-white); }
.soma-hero__feature-link:hover .soma-i,
.soma-hero__feature-link:focus-visible .soma-i { color: var(--soma-white); }

/* The empty state can offer a way on, so the button needs its own room. */
.soma-empty .soma-btn { align-self: flex-start; margin-top: 8px; }

/* --- The /programmes/ ladder ------------------------------------------- */
/* Deep dives are an editorial list, not a card grid. The whole point of the
   arrangement is that a reader scans clinical problems the way they would scan
   a table of contents, so the line carries the weight and the chrome stays out
   of the way. */
.soma-ladder { display: flex; flex-direction: column; gap: var(--soma-gap-lg); }
.soma-ladder__field { display: flex; flex-direction: column; gap: 14px; }
.soma-ladder__head { display: flex; align-items: center; gap: 12px; }
.soma-ladder__icon { display: flex; color: var(--soma-secondary); }
.soma-ladder__name {
  font-family: var(--soma-font-display); font-weight: 600;
  font-size: var(--soma-t-h4); line-height: 1.2; color: var(--soma-primary); margin: 0;
}
.soma-ladder__kicker {
  font-size: var(--soma-t-label); font-weight: 600;
  letter-spacing: var(--soma-ls-label); text-transform: uppercase;
  color: var(--soma-secondary);
}
.soma-dd { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
/* A hairline between items rather than around them: a bordered box per item
   reads as a card, which is the look this list exists to avoid. */
.soma-dd__item {
  display: flex; align-items: baseline; gap: var(--soma-gap);
  padding: 14px 0; border-bottom: 1px solid var(--soma-line);
}
.soma-dd__item:first-child { border-top: 1px solid var(--soma-line); }
.soma-dd__link { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; text-decoration: none; }
.soma-dd__title {
  font-family: var(--soma-font-display); font-weight: 600;
  font-size: var(--soma-t-h4); line-height: 1.25; color: var(--soma-primary);
}
.soma-page a.soma-dd__link:hover .soma-dd__title,
.soma-page a.soma-dd__link:focus-visible .soma-dd__title { color: var(--soma-secondary); }
.soma-dd__line { font-size: var(--soma-t-small); line-height: 1.6; color: var(--soma-text); }
.soma-dd__price {
  flex: 0 0 auto; white-space: nowrap;
  font-size: var(--soma-t-small); font-weight: 600; color: var(--soma-primary);
}
.soma-dd__more {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--soma-t-small); font-weight: 600; color: var(--soma-secondary);
}

/* The sampler band. Full width, and deliberately unlike a programme card so it
   cannot be mistaken for one. */
.soma-sampler__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--soma-gap); padding: 28px 32px;
  background: var(--soma-base); border: 1px solid var(--soma-line);
  border-radius: var(--soma-r-md); text-decoration: none;
}
.soma-sampler__text { display: flex; flex-direction: column; gap: 6px; }
.soma-sampler__title {
  font-family: var(--soma-font-display); font-weight: 600;
  font-size: var(--soma-t-h3); line-height: 1.15; color: var(--soma-primary);
}
.soma-sampler__line { font-size: var(--soma-t-small); line-height: 1.6; color: var(--soma-text); }
.soma-sampler__price {
  flex: 0 0 auto; white-space: nowrap;
  font-size: var(--soma-t-h4); font-weight: 600; color: var(--soma-primary);
}

@media (max-width: 767px) {
  .soma-dd__item { flex-direction: column; align-items: flex-start; gap: 6px; }
  .soma-sampler__inner { flex-direction: column; align-items: flex-start; padding: 22px 20px; }
}

/* --- The deep dive's optional foundation ------------------------------- */
/* Free material sitting above paid material, so it has to read as separate
   from the curriculum without reading as part of the purchase. White ground
   and the teal spine of the callout family, on the base-toned section. */
.soma-foundation {
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px 26px;
  background: var(--soma-white);
  border: 1px solid var(--soma-line);
  border-left: 3px solid var(--soma-secondary);
  border-radius: var(--soma-r-sm);
}
.soma-foundation__eyebrow {
  font-size: var(--soma-t-label); font-weight: 600;
  letter-spacing: var(--soma-ls-label); text-transform: uppercase;
  color: var(--soma-secondary);
}
.soma-foundation__lead { margin: 0; font-size: var(--soma-t-body); line-height: 1.7; color: var(--soma-text); }
.soma-page .soma-foundation__link { font-weight: 600; }
.soma-foundation__meta { margin: 0; font-size: var(--soma-t-small); color: var(--soma-text); }
.soma-foundation__summary {
  cursor: pointer; width: fit-content;
  font-size: var(--soma-t-label); font-weight: 600;
  letter-spacing: var(--soma-ls-tight); text-transform: uppercase;
  color: var(--soma-secondary);
}
.soma-foundation__summary::-webkit-details-marker { display: none; }
.soma-foundation__summary::after { content: " +"; }
.soma-foundation__recap[open] .soma-foundation__summary::after { content: " –"; }
/* Scoped to [open] deliberately. Author CSS beats the UA stylesheet whatever
   the specificity, so a bare `display` here would un-hide the points inside a
   closed <details> in engines that hide them with `display: none`. */
.soma-foundation__recap[open] .soma-foundation__points {
  display: flex; flex-direction: column; gap: 6px;
  margin: 10px 0 0; padding-left: 20px;
}
.soma-foundation__points li { font-size: var(--soma-t-small); line-height: 1.6; color: var(--soma-text); }

@media (max-width: 767px) {
  .soma-foundation { padding: 18px 20px; }
}

/* --- Deep dive discovery surfaces -------------------------------------- */
/* Free surfaces pointing at paid material. All of them are quiet by design:
   no banner, no price, and nothing at all when the Field has no deep dives. */
.soma-dd-band { display: flex; flex-direction: column; gap: 10px; }

/* The single line under a journal article's closing card. A line and not a
   card, so the knowledge check card stays the primary close. */
.soma-dd-aside {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  margin: 14px 0 0; padding: 0;
  font-size: var(--soma-t-small); line-height: 1.6; color: var(--soma-text);
}
.soma-dd-aside__label {
  font-size: var(--soma-t-label); font-weight: 600;
  letter-spacing: var(--soma-ls-tight); text-transform: uppercase;
  color: var(--soma-secondary);
}
.soma-page a.soma-dd-aside__link { font-weight: 600; color: var(--soma-primary); }
.soma-page a.soma-dd-aside__link:hover,
.soma-page a.soma-dd-aside__link:focus-visible { color: var(--soma-secondary); }
.soma-dd-aside__line { flex: 1 1 100%; color: var(--soma-text); }

/* The element after a Foundations quiz score. Same restraint as the exam score
   report's credential line: a quiet aside, not a call to action. */
.soma-dd-next {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 20px; padding: 18px 22px;
  background: var(--soma-base);
  border: 1px solid var(--soma-line);
  border-left: 3px solid var(--soma-secondary);
  border-radius: var(--soma-r-sm);
}
.soma-dd-next__eyebrow {
  font-size: var(--soma-t-label); font-weight: 600;
  letter-spacing: var(--soma-ls-label); text-transform: uppercase;
  color: var(--soma-secondary);
}
.soma-dd-next__title { margin: 0; font-size: var(--soma-t-body); font-weight: 600; line-height: 1.4; }
.soma-dd-next__title a { color: var(--soma-primary); }
.soma-dd-next__title a:hover, .soma-dd-next__title a:focus-visible { color: var(--soma-secondary); }
.soma-dd-next__line { margin: 0; font-size: var(--soma-t-small); line-height: 1.6; color: var(--soma-text); }

@media (max-width: 767px) {
  .soma-dd-next { padding: 16px 18px; }
}

/* --- Featured lead: stop it stretching to the row (advisor, 25 Aug) -------- */
/* The lead sits beside a column of rows. As the column grew past seven items,
   flex stretched the card to match it and the surplus rendered as a tall field
   of white under the text. Sizing the card to its own content fixes that, and
   keeps the picture at a size its source can serve crisply: letting the picture
   absorb the surplus instead meant upscaling a 494px original past 880px. */
@media (min-width: 901px) {
  .soma-reading { align-items: flex-start; }
}

/* --- The Journal: everything after the top four (advisor, 25 Aug) --------- */
/* The lead and three rows make the top row. The rest of the page's articles
   run full width here, so weekly growth lands below rather than stretching
   that row. */
.soma-journal-more { margin-top: var(--soma-gap-lg); }

/* --- The Deep Dives page ------------------------------------------------ */
/* Rows, not cards. A card grid of single-topic courses is the marketplace look
   the site exists to avoid, and it would put fourteen ₹1,000 products in the
   same visual register as a ₹35,000 programme. The title carries the weight,
   in the display face at reading size, and everything else stays quiet. */
/* `.soma-dd-plain` and `.soma-page-header__note` are both gone. They were the
   smaller second-paragraph treatment used by /deep-dives/ alone, which made it
   the odd page out; all three programme pages now use `.soma-band__lead` for
   every paragraph. Removed rather than left behind: no markup emits either. */

/* The pre-launch state on /deep-dives/. Measured as a card it was 1000x135 with
   most of its width blank, which reads as a container that failed to fill
   rather than as a deliberate statement. This drops the card: a rule above, a
   measure the words actually fill, and the page's own editorial type. Scoped to
   the modifier, so every other `.soma-empty` on the site is untouched. */
.soma-empty--stated {
  background: none; border-radius: 0;
  padding: 26px 0 0; gap: 10px;
  border-top: 1px solid var(--soma-line);
  max-width: 62ch;
}
.soma-section--white .soma-empty--stated { background: none; }
.soma-empty--stated strong { font-size: var(--soma-t-h3); }
.soma-empty--stated span { font-size: var(--soma-t-body); line-height: 1.7; color: var(--soma-text); }
.soma-dd-page { gap: var(--soma-gap-lg); }
.soma-dd-filter { display: flex; flex-wrap: wrap; gap: 8px; }

.soma-dd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
/* Hairline between rows rather than a box around each: a bordered block per
   item reads as a card again however the inside is styled. */
.soma-dd-entry {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 4px var(--soma-gap);
  padding: 22px 0;
  border-bottom: 1px solid var(--soma-line);
}
.soma-dd-entry:first-child { border-top: 1px solid var(--soma-line); }
.soma-dd-entry__main { grid-column: 1; display: flex; flex-direction: column; gap: 6px; text-decoration: none; }
.soma-dd-entry__field {
  font-size: var(--soma-t-label); font-weight: 600;
  letter-spacing: var(--soma-ls-label); text-transform: uppercase;
  color: var(--soma-secondary);
}
.soma-dd-entry__title {
  font-family: var(--soma-font-display); font-weight: 600;
  font-size: var(--soma-t-h3); line-height: 1.15;
  color: var(--soma-primary); text-wrap: balance;
}
.soma-page a.soma-dd-entry__main:hover .soma-dd-entry__title,
.soma-page a.soma-dd-entry__main:focus-visible .soma-dd-entry__title { color: var(--soma-secondary); }
.soma-dd-entry__line { font-size: var(--soma-t-body); line-height: 1.7; color: var(--soma-text); max-width: 68ch; }
/* The price sits with the title, not under the prose, so the row scans as
   "this thing, this much" without a strikethrough or a badge anywhere near it. */
.soma-dd-entry__price {
  grid-column: 2; grid-row: 1;
  white-space: nowrap; font-size: var(--soma-t-body); font-weight: 600; color: var(--soma-primary);
}
.soma-dd-entry__builds {
  grid-column: 1; margin: 2px 0 0;
  font-size: var(--soma-t-small); line-height: 1.6; color: var(--soma-text);
}
.soma-page .soma-dd-entry__builds a { font-weight: 600; }

.soma-dd-ladder__rows { display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 767px) {
  .soma-dd-entry { grid-template-columns: 1fr; }
  .soma-dd-entry__price { grid-column: 1; grid-row: auto; }
}

/* A portrait cover in a landscape well.
   The strip's media box is 16/9 with object-fit: cover, which is right for
   an episode still and wrong for a 2:3 book jacket: it would crop away the
   title and the authors' names. Letterbox the whole jacket on the dark
   ground instead. The class is doubled so this beats the later
   `.soma-feature__media img` cover rule on specificity rather than on
   source order, which is the trap that made an earlier fix look applied
   when it was not. */
.soma-feature__media--portrait.soma-feature__media { background: var(--soma-primary); }
.soma-feature__media--portrait.soma-feature__media img { object-fit: contain; }

/* The book on a Topic hub: the /books/ featured block at a smaller size.
   Same component, so the two pages teach the reader one shape rather than
   two. The beige ground is what the block was missing: without it the cover
   and copy floated in a white band with no edge, which is what read as
   unfinished however the text was aligned. */
.soma-featured-book--compact {
  gap: clamp(1.5rem, 1rem + 1.8vw, 2.5rem);
  padding: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
}
.soma-featured-book--compact .soma-featured-book__cover {
  width: clamp(150px, 16vw, 200px);
  box-shadow: 0 18px 36px rgba(19,21,39,.20);
}
.soma-featured-book--compact .soma-featured-book__title { font-size: var(--soma-t-h3); }
.soma-featured-book--compact .soma-featured-book__text { max-width: 56ch; }
@media (max-width: 800px) {
  .soma-featured-book--compact .soma-featured-book__cover { width: min(190px, 52vw); }
}

/* About page: photo slots lose their frame once a photo is in them.
   .chapter-slot and .split-slot carry 20px of beige padding, which was the
   empty state - a beige panel that read as "photograph pending" while the
   slot held only a placeholder pill. With a photograph in it that same
   padding reads as a border drawn around the picture.

   Keyed on :has(img) so a slot that is still waiting for its photograph
   keeps the beige ground and goes on saying what belongs there. Three
   selectors deep to beat Elementor's own `.elementor .chapter-slot`, which
   is two - specificity rather than source order, since the two stylesheets
   load independently. */
.elementor .chapter-slot:has(img),
.elementor .split-slot:has(img) {
  padding: 0;
  align-items: stretch;
  overflow: hidden;   /* .split-slot is overflow:visible, so a flush image
                         would square off its own 24px corners. */
}
.elementor .chapter-slot:has(img) > img,
.elementor .split-slot:has(img) > img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Hero lead: hold the copy column clear of the field labels.
   The labels are drawn leftward from their dots on the figure, so the two
   longest - Cellular Health & Mitochondria and Ozone & Regenerative
   Therapies - reach furthest back across the band. At the old width the
   lead's first line ended at 655px and the Ozone label began at 656, which
   read as a collision.

   Capping the lead rather than moving the dots, because the dots are
   anatomical: each one has to sit on the organ it names, and there is no
   spare body to the right of the hip. 560px is also the better measure -
   the old 655 ran to about 75 characters a line, past comfortable reading.
   Desktop only; below 1024 the labels are not drawn. */
@media (min-width: 1025px) {
  .soma-hero .soma-hero__lead { max-width: 560px; }
}

/* Hero: keep the head, and keep the labels off the body.

   The band is much wider than 16:9, so cover scales the still by width and
   crops the height. Centred, that took about 125px off the top on a 1990px
   screen and cut the figure's head. Biasing the crop upward keeps the head
   and spends the difference on the feet, which are already near the edge.
   soma-ui.js reads object-position when it maps the dots, so the anchoring
   follows this automatically. */
@media (min-width: 1101px) {
  .soma-hero .soma-hero__still img { object-position: 50% 18%; }
}

/* A scrim behind each label, for the fallback layout only. Where the
   anchored column is in force every label already sits on flat navy, and
   the scrim there is a faint box around nothing. Below that width the band
   cannot hold the headline, a 300px label and a body filling the right half
   at once, so a label can still graze a glowing arm - this keeps it readable
   when it does. */
.soma-hero__node:not(.soma-hero__node--anchored) .soma-hero__node-label {
  padding: 2px 7px;
  border-radius: var(--soma-r-sm);
  background: rgba(11, 16, 32, .55);
  backdrop-filter: blur(3px);
}

/* ---------------------------------------------------------------------------
   Credential verification - /verify/

   Three states share one card, and the difference between them has to survive
   a glance on a phone held by somebody who is not reading carefully: a hiring
   manager checking a name. So the state is carried by the badge line at the
   top, in words, with the icon only reinforcing it - never by colour alone,
   which is invisible to a printer and to a good number of readers.

   The record itself is a definition list rather than a table: it is a set of
   claims about one certificate, not rows to compare.
--------------------------------------------------------------------------- */

.soma-verify { gap: 28px; }

.soma-verify__card {
  max-width: var(--soma-wide);
  display: flex; flex-direction: column; gap: 16px;
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem);
  border: 1px solid var(--soma-line);
  border-radius: var(--soma-r-lg);
  background: var(--soma-white);
}
.soma-verify__card--ok   { border-color: rgba(13, 124, 104, .35); box-shadow: 0 18px 40px var(--soma-shadow); }
.soma-verify__card--void { border-color: rgba(19, 21, 39, .30); background: var(--soma-beige); }
.soma-verify__card--none { border-style: dashed; }

.soma-verify__badge {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-family: var(--soma-font-body); font-weight: 600; font-size: 1.0625rem;
  color: var(--soma-primary);
}
.soma-verify__card--ok .soma-verify__badge { color: var(--soma-secondary-deep); }
.soma-verify__mark { flex: 0 0 auto; }

.soma-verify__claim {
  margin: 0; max-width: 62ch;
  font-size: var(--soma-t-lead); line-height: var(--soma-lh-lead); color: var(--soma-primary);
}

.soma-verify__rows { margin: 4px 0 0; display: grid; border-top: 1px solid var(--soma-line); }
.soma-verify__row {
  display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 8px 24px;
  align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--soma-line);
}
.soma-verify__row dt {
  margin: 0; font-size: var(--soma-t-label); font-weight: 600;
  letter-spacing: var(--soma-ls-label); text-transform: uppercase; color: var(--soma-secondary);
}
.soma-verify__row dd { margin: 0; font-size: 1.0625rem; color: var(--soma-primary); }
.soma-verify__name {
  font-family: var(--soma-font-display); font-weight: 600;
  font-size: var(--soma-t-h3); line-height: 1.15;
}

/* The ID is read aloud, typed and compared character by character, so it is
   set in a monospaced face where 1, l and 0, O cannot be confused. */
.soma-verify__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .06em; font-size: .95em;
  padding: 3px 8px; border-radius: var(--soma-r-sm); background: var(--soma-base);
}

.soma-verify__note   { margin: 0; max-width: 68ch; font-size: var(--soma-t-small); color: var(--soma-text); }
.soma-verify__checks { margin: 0; padding-left: 1.1rem; display: grid; gap: 8px; max-width: 68ch;
                       font-size: var(--soma-t-small); color: var(--soma-text); }

.soma-verify__form { max-width: var(--soma-wide); display: flex; flex-direction: column; gap: 10px; }
.soma-verify__label {
  font-size: var(--soma-t-label); font-weight: 600;
  letter-spacing: var(--soma-ls-label); text-transform: uppercase; color: var(--soma-secondary);
}
.soma-verify__field { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.soma-verify__input {
  flex: 1 1 260px; min-width: 0;
  padding: 16px 20px;
  border: 1.5px solid var(--soma-line); border-radius: var(--soma-r-pill);
  background: var(--soma-white); color: var(--soma-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1rem; letter-spacing: .06em;
}
.soma-verify__input::placeholder { color: rgba(19, 21, 39, .35); }
.soma-verify__input:focus-visible {
  outline: 2px solid var(--soma-secondary); outline-offset: 2px; border-color: var(--soma-secondary);
}
.soma-verify__submit { flex: 0 0 auto; }
.soma-verify__hint  { margin: 0; font-size: var(--soma-t-small); color: var(--soma-text); }
.soma-verify__about { margin: 0; font-size: var(--soma-t-small); }

@media (max-width: 640px) {
  .soma-verify__row { grid-template-columns: 1fr; gap: 4px; }
  .soma-verify__submit { width: 100%; }
}

/* The band as it appears inside another page (the Certification page, when

   the takeover is off).

   That page is built in Elementor, so the band lands outside .soma-page and
   inherits neither its typography nor its custom properties: the heading came
   out in the body face and the form ran the full width of the screen. Every
   value the band needs is restated here with a literal fallback, and the
   horizontal padding matches that page's own sections (72px) rather than the
   site gutter, because a 16px step between two stacked sections is visible. */
.soma-verify-band { padding-left: 72px; padding-right: 72px; }
.soma-verify-band h2 {
  margin: 0;
  font-family: var(--soma-font-display, "Cormorant", Georgia, serif);
  font-weight: 600;
  font-size: var(--soma-t-h2, 3.25rem);
  line-height: var(--soma-lh-display, 1.05);
  color: var(--soma-primary, #131527);
}
.soma-verify-band .soma-band__lead { max-width: 58ch; }
.soma-verify-band .soma-verify__form { max-width: 620px; }
.soma-verify__card, .soma-verify__form { max-width: var(--soma-wide, 960px); }
@media (max-width: 900px) {
  .soma-verify-band { padding-left: var(--soma-gutter, 1.25rem); padding-right: var(--soma-gutter, 1.25rem); }
}

/* The credentials block on /about/.

   Like the verification band, this lands inside an Elementor page and so
   inherits neither .soma-page's typography nor its custom properties: every
   value carries a literal fallback, and the horizontal padding matches that
   page's own sections rather than the site gutter. */
.soma-credentials { padding-left: 72px; padding-right: 72px; gap: 22px; }
.soma-credentials h2 {
  margin: 0;
  font-family: var(--soma-font-display, "Cormorant", Georgia, serif);
  font-weight: 600;
  font-size: var(--soma-t-h2, 3.25rem);
  line-height: var(--soma-lh-display, 1.05);
  color: var(--soma-primary, #131527);
}
.soma-credentials__rows {
  margin: 0; display: grid; max-width: 960px;
  border-top: 1px solid var(--soma-line, rgba(19, 21, 39, .12));
}
.soma-credentials__row {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 8px 28px;
  align-items: baseline; padding: 16px 0;
  border-bottom: 1px solid var(--soma-line, rgba(19, 21, 39, .12));
}
.soma-credentials__row dt {
  margin: 0;
  font-family: var(--soma-font-body, "Raleway", system-ui, sans-serif);
  font-size: var(--soma-t-label, .75rem); font-weight: 600;
  letter-spacing: var(--soma-ls-label, .18em); text-transform: uppercase;
  color: var(--soma-secondary, #0D7C68);
}
.soma-credentials__row dd {
  margin: 0;
  font-family: var(--soma-font-body, "Raleway", system-ui, sans-serif);
  font-size: 1.0625rem; line-height: 1.6;
  color: var(--soma-primary, #131527);
}
@media (max-width: 900px) {
  .soma-credentials { padding-left: var(--soma-gutter, 1.25rem); padding-right: var(--soma-gutter, 1.25rem); }
  .soma-credentials__row { grid-template-columns: 1fr; gap: 4px; }
}

/* Conferences.
   A conference is a place and a date as much as a title, so its card leads
   with the picture and says where and when before anything else. The rows
   this replaced carried an icon and two tags - the right weight for a Journal
   article, the wrong one for three residential days. */
.soma-eventcards {
  display: grid; gap: var(--soma-gap, 1.25rem);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.soma-eventcard {
  display: flex; flex-direction: column;
  border-radius: var(--soma-r-lg, 24px); overflow: hidden;
  background: var(--soma-white, #fff); color: var(--soma-primary, #131527);
  text-decoration: none; border: 1px solid var(--soma-line, rgba(19,21,39,.12));
}
.soma-eventcard__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--soma-primary-deep, #0C0E1C); }
.soma-eventcard__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.soma-eventcard__body { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px 26px; }
.soma-eventcard__when {
  font-size: var(--soma-t-label, .75rem); font-weight: 600;
  letter-spacing: var(--soma-ls-label, .18em); text-transform: uppercase;
  color: var(--soma-secondary, #0D7C68);
}
.soma-eventcard__title {
  font-family: var(--soma-font-display, Cormorant, Georgia, serif);
  font-size: var(--soma-t-h4, 1.5rem); font-weight: 600; line-height: 1.2;
}
.soma-eventcard__where { font-size: var(--soma-t-small, .875rem); color: var(--soma-text, #545454); }
.soma-eventcard__text  { font-size: var(--soma-t-small, .875rem); line-height: 1.6; color: var(--soma-text, #545454); }

/* The cover on one conference: wide and shallow, so the account of what
   happened is still in reach without scrolling past a whole screen of picture. */
.soma-event__cover { margin: 0; display: block; background: var(--soma-primary-deep, #0C0E1C); }
.soma-event__coverimg {
  display: block; width: 100%; height: auto;
  max-height: 420px; object-fit: cover; object-position: 50% 50%;
}

/* The conference list sign-up. Same shape as the certificate box - one field,
   one button, one line of reassurance - so the site has a single idea of what
   asking somebody for one piece of information looks like. */
.soma-signup__form { max-width: 620px; display: flex; flex-direction: column; gap: 10px; }
.soma-signup__label {
  font-size: var(--soma-t-label, .75rem); font-weight: 600;
  letter-spacing: var(--soma-ls-label, .18em); text-transform: uppercase;
  color: var(--soma-secondary, #0D7C68);
}
.soma-signup__field { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.soma-signup__input {
  flex: 1 1 260px; min-width: 0; padding: 16px 20px;
  border: 1.5px solid var(--soma-line, rgba(19,21,39,.12)); border-radius: var(--soma-r-pill, 999px);
  background: var(--soma-white, #fff); color: var(--soma-primary, #131527);
  font-family: var(--soma-font-body, Raleway, system-ui, sans-serif); font-size: 1rem;
}
.soma-signup__input:focus-visible { outline: 2px solid var(--soma-secondary, #0D7C68); outline-offset: 2px; border-color: var(--soma-secondary, #0D7C68); }
.soma-signup__submit { flex: 0 0 auto; }
.soma-signup__hint { margin: 0; font-size: var(--soma-t-small, .875rem); color: var(--soma-text, #545454); max-width: 60ch; }
.soma-signup__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 640px) { .soma-signup__submit { width: 100%; } }

/* The picture on the conferences panel.

   The panel is one of two cards sitting side by side, and the row's height is
   set by whichever card is taller. So the cover is not allowed to push: it
   fills the slack the panel already had between its heading and its footing
   and stops there. With the stand-in there is a good deal of slack and the
   band is deep; once a real conference is in the panel the text takes more of
   the room and the band is shallower. Either way the row keeps the height it
   has always had, and the book panel beside it is not stretched.

   Away from that panel — a single conference page, say — there is no row to
   respect, so the picture keeps an ordinary 16:9 slot. */
.soma-nextevent__media {
  margin: 0 0 18px; display: block; overflow: hidden;
  border-radius: var(--soma-r-md, 16px);
  aspect-ratio: 16 / 9; max-height: 240px;
  background: rgba(255, 255, 255, .04);
}
.soma-nextevent__img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 45%;
}

.elementor-element-somasce,
.elementor-element-somasce > .elementor-shortcode,
.elementor-element-somasce .soma-sc--event {
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
}
.elementor-element-somasce .soma-sc--event { gap: 14px; }
.elementor-element-somasce .soma-nextevent__media {
  margin: 0; aspect-ratio: auto; position: relative;
  flex: 1 1 0; min-height: 76px; max-height: none;
}

/* The panel is dark, and `.soma-quiet` is grey-on-light by default: #545454 at
   85% opacity, which against this navy is very nearly nothing. The dark
   variants of `.soma-quiet` key off `.soma-section--dark` and `.soma-band--dark`,
   and this card is neither — it is an Elementor container that happens to be
   dark — so it never matched. */
.elementor-element-somasce .soma-quiet {
  color: var(--soma-white-70, rgba(255, 255, 255, .7));
  opacity: 1;
}

/* Taken out of the flow so the picture's own proportions have no say in how
   tall the panel is — the slot decides, and the picture is cropped into it. */
.elementor-element-somasce .soma-nextevent__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
}


/* --- The Elementor-authored text classes ------------------------------

   The homepage is built in Elementor, and its eyebrows, captions and chart
   legends carry their own sizes set inside the builder — 12px flat, which is
   where most of the "everything is small" feeling on that page came from.
   Their markup is Elementor's and must not be edited by hand, so the sizes are
   brought onto the same tokens as the rest of the site from here instead.

   Elementor writes these as `.elementor .eyebrow`, so the override carries one
   extra `body` to outrank it rather than reaching for !important. */
body .elementor .eyebrow,
body .elementor .eyebrow-invert,
body .elementor .legend-title,
body .elementor .legend-text,
body .elementor .eyebrow-tight {
  font-size: var(--soma-t-label);
}

body .elementor .small-invert,
body .elementor .fine-print,
body .elementor .topic-body {
  font-size: var(--soma-t-small);
  line-height: 1.6;
}
/* --- Contrast: teal as type ------------------------------------------ */
/* Added 31 Aug 2026. #0D7C68 measures 4.04:1 on the beige panel and 4.51:1
   on the paper. That is under AA on beige and level with it on paper, and
   the eyebrows, labels and inline links drawn in it are normal text at
   13-15px, not large text. #0A6354 is the same hue one step down and is
   already a token: 5.66:1 on beige, 6.32:1 on paper, 7.18:1 on white.
   Only type moves. Fills, rules, icon plates, borders and focus outlines
   keep the brand green, so the palette itself does not read differently.
   Teal was also failing on the indigo ground at 3.5:1; there the link
   takes the periwinkle, which is what the inverted eyebrow already uses. */
.soma-page a { color: var(--soma-secondary-deep); }
.soma-page a:hover { color: var(--soma-primary); text-decoration: underline; text-underline-offset: 3px; }
.soma-page a.soma-btn,
.soma-page a.soma-btn:hover,
.soma-page a.soma-btn:focus-visible { color: var(--soma-white); text-decoration: none; }
.soma-page a.soma-btn--outline,
.soma-page a.soma-btn--outline:hover,
.soma-page a.soma-btn--outline:focus-visible,
.soma-page a.soma-btn--light,
.soma-page a.soma-btn--light:hover,
.soma-page a.soma-btn--light:focus-visible { color: var(--soma-primary); text-decoration: none; }

.soma-anchor__label,
.soma-anchor__go,
.soma-section--beige .soma-eyebrow,
.soma-band--beige .soma-eyebrow,
.soma-book-hero .soma-eyebrow,
.soma-featured-book .soma-eyebrow { color: var(--soma-secondary-deep); }

.soma-section--dark a,
.soma-band--dark a { color: var(--soma-periwinkle); }
.soma-section--dark a:hover,
.soma-band--dark a:hover { color: var(--soma-white); }
.soma-section--dark a.soma-btn,
.soma-band--dark a.soma-btn { color: var(--soma-white); }
.soma-section--dark a.soma-btn--light,
.soma-band--dark a.soma-btn--light { color: var(--soma-primary); }

/* --- Common questions accordion (audit, 31 Aug 2026) --------------------- */
.soma-faq__item { border-bottom: 1px solid var(--soma-line, #e4e1dc); padding: 4px 0; }
.soma-faq__item summary { cursor: pointer; list-style: none; position: relative; padding: 14px 36px 14px 0; font-weight: 600; font-size: 16.5px; color: var(--soma-ink, #1a1c2e); }
.soma-faq__item summary::-webkit-details-marker { display: none; }
.soma-faq__item summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; border-right: 1.8px solid var(--soma-teal, #0D7C68); border-bottom: 1.8px solid var(--soma-teal, #0D7C68); transform: translateY(-70%) rotate(45deg); transition: transform .18s ease; }
.soma-faq__item[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.soma-faq__item summary:focus-visible { outline: 2px solid var(--soma-teal, #0D7C68); outline-offset: 3px; border-radius: 4px; }
.soma-faq__item > p { margin: 0 0 16px; max-width: 62ch; color: var(--soma-ink-2, #545454); }
.soma-faq__item > p a { color: var(--soma-teal, #0D7C68); }

/* Footer signup honeypot: off-screen, not a visible stub (audit, 31 Aug 2026). */
.soma-thread-mini__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Proof strip under the hero (audit, 31 Aug 2026). */
.soma-proof { background: var(--soma-off, #F2F0EF); border-bottom: 1px solid var(--soma-line, #e4e1dc); }
.soma-proof__list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 48px; align-items: baseline; justify-content: center; max-width: 1160px; margin: 0 auto; padding: 22px 24px; }
.soma-proof__item { display: flex; align-items: baseline; gap: 9px; }
.soma-proof__num { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 26px; font-weight: 600; color: var(--soma-ink, #1a1c2e); }
.soma-proof__label { font-size: 13.5px; letter-spacing: .02em; color: var(--soma-ink-2, #545454); }
.soma-proof__link { font-size: 14px; font-weight: 600; color: var(--soma-teal, #0D7C68); text-decoration: none; }
.soma-proof__link:hover { text-decoration: underline; }
@media (max-width: 640px) { .soma-proof__list { gap: 6px 26px; padding: 16px 18px; } .soma-proof__num { font-size: 21px; } }

/* Dr Chhillar stat tiles: four abreast on desktop — no orphan row (audit, 31 Aug 2026). */
@media (min-width: 1024px) { .elementor-element-sa00084 { grid-template-columns: repeat(4, 1fr) !important; } }

/* --- Accessibility pass (audit, 31 Aug 2026) ----------------------------- */
/* One visible keyboard focus style everywhere interactive. */
a:focus-visible, button:focus-visible, [role=button]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--soma-teal, #0D7C68); outline-offset: 3px; border-radius: 4px;
}
.soma-footer a:focus-visible, .soma-hero a:focus-visible { outline-color: #4FB39A; }
/* Comfortable touch targets for footer links and filter chips on small screens. */
@media (max-width: 768px) {
  .soma-footer__column a { display: inline-flex; align-items: center; min-height: 44px; }
  .soma-dd-filter .soma-chip { min-height: 42px; display: inline-flex; align-items: center; }
}

/* --- Sticky header (requested 31 Aug 2026): the header follows the page on
   every viewport, so navigation and the menu button are always in reach. */
#masthead, .site-header {
  position: -webkit-sticky; position: sticky; top: 0; z-index: 9990;
  background: #fff;
}
body.soma-header-scrolled #masthead, body.soma-header-scrolled .site-header {
  box-shadow: 0 2px 14px rgba(19,21,39,.08);
}
/* Astra sometimes leaves the header's parent with overflow set, which kills
   position:sticky; make sure the chain stays open. */
body, #page.site { overflow: visible !important; }

/* Mobile nav panel — light, mirroring the desktop menu (31 Aug 2026). */
.soma-mnav[hidden]{display:none!important}
.soma-mnav{position:fixed;inset:0;z-index:100000;background:#fff;color:var(--soma-ink,#1a1c2e);display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch}
.soma-mnav__head{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--soma-line,#e4e1dc)}
.soma-mnav__brand{font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;letter-spacing:.04em;color:var(--soma-ink,#1a1c2e)}
.soma-mnav__brand em{font-style:normal;font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-family:Raleway,sans-serif;opacity:.75;margin-left:6px}
.soma-mnav__close{background:none;border:0;color:var(--soma-ink,#1a1c2e);font-size:20px;line-height:1;padding:10px;cursor:pointer}
.soma-mnav__close:focus-visible,.soma-mnav a:focus-visible,.soma-mnav summary:focus-visible{outline:2px solid var(--soma-teal,#0D7C68);outline-offset:3px}
.soma-mnav__body{padding:10px 22px 28px;display:flex;flex-direction:column;flex:1}
.soma-mnav__link,.soma-mnav__group summary{display:flex;align-items:center;min-height:52px;font-size:17px;font-weight:500;color:var(--soma-ink,#1a1c2e);text-decoration:none;border-bottom:1px solid var(--soma-line,#e4e1dc);cursor:pointer}
.soma-mnav__group{border-bottom:1px solid var(--soma-line,#e4e1dc)}
.soma-mnav__group summary{border-bottom:0;list-style:none;position:relative;padding-right:30px}
.soma-mnav__group summary::-webkit-details-marker{display:none}
.soma-mnav__group summary::after{content:'';position:absolute;right:8px;top:50%;width:8px;height:8px;border-right:1.6px solid var(--soma-teal,#0D7C68);border-bottom:1.6px solid var(--soma-teal,#0D7C68);transform:translateY(-70%) rotate(45deg);transition:transform .16s ease}
.soma-mnav__group[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.soma-mnav__group > a{display:flex;align-items:center;min-height:46px;padding-left:18px;font-size:16px;color:var(--soma-ink-2,#545454);text-decoration:none}
.soma-mnav__group[open]{padding-bottom:6px}
.soma-mnav__foot{margin-top:auto;padding-top:24px}
.soma-mnav__signin{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border-radius:999px;background:var(--soma-indigo,#131527);color:#fff;text-decoration:none;font-weight:600;font-size:15px}
body.soma-mnav-open{overflow:hidden}
    

/* Menu panel: real site logo (31 Aug 2026). */
.soma-mnav__logo{height:30px;width:auto;display:block}
.soma-mnav__brand{display:flex;align-items:center}

/* Menu panel refinements (31 Aug 2026): options centred and larger, with
   Sign In / My Learning sitting directly beneath the options. */
.soma-mnav__body{align-items:center;text-align:center;padding-top:18px}
.soma-mnav__link,.soma-mnav__group{width:100%;max-width:420px}
.soma-mnav__link,.soma-mnav__group summary{justify-content:center;font-size:21px;min-height:60px}
.soma-mnav__group summary{padding-right:0}
.soma-mnav__group summary::after{position:static;transform:rotate(45deg) translateY(-2px);margin-left:12px;transition:transform .16s ease}
.soma-mnav__group[open] summary::after{transform:rotate(225deg) translateY(2px)}
.soma-mnav__group > a{justify-content:center;padding-left:0;font-size:18px;min-height:50px}
.soma-mnav__foot{margin-top:0;padding-top:30px;width:100%;display:flex;justify-content:center}
.soma-mnav__signin{min-height:52px;padding:0 34px;font-size:16px}
/* Menu brand: full SOMA | Academy lockup, same as the top bar (31 Aug 2026). */
.soma-mnav__brand{gap:10px}
.soma-mnav__brand .soma-identity__rule{width:1px;height:22px;background:var(--soma-line,#c9c6c0);display:inline-block}
.soma-mnav__brand .soma-identity__mark{font-family:Raleway,sans-serif;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--soma-ink-2,#545454)}

/* Menu as a dropdown under the shared top bar (31 Aug 2026): the header stays
   visible, the panel fills the space beneath it; JS sets its top edge. */
.soma-mnav{top:80px;border-top:1px solid var(--soma-line,#e4e1dc)}
.soma-mnav .soma-mnav__body{padding-top:8px}

/* Listen-to-this-article bar (1 Sep 2026). Editorial: hairline rule, no fill. */
.soma-listen{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 26px;padding:12px 0;border-top:1px solid var(--soma-line,#e4e1dc);border-bottom:1px solid var(--soma-line,#e4e1dc)}
.soma-listen[hidden]{display:none!important}
.soma-listen__btn{display:inline-flex;align-items:center;gap:9px;background:none;border:0;cursor:pointer;color:var(--soma-teal,#0D7C68);font-family:Raleway,sans-serif;font-weight:600;font-size:14.5px;padding:6px 2px}
.soma-listen__btn:focus-visible{outline:2px solid var(--soma-teal,#0D7C68);outline-offset:3px;border-radius:4px}
.soma-listen__meta{font-size:13px;color:var(--soma-ink-3,#7c7e8c)}
.soma-listen__speeds{margin-left:auto;display:inline-flex;gap:4px}
.soma-listen__speed{background:none;border:1px solid var(--soma-line,#e4e1dc);border-radius:99px;font-size:12px;padding:3px 10px;color:var(--soma-ink-2,#545454);cursor:pointer;min-height:28px}
.soma-listen__speed.is-on{border-color:var(--soma-teal,#0D7C68);color:var(--soma-teal,#0D7C68);font-weight:600}

/* -------------------------------------------------------------------------
 * Journal reading — standfirst, key points, signposting
 *
 * The articles were not too long; they were undifferentiated. Twenty-odd
 * paragraphs of even weight with nothing to catch a scanning eye reads as a
 * wall at any word count. Three devices, all built from tokens already here:
 * a standfirst that states the promise above the fold, an "In short" block for
 * the reader who will not read all of it, and a rule above every H2 so the
 * sections become visibly separate things rather than one continuous column.
 * ---------------------------------------------------------------------- */

.soma-read__standfirst {
  font-size: var(--soma-t-lead);
  line-height: var(--soma-lh-lead);
  color: var(--soma-primary);
  max-width: 62ch;
}

.soma-key {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 28px;
  border-radius: var(--soma-r-md);
  background: var(--soma-beige);
}
.soma-key__label {
  font-size: var(--soma-t-label);
  font-weight: 600;
  letter-spacing: var(--soma-ls-label);
  text-transform: uppercase;
  color: var(--soma-secondary-deep);
}
.soma-key ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.soma-key li {
  position: relative;
  padding-left: 24px;
  font-size: var(--soma-t-body);
  line-height: 1.6;
  color: var(--soma-primary);
}
.soma-key li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .66em;
  width: 11px;
  height: 2px;
  background: var(--soma-secondary-deep);
}

/* A standfirst already carries the lead, so the opening paragraph returns to
   body weight rather than shouting the same note twice. */
.soma-prose--body-lead p:first-of-type {
  font-size: var(--soma-t-body);
  line-height: 1.8;
  color: var(--soma-text);
}

/* Each H2 opens a section, so it gets a line above it. */
.soma-prose h2 {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--soma-line);
}
.soma-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* The load-bearing sentence in a paragraph should look load-bearing. */
.soma-prose strong { font-weight: 600; color: var(--soma-primary); }

/* Lists were technically styled and practically invisible. */
.soma-prose ul { list-style: none; padding-left: 0; }
.soma-prose ul li { position: relative; padding-left: 26px; }
.soma-prose ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .78em;
  width: 12px;
  height: 2px;
  background: var(--soma-secondary);
}
.soma-prose ol { padding-left: 26px; }
.soma-prose ol li::marker { color: var(--soma-secondary-deep); font-weight: 600; }
.soma-prose li + li { margin-top: 10px; }

/* -------------------------------------------------------------------------
 * The Field path
 *
 * Four rungs on one rail: Journal, Foundations, Deep Dives, Certified. The
 * numbering is not decoration — these are levels, and the order is the whole
 * point, which is exactly the case where numbered markers earn their place.
 * A rung with nothing behind it yet renders as text, muted, never as a link
 * that goes nowhere.
 * ---------------------------------------------------------------------- */

.soma-path { display: flex; flex-direction: column; gap: 14px; }
.soma-path__eyebrow {
  font-size: var(--soma-t-label);
  font-weight: 600;
  letter-spacing: var(--soma-ls-label);
  text-transform: uppercase;
  color: var(--soma-secondary-deep);
}
.soma-path__rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.soma-path__rung { display: flex; }
.soma-path__link {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  padding: 16px 18px 18px;
  border-radius: var(--soma-r-md);
  border-top: 3px solid var(--soma-line);
  background: var(--soma-white);
  color: var(--soma-primary);
  text-decoration: none;
  transition: transform var(--soma-dur-btn) ease, border-color var(--soma-dur-btn) ease;
}
a.soma-path__link:hover,
a.soma-path__link:focus-visible {
  transform: translateY(-3px);
  border-top-color: var(--soma-secondary);
}
.soma-path__step {
  font-size: var(--soma-t-label);
  font-weight: 600;
  letter-spacing: var(--soma-ls-tight);
  color: var(--soma-secondary-deep);
  font-variant-numeric: tabular-nums;
}
.soma-path__label {
  font-family: var(--soma-font-display);
  font-size: var(--soma-t-h4);
  line-height: 1.15;
  color: var(--soma-primary);
}
.soma-path__promise { font-size: var(--soma-t-small); line-height: 1.45; color: var(--soma-text); }
.soma-path__note { font-size: var(--soma-t-label); color: var(--soma-text); }

.soma-path__rung--current .soma-path__link {
  border-top-color: var(--soma-secondary);
  background: var(--soma-beige);
}
.soma-path__rung--current .soma-path__step::after {
  content: " · you are here";
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
}
.soma-path__rung--coming .soma-path__link {
  background: transparent;
  border-top-color: var(--soma-line);
  box-shadow: inset 0 0 0 1px var(--soma-line);
}
.soma-path__rung--coming .soma-path__label,
.soma-path__rung--coming .soma-path__step { color: var(--soma-text); }

.soma-path__pending {
  max-width: 62ch;
  font-size: var(--soma-t-body);
  line-height: 1.7;
  color: var(--soma-text);
}

@media (max-width: 900px) {
  .soma-path__rail { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .soma-path__rail { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  a.soma-path__link:hover, a.soma-path__link:focus-visible { transform: none; }
}

/* --- Header row: one line, whatever the row is carrying (1 Sep 2026) --------
   The row broke in two because the header's width budget was calibrated against
   the signed-out header. A signed-in visitor carries two more controls: the
   account link reads "Sign out" rather than "Sign In", and once anything is in
   the basket a cart link appears beside it. Measured at 1280px the signed-out
   row had 41px of headroom and those two controls want about 55px, so the menu
   wrapped and "About" dropped to a second line.

   Three things follow. The menu is told never to wrap, so a shortfall can only
   ever show up as a tighter row and never as a broken one. The ACADEMY half of
   the lockup steps aside for a signed-in row 160px earlier than for a signed-out
   one, which is the room those two controls need. And below 1080px, where the
   row genuinely cannot hold everything, the search field gives way rather than
   the navigation: search has its own page and its own place in the mobile panel,
   while the nav, the account link, the cart and the call to action do not.
   -------------------------------------------------------------------------- */

/* The row may not break into two lines. */
.ast-builder-menu-1 .main-header-menu { flex-wrap: nowrap; }
.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link,
.ast-builder-menu-1 .main-header-menu > .soma-nav-item > .soma-nav-toggle { white-space: nowrap; }

/* Without this, nowrap converts a wrap into a horizontal overflow: flex items
   refuse to shrink below their content width unless min-width is released. */
.site-header .ast-builder-grid-row > .site-header-primary-section-center,
.site-header .ast-builder-grid-row > .site-header-primary-section-right,
.ast-builder-menu-1 .main-navigation,
.site-header .ast-header-search.ast-builder-layout-element,
.site-header .ast-search-menu-icon.slide-search,
.site-header .ast-search-menu-icon.slide-search .search-form { min-width: 0; }

/* Signed in, the row carries Sign out and possibly a cart. That room no longer
   comes out of the lockup (15 Sep 2026): the lockup stays whole at every width
   and the search field — which has its own page and its own place in the mobile
   panel — narrows first, then the menu padding tightens. */
@media (max-width: 1400px) {
  body.logged-in .site-header .ast-search-menu-icon .search-field {
    width: clamp(5.5rem, 8vw, 9rem);
  }
  body.logged-in .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link,
  body.logged-in .ast-builder-menu-1 .main-header-menu > .soma-nav-item > .soma-nav-toggle {
    padding: 10px 9px;
  }
}
/* The lockup shows at every width now, signed in or out, desktop or mobile. */
.site-header .soma-identity__rule { display: block; }
.site-header .soma-identity__mark { display: inline; }

/* Tighten the row through the band where it is fighting for space. */
@media (max-width: 1200px) {
  .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link { padding: 10px 9px; }
  .site-header .ast-search-menu-icon.slide-search .search-field { width: clamp(6rem, 8vw, 9rem); }
  .site-header .ast-builder-button-wrap .ast-custom-button { padding: 12px 18px; }
}

/* Below this the row cannot hold everything at a readable size, so the search
   field stands down. It returns at 1080px and up, and it is reachable at any
   width from the search page. */
/* 15 Sep 2026: the lockup now stays whole at every width, so the search field
   stands down earlier — at 1240px rather than 1080px — to pay for it. Search
   still has its own page and its own place in the mobile panel. */
@media (max-width: 1240px) {
  .site-header .ast-header-search.ast-builder-layout-element { display: none; }
  .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link,
  .ast-builder-menu-1 .main-header-menu > .soma-nav-item > .soma-nav-toggle { font-size: .875rem; }
}
.ast-header-break-point .site-header .ast-header-search.ast-builder-layout-element { display: flex; }

.soma-listen__amb { display:flex; align-items:center; gap:7px; font-size:13px; color: var(--soma-ink-3,#7c7e8c); cursor:pointer; }
.soma-listen__amb input { accent-color: var(--soma-teal,#0D7C68); }

/* The compression above lost to a higher-specificity rule already in this file
   (`.ast-desktop .ast-builder-menu-1 …`), so the nav kept its 12px and, with
   wrapping now disabled, ran into the account link instead of dropping a line.
   Same intent, matched specificity. */
@media (max-width: 1200px) {
  .ast-desktop .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link,
  .ast-desktop .ast-builder-menu-1 .main-header-menu > .soma-nav-item > .soma-nav-toggle { padding: 10px 9px; }
}
@media (max-width: 1240px) {
  .ast-desktop .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link,
  .ast-desktop .ast-builder-menu-1 .main-header-menu > .soma-nav-item > .soma-nav-toggle { padding: 10px 7px; font-size: .875rem; }
}
/* The last stretch before the mobile header takes over: the menu closes up
   rather than the lockup giving way (15 Sep 2026). */
@media (max-width: 1080px) {
  .ast-desktop .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link,
  .ast-desktop .ast-builder-menu-1 .main-header-menu > .soma-nav-item > .soma-nav-toggle { padding: 10px 5px; }
  .ast-desktop .site-header .ast-builder-button-wrap .ast-custom-button { padding: 11px 15px; }
  .ast-desktop .site-header .site-branding .custom-logo-link { gap: 10px; }
}
/* The narrowest desktop band, just above the mobile header: a signed-in row is
   carrying the lockup, eight menu items, the account link, the cart and the
   call to action. The menu closes up the rest of the way. */
@media (max-width: 1010px) {
  .ast-desktop .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link,
  .ast-desktop .ast-builder-menu-1 .main-header-menu > .soma-nav-item > .soma-nav-toggle { padding: 10px 4px; font-size: .8125rem; }
  .ast-desktop .site-header .ast-builder-button-wrap .ast-custom-button { padding: 10px 13px; font-size: .875rem; }
}

/* Astra lays the primary row out as a grid whose two side columns are forced to
   equal width, so the right-hand cluster was capped at whatever the logo needed
   (205px against the 303px it wanted) and its contents spilled left over the
   menu. Sizing the sides to their content and giving the centre what is left
   is what actually holds the row together; everything above only reduced how
   much it had to hold. Mobile keeps Astra's own three-column centring rule. */
.ast-desktop .site-primary-header-wrap .ast-builder-grid-row.ast-builder-grid-row-has-sides {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.ast-desktop .site-primary-header-wrap .ast-builder-grid-row > .site-header-primary-section-left { justify-content: flex-start; }
.ast-desktop .site-primary-header-wrap .ast-builder-grid-row > .site-header-primary-section-right { justify-content: flex-end; }

/* --- Field chips: the selected one is the other two colours, swapped -------
   The chip set was written as beige ground with navy text, and the selected
   chip as its inverse. Neither was reaching the page. `.soma-page a` sets the
   site link colour at one class plus one element, which outranks a bare
   `.soma-chip` at one class, so every chip was rendering in the green link
   colour: 6.3:1 on beige, which passes, but 2.5:1 on navy, which is well below
   the 4.5:1 floor and is why the selected chip read as unreadable rather than
   as selected.

   Restated at a specificity that wins, and the selected chip now takes the
   unselected chip's two colours the other way round: navy ground, beige text,
   16:1. Same two colours, so the row still reads as one set, and the selected
   one is unmistakable.

   Order matters here: `.soma-page .soma-chip` also matches a selected chip, so
   the selected rules have to come last to win the tie. -------------------- */

.soma-page .soma-chip,
.soma-page a.soma-chip { background: var(--soma-base); color: var(--soma-primary); }

.soma-page .soma-chip:hover,
.soma-page a.soma-chip:hover { background: var(--soma-periwinkle); color: var(--soma-primary); }

.soma-chip--on,
.soma-chip--on:hover,
.soma-page .soma-chip--on,
.soma-page .soma-chip--on:hover,
.soma-page a.soma-chip--on,
.soma-page a.soma-chip--on:hover { background: var(--soma-primary); color: var(--soma-base); }

.soma-seekable{cursor:pointer}
.soma-seekable:hover{box-shadow:-3px 0 0 var(--soma-teal,#0D7C68);}
.soma-seeked{background:rgba(13,124,104,.07);transition:background .8s}


/* --- Wishlist and share, on programmes and bundles ------------------- */
.soma-course-actions { display: flex; align-items: center; gap: 18px; margin-top: 18px; flex-wrap: wrap; }
.soma-course-action, .soma-course-action a, .soma-course-action button {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--soma-t-small); line-height: 1; color: var(--soma-text);
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none;
}
.soma-course-action:hover, .soma-course-action a:hover, .soma-course-action button:hover { color: var(--soma-primary); }
.soma-course-action svg { flex: 0 0 auto; }
.soma-course-action.is-on { color: var(--soma-primary); }
.soma-course-action.is-on svg { fill: currentColor; }
/* Tutor's share view ships its own button furniture; strip it back to a link. */
.soma-course-action--share .tutor-btn { background: none !important; border: 0 !important; padding: 0 !important; color: inherit !important; font-size: inherit !important; }

/* -------------------------------------------------------------------------
   Gift this programme

   Tutor ships the gift button as #e03ad3 on #fbe9f7 - a magenta that appears
   nowhere else on this site, sitting directly under the enrol button, louder
   than the thing it sits under. Gifting is a secondary action and should read
   as one: same shape as its neighbour, a quieter weight.
   ---------------------------------------------------------------------- */
.tutor-btn.tutor-btn-gift,
.tutor-btn.tutor-btn-gift:hover,
.tutor-btn.tutor-btn-gift:focus,
.tutor-btn.tutor-btn-gift:active {
  background: transparent;
  border: 1px solid #D9D5D1;
  color: var(--soma-primary, #131527);
  font-weight: 500;
  border-radius: 6px;
}

.tutor-btn.tutor-btn-gift:hover {
  background: #F2F0EF;
  border-color: #C9C4BF;
}

.tutor-btn.tutor-btn-gift:focus-visible {
  outline: 2px solid var(--soma-teal, #0D7C68);
  outline-offset: 2px;
}

/* The icon is stroked, not filled: every path carries stroke="currentColor"
   alongside an explicit fill="none". Setting fill here would beat that
   attribute and turn a line drawing into a solid blob, so the colour is left
   to travel down through currentColor and only the weight is touched. */
.tutor-btn.tutor-btn-gift svg,
.tutor-btn.tutor-btn-gift i,
.tutor-btn.tutor-btn-gift [class*="tutor-icon"] {
  opacity: .72;
}

/* ==========================================================================
   Loyalty & standing UI (gamify-ui.php, 2 Sep 2026)
   ========================================================================== */
.soma-gy-dashboard { margin: 0 0 32px; }
.soma-gy-panel { background: #FFFFFF; border: 1px solid #E3E0DD; border-radius: 2px; padding: 24px 26px; margin: 0 0 20px; font-family: 'Raleway', system-ui, sans-serif; color: #131527; }
.soma-gy-eyebrow { display: block; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #6B6862; margin: 0 0 8px; font-weight: 500; }
.soma-gy-rank { font-size: 26px; font-weight: 600; margin: 0 0 10px; color: #131527; line-height: 1.2; }
.soma-gy-heading { font-size: 20px; font-weight: 600; margin: 0 0 16px; color: #131527; }
.soma-gy-line { font-size: 14px; color: #131527; margin: 6px 0; display: flex; align-items: center; gap: 7px; }
.soma-gy-line--scholar { color: #0D7C68; }
.soma-gy-line svg { flex: 0 0 auto; }
.soma-gy-credits { color: #0D7C68; text-decoration: none; border-bottom: 1px solid #0D7C68; padding-bottom: 1px; }
.soma-gy-credits:hover { color: #131527; border-bottom-color: #131527; }
.soma-gy-quiet { color: #6B6862; }

/* field mastery medallions */
.soma-gy-marks { display: flex; flex-wrap: wrap; gap: 18px; margin: 16px 0 6px; }
.soma-gy-mark { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 92px; text-align: center; }
.soma-gy-mark__ring { width: 28px; height: 28px; border: 1.5px solid #0D7C68; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: #0D7C68; }
.soma-gy-mark__name { font-size: 12px; color: #6B6862; line-height: 1.35; }

/* dark record strip */
.soma-gy-record { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: #131527; color: #F2F0EF; font-size: 13px; letter-spacing: 0.02em; padding: 10px 16px; margin: 18px -26px -24px; border-radius: 0 0 2px 2px; }

/* thin progress bar */
.soma-gy-bar { display: block; width: 100%; height: 3px; background: #E3E0DD; border-radius: 0; overflow: hidden; }
.soma-gy-bar__fill { display: block; height: 100%; background: #0D7C68; }

/* field map rows */
.soma-gy-maprow { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0; border-top: 1px solid #E3E0DD; text-decoration: none; color: #131527; }
.soma-gy-maprow:first-of-type { border-top: 0; }
.soma-gy-maprow:hover .soma-gy-maprow__name { color: #0D7C68; }
.soma-gy-maprow__name { font-size: 14px; font-weight: 500; flex: 0 0 40%; }
.soma-gy-maprow__meter { flex: 1 1 auto; display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.soma-gy-maprow__meter .soma-gy-bar { max-width: 220px; }
.soma-gy-maprow__count { font-size: 12px; color: #6B6862; white-space: nowrap; }
.soma-gy-maprow--new .soma-gy-maprow__name { color: #6B6862; font-weight: 400; }
.soma-gy-maprow__done { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #0D7C68; font-weight: 500; }
.soma-gy-checkring { width: 18px; height: 18px; border-radius: 50%; background: #0D7C68; display: inline-flex; align-items: center; justify-content: center; }

/* reading rhythm */
.soma-gy-days { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 4px 0 12px; }
.soma-gy-day { border-left: 3px solid #E3E0DD; padding: 2px 0 2px 12px; display: flex; flex-direction: column; gap: 2px; }
.soma-gy-day--read { border-left-color: #0D7C68; }
.soma-gy-day__name { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #131527; font-weight: 600; }
.soma-gy-day__what { font-size: 13px; color: #6B6862; }
.soma-gy-weekstate { border-left: 3px solid #E3E0DD; padding-left: 12px; color: #6B6862; }
.soma-gy-weekstate--read { border-left-color: #0D7C68; color: #0D7C68; }
.soma-gy-cells { display: flex; gap: 5px; margin: 14px 0 4px; }
.soma-gy-cell { width: 14px; height: 14px; background: #E3E0DD; border-radius: 2px; }
.soma-gy-cell--read { background: #0D7C68; }

/* course progress rail */
.soma-gy-rail { display: flex; align-items: center; gap: 16px; border: 1px solid #E3E0DD; border-radius: 2px; background: #FFFFFF; padding: 12px 16px; margin: 0 0 20px; font-family: 'Raleway', system-ui, sans-serif; }
.soma-gy-rail__label { font-size: 13px; color: #131527; font-weight: 500; white-space: nowrap; }
.soma-gy-rail .soma-gy-bar { flex: 1 1 auto; }

/* quiz passed tag */
.soma-gy-quizpass { display: inline-block; margin-left: 10px; padding: 2px 8px; border: 1px solid #0D7C68; border-radius: 2px; color: #0D7C68; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-family: 'Raleway', system-ui, sans-serif; vertical-align: middle; }

@media (max-width: 640px) {
    .soma-gy-days { grid-template-columns: 1fr; }
    .soma-gy-maprow { flex-direction: column; align-items: flex-start; gap: 8px; }
    .soma-gy-maprow__name { flex-basis: auto; }
    .soma-gy-maprow__meter { width: 100%; justify-content: flex-start; }
    .soma-gy-maprow__meter .soma-gy-bar { max-width: none; }
}
/* rhythm strip label row */
.soma-gy-cellsrow{display:flex;align-items:center;gap:12px;margin-top:6px;}
.soma-gy-cellslabel{font-size:12px;color:#6B6862;letter-spacing:.04em;white-space:nowrap;}
.soma-gy-cellslabel--now{color:#0D7C68;font-weight:600;}

/* ==========================================================================
   Loyalty & standing v2 - hero ring, medallion gallery, celebration overlay
   (gamify-ui.php v2, 2 Sep 2026)
   ========================================================================== */
/* standing hero */
.soma-gy-hero { display: flex; gap: 28px; align-items: center; }
.soma-gy-ringwrap { position: relative; flex: 0 0 auto; width: 118px; height: 118px; }
.soma-gy-ring__pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 21px; font-weight: 600; color: #131527; letter-spacing: 0.01em; }
.soma-gy-nextrank { font-size: 13px; color: #6B6862; margin: -6px 0 10px; letter-spacing: 0.04em; }
.soma-gy-nudge { font-size: 14px; margin: 10px 0 0; line-height: 1.5; }
.soma-gy-nudge a { color: #131527; text-decoration: none; border-bottom: 1px solid #0D7C68; padding-bottom: 1px; transition: color 0.3s ease-out, border-bottom-color 0.3s ease-out; }
.soma-gy-nudge a:hover { color: #0D7C68; }
.soma-gy-merits { font-size: 13px; color: #6B6862; margin: 12px 0 0; display: flex; align-items: baseline; gap: 8px; }
.soma-gy-merits .soma-gy-count { color: #131527; font-weight: 600; font-size: 14px; }
.soma-gy-merits__note { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; }

/* Deep Dive credit card */
.soma-gy-creditcard { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; border: 1px solid #E3E0DD; border-radius: 2px; background: #F2F0EF; padding: 14px 18px; margin: 18px 0 0; }
.soma-gy-creditcard__text { display: flex; flex-direction: column; gap: 2px; }
.soma-gy-creditcard__n { font-size: 15px; font-weight: 600; color: #131527; }
.soma-gy-creditcard__line { font-size: 13px; color: #6B6862; }
.soma-gy-btn { display: inline-block; background: #131527; color: #F2F0EF; font-family: 'Raleway', system-ui, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; padding: 10px 20px; border: 0; border-radius: 2px; text-decoration: none; cursor: pointer; transition: background 0.3s ease-out; }
.soma-gy-btn:hover { background: #0D7C68; color: #FFFFFF; }

/* medallion gallery */
.soma-gy-medals { display: flex; flex-wrap: wrap; gap: 22px; margin: 6px 0 14px; }
.soma-gy-medal { width: 104px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; position: relative; }
.soma-gy-medal svg { width: 96px; height: 96px; display: block; }
.soma-gy-medal__name { font-size: 12px; color: #6B6862; line-height: 1.35; }
.soma-gy-medal--locked svg { opacity: 0.3; filter: grayscale(1); }
.soma-gy-medal--locked { cursor: help; }
.soma-gy-medal--locked::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); width: 190px; background: #131527; color: #F2F0EF; font-size: 12px; line-height: 1.45; padding: 8px 10px; border-radius: 2px; opacity: 0; pointer-events: none; transition: opacity 0.3s ease-out; z-index: 20; }
.soma-gy-medal--locked:hover::after, .soma-gy-medal--locked:focus::after { opacity: 1; }

/* first-sight draw-on for a newly earned medallion */
.soma-gy-medal--draw svg .sm-ring { stroke-dasharray: 478; stroke-dashoffset: 478; animation: soma-gy-draw 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; }
.soma-gy-medal--draw svg .sm-ring2 { stroke-dasharray: 450; stroke-dashoffset: 450; animation: soma-gy-draw 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s forwards; }
.soma-gy-medal--draw svg .sm-motif path, .soma-gy-medal--draw svg .sm-motif ellipse, .soma-gy-medal--draw svg .sm-motif circle { stroke-dasharray: 140; stroke-dashoffset: 140; animation: soma-gy-draw 0.7s ease-out 0.45s forwards; }
.soma-gy-medal--draw svg .sm-mono, .soma-gy-medal--draw svg .sm-arc { opacity: 0; animation: soma-gy-fade 0.5s ease-out 0.7s forwards; }
@keyframes soma-gy-draw { to { stroke-dashoffset: 0; } }
@keyframes soma-gy-fade { to { opacity: 1; } }

/* rhythm cells pop in; current week gets one gentle pulse */
.soma-gy-cells .soma-gy-cell--now { outline: 1px solid #0D7C68; outline-offset: 1px; }
.soma-gy-cells.is-armed .soma-gy-cell { opacity: 0; transform: scale(0.9); }
.soma-gy-cells.is-in .soma-gy-cell { opacity: 1; transform: scale(1); transition: opacity 0.35s ease-out, transform 0.35s ease-out; transition-delay: calc(var(--i, 0) * 30ms); }
.soma-gy-cells.is-in .soma-gy-cell--now { animation: soma-gy-pulse 0.9s ease-out 0.58s 1; }
@keyframes soma-gy-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.22); } 100% { transform: scale(1); } }

/* celebration overlay: ink veil, white card, drawn mark */
.soma-gy-veil { position: fixed; inset: 0; z-index: 99990; background: rgba(19, 21, 39, 0.7); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity 0.4s ease-out, visibility 0s linear 0.4s; }
.soma-gy-veil.is-open { opacity: 1; visibility: visible; transition: opacity 0.4s ease-out; }
.soma-gy-veil.is-leaving { opacity: 0; visibility: visible; }
.soma-gy-toastcard { background: #FFFFFF; border: 1px solid #E3E0DD; border-radius: 2px; max-width: 420px; width: 100%; padding: 36px 32px 30px; text-align: center; font-family: 'Raleway', system-ui, sans-serif; color: #131527; transform: translateY(10px); transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); }
.soma-gy-veil.is-open .soma-gy-toastcard { transform: translateY(0); }
.soma-gy-toastmark { display: flex; justify-content: center; margin: 0 0 18px; }
.soma-gy-toastmark svg { width: 120px; height: 120px; }
.soma-gy-toasttitle { font-size: 22px; font-weight: 600; margin: 0 0 8px; line-height: 1.3; color: #131527; }
.soma-gy-toastline { font-size: 14px; color: #6B6862; margin: 0 0 22px; line-height: 1.55; }
/* plain check ring (unclassed circle/path, direct children) draws itself */
.soma-gy-veil.is-open .soma-gy-toastmark > svg > circle:not([class]) { stroke-dasharray: 280; stroke-dashoffset: 280; animation: soma-gy-draw 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s forwards; }
.soma-gy-veil.is-open .soma-gy-toastmark > svg > path:not([class]) { stroke-dasharray: 60; stroke-dashoffset: 60; animation: soma-gy-draw 0.5s ease-out 0.7s forwards; }
/* medallion inside the overlay draws itself */
.soma-gy-veil.is-open .soma-gy-toastmark .sm-ring { stroke-dasharray: 478; stroke-dashoffset: 478; animation: soma-gy-draw 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s forwards; }
.soma-gy-veil.is-open .soma-gy-toastmark .sm-ring2 { stroke-dasharray: 450; stroke-dashoffset: 450; animation: soma-gy-draw 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.25s forwards; }
.soma-gy-veil.is-open .soma-gy-toastmark .sm-motif path, .soma-gy-veil.is-open .soma-gy-toastmark .sm-motif ellipse, .soma-gy-veil.is-open .soma-gy-toastmark .sm-motif circle { stroke-dasharray: 140; stroke-dashoffset: 140; animation: soma-gy-draw 0.7s ease-out 0.55s forwards; }
.soma-gy-veil.is-open .soma-gy-toastmark .sm-mono, .soma-gy-veil.is-open .soma-gy-toastmark .sm-arc { opacity: 0; animation: soma-gy-fade 0.5s ease-out 0.85s forwards; }

@media (max-width: 640px) {
    .soma-gy-hero { flex-direction: column; align-items: flex-start; gap: 18px; }
    .soma-gy-medals { gap: 16px; }
    .soma-gy-medal { width: 88px; }
    .soma-gy-medal svg { width: 80px; height: 80px; }
}

@media (prefers-reduced-motion: reduce) {
    .soma-gy-veil, .soma-gy-veil.is-open, .soma-gy-toastcard, .soma-gy-veil.is-open .soma-gy-toastcard { transition: none; transform: none; }
    .soma-gy-veil.is-open .soma-gy-toastmark svg *, .soma-gy-medal--draw svg * { animation: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; }
    .soma-gy-cells.is-armed .soma-gy-cell, .soma-gy-cells.is-in .soma-gy-cell { opacity: 1; transform: none; transition: none; }
    .soma-gy-cells.is-in .soma-gy-cell--now { animation: none; }
    .soma-gy-bar__fill, .soma-gy-ring__val { transition: none !important; }
    .soma-gy-nudge a, .soma-gy-btn, .soma-gy-medal--locked::after { transition: none; }
}
/* ---- soma-gy mastery tranche (2 Sep 2026): journey map, tier chips, weekly goal, compact toasts ---- */
.soma-gy-journeywrap { margin: 4px 0 20px; }
.soma-gy-journey { display: block; width: 100%; height: auto; }
.soma-gy-jmono { font-family: 'Raleway', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; fill: #6B6862; }
.soma-gy-jhere text { font-family: 'Raleway', sans-serif; font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; fill: #6B6862; }
.soma-gy-jnode { outline: none; cursor: default; }
.soma-gy-jnode:focus-visible circle:first-of-type { stroke: #131527; }
.soma-gy-journey.is-armed .soma-gy-jnode { opacity: 0; transform: scale(0.85); transform-box: fill-box; transform-origin: center; }
.soma-gy-journey.is-in .soma-gy-jnode { opacity: 1; transform: none; transition: opacity 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: calc(0.25s + var(--i, 0) * 70ms); }
@media (max-width: 480px) {
    .soma-gy-journeywrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
    .soma-gy-journey { min-width: 560px; }
}
.soma-gy-tier { display: inline-block; margin-left: 8px; padding: 2px 8px 3px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 2px; vertical-align: 2px; }
.soma-gy-tier--read { color: #6B6862; border: 1px solid #E3E0DD; background: #FFFFFF; }
.soma-gy-tier--proficient { color: #0D7C68; border: 1px solid #0D7C68; background: #FFFFFF; }
.soma-gy-tier--mastered { color: #FFFFFF; border: 1px solid #0D7C68; background: #0D7C68; }
.soma-gy-medal--mastered > svg, .soma-gy-medal--mastered .soma-gy-mark__ring { border-radius: 50%; box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 4px #0D7C68, 0 0 0 7px #FFFFFF, 0 0 0 8px #0D7C68; }
.soma-gy-week__row { display: flex; align-items: center; gap: 18px; }
.soma-gy-weekringwrap { position: relative; width: 44px; height: 44px; flex: 0 0 auto; }
.soma-gy-weekring__n { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: #131527; }
.soma-gy-week__line { margin: 0 0 8px; font-size: 15px; color: #131527; }
.soma-gy-week__met { color: #0D7C68; font-weight: 600; font-size: 13px; margin-left: 6px; white-space: nowrap; }
.soma-gy-week__met svg { vertical-align: -1px; margin-right: 2px; }
.soma-gy-goalpick { display: flex; align-items: center; gap: 6px; }
.soma-gy-goalpick__label { font-size: 12px; color: #6B6862; letter-spacing: 0.06em; text-transform: uppercase; margin-right: 4px; }
.soma-gy-goalbtn { width: 32px; height: 28px; border: 1px solid #E3E0DD; background: #FFFFFF; color: #131527; font-family: 'Raleway', sans-serif; font-size: 13px; font-weight: 600; border-radius: 2px; cursor: pointer; transition: border-color 0.3s ease-out, background 0.3s ease-out, color 0.3s ease-out; }
.soma-gy-goalbtn:hover { border-color: #0D7C68; }
.soma-gy-goalbtn.is-on { background: #0D7C68; border-color: #0D7C68; color: #FFFFFF; }
.soma-gy-quests { margin-top: 14px; border-top: 1px solid #E3E0DD; padding-top: 4px; }
.soma-gy-quest { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; text-decoration: none; border-bottom: 1px solid #E3E0DD; }
.soma-gy-quest:last-child { border-bottom: 0; }
.soma-gy-quest__label { color: #131527; font-size: 14.5px; transition: color 0.3s ease-out; }
.soma-gy-quest:hover .soma-gy-quest__label { color: #0D7C68; }
.soma-gy-quest__meta { color: #6B6862; font-size: 12.5px; white-space: nowrap; }
.soma-gy-ctoasts { position: fixed; right: 18px; bottom: 18px; z-index: 9500; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.soma-gy-ctoast { display: flex; gap: 10px; align-items: flex-start; background: #FFFFFF; border: 1px solid #E3E0DD; border-left: 2px solid #0D7C68; border-radius: 2px; padding: 11px 16px 12px 12px; max-width: 300px; box-shadow: 0 6px 20px rgba(19, 21, 39, 0.08); opacity: 0; transform: translateY(8px); transition: opacity 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: calc(var(--i, 0) * 150ms); }
.soma-gy-ctoast.is-in { opacity: 1; transform: none; }
.soma-gy-ctoast.is-out { opacity: 0; transform: translateY(4px); transition-delay: 0ms; }
.soma-gy-ctoast__mark { margin-top: 1px; }
.soma-gy-ctoast__text { display: flex; flex-direction: column; gap: 2px; }
.soma-gy-ctoast__title { font-size: 13.5px; font-weight: 600; color: #131527; }
.soma-gy-ctoast__line { font-size: 12.5px; color: #6B6862; }
@media (prefers-reduced-motion: reduce) {
    .soma-gy-journey.is-armed .soma-gy-jnode, .soma-gy-journey.is-in .soma-gy-jnode { opacity: 1; transform: none; transition: none; }
    .soma-gy-jpath { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; transition: none !important; }
    .soma-gy-ctoast { transition: none; opacity: 1; transform: none; }
    .soma-gy-ctoast.is-out { opacity: 0; }
    .soma-gy-goalbtn, .soma-gy-weekring__val, .soma-gy-quest__label { transition: none !important; }
}
/* ==========================================================================
   Loyalty & standing v3 - standing hero, integrated record strip, segmented
   weekly goal, medallion popovers, section entrances (gamify-ui.php v3,
   2 Sep 2026). Appended overrides: later rules win over v1/v2 above.
   ========================================================================== */
/* consistent card padding + eyebrow rhythm */
.soma-gy-panel { padding: 24px; }
.soma-gy-eyebrow { margin: 0 0 14px; }

/* --- standing hero --- */
.soma-gy-hero { display: flex; gap: 26px; align-items: flex-start; }
.soma-gy-ringwrap { width: 96px; height: 96px; margin-top: 2px; }
.soma-gy-ring__pct { font-size: 19px; }
.soma-gy-rank { font-family: var(--soma-font-display, 'Cormorant Garamond', Georgia, serif); font-size: 34px; font-weight: 500; line-height: 1.12; letter-spacing: 0.01em; margin: 0 0 6px; }
.soma-gy-hero__next { margin: 0; }
.soma-gy-nextrank { margin: 0 0 4px; }
.soma-gy-nudge { margin: 2px 0 0; }
.soma-gy-nudge a:focus-visible { outline: 2px solid #0D7C68; outline-offset: 2px; }
.soma-gy-meritchip { display: inline-flex; align-items: baseline; gap: 7px; margin: 16px 0 0; padding: 5px 10px 6px; border: 1px solid #E3E0DD; border-radius: 2px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #6B6862; cursor: help; transition: border-color 0.25s ease-out, color 0.25s ease-out; }
.soma-gy-meritchip:hover { border-color: #0D7C68; color: #131527; }
.soma-gy-meritchip .soma-gy-count { color: #131527; font-weight: 600; font-size: 13px; letter-spacing: 0; }

/* --- record strip, integrated: inside the panel, padded, rounded --- */
.soma-gy-record { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; background: #131527; color: #F2F0EF; font-size: 13px; letter-spacing: 0.02em; padding: 6px; margin: 20px 0 0; border-radius: 2px; }
.soma-gy-record > span { display: none; }
.soma-gy-record__seg { appearance: none; -webkit-appearance: none; background: transparent; border: 0; color: #F2F0EF; font-family: 'Raleway', system-ui, sans-serif; font-size: 13px; letter-spacing: 0.02em; display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-height: 44px; padding: 8px 14px; border-radius: 2px; cursor: pointer; text-align: left; transition: background 0.25s ease-out; }
.soma-gy-record__seg:hover { background: rgba(242, 240, 239, 0.12); }
.soma-gy-record__seg:focus-visible { outline: 2px solid #F2F0EF; outline-offset: -2px; }
.soma-gy-record__n .soma-gy-count { font-size: 16px; font-weight: 600; }
.soma-gy-record__label { color: rgba(242, 240, 239, 0.72); }
.soma-gy-record__arrow { margin-left: auto; flex: 0 0 auto; opacity: 0; transform: translateX(-3px); transition: opacity 0.25s ease-out, transform 0.25s ease-out; }
.soma-gy-record__seg:hover .soma-gy-record__arrow, .soma-gy-record__seg:focus-visible .soma-gy-record__arrow { opacity: 0.85; transform: none; }

/* --- this week: segmented goal control --- */
.soma-gy-goalpick { display: flex; align-items: center; gap: 10px; }
.soma-gy-goalseg { display: inline-flex; }
.soma-gy-goalseg .soma-gy-goalbtn { width: 44px; height: 44px; margin-left: -1px; border: 1px solid #E3E0DD; border-radius: 0; background: #FFFFFF; color: #131527; font-size: 14px; position: relative; transition: border-color 0.25s ease-out, background 0.25s ease-out, color 0.25s ease-out; }
.soma-gy-goalseg .soma-gy-goalbtn:first-child { margin-left: 0; border-radius: 2px 0 0 2px; }
.soma-gy-goalseg .soma-gy-goalbtn:last-child { border-radius: 0 2px 2px 0; }
.soma-gy-goalseg .soma-gy-goalbtn:hover { background: #F8F6F5; border-color: #131527; z-index: 1; }
.soma-gy-goalseg .soma-gy-goalbtn.is-on { background: #131527; border-color: #131527; color: #FFFFFF; z-index: 1; }
.soma-gy-goalseg .soma-gy-goalbtn:focus-visible { outline: 2px solid #0D7C68; outline-offset: 2px; z-index: 2; }

/* goal met: check draws itself, ring settles, once */
.soma-gy-week.is-met .soma-gy-metcheck path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: soma-gy-draw 0.45s ease-out 0.4s forwards; }
.soma-gy-week.is-met .soma-gy-weekringwrap svg { animation: soma-gy-settle 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.8s 1; }
@keyframes soma-gy-settle { 0% { transform: scale(1); } 40% { transform: scale(1.05); } 100% { transform: scale(1); } }

/* quest rows: hover wash + arrow nudge */
.soma-gy-quest { align-items: center; padding: 11px 10px; margin: 0 -10px; border-radius: 2px; transition: background 0.25s ease-out; }
.soma-gy-quest:hover { background: #F8F6F5; }
.soma-gy-quest:focus-visible { outline: 2px solid #0D7C68; outline-offset: -2px; background: #F8F6F5; }
.soma-gy-quest__side { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.soma-gy-quest__arrow { color: #0D7C68; flex: 0 0 auto; transition: transform 0.25s ease-out; }
.soma-gy-quest:hover .soma-gy-quest__arrow, .soma-gy-quest:focus-visible .soma-gy-quest__arrow { transform: translateX(3px); }

/* --- medallion gallery: buttons, always-visible names, popovers --- */
.soma-gy-medals { gap: 22px; }
.soma-gy-medalcell { position: relative; }
.soma-gy-medal { appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer; font-family: 'Raleway', system-ui, sans-serif; width: 104px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.soma-gy-medal svg { width: 96px; height: 96px; display: block; border-radius: 50%; transition: transform 0.25s ease-out, box-shadow 0.25s ease-out, opacity 0.25s ease-out, filter 0.25s ease-out; }
.soma-gy-medal .soma-gy-mark__ring { width: 96px; height: 96px; font-size: 20px; transition: transform 0.25s ease-out, box-shadow 0.25s ease-out, opacity 0.25s ease-out; }
.soma-gy-medal__name { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #6B6862; line-height: 1.55; }
.soma-gy-medal--earned .soma-gy-medal__name { color: #131527; }
.soma-gy-medal--earned:hover > svg, .soma-gy-medal--earned:hover > .soma-gy-mark__ring { transform: translateY(-2px); box-shadow: 0 2px 8px rgba(19, 21, 39, 0.08); }
.soma-gy-medal--earned.soma-gy-medal--mastered:hover > svg, .soma-gy-medal--earned.soma-gy-medal--mastered:hover > .soma-gy-mark__ring { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 4px #0D7C68, 0 0 0 7px #FFFFFF, 0 0 0 8px #0D7C68, 0 2px 8px rgba(19, 21, 39, 0.08); }
.soma-gy-medal--locked { cursor: pointer; }
.soma-gy-medal--locked > svg, .soma-gy-medal--locked > .soma-gy-mark__ring { opacity: 0.3; filter: grayscale(1); }
.soma-gy-medal--locked:hover > svg, .soma-gy-medal--locked:hover > .soma-gy-mark__ring { opacity: 0.5; }
.soma-gy-medal:focus-visible { outline: 2px solid #0D7C68; outline-offset: 3px; border-radius: 2px; }
/* the v2 hover tooltip yields to the click popover */
.soma-gy-medal--locked::after, .soma-gy-medal--locked:hover::after, .soma-gy-medal--locked:focus::after { content: none; }

.soma-gy-medalpop { position: fixed; z-index: 9600; width: 260px; background: #FFFFFF; border: 1px solid #E3E0DD; border-radius: 2px; box-shadow: 0 10px 30px rgba(19, 21, 39, 0.12); padding: 14px 16px 15px; text-align: left; font-family: 'Raleway', system-ui, sans-serif; opacity: 0; transform: translateY(4px); transition: opacity 0.2s ease-out, transform 0.2s ease-out; }
.soma-gy-medalpop.is-open { opacity: 1; transform: none; }
.soma-gy-medalpop__name { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #131527; margin: 0 0 7px; }
.soma-gy-medalpop__state { font-size: 13px; color: #131527; margin: 0; line-height: 1.5; }
.soma-gy-medalpop__state--earned { color: #0D7C68; font-weight: 600; display: flex; gap: 6px; align-items: center; }
.soma-gy-medalpop__state--earned svg { flex: 0 0 auto; }
.soma-gy-medalpop__progress { font-size: 12.5px; color: #6B6862; margin: 6px 0 0; line-height: 1.5; }
.soma-gy-medalpop__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 11px; font-size: 13px; font-weight: 600; color: #0D7C68; text-decoration: none; border-bottom: 1px solid #0D7C68; padding-bottom: 1px; transition: color 0.25s ease-out, border-bottom-color 0.25s ease-out; }
.soma-gy-medalpop__link:hover { color: #131527; border-bottom-color: #131527; }
.soma-gy-medalpop__link:focus-visible { outline: 2px solid #0D7C68; outline-offset: 2px; }
.soma-gy-medalpop__arrow { transition: transform 0.25s ease-out; }
.soma-gy-medalpop__link:hover .soma-gy-medalpop__arrow { transform: translateX(3px); }

/* --- section entrances: panels rise once; hero children stagger 80ms --- */
.soma-gy-panel.is-armed { opacity: 0; transform: translateY(12px); }
.soma-gy-panel.is-in { opacity: 1; transform: none; transition: opacity 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); }
.soma-gy-panel.is-armed .soma-gy-rise { opacity: 0; transform: translateY(8px); }
.soma-gy-panel.is-in .soma-gy-rise { opacity: 1; transform: none; transition: opacity 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: calc(var(--i, 0) * 80ms); }

/* --- small screens: no page-level horizontal scroll; the gallery scrolls
       inside itself; medallions keep their 96px size --- */
@media (max-width: 640px) {
    .soma-gy-medals { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
    .soma-gy-medalcell { flex: 0 0 auto; }
    .soma-gy-medal { width: 104px; }
    .soma-gy-medal svg { width: 96px; height: 96px; }
    .soma-gy-record { flex-direction: column; }
    .soma-gy-record__seg { width: 100%; }
    .soma-gy-week__row { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
    .soma-gy-panel.is-armed, .soma-gy-panel.is-armed .soma-gy-rise { opacity: 1; transform: none; }
    .soma-gy-panel.is-in, .soma-gy-panel.is-in .soma-gy-rise { transition: none; }
    .soma-gy-week.is-met .soma-gy-metcheck path { animation: none; stroke-dashoffset: 0; }
    .soma-gy-week.is-met .soma-gy-weekringwrap svg { animation: none; }
    .soma-gy-medal svg, .soma-gy-medal .soma-gy-mark__ring, .soma-gy-medalpop, .soma-gy-quest, .soma-gy-quest__arrow, .soma-gy-record__seg, .soma-gy-record__arrow, .soma-gy-meritchip, .soma-gy-medalpop__arrow, .soma-gy-medalpop__link, .soma-gy-goalseg .soma-gy-goalbtn { transition: none; }
    .soma-gy-medal--earned:hover > svg, .soma-gy-medal--earned:hover > .soma-gy-mark__ring { transform: none; }
}

/* ==========================================================================
   soma-gy v4 - interaction-state reset (fixes Astra blue button leak) and
   premium rounded pass (2 Sep 2026). Appended: later rules win over v1-v3.
   ========================================================================== */

/* --- A. hard reset for soma-gy buttons: Astra's global button:hover /
       button:focus rules (default accent #0170B9) outrank a bare class
       selector, painting a solid blue rectangle over the medallion art.
       !important + explicit interaction states stop every theme leak. --- */
.soma-gy-medal,
.soma-gy-medal:hover,
.soma-gy-medal:focus,
.soma-gy-medal:active {
    appearance: none;
    -webkit-appearance: none;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: inherit;
    transition: background 0.25s ease-out, transform 0.15s ease-out;
}
.soma-gy-medal:focus:not(:focus-visible) { outline: none; }
.soma-gy-medal:focus-visible { outline: 2px solid #0D7C68 !important; outline-offset: 3px; border-radius: 12px; }
.soma-gy-medal:active { transform: scale(0.98); }
.soma-gy-medal[aria-expanded="true"],
.soma-gy-medal[aria-expanded="true"]:hover,
.soma-gy-medal[aria-expanded="true"]:focus {
    background: #F0F7F5 !important;
    border-radius: 12px;
}

/* record strip segments: same reset, dark-strip states */
.soma-gy-record__seg,
.soma-gy-record__seg:active {
    appearance: none;
    -webkit-appearance: none;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #F2F0EF !important;
}
.soma-gy-record__seg:hover,
.soma-gy-record__seg:focus,
.soma-gy-record__seg:focus-visible { background: rgba(242, 240, 239, 0.12) !important; border: 0 !important; box-shadow: none !important; color: #F2F0EF !important; }
.soma-gy-record__seg:focus:not(:focus-visible) { outline: none; }
.soma-gy-record__seg:focus-visible { outline: 2px solid #F2F0EF; outline-offset: -2px; }
.soma-gy-record__seg:active { transform: scale(0.98); }

/* weekly-goal segmented control: explicit states beat theme button rules */
.soma-gy-goalseg .soma-gy-goalbtn,
.soma-gy-goalseg .soma-gy-goalbtn:focus {
    appearance: none;
    -webkit-appearance: none;
    background: #FFFFFF !important;
    color: #131527 !important;
    border: 1px solid #E8E5E2 !important;
    box-shadow: none !important;
}
.soma-gy-goalseg .soma-gy-goalbtn:hover { background: #F8F6F5 !important; color: #131527 !important; border-color: #131527 !important; }
.soma-gy-goalseg .soma-gy-goalbtn.is-on,
.soma-gy-goalseg .soma-gy-goalbtn.is-on:hover,
.soma-gy-goalseg .soma-gy-goalbtn.is-on:focus { background: #131527 !important; color: #FFFFFF !important; border-color: #131527 !important; }
.soma-gy-goalseg .soma-gy-goalbtn:focus-visible { outline: 2px solid #0D7C68; outline-offset: 2px; }
.soma-gy-goalseg .soma-gy-goalbtn:active { transform: scale(0.98); }

/* solid CTA button (credit card, toast close): pin its own states */
.soma-gy-btn,
.soma-gy-btn:focus { background: #131527 !important; color: #F2F0EF !important; border: 0 !important; box-shadow: none !important; }
.soma-gy-btn:hover { background: #0D7C68 !important; color: #FFFFFF !important; }
.soma-gy-btn:focus:not(:focus-visible) { outline: none; }
.soma-gy-btn:focus-visible { outline: 2px solid #0D7C68; outline-offset: 3px; }
.soma-gy-btn:active { transform: scale(0.98); }

/* --- B. premium rounded pass ------------------------------------------- */
/* panels and the course rail: 14px, soft layered shadow, 28px padding */
.soma-gy-panel {
    border-radius: 14px;
    border-color: #E8E5E2;
    padding: 28px;
    box-shadow: 0 1px 2px rgba(19, 21, 39, 0.04), 0 8px 24px rgba(19, 21, 39, 0.05);
}
.soma-gy-rail {
    border-radius: 14px;
    border-color: #E8E5E2;
    padding: 14px 20px;
    box-shadow: 0 1px 2px rgba(19, 21, 39, 0.04), 0 8px 24px rgba(19, 21, 39, 0.05);
}

/* inner cards and popovers: 12px */
.soma-gy-creditcard { border-radius: 12px; border-color: #E8E5E2; }
.soma-gy-medalpop { border-radius: 12px; border-color: #E8E5E2; box-shadow: 0 1px 2px rgba(19, 21, 39, 0.05), 0 14px 34px rgba(19, 21, 39, 0.10); }
.soma-gy-toastcard { border-radius: 12px; border-color: #E8E5E2; box-shadow: 0 1px 2px rgba(19, 21, 39, 0.05), 0 18px 44px rgba(19, 21, 39, 0.14); }
.soma-gy-ctoast { border-radius: 12px; border-color: #E8E5E2; border-left: 2px solid #0D7C68; }

/* chips, tier labels, small buttons: 9px */
.soma-gy-tier { border-radius: 9px; }
.soma-gy-tier--read { border-color: #E8E5E2; }
.soma-gy-meritchip { border-radius: 9px; border-color: #E8E5E2; }
.soma-gy-quizpass { border-radius: 9px; }
.soma-gy-btn { border-radius: 9px; }
.soma-gy-quest { border-radius: 9px; }

/* goal segmented control: outer corners 9px, inner joins square */
.soma-gy-goalseg .soma-gy-goalbtn { border-radius: 0; }
.soma-gy-goalseg .soma-gy-goalbtn:first-child { border-radius: 9px 0 0 9px; }
.soma-gy-goalseg .soma-gy-goalbtn:last-child { border-radius: 0 9px 9px 0; }

/* progress bars fully rounded */
.soma-gy-bar { border-radius: 99px; }
.soma-gy-bar__fill { border-radius: 99px; }

/* rhythm week cells 4px */
.soma-gy-cell { border-radius: 4px; }

/* dark record strip 10px, its segments 8px */
.soma-gy-record { border-radius: 10px; }
.soma-gy-record__seg { border-radius: 8px; }

/* hairlines and inside-card dividers softened */
.soma-gy-maprow { border-top-color: #F1EEEB; }
.soma-gy-quests { border-top-color: #F1EEEB; }
.soma-gy-quest { border-bottom-color: #F1EEEB; }
.soma-gy-day, .soma-gy-weekstate { border-left-color: #E8E5E2; }
.soma-gy-day--read, .soma-gy-weekstate--read { border-left-color: #0D7C68; }

/* slightly stronger hover elevation on interactive cards */
.soma-gy-medal--earned:hover > svg,
.soma-gy-medal--earned:hover > .soma-gy-mark__ring { transform: translateY(-2px); box-shadow: 0 2px 6px rgba(19, 21, 39, 0.08), 0 10px 22px rgba(19, 21, 39, 0.08); }

/* mobile: keep the radius scale, ease the padding, no overflow */
@media (max-width: 640px) {
    .soma-gy-panel { padding: 20px; }
    .soma-gy-rail { padding: 12px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .soma-gy-medal:active,
    .soma-gy-record__seg:active,
    .soma-gy-goalseg .soma-gy-goalbtn:active,
    .soma-gy-btn:active { transform: none; }
    .soma-gy-medal, .soma-gy-medal:hover, .soma-gy-medal:focus, .soma-gy-medal:active { transition: none; }
}
/* Footer Thread block: the title is now a link to /newsletter/ (3 Sep 2026). */
a.soma-footer__signup-title{color:inherit;text-decoration:none}
a.soma-footer__signup-title:hover{text-decoration:underline;text-underline-offset:3px}
.soma-footer__signup-line a{color:inherit;text-decoration:underline;text-underline-offset:3px}


/* --- The Thread: items inside an issue (4 Sep 2026) --------------------- */
/* The pipeline renders each sweep item as .soma-issue__item; the tier label
   sits on the source line, never above the heading. */
.soma-issue__item { display: flex; flex-direction: column; gap: 14px; padding: 8px 0 28px; border-bottom: 1px solid var(--soma-line, #E5E3E1); }
.soma-issue__item:last-child { border-bottom: 0; }
.soma-issue__item h2 { margin: 0 0 4px; font-size: var(--soma-t-h3); line-height: 1.15; }
.soma-issue__item p { margin: 0; }
.soma-issue__source { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: var(--soma-t-small); color: #6b6d78; margin-top: 4px !important; }
.soma-issue__source a { color: var(--soma-secondary); }
.soma-issue__tier { display: inline-block; padding: 3px 9px; border-radius: 2px; border: 1px solid #B9B7B4; color: #545454; font: 600 10px/1.5 var(--soma-font-body, Raleway, sans-serif); letter-spacing: .10em; text-transform: uppercase; }
.soma-issue__tier--peer-reviewed { border-color: #0D7C68; color: #0D7C68; }
.soma-issue__tier--preprint { border-color: #C9A227; color: #7A5A00; }


/* --- The reading band (4 Sep 2026) ------------------------------------- */
/* The cover photograph as the ground for the title. Edge to edge, with a
   veil that is always dark enough under the type; .soma-cover--light deepens
   it for pale covers (measured once per image, see read-band.php). */
.soma-cover { position: relative; align-self: flex-start; width: calc(100vw - var(--soma-sbw, 0px)); margin-left: calc(50% - (100vw - var(--soma-sbw, 0px)) / 2); min-height: clamp(360px, 44vw, 560px); display: flex; align-items: flex-end; overflow: hidden; background: var(--soma-primary); }
.soma-cover__media { position: absolute; inset: 0; }
.soma-cover__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.soma-cover__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19,21,39,.06) 0%, rgba(19,21,39,.42) 50%, rgba(19,21,39,.84) 100%); }
.soma-cover--light .soma-cover__media::after { background: linear-gradient(180deg, rgba(19,21,39,.18) 0%, rgba(19,21,39,.58) 45%, rgba(19,21,39,.92) 100%); }
.soma-cover__inner { position: relative; width: 100%; max-width: var(--soma-read, 640px); margin: 0 auto; padding: clamp(2.5rem, 2rem + 2vw, 4rem) var(--soma-gutter, 24px) clamp(2rem, 1.5rem + 1.5vw, 2.75rem); display: flex; flex-direction: column; gap: 16px; }
.soma-cover h1 { margin: 0; color: var(--soma-white, #F2F0EF); font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem); line-height: 1.06; text-wrap: balance; text-shadow: 0 2px 28px rgba(0,0,0,.35); }
.soma-cover__standfirst { margin: 0; color: rgba(242,240,239,.92); font-size: var(--soma-t-lead); line-height: 1.6; text-shadow: 0 1px 18px rgba(0,0,0,.3); }
.soma-cover__eyebrow { margin: 0; color: rgba(242,240,239,.8); font-size: var(--soma-t-label); font-weight: 600; letter-spacing: var(--soma-ls-label); text-transform: uppercase; }
.soma-cover .soma-crumbs { margin: 0; }
.soma-read--banded { padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem) !important; }
@media (min-width: 1100px) { .soma-cover__inner { max-width: 760px; } }
@media (max-width: 600px) { .soma-cover { min-height: 320px; } }


/* --- The reading sidebar (4 Sep 2026) ---------------------------------- */
.soma-read__grid { display: flex; flex-direction: column; align-items: center; width: 100%; gap: 20px; }
.soma-side { width: 100%; max-width: var(--soma-read, 640px); display: flex; flex-direction: column; gap: 22px; }
.soma-side__toc { border: 1px solid var(--soma-line); border-radius: var(--soma-r-md); padding: 12px 16px; background: var(--soma-white); }
.soma-side__toc summary { cursor: pointer; list-style: none; font-size: var(--soma-t-label); font-weight: 600; letter-spacing: var(--soma-ls-label); text-transform: uppercase; color: var(--soma-secondary-deep); display: flex; align-items: center; justify-content: space-between; }
.soma-side__toc summary::-webkit-details-marker { display: none; }
.soma-side__toc summary::after { content: "+"; font-size: 16px; color: var(--soma-text); }
.soma-side__toc[open] summary::after { content: "\2013"; }
.soma-side__list { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.soma-side__list a { display: block; padding: 7px 0 7px 14px; margin-left: -14px; border-left: 2px solid transparent; font-size: var(--soma-t-small); line-height: 1.4; color: var(--soma-text); text-decoration: none; }
.soma-side__list a:hover { color: var(--soma-primary); }
.soma-side__list a.is-here { border-left-color: var(--soma-secondary); color: var(--soma-primary); font-weight: 600; }
.soma-side__thread { display: none; padding: 18px 18px 14px; border-radius: var(--soma-r-md); background: var(--soma-beige); }
.soma-side__eyebrow { margin: 0 0 6px; font-size: var(--soma-t-label); font-weight: 600; letter-spacing: var(--soma-ls-label); text-transform: uppercase; color: var(--soma-secondary-deep); }
.soma-side__blurb { margin: 0 0 12px; font-size: var(--soma-t-small); line-height: 1.55; color: var(--soma-text); }
.soma-side__thread .soma-form-slot { margin: 0; }
.soma-side__thread .wpforms-field-label { font-size: .78rem; }
@media (min-width: 1100px) {
  .soma-read__grid { display: grid; grid-template-columns: 240px var(--soma-read, 640px); justify-content: center; align-items: start; column-gap: 64px; }
  .soma-side { position: sticky; top: 132px; max-width: none; padding-top: 6px; }
  .soma-side__toc { border: 0; padding: 0; background: transparent; }
  .soma-side__toc summary { pointer-events: none; }
  .soma-side__toc summary::after { display: none; }
  .soma-side__thread { display: block; }
}

.soma-prose h2, .soma-prose h3, .soma-referenced-reading h2 { scroll-margin-top: 150px; }

/* --- Reading contrast (4 Sep 2026) ---------------------------------- */
.soma-prose p, .soma-prose li, .soma-prose td, .soma-referenced-reading p, .soma-referenced-reading li, .soma-issue__item p, .soma-read__standfirst, .soma-anchor__blurb { color: #262838; }

/* Space under the cover band (4 Sep 2026) */
.soma-read--banded .soma-read__grid { padding-top: clamp(32px, 2rem + 1.5vw, 56px); }
.soma-read--banded .soma-read__inner { gap: 26px; }
.soma-read--banded .soma-read__meta { margin-bottom: 4px; }
@media (min-width: 1100px) { .soma-read--banded .soma-side { padding-top: 10px; } }

/* Issue feature: no image panel (4 Sep 2026) */
.soma-issue__body { gap: 10px; }
.soma-issue__body .soma-eyebrow { margin-bottom: 4px; }



/* Issue feature: a white card like the journal rows (4 Sep 2026) */
.soma-issue { border-radius: var(--soma-r-lg); background: var(--soma-white); border: 0; box-shadow: none; }
.soma-issue__body { padding: 28px 32px 30px; }
.soma-issue__title { font-size: var(--soma-t-h2); }


/* Book hero: tide (4 Sep 2026). Per-book, meta soma_book_hero_style = tide.
   The jacket's cream and navy tide run across the band, meeting the cover's
   own tide edge; the cover stands over the band's edge with a deep shadow so
   it reads as a physical book. Title on the cream, subtitle on the navy,
   the way the jacket is laid out. */
.soma-book-hero--tide {
  --pt: clamp(2.5rem, 1.6rem + 2.4vw, 4rem);
  --tide: calc(var(--pt) + 200px);
  position: relative; overflow: visible; isolation: isolate;
  align-items: flex-start;
  padding-top: var(--pt);
  padding-bottom: clamp(4.5rem, 2.5rem + 5vw, 7.5rem);
  background: linear-gradient(180deg, #F1EDE2 0, #F1EDE2 calc(var(--tide) + 70px), #0E1D27 calc(var(--tide) + 70px), #0B1720 100%);
}
.soma-book-hero--tide::before {
  content: ""; position: absolute; left: -3%; right: -3%; top: var(--tide); height: 90px;
  background: #0E1D27; border-radius: 50% 50% 0 0 / 100% 100% 0 0; transform: rotate(-1.6deg);
  z-index: -1;
}
.soma-book-hero--tide::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(var(--tide) - 70px); bottom: 0;
  background: url(https://academy.somalongevitysciences.com/wp-content/uploads/2026/09/soma-book-speckle.webp) center top / 100% auto no-repeat; opacity: .95; pointer-events: none;
  z-index: -1;
}
.soma-book-hero--tide .soma-book-hero__cover {
  width: 380px; height: 570px; border-radius: 3px; position: relative; z-index: 2;
  margin-bottom: calc(-1 * clamp(4.5rem, 2.5rem + 5vw, 7.5rem) - 48px);
  box-shadow: -28px 64px 90px -16px rgba(11,23,32,.62), 0 22px 40px -10px rgba(11,23,32,.4), 0 0 0 1px rgba(11,23,32,.08);
}
.soma-book-hero--tide .soma-book-hero__body { padding-top: 0; gap: 14px; }
.soma-book-hero--tide .soma-book-hero__body h1 { margin: 0; }
.soma-book-hero--tide .soma-band__lead { margin-top: 100px; color: #F1EDE2; max-width: 620px; }
.soma-book-hero--tide .soma-book-hero__actions { margin-top: 18px; }
.soma-book-hero--tide .soma-btn { background: #F1EDE2 !important; color: #0E1D27 !important; }\n.soma-book-hero--tide .soma-btn svg { color: #0E1D27; stroke: #0E1D27; }
.soma-book-hero--tide .soma-btn:hover { background: #fff !important; color: #0E1D27 !important; }
.soma-book-hero--tide + .soma-section { padding-top: clamp(5.5rem, 3rem + 5vw, 8.5rem); }
@media (max-width: 900px) {
  /* Stacked: the cover sits at the top, the tide meets its own edge at both
     sides, and everything below the cover reads on the navy. */
  .soma-book-hero--tide { --tide: calc(var(--pt) + 138px); align-items: flex-start; padding-bottom: clamp(2.5rem, 1.6rem + 2.4vw, 4rem); }
  .soma-book-hero--tide::before { top: var(--tide); height: 84px; left: -6%; right: -6%; border-radius: 50% 50% 0 0 / 36px 36px 0 0; transform: rotate(-2.4deg); }
  .soma-book-hero--tide::after { top: calc(var(--tide) - 50px); }
  .soma-book-hero--tide .soma-book-hero__cover { width: 220px; height: 330px; margin-bottom: 8px; box-shadow: -16px 36px 54px -12px rgba(11,23,32,.6), 0 14px 24px -8px rgba(11,23,32,.4), 0 0 0 1px rgba(11,23,32,.08); }
  .soma-book-hero--tide .soma-book-hero__body h1 { color: #F1EDE2; }
  .soma-book-hero--tide .soma-band__lead { margin-top: 0; }
  .soma-book-hero--tide .soma-book-hero__actions { margin-top: 6px; }
  .soma-book-hero--tide + .soma-section { padding-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
}


/* Featured-book card: tide (4 Sep 2026). Same jacket treatment as the book
   page hero, inside the rounded card on /books/ and the compact home panel. */
.soma-featured-book--tide {
  --pad: clamp(1.75rem, 1rem + 2.4vw, 3rem);
  --tide: calc(var(--pad) + 205px);
  position: relative; overflow: hidden; isolation: isolate; align-items: flex-start;
  background: linear-gradient(180deg, #F1EDE2 0, #F1EDE2 calc(var(--tide) + 60px), #0E1D27 calc(var(--tide) + 60px), #0B1720 100%);
  padding-bottom: calc(var(--pad) + 8px);
}
.soma-featured-book--tide::before {
  content: ""; position: absolute; left: -3%; right: -3%; top: var(--tide); height: 80px;
  background: #0E1D27; border-radius: 50% 50% 0 0 / 100% 100% 0 0; transform: rotate(-1.6deg); z-index: -1;
}
.soma-featured-book--tide::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(var(--tide) - 60px); bottom: 0;
  background: url(https://academy.somalongevitysciences.com/wp-content/uploads/2026/09/soma-book-speckle.webp) center top / 100% auto no-repeat; opacity: .95; pointer-events: none; z-index: -1;
}
.soma-featured-book--tide .soma-featured-book__cover {
  border-radius: 3px; position: relative; z-index: 2;
  box-shadow: -22px 48px 70px -14px rgba(11,23,32,.6), 0 18px 30px -10px rgba(11,23,32,.4), 0 0 0 1px rgba(11,23,32,.08);
}
.soma-featured-book--tide .soma-featured-book__body { gap: 12px; padding-top: 28px; }
.soma-featured-book--tide .soma-featured-book__title { margin-bottom: 110px; }
.soma-featured-book--tide .soma-featured-book__text { color: #F1EDE2; }
.soma-featured-book--tide .soma-btn { background: #F1EDE2 !important; color: #0E1D27 !important; }
.soma-featured-book--tide:hover, .soma-featured-book--tide:hover * { text-decoration: none !important; }
.soma-featured-book--tide:hover .soma-featured-book__title { color: var(--soma-primary); }
.soma-featured-book--tide.soma-featured-book--compact { --tide: calc(var(--pad) + 130px); }
.soma-featured-book--tide.soma-featured-book--compact .soma-featured-book__body { padding-top: 12px; }
.soma-featured-book--tide.soma-featured-book--compact .soma-featured-book__title { margin-bottom: 128px; }
/* Same breakpoint as the card's own stacking rule (800px). At 900 the tide
   colours switched to ivory-on-dark while the card was still a row, so between
   801 and 900px the title and subtitle sat ivory on beige and vanished. */
@media (max-width: 800px) {
  .soma-featured-book--tide { --tide: calc(var(--pad) + min(220px, 58vw) * 0.7); align-items: center; padding-bottom: var(--pad); }
  .soma-featured-book--tide::before { height: 84px; left: -6%; right: -6%; border-radius: 50% 50% 0 0 / 36px 36px 0 0; transform: rotate(-2.4deg); }
  .soma-featured-book--tide::after { top: calc(var(--tide) - 50px); }
  .soma-featured-book--tide .soma-featured-book__cover { box-shadow: -16px 36px 54px -12px rgba(11,23,32,.6), 0 14px 24px -8px rgba(11,23,32,.4), 0 0 0 1px rgba(11,23,32,.08); }
  .soma-featured-book--tide .soma-featured-book__body { padding-top: 6px; }
  .soma-featured-book--tide .soma-featured-book__title,
  .soma-featured-book--tide.soma-featured-book--compact .soma-featured-book__title { margin-bottom: 0; color: #F1EDE2; }
  .soma-featured-book--tide:hover .soma-featured-book__title { color: #fff; }
  .soma-featured-book--tide .soma-eyebrow { color: #C9A85C; }
  .soma-featured-book--tide.soma-featured-book--compact { --tide: calc(var(--pad) + min(190px, 52vw) * 0.7); }
}


/* Featured cards on the New on the Academy strip (4 Sep 2026): the podcast
   and the book hold cards one and two permanently, in the jacket's ink with
   a gold label, so they read as featured rather than as the newest. */
.soma-feature--featured { background: #0E1D27; color: #F1EDE2; }
.soma-feature--featured:hover { color: #F1EDE2; }
.soma-feature--featured .soma-feature__kind { color: #C9A55C; }
.soma-feature--featured .soma-feature__title { color: #F1EDE2; }
.soma-feature--featured .soma-feature__meta { color: rgba(241,237,226,.72); }
.soma-feature--featured .soma-feature__media { background: #0E1D27; }
.soma-feature--featured:hover .soma-feature__title { color: #FFFFFF; }


/* Start Here idea cards (4 Sep 2026): the periwinkle numbers were too light to
   read on the grey card; set in the same green as the icon, ink-dark enough to
   count as a number and not a watermark. */
.elementor .card-idea .idea-number, .elementor .idea-number { color: var(--soma-secondary-deep, #1F6B5A); opacity: 1; }


/* -------------------------------------------------------------------------
   Deep Dives shelf (4 Sep 2026)

   The chips became the page's only navigation when the seven field cards were
   dropped, so they carry a count: a reader can see a field is thin before
   spending a click on it. The note beneath them carries what the seven
   headings used to say.
   ---------------------------------------------------------------------- */
.soma-dd-picks { display: flex; flex-direction: column; gap: 10px; }

/* The count rides inside the chip rather than after it, so a wrapping row
   never separates a number from the field it belongs to. */
.soma-chip__n {
  margin-left: 7px;
  font-variant-numeric: tabular-nums;
  opacity: .55;
}
.soma-chip--on .soma-chip__n { opacity: .7; }

/* Count and description on one line, wrapping to two when the description
   needs the width. The count is the label voice, the description the reading
   voice, which is what keeps them legible as two different things rather
   than one long sentence. */
.soma-dd-note {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 6px 14px;
  margin: 18px 0 0;
}
.soma-dd-note__count {
  flex: none;
  font-size: var(--soma-t-label); font-weight: 600;
  letter-spacing: var(--soma-ls-label); text-transform: uppercase;
  color: var(--soma-secondary);
}
.soma-dd-note__desc {
  font-size: var(--soma-t-body); line-height: 1.6;
  color: var(--soma-text); max-width: 68ch;
}

/* Conference sign-up, as a banner rather than loose text on the page ground.
   With nothing scheduled this box is the whole page, so it is given a border,
   a card of its own and a form panel inside it: words on the left, the one
   thing to do on the right. Titles are claimed with two classes because the
   band rules for h2 and lead would otherwise win. */
.soma-signup { padding-top: clamp(2rem,4vw,3.5rem); }
.soma-signup .soma-signup__card {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: clamp(1.75rem,3vw,3.5rem); align-items: center;
  padding: clamp(1.75rem,2.6vw,3rem);
  border: 1px solid var(--soma-line, rgba(19,21,39,.12));
  border-radius: var(--soma-r-lg, 24px);
  background: var(--soma-white, #fff);
  box-shadow: 0 24px 48px -40px var(--soma-shadow, rgba(19,21,39,.08));
}
.soma-signup .soma-signup__card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--soma-secondary, #0D7C68);
}
.soma-signup .soma-signup__card--single { grid-template-columns: minmax(0,1fr); }
.soma-signup .soma-signup__words { min-width: 0; }
.soma-signup .soma-signup__title {
  margin: .75rem 0 .75rem; font-family: var(--soma-font-display, Cormorant, Georgia, serif);
  font-size: var(--soma-t-h2, 2.5rem); font-weight: 600; line-height: 1.1;
  color: var(--soma-primary, #131527);
}
.soma-signup .soma-signup__lead {
  margin: 0; max-width: 44ch;
  font-size: var(--soma-t-body, 1.0625rem); line-height: var(--soma-lh-body, 1.7);
  color: var(--soma-text, #545454);
}
.soma-signup .soma-signup__points {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: .6rem;
  font-size: var(--soma-t-small, .9375rem); color: var(--soma-primary, #131527);
}
.soma-signup .soma-signup__points li { position: relative; padding-left: 1.4rem; }
.soma-signup .soma-signup__points li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--soma-secondary, #0D7C68); opacity: .45;
}
.soma-signup .soma-signup__panel {
  background: var(--soma-base, #F2F0EF);
  border: 1px solid var(--soma-line, rgba(19,21,39,.12));
  border-radius: var(--soma-r-md, 16px);
  padding: clamp(1.25rem,2vw,2rem);
}
.soma-signup .soma-signup__form { max-width: none; gap: 12px; }
.soma-signup .soma-signup__field { flex-direction: column; gap: 12px; }
.soma-signup .soma-signup__input { flex: 1 1 auto; width: 100%; }
.soma-signup .soma-signup__submit { width: 100%; justify-content: center; }
.soma-signup .soma-signup__hint { max-width: none; }
@media (max-width: 900px) {
  .soma-signup .soma-signup__card { grid-template-columns: minmax(0,1fr); gap: 1.75rem; }
  .soma-signup .soma-signup__title { font-size: var(--soma-t-h3, 1.75rem); }
}
/* === Page hero bands with artwork ======================================
   The Thread and the Events page both opened on plain white, which made them
   the two quietest openings on a site whose every course page opens on a dark
   band carrying its own picture. Same treatment here: the picture behind, a
   heavy gradient across the half the words sit on, white type. One pattern,
   so a third page joins by setting --soma-heroart and adding the class. */
.soma-heroart,
body.page-id-1348 .media-hero,
.soma-events > .soma-band:first-child{position:relative;isolation:isolate;color:var(--soma-white)}
.soma-heroart::before,.soma-heroart::after,
body.page-id-1348 .media-hero::before,body.page-id-1348 .media-hero::after,
.soma-events > .soma-band:first-child::before,.soma-events > .soma-band:first-child::after{content:"";position:absolute;inset:0;pointer-events:none}
.soma-heroart::before,
body.page-id-1348 .media-hero::before,
.soma-events > .soma-band:first-child::before{
  z-index:-2;
  background-image:var(--soma-heroart);
  background-size:cover;background-position:center right;
  background-color:var(--soma-primary);
}
.soma-heroart::after,
body.page-id-1348 .media-hero::after,
.soma-events > .soma-band:first-child::after{
  z-index:-1;
  background:linear-gradient(100deg,rgba(8,10,22,.95),rgba(8,10,22,.86) 50%,rgba(8,10,22,.55));
}

/* The Thread. The band image is the cover with its wordmark cropped away and
   the plate extended left, so the heading is not printed twice. */
body.page-id-1348 .media-hero{--soma-heroart:url("/wp-content/uploads/2026/09/the-thread-hero-globe2-scaled.webp")}
/* The globe sits behind the words rather than out on the right, where the
   sign-up panel covered it. So this band drops the course pages' heavy
   left-hand crush and uses an even wash instead: the artwork is thin light
   threads on near-black, quiet enough to sit under white type. */
body.page-id-1348 .media-hero::after{background:linear-gradient(100deg,rgba(8,10,22,.80),rgba(8,10,22,.72) 55%,rgba(8,10,22,.80))}
/* Anchored left rather than right: as the window narrows the band crops from
   the sides, and anchoring right walked the globe off the screen. */
body.page-id-1348 .media-hero::before{background-position:left center}
/* The sign-up panel keeps its own light surface, so its type goes back to ink
   rather than inheriting the white the band sets. */
body.page-id-1348 .media-hero .elementor-element-sa001j6{color:var(--soma-primary)}
/* Elementor sets its own colour on the heading and the paragraphs, so the
   band's inherited white never reached them. Named explicitly, and only
   outside the sign-up panel, which keeps its own light surface. */
body.page-id-1348 .media-hero h1,
body.page-id-1348 .media-hero > :not(.elementor-element-sa001j6) p,
body.page-id-1348 .media-hero > :not(.elementor-element-sa001j6) :not(.elementor-element-sa001j6) p{color:var(--soma-white)}
body.page-id-1348 .media-hero .elementor-element-sa001j6 p,
body.page-id-1348 .media-hero .elementor-element-sa001j6 label{color:var(--soma-text)}
.soma-events > .soma-band:first-child h1,
.soma-events > .soma-band:first-child p{color:var(--soma-white)}
/* Conferences and Events. An empty lecture theatre before a session: the one
   page on the Academy that is about a room rather than a subject. */
.soma-events > .soma-band:first-child{--soma-heroart:url("/wp-content/uploads/2026/09/events-hero.webp")}

/* === The folded route pill, inside a lesson or a quiz =====================
   The pill sits at left:16 bottom:16. Tutor puts its own controls in exactly
   that corner — the sidebar toggle on a desktop, and on a phone the whole
   action bar with Start Quiz and Continue Lesson in it — so the pill covered
   the buttons the learner needs to press. It lifts clear of that bar on the
   three page types where Tutor draws one, and respects the iPhone home bar. */
body.single-tutor_quiz .soma-route-pill,
body.single-lesson .soma-route-pill,
body.single-tutor_assignments .soma-route-pill{
  bottom:calc(84px + env(safe-area-inset-bottom, 0px));
}
@media (max-width:640px){
  body.single-tutor_quiz .soma-route-pill,
  body.single-lesson .soma-route-pill,
  body.single-tutor_assignments .soma-route-pill{
    bottom:calc(108px + env(safe-area-inset-bottom, 0px));
  }
}


/* Audit fix 5 Sep 2026: the rotated tide band (::before, left/right -3%/-6%) widened the page on phones; clip it horizontally only. */
.soma-book-hero--tide { overflow-x: clip; }