/* =====================================================================================================
   assets/pg-mastery-intros.css · page parts for the four career-track hubs and the two free intro courses
   (reset Round 2, lane page:track-intros, 3 Nov 2026).
   Pages: academy/track-prospecting, -selling, -customer-success, -management (the track hubs), track-architecture and
   track-cross-functional (retired tracks that point to the current course), intro-ai-score, intro-revenue-growth-architecture.
   Loads AFTER pg-academy.css. Everything else is the shared kit: kit.css (k-*), pg-academy.css (ac-*, ds-*),
   product-ui.css (pui-*), ip.css (ipk, ip-*). Prefix mi-. Tokens only; magenta stays the page's one decision button plus
   one insight per screen (none is added here: the scenes use the product primary and ink).
   Sections: 1 hero art (certificate + course on the phone) · 2 course pair cards · 3 product scenes · 4 proof ·
   5 two certificates · 6 AI-SCORE mini-tool (K12d) · 7 lists (what you leave with, steps) · 8 instructor ·
   9 module tour figures · 10 retired-track pointer · 11 RTL / reduced motion
   ===================================================================================================== */

/* ---------- 1. hero art: the full certificate, the course on the phone, the stretch on the mark ---------- */
.mi-art{ position:relative; min-width:0; aspect-ratio:6 / 5; border-radius:var(--radius-base); background-color:var(--ac-media, var(--ground-alt)); overflow:visible; }
.mi-art.k-blueprint{ background-color:var(--ac-media, var(--ground-alt)); }
.mi-art__cert{ position:absolute; z-index:2; inset-inline-start:5%; bottom:12%; width:76%; rotate:-2deg; display:block; text-decoration:none;
  transition:rotate var(--dur-base) var(--ease-standard), translate var(--dur-base) var(--ease-standard); }
.mi-art__cert img{ display:block; width:100%; height:auto; aspect-ratio:1600 / 1131; border-radius:3px;
  box-shadow:0 1px 2px rgba(0,0,0,.18), 0 30px 60px -24px rgba(10,6,40,.5); }
.mi-art__cert:hover, .mi-art__cert:focus-visible{ rotate:0deg; translate:0 -4px; }
.mi-art__cert--back{ z-index:1; inset-inline-start:auto; inset-inline-end:5%; bottom:auto; top:9%; width:62%; rotate:4deg; pointer-events:none; }
.mi-art__cert--back img{ box-shadow:0 1px 2px rgba(0,0,0,.14), 0 18px 40px -22px rgba(10,6,40,.45); }
.mi-art__loc{ position:absolute; z-index:3; inset-inline-start:5%; top:-14px; }
.mi-art__cap{ position:absolute; z-index:3; inset-inline-start:5%; bottom:4%; }
.mi-art--fig{ aspect-ratio:auto; display:grid; place-items:center; padding:clamp(20px, 3vw, 40px) clamp(14px, 2.4vw, 32px) clamp(48px, 5vw, 64px); }
.mi-art--fig > svg{ width:100%; height:auto; display:block; --ip-primary:var(--purple); --ip-insight:var(--purple); }
.mi-art--fig .ds-hand{ position:absolute; }
@media (max-width:1023px){ .mi-art{ max-width:560px; margin-inline:auto; width:100%; } }
@media (max-width:767px){
  .mi-art__cert{ width:82%; bottom:13%; }
  .mi-art__cert--back{ width:66%; top:10%; }
  .mi-art__loc{ top:-12px; }
}

