/* MenteCodi brand layer
   Loaded after the original template and landing CSS so layout and components
   remain untouched while the complete color system is re-skinned. */
:root {
  --mc-primary: #050B29;
  --mc-secondary: #101A3D;
  --mc-blue: #2F73FF;
  --mc-cyan: #28D3F2;
  --mc-green: #22C55E;
  --mc-yellow: #FFC928;
  --mc-bg: #F7FAFC;
  --mc-white: #FFFFFF;
  --mc-text: #071126;
  --mc-muted: #64748B;
  --mc-border: #DCE5F0;
  --mc-font-heading: "Poppins", sans-serif;
  --mc-font-body: "Nunito Sans", sans-serif;

  /* Compatibility mapping for the Kidzio template tokens. */
  --color-k-bg: var(--mc-bg);
  --color-k-surface: var(--mc-white);
  --color-k-ink: var(--mc-text);
  --color-k-ink-soft: #334155;
  --color-k-muted: var(--mc-muted);
  --color-k-border: var(--mc-border);
  --color-k-primary: var(--mc-blue);
  --color-k-primary-ink: #1D4ED8;
  --color-k-mint: var(--mc-green);
  --color-k-sky: var(--mc-cyan);
  --color-k-sun: var(--mc-yellow);
  --color-k-coral: var(--mc-blue);
  --color-k-pink: var(--mc-cyan);
  --color-k-lemon: var(--mc-yellow);
  --shadow-k: 0 18px 42px -18px rgba(5, 11, 41, .22);
  --shadow-k-soft: 0 8px 24px -12px rgba(5, 11, 41, .16);
  --mc-deep: var(--mc-secondary);
  --mc-deeper: var(--mc-primary);
}

html, body {
  background: var(--mc-bg);
  color: var(--mc-text);
  font-family: var(--mc-font-body);
  font-weight: 400;
  line-height: 1.6;
}
body, p, a, li, span, input, textarea, select, button, label,
.btn, .chip, .mc-links, .mc-nav-actions, .mc-footer-links,
.mc-diagnostic-item, .mc-route-meta, .mc-check {
  font-family: var(--mc-font-body);
}
h1, h2, h3, h4, h5, h6,
.h-display, .mc-brand, .mc-heading h2, .mc-hero h1,
.mc-app-greeting strong, .mc-mission h3, .mc-mini-stat b,
.mc-float-card strong, .mc-trust-card > p, .mc-proof b,
.mc-problem h3, .mc-solution-card h3, .mc-method-card h3,
.mc-route-card h3, .mc-diagnostic h2, .mc-route-icon,
.mc-report-top strong, .mc-report-score b, .mc-area b,
.mc-parent-copy h2, .mc-plan h3, .mc-plan-price,
.mc-final-card h2, .mc-footer h3 {
  font-family: var(--mc-font-heading);
}
h1, .mc-hero h1 { font-weight: 800; line-height: 1.02; }
h2, .mc-heading h2, .mc-diagnostic h2, .mc-parent-copy h2, .mc-final-card h2 {
  font-weight: 700;
  line-height: 1.12;
}
h3, .mc-problem h3, .mc-solution-card h3, .mc-method-card h3,
.mc-route-card h3, .mc-plan h3, .mc-footer h3 {
  font-weight: 700;
  line-height: 1.25;
}
p { line-height: 1.65; }
.btn, button { font-weight: 700; letter-spacing: -.005em; }
.mc-links a { font-weight: 600; }
.mc-kicker, .chip { font-weight: 700; }
.mc-hero h1 { letter-spacing: -.045em; text-wrap: balance; }
.mc-heading h2, .mc-diagnostic h2, .mc-parent-copy h2, .mc-final-card h2 {
  letter-spacing: -.035em;
  text-wrap: balance;
}
.mc-heading p, .mc-hero-copy > p, .mc-parent-copy > p { line-height: 1.72; }
.mc-step-label, .mc-plan-price small { font-family: var(--mc-font-body); }
.mc-mission::after, .mc-diagnostic::after { font-family: var(--mc-font-heading); }
::selection { color: var(--mc-white); background: var(--mc-blue); }
a, button { -webkit-tap-highlight-color: rgba(47, 115, 255, .14); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(40, 211, 242, .55);
  outline-offset: 3px;
}

