/* ============================================================
   Mind Theory — Homepage stylesheet (home.css)
   Self-contained: does NOT depend on / modify the site-wide
   styles.css or script.js, so it cannot break any other page.
   ============================================================ */

:root{
  --navy:        #0A1B4A;
  --navy-2:      #04194A;
  --footer-navy: #051A46;
  --blue:        #0F64F0;
  --blue-deep:   #0C4FC7;
  --pink:        #FD236A;
  --pink-deep:   #D91553;
  --orange:      #F49B5A;
  --orange-deep: #C36A1E;
  --purple:      #7A64E5;
  --green:       #1F9C79;

  --card-blue-bg:   #EAF1FD;
  --card-pink-bg:   #FCEEF5;
  --card-orange-bg: #FDF3E7;

  --bg-soft:     #F7F8FC;
  --text-body:   #47517A;
  --text-meta:   #6B7593;
  --text-head:   #131B3B;

  --border-soft: #E8EAF4;
  --border-crisp: #DEE2F0;
  --shadow-xs:   0 1px 2px rgba(16,24,54,.05), 0 3px 10px -3px rgba(16,24,54,.08);
  --shadow-sm:   0 2px 6px rgba(16,24,54,.05), 0 12px 26px -10px rgba(16,24,54,.16);
  --shadow-md:   0 6px 14px -6px rgba(14,22,54,.12), 0 26px 48px -20px rgba(14,22,54,.24);
  --shadow-lg:   0 14px 30px -12px rgba(12,20,52,.2), 0 44px 74px -28px rgba(12,20,52,.3);
  --radius-xl:  28px;
  --radius-lg:  22px;
  --radius-md:  16px;
  --radius-sm:  11px;

  --font-head: 'Fraunces', Georgia, serif;
  --font-body: 'Nunito', 'Segoe UI', sans-serif;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-out-soft: cubic-bezier(.22,.8,.32,1);

  --container-w: 1240px;

  /* ============================================================
     Brand System (Phase 12) — additive only. Every token above this
     line is untouched and still the source of truth for its own
     literal color; nothing below renames or replaces them. These are
     two things this project genuinely didn't have yet: named semantic
     roles (so new work reaches for "the primary action color" instead
     of memorizing that blue-deep is the one used for that), and a few
     real gaps found by audit rather than assumed — most notably
     --color-danger, which formalizes a pattern already used
     consistently as inline #C0392B across 11 files (delete-forever
     buttons, critical status indicators) but never had a token behind
     it. See BRAND_SYSTEM.md for the full documented system, including
     what this maps to for anyone building assets outside this
     codebase (Canva templates, print collateral) — this file is the
     enforced source of truth for the live site, that one is the
     portable reference for everything else.
     ============================================================ */

  /* Semantic color roles — aliases onto the existing palette above,
     not new colors. Primary/secondary/accent were already consistent
     in practice (blue for primary actions and links, navy for
     structural/header surfaces, pink as the accent used sparingly for
     emphasis) — this just gives that existing convention a name. */
  --color-primary:       var(--blue-deep);
  --color-primary-hover: var(--blue);
  --color-secondary:     var(--navy);
  --color-accent:        var(--pink);
  --color-success:       var(--green);
  --color-success-bg:    rgba(31,156,121,.12);
  --color-warning:       var(--orange-deep);
  --color-warning-bg:    var(--card-orange-bg);
  /* New, not an alias — genuinely missing. A deliberately different
     tone from --color-warning: warning/orange is this project's own
     established convention for a gentle validation error (see
     .mta-alert--error); danger/red is reserved for irreversible or
     critical actions specifically (delete-forever, a failing health
     check) — two different severities, not two names for one thing. */
  --color-danger:    #C0392B;
  --color-danger-hover: #a02d1f;
  --color-danger-bg: #FBEAE8;

  /* Text on a dark surface (navy headers/footers) — was 9 separate
     inline #fff declarations in this file alone before this token
     existed, more across other stylesheets. */
  --text-on-dark:       #FFFFFF;
  --text-on-dark-muted: rgba(255,255,255,.72);

  /* Spacing scale — genuinely new capability, not a retroactive
     replacement of the specific pixel values already chosen throughout
     the site (that would be the redesign this phase was explicitly
     told not to do). Available for new work going forward; existing
     spacing decisions are left exactly as they are. */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs:  12px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  32px;
  --space-xl:  48px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* Dark theme: architecture, not an implementation. Most color usage
     across this project already goes through a var(--token) reference
     rather than inline hex — but not all of it; this same audit found
     9 inline #fff declarations in this file alone and inline hex in
     several component stylesheets, some of which this phase's token
     additions above now give a proper home to reference instead. A
     dark theme needs that conversion to be complete, not just mostly
     true — real remaining work, not a finished precondition. What IS
     true now: the token structure itself is ready to hold a dark
     palette. When one is built, it's a single new block here,
     [data-theme="dark"]{ --bg-soft:...; --text-body:...; } overriding
     just the tokens whose *value* should change for dark surfaces,
     switched with one attribute on <html>. Nothing below this comment
     exists yet — intentionally: building it now would be new visual
     design work this phase wasn't asked for, not an architecture
     decision.
     ============================================================ */
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body.mt-home{
  margin:0;
  font-family: var(--font-body);
  color:var(--text-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  background:#fff;
  overflow-x:hidden;
}
.mt-home img{ max-width:100%; display:block; }
.mt-home a{ text-decoration:none; color:inherit; }
.mt-home ul{ margin:0; padding:0; list-style:none; }
.mt-home h1,.mt-home h2,.mt-home h3,.mt-home h4{
  font-family:var(--font-head);
  color:var(--text-head);
  margin:0;
  font-weight:700;
  letter-spacing:-0.015em;
  text-wrap:balance;
}
.mt-home :focus-visible{
  outline:2.5px solid var(--blue-deep);
  outline-offset:3px;
  border-radius:6px;
}

.mt-container{
  max-width:var(--container-w);
  margin:0 auto;
  padding:0 clamp(22px, 3.4vw, 40px);
}

@media (prefers-reduced-motion: reduce){
  .mt-home *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---------------- NAV ---------------- */
.mt-nav{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--border-soft);
  transition:box-shadow .25s var(--ease-out);
}
.mt-nav-inner{
  max-width:var(--container-w); margin:0 auto; padding:14px clamp(22px, 3.4vw, 40px);
  display:flex; align-items:center; justify-content:space-between;
  gap:20px;
}
.mt-logo{ display:flex; align-items:center; gap:11px; transition:opacity .2s ease; }
.mt-logo:hover{ opacity:.82; }
.mt-logo img{ width:36px; height:36px; border-radius:50%; box-shadow:0 0 0 3px #fff, 0 2px 8px rgba(16,24,54,.12); }
.mt-logo-text{ line-height:1.2; }
.mt-logo-text .mt-brand{
  font-family:var(--font-head); font-weight:700; font-size:1.2rem;
  color:var(--text-head); letter-spacing:.2px;
}
.mt-logo-text .mt-tagline{ font-size:.74rem; color:var(--text-meta); font-weight:600; }

.mt-nav-links{
  display:flex; align-items:center; gap:34px; flex-wrap:wrap;
}
.mt-nav-links a{
  font-size:.97rem; font-weight:700; color:var(--text-head);
  padding:8px 1px; position:relative; white-space:nowrap;
  transition:color .2s var(--ease-out);
}
.mt-nav-links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:2px; height:2px;
  background:var(--blue-deep); border-radius:2px; transition:right .25s var(--ease-out);
}
.mt-nav-links a:hover::after{ right:0; }
.mt-nav-links a.is-active{ color:var(--blue-deep); }
.mt-nav-links a.is-active::after{ right:0; }
.mt-nav-links a:hover{ color:var(--blue-deep); }

.mt-nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:8px; }
.mt-nav-toggle span{ display:block; width:24px; height:2px; background:var(--text-head); margin:5px 0; border-radius:2px; transition:transform .25s var(--ease-out), opacity .2s ease; }
.mt-nav-toggle:hover span{ background:var(--blue-deep); }

@media (max-width:960px){
  .mt-nav-links{
    position:absolute; top:100%; left:0; right:0;
    background:#fff; flex-direction:column; align-items:flex-start;
    padding:18px 24px 26px; border-bottom:1px solid var(--border-soft);
    display:none; gap:16px;
    box-shadow:var(--shadow-md);
  }
  .mt-nav-links.is-open{ display:flex; }
  .mt-nav-toggle{ display:block; }
}

/* ---------------- HERO ---------------- */
.mt-hero{
  background:radial-gradient(120% 100% at 82% 0%, #EAF2FE 0%, #F6F9FF 45%, #FFFFFF 78%);
  overflow:hidden;
  position:relative;
}
.mt-hero-inner{
  max-width:var(--container-w); margin:0 auto;
  padding:clamp(52px, 8vw, 84px) clamp(22px, 3.4vw, 40px) clamp(56px, 9vw, 100px);
  display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(40px, 5vw, 64px); align-items:center;
  position:relative; z-index:1;
}
.mt-hero-copy h1{
  font-size:clamp(2.6rem, 1.85rem + 3vw, 4.2rem);
  line-height:1.05; font-weight:800; margin-bottom:24px;
}
.mt-hero-copy h1 .l1{ color:var(--navy-2); display:block; }
.mt-hero-copy h1 .l2{ display:block; }
.mt-hero-copy h1 .l2 .grow{ color:var(--blue); }
.mt-hero-copy h1 .l2 .thrive{ color:var(--pink); }
.mt-hero-sub{
  font-size:1.42rem; font-weight:700; color:var(--text-head); margin-bottom:14px; line-height:1.4; letter-spacing:-.01em;
}
.mt-hero-copy p.mt-hero-desc{
  font-size:1.14rem; color:var(--text-body); max-width:480px; margin-bottom:36px; line-height:1.68;
}
.mt-hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:32px; }
.mt-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 32px; border-radius:999px; font-weight:700; font-size:1.02rem; letter-spacing:.005em;
  border:2px solid transparent; cursor:pointer;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background-color .25s ease, border-color .25s ease, color .25s ease;
  will-change:transform;
}
.mt-btn:hover{ transform:translateY(-3px); }
.mt-btn:active{ transform:translateY(-1px) scale(.98); transition-duration:.12s; }

