/* ============================================================
   MADE TO ORDER v2 — /made-to-order
   Design ref: design_handoff_made_to_order/Made to Order v2.dc.html
   Tokens come from css/anou-tokens.css (loaded by base.html).
   ============================================================ */

#body.container { width: 100%; max-width: none; margin: 0; padding: 0; }

.mto { font-family: grap, system-ui, sans-serif; background: #ffffff; }
.mto a { color: #407bd9; }
.mto a:hover { color: #3568bd; }

/* ---------- hero ---------- */
.mto-hero { position: relative; }
.mto-hero video { width: 100%; height: 430px; object-fit: cover; display: block; }
.mto-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(rgba(24,30,42,.35), rgba(24,30,42,.72));
  display: flex; flex-direction: column; justify-content: center; padding: 0 56px;
}
.mto-eyebrow-light { margin: 0 0 12px 0; font-family: grap-med, sans-serif; font-size: 11px; letter-spacing: 3px; color: #85A9E4; }
.mto-hero h1 { margin: 0 0 14px 0; font-family: grotesk, sans-serif; font-weight: 900; font-size: 40px; line-height: 1.15; color: #ffffff; max-width: 720px; }
.mto-hero-copy { margin: 0; font-size: 15.5px; line-height: 1.7; color: #e5e8ee; max-width: 660px; }

/* ---------- three pillars ---------- */
.mto-pillars { display: grid; grid-template-columns: 1fr 1fr 1fr; border-bottom: 1px solid #e5e8ee; }
.mto-pillar { padding: 26px 28px; border-right: 1px solid #e5e8ee; }
.mto-pillar:last-child { border-right: 0; }
.mto-pillar-label, .mto-pillar p.mto-pillar-label { margin: 0 0 6px 0; font-family: grap-med, sans-serif; font-size: 11px; letter-spacing: 2px; color: #407bd9; }
.mto-pillar p { margin: 0; font-size: 13.5px; line-height: 1.65; color: #4b5563; }
.mto-pillar a { text-decoration: none; }

/* ---------- "you can change" strip ---------- */
.mto-changes {
  display: flex; align-items: center; justify-content: center; gap: 24px;
  padding: 22px 40px; flex-wrap: wrap; border-bottom: 1px solid #e5e8ee; background: #fafbfd;
}
.mto-changes-label { font-family: grap-med, sans-serif; font-size: 11px; letter-spacing: 2px; color: #9aa1ad; }
.mto-changes-item { font-size: 13px; color: #4b5563; }
.mto-changes-dot { color: #ccd8eb; }

/* ---------- CTA row ---------- */
.mto-cta-row {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  padding: 26px 40px; flex-wrap: wrap; border-bottom: 1px solid #e5e8ee;
}
.mto-cta-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: #407bd9; color: #ffffff !important; height: 50px; padding: 0 32px;
  font-family: grap-med, sans-serif; font-size: 12px; letter-spacing: 2px;
  cursor: pointer; text-decoration: none;
}
.mto-cta-btn:hover { background: #3568bd; text-decoration: none; }
.mto-cta-link { font-size: 13px; color: #407bd9; text-decoration: none; }

/* ---------- alternating feature grids ---------- */
.mto-inner { max-width: 1280px; margin: 0 auto; }
.mto-grid { display: grid; gap: 56px; padding: 0 40px 56px 40px; align-items: center; }
.mto-grid-first { padding-top: 56px; }
.mto-grid-text-left  { grid-template-columns: 1fr 1.1fr; }
.mto-grid-text-right { grid-template-columns: 1.1fr 1fr; }
.mto-eyebrow, .mto p.mto-eyebrow { margin: 0 0 12px 0; font-family: grap-med, sans-serif; font-size: 11px; letter-spacing: 3px; color: #407bd9; }
.mto-grid h2 { margin: 0 0 14px 0; font-family: grotesk, sans-serif; font-weight: 900; font-size: 28px; line-height: 1.2; color: #2e333d; }
.mto-body { margin: 0 0 12px 0; font-size: 15px; line-height: 1.7; color: #4b5563; }
.mto-body-last { margin: 0; }
.mto-note { margin: 0; font-size: 13px; color: #6b7280; }
.mto-grid a { text-decoration: none; }

/* Samantha before/after */
.mto-ba-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mto-ba-photos img { width: 100%; display: block; }
.mto-ba-caption { margin: 8px 0 0 0; font-size: 12px; color: #9aa1ad; text-align: center; }

/* Color annotator mock */
.mto-annotator { border: 1px solid #e5e8ee; box-shadow: 0 2px 10px rgba(46,51,61,.06); }
.mto-annotator-top { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-bottom: 1px solid #e5e8ee; }
.mto-annotator-top-label { font-family: grap-med, sans-serif; font-size: 11px; letter-spacing: 2px; color: #407bd9; }
.mto-annotator-top-hint { font-size: 11.5px; color: #9aa1ad; }
.mto-annotator-stage { position: relative; padding: 22px 26px; background: #fafbfd; cursor: crosshair; }
.mto-annotator-stage img { width: 100%; display: block; }
/* Pins are anchored by their arrow tip, so left/top is the point being marked. */
.mto-annotator-pin {
  position: absolute; display: flex; flex-direction: column; align-items: center;
  transform: translate(-50%, -100%); pointer-events: none;
}
.mto-annotator-pin-new { animation: mtoPinDrop .18s ease-out; }
@keyframes mtoPinDrop { from { opacity: 0; transform: translate(-50%, -108%); } }
.mto-annotator-chip {
  display: flex; align-items: center; gap: 7px; background: #ffffff;
  border: 1px solid #e5e8ee; box-shadow: 0 1px 4px rgba(46,51,61,.15); padding: 6px 10px;
}
/* Swatches are real color-book yarn samples, set inline by the demo JS as it walks
   Samantha's palette (sage 132 -> ochre 362 -> grey 75). The e_trim/c_crop chain in the
   JS drops each sample's white field so the swatch reads as yarn, not a pale ring. */
.mto-annotator-swatch {
  width: 38px; height: 38px; border-radius: 50%; display: inline-block; background: #8ba18f;
  background-size: cover; background-position: center; flex: none;
}
.mto-annotator-chip span:last-child { font-family: grap-med, sans-serif; font-size: 12px; color: #2e333d; }
.mto-annotator-line { width: 2px; height: 56px; background: #2fd06b; }
.mto-annotator-arrow { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #2fd06b; }
.mto-annotator-bottom { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid #e5e8ee; }
.mto-annotator-bottom .mto-annotator-swatch { width: 28px; height: 28px; }
.mto-annotator-bottom-text { font-size: 12.5px; color: #4b5563; }
.mto-annotator-bottom-count { margin-left: auto; font-size: 12px; color: #9aa1ad; white-space: nowrap; }
.mto-annotator-clear {
  margin-left: 10px; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 12px; color: #407bd9; text-decoration: underline;
}
.mto-annotator-clear[hidden] { display: none; }

/* Dashboard card + offset-shadow media */
.mto-dash-card { border: 1px solid #e5e8ee; background: #fafbfd; padding: 16px 18px; }
.mto-dash-card-label, .mto-dash-card p.mto-dash-card-label { margin: 0 0 6px 0; font-family: grap-med, sans-serif; font-size: 10.5px; letter-spacing: 1.5px; color: #2e333d; }
.mto-dash-card p { margin: 0 0 8px 0; font-size: 13px; line-height: 1.6; color: #4b5563; }
.mto-dash-card a { font-size: 13px; text-decoration: none; }
.mto-media-shadow-right { box-shadow: #407bd9 12px -12px; }
.mto-media-shadow-left  { box-shadow: #407bd9 -12px -12px; }
.mto-media-shadow-right img, .mto-media-shadow-right video,
.mto-media-shadow-left img, .mto-media-shadow-left video { width: 100%; height: auto; display: block; }

/* ---------- performance band ---------- */
/* Banner runs edge to edge, so the band itself carries no padding — the inner does. */
.mto-performance { background: #f2f6fc; padding: 0; }
.mto-performance-inner { max-width: 1200px; margin: 0 auto; padding: 44px 40px 48px; }

/* Full-bleed video banner. The headline sits on the footage rather than above it. */
.mto-perf-banner { position: relative; }
.mto-perf-banner video { width: 100%; height: 380px; object-fit: cover; display: block; }
/* The footage is bright and busy — sunlit hillside, pale clothing — so the scrim
   has to carry real weight behind the text, not just tint the bottom edge. The
   ramp reaches full strength by the time it is under the eyebrow, not at the very
   bottom of the frame where no text sits. */
.mto-perf-banner-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(16,20,28,.92) 0%, rgba(16,20,28,.86) 18%, rgba(16,20,28,.62) 38%,
    rgba(16,20,28,.28) 60%, rgba(16,20,28,0) 82%);
}
.mto-perf-banner-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 40px 36px; }

/* Scoped under .mto-performance deliberately. `.mto-performance h2` (further down
   this file) sets the dark body colour at the same specificity, and being later it
   won — which painted the banner headline #2e333d on a photograph. */
.mto-performance .mto-perf-banner-text .mto-eyebrow-light {
  margin: 0 0 10px 0; color: rgba(255,255,255,.92);
  text-shadow: 0 1px 8px rgba(16,20,28,.75);
}
.mto-performance .mto-perf-banner-text h2 {
  margin: 0; color: #fff; font-size: 30px; line-height: 1.2; max-width: 760px;
  text-shadow: 0 2px 16px rgba(16,20,28,.75), 0 1px 3px rgba(16,20,28,.55);
}

/* The two rules, lifted out of the prose so they read as terms rather than paragraphs. */
.mto-perf-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }
.mto-perf-rule { background: #fff; border: 1px solid #d7deea; padding: 22px 24px; }
.mto-perf-rule-label {
  margin: 0 0 8px 0; font-family: var(--font-ui), sans-serif;
  font-size: 11px; letter-spacing: 2px; color: var(--anou-blue, #407bd9);
}
.mto-perf-rule p:last-child { margin: 0; font-size: 14px; line-height: 1.7; color: #4b5563; }
.mto-performance-inner .mto-eyebrow { margin-bottom: 6px; }
.mto-performance h2 { margin: 0 0 14px 0; font-family: grotesk, sans-serif; font-weight: 900; font-size: 26px; color: #2e333d; }
.mto-performance .mto-body { max-width: 760px; }
.mto-performance .mto-body-space { margin-bottom: 16px; }
.mto-performance .mto-body-howto { margin-bottom: 24px; }
.mto-stats { display: flex; gap: 16px; flex-wrap: wrap; }
.mto-stat { background: #ffffff; padding: 18px 24px; flex: 1; min-width: 200px; }
.mto-stat-num { margin: 0; font-family: grotesk, sans-serif; font-weight: 900; font-size: 24px; color: #2e333d; }
.mto-stat-label { margin: 2px 0 0 0; font-size: 12.5px; color: #6b7280; }
.mto-performance-link { margin: 20px 0 0 0; }
.mto-performance-link a { font-size: 13px; text-decoration: none; }

/* ---------- guarantee ---------- */
.mto-guarantee { max-width: 1280px; margin: 0 auto; padding: 48px 40px; }
.mto-guarantee-inner { max-width: 760px; }
.mto-guarantee h2 { margin: 0 0 12px 0; font-family: grotesk, sans-serif; font-weight: 900; font-size: 24px; color: #2e333d; }
.mto-guarantee p { margin: 0 0 12px 0; font-size: 14.5px; line-height: 1.7; color: #4b5563; }
.mto-guarantee p:last-child { margin-bottom: 0; }

/* ---------- residencies band (light info-blue, vertical loom video right) ---------- */
.mto-residencies { background: #f2f6fc; }
.mto-residencies-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 340px; align-items: center; }
.mto-residencies-text { padding: 44px 40px; }
.mto-residencies h2 { margin: 0 0 14px 0; font-family: grotesk, sans-serif; font-weight: 900; font-size: 28px; line-height: 1.2; color: #2e333d; }
.mto-residencies p { margin: 0 0 20px 0; font-size: 14.5px; line-height: 1.7; color: #4b5563; max-width: 560px; }
/* vertical (9:16) video: the action sits in the lower half, so bias the crop down */
.mto-residencies video { width: 100%; height: 520px; object-fit: cover; object-position: 50% 72%; display: block; }
.mto-residencies-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: #407bd9; color: #ffffff !important; height: 46px; padding: 0 28px;
  font-family: grap-med, sans-serif; font-size: 12px; letter-spacing: 2px; text-decoration: none;
}
.mto-residencies-btn:hover { background: #3568bd; text-decoration: none; }

/* ---------- FAQ ---------- */
.mto-faq { max-width: 1280px; margin: 0 auto; padding: 40px 40px 48px 40px; }
.mto-faq-label { margin: 0 0 14px 0; font-family: grap-med, sans-serif; font-size: 11px; letter-spacing: 2px; color: #9aa1ad; }
.mto-faq-item { border-bottom: 1px solid #e5e8ee; }
.mto-faq-q { padding: 13px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; }
.mto-faq-q-text { font-size: 14px; color: #2e333d; }
.mto-faq-mark { color: #9aa1ad; }
.mto-faq-a { margin: 0; padding: 0 0 16px 0; font-size: 13.5px; line-height: 1.7; color: #4b5563; max-width: 720px; display: none; }
.mto-faq-item.open .mto-faq-a { display: block; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .mto-hero-overlay { padding: 0 20px; }
  .mto-hero h1 { font-size: 28px; }
  .mto-pillars { grid-template-columns: 1fr; }
  .mto-pillar { border-right: 0; border-bottom: 1px solid #e5e8ee; }
  .mto-pillar:last-child { border-bottom: 0; }
  .mto-changes, .mto-cta-row { padding-left: 20px; padding-right: 20px; }
  .mto-grid, .mto-grid-text-left, .mto-grid-text-right { grid-template-columns: 1fr; gap: 28px; padding: 0 20px 44px 20px; }
  .mto-grid-first { padding-top: 44px; }
  .mto-media-shadow-right, .mto-media-shadow-left { box-shadow: none; }
  .mto-performance { padding: 0; }
  .mto-performance-inner { padding: 36px 20px 40px; }
  .mto-perf-banner video { height: 240px; }
  .mto-perf-banner-text { padding: 0 20px 24px; }
  .mto-performance .mto-perf-banner-text h2 { font-size: 22px; }
  .mto-perf-rules { grid-template-columns: 1fr; }
  .mto-guarantee { padding: 40px 20px; }
  .mto-residencies-inner { grid-template-columns: 1fr; }
  .mto-residencies-text { padding: 36px 20px; }
  .mto-residencies video { height: 420px; }
  .mto-faq { padding: 32px 20px 40px 20px; }
}

/* ---------- loom progress slideshow (step two) ---------- */
.mto-loom-slides { position: relative; aspect-ratio: 1000 / 640; }
.mto-loom-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  display: block; opacity: 0; transition: opacity .9s ease;
}
.mto-loom-slide-on { opacity: 1; }

/* ---------- how you start one: centered claim + type cards ---------- */
.mto-types { padding: 56px 40px; text-align: center; }
.mto-types h2 { margin: 0 0 12px 0; font-family: grotesk, sans-serif; font-weight: 900; font-size: 28px; color: #2e333d; }
.mto-types-intro { max-width: 620px; margin: 0 auto 4px auto; }
.mto-types-cta { margin: 22px 0 14px 0; }
.mto-typegrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 18px 0 14px 0; }
.mto-typecard { display: block; border: 1px solid #e5e8ee; background: #ffffff; text-decoration: none; overflow: hidden; }
.mto-typecard:hover { border-color: #407bd9; }
.mto-typecard img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.mto-typecard-body { display: block; padding: 12px 14px 14px; text-align: center; }
/* the card is an <a>, so text colors must be explicit or the page link-blue swallows them */
.mto-typecard-name { display: block; font-family: grotesk, sans-serif; font-weight: 900; font-size: 16px; color: #2e333d; }
.mto-typecard-maker { display: block; margin-top: 3px; font-size: 12.5px; color: #6b7280; }

/* ---------- category cards, touched up: quieter body, centered under a centered
   section, consistent height even when a name wraps ---------- */

/* ---------- the coda: two doors inside the same section, past a short rule ---------- */
.mto-types-divider { width: 64px; height: 2px; background: #ccd8eb; margin: 44px auto 0 auto; }
.mto-doors-lead { margin-top: 22px; }
.mto-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 760px; margin: 16px auto 0 auto; }
.mto-door {
  display: flex; flex-direction: column; text-align: left; background: #fafbfd;
  border: 1px solid #e5e8ee; padding: 18px 20px 16px; text-decoration: none;
}
.mto-door:hover { border-color: #407bd9; }
.mto-door-title { font-family: grotesk, sans-serif; font-weight: 900; font-size: 16px; color: #2e333d; }
.mto-door-copy { margin: 5px 0 12px 0; font-size: 13px; line-height: 1.55; color: #6b7280; }
.mto-door-link { margin-top: auto; font-family: grap-med, sans-serif; font-size: 13px; color: #407bd9; }

@media (max-width: 900px) {
  .mto-types { padding: 40px 20px; }
  .mto-typegrid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .mto-doors { grid-template-columns: 1fr; }
}

/* ---------- get started: three ways in, as rows ---------- */
.mto-startrows { padding: 0 40px 40px; }
.mto-startrow {
  display: grid; grid-template-columns: 200px 1fr auto 40px; gap: 26px;
  align-items: center; padding: 24px 0; border-top: 1px solid #e5e8ee;
  text-align: left;
}
.mto-startrow:last-child { border-bottom: 1px solid #e5e8ee; }
.mto-startrow-thumb img { width: 200px; height: 130px; object-fit: cover; display: block; }
.mto-startrow-title {
  display: block; font-family: grotesk, sans-serif; font-weight: 900; font-size: 19px;
  color: #2e333d !important; text-decoration: none; margin-bottom: 6px;
}
.mto-startrow-title:hover { color: #407bd9 !important; }
.mto-startrow-copy { margin: 0; font-size: 14px; line-height: 1.65; color: #4b5563; max-width: 620px; }
.mto-cats-toggle { font-family: grap-med, sans-serif; }
.mto-startrow-tag { font-family: grap-med, sans-serif; font-size: 11px; letter-spacing: 2px; color: #9aa1ad; white-space: nowrap; }
.mto-startrow-arrow { font-size: 20px; text-decoration: none; }

.mto-cats .mto-typegrid { margin: 0 0 10px 0; }
.mto-cats .mto-typecard img { aspect-ratio: 3 / 2; }
@media (max-width: 900px) {
  .mto-startrows { padding: 0 20px 32px; }
  .mto-startrow { grid-template-columns: 96px 1fr; gap: 14px; }
  .mto-startrow-thumb img { width: 96px; height: 72px; }
  .mto-startrow-tag, .mto-startrow-arrow { display: none; }
  .mto-cats .mto-typegrid { grid-template-columns: 1fr 1fr; }
}

/* expanded categories: a full-width shelf that opens BELOW the row. The thumb, title
   and copy never move — only the shelf eases open. (An earlier version animated the
   thumb column shut via grid tricks; it collided with explicit grid placement and
   rendered the whole row blank. Keep this dumb.) */
.mto-cats {
  grid-column: 1 / -1;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .4s ease, opacity .3s ease;
}
.mto-cats.mto-cats-on { max-height: 420px; opacity: 1; }
.mto-cats .mto-typegrid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mto-cats .mto-typecard img { aspect-ratio: 4 / 3; }
.mto-cats .mto-typecard-name { font-size: 15px; }
@media (max-width: 900px) {
  .mto-startrow.mto-cats-open .mto-startrow-main { grid-column: 1 / -1; }
  .mto-cats .mto-typegrid { grid-template-columns: 1fr 1fr; }
}

/* expanded: the thumb yields to its twin in the list; text moves to the left edge */
.mto-startrow.mto-cats-open .mto-startrow-thumb { display: none; }
.mto-startrow.mto-cats-open .mto-startrow-main { grid-column: 1 / 3; }

/* ---------------------------------------------------------------------------
   Group performance preview (#performance)
   Five cooperatives showing the range, not the top five. Deliberately plain:
   this band is evidence, and it should read like a record rather than a
   leaderboard. The "why" tag explains why each row is present so the sample
   cannot be mistaken for a ranking with the bottom cut off.
   --------------------------------------------------------------------------- */
.mto-perf {
  margin-top: 34px;
  max-width: none;   /* spans the 1200px inner width alongside the rule cards */
  border: 1px solid var(--border, #e3e6ec);
  background: #fff;
}
.mto-perf-row {
  display: grid;
  grid-template-columns: 2.4fr 1fr 1.3fr 0.9fr;
  gap: 20px;
  align-items: baseline;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border, #e3e6ec);
  font-size: 15px;
}
.mto-perf-row:last-child { border-bottom: 0; }
/* Figures right-align so they compare down the column; the name stays left. */
.mto-perf-row > span:not(.mto-perf-name) {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.mto-perf-head {
  background: #fafbfc;
  padding-top: 12px;
  padding-bottom: 12px;
  font-family: var(--font-ui), sans-serif;
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-muted, #7a828f);
}
/* Thumb + text share the name cell, so the grid columns stay as they were and the
   header row still lines up. */
.mto-perf-name { line-height: 1.35; display: flex; gap: 13px; align-items: flex-start; }
.mto-perf-thumb { flex: 0 0 auto; display: block; line-height: 0; }
.mto-perf-thumb img {
  width: 52px; height: 52px; object-fit: cover; display: block;
  border: 1px solid var(--border, #e3e6ec);
}
.mto-perf-id { min-width: 0; }
.mto-perf-id > a { color: inherit; text-decoration: none; }
.mto-perf-id > a:hover { text-decoration: underline; }
.mto-perf-name em {
  font-style: normal;
  color: var(--ink-muted, #7a828f);
  display: block;
  font-size: 13px;
  margin-top: 2px;
}
/* The reason a row is present, not a badge of merit — outlined and quiet so it
   reads as a caption rather than a rosette. */
.mto-perf-name b {
  display: inline-block;
  margin-top: 7px;
  padding: 2px 7px;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-family: var(--font-ui), sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--anou-blue, #4a6cf7);
}
.mto-perf-foot {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-muted, #7a828f);
}

@media (max-width: 700px) {
  .mto-perf-row { grid-template-columns: 1fr 1fr; row-gap: 10px; padding: 16px 18px; }
  .mto-perf-head { display: none; }
  .mto-perf-name { grid-column: 1 / -1; font-weight: 600; }
  .mto-perf-thumb img { width: 42px; height: 42px; }
  .mto-perf-row > span:not(.mto-perf-name) { text-align: left; }
  .mto-perf-row > span:not(.mto-perf-name)::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink-muted, #7a828f);
  }
}