/* Shared template components */
.k-card, .k-surface, .btn-secondary, .icon-btn, .chip {
  border-color: var(--mc-border);
}
.k-card { box-shadow: 0 1px 0 rgba(5, 11, 41, .02); }
.btn-primary {
  background: linear-gradient(135deg, var(--mc-blue), var(--mc-cyan));
  color: var(--mc-white);
  box-shadow: 0 12px 26px -11px rgba(47, 115, 255, .62), inset 0 -3px 0 rgba(5, 11, 41, .12);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #1E5FF5, #18C5E6);
  box-shadow: 0 16px 31px -11px rgba(47, 115, 255, .7), inset 0 -3px 0 rgba(5, 11, 41, .12);
}
.btn-secondary { color: var(--mc-primary); background: var(--mc-white); }
.btn-secondary:hover { color: #1D4ED8; border-color: rgba(47, 115, 255, .45); background: #F8FBFF; }
.btn-ghost { color: var(--mc-secondary); }
.btn-ghost:hover { color: var(--mc-blue); background: rgba(47, 115, 255, .07); }
.btn-soft, .chip-primary { color: #1D4ED8; background: rgba(47, 115, 255, .11); }
.chip-primary { border-color: rgba(47, 115, 255, .08); }
.chip-mint { color: #15803D; background: rgba(34, 197, 94, .14); }
.chip-sun { color: #805D00; background: rgba(255, 201, 40, .2); }
.chip-sky { color: #036A87; background: rgba(40, 211, 242, .16); }
.chip-coral { color: #1D4ED8; background: rgba(47, 115, 255, .12); }
.progress > span { background: linear-gradient(90deg, var(--mc-blue), var(--mc-cyan)); }
.progress-mint > span { background: linear-gradient(90deg, #16A34A, var(--mc-green)); }
.progress-sun > span { background: linear-gradient(90deg, #F5AC00, var(--mc-yellow)); }

/* Header and navigation */
.mc-header {
  background: rgba(247, 250, 252, .9);
  border-bottom-color: rgba(220, 229, 240, .92);
  box-shadow: 0 5px 22px -20px rgba(5, 11, 41, .45);
}
.mc-brand { color: var(--mc-primary); }
.mc-brand em { color: var(--mc-blue); }
.mc-brand-mark,
.mc-footer .mc-brand-mark {
  background: linear-gradient(145deg, var(--mc-blue), var(--mc-cyan));
  box-shadow: 0 10px 24px -10px rgba(47, 115, 255, .66);
}
.mc-brand-icon { filter: drop-shadow(0 7px 10px rgba(47, 115, 255, .2)); }
.mc-links a { color: #475569; }
.mc-links a:hover { color: var(--mc-blue); }
.mc-menu-button { color: var(--mc-primary); background: var(--mc-white); border-color: var(--mc-border); }
.mc-mobile-panel { background: var(--mc-white); box-shadow: 0 18px 34px -18px rgba(5, 11, 41, .3); }
.mc-mobile-panel a:hover { color: var(--mc-blue); background: rgba(47, 115, 255, .07); }

/* Hero and product preview */
.mc-hero {
  background:
    radial-gradient(circle at 78% 22%, rgba(40, 211, 242, .17), transparent 31%),
    radial-gradient(circle at 16% 72%, rgba(255, 201, 40, .12), transparent 24%),
    linear-gradient(180deg, var(--mc-bg), #EFF6FF);
}
.mc-hero::before { background: rgba(47, 115, 255, .09); }
.mc-gradient-text {
  background: linear-gradient(90deg, var(--mc-blue), #0876D9 48%, var(--mc-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mc-trust i { background: var(--mc-green); box-shadow: 0 0 0 4px rgba(34, 197, 94, .15); }
.mc-orbit { border-color: rgba(47, 115, 255, .3); }
.mc-orbit::before { background: var(--mc-yellow); box-shadow: 0 0 0 8px rgba(255, 201, 40, .16); }
.mc-orbit::after { background: var(--mc-green); box-shadow: 0 0 0 8px rgba(34, 197, 94, .14); }
.mc-device {
  background: linear-gradient(145deg, var(--mc-primary), var(--mc-secondary));
  box-shadow: 0 32px 65px -22px rgba(5, 11, 41, .55);
}
.mc-mascot { background: linear-gradient(145deg, var(--mc-cyan), var(--mc-blue)); }
.mc-mission { background: linear-gradient(135deg, var(--mc-blue), #1467E8 58%, var(--mc-cyan)); }
.mc-lesson { background: rgba(34, 197, 94, .13); }
.mc-lesson:last-child { background: rgba(255, 201, 40, .18); }
.mc-float-left .mc-float-ico { color: #15803D; background: rgba(34, 197, 94, .16); }
.mc-float-right .mc-float-ico { background: rgba(255, 201, 40, .2); }

/* Section accents, cards and educational states */
.mc-section-soft { background: linear-gradient(180deg, rgba(47, 115, 255, .035), rgba(40, 211, 242, .055)); }
.mc-kicker { color: #1D4ED8; }
.mc-kicker::before { background: linear-gradient(90deg, var(--mc-blue), var(--mc-cyan)); }
.mc-problem:hover, .mc-solution-card:hover, .mc-route-card:hover {
  border-color: rgba(47, 115, 255, .28);
  box-shadow: var(--shadow-k);
}
.mc-problem:nth-child(1) .mc-number { background: rgba(47, 115, 255, .13); }
.mc-problem:nth-child(2) .mc-number { background: rgba(255, 201, 40, .2); }
.mc-problem:nth-child(3) .mc-number { background: rgba(40, 211, 242, .16); }
.mc-solution-note { color: #1D4ED8; background: rgba(47, 115, 255, .08); }
.mc-solution-card:nth-child(4n+1) .mc-icon { background: rgba(47, 115, 255, .13); }
.mc-solution-card:nth-child(4n+2) .mc-icon { background: rgba(34, 197, 94, .14); }
.mc-solution-card:nth-child(4n+3) .mc-icon { background: rgba(255, 201, 40, .2); }
.mc-solution-card:nth-child(4n+4) .mc-icon { background: rgba(40, 211, 242, .16); }
.mc-method-line { background: linear-gradient(90deg, var(--mc-green), var(--mc-blue), var(--mc-yellow)); }
.mc-method-card:nth-child(1) .mc-step { background: rgba(34, 197, 94, .2); }
.mc-method-card:nth-child(2) .mc-step { background: rgba(47, 115, 255, .17); }
.mc-method-card:nth-child(3) .mc-step { background: rgba(255, 201, 40, .24); }
.mc-step-label { background: var(--mc-primary); }

/* High-impact diagnostic block */
.mc-diagnostic {
  background: linear-gradient(120deg, var(--mc-primary), var(--mc-secondary) 46%, #1749A5 73%, var(--mc-blue));
  box-shadow: 0 25px 60px -30px rgba(5, 11, 41, .6);
}
.mc-diagnostic .btn-secondary:hover { border-color: var(--mc-cyan); }
.mc-diagnostic-item { border-color: rgba(40, 211, 242, .2); background: rgba(255, 255, 255, .08); }
.mc-diagnostic-item span { color: var(--mc-primary); background: var(--mc-cyan); }

/* Routes and progress */
.mc-route-card:nth-child(4n+1) .mc-route-icon { color: #1D4ED8; background: rgba(47, 115, 255, .13); }
.mc-route-card:nth-child(4n+2) .mc-route-icon { color: #15803D; background: rgba(34, 197, 94, .14); }
.mc-route-card:nth-child(4n+3) .mc-route-icon { color: #805D00; background: rgba(255, 201, 40, .2); }
.mc-route-card:nth-child(4n+4) .mc-route-icon { color: #036A87; background: rgba(40, 211, 242, .16); }
.mc-route-dot { background: var(--mc-green); }
.mc-report-score b { color: var(--mc-blue); }
.mc-chart { background: linear-gradient(180deg, rgba(47, 115, 255, .07), transparent), repeating-linear-gradient(0deg, transparent, transparent 31px, var(--mc-border) 32px); }
.mc-chart path[stroke] { stroke: var(--mc-blue); }
.mc-chart stop { stop-color: var(--mc-blue); }
.mc-check span { color: #15803D; background: rgba(34, 197, 94, .14); }

/* Plans */
.mc-plan.featured {
  border-color: var(--mc-blue);
  box-shadow: 0 22px 52px -24px rgba(47, 115, 255, .48);
}
.mc-plan li::before { color: var(--mc-green); }
.mc-plan:hover { border-color: rgba(47, 115, 255, .3); }

/* Final CTA and footer */
.mc-final-card {
  background: linear-gradient(135deg, var(--mc-primary), var(--mc-secondary) 44%, var(--mc-blue) 78%, #1798CE);
  box-shadow: 0 28px 65px -32px rgba(5, 11, 41, .7);
}
.mc-final-card .btn-secondary { color: #1D4ED8; }
.mc-final-card .btn-secondary:hover { color: var(--mc-primary); border-color: var(--mc-cyan); }
.mc-footer { background: var(--mc-primary); }
.mc-footer-copy, .mc-footer-links a, .mc-footer-links span { color: #CBD5E1; }
.mc-footer-links a:hover { color: var(--mc-cyan); }
.mc-social a { background: rgba(40, 211, 242, .1); border: 1px solid rgba(40, 211, 242, .14); }
.mc-social a:hover { color: var(--mc-primary); background: var(--mc-cyan); }
.mc-footer-bottom { color: #94A3B8; border-top-color: rgba(40, 211, 242, .15); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

@media (max-width: 760px) {
  .mc-hero h1 { letter-spacing: -.038em; line-height: 1.04; overflow-wrap: break-word; }
  .mc-heading h2, .mc-diagnostic h2, .mc-parent-copy h2, .mc-final-card h2 {
    letter-spacing: -.025em;
    line-height: 1.15;
  }
  .mc-hero-copy > p, .mc-heading p, .mc-parent-copy > p { line-height: 1.68; }
}