/* Disabled and loading — genuinely missing from this shared system
   before Phase 12 (checkout.css and mind-builders.css each built their
   own narrower version for one specific button; this is the reusable
   form of the same idea, not a replacement for those working,
   untouched implementations). currentColor means the spinner is white
   on .mt-btn-primary and dark on .mt-btn-outline automatically, no
   per-variant override needed. */
.mt-btn:disabled{ opacity:.55; cursor:not-allowed; transform:none !important; box-shadow:none !important; }
.mt-btn.is-loading{ position:relative; color:transparent !important; pointer-events:none; }
.mt-btn.is-loading::after{
  content:''; position:absolute; left:50%; top:50%; width:16px; height:16px; margin:-8px 0 0 -8px;
  border:2px solid currentColor; border-top-color:transparent; border-radius:50%;
  color:var(--blue-deep); animation:mt-btn-spin .7s linear infinite;
}
.mt-btn-outline.is-loading::after{ color:var(--text-head); }
@keyframes mt-btn-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .mt-btn.is-loading::after{ animation-duration:1.4s; }
}

.mt-btn-primary{
  background:linear-gradient(180deg, #1868E8, var(--blue-deep));
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 1px 2px rgba(12,60,150,.3), 0 16px 30px -10px rgba(12,79,199,.48);
}
.mt-btn-primary:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(12,60,150,.3), 0 22px 38px -10px rgba(12,79,199,.55); }
.mt-btn-outline{ background:#fff; color:var(--text-head); border-color:var(--border-crisp); box-shadow:var(--shadow-xs); }
.mt-btn-outline:hover{ border-color:var(--blue-deep); color:var(--blue-deep); box-shadow:var(--shadow-sm); }
.mt-btn-pink{
  background:linear-gradient(180deg,#FF4C82,var(--pink-deep));
  color:#fff; flex:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 1px 2px rgba(150,12,60,.25), 0 16px 30px -10px rgba(217,21,83,.48);
}
.mt-btn-pink:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(150,12,60,.25), 0 22px 38px -10px rgba(217,21,83,.55); }
.mt-btn svg{ transition:transform .3s var(--ease-out); }
.mt-btn:hover svg{ transform:translateX(3px); }

.mt-hero-pills{ display:flex; gap:11px; flex-wrap:wrap; }
.mt-pill{
  display:flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--border-soft); border-radius:999px;
  padding:10px 16px; font-size:.86rem; font-weight:700; color:var(--text-head);
  box-shadow:var(--shadow-xs); transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.mt-pill:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.mt-pill svg{ width:16px; height:16px; flex:none; }

.mt-hero-art{ position:relative; }
.mt-hero-art::before,
.mt-hero-art::after{
  content:''; position:absolute; border-radius:50%; filter:blur(46px); z-index:0; opacity:.55; pointer-events:none;
}
.mt-hero-art::before{ width:52%; height:52%; background:#BFD6FB; top:-10%; left:-8%; }
.mt-hero-art::after{ width:40%; height:40%; background:#FBD3E1; bottom:-8%; right:-6%; opacity:.5; }
.mt-hero-art-frame{
  position:relative; z-index:1; width:100%; aspect-ratio:3/2; border-radius:var(--radius-xl);
  overflow:hidden; background:linear-gradient(135deg,#DCEAFB,#F3F7FF);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-lg);
  outline:1px solid rgba(255,255,255,.5); outline-offset:-1px;
  animation:mtFloat 7s ease-in-out infinite;
}
.mt-hero-art-frame picture{ display:block; width:100%; height:100%; }
.mt-hero-art-frame img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.mt-hero-art-frame .mt-art-fallback{
  text-align:center; color:#7C8DB8; font-size:.85rem; font-weight:700; padding:20px;
}
@keyframes mtFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-9px); }
}
.mt-bubble{
  position:absolute; z-index:2; background:#fff; border-radius:16px 16px 16px 4px; padding:11px 17px;
  box-shadow:var(--shadow-sm); font-size:.86rem; line-height:1.35; font-weight:600;
  max-width:160px; color:var(--text-head); border:1px solid rgba(255,255,255,.7);
}
.mt-bubble .name{ font-weight:800; display:block; font-size:.88rem; }
.mt-bubble.milo{ top:-4%; left:12%; transform:rotate(-2deg); }
.mt-bubble.milo .name{ color:var(--blue-deep); }
.mt-bubble.mira{ top:-6%; right:8%; left:auto; text-align:right; border-radius:16px 16px 4px 16px; transform:rotate(2deg); }
.mt-bubble.mira .name{ color:var(--pink-deep); }

.mt-hero-fade{ height:1px; }

@media (max-width:960px){
  .mt-hero-inner{ grid-template-columns:1fr; }
  .mt-hero-art{ order:-1; }
  .mt-bubble{ display:none; }
}
@media (max-width:700px){
  .mt-hero-copy p.mt-hero-desc{ max-width:none; }
}
@media (prefers-reduced-motion: reduce){
  .mt-hero-art-frame{ animation:none; }
}

/* ---------------- SECTION SHELL ---------------- */
.mt-section{ padding:clamp(56px, 8vw, 88px) 0; }
.mt-section--soft{ background:var(--bg-soft); }
.mt-section-head{ text-align:center; max-width:620px; margin:0 auto clamp(38px, 5vw, 56px); }
.mt-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.8rem; font-weight:800; letter-spacing:.11em;
  text-transform:uppercase; color:var(--blue-deep); margin-bottom:16px;
}
.mt-eyebrow::before,
.mt-eyebrow::after{
  content:''; width:20px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, currentColor);
}
.mt-eyebrow::after{ background:linear-gradient(90deg, currentColor, transparent); }
.mt-section-head h2{ font-size:clamp(1.95rem, 1.6rem + 1.4vw, 2.6rem); margin-bottom:14px; line-height:1.15; }
.mt-section-head p{ color:var(--text-meta); font-weight:600; font-size:1.08rem; line-height:1.6; }

