/* ============================================================
   Medicon Applications — site styles
   ============================================================
   Sections are kept in file order:
     1.  Reset / base
     2.  Primitives (.ps-*, buttons, eyebrows, spec, arrow-link)
     3.  Layout helpers
     4.  Phone / app glyph
     5.  Marquee
     6.  Header / nav
     7.  Hero
     8.  Index
     9.  Featured
    10.  Writing
    11.  Stats
    12.  Practice
    13.  Footer
    14.  Single (app + article) — light coverage
    15.  Responsive (≤1024, ≤768)
   ============================================================ */

/* ---------- 1. Reset / base ---------- */
html, body { margin: 0; padding: 0; background: var(--ps-white); }
body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
*, *::before, *::after { box-sizing: border-box; }
img, svg { max-width: 100%; display: block; }
::selection { background: #000; color: #fff; }

h1, h2, h3, h4, h5, h6, p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

/* ---------- 2. Primitives ---------- */

.ps-display {
  font-family: var(--font-display);
  font-weight: var(--fw-thin);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
}
.ps-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--t-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tr-h1);
}
.ps-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--t-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tr-h2);
}
.ps-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--t-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tr-h3);
}
.ps-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--t-h4);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-h4);
}
.ps-lead {
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  font-weight: var(--fw-light);
}
.ps-eyebrow {
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  font-weight: var(--fw-medium);
}

.ps-rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.ps-rule--dark { border-top-color: rgba(255,255,255,0.15); }

/* ---------- BUTTONS ---------- */
.ps-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 14px 28px;
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: var(--r-none);
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-ps),
              color    var(--dur-fast) var(--ease-ps),
              border-color var(--dur-fast) var(--ease-ps);
}

.ps-btn--primary {
  background: var(--ps-black);
  color: var(--ps-white);
  border-color: var(--ps-black);
}
.ps-btn--primary:hover {
  background: var(--ps-near-black);
  border-color: var(--ps-near-black);
}

.ps-btn--inverse {
  background: var(--ps-white);
  color: var(--ps-black);
  border-color: var(--ps-white);
}
.ps-btn--inverse:hover {
  background: var(--ps-near-white);
  border-color: var(--ps-near-white);
}

.ps-btn--outline {
  background: transparent;
  color: currentColor;
  border-color: currentColor;
}
.ps-btn--outline:hover { background: rgba(0,0,0,0.04); }
.mc-dark .ps-btn--outline { border-color: rgba(255,255,255,0.5); color: #fff; }
.mc-dark .ps-btn--outline:hover { background: rgba(255,255,255,0.06); }

.ps-btn--ghost {
  background: transparent;
  color: currentColor;
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}
.ps-btn--ghost:hover { opacity: 0.6; }

.ps-btn[disabled], .ps-btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

/* ---------- Spec block ---------- */
.ps-spec {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  min-width: 0;
}
.ps-spec__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  color: var(--fg-muted);
  font-weight: var(--fw-medium);
  margin-bottom: 12px;
}
.ps-spec__value {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 0.95;
  font-weight: var(--fw-light);
  letter-spacing: -0.022em;
}
.ps-spec__unit {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  color: var(--fg-muted);
  margin-top: 8px;
  font-weight: var(--fw-medium);
}
.mc-dark .ps-spec { border-top-color: rgba(255,255,255,0.22); }
.mc-dark .ps-spec__label, .mc-dark .ps-spec__unit { color: rgba(255,255,255,0.55); }
/* mc_spec()'s $dark argument emitted this class, which had no rule anywhere —
   it only ever worked because its one caller sat inside .mc-dark. */
.ps-spec--dark { border-top-color: rgba(255,255,255,0.22); }
.ps-spec--dark .ps-spec__label,
.ps-spec--dark .ps-spec__unit { color: rgba(255,255,255,0.55); }

/* ---------- Arrow link (gap-on-hover) ---------- */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.arrow-link__icon {
  width: 14px; height: 14px; flex: 0 0 14px;
  transition: transform var(--dur-med) var(--ease-ps);
}
.arrow-link:hover .arrow-link__icon { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) {
  .arrow-link__icon { transition: none; }
  .arrow-link:hover .arrow-link__icon { transform: none; }
}

/* ---------- Search field ---------- */
.ps-input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: var(--fw-light);
  color: var(--fg);
  background: var(--ps-white);
  border: 1px solid var(--ps-line-light);
  border-radius: var(--r-none);
  padding: 13px 16px;
  min-height: 48px;
}
.ps-input::placeholder { color: var(--ps-grey-700); opacity: 1; }
.ps-searchform { display: flex; gap: 8px; }

/* ---------- Focus ring ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
/* Anchor targets are scrolled clear of the fixed nav. */
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

/* ---------- 3. Layout helpers ---------- */
.ps-container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--page-gutter-desktop);
}

