/* Marathon Courses — one-screen theme. Built by kajabi/build.mjs from
 * kajabi/shared/assets/base.css and kajabi/page/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%;
}

: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);
}

.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 (Your privacy choices) 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;
}

/* "Your privacy choices" (snippets/privacy_choices): a button that reads as
   the links beside it, with California's opt-out icon after the 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;
}

/* 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;
}

/* 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 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);
}

/* ─────────────────────────────────────────────────────────────
   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 {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--mc-deep);
}

.mc-hero__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 {
  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 {
  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);
}

.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;
}

/* ─────────────────────────────────────────────────────────────
   Landing pages: the sales sections, set the way the launch page
   sets them (src/app/landing/(launch)/launch/launch.css), rule for
   rule. The header, footer, hero and the tier cards' base are the
   website's (site.css, borrowed); these are the launch page's
   rhythm and the rest of its patterns, as mc- classes.
   ───────────────────────────────────────────────────────────── */

/* ── Rhythm ── the launch page's: 16px margins at every width, and
   its long pause before each section. A section on paper has its
   space above only; one on its own ground carries its own below. */
.mc-landing {
  --mc-margin: 16px;
  --mc-section: clamp(96px, 13vw, 200px);
}

body.mc-landing {
  line-height: 1.45;
}

html:has(.mc-landing) {
  /* Anchors (#tiers) land below the sticky header, not under it. */
  scroll-padding-top: 72px;
}

@media (prefers-reduced-motion: no-preference) {
  html:has(.mc-landing) {
    scroll-behavior: smooth;
  }
}

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

.mc-landing .mc-section:is(.mc-ground--panel, .mc-ground--band, .mc-ground--dark) {
  margin-top: var(--mc-section);
  padding-bottom: var(--mc-section);
}

/* A section on the dark is flat ink, as the launch page's are; the
   glow is the hero's and the halves' own. */
.mc-landing .mc-section.mc-ground--dark {
  background: #16201a;
}

/* The page's last pause, before the footer. None when the page ends
   on a ground of its own (the bands, the dark green, the halves): no
   strip of paper between two grounds. Kajabi wraps each section in
   an element of its own, so both ways are named. */
.mc-landing .mc-main {
  padding-bottom: var(--mc-section);
}

.mc-landing .mc-main:has(
    > :last-child:is(.mc-cta--bands, .mc-ground--dark, .mc-ground--panel, .mc-lists--halves, .mc-screen),
    > :last-child > :is(.mc-cta--bands, .mc-ground--dark, .mc-ground--panel, .mc-lists--halves, .mc-screen):last-child
  ) {
  padding-bottom: 0;
}

/* The footer with neither the slogan nor the wordmark (Footer's settings;
   the one-screen offer page starts so): slim, the small print and the
   links, then the year. */
.mc-landing .mc-footer:not(:has(.mc-footer__slogan, .mc-footer__mark)) {
  padding-top: 24px;
}

.mc-landing .mc-footer:not(:has(.mc-footer__slogan, .mc-footer__mark)) .mc-footer__row + .mc-footer__base {
  margin-top: 24px;
}

/* A label over a heading sits where the hero's does. */
.mc-landing .mc-section p.mc-cap + :is(h2, .mc-t2, .mc-display) {
  margin-top: 18px;
}

/* ── Type the launch page has and the website doesn't ── */
.mc-body {
  font-size: 16px;
  line-height: 1.5;
}

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

/* Times and prices, set the way the kit sets its clocks. */
.mc-figure {
  font-family: var(--mc-serif);
  font-feature-settings: "lnum" 1, "tnum" 1;
  letter-spacing: -0.01em;
  line-height: 1;
}

/* A big price's dollar sign: half size, its top on the numerals' top. */
.mc-cur {
  font-size: 0.5em;
  vertical-align: 0.7em;
  margin-right: 0.04em;
  line-height: 0;
}

/* "Up": the label and its copy in a clipped box, the stack lifting by
   half on hover. The copy is aria-hidden. */
.mc-up {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  height: 1.15em;
  height: 1lh;
}

.mc-up__stack {
  display: flex;
  flex-direction: column;
  transition: transform var(--mc-dur-link) var(--mc-ease);
}