/* ---------- 2. the two courses of a track, as product cards (ClickUp template card, certificate media) ---------- */
.mi-pair{ display:grid; gap:clamp(16px, 2vw, 24px); }
@media (min-width:900px){ .mi-pair{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.mi-topics{ display:grid; gap:8px; margin:4px 0 0; padding:0; list-style:none; counter-reset:mi; }
.mi-topics li{ display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; align-items:baseline; font:400 15px/1.45 var(--font-sans); color:var(--ink); counter-increment:mi; }
.mi-topics li::before{ content:counter(mi, decimal-leading-zero); font:500 12px/1.45 var(--font-mono); color:var(--ink-muted); font-variant-numeric:tabular-nums; }

/* ---------- 3. product scenes (pui window composed for each course; pui-* comes from product-ui.css) ---------- */
.mi-scene{ position:relative; border-radius:var(--radius-base); padding:clamp(14px, 2.6vw, 36px); background-color:var(--ac-media, var(--ground-alt)); }
.mi-scene .pui{ background:transparent; }
.mi-scene .pui-win{ max-width:100%; }
.mi-scene .pui-main{ min-width:0; }
.mi-sched{ display:grid; gap:0; margin:0; padding:0; list-style:none; }
.mi-sched li{ display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr) auto; gap:6px 16px; align-items:center; padding:12px 0; box-shadow:inset 0 -1px 0 var(--hairline-soft); font:400 13px/1.4 var(--font-sans); }
.mi-sched li:last-child{ box-shadow:none; }
.mi-sched b{ display:block; font:600 13.5px/1.35 var(--font-sans); color:var(--ink); }
.mi-sched small{ display:block; font:500 11px/1.4 var(--font-mono); letter-spacing:.04em; color:var(--ink-muted); }
.mi-sched .mi-sched__stage{ display:flex; flex-wrap:wrap; gap:6px; }
@media (max-width:560px){ .mi-sched li{ grid-template-columns:minmax(0,1fr) auto; } .mi-sched .mi-sched__stage{ grid-column:1 / -1; grid-row:2; } }
.mi-agenda{ display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.mi-agenda li{ display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:12px; align-items:start; padding:12px 14px; border-radius:10px; background:var(--ground-alt); font:400 13px/1.45 var(--font-sans); }
.mi-agenda li > span:first-child{ font:500 12px/1.6 var(--font-mono); color:var(--ink-muted); }
.mi-agenda b{ display:block; font:600 13.5px/1.35 var(--font-sans); color:var(--ink); }
.mi-agenda li.is-now{ box-shadow:inset 3px 0 0 var(--ui-primary); }
[dir="rtl"] .mi-agenda li.is-now{ box-shadow:inset -3px 0 0 var(--ui-primary); }

/* ---------- 4. proof: one real quote card with the move, and members in the seat ---------- */
.mi-proof{ display:grid; gap:clamp(20px, 3vw, 40px); align-items:center; }
@media (min-width:1024px){ .mi-proof{ grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); } }
.mi-quote{ display:grid; gap:20px; padding:clamp(24px, 3.4vw, 44px); border-radius:var(--radius-base); margin:0; }
.mi-quote blockquote{ margin:0; }
.mi-quote blockquote p{ font:500 clamp(20px, 2vw, 26px)/1.4 var(--font-sans); letter-spacing:-0.01em; text-wrap:pretty; color:var(--ink); }
.mi-who{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:2px 14px; align-items:center; }
.mi-who img{ grid-row:span 3; width:56px; height:56px; border-radius:50%; object-fit:cover; background:var(--ground-alt); }
.mi-who b{ font:600 16px/1.3 var(--font-sans); }
.mi-who span{ font:400 14px/1.4 var(--font-sans); color:var(--ink-muted); }
.mi-who a{ display:inline-flex; align-items:center; gap:6px; justify-self:start; font:500 12px/1.4 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--link-ink); text-underline-offset:3px; }
.mi-move{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px; font:500 12px/1.4 var(--font-mono); letter-spacing:.02em; color:var(--ink); }
.mi-move i{ font-style:normal; color:var(--ink-muted); }
.mi-seat{ display:grid; gap:12px; margin:0; padding:0; list-style:none; }
.mi-seat__k{ margin:0 0 2px; }
.mi-seat li{ display:grid; grid-template-columns:44px minmax(0,1fr); gap:2px 14px; align-items:center; padding:14px 16px; border-radius:var(--radius-card); background:var(--card-surface); box-shadow:var(--card-lift); }
.mi-seat img{ grid-row:span 2; width:44px; height:44px; border-radius:50%; object-fit:cover; }
.mi-seat b{ font:600 15px/1.3 var(--font-sans); }

/* ---------- 5. both certificates of a track ---------- */
.mi-certs{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; max-width:30rem; }
.mi-certs a{ display:grid; gap:8px; text-decoration:none; color:var(--ink); font:500 12px/1.35 var(--font-mono); letter-spacing:.02em; }
.mi-certs img{ display:block; width:100%; height:auto; aspect-ratio:1600 / 1131; border-radius:3px; box-shadow:0 1px 2px rgba(0,0,0,.14), 0 10px 22px -12px rgba(10,6,40,.4);
  transition:translate var(--dur-instant) var(--ease-standard); }
.mi-certs a:hover img, .mi-certs a:focus-visible img{ translate:0 -3px; }
.mi-certs a[aria-current="true"] span{ text-decoration:underline; text-underline-offset:3px; }

