/*
Theme Name: The MaStA Theme
Author: MaStA
Version: 1.0.0
*/

/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background: #f9f9f9;
}
h1, h2, h3 {
  margin-bottom: 0.5em;
}

body::before,
body::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  width: 300px;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: -1;
  pointer-events: none;
}

body::before {
  background-image: url('assets/images/shard-left.png');
  left: -50px;     /* sticks out of the viewport */
  top: 40%;         /* staggered vertically */
}

body::after {
  background-image: url('assets/images/shard-right.png');
  right: -50px;
  bottom: 15%;      /* staggered lower */
}

@media (max-width: 1150px) {
	body::before,
	body::after {
		content: none;
		display: none;
	}
}


/* Navigation */
/* Full-width, perfectly centered nav */
.topnav {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  background: rgba(0,0,0,0.75);
  backdrop-filter: saturate(140%) blur(6px);
  z-index: 1000;
}
.topnav .nav-wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center; /* vertically align logo + links */
  justify-content: space-between; /* logo on left, links on right */
}

.topnav .logo img {
  height: 36px;  /* matches nav height */
  width: auto;
  display: block;
  margin: 13px 0;
}


/* Keeps the nav content centered on any screen size */
.nav-wrap {
  max-width: 1000px;            /* adjust if you like */
  margin: 0 auto;               /* centers the inner content */
  padding: 0 24px;              /* even left/right inset */
  box-sizing: border-box;
}

.nav-list {
  list-style: none;
  display: flex;
  justify-content: center;      /* perfect centering */
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 12px 0;              /* moves spacing from nav to list so centering is exact */
}

.nav-list a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  line-height: 1;
}

.nav-list a:hover,
.nav-list a:focus-visible {
  color: #0ea5e9;
  text-decoration: underline;
  outline: none;
}

/* --- Mobile Nav --- */

/* Hamburger base */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 28px;
  height: 24px;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle .bar {
  height: 3px;
  width: 100%;
  background: #fff;
  border-radius: 3px;
  transition: 0.3s ease;
}

/* Default nav visible, hamburger hidden on desktop */
@media (max-width: 768px) {
  .nav-toggle {
    display: flex;
  }

  .nav-list {
    position: absolute;
    top: 62px; /* height of nav area */
    right: 0;
    background: rgba(0,0,0,0.95);
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 0;
    padding: 12px 24px;
    display: none; /* hidden by default */
  }

  .nav-list li {
    width: 100%;
  }

  .nav-list a {
    display: block;
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  /* Show menu when toggled */
  .topnav.open .nav-list {
    display: flex;
  }

  /* Animate hamburger to "X" when open */
  .topnav.open .nav-toggle .bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  .topnav.open .nav-toggle .bar:nth-child(2) {
    opacity: 0;
  }
  .topnav.open .nav-toggle .bar:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
  }
}


/* Accessible skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
}

/* Hero */
.hero {
  min-height: 100vh;
  background: url('assets/images/banner-car.jpg') right center/cover no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* text left aligned on large screens */
  padding: 0 5%;
  color: #fff;
  text-align: left;
}

.hero .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.7) 40%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0.1) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1000px;
  margin-left: auto;   /* pushes it away from the far edge */
  margin-right: auto;  /* keeps it balanced */
  padding-left: 5%;    /* optional extra breathing room */
  text-align: center;
}

