/* Marathon Courses — site theme. Built by kajabi/build.mjs from
 * kajabi/shared/assets/base.css and kajabi/site/styles/. Edit those. */

/* ─────────────────────────────────────────────────────────────
   Marathon Courses on Kajabi — what both themes share.

   The launch page's kit (src/app/landing/(launch)/launch/launch.css)
   carried over: paper and ink, Aspekta for the sans, Hardcover for
   the serif, the race red for the one thing on a screen to press.
   Square corners, no shadows, hairlines instead of boxes, big
   regular-weight type with tight tracking, and one ease-out curve
   for every hover.

   The build puts this file first in each theme's assets/theme.css,
   ahead of that theme's own rules. Every class is `mc-`, so nothing
   here collides with Kajabi's core.css.

   The colours are Theme Settings (snippets/css-variables.liquid);
   the values below are the defaults, for a page rendered without
   them.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── Palette ── the storefront's paper and ink. */
  --mc-paper: #f4f1ea;
  --mc-panel: #ebe6dc;
  --mc-band: #e4ded1;
  --mc-stone: #d7d0c1;
  --mc-ink: #16201a;
  --mc-flame: #fe431a;
  --mc-ink-soft: rgba(22, 32, 26, 0.68);
  --mc-ink-faint: rgba(22, 32, 26, 0.46);
  --mc-line: rgba(22, 32, 26, 0.16);
  --mc-line-strong: rgba(22, 32, 26, 0.32);
  /* On the dark ground. */
  --mc-light: #f4f1ea;
  --mc-light-soft: rgba(244, 241, 234, 0.72);
  --mc-light-line: rgba(244, 241, 234, 0.2);
  --mc-deep: #111913;
  --mc-moss: #20301c;
  --mc-glow: #2c4232;

  /* ── Faces ── Aspekta ships in the theme (snippets/fonts.liquid);
     Hardcover comes from the site's Adobe Fonts kit, and every
     fallback after it is a serif, so a slow kit changes the texture
     and never the layout. */
  --mc-sans:
    "Aspekta", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --mc-serif:
    "hardcover-vf", "hardcover", "Iowan Old Style", Georgia, Cambria,
    "Times New Roman", serif;

  /* ── Rhythm ── the kit's 16px margins, its long pauses. */
  --mc-margin: 16px;
  --mc-gutter: 16px;
  --mc-section: clamp(64px, 9vw, 144px);
  --mc-header-h: 56px;

  /* ── Motion ── the site's, verbatim. */
  --mc-ease: cubic-bezier(0.19, 1, 0.22, 1);
  --mc-dur-link: 600ms;
  --mc-dur-button: 800ms;
}

/* The soft inks follow whatever ink the settings chose. */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  :root {
    --mc-ink-soft: color-mix(in srgb, var(--mc-ink) 68%, transparent);
    --mc-ink-faint: color-mix(in srgb, var(--mc-ink) 46%, transparent);
    --mc-line: color-mix(in srgb, var(--mc-ink) 16%, transparent);
    --mc-line-strong: color-mix(in srgb, var(--mc-ink) 32%, transparent);
    --mc-light-soft: color-mix(in srgb, var(--mc-light) 72%, transparent);
    --mc-light-line: color-mix(in srgb, var(--mc-light) 20%, transparent);
  }
}

@media (min-width: 1024px) {
  :root {
    --mc-margin: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --mc-dur-link: 0ms;
    --mc-dur-button: 0ms;
  }
}

/* ── Ground ─────────────────────────────────────────────────── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.mc {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--mc-paper);
  color: var(--mc-ink);
  font-family: var(--mc-sans);
  font-size: 16px;
  line-height: 1.5;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

.mc *,
.mc *::before,
.mc *::after {
  box-sizing: border-box;
}

.mc ::selection {
  background: var(--mc-ink);
  color: var(--mc-paper);
}

.mc :focus-visible {
  outline: 2px solid var(--mc-flame);
  outline-offset: 3px;
}

.mc-main {
  flex: 1 0 auto;
}

/* Resets carry no specificity (:where), so any class beats them. */
:where(.mc) :where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-family: inherit;
  font-weight: 400;
  letter-spacing: inherit;
}

:where(.mc) :where(p, figure, blockquote) {
  margin: 0;
}

:where(.mc) :where(img, video, svg) {
  display: block;
  max-width: 100%;
}

/* The arrow beside a link that leaves the page (arrow_out.liquid, the
   scripts' arrowOut()): in the line, after its last word, not a block of its
   own as the line above makes every svg. In a button the button's own gap
   sets it off, so the space before it gives way. */
.mc-arrow-out {
  display: inline-block;
  flex: none;
}

.mc-btn > .mc-arrow-out {
  margin-left: -0.3em;
}

:where(.mc) :where(img) {
  height: auto;
}

:where(.mc) strong {
  font-weight: 600;
}

/* ── Links: dim to .6 over the long curve ───────────────────── */
:where(.mc) a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--mc-dur-link) var(--mc-ease);
}

:where(.mc) a:hover {
  opacity: 0.6;
}

/* Underline wipe: a gradient's width, not a border. */
.mc-u {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition:
    background-size var(--mc-dur-link) var(--mc-ease),
    opacity var(--mc-dur-link) var(--mc-ease);
}

.mc a.mc-u:hover {
  background-size: 100% 1px;
  opacity: 1;
}

/* Underlined at rest, for links in running text. */
.mc-u--on {
  background-size: 100% 1px;
}

.mc a.mc-u--on:hover {
  background-size: 0 1px;
}

.mc-arrow {
  font-family: var(--mc-serif);
}

/* ── Type ── the kit's named styles, fluid between a phone and a
   1440 frame. All regular weight, as in the kit. */
