/* ==========================================================================
   Engagements page (/engagements/), three-tier model with featured monthly.
   Scoped under .eng-page. Matches site design system (dark, lavender accent,
   sage secondary). No !important.
   ========================================================================== */

.eng-page {
  --eng-bg: #07070b;
  --eng-card: rgba(255, 255, 255, 0.035);
  --eng-card-hover: rgba(255, 255, 255, 0.06);
  --eng-border: rgba(255, 255, 255, 0.08);
  --eng-border-hover: rgba(196, 181, 253, 0.45);
  --eng-text: #f5f5f7;
  --eng-text-muted: #a8a8b3;
  --eng-accent: #c4b5fd;
  --eng-accent-strong: #a78bfa;
  --eng-success: #7AB55C;
}

/* ----- HERO ----- */
.eng-page .eng-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #050508 0%, #0a0a12 100%);
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(1.25rem, 2.5vw, 2rem);
  isolation: isolate;
}
.eng-page .eng-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 50% 35% at 22% 28%, rgba(196, 181, 253, 0.18), transparent 70%),
    radial-gradient(ellipse 60% 40% at 78% 72%, rgba(122, 181, 92, 0.10), transparent 70%);
}
.eng-page .eng-hero > .container { position: relative; z-index: 1; }
.eng-page .eng-hero-inner { text-align: center; }

.eng-page .page-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.95rem;
  background: rgba(196, 181, 253, 0.08);
  border: 1px solid rgba(196, 181, 253, 0.25);
  color: var(--eng-accent);
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.eng-page .eng-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--eng-text);
  margin: 0 auto 1rem;
  max-width: 22ch;
}
.eng-page .eng-hero-accent {
  display: inline;
  background: linear-gradient(135deg, #c4b5fd 0%, #7AB55C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.eng-page .page-hero-desc {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.65;
  color: var(--eng-text-muted);
  max-width: 60ch;
  margin: 0 auto;
}

/* ----- THREE-TIER GRID ----- */
.eng-page .eng-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}
.eng-page .eng-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.75rem 1.5rem 1.5rem;
  background: var(--eng-card);
  border: 1px solid var(--eng-border);
  border-radius: 18px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s ease,
              background 0.25s ease,
              box-shadow 0.25s ease;
}
.eng-page .eng-tier:hover {
  background: var(--eng-card-hover);
  border-color: var(--eng-border-hover);
  transform: translateY(-3px);
  box-shadow: 0 14px 40px -16px rgba(196, 181, 253, 0.25);
}

/* Featured tier (monthly) keeps the user's eye on the recommendation. */
.eng-page .eng-tier--featured {
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%, rgba(196, 181, 253, 0.12), transparent 70%),
    var(--eng-card);
  border-color: rgba(196, 181, 253, 0.35);
  box-shadow: 0 20px 60px -28px rgba(196, 181, 253, 0.4);
}
.eng-page .eng-tier--featured:hover {
  border-color: rgba(196, 181, 253, 0.55);
  box-shadow: 0 28px 80px -24px rgba(196, 181, 253, 0.5);
}
.eng-page .eng-tier-badge {
  position: absolute;
  top: -0.7rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.35rem 0.85rem;
  background: linear-gradient(135deg, #c4b5fd 0%, #a78bfa 100%);
  color: #0a0a0f;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(196, 181, 253, 0.35);
}

/* Tier head */
.eng-page .eng-tier-head { display: flex; flex-direction: column; gap: 0.4rem; }
.eng-page .eng-tier-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--eng-accent);
}
.eng-page .eng-tier h2 {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--eng-text);
  margin: 0;
}
.eng-page .eng-tier-tagline {
  font-size: 0.92rem;
  color: var(--eng-text-muted);
  line-height: 1.5;
  margin: 0;
}

/* Price block */
.eng-page .eng-tier-price {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1rem 1.1rem;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--eng-border);
  border-radius: 12px;
}
.eng-page .eng-tier--featured .eng-tier-price {
  background: rgba(196, 181, 253, 0.06);
  border-color: rgba(196, 181, 253, 0.25);
}
.eng-page .eng-tier-price-from {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--eng-text-muted);
}
.eng-page .eng-tier-price-num {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--eng-text);
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #ffffff 0%, #c4b5fd 70%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.eng-page .eng-tier-price-meta {
  font-size: 0.82rem;
  color: var(--eng-text-muted);
  font-feature-settings: "tnum" 1;
}
.eng-page .eng-tier-price-vs {
  font-size: 0.78rem;
  color: var(--eng-success);
  font-weight: 700;
  margin-top: 0.25rem;
}

/* Best for blurb */
.eng-page .eng-tier-best-for {
  font-size: 0.9rem;
  color: var(--eng-text-muted);
  line-height: 1.6;
  margin: 0;
}
.eng-page .eng-tier-best-for strong { color: var(--eng-text); }