.hero-content h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.hero-content p {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #0ea5e9;
  color: #fff;
  padding: 0.9rem 1.6rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1rem;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.cta-btn:hover {
  background: #0284c7;
  transform: translateY(-1px);
}

.cta-btn .icon {
  width: 24px;   /* slightly larger than text */
  height: auto;
  flex-shrink: 0;
  position: relative;
  margin-top: -2px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .hero {
    text-align: center;
    justify-content: center;
    padding: 0 20px;
    background-position: center;
  }
  .hero-content {
    padding-left: 0;
  }
  .hero-content h1 {
    font-size: 2rem;
  }
  .hero-content p {
    font-size: 1rem;
  }
}


/* Sections */
.section {
  padding: 60px 20px;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

/* Video */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Plans */
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.plan {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  transition: transform 0.2s;
}
.plan h3 {
	font-size: 1.8em;
}
.plan:hover {
  transform: translateY(-5px);
}
.plan ul {
  text-align: left;
  margin: 15px 0;
  padding-left: 20px;
}
.plan ul li {
  margin-bottom: 6px;
  font-size: 0.95rem;
}
.disclaimer {
  font-size: 0.9rem;
  margin-bottom: 20px;
  color: #555;
  text-align: left;
}
.plan .price {
  font-size: 1.5rem;
  margin: 10px 0;
}
.plan button {
  background: #0ea5e9;
  color: #fff;
  border: none;
  padding: 10px 15px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: transform 0.2s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.plan button:hover,
.plan button:focus-visible {
  background: #0284c7;
  transform: translateY(-2px);              /* small lift */
  box-shadow: 0 4px 12px rgba(14,165,233,0.35); /* glow */
}
/* Badges */
.badge {
  background: #0ea5e9; /* default blue */
  color: #fff;
  display: block;           /* forces a new line */
  width: fit-content;       /* only as wide as its text */
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: 4px;
  margin: 12px auto 6px;
}

.popular .badge,
.plan.enterprise .badge {
  background: #f97316; /* orange for Popular & Flexible */
}

/* Enterprise button override */
.popular {
  border: 2px solid #0ea5e9;
}
.plan.enterprise {
  background: #1e293b;
  color: #fff;
  border: 2px solid #0ea5e9;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;

}
.plan {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
}

.plan:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/* Enterprise keeps its dark style + unique hover */
.plan.enterprise {
  background: #1e293b;
  color: #fff;
  border: 3px solid #0ea5e9;
}

.plan.enterprise:hover {
  box-shadow: 0 0 15px rgba(14, 165, 233, 0.75); /* subtle blue glow */
}
.plan.enterprise button:hover,
.plan.enterprise button:focus-visible {
  background: #f97316;
}

.hidden { display: none; }

.plan-form {
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
  animation: fadeIn 0.6s ease;
}
.plan-form h3 {
	font-size: 2.5em;
	text-align: center;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.back-btn {
  background: #ddd;
}
.back-btn:hover {
  background: #bbb;
}

.description-links {
  color: #006e9f;
  text-decoration: none;
}

.description-links:hover {
  text-decoration: underline;
}


/* Contact Form */
/* Form Layout */
form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 600px;
  margin: 0 auto;
  padding: 25px 30px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Labels */
form label,
form legend {
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 6px;
  display: block;
}

/* Inputs, Textarea, Select */
form input,
form textarea,
form select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  line-height: 1.5;
  color: #111827;
  background: #f9fafb;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

form input:focus,
form textarea:focus,
form select:focus {
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14,165,233,0.2);
  outline: none;
  background: #fff;
}

/* Textarea larger by default */
form textarea {
  min-height: 140px;
  resize: vertical;
}

/* Number Input — remove spinners */
input[type="number"] {
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Select Dropdown */
form select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 6.646a.5.5 0 01.708 0L8 9.293l2.646-2.647a.5.5 0 01.708.708l-3 3a.5.5 0 01-.708 0l-3-3a.5.5 0 010-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  padding-right: 40px;
}

form fieldset {
  border: none;
  padding: 0;
  margin: 0 0 15px 0;
}

form .option {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

form .option input[type="radio"],
form .option input[type="checkbox"] {
  margin-right: 8px;
  width: auto;       /* prevents it from stretching full width */
  flex-shrink: 0;    /* keeps it tight even in flex container */
}

form .option label {
  font-weight: 500;  /* matches the rest of your form */
  margin: 0;
  cursor: pointer;
}


/* Buttons */
form button {
  background: #0ea5e9;
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  transition: background 0.2s ease, transform 0.15s ease;
}
form button:hover {
  background: #0284c7;
  transform: translateY(-2px);
}
form button.back-btn {
  background: #e5e7eb;
  color: #111827;
  font-weight: 600;
}
form button.back-btn:hover {
  background: #cbd5e1;
}



/* Footer */
footer {
  background: #111;
  color: #aaa;
  text-align: center;
  padding: 20px;
  margin-top: 40px;
}

footer a {
  color: #fff;
  text-decoration: none;
}

footer a:hover {
  color: #0ea5e9;
}

/* --- Course Details (additions) --- */
.lead {
  max-width: 900px;
  margin: 0 auto 28px;
  font-size: 1.05rem;
  color: #1f2937;
}

.summary {
  max-width: 900px;
  margin: 0 auto 18px;
  font-size: 1.05rem;
  color: #1f2937;
  text-align: left;
}

.summary-header {
  max-width: 900px;
  margin: 0 auto 8px;
  font-size: 1.5rem;
  font-weight:bold;
  color: #1f2937;
  text-align: left;
}

.list-header {
  max-width: 900px;
  margin: 18px auto 0;
  font-size: 1.05rem;
  font-weight:bold;
  color: #1f2937;
  text-align: left;
}

.bullets {
  max-width: 900px;
  margin: 0 auto 0px;
  padding-left: 8%;
  font-size: 1.05rem;
  color: #1f2937;
  text-align:left;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin: 24px 0 12px;
}

.detail-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 18px;
  text-align: left;
  transition: box-shadow 0.2s ease;
}
.detail-card:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}
.detail-image {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 12px;
}
.detail-title {
  font-size: 1.05rem;
  margin-bottom: 8px;
  color: #0f172a; /* slate-900 */
}

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 18px 0 6px;
  list-style: none;
  padding: 0;
}
.pill {
  background: #e0f2fe;           /* light brand blue */
  color: #0c4a6e;                /* deep teal/blue text for contrast */
  border: 1px solid #bae6fd;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.95rem;
  white-space: nowrap;
}

.toc-intro {
  max-width: 900px;
  margin: 28px auto 0;
  text-align: left;
}
.subtle {
  color: #475569; /* slate-600 */
  font-size: 0.95rem;
  margin-bottom: 10px;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .lead { font-size: 1rem; }
  .detail-title { font-size: 1rem; }
}

.lead {
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
}

/* --- Accordion (HTML-first) --- */
.accordion { max-width: 900px; margin: 12px auto 0; text-align: left; }
.accordion-item { border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; overflow: hidden; }
.accordion-item + .accordion-item { margin-top: 10px; }
.accordion-header { margin: 0; }

.accordion-button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; background: #f8fafc; color: #0f172a; font-weight: 700; font-size: 1rem;
  border: 0; cursor: pointer;
}
.accordion-button:hover,
.accordion-button:focus-visible {
  background: #eef6fb; outline: none; box-shadow: inset 0 0 0 2px rgba(14,165,233,0.25);
}
.accordion-button .chev { flex-shrink: 0; transition: transform 0.2s ease; }
.accordion-button[aria-expanded="true"] .chev { transform: rotate(180deg); }

