/* ============================================================
   Modern Training - Client showcase one-pager
   ------------------------------------------------------------
   Styles for the private, co-branded sales pages that use the
   "Modern Training Showcase" page template (see
   templates/template-showcase.php). Loaded only on those pages.

   Every rule is scoped under .mt-showcase on purpose. These class
   names are short and generic (.nav, .section, .lead), and the
   GeneratePress parent theme is not in this repository, so scoping
   is what guarantees no accidental overlap in either direction.

   Design source: "design_handoff_dq_sales_page" (Claude Design).
   All colors, type, and spacing come from tokens.css.

   THE ACCENT RULE: Modern Training orange is the page's foundation,
   used for nav, headings, eyebrows, and CTAs. A client's own brand
   colors appear ONLY inside sample content, scoped under a client
   class (.dqx for Dairy Queen), so the client color never leaks
   into Modern Training chrome.

   Contents:
     1. Layout + shared type
     2. Buttons + dot motif
     3. Co-brand nav
     4. Hero + client logo row
     5. Before / after transform
     6. Phased plan (ink band)
     7. Profit chain
     8. Footer
     9. Dairy Queen scoped content (.dqx)
    10. Mobile rules (single 980px breakpoint)
    11. Client colors, one block per page (.client-brand)
    12. IBWA components (course mock, findings, scenario, plan,
        sponsorship), from "design_handoff_ibwa_showcase"
   ============================================================ */

/* ----- 1. Layout + shared type ------------------------------ */

.mt-showcase {
  --accent: var(--mt-orange);
  --maxw: 1200px;
  background: var(--mt-white);
  color: var(--fg-1);
  font-family: var(--font-body);
}
.mt-showcase *,
.mt-showcase *::before,
.mt-showcase *::after { box-sizing: border-box; }

html:has(.mt-showcase) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html:has(.mt-showcase) { scroll-behavior: auto; }
  .mt-showcase * { transition: none !important; }
}

.mt-showcase img { max-width: 100%; }

