/* =====================================================================
   ManaCoding Meet — Design System
   Palette: white base, AI-blue + violet gradient accents
   Type: Space Grotesk (display) / Inter (body)
   ===================================================================== */

:root {
  --mc-blue:        #4F6EF7;
  --mc-blue-dark:   #3A54D6;
  --mc-violet:      #8B5CF6;
  --mc-indigo:      #1E1B4B;
  --mc-ink:         #14142B;
  --mc-slate:       #5B5B75;
  --mc-mist:        #F5F6FC;
  --mc-white:       #FFFFFF;
  --mc-line:        #E7E8F5;
  --mc-success:     #17B26A;
  --mc-warn:        #F79009;

  --mc-gradient:    linear-gradient(120deg, var(--mc-blue) 0%, var(--mc-violet) 100%);
  --mc-gradient-soft: linear-gradient(135deg, rgba(79,110,247,0.10), rgba(139,92,246,0.10));

  --mc-radius-sm: 10px;
  --mc-radius-md: 16px;
  --mc-radius-lg: 24px;

  --mc-shadow-sm: 0 2px 8px rgba(20,20,43,0.06);
  --mc-shadow-md: 0 12px 32px rgba(30,27,75,0.10);
  --mc-shadow-glow: 0 20px 60px rgba(79,110,247,0.22);

  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  color: var(--mc-ink);
  background: var(--mc-white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--mc-indigo);
}

a { text-decoration: none; color: var(--mc-blue-dark); }
.text-gradient {
  background: var(--mc-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- Buttons -------------------------------------------------------- */
.btn-mc-primary {
  background: var(--mc-gradient);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.75rem 1.75rem;
  font-weight: 600;
  box-shadow: var(--mc-shadow-glow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-mc-primary:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 24px 70px rgba(79,110,247,0.3); }

.btn-mc-outline {
  background: #fff;
  color: var(--mc-indigo);
  border: 1.5px solid var(--mc-line);
  border-radius: 999px;
  padding: 0.75rem 1.75rem;
  font-weight: 600;
  transition: border-color .15s ease, transform .15s ease;
}
.btn-mc-outline:hover { border-color: var(--mc-blue); color: var(--mc-indigo); transform: translateY(-2px); }

/* ---- Nav -------------------------------------------------------------- */
.mc-navbar {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--mc-line);
  position: sticky; top: 0; z-index: 100;
}
.mc-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--mc-indigo);
}
.mc-logo span { color: var(--mc-blue); }
.mc-navbar .nav-link { color: var(--mc-slate); font-weight: 500; }
.mc-navbar .nav-link:hover { color: var(--mc-indigo); }

/* ---- Glass cards -------------------------------------------------------- */
.glass-card {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--mc-radius-lg);
  box-shadow: var(--mc-shadow-md);
}
.mc-card {
  background: #fff;
  border: 1px solid var(--mc-line);
  border-radius: var(--mc-radius-md);
  box-shadow: var(--mc-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.mc-card:hover { transform: translateY(-4px); box-shadow: var(--mc-shadow-md); }

/* ---- Hero --------------------------------------------------------------- */
.mc-hero {
  padding: 6rem 0 4rem;
  background:
    radial-gradient(60% 60% at 15% 10%, rgba(79,110,247,0.12), transparent 60%),
    radial-gradient(50% 50% at 90% 0%, rgba(139,92,246,0.14), transparent 60%),
    var(--mc-white);
  overflow: hidden;
}
.mc-hero h1 { font-size: clamp(2.4rem, 5vw, 3.75rem); line-height: 1.06; }
.mc-hero p.lead { color: var(--mc-slate); font-size: 1.15rem; max-width: 540px; }

.mc-badge-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--mc-gradient-soft);
  color: var(--mc-blue-dark);
  border-radius: 999px;
  padding: .4rem 1rem;
  font-size: .82rem;
  font-weight: 600;
}