.accordion-panel {
  background: #fff; padding: 0 16px; max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.25s ease, opacity 0.25s ease;
}
.accordion-panel.open { padding: 10px 16px 16px; opacity: 1; }
.accordion-list { margin: 0; padding-left: 18px; color: #111827; }
.accordion-list li { margin: 6px 0; line-height: 1.5; font-size: 0.98rem; }

@media (max-width: 640px) {
  .accordion-button { font-size: 0.98rem; padding: 12px 14px; }
  .accordion-panel { padding: 0 14px; }
  .accordion-panel.open { padding: 10px 14px 14px; }
}

/* TOC controls layout */
.toc-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 16px;
}

/* Button system aligned with your existing blue buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.98rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  text-decoration: none;
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(14,165,233,0.25);
}

/* Primary = your brand blue (matches .plan button) */
.btn-primary {
  background: #0ea5e9;
  color: #fff;
  border: 1px solid #0284c7;
}
.btn-primary:hover { background: #0284c7; transform: translateY(-1px); }

/* Outline variant to complement primary */
.btn-outline {
  background: transparent;
  color: #0ea5e9;
  border: 1px solid #94d3f7; /* soft blue border */
}
.btn-outline:hover {
  background: #e0f2fe;       /* very light blue tint */
  color: #0369a1;
  transform: translateY(-1px);
}

/* Hidden helper (used to hide/show the accordion wrapper) */
#course-toc.is-hidden { display: none; }
















/* --- Blender vs Competition (polished + mobile-friendly) --- */
.vs-section .subtle {
  color: #555;
  margin-bottom: 18px;
}

/* Optional: soft card container for the table */
.vs-table-wrap {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: linear-gradient(to bottom right, #ffffff, #f8fafc);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
  overflow: hidden; /* keeps rounded corners when the table overflows */
}

.vs-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  font-size: 0.98rem;
  color: #1e293b;
}

/* Head */
.vs-table thead th {
  background: linear-gradient(90deg, #0ea5e9, #0284c7);
  color: #fff;
  font-weight: 700;
  text-align: left;
  padding: 12px 14px;
  letter-spacing: 0.01em;
}

/* Fix Blender column header contrast */
.vs-table thead th:nth-child(2) {
  color: #0f172a;             /* dark slate for contrast */
  background: #f0f9ff;        /* match body tint */
  border-left: 2px solid #0ea5e9;
}

/* Optional: Competition column header with subtle gray tint for balance */
.vs-table thead th:nth-child(3) {
  background: #fafafa;
  color: #0f172a;
}


/* Body base cells */
.vs-table th,
.vs-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid #edf2f7;
  vertical-align: top;
}

/* Category column (row header) */
.vs-table th[scope="row"] {
  background: #f1f5f9;
  font-weight: 700;
  width: 22%;
  border-right: 1px solid #e5e7eb;
}

/* Desktop-only enhancements */
@media (min-width: 701px) {
  /* Subtle column separation */
  .vs-table td {
    border-right: 1px solid #e5e7eb;
  }
  .vs-table td:last-child { border-right: none; }

  /* Highlight Blender column (2nd column) */
  .vs-table td:nth-child(2),
  .vs-table th:nth-child(2) {
    background: #f0f9ff;                /* light blue tint */
  }
  .vs-table td:nth-child(2) {
    border-left: 2px solid #0ea5e9;      /* theme accent */
  }

  /* Row hover */
  .vs-table tbody tr:hover td {
    background: #f8fafc;
  }
}

.vs-table tbody tr:last-child th,
.vs-table tbody tr:last-child td {
  border-bottom: none;
}

.vs-note {
  font-size: 0.85rem;
  color: #6b7280;
  margin-top: 16px;
}

/* CTA row (uses your existing .btn styles) */
.vs-cta {
  margin-top: 22px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Visually hidden (for table caption) */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --- Responsive table: stacked cards on small screens --- */
@media (max-width: 700px) {
  .vs-table thead {
    /* Keep header available to screen readers but hide visually */
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
  }

  .vs-table,
  .vs-table tbody,
  .vs-table tr,
  .vs-table th[scope="row"],
  .vs-table td {
    display: block;
    width: 100%;
  }

  .vs-table tr {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px 12px 8px;
    margin-bottom: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
  }

  /* Row heading (Category) */
  .vs-table th[scope="row"] {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    padding: 0 0 8px 0;
    border: 0;               /* no right divider on mobile */
    background: transparent; /* blend into card */
  }

  .vs-table td {
    position: relative;
    padding: 8px 0 8px 110px; /* left space for the label */
    border: 0;
    border-top: 1px solid #f1f5f9;
    background: #fff;         /* ensure clean white on mobile */
  }

  /* The "Blender / Competition" labels */
  .vs-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: 8px;
    width: 100px;
    font-weight: 700;
    color: #0369a1;
  }

  /* Clean note spacing under stacked cards */
  .vs-note {
    margin-top: 6px;
  }
}


/* --- Proven Results (Testimonials) --- */
.reviews-section .subtle {
  color: #555;
  margin-bottom: 18px;
}

/* Featured enterprise reviews */
.enterprise-reviews {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 16px;
}
@media (max-width: 800px) {
  .enterprise-reviews {
    grid-template-columns: 1fr;
  }
}

.testimonial-card {
  text-align: left;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 18px 18px 14px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}
.testimonial-card.enterprise {
  border-left: 4px solid #0ea5e9; /* accent */
}

/* Quote styling */
.testimonial-quote {
  margin: 0 0 12px 0;
  padding: 10px 0;
  position: relative;
  color: #0f172a;
  line-height: 1.6;
}
.testimonial-quote p + p { margin-top: 10px; }

/* subtle decorative quote mark */
.testimonial-quote::before {
  content: "“";
  position: absolute;
  left: -6px;
  top: -10px;
  font-size: 2.2rem;
  color: rgba(14, 165, 233, 0.25);
  line-height: 1;
}

/* Meta (name, title, link) */
.testimonial-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.95rem;
  color: #475569; /* slate-600 */
}
.testimonial-meta .name {
  font-weight: 800;
  color: #0f172a;
}
.testimonial-meta .title,
.testimonial-meta .exp {
  font-weight: 600;
  color: #334155; /* slate-700 */
}
.testimonial-meta a {
  color: #0ea5e9;
  font-weight: 700;
  text-decoration: none;
}
.testimonial-meta a:hover { text-decoration: underline; }