.mc-up__stack > span {
  display: block;
  white-space: nowrap;
}

a:hover > .mc-up .mc-up__stack {
  transform: translateY(-50%);
}

/* A left column that stays in view while its right side reads. */
@media (min-width: 1024px) {
  .mc-stick {
    position: sticky;
    top: calc(var(--mc-header-h) + 24px);
    align-self: start;
  }
}

/* ── Hero ── the website's, with the launch page's words: the line
   under the heading in the sans, and the label at full strength. */
.mc-landing .mc-hero__eyebrow {
  color: inherit;
}

.mc-landing .mc-hero__title {
  max-width: 17em;
}

.mc-landing .mc-hero__text {
  max-width: 34em;
  font-family: var(--mc-sans);
  font-size: clamp(18px, 1.4vw, 20px);
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.mc-landing .mc-hero__body {
  padding-bottom: 20px;
}

@media (min-width: 1024px) {
  .mc-landing .mc-hero__body {
    padding-bottom: 28px;
  }
}

/* ── The offer ── an offer page's first screen: the tier's face, as its
   card has it, beside what it is, the price and the button. Side by side
   from a laptop up, a screen tall; the face first on a phone. */
.mc-offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
  .mc-offer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: max(640px, calc(100svh - var(--mc-header-h)));
  }
}

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

/* From a laptop up the face is a screen tall and holds still while the
   words beside it go by, so its numeral is always in view. */
@media (min-width: 1024px) {
  .mc-offer__face {
    position: sticky;
    top: var(--mc-header-h);
    align-self: start;
    aspect-ratio: auto;
    height: max(560px, calc(100svh - var(--mc-header-h)));
  }
}

/* The faces get darker as the tiers get harder, as the cards' do. */
.mc-offer__face--stone {
  background: var(--mc-stone);
}

.mc-offer__face--ink {
  background: #16201a;
  color: var(--mc-light);
}

.mc-offer__face--flame {
  background: var(--mc-flame);
  color: #16201a;
}

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