.mc-section { padding: 96px var(--page-gutter-desktop); }
.mc-section--tall { padding: 128px var(--page-gutter-desktop); }
.mc-section--xtall { padding: 160px var(--page-gutter-desktop); }
.mc-section--dark { background: var(--ps-black); color: #fff; }
.mc-section--light { background: var(--ps-white); color: #000; }
.mc-section--paper { background: var(--ps-near-white); color: #000; }

.mc-dark { color: #fff; }

/* Hide accessibly */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  clip-path: inset(50%);
  border: 0;
  word-wrap: normal !important;
}
.screen-reader-text:focus,
.screen-reader-text:focus-visible {
  position: fixed !important;
  top: 8px; left: 8px;
  width: auto; height: auto;
  margin: 0; padding: 12px 20px;
  overflow: visible;
  clip: auto;
  clip-path: none;
  z-index: 100;
  background: var(--ps-black);
  color: var(--ps-white);
  font-size: 14px;
  text-decoration: none;
}

/* ---------- 4. Phone placeholder + App glyph ---------- */
.phone-ph {
  position: relative;
  background: linear-gradient(180deg, #1A1A1A 0%, #232323 60%, #2E2E2E 100%);
  color: rgba(255,255,255,0.45);
  overflow: hidden;
}
.phone-ph--light {
  background: linear-gradient(180deg, #ECECEA 0%, #DCDCDA 60%, #C9C9C7 100%);
  color: rgba(0,0,0,0.4);
}
.phone-ph--paper {
  background: #F4F4F4;
  color: rgba(0,0,0,0.45);
}
.phone-ph__label {
  position: absolute;
  bottom: 18px; left: 20px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
}
.phone-ph__rule {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255,255,255,0.12);
}
.phone-ph--light .phone-ph__rule,
.phone-ph--paper .phone-ph__rule { background: rgba(0,0,0,0.10); }

.phone-ph__stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-silhouette {
  position: relative;
  width: 38%;
  max-width: 240px;
  min-width: 140px;
  aspect-ratio: 9 / 19;
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: 28px;
  background: #0A0A0A;
  padding: 6px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.04);
}
.phone-silhouette--light {
  border-color: rgba(0,0,0,0.28);
  background: #FAFAFA;
  box-shadow: 0 30px 80px rgba(0,0,0,0.18), inset 0 0 0 1px rgba(0,0,0,0.04);
}
.phone-silhouette__notch {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  width: 80px; height: 22px;
  background: #000;
  border-radius: 12px;
}
.phone-silhouette--light .phone-silhouette__notch { background: #1A1A1A; }

.phone-silhouette__screen {
  position: absolute;
  inset: 6px;
  border-radius: 22px;
  background: #000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.phone-silhouette--light .phone-silhouette__screen { background: #fff; }
.phone-silhouette__screen img,
.phone-silhouette__screen .mc-mock { width: 100%; height: 100%; display: block; }
.phone-silhouette__screen img { object-fit: cover; object-position: top center; }

/* App glyph tile */
.mc-glyph {
  width: 92px;
  height: 92px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 39px;
  letter-spacing: -0.04em;
  line-height: 1;
  flex: 0 0 92px;
}
.mc-glyph--dark { background: #000; color: #fff; }
.mc-glyph--light {
  background: #fff;
  color: #000;
  border: 1px solid var(--ps-line-light);
  box-shadow: none;
}
.mc-glyph--image {
  padding: 0;
  overflow: hidden;
  border: none;
  /* Hairline at the same weight as .mc-row's rule, so icons with white corners
     do not dissolve into the white section. An inset box-shadow would paint
     BELOW the opaque icon and never be seen; the tile is not focusable, so an
     inward outline cannot clash with the focus ring. */
  outline: 1px solid rgba(0,0,0,0.08);
  outline-offset: -1px;
}
.mc-glyph--image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}

/* ---------- 5. Marquee ---------- */
.mc-marquee {
  background: #000;
  color: #fff;
  border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  overflow: hidden;
  padding: 18px 0;
  white-space: nowrap;
}
.mc-marquee__track {
  display: inline-flex;
  gap: 64px;
  animation: mc-marquee 60s linear infinite;
  padding-left: 64px;
}
.mc-marquee__set {
  display: inline-flex;
  gap: 64px;
  align-items: center;
}
.mc-marquee__item {
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: rgba(255,255,255,0.65);
  display: inline-flex;
  align-items: center;
  gap: 64px;
}
.mc-marquee__star {
  color: rgba(255,255,255,0.5);
  font-size: 10px;
}
@keyframes mc-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .mc-marquee__track { animation: none; }
}

/* ---------- 6. Header / Nav ---------- */
/* The nav is light-by-default and solid from the first frame.
 *
 * It used to be white-on-transparent, which worked only because a black hero
 * was the first section on the homepage. Everywhere else — every app page,
 * page, archive, search result and 404, all of which are .mc-single on #fff —
 * the nav was already invisible at scroll 0. Since 1.4.0 the homepage opens on
 * the white Index too, so the light treatment is now the only correct default.
 *
 * Colours are routed through custom properties so no descendant hardcodes one.
 * .is-scrolled only reveals the hairline: a 64px black bar clamped over a white
 * editorial page was the heaviest element on the site. */
.mc-nav {
  --nav-fg:     var(--ps-black);
  --nav-fg-dim: var(--ps-grey-700);
  --nav-bg:     var(--ps-white);
  --nav-line:   transparent;

  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  color: var(--nav-fg);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-line);
  transition: background var(--dur-med) var(--ease-ps),
              border-color var(--dur-med) var(--ease-ps),
              color var(--dur-med) var(--ease-ps);
}
.mc-nav.is-scrolled { --nav-line: var(--ps-line-light); }

/* Dormant. Kept so putting the nav over a dark landing section again is a
 * one-class change rather than a rewrite. */
.mc-nav--over-dark {
  --nav-fg:     #fff;
  --nav-fg-dim: rgba(255,255,255,0.70);
  --nav-bg:     transparent;
}
.mc-nav--over-dark.is-scrolled {
  --nav-bg:   rgba(0,0,0,0.78);
  --nav-line: rgba(255,255,255,0.10);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
}
.mc-nav__inner {
  max-width: var(--container);
  margin: 0 auto;
  height: var(--nav-h);
  padding: 0 var(--page-gutter-desktop);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.mc-nav__wordmark {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: inherit;
  text-decoration: none;
}
.mc-nav__wordmark-text {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
}
.mc-nav__primary {
  display: inline-flex;
  align-items: center;
  gap: 36px;
  justify-self: center;
}
.mc-nav__primary a {
  font-size: 13px;
  color: inherit;
  text-decoration: none;
  letter-spacing: 0.02em;
  opacity: 0.9;
}
.mc-nav__primary a:hover { opacity: 1; }
.mc-nav__right {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  justify-self: end;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--nav-fg-dim);
}
.mc-nav__locale { opacity: 0.8; }
.mc-nav__search {
  display: inline-flex;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
}
.mc-nav__toggle {
  display: none;
  background: none;
  border: 0;
  color: inherit;
  padding: 8px;
  margin: -8px;
  cursor: pointer;
}

/* Mobile slide-over */
.mc-nav__sheet {
  display: none;
  position: fixed;
  inset: 0;
  background: #000;
  color: #fff;
  z-index: 60;
  padding: 80px 24px 24px;
  flex-direction: column;
  gap: 32px;
}
.mc-nav__sheet a {
  color: #fff;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 28px;
  letter-spacing: -0.014em;
}
.mc-nav__sheet-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: none;
  border: 0;
  color: #fff;
  padding: 8px;
  cursor: pointer;
}
.mc-nav__sheet.is-open { display: flex; }
body.mc-nav-open { overflow: hidden; }

/* ---------- 7. Hero ---------- */
.mc-hero {
  background: #000;
  color: #fff;
  min-height: 100vh;
  padding-top: var(--nav-h);
  position: relative;
  overflow: hidden;
}
.mc-hero__eyebrows {
  max-width: var(--container);
  margin: 0 auto;
  padding: 48px var(--page-gutter-desktop) 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: rgba(255,255,255,0.6);
}
.mc-hero__head {
  max-width: var(--container);
  margin: 0 auto;
  padding: 120px var(--page-gutter-desktop) 0;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 80px;
  align-items: end;
}
.mc-hero__headline {
  font-family: var(--font-display);
  font-weight: var(--fw-thin);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  margin: 0;
}
.mc-hero__headline em {
  font-style: italic;
  font-weight: var(--fw-thin);
  color: rgba(255,255,255,0.62);
}
.mc-hero__lede {
  font-size: 19px;
  line-height: 1.45;
  font-weight: var(--fw-light);
  color: rgba(255,255,255,0.78);
  max-width: 420px;
}
.mc-hero__lede-wrap { padding-bottom: 28px; }
.mc-hero__ctas {
  display: flex;
  gap: 12px;
  margin-top: 36px;
  flex-wrap: wrap;
}

.mc-hero__feature {
  max-width: var(--container);
  margin: 120px auto 0;
  padding: 0 var(--page-gutter-desktop) 96px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
}
.mc-hero__phone-wrap {
  position: relative;
  height: 520px;
}
.mc-hero__phone-wrap .phone-ph {
  position: absolute;
  inset: 0;
}
.mc-hero__feature-eyebrow {
  color: rgba(255,255,255,0.55);
  margin-bottom: 18px;
}
.mc-hero__feature-title {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 56px;
  line-height: 1.02;
  letter-spacing: -0.018em;
  margin: 0;
}
.mc-hero__feature-lede {
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.5;
  color: rgba(255,255,255,0.7);
  max-width: 460px;
  font-weight: var(--fw-light);
}
.mc-hero__specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
  max-width: 520px;
}
.mc-hero__cta-row {
  margin-top: 40px;
}

/* ---------- Inline mock screens (CliniCalc, Spíra) ---------- */
.mc-mock {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 32px 14px 14px;
  font-family: var(--font-display);
}
.mc-mock--dark { background: #0A0A0A; color: #fff; }
.mc-mock--light { background: #FAFAFA; color: #000; }
.mc-mock__eyebrow {
  font-size: 9px;
  opacity: 0.5;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.mc-mock__title {
  font-size: 18px;
  font-weight: var(--fw-light);
  margin-top: 4px;
  letter-spacing: -0.02em;
}
.mc-mock__rows {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mc-mock__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 8px;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,0.08);
}
.mc-mock__row--on { background: rgba(255,255,255,0.06); }
.mc-mock__row span:last-child { opacity: 0.3; }
.mc-mock__row--on span:last-child { opacity: 1; }
.mc-mock__footer {
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 10px;
}
.mc-mock__footer-eyebrow {
  font-size: 7px;
  opacity: 0.5;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.mc-mock__score {
  font-size: 36px;
  font-weight: var(--fw-thin);
  letter-spacing: -0.04em;
  line-height: 1;
}

/* Spíra dial */
.mc-dial {
  margin-top: 14px;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
}
.mc-dial svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mc-dial__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mc-dial__label {
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.5;
}
.mc-dial__value {
  font-size: 36px;
  font-weight: var(--fw-thin);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-top: 4px;
}
.mc-dial__caption {
  font-size: 7px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-top: 4px;
}
.mc-mock__bottom-grid {
  margin-top: auto;
  border-top: 1px solid rgba(0,0,0,0.08);
  padding-top: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.mc-mock__bottom-cell-label {
  font-size: 6px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.5;
}
.mc-mock__bottom-cell-value { font-size: 9px; margin-top: 2px; }

/* ---------- Store badges (Apple, Google) ----------
   Apple Marketing Guideline + Google Play Brand Guideline both specify a
   small "Download on the" / "Get it on" line ABOVE the larger store name.
   We honour that proportion in a monochrome outline treatment so the two
   read as a single deliberate badge system. */
.mc-storebadge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  min-height: 52px;
  background: transparent;
  border: 1px solid rgba(0,0,0,0.4);
  color: #000;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-ps),
              border-color var(--dur-fast) var(--ease-ps);
  vertical-align: middle;
}
.mc-storebadge:hover { background: rgba(0,0,0,0.04); }
.mc-storebadge--apple { border-color: var(--ps-black); }

.mc-storebadge--dark {
  border-color: rgba(255,255,255,0.4);
  color: #fff;
}
.mc-storebadge--dark:hover { background: rgba(255,255,255,0.06); }

.mc-storebadge__icon {
  flex: 0 0 22px;
  display: block;
}

.mc-storebadge__copy {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  text-align: left;
}

.mc-storebadge__pre {
  display: block;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  opacity: 0.72;
  line-height: 1;
}

.mc-storebadge__label {
  display: block;
  font-size: 16px;
  font-weight: var(--fw-light);
  letter-spacing: 0.01em;
  margin-top: 4px;
  line-height: 1;
  font-family: var(--font-display);
}

/* Row container — emits horizontal gap between badges when both are shown. */
.mc-storebadge-row {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* Legacy class — kept so any in-flight markup doesn't break during rollout.
   New code should use .mc-storebadge / .mc-storebadge--dark. */

/* Platform row */
.mc-platforms {
  display: inline-flex;
  gap: 14px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
  align-items: center;
}
.mc-platforms--dark { color: rgba(255,255,255,0.65); }
.mc-platforms__sep { opacity: 0.5; }

/* ---------- 8. The Index ---------- */
.mc-index {
  background: #fff;
  color: #000;
  /* The Index opens the page, so it owns the clearance under the fixed nav —
     same convention as .mc-hero and .mc-single. Putting it on the section
     rather than the inner keeps working if anything is inserted above. */
  padding-top: var(--nav-h);
}
.mc-index__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 96px var(--page-gutter-desktop) 96px;
}
.mc-index__header {
  /* Two columns, headline left, lede + filters right. The header's height is
     then max(left, right) instead of their sum, which is what keeps the first
     application row near the fold now that the Index opens the page. */
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 72px;
  align-items: end;
  /* Was 56px. The catalogue head row below costs 31px; taking 24px back here
     means the first application row moves down by 7px, not 31. */
  margin-bottom: 32px;
}
.mc-index__eyebrow {
  color: var(--ps-grey-700);
  margin-bottom: 22px;
}
.mc-index__title {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--t-display-1);
  line-height: 0.98;
  letter-spacing: -0.026em;
  margin: 0;
  text-wrap: balance;
}
.mc-index__title em {
  color: var(--ps-grey-500);
  font-style: italic;
}
.mc-index__intro {
  padding-bottom: 6px;
}
.mc-index__lede {
  font-size: 18px;
  line-height: 1.5;
  color: var(--ps-grey-700);
  max-width: 52ch;
  font-weight: var(--fw-light);
}
.mc-index__strap {
  margin-top: 16px;
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ps-grey-700);
  font-weight: var(--fw-light);
}
.mc-index__filters {
  margin-top: 32px;
  display: flex;
  gap: 18px;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--ps-grey-700);
  flex-wrap: wrap;
}
.mc-index__filter-list {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mc-index__filter {
  color: var(--ps-grey-700);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  display: inline-block;
}
.mc-index__empty { margin-top: 48px; }
.mc-index__empty a { color: inherit; }
.mc-index__filter:hover { color: var(--ps-black); }
.mc-index__filter.is-active {
  color: var(--ps-black);
  border-bottom-color: currentColor;
}

/* Head of the catalogue. Mirrors .mc-row's grid exactly so "No." lands over the
   numeral column and the label starts on the same axis as the app titles. */
.mc-index__contents {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 48px;
  align-items: baseline;
  padding-bottom: 14px;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--ps-grey-700);
}
.mc-index__contents-label {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* App rows */
.mc-row {
  border-top: 1px solid var(--ps-line-light);
  padding: 56px 0;
  display: grid;
  /* minmax(0, 1fr): a bare 1fr track has min-width:auto, so one long unbroken
     token in the lede can blow the grid out horizontally. */
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.mc-row:last-of-type { border-bottom: 1px solid var(--ps-line-light); }
/* The index numeral is the page's signature device: it is what makes twelve
   apps read as a catalogue rather than a list. Set at .mc-row__title's own size
   so the two baselines align at every breakpoint with no per-breakpoint magic
   number, dropped by the eyebrow's line box plus its margin.

   align-self:start matters — .mc-row is align-items:center, so each numeral was
   previously centred against a row whose height is set by that app's lede
   length. Measured offsets ran across four different positions while every
   title, icon and eyebrow sat at a constant one.

   --ps-grey-500 is licensed for text >= 24px (see tokens.css); this is the use
   it was reserved for. Tabular figures are what make the left edge a rail:
   Inter's proportional figures render "11" at 15.2px and "04" at 20.9px. */
.mc-row__num {
  align-self: start;
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: var(--fw-light);
  line-height: 1;
  letter-spacing: -0.018em;
  color: var(--ps-grey-500);
  /* lining-nums, not "lining" — the latter is not a valid keyword and made the
     whole declaration invalid, silently dropping the tabular figures too. */
  font-variant-numeric: tabular-nums lining-nums;
  margin-top: 26px;
}
.mc-row__body {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 32px;
  align-items: start;
}
.mc-row__eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--ps-grey-700);
  margin-bottom: 10px;
}
.mc-row__title {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.018em;
  margin: 0;
}
/* The primary click target of the homepage. It previously had no affordance
   at all (the styles were inline on the anchor). */
.mc-row__title a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-ps);
}
.mc-row__title a:hover { border-bottom-color: currentColor; }
.mc-row__title-dash { color: var(--ps-grey-500); }
.mc-row__title-cat {
  font-style: italic;
  color: var(--ps-grey-700);
}
.mc-row__lede {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ps-grey-700);
  margin: 18px 0 0;
  max-width: 640px;
  font-weight: var(--fw-light);
}
.mc-row__meta {
  margin-top: 22px;
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}
.mc-row__meta-sep {
  width: 1px;
  height: 16px;
  background: var(--ps-line-light);
  display: inline-block;
}
.mc-row__meta-strap {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--ps-grey-700);
}
/* Store links sit in the meta strap at the strap's own size, so they add no
   row height. Black against the surrounding grey IS the affordance — eleven
   bordered badge cards would be the only boxes on a hairline page. */
