/* ModernPrepper — shared stylesheet */

body {
  margin: 0;
  background: #0d0e0f;
  font-family: 'Barlow', sans-serif;
  color: #e8e6e2;
}

* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

/* Top Bar */
.mp-topbar {
  background: #111315;
  border-bottom: 1px solid #212427;
}

.mp-topbar-content {
  height: 34px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .08em;
  color: #7d7a74;
  text-transform: uppercase;
}

/* Nav */
.mp-navbar {
  background: #0d0e0f;
  border-bottom: 1px solid #212427;
  position: sticky;
  top: 0;
  z-index: 50;
}

.mp-navbar-toggler {
  border-color: #3a3e42;
}

.mp-nav-link {
  color: #c8c5bf !important;
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  letter-spacing: .04em;
  font-size: 14px;
  text-transform: uppercase;
  padding: .5rem .9rem !important;
  transition: color .15s;
}
.mp-nav-link:hover {
  color: #e0701f !important;
}

/* Brand / Logo */
.mp-brand-link {
  gap: 11px;
}

.mp-logo-box {
  width: 36px;
  height: 36px;
  border: 1.5px solid #e0701f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 13px;
  color: #e0701f;
}

.mp-brand-text {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  letter-spacing: .14em;
  font-size: 19px;
  color: #e8e6e2;
  text-transform: uppercase;
  line-height: 1;
}

.mp-brand-tm {
  color: #e0701f;
  font-size: 10px;
  vertical-align: super;
  margin-left: 2px;
}

/* Buttons */
.mp-btn-accent {
  background: #e0701f;
  color: #0d0e0f;
  border: none;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background .15s;
}
.mp-btn-accent:hover {
  background: #f0863a;
  color: #0d0e0f;
}

.mp-btn-ghost {
  background: transparent;
  color: #e8e6e2;
  border: 1px solid #3a3e42;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: border-color .15s, color .15s;
}
.mp-btn-ghost:hover {
  border-color: #e0701f;
  color: #e0701f;
}

.mp-btn-sm {
  font-size: 13px;
}

/* Hero Sections */
.mp-hero {
  position: relative;
  border-bottom: 1px solid #212427;
  overflow: hidden;
}

.mp-hero-pattern {
  position: absolute;
  inset: 0;
  /*background-image: repeating-linear-gradient(45deg, #141618 0 14px, #111315 14px 28px);*/
  opacity: .6;
}

.mp-hero-gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 78% 15%, rgba(224, 112, 31, .10), transparent 55%);
}

.mp-hero-gradient-alt {
  position: absolute;
  inset: 0;
  background: radial-gradient(110% 90% at 80% 10%, rgba(224, 112, 31, .10), transparent 55%);
}

.mp-hero-gradient-cta {
  position: absolute;
  inset: 0;
  background: radial-gradient(100% 120% at 20% 0%, rgba(224, 112, 31, .12), transparent 60%);
}

.mp-hero-content {
  position: relative;
  padding: 88px 12px 96px;
}

.mp-hero-content-sm {
  position: relative;
  padding: 72px 12px 80px;
}

/* Typography */
.mp-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: .22em;
  color: #e0701f;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.mp-eyebrow-sm {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: .22em;
  color: #e0701f;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.mp-eyebrow-xs {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: .2em;
  color: #e0701f;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.mp-h1 {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(42px, 6vw, 72px);
  line-height: .98;
  letter-spacing: .005em;
  text-transform: uppercase;
  margin: 0 0 22px;
}

.mp-h1-alt {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(38px, 6vw, 64px);
  line-height: 1;
  text-transform: uppercase;
  margin: 0 0 20px;
}

.mp-h1-shop {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(38px, 6vw, 60px);
  line-height: 1;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.mp-h1-accent {
  color: #e0701f;
}

.mp-h2 {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: clamp(30px, 4vw, 44px);
  text-transform: uppercase;
  letter-spacing: .01em;
  margin: 0;
}

.mp-h2-lg {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 5vw, 56px);
  text-transform: uppercase;
  margin: 0 0 18px;
  letter-spacing: .01em;
}

.mp-h2-md {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 5vw, 48px);
  text-transform: uppercase;
  margin: 0 0 16px;
}

.mp-h2-alt {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 4vw, 40px);
  text-transform: uppercase;
  margin: 0 0 40px;
}

.mp-h2-about {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: clamp(26px, 3.5vw, 36px);
  text-transform: uppercase;
  margin: 0 0 18px;
}

.mp-h2-principles {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: clamp(26px, 3.5vw, 38px);
  text-transform: uppercase;
  margin: 0 0 40px;
}

.mp-h3-card {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 24px;
  text-transform: uppercase;
  margin: 0 0 10px;
  color: #e8e6e2;
}

