:root {
  --ma-blue: #084E85;
  --ma-blue-dark: #063B66;
  --ma-silver: #88888B;
  --ma-light-silver: #C6C7C7;

  --bg-light: #F5F7FA;
  --text-dark: #1A1A1A;

  --radius: 12px;
  --transition: 0.2s ease;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg-light);
  color: var(--text-dark);
  line-height: 1.6;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: auto;
}

.narrow {
  max-width: 800px;
  margin: auto;
}

.navbar {
  background: white;
  border-bottom: 1px solid var(--ma-light-silver);
  padding: 1rem 0;
}

.nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar a {
  margin-left: 1.5rem;
  text-decoration: none;
  color: var(--ma-blue);
  font-weight: 600;
}

.hero {
  background: var(--ma-blue);
  color: white;
  padding: 6rem 0;
  text-align: center;
}

.hero-sub {
  margin: 1.5rem 0;
  font-size: 1.1rem;
}

/* Hero buttons */
.hero-buttons {
  display: flex;
  flex-wrap: wrap;       /* allows buttons to move to next line if needed */
  gap: 1rem;             /* space between buttons */
  margin-top: 1.5rem;
}

.hero-buttons a {
  flex: 1 1 auto;        /* buttons grow/shrink equally */
  min-width: 220px;      /* ensures buttons don’t shrink too much */
  padding: 0.75rem 1.5rem;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.btn-primary {
  background: white;
  color: var(--ma-blue);
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  margin-right: 1rem;
  transition: var(--transition);
}

.btn-primary:hover {
  background: var(--ma-light-silver);
}

.btn-secondary {
  border: 1px solid white;
  color: white;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  transition: var(--transition);
}

.btn-secondary:hover {
  background: rgba(255,255,255,0.1);
}

.metrics {
  background: white;
  padding: 2rem 0;
  border-bottom: 1px solid var(--ma-light-silver);
}

.metrics-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-weight: 600;
  color: var(--ma-blue);
}

.section {
  padding: 5rem 0;
}

.section.alt {
  background: white;
}

.three-col {
  display: flex;
  gap: 3rem;
  margin-top: 2rem;
}

.cap-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  margin-top: 2rem;
}

.process {
  margin-top: 2rem;
  padding-left: 1.2rem;
}

.cta {
  background: var(--ma-blue);
  color: white;
  text-align: center;
  padding: 4rem 0;
}



/* CTA button using your existing primary styles */
.cta .btn-primary {
  display: inline-block;            /* ensures proper spacing below heading */
  margin-right: 0;                  /* remove extra right margin for single button */
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  color: var(--ma-blue);
  background: white;
  transition: var(--transition);
}

.cta .btn-primary:hover {
  background: var(--ma-light-silver);
}

/* Responsive: button fills width on very small screens */
@media (max-width: 500px) {
  .cta .btn-primary {
    width: 100%;
    max-width: 300px;    /* optional limit for readability */
  }
}

.amateur {
  text-align: center;
  padding: 3rem 0;
  background: #E9EDF2;
}

.amateur p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;   /* space between text and button */
}

/* Button styling */
.amateur .btn-secondary {
  display: inline-block;    /* ensures proper block spacing */
  margin: 0;                /* remove any side margins */
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  color: white;
  border: 1px solid white;
  transition: var(--transition);
}

.amateur .btn-secondary:hover {
  background: rgba(255,255,255,0.1);
}

/* Optional modifier for dark version if you have a 'dark' class */
.amateur .btn-secondary.dark {
  color: #0A1E2E;           /* example: highlight for dark background */
  border-color: #0A1E2E;
}

.amateur .btn-secondary.dark:hover {
  background: rgba(10,30,46,0.2);
}

/* Responsive: button fills width on small screens */
@media (max-width: 500px) {
  .amateur .btn-secondary {
    width: 100%;
    max-width: 300px;       /* optional readable width limit */
  }
}

footer {
  background: #0A1E2E;
  color: white;
  padding: 3rem 0;
}

.footer-grid {
  display: flex;
  justify-content: space-between;
}

.logo img {
  display: block;
  height: auto; /* let aspect ratio be maintained */
  max-height: clamp(80px, 20vw, 180px); /* min 80px, preferred 20% of viewport width, max 200px */
  width: auto; /* width adjusts automatically */
}

/* =========================================
   RESPONSIVE IMAGE + TEXT SPLIT LAYOUT (NO STACK)
========================================= */

/* Container for split layout */
.split {
  display: flex;
  align-items: flex-start; /* top-align text and image */
  gap: 2rem; /* gap between text and image */
}

/* Reverse layout (image on left) */
.split.reverse {
  flex-direction: row-reverse;
}

/* Text column */
.split .text {
  flex: 1 1 200px; /* flexible width, shrinks down to 200px */
  min-width: 150px; /* optional: prevent collapsing too much */
}

