@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400;500;600;700;800&display=swap');

body:has(#cp-auth-background),
html:has(#cp-auth-background) {
  background-color: #33302C !important;
}
:root,
body,
html {
  --mono: Gabarito, monospace;
  --cp-primary-50: #f2f0eb !important;
  --cp-primary-100: #e8e4da !important;
  --cp-primary-200: #d4d0c8 !important;
  --cp-primary-300: #a8a296 !important;
  --cp-primary-400: #6b6b62 !important;
  --cp-primary-500: #33302C !important;
  --cp-primary-600: #33302C !important;
  --cp-primary-700: #0e0e0d !important;
  --cp-primary-800: #0e0e0d !important;
  --cp-primary-900: #000000 !important;
  --cp-secondary-500: #33302C !important;
  --cp-secondary-600: #0e0e0d !important;
  --cp-background-50: #ffffff !important;
  --cp-background-100: #f2f0eb !important;
  --cp-border-200: #d4d0c8 !important;
  --cp-brand-border: #d4d0c8 !important;
  --cp-brand-sidebar: #33302C !important;
}
.hr-config-provider,
.hr-text,
body {
  font-family: Gabarito, sans-serif !important;
}
#course-progress-card-root h3,
#dashboard-welcome-root .hr-text,
.hr-text.hr-text-2xl.hr-text-semibold,
.hr-text.hr-text-3xl.hr-text-semibold,
[id$="-title"].hr-text {
  font-family: Gabarito, serif !important;
  font-weight:800 !important;
}
.hr-button {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: 3px !important;
}
.hr-button--ghost:hover {
  background: rgba(51,48,44, 0.06) !important;
}
/* The breadcrumb items carry GHL's own dark colours AND
   `transition: background-color, color 0.3s`. Transitions outrank !important
   author styles, and portal.css now arrives after first paint, so without
   transition:none the trail stays near-black on the near-black topbar and our
   colour never lands. Same trap as the #cp-root-container grid rule. */
nav#cp-topbar-breadcrumb,
nav#cp-topbar-breadcrumb * {
  color: rgba(255, 255, 255, 0.62) !important;
  transition: none !important;
}
/* Set the type on the descendants, not just the nav. GHL puts an explicit
   font-size and weight on .hr-breadcrumb-item__link itself, and an explicit
   value on the child beats an inherited one from the parent no matter how many
   !importants the parent carries. The nav-level rule below was therefore doing
   nothing to the text: the trail rendered at 14px/600 beside an 11px/400 brand
   word, which is why the bar read as two mismatched labels rather than one line.

   Matched to .tmp-topbar-brand-word exactly, so the only difference between the
   brand and the trail is tone: the trail sits at 62% white, the page you are on
   comes back to full white. Same size, same tracking, same weight, one baseline. */
nav#cp-topbar-breadcrumb,
nav#cp-topbar-breadcrumb * {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-weight:600 !important;
  letter-spacing: 0.16em !important;
  line-height: 1.6 !important;
  text-transform: uppercase !important;
}
/* GHL pads the link box to 28px tall against the brand word's 17.6px. Both are
   centred in the bar so the boxes agreed, but the text inside them did not. */
nav#cp-topbar-breadcrumb .hr-breadcrumb-item__link {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
nav#cp-topbar-breadcrumb .hr-breadcrumb-item {
  align-items: center !important;
}
nav#cp-topbar-breadcrumb .hr-breadcrumb-item:last-child .hr-breadcrumb-item__link {
  color: #fff !important;
}
nav#cp-topbar-breadcrumb .hr-breadcrumb-item--clickable:hover .hr-breadcrumb-item__link {
  color: #fff !important;
}
main.cp-main-content > :first-child {
  border-bottom: 1px solid #d4d0c8;
}
aside.bg-sidebar {
  display: none !important;
  width: 0 !important;
}
main.cp-main-content {
  width: 100% !important;
}
.cp-sidebar {
  display: none !important;
  width: 0 !important;
}
#sidebar-toggle-button {
  display: none !important;
}
/* transition:none is load-bearing. GHL puts `transition: grid-template-columns
   0.35s` on this container. Transitions outrank !important author styles in the
   cascade, so when portal.css arrives AFTER first paint (which it does when
   served externally, unlike the old GHL Custom CSS field that was injected
   before hydration) the transition pins the old 256px track and our rule never
   takes effect. Killing the transition lets the override land. */
/* Collapsing the sidebar track is not enough on its own, because GHL places
   .cp-content-area in a DIFFERENT column depending on context: column 2 on
   desktop (sidebar-collapsed), column 1 on the login page (auth-page), and
   column 1 again on mobile, where the sidebar-collapsed class is dropped.
   Zeroing track 1 therefore zeroed the whole page on mobile. Spanning every
   track makes the content area full width in all three cases.
   transition:none is also load-bearing: GHL animates grid-template-columns,
   and a running transition outranks !important author styles, so without it
   this rule never lands once portal.css arrives after first paint. */
#cp-root-container:not(.auth-page) {
  grid-template-columns: 0 1fr !important;
  transition: none !important;
}
#cp-root-container:not(.auth-page) .cp-content-area {
  grid-column: 1 / -1 !important;
}
/* On mobile the bar is #cp-mobile-topbar and it wraps a white inner header
   that covers our dark background. There is no .left-section either, which is
   why the brand block never injected there. */
#cp-mobile-topbar > header {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
#cp-mobile-topbar > header .hr-text,
#cp-mobile-topbar > header span,
#cp-mobile-topbar > header h1,
#cp-mobile-topbar > header h2 {
  color: #fff !important;
}
#cp-mobile-topbar svg { color: rgba(255, 255, 255, 0.75) !important; }
/* An anchor now, not a bare image: on a phone this mark is the only route back
   to the dashboard. */
/* The mark and the name, and the way back to the dashboard. 44px tall because
   it is the only navigation on a phone and it has to be tappable. */
.tmp-mobile-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding-left: 9px;
  margin-left: -9px;
  flex-shrink: 0;
  align-self: center;
  text-decoration: none;
  min-width: 0;
}
.tmp-mobile-mark img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}
.tmp-mobile-word {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

/* A phone topbar carrying a chat button, an announcements button, a
   notification bell and a search box has no room left to say what the product
   is, and none of those four are what a member came here to do. The mark, the
   name, and the way into their own account. Everything else goes.

   Scoped with :has(.tmp-mobile-mark) so it only ever applies to the narrow
   topbar, never to the desktop one. */
.tmp-topbar-dark:has(.tmp-mobile-mark) #topbar-mobile-chat-button,
.tmp-topbar-dark:has(.tmp-mobile-mark) #topbar-mobile-announcements-button,
.tmp-topbar-dark:has(.tmp-mobile-mark) #topbar-mobile-search,
.tmp-topbar-dark:has(.tmp-mobile-mark) div:has(> #navbar-notification-bell-icon),
.tmp-topbar-dark:has(.tmp-mobile-mark) div:has(> p.hr-text-lg) {
  display: none !important;
}

.tmp-topbar-dark {
  background: #33302C !important;
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}
.tmp-topbar-dark svg {
  color: rgba(255, 255, 255, 0.7) !important;
  stroke: currentColor;
}
/* A rule between the mark and the trail. Now that both are set in the same
   mono at the same size, "THE MINDFULNESS PLACE" and "DASHBOARD" would
   otherwise read as one run-on string rather than an identity followed by a
   location. */
.tmp-topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 20px;
  margin-right: 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  flex-shrink: 0;
  text-decoration: none;
}
/* It is a link, so it says so on hover, quietly. The mark is the only way back
   to the dashboard from a programme or a session. */
.tmp-topbar-brand:hover .tmp-topbar-brand-word { color: rgba(255, 255, 255, 0.72); }
.tmp-topbar-brand .tmp-topbar-brand-chip,
.tmp-mobile-mark img { transition: opacity 0.15s ease; }
.tmp-topbar-brand:hover .tmp-topbar-brand-chip,
.tmp-mobile-mark:hover img { opacity: 0.8; }
.tmp-topbar-brand-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}
.tmp-topbar-brand-chip img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
}
.tmp-topbar-brand-word {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
#cp-auth-background.auth-layout-background {
  position: relative;
  overflow: hidden;
  background-color: #33302C !important;
  background-image: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 56px 9vw !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
}
.tmp-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.78;
}
.tmp-login-veil {
  position: absolute;
  inset: 0;
  background: rgba(242, 240, 235, 0.2);
  z-index: 0;
}
/* The same lockup as the top bar once you are inside, so signing in and being
   signed in look like one product. Matched to .tmp-topbar-brand exactly: a 30px
   chip, a 10px gap, 11px mono at 0.16em. It used to be ink-coloured text with
   no mark at all, which on a dark login video was close to invisible. */
.tmp-login-wordmark {
  position: fixed;
  top: 44px;
  left: 48px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tmp-login-wordmark img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
}
.tmp-login-wordmark span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f2f0eb;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(20, 19, 17, 0.5), 0 2px 18px rgba(20, 19, 17, 0.6);
}
@media (max-width: 820px) {
  #cp-auth-background.auth-layout-background {
    justify-content: center !important;
    padding: 100px 22px 60px !important;
  }
  .tmp-login-wordmark {
    display: none;
  }
}
.auth-card-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
}
#cp-auth-card.auth-card {
  border-radius: 0 !important;
  box-shadow: 0 18px 50px rgba(51,48,44, 0.09) !important;
  border: 1px solid #d4d0c8 !important;
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  padding: 42px 40px 38px !important;
}
.tmp-auth-eyebrow {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6b6b62;
  margin-bottom: 14px;
}
/* One line, in the same mono as the mark outside. The card used to carry a
   46px logo, a "Member Portal" eyebrow and a 32px "Sign in": three things
   saying what one says. */
#cp-auth-card .hr-text.hr-text-3xl.hr-text-semibold {
  font-family: var(--mono) !important;
  font-size: 13px !important;
  font-weight:600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #33302C !important;
  margin-bottom: 28px !important;
  position: static !important;
  padding-left: 0 !important;
}
#cp-auth-card .tmp-gone {
  display: none !important;
}
#cp-auth-footer {
  display: none !important;
}
#cp-auth-card input[type="email"],
#cp-auth-card input[type="password"],
#cp-auth-card input[type="text"] {
  font-family: Gabarito, sans-serif !important;
  border: 1px solid #d4d0c8 !important;
  border-radius: 0 !important;
  background: #fff !important;
  padding: 13px 14px !important;
  font-size: 14px !important;
}
#cp-auth-card input[type="email"]:focus,
#cp-auth-card input[type="password"]:focus,
#cp-auth-card input[type="text"]:focus {
  outline: 0 !important;
  border-color: #33302C !important;
}
#cp-auth-card .hr-button--primary,
#cp-auth-card button.hr-button[type="submit"] {
  width: 100% !important;
  padding: 15px !important;
  margin-top: 8px !important;
  color: #fff !important;
}
#cp-auth-card a {
  font-family: Gabarito, sans-serif !important;
  font-size: 12.5px !important;
  color: #33302C !important;
  text-decoration: none !important;
  border-bottom: 1px solid #d4d0c8 !important;
  padding-bottom: 1px !important;
}
#cp-auth-card a:hover {
  border-bottom-color: #33302C !important;
}
#cp-auth-card div.mb-12:has(.hr-avatar) {
  display: none !important;
}
#cp-auth-card #login-modal-secure-code-button {
  display: none !important;
}
#cp-auth-card div.text-secondary.flex.w-full:has(#login-modal-signup-button) {
  display: none !important;
}
#cp-auth-card .hr-divider {
  display: flex !important;
  align-items: center !important;
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #6b6b62 !important;
  margin: 22px 0 18px !important;
}
#cp-auth-card [id^="google-one-tap-"] {
  display: block !important;
  margin-top: 24px !important;
}
#course-progress-card-root,
#dashboard-stats-communities,
#dashboard-stats-courses,
#dashboard-stats-pending-invoices {
  border-radius: 2px !important;
  box-shadow: none !important;
  border-color: #d4d0c8 !important;
}
#dashboard-stats-courses {
  border-top: 3px solid #33302C !important;
}
#dashboard-stats-courses .hr-text-medium {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #6b6b62 !important;
}
#dashboard-stats-courses .count-up-value {
  font-family: Gabarito, serif !important;
  font-size: 30px !important;
  font-weight:800 !important;
  color: #33302C !important;
}
#dashboard-stats-courses > div > div:first-child {
  background: #33302C !important;
  border-color: #33302C !important;
}
#dashboard-stats-courses > div > div:first-child svg {
  color: #fff !important;
  stroke: #ffffff !important;
}
.tmp-hidden-panel {
  display: none !important;
}
.tmp-course-list-frame {
  position: fixed;
  top: -2000px;
  left: -2000px;
  width: 1200px;
  height: 1200px;
  border: 0;
}
/* ---------- dashboard background scene ----------
   Injected by scene() on the dashboard only. Fixed, so it does not scroll with
   the page, and pointer-events:none so it never eats a click.

   The veil is a gradient, not a flat wash. At the top the greeting and the
   RECENT ACTIVITY eyebrow sit straight on the background with nothing behind
   them, so that band is nearly opaque. Lower down the white cards carry their
   own contrast and the video can come through. The 1px blur removes the fine
   detail that would otherwise crawl behind 9px mono type; the small scale-up
   hides the soft edge blur leaves at the frame. */
.tmp-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.tmp-scene video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  filter: saturate(0.92) blur(1px);
  transform: scale(1.03);
}
.tmp-scene__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(242, 240, 235, 0.9) 0%,
    rgba(242, 240, 235, 0.88) 18%,
    rgba(242, 240, 235, 0.66) 40%,
    rgba(242, 240, 235, 0.58) 100%
  );
}
/* GHL paints .cp-content-area a cool grey. Clear it, and put the cream on the
   page itself so the scene has a base to sit on and the page still reads right
   if the video never loads. */
body.tmp-has-scene,
html:has(body.tmp-has-scene) {
  background-color: #f2f0eb !important;
}
body.tmp-has-scene .cp-content-area {
  background: transparent !important;
  z-index: 1;
}

/* ---------- dashboard vertical rhythm ----------
   One number, 48px, between every band on the page, and 14px between an eyebrow
   and the thing it labels. Nothing else sets vertical space.

   The gaps were previously doubling in a way that looked random: 24 / 48 / 34 /
   102. #dashboard-page-root is GHL's own "flex flex-col gap-6", so it adds 24px
   between every top-level child ON TOP of whatever margin we set, and only
   between children it still has. Our own sections sat inside it, GHL's hidden
   panels sat between them, and margins collapsed or did not depending on the
   neighbour. So: drive the between-section spacing entirely from GHL's gap, and
   zero our own margins on anything that is a direct child of the page root.
   Everything hidden is display:none, so it is not a flex item and pays no gap. */
#dashboard-page-root {
  gap: 48px !important;
}
#dashboard-page-root > .tmp-resume,
#dashboard-page-root > .tmp-dashboard-verticals {
  margin: 0 !important;
}
/* Topbar to greeting: 24px page padding + 24px here = the same 48. The row is
   flex so the link to the library can sit out to the right on the same line. */