.mc-display {
  font-size: clamp(52px, 7vw, 100px);
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.mc-t1 {
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.mc-t2 {
  font-size: clamp(32px, 3.5vw, 50px);
  line-height: 1;
  letter-spacing: -0.03em;
}

.mc-t3 {
  font-size: clamp(25px, 2.25vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.mc-h2 {
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.mc-lead {
  font-size: clamp(18px, 1.4vw, 20px);
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.mc-small {
  font-size: 14px;
  line-height: 1.4;
}

/* Caption: 12px uppercase, the kit's labels. */
.mc-cap {
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mc-serif {
  font-family: var(--mc-serif);
  letter-spacing: 0;
}

/* The serif at 28, for what is said quietly. */
.mc-sub {
  font-family: var(--mc-serif);
  font-size: clamp(22px, 1.95vw, 28px);
  line-height: 1.32;
  letter-spacing: 0;
}

.mc-soft {
  color: var(--mc-ink-soft);
}

.mc-balance {
  text-wrap: balance;
}

.mc-measure {
  max-width: 36em;
}

.mc-flow > * + * {
  margin-top: 1em;
}

/* ── Layout ─────────────────────────────────────────────────── */
.mc-wrap {
  padding-inline: var(--mc-margin);
}

.mc-section {
  padding-block: var(--mc-section);
}

.mc-section--tight {
  padding-block: clamp(40px, 6vw, 80px);
}

.mc-rule {
  border-top: 1px solid var(--mc-line);
}

.mc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px var(--mc-gutter);
}

@media (min-width: 1024px) {
  .mc-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .mc-l {
    grid-column: 1 / 7;
  }

  .mc-r {
    grid-column: 7 / 13;
  }

  .mc-l4 {
    grid-column: 1 / 5;
  }

  .mc-r8 {
    grid-column: 5 / 13;
  }

  .mc-full {
    grid-column: 1 / -1;
  }
}

/* Grounds. The dark one turns the tokens over, so everything in it
   (buttons, fields, rules) turns with it. */
.mc-ground--panel {
  background: var(--mc-panel);
}

.mc-ground--band {
  background: var(--mc-band);
}

.mc-ground--dark {
  --mc-ink: var(--mc-light);
  --mc-paper: var(--mc-deep);
  --mc-panel: #22332a;
  --mc-ink-soft: var(--mc-light-soft);
  --mc-ink-faint: rgba(244, 241, 234, 0.5);
  --mc-line: var(--mc-light-line);
  --mc-line-strong: rgba(244, 241, 234, 0.38);
  color-scheme: dark;
  color: var(--mc-light);
  background:
    radial-gradient(110% 90% at 88% 0%, var(--mc-glow) 0%, transparent 55%),
    linear-gradient(168deg, var(--mc-moss) 0%, #16201a 55%, var(--mc-deep) 100%);
}

.mc-ground--dark ::selection {
  background: var(--mc-light);
  color: #16201a;
}

/* ── Buttons ── square. Ink is the default; the race red is for the
   one thing on a screen to press, and takes ink lettering (white on
   #fe431a is 3.5:1 and fails AA). */
.mc-btn,
.mc input.mc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 0;
  background: var(--mc-ink);
  color: var(--mc-paper);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  word-spacing: 0.06em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: opacity var(--mc-dur-button) var(--mc-ease);
}

.mc a.mc-btn:hover,
.mc button.mc-btn:hover,
.mc input.mc-btn:hover {
  opacity: 0.9;
}

/* Each modifier names the <input> form too: a submit button is an
   <input>, and `.mc input.mc-btn` above would otherwise win. */
.mc .mc-btn--flame,
.mc input.mc-btn--flame {
  background: var(--mc-flame);
  color: #16201a;
}

.mc .mc-btn--light,
.mc input.mc-btn--light {
  background: var(--mc-light);
  color: #16201a;
}

.mc .mc-btn--ghost,
.mc input.mc-btn--ghost {
  background: transparent;
  color: inherit;
  border-color: currentColor;
}

.mc .mc-btn--wide,
.mc input.mc-btn--wide {
  width: 100%;
}

.mc .mc-btn--sm,
.mc input.mc-btn--sm {
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
}

.mc-btn[disabled],
.mc-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.mc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* ── Fields ── the kit's inputs: a line, not a box. */
.mc-field {
  display: grid;
  gap: 6px;
}

.mc-label {
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mc-ink-soft);
}

.mc-input,
.mc-form :is(input[type="text"], input[type="email"], input[type="password"],
  input[type="tel"], input[type="number"], input[type="url"], input[type="search"],
  input:not([type]), select, textarea) {
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--mc-line-strong);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  font-size: 20px;
  letter-spacing: -0.01em;
  -webkit-appearance: none;
  appearance: none;
}

.mc-form textarea,
textarea.mc-input {
  min-height: 120px;
  padding: 12px 0;
  font-size: 17px;
  line-height: 1.5;
  resize: vertical;
}

.mc-input::placeholder,
.mc-form :is(input, textarea)::placeholder {
  color: var(--mc-ink-faint);
}

.mc-input:focus,
.mc-form :is(input, select, textarea):focus {
  outline: none;
  border-bottom-color: var(--mc-ink);
}

/* Focused, the line turns race red and doubles: a box drawn round a
   field that has no box would be the only box on the page. */
.mc-input:focus-visible,
.mc-form :is(input, select, textarea):focus-visible {
  outline: none;
  border-bottom: 2px solid var(--mc-flame);
  padding-bottom: 7px;
}

.mc-form textarea:focus-visible,
textarea.mc-input:focus-visible {
  padding-bottom: 11px;
}

/* A square check, drawn: the race red when it's on. */
.mc-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  cursor: pointer;
}

.mc-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid var(--mc-line-strong);
  border-radius: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  place-content: center;
  cursor: pointer;
}

.mc-check input[type="checkbox"]::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--mc-flame);
  transform: scale(0);
  transition: transform 200ms var(--mc-ease);
}

.mc-check input[type="checkbox"]:checked::before {
  transform: scale(1);
}

.mc-check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--mc-flame);
  outline-offset: 2px;
}

/* Kajabi's own form markup (forms dropped into a page). */
.mc-form label {
  display: block;
  margin-top: 18px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mc-ink-soft);
}

.mc-form .form-group,
.mc-form .form-field {
  margin: 0 0 8px;
}

.mc-form :is(button[type="submit"], input[type="submit"]) {
  margin-top: 24px;
}

/* Messages: Kajabi's notices and form errors, and our own. */
.mc-note {
  padding: 12px 14px;
  border-left: 2px solid var(--mc-ink);
  background: var(--mc-panel);
  font-size: 14px;
  line-height: 1.45;
}

.mc-note--error,
.mc-error {
  border-left-color: var(--mc-flame);
}

.mc-error {
  margin-top: 6px;
  padding: 0;
  background: none;
  border: 0;
  color: #b3290c;
  font-size: 13px;
}

.mc-ground--dark .mc-error {
  color: #ff8a6e;
}

.parsley-errors-list {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  color: #b3290c;
  font-size: 13px;
}