.mc-row__store {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--ps-black);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color var(--dur-fast) var(--ease-ps);
}
.mc-row__store:hover { border-bottom-color: currentColor; }
.mc-row__rating {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--ps-grey-700);
}
.mc-row__rating-star {
  color: var(--ps-black);
  font-size: 12px;
  letter-spacing: 0;
}
/* --ps-grey-500 would be 3.45:1 at this size — see the note in tokens.css. */
.mc-row__rating-count { color: var(--ps-grey-700); opacity: 0.85; }

.mc-row__more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--ps-grey-700);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color var(--dur-fast) var(--ease-ps),
              border-color var(--dur-fast) var(--ease-ps);
}
.mc-row__more:hover {
  color: var(--ps-black);
  border-bottom-color: currentColor;
}
.mc-row__store + .mc-row__store { margin-left: -4px; }
.mc-row__store-icon { font-size: 12px; line-height: 1; }


/* ---------- 8b. Download band ---------- */
/* The third surface (--ps-near-white) previously belonged to .mc-featured.
   Reusing it here keeps the light / paper / black rhythm now that the featured
   spread no longer runs on the homepage. */
.mc-download {
  background: var(--ps-near-white);
  border-top: 1px solid var(--ps-line-light);
}
.mc-download__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 96px var(--page-gutter-desktop);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
}
.mc-download__title {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--t-display-2);
  line-height: 1;
  letter-spacing: -0.022em;
  margin: 0;
  max-width: 18ch;
}
.mc-download__note {
  margin-top: 16px;
  color: var(--ps-grey-700);
  font-size: 16px;
  line-height: 1.55;
  max-width: 46ch;
  font-weight: var(--fw-light);
}