.mp-h4-product {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 17px;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.mp-lead {
  font-size: 18px;
  line-height: 1.6;
  color: #b6b3ad;
  max-width: 520px;
  margin: 0 0 32px;
}

.mp-lead-lg {
  font-size: 18px;
  line-height: 1.6;
  color: #b6b3ad;
  max-width: 560px;
  margin: 0 0 30px;
}

.mp-lead-md {
  font-size: 18px;
  line-height: 1.6;
  color: #b6b3ad;
  max-width: 640px;
  margin: 0;
}

.mp-lead-cta {
  color: #b6b3ad;
  font-size: 18px;
  max-width: 560px;
  margin: 0 auto 32px;
}

.mp-lead-center {
  color: #b6b3ad;
  font-size: 17px;
  max-width: 520px;
  margin: 0 auto 30px;
}

.mp-text-secondary {
  color: #97948e;
  max-width: 340px;
  margin: 0;
  font-size: 15px;
}

.mp-card-text {
  color: #97948e;
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 16px;
}

.mp-card-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  color: #e0701f;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* Sections */
.mp-section {
  padding: 80px 12px;
}

.mp-section-md {
  padding: 64px 12px;
}

.mp-section-alt {
  background: #111315;
  border-top: 1px solid #212427;
  border-bottom: 1px solid #212427;
}

.mp-section-border {
  border-bottom: 1px solid #212427;
}

.mp-section-shop-header {
  padding: 60px 12px 40px;
}

.mp-section-shop-content {
  padding: 36px 12px 80px;
}

.mp-section-header {
  gap: 16px;
  margin-bottom: 44px;
}

/* Cards */
.mp-card {
  transition: transform .18s, border-color .18s;
}
.mp-card:hover {
  transform: translateY(-4px);
  border-color: #e0701f !important;
}

.mp-card-bg {
  background: #141618;
  border: 1px solid #2b2f33;
  padding: 28px;
}

.mp-card-bg-sm {
  background: #141618;
  border: 1px solid #2b2f33;
  padding: 24px;
}

.mp-card-bg-md {
  background: #141618;
  border: 1px solid #2b2f33;
  padding: 30px;
}

.mp-card-product {
  background: #141618;
  border: 1px solid #2b2f33;
}

.mp-card-inner {
  padding: 22px;
}

.mp-card-inner-sm {
  padding: 18px;
}

/* Placeholder images */
.mp-placeholder {
  aspect-ratio: 4/3;
  background-image: repeating-linear-gradient(45deg, #1d2023 0 14px, #191b1d 14px 28px);
  border: 1px solid #2b2f33;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6f6c67;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.mp-placeholder-card {
  aspect-ratio: 16/10;
  background-image: repeating-linear-gradient(45deg, #1d2023 0 12px, #191b1d 12px 24px);
  border: 1px solid #2b2f33;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6f6c67;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.mp-placeholder-product {
  aspect-ratio: 1;
  background-image: repeating-linear-gradient(45deg, #1d2023 0 12px, #191b1d 12px 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6f6c67;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.mp-placeholder-phone {
  aspect-ratio: 9/16;
  max-width: 280px;
  margin: 0 auto;
  /*background-image: repeating-linear-gradient(45deg, #1d2023 0 14px, #191b1d 14px 28px);*/
  border: 1px solid #2b2f33;
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6f6c67;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  padding: 20px;
}

.mp-placeholder-course {
  aspect-ratio: 16/9;
  background-image: repeating-linear-gradient(45deg, #1d2023 0 12px, #191b1d 12px 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6f6c67;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.mp-placeholder-guide {
  aspect-ratio: 3/4;
  background-image: repeating-linear-gradient(45deg, #1d2023 0 12px, #191b1d 12px 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6f6c67;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Stats */
.mp-stats {
  gap: 26px;
  margin-top: 40px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #7d7a74;
  letter-spacing: .04em;
}

.mp-stat-value {
  color: #e8e6e2;
  font-weight: 700;
}

.mp-feature-stat {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #e0701f;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.mp-feature-stat-lg {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 40px;
  color: #e0701f;
  line-height: 1;
  margin-bottom: 10px;
}

.mp-feature-stat-principle {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: #e0701f;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.mp-feature-text {
  color: #97948e;
  font-size: 14px;
  margin: 0;
}

/* Footer */
.mp-footer {
  background: #0a0b0c;
  border-top: 1px solid #212427;
}

.mp-footer-content {
  padding: 56px 12px 28px;
}

.mp-footer-logo-wrap {
  gap: 11px;
  margin-bottom: 16px;
}

.mp-footer-logo {
  width: 34px;
  height: 34px;
  border: 1.5px solid #e0701f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 12px;
  color: #e0701f;
}

.mp-footer-brand {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  letter-spacing: .14em;
  font-size: 17px;
  text-transform: uppercase;
}

.mp-footer-brand-tm {
  color: #e0701f;
  font-size: 9px;
  vertical-align: super;
  margin-left: 2px;
}

.mp-footer-text {
  color: #7d7a74;
  font-size: 14px;
  max-width: 300px;
  margin: 0;
}

.mp-footer-heading {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  color: #e0701f;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.mp-footer-links {
  gap: 9px;
}

.mp-footer-link {
  color: #b6b3ad;
  font-size: 14px;
}

.mp-footer-legal {
  color: #7d7a74;
  font-size: 12.5px;
  line-height: 1.6;
  margin: 0;
}

.mp-footer-bottom {
  gap: 12px;
  border-top: 1px solid #1a1d1f;
  margin-top: 40px;
  padding-top: 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #5f5c57;
  letter-spacing: .06em;
}

/* CTA Links */
.mp-cta-link {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #e0701f;
  font-size: 14px;
}

/* Forms */
.mp-form-container {
  background: #141618;
  border: 1px solid #2b2f33;
  padding: 28px;
}

.mp-form-group {
  gap: 16px;
}

.mp-form-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #7d7a74;
  text-transform: uppercase;
  letter-spacing: .1em;
  display: block;
  margin-bottom: 6px;
}

.mp-form-input {
  width: 100%;
  background: #0d0e0f;
  border: 1px solid #2b2f33;
  color: #e8e6e2;
  padding: 11px 14px;
  font-family: 'Barlow', sans-serif;
  font-size: 15px;
}

.mp-form-textarea {
  width: 100%;
  background: #0d0e0f;
  border: 1px solid #2b2f33;
  color: #e8e6e2;
  padding: 11px 14px;
  font-family: 'Barlow', sans-serif;
  font-size: 15px;
  resize: vertical;
}

.mp-contact-info {
  gap: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: #c8c5bf;
  letter-spacing: .04em;
}

.mp-contact-label {
  color: #7d7a74;
}

/* Feature cards */
.mp-feature-number {
  width: 44px;
  height: 44px;
  border: 1px solid #e0701f;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e0701f;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  margin-bottom: 18px;
}

.mp-feature-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 19px;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.mp-feature-desc {
  color: #97948e;
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

.mp-service-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #e0701f;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 14px;
}

.mp-service-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 23px;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.mp-service-desc {
  color: #97948e;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 18px;
}

/* Workshop list items */
.mp-workshop-item {
  gap: 14px;
}

.mp-workshop-number {
  color: #e0701f;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
}

.mp-workshop-text {
  color: #c8c5bf;
}

.mp-workshop-list {
  gap: 14px;
  margin-bottom: 28px;
}

/* Shop filter chips */
.mp-filter {
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 16px;
  border: 1px solid #3a3e42;
  color: #c8c5bf;
  background: transparent;
}

.mp-filter[data-cat="all"] {
  border-color: #e0701f;
  color: #0d0e0f;
  background: #e0701f;
}

.mp-filter-bar {
  gap: 10px;
  margin-bottom: 36px;
}

.mp-product-category {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #e0701f;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 8px;
}

.mp-product-status {
  color: #7d7a74;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0;
}

.mp-course-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #7d7a74;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 10px;
}

.mp-course-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 21px;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.mp-course-desc {
  color: #97948e;
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 16px;
}

.mp-guide-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #7d7a74;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 10px;
}

.mp-guide-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 20px;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.mp-guide-desc {
  color: #97948e;
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 16px;
}

/* About page specific */
.mp-about-text {
  color: #b6b3ad;
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 16px;
}

.mp-about-text-last {
  color: #b6b3ad;
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
}

.mp-contact-text {
  color: #b6b3ad;
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 24px;
  max-width: 420px;
}

.mp-apps-lead {
  font-size: 18px;
  line-height: 1.6;
  color: #b6b3ad;
  max-width: 560px;
  margin: 0 0 30px;
}

.mp-security-lead {
  font-size: 18px;
  line-height: 1.6;
  color: #b6b3ad;
  max-width: 620px;
  margin: 0 0 30px;
}

.mp-training-lead {
  font-size: 18px;
  line-height: 1.6;
  color: #b6b3ad;
  max-width: 600px;
  margin: 0 0 30px;
}

.mp-shop-lead {
  font-size: 17px;
  color: #b6b3ad;
  max-width: 560px;
  margin: 0;
}

.mp-consult-text {
  color: #b6b3ad;
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 24px;
}

.mp-max-w-820 {
  max-width: 820px;
}

.mp-max-w-800 {
  max-width: 800px;
}

.mp-max-w-760 {
  max-width: 760px;
}

/* Button size variations */
.mp-btn-size-12 {
  font-size: 12px;
}

.mp-btn-size-13 {
  font-size: 13px;
}

/* Gap utilities */
.mp-gap-14 {
  gap: 14px;
}