/* ── Header ── an ink bar, like the site's header on a phone. */
.mc-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--mc-ink);
  color: var(--mc-light);
}

/* Kajabi puts the header section in a div of its own (#section-header), and
   a sticky element only holds inside its parent: that div sticks instead, so
   the bar (the mark, back to the library) stays at the top as the page
   scrolls. Without it the bar scrolled away and left its height empty over
   whatever holds under it: the course's outline, the sign-in's picture, an
   offer's face. */
#section-header {
  position: sticky;
  top: 0;
  z-index: 40;
}

.mc-header__bar {
  height: var(--mc-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-inline: var(--mc-margin);
}

.mc-header__home {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

/* The mark, as the site's header draws it: 46 wide, 26 tall. */
.mc-mark {
  width: 46px;
  height: auto;
  flex: none;
}

.mc-header__logo {
  display: block;
  max-height: 32px;
  width: auto;
}

.mc-header__title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-left: 14px;
  border-left: 1px solid var(--mc-light-line);
  font-size: 14px;
  line-height: 1;
}

.mc-nav {
  display: none;
  align-items: center;
  gap: 20px;
  font-size: 14px;
  line-height: 1;
}

.mc-nav a {
  white-space: nowrap;
}

.mc-nav a[aria-current="page"] {
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 3px;
}

/* The member's links: Kajabi writes these <a>s itself. */
.mc-usermenu {
  display: flex;
  align-items: center;
  gap: 18px;
}

.mc-usermenu a {
  white-space: nowrap;
}

.mc-usermenu__cta {
  padding: 9px 12px;
  border: 1px solid currentColor;
}

.mc-avatar {
  width: 28px;
  height: 28px;
  object-fit: cover;
  background: var(--mc-light-line);
}

@media (min-width: 900px) {
  .mc-nav {
    display: flex;
  }

  .mc-nav > * + .mc-usermenu {
    padding-left: 20px;
    border-left: 1px solid var(--mc-light-line);
  }
}

/* The menu on a phone: <details>, so it opens without script. The
   sheet is ink over the page, the links big, as on the site. */
.mc-menu {
  display: block;
}

.mc-menu > summary {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: 14px;
  cursor: pointer;
  list-style: none;
}

.mc-menu > summary::-webkit-details-marker {
  display: none;
}

.mc-menu__close {
  display: none;
}

.mc-menu[open] > summary {
  position: fixed;
  top: 0;
  right: var(--mc-margin);
  z-index: 62;
  height: var(--mc-header-h);
}

.mc-menu[open] .mc-menu__open {
  display: none;
}

.mc-menu[open] .mc-menu__close {
  display: inline;
}

.mc-menu__sheet {
  position: fixed;
  inset: 0;
  z-index: 61;
  display: flex;
  flex-direction: column;
  padding: calc(var(--mc-header-h) + 24px) var(--mc-margin) calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto;
  background: var(--mc-ink);
  color: var(--mc-light);
}

.mc-menu__links {
  display: grid;
  gap: 4px;
}

.mc-menu__links a {
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.mc-menu__foot {
  margin-top: auto;
  padding-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  font-size: 14px;
}

.mc-menu__foot .mc-usermenu {
  flex-wrap: wrap;
}

@media (min-width: 900px) {
  .mc-menu {
    display: none;
  }
}

/* ── Footer ─────────────────────────────────────────────────── */
.mc-footer {
  padding: 56px var(--mc-margin) calc(24px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--mc-line);
  background: var(--mc-panel);
  color: var(--mc-ink);
}

.mc-footer__slogan {
  font-family: var(--mc-serif);
  font-size: clamp(56px, 9vw, 140px);
  line-height: 0.9;
  letter-spacing: -0.03em;
}

.mc-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  /* On one baseline: a button with an icon (Do not sell or share) would
     otherwise sit lower than the links beside it. */
  align-items: baseline;
  align-content: flex-start;
}

.mc-footer__base {
  margin-top: clamp(48px, 8vw, 120px);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  color: var(--mc-ink-soft);
}

/* The slim footer, for pages that shouldn't end on a slogan. */
.mc-footer--slim {
  padding-top: 20px;
}

.mc-footer--slim .mc-footer__base {
  margin-top: 0;
}

/* The privacy links (snippets/privacy_choices): buttons that read as the
   links beside them, with California's opt-out icon after its words. */
.mc-choices {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.mc-choices:hover .mc-u,
.mc-choices:focus-visible .mc-u {
  background-size: 100% 1px;
}

.mc-choices__icon {
  width: 26px;
  height: auto;
  flex: none;
}

/* Each only where it applies: consent.js puts the visitor's region on
   <html> once it knows it, so until then (or if it never runs) neither
   shows. The site's globals.css has the same rule. */
html:not([data-mc-region="california"]) [data-mc-region-only="california"],
html:not([data-mc-region="gdpr"]) [data-mc-region-only="gdpr"] {
  display: none !important;
}

/* Kajabi's "Powered by" line, when the plan shows it. */
.mc-powered {
  padding: 12px var(--mc-margin);
  background: var(--mc-panel);
  color: var(--mc-ink-soft);
  font-size: 12px;
}

.mc-powered a {
  color: inherit;
}

/* ── Pagination ─────────────────────────────────────────────── */
.mc-pages {
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

.mc-pages > :is(a, span) {
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--mc-line);
  font-feature-settings: "tnum" 1;
}

.mc-pages > [aria-current="page"] {
  background: var(--mc-ink);
  border-color: var(--mc-ink);
  color: var(--mc-paper);
}

.mc-pages > .mc-pages__off {
  color: var(--mc-ink-faint);
}

/* ── Prose ── Kajabi's rich text: pages, posts, lessons, offers. */
.mc-prose {
  font-size: 17px;
  line-height: 1.6;
  max-width: 40em;
  overflow-wrap: break-word;
}

.mc-prose > * + * {
  margin-top: 1em;
}

.mc-prose :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 1.6em;
  line-height: 1.15;
}

.mc-prose > :first-child {
  margin-top: 0;
}

.mc-prose h1 {
  font-size: clamp(32px, 3.5vw, 44px);
  letter-spacing: -0.03em;
}

.mc-prose h2 {
  font-size: clamp(26px, 2.6vw, 34px);
  letter-spacing: -0.02em;
}

.mc-prose h3 {
  font-size: clamp(21px, 2vw, 25px);
  letter-spacing: -0.015em;
}

.mc-prose h4,
.mc-prose h5,
.mc-prose h6 {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mc-prose a {
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition:
    background-size var(--mc-dur-link) var(--mc-ease),
    opacity var(--mc-dur-link) var(--mc-ease);
}

.mc-prose a:hover {
  background-size: 0 1px;
  opacity: 1;
}

.mc-prose :is(ul, ol) {
  padding-left: 1.25em;
}

.mc-prose li + li {
  margin-top: 0.35em;
}

.mc-prose ul li::marker {
  color: var(--mc-flame);
}

.mc-prose blockquote {
  padding-left: 18px;
  border-left: 2px solid var(--mc-flame);
  font-family: var(--mc-serif);
  font-size: 1.25em;
  line-height: 1.35;
}

.mc-prose hr {
  margin-block: 2em;
  border: 0;
  border-top: 1px solid var(--mc-line);
}

.mc-prose img {
  width: auto;
  max-width: 100%;
}

/* Videos dropped into rich text fill the column at 16:9. */
.mc-prose :is(iframe, video, embed) {
  display: block;
  width: 100%;
  height: auto !important;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #000;
}

.mc-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.mc-prose :is(th, td) {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--mc-line);
  text-align: left;
  vertical-align: top;
}

.mc-prose code {
  padding: 0.1em 0.3em;
  background: var(--mc-panel);
  font-size: 0.9em;
}

/* The player: Kajabi's video, full width, square. */
.mc-video {
  position: relative;
  background: #000;
}

.mc-video :is(iframe, video) {
  display: block;
  width: 100%;
  border: 0;
}

/* An empty state: said plainly, on its own ground. */
.mc-empty {
  padding: 32px 20px;
  border: 1px solid var(--mc-line);
  color: var(--mc-ink-soft);
}

.mc-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mc-skip {
  position: absolute;
  left: var(--mc-margin);
  top: -100px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--mc-flame);
  color: #16201a;
}