/* Image container */
.split .image {
  flex: 0 1 auto; /* allows image to shrink */
  max-width: clamp(100px, 30vw, 420px); /* scales with viewport */
}

/* Images themselves */
.split .image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--ma-light-silver);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  object-fit: cover; /* maintains aspect ratio */
}

/* Smaller contextual images */
.split .image.small-image {
  max-width: clamp(80px, 25vw, 340px);
}

/* Optional: smaller gap for very small screens */
@media (max-width: 500px) {
  .split {
    gap: 1rem;
  }
}

/* =========================================
   IMAGES WITH MULTICOLUMN TEXT
========================================= */
.split-with-images {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  justify-content: center;
  flex-wrap: nowrap;           /* prevent stacking for now */
}

/* Side images */
.side-image {
  flex: 0 0 auto;              /* fixed size, does not grow */
  width: clamp(50px, 20vw, 150px); /* scales slightly but never too big */
}

.side-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  object-fit: cover;
}

/* Three-column content */
.three-col {
  display: flex;
  flex: 1 1 0;                 /* flexible, takes remaining space */
  gap: 2rem;
}

.three-col > div {
  flex: 1 1 200px;             /* each column has minimum width */
  min-width: 180px;             /* ensures columns remain readable */
}

/* Responsive: stack vertically on very small screens */
@media (max-width: 900px) {
  .split-with-images {
    flex-direction: column;
    align-items: center;
  }

  .side-image {
    width: 80%;                 /* images shrink and center */
    margin-bottom: 1.5rem;
  }

  .three-col {
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
  }

  .three-col > div {
    flex: 1 1 100%;
    min-width: auto;
  }
}


/* =========================================
   CAPABILITY TABLES
========================================= */

.cap-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2rem;
}

.cap-table th {
  text-align: left;
  background: var(--ma-blue);
  color: white;
  padding: 0.75rem;
  font-weight: 600;
}

.cap-table td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--ma-light-silver);
  vertical-align: top;
}

.cap-table tr:nth-child(even) {
  background: #f9fbfd;
}

@media (max-width: 768px) {
  .cap-table th,
  .cap-table td {
    font-size: 0.9rem;
  }
}


/* =========================================
   REPORT SECTION LIST
========================================= */

.report-section {
  text-align: center;
}

.report-section p {
  margin-bottom: 1.25rem;
}

.centered-list {
  list-style-position: inside;
  display: inline-block;
  text-align: left;
  margin: 1rem auto 2rem auto;
  padding: 0;
}

.centered-list li {
  margin-bottom: 0.6rem;
}

p {
  margin-bottom: 1em ;
} 

/* =========================================
   HAM PORTAL STYLING
========================================= */

.ham-body {
  background: #0A1E2E;
  color: white;
}

.ham-navbar {
  background: #0A1E2E;
  border-bottom: 1px solid #1c3a52;
}

.ham-navbar a {
  color: var(--ma-light-silver);
}

.ham-hero {
  background: linear-gradient(180deg, #084E85 0%, #063B66 100%);
  padding: 6rem 0;
  text-align: center;
}

.ham-subline {
  margin-top: 2rem;
  font-size: 0.85rem;
  opacity: 0.8;
}

.ham-footer {
  background: #06141f;
  padding: 3rem 0;
  color: var(--ma-light-silver);
}

/* =========================================
   HAM DARK THEME — IMPROVED CONTRAST
========================================= */

.ham-body {
  background: #081823;   /* slightly deeper navy */
  color: var(--ma-light-silver);
}

.ham-body .section {
  background: #081823;   /* base dark */
}

.ham-body .section.alt {
  background: #0E2A3D;   /* clearly lighter but still dark */
}

.ham-body h1,
.ham-body h2,
.ham-body h3 {
  color: white;
}

.ham-body p {
  color: var(--ma-light-silver);
}

.ham-body .three-col div {
  background: #102f45;
  padding: 1.5rem;
  border-radius: var(--radius);
  border: 1px solid #1c3a52;
}

/* =========================================
   HAM CERTIFICATION TABLE STYLING
========================================= */

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* Forces equal column widths */
  margin-top: 2rem;
}

.pricing-table th,
.pricing-table td {
  padding: 0.9rem;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

.pricing-table th {
  font-weight: 600;
  text-align: center;
}

.pricing-table td {
  text-align: center;
}

/* Left align first column (Tier column) */
.pricing-table td:first-child,
.pricing-table th:first-child {
  text-align: left;
  width: 20%;
}

/* Make remaining columns evenly spaced */
.pricing-table th:not(:first-child),
.pricing-table td:not(:first-child) {
  width: 26%;
}

/* Prevent ugly wrapping */
.pricing-table td {
  word-wrap: break-word;
}