/* ---------- 9. Featured (In Focus) ---------- */
.mc-featured {
  background: var(--ps-near-white);
  color: #000;
  border-top: 1px solid var(--ps-line-light);
}
.mc-featured__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 128px var(--page-gutter-desktop);
}
.mc-featured__card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border: 1px solid var(--ps-line-light);
  background: #fff;
}
.mc-featured__phone {
  position: relative;
  min-height: 680px;
}
.mc-featured__phone .phone-ph {
  position: absolute;
  inset: 0;
}
.mc-featured__content {
  padding: 64px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-left: 1px solid var(--ps-line-light);
}
.mc-featured__eyebrow { color: var(--ps-grey-500); }
.mc-featured__title {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.022em;
  margin: 24px 0 0;
}
.mc-featured__title em {
  color: var(--ps-grey-500);
  font-style: italic;
}
.mc-featured__lede {
  font-size: 17px;
  line-height: 1.5;
  color: var(--ps-grey-700);
  max-width: 480px;
  margin-top: 28px;
  font-weight: var(--fw-light);
}
.mc-featured__bullets {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ps-grey-700);
}
.mc-featured__bullets li {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: start;
}
.mc-featured__bullets li::before {
  content: "·";
  color: #000;
  margin-top: 4px;
}
.mc-featured__specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 48px;
}
.mc-featured__cta {
  margin-top: 40px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

/* ---------- 10. Writing ---------- */
.mc-writing {
  background: #000;
  color: #fff;
}
.mc-writing__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 128px var(--page-gutter-desktop);
}
.mc-writing__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 80px;
}
.mc-writing__eyebrow {
  color: rgba(255,255,255,0.5);
  margin-bottom: 22px;
}
.mc-writing__title {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--t-display-2);
  line-height: 0.96;
  letter-spacing: -0.024em;
  margin: 0;
}
.mc-writing__lede-col { color: rgba(255,255,255,0.7); padding-bottom: 12px; }
.mc-writing__lede {
  font-size: 18px;
  line-height: 1.5;
  font-weight: var(--fw-light);
  max-width: 460px;
}
.mc-writing__all {
  margin-top: 28px;
  color: #fff;
  border-bottom-color: rgba(255,255,255,0.6);
}
.mc-writing__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.mc-writing__article {
  padding: 56px 0;
}
.mc-writing__article:first-child {
  padding-right: 48px;
  border-right: 1px solid rgba(255,255,255,0.15);
}
.mc-writing__article:last-child {
  padding-left: 48px;
}
.mc-writing__meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: rgba(255,255,255,0.5);
  margin-bottom: 28px;
}
.mc-writing__art-title {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.018em;
  margin: 0;
}
.mc-writing__art-title a { color: inherit; text-decoration: none; }
.mc-writing__art-title a:hover { opacity: 0.8; }
.mc-writing__art-lede {
  margin-top: 22px;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255,255,255,0.7);
  max-width: 540px;
  font-weight: var(--fw-light);
}
.mc-writing__art-foot {
  margin-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mc-writing__reading {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: rgba(255,255,255,0.55);
}

/* ---------- 11. Stats ---------- */
.mc-stats {
  background: #000;
  color: #fff;
}
.mc-stats__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 96px var(--page-gutter-desktop) 160px;
}
.mc-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 32px;
}
/* Track count follows the number of stats actually configured, so two filled
   slots read as a deliberate pair rather than a four-up grid with holes in it. */