.mc-skip:focus {
  top: 8px;
}

/* ── "Your race" (race_card.liquid): the member's marathon, found as they
   type, in the kit's line inputs. The course's outline and the library place
   it (course.css, site.css). ── */
.mc-race {
  display: grid;
  gap: 8px;
}

.mc-race[hidden],
.mc-race [hidden] {
  display: none;
}

.mc-race__name {
  font-family: var(--mc-serif);
  font-size: 24px;
  line-height: 1.15;
  text-wrap: balance;
}

.mc-race__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 4px;
}

.mc-race__change {
  padding: 0;
  border: 0;
  background: none;
  color: var(--mc-ink-soft);
  font: inherit;
  cursor: pointer;
}

.mc-race__form,
.mc-race__other {
  display: grid;
  gap: 10px;
}

.mc-race__prompt {
  font-size: 16px;
  line-height: 1.35;
}

.mc .mc-race__form :is(input[type="text"], input[type="date"]) {
  width: 100%;
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--mc-line-strong);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 16px;
}

/* The finder: the launch page's list, under the box. */
.mc-race__find {
  position: relative;
}

.mc-race__list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: min(320px, 50vh);
  margin: 0;
  padding: 6px 0;
  overflow-y: auto;
  list-style: none;
  background: var(--mc-paper);
  border: 1px solid var(--mc-line-strong);
  box-shadow: 0 16px 40px rgba(22, 32, 26, 0.14);
}

.mc-race__option {
  display: grid;
  gap: 2px;
  padding: 10px 14px;
  cursor: pointer;
}

.mc-race__option[aria-selected="true"] {
  background: var(--mc-line);
}

.mc-race__option-name {
  font-size: 16px;
  letter-spacing: -0.01em;
}

.mc-race__option-meta,
.mc-race__empty {
  font-size: 13px;
  color: var(--mc-ink-soft);
}

.mc-race__option--typed {
  border-top: 1px solid var(--mc-line);
}

.mc-race__empty {
  padding: 10px 14px;
}

.mc-race__note:empty {
  display: none;
}

/* "Confirm it's you", under the note that asks for it (race.js): its own
   line, in ink, though the note's words are soft. */
.mc .mc-race__confirm {
  display: flex;
  width: fit-content;
  margin-top: 14px;
  color: var(--mc-ink);
}

/* Connect Strava, under the race: a button, since it's a step worth taking. */
/* The course map: a small card of its own under the race, once there's a map. */
.mc-race__course {
  display: grid;
  gap: 2px;
  margin-top: 6px;
  padding: 12px 14px;
  background: var(--mc-panel);
  color: inherit;
  text-decoration: none;
}

.mc-race__course-name {
  font-family: var(--mc-serif);
  font-size: 18px;
  line-height: 1.2;
}

.mc-race__course:hover .mc-race__course-name {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.mc-race__strava {
  display: grid;
  justify-items: start;
  gap: 6px;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--mc-line);
}

/* The plan their race makes: when Week 1 starts, or the week they join at. */
.mc-race__plan {
  max-width: 40em;
  color: var(--mc-ink);
}

/* ── Before a race is saved (race.js): what it means for their training,
   and a yes. Its own small dialog, over the page. ── */
.mc-race-confirm {
  width: min(520px, calc(100vw - 32px));
  padding: 24px;
  border: 1px solid var(--mc-line-strong);
  background: var(--mc-paper);
  color: var(--mc-ink);
}

.mc-race-confirm::backdrop {
  background: rgba(13, 18, 15, 0.55);
}

.mc-race-confirm__title {
  margin: 0 0 10px;
  font-family: var(--mc-serif);
  text-wrap: balance;
}

.mc-race-confirm__body {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.5;
  text-wrap: pretty;
}

.mc-race-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ── The journal (journal_card.liquid, journal.js) ──────────────
   For a member who isn't a founder: beside a lesson (under its
   files) and in the library. A quiet panel, the line in the serif,
   one flame button. Hidden until the script says it's theirs. */
.mc-journal {
  display: grid;
  gap: 10px;
  max-width: 40em;
  padding: 18px;
  background: var(--mc-panel);
}

.mc-journal[hidden],
.mc-journal [hidden] {
  display: none;
}

.mc-journal__ask,
.mc-journal__buy {
  display: grid;
  gap: 8px;
  justify-items: start;
}

.mc-journal__heading {
  font-family: var(--mc-serif);
  font-size: 20px;
  line-height: 1.2;
  text-wrap: balance;
}

.mc-journal__form {
  display: grid;
  gap: 6px;
  justify-items: start;
  margin-top: 4px;
}

