/* ananthgodavari.com — site overrides (Material Kit is loaded separately). */

/* ------------------------------------------------------------------ */
/* Home: hero flush to the top of the viewport (no grey band)           */
/* MainLayout.razor.css gives main.site-main { padding-top: 6.5rem }   */
/* for the floating navbar. That padding is *above* the first child,    */
/* so the strip shows .presentation-page bg-gray-200 — the real bug.   */
/* ------------------------------------------------------------------ */
html,
body {
  margin: 0;
  padding: 0;
}

body:has(.ct-hero) .presentation-page {
  padding-top: 0;
}

/* Defeat Blazor-scoped main.site-main[...] padding so the hero (and its
   .ct-hero__bg) starts at the top; .ct-hero already has top padding for the nav. */
body:has(.ct-hero) .presentation-page main.site-main,
body:has(.ct-hero) main.site-main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body:has(.ct-hero) .presentation-page > .container.position-sticky {
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 0;
}

/* Main navbar: dropdown menus (Bootstrap 5) — spacing and shadow. */
nav.navbar .dropdown-menu {
  min-width: 15rem;
  border-radius: 0.75rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 0.5rem 0;
}

nav.navbar .dropdown-item {
  font-size: 0.875rem;
  padding: 0.45rem 1rem;
}

nav.navbar .dropdown-item.active,
nav.navbar .dropdown-item:active {
  background-color: rgba(45, 206, 137, 0.12);
  color: #1a7f4b;
}

body:has(.ct-hero) nav.navbar {
  margin-top: 0.75rem !important;
  margin-bottom: 0.25rem !important;
}

body:has(.ct-hero) .ct-hero {
  margin-top: 0;
}

/* ------------------------------------------------------------------ */
/* Creative Tim–style home top fold (ref: creative-tim.com hero)       */
/* ------------------------------------------------------------------ */
.ct-hero {
  --ct-ink: #050508;
  --ct-ink-2: #0c0c12;
  --ct-grid: rgba(0, 0, 0, 0.06);
  --ct-mute: rgba(0, 0, 0, 0.7);
  --ct-faint: rgba(0, 0, 0, 0.18);
  position: relative;
  z-index: 0;
  min-height: 78vh;
  display: flex;
  align-items: center;
  padding: clamp(6.5rem, 14vh, 9.5rem) 0 clamp(3.5rem, 7vh, 5.5rem);
  color: #0a0a0a;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow: visible;
}

/* Material Kit landing image + optional light grid. No dark scrim — photo stays visible. */
.ct-hero__bg {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 0;
  background-color: #6e6e7a;
  background-image:
    linear-gradient(var(--ct-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--ct-grid) 1px, transparent 1px),
    url("/vendor/material-kit/assets/img/bg-landing.jpg");
  background-size: 72px 72px, 72px 72px, cover;
  background-position: center -1px, center -1px, center;
  background-repeat: repeat, repeat, no-repeat;
  /* No mask — previous mask + gradient were making the fold look heavily dark */
  pointer-events: none;
}


.ct-hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 58rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.ct-hero__eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #0a0a0a;
  margin-bottom: 1.25rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

.ct-hero__title {
  font-size: clamp(1.25rem, 0.85rem + 1.4vw, 2.9rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: #0a0a0a;
  margin: 0 auto 1.25rem;
  max-width: min(100%, 46rem);
  width: 100%;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.ct-hero__titleLine {
  display: block;
}

/* Two lines: first row must not break mid-phrase (was 3 lines: after each comma) */
.ct-hero__titleAccent,
.ct-hero__titleRest {
  display: block;
  color: #0a0a0a;
  text-align: center;
}

.ct-hero__titleAccent {
  white-space: nowrap;
}

.ct-hero__titleRest {
  margin-top: 0.08em;
  white-space: normal;
}

.ct-hero__lede {
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.1rem);
  line-height: 1.6;
  color: #1a1a1a;
  max-width: 40rem;
  margin: 0 auto 1.75rem;
  font-weight: 400;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

.ct-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 2.25rem;
}

.ct-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 9999px;
  text-decoration: none;
  line-height: 1.2;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  border: 1px solid transparent;
}

.ct-hero__btn--primary {
  background: #0a0a0a;
  color: #fafafa;
  border-color: #0a0a0a;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 8px 24px rgba(0, 0, 0, 0.2);
}

.ct-hero__btn--primary:hover {
  background: #1a1a1a;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.ct-hero__btn--ghost {
  background: rgba(255, 255, 255, 0.85);
  color: #0a0a0a;
  border-color: var(--ct-faint);
  backdrop-filter: blur(6px);
}

.ct-hero__btn--ghost:hover {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.3);
  color: #0a0a0a;
}

/* Hero cross-links to the training cluster + method (homepage). */
.ct-hero__crossref {
  text-align: center;
  max-width: 36rem;
  margin: 0 auto 1.75rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #3d3d3d;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.ct-hero__crossref a {
  color: #0a0a0a;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ct-hero__crossref a:hover {
  color: #2dce89;
}

/* Homepage — training cluster quick links (IndexPresentationTrainingCurriculum). */
.home-training-cluster__card {
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.home-training-cluster__card:hover {
  border-color: rgba(45, 206, 137, 0.45) !important;
  box-shadow: 0 6px 20px rgba(45, 206, 137, 0.12);
  transform: translateY(-2px);
}

/* Stats */
.ct-hero__stats {
  text-align: center;
  max-width: 48rem;
  margin: 0 auto 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  padding-top: 1.75rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.ct-hero__stat {
  position: relative;
  padding: 0.5rem 0.35rem 1.25rem;
}

@media (min-width: 768px) {
  .ct-hero__stat {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
  }

  .ct-hero__stat:nth-child(4) {
    border-right: 0;
  }
}

@media (max-width: 767.98px) {
  .ct-hero__stat:nth-child(1),
  .ct-hero__stat:nth-child(2) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }
  .ct-hero__stat:nth-child(1),
  .ct-hero__stat:nth-child(3) {
    border-right: 1px solid rgba(0, 0, 0, 0.08);
  }
}

.ct-hero__statValue {
  font-size: clamp(1.4rem, 1.1rem + 0.7vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0a0a0a;
  line-height: 1.15;
  margin-bottom: 0.35rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

.ct-hero__statLabel {
  font-size: 0.78rem;
  color: #2d2d2d;
  font-weight: 500;
  line-height: 1.35;
  max-width: 12.5rem;
  margin: 0 auto;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* Focus areas (replaces “Works seamlessly”) */
.ct-hero__focus {
  margin-top: 0.75rem;
  margin-bottom: 0.25rem;
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
  padding: 0 0.5rem 0.5rem;
}

.ct-hero__focusLabel {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #0a0a0a;
  font-weight: 600;
  margin: 0.5rem 0 0.75rem;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  opacity: 0.9;
}

.ct-hero__focusChips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 0.55rem;
  margin: 0;
  padding: 0;
}

.ct-hero__focusChips .ct-hero__chip {
  list-style: none;
  margin: 0;
  padding: 0.4rem 0.85rem;
  font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.88rem);
  font-weight: 600;
  line-height: 1.25;
  color: #0a0a0a;
  text-align: center;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 9999px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.06);
  text-shadow: none;
}

/* Overlap hero image slightly (negative margin is the same pattern as Bootstrap mt-n*). -3.125rem = 50px at 16px. */
body:has(.ct-hero) .home-content-card {
  margin-top: -3.125rem;
}

/* Pull presentation card above the grey background */
.presentation-page .ct-hero + * {
  position: relative;
  z-index: 2;
}

/* Light bar + dark type on home (matches black hero text) */
body:has(.ct-hero) .navbar.blur {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
}

body:has(.ct-hero) .navbar .navbar-brand,
body:has(.ct-hero) .navbar .nav-link {
  color: #0a0a0a !important;
}

body:has(.ct-hero) .navbar .nav-link:hover,
body:has(.ct-hero) .navbar .nav-link:focus {
  color: #1a1a1a !important;
}

body:has(.ct-hero) .navbar .nav-link.active {
  color: #3b2b6b !important;
}

body:has(.ct-hero) .navbar .navbar-toggler-bar {
  background-color: #0a0a0a;
}

/* Brand logo: bounded size so navbar bar height/padding are unchanged (Material Kit p-2, text-sm) */
.site-navbar__brand-logo {
  display: block;
  height: 1.5rem;
  width: auto;
  max-width: 2.5rem;
  object-fit: contain;
  flex-shrink: 0;
  margin-right: 1rem;
}

/* Home: "How Ananth Godavari can help" section title (rotating features block) */
.home-how-help__title {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.15rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

/* Home: industries band — title, icon row, explicit middots, panel CTA */
.home-industries__titleScroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.home-industries__titleScroll::-webkit-scrollbar {
  display: none;
}

.home-industries__title {
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.home-industries__titleLine {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  font-size: clamp(0.68rem, 1.85vw + 0.52rem, 1.9rem);
}

@media (min-width: 576px) {
  .home-industries__titleLine {
    font-size: clamp(0.95rem, 1.05vw + 0.82rem, 1.95rem);
  }
}

.home-industries__panel {
  border-color: #dee2e6 !important;
}

.home-industries__label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #67748e;
}

.home-industries__labelIcon {
  font-size: 1.5rem;
  line-height: 1;
}

.home-industries__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  row-gap: 0.65rem;
  column-gap: 0;
  padding: 0;
  margin: 0;
}

.home-industries__item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.home-industries__itemIcon {
  font-size: 1.125rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
  color: #5e72e4;
  opacity: 0.9;
}

.home-industries__itemLabel {
  font-size: 0.875rem;
  font-weight: 600;
  color: #344767;
  letter-spacing: -0.01em;
  white-space: nowrap;
  hyphens: manual;
}

.home-industries__sep {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.4rem;
  list-style: none;
}

.home-industries__sepDot {
  display: inline-block;
  color: #8392ab;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
}

.home-industries__cta {
  margin-top: 1.35rem;
  padding-top: 1.35rem;
  border-top: 1px solid rgba(52, 71, 103, 0.12);
}

/* Builder Lab Method: tagline + workflow in a subtle panel */
.builder-lab-method__workflowBox {
  border-color: rgba(52, 71, 103, 0.12) !important;
  box-shadow: 0 0.125rem 0.25rem rgba(52, 71, 103, 0.04);
  min-width: 0;
}

/* Builder Lab Method: step trail wraps so all steps stay visible (no horizontal scroll) */
.builder-lab-method__stepTrail {
  width: 100%;
  min-width: 0;
}

/* ------------------------------------------------------------------ */
/* Sub-page hero: dark gradient band, rounded, with depth decorations  */
/* (used by /ai-software-development and reusable by other service     */
/*  pages — class prefix `asd-hero` was first; rename later if needed) */
/* ------------------------------------------------------------------ */
.asd-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.asd-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

.asd-hero__orb--green {
  width: 34rem;
  height: 34rem;
  background: radial-gradient(circle, rgba(45, 206, 137, 0.7), transparent 70%);
  top: -10rem;
  right: -10rem;
}

.asd-hero__orb--violet {
  width: 26rem;
  height: 26rem;
  background: radial-gradient(circle, rgba(94, 114, 228, 0.55), transparent 70%);
  bottom: -8rem;
  left: -7rem;
}

.asd-hero__waves {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}

.asd-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 0.45rem 0.9rem;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  white-space: nowrap;
}