.mc-stats__grid--1 { grid-template-columns: 1fr; }
.mc-stats__grid--2 { grid-template-columns: repeat(2, 1fr); }
.mc-stats__grid--3 { grid-template-columns: repeat(3, 1fr); }
.mc-stat {
  border-top: 1px solid rgba(255,255,255,0.4);
  padding-top: 18px;
}
.mc-stat__label,
.mc-stat__unit {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: rgba(255,255,255,0.55);
}
.mc-stat__value {
  font-family: var(--font-display);
  font-weight: var(--fw-thin);
  font-size: 88px;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-top: 18px;
}
.mc-stat__unit { margin-top: 14px; }

/* ---------- 12. Practice ---------- */
.mc-practice {
  background: #fff;
  color: #000;
}
.mc-practice__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 160px var(--page-gutter-desktop);
}
.mc-practice__grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 96px;
  align-items: start;
}
.mc-practice__eyebrow { color: var(--ps-grey-700); margin-bottom: 22px; }
.mc-practice__details {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ps-grey-700);
}
.mc-practice__field {
  border-top: 1px solid var(--ps-line-light);
  padding-top: 16px;
}
.mc-practice__field + .mc-practice__field { margin-top: 24px; }
.mc-practice__field-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--ps-grey-700);
}
.mc-practice__field-value { margin-top: 6px; }
.mc-practice__field-value a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }

.mc-practice__statement {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--t-display-2);
  line-height: 1;
  letter-spacing: -0.022em;
  margin: 0;
}
.mc-practice__paras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  margin-top: 64px;
}
.mc-practice__paras p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ps-grey-700);
  font-weight: var(--fw-light);
  margin: 0;
}

/* ---------- 13. Footer ---------- */
.mc-footer {
  background: #000;
  color: #fff;
}
.mc-footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 96px var(--page-gutter-desktop) 32px;
}
.mc-footer__top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
.mc-footer__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.mc-footer__wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 18px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
}
.mc-footer__about {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.6);
  font-weight: var(--fw-light);
  max-width: 320px;
  margin: 0;
}
.mc-footer__store {
  display: inline-block;
  margin-top: 20px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.4);
  padding-bottom: 2px;
  transition: border-color var(--dur-fast) var(--ease-ps);
}
.mc-footer__store:hover { border-bottom-color: #fff; }
.mc-footer__col-head {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: rgba(255,255,255,0.55);
  margin-bottom: 22px;
}
.mc-footer__menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mc-footer__menu a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  opacity: 0.85;
}
.mc-footer__menu a:hover { opacity: 1; }
.mc-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.5);
  flex-wrap: wrap;
  gap: 16px;
}
.mc-footer__legal-links {
  display: flex;
  gap: 28px;
}

/* ---------- 14. Single (app + article) ---------- */
.mc-single {
  background: #fff;
  color: #000;
  padding-top: var(--nav-h);
}
.mc-single__hero {
  max-width: var(--container);
  margin: 0 auto;
  padding: 96px var(--page-gutter-desktop) 64px;
}
.mc-single__eyebrow {
  color: var(--ps-grey-700);
  margin-bottom: 32px;
}
.mc-single__title {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--t-display-1);
  line-height: 0.96;
  letter-spacing: -0.024em;
  margin: 0;
  max-width: 18ch;
}
.mc-single__lede {
  margin-top: 32px;
  font-size: 22px;
  line-height: 1.45;
  color: var(--ps-grey-700);
  max-width: 720px;
  font-weight: var(--fw-light);
}
.mc-single__body {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--page-gutter-desktop) 160px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--ps-grey-700);
}
.mc-single__body p { margin: 0 0 1.5em; }
.mc-single__body h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: #000;
  margin: 2.5em 0 1em;
}
.mc-single__body h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.014em;
  color: #000;
  margin: 2em 0 0.75em;
}
.mc-single__body a {
  color: inherit;
  border-bottom: 1px solid currentColor;
  text-decoration: none;
}
.mc-single__specs {
  margin-top: 48px;
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  align-items: flex-start;
  max-width: 720px;
}
.mc-single__store {
  margin-top: 40px;
}
.mc-single__icon {
  margin-bottom: 24px;
}
.mc-single__icon img {
  width: 96px;
  height: 96px;
  border-radius: 20px;
  display: block;
}
.mc-single__screenshot {
  margin: 64px auto;
  max-width: 360px;
}
.mc-single__screenshot img {
  width: 100%;
  height: auto;
  border-radius: 32px;
  display: block;
}
.mc-single__store--none {
  font-size: 13px;
  color: var(--ps-grey-700);
}
.mc-single__actions { margin-top: 48px; }
.mc-single__searchform { margin-top: 40px; max-width: 480px; }

/* ---------- App page: features, related, closing CTA ---------- */
.mc-app__features {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid var(--ps-line-light);
}
.mc-app__features-title {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 28px;
  letter-spacing: -0.014em;
  line-height: 1.2;
  margin: 0 0 20px;
}
.mc-app__features-lede {
  color: var(--ps-grey-700);
  font-weight: var(--fw-light);
  margin-bottom: 24px;
}
.mc-app__features-list { list-style: none; margin: 0; padding: 0; }
.mc-app__features-list li {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--ps-line-light);
  font-size: 16px;
  line-height: 1.5;
  font-weight: var(--fw-light);
}
.mc-app__features-list li::before {
  content: "—";
  color: var(--ps-grey-700);
  flex: 0 0 auto;
}