.mc-journal__to {
  overflow-wrap: anywhere;
}

.mc-journal__note:empty {
  display: none;
}

.mc-journal__note {
  color: var(--mc-flame);
}

.mc-journal--library {
  max-width: none;
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(20px, 3vw, 32px);
}

.mc-journal--library .mc-journal__heading {
  font-size: clamp(22px, 2.4vw, 28px);
}

/* ── Support (support.js): the main site's support form, over the
   page in a dialog, from Support in the member's links. The frame
   fills the dialog under its bar and scrolls inside itself. ── */
.mc-support-dialog {
  width: min(720px, calc(100vw - 32px));
  height: min(860px, calc(100vh - 32px));
  height: min(860px, calc(100dvh - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid var(--mc-line-strong);
  background: var(--mc-paper);
  color: var(--mc-ink);
  overflow: hidden;
}

.mc-support-dialog[open] {
  display: flex;
  flex-direction: column;
}

.mc-support-dialog::backdrop {
  background: rgba(13, 18, 15, 0.55);
}

.mc-support-dialog__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--mc-line);
}

.mc-support-dialog__title {
  flex: 1;
  margin: 0;
  font-family: var(--mc-serif);
  font-size: 20px;
}

.mc-support-dialog__close {
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  color: inherit;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.mc-support-dialog__frame {
  flex: 1;
  width: 100%;
  min-height: 0;
  border: 0;
  background: var(--mc-paper);
}

/* On a phone: the whole screen. */
@media (max-width: 640px) {
  .mc-support-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
  }
}

/* ─────────────────────────────────────────────────────────────
   The website theme: home, log in, library, thank you, pages,
   blog. Follows base.css in assets/theme.css.
   ───────────────────────────────────────────────────────────── */

/* ── Hero ── the site's first screen: the dark green, the words
   at the bottom, the buttons at the right from a laptop up. */
.mc-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
}

.mc-hero--home,
.mc-hero--tall {
  min-height: max(560px, calc(100svh - var(--mc-header-h)));
}

.mc-hero--thanks {
  min-height: max(420px, 62svh);
}

.mc-hero__media,
.mc-auth__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--mc-deep);
}

.mc-hero__media > img,
.mc-auth__media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* Legibility for the words at the bottom, whatever the photograph. */
.mc-hero__media::after,
.mc-auth__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13, 18, 15, 0.45) 0%, rgba(13, 18, 15, 0) 22%),
    linear-gradient(0deg, rgba(13, 18, 15, 0.82) 0%, rgba(13, 18, 15, 0.45) 45%, rgba(13, 18, 15, 0.1) 75%);
}

.mc-hero__body {
  padding-top: clamp(96px, 14vw, 180px);
  padding-bottom: clamp(24px, 4vw, 40px);
}

.mc-hero__eyebrow {
  color: var(--mc-ink-soft);
}

.mc-hero__title {
  margin-top: 18px;
  max-width: 15em;
  font-size: clamp(40px, 5.2vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.mc-hero__foot {
  margin-top: 40px;
  display: grid;
  gap: 24px;
  align-items: end;
}

.mc-hero__text {
  max-width: 30em;
  color: var(--mc-ink-soft);
}

@media (min-width: 1024px) {
  .mc-hero__foot {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 40px;
  }
}

/* A hero on paper keeps the paper's inks. */
.mc-hero.mc-ground--panel,
.mc-hero.mc-ground--band {
  min-height: 0;
}

/* ── Log in, and the two password pages ── the dark half and the
   form, side by side from a laptop up; a band over the form on a
   phone. */
.mc-auth {
  display: grid;
  min-height: calc(100svh - var(--mc-header-h));
}

.mc-auth__aside {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: 40px var(--mc-margin) 32px;
}

.mc-auth__eyebrow {
  color: var(--mc-ink-soft);
}

.mc-auth__title {
  font-family: var(--mc-serif);
  font-size: clamp(48px, 7vw, 112px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.mc-auth__text {
  margin-top: 16px;
  max-width: 22em;
  color: var(--mc-ink-soft);
}

.mc-auth__main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px var(--mc-margin) 64px;
}

.mc-auth__card {
  width: 100%;
  max-width: 440px;
}

.mc-auth__form {
  margin-top: 28px;
}

.mc-auth__form form {
  display: grid;
  gap: 22px;
}

.mc-auth__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
}

.mc-auth__after {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--mc-line);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Kajabi writes the log-in link itself: underline whatever it writes. */
.mc-u-links a {
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
}

@media (min-width: 900px) {
  .mc-auth {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .mc-auth__aside {
    position: sticky;
    top: var(--mc-header-h);
    height: calc(100svh - var(--mc-header-h));
    padding: 32px var(--mc-margin) 40px;
  }
}

/* ── Library ── the site's tier cards: full-bleed columns between
   hairlines, a face above and the words below. */
.mc-library__head {
  display: grid;
  gap: 14px;
  max-width: 48em;
}

.mc-library__text {
  max-width: 26em;
}

.mc-cards {
  display: grid;
  margin: clamp(40px, 5vw, 64px) calc(var(--mc-margin) * -1) 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--mc-line);
}

.mc-card {
  display: grid;
  grid-template-rows: auto 1fr;
  border-bottom: 1px solid var(--mc-line);
}

.mc-card__face {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px var(--mc-margin);
  isolation: isolate;
}

.mc-card__face > img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform 1200ms var(--mc-ease);
}

.mc a.mc-card__face:hover {
  opacity: 1;
}

.mc-card__face:hover > img {
  transform: scale(1.02);
}

/* Without a picture, the faces darken in turn: paper, stone, ink. */
.mc-card__face--0 {
  background: var(--mc-panel);
}

.mc-card__face--1 {
  background: var(--mc-stone);
}

.mc-card__face--2 {
  background: var(--mc-ink);
  color: var(--mc-light);
}

.mc-card__face--photo {
  background: var(--mc-deep);
  color: var(--mc-light);
}

.mc-card__face--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(13, 18, 15, 0.5), rgba(13, 18, 15, 0) 40%, rgba(13, 18, 15, 0.55));
}

.mc-card__name {
  max-width: 12em;
  font-family: var(--mc-serif);
  font-size: clamp(26px, 2.2vw, 32px);
  line-height: 1.1;
  text-wrap: balance;
}