#dashboard-welcome-root.tmp-greet {
  margin: 24px 0 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.tmp-dash-link {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 17px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b6b62;
  text-decoration: none;
  border-bottom: 1px solid #d4d0c8;
  padding-bottom: 3px;
  white-space: nowrap;
}
.tmp-dash-link:hover { color: #33302C; border-bottom-color: #33302C; }
@media (max-width: 620px) {
  #dashboard-welcome-root.tmp-greet {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}
/* Inside a section the flex gap does not reach, so these are real margins. */
.tmp-spaced { margin-top: 48px !important; }
.tmp-hero,
.tmp-course-grid,
.tmp-vertical-grid { margin-top: 0 !important; }

/* ---------- greeting ----------
   Bigger, warmer, first name only. The subtitle goes: it is GHL's default copy
   and it reads as filler above a card that already says what to do next. */
/* The descendant selector is load-bearing. GHL nests the name inside
   h1.hr-text-3xl > div > div > span, so font-size:inherit on the span read 18px
   from that h1, not 46px from the container. Set it on every descendant. */
#dashboard-welcome-root.tmp-greet .hr-header-lite-container-v2,
#dashboard-welcome-root.tmp-greet .hr-header-lite-container-v2 * {
  font-family: Gabarito, serif !important;
  font-size: clamp(30px, 4.2vw, 46px) !important;
  font-weight: 600 !important;
  line-height: 1.05 !important;
  color: #33302C !important;
  transition: none !important;
}
#dashboard-welcome-root.tmp-greet p { display: none !important; }

/* ---------- resume hero ---------- */
.tmp-hero {
  background: #fff;
  border: 1px solid #d4d0c8;
  border-left: 4px solid var(--tmp-vertical-colour, #33302C);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: center;
  padding: 26px 28px;
}
/* The artwork stretches the full height of the card rather than sitting
   centred in it, so the card reads as one block instead of a picture parked
   next to some text. */
.tmp-hero-thumb {
  width: 260px;
  align-self: stretch;
  min-height: 168px;
  object-fit: cover;
  border-radius: 2px;
}
@media (max-width: 1100px) {
  .tmp-hero-thumb { width: 190px; }
}
@media (max-width: 760px) {
  .tmp-hero { grid-template-columns: 1fr; gap: 20px; }
  .tmp-hero-thumb { width: 100%; height: 150px; min-height: 0; }
}
.tmp-hero-body { min-width: 0; }
.tmp-hero-tag {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tmp-vertical-colour, #33302C);
  margin-bottom: 7px;
}
.tmp-hero-name {
  font-family: Gabarito, serif;
  font-weight:800;
  font-size: 34px;
  line-height: 1.1;
  color: #33302C;
}
.tmp-hero-sess {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b6b62;
  margin-top: 8px;
}
.tmp-hero-sess b { color: #33302C; font-weight: 500; }
.tmp-hero-act { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
/* 104px at full opacity, set by looking at the real mark on screen. A faint
   watermark behind the button only made the button look smudged. */
.tmp-hero-mark { width: 104px; height: auto; flex-shrink: 0; }
@media (max-width: 760px) { .tmp-hero-mark { width: 72px; } }

.tmp-btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  background: var(--tmp-vertical-colour, #33302C);
  color: #fff !important;
  border-radius: 3px;
  padding: 13px 22px;
  text-decoration: none !important;
  border: 0 !important;
}

/* ---------- the arc: one mark per session ---------- */
.tmp-arc-wrap { max-width: 460px; margin-top: 16px; }
.tmp-arc { display: flex; align-items: flex-end; gap: 5px; }
.tmp-mark {
  width: 100%;
  min-width: 7px;
  height: 18px;
  background: #d4d0c8;
  border-radius: 1px;
  display: block;
}
.tmp-mark.done { background: var(--tmp-vertical-colour, #33302C); }
.tmp-mark.now { background: var(--tmp-vertical-colour, #33302C); height: 27px; }
.tmp-arc-lbl {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a8a296;
}

/* ---------- secondary programmes ---------- */
.tmp-course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 14px;
  /* set to 0 in the rhythm block above; the eyebrow's 14px is the only gap */
  margin-top: 12px;
}
.tmp-course-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 19px 19px;
  border: 1px solid #d4d0c8;
  border-top: 3px solid var(--tmp-vertical-colour, #33302C);
  background: #fff;
  text-decoration: none;
  transition: box-shadow 0.15s;
}
.tmp-course-panel:hover, .tmp-vertical-panel:hover {
  box-shadow: 0 8px 24px rgba(51,48,44, 0.08);
}
/* 110px cropped these drawings down to a smear. They are 16:9 with generous
   margins built in, so they need height before the subject reads. */
.tmp-course-panel__thumb { width: 100%; height: 150px; object-fit: cover; border-radius: 2px; }
.tmp-course-panel__tag {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tmp-vertical-colour, #33302C);
}
.tmp-course-panel__name {
  font-family: Gabarito, serif;
  font-weight:800;
  font-size: 22px;
  line-height: 1.15;
  color: #33302C;
  /* Two lines, then an ellipsis. A three line title makes one card taller than
     the three beside it and the row stops reading as a row. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tmp-course-panel { position: relative; }
/* The 48px right padding here used to reserve the corner for the vertical mark.
   The mark is gone from these cards, so the session line gets the full width
   back and stops wrapping under a graphic that was sitting on top of it. */
.tmp-course-panel__meta {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #6b6b62;
  margin-top: auto;
}
/* Cards in a row are the same height, so a one line title leaves slack a two
   line title does not. The slack used to fall between the marks and the session
   line, which floated the marks at a different height on every card. Pinning the
   marks instead puts all of it above them: the progress block and the session
   line sit on the floor of every card, and the title breathes. */
.tmp-course-panel > .tmp-arc-wrap { margin-top: auto; }
.tmp-course-panel > .tmp-arc-wrap ~ .tmp-course-panel__meta { margin-top: 0; }

/* ---------- programme page ----------
   Our own header block, then GHL's lesson list restyled in place. The rhythm is
   the dashboard's: 48px between bands, 14px from a label to what it labels. */
/* GHL paints the content area a cool grey. Our pages are cream, like everything
   else. Scoped by :has so it only applies where we have built. */
body:has(.tmp-prog) .cp-content-area,
body:has(.tmp-lib) .cp-content-area {
  background: #f2f0eb !important;
}

/* ---------- programmes library ----------
   Bands, one per vertical, each with a rule in its own colour. Rows rather than
   tiles: the dashboard uses tiles, this page has to look like a different room,
   and rows keep working for a member who owns twenty programmes. */
.tmp-lib {
  max-width: 1152px;
  margin: 0 auto;
  padding: 40px 24px 0;
}
/* Heading row: the page name, and the way back to the dashboard on the same
   line. Right aligned, and in the same mono rule the browse strip uses so it
   reads as a control rather than as a second heading. */
.tmp-lib__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 40px;
}
.tmp-lib__home {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6b6b62;
  text-decoration: none;
  border-bottom: 1px solid #d4d0c8;
  padding-bottom: 4px;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.tmp-lib__home:hover { color: #33302C; border-bottom-color: #33302C; }

.tmp-lib__title {
  font-family: Gabarito, serif !important;
  font-weight:800 !important;
  font-size: clamp(30px, 3.6vw, 44px) !important;
  line-height: 1.1;
  color: #33302C;
  /* The row owns the gap below now, so the two sit on one baseline. */
  margin: 0 !important;
  min-width: 0;
}
.tmp-lib__band { margin-bottom: 48px; }
.tmp-lib__band-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 12px;
  /* !important: GHL's Tailwind preflight zeroes border-width on everything. */
  border-bottom: 2px solid var(--tmp-vertical-colour, #33302C) !important;
  margin-bottom: 14px;
}
.tmp-lib__band--empty .tmp-lib__band-head { border-bottom-color: #d4d0c8 !important; }
.tmp-lib__mark { width: 30px; height: auto; flex-shrink: 0; }
.tmp-lib__band--empty .tmp-lib__mark { opacity: 0.45; }
.tmp-lib__band-name {
  flex: 1;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tmp-vertical-colour, #33302C);
}
.tmp-lib__band--empty .tmp-lib__band-name { color: #a8a296; }
.tmp-lib__band-count {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b6b62;
  white-space: nowrap;
}
.tmp-lib__rows { display: flex; flex-direction: column; }
.tmp-lib__row {
  background: #fff;
  border: 1px solid #d4d0c8 !important;
  border-bottom: 0 !important;
  padding: 20px 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  text-decoration: none;
}
.tmp-lib__row:last-child { border-bottom: 1px solid #d4d0c8 !important; }
.tmp-lib__row:hover {
  border-color: #33302C !important;
  position: relative;
  z-index: 1;
}
/* The rows are flush and share one line, which belongs to the lower of the two:
   every row has border-bottom 0 and only the last carries one. Recolouring the
   border on hover therefore could not blacken the bottom edge, because the
   hovered row had no bottom border to recolour. It read as three sides of a box
   on the way down and a stray line on the way up.

   The hovered row gets its own bottom border and a -1px margin to absorb the
   height it adds, so the outline closes and nothing below it moves. z-index on
   the rule above is what paints it over the neighbour's own top border. */
.tmp-lib__row:not(:last-child):hover {
  border-bottom: 1px solid #33302C !important;
  margin-bottom: -1px;
}
.tmp-lib__row-body { min-width: 0; }
/* Same one-line rule as the description below it. The row already truncates its
   description; leaving the name to wrap made the two halves disagree. */
/* Two lines where the name has a bracket or a slash, one otherwise, and always
   the same break in the same place. That is decided in portal.js, so this no
   longer truncates to a single line: a forced break and an ellipsis fight, and
   the row has the height for two lines. */
.tmp-lib__row-name {
  font-family: Gabarito, serif;
  font-weight:800;
  font-size: 24px;
  line-height: 1.15;
  color: #33302C;
  white-space: normal;
}
/* One line. These descriptions run to a full paragraph and would swamp the row. */
.tmp-lib__row-desc {
  font-size: 13.5px;
  color: #6b6b62;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tmp-lib__row-state {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a8a296;
  white-space: nowrap;
}
.tmp-lib__row:hover .tmp-lib__row-state { color: #33302C; }
/* The shelf: what else is on sale in this collection. Dashed, so it reads as
   the shop behind the library rather than part of it. */
.tmp-shelf {
  border: 1px dashed #d4d0c8 !important;
  margin-top: 10px;
}
.tmp-shelf--soon {
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.tmp-shelf__toggle {
  width: 100%;
  background: none;
  border: 0;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.tmp-shelf__toggle:hover .tmp-shelf__label { color: #33302C; }
.tmp-shelf__label { font-size: 13.5px; color: #6b6b62; }
.tmp-shelf__cta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a8a296;
  white-space: nowrap;
}
.tmp-shelf__chev {
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1;
  color: var(--tmp-vertical-colour, #33302C);
  flex-shrink: 0;
}
.tmp-shelf--open { border-style: solid !important; }
.tmp-shelf__panel {
  border-top: 1px solid #e8e4da !important;
  padding: 6px 24px 14px;
}
.tmp-shelf__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid #e8e4da !important;
  text-decoration: none;
}
.tmp-shelf__item:last-child { border-bottom: 0 !important; }
/* One line, always. The names in a single list are not the same length: a sport
   is "Tennis" and a school programme is "Ages 17 to 18 (Senior Secondary / High
   School)". Left to wrap, some rows are one line tall and some are two, and the
   list stops reading as a list. Truncating is the consistent choice, and the
   full name is on the programme it opens. min-width:0 is required because this
   is a flex child and would otherwise refuse to shrink below its content. */
.tmp-shelf__item-name {
  font-family: Gabarito, serif;
  font-weight:800;
  font-size: 19px;
  color: #33302C;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tmp-shelf__item-cta { flex: none; }
.tmp-shelf__item-cta {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a8a296;
  white-space: nowrap;
}
.tmp-shelf__item:hover .tmp-shelf__item-cta { color: var(--tmp-vertical-colour, #33302C); }
.tmp-shelf__item--owned .tmp-shelf__item-name { color: #6b6b62; }
.tmp-shelf__item--owned .tmp-shelf__item-cta { color: var(--tmp-vertical-colour, #33302C); }
@media (max-width: 620px) {
  .tmp-lib__row { grid-template-columns: 1fr; gap: 10px; }
  .tmp-shelf--soon,
  .tmp-shelf__toggle { flex-direction: column; align-items: flex-start; gap: 10px; }
}
.tmp-prog {
  max-width: 1152px;
  margin: 0 auto;
  padding: 40px 24px 0;
}
.tmp-prog__back {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b6b62;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 26px;
}
.tmp-prog__back:hover { color: #33302C; }
/* !important on the border. GHL's Tailwind preflight sets border-width: 0 on
   every element and wins here, so the rule silently did nothing: the header
   rendered with no vertical rule at all and looked like a plain heading. */
.tmp-prog__head {
  position: relative;
  border-left: 4px solid var(--tmp-vertical-colour, #33302C) !important;
  padding: 2px 120px 2px 22px;
}
.tmp-prog__tag {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tmp-vertical-colour, #33302C);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.tmp-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tmp-vertical-colour, #33302C);
  flex-shrink: 0;
}
.tmp-prog__title {
  font-family: Gabarito, serif !important;
  font-weight:800 !important;
  font-size: clamp(30px, 3.6vw, 44px) !important;
  line-height: 1.1;
  color: #33302C;
  margin: 0;
}
/* pre-line is load-bearing. The description is authored with a blank line
   between each sentence, and HTML collapses newlines to spaces by default, so
   without this every programme description renders as one grey slab and the
   formatting work in the source copy is invisible. pre-line honours the breaks
   and still collapses runs of spaces, which is exactly what is wanted. */
.tmp-prog__desc {
  font-size: 14.5px;
  line-height: 1.7;
  color: #6b6b62;
  max-width: 640px;
  margin: 12px 0 0;
}
/* The lead is the opening two sentences and always shows. The rest folds away.
   Both keep pre-line: the copy is authored one sentence per paragraph and the
   breaks are the formatting. */
.tmp-prog__desc-lead,
.tmp-prog__desc-more {
  margin: 0;
  white-space: pre-line;
}
.tmp-prog__desc-more { margin-top: 1.7em; }
.tmp-prog__desc-toggle {
  display: inline-block;
  margin-top: 12px;
  padding: 0;
  border: 0 !important;
  background: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tmp-vertical-colour, #33302C);
  border-bottom: 1px solid currentColor !important;
  padding-bottom: 2px;
}
.tmp-prog__desc-toggle:hover { color: #33302C; }
.tmp-prog__mark {
  position: absolute;
  right: 0;
  top: 0;
  width: 88px;
  height: auto;
}
/* 24px, halved from 48. The progress row belongs to the heading above it, and
   at 48 it read as a separate block sitting on its own. */
.tmp-prog__progress {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 24px;
}
.tmp-prog__progress .tmp-arc { flex: 1; }
.tmp-prog__count {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b6b62;
  white-space: nowrap;
}
/* The any-order line. Sits under the progress row, quiet until the programme is
   finished, when it takes the vertical's colour and a rule to mark the change. */
/* 72ch, not 60ch, because the open line wants 529px and 60ch caps it at 472px,
   which broke it after "the session you" and left "need today." dangling on its
   own line. 72ch is 566px here, so it sets on one line with room to spare, and
   the longer finished line still breaks at a whole phrase rather than a word.
   text-wrap: pretty keeps that true at widths this measure was not chosen for. */
.tmp-prog__note {
  margin: 16px 0 0;
  max-width: 72ch;
  text-wrap: pretty;
  font-size: 14px;
  line-height: 1.62;
  color: #6b6b62;
}
.tmp-prog__note--done {
  color: #33302C;
  border-left: 2px solid var(--tmp-vertical-colour, #33302C);
  padding-left: 15px;
}
@media (max-width: 820px) {
  .tmp-prog__head { padding-right: 0; }
  .tmp-prog__mark { position: static; width: 64px; margin-bottom: 14px; }
  .tmp-prog__progress { flex-direction: column; align-items: stretch; gap: 12px; }
}

/* GHL's body. It ships as a max-w-6xl grid with a rail; we want one column, and
   the list wrapper is h-screen with its own scrollbar, which has to go or the
   page scrolls inside a box. */
.tmp-prog-body {
  max-width: 1152px !important;
  margin: 0 auto !important;
  padding: 48px 24px 0 !important;
  display: block !important;
  background: transparent !important;
}
.tmp-prog-body .category-post-list-container,
.tmp-prog-body .course-section,
.tmp-prog-body .category-post-list {
  background: transparent !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
.tmp-prog-body .category-title {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-weight:600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #6b6b62 !important;
  cursor: default !important;
}
.tmp-prog-body .category-title + *,
.tmp-prog-body .category-post-list > .category-post-list { margin-top: 14px !important; }

/* Session rows. Numbered, no thumbnail, every row open. */
.tmp-session {
  background: #fff !important;
  border: 1px solid #d4d0c8 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  padding: 18px 24px !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: 40px 1fr auto !important;
  gap: 18px !important;
  align-items: center !important;
  cursor: pointer;
  transition: none !important;
}
.tmp-session:last-child { border-bottom: 1px solid #d4d0c8 !important; }
.tmp-session:hover {
  border-color: #33302C !important;
  position: relative;
  z-index: 1;
}
/* Same shared-line problem as .tmp-lib__row above, same fix. */
.tmp-session:not(:last-child):hover {
  border-bottom: 1px solid #33302C !important;
  margin-bottom: -1px !important;
}
.tmp-session__num {
  font-family: var(--mono);
  font-size: 11px;
  color: #a8a296;
}
.tmp-session--done .tmp-session__num { color: var(--tmp-vertical-colour, #33302C); }
/* GHL's blue tick. The row already says Listened, in the vertical's colour. */
.tmp-session img[alt="Completed"] { display: none !important; }
.tmp-session span {
  font-family: Gabarito, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #33302C !important;
  margin: 0 !important;
}
.tmp-session__state {
  font-family: var(--mono) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #a8a296 !important;
  white-space: nowrap;
}
.tmp-session--done .tmp-session__state { color: var(--tmp-vertical-colour, #33302C) !important; }
.tmp-session:hover .tmp-session__state { color: #33302C !important; }

/* Back out to the shelf. */
.tmp-prog-more {
  max-width: 1152px;
  margin: 48px auto 0;
  padding: 22px 24px;
  border: 1px dashed #d4d0c8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  text-decoration: none;
}
.tmp-prog-more:hover { border-color: var(--tmp-vertical-colour, #33302C); }
.tmp-prog-more__text { font-size: 13.5px; color: #6b6b62; }
.tmp-prog-more__cta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #33302C;
  border-bottom: 1px solid #33302C;
  padding-bottom: 3px;
  white-space: nowrap;
}

/* ---------- browse ---------- */
.tmp-vertical-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 900px) { .tmp-vertical-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tmp-vertical-grid { grid-template-columns: 1fr; } }
.tmp-vertical-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 20px 22px;
  border: 1px solid #d4d0c8;
  border-top: 3px solid var(--tmp-vertical-colour, #33302C);
  background: #fff;
  text-decoration: none;
  transition: box-shadow 0.15s;
}
/* 44px holds the interior detail. 28px mushes it. */
.tmp-vertical-mark { width: 44px; height: auto; }
.tmp-vertical-panel__name {
  font-family: Gabarito, serif;
  font-weight:800;
  font-size: 25px;
  line-height: 1.15;
  color: #33302C;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Two lines: what is in the collection, then what you can do about it today.
   The second is the one worth reading, so it is the darker of the two. Split
   rather than joined because a tile is 190px wide at some window sizes and the
   joined sentence needs 226px. Negative margin pulls the pair together so they
   read as one block against the grid's 8px gap. */
.tmp-vertical-panel__count,
.tmp-vertical-panel__status {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.tmp-vertical-panel__count { color: #a8a296; }
.tmp-vertical-panel__status { color: #6b6b62; margin-top: -5px; }
.tmp-vertical-panel__cta {
  display: inline-block;
  margin-top: 6px;
  padding: 9px 16px;
  border-radius: 3px;
  background: var(--tmp-vertical-colour, #33302C);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}
.tmp-vertical-panel.tmp-soon {
  background: #eae7e0;
  border-top-color: #d4d0c8;
  box-shadow: none;
}
.tmp-vertical-panel.tmp-soon .tmp-vertical-mark { opacity: 0.4; }
.tmp-vertical-panel.tmp-soon .tmp-vertical-panel__name { color: #6b6b62; }
.tmp-vertical-panel.tmp-soon .tmp-vertical-panel__cta {
  background: transparent;
  color: #a8a296;
  border: 1px dashed #d4d0c8;
}

#my-courses-section-content-grid {
  gap: 20px !important;
}
.my-course-card {
  border-radius: 2px !important;
  box-shadow: none !important;
  border: 1px solid #d4d0c8 !important;
  padding: 26px 28px 24px !important;
  position: relative !important;
  transition: border-color 0.15s;
}
.my-course-card:hover {
  border-color: #33302C !important;
}
.my-course-card .course-image-wrapper {
  border-bottom: 3px solid var(--tmp-vertical-colour, #d4d0c8);
}
.tmp-course-vertical-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tmp-vertical-colour, #33302C);
  margin-bottom: 4px;
}
.tmp-course-vertical-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tmp-vertical-colour, #33302C);
  flex-shrink: 0;
}
.tmp-course-vertical-logo {
  position: absolute;
  top: 20px;
  right: 22px;
  width: 42px;
  height: auto;
  opacity: 0.95;
  pointer-events: none;
}
.my-course-card [id$="-title"] {
  font-size: 24px !important;
  margin-bottom: 18px !important;
  padding-right: 48px;
}
#about-lesson-title,
#instructor-name {
  font-family: Gabarito, serif !important;
  font-weight:800 !important;
  color: #33302C !important;
}
#post-description,
.comments-container,
.instructor-card {
  background: #fff !important;
  border: 1px solid rgba(51,48,44, 0.12) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}
.incomplete-trigger,
.next-trigger {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  background: #33302C !important;
  border-radius: 3px !important;
}
.category-playlist-count {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #6b6b62 !important;
}
.active-link-item {
  font-family: Gabarito, sans-serif !important;
  font-weight: 500 !important;
  color: #33302C !important;
}


/* ---------- session page ----------
   GHL renders a working Plyr player here, so this is a strip and a re-dress
   rather than a build. The session rail, instructor card, comments block and
   GHL's own breadcrumb are hidden from portal.js; what is left is the player,
   the lesson copy, and one way back. */
.tmp-post-body {
  background: #f2f0eb !important;
  /* Plyr reads this for its accent: play button, scrub bar, focus ring. One
     custom property is the whole re-skin. */
  --plyr-color-main: var(--tmp-vertical-colour, #33302C);
  --plyr-audio-controls-background: #ffffff;
  --plyr-audio-control-color: #33302C;
  --plyr-font-family: Gabarito, system-ui, sans-serif;
}
body:has(.tmp-post-body) .cp-content-area { background: #f2f0eb !important; }

/* The whole right rail goes, so the player column takes the full width. GHL
   lays the lesson out on a 12-column grid and pins the body to 8 of them. */
.tmp-post-body .post-details > div:first-child { grid-column: 1 / -1 !important; }

.tmp-post-back {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b6b62;
  text-decoration: none;
  display: inline-block;
  /* Matches .tmp-post-prog's own margin-bottom, so the back link, the
     programme name and the session eyebrow sit on one even rhythm instead of
     the name being crowded up against the link above it. */
  margin-bottom: 22px;
}
.tmp-post-back:hover { color: #33302C; }
.tmp-post-prog {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tmp-vertical-colour, #33302C);
  border-left: 3px solid var(--tmp-vertical-colour, #33302C) !important;
  padding-left: 10px;
  margin-bottom: 22px;
}
.tmp-post-body #post-audio {
  background: #fff;
  border: 1px solid #d4d0c8 !important;
  border-top: 3px solid var(--tmp-vertical-colour, #33302C) !important;
  border-radius: 2px;
  padding: 22px 24px;
}
.tmp-post-body #post-body {
  background: #fff;
  border: 1px solid #d4d0c8 !important;
  border-radius: 2px;
  padding: 24px;
  margin-top: 18px;
}
.tmp-post-body #post-description {
  font-size: 14.5px;
  line-height: 1.7;
  color: #6b6b62;
  border: 0 !important;
  padding: 0 !important;
  background: none !important;
}

/* Session heading. Same hierarchy as the programme page: mono eyebrow over a
   Gabarito title, so the two pages read as one system. */
.tmp-post-head { margin-bottom: 14px; }
.tmp-post-num {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6b6b62;
  margin-bottom: 6px;
}
.tmp-post-title {
  font-family: Gabarito, serif;
  font-size: 48px;
  line-height: 1.1;
  font-weight:800;
  color: #33302C;
  margin: 0;
}

/* ---------- the session page loses ties ----------
   A lesson pulls in GHL's course bundle, a dozen stylesheets that arrive after
   portal.css. Anything of ours matching on a single class then lost the tie on
   source order, so the tab strip and the details copy quietly fell back to
   GHL's Roboto while the identical components on the dashboard stayed ours. It
   reads worst on a phone, where the player and those two tabs are most of the
   screen. Same values as everywhere else, weighted to win. */
html.tmp-lesson .tmp-post-body,
html.tmp-lesson .tmp-post-body p,
html.tmp-lesson .tmp-post-body li,
html.tmp-lesson .tmp-post-body span,
html.tmp-lesson .tmp-post-body div {
  font-family: Gabarito, sans-serif !important;
}
html.tmp-lesson .tmp-post-body .tmp-post-title {
  font-family: Gabarito, serif !important;
}
/* Every one of these carries .tmp-post-body as well, and it has to: the rule
   above matches a bare div at two classes and two elements, so a mono restore
   written any shorter loses to it. */
html.tmp-lesson .tmp-post-body .tmp-post-back,
html.tmp-lesson .tmp-post-body .tmp-post-prog,
html.tmp-lesson .tmp-post-body .tmp-post-num,
html.tmp-lesson .tmp-post-body .tmp-note__when,
html.tmp-lesson .tmp-post-body .tmp-notes__empty,
html.tmp-lesson .tmp-post-body .tmp-notes__save,
html.tmp-lesson .tmp-post-body .tmp-note__del,
html.tmp-lesson .tmp-post-body .tmp-post-nav__dir,
html.tmp-lesson .tmp-post-body .tmp-player__times,
html.tmp-lesson .tmp-post-body .tmp-player__btn--skip span,
html.tmp-lesson .tmp-post-body .tmp-tab {
  font-family: var(--mono) !important;
}
html.tmp-lesson .tmp-post-body .tmp-tab {
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  color: #6b6b62 !important;
}
html.tmp-lesson .tmp-post-body .tmp-tab--on { color: #33302C !important; }

/* Plyr ships a black control bar. Repaint it in the portal's own palette and
   let the vertical carry the accent, so it stops reading as a widget someone
   embedded and starts reading as part of the page. */
/* GHL paints this bar through its own variable, in a rule of exactly the same
   specificity as ours:
     .audio-player-container .plyr--audio .plyr__controls { background: var(--audio-controls-background) }
   Fighting it with !important was a coin toss on source order, and we lost. Set
   the variable it already reads, and carry an id-qualified rule behind it. */
.tmp-post-body .audio-player-container,
.tmp-post-body #post-audio {
  --audio-controls-background: #f2f0eb;
  --audio-control-color: #33302C;
}
#post-details-container.tmp-post-body .audio-player-container .plyr--audio .plyr__controls,
.tmp-post-body .plyr--audio .plyr__controls {
  background: #f2f0eb !important;
  color: #33302C !important;
  border-top: 1px solid #d4d0c8 !important;
  padding: 14px 16px !important;
}
.tmp-post-body .plyr--audio .plyr__control {
  color: #33302C !important;
  background: none !important;
}
.tmp-post-body .plyr--audio .plyr__control:hover,
.tmp-post-body .plyr--audio .plyr__control[aria-expanded="true"] {
  background: var(--tmp-vertical-colour, #33302C) !important;
  color: #fff !important;
}
.tmp-post-body .plyr__time,
.tmp-post-body .plyr__menu__container,
.tmp-post-body .plyr__tooltip { color: #6b6b62 !important; }
.tmp-post-body .plyr--audio .plyr__progress input[type="range"] { color: var(--tmp-vertical-colour, #33302C) !important; }

/* Completion. A full-width outlined button competes with the player for the
   eye; this is a quiet control that sits under the copy where it belongs. */
.tmp-post-body #post-completion-btn {
  width: auto !important;
  margin: 18px 0 0 !important;
  padding: 0 0 2px !important;
  border: 0 !important;
  border-bottom: 1px solid currentColor !important;
  border-radius: 0 !important;
  background: none !important;
  font-family: var(--mono);
  font-size: 10px;
  font-weight:600 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tmp-vertical-colour, #33302C) !important;
}
.tmp-post-body #post-completion-btn:hover { color: #33302C !important; }

/* ---------- the narrow lesson template ----------
   Everything below is scoped with :has(.mobile-lesson-content), which is the
   wrapper only the narrow template renders. Scoping on html.tmp-lesson alone
   was wrong: that class is on the document at every width, so the label sizes
   meant for a phone were changing the desktop player too.

   GHL serves a different lesson page below its own breakpoint, with different
   ids and some furniture the wide one does not have. These are the pieces that
   only exist there. */

/* A second play control, a translucent 48px disc, sitting outside .plyr and so
   missed by the rule that clips the rest of Plyr away. It landed on top of our
   forward control. */
html.tmp-lesson:has(.mobile-lesson-content) .container-play-icon { display: none !important; }

/* The session name a second time, under the player, above GHL's tabs. Our own
   heading is already above the player. */
html.tmp-lesson:has(.mobile-lesson-content) .mobile-lesson-content p.hr-text-2xl { display: none !important; }

/* Our card, in the same shape as #post-body on the wide template. */
html.tmp-lesson:has(.mobile-lesson-content) .tmp-post-card {
  background: #fff;
  border: 1px solid #d4d0c8;
  border-radius: 2px;
  padding: 24px;
  margin-top: 18px;
}
html.tmp-lesson:has(.mobile-lesson-content) .tmp-post-copy,
html.tmp-lesson:has(.mobile-lesson-content) .tmp-post-copy p,
html.tmp-lesson:has(.mobile-lesson-content) .tmp-post-copy li {
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  color: #6b6b62 !important;
}

/* GHL's own completion control on the narrow template, matched to the wide
   one: a quiet underlined line in the vertical's colour, not a filled button
   pinned to the bottom of the viewport. */
/* position:relative, not static.

   Naive UI paints a button's border and its focus ring with two absolutely
   positioned children, and they size themselves against the nearest positioned
   ancestor. Setting the button to static took that ancestor away, so the border
   child resolved against something near the top of the page and stretched to
   319x720: a box drawn around the title, the player and the arrows, which is
   exactly the outline that kept appearing on a phone. The children are hidden
   below anyway, since we draw the underline ourselves. */
html.tmp-lesson:has(.mobile-lesson-content) #post-completion-button .hr-button__border,
html.tmp-lesson:has(.mobile-lesson-content) #post-completion-button .hr-button__state-border,
html.tmp-lesson:has(.mobile-lesson-content) #post-completion-button .hr-base-wave {
  display: none !important;
}
html.tmp-lesson:has(.mobile-lesson-content) #post-completion-button {
  position: relative !important;
  width: auto !important;
  margin: 18px 0 0 !important;
  padding: 0 0 2px !important;
  border: 0 !important;
  border-bottom: 1px solid currentColor !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--tmp-vertical-colour, #33302C) !important;
}
html.tmp-lesson:has(.mobile-lesson-content) #post-completion-button .hr-button__content,
html.tmp-lesson:has(.mobile-lesson-content) #post-completion-button #post-completion-button-label {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  font-weight:600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: inherit !important;
}
html.tmp-lesson:has(.mobile-lesson-content) .safe-area-bottom {
  position: static !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* One ground, cream, the whole way down. GHL paints .cp-content-area white and
   our rule that clears it only fires when a scene is present, which it is not
   below 820px, so a phone kept the white. Guarded on the scene rather than on a
   width so the desktop scene still shows through. */
html.tmp-lesson:has(.mobile-lesson-content) body:not(.tmp-has-scene) .cp-content-area,
html.tmp-lesson:has(.mobile-lesson-content) body:not(.tmp-has-scene) .cp-main-content,
html.tmp-lesson:has(.mobile-lesson-content) body:not(.tmp-has-scene) .cp-main-content-inner,
html.tmp-lesson:has(.mobile-lesson-content) .mobile-lesson-content,
html.tmp-lesson:has(.mobile-lesson-content) .post-container,
html.tmp-lesson:has(.mobile-lesson-content) #posts-container-main,
html.tmp-lesson:has(.mobile-lesson-content) #posts-container-lesson-content {
  background: #f2f0eb !important;
}

/* The narrow template builds a fixed height column: every wrapper from
   #posts-container-main down carries h-full or flex-1 with min-h-0, on the
   assumption that the copy scrolls inside its own pane. Our card is taller than
   the pane it replaced, so it ran straight over the completion control sitting
   below it. Let the whole chain size to its content and leave the scrolling to
   .cp-main-content, which is the real scroll host anyway. */
html.tmp-lesson:has(.mobile-lesson-content) #posts-container-main,
html.tmp-lesson:has(.mobile-lesson-content) .post-container,
html.tmp-lesson:has(.mobile-lesson-content) .lesson-content-wrapper,
html.tmp-lesson:has(.mobile-lesson-content) .lesson-content-inner,
html.tmp-lesson:has(.mobile-lesson-content) #posts-container-lesson-content,
html.tmp-lesson:has(.mobile-lesson-content) .mobile-lesson-content,
html.tmp-lesson:has(.mobile-lesson-content) .mobile-lesson-content > div,
html.tmp-lesson:has(.mobile-lesson-content) .tabs-container,
html.tmp-lesson:has(.mobile-lesson-content) .hr-tabs,
html.tmp-lesson:has(.mobile-lesson-content) .hr-tabs-pane-wrapper {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
}
html.tmp-lesson:has(.mobile-lesson-content) .tmp-post-card { margin-bottom: 8px; }

/* No panel around the head and the player. GHL's narrow template puts the
   title, the audio and the two arrows inside a wrapper it treats as a card,
   and it paints on it. The result is a box drawn around everything above the
   details card, which the wide template does not have. Cleared on the wrapper
   and on everything between it and the audio, then the one rule we do want is
   put back below. */
html.tmp-lesson:has(.mobile-lesson-content) .mobile-lesson-content,
html.tmp-lesson:has(.mobile-lesson-content) .mobile-lesson-content > div,
html.tmp-lesson:has(.mobile-lesson-content) .tmp-post-head,
html.tmp-lesson:has(.mobile-lesson-content) .tmp-audio-host,
html.tmp-lesson:has(.mobile-lesson-content) #lesson-navigation-compact-container {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}
/* Put the vertical's rule back, after the clearing above. */
html.tmp-lesson:has(.mobile-lesson-content) .tmp-audio-host {
  border-top: 1px solid var(--tmp-vertical-colour, #33302C) !important;
}

/* GHL's previous and next on the narrow template. Two small arrow buttons,
   and the only way through a programme on a phone, since the session list our
   own nav is built from does not exist there. Kept, because they work, and
   restyled to the portal: quiet outlined squares at a proper tap size. */
/* Two 44px squares in 98px of a 380px screen, and the only way through a
   programme on a phone. Too quiet for what they do. Now two buttons side by
   side across the full width, directly above the copy card.

   The row they sit in is justify-between, and its other child is the duplicate
   session name, which we already hide and which measures zero. So letting the
   wrapper grow hands the whole row to the two buttons. */
html.tmp-lesson:has(.mobile-lesson-content) div:has(> #lesson-navigation-compact-container) {
  flex: 1 1 auto !important;
  width: 100% !important;
}
html.tmp-lesson:has(.mobile-lesson-content) #lesson-navigation-compact-container {
  display: flex !important;
  width: 100% !important;
  gap: 10px !important;
  margin: 12px 0 18px !important;
}
/* These are Naive UI buttons. The visible border and fill are not on the
   button, they are painted by child elements reading inline custom properties
   (--n-border, --n-color and so on) that GHL writes per button. Setting border
   or background on the button does nothing. The properties themselves are what
   to set, and !important is needed to beat the inline declaration. */
html.tmp-lesson:has(.mobile-lesson-content) #lesson-navigation-compact-container .hr-button {
  flex: 1 1 0 !important;
  width: auto !important;
  height: 54px !important;
  min-width: 0 !important;
  padding: 0 !important;
  --n-color: transparent !important;
  --n-color-hover: transparent !important;
  --n-color-pressed: #e8e4da !important;
  --n-color-focus: transparent !important;
  --n-color-disabled: transparent !important;
  --n-border: 1px solid #d4d0c8 !important;
  --n-border-hover: 1px solid #33302C !important;
  --n-border-pressed: 1px solid #33302C !important;
  --n-border-focus: 1px solid #33302C !important;
  --n-border-disabled: 1px solid #e8e4da !important;
  --n-text-color: #33302C !important;
  --n-text-color-hover: #33302C !important;
  --n-text-color-pressed: #33302C !important;
  --n-text-color-focus: #33302C !important;
  --n-text-color-disabled: #a8a296 !important;
  --n-border-radius: 2px !important;
  --n-box-shadow: none !important;
  --n-opacity-disabled: 1 !important;
}
html.tmp-lesson:has(.mobile-lesson-content) #lesson-navigation-compact-container .hr-base-wave { display: none !important; }

/* The vertical carries the border, so they read as the control they are rather
   than as two grey squares. --tmp-vertical-colour inherits this far down on the
   narrow template, checked in the frame. */
html.tmp-lesson:has(.mobile-lesson-content) #lesson-navigation-compact-container .hr-button:not([disabled]) {
  --n-border: 1px solid var(--tmp-vertical-colour, #33302C) !important;
  --n-border-hover: 1px solid var(--tmp-vertical-colour, #33302C) !important;
  --n-border-pressed: 1px solid var(--tmp-vertical-colour, #33302C) !important;
  --n-border-focus: 1px solid var(--tmp-vertical-colour, #33302C) !important;
  --n-text-color: var(--tmp-vertical-colour, #33302C) !important;
  --n-text-color-hover: var(--tmp-vertical-colour, #33302C) !important;
  --n-text-color-pressed: var(--tmp-vertical-colour, #33302C) !important;
  --n-text-color-focus: var(--tmp-vertical-colour, #33302C) !important;
}
html.tmp-lesson:has(.mobile-lesson-content) #lesson-navigation-compact-container .hr-button:not([disabled]) svg {
  color: var(--tmp-vertical-colour, #33302C) !important;
}

/* An arrow on its own does not say where it goes. Labels come from CSS because
   the buttons are GHL's and carry nothing but an icon. Next reverses its
   content so the word sits before the arrow. */
html.tmp-lesson:has(.mobile-lesson-content) #lesson-navigation-compact-container .hr-button__content {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
}
html.tmp-lesson:has(.mobile-lesson-content) #posts-container-next-lesson .hr-button__content {
  flex-direction: row-reverse !important;
}
html.tmp-lesson:has(.mobile-lesson-content) #lesson-navigation-compact-container .hr-button__content::after {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}
html.tmp-lesson:has(.mobile-lesson-content) #posts-container-previous-lesson .hr-button__content::after {
  content: "Previous";
}
html.tmp-lesson:has(.mobile-lesson-content) #posts-container-next-lesson .hr-button__content::after {
  content: "Next";
}
html.tmp-lesson:has(.mobile-lesson-content) #lesson-navigation-compact-container .hr-button svg {
  width: 16px;
  height: 16px;
  color: #33302C;
  stroke: currentColor;
}

/* The labels carry the structure on a phone, where there is little else on
   screen to say where you are. A step up in size and weight, still quiet. */
html.tmp-lesson:has(.mobile-lesson-content) .tmp-post-prog {
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
}
html.tmp-lesson:has(.mobile-lesson-content) .tmp-post-body .tmp-tab,
html.tmp-lesson:has(.mobile-lesson-content) .tmp-post-body .tmp-player__times {
  font-size: 12px !important;
}
/* "Notes to yourself" is seventeen characters and wraps at 12px in a 335px
   card. Tighter tracking and a smaller gap keep both tabs on one line without
   taking the size back down. */
@media (max-width: 420px) {
  html.tmp-lesson:has(.mobile-lesson-content) .tmp-post-body .tmp-tabs--sub { gap: 16px; }
  html.tmp-lesson:has(.mobile-lesson-content) .tmp-post-body .tmp-tab { letter-spacing: 0.06em !important; }
}
html.tmp-lesson:has(.mobile-lesson-content) #post-completion-button .hr-button__content,
html.tmp-lesson:has(.mobile-lesson-content) #post-completion-button #post-completion-button-label {
  font-size: 11px !important;
  font-weight: 500 !important;
}

/* Previous and next. */
.tmp-post-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  /* Its own box, stated. The pair sat inset from the card below it because
     the links were sized to their content and the row never reached its
     container's edges. */
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}
.tmp-post-nav__link {
  display: block;
  /* Equal halves that fill the row, so the outer edges line up with the card
     below on both sides. min-width:0 because a flex item will not shrink past
     its content otherwise, and a long session name would push the pair wide
     again on a narrow screen. */
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  padding: 14px 16px;
  border: 1px solid #d4d0c8 !important;
  background: #fff;
  border-radius: 2px;
  text-decoration: none;
}
.tmp-post-nav__link:hover { border-color: #33302C !important; }
.tmp-post-nav__link--next { margin-left: auto; text-align: right; }
.tmp-post-nav__dir {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b6b62;
  margin-bottom: 4px;
}
.tmp-post-nav__name {
  display: block;
  font-size: 15px;
  color: #33302C;
  /* Clip rather than wrap. Two lines on one side and one on the other left the
     pair uneven, which is the thing the equal halves above are for. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* One column, one left edge. GHL lays the lesson out on a 12-column grid with
   the playlist taking four of them; the rail is gone, so the body takes the lot
   and is then held to a readable measure rather than stretching to 1730px. The
   player carries its own max-width utility and centres itself, which left the
   heading and the player on different left edges. */
.tmp-post-body .post-playlist-container { display: none !important; }
.tmp-post-body .video-post-body-container {
  grid-column: 1 / -1 !important;
  max-width: 900px;
}
.tmp-post-body #post-audio {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.tmp-post-body #post-body { max-width: none !important; }
.tmp-post-nav { max-width: 900px; }

/* ---------- browse panel ----------

   Opened from the dashboard's vertical tiles and from the programme page's
   "More in ..." panel. It sits over whatever page the member was on, because
   the point of it is that they do not leave. Cream on a dimmed ground, the
   vertical's colour as a single top band, and tiles that read as programmes
   rather than as products in a store. */
.tmp-browse-open { overflow: hidden; }

.tmp-browse {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}
.tmp-browse[hidden] { display: none !important; }
.tmp-browse__scrim {
  position: fixed;
  inset: 0;
  background: rgba(14, 14, 13, 0.55);
}
/* The panel is the scroll container, not the page behind it. With a full
   collection this list runs to dozens of tiles, and a header that scrolls away
   takes the only way out with it. So: header pinned, grid scrolls under it. */
.tmp-browse__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1000px;
  max-height: calc(100vh - 80px);
  background: #f2f0eb;
  border-top: 4px solid var(--tmp-vertical-colour, #33302C);
  padding: 38px 40px 0;
}

.tmp-browse__head {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: start;
  gap: 20px;
  padding-bottom: 26px;
  border-bottom: 1px solid #d4d0c8;
  flex: 0 0 auto;
}
.tmp-browse__mark { width: 56px; height: auto; display: block; }
.tmp-browse__eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tmp-vertical-colour, #6b6b62);
}
.tmp-browse__title {
  font-family: Gabarito, serif;
  font-weight:800;
  font-size: 34px;
  line-height: 1.1;
  margin: 6px 0 0;
  color: #33302C;
}
.tmp-browse__note {
  margin: 10px 0 0;
  font-size: 13px;
  color: #6b6b62;
}
.tmp-browse__note:empty { display: none; }
.tmp-browse__close {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b6b62;
  background: none;
  border: 1px solid #d4d0c8;
  padding: 9px 14px;
  cursor: pointer;
}
.tmp-browse__close:hover { color: #33302C; border-color: #33302C; }

.tmp-browse__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
  gap: 26px 20px;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* room for the hover lift, and air under the last row */
  padding: 30px 2px 44px;
  margin: 0 -2px;
}

.tmp-browse__item {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #fbfaf7;
  border: 1px solid #d4d0c8;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.tmp-browse__item:hover {
  border-color: var(--tmp-vertical-colour, #33302C);
  transform: translateY(-2px);
}

.tmp-browse__art {
  display: block;
  width: 100%;
  height: 168px;
  object-fit: cover;
  border-bottom: 1px solid #d4d0c8;
}
/* No artwork yet. A mark on the cream, not a grey box with an icon in it. */
.tmp-browse__art--drawn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f2f0eb;
}
/* A watermark, not a claim. Every tile in a vertical carries the same mark, so
   at full strength eight of them read as eight identical products. Quiet enough
   to be texture until real artwork lands. */
.tmp-browse__art-mark {
  width: 54px;
  height: auto;
  opacity: 0.28;
}

.tmp-browse__body { padding: 16px 18px 18px; flex: 1; }
/* Name left, price right, on one line. Baseline alignment so the mono price
   sits on the Gabarito name's first line rather than floating above it. */
.tmp-browse__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
/* The name gets the majority of the row and the label takes what is left.
   No nowrap on the label: "In your library" is fifteen characters and, held on
   one line, it took the whole tile and crushed the name to twenty-one pixels.
   A price has no space in it, so it never wraps regardless. */
.tmp-browse__row .tmp-browse__name { flex: 1 1 62%; min-width: 0; }
.tmp-browse__row .tmp-browse__cta {
  flex: 0 1 auto;
  min-width: 0;
  text-align: right;
  white-space: normal;
}
/* Cards in a grid, so two lines is fine and keeps the grid even. A third line
   would push the card taller than its neighbours. */
.tmp-browse__name {
  font-family: Gabarito, serif;
  font-size: 22px;
  line-height: 1.2;
  color: #33302C;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tmp-browse__blurb {
  margin: 7px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #6b6b62;
}
.tmp-browse__meta {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a8a296;
}

.tmp-browse__cta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tmp-vertical-colour, #33302C);
}

/* Owned reads as a state, not an offer. Quieter, and it goes to the library. */
.tmp-browse__item--owned { background: transparent; }
.tmp-browse__item--owned .tmp-browse__cta { color: #a8a296; }
.tmp-browse__item--owned .tmp-browse__name { color: #6b6b62; }
.tmp-browse__art--owned { opacity: 0.55; }

@media (max-width: 760px) {
  .tmp-browse { padding: 0; }
  .tmp-browse__panel { padding: 26px 20px 0; max-height: 100vh; min-height: 100%; }
  .tmp-browse__head { grid-template-columns: 40px 1fr auto; gap: 14px; }
  .tmp-browse__mark { width: 40px; }
  .tmp-browse__title { font-size: 27px; }
  .tmp-browse__grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px 14px; }
  .tmp-browse__art { height: 132px; }
  .tmp-browse__name { font-size: 19px; }
  .tmp-browse__body { padding: 14px 16px 16px; }
  .tmp-browse__grid { padding: 22px 2px 34px; }
}

/* A programme that exists but has no checkout yet. Still worth a tile: the
   question a member browsing a collection is asking is what is in it. */
.tmp-browse__item--soon { cursor: default; }
.tmp-browse__item--soon:hover { border-color: #d4d0c8; transform: none; }
.tmp-browse__item--soon .tmp-browse__cta { color: #a8a296; }
.tmp-browse__item--soon .tmp-browse__art-mark { opacity: 0.18; }

/* ================================================================
   Portal testing, 31 August. Fixes from Bruce's pass.
   ================================================================ */

/* The document itself had no background. Every surface that looked right was
   getting its cream from a wrapper, and wherever that wrapper did not reach,
   the page fell through to white. That is what turns the page white at phone
   widths. Paint the ground at the document level so nothing can fall through. */
html, body {
  background: #f2f0eb !important;
}

/* Nothing may push the page sideways. Bruce found the left edge cut off in
   Chrome on mobile, which is a horizontal overflow: something inside is wider
   than the viewport and the page scrolls to it. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
img, video, iframe, canvas, table { max-width: 100%; }

/* GHL's own description block holds the raw HTML we send at import: literal
   <p> tags as text. We read it, clean it, and render our own copy in
   .tmp-prog__desc. GHL hides the original at desktop width and stops hiding it
   further down, which is why the markup appears on a phone. Hide it ourselves,
   at every width. Display none still allows textContent to be read, so our
   own description keeps working. */
#product-description { display: none !important; }

/* Comments. Nothing in this product invites a member to comment on a session,
   and on a phone the editor was not only visible but accepting input. The
   wrapper is found by its heading in portal.js, which misses when the mobile
   layout nests it differently. This catches the editor itself, wherever it is. */
#post-details-container .editor-container,
#post-details-container [class*="comment"] { display: none !important; }

/* Playback speed. Speeding up a breathing exercise defeats the exercise. The
   settings button is the only way into the speed menu, and for audio it offers
   nothing else worth having. */
.audio-player-container [data-plyr="settings"],
.audio-player-container .plyr__menu__container,
.plyr [data-plyr="speed"] { display: none !important; }

/* Sizing on small screens. The mono controls are 9.5 to 11px, which is right
   beside a mouse and too small beside a thumb. Apple's minimum touch target is
   44px; these get there through padding rather than by growing the type past
   what the design allows. */
@media (max-width: 620px) {
  .tmp-lib__row-name { font-size: 20px; }
  .tmp-prog__desc, .tmp-prog__desc-lead, .tmp-prog__desc-more { font-size: 15px; }
  .tmp-post-back,
  .tmp-prog__desc-toggle,
  .tmp-shelf__toggle {
    font-size: 11px;
    padding-top: 12px;
    padding-bottom: 12px;
    display: inline-block;
  }
  .tmp-session__num, .tmp-session__state { font-size: 10.5px; }
  /* Previous and next at the foot of a session. Bruce called these super small.
     The link is the touch target, so the padding goes there, not on the label. */
  .tmp-post-nav__link { padding: 14px 0; }
  .tmp-post-nav__dir { font-size: 10.5px; }
  .tmp-post-nav__name { font-size: 15px; }
}

/* ---------- the price has to look like a price ----------

   In the browse grid and on the library shelf the only difference between a
   programme you can buy and one that is months away was the wording, at 9.5px
   mono, one in the vertical's colour and one in warm grey. Side by side at that
   size the two read as the same quiet label, and $97 disappeared into a column
   of Coming soon.

   A price is the one thing on a tile a member is deciding about, so it gets the
   vertical's colour, more size and more weight than any other label in the
   panel. Nothing else moves: this is the only element that changes state from
   information to offer. */
.tmp-browse__item--buy .tmp-browse__cta {
  color: var(--tmp-vertical-colour, #33302C) !important;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.tmp-shelf__item--buy .tmp-shelf__item-cta {
  color: var(--tmp-vertical-colour, #33302C) !important;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

/* ================================================================
   Dashboard tabs, 1 September.
   Recent activity and Explore more programmes were two stacked sections and
   the second one lived below everything the member owned, which is the one
   place a member with five programmes never scrolls to. They are now two tabs
   on one row at the top. The tab label is the heading, so the section eyebrow
   inside the explore panel is suppressed rather than repeated.
   ================================================================ */
.tmp-tabs {
  display: flex;
  gap: 28px;
  border-bottom: 1px solid #d4d0c8;
  margin-bottom: 28px;
}
.tmp-tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0 0 12px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a8a296;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.tmp-tab:hover { color: #6b6b62; }
.tmp-tab--on {
  color: #33302C;
  border-bottom-color: #33302C;
}
.tmp-tabpanel[hidden] { display: none !important; }
/* The tab already says this. */
.tmp-tabpanel .tmp-dashboard-verticals > .tmp-auth-eyebrow { display: none; }
.tmp-tabpanel .tmp-dashboard-verticals { margin: 0 !important; }

@media (max-width: 560px) {
  .tmp-tabs { gap: 18px; }
  .tmp-tab { font-size: 11px; letter-spacing: 0.12em; }
}

/* ================================================================
   The player, 1 September.

   GHL's Plyr and its stock headphones block are hidden, not restyled. What is
   drawn here is ours, and it is the same component at every width, because the
   phone was getting a video-shaped widget with a play overlay on an
   illustration nobody chose.

   Wide rule: an open row of controls, a hairline the full measure beneath, and
   the times at each end. No card, no fill, no border. The ground behind it is
   going to carry artwork or a slow motion loop, and everything here has to read
   on top of that without a panel to sit on.
   ================================================================ */
html.tmp-lesson .audio-content,
.tmp-post-body .audio-content { display: none !important; }
/* Plyr is taken out of the layout rather than out of the render tree. A media
   element inside a display:none subtree is a state some browsers treat as a
   reason to deprioritise loading, and there is nothing to gain by risking it:
   clipped to a pixel it is just as invisible and still fully rendered. */
html.tmp-lesson .plyr,
.tmp-post-body .plyr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip-path: inset(50%) !important;
}

/* The card that used to hold Plyr. It is now just space around the rule.
   display:block is load-bearing: GHL lays this container out as a flex row, so
   our player became a content-sized flex item 248px wide in a 900px column. */
/* Matched on our own class as well as GHL's id, because the narrow lesson
   template does not always render #post-audio and the card then kept GHL's
   flex row and its border. */
.tmp-post-body #post-audio,
html.tmp-lesson .tmp-audio-host {
  display: block !important;
  position: relative;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--tmp-vertical-colour, #33302C) !important;
  border-radius: 0 !important;
  padding: 30px 0 26px !important;
}

.tmp-player { --p: 0%; }

.tmp-player__controls {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-bottom: 26px;
}
.tmp-player__gap { flex: 1 1 auto; }

.tmp-player__btn {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #33302C;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: color 0.15s ease, opacity 0.15s ease;
}
.tmp-player__btn:hover { color: var(--tmp-vertical-colour, #33302C); }
.tmp-player__btn svg { display: block; fill: currentColor; }
/* The skip glyphs are drawn as strokes, so they must not take the fill. */
.tmp-player__stroke {
  fill: none !important;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tmp-player__btn--skip svg { width: 34px; height: 34px; }
.tmp-player__stroke path:last-child { fill: currentColor !important; stroke: none; }
/* The number sits inside the arrow's loop. */
.tmp-player__btn--skip span {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--mono);
  font-size: 10px;
  font-weight:600;
  letter-spacing: 0.01em;
  pointer-events: none;
}
/* The one control with weight. Circular, in the vertical's colour, and large
   enough to be the obvious thing on the page. */
.tmp-player__btn--play {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--tmp-vertical-colour, #33302C) !important;
  color: #fff;
}
.tmp-player__btn--play:hover { color: #fff; opacity: 0.88; }
.tmp-player__btn--play svg { width: 26px; height: 26px; }
/* Play sits a touch right of centre; the triangle's optical centre is not its
   bounding box centre. */
.tmp-player--on .tmp-player__i--play,
.tmp-player__i--pause { display: none; }
.tmp-player--on .tmp-player__i--pause { display: block; }
.tmp-player__i--play { display: block; margin-left: 3px; }
.tmp-player--on .tmp-player__i--play { display: none; }

.tmp-player__btn--mute svg { width: 22px; height: 22px; }
.tmp-player__i--muted { display: none; }
.tmp-player--muted .tmp-player__i--loud { display: none; }
.tmp-player--muted .tmp-player__i--muted { display: block; }
.tmp-player--muted .tmp-player__btn--mute { color: #a8a296; }

/* A hairline, not a bar. The played portion is the vertical's colour, the rest
   is the same rule used everywhere else on the page. */
.tmp-player__scrub {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  height: 18px;
  margin: 0;
  background: none;
  cursor: pointer;
}
.tmp-player__scrub::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(to right,
    var(--tmp-vertical-colour, #33302C) var(--p),
    #d4d0c8 var(--p));
}
.tmp-player__scrub::-moz-range-track {
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(to right,
    var(--tmp-vertical-colour, #33302C) var(--p),
    #d4d0c8 var(--p));
}
.tmp-player__scrub::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  margin-top: -5.5px;
  border-radius: 50%;
  background: var(--tmp-vertical-colour, #33302C);
  border: 2px solid #f2f0eb;
}
.tmp-player__scrub::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: 2px solid #f2f0eb;
  border-radius: 50%;
  background: var(--tmp-vertical-colour, #33302C);
}

.tmp-player__times {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: #6b6b62;
}
.tmp-player__now { color: #33302C; }

@media (max-width: 620px) {
  .tmp-post-body #post-audio { padding: 24px 0 20px !important; }
  .tmp-player__controls { gap: 18px; margin-bottom: 22px; }
  .tmp-player__btn--play { width: 54px; height: 54px; }
  .tmp-player__btn--play svg { width: 23px; height: 23px; }
}

/* ---------- notes to yourself ---------- */
.tmp-tabs--sub { gap: 24px; margin-bottom: 22px; }
.tmp-tabs--sub .tmp-tab { font-size: 13px; letter-spacing: 0.16em; padding-bottom: 10px; }

.tmp-notes__hint {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #6b6b62;
}
.tmp-notes__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid #d4d0c8;
  border-radius: 2px;
  background: #fbfaf7;
  font-family: Gabarito, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #33302C;
  resize: vertical;
}
.tmp-notes__input:focus {
  outline: none;
  border-color: var(--tmp-vertical-colour, #33302C);
}
.tmp-notes__save {
  appearance: none;
  margin-top: 12px;
  padding: 9px 18px;
  border: 0;
  border-radius: 2px;
  background: var(--tmp-vertical-colour, #33302C);
  color: #fff;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tmp-notes__save:hover { opacity: 0.88; }

/* Written again, scoped and forced. A lesson loads GHL's course bundle after
   portal.css, so the rule above matches on one class and loses the tie on
   source order: the computed padding came back as GHL's 13px 20px, not ours,
   and the label wrapped inside a box sized for something else. Same trap that
   has cost this page two releases already.

   nowrap is the load-bearing part. "Save note" is two words and the button is
   allowed to shrink, so without it the label breaks over three lines and the
   button turns into a tall square. */
html.tmp-lesson .tmp-post-body .tmp-notes__save {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 14px 0 0 !important;
  padding: 11px 20px !important;
  border: 0 !important;
  border-radius: 2px !important;
  background: var(--tmp-vertical-colour, #33302C) !important;
  color: #fff !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-weight:600 !important;
  line-height: 1 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

.tmp-notes__list { margin-top: 26px; }
.tmp-notes__empty {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a8a296;
}
.tmp-note {
  position: relative;
  padding: 14px 90px 14px 0;
  border-top: 1px solid #e8e4da;
}
.tmp-note:first-child { border-top: 0; padding-top: 0; }
.tmp-note__when {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a8a296;
  margin-bottom: 5px;
}
.tmp-note__text {
  font-size: 15px;
  line-height: 1.6;
  color: #33302C;
  white-space: pre-wrap;
}
.tmp-note__del {
  position: absolute;
  top: 14px;
  right: 0;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a8a296;
}
.tmp-note:first-child .tmp-note__del { top: 0; }
.tmp-note__del:hover { color: #BE765F; }

/* ================================================================
   One page frame, 1 September.

   Scott: "every single one is rendering differently" on a phone. Measured, and
   he is right, and the cause is that the gutter was never ours. GoHighLevel
   pads .cp-main-content-inner by 24px on the dashboard and the library and by
   nothing at all on a programme page, and our own containers add another 24px
   on the library and the programme and nothing on the dashboard. The three
   pages therefore land on 24px, 48px and 24px of gutter by accident, and on a
   390px phone a 48px gutter is an eighth of the screen.

   So the gutter stops depending on GHL. Its padding is zeroed on the four
   pages we own, ours is the only one left, and it comes from one variable.
   :has() keeps that scoped: every other page in the portal, invoices,
   communities, settings, keeps GHL's own frame.

   Below that, one type ramp and one set of touch targets. The stylesheet had
   grown six breakpoints added page by page, which is the other half of why no
   two screens agreed.
   ================================================================ */

:root { --tmp-gutter: 24px; }

.cp-main-content-inner:has(#dashboard-page-root),
.cp-main-content-inner:has(.tmp-lib),
.cp-main-content-inner:has(.tmp-prog),
.cp-main-content-inner:has(.tmp-post-body) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#dashboard-page-root,
.tmp-lib,
.tmp-prog,
.tmp-prog-body,
.tmp-post-body {
  padding-left: var(--tmp-gutter) !important;
  padding-right: var(--tmp-gutter) !important;
}

/* And one measure. The library, a programme and a session all cap at 1152px
   and centre; the dashboard was the only page running edge to edge, so on a
   wide screen it was the odd one out and on a narrow one the two disagreed
   about where a line of text starts. */
#dashboard-page-root {
  max-width: 1152px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 620px) {
  :root { --tmp-gutter: 20px; }

  /* --- one type ramp ---
     Page titles were 30px on the dashboard and the library, and 48px on a
     session, which is the single loudest reason a session did not look like
     part of the same product. */
  .tmp-lib__title { font-size: 30px !important; }
  .tmp-lib__head { margin-bottom: 26px; gap: 14px; }
  .tmp-lib__home { font-size: 11px; letter-spacing: 0.12em; }
  .tmp-post-title { font-size: 30px; }
  .tmp-prog__name { font-size: 30px !important; }
  .tmp-hero-name { font-size: 26px; }

  /* Card and row names, one size wherever they appear. */
  .tmp-course-panel__name,
  .tmp-browse__name,
  .tmp-lib__row-name,
  .tmp-shelf__item-name,
  .tmp-vertical-panel__name,
  .tmp-post-nav__name { font-size: 19px; }

  /* Eyebrows, one size wherever they appear. */
  .tmp-auth-eyebrow,
  .tmp-hero-tag,
  .tmp-prog__tag,
  .tmp-post-prog,
  .tmp-course-panel__tag,
  .tmp-browse__eyebrow,
  .tmp-tab { font-size: 11px; letter-spacing: 0.12em; }

  /* --- one column --- */
  .tmp-course-grid,
  .tmp-vertical-grid,
  .tmp-browse__grid { grid-template-columns: 1fr; }

  /* --- inner padding, so a card is not mostly margin ---
     !important throughout: the desktop rules for these carry it, so a plain
     override here silently loses and the card keeps its 24px inset. */
  .tmp-hero { padding: 20px !important; }
  .tmp-lib__row { padding: 16px 18px !important; }
  .tmp-course-panel { padding: 16px 18px !important; }
  .tmp-session {
    padding: 16px 16px !important;
    grid-template-columns: 28px 1fr auto !important;
    gap: 12px !important;
  }

  /* One left edge on the programme page. The header carries a 4px rule and a
     22px indent, so its text started 26px right of the progress row and the
     session list below it. On a 390px screen two left edges on one page is the
     most visible thing on it. The rule goes; the vertical is already named by
     the eyebrow above the title. */
  .tmp-prog__head {
    border-left: 0 !important;
    padding-left: 0;
    padding-right: 0;
  }

  /* Decoration, and the first thing to go when there are 350 pixels to spend.
     The programme mark is worse than decoration on a phone: it is absolutely
     positioned on desktop, so at narrow widths it drops into the flow and
     lands under the description looking like a stray image. */
  .tmp-hero-mark,
  .tmp-prog__mark { display: none !important; }

  /* The shelf toggle is a label and a plus. It was being stacked, which left
     the plus orphaned on its own line under the label looking broken. It fits
     on one row at 359px; the "coming soon" variant genuinely does not, and
     stays stacked. */
  .tmp-shelf__toggle {
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
  }

  /* Previous and next stay side by side and take half the row each.

     They used to stack, because at 48% of a phone a session name had 170px and
     every one of them truncated. The names now clip with an ellipsis and the
     halves are equal, so the pair reads as one control and its outer edges
     line up with the card below, which is what the stacked version lost. */
  .tmp-post-nav { flex-direction: row; gap: 10px; }
  .tmp-post-nav__link {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
    padding: 13px 12px;
  }
  .tmp-post-nav__link--next { margin-left: 0; text-align: right; }
  .tmp-post-nav__name { font-size: 13.5px; }

  /* --- touch targets --- */
  .tmp-player__btn--skip,
  .tmp-player__btn--mute { min-width: 44px; min-height: 44px; }
  .tmp-notes__save { padding: 13px 20px; }
  .tmp-tab { padding-bottom: 14px; }
  /* Under 16px, iOS zooms the whole page when the field takes focus and never
     zooms back out. */
  .tmp-notes__input { font-size: 16px; }
}

/* ================================================================
   The session scene, 1 September.

   The player screen gets the same treatment as the dashboard: a slow looping
   line drawing behind the page under the same cream veil, so the login screen,
   the dashboard and a session all share one tint. The drawing is the brand mark
   as a stone fountain, which suits the one screen a member sits still on.

   The player was already built with no card and no fill for exactly this. The
   surfaces above it have to get out of the way: .tmp-post-body paints cream and
   GHL's content area paints cream behind it, and either one left opaque hides
   the video completely.
   ================================================================ */
body.tmp-has-scene .tmp-post-body,
body.tmp-has-scene:has(.tmp-post-body) .cp-content-area,
body.tmp-has-scene:has(.tmp-post-body) .cp-main-content,
body.tmp-has-scene:has(.tmp-post-body) .cp-main-content-inner {
  background: transparent !important;
}
/* The lesson copy keeps its white card. Reading a description over moving
   linework is the one place on this screen where the scene would be in the way,
   and the card is what separates the two. */
body.tmp-has-scene .tmp-post-body #post-body { background: #fff !important; }

/* The player sits directly on the drawing, with no card, which is the point.
   The one thing that costs is the small mono clock at each end of the hairline:
   at 11px in warm grey over moving linework it stops being readable. Same cream
   as the dashboard and the login screen, a little denser through the upper two
   thirds where the heading, the controls and the times sit, and the times
   themselves a step darker. Nothing else changes. */
body.tmp-has-scene:has(.tmp-post-body) .tmp-scene__veil {
  background: linear-gradient(
    180deg,
    rgba(242, 240, 235, 0.93) 0%,
    rgba(242, 240, 235, 0.91) 26%,
    rgba(242, 240, 235, 0.8) 58%,
    rgba(242, 240, 235, 0.62) 100%
  );
}
body.tmp-has-scene .tmp-player__times { color: #4f4f47; }
body.tmp-has-scene .tmp-player__now { color: #33302C; }

/* The programme page gets its own scene on the same terms. Its surfaces have to
   step back the same way the session's do, or GHL's content area paints cream
   straight over the video. */
body.tmp-has-scene:has(.tmp-prog) .cp-content-area,
body.tmp-has-scene:has(.tmp-prog) .cp-main-content,
body.tmp-has-scene:has(.tmp-prog) .cp-main-content-inner,
body.tmp-has-scene .tmp-prog,
body.tmp-has-scene .tmp-prog-body,
body.tmp-has-scene:has(.tmp-lib) .cp-content-area,
body.tmp-has-scene:has(.tmp-lib) .cp-main-content,
body.tmp-has-scene:has(.tmp-lib) .cp-main-content-inner,
body.tmp-has-scene .tmp-lib {
  background: transparent !important;
}
/* Same denser upper two thirds as the session, for the same reason: the
   eyebrow, the title and the progress marks sit up there. */
body.tmp-has-scene:has(.tmp-prog) .tmp-scene__veil,
body.tmp-has-scene:has(.tmp-lib) .tmp-scene__veil {
  background: linear-gradient(
    180deg,
    rgba(242, 240, 235, 0.93) 0%,
    rgba(242, 240, 235, 0.91) 26%,
    rgba(242, 240, 235, 0.8) 58%,
    rgba(242, 240, 235, 0.62) 100%
  );
}

/* ================================================================
   Browse tiles: one thickness, 1 September.

   The thin tile, a tall drawing over a single line of name beside the price, is
   the one that works. It was not being applied evenly, for two reasons that
   both had to be fixed.

   The tiles sit in a grid, and a grid row is as tall as its tallest item, so
   one two-line name made every tile beside it taller too. Tennis was 87px of
   white for no reason of its own: it sat next to Football (Soccer). align-self
   stops a tile inheriting its neighbour's height.

   And the name was allowed two lines. One line, with an ellipsis, is what keeps
   every tile the same. Scott: cut off is fine, inconsistent is not.
   ================================================================ */
.tmp-browse__item { align-self: start; }
.tmp-browse__name { -webkit-line-clamp: 1 !important; }
/* Never wraps, so it can never add a second line to the row. The labels are all
   short enough now that it does not squeeze the name either. */
.tmp-browse__row .tmp-browse__cta { white-space: nowrap; }
/* Nothing uses these on a tile today. Held at zero height so that adding a
   blurb or a session count to a shelf entry later cannot quietly reintroduce
   the uneven grid this block exists to fix. */
.tmp-browse__body .tmp-browse__blurb,
.tmp-browse__body .tmp-browse__meta { display: none; }

/* The name at 22px in a 156px column fitted about sixteen characters, which
   trimmed twenty-nine of the seventy programmes. 19px with a 10px label buys
   back enough room that only the genuinely long names need a short form, and
   the tile gets thinner rather than thicker. The price keeps its size: it is
   the one thing on the tile that has to be seen from across the grid. */
.tmp-browse__name { font-size: 19px !important; }
.tmp-browse__row .tmp-browse__cta { font-size: 10px; }
.tmp-browse__item--buy .tmp-browse__cta { font-size: 15px !important; }

/* The session page eyebrow carries the programme name, so it breaks by the same
   rule as everywhere else. Mono at 11px, so a second line needs the leading. */
.tmp-post-prog { line-height: 1.5; }

/* ================================================================
   Account settings, 2 September.

   Scott: functional and working, so no redesign and no rearranging. This is a
   re-dress only. Every rule below changes colour, type or a border. Nothing
   moves, nothing is hidden, no control changes behaviour.

   Neutral throughout. These pages belong to the member rather than to a
   programme, so there is no vertical colour to carry and ink is the accent.

   Scoped to the account settings wrapper so none of it can reach the rest of
   the portal, where GHL reuses these same hr- classes.
   ================================================================ */
.cp-main-content-inner--account-settings {
  background: #f2f0eb !important;
}
body:has(.cp-main-content-inner--account-settings) .cp-content-area,
body:has(.cp-main-content-inner--account-settings) .cp-main-content {
  background: #f2f0eb !important;
}

/* --- the rail --- */
.account-settings-switcher-rail__heading {
  font-family: Gabarito, serif !important;
  font-size: 26px !important;
  font-weight:800 !important;
  color: #33302C !important;
  letter-spacing: 0 !important;
}
.cp-main-content-inner--account-settings .selectable-list-item {
  font-family: Gabarito, sans-serif !important;
  font-size: 15px !important;
  color: #6b6b62 !important;
  border-radius: 2px !important;
  border-left: 2px solid transparent !important;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.cp-main-content-inner--account-settings .selectable-list-item:hover {
  background: #e8e4da !important;
  color: #33302C !important;
}
/* The active item was a black pill, which is the one thing on these pages that
   shouts. A rule in the margin and ink type says the same thing quietly. */
.cp-main-content-inner--account-settings .selectable-list-item--active {
  background: #e8e4da !important;
  color: #33302C !important;
  border-left-color: #33302C !important;
  font-weight: 500 !important;
}
.cp-main-content-inner--account-settings .selectable-list-item--active,
.cp-main-content-inner--account-settings .selectable-list-item--active * {
  color: #33302C !important;
}

/* --- the card --- */
.cp-main-content-inner--account-settings .main-scroll {
  background: #fff !important;
  border: 1px solid #d4d0c8 !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}

/* --- type --- */
/* Section heading. Gabarito, the same voice as every other page title. */
.cp-main-content-inner--account-settings .hr-text-lg.hr-text-semibold {
  font-family: Gabarito, serif !important;
  font-size: 28px !important;
  font-weight:800 !important;
  color: #33302C !important;
  letter-spacing: 0 !important;
}
/* Field labels in mono, the way every other label in the portal is set. */
.cp-main-content-inner--account-settings .hr-form-item-label {
  font-family: Gabarito, monospace !important;
  font-size: 10.5px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #6b6b62 !important;
}
/* The descriptive line under a section heading, on every tab: "Update your
   basic details here", "View account email and change password." The heading
   already says it. Matched as the heading's immediate sibling so the help text
   under an individual field, which shares these classes, survives. */
.cp-main-content-inner--account-settings .hr-text-lg.hr-text-semibold + .hr-text-sm {
  display: none !important;
}
/* The line under a field, and the line under the section heading. */
.cp-main-content-inner--account-settings .hr-text-sm.text-600,
.cp-main-content-inner--account-settings .hr-text-md.hr-text-regular {
  font-family: Gabarito, sans-serif !important;
  font-size: 13px !important;
  color: #6b6b62 !important;
}
.cp-main-content-inner--account-settings .hr-text-md.hr-text-medium {
  font-family: Gabarito, sans-serif !important;
  color: #33302C !important;
}

/* --- the authenticate panel on Billing & Subscriptions --- */
/* GHL draws the shield in its "on primary" colour, which is near black and was
   fine against its own light primary. Ours is ink, so the icon disappeared into
   the disc it sits on. Cream, the way every other mark on a dark ground in the
   portal is set. Scoped to the round disc so the active rail item, which also
   carries bg-primary but on the pale shell, keeps its dark text. */
.cp-main-content-inner--account-settings .rounded-full.bg-primary svg,
.cp-main-content-inner--account-settings .rounded-full.bg-primary .text-on-primary {
  color: #f2f0eb !important;
  stroke: #f2f0eb !important;
}

/* --- fields --- */
.cp-main-content-inner--account-settings .hr-input__input-el,
.cp-main-content-inner--account-settings .hr-input__textarea-el,
.cp-main-content-inner--account-settings .hr-select,
.cp-main-content-inner--account-settings .hr-base-selection-input {
  font-family: Gabarito, sans-serif !important;
  font-size: 15px !important;
  color: #33302C !important;
  background: #fbfaf7 !important;
  border-radius: 2px !important;
}
.cp-main-content-inner--account-settings .hr-input,
.cp-main-content-inner--account-settings .hr-input__wrapper,
.cp-main-content-inner--account-settings .hr-select-wrapper,
.cp-main-content-inner--account-settings .cp-select-wrapper {
  border-radius: 2px !important;
}
.cp-main-content-inner--account-settings input:focus,
.cp-main-content-inner--account-settings textarea:focus {
  outline: none !important;
  border-color: #33302C !important;
}

/* --- the two buttons at the foot --- */
/* Matched to .tmp-btn, so Save here reads as the same control as Start
   programme on the dashboard. Cancel steps back to a quiet text button. */
.cp-main-content-inner--account-settings .hr-button {
  font-family: Gabarito, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border-radius: 3px !important;
}
/* GHL wraps a button label in a <p> carrying the same classes a section
   heading uses. The heading rule further up was painting it ink, on an ink
   button, so Generate Secure Code read as an empty black slab. It takes the
   button's own colour and type instead. */
.cp-main-content-inner--account-settings .hr-button .hr-text-lg.hr-text-semibold {
  font-family: Gabarito, monospace !important;
  font-size: 11px !important;
  font-weight:600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: inherit !important;
}
/* Primary is Save, secondary is Cancel. GHL marks both with --disabled until
   the form is dirty, so the disabled state has to keep its own look or a
   greyed-out Save would read as available. */
.cp-main-content-inner--account-settings .hr-button--primary {
  background: #33302C !important;
  border-color: #33302C !important;
  color: #fff !important;
}
.cp-main-content-inner--account-settings .hr-button--primary.hr-button--disabled {
  background: #d4d0c8 !important;
  border-color: #d4d0c8 !important;
  color: #fbfaf7 !important;
}
.cp-main-content-inner--account-settings .hr-button--secondary {
  background: transparent !important;
  border-color: #d4d0c8 !important;
  color: #6b6b62 !important;
}
.cp-main-content-inner--account-settings .hr-button--secondary:hover {
  border-color: #33302C !important;
  color: #33302C !important;
}

/* ================================================================
   Terms, privacy and refunds, 2 September.

   A panel rather than a page. GHL owns the routing and we cannot add a route,
   so this opens over whatever the member was on and #terms on any portal page
   opens it directly, which gives it a shareable address without touching GHL.

   Same shell as the browse panel, deliberately: to a member it is the same
   object, not a second kind of overlay.
   ================================================================ */
.tmp-legal { position: fixed; inset: 0; z-index: 90; }
.tmp-legal[hidden] { display: none !important; }
.tmp-legal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(51,48,44, 0.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.tmp-legal__panel {
  position: relative;
  max-width: 780px;
  margin: 4vh auto;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: #f2f0eb;
  border: 1px solid #d4d0c8;
  border-top: 3px solid #33302C;
  border-radius: 2px;
  box-shadow: 0 24px 60px rgba(51,48,44, 0.18);
}
.tmp-legal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 30px 34px 22px;
  border-bottom: 1px solid #d4d0c8;
}
.tmp-legal__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6b6b62;
  margin-bottom: 8px;
}
.tmp-legal__title {
  font-family: Gabarito, serif;
  font-weight:800;
  font-size: 34px;
  line-height: 1.1;
  color: #33302C;
  margin: 0;
}
.tmp-legal__updated {
  margin: 8px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a8a296;
}
.tmp-legal__close {
  flex-shrink: 0;
  appearance: none;
  background: none;
  border: 1px solid #d4d0c8;
  border-radius: 3px;
  padding: 9px 16px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b6b62;
}
.tmp-legal__close:hover { border-color: #33302C; color: #33302C; }

.tmp-legal__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 30px 34px 40px;
}
/* A reading measure, not a full-width wall of small print. */
.tmp-legal__body > * { max-width: 62ch; }
.tmp-legal__lead {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.6;
  color: #33302C;
}
.tmp-legal__h {
  font-family: Gabarito, serif;
  font-weight:800;
  font-size: 27px;
  line-height: 1.15;
  color: #33302C;
  margin: 40px 0 4px;
  padding-top: 22px;
  border-top: 1px solid #d4d0c8;
}
.tmp-legal__h:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.tmp-legal__sub {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b6b62;
  margin: 26px 0 2px;
}
.tmp-legal__p {
  margin: 14px 0 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: #4f4f47;
}
.tmp-legal__p b { color: #33302C; font-weight: 500; }
.tmp-legal__list {
  margin: 12px 0 0;
  padding-left: 20px;
  font-size: 15.5px;
  line-height: 1.65;
  color: #4f4f47;
}
.tmp-legal__list li { margin-top: 6px; }
/* The crisis numbers. The one block on the page that has to be findable in a
   hurry, so it is the only thing given a panel of its own. */
.tmp-legal__callout {
  margin: 22px 0 0;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid #d4d0c8;
  border-left: 3px solid #BE765F;
  border-radius: 2px;
  font-size: 15.5px;
  line-height: 1.65;
  color: #33302C;
}

body.tmp-noscroll { overflow: hidden; }

@media (max-width: 620px) {
  .tmp-legal__panel { margin: 0; max-height: 100vh; border-radius: 0; border-left: 0; border-right: 0; }
  .tmp-legal__head { padding: 22px 20px 18px; }
  .tmp-legal__title { font-size: 26px; }
  .tmp-legal__body { padding: 22px 20px 34px; }
  .tmp-legal__h { font-size: 23px; }
}

/* ---------- the dashboard foot ----------
   Anchored to the floor of the page rather than trailing the last card. On the
   All programmes tab the content runs past the viewport and this changes
   nothing. On Explore, which is shorter, the foot used to stop wherever the
   content did and hang in the middle of the scene.

   GHL nests the dashboard root two single child wrappers deep inside the
   scrolling column, and neither wrapper passes height down. Both are given a
   growing flex column so the root can fill what is left, and the wrap then
   takes the slack. The :has() scoping keeps all of it on the dashboard. */
main.cp-main-content > :has(#dashboard-page-root),
main.cp-main-content :has(> #dashboard-page-root) {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}
#dashboard-page-root:has(.tmp-footwrap) { flex: 1 0 auto; }
.tmp-footwrap {
  margin-top: auto;
  padding-top: 56px;
}
.tmp-foot {
  padding: 22px 0 44px;
  border-top: 1px solid #d4d0c8;
}
.tmp-foot__link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b6b62;
  text-decoration: none;
  border-bottom: 1px solid #d4d0c8;
  padding-bottom: 3px;
}
.tmp-foot__link:hover { color: #33302C; border-bottom-color: #33302C; }
.tmp-foot__legal {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #8b8578;
}

/* ---------- voice tabs ----------
   Six voices per session, chosen once and remembered. The strip sits directly
   above the player, inside the same host, so it reads as part of the player
   rather than as page furniture.

   Everything here carries !important and the .tmp-post-body scope. A lesson
   loads GHL's course bundle after portal.css, so any rule of ours matching on
   a single class loses the tie on source order, silently. That cost a release
   once already on the tab strip and the notes controls. */
.tmp-post-body .tmp-voices {
  display: flex !important;
  gap: 0 !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  border-bottom: 1px solid rgba(51,48,44, .15) !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch;
}
.tmp-post-body .tmp-voices::-webkit-scrollbar { display: none !important; }

.tmp-post-body .tmp-voice {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 3px !important;
  background: none !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 10px 16px 11px !important;
  margin: 0 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  color: #6b6b62 !important;
  box-shadow: none !important;
}
.tmp-post-body .tmp-voice__name {
  font-family: Gabarito, ui-monospace, monospace !important;
  font-size: 13px !important;
  font-weight:600 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: inherit !important;
}
.tmp-post-body .tmp-voice__accent {
  font-family: Gabarito, ui-monospace, monospace !important;
  font-size: 10.5px !important;
  font-weight:600 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: #a8a296 !important;
}
.tmp-post-body .tmp-voice:hover { color: #33302C !important; }
.tmp-post-body .tmp-voice[aria-selected="true"] {
  color: var(--tmp-vertical-colour, #33302C) !important;
  border-bottom-color: var(--tmp-vertical-colour, #33302C) !important;
}
.tmp-post-body .tmp-voice[aria-selected="true"] .tmp-voice__accent {
  color: var(--tmp-vertical-colour, #33302C) !important;
  opacity: .7 !important;
}

/* On a phone six voices do not fit across, and a strip that scrolls sideways
   hides three of them behind an edge with nothing to say they are there. Two
   rows of three instead. A grid, so the columns line up between the rows and
   every voice has the same tap target. */
@media (max-width: 640px) {
  .tmp-post-body .tmp-voices {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    overflow-x: visible !important;
    border-bottom: 0 !important;
    gap: 0 !important;
    margin-bottom: 20px !important;
  }
  .tmp-post-body .tmp-voice {
    flex: none !important;
    align-items: center !important;
    text-align: center !important;
    padding: 11px 6px 10px !important;
    border-bottom: 1px solid rgba(51,48,44, .15) !important;
    border-top: 2px solid transparent !important;
    white-space: normal !important;
  }
  /* The selected mark moves to the top edge on a phone. On the bottom it sat
     against the row below and read as a divider rather than a state. */
  .tmp-post-body .tmp-voice[aria-selected="true"] {
    border-bottom-color: rgba(51,48,44, .15) !important;
    border-top-color: var(--tmp-vertical-colour, #33302C) !important;
    background: rgba(51,48,44, .03) !important;
  }
  .tmp-post-body .tmp-voice__name { font-size: 12px !important; letter-spacing: .1em !important; }
  .tmp-post-body .tmp-voice__accent { font-size: 9.5px !important; letter-spacing: .08em !important; }
}

/* Only the vertical scenes take the saturation boost. Everything outside the
   mark in those files has had its chroma removed, so multiplying saturation
   lifts the mark and lifts nothing else. The dashboard garden and the two
   neutral drawings still carry stray chroma of their own and would go muddy
   under the same rule, so it is scoped to the class scene() sets.

   Saturation is deliberately left at natural. Boosting it was tried and is
   wrong: the render carries a warm glow in the sky right behind the mark, and
   any multiplier large enough to make a cool mark read through the veil turns
   that glow yellow and the stone koru orange. Neither colour is in the
   palette. The lever that works is the veil, because lifting it shows the
   image as drawn rather than distorting its hue. */
.tmp-scene--v video {
  filter: saturate(1) blur(1px) !important;
}

/* A lighter veil, only where a vertical scene is behind a programme or a
   session. The dashboard and the library keep theirs: they carry the neutral
   garden, which has no colour to bring through, and their density was set
   against that drawing.

   These are the session values at 0.82. The upper band still sits above 0.74,
   which is what the eyebrow, the title and the session number need. */
body.tmp-has-scene:has(.tmp-post-body) .tmp-scene--v .tmp-scene__veil,
body.tmp-has-scene:has(.tmp-prog) .tmp-scene--v .tmp-scene__veil {
  background: linear-gradient(
    180deg,
    rgba(242, 240, 235, 0.76) 0%,
    rgba(242, 240, 235, 0.75) 26%,
    rgba(242, 240, 235, 0.66) 58%,
    rgba(242, 240, 235, 0.51) 100%
  ) !important;
}
/* Two facts, two lines. See openBrowse. */
.tmp-browse__title-line { display: block; }

/* ================================================================
   THE PROGRAMME PAGE ON A PHONE

   Below GHL's breakpoint, which runs up past 1024px and so covers
   tablets and small laptop windows as well as phones, the programme
   page is a different component tree: a blank poster panel, an
   "About this course" block, a bordered card of grey tick rows, and
   a sticky stats column. programme() resolves that tree and stamps
   html.tmp-prog-narrow. Everything below is the re-dress.

   Two rules govern this block, both learned on the lesson page.

   One: nothing load-bearing may depend on a class WE put on a node
   GHL owns. Vue re-renders these, our class goes with the render,
   and the page reformats for a beat before the next observer pass
   puts it back. So every hide is written twice, once on our class
   and once on GHL's own id, and the layout below never assumes how
   many children a row currently has.

   Two: everything carries !important and hangs off html, because
   GHL's course bundle loads after portal.css and a rule matching on
   one class loses silently.
   ================================================================ */

/* The content column is indented 64px, on a 390px screen. Killed on our
   own class and again on GHL's utility class, so a re-render cannot put
   the indent back. Scoped to the narrow programme page, which is the only
   place html.tmp-prog-narrow is set. */
html.tmp-prog-narrow .tmp-prog-wrap,
html.tmp-prog-narrow .cp-main-content .ml-16 {
  margin-left: 0 !important;
  margin-right: 0 !important;
  min-width: 0 !important;
}

/* GHL's own furniture above the list. Our header carries all of it. */
html.tmp-prog-narrow #checkout-content-poster-image,
html.tmp-prog-narrow #checkout-content-description,
html.tmp-prog-narrow #checkout-content-title,
html.tmp-prog-narrow .cp-layout .sticky.col-span-3 {
  display: none !important;
}

/* The body is the whole content column now, not the card. */
html.tmp-prog-narrow .tmp-prog-body {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  margin: 0 auto !important;
  padding-top: 0 !important;
}
html.tmp-prog-narrow .tmp-prog-card,
html.tmp-prog-narrow .tmp-prog-body .category-tree,
html.tmp-prog-narrow .tmp-prog-body .accordion-content,
html.tmp-prog-narrow .tmp-prog-body .accordion-inner-content,
html.tmp-prog-narrow .tmp-prog-body [class*="bg-background"],
html.tmp-prog-narrow .tmp-prog-body [class*="custom-colors"] {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
}
html.tmp-prog-narrow .tmp-prog-card { margin-top: 26px !important; }

/* The module header is the accordion toggle, so it stays. It becomes the
   same mono eyebrow the wide page prints above the list. The "1." index and
   the session count go: the progress row above already carries the count. */
html.tmp-prog-narrow .tmp-prog-body [id^="posts-container-section-header-"] {
  background: transparent !important;
  padding: 0 0 14px !important;
  margin: 0 !important;
}
html.tmp-prog-narrow .tmp-prog-body [id^="posts-container-section-header-"] > div > p:first-child,
html.tmp-prog-narrow .tmp-prog-body [id^="posts-container-category-"][id$="-lessons-count"] {
  display: none !important;
}
html.tmp-prog-narrow .tmp-prog-body [id^="posts-container-category-"][id$="-title"] {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-weight:600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #6b6b62 !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
html.tmp-prog-narrow .tmp-prog-body [id^="posts-chevron-"] { color: #a8a296 !important; }
html.tmp-prog-narrow .tmp-prog-body [id^="posts-chevron-"] svg {
  width: 14px !important;
  height: 14px !important;
}

/* Rows.

   Flex, not the grid the wide page uses, and this is the one thing in here
   worth reading twice. The wide row is GHL markup we insert into: number
   first, name in the middle, state last, three children, three columns.
   The narrow row's real content is one wrapper div, so the number and the
   state are ours and the wrapper is GHL's. When Vue patches a row it keeps
   the element and replaces the children, which takes our two spans with it
   until the next observer pass puts them back. Under a three column grid
   that beat renders the wrapper in the 28px number column: the session name
   goes one character wide and the row four lines tall. It is brief, it is
   only on this template, and it is exactly the sort of thing that shows up
   on a phone and not in a desktop window.

   Flex with the state pushed right by auto margin lays out correctly on one
   child, two or three, so there is no wrong frame to catch. */
html.tmp-prog-narrow .tmp-session {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: #fff !important;
  border: 1px solid #d4d0c8 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  padding: 16px !important;
  margin: 0 !important;
  transition: none !important;
}
html.tmp-prog-narrow .tmp-session:last-child { border-bottom: 1px solid #d4d0c8 !important; }
html.tmp-prog-narrow .tmp-session .tmp-session__num {
  flex: 0 0 auto !important;
  min-width: 22px !important;
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  line-height: 1.2 !important;
}
html.tmp-prog-narrow .tmp-session .tmp-session__state {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  font-family: var(--mono) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* GHL's own furniture inside the row: the state glyph, the stock thumbnail,
   and the headphones icon. The number and the state label say all three. */
html.tmp-prog-narrow .tmp-session [id^="posts-icon-"],
html.tmp-prog-narrow .tmp-session [id^="posts-image-"],
html.tmp-prog-narrow .tmp-session [id^="posts-container-content-icon-"] {
  display: none !important;
}

/* Flatten what is left of the wrapper so the name sits in the row. */
html.tmp-prog-narrow .tmp-session > div {
  flex: 1 1 auto !important;
  display: block !important;
  min-width: 0 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
html.tmp-prog-narrow .tmp-session > div > div,
html.tmp-prog-narrow .tmp-session > div > div > div {
  display: block !important;
  min-width: 0 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}
html.tmp-prog-narrow .tmp-session p[id^="posts-title-"] {
  display: block !important;
  font-family: Gabarito, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  color: #33302C !important;
  margin: 0 !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
}

/* The header now sits inside the body rather than above it, so it must not
   take the page gutter a second time. */
html.tmp-prog-narrow .tmp-prog-body .tmp-prog,
html.tmp-prog-narrow .tmp-prog-body .tmp-prog-more {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
}
html.tmp-prog-narrow .tmp-prog-body .tmp-prog-more { margin-top: 36px !important; }

/* ---------- :has-free mirrors for the programme page ----------

   Every page-level rule for this page, written again against
   html.tmp-prog-page, which programme() sets once it has built. Same
   declarations, no :has, so a browser without :has support still gets the
   page rather than half of it. See the comment in programme().

   These sit at the end of the file and carry !important, so they win on
   equal specificity wherever the original also matched. That is intended:
   the two always say the same thing. */

html.tmp-prog-page .cp-content-area { background: #f2f0eb !important; }

html.tmp-prog-page .cp-main-content-inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html.tmp-prog-page body.tmp-has-scene .cp-content-area,
html.tmp-prog-page body.tmp-has-scene .cp-main-content,
html.tmp-prog-page body.tmp-has-scene .cp-main-content-inner {
  background: transparent !important;
}

html.tmp-prog-page body.tmp-has-scene .tmp-scene__veil {
  background: linear-gradient(
    180deg,
    rgba(242, 240, 235, 0.93) 0%,
    rgba(242, 240, 235, 0.91) 26%,
    rgba(242, 240, 235, 0.8) 58%,
    rgba(242, 240, 235, 0.62) 100%
  );
}
html.tmp-prog-page body.tmp-has-scene .tmp-scene--v .tmp-scene__veil {
  background: linear-gradient(
    180deg,
    rgba(242, 240, 235, 0.76) 0%,
    rgba(242, 240, 235, 0.75) 26%,
    rgba(242, 240, 235, 0.66) 58%,
    rgba(242, 240, 235, 0.51) 100%
  ) !important;
}

/* ================================================================
   THE PROGRAMME PAGE ON A TEMPLATE WE HAVE NOT SEEN

   Set by programme() when neither known tree matched and the rows
   were found by their lesson ids instead. Nothing below names a GHL
   class or id, because on this path we do not know any.

   The approach is the opposite of the narrow block above. There we
   knew the markup and reached into it. Here we know nothing except
   that the row is ours to lay out, so the row's own contents are
   flattened wholesale and everything that is not text is dropped.
   ================================================================ */

html.tmp-prog-gen .tmp-prog-wrap {
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* GHL's own indent goes, ours stays. Zeroing both put the session numbers
     hard against the edge of the screen. */
  padding-left: var(--tmp-gutter) !important;
  padding-right: var(--tmp-gutter) !important;
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Anything between the column and the rows: GHL's card, its accordion
   wrapper, its scroll box. All of it becomes nothing. */
html.tmp-prog-gen .tmp-prog-body * {
  max-height: none !important;
  overflow: visible !important;
}
html.tmp-prog-gen .tmp-prog-body > *:not(.tmp-prog):not(.tmp-prog-more):not(.tmp-sessions) {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  /* "Becomes nothing" used to mean horizontally only. GHL's card and its
     accordion wrapper kept their vertical padding and their min-height
     utilities, and since their rows are moved off-screen rather than removed,
     what was left was an empty box still holding its full height. That is the
     dead space below the session list. Take the vertical room as well. */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

html.tmp-prog-gen .tmp-prog-body .tmp-prog,
html.tmp-prog-gen .tmp-prog-body .tmp-prog-more {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
}
html.tmp-prog-gen .tmp-prog-body .tmp-prog-more { margin-top: 36px !important; }

/* Rows. Flex, so the layout is right whether the row currently has our
   number and state in it or GHL has just re-rendered them away. */
html.tmp-prog-gen .tmp-session {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: #fff !important;
  border: 1px solid #d4d0c8 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  padding: 16px !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  box-shadow: none !important;
  transition: none !important;
}
html.tmp-prog-gen .tmp-session:last-child { border-bottom: 1px solid #d4d0c8 !important; }

/* Every picture in a row goes: the completion glyph, the stock thumbnail,
   the content-type icon. The number and the state label carry all of it,
   and not one of those three is worth 56 pixels of a phone screen. */
html.tmp-prog-gen .tmp-session img,
html.tmp-prog-gen .tmp-session svg,
html.tmp-prog-gen .tmp-session picture,
html.tmp-prog-gen .tmp-session video {
  display: none !important;
}

/* One type for everything left inside the row, set on the row and on every
   descendant, because which element holds the name is the thing we do not
   know. The number and the state override this below on higher specificity. */
html.tmp-prog-gen .tmp-session,
html.tmp-prog-gen .tmp-session * {
  font-family: Gabarito, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: #33302C !important;
  text-align: left !important;
}

/* Flatten the row's insides so the name sits on one line of the row rather
   than in a column of its own. Four levels covers every GHL row we have
   measured; the fifth would be a cell inside a cell inside a cell. */
html.tmp-prog-gen .tmp-session > *:not(.tmp-session__num):not(.tmp-session__state),
html.tmp-prog-gen .tmp-session > * > *,
html.tmp-prog-gen .tmp-session > * > * > *,
html.tmp-prog-gen .tmp-session > * > * > * > * {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  background: transparent !important;
  -webkit-line-clamp: unset !important;
}

html.tmp-prog-gen .tmp-session .tmp-session__num {
  flex: 0 0 auto !important;
  min-width: 22px !important;
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  line-height: 1.2 !important;
  color: #a8a296 !important;
}
html.tmp-prog-gen .tmp-session--done .tmp-session__num {
  color: var(--tmp-vertical-colour, #33302C) !important;
}
html.tmp-prog-gen .tmp-session .tmp-session__state {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  font-family: var(--mono) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  color: #a8a296 !important;
}
html.tmp-prog-gen .tmp-session--done .tmp-session__state {
  color: var(--tmp-vertical-colour, #33302C) !important;
}

/* GHL's module header is hidden on the generic path, so this replaces it. */
.tmp-prog__list-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight:600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6b6b62;
  margin-top: 34px;
}

/* ================================================================
   OUR OWN SESSION ROWS

   Built by ourSessions(), from GHL's rows rather than on top of
   them, the same way the player is built rather than restyled.
   These are our elements, so this block fights nothing and needs
   almost no !important.
   ================================================================ */

/* GHL's list, kept in the document so its click handlers still have a box to
   measure, and taken off the screen. display:none would break them. */
.tmp-offscreen {
  position: absolute !important;
  left: -10000px !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.tmp-sessions { margin-top: 14px; }

.tmp-sessions .tmp-srow {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid #d4d0c8;
  border-bottom: 0;
  padding: 16px 18px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.tmp-sessions .tmp-srow:last-child { border-bottom: 1px solid #d4d0c8; }
.tmp-sessions .tmp-srow:hover,
.tmp-sessions .tmp-srow:focus-visible {
  border-color: #33302C;
  position: relative;
  z-index: 1;
  outline: 0;
}
/* Rows share a line with the row below, so a hover that only changes the top
   border leaves the bottom one grey. Same fix as the library rows. */
.tmp-sessions .tmp-srow:not(:last-child):hover,
.tmp-sessions .tmp-srow:not(:last-child):focus-visible {
  border-bottom: 1px solid #33302C;
  margin-bottom: -1px;
}

.tmp-sessions .tmp-srow__num {
  flex: 0 0 auto;
  min-width: 22px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.2;
  color: #a8a296;
}
.tmp-sessions .tmp-srow--done .tmp-srow__num { color: var(--tmp-vertical-colour, #33302C); }

.tmp-sessions .tmp-srow__name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: Gabarito, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
  color: #33302C;
}

.tmp-sessions .tmp-srow__state {
  flex: 0 0 auto;
  margin-left: auto;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #a8a296;
}
.tmp-sessions .tmp-srow--done .tmp-srow__state { color: var(--tmp-vertical-colour, #33302C); }
.tmp-sessions .tmp-srow:hover .tmp-srow__state { color: #33302C; }

@media (max-width: 620px) {
  .tmp-sessions .tmp-srow { padding: 16px; gap: 12px; }
  .tmp-sessions .tmp-srow__num { font-size: 10.5px; min-width: 20px; }
}

/* The build stamp. Temporary. */
.tmp-stamp {
  position: fixed;
  left: 6px;
  bottom: 4px;
  z-index: 2147483500;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: #6b6b62;
  background: rgba(242, 240, 235, 0.82);
  padding: 3px 6px;
  border-radius: 2px;
  pointer-events: none;
  max-width: 94vw;
  overflow: hidden;
  white-space: nowrap;
}

/* The programme page, held back until it is ours. See progWait().

   Visibility rather than display: the page still lays out, so GHL's own
   measuring keeps working and our build does not land in a collapsed
   container. The topbar stays visible on purpose. Capped at three seconds in
   the script, so this can never strand a member on a blank page. */
html.tmp-prog-wait main.cp-main-content,
html.tmp-prog-wait .cp-main-content-inner {
  visibility: hidden !important;
}

/* Nothing of GHL's paints a panel inside our page.

   On the phone template the card that held the session list stayed white and
   full height after the list was moved off screen, leaving a blank slab under
   the last row. Rather than name that card, blank everything in here that is
   not ours. On this path GHL's content is hidden or off screen already, so
   there is nothing left that a background could be doing any good for. */
html.tmp-prog-gen .tmp-prog-body *:not([class*="tmp-"]) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* The dashboard hero opens from anywhere on it. See cards(). */
.tmp-hero--tap { cursor: pointer; }
.tmp-hero--tap:hover { border-color: var(--tmp-vertical-colour, #33302C); }

/* One left edge on the generic programme page.

   The gutter was on the column, which the header inherited and the session
   list did not, so the rows ran to both screen edges while the title above
   them sat inset. Take it off the column and give it to each block, which is
   the only arrangement where they cannot disagree. */
html.tmp-prog-gen .tmp-prog-wrap {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
html.tmp-prog-gen .tmp-prog-body .tmp-prog,
html.tmp-prog-gen .tmp-prog-body .tmp-sessions,
html.tmp-prog-gen .tmp-prog-body .tmp-prog-more {
  padding-left: var(--tmp-gutter) !important;
  padding-right: var(--tmp-gutter) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
}

/* ================================================================
   THE PLAYER, STATED
   ================================================================

   Everything in the player block above is written on a single class with no
   weight. GHL's course bundle loads after portal.css, so on any template where
   its own rules touch a button, a range input or a flex row, it wins the tie on
   source order and ours is silently discarded. The file already carries that
   warning twice. The phone lesson page is where it finally bit: the play
   control drew as a circle with a flat bottom, and the scrub bar and the times
   under it did not draw at all.

   So the player is stated here, last in the file, scoped to the lesson root and
   carrying weight. Nothing above it in the tree gets to clip it either: we do
   not know which ancestor was constraining the height, and stating that the
   host and its contents are unconstrained means the symptom cannot come back
   under another id on another template.
   ================================================================ */

html.tmp-lesson .tmp-audio-host,
html.tmp-lesson .tmp-audio-host *,
html.tmp-lesson .tmp-player,
html.tmp-lesson .tmp-player * {
  overflow: visible !important;
  max-height: none !important;
  min-height: 0 !important;
}

/* The box has to grow, not only stop clipping.

   Clearing min and max height was half the answer. Something GHL owns was
   setting an outright height on the phone, so the player's box stayed short
   while its contents spilled out of it. Before b32 the overflow was hidden and
   the result looked like a missing scrub bar. With the overflow visible the
   scrub bar and the times came back but drew straight through previous and
   next, because as far as layout was concerned the player ended before they
   started and the next block flowed up underneath.

   So the containers take their height from their contents. Our own sized
   controls are excluded by name: the circle, the skip and mute buttons and the
   scrub input each carry a height on purpose, and an auto height would collapse
   them. */
html.tmp-lesson .tmp-audio-host,
html.tmp-lesson .tmp-audio-host *:not(.tmp-player__btn):not(.tmp-player__scrub):not(svg):not(path),
html.tmp-lesson .tmp-player,
html.tmp-lesson .tmp-player *:not(.tmp-player__btn):not(.tmp-player__scrub):not(svg):not(path) {
  height: auto !important;
}

/* The player is a block in normal flow and takes the full column. Anything
   else and the row after it has somewhere to climb into. */
html.tmp-lesson .tmp-player {
  display: block !important;
  position: static !important;
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

html.tmp-lesson .tmp-player__controls {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 26px !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  height: auto !important;
}
html.tmp-lesson .tmp-player__gap { flex: 1 1 auto !important; }

/* Every control keeps its size. A flex item shrinks by default, and a circle
   that has been shrunk on one axis is the thing that reads as a bad crop. */
html.tmp-lesson .tmp-player__btn {
  flex: 0 0 auto !important;
  box-sizing: content-box !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none;
  line-height: 0 !important;
}
html.tmp-lesson .tmp-player__btn--play {
  width: 62px !important;
  height: 62px !important;
  border-radius: 50% !important;
  background: var(--tmp-vertical-colour, #33302C) !important;
  color: #fff !important;
  flex: 0 0 62px !important;
}
html.tmp-lesson .tmp-player__btn--play svg { width: 26px !important; height: 26px !important; }
html.tmp-lesson .tmp-player__btn--skip svg { width: 34px !important; height: 34px !important; }
html.tmp-lesson .tmp-player__btn--mute svg { width: 22px !important; height: 22px !important; }

html.tmp-lesson .tmp-player__scrub {
  display: block !important;
  width: 100% !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
html.tmp-lesson .tmp-player__times {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  margin: 6px 0 0 !important;
}

/* One rhythm on a phone. The measurements are the same ones the wide page
   uses, taken down a step each, so the page reads as the same page rather than
   as a different design that happens to be narrower. */
@media (max-width: 620px) {
  html.tmp-lesson .tmp-audio-host,
  html.tmp-lesson .tmp-post-body #post-audio {
    padding: 22px 0 20px !important;
  }
  html.tmp-lesson .tmp-player__controls { gap: 16px !important; margin-bottom: 20px !important; }
  html.tmp-lesson .tmp-player__btn--play {
    width: 56px !important;
    height: 56px !important;
    flex: 0 0 56px !important;
  }
  html.tmp-lesson .tmp-player__btn--play svg { width: 23px !important; height: 23px !important; }
  html.tmp-lesson .tmp-player__btn--skip svg { width: 30px !important; height: 30px !important; }
  html.tmp-lesson .tmp-player__btn--mute svg { width: 21px !important; height: 21px !important; }
  html.tmp-lesson .tmp-player__times { font-size: 12px !important; }

  /* The three gaps that make the column read as even: voices to player,
     player to previous and next, previous and next to the card. The voice
     grid sits inside the player's own host, so its bottom margin is the gap
     to the controls and cannot be zero. */
  html.tmp-lesson .tmp-post-body .tmp-voices { margin: 0 0 20px !important; }
  html.tmp-lesson .tmp-post-nav { margin-top: 20px !important; margin-bottom: 0 !important; }
  html.tmp-lesson .tmp-post-card { margin-top: 20px !important; }
}

/* When previous and next has been moved in beside the player, it is the last
   thing in the host and needs the same gap the rest of the column uses. */
html.tmp-lesson .tmp-audio-host > .tmp-post-nav {
  margin-top: 20px !important;
  margin-bottom: 0 !important;
}

/* The player's parts stay in normal flow.

   The details card was sliding up over the scrub bar and the times. That only
   happens if those two are not in the player's box, which is also why setting
   height:auto on the box changed nothing: the box was the right height for what
   was actually in it, and the rest was drawn out of flow.

   State it. The buttons keep position:relative, because the skip labels are
   positioned inside them. */
html.tmp-lesson .tmp-player > *,
html.tmp-lesson .tmp-player__controls,
html.tmp-lesson .tmp-player__scrub,
html.tmp-lesson .tmp-player__times {
  position: static !important;
  inset: auto !important;
  float: none !important;
  transform: none !important;
}
html.tmp-lesson .tmp-player__btn { position: relative !important; }

/* And the card below it stays below it. */
html.tmp-lesson .tmp-post-card,
html.tmp-lesson .tmp-post-body #post-body {
  position: static !important;
  float: none !important;
  clear: both !important;
}

/* Room under the last thing on a lesson.

   Mark as listened is the last control on the page and it sat hard against the
   bottom edge, so scrolling to the end of a session stopped with the button
   touching the browser chrome. */
html.tmp-lesson .tmp-post-body { padding-bottom: 96px !important; }
@media (max-width: 620px) {
  html.tmp-lesson .tmp-post-body { padding-bottom: 80px !important; }
}

/* Room above My programmes, halved.

   The gap was two paddings stacked: GHL's 48px on .cp-main-content-inner and
   our own 40px on .tmp-prog, which put the back link 88px below the topbar.
   Measured on the live page rather than guessed. One of them is enough. */
html.tmp-prog-page .cp-main-content-inner { padding-top: 24px !important; }
html.tmp-prog-page .tmp-prog { padding-top: 20px !important; }
@media (max-width: 620px) {
  html.tmp-prog-page .cp-main-content-inner { padding-top: 16px !important; }
  html.tmp-prog-page .tmp-prog { padding-top: 12px !important; }
}

/* ================================================================
   THE PROGRAMME PAGE TAIL, STATED

   Everything here used to be measured by JavaScript on every
   mutation. On a phone the session list renders progressively, so
   a pass could measure row two as the last row and pull the browse
   strip up into the middle of the list. Stated values cannot be
   wrong about what they are stating.
   ================================================================ */

/* Flattened: a GHL box left in our column with nothing in it for us. Kept in
   the document rather than display:none, because GHL's own parked session list
   sits inside one of these and its rows must keep their boxes for the click
   handlers ourSessions() forwards to. */
.tmp-flat {
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
  overflow: hidden !important;
}

/* The one gap above the strip, and the one below it. */
html.tmp-prog-page .tmp-prog-more {
  margin-top: 44px !important;
  margin-bottom: 56px !important;
}
@media (max-width: 620px) {
  html.tmp-prog-page .tmp-prog-more {
    margin-top: 32px !important;
    margin-bottom: 40px !important;
  }
}

/* And the page ends where its content ends. GHL frames this column with boxes
   that carry a screen height, which is what left a page and a half of cream
   below the strip. */
html.tmp-prog-page .cp-content-area,
html.tmp-prog-page .cp-main-content,
html.tmp-prog-page .cp-main-content-inner {
  min-height: 0 !important;
  height: auto !important;
  padding-bottom: 0 !important;
}


/* ---------- the Classic theme paints its own root white ----------
   A course on GHL's Classic theme wraps the page in .productRoot on the
   programme page and .lessonRoot on the session page. Both carry a white
   background, which sits over the garden and makes the page read as a
   card rather than as part of the scene. Default-theme courses have no
   such wrapper, so this only fires where it is needed. */
html.tmp-prog-page .productRoot,
html.tmp-lesson .lessonRoot {
  background: transparent !important;
}

/* =====================================================================
   The Mindfulness Place, October 2026 rebrand. Everything below this line
   is the brand layer: Gabarito, the soft palette, charcoal for the one
   thing you're about to step into, light tints for everything else,
   curved corners, and the brand book's chip for every button.
   --tmp-vertical-colour is set by portal.js on each card and page.
   ===================================================================== */
:root{--tmp-ink:#33302C;--tmp-cream:#F2F0EB;--tmp-mid:#6B6B62;--tmp-rule:#D4D0C8;--tmp-stone:#C9C4B8}
body,.hr-config-provider{font-family:Gabarito,"Helvetica Neue",Arial,sans-serif!important}
.tmp-scene__veil{background:rgba(242,240,235,.72)!important}

/* the bar: paper and a hairline, the name on one line, like the brand book */
.tmp-topbar-dark{background:rgba(242,240,235,.92)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--tmp-rule)!important}
.tmp-topbar-brand-word{font-family:Gabarito,sans-serif!important;font-weight:800!important;font-size:16px!important;letter-spacing:-.02em!important;text-transform:none!important;color:var(--tmp-ink)!important}
.tmp-topbar-brand-chip img{height:26px!important;width:auto!important}
.tmp-topbar-dark svg,.tmp-topbar-dark .text-on-sidebar,.tmp-topbar-dark span{color:var(--tmp-ink)!important}
html body header.tmp-topbar-dark .hr-breadcrumb-item__link{color:var(--tmp-ink)!important;-webkit-text-fill-color:var(--tmp-ink)}
.tmp-topbar-dark .hr-button{background:transparent!important;border-radius:99px!important}
.tmp-topbar-dark .hr-button:hover{background:rgba(51,48,44,.07)!important}

/* the greeting and the links beside it */
.tmp-greet{align-items:flex-end!important}
.tmp-greet *{font-family:Gabarito,sans-serif!important}
.tmp-greet .hr-header-lite-left *{font-weight:800!important;letter-spacing:-.035em!important;color:var(--tmp-ink)!important;line-height:1.02!important}
.tmp-dash-link,.tmp-lib__home,.tmp-prog__back,.tmp-post-back{display:inline-block!important;font-family:Gabarito,sans-serif!important;font-weight:600!important;font-size:11px!important;letter-spacing:.12em!important;text-transform:uppercase!important;color:var(--tmp-ink)!important;border:1px solid var(--tmp-rule)!important;border-radius:99px!important;padding:9px 16px!important;text-decoration:none!important;background:rgba(255,255,255,.6)!important;transition:background .25s,color .25s}
.tmp-lib__home *{font-family:Gabarito,sans-serif!important;font-weight:600!important;font-size:11px!important;letter-spacing:.12em!important;color:inherit!important;border-bottom:0!important}
.tmp-dash-link:hover,.tmp-lib__home:hover,.tmp-prog__back:hover,.tmp-post-back:hover{background:var(--tmp-ink)!important;color:var(--tmp-cream)!important;border-color:var(--tmp-ink)!important}
.tmp-label{display:flex;align-items:baseline;gap:14px;font-family:Gabarito,sans-serif;font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tmp-ink);margin:44px 0 18px!important}
.tmp-label b{font-weight:800;font-size:18px;letter-spacing:-.03em;color:#4C9487}

/* tabs are chips */
.tmp-tabs{border:0!important;gap:8px!important;display:flex!important}
.tmp-tab{font-family:Gabarito,sans-serif!important;font-weight:600!important;font-size:11px!important;letter-spacing:.12em!important;text-transform:uppercase!important;border:1px solid var(--tmp-rule)!important;border-radius:99px!important;padding:9px 16px!important;color:var(--tmp-ink)!important;background:rgba(255,255,255,.6)!important;box-shadow:none!important}
.tmp-tab::after{display:none!important}
html body .tmp-tab.tmp-tab--on{background:var(--tmp-ink)!important;border-color:var(--tmp-ink)!important;color:var(--tmp-cream)!important;-webkit-text-fill-color:var(--tmp-cream)}

/* cards: curved, no edge bars */
.tmp-hero,.tmp-course-panel{border:0!important;border-radius:18px!important;box-shadow:none!important;overflow:hidden}
.tmp-hero-tag,.tmp-course-panel__tag{display:flex!important;align-items:center;gap:8px;font-family:Gabarito,sans-serif!important;font-weight:600!important;font-size:11px!important;letter-spacing:.14em!important;text-transform:uppercase!important}
.tmp-hero-tag::before,.tmp-course-panel__tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tmp-vertical-colour);flex:none}
.tmp-hero-name,.tmp-course-panel__name{font-family:Gabarito,sans-serif!important;font-weight:800!important;letter-spacing:-.03em!important;line-height:1.05!important}
.tmp-hero-name{font-size:clamp(28px,2.6vw,40px)!important}
.tmp-hero-sess,.tmp-arc-lbl,.tmp-course-panel__meta{font-family:Gabarito,sans-serif!important;font-weight:600!important;letter-spacing:.1em!important}
.tmp-arc{gap:5px!important}
.tmp-mark{border-radius:99px!important;height:8px!important}
/* the next programme is the moment: charcoal */
.tmp-hero{background:var(--tmp-ink)!important}
.tmp-hero .tmp-hero-name,.tmp-hero .tmp-hero-tag,.tmp-hero .tmp-hero-sess b{color:var(--tmp-cream)!important}
.tmp-hero .tmp-hero-sess,.tmp-hero .tmp-arc-lbl{color:rgba(242,240,235,.6)!important}
.tmp-hero .tmp-mark:not(.now){background:rgba(242,240,235,.2)!important}
.tmp-hero .tmp-mark.now{background:var(--tmp-vertical-colour)!important}
/* the rest sit in their light tint, the picture in the full colour */
.tmp-course-panel{background:color-mix(in srgb,var(--tmp-vertical-colour) 32%,#fff)!important}
.tmp-course-panel .tmp-course-panel__name,.tmp-course-panel .tmp-course-panel__tag{color:var(--tmp-ink)!important}
.tmp-course-panel .tmp-course-panel__meta,.tmp-course-panel .tmp-arc-lbl{color:rgba(51,48,44,.72)!important}
.tmp-course-panel .tmp-mark{background:rgba(51,48,44,.14)!important}
.tmp-course-panel .tmp-mark.now{background:var(--tmp-ink)!important}
/* pictures: drawn in charcoal, washed in colour. portal.js wraps each one */
.tmp-thumbwrap{display:block;position:relative;background:color-mix(in srgb,var(--tmp-vertical-colour) 34%,#fff);border-radius:12px!important;overflow:hidden}
.tmp-thumbwrap>img{display:block;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;filter:grayscale(1) contrast(1.35) brightness(1.08);mix-blend-mode:multiply;border:0!important;margin:0!important}
.tmp-course-panel .tmp-thumbwrap{background:var(--tmp-vertical-colour)!important}
.tmp-course-panel .tmp-thumbwrap>img{filter:grayscale(1) contrast(1.6) brightness(1.15)!important}

/* the button: the brand book's chip, charcoal with a dot of colour */
.tmp-btn,.tmp-vertical-panel__cta{display:inline-flex!important;align-items:center;gap:10px;font-family:Gabarito,sans-serif!important;font-weight:600!important;font-size:12px!important;letter-spacing:.12em!important;text-transform:uppercase!important;background:var(--tmp-ink)!important;color:var(--tmp-cream)!important;border:0!important;border-radius:99px!important;padding:14px 22px 14px 18px!important;box-shadow:none!important;text-decoration:none!important;transition:background .25s,color .25s}
.tmp-btn::before,.tmp-vertical-panel__cta::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--tmp-vertical-colour);flex:none}
.tmp-btn::after,.tmp-vertical-panel__cta::after{content:"\2192";font-size:14px;letter-spacing:0;margin-left:2px}
.tmp-btn:hover,.tmp-vertical-panel__cta:hover{background:var(--tmp-vertical-colour)!important;color:var(--tmp-ink)!important}
.tmp-hero .tmp-btn{background:var(--tmp-cream)!important;color:var(--tmp-ink)!important}
.tmp-hero .tmp-btn:hover{background:var(--tmp-vertical-colour)!important}

/* explore: the four verticals as the brand book's list */
.tmp-vertical-grid{display:block!important;border-top:1px solid var(--tmp-ink)}
.tmp-vertical-panel{display:grid!important;grid-template-columns:44px 1fr auto auto;align-items:center;column-gap:20px;background:transparent!important;border:0!important;border-bottom:1px solid var(--tmp-rule)!important;border-radius:0!important;padding:22px 0!important;min-height:0!important;box-shadow:none!important}
.tmp-vertical-panel .tmp-vertical-mark{width:44px!important;height:auto!important;margin:0!important;grid-row:1/3}
.tmp-vertical-panel__name{grid-column:2;font-family:Gabarito,sans-serif!important;font-weight:800!important;font-size:clamp(24px,2.4vw,34px)!important;letter-spacing:-.03em!important;line-height:1.05!important;color:var(--tmp-ink)!important;margin:0!important}
.tmp-vertical-panel__name br{display:none}
.tmp-vertical-panel__status{grid-column:2;grid-row:2;margin:4px 0 0!important;font-family:Gabarito,sans-serif!important;font-weight:600!important;font-size:11px!important;letter-spacing:.12em!important;text-transform:uppercase;color:var(--tmp-mid)!important}
.tmp-vertical-panel__count{grid-column:3;grid-row:1/3;margin:0!important;text-align:right;font-family:Gabarito,sans-serif!important}
.tmp-vertical-panel__count b{display:block;font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--tmp-vertical-colour)}
.tmp-vertical-panel__count i{display:block;font-style:normal;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tmp-mid);margin-top:4px}
.tmp-vertical-panel__cta{grid-column:4;grid-row:1/3;margin:0!important;padding:13px 20px 13px 16px!important}

/* programmes library */
.tmp-lib__title{font-family:Gabarito,sans-serif!important;font-weight:800!important;letter-spacing:-.035em!important;color:var(--tmp-ink)!important}
.tmp-lib__band-head{border-bottom:1px solid var(--tmp-ink)!important;padding-bottom:16px!important;align-items:center!important}
.tmp-lib__mark{height:34px!important;width:auto!important}
.tmp-lib__band-name{font-family:Gabarito,sans-serif!important;font-weight:800!important;font-size:22px!important;letter-spacing:-.02em!important;text-transform:none!important;color:var(--tmp-ink)!important}
.tmp-lib__band-count{font-family:Gabarito,sans-serif!important;font-weight:600!important;font-size:11px!important;letter-spacing:.12em!important;color:var(--tmp-ink)!important;background:color-mix(in srgb,var(--tmp-vertical-colour) 32%,#fff);border-radius:99px;padding:7px 12px}
.tmp-lib__rows{display:grid!important;gap:10px!important;border:0!important;background:transparent!important;margin-top:16px!important}
.tmp-lib__row{background:color-mix(in srgb,var(--tmp-vertical-colour) 32%,#fff)!important;border:0!important;border-radius:18px!important;padding:22px 26px!important;transition:background .25s}
.tmp-lib__row:hover{background:var(--tmp-vertical-colour)!important}
.tmp-lib__row-name{font-family:Gabarito,sans-serif!important;font-weight:800!important;letter-spacing:-.03em!important;color:var(--tmp-ink)!important}
.tmp-lib__row-desc{font-family:Gabarito,sans-serif!important;color:rgba(51,48,44,.75)!important}
.tmp-lib__row-state{font-family:Gabarito,sans-serif!important;font-weight:600!important;letter-spacing:.12em!important;color:var(--tmp-ink)!important;background:rgba(255,255,255,.55);border-radius:99px;padding:7px 12px;white-space:nowrap}
.tmp-shelf{border:0!important;background:transparent!important;margin-top:10px!important}
.tmp-shelf__toggle{border:1px dashed rgba(51,48,44,.28)!important;border-radius:18px!important;background:rgba(255,255,255,.45)!important;padding:16px 26px!important}
.tmp-shelf__label{font-family:Gabarito,sans-serif!important;font-weight:600!important;color:var(--tmp-ink)!important}
.tmp-shelf__panel{display:flex;flex-wrap:wrap;gap:8px;padding:14px 0 0!important;border:0!important;background:transparent!important}
.tmp-shelf__item{display:inline-flex!important;align-items:center;gap:10px;border:1px solid var(--tmp-rule)!important;border-radius:99px!important;padding:9px 14px!important;background:rgba(255,255,255,.6)!important;width:auto!important}
.tmp-shelf__item-name{font-family:Gabarito,sans-serif!important;font-weight:600!important;font-size:14px!important;color:var(--tmp-ink)!important;letter-spacing:0!important}
.tmp-shelf__item-cta{font-family:Gabarito,sans-serif!important;font-weight:600!important;font-size:10px!important;letter-spacing:.12em!important;color:rgba(51,48,44,.6)!important}
.tmp-shelf__item--owned{background:color-mix(in srgb,var(--tmp-vertical-colour) 32%,#fff)!important;border-color:transparent!important}
.tmp-shelf__item--buy:hover{background:var(--tmp-ink)!important;border-color:var(--tmp-ink)!important}
.tmp-shelf__item--buy:hover *{color:var(--tmp-cream)!important}

/* a programme: the garden behind, the head on charcoal, the sessions in tint */
.tmp-scene--v video{opacity:0!important}
.tmp-scene--v{background:url(https://member-portal-8es.pages.dev/garden-ground.webp) center/cover no-repeat!important}
.tmp-prog__head{position:relative!important;background:var(--tmp-ink)!important;border:0!important;border-radius:18px!important;padding:34px 38px!important;margin-top:18px!important}
.tmp-prog__tag{font-family:Gabarito,sans-serif!important;font-weight:600!important;font-size:11px!important;letter-spacing:.14em!important;color:var(--tmp-cream)!important}
.tmp-prog__tag .tmp-dot{background:var(--tmp-vertical-colour)!important}
.tmp-prog__title{font-family:Gabarito,sans-serif!important;font-weight:800!important;letter-spacing:-.035em!important;color:var(--tmp-cream)!important}
.tmp-prog__desc,.tmp-prog__desc *{font-family:Gabarito,sans-serif!important;color:rgba(242,240,235,.72)!important}
.tmp-prog__desc-lead{color:var(--tmp-cream)!important}
.tmp-prog__mark{top:30px!important;right:34px!important;height:96px!important;width:auto!important}
.tmp-prog__progress{margin-top:22px!important}
.tmp-prog__progress .tmp-mark{background:rgba(51,48,44,.14)!important}
.tmp-prog__progress .tmp-mark.now,.tmp-prog__progress .tmp-mark.done{background:var(--tmp-vertical-colour)!important}
.tmp-prog__count,.tmp-prog__note{font-family:Gabarito,sans-serif!important;color:var(--tmp-ink)!important}
.tmp-prog__count{font-weight:600!important;letter-spacing:.12em!important}
.tmp-prog-body .lesson-card{background:transparent!important;border:0!important;box-shadow:none!important}
.tmp-session{background:color-mix(in srgb,var(--tmp-vertical-colour) 32%,#fff)!important;border:0!important;border-radius:14px!important;margin:0 0 8px!important;padding:16px 22px!important;transition:background .25s}
.tmp-session:hover{background:var(--tmp-vertical-colour)!important}
html body .tmp-session .tmp-session__num{font-family:Gabarito,sans-serif!important;font-weight:800!important;font-size:20px!important;letter-spacing:-.03em!important;color:var(--tmp-ink)!important;min-width:40px}
.tmp-session .lesson-title{font-family:Gabarito,sans-serif!important;font-weight:700!important;font-size:17px!important;color:var(--tmp-ink)!important;letter-spacing:-.01em!important}
html body .tmp-session .tmp-session__state{display:inline-flex!important;align-items:center;gap:8px;font-family:Gabarito,sans-serif!important;font-weight:600!important;font-size:11px!important;letter-spacing:.12em!important;background:var(--tmp-ink)!important;color:var(--tmp-cream)!important;border-radius:99px!important;padding:9px 14px 9px 12px!important}
.tmp-session__state::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tmp-vertical-colour)}
.tmp-prog-more{border:1px dashed rgba(51,48,44,.28)!important;border-radius:18px!important;background:rgba(255,255,255,.45)!important}
.tmp-prog-more *{font-family:Gabarito,sans-serif!important;color:var(--tmp-ink)!important}

/* a session: the player is the moment, on charcoal */
.tmp-post-back{margin-bottom:14px!important}
.tmp-post-prog{display:flex!important;align-items:center;gap:8px;border:0!important;padding:0!important;font-family:Gabarito,sans-serif!important;font-weight:600!important;font-size:11px!important;letter-spacing:.14em!important;color:var(--tmp-ink)!important;margin-bottom:12px!important}
.tmp-post-prog::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tmp-vertical-colour)}
div:has(> .tmp-post-head){background:var(--tmp-ink)!important;border-radius:18px!important;padding:30px 34px 26px!important}
.tmp-post-head{border:0!important;border-bottom:1px solid rgba(242,240,235,.18)!important;padding:0 0 18px!important;margin:0 0 18px!important}
.tmp-post-num{font-family:Gabarito,sans-serif!important;font-weight:600!important;letter-spacing:.14em!important;color:rgba(242,240,235,.6)!important}
.tmp-post-title{font-family:Gabarito,sans-serif!important;font-weight:800!important;font-size:clamp(30px,3vw,44px)!important;letter-spacing:-.035em!important;color:var(--tmp-cream)!important;line-height:1.05!important}
.tmp-player__btn{color:var(--tmp-cream)!important}
.tmp-player__btn--play{background:var(--tmp-vertical-colour)!important;color:var(--tmp-ink)!important;box-shadow:none!important}
.tmp-player__times,.tmp-player__now,.tmp-player__end{font-family:Gabarito,sans-serif!important;font-weight:600!important;color:rgba(242,240,235,.6)!important}
html body.tmp-has-scene .tmp-post-body #post-body,html body [class*="lesson-body-back"]{background:color-mix(in srgb,var(--tmp-vertical-colour) 32%,#fff)!important;border:0!important;border-radius:18px!important;box-shadow:none!important}
html body .tmp-tabs--sub .tmp-tab{background:rgba(255,255,255,.55)!important;border-color:transparent!important}
.tmp-tabpanel,.tmp-tabpanel *{font-family:Gabarito,sans-serif!important}
.tmp-notes__input{border:1px solid rgba(51,48,44,.18)!important;border-radius:14px!important;background:rgba(255,255,255,.7)!important}
.tmp-post-nav{background:transparent!important;border:0!important;box-shadow:none!important}
.tmp-post-nav__link{background:color-mix(in srgb,var(--tmp-vertical-colour) 32%,#fff)!important;border:0!important;border-radius:18px!important;padding:18px 24px!important;text-decoration:none!important;transition:background .25s}
.tmp-post-nav__link:hover{background:var(--tmp-vertical-colour)!important}
.tmp-post-nav__dir{font-family:Gabarito,sans-serif!important;font-weight:600!important;letter-spacing:.14em!important;color:rgba(51,48,44,.6)!important}
.tmp-post-nav__name{font-family:Gabarito,sans-serif!important;font-weight:800!important;font-size:18px!important;letter-spacing:-.02em!important;color:var(--tmp-ink)!important}
.tmp-foot,.tmp-foot *{font-family:Gabarito,sans-serif!important}

/* the mark: bigger on the charcoal card, and in place of the dot on the small ones */
.tmp-hero .tmp-hero-mark{height:clamp(96px,9vw,132px)!important;width:auto!important;max-width:none!important}
.tmp-course-panel .tmp-course-panel__tag::before{width:22px!important;height:22px!important;border-radius:0!important;background:center/contain no-repeat var(--tmp-mark,none)!important}
[style*="#4C9487"]{--tmp-mark:url(https://themindfulnessplace.com/assets/mark-sport.webp?v=20261029)}
[style*="#688ABB"]{--tmp-mark:url(https://themindfulnessplace.com/assets/mark-education.webp?v=20261029)}
[style*="#9180B4"]{--tmp-mark:url(https://themindfulnessplace.com/assets/mark-professionals.webp?v=20261029)}
[style*="#BE765F"]{--tmp-mark:url(https://themindfulnessplace.com/assets/mark-life.webp?v=20261029)}

/* ---------- dashboard tiles, 30 October ----------
   Scott: the tiles said Mindfulness three times. The hero already carries the
   big vertical mark, so its eyebrow goes. On the cards the eyebrow becomes the
   vertical's mark (see option 7 below). The hero's artwork keeps a cream wash so
   it reads pastel, like the rest of the brand. */
.tmp-hero .tmp-hero-tag{display:none!important}
a.tmp-course-panel{position:relative}
/* Option 7, chosen by Scott 30 October: the cards drop the artwork. The
   vertical shows as a large faded mark running off the bottom right corner,
   its light half turned white so it holds on the card's own tint. Any
   programme can go live without artwork. The mask is one mark file for every
   vertical; the colour comes from --tmp-vertical-colour. */
a.tmp-course-panel{padding:20px!important;gap:14px!important;overflow:hidden!important;isolation:isolate}
a.tmp-course-panel .tmp-course-panel__thumb,a.tmp-course-panel .tmp-course-panel__tag,a.tmp-course-panel .tmp-arc-lbl{display:none!important}
a.tmp-course-panel .tmp-course-panel__name{min-height:2.2em;line-height:1.1!important;margin:0!important;padding-right:0!important}
a.tmp-course-panel .tmp-course-panel__meta{padding-right:0!important;margin-top:0!important}
a.tmp-course-panel .tmp-arc-wrap{margin:0!important}
a.tmp-course-panel::after{content:"";position:absolute;right:-22px;bottom:-34px;height:150px;aspect-ratio:1;background:linear-gradient(90deg,var(--tmp-vertical-colour) 50%,#fff 50%);-webkit-mask:url(https://themindfulnessplace.com/assets/mark-sport.webp?v=20261029) center/contain no-repeat;mask:url(https://themindfulnessplace.com/assets/mark-sport.webp?v=20261029) center/contain no-repeat;opacity:.22;pointer-events:none;z-index:-1}
.tmp-thumbwrap{position:relative;overflow:hidden}
.tmp-thumbwrap::after{content:"";position:absolute;inset:0;background:#F2F0EB;opacity:.34;pointer-events:none;border-radius:inherit}

/* ---------- browse panel, option 7, 30 October ----------
   Scott: artwork only on the programme you last listened to (the hero). Every
   other tile, including this panel, is the option 7 card: tint ground, name,
   price, session count and a large faded mark off the corner. Coming soon
   tiles sit on cream with the mark fainter. */
.tmp-browse__item{position:relative;overflow:hidden!important;isolation:isolate;border:0!important;border-radius:18px!important;background:color-mix(in srgb,var(--tmp-vertical-colour) 25%,#F2F0EB)!important;min-height:112px;display:flex!important;flex-direction:column;justify-content:flex-start}
.tmp-browse__item .tmp-browse__art{display:none!important}
.tmp-browse__item .tmp-browse__body{padding:20px!important;background:transparent!important;border:0!important;display:flex;flex-direction:column;gap:6px}
.tmp-browse__item .tmp-browse__meta{display:block!important}
.tmp-browse__item::after{content:"";position:absolute;right:-18px;bottom:-28px;height:118px;aspect-ratio:1;background:linear-gradient(90deg,var(--tmp-vertical-colour) 50%,#fff 50%);-webkit-mask:url(https://themindfulnessplace.com/assets/mark-sport.webp?v=20261029) center/contain no-repeat;mask:url(https://themindfulnessplace.com/assets/mark-sport.webp?v=20261029) center/contain no-repeat;opacity:.22;pointer-events:none;z-index:-1}
.tmp-browse__item .tmp-browse__name{font-weight:800!important;font-size:19px!important;letter-spacing:-.03em!important;line-height:1.1!important;overflow:visible!important;-webkit-line-clamp:unset!important;line-clamp:none!important;display:block!important;max-height:none!important;text-overflow:clip!important}
.tmp-browse__item .tmp-browse__row{align-items:flex-start!important;gap:12px}
.tmp-browse__item .tmp-browse__cta{flex:none;margin-top:3px}
.tmp-browse__item--soon{background:color-mix(in srgb,var(--tmp-vertical-colour) 8%,#F2F0EB)!important;box-shadow:inset 0 0 0 1px rgba(51,48,44,.08)}
.tmp-browse__item--soon::after{opacity:.12}
.tmp-browse__item--soon .tmp-browse__name{color:rgba(51,48,44,.6)!important}