/* ---------- 6. AI-SCORE mini-tool (K12d, S14): score a sample deal, see the weakest check, the AI layer's next question ---------- */
.mi-tool{ display:grid; gap:0; }
.mi-tool .pui-main{ display:grid; gap:16px; }
.mi-checks{ display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.mi-check{ display:grid; grid-template-columns:34px minmax(0,1fr); gap:10px 14px; align-items:center; padding:12px 14px; border-radius:10px; background:var(--pui-surface-2, var(--ground-alt));
  transition:box-shadow var(--dur-instant) var(--ease-standard); }
.mi-check__l{ display:grid; place-items:center; width:34px; height:34px; border-radius:8px; background:var(--card-surface); font:600 15px/1 var(--font-mono); color:var(--ink); box-shadow:inset 0 0 0 1px var(--hairline-soft); }
.mi-check__t b{ display:block; font:600 14px/1.3 var(--font-sans); color:var(--ink); }
.mi-check__t small{ display:block; font:400 13px/1.4 var(--font-sans); color:var(--ink-muted); }
.mi-check fieldset{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; border:0; min-width:0; }
@media (min-width:720px){ .mi-check{ grid-template-columns:34px minmax(0,1fr) auto; } .mi-check fieldset{ grid-column:auto; } }
.mi-seg{ position:relative; display:inline-flex; }
.mi-seg input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.mi-seg span{ display:inline-flex; align-items:center; min-height:36px; padding:0 12px; border-radius:999px; font:500 12.5px/1 var(--font-sans); color:var(--ink-muted);
  background:var(--card-surface); box-shadow:inset 0 0 0 1px var(--hairline); transition:background var(--dur-instant) var(--ease-standard), color var(--dur-instant) var(--ease-standard); }
.mi-seg input:checked + span{ background:var(--ink); color:var(--ground); box-shadow:none; }
.mi-seg input:focus-visible + span{ outline:3px solid var(--focus-ring); outline-offset:2px; }
.mi-check.is-weak{ box-shadow:inset 0 0 0 2px var(--ink); }
.mi-out{ display:grid; gap:12px; padding:18px; border-radius:12px; background:var(--card-surface); box-shadow:inset 0 0 0 1px var(--hairline-soft); }
.mi-out__k{ display:flex; align-items:center; gap:8px; }
.mi-out__score{ display:flex; align-items:baseline; gap:10px; }
.mi-out__score b{ font:500 32px/1 var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:-0.02em; }
.mi-out__score span{ font:400 14px/1.4 var(--font-sans); color:var(--ink-muted); }
.mi-out__weak{ font:600 16px/1.35 var(--font-sans); }
.mi-out__ai{ display:grid; gap:6px; padding:14px; border-radius:10px; background:var(--role-ai-subtle); }
.mi-out__ai p{ font:400 14px/1.5 var(--font-sans); }
.mi-out__ai q{ font-weight:600; }
.mi-tool__grid{ display:grid; gap:16px; }
@media (min-width:1024px){ .mi-tool__grid{ grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); align-items:start; } .mi-out{ position:sticky; top:calc(var(--header-h) + 88px); } }