/* The tier, set as big as the site sets it. */
.mc-card__numeral {
  align-self: flex-end;
  font-family: var(--mc-serif);
  font-size: clamp(96px, 11vw, 168px);
  line-height: 0.8;
  letter-spacing: -0.04em;
}

.mc-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 18px var(--mc-margin) 24px;
}

.mc-card__body .mc-btn {
  margin-top: auto;
}

@media (min-width: 768px) {
  .mc-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mc-card:nth-child(odd) {
    border-right: 1px solid var(--mc-line);
  }
}

@media (min-width: 1200px) {
  .mc-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mc-card:nth-child(odd) {
    border-right: 0;
  }

  .mc-card:not(:nth-child(3n)) {
    border-right: 1px solid var(--mc-line);
  }
}

/* The top: the welcome, and "Your race" beside it from a laptop up. */
.mc-library__top {
  display: grid;
  gap: 32px;
  align-items: end;
}

.mc-library__race {
  max-width: 26rem;
}

@media (min-width: 1024px) {
  .mc-library__top {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
  }
}

/* A tier they haven't got: the same card, its face held back until hovered. */
.mc-library__more {
  margin-top: clamp(48px, 6vw, 80px);
}

.mc-library__more-head {
  display: grid;
  gap: 10px;
  max-width: 40em;
}

.mc-cards--more {
  margin-top: 24px;
}

.mc-card__face--more {
  opacity: 0.55;
  transition: opacity var(--mc-dur-button) var(--mc-ease);
}

.mc a.mc-card__face--more:hover,
.mc-card--more:focus-within .mc-card__face--more {
  opacity: 0.85;
}

/* Tools: a row of plain cards; one opens over the page. */
.mc-library__tools {
  display: grid;
  gap: 16px;
  margin-top: clamp(48px, 6vw, 80px);
}

/* Hairlines between the cards, and none where a row runs out. */
.mc-toolcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--mc-line);
  border-left: 1px solid var(--mc-line);
}

.mc-toolcard {
  border-right: 1px solid var(--mc-line);
  border-bottom: 1px solid var(--mc-line);
}

.mc-toolcard__link {
  display: grid;
  gap: 8px;
  height: 100%;
  padding: 20px;
  background: var(--mc-paper);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--mc-dur-button) var(--mc-ease);
}

.mc a.mc-toolcard__link:hover {
  opacity: 1;
  background: var(--mc-panel);
}

.mc-toolcard__name {
  font-family: var(--mc-serif);
  font-size: 24px;
  line-height: 1.15;
}

.mc-toolcard__open {
  margin-top: 8px;
}

/* Discounts & partners (deals.js): the brand deals, in cards like the
   tools', sponsors first on the panel with the race red, each with its
   code to copy (or a word that the link applies it) and a way to the
   brand. Out of sight until there's a deal to show. */
.mc-library__deals {
  display: grid;
  gap: 16px;
  margin-top: clamp(48px, 6vw, 80px);
}

.mc-library__deals[hidden] {
  display: none;
}

.mc-library__deals-head {
  display: grid;
  gap: 6px;
  max-width: 40em;
}

.mc-deals {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--mc-line);
  border-left: 1px solid var(--mc-line);
}

.mc-deal {
  display: grid;
  align-content: start;
  border-right: 1px solid var(--mc-line);
  border-bottom: 1px solid var(--mc-line);
  background: var(--mc-paper);
}

.mc-deal__body {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 20px;
}

/* A sponsor: first, on the panel, and twice as wide where there's room. */
.mc-deal--sponsor {
  background: var(--mc-panel);
}

@media (min-width: 720px) {
  .mc-deal--sponsor {
    grid-column: span 2;
  }
}

/* A sponsor with a picture: the whole row, the picture beside the offer
   (above it on a phone), cropped to fill its half. */
.mc-deal--pictured {
  grid-column: 1 / -1;
}

.mc-deal__picture {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--mc-band);
}

