/* ============================================================================
   about.css — "/about".

   Source of truth: apps/editor/src/pages/AboutPage.tsx. Each rule is the
   resolved value of the Tailwind class list quoted above it; inline
   `style={{…}}` values are reproduced as-is.
   ========================================================================= */

/* ═══ Page hero ════════════════════════════════════════════════════════════ */

/* "relative pt-40 pb-24 px-6 overflow-hidden" */
.about-hero {
  position: relative;
  padding: 10rem 1.5rem 6rem;
  overflow: hidden;
}
/* "relative max-w-4xl mx-auto" */
.about-hero__inner { position: relative; max-width: 56rem; margin-left: auto; margin-right: auto; }
/* "text-5xl md:text-7xl font-black text-slate-900 dark:text-white
    tracking-tight max-w-3xl" + lineHeight 1.05, letterSpacing -0.035em */
.about-hero__title {
  font-size: 3rem;
  line-height: 1.05;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.035em;
  max-width: 48rem;
}
.mk-dark .about-hero__title { color: #fff; }
@media (min-width: 768px) { .about-hero__title { font-size: 4.5rem; } }

/* ═══ Story ════════════════════════════════════════════════════════════════ */

/* "max-w-6xl mx-auto px-6 pb-28" */
.story {
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 7rem;
}
/* "grid grid-cols-1 md:grid-cols-2 gap-16 items-start" */
.story__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 4rem;
  align-items: flex-start;
}
@media (min-width: 768px) { .story__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* "text-xs font-semibold text-indigo-600 dark:text-indigo-400 uppercase
    tracking-[0.16em] mb-6" */
.story__eyebrow {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  color: #4f46e5;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 1.5rem;
}
.mk-dark .story__eyebrow { color: #818cf8; }
/* "flex flex-col gap-5" */
.story__body { display: flex; flex-direction: column; gap: 1.25rem; }
/* "text-slate-700 dark:text-slate-300 text-lg leading-relaxed font-medium" */
.story__lead {
  color: #334155;
  font-size: 1.125rem;
  line-height: 1.625;
  font-weight: 500;
}
.mk-dark .story__lead { color: #cbd5e1; }
/* "text-[#000000] dark:text-slate-400 text-base leading-relaxed" */
.story__p { color: #000; font-size: 1rem; line-height: 1.625; }
.mk-dark .story__p { color: #94a3b8; }

/* Value cards: GlowCard + "rounded-2xl border border-slate-200/80
   dark:border-white/6 hover:border-indigo-500/30 transition-colors p-5"
   + background var(--mk-card-grad).
   `dark:border-white/6` generates no rule (6 is off Tailwind's opacity scale),
   so the slate-200/80 border stays in dark mode. The hover colour has no dark
   variant, so it applies in both themes. */
.values {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 640px) { .values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.value {
  border-radius: 1rem;
  border: 1px solid rgba(226, 232, 240, 0.8);
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
  padding: 1.25rem;
  background: var(--mk-card-grad);
}
.value:hover { border-color: rgba(99, 102, 241, 0.3); }
/* "w-9 h-9 rounded-lg flex items-center justify-center mb-3 border"
   + colour / background (colour at 1A) / borderColor (colour at 33) inline */
.value__icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  border: 1px solid;
}
/* "text-sm font-bold text-slate-900 dark:text-white mb-1.5" */
.value__title {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 0.375rem;
}
.mk-dark .value__title { color: #fff; }
/* "text-xs text-[#444444] dark:text-slate-500 leading-relaxed" */
.value__desc { font-size: 0.75rem; color: #444; line-height: 1.625; }
.mk-dark .value__desc { color: #64748b; }

/* ═══ Shared band ══════════════════════════════════════════════════════════
   "border-t border-slate-200/70 dark:border-white/5" with a per-band padding. */
.about-band { border-top: 1px solid rgba(226, 232, 240, 0.7); }
.mk-dark .about-band { border-top-color: rgba(255, 255, 255, 0.05); }
.about-band--28 { padding-top: 7rem; padding-bottom: 7rem; }
.about-band--24 { padding-top: 6rem; padding-bottom: 6rem; }
.about-band--alt { background: var(--mk-bg-alt); }
.about-band--bg { background: var(--mk-bg); }

/* "max-w-6xl mx-auto px-6" / "max-w-4xl mx-auto px-6" / "max-w-2xl mx-auto" */
.wrap-6xl-px { max-width: 72rem; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.wrap-4xl-px { max-width: 56rem; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.wrap-2xl { max-width: 42rem; margin-left: auto; margin-right: auto; }

/* ═══ Principles ═══════════════════════════════════════════════════════════ */

/* "text-center mb-16" */
.principles__head { text-align: center; margin-bottom: 4rem; }
/* "text-4xl md:text-5xl font-black text-slate-900 dark:text-white
    tracking-tight" + letterSpacing -0.03em. No margin-bottom here. */
.principles__title {
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.03em;
}
.mk-dark .principles__title { color: #fff; }
@media (min-width: 768px) { .principles__title { font-size: 3rem; line-height: 1; } }
/* "grid grid-cols-1 md:grid-cols-3 gap-4" */
.principles {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 768px) { .principles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Same card treatment as the value cards, at p-8 and full height. */
.principle {
  border-radius: 1rem;
  border: 1px solid rgba(226, 232, 240, 0.8);
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
  padding: 2rem;
  height: 100%;
  background: var(--mk-card-grad);
}
.principle:hover { border-color: rgba(99, 102, 241, 0.3); }
/* "text-5xl font-black mb-5" + a gradient fill clipped to the text. The
   original sets only the -webkit- properties, which is what Chrome renders. */
.principle__n {
  font-size: 3rem;
  line-height: 1;
  font-weight: 900;
  margin-bottom: 1.25rem;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* "text-lg font-bold text-slate-900 dark:text-white mb-3" */
.principle__title {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 0.75rem;
}
.mk-dark .principle__title { color: #fff; }
/* "text-sm text-[#444444] dark:text-slate-500 leading-relaxed" */
.principle__desc { font-size: 0.875rem; color: #444; line-height: 1.625; }
.mk-dark .principle__desc { color: #64748b; }

/* ═══ Stat strip ═══════════════════════════════════════════════════════════ */

/* "grid grid-cols-2 md:grid-cols-4 gap-px rounded-2xl overflow-hidden border
    border-slate-200 dark:border-white/8" + background var(--mk-divider) as the
   hairline. `dark:border-white/8` generates no rule — slate-200 stays. */
.about-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: var(--mk-divider);
}
@media (min-width: 768px) { .about-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* "py-8 px-4 text-center" + background var(--mk-tile) */
.about-stat { padding: 2rem 1rem; text-align: center; background: var(--mk-tile); }
/* "text-4xl font-black text-slate-900 dark:text-white" */
.about-stat__value {
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 900;
  color: #0f172a;
  display: block;
}
.mk-dark .about-stat__value { color: #fff; }
/* "text-xs text-slate-500 mt-2" */
.about-stat__label { font-size: 0.75rem; line-height: 1rem; color: #64748b; margin-top: 0.5rem; }

/* ═══ Contact strip ════════════════════════════════════════════════════════ */

/* "py-28 px-6 border-t border-slate-200/70 dark:border-white/5" */
.contact-strip {
  padding: 7rem 1.5rem;
  border-top: 1px solid rgba(226, 232, 240, 0.7);
  background: var(--mk-bg-alt);
}
.mk-dark .contact-strip { border-top-color: rgba(255, 255, 255, 0.05); }
/* "mk-conic-subtle rounded-3xl p-px" */
.contact-card__frame { border-radius: 1.5rem; padding: 1px; }
/* "rounded-3xl px-8 py-14 text-center" + the radial panel */
.contact-card {
  border-radius: 1.5rem;
  padding: 3.5rem 2rem;
  text-align: center;
  background: radial-gradient(120% 140% at 50% 0%, #10162e 0%, #05070f 60%);
}
/* This card is ALWAYS dark — text stays light in both themes; theme-paired
   classes made it black-on-black.
   "text-3xl md:text-4xl font-black text-white mb-4" + letterSpacing -0.03em */
.contact-card__title {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
}
@media (min-width: 768px) { .contact-card__title { font-size: 2.25rem; line-height: 2.5rem; } }
/* "text-slate-400 text-sm mb-8 leading-relaxed max-w-md mx-auto" */
.contact-card__lede {
  color: #94a3b8;
  font-size: 0.875rem;
  margin-bottom: 2rem;
  line-height: 1.625;
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}
/* "flex flex-col sm:flex-row items-center justify-center gap-4" */
.contact-card__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
@media (min-width: 640px) { .contact-card__actions { flex-direction: row; } }
/* The email pill. Its colours ARE theme-paired even though the card behind it
   is always dark, so in the light theme it reads as a white pill with dark
   text on a dark panel — that is what the original renders.
   "inline-flex items-center gap-2 px-6 py-3.5 rounded-xl border
    border-slate-200 dark:border-white/10 text-slate-700 dark:text-slate-300
    hover:border-slate-400 dark:hover:border-white/25 hover:text-slate-900
    dark:hover:text-white transition-all font-semibold text-sm"
   + background var(--mk-tile) */
.contact-card__mail {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid #e2e8f0;
  color: #334155;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.25rem;
  background: var(--mk-tile);
}
.contact-card__mail:hover { border-color: #94a3b8; color: #0f172a; }
.mk-dark .contact-card__mail { border-color: rgba(255, 255, 255, 0.1); color: #cbd5e1; }
.mk-dark .contact-card__mail:hover { border-color: rgba(255, 255, 255, 0.25); color: #fff; }