.mt-showcase .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; }
.mt-showcase .section { padding: 96px 0; }
.mt-showcase .section--tight { padding: 72px 0; }
.mt-showcase .section--alt { background: var(--bg-2); }
.mt-showcase .section--ink { background: var(--mt-ink); color: #fff; }

.mt-showcase .eyebrow {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
}
.mt-showcase .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.mt-showcase .eyebrow--ink { color: #FFB976; }

.mt-showcase .h-sec {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0 0 18px;
  text-wrap: balance;
}
.mt-showcase .h-sec .hl { color: var(--accent); }
.mt-showcase .lead {
  font-size: 20px;
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 640px;
  margin: 0 0 28px;
}
.mt-showcase .section--ink .lead { color: rgba(255, 255, 255, 0.78); }
.mt-showcase .section--ink .h-sec { color: #fff; }
.mt-showcase .section--ink .hl-warm { color: #FFB976; }

/* ----- 2. Buttons + dot motif ------------------------------- */

.mt-showcase .btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  padding: 14px 24px;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-base) var(--ease-out),
              filter var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.mt-showcase .btn .arw { transition: transform var(--dur-base) var(--ease-out); }
.mt-showcase .btn:hover .arw { transform: translateX(3px); }
.mt-showcase .btn-primary { background: var(--accent); color: #fff; }
.mt-showcase .btn-primary:hover,
.mt-showcase .btn-primary:focus-visible { filter: brightness(0.92); transform: translateY(-1px); color: #fff; }
.mt-showcase .btn-ghost { background: transparent; color: var(--mt-navy); border-color: var(--border-strong); }
.mt-showcase .btn-ghost:hover,
.mt-showcase .btn-ghost:focus-visible { border-color: var(--accent); color: var(--accent); }
.mt-showcase .btn-lg { padding: 17px 30px; font-size: 16px; }
.mt-showcase .btn:focus-visible { outline: 2px solid var(--mt-orange); outline-offset: 3px; }
.mt-showcase .cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

.mt-showcase .dots { display: inline-flex; gap: 9px; align-items: center; }
.mt-showcase .dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--mt-ink); }
.mt-showcase .dots span:nth-child(1),
.mt-showcase .dots span:nth-child(5) { width: 12px; height: 12px; }
.mt-showcase .dots span:nth-child(2),
.mt-showcase .dots span:nth-child(4) { width: 7px; height: 7px; }
.mt-showcase .dots span:nth-child(3) { width: 6px; height: 6px; background: var(--accent); }

/* ----- 3. Co-brand nav -------------------------------------- */

.mt-showcase .nav {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 40px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
}
/* The WordPress admin bar is 32px tall and fixed, so logged-in
   editors would otherwise have the nav hide underneath it. */
.admin-bar .mt-showcase .nav { top: 32px; }

.mt-showcase .cobrand { display: flex; align-items: center; gap: 16px; }
.mt-showcase .cobrand img.mt { height: 30px; width: auto; display: block; }
.mt-showcase .cobrand .x { color: var(--fg-3); font: 400 18px/1 var(--font-display); }
.mt-showcase .cobrand img.client { height: 34px; width: auto; display: block; }
.mt-showcase .nav-spacer { flex: 1; }
.mt-showcase .nav-private {
  font: 700 11px/1 var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mt-showcase .nav-private .lock { font-size: 12px; }
.mt-showcase .nav .btn { padding: 11px 18px; font-size: 14px; }

/* ----- 4. Hero + client logo row ---------------------------- */

.mt-showcase .hero { padding: 72px 0 0; }
.mt-showcase .hero-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: 60px;
  align-items: center;
}
.mt-showcase .hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 4.6vw, 62px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin: 0 0 22px;
  text-wrap: balance;
  color: var(--fg-1);
}
.mt-showcase .hero h1 .hl { color: var(--accent); }
.mt-showcase .hero .micro {
  font-size: 13px;
  color: var(--fg-3);
  margin: 18px 0 0;
  max-width: 460px;
  line-height: 1.5;
}
.mt-showcase .hero-visual { position: relative; }
.mt-showcase .hero-visual .hero-photo {
  width: 100%;
  height: 470px;
  object-fit: cover;
  /* Weighted right so the "Welcome to the home of happiness" sign
     stays readable with all three crew members still in frame. */
  object-position: 85% center;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  display: block;
}
.mt-showcase .hero-dots { position: absolute; right: 22px; top: -22px; }
.mt-showcase .hero-quote {
  position: absolute;
  left: -26px;
  bottom: -28px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  padding: 20px 24px;
  max-width: 270px;
  margin: 0;
}
.mt-showcase .hero-quote .qm {
  color: var(--accent);
  font: 800 40px/0.5 var(--font-display);
  display: block;
  margin-bottom: 12px;
}
.mt-showcase .hero-quote p { font: 700 16px/1.35 var(--font-display); color: var(--mt-navy); margin: 0 0 12px; }
.mt-showcase .hero-quote .who { font: 400 12px/1.35 var(--font-body); color: var(--fg-2); }

.mt-showcase .clients { border-top: 1px solid var(--border-subtle); margin-top: 60px; padding: 30px 0 72px; }
.mt-showcase .clients-label {
  font: 700 12px/1 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  text-align: center;
  margin: 0 0 30px;
}
.mt-showcase .client-row { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
/* Equal-width cells so the logos distribute evenly and the middle
   one stays centered regardless of each logo's own proportions. */
.mt-showcase .client-logo {
  flex: 1 1 0;
  max-width: 178px;
  min-width: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mt-showcase .client-logo img { display: block; width: auto; max-width: 100%; object-fit: contain; }
/* Per-logo heights, tuned so optical weight is even despite very
   different logo shapes. */
.mt-showcase .client-logo.l-kk img     { height: 32px; }
.mt-showcase .client-logo.l-ihop img   { height: 48px; }
.mt-showcase .client-logo.l-uniqlo img { height: 58px; }
.mt-showcase .client-logo.l-bjs img    { height: 56px; }
.mt-showcase .client-logo.l-take5 img  { height: 62px; }
.mt-showcase .client-logo.l-crocs img  { height: 34px; }
.mt-showcase .client-logo.l-pga img    { height: 62px; }
.mt-showcase .client-logo.l-trust img  { height: 40px; }

/* ----- 5. Before / after transform -------------------------- */

.mt-showcase .studied-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.mt-showcase .transform { display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: center; }
.mt-showcase .doc-card {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: #fff;
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.mt-showcase .doc-card .doc-top {
  padding: 10px 14px;
  font: 700 11px/1 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-2);
}
.mt-showcase .doc-card .doc-body { padding: 18px; }
.mt-showcase .doc-line { height: 8px; border-radius: 4px; background: var(--bg-3); margin-bottom: 9px; }
.mt-showcase .doc-line.s { width: 60%; }
.mt-showcase .doc-line.m { width: 85%; }
.mt-showcase .doc-card.raw .doc-body { filter: grayscale(0.2); }
.mt-showcase .transform .arrow { font-size: 26px; color: var(--accent); text-align: center; }

/* ----- 6. Phased plan (ink band) ---------------------------- */

.mt-showcase .prog-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; }
.mt-showcase .tracks { display: flex; flex-direction: column; gap: 14px; margin: 0 0 28px; }
.mt-showcase .track {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  background: rgba(255, 255, 255, 0.05);
}
.mt-showcase .track .tn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 14px/1 var(--font-display);
  flex-shrink: 0;
}
.mt-showcase .track .tname { font: 700 17px/1.2 var(--font-display); color: #fff; margin: 0 0 4px; }
.mt-showcase .track .tsub { font: 400 14px/1.4 var(--font-body); color: rgba(255, 255, 255, 0.74); margin: 0; }
.mt-showcase .prog-values { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 36px; }
.mt-showcase .prog-value h5 { font: 700 16px/1.2 var(--font-display); color: #fff; margin: 0 0 6px; }
.mt-showcase .prog-value p { font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.72); margin: 0; }
.mt-showcase .prog-levels { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.mt-showcase .level-pill {
  font: 700 13px/1 var(--font-display);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-pill);
  padding: 9px 16px;
}
.mt-showcase .catalog-note { font-size: 13px; color: rgba(255, 255, 255, 0.6); margin: 24px 0 0; }
/* Pushes the right column down so its top aligns with the left
   column's intro paragraph rather than its heading. */
.mt-showcase .prog-aside { padding-top: 93px; }

/* ----- 7. Profit chain -------------------------------------- */

.mt-showcase .chain { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 0; }
.mt-showcase .chain .node {
  font: 800 15px/1 var(--font-display);
  color: var(--mt-navy);
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 11px 16px;
}
.mt-showcase .chain .node.rev { color: #fff; background: var(--accent); border-color: var(--accent); }
.mt-showcase .chain .sep { color: var(--accent); font-weight: 800; }

.mt-showcase .cta-final { text-align: center; }
.mt-showcase .cta-final .h-sec { margin-left: auto; margin-right: auto; }
.mt-showcase .cta-final .lead { margin-left: auto; margin-right: auto; }
.mt-showcase .cta-final .cta-row { justify-content: center; }

/* ----- 8. Footer -------------------------------------------- */

.mt-showcase .sc-footer { background: var(--mt-ink); color: #9a9ba1; padding: 48px 0 28px; }
.mt-showcase .sc-footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.mt-showcase .sc-footer img { height: 30px; width: auto; }
.mt-showcase .sc-footer .fcopy { font-size: 13px; line-height: 1.5; }
.mt-showcase .sc-footer .fspace { flex: 1; }
.mt-showcase .sc-footer .badge {
  font: 700 11px/1 var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid #3b3a42;
  border-radius: var(--radius-pill);
  padding: 7px 13px;
  color: #9a9ba1;
}

/* Share button: the script holds it at its widest label's width, so
   shorter labels center inside it instead of shrinking the button. */
.mt-showcase .share-btn { justify-content: center; }
.mt-showcase .share-btn.is-copied { border-color: var(--mt-success); color: var(--mt-success); }

/* ============================================================
   9. Dairy Queen scoped content (.dqx)
   ------------------------------------------------------------
   Dairy Queen red and blue live ONLY in here. See the accent
   rule at the top of this file.
   ============================================================ */

.mt-showcase .dqx { --dq-red: #EE3B41; --dq-blue: #0082C0; }

/* Knowledge-base mock (the "after" card in the transform) */
.mt-showcase .dqx .doc-card.live { border-color: var(--dq-blue); box-shadow: 0 8px 24px rgba(0, 130, 192, 0.16); }
.mt-showcase .dqx .doc-card.live .doc-top { color: var(--dq-blue); }
.mt-showcase .dqx .kb-h { height: 14px; border-radius: 4px; background: var(--dq-blue); width: 62%; margin: 0 0 10px; }
.mt-showcase .dqx .kb-h.h2 { height: 10px; width: 46%; background: #66B4DC; margin: 14px 0 10px; }
.mt-showcase .dqx .kb-tags { display: flex; gap: 6px; margin: 12px 0 0; }
.mt-showcase .dqx .kb-tag {
  font: 700 10px/1 var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dq-red);
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  padding: 5px 9px;
}

/* One source, many outputs */
.mt-showcase .outputs-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.mt-showcase .out-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-1);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.mt-showcase .out-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.mt-showcase .out-card .mock {
  background: var(--bg-2);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 250px;
}
.mt-showcase .out-card h4 {
  font: 700 19px/1.2 var(--font-display);
  color: var(--mt-navy);
  margin: 0;
  letter-spacing: -0.01em;
}
.mt-showcase .out-card > p { font-size: 14px; line-height: 1.5; color: var(--fg-2); margin: 0; }
.mt-showcase .dqx .out-tag {
  font: 800 12px/1 var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dq-blue);
}

/* Poster mock */
.mt-showcase .dqx .mock-poster {
  width: 158px;
  background: #fff;
  border-radius: 6px;
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.mt-showcase .dqx .mock-poster .mp-head {
  background: var(--dq-red);
  color: #fff;
  font: 800 10px/1.3 var(--font-display);
  padding: 10px 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mt-showcase .dqx .mock-poster .mp-body { padding: 14px 12px; }
.mt-showcase .dqx .mp-step { display: flex; gap: 7px; align-items: center; margin-bottom: 9px; }
.mt-showcase .dqx .mp-step:last-child { margin-bottom: 0; }
.mt-showcase .dqx .mp-step .n {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--dq-blue);
  color: #fff;
  font: 800 8px/15px var(--font-display);
  text-align: center;
  flex-shrink: 0;
}
.mt-showcase .dqx .mp-step .l { height: 6px; border-radius: 3px; background: var(--bg-3); flex: 1; }
.mt-showcase .dqx .mp-step .l.s { flex: 0 0 62%; }

/* Pocket-card mock */
.mt-showcase .dqx .mock-pocket {
  width: 196px;
  background: #fff;
  border-radius: 8px;
  box-shadow: var(--shadow-1);
  border-top: 6px solid var(--dq-blue);
  padding: 14px;
}
.mt-showcase .dqx .mock-pocket .pk-t {
  font: 800 10px/1.3 var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dq-blue);
  margin: 0 0 12px;
}
.mt-showcase .dqx .pk-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.mt-showcase .dqx .pk-row:last-child { margin-bottom: 0; }
.mt-showcase .dqx .pk-row .bx {
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--dq-red);
  border-radius: 3px;
  flex-shrink: 0;
}
.mt-showcase .dqx .pk-row .l { height: 6px; border-radius: 3px; background: var(--bg-3); flex: 1; }
.mt-showcase .dqx .pk-row .l.s { flex: 0 0 60%; }

/* Phone mock */
.mt-showcase .dqx .mock-phone {
  width: 122px;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow-1);
  border: 1px solid var(--border-subtle);
  padding: 10px 10px 16px;
}
.mt-showcase .dqx .mock-phone .ph-bar {
  width: 38px;
  height: 4px;
  border-radius: 2px;
  background: var(--border-strong);
  margin: 0 auto 10px;
}
.mt-showcase .dqx .mock-phone .ph-head { background: var(--dq-red); border-radius: 6px; height: 24px; margin-bottom: 9px; }
.mt-showcase .dqx .ph-chip {
  height: 18px;
  border-radius: 9px;
  background: #E6F4FB;
  border: 1px solid var(--dq-blue);
  margin-bottom: 7px;
}
.mt-showcase .dqx .ph-chip:last-child { margin-bottom: 0; }
.mt-showcase .dqx .ph-chip.on { background: var(--dq-blue); }

/* Document control tiles (Modern Training chrome, not client-scoped) */
.mt-showcase .control-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.mt-showcase .ctl-tile {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-2);
  padding: 24px 22px;
}
.mt-showcase .ctl-tile .ctl-code {
  font: 800 16px/1 var(--font-display);
  color: var(--mt-orange);
  letter-spacing: 0.02em;
  margin: 0 0 12px;
}
.mt-showcase .ctl-tile h4 {
  font: 700 16px/1.25 var(--font-display);
  color: var(--mt-navy);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.mt-showcase .ctl-tile p { font-size: 14px; line-height: 1.5; color: var(--fg-2); margin: 0; }


/* ============================================================
   9b. Dairy Queen v2 additions (September 2026)
   ------------------------------------------------------------
   Rules for the five sections added in the v2 handoff: the file
   audit (.audit-*, .finding*), the rebuilt job aid (.aid-*), the
   Five Below case (.case-*), the content-management practices
   (.cm-*), and the roadmap band (.dev-*). Ported from the handoff's
   dq.css and scoped under .mt-showcase like everything else here.
   Client colors stay on .dqx / --dq-* so the accent rule still holds.
   ============================================================ */

/* The job aid is Dairy Queen sample content with no .dqx wrapper in the
   handoff markup, so it carries the two client colors itself. */
.mt-showcase .aid-wrap { max-width: 1040px; margin: 0 auto; --dq-red: #EE3B41; --dq-blue: #0082C0; --cat: var(--dq-blue); --cat-deep: #00618F; }
.mt-showcase .aid { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  box-shadow: var(--shadow-2); overflow: hidden; }
.mt-showcase .aid-head { background: var(--cat); color: #fff; padding: 30px 34px 28px; }
.mt-showcase .aid-head .je { display: inline-flex; align-items: center; gap: 9px; font: 800 11px/1 var(--font-display);
  letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.85); margin-bottom: 12px; }
.mt-showcase .aid-head .je .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.55; }
.mt-showcase .aid-head h3 { font: 800 40px/0.96 var(--font-display); margin: 0; letter-spacing: -0.03em; color: #fff; }
.mt-showcase .aid-head p { margin: 10px 0 0; font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.9); }
.mt-showcase .aid-phases { display: grid; grid-template-columns: repeat(4, 1fr); padding: 30px 20px 34px; }
.mt-showcase .aid-phase { min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 0 14px 8px; }
.mt-showcase .aid-phase:nth-child(even) .aid-step { background: rgba(0,130,192,0.06); }
.mt-showcase .aid-phase + .aid-phase { border-left: 1px solid var(--border-subtle); }
.mt-showcase .aid-phase > h4 { display: flex; align-items: center; gap: 10px; margin: 0; align-self: start;
  font: 800 11px/1 var(--font-display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--cat-deep); }
.mt-showcase .aid-phase > h4::after { content: ""; flex: 1 1 auto; height: 2px; background: var(--border-subtle); }
.mt-showcase .aid-step { display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; }
.mt-showcase .aid-step .ph { width: 100%; aspect-ratio: 4 / 3; background: var(--bg-3); flex: 0 0 auto; }
.mt-showcase .aid-step .ph.is-ref { background: #fff; }
.mt-showcase .aid-step .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-showcase .aid-step .ph.is-ref img { object-fit: contain; padding: 10px; }
.mt-showcase .aid-step .row { display: flex; align-items: flex-start; gap: 13px; padding: 14px 16px; }
.mt-showcase .aid-step:has(.ph) .row { min-height: 164px; }
.mt-showcase .aid-step .n { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--cat);
  color: #fff; display: grid; place-items: center; font: 800 16px/1 var(--font-display); }
.mt-showcase .aid-step .sb { min-width: 0; }
.mt-showcase .aid-step .st { font: 800 15px/1.1 var(--font-display); letter-spacing: -0.01em; color: var(--mt-ink); }
.mt-showcase .aid-step p { margin: 5px 0 0; font-size: 13.5px; line-height: 1.35; color: var(--fg-2); text-wrap: pretty; }
.mt-showcase .aid-flag { display: block; margin-top: 7px; font: 800 11px/1.3 var(--font-display);
  color: var(--dq-red); text-transform: uppercase; letter-spacing: 0.1em; }
.mt-showcase .aid-ctrl { border-top: 1px solid var(--border-subtle); background: var(--bg-2);
  display: grid; grid-template-columns: repeat(4, 1fr) 64px; gap: 20px; align-items: center; padding: 16px 34px; }
.mt-showcase .aid-ctrl .f { min-width: 0; }
.mt-showcase .aid-ctrl .f i { display: block; font-style: normal; font: 800 9.5px/1 var(--font-display);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); margin-bottom: 5px; }
.mt-showcase .aid-ctrl .f b { font: 600 13px/1.3 var(--font-mono, ui-monospace); color: var(--mt-navy); }
.mt-showcase .aid-ctrl .f em { font-style: normal; font-size: 12.5px; line-height: 1.35; color: var(--fg-2); }
.mt-showcase .aid-qr { width: 64px; height: 64px; border: 1px solid var(--border-strong); border-radius: 4px;
  display: grid; place-items: center; background: #fff; font: 700 8px/1.2 var(--font-display);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-2); text-align: center; padding: 6px; }
.mt-showcase .aid-note { max-width: 880px; margin: 26px auto 0; font-size: 14.5px; line-height: 1.6;
  color: var(--fg-2); text-align: center; text-wrap: pretty; }
@media (max-width: 980px) {
  .mt-showcase .aid-phases { grid-template-columns: 1fr; row-gap: 26px; }
  .mt-showcase .aid-phase, .mt-showcase .aid-phase + .aid-phase { border-left: 0; }
  .mt-showcase .aid-phase { display: grid; align-content: start; gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 380px)); }
  .mt-showcase .aid-phase > h4 { grid-column: 1 / -1; }
  .mt-showcase .aid-step:not(:has(.ph)) { align-self: start; }
  .mt-showcase .aid-step:has(.ph) .row { min-height: 112px; }
  .mt-showcase .aid-ctrl { grid-template-columns: 1fr 1fr; }
}
.mt-showcase .audit-head { max-width: 880px; margin: 0 auto 46px; text-align: center; }
.mt-showcase .audit-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.mt-showcase .audit-col { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: #fff; overflow: hidden; }
.mt-showcase .audit-col h4 { font: 800 12px/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-2); margin: 0; padding: 15px 20px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-2); }
.mt-showcase .audit-col h4 span { font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 12.5px; margin-left: 8px; }
.mt-showcase .audit-doc { display: grid; grid-template-columns: 1fr auto; gap: 10px 14px; align-items: baseline;
  padding: 13px 20px; border-bottom: 1px solid var(--border-subtle); }