.mc-deal__picture img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 720px) {
  .mc-deal--pictured {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .mc-deal__picture {
    aspect-ratio: auto;
    min-height: 340px;
  }

  .mc-deal--pictured .mc-deal__body {
    align-content: center;
    padding: clamp(24px, 3.5vw, 48px);
  }
}

.mc-deal--pictured .mc-deal__logo,
.mc-deal--pictured .mc-deal__mono {
  width: 56px;
  height: 56px;
}

.mc-deal__top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mc-deal__logo,
.mc-deal__mono {
  flex: none;
  width: 48px;
  height: 48px;
  border: 1px solid var(--mc-line);
  background: #fff;
}

.mc-deal__logo {
  object-fit: contain;
  padding: 4px;
}

.mc-deal__mono {
  display: grid;
  place-items: center;
  background: var(--mc-band);
  font-family: var(--mc-serif);
  font-size: 22px;
}

.mc-deal__who {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.mc-deal__who p {
  margin: 0;
}

.mc-deal__brand {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
}

.mc-deal__tag {
  color: var(--mc-flame);
}

.mc-deal__headline {
  margin: 0;
  font-family: var(--mc-serif);
  font-size: 24px;
  line-height: 1.15;
}

.mc-deal--sponsor .mc-deal__headline {
  font-size: clamp(24px, 2.4vw, 30px);
}

.mc-deal--pictured .mc-deal__headline {
  font-size: clamp(28px, 3vw, 40px);
}

.mc-deal__body > .mc-small {
  margin: 0;
}

/* The code, and a button to copy it. */
.mc-deal__code {
  display: flex;
  align-items: stretch;
  justify-self: start;
  max-width: 100%;
  border: 1px dashed var(--mc-line-strong);
}

.mc-deal__value {
  padding: 8px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
  user-select: all;
}

.mc-deal__copy {
  padding: 0 12px;
  border: 0;
  border-left: 1px dashed var(--mc-line-strong);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.mc-deal__copy:hover {
  background: var(--mc-band);
}

.mc-deal__copy:focus-visible {
  outline: 2px solid var(--mc-flame);
  outline-offset: 2px;
}

.mc-deal__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 4px;
}

.mc-deals__note {
  margin: 0;
}

/* With the deals on a page of their own: one line to it, where the cards
   would be. */
.mc-library__deals-line {
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: 16px;
  border-top: 1px solid var(--mc-line);
}

.mc-library__account {
  margin-top: clamp(40px, 5vw, 64px);
}

/* An open tool: over the page, the whole screen on a phone. */
.mc-tool-dialog {
  width: min(960px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid var(--mc-line-strong);
  background: var(--mc-paper);
  color: var(--mc-ink);
  overflow: auto;
}

.mc-tool-dialog::backdrop {
  background: rgba(13, 18, 15, 0.55);
}

.mc-tool-dialog__bar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: var(--mc-paper);
  border-bottom: 1px solid var(--mc-line);
}

.mc-tool-dialog__title {
  flex: 1;
  font-family: var(--mc-serif);
  font-size: 20px;
}

.mc-tool-dialog__close {
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  color: inherit;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.mc-tool-dialog__stage {
  position: relative;
  min-height: 240px;
}

.mc-tool-dialog__loading {
  position: absolute;
  top: 24px;
  left: 16px;
}

.mc-tool {
  display: block;
  width: 100%;
  height: 720px;
  border: 0;
  background: transparent;
}

@media (max-width: 767px) {
  .mc-tool-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
  }
}

.mc-library__empty {
  margin-top: 40px;
  display: grid;
  gap: 12px;
  max-width: 40em;
}

/* ── Content blocks ── Kajabi's building blocks on the twelve
   columns. */
.mc-content__head {
  display: grid;
  gap: 12px;
  max-width: 40em;
  margin-bottom: clamp(32px, 4vw, 56px);
}

.mc-blocks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px var(--mc-gutter);
}

.mc-blocks--center {
  align-items: center;
}

.mc-block__img,
.mc-block__img img {
  display: block;
  width: 100%;
}

@media (min-width: 900px) {
  .mc-blocks {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .mc-col-4 {
    grid-column: span 4;
  }

  .mc-col-6 {
    grid-column: span 6;
  }

  .mc-col-8 {
    grid-column: span 8;
  }

  .mc-col-12 {
    grid-column: 1 / -1;
  }
}

/* ── Pages ─────────────────────────────────────────────────── */
.mc-page .mc-prose {
  max-width: 44em;
}

@media (min-width: 1024px) {
  .mc-page header {
    position: sticky;
    top: calc(var(--mc-header-h) + 24px);
    align-self: start;
  }
}

/* The partners page (a page whose words say [deals]): the deals the width
   of the page under its title and words, as the library has them; to a
   visitor who isn't logged in, a line in the words' column instead. */
.mc-page--deals .mc-library__deals {
  margin-top: clamp(40px, 5vw, 64px);
}

/* The same, in a text block of a page built from sections: the blocks'
   own gap spaces it. */
.mc-block--deals .mc-library__deals {
  margin-top: 0;
}

.mc-page__members,
.mc-page__after {
  margin-top: clamp(32px, 4vw, 48px);
}

.mc-page__login a {
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size var(--mc-dur-link) var(--mc-ease);
}

.mc .mc-page__login a:hover {
  background-size: 0 1px;
  opacity: 1;
}

/* ── Blog ─────────────────────────────────────────────────── */
.mc-blog-head {
  display: grid;
  gap: 24px;
  padding-top: var(--mc-section);
  align-items: end;
}

@media (min-width: 900px) {
  .mc-blog-head {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  }
}

.mc-search {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.mc-search .mc-input {
  font-size: 18px;
}

.mc-blog {
  padding-top: clamp(32px, 4vw, 56px);
}

.mc-posts {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--mc-line);
}

.mc-posts__item {
  display: grid;
  gap: 20px;
  padding-block: 28px 36px;
  border-bottom: 1px solid var(--mc-line);
}

.mc-posts__img img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.mc-posts__body {
  display: grid;
  gap: 12px;
  align-content: start;
  max-width: 40em;
}

@media (min-width: 900px) {
  .mc-posts__item {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--mc-gutter);
  }

  .mc-posts__item > .mc-posts__body:only-child,
  .mc-posts--plain .mc-posts__body {
    grid-column: 2;
  }
}

.mc-post__head {
  display: grid;
  gap: 16px;
  max-width: 48em;
}

.mc-post__media {
  margin-top: clamp(32px, 4vw, 56px);
}

.mc-post__media img {
  width: 100%;
}

.mc-post__body {
  margin-top: clamp(32px, 4vw, 56px);
  margin-inline: auto;
}

.mc-post__back {
  max-width: 40em;
  margin: 48px auto 0;
}

/* ── 404 ── the number set as big as the site's footer slogan. */
.mc-404 {
  display: grid;
  gap: 18px;
  justify-items: start;
}

.mc-404__code {
  font-family: var(--mc-serif);
  font-size: clamp(120px, 22vw, 320px);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: var(--mc-stone);
}

.mc-404__text {
  max-width: 26em;
}

.mc-404 .mc-actions {
  margin-top: 12px;
}

/* ── The footer (sections/footer.liquid) ── the launch page's: the slogan
   at about two fifths of the page, over the small print; the links at the
   right edge, on the small print's first line; the full wordmark across the
   page (snippets/wordmark.liquid); then the year, under a hairline. Sized
   to the footer itself, so the slogan keeps its share at any width. */
.mc-footer:not(.mc-footer--slim) {
  container-type: inline-size;
}

.mc-footer__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

/* "Running is Analog." set in Hardcover is 6.84 of its em wide (at the
   slogan's -0.03em): 5.85% of the footer's width makes it two fifths. */
.mc-footer .mc-footer__slogan {
  font-size: clamp(40px, 5.85cqi, 160px);
}

.mc-footer__small {
  max-width: min(100%, max(36em, 40cqi));
}

@media (min-width: 768px) {
  .mc-footer__row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px 48px;
    align-items: baseline;
  }

  .mc-footer__slogan {
    grid-column: 1 / -1;
  }

  .mc-footer__row .mc-footer__links {
    justify-content: flex-end;
  }
}

.mc-footer__mark {
  margin-top: clamp(56px, 9vw, 144px);
  color: var(--mc-ink);
}

.mc-wordmark {
  display: block;
  width: 100%;
  height: auto;
}

.mc-footer:not(.mc-footer--slim) .mc-footer__base {
  margin-top: clamp(24px, 4vw, 40px);
  padding-top: 20px;
  border-top: 1px solid var(--mc-line);
}

/* No wordmark: the space it held stays. */
.mc-footer:not(.mc-footer--slim) .mc-footer__row + .mc-footer__base {
  margin-top: clamp(56px, 9vw, 144px);
}

/* ── Your training (training.liquid, training.js) ── the member's own
   training, live from the main site once this device is linked: cards on
   the paper, hairlines between, figures in the serif, the race red for
   what's now (this week's bar) and for a pair near its end. */
