/* ==========================================================================
   musicteacherdirectory.sg — brand layer on top of Core Framework
   --------------------------------------------------------------------------
   Where it goes: Bricks › Settings › Custom code › Custom CSS
   (or Advanced Themer › Global CSS). Load AFTER Core Framework.

   Rules for keeping this maintainable:
   1. Colour, spacing, type and radius come from Core Framework variables.
      Set the values in the Core Framework app (see the build guide); this
      file only *references* them. The fallbacks after the commas are the
      design values, so the site still looks right if a variable is missing.
   2. Only components Core Framework has no utility for live here, named
      with the `mtd-` prefix (BEM-ish) so they never clash with CF or Brixies.
   3. Layout (flex, grid, gap, padding) goes through CF utility classes in
      Bricks, not through new CSS.
   ========================================================================== */

/* ---------- 1. Brand tokens (mirror these in Core Framework) ------------- */
:root {
  /* Colours: CF "primary" = ink green, "secondary" = brass */
  --mtd-ink:        var(--primary, #1E3A32);
  --mtd-ink-strong: var(--primary-d-2, #0F2420);
  --mtd-brass:      var(--secondary, #7C5E14);   /* 5.2:1 on white */
  --mtd-brass-soft: #D9C48A;                     /* only on the ink band */
  --mtd-text:       var(--text-body, #15201B);
  --mtd-muted:      var(--text-muted, #4A5550);  /* 7.4:1 on white */
  --mtd-ground:     var(--bg-body, #F2F2EF);
  --mtd-surface:    var(--bg-surface, #FFFFFF);
  --mtd-line:       var(--border-color, #D9DCD7);
  --mtd-line-strong:#C9CEC8;

  /* Type */
  --mtd-font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --mtd-font-body:    "Hanken Grotesk", system-ui, sans-serif;

  /* Radius: deliberately small, which reads as editorial rather than app-like */
  --mtd-radius:    var(--radius-s, 4px);
  --mtd-radius-lg: var(--radius-m, 6px);
}

body {
  background: var(--mtd-ground);
  color: var(--mtd-text);
  font-family: var(--mtd-font-body);
}

h1, h2, h3, .mtd-display {
  font-family: var(--mtd-font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

:focus-visible { outline: 2px solid var(--mtd-ink); outline-offset: 2px; }

/* ---------- 2. Small typographic pieces --------------------------------- */
.mtd-eyebrow {
  font-family: var(--mtd-font-body);
  font-size: var(--text-xs, 0.8125rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mtd-brass);
}
.mtd-section-head {                 /* "01 — Browse by instrument" rule */
  border-bottom: 1px solid var(--mtd-text);
  padding-bottom: var(--space-s, 1rem);
}
.mtd-section-head__num {
  font-family: var(--mtd-font-body);
  font-size: var(--text-xs, 0.9375rem);
  letter-spacing: 0.1em;
  color: var(--mtd-brass);
  margin-right: var(--space-s, 1rem);
  vertical-align: middle;
}

/* ---------- 3. Search bar (hero) ---------------------------------------- */
.mtd-search {
  display: flex;
  flex-wrap: wrap;
  background: var(--mtd-surface);
  border: 1px solid var(--mtd-line-strong);
  border-radius: var(--mtd-radius-lg);
  box-shadow: 0 1px 0 rgb(21 32 27 / .04), 0 12px 32px -18px rgb(21 32 27 / .25);
}
.mtd-search__field {
  flex: 1 1 13rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-s, 1rem) var(--space-m, 1.375rem);
  border-right: 1px solid #E3E6E1;
}
.mtd-search__field:last-of-type { border-right: 0; }
.mtd-search__field:focus-within { outline: 2px solid var(--mtd-ink); outline-offset: -2px; }
.mtd-search__label {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--mtd-muted);
}
.mtd-search__field select,
.mtd-search__field input {
  border: 0; background: transparent; outline: none;
  font: inherit; font-size: 1.125rem; padding: 4px 0; color: var(--mtd-text);
}
.mtd-search__submit { margin: 10px; min-height: 56px; }
@media (max-width: 767px) {
  .mtd-search__field { border-right: 0; border-bottom: 1px solid #E3E6E1; }
  .mtd-search__submit { flex: 1 1 100%; justify-content: center; }
}

/* ---------- 4. Buttons & chips ------------------------------------------ */
.mtd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 1.25rem;
  border-radius: var(--mtd-radius);
  font-weight: 600; text-decoration: none; cursor: pointer;
  border: 1px solid var(--mtd-ink);
  transition: background-color .15s ease, color .15s ease;
}
.mtd-btn--primary  { background: var(--mtd-ink); color: #fff; }
.mtd-btn--primary:hover { background: var(--mtd-ink-strong); color: #fff; }
.mtd-btn--outline  { background: transparent; color: var(--mtd-ink); }
.mtd-btn--outline:hover { background: var(--mtd-ink); color: #fff; }

.mtd-chip {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 0 14px; border: 1px solid var(--mtd-line-strong);
  border-radius: 999px; background: var(--mtd-surface);
  font-size: 0.9375rem; text-decoration: none; color: var(--mtd-ink);
}

/* ---------- 5. Ruled grid (instrument tiles) ---------------------------- */
.mtd-ruled-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  border-left: 1px solid var(--mtd-line);
}
.mtd-ruled-grid > * {
  border-right: 1px solid var(--mtd-line);
  border-bottom: 1px solid var(--mtd-line);
  padding: var(--space-l, 1.75rem) var(--space-m, 1.5rem);
  text-decoration: none; color: var(--mtd-text);
  transition: background-color .15s ease;
}
.mtd-ruled-grid > a:hover { background: var(--mtd-surface); }

/* ---------- 6. Staff-line motif (the one decorative device) ------------- */
.mtd-staff {
  background-image: repeating-linear-gradient(
    to bottom, transparent 0 13px, rgb(30 58 50 / .14) 13px 14px);
  background-size: 100% 70px;
  background-repeat: no-repeat;
  padding-top: 88px;
}

/* ---------- 7. Teacher card (query loop item) --------------------------- */
.mtd-card {
  display: flex; flex-wrap: wrap; gap: var(--space-m, 1.5rem);
  padding-block: var(--space-l, 1.75rem);
  border-bottom: 1px solid var(--mtd-line);
}
.mtd-card__photo {
  flex: 0 0 132px; aspect-ratio: 132 / 160; object-fit: cover;
  border-radius: var(--mtd-radius); background: #E4E7E2;
}
.mtd-card__body { flex: 1 1 20rem; min-width: 0; }
.mtd-card__meta { display: flex; flex-wrap: wrap; gap: 6px 28px; font-size: 0.9375rem; }
.mtd-card__meta dt { color: var(--mtd-muted); }
.mtd-card__meta dd { margin: 0; }
.mtd-card__aside { flex: 0 0 11rem; display: flex; flex-direction: column; gap: 12px; }

/* ---------- 8. Enquiry panel (Bricksforge Pro Forms) -------------------- */
.mtd-enquiry {
  background: var(--mtd-surface);
  border: 1px solid var(--mtd-line-strong);
  border-radius: var(--mtd-radius-lg);
  padding: var(--space-l, 2rem);
}
.mtd-enquiry input,
.mtd-enquiry select,
.mtd-enquiry textarea {
  min-height: 46px; width: 100%;
  border: 1px solid var(--mtd-line-strong);
  border-radius: var(--mtd-radius);
  padding: 0 12px; font: inherit; background: #fff;
}
.mtd-enquiry textarea { padding-block: 10px; resize: vertical; }

/* ---------- 9. Dark band ("For teachers") ------------------------------- */
.mtd-band-ink { background: var(--mtd-ink); color: var(--mtd-ground); }
.mtd-band-ink .mtd-eyebrow { color: var(--mtd-brass-soft); }
.mtd-band-ink p { color: #C9D4CF; }

/* ---------- 10. Teacher profile (Bricks single template) ---------------- */
/* v1.1.0: added for the "Teacher – Single" template. v1.2.0: sections 11–13. v1.3.0: section 14. v1.3.1: wider tagline and prose. v1.3.2: roomier breadcrumb. v1.3.3: FAQ restyle, tighter waitlist spacing. v1.3.4: legal pages, FAQ title font fix. v1.3.5: centred legal column. v1.3.6: waitlist form radios and checkboxes. v1.3.7: compact waitlist form. v1.3.8: larger form text. v1.3.9: form rebuilt against the real Bricksforge markup. */
.mtd-profile { padding-block: var(--space-xl, 3.5rem) var(--space-3xl, 6rem); }
.mtd-wrap {
  width: 100%; max-width: 1200px; margin-inline: auto;
  padding-inline: var(--space-m, 1.5rem); box-sizing: border-box;
}

.mtd-profile-hero {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: var(--space-xl, 3rem); padding-bottom: var(--space-l, 2.5rem);
}
.mtd-profile-hero__photo {
  flex: 0 0 280px; max-width: 100%; aspect-ratio: 280 / 340;
  border-radius: var(--mtd-radius); overflow: hidden; background: #E4E7E2; margin: 0;
}
.mtd-profile-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mtd-profile-hero__body { flex: 1 1 28rem; min-width: 0; }
.mtd-breadcrumb { font-size: 0.9375rem; color: var(--mtd-muted); margin-bottom: 1.75rem; }
.mtd-breadcrumb a {
  color: var(--mtd-ink); font-weight: 500; text-decoration: none;
  border-bottom: 1px solid var(--mtd-line-strong); padding-bottom: 2px;
}
.mtd-breadcrumb a:hover { border-bottom-color: var(--mtd-ink); }
.mtd-profile-hero__body .mtd-eyebrow { margin: 0; }
.mtd-profile-hero__name {
  font-size: clamp(2.75rem, 6vw, 4.75rem); line-height: 1;
  letter-spacing: -0.025em; margin: 0.375rem 0 0;
}
.mtd-profile-hero__tagline {
  font-family: var(--mtd-font-display); font-style: italic;
  font-size: 1.5rem; line-height: 1.35; color: #2B3631;
  max-width: 52rem; margin: 1.25rem 0 0;
}

.mtd-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.25rem; margin-top: 1.75rem; padding-top: 1.25rem;
  border-top: 1px solid var(--mtd-text);
}
.mtd-facts__item { display: flex; flex-direction: column; gap: 4px; }
.mtd-facts__label,
.mtd-detail-list__label {
  font-size: 0.8125rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--mtd-muted);
}

.mtd-profile-body {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: var(--space-2xl, 3.5rem); padding-top: var(--space-m, 1.5rem);
}
.mtd-profile-main {
  flex: 999 1 560px; min-width: 0;
  display: flex; flex-direction: column; gap: var(--space-2xl, 3.5rem);
}
.mtd-profile-aside { flex: 1 1 340px; max-width: 400px; }
@media (min-width: 992px) { .mtd-profile-aside { position: sticky; top: 2rem; } }

.mtd-section-title {
  font-size: 2.125rem; margin: 0 0 0.875rem;
  padding-bottom: 0.625rem; border-bottom: 1px solid var(--mtd-line);
}
.mtd-prose { max-width: 50rem; } /* v1.3.1: widened from 42.5rem */
.mtd-prose p { margin: 0 0 1em; }

.mtd-quals__item {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem;
  padding-block: 0.875rem; border-bottom: 1px solid #E3E6E1;
}
.mtd-quals__detail { color: var(--mtd-muted); }

.mtd-rates { overflow-x: auto; }
.mtd-rates__row {
  display: grid; grid-template-columns: 2fr 1fr 1.5fr 1fr; gap: 1rem;
  align-items: baseline; min-width: 480px;
  padding-block: 0.875rem; border-top: 1px solid #E3E6E1;
}
.mtd-rates__row--head {
  border-top: 0; font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--mtd-muted);
}
.mtd-rates__price { text-align: right; font-family: var(--mtd-font-display); font-size: 1.25rem; }
.mtd-rates__row--head .mtd-rates__price { font-family: var(--mtd-font-body); font-size: inherit; }

.mtd-detail-list {
  display: grid; grid-template-columns: minmax(9rem, max-content) 1fr;
  gap: 0.75rem 2rem; align-items: baseline;
}
@media (max-width: 600px) { .mtd-detail-list { grid-template-columns: 1fr; gap: 0.25rem; } }

.mtd-note { font-size: 0.9375rem; color: var(--mtd-muted); margin-top: 0.875rem; }

.mtd-rate-from { margin: 0.75rem 0 0; font-size: 0.9375rem; color: var(--mtd-muted); }
.mtd-enquiry__title { font-size: 1.875rem; line-height: 1.15; margin: 0; }
.mtd-form-slot {
  margin-top: 1.5rem; padding: 1.5rem; text-align: center;
  border: 1px dashed var(--mtd-line-strong); border-radius: var(--mtd-radius);
  color: var(--mtd-muted); font-size: 0.9375rem;
}

/* ---------- 11. Header & footer (v1.2.0) -------------------------------- */
.mtd-header { border-bottom: 1px solid var(--mtd-line); background: var(--mtd-ground); }
.mtd-header__inner,
.mtd-footer__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 1.25rem;
}
.mtd-logo { font-family: var(--mtd-font-display); font-size: 1.375rem; font-weight: 500; letter-spacing: -0.01em; }
.mtd-logo a { color: var(--mtd-text); text-decoration: none; }
.mtd-logo span { color: var(--mtd-brass); }
.mtd-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.75rem; font-size: 0.9375rem; font-weight: 500; }
.mtd-nav a { text-decoration: none; color: var(--mtd-ink); }
.mtd-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

.mtd-footer { border-top: 1px solid var(--mtd-line); color: var(--mtd-muted); font-size: 0.9375rem; }
.mtd-footer__inner { align-items: flex-start; gap: 2rem; padding-block: 3rem; }
.mtd-footer__about { max-width: 22rem; }
.mtd-footer__about p { margin: 0.5rem 0 0; }
.mtd-footer__links { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; }
.mtd-footer__links a { color: var(--mtd-ink); }

/* ---------- 12. Landing page (v1.2.0) ----------------------------------- */
.mtd-section { padding-block: var(--space-2xl, 4.5rem) var(--space-l, 2.5rem); }
.mtd-section--white { background: var(--mtd-surface); border-block: 1px solid var(--mtd-line); }
.mtd-section-head__title { margin: 0; font-size: clamp(2rem, 3.5vw, 2.75rem); }
.mtd-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem; }

.mtd-hero { padding-block: var(--space-3xl, 5.5rem) var(--space-2xl, 4.5rem); }
.mtd-hero__title { max-width: 55rem; margin: 1.25rem 0 0; font-size: clamp(2.75rem, 6vw, 5rem); line-height: 1.02; letter-spacing: -0.025em; }
.mtd-hero__title em { color: var(--mtd-ink); }
.mtd-hero__lede { max-width: 37.5rem; margin: 1.75rem 0 0; font-size: 1.1875rem; color: var(--mtd-muted); }
.mtd-hero .mtd-search { margin-top: 3rem; }
.mtd-popular { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; margin-top: 1.375rem; font-size: 0.9375rem; }
.mtd-popular__label { color: var(--mtd-muted); margin-right: 0.25rem; }

.mtd-promise {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 2.5rem; padding-block: 2.5rem;
}
.mtd-promise__title { font-family: var(--mtd-font-display); font-size: 1.5rem; line-height: 1.2; margin: 0; }
.mtd-promise__text { margin: 0.5rem 0 0; color: var(--mtd-muted); font-size: 1rem; }

.mtd-ruled-grid__name { font-family: var(--mtd-font-display); font-size: 1.75rem; line-height: 1.1; display: block; }
.mtd-ruled-grid__note { font-size: 0.9375rem; color: var(--mtd-muted); }

.mtd-regions { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 2rem; padding-top: 2rem; }
.mtd-regions__name {
  margin: 0 0 0.75rem; font-family: var(--mtd-font-body); font-size: 0.8125rem;
  letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--mtd-muted);
}
.mtd-regions__towns { display: flex; flex-direction: column; gap: 0.25rem; }
.mtd-regions__towns a { text-decoration: none; padding-block: 0.25rem; display: inline-block; }

.mtd-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 3rem; padding-top: 2.5rem; }
.mtd-steps__title { font-family: var(--mtd-font-display); font-size: 1.75rem; margin: 0; }
.mtd-steps__text { margin: 0.625rem 0 0; color: var(--mtd-muted); }

.mtd-featured { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 2rem; padding-top: 2.25rem; }
.mtd-feature-card { display: flex; flex-direction: column; gap: 1rem; color: var(--mtd-text); }
.mtd-feature-card__photo { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; border-radius: var(--mtd-radius); background: #E4E7E2; margin: 0; }
.mtd-feature-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.mtd-feature-card__name { font-size: 1.875rem; line-height: 1.15; margin: 0.25rem 0 0; }
.mtd-feature-card__name a { color: var(--mtd-text); text-decoration: none; }
.mtd-feature-card__summary { margin: 0.375rem 0 0; color: var(--mtd-muted); font-size: 1rem; }
.mtd-feature-card__meta { margin: 0.75rem 0 0; font-size: 0.9375rem; }

.mtd-band-ink__inner { display: flex; flex-wrap: wrap; gap: 3.5rem; align-items: center; justify-content: space-between; padding-block: var(--space-3xl, 6rem); }
.mtd-band-ink__copy { flex: 1 1 32rem; }
.mtd-band-ink__title { margin: 0; color: var(--mtd-ground); font-size: clamp(2.25rem, 4vw, 3.5rem); }
.mtd-price-card { flex: 0 1 24rem; border: 1px solid rgb(242 242 239 / .25); border-radius: var(--mtd-radius-lg); padding: 2rem; }
.mtd-price-card__price { font-family: var(--mtd-font-display); font-size: 2.75rem; line-height: 1; margin: 0.375rem 0 0; color: var(--mtd-ground); }
.mtd-price-card__list { margin: 1.375rem 0 1.75rem; padding-left: 1.125rem; display: flex; flex-direction: column; gap: 0.5rem; }
.mtd-band-ink .mtd-btn--light { background: var(--mtd-ground); color: var(--mtd-ink); border-color: var(--mtd-ground); width: 100%; }

/* FAQ: v1.3.3 two-column editorial layout (title left, questions right) */
.mtd-faq {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 1.5rem 4rem; align-items: start;
  padding-block: 0 var(--space-l, 2.5rem);
}
@media (max-width: 860px) { .mtd-faq { grid-template-columns: 1fr; } }
.mtd-faq__title { margin: 0; font-size: clamp(2rem, 3.5vw, 2.75rem); }
.mtd-faq__list { border-bottom: 1px solid var(--mtd-line-strong); }
.mtd-faq__list .accordion-item { border-top: 1px solid var(--mtd-line-strong); }
.mtd-faq__list .accordion-title-wrapper {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.25rem 0; cursor: pointer; background: none;
}
.mtd-faq__list .accordion-title-wrapper::after {
  content: "+"; font-family: var(--mtd-font-body); font-size: 1.5rem; line-height: 1;
  color: var(--mtd-ink); transition: transform .2s ease;
}
.mtd-faq__list .brx-open .accordion-title-wrapper::after { transform: rotate(45deg); }
.mtd-faq__list .accordion-title-wrapper .icon,
.mtd-faq__list .accordion-title-wrapper svg,
.mtd-faq__list .accordion-title-wrapper i { display: none; }
.mtd-faq__list .accordion-title,
.mtd-faq__list .accordion-title-wrapper :is(h1, h2, h3, h4, h5, h6, .title) {
  margin: 0; font-family: var(--mtd-font-display); font-weight: 400;
  font-size: 1.375rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--mtd-text);
}
.mtd-faq__list .accordion-content-wrapper { padding: 0 2.5rem 1.25rem 0; color: var(--mtd-muted); }
.mtd-faq__list .accordion-content-wrapper p { margin: 0; }

/* ---------- 13. Results archive (v1.2.0) -------------------------------- */
.mtd-archive-head { padding-block: 2.5rem 1rem; }
.mtd-archive-head__title { margin: 0.75rem 0 0; font-size: clamp(2.25rem, 4vw, 3.25rem); }
.mtd-archive-body { display: flex; flex-wrap: wrap; gap: 3rem; align-items: flex-start; padding-block: 1.5rem 6rem; }
.mtd-filters { flex: 1 1 16rem; max-width: 19rem; display: flex; flex-direction: column; gap: 1.75rem; }
.mtd-filters__group { border-top: 1px solid var(--mtd-line); padding-top: 1.5rem; }
.mtd-filters__group:first-child { border-top: 0; padding-top: 0; }
.mtd-filters__title {
  margin: 0 0 0.75rem; font-family: var(--mtd-font-body); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--mtd-muted);
}
.mtd-results { flex: 999 1 35rem; min-width: 0; }
.mtd-results__bar { padding-bottom: 1rem; border-bottom: 1px solid var(--mtd-text); color: var(--mtd-muted); font-size: 0.9375rem; }
.mtd-card__instrument { margin: 0; }
.mtd-card__name { margin: 0.25rem 0 0; font-size: 1.875rem; line-height: 1.15; }
.mtd-card__name a { color: var(--mtd-text); text-decoration: none; }
.mtd-card__summary { margin: 0.5rem 0 0; color: var(--mtd-muted); max-width: 35rem; }
.mtd-card__meta { margin-top: 0.875rem; color: var(--mtd-text); }
.mtd-card__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--mtd-radius); }
.mtd-pagination { padding-top: 2.5rem; display: flex; justify-content: center; }