/* ---- Mock dashboard visual (hero) ---------------------------------------- */
.mc-dashboard-mock {
  border-radius: var(--mc-radius-lg);
  background: linear-gradient(160deg, #ffffff 0%, #f2f4ff 100%);
  border: 1px solid var(--mc-line);
  box-shadow: var(--mc-shadow-glow);
  padding: 1.25rem;
  position: relative;
}
.mc-mock-row { display: flex; gap: .6rem; margin-bottom: .6rem; }
.mc-mock-tile {
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--mc-line);
  padding: .75rem;
  flex: 1;
}
.mc-waveform { display: flex; align-items: flex-end; gap: 3px; height: 34px; }
.mc-waveform span {
  width: 4px; border-radius: 3px;
  background: var(--mc-gradient);
  animation: mc-wave 1.2s ease-in-out infinite;
}
@keyframes mc-wave {
  0%, 100% { height: 20%; opacity: .5; }
  50% { height: 100%; opacity: 1; }
}
.mc-pulse-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #ef4444;
  display: inline-block; margin-right: 5px;
  animation: mc-pulse 1.4s ease-in-out infinite;
}
@keyframes mc-pulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }

/* ---- Section spacing -------------------------------------------------- */
.mc-section { padding: 5rem 0; }
.mc-section-alt { background: var(--mc-mist); }
.mc-eyebrow {
  text-transform: uppercase; letter-spacing: .12em; font-size: .78rem;
  font-weight: 700; color: var(--mc-blue);
}

/* ---- Feature icon tile -------------------------------------------------- */
.mc-icon-tile {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--mc-gradient-soft);
  color: var(--mc-blue-dark);
  font-size: 1.3rem;
  margin-bottom: 1rem;
}
/* Rotating accent palette — used across feature cards, testimonials, etc.
   so the page reads as considered and varied rather than one gradient
   repeated everywhere. */