.mc-offer__face > img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.mc-offer__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-offer__name {
  font-family: var(--mc-serif);
  font-size: clamp(26px, 2.2vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.mc-offer__numeral {
  align-self: flex-end;
  font-family: var(--mc-serif);
  font-size: clamp(120px, 20vw, 320px);
  line-height: 0.8;
  letter-spacing: -0.04em;
}

.mc-offer__body {
  display: grid;
  place-items: center;
  padding: clamp(48px, 7vw, 112px) var(--mc-margin);
}

.mc-offer__inner {
  width: min(100%, 34rem);
}

.mc-offer__title {
  margin-top: 18px;
}

.mc-offer__text {
  margin-top: 24px;
}

.mc-offer__price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 40px;
  padding-block: 16px;
  border-top: 1px solid var(--mc-line);
}

.mc-offer__price .mc-figure {
  font-size: clamp(44px, 4.4vw, 64px);
}

.mc-offer__price s {
  margin-left: 0.35em;
  font-size: 0.5em;
  color: var(--mc-ink-soft);
}

.mc-offer__button {
  margin-top: 16px;
}

.mc-offer .mc-terms {
  margin-top: 16px;
}

.mc-offer__items {
  margin-top: 40px;
}

.mc-offer__small {
  margin-top: 24px;
}

/* ── The checkout, on the page ── Kajabi's form beside a recap of what's
   being bought: the form in the right half from a laptop up. Kajabi draws
   the form, and keeps what it does (fields, payment, what happens after);
   these rules dress it, and hold it back until the terms box is ticked. */
.mc-checkout__text {
  margin-top: 24px;
  max-width: 34em;
}

.mc-checkout__items {
  margin-top: 32px;
  max-width: 34rem;
}

.mc-checkout__form {
  position: relative;
  margin-top: 16px;
}

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

.mc-checkout__small {
  margin-top: 16px;
}

.mc-checkout__missing {
  margin-top: 16px;
}

/* Kajabi's form, in the page's clothes: Aspekta, ink on white, square
   hairline fields, and the race red, with ink lettering, to pay.

   Kajabi builds it from Pine, its design system: web components that
   draw their fields inside themselves, where no rule from the page
   reaches. What does reach them is the variables they read. So the
   shared ones (Pine's tokens) are set here, where every component inside
   inherits them, and the ones a component sets for itself (its corners,
   its field colours) on the component. The composite tokens (a font and
   its size together) are written out again, since the page's :root
   would otherwise have filled them in with Inter already. Payment fields
   in Stripe's or PayPal's frames keep their own look. */
.mc-checkout [data-mc-checkout-form] {
  --pine-font-family-inter: var(--mc-sans);
  --pine-font-family-body: var(--mc-sans);
  --pine-font-family-heading: var(--mc-sans);
  --pine-typography-body: 400 var(--pine-font-size-body-md, 16px) / 1.45 var(--mc-sans);
  --pine-typography-body-medium: 500 var(--pine-font-size-body-md, 16px) / 1.45 var(--mc-sans);
  --pine-typography-body-semi-bold: 500 var(--pine-font-size-body-md, 16px) / 1.45 var(--mc-sans);
  --pine-typography-body-bold: 600 var(--pine-font-size-body-md, 16px) / 1.45 var(--mc-sans);
  --pine-typography-body-brand-label: 500 var(--pine-font-size-body-md, 16px) / 1.45 var(--mc-sans);
  --pine-typography-body-brand-text: 500 var(--pine-font-size-body-md, 16px) / 1.45 var(--mc-sans);
  --pine-typography-body-sm: 400 var(--pine-font-size-body-sm, 14px) / 1.45 var(--mc-sans);
  --pine-typography-body-sm-medium: 500 var(--pine-font-size-body-sm, 14px) / 1.45 var(--mc-sans);
  --pine-typography-body-sm-bold: 600 var(--pine-font-size-body-sm, 14px) / 1.45 var(--mc-sans);
  --pine-typography-body-sm-brand-label: 500 var(--pine-font-size-body-sm, 14px) / 1.45 var(--mc-sans);
  --pine-typography-body-sm-brand-text: 500 var(--pine-font-size-body-sm, 14px) / 1.45 var(--mc-sans);
  --pine-typography-heading-1: 500 var(--pine-font-size-heading-1, 32px) / 1.1 var(--mc-sans);
  --pine-typography-heading-2: 500 var(--pine-font-size-heading-2, 29.6px) / 1.1 var(--mc-sans);
  --pine-typography-heading-3: 500 var(--pine-font-size-heading-3, 25.1px) / 1.15 var(--mc-sans);
  --pine-typography-heading-4: 500 var(--pine-font-size-heading-4, 22.7px) / 1.2 var(--mc-sans);
  --pine-typography-heading-5: 500 var(--pine-font-size-heading-5, 20.5px) / 1.25 var(--mc-sans);
  --pine-typography-heading-6: 500 var(--pine-font-size-heading-6, 18.6px) / 1.3 var(--mc-sans);
  --pine-typography-heading-caption: 500 var(--pine-font-size-body-sm, 14px) / 1.3 var(--mc-sans);
  --pine-color-text: var(--mc-ink);
  --pine-color-text-strong: var(--mc-ink);
  --pine-color-text-emphasis: var(--mc-ink);
  --pine-color-text-label: var(--mc-ink);
  --pine-color-text-neutral: var(--mc-ink);
  --pine-color-text-secondary: var(--mc-ink-soft);
  --pine-color-text-tertiary: var(--mc-ink-soft);
  --pine-color-text-muted: var(--mc-ink-soft);
  --pine-color-text-message: var(--mc-ink-soft);
  --pine-color-text-placeholder: var(--mc-ink-faint);
  --pine-color-text-message-danger: #b3290e;
  --pine-color-text-danger: #b3290e;
  --pine-color-border: var(--mc-line-strong);
  --pine-color-border-subtle: var(--mc-line);
  --pine-color-border-hover: var(--mc-ink);
  --pine-color-border-active: var(--mc-ink);
  --pine-color-border-danger: var(--mc-flame);
  --pine-color-border-danger-hover: #b3290e;
  --pine-border: 1px solid var(--mc-line-strong);
  --pine-border-hover: 1px solid var(--mc-ink);
  --pine-color-focus-ring: var(--mc-flame);
  --pine-color-focus-ring-danger: var(--mc-flame);
  --pine-outline-focus: 2px solid var(--mc-flame);
  --pine-color-primary: var(--mc-flame);
  --pine-color-primary-hover: #e8390f;
  --pine-color-text-primary: #16201a;
  --pine-color-accent: var(--mc-flame);
  --pine-color-accent-hover: #e8390f;
  --pine-color-danger: var(--mc-flame);
  --pine-color-danger-hover: #b3290e;
  --pine-input-color-background-danger: #fff;
  --pine-select-color-background-danger: #fff;
  --pine-border-radius-sm: 0;
  --pine-border-radius-md: 0;
  --pine-border-radius-lg: 0;
  --pine-border-radius-full: 0;
  color: var(--mc-ink);
  font-family: var(--mc-sans);
  transition: opacity var(--mc-dur-link) var(--mc-ease);
}

.mc-checkout [data-mc-checkout-form] :is(pds-input, pds-textarea) {
  --pds-input-border-radius: 0;
  --pds-input-border-color: var(--mc-line-strong);
  --pds-input-border-color-hover: var(--mc-ink);
  --pds-input-background: #fff;
  --pds-input-font: 400 17px / 1.4 var(--mc-sans);
  --pds-input-text-color: var(--mc-ink);
  --pds-input-placeholder-color: var(--mc-ink-faint);
  --pds-input-error-background: #fff;
  --pds-input-error-border: var(--mc-flame);
  --pds-input-error-color: #b3290e;
  --pds-input-field-min-height: 48px;
  --pine-input-color-background-danger: #fff;
}

.mc-checkout [data-mc-checkout-form] pds-select {
  --pds-select-border-radius: 0;
  --pds-select-border-radius-start-start: 0;
  --pds-select-border-radius-start-end: 0;
  --pds-select-border-radius-end-start: 0;
  --pds-select-border-radius-end-end: 0;
  --pds-select-background: #fff;
  --pds-select-min-height: 48px;
  --pine-select-color-background-danger: #fff;
}

.mc-checkout [data-mc-checkout-form] pds-button {
  --pds-button-border-radius: 0;
  --pds-button-border-radius-start-start: 0;
  --pds-button-border-radius-start-end: 0;
  --pds-button-border-radius-end-start: 0;
  --pds-button-border-radius-end-end: 0;
  --pds-button-min-height: 52px;
}

/* Kajabi's custom fields (the "not medical advice" line) come as Pine's
   textarea, which reads other variables than the inputs do, and on
   Kajabi it arrived with round corners and no padding: square here, with
   the inputs' padding, border and type. */
.mc-checkout [data-mc-checkout-form] pds-textarea {
  --pine-border-radius-100: 0;
  --pine-border-radius-md: 0;
  --pine-border-interactive-default: 1px solid var(--mc-line-strong);
  --spacing-padding-block-field: 11px;
  --spacing-padding-inline-field: 12px;
  --spacing-margin-block-end-label: 8px;
  --spacing-margin-block-start-helper-message: 4px;
  --color-background: #fff;
  --color-border-default: var(--mc-line-strong);
  --color-border-hover: var(--mc-ink);
  --color-border-error: var(--mc-flame);
  --color-error-default: #b3290e;
  --color-placeholder-default: var(--mc-ink-faint);
  --font-size-field: 17px;
  --line-height-field: 1.4;
}

/* A choice of one stays round, beside the square checks. */
.mc-checkout [data-mc-checkout-form] pds-radio {
  --pine-border-radius-full: 9999px;
}

/* The race red takes ink lettering (white on it is 3.5:1). */
.mc-checkout [data-mc-checkout-form] pds-button:is([variant="primary"], [variant="accent"]) {
  --pds-button-color-text-default: #16201a;
}

/* The same, for anything in it that isn't Pine's: its own fields,
   pictures and buttons, square and in Aspekta. */
.mc-checkout [data-mc-checkout-form] :is(input, select, textarea, button) {
  font-family: inherit;
  border-radius: 0;
}

.mc-checkout [data-mc-checkout-form] :is(h1, h2, h3, h4, h5, h6, p, span, label, a, strong, b, small, li, dt, dd, legend, td, th):not([class*="icon"]):not([class*="fa-"]) {
  font-family: var(--mc-sans) !important;
}

.mc-checkout [data-mc-checkout-form] img {
  border-radius: 0 !important;
}

/* Stripe's card field: its box is on the page (the insides are Stripe's). */
.mc-checkout [data-mc-checkout-form] .StripeElement {
  border-color: var(--mc-line-strong) !important;
  border-radius: 0 !important;
}

/* Waiting for the box: dimmed, and a press anywhere on it points at the
   box (scripts/terms.js). */
.mc-checkout__lock {
  display: none;
}

[data-mc-terms-lock]:not([data-open]) .kjb-embedded-checkout {
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
}

[data-mc-terms-lock]:not([data-open]) .mc-checkout__lock {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: not-allowed;
}

/* ── The checkout, on one screen ── the Checkout section's other layout,
   for a buyer the main site has sold already: the tier's face, as the
   Offer section draws it, carrying the label, the heading and the price,
   beside the terms and Kajabi's form on paper. Two halves a screen tall
   from a laptop up, the face holding still while a long form goes by; on
   a phone the face is a band over the form. */
.mc-screen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
  .mc-screen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: max(640px, calc(100svh - var(--mc-header-h)));
  }

  /* The face grows rather than cut its words off on a short screen. */
  .mc-screen .mc-offer__face {
    height: auto;
    min-height: max(560px, calc(100svh - var(--mc-header-h)));
    gap: 32px;
  }

  .mc-screen .mc-offer__numeral {
    font-size: clamp(120px, min(20vw, 34svh), 320px);
  }
}