/* ---------- 7. lists: what you leave with, three steps ---------- */
.mi-leave{ display:grid; gap:12px; margin:0; padding:0; list-style:none; grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.mi-leave li{ display:grid; gap:8px; align-content:start; padding:20px; border-radius:var(--radius-card); background:var(--card-surface); box-shadow:var(--card-lift); }
.mi-leave b{ font:600 16px/1.3 var(--font-sans); }
.mi-leave span{ font:400 14.5px/1.5 var(--font-sans); color:var(--ink-muted); }
.mi-leave .ds-index{ margin-bottom:4px; }
.mi-steps{ display:grid; gap:12px; margin:0; padding:0; list-style:none; counter-reset:st; }
@media (min-width:900px){ .mi-steps{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; } }
.mi-steps li{ display:grid; gap:8px; align-content:start; padding:22px; border-radius:var(--radius-card); background:var(--card-surface); box-shadow:var(--card-lift); counter-increment:st; }
.mi-steps li::before{ content:counter(st, decimal-leading-zero); font:500 13px/1 var(--font-mono); color:var(--ink-muted); }
.mi-steps b{ font:600 18px/1.3 var(--font-sans); }
.mi-steps span{ font:400 15px/1.5 var(--font-sans); color:var(--ink-muted); }

/* ---------- 8. instructor ---------- */
.mi-teach{ display:grid; gap:clamp(24px, 4vw, 56px); align-items:center; }
@media (min-width:900px){ .mi-teach{ grid-template-columns:auto minmax(0,1fr); } }
.mi-teach .ds-frame{ --ds-frame-w:clamp(180px, 20vw, 240px); justify-self:center; }
.mi-teach__name{ font:600 clamp(24px, 2.4vw, 28px)/1.2 var(--font-sans); letter-spacing:-0.01em; }
.mi-teach__role{ font:500 12px/1.4 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-muted); }
.mi-figs{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin:6px 0 0; padding:0; list-style:none; }
@media (min-width:720px){ .mi-figs{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.mi-figs li{ display:grid; gap:4px; padding:14px 16px; border-radius:var(--radius-card); background:var(--ground-alt); }
.mi-figs b{ font:500 22px/1.1 var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:-0.01em; }
.mi-figs span{ font:400 13px/1.4 var(--font-sans); color:var(--ink-muted); }

/* ---------- 9. module tour figures (K8 stages on intro-RGA) ---------- */
.mi-mod{ display:grid; gap:clamp(20px, 3vw, 40px); align-items:center; padding:clamp(18px, 3vw, 36px); border-radius:var(--radius-base); background-color:var(--ac-media, var(--ground-alt)); }
@media (min-width:1024px){ .mi-mod{ grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); } }
.mi-mod__copy{ display:grid; gap:12px; align-content:start; }
.mi-mod__copy h3{ font:600 clamp(20px, 2vw, 24px)/1.25 var(--font-sans); letter-spacing:-0.01em; }
.mi-mod__copy p{ color:var(--ink-muted); }
.mi-mod__fig{ min-width:0; display:grid; place-items:center; padding:clamp(12px, 2vw, 24px); border-radius:var(--radius-card); background:var(--card-surface); box-shadow:var(--card-lift); }
.mi-mod__fig img, .mi-mod__fig svg{ display:block; width:100%; height:auto; max-width:640px; }
.mi-stages{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.mi-stages li{ display:grid; gap:2px; padding:10px 14px; border-radius:10px; background:var(--ground-alt); }
.mi-stages b{ font:600 15px/1.3 var(--font-sans); }
.mi-stages span{ font:400 13px/1.4 var(--font-sans); color:var(--ink-muted); }
.mi-growth{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:20px; align-items:center; width:100%; }
.mi-growth svg{ width:96px; height:96px; --ip-primary:var(--purple); --ip-insight:var(--purple); }

/* ---------- 10. retired track pointer ---------- */
.mi-moved{ display:grid; gap:clamp(24px, 3vw, 40px); }
.mi-moved__note{ display:block; padding:14px 18px; border-radius:var(--radius-card); background:var(--ground-alt); font:400 15px/1.5 var(--font-sans); max-width:52rem; }
.mi-moved__note b{ font-weight:600; }

/* ---------- 12. small parts ---------- */
a.ac-way{ display:grid; }
.mi-cmedia.ac-ccard__media{ aspect-ratio:auto; height:320px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:28px; align-items:start; justify-items:start; padding:56px 28px 0; }
.mi-cmedia .k-phone{ --k-phone-w:200px; }
.mi-cmedia__list{ display:grid; gap:12px; align-content:start; padding-top:8px; }
.mi-cmedia__cert{ display:flex; align-items:center; gap:8px; font:500 13px/1.4 var(--font-sans); color:var(--ink); }
@media (max-width:560px){ .mi-cmedia.ac-ccard__media{ grid-template-columns:1fr; justify-items:center; height:280px; padding-top:52px; } .mi-cmedia__list{ display:none; } }
.mi-next{ font:400 13.5px/1.5 var(--font-sans); color:var(--ink); }
.mi-lsub{ display:block; margin-top:4px; font:400 14px/1.5 var(--font-sans); color:var(--ink-muted); }
.mi-acts{ margin-top:clamp(20px, 2.4vw, 28px); }
.mi-proof--one{ grid-template-columns:minmax(0, 1fr); max-width:52rem; margin-top:clamp(24px, 3vw, 40px); }
.mi-art--phone{ aspect-ratio:auto; display:grid; place-items:center; padding:clamp(32px, 4vw, 56px) 16px; }
.mi-art--phone .k-phone{ position:relative; inset:auto; --k-phone-w:280px; }
@media (max-width:767px){ .mi-art--phone .k-phone{ --k-phone-w:228px; } }
/* the AI layer's note lands as a banner over the top bar, so no lesson row is hidden (review P1-2) */
.mi-art--phone .k-phone__over{ top:calc(var(--_w) * .085); }
.mi-modelchip .mi-chipmark{ width:28px; height:28px; flex:none; --ip-primary:var(--purple); --ip-insight:var(--purple); }
.mi-read{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; margin-top:16px; padding:14px 16px; border-radius:var(--radius-card); background:var(--ground-alt); }
.mi-read > span:first-child{ font:600 16px/1.45 var(--font-sans); color:var(--ink); }
.mi-read > span + span{ font:500 11px/1.4 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-muted); }
.mi-art--fig .ds-hand{ inset-inline-end:var(--xe, auto); top:var(--y, auto); rotate:-3deg; max-width:16ch; pointer-events:none; }
@media (max-width:767px){ .mi-art--fig .ds-hand{ display:none; } }

/* ---------- 11. RTL and reduced motion ---------- */
[dir="rtl"] .mi-art__cert{ rotate:2deg; }
[dir="rtl"] .mi-art__cert:hover, [dir="rtl"] .mi-art__cert:focus-visible{ rotate:0deg; }
@media (prefers-reduced-motion:reduce){
  .mi-art__cert, .mi-certs img, .mi-seg span, .mi-check{ transition:none; }
  .mi-art__cert:hover, .mi-art__cert:focus-visible, .mi-certs a:hover img{ translate:none; }
}