.asd-hero__pill .material-symbols-rounded {
  font-size: 1rem;
  opacity: 0.85;
}

.asd-hero__pillStrip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.asd-hero__divider {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0) 100%);
  border: 0;
  margin: 2.5rem 0 1.75rem;
}

/* Page content card wrapper that pulls up under sub-page hero (matches the
   visual pattern used on the home page where post-hero sits in a card). */
.asd-content-card {
  position: relative;
  z-index: 2;
  margin-top: -3.25rem;
}

/* AI Software Development: capabilities band on dark — glass cards */
.asd-cap__card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.asd-cap__card:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(45, 206, 137, 0.4) !important;
}

/* AI Software Development: level numeral on each capability card (01..08) */
.asd-cap__level {
  display: inline-block;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(310deg, #17ad37 0%, #98ec2d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.asd-cap__meaning {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #98ec2d;
  margin-bottom: 0.5rem;
}

/* AI Software Development: short accent underline beneath sub-group labels in commitments section */
.asd-commit__rule {
  width: 3.5rem;
  height: 2px;
  background: linear-gradient(310deg, #17ad37 0%, #98ec2d 100%);
  border-radius: 2px;
}

/* AI Software Development: vertical engagement timeline (5 phases) */
.builder-lab-engagement__phases {
  margin: 0;
  padding: 0;
}

.builder-lab-engagement__phase {
  position: relative;
}

.builder-lab-engagement__marker {
  width: 1.25rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0.5rem;
}

.builder-lab-engagement__dot {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  background: linear-gradient(310deg, #17ad37 0%, #98ec2d 100%);
  box-shadow: 0 0 0 4px rgba(45, 206, 137, 0.12);
  flex-shrink: 0;
}

.builder-lab-engagement__line {
  flex-grow: 1;
  width: 2px;
  background: rgba(45, 206, 137, 0.18);
  margin-top: 0.5rem;
  min-height: 2rem;
}

.builder-lab-engagement__content {
  flex: 1 1 auto;
  min-width: 0;
}

/* ------------------------------------------------------------------ */
/* /ai-systems-integration — service page                               */
/* (reuses .asd-hero*, .asd-cap__card, .asd-cap__level, .asd-cap__meaning, */
/*  and .asd-commit__rule from the AI Software Development page; only    */
/*  defines the things genuinely new to the integration page here.)      */
/* ------------------------------------------------------------------ */

/* Page content card overlap (same pattern as .asd-content-card on /ai-software-development) */
.asi-content-card {
  position: relative;
  z-index: 2;
  margin-top: -3.25rem;
}

/* Intelligent Workflows section: 2x2 quadrant cards for the four roles
   (where AI assists / where people approve / where business rules control /
   where logs make it auditable). Distinct visual treatment from the
   capabilities glass cards on the dark band — these sit on white, with
   a green level numeral and a small uppercase role label. */
.asi-quad__card {
  border-radius: 0.875rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.asi-quad__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1.25rem rgba(20, 20, 22, 0.08) !important;
  border-color: rgba(45, 206, 137, 0.35) !important;
}

.asi-quad__numeral {
  display: inline-block;
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(310deg, #17ad37 0%, #98ec2d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.asi-quad__role {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #17ad37;
}

/* Thesis band: editorial card immediately after the hero with the page's
   central idea. Left-edge green rule signals "this is the thesis." */
.asi-thesis {
  border-radius: 1rem;
  background: #ffffff;
  padding-left: 1.75rem !important;
}

@media (min-width: 768px) {
  .asi-thesis {
    padding-left: 2.5rem !important;
  }
}

.asi-thesis__rule {
  position: absolute;
  left: 0;
  top: 1.25rem;
  bottom: 1.25rem;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, #17ad37 0%, #98ec2d 100%);
}

.asi-thesis__lead {
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.asi-thesis__support {
  font-size: 1.02rem;
  line-height: 1.6;
}

/* Section 2 — featured "What it does" contrast statements at the top of each
   card, sitting above the parallel bullet lists. The role label is small and
   uppercase; the statement itself is larger and tighter. Variants flip text
   colors for the green-gradient (right) card. */
.asi-vs__role {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6c757d;
  margin: 0;
}

.asi-vs__role--on-success {
  color: rgba(255, 255, 255, 0.85);
}

.asi-vs__featured {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
}

.asi-vs__featured--isolated {
  color: #344767;
}

.asi-vs__featured--integrated {
  color: #ffffff;
}

/* ------------------------------------------------------------------ */
/* /legacy-system-modernization — service page                          */
/* (reuses .asd-hero*, .asd-cap__card, .asd-cap__level, .asd-cap__meaning, */
/*  and .asd-commit__rule from the AI Software Development page; only    */
/*  defines the things genuinely new to the modernization page here:     */
/*  thesis band, vs. contrast featured statements, and the 5-step phased  */
/*  journey cards.)                                                      */
/* ------------------------------------------------------------------ */

/* Page content card overlap (same pattern as .asd-content-card on /ai-software-development) */
.lsm-content-card {
  position: relative;
  z-index: 2;
  margin-top: -3.25rem;
}

/* Thesis band: editorial card immediately after the hero with the page's
   central idea. Left-edge green rule signals "this is the thesis." Mirrors
   the .asi-thesis treatment used on /ai-systems-integration. */
.lsm-thesis {
  border-radius: 1rem;
  background: #ffffff;
  padding-left: 1.75rem !important;
}

@media (min-width: 768px) {
  .lsm-thesis {
    padding-left: 2.5rem !important;
  }
}

.lsm-thesis__rule {
  position: absolute;
  left: 0;
  top: 1.25rem;
  bottom: 1.25rem;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, #17ad37 0%, #98ec2d 100%);
}

.lsm-thesis__lead {
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.lsm-thesis__support {
  font-size: 1.02rem;
  line-height: 1.6;
}

/* Section 3 — featured "What it actually does" contrast statements at the
   top of each card in the Cosmetic Refresh vs. Real Modernization section.
   Mirrors the .asi-vs__* treatment on /ai-systems-integration. The role
   label is small and uppercase; the statement itself is larger and tighter.
   Variants flip text colors for the green-gradient (right) card. */
.lsm-vs__role {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6c757d;
  margin: 0;
}

.lsm-vs__role--on-success {
  color: rgba(255, 255, 255, 0.85);
}

.lsm-vs__featured {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
}

.lsm-vs__featured--cosmetic {
  color: #344767;
}

.lsm-vs__featured--real {
  color: #ffffff;
}

/* Section 6 — Five-step phased journey cards (Assess / Plan / Modernize /
   AI-Enable / Hand Off). White card, green top accent stripe, gradient
   numeral, small uppercase phase label. Sit in a 5-across flex row on
   desktop, 2-across on tablet, 1-across on mobile via Bootstrap row-cols.
   Distinct visual treatment from the dark-band capabilities glass cards
   (.asd-cap__card) and from the 2x2 quadrant cards on /ai-systems-integration
   (.asi-quad__card) — those communicate "kinds of work"; these communicate
   "ordered phases of one engagement." */
.lsm-phase__card {
  border-radius: 0.875rem;
  border-top: 3px solid transparent;
  border-image: linear-gradient(310deg, #17ad37 0%, #98ec2d 100%) 1;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.lsm-phase__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1.25rem rgba(20, 20, 22, 0.08) !important;
}

.lsm-phase__numeral {
  display: inline-block;
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(310deg, #17ad37 0%, #98ec2d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.lsm-phase__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #17ad37;
  margin: 0;
}

.lsm-phase__points i.material-symbols-rounded {
  font-size: 1rem;
  line-height: 1.4;
  flex-shrink: 0;
}

/* ------------------------------------------------------------------ */
/* /ai-builder-lab — canonical Builder Lab Method page                  */
/* (mirrors .asd-* patterns; uses .abl- prefix for things genuinely new) */
/* ------------------------------------------------------------------ */

/* Page content card overlap (same pattern as .asd-content-card on /ai-software-development) */
.abl-content-card {
  position: relative;
  z-index: 2;
  margin-top: -3.25rem;
}

/* Hero anchor strip: dark band beneath "What the method produces" panel.
   Visually anchors the build-method-not-consulting positioning right inside the hero. */
.abl-hero__anchor {
  background: linear-gradient(310deg, #141416 0%, #1f1f24 100%);
  border-top: 1px solid rgba(45, 206, 137, 0.35);
}

/* Six phases: vertical step trail with green numerals 01..06. */
.abl-phases {
  margin: 0;
  padding: 0;
}

.abl-phase {
  position: relative;
}

.abl-phase__marker {
  width: 4.5rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0.25rem;
}

.abl-phase__numeral {
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(310deg, #17ad37 0%, #98ec2d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  flex-shrink: 0;
}

.abl-phase__line {
  flex-grow: 1;
  width: 2px;
  background: rgba(45, 206, 137, 0.18);
  margin-top: 0.75rem;
  min-height: 3rem;
}

.abl-phase__content {
  flex: 1 1 auto;
  min-width: 0;
}

/* Anti-pattern callout under each phase. Subtle red tint; not alarming, just legible. */
.abl-phase__antiPattern {
  background: rgba(245, 54, 92, 0.06);
  border-left: 3px solid rgba(245, 54, 92, 0.55);
  padding: 0.65rem 0.9rem;
  border-radius: 0.35rem;
  font-size: 0.85rem;
  color: #4d1c2a;
  line-height: 1.45;
}

.abl-phase__antiPatternLabel {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c5314a;
  margin-right: 0.5rem;
  vertical-align: 0.05em;
}

@media (max-width: 575.98px) {
  .abl-phase__marker {
    width: 3.25rem;
  }
  .abl-phase__numeral {
    font-size: 2rem;
  }
}

/* Section 3 iteration band: small panel above the step-trail saying "every iteration covers all six". */
.abl-iteration-band {
  background: rgba(45, 206, 137, 0.08);
  border: 1px solid rgba(45, 206, 137, 0.28);
}

/* Section 4 (Iterative & cadence-agnostic): callouts framing what the method is NOT.
   Subtle red tint to signal "anti-pattern", but understated — these are positioning callouts,
   not warnings. */
.abl-iter-callout--against {
  background: rgba(245, 54, 92, 0.04);
  border: 1px solid rgba(245, 54, 92, 0.22);
}

/* Section 4 AI-era reinforcement: dark band with the wave background. Already styled by
   .bg-gradient-dark + .border-radius-lg; this rule just guarantees the inner padding/overflow
   behaves consistently across browsers when the wave overflows. */
.abl-iter-aiera {
  isolation: isolate;
}

/* Section 7: editorial value statement — green numerals, no cards. */
.abl-value__numeral {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(310deg, #17ad37 0%, #98ec2d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  flex-shrink: 0;
  min-width: 2.5rem;
}

/* Section 8: where-the-method-shows-up cards. Hover lift handled by .move-on-hover; this
   just ensures the dark "Learn the method" card keeps its inner contrast when hovered. */
.abl-where__card {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.abl-where__card:hover {
  border-color: rgba(45, 206, 137, 0.45);
}

.abl-where__card--training:hover {
  border-color: transparent;
}

/* Footer: Builder Lab band + horizontal explore links */
.site-footer__eyebrow {
  letter-spacing: 0.06em;
}

.site-footer__band {
  box-shadow: 0 -6px 24px rgba(52, 71, 103, 0.05);
}

.site-footer__nav .nav-item {
  margin-bottom: 0;
}

.site-footer nav a.active,
.site-footer a.active.text-muted {
  color: #2dce89 !important;
  font-weight: 600;
}

/* ======================================================================
   /portfolio — proof page

   Conventions:
   - Reuses .asd-hero* tokens for the dark gradient hero band so this page
     reads as a sibling of /ai-software-development and /ai-builder-lab.
   - All page-specific selectors are prefixed `portfolio-*`.
   - Layout decisions: always-visible per-project detail; vertical stacked
     project cards; 4-tier connected-stack flow.
   ====================================================================== */

/* --- Hero anchor strip + stat panel ---------------------------------- */
.portfolio-hero__anchors {
  margin-top: 0.25rem;
}

.portfolio-hero__anchor {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.portfolio-hero__anchor:hover,
.portfolio-hero__anchor:focus-visible {
  background: rgba(45, 206, 137, 0.18);
  border-color: rgba(45, 206, 137, 0.55);
  color: #fff;
  transform: translateY(-1px);
  text-decoration: none;
}

.portfolio-hero__anchor i {
  font-size: 1rem;
  color: rgba(45, 206, 137, 0.95);
}

.portfolio-hero__stats {
  background: #fff;
}

.portfolio-hero__statNum {
  display: inline-block;
  min-width: 2.4rem;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: #344767;
  background: linear-gradient(310deg, #2dce89, #2dcecc);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
}

.portfolio-hero__statLabel {
  font-size: 0.85rem;
  color: #344767;
  line-height: 1.45;
  flex: 1;
}

.portfolio-hero__strip {
  background: linear-gradient(310deg, #2c3e50, #344767);
}

/* Hero method-attribution strip — pill-shaped trust strip below the lede.
   Tells visitors at the top of the page that every system was built with the
   Builder Lab Method, with a deep link to /ai-builder-lab. */
.portfolio-hero__methodStrip {
  background: rgba(45, 206, 137, 0.12);
  border: 1px solid rgba(45, 206, 137, 0.45);
  border-radius: 999px;
  max-width: 100%;
}

.portfolio-hero__methodStrip > i {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.portfolio-hero__methodLink {
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 0.25rem;
  transition: color 0.18s ease;
}

.portfolio-hero__methodLink strong {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(45, 206, 137, 0.55);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.18s ease;
}

.portfolio-hero__methodLink:hover,
.portfolio-hero__methodLink:focus-visible {
  color: #fff;
  text-decoration: none;
}

.portfolio-hero__methodLink:hover strong,
.portfolio-hero__methodLink:focus-visible strong {
  text-decoration-color: #2dce89;
}

.portfolio-hero__methodLink i {
  color: #2dce89;
  transition: transform 0.18s ease;
}

.portfolio-hero__methodLink:hover i,
.portfolio-hero__methodLink:focus-visible i {
  transform: translateX(2px);
}

/* --- Capability strip (chip grid) ------------------------------------ */
.portfolio-chipGrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem 0.55rem;
  padding: 0;
}

.portfolio-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(45, 206, 137, 0.35);
  color: #344767;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 12px rgba(52, 71, 103, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.portfolio-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(45, 206, 137, 0.7);
  box-shadow: 0 8px 18px rgba(45, 206, 137, 0.18);
}

.portfolio-chip i {
  font-size: 1rem;
  color: #2dce89;
}

/* --- Connected automotive stack flow --------------------------------- */
.portfolio-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  max-width: 980px;
  margin: 0 auto;
}

.portfolio-stack__tier {
  display: grid;
  gap: 1rem;
}

.portfolio-stack__tier--single {
  grid-template-columns: 1fr;
}

.portfolio-stack__tier--pair {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .portfolio-stack__tier--pair {
    grid-template-columns: 1fr 1fr;
  }
}

.portfolio-stack__node {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.25rem 1.4rem;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid rgba(45, 206, 137, 0.32);
  box-shadow: 0 6px 18px rgba(52, 71, 103, 0.06);
  text-decoration: none;
  color: #344767;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.portfolio-stack__node:hover,
.portfolio-stack__node:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(45, 206, 137, 0.7);
  box-shadow: 0 14px 30px rgba(45, 206, 137, 0.18);
  text-decoration: none;
}

.portfolio-stack__node--root {
  background: linear-gradient(310deg, #1f2c3d, #344767);
  color: #fff;
  border-color: rgba(45, 206, 137, 0.55);
}

.portfolio-stack__node--root .portfolio-stack__role,
.portfolio-stack__node--root .portfolio-stack__name,
.portfolio-stack__node--root .portfolio-stack__desc,
.portfolio-stack__node--root .portfolio-stack__jump {
  color: #fff;
}

.portfolio-stack__node--root .portfolio-stack__role {
  color: #2dce89;
}

.portfolio-stack__node--root .portfolio-stack__desc {
  color: rgba(255, 255, 255, 0.85);
}

.portfolio-stack__node--top {
  background: linear-gradient(310deg, #f6fdf9, #ffffff);
}

.portfolio-stack__role {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #2dce89;
}

.portfolio-stack__name {
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
  color: #344767;
  letter-spacing: -0.01em;
}

.portfolio-stack__desc {
  display: block;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #67748e;
}

.portfolio-stack__jump {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: #2dce89;
  margin-top: 0.25rem;
}

.portfolio-stack__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(45, 206, 137, 0.85);
}

.portfolio-stack__arrow i {
  font-size: 1.6rem;
}

/* --- Project card ---------------------------------------------------- */
.portfolio-card {
  background: #fff;
  border-radius: 1.15rem;
  overflow: hidden;
  scroll-margin-top: 96px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.portfolio-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgba(52, 71, 103, 0.10);
}

.portfolio-card__eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #2dce89;
}

.portfolio-card__stackBadge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: rgba(45, 206, 137, 0.12);
  color: #1a8d57;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.portfolio-card__stackBadge i {
  font-size: 0.95rem;
}

.portfolio-card__oneliner {
  font-size: 1.05rem;
  line-height: 1.55;
  color: #344767;
}

.portfolio-card__tags {
  margin: 0;
}

.portfolio-card__tag {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: #f5f7fb;
  border: 1px solid rgba(52, 71, 103, 0.12);
  color: #344767;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.portfolio-card__divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(52, 71, 103, 0.14), transparent);
}

.portfolio-card__divider--inner {
  background: linear-gradient(90deg, transparent, rgba(45, 206, 137, 0.18), transparent);
}

.portfolio-card__sectionLabel {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #344767;
  margin-bottom: 0.5rem;
}

.portfolio-card__sectionLabel i {
  font-size: 1rem;
  color: #2dce89;
}

.portfolio-card__sectionLabel--value {
  color: #2dce89;
}

.portfolio-card__text {
  font-size: 0.95rem;
  line-height: 1.65;
  color: #344767;
}

.portfolio-card__text--value {
  font-weight: 600;
}

.portfolio-card__list li {
  font-size: 0.92rem;
  line-height: 1.55;
  color: #344767;
}

.portfolio-card__aiName {
  font-weight: 700;
  color: #344767;
}

.portfolio-card__aiDash {
  color: #67748e;
  margin: 0 0.35rem;
}

.portfolio-card__aiDesc {
  font-size: 0.92rem;
  line-height: 1.55;
  color: #67748e;
}

.portfolio-card__aiNote {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  background: rgba(45, 206, 137, 0.08);
  border: 1px solid rgba(45, 206, 137, 0.22);
  color: #1a8d57;
  font-size: 0.85rem;
  line-height: 1.5;
}

.portfolio-card__valueBlock {
  padding: 1rem 1.2rem;
  border-radius: 0.85rem;
  background: linear-gradient(135deg, rgba(45, 206, 137, 0.08), rgba(45, 206, 204, 0.06));
  border: 1px solid rgba(45, 206, 137, 0.22);
}

.portfolio-card__connected {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.65rem 0.9rem;
  border-radius: 0.75rem;
  background: #f8fafc;
  border: 1px solid rgba(52, 71, 103, 0.10);
  font-size: 0.88rem;
}

.portfolio-card__connectedLabel {
  font-weight: 700;
  color: #344767;
  margin-right: 0.35rem;
}

.portfolio-card__connectedLink {
  color: #2dce89;
  font-weight: 600;
  text-decoration: none;
}

.portfolio-card__connectedLink:hover,
.portfolio-card__connectedLink:focus-visible {
  text-decoration: underline;
}

.portfolio-card__connectedSep {
  color: #67748e;
}

/* --- Per-card methodology attribution --------------------------------
   Always-present last line. Ties each project to /ai-builder-lab. Stronger
   visual treatment than the connected-stack strip because it reinforces
   the page-level "Same Builder Lab Method, every build" promise. */
.portfolio-card__method {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  border-radius: 0.85rem;
  background: linear-gradient(310deg, #1f2c3d, #344767);
  color: #fff;
}

.portfolio-card__method i {
  font-size: 1.45rem;
  color: #2dce89;
}

.portfolio-card__methodBody {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1;
  min-width: 0;
}

.portfolio-card__methodLabel {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #2dce89;
}

.portfolio-card__methodLink {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  font-size: 0.92rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  text-decoration: none;
  transition: color 0.18s ease;
}

.portfolio-card__methodLink strong {
  font-weight: 700;
  color: #fff;
}

.portfolio-card__methodLink:hover,
.portfolio-card__methodLink:focus-visible {
  color: #fff;
  text-decoration: none;
}

.portfolio-card__methodLink:hover i,
.portfolio-card__methodLink:focus-visible i {
  transform: translateX(2px);
}

.portfolio-card__methodLink i {
  font-size: 0.75rem;
  color: #2dce89;
  transition: transform 0.18s ease;
}

/* --- Common patterns panel ------------------------------------------- */
.portfolio-patterns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .portfolio-patterns {
    grid-template-columns: 1fr 1fr;
  }
}

.portfolio-patterns__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  border-radius: 0.85rem;
  background: #fff;
  border: 1px solid rgba(52, 71, 103, 0.08);
  box-shadow: 0 4px 14px rgba(52, 71, 103, 0.04);
}

.portfolio-patterns__item i {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.portfolio-patterns__name {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: #344767;
  margin-bottom: 0.2rem;
}

.portfolio-patterns__desc {
  display: block;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #67748e;
}

/* ====================================================================== */
/* About page (/about)                                                     */
/* Reuses .asd-hero* base styles for the dark gradient hero.              */
/* about-* prefix is reserved for About-specific layout and accents.      */
/* ====================================================================== */

/* Page content card overlap (same pattern as .asd-content-card and .abl-content-card) */
.about-content-card {
  position: relative;
  z-index: 2;
  margin-top: -3.25rem;
}

/* --- Hero: headshot card --------------------------------------------- */
.about-hero__card {
  background: #fff;
}

.about-hero__photoWrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #1f2c3d;
}

.about-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

.about-hero__photoOverlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(31, 44, 61, 0) 45%, rgba(31, 44, 61, 0.78) 100%);
  pointer-events: none;
}

.about-hero__photoCaption {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.85rem;
  z-index: 1;
}

/* Hero anchor strip: dark band beneath the credential list. Mirrors abl-hero__anchor. */
.about-hero__anchor {
  background: linear-gradient(310deg, #1f2c3d, #344767);
}

.about-hero__facts a {
  text-decoration: underline;
}

.about-hero__facts a:hover,
.about-hero__facts a:focus-visible {
  text-decoration: none;
}

/* --- Section 1: Origin story ---------------------------------------- */
.about-origin__card {
  padding: 1.75rem 1.75rem;
  border-radius: 1.15rem;
  border: 1px solid rgba(52, 71, 103, 0.10);
}

.about-origin__card--why {
  background: #fff;
  box-shadow: 0 8px 26px rgba(52, 71, 103, 0.06);
}

.about-origin__card--answer {
  background: linear-gradient(310deg, #1f2c3d, #344767);
  border-color: rgba(45, 206, 137, 0.30);
  box-shadow: 0 12px 32px rgba(45, 206, 137, 0.10);
}

.about-origin__cardHeader i {
  font-size: 2rem;
}

/* --- Section 2: What I do (role cards) ------------------------------ */
.about-role__card {
  border-radius: 1.05rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.about-role__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgba(52, 71, 103, 0.10);
}

.about-role__card--training {
  border-radius: 1.05rem;
}

/* --- Section 3: Point of view -------------------------------------- */
.about-pov__item {
  align-items: flex-start;
}

.about-pov__numeral {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3rem;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, #2dce89, #2dcecc);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
}

/* --- Section 4: What I bring to a build (disciplines) -------------- */
/* Six discipline cards reuse the standard Material Kit `.info` block; only
   the closing "codified as the Builder Lab Method" strip needs custom styling. */
.about-disciplines__codify {
  border-radius: 0.85rem;
  background: linear-gradient(135deg, rgba(45, 206, 137, 0.06), rgba(45, 206, 204, 0.04));
  border: 1px solid rgba(45, 206, 137, 0.22);
}

/* --- Section 5: IntelliFusion + credentials ------------------------ */
.about-if__main {
  padding: 1.85rem 1.85rem;
  border-radius: 1.15rem;
  background: #fff;
  border: 1px solid rgba(52, 71, 103, 0.10);
  box-shadow: 0 8px 26px rgba(52, 71, 103, 0.06);
}

.about-if__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 0.85rem;
  background: linear-gradient(135deg, rgba(45, 206, 137, 0.14), rgba(45, 206, 204, 0.08));
  color: #1a8d57;
  flex-shrink: 0;
}

.about-if__logo i {
  font-size: 1.7rem;
}

.about-if__creds {
  padding: 1.85rem 1.85rem;
  border-radius: 1.15rem;
  background: linear-gradient(135deg, rgba(45, 206, 137, 0.06), rgba(45, 206, 204, 0.04));
  border: 1px solid rgba(45, 206, 137, 0.18);
}

.about-if__credItem {
  padding: 0.6rem 0;
  border-bottom: 1px dashed rgba(52, 71, 103, 0.10);
}

.about-if__credItem:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* --- Section 6: Industries + Teaching ----------------------------- */
.about-iat__panel {
  padding: 1.85rem 1.85rem;
  border-radius: 1.15rem;
  background: #fff;
  border: 1px solid rgba(52, 71, 103, 0.10);
  box-shadow: 0 8px 26px rgba(52, 71, 103, 0.06);
}

.about-iat__panel--teaching {
  background: linear-gradient(310deg, #1f2c3d, #344767);
  border-color: rgba(45, 206, 137, 0.30);
  box-shadow: 0 12px 32px rgba(45, 206, 137, 0.10);
}

.about-iat__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
}

.about-iat__chips li {
  display: inline-block;
}

.about-iat__chip {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: #f5f7fb;
  border: 1px solid rgba(52, 71, 103, 0.12);
  color: #344767;
  font-size: 0.78rem;
  font-weight: 600;
}

/* ====================================================================== */
/* Contact page (/contact)                                                 */
/* Reuses .asd-hero* base styles for the dark gradient hero band.         */
/* contact-* prefix is reserved for Contact-specific layout and accents.  */
/* ====================================================================== */

/* --- Hero ------------------------------------------------------------ */
.contact-hero {
  /* Compact variant of the hub-page hero — shorter padding, no overlap card. */
}

.contact-hero__topicPill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background: rgba(45, 206, 137, 0.18);
  border: 1px solid rgba(45, 206, 137, 0.45);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-left: 0.35rem;
}

.contact-hero__topicPill i {
  font-size: 0.95rem;
}

/* --- Form card ------------------------------------------------------- */
.contact-form-card {
  padding: 1.85rem 1.85rem;
  border-radius: 1.15rem;
  background: #fff;
  border: 1px solid rgba(52, 71, 103, 0.10);
  box-shadow: 0 8px 26px rgba(52, 71, 103, 0.06);
}

.contact-form-card .form-label {
  margin-bottom: 0.35rem;
  letter-spacing: 0.01em;
}

.contact-form-card .form-control,
.contact-form-card .form-select {
  border-radius: 0.6rem;
  border: 1px solid rgba(52, 71, 103, 0.18);
  background: #fff;
  font-size: 0.95rem;
  padding: 0.55rem 0.85rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.contact-form-card .form-control:focus,
.contact-form-card .form-select:focus {
  border-color: #2dce89;
  box-shadow: 0 0 0 3px rgba(45, 206, 137, 0.18);
  outline: none;
}

.contact-form-card .form-control.invalid,
.contact-form-card .form-select.invalid {
  border-color: #e94560;
  box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.14);
}

.contact-form__fieldError {
  display: block;
  margin-top: 0.3rem;
  color: #b8364f;
  font-size: 0.78rem;
  font-weight: 500;
}

.contact-form__errorBanner {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  background: rgba(233, 69, 96, 0.08);
  border: 1px solid rgba(233, 69, 96, 0.30);
  color: #6b1a2c;
  font-size: 0.88rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.contact-form__errorBanner i {
  font-size: 1.3rem;
  color: #c2304a;
  flex-shrink: 0;
}

.contact-form__errorBanner a {
  color: #6b1a2c;
  text-decoration: underline;
  font-weight: 600;
}

/* Honeypot — visually hidden, not display:none (a11y / scrapers).      */
.contact-form__honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Success block ----------------------------------------------------- */
.contact-form__success {
  text-align: center;
  padding: 0.5rem 0;
}

.contact-form__successIcon {
  font-size: 3.2rem;
  color: #2dce89;
  display: block;
  margin: 0 auto 0.85rem;
}

/* Action row ------------------------------------------------------- */
.contact-form__actions {
  border-top: 1px dashed rgba(52, 71, 103, 0.10);
  padding-top: 1.1rem;
}

/* --- Sidebar ------------------------------------------------------- */
.contact-sidebar {
  display: flex;
  flex-direction: column;
}

.contact-sidebar__panel {
  padding: 1.5rem 1.5rem;
  border-radius: 1.05rem;
  background: #fff;
  border: 1px solid rgba(52, 71, 103, 0.10);
  box-shadow: 0 6px 22px rgba(52, 71, 103, 0.05);
}

.contact-sidebar__panel--alt {
  background: linear-gradient(310deg, #1f2c3d, #344767);
  border-color: rgba(45, 206, 137, 0.30);
  box-shadow: 0 12px 32px rgba(45, 206, 137, 0.10);
}

.contact-sidebar__list li:last-child {
  margin-bottom: 0;
}

.contact-sidebar__altLink {
  padding: 0.65rem 0.85rem;
  border-radius: 0.7rem;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  transition: background 0.18s ease, transform 0.18s ease;
}

.contact-sidebar__altLink:hover,
.contact-sidebar__altLink:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
  text-decoration: none;
}

.contact-sidebar__altIcon {
  font-size: 1.6rem;
  color: #2dce89;
  flex-shrink: 0;
}

.contact-sidebar__privacy {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.85rem 1rem;
  border-radius: 0.7rem;
  background: rgba(45, 206, 137, 0.06);
  border: 1px solid rgba(45, 206, 137, 0.18);
}

/* ====================================================================== */
/* /ai-builder-lab-training — Builder Lab Training & Curriculum page       */
/* Reuses .asd-hero* base styles (dark gradient hero) and the .abl-phase*  */
/* step-trail + .abl-iter-callout--against red callout + .abl-iter-aiera   */
/* dark-band patterns from /ai-builder-lab. ablt-* is reserved for things  */
/* genuinely new on this page (audience path cards, format band, related   */
/* learning cards).                                                        */
/* ====================================================================== */

/* Outcome cards (Section 2): hover lift mirrors .abl-where__card lift on
   the method page, with no link affordance since these are non-clickable. */
.ablt-outcome {
  border-radius: 0.875rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ablt-outcome:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1.25rem rgba(20, 20, 22, 0.08) !important;
  border-color: rgba(45, 206, 137, 0.35) !important;
}

/* Learning path cards (Section 5): four audience tracks. Faculty variant
   sits on a dark gradient to visually echo the "Learn the method" card
   on the /ai-builder-lab final-CTA grid (which also uses bg-gradient-dark
   for the training tile). */
.ablt-path {
  border-radius: 1rem;
}

.ablt-path--faculty {
  border-radius: 1rem;
}

/* Focus-module / adoption-surface chips inside each path card. Subtle
   tinted pills; not interactive, so no hover state. */
.ablt-path__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0;
  margin: 0;
}

.ablt-path__chips li {
  display: inline-block;
}

.ablt-path__chip {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: rgba(45, 206, 137, 0.08);
  border: 1px solid rgba(45, 206, 137, 0.28);
  color: #1a7c4f;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.ablt-path__chip--on-dark {
  background: rgba(45, 206, 137, 0.12);
  border: 1px solid rgba(45, 206, 137, 0.45);
  color: #ffffff;
}

/* Bottom format band on the Learning Paths section: light-tinted panel
   that offers the "discuss a path" hand-off without competing with the
   final CTA. */
.ablt-paths__formats {
  background: rgba(45, 206, 137, 0.06);
  border: 1px solid rgba(45, 206, 137, 0.22);
}

/* Related-learning cards (Section 7): hover lift consistent with
   .abl-where__card on the method page. Method tile (the dark variant)
   uses the same .move-on-hover Material Kit utility for visual parity. */
.ablt-related__card {
  border-radius: 1rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ablt-related__card:not(.ablt-related__card--method):hover {
  border-color: rgba(45, 206, 137, 0.35) !important;
}

.ablt-related__card--method {
  /* Subtle inner-edge tint so the dark method tile reads as "this is the
     anchor of the row," not just another dark card. */
  background-image: linear-gradient(135deg, rgba(45, 206, 137, 0.10) 0%, transparent 60%) !important;
  background-blend-mode: overlay;
}

/* ====================================================================== */
/* AiBuilderLabTraining Section 3 — Capstone artifact panel (round 9).    */
/* Sits inside the Curriculum section directly under Module 8. Dark band  */
/* echoes hero/Format-AI-era band so it visually says "this is the        */
/* capstone evidence" without competing with the page final CTA.          */
/* ====================================================================== */
.ablt-capstone {
  border-radius: 1.25rem;
}

.ablt-capstone__item {
  /* Tinted-on-dark surface so each named artifact reads as a discrete card
     against the dark band, with subtle hover lift consistent with the rest
     of the dark-band content patterns on the site. */
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.ablt-capstone__item:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(45, 206, 137, 0.35);
  transform: translateY(-1px);
}

/* ====================================================================== */
/* AiBuilderLabTraining Section 4 — "How this looks in production" cards  */
/* (round 9). Pattern-level production evidence cards inside the Format    */
/* section, sitting after the dark "AI-era software needs more engineering */
/* judgment" band. Each card is a quote with a labeled pattern eyebrow.    */
/* ====================================================================== */
.ablt-prod__card {
  background: #ffffff;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ablt-prod__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1.25rem rgba(20, 20, 22, 0.08) !important;
  border-color: rgba(45, 206, 137, 0.35) !important;
}

.ablt-prod__quote {
  /* Slight italic + left rule reads as "this is field evidence, not a sales
     bullet." Color stays muted dark so the eyebrow tag pops as the lead. */
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #344767;
  padding-left: 0.85rem;
  border-left: 2px solid rgba(45, 206, 137, 0.45);
}

/* ====================================================================== */
/* SHARED: CurriculumToolsRow (.crl-tool*) — used across the training      */
/* cluster pages so the "tools the curriculum runs on" row reads           */
/* consistently. Cursor card carries the .crl-tool--primary modifier with  */
/* a light tint and green-accent border to signal "primary teaching        */
/* vehicle"; the other three cards are flat tool tiles.                   */
/* ====================================================================== */
.crl-tool {
  border-radius: 0.875rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.crl-tool:hover {
  transform: translateY(-1px);
  box-shadow: 0 0.4rem 1rem rgba(20, 20, 22, 0.06) !important;
}

.crl-tool--primary {
  border-color: rgba(45, 206, 137, 0.35) !important;
  background: linear-gradient(180deg, rgba(45, 206, 137, 0.05) 0%, transparent 65%);
}

/* ====================================================================== */
/* SHARED: RulePackTakeawayPanel (.rpt-*) — used across the training       */
/* cluster pages so the "latest Builder Lab rules pack as a take-away"     */
/* promise reads consistently. Light warm-tinted card so it pairs visually */
/* with the dark capstone artifact panel on /ai-builder-lab-training       */
/* (round 10): dark = "what YOU produce", light = "what we GIVE YOU".      */
/* ====================================================================== */
.rpt-card {
  background: linear-gradient(180deg, rgba(45, 206, 137, 0.06) 0%, rgba(255, 255, 255, 0.96) 75%);
  border: 1px solid rgba(45, 206, 137, 0.22);
}

.rpt-block {
  /* Inner sub-blocks for "What's in the pack", "Format & portability", and
     "Version & usage" — light surface that reads as a discrete card on the
     warm-tinted parent panel without competing with it. */
  background: #ffffff;
  border: 1px solid rgba(45, 206, 137, 0.18);
}

.rpt-code {
  /* Inline code style for path tokens like .cursor/rules/*.mdc — slightly
     emphasised so the file-format claim reads concretely. */
  background: rgba(45, 206, 137, 0.10);
  color: #1a7c4f;
  padding: 0.05rem 0.35rem;
  border-radius: 0.25rem;
  font-size: 0.85em;
  font-weight: 600;
}

/* ====================================================================== */
/* AiBuilderLabTraining Section 3 — Module 8 capstone project cards       */
/* (round 11). Two small horizontal cards inside Module 8 listing the     */
/* canonical capstone projects (Business Card Reader, Receipts Reader).   */
/* Subtle warm-tinted surface so the project cards read as concrete       */
/* options without competing with the dark capstone artifact panel that  */
/* lives in the Take-Aways section. */
/* ====================================================================== */
.ablt-capstone-project {
  background: rgba(45, 206, 137, 0.05);
  border: 1px solid rgba(45, 206, 137, 0.22);
  transition: background 0.18s ease, border-color 0.18s ease;
}

.ablt-capstone-project:hover {
  background: rgba(45, 206, 137, 0.08);
  border-color: rgba(45, 206, 137, 0.38);
}

/* ====================================================================== */
/* /ai-software-development-training (round 12) — CSS prefix .asdt-*       */
/* ====================================================================== */
/* Funnel page that lands the "AI software development training" search    */
/* keyword and routes visitors into the canonical curriculum hub at        */
/* /ai-builder-lab-training. Visual treatment borrows the cluster's        */
/* established patterns (.asd-hero*, .ablt-related__card*, .abl-*) so the  */
/* page reads as a coherent member of the cluster while staying compact    */
/* (8 + hero sections; per round-8 §7 brief "stays short and high-         */
/* conversion"). The .asdt-* prefix is reserved for the page-specific      */
/* surfaces below.                                                         */
/* ====================================================================== */

/* Section 2 — Gap-naming cards (.asdt-gap*).
   Red-tinted "against" pattern that borrows the energy of
   .abl-iter-callout--against without coupling the markup. The page uses
   four gap cards (round-11 addendum added the dual-layer card) plus one
   capstone-as-vehicle signal line. */
.asdt-gap__card {
  background: linear-gradient(180deg, rgba(245, 54, 92, 0.05) 0%, #ffffff 80%);
  border: 1px solid rgba(245, 54, 92, 0.18);
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.asdt-gap__card:hover {
  border-color: rgba(245, 54, 92, 0.32);
  transform: translateY(-2px);
}

.asdt-gap__icon {
  /* Slightly muted red so the icon reads as "against" without shouting. */
  color: #c44062;
  font-size: 1.4rem;
}

.asdt-gap__eyebrow {
  /* Eyebrow tag color matches the icon so the "against" framing is
     consistent across the card's framing devices. */
  color: #c44062;
  letter-spacing: 0.1em;
}

.asdt-gap__signal {
  /* Buyer-signal callout below the four gap cards. Light-tinted positive
     surface to contrast with the red gap cards above — flips the visual
     register from "what to avoid" to "what to look for". */
  background: linear-gradient(180deg, rgba(45, 206, 137, 0.06) 0%, #ffffff 80%);
  border: 1px solid rgba(45, 206, 137, 0.22);
}

/* Section 3 — Outcome cards (.asdt-cover*).
   Six clickable cards each routing to the canonical curriculum hub. Light
   hover state borrowed from .ablt-related__card patterns so the cluster
   reads as a coherent set. */
.asdt-cover {
  border-color: rgba(0, 0, 0, 0.08);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.asdt-cover:hover {
  border-color: rgba(45, 206, 137, 0.32);
}

.asdt-cover--dual {
  /* The round-11 dual-layer outcome (AI in the build + AI in the product)
     gets a subtle warm-tinted surface so it reads as the round-11 addition
     without becoming a separate visual register. Same hover behaviour as
     the other cover cards. */
  background: linear-gradient(180deg, rgba(45, 206, 137, 0.04) 0%, #ffffff 75%);
  border-color: rgba(45, 206, 137, 0.22);
}

/* Section 4 — Method panel (.asdt-method*).
   Warm-tinted band that introduces the canonical curriculum hub. Visual
   register intentionally close to the rule-pack take-away panel
   (.rpt-card) — both are positive "this is what's offered" surfaces — but
   tinted slightly differently so they don't read as the same component. */
.asdt-method {
  background: linear-gradient(180deg, rgba(45, 206, 137, 0.07) 0%, rgba(255, 255, 255, 0.96) 70%);
  border: 1px solid rgba(45, 206, 137, 0.22);
}

.asdt-method__stat {
  /* Inner stat tiles for "8 modules / 4 paths / 2 capstones / 1 bundle".
     Light surface that reads as discrete tiles on the warm-tinted parent
     without competing with it. */
  background: #ffffff;
  border: 1px solid rgba(45, 206, 137, 0.18);
}

.asdt-method__tools {
  /* Wrapper for the embedded <CurriculumToolsRow /> at the bottom of the
     method panel. Border-top inherited from utility class; only need to
     ensure the row's contents read on the warm-tinted parent surface. */
  background: transparent;
}

/* Section 6 — Audience routing cards (.asdt-audience).
   Four compact cards routing into /ai-builder-lab-training#learning-paths
   (and #faculty-adoption for the faculty card). Same hover behaviour as
   .asdt-cover so audience cards and outcome cards read as siblings. */
.asdt-audience {
  border-color: rgba(0, 0, 0, 0.08);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.asdt-audience:hover {
  border-color: rgba(45, 206, 137, 0.32);
}

/* ====================================================================== */
/* Shared MethodPortabilityPanel (round 13) — CSS prefix .mpp-*            */
/* ====================================================================== */
/* Surface used near the bottom of the two Cursor-primary training pages   */
/* (/cursor-ai-development-training, /cursor-for-software-teams) per the   */
/* round-8 §8/§9 brief: explicit "Cursor is the teaching vehicle; the     */
/* method is the deliverable" framing so the Cursor-primary positioning   */
/* doesn't read as tool lock-in to faculty / corporate adopters. The      */
/* component itself takes an Audience parameter ("individual" | "team");  */
/* CSS treatment is identical across audiences so the cluster reads as a  */
/* coherent set.                                                          */
/* ====================================================================== */

.mpp-card {
  /* Light-tinted positive surface — same family as the rule-pack panel
     (.rpt-card) so the two take-away-style panels visually rhyme without
     being the same component. Border lifts the panel off the white
     content card it lives in. */
  background: linear-gradient(180deg, rgba(45, 206, 137, 0.06) 0%, rgba(255, 255, 255, 0.96) 70%);
  border: 1px solid rgba(45, 206, 137, 0.22);
}

.mpp-block {
  /* The three inner blocks (Cursor / Adaptable to / Out of scope). White
     surface with a thin neutral border so each block reads as a discrete
     tile on the warm-tinted parent surface. */
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.mpp-code {
  /* Inline code references (e.g. .cursor/rules/*.mdc) inside the panel —
     muted background so the code reads as an inline literal without
     stealing emphasis from the surrounding sentence. */
  background: rgba(0, 0, 0, 0.05);
  padding: 0.05em 0.35em;
  border-radius: 0.25rem;
  font-size: 0.85em;
}

/* ====================================================================== */
/* /cursor-ai-development-training (round 13) — CSS prefix .cadt-*         */
/* ====================================================================== */
/* §8 — Cursor-primary individual learner page. Teaches the Builder Lab    */
/* Method specifically through Cursor; method portable to other AI dev    */
/* environments (carried by the shared MethodPortabilityPanel above).     */
/* Visual register borrows established cluster patterns (.asd-hero*,      */
/* .ablt-outcome*, .ablt-related__card*, .ablt-capstone*) so the page     */
/* reads as a coherent sibling of the canonical hub. The .cadt-* prefix   */
/* is reserved for the page-specific surfaces below.                      */
/* ====================================================================== */

/* Hero — "What Cursor is and isn't" 2-up panel inside the right-column
   card. The two blocks need the same affordance shape but read as
   complementary halves: the "gives" block uses the cluster's positive
   green tint; the "cannot decide" block uses the cluster's against-tinted
   red surface (same vocabulary as .abl-iter-callout--against on the
   /ai-builder-lab method page, kept loose-coupled here). */
.cadt-wontdo__block {
  background: rgba(45, 206, 137, 0.06);
  border: 1px solid rgba(45, 206, 137, 0.22);
}

.cadt-wontdo__block--against {
  background: rgba(245, 54, 92, 0.05);
  border: 1px solid rgba(245, 54, 92, 0.18);
}

.cadt-wontdo__icon,
.cadt-wontdo__eyebrow {
  /* Slightly muted red so the icon and eyebrow read as "against" without
     shouting. Same colour as .asdt-gap__icon for cluster consistency. */
  color: #c44062;
}

/* Section 3 — Touchpoints (.cadt-touchpoint*).
   Pattern → Cursor surface map. Six cards in a 3-up grid; each card has
   a coloured pattern eyebrow at the top and a muted "what you do here"
   line at the bottom. Visual register stays neutral so the cards read as
   a reference grid rather than a sales surface; the closing
   "navigation, not tutorial" note (.cadt-touchpoint__note) gets a
   light-tinted positive surface to flip the register at the bottom. */
.cadt-touchpoint {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.cadt-touchpoint:hover {
  border-color: rgba(45, 206, 137, 0.32);
  transform: translateY(-2px);
}

.cadt-touchpoint__pattern {
  /* The pattern eyebrow — muted dark so the pattern name reads first,
     before the "Cursor surface" headline below it. */
  color: #344767;
}

.cadt-touchpoint__note {
  background: linear-gradient(180deg, rgba(45, 206, 137, 0.06) 0%, #ffffff 80%);
  border: 1px solid rgba(45, 206, 137, 0.22);
}

/* Section 4 — Prompt patterns (.cadt-prompt).
   Four cards in a 2+2 grid. Same surface treatment as .cadt-touchpoint
   so the two new round-11 sections read as a sibling pair, with a
   slightly different border treatment to keep them distinguishable. */
.cadt-prompt {
  background: #ffffff;
  border: 1px solid rgba(45, 206, 137, 0.18);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.cadt-prompt:hover {
  border-color: rgba(45, 206, 137, 0.36);
  box-shadow: 0 6px 18px rgba(45, 206, 137, 0.12);
}

/* Section 5 — Curriculum module link cards (.cadt-modulelink).
   Eight compact cards, each linking to the canonical hub's #curriculum
   anchor. Light surface, light hover so the cards read as a reference
   list rather than a primary CTA grid (the canonical hub is the primary
   destination; these are wayfinders). */
.cadt-modulelink {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: inherit;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.cadt-modulelink:hover {
  border-color: rgba(45, 206, 137, 0.32);
  transform: translateY(-2px);
  text-decoration: none;
}

.cadt-modulelink--capstone {
  /* Module 8 (capstone) gets a subtle warm tint so the eye picks it out
     of the eight-module grid — same affordance pattern as the dual
     outcome card on §7 (.asdt-cover--dual). */
  background: linear-gradient(180deg, rgba(45, 206, 137, 0.06) 0%, #ffffff 80%);
  border-color: rgba(45, 206, 137, 0.22);
}

.cadt-capstonecard {
  /* The named-capstones panel directly under the eight-module grid in §5.
     Light-tinted surface so the capstone projects (which already get
     their own tinted .ablt-capstone-project tiles inside) read as a
     focused unit beneath the modules. */
  background: linear-gradient(180deg, rgba(45, 206, 137, 0.05) 0%, #ffffff 70%);
  border: 1px solid rgba(45, 206, 137, 0.2);
}

/* Inline code references throughout the page (e.g. .cursor/rules/*.mdc,
   /docs/, AGENTS.md). Same treatment as .mpp-code on the portability
   panel for cluster consistency. */
.cadt-code {
  background: rgba(0, 0, 0, 0.05);
  padding: 0.05em 0.35em;
  border-radius: 0.25rem;
  font-size: 0.85em;
}

/* Inline code reference variant for use inside the dark capstone artifact
   panel (.ablt-capstone). The default .cadt-code background reads as a
   black box on the dark gradient surface; this variant uses a light
   transparent fill so the inline literal reads as a code reference
   against the dark surface. */
.cadt-code-onDark {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  padding: 0.05em 0.35em;
  border-radius: 0.25rem;
  font-size: 0.85em;
}

/* ====================================================================== */
/* /cursor-for-software-teams (round 14) — CSS prefix .cfst-*              */
/* ====================================================================== */
/* §9 — Cursor-primary team-scale page. Teaches the Builder Lab Method     */
/* through Cursor at team scale; method portable to other AI dev          */
/* environments (carried by the shared MethodPortabilityPanel near the    */
/* bottom). Visual register borrows established cluster patterns          */
/* (.asd-hero*, .ablt-outcome*, .ablt-related__card*, .ablt-capstone*,    */
/* .builder-lab-engagement__phases*) so the page reads as a coherent      */
/* sibling of §6, §7, §8. The .cfst-* prefix is reserved for the page-    */
/* specific surfaces below.                                                */
/* ====================================================================== */

/* Hero — "What changes at team scale" 2-up panel inside the right-column
   card. Same shape as §8's .cadt-wontdo* but with a different color
   semantic: §8 contrasts Cursor capabilities (green) vs Cursor decision
   gaps (red); §9 contrasts individual scope (muted) vs team scope (green).
   The two halves read as a comparison rather than a warning. */
.cfst-changes__block {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.cfst-changes__block--team {
  background: rgba(45, 206, 137, 0.06);
  border: 1px solid rgba(45, 206, 137, 0.22);
}

.cfst-changes__icon,
.cfst-changes__eyebrow {
  /* Muted slate so the "individual" half reads as the baseline against
     which the team-scale half (in green) gains visual weight. */
  color: #67748e;
}

/* Section 1 — Failure modes (.cfst-failure*).
   Red-tinted "against" surface naming three team-scale failure modes the
   curriculum addresses. Same vocabulary as .asdt-gap__card on §7 and
   .abl-iter-callout--against on the method page, kept loose-coupled here.
   Section closes with a positive-tinted .cfst-failure__signal callout that
   flips the visual register from "what to avoid" to "what to put in
   place" — pointing readers at the AdoptionPath section below. */
.cfst-failure__card {
  background: linear-gradient(180deg, rgba(245, 54, 92, 0.05) 0%, #ffffff 80%);
  border: 1px solid rgba(245, 54, 92, 0.18);
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.cfst-failure__card:hover {
  border-color: rgba(245, 54, 92, 0.32);
  transform: translateY(-2px);
}

.cfst-failure__icon,
.cfst-failure__eyebrow {
  /* Same muted red as .asdt-gap__icon and .cadt-wontdo__icon — cluster
     consistency for "against" framing devices. */
  color: #c44062;
  font-size: 1.4rem;
}

.cfst-failure__signal {
  /* Light-tinted positive surface to contrast with the red failure cards
     above. Same family as .asdt-gap__signal on §7 — flips the visual
     register from "what to avoid" to "what to put in place". */
  background: linear-gradient(180deg, rgba(45, 206, 137, 0.06) 0%, #ffffff 80%);
  border: 1px solid rgba(45, 206, 137, 0.22);
}

/* Section 3 — Outcomes team-additions (.cfst-outcome--team).
   The 8 base outcomes use the existing .ablt-outcome treatment unchanged.
   The 3 team-scale additions get a tinted variant so the eye reads them
   as "team-scale additions on top of the canonical 8" rather than as
   "11 outcomes of the same kind". The badge tag (.cfst-outcome__badge)
   makes the team-addition framing explicit on each card. */
.cfst-outcome--team {
  background: linear-gradient(180deg, rgba(45, 206, 137, 0.05) 0%, #ffffff 75%);
  border-color: rgba(45, 206, 137, 0.22);
}

.cfst-outcome__badge {
  background: rgba(45, 206, 137, 0.15);
  color: #2dce89;
}

/* Section 4 — Touchpoints (.cfst-touchpoint*).
   Same surface treatment as §8's .cadt-touchpoint*; the team-shared
   dimension is carried by the .cfst-touchpoint__shared eyebrow tag on
   each card, not by a separate surface treatment. */
.cfst-touchpoint {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.cfst-touchpoint:hover {
  border-color: rgba(45, 206, 137, 0.32);
  transform: translateY(-2px);
}

.cfst-touchpoint__pattern {
  color: #344767;
}

.cfst-touchpoint__shared {
  /* The team-shared eyebrow tag — light-tinted positive surface so it reads
     as a structural fact about the surface, not a marketing emphasis. */
  background: rgba(45, 206, 137, 0.12);
  color: #2dce89;
}

.cfst-touchpoint__note {
  /* Same closing-note surface as .cadt-touchpoint__note on §8 — light-
     tinted positive surface flipping the section's visual register at the
     bottom. */
  background: linear-gradient(180deg, rgba(45, 206, 137, 0.06) 0%, #ffffff 80%);
  border: 1px solid rgba(45, 206, 137, 0.22);
}

/* Section 5 — Prompt patterns (.cfst-prompt + .cfst-prompt--team).
   Compact base-category cards (4 in a 2×2 grid; .cfst-prompt) plus larger
   team-specific cards (3 in a 3-up grid; .cfst-prompt--team). Same family
   as §8's .cadt-prompt; the --team variant uses a tinted background so the
   eye reads it as "team-specific addition" rather than "more of the same". */
.cfst-prompt {
  background: #ffffff;
  border: 1px solid rgba(45, 206, 137, 0.18);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.cfst-prompt:hover {
  border-color: rgba(45, 206, 137, 0.36);
  box-shadow: 0 6px 18px rgba(45, 206, 137, 0.12);
}

.cfst-prompt--team {
  background: linear-gradient(180deg, rgba(45, 206, 137, 0.05) 0%, #ffffff 75%);
  border-color: rgba(45, 206, 137, 0.22);
}

/* Section 6 — Curriculum module link cards (.cfst-modulelink + variant).
   Same compact link-card pattern as §8's .cadt-modulelink. Module 8 (the
   capstone) gets the warm-tinted .cfst-modulelink--capstone variant so the
   eye picks it out of the eight-module grid. */
.cfst-modulelink {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: inherit;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.cfst-modulelink:hover {
  border-color: rgba(45, 206, 137, 0.32);
  transform: translateY(-2px);
  text-decoration: none;
}

.cfst-modulelink--capstone {
  background: linear-gradient(180deg, rgba(45, 206, 137, 0.06) 0%, #ffffff 80%);
  border-color: rgba(45, 206, 137, 0.22);
}

.cfst-capstonecard {
  /* The named-capstones panel directly under the eight-module grid in §6.
     Same pattern as §8's .cadt-capstonecard — light-tinted surface so the
     two named capstone tiles inside (which carry .ablt-capstone-project)
     read as a focused unit beneath the modules. */
  background: linear-gradient(180deg, rgba(45, 206, 137, 0.05) 0%, #ffffff 70%);
  border: 1px solid rgba(45, 206, 137, 0.2);
}

/* Section 7 — Take-Aways team-discipline overlay items (.cfst-capstone__overlay).
   Items inside the dark capstone artifact panel (.ablt-capstone) on §9
   that appear in the team-discipline overlay sub-grid (4 cards beneath
   the standard 6). Visually distinct from the standard 6 items
   (.ablt-capstone__item) so the eye reads "+ team overlay" rather than
   "10 items of the same kind". A subtle tinted surface inside the dark
   gradient parent gives the overlay items their own visual weight. */
.cfst-capstone__overlay {
  background: rgba(45, 206, 137, 0.1);
  border: 1px solid rgba(45, 206, 137, 0.28);
}

.cfst-rulepack__intro {
  /* Small framing callout above the shared <RulePackTakeawayPanel /> on §9.
     Light-tinted positive surface that pre-positions the rule pack as the
     team's shared t=0 baseline before the panel itself elaborates. */
  background: linear-gradient(180deg, rgba(45, 206, 137, 0.06) 0%, #ffffff 80%);
  border: 1px solid rgba(45, 206, 137, 0.22);
}

/* Inline code references throughout §9 (e.g. .cursor/rules/*.mdc, /docs/,
   AGENTS.md). Same treatment as .cadt-code on §8 / .mpp-code on the
   shared portability panel for cluster consistency. */
.cfst-code {
  background: rgba(0, 0, 0, 0.05);
  padding: 0.05em 0.35em;
  border-radius: 0.25rem;
  font-size: 0.85em;
}