/* The words take the face's own colour, so the soft ink and the hairline
   turn light with it on the ink face and over a photo. */
.mc-screen .mc-offer__face:is(.mc-offer__face--ink, .mc-offer__face--photo) {
  --mc-ink: var(--mc-light);
  --mc-ink-soft: var(--mc-light-soft);
  --mc-line: var(--mc-light-line);
}

/* Over a photo the words sit mid-face too, so the shade doesn't clear there. */
.mc-screen .mc-offer__face--photo::after {
  background: linear-gradient(180deg, rgba(13, 18, 15, 0.55), rgba(13, 18, 15, 0.42) 45%, rgba(13, 18, 15, 0.6));
}

.mc-screen__words {
  max-width: 36rem;
}

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

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

.mc-screen__text {
  margin-top: 16px;
  max-width: 32em;
  color: var(--mc-ink-soft);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.45;
}

.mc-screen .mc-screen__price {
  margin-top: 28px;
  padding-bottom: 0;
}

/* The form's side, on paper: the heading, the box, the form. Centred in
   its half while it fits, from the top once it's longer. */
.mc-screen__side {
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 24px var(--mc-margin) 40px;
}

.mc-screen__inner {
  width: min(100%, 38rem);
}

.mc-screen .mc-terms {
  margin-top: 14px;
}