/* Deliverables list */
.eng-page .eng-tier-deliverables {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
}
.eng-page .eng-tier-deliverables li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--eng-text-muted);
}
.eng-page .eng-tier-deliverables li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--eng-accent);
  border-bottom: 2px solid var(--eng-accent);
  transform: rotate(-45deg);
  opacity: 0.85;
}
.eng-page .eng-tier-deliverables--strong li {
  color: var(--eng-text);
}
.eng-page .eng-tier-deliverables--strong li strong {
  color: var(--eng-text);
  font-weight: 700;
}

/* Meta footer (billing, timeline, capacity) */
.eng-page .eng-tier-meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--eng-border);
}
.eng-page .eng-tier-meta-item {
  font-size: 0.78rem;
  color: var(--eng-text-muted);
  line-height: 1.5;
}
.eng-page .eng-tier-meta-item strong {
  color: var(--eng-text);
  font-weight: 600;
}

/* Tier CTAs */
.eng-page .eng-tier-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.25rem;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.eng-page .eng-tier-cta--ghost {
  background: rgba(196, 181, 253, 0.06);
  border: 1px solid rgba(196, 181, 253, 0.3);
  color: var(--eng-accent);
}
.eng-page .eng-tier-cta--ghost:hover {
  background: rgba(196, 181, 253, 0.14);
  border-color: rgba(196, 181, 253, 0.5);
  transform: translateY(-2px);
}
.eng-page .eng-tier-cta--primary {
  background: var(--eng-accent);
  color: #0a0a0f;
  border: 1px solid transparent;
  box-shadow: 0 4px 14px rgba(196, 181, 253, 0.3);
}
.eng-page .eng-tier-cta--primary:hover {
  background: var(--eng-accent-strong);
  transform: translateY(-2px);
  box-shadow: 0 14px 40px -12px rgba(196, 181, 253, 0.55);
}

/* ----- COMPARE TABLE ----- */
.eng-page .eng-compare-head { text-align: left; max-width: 64ch; margin-bottom: 1.5rem; }
.eng-page .eng-compare-head h2 {
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--eng-text);
  margin: 0 0 0.65rem;
}
.eng-page .eng-compare-head p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--eng-text-muted);
  margin: 0;
}
.eng-page .eng-compare-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--eng-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
}
.eng-page .eng-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.eng-page .eng-compare-table th,
.eng-page .eng-compare-table td {
  padding: 0.85rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.eng-page .eng-compare-table thead th {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--eng-text-muted);
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid var(--eng-border);
  white-space: nowrap;
}
.eng-page .eng-compare-col-monthly {
  color: var(--eng-text);
  background: rgba(196, 181, 253, 0.05);
}
.eng-page .eng-compare-col-tag {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.45rem;
  background: rgba(196, 181, 253, 0.18);
  color: var(--eng-accent);
  border-radius: 999px;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  vertical-align: middle;
}
.eng-page .eng-compare-table tbody th {
  color: var(--eng-text);
  font-weight: 600;
  font-size: 0.9rem;
}
.eng-page .eng-compare-table tbody td {
  color: var(--eng-text-muted);
}
.eng-page .eng-compare-table tbody td strong {
  color: var(--eng-text);
}
.eng-page .eng-compare-table tbody tr:last-child th,
.eng-page .eng-compare-table tbody tr:last-child td { border-bottom: 0; }
.eng-page .eng-compare-note {
  margin-top: 1rem;
  font-size: 0.88rem;
  color: var(--eng-text-muted);
  line-height: 1.6;
}

/* ----- INCLUDED / NOT INCLUDED GRID ----- */
.eng-page .eng-included-head { margin-bottom: 1.5rem; }
.eng-page .eng-included-head h2 {
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--eng-text);
  margin: 0;
}
.eng-page .eng-included-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.eng-page .eng-included-col {
  padding: 1.5rem 1.5rem 1.25rem;
  background: var(--eng-card);
  border: 1px solid var(--eng-border);
  border-radius: 14px;
}
.eng-page .eng-included-col h3 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--eng-accent);
  margin: 0 0 0.85rem;
}
.eng-page .eng-included-col--out h3 { color: var(--eng-text-muted); }
.eng-page .eng-included-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.eng-page .eng-included-col li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.9rem;
  color: var(--eng-text-muted);
  line-height: 1.5;
}
.eng-page .eng-included-col--out li {
  color: rgba(245, 245, 247, 0.55);
}
.eng-page .eng-included-col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--eng-success);
  border-bottom: 2px solid var(--eng-success);
  transform: rotate(-45deg);
}
.eng-page .eng-included-col--out li::before {
  border: 0;
  width: 10px;
  height: 2px;
  background: rgba(248, 113, 113, 0.55);
  transform: none;
  top: 0.7rem;
}
.eng-page .eng-included-note {
  margin-top: 0.85rem;
  font-size: 0.8rem;
  color: var(--eng-text-muted);
  line-height: 1.55;
  padding-top: 0.85rem;
  border-top: 1px solid var(--eng-border);
}