/* ---------------- JOURNEY ---------------- */
.mt-journey-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px;
}
.mt-journey-card{
  border-radius:var(--radius-xl); padding:44px 34px 38px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  border:1px solid rgba(20,30,70,.05); box-shadow:var(--shadow-xs);
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.mt-journey-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.mt-journey-card.blue{ background:var(--card-blue-bg); }
.mt-journey-card.pink{ background:var(--card-pink-bg); }
.mt-journey-card.orange{ background:var(--card-orange-bg); }
.mt-journey-avatar{
  width:168px; height:168px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  margin-bottom:24px; box-shadow:0 14px 30px -12px rgba(20,30,70,.24), 0 0 0 6px rgba(255,255,255,.55);
  transition:transform .35s var(--ease-out);
}
.mt-journey-card:hover .mt-journey-avatar{ transform:scale(1.04); }
.mt-journey-card.blue .mt-journey-avatar{ background:radial-gradient(circle,#fff 42%,#DDE9FC 100%); }
.mt-journey-card.pink .mt-journey-avatar{ background:radial-gradient(circle,#fff 42%,#F9DEEB 100%); }
.mt-journey-card.orange .mt-journey-avatar{ background:radial-gradient(circle,#fff 42%,#FBE6CB 100%); }
.mt-journey-avatar img{
  width:112%; max-width:112%; height:112%; object-fit:cover; object-position:50% 38%;
  -webkit-mask-image:radial-gradient(circle at 50% 42%, #000 58%, transparent 80%);
          mask-image:radial-gradient(circle at 50% 42%, #000 58%, transparent 80%);
}
.mt-journey-card h3{ font-size:1.36rem; margin-bottom:11px; letter-spacing:-.01em; }
.mt-journey-card p{ font-size:1rem; color:var(--text-body); margin-bottom:22px; line-height:1.62; }
.mt-journey-link{ font-weight:700; font-size:1rem; display:inline-flex; align-items:center; gap:7px; }
.mt-journey-link svg{ transition:transform .3s var(--ease-out); }
.mt-journey-link:hover svg{ transform:translateX(4px); }
.mt-journey-card.blue .mt-journey-link{ color:var(--blue-deep); }
.mt-journey-card.pink .mt-journey-link{ color:var(--pink-deep); }
.mt-journey-card.orange .mt-journey-link{ color:var(--orange-deep); }

@media (max-width:960px){ .mt-journey-grid{ grid-template-columns:1fr; max-width:440px; margin:0 auto; } }

/* ---------------- QUICK LINKS ---------------- */
.mt-quicklinks{
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px;
}
.mt-qlink{
  display:flex; align-items:center; gap:13px; padding:20px;
  border:1px solid var(--border-soft); border-radius:var(--radius-md);
  background:#fff; box-shadow:var(--shadow-xs);
  transition:box-shadow .3s var(--ease-out), transform .3s var(--ease-out), border-color .3s ease;
}
.mt-qlink:hover{ box-shadow:var(--shadow-sm); transform:translateY(-4px); border-color:transparent; }
.mt-qlink-icon{
  width:44px; height:44px; border-radius:12px; flex:none;
  display:flex; align-items:center; justify-content:center;
  transition:transform .35s var(--ease-out);
}
.mt-qlink:hover .mt-qlink-icon{ transform:scale(1.08) rotate(-4deg); }
.mt-qlink-icon svg{ width:20px; height:20px; }
.mt-qlink-text{ min-width:0; }
.mt-qlink h4{ font-size:.97rem; margin-bottom:2px; letter-spacing:-.005em; }
.mt-qlink-text > span{ font-size:.8rem; color:var(--text-meta); font-weight:600; }

@media (max-width:960px){ .mt-quicklinks{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:600px){ .mt-quicklinks{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ---------------- FEATURED ---------------- */
.mt-featured-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px;
}
.mt-feat-card{
  border-radius:var(--radius-lg); border:1px solid var(--border-soft);
  background:#fff; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:var(--shadow-xs);
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.mt-feat-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.mt-feat-media{
  position:relative; aspect-ratio:4/3; background:#EEF2FA; overflow:hidden; flex:none;
}
.mt-feat-media > img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease-out-soft); }
.mt-feat-card:hover .mt-feat-media > img{ transform:scale(1.06); }
.mt-feat-badge{
  font-size:.66rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:#fff; padding:6px 12px; border-radius:999px;
  position:absolute; top:12px; left:12px; margin:0; z-index:2;
}
.mt-feat-badge.blue{ background:var(--blue-deep); }
.mt-feat-badge.pink{ background:var(--pink); }
.mt-feat-badge.purple{ background:var(--purple); }
.mt-feat-badge.navy{ background:rgba(5,26,70,.82); }

.mt-feat-body{ display:flex; flex-direction:column; gap:10px; flex:1; padding:24px 24px 26px; }
.mt-feat-body h3{ font-size:1.08rem; line-height:1.32; letter-spacing:-.005em; }
.mt-feat-body p{ font-size:.91rem; color:var(--text-body); line-height:1.55; margin:0; flex:1; }
.mt-feat-meta{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:.78rem; color:var(--text-meta); font-weight:700; flex-wrap:wrap; }
.mt-feat-time{ display:inline-flex; align-items:center; gap:5px; }
.mt-feat-langs{ font-weight:700; }
.mt-feat-langs a{ color:var(--blue-deep); font-weight:800; transition:opacity .2s ease; }
.mt-feat-langs a:hover{ text-decoration:underline; opacity:.8; }
.mt-feat-cta{
  align-self:flex-start; display:inline-flex; align-items:center; gap:7px;
  font-weight:800; font-size:.84rem;
  padding:10px 18px; border-radius:999px; margin-top:8px; white-space:nowrap;
  transition:transform .3s var(--ease-out), background-color .25s ease, box-shadow .3s var(--ease-out);
}
.mt-feat-cta svg{ transition:transform .3s var(--ease-out); }
.mt-feat-cta:hover svg{ transform:translateX(3px); }
.mt-feat-cta.outline{ border:1.5px solid var(--blue-deep); color:var(--blue-deep); }
.mt-feat-cta.outline:hover{ background:var(--blue-deep); color:#fff; }
.mt-feat-cta.solid-pink{ background:var(--pink); color:#fff; box-shadow:0 10px 20px -10px rgba(253,35,106,.55); }
.mt-feat-cta.solid-pink:hover{ background:var(--pink-deep); box-shadow:0 14px 26px -10px rgba(217,21,83,.6); }

.mt-ebook-cover{
  background:linear-gradient(155deg,var(--navy-2),#0B2670); color:#fff; padding:24px 22px;
  display:flex; flex-direction:column; justify-content:center; gap:10px; text-align:left;
  position:relative; overflow:hidden;
}
.mt-ebook-cover::after{
  content:''; position:absolute; inset:0; background:radial-gradient(120% 90% at 100% 100%, rgba(122,100,229,.35), transparent 60%);
}
.mt-ebook-cover .bulb{ width:27px; height:27px; opacity:.95; position:relative; z-index:1; }
.mt-ebook-cover .brand{ font-size:.63rem; font-weight:800; letter-spacing:.1em; opacity:.72; position:relative; z-index:1; }
.mt-ebook-cover .title{ font-size:1.04rem; font-weight:800; line-height:1.34; position:relative; z-index:1; }

.mt-quote-card{ padding:24px 26px 26px; position:relative; }
.mt-quote-badge{ position:static; display:inline-block; margin-bottom:20px; align-self:flex-start; }
.mt-quote-body{ flex:1; display:flex; flex-direction:column; gap:12px; margin-bottom:20px; }
.mt-quote-mark{ color:var(--purple); font-size:2.6rem; font-weight:800; line-height:.5; font-family:var(--font-head); }
.mt-quote-card blockquote{ font-size:1.04rem; font-weight:700; color:var(--text-head); line-height:1.5; margin:0; letter-spacing:-.005em; }
.mt-quote-card cite{ font-style:normal; font-size:.82rem; color:var(--text-meta); font-weight:700; }

.mt-video-media{ background:var(--navy-2); }
.mt-video-media video{ width:100%; height:100%; object-fit:cover; display:block; }
.mt-play{
  position:absolute; inset:0; margin:auto; width:54px; height:54px; border-radius:50%;
  background:rgba(255,255,255,.96); display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 4px 10px rgba(0,0,0,.18), 0 14px 28px -8px rgba(0,0,0,.45); transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.mt-play svg{ margin-left:2px; }
.mt-play:hover{ transform:scale(1.1); box-shadow:0 6px 14px rgba(0,0,0,.2), 0 18px 34px -8px rgba(0,0,0,.5); }
.mt-feat-body--center{ text-align:center; align-items:center; }
.mt-feat-body--center p{ flex:none; }

@media (max-width:960px){ .mt-featured-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){ .mt-featured-grid{ grid-template-columns:1fr; } .mt-feat-media{ aspect-ratio:16/10; } }

/* ---------------- BILINGUAL STRIP ---------------- */
.mt-bilingual{
  background:linear-gradient(100deg,#FFF0F5,#FFF7F2);
  border-radius:var(--radius-xl); padding:34px 40px;
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  border:1px solid #FBDCE6; margin-bottom:24px; box-shadow:var(--shadow-xs);
  transition:box-shadow .35s var(--ease-out), transform .35s var(--ease-out);
}
.mt-bilingual:hover{ box-shadow:var(--shadow-sm); transform:translateY(-2px); }
.mt-bilingual-icon{ font-size:2.1rem; flex:none; }
.mt-bilingual-text{ flex:1; min-width:260px; }
.mt-bilingual-text h3{ font-size:1.2rem; margin-bottom:6px; line-height:1.42; letter-spacing:-.01em; }
.mt-bilingual-text h3 .en{ color:var(--pink-deep); }
.mt-bilingual-text p{ font-size:.96rem; color:var(--text-body); margin:0; line-height:1.58; }
.mt-bilingual-divider{ width:1px; align-self:stretch; background:#F2C6D3; }
.mt-bilingual-note{ font-size:.87rem; color:var(--text-body); font-weight:700; max-width:130px; }

@media (max-width:700px){
  .mt-bilingual{ padding:26px; }
  .mt-bilingual-divider{ display:none; }
}

/* ---------------- NEWSLETTER STRIP ---------------- */
.mt-newsletter{
  background:#fff; border:1px solid var(--border-soft); border-radius:var(--radius-xl);
  padding:38px 40px; display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  box-shadow:var(--shadow-sm); transition:box-shadow .35s var(--ease-out), transform .35s var(--ease-out);
}
.mt-newsletter:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.mt-newsletter-icon{ font-size:2rem; }
.mt-newsletter-text{ min-width:220px; }
.mt-newsletter-text h3{ font-size:1.18rem; margin-bottom:5px; letter-spacing:-.01em; }
.mt-newsletter-text p{ font-size:.91rem; color:var(--text-meta); margin:0; }
.mt-newsletter-form{ display:flex; gap:12px; flex:1 1 280px; min-width:0; max-width:440px; position:relative; flex-wrap:wrap; }
.mt-newsletter-note{
  position:absolute; top:100%; left:0; margin-top:8px;
  font-size:.82rem; color:var(--text-meta); font-weight:600;
}
.mt-newsletter-form input[type=email]{
  flex:1 1 160px; min-width:0; padding:13px 19px; border-radius:999px; border:1.5px solid #D7DDEE; font-size:.95rem; font-family:var(--font-body); color:var(--text-head); font-weight:600;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.mt-newsletter-form input[type=email]:focus{ border-color:var(--blue-deep); outline:none; box-shadow:0 0 0 4px rgba(12,79,199,.12); }
.mt-newsletter-form button{
  background:linear-gradient(180deg,#1868E8,var(--blue-deep)); color:#fff; border:0; border-radius:999px; padding:13px 26px;
  font-weight:700; font-size:.9rem; cursor:pointer; white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 10px 20px -8px rgba(12,79,199,.45);
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.mt-newsletter-form button:hover{ transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 14px 26px -8px rgba(12,79,199,.5); }
.mt-newsletter-form button:active{ transform:translateY(0) scale(.98); }
.mt-trust-strip{ display:flex; gap:20px; flex-wrap:wrap; align-items:center; width:100%; padding-top:26px; margin-top:4px; border-top:1px solid var(--border-soft); }
.mt-trust-item{ display:flex; align-items:center; gap:7px; font-size:.82rem; font-weight:700; color:var(--text-head); }
.mt-trust-item svg{ width:18px; height:18px; flex:none; }

@media (max-width:700px){
  .mt-newsletter{ padding:28px; }
  .mt-trust-strip{ gap:14px 20px; }
}

/* ---------------- FOOTER ---------------- */
.mt-footer{ background:var(--footer-navy); color:#DCE3F2; }
.mt-footer-ribbon{
  text-align:center; padding:13px 0; font-size:.86rem; color:#C2CDE8; font-weight:700; letter-spacing:.01em;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.mt-footer-inner{
  max-width:var(--container-w); margin:0 auto; padding:44px clamp(22px, 3.4vw, 40px) 34px;
  display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:28px;
}
.mt-footer-brand{ display:flex; align-items:center; gap:12px; }
.mt-footer-brand img{ width:36px; height:36px; border-radius:50%; box-shadow:0 0 0 3px rgba(255,255,255,.08); }
.mt-footer-brand .name{ color:#fff; font-weight:700; font-family:var(--font-head); font-size:1.02rem; letter-spacing:.01em; }
.mt-footer-brand .tag{ font-size:.75rem; color:#AFBEE0; }
.mt-footer-links{ display:flex; gap:11px 22px; flex-wrap:wrap; font-size:.83rem; font-weight:600; max-width:420px; }
.mt-footer-links a{ transition:color .2s ease; position:relative; }
.mt-footer-links a:hover{ color:#fff; }
.mt-footer-social{ display:flex; gap:10px; }
.mt-footer-social a{
  width:35px; height:35px; border-radius:50%; background:rgba(255,255,255,.09);
  display:flex; align-items:center; justify-content:center;
  transition:background-color .25s ease, transform .3s var(--ease-out);
}
.mt-footer-social a:hover{ background:rgba(255,255,255,.2); transform:translateY(-2px); }
.mt-footer-social svg{ width:16px; height:16px; }
.mt-footer-copy{ font-size:.79rem; color:#9CACD0; font-weight:600; width:100%; text-align:center; padding-top:26px; margin-top:4px; border-top:1px solid rgba(255,255,255,.08); }

/* ---- Need Help? component (Phase 10.2) ----
   Defined once here (the universal base stylesheet loaded on every
   public page) rather than duplicated per content-type stylesheet
   (mind-builders.css, assessments.css, checkout's own styles) — one
   definition, reused wherever the component actually appears. */
.mt-need-help{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--bg-soft); border:1px solid var(--border-soft); border-radius:var(--radius-lg);
  padding:20px 24px; margin:32px 0;
}
.mt-need-help-icon{
  width:44px; height:44px; border-radius:50%; background:var(--card-blue-bg); color:var(--blue-deep);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.mt-need-help-text{ flex:1; min-width:180px; }
.mt-need-help-text strong{ display:block; font-size:.98rem; color:var(--text-head); margin-bottom:2px; }
.mt-need-help-text span{ font-size:.85rem; color:var(--text-meta); }
@media (max-width:480px){
  .mt-need-help{ padding:16px 18px; }
}
.mt-footer-follow{ display:flex; flex-direction:column; align-items:flex-start; gap:11px; }
.mt-follow-label{ font-size:.79rem; color:#AFBEE0; font-weight:700; white-space:nowrap; }

@media (max-width:760px){
  .mt-footer-inner{ flex-direction:column; align-items:flex-start; padding:32px 24px 24px; }
}

/* utility */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}