.mc-screen .mc-checkout__form {
  margin-top: 14px;
}

@media (min-width: 1024px) {
  .mc-screen__side {
    padding: clamp(20px, 3.5svh, 40px) clamp(24px, 2.5vw, 56px);
  }
}

/* On a phone and a tablet, the face is a band over the form: the name,
   the words, and the price with a smaller numeral beside it. */
@media (max-width: 1023px) {
  .mc-screen .mc-offer__face {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0 16px;
    aspect-ratio: auto;
    padding: 18px var(--mc-margin) 16px;
  }

  .mc-screen .mc-screen__words {
    display: contents;
  }

  .mc-screen .mc-offer__name,
  .mc-screen .mc-screen__words > * {
    grid-column: 1 / -1;
  }

  .mc-screen .mc-offer__name {
    font-size: 24px;
  }

  .mc-screen .mc-screen__words > :first-child {
    margin-top: 20px;
  }

  .mc-screen .mc-screen__title {
    font-size: clamp(26px, 6.6vw, 40px);
    line-height: 1.02;
  }

  .mc-screen .mc-screen__words > .mc-screen__price {
    grid-column: 1;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px 12px;
    margin-top: 16px;
    padding-block: 12px 0;
  }

  .mc-screen .mc-screen__price .mc-figure {
    font-size: 44px;
  }

  .mc-screen .mc-offer__numeral {
    grid-column: 2;
    font-size: clamp(72px, 22vw, 112px);
  }
}