.mc-icon-tile.tone-violet { background: rgba(139,92,246,.12); color: #7C3AED; }
.mc-icon-tile.tone-teal   { background: rgba(20,184,166,.12); color: #0D9488; }
.mc-icon-tile.tone-amber  { background: rgba(245,158,11,.14); color: #B45309; }
.mc-icon-tile.tone-rose   { background: rgba(244,63,94,.12);  color: #BE123C; }
.mc-avatar-ring.tone-blue   { background: linear-gradient(135deg, #4F6EF7, #3A54D6); }
.mc-avatar-ring.tone-violet { background: linear-gradient(135deg, #8B5CF6, #6D28D9); }
.mc-avatar-ring.tone-teal   { background: linear-gradient(135deg, #2DD4BF, #0D9488); }
.mc-avatar-ring.tone-amber  { background: linear-gradient(135deg, #FBBF24, #B45309); }

/* ---- Pricing ------------------------------------------------------------ */
.mc-price-card { padding: 2rem; }
.mc-price-card.featured {
  background: var(--mc-indigo);
  color: #fff;
  border: none;
  transform: scale(1.03);
}
.mc-price-card.featured h3, .mc-price-card.featured .mc-price { color: #fff; }
.mc-price { font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; }

/* ---- Footer --------------------------------------------------------- */
.mc-footer {
  background: var(--mc-indigo);
  color: #C9C9E8;
  padding: 3.5rem 0 1.5rem;
}
.mc-footer a { color: #C9C9E8; }
.mc-footer a:hover { color: #fff; }
.mc-footer h6 { color: #fff; font-family: var(--font-display); }

/* ---- Auth pages -------------------------------------------------------- */
.mc-auth-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(50% 50% at 20% 20%, rgba(79,110,247,0.10), transparent 60%),
    radial-gradient(50% 50% at 85% 80%, rgba(139,92,246,0.12), transparent 60%),
    var(--mc-white);
  padding: 2rem 1rem;
}
.mc-auth-card { max-width: 460px; width: 100%; padding: 2.5rem; }
.form-control:focus { border-color: var(--mc-blue); box-shadow: 0 0 0 .2rem rgba(79,110,247,.15); }

/* ---- Animated hero background blobs ------------------------------------ */
.mc-hero { position: relative; }
.mc-blob {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: .35;
  pointer-events: none; z-index: 0;
  animation: mc-float 9s ease-in-out infinite;
}
.mc-blob-1 { width: 340px; height: 340px; background: var(--mc-blue); top: -80px; left: -60px; animation-delay: 0s; }
.mc-blob-2 { width: 280px; height: 280px; background: var(--mc-violet); bottom: -60px; right: -40px; animation-delay: 2.5s; }
.mc-blob-3 { width: 180px; height: 180px; background: var(--mc-blue); top: 40%; right: 10%; opacity: .2; animation-delay: 1.2s; }
@keyframes mc-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -25px) scale(1.08); }
}
.mc-hero .container { position: relative; z-index: 1; }

/* ---- Scroll-reveal fade-up (see main.js IntersectionObserver) ---------- */
.fade-up {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.21,.8,.32,1), transform .7s cubic-bezier(.21,.8,.32,1);
}
.fade-up.in-view { opacity: 1; transform: none; }

/* ---- Hero mock dashboard: sequential row entrance + gentle glow -------- */
.mc-dashboard-mock { animation: mc-mockGlow 5s ease-in-out infinite; }
@keyframes mc-mockGlow {
  0%, 100% { box-shadow: var(--mc-shadow-glow); }
  50% { box-shadow: 0 26px 76px rgba(139,92,246,.28); }
}
.mc-mock-row {
  opacity: 0; animation: mc-rowIn .6s ease forwards;
}
.mc-mock-row:nth-child(1) { animation-delay: .15s; }
.mc-mock-row:nth-child(2) { animation-delay: .35s; }
.mc-mock-row:nth-child(3) { animation-delay: .55s; }
.mc-mock-row:nth-child(4) { animation-delay: .75s; }
@keyframes mc-rowIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* Floating avatar bubbles decorating the hero mock (professional "alive" feel) */
.mc-floating-avatar {
  position: absolute; width: 42px; height: 42px; border-radius: 50%;
  background: var(--mc-gradient); color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem; box-shadow: var(--mc-shadow-md);
  animation: mc-bob 4s ease-in-out infinite;
}
@keyframes mc-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ---- Product tour tabs -------------------------------------------------- */
#mcTourTabs .nav-link {
  color: var(--mc-slate); font-weight: 600; border-radius: 999px;
  background: #fff; border: 1px solid var(--mc-line);
}
#mcTourTabs .nav-link.active { background: var(--mc-gradient); color: #fff; border-color: transparent; }

/* ---- Password field with show/hide toggle ------------------------------ */
.mc-password-field { position: relative; }
.mc-password-field input { padding-right: 2.75rem; }
.mc-password-toggle {
  position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--mc-slate);
  width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; cursor: pointer;
}
.mc-password-toggle:hover { color: var(--mc-blue-dark); background: var(--mc-mist); }

/* ---- Utility ---------------------------------------------------------- */
.text-slate { color: var(--mc-slate); }

/* =====================================================================
   ManaMeeting homepage refresh
   ===================================================================== */

.mm-hero {
  padding: 5.5rem 0 4rem;
  background:
    linear-gradient(180deg, #f7f9ff 0%, #ffffff 52%),
    radial-gradient(52% 65% at 82% 18%, rgba(11,92,255,.18), transparent 68%);
  overflow: hidden;
}

.mm-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, .95fr);
  align-items: center;
  gap: 4rem;
}

.mm-hero-copy h1 {
  max-width: 760px;
  font-size: clamp(3rem, 6.4vw, 6.1rem);
  line-height: .96;
  letter-spacing: 0;
  margin: 1.2rem 0 1.35rem;
  color: #050724;
}

.mm-hero-copy .lead {
  max-width: 650px;
  color: #4b587c;
  font-size: clamp(1.08rem, 1.6vw, 1.35rem);
  line-height: 1.6;
}

.mm-alert-pill {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: #0b5cff;
  background: #eaf2ff;
  border: 1px solid #cfe0ff;
  border-radius: 999px;
  padding: .55rem 1rem;
  font-weight: 800;
  font-size: .88rem;
}

.mm-hero-actions,
.mm-proof-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .85rem;
}

.mm-proof-row {
  margin-top: 1.2rem;
  color: #51607f;
  font-size: .92rem;
  font-weight: 700;
}

.mm-proof-row i {
  color: #16a34a;
}

.mm-hero-stage {
  position: relative;
}

.mm-meeting-window {
  border: 1px solid #dfe7f5;
  background: #ffffff;
  border-radius: 28px;
  padding: .85rem;
  box-shadow: 0 34px 90px rgba(18,35,84,.18);
}

.mm-window-top {
  height: 38px;
  display: flex;
  align-items: center;
  gap: .45rem;
  color: #5a6684;
  font-size: .8rem;
  font-weight: 800;
  padding: 0 .35rem;
}

.mm-window-top span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e5e7eb;
}

.mm-window-top span:first-child { background: #ff5f57; }
.mm-window-top span:nth-child(2) { background: #ffbd2e; }
.mm-window-top span:nth-child(3) { background: #28c840; }
.mm-window-top strong { margin-left: .45rem; }

.mm-video-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  grid-template-rows: repeat(3, minmax(92px, 1fr));
  gap: .7rem;
}

.mm-video-tile {
  position: relative;
  min-height: 96px;
  overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(circle at 30% 22%, #93c5fd, transparent 28%),
    linear-gradient(135deg, #111827, #1d4ed8);
}

.mm-video-main {
  grid-row: span 3;
}

.mm-video-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .9;
}

.mm-video-tile span {
  position: absolute;
  left: .8rem;
  bottom: .75rem;
  color: #fff;
  background: rgba(5,7,36,.58);
  border-radius: 999px;
  padding: .28rem .7rem;
  font-size: .78rem;
  font-weight: 800;
}

.mm-control-row {
  display: flex;
  justify-content: center;
  gap: .65rem;
  padding: .9rem 0 .15rem;
}

.mm-control-row span {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  color: #172554;
}

.mm-control-row .mm-end-call {
  background: #ef4444;
  color: #fff;
}

.mm-ai-note-card {
  position: absolute;
  right: -18px;
  bottom: 48px;
  width: 245px;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #dfe7f5;
  box-shadow: 0 22px 48px rgba(18,35,84,.16);
}

.mm-ai-note-card p {
  margin: .15rem 0 0;
  color: #647084;
  font-size: .78rem;
}

.mm-icon-bubble {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0b5cff, #2dd4bf);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mm-action-strip {
  margin-top: -1.5rem;
  position: relative;
  z-index: 2;
}

.mm-action-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  background: #fff;
  border: 1px solid #e5eaf4;
  border-radius: 24px;
  padding: 1rem;
  box-shadow: 0 22px 55px rgba(18,35,84,.10);
}

.mm-action-tile {
  min-height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .45rem;
  text-align: center;
  border-radius: 18px;
  color: #07122f;
  transition: background .16s ease, transform .16s ease;
}

.mm-action-tile:hover {
  background: #f7faff;
  color: #0b5cff;
  transform: translateY(-3px);
}

.mm-action-tile span {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.35rem;
}

.mm-action-tile small {
  color: #647084;
  font-weight: 700;
}

.tone-blue { background: linear-gradient(135deg, #2d8cff, #0b5cff); }
.tone-indigo { background: linear-gradient(135deg, #6366f1, #2563eb); }
.tone-orange { background: linear-gradient(135deg, #fb923c, #f15a24); }
.tone-teal { background: linear-gradient(135deg, #2dd4bf, #0d9488); }

.mm-logo-strip {
  padding: 4rem 0 2rem;
  text-align: center;
}

.mm-logo-strip p {
  color: #647084;
  font-weight: 800;
  margin-bottom: 1.2rem;
}

.mm-logo-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem;
}

.mm-logo-row span {
  border: 1px solid #e1e8f4;
  background: #fff;
  color: #334155;
  border-radius: 999px;
  padding: .65rem 1.15rem;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(18,35,84,.06);
}

.mm-section-heading {
  max-width: 760px;
  margin: 0 auto 3rem;
  text-align: center;
}

.mm-section-heading h2,
.mm-ai-section h2,
.mm-final-panel h2 {
  font-size: clamp(2rem, 4vw, 3.55rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.mm-products {
  background: linear-gradient(180deg, #fff, #f7f9ff);
}

.mm-product-card {
  height: 100%;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid #e1e8f4;
  background: #fff;
  box-shadow: 0 18px 42px rgba(18,35,84,.08);
  transition: transform .18s ease, box-shadow .18s ease;
}

.mm-product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 70px rgba(18,35,84,.14);
}

.mm-product-card img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  background: #eaf2ff;
}

.mm-product-body {
  padding: 1.35rem;
}

.mm-product-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0b5cff;
  background: #eaf2ff;
  margin-bottom: 1rem;
}

.mm-product-body h3,
.mm-workflow-card h3 {
  font-size: 1.25rem;
  letter-spacing: 0;
}

.mm-product-body p,
.mm-workflow-card p,
.mm-final-panel p {
  color: #5b6684;
}

.mm-product-body a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 800;
}

.mm-ai-section {
  background: #050724;
  color: #fff;
}

.mm-ai-section h2,
.mm-ai-section .mc-eyebrow {
  color: #fff;
}

.mm-ai-section .text-slate {
  color: #c6d1ea;
}

.mm-ai-row {
  display: flex;
  gap: .8rem;
  align-items: center;
  color: #e6edff;
  font-weight: 700;
}

.mm-ai-row i {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(255,255,255,.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #7dd3fc;
  flex-shrink: 0;
}

.mm-ai-console {
  border-radius: 28px;
  padding: 1.1rem;
  background:
    radial-gradient(circle at top right, rgba(45,212,191,.18), transparent 36%),
    #10173a;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 80px rgba(0,0,0,.28);
}

.mm-ai-search,
.mm-ai-answer,
.mm-task-preview {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 1rem;
}

.mm-ai-search {
  color: #fff;
  font-weight: 800;
}

.mm-ai-answer {
  margin-top: .85rem;
  background: #fff;
  color: #0f172a;
}

.mm-ai-answer h6 {
  color: #0b5cff;
  font-weight: 800;
}

.mm-ai-tags {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
}

.mm-ai-tags span {
  background: #eaf2ff;
  color: #0b5cff;
  border-radius: 999px;
  padding: .3rem .7rem;
  font-size: .78rem;
  font-weight: 800;
}

.mm-task-preview {
  margin-top: .85rem;
  display: grid;
  gap: .55rem;
  color: #dce6ff;
}

.mm-workflows {
  background: #f7f9ff;
}

.mm-workflow-card {
  min-height: 260px;
  padding: 1.5rem;
  border: 1px solid #e1e8f4;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(18,35,84,.07);
}

.mm-workflow-card > i {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #eaf2ff, #ecfeff);
  color: #0b5cff;
  font-size: 1.45rem;
  margin-bottom: 1.2rem;
}

.mm-final-cta {
  padding: 5rem 0;
  background: #fff;
}

.mm-final-panel {
  display: grid;
  grid-template-columns: minmax(260px, .85fr) 1fr;
  align-items: center;
  gap: 2rem;
  overflow: hidden;
  border-radius: 32px;
  background: linear-gradient(135deg, #0b5cff, #050724);
  color: #fff;
  padding: 1.25rem 3rem 1.25rem 1.25rem;
  box-shadow: 0 32px 90px rgba(11,92,255,.24);
}

.mm-final-panel img {
  width: 100%;
  min-height: 280px;
  object-fit: cover;
  border-radius: 24px;
}

.mm-final-panel h2,
.mm-final-panel .mc-eyebrow {
  color: #fff;
}

.mm-final-panel p {
  color: rgba(255,255,255,.78);
  max-width: 620px;
}

/* =====================================================================
   Mobile responsiveness pass — applies across the whole marketing site
   and auth pages. Dashboard-specific responsive rules live in
   dashboard.css; meeting-room rules live in meeting.css.
   ===================================================================== */

/* Comfortable touch targets everywhere on small screens */
@media (max-width: 767.98px) {
  .btn, .btn-mc-primary, .btn-mc-outline {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .form-control, .form-select {
    min-height: 44px;
  }
}

@media (max-width: 991.98px) {
  .mc-hero { padding: 3.5rem 0 2.5rem; text-align: center; }
  .mc-hero .lead { margin-left: auto; margin-right: auto; }
  .mc-hero .d-flex.flex-wrap.gap-3 { justify-content: center; }
  .mc-dashboard-mock { margin-top: 1rem; }

  .mc-price-card.featured { transform: none; }

  .mc-section { padding: 3.25rem 0; }

  .mm-hero {
    padding: 3.5rem 0 2.5rem;
  }

  .mm-hero-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    text-align: center;
  }

  .mm-hero-copy .lead {
    margin-left: auto;
    margin-right: auto;
  }

  .mm-hero-actions,
  .mm-proof-row {
    justify-content: center;
  }

  .mm-hero-stage {
    max-width: 680px;
    margin: 0 auto;
  }

  .mm-action-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .mm-final-panel {
    grid-template-columns: 1fr;
    padding: 1rem;
  }
}

@media (max-width: 575.98px) {
  .mc-hero h1 { font-size: 2.1rem; }
  .mc-hero .mc-mock-row { gap: .4rem; }
  .mc-mock-tile { padding: .55rem; }

  .mc-auth-card { padding: 1.75rem 1.25rem; }
  .glass-card.mc-auth-card { border-radius: var(--mc-radius-md); }

  .mc-price-card { padding: 1.5rem; }
  .mc-price { font-size: 2.1rem; }

  .mc-icon-tile { width: 42px; height: 42px; font-size: 1.1rem; }

  .navbar .btn { padding: .55rem 1rem; font-size: .85rem; }

  .mm-hero-copy h1 {
    font-size: 2.55rem;
  }

  .mm-video-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }

  .mm-video-main {
    grid-column: span 2;
    grid-row: auto;
    min-height: 220px;
  }

  .mm-ai-note-card {
    position: static;
    width: 100%;
    margin-top: 1rem;
  }

  .mm-action-grid {
    grid-template-columns: 1fr;
  }

  .mm-action-tile {
    min-height: 104px;
  }

  .mm-product-card img {
    height: 190px;
  }

  .mm-final-panel img {
    min-height: 210px;
  }
}

/* Avoid horizontal scroll traps on very narrow phones */
@media (max-width: 380px) {
  .container { padding-left: 14px; padding-right: 14px; }
  .mc-hero h1 { font-size: 1.85rem; }
}

/* ---- Polished public inner pages -------------------------------------- */
.mm-page-hero {
  padding: 5rem 0 4rem;
  background:
    linear-gradient(180deg, #f7f9ff 0%, #ffffff 70%),
    radial-gradient(48% 62% at 85% 12%, rgba(45,212,191,.16), transparent 70%);
}
.mm-page-hero h1 { font-size: clamp(2.55rem, 5.5vw, 5rem); line-height: 1; letter-spacing: 0; color: #050724; margin: 1.1rem 0 1.25rem; }
.mm-page-hero .lead { color: #4b587c; max-width: 650px; }
.mm-image-frame { position: relative; overflow: hidden; border-radius: 32px; border: 1px solid #dfe7f5; box-shadow: 0 30px 80px rgba(18,35,84,.16); }
.mm-image-frame img { width: 100%; min-height: 420px; object-fit: cover; display: block; }
.mm-image-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(5,7,36,.42)); pointer-events: none; }
.mm-floating-metric { position: absolute; left: 1.2rem; bottom: 1.2rem; z-index: 1; max-width: 260px; background: rgba(255,255,255,.92); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.75); border-radius: 18px; padding: 1rem; box-shadow: 0 16px 36px rgba(5,7,36,.18); }
.mm-floating-metric strong { display: block; color: #0b5cff; font-family: var(--font-display); font-size: 1.8rem; line-height: 1; }
.mm-floating-metric span { display: block; color: #475569; font-weight: 800; font-size: .82rem; margin-top: .25rem; }
.mm-feature-card { height: 100%; padding: 1.45rem; border: 1px solid #e1e8f4; border-radius: 24px; background: #fff; box-shadow: 0 16px 38px rgba(18,35,84,.07); transition: transform .18s ease, box-shadow .18s ease; }
.mm-feature-card:hover { transform: translateY(-5px); box-shadow: 0 28px 60px rgba(18,35,84,.13); }
.mm-feature-card span { color: #0b5cff; background: #eaf2ff; border-radius: 999px; padding: .28rem .65rem; font-size: .74rem; font-weight: 900; }
.mm-feature-card h3 { font-size: 1.22rem; letter-spacing: 0; margin-top: 1rem; }
.mm-feature-card p { color: #5b6684; margin-bottom: 0; }
.mm-timeline { display: grid; gap: .85rem; margin-top: 1.5rem; }
.mm-timeline div { display: grid; gap: .2rem; padding: 1rem; border-radius: 18px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
.mm-timeline strong { color: #fff; }
.mm-timeline span { color: #c6d1ea; }
.mm-billing-toggle { width: fit-content; margin: 0 auto 2rem; display: flex; gap: .35rem; padding: .35rem; border-radius: 999px; background: #eef4ff; border: 1px solid #dbe7ff; font-weight: 800; }
.mm-billing-toggle span { border-radius: 999px; padding: .55rem 1rem; color: #50607e; }
.mm-billing-toggle .active { background: #fff; color: #0b5cff; box-shadow: 0 8px 22px rgba(18,35,84,.10); }
.mm-price-card { border-radius: 24px; }
.mm-price-card ul i { color: #16a34a; }
.mm-price-card.featured { background: radial-gradient(circle at top right, rgba(45,212,191,.20), transparent 34%), #050724; }
.mm-price-card.featured ul i { color: #fff; }
.mm-mini-feature { display: flex; align-items: center; gap: .75rem; padding: 1rem; border: 1px solid #e1e8f4; border-radius: 18px; background: #fff; color: #102044; font-weight: 800; box-shadow: 0 10px 28px rgba(18,35,84,.06); }
.mm-mini-feature i { width: 30px; height: 30px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: #dcfce7; color: #15803d; flex-shrink: 0; }
.mm-support-panel, .mm-story-card { border-radius: 28px; border: 1px solid #e1e8f4; background: #fff; box-shadow: 0 18px 42px rgba(18,35,84,.08); }
.mm-support-panel { position: sticky; top: 96px; padding: 1.5rem; }
.mm-support-panel h3 { font-size: 1.45rem; }
.mm-support-panel p { color: #5b6684; }
.mm-faq-accordion .accordion-button { gap: .8rem; border-radius: 18px !important; }
.mm-faq-accordion .accordion-button span { background: #eaf2ff; color: #0b5cff; border-radius: 999px; padding: .25rem .6rem; font-size: .72rem; font-weight: 900; white-space: nowrap; }
.mm-story-card { display: grid; grid-template-columns: .85fr 1fr; gap: 2rem; align-items: center; padding: 1.25rem 2rem 1.25rem 1.25rem; }
.mm-story-card img { width: 100%; min-height: 330px; object-fit: cover; border-radius: 22px; }

/* ---- Premium auth screens --------------------------------------------- */
.mm-auth-wrap { min-height: calc(100vh - 78px); padding: 3rem 1rem; background: linear-gradient(180deg, #f7f9ff 0%, #ffffff 100%), radial-gradient(45% 55% at 78% 20%, rgba(11,92,255,.16), transparent 72%); }
.mm-auth-shell { width: min(1120px, 100%); display: grid; grid-template-columns: minmax(360px, 1fr) minmax(360px, 480px); gap: 1.25rem; align-items: stretch; }
.mm-auth-shell-register { grid-template-columns: minmax(360px, .9fr) minmax(380px, 520px); }
.mm-auth-visual { position: relative; min-height: 620px; overflow: hidden; border-radius: 32px; box-shadow: 0 30px 80px rgba(18,35,84,.16); }
.mm-auth-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mm-auth-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,7,36,.06), rgba(5,7,36,.74)); }
.mm-auth-overlay { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.5rem; z-index: 1; color: #fff; }
.mm-auth-overlay span { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: .45rem .8rem; font-weight: 800; margin-bottom: .8rem; }
.mm-auth-overlay h2 { color: #fff; font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: 0; }
.mm-auth-overlay p { color: rgba(255,255,255,.82); max-width: 520px; }
.mm-auth-card { max-width: none; border-radius: 32px; padding: 2.2rem; }
.mm-auth-benefits { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.mm-auth-benefits span { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; background: #f2f6ff; color: #0b5cff; padding: .42rem .75rem; font-size: .78rem; font-weight: 900; }

@media (max-width: 991.98px) {
  .mm-page-hero { padding: 3.5rem 0 2.5rem; text-align: center; }
  .mm-page-hero .lead { margin-left: auto; margin-right: auto; }
  .mm-image-frame img { min-height: 320px; }
  .mm-auth-shell, .mm-auth-shell-register { grid-template-columns: 1fr; max-width: 620px; }
  .mm-auth-visual { min-height: 320px; }
  .mm-story-card { grid-template-columns: 1fr; padding: 1rem; }
  .mm-support-panel { position: static; }
}
@media (max-width: 575.98px) {
  .mm-page-hero h1 { font-size: 2.35rem; }
  .mm-floating-metric { position: static; max-width: none; border-radius: 0; }
  .mm-image-frame::after { display: none; }
  .mm-auth-wrap { padding: 1rem; }
  .mm-auth-visual { display: none; }
  .mm-auth-card { padding: 1.25rem; border-radius: 22px; }
  .mm-billing-toggle { width: 100%; justify-content: center; }
}