/* Collapsible individual reviews */
.more-reviews {
  margin-top: 22px;
}

/* Style the <summary> like your outline button */
.more-reviews > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 2px solid #0ea5e9;
  color: #0ea5e9;
  background: transparent;
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 700;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.more-reviews[open] > summary {
  background: #0ea5e9;
  color: #fff;
}
.more-reviews > summary:hover {
  transform: translateY(-1px);
}

/* Remove default marker from summary */
.more-reviews > summary::-webkit-details-marker { display: none; }
.more-reviews > summary::after {
  content: "▼";
  font-size: 0.8rem;
  transition: transform 0.2s ease;
}
.more-reviews[open] > summary::after {
  transform: rotate(-180deg);
}

/* Grid of individual reviews */
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 900px) {
  .review-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .review-grid { grid-template-columns: 1fr; }
}

/* CTA row under reviews */
.reviews-cta {
  margin-top: 26px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}












/* =========================
   Enterprise Typography (colorless)
   Append to end of stylesheet
   ========================= */

/* Responsive scale */
:root {
  --leading-tight: 1.15;
  --leading-normal: 1.6;
  --leading-loose: 1.75;

  --step--1: clamp(0.86rem, 0.80rem + 0.2vw, 0.95rem);  /* small */
  --step-0:  clamp(1.00rem, 0.90rem + 0.5vw, 1.10rem);  /* base */
  --step-1:  clamp(1.25rem, 1.05rem + 0.8vw, 1.45rem);  /* h6/lede */
  --step-2:  clamp(1.50rem, 1.20rem + 1.2vw, 1.85rem);  /* h5 */
  --step-3:  clamp(1.85rem, 1.40rem + 1.6vw, 2.35rem);  /* h4 */
  --step-4:  clamp(2.25rem, 1.60rem + 2.2vw, 3.00rem);  /* h3 */
  --step-5:  clamp(2.75rem, 1.80rem + 3.0vw, 3.75rem);  /* h2 */
  --step-6:  clamp(3.25rem, 2.00rem + 3.8vw, 4.50rem);  /* h1 */
}