/* ── The 12 weeks ── the launch page's week list: the label in the
   serif, small, and the week's subject beside it. The label is the
   bold start of each line in the editor, hung in front of it. */
.mc-weeks__title {
  margin-bottom: 8px;
}

.mc-weeks + .mc-weeks__title {
  margin-top: 40px;
}

.mc-weeks :is(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mc-weeks li {
  margin: 0;
  padding: 10px 0 10px calc(4.5 * 16px + 12px);
  text-indent: calc(-4.5 * 16px - 12px);
  border-top: 1px solid var(--mc-line);
}

.mc-weeks li:last-child {
  border-bottom: 1px solid var(--mc-line);
}

.mc-weeks li > :is(strong, b):first-child {
  display: inline-block;
  width: calc(4.5 * 16px + 12px);
  text-indent: 0;
  white-space: nowrap;
  font-family: var(--mc-serif);
  font-size: 14px;
  font-weight: 400;
  font-feature-settings: "lnum" 1, "tnum" 1;
  letter-spacing: 0;
  line-height: 0;
  color: var(--mc-ink-soft);
}

.mc-weeks li > p {
  display: inline;
  margin: 0;
}

/* ── How it works ── the kit's numbered list: the number big, the
   step in the serif, what happens in the lead. */
.mc-steps__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mc-steps__list > li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  padding-block: 20px 36px;
  border-top: 1px solid var(--mc-line);
}

.mc-steps__n {
  font-size: clamp(34px, 3.5vw, 50px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-feature-settings: "tnum" 1;
}

/* The launch page's h3s carry the site's heading tracking, -0.02em. */
.mc-steps__list .mc-sub {
  letter-spacing: -0.02em;
}

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

@media (min-width: 768px) {
  .mc-steps__list > li {
    grid-template-columns: 96px minmax(0, 1fr);
  }
}

/* ── The receipts ── the archive rows: what it was, and the time big
   in the serif. A row's photograph shows on hover, pinned to the
   page's middle; hidden where there is no hover to show it. */
.mc-figures__text {
  margin-top: 16px;
}

.mc-receipts {
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}

.mc-receipts > li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 16px;
  padding-block: 16px 14px;
  border-top: 1px solid var(--mc-line);
}

.mc-receipts > li:last-child {
  border-bottom: 1px solid var(--mc-line);
}

.mc-receipts > li:hover {
  z-index: 10;
}

.mc-receipts__n {
  font-size: clamp(48px, 7vw, 100px);
  letter-spacing: -0.03em;
}

.mc-receipts__preview {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 345px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--mc-dur-link) var(--mc-ease);
}

.mc-receipts > li:hover .mc-receipts__preview {
  opacity: 1;
}

@media (hover: none) {
  .mc-receipts__preview {
    display: none;
  }
}

/* ── The tiers ── the website's cards (the library's), four across
   here from a wide screen, the last face in the race red, and the
   faces taller from a tablet up. */
.mc-landing .mc-tiers .mc-cards {
  margin-top: 40px;
}

.mc-card__face--3 {
  background: var(--mc-flame);
  color: #16201a;
}

/* The names as the launch page sets them: no measure, the heading
   tracking. */
.mc-landing .mc-tiers .mc-card__name {
  max-width: none;
  letter-spacing: -0.02em;
}

/* Not links here: the photographs hold still. */
.mc-landing .mc-tiers .mc-card__face:hover > img {
  transform: none;
}

.mc-card__price {
  align-self: stretch;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.mc-card__price .mc-figure {
  font-size: clamp(34px, 3vw, 44px);
}

.mc-card__price s {
  margin-left: 0.35em;
  font-size: 0.5em;
  color: var(--mc-ink-soft);
}

.mc-tiers__under {
  margin-top: 24px;
}

@media (min-width: 768px) {
  .mc-landing .mc-tiers .mc-card__face {
    aspect-ratio: 4 / 5;
  }
}

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

  .mc-landing .mc-tiers .mc-card {
    border-right: 1px solid var(--mc-line);
  }

  .mc-landing .mc-tiers .mc-card:last-child {
    border-right: 0;
  }
}