.mc-train {
  margin-top: clamp(40px, 6vw, 72px);
  padding-top: 24px;
  border-top: 1px solid var(--mc-line);
}

.mc-train[hidden],
.mc-train [hidden] {
  display: none;
}

.mc-train__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 24px;
}

.mc-train__link {
  display: grid;
  gap: 20px;
  align-items: center;
  padding: 24px;
  background: var(--mc-panel);
}

.mc-train__link .mc-sub {
  margin-bottom: 6px;
}

@media (min-width: 768px) {
  .mc-train__link {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 32px;
  }
}

/* Hairlines between the cards, and plain paper where a row ends short:
   each card's own border, pulled a pixel over its neighbour's. */
.mc-train__grid {
  display: grid;
  padding: 1px 0 0 1px;
}

@media (min-width: 768px) {
  .mc-train__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .mc-train__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mc-train__run {
    grid-column: span 2;
  }
}

/* The last card takes what its row leaves (training.js), and a list in a
   card that wide runs across it. */
@media (min-width: 768px) and (max-width: 1199px) {
  .mc-train__card[data-fill2] {
    grid-column: span 2;
  }

  .mc-train__card[data-fill2] .mc-train__shoe-list,
  .mc-train__card[data-fill2] .mc-train__race-list,
  .mc-train__card[data-fill2] .mc-train__order-list {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    column-gap: 40px;
  }

  .mc-train__card[data-fill2] .mc-train__order {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .mc-train__card[data-fill2] .mc-train__paces-list {
    grid-template-columns: repeat(4, max-content);
    column-gap: 48px;
  }
}

@media (min-width: 1200px) {
  .mc-train__card[data-fill3="2"] {
    grid-column: span 2;
  }

  .mc-train__card[data-fill3="3"] {
    grid-column: span 3;
  }

  .mc-train__card[data-fill3] .mc-train__shoe-list,
  .mc-train__card[data-fill3] .mc-train__race-list,
  .mc-train__card[data-fill3] .mc-train__order-list {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    column-gap: 48px;
  }

  .mc-train__card[data-fill3] .mc-train__order {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .mc-train__card[data-fill3] .mc-train__paces-list {
    grid-template-columns: repeat(4, max-content);
    column-gap: 56px;
  }
}

.mc-train__card {
  display: grid;
  align-content: start;
  gap: 10px;
  margin: -1px 0 0 -1px;
  padding: 24px;
  border: 1px solid var(--mc-line);
  background: var(--mc-paper);
}

.mc-train__card > .mc-cap {
  margin-bottom: 4px;
}

.mc-train__more {
  justify-self: start;
  margin-top: 6px;
  font-size: 14px;
}

.mc-train__big {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--mc-serif);
  font-size: clamp(44px, 5vw, 64px);
  line-height: 0.95;
}

.mc-train__unit {
  font-family: var(--mc-sans);
  font-size: 14px;
  color: var(--mc-ink-soft);
}

/* The latest run: its route drawn beside its numbers. */
.mc-train__run-body {
  display: grid;
  gap: 20px;
  align-items: center;
}

@media (min-width: 560px) {
  .mc-train__run-body {
    grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
  }
}

.mc-train__outline {
  aspect-ratio: 1;
  width: 100%;
  max-width: 260px;
  padding: 12px;
  background: var(--mc-panel);
  color: var(--mc-ink);
}

.mc-train__outline svg,
.mc-train__race-outline svg {
  display: block;
  width: 100%;
  height: 100%;
}

.mc-train__run-words {
  display: grid;
  gap: 8px;
}

.mc-train__name {
  font-family: var(--mc-serif);
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.08;
  text-wrap: balance;
}

.mc-train__nudge {
  margin-top: 6px;
}

/* "View on Strava", back to the run: Strava's words, bold and underlined
   (its brand guidelines), in the ink rather than the flame. */
.mc-train__view {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.mc-train__nudge a {
  color: var(--mc-flame);
}

/* This week, and the seven before it. */
.mc-train__chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 88px;
  margin-top: 8px;
}

.mc-train__col {
  flex: 1;
  min-width: 0;
  background: var(--mc-line-strong);
}

.mc-train__col--now {
  background: var(--mc-flame);
}

.mc-train__axis {
  display: flex;
  justify-content: space-between;
}

/* Shoes: the miles since Week 1, and each pair's life so far. */
.mc-train__shoe-list,
.mc-train__race-list,
.mc-train__order-list {
  display: grid;
  gap: 16px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.mc-train__shoe {
  display: grid;
  gap: 6px;
}

.mc-train__shoe-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.mc-train__shoe-name {
  font-size: 17px;
  line-height: 1.25;
}

.mc-train__shoe-mi .mc-figure {
  font-size: 26px;
}

.mc-train__bar {
  height: 6px;
  background: var(--mc-panel);
}

.mc-train__bar > span {
  display: block;
  height: 100%;
  background: var(--mc-ink);
}

.mc-train__bar[data-state="warn"] > span,
.mc-train__bar[data-state="done"] > span {
  background: var(--mc-flame);
}

/* Paces. */
.mc-train__paces-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  margin: 6px 0 0;
}

.mc-train__paces-list dd {
  margin: 2px 0 0;
  font-family: var(--mc-serif);
  font-size: 20px;
}

/* Races and orders. */
.mc-train__race {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.mc-train__race-outline {
  aspect-ratio: 1;
  padding: 6px;
  background: var(--mc-panel);
}

.mc-train__race-name,
.mc-train__order-name {
  font-size: 16px;
  line-height: 1.3;
}

.mc-train__order {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--mc-line);
}

.mc-train__order:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.mc-train__order-total {
  font-family: var(--mc-serif);
  font-size: 18px;
  white-space: nowrap;
}

.mc-train__foot {
  margin-top: 14px;
}

.mc-train__unlink {
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* The full price, struck through before the one a member pays: a tier at
   its one-more price ($147, $247 struck), the other two ($247, $494). */
.mc-was {
  margin-right: 0.15em;
  opacity: 0.6;
  font-weight: inherit;
}

/* Support at the library's foot: a line and a small button (the size of
   Connect Strava), which opens the support form over the page. */
.mc-library__support {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: clamp(40px, 5vw, 64px);
}

.mc-library__support .mc-small {
  margin: 0;
}

.mc-library__account + .mc-library__support {
  margin-top: 16px;
}