/* Optional: opt-in font without touching your current body rule */
body {
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}

/* Copy */
p { margin: 0 0 1rem; font-size: var(--step-0); line-height: var(--leading-normal); }
p + p { margin-top: 0.5rem; }

/* Headings: sizing/spacing only (no color) */
h1, h2, h3, h4, h5, h6 {
  line-height: var(--leading-tight);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
}
h1 { font-size: var(--step-6); }
h2 { font-size: var(--step-5); }
h3 { font-size: var(--step-4); }
h4 { font-size: var(--step-3); font-weight: 700; }
h5 { font-size: var(--step-2); font-weight: 700; }
h6 { font-size: var(--step-1); font-weight: 700; }

/* Subhead / kicker (no color) */
.subtitle, .eyebrow {
  display: block;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

/* Links: underline tuning only (no color) */
a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover, a:focus-visible {
  text-decoration-thickness: 2px;
  outline: none;
}

/* Lists */
ul, ol { margin: 0 0 1rem 1.25rem; }
li { margin: 0.35rem 0; }

/* Small / lede */
.small, small { font-size: var(--step--1); }
.lede, .lead-text { font-size: var(--step-1); line-height: var(--leading-loose); }

/* Blockquote: uses current text color */
cite { display: block; margin-top: 0.5rem; font-style: normal; }

/* Code (no background/border colors) */
code, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95em;
}
pre code {
  display: block;
  padding: 0.85rem 1rem;
  overflow-x: auto;
}