/* ── In every tier ── tiles, three across from a laptop up, each
   numbered in the serif. The list is the editor's own, so the number
   hangs in front of its first line rather than taking a column. */
.mc-tiles {
  margin-top: 40px;
}

.mc-tiles__title {
  margin-top: 40px;
}

.mc-tiles__title + .mc-tiles {
  margin-top: 24px;
}

.mc-tiles :is(ul, ol) {
  display: grid;
  gap: 0 var(--mc-gutter);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: mc-tile;
}

.mc-tiles li {
  margin: 0;
  padding: 18px 0 28px calc(2.4 * 16px + 12px);
  text-indent: calc(-2.4 * 16px - 12px);
  border-top: 1px solid var(--mc-line);
  counter-increment: mc-tile;
}

.mc-tiles li::before {
  content: counter(mc-tile, decimal-leading-zero);
  display: inline-block;
  width: calc(2.4 * 16px + 12px);
  text-indent: 0;
  font-family: var(--mc-serif);
  font-size: 14px;
  font-feature-settings: "lnum" 1, "tnum" 1;
  letter-spacing: 0;
  color: var(--mc-ink-soft);
}

.mc-tiles li > p {
  display: inline;
  margin: 0;
}

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

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

/* ── For you / not for you ── two halves, edge to edge: the brand's
   dark green for yes, the race orange for no, each list centred in
   its half. Stacked on a phone, green first. They carry their own
   space; straight under the dark green they sit flush against it. */
.mc-landing .mc-lists--halves {
  margin-top: var(--mc-section);
}

.mc-landing .mc-ground--dark + .mc-lists--halves,
.mc-landing :has(> .mc-ground--dark) + :has(> .mc-lists--halves) > .mc-lists--halves {
  margin-top: 0;
}