/* ----- PROCESS ----- */
.eng-page .eng-process-head { margin-bottom: 1.5rem; }
.eng-page .eng-process-head h2 {
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--eng-text);
  margin: 0;
}
.eng-page .eng-process-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 1rem;
}
.eng-page .eng-process-steps li {
  position: relative;
  padding: 1.4rem 1.5rem 1.25rem;
  background: var(--eng-card);
  border: 1px solid var(--eng-border);
  border-radius: 14px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.eng-page .eng-process-steps li:hover {
  background: var(--eng-card-hover);
  border-color: var(--eng-border-hover);
}
.eng-page .eng-process-num {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--eng-accent);
  margin-bottom: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.eng-page .eng-process-steps h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--eng-text);
  margin: 0 0 0.45rem;
}
.eng-page .eng-process-steps p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--eng-text-muted);
  line-height: 1.55;
}
.eng-page .eng-process-steps p a {
  color: var(--eng-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ----- FAQ ----- */
.eng-page .eng-faq-head { margin-bottom: 1.25rem; }
.eng-page .eng-faq-head h2 {
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--eng-text);
  margin: 0;
}
.eng-page .eng-faq-list { display: flex; flex-direction: column; gap: 0.5rem; }
.eng-page .eng-faq-item {
  background: var(--eng-card);
  border: 1px solid var(--eng-border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.eng-page .eng-faq-item:hover { border-color: var(--eng-border-hover); }
.eng-page .eng-faq-item[open] {
  border-color: rgba(196, 181, 253, 0.35);
  background: rgba(196, 181, 253, 0.04);
}
.eng-page .eng-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--eng-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  user-select: none;
}
.eng-page .eng-faq-item summary::-webkit-details-marker { display: none; }
.eng-page .eng-faq-toggle {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background-color: rgba(196, 181, 253, 0.1);
  background-image:
    linear-gradient(#c4b5fd, #c4b5fd),
    linear-gradient(#c4b5fd, #c4b5fd);
  background-size: 12px 2px, 2px 12px;
  background-position: center, center;
  background-repeat: no-repeat;
  border: 1px solid rgba(196, 181, 253, 0.25);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.2s ease, border-color 0.2s ease;
}
.eng-page .eng-faq-item:hover .eng-faq-toggle {
  background-color: rgba(196, 181, 253, 0.18);
  border-color: rgba(196, 181, 253, 0.4);
}
.eng-page .eng-faq-item[open] .eng-faq-toggle {
  transform: rotate(45deg);
  background-color: rgba(196, 181, 253, 0.22);
  border-color: rgba(196, 181, 253, 0.5);
}
.eng-page .eng-faq-answer {
  padding: 0.85rem 1.25rem 1.1rem;
  border-top: 1px solid rgba(196, 181, 253, 0.08);
  animation: eng-faq-reveal 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.eng-page .eng-faq-answer p {
  margin: 0;
  color: var(--eng-text-muted);
  font-size: 0.95rem;
  line-height: 1.65;
}
@keyframes eng-faq-reveal {
  from { opacity: 0; transform: translate3d(0, -4px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Desktop: stretch all tier cards to the tallest sibling so the empty
   space below the audit and weekly cards is reclaimed by the deliverables
   list (which uses flex: 1) and the meta block sits flush at the bottom. */
.eng-page .eng-tiers > .eng-tier { height: 100%; }

@media (max-width: 980px) {
  /* Mobile and tablet: convert the 3-column grid into a horizontal
     scroll-snap carousel so visitors swipe between tiers like the site's
     other carousels (case studies, related posts). Each card snaps into
     view, the monthly tier is the anchor (visible first via DOM order
     plus a 'best value' badge). */
  .eng-page .eng-tiers {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
    gap: 1rem;
    margin-inline: -1rem;
    padding: 0.5rem 1rem 1.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(196, 181, 253, 0.35) transparent;
  }
  .eng-page .eng-tiers > .eng-tier {
    flex: 0 0 min(88%, 360px);
    min-width: 240px;
    max-width: 360px;
    scroll-snap-align: start;
    scroll-margin-inline: 1rem;
    padding: 1.5rem 1.4rem 1.25rem;
    height: auto;
  }
  .eng-page .eng-tiers::-webkit-scrollbar { height: 4px; }
  .eng-page .eng-tiers::-webkit-scrollbar-thumb {
    background: rgba(196, 181, 253, 0.35);
    border-radius: 4px;
  }
  .eng-page .eng-tier--featured { box-shadow: 0 14px 40px -20px rgba(196, 181, 253, 0.4); }
  .eng-page .eng-included-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .eng-page .eng-hero { padding: 2.5rem 0 1rem; }
  .eng-page .eng-tier-price-num { font-size: 1.6rem; }
  .eng-page .eng-compare-table { font-size: 0.85rem; }
  .eng-page .eng-compare-table th,
  .eng-page .eng-compare-table td { padding: 0.7rem 0.85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .eng-page .eng-tier,
  .eng-page .eng-tier-cta,
  .eng-page .eng-faq-item,
  .eng-page .eng-faq-toggle,
  .eng-page .eng-faq-answer { transition: none; animation: none; }
  .eng-page .eng-tier:hover,
  .eng-page .eng-process-steps li:hover { transform: none; }
}