/* ---------- 14. Waitlist / coming soon (v1.3.0) ------------------------ */
.mtd-waitlist-hero {
  background-color: var(--mtd-ink); color: var(--mtd-ground);
  background-image: repeating-linear-gradient(to bottom, transparent 0 21px, rgb(217 196 138 / .22) 21px 22px);
  background-size: 100% 110px; background-repeat: no-repeat; background-position: 0 100%;
}
.mtd-waitlist-hero__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; padding-top: 1.75rem; }
.mtd-waitlist-hero .mtd-logo a { color: var(--mtd-ground); }
.mtd-waitlist-hero .mtd-logo span { color: var(--mtd-brass-soft); }
.mtd-waitlist-hero__launch { margin: 0; font-size: 0.875rem; color: #C9D4CF; }
.mtd-waitlist-hero__inner {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 3.5rem; padding-block: 4.5rem 8.75rem;
}
.mtd-waitlist-hero__copy { flex: 1 1 32rem; min-width: 0; padding-top: 1.5rem; }
.mtd-waitlist-hero .mtd-eyebrow { color: var(--mtd-brass-soft); }
.mtd-waitlist-hero__title {
  margin: 1.125rem 0 0; color: var(--mtd-ground);
  font-size: clamp(2.75rem, 5.6vw, 4.75rem); line-height: 1.02; letter-spacing: -0.025em;
}
.mtd-waitlist-hero__title em { color: var(--mtd-brass-soft); }
.mtd-waitlist-hero__lede { margin: 1.625rem 0 0; max-width: 32.5rem; font-size: 1.1875rem; color: #C9D4CF; }

.mtd-checklist { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.mtd-checklist li { position: relative; padding-left: 2rem; }
.mtd-checklist li::before {
  content: ""; position: absolute; left: 0; top: 0.2em; width: 1.25rem; height: 1.25rem;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9C48A' stroke-width='2'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
}

.mtd-waitlist-card { flex: 0 1 27.5rem; color: var(--mtd-text); box-shadow: 0 24px 60px -30px rgb(0 0 0 / .5); border: 0; }
.mtd-waitlist-card__title { margin: 0; font-size: 2rem; line-height: 1.1; }
.mtd-waitlist-card__sub { margin: 0.375rem 0 0; font-size: 0.9375rem; color: var(--mtd-muted); }
.mtd-waitlist-card__note { margin: 1rem 0 0; font-size: 0.8125rem; color: var(--mtd-muted); text-align: center; }
/* v1.3.9: Bricksforge Pro Forms in the waitlist card.
   Core Framework sets the root to 10px, so sizes here are in px on purpose. */
.mtd-waitlist-card .brxe-brf-pro-forms { display: flex; flex-direction: column; gap: 18px; margin-top: 22px; }
.mtd-waitlist-card .brxe-brf-pro-forms .form-group { padding-bottom: 0 !important; margin: 0; }
.mtd-waitlist-card .brxe-brf-pro-forms .form-group > label {
  margin: 0 0 7px; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--mtd-text); letter-spacing: 0;
}
.mtd-waitlist-card .brxe-brf-pro-forms :is(input[type="text"], input[type="email"], select, textarea) {
  width: 100%; height: 46px; min-height: 0; margin: 0; padding: 0 14px;
  font: inherit; font-size: 16px; line-height: 1.2; color: var(--mtd-text);
  background-color: #fff; border: 1px solid var(--mtd-line-strong); border-radius: 6px; box-shadow: none;
}
.mtd-waitlist-card .brxe-brf-pro-forms :is(input, select, textarea):focus { outline: 2px solid var(--mtd-ink); outline-offset: 1px; border-color: var(--mtd-ink); }
.mtd-waitlist-card .brxe-brf-pro-forms ::placeholder { color: var(--mtd-muted); opacity: .75; }
.mtd-waitlist-card .brxe-brf-pro-forms select {
  -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%231E3A32' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
/* radio + checkbox options: one per line (the #role rule beats Bricksforge's own row setting) */
.mtd-waitlist-card .brxe-brf-pro-forms .options-wrapper,
.mtd-waitlist-card #role .options-wrapper { display: flex !important; flex-direction: column !important; align-items: flex-start; gap: 10px; }
.mtd-waitlist-card .brxe-brf-pro-forms .options-wrapper > li { display: flex; align-items: center; gap: 10px; margin: 0; }
.mtd-waitlist-card .brxe-brf-pro-forms .options-wrapper input:is([type="radio"], [type="checkbox"]) {
  -webkit-appearance: auto; appearance: auto; width: 18px; height: 18px; min-width: 0; min-height: 0;
  margin: 0; padding: 0; flex: none; accent-color: var(--mtd-ink); box-shadow: none;
}
.mtd-waitlist-card .brxe-brf-pro-forms .options-wrapper label { margin: 0; font-size: 15px; font-weight: 400; line-height: 1.4; color: var(--mtd-text); cursor: pointer; }
.mtd-waitlist-card .brxe-brf-pro-forms-field-checkbox-wrapper .options-wrapper > li { align-items: flex-start; }
.mtd-waitlist-card .brxe-brf-pro-forms-field-checkbox-wrapper input[type="checkbox"] { margin-top: 2px; }
.mtd-waitlist-card .brxe-brf-pro-forms-field-checkbox-wrapper label { font-size: 14px; line-height: 1.55; color: var(--mtd-muted); }
.mtd-waitlist-card .brxe-brf-pro-forms a { color: var(--mtd-ink); text-decoration: underline; text-underline-offset: 2px; }
.mtd-waitlist-card .brxe-brf-pro-forms > div:last-child, .mtd-waitlist-card .brxe-brf-pro-forms > div:last-child > * { width: 100%; }
.mtd-waitlist-card .brxe-brf-pro-forms :is(button, [type="submit"]) {
  width: 100%; min-height: 50px; justify-content: center; font-size: 16px; letter-spacing: 0.01em;
}
.mtd-waitlist-card__title { font-size: 30px; }
.mtd-waitlist-card__sub { font-size: 15px; }
.mtd-waitlist-card__note { font-size: 13px; }
.mtd-waitlist-card { flex: 0 1 440px; padding: 36px; }
.mtd-waitlist-hero { font-size: 17px; }
.mtd-waitlist-hero__lede { max-width: 520px; font-size: 19px; line-height: 1.55; }
.mtd-waitlist-hero .mtd-checklist { gap: 12px; margin-top: 28px; }
.mtd-waitlist-hero .mtd-checklist li { padding-left: 30px; }
.mtd-waitlist-hero .mtd-eyebrow { font-size: 13px; }
.mtd-waitlist-hero__launch { font-size: 14px; }
.mtd-waitlist-hero .mtd-checklist li::before { width: 20px; height: 20px; top: 0.15em; }
.mtd-waitlist-hero .mtd-logo { font-size: 22px; }
@media (max-width: 767px) { .mtd-waitlist-card { padding: 24px; } }

.mtd-audiences {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  border-top: 1px solid var(--mtd-text); margin-top: var(--space-2xl, 4rem);
}
/* v1.3.3: tighter rhythm on the waitlist page */
.mtd-waitlist-audiences + .mtd-section { padding-top: var(--space-xl, 3rem); }
.mtd-audiences__col { padding: 2.25rem 2.5rem 2.25rem 0; }
.mtd-audiences__col + .mtd-audiences__col { padding: 2.25rem 0 2.25rem 2.5rem; border-left: 1px solid var(--mtd-line); }
@media (max-width: 720px) {
  .mtd-audiences__col, .mtd-audiences__col + .mtd-audiences__col { padding: 2rem 0; border-left: 0; }
  .mtd-audiences__col + .mtd-audiences__col { border-top: 1px solid var(--mtd-line); }
}
.mtd-audiences__title { margin: 0.75rem 0 0; font-size: 2.375rem; line-height: 1.1; letter-spacing: -0.015em; }
.mtd-audiences__list { margin: 1.375rem 0 0; padding-left: 1.125rem; display: flex; flex-direction: column; gap: 0.625rem; color: #2B3631; }

/* ---------- 15. Legal pages: privacy policy, terms (v1.3.4) ------------- */
.mtd-legal { padding-block: var(--space-2xl, 4rem) var(--space-3xl, 6rem); }
.mtd-legal__head { max-width: 46rem; margin-inline: auto; padding-bottom: 1.75rem; border-bottom: 1px solid var(--mtd-text); }
.mtd-legal__title { margin: 0.75rem 0 0; font-size: clamp(2.5rem, 5vw, 3.75rem); line-height: 1.05; letter-spacing: -0.025em; }
.mtd-legal__meta { margin: 1rem 0 0; color: var(--mtd-muted); font-size: 0.9375rem; }
.mtd-legal__body { max-width: 46rem; margin-inline: auto; padding-top: 1rem; }
.mtd-legal__body h2 {
  font-size: 1.625rem; margin: 2.5rem 0 0.75rem; padding-top: 1.5rem;
  border-top: 1px solid var(--mtd-line);
}
.mtd-legal__body h2:first-child { border-top: 0; padding-top: 0; }
.mtd-legal__body p { margin: 0 0 1em; }
.mtd-legal__body ul { margin: 0 0 1em; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.mtd-legal__body a { color: var(--mtd-ink); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}