/* Horizontal rule (no color set) */
hr { border: 0; border-top: 1px solid currentColor; opacity: 0.2; margin: 1.25rem 0; }

/* Readable measure helpers (opt-in) */
.prose      { max-width: 72ch; margin-left: auto; margin-right: auto; }
.prose-wide { max-width: 88ch; }

/* Tiny mobile letter-spacing tweak */
@media (max-width: 480px) {
  h1 { letter-spacing: -0.015em; }
}


.plan h3 .badge {
	font-size: .45em;
}

/* CF7 Fixes */
#plan-submit-btn, .back-btn, .contact-section button[type=submit] {
	width: 100%;
}
#plan-submit-btn {
	margin-bottom: 20px;
}
.wpcf7-list-item.first {
	margin-left: 0;
}

/* =========================
   CF7 Messages & Field Errors
   (append-only)
   ========================= */

/* Base response box */
.wpcf7 form .wpcf7-response-output {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
  font-weight: 600;
  line-height: 1.5;
}

/* Success */
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form .wpcf7-response-output[data-status="mail_sent"] {
  background: #f0fdf4;              /* soft green tint */
  border-color: #86efac;            /* green-300 */
}

/* Validation error (form-level) */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form .wpcf7-response-output[data-status="validation_failed"] {
  background: #fff7ed;              /* soft orange tint */
  border-color: #fdba74;            /* orange-300 */
}

/* Mail/Server fail */
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form .wpcf7-response-output[data-status="mail_failed"],
.wpcf7 form .wpcf7-response-output[data-status="aborted"] {
  background: #fef2f2;              /* soft red tint */
  border-color: #fca5a5;            /* red-300 */
}

/* Spam / Unaccepted / Payment required (edge cases) */
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form .wpcf7-response-output[data-status="spam"] {
  background: #f5f3ff;              /* soft indigo tint */
  border-color: #c7d2fe;
}
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form .wpcf7-response-output[data-status="acceptance_missing"] {
  background: #fffbeb;              /* soft amber tint */
  border-color: #fcd34d;
}
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form .wpcf7-response-output[data-status="payment_required"] {
  background: #fef3c7;              /* pale amber */
  border-color: #fbbf24;
}

/* Inline tip under invalid fields */
.wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: 0.9rem;
  font-weight: 600;
}

/* Highlight invalid inputs to match your focus style */
.wpcf7 form .wpcf7-not-valid,
.wpcf7 form .wpcf7-not-valid:focus {
  border-color: #ef4444 !important;                    /* red-500 */
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18) !important;
  outline: none;
}

/* Keep your brand focus on no*

/* Only on page ID 3 */
.internal .hero {
  min-height: auto;
  background: none;
  padding: 0;
}
.internal .hero .overlay { display: none; }

/* If your nav is fixed and overlaps content, add top padding to main */
.internal main { padding-top: 72px; } /* match your nav height */

.internal-section {
	text-align: left;
}