.mt-showcase .audit-doc:last-child { border-bottom: 0; }
.mt-showcase .audit-doc p { margin: 0; font-size: 14.5px; line-height: 1.35; color: var(--mt-navy); font-weight: 600; }
.mt-showcase .audit-doc em { display: block; font-style: normal; font-weight: 400; font-size: 12.5px; color: var(--fg-2); margin-top: 3px; }
.mt-showcase .audit-meta { font: 600 11px/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-2); white-space: nowrap; }
.mt-showcase .finding-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 34px; }
.mt-showcase .finding { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: #fff; padding: 22px 24px; }
.mt-showcase .finding b { display: block; font: 700 15px/1.3 var(--font-display); color: var(--mt-navy); margin-bottom: 8px; }
.mt-showcase .finding p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--fg-2); text-wrap: pretty; }
.mt-showcase .finding code { font-size: 14px; font-weight: 600; color: var(--mt-navy); background: none; padding: 0; }
@media (max-width: 980px) {
  .mt-showcase .audit-cols, .mt-showcase .finding-grid { grid-template-columns: 1fr; }
}
.mt-showcase .case-head { max-width: 860px; margin: 0 auto 44px; text-align: center; }
.mt-showcase .case-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: stretch; }
.mt-showcase .case-panel { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: #fff; overflow: hidden;
  display: flex; flex-direction: column; }