.mc-halves {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

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

.mc-half {
  display: grid;
  place-items: center;
  padding: clamp(64px, 8vw, 128px) var(--mc-margin);
  color: var(--mc-ink);
}

.mc-half__inner {
  width: min(100%, 34rem);
}

.mc-half__inner > .mc-fit {
  margin-top: 28px;
}

/* The quiz's green, its glow behind the list. */
.mc-half--green {
  --mc-ink: #f4f1ea;
  --mc-line: rgba(244, 241, 234, 0.24);
  background:
    radial-gradient(90% 80% at 50% 45%, #2c4232 0%, transparent 70%),
    linear-gradient(168deg, #20301c 0%, #16201a 100%);
}

/* Orange takes ink lettering, as the red buttons do. */
.mc-half--orange {
  --mc-ink: #16201a;
  --mc-line: rgba(22, 32, 26, 0.26);
  background: var(--mc-flame);
}

.mc-half ::selection {
  background: #16201a;
  color: #f4f1ea;
}

.mc-half--green ::selection {
  background: #f4f1ea;
  color: #16201a;
}

.mc-fit :is(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mc-fit li {
  margin: 0;
  padding: 14px 0 14px calc(1.4em + 10px);
  text-indent: calc(-1.4em - 10px);
  border-top: 1px solid var(--mc-line);
}

.mc-fit li:last-child {
  border-bottom: 1px solid var(--mc-line);
}

/* No height of its own, so the serif mark never makes its line
   taller than the sans beside it. */
.mc-fit li::before {
  display: inline-block;
  width: calc(1.4em + 10px);
  text-indent: 0;
  font-family: var(--mc-serif);
  line-height: 0;
}

.mc-fit:is(.mc-fit--green, .mc-fit--plus) li::before {
  content: "+";
  content: "+" / "";
}

.mc-fit--orange li::before {
  content: "\2013";
  content: "\2013" / "";
}

.mc-fit li > p {
  display: inline;
  margin: 0;
}

/* ── Questions ── each opens under itself. The plus is two bars; one
   turns to make the minus. */
.mc-qa {
  border-top: 1px solid var(--mc-line);
}

.mc-qa:last-child {
  border-bottom: 1px solid var(--mc-line);
}

.mc-qa > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 64px;
  padding-block: 16px;
  list-style: none;
  cursor: pointer;
}

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

.mc-plus {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}

.mc-plus::before,
.mc-plus::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: currentColor;
}

.mc-plus::after {
  transform: rotate(90deg);
  transition: transform var(--mc-dur-link) var(--mc-ease);
}

details[open] > summary .mc-plus::after {
  transform: rotate(0deg);
}

.mc-qa__a {
  padding: 0 40px 24px 0;
  max-width: 40em;
}

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

.mc-qa__a a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* ── A last word ── the heading as big as anything, the words on the
   right; as the last call, the buttons as the kit's bands. */
.mc-cta__grid {
  margin-top: clamp(40px, 5vw, 72px);
}

.mc-cta--bands .mc-cta__grid {
  margin-top: 32px;
}

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

/* The bands close the section, on any ground. */
.mc-landing .mc-cta--bands.mc-section {
  padding-bottom: 0;
}

.mc-bands {
  margin-top: clamp(48px, 7vw, 96px);
}

.mc-bands > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: clamp(104px, 10.5vw, 152px);
  padding-inline: var(--mc-margin);
  background: var(--mc-band);
  color: #16201a;
  font-size: clamp(32px, 3.5vw, 50px);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.mc-bands > a + a {
  border-top: 1px solid rgba(22, 32, 26, 0.16);
}

.mc .mc-bands > a:hover {
  opacity: 1;
}

.mc-cta__small {
  padding-top: 24px;
}

/* ── The terms, before the checkout ── the kit's square box, and the
   words beside it at the small size; "Terms and Conditions" underlined,
   opening the terms over the page. */
.mc-terms {
  margin-top: 24px;
}

.mc-tiers__terms .mc-terms {
  margin-top: 24px;
}

.mc-check.mc-terms__row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.45;
  cursor: default;
}

.mc-terms__row input[type="checkbox"] {
  margin-top: 1px;
}

.mc-terms__row label {
  cursor: pointer;
}

.mc-terms__open {
  padding: 0;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.mc-terms__note {
  margin-top: 8px;
  padding-left: 30px;
  color: #b3290c;
}

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

/* The terms over the page: the launch page's pop-up, paper on the
   blurred page, the heading and "Close" held at the top while the
   terms scroll, and "I agree" at the foot. */
.mc-terms-dialog {
  width: min(640px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--mc-paper);
  color: var(--mc-ink);
}

.mc-terms-dialog::backdrop {
  background: rgba(13, 18, 15, 0.32);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

@media (prefers-reduced-motion: no-preference) {
  .mc-terms-dialog[open] {
    animation: mc-cross 500ms cubic-bezier(0.44, 0, 0.56, 1) both;
  }
}

@keyframes mc-cross {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* The page holds still behind the open terms. */
html:has(.mc-terms-dialog[open]) {
  overflow: hidden;
  scrollbar-gutter: stable;
}

.mc-terms-dialog__head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(24px, 3.5vw, 40px) clamp(24px, 3.5vw, 40px) 16px;
  border-bottom: 1px solid var(--mc-line);
  background: var(--mc-paper);
}

.mc-terms-dialog__close {
  flex: none;
  padding: 0;
  border: 0;
  color: var(--mc-ink-soft);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.mc-terms-dialog__body {
  max-width: none;
  padding: 24px clamp(24px, 3.5vw, 40px);
  font-size: 15px;
  line-height: 1.55;
}

.mc-terms-dialog__body h3 {
  font-family: var(--mc-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
}

.mc-terms-dialog__foot {
  position: sticky;
  bottom: 0;
  padding: 16px clamp(24px, 3.5vw, 40px) clamp(24px, 3.5vw, 40px);
  border-top: 1px solid var(--mc-line);
  background: var(--mc-paper);
}

/* ── Quotes ── in the serif, between hairlines. */
.mc-quotes__row {
  display: grid;
  gap: 0 var(--mc-gutter);
  margin-top: 40px;
}

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

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

.mc-quote {
  display: grid;
  align-content: start;
  gap: 16px;
  margin: 0;
  padding-block: 18px 28px;
  border-top: 1px solid var(--mc-line);
}

.mc-quote__words::before {
  content: "\201c";
}

.mc-quote__words::after {
  content: "\201d";
}

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