.mc-app__related,
.mc-app__cta {
  max-width: var(--container);
  margin: 0 auto;
  padding: 64px var(--page-gutter-desktop);
}
.mc-app__related { border-top: 1px solid var(--ps-line-light); }
.mc-app__related-title,
.mc-app__cta-title {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 32px;
  letter-spacing: -0.018em;
  line-height: 1.1;
  margin: 0 0 28px;
}
.mc-app__related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.mc-app__related-list a {
  display: block;
  padding-top: 18px;
  border-top: 1px solid var(--ps-line-light);
  color: inherit;
  text-decoration: none;
}
.mc-app__related-list a:hover .mc-app__related-name { border-bottom-color: currentColor; }
.mc-app__related-name {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--fw-light);
  letter-spacing: -0.014em;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-ps);
}
.mc-app__related-cat {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-style: italic;
  color: var(--ps-grey-700);
}
.mc-app__related-all { margin-top: 32px; font-size: 13px; }
.mc-app__related-all a { color: inherit; }

.mc-app__cta {
  background: var(--ps-near-white);
  max-width: none;
  border-top: 1px solid var(--ps-line-light);
}
.mc-app__cta > * {
  max-width: calc(var(--container) - 2 * var(--page-gutter-desktop));
  margin-left: auto;
  margin-right: auto;
}
.mc-app__cta-store { display: block; }
.mc-app__cta .mc-row__meta-sep { background: var(--ps-grey-300); }
.mc-app__cta-meta {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

/* Scoped overrides — .mc-single__body h2/p are 0-1-1 and would otherwise beat
   the component classes below, which sit inside that wrapper. */
.mc-single__body .mc-app__features-title {
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.014em;
  margin: 0 0 20px;
}
.mc-single__body .mc-app__features-lede { margin: 0 0 24px; }
.mc-single__body .mc-app__features-list li { margin: 0; }
.mc-single__body .mc-list__title   { margin: 14px 0 0; font-size: var(--t-h3); }
.mc-single__body .mc-list__excerpt { margin: 18px 0 0; }
.mc-single__body .mc-list__meta    { margin: 0; }
.mc-single__body .mc-list__foot    { margin: 18px 0 0; }

/* ---------- Shared list rows (archive, search) ---------- */
.mc-list__item {
  border-top: 1px solid var(--ps-line-light);
  padding: 56px 0;
}
.mc-list__item--tight { padding: 40px 0; }
.mc-list__meta { color: var(--ps-grey-700); }
.mc-list__title { margin-top: 14px; }
.mc-list__title a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.mc-list__title a:hover { border-bottom-color: currentColor; }
.mc-list__excerpt { margin-top: 18px; color: var(--ps-grey-700); }
.mc-list__foot { margin-top: 18px; }
.mc-list__pagination { margin-top: 64px; }

.mc-single--dark { background: #000; color: #fff; }
.mc-single--dark .mc-single__eyebrow { color: rgba(255,255,255,0.6); }
.mc-single--dark .mc-single__body { color: rgba(255,255,255,0.78); }
.mc-single--dark .mc-single__body h2,
.mc-single--dark .mc-single__body h3 { color: #fff; }

/* ---------- 15. Responsive ---------- */
@media (max-width: 1024px) {
  :root {
    --t-display: 88px;
    --t-h1: 64px;
    --t-h2: 44px;
    --t-stat: 72px;
  }
  .mc-hero__head { grid-template-columns: 1fr; gap: 48px; }
  .mc-hero__lede-wrap { padding-bottom: 0; }
  .mc-hero__feature { grid-template-columns: 1fr; gap: 48px; }
  .mc-writing__header { grid-template-columns: 1fr; gap: 32px; }
  .mc-index__header { grid-template-columns: 1fr; gap: 32px; align-items: start; }
  .mc-download__inner { grid-template-columns: 1fr; gap: 32px; }
  .mc-featured__card { grid-template-columns: 1fr; }
  .mc-featured__content { border-left: 0; border-top: 1px solid var(--ps-line-light); padding: 48px; }
  .mc-featured__phone { min-height: 480px; }
  .mc-featured__title { font-size: 44px; }
  .mc-featured__specs { grid-template-columns: repeat(2, 1fr); }
  .mc-stats__grid { grid-template-columns: repeat(2, 1fr); }
  .mc-stat__value { font-size: 64px; }
  .mc-practice__grid { grid-template-columns: 1fr; gap: 48px; }
  .mc-practice__paras { grid-template-columns: 1fr; gap: 32px; }
  .mc-footer__top { grid-template-columns: 1fr 1fr; }
  .mc-hero__headline { font-size: 88px; }
  .mc-row { grid-template-columns: 48px minmax(0, 1fr); gap: 32px; }
  .mc-row__num { font-size: 36px; margin-top: 22px; }
  .mc-index__contents { grid-template-columns: 48px minmax(0, 1fr); gap: 32px; }
  .mc-row__title { font-size: 36px; }
}

@media (max-width: 768px) {
  :root {
    --page-gutter-desktop: 24px;
    --nav-h: 56px;
    --t-display: 56px;
    --t-h1: 44px;
    --t-h2: 36px;
    --t-stat: 56px;
  }
  .mc-section, .mc-section--tall, .mc-section--xtall { padding-left: 24px; padding-right: 24px; }
  .ps-container { padding: 0 24px; }
  .mc-hero__eyebrows, .mc-hero__head, .mc-hero__feature,
  .mc-index__inner, .mc-download__inner, .mc-featured__inner, .mc-writing__inner,
  .mc-stats__inner, .mc-practice__inner, .mc-footer__inner { padding-left: 24px; padding-right: 24px; }
  .mc-hero__head { padding-top: 80px; }
  .mc-hero__feature { margin-top: 80px; padding-bottom: 64px; }
  .mc-hero__phone-wrap { height: 420px; }
  .mc-hero__headline { font-size: 56px; }
  .mc-hero__feature-title { font-size: 36px; }
  .mc-hero__specs { grid-template-columns: 1fr 1fr; }

  .mc-nav__primary { display: none; }
  .mc-nav__right { display: none; }
  .mc-nav__toggle { display: inline-flex; justify-self: end; }
  .mc-nav__inner { grid-template-columns: 1fr auto; }

  .mc-marquee__item { font-size: 11px; letter-spacing: 0.22em; }

  .mc-index__inner { padding-top: 48px; padding-bottom: 56px; }
  /* Tighten the stacked masthead so the first application row is reachable in
     roughly one thumb-swipe rather than a full screen of copy. */
  .mc-index__header { gap: 24px; margin-bottom: 32px; }
  .mc-index__eyebrow { margin-bottom: 14px; }
  .mc-index__lede { font-size: 16px; }
  .mc-index__strap { margin-top: 12px; font-size: 14px; }
  .mc-index__filters { margin-top: 24px; gap: 14px; }
  .mc-index__filter-list { gap: 14px; }
  /* Pull the numeral out of flow. As a full-width grid row it spent a line plus
     a 24px gap on two characters, eleven times over. */
  .mc-row {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 36px 0;
  }
  /* The numeral parks UNDER the icon rather than beside the text. Out of flow,
     so it costs zero horizontal space, and it reads as the same left rail the
     desktop row uses. 112px = the row's 36px top padding + the 64px tile + 12px.
     Previously it sat top-right and reserved 40px of padding on the text
     column — 20% of a 203px reading width spent on two characters. */
  .mc-row__num {
    position: absolute;
    top: 112px;
    left: 0;
    right: auto;
    width: 64px;
    text-align: center;
    font-size: 28px;
    margin-top: 0;
  }
  .mc-row__body {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 20px;
  }
  /* line-height:1 is right for a two-line display heading and wrong for a
     five-line one — at 28px the ink clears by 1.6px. */
  .mc-row__title { font-size: 28px; line-height: 1.08; }

  /* The separators divide items on ONE line. Once the strap wraps to five lines
     they orphan at the line ends — 48 stray hairlines across the index, on a
     page whose whole visual system is deliberate hairlines. Spacing carries the
     division instead, and the gap they no longer need becomes tap-target
     padding: the store links go from 17px to 36px tall. */
  .mc-row__meta { column-gap: 14px; row-gap: 0; }
  .mc-row__meta-sep { display: none; }
  .mc-row__store, .mc-row__more { padding-top: 9px; padding-bottom: 9px; }

  /* Hidden on phones. Its job is to name the numeral column, and on mobile the
     numeral sits under the icon — there is no column to name. It would be a
     29px two-line caption competing for a fold that already cannot fit row 01,
     and "Free · No subscriptions" appears on every row anyway. */
  .mc-index__contents { display: none; }
  .mc-glyph { width: 64px; height: 64px; font-size: 28px; flex: 0 0 64px; border-radius: 14px; }

  .mc-download__inner { padding: 64px 24px; }
  .mc-download .mc-storebadge-row { display: flex; width: 100%; }
  .mc-download .mc-storebadge { flex: 1 1 0; justify-content: center; }

  .mc-featured__inner { padding: 80px 24px; }
  .mc-featured__content { padding: 32px; }
  .mc-featured__title { font-size: 32px; }
  .mc-featured__phone { min-height: 380px; }
  .mc-featured__specs { grid-template-columns: 1fr 1fr; }

  .mc-writing__inner { padding: 80px 24px; }
  .mc-writing__grid { grid-template-columns: 1fr; }
  .mc-writing__article:first-child { padding-right: 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.15); }
  .mc-writing__article:last-child { padding-left: 0; }
  .mc-writing__art-title { font-size: 28px; }

  .mc-stats__inner { padding: 64px 24px 96px; }
  .mc-stats__grid { grid-template-columns: 1fr 1fr; }
  .mc-stat__value { font-size: 48px; }

  .mc-practice__inner { padding: 96px 24px; }
  .mc-practice__paras { grid-template-columns: 1fr; }

  .mc-footer__top { grid-template-columns: 1fr 1fr; gap: 32px; padding-bottom: 48px; }
  .mc-footer__inner { padding: 64px 24px 32px; }
  .mc-footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; }

  .mc-single__hero { padding: 64px 24px 32px; }
  .mc-app__related, .mc-app__cta { padding: 48px 24px; }
  .mc-app__related-list { grid-template-columns: 1fr; gap: 0; }
  .mc-app__related-list a { padding-bottom: 18px; }
  .mc-single__body { padding: 0 24px 96px; font-size: 16px; }
}

/* The mobile sheet can only ever exist below the breakpoint. Belt and braces
   alongside the matchMedia handler in nav.js: above 768px the burger that would
   close it is display:none, so a stuck overlay would have no visible way out. */
@media (min-width: 769px) {
  .mc-nav__sheet.is-open { display: none; }
}

/* Search + locale inside the mobile sheet. */
.mc-nav__sheet-search { width: 100%; max-width: 420px; margin-top: 8px; }
.mc-nav__sheet-search .ps-input {
  background: transparent;
  border-color: rgba(255,255,255,0.35);
  color: #fff;
}
.mc-nav__sheet-search .ps-input::placeholder { color: rgba(255,255,255,0.55); }
.mc-nav__sheet-search .ps-btn--primary {
  background: #fff;
  color: #000;
  border-color: #fff;
}
.mc-nav__sheet-locale {
  margin-top: auto;
  font-size: 11px;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: rgba(255,255,255,0.55);
}