.mt-showcase .case-panel.is-after { border-color: rgba(250,125,0,0.4); }
.mt-showcase .case-tag { display: flex; align-items: baseline; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border-subtle); }
.mt-showcase .case-tag b { font: 800 12px/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); }
.mt-showcase .case-panel.is-after .case-tag b { color: var(--mt-orange); }
.mt-showcase .case-tag span { font-size: 12.5px; color: var(--fg-2); }
.mt-showcase .case-shot { flex: 1; background: var(--bg-2); display: grid; place-items: center; padding: 44px 32px; min-height: 260px; }
.mt-showcase .case-shot img { width: 100%; height: auto; display: block; border-radius: 6px; }
.mt-showcase .case-stack { position: relative; width: 72%; margin: 0 auto; }
.mt-showcase .case-stack img { border: 1px solid var(--border-subtle); border-radius: 4px; box-shadow: var(--shadow-1); }
.mt-showcase .case-stack img:first-child { position: absolute; inset: 0; transform: translate(-6%, -3%) rotate(-2.2deg); }
.mt-showcase .case-stack img:last-child { position: relative; transform: translate(5%, 3%) rotate(1.6deg); }
.mt-showcase .case-shot image-slot { width: 100%; min-height: 300px; }
.mt-showcase .case-panel.is-after .case-shot { padding: 34px 46px; }
.mt-showcase .case-wide { margin-top: 26px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; background: #fff; }
.mt-showcase .case-wide img { width: 100%; height: auto; display: block; }
.mt-showcase .case-cap { font-size: 13px; color: var(--fg-2); margin: 12px 0 0; text-align: center; }
.mt-showcase .case-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px;
  padding-top: 32px; border-top: 1px solid var(--border-subtle); }
.mt-showcase .case-stat b { display: block; font: 800 30px/1 var(--font-display); color: var(--mt-navy); letter-spacing: -0.02em; margin-bottom: 8px; }
.mt-showcase .case-stat p { font-size: 14px; line-height: 1.5; color: var(--fg-2); margin: 0; }
@media (max-width: 980px) {
  .mt-showcase .case-ba, .mt-showcase .case-stats { grid-template-columns: 1fr; }
}
.mt-showcase .dev-band { display: grid; grid-template-columns: 1fr; gap: 30px; }
.mt-showcase .dev-flag { display: inline-flex; align-items: center; gap: 8px; font: 700 11.5px/1 var(--font-display);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); border: 1px dashed var(--border-subtle);
  border-radius: 999px; padding: 8px 14px; margin-bottom: 20px; background: #fff; }
.mt-showcase .dev-band h3 { font: 700 26px/1.2 var(--font-display); color: var(--mt-navy); letter-spacing: -0.02em; margin: 0 0 14px; }
.mt-showcase .dev-band p { font-size: 15px; line-height: 1.6; color: var(--fg-2); margin: 0 0 14px; max-width: 74ch; text-wrap: pretty; }
.mt-showcase .dev-band p:last-child { margin-bottom: 0; }
.mt-showcase .dev-shots { display: grid; grid-template-columns: 1fr; gap: 26px; }
.mt-showcase .dev-shot { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; background: #fff; }
.mt-showcase .dev-shot img { width: 100%; height: auto; display: block; }
.mt-showcase .dev-cap { font-size: 13px; color: var(--fg-2); margin: 11px 0 0; }
@media (max-width: 980px) {
  .mt-showcase .dev-band { grid-template-columns: 1fr; }
}
.mt-showcase .cm-head { max-width: 820px; margin: 0 auto 48px; text-align: center; }
.mt-showcase .cm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 48px; }
.mt-showcase .cm-item { display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start; }
.mt-showcase .cm-num { font: 800 15px/1 var(--font-display); color: var(--mt-orange); border: 1px solid var(--border-subtle);
  border-radius: 50%; width: 44px; height: 44px; display: grid; place-items: center; background: #fff; }
.mt-showcase .cm-item h4 { font: 700 17px/1.25 var(--font-display); color: var(--mt-navy); margin: 0 0 7px; letter-spacing: -0.01em; }
.mt-showcase .cm-item p { font-size: 14.5px; line-height: 1.55; color: var(--fg-2); margin: 0; text-wrap: pretty; }
.mt-showcase .cm-foot { display: grid; grid-template-columns: 1.35fr 1fr; gap: 36px; align-items: start;
  margin-top: 52px; padding-top: 30px; border-top: 1px solid var(--border-subtle); }
.mt-showcase .cm-foot p { font-size: 14.5px; line-height: 1.55; color: var(--fg-2); margin: 0; text-wrap: pretty; }
.mt-showcase .cm-foot .cm-road { font-size: 13.5px; color: var(--fg-2); }
.mt-showcase .cm-foot strong { color: var(--mt-navy); font-weight: 700; }
@media (max-width: 980px) {
  .mt-showcase .cm-grid, .mt-showcase .cm-foot { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  /* Below 980px the handoff puts the steps in two columns; on a phone
     that is two 140px columns and the text breaks a word per line. */
  .mt-showcase .aid-phase { grid-template-columns: 1fr; }
  .mt-showcase .aid-ctrl { grid-template-columns: 1fr; }
  .mt-showcase .aid-head h3 { font-size: 30px; }
  .mt-showcase .aid-head, .mt-showcase .aid-ctrl { padding-left: 20px; padding-right: 20px; }
}

/* ----- 10. Mobile rules (single 980px breakpoint) ----------- */

@media (max-width: 980px) {
  .mt-showcase .hero-grid,
  .mt-showcase .studied-grid,
  .mt-showcase .prog-grid { grid-template-columns: 1fr; }
  .mt-showcase .prog-values { grid-template-columns: 1fr; }
  .mt-showcase .prog-aside { padding-top: 0; }
  .mt-showcase .outputs-row { grid-template-columns: 1fr; }
  .mt-showcase .control-row { grid-template-columns: 1fr; }
  .mt-showcase .out-card .mock { min-height: 200px; }

  /* The nav's private label is the first thing to go: the co-brand
     lockup and the CTA are what have to survive a narrow screen. */
  .mt-showcase .nav { padding: 12px 20px; gap: 12px; }
  .mt-showcase .nav-private { display: none; }
  .mt-showcase .cobrand { gap: 10px; }
  .mt-showcase .cobrand img.mt { height: 24px; }
  .mt-showcase .cobrand img.client { height: 27px; }

  .mt-showcase .section { padding: 64px 0; }
  .mt-showcase .section--tight { padding: 56px 0; }
  .mt-showcase .wrap,
  .mt-showcase .hero-grid,
  .mt-showcase .sc-footer-inner { padding-left: 20px; padding-right: 20px; }
  .mt-showcase .hero { padding-top: 48px; }
  .mt-showcase .lead { font-size: 18px; }

  /* The quote card is absolutely positioned on desktop, overlapping
     the photo. On a phone there is no room for that, so it becomes a
     normal block underneath. */
  /* A phone crops the photo harder, so pull back toward the crew and
     let the sign go rather than losing a person off the left edge. */
  .mt-showcase .hero-visual .hero-photo { height: 320px; object-position: 58% center; }
  .mt-showcase .hero-dots { display: none; }
  .mt-showcase .hero-quote {
    position: static;
    max-width: none;
    margin-top: 20px;
    box-shadow: var(--shadow-2);
  }
  .mt-showcase .clients { margin-top: 40px; padding-bottom: 56px; }

  .mt-showcase .transform { grid-template-columns: 1fr; }
  .mt-showcase .transform .arrow { transform: rotate(90deg); }

  .mt-showcase .cta-row .btn { justify-content: center; }
}

/* ============================================================
   11. Client colors, one block per page (.client-brand)
   ------------------------------------------------------------
   The showcase template from Claude Design puts client-branded
   sample content inside a .client-brand wrapper, which swaps the
   page accent for the client's primary color in that subtree only.
   Because every showcase page shares this stylesheet, the actual
   hex values are keyed to the page: the template prints
   <main id="mt-showcase-{slug}">, so a new client is a new block
   below with four values, and no other CSS. (Dairy Queen predates
   this and keeps its .dqx scoping in section 9.)
   ============================================================ */

.mt-showcase {
  /* Proofing pink from the design system, for review markers only. */
  --mt-review: #FF2E9A;
  --mt-review-tint: #FFEAF5;
}
.mt-showcase .client-brand { --accent: var(--client-primary); }

/* IBWA. The primary is an estimate sampled from the Code of Practice
   cover; IBWA has not supplied an official hex. Swap here if they do. */
#mt-showcase-ibwa .client-brand,
#mt-showcase-ibwa .client-colors {
  --client-primary: #1D5FA8;
  --client-secondary: #0F3D73;
  --client-soft: #E8F1FA;
  --client-sky: #4FA3D8;
  --client-line: #CFE0F2;
}

/* ============================================================
   12. IBWA components
   ------------------------------------------------------------
   Ported from the handoff's showcase-page.css "IBWA PAGE
   COMPONENTS" block and scoped under .mt-showcase. Client colors
   come from the variables above; Modern Training chrome stays
   orange and navy.
   ============================================================ */

/* Centered section heads (the IBWA template pattern) */
.mt-showcase .center-head { max-width: 860px; margin: 0 auto 46px; text-align: center; }
.mt-showcase .center-head .eyebrow { justify-content: center; }
.mt-showcase .center-head .lead { margin-left: auto; margin-right: auto; }
.mt-showcase .center-head .chain { justify-content: center; }

/* Nav: the IBWA mark is white-only artwork, so it sits on a navy chip. */
.mt-showcase .lockchip {
  background: var(--mt-navy);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  display: flex;
  align-items: center;
}
.mt-showcase .lockchip svg { height: 22px; width: 92px; display: block; color: #fff; flex: 0 0 auto; }
.mt-showcase .navlinks { display: flex; align-items: center; gap: 22px; }
.mt-showcase .navlinks a { font: 700 13.5px/1 var(--font-display); color: var(--fg-2); text-decoration: none; }
.mt-showcase .navlinks a:hover,
.mt-showcase .navlinks a:focus-visible { color: var(--mt-orange); }
.mt-showcase .pill-private {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 700 11px/1 var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: 9px 14px;
  margin: 0 0 22px;
}
.mt-showcase .pill-private .lock { width: 9px; height: 9px; border-radius: 2px; background: var(--fg-3); }

/* Hero: the course mock with a scenario card peeking out */
.mt-showcase .hero-stack { position: relative; padding: 0 0 46px; }
.mt-showcase .course-card {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.mt-showcase .course-card .cc-top {
  background: var(--client-secondary);
  color: #fff;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.mt-showcase .course-card .cc-top svg { height: 24px; width: 100px; color: #fff; flex-shrink: 0; }
.mt-showcase .cc-title { font: 800 19px/1.15 var(--font-display); letter-spacing: -0.01em; }
.mt-showcase .cc-title small { display: block; font: 400 12.5px/1.3 var(--font-body); opacity: 0.8; margin-top: 5px; }
.mt-showcase .cc-prog { padding: 18px 24px 4px; }
.mt-showcase .cc-bar { height: 8px; background: var(--bg-3); border-radius: 999px; overflow: hidden; }
.mt-showcase .cc-bar i { display: block; height: 100%; width: 66%; background: var(--client-sky); }
.mt-showcase .cc-bar-label { display: flex; justify-content: space-between; font: 600 12px/1 var(--font-body); color: var(--fg-2); margin-top: 9px; }
.mt-showcase .cc-list { list-style: none; margin: 0; padding: 12px 12px 18px; }
.mt-showcase .cc-list li { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; font: 600 14px/1.25 var(--font-body); }
.mt-showcase .cc-list .n {
  width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%;
  display: grid; place-items: center;
  font: 800 11px/1 var(--font-display);
  background: var(--bg-3); color: var(--fg-2);
}
.mt-showcase .cc-list .done .n { background: var(--mt-success); color: #fff; }
.mt-showcase .cc-list .now { background: var(--client-soft); }
.mt-showcase .cc-list .now .n { background: var(--client-primary); color: #fff; }
.mt-showcase .cc-list .todo { color: var(--fg-3); }
.mt-showcase .cc-list .tag { margin-left: auto; font: 700 11px/1 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--mt-success); }
.mt-showcase .cc-list .now .tag { color: var(--client-primary); }
.mt-showcase .cc-list .exam { border-top: 1px solid var(--border-subtle); margin-top: 6px; padding-top: 14px; font-weight: 800; color: var(--mt-navy); }
.mt-showcase .hero-peek {
  position: absolute;
  left: -30px;
  bottom: 0;
  z-index: 3;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--client-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
  padding: 16px 18px;
  max-width: 284px;
}
.mt-showcase .hero-peek .k { font: 800 10.5px/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--client-primary); margin: 0 0 8px; }
.mt-showcase .hero-peek p { font: 700 14.5px/1.35 var(--font-display); color: var(--mt-navy); margin: 0 0 10px; }
.mt-showcase .hero-peek .opt { display: flex; align-items: center; gap: 8px; font: 600 12px/1.3 var(--font-body); color: var(--fg-2); margin-top: 6px; }
.mt-showcase .hero-peek .opt .bx { width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid var(--border-strong); flex-shrink: 0; }
.mt-showcase .hero-peek .opt.is-right { color: var(--mt-success); font-weight: 700; }
.mt-showcase .hero-peek .opt.is-right .bx { border-color: var(--mt-success); background: var(--mt-success); }
.mt-showcase .hero-dots.is-card { right: 16px; top: -20px; }

/* The shift: today vs with Modern Training */
.mt-showcase .shift { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mt-showcase .shift-col { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: #fff; padding: 28px 30px 24px; }
.mt-showcase .shift-col.is-next { border-color: var(--client-primary); box-shadow: 0 12px 30px rgba(29, 95, 168, 0.14); }
.mt-showcase .shift-col h3 { font: 800 20px/1.2 var(--font-display); letter-spacing: -0.01em; margin: 0 0 14px; color: var(--fg-2); }
.mt-showcase .shift-col.is-next h3 { color: var(--client-primary); }
.mt-showcase .shift-col ul { list-style: none; margin: 0; padding: 0; }
.mt-showcase .shift-col li { padding: 12px 0; border-top: 1px solid var(--border-subtle); font-size: 15.5px; line-height: 1.45; color: var(--fg-1); text-wrap: pretty; }
.mt-showcase .shift-col li:first-child { border-top: 0; padding-top: 0; }
.mt-showcase .shift-col.is-today li { color: var(--fg-2); }

/* Findings */
.mt-showcase .find-lead {
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  gap: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: #fff;
  overflow: hidden;
  margin-bottom: 24px;
}
.mt-showcase .find-row + .find-lead { margin: 24px 0 0; }
.mt-showcase .find-lead .fl-body { padding: 34px 36px 30px; }
.mt-showcase .find-lead h3 { font: 800 24px/1.18 var(--font-display); letter-spacing: -0.02em; color: var(--mt-navy); margin: 0 0 14px; }
.mt-showcase .find-lead p { font-size: 15.5px; line-height: 1.6; color: var(--fg-2); margin: 0 0 12px; text-wrap: pretty; }
.mt-showcase .find-lead .src { font-size: 12.5px; color: var(--fg-3); margin: 0; }
.mt-showcase .fl-figures { background: var(--client-soft); padding: 34px 36px; display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.mt-showcase .fig-stat b { display: block; font: 800 clamp(40px, 5vw, 58px)/0.95 var(--font-display); letter-spacing: -0.03em; color: var(--client-secondary); }
.mt-showcase .fig-stat.is-low b { color: var(--fg-3); }
.mt-showcase .fig-stat span { display: block; font: 600 14px/1.4 var(--font-body); color: var(--fg-2); margin-top: 8px; }
.mt-showcase .fig-stat .track { height: 10px; border-radius: 999px; background: rgba(15, 61, 115, 0.12); margin-top: 12px; overflow: hidden; }
.mt-showcase .fig-stat .track i { display: block; height: 100%; background: var(--client-primary); }
.mt-showcase .fig-stat.is-low .track i { background: var(--border-strong); }
.mt-showcase .find-row { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; }
.mt-showcase .find-card { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: #fff; padding: 28px 30px; }
.mt-showcase .find-card h3 { font: 800 19px/1.25 var(--font-display); letter-spacing: -0.01em; color: var(--mt-navy); margin: 0 0 14px; }
.mt-showcase .find-card p { font-size: 14.5px; line-height: 1.55; color: var(--fg-2); margin: 0 0 12px; text-wrap: pretty; }
.mt-showcase .find-card p:last-child { margin-bottom: 0; }
.mt-showcase .find-card .src { font-size: 12.5px; color: var(--fg-3); }
.mt-showcase .counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 14px; }
.mt-showcase .counts div { background: var(--bg-2); border-radius: 10px; padding: 13px 12px; }
.mt-showcase .counts b { display: block; font: 800 26px/1 var(--font-display); color: var(--mt-navy); }
.mt-showcase .counts span { display: block; font-size: 12.5px; line-height: 1.3; color: var(--fg-2); margin-top: 6px; }
.mt-showcase .zeros { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 14px; }
.mt-showcase .zeros span { font: 600 12.5px/1 var(--font-body); color: var(--mt-danger); background: #FDECEF; border-radius: 999px; padding: 8px 11px; }
.mt-showcase .rule-note {
  background: var(--client-soft);
  border-left: 4px solid var(--client-primary);
  border-radius: 0 10px 10px 0;
  padding: 14px 16px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--fg-1);
  margin: 0 0 12px;
}
.mt-showcase .rule-note b { color: var(--client-secondary); }
.mt-showcase .find-stack { display: grid; gap: 24px; align-content: start; }

/* Certification rebuild: 3 modules to 1 course */
.mt-showcase .rebuild { display: grid; grid-template-columns: 0.82fr auto 1.35fr; gap: 26px; align-items: center; }
.mt-showcase .mods { display: grid; gap: 12px; }
.mt-showcase .mod { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 15px 17px; }
.mt-showcase .mod b { display: block; font: 800 15px/1.2 var(--font-display); color: var(--fg-2); }
.mt-showcase .mod span { font-size: 13px; color: var(--fg-3); }
.mt-showcase .rebuild .arrow { font: 800 30px/1 var(--font-display); color: var(--accent); }
.mt-showcase .onecourse { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); overflow: hidden; }
.mt-showcase .onecourse .oc-head {
  background: var(--client-secondary);
  color: #fff;
  padding: 18px 24px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.mt-showcase .onecourse .oc-head b { font: 800 18px/1.2 var(--font-display); letter-spacing: -0.01em; }
.mt-showcase .onecourse .oc-head span { font: 600 12px/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.mt-showcase .onecourse .oc-body { padding: 22px 24px 20px; }
.mt-showcase .chapters { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; }
.mt-showcase .chapters i { display: block; height: 44px; border-radius: 7px; background: var(--client-soft); border: 1px solid var(--client-line); position: relative; }
.mt-showcase .chapters i::after { content: ""; position: absolute; right: 5px; bottom: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--client-primary); }
.mt-showcase .chapters-key { display: flex; justify-content: space-between; font: 600 11.5px/1 var(--font-body); color: var(--fg-3); margin-top: 9px; }
.mt-showcase .oc-exam {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--client-soft);
  border: 1px solid var(--client-line);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-top: 18px;
}
.mt-showcase .oc-exam b { font: 800 15px/1.2 var(--font-display); color: var(--client-secondary); }
.mt-showcase .oc-exam span { font-size: 13px; color: var(--fg-2); }
.mt-showcase .oc-ctrl { border-top: 1px solid var(--border-subtle); background: var(--bg-2); display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 15px 24px; }
.mt-showcase .oc-ctrl .f i { display: block; font-style: normal; font: 800 9.5px/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); margin-bottom: 5px; }
.mt-showcase .oc-ctrl .f b { font: 700 13px/1.3 var(--font-display); color: var(--mt-navy); }
.mt-showcase .note-under { font-size: 14px; line-height: 1.6; color: var(--fg-2); max-width: 74ch; margin: 18px 0 0; text-wrap: pretty; }

/* Scenario knowledge check (the interactive piece) */
.mt-showcase .scenario { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); overflow: hidden; }
.mt-showcase .scn-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 24px;
  background: var(--client-secondary);
  color: #fff;
  font: 700 13px/1 var(--font-display);
}
.mt-showcase .scn-bar svg { height: 17px; width: 71px; color: #fff; }
.mt-showcase .scn-bar .crumb { font-weight: 500; opacity: 0.78; }
.mt-showcase .scn-grid { display: grid; grid-template-columns: 1.18fr 0.82fr; }
.mt-showcase .scn-main { padding: 28px 30px 26px; border-right: 1px solid var(--border-subtle); }
.mt-showcase .scn-side { padding: 26px; background: var(--bg-2); }
.mt-showcase .scn-prog { display: flex; gap: 6px; margin-bottom: 20px; }
.mt-showcase .scn-prog i { height: 6px; flex: 1; border-radius: 999px; background: var(--bg-3); }
.mt-showcase .scn-prog i.on { background: var(--client-primary); }
.mt-showcase .scn-prog i.ok { background: var(--mt-success); }
.mt-showcase .scn-prog i.bad { background: var(--mt-danger); }
.mt-showcase .scn-k { font: 800 11px/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--client-primary); margin: 0 0 12px; }
.mt-showcase .scn-q { font: 800 22px/1.22 var(--font-display); letter-spacing: -0.02em; color: var(--mt-ink); margin: 0 0 10px; }
.mt-showcase .scn-sit { font-size: 15.5px; line-height: 1.5; color: var(--fg-2); margin: 0 0 18px; text-wrap: pretty; }
.mt-showcase .scn-opts button {
  display: block;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 15px 16px;
  font: 600 15px/1.35 var(--font-body);
  color: var(--fg-1);
  cursor: pointer;
  margin: 0 0 10px;
  min-height: 52px;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.mt-showcase .scn-opts button:hover,
.mt-showcase .scn-opts button:focus-visible { border-color: var(--client-primary); }
.mt-showcase .scn-opts button.ok { border-color: var(--mt-success); background: #EAF6E6; }
.mt-showcase .scn-opts button.no { border-color: var(--mt-danger); background: #FDECEF; }
.mt-showcase .scn-opts button.dim { opacity: 0.45; pointer-events: none; }
.mt-showcase .scn-fb { display: none; border-radius: var(--radius-md); padding: 15px 17px; font-size: 15px; line-height: 1.5; margin-top: 4px; }
.mt-showcase .scn-fb.show { display: block; }
.mt-showcase .scn-fb.ok { background: #EAF6E6; color: #1B5E20; }
.mt-showcase .scn-fb.no { background: #FDECEF; color: #8E1B2E; }
.mt-showcase .scn-fb b { display: block; font: 800 12px/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 7px; }
.mt-showcase .scn-fb .why { display: block; margin-top: 8px; font-size: 14px; opacity: 0.92; }
.mt-showcase .scn-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.mt-showcase .scn-actions .btn { padding: 12px 18px; font-size: 14px; }
.mt-showcase .btn-client { background: var(--client-primary); color: #fff; }
.mt-showcase .btn-client:hover,
.mt-showcase .btn-client:focus-visible { filter: brightness(0.92); color: #fff; }
.mt-showcase .scn-done { display: none; text-align: center; padding: 8px 0 4px; }
.mt-showcase .scn-done.show { display: block; }
.mt-showcase .scn-done .ring { width: 108px; height: 108px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 16px; }
.mt-showcase .scn-done .ring b { width: 84px; height: 84px; border-radius: 50%; background: #fff; display: grid; place-items: center; font: 800 22px/1 var(--font-display); }
.mt-showcase .scn-done h4 { font: 800 22px/1.2 var(--font-display); margin: 0 0 6px; color: var(--mt-ink); }
.mt-showcase .scn-done > p { font-size: 15px; line-height: 1.5; color: var(--fg-2); margin: 0 auto; max-width: 46ch; }
.mt-showcase .scn-remed {
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: left;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 13px 15px;
  margin: 18px auto 0;
  max-width: 520px;
}
.mt-showcase .scn-remed .ic { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 8px; background: var(--client-soft); color: var(--client-primary); display: grid; place-items: center; font: 800 13px/1 var(--font-display); }
.mt-showcase .scn-remed b { display: block; font: 700 14px/1.2 var(--font-display); color: var(--mt-navy); }
.mt-showcase .scn-remed span { font-size: 13px; color: var(--fg-2); }
.mt-showcase .scn-side h4 { font: 800 15px/1.25 var(--font-display); color: var(--mt-navy); margin: 0 0 7px; }
.mt-showcase .scn-side p { font-size: 14px; line-height: 1.5; color: var(--fg-2); margin: 0 0 8px; }
.mt-showcase .scn-lbl { font: 800 11px/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); margin: 22px 0 9px; }
.mt-showcase .scn-lbl:first-child { margin-top: 0; }
.mt-showcase .pool { display: flex; gap: 6px; flex-wrap: wrap; }
.mt-showcase .pool i {
  width: 28px; height: 28px; border-radius: 6px;
  background: #fff; border: 1px solid var(--border-subtle);
  display: grid; place-items: center;
  font: 700 11px/1 var(--font-display); font-style: normal; color: var(--fg-3);
}
.mt-showcase .pool i.on { background: var(--client-primary); border-color: var(--client-primary); color: #fff; }
.mt-showcase .pool i.used { background: var(--client-soft); border-color: var(--client-line); color: var(--client-primary); }
.mt-showcase .adm { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; font-size: 13.5px; }
.mt-showcase .adm div { display: flex; justify-content: space-between; gap: 10px; padding: 10px 13px; border-top: 1px solid var(--border-subtle); }
.mt-showcase .adm div:first-child { border-top: 0; background: var(--bg-3); font: 800 11px/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); }
.mt-showcase .adm span:last-child { font-weight: 700; color: var(--fg-1); }
.mt-showcase .adm .flag { color: var(--mt-danger); }
.mt-showcase .adm .good { color: var(--mt-success); }

/* How we build: before / after figures + three tiles */
.mt-showcase .ba { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.mt-showcase .ba figure { margin: 0; background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-1); }
.mt-showcase .ba figure.is-after { border-color: rgba(29, 95, 168, 0.45); }
.mt-showcase .ba img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.mt-showcase .ba figcaption { padding: 18px 22px 20px; }
.mt-showcase .ba .tag { display: inline-block; font: 800 11px/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; padding: 7px 10px; border-radius: 6px; margin-bottom: 10px; }
.mt-showcase .ba .tag.b { background: var(--bg-3); color: var(--fg-2); }
.mt-showcase .ba .tag.a { background: var(--client-soft); color: var(--client-primary); }
.mt-showcase .ba figcaption b { display: block; font: 800 16px/1.2 var(--font-display); color: var(--mt-navy); margin-bottom: 5px; }
.mt-showcase .ba figcaption span { font-size: 14.5px; line-height: 1.5; color: var(--fg-2); }
.mt-showcase .why3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 30px; }
.mt-showcase .why3 .ctl-tile h4 { margin-top: 0; }

/* The phased plan (ink band) */
.mt-showcase .plan-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 26px; align-items: start; }
.mt-showcase .phase { border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05); border-radius: var(--radius-lg); padding: 30px 32px; }
.mt-showcase .phase.is-lead { border-color: rgba(250, 125, 0, 0.55); background: rgba(250, 125, 0, 0.07); }
.mt-showcase .phase-top { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 6px; }
.mt-showcase .phase h3 { font: 800 21px/1.2 var(--font-display); letter-spacing: -0.02em; color: #fff; margin: 0; }
.mt-showcase .phase .price { font: 800 30px/1 var(--font-display); letter-spacing: -0.03em; color: #FFB976; white-space: nowrap; }
.mt-showcase .phase .sub { font-size: 13.5px; color: rgba(255, 255, 255, 0.62); margin: 0 0 18px; }
.mt-showcase .phase ul { list-style: none; margin: 0; padding: 0; }
.mt-showcase .phase li { padding: 10px 0 10px 20px; position: relative; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.78); border-top: 1px solid rgba(255, 255, 255, 0.1); }
.mt-showcase .phase li:first-child { border-top: 0; }
.mt-showcase .phase li::before { content: "+"; position: absolute; left: 0; top: 10px; color: var(--mt-orange); font-weight: 800; }
.mt-showcase .phase li b { color: #fff; font-weight: 700; }
.mt-showcase .phase > p { font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.75); margin: 0; }
.mt-showcase .side-stack { display: grid; gap: 22px; align-content: start; }
.mt-showcase .side-stack .phase { padding: 24px 26px; }
.mt-showcase .side-stack .phase h3 { font-size: 18px; }
.mt-showcase .side-stack .phase .price { font-size: 23px; }
.mt-showcase .dial { margin-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 20px; }
.mt-showcase .dial > p { font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.7); margin: 0 0 14px; }
.mt-showcase .dial-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mt-showcase .dial-row div {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-md);
  padding: 14px 12px;
  text-align: center;
  min-height: 82px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mt-showcase .dial-row div.on { border-color: var(--mt-orange); background: rgba(250, 125, 0, 0.14); }
.mt-showcase .dial-row b { display: block; font: 800 22px/1 var(--font-display); color: #fff; letter-spacing: -0.02em; }
.mt-showcase .dial-row span { display: block; font-size: 12.5px; line-height: 1.35; color: rgba(255, 255, 255, 0.7); margin-top: 7px; }
.mt-showcase .dial-row div.on span { color: #FFB976; }

/* Sponsorship */
.mt-showcase .spon-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: start; }
.mt-showcase .tiers { display: grid; gap: 14px; }
.mt-showcase .tier {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 1fr;
  gap: 18px;
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: #fff;
  padding: 20px 22px;
}
.mt-showcase .tier .t-name { font: 800 17px/1.2 var(--font-display); color: var(--mt-navy); letter-spacing: -0.01em; }
.mt-showcase .tier .t-name span { display: block; font: 400 12.5px/1.3 var(--font-body); color: var(--fg-3); margin-top: 4px; }
.mt-showcase .tier .t-f i { display: block; font-style: normal; font: 800 9.5px/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 6px; }
.mt-showcase .tier .t-f b { font: 700 15px/1.2 var(--font-display); color: var(--fg-1); }
.mt-showcase .tier .t-ask b { color: var(--mt-orange); font-weight: 800; }
.mt-showcase .spon-gets { margin-top: 28px; }
.mt-showcase .spon-gets h4 { font: 800 17px/1.2 var(--font-display); color: var(--mt-navy); margin: 0 0 6px; }
.mt-showcase .spon-sub { font: 600 13.5px/1.4 var(--font-body); color: var(--fg-3); margin: 0 0 10px; }
.mt-showcase .spon-gets ul { list-style: none; margin: 0; padding: 0; }
.mt-showcase .spon-gets li { position: relative; padding: 7px 0 7px 20px; font-size: 14.5px; line-height: 1.5; color: var(--fg-2); }
.mt-showcase .spon-gets li::before { content: "+"; position: absolute; left: 0; top: 7px; color: var(--mt-orange); font-weight: 800; }
.mt-showcase .spon-callout { background: var(--mt-navy); color: #fff; border-radius: var(--radius-lg); padding: 28px 30px; }
.mt-showcase .spon-callout h3 { font: 800 19px/1.25 var(--font-display); color: #fff; margin: 0 0 10px; }
.mt-showcase .spon-callout p { font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.82); margin: 0 0 12px; text-wrap: pretty; }
.mt-showcase .spon-callout p:last-child { margin-bottom: 0; }

/* Small print + review markers */
.mt-showcase .micro-note { font-size: 13px; line-height: 1.5; color: var(--fg-3); margin: 14px 0 0; max-width: 78ch; }
.mt-showcase .review-note {
  font-size: 13px; line-height: 1.5; color: #A3005F;
  background: var(--mt-review-tint); border: 1px dashed var(--mt-review);
  border-radius: 8px; padding: 8px 12px; display: inline-block; margin: 14px 0 0; font-weight: 700;
}
.mt-showcase .review-line { font: 800 14.5px/1.4 var(--font-display); color: var(--mt-review); margin: 0 0 10px; }

/* The membership chain on the ink band */
.mt-showcase .section--ink .chain .node { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); color: #fff; }
.mt-showcase .section--ink .chain .node.rev { background: var(--mt-orange); border-color: var(--mt-orange); }
.mt-showcase .chain-note { max-width: 70ch; margin: 26px auto 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.78); text-align: center; text-wrap: pretty; }

/* Footer: the client mark next to ours */
.mt-showcase .sc-footer .client-mark { height: 26px; width: 108px; color: #fff; opacity: 0.9; display: block; }

@media (max-width: 980px) {
  .mt-showcase .navlinks { display: none; }
  .mt-showcase .hero-stack { padding-bottom: 0; }
  .mt-showcase .hero-peek { position: static; max-width: none; margin-top: 18px; }
  .mt-showcase .shift,
  .mt-showcase .find-lead,
  .mt-showcase .find-row,
  .mt-showcase .ba,
  .mt-showcase .why3,
  .mt-showcase .plan-grid,
  .mt-showcase .spon-grid,
  .mt-showcase .scn-grid { grid-template-columns: 1fr; }
  .mt-showcase .rebuild { grid-template-columns: 1fr; }
  .mt-showcase .rebuild .arrow { justify-self: center; transform: rotate(90deg); }
  .mt-showcase .scn-main { border-right: 0; border-bottom: 1px solid var(--border-subtle); }
  .mt-showcase .scn-opts button { min-height: 60px; }
  .mt-showcase .dial-row { grid-template-columns: 1fr 1fr; }
  .mt-showcase .oc-ctrl,
  .mt-showcase .counts { grid-template-columns: 1fr 1fr; }
  .mt-showcase .tier { grid-template-columns: 1fr 1fr; }
  .mt-showcase .find-lead .fl-body,
  .mt-showcase .fl-figures { padding: 26px 22px; }
  .mt-showcase .scn-main { padding: 22px 20px; }
  .mt-showcase .scn-side { padding: 22px 20px; }
  .mt-showcase .phase { padding: 24px 20px; }
  .mt-showcase .lockchip { padding: 6px 10px; }
  .mt-showcase .lockchip svg { height: 18px; width: 75px; }
}